/* ============================================================
   FORTY THIEVES — the game's own layer (board geometry, chrome, panels).
   Requires solitaire-family.css to be linked BEFORE this file.
   Brief: briefs/forty-thieves-solitaire-brief.md (the family kl-* chrome;
   Forty Thieves' own board: a top row of stock, waste and eight
   foundations over ten columns, Spider's card size on phones — P1/P2).
   The chrome section below is Golf's kl-* layer, unchanged.
   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. */

/* 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, .s-column:focus-visible{ outline:2px solid var(--action); outline-offset:2px; }

/* §22 — seven columns, evenly spaced, connected. */
.s-tableau{ flex:1 1 auto; min-height:0; display:flex; justify-content:space-between; overflow:hidden; }
.s-column{ position:relative; width:var(--k-card-w); min-height:var(--k-card-h); }
.s-column .k-card{ position:absolute; left:0; }
.s-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;
}
.s-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 this game's own card rules stay here. */

/* --------------------------------------------------------- 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"] .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"] .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. */




/* ===================================================== Forty Thieves only */
#ftGame{
  /* Motion (brief S33, decision Q14): the controller reads these tokens. */
  --ft-travel-ms:230ms; --ft-finish-ms:110ms; --ft-end-pause-ms:1400ms;
}
@media (prefers-reduced-motion: reduce){
  /* S33: half the bands, never zero; the pause before an end panel is a reading pause and stays. */
  #ftGame{ --ft-travel-ms:115ms; --ft-finish-ms:55ms; }
  #ftGame .k-card.is-flying{ transition-duration:115ms !important; }
  #ftGame .k-hint-glow{ animation:none !important; box-shadow:0 0 0 3px #fff; }
  #ftGame[data-layout="phone"] .k-hint-glow{ box-shadow:inset 0 0 0 3px #1A1F1D; }
}
/* the family card back (Klondike's): the stock */
.k-card.is-face-down{
  cursor:default; background-color:#8E2C3A;
  background-image:
    repeating-linear-gradient(45deg, rgba(250,250,247,.75) 0px, rgba(250,250,247,.75) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 7px),
    repeating-linear-gradient(-45deg, rgba(250,250,247,.75) 0px, rgba(250,250,247,.75) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 7px);
  border:2px solid var(--card-bg);
}
.k-card.is-face-down .corner, .k-card.is-face-down .pip{ display:none; }
.k-card.is-flying{ z-index:600 !important; }

.ft-board{ align-items:center; }

/* S25: the info line — the way to play, the deal, cards home */
.ft-info{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; max-width:100%; padding:2px 0 6px; }
.ft-chip{
  font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-primary); background:var(--kl-plate-strong); border-radius:999px; padding:2px 10px; white-space:nowrap; margin:0 4px;
}
.ft-chip[hidden]{ display:none; }
.ft-counts{ display:flex; align-items:center; }
#ftWayBadge{ box-shadow:inset 0 0 0 1px rgba(240,184,75,.75); }

