/* ==========================================================
   Chawwa Ashta (Digital Edition) - Styling & Themes
   Indian Royal Chaupar / Traditional Chowka Bhara Board
   ========================================================== */

:root {
  --wood-dark: #2c1a0e;
  --wood-mid: #4a2d18;
  --wood-light: #83522d;
  --parchment: #fdf8ed;
  --parchment-border: #d4bc91;
  --parchment-cell: #fffdf7;
  --gold-accent: #ffd700;
  --gold-glow: rgba(255, 215, 0, 0.6);
  --brass: #c59b27;
  
  --color-red: #d32f2f;
  --color-red-glow: rgba(211, 47, 47, 0.45);
  --color-green: #2e7d32;
  --color-green-glow: rgba(46, 125, 50, 0.45);
  --color-yellow: #f57f17;
  --color-yellow-glow: rgba(245, 127, 23, 0.45);
  --color-blue: #1565c0;
  --color-blue-glow: rgba(21, 101, 192, 0.45);

  --font-royal: 'Cinzel', 'Georgia', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  font-family: var(--font-ui);
  background: radial-gradient(circle at center, #2e1a10 0%, #170d08 100%);
  color: #f5eedc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ================= Top Header ================= */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(20, 10, 5, 0.88);
  border-bottom: 2px solid var(--brass);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  z-index: 50;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 26px;
  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.5));
}

.title-wrap h1 {
  font-family: var(--font-royal);
  font-size: 20px;
  letter-spacing: 1.5px;
  color: #f7e7ce;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.title-wrap .sub-title {
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Wallet Badge in Header */
.wallet-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #3e2714, #5c3818);
  border: 1.5px solid var(--gold-accent);
  border-radius: 20px;
  color: #ffd700;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
  transition: all 0.2s;
}

.wallet-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.6);
}

.wallet-add-btn {
  background: #ffd700;
  color: #2b1800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

.btn-icon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f5eedc;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--brass);
}

/* ================= Main Content Container ================= */
.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  position: relative;
}

/* Lobby Screen */
.lobby-screen {
  background: rgba(30, 16, 9, 0.95);
  border: 2px solid var(--brass);
  border-radius: 16px;
  padding: 26px;
  max-width: 580px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(212, 175, 55, 0.15);
  text-align: center;
}

.lobby-screen h2 {
  font-family: var(--font-royal);
  color: #f7e7ce;
  font-size: 26px;
  margin-bottom: 6px;
}

.lobby-screen .lobby-desc {
  font-size: 13px;
  color: #c9b391;
  margin-bottom: 20px;
}

.lobby-section {
  margin-bottom: 18px;
  text-align: left;
}

.lobby-section label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.choice-row {
  display: flex;
  gap: 10px;
}

.choice-btn {
  flex: 1;
  padding: 12px;
  background: rgba(50, 28, 15, 0.8);
  border: 1px solid #6b4324;
  border-radius: 10px;
  color: #e6dac6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.choice-btn span.icon {
  font-size: 20px;
}

.choice-btn:hover {
  background: rgba(85, 48, 25, 0.9);
  border-color: var(--brass);
}

