:root{--ink: #0b0d12;--ink-2: #11151d;--ink-3: #171c26;--line: #232a36;--paper: #f2efe8;--dim: #8b93a3;--red: #c8452f;--red-hot: #ff7a52;--gold: #e8b84b;--jade: #5bbf8a;--violet: #8f6fd6;--c-jab: #e8b84b;--c-heavy: #e2603f;--c-throw: #8f6fd6;--c-guard: #4a9bd6;--c-advance: #5bbf8a;--c-retreat: #7d8a9c;--c-reversal: #e04b7a}*{box-sizing:border-box}html,body{margin:0;background:var(--ink);color:var(--paper);font:15px/1.6 -apple-system,Pretendard,Noto Sans KR,system-ui,sans-serif;-webkit-text-size-adjust:100%}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 50% -10%,#1a2130 0%,transparent 60%),radial-gradient(700px 400px at 50% 110%,#16111a 0%,transparent 60%);z-index:0}#app{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:18px 16px 40px;display:flex;flex-direction:column;gap:14px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px}.kanji{font-size:34px;line-height:1;color:var(--red);font-family:"Noto Serif KR",Nanum Myeongjo,serif;letter-spacing:-.04em}.titles{display:flex;flex-direction:column}.titles b{font-size:17px;letter-spacing:.04em}.titles small{font-size:11.5px;color:var(--dim)}.opponent{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}select,button{font:inherit;font-size:13px;color:var(--paper);background:var(--ink-3);border:1px solid var(--line);border-radius:7px;padding:6px 10px;cursor:pointer}select:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}button.ghost:hover,select:hover{border-color:#3a4454}.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.fighter .name{font-size:12px;color:var(--dim);letter-spacing:.06em;margin-bottom:6px;display:flex;align-items:center;gap:7px}.fighter.foe .name{justify-content:flex-end}.pips{display:inline-flex;gap:3px;font-style:normal}.pips i{width:7px;height:7px;border-radius:50%;background:#2b3341;display:block}.pips i.on{background:var(--gold);box-shadow:0 0 7px #e8b84b88}.hpwrap{display:flex;align-items:center;gap:8px}.fighter.foe .hpwrap{flex-direction:row}.hp{flex:1;height:13px;border-radius:3px;background:#241c1c;position:relative;overflow:hidden;border:1px solid #33262a}.hp:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w, 100%);background:linear-gradient(180deg,#e8734f,var(--red));transition:width .35s cubic-bezier(.2,.8,.3,1)}.fighter.foe .hp:after{inset:0 0 0 auto}.hpnum{font-size:13px;font-variant-numeric:tabular-nums;color:var(--dim);min-width:24px}.gauge{display:flex;gap:4px;margin-top:7px}.fighter.foe .gauge{justify-content:flex-end}.gauge i{width:26px;height:5px;border-radius:2px;background:#232a36;display:block;transition:background .25s}.gauge i.on{background:var(--jade);box-shadow:0 0 6px #5bbf8a66}.between{text-align:center;font-variant-numeric:tabular-nums;min-width:110px}.round{font-size:12px;letter-spacing:.1em;color:var(--dim)}.adv{font-size:18px;font-weight:700;margin:2px 0}.adv.plus{color:var(--jade)}.adv.minus{color:var(--red-hot)}.dist{font-size:11.5px;color:var(--dim)}.stage{position:relative;height:92px;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}.ground{position:absolute;left:20px;right:20px;top:52px;height:1px;background:var(--line)}.reach{position:absolute;top:40px;height:25px;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#c8452f30,#c8452f06);border-right:1px dashed #c8452f77;transition:left .4s cubic-bezier(.2,.8,.3,1),width .4s cubic-bezier(.2,.8,.3,1)}.reach:after{content:"내 사거리";position:absolute;right:5px;bottom:-1px;font-size:9.5px;color:#c8452faa;letter-spacing:.04em}.mark{position:absolute;top:20px;width:0;transition:left .4s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;align-items:center}.mark i{display:block;width:0;height:0;margin-top:14px;border-left:9px solid transparent;border-right:9px solid transparent}.mark.me i{border-bottom:20px solid var(--gold)}.mark.foe i{border-top:20px solid var(--red);border-bottom:none;margin-top:14px}.mark span{font-size:11px;white-space:nowrap;margin-top:5px;color:var(--dim);min-height:15px}.mark.hit i{animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.gap{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:11px;color:var(--dim);letter-spacing:.08em}.timeline{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px 8px}.tlhead{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);letter-spacing:.08em;margin-bottom:9px}.tlhead .hint{color:#6d7686}.track{display:flex;align-items:center;gap:9px;margin-bottom:7px}.track .who{font-size:11px;color:var(--dim);width:26px;flex:none;font-weight:400}.bars{flex:1;height:19px;display:flex;border-radius:3px;overflow:hidden;background:#0e121a}.bars span{display:block;height:100%;position:relative}.bars .seg-wait{background:repeating-linear-gradient(45deg,#1b212c,#1b212c 4px,#151a23 4px 8px)}.bars .seg-startup{background:#5a4a2a}.bars .seg-active{background:var(--gold)}.bars .seg-recovery{background:#2a3140}.bars .seg-invuln{position:absolute;inset:0;box-shadow:inset 0 0 0 2px #4a9bd6aa;pointer-events:none}.bars .seg-cut{background:#201118;opacity:.55}.bars.win .seg-active{background:var(--jade)}.bars.lose{opacity:.78}.playhead{position:absolute;top:34px;bottom:26px;width:2px;background:var(--red-hot);box-shadow:0 0 10px var(--red-hot);left:0;opacity:0;pointer-events:none}.playhead.run{animation:sweep .6s linear forwards}@keyframes sweep{0%{opacity:1;left:var(--from)}to{opacity:0;left:var(--to)}}.ruler{display:flex;justify-content:space-between;font-size:10px;color:#5c6675;padding-left:35px}.verdict{min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;padding:6px 10px;border-radius:10px;background:var(--ink-2);border:1px solid var(--line);transition:border-color .2s,background .2s}.verdict b{color:var(--gold)}.verdict.good{border-color:#2f6b4d;background:#10201a}.verdict.bad{border-color:#7d3729;background:#1f1312}.verdict .dim{color:var(--dim);font-size:12.5px}.choices{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.choices button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 9px;border-radius:10px;background:var(--ink-3);border:1px solid var(--line);position:relative;transition:transform .08s,border-color .15s,background .15s}.choices button:hover:not(:disabled){border-color:#4a5568;background:#1c222d}.choices button:active:not(:disabled){transform:translateY(1px)}.choices button:disabled{opacity:.34;cursor:not-allowed}.choices .k{font-size:10px;color:var(--dim);letter-spacing:.1em}.choices .n{font-size:15px;font-weight:700}.choices .f{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}.choices button:before{content:"";position:absolute;inset:auto 8px 0;height:2px;border-radius:2px;background:var(--tint)}.choices button.inrange{border-color:color-mix(in srgb,var(--tint) 55%,var(--line))}.choices button.inrange .n{color:var(--tint)}.choices button[data-a=jab]{--tint: var(--c-jab)}.choices button[data-a=heavy]{--tint: var(--c-heavy)}.choices button[data-a=throw]{--tint: var(--c-throw)}.choices button[data-a=guard]{--tint: var(--c-guard)}.choices button[data-a=advance]{--tint: var(--c-advance)}.choices button[data-a=retreat]{--tint: var(--c-retreat)}.choices button[data-a=reversal]{--tint: var(--c-reversal)}.log ol{list-style:none;margin:0;padding:0;max-height:168px;overflow-y:auto;font-size:12px;line-height:1.75;color:#a9b0bd;font-variant-numeric:tabular-nums}.log li{padding:3px 2px;border-bottom:1px solid #161b24}.log li:first-child{color:var(--paper)}.log li b{color:var(--gold);font-weight:600}.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px}.foot b{color:var(--paper)}.foot a{color:var(--gold);text-decoration:none}.foot a:hover{text-decoration:underline}.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#05070ccc;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.overlay .card{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:30px 40px;text-align:center;min-width:260px;animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}@keyframes pop{0%{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}.overlay .big{font-size:28px;font-weight:700;letter-spacing:-.01em}.overlay .big.win{color:var(--gold)}.overlay .big.lose{color:var(--red-hot)}.overlay .sub{color:var(--dim);font-size:13px;margin:8px 0 18px}.overlay button{padding:9px 26px;background:var(--red);border-color:var(--red);font-weight:600}.overlay button:hover{background:#d8543c}@media(max-width:620px){#app{padding:12px 10px 28px;gap:11px}.hud{grid-template-columns:1fr;gap:9px}.between{display:flex;justify-content:space-between;align-items:baseline;min-width:0}.fighter.foe .name,.fighter.foe .gauge{justify-content:flex-start}.fighter.foe .hpwrap{flex-direction:row-reverse}.fighter.foe .hp:after{inset:0 auto 0 0}.choices{grid-template-columns:repeat(4,1fr)}.kanji{font-size:27px}.log ol{max-height:120px}}