@font-face{font-family:R;src:url(assets/fonts/Roboto-Regular.woff2) format('woff2');font-weight:400}
@font-face{font-family:R;src:url(assets/fonts/Roboto-Bold.woff2) format('woff2');font-weight:700}
:root{--red:#ff2b2b;--red2:#c4141a;--gold:#ffc93c;--green:#36e07a;--blue:#3cc8ff;--panel:rgba(14,16,20,.82);--panel2:rgba(30,33,40,.9);--line:rgba(255,255,255,.12);
  --fs:clamp(14px,calc(2.3vmin + 6px),22px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0d10;color:#fff;font-family:R,system-ui,Arial,sans-serif;font-size:var(--fs);touch-action:none;overscroll-behavior:none}
#game{position:fixed;inset:0}
#game canvas{display:block;width:100%;height:100%}
#ui{position:fixed;inset:0;pointer-events:none}
#ui>*{pointer-events:auto}
.hidden{display:none!important}
.it{font-style:italic;font-weight:700;letter-spacing:.01em}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:2.6em;padding:.45em 1.2em;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.02em;
  background:linear-gradient(180deg,#ff3d3d,#c4141a);border-radius:.35em;box-shadow:0 .2em 0 #6d0a0e,0 .35em 1em rgba(0,0,0,.4);transition:transform .08s,filter .15s;white-space:nowrap}
.btn:active{transform:translateY(.12em);box-shadow:0 .08em 0 #6d0a0e}
.btn.dark{background:linear-gradient(180deg,#3a3f48,#23272e);box-shadow:0 .2em 0 #111,0 .35em 1em rgba(0,0,0,.4)}
.btn.gold{background:linear-gradient(180deg,#ffd76a,#e0a100);color:#1d1400;box-shadow:0 .2em 0 #7a5600}
.btn.green{background:linear-gradient(180deg,#46f08a,#14a84c);color:#04220f;box-shadow:0 .2em 0 #0a5a28}
.btn.ad::before{content:'★ BONUS';font-size:.62em;font-style:normal;background:rgba(0,0,0,.35);padding:.15em .4em;border-radius:.3em;margin-right:.2em}
.btn[disabled]{filter:grayscale(1) brightness(.6);pointer-events:none}
.btn.small{min-height:2.1em;padding:.3em .8em;font-size:.85em}
.coin::before{content:'';display:inline-block;width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc93c 45%,#b07a00);margin-right:.3em;vertical-align:-.15em;box-shadow:0 0 0 .08em #7a5600 inset}
/* ---------- loading ---------- */
#loading{--ti:url(assets/ui/title_l.webp);--tp:center;position:absolute;inset:0;z-index:0;isolation:isolate;overflow:hidden;background:#120c08;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(8vh + var(--safe-b))}
#loading::before,#loading::after{content:'';position:absolute;background:var(--ti) var(--tp)/contain no-repeat}
#loading::before{inset:-30px;z-index:-2;background-size:cover;filter:blur(20px) brightness(.55)}
#loading::after{inset:0;z-index:-1}
@media (orientation:portrait){#loading{--ti:url(assets/ui/title_p.webp);--tp:top center}}
#loading .bar{width:min(70vw,520px);height:.7em;background:rgba(0,0,0,.6);border-radius:1em;overflow:hidden;border:2px solid rgba(255,255,255,.3)}
#loading .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff2b2b,#ffb02b);transition:width .2s}
#loading .msg{margin-top:.6em;font-weight:700;font-style:italic;text-shadow:0 2px 6px #000}
/* ---------- top bar ---------- */
.topbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.6em;padding:calc(.5em + var(--safe-t)) calc(.8em + var(--safe-r)) .5em calc(.8em + var(--safe-l));
  background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0))}
.topbar .title{font-size:1.35em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px #000}
.chip{display:flex;align-items:center;gap:.35em;background:var(--panel);border:1px solid var(--line);padding:.3em .7em;border-radius:2em;font-weight:700;white-space:nowrap}
.lvl{position:relative;min-width:6.5em}
.lvl .xp{position:absolute;left:.6em;right:.6em;bottom:.12em;height:.22em;background:rgba(255,255,255,.15);border-radius:1em;overflow:hidden}
.lvl .xp i{display:block;height:100%;background:var(--blue)}
.iconbtn{width:2.5em;height:2.5em;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.iconbtn img{width:55%;height:55%;object-fit:contain}
/* ---------- menu ---------- */
#menu .carinfo{position:absolute;left:calc(1em + var(--safe-l));top:4.4em;max-width:46vw}
#menu .carname{font-size:2.1em;line-height:1;text-shadow:0 3px 12px rgba(0,0,0,.8)}
.bars{margin-top:.6em;display:grid;grid-template-columns:auto 9em;gap:.3em .6em;font-size:.8em;font-weight:700;text-transform:uppercase;background:var(--panel);padding:.6em .8em;border-radius:.5em}
.bars .b{height:.55em;background:rgba(255,255,255,.15);border-radius:1em;overflow:hidden;align-self:center}
.bars .b i{display:block;height:100%;background:linear-gradient(90deg,#fff,#ff4b4b)}
.bars .b i.up{background:linear-gradient(90deg,#fff,var(--green))}
#menu .nav{position:absolute;left:0;right:0;bottom:0;padding:0 calc(1em + var(--safe-r)) calc(1em + var(--safe-b)) calc(1em + var(--safe-l));display:flex;align-items:flex-end;gap:.6em;
  background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,0));padding-top:3em}
#menu .nav .side{display:flex;gap:.5em;flex-wrap:wrap}
#menu .nav .play{margin-left:auto;font-size:1.5em;min-width:7em;min-height:2.4em}
.badge{position:absolute;top:-.4em;right:-.4em;background:var(--gold);color:#000;font-style:normal;font-size:.7em;border-radius:1em;padding:.05em .45em;font-weight:700;animation:pulse 1s infinite alternate}
@keyframes pulse{to{transform:scale(1.15)}}
.portrait #menu .carinfo{max-width:92vw}
.portrait #menu .nav{flex-direction:column;align-items:stretch}
.portrait #menu .nav .side{display:grid;grid-template-columns:repeat(3,1fr)}
.portrait #menu .nav .side .btn{padding:.4em .3em}
.portrait #menu .nav .play{margin-left:0;width:100%}
/* ---------- panels / pages ---------- */
.page{position:absolute;inset:0;display:flex;flex-direction:column}
.page .content{position:absolute;left:0;right:0;top:3.6em;bottom:0;overflow:auto;padding:.6em calc(1em + var(--safe-r)) calc(1em + var(--safe-b)) calc(1em + var(--safe-l));touch-action:pan-y}
.back{width:2.4em;height:2.4em;border-radius:.4em;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:700;flex:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:.6em;padding:.8em}
.grid{display:grid;gap:.7em}
/* mode cards */
.modes{grid-template-columns:repeat(4,1fr)}
.portrait .modes{grid-template-columns:1fr 1fr}
.mode{position:relative;border-radius:.6em;overflow:hidden;aspect-ratio:16/10;background:#222 center/cover;border:3px solid transparent;text-align:left;box-shadow:0 .3em 1em rgba(0,0,0,.5)}
.mode.sel{border-color:var(--red);box-shadow:0 0 0 2px #fff4,0 .3em 1.4em rgba(255,43,43,.5)}
.mode .lbl{position:absolute;left:0;right:0;bottom:0;padding:.5em .6em;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,0))}
.mode .lbl b{display:block;font-size:1.15em;font-style:italic}
.mode .lbl small{opacity:.85;font-size:.75em}
.opts{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;margin-top:.8em}
.seg{display:inline-flex;background:var(--panel2);border-radius:.4em;overflow:hidden;border:1px solid var(--line)}
.seg button{padding:.45em .8em;font-weight:700;min-height:2.3em}
.seg button.on{background:var(--red)}
.optlbl{font-weight:700;font-size:.8em;opacity:.8;text-transform:uppercase}
.startrow{display:flex;gap:.7em;flex-wrap:wrap;margin-top:1em;justify-content:flex-end}
.startrow .btn{font-size:1.2em}
/* cars */
.carsel{display:flex;align-items:center;justify-content:space-between;gap:.5em;margin-top:auto}
.arrow{width:2.8em;height:2.8em;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-size:1.3em;font-weight:700}
.sw{display:flex;flex-wrap:wrap;gap:.35em}
.sw button{width:1.9em;height:1.9em;border-radius:.3em;border:2px solid rgba(255,255,255,.25)}
.sw button.on{border-color:#fff;box-shadow:0 0 0 2px var(--red)}
.carpanel{position:absolute;right:calc(1em + var(--safe-r));top:4em;width:min(25em,44vw);max-height:calc(100% - 9em);overflow:auto;touch-action:pan-y}
.portrait .carpanel{left:calc(.6em + var(--safe-l));right:calc(.6em + var(--safe-r));width:auto;top:auto;bottom:calc(5.2em + var(--safe-b));max-height:46vh}
.carbottom{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.6em;padding:.8em calc(1em + var(--safe-r)) calc(.8em + var(--safe-b)) calc(1em + var(--safe-l));background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,0))}
.carbottom .nm{flex:1;text-align:center;min-width:0}
.carbottom .nm b{display:block;font-size:1.5em;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carbottom .nm small{opacity:.8;font-size:.8em}
.lock{opacity:.9;color:var(--gold)}
/* upgrades */
.ups{grid-template-columns:1fr 1fr}
.portrait .ups{grid-template-columns:1fr}
.up{display:flex;align-items:center;gap:.6em}
.up .ic{font-size:1.5em;width:1.6em;text-align:center}
.up .mid{flex:1}
.pips{display:flex;gap:.2em;margin-top:.25em}
.pips i{flex:1;height:.45em;border-radius:.2em;background:rgba(255,255,255,.15)}
.pips i.on{background:var(--green)}
/* skills */
.skills{grid-template-columns:repeat(5,1fr)}
.portrait .skills{grid-template-columns:1fr 1fr}
.branch{display:flex;flex-direction:column;gap:.5em;align-items:stretch}
.branch h3{margin:0;text-align:center;font-style:italic;font-size:1.05em}
.node{border-radius:.5em;padding:.5em;background:var(--panel2);border:2px solid var(--line);text-align:center;min-height:4.4em;display:flex;flex-direction:column;justify-content:center}
.node b{font-size:.95em}
.node small{font-size:.72em;opacity:.8;line-height:1.15}
.node .c{font-size:.75em;margin-top:.2em;font-weight:700;color:var(--blue)}
.node.own{border-color:var(--green);background:rgba(54,224,122,.15)}
.node.can{border-color:var(--gold);animation:glow 1s infinite alternate}
.node.lockd{opacity:.45}
@keyframes glow{to{box-shadow:0 0 1em rgba(255,201,60,.6)}}
/* daily */
.days{grid-template-columns:repeat(7,1fr)}
.portrait .days{grid-template-columns:repeat(4,1fr)}
.day{border-radius:.5em;background:var(--panel2);border:2px solid var(--line);padding:.6em .3em;text-align:center}
.day b{display:block;font-style:italic}
.day .amt{font-weight:700;margin-top:.3em}
.day.done{opacity:.5}
.day.today{border-color:var(--gold);background:rgba(255,201,60,.18);transform:scale(1.04)}
/* settings */
.set{display:grid;grid-template-columns:auto 1fr;gap:.8em 1em;align-items:center;max-width:36em}
input[type=range]{width:100%;accent-color:var(--red);height:2em}
/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#hud .tl{position:absolute;left:calc(.7em + var(--safe-l));top:calc(.6em + var(--safe-t));display:flex;gap:.5em}
.hbox{background:var(--panel);border-left:.25em solid var(--red);padding:.25em .7em;border-radius:.3em;line-height:1.05}
.hbox small{display:block;font-size:.65em;opacity:.75;font-weight:700;letter-spacing:.05em}
.hbox b{font-size:1.7em;font-style:italic}
.hbox b span{font-size:.55em;opacity:.7}
#hud .tc{position:absolute;left:50%;top:calc(.6em + var(--safe-t));transform:translateX(-50%);text-align:center}
#hud .tr{position:absolute;right:calc(.7em + var(--safe-r));top:calc(.6em + var(--safe-t));display:flex;flex-direction:column;align-items:flex-end;gap:.4em}
#hud .tr .row{display:flex;gap:.4em}
#hud .iconbtn{pointer-events:auto}
#mm{width:9em;height:9em;border-radius:50%;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.25)}
#gauge{position:absolute;right:calc(1em + var(--safe-r));bottom:calc(1em + var(--safe-b));width:12em;height:12em}
.touch #gauge{right:auto;left:50%;transform:translateX(-50%);bottom:calc(.4em + var(--safe-b));width:9.5em;height:9.5em}
.portrait.touch #gauge{left:calc(.5em + var(--safe-l));right:auto;top:calc(4.4em + var(--safe-t));bottom:auto;transform:none;width:7.2em;height:7.2em}
.portrait #mm{width:6.5em;height:6.5em}
.touch #mm{width:6.4em;height:6.4em}
.portrait .topbar .title{font-size:1.05em}
.portrait .chip{padding:.25em .5em;font-size:.88em}
.portrait .lvl{min-width:4.6em}
.portrait #menu .nav .side .btn{font-size:1em;min-height:2.5em}
.portrait.touch #hud .tr{top:calc(.5em + var(--safe-t))}
#nitrobar{position:absolute;right:calc(1em + var(--safe-r));bottom:calc(13.3em + var(--safe-b));width:12em;height:.7em;background:rgba(0,0,0,.5);border-radius:1em;overflow:hidden;border:1px solid rgba(255,255,255,.25)}
#nitrobar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#3c7bff,#7cd8ff)}
#nitrobar.on i{background:linear-gradient(90deg,#9cf,#fff);box-shadow:0 0 1em #7cd8ff}
.touch #nitrobar{right:auto;left:50%;transform:translateX(-50%);bottom:calc(10.2em + var(--safe-b));width:9em}
.portrait.touch #nitrobar{left:calc(.5em + var(--safe-l));right:auto;transform:none;top:calc(12em + var(--safe-t));bottom:auto;width:7.2em}
#center{position:absolute;left:0;right:0;top:28%;text-align:center}
#cd{font-size:6em;font-style:italic;font-weight:700;text-shadow:0 .05em .2em rgba(0,0,0,.7);line-height:1}
#cd.go{color:var(--green)}
#popups{display:flex;flex-direction:column;align-items:center;gap:.2em;margin-top:.4em}
.pop{font-weight:700;font-style:italic;font-size:1.5em;text-shadow:0 2px 8px #000;animation:popin .25s ease-out}
.pop.small{font-size:1em;opacity:.9}.pop.big{font-size:2.2em}.pop.gold{color:var(--gold)}.pop.green{color:var(--green)}.pop.red{color:#ff6b6b}
@keyframes popin{from{transform:scale(1.6);opacity:0}}
#wrong{width:5em;margin:0 auto;display:block}
#drift{position:absolute;left:50%;top:calc(4.2em + var(--safe-t));transform:translateX(-50%);text-align:center;text-shadow:0 2px 8px #000}
#drift .tot{font-size:2em;font-style:italic;font-weight:700}
#drift .cur{font-size:1.4em;font-weight:700;color:var(--gold);min-height:1.3em}
#drift .mul{display:inline-block;background:var(--red);border-radius:.3em;padding:0 .35em;margin-left:.3em;color:#fff}
#tree{position:absolute;left:calc(1em + var(--safe-l));top:calc(4.6em + var(--safe-t));display:flex;flex-direction:column;gap:.35em;background:var(--panel);padding:.5em;border-radius:.6em}
#tree i{width:1.6em;height:1.6em;border-radius:50%;background:#222;border:2px solid #444}
#tree i.a{background:#ffb400;box-shadow:0 0 1em #ffb400}#tree i.g{background:#2bff5b;box-shadow:0 0 1em #2bff5b}
#shiftlight{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:2.4em;font-weight:700;font-style:italic;color:#2bff5b;text-shadow:0 0 .4em #2bff5b}
#dragbar{position:absolute;left:50%;top:calc(4.2em + var(--safe-t));transform:translateX(-50%);width:min(60vw,26em)}
#dragbar .track{height:.6em;background:rgba(0,0,0,.5);border-radius:1em;position:relative;margin-top:.3em}
#dragbar .track i{position:absolute;top:-.35em;width:1.3em;height:1.3em;border-radius:50%;transform:translateX(-50%)}
/* touch controls */
#touch{position:absolute;inset:0;pointer-events:none}
#touch .tc{position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;border-radius:1em;background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.35);touch-action:none}
#touch .tc img{width:62%;height:62%;object-fit:contain;opacity:.95;pointer-events:none}
#touch .tc.on{background:rgba(255,43,43,.45);border-color:#fff}
#touch .tc span{font-weight:700;font-style:italic;font-size:.9em;pointer-events:none}
#touch [data-k=left]{left:calc(1em + var(--safe-l));bottom:calc(1em + var(--safe-b));width:7em;height:7em;border-radius:50%}
#touch [data-k=right]{left:calc(9em + var(--safe-l));bottom:calc(1em + var(--safe-b));width:7em;height:7em;border-radius:50%}
#touch [data-k=gas]{right:calc(1em + var(--safe-r));bottom:calc(1em + var(--safe-b));width:5.6em;height:9em}
#touch [data-k=brake]{right:calc(7.4em + var(--safe-r));bottom:calc(1em + var(--safe-b));width:5.6em;height:7em}
#touch [data-k=nitro]{right:calc(1em + var(--safe-r));bottom:calc(10.8em + var(--safe-b));width:5em;height:5em;border-radius:50%}
#touch [data-k=hb]{right:calc(7.6em + var(--safe-r));bottom:calc(8.8em + var(--safe-b));width:5em;height:5em;border-radius:50%}
#touch [data-k=up]{right:calc(13.8em + var(--safe-r));bottom:calc(1em + var(--safe-b));width:5em;height:7em}
.portrait #touch [data-k=left]{width:5.6em;height:5.6em;left:calc(.6em + var(--safe-l))}
.portrait #touch [data-k=right]{width:5.6em;height:5.6em;left:calc(6.9em + var(--safe-l))}
.portrait #touch [data-k=gas]{width:4.6em;height:7.6em;right:calc(.6em + var(--safe-r))}
.portrait #touch [data-k=brake]{width:4.6em;height:6em;right:calc(5.9em + var(--safe-r))}
.portrait #touch [data-k=nitro]{width:4.2em;height:4.2em;right:calc(.8em + var(--safe-r));bottom:calc(9.3em + var(--safe-b))}
.portrait #touch [data-k=hb]{width:4.2em;height:4.2em;left:calc(.8em + var(--safe-l));right:auto;bottom:calc(7.4em + var(--safe-b))}
.portrait #touch [data-k=up]{width:4.2em;height:4.2em;right:calc(5.9em + var(--safe-r));bottom:calc(7.6em + var(--safe-b))}
/* legend */
#legend{position:absolute;left:calc(1em + var(--safe-l));bottom:calc(1em + var(--safe-b));background:var(--panel);border:1px solid var(--line);border-radius:.6em;padding:.6em .8em;font-size:.78em;display:grid;grid-template-columns:auto auto;gap:.3em .8em;align-items:center}
#legend kbd{display:inline-block;min-width:1.8em;text-align:center;padding:.1em .4em;border-radius:.3em;background:#eee;color:#111;font:700 .9em R,Arial;box-shadow:0 .15em 0 #888;margin-right:.15em}
#legend .h{grid-column:1/3;font-weight:700;font-style:italic;color:var(--red);font-size:1.1em}
/* overlays */
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:1em;backdrop-filter:blur(3px)}
.dialog{background:linear-gradient(180deg,rgba(32,35,42,.97),rgba(16,18,22,.97));border:1px solid var(--line);border-radius:.8em;padding:1.1em 1.3em;min-width:min(22em,90vw);max-width:94vw;max-height:92vh;overflow:auto;text-align:center;box-shadow:0 1em 3em rgba(0,0,0,.6)}
.dialog h2{margin:.1em 0 .5em;font-size:2em;font-style:italic}
.dialog .col{display:flex;flex-direction:column;gap:.6em;margin-top:.8em}
.dialog .rowb{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap;margin-top:.9em}
.res{display:grid;grid-template-columns:1fr auto;gap:.3em 1.2em;text-align:left;margin:.4em auto;max-width:20em}
.res span:nth-child(2n){text-align:right;font-weight:700}
.reward{font-size:1.8em;font-weight:700;margin:.5em 0 .2em;color:var(--gold)}
.checker{height:.6em;background:repeating-linear-gradient(90deg,#fff 0 .6em,#111 .6em 1.2em);opacity:.85;margin:-.2em -1.3em .8em}
.toast{position:absolute;left:50%;top:18%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:.6em 1.2em;border-radius:.6em;font-weight:700;z-index:50;pointer-events:none;animation:popin .2s}
.devad{position:fixed;inset:0;background:#000d;display:flex;align-items:center;justify-content:center;z-index:999}
.devad div{background:#222;padding:2em 3em;border-radius:1em;text-align:center;display:flex;flex-direction:column;gap:.5em}
.devad i{font-size:2em;font-style:normal;font-weight:700}

.portrait .carbottom{flex-wrap:wrap;justify-content:center}
.portrait .carbottom .nm{order:-1;flex-basis:100%}
.portrait .skillnote{display:none}
#nos{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(80,160,255,.28) 85%,rgba(160,220,255,.45) 100%)}
#nos.on{opacity:1}
#loading .brand{position:absolute;bottom:calc(1.2em + var(--safe-b));right:calc(1.4em + var(--safe-r));font-weight:700;font-style:italic;letter-spacing:.18em;opacity:.85;text-shadow:0 2px 6px #000;font-size:.9em}

/* ---------- Mouse Only controls ---------- */
body.mouse #game{cursor:crosshair}
.mouse #touch [data-k=hb]{left:calc(1em + var(--safe-l));right:auto;bottom:calc(1em + var(--safe-b));width:4.6em;height:4.6em}
.mouse #touch [data-k=nitro]{left:calc(6.4em + var(--safe-l));right:auto;bottom:calc(1em + var(--safe-b));width:4.6em;height:4.6em}
#msteer{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(1.4em + var(--safe-b));width:min(40vw,26em);height:.5em;border-radius:1em;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3)}
#msteer::after{content:'';position:absolute;left:50%;top:-.35em;bottom:-.35em;width:2px;background:rgba(255,255,255,.5)}
#msteer i{position:absolute;top:50%;left:50%;width:1.3em;height:1.3em;margin:-.65em 0 0 -.65em;border-radius:50%;background:var(--red);border:2px solid #fff;box-shadow:0 0 .6em rgba(0,0,0,.6)}
#legend.ml{bottom:calc(6.6em + var(--safe-b))}
#legend img{width:1.6em;height:1.6em;vertical-align:middle}
.ctrlpick .rowb .btn{display:flex;flex-direction:column;align-items:center;gap:.3em;min-width:9em;padding:.9em 1em}
.ctrlpick .ci{font-size:1.8em;font-style:normal}
body.frozen #ui{pointer-events:none}

/* GameMonetize edition: attribution, responsive More Games button. */
.bt-by{display:block;font-size:.48em;line-height:1.15;letter-spacing:.12em;color:#ffca74;opacity:.92;font-style:normal;margin-top:.14em}
#bt-watermark{position:fixed;z-index:8;pointer-events:none;left:50%;bottom:calc(.25em + var(--safe-b));transform:translateX(-50%);font:700 clamp(9px,1.35vmin,12px) R,Arial,sans-serif;letter-spacing:.17em;color:#fff;opacity:.68;text-shadow:0 1px 4px #000,0 0 12px #000;white-space:nowrap}
.bt-more{font-size:.85em;text-decoration:none;min-height:3.05em;color:#1d1400;text-shadow:none}
.bt-more:hover,.bt-more:focus{filter:brightness(1.06)}
#menu .nav .side{max-width:calc(100% - 13em)}
.portrait #menu .nav .side{max-width:100%}
@media(max-width:850px) and (orientation:landscape){.bt-more{font-size:.75em}#menu .nav .side .btn{padding:.45em .65em}}
@media(max-height:430px){#bt-watermark{font-size:9px;bottom:2px}}