/* Akhbaar Rush UI. The #stage is a fixed 844x390 box scaled to fit the phone (see fit() in main.js). */
:root{--ink:#241610;--cream:#f4f0e6;--gold:#ffd35a;--navy:#1b2340;--night:#0b0f1e;--red:#d8322a;--green:#4fb35e;--blue:#2d6fd1;--px:"Press Start 2P","Hind",monospace;--body:"Pixelify Sans","Hind",monospace;color-scheme:dark}
html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--night);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.app{position:fixed;inset:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:flex;align-items:center;justify-content:center;box-sizing:border-box}
#stage{position:relative;width:844px;height:390px;flex-shrink:0;overflow:hidden;background:#5fb3e3;transform-origin:center center;font-family:var(--body);color:var(--cream)}
#cv{position:absolute;left:0;top:0;width:844px;height:391px;image-rendering:pixelated;image-rendering:crisp-edges}
.pix{image-rendering:pixelated}
.layer{position:absolute;inset:0}
.screen{position:absolute;inset:0}
/* Settings can open over the paused ride; keep it above the in-game HUD so its buttons get the taps. */
#settings{z-index:2}
.dim{position:absolute;inset:0;background:rgba(18,22,40,.55)}
.px{font-family:var(--px)}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);cursor:pointer;font-family:var(--px);font-size:12px;color:var(--ink);background:var(--gold);padding:0 14px;transition:transform .05s;text-decoration:none}
.pbtn:hover{filter:brightness(1.06)}.pbtn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.pbtn:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pbtn.green{background:var(--green);color:#fff;text-shadow:0 2px 0 #1f6a2d}.pbtn.red{background:var(--red);color:#fff}.pbtn.cream{background:var(--cream)}.pbtn.grey{background:#5a5f78;color:#d8dbea;box-shadow:none;cursor:default}
.pbtn.sq{width:44px;height:44px;padding:0}
button{font:inherit;color:inherit}
.panel{position:absolute;box-sizing:border-box;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink)}
.ribbon{position:absolute;left:50%;transform:translateX(-50%);top:-22px;padding:9px 22px;border:4px solid var(--ink);font-family:var(--px);font-size:14px;color:#fff;white-space:nowrap}
.chip{display:flex;align-items:center;gap:7px;height:38px;box-sizing:border-box;padding:0 11px 0 6px;background:var(--ink);border:3px solid #0f0a07;font-family:var(--px);font-size:11px;color:var(--gold)}
.ico{display:inline-block;flex-shrink:0;background-size:100% 100%;image-rendering:pixelated}
.i-coin{width:26px;height:26px;background-image:url(assets/icon_coin.png)}.i-paper{width:30px;height:22px;background-image:url(assets/icon_paper.png)}
.i-gift{width:26px;height:26px;background-image:url(assets/icon_gift.png)}.i-flame{width:22px;height:26px;background-image:url(assets/icon_flame.png)}
.i-trophy{width:26px;height:26px;background-image:url(assets/icon_trophy.png)}.i-cycle{width:40px;height:26px;background-image:url(assets/icon_cycle.png)}
.i-star{width:24px;height:22px;background-image:url(assets/icon_star.png)}.i-star.off{filter:grayscale(1) brightness(.5)}
.av{display:inline-block;flex-shrink:0;background-size:100% 100%;image-rendering:pixelated}
.topbar{position:absolute;left:0;top:0;right:0;height:54px;background:#0f1428;border-bottom:3px solid var(--ink);display:flex;align-items:center;gap:10px;padding:0 12px;box-sizing:border-box}
.title-h{font-family:var(--px);font-size:15px;color:var(--gold);text-shadow:0 3px 0 #7a1f16}
.blink{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{visibility:hidden}}
.pulse{animation:pulse 1s steps(2) infinite}@keyframes pulse{50%{transform:scale(1.04)}}
.bob{animation:bob 1.2s steps(2) infinite}@keyframes bob{50%{transform:translateY(-6px)}}
.logo{width:400px;height:156px;background:url(assets/logo.png) 0 0/100% 100%;image-rendering:pixelated}
.muted{color:#c9cbe0}
/* splash */
#splash{background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.studio{width:360px;height:240px;background:url(assets/studio_logo_stacked.png) 0 0/100% 100%;image-rendering:pixelated;animation:pop 1.3s steps(7) both}
@keyframes pop{0%{transform:scale(.2);opacity:0}30%{opacity:1}55%{transform:scale(1.12)}75%,100%{transform:scale(1)}}
.late{opacity:0;animation:fade .6s steps(3) 1.2s forwards}@keyframes fade{to{opacity:1}}
/* loading */
#loading{background:var(--navy);display:flex;flex-direction:column;align-items:center}
.bar{position:relative;width:492px;height:28px;box-sizing:border-box;border:3px solid var(--cream);background:#0f1428;padding:3px}
.bar i{display:block;height:16px;background:var(--gold);box-shadow:inset 0 -4px 0 #e0782a;width:0}
/* hud */
#hud .score{position:absolute;left:10px;top:10px;padding:6px 10px 8px;background:rgba(15,20,40,.8);border:3px solid var(--ink);display:flex;flex-direction:column;gap:5px}
#hud .combo{position:absolute;left:10px;top:96px;padding:5px 8px;background:#f39c2b;border:3px solid var(--ink);font-family:var(--px);font-size:10px;color:var(--ink)}
.prog{position:absolute;left:236px;top:12px;width:290px;display:flex;flex-direction:column;align-items:center;gap:5px}
.prog .track{position:relative;flex-grow:1;height:14px;box-sizing:border-box;border:3px solid var(--ink);background:#0f1428}
.prog .track i{display:block;height:8px;background:#8ad07a;width:0}
.pill{padding:3px 10px;background:rgba(15,20,40,.8);border:2px solid var(--ink);font-size:14px;white-space:nowrap}
.papers{display:flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;padding:0 12px 0 8px;background:var(--cream);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--ink)}
.papers.low{background:#ffb4a8;border-color:var(--red);color:#7a1f16;animation:flash .5s steps(1) infinite}@keyframes flash{50%{opacity:.35}}
.lowwarn{padding:6px 12px;background:var(--red);border:3px solid var(--ink);font-family:var(--px);font-size:9px;color:#fff;white-space:nowrap;animation:flash .5s steps(1) infinite}
.ctl{position:absolute;display:flex;align-items:center;justify-content:center;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:rgba(244,240,230,.82);cursor:pointer;padding:0}
.ctl:active{transform:translateY(4px);box-shadow:none}
.pop{position:absolute;padding:4px 8px;border:3px solid var(--ink);font-family:var(--px);font-size:10px;white-space:nowrap;pointer-events:none;animation:rise 1.1s steps(9) forwards;transform:translate(-50%,0)}
@keyframes rise{0%{opacity:0;margin-top:0}12%{opacity:1}75%{opacity:1}100%{opacity:0;margin-top:-34px}}
.hitv{position:absolute;inset:0;box-shadow:inset 0 0 0 10px rgba(216,50,42,.6);pointer-events:none;animation:flash .4s steps(1) 3}
/* countdown */
.cdnum{font-family:var(--px);font-size:80px;color:var(--gold);text-shadow:5px 0 var(--ink),-5px 0 var(--ink),0 5px var(--ink),0 -5px var(--ink),5px 5px var(--ink),-5px 5px var(--ink),0 10px #b0322a;animation:cdpop .35s steps(3)}
@keyframes cdpop{from{transform:scale(1.5)}to{transform:scale(1)}}
.outline{text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),0 6px var(--ink)}
/* lists */
.grid{display:grid;gap:8px}
.tog{position:relative;width:64px;height:32px;border:3px solid var(--ink);box-sizing:border-box;cursor:pointer;padding:0;background:#b8af99}
.tog i{position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--cream);border:2px solid var(--ink);box-sizing:border-box}
.tog.on{background:var(--green)}.tog.on i{left:37px}
.seg{display:flex;border:3px solid var(--ink)}.seg button{height:32px;min-width:76px;border:none;cursor:pointer;background:var(--cream);font-family:var(--px);font-size:9px;color:var(--ink)}.seg button+button{border-left:3px solid var(--ink)}.seg button.sel{background:var(--gold)}
.row{display:flex;align-items:center;justify-content:space-between;height:44px;border-bottom:2px dashed #cfc7b3;font-size:18px;font-weight:600}
.stripv{background-repeat:repeat-x;image-rendering:pixelated;animation:strip 18s linear infinite}@keyframes strip{to{background-position-x:-1920px}}
.lvl{height:56px;box-sizing:border-box;border:3px solid var(--ink);box-shadow:0 3px 0 #0b0f1e;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--px);font-size:13px}
.lvl .st{display:flex;gap:2px}.lvl .st i{width:8px;height:8px;background:#3a4060}.lvl .st i.on{background:var(--gold)}
.demo{width:120px;height:132px;background-repeat:no-repeat;image-rendering:pixelated}
.demo.up{background-image:url(assets/boy_lane_up.png);background-size:720px 132px;animation:d6 1.6s step-end infinite,upm 1.6s step-end infinite}
.demo.down{background-image:url(assets/boy_lane_down.png);background-size:720px 132px;animation:d6 1.6s step-end infinite,downm 1.6s step-end infinite}
.demo.jmp{background-image:url(assets/boy_jump.png);background-size:960px 132px;animation:dj 1.6s step-end infinite}
@keyframes d6{0%{background-position:0 0}6%{background-position:-120px 0}12%{background-position:-240px 0}18%{background-position:-360px 0}24%{background-position:-480px 0}30%,100%{background-position:-600px 0}}
@keyframes upm{0%{transform:translateY(0)}6%{transform:translateY(-4px)}12%{transform:translateY(-12px)}18%{transform:translateY(-22px)}24%{transform:translateY(-28px)}30%,80%{transform:translateY(-30px)}}
@keyframes downm{0%{transform:translateY(-30px)}6%{transform:translateY(-26px)}12%{transform:translateY(-18px)}18%{transform:translateY(-8px)}24%{transform:translateY(-2px)}30%,80%{transform:translateY(0)}}
@keyframes dj{0%{background-position:0 0;transform:translateY(0)}7%{background-position:-120px 0;transform:translateY(-8px)}13%{background-position:-240px 0;transform:translateY(-28px)}20%{background-position:-360px 0;transform:translateY(-44px)}29%{background-position:-480px 0;transform:translateY(-36px)}35%{background-position:-600px 0;transform:translateY(-18px)}40%{background-position:-720px 0;transform:translateY(0)}46%{background-position:-840px 0}53%,100%{background-position:0 0}}
.bikebig{width:180px;height:198px;background-repeat:no-repeat;image-rendering:pixelated;animation:ride3 .32s steps(4) infinite}@keyframes ride3{from{background-position:0 0}to{background-position:-720px 0}}
.card{box-sizing:border-box;border:3px solid var(--ink);background:var(--cream);cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;color:var(--ink)}
.card.sel{border:4px solid var(--gold)}
.thumb{width:110px;height:76px;image-rendering:pixelated;background-repeat:no-repeat}
#rotate{position:fixed;inset:0;background:var(--night);color:var(--cream);display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:var(--px);font-size:12px;text-align:center;padding:24px;z-index:9;line-height:1.8}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}
.err{font-size:13px;color:#b0322a}
input.name{height:46px;box-sizing:border-box;padding:0 12px;border:3px solid var(--ink);background:#fff;font-family:var(--px);font-size:14px;color:var(--ink);text-transform:uppercase;min-width:0;flex-grow:1;-webkit-user-select:text;user-select:text}
input.name.bad{border-color:var(--red)}
.lbrow{height:38px;box-sizing:border-box;border:3px solid var(--ink);background:var(--cream);color:var(--ink);display:flex;align-items:center;gap:10px;padding:0 10px}
@media (prefers-reduced-motion:reduce){.stripv,.bob,.pulse{animation:none}}

.toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;max-width:600px;padding:10px 16px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-family:var(--px);font-size:10px;line-height:1.6;text-align:center;cursor:pointer}