/* Updraft — Manu Arcade No. XXVII
   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. */

/* A second gold gauge glyph for the "best" star. */
.gauge-glyph.gold { color: var(--gold-deep); }

/* The framed playfield is a tall portrait pane for a rising climb. */
.board-frame {
  width: min(440px, 92vw);
  display: flex;
  justify-content: center;
}
#board {
  display: block;
  touch-action: none;          /* we own drag-steering on the canvas */
  cursor: grab;
  border-radius: 6px;
  max-width: 100%;
  /* A dark candlelit base behind the canvas pixels (the canvas draws its own
     dark ground, this just guards any 1px seam). */
  background:
    radial-gradient(120% 60% at 50% 92%, rgba(217,148,65,.12), rgba(217,148,65,0) 60%),
    linear-gradient(180deg, #100b08 0%, #160f0a 55%, #1f160e 100%);
}
#board:active { cursor: grabbing; }

/* Instruction caption floats over the lower third of the pane until first move. */
.hint-overlay {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 8%, 52px);
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 84%;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(13px, 3.2vw, 16px);
  color: var(--gold-bright);
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 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);
}

/* On-screen steer buttons: a pair of wax-toned paddles below the pane.
   Touch-friendly; also clickable on desktop. */
.steer-row {
  display: flex;
  gap: clamp(10px, 4vw, 24px);
  justify-content: center;
  width: min(440px, 92vw);
}
.steer-btn {
  flex: 1 1 0;
  max-width: 180px;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(122,104,80,.4);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.06)), var(--parchment-deep);
  box-shadow: inset 0 0 0 1px rgba(200,156,58,.4), 0 3px 8px rgba(58,46,34,.22);
  color: var(--oxblood);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: grid;
  place-items: center;
  transition: transform .1s var(--ease), background .15s var(--ease), filter .15s var(--ease);
}
.steer-btn:hover { filter: brightness(1.04); }
.steer-btn:active {
  transform: translateY(1px) scale(.98);
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02)), var(--parchment-shadow);
}

/* The seal "lose" treatment. */
.seal-face { line-height: 1; transition: transform .3s var(--ease); }
.seal.lose { background: radial-gradient(circle at 38% 32%, #6b5a48, #3a2e22 60%, #1a1410 100%); }
.seal:active .seal-face { transform: rotate(-90deg); }

@media (max-width: 420px) {
  .hud { gap: 10px; }
  .steer-btn { min-height: 52px; }
}

/* On a pointer-fine desktop the steer buttons are optional (keys + drag work),
   but we keep them visible for discoverability and as a mouse fallback. */