:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#17140f;color:#fff;touch-action:manipulation}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% -20%,#7c3aed55,transparent 42%),#17140f;overflow-x:hidden}
button,input{font:inherit}.game-shell{min-height:100dvh;display:grid;grid-template-rows:auto auto minmax(260px,1fr) auto auto auto auto auto;max-width:1500px;margin:auto}
header{height:58px;display:flex;align-items:center;gap:14px;padding:6px max(12px,env(safe-area-inset-left));border-bottom:2px solid #f4e8bf;background:#1a1712}
header a{color:#facc15;text-decoration:none;font-weight:1000}header div{display:grid;margin-right:auto}header strong{font-size:clamp(17px,3vw,24px);letter-spacing:.05em}header span{font-size:9px;color:#d6c9a5;letter-spacing:.15em}header button{border:1px solid #8b7f61;border-radius:8px;background:#2b261c;color:#fff;padding:8px 10px}
.arena{position:relative;min-height:260px;background:#a7ddff;overflow:hidden}.arena canvas{display:block;width:100%;height:100%;min-height:260px;object-fit:fill}
.announcer{position:absolute;left:50%;top:13%;translate:-50% 0;padding:8px 16px;border:2px solid #17140f;border-radius:999px;background:#facc15;color:#17140f;font-weight:1000;opacity:0;transform:scale(.7);transition:.2s;pointer-events:none;white-space:nowrap}.announcer.show{opacity:1;transform:scale(1)}
.room-code{position:absolute;left:10px;top:10px;padding:8px 12px;border:2px solid #fff;border-radius:10px;background:#17140fdd;font-weight:900;letter-spacing:.15em}
.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:7px 12px;background:#252017;border-block:2px solid #75664b}.fighter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px}.fighter b{grid-row:span 2;font-size:22px}.fighter span{font-size:11px;font-weight:900}.fighter meter{width:100%;height:12px}.fighter em{font-style:normal;font-weight:900;color:#fde047}.fighter--right{text-align:right}.turn{text-align:center;min-width:120px}.turn small{display:block;color:#94a3b8}.turn strong{font-size:20px}.turn span{display:block;font-size:9px;color:#fde047;font-weight:900}
.controls{display:grid;grid-template-columns:1fr 1fr minmax(130px,.55fr);gap:10px;align-items:end;padding:10px max(12px,env(safe-area-inset-left));background:#111}.controls label{display:grid;grid-template-columns:1fr auto;gap:3px;font-size:10px;font-weight:900}.controls output{color:#fde047}.controls input{grid-column:span 2;width:100%;accent-color:#f97316;height:28px}.fire{height:54px;border:3px solid #5a1605;border-radius:12px;background:linear-gradient(#fb923c,#dc2626);color:#fff;font-weight:1000;box-shadow:0 5px 0 #601900}.fire:active{translate:0 4px;box-shadow:0 1px 0 #601900}.fire:disabled{filter:grayscale(1);opacity:.5}
.modes{display:flex;gap:7px;padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));overflow:auto;background:#201c15}.modes button{flex:1;min-width:max-content;border:1px solid #75664b;border-radius:8px;background:#30291d;color:#efe7cf;padding:8px 10px;font-size:10px;font-weight:900}.modes button.active{border-color:#fde047;background:#fde047;color:#17140f}
dialog{border:2px solid #facc15;border-radius:18px;background:#17140f;color:#fff;width:min(520px,calc(100% - 24px));padding:0;box-shadow:0 25px 100px #000b}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog form{padding:16px}dialog header{height:auto;padding:0 0 12px;background:none}dialog header button{margin-left:auto;border:0;font-size:24px}.online-dialog label{display:grid;gap:5px;font-size:11px;font-weight:900}.online-dialog input{border:1px solid #766d5a;border-radius:8px;background:#282319;color:#fff;padding:10px;text-transform:uppercase}.online-actions{display:grid;grid-template-columns:1fr auto 1fr 1fr;gap:8px;align-items:end;margin-top:15px}.online-actions button{border:0;border-radius:9px;background:#facc15;color:#17140f;padding:11px;font-weight:1000}.online-dialog p{min-height:2.5em;color:#cbd5e1}
@media(max-width:680px){.game-shell{grid-template-rows:auto auto minmax(230px,1fr) auto auto auto auto auto}.controls{grid-template-columns:1fr 1fr}.fire{grid-column:span 2;height:60px}.turn{min-width:92px}.fighter span{font-size:9px}.fighter b{font-size:18px}.online-actions{grid-template-columns:1fr}.online-actions>span{display:none}.modes button{padding:9px 11px}.arena canvas{min-height:230px}}
@media(orientation:landscape) and (max-height:600px){.game-shell{grid-template-rows:42px auto minmax(180px,1fr) 42px 58px auto 42px}header{height:42px}.arena canvas{min-height:180px}.controls{padding-block:3px}.controls input{height:20px}.fire{height:45px}.modes{padding-block:4px}.hud{padding-block:3px}}