/* Base reset */
html{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);background:#06121f}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: full-viewport stage. Desktop = centred 4:3 screen + key legend. Touch landscape = control columns either side.
   Touch portrait = screen on top, controls below. Menus are a DOM layer over the whole stage. Single dark look by design. */
:root{
  color-scheme:dark;
  --night:#06121f; --deep:#0b2236; --light:#e6f5ff; --cyan:#6fd3e8; --ember:#ff7a3c; --glow:#ffc163; --mute:#7d9bb0;
  --btn:#12324b; --btnline:#2a5c7c; --onPrimary:#06121f; --panel:#081a2be6; --line:#1d4560; --danger:#ff5a4a;
  --display:'Bungee','Arial Black',Impact,sans-serif;
  --ui:'Chakra Petch','Trebuchet MS',Verdana,sans-serif;
}
html,body{height:100%}
body{background:var(--night);color:var(--light);font-family:var(--ui);box-sizing:border-box;overflow:hidden;
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:12px;
  display:flex;flex-direction:column;gap:10px;overscroll-behavior:none}
body.touch{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;padding-block:8px}
#app{flex:1;min-height:0;display:grid;gap:12px;justify-content:center;align-content:center}
#app.desk{grid-template-areas:"s"}
/* landscape phone: canvas fills the screen, controls float over the outer strips */
body.full{padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);gap:0}
#app.land,#app.wide{display:block;position:relative}
#app.wide #stage{position:absolute;inset:0;display:grid;place-items:center}
#app.wide canvas{border-radius:0;box-shadow:none}
/* portal versions: the game fills the portal's window */
body.portal{padding:0;gap:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
body.portal .legend{display:none}
#adwait{position:fixed;inset:0;z-index:30;background:#06121fd9;display:grid;place-items:center;font:700 14px var(--ui);letter-spacing:.2em;color:var(--mute)}
#adwait[hidden]{display:none}
#adwait span{padding:.6em 1.2em;border:1px solid var(--line);border-radius:999px;animation:fresh 1.6s ease-in-out infinite}
.vid{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:5px;background:var(--glow);color:var(--night);font-size:.75em;margin-right:.35em;vertical-align:.1em}
#app.land #stage{position:absolute;inset:0;display:grid;place-items:center}
#app.land canvas{border-radius:0;box-shadow:none}
#app.land .pad{position:absolute;bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:3;justify-content:flex-end}
.jr{align-items:flex-end}.jcol{display:flex;flex-direction:column;gap:10px}
#app.land.lefty .jr{flex-direction:row-reverse}
.pausebtn{display:none;position:absolute;top:8px;left:max(8px,env(safe-area-inset-left,0px));z-index:3;width:46px;height:40px;border-radius:12px;
  font:700 16px var(--ui);color:var(--light);background:rgba(18,50,75,.45);border:1px solid rgba(127,212,255,.4);touch-action:none;padding:0}
#app.land .pausebtn{display:grid;place-items:center}
#app.ui-open .pausebtn{visibility:hidden}
.mutebtn{top:56px}
.mutebtn.off{color:var(--mute)}
#app.desk .mutebtn,#app.wide .mutebtn{display:grid;place-items:center;top:auto;bottom:10px;left:10px;width:40px;height:36px;opacity:.75}
#app.land.faint .pad button{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:rgba(234,244,255,.32);box-shadow:none}
#app.land.faint .pad button.on{background:rgba(127,212,255,.16);color:rgba(234,244,255,.7)}
#app.land.fade1 .pad button{background:rgba(18,50,75,.2);border-color:rgba(127,212,255,.18);color:rgba(234,244,255,.6)}
.nexttease{margin:.6em 0 .2em;padding:.55em .8em;border:1px solid var(--ember,#ff7a3c);border-radius:12px;font-size:14px;line-height:1.35}
.nexttease b{color:var(--ember,#ff7a3c);letter-spacing:.05em}
body.swipe #app #padL,body.swipe #app .jcol{display:none!important}
#app.land #padL{left:14px}#app.land #padR{right:14px}
#app.land.lefty #padL{left:auto;right:14px}#app.land.lefty #padR{right:auto;left:14px}
#app.land .pad button{background:rgba(18,50,75,.45);border-color:rgba(127,212,255,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#app.land .pad button.rev{background:color-mix(in srgb,var(--ember) 32%,transparent);border-color:color-mix(in srgb,var(--glow) 60%,transparent);color:#fff;text-shadow:0 1px 3px #000a;min-width:calc(var(--b,68px)*1.35)}
#app.port{grid-template-areas:"s s" "l r";grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;align-content:stretch}
#app.port.lefty{grid-template-areas:"s s" "r l"}
#stage{grid-area:s;justify-self:center;min-width:0}
canvas{display:block;border-radius:10px;background:var(--deep);box-shadow:0 0 0 1px var(--line),0 18px 60px #000a;touch-action:none;outline:none}
.pad{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0}
#app.land .pad{display:flex}
#app.ui-open .pad{visibility:hidden}
#padL{grid-area:l}#padR{grid-area:r}
.row{display:flex;gap:10px;justify-content:center}
.pad button{font:700 22px var(--ui);color:var(--light);background:var(--btn);border:1px solid var(--btnline);border-radius:16px;
  width:var(--b,68px);height:var(--b,68px);touch-action:none;padding:0;display:grid;place-items:center}
.pad button.on{filter:brightness(1.5);transform:scale(.95)}
.pad button.rev{width:auto;padding-inline:18px;height:calc(var(--b,68px)*.8);font-size:14px;letter-spacing:.1em;color:var(--onPrimary);background:var(--ember);border-color:var(--glow)}
.pad .util button{--b:44px;font-size:15px;border-radius:12px;color:var(--mute)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:13px;color:var(--mute);letter-spacing:.03em}
.legend b{color:var(--light);font-weight:700}
body.touch .legend{display:none}

/* ---------- menu layer ---------- */
#ui[hidden]{display:none!important}
#ui{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;overflow:auto;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse at 50% 40%,#06121f55,#06121fd9 75%);font-size:clamp(14px,1.2vw + 8px,18px)}
#ui.title .screen{margin:auto auto 0}
#ui.title{background:linear-gradient(180deg,#06121f00 0%,#06121f00 30%,#06121fc0 70%,#06121fe6 100%)}
#ui.title .screen{padding-bottom:4vh}
.screen{box-sizing:border-box;margin:auto;width:min(100%,30em);display:flex;flex-direction:column;gap:.9em;text-align:center;animation:rise .35s ease-out}
@keyframes rise{from{transform:translateY(12px);opacity:.4}to{transform:none;opacity:1}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.2em;display:flex;flex-direction:column;gap:.9em}
.logo{font-family:var(--display);font-size:clamp(28px,7vw,60px);line-height:1;white-space:nowrap;margin:0;
  background:linear-gradient(180deg,#e6f5ff 0%,#6fd3e8 49%,#ffc163 51%,#ff5a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #06121f) drop-shadow(0 -2px 0 #06121f) drop-shadow(2px 0 0 #06121f) drop-shadow(-2px 0 0 #06121f) drop-shadow(0 3px 8px #000c) drop-shadow(0 0 16px #ff7a3c66);animation:drop .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{from{transform:translateY(-40px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.tag{margin:0;color:var(--mute);letter-spacing:.22em;font-size:.72em;text-transform:uppercase}
.tagline{color:var(--light);font-weight:700;font-size:.8em;letter-spacing:.16em;text-shadow:0 1px 4px #000,0 0 12px #000c;align-self:center;background:#06121f99;border-radius:999px;padding:.35em 1.1em}
.tagline{border-radius:14px;text-align:center}.tagline span{display:block}
h2{font-family:var(--display);font-weight:400;font-size:1.5em;margin:0;color:var(--glow);letter-spacing:.03em;text-wrap:balance}
.menu{display:flex;flex-direction:column;gap:.5em}
.menu button,.menu a,.menu .set,.back{font:700 1em var(--ui);letter-spacing:.05em;color:var(--light);background:#0d2a40d9;border:1px solid var(--btnline);
  border-radius:12px;padding:.75em 1em;display:flex;justify-content:space-between;align-items:center;gap:1em;cursor:pointer;text-align:left}
.menu button:hover,.back:hover{background:#173c58}
.menu button:focus,.back:focus,.menu input:focus,.tabs button:focus{outline:2px solid var(--glow);outline-offset:2px}
.menu a{text-decoration:none;justify-content:center}
.menu button.primary,.menu a.primary{background:var(--ember);color:var(--onPrimary);border-color:var(--glow);justify-content:center;font-size:1.15em;letter-spacing:.14em}
.menu button.on{border-color:var(--glow);background:#2a2214}
.menu button.danger{color:var(--danger)}
.menu small{display:block;font-weight:500;color:var(--mute);letter-spacing:0;font-size:.82em;margin-top:.15em}
.val{color:var(--glow);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.menu button,.menu .set{min-width:0}
.back{justify-content:center;background:transparent;color:var(--mute)}
.foot{margin:0;color:var(--mute);font-size:.85em}.foot b{color:var(--light);font-variant-numeric:tabular-nums}
.set{cursor:default}.set input[type=range]{accent-color:var(--ember);width:45%}
.rules{text-align:left;margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:.55em;line-height:1.45;max-width:65ch}
.rules b{color:var(--glow)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:.35em 1em;text-align:left;font-size:.9em;color:var(--mute)}
.keys b{color:var(--light)}
.tabs{display:flex;gap:.35em;justify-content:center;flex-wrap:wrap}
.tabs button{font:700 .8em var(--ui);letter-spacing:.08em;color:var(--mute);background:transparent;border:1px solid var(--btnline);border-radius:999px;padding:.4em .9em;cursor:pointer}
.tabs button.on{color:var(--night);background:var(--glow);border-color:var(--glow)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:.72em;letter-spacing:.14em;color:var(--mute);font-weight:500;text-align:left;padding:.3em .4em}
td{padding:.42em .4em;border-top:1px solid var(--line);text-align:left}
td.n,th.n{text-align:right}
tr.me td{color:var(--glow)}
.empty{color:var(--mute);margin:.6em 0}
.big{font-family:var(--display);font-size:3em;line-height:1;color:var(--light);font-variant-numeric:tabular-nums;margin:0}
.sub{margin:0;color:var(--mute);letter-spacing:.1em;font-size:.85em;text-transform:uppercase}
.badge{align-self:center;font:700 .8em var(--ui);letter-spacing:.2em;color:var(--night);background:var(--glow);border-radius:999px;padding:.35em 1em;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.3)}to{transform:none}}
.illus{display:block;width:100%;height:auto;aspect-ratio:12/5;border-radius:12px;border:1px solid var(--line)}
.desc{margin:0;line-height:1.5;text-align:left;max-width:65ch}
.desc b{color:var(--glow)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.pair button{justify-content:center}
.week{display:flex;gap:.35em;justify-content:center;margin:.3em 0 .5em}
.week span{display:flex;flex-direction:column;align-items:center;gap:.2em;font-size:.75em;color:var(--mute)}
.week i{display:flex;width:2.1em;height:2.1em;border-radius:50%;border:1px solid var(--btnline);align-items:center;justify-content:center;font-style:normal;font-weight:700;color:var(--night)}
.week .on i{background:var(--glow);border-color:var(--glow)}.week .today i{box-shadow:0 0 0 2px var(--light)}
.menu button.fresh{border-color:var(--glow);animation:fresh 1.6s ease-in-out infinite}
@keyframes fresh{50%{box-shadow:0 0 14px #ffc16388}}
.update{margin:.5em auto 0;font:700 .85em var(--ui);color:var(--night);background:var(--glow);border:0;border-radius:999px;padding:.5em 1.2em;cursor:pointer}
.hub{display:grid;grid-template-columns:1fr 1fr;gap:.7em;margin:.4em 0 .6em}
.hub button{font:inherit;color:var(--light);background:#0d2a40d9;border:1px solid var(--btnline);border-radius:16px;padding:1.1em .9em;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.35em;text-align:center}
.hub button:hover{background:#173c58}.hub button:focus{outline:2px solid var(--glow);outline-offset:2px}
.hub .hic{font-size:2em;color:var(--glow);line-height:1}.hub b{font-size:1.15em;letter-spacing:.04em}.hub small{color:var(--mute)}
.pbar{display:block;width:100%;height:6px;border-radius:3px;background:#ffffff18;overflow:hidden;margin:.2em 0 .4em}.pbar i{display:block;height:100%;background:var(--glow);border-radius:3px}
#ui.awards .screen{width:min(100%,34em)}
#ui.achlist .screen{width:min(100%,56em)}
#ui.achlist .ach ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(16em,1fr))}
#ui.atlas .screen{max-width:min(96vw,60em);width:100%}
.atlasgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2em,1fr));gap:.4em;max-height:56vh;overflow:auto;padding:.1em;overflow:auto;margin-bottom:.6em}
.atlasgrid>div{border:1px solid var(--line);border-radius:10px;padding:.3em .2em .35em;background:#0d2a4066;text-align:center;opacity:.55;position:relative}
.atlasgrid>div.got{opacity:1;border-color:#ffc16366;background:#1a2a4a}
.atlasgrid svg{width:100%;height:auto;display:block}
.atlasgrid .l line{stroke:var(--glow);stroke-width:1.4;stroke-linecap:round}.atlasgrid .d circle{fill:#9fb3c8}.atlasgrid .got .d circle{fill:#fff3c4}
.atlasgrid b{display:block;font-size:.72em;font-weight:600;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.atlasgrid .got b{color:var(--light)}
.atlasgrid small{position:absolute;top:.2em;right:.4em;font-size:.65em;color:var(--glow)}
.ach{display:flex;flex-direction:column;gap:.45em;text-align:left;max-height:52vh;overflow:auto;padding-right:.2em}
.ach li{list-style:none;display:grid;grid-template-columns:2.7em 1fr;gap:.2em .6em;align-items:start;padding:.55em .7em;border:1px solid var(--line);border-radius:12px;background:#0d2a4066}
.ach ul{margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
.ach .ic{font-size:1.3em;line-height:1.2;color:var(--mute);text-align:center}
.ach li.got .ic{color:var(--glow)}
.ach li:not(.got){opacity:.62}
.ach b{display:block;color:var(--light)}
.ach small{color:var(--mute);display:block;line-height:1.35}
.ach .rw{color:var(--glow)}
.count{color:var(--mute);font-size:.85em;margin:0}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5em,1fr));gap:.4em;max-height:min(52vh,26em);overflow:auto;padding:.15em}
.wgrid button{font:700 .85em var(--ui);color:var(--light);background:#0d2a40d9;border:1px solid var(--btnline);border-radius:12px;padding:.5em .6em;cursor:pointer;display:grid;grid-template-columns:1.6em 1fr;grid-template-rows:auto auto;column-gap:.55em;align-items:center;text-align:left;min-height:3.3em}
.wgrid button .sw{grid-row:1/3}.wgrid button.u>span:not(.sw){grid-row:1/3}.wgrid button>span:not(.sw){grid-column:2}
.wgrid button.on{border-color:var(--glow);background:#2a2214}
.wgrid button:disabled{opacity:.5;cursor:default}
.wgrid button:focus{outline:2px solid var(--glow);outline-offset:2px}
.wgrid small{grid-column:2;font-weight:500;color:var(--mute);font-size:.8em;line-height:1.25}
.sw{width:1.6em;height:1.6em;border-radius:50%;border:2px solid #fff3}
.sec{margin:.2em 0 0;text-align:left;font-size:.75em;letter-spacing:.18em;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:.35em;justify-content:center}
.chips span{font:700 .78em var(--ui);color:var(--night);background:var(--glow);border-radius:999px;padding:.3em .8em}
.sharegrid{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.sharegrid a,.sharegrid button{font:700 .9em var(--ui);letter-spacing:.04em;color:var(--light);background:#0d2a40d9;border:1px solid var(--btnline);border-radius:12px;
  padding:.75em .6em;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.4em}
.sharegrid a:focus,.sharegrid button:focus{outline:2px solid var(--glow);outline-offset:2px}
.sharegrid .wide{grid-column:1/-1;background:var(--ember);color:var(--onPrimary);border-color:var(--glow)}
.note{margin:0;color:var(--mute);font-size:.82em}
.ca,.cb{display:flex;flex-direction:column;gap:.9em;min-width:0}
/* world board: game-over panel */
.wb{border:1px solid var(--line);border-radius:12px;background:#0d2a40aa;padding:.55em .7em;display:flex;flex-direction:column;gap:.45em;font-size:.92em;line-height:1.35}
.wb p{margin:0}.wb b{color:var(--glow)}
.wb.dim{color:var(--mute);border-style:dashed;background:transparent}
.wb.ask{border-color:var(--glow);background:#2a2214cc}
.wbb{display:flex;gap:.4em}
.wbjoin{flex:1;min-width:0;font:700 .95em var(--ui);letter-spacing:.03em;color:var(--onPrimary);background:var(--glow);border:0;border-radius:10px;padding:.65em .8em;cursor:pointer}
.wbjoin b{color:inherit}.wbjoin:disabled{opacity:.6;cursor:default}
.wbic{font:700 1em var(--ui);color:var(--light);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:0 .85em;cursor:pointer}
.wbno,.wblink{font:600 .85em var(--ui);color:var(--mute);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.25em .4em;align-self:center}
.wbt{color:var(--mute);font-size:.85em;letter-spacing:.04em}
.wbchips{display:flex;gap:.4em;justify-content:center;flex-wrap:wrap}
.wbchips span{background:#06121fb3;border:1px solid var(--btnline);border-radius:999px;padding:.25em .85em;font-size:.95em;white-space:nowrap}
.wbjoin:focus,.wbic:focus,.wbno:focus,.wblink:focus,.you button:focus,.npick select:focus,.npick .dice:focus{outline:2px solid var(--glow);outline-offset:2px}
/* leaderboards */
#ui.scores .screen{width:min(100%,32em)}
.tabs.seg{gap:2px;border:1px solid var(--btnline);border-radius:999px;padding:3px;align-self:center;flex-wrap:nowrap;max-width:100%}
.tabs.seg button{border:0;padding:.45em .85em;white-space:nowrap}
.tabs.dtabs button{font-size:.72em;padding:.3em .8em}
.you{display:flex;align-items:center;gap:.45em;text-align:left;border:1px solid var(--line);border-radius:12px;padding:.45em .5em .45em .8em;background:#0d2a4066}
.you span{flex:1;min-width:0;color:var(--mute);font-size:.82em}
.you b{display:block;color:var(--light);font-size:1.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.you small{display:block;color:var(--glow);font-size:.95em;margin-top:.1em}.you small:empty{display:none}
.you button{font:700 .85em var(--ui);color:var(--light);background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:.55em .8em;cursor:pointer;white-space:nowrap}
.you button.go{color:var(--onPrimary);background:var(--glow);border-color:var(--glow)}.you button:disabled{opacity:.6}
.lbwrap{position:relative;max-height:min(50vh,26em);overflow:auto;overscroll-behavior:contain;padding:2px .25em 2px 2px}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.lb li{display:grid;grid-template-columns:2.1em 1fr auto 4.6em;align-items:center;gap:.55em;padding:.42em .6em;border-radius:10px;background:#0d2a4066;text-align:left;font-variant-numeric:tabular-nums}
.lb .r{font-weight:700;color:var(--mute);text-align:center;font-size:.92em}
.lb .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lb .th{font-style:normal;color:var(--mute);font-size:.8em;margin-left:.45em}
.lb .lv{color:var(--mute);font-size:.8em}
.lb .s{font-weight:700;text-align:right}
.lb .p1 .r,.lb .p2 .r,.lb .p3 .r{display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;color:var(--night);justify-self:center}
.lb .p1 .r{background:#ffc163}.lb .p2 .r{background:#d4e3ef}.lb .p3 .r{background:#e3a066}
.lb li.crew{background:#12243a66;border:1px dashed #2a5c7c88}
.lb li.crew .nm{color:#b8c9dc;font-weight:500;font-style:italic}.lb li.crew .s{color:#b8c9dc;font-weight:600}
.lb li.crew .r i,.crewkey{font:700 .62em var(--ui);font-style:normal;letter-spacing:.08em;color:#9fd9ff;border:1px solid #6fd3e866;border-radius:5px;padding:.15em .3em;white-space:nowrap}
.crewkey{font-size:.85em}
.wbnear{font-size:.92em;color:var(--light)}
.lb li.me{background:#2a2214;box-shadow:inset 0 0 0 1px var(--glow)}
.lb li.me .nm,.lb li.me .s{color:var(--glow)}
.lb.pin{position:sticky;bottom:0;padding-top:.2em;background:linear-gradient(#081a2b00,#081a2bf2 35%)}
.lb.pin::before{content:'· · ·';display:block;text-align:center;color:var(--mute);line-height:1;font-size:.8em}
.lbwrap .count{margin-top:.5em}
.lbwrap table td{font-size:.95em}
@media (max-width:400px){.lb li{grid-template-columns:2em 1fr 4.4em;gap:.45em}.lb .lv{display:none}.tabs.seg button{padding:.45em .6em}}
/* name picker */
.nprev{margin:0;font:400 1.35em var(--display);color:var(--glow);text-wrap:balance;line-height:1.15}
.npick{display:grid;grid-template-columns:1fr 1fr auto;gap:.4em}
.npick select{font:700 1em var(--ui);color:var(--light);background:#0d2a40;border:1px solid var(--btnline);border-radius:10px;padding:.6em .5em;min-width:0;width:100%}
.npick .dice{font-size:1.25em;line-height:1;background:var(--btn);border:1px solid var(--btnline);border-radius:10px;padding:0 .65em;cursor:pointer}
.back.danger{color:var(--danger)}
.rot{width:2.6em;height:4.2em;border:3px solid var(--glow);border-radius:.5em;margin:.4em auto;animation:turn 1.8s ease-in-out infinite}
@keyframes turn{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
/* short screens (phones in landscape): tighter spacing, two columns where it helps */
@media (max-height:520px){
  #ui{font-size:13px;padding-top:8px;padding-bottom:8px}
  .screen,.ca,.cb{gap:.5em}.panel{padding:.75em 1em;gap:.5em}
  h2{font-size:1.25em}.big{font-size:2.2em}.tag{font-size:.65em}
  .menu{gap:.35em}.menu button,.menu .set,.back{padding:.5em .9em}
  .logo{font-size:clamp(24px,5.2vw,40px)}
  .illus{max-height:34vh;width:auto;margin-inline:auto}
  .desc{line-height:1.4}
  .ach{max-height:58vh}
}
@media (max-height:520px) and (min-width:560px){
  .screen.cols{width:min(100%,54em);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:.6em 1.4em}
  #ui.title .screen{width:min(100%,42em);padding-bottom:6px}
  #ui.title .menu{display:grid;grid-template-columns:1fr 1fr;gap:.35em}
  #ui.title .menu .primary{grid-column:1/-1}
  #ui.settings .menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #ui.settings .screen{width:min(100%,46em)}
  #ui.settings .val{white-space:normal;text-align:right;text-overflow:clip}
  #ui.howto .screen{width:min(100%,50em)}
  .rules{columns:2;column-gap:1.4em;display:block}.rules li{break-inside:avoid;margin-bottom:.4em}
  #ui.scores .screen.cols{width:min(100%,52em);align-items:start}
  .lbwrap{max-height:calc(100vh - 7.2em);max-height:calc(100dvh - 7.2em)}
}
#splash{position:fixed;inset:0;z-index:20;background:#06121f var(--splash) center/cover no-repeat;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:27vh;transition:opacity .45s ease}
@media (max-aspect-ratio:1/1){#splash{background-size:contain;background-position:center 38%;padding-bottom:max(14vh,env(safe-area-inset-bottom,0px))}}
#splash.out{opacity:0;pointer-events:none}
.splinks{position:absolute;bottom:max(10px,env(safe-area-inset-bottom,0px));right:14px;display:flex;gap:1em;font:600 12px var(--ui);letter-spacing:.06em}
.splinks a{color:#e6f5ffcc;text-decoration:none;background:#06121fb3;padding:.35em .8em;border-radius:999px}.splinks a:hover{color:#fff}
#splashgo{font:700 clamp(16px,2.4vw,22px) var(--ui);letter-spacing:.18em;color:#fff;background:var(--ember);border:2px solid var(--glow);border-radius:999px;
  padding:.8em 2.2em;cursor:pointer;box-shadow:0 0 0 0 rgba(255,209,102,.6);animation:beat 1.6s ease-in-out infinite}
#splashgo:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes beat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,209,102,.5)}50%{transform:scale(1.05);box-shadow:0 0 0 14px rgba(255,209,102,0)}}
#ui.rotate{background:linear-gradient(#06121fcc,#06121fe6),#06121f var(--splash) center/cover no-repeat}
.newach{text-align:left}.newach .sec{margin:0 0 .35em;color:var(--glow)}
.newach ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35em;max-height:30vh;overflow:auto}
.newach li{display:grid;grid-template-columns:2em 1fr;gap:.1em .6em;align-items:center;padding:.5em .7em;border:1px solid var(--glow);border-radius:12px;background:#2a2214cc}
.newach .ic{font:700 1.2em var(--ui);color:var(--glow);text-align:center}
.newach b{display:block;font-size:1.05em;color:var(--light)}.newach small{display:block;color:var(--mute);font-size:.85em}.newach .rw{color:var(--glow)}
.rate{display:flex;justify-content:center;gap:.25em;font-size:1.9em;line-height:1}
.rate .st{color:#ffffff22;transform:scale(.6);transition:transform .3s cubic-bezier(.2,1.8,.4,1),color .2s}
.rate .st.on{color:var(--glow);transform:scale(1);text-shadow:0 0 12px #ffd16699}
.rword{margin:0;font-family:var(--display);font-size:1.6em;line-height:1.1;color:var(--glow);text-wrap:balance}
.rword.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@media (max-height:520px){.rate{font-size:1.5em}.rword{font-size:1.3em}}
@media (prefers-reduced-motion:reduce){.screen,.logo,.badge{animation:none}}
.atlasline{display:grid;grid-template-columns:auto 1fr auto;gap:.6em;align-items:center;width:100%;margin:.5em 0 0;padding:.4em .8em;text-align:left;font-size:.9em;font-family:inherit;color:inherit;background:#ffffff0d;border:1px solid #ffffff26;border-radius:12px;cursor:pointer}
.atlasline:hover,.atlasline:focus-visible{border-color:var(--glow)}
.atlasline .pbar{min-width:3em;margin:0}.atlasline small{opacity:.8;font-size:.85em;white-space:nowrap}