/* PlayForge game shell. Every colour here is a --pf-* custom property the shell sets
   from the resolved config, so one stylesheet dresses every brand and occasion. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.game-page {
  margin: 0;
  background: var(--pf-bg, #0f1020);
  color: var(--pf-text, #f5f5fa);
  font-family: var(--pf-font-body, "Inter", system-ui, sans-serif);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.pf-game {
  --pf-primary: #EC008C; --pf-secondary: #6366F1; --pf-accent: #EA580C;
  --pf-bg: #0f1020; --pf-surface: #1b1c33; --pf-text: #f5f5fa; --pf-text-muted: #a5a8c4;
  --pf-success: #22c55e; --pf-danger: #ef4444; --pf-radius: 16px;
  --pf-font-heading: "Inter", system-ui, sans-serif;
  --pf-font-body: "Inter", system-ui, sans-serif;
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: var(--pf-bg);
  color: var(--pf-text);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  isolation: isolate;
}

/* The shell hides things with the `hidden` attribute, and several of them are flex or
   grid containers whose own display rule beats the user-agent's `[hidden] { display:none }`.
   That is how the streak chip ended up on screen reading "0 in a row". One rule rather
   than a paired `[hidden]` selector beside every component, because the next component
   toggled this way would forget it too. */
.pf-game [hidden] { display: none !important; }

/* Stage: fx layer behind, game canvas in front */
.pf-stage { position: relative; grid-row: 2; min-height: 0; overflow: hidden; }
.pf-canvas, .pf-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.pf-fx { pointer-events: none; z-index: 1; }
.pf-canvas { z-index: 2; }
.pf-stage.is-shaking { animation: pf-shake 0.45s cubic-bezier(.36,.07,.19,.97); }
@keyframes pf-shake {
  10%, 90% { transform: translate(-2px, 0); }
  20%, 80% { transform: translate(4px, 0); }
  30%, 50%, 70% { transform: translate(-7px, 0); }
  40%, 60% { transform: translate(7px, 0); }
}

/* ------------------------------------------------------------------ HUD */
.pf-hud {
  grid-row: 1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px clamp(10px, 3vw, 22px);
  background: color-mix(in srgb, var(--pf-surface) 78%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  z-index: 5;
}
/* The back link is fixed to the top-left, so the top HUD starts clear of it. */
.pf-hud:not(.pf-hud-bottom) { padding-left: 180px; }
body.is-embed .pf-hud:not(.pf-hud-bottom) { padding-left: clamp(10px, 3vw, 22px); }
.pf-hud-bottom { grid-row: 3; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.pf-game:has(.pf-hud-bottom) { grid-template-rows: 1fr auto; }
.pf-game:has(.pf-hud-bottom) .pf-stage { grid-row: 1; }
.pf-hud-left, .pf-hud-right, .pf-hud-chips { display: flex; align-items: center; gap: 8px; }
.pf-hud-chips { flex: 1; justify-content: center; flex-wrap: wrap; }
.pf-hud-right { margin-left: auto; }
.pf-hud-box {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 12px; border-radius: calc(var(--pf-radius) * 0.6);
  background: rgba(255, 255, 255, 0.07); min-width: 62px;
}
.pf-hud-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pf-text-muted); font-weight: 700; }
.pf-hud-value { font-family: var(--pf-font-heading); font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pf-hud-timer.is-urgent { background: color-mix(in srgb, var(--pf-danger) 30%, transparent); animation: pf-pulse 1s infinite; }
@keyframes pf-pulse { 50% { opacity: 0.55; } }
.pf-hud-lives { display: flex; gap: 5px; align-items: center; padding-left: 4px; }
.pf-life { width: 11px; height: 11px; border-radius: 50%; background: var(--pf-danger); box-shadow: 0 0 8px color-mix(in srgb, var(--pf-danger) 60%, transparent); }
.pf-life.is-lost { background: rgba(255, 255, 255, 0.18); box-shadow: none; }
.pf-bar { width: 100%; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.pf-bar-fill { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--pf-primary), var(--pf-secondary)); transition: width 0.25s ease; }
.pf-hud-progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 0; z-index: 4; }

