.play-site header,
.play-site main,
.play-site footer {
  width: min(1180px, calc(100vw - 28px));
}

.play-shell {
  padding-bottom: 48px;
}

.play-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 270px);
  gap: 20px;
  align-items: end;
  padding: 30px 0 18px;
}

.play-head h1 {
  font-size: clamp(2.3rem, 7vw, 4.9rem);
}

.level-tools,
.control-panel section,
.track-panel {
  display: grid;
  gap: 10px;
}

.level-tools span,
.control-panel h2,
.track-panel h2 {
  margin: 0;
  color: var(--brass);
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

select,
button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .28);
  color: var(--paper);
  font: inherit;
  font-weight: 850;
}

select {
  width: 100%;
  padding: .68rem .8rem;
}

button {
  cursor: pointer;
}

button:hover,
.switch-card:hover,
.slot-card:hover {
  border-color: color-mix(in srgb, var(--brass), white 18%);
}

.primary-action {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
  gap: 18px;
  align-items: stretch;
}

.board-panel,
.control-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .24);
}

.hud-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
  font-weight: 850;
}

.timeline-board {
  display: grid;
  gap: 16px;
  padding: 16px;
  min-height: min(72vh, 700px);
  background:
    linear-gradient(90deg, rgba(255, 246, 223, .045) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(rgba(255, 246, 223, .04) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(circle at 50% 24%, rgba(214, 168, 77, .16), transparent 18rem),
    rgba(16, 13, 10, .48);
}

.track-panel {
  align-content: start;
}

.path-list,
.gate-list,
.timeline-slots,
.switch-tray {
  display: grid;
  gap: 9px;
}

.path-list {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.path-step,
.gate-chip,
.slot-card,
.switch-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 246, 223, .07);
  color: var(--paper);
}

.path-step {
  min-height: 88px;
}

.path-step.failed {
  border-color: color-mix(in srgb, var(--warning), white 12%);
  box-shadow: 0 0 0 2px rgba(229, 111, 95, .14);
}

.path-step span,
.gate-chip span,
.slot-card span,
.switch-card span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.path-step strong,
.gate-chip strong,
.slot-card strong,
.switch-card strong {
  color: var(--paper);
  font-size: .98rem;
  line-height: 1.18;
}

.path-step small,
.gate-chip small,
.slot-card small,
.switch-card small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.gate-list {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.gate-chip.open {
  border-color: rgba(80, 185, 170, .68);
}

.gate-chip.closed {
  border-color: rgba(229, 111, 95, .56);
}

.timeline-slots {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.slot-card {
  min-height: 104px;
  text-align: left;
}

.slot-card.filled {
  border-color: rgba(214, 168, 77, .72);
  background: rgba(214, 168, 77, .13);
}

.slot-card.locked {
  border-style: dashed;
  color: rgba(255, 246, 223, .72);
}

.control-panel {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 16px;
}

.switch-card {
  width: 100%;
  text-align: left;
}

.switch-card.selected {
  border-color: var(--brass);
  background: rgba(214, 168, 77, .16);
}

.status-line {
  min-height: 62px;
  margin: 0;
  color: var(--paper);
}

.status-line[data-result="Accepted"] {
  color: var(--teal);
  font-weight: 900;
}

.status-line[data-result="BlockedGate"],
.status-line[data-result="Conflict"],
.status-line[data-result="ForbiddenOpen"] {
  color: color-mix(in srgb, var(--warning), white 18%);
  font-weight: 900;
}

.action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 860px) {
  .play-head,
  .game-layout {
    grid-template-columns: 1fr;
  }

  .timeline-board {
    min-height: 0;
    padding: 12px;
  }

  .path-list,
  .timeline-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .path-list,
  .timeline-slots,
  .gate-list,
  .action-row {
    grid-template-columns: 1fr;
  }
}