:root{
  --red:#ff3b30; --gold:#ffd76a; --ice:#9fd8ff;
  --panel:rgba(8,10,16,.72);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{height:100%;background:#05070c;overflow:hidden;font-family:'Rajdhani',sans-serif;color:#e8ecf4}
#app{position:fixed;inset:0}
#c3d{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- overlays ---------- */
#vignette{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#flash{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;background:#fff}
#dmg-layer{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.dmg{position:absolute;font-family:'Cinzel',serif;font-weight:900;font-size:30px;color:#ffdf7e;
  text-shadow:0 0 12px rgba(255,120,40,.9),0 2px 2px #000;animation:dmgfloat .9s ease-out forwards}
.dmg.heavy{font-size:44px;color:#ff5a4a}
.dmg.zeusd{color:#bfe6ff;text-shadow:0 0 14px rgba(90,180,255,.95),0 2px 2px #000}
@keyframes dmgfloat{
  0%{transform:translate(-50%,0) scale(.6);opacity:0}
  15%{opacity:1;transform:translate(-50%,-26px) scale(1.15)}
  100%{transform:translate(-50%,-110px) scale(.95);opacity:0}
}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none}
.hidden{display:none !important}
#topbar{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 26px;gap:18px}
.fighter{width:38%}
.fighter.left{text-align:left}.fighter.right{text-align:right}
.fname{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(16px,2.2vw,26px);letter-spacing:3px;text-shadow:0 2px 6px #000}
.fighter.left .fname{color:#ffb2a8}.fighter.right .fname{color:#ffe9b0}
.hpwrap{margin-top:4px;height:20px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 0 10px #000;transform:skewX(-14deg)}
.fighter.right .hpwrap{transform:skewX(14deg)}
.hpbar{height:100%;width:100%;transition:width .25s ease}
.hpbar.red{background:linear-gradient(90deg,#8f130d,#ff3b30 60%,#ff8a75)}
.hpbar.gold{background:linear-gradient(270deg,#8a6a10,#ffd76a 60%,#fff3c2)}
.sub{margin-top:6px;font-weight:700;font-size:15px;letter-spacing:1.5px}
#combo{color:#ffdf7e;text-shadow:0 0 8px rgba(255,160,40,.7)}
#combo.hot{color:#fff;animation:combopulse .5s infinite alternate}
@keyframes combopulse{from{transform:scale(1)}to{transform:scale(1.12)}}
#ragewrap{display:inline-block;vertical-align:middle;margin-left:8px;width:130px;height:8px;background:rgba(0,0,0,.6);border:1px solid rgba(160,210,255,.5)}
#ragebar{height:100%;width:0%;background:linear-gradient(90deg,#2e7fd9,#bfe9ff);box-shadow:0 0 10px #7fc8ff}
#rage-lbl{color:var(--ice);letter-spacing:2px;font-size:13px}
#mid{width:22%;text-align:center}
#timerlabel{font-family:'Cinzel',serif;letter-spacing:4px;font-size:13px;color:rgba(230,236,248,.55);margin-top:6px}

/* typing panel */
#typepanel{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);
  width:min(920px,92vw);background:var(--panel);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:18px 26px;box-shadow:0 8px 30px rgba(0,0,0,.55);backdrop-filter:blur(6px)}
#typepanel.err{animation:errshake .18s linear 2;border-color:rgba(255,70,60,.85)}
@keyframes errshake{25%{transform:translateX(calc(-50% - 7px))}75%{transform:translateX(calc(-50% + 7px))}}
#typeline{font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:clamp(19px,2.4vw,26px);
  white-space:pre;line-height:1.5;letter-spacing:1px;min-height:1.5em}
#typeline .done{color:#7ee787}
#typeline .cur{color:#fff;background:rgba(255,215,106,.28);border-bottom:3px solid var(--gold);animation:curblink .9s infinite}
#typeline .fu{color:rgba(226,233,245,.5)}
@keyframes curblink{50%{border-bottom-color:transparent}}
#stats{position:absolute;right:26px;bottom:150px;display:flex;flex-direction:column;gap:2px;text-align:right;
  font-size:18px;font-weight:700;letter-spacing:2px;color:#cfe0ff;text-shadow:0 1px 4px #000}

/* center message */
#center-msg{position:absolute;top:34%;left:0;right:0;text-align:center;z-index:12;pointer-events:none;
  font-family:'Cinzel',serif;font-weight:900;font-size:clamp(40px,8vw,96px);color:#fff;
  text-shadow:0 0 30px rgba(255,180,60,.9),0 4px 10px #000;opacity:0;transition:opacity .15s}
#center-msg.show{opacity:1}
#center-msg.fight{color:var(--gold)}

/* ---------- title ---------- */
#title-screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:radial-gradient(ellipse at 50% 30%,#16213a 0%,#0a0f1c 55%,#04060b 100%)}
.storm-overlay{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:3px 3px}
.gametitle{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(46px,9vw,110px);letter-spacing:8px;color:#f3f6ff;
  text-shadow:0 0 34px rgba(120,170,255,.55),0 6px 14px #000}
.gametitle .of{color:var(--gold);font-size:.5em;vertical-align:middle;margin:0 .35em;letter-spacing:2px;
  text-shadow:0 0 26px rgba(255,180,60,.8)}
.tagline{letter-spacing:4px;color:#9fb4d8;margin:6px 0 26px;font-weight:600;font-size:clamp(12px,1.6vw,18px)}
.tagline em{color:var(--red);font-style:normal}
.rulebox{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:16px 26px;margin-bottom:26px;font-size:clamp(14px,1.8vw,19px);line-height:2;max-width:92vw;
  box-shadow:0 10px 40px rgba(0,0,0,.5)}
.rulebox .kr{color:#ffb2a8}.rulebox .ze{color:var(--ice)}
#start-btn,#restart-btn{pointer-events:auto;cursor:pointer;font-family:'Cinzel',serif;font-weight:700;font-size:22px;
  letter-spacing:3px;padding:14px 48px;color:#1a1206;background:linear-gradient(180deg,#ffe9ad,#d9a93c);
  border:none;border-radius:8px;box-shadow:0 0 26px rgba(255,200,90,.55),0 4px 0 #8a6a10;transition:transform .12s}
#start-btn:hover:not(:disabled),#restart-btn:hover{transform:scale(1.05)}
#start-btn:disabled{background:#3a4152;color:#8892a8;box-shadow:none;cursor:wait}
#loadbar{width:min(420px,80vw);height:8px;background:rgba(255,255,255,.08);border-radius:4px;margin-top:18px;overflow:hidden}
#loadfill{height:100%;width:0%;background:linear-gradient(90deg,#5ea2ff,#cfe6ff);transition:width .2s}
.hint{margin-top:16px;color:#7c8db0;font-size:14px;letter-spacing:1px}

/* ---------- result ---------- */
#result-screen{position:absolute;inset:0;z-index:22;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:rgba(3,5,10,.78);backdrop-filter:blur(4px)}
#result-title{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(42px,8vw,92px);letter-spacing:6px;
  text-shadow:0 0 40px rgba(255,190,80,.75),0 4px 12px #000}
#result-flavor{color:#aebdda;font-size:clamp(14px,2vw,20px);margin:10px 0 22px;font-style:italic;max-width:80vw;text-align:center}
#result-stats{font-size:20px;letter-spacing:2px;margin-bottom:28px;color:#e8ecf4;display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
#result-stats b{color:var(--gold)}

/* screen-reader / SEO-only content — visually hidden, still crawlable */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}