.clovis-frame {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .clovis-frame {
    overflow-x: hidden;
  }
}

.layout-board {
  grid-template-columns: minmax(210px, 0.56fr) minmax(360px, 1.22fr) minmax(260px, 0.72fr);
  min-width: 0;
}

.board-play-area,
.layout-board > div:nth-child(2) {
  display: grid;
  justify-items: center;
  min-width: 0;
  width: 100%;
}

.sidebar-stack {
  min-width: 0;
}

.senterej-board-stage {
  max-width: 100%;
}

@media (max-width: 1120px) {
  .layout-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .senterej-board-shell,
  .senterej-board-shell[data-view="3d"] {
    width: min(64vw, 680px);
  }

  .board-play-area,
  .layout-board > div:nth-child(2) {
    order: 1;
  }

  .sidebar-stack {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-stack > .ancient-panel:first-child {
    grid-column: 1 / -1;
  }

  .piece-legend {
    order: 3;
  }
}

@media (max-width: 760px) {
  .clovis-frame {
    padding: 0.55rem;
  }

  .page-shell {
    gap: 0.75rem;
    padding-top: 0.65rem;
  }

  .layout-board {
    gap: 0.75rem;
  }

  .phase-ribbon {
    width: 100%;
    justify-content: center;
    margin: 0.25rem 0 0.55rem;
    text-align: center;
  }

  .sidebar-stack {
    grid-template-columns: 1fr;
  }

  .ancient-panel {
    padding: 0.85rem;
  }

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

  .history-list {
    max-height: 180px;
  }

  .senterej-board-stage {
    --board-tilt: 34deg;
    --piece-z: clamp(30px, 8vw, 42px);
    min-height: min(112vw, 560px);
    perspective: 1150px;
    perspective-origin: 50% 16%;
  }

  .senterej-board-shell,
  .senterej-board-shell[data-view="3d"] {
    width: min(74vw, 520px);
    transform: rotateX(var(--board-tilt)) rotateZ(-1.5deg) translateY(-0.35rem);
  }
}

@media (max-width: 560px) {
  .senterej-board-stage {
    --board-tilt: 28deg;
    --piece-z: clamp(26px, 7.5vw, 36px);
    min-height: min(106vw, 480px);
    perspective: 980px;
    perspective-origin: 50% 20%;
  }

  .senterej-board-shell,
  .senterej-board-shell[data-view="3d"] {
    width: min(78vw, 430px);
    padding: 0.55rem;
    transform: rotateX(var(--board-tilt)) rotateZ(-1deg) translateY(0);
  }

  .square-label {
    display: none;
  }
}

@media (max-width: 520px) {
  .button-grid,
  .compact-grid {
    grid-template-columns: 1fr;
  }

  .gold-button {
    width: 100%;
  }

  .history-list {
    max-height: 150px;
  }
}

@media (max-width: 420px) {
  .senterej-board-stage {
    --board-tilt: 22deg;
    --piece-z: clamp(22px, 7vw, 30px);
    min-height: min(104vw, 410px);
    perspective: 820px;
  }

  .senterej-board-shell,
  .senterej-board-shell[data-view="3d"] {
    width: min(82vw, 360px);
    padding: 0.42rem;
  }

  .senterej-board-shell::after {
    bottom: -10px;
    height: 15px;
  }
}

/* Live final pass for sculpted armies: black enamel above, ivory/gold below. */
.senterej-board-shell[data-view="3d"] .senterej-square[data-piece-color="white"]::after,
.senterej-board-shell[data-view="3d"] .senterej-square[data-piece-color="white"]:has(> .senterej-piece)::after,
.hero-mini-square[data-piece-color="white"]::after,
.hero-mini-square[data-piece-color="white"]:has(> .senterej-piece)::after {
  filter:
    brightness(1.12)
    saturate(1.16)
    contrast(1.08)
    drop-shadow(0 22px 12px rgba(0, 0, 0, 0.72))
    drop-shadow(-2px -2px 1px rgba(255, 240, 168, 0.36))
    drop-shadow(3px 4px 1px rgba(83, 43, 8, 0.48));
}

.senterej-board-shell[data-view="3d"] .senterej-square[data-piece-color="black"]::after,
.senterej-board-shell[data-view="3d"] .senterej-square[data-piece-color="black"]:has(> .senterej-piece)::after,
.hero-mini-square[data-piece-color="black"]::after,
.hero-mini-square[data-piece-color="black"]:has(> .senterej-piece)::after {
  filter:
    brightness(0.24)
    sepia(0.65)
    saturate(0.95)
    hue-rotate(176deg)
    contrast(1.8)
    drop-shadow(0 24px 13px rgba(0, 0, 0, 0.9))
    drop-shadow(-1px -1px 0 rgba(240, 201, 106, 0.42))
    drop-shadow(3px 4px 1px rgba(0, 0, 0, 0.78));
}

.senterej-board-shell[data-view="3d"] .senterej-square.is-selected[data-piece-color="black"]::after,
.senterej-board-shell[data-view="3d"] .senterej-square:hover:not(.is-disabled)[data-piece-color="black"]::after,
.senterej-board-shell[data-view="3d"] .senterej-square.is-selected[data-piece-color="black"]:has(> .senterej-piece)::after,
.senterej-board-shell[data-view="3d"] .senterej-square:hover:not(.is-disabled)[data-piece-color="black"]:has(> .senterej-piece)::after {
  filter:
    brightness(0.28)
    sepia(0.7)
    saturate(1)
    hue-rotate(176deg)
    contrast(1.86)
    drop-shadow(0 0 14px rgba(240, 201, 106, 0.58))
    drop-shadow(0 24px 13px rgba(0, 0, 0, 0.92))
    drop-shadow(-1px -1px 0 rgba(240, 201, 106, 0.48));
}