/* THE DAILY KIT's look (daily-kit.ts) is Elgin's own menu look (the owner, 2026-10-08: "make the daily minigames ui look like its part
   of elgin ... use the new ui guidelines im building out in elgin" -- the fishing book's Today's pond, then the club screen,
   js/sports-club-ui.js): ONE flat page in the fishing book's deep pond water (src/ui/dailies/daily-fishing.css --pond-water), the game's ink
   lettering for every word (src/ui/components/lettering.css), buttons are words and the one word that moves you on is big and gold (--dl-gold,
   the club screen's and the book's GO FISH), the coin counter is Elgin's own on-foot one -- the coin and the number, nothing else --
   and keys are ice blocks with one even ink line, green / yellow / slate once judged. No panels, no gradients, no scrims. Tall screens stack the
   stage over the keys; a wide one (a landscape phone, a desktop) puts them side by side. A game sets only --dl-stage-h, the height its
   stage needs on a tall screen, and its own stage's pieces. */
:root{--dl-page:#05131f;--dl-crest:clamp(44px,9vh,78px);--dl-ice:#eef9ff;--dl-hit:#3fbf5f;--dl-near:#ffd800;--dl-miss:#6f7a8a;--dl-cold:#ff8a65;--dl-pink:#ff5fb4;
  --dl-gold:#ffc93c;--dl-right:#7dff8a;--dl-wrong:#ff5fb4;
  /* ten keys and nine 5 px gaps inside the page's 16 px sides (a 390 px phone had lost P and the backspace off the right edge) */
  --dl-key:min(46px,calc((100vw - 32px - 45px - 4px)/10))}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color-scheme:dark;color:var(--ink-cream);font:15px var(--ink-sans);-webkit-tap-highlight-color:transparent}
