@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#07171d;--gold:#dfbd7c;--muted:#a4b5b8;--line:#294149;--teal:#71dac4}*{box-sizing:border-box}html,body{margin:0;background:var(--ink);color:#f5eddd;font-family:Inter,system-ui,sans-serif}body{min-height:100svh}button,a,select{touch-action:manipulation}button{font:inherit;color:inherit;border:1px solid var(--line);background:#10272e;cursor:pointer;padding:10px 14px;border-radius:5px;transition:background .15s,border-color .15s}button:hover{background:#1c3c42;border-color:var(--gold)}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.35;cursor:default}button.primary{background:var(--gold);color:#142027;font-weight:700;border-color:var(--gold)}button.primary:hover{background:#f4d59b}#app{max-width:1600px;margin:auto;padding:0 34px}header{height:95px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{color:var(--gold);text-decoration:none;display:flex;align-items:center;gap:12px;font-family:Cinzel,Georgia,serif;letter-spacing:4px;font-size:23px}.brand small{display:block;font:10px Inter,sans-serif;letter-spacing:4px;color:#b9c3c4;margin-top:4px}.sigil{font-size:45px;line-height:1;border:1px solid #786746;width:49px;height:53px;border-radius:30px 30px 2px 2px;text-align:center}.header-right{display:flex;align-items:center;gap:8px}.header-right button{background:transparent;font-size:13px}#padStatus{font-size:12px;color:var(--muted);margin-right:15px}#padStatus.connected{color:var(--teal)}kbd{font:12px monospace;color:var(--gold);margin-left:6px}.arena{position:relative;aspect-ratio:2/1;overflow:hidden;border:1px solid #506265;background:#11292c;box-shadow:0 20px 80px #0005}canvas{display:block;width:100%;height:100%;image-rendering:auto}.arena:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0006}.hud{position:absolute;top:5%;left:4%;right:4%;display:grid;grid-template-columns:1fr 85px 1fr;gap:25px;z-index:2}.names{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-shadow:0 2px 4px #000}.names b{font-family:Cinzel,serif;font-size:23px;letter-spacing:1px}.names span{font-size:10px;letter-spacing:1.5px}.enemy .names{flex-direction:row-reverse}.health{height:18px;border:1px solid #eed5a377;margin-top:7px;background:#190f17dd;padding:3px;transform:skewX(-10deg)}.health i{display:block;height:100%;background:linear-gradient(90deg,#67b3a1,#b5ecbd);width:100%;transition:width .12s}.enemy .health i{background:linear-gradient(90deg,#eeab6f,#c36750);float:right}.energy{height:4px;background:#071315b3;margin-top:7px;width:65%}.energy i{display:block;background:#74cfff;height:100%;width:35%}.enemy .energy{margin-left:auto}.enemy .energy i{float:right}.rounds{font-size:16px;letter-spacing:6px;margin-top:5px;color:var(--gold)}.enemy .rounds{text-align:right}.clock{text-align:center;text-shadow:0 2px 5px #000}.clock span{font-size:10px;letter-spacing:1px}.clock b{display:block;font-family:Cinzel,serif;font-size:47px;line-height:1.15;color:#ffe5ab}.clock small{font-size:9px;letter-spacing:2px}.stage-label{position:absolute;bottom:4%;left:4%;font-size:11px;letter-spacing:3px;color:#ffe1ac;text-shadow:0 2px 4px #000}.stage-label span{display:block;font-size:9px;color:#e1e6dd;letter-spacing:2px;margin-top:5px}#announce{position:absolute;top:37%;width:100%;text-align:center;font:600 clamp(20px,4vw,58px) Cinzel,serif;color:#ffe2a6;text-shadow:0 3px 0 #172a2a,0 0 25px #000;pointer-events:none;z-index:3}#moveLabel{position:absolute;top:27%;width:100%;text-align:center;color:#e7f8ec;letter-spacing:3px;font-size:14px;text-shadow:0 2px 5px #000;pointer-events:none;z-index:3}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#04151cf5 0%,#051c24e8 37%,#071a2188 65%,#0c202c44);z-index:4;padding:5% 6%;overflow-y:auto;display:flex;align-items:center}.overlay.hidden{display:none}.panel{max-width:580px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:3px;text-transform:uppercase;margin:0 0 16px}.panel h1{font-family:Cinzel,Georgia,serif;font-size:clamp(30px,4.8vw,68px);font-weight:500;line-height:1.05;letter-spacing:-1px;margin:0 0 20px}.panel h1 em{font-style:normal;color:var(--gold)}.panel p{font-size:15px;color:#c2cecd;line-height:1.65;max-width:440px}.panel .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.panel .note{font-size:11px;color:#9eafb2;max-width:460px;margin-top:25px}.menu-title{font-family:Cinzel,serif;font-size:32px;color:var(--gold);margin:0 0 12px}.wide-panel{width:100%;max-width:none}.guide{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;max-height:70%;}.guide h3{font-family:Cinzel,serif;color:var(--gold);margin:15px 0 8px}.guide p{font-size:13px;line-height:1.6;color:#c2cecd}.guide a{color:#addecf}.moves{width:100%;border-collapse:collapse;font-size:13px}.moves td{padding:8px 0;border-bottom:1px solid #ffffff15}.moves td:last-child{text-align:right;color:var(--gold)}select{width:100%;padding:12px;background:#0c2831;color:#eee;border:1px solid #64716b;border-radius:4px;font:14px Inter,sans-serif}.codex-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.codex-card{display:flex;gap:20px;margin-top:15px}.portrait{width:100px;height:140px;object-fit:contain;image-rendering:auto;flex-shrink:0}.lore{flex:1}.lore h3{margin-top:0}.tag{font-size:11px;color:var(--teal);letter-spacing:1px}.touch-controls{display:none;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;user-select:none}.dpad{display:grid;grid-template-columns:repeat(3,45px);grid-template-rows:repeat(2,43px);gap:4px}.dpad button{padding:0;font-size:20px;background:#152d36}.dpad [data-key=up]{grid-column:2}.dpad [data-key=left]{grid-column:1;grid-row:2}.dpad [data-key=down]{grid-column:2;grid-row:2}.dpad [data-key=right]{grid-column:3;grid-row:2}.touch-middle{display:flex;gap:5px;flex-wrap:wrap;max-width:170px;justify-content:center}.touch-middle button{font-size:10px;padding:11px}.attacks{display:grid;grid-template-columns:repeat(2,55px);gap:5px}.attacks button{padding:7px 3px;font-weight:700}.attacks small{display:block;font-size:8px;letter-spacing:.5px;margin-top:2px;color:#b5c6c9}.x{color:#78b8fa}.y{color:#f3d078}.b{color:#f59490}.rt{color:#a7e7cf}.touch-controls button.held{background:#42645c;border-color:var(--gold)}footer{padding:22px 0}.era-track{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px}.era-item{color:#647b81;font-size:11px;text-transform:uppercase;letter-spacing:1.5px}.era-item b{font:20px Cinzel,serif;margin-right:10px}.era-item.active{color:var(--gold)}.era-item.done{color:#91b8ac}.footer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:15px}#hint{font-size:12px;color:var(--muted)}.footer-row button{font-size:12px;border:0;background:transparent;color:var(--gold);padding:4px}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:14px 0}.settings-row select{width:160px}.settings-row label{font-size:14px}.stats-line{display:flex;gap:28px;color:var(--gold);font-size:13px;margin:18px 0}.arena.playing .overlay{background:#051821ce}body:has(.overlay:not(.hidden)) #hud{opacity:.2}body:has(.overlay:not(.hidden)) .stage-label{opacity:.3}@media(pointer:coarse){.touch-controls{display:flex}#hint{display:none}}@media(max-width:800px){#app{padding:0 12px}header{height:72px}.brand{font-size:17px;letter-spacing:2px}.brand small{font-size:8px;letter-spacing:2px}.sigil{font-size:32px;width:35px;height:40px}#padStatus{font-size:10px;max-width:125px;margin:0}.header-right{gap:4px}.header-right button{padding:7px;font-size:11px}.names b{font-size:16px}.names span{display:none}.hud{gap:12px;grid-template-columns:1fr 55px 1fr}.health{height:13px}.clock b{font-size:30px}.rounds{font-size:12px}.clock small{display:none}.panel h1{margin-bottom:10px}.panel p{font-size:12px;line-height:1.5;max-width:320px}.eyebrow{font-size:9px;margin-bottom:10px}.panel .note{font-size:9px;margin-top:12px}.panel .actions{margin-top:12px;gap:6px}.panel button{padding:9px 11px;font-size:12px}.era-item{font-size:9px;letter-spacing:.5px}.era-item b{display:block;font-size:17px}.era-track{gap:8px}.guide{gap:16px}.guide p,.moves{font-size:12px}.menu-title{font-size:24px}.portrait{width:60px;height:95px}.overlay{padding:4%}.codex-card{gap:10px}.tag{font-size:9px}}@media(max-width:560px) and (orientation:portrait){.arena{aspect-ratio:1.15}.overlay{background:#061c25d9;padding:7%}.hud{top:4%;gap:9px;left:4%;right:4%}.panel h1{font-size:40px}.panel p{font-size:14px}.panel .note{font-size:10px}.panel button{font-size:13px}.panel .actions{margin-top:22px}.guide{display:block}.guide .guide-controls{display:none}.guide p{font-size:13px}.era-item{font-size:8px}.era-item b{font-size:15px}.header-right #soundBtn{display:none}.brand{font-size:15px}#padStatus{max-width:85px;font-size:9px}.dpad{grid-template-columns:repeat(3,38px)}.attacks{grid-template-columns:repeat(2,46px)}.touch-middle{max-width:100px}.touch-middle button{font-size:8px;padding:9px 7px}.stage-label{font-size:9px}.stage-label span{font-size:8px}footer{padding:10px 0}.clock b{font-size:26px}.names b{font-size:13px}.footer-row{justify-content:flex-end}#moveLabel{font-size:11px}}@media(orientation:landscape) and (max-height:550px){#app{padding:0 12px}header{height:47px}.brand{font-size:15px}.sigil{height:30px;width:28px;font-size:26px}.brand small{font-size:7px}.arena{height:calc(100svh - 55px);width:100%;aspect-ratio:auto}.touch-controls{position:absolute;bottom:12px;left:25px;right:25px;z-index:5;opacity:.72;padding:0;pointer-events:none}.touch-controls button{pointer-events:auto}.dpad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,34px)}.attacks{grid-template-columns:repeat(2,46px)}.attacks button{padding:4px}.touch-middle{margin-top:40px}footer{display:none}.stage-label{display:none}.overlay{padding:3% 6%}.panel h1{font-size:34px}.panel p{font-size:12px}.panel .note{margin-top:9px}body:has(.overlay:not(.hidden)) .touch-controls{display:none}.guide{gap:25px}.guide p,.moves{font-size:11px}.moves td{padding:5px}.menu-title{font-size:23px}.codex-head{margin-bottom:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}:fullscreen{background:var(--ink);max-width:none!important}