:root{
  --bg:#0B0B0E; --panel:#17171B; --panel2:#1F1F25; --line:#2A2A31;
  --text:#FFFFFF; --mute:#8D8D98; --acc:#FF7A1A; --off:#23232A;
  --font:Inter,-apple-system,"SF Pro Text","Segoe UI",system-ui,"IBM Plex Sans Arabic","Noto Sans Arabic",sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html[lang=ar]{--font:"IBM Plex Sans Arabic","SF Arabic",system-ui,"Noto Sans Arabic",Inter,sans-serif}
html{height:100%;background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,#stage:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
#app{height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;position:relative}

header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 0}
@media (max-width:389px){.hr{gap:8px}.emo,.row .fl,.pick .fl,#laneDot,#laneTgt{font-family:"Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji",sans-serif;font-weight:400;font-style:normal}
.brandimg{height:30px}}
.brandimg{height:34px;width:auto;display:block;direction:ltr}
.hr{display:flex;align-items:center;gap:12px}
.lang{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--mute)}
.lang button{color:var(--mute);padding:6px 2px;min-height:32px}
.lang button[aria-pressed=true]{color:var(--text)}
.chip{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 9px;min-height:28px}
.icon{width:32px;height:32px;display:grid;place-items:center;color:var(--mute);border-radius:50%}
.icon[aria-pressed=true]{color:var(--acc)}

#toasts{position:absolute;top:56px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:5}
.toast{background:rgba(23,23,27,.94);border:1px solid var(--line);padding:9px 15px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;animation:tIn .25s ease-out,tOut .35s ease-in 2.7s forwards}
.toast.hot{border-color:var(--acc)}
@keyframes tIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(-6px)}}

.info{text-align:center;padding:clamp(6px,2vh,20px) 14px 0}
.label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.12em;color:#E8E8EE;padding:8px 10px;min-height:36px;text-transform:uppercase}
#count{font-size:clamp(40px,14.2vw,74px);font-weight:800;letter-spacing:-.03em;line-height:1.08;font-variant-numeric:tabular-nums;direction:ltr}
.sub{margin-top:8px;height:26px;font-size:16px;font-weight:700;color:var(--mute);display:flex;justify-content:center;gap:12px;align-items:baseline}
#combo{color:var(--acc);font-weight:800;opacity:0;transition:opacity .25s}
#combo.on{opacity:1}
#combo.pop{animation:cpop .12s ease-out}
@keyframes cpop{from{transform:scale(1.35)}to{transform:scale(1)}}

#stage{flex:1;min-height:0;position:relative;touch-action:manipulation;cursor:pointer;margin-top:4px}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hint{position:absolute;bottom:4px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
#hintTap{font-size:16px;font-weight:700;color:var(--mute)}
#notIn{pointer-events:auto;font-size:12px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;padding:6px 10px;min-height:32px}

