:root{--teal:#139089;--gold:#d9a24a;--coral:#f0706a;--ink:#fff7e8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}
html,body{margin:0;height:100%;overflow:hidden;background:#139089;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.off{display:none!important}
button{font:inherit;color:var(--ink);background:rgba(20,70,66,.38);border:1px solid rgba(255,240,215,.55);border-radius:999px;letter-spacing:.18em;font-weight:300;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
button:active,button.down{background:rgba(255,190,120,.45)}
/* title */
#title{position:fixed;inset:0;z-index:50;background:linear-gradient(#139089 0%,#6e8b78 45%,#d9a24a 100%);display:flex;align-items:center;justify-content:center;transition:opacity .9s ease}
#title.gone{opacity:0;pointer-events:none}
#title img{width:100%;height:100%;object-fit:contain;display:block}
#loadwrap{position:absolute;left:0;right:0;bottom:calc(11% + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px}
#loadbar{width:min(52vw,380px);height:2px;background:rgba(255,247,232,.28)}
#loadfill{display:block;height:100%;width:0;background:#fff7e8;transition:width .2s}
#loadtxt{font-size:11px;letter-spacing:.35em;text-transform:uppercase;opacity:.85}
#go{position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom));transform:translateX(-50%);padding:16px 44px;font-size:14px;animation:pulse 2.4s ease-in-out infinite}
#err{position:absolute;left:8%;right:8%;top:8%;padding:14px;background:rgba(120,30,20,.8);font-size:13px;line-height:1.4;border-radius:8px}
@keyframes pulse{50%{box-shadow:0 0 28px 6px rgba(255,190,120,.55)}}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#scorebox{position:absolute;top:calc(14px + env(safe-area-inset-top));left:0;right:0;text-align:center;text-shadow:0 1px 14px rgba(20,60,60,.55)}
#score{font-size:clamp(22px,4.4vmin,40px);letter-spacing:.22em;font-weight:200}
#mult{font-size:12px;letter-spacing:.3em;opacity:.85;min-height:14px;margin-top:2px}
#toast{position:absolute;top:24%;left:0;right:0;text-align:center;opacity:0;transition:opacity .35s;text-shadow:0 2px 20px rgba(20,60,60,.6)}
#toast.show{opacity:1}
#tmain{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 34px;color:#fff3dc;filter:drop-shadow(0 2px 14px rgba(20,60,60,.55))}
#tsub{font-size:clamp(11px,2vmin,15px);letter-spacing:.32em;text-transform:uppercase;opacity:.9;margin-top:6px}
#tpts{font-size:clamp(14px,2.6vmin,20px);letter-spacing:.2em;margin-top:8px;color:#ffd9a0}
#flow{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(44vw,420px)}
#flow:before{content:"";position:absolute;inset:-3px;border:1px solid rgba(255,247,232,.5);border-radius:999px}
#flowfill{height:9px;width:0;border-radius:999px;background:linear-gradient(90deg,#139089,#98a070 40%,#f0706a 75%,#ffd27a);box-shadow:0 0 12px rgba(255,200,120,.0);transition:box-shadow .3s}
#flowfill.hot{box-shadow:0 0 18px 3px rgba(255,200,120,.85)}
#flowlabel{position:absolute;left:0;right:0;top:-20px;text-align:center;font-size:10px;letter-spacing:.42em;opacity:.85}
#hint{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));text-align:center;font-size:12px;letter-spacing:.14em;opacity:.0;transition:opacity 1s;text-shadow:0 1px 8px rgba(20,60,60,.7)}
#hint.show{opacity:.9}
#topbtns{position:absolute;right:calc(14px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));display:flex;gap:8px;pointer-events:auto}
#topbtns button{width:40px;height:40px;font-size:14px;letter-spacing:0;padding:0}
/* touch */
#touch{position:fixed;inset:0;z-index:11;pointer-events:none}
#stick{position:absolute;left:calc(26px + env(safe-area-inset-left));bottom:calc(30px + env(safe-area-inset-bottom));width:min(30vmin,170px);height:min(30vmin,170px);border-radius:50%;border:1px solid rgba(255,247,232,.5);background:radial-gradient(rgba(255,247,232,.12),rgba(255,247,232,0));pointer-events:auto}
#knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:rgba(255,226,180,.5);border:1px solid rgba(255,247,232,.8)}
#btns{position:absolute;right:calc(20px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));width:min(44vmin,250px);height:min(34vmin,200px);pointer-events:none}
#btns button{position:absolute;pointer-events:auto;font-size:11px}
#bGas{right:0;bottom:0;width:min(21vmin,118px);height:min(21vmin,118px);font-size:13px}
#bJump{right:min(23vmin,128px);bottom:min(5vmin,28px);width:min(17vmin,96px);height:min(17vmin,96px)}
#bBrake{right:min(4vmin,22px);bottom:min(23vmin,128px);width:min(15vmin,84px);height:min(15vmin,84px)}
#bCruise{right:min(21vmin,118px);bottom:min(24vmin,134px);width:min(15vmin,84px);height:min(9vmin,50px);font-size:9px;letter-spacing:.12em}
#bCruise.on{background:rgba(255,190,120,.4)}
/* painting moment + sun-hold shimmer */
#paint{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;mix-blend-mode:soft-light;background:linear-gradient(180deg,#1aa39a 0%,#e98441 100%)}
#paint i{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 45%,rgba(60,20,10,.55) 100%);mix-blend-mode:normal}
#bars{position:fixed;inset:0;z-index:6;pointer-events:none}
#bars b{position:absolute;left:0;right:0;height:9vh;background:#0e3a37;transform:scaleY(0);transition:none}
#bars b:first-child{top:0;transform-origin:top}#bars b:last-child{bottom:0;transform-origin:bottom}
#hold{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 58%,rgba(255,214,160,0) 18%,rgba(255,196,140,.20) 100%)}
@keyframes spin{to{transform:rotate(360deg)}}
#pause{position:fixed;inset:0;z-index:60;background:rgba(19,80,76,.55);display:flex;align-items:center;justify-content:center;text-align:center;font-size:28px;letter-spacing:.5em;backdrop-filter:blur(6px)}
#pause[hidden]{display:none}#pause small{display:block;font-size:11px;letter-spacing:.4em;margin-top:14px;opacity:.8}

/* Sun-Tongue: the house style for in-world text */
.st{display:block;overflow:visible}
#prompt{position:absolute;left:0;right:0;bottom:calc(27% + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;pointer-events:none;color:#fff3dc}
#prompt.show{opacity:1;transform:none;pointer-events:auto}
#pglyph{filter:drop-shadow(0 0 16px rgba(255,190,120,.55)) drop-shadow(0 2px 10px rgba(20,60,60,.6))}
#psub{font-size:11px;letter-spacing:.36em;text-transform:uppercase;opacity:.88;text-shadow:0 1px 10px rgba(20,60,60,.7);padding-left:.36em}
#pkey{min-width:30px;padding:5px 12px;border:1px solid rgba(255,243,220,.55);border-radius:999px;font-size:10px;letter-spacing:.3em;text-align:center;opacity:.85;padding-left:calc(12px + .3em)}
/* atmosphere: a whisper of vignette + grain, and the sun's own glow when we face it */
#vig{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 58%,rgba(70,26,18,.26) 100%)}
#vig:after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
#glow{position:fixed;left:0;top:0;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,196,140,.55) 0%,rgba(255,160,110,.22) 22%,rgba(255,140,100,0) 55%);will-change:transform,opacity}
#flow,#scorebox{transition:opacity .8s ease}
#bAct{right:min(42vmin,236px);bottom:min(3vmin,16px);width:min(12vmin,64px);height:min(12vmin,64px);font-size:10px;letter-spacing:.1em}
#touch[data-mode=foot] #bGas,#touch[data-mode=foot] #bBrake,#touch[data-mode=foot] #bCruise,#touch[data-mode=foot] #bAct{display:none}