/* 4.20.0 · 양쪽 아이디 옆 보유금액과 쌍방 정산 연출 */

:root {
  --simple-bg: #0d1512;
  --simple-surface: #171c19;
  --simple-surface-2: #201b17;
  --simple-felt: #083b2d;
  --simple-line: rgba(242, 222, 169, .18);
  --simple-line-strong: rgba(242, 222, 169, .34);
  --simple-text: #fffaf0;
  --simple-muted: #c8c1af;
  --simple-accent: #e0bd6a;
  --simple-green: #176044;
  --simple-red: #78332d;
}

/* 게임 화면은 앱처럼 동작한다: 선택·길게 누르기·브라우저 제스처를 노출하지 않는다. */
html,
body { overscroll-behavior: none; }

/* 예전 안내 배지와 안전영역 보정용 가상 요소가 다시 나타나지 않도록
   시각 속성까지 완전히 초기화한다. */
.main-menu-screen::before,
.main-menu-screen::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
}

.phone {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

.phone,
.phone * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.phone img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ── 메인: 3분할 프레임 위에 핵심 정보만 단순하게 배치한다. ─ */
.lobby-artboard:not(.debug-layout) {
  /* 장식 프레임은 확대하지 않고 화면 밖으로만 밀어 투명 절단면을 숨긴다. */
  --lobby-top-frame-overscan: clamp(14px, 3.6cqw, 22px);
  --lobby-bottom-frame-overscan: clamp(16px, 4.2cqw, 26px);
  --lobby-frame-seam-guard: clamp(10px, 3.2cqw, 18px);
  z-index: 1;
  background-color: #064733;
  background-image: url("assets/lobby/responsive/surface_felt_tile.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

/* 모포와 좌우 레일은 기기 화면 전체 높이를 채운다. */
.lobby-artboard:not(.debug-layout) .lobby-modular-frame { z-index: 0; }

/* PNG 외곽의 반투명 픽셀 뒤로 모포가 비치지 않도록 같은 목재 질감을 받친다.
   보호층은 화면 가장자리 안쪽에만 머물러 실제 놀이판 영역에는 영향을 주지 않는다. */
.lobby-artboard:not(.debug-layout) .lobby-modular-frame::before,
.lobby-artboard:not(.debug-layout) .lobby-modular-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  left: 0;
  height: var(--lobby-frame-seam-guard);
  background-color: #4a1208;
  background-image: url("assets/lobby/responsive/surface_wood_tile.png");
  background-position: center;
  background-size: 100% auto;
  background-repeat: repeat-y;
  pointer-events: none;
}

.lobby-artboard:not(.debug-layout) .lobby-modular-frame::before { top: 0; }
.lobby-artboard:not(.debug-layout) .lobby-modular-frame::after { bottom: 0; }
.lobby-artboard:not(.debug-layout) .lobby-split-cap { display: none; }
.lobby-artboard:not(.debug-layout) .lobby-split-middle {
  top: 0;
  bottom: 0;
}
.lobby-artboard:not(.debug-layout) .lobby-split-felt { inset: 0 var(--lobby-split-felt-inset); }
.lobby-artboard:not(.debug-layout) .lobby-split-rail {
  top: 0;
  bottom: 0;
}

.lobby-artboard:not(.debug-layout) .lobby-foreground-frame {
  position: absolute;
  z-index: 2;
  left: 50%;
  display: block;
  width: 100cqw;
  max-width: none;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  transform: translateX(-50%);
}

.lobby-artboard:not(.debug-layout) .lobby-foreground-frame-top {
  top: calc(-1 * var(--lobby-top-frame-overscan));
  width: 100cqw;
}
.lobby-artboard:not(.debug-layout) .lobby-foreground-frame-bottom {
  bottom: calc(-1 * var(--lobby-bottom-frame-overscan));
  width: 100cqw;
}
.lobby-artboard.debug-layout .lobby-foreground-frame { display: none; }

.lobby-artboard:not(.debug-layout)::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 30%, rgba(0, 0, 0, .12));
}

.lobby-artboard:not(.debug-layout)::after {
  z-index: 1;
  border-color: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .28);
}

.lobby-artboard:not(.debug-layout) .lobby-floral-ornament,
.lobby-artboard:not(.debug-layout) .lobby-title-plaque,
.lobby-artboard:not(.debug-layout) .lobby-brand-line,
.lobby-artboard:not(.debug-layout) .lobby-main-stamp,
.lobby-artboard:not(.debug-layout) .main-profile-frame,
.lobby-artboard:not(.debug-layout) .fairness-copy,
.lobby-artboard:not(.debug-layout) .lobby-menu-copy,
.lobby-artboard:not(.debug-layout) .lobby-menu-decoration,
.lobby-artboard:not(.debug-layout) .main-legal {
  display: none !important;
}

.lobby-artboard:not(.debug-layout) .lobby-main-title {
  z-index: 3;
  left: 16cqw;
  top: 12.438cqw;
  width: 68cqw;
  height: 17.77cqw;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .32));
}

.lobby-artboard:not(.debug-layout) .lobby-main-subtitle {
  z-index: 3;
  left: 24%;
  top: 17.4%;
  width: 52%;
  height: 3.5%;
  object-fit: contain;
  opacity: .88;
  filter: none;
}

.lobby-artboard:not(.debug-layout) .lobby-hero-card {
  display: block !important;
  position: absolute;
  width: 12.9%;
  height: 9.72%;
  margin-top: 10px;
  object-fit: contain;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .42));
}

.lobby-artboard:not(.debug-layout) .hero-crane {
  z-index: 3;
  left: 37%;
  top: 26.7%;
  transform: rotate(-13deg);
}

.lobby-artboard:not(.debug-layout) .hero-plum {
  z-index: 5;
  left: 43.55%;
  top: 25.8%;
  height: 10.2%;
  transform: none;
}

.lobby-artboard:not(.debug-layout) .hero-moon {
  z-index: 3;
  left: 50.1%;
  top: 26.7%;
  transform: rotate(13deg);
}

