/* underword-game.css — Soul's game on python-visuals.com/underword. BUILT by tools/soul/build-underword.cjs: do not
   hand-edit, re-run it. Copied verbatim from workstation.html; the page sets the colours it reads on .uw. */
/* The house type and spacing scale (his AUQ 2026-10-14, step 5 of the lesson plan, L8-4 and L8-7: "Pixel grid" and "11px
   floor"). One short list of named steps, so a page stops carrying 62 text sizes and 76 gap sizes. Each name is the size in
   pixels at the browser's normal text size; the value is in rem, so a person who sets bigger text gets all of it bigger.
   Nothing reads below 11px. Edit HERE, then node tools/design/sync-glass.cjs; tests/soul-scale.test.js holds Soul to it.
   Left as they are, on purpose: sizes inside drawings (SVG text, in px), the crew-only preview banner, clamp() headings
   that grow with the screen, and layout lengths of 2.5rem and up. */
:root, body {
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-38: 2.375rem;

  --sp-2: 0.125rem;
  --sp-4: 0.25rem;
  --sp-6: 0.375rem;
  --sp-8: 0.5rem;
  --sp-10: 0.625rem;
  --sp-12: 0.75rem;
  --sp-14: 0.875rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
}
.soul-chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-14); border-radius: 999px; border: 1px solid var(--cream-18); background: none; color: var(--cream-78); font-family: var(--font-body); font-size: var(--fs-13); white-space: nowrap; cursor: pointer; }
.soul-chip svg { width: 15px; height: 15px; }
.soul-chip:hover { border-color: rgba(var(--accent-rgb),0.55); color: var(--cream); }
.soul-chip.on { border-color: var(--gold); color: var(--gold); background: rgba(var(--accent-rgb),0.08); }
.soul-game { max-width: 620px; margin: 0 auto; padding-top: var(--sp-16); }
.soul-game-reveal { margin: var(--sp-6) 0 0; color: var(--cream-78); }
.soul-game-reveal b { color: var(--gold); letter-spacing: 0.06em; font-weight: 600; }
.soul-game-top { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--sp-4) var(--sp-16); margin-top: var(--sp-14); }
.soul-game-top > * { white-space: nowrap; }
.soul-game-top .soul-sub { margin: 0; }
.soul-game-turns { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--cream-78); }
.soul-game-turns.is-low { color: var(--gold-bright); }
.soul-dots { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; margin: var(--sp-10) 0 var(--sp-14); }
.soul-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--cream-18); }
.soul-dots i.six { width: 12px; height: 12px; }
.soul-dots i.won { background: var(--gold); border-color: var(--gold); }
.soul-dots i.now { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.soul-dots i.ahead { opacity: 0.45; }
.soul-dots i.miss { border-color: var(--cream-42); }
.soul-game p.soul-game-how { max-width: 44ch; margin: 0 auto var(--sp-6); font-size: var(--fs-14); }
.soul-coins { display: flex; justify-content: center; gap: clamp(6px, 1.8vw, 12px); margin: var(--sp-14) 0 var(--sp-20); perspective: 800px; }
.soul-coin { width: clamp(48px, 14vw, 72px); aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.soul-coins.six .soul-coin { width: clamp(42px, 12vw, 64px); }
.soul-coin:disabled { cursor: default; }
.soul-coin { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.soul-coin-in { pointer-events: none; }                               /* the flat button takes every press, never a turning face */
.soul-coin-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.48s cubic-bezier(0.4, 0, 0.2, 1); }
.soul-coin.is-back .soul-coin-in { transform: rotateY(180deg); }
.soul-coin-in b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; border: 1px solid rgba(var(--accent-rgb),0.34); background: var(--navy-mid); color: var(--gold); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem, 5.2vw, 2.3rem); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.soul-coin-in b.bk { transform: rotateY(180deg); }
.soul-coin:not(:disabled):hover .soul-coin-in b { border-color: rgba(var(--accent-rgb),0.7); }
.soul-coin:focus-visible { outline: 2px solid rgba(var(--accent-rgb),0.7); outline-offset: 3px; border-radius: 13px; }
.soul-coins.is-won .soul-coin-in b { border-color: var(--gold); background: rgba(var(--accent-rgb),0.14); color: var(--gold-bright); }
.soul-guess { display: flex; justify-content: center; gap: var(--sp-8); max-width: 380px; margin: 0 auto; }
.soul-guess input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 var(--sp-14); text-align: center; letter-spacing: 0.28em; text-transform: uppercase; background: var(--navy-mid); border: 1px solid var(--cream-18); border-radius: 12px; color: var(--cream); font-family: var(--font-mono); font-size: var(--fs-16); }
.soul-guess input::placeholder { letter-spacing: normal; text-transform: none; color: var(--cream-42); }
.soul-guess input:focus { outline: none; border-color: rgba(var(--accent-rgb),0.7); }
.soul-guess .submit-btn { width: auto; padding: var(--sp-12) var(--sp-20); font-size: var(--fs-14); }
.soul-guess.shake { animation: soulShake 0.34s; }
@keyframes soulShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.soul-game p.soul-game-note { min-height: 1.4em; margin-top: var(--sp-12); font-size: var(--fs-14); }
.soul-game-won .soul-game-word { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 2.8rem); letter-spacing: 0.14em; color: var(--gold-bright); }
.soul-game-xp { font-family: var(--font-mono); font-size: var(--fs-15); color: var(--gold); }
.soul-game p.soul-game-left { margin-top: var(--sp-4); font-size: var(--fs-14); }
.soul-game-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-10); margin-top: var(--sp-16); }
.soul-game-acts .submit-btn { padding: var(--sp-12) var(--sp-20); font-size: var(--fs-14); }
.soul-game .soul-hint { margin-top: var(--sp-12); }
.soul-game-end h1 { margin-top: var(--sp-10); }
.soul-game p.soul-game-lead { max-width: 46ch; margin: 0 auto; color: var(--cream-78); }
.soul-game-facts { max-width: 340px; margin: var(--sp-16) auto 0; text-align: left; }
.soul-game-facts dd { text-align: right; }
.soul-game-total { margin: var(--sp-16) 0 var(--sp-4); font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2rem); color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .soul-coin-in { transition: none; } .soul-guess.shake { animation: none; } }
.soul-coins.is-hidden .soul-coin-in b { border-color: var(--signal, var(--teal)); color: var(--signal, var(--teal)); }
.soul-game-pet { display: block; width: 150px; height: 104px; overflow: visible; }
/* Call Your Shot (2026-10-19, build plan step B1): the page's own few rules beside Soul's game styles, appended by
   tools/soul/build-underword.cjs. Only the shot screens use these classes, so the old game draws exactly as before. */
