/* 2.2.2 · 상품용 세로 전체화면 플레이 모듈
   장식 테두리는 9분할하고 중앙 면은 반복 타일을 사용한다.
   카드, 고정 장식, 동적 UI는 서로 겹치지 않는 전용 안전영역을 갖는다. */

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar { display: none; }

.preview-shell {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}

.game-artboard:not(.debug-layout) {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
  display: grid;
  grid-template-rows: 10fr 20fr minmax(0, 39.5fr) 17fr 13.5fr;
  container-type: inline-size;
  isolation: isolate;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: #280b05;
  background-image:
    linear-gradient(rgba(18, 6, 3, .24), rgba(18, 6, 3, .24)),
    url("assets/game-ui/wood_tile_premium.png");
  background-position: center;
  background-size: auto, clamp(240px, 70cqw, 360px);
  background-repeat: repeat;
}

.game-artboard:not(.debug-layout).hidden { display: none; }

.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 {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-style: solid;
  box-shadow: inset 0 0 1.8cqw rgba(0, 0, 0, .55);
  contain: layout paint style;
}

.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-color: #4a1309;
  background-image:
    linear-gradient(rgba(35, 7, 3, .22), rgba(35, 7, 3, .22)),
    url("assets/game-ui/wood_tile_premium.png");
  background-position: center;
  background-size: auto, clamp(230px, 66cqw, 340px);
  background-repeat: repeat;
}

.game-artboard:not(.debug-layout) > .app-bar {
  grid-row: 1;
  border-width: clamp(5px, 1.45cqw, 8px) clamp(16px, 4.8cqw, 24px);
  border-image: url("assets/game-ui/game_header_panel.png") 35 120 32 120 / 1 / 0 round;
}

.game-artboard:not(.debug-layout) > .opponent {
  grid-row: 2;
  border-width: clamp(7px, 2cqw, 11px) clamp(9px, 2.8cqw, 15px);
  border-image: url("assets/game-ui/game_opponent_panel.png") 42 58 45 58 / 1 / 0 round;
}

.game-artboard:not(.debug-layout) > .table-zone {
  grid-row: 3;
  background-color: #03442e;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(26, 116, 79, .18), transparent 58%),
    linear-gradient(rgba(0, 35, 23, .16), rgba(0, 35, 23, .16)),
    url("assets/game-ui/felt_tile_premium.png");
  background-position: center;
  background-size: auto, auto, clamp(260px, 78cqw, 420px);
  background-repeat: no-repeat, no-repeat, repeat;
  border-width: clamp(9px, 2.9cqw, 16px) clamp(8px, 2.5cqw, 14px);
  border-image: url("assets/game-ui/game_field_panel.png") 112 155 108 155 / 1 / 0 round;
}

.game-artboard:not(.debug-layout) > .player {
  grid-row: 4;
  border-width: clamp(7px, 2cqw, 11px) clamp(9px, 2.8cqw, 15px);
  border-image: url("assets/game-ui/game_player_panel.png") 38 68 40 68 / 1 / 0 round;
}

.game-artboard:not(.debug-layout) > .hand {
  grid-row: 5;
  border-width: clamp(7px, 2cqw, 11px) clamp(10px, 3cqw, 16px);
  border-image: url("assets/game-ui/game_hand_panel.png") 38 74 42 74 / 1 / 0 round;
}

/* 전체 패널 이미지는 편집 기준 모드에서만 표시한다. 실게임은 위 9분할 테두리를 사용한다. */
.game-artboard:not(.debug-layout) > .app-bar > .game-header-panel,
.game-artboard:not(.debug-layout) > .opponent > .game-opponent-panel,
.game-artboard:not(.debug-layout) > .table-zone > .game-field-panel,
.game-artboard:not(.debug-layout) > .player > .game-player-panel,
.game-artboard:not(.debug-layout) > .game-hand-panel { display: none; }

.game-artboard:not(.debug-layout) .game-ui-art { object-fit: contain; }

/* 상단 모듈 */
.game-artboard:not(.debug-layout) .game-home-button {
  position: absolute;
  left: 3.2%;
  top: 24%;
  width: min(9.8cqw, 44px);
  height: min(9.8cqw, 44px);
  font-size: min(6.2cqw, 28px);
}
.game-artboard:not(.debug-layout) .game-brand-art {
  position: absolute;
  left: 15.4%;
  top: 10%;
  width: 40.5%;
  height: 19%;
}
.game-artboard:not(.debug-layout) .game-title-floral-art {
  position: absolute;
  z-index: 2;
  left: 10%;
  top: 1%;
  width: 56%;
  height: 96%;
  object-fit: contain;
}
.game-artboard:not(.debug-layout) .game-title-art {
  z-index: 3;
  position: absolute;
  left: 15.2%;
  top: 33%;
  width: 42.5%;
  height: 49%;
}
.game-artboard:not(.debug-layout) .wallet {
  position: absolute;
  left: auto;
  right: 6.2%;
  top: 16%;
  width: 25%;
  height: 31%;
  font-size: clamp(15px, 4.35cqw, 20px);
  white-space: nowrap;
}
.game-artboard:not(.debug-layout) .game-security-art {
  position: absolute;
  left: auto;
  right: 6.4%;
  top: 57%;
  width: 21.5%;
  height: 22%;
}