.dock{margin:2px 14px 0;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px 16px 4px}
.race{display:flex;flex-direction:column;gap:8px}
.lane{display:flex;align-items:center;gap:12px;direction:ltr}
.trackw{position:relative;flex:1;height:30px;margin:0 13px}
.track{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:3px;background:#2A2A31;overflow:hidden}
#laneFill{position:absolute;inset:0 auto 0 0;width:3%;background:var(--acc);border-radius:3px;transition:width .45s cubic-bezier(.2,.8,.2,1)}
#laneDot{position:absolute;top:0;left:3%;font-size:24px;line-height:30px;transform:translateX(-50%);transition:left .45s cubic-bezier(.2,.8,.2,1)}
.tgt{font-size:26px;line-height:1;flex:none}
.rtxt{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpace{font-size:13px;font-weight:500;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{display:grid;grid-template-columns:1fr 1.25fr 22px;gap:12px;align-items:center;width:100%;text-align:start;border-top:1px solid var(--line);margin-top:10px;padding:10px 0 8px}
.sc{display:flex;flex-direction:column;gap:1px;min-width:0}
.sc small{font-size:12px;color:var(--mute);font-weight:500}
.sc b{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc em{font-style:normal;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats svg{color:var(--mute)}
.vol{display:flex;align-items:center;gap:14px;padding:4px 6px 16px}
.vol label{font-size:14px;font-weight:700;color:#E8E8EE;flex:none}
.vol input{flex:1;min-width:0;height:36px;accent-color:var(--acc);margin:0;touch-action:pan-y}
.vol output{min-width:44px;text-align:end;font-size:14px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.outline.solid{background:var(--acc);color:#0B0B0E}
.prev .rowb{flex-wrap:wrap;justify-content:center}
.ms{position:relative;display:flex;align-items:center;gap:9px;width:100%;margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:13px;font-weight:700;text-align:start;overflow:hidden;min-height:40px}
@media (max-height:760px){.rpace{display:none}.dock{padding-top:12px}.adwrap{padding:6px 14px 8px}}
.ms>svg{flex:none;color:var(--acc)}
.ms>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms em{font-style:normal;color:var(--mute);font-weight:500}
.ms i{position:absolute;inset-inline-start:0;bottom:0;height:3px;background:var(--acc);width:0;transition:width .5s}
#crown{flex:none;color:var(--acc)}
.hs{margin:16px 10px 6px;font-size:12px;color:var(--mute);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hrow{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;min-height:60px;padding:6px 10px;border-bottom:1px solid var(--line)}
.hrow b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.hrow .who{font-size:15px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .when{display:block;font-size:12px;color:var(--mute);font-weight:500;white-space:normal}
.hrow .st{font-size:12px;font-weight:700;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.hrow.me{outline:1.5px solid var(--acc);outline-offset:-1.5px;border-radius:12px}
.hrow svg{color:var(--acc);margin-inline-start:6px}
.hnote{padding:10px;font-size:13px;color:var(--mute);line-height:1.5}
.snrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:58px;padding:6px 10px;border-bottom:1px solid var(--line);text-align:start}
.snrow b{display:block;font-size:16px;font-weight:700}
.snrow span{font-size:13px;color:var(--mute)}
.snrow i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);flex:none}
.snrow[aria-checked=true] b{color:var(--acc)}
.snrow[aria-checked=true] i{border-color:var(--acc);background:var(--acc)}
.adwrap{padding:10px 14px 12px}
.adl{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mute);margin-bottom:6px}
.adl::before,.adl::after{content:"";flex:1;height:1px;background:var(--line)}
.ad{height:50px;max-width:320px;margin:0 auto;background:#2A2A31;color:var(--mute);display:grid;place-items:center;font-size:14px;border-radius:2px}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;max-height:80%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.8,.2,1);z-index:21;padding:0 16px calc(14px + env(safe-area-inset-bottom,0px));visibility:hidden}
.sheet.on{transform:none;visibility:visible}
.sheet.drag{transition:none}
.grab{padding:10px 0 12px;cursor:grab;touch-action:none;display:grid;place-items:center}
.grab::before{content:"";width:40px;height:4px;border-radius:2px;background:#3A3A43}
.shead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px}
.tabs{display:flex;gap:18px}
.tabs button{font-weight:800;font-size:14px;letter-spacing:.08em;color:var(--mute);padding:8px 0;border-bottom:2px solid transparent;min-height:40px}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--acc)}
.outline{border:1.5px solid var(--acc);color:var(--acc);font-weight:800;font-size:13px;letter-spacing:.06em;padding:9px 16px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center;gap:8px}
.list{overflow:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:120px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:34px 30px 1fr auto 46px;align-items:center;gap:8px;padding:0 10px;height:50px;border-bottom:1px solid var(--line);font-size:15px;font-variant-numeric:tabular-nums}
.row .rk{color:var(--mute);font-weight:700}
.row .fl{font-size:21px}
.row .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tt{font-weight:500;color:#E8E8EE}
.row .ch{font-size:12px;color:var(--mute);text-align:end;font-weight:700}
.row.me{outline:1.5px solid var(--acc);outline-offset:-1.5px;border-radius:12px;background:rgba(255,122,26,.07)}
.sfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;font-size:14px;color:#D5D5DC}
.sfoot b{color:var(--text)}
.link{color:var(--mute);text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:8px 4px;min-height:36px}
.sheet h2{margin:0;font-size:16px;font-weight:800;padding-bottom:10px}
.search{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;font-size:16px;padding:13px 14px;margin-bottom:10px;-webkit-user-select:text;user-select:text}
.pick{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;width:100%;height:50px;padding:0 10px;border-bottom:1px solid var(--line);text-align:start;font-size:16px;font-weight:700}
.pick .fl{font-size:21px}
.pick[aria-current=true]{color:var(--acc)}
.prev{position:fixed;inset:0;z-index:45;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(8,8,10,.98);padding:20px}
.prev.on{display:flex}
.prev img{max-height:66%;max-width:86%;border-radius:14px;border:1px solid var(--line);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;pointer-events:auto}
.prev p{margin:0;color:var(--mute);font-size:14px;text-align:center}
.prev .rowb{display:flex;gap:12px}
@media (prefers-reduced-motion:reduce){.toast{animation:tIn .01s,tOut .01s 2.7s forwards}.sheet{transition:none}#combo.pop{animation:none}}
.inv{padding:4px 10px 12px;text-align:center}
.inv .big{font-size:44px;line-height:1.1;margin:8px 0 2px}
.inv h3{margin:0;font-size:24px;font-weight:800}
.inv p{margin:8px 0;color:#D5D5DC;font-size:15px;line-height:1.5}
.inv .rowb{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}
#net{border-color:var(--acc);color:var(--acc)}
#net[hidden]{display:none}
.nojs{padding:40px 20px;text-align:center;color:var(--mute)}

.clk{min-height:16px;margin-top:2px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mute);text-align:center;text-transform:uppercase}
.clk.soon{color:var(--text)}
.clk.urgent{color:var(--acc);animation:clkp 1s ease-in-out infinite}
@keyframes clkp{50%{opacity:.55}}
.race.battle .rtxt{color:var(--acc);letter-spacing:.02em}
.race.battle .track{box-shadow:0 0 0 1px var(--acc),0 0 14px rgba(255,122,26,.45)}
#combo.tier{text-shadow:0 0 14px var(--acc);transform:scale(1.25)}
#shareBtn.hot{border-color:var(--acc);color:var(--acc);animation:shp 1.1s ease-in-out infinite}
@keyframes shp{50%{box-shadow:0 0 0 5px rgba(255,122,26,.22)}}
@media (prefers-reduced-motion:reduce){.clk.urgent,#shareBtn.hot{animation:none}}

.clkrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;margin-top:6px;min-height:28px}
.clkrow .clk{margin-top:0}
.wk{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.wk svg{color:var(--acc)}
.wk:active{transform:scale(.97)}
.wk.urgent{border-color:var(--acc);color:var(--acc)}
.wkbig{font-size:34px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;margin:6px 0 2px}
.wkinfo{font-size:14px;line-height:1.45;color:var(--mute);margin:6px 2px 10px}

/* personal milestone popup */
.mpop{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:rgba(8,8,10,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:14px;overflow:auto}
.mpop.on{display:flex;animation:mpFade .25s ease-out}
.mpop.arm button{pointer-events:none}
.mp-card{position:relative;width:min(100%,360px);display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 8px 8px;animation:mpUp .5s cubic-bezier(.2,.9,.3,1) both}
.mp-x{position:absolute;top:0;inset-inline-end:0;width:40px;height:40px;border-radius:50%;color:var(--mute);font-size:18px;display:grid;place-items:center}
.mp-logo{width:96px;height:auto}
.mp-cn{margin-top:10px;max-width:100%;font-size:clamp(22px,7.4vw,30px);font-weight:800;line-height:1.12;overflow-wrap:anywhere}
.mp-rk{font-size:14px;font-weight:700;color:var(--mute);min-height:18px}
.mp-rk b{color:var(--acc);font-weight:800}
.mp-stage{position:relative;width:100%;height:clamp(150px,27vh,230px);margin:12px 0 4px;display:flex;align-items:center;justify-content:center}
.mp-glow{position:absolute;inset:-14% 4%;background:radial-gradient(closest-side,rgba(255,122,26,.30),rgba(255,122,26,0));animation:mpGlow 2.4s ease-in-out infinite}
.t2 .mp-glow{background:radial-gradient(closest-side,rgba(255,165,50,.42),rgba(255,122,26,0))}
.t3 .mp-glow{background:radial-gradient(closest-side,rgba(255,190,70,.55),rgba(255,122,26,0))}
#mpCv{position:relative;width:100%;height:100%}
.t2 #mpCv,.t3 #mpCv{animation:mpRise .9s cubic-bezier(.2,.8,.3,1) both}
.mp-crown{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:0;display:none;filter:drop-shadow(0 0 10px rgba(255,170,50,.6))}
.t2 .mp-crown{display:block;width:54px;top:-10px}
.t3 .mp-crown{display:block;width:78px;top:-14px}
.mp-ring{display:none;position:absolute;left:50%;top:26px;width:68%;height:34px;transform:translateX(-50%);border:2px solid rgba(255,194,71,.5);border-radius:50%}
.t3 .mp-ring{display:block}
.mp-sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mp-sparks i{position:absolute;bottom:10%;width:var(--s);height:var(--s);background:var(--acc);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:0;animation:mpSpark 2.2s ease-out infinite}
.mp-lab{font-size:clamp(12px,3.6vw,14px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.t3 .mp-lab{color:#FFC247}
.mp-num{font-size:clamp(88px,32vw,132px);font-weight:900;line-height:.98;color:var(--acc);font-variant-numeric:tabular-nums;animation:mpPop .6s .15s cubic-bezier(.2,1.5,.4,1) both}
.t2 .mp-num,.t3 .mp-num{background:linear-gradient(180deg,#FFD36B,#FF8A1A);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mp-sub{max-width:100%;font-size:clamp(16px,5vw,20px);font-weight:700;overflow-wrap:anywhere}
.mp-btn{margin-top:16px;width:100%;min-height:52px;font-size:16px;font-weight:800}
.mrow{width:100%;text-align:start;background:none;color:inherit}
.mrow:disabled{opacity:.55}
.mrow.ok{cursor:pointer}
@keyframes mpFade{from{opacity:0}to{opacity:1}}
@keyframes mpUp{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mpPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mpRise{from{transform:translateY(16px)}to{transform:none}}
@keyframes mpGlow{50%{opacity:.7}}
@keyframes mpSpark{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-120px) rotate(40deg)}}
@media (max-height:600px){.mp-stage{height:130px}.mp-logo{width:80px}}
@media (prefers-reduced-motion:reduce){.mpop.on,.mp-card,.mp-num,.t2 #mpCv,.t3 #mpCv,.mp-glow{animation:none}.mp-sparks{display:none}}

.t2 .mp-stage,.t3 .mp-stage{margin-top:34px}
.mp-btn{display:flex;align-items:center;justify-content:center;text-align:center}

/* short phones (Safari with its toolbar is often only ~660px tall): give the country more room */
@media (max-height:760px){
  .label{min-height:30px;padding:4px 10px}
  .clkrow{margin-top:2px;min-height:24px}
  .wk{min-height:24px;font-size:11px}
  .adl{display:none}
  .adwrap{padding:4px 14px 6px}
  .dock{padding:10px 14px 2px}
  .ms{margin-top:6px;min-height:34px;padding:5px 10px}
  .stats{margin-top:6px;padding:8px 0 6px}
}
@media (max-height:640px){
  #count{font-size:clamp(36px,12vw,58px)}
  .sub{margin-top:4px;height:22px;font-size:14px}
}