/* ============================================================
   PYRAMID — the game's own layer (board geometry, chrome, panels).
   Requires solitaire-family.css to be linked BEFORE this file.
   Redesign 2026-10-10 (briefs/pyramid-solitaire-decisions.md Q1-Q6):
   the redesigned Klondike's components (kl-*), on Pyramid's own board:
   a seven-row pyramid, a stock and a waste (§3: share the design system,
   not the geometry).
   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. */
.k-card.selected{ outline:none; transform:none; }

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


/* ============================================================= Pyramid only */
#pyramidGame{
  /* Motion (§10, §11, §12, §13; §21b): the controller reads these. */
  --py-mark-ms:150ms; --py-remove-ms:220ms; --py-reveal-ms:280ms; --py-draw-ms:240ms;
}
@media (prefers-reduced-motion: reduce){
  /* §21b: shortened, never removed — and these win over the family sheet's
     global .01ms rule. */
  #pyramidGame{ --py-mark-ms:100ms; --py-remove-ms:150ms; --py-reveal-ms:150ms; --py-draw-ms:150ms; }
  #pyramidGame .k-card.is-revealed{ animation-duration:150ms !important; }
  #pyramidGame .k-card.removing{ animation-duration:150ms !important; }
  #pyramidGame .k-card.is-flying{ transition-duration:150ms !important; }
  .k-card.selected{ transform:none; }
}
.k-card.back{
  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); cursor:pointer;
}

/* the board: the pyramid and its line in the middle, the piles beside it */
.py-board{ flex-direction:row; justify-content:center; align-items:center; }
.py-main{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
#pyramidTableau{ position:relative; }
#pyramidTableau .k-card{ position:absolute; }
.py-side{ display:flex; flex-direction:column; align-items:center; margin-left:28px; }
.py-piles{ display:flex; flex-direction:column; align-items:center; }
.py-pile{ display:flex; flex-direction:column; align-items:center; }
.py-pile + .py-pile{ margin-top:10px; }
.py-pile-label{
  margin-top:5px; font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-primary); background:var(--kl-plate); border-radius:999px; padding:2px 10px; white-space:nowrap;
}
.py-pile-n{ margin-left:4px; }
.py-counts{ margin-top:12px; background:var(--kl-plate); border-radius:10px; padding:5px 12px; }
.py-count{ display:flex; justify-content:space-between; align-items:baseline; white-space:nowrap; }
.py-count + .py-count{ margin-top:2px; }
.py-count-l{ font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-primary); margin-right:10px; }
.py-count .val{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--text-primary); }
#pyramidStock{ cursor:pointer; }
#pyramidStock:focus-visible{ outline:2px solid var(--action); outline-offset:2px; }
#pyramidStock.is-spent{ cursor:default; border-style:dashed; opacity:1; }
#pyramidStock.is-spent .k-slot-icon{ opacity:.45; }
#pyramidStock.is-redeal{ border-color:var(--action); border-style:solid; background:rgba(240,184,75,.16); }
#pyramidStock.is-redeal .k-slot-icon{ color:#FFE3A3; }

/* §7, Q2a: a blocked card is clearly dimmed but stays readable (opaque, so
   it still hides what is under it); a playable card is bright with a shadow. */
#pyramidTableau .k-card.covered{ filter:brightness(.72) saturate(.55); cursor:default; box-shadow:0 1px 2px rgba(0,0,0,.25); }
#pyramidTableau .k-card.exposed{ cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.30); }
#pyramidTableau .k-card.exposed:hover{ filter:brightness(1.04); }
.k-card.exposed:focus-visible{ outline:3px solid var(--action); outline-offset:2px; }
/* a covered card shows rank and suit side by side in its visible strip */
#pyramidTableau .k-card.covered .corner:not(.bottom){ flex-direction:row; align-items:baseline; font-size:var(--k-idx-fs); top:2px; }
#pyramidTableau .k-card.covered .corner:not(.bottom) .s{ margin-top:0; margin-left:1px; font-size:1em; }
#pyramidTableau .k-card.covered .pip, #pyramidTableau .k-card.covered .corner.bottom{ visibility:hidden; }
/* F21 (Ronan 2026-10-18): once the card below-right has gone, the bottom-right corner is in
   view, so it shows like a printed card's (phones: the large corner suit). The centre pip
   stays hidden: the card below-left still covers it. */
