/* ============================================================
   FREECELL — the game's own layer (board geometry, chrome, panels).
   Requires solitaire-family.css to be linked BEFORE this file.
   Redesign 2026-10-10 (briefs/free-cell-solitaire-decisions.md):
   the redesigned Klondike's components (same class names, kl-*), on
   FreeCell's own board: eight columns, four free cells, four
   foundations (§4: same design family, distinct FreeCell gameplay).
   Renderer constraints: no gap / row-gap / column-gap, no inset:
   shorthand, no double-position gradient colour stops.
   ============================================================ */

/* ---------------------------------------------------- felt (Q2) --- */
:root{
  --table-bg:#1E7A3C;
  --table-deep:#145329;
  --table-highlight:#259549;
  /* Plates: small words never sit on the bare felt (white on #1E7A3C is
     5.0:1, the rule asks 7:1 under 16px). */
  --kl-plate:rgba(6,30,14,.58);
  --kl-plate-strong:rgba(6,30,14,.74);
  --kl-panel-top:#145329;
  --kl-panel-bottom:#0C3519;
  --kl-line-h:28px;
}
body.kl{
  background:radial-gradient(circle at 50% 38%, #259549 0%, #1E7A3C 58%, #145329 100%);
  background-attachment:fixed;
  height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
body.kl footer{ display:none; }

.kl-game{
  flex:1 1 auto; min-height:0; min-width:0;
  width:min(1200px,100%); margin-left:auto; margin-right:auto;
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  padding:4px clamp(8px,1.4vw,20px) max(6px, env(safe-area-inset-bottom));
}

/* -------------------------------------------------- header (Q8) --- */
.kl-header{
  flex:0 0 auto; display:flex; align-items:center;
  min-height:48px; padding-bottom:4px;
}
.kl-title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(17px,1.9vw,22px);
  color:var(--text-primary); white-space:nowrap; line-height:1.1;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.kl-title-short{ display:none; }
.kl-stats{
  display:flex; align-items:center; margin-left:auto;
  background:var(--kl-plate); border-radius:999px; padding:5px 14px;
}
.kl-stat{ display:flex; align-items:baseline; white-space:nowrap; }
.kl-stat + .kl-stat{ margin-left:14px; }
.kl-stat label{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-primary); margin-right:6px;
}
.kl-stat .val{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--text-primary); }
.kl-utility{ display:flex; align-items:center; margin-left:12px; }
.kl-utility > * + *{ margin-left:6px; }

