/* The Cozy Quilt / Yama Yama Yorgan (D-091) - kf-sudoku.js styles.
 * Loaded AFTER kf-games.css (the shared .kfe-confetti lives there).
 * Nova build spec 08-nova-sudoku-spec.md sections 2-6 (board/tray/message/
 * celebration design language) + the 12-nova-sudoku-lobby-respec.md
 * REBUILD (2026-08-15, v1 -> v2 of this sheet):
 *   - the mode selector and the invite panel LEFT this sheet with the
 *     engine's v3 (the lobby page renders the quilt choice now; the
 *     mini-quilt schema styles moved there, copied not imported);
 *   - the stage became a two-orientation Game Shell grid (data-orient,
 *     set by the engine at sw/sh >= 1.05): LANDSCAPE toolbar top + tray as
 *     a 15rem right-hand rail + message band under the board; PORTRAIT
 *     board full width, band, tray beside the two undo pills, toolbar at
 *     the bottom (thumb zone);
 *   - the message band came down to min-height 3.25rem / --text-base
 *     (respec 2.2: the 5rem band pushed the 6x6 under its cell floor);
 *   - Take Back and Start Fresh are twin pills UNDER the tray; the
 *     toolbar keeps exit (arrow + word) + bell + full screen;
 *   - full screen targets the STAGE now (.kfsq-stage.kfsq-full).
 * v2 -> v3 (2026-08-15, Deniz's second rejection - the scene itself):
 *   - the board FILLS the height the stage gives it: the 26/34rem clamps
 *     rose to 40/44rem (the engine's inline height budget is the real
 *     governor; floors 75px / 44px 6x6-on-phones unchanged);
 *   - the landscape rail widened to 19rem on >=900px viewports and its
 *     patch stacks grew 54px -> 100px there; below 900px the v2 numbers
 *     hold so small landscape screens keep their cell floors;
 *   - the rail panel WRAPS its content and centers beside the board
 *     (align-self: center): the dead white below the pills is gone;
 *   - the message band is INVISIBLE while empty (transparent, shadowless;
 *     .kfsq-msg--on brings the surface back with one soft 250ms fade, no
 *     flash); the min-height reserve stays, the board never moves;
 *   - Take Back / Start Fresh are icon pills now: hand-drawn SVG arrows
 *     (engine ICON.undo / ICON.undoAll) in the shared stroke language,
 *     body in the mixing-tree pill dialect (3px lilac ring, soft shadow),
 *     64px touch floor kept.
 * v3 -> v4 (2026-08-15, third round: hint pill + win-card art):
 *   - a THIRD pill, Show Me Where / Ipucu (engine v5), joins Take Back and
 *     Start Fresh. In the WIDE landscape rail (>=900px) the twin take-backs
 *     share one row and the hint spans the full width under them, so three
 *     pills stand in the same 136px the two used to take: the rail height
 *     budget and the 100px stacks survive. Below 900px and in portrait the
 *     pills stack vertically (the narrow rail cannot host two labels side
 *     by side without clipping a word);
 *   - the hint glow: ONE cell carries --glow-hint-soft (the shared gold
 *     hint token), STATIC: one soft transition in, no pulse, no flash, no
 *     loop; the engine retires it on the next placement or after ~8s;
 *   - the win card gained the finished-quilt painting (16:9, full card
 *     width, --radius-md) over the win line, the sleep line under it, and
 *     a max-height + overflow belt so a short stage scrolls the card
 *     instead of clipping it;
 *   - SHORT PORTRAIT EXCEPTION, first form (superseded the same day): the
 *     third 64px pill cannot join the tray panel under ~741px of portrait
 *     height without breaking the board's cell floor (rabbit needs 335px
 *     of board + 224px of panel + bar + band = 715px against a 651px
 *     stage at 375x667), so v4 hid the pill there.
 * v4 -> v5 (2026-08-15, Deniz's short-portrait ruling, option a): the
 *   hint pill is NEVER hidden any more. On the short-portrait band the
 *   engine moves the one hint button into the toolbar between the bell
 *   and full screen, and the exit goes icon-only (its word display:none,
 *   its aria-label untouched) to free the width; the media band here and
 *   the engine's matchMedia are the same query string, so the swap is one
 *   move. Everywhere taller, v4's layout holds unchanged.
 * Tokens only, no new tokens; the two [KALIBRE] alphas (teal wash, ghost
 * stack) are the browser-picked start values and go to Sage for measurement:
 *   - direction wash: rgba(46,196,182,0.20) over white / gold-soft
 *   - emptied-slot ghost: opacity 0.25 + saturate(0.3)
 * Every highlight is a STATIC state: one transition in, no loop, no pulse,
 * no brightness animation anywhere in this file. The only animation is the
 * travel of a single patch clone (transform-only), and prefers-reduced-motion
 * is handled in the engine (clones are never created) plus the global
 * tokens.css kill switch. */

