/**
 * Game-area background themes (local player only).
 * Default "azure" base styles live in index.html on .game-area.
 */

/* ── Одеса (класичний вигляд) ── */
.game-area[data-game-bg="odesa"] .game-area-theme-layer {
  background-color: #160c14;
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent 0 11px,
      rgba(212, 175, 55, 0.14) 11px 13px,
      transparent 13px 24px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent 0 11px,
      rgba(196, 77, 92, 0.12) 11px 13px,
      transparent 13px 24px
    ),
    radial-gradient(ellipse 90% 70% at 10% 100%, rgba(179, 58, 74, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 75% 55% at 95% 5%, rgba(212, 175, 55, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(22, 12, 20, 0.5) 0%, transparent 65%);
}

.game-area[data-game-bg="odesa"] .game-area-theme-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke-width='1.1'%3E%3Cpath stroke='%23e8c547' stroke-opacity='0.5' d='M32 4 L60 32 32 60 4 32 Z'/%3E%3Cpath stroke='%23e8c547' stroke-opacity='0.22' d='M32 14 L50 32 32 50 14 32 Z'/%3E%3Cpath stroke='%23d64d5f' stroke-opacity='0.4' d='M32 0v64M0 32h64'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
}

.game-area[data-game-bg="odesa"] .game-area-theme-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 88% 78% at 50% 50%, transparent 0%, rgba(10, 5, 12, 0.42) 72%, rgba(10, 5, 12, 0.58) 100%);
}

.game-area[data-game-bg="odesa"] .bg-decor-cat {
  display: block;
}

.game-area[data-game-bg="odesa"]::before {
  background: linear-gradient(
    180deg,
    rgba(232, 197, 71, 0.9) 0%,
    rgba(196, 77, 92, 0.75) 38%,
    rgba(232, 197, 71, 0.55) 68%,
    rgba(160, 50, 70, 0.85) 100%
  );
  box-shadow: 2px 0 14px rgba(232, 197, 71, 0.15);
}

.game-area[data-game-bg="odesa"] .board-wrapper {
  padding: 0;
  background: linear-gradient(
    145deg,
    rgba(232, 197, 71, 0.55) 0%,
    rgba(196, 77, 92, 0.28) 42%,
    rgba(232, 197, 71, 0.2) 72%,
    rgba(120, 40, 58, 0.35) 100%
  );
  box-shadow:
    0 0 48px rgba(232, 197, 71, 0.14),
    0 28px 90px rgba(0, 0, 0, 0.72);
}

.game-area[data-game-bg="odesa"] .board {
  background: #1a1218;
}

