/* ═══════════════════════════════════════════════════════════════════════
   Games We Print — game-page extras (loaded AFTER site.css, game pages only).
   Styles for the sheet-language select, the Download PDF button state, and
   the sheet-code (seed) controls. Uses site.css tokens; AB2 "Warm Toy Ward"
   look: teal outlines, pill radii, 48px+ touch targets.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Print mode (copies vs mixed pack) ────────────────────────────────── */
/* Reuses .diff-fieldset (border:0, legend styling) and the shared .pill /
   .pill-row look; just spacing + the paired hint lines here. */
.mode-fieldset{margin:0 0 22px}
.mode-fieldset .pill-row{margin-bottom:0}
.mode-hint{margin-top:10px}

/* ── Sheet language ───────────────────────────────────────────────────── */
.sheetlang{display:flex;flex-direction:column}
.sheetlang .copies-title{margin-bottom:6px}
.sheetlang-select{
  min-height:50px;min-width:170px;padding:0 44px 0 16px;
  font:600 1rem 'Source Sans 3',sans-serif;color:var(--ink);
  border:2px solid var(--teal);border-radius:12px;background-color:#fff;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F6B5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  cursor:pointer;
  transition:background-color .15s ease;
}
.sheetlang-select:hover{background-color:var(--teal-mist)}
.sheetlang-select:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ── Download PDF busy state ──────────────────────────────────────────── */
#download-pdf[aria-busy="true"]{
  color:var(--muted);border-color:var(--line);cursor:progress;
  background:transparent;
}
#download-pdf[aria-busy="true"]::before{
  content:"";width:1em;height:1em;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--teal);
  animation:gwp-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  #download-pdf[aria-busy="true"]::before{animation:none}
}
@keyframes gwp-spin{to{transform:rotate(360deg)}}

/* ── Sheet code (seed) block ──────────────────────────────────────────── */
.seed-block{
  margin-top:22px;padding:16px 18px 14px;
  border:1.5px dashed var(--line);border-radius:14px;background:#fff;
}
.seed-block .seed-row{margin:0 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seed-block > .print-note{margin-top:6px}

.seed-btn{
  min-height:48px;padding:0 20px;border-radius:999px;
  border:2px solid var(--teal);background:var(--bg);color:var(--teal);
  font:600 .95rem 'Source Sans 3',sans-serif;cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.seed-btn:hover{background:var(--teal-mist)}
.seed-btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.seed-row .seed-btn{margin-left:auto}
/* Narrow screens: whether label+chip+button fit on one line depends on the
   glyph widths of the current code (CWXX3 is wider than 7RRZ5), so a flex
   row wraps for some codes and not others — the layout visibly jumps every
   time a new code is rolled. Make it deterministic instead: the button
   ALWAYS gets its own line on phones, left-aligned like "Use code" below. */
@media (max-width:520px){
  .seed-block .seed-row{display:block}
  .seed-block .seed-row .seed-chip{margin-left:6px}
  .seed-row .seed-btn{display:flex;align-items:center;width:max-content;margin:10px 0 0}
}

.seed-enter{margin-top:14px}
.seed-enter .copies-title{margin-bottom:6px}
.seed-form{display:flex;gap:8px;flex-wrap:wrap}
.seed-form input{
  flex:0 1 190px;min-width:130px;min-height:48px;padding:0 14px;
  font:700 1.05rem 'Nunito',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-deep);
  border:2px solid var(--teal);border-radius:12px;background:#fff;
}
.seed-form input::placeholder{color:var(--muted);opacity:.55;font-weight:600}
.seed-form input:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.seed-form input[aria-invalid="true"]{border-color:var(--coral-deep)}

.seed-invalid{
  margin:8px 0 0;font-size:.9rem;font-weight:600;color:var(--coral-deep);
}

/* Never let the extras leak onto paper. */
@media print{
  .seed-block,.sheetlang{display:none !important}
}