:root{
  --arena:#0B0B0D;
  --arena2:#141417;
  --lona:#D9D6CF;
  --red:#C8102E;
  --red-d:#8f0a20;
  --blue:#1F4FA8;
  --blue-d:#164078;
  --gold:#C9A44C;
  --steel1:#8A8F96;
  --steel2:#E4E7EA;
  --ice:#F4F4F2;
  --ink:#0B0B0D;
  --title:'Anton', 'Arial Narrow', Impact, sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;overflow:hidden;background:var(--arena);color:var(--ice);
  font-family:var(--cond);font-weight:600;-webkit-user-select:none;user-select:none;touch-action:none}
#app{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--arena)}
.screen{position:absolute;inset:0;display:none;z-index:10}
.screen.active{display:block}

/* steel plate key */
.kbd{display:inline-block;min-width:1.5em;text-align:center;padding:.05em .35em;margin:0 .1em;
  font-family:var(--cond);font-weight:700;font-size:.82em;letter-spacing:.05em;color:#16181b;
  background:linear-gradient(180deg,var(--steel2),var(--steel1));
  border:1px solid #6d7278;border-bottom-width:2px;box-shadow:0 1px 0 #4a4d52}
.flag{font-size:1.1em;line-height:1}

/* ================= 1. TITLE ================= */
#screen-title{flex-direction:column;align-items:center;justify-content:center;text-align:center}
#screen-title.active{display:flex}
#screen-title::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(11,11,13,.9),rgba(11,11,13,.62) 55%,rgba(11,11,13,.15) 100%)}
.title-wrap{position:relative;z-index:3;padding:4vh 3vw;transform:translateY(-4vh)}
.brand{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.4rem}
.brand img{width:clamp(42px,6vw,72px);height:auto;filter:drop-shadow(0 0 18px rgba(200,16,46,.45))}
.brand-txt{text-align:left;line-height:.85}
.brand-txt b{display:block;font-family:var(--title);font-size:clamp(20px,3.4vw,38px);letter-spacing:.02em}
.brand-txt i{display:block;font-family:var(--cond);font-style:italic;font-weight:800;
  font-size:clamp(14px,2.2vw,26px);letter-spacing:.35em;color:var(--red)}
.title-band{position:relative;display:inline-block;padding:.2em .6em;margin-bottom:.4rem}
.title-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--red),var(--red-d));
  transform:skewX(-12deg) scaleX(1.08) translateX(-4%);
  box-shadow:0 10px 40px rgba(200,16,46,.35)}
.title-band h1{font-family:var(--title);font-style:italic;font-size:clamp(46px,13vw,170px);
  line-height:.92;letter-spacing:-.01em;text-shadow:0 6px 0 rgba(0,0,0,.35)}
.subtitle{font-family:var(--cond);font-weight:500;letter-spacing:.28em;font-size:clamp(11px,1.7vw,17px);
  color:#d7d9dc;margin-top:1rem;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.prompt{margin-top:2.4rem;background:none;border:none;color:var(--ice);cursor:pointer;
  font-family:var(--title);font-size:clamp(15px,2.1vw,24px);letter-spacing:.06em;font-style:italic;
  text-shadow:0 2px 10px rgba(0,0,0,.95)}
.prompt span{display:block;font-family:var(--cond);font-style:normal;font-weight:500;
  font-size:.62em;letter-spacing:.22em;color:#9a9da1;margin-top:.35em}
@keyframes blinky{0%,100%{opacity:1}50%{opacity:.28}}
.pulse{animation:blinky 1.6s ease-in-out infinite}
.title-foot{position:absolute;bottom:2.5vh;left:0;right:0;font-weight:500;letter-spacing:.3em;
  font-size:clamp(9px,1.2vw,12px);color:#9a9da1;text-shadow:0 2px 8px rgba(0,0,0,.95)}

/* ================= 2. SELECT ================= */
#screen-select{flex-direction:column;padding:2.4vh 3vw}
#screen-select.active{display:flex}
.sel-head{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:3px solid var(--red);padding-bottom:.6rem;margin-bottom:1.2rem}
.sel-title .tag{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:11px;
  letter-spacing:.25em;padding:.15em .6em;transform:skewX(-10deg)}
.sel-title h2{font-family:var(--title);font-size:clamp(22px,4.2vw,52px);letter-spacing:.01em;margin-top:.25rem}
.side-tag{font-family:var(--cond);font-weight:800;font-style:italic;font-size:clamp(12px,1.7vw,18px);
  letter-spacing:.15em;padding:.25em .7em;color:#fff}
.side-tag.red{background:var(--red)} .side-tag.blue{background:var(--blue)}
.sel-body{flex:1;display:flex;gap:2vw;min-height:0}
.sel-left{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,1vw,14px)}
.card{position:relative;aspect-ratio:4/5;cursor:pointer;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%);
  border:2px solid #3a3d42;background:#15161a;transition:transform .14s ease-out}
.card canvas{position:absolute;inset:0;width:100%;height:100%}
.card .cname{position:absolute;left:0;right:0;bottom:0;padding:.28em .5em;
  font-family:var(--cond);font-weight:800;font-size:clamp(9px,1.15vw,14px);letter-spacing:.04em;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));text-transform:uppercase}
