:root{font-family:"Malgun Gothic",system-ui,sans-serif;color:#35433b;background:#eee9df;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:18px 22px}button,input{font:inherit}button{font-size:12px;font-weight:700;cursor:pointer;border:1px solid #ccc5b5;border-bottom-width:3px;border-radius:9px;padding:8px 12px;background:#faf7ef;color:#49594d;touch-action:none}button:hover{background:#e6eedb}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #719b72;outline-offset:2px}.primary{background:#52775a;border-color:#3f5e44;color:white}.primary:hover{background:#62896b}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#8d937f}h1{font-size:25px;letter-spacing:-1px;margin:3px 0 0}h1 span{font-size:12px;font-weight:500;color:#818976;letter-spacing:0;margin-left:8px}.header-actions{display:flex;gap:6px}.connection-row{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#79826c;margin:10px 2px}.connection-row #connection{font-weight:bold}.connection-row .live{color:#3f7d52}.connection-row .offline{color:#a25644}.dot{opacity:.4;margin:0 5px}.hud{display:grid;grid-template-columns:1fr 1.1fr 1.5fr 1.15fr;gap:16px;padding:12px 18px;background:#fffcf4;border:1px solid #d2ccbd;border-bottom:0;border-radius:15px 15px 0 0}.caption{font-size:11px;color:#858b77}.hud strong{font-size:24px;display:block;font-variant-numeric:tabular-nums;color:#3d5642;margin-top:2px;line-height:1.25}.hud small{display:block;font-size:10px;color:#8b927f;min-height:14px;margin-top:3px}.charge-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.charge-row b{font-size:12px;color:#8f7343}.meter{height:7px;border-radius:8px;background:linear-gradient(to right,#e6e2d6 0 50%,#d6bc9b 50% 51%,#e6e2d6 51% 75%,#e0b4a8 75%);margin-top:4px;overflow:hidden}.meter i{height:100%;display:block;background:linear-gradient(90deg,#bb9259,#ba4e42);width:0}.ability-row{display:flex;gap:7px 18px;flex-wrap:wrap;background:#f6f2e7;border:1px solid #d2ccbd;border-top:0;padding:6px 18px;font-size:10px;color:#707c64;font-variant-numeric:tabular-nums}#cardStatus.active{color:#b94039;font-weight:bold}.arena{position:relative;overflow:hidden;border:1px solid #b9bdaa;border-top:0;border-radius:0 0 15px 15px;background:#dce7d9}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.field-label,.motion-label{position:absolute;top:12px;font-size:10px;color:#66795c;font-weight:700;pointer-events:none}.field-label{left:14px;letter-spacing:1px}.motion-label{right:14px}.hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:#fffdf1ed;border:1px solid #d0cbb3;border-bottom-width:3px;border-radius:10px;padding:7px 13px;font-size:11px;color:#5b654d;max-width:94%;width:max-content;pointer-events:none;text-align:center;font-weight:700}.cover{display:none;position:absolute;inset:0;background:#faf7ebed;backdrop-filter:blur(3px);place-content:center;text-align:center;padding:20px;z-index:4}.cover.show{display:grid}.cover h2{font-size:26px;margin:10px 0}.cover p{font-size:13px;line-height:1.8}.join-card{width:min(400px,78vw);padding:25px 30px;background:#fffdf4;border:1px solid #d4ccba;border-bottom-width:4px;border-radius:20px;box-shadow:0 16px 35px #5a614315}.join-card label{display:block;font-size:11px;text-align:left;color:#7c846c;margin-top:18px;margin-bottom:6px}.join-card input{width:100%;border:1px solid #bfc9b6;background:#f7f8f0;border-radius:8px;padding:10px 12px;font-size:14px;color:#354d3c}.join-card .primary{width:100%;font-size:14px;margin-top:12px;padding:11px}.join-card .join-message{font-size:11px;color:#858b77;min-height:32px;margin-bottom:0}.death{background:#f1ddd5db}.controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:space-between;font-size:11px;color:#65705d;margin:10px 0}.controls b{color:#465f46}.touch-actions{display:flex;gap:6px;flex-wrap:wrap}.touch-actions button{font-size:11px}.events{font-size:12px;min-height:29px;color:#59704b;padding:5px 0 0;margin:7px 0 3px}.note{font-size:10px;color:#8c8d79;line-height:1.75;margin:6px 0 0}
.meter{background:linear-gradient(to right,#e6d5a1 0 4.08%,#e2c49d 4.08% 50%,#d6c4db 50% 65.31%,#d8a29d 65.31% 100%)}
/* Night arena: quiet chrome keeps the coloured toys and their glow readable. */
:root{color:#cad8e1;background:#101a25;color-scheme:dark}
button{background:#1b2a3b;color:#d8e8ee;border-color:#34485c}button:hover{background:#263d50}
button:focus-visible,input:focus-visible,canvas:focus-visible{outline-color:#91e0d4}
.primary{background:#387d76;border-color:#285e5d}.primary:hover{background:#45948a}
.eyebrow{color:#8daab9}h1 span,.connection-row,.caption,.hud small,.note{color:#9cb1bf}
.connection-row .live{color:#8edcb8}.connection-row .offline{color:#efa98d}
.hud{background:#182735;border-color:#304251}.hud strong{color:#cddfe3}.charge-row b{color:#cbb68e}
.ability-row{background:#192838;border-color:#344557;color:#b0c3cc}
#cardStatus.active{color:#ff9e96}.arena{background:#101c29;border-color:#344557}
.field-label,.motion-label{color:#a6c3d2;text-shadow:0 1px 3px #08101c}
.hint{background:#192b39df;border-color:#394f5d;color:#b5cbd4}
.cover{background:#101b2be6}.join-card{background:#192b3a;border-color:#415566;box-shadow:0 16px 35px #0004}
.join-card label,.join-card .join-message{color:#a8c0cd}.join-card input{background:#10212e;border-color:#45616f;color:#e1f0f2}
.death{background:#261e2ae6}.controls,.events{color:#a9c4ce}.controls b{color:#b6e4d9}
.meter{background:linear-gradient(to right,#817248 0 4.08%,#746044 4.08% 50%,#68506e 50% 65.31%,#764f58 65.31% 100%)}
header h1{font-size:23px}.hud strong{font-size:22px}.hud{gap:14px;padding:10px 16px}
/* The fixed drawing aspect also defines the authoritative camera/AOI. */
body{min-height:100dvh;display:grid;align-content:center;background:#0c1520}
main{width:min(100vw,calc(100dvh * 1200 / 760));max-width:none;margin:0 auto;padding:0}
.arena{border:0;border-radius:0;background:#101c29}#game{width:100%;height:auto}
.arena>header{position:absolute;right:16px;top:14px;margin:0;z-index:25}.game-title{display:none}
.header-actions button{font-size:11px;padding:7px 10px;background:#162634c9;border:1px solid #465b6a80;backdrop-filter:blur(8px)}
.connection-row{position:absolute;right:16px;top:51px;margin:0;font-size:9px;gap:14px;pointer-events:none;opacity:.8}
.hud{position:absolute;top:16px;left:16px;width:236px;display:grid;grid-template-columns:1.2fr 1fr;gap:8px 14px;padding:12px 14px;border:1px solid #6d87952b;border-radius:12px;background:#11212ddd;backdrop-filter:blur(8px);pointer-events:none}
.hud>div:first-child{grid-column:1;grid-row:1}.hud>div:nth-child(4){grid-column:2;grid-row:1}
.hud>div:nth-child(2){display:none}.hud .charge-stat{grid-column:1/-1;grid-row:2;border-top:1px solid #66809030;padding-top:8px}
.hud strong{font-size:23px;margin-top:1px;line-height:1.15;color:#d1e6e8}.hud .caption{font-size:10px;color:#a0b8c3}.hud small{font-size:9px;color:#8ca9b6;line-height:1.45;margin-top:3px;min-height:0}
.hud .charge-row{display:flex}.charge-row strong{font-size:19px}.charge-row b{font-size:10px}.meter{height:4px;margin-top:6px;opacity:.9}
.hud:not(.is-charging) .charge-stat{display:none}
.field-label{display:none}.motion-label{top:18px;right:50%;transform:translateX(50%);font-size:10px;font-weight:400;opacity:.7}
.touch-actions{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:nowrap;gap:5px;white-space:nowrap}
.touch-actions button{font-size:10px;padding:8px 9px;border:1px solid #56708060;background:#172a39d9;backdrop-filter:blur(6px)}
.touch-actions #touchFire{color:#c5e7dc;border-color:#85b2a67a}.touch-actions #flipView{color:#b0d6e5}
.hint{bottom:60px;max-width:56%;font-size:10px;padding:5px 10px;border:0;border-radius:6px;background:#10212b99;color:#adc8d2;font-weight:500}
.events{position:absolute;left:50%;top:48px;transform:translateX(-50%);max-width:46%;margin:0;padding:4px 9px;min-height:0;border-radius:6px;background:#12202a85;color:#bfd6df;font-size:10px;text-align:center;pointer-events:none}
.minimap-panel{position:absolute;right:16px;bottom:16px;width:154px;padding:9px;border:1px solid #607c8c45;border-radius:12px;background:#152532c7;backdrop-filter:blur(6px);pointer-events:none;color:#acc3cf}
.minimap-panel>span{display:flex;justify-content:space-between;font-size:10px}.minimap-panel small{font-size:8px;color:#83a1b2}.minimap-panel>small{display:block;text-align:center}.minimap-panel canvas{cursor:default}
.help-panel{position:absolute;bottom:16px;left:16px;z-index:6;max-width:255px;border:1px solid #506c7d55;border-radius:9px;background:#142734e8;padding:7px 10px;font-size:10px;color:#adc5ce}
.help-panel summary{cursor:pointer;user-select:none}.help-panel[open]{backdrop-filter:blur(8px)}.help-panel .controls{font-size:10px;line-height:1.9;margin:9px 0}.help-panel .ability-row{display:flex;flex-direction:column;gap:5px;background:transparent;padding:8px 0;border:0;border-top:1px solid #66809030;font-size:9px}.help-panel .note{color:#87a4b3;font-size:9px}.help-panel button{font-size:10px;padding:5px 8px}.cover{z-index:20}
@media(max-width:760px){.arena>header{top:8px;right:8px}.header-actions button{font-size:9px;padding:5px 7px}.connection-row{top:36px;right:8px;font-size:8px;gap:5px}.connection-row #connection{display:none}.hud{top:8px;left:8px;width:182px;padding:8px 9px;gap:6px}.hud strong{font-size:18px}.hud .caption{font-size:9px}.hud small{font-size:8px}.hud .charge-stat{padding-top:5px}.charge-row strong{font-size:16px}.charge-row b{font-size:9px}.motion-label{display:none}.events{top:9px;max-width:36%;font-size:8px;margin-left:17px}.minimap-panel{right:8px;bottom:8px;width:105px;padding:6px}.minimap-panel>span{font-size:8px}.minimap-panel>small{display:none}.touch-actions{bottom:8px;gap:3px}.touch-actions button{font-size:8px;padding:7px 5px}.touch-actions #touchFire{font-size:9px}.hint{bottom:44px;font-size:8px;padding:4px 6px;max-width:53%}.help-panel{left:8px;bottom:8px;padding:6px;font-size:8px;max-width:205px}.join-card{padding:14px 20px}.cover h2{font-size:20px}.cover p{font-size:11px}.join-card label{margin-top:8px}.join-card .join-message{margin-top:7px;min-height:15px;font-size:9px}.join-card .primary{padding:8px;margin-top:8px}.cover{padding:10px}}
@media(max-width:510px){.touch-actions #touchDrop,.touch-actions #touchBoost,.touch-actions #touchChest{display:none}.hud{width:151px;gap:4px}.hud strong{font-size:16px}.hud .caption{font-size:8px}#buffTime{max-height:24px;overflow:hidden}#chargeCost{display:none}.events{display:none}.minimap-panel{width:83px}.hint{display:none}.join-card{padding:9px 14px}.join-card .eyebrow,.join-card>p:not(.join-message){display:none}.cover h2{font-size:16px;margin:4px 0}.join-card label{margin:5px 0}.join-card input{padding:6px}.join-card .primary{margin-top:6px;padding:6px}.join-card .join-message{font-size:8px;line-height:1.3}}

/* Local test servers alone advertise and enable these controls. */
.hud .test-controls{grid-column:1/-1;grid-row:3;border-top:1px solid #66809030;padding-top:7px;pointer-events:auto}.test-controls[hidden]{display:none!important}.test-buttons{display:flex;gap:5px;margin-top:5px}.test-buttons button{flex:1;min-width:0;padding:5px 4px;font-size:12px;background:#20323fe6;border-color:#6b899759;color:#d9e6e8}