/* ------------------------------------------------------------------ screens */
.pf-screen {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: clamp(14px, 4vw, 32px);
  background: color-mix(in srgb, var(--pf-bg) 72%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: pf-fade 0.28s ease both;
  overflow-y: auto;
}
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
.pf-card {
  width: min(100%, 560px);
  background: color-mix(in srgb, var(--pf-surface) 92%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--pf-radius) * 1.4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  padding: clamp(20px, 4vw, 36px);
  text-align: center;
  animation: pf-rise 0.36s cubic-bezier(.2,.8,.2,1) both;
}
.pf-card-sm { width: min(100%, 400px); }
@keyframes pf-rise { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.pf-title { font-family: var(--pf-font-heading); font-size: clamp(1.7rem, 5vw, 2.6rem); margin: 6px 0 10px; line-height: 1.1; }
.pf-subtitle { font-size: 1.05rem; margin: 0 0 10px; }
.pf-instructions { color: var(--pf-text-muted); margin: 0 0 12px; line-height: 1.6; }
.pf-controls { font-size: 0.85rem; margin: 0 0 18px; }
.pf-muted { color: var(--pf-text-muted); }
.pf-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--pf-primary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-primary) 45%, transparent);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Brand lockup — the tenant's identity, never the platform's */
.pf-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }
.pf-brand.is-compact { flex-direction: row; justify-content: center; gap: 10px; margin-bottom: 10px; }
.pf-brand-logo { max-height: 56px; max-width: min(70%, 220px); object-fit: contain; }
.pf-brand.is-compact .pf-brand-logo { max-height: 32px; }
.pf-brand-name { font-family: var(--pf-font-heading); font-weight: 700; font-size: 1.05rem; }
.pf-brand-tagline { font-size: 0.85rem; color: var(--pf-text-muted); }

/* Buttons */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--pf-font-heading); font-weight: 700; font-size: 1rem; line-height: 1;
  cursor: pointer; text-decoration: none; color: #fff; background: var(--pf-primary);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, opacity 0.14s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.pf-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--pf-primary) 45%, transparent); }
.pf-btn:active { transform: translateY(0) scale(0.97); }
.pf-btn-lg { min-height: 58px; padding: 16px 34px; font-size: 1.15rem; }
.pf-btn-sm { min-height: 40px; padding: 8px 16px; font-size: 0.85rem; }
.pf-btn-secondary { background: var(--pf-secondary); color: #08131a; }
.pf-btn-ghost { background: rgba(255, 255, 255, 0.08); color: var(--pf-text); border-color: rgba(255, 255, 255, 0.16); }
.pf-btn-ghost:hover { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.pf-btn-icon { width: 42px; min-height: 42px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.09); color: var(--pf-text); }
.pf-btn-icon:hover { background: rgba(255, 255, 255, 0.18); box-shadow: none; transform: none; }
.pf-btn-icon.is-off { opacity: 0.45; }
.pf-ic { display: inline-flex; }
/* Theme-selectable button styles */
.pf-btn-style-outline .pf-btn-primary { background: transparent; border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-btn-style-glass .pf-btn-primary { background: color-mix(in srgb, var(--pf-primary) 35%, transparent); backdrop-filter: blur(8px); border-color: color-mix(in srgb, var(--pf-primary) 60%, transparent); }
.pf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* Countdown */
.pf-countdown { background: color-mix(in srgb, var(--pf-bg) 45%, transparent); }
.pf-count { font-family: var(--pf-font-heading); font-size: clamp(4rem, 18vw, 9rem); font-weight: 800; color: var(--pf-primary); text-shadow: 0 8px 40px color-mix(in srgb, var(--pf-primary) 60%, transparent); }
.pf-count.is-pop { animation: pf-pop 0.6s cubic-bezier(.2,.8,.2,1); }
@keyframes pf-pop { 0% { transform: scale(0.5); opacity: 0; } 40% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 0.9; } }

/* Loading */
.pf-loading-title { margin: 10px 0 14px; color: var(--pf-text-muted); }

/* ---- Result screen -------------------------------------------------------
   Built so the two things a player wants are never more than a glance away: how
   they did, and how to go again. Everything else — the review, the board, the
   name prompt, sharing — sits below the actions and folds away. */
.pf-end .pf-end-card { width: min(100%, 520px); text-align: center; }
.pf-end-head { margin-bottom: 4px; }
.pf-end-title { font-family: var(--pf-font-heading); font-size: clamp(1.4rem, 4.2vw, 2rem); margin: 4px 0 6px; }
.pf-end.is-win .pf-end-title { color: var(--pf-success); }
.pf-end-message { color: var(--pf-text-muted); margin: 0 0 12px; font-size: 0.94rem; }

.pf-figures { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0 16px; }
.pf-figure {
  display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 16px; min-width: 84px;
  border-radius: calc(var(--pf-radius) * 0.7); background: rgba(255, 255, 255, 0.07);
}
.pf-figure-value { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; }
.pf-figure-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--pf-text-muted); font-weight: 700;
}
/* The lead figure is the one worth carrying away — accuracy in a training round,
   score otherwise. */
