:root{
  --ink:#2a1a10; --ink2:#3a2416; --ink3:#4a2e1b;
  --brass:#d4a24a; --brass-d:#a9772a; --sand:#f5e3bd; --sand-d:#d9b36c;
  --rose:#c25a4a; --good:#8fcf6f;
  --font:"Trebuchet MS","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --display:Georgia,"Times New Roman","Noto Naskh Arabic",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--sand);font-family:var(--font);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;-webkit-user-select:none;user-select:none}
button:focus-visible{outline:3px solid #ffe29a;outline-offset:2px}
.hidden{display:none!important}

#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--ink);overflow:hidden}

/* HUD */
.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;align-items:center;padding:6px 8px;
  background:linear-gradient(#35200f,#271509);border-bottom:1px solid rgba(212,162,74,.5);color:var(--sand);z-index:5;flex:0 0 auto}
.stat{display:flex;flex-direction:column;min-width:0;padding:3px 9px;border-radius:12px;background:linear-gradient(180deg,rgba(255,226,160,.16),rgba(255,226,160,.05));color:var(--sand);box-shadow:inset 0 0 0 1px rgba(242,199,119,.25)}
.lbl{font-size:10.5px;line-height:1.3;color:#ffc766;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[lang=en] .lbl{text-transform:uppercase;letter-spacing:.06em}
.val{font-size:20px;line-height:1.2;font-weight:800;color:#fff1cf;font-variant-numeric:tabular-nums;white-space:nowrap}
.val.warn{color:#ff9a80;animation:pulse .7s ease-in-out infinite alternate}
.hudbtns{display:flex;gap:6px}
.ibtn{width:44px;height:44px;border-radius:12px;background:linear-gradient(180deg,#5a3a22,#3a2314);color:#f2c777;border:1px solid rgba(242,199,119,.45);
  display:grid;place-items:center;font-weight:800;font-size:13px;padding:0}
.ibtn:active{transform:scale(.94);background:#5b3a22}
.snd .off{display:none}.snd.muted .on{display:none}.snd.muted .off{display:block}

/* Stage */
.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#e8a578}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.radar{position:absolute;top:8px;inset-inline-end:8px;width:92px;height:92px;pointer-events:none;border-radius:50%;
  box-shadow:0 2px 10px rgba(30,10,0,.45)}
.hint{position:absolute;top:10px;inset-inline-start:10px;max-width:calc(100% - 124px);padding:8px 12px;border-radius:12px;
  background:rgba(38,20,10,.78);color:var(--sand);font-size:13px;line-height:1.45;border:1px solid rgba(212,162,74,.4);pointer-events:none}
.banner{position:absolute;inset-inline:0;top:22%;text-align:center;pointer-events:none;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.banner .bt{display:inline-block;font-family:var(--display);font-size:clamp(34px,9vw,60px);font-weight:800;color:#fff0c8;
  text-shadow:0 3px 0 #7a4a18,0 6px 18px rgba(60,20,0,.6)}
.banner .bs{margin-top:6px;font-size:clamp(14px,3.6vw,20px);color:#fff0c8;text-shadow:0 2px 8px rgba(60,20,0,.8);padding:0 16px}
.toast{position:absolute;inset-inline:0;bottom:14px;margin-inline:auto;width:max-content;max-width:calc(100% - 24px);padding:9px 16px;
  border-radius:999px;background:rgba(38,20,10,.88);color:#fff1cf;font-weight:700;font-size:15px;border:1px solid var(--brass);
  pointer-events:none;animation:pop .3s ease-out;text-align:center}
.toast.bad{border-color:#ff8a70;color:#ffd3c8}

/* Dock */
.dock{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(#2c180d,#1e0f07);border-top:1px solid rgba(212,162,74,.5);z-index:5}
.grp{display:flex;align-items:center;gap:10px}
.pad{width:76px;height:76px;border-radius:50%;border:2px solid var(--brass);padding:0;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,#86582f,#4a2d18 55%,#2f1a0e 100%);color:#f2c777;touch-action:none;
  box-shadow:0 5px 0 #1a0c05,0 10px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,225,160,.3);transition:transform .08s,box-shadow .08s,background .08s}
.pad.gas{width:92px;height:92px;background:radial-gradient(circle at 35% 28%,#ffe08e,#e2a940 55%,#a9772a 100%);color:#2a1608;border-color:#fff0b8;box-shadow:0 5px 0 #6b3f12,0 0 26px rgba(255,190,80,.5),inset 0 1px 0 rgba(255,250,210,.7)}
.pad.brake{width:62px;height:62px;color:#ffb9a8;border-color:#d99a8a}
.pad.down{transform:translateY(4px) scale(.96);box-shadow:0 1px 0 #1a0c05,0 3px 8px rgba(0,0,0,.4);background:radial-gradient(circle at 35% 30%,#9a6a38,#5a3820)}
.pad.gas.down{background:radial-gradient(circle at 35% 30%,#ffd983,#c58c33)}

/* Overlays */
.overlay{position:absolute;inset:0;z-index:20;display:flex;overflow-y:auto;padding:14px;
  background:rgba(34,16,8,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.panel{margin:auto;width:100%;max-width:430px;padding:22px 20px;border-radius:22px;text-align:center;color:var(--sand);
  background:linear-gradient(180deg,#4a2f1d,#2e1c12);border:1px solid rgba(212,162,74,.7);
  box-shadow:0 0 60px rgba(255,170,70,.25),0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,225,160,.35);animation:pop .35s ease-out}
.panel.small{max-width:360px}
.logo{font-family:var(--display);font-size:clamp(40px,12vw,60px);font-weight:800;line-height:1.1;color:#f2c46a;text-shadow:0 3px 0 #6b3f12,0 0 22px rgba(255,190,90,.35)}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .logo{background:linear-gradient(#fff0b8,#d4a24a 70%,#b9802b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #6b3f12) drop-shadow(0 0 14px rgba(255,190,90,.35))}
}
.logo.sm{font-size:40px}
.sub{font-family:var(--display);font-size:26px;font-weight:700;color:#f2d08a;margin-top:2px;text-shadow:0 0 14px rgba(255,190,90,.25)}
.tag{margin:10px 0 12px;color:#f0dcae;font-size:16px;line-height:1.6}
h2{font-family:var(--display);font-size:30px;margin:0 0 10px;color:#f7dc9d}
h2.bad{color:#ff9a80}h2.gold{color:#ffd877}
.muted{color:#e3cfa3;line-height:1.6;margin:6px 0 14px;font-size:15px}
.how{list-style:none;margin:0 0 12px;padding:0;text-align:start;display:grid;gap:6px}
.how li{padding:8px 12px;background:rgba(255,235,190,.07);border-radius:12px;font-size:14.5px;line-height:1.5;color:#f5e3bd;box-shadow:inset 0 0 0 1px rgba(255,200,120,.12),inset 4px 0 0 #d4a24a}
html[dir=rtl] .how li{box-shadow:inset 0 0 0 1px rgba(255,200,120,.12),inset -4px 0 0 #d4a24a}
.best-row{display:flex;justify-content:center;gap:10px;align-items:baseline;margin:8px 0 14px;color:#e3bd75}
.best-row b{font-size:26px;color:#fff1cf}
.btn{min-height:48px;padding:12px 22px;border-radius:14px;border:1px solid var(--brass);font-weight:800;font-size:16px;
  transition:transform .1s,filter .1s}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(#f6cd70,#c0882d);color:#2a1608;border-color:#ffe29a;box-shadow:0 4px 0 #6b3f12,inset 0 1px 0 rgba(255,250,210,.75),inset 0 -2px 6px rgba(150,90,20,.35);animation:glowPulse 2.4s ease-in-out infinite}
.btn.ghost{background:linear-gradient(180deg,#5c3b23,#3d2515);color:var(--sand);border-color:#e0b35c;box-shadow:inset 0 1px 0 rgba(255,225,160,.22)}
.btn.ghost:active{background:linear-gradient(180deg,#8a5d2c,#6a4520);color:#fff1cf;border-color:#ffd98a}
@media (hover:hover){.btn.ghost:hover{background:linear-gradient(180deg,#76502b,#52331c);border-color:#ffd98a;color:#fff1cf}}
.btn.big{width:100%;font-size:19px;min-height:56px;margin-bottom:10px}
.btn.wide{width:100%;margin-top:6px}
.row{display:flex;gap:10px;justify-content:center;margin-top:4px}
.row .btn{flex:1;max-width:150px;display:grid;place-items:center}
.keys{margin:12px 0 0;font-size:12.5px;color:#d5bd8a;line-height:1.6}
.rows{display:grid;gap:6px;margin:6px 0 16px;text-align:start}
.rrow{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;background:rgba(255,235,190,.07);color:var(--sand);font-size:15px}
.rrow b{font-variant-numeric:tabular-nums;color:#fff1cf}
.rrow.neg b{color:#ff9a80}.rrow.pos b{color:var(--good)}
.rrow.total{background:rgba(212,162,74,.22);font-size:18px}
.rrow.best{background:rgba(143,207,111,.2);color:#dff6cf;justify-content:center;font-weight:800}
.bar{height:10px;border-radius:99px;background:rgba(255,235,190,.15);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:6%;background:linear-gradient(90deg,#d4a24a,#ffe29a);transition:width .25s}

@keyframes pop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{from{opacity:1}to{opacity:.55}}
@keyframes glowPulse{
  from{box-shadow:0 4px 0 #6b3f12,inset 0 1px 0 rgba(255,250,210,.75),inset 0 -2px 6px rgba(150,90,20,.35),0 0 0 0 rgba(255,190,80,0)}
  to{box-shadow:0 4px 0 #6b3f12,inset 0 1px 0 rgba(255,250,210,.75),inset 0 -2px 6px rgba(150,90,20,.35),0 0 26px 3px rgba(255,190,80,.55)}
}

@media (max-width:430px){
  .radar{width:84px;height:84px}
  .logo{font-size:44px}
}
@media (min-width:900px){
  .radar{width:140px;height:140px;top:12px;inset-inline-end:12px}
  .hud{padding:10px 18px;gap:12px}
  .logo{line-height:.95}
  .val{font-size:24px}
  .dock{padding:10px 28px}
}
@media (max-height:520px){
  .hud{padding:4px 8px}
  .stat{padding:1px 8px}.val{font-size:17px}
  .ibtn{width:40px;height:40px}
  .dock{padding:6px 12px}
  .pad{width:60px;height:60px}.pad.gas{width:72px;height:72px}.pad.brake{width:52px;height:52px}
  .pad svg{transform:scale(.8)}
  .radar{width:76px;height:76px}
  [data-meeem-game-detail]{display:none!important}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}