.soul-coins.seven { gap: clamp(4px, 1.4vw, 10px); }
.soul-coins.seven .soul-coin { width: clamp(38px, 11vw, 58px); }
.soul-coins.seven .soul-coin-in b { font-size: clamp(1.3rem, 4.6vw, 2rem); }
.uw-shot-dare { max-width: 30ch; margin: var(--sp-8) auto var(--sp-4); font-family: var(--font-display); font-size: clamp(1.45rem, 5.4vw, 1.9rem); line-height: 1.2; color: var(--cream); }
.uw-shot-pick { display: flex; align-items: center; justify-content: center; gap: var(--sp-12); margin: var(--sp-4) 0 0; }
.uw-shot-pick .soul-chip { min-width: 44px; min-height: 44px; justify-content: center; font-size: var(--fs-18); }
.uw-shot-pick output { min-width: 2.4ch; font-family: var(--font-mono); font-size: var(--fs-22); color: var(--gold); text-align: center; }
.uw-shot-calls { margin: 0 0 var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.04em; color: var(--cream-78); }
.uw-shot-calls b { color: var(--gold); font-weight: 500; }
.uw-shot-acts { justify-content: center; }
.uw-shot-acts .submit-btn { width: auto; min-height: 44px; padding: var(--sp-12) var(--sp-24); }
.soul-dots i.call { outline: 2px solid var(--gold); outline-offset: 2px; }
.uw-shot-judge { margin: var(--sp-4) 0 var(--sp-10); color: var(--cream); }
.uw-shot-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6) var(--sp-16); margin: 0 auto var(--sp-10); padding: 0; max-width: 30rem; }
.uw-shot-facts li { font-size: var(--fs-13); color: var(--cream-78); }
.uw-shot-facts b { font-family: var(--font-mono); font-weight: 500; color: var(--gold); }
.uw-shot-hist { max-width: 24rem; margin: var(--sp-16) auto 0; text-align: left; }
.uw-shot-hist ol { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.uw-shot-hist li { display: flex; gap: var(--sp-10); padding: var(--sp-4) 0; border-top: 1px solid var(--cream-18); font-size: var(--fs-13); color: var(--cream-78); }
.uw-shot-hist li:first-child { border-top: none; }
.uw-shot-hist li span { width: 2.6rem; font-family: var(--font-mono); color: var(--gold); }