:root{--bg:#0c0a10;--bg2:#120e16;--orange:#ff6a1a;--lime:#c8ff4d;--ink:#fdf3ea;--muted:#a89a9c;--line:#2e2630}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Arial Black","Segoe UI",system-ui,-apple-system,sans-serif}
.app-shell{width:min(100%,560px);min-height:100vh;margin:auto;background:var(--bg);position:relative;overflow:hidden}
.screen{display:none;min-height:100vh;padding:clamp(22px,5.5vw,42px)}
.screen.active{display:flex;flex-direction:column}

/* ---------- start screen ---------- */
.start-screen{background:radial-gradient(ellipse 120% 70% at 20% -10%, rgba(255,106,26,.18) 0%, transparent 55%),radial-gradient(ellipse 110% 60% at 100% 110%, rgba(200,255,77,.14) 0%, transparent 55%),var(--bg)}
.topline{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;letter-spacing:.16em;color:var(--orange);font-weight:900}
.sound-pill{background:transparent;color:var(--lime);border:2px solid var(--lime);border-radius:999px;padding:7px 12px;font-size:.58rem;font-weight:900;letter-spacing:.06em;cursor:pointer}
.start-screen h1{font-size:clamp(3rem,13vw,5.2rem);line-height:.84;letter-spacing:-.03em;margin:16px 0 10px;color:var(--ink);text-shadow:0 0 18px rgba(255,106,26,.5)}
.start-screen h1 span{color:var(--lime);text-shadow:0 0 22px rgba(200,255,77,.55)}
.lede{font-size:1rem;line-height:1.5;max-width:26rem;color:#d8c9c6;margin:0;font-weight:700}
.start-stats{display:flex;gap:10px;margin:18px 0 6px}
.start-stats div{flex:1;background:rgba(255,255,255,.04);border:2px solid var(--line);border-radius:12px;padding:11px 8px;text-align:center}
.start-stats strong{display:block;font-size:1.3rem;color:var(--orange)}
.start-stats span{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}

.mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;width:100%;max-width:400px;margin:18px auto 0}
.mini-grid .cell{aspect-ratio:1;border-radius:9px;overflow:hidden;background:#17121b;border:2px solid var(--line);display:block}
.mini-grid .cell img{width:100%;height:100%;object-fit:cover;display:block}
.mini-grid .cell.us{border-color:var(--orange)}
.mini-grid .cell.su{border-color:var(--lime)}
.mini-caption{text-align:center;font-size:.64rem;color:var(--muted);letter-spacing:.04em;font-weight:700;margin:10px 0 0}

.primary-btn{border:0;cursor:pointer;border-radius:14px;padding:17px 20px;font-weight:900;letter-spacing:.07em;font-size:.85rem;display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--orange);color:#1a0900;box-shadow:0 0 0 2px rgba(255,106,26,.3),0 8px 0 #a33f0a,0 8px 20px rgba(255,106,26,.35);margin-top:18px}
.primary-btn b{font-size:1.3rem}
.primary-btn:active{transform:translateY(3px);box-shadow:0 0 0 2px rgba(255,106,26,.3),0 5px 0 #a33f0a}
.microcopy{text-align:center;font-size:.6rem;color:var(--muted);margin:12px 0 0;font-weight:700}

/* ---------- game screen ---------- */
.game-screen{background:var(--bg2);padding-top:18px}
.hud{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px}
.hud-label{display:block;font-size:.52rem;letter-spacing:.1em;color:var(--muted);font-weight:900}
.hud strong{font-size:1.05rem;color:var(--ink)}
.lives{display:flex;gap:4px;justify-self:end}
.heart{color:var(--orange);font-size:1.2rem;text-shadow:0 0 8px rgba(255,106,26,.7)}
.heart.dead{color:#30282a;text-shadow:none}
.icon-btn{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--lime);font-size:1.1rem;cursor:pointer}

.lane{margin-top:18px;display:flex;flex-direction:column;flex:1}
.timer-track{height:9px;background:#1c1620;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.timer-track span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--orange),var(--lime));transition:width .08s linear}

.card-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 0;min-height:260px}
.rocket-card{width:200px;border-radius:18px;overflow:hidden;background:#17121b;border:3px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .22s ease,opacity .22s ease}
.rocket-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.rocket-title{display:block;padding:10px 12px;font-size:.78rem;font-weight:900;text-align:center;color:var(--ink);line-height:1.25}
.rocket-card.fly-left{transform:translateX(-140%) rotate(-18deg);opacity:0}
.rocket-card.fly-right{transform:translateX(140%) rotate(18deg);opacity:0}
.rocket-card.shake{animation:shake .32s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

.bins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bin-btn{border:0;cursor:pointer;border-radius:14px;padding:16px 14px;font-weight:900;letter-spacing:.04em;font-size:.72rem;display:flex;align-items:center;gap:8px;justify-content:center}
.bin-btn.left{background:rgba(255,106,26,.12);border:2px solid var(--orange);color:var(--orange)}
.bin-btn.right{background:rgba(200,255,77,.1);border:2px solid var(--lime);color:var(--lime)}
.bin-btn b{font-size:1.2rem}
.bin-btn:active{transform:translateY(2px)}
.bin-btn.flash{animation:binFlash .4s ease-out}
@keyframes binFlash{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}

.combo-tag{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--orange),var(--lime));color:#1a0900;font-weight:900;letter-spacing:.06em;font-size:1.1rem;padding:12px 20px;border-radius:14px;box-shadow:0 10px 30px rgba(255,106,26,.4);pointer-events:none;z-index:5}
.combo-tag.hidden{display:none}
.combo-tag.pop{animation:comboPop .26s ease-out}
@keyframes comboPop{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}60%{transform:translate(-50%,-50%) scale(1.08);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}

/* ---------- result screen ---------- */
.result-screen{background:radial-gradient(ellipse 120% 70% at 70% -10%, rgba(200,255,77,.14) 0%, transparent 55%),radial-gradient(ellipse 110% 60% at 0% 110%, rgba(255,106,26,.16) 0%, transparent 55%),var(--bg);justify-content:center}
.over-tag{align-self:flex-start;border:2px solid var(--lime);color:var(--lime);font-weight:900;font-size:.66rem;letter-spacing:.14em;padding:6px 10px;border-radius:5px}
.result-screen h1{font-size:clamp(2.6rem,10vw,4.4rem);letter-spacing:-.03em;line-height:.88;margin:18px 0 14px;color:var(--ink);text-shadow:0 0 16px rgba(255,106,26,.4)}
.result-screen h1 span{color:var(--orange)}
.result-score{background:rgba(255,255,255,.04);border:2px solid var(--line);padding:18px;border-radius:14px;margin:26px 0 12px;display:flex;justify-content:space-between;align-items:end}
.result-score span{font-size:.58rem;letter-spacing:.1em;color:var(--muted);font-weight:900}
.result-score strong{font-size:2.1rem;color:var(--orange)}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:26px}
.result-grid div{background:rgba(255,255,255,.04);border:2px solid var(--line);padding:13px 6px;border-radius:12px;text-align:center}
.result-grid strong{display:block;font-size:1.1rem;color:var(--lime)}
.result-grid span{font-size:.52rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}

@media(max-width:360px){
  .screen{padding:18px}
  .hud{gap:8px}
  .rocket-card{width:170px}
}