/* 3.0.0 · 로비와 플레이 화면을 하나의 상품용 UI 시스템으로 정리하는 최종 레이어.
   래스터 장식은 contain, 패널은 9분할, 가변 면은 반복 텍스처만 사용한다. */

:root {
  --ui-gold-1: #fff2bd;
  --ui-gold-2: #dba744;
  --ui-gold-3: #7b3c10;
  --ui-wood-deep: #230704;
  --ui-wood: #571407;
  --ui-felt: #03452f;
  --ui-ink: #fff9e8;
  --ui-shadow: rgba(17, 3, 1, .72);
}

.phone {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 메인 로비 ───────────────────────────────────────────── */
.lobby-artboard:not(.debug-layout)::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 36%, transparent 31%, rgba(5, 19, 13, .14) 72%, rgba(15, 3, 1, .34) 100%),
    linear-gradient(90deg, rgba(255, 216, 118, .055), transparent 8% 92%, rgba(255, 216, 118, .055));
}

.lobby-artboard:not(.debug-layout)::after {
  content: "";
  position: absolute;
  z-index: 12;
  inset: 0;
  border: 1px solid rgba(255, 226, 145, .26);
  box-shadow: inset 0 0 clamp(16px, 5cqw, 28px) rgba(18, 3, 1, .5);
  pointer-events: none;
}

.lobby-artboard:not(.debug-layout) {
  --lobby-frame-side-width: clamp(18px, 5.1cqw, 25px);
  --lobby-frame-corner-size: clamp(34px, 9.3cqw, 46px);
}

.lobby-artboard:not(.debug-layout) .lobby-title-plaque,
.lobby-artboard:not(.debug-layout) .lobby-brand-line,
.lobby-artboard:not(.debug-layout) .lobby-main-title,
.lobby-artboard:not(.debug-layout) .lobby-main-subtitle,
.lobby-artboard:not(.debug-layout) .lobby-main-stamp {
  filter: drop-shadow(0 .65cqw .45cqw rgba(19, 3, 1, .62));
}

.lobby-artboard:not(.debug-layout) .lobby-main-title {
  filter:
    drop-shadow(0 .7cqw .35cqw rgba(20, 3, 1, .82))
    saturate(1.08)
    contrast(1.03);
}

.lobby-artboard:not(.debug-layout) .lobby-hero-card {
  filter:
    drop-shadow(0 1.4cqw 1.15cqw rgba(12, 3, 1, .64))
    saturate(1.06);
}

.lobby-artboard:not(.debug-layout) .lobby-stats-frame {
  border-radius: clamp(10px, 2.8cqw, 16px);
  box-shadow:
    0 1.25cqw 1.5cqw rgba(20, 3, 1, .42),
    inset 0 0 0 1px rgba(255, 224, 128, .18);
}

