:root{
  --bg0:#070a14;
  --bg1:#0b1020;
  --text:#e8ecff;
  --muted:#a9b2d6;
  --accent:#66e3ff;
  --danger:#ff365f;
  --gold:#ffd35a;
  --shadow: rgba(0,0,0,.45);
  --board:#c99a63;
  --board2:#a87543;
  --clamA:#cfd5de;
  --clamB:#9aa6b6;
  --radius: 20px;
  --safeBottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 700px at 50% 0%, #18214a 0%, var(--bg1) 35%, var(--bg0) 100%);
  overflow-x:hidden;
}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding:16px 16px calc(14px + var(--safeBottom));
  gap:14px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:flex;flex-direction:column;gap:2px}
.brand__title{font-weight:800;letter-spacing:.4px;font-size:18px}
.brand__sub{font-size:12px;color:var(--muted)}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  touch-action: manipulation;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(135deg, rgba(102,227,255,.22), rgba(255,211,90,.18));
  border-color: rgba(255,255,255,.18);
}

.stage{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.scene{
  width:min(760px, 100%);
  min-height:min(560px, 72vh);
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(600px 380px at 30% 30%, rgba(102,227,255,.12), transparent 55%),
    radial-gradient(700px 420px at 80% 20%, rgba(255,211,90,.08), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 24px 70px var(--shadow);
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  align-items:end;
  padding:18px;
  gap:18px;
}

/* Mobile: stack */
@media (max-width: 640px){
  .scene{
    grid-template-columns: 1fr;
    align-items:center;
    min-height: 66vh;
  }
}

.fighter{
  position:relative;
  width:min(320px, 54vw);
  aspect-ratio: 3/4;
  margin-left: 6px;
  transform-origin: 40% 70%;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.4));
}

.fighter__glow{
  position:absolute; inset:-40px;
  background: radial-gradient(circle at 40% 45%, rgba(102,227,255,.18), transparent 55%),
              radial-gradient(circle at 60% 60%, rgba(255,211,90,.12), transparent 60%);
  opacity:0;
  transform: scale(.95);
  transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease;
  filter: blur(6px);
  pointer-events:none;
}
.is-super .fighter__glow{
  opacity:1;
  transform: scale(1.02);
  filter: blur(10px) saturate(1.3);
  animation: glowPulse 900ms ease-in-out infinite;
}

@keyframes glowPulse{
  0%,100%{opacity:.65}
  50%{opacity:1}
}