html{background:var(--dl-page)}
body{overflow-x:hidden;touch-action:manipulation;background:none}
/* THE ROOM: every daily stands in the PLAY dome (./dome-sky.ts paints it, in the player's sky), behind everything the page draws */
canvas.dl-dome{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
.dl-page{min-height:100dvh;display:grid;grid-template:"top" auto "stage" auto "side" 1fr/1fr;justify-items:center;align-content:start;gap:10px;
  padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
/* THE TOP ROW IS THE PLAY DOME'S (play.html .pl-home, .pl-back, .pl-title, .pl-right, .pl-rank, .pl-trophy; the owner, 2026-10-19:
   "fix the ui for the daily games to match the main menu it shouldnt feel like you go to a new website"): the FROST MILANO crest at the
   left with BACK beside it, the name in the middle, and at the right the leaderboard's trophy, the flame and LV, the coins and the
   account button -- each at the dome's own size, lettering on the room, no bar. A change to the dome's row is a change here too. */
.dl-top{grid-area:top;display:flex;align-items:flex-start;gap:10px;width:100%;min-height:var(--dl-crest);position:relative}
.dl-left{display:flex;align-items:flex-start;gap:16px;margin-right:auto}
.dl-crest{display:block;line-height:0}
.dl-crest img{height:var(--dl-crest);width:auto;filter:drop-shadow(2px 3px 0 var(--ink))}
/* the way out is the dome's lettered word, BACK, beside the crest (the owner, 2026-10-09: "the home button does not seem like it is
   from our game") -- not a drawn house */
.dl-home{text-decoration:none;font-size:clamp(17px,2.4vw,26px)}
.dl-top h1{position:absolute;left:50%;top:0;translate:-50% 0;margin:6px 0 0;white-space:nowrap;font-size:clamp(20px,3.4vw,40px)}
.dl-badge,.dl-right{display:flex;align-items:center;gap:10px;min-height:48px}
.dl-trophy{display:grid;place-items:center;width:40px;height:40px;text-decoration:none;filter:drop-shadow(2px 3px 0 var(--ink))}
.dl-trophy svg{width:30px;height:30px}
/* PAST DAYS (past-days.ts): the calendar beside the trophy, the same size and ink drop */
.dl-tools{display:flex;align-items:center;gap:4px}
.dl-past{display:grid;place-items:center;width:40px;height:40px;padding:0;background:none;border:0;cursor:pointer;filter:drop-shadow(2px 3px 0 var(--ink))}
.dl-past svg{width:30px;height:30px}
.dl-past:hover,.dl-past:focus-visible{translate:0 -2px}
/* THE MASTHEAD (mountDailyPage's `mast`; the owner, 2026-10-25: "make the marquee for frostle like the new york times font but the
   frost times", and he took "The Frost Times + Frostle"): the paper's name in the New York Times masthead's blackletter (Chomsky,
   OFL, assets/fonts/chomsky/) over the game's name, small and spaced out, the way NYT Games stands over Wordle -- the same cream and
   ink as every other word on the page, no rule, no box */
@font-face{font-family:'Chomsky';font-display:swap;src:url(../../assets/fonts/chomsky/Chomsky.woff2) format('woff2')}
.dl-top h1.dl-masthead{display:flex;flex-direction:column;align-items:center;margin-top:0;line-height:1}
.dl-mast{font:400 1.15em/.95 'Chomsky','Old English Text MT',serif;-webkit-text-stroke-width:.12em;letter-spacing:.005em}
.dl-mast-game{font-size:.36em;line-height:1;letter-spacing:.45em;margin:.2em -.45em 0 0;-webkit-text-stroke-width:.32em;color:var(--dl-gold)}
/* a phone sets the name at 20 px: the game's line a size up there, so FROSTLE stays readable under the paper's name */
@media (max-width:560px),(max-height:500px){.dl-mast-game{font-size:.5em;-webkit-text-stroke-width:.28em}}
/* a past day's name beside the game's, a size down, in gold */
.dl-when{color:var(--dl-gold);font-size:.72em}
.dl-prof{display:flex;align-items:center;gap:8px;text-decoration:none}
.dl-prof b{font:900 20px/1 var(--ink-face);font-variant-numeric:tabular-nums;color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop);white-space:nowrap}
.dl-prof .dl-lv{color:#ffc93c}
.dl-prof:hover b,.dl-prof:focus-visible b{color:var(--ink-yellow)}
.dl-streak{display:flex;align-items:center;gap:2px}
.dl-streak svg{width:26px;height:26px;flex:none}
.dl-chips svg{width:28px;height:28px;flex:none}
.dl-streak b,.dl-chips b{font:900 20px/1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop)}
.dl-coins{display:flex;align-items:center;gap:4px}
/* daily pay and the log-in reward, paid now (daily-kit.ts settleDailyPage): the counter itself reads the gain in yellow for a moment */
.dl-coins.gain b{color:var(--ink-yellow)}
.dl-coins.gain{animation:dl-coin-gain .6s ease-out}
@keyframes dl-coin-gain{0%{transform:scale(.85)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.dl-coins.gain{animation:none}}
.dl-coins .arctic-coin-mark{width:26px;height:26px;flex:none}
.dl-coins b{font:900 20px/1 var(--ink-face);font-variant-numeric:tabular-nums;color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop)}
/* the one word that moves you on (SHARE, PIN IT, NEXT) is big and gold, as GO FISH is; every other button stays a cream word */
:is(.dl-page,.daily-menu) .ink-button.primary{color:var(--dl-gold);font-size:clamp(26px,3.4vw,40px);-webkit-text-stroke:8px var(--ink)}
:is(.dl-page,.daily-menu) .ink-button.primary:hover:not(:disabled){color:var(--ink-yellow)}
.dl-stage{grid-area:stage;display:grid;justify-items:center;gap:6px}
.dl-side{grid-area:side;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:520px}
.dl-say{margin:0;min-height:22px;text-align:center;font-weight:900;letter-spacing:.08em}
.dl-keys{display:grid;gap:7px;justify-items:center}
.dl-keys[hidden],.dl-end[hidden]{display:none}
.dl-keyrow{display:flex;gap:5px}
.dl-key{appearance:none;margin:0;padding:0;width:var(--dl-key);height:calc(var(--dl-key)*1.25);min-height:44px;display:grid;place-items:center;background:var(--dl-ice);
  border:2.5px solid var(--ink);border-radius:7px;cursor:pointer;font:900 19px/1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;touch-action:manipulation}
.dl-key.wide{width:calc(var(--dl-key)*1.5)}
.dl-key svg{width:26px;height:26px}
.dl-key.hit{background:var(--dl-hit)}.dl-key.near{background:var(--dl-near)}.dl-key.miss{background:var(--dl-miss)}
.dl-key:active{transform:translateY(2px)}
.dl-key:focus-visible{outline:none;border-color:var(--dl-pink)}
.dl-end{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.dl-score{display:flex;flex-direction:column;align-items:center;gap:6px}
.dl-score strong{font-size:46px}
.dl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.dl-chips span{display:flex;align-items:center;gap:4px}
.dl-chips .arctic-coin-mark{width:28px;height:28px}
.dl-bars{display:grid;gap:3px;width:min(300px,100%)}
.dl-bar{display:grid;grid-template-columns:18px 1fr 34px;align-items:center;gap:6px}
.dl-bar b,.dl-bar span{font:900 14px/1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill}
.dl-bar i{display:block;height:14px;width:var(--w);background:var(--dl-miss);border:2px solid var(--ink);border-radius:4px}
.dl-bar.mine i{background:var(--dl-pink)}
.dl-board{list-style:none;margin:0;padding:0;display:grid;gap:2px;width:min(300px,100%)}
.dl-board li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;font:900 15px/1.3 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill}
.dl-board li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-board li.mine{color:var(--dl-pink)}
.dl-note{margin:0;font-size:12px;text-align:center}
.dl-row.shake{animation:dl-shake .4s}
@keyframes dl-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){.dl-row.shake{animation:none}}
@media (min-aspect-ratio:5/4) and (min-width:600px){
  :root{--dl-key:min(48px,calc((100vw - var(--dl-stage-w,300px) - 90px)/10.8))}
  .dl-page{grid-template:"top top" auto "stage side" 1fr/auto minmax(0,560px);gap:6px 28px;align-items:start;justify-content:center;height:100dvh;overflow:hidden}
  /* the dome's top row stands taller than the 26 px name the games' height sums were written for (the crest, the 48 px account
     button): each game takes this much off the height it gives its stage on a wide screen */
  :root{--dl-top-more:calc(max(var(--dl-crest),48px) - 26px)}
  /* the top row spans the screen, as the dome's does, not just the two columns under it (a margin, which the columns' sizing does not
     count: a width there widened the stage's column and pushed the keys off the screen; and contain:inline-size, so the row's own
     words never widen the stage's column either -- Frostle's tiles grew by a third before it) */
  .dl-top{margin-inline:calc((100% - 100vw)/2 + 16px);contain:inline-size}
  .dl-side{align-self:center;max-height:calc(100dvh - 60px);overflow-y:auto}
  .dl-key{height:calc(var(--dl-key)*1.15)}
  .dl-score strong{font-size:36px}
}
/* the right group: the coins, and the sign-up button (src/save/account-nudge.ts) last, as the dome's */
.dl-top .acct-nudge{width:48px;height:48px;display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer;filter:drop-shadow(2px 3px 0 var(--ink))}
.dl-top .acct-nudge svg{width:34px;height:34px}
.dl-top .acct-nudge--out{width:auto}
.dl-save{display:flex;align-items:center;gap:10px;margin:0}
/* a game's own word (renderDailyEnd `more`, Wildcat's ANSWERS) stands on PAST DAYS' line, so the results grow no taller */
.dl-more-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin:0}
/* the ask for a name on a signed-out player's results (daily-kit.ts mountWhoAsk): the field and two lettered words, no box */
.dl-who{display:flex;flex-direction:column;align-items:center;gap:2px;width:min(360px,100%)}
.dl-who .ink-field{width:100%}
.dl-who-say{margin:0;min-height:1.45em;text-align:center;color:var(--ink-yellow)}
.dl-who-go{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 22px;margin:0}
/* the question is the loudest words on the results (the owner: the small YOUR NAME "blends into the wall of text") */
.dl-who-title{margin:0 0 6px;font-size:34px;text-align:center;color:var(--ink-yellow)}
.dl-who .ink-field input::placeholder{color:#fff8dc66;-webkit-text-stroke:0}
/* the field is the sign-up sheet's: a thin faint line that goes yellow only while you type (the owner, 2026-10-08: "the underlines are
   unbearable", src/save/signup-skin.css) */
.dl-who .ink-field input{border-bottom:1px solid #fff8dc59}
.dl-who .ink-field input:focus,.dl-who .ink-field input:focus-visible{border-bottom-color:var(--ink-yellow)}
/* the card: the ask alone, centred on the dimmed page */
dialog.dl-who-card{width:min(440px,calc(100vw - 32px));max-width:none;margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
dialog.dl-who-card:not([open]){display:none}
dialog.dl-who-card .dl-who{width:100%}
dialog.dl-who-card .dl-who-title{font-size:40px}
.dl-who-later{font-size:15px;min-height:36px;opacity:.85}
@media(max-height:500px){.dl-who-title{font-size:26px}dialog.dl-who-card .dl-who-title{font-size:30px}}
/* a landscape phone: the name a size down, as the dome's DAILY MISSIONS is there, so it never runs into the trophy */
@media (max-height:500px){.dl-top h1{font-size:20px;margin-top:10px}}
/* An upright phone, as the dome's: the crest, BACK, the coins and the account button on the first line and the name centred under
   them. The dome stands its flame, LV and trophy in a row of their own under its long DAILY MISSIONS; a daily's name is short, so they
   flank it on its own line instead -- the flame and LV before it, the trophy after -- and the game keeps that row's height. */
@media (max-width:560px){
  .dl-top{display:grid;grid-template-columns:1fr auto 1fr;gap:0 8px;align-items:start}
  .dl-left{grid-area:1/1/2/4;justify-self:start}
  .dl-right{grid-area:1/1/2/4;justify-self:end}
  .dl-badge{display:contents}
  .dl-top h1{position:static;translate:none;grid-area:2/2;margin:-4px 0 0;font-size:20px;line-height:36px}
  .dl-prof{grid-area:2/1;justify-self:end;align-self:center;margin-top:-4px}
  .dl-tools{grid-area:2/3;justify-self:start;align-self:center;margin-top:-4px}
  .dl-trophy,.dl-past{width:32px;height:32px}
  .dl-trophy svg,.dl-past svg{width:26px;height:26px}
}
/* THE PAST DAYS CARD (past-days.ts): the month in big lettering between its two arrows, the week's letters, every day a number --
   the days played marked under theirs (a tick, a cross, a dot: shape and lightness, never hue), the day on the page bigger and yellow,
   the days before the game and after today faint and dead -- and CLOSE. Lettering on the dimmed page, no panel, no cell boxes. */
dialog.dl-past-card{width:min(420px,calc(100vw - 32px));max-width:none;margin:auto;display:flex;flex-direction:column;align-items:stretch;gap:6px}
dialog.dl-past-card:not([open]){display:none}
.dl-past-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
.dl-past-head h2{margin:0;text-align:center;font-size:34px;letter-spacing:.04em}
.dl-past-step{width:44px;height:44px;display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer}
.dl-past-step svg{width:30px;height:30px}
.dl-past-week,.dl-past-days{display:grid;grid-template-columns:repeat(7,1fr);margin:0;padding:0;list-style:none}
.dl-past-week span{text-align:center;font:900 13px/1 var(--ink-face);color:var(--ink-cream);opacity:.6;letter-spacing:.08em}
.dl-past-days li{display:grid;place-items:center;min-height:52px}
.dl-past-days a{display:grid;justify-items:center;align-content:center;gap:2px;width:100%;min-height:52px;text-decoration:none;color:inherit}
.dl-past-days b{font:900 21px/1 var(--ink-face);font-variant-numeric:tabular-nums;color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop)}
.dl-past-days i{display:block;width:24px;height:24px}
.dl-past-days i svg{width:100%;height:100%;display:block}
.dl-past-days .off b{opacity:.28;text-shadow:none}
.dl-past-days a:hover b,.dl-past-days a:focus-visible b{color:var(--ink-yellow)}
.dl-past-days a:focus-visible{outline:none}
.dl-past-days .on b{color:var(--ink-yellow);font-size:27px}
.dl-past-close{align-self:center;font-size:15px;min-height:36px;opacity:.85}
@media (max-height:500px){
  .dl-past-head h2{font-size:24px}
  .dl-past-days li,.dl-past-days a{min-height:36px}
  .dl-past-days b{font-size:17px;-webkit-text-stroke-width:4px}.dl-past-days .on b{font-size:21px}
  .dl-past-days i{width:16px;height:16px}
}
/* THE RANK on every daily's results (daily-kit.ts rankLine, src/data/daily-rank.ts): the title in small gold lettering, LV and the
   number, the bar -- a chunky gauge in one heavy ink line, flat gold with hard stripes, filling with what this game earned -- and +XP.
   Crossing a level pops the LV. Words on the page, no panel. */
.dl-rank{display:flex;flex-direction:column;align-items:center;gap:3px;width:min(320px,100%)}
.dl-rank-name{color:var(--dl-gold);letter-spacing:.12em}
.dl-rank-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%}
.dl-rank-row b{font:900 17px/1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:var(--ink-drop);white-space:nowrap}
.dl-rank-xp{color:var(--dl-gold)!important}
.dl-rank-bar{display:block;height:16px;border:3px solid var(--ink);border-radius:8px;background:#163a4f;overflow:hidden;box-shadow:2px 3px 0 var(--ink)}
.dl-rank-bar i{display:block;height:100%;width:var(--to,0%);background:repeating-linear-gradient(115deg,var(--dl-gold) 0 10px,#ffdb6e 10px 16px);
  transition:width .7s cubic-bezier(.3,.7,.4,1)}
.dl-rank.pop .dl-rank-lv{color:var(--ink-yellow);animation:dl-rank-pop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes dl-rank-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.dl-rank-bar i{transition:none}.dl-rank.pop .dl-rank-lv{animation:none}}
/* an upright phone's first line holds the crest, BACK, the coins and SIGN UP / IN: under 430 px the account's word and the coins are
   set a size smaller so a long purse never runs off the right edge (seen 2026-10-18 at 4,500 coins) */
@media (max-width:430px){
  .dl-right .acct-nudge-word{font-size:13px}
  .dl-prof{gap:5px}.dl-prof svg{width:22px;height:22px}.dl-prof b{font-size:17px;-webkit-text-stroke-width:4px}
  .dl-right .dl-coins svg,.dl-right .dl-coins .arctic-coin-mark{width:22px;height:22px}
  .dl-right .dl-coins b{font-size:17px;-webkit-text-stroke-width:4px}
}

/* YOU AGAINST THE WORLD (renderDailyEnd curve): the curve of everyone today in ice, YOUR line thick and lettered, the share you beat
   under it. Told apart by thickness and the word YOU, never by hue alone (the owner is colour-blind). */
.dl-curve{margin:0;width:min(360px,100%);display:grid;gap:4px;justify-items:center}
.dl-curve svg{width:100%;height:auto;overflow:visible}
.dl-curve-area{fill:var(--dl-ice);opacity:.22}
.dl-curve-line{fill:none;stroke:var(--dl-ice);stroke-width:3;stroke-linejoin:round}
.dl-curve-base{stroke:var(--ink-cream);stroke-width:1;opacity:.35}
.dl-curve-you{stroke:var(--ink-cream);stroke-width:4;stroke-linecap:round}
.dl-curve-dot{fill:var(--dl-gold);stroke:var(--ink);stroke-width:2.5}
.dl-curve text{font:900 11px var(--ink-face);fill:var(--ink-cream);paint-order:stroke;stroke:var(--ink);stroke-width:3px}
.dl-curve text.mine{fill:var(--dl-gold)}
.dl-curve-you-word{font-size:14px!important}
.dl-curve figcaption{font:900 14px/1.2 var(--ink-face);letter-spacing:.08em;text-align:center}
.dl-curve figcaption b{color:var(--dl-gold);font-size:18px}
/* the speaker (src/dailies/daily-sfx.ts mountDailySpeaker): a picture at the front of the top right row, the town's top bar's own */
.dl-speaker{width:40px;height:40px;margin:0;padding:0;border:0;background:none;color:var(--ink-cream);cursor:pointer;filter:drop-shadow(2px 3px 0 var(--ink));-webkit-tap-highlight-color:transparent}
.dl-speaker svg{display:block;width:28px;height:28px;margin:auto;stroke-width:2.4}
.dl-speaker:hover,.dl-speaker:focus-visible{color:var(--ink-yellow);outline:none}
/* PLAYING (.dl-playing on the page while a timed round is open -- Wildcat's open well): the top row folds to BACK and the speaker, the
   way Krillion's play screen carries nothing but the game (the owner, 2026-10-20: "the screen is super clogged look at how simple
   krillion is"). Each thing that goes is named (never ":not" the one that stays: a button added later must not vanish unasked). */
.dl-playing .dl-crest,.dl-playing .dl-top h1,.dl-playing .dl-badge,.dl-playing .dl-coins,.dl-playing .acct-nudge{display:none!important}
.dl-playing .dl-top{min-height:0}
/* THE SPEAKER ON AN UPRIGHT PHONE: the first line already holds the crest, BACK, the coins and SIGN UP / IN, and with the speaker as well a
   four-figure purse ran it 27 px into BACK (seen 2026-10-20 on Pinpoint's results at 390 px and 1,800 coins). Under 430 px it stands at
   the right end of the name's line instead, beside the trophy; while playing (.dl-playing) the first line is only BACK and the speaker,
   so it goes back there. */
@media (max-width:430px){
  .dl-top .dl-speaker{position:absolute;right:0;top:calc(max(var(--dl-crest),48px) - 4px);width:36px;height:36px}
  .dl-top .dl-speaker svg{width:26px;height:26px}
  .dl-playing .dl-top .dl-speaker{position:static;width:40px;height:40px}
}
/* THE FIRST LINE NEVER TOUCHES BACK (daily-kit.ts fitDailyTopLine): where the right group would run into BACK -- a long purse on a narrow
   phone -- the row steps down a notch at a time, every word kept: 1 the gaps and the number a size smaller, 2 SIGN UP / IN on two lines,
   3 the number smaller again. */
.dl-top[data-fit] .dl-right{gap:6px}
.dl-top[data-fit] .dl-right .dl-coins b{font-size:15px;-webkit-text-stroke-width:4px}
.dl-top[data-fit] .dl-right .acct-nudge-word{font-size:12px}
.dl-top:is([data-fit="2"],[data-fit="3"]) .dl-right .acct-nudge-word{display:inline-block;max-width:4.6em;white-space:normal;text-align:center;line-height:1.05}
.dl-top[data-fit="3"] .dl-right .dl-coins b{font-size:13px;-webkit-text-stroke-width:3.5px}

/* Opt-in responsive header: the original controls go into a native dialog at narrow widths.
   Font families and lettering remain the shared kit's; only placement and size change. */
.dl-top.dl-has-menu{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:48px}
.dl-has-menu .dl-left{display:block;grid-area:auto;margin:0}
.dl-has-menu .dl-crest img{height:48px}
.dl-has-menu h1{position:static;translate:none;grid-area:auto;justify-self:start;margin:0;font-size:clamp(20px,2.4vw,32px);line-height:1.1;white-space:normal}
.dl-menu-controls{display:flex;align-items:center;gap:16px}
.dl-has-menu .dl-home{font-size:20px;min-height:44px}
.dl-has-menu .dl-right,.dl-has-menu .dl-badge{display:flex;grid-area:auto;gap:10px;min-height:44px}
.dl-has-menu .dl-tools{margin:0}
.dl-has-menu .dl-prof{margin:0}
.dl-has-menu .dl-speaker{position:static;width:44px;height:44px}
.dl-menu-toggle{display:none;min-height:44px;font-size:18px}
.dl-menu-compact .dl-menu-toggle{display:block}
.dl-playing .dl-has-menu .dl-crest{display:block!important}
.dl-playing .dl-has-menu h1{display:block!important}
.dl-playing .dl-has-menu .dl-badge,.dl-playing .dl-has-menu .dl-coins{display:flex!important}
.dl-playing .dl-has-menu .acct-nudge{display:grid!important}
dialog.dl-menu{width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:20px;visibility:visible;pointer-events:auto;overflow:hidden}
dialog.dl-menu:not([open]){display:none}
.dl-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dl-menu-heading h2{position:static;margin:0;font-size:24px}
.dl-menu-close{font-size:15px;min-height:44px}
.dl-menu .dl-menu-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dl-menu .dl-menu-controls :is(.dl-badge,.dl-tools,.dl-right){display:contents!important}
.dl-menu-controls :is(a,button){touch-action:manipulation}
.dl-menu .dl-menu-controls :is(a,button,.dl-coins){position:relative;inset:auto;display:flex!important;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;width:100%;height:auto;min-height:52px;margin:0;padding:6px;text-align:center;filter:none}
.dl-menu .dl-menu-controls :is(a,button):focus-visible{outline:2px solid var(--ink-yellow);outline-offset:2px}
.dl-menu .dl-menu-controls :is(.dl-trophy,.dl-past,.dl-speaker,.gz-door)::after{content:attr(aria-label);width:100%;font:900 13px/1.2 var(--ink-sans);color:var(--ink-cream);text-shadow:none;-webkit-text-stroke:0}
.dl-menu .dl-speaker svg{margin:0}
.dl-menu .dl-menu-controls .gz-door{position:relative}
.dl-menu .gz-dot{top:4px;right:4px}
.dl-menu .dl-coins b{font-size:20px}
.dl-menu .acct-nudge-word{font-size:18px}
@media(max-width:430px){.dl-top.dl-has-menu{gap:10px}.dl-has-menu .dl-crest img{height:40px}.dl-has-menu h1{font-size:20px}.dl-menu-toggle{font-size:16px}}
@media(max-height:500px){
  .dl-has-menu .dl-crest img{height:40px}
  dialog.dl-menu{width:min(640px,calc(100vw - 32px));padding:12px}
  .dl-menu-heading{margin-bottom:4px}
  .dl-menu .dl-menu-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .dl-menu .dl-menu-controls :is(a,button,.dl-coins){min-height:64px}
}
/* Results may opt into pages rather than extending the document below the viewport. */
.dl-result-deck{width:100%;min-height:0}
.dl-result-page{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.dl-result-page[hidden],.dl-result-nav[hidden],.dl-who[hidden]{display:none}
.dl-result-nav{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:36px}
.dl-result-nav button{min-height:36px;min-width:44px;font-size:28px;padding:0}
.dl-result-nav button:disabled{opacity:.25}
.dl-result-nav span{font-size:13px;min-width:140px;text-align:center}
.dl-who-open{font-size:16px;min-height:36px}
/* Account access remains in the header menu; paged results need no duplicate sign-up row. */
.dl-end-paged .dl-save{display:none}