.lobby-artboard:not(.debug-layout) .lobby-stats-frame {
  z-index: 3;
  left: 8%;
  top: 41%;
  width: 84%;
  height: 10.5%;
  border: 1px solid var(--simple-line);
  border-radius: clamp(13px, 3.8cqw, 20px);
  background: rgba(15, 20, 17, .88);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.lobby-artboard:not(.debug-layout) .lobby-stats-frame::after { content: none; }

.lobby-artboard:not(.debug-layout) .main-stat-coins,
.lobby-artboard:not(.debug-layout) .main-stat-record {
  top: 42.25%;
  height: 4.25%;
  color: var(--simple-text);
  font-family: Pretendard, "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(23px, 7cqw, 34px);
  font-weight: 850;
  letter-spacing: -.045em;
  text-shadow: none;
}

.lobby-artboard:not(.debug-layout) .main-stat-coins { left: 12%; width: 40%; }
.lobby-artboard:not(.debug-layout) .main-stat-record {
  left: auto;
  right: 12%;
  width: 30%;
  justify-content: flex-end;
  color: #eee8dc;
  font-size: clamp(20px, 5.7cqw, 28px);
}

.simple-fairness {
  position: absolute;
  z-index: 4;
  left: 12%;
  top: 47.25%;
  width: 76%;
  margin: 0;
  color: var(--simple-muted);
  font-size: clamp(10px, 2.8cqw, 13px);
  font-weight: 650;
  text-align: left;
}

.main-account-button {
  position: absolute;
  z-index: 22;
  right: 12%;
  top: 46.55%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 31%;
  min-height: clamp(27px, 7cqw, 32px);
  padding: 4px 10px;
  overflow: hidden;
  border: 1px solid rgba(236, 214, 158, .32);
  border-radius: 999px;
  color: #f8edcc;
  background: rgba(8, 24, 18, .68);
  font-size: clamp(9px, 2.7cqw, 12px);
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.main-account-button:hover,
.main-account-button:focus-visible {
  border-color: #e2c778;
  background: rgba(29, 63, 47, .88);
  outline: 2px solid rgba(255, 226, 154, .25);
  outline-offset: 1px;
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button {
  left: 8%;
  width: 84%;
  height: 8.5%;
  min-height: 48px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .24));
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button::before {
  content: none;
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button::after {
  content: none;
}

.lobby-artboard:not(.debug-layout) .lobby-menu-solo { top: 55.6%; background: transparent; }
.lobby-artboard:not(.debug-layout) .lobby-menu-online { top: 67.2%; background: transparent; }
.lobby-artboard:not(.debug-layout) .lobby-menu-rules { top: 78.8%; background: transparent; }

.lobby-artboard:not(.debug-layout) .lobby-menu-board {
  display: block !important;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  filter: none;
  pointer-events: none;
}

.lobby-button-text,
.lobby-button-icon,
.lobby-button-arrow {
  position: absolute;
  z-index: 8;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.lobby-button-text {
  left: 50%;
  top: 50%;
  width: 44.8%;
  height: 57.6%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .48));
}

.lobby-button-text-online { width: 48%; }
.lobby-button-text-rules {
  width: 46.4%;
  height: 38.4%;
}

.lobby-button-icon {
  left: 8.5%;
  top: 50%;
  width: 13%;
  height: 55%;
  transform: translateY(-50%);
}

.lobby-button-arrow {
  right: 7%;
  top: 50%;
  width: 8.5%;
  height: 52%;
  transform: translateY(-50%);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button:hover,
.lobby-artboard:not(.debug-layout) .lobby-menu-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .26);
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button:active {
  transform: translateY(1px);
  filter: brightness(.96);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

.simple-legal {
  position: absolute;
  z-index: 21;
  left: 8%;
  bottom: 10.7%;
  width: 84%;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: clamp(9px, 2.4cqw, 12px);
  font-weight: 560;
  line-height: 1.2;
  text-align: center;
  transform: translateY(20px);
}

/* ── 플레이: 프레임 대신 선과 면, 카드를 가장 강한 요소로 둔다. ─ */
.game-artboard:not(.debug-layout) {
  background: var(--simple-bg);
}

.game-artboard:not(.debug-layout) > .app-bar,
.game-artboard:not(.debug-layout) > .opponent,
.game-artboard:not(.debug-layout) > .table-zone,
.game-artboard:not(.debug-layout) > .player,
.game-artboard:not(.debug-layout) > .hand {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.game-artboard:not(.debug-layout) > .app-bar,
.game-artboard:not(.debug-layout) > .opponent,
.game-artboard:not(.debug-layout) > .player,
.game-artboard:not(.debug-layout) > .hand {
  background: var(--simple-surface-2);
}

.game-artboard:not(.debug-layout) > .app-bar,
.game-artboard:not(.debug-layout) > .opponent,
.game-artboard:not(.debug-layout) > .table-zone,
.game-artboard:not(.debug-layout) > .player {
  border-bottom: 1px solid var(--simple-line);
}

.game-artboard:not(.debug-layout) > .table-zone {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(35, 111, 79, .18), transparent 64%),
    var(--simple-felt);
}

.game-artboard:not(.debug-layout) .game-title-floral-art,
.game-artboard:not(.debug-layout) .game-brand-art,
.game-artboard:not(.debug-layout) .game-security-art,
.game-artboard:not(.debug-layout) .game-opponent-settings,
.game-artboard:not(.debug-layout) .game-field-label,
.game-artboard:not(.debug-layout) .game-player-label,
.game-artboard:not(.debug-layout) .game-captured-label,
.game-artboard:not(.debug-layout) .avatar img {
  display: none;
}

.game-artboard:not(.debug-layout) .game-title-art {
  left: 4%;
  top: 8%;
  width: 21.5%;
  height: 34%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3));
}

.game-artboard:not(.debug-layout) .game-home-button {
  left: 4%;
  top: 55%;
  width: min(18cqw, 82px);
  height: 31%;
  padding: 0 9px;
  border: 1px solid var(--simple-line-strong);
  border-radius: 999px;
  color: var(--simple-text);
  background: rgba(255, 255, 255, .055);
  box-shadow: none;
  font-size: clamp(10px, 2.8cqw, 13px);
  font-weight: 800;
}

.game-artboard:not(.debug-layout) .wallet {
  right: 4%;
  top: 18%;
  width: 27%;
  height: 34%;
  border: 1px solid var(--simple-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
}

.game-artboard:not(.debug-layout) .wallet strong {
  color: var(--simple-text);
  font-size: clamp(14px, 4.2cqw, 20px);
  text-shadow: none;
}

.simple-security {
  position: absolute;
  z-index: 4;
  right: 5%;
  top: 61%;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1cqw, 6px);
  color: var(--simple-muted);
  font-size: clamp(9px, 2.5cqw, 12px);
  font-weight: 650;
}

.simple-security i {
  width: clamp(6px, 1.6cqw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #4dc68c;
}

.game-artboard:not(.debug-layout) .avatar {
  left: 4.5%;
  top: 9%;
  width: 11%;
  height: auto;
  aspect-ratio: 1;
  border-radius: clamp(7px, 2cqw, 10px);
  color: #261a0f;
  background: #111713;
  font-size: clamp(20px, 5.7cqw, 28px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 232, 174, .7);
  cursor: pointer;
}

.game-artboard:not(.debug-layout) .avatar span { padding: 0; }

.game-artboard:not(.debug-layout) .opponent-name-button {
  left: 18%;
  top: 7%;
  width: 34%;
  height: 28%;
  color: var(--simple-text);
  font-size: clamp(15px, 4.3cqw, 20px);
}

.game-artboard:not(.debug-layout) .opponent-name-button::after {
  content: "설정";
  margin-left: 8px;
  padding: 4px 7px;
  border: 1px solid var(--simple-line);
  border-radius: 999px;
  color: var(--simple-muted);
  font-size: clamp(8px, 2.2cqw, 10px);
  font-weight: 650;
}

.game-artboard:not(.debug-layout) #opponentScore,
.game-artboard:not(.debug-layout) #playerScore {
  color: var(--simple-text);
  text-shadow: none;
}

.game-artboard:not(.debug-layout) #opponentScore { right: 4.5%; top: 8%; }
.game-artboard:not(.debug-layout) .opponent-copy > p {
  left: 18%;
  top: 32%;
  color: var(--simple-muted);
  text-shadow: none;
}

.game-artboard:not(.debug-layout) .capture-pile {
  border: 1px solid var(--simple-line);
  border-radius: clamp(5px, 1.3cqw, 8px);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}

.game-artboard:not(.debug-layout) .capture-pile.kind-bright,
.game-artboard:not(.debug-layout) .capture-pile.kind-animal { background: rgba(18, 84, 59, .42); }

.game-artboard:not(.debug-layout) .capture-pile::after {
  border-top-color: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  background: rgba(0, 0, 0, .28);
}

/* 획득패는 좌우 빈 공간까지 사용해 각 패의 얼굴이 더 많이 드러나게 한다. */
.game-artboard:not(.debug-layout) .opponent-strip {
  left: 4%;
  width: 92%;
}

.game-artboard:not(.debug-layout) .player-strip {
  left: 4%;
  width: 92%;
}

/* 상대 손패 뒷면은 정보 줄 우측으로 옮겨 획득패와 영역을 공유하지 않는다. */
.game-artboard:not(.debug-layout) .opponent-hand {
  right: 4%;
  top: 29%;
  width: 31%;
  height: 19%;
}

.game-artboard:not(.debug-layout) .mini-back {
  width: clamp(18px, 5.2cqw, 25px);
  height: clamp(27px, 7.8cqw, 38px);
}

.game-artboard:not(.debug-layout) .capture-mini-card {
  transform-origin: 50% 92%;
}

.simple-player-label,
.simple-captured-label {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  color: var(--simple-text);
  font-weight: 800;
  line-height: 1;
}

/* 턴 문구·남은 더미 숫자·바닥 라벨은 패 공간을 위해 시각적으로 제거한다. */
.game-artboard:not(.debug-layout) .turn-status,
.game-artboard:not(.debug-layout) .zone-title,
.game-artboard:not(.debug-layout) .game-field-label {
  display: none !important;
}

/* 녹색 영역의 상하 끝까지 사용하며 중앙 더미를 비운다. */
.game-artboard:not(.debug-layout) .field {
  left: 1.5%;
  top: 1.5%;
  width: 97%;
  height: 97%;
  display: block;
  overflow: visible;
}

.game-artboard:not(.debug-layout) .field .game-card {
  position: absolute;
  height: auto;
  margin: 0;
  transform-origin: center;
  transition: filter 100ms ease-out;
}

/* 두 장 중 하나를 고를 때 선택 패가 중앙 더미보다 항상 위에서 눌리도록 한다. */
.game-artboard:not(.debug-layout) .field.is-choosing {
  z-index: 16 !important;
  transition: none !important;
}

/* 더미는 바닥패와 같은 2:3 크기이고, 뒷면 세 장과 얕은 그림자로 두께를 표현한다. */
.game-artboard:not(.debug-layout) .table-zone .deck {
  z-index: 12;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 16.192%;
  height: auto;
  aspect-ratio: 2 / 3;
  transform: translate(-50%, -50%);
  overflow: visible;
  isolation: isolate;
  box-sizing: border-box;
  border: 0;
}

.game-artboard:not(.debug-layout) .field.medium ~ .deck,
.game-artboard:not(.debug-layout) .field.dense ~ .deck,
.game-artboard:not(.debug-layout) .field.crowded ~ .deck { width: 16.192%; }

.game-artboard:not(.debug-layout) .deck::before,
.game-artboard:not(.debug-layout) .deck::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: clamp(4px, 1cqw, 6px);
  background: url("assets/hwatu/card_back_crimson_v2.png") center / contain no-repeat;
  pointer-events: none;
}

