:root{
      
   
     
  --kit:#D96C2C; --kit-ink:#FFFFFF;
   --correct-bg:#DDF0E4;
   
   --revealed-ink:#3A2D00;
  --block:#1C231D; --cell:#FFFFFF; 
  
  
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
        
      
     --correct-bg:#1E3A2A;   --revealed-ink:#F2C94C;
    --block:#0B0E0A; --cell:#232B22; 
  }
}
:root[data-theme="dark"]{
      
    
   --correct-bg:#1E3A2A;   --revealed-ink:#F2C94C;
  --block:#0B0E0A; --cell:#232B22; 
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 14px}

.game{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start;padding:14px 0 40px}
@media (max-width:860px){.game{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.card h2{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}

/* the grid always fits its column: no sideways scroll on a phone */
.grid{display:grid;gap:2px;background:var(--grid-line);padding:2px;border-radius:4px;width:100%}
.cell{position:relative;aspect-ratio:1;background:var(--cell);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:clamp(13px,3.4vw,26px);line-height:1;border:0;padding:0;color:var(--ink);
  transition:background 140ms}
.cell.block{background:var(--block)}
.cell .n{position:absolute;top:1px;left:3px;font-size:clamp(8px,1.7vw,12px);font-weight:600;color:var(--ink-faint)}
.cell.same{background:var(--sel-word)}
.cell.inword{box-shadow:inset 0 0 0 1px var(--sel-line)}
.cell.sel{background:var(--sel);box-shadow:inset 0 0 0 3px var(--sel-ring)}
.cell.sel .n,.cell.same .n{color:var(--sel-line)}
.cell.known{color:var(--correct)}
.cell.known .l{font-weight:600}
.cell.done{background:var(--correct-bg);color:var(--correct)}
.cell.wrong{background:var(--wrong-bg);color:var(--wrong)}
.cell.revealed{background:var(--revealed-bg);color:var(--revealed-ink)}
.cell .bk{position:absolute;background:var(--ink);opacity:.85;z-index:2}
.cell .bk.r{right:-1px;top:0;bottom:0;width:3px}
.cell .bk.d{bottom:-1px;left:0;right:0;height:3px}
.cell .pencil{font-weight:600;font-size:clamp(10px,2.4vw,17px);color:var(--ink-faint);font-style:italic}

.readout{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;min-height:22px}
.readout b{font-family:var(--disp);font-size:17px;letter-spacing:.04em;color:var(--sel-line)}
.readout span{font-size:13px;color:var(--ink-soft)}

/* THE FAMILY'S KEYBOARD (shared/xi-keys.css), drawn on every device here --
   its keys carry which letters are placed and which the puzzle does not use,
   which a physical keyboard cannot show -- and in the card, not pinned. */
.keys.osk{display:block;position:static;border-top:0;background:none;padding:0;margin-top:10px}
.keys .osk-key.absent{opacity:.35}
.keys .osk-key.used{background:var(--tint);color:var(--ink-faint)}
.keys .osk-key.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
/* LOCKED, THE KEYS TAKE WHAT THEY TOOK BEFORE: 4.6% of the screen a row, down
   to 28px. The family's default floor is 34px, and four rows of it (Pencil and
   Clear above the letters) cost a 360x640 phone the ~20px its grid needed, so
   the page fell back to scrolling. The same keyboard, sized for this card. */
body.locked .keys.osk{--osk-h:clamp(28px,4.6vh,52px);--osk-gap:3px}

/* the key is the puzzle, so it gets room */
.key{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.key div{border:1px solid var(--line);border-radius:5px;padding:4px 0 3px;font-family:var(--disp);line-height:1.05;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.key div .kn{display:block;font-size:10px;color:var(--ink-faint)}
.key div .kl{display:block;font-size:17px;font-weight:700;min-height:18px}
.key div.sel{background:var(--sel);border-color:var(--sel-line)}
.key div.cracked{background:var(--tint)}
.key div.fixed{background:var(--correct-bg);border-color:var(--correct);color:var(--correct)}
.key div.fixed .kn{color:var(--correct)}
.key div.absent{opacity:.3;cursor:default}
.alpha{font-family:var(--disp);font-size:15px;letter-spacing:.14em;margin-top:10px;color:var(--ink);word-spacing:.1em}
.alpha s{color:var(--ink-faint);text-decoration-thickness:1px}
.alpha s.out{color:var(--ink-faint);opacity:.42;text-decoration-style:double}
.alpha .cap{display:block;font-family:var(--body);font-size:11px;letter-spacing:.02em;color:var(--ink-faint);margin-top:5px}

.clock{display:flex;justify-content:space-between;align-items:flex-end;font-variant-numeric:tabular-nums}
.clock .min{font-family:var(--disp);font-weight:700;font-size:40px;line-height:1}
.clock .min small{font-size:18px;color:var(--ink-soft)}
.clock .worth{text-align:right}
.clock .worth b{display:block;font-family:var(--disp);font-weight:700;font-size:30px;line-height:1;color:var(--pitch)}
.clock .worth span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.subs{display:flex;gap:6px;margin-top:8px;align-items:center;font-size:12.5px;color:var(--ink-soft)}
.subs i{width:13px;height:13px;border-radius:50%;border:2px solid var(--pitch);display:inline-block}
.subs i.spent{background:var(--ink-faint);border-color:var(--ink-faint)}
.acts{display:grid;gap:7px;margin-top:10px}
.btn{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--ink);border-radius:999px;background:var(--card);font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.btn small{font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.btn:hover:not(:disabled){background:var(--ink);color:var(--card)}
.btn:hover:not(:disabled) small{color:inherit}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* [hidden] MUST WIN. .btn is display:flex, and an author display beats the
   browser's [hidden] -- so "Blow the final whistle", hidden until it may be
   used, stood on the clock card from the start (seen 25 Sep 2026). */
.btn[hidden]{display:none}
.btn.primary{background:var(--pitch);border-color:var(--pitch);color:#fff}

.prog{display:flex;align-items:baseline;gap:8px}
.prog b{font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;color:var(--pitch)}
.prog span{font-size:13px;color:var(--ink-soft)}
.hints{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:3px}
.hints li{font-size:13px;color:var(--ink-soft);display:flex;gap:7px;align-items:baseline;cursor:pointer;border-radius:4px}
.hints li:hover{background:var(--tint)}
.hints li:focus-visible{outline:2px solid var(--accent,var(--sel-line));outline-offset:1px}
.hints li::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--ink-faint);flex:0 0 auto;transform:translateY(-1px)}
.hints li.here{background:var(--sel);border-radius:4px;margin:0 -6px;padding:1px 6px;color:var(--ink)}
.hints li.here b{color:var(--sel-line)}
.hints li.done{color:var(--correct)}
.hints li.done::before{background:var(--correct);border-color:var(--correct)}
.hints li b{font-weight:600;color:var(--ink)}
.hints li .en{color:var(--ink-faint);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:8px}
.hints li.done .en{color:var(--correct)}
.hints li.done b{color:var(--correct)}
.note{font-size:12px;color:var(--ink-faint);line-height:1.5}

/* ABOVE THE KEYBOARD: the family's keys sit at 20 (shared/xi-keys.css) and
   the clue sheet at 30, and at 10 the Pencil/Clear row painted over Full Time
   (seen in the app, 26 Sep 2026). */
/* FULL TIME IS THE FAMILY'S SHEET (the owner, 30 Sep 2026: the same card
   over the board in every game). The card inside is data-xft-host, drawn and
   veiled by shared/xi-fulltime.css; this box stays only as what the game
   shows and hides, and neither paints nor catches a tap -- put away, the
   board and the "Full time" button under it must both be reachable. */
.ft{position:fixed;inset:0;background:none;pointer-events:none;display:none;align-items:center;justify-content:center;padding:18px;z-index:100}
.ft.on{display:flex}
/* A SOLID COLUMN over the dimmed board; the rest of Full Time is the
   family's panel (shared/xi-fulltime.css). */
.ftcard{background:var(--paper);color:var(--ink);border-radius:14px;max-width:560px;width:100%;padding:12px;
  max-height:100%;overflow:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:6px}
.ftcard>.btn.quiet{align-self:center}
.ftcard .row .btn{flex:1;justify-content:center}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;font-family:var(--disp);letter-spacing:.1em;text-transform:uppercase;font-size:13px;opacity:0;transition:opacity 180ms;pointer-events:none}
.toast.on{opacity:1}

/* ---- THE LOCKED SCREEN ----------------------------------------------------
   The owner's ruling, 24 Sep 2026: while playing, the page is the screen and
   nothing scrolls, at every size, with the elements scaling up. body.locked
   is set by the page's script while the board is up, and taken off when the
   squares would be too small to hit or the board card cannot hold its parts.

   On a phone, one column: the clock with Check and Reveal and the way into
   the answers, the key as a strip of thirteen, then the board card -- the
   grid fitted square to what is left, the readout and the keys. The answers
   open as a panel of their own. Where there is room the side column comes
   back beside the board and holds everything, scrolling in itself if it must.
   The grid's letters are sized from its own square (cqmin), so a larger
   screen gets a larger board rather than more paper. */
/* The family's top bar stands in for the clock, the worth and the
   substitutions (shared/xi-matchbar.css), across the top of the game; the
   clock card keeps its buttons. */
.game>#xiBar{grid-column:1/-1}
.cw-clockcard>h2,.cw-clockcard>.clock,.cw-clockcard>.subs{display:none}
body.locked{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.locked>*{flex:none}
body.locked>footer{display:none}
body.locked>#cwGame{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.locked #cwGame>main.game{flex:1 1 auto;min-height:0;width:100%;max-width:1180px;margin:0 auto;
  padding:6px 10px 8px;display:flex;flex-direction:column;gap:6px;align-items:stretch}
body.locked .game>section{display:contents}
body.locked .game>section>.card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:8px}
body.locked .gridbox{flex:1 1 auto;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
/* The board: fitted whole into the box it has, at every size (the owner, 25
   Sep 2026: "like other games in size"). It was the screen's width on a phone
   and panned when the box was shorter, and on production at 412x860 that left
   half a row cut off at the bottom: a board sitting cut off reads as broken
   however well it pans, and fitting it whole cost a pixel a square. --fit is
   the side of the square the board is drawn in. */
body.locked .gridbox{--fit:min(100cqw,100cqh)}
body.locked .cw-pitch{width:var(--fit);box-sizing:border-box}
body.locked .grid{width:100%}
body.locked .cell{font-size:calc(var(--fit) / var(--n,13) * .56)}
body.locked .cell .n{font-size:calc(var(--fit) / var(--n,13) * .26)}
body.locked .cell .pencil{font-size:calc(var(--fit) / var(--n,13) * .4)}
body.locked .cw-here{margin:4px 0 0;min-height:1.3em;font-size:14px;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.locked .cw-here:empty{display:none}
body.locked .readout{margin-top:6px;min-height:0}
body.locked .keys{margin-top:6px}
.cw-answers-btn,.cw-answers-close{display:none}

@media (max-width:860px){
  body.locked .game>section>.card{order:3}
  body.locked .game>aside{display:contents!important}
  body.locked .cw-clockcard{order:1;padding:6px 10px;display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"clock subs subs" "acts acts acts";align-items:center;gap:4px 10px}
  body.locked .cw-clockcard h2{display:none}
  body.locked .cw-clockcard .clock{grid-area:clock;gap:12px;justify-content:flex-start}
  body.locked .cw-clockcard .clock .min{font-size:28px}
  body.locked .cw-clockcard .clock .worth{text-align:left}
  body.locked .cw-clockcard .clock .worth b{font-size:22px}
  body.locked .cw-clockcard .subs{grid-area:subs;margin:0;justify-content:flex-end}
  body.locked .cw-clockcard .acts{grid-area:acts;margin:0;display:flex;gap:6px}
  body.locked .cw-clockcard .acts .btn{flex:1 1 0;min-height:40px;padding:4px 8px;font-size:12.5px;letter-spacing:.04em;
    flex-direction:column;justify-content:center;gap:0;border-radius:10px}
  body.locked .cw-clockcard .acts .btn small{font-size:10.5px}
  body.locked .cw-answers-btn{display:flex}
  body.locked .cw-keycard{order:2;padding:4px 6px}
  body.locked .cw-keycard h2,body.locked .cw-keycard .alpha{display:none}
  body.locked .key{grid-template-columns:repeat(13,minmax(0,1fr));gap:2px}
  body.locked .key div{padding:1px 0}
  body.locked .key div .kn{font-size:8.5px}
  body.locked .key div .kl{font-size:14px;min-height:15px}
  body.locked .game .note,body.locked .cw-answers{display:none}
  body.locked.cw-answers-open .cw-answers{display:block;position:fixed;left:0;right:0;bottom:0;max-height:72%;
    overflow:auto;z-index:30;border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  body.locked.cw-answers-open .cw-answers-close{display:block;float:right;min-height:40px;padding:0 14px;
    border:1px solid var(--line);border-radius:999px;background:var(--card);font-family:var(--disp);
    font-weight:700;letter-spacing:.08em;text-transform:uppercase}
}
/* A SHORT PHONE (360x640 and the like): the grid is what needs the height, so
   the strips above it give theirs. The cost under Check and Reveal is dropped
   here and only here -- at this height it wrapped each button to three lines
   and left the squares 12px wide, too small to hit. */
@media (max-width:860px) and (max-height:700px){
  body.locked .gridbox{overflow:hidden}
  /* And the pitch's border and the clue line give back the 30px the board
     needs to stay at 18px a square: a thin rim of turf, and the clue on one
     line (the full list is a tap away under All clues). */
  body.locked .cw-pitch{padding:3px}
  body.locked #cwGame>main.game{gap:4px;padding:4px 8px 6px}
  body.locked .game>section>.card{padding:5px}
  body.locked .cw-here{-webkit-line-clamp:1;font-size:13px;margin-top:2px}
  body.locked .cw-clockcard{padding:4px 8px;gap:2px 8px}
  body.locked .cw-clockcard .clock .min{font-size:22px}
  body.locked .cw-clockcard .clock .worth b{font-size:18px}
  body.locked .cw-clockcard .clock .worth span{font-size:9px}
  body.locked .cw-clockcard .acts .btn{min-height:34px}
  body.locked .cw-clockcard .acts .btn small{display:none}
  /* And the family's top bar is a line taller than the clock it replaced:
     measured at 360x640 it left the squares at 17.5px, under the floor. The
     readout under the grid gives the line back -- the clue line under it
     already says which answer you are in. */
  body.locked .readout{display:none}
  body.locked .cw-clockcard .acts .btn{font-size:11px;letter-spacing:.02em;white-space:nowrap;padding:2px 4px}
  body.locked .cw-clockcard .clock .min small{font-size:12px}
  body.locked .cw-keycard{padding:2px 4px}
  body.locked .key div .kl{font-size:12px;min-height:13px}
  body.locked .readout{margin-top:3px}
  body.locked .readout b,body.locked .readout span{font-size:12px}
  body.locked .keys{margin-top:4px;gap:3px}
}
@media (min-width:861px){
  body.locked #cwGame>main.game{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);gap:0 16px}
  body.locked .game>#xiBar{grid-column:1/-1;grid-row:1}
  body.locked .game>section>.card{grid-column:1;grid-row:2}
  body.locked .game>aside{grid-column:2;grid-row:2;overflow:auto;min-height:0}
}

/* Full Time is a card over the board, capped at the screen and scrolling in
   itself, so the page under it never has to. */
.ftcard{max-height:100%;overflow:auto}

/* ---- THE BOARD ON THE PITCH ------------------------------------------------
   The crossword's look (the owner, 25 Sep 2026): the grid sits on the turf,
   blocked squares are not painted so the pitch shows through them, and the
   open squares are the crossword's cell and line tokens rather than tiles in
   a dark frame. Everywhere, not only on a locked screen. */
.cw-pitch{position:relative;padding:8px;border-radius:var(--r-lg,10px);margin:0 auto}
/* The pitch itself, and its markings, are shared/xi-board.{css,js}.
   THE PITCH IS THE BOARD'S WHOLE BOX, not a square hugging the grid. The
   owner, 26 Sep 2026: "the width of the background should be the width of the
   other elements i.e. crossword is full screen width". The square board on a
   phone is as tall as the screen allows and no wider, and a pitch drawn only
   round it sat narrower than the keys under it and the bar over it. So the
   .pitch-bg takes the box (.gridbox) for its frame: the same width as the
   keyboard, and the grid stays square and centred on the turf. */
.gridbox{position:relative}
.gridbox>.cw-pitch{position:static}
.cw-pitch .grid{position:relative;z-index:1;gap:0;padding:0;background:transparent;border-radius:2px}
/* THE HAIRLINE BETWEEN SQUARES, the crossword's (shared/xi-board.css). The
   `border:0` in .cell above -- there to clear a button's own border -- also
   wiped the shared hairline, so a word read as one white bar with no squares
   in it (the owner, 30 Sep 2026: "you should be able to see where a box ends
   similar to the word break but more feint"). The word break stays the bold
   3px bar; this is the faint line the crossword draws. */
.cw-pitch .cell{background:var(--grid-cell);
  border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line)}
.cw-pitch .cell.block{background:transparent;border-color:transparent}
.cw-pitch .cell.same{background:var(--sel-word)}
.cw-pitch .cell.sel{background:var(--sel)}
.cw-pitch .cell.done{background:var(--correct-bg)}
.cw-pitch .cell.wrong{background:var(--wrong-bg)}
.cw-pitch .cell.revealed{background:var(--revealed-bg)}
.cw-here{display:none}