.pf-figure.is-lead { padding: 12px 22px; }
.pf-figure.is-lead .pf-figure-value { font-family: var(--pf-font-heading); font-size: 2rem; color: var(--pf-primary); }
.pf-figure.is-lead.is-good .pf-figure-value { color: var(--pf-success); }
.pf-figure.is-lead.is-mid .pf-figure-value { color: var(--pf-accent); }
.pf-figure.is-lead.is-poor .pf-figure-value { color: var(--pf-danger); }

.pf-end-actions { margin: 0 0 4px; }

/* ---- Folding sections ---- */
.pf-disclosure {
  margin-top: 10px; text-align: left; border-radius: calc(var(--pf-radius) * 0.6);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.pf-disclosure-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer;
  list-style: none; font-size: 0.86rem; font-weight: 600; user-select: none;
}
.pf-disclosure-head::-webkit-details-marker { display: none; }
.pf-disclosure-head:hover { background: rgba(255, 255, 255, 0.04); }
.pf-disclosure-head:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: -2px; }
.pf-disclosure-title { flex: 1; }
.pf-disclosure-note {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--pf-text-muted);
}
.pf-disclosure-caret { color: var(--pf-text-muted); transition: transform var(--pf-t, 160ms) ease; font-size: 0.8rem; }
.pf-disclosure[open] .pf-disclosure-caret { transform: rotate(180deg); }
.pf-disclosure-body { padding: 0 14px 14px; }
.pf-disclosure-review { border-color: color-mix(in srgb, var(--pf-danger) 32%, transparent); }
.pf-disclosure-review .pf-disclosure-note { background: color-mix(in srgb, var(--pf-danger) 24%, transparent); color: var(--pf-danger); }
.pf-disclosure-clean .pf-disclosure-note { background: color-mix(in srgb, var(--pf-success) 20%, transparent); color: var(--pf-success); }
.pf-disclosure-share .pf-disclosure-title { color: var(--pf-text-muted); font-weight: 600; }

/* Inside a folded section the debrief no longer needs its own frame. */
.pf-disclosure .pf-debrief { margin: 0; padding: 0; background: none; border: 0; }

/* Name entry */
.pf-name-form { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pf-name-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--pf-text-muted); }
.pf-optional {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1);
}
.pf-name-skip { align-self: center; }
.pf-name-row { display: flex; gap: 8px; width: min(100%, 340px); }
.pf-input {
  flex: 1; min-height: 48px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.25);
  color: var(--pf-text); font-size: 1rem; text-align: center;
}
.pf-input:focus { outline: none; border-color: var(--pf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-primary) 35%, transparent); }
.pf-input.is-invalid { border-color: var(--pf-danger); }

/* Leaderboard */
.pf-board { margin-top: 18px; text-align: left; }
.pf-board-title { display: flex; align-items: center; gap: 8px; justify-content: center; font-family: var(--pf-font-heading); font-size: 1rem; margin: 0 0 10px; color: var(--pf-text-muted); }
.pf-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 230px; overflow-y: auto; }
.pf-board-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: calc(var(--pf-radius) * 0.6); background: rgba(255, 255, 255, 0.05); font-size: 0.9rem; }
.pf-board-row.is-me { background: color-mix(in srgb, var(--pf-primary) 26%, transparent); border: 1px solid color-mix(in srgb, var(--pf-primary) 50%, transparent); }
.pf-board-rank { color: var(--pf-text-muted); font-weight: 700; font-size: 0.8rem; }
.pf-board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-board-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.pf-board-empty, .pf-board-note { text-align: center; font-size: 0.85rem; margin: 10px 0 0; }