.game-artboard:not(.debug-layout) .deck::before {
  transform: translate(-5px, -5px) rotate(-1.2deg);
  box-shadow: 3px 7px 8px rgba(0, 0, 0, .28);
}

.game-artboard:not(.debug-layout) .deck::after {
  z-index: -1;
  transform: translate(-2.5px, -2.5px) rotate(-.5deg);
  box-shadow: 2px 4px 4px rgba(0, 0, 0, .2);
}

.game-artboard:not(.debug-layout) .deck .game-deck-frame {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .24));
}

/* 뒤집는 한 장이 더미 맨 위 패를 대신하므로 동일한 뒷면을 중복 출력하지 않는다. */
.game-artboard:not(.debug-layout) .deck.is-drawing .game-deck-frame { visibility: hidden; }

.game-artboard:not(.debug-layout) .game-card {
  border-radius: clamp(4px, 1cqw, 6px);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
}

.game-artboard:not(.debug-layout) .game-card.match-choice {
  z-index: 100 !important;
  outline-color: #ffe49a;
  filter: brightness(1.06) drop-shadow(0 4px 5px rgba(0, 0, 0, .36));
}

.game-artboard:not(.debug-layout) .deck .game-deck-frame { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }

.simple-player-label {
  left: 4%;
  top: 6%;
  width: clamp(36px, 10cqw, 48px);
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 174, .7);
  border-radius: clamp(7px, 2cqw, 10px);
  background: #111713;
  font-size: clamp(14px, 4cqw, 19px);
  cursor: pointer;
}

