/* ============================================================================
   천하장기(天下將棋): 상수(象手)와 훈수(訓手) — 명인전 (ASTRA MAX PORTRAIT EDITION)
   정통 모바일 세로형 해상도 (9:16 비율 · 480px) · 실사 그래픽 아이콘 아키텍처
   ============================================================================ */

:root {
  --bg-deep: #110c08;
  --bg-panel: rgba(27, 19, 13, 0.94);
  --bg-card: rgba(40, 28, 19, 0.95);
  --gold-bright: #ffd970;
  --gold-main: #e2af42;
  --gold-dark: #8b6318;
  --jade-bright: #34d399;
  --jade-deep: #065f46;
  --crimson-bright: #f87171;
  --crimson-deep: #991b1b;
  --cho-blue: #38bdf8;
  --cho-deep: #0369a1;
  --text-cream: #fdf6e7;
  --text-muted: #d4c3a3;
  --border-gold: rgba(226, 175, 66, 0.55);
  --shadow-heavy: 0 10px 28px rgba(0, 0, 0, 0.78);
  --font-serif: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Serif KR', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 35%, #22150c 0%, #0b0704 65%, #050302 100%);
  color: var(--text-cream);
  font-family: var(--font-serif);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ★ App Shell: True Vertical Portrait Mobile Resolution (9:16 Mobile Frame) ★ */
#app-shell {
  position: relative;
  width: 100%;
  max-width: 480px; /* 정통 모바일 세로형 해상도 (9:16 비율) */
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 20%, #241911 0%, #0d0906 100%);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.96), 0 0 28px rgba(226, 175, 66, 0.18);
  border-left: 1.5px solid rgba(226, 175, 66, 0.35);
  border-right: 1.5px solid rgba(226, 175, 66, 0.35);
  overflow: hidden;
}

.hidden {
  display: none !important;
}

/* ============================================================================
   GRAPHIC UI ICON SYSTEM (Replaces All Mockup Emojis)
   ============================================================================ */
.ui-inline-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
  vertical-align: -3px;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}

.ui-inline-icon.xs {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.ui-inline-icon.sm {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.ui-inline-icon.lg {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
}

.curr-icon-img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.ui-btn-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.hub-icon-btn.muted .ui-btn-icon-img {
  opacity: 0.36;
  filter: grayscale(0.9);
}

.dock-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.dock-tab-btn.active .dock-icon-img {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(255, 217, 112, 0.75));
}

.skin-hanja-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f59e0b, #92400e);
  border: 1px solid #fde68a;
  color: #1c1003;
  font-size: 0.7rem;
  font-weight: 900;
  margin-right: 3px;
}

.live-dot-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
  margin-right: 4px;
  vertical-align: 1px;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: 0px;
  border: 1px solid rgba(0, 0, 0, 0.65);
}