.kf-sudoku {
  position: relative;
}

/* ---------- stage (Game Shell, two orientations) ---------- */

.kfsq-stage {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--kf-lilac-soft); /* daylight porch, not night (Nova 2.1) */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2);
  display: grid;
}
/* LANDSCAPE: toolbar on top; the tray rail on the RIGHT (Deniz: "yanda bu
   kadar yer varken"); the message band under the board, board-column wide.
   The rail is 15rem on small landscape screens and 19rem from 900px up
   (v3: bigger patch stacks); layoutStage mirrors the same 900px switch. */
.kfsq-stage[data-orient='l'] {
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'bar bar'
    'board tray'
    'msg tray';
  gap: 8px 12px;
}
/* PORTRAIT: board, band, tray + pills, toolbar at the bottom (thumb zone) */
.kfsq-stage[data-orient='p'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    'board'
    'msg'
    'tray'
    'bar';
  gap: 8px;
}

.kfsq-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kfsq-barbtn {
  min-width: 64px;
  min-height: 64px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-md);
  color: var(--kf-purple-deep);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
/* the exit carries its word (the lobby is one tap away, always visible) */
.kfsq-exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}
.kfsq-exit-txt {
  white-space: nowrap;
}
.kfsq-fs {
  margin-left: auto;
}
.kfsq-resting {
  opacity: 0.55;
  cursor: default;
}

/* ---------- the quilt board (Nova 2) ---------- */

.kfsq-boardwrap {
  grid-area: board;
  display: flex;
  justify-content: center;
  align-items: center; /* "TAHTA (solda, kare, ortalı)" - respec 2.2 */
  min-height: 0;
  min-width: 0;
}
.kfsq-board {
  display: grid;
  gap: 2px;                          /* thin stitch between patches */
  background: var(--kf-lilac-soft);  /* the stitch shows this ground */
  border: 8px solid var(--kf-lilac); /* quilt binding */
  border-radius: var(--radius-md);
  padding: 4px;
  box-sizing: border-box;
  width: 100%;
}
/* v3: the clamps are a generous ceiling only (Deniz: "bu kadar yerin
   varken neden görselleri bu kadar küçük kullandın?"). The engine's
   layoutStage sets the REAL width as an inline max-width computed from the
   height the scene can spare, so the board grows to fill its column and
   the whole stage still shares one screen. */
.kfsq-board--4 { max-width: 40rem; }
.kfsq-board--6 { max-width: 44rem; }

/* thick basting seams between boxes: lilac band + dark dashed line, so the
   box boundary survives grayscale (Nova 2.1 squint criterion) */