/* Share + CTA */
.pf-share { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pf-disclosure .pf-share { margin-top: 0; justify-content: flex-start; }
.pf-share-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pf-text-muted); font-weight: 700; }
.pf-cta { margin-top: 16px; }
.pf-slot:empty { display: none; }

/* Back link + embed mode */
.game-back {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); z-index: 20;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.4); color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600;
  backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15);
}
.game-back:hover { background: rgba(0, 0, 0, 0.6); }
body.is-embed .game-back { display: none; }
.pf-noscript { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }

@media (max-width: 560px) {
  .pf-hud { padding: 8px 10px; gap: 6px; }
  .pf-hud:not(.pf-hud-bottom) { padding-left: 62px; } /* the back link collapses to an arrow */
  .pf-hud-box { padding: 4px 9px; min-width: 54px; }
  .pf-hud-chips { order: 3; width: 100%; justify-content: flex-start; }
  .game-back span { display: none; }
  .pf-figures { gap: 6px; }
  .pf-figure { padding: 8px 12px; min-width: 70px; }
  .pf-figure.is-lead { padding: 10px 16px; }
  .pf-figure.is-lead .pf-figure-value { font-size: 1.7rem; }
  .pf-end .pf-end-card { padding: 18px 16px; }
  .pf-disclosure-body { padding: 0 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Multiplayer: lobby, turn banner, standings — and the reward panel.
   Same --pf-* custom properties as everything else, so a Christmas lobby is
   red and a Diwali lobby is amber without a single extra rule.
   ========================================================================== */

.pf-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.pf-lobby .pf-panel {
  background: var(--pf-surface, #1b1c33);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pf-radius, 16px);
  padding: clamp(20px, 4vw, 34px);
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.pf-lobby .pf-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pf-primary, #EC008C);
}
.pf-lobby .pf-title { margin: 0; font-family: var(--pf-font-heading); font-size: clamp(1.4rem, 4vw, 1.9rem); }
.pf-lobby .pf-muted { color: var(--pf-text-muted, #a5a8c4); margin: 0; font-size: 0.92rem; }

.pf-room-code-box {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 12px; border-radius: calc(var(--pf-radius, 16px) * 0.6);
  background: rgba(255, 255, 255, 0.06); border: 1px dashed rgba(255, 255, 255, 0.22);
}
.pf-tiny { font-size: 0.66rem; letter-spacing: 0.14em; }
.pf-room-code {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: clamp(1.6rem, 6vw, 2.3rem); letter-spacing: 0.22em; font-weight: 700;
  color: var(--pf-text); padding-left: 0.22em; /* balance the trailing letter-spacing */
}
.pf-link-input {
  width: 100%; padding: 9px 12px; border-radius: calc(var(--pf-radius, 16px) * 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.25);
  color: var(--pf-text-muted); font-size: 0.8rem; text-align: center;
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
}

.pf-seats { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pf-seat {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: left;
  border-radius: calc(var(--pf-radius, 16px) * 0.5);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--pf-text-muted); font-size: 0.9rem;
}
.pf-seat.is-taken { color: var(--pf-text); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); }
.pf-seat-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.12); font-size: 0.7rem; font-weight: 700;
}
.pf-seat.is-taken .pf-seat-num { background: var(--pf-primary); color: #fff; }
.pf-seat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.14);
}
.pf-lobby-count { font-size: 0.82rem !important; min-height: 1.2em; }

/* Whose turn it is, pinned over the board rather than hidden in the HUD. */
.pf-turn-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 6px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: rgba(0, 0, 0, 0.45); color: var(--pf-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px);
  pointer-events: none; transition: background 160ms, color 160ms;
}
.pf-turn-banner.is-you { background: var(--pf-primary); color: #fff; border-color: transparent; }

.pf-standings-wrap { width: 100%; margin-top: 10px; }
.pf-standings-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pf-text-muted); margin: 0 0 8px; font-weight: 700; }
.pf-standings { display: flex; flex-direction: column; gap: 5px; }
.pf-standing {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: calc(var(--pf-radius, 16px) * 0.5);
  background: rgba(255, 255, 255, 0.05); font-size: 0.88rem;
}
.pf-standing.is-you { border: 1px solid var(--pf-primary); }
.pf-standing.is-winner { background: color-mix(in srgb, var(--pf-success) 22%, transparent); }
.pf-standing-rank { flex: none; width: 20px; font-weight: 700; color: var(--pf-text-muted); }
.pf-standing-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pf-standing-score { font-variant-numeric: tabular-nums; }

