@font-face{font-family:Brush;src:url(fonts/Bangers.ttf) format("truetype");font-display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#0E1A2E;font-family:Brush,Impact,"Arial Black",sans-serif;color:#fff;touch-action:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#streaks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.hidden{display:none!important}
:root{--u:min(1vw,1.6vh);--ink:#000}
.out{-webkit-text-stroke:calc(var(--u)*.35) #000;paint-order:stroke fill}
.yel{color:#FFD21F}.wht{color:#fff}

/* brush swipe: italic yellow on black brush swipe */
.swipe{display:inline-block;position:relative;padding:.18em .9em .1em .7em;transform:skewX(-10deg) rotate(-2deg);
 background:#000;clip-path:polygon(2% 12%,8% 0,40% 6%,70% 0,98% 8%,100% 40%,97% 85%,88% 100%,55% 93%,20% 100%,0 88%,3% 55%);}
.swipe span{display:inline-block;color:#FFD21F;font-style:italic;letter-spacing:.03em;text-shadow:.06em .06em 0 #6b4b00}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
.stat{position:absolute;top:calc(env(safe-area-inset-top) + 1.2*var(--u));line-height:.85;transform:skewX(-10deg);
 filter:drop-shadow(calc(var(--u)*.5) calc(var(--u)*.5) 0 rgba(0,0,0,.85))}
.stat .lbl{font-size:calc(var(--u)*3.4);-webkit-text-stroke:calc(var(--u)*.6) #000;paint-order:stroke fill;letter-spacing:.05em}
.stat .big{font-size:calc(var(--u)*9.5);-webkit-text-stroke:calc(var(--u)*1.1) #000;paint-order:stroke fill;font-style:italic}
.tl{left:calc(env(safe-area-inset-left) + 2*var(--u))}
.tr{right:calc(env(safe-area-inset-right) + 2*var(--u));text-align:right}
#zone{position:absolute;left:calc(env(safe-area-inset-left) + 2*var(--u));top:calc(env(safe-area-inset-top) + 15*var(--u));font-size:calc(var(--u)*4.2);opacity:0;transition:opacity .4s}
#zone.dim{opacity:.85;transform:skewX(-10deg) rotate(-2deg) scale(.7);transform-origin:left top;transition:opacity .4s,transform .4s}
#zone.show{opacity:1;animation:punch .35s cubic-bezier(.2,1.8,.4,1)}
#timer{position:absolute;right:calc(env(safe-area-inset-right) + 2.4*var(--u));top:calc(env(safe-area-inset-top) + 14.5*var(--u));font-size:calc(var(--u)*3.2);font-style:italic;-webkit-text-stroke:calc(var(--u)*.5) #000;paint-order:stroke fill}
#tricks{position:absolute;right:calc(env(safe-area-inset-right) + 2*var(--u));top:34%;text-align:right;transform:skewX(-10deg);transition:transform .45s ease-in,opacity .45s}
#tricks.away{transform:translateX(130%) skewX(-10deg);opacity:0}
#trickList div{font-size:calc(var(--u)*4);line-height:1;-webkit-text-stroke:calc(var(--u)*.7) #000;paint-order:stroke fill;font-style:italic;animation:punch .32s cubic-bezier(.2,2,.4,1) both;
 filter:drop-shadow(calc(var(--u)*.35) calc(var(--u)*.35) 0 #000)}
#trickList div i{color:#FFD21F;font-style:italic}
#trickTotal{font-size:calc(var(--u)*7.5);color:#FFD21F;font-style:italic;-webkit-text-stroke:calc(var(--u)*1) #000;paint-order:stroke fill;filter:drop-shadow(calc(var(--u)*.5) calc(var(--u)*.5) 0 #000)}
#trickTotal.slam{animation:slam .4s cubic-bezier(.2,2.2,.4,1) both}
#trickTotal.bail{color:#ff5a4a}
@keyframes punch{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes slam{0%{transform:scale(3) rotate(-8deg);opacity:0}100%{transform:scale(1);opacity:1}}

#speedo{position:absolute;right:calc(env(safe-area-inset-right) + 2*var(--u));bottom:calc(env(safe-area-inset-bottom) + 2*var(--u));text-align:right;width:calc(var(--u)*30)}
#mph{font-size:calc(var(--u)*9);font-style:italic;line-height:.9;transform:skewX(-10deg);-webkit-text-stroke:calc(var(--u)*1.1) #000;paint-order:stroke fill;filter:drop-shadow(calc(var(--u)*.5) calc(var(--u)*.5) 0 #000)}
#mph small{font-size:.38em;margin-left:.15em;color:#fff}
#mphN{color:#FFD21F}
#bar{height:calc(var(--u)*3.2);background:#1a1a1a;border:calc(var(--u)*.5) solid #000;transform:skewX(-28deg);margin-top:calc(var(--u)*.6);overflow:hidden;box-shadow:0 0 0 calc(var(--u)*.25) #2EE6D6}
#barFill{height:100%;width:0;background:repeating-linear-gradient(90deg,transparent 0 86%,rgba(0,0,0,.55) 86% 100%),linear-gradient(90deg,#F2701E,#FFD21F 70%,#fff59a);background-size:calc(var(--u)*3) 100%,100% 100%}
#boostBar{position:relative;height:calc(var(--u)*1.6);margin-top:calc(var(--u)*.7);margin-left:30%;background:#111;border:calc(var(--u)*.3) solid #000;transform:skewX(-28deg)}
#boostFill{height:100%;width:0;background:linear-gradient(90deg,#1F8BFF,#2EE6D6)}
#boostBar span{position:absolute;left:-46%;top:-60%;font-size:calc(var(--u)*2);-webkit-text-stroke:calc(var(--u)*.35) #000;paint-order:stroke fill}
#boostBar.ready #boostFill{animation:glow .6s infinite alternate}
@keyframes glow{to{filter:brightness(1.6)}}

#mapWrap{position:absolute;left:calc(env(safe-area-inset-left) + 2*var(--u));bottom:calc(env(safe-area-inset-bottom) + 2*var(--u));width:calc(var(--u)*24);height:calc(var(--u)*19.6);
 background:rgba(14,26,46,.82);border:calc(var(--u)*.45) solid #2EE6D6;border-radius:calc(var(--u)*3.5);box-shadow:0 0 calc(var(--u)*1.4) rgba(46,230,214,.6),inset 0 0 calc(var(--u)*2) rgba(46,230,214,.25);transform:rotate(-3deg)}
#minimap{width:100%;height:100%}
#center{position:absolute;left:0;right:0;top:20%;text-align:center;font-size:calc(var(--u)*16);font-style:italic;color:#FFD21F;-webkit-text-stroke:calc(var(--u)*1.4) #000;paint-order:stroke fill;filter:drop-shadow(calc(var(--u)*.8) calc(var(--u)*.8) 0 #000)}
#center.pop{animation:slam .45s cubic-bezier(.2,2.2,.4,1) both}
#center small{display:block;font-size:min(.28em,3.6vw);padding:0 3vw;color:#fff;-webkit-text-stroke:calc(var(--u)*.5) #000}
#pauseBtn{pointer-events:auto;position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 1*var(--u));width:calc(var(--u)*6.5);height:calc(var(--u)*6.5);min-width:40px;min-height:40px;border-radius:50%;
 background:rgba(14,26,46,.8);border:2px solid #2EE6D6;color:#fff;font-family:Brush;font-size:calc(var(--u)*3);cursor:pointer}
#keysHint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + .8*var(--u));font-size:calc(var(--u)*1.9);letter-spacing:.04em;white-space:nowrap;-webkit-text-stroke:calc(var(--u)*.3) #000;paint-order:stroke fill;opacity:.9}
#touch{display:none}
body.touch #touch{display:block}
body.touch #keysHint{display:none}
.tbtn{position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;font-family:Brush;color:#fff;-webkit-text-stroke:1px #000;
 background:rgba(14,26,46,.55);border:3px solid rgba(46,230,214,.9);box-shadow:0 0 10px rgba(46,230,214,.5)}
.tbtn.on{background:rgba(46,230,214,.55)}
.steer{width:clamp(64px,13vmin,120px);height:clamp(64px,13vmin,120px);border-radius:22%;font-size:clamp(26px,6vmin,48px);bottom:calc(env(safe-area-inset-bottom) + var(--u)*23.5 + 12px)}
#tLeft{left:calc(env(safe-area-inset-left) + 14px)}
#tRight{left:calc(env(safe-area-inset-left) + 24px + clamp(64px,13vmin,120px))}
.round{border-radius:50%;width:clamp(70px,15vmin,130px);height:clamp(70px,15vmin,130px);font-size:clamp(16px,3.4vmin,28px)}
#tTrick{right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + var(--u)*19 + 12px)}
#tBoost{right:calc(env(safe-area-inset-right) + 24px + clamp(70px,15vmin,130px));bottom:calc(env(safe-area-inset-bottom) + var(--u)*19 + 12px)}
.yelb{border-color:#FFD21F;box-shadow:0 0 10px rgba(255,210,31,.6)}
.cyanb{border-color:#2EE6D6}
.small{width:clamp(60px,12vmin,100px);height:clamp(36px,6vmin,52px);border-radius:10px;font-size:clamp(13px,2.6vmin,20px);right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + var(--u)*19 + clamp(70px,15vmin,130px) + 24px)}
/* touch layout: map & speedo shrink, buttons above them */

/* screens */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin;padding:3vmin;text-align:center}
#title .tbg{position:absolute;inset:0;background:url(assets/title_bg.webp) center/cover;filter:saturate(1.15)}
#title .tbg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 30%,rgba(0,0,0,.55))}
#logo{position:relative;width:min(70vw,82vh);max-height:42vh;object-fit:contain;filter:drop-shadow(0 1vmin 0 rgba(0,0,0,.6))}
#title .tag{font-size:min(5vw,5vh)}
.bigbtn{position:relative;font-family:Brush;font-size:min(6vw,6.5vh);font-style:italic;color:#000;background:#FFD21F;border:.35vmin solid #000;padding:.15em 1.1em .05em;cursor:pointer;
 transform:skewX(-12deg);box-shadow:.6vmin .6vmin 0 #000,0 0 3vmin rgba(255,210,31,.55);letter-spacing:.04em}
.bigbtn:hover,.bigbtn:focus-visible{background:#fff27a;outline:none}
.bigbtn.sm{font-size:min(4vw,4.5vh)}
.howto{position:relative;max-width:min(90vw,700px);font-size:min(3.4vw,3vh);font-family:Brush;letter-spacing:.03em;-webkit-text-stroke:.5px #000;text-shadow:0 2px 0 #000,0 0 8px #000}
#bestLine{position:relative;font-size:min(3vw,3vh);color:#FFD21F;text-shadow:0 2px 0 #000}
.menu{background:radial-gradient(ellipse at 50% 30%,#18304f,#0E1A2E 70%)}
.menu.dim{background:rgba(14,26,46,.88)}
.menu .head{font-size:min(7vw,7vh)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:2vmin;width:min(96vw,150vh);}
.card{position:relative;background:linear-gradient(180deg,#132845,#0b1626);border:2px solid rgba(46,230,214,.55);border-radius:1.2vmin;padding:1.2vmin;cursor:pointer;
 box-shadow:inset 0 0 2.5vmin rgba(46,230,214,.18);transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;align-items:center}
.card.sel{transform:translateY(-1.6vmin) scale(1.03);border-color:#2EE6D6;box-shadow:0 0 2.4vmin rgba(46,230,214,.85),inset 0 0 3vmin rgba(46,230,214,.35)}
.card .pic{width:100%;aspect-ratio:1/1;background:radial-gradient(ellipse at 50% 78%,rgba(255,255,255,.35),rgba(46,230,214,.08) 40%,transparent 65%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .pic img{width:92%;height:92%;object-fit:contain}
.card.sel .pic img{animation:turn 3s ease-in-out infinite}
@keyframes turn{0%,100%{transform:perspective(400px) rotateY(-14deg)}50%{transform:perspective(400px) rotateY(14deg)}}
.card .nm{font-size:min(3.6vw,4.4vh);line-height:1;margin-top:.6vmin;-webkit-text-stroke:.6px #000}
.card .tr{font-size:min(2.4vw,2.8vh);color:#cfe;font-family:Brush;letter-spacing:.03em}
.card .lock{position:absolute;inset:0;background:rgba(5,10,20,.72);display:flex;align-items:center;justify-content:center;font-size:min(2.6vw,3vh);color:#FFD21F;padding:1vmin;border-radius:1.2vmin}
.card.portrait .pic{aspect-ratio:3/3.2;background:none;border-radius:.8vmin}
.card.portrait .nm{font-size:min(3.6vw,4.8vh);white-space:nowrap;font-style:italic;margin:0 0 .4vmin}
.card.portrait .pic img{width:100%;height:100%;object-fit:cover;animation:none!important}
.card.portrait.sel .pic img{animation:bob 2.4s ease-in-out infinite!important}
@keyframes bob{50%{transform:scale(1.04) rotate(-1deg)}}
.bars{width:100%;margin-top:.6vmin}
.bars div{display:flex;align-items:center;gap:.8vmin;font-size:min(1.8vw,2.3vh);letter-spacing:.04em}
.bars label{width:42%;text-align:left}
.bars i{flex:1;height:1.2vmin;background:#06101d;border:1px solid #000;transform:skewX(-20deg);position:relative}
.bars i b{position:absolute;inset:0;right:auto;background:linear-gradient(90deg,#1F6BFF,#FFD21F)}
.foot{font-size:min(2.8vw,3.2vh);letter-spacing:.05em;color:#dfe}
.prompts{position:absolute;right:3vmin;bottom:2.4vmin;display:flex;gap:2vmin}
.pb{font-family:Brush;font-size:min(3vw,3.6vh);color:#fff;background:none;border:none;display:flex;align-items:center;gap:.6vmin;cursor:pointer;letter-spacing:.04em}
.pb b{display:inline-flex;width:1.5em;height:1.5em;border-radius:50%;align-items:center;justify-content:center;font-size:.8em;border:2px solid #000}
.ga{background:#2FB34A}.rb{background:#D7261E}
.row{display:flex;gap:2.5vmin;flex-wrap:wrap;justify-content:center}
.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2vmin 3vmin;max-width:min(94vw,1000px);text-align:left;font-size:min(2.6vw,2.9vh);font-family:Brush;letter-spacing:.03em;line-height:1.15}
.helpgrid b{color:#FFD21F;margin-right:.4em}
#resBody{font-size:min(4vw,4.4vh);line-height:1.3}
#resBody .yel{font-size:1.5em}
#board{min-width:min(80vw,460px);font-size:min(2.6vw,3vh);background:rgba(0,0,0,.3);border:1px solid rgba(46,230,214,.5);border-radius:1vmin;padding:1vmin 2vmin}
#board a{color:#2EE6D6}
#board .me{color:#FFD21F}
#loading{background:#0E1A2E;z-index:50}
#loadBar{width:min(60vw,500px);height:10px;border:2px solid #2EE6D6;border-radius:6px;overflow:hidden}
#loadFill{height:100%;width:0;background:#FFD21F}

@media (orientation:portrait){
 :root{--u:min(1.55vw,1vh)}
 .cards{grid-template-columns:repeat(2,1fr);width:min(94vw,60vh)}
 .card .nm{font-size:4.6vw}.card.portrait .nm{font-size:4.4vw;white-space:nowrap}.card .tr{font-size:3vw}.bars div{font-size:2.6vw}
 .helpgrid{grid-template-columns:1fr;font-size:3.4vw}
 .prompts{position:static}
 #tricks{top:26%}
 #timer{top:calc(env(safe-area-inset-top) + 15*var(--u))}
}
@media (max-height:500px){ .menu{gap:1vmin;padding:1.5vmin} .foot{display:none} }

/* level select */
#levelSel{justify-content:flex-start;gap:1.4vmin;padding-top:max(2.4vmin,env(safe-area-inset-top))}
#levelSel .head{font-size:min(6vw,6vh);flex:none}
#levelInfo{flex:none;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;column-gap:3vmin;align-items:center;text-align:left;width:min(96vw,150vh);
 background:rgba(0,0,0,.35);border:2px solid rgba(46,230,214,.55);border-radius:1.2vmin;padding:1vmin 2vmin}
#lvTitle{font-size:min(4.4vw,4.6vh);color:#FFD21F;font-style:italic;-webkit-text-stroke:.6px #000;line-height:1.05}
#lvBlurb{font-size:min(2.6vw,2.9vh);letter-spacing:.03em;color:#e6f6ff;line-height:1.15}
#lvMeta{font-size:min(2.3vw,2.6vh);letter-spacing:.04em;color:#2EE6D6}
#lvGo{grid-column:2;grid-row:1/4}
#levelCards{flex:1 1 auto;min-height:0;grid-auto-rows:max-content;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:grid;grid-template-columns:repeat(5,1fr);gap:1.4vmin;width:min(96vw,150vh);padding:1vmin .6vmin 7vmin;align-content:start}
.lv{position:relative;background:linear-gradient(180deg,#132845,#0b1626);border:2px solid rgba(46,230,214,.45);border-radius:1vmin;cursor:pointer;overflow:hidden;
 display:flex;flex-direction:column;transition:transform .15s,border-color .15s,box-shadow .15s}
.lv canvas{width:100%;aspect-ratio:16/10;display:block}
.lv .n{position:absolute;left:.6vmin;top:.2vmin;font-size:min(4.6vw,5.4vh);font-style:italic;color:#FFD21F;-webkit-text-stroke:.8px #000;text-shadow:.3vmin .3vmin 0 #000;line-height:1}
.lv .nm{font-size:min(1.9vw,2.4vh);letter-spacing:.03em;padding:.3vmin .6vmin .5vmin;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.35)}
.lv .bt{position:absolute;right:.6vmin;top:.5vmin;font-size:min(1.7vw,2.1vh);color:#000;background:#FFD21F;padding:.1em .4em;border-radius:.4vmin;transform:skewX(-10deg)}
.lv .bt.won{background:#2FB34A;color:#fff}
.lv.sel{border-color:#FFD21F;box-shadow:0 0 2vmin rgba(255,210,31,.7);transform:scale(1.04)}
@media (orientation:portrait){
 #levelCards{grid-template-columns:repeat(3,1fr)}
 #levelInfo{grid-template-columns:1fr}
 #lvGo{grid-column:1;grid-row:auto;justify-self:center;margin-top:1vmin}
 #lvTitle{font-size:5.4vw}#lvBlurb{font-size:3.4vw}#lvMeta{font-size:3vw}
 .lv .n{font-size:6vw}.lv .nm{font-size:3vw}.lv .bt{font-size:2.6vw}
 #levelSel .prompts{display:none}
}
@media (max-height:500px){ #levelSel .prompts{display:none} #levelCards{grid-template-columns:repeat(6,1fr)} }
#resBody .lvname{font-size:.7em;color:#2EE6D6;letter-spacing:.04em}

/* goal line, rivals, trick pop-ups */
#goal{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 1*var(--u) + max(40px,calc(var(--u)*6.5)) + 4px);max-width:46vw;text-align:center;font-size:max(11px,calc(var(--u)*2.1));letter-spacing:.04em;line-height:1.1;
 -webkit-text-stroke:calc(var(--u)*.35) #000;paint-order:stroke fill;color:#fff;text-shadow:0 1px 0 #000}
#mapBtn{pointer-events:auto;position:absolute;left:calc(50% + max(26px,calc(var(--u)*4.2)));top:calc(env(safe-area-inset-top) + 1*var(--u));height:max(40px,calc(var(--u)*6.5));padding:0 1em;border-radius:99px;
 background:rgba(14,26,46,.8);border:2px solid #FFD21F;color:#FFD21F;font-family:Brush;font-size:max(14px,calc(var(--u)*2.6));letter-spacing:.05em;cursor:pointer}
#rivalBox{position:absolute;left:calc(env(safe-area-inset-left) + 2*var(--u));top:calc(env(safe-area-inset-top) + 22*var(--u));font-size:max(12px,calc(var(--u)*2.6));line-height:1.15;transform:skewX(-10deg);
 background:rgba(0,0,0,.45);padding:.3em .6em;border-left:3px solid #FFD21F;-webkit-text-stroke:calc(var(--u)*.3) #000;paint-order:stroke fill}
#rivalBox .rh{color:#FFD21F;font-size:.8em;letter-spacing:.1em}
#rivalBox i{font-style:italic}#rivalBox i.up{color:#ff6a5a}#rivalBox i.dn{color:#7cf07c}
#pos.wide .big{font-size:calc(var(--u)*7.5)}
.hurry{color:#ff4a3a!important;animation:glow .5s infinite alternate}
#pops{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tpop{position:absolute;background:#000;padding:.25em .9em .12em .8em;text-align:center;line-height:.92;white-space:nowrap;
 clip-path:polygon(2% 12%,8% 0,40% 6%,70% 0,98% 8%,100% 40%,97% 85%,88% 100%,55% 93%,20% 100%,0 88%,3% 55%);
 filter:drop-shadow(0 0 0 #000);animation:tpop 1.3s cubic-bezier(.2,1.6,.4,1) forwards}
.tpop .tn{display:block;color:#FFD21F;font-size:calc(var(--u)*4.2);font-style:italic;letter-spacing:.03em;text-shadow:.06em .06em 0 #6b4b00}
.tpop .tp{display:block;color:#fff;font-size:calc(var(--u)*6.6);font-style:italic;letter-spacing:.02em}
@keyframes tpop{0%{transform:translate(-50%,-50%) skewX(-10deg) rotate(var(--r)) scale(2.3);opacity:0}
 14%{transform:translate(-50%,-50%) skewX(-10deg) rotate(var(--r)) scale(1);opacity:1}
 78%{transform:translate(-50%,-58%) skewX(-10deg) rotate(var(--r)) scale(1);opacity:1}
 100%{transform:translate(-50%,-80%) skewX(-10deg) rotate(var(--r)) scale(.85);opacity:0}}
#chaos{position:absolute;left:calc(env(safe-area-inset-left) + 2*var(--u));top:42%;font-size:calc(var(--u)*3.6);opacity:0}
#chaos.show{animation:chaos 1.8s ease-out forwards}
@keyframes chaos{0%{opacity:0;transform:skewX(-10deg) rotate(-4deg) scale(2)}12%{opacity:1;transform:skewX(-10deg) rotate(-4deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:skewX(-10deg) rotate(-4deg) translateX(-20%)}}
#tFlip{right:calc(env(safe-area-inset-right) + 24px + clamp(70px,15vmin,130px));bottom:calc(env(safe-area-inset-bottom) + var(--u)*19 + clamp(70px,15vmin,130px) + 24px);border-color:#FFD21F}

/* game modes */
#modeSel{justify-content:center}
#modeCards{display:grid;grid-template-columns:repeat(3,1fr);gap:2vmin;width:min(94vw,130vh)}
.card.mode{padding:0;overflow:hidden}
.card.mode .pic{aspect-ratio:16/10;background:none}
.card.mode .pic img,.card.mode .pic canvas{width:100%;height:100%;object-fit:cover;animation:none!important;display:block}
.card.mode .nm{font-size:min(3.6vw,4.6vh);font-style:italic;color:#FFD21F;margin:.6vmin 0 0}
.card.mode .tr{padding-bottom:.8vmin}
#modeHow{max-width:min(90vw,820px);font-size:min(3vw,3.2vh);letter-spacing:.03em;color:#e6f6ff;min-height:2.4em}

/* world map */
#mapScr{justify-content:flex-start;gap:1vmin;padding-top:max(2vmin,env(safe-area-inset-top))}
#mapScr .head{font-size:min(6vw,6vh);flex:none}
#mapHint{font-size:min(2.8vw,3vh);letter-spacing:.05em;color:#2EE6D6;flex:none}
#mapBody{flex:1 1 auto;min-height:0;width:min(98vw,170vh);display:flex;gap:2vmin;align-items:stretch}
#worldMap{flex:1 1 auto;min-width:0;height:100%;cursor:pointer;background:rgba(5,12,24,.6);border:2px solid rgba(46,230,214,.55);border-radius:1.2vmin;touch-action:manipulation}
#mapLegend{flex:none;display:flex;flex-direction:column;justify-content:center;gap:1vmin;font-size:min(2.4vw,2.8vh);letter-spacing:.04em;text-align:left;background:rgba(0,0,0,.35);border:2px solid rgba(46,230,214,.4);border-radius:1.2vmin;padding:1vmin 1.6vmin}
#mapLegend div{display:flex;align-items:center;gap:.8vmin;white-space:nowrap}
#mapLegend canvas{width:min(4vw,4.4vh);height:min(4vw,4.4vh)}
#mapScr .row{flex:none}

/* department panel */
#zpBody{display:flex;gap:2.4vmin;align-items:stretch;width:min(94vw,140vh);max-height:66vh}
#zpImg{width:44%;object-fit:cover;border:3px solid #000;border-radius:1vmin;box-shadow:0 0 2vmin rgba(46,230,214,.5);min-height:0}
#zpRaces{flex:1;display:flex;flex-direction:column;gap:1.2vmin;overflow-y:auto;min-height:0;touch-action:pan-y}
#zpRaces .zh{font-size:min(3vw,3.4vh);color:#2EE6D6;letter-spacing:.06em;text-align:left}
.zr{position:relative;text-align:left;font-family:Brush;font-size:min(3.4vw,3.8vh);color:#fff;background:linear-gradient(180deg,#132845,#0b1626);border:2px solid rgba(46,230,214,.6);border-radius:1vmin;padding:.5em .8em;cursor:pointer;letter-spacing:.03em}
.zr:hover,.zr:focus-visible{border-color:#FFD21F;outline:none;box-shadow:0 0 1.6vmin rgba(255,210,31,.6)}
.zr b{color:#FFD21F;font-style:italic;margin-right:.3em}
.zr em{font-style:normal;font-size:.7em;color:#9ab;border:1px solid #9ab;padding:0 .3em;border-radius:.3em}
.zr small{display:block;font-size:.62em;color:#cde;line-height:1.15;margin-top:.2em}
.zr i{position:absolute;right:.6em;top:.5em;font-style:normal;font-size:.7em;color:#000;background:#FFD21F;padding:.05em .4em;border-radius:.3em}
.zr i.won{background:#2FB34A;color:#fff}
@media (orientation:portrait){
 #modeCards{grid-template-columns:repeat(2,1fr);width:94vw}
 .card.mode .nm{font-size:4.6vw}.card.mode .tr{font-size:3vw}
 #modeHow{font-size:3.4vw}
 #mapBody{flex-direction:column;width:96vw}
 #worldMap{height:auto;flex:1 1 auto}
 #mapLegend{flex-direction:row;flex-wrap:wrap;justify-content:center;font-size:2.8vw;padding:1vmin}
 #mapLegend canvas{width:5vw;height:5vw}
 #mapHint{font-size:3.2vw;padding:0 3vw}
 #zpBody{flex-direction:column;max-height:70vh}
 #zpImg{width:100%;height:24vh;flex:none}
 .zr{font-size:4vw}#zpRaces .zh{font-size:3.6vw}
 #goal{max-width:90vw;top:calc(env(safe-area-inset-top) + 13*var(--u))}
 #mapBtn{left:auto;right:calc(env(safe-area-inset-right) + 2*var(--u));top:calc(env(safe-area-inset-top) + 15*var(--u))}
}
@media (max-height:500px){ #modeCards{width:min(94vw,110vh)} #modeHow{font-size:3vh;min-height:0} .card.mode .tr{display:none} }
#gatePrompt{pointer-events:auto;position:absolute;left:50%;top:31%;transform:translateX(-50%) skewX(-10deg);font-family:Brush;font-size:max(15px,calc(var(--u)*3.4));letter-spacing:.04em;color:#fff;
 background:rgba(0,0,0,.82);border:3px solid #FFD21F;border-radius:.4em;padding:.35em 1em;cursor:pointer;white-space:nowrap;box-shadow:0 0 2vmin rgba(255,210,31,.5)}
#gatePrompt b{color:#FFD21F;font-style:italic;margin-right:.3em}
#gatePrompt.pop{animation:gpop .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes gpop{0%{transform:translateX(-50%) skewX(-10deg) scale(1.8);opacity:0}100%{transform:translateX(-50%) skewX(-10deg) scale(1);opacity:1}}
body.touch #gatePrompt{top:31%}
#trickList{display:none}
#loading{--art:url(assets/title_bg.webp)}
#loading:before{content:"";position:absolute;inset:0;background:var(--art) center/cover;filter:saturate(1.1) brightness(.75)}
#loading>*{position:relative}
.zr.sel{border-color:#FFD21F;box-shadow:0 0 1.6vmin rgba(255,210,31,.6)}
.bigbtn.sel{outline:.4vmin solid #fff}
/* department panel: the department stays visible, live, on the open side */
#zonePanel.menu.dim{background:linear-gradient(90deg,rgba(14,26,46,0) 0,rgba(14,26,46,0) 40%,rgba(14,26,46,.9) 56%);align-items:flex-end;padding-right:max(3vmin,env(safe-area-inset-right))}
#zonePanel>*{width:min(50vw,90vh);text-align:center}
#zonePanel .head{width:auto;align-self:flex-end;margin-right:2vmin}
#zpBody{width:min(50vw,90vh);max-height:64vh}
#zonePanel .row{justify-content:center}
@media (orientation:portrait){
 #zonePanel.menu.dim{background:linear-gradient(180deg,rgba(14,26,46,0) 0,rgba(14,26,46,0) 50%,rgba(14,26,46,.92) 64%);align-items:center;justify-content:flex-end;padding-bottom:max(3vmin,env(safe-area-inset-bottom))}
 #zonePanel>*,#zpBody{width:94vw}
 #zonePanel .head{align-self:center;margin:0}
 #zpBody{max-height:46vh}
}