/* ============================================================
   WIN DELMORA — gameplay screen
   ============================================================ */
.game-screen{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden}

/* HUD ------------------------------------------------------------- */
.hud{
  display:flex;align-items:center;gap:10px;
  padding:calc(8px + var(--safe-top)) 12px 8px;
}
.hud .iconbtn{width:40px;height:40px}
.hud-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.hud-obj{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:5px 12px;box-shadow:var(--shadow-sm);
}
.hud-obj svg{width:18px;height:18px;color:var(--blue)}
.hud-obj .ot{font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-obj .oc{font-weight:900;color:var(--blue-deep)}
.hud-lvl{font-size:11px;font-weight:850;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}

.hud-stats{display:flex;gap:8px;padding:2px 12px 8px}
.hstat{
  flex:1;background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:8px 10px;box-shadow:var(--shadow-sm);text-align:center;position:relative;overflow:hidden
}
.hstat .k{font-size:10px;font-weight:850;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.hstat .v{font-size:20px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.hstat.warn .v{color:var(--coral)}
.hstat .vsub{font-size:11px;color:var(--ink-2);font-weight:700}

/* Board / canvas -------------------------------------------------- */
.board-wrap{
  position:relative;flex:1;min-height:0;margin:2px 8px 0;
  border-radius:22px 22px 0 0;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(180deg,#EAF7FE, #Dff1fc 70%, #D3ECFA);
  border:1px solid var(--line);border-bottom:none;
  box-shadow:inset 0 2px 10px rgba(3,62,138,.06);
}
.board-wrap::before{ /* pitch stripes */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 3px, transparent 3px 46px);
  mask-image:linear-gradient(180deg,#000,#000 78%,transparent);
}
canvas#board{display:block;width:100%;height:100%;position:relative;z-index:1;touch-action:none}

.combo-pop{
  position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);z-index:5;
  font-weight:950;font-size:34px;color:#fff;pointer-events:none;
  text-shadow:0 4px 16px rgba(0,119,182,.55);opacity:0;
}
.combo-pop.show{animation:combo .8s ease}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-40%) scale(.6)}
  30%{opacity:1;transform:translate(-50%,-52%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}

/* Booster tray ---------------------------------------------------- */
.tray{
  display:flex;gap:9px;padding:10px 12px calc(12px + var(--safe-bot));
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.5));
}
.booster{
  flex:1;position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:16px;padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s;
}
.booster:active{transform:scale(.94)}
.booster .bi{width:30px;height:30px;border-radius:12px;display:grid;place-items:center;color:#fff}
.booster .bi svg{width:19px;height:19px}
.booster .bn{font-size:10px;font-weight:800;color:var(--ink-2)}
.booster .cnt{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:100px;background:var(--blue-deep);color:#fff;font-size:11px;font-weight:900;
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.booster.armed{outline:3px solid var(--cyan);outline-offset:1px}
.booster.empty{opacity:.55}
.booster.empty .cnt{background:var(--ink-3)}

/* Result overlays ------------------------------------------------- */
.result{max-width:400px;text-align:center;overflow:visible}
.result .crest{
  width:96px;height:96px;margin:-58px auto 6px;border-radius:30px;display:grid;place-items:center;
  color:#fff;box-shadow:var(--shadow-lg);border:5px solid var(--white);
}
.result .crest svg{width:52px;height:52px}
.result h2{font-size:28px;font-weight:950;margin:6px 0 2px;letter-spacing:.5px}
.result .rstars{display:flex;justify-content:center;gap:8px;margin:10px 0 4px}
.result .rstars svg{width:44px;height:44px}
.result .rstars .s{transform:scale(0);animation:star-pop .5s cubic-bezier(.2,.9,.3,1.3) forwards}
.result .rstars .s:nth-child(2){animation-delay:.14s;margin-top:-8px}
.result .rstars .s:nth-child(3){animation-delay:.28s}
@keyframes star-pop{to{transform:scale(1)}}
.reward-row{display:flex;justify-content:center;gap:10px;margin:14px 0}
.reward-chip{display:flex;align-items:center;gap:7px;background:var(--card-3);border-radius:14px;
  padding:9px 14px;font-weight:900;color:var(--ink)}
.reward-chip svg{width:20px;height:20px}
.scoreline{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px dashed var(--line-2);font-weight:700;color:var(--ink-2)}
.scoreline b{color:var(--ink);font-variant-numeric:tabular-nums}

.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(560px) rotate(540deg);opacity:0}}

/* Pause ----------------------------------------------------------- */
.pause-sheet .btn{margin-top:10px}

/* aim toggle handedness */
.tray.left{flex-direction:row-reverse}