:root{color-scheme:dark;--cyan:#39f3ff;--pink:#ff4fd8;--ink:#091122;--muted:#a6b4cb}*{box-sizing:border-box}body{margin:0;color:#edf5ff;background:radial-gradient(ellipse at top,#233044,#080d19 65%);font:16px/1.6 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:22px}nav{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.12em}a{color:var(--cyan)}nav span{color:var(--muted)}header{padding:20px 0}h1{font-size:clamp(46px,10vw,80px);line-height:1;margin:16px 0;font-weight:950;letter-spacing:-.065em}h1 span{color:var(--pink)}header p{color:var(--muted);margin:0}h2{margin:0 0 10px}h3{line-height:1.4}p{overflow-wrap:anywhere}.panel{background:#101b2ded;border:1px solid #758daa42;border-radius:18px;padding:26px}#setup{display:grid;grid-template-columns:1fr 1fr;gap:40px}.rules{font-size:14px;color:#bdcbe0}.rules strong{color:#edf5ff}label,legend{display:block;font-size:14px;margin-bottom:8px}input{border:1px solid #698098;border-radius:8px;background:#070e1c;color:white;font:inherit;padding:12px;width:100%;min-width:0}fieldset{border:0;padding:0;margin:20px 0}#colors{display:flex;gap:12px;flex-wrap:wrap}.swatch{width:38px;height:38px;border-radius:50%;padding:0;border:3px solid transparent}.swatch[aria-pressed=true]{outline:3px solid white;outline-offset:3px}button,.button{font:700 14px/1.4 system-ui;cursor:pointer;display:inline-block;border:0;border-radius:8px;padding:13px 18px;background:var(--cyan);color:#03111a;text-decoration:none}.secondary{background:#263953;color:white}button:disabled{opacity:.55;cursor:wait}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}:focus-visible{outline:3px solid #ffe45c;outline-offset:4px}.health-row{display:flex;align-items:center;gap:24px;margin:24px 0 16px}.health{flex:1;min-width:0}.health>div{display:flex;justify-content:space-between;gap:10px}.health b{overflow-wrap:anywhere}.health small{color:var(--muted);font-size:12px}progress{appearance:none;width:100%;height:12px;border:0;border-radius:6px;overflow:hidden;accent-color:var(--cyan)}progress::-webkit-progress-bar{background:#263047}progress::-webkit-progress-value{background:var(--fighter,var(--cyan));transition:width .2s}.versus{font-weight:900;color:var(--muted)}.arena{position:relative;height:310px;border:1px solid #758daa42;border-radius:18px;overflow:hidden;background:#10192a}canvas{display:block;width:100%;height:100%}#phase{position:absolute;top:20px;left:10%;width:80%;text-align:center;font-size:clamp(18px,4vw,28px);font-weight:800;text-shadow:0 2px 8px #000}.arena-label{position:absolute;bottom:12px;width:100%;text-align:center;color:#74869f;font:10px monospace;letter-spacing:.2em}.typing{margin-top:16px;text-align:center}.round-line{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}#word{font:700 clamp(32px,7vw,52px)/1.5 ui-monospace,monospace;letter-spacing:.12em;margin:4px 0;min-height:65px}#word .done{color:var(--cyan)}#word .next{border-bottom:4px solid var(--pink)}#hint{margin:2px 0 12px;font-size:14px;color:var(--muted)}#type{max-width:400px;text-align:center}.typing .actions{justify-content:center}#invite{margin-bottom:20px}#status{color:#ffe45c;min-height:26px}footer{color:#8394ad;font-size:12px;margin:24px 0}.sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}#setup{grid-template-columns:1fr;gap:15px}.panel{padding:20px}nav span{display:none}.health-row{gap:12px}.arena{height:260px}.health small{font-size:10px}#word{letter-spacing:.07em}.health b{font-size:14px}}
.arena{height:390px;border-color:#a771454f;box-shadow:0 12px 50px #0005}h1{color:#ffd46b;font-style:italic;text-shadow:3px 4px 0 #683326}h1 span{color:#ff655e}progress{height:20px;border-radius:2px;border:2px solid #bb966766;box-shadow:0 0 12px #0008}.versus{color:#ffc56f;font-style:italic}.arena-label{color:#f4c795; text-shadow:0 2px 4px #000}#phase{color:#fff1cf;letter-spacing:.08em}@media(max-width:650px){.arena{height:290px}}
select{width:100%;padding:10px;background:#070e1c;color:#fff;border:1px solid #698098;border-radius:8px;font:inherit}.match-options label{margin-top:12px}.match-options small{display:block;color:#a6b4cb;margin-top:10px}#sound{margin-top:16px}#match-settings{color:#d8b985;font-size:14px}#word{overflow-wrap:anywhere;font-size:clamp(22px,4.5vw,48px)}