@import url('https://fonts.googleapis.com/css2?family=Geist+Pixel&family=Pixelify+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101211;--text:#ecebdc;--muted:#858b81;--line:#30362e;--accent:#ff7348}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Pixelify Sans',sans-serif;font-size:14px}button,input{font:inherit}button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);padding:12px 17px;transition:background .2s}button:hover{background:#30372d}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%}.brand{font-family:'Geist Pixel',monospace;letter-spacing:3px;font-size:32px;font-weight:800;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:12px}.crest{color:var(--accent);font-size:42px}.brand small{font-family:'Pixelify Sans',sans-serif;font-size:11px;letter-spacing:2px;margin-left:15px;font-weight:400;color:var(--muted)}.header-right{display:flex;align-items:center;gap:30px;font-size:12px}.version{color:var(--muted)}main{max-width:1510px;margin:auto;padding:34px 4% 0}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:1.8px;color:#a1a799}.orange{color:var(--accent)}h1{font-family:'Geist Pixel',monospace;font-size:36px;margin:5px 0 0;font-weight:600;letter-spacing:.4px}.modes{display:flex;gap:4px;border:1px solid var(--line);padding:4px}.modes button{border:0;color:#a2a79e;font-size:12px}.modes .active{background:#e4e7d7;color:#171c16}.modes span{margin-left:15px}.arena-wrap{position:relative;border:1px solid #414738;overflow:hidden;background:#20291f}canvas{display:block;width:100%;aspect-ratio:1200/650;image-rendering:pixelated;outline:none}.arena-top{position:absolute;top:25px;left:28px;right:28px;display:flex;justify-content:space-between;pointer-events:none}.fighter-card{width:25%;max-width:260px}.enemy{text-align:right}.health{height:6px;background:#141b16;margin:12px 0 9px}.health i{display:block;background:#ff7950;height:100%;width:100%;transition:width .2s}.enemy .health i{background:#b9caaa;margin-left:auto}.fighter-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#b3bca6}.round-label{text-align:center;color:#a9b49a;font-size:10px;letter-spacing:2px}.round-label b{display:block;font-size:26px;margin-top:8px;color:#c4c9b0;letter-spacing:6px;font-weight:400}.announcement{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);text-align:center;width:480px;max-width:80%;padding:28px;background:radial-gradient(ellipse,#172119ed 30%,#17211900 72%)}.announcement small{color:#c6c9ae;font-size:10px;letter-spacing:3px}.announcement strong{display:block;font-family:'Geist Pixel',monospace;font-size:60px;line-height:1.04;font-weight:600;margin:18px 0}.announcement p{color:#bcc4b1;font-size:12px}.announcement button,.primary{background:var(--accent);color:#141813;border:0;margin-top:14px;font-weight:600}.announcement button span{margin-left:32px}.arena-bottom{position:absolute;bottom:0;left:0;right:0;background:#111c17b3;border-top:1px solid #7b8c6233;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#b8c3aa}.arena-bottom button{padding:3px 7px;font-size:10px;border:0}.status-light{display:inline-block;background:#b5c389;width:5px;height:5px;margin-right:8px}#flashtext{position:absolute;top:34%;left:0;right:0;text-align:center;pointer-events:none;color:#ffb96c;font-size:21px;letter-spacing:5px;text-shadow:0 2px 10px black}.bottom{display:grid;grid-template-columns:1fr 1.8fr;border:1px solid var(--line);border-top:0}.power-panel{padding:24px 28px;border-right:1px solid var(--line)}.power-panel .eyebrow{display:flex;justify-content:space-between}.power-panel .eyebrow span{color:var(--accent);font-size:10px}.power-value{display:flex;align-items:center;gap:10px;margin:6px 0 12px}.power-value b{font-family:'Geist Pixel',monospace;font-size:50px;line-height:1.1;color:var(--accent);font-weight:500}.power-value>span{font-size:20px;color:var(--accent)}.power-value small{display:block;color:#8b9484;font-size:9px;letter-spacing:1px}.power-track{display:flex;gap:4px;height:5px}.power-track i{flex:1;background:#323b30}.power-track i.on{background:var(--accent)}.power-panel p{font-size:10px;color:var(--muted);margin:12px 0 0}.control-panel{padding:24px 30px}.controls{display:flex;justify-content:space-between;gap:18px;margin:23px 0}.controls>div{display:flex;align-items:center;gap:12px}kbd{border:1px solid #535b4b;border-bottom:3px solid #535b4b;border-radius:3px;padding:10px;font-size:11px;color:#c8cfbd;white-space:nowrap}.controls span{font-size:13px}.controls small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.footnote{font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px}.footnote span{color:#b9c4ad;margin-right:12px}footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.3px;color:#626c60;padding:22px 0 28px}dialog{width:460px;max-width:90%;background:#192019;border:1px solid #626e55;color:var(--text);padding:32px}dialog::backdrop{background:#000a}h2{font-family:'Geist Pixel',monospace;font-size:36px;margin:12px 0}dialog p{font-size:12px;line-height:1.8;color:#abb6a1}.close{float:right;border:0;padding:0;font-size:24px}.join{display:flex;margin-top:20px;gap:8px}input{width:100%;min-width:0;background:#101710;border:1px solid #46513d;padding:12px;color:white}#roominfo{color:var(--accent);padding-top:12px;overflow-wrap:anywhere}.touch{display:none}@media(max-width:800px){header{height:70px}.brand small,.version{display:none}main{padding-top:20px}.topline{align-items:flex-start;gap:15px}h1{font-size:27px}.modes button{padding:10px 8px;font-size:10px}.modes span{display:none}.arena-top{top:15px;left:15px;right:15px}.eyebrow{font-size:9px}.round-label{font-size:8px}.round-label b{font-size:18px}.announcement strong{font-size:38px}.announcement p{display:none}.announcement small{font-size:8px}.announcement button{padding:10px}.arena-bottom{font-size:8px;padding:8px 10px}#hint{display:none}.bottom{grid-template-columns:1fr}.power-panel{border-right:0;border-bottom:1px solid var(--line)}.controls{gap:10px}.controls>div{gap:6px}.controls small{font-size:9px}.control-panel{padding:22px 20px}footer{font-size:8px;gap:20px}.touch{display:flex;justify-content:center;gap:8px;padding:0 12px 20px}.touch button{touch-action:none;padding:14px 12px}.fighter-meta{font-size:8px}canvas{min-height:340px;object-fit:cover}.power-panel{padding:18px 22px}}

.hp-numbers{font-size:10px;color:#c6cbb8;margin:-3px 0 8px;letter-spacing:1px}.arena-wrap{isolation:isolate}.health i{transition:width .3s ease-out}@media(max-width:800px){canvas{min-height:0;aspect-ratio:1200/720;object-fit:contain}.fighter-card{width:30%}.arena-top{top:10px}.round-label b{font-size:15px}.hp-numbers{font-size:8px;margin-bottom:5px}.announcement strong{font-size:clamp(24px,5vw,38px)}.announcement{padding:12px}.announcement small{display:none}.announcement button{margin-top:2px}.touch{gap:4px}.touch button{padding:14px 8px}}

.controls{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:17px 0}.control-panel>.eyebrow{display:flex;justify-content:space-between;gap:12px}#movement-state{color:#b7c8a0;font-size:10px;letter-spacing:.4px}.touch{flex-wrap:wrap}.touch button[data-action="dash"]{border-color:#96a77e;color:#d2e1bd}@media(max-width:800px){#movement-state{font-size:9px}.controls{gap:14px 10px}.controls kbd{font-size:9px;padding:8px}.controls small{max-width:145px;line-height:1.4}}

.reforge{display:flex;align-items:center;gap:14px;width:100%;margin-top:20px;padding:14px;text-align:left;border:1px solid #79b798;background:#172d27;color:#d6ffe9}.reforge span{flex:1}.reforge b{display:block;font-size:16px}.reforge small{display:block;margin-top:5px;font-size:12px;color:#b4c6b5}.reforge strong{font-size:12px;white-space:nowrap}.reforge:disabled{opacity:.55;cursor:default}@media(max-width:600px){.reforge{flex-wrap:wrap}.reforge strong{margin-left:45px}}

/* ParryGod: the arena is the entire playing surface. */
header{height:76px;padding:0 4%;background:#101211}.brand{gap:0;font-size:30px;letter-spacing:1px}.brand-god{color:#ff9565}.crest{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-right:14px;border:1px solid #ff9565;transform:skew(-8deg);font-size:19px;letter-spacing:-2px;color:#ff9565}.brand:hover{opacity:.85}main{position:relative;max-width:1600px;padding:0;margin:0 auto}.arena-wrap{border:0}canvas{max-height:calc(100dvh - 76px);object-fit:contain}.main-menu{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:8%;padding:6% 9%;background:linear-gradient(100deg,#0b100feb 10%,#101712c9 70%,#10171288)}.menu-title h1{font-family:'Geist Pixel',monospace;font-size:clamp(64px,9vw,144px);font-weight:800;line-height:.9;letter-spacing:-2px;margin:24px 0}.menu-title h1 span{display:block;color:#ff9565}.menu-title p{font-size:13px;line-height:2;letter-spacing:2px;color:#c6cbb8}.menu-actions{display:flex;flex-direction:column;gap:12px}.menu-actions>button{text-align:left;background:#151c17d9;border-color:#69755b66;padding:18px 22px;font-family:'Geist Pixel',monospace;font-size:30px}.menu-actions>button:hover{background:#e1e7d2;color:#161c15}.menu-actions small{display:block;font-family:'Pixelify Sans',sans-serif;font-size:12px;color:#9faa97;margin-top:5px}.menu-actions>button:hover small{color:#394433}.menu-secondary{display:flex;gap:10px;margin-top:8px}.menu-secondary button{flex:1;font-size:14px}.main-menu[hidden],[hidden]{display:none!important}.in-menu .arena-top,.in-menu .arena-bottom,.in-menu .combat-power,.in-menu .touch{visibility:hidden}.combat-power{position:absolute;bottom:55px;left:24px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none;text-shadow:0 2px 6px #000}.combat-power #tier{font-size:11px;letter-spacing:1px;color:#ffd095}.combat-power #power{font-family:'Geist Pixel',monospace;color:#ffb280;line-height:1}.combat-power small{font-size:10px}.combat-power button{pointer-events:auto;font-size:11px;padding:8px 10px;background:#111e17cc;margin-top:7px}.combat-power button strong{display:block;color:#baffdf;font-size:10px;margin-top:4px}.combat-power button:disabled{opacity:.5;cursor:default}.arena-bottom{font-size:10px}.arena-bottom button{font-size:12px;padding:6px}.touch{padding-top:10px}dialog{max-height:85dvh;overflow:auto;width:640px}dialog p{font-size:14px}dialog h2{font-size:42px}.binding-heading{font-size:14px;color:#ffb280;margin:24px 0 12px}.binding-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #303c30;gap:16px}.binding-row button{min-width:150px;font-size:13px}.binding-row button.listening{border-color:#ff9565;color:#ffbb86}#binding-status{min-height:22px;color:#ffbf95}.support-link{display:inline-block;text-decoration:none;color:#141813;background:#ff9565;padding:15px 22px;margin-top:12px;font-weight:600}.support-link:hover{background:#ffba96}@media(max-width:800px){header{height:64px}.brand{font-size:26px}.main-menu{position:relative;min-height:calc(100dvh - 64px);padding:35px 7%;grid-template-columns:1fr;gap:25px;background:#111913}.in-menu .arena-wrap{position:absolute;inset:0;opacity:.3}.menu-title h1{font-size:72px;margin:15px 0}.menu-title h1 span{display:inline}.menu-title p{font-size:12px}.menu-title .eyebrow{font-size:10px}.menu-actions>button{font-size:26px;padding:13px 18px}.combat-power{bottom:40px;left:12px}.combat-power #power{font-size:28px!important}.combat-power #chain{display:none}.combat-power #tier{font-size:8px}.combat-power button{font-size:9px;padding:4px}.combat-power button strong{font-size:8px}.arena-bottom #status{display:none}.round-label b{display:none}.fighter-meta{font-size:8px}.binding-row button{min-width:115px}canvas{max-height:none}.in-menu .touch{display:none}}

.crest{border:0;transform:none;letter-spacing:normal}.crest svg{display:block;width:36px;height:36px}

.copyright{display:block;text-align:center;padding:18px 20px;font-size:12px;line-height:1.5;letter-spacing:.3px;color:#858b81}

.brand,h1,h2,.menu-title h1,.menu-actions>button,.combat-power #power{font-weight:400;font-synthesis:none}

@media(max-width:800px){.menu-title h1{font-size:clamp(32px,9vw,72px)}}

header{justify-content:flex-end}

/* Center the game while keeping the controls outside its playing surface. */
body{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:72px 24px 18px;background:#101211}
header{position:fixed;top:0;right:0;height:auto;padding:16px 24px;border:0;background:transparent;display:flex;gap:10px;z-index:10}
main{width:min(100%,calc((100dvh - 136px)*1200/650));max-width:1600px;flex:none;margin:0 auto;padding:0}
canvas{width:100%;max-height:none;aspect-ratio:1200/650;object-fit:contain}
.copyright{flex:none;margin:0;padding:18px 10px 0}
:fullscreen{background:#101211}
@media(max-width:800px){body{padding:66px 12px 16px}header{padding:12px;gap:8px}header button{font-size:12px;padding:10px 12px}main{width:100%}.main-menu{min-height:0;padding:24px 7%;gap:20px}.in-menu .arena-wrap{position:absolute;inset:0}.menu-title h1{margin:10px 0}.menu-title p{margin:12px 0}.menu-actions{gap:8px}.menu-actions>button{padding:10px 14px}.copyright{font-size:12px;padding-top:14px}}
@media(max-height:550px) and (min-width:801px){body{padding-top:56px;padding-bottom:8px}header{padding:8px 16px}header button{padding:7px 12px}main{width:min(100%,calc((100dvh - 105px)*1200/650))}.main-menu{padding:3% 7%;gap:5%}.menu-title h1{font-size:clamp(32px,7vh,60px);margin:12px 0}.menu-title p{font-size:10px}.menu-actions{gap:5px}.menu-actions>button{font-size:18px;padding:7px 12px}.menu-actions small{font-size:10px}.menu-secondary{margin-top:0}.menu-secondary button{font-size:12px;padding:8px}.copyright{padding-top:10px}}

main{container-type:inline-size}@media(min-width:801px) and (min-height:551px){.menu-title h1{font-size:clamp(40px,10cqw,140px)}.menu-actions>button{font-size:clamp(18px,2.3cqw,30px)}}

.server-settings{margin-top:20px}.server-settings label,.server-settings small{display:block;margin:10px 0;color:#abb6a1}.server-settings summary{cursor:pointer}#network-quality{font-size:12px;color:#bbc7af}

.music-control{display:flex;align-items:center;gap:8px;color:#c6cbb8;font-size:14px;min-height:40px}.music-control input{width:100px;min-width:0;accent-color:#ff9565;cursor:pointer;padding:0}.music-control input:focus-visible{outline:2px solid #ff9565;outline-offset:4px}@media(max-width:480px){header{gap:8px;padding:10px}header button{padding:10px 8px}.music-control{gap:5px;font-size:12px}.music-control input{width:65px}}

.match-format{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0;font-size:14px}.match-format select{background:#18241f;color:#e4e9d9;padding:10px;border:1px solid #69755b;font:inherit}#team-roster{position:absolute;top:106px;left:20px;right:20px;text-align:center;font-size:12px;color:#ecf1df;text-shadow:0 2px 3px #000;pointer-events:none}.in-menu #team-roster{display:none}@media(max-width:800px){#team-roster{top:75px;font-size:10px}}

#opening-intro{display:grid;place-items:center;color:#eee;text-align:center;padding:24px}#intro-credit{grid-area:1/1;font-family:'Pixelify Sans',sans-serif;font-size:clamp(22px,4vw,44px);font-weight:400;letter-spacing:.04em;line-height:1.5;margin:0;opacity:0}#intro-credit.signature{font-family:'Geist Pixel',monospace;font-size:clamp(32px,6vw,68px)}#intro-begin{grid-area:1/1;color:#ccc;background:transparent;border-color:#444;padding:14px 24px;font:inherit;cursor:pointer}.intro-active{background:#000}.intro-active>header,.intro-active>main,.intro-active>footer,.intro-active>.touch{visibility:hidden}