:root{--ink: #2a1a10;--paper: #fff8ea;--gold: #ffd43b;--p1: #ffd93b;--p2: #73bd7a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#140c08}body{font-family:Fredoka,system-ui,sans-serif;color:var(--paper);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;top:0;right:0;bottom:0;left:0}#game canvas{display:block;width:100%;height:100%}.hidden{display:none!important}.ink{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}#fight{position:fixed;z-index:5;top:14px;left:50%;transform:translate(-50%);width:min(980px,calc(100vw - 32px));display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:14px;pointer-events:none}#fight .name{display:block;font-size:24px;font-weight:700;color:var(--side);letter-spacing:.04em;line-height:1.1;margin:0 4px 4px;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 rgba(42,26,16,.6)}#fight .p2 .name{text-align:right}#fight .bar{position:relative;height:26px;overflow:hidden;background:#5a3a2a;border:3px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink)}#fight .bar i{position:absolute;top:0;right:0;bottom:0;left:0;transform:scaleX(var(--hp, 1));transform-origin:left}#fight .p2 .bar i{transform-origin:right}#fight .fill{background:linear-gradient(#fff,var(--side) 30%,color-mix(in srgb,var(--side) 70%,#000));transition:transform .1s}#fight .lag{background:#ff7a6a;transition:transform .6s .35s}#fight .low .fill{animation:low .6s ease-in-out infinite alternate}@keyframes low{to{filter:brightness(1.4)}}#fight .pips{display:flex;gap:6px;margin:6px 4px 0}#fight .p2 .pips{justify-content:flex-end}#fight .pips i{width:18px;height:18px;border-radius:50%;border:3px solid var(--ink);background:#ffffff40}#fight .pips i.won{background:var(--gold);box-shadow:0 0 10px var(--gold)}#fight .clock{font-size:44px;font-weight:700;color:var(--paper);line-height:1;padding-top:6px;min-width:64px;text-align:center;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}#fight .clock.hurry{color:#ff7a6a}#combo{position:fixed;z-index:6;top:30%;font-size:40px;font-weight:700;color:var(--gold);opacity:0;pointer-events:none;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;transform:rotate(-6deg)}#combo.p1{left:6%}#combo.p2{right:6%;transform:rotate(6deg)}#combo.show{animation:combo 1.2s ease-out forwards}#combo small{display:block;font-size:20px;color:var(--paper)}@keyframes combo{0%{opacity:0;scale:1.6}10%{opacity:1;scale:1}70%{opacity:1}to{opacity:0}}#banner{position:fixed;z-index:7;left:50%;top:28%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:0;white-space:nowrap}#banner b{display:block;font-size:clamp(52px,10vw,110px);line-height:1;color:var(--gold);letter-spacing:.03em;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 rgba(42,26,16,.5)}#banner span{display:block;margin-top:8px;font-size:24px;font-weight:600;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}#banner.show{animation:banner 1.6s ease-out forwards}#banner.hold{animation:banner-in .3s ease-out forwards}@keyframes banner{0%{opacity:0;scale:1.8}12%{opacity:1;scale:1}75%{opacity:1}to{opacity:0;scale:1.05}}@keyframes banner-in{0%{opacity:0;scale:1.8}to{opacity:1;scale:1}}#hint{position:fixed;z-index:6;left:50%;bottom:22px;transform:translate(-50%);font-size:18px;text-align:center;background:#2a1a1099;border-radius:12px;padding:6px 14px;pointer-events:none}#practice-bar{position:fixed;z-index:6;left:50%;bottom:18px;transform:translate(-50%);font-size:16px;text-align:center;background:#2a1a10a6;border-radius:12px;padding:6px 14px;pointer-events:none;white-space:nowrap}#practice-bar b{color:var(--gold)}#touch{position:fixed;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none}#touch button{pointer-events:auto;touch-action:none;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:var(--paper);opacity:.9}#touch button:active{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 var(--ink)}#t-pause{position:absolute;top:calc(env(safe-area-inset-top) + 70px);left:50%;margin-left:-23px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}#t-pause svg{fill:var(--ink)}.t-buttons{position:absolute;right:calc(env(safe-area-inset-right) + 18px);bottom:calc(env(safe-area-inset-bottom) + 18px);display:grid;grid-template-columns:repeat(3,88px);grid-template-areas:". heavy special" "light block jump";gap:10px 12px}#touch .t-buttons button{width:88px;height:88px;border-radius:50%;font-size:19px;line-height:1.1}#touch #t-heavy{grid-area:heavy;background:#ff9a5a}#touch #t-special{grid-area:special;background:#b98cff}#touch #t-light{grid-area:light;background:#ffe58a}#touch #t-block{grid-area:block;background:#9fd0ff}#touch #t-jump{grid-area:jump;background:var(--gold)}#t-dot,#t-thumb{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none}#t-dot{width:64px;height:64px;margin:-32px;border:3px solid rgba(255,255,255,.45)}#t-thumb{width:26px;height:26px;margin:-13px;background:#ffffff80}body.touch .keys,body.touch #practice-bar{display:none!important}body:not(.touch) .touch-help,body:not(.touch) .menu.back{display:none}.touch-help{font-size:16px;line-height:1.45;margin:12px 0 0}.menu.back{margin-top:16px;min-width:0}.menu.back button{font-size:20px;padding:8px 28px}.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center}.screen h2{font-size:clamp(34px,6vw,56px);margin:0 0 16px;color:var(--gold);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}.keys{opacity:.75;font-size:15px;margin-top:18px;text-shadow:0 1px 2px #000}.menu{display:flex;flex-direction:column;gap:10px;min-width:min(320px,90vw)}.menu button{font:inherit;font-size:24px;font-weight:600;color:var(--ink);background:var(--paper);cursor:pointer;border:3px solid var(--ink);border-radius:16px;padding:10px 22px;box-shadow:0 4px 0 var(--ink);transition:transform .08s,background .08s}.menu button.on,.menu button:hover{background:var(--gold);transform:translateY(-2px)}.menu button:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}#title{background:radial-gradient(ellipse at 50% 40%,#2a1a1026,#140c08bf)}.logo{margin:0 0 6px;font-size:clamp(64px,13vw,140px);line-height:.85;font-weight:700;color:var(--p1);letter-spacing:.02em;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 rgba(42,26,16,.6);transform:rotate(-3deg)}.logo span{color:#ff7a4a;font-size:1.15em}.tag{font-size:20px;margin:10px 0 24px;text-shadow:0 2px 3px #000;max-width:560px}#select{justify-content:flex-end;padding-bottom:32px;background:linear-gradient(transparent 55%,#140c08cc)}#select h2{position:absolute;top:18px;left:0;right:0}#select .cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}#select .card{width:128px;padding:10px 6px;border:4px solid var(--ink);border-radius:18px;background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .1s}#select .card .swatch{width:54px;height:54px;margin:0 auto 6px;border-radius:50%;border:3px solid var(--ink)}#select .card b{font-size:18px;display:block}#select .card.on{background:var(--gold);transform:translateY(-8px) scale(1.06)}#select .card.taken{opacity:.5}#select .about{margin-top:16px;min-height:52px}#select .about b{display:block;font-size:28px;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;color:var(--gold)}#select .about span{font-size:18px;text-shadow:0 1px 2px #000}#vs{background:#140c088c}.vs-row{display:flex;align-items:center;gap:24px;font-size:clamp(36px,8vw,84px);font-weight:700;flex-wrap:wrap;justify-content:center}.vs-row b{-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}.vs-row b.a{animation:slide-l .4s ease-out}.vs-row b.b{animation:slide-r .4s ease-out}.vs-row i{font-style:normal;color:#ff7a4a;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;font-size:.8em}@keyframes slide-l{0%{transform:translate(-60vw)}}@keyframes slide-r{0%{transform:translate(60vw)}}#vs .where{font-size:26px;margin:10px 0 0;text-shadow:0 2px 3px #000}#vs .ladder{font-size:18px;opacity:.85}#results,#pause,#moves{background:#140c08b8}#results .sub{font-size:22px;margin:0 0 22px;max-width:640px}#moves{justify-content:flex-start;overflow-y:auto}#moves .cols{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;text-align:left;max-width:1100px}#moves section{flex:1 1 380px;background:#fff8ea14;border-radius:16px;padding:12px 18px}#moves h3{margin:6px 0 8px;color:var(--gold);font-size:22px}#moves table{border-collapse:collapse;width:100%;font-size:16px}#moves th{text-align:left;padding:3px 8px 3px 0;font-weight:600}#moves td{padding:3px 8px;opacity:.9}#moves ul{padding-left:18px;margin:0;font-size:16px;line-height:1.45}#moves .fighter{margin-bottom:10px}#moves .fighter b{font-size:18px}#moves .fighter .mv{display:flex;justify-content:space-between;font-size:16px;gap:10px}#moves .fighter .mv span:last-child{font-weight:600;color:var(--gold);white-space:nowrap}@media (max-height: 500px){.t-buttons{grid-template-columns:repeat(3,66px);gap:8px 10px;right:calc(env(safe-area-inset-right) + 10px);bottom:calc(env(safe-area-inset-bottom) + 10px)}#touch .t-buttons button{width:66px;height:66px;font-size:15px}#t-pause{top:calc(env(safe-area-inset-top) + 50px);width:40px;height:40px;margin-left:-20px}#fight{top:8px}#fight .bar{height:18px}#banner b{font-size:clamp(40px,9vw,72px)}#select .card{width:96px;padding:6px 4px}#select .card .swatch{width:36px;height:36px}#select .about{margin-top:8px}.menu button{font-size:19px;padding:7px 18px}.logo{font-size:clamp(44px,10vw,80px)}.screen{padding:10px 16px}.screen h2{font-size:34px;margin-bottom:10px}#pause .menu,#results .menu{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;width:min(620px,92vw)}.tag{margin:6px 0 12px;font-size:16px}}@media (max-width: 640px){#fight .name{font-size:17px}#fight .clock{font-size:32px;min-width:44px}#select .card{width:84px}#select .card .swatch{width:38px;height:38px}}