/* xi-fulltime.css — the shared end-of-game pieces.
 *
 * TOKENS ONLY. The palette is shared/xi-tokens.css and every game's gate
 * refuses a restated colour, so there is not one here.
 *
 * DELIBERATELY QUIET. This sits under a result a player has just earned, and it
 * is an invitation rather than the thing they came for. A block competing with
 * the score would be read as an advert; one that is too faint is not read at
 * all. It is a link that looks like a link, with the shirt to tie it to the
 * squad the player already knows from the drawer.
 */

.xift-next {
  margin: 14px 0 2px;
  text-align: center;
}

.xift-kicker {
  margin: 0 0 6px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.xift-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--body);
  font-weight: 600;
}
.xift-go:hover,
.xift-go:focus-visible { background: var(--tint); }

/* THE SHIRT, as the drawer draws it, so the two read as the same squad. */
.xift-shirt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 0.85rem;
}

.xift-name { font-size: 0.95rem; }

/* EVERY GAME PLAYED. Said, rather than left blank — see the comment in
   xi-fulltime.js. */
.xift-none {
  margin: 14px 0 2px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---- THE PANEL (XIFullTime.panel) ------------------------------------------
   The owner's approved mockup, 26 Sep 2026: the same four blocks on every
   game -- the result, keep it, share, challenge -- then the next game. */
.xft { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; width: 100%; box-sizing: border-box; }
/* LEFT, STATED: the card reads left to right in every game, and a sheet
   that centres its own text (the crossword's .result) must not centre the
   panel's lines while its score stays at the left edge. */
.xft-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.xft-head { display: flex; justify-content: space-between; align-items: baseline; }
.xft-kick { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--pitch-ink); }
.xft-date { font-size: 12px; color: var(--ink-soft); }
/* Its own case and spacing, stated: a game's page-wide heading rule (Grid's
   uppercases every h2) must not restyle the panel's. */
.xft-name { margin: 0; font-family: var(--disp); font-weight: 700; font-size: 22px; line-height: 1; color: var(--ink);
  text-transform: none; letter-spacing: normal; }
/* THE RING: the score over its maximum, filled round a circle, with the
   figure inside it; beside it, right and wrong, then the game's own line. */
.xft-top { display: flex; align-items: center; gap: 16px; }
.xft-ring { position: relative; flex: none; width: 120px; height: 120px; }
.xft-ring svg { display: block; width: 100%; height: 100%; }
.xft-ring-bg { fill: none; stroke: var(--tint-strong); stroke-width: 10; }
.xft-ring-fill { fill: none; stroke: var(--got); stroke-width: 10; stroke-linecap: round; }
.xft-score { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.xft-score b { font-family: var(--disp); font-weight: 700; font-size: 40px; line-height: .95; color: var(--ink); }
.xft-score span { font-family: var(--disp); font-weight: 600; font-size: 16px; line-height: 1; color: var(--ink-soft); }
.xft-side { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xft-tally { margin: 0; font-size: 16px; color: var(--ink-soft); }
.xft-tally b { font-family: var(--disp); font-weight: 700; font-size: 22px; color: var(--ink); }
.xft-tally i { font-style: normal; margin: 0 2px; }
.xft-side .xft-stats { margin: 0; }
.xft-help-l { margin: 0; font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.xft-help { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--ink); }
.xft-help li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pitch); margin: 0 8px 2px 0; }
@media (max-width: 360px) { .xft-ring { width: 100px; height: 100px; } .xft-score b { font-size: 32px; } }
.xft-boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.xft-b { height: 30px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 600; font-size: 13px; }
.xft-b.g { background: var(--got); color: var(--on-got); }
/* TWO COLOURS, RIGHT OR WRONG (the owner, 28 Sep 2026): a box right with
   help is still right, so it is green like the rest; the help is said beside
   the ring, not in the box's colour. */
