/* The PFP slab page (its name lives in the shared module). Season 1 dress: velvet and gold, like the Founders pass, with the
   slab itself drawn on the canvas in the laser's true oxide colours on steel, the same in both themes. Colours are tokens on
   :root: a blush velvet by day, a deep velvet at night (or when the page sets data-theme). Big targets for thumbs. */
:root {
  --bg: #fbe3ee;
  --bg-2: #f6cfe0;
  --glitter: rgba(201, 146, 40, .55);
  --panel: #fff6fa;
  --ink: #3a0f2c;
  --muted: #7b4e68;
  --line: #3a0f2c;
  --gold: #c9922a;
  --gold-2: #f2cf73;
  --gold-ink: #3a2306;
  --rose: #e0307d;
  --rose-2: #ff7ab4;
  --tool: #ffffff;
  --tool-on: #fff0c4;
  --bad: #b3133f;
  --gauge-bg: #f0d4e1;
  --focus: #e0307d;
  --shadow: rgba(58, 15, 44, .22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #240a1c;
    --bg-2: #4a1238;
    --glitter: rgba(242, 207, 115, .5);
    --panel: #2f0d25;
    --ink: #fcebf4;
    --muted: #d4a8c2;
    --line: #12030d;
    --tool: #3d1230;
    --tool-on: #5a2a10;
    --bad: #ff8fae;
    --gauge-bg: #4a1839;
    --focus: #f2cf73;
    --shadow: rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg: #240a1c; --bg-2: #4a1238; --glitter: rgba(242, 207, 115, .5); --panel: #2f0d25; --ink: #fcebf4; --muted: #d4a8c2;
  --line: #12030d; --tool: #3d1230; --tool-on: #5a2a10; --bad: #ff8fae; --gauge-bg: #4a1839; --focus: #f2cf73; --shadow: rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; color: var(--ink); background: var(--bg); }
body {
  font: 600 15px/1.35 ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, var(--glitter), transparent 2px),
    radial-gradient(1.2px 1.2px at 68% 8%, var(--glitter), transparent 2px),
    radial-gradient(1.4px 1.4px at 88% 42%, var(--glitter), transparent 2px),
    radial-gradient(1px 1px at 34% 64%, var(--glitter), transparent 2px),
    radial-gradient(1.5px 1.5px at 56% 86%, var(--glitter), transparent 2px),
    radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg) 70%);
  background-size: 180px 180px, 220px 220px, 260px 260px, 200px 200px, 240px 240px, 100% 100%;
  background-attachment: scroll;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.is-ended { overflow: hidden; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.pf { max-width: 1180px; margin: 0 auto; padding: 6px 16px 28px; }

/* ---------- header: gold letters on velvet ---------- */
.pf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 6px 0 10px; }
.pf-logo { margin: 0; display: flex; align-items: center; font: 900 30px/1 ui-rounded, "Arial Rounded MT Bold", "Segoe UI Black", system-ui, sans-serif; letter-spacing: .04em; }
.pf-logo span {
  display: inline-block;
  background: linear-gradient(180deg, #fff3c9 0%, var(--gold-2) 38%, var(--gold) 62%, #8a5a12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(58, 15, 44, .55);
  filter: drop-shadow(0 2px 0 var(--shadow));
}
.pf-logo b { width: 10px; }
.pf-tag { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- bench: the slab, then the picks ---------- */
.pf-bench { display: grid; gap: 16px; }
.pf-stage { display: grid; gap: 10px; align-content: start; }
.pf-slab-frame {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1;
  padding: 10px; border-radius: 18px;
  background: linear-gradient(135deg, #fff1c0, var(--gold) 35%, #7d4f10 50%, var(--gold-2) 70%, #a06d1a);
  box-shadow: 0 10px 28px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.pf-slab-frame canvas { display: block; width: 100%; height: 100%; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); background: #cdcfcc; }
.pf-empty {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24%;
  text-align: center; color: #514c52; font-size: 16px; pointer-events: none;
}
.pf-seal {
  position: absolute; top: 2%; right: 2%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c9, var(--gold-2) 40%, var(--gold) 70%, #7d4f10);
  color: var(--gold-ink); text-align: center; line-height: 1.05; box-shadow: 0 4px 10px var(--shadow), inset 0 0 0 3px rgba(255, 255, 255, .35);
  border: 2px dashed rgba(58, 35, 6, .45); pointer-events: none;
}
.pf-seal b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pf-seal span { font-size: 12px; font-weight: 800; }
.pf-seal.is-stamped { animation: stamp .55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stamp { 0% { transform: scale(2.2) rotate(-28deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-12deg); } }

.pf-gauge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; max-width: 560px; width: 100%; margin: 0 auto; }
.pf-gauge-label, .pf-gauge-text { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pf-gauge-bar { height: 12px; border-radius: 6px; background: var(--gauge-bg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--shadow); }
.pf-gauge-bar i { display: block; height: 100%; width: 2%; border-radius: 6px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .25s ease; }
.pf-gauge.is-over .pf-gauge-bar i { background: linear-gradient(90deg, var(--rose-2), var(--bad)); }
.pf-gauge.is-over .pf-gauge-text { color: var(--bad); }
.pf-caption { margin: 0; text-align: center; color: var(--muted); min-height: 1.35em; font-size: 14px; }

.pf-panel {
  display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: 18px; background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow), inset 0 0 0 1.5px rgba(201, 146, 42, .55);
}
.pf-step { display: grid; gap: 8px; }
.pf-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-note, .pf-msg, .pf-fine { margin: 0; font-size: 14px; color: var(--muted); }
.pf-msg { min-height: 1.35em; }
.pf-msg.is-bad { color: var(--bad); }
.pf-fine { font-size: 13px; }

.pf-btn {
  min-height: 48px; padding: 8px 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--tool); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pf-btn:active { transform: translateY(1px); }
.pf-btn:disabled, .pf-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.pf-btn svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-btn svg .fill { fill: var(--rose-2); stroke: currentColor; }
.pf-btn svg .dot, .pf-btn svg .pip { fill: currentColor; stroke: none; }
.pf-btn svg .px { fill: currentColor; stroke: none; }
.pf-btn svg .cut { fill: var(--tool); stroke: none; }
.pf-btn svg .txt { stroke-dasharray: 2 2.2; }
.pf-go { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); box-shadow: 0 2px 0 #7d4f10, inset 0 0 0 1px rgba(255, 255, 255, .4); font-weight: 800; }
.pf-small { min-height: 44px; font-size: 14px; }

.pf-seg { display: grid; gap: 8px; }
.pf-seg-2 { grid-template-columns: 1fr 1fr; }
.pf-seg-3 { grid-template-columns: repeat(3, 1fr); }
.pf-seg-btn { flex-direction: column; gap: 2px; padding: 10px 8px; text-align: center; }
.pf-seg-btn b { font-size: 15px; }
.pf-seg-btn i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.pf-seg-btn[aria-checked="true"], .pf-pot[aria-checked="true"] {
  background: var(--tool-on); box-shadow: inset 0 0 0 2.5px var(--gold), 0 2px 8px var(--shadow);
}
.pf-layout svg { width: 34px; height: 34px; }

.pf-id-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pf-id {
  min-height: 48px; width: 100%; padding: 8px 14px; border-radius: 12px; border: 0; background: var(--tool); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--shadow); font-size: 20px; font-weight: 800; letter-spacing: .06em;
}
.pf-id:disabled { opacity: .5; }
.pf-dice { width: 56px; padding: 0; }
.pf-dice svg { width: 30px; height: 30px; }
.pf-dice.is-rolling svg { animation: roll .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes roll { from { transform: rotate(-200deg) scale(.7); } to { transform: none; } }
.pf-load { padding: 8px 18px; }

.pf-wallet { display: grid; gap: 8px; }
.pf-wallet-on { grid-template-columns: 1fr auto; align-items: center; }
.pf-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px; border-radius: 999px; background: var(--tool-on); font-size: 14px; overflow-wrap: anywhere; }
.pf-chip-dot { width: 10px; height: 10px; border-radius: 50%; background: #2bbf7a; box-shadow: 0 0 0 3px rgba(43, 191, 122, .25); flex: none; }
.pf-wallet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pf-wallet-pick img { border-radius: 6px; }

.pf-pots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf-pot { flex-direction: column; gap: 2px; padding: 8px 4px 8px; }
.pf-pot::before {
  content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--pot);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 3.5px var(--shadow);
}
.pf-pot b { font-size: 13px; text-transform: capitalize; }
.pf-pot i { font-style: normal; font-size: 11px; color: var(--muted); }
.pf-pot[aria-disabled="true"]::before { background: repeating-linear-gradient(45deg, var(--pot) 0 4px, transparent 4px 8px); }

.pf-finish-sw { display: inline-flex; gap: 2px; }
.pf-finish-sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--shadow); }
.pf-sliders { display: grid; gap: 6px; }
.pf-slider { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.pf-slider input { width: 100%; min-height: 32px; accent-color: var(--gold); }
.pf-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.pf-check input { width: 22px; height: 22px; accent-color: var(--gold); }
.pf-check:has(input:disabled) { opacity: .5; }

.pf-burn {
  min-height: 60px; font-size: 18px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--rose-2), var(--rose)); color: #fff;
  box-shadow: 0 3px 0 #8d0f47, 0 8px 18px rgba(224, 48, 125, .35);
}
.pf-burn svg { width: 26px; height: 26px; }
.pf-burn svg .flame { fill: #fff3c9; stroke: #8d0f47; }

/* ---------- the end card ---------- */
.pf-end {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: start center; overflow-y: auto; padding: 16px;
  background: rgba(36, 10, 28, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pf-end-card {
  width: 100%; max-width: 560px; display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4), inset 0 0 0 2px var(--gold);
}
.pf-end-card h2 { margin: 0; font-size: 24px; text-align: center; }
.pf-end-card canvas { width: 100%; max-width: min(100%, 44vh); height: auto; aspect-ratio: 1; justify-self: center; border-radius: 10px; }
.pf-end-time, .pf-end-line, .pf-end-note { margin: 0; text-align: center; }
.pf-end-line, .pf-end-note { font-size: 13px; color: var(--muted); }
.pf-code-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-code {
  display: block; max-height: 8.5rem; overflow: auto; padding: 10px; border-radius: 10px; background: #1b0715; color: var(--gold-2);
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all;
}
.pf-end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* the site adds its shared burn-code panel (#burnCode) after this box; while the panel shows, it carries the code (with its own
   Copy button), so this box steps aside (hidden, not removed: it keeps its text) and Make another takes the row. No panel, or a
   panel that never showed: this box shows the code */
.pf-end:has(#burnCode:not([hidden])) :is(.pf-code-label, .pf-code, #copy, #copy-note) { display: none; }
.pf-end:has(#burnCode:not([hidden])) .pf-end-actions { grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .pf { padding-top: 12px; }
  .pf-bench { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); align-items: start; gap: 24px; }
  .pf-stage { position: sticky; top: 12px; }
  .pf-logo { font-size: 36px; }
}
@media (max-width: 380px) {
  .pf-pots { grid-template-columns: repeat(2, 1fr); }
  .pf-seg-3 .pf-seg-btn b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}