/* Phase 6C-2: ChessVora pixel game shell rebuild */
:root {
  --font-pixel-ui: 'Pixelify Sans', 'Fredoka', system-ui, sans-serif;
  --font-pixel-display: 'Press Start 2P', 'Pixelify Sans', monospace;
  --font-readable: 'Nunito', 'Fredoka', system-ui, sans-serif;
  --cv-shell-bg: #171614;
  --cv-shell-2: #201f1b;
  --cv-panel: #25231f;
  --cv-panel-2: #2f2d27;
  --cv-line: #3c372c;
  --cv-cream: #fff4cf;
  --cv-muted: #b8b1a0;
  --cv-green: #78b84f;
  --cv-green-2: #5a9a38;
  --cv-gold: #efc45a;
  --cv-red: #e05c5c;
  --cv-sidebar-w: 216px;
  --cv-right-w: clamp(380px, 28vw, 430px);
  --cv-board-gutter: 28px;
  --cv-board-shell-size: min(
    calc(100dvh - 176px),
    calc(100vw - var(--cv-sidebar-w) - var(--cv-right-w) - 92px),
    788px
  );
  --cv-pixel-shadow: 0 5px 0 #0f0e0c, 0 12px 24px rgba(0, 0, 0, 0.32);
  --font: var(--font-pixel-ui);
  --game-font: var(--font-pixel-ui);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: var(--cv-shell-bg);
  color: var(--cv-cream);
  font-family: var(--font-pixel-ui);
  letter-spacing: 0;
}

body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #17191f 0%, #17231f 58%, #1f3326 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

.screen {
  overflow: hidden !important;
  background: transparent;
}

.pixel-screen .menu-bg::before,
.pixel-screen .game-bg::before,
.pixel-screen .loading-bg::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #1c2330 0%, #17221f 100%);
}

.pixel-screen .menu-bg::after,
.pixel-screen .game-bg::after,
.pixel-screen .loading-bg::after {
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(49, 102, 69, 0.5));
}

.shell-screen .shell-content,
#menu-screen .menu-content {
  position: relative;
  z-index: 2;
  height: 100dvh;
  width: 100%;
  padding: 20px 20px 20px calc(var(--cv-sidebar-w) + 22px);
  overflow: hidden;
  max-width: none;
  margin: 0;
}

#menu-screen .menu-content {
  width: 100vw !important;
  max-width: none !important;
  display: block !important;
}

.shell-nav {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cv-sidebar-w);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 106px 14px 124px;
  background: linear-gradient(180deg, #171613, #1f1d19);
  border-right: 3px solid #2f2b22;
  box-shadow: 8px 0 0 rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.shell-nav::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 18px;
  width: 168px;
  height: 54px;
  background:
    url('../assets/logos/chessvora-mark-48.png') 0 50% / 44px 44px no-repeat,
    linear-gradient(transparent, transparent);
}

.shell-nav::after {
  content: 'ChessVora\A Guest ready\A Wallet optional';
  white-space: pre-line;
  position: absolute;
  left: 18px;
  right: 14px;
  bottom: 22px;
  padding: 12px 10px;
  border: 2px solid #3b362b;
  background: #211f1a;
  color: var(--cv-muted);
  font-family: var(--font-readable);
  font-size: 0.76rem;
  line-height: 1.35;
  box-shadow: 0 3px 0 #0e0d0b;
}

.shell-nav-btn {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #d9d4c6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  font-family: var(--font-readable);
  font-weight: 900;
  font-size: 1rem;
  text-align: left;
  box-shadow: none;
}

.shell-nav-btn::before {
  content: '◆';
  width: 24px;
  color: #756f61;
  font-size: 0.8rem;
}

.shell-nav-btn:hover,
.shell-nav-btn:focus-visible {
  background: #29261f;
  color: #fff8dc;
  outline: 2px solid rgba(239, 196, 90, 0.35);
}

.shell-nav-btn.active {
  border-left-color: var(--cv-green);
  background: linear-gradient(90deg, rgba(120, 184, 79, 0.28), rgba(120, 184, 79, 0.04));
  color: #ffffff;
}

.shell-header,
.shell-page-head,
.menu-header {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0 0 14px;
}

.shell-brand {
  gap: 12px;
}

.shell-logo,
.menu-logo {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  object-fit: contain;
  border: 2px solid #3a352b;
  background: #0f0e0c;
  box-shadow: 0 3px 0 #0a0908;
}