.legend-dot.white { background: #ffffff; }
.legend-dot.green { background: #34d399; }
.legend-dot.red { background: #f87171; }

/* Scene Switching System */
.game-scene {
  display: none;
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.game-scene.active {
  display: flex;
  flex-direction: column;
  animation: sceneFadeIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sceneFadeIn {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   1. SCENE: TITLE & SPLASH SCREEN (#scene-title — Portrait 480px)
   ============================================================================ */
#scene-title {
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 22px;
  text-align: center;
  z-index: 20;
}

.title-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.84) contrast(1.08);
  transform: scale(1.03);
  animation: slowZoom 18s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes slowZoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}

.title-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 5, 3, 0.74) 0%,
    rgba(12, 8, 5, 0.4) 38%,
    rgba(12, 8, 5, 0.65) 72%,
    rgba(7, 4, 2, 0.96) 100%
  );
  z-index: 1;
}

.title-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.title-top-badges {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.age-rating-badge,
.engine-version-badge {
  background: rgba(18, 12, 8, 0.88);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.title-center-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.title-emblem-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  margin-bottom: 10px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #fff1a8, #d49726, #6b4509);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), 0 0 28px rgba(255, 204, 85, 0.45);
}

.title-emblem-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2.5px solid #23160c;
}

.title-royal-kicker {
  color: var(--gold-bright);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  margin-bottom: 4px;
}

.title-main-calligraphy {
  font-size: 3.35rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #fffdf5 0%, #ffe184 48%, #d89620 85%, #8f5808 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.95));
  line-height: 1.08;
  margin-bottom: 8px;
}

.title-sub-ribbon {
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(145, 28, 28, 0.92) 12%, rgba(185, 38, 38, 0.96) 50%, rgba(145, 28, 28, 0.92) 88%, transparent);
  border-top: 1px solid var(--gold-bright);
  border-bottom: 1px solid var(--gold-bright);
  padding: 6px 10px;
  color: #fff8e7;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

/* 2x3 Feature Grid in Portrait Title Screen */
.title-feature-pills {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.title-pill {
  background: rgba(24, 17, 11, 0.9);
  border: 1.5px solid rgba(255, 217, 112, 0.58);
  color: #ffefc2;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.title-bottom-cta {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.btn-title-start {
  position: relative;
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2.5px solid #fff0a8;
  background: linear-gradient(180deg, #f3bd48 0%, #c98216 55%, #8c5205 100%);
  color: #1f1204;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-shadow: 0 10px 30px rgba(226, 175, 66, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.65);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  overflow: hidden;
}

.btn-title-start:hover,
.btn-title-start:active {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 38px rgba(255, 212, 96, 0.75);
}

.btn-start-main-txt {
  font-size: 1.24rem;
  font-weight: 900;
  color: #1c0f02;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn-start-sub-txt {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a2106;
}

.title-copyright-txt {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* ============================================================================
   2. PERSISTENT TOP ROYAL HEADER (#global-hub-header — Portrait 480px)
   ============================================================================ */
.hub-top-bar {
  position: relative;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(180deg, #261a11 0%, #160f09 100%);
  border-bottom: 1.5px solid var(--border-gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
  gap: 6px;
}

.hub-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
  flex: 1;
}

.hub-avatar-ring {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold-bright);
  overflow: visible;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
  flex-shrink: 0;
}

.hub-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hub-rank-tag {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #dc2626, #7f1d1d);
  border: 1px solid var(--gold-bright);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  padding: 0px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.hub-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.hub-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.hub-name-row strong {
  font-size: 0.88rem;
  color: var(--text-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-pill {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.vip-pill.active {
  background: linear-gradient(90deg, #f59e0b, #b45309);
  color: #fff;
  border-color: #fde68a;
}

.prestige-pill {
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border: 1px solid #f9a8d4;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(219, 39, 119, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.hub-rp-track {
  position: relative;
  width: 100%;
  max-width: 185px;
  height: 14px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(226, 175, 66, 0.45);
  border-radius: 999px;
  overflow: hidden;
}

.hub-rp-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  transition: width 0.35s ease;
}

.hub-rp-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}

.hub-currencies {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.currency-box {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(12, 8, 5, 0.88);
  border: 1.5px solid var(--border-gold);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.currency-box strong {
  color: var(--gold-bright);
  font-weight: 900;
}

.hub-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px solid var(--border-gold);
  background: rgba(40, 28, 18, 0.92);
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================================
   3. SCENE: ILLUSTRATED MAIN LOBBY HUB (#scene-lobby — Portrait 480px)
   ============================================================================ */
.lobby-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.lobby-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 10, 6, 0.68) 0%,
    rgba(15, 10, 6, 0.55) 45%,
    rgba(12, 8, 5, 0.92) 100%
  );
  z-index: 1;
}

.lobby-overlay-gradient.dark-heavy {
  background: rgba(13, 9, 6, 0.88);
}

.lobby-content-scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lobby-hero-card {
  background: linear-gradient(135deg, rgba(42, 28, 18, 0.96), rgba(23, 15, 9, 0.97));
  border: 1.5px solid var(--border-gold);
  border-radius: 14px;
  padding: 10px 11px;
  box-shadow: var(--shadow-heavy);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lobby-hero-master {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lobby-master-illust {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--gold-bright);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  flex-shrink: 0;
}

.lobby-master-speech {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.speech-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.lobby-master-speech h2 {
  font-size: 0.94rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}

.lobby-master-speech p {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ★ 3x2 Portrait Grid for 6 Secret Arsenal Items ★ */
.lobby-arsenal-strip,
.lobby-arsenal-strip.six-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.arsenal-item,
.lobby-arsenal-strip.six-cols .arsenal-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(12, 8, 5, 0.82);
  border: 1.5px solid rgba(226, 175, 66, 0.42);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.lobby-arsenal-strip.six-cols .arsenal-item:hover {
  transform: translateY(-1px);
  border-color: #fde047;
}

.arsenal-item.sangsu { border-color: rgba(52, 211, 153, 0.55); }
.arsenal-item.hunsu { border-color: rgba(251, 191, 36, 0.65); }
.arsenal-item.shield {
  border-color: rgba(56, 189, 248, 0.7);
  background: rgba(8, 25, 42, 0.78);
}

.arsenal-icon,
.lobby-arsenal-strip.six-cols .arsenal-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid var(--gold-bright);
  flex-shrink: 0;
}

.arsenal-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.arsenal-label,
.lobby-arsenal-strip.six-cols .arsenal-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold-bright);
  white-space: nowrap;
}

.arsenal-info strong,
.lobby-arsenal-strip.six-cols .arsenal-info strong {
  font-size: 0.78rem;
  color: #fff;
  white-space: nowrap;
}

/* Quick Config Bar in Portrait Lobby (Stacked 2-Row Box) */
.lobby-quick-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(25, 17, 11, 0.94);
  border: 1.5px solid rgba(226, 175, 66, 0.42);
  border-radius: 14px;
  padding: 9px 11px;
}

.config-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.config-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.lobby-formation-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.lobby-form-btn {
  padding: 6px 4px;
  border-radius: 8px;
  border: 1.5px solid rgba(226, 175, 66, 0.35);
  background: rgba(15, 10, 6, 0.88);
  color: var(--text-cream);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.lobby-form-btn.active {
  background: linear-gradient(180deg, #e5a93c, #a3680e);
  color: #1a0f02;
  border-color: #fff2b2;
  box-shadow: 0 2px 8px rgba(229, 169, 60, 0.45);
}

.lobby-equipped-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.equipped-skin-pill {
  padding: 6px 8px;
  border-radius: 9px;
  border: 1.5px solid rgba(226, 175, 66, 0.55);
  background: linear-gradient(180deg, #2d1e12, #191009);
  color: var(--text-cream);
  font-size: 0.72rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}

.equipped-skin-pill strong {
  color: #fde047;
}

.equipped-skin-pill:hover {
  border-color: #fde047;
}

/* ★ 2x3 Portrait Mode Portal Cards Grid ★ */
.lobby-mode-grid,
.lobby-mode-grid.six-portals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mode-portal-card {
  position: relative;
  min-height: 132px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(226, 175, 66, 0.55);
  box-shadow: var(--shadow-heavy);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 11px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.mode-portal-card.primary-portal {
  border-color: #fde047;
  box-shadow: 0 8px 22px rgba(234, 179, 8, 0.32);
}

.mode-portal-card:hover {
  transform: translateY(-2px);
  border-color: #fff;
}

.portal-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
  z-index: 0;
}

.mode-portal-card:hover .portal-bg {
  transform: scale(1.05);
}

.portal-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 6, 3, 0.35) 0%,
    rgba(12, 8, 4, 0.8) 50%,
    rgba(10, 6, 3, 0.96) 100%
  );
  z-index: 1;
}

.portal-badge-top {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  background: rgba(18, 12, 7, 0.9);
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright);
  font-size: 0.66rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.portal-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.portal-body h3 {
  font-size: 0.92rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px #000;
  display: flex;
  align-items: center;
  gap: 4px;
}

.portal-body p {
  font-size: 0.72rem;
  color: #ebdcc2;
  line-height: 1.28;
}

.portal-cta-pill {
  margin-top: 3px;
  align-self: flex-start;
  background: linear-gradient(90deg, #f59e0b, #b45309);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
   4. SUB-SCENES COMMON WRAPPER & AI MASTER DOJO (#scene-ai-dojo — Portrait)
   ============================================================================ */
.scene-inner-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scene-header-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: rgba(28, 19, 12, 0.96);
  border: 1.5px solid var(--border-gold);
  border-radius: 13px;
  padding: 9px 12px;
}

.scene-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold-bright);
  display: block;
}

.scene-header-banner h2 {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}

.scene-header-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.btn-back-lobby {
  padding: 7px 11px;
  border-radius: 9px;
  border: 1.5px solid var(--gold-bright);
  background: rgba(48, 33, 21, 0.95);
  color: var(--gold-bright);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 2x2 Master Grid in Portrait */
.dojo-masters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.dojo-master-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: rgba(30, 21, 14, 0.95);
  border: 1.5px solid rgba(226, 175, 66, 0.38);
  border-radius: 14px;
  padding: 10px 8px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.dojo-master-card.selected,
.dojo-master-card:hover {
  border-color: #fde047;
  background: rgba(52, 36, 22, 0.97);
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.3);
}

.dojo-master-img {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--gold-bright);
  flex-shrink: 0;
}

.dojo-master-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.dojo-tier-pill {
  font-size: 0.68rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  background: #374151;
  color: #fff;
}

.dojo-tier-pill.beginner { background: #059669; }
.dojo-tier-pill.mid { background: #2563eb; }
.dojo-tier-pill.dan { background: #dc2626; }
.dojo-tier-pill.grandmaster { background: linear-gradient(90deg, #9333ea, #f59e0b); }

.dojo-master-info h4 {
  font-size: 0.92rem;
  font-weight: 900;
  color: #fff;
}

.dojo-master-info p {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.28;
}

.dojo-handicap-note {
  font-size: 0.68rem;
  font-weight: 800;
  color: #34d399;
}

.dojo-custom-box {
  background: rgba(26, 18, 11, 0.95);
  border: 1.5px solid var(--border-gold);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dojo-select-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dojo-select-row label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.senior-select-lg {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1.5px solid var(--border-gold);
  background: #140d08;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
}

.dojo-action-split {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.btn-grand-action {
  padding: 12px;
  border-radius: 12px;
  border: 2px solid #fff0a8;
  background: linear-gradient(180deg, #f59e0b, #b45309);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}

.btn-grand-action.secondary {
  background: linear-gradient(180deg, #0284c7, #0369a1);
  border-color: #7dd3fc;
  color: #fff;
}

/* ============================================================================
   5. SCENE: FULL-SCREEN MATCH ARENA (#scene-match — Portrait Edge-to-Edge)
   ============================================================================ */
#scene-match {
  justify-content: space-between;
  padding: 4px 6px;
  gap: 3px;
  background: radial-gradient(circle at 50% 45%, #2b1d12 0%, #0f0a06 100%);
}

/* VS Match Intro Curtain Overlay */
.vs-curtain-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: radial-gradient(circle at 50% 50%, rgba(45, 22, 10, 0.96), rgba(8, 5, 3, 0.98));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 18px;
  animation: vsCurtainIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vsCurtainIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

.vs-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(28, 18, 11, 0.95);
  border: 2px solid var(--gold-bright);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85);
}

.vs-card img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--gold-bright);
}

.vs-tier-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 3px;
}

.vs-tier-badge.cho {
  background: #0284c7;
}

.vs-meta h3 {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.vs-center-emblem {
  text-align: center;
}

.vs-spark-txt {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--gold-bright);
  letter-spacing: 0.25em;
}

.vs-center-emblem strong {
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(180deg, #fff, #fbbf24, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(239, 68, 68, 0.75));
}

.vs-center-emblem p {
  margin-top: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #34d399;
  color: #a7f3d0;
  font-size: 0.8rem;
  font-weight: 800;
}

/* Match Top HUD (Compact Portrait Bar) */
.match-top-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(24, 16, 10, 0.96);
  border: 1.5px solid var(--border-gold);
  border-radius: 11px;
  padding: 5px 8px;
  gap: 6px;
}

.match-player-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.match-avatar-box {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.match-avatar-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold-bright);
}

.plate-tier-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  padding: 0px 5px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  color: #fff;
  border: 1px solid #fff;
}

.plate-tier-badge.han { background: #dc2626; }
.plate-tier-badge.cho { background: #0284c7; }

.match-player-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plate-name-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plate-name-line strong {
  font-size: 0.78rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 102px;
}

.plate-form-tag {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(226, 175, 66, 0.2);
  color: var(--gold-bright);
  white-space: nowrap;
}

.captured-pieces-tray {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 18px;
  flex-wrap: wrap;
}

.captured-mini-piece {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 900;
  background: #f3d7a4;
  border: 1px solid #8c5828;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.captured-mini-piece.cho { color: #0b5ed7; }
.captured-mini-piece.han { color: #c91c1c; }

.match-center-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.turn-pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.turn-pill.cho-turn {
  background: linear-gradient(90deg, #0369a1, #0284c7);
  color: #fff;
  border: 1px solid #7dd3fc;
}

.turn-pill.han-turn {
  background: linear-gradient(90deg, #991b1b, #dc2626);
  color: #fff;
  border: 1px solid #fca5a5;
}

.match-sub-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.move-count-badge {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--gold-bright);
  white-space: nowrap;
}

.last-move-chip {
  font-size: 0.65rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.match-top-utility {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-match-util {
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(45, 30, 20, 0.92);
  color: var(--text-cream);
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* ★ Center Janggi Board Stage: Full-Bleed Portrait 9:10 Ratio ★ */
.match-board-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.board-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 9 / 10;
  border-radius: 12px;
  padding: 3px;
  background: linear-gradient(145deg, #6e471f, #2d1a0a);
  border: 2px solid var(--gold-main);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.88);
  display: flex;
  justify-content: center;
  align-items: center;
}

#janggi-board-canvas {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  display: block;
  cursor: pointer;
}

/* Check Alert Banner */
.check-alert-overlay {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: linear-gradient(90deg, rgba(153, 27, 27, 0.96), rgba(220, 38, 38, 0.98), rgba(153, 27, 27, 0.96));
  border: 2px solid #fef08a;
  color: #fff;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.75);
  pointer-events: none;
  white-space: nowrap;
}

/* Pre-Match 4-Formation Selector Overlay on Board */
.prematch-formation-overlay {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  z-index: 22;
}

.prematch-card {
  background: rgba(18, 12, 7, 0.95);
  border: 2px solid var(--gold-bright);
  border-radius: 14px;
  padding: 9px 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.92);
}

.prematch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  flex-wrap: wrap;
  gap: 5px;
}

.prematch-header strong {
  font-size: 0.78rem;
  color: var(--gold-bright);
}

.btn-formation-start {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid #fef08a;
  background: linear-gradient(180deg, #10b981, #047857);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.55);
  animation: pulseStartBtn 1.5s infinite alternate;
}

@keyframes pulseStartBtn {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

.prematch-btn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.formation-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 3px;
  border-radius: 8px;
  border: 1.5px solid rgba(226, 175, 66, 0.45);
  background: rgba(38, 26, 16, 0.92);
  color: var(--text-cream);
  cursor: pointer;
}

.formation-pick-btn strong {
  font-size: 0.74rem;
}

.formation-pick-btn small {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.formation-pick-btn.active {
  background: linear-gradient(180deg, #f59e0b, #b45309);
  color: #fff;
  border-color: #fef08a;
}

.formation-pick-btn.active small {
  color: #fffbeb;
}

/* Hunsu (훈수) Interactive Coaching Banner */
.hunsu-coaching-banner {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 97%;
  z-index: 28;
  background: rgba(16, 12, 8, 0.93);
  border: 2px solid #fbbf24;
  border-radius: 11px;
  padding: 5px 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.85);
}

.hunsu-coaching-banner.survival-alert {
  border-color: #f87171;
  background: rgba(38, 10, 10, 0.94);
}

.hunsu-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  gap: 5px;
}

.hunsu-head-btns {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hunsu-apply-btn {
  background: linear-gradient(180deg, #10b981, #059669);
  border: 1.5px solid #fef08a;
  color: #fff;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.hunsu-mode-badge {
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.25);
  color: #fde68a;
}

.hunsu-close-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 7px;
  padding: 2px 7px;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.hunsu-headline {
  font-size: 0.76rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 3px;
}

.hunsu-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.hunsu-step-box {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.hunsu-step-box.step1 {
  background: rgba(255, 255, 255, 0.12);
  border-left: 3px solid #fff;
  color: #fff;
}

.hunsu-step-box.step2 {
  background: rgba(16, 185, 129, 0.18);
  border-left: 3px solid #34d399;
  color: #d1fae5;
}

/* Vision Legend Pill — pointer-events: none */
.vision-legend-overlay {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 96%;
  z-index: 20;
  background: rgba(12, 8, 5, 0.82);
  border: 1px solid rgba(226, 175, 66, 0.55);
  border-radius: 999px;
  padding: 2px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 800;
  pointer-events: none;
}

.legend-secret {
  color: #fde047;
}

/* ★ Match Bottom HUD & Portrait 5-Skill Tactical Dock ★ */
.match-bottom-hud {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(24, 16, 10, 0.96);
  border: 1.5px solid var(--border-gold);
  border-radius: 12px;
  padding: 5px 8px;
}

.match-my-info-strip {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.my-plate-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.my-mini-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-bright);
  object-fit: cover;
}

.my-plate-left strong {
  font-size: 0.78rem;
  margin-left: 4px;
}

.handicap-chip {
  font-size: 0.66rem;
  font-weight: 800;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 195px;
}

/* ★ 5-Skill Tactical Dock in Portrait (Vertical Icon-Top, Label-Bottom Buttons) ★ */
.match-tactical-dock,
.match-tactical-dock.five-skills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.tactical-skill-btn,
.match-tactical-dock.five-skills .tactical-skill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 3px;
  border-radius: 10px;
  border: 1.5px solid rgba(226, 175, 66, 0.55);
  background: linear-gradient(180deg, #332215 0%, #1d130b 100%);
  color: var(--text-cream);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.tactical-skill-btn:hover {
  transform: translateY(-1px);
  border-color: #fde047;
}

.tactical-skill-btn.active {
  background: linear-gradient(180deg, #065f46 0%, #064e3b 100%);
  border-color: #34d399;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.55);
}

.skill-talisman-img,
.match-tactical-dock.five-skills .skill-talisman-img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid var(--gold-bright);
  flex-shrink: 0;
}

.skill-talisman-img.round {
  border-radius: 50%;
}

.skill-btn-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
}

.skill-title-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.skill-title-line strong,
.match-tactical-dock.five-skills .skill-title-line strong {
  font-size: 0.72rem;
  color: #fff;
  white-space: nowrap;
}

.skill-count-pill {
  padding: 0px 5px;
  border-radius: 999px;
  background: #f59e0b;
  color: #1c1003;
  font-size: 0.62rem;
  font-weight: 900;
}

.skill-count-pill.free {
  background: #10b981;
  color: #fff;
}

.skill-btn-copy small,
.match-tactical-dock.five-skills .skill-btn-copy small {
  font-size: 0.58rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Match Sub-Controls (5 Columns Portrait Row) */
.match-sub-controls,
.match-sub-controls.five-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.sub-ctrl-btn {
  padding: 5px 2px;
  border-radius: 7px;
  border: 1px solid rgba(226, 175, 66, 0.35);
  background: rgba(16, 11, 7, 0.9);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-ctrl-btn.highlight {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* Big Sticker Emote Speech Bubble */
.big-emote-bubble {
  position: absolute;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 2.5px solid #d97706;
  border-radius: 18px;
  padding: 6px 12px;
  color: #1f1204;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
  animation: emotePop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.opp-bubble {
  top: 44px;
  left: 10px;
}

.my-bubble {
  bottom: 38px;
  left: 10px;
}

.big-emote-bubble img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}

.big-emote-bubble strong {
  font-size: 1rem;
  font-weight: 900;
  color: #7c2d12;
}

@keyframes emotePop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* 12 HD Sticker Emote Drawer Modal */
.emote-drawer-modal {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  z-index: 50;
  background: rgba(22, 15, 9, 0.98);
  border: 2px solid var(--gold-bright);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.92);
}

.emote-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.emote-drawer-header strong {
  font-size: 0.84rem;
  color: var(--gold-bright);
}

.btn-drawer-close {
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-gold);
  background: #2b1d12;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.emote-sticker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.emote-card-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-radius: 11px;
  border: 1.5px solid rgba(226, 175, 66, 0.4);
  background: rgba(40, 27, 17, 0.92);
  color: #fff;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.emote-card-btn:hover {
  transform: scale(1.03);
  border-color: var(--gold-bright);
}

.emote-card-btn img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid var(--gold-bright);
}

.emote-card-btn strong {
  font-size: 0.78rem;
  color: var(--gold-bright);
}

.emote-card-btn small {
  font-size: 0.66rem;
  color: var(--text-muted);
  text-align: center;
}

/* ============================================================================
   6. REVIEW LAB (#scene-review) & WIN-RATE TIMELINE CHART (Portrait 480px)
   ============================================================================ */
.review-lead-banner {
  background: rgba(34, 24, 15, 0.94);
  border-left: 3.5px solid var(--gold-bright);
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 0.8rem;
  line-height: 1.38;
  color: var(--text-cream);
}

.review-chart-card {
  background: rgba(20, 14, 9, 0.95);
  border: 1.5px solid var(--border-gold);
  border-radius: 13px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-card-header strong {
  font-size: 0.88rem;
  color: var(--gold-bright);
}

.chart-card-header span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

#review-winrate-canvas {
  width: 100%;
  height: 145px;
  background: #120c07;
  border-radius: 9px;
  border: 1px solid rgba(226, 175, 66, 0.3);
  cursor: pointer;
}

.turning-points-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.turning-point-card {
  background: rgba(32, 22, 14, 0.95);
  border: 1.5px solid rgba(226, 175, 66, 0.5);
  border-radius: 13px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.tp-badge {
  background: linear-gradient(90deg, #dc2626, #991b1b);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
}

.tp-winrate-drop {
  font-size: 0.78rem;
  font-weight: 900;
  color: #fca5a5;
}

.tp-moves-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.tp-move-box {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.tp-move-box.actual {
  background: rgba(153, 27, 27, 0.22);
  border: 1px solid rgba(248, 113, 113, 0.45);
}

.tp-move-box.best {
  background: rgba(6, 95, 70, 0.28);
  border: 1px solid rgba(52, 211, 153, 0.55);
}

.tp-coaching-comment {
  font-size: 0.8rem;
  color: var(--text-cream);
  line-height: 1.36;
}

.btn-jump-board {
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1.5px solid #fde047;
  background: linear-gradient(180deg, #f59e0b, #b45309);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.review-footer-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: rgba(20, 14, 9, 0.95);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.78rem;
  text-align: center;
}

.btn-gold-sm {
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #fde047;
  background: linear-gradient(90deg, #d97706, #92400e);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ============================================================================
   7. ROYAL SHOP & VIP PASS (#scene-shop — Portrait 2-Column Catalog)
   ============================================================================ */
.vip-royal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(62, 39, 14, 0.96), rgba(28, 17, 7, 0.98));
  border: 2px solid #fde047;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.25);
}

.vip-royal-illust img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2.5px solid #fde047;
  object-fit: cover;
}

.vip-royal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.vip-crown-tag {
  background: #f59e0b;
  color: #1c1003;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vip-royal-body h3 {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
}

.vip-perk-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.76rem;
  color: #fef3c7;
  text-align: left;
  width: 100%;
}

.btn-vip-subscribe {
  width: 100%;
  margin-top: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #fff;
  background: linear-gradient(90deg, #eab308, #ca8a04);
  color: #1c1003;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
}

/* ★ 2-Column Portrait Grid for 6 Tactical Shop Items ★ */
.shop-items-grid,
.shop-items-grid.three-cols,
.shop-items-grid.four-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.shop-item-card {
  background: rgba(28, 19, 12, 0.96);
  border: 1.5px solid var(--border-gold);
  border-radius: 13px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.shop-item-card.highlight-shield {
  border-color: #38bdf8;
  background: linear-gradient(180deg, rgba(12, 34, 58, 0.95), rgba(15, 23, 42, 0.95));
}

.shop-item-img {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  object-fit: cover;
  border: 1.5px solid var(--gold-bright);
  align-self: center;
}

.shop-item-info h4 {
  font-size: 0.84rem;
  color: #fff;
  margin-bottom: 3px;
  line-height: 1.25;
}

.shop-item-info p {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.btn-shop-buy {
  padding: 8px 6px;
  border-radius: 9px;
  border: 1.5px solid var(--gold-bright);
  background: linear-gradient(180deg, #3b2614, #1f140a);
  color: var(--gold-bright);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-shop-buy.gold {
  background: linear-gradient(180deg, #059669, #065f46);
  color: #fff;
  border-color: #6ee7b7;
}

/* ============================================================================
   8. PERSISTENT 7-TAB BOTTOM NAVIGATION DOCK (#global-hub-dock — Portrait)
   ============================================================================ */
.hub-bottom-dock {
  position: relative;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(180deg, #22170f 0%, #120b07 100%);
  border-top: 1.5px solid var(--border-gold);
  padding: 5px 3px;
  gap: 2px;
}

.dock-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dock-tab-btn strong {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.dock-tab-btn.active {
  background: linear-gradient(180deg, rgba(226, 175, 66, 0.28), rgba(146, 64, 14, 0.35));
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

/* ============================================================================
   9. VICTORY & DEFEAT ILLUSTRATED BANNER MODAL (#match-result-modal)
   ============================================================================ */
.match-result-modal {
  position: absolute;
  inset: 0;
  z-index: 75;
  background: rgba(6, 4, 2, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  animation: sceneFadeIn 0.28s ease-out;
}

.result-modal-card {
  width: 100%;
  background: linear-gradient(180deg, #25180f 0%, #130c07 100%);
  border: 2.5px solid var(--gold-bright);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(226, 175, 66, 0.35);
}

.result-banner-art-wrap {
  position: relative;
  width: 100%;
  height: 185px;
  overflow: hidden;
  border-bottom: 2px solid var(--gold-bright);
}

.result-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.result-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 5, 3, 0.15) 0%,
    rgba(10, 6, 3, 0.65) 62%,
    rgba(18, 11, 6, 0.98) 100%
  );
}

.result-banner-titles {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  text-align: center;
}

.result-kicker-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(153, 27, 27, 0.92);
  border: 1.5px solid #fef08a;
  color: #fef08a;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.result-kicker-badge.victory {
  background: linear-gradient(90deg, #d97706, #b45309);
  color: #fff;
}

.result-banner-titles h2 {
  font-size: 1.18rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 14px #000;
}

.result-modal-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-detail-desc {
  font-size: 0.84rem;
  color: var(--text-cream);
  text-align: center;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.42);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(226, 175, 66, 0.3);
}

.btn-result-review-cta {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid #fef08a;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 55%, #7f1d1d 100%);
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.55);
  transition: transform 0.15s ease;
}

.btn-result-review-cta:hover {
  transform: translateY(-1px);
}

.review-cta-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.review-cta-tag {
  align-self: flex-start;
  background: #fef08a;
  color: #7f1d1d;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.review-cta-left strong {
  font-size: 0.96rem;
  font-weight: 900;
  color: #fff;
}

.review-cta-left small {
  font-size: 0.74rem;
  color: #fecaca;
}

.result-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-result-sub {
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border-gold);
  background: rgba(40, 27, 17, 0.95);
  color: var(--gold-bright);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ============================================================================
   10. REAL-TIME MATERIAL BALANCE GAUGE & CRISIS DETECTION SHIELD BAR
   ============================================================================ */
.material-balance-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  padding: 2px 10px;
  background: rgba(16, 11, 7, 0.92);
  border: 1px solid rgba(226, 175, 66, 0.35);
  border-radius: 999px;
}

.mat-side-txt {
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.mat-side-txt.cho { color: #38bdf8; }
.mat-side-txt.han { color: #f87171; }

.mat-gauge-track {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #991b1b, #dc2626);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.mat-gauge-cho-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width 0.3s ease;
}

/* Crisis Guard Config Bar in Match Bottom HUD (Compact Portrait) */
.crisis-guard-config-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(90deg, rgba(10, 28, 48, 0.95), rgba(18, 22, 32, 0.95));
  border: 1.5px solid rgba(56, 189, 248, 0.65);
  border-radius: 10px;
  padding: 4px 7px;
}

.crisis-guard-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.guard-bar-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #38bdf8;
  object-fit: cover;
  flex-shrink: 0;
}

.guard-bar-title {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
}

.guard-bar-title strong {
  font-size: 0.72rem;
  color: #e0f2fe;
}

.guard-bar-title small {
  font-size: 0.62rem;
  color: #7dd3fc;
}

.guard-status-sub {
  font-size: 0.65rem;
  color: #bae6fd;
}

.crisis-guard-toggles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  width: 100%;
}

.guard-piece-toggle {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.85);
  color: #94a3b8;
  font-size: 0.68rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.guard-piece-toggle .gp-hanja {
  font-weight: 900;
  font-size: 0.76rem;
}

.guard-piece-toggle.active {
  background: linear-gradient(180deg, #0284c7, #0369a1);
  border-color: #7dd3fc;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}

.btn-refill-shield {
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid #fde047;
  background: linear-gradient(180deg, #d97706, #92400e);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

/* Crisis Intervention Slim Top Ribbon (#crisis-intervention-card) */
.crisis-slim-ribbon {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  z-index: 42;
  background: linear-gradient(180deg, rgba(12, 26, 46, 0.96), rgba(8, 15, 28, 0.97));
  border: 2px solid #38bdf8;
  border-radius: 12px;
  padding: 6px 9px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.88), 0 0 18px rgba(56, 189, 248, 0.45);
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: emotePop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.crisis-ribbon-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.crisis-mini-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1.5px solid #fde047;
  flex-shrink: 0;
}

.crisis-ribbon-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.crisis-ribbon-top-line {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.crisis-badge-txt {
  font-size: 0.7rem;
  font-weight: 900;
  color: #7dd3fc;
}

.crisis-rem-pill {
  padding: 1px 6px;
  border-radius: 999px;
  background: #0284c7;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
}

.crisis-headline-txt {
  font-size: 0.78rem;
  font-weight: 900;
  color: #fef08a;
  line-height: 1.25;
  margin: 0;
}

.crisis-detail-txt {
  display: none;
}

.crisis-action-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.7fr;
  gap: 5px;
}

.btn-crisis-safe {
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid #fde047;
  background: linear-gradient(180deg, #059669, #047857);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
}

.btn-crisis-cancel {
  padding: 5px 6px;
  border-radius: 8px;
  border: 1.5px solid #7dd3fc;
  background: rgba(30, 58, 138, 0.85);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-crisis-ignore {
  padding: 5px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(30, 41, 59, 0.75);
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

/* Special Mode Banner inside #board-frame */
.special-mode-banner {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(88, 28, 135, 0.94), rgba(30, 27, 75, 0.94));
  border: 1.5px solid #f0abfc;
  border-radius: 999px;
  padding: 4px 12px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75);
}

.btn-special-exit {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #f0abfc;
  background: rgba(0, 0, 0, 0.45);
  color: #fde047;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================================
   11. ENDGAME PUZZLES SCENE (#scene-puzzles — Portrait Vertical Card List)
   ============================================================================ */
.puzzle-stages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.puzzle-stage-card {
  background: linear-gradient(135deg, rgba(35, 24, 15, 0.96), rgba(18, 12, 7, 0.98));
  border: 1.5px solid rgba(226, 175, 66, 0.55);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.puzzle-stage-card:hover {
  transform: translateY(-1px);
  border-color: #fde047;
}

.puzzle-stage-card.cleared {
  border-color: #34d399;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.45), rgba(18, 12, 7, 0.98));
}

.puzzle-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.puzzle-stage-num {
  padding: 2px 9px;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
}

.puzzle-stars {
  color: #fde047;
  font-size: 0.84rem;
  letter-spacing: 1px;
}

.puzzle-stage-card h3 {
  font-size: 1rem;
  color: #fff;
  font-weight: 900;
}

.puzzle-stage-card p {
  font-size: 0.78rem;
  color: var(--text-cream);
  line-height: 1.35;
}

.puzzle-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.74rem;
  color: #fde68a;
  background: rgba(0, 0, 0, 0.38);
  padding: 5px 9px;
  border-radius: 8px;
}

.btn-play-puzzle {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #fde047;
  background: linear-gradient(180deg, #d97706, #92400e);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ============================================================================
   12. GRANDMASTER RANKING & 9-DAN LIVE SPECTATOR (#scene-ranking — Portrait)
   ============================================================================ */
.ranking-spectator-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(135deg, rgba(68, 16, 16, 0.95), rgba(28, 14, 10, 0.98));
  border: 2px solid #f87171;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
}

.spectator-live-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.live-red-pill {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  animation: pulseGlow 1.5s infinite alternate;
}

@keyframes pulseGlow {
  from { box-shadow: 0 0 5px #ef4444; }
  to { box-shadow: 0 0 14px #fca5a5; }
}

.spectator-live-info h3 {
  font-size: 0.96rem;
  color: #fff;
  font-weight: 900;
  line-height: 1.28;
}

.spectator-live-info p {
  font-size: 0.75rem;
  color: #fecaca;
  line-height: 1.32;
}

.spectator-hero-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.btn-spectate-now {
  padding: 9px 8px;
  border-radius: 9px;
  border: 1.5px solid #fef08a;
  background: linear-gradient(90deg, #dc2626, #991b1b);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.btn-eval-now {
  padding: 9px 8px;
  border-radius: 9px;
  border: 1.5px solid #7dd3fc;
  background: rgba(3, 105, 161, 0.88);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.ranking-tabs-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.rank-tab-btn {
  padding: 8px 8px;
  border-radius: 10px;
  border: 1.5px solid rgba(226, 175, 66, 0.45);
  background: rgba(24, 16, 10, 0.92);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.rank-tab-btn.active {
  background: linear-gradient(180deg, #d97706, #92400e);
  border-color: #fde047;
  color: #fff;
}

.ranking-list-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rank-row-card {
  display: grid;
  grid-template-columns: 38px 1.45fr 1fr;
  align-items: center;
  gap: 8px;
  background: rgba(26, 18, 11, 0.95);
  border: 1.5px solid rgba(226, 175, 66, 0.35);
  border-radius: 12px;
  padding: 8px 10px;
}

.rank-row-card .extra-stat {
  display: none;
}

.rank-row-card.top-three {
  border-color: #fde047;
  background: linear-gradient(90deg, rgba(66, 42, 14, 0.95), rgba(26, 18, 11, 0.95));
}

.rank-num-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b1d12;
  border: 1.5px solid var(--border-gold);
  font-size: 0.82rem;
  font-weight: 900;
  color: #fde047;
}

.rank-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rank-player-cell img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-bright);
  object-fit: cover;
  flex-shrink: 0;
}

.rank-player-cell strong {
  font-size: 0.84rem;
  color: #fff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-player-cell small {
  display: block;
  font-size: 0.68rem;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-stat-cell {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-cream);
  text-align: right;
  white-space: nowrap;
}

/* ============================================================================
   13. 3-TAB ROYAL SHOP & LUXURY WOOD BOARD / PIECE WORKSHOP (#scene-shop)
   ============================================================================ */
.shop-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.shop-tab-btn {
  padding: 9px 4px;
  border-radius: 10px;
  border: 1.5px solid rgba(226, 175, 66, 0.45);
  background: rgba(24, 16, 10, 0.92);
  color: var(--text-cream);
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.shop-tab-btn.active {
  background: linear-gradient(180deg, #eab308, #b45309);
  border-color: #fff;
  color: #1c1003;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.4);
}

.shop-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-tab-panel.hidden {
  display: none !important;
}

.shop-free-refill-strip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  background: rgba(6, 78, 59, 0.45);
  border: 1.5px solid #34d399;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #d1fae5;
  text-align: center;
}

.workshop-hero-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(48, 30, 14, 0.96), rgba(20, 12, 6, 0.98));
  border: 1.5px solid var(--gold-bright);
  border-radius: 14px;
  padding: 10px 12px;
}

.workshop-hero-img {
  width: 100%;
  height: 86px;
  border-radius: 10px;
  border: 1.5px solid #fde047;
  object-fit: cover;
  flex-shrink: 0;
}

.workshop-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.workshop-hero-copy h3 {
  font-size: 0.92rem;
  color: #fff;
  font-weight: 900;
  line-height: 1.28;
}

.workshop-hero-copy p {
  font-size: 0.72rem;
  color: var(--text-cream);
  line-height: 1.32;
}

/* ★ 2-Column Portrait Catalog Grid for Boards & Pieces ★ */
.skins-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.skin-merch-card {
  background: rgba(26, 17, 10, 0.96);
  border: 1.5px solid rgba(226, 175, 66, 0.45);
  border-radius: 13px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.skin-merch-card.equipped {
  border-color: #34d399;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.32);
}

.skin-preview-box {
  position: relative;
  height: 92px;
  border-radius: 9px;
  overflow: hidden;
  border: 1.5px solid rgba(226, 175, 66, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skin-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skin-prestige-tag {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.92);
  border: 1px solid #f9a8d4;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.skin-rarity-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #fde047;
  color: #fde047;
  font-size: 0.64rem;
  font-weight: 900;
}

/* Live 3D Piece Token Dual Preview inside Piece Skin Card */
.piece-dual-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #3a2414 0%, #160d07 100%);
}

.piece-sample-octagon {
  width: 56px;
  height: 56px;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Batang", "Nanum Myeongjo", serif;
  font-size: 1.55rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 2.5px rgba(226, 175, 66, 0.85), 0 6px 14px rgba(0, 0, 0, 0.75);
}

.skin-merch-info h4 {
  font-size: 0.84rem;
  color: #fff;
  font-weight: 900;
  margin-bottom: 2px;
  line-height: 1.25;
}

.skin-merch-origin {
  display: block;
  font-size: 0.68rem;
  color: #fde047;
  font-weight: 800;
  margin-bottom: 3px;
}

.skin-merch-info p {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.btn-skin-action {
  padding: 8px 6px;
  border-radius: 9px;
  border: 1.5px solid #fde047;
  background: linear-gradient(180deg, #d97706, #92400e);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-skin-action.equipped {
  background: linear-gradient(180deg, #059669, #065f46);
  border-color: #6ee7b7;
}

/* ============================================================================
   12. 1:1 ONLINE FRIEND INVITE & SERVER MATCHMAKING LOUNGE (#pvp-lounge-modal)
   ============================================================================ */
.pvp-lounge-modal {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(6, 4, 2, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  animation: sceneFadeIn 0.22s ease-out;
}

.pvp-lounge-card {
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #25180f 0%, #120b07 100%);
  border: 2.5px solid var(--gold-bright);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 24px rgba(226, 175, 66, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pvp-lounge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(226, 175, 66, 0.3);
}

.pvp-lounge-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pvp-lounge-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.pvp-lounge-title-wrap h3 {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
}

.pvp-lounge-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pvp-profile-setup-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(226, 175, 66, 0.35);
  border-radius: 12px;
  padding: 10px;
}

.pvp-input-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pvp-input-col label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-bright);
}

.pvp-text-input,
.pvp-select-input {
  width: 100%;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1.5px solid rgba(226, 175, 66, 0.55);
  background: #140d08;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
}

.pvp-friend-room-box {
  background: rgba(20, 14, 9, 0.92);
  border: 1.5px solid rgba(226, 175, 66, 0.5);
  border-radius: 14px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pvp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.pvp-section-head strong {
  font-size: 0.86rem;
  color: #fde047;
}

.pvp-live-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid #34d399;
  color: #6ee7b7;
  font-size: 0.7rem;
  font-weight: 900;
}

.pvp-room-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-pvp-create {
  width: 100%;
  padding: 11px 12px;
  border-radius: 11px;
  border: 2px solid #fef08a;
  background: linear-gradient(180deg, #d97706, #92400e);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
}

.pvp-join-code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.pvp-code-input {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #38bdf8;
  background: #0c1726;
  color: #fef08a;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
}

.btn-pvp-join {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1.5px solid #7dd3fc;
  background: linear-gradient(180deg, #0284c7, #0369a1);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
}

.pvp-created-room-banner {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.72), rgba(15, 23, 42, 0.95));
  border: 2px solid #34d399;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.created-room-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.created-room-label {
  font-size: 0.74rem;
  color: #a7f3d0;
  font-weight: 800;
}

.created-room-code {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #fef08a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.created-room-status {
  font-size: 0.76rem;
  color: #e0f2fe;
  line-height: 1.35;
}

.created-room-btn-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 6px;
  margin-top: 2px;
}

.btn-pvp-share {
  padding: 8px 10px;
  border-radius: 9px;
  border: 1.5px solid #fef08a;
  background: linear-gradient(180deg, #10b981, #047857);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.btn-pvp-cancel {
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(30, 41, 59, 0.85);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.pvp-open-rooms-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.open-rooms-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-muted);
}

.pvp-open-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 135px;
  overflow-y: auto;
}

.open-room-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(56, 189, 248, 0.55);
  background: rgba(12, 26, 46, 0.88);
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.open-room-item:hover {
  border-color: #fde047;
  transform: translateY(-1px);
}

.open-room-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.open-room-meta strong {
  font-size: 0.84rem;
  color: #fef08a;
}

.open-room-meta small {
  font-size: 0.72rem;
  color: #bae6fd;
}

.open-room-join-tag {
  padding: 5px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #059669, #047857);
  border: 1px solid #a7f3d0;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.open-room-empty {
  padding: 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.35;
}

.pvp-quick-match-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-pvp-quick {
  width: 100%;
  padding: 11px 12px;
  border-radius: 11px;
  border: 2px solid #7dd3fc;
  background: linear-gradient(180deg, #0369a1, #1e3a8a);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pvp-server-url-info {
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed rgba(226, 175, 66, 0.45);
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.38;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pvp-url-copy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 7px;
  border-radius: 6px;
}

.pvp-url-copy-row code {
  color: #fde047;
  font-weight: 800;
  font-size: 0.72rem;
  word-break: break-all;
}

.btn-copy-url-mini {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--gold-bright);
  background: #2b1d12;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================================
   UNMISSABLE 1:1 FRIEND INVITE BUTTONS (Title / Header / Lobby 1st Row / Match)
   ============================================================================ */
.btn-title-invite-direct {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #86efac;
  background: linear-gradient(180deg, #15803d, #14532d);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.5);
}

.btn-header-invite-pill {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1.5px solid #86efac;
  background: linear-gradient(180deg, #16a34a, #14532d);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.45);
}

.lobby-invite-hero-bar {
  background: linear-gradient(135deg, rgba(6, 48, 28, 0.96), rgba(14, 30, 22, 0.98));
  border: 2px solid #4ade80;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}

.invite-hero-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #dcfce7;
}

.invite-live-dot {
  background: #ef4444;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.invite-hero-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
}

.btn-invite-hero-primary {
  padding: 11px 10px;
  border-radius: 10px;
  border: 2px solid #fde047;
  background: linear-gradient(180deg, #16a34a, #15803d);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn-invite-hero-secondary {
  padding: 11px 8px;
  border-radius: 10px;
  border: 1.5px solid #93c5fd;
  background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-match-invite {
  border-color: #4ade80 !important;
  background: linear-gradient(180deg, #15803d, #14532d) !important;
  color: #fff !important;
}