.xft-b.a { background: var(--got); color: var(--on-got); }
.xft-b.r { background: var(--danger); color: var(--card); font-family: var(--body); font-weight: 700; font-size: 14px; }
.xft-b.x { background: var(--danger); color: var(--card); }
.xft-door { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.xft-door p { margin: 0; }
.xft-door-l { font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.xft-door-v { font-family: var(--disp); font-weight: 700; font-size: 20px; color: var(--ink); }
.xft-rungs { display: flex; gap: 4px; }
.xft-rungs i { flex: 1 1 0; height: 10px; border-radius: 3px; background: var(--tint-strong); }
.xft-rungs i.paid { background: var(--gold); }
.xft-stats, .xft-gaveup { margin: 0; font-size: 14px; color: var(--ink); }
.xft-gaveup { font-weight: 600; color: var(--ink-soft); }
.xft-league { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.xft-link { background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-weight: 500; font-size: 13px; color: var(--pitch-ink); text-decoration: underline; cursor: pointer; white-space: nowrap; flex: none; }
.xft-keep { font-size: 14px; color: var(--ink); }
.xft-keep p { margin: 0 0 8px; font-size: 13px; }
.xft-signin { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; }
.xft-saved { padding: 2px 4px; font-weight: 600; color: var(--pitch-ink); }
.xft-act { display: flex; flex-direction: column; gap: 8px; }
.xft-ask { margin: 0; text-align: center; font-size: 14px; color: var(--ink-soft); }
.xft-btn { min-height: var(--tap); height: 48px; width: 100%; border-radius: var(--r-md); font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.xft-primary { border: 0; background: var(--pitch); color: var(--on-pitch); }
.xft-secondary { border: 1.5px solid var(--pitch); background: var(--card); color: var(--pitch-ink); }
.xft-ghost { height: var(--tap); border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; }
.xft-table:empty { display: none; }
.xft-next .xift-next { margin-top: 4px; }
.xft-answers { border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; }
.xft-answers summary { cursor: pointer; color: var(--pitch-ink); font-size: 13px; min-height: 24px; }
.xft-answers ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.xft-a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.xft-a-m { font-family: var(--disp); font-weight: 600; color: var(--ink-soft); }
.xft-a.r .xft-a-pick, .xft-a.x .xft-a-pick { color: var(--ink-soft); text-decoration: line-through; }
.xft-a-was { color: var(--ink); font-weight: 600; }
.xft-a-p { font-family: var(--disp); font-weight: 700; }
.xft-door-a { margin: 0; font-size: 16px; color: var(--ink); }
.xft-door-c { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.xft-more { font-size: 13px; color: var(--pitch-ink); }

/* ---- THE SHEET (xi-fulltime.js sheet()) ------------------------------------
   Full Time over the finished board, the same card in every game (the owner,
   30 Sep 2026: "Card over the board, every game"). The crossword's frame --
   the card colour, the large radius, the pitch's six-pixel top -- because it
   was the one the owner pointed at as right. The veil is the box's own
   shadow, spread past every edge of the screen, so no second element has to
   be kept in step with it.
   WHY !important, and only here: the box is the game's own, and every game
   placed it with rules of its own -- a column beside the board, the lower
   half of a phone, a modal of its own -- most of them keyed on its id, which
   outranks any class this file could name. The sheet has to win over all of
   them, and it is the one place that says where Full Time goes. What the
   game still owns is WHETHER it shows: display is never set here. */
[data-xft-host].xft-sheet {
  position: fixed !important;
  z-index: 70 !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  flex: none !important;
  margin: 0 !important;
  padding: 14px 16px 18px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: var(--card) !important;
  border: 0 !important;
  border-top: 6px solid var(--pitch) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 0 0 100vmax var(--scrim), var(--shadow-2) !important;
  text-align: left;
  animation: xftIn .22s ease-out;
  /* Its own taps, stated: a game whose outer box lets taps through to the
     board (Ballpark's and Codeword's #ft) would otherwise pass that on to the
     card, which inherits it, and nothing on Full Time could be pressed. */
  pointer-events: auto !important;
}
@keyframes xftIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-xft-host].xft-sheet { animation: none; } }
/* PUT AWAY: kept laid out, so the game's own showing and hiding still
   decides whether the button to bring it back is offered. */
[data-xft-host].xft-sheet.xft-closed {
  visibility: hidden !important;
  box-shadow: none !important;
  pointer-events: none !important;
  animation: none;
}
/* ONE FRAME: inside the sheet the result card is not boxed a second time. */
.xft-sheet .xft { max-width: none; }
.xft-sheet .xft-card { background: none; border: 0; border-radius: 0; padding: 0; position: relative; }
/* THE CLOSE, TOP RIGHT, kept in reach while the sheet scrolls. It takes no
   height of its own: the result's first line runs beside it. */
.xft-x {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin: -10px -10px -44px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
  font: 400 30px/1 var(--body);
  cursor: pointer;
}
.xft-x:hover, .xft-x:focus-visible { color: var(--ink); background: var(--tint); }
.xft-sheet .xft-head { padding-right: 40px; }
/* BRINGING IT BACK: a "Full time" button at the foot of the screen while the
   sheet is put away. */
.xft-reopen {
  position: fixed;
  z-index: 69;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap, 44px);
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--pitch);
  color: var(--on-pitch);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.xft-reopen[hidden] { display: none; }
/* ROOM FOR IT WHERE NOTHING SCROLLS. A locked play screen is the height of
   the screen, so the button drew over the foot of the board: on an iPad on
   its side it hid two letters of the word search's bottom row, which nobody
   could scroll to (the app, 6 Oct 2026). While it is up the locked page gives
   it a strip of its own -- its height, its gap and a gap above -- and the board
   fits into what is left. Pages that scroll are left alone: what is under the
   button there can be scrolled out from under it. */
html body.locked.xft-away {
  box-sizing: border-box;
  padding-bottom: calc(28px + var(--tap, 44px) + env(safe-area-inset-bottom));
}
/* A game's own way on from its Full Time (a replay, back to the board) sits
   under the panel, centred, like the panel's own last line. */
.xft-sheet > button:not([hidden]) { display: block; margin: 12px auto 0; }