/* Valour — design system (ui-ux-pro-max: Pixel Art / dark arcade)
   Palette: banner red primary, gold accent, slate-void bg, jade HP. */
:root {
  --c-bg: #0F172A;
  --c-void: #070B14;
  --c-fg: #FFFFFF;
  --c-primary: #DC2626;     /* banner red */
  --c-gold: #F5C542;        /* imperial gold */
  --c-jade: #22C55E;        /* HP / go */
  --c-rage: #60A5FA;        /* rage bar */
  --c-muted: #1F2937;
  --c-border: rgba(255,255,255,0.14);
  --font-head: 'Press Start 2P', monospace;
  --font-body: 'VT323', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--c-void); }
body { font-family: var(--font-body); color: var(--c-fg);
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; }

#stage { position: fixed; inset: 0; display: grid; place-items: center; }
#frame { position: relative;
  width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); }
canvas { image-rendering: pixelated; background: var(--c-bg);
  display: block; width: 100%; height: 100%;
  box-shadow: 0 0 0 2px var(--c-border), 0 0 60px rgba(220,38,38,.12); }

/* ── HUD ─────────────────────────────────────── */
#hud { position: absolute; top: max(8px, env(safe-area-inset-top));
  left: 0; right: 0; display: flex; justify-content: space-between;
  padding: 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
.plate { min-width: 200px; }
.plate.right { text-align: right; }
.pname { font-family: var(--font-head); font-size: 11px; color: var(--c-gold);
  text-shadow: 2px 2px 0 #000; margin-bottom: 6px; letter-spacing: 1px; }
.bar { height: 14px; border: 2px solid #000; outline: 1px solid var(--c-border);
  background: var(--c-muted); margin-bottom: 4px; }
.bar .fill { height: 100%; width: 100%; transition: width 120ms steps(6); }
.bar.hp .fill { background: linear-gradient(180deg, #4ADE80, var(--c-jade)); }
.bar.rage { height: 8px; width: 70%; }
.bar.rage .fill { width: 0%; background: linear-gradient(180deg, #93C5FD, var(--c-rage)); }
.plate.right .bar.rage { margin-left: auto; }
.score { font-family: var(--font-head); font-size: 16px; color: var(--c-fg);
  text-shadow: 2px 2px 0 #000; }
#wave { font-family: var(--font-head); font-size: 12px; color: var(--c-primary);
  align-self: flex-start; padding-top: 2px; text-shadow: 2px 2px 0 #000; text-align: center; }

/* ── Touch controls ──────────────────────────── */
#controls { position: absolute; inset: 0; pointer-events: none; }
#stickZone { position: absolute; left: 0; top: 0; bottom: 0; width: 45%;
  pointer-events: auto; }
#stickBase { position: absolute; width: 112px; height: 112px; border-radius: 50%;
  border: 2px solid var(--c-border); background: rgba(255,255,255,0.05);
  transform: translate(-50%, -50%); opacity: .95; }
#stickBase.resting { left: 16% !important;
  top: auto !important; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translate(-50%, 0); opacity: .45; }
#stickBase.resting::before { content: "◀"; position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%); font-family: var(--font-body); font-size: 22px;
  color: var(--c-gold); opacity: .9; }
#stickBase.resting::after { content: "▶"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-family: var(--font-body); font-size: 22px;
  color: var(--c-gold); opacity: .9; }
#stickNub { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(245,197,66,0.85); border: 2px solid #000;
  transform: translate(-50%, -50%); }
#btns { position: absolute; right: max(12px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom)); width: 190px; height: 170px;
  pointer-events: auto; }
.abtn { position: absolute; border-radius: 50%; border: 2px solid #000;
  outline: 2px solid var(--c-border); font-family: var(--font-head);
  color: #fff; text-shadow: 1px 1px 0 #000; cursor: pointer; }
.abtn:active { transform: scale(.92); filter: brightness(1.3); }
.abtn.attack { width: 84px; height: 84px; right: 4px; bottom: 0;
  background: radial-gradient(circle at 35% 30%, #EF4444, var(--c-primary) 70%); font-size: 18px; }
.abtn.jump { width: 64px; height: 64px; right: 96px; bottom: 34px;
  background: radial-gradient(circle at 35% 30%, #34D399, #059669 70%); font-size: 13px; }
.abtn.special { width: 56px; height: 56px; right: 30px; bottom: 100px;
  background: radial-gradient(circle at 35% 30%, #FBBF24, #B45309 70%); font-size: 12px; }
.abtn:focus-visible { outline: 3px solid var(--c-gold); }

/* ── Title / rotate ──────────────────────────── */
#title, #rotate { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #1E293B 0%, var(--c-void) 75%); }
.t-han { font-size: 110px; color: var(--c-primary); text-shadow: 0 0 34px rgba(220,38,38,.55), 4px 4px 0 #000;
  font-family: serif; line-height: 1; }
.t-han.small { font-size: 60px; }
.t-name { font-family: var(--font-head); font-size: clamp(22px, 5vw, 42px);
  color: var(--c-gold); text-shadow: 3px 3px 0 #000; letter-spacing: 6px; }
.t-sub { font-family: var(--font-head); font-size: clamp(9px, 1.6vw, 12px); color: #94A3B8; }
.t-start { font-family: var(--font-head); font-size: clamp(12px, 2.2vw, 16px);
  padding: 16px 30px; background: var(--c-primary); color: #fff; border: 3px solid #000;
  outline: 2px solid var(--c-border); cursor: pointer; animation: blink 1.1s steps(2) infinite; }
.t-start:active { transform: scale(.95); }
.t-start.alt { background: var(--c-muted); color: var(--c-gold); animation: none; }
.t-start.small { font-size: 10px; padding: 10px 18px; }
.t-menu { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.t-code { font-family: var(--font-head); font-size: clamp(30px, 7vw, 52px);
  color: var(--c-gold); letter-spacing: 14px; text-shadow: 3px 3px 0 #000;
  padding: 8px 10px 8px 24px; border: 3px solid var(--c-border); background: rgba(0,0,0,.35); }
.t-input { font-family: var(--font-head); font-size: clamp(20px, 4vw, 30px);
  width: 5.2ch; text-align: center; letter-spacing: 8px; text-transform: uppercase;
  background: rgba(0,0,0,.4); color: var(--c-fg); border: 3px solid var(--c-border);
  padding: 12px 4px; }
.t-input:focus { outline: 3px solid var(--c-gold); }
.mid { text-align: center; }
.t-hint { font-size: 19px; color: #94A3B8; line-height: 1.5; }
#rotate { font-family: var(--font-head); font-size: 14px; gap: 24px; }
@keyframes blink { 50% { filter: brightness(1.45); } }
@media (prefers-reduced-motion: reduce) { .t-start { animation: none; } }
[hidden] { display: none !important; }