:root{--bg: #08080b;--panel: #121218;--panel-2: #1a1a22;--line: #26262f;--text: #f4f4f5;--muted: #8b8b96;--accent: #ef4444;--gold: #fbbf24;--title: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none}.app{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(1100px 600px at 50% -10%,#1b1b26 0%,transparent 70%),linear-gradient(180deg,#0b0b10,#050507)}.stage{position:relative;width:100%;max-width:calc(100vh * 16 / 9);aspect-ratio:16 / 9;max-height:100vh;background:#000;overflow:hidden}.stage canvas{display:block;width:100%;height:100%}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px);padding:clamp(12px,3vh,30px);overflow:hidden}.title-wrap{text-align:center;margin-top:2vh;flex-shrink:0}.title{font-family:var(--title);font-size:clamp(38px,9.4vw,128px);line-height:.86;letter-spacing:-.03em;margin:0;transform:skew(-7deg);background:linear-gradient(180deg,#fff,#fca5a5 48%,#b91c1c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 0 rgba(0,0,0,.45);filter:drop-shadow(0 0 26px rgba(239,68,68,.35))}.title small{display:block;font-family:var(--title);font-size:clamp(11px,1.9vw,24px);letter-spacing:.44em;color:var(--gold);-webkit-text-fill-color:var(--gold);margin-top:1.1em;filter:none;text-shadow:none}.menu{display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px);align-items:center;margin:auto 0;width:min(460px,88%);align-self:center;flex-shrink:0}.btn{width:100%;padding:clamp(10px,1.9vh,17px) 22px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:2px solid var(--line);color:var(--text);font-family:var(--title);font-size:clamp(14px,2.1vw,21px);letter-spacing:.08em;cursor:pointer;transform:skew(-9deg);transition:transform .09s,border-color .12s,background .12s;position:relative}.btn>span{display:block;transform:skew(9deg)}.btn:hover,.btn:focus-visible{border-color:var(--accent);background:linear-gradient(180deg,#2a1516,#170d0f);outline:none}.btn:active{transform:skew(-9deg) scale(.975)}.btn.primary{border-color:var(--accent);background:linear-gradient(180deg,#dc2626,#7f1d1d)}.btn.ghost{background:transparent;border-color:#2c2c36;font-size:clamp(11px,1.5vw,15px);padding:10px 16px}.hint{color:var(--muted);font-size:clamp(10px,1.35vw,14px);text-align:center;letter-spacing:.06em}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0;padding-right:46px}.h2{font-family:var(--title);font-size:clamp(16px,2.6vw,30px);margin:0;transform:skew(-7deg);letter-spacing:.02em}.sub{color:var(--muted);font-size:clamp(10px,1.3vw,13px);letter-spacing:.16em;text-transform:uppercase;margin:2px 0 0}.roster{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(5px,.9vw,11px);flex:1 1 auto;min-height:0}.card{position:relative;min-height:0;background:linear-gradient(180deg,#17171f,#0d0d12);border:2px solid var(--line);cursor:pointer;overflow:hidden;transition:border-color .12s,transform .12s}.card canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.card:hover{border-color:#52525b}.card.sel{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 10px 0 -4px #fbbf2440}.card.locked{filter:grayscale(1) brightness(.42)}.card .cname{position:absolute;left:0;right:0;bottom:0;padding:6px 7px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.92) 45%);font-family:var(--title);font-size:clamp(9px,1.35vw,16px);letter-spacing:.02em;text-align:center}.card .cnick{display:block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(7px,.85vw,10px);letter-spacing:.1em;color:var(--muted);font-weight:700}.detail{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(10px,2vw,26px);align-items:center;flex-shrink:0}.stats{display:flex;flex-direction:column;gap:clamp(3px,.7vh,7px)}.stat{display:grid;grid-template-columns:94px 1fr;align-items:center;gap:10px;font-size:clamp(9px,1.15vw,12px);letter-spacing:.12em;color:var(--muted);font-weight:800}.stat i{display:block;height:9px;background:#1d1d25;position:relative;font-style:normal}.stat i b{position:absolute;inset:0 auto 0 0;display:block;background:linear-gradient(90deg,var(--accent),var(--gold))}.bio{font-size:clamp(11px,1.35vw,15px);color:#d4d4d8;line-height:1.5;margin:0 0 10px}.arena-tag{display:inline-block;font-family:var(--title);font-size:clamp(9px,1.2vw,13px);letter-spacing:.2em;color:var(--gold);border:1px solid rgba(251,191,36,.35);padding:4px 10px;margin-bottom:10px}.vs-row{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,40px);margin:auto 0}.vs-face{position:relative;width:clamp(120px,24vw,300px);aspect-ratio:3 / 4;background:linear-gradient(180deg,#17171f,#0b0b10);border:3px solid var(--line)}.vs-face canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.vs-mark{font-family:var(--title);font-size:clamp(30px,8vw,96px);color:var(--accent);transform:skew(-10deg);text-shadow:0 6px 0 rgba(0,0,0,.5)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#040407db;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5%;gap:clamp(6px,1.4vh,14px);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.big{font-family:var(--title);font-size:clamp(34px,8vw,104px);transform:skew(-8deg);margin:0;letter-spacing:-.01em}.big.win{color:var(--gold);text-shadow:0 7px 0 rgba(0,0,0,.5)}.big.lose{color:#ef4444;text-shadow:0 7px 0 rgba(0,0,0,.5)}.scoreline{display:flex;gap:clamp(12px,4vw,46px);font-size:clamp(10px,1.4vw,14px);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin:6px 0 4px}.scoreline b{display:block;color:var(--text);font-family:var(--title);font-size:clamp(17px,2.6vw,30px);letter-spacing:0;margin-top:2px}.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(8px,1.6vw,18px);width:min(900px,94%);margin:auto 0}.keys section{border:1px solid var(--line);background:#121218b3;padding:clamp(9px,1.6vh,15px)}.keys h3{font-family:var(--title);font-size:clamp(11px,1.5vw,15px);margin:0 0 8px;color:var(--gold);letter-spacing:.1em}.keys li{list-style:none;display:flex;justify-content:space-between;gap:10px;font-size:clamp(10px,1.25vw,13px);padding:3px 0;color:#d4d4d8}.keys ul{margin:0;padding:0}.keys kbd{background:#22222b;border:1px solid #33333f;border-bottom-width:3px;border-radius:4px;padding:1px 7px;font-family:ui-monospace,monospace;font-size:.92em;color:#fff;white-space:nowrap}.pad{position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end;padding:0 2.2% 2.4%}.pad-group{display:grid;gap:clamp(4px,.9vw,9px);pointer-events:auto}.pad-left{grid-template-areas:". up ." "left down right";grid-template-columns:repeat(3,1fr)}.pad-right{grid-template-columns:repeat(2,1fr);grid-template-areas:"hook upper" "jab cross"}.pk{width:clamp(44px,8.4vw,80px);height:clamp(44px,8.4vw,80px);border-radius:50%;border:2px solid rgba(255,255,255,.22);background:#14141a99;color:#fff;font-family:var(--title);font-size:clamp(9px,1.5vw,14px);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);touch-action:none}.pk:active,.pk.on{background:#ef44448c;border-color:#fca5a5}.pk.sp{grid-column:span 2;width:100%;border-radius:40px;height:clamp(30px,5vw,44px);background:#fbbf2438;border-color:#fbbf2499}.corner{position:absolute;top:clamp(8px,1.6vh,16px);right:clamp(8px,1.6vw,16px);z-index:5}.corner.mid{top:17%;right:auto;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:5}.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#0a0a0eb3;color:var(--muted);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}.icon-btn:hover{color:#fff;border-color:#52525b}.ladder{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:8px}.ladder span{width:26px;height:5px;background:#2a2a33}.ladder span.done{background:var(--gold)}.ladder span.now{background:var(--accent)}.row{display:flex;gap:10px;width:min(460px,88%);align-self:center}.fade{animation:fade .28s ease both}@keyframes fade{0%{opacity:0;transform:translateY(8px)}}@media(max-width:640px){.roster{grid-template-columns:repeat(4,1fr)}.detail{grid-template-columns:1fr;gap:8px}.bio{display:none}}.keyhint{position:absolute;left:50%;bottom:clamp(8px,2.2vh,22px);transform:translate(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(4px,1vw,12px);padding:8px 14px;background:#06060ab8;border:1px solid var(--line);border-radius:8px;font-size:clamp(9px,1.1vw,12px);color:var(--muted);letter-spacing:.04em;pointer-events:none;animation:fade .4s ease both}.keyhint kbd{background:#22222b;border:1px solid #33333f;border-bottom-width:2px;border-radius:4px;padding:1px 5px;margin-right:3px;font-family:ui-monospace,monospace;color:#fff}.rotate-hint{display:none}@media(orientation:portrait)and (pointer:coarse){.rotate-hint{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#08080b;text-align:center;padding:10vw}.rotate-hint b{font-family:var(--title);font-size:26px;letter-spacing:.04em}.rotate-hint span{color:var(--muted);font-size:14px}}