.lobby-artboard:not(.debug-layout) .main-stat-coins,
.lobby-artboard:not(.debug-layout) .main-stat-record {
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 .45cqw 0 #3a1106,
    0 0 1.1cqw rgba(255, 204, 81, .22);
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button {
  isolation: isolate;
  filter: drop-shadow(0 1.25cqw 1.1cqw rgba(22, 3, 1, .48));
  transition: transform .16s ease, filter .16s ease;
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button::before {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 9% 5.8% 13%;
  border-radius: clamp(8px, 2.5cqw, 14px);
  background: linear-gradient(180deg, rgba(255, 245, 192, .09), transparent 48%, rgba(12, 2, 1, .1));
  box-shadow: inset 0 1px rgba(255, 245, 192, .2);
  pointer-events: none;
}

.lobby-artboard:not(.debug-layout) .lobby-menu-board {
  object-fit: contain !important;
  filter: saturate(1.05) contrast(1.02);
}

.lobby-artboard:not(.debug-layout) .lobby-menu-copy {
  filter: drop-shadow(0 .48cqw .25cqw rgba(20, 4, 1, .82));
}

.lobby-artboard:not(.debug-layout) .lobby-menu-decoration {
  filter: drop-shadow(0 .55cqw .5cqw rgba(18, 3, 1, .66));
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button:hover,
.lobby-artboard:not(.debug-layout) .lobby-menu-button:focus-visible {
  transform: translateY(-.55cqw) scale(1.008);
  filter: brightness(1.08) drop-shadow(0 1.5cqw 1.3cqw rgba(22, 3, 1, .55));
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button:active {
  transform: translateY(.35cqw) scale(.995);
  filter: brightness(.98) drop-shadow(0 .55cqw .6cqw rgba(22, 3, 1, .42));
}

/* ── 플레이 화면: 정보 밀도, 턴 가시성, 터치 피드백 ───────── */
.game-artboard:not(.debug-layout) {
  grid-template-rows: 9.2fr 18.8fr minmax(0, 42.2fr) 16.4fr 13.4fr;
  background-image:
    linear-gradient(rgba(20, 5, 2, .18), rgba(20, 5, 2, .26)),
    url("assets/game-ui/wood_tile_premium.png");
}

.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 {
  box-shadow:
    inset 0 0 1.8cqw rgba(0, 0, 0, .5),
    0 .45cqw .7cqw rgba(20, 3, 1, .32);
}

.game-artboard:not(.debug-layout) > .app-bar {
  border-width: clamp(5px, 1.35cqw, 7px) clamp(14px, 4.2cqw, 22px);
}

.game-artboard:not(.debug-layout) > .opponent,
.game-artboard:not(.debug-layout) > .player {
  border-width: clamp(7px, 1.8cqw, 10px) clamp(8px, 2.5cqw, 13px);
}

.game-artboard:not(.debug-layout) > .table-zone {
  border-width: clamp(8px, 2.5cqw, 14px) clamp(7px, 2.2cqw, 12px);
  background-image:
    radial-gradient(ellipse at 50% 48%, rgba(58, 155, 101, .2), transparent 60%),
    linear-gradient(rgba(0, 35, 23, .12), rgba(0, 25, 17, .2)),
    url("assets/game-ui/felt_tile_premium.png");
}

.game-artboard:not(.debug-layout) > .hand {
  border-width: clamp(7px, 1.9cqw, 10px) clamp(9px, 2.7cqw, 14px);
  background-image:
    linear-gradient(180deg, rgba(20, 4, 2, .08), rgba(13, 2, 1, .4)),
    url("assets/game-ui/wood_tile_premium.png");
}

.game-artboard:not(.debug-layout) .game-home-button {
  left: 3.4%;
  top: 21%;
  border-color: rgba(255, 224, 128, .9);
  background: linear-gradient(145deg, #8b431a, #391006 72%);
  box-shadow:
    inset 0 0 0 2px rgba(28, 6, 2, .58),
    0 .55cqw .8cqw rgba(15, 2, 1, .58);
}

.game-artboard:not(.debug-layout) .game-brand-art { left: 16%; top: 9%; width: 38%; height: 18%; }
.game-artboard:not(.debug-layout) .game-title-floral-art { left: 10%; top: 0; width: 55%; height: 98%; opacity: .86; }
.game-artboard:not(.debug-layout) .game-title-art { left: 15%; top: 33%; width: 43%; height: 47%; }

.game-artboard:not(.debug-layout) .wallet {
  right: 4.8%;
  top: 13%;
  width: 25.5%;
  height: 36%;
  border: 1px solid rgba(227, 176, 72, .44);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 7, 4, .78), rgba(59, 16, 7, .52));
  box-shadow: inset 0 1px rgba(255, 235, 167, .1), 0 .45cqw .65cqw rgba(17, 3, 1, .4);
}

.game-artboard:not(.debug-layout) .wallet strong {
  color: var(--ui-gold-1);
  font-variant-numeric: tabular-nums;
}

.game-artboard:not(.debug-layout) .game-security-art { right: 6%; top: 58%; width: 21%; height: 20%; }

.game-artboard:not(.debug-layout) .avatar { left: 4%; top: 7%; width: 14%; height: 46%; }
.game-artboard:not(.debug-layout) .opponent-name-button { left: 19.5%; top: 6%; width: 25%; height: 29%; }
.game-artboard:not(.debug-layout) .game-opponent-settings { left: 43%; top: 9%; width: 10.5%; height: 21%; }
.game-artboard:not(.debug-layout) #opponentScore {
  right: 4.5%;
  top: 8%;
  width: 29%;
  height: 24%;
  padding-right: 1%;
  font-variant-numeric: tabular-nums;
}
.game-artboard:not(.debug-layout) .opponent-copy > p { left: 19.5%; top: 31%; width: 46%; height: 17%; }
.game-artboard:not(.debug-layout) .opponent-strip { left: 17%; top: 51%; width: 45%; height: 41%; }
.game-artboard:not(.debug-layout) .opponent-hand { right: 4.2%; top: 51%; width: 31%; height: 39%; }

.game-artboard:not(.debug-layout) .game-field-label,
.game-artboard:not(.debug-layout) .zone-title {
  top: 2.1%;
  height: 9.8%;
  filter: drop-shadow(0 .45cqw .5cqw rgba(13, 2, 1, .45));
}

.game-artboard:not(.debug-layout) .game-field-label { left: 2.7%; width: 22%; }
.game-artboard:not(.debug-layout) .zone-title { right: 2.8%; width: 22%; }

.game-artboard:not(.debug-layout) .turn-status {
  position: absolute;
  z-index: 6;
  left: 32%;
  top: 2.25%;
  width: 36%;
  height: 9.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.5cqw, 8px);
  padding: 0 2.5%;
  border: 1px solid rgba(235, 188, 83, .6);
  border-radius: 999px;
  color: #fff6d5;
  background: linear-gradient(180deg, rgba(52, 19, 8, .92), rgba(22, 8, 4, .9));
  box-shadow: inset 0 1px rgba(255, 235, 170, .12), 0 .45cqw .65cqw rgba(12, 2, 1, .35);
  font-size: clamp(10px, 2.75cqw, 13px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  pointer-events: none;
}

.game-artboard:not(.debug-layout) .turn-status i {
  flex: 0 0 auto;
  width: clamp(6px, 1.65cqw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #63e0a2;
  box-shadow: 0 0 .9cqw rgba(80, 237, 159, .8);
}

.game-artboard:not(.debug-layout) .turn-status[data-tone="choice"] {
  border-color: #ffd66d;
  color: #fff8d7;
  background: linear-gradient(180deg, rgba(112, 58, 8, .95), rgba(49, 22, 3, .94));
}
.game-artboard:not(.debug-layout) .turn-status[data-tone="choice"] i { background: #ffd45f; box-shadow: 0 0 1cqw rgba(255, 196, 59, .9); }
.game-artboard:not(.debug-layout) .turn-status[data-tone="opponent"] i,
.game-artboard:not(.debug-layout) .turn-status[data-tone="busy"] i { background: #e9855d; box-shadow: 0 0 .9cqw rgba(233, 106, 78, .75); }
.game-artboard:not(.debug-layout) .turn-status[data-tone="finished"] i { background: #cdb474; box-shadow: none; }

.game-artboard:not(.debug-layout) .field {
  left: 8%;
  top: 14.3%;
  width: 77%;
  height: 80.5%;
  gap: min(1.35cqw, 6px) min(1.65cqw, 8px);
}

.game-artboard:not(.debug-layout) .field.medium { gap: min(1.15cqw, 5px); }
.game-artboard:not(.debug-layout) .field.dense { gap: min(.95cqw, 4px); }
.game-artboard:not(.debug-layout) .field.crowded { gap: min(.72cqw, 3px); }
.game-artboard:not(.debug-layout) .deck { right: 2.4%; bottom: 7%; width: 9.5%; height: 20%; }

.game-artboard:not(.debug-layout) .game-card {
  border-radius: clamp(5px, 1.35cqw, 7px);
  filter: drop-shadow(0 .55cqw .5cqw rgba(13, 3, 1, .42));
}

.game-artboard:not(.debug-layout) button.game-card {
  transition: transform .14s ease, filter .14s ease;
}

.game-artboard:not(.debug-layout) button.game-card:focus-visible {
  outline: clamp(2px, .65cqw, 3px) solid #ffe27c;
  outline-offset: clamp(1px, .35cqw, 2px);
  filter: brightness(1.08) drop-shadow(0 1cqw .8cqw rgba(18, 4, 1, .58));
}

.game-artboard:not(.debug-layout) .game-card.match-choice {
  outline: clamp(2px, .7cqw, 3px) solid #ffe075;
  outline-offset: clamp(1px, .35cqw, 2px);
  filter: brightness(1.08) drop-shadow(0 0 1.2cqw rgba(255, 205, 71, .58));
}

.game-artboard:not(.debug-layout) .capture-pile {
  border-color: rgba(239, 198, 101, .62);
  border-radius: clamp(5px, 1.25cqw, 7px);
  box-shadow: inset 0 0 1.1cqw rgba(0, 0, 0, .52), 0 .35cqw .45cqw rgba(17, 3, 1, .26);
}

.game-artboard:not(.debug-layout) .capture-pile::after {
  color: #fff2c4;
  background: linear-gradient(180deg, rgba(35, 12, 5, .84), rgba(14, 4, 2, .94));
  font-weight: 900;
}

.game-artboard:not(.debug-layout) .game-player-label { left: 3.5%; top: 7%; width: 14%; height: 30%; }
.game-artboard:not(.debug-layout) .game-captured-label { right: 3.5%; top: 7%; width: 15%; height: 30%; }
.game-artboard:not(.debug-layout) #playerScore {
  left: 18.3%;
  top: 7%;
  width: 32%;
  height: 30%;
  font-variant-numeric: tabular-nums;
}
.game-artboard:not(.debug-layout) .player-strip { left: 8%; top: 41%; width: 84%; height: 51%; }

.game-artboard:not(.debug-layout) > .hand {
  padding: 1.25% 4.5% 0;
  box-shadow:
    inset 0 1.2cqw 2cqw rgba(9, 1, 0, .34),
    inset 0 1px rgba(255, 222, 132, .12);
}

.game-artboard:not(.debug-layout) .hand .game-card {
  top: 3%;
  max-height: 92%;
  filter: drop-shadow(0 .7cqw .55cqw rgba(8, 1, 0, .55));
}

.game-artboard:not(.debug-layout) .hand .game-card:nth-child(even) { top: 5.5%; }
.game-artboard:not(.debug-layout) .hand .game-card.pending-hand-card {
  transform: translateY(-1.5cqw) scale(1.055);
  filter: brightness(1.08) drop-shadow(0 1cqw .75cqw rgba(8, 1, 0, .62));
}

/* 오버레이는 게임판과 같은 목재·금장 계열로 통일한다. */
.overlay {
  background: rgba(11, 5, 3, .78);
  backdrop-filter: blur(5px) saturate(.8);
}

.dialog {
  border: 2px solid #d9a94c;
  border-radius: 18px;
  background:
    linear-gradient(rgba(41, 13, 7, .93), rgba(18, 7, 4, .97)),
    url("assets/game-ui/wood_tile_premium.png") center / 240px repeat;
  box-shadow:
    0 12px 0 #1a0503,
    0 24px 56px rgba(0, 0, 0, .56),
    inset 0 0 0 2px rgba(255, 235, 173, .1);
}

.setup-option > span,
.rule-book-grid section {
  border-color: rgba(231, 188, 91, .35);
  background: rgba(18, 7, 4, .68);
}

.setup-option input:checked + span {
  border-color: #efc866;
  background: linear-gradient(180deg, rgba(108, 63, 22, .72), rgba(52, 24, 8, .76));
  box-shadow: inset 0 0 0 1px rgba(255, 237, 176, .16), 0 .5cqw 1cqw rgba(0, 0, 0, .22);
}

.primary {
  border-color: #efc55f;
  color: #fff8df;
  background: linear-gradient(180deg, #267451, #0b432e);
  box-shadow: 0 6px 0 #06291c, 0 12px 24px rgba(0, 0, 0, .34);
}

@media (max-height: 720px) {
  .game-artboard:not(.debug-layout) {
    grid-template-rows: 9fr 18.5fr minmax(0, 41fr) 16.5fr 15fr;
  }
  .game-artboard:not(.debug-layout) .turn-status { font-size: clamp(9px, 2.55cqw, 12px); }
  .game-artboard:not(.debug-layout) .field { top: 14%; height: 81%; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-menu-button,
  .game-card,
  .turn-status i { transition: none !important; animation: none !important; }
}