.kfsq-seam {
  background-color: var(--kf-lilac);
  border-radius: 2px;
}
.kfsq-seamv {
  background-image: repeating-linear-gradient(
    180deg,
    var(--kf-purple-deep) 0 6px,
    transparent 6px 13px
  );
  background-size: 2px 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.kfsq-seamh {
  background-image: repeating-linear-gradient(
    90deg,
    var(--kf-purple-deep) 0 6px,
    transparent 6px 13px
  );
  background-size: 100% 2px;
  background-position: center;
  background-repeat: no-repeat;
}

/* cells: three states, three separate channels (ring / ground / depth) */
.kfsq-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 0;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font: inherit;
}
.kfsq-cell[data-state='empty'] {
  /* a soft hollow: "a patch belongs here" */
  box-shadow: inset 0 2px 6px rgba(45, 27, 78, 0.14);
}
.kfsq-cell[data-state='given'] {
  background: var(--kf-gold-soft); /* old warm cloth */
  cursor: default;
}
.kfsq-patchwrap {
  width: 84%;
  height: 84%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
/* sewn in place: dashed stitch ring, FLAT (no shadow, part of the cloth) */
.kfsq-cell[data-state='given'] .kfsq-patchwrap,
.kfsq-cell.kfsq-sewn .kfsq-patchwrap {
  border: 2px dashed var(--kf-purple-deep);
  padding: 3%;
}
/* placed by you: no ring, a small lift shadow (still yours, still movable) */
.kfsq-cell[data-state='mine'] .kfsq-patchimg {
  filter: drop-shadow(0 3px 5px rgba(45, 27, 78, 0.35));
}
/* the finished quilt: the lift settles, everything is one piece */
.kfsq-cell.kfsq-sewn .kfsq-patchimg {
  filter: none;
}
.kfsq-cell img,
.kfsq-patchwrap .kfsq-fallback {
  pointer-events: none;
}
.kfsq-cell .kfsq-patchimg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.kfsq-fallback {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

/* direction wash (Nova 5): a static tone layer over the violated unit.
   One 200ms opacity entrance, then it HOLDS; cleared by the engine. */
.kfsq-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(46, 196, 182, 0.2); /* [KALIBRE] start value */
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.kfsq-cell.kfsq-wash::after {
  opacity: 1;
}
/* the twin's frame: outline, not box-shadow, so it survives forced-colors;
   dark teal reads 5.59:1 on white (tokens), and it is NOT gold: gold means
   "chosen", never "look here" (Nova 5.2) */
.kfsq-cell.kfsq-twin {
  outline: 3px solid var(--color-link-strong);
  outline-offset: -3px;
}

/* v4: the hint glow (engine v5, Show Me Where). ONE empty square carries
   the shared gold hint tokens, STATICALLY: the transition lives on this
   class, so the glow fades IN over 250ms once and its removal is instant;
   nothing loops, nothing pulses, nothing flashes. Both hint tokens layer
   (full for the near aura, soft for the reach): measured against the
   white cells and the lilac ground, --glow-hint-soft alone was nearly
   invisible in the screenshot, and a spotlight a child cannot spot is no
   spotlight. The empty hollow keeps its inset shadow under the halo.
   z-index lifts the halo over the neighbouring cells and seams. The
   engine retires the class on the next placement or after ~8s. */
.kfsq-cell.kfsq-hintglow {
  box-shadow: var(--glow-hint-full), var(--glow-hint-soft);
  transition: box-shadow 250ms ease;
  z-index: 1;
}
.kfsq-cell[data-state='empty'].kfsq-hintglow {
  box-shadow: inset 0 2px 6px rgba(45, 27, 78, 0.14), var(--glow-hint-full), var(--glow-hint-soft);
}

/* ---------- message band (Nova 4.6, respec 2.2) ----------
   Fixed floor, zero CLS on the board: the band may take a second line for a
   long direction sentence; the engine budgets the board against that taller
   band, so the quilt itself never moves.
   v3 (Deniz: "bu beyaz dörtgen boşluğun işlevi ne?"): the band is a surface
   ONLY while it speaks. Empty, it is fully transparent; the reserved height
   stays so nothing shifts when a line arrives. One soft 250ms fade in and
   out, no flash (a static opacity transition, never a loop). */

.kfsq-msg {
  grid-area: msg;
  min-height: 3.25rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: background-color 250ms ease, box-shadow 250ms ease;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--color-text);
}
.kfsq-msg--on {
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

/* ---------- patch tray + the two take-backs (Nova 3, respec 2.2) ---------- */

.kfsq-traypanel {
  grid-area: tray;
  box-sizing: border-box;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2);
  display: flex;
  min-height: 0;
  min-width: 0;
}
/* landscape rail: slots 2-across on top, the pills below them.
   v3 (Deniz: "altta upuzun boşluk var"): the panel WRAPS its content
   (align-self: center) instead of stretching the full rail height, and
   sits vertically centered beside the board; the dead white below the
   pills is gone. max-height keeps the overflow escape on short screens. */
.kfsq-stage[data-orient='l'] .kfsq-traypanel {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  max-height: 100%;
  gap: var(--space-3);
  overflow-y: auto; /* belt and braces on very short landscape screens */
}
/* portrait: slots left, the pill column right (thumb reach, respec 2.2) */
.kfsq-stage[data-orient='p'] .kfsq-traypanel {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) 4px; /* the 375 budget: 241px slots + pills */
}
.kfsq-tray {
  display: grid;
  gap: var(--space-2);
}
.kfsq-stage[data-orient='l'] .kfsq-tray--4,
.kfsq-stage[data-orient='l'] .kfsq-tray--6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}
.kfsq-stage[data-orient='p'] .kfsq-tray--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* six slots fall 3+3, two balanced rows, never 5+1 */
.kfsq-stage[data-orient='p'] .kfsq-tray--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kfsq-slot {
  position: relative;
  min-width: var(--tap-play-min);
  min-height: var(--tap-play-min);
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 6px;
  transition: box-shadow 0.2s ease;
}
.kfsq-slot--sel {
  box-shadow: var(--halo-select-strong);
}
.kfsq-stack {
  position: relative;
  width: 54px;
  height: 54px;
}
/* v3: the wide-screen rail (19rem from 900px up) carries patch stacks
   nearly twice the size (Deniz: the tray pictures were too small too);
   below 900px the 54px stack + 15rem rail protect the 375 budget and the
   small-landscape cell floors. layoutStage mirrors this 900px switch. */