/* A certificate the run just earned. */
.pf-reward {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 14px;
  padding: 14px; border-radius: calc(var(--pf-radius, 16px) * 0.7);
  background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-accent) 40%, transparent);
}
.pf-reward-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pf-accent); }
.pf-reward-title { font-family: var(--pf-font-heading); font-size: 1rem; }
.pf-match-note { margin-top: 10px; font-size: 0.85rem; }

/* ==========================================================================
   Learning: the objective before the round, the debrief after it.
   Themed by the same --pf-* properties as everything else, so an awareness
   debrief is teal for one client and amber for another with no extra rules.
   ========================================================================== */

/* ---- the objective, on the intro screen ---- */
.pf-objective {
  margin: 4px 0 2px;
  padding: 12px 14px;
  border-radius: calc(var(--pf-radius, 16px) * 0.6);
  background: color-mix(in srgb, var(--pf-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-primary) 32%, transparent);
  text-align: left;
}
.pf-objective-label {
  display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pf-primary); margin-bottom: 4px;
}
.pf-objective-text { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--pf-text); }
.pf-topic-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.pf-topic-chip {
  font-size: 0.68rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: var(--pf-text-muted);
}

/* ---- the debrief, on the result screen ---- */
.pf-debrief {
  width: 100%;
  text-align: left;
  margin: 4px 0 10px;
  padding: 14px;
  border-radius: calc(var(--pf-radius, 16px) * 0.65);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pf-debrief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pf-debrief-eyebrow {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pf-primary);
}
.pf-debrief-score { font-size: 0.9rem; }
.pf-debrief-score strong { font-family: var(--pf-font-heading); font-size: 1.15rem; }

