/* ═══════════════════════════════════════════════
   PipFlip — Game Styles
   Navy dice: pick higher. Teal dice: pick lower.
   ═══════════════════════════════════════════════ */

.score-group{display:flex;flex-direction:column;align-items:center;gap:2px}
.score-label{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--text-dim)}
.score-val{font-size:16px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}

.drill-bar{width:100%;height:3px;background:var(--bg-surface);border-radius:2px;overflow:hidden;margin-bottom:14px}
.drill-bar i{display:block;height:100%;width:0;background:var(--teal);border-radius:2px;transition:width .25s}

.pf-ruleband{width:100%;border-radius:var(--radius-md);padding:14px 18px;text-align:center;
  background:var(--navy);color:var(--white);transition:background .15s}
.pf-ruleband.lower{background:var(--teal);color:var(--navy)}
.pf-ruleband .k{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;opacity:.75}
.pf-ruleband .v{font-size:clamp(20px,6vw,28px);font-weight:700;letter-spacing:-0.02em;margin-top:5px;line-height:1}

.pf-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  width:100%;padding:16px 0 4px}
.pf-cue{height:34px;display:flex;align-items:center;justify-content:center;gap:16px}
.pf-arrow{font-size:24px;color:var(--navy);opacity:0;transition:opacity .1s}
.pf-arrow.on{opacity:.5}
.pf-ring{width:50px;height:50px;flex:0 0 auto}
.pf-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.pf-ring .track{stroke:rgba(45,50,112,0.12)}
.pf-ring .fill{stroke:var(--teal);transform:rotate(-90deg);transform-origin:50% 50%}

.pf-board{display:flex;gap:clamp(14px,6vw,50px);align-items:center;justify-content:center;width:100%}
.pf-sidebtn{background:transparent;border:0;padding:6px;cursor:pointer;display:flex;gap:9px;
  border-radius:var(--radius-lg);font-family:var(--font);touch-action:manipulation}
.pf-sidebtn:focus-visible{outline:2px solid var(--sky);outline-offset:6px}
.pf-sidebtn[disabled]{cursor:default}

.pf-die{width:clamp(82px,24vw,122px);aspect-ratio:1;border-radius:17px;background:var(--bg-white);
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:4px;padding:clamp(9px,2.8vw,14px);
  box-shadow:0 8px 20px rgba(45,50,112,0.18);transition:box-shadow .12s}
.pf-die.two{width:clamp(54px,16vw,80px);border-radius:12px;padding:8px}
.pf-die i{border-radius:50%;visibility:hidden}
.pf-die.navy{box-shadow:0 8px 20px rgba(45,50,112,0.18),inset 0 0 0 4px var(--navy)}
.pf-die.teal{box-shadow:0 8px 20px rgba(45,50,112,0.18),inset 0 0 0 4px var(--teal)}
.pf-die.navy i{background:var(--navy)}
.pf-die.teal i{background:var(--teal)}
.pf-die i.on{visibility:visible}
.pf-sidebtn.right-pick .pf-die{box-shadow:0 0 0 4px var(--teal),0 8px 20px rgba(45,50,112,0.18)}
.pf-sidebtn.wrong-pick .pf-die{box-shadow:0 0 0 4px var(--error),0 8px 20px rgba(45,50,112,0.18)}

.pf-keys{text-align:center;font-size:11px;font-weight:500;letter-spacing:1.5px;color:var(--text-dim);padding:10px 0 4px}

.drill-verdict{height:22px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-dim);text-align:center}
.drill-verdict.good{color:var(--teal)}
.drill-verdict.bad{color:var(--error)}

.drill-count{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  font-size:clamp(70px,22vw,130px);font-weight:700;color:var(--navy);
  background:rgba(250,249,247,0.88);backdrop-filter:blur(8px)}
.drill-count[hidden]{display:none}

.win-sub{font-size:12px;color:var(--text-mid);line-height:1.5;max-width:280px;margin:0 auto 18px}
.go-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;justify-content:center;margin-bottom:20px}
.go-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.go-stat-label{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--text-dim)}
.go-stat-val{font-size:22px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}

/* ── Game-specific overrides ── */
.game{max-width:480px}
.game-hdr{gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.drill-bar i,.pf-arrow,.pf-die{transition:none}}