/* ==========================================================================
   FigureMill — /extras/play
   The games sit in a dark "site office" panel inside the warm paper page.
   That contrast is deliberate: the stage reads as a screen, the page around
   it reads as a document. Everything scopes under .play so none of it can
   leak into the 76 calculator pages.
   ========================================================================== */

.play {
  --g-bg-1: #161b23;
  --g-bg-2: #0b0e13;
  --g-line: rgba(255, 255, 255, 0.07);
  --g-line-2: rgba(255, 255, 255, 0.12);
  --g-ink: #eef1f6;
  --g-ink-2: #9aa5b6;
  --g-accent: #e08a3c;
  --g-accent-ink: #1a1206;
  --g-ok: #46b48a;
  --g-bad: #d9584d;
  margin: 26px 0 10px;
}

/* ---------- mode tabs ---------- */
.play-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}

.play-tab {
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 600;
  padding: 9px 15px; min-height: 44px; border-radius: 999px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.play-tab:hover { border-color: var(--ink-3); color: var(--ink); }
.play-tab.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.play-tab small {
  display: block; font-family: var(--font-sans); font-size: 0.7rem;
  font-weight: 400; opacity: .62; margin-top: 1px; letter-spacing: .01em;
}

/* ---------- stage ---------- */
.play-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--g-bg-1), var(--g-bg-2));
  border: 1px solid #232a36;
  box-shadow: 0 26px 50px -30px rgba(12, 16, 24, .6);
  isolation: isolate;
}

.play-stage canvas {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 16 / 10;
  max-height: min(64vh, 520px);
  touch-action: none;
}

/* ---------- hud ---------- */
.play-hud {
  position: absolute; inset: 0 0 auto 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  pointer-events: none;
  font-family: var(--font-display);
}

.play-name {
  font-size: 0.78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--g-accent);
}

.play-stats {
  display: flex; gap: 14px; text-align: right;
}
.play-stat { line-height: 1.1; }
.play-stat b {
  display: block; font-size: 1.02rem; color: var(--g-ink);
  font-variant-numeric: tabular-nums;
}
.play-stat span {
  font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--g-ink-2);
}

/* ---------- veil (start / result) ---------- */
.play-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 26px; text-align: center;
  background: rgba(8, 11, 16, .66);
  backdrop-filter: blur(2px);
  color: var(--g-ink);
  transition: opacity .22s ease, visibility .22s;
}
.play-veil[hidden] { display: none; }

/* The result has to stay readable over the pour, so the veil is a tint rather
   than a curtain — the concrete underneath is part of the answer. */
.play-veil .play-btn--ghost {
  color: var(--g-ink); border-color: rgba(255, 255, 255, .3);
}
.play-veil .play-btn--ghost:hover {
  background: rgba(255, 255, 255, .12); color: #fff;
}

.play-veil h3 {
  font-family: var(--font-display); font-size: 1.3rem; margin: 0;
  letter-spacing: -.01em;
}
.play-veil p {
  margin: 0; max-width: 44ch; font-size: 0.92rem; line-height: 1.55;
  color: var(--g-ink-2);
}
.play-veil .play-grade {
  font-family: var(--font-display); font-size: 3rem; font-weight: 700;
  line-height: 1; margin: 2px 0;
}
.play-veil .play-grade small {
  display: block; font-family: var(--font-sans); font-size: 0.72rem;
  font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-ink-2); margin-top: 8px;
}
.play-veil .play-share {
  font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: .12em;
  color: var(--g-ink); white-space: pre;
}

/* ---------- control bar ---------- */
.play-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 14px;
}

.play-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 8px 12px;
}
.play-field label {
  font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.play-field input[type="number"] {
  width: 84px; min-height: 40px; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 2px 0;
}
.play-field input[type="number"]:focus { outline: none; }
.play-field .unit { font-size: 0.8rem; color: var(--ink-3); }

.play-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 320px; height: 6px; border-radius: 99px;
  background: var(--line-2); outline: none;
}
.play-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--g-accent); border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
.play-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--g-accent); border: 3px solid var(--surface); cursor: pointer;
}

.play-btn {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  padding: 11px 22px; min-height: 44px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent; background: var(--ink); color: var(--paper);
  transition: transform .1s ease, background .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.play-btn:hover { background: var(--brand); color: #fff; }
.play-btn:active { transform: translateY(1px); }
.play-btn--primary { background: var(--g-accent); color: var(--g-accent-ink); }
.play-btn--primary:hover { background: #f0a054; color: var(--g-accent-ink); }
.play-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.play-btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.play-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.play-choice { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.play-choice .play-btn { flex: 0 1 auto; white-space: nowrap; }

.play-note {
  flex: 1 1 100%; font-size: 0.84rem; line-height: 1.55; color: var(--ink-2);
  margin: 2px 0 0;
}
.play-note b { color: var(--ink); }

.play-kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-2);
}

/* ---------- narrow screens ---------- */
@media (max-width: 620px) {
  .play-tabs { gap: 6px; }
  .play-tab { padding: 8px 12px; font-size: 0.8rem; min-height: 44px; }
  .play-tab small { display: none; }
  .play-stage canvas { aspect-ratio: 4 / 3; max-height: 56vh; }
  /* The match board is square and height-limited; on a phone the 4:3 stage
     would squeeze it to 21px a tile. */
  body.play-swap .play-stage canvas { aspect-ratio: 1 / 1; max-height: 72vh; }
  .play-hud { padding: 11px 12px; }
  /* The pour gauge and the level timer both live in the top right of the
     canvas; without this the right-hand stats print on top of them. */
  .play-stats { gap: 10px; padding-right: 42px; }
  .play-stat b { font-size: 0.92rem; }
  .play-bar { gap: 9px; }
  .play-field { flex: 1 1 auto; }
  .play-btn { padding: 10px 16px; font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .play-veil, .play-btn, .play-tab { transition: none; }
}

/* The site-wide record player is fixed bottom-right, which put it directly on
   top of the last answer button. Move it out of the play area on this page. */
body.page-play .tn-player { left: 18px; right: auto; bottom: 18px; }
body.page-play .tn-player-panel { left: 0; right: auto; bottom: 58px; }
body.page-play .tn-disc { width: 44px; height: 44px; }

/* On a phone the disc lands on the first paragraph no matter which corner it
   takes, and the stage already fills the viewport width. */
@media (max-width: 620px) {
  body.page-play .tn-player { display: none; }
}