.game-artboard:not(.debug-layout) .opponent-identity {
  position: absolute;
  left: 18%;
  top: 4%;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.4cqw, 8px);
  width: 58%;
  height: 21%;
  min-width: 0;
}

.game-artboard:not(.debug-layout) .opponent .opponent-identity .opponent-name-button {
  position: relative;
  inset: auto;
  flex: 0 1 auto;
  width: auto;
  max-width: 46%;
  height: 100%;
  min-width: 0;
}

.game-artboard:not(.debug-layout) .opponent .opponent-identity .opponent-name-button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-artboard:not(.debug-layout) .player-identity {
  position: absolute;
  left: 16%;
  top: 4%;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.4cqw, 8px);
  width: 58%;
  height: 21%;
  min-width: 0;
}

.player-identity-name {
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  color: var(--simple-text);
  font-size: clamp(11px, 3.15cqw, 15px);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-artboard:not(.debug-layout) .player .player-wallet,
.game-artboard:not(.debug-layout) .opponent .opponent-wallet {
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .9cqw, 5px);
  width: auto;
  min-width: clamp(72px, 21cqw, 98px);
  height: clamp(24px, 7cqw, 32px);
  padding: 0 clamp(7px, 2cqw, 10px);
  border: 1px solid rgba(224, 189, 106, .42);
  border-radius: 999px;
  background: #292117;
  box-shadow: inset 0 1px #5d4a2c;
}

.game-artboard:not(.debug-layout) .player .player-wallet i,
.game-artboard:not(.debug-layout) .opponent .opponent-wallet i {
  display: block;
  width: clamp(9px, 2.5cqw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e0bd6a;
  box-shadow: inset 0 0 0 2px #8a5b17;
}

.game-artboard:not(.debug-layout) .player .player-wallet strong,
.game-artboard:not(.debug-layout) .opponent .opponent-wallet strong {
  color: #fff2c7;
  font-size: clamp(11px, 3.15cqw, 15px);
  letter-spacing: -.04em;
  text-shadow: none;
}

.player-money-delta,
.opponent-money-delta {
  position: absolute;
  left: 45%;
  top: 82%;
  z-index: 26;
  font-size: clamp(12px, 3.5cqw, 17px);
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 3px #000;
}

.opponent-money-delta {
  left: 44%;
  top: 86%;
}

.player-money-delta.is-loss,
.opponent-money-delta.is-loss { color: #ff7667; animation: player-money-leave 950ms cubic-bezier(.2, .8, .28, 1) both; }
.player-money-delta.is-win,
.opponent-money-delta.is-win { color: #ffe18a; animation: player-money-enter 950ms cubic-bezier(.18, 1.2, .28, 1) both; }
.player-money-delta.is-draw,
.opponent-money-delta.is-draw { color: var(--simple-muted); }

.player-wallet.is-money-loss,
.opponent-wallet.is-money-loss { animation: player-wallet-loss 950ms ease-out; }
.player-wallet.is-money-win,
.opponent-wallet.is-money-win { animation: player-wallet-win 950ms ease-out; }

@keyframes player-money-leave {
  0% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(4px, 4px) scale(1.18); }
  100% { transform: translate(30px, 18px) scale(.82); }
}

@keyframes player-money-enter {
  0% { transform: translate(28px, 18px) scale(.82); }
  55% { transform: translate(-3px, -3px) scale(1.16); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes player-wallet-loss {
  0%, 100% { transform: translateX(0); background: #292117; }
  24% { transform: translateX(-3px); background: #5c201b; }
  48% { transform: translateX(3px); background: #5c201b; }
  72% { transform: translateX(-2px); background: #3f1b17; }
}

@keyframes player-wallet-win {
  0%, 100% { transform: scale(1); box-shadow: inset 0 1px #5d4a2c; }
  48% { transform: scale(1.08); box-shadow: 0 0 13px #d3a23d, inset 0 1px #ffe7a0; }
}

.game-artboard .character-avatar .character-avatar-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: inherit;
  pointer-events: none;
}

#playerAvatar:hover,
#playerAvatar:focus-visible { outline: 2px solid #ffe29a; outline-offset: 2px; }
.opponent .character-avatar { cursor: default; }

.simple-captured-label {
  right: 4%;
  top: 8%;
  height: 26%;
  color: var(--simple-muted);
  font-size: clamp(11px, 3cqw, 14px);
}

.game-artboard:not(.debug-layout) #playerScore { left: 16%; top: 27%; width: 38%; height: 11%; }
.game-artboard:not(.debug-layout) .player-strip { left: 4%; width: 92%; }

/* 획득패와 경계가 겹쳐도 손패가 항상 앞쪽 레이어에 남도록 한다. */
.game-artboard:not(.debug-layout) > .player { z-index: 8; }

.game-artboard:not(.debug-layout) > .hand {
  z-index: 20;
  contain: layout style;
  isolation: isolate;
  overflow: visible;
  background: #141512;
  border: 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.game-artboard:not(.debug-layout) .hand .game-card {
  position: absolute;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .38));
}

/* 확대된 손패는 좌우의 나중 형제 패보다 항상 위에 그린다. */
.game-artboard:not(.debug-layout) .hand .game-card.pending-hand-card {
  z-index: 100 !important;
}

/* 터치 브라우저의 고정 hover 때문에 손패가 미리 선택돼 보이지 않게 한다. */
@media (hover: none), (pointer: coarse) {
  .game-artboard:not(.debug-layout) .hand .game-card,
  .game-artboard:not(.debug-layout) .hand .game-card:nth-child(even) {
    top: 4%;
  }

  .game-artboard:not(.debug-layout) .hand button.game-card:hover:not(.pending-hand-card),
  .game-artboard:not(.debug-layout) .hand button.game-card:focus:not(.pending-hand-card),
  .game-artboard:not(.debug-layout) .hand button.game-card:focus-visible:not(.pending-hand-card) {
    transform: none !important;
    outline: none !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28) !important;
  }

  .game-artboard:not(.debug-layout) .hand .game-card.pending-hand-card {
    transform: translateY(-1.2cqw) scale(1.06) !important;
  }
}

/* 중앙 진행/족보 이벤트는 글꼴 대신 투명 이미지 스프라이트로 표시한다. */
.event-callout { padding: 10px; }

.event-callout .event-callout-card,
.game-artboard:not(.debug-layout) ~ .event-callout .event-callout-card {
  --callout-tilt: -4deg;
  --callout-rebound: 1.1deg;
  --callout-exit-tilt: -1.4deg;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 410px);
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  animation: none;
}

.event-callout.is-opponent .event-callout-card {
  --callout-tilt: 4deg;
  --callout-rebound: -1.1deg;
  --callout-exit-tilt: 1.4deg;
}

.event-callout .event-callout-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: auto;
  top: 50%;
  width: min(62cqw, 250px);
  aspect-ratio: 1;
  border: clamp(2px, .8cqw, 4px) solid rgba(255, 218, 109, .82);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 191, 67, .42), inset 0 0 18px rgba(255, 224, 136, .3);
  transform: translate(-50%, -50%) scale(.18);
  display: none;
}

.event-callout .event-callout-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  right: auto;
  top: 50%;
  width: min(88cqw, 360px);
  height: min(30cqw, 122px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 221, 126, .34), rgba(255, 188, 45, .08) 45%, transparent 72%);
  transform: translate(-50%, -50%) scale(.35);
  display: none;
}

.event-callout-word {
  position: relative;
  z-index: 2;
  width: min(61.333cqw, 260px);
  max-width: calc(100% - 8px);
  aspect-ratio: var(--callout-cell-ratio, 2.3333);
  background-repeat: no-repeat;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .5));
  transform-origin: 50% 58%;
  animation: callout-image-impact 1.7s cubic-bezier(.18, .82, .2, 1) both;
  will-change: transform, opacity;
}