/* -------------------------------------------------------- buttons --- */
.kl-btn{
  font-family:var(--font-ui); font-size:14px; font-weight:700; color:var(--text-primary);
  background:var(--kl-plate); border:1px solid rgba(255,255,255,.22); border-radius:10px;
  min-height:44px; padding:4px 14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  transition:border-color .16s ease, background .16s ease, filter .16s ease;
}
.kl-btn:hover:not(:disabled){ border-color:var(--action); }
.kl-btn:focus-visible{ outline:2px solid var(--action); outline-offset:2px; }
.kl-btn:disabled{ cursor:not-allowed; color:#DCE6DF; background:rgba(6,30,14,.40); border-color:rgba(255,255,255,.12); }
.kl-btn[hidden]{ display:none; }
.kl-btn .kl-glyph{ font-size:16px; line-height:1; margin-right:6px; }
.kl-primary{ background:var(--action); color:var(--action-text); border-color:var(--action); font-weight:800; }
.kl-primary:hover:not(:disabled){ filter:brightness(1.07); }
/* Icon buttons carry their word underneath (standing rule). */
.kl-icon-btn{ flex-direction:column; min-width:52px; padding:3px 8px; }
.kl-icon-btn .kl-glyph{ margin-right:0; margin-bottom:2px; }
.kl-icon-btn .kl-label{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}
.kl-controls .kl-label{ font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.kl-icon-btn[aria-pressed="true"]{ border-color:var(--action); }

/* ------------------------------------------- bottom controls (§15) --- */
.kl-controls{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  padding-top:6px;
}
.kl-controls > .kl-btn + .kl-btn{ margin-left:10px; }
.kl-utility-slot{ display:none; }
.kl-short{ display:none; }
.kl-game[data-layout="phone"] .kl-long{ display:none; }
.kl-game[data-layout="phone"] .kl-short{ display:inline; }

/* ----------------------------------------------------------- board --- */
.kl-game{
  --k-card-w:max(34px, min(87px, calc((min(900px, 100vw - 16px) - 6 * clamp(18px, 2.9vw, 34px)) / 7)));
  --k-card-h:calc(var(--k-card-w) / 0.70);
  --k-col-gap:clamp(5px, 1.2vw, 13px);
  --k-idx-fs:13px;
}
.k-board{ flex:1 1 auto; min-height:0; overflow:hidden; position:relative; display:flex; flex-direction:column; width:100%; }
/* §15/§26 — the four free cells on the left, the four foundations on the right. */
.fc-top-row{ flex:0 0 auto; display:flex; justify-content:space-between; align-items:flex-start; }
.fc-cells{ display:flex; }
.fc-cells > * + *{ margin-left:var(--k-col-gap); }
.fc-foundations{ display:flex; }
.fc-foundations > * + *{ margin-left:var(--k-col-gap); }

/* Q1: the gap between the top row and the tableau carries the one instruction line (§20). */
.kl-line-slot{ flex:0 0 auto; height:var(--kl-line-h); display:flex; align-items:center; justify-content:center; }
.kl-line{
  margin:0; max-width:100%; font-size:13px; font-weight:600; line-height:1.3; color:var(--text-primary);
  background:var(--kl-plate-strong); border-radius:999px; padding:3px 14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity .18s ease;
}
.kl-line.show{ opacity:1; }
.kl-line.is-warn{ box-shadow:inset 0 0 0 1px rgba(240,184,75,.7); }

.k-slot{
  position:relative; width:var(--k-card-w); height:var(--k-card-h);
  border:1.5px dashed rgba(255,255,255,.62); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,30,14,.22);
}
.k-slot .k-card{ position:absolute; left:0; top:0; }
.k-slot-icon{ color:#EAF3EC; font-size:calc(var(--k-card-w) * .38); line-height:1; }
.k-slot:focus-visible, .k-card:focus-visible, .freecell-column:focus-visible{ outline:2px solid var(--action); outline-offset:2px; }
.freecell-foundation.can-drop, .freecell-column.can-drop::before{ border-color:var(--action); background:rgba(240,184,75,.12); }

/* §22 — seven columns, evenly spaced, connected. */
.fc-tableau{ flex:1 1 auto; min-height:0; display:flex; justify-content:space-between; overflow:hidden; }
.freecell-column{ position:relative; width:var(--k-card-w); min-height:var(--k-card-h); }
.freecell-column .k-card{ position:absolute; left:0; }
.freecell-column.can-drop::before{
  content:''; position:absolute; left:0; top:0; width:var(--k-card-w); height:var(--k-card-h);
  border:1.5px dashed var(--action); border-radius:var(--radius-sm); box-sizing:border-box;
}
.freecell-column:empty::after{
  content:''; position:absolute; left:0; top:0; width:var(--k-card-w); height:var(--k-card-h);
  border:1.5px dashed rgba(255,255,255,.45); border-radius:var(--radius-sm); box-sizing:border-box;
}

/* ----------------------------------------------------------- cards --- */
/* The card face, selection and glows are in the shared solitaire-cards.css
   (kit/solitaire). Only FreeCell's own card rules stay here. */
/* Q12: a short glow on the foundations when the game is won. */
.kl-game[data-phase="won"] .freecell-foundation .k-card{ animation:kGlow 1.2s ease-in-out 2; }

/* --------------------------------------------------------- panels --- */
.kl-overlay{
  position:fixed; left:0; top:0; width:100%; height:100%; z-index:900;
  display:none; align-items:center; justify-content:center;
  background:rgba(4,20,9,.70); padding:16px; box-sizing:border-box;
}
.kl-overlay.open{ display:flex; }
.kl-panel{
  width:min(92vw, 480px); max-height:calc(100dvh - 32px); overflow-y:auto; box-sizing:border-box;
  padding:22px 24px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, var(--kl-panel-top), var(--kl-panel-bottom));
  border:1px solid rgba(255,255,255,.16); box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.kl-panel h2{ font-family:var(--font-display); color:var(--action); margin:0 0 6px; font-size:clamp(22px,2.8vw,28px); }
.kl-sub, .kl-note{ font-size:14px; font-weight:600; color:var(--text-primary); line-height:1.45; margin:0 auto 14px; max-width:400px; }
.kl-note{ font-size:13px; margin:10px auto 0; }
.kl-note[hidden]{ display:none; }
.kl-wide{ display:flex; width:min(100%, 320px); margin:0 auto 10px; min-height:48px; }
.kl-draw-choice, .kl-start-choices{ display:flex; justify-content:center; flex-wrap:wrap; }
.kl-draw-choice{ margin-bottom:12px; }
.kl-draw-choice > * + *, .kl-start-choices > * + *{ margin-left:8px; }
.kl-choice{ min-height:48px; font-size:15px; padding:6px 16px; }
.kl-choice[aria-pressed="true"], .kl-choice.is-remembered{ background:var(--action); color:var(--action-text); border-color:var(--action); }
.kl-rules{ text-align:left; }
.kl-rules h2{ text-align:center; }
.kl-rules-list{ list-style:none; margin:0 0 14px; padding:0; }
.kl-rules-list li{ font-size:14px; font-weight:600; line-height:1.5; color:var(--text-primary); padding:7px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.kl-rules-list li:last-child{ border-bottom:none; }
.kl-toggle-row{ display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:600; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:6px; text-align:left; }
.kl-toggle-row:last-of-type{ margin-bottom:16px; }
.kl-switch{ position:relative; width:52px; height:30px; flex:0 0 auto; }
.kl-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.kl-slider{ position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(255,255,255,.22); border-radius:999px; transition:background .16s; }
.kl-slider::before{ content:''; position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .16s; }
.kl-switch input:checked + .kl-slider{ background:var(--action); }
.kl-switch input:checked + .kl-slider::before{ transform:translateX(22px); }
.kl-switch input:focus-visible + .kl-slider{ outline:2px solid var(--action); outline-offset:2px; }
.kl-win-facts{ display:flex; justify-content:center; margin:6px 0 18px; }
.kl-win-facts > div{ margin:0 14px; }
.kl-win-facts dt{ font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-primary); }
.kl-win-facts dd{ margin:2px 0 0; font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--text-primary); }

/* ------------------------------------------- phones, held upright --- */
/* §53: header = title + Score · Time · Moves; every button in the bottom row. */
.kl-game[data-layout="phone"] .kl-header{ min-height:44px; }
/* 19px bold counts as large text (3:1): white on the header green is 3.57:1, which
   18px did not pass (contrast sweep, Ronan 2026-10-16 "as recommended"). */
.kl-game[data-layout="phone"] .kl-title{ font-size:19px; }
.kl-game[data-layout="phone"] .kl-title-long{ display:none; }
.kl-game[data-layout="phone"] .kl-stats{ padding:3px 10px; }
.kl-game[data-layout="phone"] .kl-stat{ flex-direction:column; align-items:center; }
.kl-game[data-layout="phone"] .kl-stat + .kl-stat{ margin-left:10px; }
.kl-game[data-layout="phone"] .kl-stat label{ margin-right:0; font-size:12px; letter-spacing:.02em; line-height:1.1; }
.kl-game[data-layout="phone"] .kl-stat .val{ font-size:14px; line-height:1.15; }
.kl-game[data-layout="phone"] .kl-controls{ justify-content:space-between; padding-top:5px; }
.kl-game[data-layout="phone"] .kl-controls > .kl-btn + .kl-btn{ margin-left:0; }
.kl-game[data-layout="phone"] .kl-controls .kl-btn,
.kl-game[data-layout="phone"] .kl-utility-slot .kl-btn{ flex-direction:column; min-width:44px; padding:3px 4px; }
.kl-game[data-layout="phone"] .kl-controls .kl-glyph{ margin-right:0; margin-bottom:2px; }
.kl-game[data-layout="phone"] .kl-controls .kl-label{ font-family:var(--font-ui); font-size:13px; font-weight:700; text-transform:none; letter-spacing:0; }
.kl-game[data-layout="phone"] .kl-utility-slot .kl-label{ font-size:12px; }
.kl-game[data-layout="phone"] .kl-utility-slot, .kl-game[data-layout="phone"] .kl-utility-slot .kl-utility{ display:contents; }
.kl-game[data-layout="phone"] .kl-utility-slot .kl-utility{ margin-left:0; }
.kl-game[data-layout="phone"] .kl-utility-slot .kl-utility > * + *{ margin-left:0; }
.kl-game[data-layout="phone"] .kl-controls{ justify-content:space-between; }
.kl-game[data-layout="phone"] #btnAutoComplete{ padding:3px 8px; }
.kl-game[data-layout="phone"] .kl-line{ font-size:13px; padding:3px 8px; letter-spacing:-.005em; }
.kl-game[data-layout="phone"] { --kl-line-h:24px; }
.kl-game[data-layout="phone"] .kl-panel{ padding:14px 14px 12px; }
.kl-game[data-layout="phone"] .kl-rules-list{ margin-bottom:10px; }
.kl-game[data-layout="phone"] .kl-rules-list li{ font-size:13px; padding:4px 0; line-height:1.35; }
.kl-game[data-layout="phone"] .kl-panel h2{ font-size:21px; margin-bottom:4px; }
/* sideways: the rules in two columns so the panel fits the height */
.kl-game[data-layout="side"] .kl-rules{ width:min(94vw, 780px); padding:14px 18px 12px; }
.kl-game[data-layout="side"] .kl-rules-list{ column-count:2; margin-bottom:8px; }
.kl-game[data-layout="side"] .kl-rules-list li{ font-size:13px; line-height:1.35; padding:4px 0; break-inside:avoid; }
.kl-game[data-layout="side"] .kl-panel h2{ font-size:21px; margin-bottom:4px; }
.kl-game[data-layout="side"] .kl-panel{ padding-top:14px; padding-bottom:12px; }

/* short phones (the iPhone SE frame, 345x504): every pixel of height goes to
   the tableau — slimmer header and margins, a tighter Rules panel. */
@media (max-height:540px) and (orientation:portrait){
  .kl-game[data-layout="phone"]{ padding-top:2px; padding-bottom:max(4px, env(safe-area-inset-bottom)); }
  .kl-game[data-layout="phone"] .kl-header{ min-height:40px; padding-bottom:2px; }
  .kl-game[data-layout="phone"] .kl-controls{ padding-top:3px; }
  .kl-game[data-layout="phone"] .kl-panel{ padding:10px 12px 10px; max-height:calc(100dvh - 16px); }
  .kl-game[data-layout="phone"] .kl-rules-list li{ line-height:1.28; padding:3px 0; }
  .kl-game[data-layout="phone"] .kl-rules-list{ margin-bottom:6px; }
  .kl-game[data-layout="phone"] .kl-panel h2{ font-size:20px; margin-bottom:2px; }
  .kl-overlay{ padding:8px; }
}

/* ----------------------------------------- phones, held sideways --- */
/* Q15: a column of six face-down and thirteen face-up cards cannot fit under
   a header and a top row in 390px, so held sideways the game recomposes
   (§64 step 10): stock, waste, the stats and Undo / Hint / New game down the
   left; the foundations (two by two), Rules, Coach and Settings down the
   right; the line and the tableau take the whole height between them. */
.kl-side{ display:none; }
.kl-game[data-layout="side"]{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr); padding-top:6px; }
.kl-game[data-layout="side"] .kl-header{ display:none; }
.kl-game[data-layout="side"] .kl-side{ display:flex; flex-direction:column; align-items:stretch; min-height:0; }
.kl-game[data-layout="side"] .kl-side-left{ grid-column:1; margin-right:10px; }
.kl-game[data-layout="side"] .k-board{ grid-column:2; }
.kl-game[data-layout="side"] .kl-side-right{ grid-column:3; margin-left:10px; }
.kl-game[data-layout="side"] .fc-top-row{ display:none; }
.kl-game[data-layout="side"] .kl-side .fc-cells, .kl-game[data-layout="side"] .kl-side .fc-foundations{ display:flex; flex-wrap:wrap; width:calc(var(--k-card-w) * 2 + 6px); }
.kl-game[data-layout="side"] .kl-side .fc-cells > *{ margin:0 0 6px 0; }
.kl-game[data-layout="side"] .kl-side .fc-cells > :nth-child(2n){ margin-left:6px; }
.kl-game[data-layout="side"] .kl-side .fc-foundations{ flex-wrap:wrap; width:calc(var(--k-card-w) * 2 + 6px); }
.kl-game[data-layout="side"] .kl-side .fc-foundations > *{ margin:0 0 6px 0; }
.kl-game[data-layout="side"] .kl-side .fc-foundations > :nth-child(2n){ margin-left:6px; }
.kl-game[data-layout="side"] .kl-stats{ flex-direction:column; align-items:stretch; margin:8px 0 0; border-radius:10px; padding:4px 10px; }
.kl-game[data-layout="side"] .kl-stat{ justify-content:space-between; }
.kl-game[data-layout="side"] .kl-stat + .kl-stat{ margin-left:0; }
.kl-game[data-layout="side"] .kl-stat .val{ font-size:14px; }
.kl-game[data-layout="side"] .kl-controls, .kl-game[data-layout="side"] .kl-utility{ flex-direction:column; align-items:stretch; margin:8px 0 0; padding:0; }
.kl-game[data-layout="side"] .kl-controls > .kl-btn + .kl-btn, .kl-game[data-layout="side"] .kl-utility > * + *{ margin-left:0; margin-top:6px; }
.kl-game[data-layout="side"] .kl-controls .kl-btn, .kl-game[data-layout="side"] .kl-utility .kl-btn{ flex-direction:row; justify-content:flex-start; min-height:44px; padding:2px 10px; }
.kl-game[data-layout="side"] .kl-utility .kl-glyph{ margin-right:6px; margin-bottom:0; }
.kl-game[data-layout="side"] .kl-controls .kl-label, .kl-game[data-layout="side"] .kl-utility .kl-label{ font-family:var(--font-ui); font-size:13px; text-transform:none; letter-spacing:0; }
.kl-game[data-layout="side"] .kl-utility-slot{ display:none; }
.kl-short{ display:none; }
.kl-game[data-layout="phone"] .kl-long{ display:none; }
.kl-game[data-layout="phone"] .kl-short{ display:inline; }
.kl-game[data-layout="side"] { --kl-line-h:24px; }

