.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, 260px);
  gap: 20px;
  align-items: end;
  padding: 30px 0 18px;
}

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

.level-tools {
  display: grid;
  gap: 8px;
}

.level-tools label,
.control-panel h2 {
  margin: 0;
  color: var(--accent);
  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,
.gear-chip:hover,
.socket-node:hover {
  border-color: color-mix(in srgb, var(--accent), white 18%);
}

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

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

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

.board-panel {
  min-height: min(72vh, 720px);
  overflow: hidden;
}

.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;
}

.socket-board {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(251, 248, 236, .045) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(rgba(251, 248, 236, .04) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(circle at 50% 42%, rgba(128, 197, 107, .16), transparent 18rem),
    rgba(14, 17, 12, .5);
}

.mesh-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mesh-line {
  stroke: rgba(251, 248, 236, .22);
  stroke-width: 3;
  stroke-linecap: round;
}

.socket-node {
  position: absolute;
  display: grid;
  gap: 6px;
  width: 134px;
  min-height: 118px;
  padding: 10px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(251, 248, 236, .22);
  border-radius: 8px;
  background: rgba(24, 27, 19, .92);
  color: var(--paper);
  text-align: left;
}

.socket-node.target {
  border-color: color-mix(in srgb, var(--leaf), white 8%);
}

.socket-node.forbidden {
  border-color: color-mix(in srgb, var(--copper), white 8%);
}

.socket-node.powered {
  box-shadow: 0 0 0 2px rgba(231, 193, 90, .28), 0 14px 34px rgba(0, 0, 0, .22);
}

.socket-node.selected {
  outline: 3px solid rgba(231, 193, 90, .42);
}

.socket-label,
.gear-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--paper);
  font-size: .84rem;
  font-weight: 950;
}

.socket-meta,
.gear-meta,
.socket-power {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

.gear-piece {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid rgba(231, 193, 90, .42);
  border-radius: 50%;
  aspect-ratio: 1;
  place-items: center;
  background:
    radial-gradient(circle, rgba(251, 248, 236, .18) 18%, transparent 19%),
    repeating-conic-gradient(from 10deg, rgba(231, 193, 90, .94) 0 9deg, rgba(201, 115, 67, .92) 9deg 17deg);
  color: #14140f;
  text-align: center;
}

.gear-piece button,
.gear-chip {
  width: 100%;
}

.gear-piece.locked {
  filter: saturate(.75);
}

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

.control-panel section {
  display: grid;
  gap: 10px;
}

.gear-tray,
.target-list {
  display: grid;
  gap: 9px;
}

.gear-chip,
.target-chip {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(251, 248, 236, .07);
  color: var(--paper);
  text-align: left;
}

.gear-chip.selected {
  border-color: var(--accent);
  background: rgba(231, 193, 90, .16);
}

.target-chip.satisfied {
  border-color: rgba(128, 197, 107, .62);
}

.target-chip.missing {
  border-color: rgba(201, 115, 67, .62);
}

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

.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;
  }

  .board-panel {
    min-height: auto;
  }

  .socket-board {
    min-height: 540px;
  }

  .socket-node {
    width: 116px;
    min-height: 108px;
  }
}

@media (max-width: 480px) {
  .play-site header,
  .play-site main,
  .play-site footer {
    width: min(100% - 18px, 1180px);
  }

  .socket-board {
    min-height: 500px;
  }

  .socket-node {
    width: 104px;
    min-height: 102px;
    padding: 8px;
  }

  .gear-label,
  .socket-label {
    font-size: .76rem;
  }

  .socket-meta,
  .gear-meta,
  .socket-power {
    font-size: .7rem;
  }
}