/* 상대 모듈 */
.game-artboard:not(.debug-layout) .opponent-copy,
.game-artboard:not(.debug-layout) .name-row,
.game-artboard:not(.debug-layout) .player-head,
.game-artboard:not(.debug-layout) .player-head > div {
  position: static;
  display: contents;
}
.game-artboard:not(.debug-layout) .avatar {
  position: absolute;
  left: 3.6%;
  top: 8%;
  width: 14.5%;
  height: 45%;
  font-size: clamp(24px, 7cqw, 33px);
}
.game-artboard:not(.debug-layout) .opponent-name-button {
  position: absolute;
  left: 19.8%;
  top: 7%;
  width: 26%;
  height: 28%;
  font-size: clamp(16px, 4.6cqw, 21px);
}
.game-artboard:not(.debug-layout) .game-opponent-settings {
  position: absolute;
  left: 43.8%;
  top: 10%;
  width: 11%;
  height: 20%;
}
.game-artboard:not(.debug-layout) #opponentScore {
  position: absolute;
  left: auto;
  right: 4.8%;
  top: 10%;
  width: 28%;
  height: 21%;
  font-size: clamp(14px, 4cqw, 19px);
}
.game-artboard:not(.debug-layout) .opponent-copy > p {
  position: absolute;
  left: 19.8%;
  top: 31%;
  width: 42%;
  height: 16%;
  font-size: clamp(11px, 3cqw, 14px);
}
.game-artboard:not(.debug-layout) .opponent-strip {
  position: absolute;
  left: 17.5%;
  top: 51%;
  width: 44%;
  height: 41%;
}
.game-artboard:not(.debug-layout) .opponent-hand {
  position: absolute;
  left: auto;
  right: 4.6%;
  top: 52%;
  width: 30.5%;
  height: 38%;
}
.game-artboard:not(.debug-layout) .mini-back {
  width: clamp(23px, 7.2cqw, 34px);
  height: clamp(34px, 10.8cqw, 51px);
}

/* 바닥 모듈 */
.game-artboard:not(.debug-layout) .game-field-label {
  position: absolute;
  left: 2.7%;
  top: 1.8%;
  width: 22%;
  height: 10.5%;
}
.game-artboard:not(.debug-layout) .zone-title {
  position: absolute;
  left: auto;
  right: 3.1%;
  top: 1.8%;
  width: 21.5%;
  height: 10.5%;
  border: 0;
  font-size: clamp(12px, 3.5cqw, 16px);
  background: url("assets/game-ui/label_plaque_right.png") center / contain no-repeat;
}
.game-artboard:not(.debug-layout) .zone-title > span,
.game-artboard:not(.debug-layout) .zone-title span:last-child {
  position: absolute;
  left: 34%;
  right: 6%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  color: #fff8dc;
  background: transparent;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 .2cqw .25cqw rgba(0, 0, 0, .88);
  white-space: nowrap;
}
.game-artboard:not(.debug-layout) .field {
  position: absolute;
  left: 9.2%;
  top: 15.5%;
  width: 75.5%;
  height: 78%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  place-content: center;
  gap: min(1.55cqw, 7px) min(1.85cqw, 9px);
  overflow: hidden;
}
.game-artboard:not(.debug-layout) .field.medium {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: min(1.3cqw, 6px);
}
.game-artboard:not(.debug-layout) .field.dense {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: min(1.05cqw, 5px);
}
.game-artboard:not(.debug-layout) .field.crowded {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: min(.82cqw, 4px);
}
.game-artboard:not(.debug-layout) .field .game-card {
  justify-self: center;
}
.game-artboard:not(.debug-layout) .deck {
  position: absolute;
  left: auto;
  right: 2.9%;
  top: auto;
  bottom: 8%;
  width: 9.8%;
  height: 21%;
  font-size: clamp(11px, 3.1cqw, 15px);
}
.game-artboard:not(.debug-layout) #deckBadge { display: none; }