/* 중앙 글씨가 등장하는 첫 순간에만 짧게 퍼지는 경량 DOM 파티클. */
.event-callout-particles {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(72cqw, 300px);
  height: min(32cqw, 132px);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.event-callout-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--particle-size, 5px);
  height: var(--particle-size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff8c8 0 18%, #f5cc63 36%, #b66b20 72%, transparent 76%);
  box-shadow: 0 0 5px rgba(255, 211, 92, .58);
  opacity: 0;
  will-change: transform, opacity;
}

.event-callout-particle:nth-child(3n) {
  border-radius: 1px;
  background: linear-gradient(135deg, #fff5b0, #dc8a27 72%);
}

.event-callout-particles.is-active .event-callout-particle {
  animation: callout-particle-burst 880ms cubic-bezier(.16, .72, .28, 1) var(--particle-delay, 0ms) both;
}

.event-callout .event-callout-card > span,
.event-callout .event-callout-card > small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 이미지 로드 실패 시에도 중앙 정보가 사라지지 않도록 글자 대체 출력을 둔다. */
.event-callout .event-callout-card > strong {
  position: relative !important;
  display: block;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: .08em .18em !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: #fff1c6;
  font-size: clamp(28px, 9.333cqw, 45px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.06em;
  text-shadow: 0 3px 0 #6f180c, 0 7px 12px rgba(0, 0, 0, .55);
  animation: callout-text-impact 1.7s cubic-bezier(.18, .82, .2, 1) both;
}

.event-callout-card.has-callout-sprite > strong {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
}

.event-callout-card:not(.has-callout-sprite) .event-callout-word { display: none; }

@keyframes callout-image-impact {
  0% { opacity: 0; transform: translateY(16px) scale(.34) rotate(var(--callout-tilt)); }
  12% { opacity: 1; transform: translateY(0) scale(1.18) rotate(var(--callout-rebound)); }
  34% { transform: translateY(0) scale(.96) rotate(var(--callout-rebound)); }
  50%, 78% { opacity: 1; transform: translateY(0) scale(1.02) rotate(0); }
  100% { opacity: 0; transform: translateY(-18px) scale(.93) rotate(var(--callout-exit-tilt)); }
}

@keyframes callout-text-impact {
  0% { opacity: 0; transform: translateY(12px) scale(.72); }
  14% { opacity: 1; transform: translateY(0) scale(1.08); }
  36%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(.96); }
}

@keyframes callout-impact-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  12% { opacity: .9; }
  48%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
}

@keyframes callout-impact-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  46%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48); }
}

@keyframes callout-particle-burst {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--particle-start-x)), calc(-50% + var(--particle-start-y))) scale(.2) rotate(0deg);
  }
  16% { opacity: .92; }
  52% { opacity: .72; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--particle-end-x)), calc(-50% + var(--particle-end-y))) scale(.05) rotate(var(--particle-rotation));
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-callout-word { animation: callout-image-reduced .16s ease-out both; }
  .event-callout .event-callout-card::before,
  .event-callout .event-callout-card::after { animation: none; opacity: 0; }
  .event-callout-particles { display: none; }
}