.game-area[data-game-bg="odesa"] .board-center {
  background:
    radial-gradient(ellipse 95% 75% at 20% 90%, rgba(196, 77, 92, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 85% 65% at 85% 12%, rgba(232, 197, 71, 0.14) 0%, transparent 52%),
    linear-gradient(168deg, #1c1218 0%, #0e090e 48%, #16101a 100%);
}

.game-area[data-game-bg="odesa"] .board-center::before {
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent 0 9px,
      rgba(232, 197, 71, 0.07) 9px 10px,
      transparent 10px 18px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent 0 9px,
      rgba(196, 77, 92, 0.06) 9px 10px,
      transparent 10px 18px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath stroke='%23e8c547' stroke-opacity='0.35' d='M24 3 L45 24 24 45 3 24 Z'/%3E%3Cpath stroke='%23d64d5f' stroke-opacity='0.28' d='M24 0v48M0 24h48'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, 48px 48px;
}

.game-area[data-game-bg="odesa"] .board-center::after {
  background: radial-gradient(ellipse 95% 90% at 50% 45%, transparent 0%, rgba(6, 3, 8, 0.42) 100%);
}

.game-area[data-game-bg="odesa"] .bc-logo {
  border-bottom-color: rgba(232, 197, 71, 0.22);
}

.game-area[data-game-bg="odesa"] .bc-title {
  background: linear-gradient(135deg, #f4d56a 20%, #e8a43a 55%, #f0c040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(232, 197, 71, 0.15));
}

.game-area[data-game-bg="odesa"] .bc-sub {
  color: rgba(232, 197, 71, 0.55);
}

.game-area[data-game-bg="odesa"] .game-session-clock {
  background: linear-gradient(150deg, rgba(38, 26, 34, 0.96), rgba(22, 14, 20, 0.98));
  border-color: rgba(232, 197, 71, 0.32);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(232, 197, 71, 0.14);
}

.game-area[data-game-bg="odesa"] .game-session-clock__label {
  color: rgba(232, 197, 71, 0.72);
}

.game-area[data-game-bg="odesa"] .game-session-clock__value {
  color: #f4e8c8;
}

.game-area[data-game-bg="odesa"] .dice-res-num {
  background: linear-gradient(135deg, #f0c040, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-area[data-game-bg="odesa"] .roll-btn {
  background: linear-gradient(135deg, #6b2a3d 0%, #421825 50%, #2a1018 100%);
  border-color: rgba(232, 197, 71, 0.38);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(196, 77, 92, 0.25);
}

.game-area[data-game-bg="odesa"] .turn-indicator.my-turn {
  color: #fcefb8;
  background: rgba(232, 197, 71, 0.12);
  border-color: rgba(232, 197, 71, 0.35);
}

.game-area[data-game-bg="odesa"] .double-badge {
  color: #f0c040;
}

.game-area[data-game-bg="odesa"] .log-header {
  color: rgba(232, 197, 71, 0.75);
  border-bottom-color: rgba(232, 197, 71, 0.18);
}

.game-area[data-game-bg="odesa"] .game-log::-webkit-scrollbar-thumb {
  background: rgba(232, 197, 71, 0.22);
}

.game-area[data-game-bg="odesa"] .log-land {
  color: #a7c4ae;
  border-color: #3d6045;
}

.game-area[data-game-bg="odesa"] .log-system {
  color: rgba(200, 180, 160, 0.88);
  border-color: rgba(232, 197, 71, 0.22);
}

/* ── Харків: зелений лісовий стиль ── */
.game-area[data-game-bg="kharkiv"] {
  overflow: visible;
}

.game-area[data-game-bg="kharkiv"] .board-viewport {
  overflow: hidden;
}

.game-area[data-game-bg="kharkiv"] .game-area-theme-layer {
  background-color: #071510;
  background-image:
    repeating-linear-gradient(
      118deg,
      transparent 0 16px,
      rgba(34, 197, 94, 0.07) 16px 17px,
      transparent 17px 34px
    ),
    radial-gradient(ellipse 80% 60% at 8% 100%, rgba(22, 163, 74, 0.32) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 95% 8%, rgba(52, 211, 153, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(4, 12, 8, 0.7) 0%, transparent 70%);
}

.game-area[data-game-bg="kharkiv"] .game-area-theme-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image: radial-gradient(circle, rgba(74, 222, 128, 0.12) 1px, transparent 1px);
  background-size: 20px 20px;
}

.game-area[data-game-bg="kharkiv"] .game-area-theme-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 78% at 50% 50%, transparent 0%, rgba(4, 10, 7, 0.52) 100%);
}

.game-area[data-game-bg="kharkiv"] .bg-decor-kharkiv {
  display: block;
}

.game-area[data-game-bg="kharkiv"]::before {
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.9) 0%,
    rgba(22, 163, 74, 0.78) 45%,
    rgba(21, 128, 61, 0.88) 100%
  );
  box-shadow: 2px 0 16px rgba(34, 197, 94, 0.22);
}

.game-area[data-game-bg="kharkiv"] .board-wrapper {
  padding: 0;
  background: linear-gradient(
    145deg,
    rgba(34, 197, 94, 0.5) 0%,
    rgba(22, 163, 74, 0.32) 40%,
    rgba(20, 83, 45, 0.42) 75%,
    rgba(10, 28, 18, 0.55) 100%
  );
  box-shadow:
    0 0 48px rgba(34, 197, 94, 0.16),
    0 28px 90px rgba(0, 0, 0, 0.75);
}

.game-area[data-game-bg="kharkiv"] .board {
  background: #0f2418;
  border-radius: 14px;
}

.game-area[data-game-bg="kharkiv"] .board-center {
  background:
    radial-gradient(ellipse 90% 70% at 14% 88%, rgba(34, 197, 94, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 75% 55% at 90% 10%, rgba(52, 211, 153, 0.12) 0%, transparent 50%),
    linear-gradient(168deg, #122a1c 0%, #071510 48%, #0e1f14 100%);
}

.game-area[data-game-bg="kharkiv"] .board-center::before {
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent 0 10px,
      rgba(74, 222, 128, 0.06) 10px 11px,
      transparent 11px 22px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent 0 10px,
      rgba(34, 197, 94, 0.05) 10px 11px,
      transparent 11px 22px
    );
}

.game-area[data-game-bg="kharkiv"] .board-center::after {
  background: radial-gradient(ellipse 95% 90% at 50% 45%, transparent 0%, rgba(4, 10, 7, 0.48) 100%);
}

.game-area[data-game-bg="kharkiv"] .bc-logo {
  border-bottom-color: rgba(74, 222, 128, 0.3);
}

.game-area[data-game-bg="kharkiv"] .bc-title {
  background: linear-gradient(135deg, #bbf7d0 10%, #4ade80 45%, #16a34a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.22));
}

.game-area[data-game-bg="kharkiv"] .bc-sub {
  color: rgba(134, 239, 172, 0.7);
}

.game-area[data-game-bg="kharkiv"] .game-session-clock {
  background: linear-gradient(150deg, rgba(18, 42, 28, 0.97), rgba(8, 22, 14, 0.99));
  border-color: rgba(74, 222, 128, 0.38);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(134, 239, 172, 0.12);
}

.game-area[data-game-bg="kharkiv"] .game-session-clock__label {
  color: rgba(134, 239, 172, 0.82);
}

.game-area[data-game-bg="kharkiv"] .game-session-clock__value {
  color: #ecfdf5;
}

.game-area[data-game-bg="kharkiv"] .dice-res-num {
  background: linear-gradient(135deg, #86efac, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-area[data-game-bg="kharkiv"] .dice-res-lbl,
.game-area[data-game-bg="kharkiv"] .dice-step-info {
  color: rgba(187, 247, 208, 0.9);
}

.game-area[data-game-bg="kharkiv"] .roll-btn {
  background: linear-gradient(135deg, #166534 0%, #14532d 48%, #052e16 100%);
  border-color: rgba(74, 222, 128, 0.42);
  color: #ecfdf5;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(34, 197, 94, 0.28);
}

.game-area[data-game-bg="kharkiv"] .turn-indicator {
  color: rgba(187, 247, 208, 0.92);
}

.game-area[data-game-bg="kharkiv"] .turn-indicator.my-turn {
  color: #ecfdf5;
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(74, 222, 128, 0.4);
}

.game-area[data-game-bg="kharkiv"] .double-badge {
  color: #4ade80;
}

.game-area[data-game-bg="kharkiv"] .log-header {
  color: rgba(134, 239, 172, 0.85);
  border-bottom-color: rgba(34, 197, 94, 0.26);
}

.game-area[data-game-bg="kharkiv"] .game-log::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.32);
}

.game-area[data-game-bg="kharkiv"] .log-land {
  color: #a7d4b5;
  border-color: #166534;
}

.game-area[data-game-bg="kharkiv"] .log-system {
  color: rgba(190, 230, 200, 0.9);
  border-color: rgba(34, 197, 94, 0.22);
}

/* Картки гравців — колір фішки (--pc-color), не колір фону теми */
.game-area[data-game-bg="odesa"] .pc-card,
.game-area[data-game-bg="kharkiv"] .pc-card {
  background:
    radial-gradient(ellipse at 14% 0%, color-mix(in srgb, var(--pc-color, #64748b) 48%, transparent) 0%, transparent 72%),
    rgba(6, 8, 12, 0.58);
  border-color: color-mix(in srgb, var(--pc-color, #64748b) 58%, rgba(255, 255, 255, 0.1));
}

.game-area[data-game-bg="odesa"] .pc-card.is-turn,
.game-area[data-game-bg="kharkiv"] .pc-card.is-turn {
  border-color: color-mix(in srgb, var(--pc-color, #3d6045) 75%, rgba(255, 255, 255, 0.1));
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--pc-color, #3d6045) 52%, transparent) 0%, transparent 78%),
    rgba(6, 8, 12, 0.62);
}

.game-area[data-game-bg="odesa"] .pc-row-lbl,
.game-area[data-game-bg="kharkiv"] .pc-row-lbl {
  color: color-mix(in srgb, var(--pc-color, #94a3b8) 70%, #94a3b8);
}

.game-area[data-game-bg="odesa"] .pc-row-val,
.game-area[data-game-bg="kharkiv"] .pc-row-val {
  color: #e2e8f0;
}

.game-area[data-game-bg="odesa"] .pc-name,
.game-area[data-game-bg="kharkiv"] .pc-name {
  color: #f8fafc;
}

.game-area[data-game-bg="odesa"] .board {
  border-radius: 14px;
}

/* Превʼю в магазині / інвентарі */
.hub-shop-bg-thumb--kharkiv,
.hub-inv-bg-thumb--kharkiv {
  background: linear-gradient(135deg, #22c55e 0%, #14532d 50%, #071510 100%) !important;
}

.hub-shop-bg-thumb--azure,
.hub-inv-bg-thumb--azure {
  background: linear-gradient(135deg, #38bdf8 0%, #0f2744 55%, #14b8a6 100%) !important;
}