@media (min-width: 900px) {
  .kfsq-stage[data-orient='l'] {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
  .kfsq-stage[data-orient='l'] .kfsq-stack {
    width: 100px;
    height: 100px;
  }
  /* v4: three pills in the twin pills' old 136px: Take Back | Start Fresh
     share a row, the hint pill spans the full width under them. The wide
     rail (288px of content) gives each half-pill ~140px, enough for
     "Hepsini Geri Al" to wrap at the space, never inside a word; the rail
     height budget that pays for the 100px stacks is untouched. */
  .kfsq-stage[data-orient='l'] .kfsq-undos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kfsq-stage[data-orient='l'] .kfsq-hintbtn {
    grid-column: 1 / -1;
  }
}
/* v4, MEASURED (and older than the hint pill: the same 46px deficit lived
   in v3, it just cut Start Fresh instead): the DEER rail with 100px stacks
   is 3 slot rows + the pill block = ~521px of content, and on the 708/668
   landscape band the tray area only offers ~437-475px, so the rail
   scrolled inside itself and the bottom pill was half-hidden. On that
   short band the six deer stacks step down to 68px (still 26% over the
   54px narrow-rail size); rabbit and fox keep 100px everywhere, their two
   slot rows fit the short band as they are. 100px deer stacks need
   ~755px of viewport; the 758px cut keeps 1366x768 on the big stacks. */
@media (min-width: 900px) and (max-height: 758px) {
  .kfsq-stage[data-orient='l'] .kfsq-tray--6 .kfsq-stack {
    width: 68px;
    height: 68px;
  }
}
.kfsq-stack .kfsq-patchimg,
.kfsq-stack .kfsq-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kfsq-stack .kfsq-fallback {
  display: grid;
  place-items: center;
  text-align: center;
}
/* an emptied stack: the slot stays put, a faint ghost keeps the spot
   (the layout never reflows, Nova 3.2); [KALIBRE] start values */
.kfsq-slot--empty .kfsq-patchimg,
.kfsq-slot--empty .kfsq-fallback {
  opacity: 0.25;
  filter: saturate(0.3);
}
.kfsq-slot--empty {
  cursor: default;
}
/* the pill stack: Take Back, Start Fresh, and (v4) Show Me Where under
   them; a narrow portrait column may wrap their labels to two lines
   (Nova's written allowance). On the WIDE rail (>=900px, further down)
   the twin take-backs share one row and the hint spans under them. */
.kfsq-undos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.kfsq-stage[data-orient='p'] .kfsq-undos {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 14rem;
}
/* v3: the pills joined the neighbours' pill dialect (kf-lanterns /
   mixing-tree: plump body, soft ring, soft shadow) and each carries a
   hand-drawn SVG arrow from the engine (ICON.undo / ICON.undoAll), the
   same stroke language as the bell and the exit. Touch floor 64px kept. */
.kfsq-undo {
  min-height: 64px;
  box-sizing: border-box;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--kf-lilac);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  color: var(--kf-purple-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.4rem var(--space-3);
  cursor: pointer;
}
.kfsq-undo svg {
  display: block;
  flex: 0 0 auto;
}
.kfsq-undo:hover:not(.kfsq-resting) {
  background: var(--kf-lilac-soft);
}
@media (max-width: 480px) {
  .kfsq-undo {
    font-size: 0.92rem;
    padding: 0.4rem var(--space-2);
  }
}

/* ---------- celebration (Nova 6) ---------- */

.kfsq-overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-navy);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  z-index: 6;
}
.kfsq-wincard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-4);
  margin: var(--space-3);
  max-width: 26rem;
  text-align: center;
  /* v4 belt: with the painting on top the card grew; a short stage scrolls
     the card instead of clipping the pills out of reach */
  max-height: calc(100% - 2 * var(--space-3));
  overflow-y: auto;
  box-sizing: border-box;
}
/* v4: the finished quilt on its sleeper, the card's crown (16:9, full
   card width, engine width/height attrs so nothing shifts on load) */