@keyframes callout-image-reduced {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ── 팝업: 장식 대신 명확한 선택 구조 ───────────────────── */
.overlay { background: rgba(4, 8, 7, .82); backdrop-filter: blur(7px); }

.dialog {
  border: 1px solid var(--simple-line-strong);
  border-radius: 18px;
  background: #171d1a;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}

.dialog-kicker { color: var(--simple-accent); }
.setup-option > span,
.rule-book-grid section { border-color: var(--simple-line); background: rgba(255, 255, 255, .035); }
.setup-option input:checked + span { border-color: #83b89e; background: rgba(42, 112, 78, .28); box-shadow: none; }

.primary {
  border: 0;
  color: white;
  background: var(--simple-green);
  box-shadow: none;
}

.result-money-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .9fr 1fr;
  align-items: center;
  gap: 6px;
  min-height: 78px;
  margin-top: 12px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--simple-line-strong);
  border-radius: 14px;
  background: #101713;
}

.result-money-flow small,
.result-money-flow strong { display: block; }
.result-money-flow small { color: var(--simple-muted); font-size: clamp(8px, 2.2cqw, 10px); }
.result-money-balance strong { margin-top: 5px; color: #fff3cd; font-size: clamp(13px, 3.7cqw, 17px); }
.result-money-transfer { position: relative; z-index: 2; }
.result-money-transfer > strong { font-size: clamp(17px, 5cqw, 23px); font-weight: 950; }
.result-money-transfer > small { margin-top: 5px; }
.result-money-flow.is-loss .result-money-transfer > strong { color: #ff7667; }
.result-money-flow.is-win .result-money-transfer > strong { color: #ffe18a; }
.result-money-flow.is-draw .result-money-transfer > strong { color: var(--simple-muted); }
.result-money-after { position: relative; z-index: 3; }

.money-coin {
  position: absolute;
  left: 2%;
  top: 42%;
  z-index: 1;
  display: none;
  width: 13px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #edc55d;
  box-shadow: inset 0 0 0 2px #8c5a10, 0 2px 2px #000;
}

.result-money-flow.is-animating .money-coin { display: block; }
.result-money-flow.is-loss.is-animating .money-coin { animation: result-money-drain 820ms ease-in both; }
.result-money-flow.is-win.is-animating .money-coin { animation: result-money-gain 820ms ease-out both; }
.result-money-flow.is-animating .coin-2 { animation-delay: 90ms; top: 31%; }
.result-money-flow.is-animating .coin-3 { animation-delay: 180ms; top: 54%; }

@keyframes result-money-drain {
  0% { transform: translate(42px, -4px) scale(1); }
  45% { transform: translate(105px, 2px) scale(.9); }
  100% { transform: translate(190px, 13px) scale(.58); }
}

@keyframes result-money-gain {
  0% { transform: translate(190px, 13px) scale(.58); }
  60% { transform: translate(85px, -5px) scale(1.12); }
  100% { transform: translate(42px, -4px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .player-money-delta,
  .opponent-money-delta,
  .player-wallet.is-money-loss,
  .player-wallet.is-money-win,
  .opponent-wallet.is-money-loss,
  .opponent-wallet.is-money-win,
  .result-money-flow.is-animating .money-coin { animation-duration: 80ms !important; }
}

.result-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.result-actions .wide { margin-top: 0; }

.result-exit-button {
  min-height: 56px;
  border: 1px solid var(--simple-line-strong);
  border-radius: 14px;
  color: var(--simple-text);
  background: rgba(255, 255, 255, .055);
  font-size: clamp(16px, 4.8cqw, 20px);
  font-weight: 850;
  box-shadow: none;
  cursor: pointer;
}

.result-exit-button:hover,
.result-exit-button:focus-visible {
  border-color: #d7bd78;
  background: rgba(255, 255, 255, .095);
  outline: 2px solid rgba(255, 226, 154, .35);
  outline-offset: 1px;
}

.result-exit-button:active { transform: translateY(1px); }

/* 선택형 빠른 대화: 대화 버튼은 고정하고 문구는 캐릭터 오른쪽에 표시한다. */
.game-artboard .quick-chat-button {
  position: absolute;
  z-index: 12;
  right: 3.8%;
  top: 7%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 18.5%, 78px);
  height: clamp(32px, 24%, 40px);
  padding: 0;
  border: 2px solid rgba(229, 190, 94, .88);
  border-radius: 999px;
  color: #fff4c9;
  background: linear-gradient(180deg, #75401f, #47200f);
  box-shadow: 0 3px 0 #1f0c06, 0 5px 9px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 239, 182, .25);
  font-size: clamp(13px, 3.5cqw, 16px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.game-artboard .quick-chat-button:hover,
.game-artboard .quick-chat-button:focus-visible {
  border-color: #ffe29a;
  background: linear-gradient(180deg, #8a5128, #552713);
  outline: 2px solid rgba(255, 226, 154, .5);
  outline-offset: 1px;
}

.game-artboard .quick-chat-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #1f0c06, 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 239, 182, .2);
}

.game-artboard .quick-chat-bubble {
  position: absolute;
  z-index: 23;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.1%;
  width: max-content;
  max-width: 57%;
  padding: clamp(7px, 1.8cqw, 10px) clamp(13px, 3.5cqw, 18px);
  border-radius: clamp(10px, 3cqw, 15px);
  color: #32180e;
  background: #fbefc5;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .34);
  font-size: clamp(12px, 3.5cqw, 17px);
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
  pointer-events: none;
  animation: quick-chat-pop 170ms cubic-bezier(.2, .9, .25, 1.18) both;
}

.game-artboard .quick-chat-bubble.hidden { display: none; }
.game-artboard .quick-chat-bubble.local {
  left: calc(4% + clamp(36px, 10cqw, 48px) + clamp(8px, 2.5cqw, 12px));
  right: auto;
  top: 6%;
}
.game-artboard .quick-chat-bubble.remote {
  left: calc(15.5% + clamp(8px, 2.5cqw, 12px));
  right: auto;
  top: 9%;
  background: #ffe0b5;
}
.game-artboard .quick-chat-bubble::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  border-color: transparent #fbefc5 transparent transparent;
  transform: translateY(-50%);
}
.game-artboard .quick-chat-bubble.remote::after { border-right-color: #ffe0b5; }

@keyframes quick-chat-pop {
  from { transform: translateX(-7px) scale(.92); }
  to { transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .game-artboard .quick-chat-bubble { animation: none; }
}

#quickChatPicker { z-index: 48; }
.quick-chat-dialog { padding: 22px 18px 20px; text-align: left; }
.quick-chat-dialog h2 { margin-top: 4px; }
.quick-chat-dialog > p { margin: 8px 0 0; }
.quick-chat-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quick-chat-grid button {
  min-height: 52px;
  padding: 8px 7px;
  border: 1px solid var(--simple-line);
  border-radius: 12px;
  color: var(--simple-text);
  background: rgba(255, 255, 255, .055);
  font-size: clamp(11px, 3.2cqw, 15px);
  font-weight: 800;
  cursor: pointer;
}
.quick-chat-grid button:hover,
.quick-chat-grid button:focus-visible { border-color: #d7bd78; background: rgba(224, 189, 106, .13); outline: none; }

#characterPicker { z-index: 74; }
.character-picker-dialog {
  width: min(94%, 390px);
  max-height: 86%;
  padding: 20px 16px 16px;
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
}
.character-picker-dialog h2 { margin-top: 4px; }
.character-picker-dialog > p { margin: 7px 0 12px; color: var(--simple-muted); font-size: 11px; line-height: 1.45; }
.character-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 2px 8px;
}
.character-option {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 18%;
  background: #101612;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .24);
  cursor: pointer;
}
.character-option img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.character-option::after {
  content: "✓";
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 247, 217, .7);
  border-radius: 50%;
  color: #201308;
  background: #f0cf75;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
  font-size: 12px;
  font-weight: 950;
  opacity: 0;
}
.character-option[aria-pressed="true"] { border-color: #ffe29a; box-shadow: 0 0 0 2px rgba(255, 226, 154, .24); }
.character-option[aria-pressed="true"]::after { opacity: 1; }
.character-option:hover,
.character-option:focus-visible { border-color: #d7bd78; outline: none; }

/* ── 대국 시작 전: 배분된 내 패에서 특수 선언을 먼저 고른다. ─── */
.opening-setup { z-index: 50; padding: clamp(10px, 3cqw, 18px); background: rgba(4, 8, 7, .9); }
.opening-setup-dialog {
  width: min(100%, 390px);
  max-height: calc(100% - 12px);
  padding: clamp(16px, 4.8cqw, 22px);
  overflow: auto;
  text-align: left;
  overscroll-behavior: contain;
}
.opening-setup-dialog h2 { margin: 5px 0 0; font-size: clamp(23px, 7cqw, 31px); }
.opening-setup-dialog .opening-guide { margin: 7px 0 0; color: var(--simple-muted); font-size: clamp(11px, 3.1cqw, 14px); line-height: 1.45; }
.opening-hand {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(78px, 23cqw, 102px);
  margin-top: clamp(12px, 3.5cqw, 17px);
  padding: 8px 5px 10px;
  border: 1px solid var(--simple-line);
  border-radius: 12px;
  background: #0b3025;
  overflow: hidden;
}
.opening-hand .opening-preview-card {
  position: relative;
  flex: 0 0 clamp(46px, 13.5cqw, 58px);
  width: clamp(46px, 13.5cqw, 58px);
  height: auto;
  aspect-ratio: 2 / 3;
  margin: 0 0 0 -5.2cqw;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .38));
  transform: none;
  transition: transform 120ms ease, filter 120ms ease;
  overflow: visible;
}
.opening-hand .opening-preview-card:first-child { margin-left: 0; }
.opening-hand button.opening-preview-card { cursor: pointer; }
.opening-hand button.opening-preview-card:active { transform: translateY(-3px) scale(1.03); }
.opening-hand .opening-preview-card.opening-selected {
  z-index: 3;
  transform: translateY(-5px);
  filter: drop-shadow(0 0 6px rgba(255, 220, 126, .76)) drop-shadow(0 4px 4px rgba(0, 0, 0, .42));
}
.opening-card-badge {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -8px;
  min-width: 32px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 229, 158, .7);
  border-radius: 999px;
  color: #1c160c;
  background: #f3d88d;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}
.opening-options { display: grid; gap: 8px; margin-top: 12px; }
.opening-option-row {
  display: grid;
  grid-template-columns: minmax(86px, .8fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid var(--simple-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
}
.opening-option-row > div:first-child { min-width: 0; }
.opening-option-row strong { display: block; color: var(--simple-text); font-size: clamp(12px, 3.6cqw, 15px); }
.opening-option-row small { display: block; margin-top: 3px; color: var(--simple-muted); font-size: clamp(8px, 2.5cqw, 11px); }
.opening-segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.opening-segments button {
  min-width: 0;
  min-height: 34px;
  padding: 5px 4px;
  border: 1px solid var(--simple-line);
  border-radius: 8px;
  color: var(--simple-muted);
  background: rgba(0, 0, 0, .2);
  font-size: clamp(9px, 2.7cqw, 12px);
  font-weight: 800;
  white-space: nowrap;
}
.opening-segments button[aria-pressed="true"] {
  border-color: #d8bc72;
  color: #fff8df;
  background: #5d4923;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 177, .12);
}
.opening-empty {
  margin: 0;
  padding: 13px;
  border: 1px solid var(--simple-line);
  border-radius: 11px;
  color: var(--simple-muted);
  background: rgba(255, 255, 255, .03);
  font-size: clamp(10px, 3cqw, 13px);
  text-align: center;
}
.opening-setup-dialog .opening-summary {
  min-height: 19px;
  margin: 10px 0 0;
  color: #eed998;
  font-size: clamp(10px, 2.9cqw, 13px);
  font-weight: 700;
  text-align: center;
}
.opening-confirm { min-height: 48px; margin-top: 9px; border-radius: 11px; font-size: clamp(14px, 4cqw, 17px); font-weight: 850; }

@media (max-height: 620px) {
  .lobby-artboard:not(.debug-layout) .lobby-main-subtitle { top: 16%; }
  .lobby-artboard:not(.debug-layout) .hero-plum { top: 25.8%; }
  .opening-setup-dialog { max-height: calc(100% - 6px); padding-top: 12px; padding-bottom: 12px; }
  .opening-hand { min-height: 70px; margin-top: 8px; }
  .opening-options { margin-top: 8px; }
  .opening-option-row { min-height: 44px; padding-block: 5px; }
}

/* ── 첫 실행 회원 가입 · 약관 · 내 정보 ─────────────────── */
.signup-setup { z-index: 70; padding: clamp(8px, 2.5cqw, 16px); background: rgba(3, 8, 6, .94); }
.account-panel { z-index: 68; }
.terms-detail { z-index: 76; }

.signup-dialog,
.account-dialog,
.terms-dialog {
  width: min(100%, 390px);
  max-height: calc(100% - 8px);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.signup-dialog { padding: clamp(17px, 4.6cqw, 22px); }
.signup-dialog h2,
.account-dialog h2,
.terms-dialog h2 {
  margin: 4px 0 0;
  font-size: clamp(22px, 6.8cqw, 30px);
  letter-spacing: -.045em;
}

.signup-dialog .signup-lead {
  margin: 7px 0 0;
  color: var(--simple-muted);
  font-size: clamp(11px, 3cqw, 14px);
  line-height: 1.48;
}

.signup-field {
  display: grid;
  gap: 6px;
  margin-top: 15px;
}

.signup-field > span {
  color: #f6edda;
  font-size: clamp(11px, 3cqw, 13px);
  font-weight: 800;
}

.signup-field input {
  width: 100%;
  min-height: 47px;
  padding: 10px 12px;
  border: 1px solid var(--simple-line-strong);
  border-radius: 11px;
  color: var(--simple-text);
  background: rgba(0, 0, 0, .23);
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  user-select: text;
  -webkit-user-select: text;
}

.signup-field input:focus {
  border-color: #dfc06f;
  outline: 2px solid rgba(223, 192, 111, .2);
  outline-offset: 1px;
}

.signup-field small { color: var(--simple-muted); font-size: 10px; }
.signup-field.is-invalid input { border-color: #d76d64; }

.member-id-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid var(--simple-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
}

.member-id-card small,
.member-id-card strong { display: block; }
.member-id-card small { color: var(--simple-muted); font-size: 9px; }
.member-id-card strong { margin-top: 2px; color: #f0d98f; font-size: clamp(14px, 4cqw, 17px); letter-spacing: .04em; }
.member-id-card button,
.agreement-row > button,
.account-term-links button {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--simple-line);
  border-radius: 8px;
  color: #ede4d0;
  background: rgba(255, 255, 255, .055);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.signup-agreements { margin-top: 14px; }
.signup-agreements h3 { margin: 0 0 7px; color: #f5ead5; font-size: 12px; }
.agreement-all,
.agreement-row {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.agreement-all {
  padding: 8px 10px;
  border: 1px solid rgba(224, 189, 106, .34);
  border-radius: 10px;
  color: #fff6df;
  background: rgba(224, 189, 106, .09);
  font-size: 12px;
  font-weight: 850;
}

.agreement-row {
  justify-content: space-between;
  gap: 8px;
  padding: 4px 5px 2px 10px;
  border-bottom: 1px solid rgba(242, 222, 169, .1);
}

.agreement-all,
.agreement-row label { cursor: pointer; }
.agreement-row label { display: flex; align-items: center; min-width: 0; color: #dfd8c8; font-size: clamp(10px, 2.8cqw, 12px); }
.agreement-row b { color: #e5c56d; font-weight: 850; }
.agreement-all input,
.agreement-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  accent-color: #2b8962;
}

.signup-status {
  min-height: 17px;
  margin: 9px 0 0 !important;
  color: var(--simple-muted) !important;
  font-size: 10px !important;
  text-align: center;
}
.signup-status[data-tone="error"] { color: #ffaea8 !important; }
.signup-status[data-tone="success"] { color: #9de4be !important; }

.signup-confirm,
.account-save,
.terms-confirm {
  min-height: 49px;
  margin-top: 7px;
  border-radius: 11px;
  font-size: clamp(14px, 4cqw, 17px);
  font-weight: 850;
}

.signup-confirm:disabled {
  color: rgba(255, 255, 255, .48);
  background: #39443e;
  cursor: not-allowed;
}

.account-dialog,
.terms-dialog { padding: 20px 17px 17px; }
.account-summary { display: grid; gap: 7px; margin: 15px 0 0; }
.account-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
}
.account-summary dt { color: var(--simple-muted); font-size: 10px; }
.account-summary dd { margin: 0; color: #f0d98f; font-size: 12px; font-weight: 800; }
.account-name-field { margin-top: 11px; }
.account-character-button {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 62px;
  margin-top: 11px;
  padding: 6px 11px 6px 6px;
  border: 1px solid var(--simple-line);
  border-radius: 12px;
  color: var(--simple-text);
  background: rgba(255, 255, 255, .04);
  text-align: left;
  cursor: pointer;
}
.account-character-button:hover,
.account-character-button:focus-visible { border-color: #d7bd78; background: rgba(224, 189, 106, .09); outline: none; }
.account-character-button img {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 232, 174, .38);
  border-radius: 10px;
  object-fit: cover;
}
.account-character-button span,
.account-character-button strong,
.account-character-button small { display: block; }
.account-character-button strong { font-size: 12px; }
.account-character-button small { margin-top: 4px; color: var(--simple-muted); font-size: 10px; font-weight: 650; }
.account-character-button > b { color: #e0bd6a; font-size: 24px; line-height: 1; }
.account-term-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 13px; }
.account-delete {
  display: block;
  margin: 15px auto 0;
  padding: 7px 5px;
  border: 0;
  color: #d9aaa5;
  background: transparent;
  font-size: 10px;
  text-decoration: underline;
  cursor: pointer;
}

.terms-body { margin-top: 14px; color: #d9d2c3; }
.terms-body section + section { margin-top: 15px; }
.terms-body h3 { margin: 0 0 5px; color: #f0d98f; font-size: 13px; }
.terms-body p,
.terms-body li { color: #d0c8b8; font-size: 11px; line-height: 1.55; }
.terms-body p { margin: 0; }
.terms-body ul { margin: 6px 0 0; padding-left: 18px; }
.terms-body strong { color: #fff5dc; }
.terms-version { margin: 16px 0 0 !important; color: #968e7e !important; font-size: 9px !important; text-align: center; }

@media (max-height: 700px) {
  .signup-dialog { padding-block: 13px; }
  .signup-dialog .signup-lead { margin-top: 4px; line-height: 1.35; }
  .signup-field { margin-top: 10px; }
  .signup-field input { min-height: 42px; }
  .member-id-card { margin-top: 8px; padding-block: 7px; }
  .signup-agreements { margin-top: 9px; }
  .agreement-all,
  .agreement-row { min-height: 34px; }
  .signup-confirm { min-height: 44px; }
}