/* S6: the ten columns take the height under the top row */
.ft-play{ flex:1 1 auto; min-height:0; display:flex; align-items:flex-start; justify-content:center; width:100%; }
.ft-tableau{ display:flex; align-items:flex-start; flex:0 0 auto; }
.ft-col{ position:relative; width:var(--k-card-w); height:var(--ft-avail, 400px); flex:0 0 auto; }
.ft-col: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,.62); border-radius:var(--radius-sm); box-sizing:border-box; background:rgba(6,30,14,.22);
}
.ft-col .k-card{ position:absolute; left:0; }
.ft-col .k-card[data-tap^="c"]{ cursor:pointer; }
/* Q17: a covered card cannot be picked up, so it shows no hand cursor (a tap on it only explains why) */
.ft-col .k-card.is-covered{ cursor:default; }
/* S22 / F09: a face-up card's tap area is its strip plus half the gap either side (at most 6px) */
.ft-col .k-card[data-tap^="c"]::before{ content:''; position:absolute; top:0; bottom:0; left:max(-6px, calc(var(--ft-gap, 4px) / -2)); right:max(-6px, calc(var(--ft-gap, 4px) / -2)); }
.ft-col:focus-visible{ outline:2px solid var(--action); outline-offset:2px; border-radius:var(--radius-sm); }
.ft-col .k-card:focus-visible{ outline:3px solid #fff; outline-offset:1px; }
/* M1: the deepest face-up cards of a squeezed column show their top edge; press and hold to read them */
.ft-col .k-card.is-squeezed .corner{ visibility:hidden; }
.ft-col.is-squeezed::before{
  content:''; position:absolute; left:-4px; top:0; height:calc(100% - 4px); width:3px; border-radius:2px;
  background:repeating-linear-gradient(180deg, rgba(240,184,75,.9) 0px, rgba(240,184,75,.9) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
}
/* S23: Coach on — a held group's legal destinations: the family's dashed gold outline */
.ft-col.k-target:empty::after, .ft-col.can-drop:empty::after{ border:2px dashed var(--action); }
.ft-col.k-target:not(:empty) > .k-card:last-child, .ft-col.can-drop:not(:empty) > .k-card:last-child{ outline:2px dashed var(--action); outline-offset:2px; }
.ft-found.k-target, .ft-found.can-drop{ border:2px dashed var(--action); }

.ft-play{ flex-direction:column; align-items:center; }
/* S15 / P2: the top row — stock, waste, then the eight foundations, one slot over each column */
.ft-top{ flex:0 0 auto; display:flex; align-items:flex-start; justify-content:center; margin:0 auto; padding-bottom:var(--ft-top-gap, 10px); }
.ft-pile{
  position:relative; width:var(--k-card-w); height:var(--k-card-h); box-sizing:border-box; flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.55); border-radius:var(--radius-sm); background:rgba(6,30,14,.22);
  display:flex; align-items:center; justify-content:center;
}
.ft-top > .ft-pile + .ft-pile, .ft-top > .ft-pile + .ft-foundations{ margin-left:var(--ft-gap, 10px); }
.ft-foundations{ display:flex; flex:0 0 auto; }
.ft-foundations > .ft-found + .ft-found{ margin-left:var(--ft-gap, 10px); }
.ft-pile .k-card{ position:absolute; left:-1.5px; top:-1.5px; }
.ft-stock{ cursor:pointer; }
.ft-stock.is-empty{ cursor:default; border-style:dashed; }
.ft-stock .k-card{ cursor:pointer; }
/* the stock's count: a plate on the card back, never bare felt; "No redeal" once it is used up */
.ft-count{
  position:relative; z-index:2; font-family:var(--font-mono); font-size:13px; font-weight:700; line-height:1.1;
  color:var(--text-primary); background:var(--kl-plate-strong); border-radius:6px; padding:1px 4px; text-align:center;
}
.ft-stock.is-empty .ft-count{ white-space:normal; padding:1px 2px; }
.ft-waste .k-card{ cursor:pointer; }
.ft-found .k-card{ cursor:default; }
.ft-found-suit{ color:#EAF3EC; font-size:calc(var(--k-card-w) * .42); line-height:1; }
.ft-pile:focus-visible{ outline:2px solid var(--action); outline-offset:2px; }
/* a covered card shows its rank at the left and its suit at the right of its strip, at least 13px (as Spider) */
.ft-col .k-card.is-covered .corner{ top:var(--k-idx-top, 2px); right:4px; justify-content:space-between; align-items:center; }
.ft-col .k-card.is-covered .corner .s{ margin-left:0; }
.kl-game.is-tiny .k-card{ padding:2px; }
.kl-game.is-tiny .k-card .corner{ left:2px; letter-spacing:-.04em; }
.kl-game.is-tiny .ft-col .k-card.is-covered .corner{ right:2px; }
.kl-game.is-tiny .ft-pile .k-card.is-face-down{ border-width:1.5px; }

/* S27: Hint — the white ring and its pulse (inside the card on phones) */
@keyframes ftHint{ 0%,100%{ box-shadow:0 0 0 3px #fff; } 50%{ box-shadow:0 0 0 3px #fff, 0 0 0 8px rgba(255,255,255,.45); } }
@keyframes ftHintIn{ 0%,100%{ box-shadow:inset 0 0 0 3px #1A1F1D; } 50%{ box-shadow:inset 0 0 0 3px #1A1F1D, inset 0 0 0 7px rgba(240,184,75,.55); } }
#ftGame .k-hint-glow{ animation:ftHint 1.1s ease-in-out infinite; }
#ftGame[data-layout="phone"] .k-hint-glow{ animation-name:ftHintIn; }

/* M1: the peek — a held column fanned out in rows */
.ft-peek-overlay{ pointer-events:none; background:rgba(4,20,9,.55); }
.ft-peek-panel{ width:min(94vw, 760px); padding:12px 14px; }
.ft-peek-title{ margin:0 0 8px; font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-primary); }
.ft-peek-cards{ display:flex; flex-wrap:wrap; justify-content:center; padding-left:12px; }
.ft-peek-cards .k-card{ margin:0 0 6px -12px; }
.ft-peek-cards .k-card.is-covered .pip, .ft-peek-cards .k-card.is-covered .corner.bottom{ visibility:hidden; }

.kl-game[data-phase="won"] .ft-play, .kl-game[data-phase="stuck"] .ft-play, .kl-game[data-phase="finishing"] .ft-play{ pointer-events:none; }

/* labels (no text under 13px) */
.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; }
/* the suit in a corner never under 13px */
.ft-col .k-card .corner .s, .ft-found .k-card .corner .s, .ft-peek-cards .k-card .corner .s{ font-size:max(13px, .92em); }

/* the instruction line keeps 8px desktop / 6px phones from what is above and below it */
.kl-game .ft-board > .kl-line-slot{ height:auto; padding:8px 0; }
.kl-game[data-layout="phone"] .ft-board > .kl-line-slot{ padding:6px 0; }

/* the start panel and the end panel */
.ft-start-group .kl-choice[aria-pressed]{ background:var(--kl-plate); color:var(--text-primary); border:2px solid rgba(255,255,255,.28); }
.ft-start-group .kl-choice[aria-pressed="true"]{ border-color:var(--action); }
.ft-start-group .kl-choice[aria-pressed="true"]::before{ content:'\2713'; margin-right:6px; color:var(--action); font-weight:800; }
.ft-start-group{ margin:0 auto 12px; }
.ft-start-group h3{ margin:0 0 6px; font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-primary); }
.ft-modes{ display:flex; justify-content:center; flex-wrap:wrap; }
.ft-facts{ display:flex; justify-content:center; flex-wrap:wrap; margin:6px 0 14px; }
.ft-facts > div{ margin:0 12px 6px; }
.ft-facts dt{ font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-primary); }
.ft-facts dd{ margin:2px 0 0; font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--text-primary); }
.ft-copied{ font-size:13px; font-weight:700; color:var(--text-primary); margin:0 0 10px; }
.ft-copied[hidden]{ display:none; }
.ft-stats-table{ width:100%; border-collapse:collapse; margin:0 0 12px; }
.ft-stats-table th, .ft-stats-table td{ font-size:14px; font-weight:600; color:var(--text-primary); padding:4px 4px; text-align:right; border-bottom:1px solid rgba(255,255,255,.10); white-space:nowrap; }
.ft-stats-table th{ font-family:var(--font-mono); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ft-stats-table td:first-child{ text-align:left; white-space:normal; }
.kl-game[data-layout="side"] .ft-stats-table th, .kl-game[data-layout="side"] .ft-stats-table td{ padding:2px 4px; font-size:13px; }
#btnResetStats{ margin-top:4px; }
.kl-controls > .kl-btn[hidden]{ display:none; }

/* ------------------------------------------------------------ phones --- */
/* S16: on phones the same top row, over the ten columns at Spider's card size (P1) */
.kl-game[data-layout="phone"]{ padding-left:2px; padding-right:2px; }
.kl-game[data-layout="phone"] .ft-top{ padding-bottom:6px; }
.kl-game[data-layout="phone"] .ft-info{ padding:0 0 4px; }
.kl-game[data-layout="phone"] .ft-chip{ padding:1px 7px; letter-spacing:0; margin:1px 3px; }
.kl-game[data-layout="phone"] .ft-found-suit{ font-size:calc(var(--k-card-w) * .5); }
.kl-game[data-layout="phone"] .ft-count{ font-size:13px; padding:1px 2px; letter-spacing:-.02em; }
.kl-game[data-layout="phone"] .ft-stock.is-empty .ft-count{ font-size:13px; line-height:1; }
.kl-game.is-narrow .k-card .corner.bottom{ display:none; }
.kl-game.is-narrow .k-card .pip{ top:auto; left:auto; right:2px; bottom:2px; transform:none; font-size:max(13px, calc(var(--k-card-w) * .46)); }

/* ---------------------------------------------------------- sideways --- */
.kl-game[data-layout="side"] .kl-side-left, .kl-game[data-layout="side"] .kl-side-right{ width:132px; }
.kl-game[data-layout="side"] .ft-top{ padding-bottom:4px; }
.kl-game[data-layout="side"] .ft-board > .kl-line-slot{ padding:6px 0; }
.kl-game[data-layout="side"] .ft-board .kl-line{ white-space:normal; text-align:center; }

/* First paint: the board stays invisible until the controller has sized the cards. */
.kl-game:not(.is-sized) .k-board{ visibility:hidden; }

/* F07: buttons in a panel never touch, also when they wrap onto a second row — 8px apart both ways. */
#ftGame .ft-modes > *, #ftGame .kl-start-choices > *{ margin:4px; }
#ftGame .ft-modes > * + *, #ftGame .kl-start-choices > * + *{ margin-left:4px; }
#ftGame .ft-modes, #ftGame .kl-start-choices{ margin-left:-4px; margin-right:-4px; }

/* P4 / F09 on phones: a top card's tap area is the full column pitch — the card plus
   half the gap either side; the outer columns also reach the screen edge */
.kl-game[data-layout="phone"] .ft-col .k-card[data-tap^="c"]::before{ left:calc(var(--ft-gap, 3px) / -2); right:calc(var(--ft-gap, 3px) / -2); }
.kl-game[data-layout="phone"] .ft-col[data-col="0"] .k-card[data-tap^="c"]::before{ left:-8px; }
.kl-game[data-layout="phone"] .ft-col[data-col="9"] .k-card[data-tap^="c"]::before{ right:-8px; }
/* the stock and the waste top in the top row: the same full pitch (F09) */
.kl-game[data-layout="phone"] .ft-stock .k-card::before, .kl-game[data-layout="phone"] .ft-waste .k-card::before{ content:''; position:absolute; top:0; bottom:0; left:calc(var(--ft-gap, 3px) / -2 - 1.5px); right:calc(var(--ft-gap, 3px) / -2 - 1.5px); }
.kl-game[data-layout="phone"] .ft-stock .k-card::before{ left:-8px; }

/* Ronan 2026-10-24 (A): on a phone a long line (a Hint naming a pile) wraps onto a
   second line instead of being cut; the controller lays the columns out again around it */
.kl-game[data-layout="phone"] #ftInstruction{ white-space:normal; text-overflow:clip; text-align:center; line-height:17px; border-radius:12px; }

/* 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; }
/* Phones (Ronan 2026-10-26): each start group's buttons side by side, as Rules already were, so the
   Resume screen (Resume, "Or start a new game:", Rules, Coach, Play) fits without scrolling. Nothing removed. */
@media (max-width:640px){
  #klStart .ft-start-group .kl-start-choices{ flex-direction:row; flex-wrap:nowrap; }
  #klStart .ft-start-group .kl-start-choices .kl-btn{ flex:1 1 0; min-width:0; }
  #klStart .ft-modes{ display:flex; flex-direction:row; gap:6px; }
  #klStart .ft-modes .kl-btn{ flex:1 1 0; min-width:0; }
}

/* Short desktop boxes (Ronan 2026-10-27, "go with reccomended"): when the site fits the game to a
   laptop window the Rules panel scrolled inside itself (up to 53px at 1366x768). Here the rules list
   sits in two columns, as Golf (2026-10-26). Nothing removed; phones and taller boxes unchanged. */
@media (min-width:1000px) and (max-height:599px){
  .kl-rules{ width:min(94vw, 780px); padding:14px 18px 12px; }
  .kl-rules-list{ column-count:2; margin-bottom:8px; }
  .kl-rules-list li{ font-size:13px; line-height:1.35; padding:4px 0; break-inside:avoid; }
}
/* Short desktop boxes (Ronan 2026-10-27, "go with reccomended"): the stacked start/Resume panel
   scrolled inside itself (up to 115px at the 400px floor, Single/Daily off screen). Here the two
   start groups sit side by side (Coach · Play) under the title, as Golf (2026-10-26).
   Nothing removed; phones (sideways ones are at most 932px wide) and taller boxes keep the stack. */
@media (min-width:1000px) and (max-height:599px){
  #klStart .kl-panel{ width:auto; max-width:min(98vw, 1040px); display:grid; grid-template-columns:repeat(2, auto); justify-content:center; column-gap:16px; padding:16px 16px 14px; }
  #klStart .kl-panel > *{ grid-column:1 / -1; justify-self:center; }
  #klStart .kl-panel > .ft-start-group{ grid-column:auto; margin:0 0 2px; }
  #klStart .kl-panel > #btnResume{ margin:0 0 6px; }
  #klStart .kl-panel h2{ margin-bottom:2px; }
  #klStart .kl-sub{ margin-bottom:10px; }
  #klStart .kl-panel > .kl-note{ margin-top:6px; }
  #klStart .ft-start-group .kl-start-choices, #klStart .ft-modes{ flex-wrap:nowrap; }
}

/* Ronan 2026-10-29 (solitaire batch, "as FreeCell"): on desktop a selected card lifts
   8px with a 4.5px ring (solitaire-targets.css). The tableau starts 13px lower so a
   lifted card keeps the 7px it has today from the row above. */
.kl-game[data-layout="desk"] #ftTableau{ padding-top:13px; }
/* Ronan 2026-10-29 (solitaire batch): the game marks its Coach places with .k-target and
   the place under a drag with .can-drop, on .ft-col / .ft-found — the same blue ring
   with its dark edge as solitaire-targets.css, in place of the gold dashed outline. */
#ftGame[data-layout="desk"] .ft-col.k-target:not(:empty) > .k-card:last-child,
#ftGame[data-layout="desk"] .ft-col.can-drop:not(:empty) > .k-card:last-child,
#ftGame[data-layout="desk"] .ft-found.k-target,
#ftGame[data-layout="desk"] .ft-found.can-drop,
#ftGame[data-layout="desk"] .ft-col.k-target:empty::after,
#ftGame[data-layout="desk"] .ft-col.can-drop:empty::after{
  outline:none; border:1.5px solid var(--st-target);
  box-shadow:0 0 0 var(--st-ring) var(--st-target), 0 0 0 calc(var(--st-ring) + var(--st-edge-w)) var(--st-edge);
}
#ftGame[data-layout="desk"] .ft-col.k-target:not(:empty) > .k-card:last-child,
#ftGame[data-layout="desk"] .ft-col.can-drop:not(:empty) > .k-card:last-child{ border:none; }
#ftGame[data-layout="desk"] .ft-found.can-drop, #ftGame[data-layout="desk"] .ft-col.can-drop:empty::after{ background:rgba(120,198,232,.24); }