#pyramidTableau .k-card.covered.corner-open .corner.bottom{ visibility:visible; }
.kl-game.is-narrow #pyramidTableau .k-card.covered.corner-open .pip{ visibility:visible; }

/* §8 selection (gold, lifted) and §9 a legal match (blue ring) */
/* R1 (Ronan 2026-10-11, option O 08:43): no lift and no raise — a row's cards overlap their
   right-hand neighbour, so a raised card painted over that neighbour's corner (card-spacing rule).
   The rings stay outside the card (inside, the white Hint ring could not be seen on the face). */
#pyramidTableau .k-card.selected, .k-card.selected{ outline:3px solid var(--action); outline-offset:1px; transform:none; box-shadow:0 2px 4px rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.30); }
.k-card.is-match{ outline:3px solid #7CC8FF; outline-offset:1px; box-shadow:0 0 0 5px rgba(124,200,255,.25), 0 4px 12px rgba(0,0,0,.30); }
/* §10/§11: the pair (or King) is marked, then leaves */
.k-card.pair-made{ outline:3px solid #7DE3A0; outline-offset:1px; box-shadow:0 0 0 6px rgba(125,227,160,.35); z-index:50 !important; }
@keyframes pyRemove{ 0%{ transform:scale(1); opacity:1; } 100%{ transform:scale(.7); opacity:0; } }
.k-card.removing{ animation:pyRemove var(--py-remove-ms) ease-in forwards; pointer-events:none; z-index:60 !important; }
/* §12: a card that has just become playable */
@keyframes pyReveal{ 0%{ box-shadow:0 0 0 0 rgba(240,184,75,0); } 40%{ box-shadow:0 0 0 5px rgba(240,184,75,.95); } 100%{ box-shadow:0 0 0 0 rgba(240,184,75,0); } }
.k-card.is-revealed{ animation:pyReveal var(--py-reveal-ms) ease-out; }
.k-card.is-flying{ z-index:600 !important; }
/* Hint: a white ring, distinct from selection and matches */
/* Hint: a white ring with a dark edge either side, outside the card at its normal depth (R1, option O; two-tone, Ronan 08:46) — seen on white cards, grey cards and the felt */
@keyframes pyHint{ 0%,100%{ box-shadow:0 0 0 2px #0B2A16, 0 0 0 5px #fff, 0 0 0 7px #0B2A16; } 50%{ box-shadow:0 0 0 2px #0B2A16, 0 0 0 5px #fff, 0 0 0 7px #0B2A16, 0 0 0 11px rgba(255,255,255,.35); } }
#pyramidTableau .k-card.k-hint-glow{ animation:pyHint 1.1s ease-in-out infinite; }
#pyramidStock.k-hint-glow, #pyramidWaste .k-hint-glow, .k-hint-glow:not(#pyramidTableau *){ animation:pyHint 1.1s ease-in-out infinite; z-index:70 !important; }
#pyramidStock.k-hint-glow{ border-color:#fff; }
@media (prefers-reduced-motion: reduce){ .k-hint-glow, #pyramidTableau .k-card.k-hint-glow{ animation:none !important; box-shadow:0 0 0 2px #0B2A16, 0 0 0 5px #fff, 0 0 0 7px #0B2A16; } }
.kl-game[data-phase="won"] #pyramidTableau{ pointer-events:none; }

/* the header and labels (V8C: 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; }
.kl-settings-gap{ margin-top:10px; }
#btnResetStats{ margin-top:4px; }

/* Ronan 2026-10-10 (standing rule): the instruction line keeps 8px desktop /
   6px phones from the pyramid above it and from what follows. */
.kl-game .py-main > .kl-line-slot{ height:auto; padding:8px 0 8px; }
.kl-game[data-layout="phone"] .py-main > .kl-line-slot{ padding:6px 0 6px; }

/* ------------------------------------------------------------ phones --- */
.kl-game[data-layout="phone"]{ padding-left:4px; padding-right:4px; }
.kl-game[data-layout="phone"] .py-board{ flex-direction:column; justify-content:center; }
.kl-game[data-layout="phone"] .py-side{ flex-direction:row; align-items:flex-end; margin-left:0; margin-top:0; }
.kl-game[data-layout="phone"] .py-piles{ flex-direction:row; align-items:flex-end; }
.kl-game[data-layout="phone"] .py-pile + .py-pile{ margin-top:0; margin-left:10px; }
.kl-game[data-layout="phone"] .py-counts{ margin-top:0; margin-left:12px; padding:4px 10px; }
.kl-game[data-layout="phone"] .py-pile-label{ padding:1px 8px; }

/* ---------------------------------------------------------- sideways --- */
.kl-game[data-layout="side"] .py-board{ flex-direction:column; }
.kl-game[data-layout="side"] .kl-side .py-side{ margin-left:0; }
.kl-game[data-layout="side"] .kl-side .py-piles{ flex-direction:row; align-items:flex-start; }
.kl-game[data-layout="side"] .kl-side .py-pile + .py-pile{ margin-top:0; margin-left:6px; }
.kl-game[data-layout="side"] .kl-side .py-counts{ margin-top:6px; padding:3px 8px; }
.kl-game[data-layout="side"] .kl-side .py-pile-label{ padding:1px 6px; letter-spacing:0; }
.kl-game[data-layout="side"] .py-main > .kl-line-slot{ padding:6px 0 0; }
.kl-game[data-layout="side"] .py-main .kl-line{ white-space:normal; text-align:center; }
/* sideways: the piles in the left column are smaller cards (the pyramid keeps its size) */
.kl-game[data-layout="side"] .kl-side{ --k-card-w:56px; --k-card-h:80px; }
.kl-game[data-layout="side"] .kl-side-left, .kl-game[data-layout="side"] .kl-side-right{ width:132px; }

/* Phones (Ronan 2026-10-12): the Hint's pulse grows to 8px, not 11px — with the cards side by side
   (no overlap) an 11px pulse could reach the corner of a covered card beside it. Desktop and
   sideways keep 11px (a 12px gap there). */
@keyframes pyHintPhone{ 0%,100%{ box-shadow:0 0 0 2px #0B2A16, 0 0 0 5px #fff, 0 0 0 7px #0B2A16; } 50%{ box-shadow:0 0 0 2px #0B2A16, 0 0 0 5px #fff, 0 0 0 7px #0B2A16, 0 0 0 8px rgba(255,255,255,.35); } }
.kl-game[data-layout="phone"] #pyramidTableau .k-card.k-hint-glow{ animation-name:pyHintPhone; }

/* 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. */
#pyramidGame .kl-start-choices > *, #pyramidGame .kl-draw-choice > *{ margin:4px; }
#pyramidGame .kl-start-choices > * + *, #pyramidGame .kl-draw-choice > * + *{ margin-left:4px; }
#pyramidGame .kl-start-choices, #pyramidGame .kl-draw-choice{ margin-left:-4px; margin-right:-4px; }
/* F09 (Ronan 2026-10-18): on phones and sideways a card's tap area reaches 1px
   into the gap either side, so each card gets its whole column width (card plus
   gap) — there is no room for 44px. */
.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:-1px; right:-1px; }

/* 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; }

/* Ronan 2026-10-29 (solitaire batch): on desktop Pyramid's selected card takes the gold
   ring with its dark edge (solitaire-targets.css) and keeps its own lift — none, the
   pyramid's rows overlap. Its own rule above carries an id, so the ring is set here. */
#pyramidGame.kl-game[data-layout="desk"]{ --st-lift:0px; }
#pyramidGame[data-layout="desk"] .k-card.selected{
  outline:none; transform:none;
  box-shadow:0 0 0 var(--st-ring) var(--st-sel), 0 0 0 calc(var(--st-ring) + var(--st-edge-w)) var(--st-edge), 0 6px 14px rgba(0,0,0,.30);
}