: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:3px solid #666666;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;border:2px solid #666666;pointer-events:none}
#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}}

/* 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))}#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}

/* --action-scale: 기술·상호작용 버튼의 크기와 버튼 사이 간격에 적용하는 배율. */
/* --action-right, --action-bottom: 버튼 묶음의 우측·하단 기준 여백(CSS 픽셀). */
#game-hud{
  --action-scale:var(--control-scale);
  --action-right:max(28px,env(safe-area-inset-right));
  --action-bottom:max(36px,env(safe-area-inset-bottom));
}
@media(max-height:430px){
  #game-hud{
    --action-scale:calc(var(--control-scale) * .85);
    --action-bottom:max(20px,env(safe-area-inset-bottom));
  }
}

/* A를 기준으로 B는 오른쪽 위, C는 왼쪽 아래에 배치한다. */
#action-controls{position:absolute;right:var(--action-right);bottom:var(--action-bottom)}
#action-controls .skill-control{position:absolute;display:flex}
.skill-control-a{right:calc(32px * var(--action-scale));bottom:0}
.skill-control-b{right:0;bottom:calc(124px * var(--action-scale))}
.skill-control-c{right:calc(178px * var(--action-scale));bottom:0}
#action-controls button{width:calc(68px * var(--action-scale));height:calc(68px * var(--action-scale));min-height:0;border-radius:50%;background:#bdd2a644;color:#eff7e8;border:3px solid #666666;font-size:13px;line-height:1.2;padding:4px;white-space:normal;overflow-wrap:anywhere;touch-action:none;user-select:none}
#action-controls #action-a{width:calc(104px * var(--action-scale));height:calc(104px * var(--action-scale));font-size:18px}
/* 기술 레벨은 버튼 안에서 기술명 아래에 표시한다. */
.skill-level{display:block;font-size:.8em;white-space:nowrap}
#action-controls button.pressed{background:#c8e5a6;color:#14251e}
/* --skill-cooldown-font-size: 화면 배율을 반영한 캐릭터 이름과 같은 크기의 UI 글자 크기. */
.skill-cooldown{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);font:var(--skill-cooldown-font-size,14px) system-ui;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap;pointer-events:none}

/* 메뉴는 왼쪽에 두고 타이머는 상단 중앙 경쟁점수 바로 왼쪽에 배치한다. */
#game-topbar{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left))}
#game-topbar #game-menu{position:static}
#game-metrics{position:absolute;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);min-width:98px;min-height:46px;max-width:calc(100% - 360px);pointer-events:none}
#room-timer{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);min-width:72px;text-align:center;font:700 22px system-ui;font-variant-numeric:tabular-nums;color:#eff7e8;background:#20392ddd;border:1px solid #60745b;border-radius:9px;padding:8px;pointer-events:none}
#room-timer-grace{display:block;font-size:12px;font-weight:400;white-space:nowrap}
#room-timer.expired{color:#ffaaa0;border-color:#c77970}

/* 대기실 비공개 선택과 공개 방 목록의 터치 영역을 정리한다. */
.privacy-option{display:flex;align-items:center;gap:8px}.privacy-option input{width:auto}#public-rooms{list-style:none;padding:0;display:grid;gap:8px;max-height:360px;overflow:auto}#public-rooms button{width:100%;text-align:left}#room-browser{margin-top:18px;border-top:1px solid #47604b;padding-top:12px}

/* 미니맵은 게임 HUD 우측 상단에 고정하고 조작 입력을 가리지 않는다. */
#minimap{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:clamp(100px,18vw,150px);height:auto;aspect-ratio:1;border-radius:50%;pointer-events:auto;background:#A7A3B0;box-shadow:0 2px 8px #0008}

/* 확대 지도는 게임 화면 위에 놓이며 지도 전체에 투명도 0%(불투명도 100%)를 적용한다. */
#minimap{cursor:pointer}#minimap:focus-visible{outline:3px solid #fff;outline-offset:3px}
#expanded-map,#skill-shop{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:auto}
#expanded-map[hidden]{display:none}
#expanded-map-panel,#skill-shop-panel{position:relative;width:min(80vw,128vh);max-width:90%;aspect-ratio:8/5}
#expanded-map-canvas{display:block;width:100%;height:100%;opacity:1;pointer-events:auto;touch-action:none;cursor:grab}
#expanded-map-canvas:active{cursor:grabbing}
#expanded-map-close{position:absolute;right:10px;top:10px;z-index:1;width:36px;height:36px;min-height:0;padding:0;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:#25312c;color:#fff;font:28px/1 system-ui;cursor:pointer;touch-action:manipulation}
#expanded-map-close:focus-visible{outline:3px solid #63d4d2;outline-offset:3px}