.shell-brand h1,
.shell-page-head h1,
.menu-header h1,
.loading-header h1 {
  font-family: var(--font-pixel-display);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.25;
  color: #fff8dc;
  text-shadow: 0 3px 0 #0a0908;
  -webkit-text-stroke: 0;
}

.shell-brand p,
.shell-page-head p,
.menu-subtitle,
.trust-note,
.wallet-subtitle {
  font-family: var(--font-readable);
  color: var(--cv-muted);
  line-height: 1.35;
}

.shell-panel,
.modal,
.menu-panel,
.play-setup-panel,
.game-right-panel {
  border: 3px solid #171511;
  border-radius: 0;
  background: linear-gradient(180deg, var(--cv-panel-2), var(--cv-panel));
  box-shadow: var(--cv-pixel-shadow);
}

.panel-label,
.menu-label {
  font-family: var(--font-pixel-display);
  color: var(--cv-gold);
  font-size: 0.62rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.btn-play,
.btn-primary,
.shell-main-play {
  border: 3px solid #244b1d;
  border-radius: 0;
  background: linear-gradient(180deg, #8fcb61, var(--cv-green-2));
  color: white;
  font-family: var(--font-pixel-display);
  font-size: clamp(0.78rem, 1vw, 1rem);
  text-shadow: 0 2px 0 #1d3d17;
  box-shadow: 0 5px 0 #1f3c18, 0 11px 20px rgba(0, 0, 0, 0.28);
}

.btn-play:hover,
.btn-primary:hover,
.shell-main-play:hover {
  transform: translateY(-1px);
}

.btn-secondary,
.btn-compact,
.link-btn,
.setup-secondary,
.mini-action-btn {
  border: 2px solid #3d382d;
  border-radius: 0;
  background: #302d27;
  color: #fff4cf;
  box-shadow: 0 3px 0 #12110f;
}

.pixel-chip {
  border: 2px solid #403a2f;
  border-radius: 0;
  background: #1f1d19;
  color: #f8edc7;
  font-family: var(--font-readable);
  font-weight: 900;
}

.dashboard-content {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.dashboard-content .shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
}

.dashboard-grid {
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr) minmax(300px, 0.9fr);
  grid-template-rows: minmax(145px, 0.75fr) minmax(170px, 0.9fr) minmax(0, 1.2fr);
  grid-template-areas:
    'hero identity status'
    'hero quests unlock'
    'recent recent leaders';
  gap: 14px;
  overflow: hidden;
}

.lobby-hero-panel { grid-area: hero !important; grid-column: auto !important; grid-row: auto !important; }
.dashboard-identity { grid-area: identity !important; grid-column: auto !important; grid-row: auto !important; }
.lobby-status-card { grid-area: status !important; grid-column: auto !important; grid-row: auto !important; }
.next-unlock-panel { grid-area: unlock !important; grid-column: auto !important; grid-row: auto !important; }
.quests-preview { grid-area: quests !important; grid-column: auto !important; grid-row: auto !important; }
.leaderboard-preview { grid-area: leaders !important; grid-column: auto !important; grid-row: auto !important; }
.recent-practice-panel { grid-area: recent !important; grid-column: auto !important; grid-row: auto !important; }

.dashboard-grid > .shell-panel {
  min-height: 0;
  overflow: hidden;
  padding: 16px;
}

.quest-list,
.leader-list,
.practice-match-list,
.unlock-list,
.leaderboard-table {
  overflow: auto;
  min-height: 0;
  scrollbar-color: var(--cv-green) #171511;
}

.recent-practice-panel,
.leaderboard-preview,
.quests-preview,
.profile-inventory-panel,
.quests-board-panel,
.leaderboard-page {
  display: flex;
  flex-direction: column;
}

.practice-match-list,
.leader-list,
.quest-list.expanded,
.leaderboard-table,
.profile-inventory-panel .unlock-list {
  flex: 1 1 auto;
}

.play-shell-layout {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) var(--cv-right-w);
  gap: 20px;
  overflow: hidden;
}

.play-board-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
}

.play-player-strip {
  width: min(var(--cv-board-shell-size), 100%);
  height: 58px;
  min-height: 58px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: #fff4cf;
}

.play-player-strip span,
.play-player-strip time {
  color: var(--cv-muted);
  font-family: var(--font-readable);
  font-weight: 900;
}

.play-player-strip time {
  min-width: 108px;
  padding: 8px 12px;
  background: #161511;
  text-align: center;
  font-size: 1.45rem;
}

.mini-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid #171511;
  background: #302d27;
  box-shadow: 0 3px 0 #0c0b09;
  overflow: hidden;
  font-family: var(--font-pixel-display);
  font-size: 0.56rem;
}

.mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.setup-board-frame {
  width: var(--cv-board-shell-size);
  height: var(--cv-board-shell-size);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: var(--cv-board-gutter) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--cv-board-gutter);
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.setup-board-preview {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  overflow: hidden;
  background: var(--pixel-board-light, #d8d7bd);
  border-radius: 0;
  border: 4px solid #171511;
  box-shadow: var(--cv-pixel-shadow);
}

.setup-coords-left,
.setup-coords-bottom {
  display: grid;
  color: rgba(255, 244, 207, 0.72);
  font-family: var(--font-readable);
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}

.setup-coords-left {
  grid-template-rows: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
  font-size: 0.86rem;
}

.setup-coords-bottom {
  grid-column: 2;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
  font-size: 0.86rem;
}

.setup-square {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
}

.setup-square.light { background: var(--pixel-board-light, #d8d7bd); }
.setup-square.dark { background: var(--pixel-board-dark, #725f89); }
.setup-square .piece {
  position: absolute;
  inset: 0;
}

.play-setup-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: auto;
  scrollbar-color: var(--cv-green) #171511;
}

.right-action-tabs { order: 0; }
.time-control-select { order: 1; }
#menu-screen #btn-play { order: 2; }
.mode-select-group { order: 3; }
.difficulty-setup { order: 4; }
.color-setup { order: 5; }
.play-secondary-actions { order: 6; }
.safety-chip-grid { order: 7; }

.right-action-tabs,
.game-panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid #171511;
  background: #171511;
}

.right-action-tabs button,
.game-panel-tabs button {
  min-height: 54px;
  border: 0;
  border-radius: 0;
  background: #211f1a;
  color: var(--cv-muted);
  font-family: var(--font-readable);
  font-weight: 900;
}

.right-action-tabs button.active,
.game-panel-tabs button.active {
  background: #2e2b25;
  color: white;
  box-shadow: inset 0 -4px 0 var(--cv-green);
}

.time-control-select {
  border: 2px solid #171511;
  background: #1d1b17;
}

.time-control-toggle {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 0;
  background: linear-gradient(180deg, #35322b, #25231f);
  color: #fff4cf;
}

.time-icon {
  color: var(--cv-green);
  font-size: 1.35rem;
}

.time-control-menu {
  max-height: min(42dvh, 360px);
  overflow: auto;
  padding: 12px;
}

.time-control-menu[hidden] {
  display: none !important;
}

.time-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.time-group > span {
  grid-column: 1 / -1;
  color: var(--cv-gold);
  font-family: var(--font-readable);
  font-weight: 900;
}

.time-card,
.diff-card,
.color-card {
  min-height: 48px;
  border: 2px solid #171511;
  border-radius: 0;
  background: #302d27;
  color: #eee4c5;
  box-shadow: 0 3px 0 #0f0e0c;
}

.time-card.selected,
.diff-card.selected,
.color-card:has(input:checked),
.mode-card.selected {
  border-color: var(--cv-green);
  box-shadow: 0 0 0 3px rgba(120, 184, 79, 0.24), 0 3px 0 #0f0e0c;
}

.more-time-row {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--cv-muted);
  font-weight: 900;
}

#menu-screen .mode-grid,
.mode-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 8px;
  max-height: none !important;
  overflow: visible !important;
}

#menu-screen .menu-group {
  flex: 0 0 auto;
  min-height: auto !important;
  overflow: visible;
}

#menu-screen .mode-card,
.mode-card {
  width: 100%;
  height: auto !important;
  min-height: 74px !important;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 12px;
  border: 2px solid #171511;
  border-radius: 0;
  background: #302d27;
  color: #fff4cf;
  box-shadow: 0 3px 0 #0f0e0c;
  text-align: left;
  overflow: visible;
  white-space: normal;
}

#menu-screen .mode-card::before,
.mode-card::before {
  content: attr(data-mode-kind);
  grid-row: 1 / span 2;
  width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  background: #1d1b17;
  border: 2px solid #171511;
  color: var(--cv-gold);
  font-family: var(--font-pixel-display);
  font-size: 0.48rem;
  text-transform: uppercase;
}

#menu-screen .mode-card strong,
.mode-card strong {
  font-size: 0.92rem;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

#menu-screen .mode-card span,
.mode-card span {
  font-family: var(--font-readable);
  font-size: 0.78rem;
  color: var(--cv-muted);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

#menu-screen .mode-card .mode-badges,
.mode-card .mode-badges {
  display: none !important;
}

.difficulty-grid,
.color-grid,
.play-secondary-actions,
.safety-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.play-secondary-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.safety-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#game-screen {
  display: none;
  grid-template-columns: var(--cv-sidebar-w) minmax(420px, 1fr) var(--cv-right-w);
  gap: 20px;
  padding: 18px 20px 18px 0;
}

#game-screen.active {
  display: grid;
}

#game-screen .game-shell-nav {
  position: relative;
  grid-column: 1;
}

