* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #1a1226;
  font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
#c { position: fixed; inset: 0; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; color: #f4ead8; }
#ui .overlay, #ui button { pointer-events: auto; }

#topbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; }
.stat { background: rgba(42,30,46,.82); border: 1px solid #2ec4b6; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; letter-spacing: 1px; }
.stat b { color: #ffd9a0; font-size: 15px; }

#hpwrap { position: absolute; left: 14px; bottom: 14px; width: 210px; }
#hplabel, #reloadlabel { font-size: 11px; letter-spacing: 2px; opacity: .8; margin-bottom: 3px; }
#hpbar { height: 14px; background: rgba(42,30,46,.82); border: 1px solid #6e4a3a; border-radius: 7px; overflow: hidden; }
#hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, #e0584f, #ff9c3a); transition: width .2s; }
#reloadwrap { height: 7px; margin-top: 8px; background: rgba(42,30,46,.82); border: 1px solid #2a4a44; border-radius: 4px; overflow: hidden; }
#reloadfill { height: 100%; width: 100%; background: #2ec4b6; }

#banner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  font-size: clamp(22px, 5vw, 40px); letter-spacing: 4px; color: #ffd9a0;
  text-shadow: 0 2px 14px rgba(255,120,40,.7); opacity: 0; transition: opacity .35s; }
#banner.show { opacity: 1; }

#vignette { position: absolute; inset: 0; opacity: 0; transition: opacity .18s;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(224,50,40,.6) 100%); }

.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(26,18,38,.35), rgba(20,12,28,.86)); }
.overlay.hidden { display: none; }
.panel { background: rgba(38,26,46,.94); border: 1px solid #2ec4b6; border-radius: 14px;
  padding: 26px 30px; max-width: min(92vw, 520px); text-align: center;
  box-shadow: 0 12px 60px rgba(0,0,0,.6); }
.panel h1 { font-size: clamp(26px, 6vw, 42px); letter-spacing: 6px; color: #ffd9a0; }
.panel h1.win { color: #2ec4b6; } .panel h1.lose { color: #e0584f; }
.panel .tag { color: #2ec4b6; margin: 8px 0 14px; font-size: 14px; letter-spacing: 1px; }
.panel .how { font-size: 13px; line-height: 1.7; color: #e8dcc4; margin-bottom: 18px; text-align: left; }
.panel .tiny { margin-top: 12px; font-size: 11px; opacity: .6; }
.bigbtn { font: inherit; font-size: 17px; letter-spacing: 3px; cursor: pointer;
  color: #1a1226; background: linear-gradient(180deg, #ffd9a0, #ff9c3a);
  border: none; border-radius: 10px; padding: 12px 34px; font-weight: 700;
  box-shadow: 0 4px 18px rgba(255,150,60,.45); }
.bigbtn:active { transform: translateY(2px); }

#touch { position: absolute; inset: 0; display: none; }
#touch.on { display: block; }
#dpad { position: absolute; left: 12px; bottom: 86px; width: 168px; height: 168px; }
#dpad button { position: absolute; width: 54px; height: 54px; border-radius: 12px; border: 1px solid #2ec4b6;
  background: rgba(42,30,46,.72); color: #f4ead8; font-size: 20px; touch-action: none; }
#dpad button.held { background: rgba(46,196,182,.55); }
#b-fwd { left: 57px; top: 0; } #b-back { left: 57px; bottom: 0; }
#b-left { top: 57px; left: 0; } #b-right { top: 57px; right: 0; }
#b-fire { position: absolute; right: 14px; bottom: 96px; width: 92px; height: 92px; border-radius: 50%;
  border: 2px solid #ff9c3a; background: rgba(160,60,30,.65); color: #ffd9a0;
  font: inherit; font-size: 15px; letter-spacing: 2px; font-weight: 700; touch-action: none; }
#b-fire.held { background: rgba(255,120,40,.8); }
@media (max-width: 500px) { #hpwrap { width: 140px; bottom: 10px; } .stat { padding: 4px 8px; font-size: 11px; } }