/* 방 = 게임 화면. 원작 배치: 왼쪽 상대 5칸 · 가운데 내 판 · 오른쪽 탭/기록/버튼 */
#scrGame { display: flex; flex-direction: column; gap: 10px; }
#scrGame[hidden] { display: none; }
.hg {
  position: relative; border-radius: 14px; padding: 8px 10px 12px;
  background: linear-gradient(180deg, #2f78d0, #2265bd); border: 3px solid #123f86; border-top-color: #7cc4ff;
  box-shadow: 0 6px 0 rgba(6, 24, 70, .5), inset 0 1px 0 rgba(255,255,255,.3);
}
.hg-title { display: flex; align-items: center; gap: 10px; margin: 0 auto 8px; padding: 3px 14px; width: fit-content; max-width: 100%;
  background: #0d2d6b; border-radius: 6px; border: 1px solid #5aa9ff; font: 400 16px var(--kr); overflow: hidden; white-space: nowrap; }
.hg-title b { font-weight: 400; color: var(--num); overflow: hidden; text-overflow: ellipsis; }
.hg-title #roomNo { color: var(--muted); }
.hg-body { display: grid; grid-template-columns: auto auto minmax(220px, 250px); gap: 12px; align-items: start; justify-content: center; }

/* ---------- 상대 칸 ---------- */
.foes { display: grid; grid-template-columns: repeat(3, 112px); gap: 8px; align-content: start; }
.foe {
  position: relative; display: flex; flex-direction: column; border-radius: 8px; padding: 4px 4px 0; cursor: pointer;
  background: linear-gradient(180deg, #5eb0ff, #3a88e0); border: 2px solid #164a9a; border-top-color: #a8dcff;
}
.foe canvas, .foe .blank { display: block; width: 100%; aspect-ratio: 1 / 2; border-radius: 3px; background: var(--well); box-shadow: inset 0 0 0 2px #06102c; }
.foe .no { position: absolute; top: -4px; right: -3px; min-width: 26px; height: 28px; padding: 0 5px; display: grid; place-items: center;
  font: 400 21px var(--display); color: #fff; background: linear-gradient(180deg, #7cc4ff, #2d7ad6); border: 2px solid #0f3f8a; border-radius: 6px;
  text-shadow: 0 1px 0 #0b2f6b; z-index: 2; }
.foe .boss-tag, .boss-tag { position: absolute; top: -2px; left: 2px; z-index: 2; font: 400 12px var(--display); color: #fff3b0;
  padding: 0 5px; border-radius: 4px; background: linear-gradient(180deg, #ff9d2e, #d85a00); border: 1px solid #7a3000; letter-spacing: .04em; }
.foe .foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 4px; padding: 4px 2px 5px; min-height: 42px; }
.foe .foot .medal { grid-row: span 2; }
.foe .foot .g { font: 400 12px var(--kr); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe .foot .g i { font-style: normal; color: var(--num); }
.foe .foot .nm { font: 400 14px var(--kr); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe .state { position: absolute; left: 4px; right: 4px; top: 36%; text-align: center; font: 400 20px var(--kr); color: #fff; text-shadow: 0 2px 4px #000; pointer-events: none; }
.foe .state.ok { color: var(--num); }
.foe .ko { position: absolute; left: 4px; right: 4px; top: 30%; text-align: center; font: 400 24px var(--display); color: var(--danger); text-shadow: 0 2px 0 #000; pointer-events: none; }
/* 프로필 창(상대 칸·내 카드를 누르면): 설정 창과 같은 파란 판넬 — 캐릭터 · 이름, 아래 계급 · 내공 · 전적 */
#profPop { width: min(440px, calc(100vw - 32px)); }
.prof-body { display: grid; grid-template-columns: 112px 1fr; gap: 14px 16px; align-items: center; }
.prof-avatar { width: 112px; height: 112px; border-radius: 14px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #7cc4ff, #1c56a8); border: 2px solid #0f3f8a; border-top-color: #a8dcff; }
.prof-avatar .char { width: 92px; height: 96px; image-rendering: pixelated; }
.prof-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.prof-name { font: 400 26px var(--kr); color: #fff; text-shadow: 0 2px 0 var(--panel-lo); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-tag { padding: 1px 8px; border-radius: 999px; background: #0d2d6b; color: #cfe2ff; font-size: 13px; }
.prof-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.prof-stats div { background: #0d2d6b; border-radius: 8px; padding: 8px 4px; text-align: center; }
.prof-stats dt { font: 400 13px var(--kr); color: var(--muted); }
.prof-stats dd { margin: 2px 0 0; display: flex; align-items: center; justify-content: center; gap: 4px; font: 400 18px var(--kr); color: #fff; white-space: nowrap; }
#profActs:empty { display: none; }   /* 내 프로필은 버튼이 없다 — 빈 줄을 남기지 않는다 */
.foe.empty, .foe.closed { cursor: default; }
.foe.empty .blank, .foe.closed .blank { display: grid; place-items: center; font: 400 22px var(--display); color: rgba(143,208,255,.35); }
.foe.closed { filter: grayscale(.6) brightness(.7); }
.foe.team-A .no { background: linear-gradient(180deg, #7ff09a, #22a947); }
.foe.team-B .no { background: linear-gradient(180deg, #8cb4ff, #2a5fe0); }
.foe.team-C .no { background: linear-gradient(180deg, #d0a6ff, #8a45e6); }
/* 팀이면 상대 칸도 내 명패처럼 팀 색 + 왼쪽 위에 'A팀' 표 — 번호 색만으로는 누가 같은 팀인지 몰랐다 */
.foe.teamed.team-A { background: linear-gradient(180deg, #8ff5a8, #25b24c); border-color: #0f6a2a; border-top-color: #d8ffe2; }
.foe.teamed.team-B { background: linear-gradient(180deg, #9cc0ff, #2a5fe0); border-color: #14337e; border-top-color: #dce8ff; }
.foe.teamed.team-C { background: linear-gradient(180deg, #d6b0ff, #8a45e6); border-color: #4a1f86; border-top-color: #f1e4ff; }
.foe.teamed .foot .g { color: rgba(255, 255, 255, .85); }
.foe.teamed .foot .nm { text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.foe .team-tag { position: absolute; top: -4px; left: -3px; z-index: 2; font: 400 13px var(--kr); color: #fff; padding: 1px 6px; border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.foe.teamed.team-A .team-tag { background: linear-gradient(180deg, #7ff09a, #22a947); }
.foe.teamed.team-B .team-tag { background: linear-gradient(180deg, #8cb4ff, #2a5fe0); }
.foe.teamed.team-C .team-tag { background: linear-gradient(180deg, #d0a6ff, #8a45e6); }
.foe .boss-tag + .team-tag { left: 44px; }
.foe.hit canvas { animation: hit .35s; }
@keyframes hit { 30% { transform: translateY(-4px); } }
.foe.auto canvas, #cvBoard.auto { outline: 3px dashed var(--num); outline-offset: 2px; }
.foe.boss .no { background: linear-gradient(180deg, #ff9a8f, #d83a2e); }
.boss-bars { display: grid; grid-template-columns: auto 1fr; gap: 2px 4px; align-items: center; font-size: 10px; color: var(--muted); padding: 3px 2px 0; }
.bar { height: 6px; border-radius: 3px; background: #0d2d6b; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; transition: width .2s; }
.bar.atk i { background: var(--danger); }
.bar.zone i { background: var(--num); }

/* ---------- 가운데: 내 판 ---------- */
.hg-main { display: grid; grid-template-columns: 88px auto 88px; gap: 8px; align-items: start; padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, #4fa2f2, #2f7ad2); border: 2px solid #164a9a; border-top-color: #a8dcff; }
.hg-left, .hg-right { display: flex; flex-direction: column; gap: 8px; }
.box { padding: 6px; text-align: center; border-radius: 8px; }
.kind { font: 400 14px var(--kr); text-align: center; padding: 3px; border-radius: 6px; background: #0d2d6b; color: var(--muted); }
.mode-badge { font: 400 20px var(--kr); text-align: center; padding: 6px 4px; border-radius: 6px; color: #fff;
  background: linear-gradient(180deg, #1c4f9e, #0d2d6b); border: 2px solid #7cc4ff; box-shadow: 0 0 0 2px #0d2d6b; }
.slot { background: var(--well); border-radius: 6px; padding: 5px; box-shadow: inset 0 0 0 2px #06102c; }
.slot canvas { display: block; width: 100%; }
.hold-count { font: 400 14px var(--display); color: var(--num); margin-top: 3px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 0; }
.stat span { font: 400 12px var(--display); color: var(--muted); letter-spacing: .06em; }
.stat b { font: 400 26px var(--display); color: var(--num); line-height: 1.1; text-shadow: 0 2px 0 #7a4b00; }
.time b { font: 400 22px var(--display); color: #fff; }
.next-box canvas { display: block; width: 100%; }
.effects { font: 400 13px var(--kr); color: var(--num); text-align: center; min-height: 18px; }

.hg-center { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hg-center > .boss-tag { top: -10px; left: 12px; font-size: 14px; }
.well { position: relative; display: flex; gap: 5px; }
#cvBoard {
  display: block; aspect-ratio: 1 / 2; width: auto; cursor: pointer; border-radius: 4px; background: var(--well);
  height: min(66svh, 580px, calc((100vw - 32px - 2 * 88px - 2 * 8px - 30px) * 2));
  box-shadow: 0 0 0 3px #06102c, 0 0 0 5px #7cc4ff;
}
.meter { width: 8px; border-radius: 4px; background: #06102c; position: relative; overflow: hidden; }
.meter-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #ff3b30, #ff9a3c); transition: height .12s; }
.banner {
  position: absolute; left: 13px; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center; padding: 16px; border-radius: 4px;
  background: rgba(6, 16, 44, .72); font: 400 clamp(26px, 6vw, 44px) var(--display); color: #fff; text-shadow: 0 3px 0 #0b2f6b;
}
.banner small { font: 400 16px var(--kr); color: var(--muted); text-shadow: none; }
.banner ol { font: 400 15px var(--kr); text-align: left; margin: 0; padding-left: 20px; }
.warn {
  position: absolute; left: 13px; right: 0; top: 12%; margin: 0 12px; padding: 10px 12px; border-radius: 10px; text-align: center;
  background: rgba(224, 57, 47, .92); color: #fff; font: 400 15px var(--kr); display: flex; flex-direction: column; gap: 2px;
  pointer-events: none; animation: warn .5s ease-in-out infinite alternate; border: 2px solid #ffd21f;
}
.warn b { font: 400 22px var(--display); }
.warn small { font-size: 13px; }
@keyframes warn { to { transform: scale(1.03); } }

.item-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 6px 6px; margin: 0 -3px 0 10px; border-radius: 8px;
  background: linear-gradient(180deg, #1c4f9e, #0d2d6b); border: 2px solid #7cc4ff; box-shadow: 0 0 0 2px #0d2d6b; }
.inv { display: grid; grid-template-columns: repeat(9, 24px); gap: 3px; justify-content: center; }
.inv canvas { width: 24px; height: 24px; border-radius: 4px; background: var(--well); box-shadow: inset 0 0 0 1px #06102c; }
.inv canvas:first-child { box-shadow: 0 0 0 2px var(--num); }
.inv-info { font-size: 12px; line-height: 1.4; min-height: 34px; color: #cfe2ff; word-break: keep-all; text-align: center;
  width: 0; min-width: 100%; }   /* 판 폭 안에서 두 줄까지(판 폭을 밀어내지 않는다) */
.inv-info > * { margin: 0 3px; }
.inv-info b { white-space: nowrap; }
.inv-info b { color: #fff; font-weight: 400; font-family: var(--kr); font-size: 14px; }
.inv-target { color: var(--num); }

.me-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-left: 13px; padding: 5px 10px; border-radius: 8px;
  background: linear-gradient(180deg, #3be0e0, #16a4c8); border: 2px solid #0a5a7a; border-top-color: #b8ffff; color: #06304a; }
/* 팀을 고르면 내 카드도 팀 색(팀 버튼과 같은 색) */
.me-card.team-A { background: linear-gradient(180deg, #8ff5a8, #25b24c); border-color: #0f6a2a; border-top-color: #d8ffe2; color: #08361a; }
.me-card.team-B { background: linear-gradient(180deg, #9cc0ff, #2a5fe0); border-color: #14337e; border-top-color: #dce8ff; color: #0a1f52; }
.me-card.team-C { background: linear-gradient(180deg, #d6b0ff, #8a45e6); border-color: #4a1f86; border-top-color: #f1e4ff; color: #2c0f57; }
.me-card[class*="team-"] .nm, .me-card[class*="team-"] .my-no { text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.me-card .grade { font: 400 14px var(--kr); }
.me-card .grade i { font-style: normal; color: #7a2a00; }
.me-card .nm { font: 400 19px var(--kr); color: #fff; text-shadow: 0 1px 0 #06506a; }
.my-no { font: 400 46px/1 var(--display); color: #fff; text-shadow: 0 3px 0 #06506a; }

/* ---------- 오른쪽 ---------- */
.hg-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tabs { display: flex; gap: 2px; }
.tab { flex: 1; padding: 5px 0; font: 400 15px var(--kr); color: var(--muted); cursor: pointer; border-radius: 8px 8px 0 0;
  background: #1c56a8; border: 2px solid #0f3f8a; border-bottom: 0; }
.tab.on { background: #fff; color: #1a4f9e; }
.tab-body { background: #fff; color: #173a7a; border: 2px solid #0f3f8a; border-top: 0; border-radius: 0 0 8px 8px; padding: 10px; max-height: 250px; overflow-y: auto; margin-top: -8px; }
/* 팁·도움말은 같은 칸에 겹쳐 둔다 — 안 보이는 탭도 자리는 차지해서, 탭을 바꿔도 창 크기가 같다 */
.tab-body { display: grid; }
.tab-pane { grid-area: 1 / 1; min-width: 0; }
.tab-pane[hidden] { display: block !important; visibility: hidden; }   /* 전체 [hidden]{display:none !important}보다 앞서게 */
/* 팁: 머리줄(TIP · 6/12 · 넘기기) + 글 한 문단 */
.tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tip-badge { padding: 2px 8px; border-radius: 999px; background: linear-gradient(180deg, #5aa2ff, #2e6be0); color: #fff; font: 400 12px var(--display); letter-spacing: .06em; }
.tip-no { font: 400 13px var(--display); color: #8aa3c9; }
.tip-arrows { margin-left: auto; display: flex; gap: 4px; }
.tip-arrows button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: #e8f2ff; color: #2e6be0; font: 700 16px/1 var(--kr); cursor: pointer; }
.tip-arrows button:hover { background: #d3e5ff; }
.tip { margin: 0; min-height: 3.2em; font: 400 15px var(--kr); line-height: 1.6; color: #2a4677; word-break: keep-all; }   /* 두 줄 자리: 팁이 바뀌어도 칸 높이가 그대로 */
.tip b { color: #1f5fd6; font-weight: 400; background: linear-gradient(transparent 62%, #fff1a8 62%); }
/* 도움말: 화면에 보이는 표시가 무슨 뜻인지 */
.help { margin: 0; font: 400 14px var(--kr); line-height: 1.6; color: #2a4677; word-break: keep-all; }
.help dt { display: flex; align-items: center; gap: 8px; color: #1f5fd6; font-size: 15px; }
.help dd { margin: 2px 0 0; }
.help b { color: #1f5fd6; font-weight: 400; }
.help-auto { width: 18px; height: 18px; border-radius: 3px; background: #0b1f4a; outline: 3px dashed var(--num); outline-offset: 1px; flex: none; }
.map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 62vh; overflow-y: auto; padding: 2px; }
.map-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border-radius: 6px; border: 2px solid transparent; background: #e8f2ff;
  cursor: pointer; font: 400 12px var(--kr); color: #173a7a; }
.map-item canvas { width: 100%; aspect-ratio: 1 / 2; background: var(--well); border-radius: 3px; }
.map-item.on { border-color: #ff9d2e; background: #fff3d6; }
.map-item:disabled { cursor: default; }
.game-chat { gap: 6px; display: flex; flex-direction: column; min-height: 0; }
.game-log { max-height: 26svh; min-height: 120px; font-size: 12px; }
.game-chat input { padding: 6px 10px; font-size: 13px; }
.team-pick { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 5px; }
.team-pick .btn { padding: 5px 0; font: 400 24px var(--display); }
.team-pick .btn.team-S { font: 400 20px var(--kr); background: linear-gradient(180deg, #3be0e0, #16a4c8); }   /* 개인 = 기본 명패(청록) 색 — 파란 B팀과 헷갈리지 않게 */
.team-pick .btn.team-A { background: linear-gradient(180deg, #8ff5a8, #25b24c); }
.team-pick .btn.team-B { background: linear-gradient(180deg, #9cc0ff, #2a5fe0); }
.team-pick .btn.team-C { background: linear-gradient(180deg, #d6b0ff, #8a45e6); }
.team-pick .btn.on { box-shadow: 0 0 0 3px var(--num), inset 0 1px 0 rgba(255,255,255,.6); }
#btnReady { width: 100%; }
.room-hint { margin: 0; font: 400 14px var(--kr); color: var(--muted); text-align: center; min-height: 18px; }
.side-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.side-buttons > * { flex: 1 1 calc(50% - 5px); }   /* 게임 중 숨는 버튼이 있어도 남은 버튼이 줄을 꽉 채운다 */
.side-buttons #btnLeave { flex-basis: calc(50% - 5px); background: linear-gradient(180deg, #ff8f86, #d8362b); border-color: #7a1510; }

/* ---------- 결과창(WIN / RESULT) ---------- */
.result { position: absolute; inset: 12% 4% auto; z-index: 20; padding: 12px 14px 16px; border-radius: 12px;
  background: rgba(10, 30, 80, .96); border: 3px solid #7cc4ff; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.result h3 { margin: -46px 0 8px; text-align: center; font: 400 64px var(--display); color: #ffd21f; -webkit-text-stroke: 2px #8a3a00; text-shadow: 0 4px 0 #c45a00; }
.result h3.lose { color: #cfe4ff; -webkit-text-stroke-color: #173a7a; text-shadow: 0 4px 0 #0b2f6b; }
.result .note { text-align: center; margin: 0 0 8px; font: 400 15px var(--kr); color: var(--muted); }
.result table { width: 100%; border-collapse: separate; border-spacing: 0 3px; font: 400 15px var(--kr); }
.result th { font: 400 12px var(--kr); color: var(--muted); padding: 4px; background: #1c56a8; }
.result td { padding: 5px 4px; text-align: center; background: #12306e; }
.result td.pl { font: 400 24px var(--display); color: #fff; }
.result tr.me td { background: #1e6ad0; }
.result .up { color: var(--num); } .result .down { color: #7fd0ff; }
.result .nm { text-align: left; }
.result .rt { display: inline-block; min-width: 20px; margin-right: 6px; padding: 0 5px; border-radius: 5px; text-align: center;   /* 결과창 팀 표 */
  font: 400 13px var(--display); color: #fff; border: 1px solid rgba(0, 0, 0, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.result .rt.team-A { background: linear-gradient(180deg, #7ff09a, #22a947); }
.result .rt.team-B { background: linear-gradient(180deg, #8cb4ff, #2a5fe0); }
.result .rt.team-C { background: linear-gradient(180deg, #d0a6ff, #8a45e6); }

/* ---------- 휴대폰 조작 ---------- */
.pad { display: none; gap: 14px; align-items: end; width: 100%; max-width: 520px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button { height: 52px; border-radius: 10px; color: #fff; font: 400 16px var(--kr); display: flex; align-items: center; justify-content: center; gap: 6px; touch-action: none;
  -webkit-tap-highlight-color: transparent; background: linear-gradient(180deg, #6ec0ff, #2e7fe0); border: 2px solid #0f3f8a; box-shadow: 0 3px 0 #0f3f8a; }
.pad button.on { filter: brightness(.8); transform: translateY(2px); box-shadow: 0 1px 0 #0f3f8a; }
.pad svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pad-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pad-items { display: flex; gap: 8px; }
.pad-items button { padding: 0 8px; min-width: 0; font-size: 15px; white-space: nowrap; }
.pad-items .item-only[data-act="auto"] { flex: 1; padding: 0 4px; font-size: 14px; }
.pad .space { width: 100%; font: 400 18px var(--display); letter-spacing: .06em; color: var(--num); }
.pad .hold { padding: 0 10px; font: 400 16px var(--display); letter-spacing: .04em; }
.pad-arrows { flex: none; display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: 52px 52px; gap: 6px; }
.pad-arrows .up { grid-column: 2; grid-row: 1; } .pad-arrows .lt { grid-column: 1; grid-row: 2; }
.pad-arrows .dn { grid-column: 2; grid-row: 2; } .pad-arrows .rt { grid-column: 3; grid-row: 2; }
.speed-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.speed-grid .btn { padding: 6px 0; font: 400 18px var(--display); }
.speed-grid .btn.on { background: linear-gradient(180deg, #ffe066, #ffb020); color: #4a2600; }

@media (max-width: 1120px) {
  .hg-body { grid-template-columns: auto auto; }
  .hg-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .hg-side .tabs, .hg-side .tab-body { grid-column: 1; }
  .hg-side .game-chat { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 860px) {
  .hg-body { grid-template-columns: 1fr; justify-items: center; }
  .foes { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 5px; }
  .foe .foot { min-height: 0; grid-template-columns: 1fr; } .foe .foot .medal, .foe .foot .g { display: none; }
  .foe .no { font-size: 15px; height: 20px; min-width: 18px; }
  .foe.logo { display: none; }
  .hg-side { grid-template-columns: 1fr; width: 100%; }
  .hg-side .game-chat { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
  .hg-main { grid-template-columns: 58px auto 58px; gap: 5px; padding: 5px; }
  #cvBoard { height: min(58svh, calc((100vw - 32px - 2 * 58px - 2 * 5px - 40px) * 2)); }
  .stat b { font-size: 18px; } .mode-badge { font-size: 14px; } .my-no { font-size: 32px; }
}
@media (pointer: coarse) {
  .pad { display: flex; }
  body[data-demo] .pad { display: none; } /* 데모(jihyun.dev 첫 화면)는 보기만 한다 — 휴대폰에서도 터치 버튼 없이 */
  #cvBoard { height: min(46svh, calc((100vw - 32px - 2 * 58px - 2 * 5px - 40px) * 2)); }
}

/* ---------- 고정 게임 창(넓은 화면): 1240×760으로 그리고 모니터에 맞춰 통째로 확대·축소 ---------- */
.hg-title { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; width: 100%; max-width: none;
  margin: 0 0 8px; padding: 0; background: none; border: 0; }
.hg-logo { font: 400 24px var(--display); color: #fff; letter-spacing: .04em; text-shadow: 0 2px 0 var(--panel-lo), 0 0 10px rgba(143,208,255,.6); }
.hg-logo span { color: var(--num); }
.hg-room { display: flex; align-items: center; gap: 10px; padding: 5px 18px; border-radius: 6px; background: #0d2d6b; border: 1px solid #5aa9ff;
  font: 400 21px var(--kr); white-space: nowrap; overflow: hidden; max-width: 620px; }
.hg-room b { font-weight: 400; color: var(--num); overflow: hidden; text-overflow: ellipsis; }
.hg-room #roomNo { color: var(--muted); }
.hg-who { justify-self: end; }
.hg-who .who { font-size: 15px; gap: 8px; }
.hg-who .btn.sm { padding: 2px 10px; font-size: 13px; }

@media (min-width: 861px) {
  body.in-stage { padding: 24px 16px; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  body.in-stage .top { display: none; }
  body.in-stage .app { max-width: none; align-items: center; }
  .hg.stage { width: var(--stage-w, 1240px); height: var(--stage-h, 760px); zoom: var(--stage-zoom, 1); display: flex; flex-direction: column; padding: 8px 10px 10px; }
  #scrGame .hg-body { flex: 1; min-height: 0; grid-template-columns: auto auto minmax(270px, 1fr);   /* 오른쪽(팁·대화) 칸은 270px 아래로 줄지 않게 */ grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  /* 왼쪽 상대 칸: 세로를 꽉 채우도록 위아래로 고르게 */
  .foes { grid-template-columns: repeat(3, auto); grid-template-rows: repeat(2, auto); align-content: space-between; gap: 10px;
    padding: 8px; border-radius: 12px; background: rgba(13, 45, 107, .35); border: 2px solid rgba(16, 58, 130, .6); }
  .foe canvas, .foe .blank { width: var(--foe-w, 124px); height: var(--foe-h, 248px); aspect-ratio: auto; }   /* 두 줄이 세로를 꽉 채우게(가운데 빈틈 없이) */
  /* 가운데: 판 높이 고정(아이템전은 아이템 줄 자리만큼 작게) */
  .hg-main { align-content: start; }
  #cvBoard { height: calc(600px + var(--stage-extra, 0px)); }
  .hg.item-on #cvBoard { height: calc(580px + var(--stage-extra, 0px)); }
  /* 오른쪽: 탭 · 기록/대화(남는 높이를 다 씀) · 팀 · 버튼 */
  .hg-side { height: 100%; min-height: 0; } /* 기록이 길어져도 화면이 늘지 않고 기록창만 스크롤 */
  .tab-body { max-height: 190px; }   /* 팁 글 높이만큼만(남는 세로는 대화 칸이 가져감) */
  .game-chat { flex: 1; min-height: 0; }
  .game-log { flex: 1; max-height: none; min-height: 0; }
}

/* 여섯째 칸: 자리가 아닌 로고 판 — 뒤에서 AI가 작은 판을 쌓고(흐리게), 위에 로고와 빛 */
.foe-logo { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 2px solid #164a9a; border-top-color: #4f8fe6; background: linear-gradient(180deg, #0c2352, #07153a); }
.foe-logo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 45% at 50% 48%, rgba(8, 24, 60, .85), transparent 75%); z-index: 1; }
.foe-logo .fl-logo { position: relative; z-index: 2; font: 400 34px var(--display); color: #fff; letter-spacing: .04em;
  text-shadow: 0 3px 0 #0b2f6b, 0 0 18px rgba(120, 190, 255, .8); overflow: hidden; }
.foe-logo .fl-logo span { color: var(--num); }
.foe-logo .fl-logo::after { content: ""; position: absolute; inset: -20% -40%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  mix-blend-mode: overlay; animation: fl-shine 4.5s ease-in-out infinite; }
@keyframes fl-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .foe-logo .fl-logo::after { animation: none; } }
@media (max-width: 860px) { .foe-logo { display: none; } }

/* 결과창 손님 가입 권유 */
.guest-nudge { margin: 6px 0 0; padding: 6px 10px; border-radius: 6px; background: #fff6cf; color: #4a3500; font-size: 13px; text-align: center; }

/* 아이템 날아가기: 쓴 사람 → 받는 사람 번호 칸(화면 맨 위에 떠서 날아간다) */
.item-fly { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; border-radius: 4px;
  filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 14px var(--glow)); will-change: transform; }
.item-land { position: fixed; z-index: 2; pointer-events: none; border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--glow), 0 0 24px 4px var(--glow); animation: item-land .5s ease-out forwards; }
@keyframes item-land { from { opacity: 1; transform: scale(.96); } to { opacity: 0; transform: scale(1.04); } }

/* 아래 줄: 왼쪽 칸(HOLD·LINE)부터 오른쪽 칸(NEXT)까지 넓게 — 아이템 칸 위, 명패 아래 */
.hg-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 0 2px; align-items: stretch; }
.hg-bottom .me-card { margin: 0; order: -1; }
.hg-bottom .item-bar { margin: 0; justify-content: center; }
.hg-bottom .inv-info { min-height: 34px; }
/* 휴대폰 아이템전: 명패와 아이템 칸을 위아래로(한 줄이면 판 칸이 화면보다 넓어져 오른쪽이 잘렸다) */
@media (max-width: 560px) { .hg-bottom { grid-template-columns: minmax(0, 1fr); } }

/* 머리말 계급(메달+이름)이 이름·내공 글자와 같은 줄 높이에 오게 */
.hg-who .who { align-items: center; line-height: 1; }
.hg-who .rank { line-height: 1; }
.hg-who .rank .medal { margin: 0 3px 0 0; }

/* 번호 배지는 판 테두리 효과(공격 대상·맞음)보다 위에 */
.foe .no { z-index: 3; }
/* 오른쪽 칸이 좁아져도 탭 글자가 한 줄로 */
.tab { white-space: nowrap; min-width: 0; font-size: clamp(12px, 1.1vw, 15px); }

/* 상대 판 두 줄 사이 마스코트 배너: 높이에 맞추고 남는 폭은 그림의 가장자리 색으로 잇는다 */
.ad-slot { grid-column: 1 / -1; justify-self: center; width: 100%; height: var(--ad-h, 60px); border-radius: 6px;
  position: relative; overflow: hidden; background: #0d2d6b; }
.ad-slot i { position: absolute; inset: 0; background: center / auto 100% no-repeat; image-rendering: pixelated; opacity: 0; transition: opacity .6s; }
.ad-slot i.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ad-slot i { transition: none; } }
@media (max-width: 860px) { .ad-slot { display: none; } }

.hg-title .hg-room { justify-self: start; }
.room-hint:empty { display: none; }
/* 머리말: 계급 글자도 이름과 같은 크기·같은 줄 */
.hg-who .rank { font-size: inherit; }
.hg-who .who > * { line-height: 1.2; }

dialog.wide { width: min(820px, calc(100vw - 32px)); }
/* 설정 창이 머리말 밖으로 펼쳐지게 */
.hg-title, .hg-who { overflow: visible; }
.hg-title { position: relative; z-index: 20; }
/* 노템전(아이템 칸 없음): 명패가 아래 줄 폭을 다 쓴다 */
.hg:not(.item-on) .hg-bottom { grid-column: 2; grid-template-columns: 1fr; padding: 0; }   /* 노템전: 명패는 내 판 칸 폭 그대로 */
.hg:not(.item-on) .hg-bottom .me-card { margin: 4px -5px 0 8px; padding: 3px 12px; }   /* 판 바깥 테두리(5px)까지 같은 선에 맞춘다 */
.hg:not(.item-on) .hg-bottom .me-card .my-no { font-size: 36px; }
.hg:not(.item-on) .hg-bottom .me-card .medal.big { width: 30px; height: 36px; }
/* 로고 K가 아래 첫 칸(상대 판 카드) 왼쪽 선과 맞게 */
#hg .hg-logo { padding-left: 10px; }

/* 빈 자리 판: 실제 판처럼 10×20 칸 격자를 옅게(평평한 남색 판 대신 비어 있는 우물로 보이게) */
.foe.empty .blank, .foe.closed .blank {
  background-image: linear-gradient(rgba(143, 208, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 208, 255, .06) 1px, transparent 1px);
  background-size: 10% 5%, 10% 5%;
}