#game-screen .game-container {
  grid-column: 2;
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(100dvh - 36px);
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
}

#game-screen .game-header {
  display: contents;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#game-screen .player-card,
#game-screen .status-bar {
  border: 3px solid #171511;
  border-radius: 0;
  background: linear-gradient(180deg, #35322b, #25231f);
  box-shadow: 0 4px 0 #0f0e0c;
}

#game-screen .player-card {
  width: min(var(--cv-board-shell-size), 100%);
  height: 58px !important;
  min-height: 58px;
  max-height: 58px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-self: center;
  gap: 12px;
  padding: 6px 10px;
}

#game-screen .player-avatar {
  width: 40px !important;
  height: 40px !important;
  font-size: 1rem;
}

#game-screen .player-card.opponent {
  grid-row: 1;
}

#game-screen .player-card.player {
  grid-row: 3;
}

#game-screen .game-mode-pill,
#game-screen .vs-badge {
  display: none;
}

#game-screen .btn-settings {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  z-index: 3;
  border: 3px solid #171511;
  border-radius: 0;
  background: linear-gradient(180deg, #35322b, #25231f);
  box-shadow: 0 4px 0 #0f0e0c;
}

#game-screen .status-bar {
  min-height: 46px;
  display: grid;
  place-items: center;
  color: #fff4cf;
  font-family: var(--font-pixel-display);
  font-size: clamp(0.7rem, 1vw, 0.95rem);
}

.game-badge-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}

#game-screen .status-bar,
#game-screen .game-badge-strip {
  display: none;
}

#game-screen .board-wrapper {
  grid-row: 2;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

#game-screen .board-layout {
  width: var(--cv-board-shell-size) !important;
  height: var(--cv-board-shell-size) !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: var(--cv-board-gutter) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--cv-board-gutter);
  column-gap: 0 !important;
  row-gap: 0 !important;
}

#game-screen .board-area,
#game-screen .chess-board {
  width: 100% !important;
  height: 100% !important;
}

#game-screen .board-area {
  justify-self: stretch !important;
  align-self: stretch !important;
  aspect-ratio: auto !important;
}

#game-screen .board-coords-bottom {
  width: 100% !important;
}

#game-screen .chess-board {
  border-radius: 0;
  border: 4px solid #171511;
  box-shadow: var(--cv-pixel-shadow);
  padding: 0 !important;
  box-sizing: border-box;
}

#menu-screen #btn-play {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: 0 0 auto;
}

.game-right-panel {
  position: relative;
  z-index: 2;
  grid-column: 3;
  height: calc(100dvh - 36px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.game-panel-page {
  display: none;
  min-height: 0;
  overflow: auto;
}

.game-panel-page.active {
  display: block;
}

.game-move-list {
  min-height: 220px;
  padding: 12px;
  border: 2px solid #171511;
  background: #1b1a16;
  overflow: auto;
}

.empty-panel-state {
  height: 100%;
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cv-muted);
  border: 2px solid #171511;
  background: #1b1a16;
}

.empty-panel-state strong {
  color: #fff4cf;
}

.info-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

#game-screen .game-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#game-screen .ctrl-btn {
  min-height: 58px;
  border: 3px solid #171511;
  border-radius: 0;
  background: #302d27;
  color: #fff4cf;
  box-shadow: 0 4px 0 #0f0e0c;
}

#game-screen .ctrl-btn-main {
  grid-column: 1 / -1;
}

.profile-grid,
.quests-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.profile-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.3fr) minmax(280px, 0.85fr);
  gap: 14px;
}

.leaderboard-page {
  height: calc(100dvh - 132px);
  overflow: hidden;
}

.wallet-modal {
  max-width: 520px;
}

.wallet-safety-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.wallet-safety-strip span {
  border: 2px solid #3d382d;
  background: #1f1d19;
  padding: 8px;
  text-align: center;
  color: #fff4cf;
  font-weight: 900;
}

