:root{
  color-scheme:dark;
  --bg:#090f1e;--panel:#111a2b;--muted:#91a0b8;--line:rgba(255,255,255,.11);
  --amber:#fbbf24;--orange:#f97316;--green:#22c55e;--red:#e11d48;--indigo:#4f46e5;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0}
html,body{overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{position:fixed;inset:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
button,a{font:inherit}
button{border:0;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
.screen{position:fixed;inset:0;overflow:hidden}
.menu{background:radial-gradient(circle at 78% 14%,rgba(251,191,36,.30),transparent 24%),radial-gradient(circle at 20% 24%,rgba(56,189,248,.30),transparent 28%),linear-gradient(155deg,#13233d 0%,#243f61 30%,#473729 55%,#101625 78%,#050813 100%)}
.menu-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(2,6,23,.94),transparent 44%),linear-gradient(to bottom,rgba(2,6,23,.22),rgba(2,6,23,.08) 42%,rgba(2,6,23,.5));overflow:hidden}
.menu-shade:before,.menu-shade:after{content:"";position:absolute;left:-10%;right:-10%;border-radius:50% 50% 0 0/100% 100% 0 0;background:rgba(9,18,28,.76);transform:rotate(-3deg)}
.menu-shade:before{height:33%;bottom:13%;clip-path:polygon(0 72%,9% 48%,19% 61%,31% 31%,41% 54%,55% 21%,66% 48%,78% 26%,89% 51%,100% 34%,100% 100%,0 100%)}
.menu-shade:after{height:28%;bottom:-2%;background:#060a12;clip-path:polygon(0 50%,12% 35%,22% 58%,34% 24%,49% 56%,61% 30%,74% 61%,87% 32%,100% 53%,100% 100%,0 100%)}
.menu-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(26px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom))}
.brand-chip{position:absolute;left:14px;top:calc(12px + env(safe-area-inset-top));padding:8px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(3,7,18,.45);backdrop-filter:blur(10px);font-size:12px;font-weight:800;letter-spacing:.08em}
.mute-floating{position:absolute;right:14px;top:calc(11px + env(safe-area-inset-top));width:44px;height:44px;border-radius:50%;background:rgba(3,7,18,.48);backdrop-filter:blur(10px);font-size:20px}
.hero{text-align:center;margin-top:28px;max-width:760px}
.hero-bike{font-size:clamp(48px,8vw,72px);filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));animation:float 4.5s ease-in-out infinite}
.hero h1{margin:4px 0 0;font-size:clamp(38px,8vw,62px);line-height:.98;font-weight:950;letter-spacing:-.055em;text-shadow:0 8px 22px rgba(0,0,0,.35)}
.hero h1 span{color:#fbbf24}
.hero p{margin:12px auto 0;max-width:620px;color:rgba(255,255,255,.83);font-weight:650;font-size:clamp(14px,2.5vw,17px)}
.stats{display:inline-flex;margin-top:14px;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);color:#fde68a;font-size:13px;font-weight:800}
.menu-actions{width:min(340px,90vw);display:grid;gap:10px}
.btn{min-height:48px;border-radius:16px;padding:12px 18px;font-weight:850;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .08s ease,filter .15s ease}
.btn:active{transform:scale(.97)}
.btn.primary{min-height:58px;font-size:21px;color:#141414;background:linear-gradient(#fde047,#f97316);box-shadow:0 16px 35px rgba(249,115,22,.24)}
.btn.green{background:linear-gradient(#4ade80,#16a34a);color:#fff}
.btn.danger{background:linear-gradient(#fb7185,#e11d48);color:#fff}
.btn.secondary{background:rgba(255,255,255,.10);color:#fff}
.menu-foot{font-size:11px;color:rgba(255,255,255,.48);text-align:center}
.panel-screen{background:radial-gradient(circle at 50% -30%,#26355b 0,#111827 45%,#080d1a 100%);display:flex;flex-direction:column}
.panel-head{display:flex;align-items:center;gap:12px;padding:calc(13px + env(safe-area-inset-top)) 14px 12px;flex:0 0 auto}
.icon-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.09);font-size:20px}
.panel-head h2{margin:0;font-size:25px}
.panel-head p{margin:2px 0 0;color:var(--muted);font-size:12px;font-weight:700}
.scroll{flex:1;overflow:auto;padding:4px 14px calc(22px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.level-grid{width:min(520px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.level-card{text-align:left;min-height:126px;border-radius:18px;padding:14px;background:linear-gradient(#182236,#101827);box-shadow:inset 0 0 0 1px var(--line),0 9px 24px rgba(0,0,0,.2)}
.level-card:active:not(:disabled){transform:scale(.98)}
.level-card:disabled{opacity:.45}
.level-top{display:flex;align-items:center;justify-content:space-between;font-size:26px;font-weight:900}
.level-title{margin-top:3px;font-size:14px;font-weight:900}
.level-stars{margin-top:5px;font-size:14px}
.level-meta{margin-top:5px;font-size:11px;color:#8ea0b9;font-weight:700}
.dim{opacity:.2;filter:grayscale(1)}
.how-list{width:min(520px,100%);margin:0 auto;display:grid;gap:10px}
.how-card{display:flex;gap:14px;align-items:center;padding:14px;border-radius:18px;background:rgba(30,41,59,.72);box-shadow:inset 0 0 0 1px var(--line)}
.how-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(99,102,241,.18);font-size:27px;flex:0 0 auto}
.how-card b{display:block;font-size:15px}.how-card p{margin:3px 0 0;color:#a9b5c8;font-size:13px;line-height:1.35}
.game-screen{background:#000}
.game-screen canvas{position:absolute;inset:0;display:block;touch-action:none}
.game-top{position:absolute;z-index:20;right:8px;top:calc(8px + env(safe-area-inset-top));display:flex;gap:7px}
.game-top .icon-btn{background:rgba(0,0,0,.42);backdrop-filter:blur(8px)}
.controls{position:absolute;z-index:20;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 12px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
.ctrl{pointer-events:auto;display:grid;place-items:center;border-radius:50%;font-weight:900;color:white;box-shadow:0 10px 28px rgba(0,0,0,.3);touch-action:none}
.ctrl:active{transform:scale(.91)}
.ctrl-left-group{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tilt-row{display:flex;gap:10px}
.ctrl.tilt{width:62px;height:62px;background:rgba(79,70,229,.84);font-size:24px}
.ctrl.brake{width:78px;height:78px;background:rgba(225,29,72,.86);font-size:29px}
.ctrl.gas{width:96px;height:96px;background:linear-gradient(#4ade80,#16a34a);font-size:20px;box-shadow:0 0 0 4px rgba(74,222,128,.2),0 12px 30px rgba(0,0,0,.3)}
.desktop-hint{position:absolute;z-index:10;left:50%;bottom:8px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.35);font-size:11px;color:rgba(255,255,255,.72);white-space:nowrap}
.overlay{position:absolute;z-index:40;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.68);backdrop-filter:blur(4px)}
.modal{width:min(370px,100%);border-radius:25px;padding:22px;background:linear-gradient(#111b2f,#080e1b);box-shadow:0 25px 80px rgba(0,0,0,.45),inset 0 0 0 1px var(--line);text-align:center;animation:pop .38s cubic-bezier(.34,1.56,.64,1)}
.modal .emoji{font-size:48px}.modal h2{margin:7px 0 2px;font-size:30px}.modal p{margin:0;color:#9ba9bd;font-size:13px}
.result-stars{display:flex;justify-content:center;gap:6px;margin:12px 0;font-size:43px}
.result-meta{display:inline-block;margin:2px 0 14px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.08);font-weight:750;font-size:13px}
.modal-actions{display:grid;gap:9px}
.orientation-tip{position:absolute;z-index:28;left:50%;top:calc(66px + env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:88vw;padding:8px 12px;border-radius:999px;background:rgba(3,7,18,.72);backdrop-filter:blur(8px);font-size:12px;font-weight:800;color:#fde68a;animation:tipfade 4.8s both;pointer-events:none}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes pop{0%{transform:scale(.7) translateY(20px);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes tipfade{0%,75%{opacity:1}100%{opacity:0}}
@media (pointer:fine){.controls{opacity:.18}.controls:hover{opacity:1}}
@media (max-height:570px) and (orientation:landscape){.menu-content{padding-top:14px;padding-bottom:10px}.hero{margin-top:3px}.hero-bike{font-size:36px}.hero h1{font-size:38px}.hero p{display:none}.stats{margin-top:8px;padding:5px 10px}.menu-actions{grid-template-columns:1.35fr 1fr 1fr;width:min(720px,82vw);gap:8px}.btn{min-height:42px;padding:8px 12px}.btn.primary{min-height:46px;font-size:17px}.menu-foot{display:none}.ctrl.tilt{width:54px;height:54px}.ctrl.brake{width:66px;height:66px}.ctrl.gas{width:82px;height:82px;font-size:17px}}
@media (max-width:380px){.level-grid{gap:8px}.level-card{padding:12px}.hero h1{font-size:38px}}