/* Simple "anime-ish" placeholder using layers */
.fighter__body{
  position:absolute; left:26%; top:34%;
  width:52%; height:56%;
  background: linear-gradient(180deg, #1c8cc9, #0f5a88);
  border-radius: 18% 18% 22% 22%;
  border: 2px solid rgba(0,0,0,.35);
}
.fighter__face{
  position:absolute; left:36%; top:13%;
  width:34%; height:26%;
  background: linear-gradient(180deg, #f6d2b6, #eab18d);
  border-radius: 36% 36% 40% 40%;
  border: 2px solid rgba(0,0,0,.35);
}
.fighter__hair{
  position:absolute; left:30%; top:6%;
  width:48%; height:22%;
  background: linear-gradient(180deg, #1b1b20, #0b0b0f);
  clip-path: polygon(5% 100%, 12% 40%, 24% 70%, 34% 22%, 50% 62%, 62% 18%, 76% 60%, 88% 28%, 95% 100%);
  border-radius: 10px;
}
.fighter__headband{
  position:absolute; left:32%; top:18%;
  width:46%; height:6%;
  background: linear-gradient(180deg, #e63b55, #a5152a);
  border-radius: 999px;
  transform: rotate(-2deg);
  border: 1px solid rgba(0,0,0,.25);
}

/* Mallet - will animate */
.mallet{
  position:absolute;
  left:6%;
  top:8%;
  width:70%;
  height:70%;
  transform-origin: 30% 65%;
  transform: rotate(-18deg) translateY(0);
}
.aim-left .mallet{ transform-origin: 26% 66%; }
.aim-mid .mallet{ transform-origin: 32% 64%; }
.aim-right .mallet{ transform-origin: 38% 62%; }
.aim-left .fighter{ transform: translateX(-10px); }
.aim-right .fighter{ transform: translateX(10px); }
.mallet__handle{
  position:absolute;
  left:18%;
  top:42%;
  width:16%;
  height:46%;
  background: linear-gradient(180deg, #9a6b3f, #6f4a29);
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.35);
}
.mallet__head{
  position:absolute;
  left:6%;
  top:28%;
  width:44%;
  height:22%;
  background: linear-gradient(180deg, #d3a774, #b58452);
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.35);
}
.is-swing .mallet{
  animation: swing 260ms cubic-bezier(.15,.75,.25,1) both;
}
.is-slam .mallet{
  animation: slam 220ms cubic-bezier(.05,.9,.1,1) both;
}
@keyframes swing{
  0%{transform: rotate(-18deg) translateY(0)}
  70%{transform: rotate(26deg) translate(10px, 24px)}
  100%{transform: rotate(10deg) translate(6px, 10px)}
}
@keyframes slam{
  0%{transform: rotate(-22deg) translateY(0)}
  55%{transform: rotate(44deg) translate(18px, 44px)}
  100%{transform: rotate(18deg) translate(8px, 18px)}
}

.boardWrap{position:relative; width:100%; align-self:stretch; display:flex; align-items:end; justify-content:center}
.board{
  width: min(380px, 92%);
  height: min(200px, 26vh);
  border-radius: 18px;
  background:
    radial-gradient(900px 250px at 50% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(135deg, var(--board), var(--board2));
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.clams{
  position:absolute;
  width: min(380px, 92%);
  left:50%;
  transform: translateX(-50%);
  bottom: 24px;
  display:flex;
  gap:14px;
  justify-content:center;
}
.clam{
  width: 92px;
  height: 62px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), transparent 45%),
    linear-gradient(180deg, var(--clamA), var(--clamB));
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  position:relative;
  touch-action: manipulation;
}
.clam::before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:18%;
  height:54%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.08));
  opacity:.65;
}
.clam::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:10%;
  height:18%;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  filter: blur(1px);
}
.clam:active{transform: translateY(1px) scale(.99)}
.clam.is-hit{
  animation: clamHit 160ms ease-out both;
}
.clam.is-broken{
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(180deg, rgba(120,128,140,1), rgba(70,78,90,1));
  opacity:.62;
  box-shadow: 0 8px 18px rgba(0,0,0,.30);
}
.clam.is-broken::before{
  opacity:.25;
}
.clam.is-broken::after{
  opacity:.22;
}
.clam.is-broken{
  cursor:not-allowed;
}
.clam.is-broken:active{transform:none}
@keyframes clamHit{
  0%{transform: translateY(0) scale(1)}
  55%{transform: translateY(2px) scale(.98)}
  100%{transform: translateY(0) scale(1)}
}

