:root{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff;background:#160b3c;
  --violet:#7e47ff;--violet-dark:#281064;--pink:#ff4fb8;--cyan:#34e4ff;
  --gold:#ffd228;--orange:#ff8c1a;--ink:#12092f;--panel:rgba(29,15,73,.92);
  --stroke:rgba(255,255,255,.3);--shadow:0 18px 45px rgba(5,0,30,.46);
  --control-scale:1;--control-opacity:.86;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:radial-gradient(circle at 52% 35%,#6740cc 0,#2c1266 42%,#12082f 100%);touch-action:none}
button,select,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation;-webkit-appearance:none;appearance:none;outline:none}button *{pointer-events:none}button:active{transform:scale(.95)}
#renderCanvas{position:fixed;inset:0;width:100%;height:100%;outline:0;touch-action:none}
#minimap{display:none;position:fixed;right:max(16px,env(safe-area-inset-right));top:max(96px,calc(env(safe-area-inset-top) + 76px));width:110px;height:110px;border-radius:26px;background:rgba(19,8,51,.78);border:3px solid rgba(255,255,255,.7);box-shadow:0 8px 0 rgba(18,6,52,.5),0 16px 35px rgba(0,0,0,.35);z-index:12}
#app{position:fixed;inset:0;pointer-events:none;isolation:isolate}
.world-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,4,49,.92),rgba(21,7,57,.18) 42%,rgba(20,5,55,.2) 70%,rgba(14,3,42,.88)),linear-gradient(0deg,rgba(11,3,34,.85),transparent 45%);z-index:-1}
.menu-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-1}.orb{position:absolute;border-radius:50%;filter:blur(1px);animation:float 7s ease-in-out infinite}.orb:after{content:"";position:absolute;inset:18%;border-radius:50%;background:rgba(255,255,255,.34);filter:blur(8px)}.orb-a{width:90px;height:90px;right:18%;top:15%;background:radial-gradient(circle at 30% 30%,#fff,#44e8ff 15%,#6a3df2 58%,transparent 68%)}.orb-b{width:50px;height:50px;right:7%;top:55%;background:radial-gradient(circle at 30% 30%,#fff,#ff79d5 16%,#8d39ff 60%,transparent 70%);animation-delay:-2s}.orb-c{width:28px;height:28px;left:42%;top:17%;background:#49efff;box-shadow:0 0 30px #49efff;animation-delay:-4s}
.island{position:absolute;width:170px;height:55px;border-radius:50%;background:linear-gradient(#55dca8,#1b9d7b 38%,#48207c 39%,#1a0a3b 100%);filter:drop-shadow(0 15px 25px rgba(0,0,0,.35));opacity:.7}.island:after{content:"";position:absolute;left:32%;top:45px;border-left:32px solid transparent;border-right:32px solid transparent;border-top:75px solid #31135d}.island-a{right:3%;top:23%;transform:scale(.75) rotate(-6deg)}.island-b{right:31%;top:9%;transform:scale(.38) rotate(4deg);opacity:.5}@keyframes float{50%{transform:translateY(-13px)}}
#topbar{position:absolute;z-index:30;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));height:58px;display:flex;align-items:center;justify-content:space-between;pointer-events:auto}
#brand,.player-chip,.top-actions button{border:2px solid rgba(255,255,255,.25);background:linear-gradient(180deg,rgba(61,29,132,.96),rgba(28,13,72,.96));box-shadow:0 6px 0 rgba(10,3,35,.52),0 12px 28px rgba(0,0,0,.28);border-radius:18px}
#brand{height:54px;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 7px;text-align:left}.brand-mark{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,var(--cyan),#4d6cff);border:2px solid #c9faff;box-shadow:inset 0 -4px 0 rgba(16,26,111,.45),0 0 18px rgba(52,228,255,.45);font-size:1.25rem}.brand-copy{display:flex;flex-direction:column}.brand-copy small,.player-chip small{font-size:.52rem;letter-spacing:.16em;color:#c9bfff;font-weight:900}.brand-copy b{font-size:.82rem;letter-spacing:.035em}.player-chip{display:flex;align-items:center;gap:8px;padding:5px 13px 5px 5px}.player-chip>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffe85a,#ff9d1e);border:2px solid #fff3a1;color:#4d2100;font-weight:1000;box-shadow:inset 0 -4px 0 rgba(154,65,0,.28)}.player-chip div{display:flex;flex-direction:column}.player-chip b{font-size:.76rem}.top-actions{display:flex;gap:9px}.top-actions button{width:50px;height:50px;font-weight:900;font-size:1.1rem}
.screen{display:none;position:absolute;inset:0;padding:max(80px,calc(env(safe-area-inset-top) + 72px)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));pointer-events:auto}.screen.active{display:block}
#menu{overflow:hidden}.menu-copy{position:absolute;left:max(28px,env(safe-area-inset-left));top:18%;width:min(38vw,470px);z-index:3}.season-pill{display:inline-flex;padding:7px 12px;border-radius:10px;background:linear-gradient(90deg,#ff4fb8,#7e47ff);border:2px solid rgba(255,255,255,.35);font-size:.62rem;font-weight:1000;letter-spacing:.14em;box-shadow:0 5px 0 rgba(43,11,92,.45)}.menu-copy h1{margin:.18em 0 .15em;text-transform:uppercase;line-height:.82;letter-spacing:-.055em;text-shadow:0 6px 0 #1e084f,0 14px 30px rgba(0,0,0,.4)}.menu-copy h1 span{display:block;font-size:clamp(2.2rem,5.1vw,5rem);color:#fff}.menu-copy h1 strong{display:block;font-size:clamp(2.55rem,6vw,5.9rem);color:var(--gold);-webkit-text-stroke:2px #5e2600}.menu-copy p{max-width:430px;margin:0;color:#e5ddff;font-weight:700;line-height:1.45;text-shadow:0 2px 8px #12042f}
.menu-stage{position:absolute;left:42%;right:17%;top:12%;bottom:18%;display:grid;place-items:center;pointer-events:none}.stage-glow{position:absolute;width:min(42vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#5af0ff 0,rgba(69,105,255,.48) 23%,rgba(166,55,255,.24) 50%,transparent 72%);filter:blur(2px);animation:pulseGlow 3s ease-in-out infinite}.showcase-kart{position:relative;width:min(35vw,400px);height:min(27vw,300px);animation:kartHover 2.8s ease-in-out infinite;filter:drop-shadow(0 28px 22px rgba(12,2,40,.5))}.kart-shadow{position:absolute;left:18%;right:18%;bottom:2%;height:16%;border-radius:50%;background:rgba(4,0,22,.48);filter:blur(10px)}.kart-body{position:absolute;left:16%;right:9%;top:38%;height:37%;border-radius:42% 50% 35% 38%;background:linear-gradient(155deg,#fff 0 13%,#57dff8 14% 36%,#4d46e9 37% 68%,#27105f 69%);border:5px solid #18063f;box-shadow:inset 0 -12px 0 rgba(19,5,70,.38),inset 0 8px 0 rgba(255,255,255,.45)}.kart-body:after{content:"";position:absolute;right:-12%;top:25%;width:30%;height:42%;border-radius:20px;background:linear-gradient(#ffde3d,#ff771c);border:5px solid #260843;box-shadow:0 0 26px #ff9f24}.kart-canopy{position:absolute;left:39%;top:22%;width:32%;height:31%;border-radius:48% 48% 30% 30%;background:linear-gradient(145deg,rgba(205,250,255,.95),rgba(73,105,225,.72));border:5px solid #21074b;box-shadow:inset 9px 8px 0 rgba(255,255,255,.33)}.kart-wheel{position:absolute;bottom:4%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#7a63fa 0 23%,#20dbef 24% 35%,#261156 36% 62%,#0c0622 63%);border:5px solid #160532;box-shadow:inset 0 0 0 5px #6736c9}.wheel-l{left:8%}.wheel-r{right:3%}.kart-core{position:absolute;left:19%;top:45%;width:18%;aspect-ratio:1;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#fff56b,#ff6dbb);border:5px solid #23064b;color:#46106c;font-size:2rem;box-shadow:0 0 25px #ff7bd5}.pilot-head{position:absolute;left:46%;top:6%;width:20%;aspect-ratio:1;border-radius:48% 48% 44% 44%;background:linear-gradient(145deg,#f6d6aa,#ba704d);border:5px solid #220747}.pilot-head:before{content:"";position:absolute;left:-10%;right:-10%;top:-22%;height:55%;border-radius:50% 50% 35% 35%;background:#7df0e1;border:5px solid #220747;transform:rotate(-7deg)}.pilot-head:after{content:"•  •";position:absolute;left:24%;top:34%;font-size:1.1rem;color:#1d0a39;font-weight:1000;letter-spacing:.3em}.pilot-nameplate{position:absolute;bottom:-6%;left:50%;transform:translateX(-50%);min-width:230px;text-align:center;padding:9px 20px;border-radius:15px;background:linear-gradient(180deg,#4f2ca4,#24105e);border:3px solid rgba(255,255,255,.32);box-shadow:0 7px 0 #12052d}.pilot-nameplate small,.pilot-nameplate span{display:block;font-size:.52rem;letter-spacing:.14em;color:#cbbfff;font-weight:900}.pilot-nameplate b{display:block;font-size:1.18rem}@keyframes kartHover{50%{transform:translateY(-12px) rotate(-1deg)}}@keyframes pulseGlow{50%{transform:scale(1.07);opacity:.8}}
.side-nav{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(102px,calc(env(safe-area-inset-bottom) + 88px));display:flex;gap:10px}.side-nav button{width:132px;height:64px;display:flex;align-items:center;gap:9px;text-align:left;padding:7px 10px;border:2px solid rgba(255,255,255,.25);border-radius:16px;background:linear-gradient(180deg,#4c279d,#28105f);box-shadow:0 6px 0 #130533,0 12px 25px rgba(0,0,0,.25)}.nav-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#45eafb,#6c53ff);border:2px solid rgba(255,255,255,.5);font-size:1.25rem}.side-nav span:last-child{display:flex;flex-direction:column}.side-nav b{font-size:.8rem}.side-nav small{font-size:.55rem;color:#cfc4ff}.quick-nav{position:absolute;right:max(20px,env(safe-area-inset-right));top:22%;display:grid;gap:12px}.quick-nav button{width:78px;height:72px;border:2px solid rgba(255,255,255,.3);border-radius:18px;background:linear-gradient(180deg,#5031a8,#28105e);box-shadow:0 6px 0 #130532}.quick-nav span{display:block;font-size:1.45rem}.quick-nav small{display:block;font-size:.55rem;font-weight:900}
.play-dock{position:absolute;left:31%;right:max(26px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));height:83px;display:flex;gap:12px}.event-card{flex:1;display:flex;align-items:center;gap:13px;padding:10px 16px;border:3px solid rgba(255,255,255,.26);border-radius:19px;background:linear-gradient(180deg,rgba(47,25,112,.96),rgba(24,9,61,.96));box-shadow:0 8px 0 #100329}.event-icon{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#66f3ff,#6d4bff);border:3px solid #c8fbff;font-size:1.5rem}.event-card div{display:flex;flex-direction:column}.event-card small{font-size:.55rem;letter-spacing:.13em;color:#aeefff;font-weight:900}.event-card b{font-size:1rem}.event-card em{font-style:normal;font-size:.65rem;color:#cfc5f2}.play-button{position:relative;width:min(32vw,360px);padding:8px 58px 8px 22px;text-align:left;border:4px solid #fff38c;border-radius:20px;background:linear-gradient(180deg,#ffe947,#ffb316 58%,#ef7b0b 59%);color:#401900;box-shadow:0 8px 0 #8f3100,0 16px 32px rgba(0,0,0,.34);text-shadow:0 1px 0 #fff49f}.play-button span{display:block;font-size:1.7rem;font-weight:1000;letter-spacing:.02em}.play-button small{display:block;font-size:.63rem;font-weight:900}.play-button i{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff5a1;border:3px solid #f08b0c;font-style:normal;font-size:2rem}.version{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(4px,env(safe-area-inset-bottom));font-size:.5rem;letter-spacing:.14em;color:#9c8ec7;font-weight:800}
.panel-screen{background:radial-gradient(circle at 70% 20%,rgba(119,73,255,.42),transparent 36%),linear-gradient(135deg,rgba(27,10,70,.98),rgba(12,5,41,.98));overflow:auto}.panel-screen:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle at 15% 30%,rgba(52,228,255,.12) 0 2px,transparent 3px),radial-gradient(circle at 85% 70%,rgba(255,79,184,.12) 0 2px,transparent 3px);background-size:55px 55px,70px 70px;pointer-events:none}.back{position:relative;z-index:2;border:2px solid rgba(255,255,255,.3);border-radius:14px;padding:10px 15px;background:linear-gradient(#5735a8,#29105f);box-shadow:0 5px 0 #12042f;font-weight:900}.panel-heading{margin:12px 0 20px}.panel-heading small{color:var(--cyan);letter-spacing:.18em;font-weight:1000}.panel-heading h2{margin:.1em 0;font-size:clamp(2.1rem,5vw,4rem);line-height:.9;text-transform:uppercase;text-shadow:0 5px 0 #16043f}.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,330px));gap:13px}.setup-grid label{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border:2px solid rgba(255,255,255,.22);border-radius:16px;background:linear-gradient(180deg,rgba(74,41,145,.8),rgba(35,16,84,.9));box-shadow:0 6px 0 rgba(13,3,40,.55)}.setup-grid label span{font-size:.62rem;letter-spacing:.13em;color:#bff6ff;font-weight:1000}.setup-grid select,.control-settings select{border:0;border-radius:11px;padding:10px;background:#160936;color:#fff;font-weight:800}.selection-preview{max-width:674px;margin:16px 0;padding:15px;border-left:5px solid var(--cyan);border-radius:0 14px 14px 0;background:rgba(45,23,106,.78);line-height:1.5}.primary{border:3px solid #bff9ff;background:linear-gradient(180deg,#48ebff,#3378f1);color:#0e1946;box-shadow:0 7px 0 #17389c,0 14px 28px rgba(0,0,0,.26);font-weight:1000}.huge{border-radius:18px;padding:15px 22px;font-size:1.1rem}.note,.story-intro,.flow-explainer{max-width:760px;padding:15px 18px;border-radius:16px;background:rgba(51,28,118,.78);border:2px solid rgba(255,255,255,.18);line-height:1.5}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}.card-grid article{padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(84,47,158,.92),rgba(35,15,83,.96));border:2px solid rgba(255,255,255,.2);box-shadow:0 7px 0 rgba(14,3,40,.55)}.card-grid article.playable{border-color:#58efff;box-shadow:0 7px 0 #0b516f,0 0 22px rgba(52,228,255,.18)}.card-grid small{color:#74eeff;font-weight:900;letter-spacing:.1em}.card-grid h3{margin:.35em 0;font-size:1.25rem}.card-grid p{color:#d1c7ed}.stats{display:grid;grid-template-columns:90px 1fr;gap:6px;font-size:.7rem}.stat{height:8px;border-radius:10px;background:#1a0a41;overflow:hidden}.stat i{display:block;height:100%;background:linear-gradient(90deg,#43e9ff,#ff51bd)}#rankingList{max-width:650px;padding:8px 17px;border-radius:18px;background:rgba(49,27,112,.82);border:2px solid rgba(255,255,255,.18)}#rankingList>div{padding:13px;border-bottom:1px solid rgba(255,255,255,.14)}
.control-settings{display:grid;gap:12px;max-width:720px}.control-settings label{display:grid;grid-template-columns:190px 1fr 70px;align-items:center;gap:12px;padding:14px;border-radius:17px;background:linear-gradient(180deg,rgba(78,43,150,.88),rgba(36,16,83,.94));border:2px solid rgba(255,255,255,.18)}.control-settings span{font-weight:900}.control-settings output{font-weight:900;color:#65edff;text-align:right}.toggle-row{grid-template-columns:auto 1fr!important}.toggle-row input{width:24px;height:24px}.settings-actions{display:flex;gap:10px;margin:15px 0}.settings-actions button{border:2px solid rgba(255,255,255,.28);border-radius:15px;padding:13px 17px;background:#41218e;box-shadow:0 5px 0 #15043b;font-weight:900}.flow-explainer b{color:#62efff}
#hud{position:absolute;z-index:15;top:max(76px,calc(env(safe-area-inset-top) + 66px));left:max(14px,env(safe-area-inset-left));right:max(132px,calc(env(safe-area-inset-right) + 120px));display:flex;justify-content:space-between;align-items:start;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55);pointer-events:none}.race-info,.speedo,#itemCard,.echo-card{background:linear-gradient(180deg,rgba(61,31,133,.94),rgba(24,9,63,.94));border:3px solid rgba(255,255,255,.34);box-shadow:0 6px 0 rgba(8,2,31,.58),0 14px 30px rgba(0,0,0,.25)}.race-info{min-width:106px;padding:9px 13px;border-radius:18px;display:flex;flex-direction:column}.race-info small,.speedo small,#itemCard small{font-size:.52rem;letter-spacing:.13em;color:#9df2ff;font-weight:1000}.race-info b{font-size:1.55rem;line-height:1}.race-info span{font-size:.6rem;font-weight:900}.echo-card{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(32vw,300px);padding:9px 13px;border-radius:17px}.echo-label{display:flex;justify-content:space-between;font-size:.67rem;letter-spacing:.13em}.echo-label span{color:#5af4e0;font-weight:1000}.echo-track{height:9px;margin:6px 0;border-radius:8px;background:#160737;overflow:hidden}.echo-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#41edff,#7a50ff,#ff53bc);box-shadow:0 0 15px #55eaff}.echo-card small{display:block;text-align:center;font-size:.48rem;letter-spacing:.12em;color:#c8bff0}.echo-card.ready{animation:hudPulse .85s infinite}.echo-card.active{border-color:#65fff0;box-shadow:0 6px 0 #07565d,0 0 28px #4be8ff}.speedo{padding:8px 12px;border-radius:18px;display:grid;grid-template-columns:auto auto;column-gap:5px;align-items:end}.speedo small{grid-column:1/-1}.speedo b{font-size:1.55rem;line-height:1}.speedo span{font-size:.55rem;font-weight:900}.boost-track{grid-column:1/-1;width:90px;height:6px;margin-top:5px;border-radius:7px;background:#17083b;overflow:hidden}.boost-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#5ef4ca,#fff24d)}#itemCard{position:absolute;right:112px;top:0;min-width:135px;padding:8px 12px;border-radius:18px;display:flex;align-items:center;gap:9px}#itemIcon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#fff45b,#ff60b7);border:2px solid #fff8bd;color:#45144e;font-size:1.3rem;box-shadow:inset 0 -4px 0 rgba(132,31,85,.26)}#itemCard div{display:flex;flex-direction:column}#itemCard b{font-size:.7rem}@keyframes hudPulse{50%{transform:translateX(-50%) scale(1.035)}}
.hidden{display:none!important}#wrongWay,#message{position:absolute;z-index:40;left:50%;transform:translateX(-50%);font-weight:1000;color:#fff;text-shadow:0 4px 0 #260747,0 8px 18px #000}#wrongWay{top:24%;padding:10px 17px;border:3px solid #fff;border-radius:14px;background:linear-gradient(#ff5a6e,#d51d53);letter-spacing:.1em;box-shadow:0 6px 0 #6d0a28}#message{top:36%;font-size:clamp(3rem,12vw,6rem)}
#controls{position:absolute;inset:0;z-index:25;display:block;pointer-events:none}#controls.hidden{display:none!important}#controls .control-group{position:fixed;pointer-events:auto;transform:translate(-50%,-50%) scale(var(--control-scale));transform-origin:center;opacity:var(--control-opacity);touch-action:none;user-select:none}.control-label{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-size:.48rem;letter-spacing:.14em;font-weight:1000;color:#d9d0ff;text-shadow:0 2px 4px #000}.steer{left:13%;top:80%;display:flex;gap:9px}.steer button{width:72px;height:72px;border-radius:22px;border:4px solid rgba(198,245,255,.75);background:linear-gradient(180deg,rgba(72,57,154,.9),rgba(26,12,69,.94));box-shadow:0 7px 0 rgba(8,3,31,.6),inset 0 4px 0 rgba(255,255,255,.2);font-size:1.35rem;font-weight:1000}.pedals{left:85%;top:79%;display:flex;align-items:end;gap:12px}.pedals button{border:4px solid rgba(255,255,255,.72);box-shadow:0 7px 0 rgba(10,3,34,.62),inset 0 4px 0 rgba(255,255,255,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:1000}.pedals button span{font-size:1.3rem;line-height:1}.pedals button small{font-size:.52rem;letter-spacing:.08em}.pedals #brake{width:75px;height:75px;border-radius:23px;background:linear-gradient(180deg,#a64fff,#5a22c8)}.pedals #gas{width:92px;height:92px;border-radius:50%;background:linear-gradient(180deg,#59f18c,#0dbb7a);color:#062a1b;border-color:#bcffd2;box-shadow:0 8px 0 #08704c,inset 0 5px 0 rgba(255,255,255,.4)}#itemBtn{left:67%;top:77%;width:76px;height:76px;border-radius:50%;border:4px solid #fff2a8;background:linear-gradient(180deg,#ffe94f,#ff871c);color:#4f1a00;box-shadow:0 7px 0 #9a3800,inset 0 5px 0 rgba(255,255,255,.45);display:flex;flex-direction:column;align-items:center;justify-content:center}#itemBtn span{font-size:1.55rem;line-height:1}#itemBtn small{font-size:.45rem;font-weight:1000}.control-group.editing{outline:4px solid #52ecff;outline-offset:6px;opacity:1!important}.control-group.editing:active{cursor:grabbing}#controlEditOverlay{position:fixed;z-index:110;left:50%;top:max(78px,calc(env(safe-area-inset-top) + 68px));transform:translateX(-50%);display:flex;align-items:center;gap:11px;padding:12px 14px;border:3px solid rgba(255,255,255,.35);border-radius:16px;background:linear-gradient(#4a299d,#24105b);box-shadow:0 7px 0 #10032d;pointer-events:auto}#controlEditOverlay span{font-size:.7rem;color:#ded5ff}#controlEditOverlay button{border:2px solid #c8fbff;border-radius:11px;padding:8px 12px;background:#48e8ff;color:#14315d;font-weight:1000}
.race-intro{position:absolute;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);width:min(84vw,650px);padding:28px;text-align:center;color:#fff;text-shadow:0 5px 0 #220648,0 10px 25px #000;pointer-events:none}.race-intro small,.race-intro span{font-weight:1000;letter-spacing:.22em}.race-intro h2{font-size:clamp(2.8rem,8vw,6rem);line-height:.85;margin:.17em 0;text-transform:uppercase;color:#ffe347;-webkit-text-stroke:2px #5b1e00}.race-intro p{font-weight:900}.intro-line{height:4px;width:70%;margin:17px auto;border-radius:5px;background:linear-gradient(90deg,transparent,#54efff,#ff61c1,transparent)}
.modal{position:absolute;z-index:60;pointer-events:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92%,680px);max-height:88vh;overflow:auto;padding:25px;border:3px solid rgba(255,255,255,.32);border-radius:25px;background:linear-gradient(180deg,rgba(67,35,139,.98),rgba(24,9,61,.98));box-shadow:0 10px 0 #0d0329,0 32px 80px rgba(0,0,0,.48);text-align:center}.modal h2{font-size:2.4rem;margin:8px;text-transform:uppercase;color:#ffe14a;text-shadow:0 4px 0 #671e00}.modal button{width:100%;padding:13px;border:2px solid rgba(255,255,255,.3);border-radius:14px;margin-top:8px;background:#41218f;box-shadow:0 5px 0 #13043a;font-weight:1000}.result-badge{display:inline-block;padding:7px 15px;border-radius:10px;background:linear-gradient(#58edff,#3478ef);color:#10204b;font-size:.68rem;letter-spacing:.16em;font-weight:1000}.result-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-items:end;margin:15px 0}.podium-place{min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 6px;border-radius:16px;background:linear-gradient(#5e39b2,#29115f);border:2px solid rgba(255,255,255,.25)}.podium-place span{font-size:1.5rem}.podium-place b{font-size:.75rem}.podium-place small{font-size:.55rem;color:#d2c8ed}.podium-place.p1{min-height:116px;background:linear-gradient(#ffea60,#e99a13);color:#3d1900}.podium-place.p2{min-height:101px}.podium-place.p3{background:linear-gradient(#d99a72,#8f4c42)}#resultStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}#resultStats div{padding:10px;border-radius:13px;background:#28105e;border:1px solid rgba(255,255,255,.17)}#rotateHint{position:absolute;z-index:100;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:30px;background:radial-gradient(circle,#663dc4,#18083e);text-align:center;font-size:4rem;pointer-events:auto}#rotateHint b{font-size:1rem}#rotateHint button{border:3px solid #fff2a2;border-radius:14px;padding:12px 17px;background:linear-gradient(#ffe84d,#ff9a16);color:#451800;font-weight:1000}
@media(max-width:900px){.player-chip{display:none}.menu-copy{top:17%;width:39vw}.menu-stage{left:38%;right:12%}.side-nav{bottom:106px}.side-nav button{width:112px}.play-dock{left:27%}}
@media(orientation:landscape) and (max-height:560px){#topbar{height:48px}#brand{height:45px}.brand-mark{width:33px;height:33px}.top-actions button{width:43px;height:43px}.screen{padding-top:65px}.menu-copy{top:16%;left:20px;width:38vw}.menu-copy p{display:none}.menu-copy h1 span{font-size:2.55rem}.menu-copy h1 strong{font-size:3.05rem}.menu-stage{top:8%;bottom:22%;left:39%;right:13%}.showcase-kart{width:34vw;height:25vw}.pilot-nameplate{bottom:-10%;transform:translateX(-50%) scale(.85)}.quick-nav{top:21%;right:14px}.quick-nav button{width:66px;height:61px}.side-nav{left:18px;bottom:89px}.side-nav button{width:103px;height:55px;padding:5px 7px}.nav-icon{width:32px;height:32px}.play-dock{height:70px;bottom:10px;left:29%;right:15px}.event-card{padding:7px 11px}.event-icon{width:42px;height:42px}.play-button{width:290px}.play-button span{font-size:1.4rem}.play-button small{font-size:.55rem}.version{display:none}#hud{top:58px}.echo-card{width:31vw}.steer{left:12%;top:78%}.pedals{left:87%;top:77%}#itemBtn{left:68%;top:73%}.steer button{width:62px;height:62px}.pedals #brake{width:65px;height:65px}.pedals #gas{width:78px;height:78px}#itemBtn{width:66px;height:66px}#minimap{top:68px;width:92px;height:92px}}
@media(orientation:portrait){#menu{overflow:auto}.menu-stage{top:17%;left:18%;right:18%;bottom:39%}.showcase-kart{width:min(75vw,390px);height:min(58vw,300px)}.menu-copy{top:8%;left:20px;right:20px;width:auto;text-align:center}.menu-copy p{display:none}.menu-copy h1 span{font-size:2.2rem}.menu-copy h1 strong{font-size:2.7rem}.season-pill{font-size:.5rem}.pilot-nameplate{display:none}.side-nav{left:16px;right:16px;bottom:166px;display:grid;grid-template-columns:repeat(3,1fr)}.side-nav button{width:auto;height:59px}.side-nav small{display:none}.quick-nav{top:auto;right:18px;bottom:96px;display:flex}.quick-nav button{width:66px;height:58px}.play-dock{left:16px;right:16px;bottom:17px;height:71px}.event-card{display:none}.play-button{width:100%}.panel-screen{padding-left:16px;padding-right:16px}.setup-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-settings label{grid-template-columns:1fr 62px}.control-settings input[type=range]{grid-column:1/-1}#hud{right:14px}.echo-card{top:59px;width:48vw}.echo-card small{display:none}#itemCard{right:100px}#minimap{top:155px;width:86px;height:86px}.steer{left:22%;top:84%}.pedals{left:78%;top:83%}#itemBtn{left:76%;top:67%}}
@media(orientation:portrait) and (max-width:500px){#rotateHint.auto{display:flex!important}}
@media(max-width:430px){.brand-copy{display:none}#brand{padding-right:7px}.side-nav b{font-size:.65rem}.card-grid{grid-template-columns:1fr}#resultStats{grid-template-columns:repeat(2,1fr)}}

/* v0.18 Living Animation language */
:root{--juice-ease:cubic-bezier(.18,1.45,.35,1);--press-ease:cubic-bezier(.2,.8,.2,1)}
button,.card,.side-nav button,.quick-nav button,.play-button{will-change:transform,filter;transition:transform .18s var(--juice-ease),filter .18s ease,box-shadow .18s ease}
button:active,.card:active{transform:translateY(3px) scale(.93)!important;filter:saturate(1.2) brightness(1.12)}
.ui-pop{animation:uiPop .34s var(--juice-ease)}
@keyframes uiPop{0%{transform:scale(1)}32%{transform:scale(.88)}68%{transform:scale(1.09)}100%{transform:scale(1)}}
.play-button{animation:playBreathe 2.2s ease-in-out infinite}
@keyframes playBreathe{0%,100%{transform:translateY(0) scale(1);filter:saturate(1)}50%{transform:translateY(-4px) scale(1.025);filter:saturate(1.15) brightness(1.07)}}
.showcase-kart{animation:kartFloat 2.6s ease-in-out infinite;transform:translate(var(--px,0),var(--py,0));transition:transform .35s ease-out}
@keyframes kartFloat{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -10px;rotate:1.5deg}}
.kart-shadow{animation:shadowBreathe 2.6s ease-in-out infinite}@keyframes shadowBreathe{50%{transform:scale(.82);opacity:.48}}
.kart-core,.brand-mark,.event-icon{animation:crystalPulse 1.55s ease-in-out infinite}@keyframes crystalPulse{0%,100%{filter:brightness(1) saturate(1);transform:scale(1)}50%{filter:brightness(1.45) saturate(1.3);transform:scale(1.12)}}
.orb{animation-timing-function:ease-in-out!important}.orb-a{animation:orbDance 7s infinite}.orb-b{animation:orbDance 9s -2s infinite reverse}.orb-c{animation:orbDance 6s -1s infinite}@keyframes orbDance{0%,100%{translate:0 0;scale:1}35%{translate:12px -18px;scale:1.08}70%{translate:-8px 10px;scale:.94}}
.side-nav button:nth-child(1){animation:menuIdle 3.1s .1s ease-in-out infinite}.side-nav button:nth-child(2){animation:menuIdle 3.4s .55s ease-in-out infinite}.side-nav button:nth-child(3){animation:menuIdle 3.7s .95s ease-in-out infinite}@keyframes menuIdle{0%,100%{translate:0 0}50%{translate:0 -3px}}
#controls button{transition:transform .12s var(--juice-ease),filter .12s ease}
#controls button:active{transform:scale(.84)!important;filter:brightness(1.3) saturate(1.25)}
#gas{animation:gasGlow 1.8s ease-in-out infinite}@keyframes gasGlow{50%{box-shadow:0 9px 0 #08704c,inset 0 5px 0 rgba(255,255,255,.46),0 0 24px rgba(79,255,153,.55)}}
#itemBtn:not(:disabled){animation:itemHover 1.5s ease-in-out infinite}@keyframes itemHover{50%{translate:0 -4px;rotate:2deg;filter:brightness(1.12)}}
.echo-card.ready{animation:echoReady .7s var(--juice-ease) infinite alternate}@keyframes echoReady{to{transform:translateX(-50%) scale(1.055);filter:brightness(1.22)}}
#itemIcon{animation:itemSpin 2.6s ease-in-out infinite}@keyframes itemSpin{50%{transform:rotate(9deg) scale(1.08)}}
.race-info,.speedo,#itemCard,.echo-card{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#message{animation:messagePunch .48s var(--juice-ease)}@keyframes messagePunch{0%{transform:translateX(-50%) scale(.2) rotate(-5deg);opacity:0}65%{transform:translateX(-50%) scale(1.18) rotate(2deg);opacity:1}100%{transform:translateX(-50%) scale(1) rotate(0)}}
.race-intro:not(.hidden){animation:introPunch .65s var(--juice-ease)}@keyframes introPunch{0%{opacity:0;transform:translate(-50%,-45%) scale(.72)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* v0.19 – Solo-Testmodus & freies Sichtfeld */
html,body{width:100%;height:100%;height:100dvh;overflow:hidden}
body.race-active #topbar{display:none!important}
body.race-active .world-vignette{opacity:.18}

/* HUD: nur an den Rändern, die Rennstrecke bleibt in der Mitte frei */
#hud{
  position:fixed;
  inset:0;
  z-index:15;
  display:block;
  pointer-events:none;
  text-shadow:0 2px 6px rgba(0,0,0,.55)
}
#hud.hidden{display:none!important}
.race-info{
  position:absolute;
  left:max(12px,env(safe-area-inset-left));
  top:max(10px,env(safe-area-inset-top));
  min-width:94px;
  padding:7px 10px;
  border-radius:16px
}
.race-info b{font-size:1.35rem}
.echo-card{
  position:absolute;
  left:50%;
  top:max(10px,env(safe-area-inset-top));
  width:clamp(180px,28vw,270px);
  padding:7px 11px;
  border-radius:15px
}
.echo-card small{font-size:.43rem}
.speedo{
  position:absolute;
  right:max(12px,env(safe-area-inset-right));
  top:max(10px,env(safe-area-inset-top));
  padding:7px 10px;
  border-radius:16px
}
.speedo b{font-size:1.35rem}
#itemCard{
  position:absolute;
  right:max(12px,env(safe-area-inset-right));
  top:calc(max(10px,env(safe-area-inset-top)) + 82px);
  min-width:118px;
  max-width:145px;
  padding:7px 9px;
  border-radius:16px
}
#itemIcon{width:34px;height:34px}
#itemCard b{font-size:.62rem}
#minimap{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  top:calc(max(10px,env(safe-area-inset-top)) + 142px);
  width:82px;
  height:82px;
  border-radius:22px;
  z-index:16
}

/* Bedienelemente werden ausschließlich an Unterkante und Seiten verankert. */
#controls{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden}
#controls .control-group{transform:scale(var(--control-scale));transform-origin:center bottom}
.steer{
  left:max(14px,env(safe-area-inset-left))!important;
  top:auto!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  transform:scale(var(--control-scale))!important;
  display:flex;
  gap:10px
}
.control-label{top:-15px}
.steer button{width:clamp(58px,8.2vw,72px);height:clamp(58px,8.2vw,72px);border-radius:21px}
.pedals{
  left:auto!important;
  right:max(14px,env(safe-area-inset-right))!important;
  top:auto!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  transform:scale(var(--control-scale))!important;
  display:flex;
  gap:10px
}
.pedals #brake{width:clamp(62px,8.6vw,76px);height:clamp(62px,8.6vw,76px);border-radius:23px}
.pedals #gas{width:clamp(76px,10.5vw,94px);height:clamp(76px,10.5vw,94px)}
#itemBtn{
  left:auto!important;
  right:calc(max(14px,env(safe-area-inset-right)) + clamp(156px,20vw,188px))!important;
  top:auto!important;
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 4px))!important;
  transform:scale(var(--control-scale))!important;
  width:clamp(66px,8.8vw,80px);
  height:clamp(66px,8.8vw,80px)
}

/* Kleine Querformat-Displays, inkl. iPhone 12 Pro Max (926 × 428 CSS-Pixel). */
@media (orientation:landscape) and (max-height:500px){
  .race-info{left:max(9px,env(safe-area-inset-left));top:max(7px,env(safe-area-inset-top));min-width:84px;padding:5px 8px}
  .race-info small,.speedo small,#itemCard small{font-size:.43rem}
  .race-info b,.speedo b{font-size:1.16rem}
  .race-info span{font-size:.5rem}
  .echo-card{top:max(7px,env(safe-area-inset-top));width:230px;padding:5px 9px}
  .echo-track{height:7px;margin:4px 0}
  .echo-card small{display:none}
  .speedo{top:max(7px,env(safe-area-inset-top));right:max(9px,env(safe-area-inset-right));padding:5px 8px}
  .boost-track{width:72px}
  #itemCard{right:max(9px,env(safe-area-inset-right));top:70px;min-width:105px;padding:5px 7px}
  #itemIcon{width:30px;height:30px;font-size:1rem}
  #minimap{right:max(9px,env(safe-area-inset-right));top:126px;width:70px;height:70px;border-radius:19px}
  .steer{left:max(10px,env(safe-area-inset-left))!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
  .steer button{width:58px;height:58px;border-radius:19px}
  .pedals{right:max(10px,env(safe-area-inset-right))!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
  .pedals #brake{width:60px;height:60px}
  .pedals #gas{width:76px;height:76px}
  #itemBtn{right:calc(max(10px,env(safe-area-inset-right)) + 150px)!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:64px;height:64px}
  #itemBtn small,.pedals button small{font-size:.43rem}
}

@media (orientation:landscape) and (max-width:760px){
  .echo-card{width:200px}
  #itemCard{display:none}
  #minimap{top:72px}
  #itemBtn{right:calc(max(10px,env(safe-area-inset-right)) + 138px)!important}
}

@media (orientation:portrait){
  .race-info{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}
  .speedo{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
  .echo-card{top:74px;width:min(56vw,240px)}
  #itemCard{display:none}
  #minimap{top:132px;right:max(8px,env(safe-area-inset-right));width:72px;height:72px}
  .steer{bottom:max(18px,env(safe-area-inset-bottom))!important}
  .pedals{bottom:max(18px,env(safe-area-inset-bottom))!important}
  #itemBtn{right:max(20px,env(safe-area-inset-right))!important;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 106px)!important}
}


/* Build 0.21 – Visual Foundation: bright stylized 3D mobile-game language */
:root{
  --sky:#27c8ff;--sky-deep:#157fe8;--royal:#6549e8;--royal-dark:#302085;
  --aqua:#40f1d2;--lime:#9bf542;--sun:#ffd83f;--coral:#ff616d;
  --ink:#172754;--cream:#fff9e6;--panel-bright:rgba(54,77,184,.92);
}
body{background:linear-gradient(160deg,#29cfff 0%,#4877ed 46%,#754bd8 100%)}
.world-vignette{background:linear-gradient(90deg,rgba(23,50,126,.42),rgba(20,128,215,.04) 42%,rgba(75,70,201,.04) 70%,rgba(31,42,125,.28)),linear-gradient(0deg,rgba(31,47,118,.3),transparent 50%)}
body.race-active .world-vignette{opacity:.04}
#topbar{background:linear-gradient(180deg,rgba(44,92,218,.9),rgba(61,66,180,.82));border-bottom:3px solid rgba(255,255,255,.7);box-shadow:0 7px 0 rgba(28,46,129,.42),0 16px 35px rgba(20,58,135,.22)}
.brand-mark,.event-icon{background:linear-gradient(145deg,#fff56d,#ffad2f);color:#713600;border-color:#fffbd1;box-shadow:inset 0 -5px 0 rgba(200,89,0,.28),0 5px 0 rgba(88,48,120,.32)}
.menu-copy h1 span{color:#fff;text-shadow:0 5px 0 #315abf,0 9px 18px rgba(20,42,111,.35)}
.menu-copy h1 strong{color:#ffe44d;-webkit-text-stroke:2px #7c3f00;text-shadow:0 6px 0 #b85b00,0 12px 20px rgba(83,33,0,.28)}
.season-pill{background:linear-gradient(#47efd3,#20bede);color:#143167;border-color:#d9fff9;box-shadow:0 5px 0 #157ca7}
.side-nav button,.quick-nav button,.event-card{background:linear-gradient(180deg,rgba(92,106,231,.96),rgba(58,58,181,.96));border-color:#dce7ff;box-shadow:0 7px 0 #29247c,0 13px 26px rgba(26,42,123,.28),inset 0 4px 0 rgba(255,255,255,.24)}
.side-nav button:nth-child(1){background:linear-gradient(#50e8ff,#258ddc)}
.side-nav button:nth-child(2){background:linear-gradient(#a876ff,#6546d9)}
.side-nav button:nth-child(3){background:linear-gradient(#ff7d8e,#d94d8e)}
.nav-icon{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.85)}
.play-button{background:linear-gradient(180deg,#ffe95a,#ff9e2b);color:#642900;border-color:#fffbd0;box-shadow:0 9px 0 #b95013,0 17px 32px rgba(126,53,0,.28),inset 0 5px 0 rgba(255,255,255,.55)}
.panel-screen,.modal{background:linear-gradient(180deg,rgba(78,102,226,.98),rgba(60,47,168,.98));border-color:rgba(255,255,255,.78);box-shadow:0 9px 0 #282479,0 28px 75px rgba(31,42,117,.38)}
.panel-screen label,.selection-preview,.flow-explainer,.control-settings label,#rankingList>div,.card-grid article,#resultStats div{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border:2px solid rgba(255,255,255,.35)}

/* Chunky, bright and readable race HUD */
.race-info,.speedo,#itemCard,.echo-card{
  background:linear-gradient(180deg,rgba(80,105,232,.96),rgba(48,55,171,.96));
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 6px 0 rgba(31,35,119,.72),0 12px 24px rgba(28,44,122,.25),inset 0 3px 0 rgba(255,255,255,.22);
  text-shadow:0 2px 0 rgba(27,37,112,.7)
}
.race-info small,.speedo small,#itemCard small{color:#bffcff}
.echo-track,.boost-track{background:#26317c;border:1px solid rgba(255,255,255,.25)}
.echo-track i{background:linear-gradient(90deg,#45f7dc,#55b9ff,#bb74ff)}
#itemIcon{background:linear-gradient(145deg,#fff56a,#ff9b2c);border-color:#fffde1;color:#723000;box-shadow:inset 0 -5px 0 rgba(181,72,0,.27),0 3px 0 rgba(44,42,117,.35)}
#minimap{background:rgba(48,70,183,.88);border-color:#eaf7ff;box-shadow:0 6px 0 #28368f,0 13px 28px rgba(22,45,118,.25)}

/* Controls: clear toy-like silhouettes, no grey glass */
.control-label{color:#fff;text-shadow:0 2px 0 #263783}
.steer button{background:linear-gradient(180deg,#65d9ff,#3484df);border-color:#e6fbff;color:#fff;box-shadow:0 7px 0 #2651a9,inset 0 4px 0 rgba(255,255,255,.5),0 0 0 2px rgba(32,66,155,.18)}
.pedals #brake{background:linear-gradient(180deg,#aa7cff,#694bdc);border-color:#f2eaff;box-shadow:0 7px 0 #40309d,inset 0 4px 0 rgba(255,255,255,.46)}
.pedals #gas{background:linear-gradient(180deg,#a9f85e,#35d56f);color:#164f34;border-color:#edffd9;box-shadow:0 8px 0 #159756,inset 0 5px 0 rgba(255,255,255,.56),0 0 24px rgba(88,238,135,.3)}
#itemBtn{background:linear-gradient(180deg,#ffe95b,#ff9e2c);border-color:#fffbd2;color:#6a2b00;box-shadow:0 7px 0 #b95112,inset 0 5px 0 rgba(255,255,255,.58)}
.race-intro h2,.modal h2{color:#ffe651;-webkit-text-stroke:2px #7c3e00;text-shadow:0 5px 0 #b75b00,0 10px 18px rgba(56,34,0,.3)}
#wrongWay{background:linear-gradient(#ff7b72,#ef3e64);box-shadow:0 6px 0 #a02353}

@media (orientation:landscape) and (max-height:500px){
  .race-info,.speedo,#itemCard,.echo-card{border-width:2px;box-shadow:0 4px 0 rgba(31,35,119,.72),0 8px 18px rgba(28,44,122,.22)}
}


/* Build 0.26 – stable touch controls and 2026 visual polish */
html,body,#app,#controls,#hud,button,.control-group{overscroll-behavior:none;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}
button,.control-group{touch-action:none!important}
#renderCanvas{filter:saturate(1.12) contrast(1.04)}
body.race-active:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:8;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 25%,transparent 72%,rgba(24,35,105,.12));mix-blend-mode:soft-light}
.race-info,.speedo,#itemCard,.echo-card{background:linear-gradient(165deg,rgba(86,126,245,.95),rgba(54,54,179,.96));border-color:rgba(255,255,255,.95);box-shadow:0 5px 0 #273690,0 12px 26px rgba(24,44,124,.28),inset 0 3px 0 rgba(255,255,255,.3)}
#controls button{filter:drop-shadow(0 8px 10px rgba(20,35,100,.22));backface-visibility:hidden}
#controls button:focus,#controls button:focus-visible{outline:none!important}
.steer button,.pedals button,#itemBtn{border-width:3px}
.steer button:active,.pedals button:active,#itemBtn:active{transform:translateY(3px) scale(.9)!important;filter:brightness(1.18) saturate(1.2)}
@media (orientation:landscape) and (max-height:500px){
 .steer button{width:68px;height:68px}.pedals #brake{width:70px;height:70px}.pedals #gas{width:86px;height:86px}#itemBtn{width:70px;height:70px}
}

/* Build 0.27 – yellow test track, stronger portrait layout and chunky cartoon props */
@media (orientation:portrait){
  #renderCanvas{filter:saturate(1.18) contrast(1.05)}
  .race-info{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));min-width:76px;padding:5px 7px;border-radius:14px}
  .race-info b{font-size:1.05rem}.race-info small{font-size:.42rem}.race-info span{font-size:.48rem}
  .speedo{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));padding:5px 7px;border-radius:14px}
  .speedo b{font-size:1.05rem}.speedo small{font-size:.42rem}.boost-track{width:64px;height:6px}
  .echo-card{top:70px;left:50%;width:min(62vw,230px);padding:6px 8px;border-radius:15px}
  .echo-card strong{font-size:.55rem}.echo-card small{display:none}.echo-track{height:7px;margin:3px 0}
  #minimap{top:120px;right:max(8px,env(safe-area-inset-right));width:64px;height:64px;border-radius:18px;opacity:.88}
  .steer{left:max(10px,env(safe-area-inset-left))!important;bottom:max(18px,env(safe-area-inset-bottom))!important;gap:8px}
  .steer button{width:64px;height:64px;border-radius:21px;font-size:1.2rem}
  .pedals{right:max(10px,env(safe-area-inset-right))!important;bottom:max(18px,env(safe-area-inset-bottom))!important;display:grid;grid-template-columns:64px 82px;align-items:end;gap:8px}
  .pedals #brake{width:64px;height:64px;border-radius:21px}
  .pedals #gas{width:82px;height:82px;border-radius:50%}
  #itemBtn{right:max(18px,env(safe-area-inset-right))!important;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 98px)!important;width:62px;height:62px;border-radius:21px}
  #message{top:25%;max-width:80vw;font-size:.9rem}
}
@media (orientation:portrait) and (max-width:390px){
  .steer button{width:58px;height:58px}.pedals{grid-template-columns:58px 74px}.pedals #brake{width:58px;height:58px}.pedals #gas{width:74px;height:74px}#itemBtn{width:56px;height:56px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 88px)!important}
}


/* Build 0.28 – Kian's Island, analog steering and portrait overview */
.steer-zone{
 position:fixed!important;left:max(12px,env(safe-area-inset-left))!important;bottom:max(14px,env(safe-area-inset-bottom))!important;
 width:clamp(138px,22vw,180px);height:clamp(138px,22vw,180px);z-index:18;touch-action:none!important;
 display:grid;place-items:center;transform:scale(var(--control-scale))!important;transform-origin:left bottom!important;
}
.steer-zone .control-label{top:3px;left:50%;transform:translateX(-50%);white-space:nowrap}
.joystick-base{
 width:clamp(104px,15vw,132px);height:clamp(104px,15vw,132px);border-radius:50%;position:relative;
 background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.34),rgba(94,112,218,.5) 42%,rgba(27,36,112,.7) 72%);
 border:4px solid rgba(229,249,255,.9);box-shadow:0 8px 0 rgba(24,37,112,.7),inset 0 5px 0 rgba(255,255,255,.24),0 0 24px rgba(59,218,255,.3);
 transition:filter .12s ease,transform .12s ease;
}
.joystick-base.active{filter:brightness(1.12) saturate(1.18);transform:scale(.98)}
.joystick-base:after{content:"";position:absolute;inset:18%;border-radius:50%;border:2px dashed rgba(255,255,255,.28)}
.joystick-knob{
 position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23%;border-radius:50%;will-change:transform;
 background:radial-gradient(circle at 35% 27%,#baf9ff,#45c8ff 42%,#4364d9 78%);border:3px solid #efffff;
 box-shadow:0 6px 0 #273c9d,inset 0 4px 0 rgba(255,255,255,.6),0 5px 18px rgba(17,27,94,.45);
 transition:transform .055s linear;
}
@media (orientation:landscape) and (max-height:500px){
 .steer-zone{width:132px;height:132px;bottom:max(6px,env(safe-area-inset-bottom))!important}
 .joystick-base{width:102px;height:102px}
}
@media (orientation:portrait){
 .steer-zone{width:146px;height:146px;left:max(8px,env(safe-area-inset-left))!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
 .joystick-base{width:112px;height:112px}
 #renderCanvas{transform:none!important}
}
@media (orientation:portrait) and (max-width:390px){.steer-zone{width:132px;height:132px}.joystick-base{width:100px;height:100px}}


/* Build 0.29 – reliable safe-area controls and low-passage portrait camera support */
#controls{
  position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;
  min-height:100svh!important;overflow:visible!important;z-index:80!important;pointer-events:none!important;
}
#controls .control-group{pointer-events:auto!important;visibility:visible!important;opacity:var(--control-opacity)!important}
.steer-zone,.pedals,#itemBtn{position:absolute!important;margin:0!important}

/* iPhone 12 Pro Max and similarly short landscape viewports */
@media (orientation:landscape){
  .steer-zone{
    left:calc(env(safe-area-inset-left) + 10px)!important;right:auto!important;
    bottom:calc(env(safe-area-inset-bottom) + 8px)!important;top:auto!important;
    width:clamp(108px,27vh,132px)!important;height:clamp(108px,27vh,132px)!important;
    transform:scale(var(--control-scale))!important;transform-origin:left bottom!important;
  }
  .joystick-base{width:clamp(88px,22vh,106px)!important;height:clamp(88px,22vh,106px)!important}
  .pedals{
    right:calc(env(safe-area-inset-right) + 10px)!important;left:auto!important;
    bottom:calc(env(safe-area-inset-bottom) + 8px)!important;top:auto!important;
    display:flex!important;align-items:flex-end!important;gap:8px!important;
    transform:scale(var(--control-scale))!important;transform-origin:right bottom!important;
  }
  .pedals #brake{width:clamp(56px,15vh,66px)!important;height:clamp(56px,15vh,66px)!important}
  .pedals #gas{width:clamp(70px,19vh,82px)!important;height:clamp(70px,19vh,82px)!important}
  #itemBtn{
    right:calc(env(safe-area-inset-right) + clamp(142px,37vh,168px))!important;left:auto!important;
    bottom:calc(env(safe-area-inset-bottom) + 10px)!important;top:auto!important;
    width:clamp(58px,16vh,68px)!important;height:clamp(58px,16vh,68px)!important;
    transform:scale(var(--control-scale))!important;transform-origin:right bottom!important;
  }
  .control-label{font-size:.43rem!important;top:-12px!important}
}

@media (orientation:landscape) and (max-height:390px){
  .steer-zone{width:104px!important;height:104px!important}.joystick-base{width:84px!important;height:84px!important}
  .pedals #brake{width:52px!important;height:52px!important}.pedals #gas{width:66px!important;height:66px!important}
  #itemBtn{width:54px!important;height:54px!important;right:calc(env(safe-area-inset-right) + 128px)!important}
  #itemBtn small,.pedals small{display:none!important}
}

@media (orientation:portrait){
  #controls{height:100svh!important}
  .steer-zone{left:calc(env(safe-area-inset-left) + 8px)!important;bottom:calc(env(safe-area-inset-bottom) + 12px)!important}
  .pedals{right:calc(env(safe-area-inset-right) + 8px)!important;bottom:calc(env(safe-area-inset-bottom) + 12px)!important}
  #itemBtn{right:calc(env(safe-area-inset-right) + 16px)!important;bottom:calc(env(safe-area-inset-bottom) + 108px)!important}
}

/* Build 0.30 – fixed camera, 20% larger controls, stronger spacing */
:root{--control-scale:1}
@media (orientation:landscape){
  .steer-zone{
    width:clamp(130px,32vh,158px)!important;height:clamp(130px,32vh,158px)!important;
    left:calc(env(safe-area-inset-left) + 14px)!important;bottom:calc(env(safe-area-inset-bottom) + 10px)!important;
  }
  .joystick-base{width:clamp(106px,26vh,128px)!important;height:clamp(106px,26vh,128px)!important}
  .pedals{right:calc(env(safe-area-inset-right) + 14px)!important;bottom:calc(env(safe-area-inset-bottom) + 10px)!important;gap:clamp(16px,4vw,28px)!important}
  .pedals #brake{width:clamp(68px,18vh,80px)!important;height:clamp(68px,18vh,80px)!important}
  .pedals #gas{width:clamp(84px,23vh,100px)!important;height:clamp(84px,23vh,100px)!important}
  #itemBtn{right:calc(env(safe-area-inset-right) + clamp(190px,49vh,228px))!important;bottom:calc(env(safe-area-inset-bottom) + 12px)!important;width:clamp(70px,19vh,82px)!important;height:clamp(70px,19vh,82px)!important}
}
@media (orientation:landscape) and (max-height:390px){
  .steer-zone{width:120px!important;height:120px!important}.joystick-base{width:96px!important;height:96px!important}
  .pedals{gap:14px!important}.pedals #brake{width:62px!important;height:62px!important}.pedals #gas{width:78px!important;height:78px!important}
  #itemBtn{width:64px!important;height:64px!important;right:calc(env(safe-area-inset-right) + 166px)!important}
}
@media (orientation:portrait){
  .steer-zone{width:176px!important;height:176px!important}.joystick-base{width:134px!important;height:134px!important}
  .pedals{gap:18px!important;grid-template-columns:78px 100px!important}
  .pedals #brake{width:78px!important;height:78px!important}.pedals #gas{width:100px!important;height:100px!important}
  #itemBtn{width:76px!important;height:76px!important;bottom:calc(env(safe-area-inset-bottom) + 132px)!important;right:calc(env(safe-area-inset-right) + 18px)!important}
}
\n\n/* Build 0.32 – analog steering feedback and high-resolution test rendering */\n#renderCanvas{image-rendering:auto!important;filter:saturate(1.04) contrast(1.02)}\n.joystick-base{\n --steer-strength:0;--steer-direction:0;\n filter:brightness(calc(1 + var(--steer-strength)*.22)) saturate(calc(1 + var(--steer-strength)*.38));\n box-shadow:0 8px 0 rgba(24,37,112,.7),inset 0 5px 0 rgba(255,255,255,.24),0 0 calc(24px + var(--steer-strength)*22px) rgba(59,218,255,calc(.3 + var(--steer-strength)*.45))!important;\n}\n.joystick-base.active:before{\n content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;\n border:4px solid rgba(104,240,255,calc(.28 + var(--steer-strength)*.65));\n transform:scale(calc(1 + var(--steer-strength)*.08));\n opacity:calc(.38 + var(--steer-strength)*.62);\n}\n.joystick-knob{transition:none!important}\n
/* v0.35 – Kian's Island stone/forest visual pass */
body{background:radial-gradient(circle at 50% 18%,#31561c 0,#123b20 38%,#061d11 72%,#020b07 100%)}
body.race-active .world-vignette{opacity:.12;background:linear-gradient(90deg,rgba(2,18,9,.4),transparent 34%,transparent 70%,rgba(2,18,9,.42)),linear-gradient(0deg,rgba(2,15,8,.28),transparent 45%)}
#message{
 top:22%!important;
 max-width:min(72vw,520px)!important;
 padding:.48rem .9rem!important;
 border:2px solid rgba(255,224,83,.88)!important;
 border-radius:999px!important;
 background:rgba(8,37,20,.86)!important;
 box-shadow:0 5px 0 rgba(20,50,18,.7),0 10px 24px rgba(0,0,0,.32)!important;
 font-size:clamp(.78rem,2.2vw,1.25rem)!important;
 line-height:1.05!important;
 letter-spacing:.04em!important;
 white-space:nowrap;
 text-shadow:0 2px 0 #17320d,0 4px 10px #000!important;
 color:#fff4a8!important;
}
@keyframes messagePunch{0%{transform:translateX(-50%) scale(.72);opacity:0}65%{transform:translateX(-50%) scale(1.05);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
@media (orientation:portrait){#message{top:19%!important;max-width:78vw!important;font-size:clamp(.76rem,3.4vw,1.05rem)!important}}

/* Build 0.42 performance telemetry */
#perfMonitor{position:absolute;z-index:55;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;gap:2px 8px;padding:7px 9px;border:1px solid rgba(205,255,109,.48);border-radius:10px;background:rgba(4,20,10,.72);backdrop-filter:blur(5px);color:#dfff9a;font:700 10px/1.15 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.28)}
#perfMonitor b{font-size:13px;color:#fff16a}#perfMonitor span{white-space:nowrap}#perfMonitor.perf-warn{border-color:#ffd85b;color:#ffe89b}#perfMonitor.perf-bad{border-color:#ff6f6f;color:#ffb2a8}#perfMonitor.perf-bad b{color:#ff7777}
@media(max-width:520px),(max-height:440px){#perfMonitor{font-size:8px;padding:5px 6px;gap:1px 5px}#perfMonitor b{font-size:11px}}

/* Build 0.45 – unified yellow main-menu buttons */
#menu .side-nav button,
#menu .quick-nav button{
  background:linear-gradient(180deg,#ffe95a,#ff9e2b);
  color:#642900;
  border-color:#fffbd0;
  box-shadow:0 9px 0 #b95013,0 17px 32px rgba(126,53,0,.28),inset 0 5px 0 rgba(255,255,255,.55);
}
#menu .side-nav small,
#menu .quick-nav small{color:#783500}