/* Warren — Manu Arcade No. XXXV
   Game-specific styling only. The shell (masthead, hud, seal, toggles,
   board-frame, overlay, colophon) comes from ../_shared/palette.css.
   No em dashes in any on-screen copy by house style. */

/* The "best" star gauge glyph goes gold. */
.gauge-glyph.gold { color: var(--gold-deep); }

/* The framed playfield holds a dark warren so the warm glows read. */
.board-frame {
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 96vw;
}
#board {
  display: block;
  touch-action: none;
  border-radius: 6px;
  max-width: 100%;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(217,148,65,.08), rgba(217,148,65,0) 60%),
    linear-gradient(180deg, #140f0a 0%, #1b140d 55%, #241a10 100%);
}

/* Instruction caption floats over the board until the first move. */
.hint-overlay {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 7%, 44px);
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 86%;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 16px);
  color: var(--gold-bright);
  text-shadow: 0 1px 0 rgba(0,0,0,.65), 0 0 14px rgba(227,183,84,.35);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hint-overlay.gone {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

/* The lose treatment on the seal, mirroring the house convention. */
.seal-face { line-height: 1; transition: transform .3s var(--ease); }
.seal.lose { background: radial-gradient(circle at 38% 32%, #5a6a86, #2f3a52 60%, #161b28 100%); color: #bcd6f2; }
.seal:active .seal-face { transform: rotate(-90deg); }

/* On-screen direction dial: a cozy four-petal pad for touch / pointer play. */
.dpad {
  position: relative;
  width: clamp(132px, 40vw, 168px);
  height: clamp(132px, 40vw, 168px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  margin-top: 2px;
}
.dpad-btn {
  border: 1px solid rgba(122,104,80,.45);
  background: linear-gradient(180deg, var(--parchment-warm), var(--parchment-deep));
  color: var(--oxblood);
  border-radius: 12px;
  font-size: clamp(15px, 4.4vw, 19px);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 5px rgba(58,46,34,.25);
  transition: transform .1s var(--ease), background .15s var(--ease), color .15s var(--ease);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.dpad-btn:active {
  transform: scale(.92);
  background: var(--oxblood);
  color: var(--parchment);
}
.dpad-btn.up { grid-column: 2; grid-row: 1; }
.dpad-btn.left { grid-column: 1; grid-row: 2; }
.dpad-btn.right { grid-column: 3; grid-row: 2; }
.dpad-btn.down { grid-column: 2; grid-row: 3; }

/* Hide the dpad for clearly-keyboard setups (fine pointer + hover), show it
   wherever touch is the primary input. It stays available either way. */
@media (hover: hover) and (pointer: fine) {
  .dpad { display: none; }
}

@media (max-width: 420px) {
  .hud { gap: 8px; }
  .gauge { font-size: clamp(17px, 5vw, 22px); }
}