.wham{
  position:absolute;
  z-index:10;
  left:50%;
  top: 22%;
  transform: translate(-50%, -50%) scale(.7);
  opacity:0;
  padding:12px 16px;
  border-radius: 12px;
  font-weight:900;
  letter-spacing:1px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(255,255,255,.18) 55%, rgba(255,54,95,.12) 100%),
    linear-gradient(135deg, rgba(255,54,95,.9), rgba(255,211,90,.85));
  color:#14040a;
  border: 3px solid rgba(0,0,0,.35);
  box-shadow: 0 22px 50px rgba(0,0,0,.4);
  text-transform: uppercase;
  pointer-events:none;
}
.wham.is-on{
  animation: whamPop 360ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes whamPop{
  0%{opacity:0; transform: translate(-50%, -50%) scale(.55) rotate(-6deg)}
  35%{opacity:1; transform: translate(-50%, -50%) scale(1.03) rotate(2deg)}
  100%{opacity:0; transform: translate(-50%, -62%) scale(.92) rotate(-1deg)}
}

.hud{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.meter{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding:12px 12px;
}
.meter__labelRow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.meter__label{font-weight:800;letter-spacing:.4px}
.meter__count{color:var(--muted);font-weight:700;font-variant-numeric: tabular-nums}
.meter__bar{
  height:14px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.meter__fill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(102,227,255,1), rgba(255,211,90,1));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: width 160ms ease-out, filter 180ms ease-out;
}
.is-charged .meter__fill{
  filter: saturate(1.25) brightness(1.1);
}
.is-overcharged .meter__fill{
  background: linear-gradient(90deg, rgba(255,54,95,1), rgba(255,54,95,.85));
  animation: meterAlert 420ms ease-in-out infinite;
}
@keyframes meterAlert{
  0%,100%{filter: brightness(1) saturate(1)}
  50%{filter: brightness(1.35) saturate(1.4)}
}
.tips{color:var(--muted);font-size:12px;line-height:1.35}

/* Nuke overlay */
.nuke{
  position:absolute;
  inset:-40px;
  z-index: 30;
  opacity:0;
  pointer-events:none;
}
.nuke.is-on{
  opacity:1;
}
.nuke__flash{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,1) 0%, rgba(255,211,90,1) 16%, rgba(255,54,95,.9) 30%, rgba(0,0,0,.0) 62%);
  transform: scale(.4);
  opacity:0;
}
.nuke__ring{
  position:absolute; left:50%; top:62%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%) scale(.3);
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,.85);
  opacity:0;
  filter: blur(.2px);
}
.nuke__mushroom{
  position:absolute; left:50%; top:60%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%) scale(.2);
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.9), rgba(255,211,90,.95) 38%, rgba(255,54,95,.75) 70%, rgba(0,0,0,0) 100%);
  opacity:0;
  filter: blur(.2px);
}
.nuke__grain{
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(1px 1px at 72% 44%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(1px 1px at 43% 78%, rgba(255,255,255,.08), transparent 60%);
  opacity:0;
}

.nuke.is-on .nuke__flash{animation: nukeFlash 1100ms ease-out both}
.nuke.is-on .nuke__ring{animation: nukeRing 1100ms ease-out both}
.nuke.is-on .nuke__mushroom{animation: nukeMushroom 1400ms ease-out both}
.nuke.is-on .nuke__grain{animation: nukeGrain 1600ms ease-out both}

@keyframes nukeFlash{
  0%{opacity:0; transform: scale(.2)}
  10%{opacity:1; transform: scale(.85)}
  35%{opacity:.9; transform: scale(1.6)}
  100%{opacity:0; transform: scale(2.4)}
}
@keyframes nukeRing{
  0%{opacity:0; transform: translate(-50%, -50%) scale(.25)}
  12%{opacity:1; transform: translate(-50%, -50%) scale(1.1)}
  55%{opacity:.7; transform: translate(-50%, -50%) scale(16)}
  100%{opacity:0; transform: translate(-50%, -50%) scale(22)}
}
@keyframes nukeMushroom{
  0%{opacity:0; transform: translate(-50%, -50%) scale(.2)}
  12%{opacity:1; transform: translate(-50%, -50%) scale(1.6)}
  35%{opacity:1; transform: translate(-50%, -56%) scale(8)}
  70%{opacity:.7; transform: translate(-50%, -66%) scale(16)}
  100%{opacity:0; transform: translate(-50%, -78%) scale(22)}
}
@keyframes nukeGrain{
  0%{opacity:0}
  18%{opacity:.35}
  55%{opacity:.16}
  100%{opacity:0}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .is-swing .mallet,
  .is-slam .mallet,
  .wham.is-on,
  .nuke.is-on .nuke__flash,
  .nuke.is-on .nuke__ring,
  .nuke.is-on .nuke__mushroom,
  .nuke.is-on .nuke__grain,
  .is-super .fighter__glow,
  .is-overcharged .meter__fill{
    animation: none !important;
  }
  .meter__fill{transition:none}
}

/* Replay overlay */
.replay{
  position:absolute;
  inset:0;
  z-index: 40;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: radial-gradient(900px 520px at 50% 35%, rgba(255,54,95,.12), rgba(0,0,0,.75));
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease-out;
}
.replay.is-on{
  opacity:1;
  pointer-events:auto;
}
.replay__card{
  width: min(520px, 100%);
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10, 12, 24, .75);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
  padding: 18px 16px;
  backdrop-filter: blur(10px);
}
.replay__title{
  font-weight: 950;
  letter-spacing: 1.4px;
  font-size: 34px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(255,54,95,1), rgba(255,211,90,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}
.replay__stats{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 14px;
}
.replay__actions{
  display:flex;
  gap:10px;
}