/* 원랜디_웹게임 mods — 워크래프트 원랜디식 아래쪽 배치: 왼쪽 미니맵 · 가운데 선택한 캐릭터와 해적단 · 오른쪽 명령 카드 */
body.game-client .command-dock{grid-template-columns:clamp(220px,19vw,320px) minmax(250px,1.15fr) minmax(220px,1fr) clamp(250px,22vw,330px)}
body.game-client .command-dock>.minimap-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:3px;padding:6px 7px!important;overflow:hidden!important}
body.game-client .command-dock>.selection-panel{grid-column:2;grid-row:1}
body.game-client .command-dock>.crew-section{grid-column:3;grid-row:1}
body.game-client .command-dock>.command-card-panel{grid-column:4;grid-row:1}
body.game-client .command-dock>.selection-panel{border-left:1px solid #304752}
body.game-client .command-dock>.command-card-panel{border-left:1px solid #304752}
#minimap{flex:1;min-height:0;width:100%;display:block;border:1px solid #3d5b66;border-radius:3px;background:#0a3440;cursor:crosshair;touch-action:none}
#minimap-hint{color:#7f98a1;font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 가운데 캐릭터: 초상화를 크게 */
body.game-client .selection-panel .selected-hero{grid-template-columns:76px minmax(0,1fr);height:80px;gap:11px}
body.game-client .selection-panel .selected-hero img{width:74px;height:74px;border:2px solid var(--rarity,#49616b);border-radius:6px;box-shadow:0 0 10px #0008}
body.game-client .selection-panel .selected-hero h3{font-size:14px}
body.game-client .selection-panel .selected-hero p,body.game-client .selection-panel .rarity-label{font-size:11px}
/* 좁은 화면(10-27 사용자 "모바일로 하면 오른쪽 위습 뽑는 것들이 하나도 안 보임"): 예전엔 네 칸 최소 폭 합이 화면보다 커서
   명령 카드가 오른쪽 밖으로 밀렸다. 가운데 두 칸은 0까지 줄 수 있게 하고, 휴대폰 세로는 원본처럼 두 줄로 바꾼다. */
@media(max-width:1100px){
  body.game-client .command-dock{grid-template-columns:150px minmax(0,1.1fr) minmax(0,1fr) 240px}
}
@media(max-width:760px){
  #minimap-hint{display:none}
  body.game-client .selection-panel .selected-hero{grid-template-columns:56px minmax(0,1fr);height:60px}
  body.game-client .selection-panel .selected-hero img{width:54px;height:54px}
}
/* 휴대폰 세로: 윗줄 = 명령 카드(넓게) · 선택한 캐릭터, 아랫줄 = 미니맵 · 해적단(원본도 세로 휴대폰은 두 줄) */
@media(max-width:760px) and (min-height:501px){
  body.game-client .game-shell{grid-template-rows:40px minmax(0,1fr) 284px}
  body.game-client .game-drawer{bottom:284px}
  body.game-client .command-dock{grid-template-columns:96px minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:164px 119px;overflow:hidden}
  body.game-client .command-dock>.command-card-panel{grid-column:1/3;grid-row:1;min-width:0;border-left:0}
  body.game-client .command-dock>.selection-panel{grid-column:3;grid-row:1;padding:6px;border-left:1px solid #304752}
  body.game-client .command-dock>.minimap-panel{grid-column:1;grid-row:2;padding:4px!important}
  body.game-client .command-dock>.crew-section{grid-column:2/4;grid-row:2;padding:4px 6px;border-left:1px solid #304752}
}
/* 휴대폰 가로(높이 500 이하): 한 줄 그대로, 미니맵·명령 카드를 줄이고 가운데 두 칸이 남는 폭을 나눔 */
@media(max-height:500px){
  body.game-client .command-dock{grid-template-columns:96px minmax(0,1fr) minmax(0,1.3fr) 220px}
  #minimap-hint{display:none}
}
/* 함께하기 채팅 (src/party-chat.js): 전장 왼쪽 아래 — 잠깐 보이고 사라짐, 입력창, Z 기록 */
.chat-feed{position:absolute;left:14px;bottom:44px;z-index:6;display:flex;flex-direction:column;gap:3px;max-width:min(560px,60%);pointer-events:none;margin:0;padding:0;list-style:none}
.chat-feed>li{padding:3px 9px;border-radius:4px;background:#04141ccc;color:#eef4f5;font-size:13px;line-height:1.35;text-shadow:0 1px 2px #000;transition:opacity 1.5s;word-break:break-all}
.chat-feed>li.fading{opacity:0}
.chat-feed b,.chat-log b{font-weight:700}
.chat-input{position:absolute;left:14px;bottom:12px;z-index:7;display:flex;align-items:center;gap:8px;width:min(560px,70%);padding:6px 9px;border:1px solid #6d8f9a;border-radius:5px;background:#061821ee;box-shadow:0 4px 18px #000a}
.chat-input[hidden]{display:none}
.chat-input>span{color:#ffd877;font-size:12px;font-weight:700;white-space:nowrap}
.chat-input>input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:14px}
.chat-input>small{color:#86a1aa;font-size:10px;white-space:nowrap}
.chat-log{position:absolute;left:14px;bottom:44px;z-index:8;display:flex;flex-direction:column;width:min(520px,70%);max-height:62%;border:1px solid #5d7c87;border-radius:6px;background:#051720f2;box-shadow:0 6px 24px #000c}
.chat-log[hidden]{display:none}
.chat-log>header{display:flex;justify-content:space-between;align-items:baseline;padding:7px 11px;border-bottom:1px solid #2c4651;color:#e6eef0;font-size:13px}
.chat-log>header small{color:#86a1aa;font-size:10px}
.chat-log ol{margin:0;padding:6px 11px 9px;overflow:auto;list-style:none;font-size:13px;line-height:1.45;color:#e9eef0}
.chat-log li{word-break:break-all}
.chat-log time{margin-right:7px;color:#7d97a0;font-size:11px}
.chat-log .chat-empty{color:#86a1aa}
/* 신호(핑, Alt+클릭): 전장 위 '!' — 보낸 선장 섬 색 (src/world-map.js) */
.world-ping{position:absolute;z-index:5;width:30px;height:30px;margin:-34px 0 0 -15px;display:grid;place-items:center;border:2px solid var(--ping);border-radius:50%;background:#020b10cc;color:var(--ping);font:900 20px/1 system-ui;text-shadow:0 0 6px var(--ping);pointer-events:none;animation:world-ping-pulse .5s ease-in-out 5 alternate}
.world-ping[hidden]{display:none}
.world-ping::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:10px;margin-left:-1px;background:var(--ping)}
@keyframes world-ping-pulse{from{transform:scale(1)}to{transform:scale(1.25)}}
/* 다른 선장 동료 정보 카드 (누르면 5초) */
.world-unit-card{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:10px;align-items:center;padding:7px 14px 7px 7px;border:2px solid var(--rarity,#49616b);border-radius:8px;background:#06161ff0;color:#e8f0f2;box-shadow:0 6px 20px #000a;pointer-events:none}
.world-unit-card[hidden]{display:none}
.world-unit-card img{width:56px;height:56px;border-radius:5px;background:#dce7df;object-fit:contain}
.world-unit-card div{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.25}
.world-unit-card small{color:#9fb6bd;font-size:11px}
.world-unit-card strong{font-size:15px;color:#fff}
/* 선택 18명(사용자 요청 10-27 "3줄하면 18명"): 칸 6×3. 원래 칸 크기는 2줄 기준이라 3줄이 아래로 6px 넘침 → 선택 칸만 3줄 높이에 맞춤(약 39→37px), 오른쪽 보유 목록은 원래 크기 */
body.game-client .crew-selection{--cell:min(calc((100cqh - 6px)/3),calc((60cqw - 15px)/6));grid-template-rows:repeat(3,var(--cell))}
/* 흔함 모두 창고 버튼(사용자 요청 10-27): 흔함 보유 수 줄 맨 앞, 다른 흔함 칸과 같은 모양 */
body.game-client .crew-common.store-all-commons{color:#9fe0b0;border-color:#3f6f5a}
body.game-client .crew-common.store-all-commons>span{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:2px;background:#163a2c;color:#bff3c8;font-size:6.5px;font-weight:700;line-height:1;text-align:center;letter-spacing:-.3px}
body.game-client .crew-common.store-all-commons:disabled{opacity:.42;cursor:default}
@media(max-width:700px),(max-height:500px){body.game-client .crew-common.store-all-commons>span{width:15px;height:15px;font-size:5.5px}}
/* 함께하기 방 목록(사용자 요청 10-27): 닉네임 · 방 목록 '제목 (1/4)' · 초대 코드 · 맨 밑 방 만들기 · 빨간 '닉네임을 입력하세요' */
#party-list-view>label,#party-create-view>label{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center;margin:14px 0;font-size:13px}
#party-dialog .party-list-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 6px;font-size:12px;color:#c9dcbd}
#party-dialog .party-list-head .text-button{font-size:12px;padding:4px 6px}
#party-dialog .party-room-list{list-style:none;margin:0;padding:0;max-height:min(260px,40dvh);overflow:auto;border:1px solid #34483f;border-radius:7px;background:#0c1d24}
#party-dialog .party-room-list li+li{border-top:1px solid #22363f}
#party-dialog .party-room-list li.empty{padding:16px;text-align:center;color:#8aa39a;font-size:12px}
#party-dialog .party-room-list button{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:11px 13px;border:0;background:none;color:#e4ecdf;font:inherit;font-size:13px;text-align:left;cursor:pointer}
#party-dialog .party-room-list button:hover:not(:disabled),#party-dialog .party-room-list button:focus-visible{background:#18394a;outline:none}
#party-dialog .party-room-list button:disabled{opacity:.5;cursor:default}
#party-dialog .party-room-list strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
#party-dialog .party-room-list span{color:#e5cf8f;font-variant-numeric:tabular-nums;white-space:nowrap}
#party-dialog .party-room-list small{min-width:40px;color:#8fc4b6;font-size:11px;text-align:right;white-space:nowrap}
#party-dialog #party-show-create{margin-top:16px}
#party-dialog .party-back{display:block;margin:12px auto 0;font-size:12px}
#party-dialog .party-name-error{margin:12px 0 0;color:#ff4d4d;font-size:13px;font-weight:700;text-align:center}
#party-dialog .party-room-title{margin:0 0 10px;color:#f0e2b0;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#party-dialog .party-room-title:empty{display:none}
/* 위쪽 함께하기 표시줄: 초대 코드 대신 방 제목(10-27) — 넓은 화면에서도 길면 줄임 */
@media(min-width:1101px){.party-pill{max-width:280px;overflow:hidden;text-overflow:ellipsis}}
/* 스토리 카드 접기(사용자 요청 10-27): '접기'를 누르면 카드가 사라지고 작은 '01. 로그타운 · 0/12 ▸' 버튼만 남는다 */
body.game-client .board-left-stack.story-folded .story-brief{display:none}
body.game-client .story-brief-fold{flex:none;padding:1px 7px;border:1px solid #416772;border-radius:3px;background:#102a33;color:#cfe0dc;font-size:10px;line-height:15px;cursor:pointer}
body.game-client .story-brief-fold:hover,body.game-client .story-brief-chip:hover{border-color:#f5db82}
body.game-client .story-brief-chip{align-self:flex-start;max-width:100%;padding:4px 9px;border:1px solid #58756c99;border-radius:4px;background:#071c24e8;color:#eadbb0;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:0 3px 12px #0005}
/* 휴대폰 세로 전장 크게(사용자 요청 10-27 "화면이 너무 작아, 밑에 것 살짝 내리면서 밑으로 화면 키워"): 전장을 120px 키우고
   그만큼 페이지가 아래로 길어진다. 조작판은 화면을 살짝 위로 밀면 다 보인다(전장 위에서 끄는 건 화면 이동이라 페이지는 조작판·윗줄을 밀어 내림).
   높이는 주소창이 접혀도 흔들리지 않는 100svh 기준. */
@media(max-width:760px) and (min-height:501px){
  html,body.game-client{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  body.game-client{grid-template-rows:42px calc(100vh + 78px);grid-template-rows:42px calc(100svh + 78px)}
}
/* 휴대폰 채팅(10-27 사용자 "모바일에서는 대화 치고 싶을 때 어떻게?"): 손가락 화면에서만 '💬 채팅' 버튼과 입력창 버튼을 보인다 */
.chat-open-button{display:none}
.chat-input>.chat-touch,.chat-log .chat-log-close{display:none}
@media(pointer:coarse){
  .chat-open-button:not([hidden]){display:block;position:absolute;right:8px;bottom:52px;z-index:7;padding:7px 13px;border:1px solid #6d8f9a;border-radius:18px;background:#061821e6;color:#fff;font-size:13px;font-weight:700;box-shadow:0 3px 12px #000a}
  .chat-input{left:8px;right:8px;width:auto;bottom:8px;gap:6px;padding:5px 6px}
  .chat-input>small{display:none}
  .chat-input>input{font-size:16px}
  .chat-input>.chat-touch{display:inline-block;flex:none;padding:6px 9px;border:1px solid #6d8f9a;border-radius:4px;background:#12313d;color:#e8f2f4;font-size:12px}
  .chat-input>.chat-send{background:#1f6b5c;border-color:#3fb39a}
  .chat-log{left:8px;right:8px;width:auto}
  .chat-log>header small{display:none}
  .chat-log .chat-log-close{display:inline-block;padding:2px 10px;border:1px solid #6d8f9a;border-radius:4px;background:#12313d;color:#e8f2f4;font-size:13px}
}
/* 조합 화면(사용자 요청 10-27): 한 동료 조합을 볼 때 '← 가능한 전체 조합 보기'가 제목 자리에 크게, 'OOO 재료 조합'은 그 아래 작게 */
body.game-client .game-drawer .combine-panel .section-heading{flex-wrap:wrap;row-gap:6px}
body.game-client .combine-panel .recipe-back-button{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:6px 13px 6px 9px;border:1px solid #6d8f9a;border-radius:6px;background:#12313d;color:#f0e2b0;font-size:15px;font-weight:700;line-height:1.2;cursor:pointer}
body.game-client .combine-panel .recipe-back-button[hidden]{display:none}
body.game-client .combine-panel .recipe-back-button b{font-size:24px;line-height:1;color:#ffd877}
body.game-client .combine-panel .recipe-back-button:hover,body.game-client .combine-panel .recipe-back-button:focus-visible{border-color:#f5db82;background:#183d4b;outline:none}
body.game-client .game-drawer .combine-panel .recipe-back-button:not([hidden])~h2{order:3;flex:1 0 100%;color:#9fb6b3;font-size:12px;font-weight:600}
/* PC·태블릿도 전장을 아래로 늘리고 휠로 페이지 위아래(사용자 요청 10-27): 아래 조작판 높이만큼 페이지가 길어진다.
   맨 위에서는 전장이 크게, 휠을 내리면 조작판이 보인다. 확대·축소는 Ctrl+휠(renderer-3d.js onWheel). */
@media(min-width:761px) and (min-height:501px){
  html,body.game-client{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
  body.game-client{grid-template-rows:44px calc(100vh - 44px + 184px*var(--dock-zoom,1));grid-template-rows:44px calc(100svh - 44px + 184px*var(--dock-zoom,1))}
}
/* 도움소 주문(사용자 요청 10-27): 못 쓰는 주문도 누르면 이유가 나오도록 눌리게 두고, 보기만 흐리게. 설명 말풍선(PC 마우스 올림·휴대폰 누름) */
body.game-client .support-quick-spell.spell-blocked,body.game-client .support-spell-button.spell-blocked{border-color:#2d424a;background:#0b1d25;color:#647a80;opacity:.8}
body.game-client .support-quick-spell.spell-blocked:hover{border-color:#4a6670;background:#0b1d25}
.spell-tip{position:fixed;z-index:60;display:flex;flex-direction:column;gap:4px;padding:9px 11px;box-sizing:border-box;border:1px solid #6d8f9a;border-radius:7px;background:#061821f2;color:#e9f1f2;box-shadow:0 6px 22px #000c;pointer-events:none;font-size:12px;line-height:1.45}
.spell-tip[hidden]{display:none}
.spell-tip strong{color:#f0e2b0;font-size:14px}
.spell-tip span{color:#8fc4b6;font-size:11px}
.spell-tip p{margin:0}
.spell-tip small{color:#b5c3bb;font-size:11px}
.spell-tip em{font-style:normal;color:#ff8f7a;font-weight:700}
.spell-tip button{pointer-events:auto;align-self:stretch;margin-top:4px;padding:8px 14px;border:1px solid #c96b5c;border-radius:5px;background:#3a1f1c;color:#ffd9d2;font-size:14px;font-weight:700;cursor:pointer}