.choice-btn.active {
  background: linear-gradient(135deg, #7a461b, #9e5b22);
  border-color: var(--gold-accent);
  color: #fff;
  box-shadow: 0 0 12px var(--gold-glow);
}

/* Bot Difficulty Levels Selector in 1v1 */
.bot-level-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bot-level-card {
  padding: 10px;
  background: rgba(45, 24, 12, 0.8);
  border: 1.5px solid #6b4324;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.bot-level-card:hover {
  border-color: var(--gold-accent);
  background: rgba(70, 38, 18, 0.9);
}

.bot-level-card.active {
  border-color: var(--gold-accent);
  background: linear-gradient(135deg, #613313, #8a4a1c);
  box-shadow: 0 0 10px var(--gold-glow);
}

.bot-level-card .b-title {
  font-weight: 700;
  font-size: 13px;
  color: #ffe6aa;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bot-level-card .b-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
}
.b-hardest { background: #d32f2f; color: #fff; }
.b-veteran { background: #f57f17; color: #fff; }
.b-warrior { background: #1976d2; color: #fff; }
.b-novice { background: #388e3c; color: #fff; }

.bot-level-card .b-desc {
  font-size: 11px;
  color: #c4ae8f;
  margin-top: 3px;
}

/* Color Choice Row in Lobby */
.color-choice-row {
  display: flex;
  gap: 10px;
}

.color-dot-btn {
  flex: 1;
  padding: 12px 10px;
  background: rgba(35, 18, 10, 0.9);
  border: 2px solid #5a3518;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  transition: all 0.25s ease;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.color-dot-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.color-swatch-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6), 0 3px 8px rgba(0, 0, 0, 0.6);
}

.color-swatch-circle.swatch-red {
  background: radial-gradient(circle at 35% 35%, #ff7979, #e53935 60%, #8e0000);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.7), 0 0 10px rgba(229, 57, 53, 0.8);
}
.color-swatch-circle.swatch-green {
  background: radial-gradient(circle at 35% 35%, #81c784, #2e7d32 60%, #004d40);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.7), 0 0 10px rgba(46, 125, 50, 0.8);
}
.color-swatch-circle.swatch-yellow {
  background: radial-gradient(circle at 35% 35%, #fff59d, #f57f17 60%, #b26a00);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.7), 0 0 10px rgba(245, 127, 23, 0.8);
}
.color-swatch-circle.swatch-blue {
  background: radial-gradient(circle at 35% 35%, #90caf9, #1565c0 60%, #0d47a1);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.7), 0 0 10px rgba(21, 101, 192, 0.8);
}

.color-check-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  background: #ffd700;
  color: #1a0f08;
  font-weight: 900;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px #ffd700;
}

.color-dot-btn.active .color-check-badge {
  display: flex;
}

.color-btn-red { background: linear-gradient(135deg, rgba(80, 20, 20, 0.9), rgba(50, 15, 15, 0.9)); border-color: rgba(229, 57, 53, 0.6); }
.color-btn-green { background: linear-gradient(135deg, rgba(20, 70, 30, 0.9), rgba(15, 45, 20, 0.9)); border-color: rgba(46, 125, 50, 0.6); }
.color-btn-yellow { background: linear-gradient(135deg, rgba(80, 60, 20, 0.9), rgba(50, 40, 15, 0.9)); border-color: rgba(245, 127, 23, 0.6); }
.color-btn-blue { background: linear-gradient(135deg, rgba(20, 50, 85, 0.9), rgba(15, 30, 60, 0.9)); border-color: rgba(21, 101, 192, 0.6); }

.color-btn-red.active { border-color: #ff5252 !important; box-shadow: 0 0 16px rgba(255, 82, 82, 0.8), inset 0 0 10px rgba(255, 82, 82, 0.3); }
.color-btn-green.active { border-color: #66bb6a !important; box-shadow: 0 0 16px rgba(102, 187, 106, 0.8), inset 0 0 10px rgba(102, 187, 106, 0.3); }
.color-btn-yellow.active { border-color: #ffd54f !important; box-shadow: 0 0 16px rgba(255, 213, 79, 0.8), inset 0 0 10px rgba(255, 213, 79, 0.3); }
.color-btn-blue.active { border-color: #42a5f5 !important; box-shadow: 0 0 16px rgba(66, 165, 245, 0.8), inset 0 0 10px rgba(66, 165, 245, 0.3); }

/* Quick Wallet Card in Lobby */
.lobby-wallet-card {
  background: linear-gradient(135deg, #3d2311, #5c3417);
  border: 1.5px solid var(--brass);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.lobby-wallet-info {
  text-align: left;
}
.lobby-wallet-info .w-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffebcc;
}
.lobby-wallet-info .w-sub {
  font-size: 11px;
  color: #ffd700;
}

.btn-open-wallet {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  border: 1px solid #fff2a3;
  color: #2b1800;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-open-wallet:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px var(--gold-glow);
}

.btn-start-game {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #b8860b, #d4af37, #b8860b);
  border: 2px solid #fff2a3;
  border-radius: 12px;
  color: #2b1800;
  font-size: 18px;
  font-family: var(--font-royal);
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
  transition: all 0.25s;
}

.btn-start-game:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.7);
}

/* ================= In-Game Play Area ================= */
.game-play-area {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
}

.game-sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.turn-banner {
  background: rgba(30, 16, 9, 0.9);
  border: 2px solid var(--brass);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.turn-banner .turn-tag {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 700;
}

.turn-banner .current-player-name {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-royal);
  margin-top: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.extra-turn-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff8f00, #ff6f00);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  margin-top: 6px;
  animation: pulse-glow 1s infinite alternate;
}

@keyframes pulse-glow {
  from { transform: scale(1); box-shadow: 0 0 6px #ff8f00; }
  to { transform: scale(1.05); box-shadow: 0 0 14px #ffab00; }
}

/* Players List */
.players-status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-status-card {
  background: rgba(35, 20, 12, 0.85);
  border: 1px solid #5a361c;
  border-left: 5px solid #888;
  border-radius: 10px;
  padding: 8px 12px;
  transition: all 0.25s;
}

.player-status-card.active-turn {
  background: rgba(55, 30, 18, 0.95);
  border-color: var(--brass);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
  transform: translateX(3px);
}

.player-status-card[style*="#1a1a1a"] {
  border-left-color: #cccccc !important;
  background: rgba(22, 22, 22, 0.95);
}
.player-status-card[style*="#1a1a1a"] .p-name span {
  color: #ffffff !important;
  text-shadow: 0 0 4px #aaa;
}

.p-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.p-name {
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tod-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.tod-pill.locked { background: rgba(255, 255, 255, 0.1); color: #bbb; }
.tod-pill.unlocked { background: rgba(76, 175, 80, 0.25); color: #81c784; border: 1px solid #4caf50; }

.p-pawn-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #c4ae8f;
}

/* Commentary Box */
.commentary-box {
  background: rgba(20, 10, 5, 0.85);
  border: 1px solid #54331a;
  border-radius: 10px;
  padding: 10px;
  height: 150px;
  display: flex;
  flex-direction: column;
}

.commentary-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  padding-bottom: 4px;
}

.commentary-feed {
  flex: 1;
  overflow-y: auto;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.commentary-feed::-webkit-scrollbar { width: 4px; }
.commentary-feed::-webkit-scrollbar-thumb { background: #6d4222; border-radius: 2px; }

.commentary-entry {
  line-height: 1.35;
  color: #dacfba;
  padding: 2px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.08);
}

/* ================= The 5x5 Board ================= */
.board-container-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 10px;
}

.board-outer-frame {
  background: linear-gradient(135deg, #442410 0%, #2b1509 50%, #442410 100%);
  border: 6px solid #633617;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.85), inset 0 0 15px rgba(0, 0, 0, 0.7);
  position: relative;
}

/* Corner inlays */
.corner-ornament {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--brass);
  pointer-events: none;
}
.corner-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.corner-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.corner-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* The 5x5 Grid */
.board-grid {
  display: grid;
  grid-template-columns: repeat(5, 78px);
  grid-template-rows: repeat(5, 78px);
  gap: 4px;
  background: #553119;
  padding: 4px;
  border-radius: 8px;
}

/* Cell */
.board-cell {
  background: var(--parchment-cell);
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  cursor: default;
  transition: all 0.2s;
  overflow: hidden;
}

.board-cell.cell-safe {
  background: #fbf0d9;
}

.safe-x-mark {
  position: absolute;
  width: 80%;
  height: 80%;
  pointer-events: none;
  opacity: 0.85;
}

.board-cell.cell-home {
  background: radial-gradient(circle, #ffe699 0%, #ecd07a 100%);
  box-shadow: inset 0 0 10px rgba(184, 134, 11, 0.4);
}

.home-mandala-icon {
  width: 85%;
  height: 85%;
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
}

/* Legal Move Target Highlight */
.board-cell.legal-target {
  box-shadow: inset 0 0 0 3px #ffb300, 0 0 14px rgba(255, 179, 0, 0.65);
  cursor: pointer;
  background: #fff8e1 !important;
  animation: cell-target-pulse 1.2s infinite alternate;
}

@keyframes cell-target-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}

/* Hint Target Square Highlight */
.board-cell.hint-target {
  box-shadow: inset 0 0 0 3px #00e5ff, 0 0 16px rgba(0, 229, 255, 0.85) !important;
  background: #e0f7fa !important;
  animation: cell-target-pulse 1s infinite alternate;
}

/* ================= Dynamic Pawn Clusters inside Cells ================= */
/* Prevents overflowing or glitching outside the cell! */
.board-cell .pawns-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 2px;
  padding: 3px;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 20;
}

.pawn-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pawn-goti {
  border-radius: 50%;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  transition: all 0.2s;
}

.pawn-goti::after {
  content: '';
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, rgba(255,255,255,0.2) 60%, transparent 100%);
  position: absolute;
  top: 15%;
  left: 15%;
}

/* ================= Goti (Pawn) Skins & Color Themes ================= */
/* 1. Green (Emerald) */
.pawn-container.skin-green .pawn-goti,
.skin-card-goti-orb.skin-green {
  background: radial-gradient(circle at 35% 35%, #66bb6a 0%, #2e7d32 60%, #1b5e20 100%) !important;
  border-color: #a5d6a7 !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

/* 2. Red (Ruby) */
.pawn-container.skin-red .pawn-goti,
.skin-card-goti-orb.skin-red {
  background: radial-gradient(circle at 35% 35%, #ef5350 0%, #c62828 60%, #8e0000 100%) !important;
  border-color: #ef9a9a !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

/* 3. Yellow (Topaz) */
.pawn-container.skin-yellow .pawn-goti,
.skin-card-goti-orb.skin-yellow {
  background: radial-gradient(circle at 35% 35%, #ffee58 0%, #f57f17 60%, #bc5100 100%) !important;
  border-color: #fff59d !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

/* 4. Blue (Sapphire) */
.pawn-container.skin-blue .pawn-goti,
.skin-card-goti-orb.skin-blue {
  background: radial-gradient(circle at 35% 35%, #42a5f5 0%, #1565c0 60%, #003c8f 100%) !important;
  border-color: #90caf9 !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

/* 5. Ivory Marble (Free) */
.pawn-container.skin-marble .pawn-goti,
.skin-card-goti-orb.skin-marble {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e0e0e0 60%, #9e9e9e 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.8);
}

/* 6. 1v1 Bot Exclusive: Pure Obsidian Black Gotis */
.pawn-container.skin-black .pawn-goti,
.pawn-black,
.pawn-goti.pawn-black,
.skin-card-goti-orb.skin-black {
  background: radial-gradient(circle at 35% 35%, #555555 0%, #1c1c1c 60%, #000000 100%) !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.95), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
}

/* 7. Royal Gold Goti (₹20, 24K Burnished Gold with crown aura) */
.pawn-container.skin-gold .pawn-goti,
.skin-card-goti-orb.skin-gold {
  background: radial-gradient(circle at 35% 35%, #fffde7 0%, #ffd700 35%, #d4af37 70%, #8c6b12 100%) !important;
  border-color: #fffde7 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.7) !important;
}

/* 8. Mystic Obsidian Goti (₹30, Iridescent black pearl & violet core) */
.pawn-container.skin-obsidian .pawn-goti,
.skin-card-goti-orb.skin-obsidian {
  background: radial-gradient(circle at 35% 35%, #7b1fa2 0%, #2a1538 40%, #10061c 85%, #050208 100%) !important;
  border-color: #ba68c8 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 12px rgba(186, 104, 200, 0.7) !important;
}

/* 9. Vedic Brass & Ruby Goti (₹40, Antique hammered brass with ruby star) */
.pawn-container.skin-ruby_brass .pawn-goti,
.skin-card-goti-orb.skin-ruby_brass {
  background: radial-gradient(circle at 35% 35%, #ff5252 0%, #c2185b 35%, #8d6e3f 65%, #4a3512 100%) !important;
  border-color: #ffd54f !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(233, 30, 99, 0.6) !important;
}

/* Formed Jugda Bound State */
.pawn-container.is-jugda-pawn .pawn-goti {
  border: 2.5px solid #ffd700 !important;
  box-shadow: 0 0 10px #ffd700, inset 0 0 6px rgba(255, 215, 0, 0.6) !important;
}

.pawn-container.is-jugda-pawn::before {
  content: '🔗';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 50%;
  padding: 1px;
  z-index: 25;
}

/* Action Button to Bind Jugda */
.btn-jugda-action {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #7b1fa2, #4a148c);
  border: 2px solid #ea80fc;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(234, 128, 252, 0.6);
  animation: pulse-jugda 1.5s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-jugda-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(234, 128, 252, 0.95);
}

@keyframes pulse-jugda {
  0%, 100% { box-shadow: 0 0 10px rgba(234, 128, 252, 0.4); }
  50% { box-shadow: 0 0 20px rgba(234, 128, 252, 0.9); }
}

/* Dynamic sizing depending on count in cell */
.pawns-cluster[data-count="1"] .pawn-container { width: 36px; height: 36px; }
.pawns-cluster[data-count="1"] .pawn-goti { width: 34px; height: 34px; }

.pawns-cluster[data-count="2"] .pawn-container { width: 28px; height: 28px; }
.pawns-cluster[data-count="2"] .pawn-goti { width: 26px; height: 26px; }

.pawns-cluster[data-count="3"] .pawn-container,
.pawns-cluster[data-count="4"] .pawn-container { width: 22px; height: 22px; }
.pawns-cluster[data-count="3"] .pawn-goti,
.pawns-cluster[data-count="4"] .pawn-goti { width: 20px; height: 20px; }

.pawns-cluster[data-count="5"] .pawn-container,
.pawns-cluster[data-count="6"] .pawn-container,
.pawns-cluster[data-count="7"] .pawn-container,
.pawns-cluster[data-count="8"] .pawn-container { width: 17px; height: 17px; }
.pawns-cluster[data-count="5"] .pawn-goti,
.pawns-cluster[data-count="6"] .pawn-goti,
.pawns-cluster[data-count="7"] .pawn-goti,
.pawns-cluster[data-count="8"] .pawn-goti { width: 16px; height: 16px; }

.pawns-cluster.cluster-huge .pawn-container { width: 13px; height: 13px; }
.pawns-cluster.cluster-huge .pawn-goti { width: 12px; height: 12px; border-width: 1px; }

/* Jugda Badge */
.jugda-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: linear-gradient(135deg, #ffd700, #ff8f00);
  color: #1a0f00;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
  pointer-events: none;
  z-index: 25;
}

/* Selectable Pawn (Pulsing Glow) */
.pawn-container.selectable .pawn-goti {
  animation: pawn-bounce-glow 0.8s infinite alternate;
  box-shadow: 0 0 0 3px #ffd700, 0 0 16px #ffea00;
  transform: scale(1.12);
}

@keyframes pawn-bounce-glow {
  from { transform: translateY(0) scale(1.08); }
  to { transform: translateY(-3px) scale(1.16); }
}

/* Hinted Pawn (Pulsing Cyan Glow) */
.pawn-container.hint-pawn .pawn-goti {
  animation: hint-pawn-glow 0.6s infinite alternate !important;
  box-shadow: 0 0 0 4px #00e5ff, 0 0 20px #00e5ff !important;
}

@keyframes hint-pawn-glow {
  from { transform: scale(1.15); }
  to { transform: scale(1.3); }
}

/* ================= Right Action Controls ================= */
.game-controls-tray {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kaudya-tray-card {
  background: rgba(30, 16, 9, 0.95);
  border: 2px solid var(--brass);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

.kaudya-tray-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.kaudya-board {
  background: radial-gradient(circle at center, #6b3e1c 0%, #3a1e0b 80%, #201005 100%);
  border: 3px solid #8d562b;
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 105px;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.7);
  perspective: 700px;
  margin-bottom: 12px;
}

.cowrie-wrapper {
  width: 42px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cowrie-3d-box {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.cowrie-3d-box.face-open { transform: rotateY(0deg); }
.cowrie-3d-box.face-closed { transform: rotateY(180deg); }

.cowrie-3d-box.tumble {
  animation: cowrie-tumble-spin 0.55s ease-out;
}

@keyframes cowrie-tumble-spin {
  0% { transform: translateY(-40px) scale(1.3) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  50% { transform: translateY(-60px) scale(1.4) rotateX(360deg) rotateY(540deg) rotateZ(180deg); }
  100% { transform: translateY(0) scale(1) rotateX(720deg) rotateY(720deg) rotateZ(360deg); }
}

.cowrie-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cowrie-face.front { transform: rotateY(0deg); }
.cowrie-face.back { transform: rotateY(180deg); }

.cowrie-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

.roll-result-badge {
  background: rgba(45, 25, 15, 0.9);
  border: 1px solid var(--brass);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roll-result-text {
  font-family: var(--font-royal);
  font-size: 15px;
  font-weight: 700;
  color: #ffd54f;
  letter-spacing: 1px;
}

.btn-roll-kaudya {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  border: 2px solid #fff2a3;
  border-radius: 12px;
  color: #2b1700;
  font-family: var(--font-royal);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-roll-kaudya:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

.btn-roll-kaudya:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Hint Button */
.btn-hint {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, #00838f, #006064);
  border: 1px solid #4dd0e1;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0, 131, 143, 0.4);
  transition: all 0.2s;
}

.btn-hint:hover:not(:disabled) {
  background: linear-gradient(135deg, #0097a7, #00838f);
  transform: translateY(-1px);
}

.btn-hint:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quick-controls {
  display: flex;
  gap: 8px;
}

.btn-secondary {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #f7e7ce;
  padding: 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--brass);
}

/* ================= Modals ================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 5, 2, 0.85);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: #1e1108;
  border: 2px solid var(--brass);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(212, 175, 55, 0.25);
  overflow: hidden;
  position: relative;
}

.modal-header {
  padding: 14px 18px;
  background: linear-gradient(135deg, #2b170c, #422312);
  border-bottom: 1px solid var(--brass);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-family: var(--font-royal);
  color: #ffd54f;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close-btn {
  background: none;
  border: none;
  color: #d1b894;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.modal-close-btn:hover { color: #fff; }

.modal-body {
  padding: 18px;
  max-height: 75vh;
  overflow-y: auto;
}

/* ================= Wallet & Store Styles ================= */
.wallet-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.wallet-tab-btn {
  flex: 1;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c9b494;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.wallet-tab-btn.active {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--brass);
  color: #ffd700;
}

.wallet-balance-banner {
  background: linear-gradient(135deg, #2d180a, #4a2912);
  border: 1.5px solid var(--brass);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  margin-bottom: 16px;
}

.wallet-balance-banner .bal-title {
  font-size: 11px;
  color: #c4ae8f;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.wallet-balance-banner .bal-amount {
  font-size: 30px;
  font-weight: 800;
  color: #ffd700;
  font-family: var(--font-royal);
  margin-top: 2px;
}

/* Themes Grid with GOLDEN STROKES on paid ones */
.themes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.theme-card {
  background: rgba(40, 20, 10, 0.85);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Paid theme with GOLDEN STROKE */
.theme-card.theme-paid-gold {
  border: 2px solid #ffd700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35), inset 0 0 10px rgba(255, 215, 0, 0.12);
}

.theme-card.theme-paid-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.6);
}

.theme-card.theme-free {
  border: 1px solid #7a4f27;
}

.theme-card.active-equipped {
  border-color: #66bb6a !important;
  box-shadow: 0 0 14px rgba(102, 187, 106, 0.5) !important;
}

.theme-preview-piece {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
}

.piece-mini-goti {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  border: 2px solid #fff;
}

.piece-mini-goti::after {
  content: '';
  width: 38%;
  height: 38%;
  border-radius: 50%;
  position: absolute;
  top: 15%;
  left: 15%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, rgba(255,255,255,0.3) 60%, transparent 100%);
}

/* Store preview designs */
.piece-mini-goti.goti-preview-classic {
  background: radial-gradient(circle at 40% 40%, #ff5252 0%, #b71c1c 90%);
  border-color: #ffd8d8;
}

.piece-mini-goti.goti-preview-gold {
  background: radial-gradient(circle at 35% 35%, #fffde7 0%, #ffd700 35%, #d4af37 70%, #8c6b12 100%);
  border-color: #fffde7;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}

.piece-mini-goti.goti-preview-obsidian {
  background: radial-gradient(circle at 35% 35%, #7b1fa2 0%, #2a1538 40%, #10061c 85%, #050208 100%);
  border-color: #ba68c8;
  box-shadow: 0 0 12px rgba(186, 104, 200, 0.8);
}

.piece-mini-goti.goti-preview-ruby_brass {
  background: radial-gradient(circle at 35% 35%, #ff5252 0%, #c2185b 35%, #8d6e3f 65%, #4a3512 100%);
  border-color: #ffd54f;
  box-shadow: 0 0 12px rgba(233, 30, 99, 0.7);
}

/* ================= Authentic Skin Dialogue Box (*Skin dialogue) ================= */
/* Styled exactly per reference image: dark rounded box, glowing white ring goti, label, crown icon */
.skin-dialogue-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.skin-card-box {
  position: relative;
  width: 110px;
  height: 98px;
  background: #0d2315; /* Dark forest emerald rounded box matching user image */
  border: 2px solid #23482d;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
}

.skin-card-box:hover {
  transform: translateY(-2px);
  border-color: #4caf50;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.skin-card-box.active-selected {
  border-color: #00e676 !important;
  background: #143521 !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.6) !important;
}

/* Center goti with glowing white circular ring */
.skin-card-goti-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.3);
}

.skin-card-goti-orb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.skin-card-goti-orb::after {
  content: '';
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100%);
  position: absolute;
  top: 15%;
  left: 15%;
}

.skin-card-label {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}

/* Golden Crown at bottom right corner for paid locked gotis */
.skin-card-crown {
  position: absolute;
  right: 7px;
  bottom: 5px;
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
  display: none;
}

.skin-card-box.is-paid-locked .skin-card-crown {
  display: block;
}

/* Black opaque overlay with 'Already equipped' for Pass & Play */
.skin-card-overlay-equipped {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  border-radius: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #ff5252;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  padding: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  cursor: not-allowed;
  backdrop-filter: blur(2px);
  box-sizing: border-box;
}

.skin-card-box.is-already-equipped .skin-card-overlay-equipped {
  display: flex;
}

/* Pass & Play Player Tabs */
.player-skin-tabs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.player-skin-tab-btn {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #d7ccc8;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.player-skin-tab-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffd700;
}

.player-skin-tab-btn.active {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  border-color: #00e676;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.player-tab-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.theme-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.theme-desc {
  font-size: 10px;
  color: #c4ae8f;
  line-height: 1.25;
}

.theme-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.badge-paid {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid #ffd700;
}

.badge-unlocked {
  background: rgba(102, 187, 106, 0.2);
  color: #81c784;
}

.badge-equipped {
  background: #2e7d32;
  color: #fff;
}

/* Buy Hints View */
.hints-store-box {
  background: rgba(30, 16, 9, 0.85);
  border: 1px solid #6b4324;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.hints-stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}

.btn-stepper {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--brass);
  color: #ffd700;
  font-size: 20px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper-value {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  min-width: 40px;
}

/* Staking Preview */
.stake-preview-card {
  background: linear-gradient(135deg, #2a1538, #180a22);
  border: 2px dashed #ab47bc;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.stake-badge-cs {
  display: inline-block;
  background: #9c27b0;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* Confirmation Dialog */
.confirm-purchase-box {
  text-align: center;
  padding: 10px;
}
.confirm-purchase-box p {
  font-size: 15px;
  color: #ffe6aa;
  margin-bottom: 20px;
  line-height: 1.5;
}
.confirm-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-confirm-pay {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  border: 1px solid #66bb6a;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.btn-confirm-pay:hover { background: linear-gradient(135deg, #388e3c, #2e7d32); }

.btn-confirm-cancel {
  background: linear-gradient(135deg, #c62828, #b71c1c);
  border: 1px solid #ef5350;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.btn-confirm-cancel:hover { background: linear-gradient(135deg, #d32f2f, #c62828); }

/* Victory Screen */
.victory-card { text-align: center; padding: 24px 16px; }
.victory-trophy { font-size: 60px; margin-bottom: 10px; }
.victory-title { font-family: var(--font-royal); font-size: 26px; color: #ffd54f; margin-bottom: 6px; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .game-play-area { flex-direction: column; align-items: center; }
  .game-sidebar, .game-controls-tray { width: 100%; max-width: 440px; }
  .board-grid { grid-template-columns: repeat(5, 66px); grid-template-rows: repeat(5, 66px); }
}

@media (max-width: 480px) {
  .board-grid { grid-template-columns: repeat(5, 56px); grid-template-rows: repeat(5, 56px); }
  .title-wrap h1 { font-size: 16px; }
  .btn-icon span.text { display: none; }
}