*{box-sizing:border-box}body{margin:0;background:#008080;color:#111;font-family:Arial,'Malgun Gothic',sans-serif}main{max-width:1020px;margin:18px auto;padding:5px;background:#c0c0c0;border:3px solid;border-color:#fff #303030 #303030 #fff;box-shadow:2px 2px #000}header{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#000080;color:white;padding:6px 10px;margin-bottom:4px}.brand{display:flex;gap:9px;align-items:center;color:white;text-decoration:none;font-size:16px;font-weight:bold}.brand small{font-size:14px;font-weight:normal}.bolt{color:#ffff00;font-size:22px}.edition{font-size:14px;white-space:nowrap}.toolbar,.modes,.options{display:flex;align-items:center;gap:6px}.toolbar{justify-content:space-between;padding:5px 4px 8px}button,select{font:14px Arial,'Malgun Gothic',sans-serif;color:#111;background:#c0c0c0;padding:7px 12px;border:2px solid;border-color:#fff #404040 #404040 #fff;border-radius:0;cursor:pointer}button:active,.modes .selected{border-color:#404040 #fff #fff #404040;background:#ddd}button:focus-visible,select:focus-visible{outline:2px dotted #000;outline-offset:-5px}select{background:white}.arena{position:relative;overflow:hidden;border:3px solid;border-color:#404040 #fff #fff #404040;background:#377cd7}canvas{width:100%;display:block;image-rendering:pixelated;aspect-ratio:3/2}.scoreboard{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#overlay{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:center;flex-direction:column;padding:0 14px 13%;text-align:center;color:#fff;text-shadow:2px 2px #000}#overlay[hidden]{display:none}.eyebrow{display:none}h1{font-size:24px;margin:0 0 8px}#overlay h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#overlay p{font-size:16px;margin:8px 0;max-width:90%}#start{background:#c0c0c0;color:#000;text-shadow:none;font-size:18px;font-weight:bold;min-width:170px;padding:11px 24px;margin-top:10px}#start span{display:none}#overlay>small{font-size:14px;margin-top:12px}#toast{position:absolute;top:46%;width:100%;text-align:center;color:#fff;font-size:24px;font-weight:bold;text-shadow:2px 2px #000;pointer-events:none}.bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 9px}.tag{font-size:14px;font-weight:bold}.bottom p{font-size:14px;line-height:1.7;margin:6px 0}.bottom p[hidden]{display:none}kbd{display:inline-block;background:#e6e6e6;border:1px solid #777;padding:0 5px;font:14px monospace;min-width:24px;text-align:center}.bottom b{color:#000080;margin-right:8px}footer{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:1.6;border-top:1px solid #808080;padding:8px}footer a{color:#000080}.touch{display:none;gap:5px;padding:5px 9px;touch-action:none}.touch button{flex:1;min-height:50px;user-select:none}@media(pointer:coarse){.touch{display:flex}}@media(max-width:650px){main{margin:0;border-width:2px}.brand{font-size:14px}.brand small{display:none}.edition{font-size:12px}.toolbar{flex-wrap:wrap}.modes{flex:1}.modes button{flex:1}.options{width:100%;justify-content:space-between}button,select{font-size:14px;padding:7px 8px}#overlay{padding-bottom:9%}#overlay p{font-size:13px;margin:3px 0}#start{font-size:16px;padding:8px 16px;margin-top:5px}#overlay>small{display:none}#toast{font-size:18px}.bottom{align-items:flex-start;padding:8px 4px}.bottom p{font-size:13px}.bottom>button{white-space:nowrap}footer{flex-direction:column;gap:3px}.touch{padding:5px 2px}.touch button{font-size:12px}}
/* Match room controls use the same compact desktop chrome as the game. */
#online-panel{padding:12px 16px;background:#ddd;border-bottom:2px solid #808080}
#online-panel[hidden]{display:none}.online-heading,.invite-row,.online-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.online-heading{justify-content:space-between}#online-status{margin:10px 0;line-height:1.5}.invite-row input{min-width:150px;flex:1;padding:8px;font:inherit;background:#fff;color:#111;border:2px inset #eee}.online-actions{margin:10px 0}#online-panel small{display:block;line-height:1.6}button:disabled{opacity:.55;cursor:default}#online-role{font-size:13px}
canvas{aspect-ratio:432/304}main{max-width:888px}.toolbar{flex-wrap:wrap}.options{flex-wrap:wrap}.arena #overlay{padding-bottom:3%;pointer-events:none}.arena #overlay button{pointer-events:auto}#title-choices{display:none;position:absolute;inset:0;pointer-events:none}#title-choices button{position:absolute;left:18%;width:64%;height:11%;padding:0;background:transparent;border:none;pointer-events:auto}#title-solo{top:58%}#title-duo{top:69%}.arena:has(canvas[data-scene="menu"]) #title-choices{display:block}.arena:has(canvas[data-scene="menu"]) #overlay{display:none}#title-choices button:focus-visible{outline:2px dashed white;outline-offset:2px}

.modes[hidden]{display:none}#title-choices button{left:15%;width:70%;height:9%;color:#001dba;font-family:monospace,"Malgun Gothic",sans-serif;font-size:clamp(14px,3.2vw,26px);font-weight:900;line-height:1.2;text-shadow:1px 1px #baff9c;white-space:nowrap}#title-choices button:hover,#title-choices button:focus-visible{color:#fff;text-shadow:2px 2px #001dba;background:#00108055;outline:2px dashed #fff;outline-offset:0}#title-solo{top:55%}#title-duo{top:65%}#title-online{top:75%}
@font-face{font-family:Galmuri11;src:url('/volley/fonts/Galmuri11.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
#title-choices button,#title-choices button:hover,#title-choices button:focus-visible{color:transparent;font-size:0;text-shadow:none}

.ready-players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.ready-card{display:flex;flex-direction:column;gap:8px;padding:12px;border:2px inset #eee;background:#f4f4f4}.ready-card b{font-size:14px}.ready-card span{font-size:18px;font-weight:bold;color:#555}.ready-card[data-ready="yes"]{background:#d9f5d9;border-color:#238338}.ready-card[data-ready="yes"] span{color:#146322}.ready-card[data-ready="absent"]{background:#ddd}.ready-card[data-ready="playing"] span{color:#000080}

.lobby-entry{display:flex;flex-wrap:wrap;gap:6px;align-items:end;margin-top:10px}.lobby-entry label{display:grid;gap:4px;flex:1;min-width:140px}.lobby-entry input,.lobby-grid input{font:inherit;min-width:0;padding:6px;border:2px inset #eee}.lobby-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin-top:12px;font-size:14px}.lobby-grid section{min-width:0}.lobby-grid ul,#online-chat-log{height:126px;overflow:auto;background:#fff;border:2px inset #eee;padding:8px;margin:6px 0;list-style:none;overflow-wrap:anywhere}.lobby-grid li,#online-chat-log p{margin:0 0 6px;line-height:1.5}#online-chat-form{display:flex;gap:6px}#online-chat-input{flex:1}@media(max-width:600px){.lobby-grid{grid-template-columns:1fr}.lobby-grid ul{height:80px}}

@media(min-width:1050px){main:has(#online-panel:not([hidden])){max-width:1280px;display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:4px}main:has(#online-panel:not([hidden]))>header,main:has(#online-panel:not([hidden]))>.toolbar,main:has(#online-panel:not([hidden]))>footer{grid-column:1/-1}#online-panel:not([hidden]){grid-column:2;grid-row:3/6;padding:12px}.arena{grid-column:1}.lobby-grid{grid-template-columns:1fr}.lobby-grid ul{height:110px}#online-chat-log{height:170px}.online-heading{align-items:flex-start}.lobby-entry label{flex-basis:100%}}

#online-settings{margin-top:10px}#online-settings summary{cursor:pointer;font-size:14px}@media(min-width:1050px){.lobby-grid ul{height:88px}#online-chat-log{height:140px}.ready-card span{font-size:14px}}