:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#101916;color:#ecf2e9;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at top right,#26403460,transparent 65%)}main{max-width:1080px;margin:auto;padding:48px 28px}header{margin-bottom:38px}.eyebrow{font-size:.72rem;letter-spacing:.24em;color:#a6c58a}h1{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.06em;margin:14px 0}h1 span{color:#adc694}h2{font-size:1.35rem;margin-top:0}p{color:#a8b7ad;line-height:1.6}.panel{background:#1a2721;border:1px solid #35463b;border-radius:20px;padding:32px;box-shadow:0 24px 90px #0003}#home{max-width:550px}label{display:block;font-size:.85rem;color:#b5c5b7;margin:18px 0 10px}input{display:block;width:100%;background:#101a15;color:#fff;border:1px solid #51644e;border-radius:9px;padding:15px;font:inherit}button{border:1px solid transparent;border-radius:9px;padding:14px 18px;background:#b7cf99;color:#152015;font:inherit;font-weight:700;cursor:pointer;min-height:48px}button:hover{filter:brightness(1.1)}button:disabled{opacity:.4;cursor:not-allowed}.secondary{background:#2c3e31;border-color:#53634b;color:#e1ebd6}.quiet{background:transparent;border-color:#465549;color:#c7d0c8}.actions{display:flex;gap:12px;margin-top:20px}.actions button{flex:1}form{margin-top:24px;border-top:1px solid #3b493c}form button{margin:14px 8px 0 0}.lobby{display:grid;grid-template-columns:2fr 1fr;gap:32px}.section-heading{display:flex;justify-content:space-between;align-items:baseline}#count{color:#b7cf99}ul{list-style:none;padding:0;margin:20px 0}li{padding:20px 16px;background:#223229;border:1px solid #394b3c;border-radius:10px;margin-bottom:12px;display:flex;justify-content:space-between;gap:12px;overflow-wrap:anywhere}li span:last-child{color:#b7cf99;flex-shrink:0}li.empty{opacity:.4}aside{border-left:1px solid #3b493c;padding-left:28px}aside button{width:100%;margin-top:14px}#room-code{display:block;font-size:2rem;letter-spacing:.14em;margin:15px 0}#hint{font-size:.8rem;min-height:38px}#notice{background:#3c3b25;border:1px solid #8d8951;padding:16px;border-radius:10px;color:#f0e8bd}footer{display:flex;justify-content:space-between;font-size:.65rem;letter-spacing:.14em;color:#748b79;margin-top:36px}[hidden]{display:none!important}:focus-visible{outline:3px solid #e4e7a2;outline-offset:4px}@media(max-width:580px){main{padding:28px 16px}.panel{padding:22px}.lobby{grid-template-columns:2fr 1fr;gap:16px}aside{padding-left:14px}aside button{padding:12px 6px;font-size:.85rem}#room-code{font-size:1.15rem;letter-spacing:.06em}li{padding:15px 8px;flex-wrap:wrap;font-size:.85rem}footer{letter-spacing:0;font-size:.6rem}}

body.playing{overflow:hidden}body.playing main>header,body.playing main>footer{display:none}body.playing #notice:not([hidden]){position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:20;max-width:90vw}
#game{position:fixed;inset:0;background:#14251e}#world{display:block;width:100%;height:100%}#game-menu{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));font-size:26px;background:#20392ddd;color:#e9f2e6;border:1px solid #60745b;padding:8px 16px}
#game-status{position:absolute;top:max(28px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));color:#c0d3bb;pointer-events:none}
#joystick{position:absolute;left:max(28px,env(safe-area-inset-left));bottom:max(32px,env(safe-area-inset-bottom));width:132px;height:132px;border:2px solid #bdd3ae70;background:#bcd4aa18;border-radius:50%;touch-action:none;user-select:none;display:grid;place-items:center}
#stick{width:54px;height:54px;border-radius:50%;background:#c7dea688;pointer-events:none}
#action-controls{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(40px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:20px}#action-controls button{width:68px;height:68px;border-radius:50%;background:#bdd2a644;color:#eff7e8;border:2px solid #bbd5a68a;font-size:24px;touch-action:none;user-select:none}#action-controls #action-a{margin-bottom:30px}#action-controls button.pressed{background:#c8e5a6;color:#14251e}
#game-dialog{width:min(400px,90vw);border:1px solid #70845d;border-radius:20px;background:#1b2c22;color:#edf2e7;padding:28px}#game-dialog::backdrop{background:#0009}#game-dialog button{width:100%;margin-top:12px}
@media(max-height:430px){#joystick{width:108px;height:108px;bottom:20px}#action-controls{bottom:20px}}

/* Landscape camera frame: 19:10 baseline, clamped to 19:8 .. 19:15. */
#game{background:#080d0b}
#game-viewport{position:absolute;overflow:hidden;background:#14251e}
#rotate-notice{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:#101c16;z-index:30}
#rotate-notice>span{font-size:70px;color:#b7cf99;line-height:1;margin-bottom:24px}
#rotate-notice h2{font-size:1.35rem;margin-bottom:8px}
#rotate-notice p{max-width:280px}

/* --control-scale: 옵션에서 선택한 조이스틱·기술 버튼의 크기 배율. */
:root{--control-scale:1}#joystick{width:calc(132px * var(--control-scale));height:calc(132px * var(--control-scale))}#stick{width:calc(54px * var(--control-scale));height:calc(54px * var(--control-scale))}#action-controls button{width:calc(68px * var(--control-scale));height:calc(68px * var(--control-scale))}#game-dialog{max-height:90dvh;overflow:auto}.settings{border-top:1px solid #47604b;padding-top:12px;margin-bottom:14px}.settings input[type=checkbox]{display:inline-block;width:auto}.settings select{font:inherit;background:#203b2b;color:white;padding:8px;border-radius:8px}.settings p{font-size:12px}#client-kind{color:#b7cf99;font-size:13px}.login-button{display:block;padding:16px;margin-top:12px;border-radius:9px;background:#dbe8d0;color:#152015;text-decoration:none;text-align:center}.login-button[aria-disabled=true]{opacity:.4;pointer-events:none}

#game-hud{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:top left}

.settings input[type=radio]{display:inline-block;width:auto;margin-right:8px}.settings fieldset{margin-top:20px;border:1px solid #47604b;border-radius:8px}.settings fieldset label{font-size:14px;margin:12px 0}#menu-test p{font-size:14px}