/* Every screen that is not the start menu, in the start menu's design language
   (2026-10-11): Settings, What's new, Credits, Community, Lane Tour, the Solo
   challenges, the account sheet, Pause and the game-over card.

   Each of those roots carries the class `ui`, which brings in menu.css's
   tokens (colours, type scale, spacing) and its components (.seg, .field, the
   button reset). This file then draws the screens themselves: the same sheet
   as the menu's own (a dark gradient card under an amber line), the same
   uppercase italic titles, toy-key buttons, segmented tabs, and switch rows
   for the settings that are on or off.

   `:is(#ui,.ui)` is the scope: no element has the id "ui", so it matches the
   `ui` class but weighs as much as an id. That lets these rules beat the old
   per-screen ones in interface.css and account.css (#communitySheet .x ...)
   without !important. This file loads last; features/challenges.js injects
   its own style tag later still, so its selectors carry one more class. */

/* ---------- the layer and the sheet ---------- */
:is(#ui,.ui).overlay,#challengeResult.ui{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(3,6,11,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  color:var(--text);font:400 var(--fs-3)/1.45 var(--font-body);text-align:left}
:is(#ui,.ui).overlay.hidden{display:none}
:is(#ui,.ui) .tvDaily{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:var(--r-2);background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--line)}
:is(#ui,.ui) .tvDaily.hide{display:none}
:is(#ui,.ui) .tvDaily button{min-height:38px;min-width:80px;padding:0 12px;font-size:var(--fs-3)}

:is(#ui,.ui)>:is(.sheet,.challengeSheet){position:relative;width:min(var(--sheet-w,560px),100%);max-width:none;max-height:100%;margin:0;
  display:flex;flex-direction:column;gap:var(--sp-3);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-5);border:0;border-radius:var(--r-4);clip-path:none;
  background:linear-gradient(180deg,#1d2a3f,#101826);
  box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),inset 0 3px 0 var(--amber),0 8px 0 var(--plate-edge),0 30px 60px rgba(0,0,0,.6);
  animation:ux-in var(--dur-3) var(--ease-out);scrollbar-width:thin;scrollbar-color:#4b5a73 transparent}
:is(#ui,.ui)>:is(.sheet,.challengeSheet)::-webkit-scrollbar{width:6px}
:is(#ui,.ui)>:is(.sheet,.challengeSheet)::-webkit-scrollbar-thumb{background:#4b5a73;border-radius:3px}
@keyframes ux-in{from{transform:translateY(14px) scale(.985);opacity:0}}
#settingsModal{--sheet-w:620px}#changelogModal,#creditsModal{--sheet-w:620px}
#communitySheet,#tourSheet,#accountSheet{--sheet-w:560px}
#challengePicker{--sheet-w:680px}#challengeResult{--sheet-w:520px}
#pauseOverlay{--sheet-w:420px}#over{--sheet-w:380px}

/* a sheet with a body of its own: the body scrolls (a long list), never the page */
:is(#ui,.ui) .ux-body,:is(#ui,.ui) :is(.cmBody,.tvBody){flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#4b5a73 transparent;margin:0 calc(var(--sp-2) * -1);padding:0 var(--sp-2)}
:is(#ui,.ui) .ux-body::-webkit-scrollbar,:is(#ui,.ui) :is(.cmBody,.tvBody)::-webkit-scrollbar{width:6px}
:is(#ui,.ui) .ux-body::-webkit-scrollbar-thumb,:is(#ui,.ui) :is(.cmBody,.tvBody)::-webkit-scrollbar-thumb{background:#4b5a73;border-radius:3px}
:is(#ui,.ui)>.sheet:has(>.ux-body),#communitySheet.ui>.sheet,#tourSheet.ui>.sheet{overflow:hidden}

/* ---------- titles and text ---------- */
:is(#ui,.ui) .kicker{display:block;margin:0;font:600 var(--fs-1)/1.1 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
:is(#ui,.ui) .kicker::before{content:none;display:none}
:is(#ui,.ui) h1{margin:4px 0 0;font:800 italic var(--fs-8)/.95 var(--font-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--text);
  text-shadow:0 2px 0 rgba(0,0,0,.35);overflow-wrap:anywhere}
:is(#ui,.ui) h1 em{font-style:inherit;color:var(--amber)}
:is(#ui,.ui) :is(.cmHead,.acHead) h2{margin:0;font:800 italic var(--fs-7)/1 var(--font-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--text)}
:is(#ui,.ui) .desc{margin:0;font-size:var(--fs-3);line-height:1.45;color:var(--text-2)}
:is(#ui,.ui) a{color:var(--amber);text-underline-offset:3px}
:is(#ui,.ui) .ux-head{display:flex;align-items:flex-start;gap:var(--sp-3);flex:0 0 auto}
:is(#ui,.ui) .ux-head .titles{flex:1;min-width:0}
:is(#ui,.ui) :is(.cmHead,.acHead){display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex:0 0 auto;margin:0}

/* ---------- keys: every button is a toy key unless it is something else below ---------- */
:is(#ui,.ui) button{--b-top:#25344d;--b-bot:#172235;--b-edge:var(--plate-edge);--b-text:var(--text);--b-ring:rgba(214,226,250,.16);--depth:4px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap);min-width:0;margin:0;padding:6px var(--sp-4);border:0;border-radius:var(--r-2);
  font:800 italic var(--fs-4)/1.1 var(--font-disp);letter-spacing:.02em;text-transform:uppercase;text-align:center;color:var(--b-text);white-space:normal;
  background:linear-gradient(180deg,var(--b-top),var(--b-bot));cursor:pointer;clip-path:none;
  box-shadow:inset 0 0 0 1px var(--b-ring),inset 0 2px 0 rgba(255,255,255,.14),0 var(--depth) 0 var(--b-edge),0 calc(var(--depth) + 4px) 12px rgba(0,0,0,.4);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),filter var(--dur-2)}
:is(#ui,.ui) button:active:not(:disabled){transform:translateY(calc(var(--depth) - 1px));
  box-shadow:inset 0 0 0 1px var(--b-ring),inset 0 2px 0 rgba(255,255,255,.14),0 1px 0 var(--b-edge)}
:is(#ui,.ui) button:disabled{opacity:.5;cursor:default}
:is(#ui,.ui) button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(hover:hover){:is(#ui,.ui) button:hover:not(:disabled){filter:brightness(1.12)}}
/* the one thing to do here: amber */
:is(#ui,.ui) button.big{--b-top:#ffd781;--b-bot:#ff9b3d;--b-edge:var(--amber-edge);--b-text:var(--on-amber);--b-ring:rgba(255,236,190,.55);--depth:5px;
  width:100%;min-height:56px;font-size:var(--fs-6);text-shadow:0 1px 0 rgba(255,255,255,.35)}
/* Close at the foot of a sheet: a plain key */
:is(#ui,.ui) button.ux-close,:is(#ui,.ui) #bChallengeClose{--b-top:#25344d;--b-bot:#172235;--b-edge:var(--plate-edge);--b-text:var(--text);--b-ring:rgba(214,226,250,.16);
  --depth:4px;flex:0 0 auto;width:100%;min-height:50px;font-size:var(--fs-5);text-shadow:none}
/* a choice that is on */
:is(#ui,.ui) button.on{--b-top:var(--select-hi);--b-bot:var(--select-lo);--b-edge:var(--select-edge);--b-text:var(--on-select);--b-ring:rgba(255,255,255,.5)}
/* quiet keys: Close in a header, Cancel */
:is(#ui,.ui) :is(.cmGhost,.acClose){--b-top:transparent;--b-bot:transparent;--depth:0px;min-height:40px;min-width:0;padding:0 var(--sp-3);
  box-shadow:inset 0 0 0 1.5px var(--line-hi);font-size:var(--fs-4)}

/* ---------- tabs: the menu's segmented control ---------- */
:is(#ui,.ui) :is(.ux-tabs,.cmTabs,.cmViews,.acTabs){flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:4px;margin:0;padding:4px;border-radius:var(--r-2);
  background:var(--inset);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.05)}
:is(#ui,.ui) :is(.ux-tabs,.cmTabs,.cmViews,.acTabs) button{flex:1 1 0;min-width:0;min-height:38px;padding:0 6px;border-radius:calc(var(--r-2) - 4px);
  --depth:0px;background:none;box-shadow:none;color:var(--text-2);font:800 var(--fs-4)/1 var(--font-disp);letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:none}
:is(#ui,.ui) :is(.ux-tabs,.cmTabs,.cmViews,.acTabs) button.on{color:var(--on-select);background:linear-gradient(180deg,var(--select-hi),var(--select-lo));
  transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--select-edge),0 4px 8px rgba(0,0,0,.4)}
:is(#ui,.ui) .cmViews button{font-size:var(--fs-3)}

/* ---------- settings: groups of rows ---------- */
:is(#ui,.ui) .stab[hidden]{display:none!important}
:is(#ui,.ui) .stab{display:flex;flex-direction:column;gap:var(--sp-3);padding:2px 0 4px}
:is(#ui,.ui) .row{display:flex;flex-direction:column;gap:8px;margin:0;padding:var(--sp-3);border-radius:var(--r-3);
  background:rgba(9,14,23,.42);box-shadow:inset 0 0 0 1px var(--line)}
:is(#ui,.ui) .row .lbl{display:block;margin:0 0 2px;font:600 var(--fs-1)/1.1 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
:is(#ui,.ui) .row .lbl::before,:is(#ui,.ui) .row .lbl::after{content:none;display:none}
:is(#ui,.ui) .row .desc{margin:0}
/* a setting: its name on the left, its state on the right */
:is(#ui,.ui) :is(.ux-toggle,.ux-cycle,.ux-action){--b-top:rgba(255,255,255,.055);--b-bot:rgba(255,255,255,.025);--b-ring:var(--line);--depth:0px;
  width:100%;min-height:48px;justify-content:space-between;gap:var(--sp-3);padding:0 12px 0 14px;text-align:left;
  font:600 var(--fs-4)/1.25 var(--font-body);font-style:normal;letter-spacing:0;text-transform:none;color:var(--text);text-shadow:none;
  box-shadow:inset 0 0 0 1px var(--b-ring)}
:is(#ui,.ui) :is(.ux-toggle,.ux-cycle,.ux-action):active:not(:disabled){transform:none;background:rgba(255,255,255,.09)}
:is(#ui,.ui) .ux-toggle.on{--b-top:rgba(255,173,71,.12);--b-bot:rgba(255,173,71,.06);--b-ring:rgba(255,173,71,.45);--b-text:var(--text)}
/* the switch */
:is(#ui,.ui) .ux-toggle::after{content:'';flex:0 0 auto;width:46px;height:28px;border-radius:999px;
  background:radial-gradient(circle at 14px 50%,#c3cddd 0 9px,transparent 10px),#0a1019;box-shadow:inset 0 0 0 1.5px var(--line-hi),inset 0 2px 4px rgba(0,0,0,.5);
  transition:background var(--dur-2)}
:is(#ui,.ui) .ux-toggle.on::after{background:radial-gradient(circle at 32px 50%,#fff 0 9px,transparent 10px),linear-gradient(180deg,#ffd781,#ff9b3d);
  box-shadow:inset 0 0 0 1px rgba(255,236,190,.6),0 0 10px rgba(255,173,71,.35)}
/* a choice that steps through its values, and a row that goes somewhere */
:is(#ui,.ui) :is(.ux-cycle,.ux-go)::after{content:'';flex:0 0 auto;width:10px;height:10px;margin-right:6px;border:solid var(--amber);border-width:2.5px 2.5px 0 0;
  transform:rotate(45deg)}
:is(#ui,.ui) .ux-cycle::after{transform:rotate(45deg) translate(-1px,1px)}
:is(#ui,.ui) #setMute.on{--b-ring:rgba(255,173,71,.6);color:var(--amber)}
:is(#ui,.ui) :is(#setResetRivalry,#setResetPrefs){color:#ffc2b8}
/* sliders */
:is(#ui,.ui) .settingsSlider{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;margin:0}
:is(#ui,.ui) .settingsSlider span:first-child{flex:0 0 112px;font:600 var(--fs-4)/1.2 var(--font-body);letter-spacing:0;color:var(--text)}
:is(#ui,.ui) .settingsSlider span:last-child{flex:0 0 48px;text-align:right;font:800 var(--fs-4)/1 var(--font-disp);color:var(--amber);font-variant-numeric:tabular-nums}
:is(#ui,.ui) .settingsSlider input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:8px;margin:0;border-radius:999px;
  background:#0a1019;box-shadow:inset 0 0 0 1px var(--line-hi),inset 0 2px 4px rgba(0,0,0,.55);accent-color:var(--amber)}
:is(#ui,.ui) .settingsSlider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#ffd781,#ff9b3d);border:0;box-shadow:0 0 0 3px rgba(8,12,19,.9),0 3px 0 var(--amber-edge),0 4px 10px rgba(0,0,0,.5);cursor:pointer}
:is(#ui,.ui) .settingsSlider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#ffd781,#ff9b3d);border:0;
  box-shadow:0 0 0 3px rgba(8,12,19,.9),0 3px 0 var(--amber-edge)}
/* the graphics pick */
:is(#ui,.ui) .ux-select{position:relative}
:is(#ui,.ui) .ux-select::after{content:'';position:absolute;right:16px;top:50%;width:9px;height:9px;margin-top:-7px;border:solid var(--amber);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);pointer-events:none}
:is(#ui,.ui) .ux-select select{-webkit-appearance:none;appearance:none;width:100%;min-height:50px;margin:0;padding:0 44px 0 14px;border:0;border-radius:var(--r-2);
  background:var(--inset);color:var(--text);font:600 var(--fs-4)/1.2 var(--font-body);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px var(--line-hi);cursor:pointer}
:is(#ui,.ui) .ux-select select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:is(#ui,.ui) .ux-select option{background:#111927;color:var(--text)}
:is(#ui,.ui) .ux-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* the account line Settings shows (account/accountUI.js): its first way in is the main one */
:is(#ui,.ui) #accountBox{display:grid;grid-template-columns:1fr 1fr;gap:8px}
:is(#ui,.ui) #accountBox>.desc{grid-column:1/-1;margin:0!important}
:is(#ui,.ui) #accountBox>button{width:auto!important;margin:0!important;min-height:46px;font-size:var(--fs-4)}
:is(#ui,.ui) #accountBox>button:first-of-type,:is(#ui,.ui) #accountBox>button:last-child:nth-of-type(2){grid-column:1/-1}
:is(#ui,.ui) #accountBox>button:first-of-type{--b-top:#ffd781;--b-bot:#ff9b3d;--b-edge:var(--amber-edge);--b-text:var(--on-amber);--b-ring:rgba(255,236,190,.55)}
/* the two "start over" actions side by side */
:is(#ui,.ui) .row:has(>#setResetPrefs){display:grid;grid-template-columns:1fr 1fr;gap:8px}
:is(#ui,.ui) .row:has(>#setResetPrefs)>.lbl{grid-column:1/-1}
/* the music and doll credits are in Credits, one tap away */
:is(#ui,.ui) #settingsAbout{display:none}

/* ---------- What's new and Credits: dated groups ---------- */
:is(#ui,.ui) .ux-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:2px;font-size:var(--fs-3);line-height:1.5;color:var(--text-2)}
:is(#ui,.ui) .changelogGroup{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-3);background:rgba(9,14,23,.42);box-shadow:inset 0 0 0 1px var(--line)}
:is(#ui,.ui) .changelogDate{margin:0 0 6px;font:800 var(--fs-4)/1.1 var(--font-disp);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
:is(#ui,.ui) .changelogListItems{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
:is(#ui,.ui) .changelogListItems.hidden{display:none}
:is(#ui,.ui) .changelogListItems li{position:relative;padding-left:16px}
:is(#ui,.ui) .changelogListItems li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--amber);transform:rotate(45deg)}
:is(#ui,.ui) .ux-list button.big{min-height:42px;margin:4px 0 8px!important;padding:6px 12px!important;font-size:var(--fs-4)!important;
  --b-top:#25344d;--b-bot:#172235;--b-edge:var(--plate-edge);--b-text:var(--text);--b-ring:rgba(214,226,250,.16);text-shadow:none}

/* ---------- Community and Lane Tour ---------- */
:is(#ui,.ui) .cmMsg{flex:0 0 auto;min-height:0;font-size:var(--fs-3);color:var(--amber-hi)}
:is(#ui,.ui) .cmMsg:empty{display:none}
:is(#ui,.ui) :is(.cmSub,.tvHead){margin:var(--sp-3) 0 var(--sp-2);font:600 var(--fs-1)/1.2 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
:is(#ui,.ui) .tvHead{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-2)}
:is(#ui,.ui) .tvHead span{color:var(--amber)}
:is(#ui,.ui) .cmNote{margin:var(--sp-2) 0;font-size:var(--fs-3);line-height:1.45;color:var(--text-2)}
:is(#ui,.ui) :is(ol.cmBoard,ul.cmFriends,ul.cmComments,ol.tvLanes,.achList){list-style:none;margin:0;padding:0;display:grid;gap:6px}
:is(#ui,.ui) :is(.cmBoard,.cmFriends,.cmComments,.tvLanes,.achList) li{border-radius:var(--r-2);background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--line);outline:0}
:is(#ui,.ui) .cmBoard li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:48px;padding:6px 12px}
:is(#ui,.ui) .cmBoard li.me{background:rgba(255,173,71,.13);box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.6)}
:is(#ui,.ui) .cmBoard .rk{font:800 italic var(--fs-5)/1 var(--font-disp);color:var(--amber);text-align:right}
:is(#ui,.ui) .cmBoard .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text)}
:is(#ui,.ui) .cmBoard .pt{font:800 var(--fs-5)/1 var(--font-disp)}
/* an empty list says so in a line, not in the rank column */
:is(#ui,.ui) :is(.cmBoard,.cmFriends,.cmComments) li.cmEmpty{display:block;padding:var(--sp-4);text-align:center;color:var(--text-2);background:rgba(9,14,23,.42);
  font-size:var(--fs-3);line-height:1.45}
:is(#ui,.ui) .cmFriends li{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px}
:is(#ui,.ui) .cmFriends .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:is(#ui,.ui) .cmFriends .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
:is(#ui,.ui) .cmFriends .meta{font-size:var(--fs-2);color:var(--text-3)}
:is(#ui,.ui) .dot{width:10px;height:10px;border-radius:50%;background:#5b6475;flex:none}
:is(#ui,.ui) .dot.on{background:var(--live);box-shadow:0 0 0 3px var(--live-glow)}
:is(#ui,.ui) .cmSmall{min-height:36px;padding:0 12px;font-size:var(--fs-3)}
:is(#ui,.ui) .cmCode{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:var(--r-2);background:var(--inset);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px var(--line)}
:is(#ui,.ui) .cmCode b{font:800 italic var(--fs-6)/1 var(--font-disp);letter-spacing:.12em;color:var(--amber)}
:is(#ui,.ui) .cmCode span{font-size:var(--fs-2);color:var(--text-2);min-width:0}
:is(#ui,.ui) :is(.cmAdd,.cmWrite){display:flex;gap:8px;margin-top:10px}
:is(#ui,.ui) .cmComments li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 12px}
:is(#ui,.ui) .cmComments .who{font:600 var(--fs-1)/1.2 var(--font-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
:is(#ui,.ui) .cmComments .txt{grid-column:1;font-size:var(--fs-4);line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
:is(#ui,.ui) .cmReacts{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
:is(#ui,.ui) .cmReacts button{--depth:2px;min-height:36px;padding:0 12px;font-style:normal;font-size:var(--fs-4)}
:is(#ui,.ui) .cmReacts button.on{--b-top:rgba(73,203,234,.25);--b-bot:rgba(73,203,234,.12);--b-ring:var(--p2);--b-edge:#0f3a47;--b-text:var(--text)}
:is(#ui,.ui) .cmBadge{display:inline-block;margin-right:4px;padding:2px 6px;border-radius:5px;font:800 var(--fs-1)/1 var(--font-disp);letter-spacing:.08em;
  text-transform:uppercase;background:rgba(169,144,255,.2);color:#d6c9ff}
:is(#ui,.ui) .tvLanes li{display:flex;gap:12px;align-items:center;padding:10px 12px}
:is(#ui,.ui) .tvLanes li.locked{opacity:.5}
:is(#ui,.ui) .tvInfo{flex:1;min-width:0}
:is(#ui,.ui) .tvName{font:800 italic var(--fs-5)/1.1 var(--font-disp);text-transform:uppercase}
:is(#ui,.ui) .tvVs{margin-top:2px;font-size:var(--fs-2);color:var(--text-2)}
:is(#ui,.ui) .tvSay{margin-top:4px;font-style:italic;color:var(--text-2)}
:is(#ui,.ui) .tvGate{margin:calc(var(--sp-1) * -1) 0 var(--sp-2);font-size:var(--fs-2);color:var(--text-3)}
:is(#ui,.ui) .tvGoal{margin-top:4px;font-size:var(--fs-2);color:var(--amber-hi)}
:is(#ui,.ui) .tvRight{display:grid;gap:6px;justify-items:end}
:is(#ui,.ui) .tvStars{color:var(--amber);letter-spacing:.1em;white-space:nowrap}
:is(#ui,.ui) .tvRight button{min-height:38px;min-width:80px;padding:0 12px;font-size:var(--fs-3)}
:is(#ui,.ui) .achList li{display:flex;gap:12px;align-items:center;padding:8px 12px;opacity:.55}
:is(#ui,.ui) .achList li.got{opacity:1;background:rgba(255,173,71,.12);box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.5)}
:is(#ui,.ui) .achList .ai{width:34px;font-size:24px;text-align:center}
:is(#ui,.ui) .achList b{display:block;font:800 italic var(--fs-4)/1.15 var(--font-disp);text-transform:uppercase}
:is(#ui,.ui) .achList small{font-size:var(--fs-2);color:var(--text-2)}

/* ---------- text fields anywhere in these screens ---------- */
:is(#ui,.ui) :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=tel],textarea){
  min-width:0;min-height:46px;margin:0;padding:10px 12px;border:0;border-radius:var(--r-2);background:var(--inset);color:var(--text);
  font:600 calc(16px*var(--ts))/1.3 var(--font-body);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px var(--line-hi)}
:is(#ui,.ui) :is(input,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:is(#ui,.ui) :is(input,textarea)::placeholder{color:var(--text-3)}

/* ---------- the account sheet (account/accountSheet.js; account.css lays it out) ---------- */
#accountSheet.ui .acBack{--b-top:transparent;--b-bot:transparent;--depth:0px;align-self:flex-start;min-height:40px;padding:0 6px 0 2px;box-shadow:none;
  color:var(--text-2);font:600 var(--fs-4)/1 var(--font-body);letter-spacing:0;text-transform:none}
#accountSheet.ui .acPrimary{--b-top:#ffd781;--b-bot:#ff9b3d;--b-edge:var(--amber-edge);--b-text:var(--on-amber);--b-ring:rgba(255,236,190,.55);--depth:5px;
  border:0;font-size:var(--fs-5);text-shadow:0 1px 0 rgba(255,255,255,.35);background:linear-gradient(180deg,var(--b-top),var(--b-bot))}
#accountSheet.ui .acDanger{--b-top:transparent;--b-bot:transparent;--depth:0px;color:#ffb3a8;box-shadow:inset 0 0 0 1.5px rgba(255,122,107,.5)}
#accountSheet.ui .acChoice{display:grid;justify-items:start;align-content:center;gap:4px;min-height:72px;padding:12px 18px;text-align:left;font-style:normal}
#accountSheet.ui .acChoice>*{text-align:left}
#accountSheet.ui :is(.acCard,.acNote){border:0;border-radius:var(--r-3);background:rgba(9,14,23,.42);box-shadow:inset 0 0 0 1px var(--line)}
#accountSheet.ui .acNote.ok{box-shadow:inset 3px 0 0 var(--live),inset 0 0 0 1px var(--line)}
#accountSheet.ui :is(.acH,.acLabel){font:600 var(--fs-1)/1.2 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
#accountSheet.ui .acTitle{font:800 italic var(--fs-7)/1 var(--font-disp);text-transform:uppercase}
#accountSheet.ui .acSeg{gap:4px;padding:4px;border:0;border-radius:var(--r-2);background:var(--inset);box-shadow:inset 0 2px 5px rgba(0,0,0,.55)}
#accountSheet.ui .acSegBtn{--depth:0px;min-height:40px;border:0;border-radius:calc(var(--r-2) - 4px);background:none;box-shadow:none;color:var(--text-2);
  font:800 var(--fs-4)/1 var(--font-disp);font-style:normal}
#accountSheet.ui .acSegBtn.on{color:var(--on-select);background:linear-gradient(180deg,var(--select-hi),var(--select-lo));box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--select-edge)}
#accountSheet.ui .acKid{--b-top:rgba(255,255,255,.055);--b-bot:rgba(255,255,255,.025);--depth:0px;font-style:normal;box-shadow:inset 0 0 0 1px var(--line)}
#accountSheet.ui .acCodeBox{border:1.5px dashed rgba(255,173,71,.6);border-radius:var(--r-2);background:var(--inset)}
#accountSheet.ui .acMsg:not(:empty){border:0;border-radius:var(--r-2);background:#1d2a3f;box-shadow:inset 3px 0 0 var(--amber),0 8px 24px rgba(0,0,0,.6)}
#accountSheet.ui .acMsg.err{box-shadow:inset 3px 0 0 var(--danger),0 8px 24px rgba(0,0,0,.6)}

/* ---------- Solo challenges ---------- */
#challengePicker.ui .challengeGrid{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;
  padding:4px 2px 6px;scrollbar-width:thin;scrollbar-color:#4b5a73 transparent}
#challengePicker.ui>.challengeSheet{overflow:hidden}
#challengePicker.ui .challengeCard{--depth:4px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:96px;padding:14px 16px;
  text-align:left;border:0;border-radius:var(--r-3);font-style:normal;text-transform:none;letter-spacing:0}
#challengePicker.ui .challengeCard b{display:block;margin:0;font:800 italic var(--fs-5)/1.1 var(--font-disp);text-transform:uppercase;color:var(--text)}
#challengePicker.ui .challengeCard small{display:block;font:500 var(--fs-3)/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-2)}
#challengePicker.ui .challengeCard.done{--b-ring:rgba(82,224,162,.55);--b-top:#173a33;--b-bot:#102823}
#challengeResult.ui .challengeActions{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:4px!important}
#challengeResult.ui .challengeActions button{min-width:0}
#challengeResult.ui .challengeActions button.big{grid-column:1/-1}

/* ---------- Pause ---------- */
#pauseOverlay.ui .pauseTiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
#pauseOverlay.ui .pauseTile{--depth:4px;flex-direction:column;gap:8px;min-height:84px;font:800 var(--fs-3)/1.1 var(--font-disp);letter-spacing:.06em}
#pauseOverlay.ui .pauseTile::before{content:'';width:28px;height:28px;background:var(--p2);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
#pauseOverlay.ui .pauseTile.off,#pauseOverlay.ui .pauseTile.tileSound.on{--b-top:#1a2436;--b-bot:#111927;--b-text:var(--text-3);--b-edge:var(--plate-edge);--b-ring:rgba(214,226,250,.12)}
#pauseOverlay.ui .pauseTile.off::before,#pauseOverlay.ui .pauseTile.tileSound.on::before{background:var(--text-3)}
#pauseOverlay.ui .pauseTile.tileAim:not(.off),#pauseOverlay.ui .pauseTile.tileSound:not(.on){--b-top:#25344d;--b-bot:#172235;--b-text:var(--text)}
#pauseOverlay.ui #bPauseReplay,#pauseOverlay.ui .pauseQuit{width:100%;margin:0!important}
#pauseOverlay.ui .pauseQuit{--b-top:transparent;--b-bot:transparent;--depth:0px;color:#ffb3a8;box-shadow:inset 0 0 0 1.5px rgba(255,122,107,.5)}
#pauseOverlay.ui #bResume{margin:0!important}

/* ---------- the game-over card (it parks in a corner: the winners celebrate on the table) ---------- */
#over.ui{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;align-items:flex-start;justify-content:flex-start;pointer-events:none}
#over.ui>.sheet{pointer-events:auto;gap:10px;padding:var(--sp-4) var(--sp-5) var(--sp-5)}
/* The card scrolls when the XP, new-table and garage blocks make it taller than the screen (max-height 90dvh); Rematch and Change setup
   are pinned to its bottom edge side by side on every size, as on the phones below (2026-11-07: at 1280x720 they sat at y=955 in a card
   that ends at 705, out of view, reachable only by scrolling the card). */
#over.ui>.sheet{display:grid;grid-template-columns:1fr 1fr;align-content:start}
#over.ui>.sheet>*{grid-column:1/-1}
#over.ui>.sheet>:is(#bRematch,#bChange){grid-column:auto;position:sticky;bottom:0;z-index:1;box-shadow:0 0 0 4px #111920}
#over.ui>.sheet:has(>#bRematch.hide)>#bChange{grid-column:1/-1}
#over.ui h1{font-size:var(--fs-8)}
#over.ui .overStats{width:100%;margin:0;border-collapse:collapse;font:600 var(--fs-4)/1.2 var(--font-disp)}
#over.ui .overStats :is(th,td){padding:7px 6px;border-bottom:1px solid var(--line);text-align:center}
#over.ui .overStats tbody th{text-align:left;font:600 var(--fs-1)/1.2 var(--font-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
#over.ui .overStats thead th{font:800 italic var(--fs-4)/1.1 var(--font-disp);text-transform:uppercase;color:var(--text-2);max-width:130px;overflow:hidden;text-overflow:ellipsis}
#over.ui .overStats thead th.win{color:var(--amber)}
#over.ui .overStats td{font:800 var(--fs-6)/1 var(--font-disp);color:var(--text)}
#over.ui :is(#bRematch,#bChange){margin:0!important;width:100%}
#over.ui #bChange{min-height:46px}
/* the winning-shot clip (app/matchEnd.js): only the headline, Again!, Change setup and a Skip chip show until it ends */
#over .clipSkip{display:none}
#over.over--clip .clipSkip{display:block;align-self:flex-end;width:auto!important;min-height:0;padding:4px 14px;font-size:var(--fs-2);margin:0 0 0 auto!important}
#over.over--clip>.sheet>:not(.kicker):not(h1):not(#overSub):not(#bRematch):not(#bChange):not(#bClipSkip){display:none!important}
#over.ui #bRematch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
#over.ui #bRematch .againWho{display:block;font:600 var(--fs-1)/1.15 var(--font-disp);letter-spacing:.06em;text-transform:none;opacity:.85;text-align:center}
#over.ui #bRematch .againWho:empty{display:none}

/* ---------- phones: the sheets rise from the bottom edge, full width ---------- */
@media (max-width:599px){
  :is(#ui,.ui).overlay:not(#over),#challengePicker.ui,#challengeResult.ui{align-items:flex-end;padding:max(12px,env(safe-area-inset-top)) 0 0}
  :is(#ui,.ui):not(#over)>:is(.sheet,.challengeSheet){width:100%;border-radius:var(--r-4) var(--r-4) 0 0;
    padding:var(--sp-4) var(--sp-4) max(var(--sp-4),env(safe-area-inset-bottom));gap:10px;animation:ux-up var(--dur-3) var(--ease-out)}
  :is(#ui,.ui) h1{font-size:var(--fs-7)}
  :is(#ui,.ui) :is(.cmHead,.acHead) h2{font-size:var(--fs-6)}
  :is(#ui,.ui) .row{padding:10px;gap:6px}
  :is(#ui,.ui) .stab{gap:10px}
  :is(#ui,.ui) :is(.ux-toggle,.ux-cycle,.ux-action){min-height:46px}
  :is(#ui,.ui) .settingsSlider span:first-child{flex-basis:92px;font-size:var(--fs-3)}
  :is(#ui,.ui) :is(.ux-tabs,.cmTabs,.acTabs) button{font-size:var(--fs-3);padding:0 4px}
  :is(#ui,.ui) .cmViews{flex-wrap:wrap}
  :is(#ui,.ui) .cmViews button{flex:1 1 40%}
  #challengePicker.ui .challengeGrid{grid-template-columns:1fr 1fr;gap:8px}
  #challengePicker.ui .challengeCard{min-height:88px;padding:12px}
  #challengePicker.ui .challengeCard b{font-size:var(--fs-4)}
  #challengePicker.ui .challengeCard small{font-size:var(--fs-2)}
  #over.ui{align-items:flex-end;justify-content:center;padding:0 12px max(12px,env(safe-area-inset-bottom))}
  /* low and compact, so the winners on the table stay in view; Rematch and
     Change setup side by side, both always on screen */
  #over.ui>.sheet{width:100%;max-height:min(400px,56dvh);padding:var(--sp-3) var(--sp-4) var(--sp-4);
    display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px}
  #over.ui>.sheet>*{grid-column:1/-1}
  #over.ui>.sheet>:is(#bRematch,#bChange){grid-column:auto;min-height:50px;position:sticky;bottom:0;z-index:1;box-shadow:0 0 0 4px #101826}
  /* Tower's result (2026-11-01, owner: "Change setup is on top of Save highlights clip"): there is no Again! beside Change setup (Retry and
     Next level sit in the result line), so it takes the whole row, and the pinned bar is solid, so what scrolls under it (the XP card,
     Match highlights, Save highlights clip) is cut off cleanly instead of showing around a half-width button. There is no celebration
     on the table to keep in view, so the sheet may also be taller before it scrolls at all. */
  #over.ui>.sheet:has(>#bRematch.hide)>#bChange{grid-column:1/-1;box-shadow:0 0 0 5px #111920,0 16px 0 5px #111920}
  #over.ui>.sheet:has(#towerResult){max-height:min(620px,82dvh)}
  #over.ui #bRematch{font-size:var(--fs-5)}
  #over.ui h1{font-size:var(--fs-7);margin:0}
  #over.ui .overStats :is(th,td){padding:4px 6px}
  #over.ui .overStats td{font-size:var(--fs-5)}
}
@keyframes ux-up{from{transform:translateY(40px);opacity:0}}
/* a short phone (an iPhone SE under its browser bars): the header gives way to the settings */
@media (max-width:599px) and (max-height:620px){
  :is(#ui,.ui) .ux-head .kicker{display:none}
  :is(#ui,.ui) h1{font-size:var(--fs-6)}
  :is(#ui,.ui) :is(.ux-toggle,.ux-cycle,.ux-action){min-height:42px}
  :is(#ui,.ui) .row{padding:8px 10px}
  :is(#ui,.ui) .settingsSlider{min-height:38px}
  :is(#ui,.ui) button.ux-close{min-height:44px}
  :is(#ui,.ui) :is(.ux-tabs,.cmTabs,.acTabs) button{min-height:34px}
}
/* short screens (landscape phones): tighter sheets */
@media (max-height:540px){
  :is(#ui,.ui)>:is(.sheet,.challengeSheet){padding:var(--sp-3) var(--sp-4);gap:8px}
  :is(#ui,.ui) h1{font-size:var(--fs-6)}
  :is(#ui,.ui) .desc{font-size:var(--fs-2)}
  :is(#ui,.ui) :is(.ux-toggle,.ux-cycle,.ux-action){min-height:42px}
  :is(#ui,.ui) button.big{min-height:46px;font-size:var(--fs-5)}
  :is(#ui,.ui) button.ux-close{min-height:42px}
  #pauseOverlay.ui .pauseTile{min-height:60px;flex-direction:row}
  #over.ui>.sheet{max-height:calc(100dvh - 24px);display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:6px 8px;padding:12px 16px 14px}
  #over.ui>.sheet>*{grid-column:1/-1}
  #over.ui>.sheet>:is(#bRematch,#bChange){grid-column:auto;min-height:44px;position:sticky;bottom:0;z-index:1;box-shadow:0 0 0 4px #101826}
  #over.ui #bRematch{font-size:var(--fs-5)}
  #over.ui h1{font-size:var(--fs-6);margin:0}
  #over.ui .overStats :is(th,td){padding:3px 6px}
  #over.ui .overStats td{font-size:var(--fs-5)}
}
/* a landscape phone: Settings goes wide (its title, tabs and Close on one line, the
   groups of a tab side by side) and Solo puts its puzzles three to a row */
@media (orientation:landscape) and (max-height:540px){
  #settingsModal{--sheet-w:880px}
  #settingsModal.ui>.sheet{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:8px 12px;align-items:center}
  #settingsModal.ui .ux-head{grid-column:1;grid-row:1}
  #settingsModal.ui .ux-head .kicker{display:none}
  #settingsModal.ui .ux-tabs{grid-column:2;grid-row:1}
  #settingsModal.ui .ux-close{grid-column:3;grid-row:1;width:auto;min-height:44px;padding:0 18px;font-size:var(--fs-4)}
  #settingsModal.ui .ux-body{grid-column:1/-1;grid-row:2;align-self:stretch}
  #settingsModal.ui .stab{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;align-items:start;gap:8px}
  #settingsModal.ui .stab>.row:only-child{grid-column:1/-1}
  #settingsModal.ui #accountRow{grid-row:span 2}
  #settingsModal.ui :is(.ux-toggle,.ux-cycle,.ux-action){min-height:40px}
  #settingsModal.ui .row{padding:8px 10px;gap:6px}
  #challengePicker.ui .challengeSheet>.desc{display:none}
  #challengePicker.ui .challengeGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #challengePicker.ui .challengeCard{min-height:0;padding:10px 12px}
  #challengePicker.ui .challengeCard small{font-size:var(--fs-2)}
}
/* ---------- the Update key (app/freshness.js): a newer build is live ---------- */
/* the last row of the pause or game-over sheet */
#updateKey.ui{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:6px 6px 6px 14px;
  border-radius:var(--r-2);background:rgba(255,173,71,.08);box-shadow:inset 0 0 0 1px rgba(255,173,71,.38);
  color:var(--text);font:600 var(--fs-3)/1.3 var(--font-body)}
#updateKey.ui[hidden]{display:none}
#updateKey.ui .btn{flex:0 0 auto}
/* on the menu (a reload brought the same build back): a bar at the foot of the screen */
#updateKey.ui.floating{position:fixed;z-index:50;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:var(--r-3);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));box-shadow:inset 0 0 0 1px var(--line-hi),0 10px 26px rgba(0,0,0,.6)}

@media (prefers-reduced-motion:reduce){:is(#ui,.ui)>:is(.sheet,.challengeSheet){animation:none}}
html.derby-reduced-motion :is(#ui,.ui)>:is(.sheet,.challengeSheet){animation:none}

/* The one-time "Help make the game better?" card (src/app/telemetry.js): two buttons of the same size and weight. */
#tmCard{z-index:60}
#tmCard .tmRow{display:flex;gap:10px;margin:14px 0 6px}
#tmCard .tmRow button{flex:1 1 0;min-height:46px}
#tmCard .tmFoot{margin:8px 0 0;text-align:center}

/* ---------- onboarding (app/onboarding.js): the welcome strip, "Try next", the result sheet's next step ---------- */
/* the home question, while onboarding speaks through it */
#menu .home-q.ob-welcome{flex-wrap:wrap;align-items:center;row-gap:4px}
#menu .home-q.ob-welcome h2{color:var(--amber-hi)}
#menu .home-q.ob-welcome p{flex:1 1 220px;color:var(--text-2)}
/* the control onboarding wants tapped next breathes, gently (never under reduced motion): a key (the hero, Start) or a tile (Derby,
   the guided table), app/onboarding.js syncGuide */
#menu .btn.ob-lead,#menu .tile.ob-lead{animation:ob-breathe 2.4s ease-in-out infinite}
@keyframes ob-breathe{0%,100%{filter:none}50%{filter:brightness(1.12) drop-shadow(0 0 10px rgba(255,173,71,.55))}}
@media (prefers-reduced-motion:reduce){#menu .btn.ob-lead,#menu .tile.ob-lead{animation:none}}
:root.derby-reduced-motion #menu .btn.ob-lead,:root.derby-reduced-motion #menu .tile.ob-lead{animation:none}
#menu #modeOpts .tile.ob-try{position:relative;box-shadow:0 0 0 3px var(--amber),0 0 18px rgba(255,173,71,.45)}
#menu #modeOpts .tile.ob-try::after{content:'Try next';position:absolute;z-index:3;top:8px;left:8px;padding:5px 9px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#ffd781,#ff9b3d);color:var(--on-amber);font:800 italic var(--fs-1)/1 var(--font-disp);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 2px 0 var(--amber-edge)}
#over.ui #overOnboard{display:flex;flex-direction:column;gap:8px}
#over.ui #overOnboard.hide{display:none}
#over.ui #overOnboard .ob-line{color:var(--amber-hi);font:800 italic var(--fs-5)/1.15 var(--font-disp);text-transform:uppercase;letter-spacing:.01em}
#over.ui #overOnboard .ob-step{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--text-2);font-size:var(--fs-3)}
#over.ui #overOnboard .ob-step span{flex:1 1 100%}
#over.ui #overOnboard .ob-step button{flex:1 1 0;min-height:40px;margin:0}
#over.ui #overOnboard .ob-step button.sel{box-shadow:inset 0 0 0 2px var(--amber),0 3px 0 var(--plate-edge);color:var(--amber-hi)}
#over.ui #overOnboard :is(#obNext,#obChoose){width:100%;margin:0}
/* small screens: the first matches' result keeps the next step in view instead of the numbers */
@media (max-width:599px),(max-height:540px){#over.ob-active #overStats{display:none}}
/* while onboarding leads, Rematch steps back from the amber key to a plate */
#over.ob-active #bRematch{--b-top:#25344d;--b-bot:#172235;--b-edge:var(--plate-edge);--b-text:var(--text);--b-ring:rgba(214,226,250,.16);text-shadow:none}
#parentGate{--sheet-w:420px}#pgAnswer{width:100%;box-sizing:border-box;font-size:28px;text-align:center;padding:10px;margin:10px 0;border-radius:12px;border:2px solid #4b5a73;background:#10161f;color:#fff}

/* Game files (src/app/gameFiles.js): the download progress bar, in Settings and on the progress sheet */
.gfBar{height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:10px 0}
.gfBar>span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,#ffd781,#ff9b3d);transition:width .3s ease}

/* the Co-op sheet is a sheet with a body of its own, like the Lane Tour (app/coop.js) */
#coopSheet.ui>.sheet{overflow:hidden}