@media (max-width: 1180px) {
  :root {
    --cv-sidebar-w: 78px;
    --cv-right-w: 340px;
  }

  .shell-nav {
    padding-left: 10px;
    padding-right: 10px;
  }

  .shell-nav::before {
    left: 16px;
    width: 44px;
  }

  .shell-nav::after {
    display: none;
  }

  .shell-nav-btn {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .shell-nav-btn::before {
    width: auto;
    font-size: 1.1rem;
  }

  .dashboard-grid {
    grid-template-columns: minmax(250px, 1fr) minmax(280px, 1fr);
    grid-template-rows: minmax(130px, auto) minmax(150px, auto) minmax(0, 1fr);
    grid-template-areas:
      'hero identity'
      'quests unlock'
      'recent leaders';
  }

  .lobby-status-card {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --cv-sidebar-w: 0px;
    --cv-right-w: 100%;
    --cv-board-gutter: 24px;
    --cv-board-shell-size: min(86vw, calc(100dvh - 468px), 390px);
  }

  .shell-screen .shell-content,
  #menu-screen .menu-content {
    padding: 12px 12px 78px;
  }

  .shell-nav,
  #game-screen .game-shell-nav {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 66px;
    flex-direction: row;
    padding: 8px;
    border-right: 0;
    border-top: 3px solid #2f2b22;
  }

  .shell-nav::before,
  .shell-nav::after {
    display: none;
  }

  .shell-nav-btn {
    min-height: 48px;
    font-size: 0.72rem;
    flex: 1;
    justify-content: center;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .shell-nav-btn::before {
    display: none;
  }

  .shell-nav-btn.active {
    border-bottom-color: var(--cv-green);
  }

  .dashboard-grid,
  .profile-grid,
  .quests-layout {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    overflow: auto;
    padding-bottom: 4px;
  }

  .dashboard-grid > .shell-panel {
    grid-area: auto;
    min-height: 160px;
  }

  .play-shell-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(238px, 34dvh);
    gap: 8px;
  }

  .setup-board-frame {
    width: min(var(--cv-board-shell-size), 100%);
  }

  .play-setup-panel {
    max-height: 34dvh;
    gap: 8px;
    padding: 8px;
  }

  #menu-screen #btn-play {
    position: static;
    margin-top: 4px;
  }

  .play-player-strip {
    height: 42px;
    min-height: 42px;
  }

  #game-screen .player-card {
    height: 42px !important;
    min-height: 42px;
    max-height: 42px;
    padding: 3px 8px;
  }

  .time-control-menu {
    max-height: min(22dvh, 170px);
  }

  #game-screen.active {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(238px, 34dvh);
    padding: 10px 10px 76px;
    gap: 8px;
  }

  #game-screen .game-container,
  .game-right-panel {
    grid-column: 1;
    height: auto;
  }

  .game-right-panel {
    grid-row: 2;
    grid-template-rows: auto auto minmax(36px, 1fr) auto;
    gap: 6px;
    padding: 8px;
  }

  .game-panel-tabs button {
    min-height: 36px;
  }

  .game-move-list,
  .empty-panel-state {
    min-height: 36px;
    padding: 6px;
  }

  #game-screen .game-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  #game-screen .ctrl-btn,
  #game-screen .ctrl-btn-main {
    grid-column: auto;
    min-height: 38px;
    padding: 4px;
    font-size: clamp(0.56rem, 2vw, 0.68rem);
  }

  #game-screen .game-header {
    grid-template-columns: 1fr auto 1fr auto;
  }

  #game-screen .player-card {
    min-height: 42px;
    width: min(var(--cv-board-shell-size), 100%);
  }

  #game-screen .board-layout {
    width: min(var(--cv-board-shell-size), 100%);
  }
}

@media (max-width: 520px) {
  :root {
    --cv-board-gutter: 20px;
    --cv-board-shell-size: min(90vw, calc(100dvh - 468px), 340px);
  }

  .shell-nav-btn {
    font-size: 0.62rem;
  }

  .shell-actions,
  .play-player-strip time,
  #game-screen .player-stats {
    display: none;
  }

  .play-player-strip {
    height: 42px;
    min-height: 42px;
    gap: 8px;
  }

  #game-screen .player-card {
    height: 42px !important;
    min-height: 42px;
    max-height: 42px;
    padding: 3px 8px;
  }

  .play-player-strip .mini-avatar,
  #game-screen .player-avatar {
    width: 36px;
    height: 36px;
  }

  .mode-grid,
  .time-group,
  .play-secondary-actions,
  .safety-chip-grid,
  .wallet-safety-strip {
    grid-template-columns: 1fr;
  }

  #game-screen .game-header {
    min-height: 50px;
  }

  #game-screen .board-layout,
  .setup-board-frame {
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 20px;
  }
}