.pf-debrief-topics { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
/* The topic name is the label a player has to recognise, so it gets the room it needs
   and the bar takes what is left. Truncating "Multi-factor authentication" to
   "Multi-factor authe…" told them nothing. */
.pf-topic-row { display: grid; grid-template-columns: minmax(130px, 1.6fr) minmax(60px, 1fr) auto; gap: 10px; align-items: center; font-size: 0.78rem; }
.pf-topic-name { color: var(--pf-text-muted); line-height: 1.25; }
.pf-topic-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pf-topic-fill { display: block; height: 100%; border-radius: 3px; background: var(--pf-primary); }
.pf-topic-fill.is-good { background: var(--pf-success, #22c55e); }
.pf-topic-fill.is-mid { background: var(--pf-accent, #f59e0b); }
.pf-topic-fill.is-poor { background: var(--pf-danger, #ef4444); }
.pf-topic-pct { font-variant-numeric: tabular-nums; color: var(--pf-text-muted); min-width: 34px; text-align: right; }

.pf-debrief-title {
  margin: 0 0 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pf-text-muted);
}
.pf-debrief-list { display: flex; flex-direction: column; gap: 10px; }
.pf-debrief-item {
  padding: 10px 12px;
  border-radius: calc(var(--pf-radius, 16px) * 0.45);
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--pf-danger, #ef4444);
}
.pf-debrief-prompt { font-weight: 700; font-size: 0.86rem; margin-bottom: 4px; }
.pf-debrief-why { margin: 0; font-size: 0.83rem; line-height: 1.5; color: var(--pf-text-muted); }
.pf-debrief-takeaway {
  margin: 6px 0 0; font-size: 0.82rem; font-weight: 600; line-height: 1.45;
  color: var(--pf-success, #22c55e);
}
.pf-debrief-clean { margin: 0; font-size: 0.88rem; color: var(--pf-success, #22c55e); font-weight: 600; }
.pf-debrief-objective { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ---- in-play verdict toast ---- */
.pf-toast-fb {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 5; pointer-events: none;
  padding: 8px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px);
}
.pf-toast-fb.is-right { color: var(--pf-success, #22c55e); }
.pf-toast-fb.is-wrong { color: var(--pf-danger, #ef4444); }
.pf-toast-mark { font-size: 1rem; }

/* ---- the coach card: the teaching moment, in play ------------------------
   The single most important component in the product. It has to be readable in one
   glance over a moving game, it must never take a click the player meant for the game,
   and it must get out of the way on its own. */
.pf-coach {
  position: absolute; left: 50%; bottom: 14px; z-index: 6;
  width: min(560px, calc(100% - 28px));
  display: grid; gap: 5px;
  padding: 13px 16px 15px;
  border-radius: 14px;
  border: 1px solid var(--pf-coach-tint, rgba(255, 255, 255, 0.16));
  border-left: 4px solid var(--pf-coach-tint, rgba(255, 255, 255, 0.4));
  background: rgba(9, 12, 20, 0.9);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  text-align: left; overflow: hidden;
  /* Never steals a tap meant for the game underneath. */
  pointer-events: none;
  /* Composited-only properties, so a card appearing mid-round costs no layout. */
  transform: translate(-50%, 14px); opacity: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
@supports (backdrop-filter: blur(10px)) {
  .pf-coach { background: rgba(9, 12, 20, 0.76); backdrop-filter: blur(12px) saturate(1.2); }
}
.pf-coach.is-in { transform: translate(-50%, 0); opacity: 1; }
.pf-coach.is-right { --pf-coach-tint: var(--pf-success); }
.pf-coach.is-wrong { --pf-coach-tint: var(--pf-danger); }

.pf-coach-head { display: flex; align-items: center; gap: 8px; }
.pf-coach-mark {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; font-size: 0.7rem; font-weight: 800; line-height: 1;
  color: #08090d; background: var(--pf-coach-tint);
}
.pf-coach-verdict {
  font-family: var(--pf-font-heading); font-size: 0.95rem; font-weight: 700;
  color: var(--pf-coach-tint); letter-spacing: 0.01em;
}
.pf-coach-topic {
  margin-left: auto; flex: none;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.09);
}
.pf-coach-why {
  margin: 0; font-size: 0.86rem; line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.pf-coach-takeaway {
  margin: 2px 0 0; display: flex; gap: 7px; align-items: baseline;
  font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72);
}
.pf-coach-takeaway-label {
  flex: none; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pf-coach-tint);
}
/* A visible clock. The card leaving on its own is less jarring when you saw it coming. */
.pf-coach-fuse {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: left center; background: var(--pf-coach-tint); opacity: 0.55;
  animation: pf-coach-fuse linear forwards;
}
@keyframes pf-coach-fuse { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 560px) {
  .pf-coach { bottom: 10px; padding: 11px 13px 13px; gap: 4px; }
  .pf-coach-why { font-size: 0.81rem; }
  .pf-coach-topic { display: none; }
}
/* Someone who asked for less motion still needs the lesson — only the movement goes. */
@media (prefers-reduced-motion: reduce) {
  .pf-coach { transition: opacity 120ms linear; transform: translate(-50%, 0); }
  .pf-coach-fuse { animation: none; opacity: 0.3; }
}

/* ---- judgement streak ----
   Counts correct CALLS, never fast clicks. See trackStreak() for why that matters. */
.pf-streak {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--pf-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-accent) 42%, transparent);
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.pf-streak-flame { font-size: 0.82rem; line-height: 1; }
.pf-streak-value { font-variant-numeric: tabular-nums; font-size: 0.92rem; color: var(--pf-accent); }
.pf-streak-label { color: rgba(255, 255, 255, 0.62); font-weight: 600; }
.pf-streak.is-pop { animation: pf-streak-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pf-streak-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); }
}
@media (max-width: 560px) { .pf-streak-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .pf-streak.is-pop { animation: none; } }

/* ---- the rank ----
   The line a player repeats. It leads the card because "you are Phish-proof" is the only
   part of a result anyone has ever said out loud. */
.pf-rank-label {
  display: block; margin-bottom: 2px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pf-text-muted);
}
.pf-rank-title {
  background: linear-gradient(100deg, var(--pf-primary), var(--pf-secondary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pf-rank-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* A gradient that never resolves is unreadable; give it a colour to fall back to. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pf-rank-title { color: var(--pf-primary); -webkit-text-fill-color: currentColor; background: none; }
}
@keyframes pf-rank-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pf-rank-title { animation: none; } }