.kfsq-winimg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
}
/* v4: the sleep line, under the win heading, over the pills */
.kfsq-sleepline {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--color-text);
}
.kfsq-wincard h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--kf-purple-deep);
  margin: 0 0 var(--space-3);
}
.kfsq-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.kfsq-pill {
  min-height: 64px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0 var(--space-4);
  cursor: pointer;
  text-decoration: none;
}
.kfsq-pill--gold {
  background: linear-gradient(180deg, #ffd94d 0%, #f7c832 100%);
  color: var(--kf-purple-deep);
}
.kfsq-pill--purple {
  background: var(--kf-purple-deep);
  color: #fff;
}
/* reduced motion: no confetti; one static, silent burst instead */
.kfsq-burst-static {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 67, 0.5) 0%, rgba(212, 168, 67, 0.18) 45%, transparent 70%);
  pointer-events: none;
  z-index: 5;
}

/* ---------- the traveling patch ---------- */

.kfsq-fly {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
  will-change: transform;
  object-fit: contain;
  transition-property: transform;
  /* the settle curve: slows into its landing, never thrown (Nova 4.5) */
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- screen-reader-only live region ---------- */

.kfsq-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- fullscreen (the STAGE is the fullscreen element, v2) ---------- */

/* TAM EKRAN GENISLETIR, DAGITMAZ (Deniz, 2026-08-18, masaustu ekran
   goruntusu: "full page e gecince boyle dagilmasin ekran, yine bu form
   korunmali. Ozellikle sectigi sekillerin oldugu bolum taaa kenara
   yapismis").
   Sebep `max-width: none` idi: sahne butun ekrana yayilinca 19rem'lik tepsi
   rayi sag kenara yapisiyor, tahta da devasa kolonun icinde ortalanip
   arada bir bosluk birakiyordu. Tam ekranin isi oyunu BUYUTMEK, kolonlari
   birbirinden ayirmak degil (ev kurali, D-127).
   Yeni tavan 62rem degil 78rem: oyun gercekten buyuyor (1080p'de tahta
   yaklasik 930px), ama form ayni kaliyor. Sahne ortalaniyor; yanlarda kalan
   yer siyah gorunmesin diye perde de ayni verandanin rengini aliyor. */
.kfsq-stage.kfsq-full {
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3);
  overflow: auto;
}
/* SAHNEYE TAVAN KOYMAK ISE YARAMAZ: tarayicinin tam ekran kurallari
   `max-width: none !important` diyor ve yazarin tavanini eziyor (olculdu:
   sinif yerindeyken hesaplanan deger yine `none`). O yuzden sinirlanan sey
   sahne degil, KOLONLAR: tahta kolonuna tavan konuyor ve ikili birlikte
   ortalaniyor. Boylece tam ekran oyunu buyutuyor (62rem yerine 81rem'lik
   bir yerlesim) ama tepsi rayi kenara yapismiyor. */