/* §72 — reduced motion: shorter movement, the state change still shown. */
@media (prefers-reduced-motion: reduce){
  .k-card, .k-score-delta, .k-hint-glow{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .k-card.selected{ transform:none; }
}


/* ============================================================ FreeCell only */
#freecellGame{
  /* Motion (§18, §21, §22; Q3): the controller reads these, so the stylesheet
     and the moves cannot drift, and reduced motion shortens all of them. */
  --fc-move-ms:220ms; --fc-seq-ms:300ms; --fc-return-ms:200ms; --fc-reveal-ms:280ms;
}
/* §15: a free cell and a foundation must never be mistaken for each other —
   they differ in border, fill and mark, not in colour alone. */
.freecell-cell{ border-style:dashed; }
.freecell-foundation{ border:1.5px solid rgba(240,184,75,.75); background:rgba(6,30,14,.30); }
.fc-suit-mark{ font-size:calc(var(--k-card-w) * .44); line-height:1; color:#EAF3EC; }
.fc-suit-mark.red{ color:#FFD6D9; }   /* 4.58:1 on the foundation green (was #FFC2C6, 3.96:1), 2026-10-16 */
.freecell-cell.can-drop, .freecell-foundation.can-drop{ border-color:var(--action); border-style:solid; background:rgba(240,184,75,.16); }
.freecell-cell.is-illegal-target, .freecell-foundation.is-illegal-target{ opacity:.55; border-color:rgba(255,255,255,.28); }
/* An empty column reads as a destination, never as a free cell (§25). */
.freecell-column.is-empty::after{ border-style:solid; border-color:rgba(255,255,255,.38); background:rgba(6,30,14,.18); }
/* §22: the card a move has just made accessible, pointed out briefly. */
@keyframes fcReveal{ 0%{ box-shadow:0 0 0 0 rgba(240,184,75,0); } 35%{ box-shadow:0 0 0 4px rgba(240,184,75,.95); } 100%{ box-shadow:0 0 0 0 rgba(240,184,75,0); } }
.k-card.is-revealed{ animation:fcReveal var(--fc-reveal-ms) ease-out; }
.k-card.is-flying{ z-index:600; }
.kl-stat.kl-capacity .val{ color:#FFE3A3; }
@media (prefers-reduced-motion: reduce){
  #freecellGame{ --fc-move-ms:40ms; --fc-seq-ms:40ms; --fc-return-ms:40ms; --fc-reveal-ms:40ms; }
  .k-card.is-revealed{ animation-duration:40ms; }
}
.is-landing.freecell-column::before, .freecell-cell.is-landing, .freecell-foundation.is-landing{ box-shadow:0 0 0 3px var(--action); }
.freecell-column.is-landing::before{ border-width:2.5px; }
/* §20: the brief's instruction strings, word for word, in sentence case like
   the rest of the family's lines (in capitals the brief's longest string,
   "Not enough free space to move this sequence", cannot fit a 330px phone). */
/* Q2: a covered card's index sits 1px from its top edge so a 13px rank and
   suit fit the 18px floor step whole. */
.freecell-column .k-card.is-covered .corner:not(.bottom){ top:var(--k-idx-top, 2px); }
/* sideways: the line at the top of the right column, wrapping if it must */
.kl-game[data-layout="side"] .kl-side .kl-line-slot{ height:auto; min-height:24px; margin-bottom:6px; }
.kl-game[data-layout="side"] .kl-side .kl-line{ white-space:normal; text-align:center; border-radius:10px; line-height:1.25; padding:4px 8px; }
.kl-game[data-layout="side"] .kl-side #btnAutoComplete{ margin-top:6px; min-height:44px; }
/* eight columns on a phone: the page's side padding goes to the cards */
.kl-game[data-layout="phone"]{ padding-left:4px; padding-right:4px; }
/* Ronan 09:26 "b": a covered card shows its rank at the left and its suit at
   the right-hand edge, so the strip reads edge to edge. */
.freecell-column .k-card.is-covered .corner:not(.bottom){ right:5px; justify-content:space-between; align-items:center; }
.freecell-column .k-card.is-covered .corner:not(.bottom) .s{ margin-left:0; }
/* V8C (the FreeCell brief): no text below 13px — the header labels and the
   utility buttons' words are 13px here, not the family's 12px. */
.kl-stat label, .kl-icon-btn .kl-label, .kl-game[data-layout="phone"] .kl-utility-slot .kl-label, .kl-game[data-layout="phone"] .kl-stat label{ font-size:13px; }
.kl-game[data-layout="phone"] .kl-stat label{ letter-spacing:0; }

/* Ronan 2026-10-10 (standing rule): the instruction line keeps visible space
   from the row above and from the cards — 8px desktop, 6px phones — measured to
   a selected card too (it lifts 5px and its outline adds 3px). */
.kl-game:not([data-layout="side"]) .kl-line-slot{ height:auto; padding:8px 0 16px; }
.kl-game[data-layout="phone"] .kl-line-slot{ padding:6px 0 14px; }

/* First paint (Ronan 2026-10-16, A): the board stays invisible until the controller has
   sized the cards, so it never paints at the stylesheet's size and then jumps. */
.kl-game:not(.is-sized) .k-board{ visibility:hidden; }

/* Solitaire family F07 (Ronan 2026-10-18, from Golf): buttons in a panel never
   touch, also when they wrap onto a second row — 8px apart both ways. */
#freecellGame .kl-start-choices > *{ margin:4px; }
#freecellGame .kl-start-choices > * + *{ margin-left:4px; }
#freecellGame .kl-start-choices{ margin-left:-4px; margin-right:-4px; }
/* F09 (Ronan 2026-10-18): on phones a card's tap area reaches 2px into the gap
   either side — eight columns leave no room for 44px, so each card gets its
   whole column width (card plus gap). */
.kl-game[data-layout="phone"] .k-board .k-card::before, .kl-game[data-layout="side"] .k-board .k-card::before{ content:''; position:absolute; top:0; bottom:0; left:-2px; right:-2px; }

/* UX standard 2026-10-26: "Or start a new game:" above the start choices when a game is saved. */
.start-or{ margin:4px 0 8px; font-size:14px; font-weight:700; color:var(--text-primary, #F6F7F4); }
.start-or[hidden]{ display:none; }