.card .cnum{position:absolute;top:.25em;left:.4em;font-family:var(--title);font-size:clamp(11px,1.5vw,18px);
  color:#8b8f95;font-style:italic}
.card.sel{border-color:var(--red);transform:translateY(-3px) scale(1.02);
  box-shadow:0 0 0 3px rgba(200,16,46,.5),0 12px 30px rgba(0,0,0,.6);z-index:2}
.card.sel .cnum{color:var(--red)}
.card.cpu{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,79,168,.5)}
.card.cpu .cnum{color:var(--blue)}
.card .tagme{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-weight:800;
  font-size:9px;letter-spacing:.18em;padding:.15em .4em}
.sel-right{width:min(38%,380px)}
.tape{position:relative;height:100%;background:linear-gradient(180deg,#191b1f,#101114);
  border-left:4px solid var(--steel1);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0)}
.preview{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.tape-inner{position:relative;z-index:1;height:100%;padding:1rem 1.1rem;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(12,13,16,.12) 0%,rgba(12,13,16,.04) 34%,rgba(12,13,16,.8) 60%,rgba(12,13,16,.95) 100%)}
.tape-top{display:flex;justify-content:space-between;align-items:center}
.tape-top .flag{font-size:clamp(18px,2.6vw,30px)}
.nick{font-family:var(--cond);font-style:italic;font-weight:800;font-size:clamp(12px,1.7vw,20px);
  letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.tape-name{font-family:var(--title);font-size:clamp(24px,3.8vw,46px);line-height:.95;margin:.3rem 0 .8rem;
  text-transform:uppercase}
.tape-meta{display:flex;gap:1rem;padding:.6rem 0;border-top:1px solid #33363b;border-bottom:1px solid #33363b}
.tape-meta>div{flex:1}
.tape-meta label{display:block;font-size:10px;letter-spacing:.22em;color:#8a8e94}
.tape-meta b{font-family:var(--title);font-size:clamp(15px,2vw,24px);color:var(--ice)}
.bars{margin:.7rem 0;display:flex;flex-direction:column;gap:.4rem}
.bar-row{display:grid;grid-template-columns:5.2em 1fr auto;align-items:center;gap:.5rem}
.bar-row label{font-size:11px;letter-spacing:.16em;color:#a9adb2;text-transform:uppercase}
.bar-track{height:9px;background:#2a2d31;position:relative;transform:skewX(-14deg)}
.bar-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--steel1),var(--steel2))}
.bar-row.hot .bar-fill{background:linear-gradient(90deg,var(--red-d),var(--red))}
.bar-row b{font-family:var(--title);font-size:13px;color:#cfd2d6}
.sig{margin-top:auto;padding-top:.6rem;border-top:1px solid #33363b}
.sig label{display:block;font-size:10px;letter-spacing:.22em;color:#8a8e94}
.sig b{font-family:var(--cond);font-style:italic;font-weight:800;font-size:clamp(13px,1.7vw,19px);
  color:var(--gold);text-transform:uppercase}
.sel-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}
.hint-keys{font-weight:500;letter-spacing:.06em;font-size:clamp(11px,1.4vw,15px);color:#b9bcc0}
.cta{font-family:var(--title);font-style:italic;font-size:clamp(16px,2.2vw,26px);letter-spacing:.04em;
  color:#fff;background:linear-gradient(120deg,var(--red),var(--red-d));border:none;cursor:pointer;
  padding:.4em 1.1em;transform:skewX(-10deg);box-shadow:0 8px 24px rgba(200,16,46,.35)}
.cta small{display:inline-block;font-family:var(--cond);font-style:normal;font-size:.6em;
  margin-left:.6em;opacity:.8}
.cta.ghost{background:linear-gradient(120deg,#3a3d42,#232529);box-shadow:none;border:1px solid var(--steel1)}
.cta:active{transform:skewX(-10deg) translateY(1px)}

/* ================= 3. VS ================= */
#screen-vs{align-items:center;justify-content:center}
#screen-vs.active{display:flex}
.vs-red,.vs-blue{position:absolute;top:0;bottom:0;width:52%;display:flex;flex-direction:column;
  justify-content:center;padding:0 3vw;animation:slideIn .28s cubic-bezier(.2,.9,.25,1) both}
.vs-red{left:0;align-items:flex-start;background:linear-gradient(100deg,var(--red) 0%,var(--red-d) 60%,transparent 100%);
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.vs-blue{right:0;align-items:flex-end;text-align:right;
  background:linear-gradient(260deg,var(--blue) 0%,var(--blue-d) 60%,transparent 100%);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
@keyframes slideIn{from{opacity:0;transform:translateX(var(--dx,40px))}to{opacity:1;transform:none}}
.vs-red{--dx:-60px}.vs-blue{--dx:60px}
.vs-name{font-family:var(--title);font-style:italic;font-size:clamp(30px,8vw,120px);line-height:.9;
  text-transform:uppercase;text-shadow:0 4px 0 rgba(0,0,0,.4)}
.vs-meta{font-family:var(--cond);font-weight:500;letter-spacing:.2em;font-size:clamp(11px,1.6vw,18px);
  color:rgba(255,255,255,.85);margin-top:.6rem;text-transform:uppercase}
.vs-center{position:relative;z-index:5;display:flex;align-items:center;justify-content:center}
.vs-word{font-family:var(--title);font-style:italic;font-size:clamp(60px,16vw,230px);color:var(--gold);
  text-shadow:0 0 40px rgba(201,164,76,.6),0 8px 0 rgba(0,0,0,.5);animation:vsPop .3s ease-out both}
@keyframes vsPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* ================= 4. HUD ================= */
.hud{position:absolute;inset:0;display:none;z-index:12;pointer-events:none}
.hud.on{display:block}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;
  justify-content:space-between;padding:1.4vh 1.6vw;gap:1vw}
.life-wrap{flex:1;max-width:42%}
.life-name{display:flex;align-items:center;gap:.5em;font-family:var(--title);font-style:italic;
  font-size:clamp(12px,1.7vw,22px);letter-spacing:.02em;text-transform:uppercase;margin-bottom:.28em}
.life-wrap.right .life-name{justify-content:flex-end}
.life-frame{position:relative;height:clamp(14px,2.4vw,26px);transform:skewX(-18deg);
  background:#15161a;border:2px solid var(--steel1);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.5)}
.life-wrap.left .life-frame{border-left:3px solid var(--steel2)}
.life-wrap.right .life-frame{border-right:3px solid var(--steel2)}
.life-lag{position:absolute;inset:0 auto 0 0;width:100%;background:#e8e2d8;opacity:.38;transition:width .45s .25s ease-out}
.life-fill{position:absolute;inset:0 auto 0 0;width:100%;
  background:linear-gradient(180deg,#e04a4a,var(--red) 55%,var(--red-d));transition:width .12s linear}
.life-wrap.right .life-lag,.life-wrap.right .life-fill{inset:0 0 0 auto;background-position:right}
.life-wrap.right .life-fill{background:linear-gradient(180deg,#4a7ee0,var(--blue) 55%,var(--blue-d))}
.life-stam{height:6px;margin-top:.3em;background:#1b1d20;transform:skewX(-18deg);max-width:70%}
.life-wrap.right .life-stam{margin-left:auto}
.life-stam i{display:block;height:100%;width:100%;background:var(--gold);transition:width .2s}
.clock{text-align:center;min-width:7em}
.clock .round{font-family:var(--cond);font-weight:800;font-style:italic;letter-spacing:.2em;
  font-size:clamp(11px,1.6vw,18px);color:var(--gold)}
.clock .time{font-family:var(--title);font-size:clamp(26px,5vw,64px);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.hud-shield{position:absolute;top:clamp(58px,9vw,110px);left:0;right:0;display:flex;justify-content:space-between;
  padding:0 3vw}
.shield{font-size:clamp(20px,3.4vw,40px);opacity:.15;transition:opacity .1s,filter .1s;filter:grayscale(1)}
.shield.on{opacity:1;filter:none;text-shadow:0 0 16px var(--red)}
.float-msgs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fmsg{position:absolute;font-family:var(--title);font-style:italic;font-size:clamp(20px,3.6vw,48px);
  color:#c7c9cc;text-shadow:0 3px 0 rgba(0,0,0,.6);animation:floatup .8s ease-out forwards;
  transform:translate(-50%,-50%);white-space:nowrap}
.fmsg.dmg{color:#fff}
.fmsg.ko{color:var(--red);font-size:clamp(30px,6vw,80px)}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}
.round-banner{position:absolute;top:14%;left:0;right:0;text-align:center;font-family:var(--title);
  font-style:italic;font-size:clamp(30px,7vw,96px);color:var(--ice);text-shadow:0 6px 0 rgba(0,0,0,.5);
  opacity:0;pointer-events:none}
.round-banner.show{animation:bannerIn 1.6s ease-out forwards}
@keyframes bannerIn{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1)}
  75%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
.hitflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.hud-keys{position:absolute;bottom:1.4vh;left:50%;transform:translateX(-50%);
  font-weight:500;letter-spacing:.05em;font-size:clamp(10px,1.3vw,14px);color:#b9bcc0;white-space:nowrap;
  background:rgba(11,11,13,.4);padding:.3em .8em;border-radius:2px}

/* ================= touch ================= */
.touch{position:absolute;inset:0;z-index:14;display:none;pointer-events:none}
.touch.on{display:block}
.touch .dpad{position:absolute;left:3vw;bottom:4vh;display:flex;gap:2.2vw;align-items:flex-end}
.touch .tbtns{position:absolute;right:3vw;bottom:4vh;display:flex;gap:2vw;align-items:flex-end}
.tbtn{pointer-events:auto;font-family:var(--cond);font-weight:800;font-size:clamp(11px,1.5vw,16px);
  letter-spacing:.05em;color:#fff;background:rgba(9,10,12,.62);border:2px solid var(--steel1);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5)}
.tbtn:active,.tbtn.down{background:rgba(200,16,46,.86);border-color:#fff}
.tbtn.dpad-l,.tbtn.dpad-r{width:clamp(54px,8.5vw,88px);height:clamp(54px,8.5vw,88px);font-size:clamp(18px,2.6vw,30px);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.tbtn.round{width:clamp(66px,10vw,108px);height:clamp(66px,10vw,108px);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

/* ================= 5. RESULT ================= */
#screen-result{align-items:center;justify-content:center;text-align:center}
#screen-result.active{display:flex}
.ko-word{position:absolute;top:6vh;left:0;right:0;z-index:25;text-align:center;font-family:var(--title);
  font-style:italic;font-size:clamp(70px,20vw,260px);color:var(--red);pointer-events:none;
  text-shadow:0 8px 0 rgba(0,0,0,.5),0 0 60px rgba(200,16,46,.5);opacity:0}
.ko-word.show{animation:koIn .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes koIn{from{opacity:0;transform:scale(2.4) rotate(-6deg)}to{opacity:1;transform:scale(1) rotate(-3deg)}}
.result-card{position:relative;z-index:3;margin-top:22vh;display:none;flex-direction:column;align-items:center;gap:.5rem;
  background:linear-gradient(180deg,rgba(20,21,25,.9),rgba(11,11,13,.92));padding:1.6rem 3rem;
  border-top:4px solid var(--gold);border-bottom:1px solid var(--steel1);min-width:min(80vw,520px)}
.result-card.show{display:flex;animation:cardIn .3s ease-out both}
@keyframes cardIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.result-badge{font-family:var(--cond);font-weight:800;letter-spacing:.4em;font-size:clamp(11px,1.5vw,15px);color:var(--gold)}
.result-flag{font-size:clamp(26px,4vw,44px)}
.result-name{font-family:var(--title);font-style:italic;font-size:clamp(30px,7vw,90px);line-height:.95;
  text-transform:uppercase;color:var(--gold);text-shadow:0 4px 0 rgba(0,0,0,.5)}
.result-sub{font-family:var(--cond);font-weight:500;letter-spacing:.14em;color:#c7c9cc;
  font-size:clamp(12px,1.6vw,18px);text-transform:uppercase}
.result-btns{display:flex;gap:1rem;margin-top:1.2rem;flex-wrap:wrap;justify-content:center}

/* diagonal red wipe */
#wipe{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden;opacity:0}
#wipe.go{animation:wipeIn .42s ease-out both}
#wipe span{position:absolute;left:-20%;width:60%;top:-20%;bottom:-20%;background:var(--red);
  transform:skewX(-16deg);box-shadow:0 0 60px rgba(200,16,46,.6)}
#wipe span:nth-child(1){left:-40%}
#wipe span:nth-child(2){left:5%;background:var(--red-d)}
#wipe span:nth-child(3){left:50%;background:#0B0B0D}
@keyframes wipeIn{0%{opacity:0;transform:translateX(-120%)}40%{opacity:1}100%{opacity:1;transform:translateX(0)}
  90%{opacity:1}100%{opacity:0}}

/* ================= responsiveness: portrait ================= */
@media (orientation:portrait){
  .grid{grid-template-columns:repeat(3,1fr)}
  .sel-body{flex-direction:column}
  .sel-right{width:100%;max-height:34vh}
  .tape{clip-path:none}
  .vs-name{font-size:clamp(24px,9vw,60px)}
  .hud-keys{display:none}
  #screen-title .title-wrap{transform:none}
  .life-wrap{max-width:46%}
}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .tape-meta{gap:.5rem}
}