:root{color-scheme:dark;--mint:#46cee0;--purple:#ed70ac;--muted:#96aaa7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 45%,#253c39,transparent 65%),#111a1c;color:#edf4ed;font-family:Inter,"Segoe UI","Malgun Gothic",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #435551;border-radius:7px;padding:10px 14px;background:#20312d;color:#d8e8e0;font-size:11px}button:hover{background:#314b40}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}header{max-width:1320px;margin:auto;padding:22px 35px;border-bottom:1px solid #ffffff12;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:15px;font-weight:800;letter-spacing:1px}.brand>span{font-size:32px;color:var(--mint)}.brand small{font-size:8px;border:1px solid #41534f;padding:6px 8px;color:#93aaa3;margin-left:12px;font-weight:400}main{max-width:1100px;margin:30px auto 0;padding:0 30px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:var(--mint)}h1{font-size:32px;letter-spacing:-1.5px;margin:12px 0 0;font-weight:650}em{font-style:normal;color:var(--mint)}.intro>p{color:var(--muted);font-size:12px;line-height:1.9;margin:0}.arena{padding:15px;background:#1a2929;border:1px solid #455e55;border-radius:19px;box-shadow:0 25px 70px #0004}.scoreboard{display:flex;justify-content:space-between;align-items:center;padding:3px 15px 14px}.player{width:37%}.player>span,.clock>span{display:block;font-size:9px;letter-spacing:1.6px}.player strong,.clock strong{display:block;font-size:34px;margin:4px 0;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums}.player small,.clock small{font-size:9px;color:#9ab1a8}.player kbd{font:inherit;letter-spacing:2px;border:1px solid #54665d;padding:2px 5px;border-radius:4px}.mint{color:var(--mint)}.purple{color:var(--purple);text-align:right}.clock{text-align:center}.clock>span{color:#a5b9b0}.clock .urgent{color:#ffab91}.meter{height:5px;background:#354341;position:relative;display:flex;justify-content:space-between;border-radius:4px;overflow:hidden;margin:0 2px 13px}.meter i{height:100%;transition:width .08s;width:0}#p1-meter{background:var(--mint)}#p2-meter{background:var(--purple)}.board{position:relative;border:1px solid #50665d;border-radius:11px;overflow:hidden}canvas{width:100%;height:auto;display:block;touch-action:none;outline:none}.overlay{position:absolute;inset:0;background:#0a17166e;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center}.overlay[hidden]{display:none}.card{background:#1b2d2cf5;padding:27px 35px;border:1px solid #63776b;border-radius:15px;text-align:center;box-shadow:0 15px 50px #0006;max-width:90%}.card h2{font-size:25px;letter-spacing:-1px;margin:16px 0}.card p{font-size:12px;line-height:1.8;color:#b1c7bb;max-width:340px}.key-guide{display:flex;justify-content:space-between;gap:35px;margin:20px 0;font-size:10px}.key-guide b{font-size:12px;margin-left:8px}.primary{display:block;width:100%;background:var(--mint);color:#102c34;border:0;font-weight:700;font-size:13px;padding:14px;margin-bottom:12px}.primary:hover{background:#8fe4ee}.card>small{color:#95aca0;font-size:9px}.table-footer{display:flex;justify-content:space-between;padding:13px 5px 0;font-size:10px;color:var(--muted)}.table-footer b{color:#d7e9db;font-variant-numeric:tabular-nums;margin-left:10px}.bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 12px}.bottom>div{font-size:10px;color:#abc0b6}.bottom b{color:var(--mint);font-size:9px;margin-right:8px}.bottom nav{display:flex;gap:7px}.note{font-size:10px;color:#79958a;line-height:1.8}footer{max-width:1100px;margin:23px auto 0;padding:0 30px 23px;color:#789187;font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between}@media(max-width:720px){header{padding:12px 16px}.brand{font-size:12px;gap:7px}.brand small{display:none}main{padding:0 10px;margin-top:20px}.intro{margin-bottom:16px}.intro>p{display:none}h1{font-size:24px}.eyebrow{font-size:8px}.arena{padding:8px;border-radius:12px}.scoreboard{padding:5px 6px 10px}.player strong,.clock strong{font-size:25px}.player>span,.clock>span{font-size:7px;letter-spacing:.7px}.player small,.clock small{font-size:8px}.player kbd{border:0;letter-spacing:0}.card{padding:14px 18px}.card h2{font-size:18px;margin:7px 0}.card p{font-size:10px;line-height:1.4;margin:7px 0}.key-guide{margin:10px 0}.primary{padding:10px;margin-bottom:7px}.card>small{font-size:8px}.bottom{flex-wrap:wrap;margin-top:14px;gap:10px}.bottom>div{font-size:9px}.bottom nav{width:100%}.bottom button{flex:1}.note span{display:block}footer{padding:0 12px 20px;font-size:8px}.table-footer{font-size:9px}.card .eyebrow{display:none}}@media(max-width:420px){.card p{display:none}.card h2{font-size:16px}.card{padding:13px}.key-guide{gap:16px}.card>small{font-size:7px}.player small{font-size:7px}}@media(max-height:520px) and (min-width:650px){header,.intro,.note,footer,.bottom>div{display:none}main{max-width:780px;margin:8px auto}.arena{padding:7px}.scoreboard{padding:0 10px 4px}.player strong,.clock strong{font-size:20px;display:inline;margin-right:10px}.player small,.clock small{display:none}.board{max-height:calc(100dvh - 150px);aspect-ratio:960/560;margin:auto}canvas{height:100%;width:100%}.bottom{margin:6px 0;justify-content:flex-end}.table-footer{padding-top:6px}}
@media(min-width:721px){main,footer{max-width:990px}header{padding-top:16px;padding-bottom:16px}main{margin-top:22px}.intro{margin-bottom:18px}}
@media(max-height:520px) and (min-width:650px){.board{width:min(100%,calc((100dvh - 150px) * 12 / 7));max-height:none}canvas{height:auto}main{margin-top:8px}.card{padding:12px 20px}.card .eyebrow,.card>small{display:none}.card h2{font-size:18px;margin:6px 0}.card p{font-size:10px;margin:6px 0}.key-guide{margin:10px 0}.primary{padding:10px;margin-bottom:0}}
.map-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 10px 13px;color:#91aaa0;font-size:9px;gap:10px}.map-toolbar label{letter-spacing:1px;display:flex;align-items:center;gap:10px}.map-toolbar select{background:#243936;color:#def5e6;border:1px solid #526b61;border-radius:6px;padding:7px;font:inherit;letter-spacing:0;max-width:220px}.map-toolbar select:disabled{opacity:.65}.power-status{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #39544a;margin-top:12px;padding:12px 5px 0;font-size:10px;color:#dccb94}.power-status span:last-child{color:#a4bdb0;white-space:nowrap}.item-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin-top:14px}.item-guide>div{border:1px solid #344c44;background:#1a2b27;border-radius:8px;padding:12px 15px}.item-guide b{display:block;color:#e5d49a;font-size:12px;font-weight:600}.item-guide span{display:block;color:#90aca0;font-size:10px;margin-top:5px}@media(max-width:720px){.map-toolbar{padding:0 2px 10px}.map-toolbar>span{display:none}.power-status{flex-wrap:wrap;font-size:9px}.item-guide{gap:5px}.item-guide>div{padding:8px}.item-guide b{font-size:10px}.item-guide span{font-size:8px}}@media(max-height:520px) and (min-width:650px){.item-guide{display:none}.map-toolbar{padding-bottom:5px}.power-status{padding-top:5px;margin-top:6px;font-size:9px}}
.online-panel{border:1px solid #486454;background:#1d302a;border-radius:12px;padding:14px;margin-bottom:20px}.online-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.online-actions input{background:#13221c;color:#e9ffef;border:1px solid #486454;border-radius:6px;padding:10px;width:135px;text-transform:uppercase;font:inherit;font-size:12px}.online-actions strong{letter-spacing:3px;color:#46cee0}.online-actions span{color:#a6b6ac;font-size:10px}.online-panel p{font-size:11px;line-height:1.6;color:#c2d4c8;margin-bottom:0;overflow-wrap:anywhere}button:disabled{opacity:.5;cursor:default}
.lobby-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #486454;flex-wrap:wrap}.lobby-row canvas,#room-detail canvas{width:96px;height:56px;flex:none}.lobby-row strong{flex:1;min-width:100px;overflow-wrap:anywhere}.lobby-row span{font-size:12px}.lobby-row button{margin-left:auto}#room-detail{padding:15px;background:#11251f;border-radius:10px;margin:12px 0}#room-detail strong{margin-left:12px}#room-dialog{background:#1d302a;color:#e9ffef;border:1px solid #46cee0;border-radius:16px;width:min(800px,90vw);max-height:85vh;padding:22px}#room-dialog::backdrop{background:#000b}#room-name{padding:12px;width:100%;box-sizing:border-box;background:#13221c;color:#e9ffef;border:1px solid #486454}#map-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.map-card{display:flex;flex-direction:column;gap:8px;padding:10px;border:2px solid #486454;border-radius:10px;white-space:normal}.map-card[aria-pressed=true]{border-color:#46cee0;background:#355445}.map-card canvas{width:100%;height:auto}.map-card small{font-size:11px} .map-toolbar[hidden],[hidden]{display:none!important}#nickname{text-transform:none}@media(max-width:650px){#map-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.lobby-row{gap:8px}}
.player-readiness{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.readiness-card{display:flex;flex-direction:column;gap:10px;border:2px solid #53645f;padding:18px;border-radius:12px;background:#152823;overflow-wrap:anywhere}.readiness-card.player-0{color:#46cee0}.readiness-card.player-1{color:#ed70ac}.readiness-card span{font-size:18px;font-weight:bold}.readiness-card small{font-size:12px}.readiness-card.is-ready{border-color:currentColor;background:#2e433b;animation:ready-flash .4s ease-out}#room-detail .readiness-card strong{margin:0;font-size:18px}#cancel-ready{font-size:17px;padding:14px 30px;background:#46cee0;color:#152823;font-weight:bold}@keyframes ready-flash{from{filter:brightness(1.5)}to{filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.readiness-card.is-ready{animation:none}}
.orange,.readiness-card.player-2{color:#d2db68}#p3-meter{background:#d2db68}#p3-card{width:auto;text-align:center;padding:0 0 12px}.three-player .board{width:min(100%,660px);aspect-ratio:1;margin:auto;max-height:none}.three-player .board canvas{aspect-ratio:1;height:auto}.capacity-label{display:block;margin-top:15px}.capacity-label select{background:#243936;color:#def5e6;padding:10px;border:1px solid #526b61;border-radius:6px}.map-toolbar{flex-wrap:wrap}.map-toolbar select{max-width:190px}.lobby-row canvas,#room-detail canvas{object-fit:contain}#room-detail .player-readiness{gap:8px}.readiness-card{min-width:0}@media(max-width:650px){.readiness-card{padding:9px}.readiness-card span,#room-detail .readiness-card strong{font-size:13px}.three-player .board{width:100%}}@media(max-height:520px) and (min-width:650px){.three-player .board{width:min(100%,calc(100dvh - 220px))}}
.three-player .scoreboard .player{width:25%;text-align:center}.three-player .scoreboard .clock{width:20%}.three-player .scoreboard #p3-card{padding:0}.three-player .meter{justify-content:flex-start}.three-player .scoreboard .player>span{letter-spacing:.6px}.three-player .scoreboard{gap:8px}@media(max-width:650px){.three-player .scoreboard .player strong{font-size:22px}.three-player .scoreboard .player>span{font-size:6px}}
.arena-event-status{min-height:30px;border:1px solid #50665d;border-radius:7px;background:#152326;color:#a8bdb5;padding:8px 12px;margin-bottom:10px;font-size:12px;text-align:center}.arena-event-status[data-phase=warning]{border-color:#ffe6a1;color:#ffe6a1}.arena-event-status[data-phase=active]{border-color:#ffe6a1;color:#fff2c7;background:#4a4023}.event-setting{display:block;margin-top:14px;color:#ffe6a1;font-size:13px}.event-setting input,.map-toolbar input{accent-color:#46cee0}.event-guide{margin-top:12px;color:#c7d7c9;font-size:12px}.event-guide p{line-height:1.7;color:#9eb3a8}
.match-clock{display:flex;justify-content:center;padding:0 0 14px}
.match-clock .clock{min-width:164px;padding:10px 28px;background:#101c20;border:1px solid #526760;border-radius:12px;box-shadow:0 4px 14px #0003}
.match-clock .clock strong{display:block;font-size:40px;line-height:1.1;margin:5px 0;letter-spacing:1px;color:#f4fff7}
.match-clock .clock strong.urgent{color:#ffab91}
.scoreboard,.three-player .scoreboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 0 14px}
.three-player .scoreboard{grid-template-columns:repeat(3,minmax(0,1fr))}
.scoreboard .player,.three-player .scoreboard .player,.scoreboard #p3-card{width:auto;min-width:0;text-align:left;padding:12px;border:1px solid #ffffff26;border-radius:10px;background:#101d20}
.score-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.score-heading>span{font-size:10px;font-weight:700;letter-spacing:.7px}
.scoreboard .player strong{font-size:30px;line-height:1.1;margin:0;white-space:nowrap;font-weight:800}
.scoreboard .meter,.three-player .scoreboard .meter{height:26px;margin:10px 0;background:#324346;border:1px solid #ffffff35;border-radius:6px;display:block;overflow:hidden;box-shadow:inset 0 2px 5px #0005}
.scoreboard .meter i{display:block;height:100%;border-radius:3px;background:currentColor;box-shadow:inset 0 2px 0 #ffffff65,inset 0 -3px 0 #0002;transition:width .08s linear}
.scoreboard .player small{display:flex;justify-content:space-between;align-items:center;gap:4px;color:#b4c8c0}
@media(max-width:720px){.match-clock{padding-bottom:10px}.match-clock .clock{padding:8px 20px;min-width:140px}.match-clock .clock strong{font-size:32px}.scoreboard,.three-player .scoreboard{gap:6px}.scoreboard .player,.three-player .scoreboard .player,.scoreboard #p3-card{padding:8px}.score-heading{flex-wrap:wrap;gap:5px}.score-heading>span{font-size:8px;letter-spacing:.2px}.scoreboard .player strong,.three-player .scoreboard .player strong{font-size:25px}.scoreboard .meter{height:24px;margin:8px 0}.scoreboard .player small{flex-wrap:wrap}}
@media(max-height:520px) and (min-width:650px){.match-clock{padding-bottom:6px}.match-clock .clock{padding:4px 20px}.match-clock .clock strong{font-size:26px;margin:0}.scoreboard,.three-player .scoreboard{padding-bottom:8px}.scoreboard .player,.three-player .scoreboard .player,.scoreboard #p3-card{padding:6px 10px}.scoreboard .player strong{font-size:22px}.scoreboard .meter{height:18px;margin:5px 0 0}.scoreboard .player small{display:none}}
@media(prefers-reduced-motion:reduce){.scoreboard .meter i{transition:none}}
.three-player .scoreboard #p3-card{padding:12px}
@media(max-width:720px){.three-player .scoreboard #p3-card{padding:8px}}
@media(max-height:520px) and (min-width:650px){.three-player .scoreboard #p3-card{padding:6px 10px}}
.meter.shared-meter{display:flex;justify-content:flex-start;gap:0;height:32px;margin:0;background:#324346;border:1px solid #ffffff45;border-radius:7px;box-shadow:inset 0 2px 5px #0005}
.shared-meter i{display:block;flex:0 0 auto;height:100%;border-radius:0;box-shadow:inset 0 2px 0 #ffffff65,inset 0 -3px 0 #0002;transition:width .08s linear}
.arena:not(.three-player) .shared-meter #p2-meter{margin-left:auto}
.meter-caption{font-size:10px;color:#a9beb6;margin:6px 0 12px;text-align:right}
.scoreboard .player small{margin-top:8px}
@media(max-width:720px){.meter.shared-meter{height:28px}.meter-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.shared-meter i{transition:none}}