/* 획득패 종류 라벨은 카드 위가 아니라 슬롯 하단의 전용 레일에 둔다. */
.game-artboard:not(.debug-layout) .capture-pile {
  padding-bottom: clamp(13px, 3.6cqw, 17px);
  border: 1px solid rgba(231, 188, 84, .72);
  background-color: rgba(36, 12, 7, .62);
  background-image:
    linear-gradient(rgba(18, 6, 3, .2), rgba(18, 6, 3, .2)),
    url("assets/game-ui/wood_tile_premium.png");
  background-position: center;
  background-size: auto, 180px;
  background-repeat: repeat;
}
.game-artboard:not(.debug-layout) .capture-pile.kind-bright,
.game-artboard:not(.debug-layout) .capture-pile.kind-animal {
  background-image:
    linear-gradient(rgba(0, 35, 23, .25), rgba(0, 35, 23, .25)),
    url("assets/game-ui/felt_tile_premium.png");
}
.game-artboard:not(.debug-layout) .capture-pile::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(13px, 3.6cqw, 17px);
  padding: 0;
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(231, 188, 84, .45);
  border-radius: 0;
  color: #fff4c9;
  background: rgba(19, 7, 4, .88);
  font-size: clamp(8px, 2.3cqw, 11px);
  letter-spacing: .02em;
}
.game-artboard:not(.debug-layout) .capture-mini-card,
.game-artboard:not(.debug-layout) .player-strip .capture-mini-card {
  top: 2px;
  max-height: calc(100% - clamp(16px, 4.2cqw, 20px));
  object-fit: contain;
}

/* 내 획득패 모듈 */
.game-artboard:not(.debug-layout) .game-player-label {
  position: absolute;
  left: 3.4%;
  top: 7%;
  width: 14%;
  height: 29%;
}
.game-artboard:not(.debug-layout) .game-captured-label {
  position: absolute;
  left: auto;
  right: 3.4%;
  top: 7%;
  width: 15%;
  height: 29%;
}
.game-artboard:not(.debug-layout) #playerScore {
  position: absolute;
  left: 18.5%;
  top: 7%;
  width: 31%;
  height: 29%;
  font-size: clamp(14px, 4cqw, 19px);
}
.game-artboard:not(.debug-layout) .player-strip {
  position: absolute;
  left: 8.5%;
  top: 41%;
  width: 83%;
  height: 51%;
}

/* 손패 모듈 */
.game-artboard:not(.debug-layout) > .hand {
  left: auto;
  top: auto;
  padding: 1.5% 4.5% 0;
  overflow: hidden;
}
.game-artboard:not(.debug-layout) .hand .game-card {
  top: 4%;
  max-height: 91%;
  z-index: 3;
}
.game-artboard:not(.debug-layout) .hand .game-card:nth-child(even) { top: 7%; }
.game-artboard:not(.debug-layout) .hand .game-card.pending-hand-card {
  z-index: 20;
  transform: translateY(-1.2cqw) scale(1.06);
}
.game-artboard:not(.debug-layout) .game-card,
.game-artboard:not(.debug-layout) .card-art,
.game-artboard:not(.debug-layout) .capture-mini-card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.game-artboard:not(.debug-layout) button.game-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.game-artboard:not(.debug-layout) button.game-card:active {
  filter: brightness(1.12) drop-shadow(0 .7cqw .55cqw rgba(0, 0, 0, .4));
}
.game-artboard:not(.debug-layout) > .game-footer-ornament {
  display: none;
}

/* 일시적 안내 UI도 카드 테이블과 시각적으로 분리된 목재 카드로 표시한다. */
.game-artboard:not(.debug-layout) ~ .event-callout .event-callout-card,
.event-callout-card {
  border-color: #e4b955;
  border-radius: 16px;
  background:
    linear-gradient(rgba(34, 7, 3, .22), rgba(34, 7, 3, .22)),
    url("assets/game-ui/wood_tile_premium.png") center / 260px repeat;
  box-shadow: 0 10px 0 #1e0905, inset 0 0 0 2px rgba(255, 235, 174, .22);
}

/* 낮은 화면에서는 읽기 영역을 유지하고 바닥 영역이 우선 압축된다. */
@media (max-height: 720px) {
  .game-artboard:not(.debug-layout) {
    grid-template-rows: 9.5fr 20fr minmax(0, 39fr) 17fr 14.5fr;
  }
  .game-artboard:not(.debug-layout) .opponent-strip { top: 50%; height: 42%; }
  .game-artboard:not(.debug-layout) .opponent-hand { top: 51%; height: 39%; }
  .game-artboard:not(.debug-layout) .field { top: 15%; height: 79%; }
}

/* 넓고 긴 최신 기기에서는 콘텐츠 폭만 제한해 카드가 과도하게 커지지 않도록 한다. */
@media (min-width: 480px) {
  .game-artboard:not(.debug-layout) .field { left: 12%; width: 72%; }
  .game-artboard:not(.debug-layout) .opponent-strip { left: 20%; width: 39%; }
  .game-artboard:not(.debug-layout) .player-strip { left: 11%; width: 78%; }
}