.kfsq-stage.kfsq-full[data-orient='l'] {
  /* `auto`, sabit bir tavan degil: tahtanin genisligini zaten MOTOR
     hesapliyor (yukseklik butcesinden, kare kalsin diye) ve kolona onu
     yaziyor. Kolona 62rem gibi bir tavan koymak, tahta 640px'te kalirken
     kolonu 1054px yapiyor ve aradaki 219px'lik bosluk tam olarak Deniz'in
     sikayet ettigi seydi (olculdu). `auto` kolonu tahtaya sardiriyor,
     `justify-content: center` de ikisini birlikte ortaliyor: normaldeki
     derli toplu form, sadece daha buyuk. */
  grid-template-columns: auto 19rem;
  justify-content: center;
  align-content: center;
}
.kfsq-stage.kfsq-full[data-orient='p'] {
  grid-template-columns: auto;
  justify-content: center;
}
.kfsq-stage.kfsq-full::backdrop {
  background: var(--kf-lilac-soft);
}

/* ---------- short portrait: the hint pill moves into the toolbar (v5,
   Deniz's ruling, option a) ----------
   The tray panel cannot spare a third 64px row here (measured: at 375x667
   rabbit would need 715px against a 651px stage), and v4's answer, hiding
   the pill, died the same day: Deniz chose the toolbar instead. On this
   band the ENGINE moves the one hint button between the bell and full
   screen (same element, same aria, updateHintHome), and the exit pays for
   the width by dropping its word: icon-only arrow, 64px floor intact,
   aria-label untouched (the label the ear gets never left; only the
   printed word did). The media query string is byte-equal to the engine's
   matchMedia, so the two moves always happen together. */
@media (orientation: portrait) and (max-height: 740px) {
  .kfsq-exit {
    padding: 0;
  }
  .kfsq-exit-txt {
    display: none;
  }
}
/* the hint pill while it sits in the toolbar: same pill dialect, bar
   sized: its rail-width rules (width 100%, grid spans) stay behind in the
   tray panel selectors, so here it simply hugs its icon + short label */
.kfsq-bar .kfsq-hintbtn {
  width: auto;
  min-width: 64px;
  flex: 0 1 auto;
}

/* ---------- phones (Nova 2.3): the board takes the full width ---------- */

@media (max-width: 480px) {
  .kfsq-stage {
    /* shed the page shell's side padding so a 6x6 cell clears the 44px
       floor at 360 (measured in the one-page build: 52px with this bleed,
       43.7px without) */
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    border-radius: 0;
  }
  .kfsq-board {
    border-width: 6px;
  }
  /* toolbar buttons keep the 64px floor at every width (brief section 1) */
}