/* 점수화면은 확정 경쟁점수와 하단 중앙 복귀 버튼을 제공한다. */
#score-screen{position:fixed;inset:0;z-index:50;background:#14251e;color:#eff7e8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#score-screen[hidden]{display:none}#score-value{font:700 64px system-ui}#score-exit{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);min-width:180px}
/* 상호작용 버튼은 터치 조작 숨김 여부와 독립적으로 A 버튼의 왼쪽 위에 둔다. */
#interaction-button{position:absolute;right:calc(var(--action-right) + 128px * var(--action-scale));bottom:calc(var(--action-bottom) + 110px * var(--action-scale));width:calc(60px * var(--action-scale));height:calc(48px * var(--action-scale));min-height:0;padding:0;border-radius:14px;background:#263e32;color:#fff;border:3px solid #666666;font-size:20px;pointer-events:auto;touch-action:manipulation}
#escape-dialog{color:#eff7e8;background:#1d3427;border:1px solid #88aa78;border-radius:14px;padding:24px}#escape-dialog::backdrop{background:#0007}#escape-dialog button{min-width:80px;margin:8px}

/* 현재 플레이어 서버 변수 목록은 긴 ID·배열을 줄바꿈해 모바일에서도 읽을 수 있게 한다. */
.status-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}.status-table th,.status-table td{padding:8px 5px;border-bottom:1px solid #47604b;text-align:left;overflow-wrap:anywhere;vertical-align:top}.status-table th{width:52%;color:#bcd6b2}#menu-status>p{font-size:12px;color:#bcd6b2}

/* 어두운 회색 테두리와 얇은 밝은 외곽선으로 밝고 어두운 지형 모두에서 터치 조작부를 구분한다. */
#joystick,#stick,#action-controls button,#interaction-button{box-shadow:0 0 0 1px #e6e6e680,0 2px 6px #0006}
/* 재사용 대기 중에도 버튼 테두리는 유지하고 배경·글자색으로 비활성 상태를 구분한다. */
#action-controls button:disabled{opacity:1;background:#8f968c24;color:#b3b9af}
/* 경쟁점수는 메뉴·미니맵과 별개로 게임 화면 상단 중앙에 고정한다. */
#competition-score{display:flex;align-items:center;gap:10px;padding:9px 14px;border:2px solid #666666;border-radius:10px;background:#1b2622eb;color:#fff;box-shadow:0 1px 5px #0008;pointer-events:none;font-variant-numeric:tabular-nums}
#competition-score span{font-size:13px;white-space:nowrap;color:#d8dfd5}
#competition-score-value{font-size:22px;line-height:1.2;min-width:1ch;overflow:hidden;text-overflow:ellipsis}

/* 게임 HUD의 지도와 구매창은 같은 패널 크기를 공유한다. */
#game-menu-controls{display:grid;gap:6px}
#skill-shop-open,#skill-reroll,#skill-shop-close{padding:0;min-height:36px;border:1px solid #687b70;background:#25312c;color:#fff}
#skill-shop-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:14px;background:#162a22;border:1px solid #687b70;border-radius:12px;box-sizing:border-box}
#skill-shop-close{position:absolute;right:10px;top:10px;width:36px;border-radius:50%}
#skill-shop-points{padding-right:42px;color:#ffdc93;font-weight:700}
#skill-shop-list{display:flex;align-items:stretch;justify-content:safe center;gap:8px;overflow:auto}
#skill-shop-list button{flex:0 0 clamp(104px,22%,210px);display:flex;flex-direction:column;align-items:start;gap:6px;text-align:left;overflow:auto;padding:8px;border:1px solid #687b70;background:#243b30;color:#fff}
#skill-shop-list button span{font-size:clamp(11px,1.5vw,15px)}
#skill-shop-list button small{margin-top:auto;color:#ffdc93}
#skill-shop-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:13px}
#skill-shop-error{margin-right:auto;color:#ffbca9}
#skill-reroll{min-width:44px}