/* ═══════════════════════════════════════════════════════════════════════════
   Penalty Mind-Duel — Night-stadium dark theme
   Accent: floodlight gold #f5c542 on deep turf #0d2818
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Page-level token overrides (dark posture) ─────────────────────────── */
.penalty-duel-page {
  --color-bg: #07160e;
  --color-surface: #0d2818;
  --color-text: #e8f0e2;
  --color-text-muted: #7fa882;
  --pd-gold: #f5c542;
  --pd-gold-dim: #c49a22;
  --pd-gold-bright: #ffd94a;
  --pd-green-deep: #0d2818;
  --pd-green-mid: #133d20;
  --pd-green-turf: #1a5c2a;
  --pd-green-bright: #2e8b47;
  --pd-post-white: #d4e8c8;
  --pd-zone-hover: rgba(245, 197, 66, 0.18);
  --pd-zone-active: rgba(245, 197, 66, 0.38);
  --pd-radius: 6px;
  /* turf border/fill palette */
  --pd-border-turf: #1a4a28;
  --pd-border-keep: #2a5a36;
  --pd-dot-border: #3a6a44;
  --pd-dot-keep: #2a5a3a;
  --pd-dot-save-bg: #2e4a36;
  --pd-dot-miss-bg: #3a2a1a;
  --pd-dot-miss-border: #6a4a2a;
  --pd-meter-bg: #0a2014;
  --pd-page-bg-deep: #07160e;
  --pd-text-dark: #0a1408;
  --pd-miss-red-border: #8b4444;
  --pd-miss-red-text: #e08888;
  /* ball surface */
  --pd-ball-hi: #fff;
  --pd-ball-mid: #e8e8e0;
  --pd-ball-shadow: #c8c8b0;
  /* dark surface tokens for shared discovery section */
  --color-card: #0d2818;
  --color-border: #1a4a28;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ─── Tool frame overrides ────────────────────────────────────────────────── */
.penalty-duel-page .tool-frame {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 16px;
}

.penalty-duel-page .page-title {
  color: var(--pd-gold);
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.01em;
  margin: 0;
}

.penalty-duel-page .page-subtitle {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-top: 4px;
}

.penalty-duel-page .tool-header-block {
  padding-block: 10px 4px;
}

/* ─── Main UI shell ───────────────────────────────────────────────────────── */
.pd-ui {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 900px;
  margin-inline: auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pd-green-deep);
  border: 1.5px solid var(--pd-border-turf);
  box-shadow: 0 0 60px rgba(245, 197, 66, 0.04), inset 0 0 40px rgba(0,0,0,0.4);
}

/* ─── HUD ─────────────────────────────────────────────────────────────────── */
.pd-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 8px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--pd-border-turf);
  flex-wrap: nowrap;
}

.pd-hud-rounds {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: visible;
  align-items: center;
}

.pd-round-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--pd-dot-border);
  background: transparent;
  transition: background 0.25s, border-color 0.25s;
  flex-shrink: 0;
}

/* Keeper-phase dots (second half) styled distinctly — dimmer border, offset shape */
.pd-round-dot--keep {
  border-color: var(--pd-dot-keep);
  border-style: dashed;
}
.pd-round-dot[data-result="goal"] {
  background: var(--pd-gold);
  border-color: var(--pd-gold);
}
.pd-round-dot[data-result="save"] {
  background: var(--pd-dot-save-bg);
  border-color: var(--pd-dot-border);
}
.pd-round-dot[data-result="miss"] {
  background: var(--pd-dot-miss-bg);
  border-color: var(--pd-dot-miss-border);
}
.pd-round-dot[data-result="current"] {
  border-color: var(--pd-gold);
  box-shadow: 0 0 6px var(--pd-gold);
  animation: pd-dot-pulse 1s infinite;
}
@keyframes pd-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pd-hud-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pd-score-you { color: var(--pd-gold); }
.pd-score-sep { color: var(--color-text-muted); font-size: 1.1rem; }
.pd-score-ai  { color: var(--color-text-muted); }

.pd-hud-phase {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
  min-width: 60px;
}

/* ─── Taunt ribbon ────────────────────────────────────────────────────────── */
.pd-taunt-ribbon {
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid var(--pd-border-turf);
  padding: 7px 16px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.pd-taunt-text {
  font-size: 0.875rem;
  color: var(--pd-gold);
  font-style: italic;
  opacity: 0.9;
  line-height: 1.4;
  transition: opacity 0.3s;
}

/* ─── Pitch row layout ────────────────────────────────────────────────────── */
.pd-pitch-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

/* ─── 讀心 meter ─────────────────────────────────────────────────────────── */
.pd-mind-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 12px 12px;
  background: rgba(0,0,0,0.25);
  border-right: 1px solid var(--pd-border-turf);
  min-width: 52px;
  width: 52px;
  flex-shrink: 0;
  user-select: none;
}

.pd-mind-meter-label {
  font-size: 0.875rem;
  color: var(--pd-gold-bright);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.pd-mind-meter-track {
  flex: 1;
  min-height: 80px;
  width: 14px;
  background: var(--pd-meter-bg);
  border-radius: 8px;
  border: 1px solid var(--pd-border-turf);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pd-mind-meter-fill {
  width: 100%;
  background: linear-gradient(to top, #3a6a8a, #5aa0c0);  /* cool = still reading */
  border-radius: 8px;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s;
  position: absolute;
  bottom: 0;
  left: 0;
}
/* The fill warms as confidence climbs: cool → amber → hot gold (locked on). */
.pd-mind-meter-fill[data-lock="warm"] {
  background: linear-gradient(to top, var(--pd-gold-dim), var(--pd-gold));
}
.pd-mind-meter-fill[data-lock="hot"] {
  background: linear-gradient(to top, var(--pd-gold), var(--pd-gold-bright));
  box-shadow: 0 0 10px rgba(245,197,66,0.6);
}

.pd-mind-meter-pct {
  font-size: 0.72rem;
  color: var(--pd-gold-bright);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.pd-mind-guess {
  font-size: 0.58rem;
  color: var(--color-text-muted);
  text-align: center;
  min-height: 14px;
  word-break: break-all;
}

/* ─── Goal area ───────────────────────────────────────────────────────────── */
.pd-goal-area {
  flex: 1;
  position: relative;
  aspect-ratio: 4 / 3;          /* taller — more vertical stadium presence */
  min-height: 190px;
  overflow: hidden;
  cursor: default;
  background:
    /* central floodlight cone from above */
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(245,197,66,0.16) 0%, transparent 62%),
    /* two corner floodlight glows (night-stadium brand) */
    radial-gradient(circle 40% at 4% 2%, rgba(245,197,66,0.14) 0%, transparent 55%),
    radial-gradient(circle 40% at 96% 2%, rgba(245,197,66,0.14) 0%, transparent 55%),
    /* turf gradient, darker at the back of the net */
    linear-gradient(180deg, var(--pd-green-turf) 0%, var(--pd-green-mid) 62%, var(--pd-green-deep) 100%);
}

/* Persistent corner floodlight flares — the night-stadium signature. */
.pd-goal-area::before,
.pd-goal-area::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,214,0.95) 0%, rgba(245,197,66,0.55) 40%, transparent 72%);
  box-shadow: 0 0 24px 6px rgba(245,197,66,0.35);
  pointer-events: none;
  z-index: 2;
  animation: pd-flood-flicker 4.5s ease-in-out infinite;
}
.pd-goal-area::before { left: -4px; }
.pd-goal-area::after  { right: -4px; animation-delay: 1.6s; }
@keyframes pd-flood-flicker {
  0%, 100% { opacity: 0.9; }
  48%      { opacity: 1; }
  52%      { opacity: 0.82; }
}

.pd-net-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ─── Zone grid ───────────────────────────────────────────────────────────── */
.pd-zones {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  z-index: 5;
}

.pd-zone {
  /* No heavy fill — the net must show through. Zones are regions of a goal,
     not table cells. Faint divider lines only, tint appears on interaction. */
  background: transparent;
  border: none;
  border-right: 1px solid rgba(212,232,200,0.10);
  border-bottom: 1px solid rgba(212,232,200,0.10);
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  min-height: 48px;
  transition: background 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pd-zone:last-child,
.pd-zone:nth-child(3) { border-right: none; }
.pd-zone:nth-child(4),
.pd-zone:nth-child(5),
.pd-zone:nth-child(6) { border-bottom: none; }

.pd-zone:hover {
  background: var(--pd-zone-hover);
  box-shadow: inset 0 0 0 1px rgba(245,197,66,0.25);
}
.pd-zone[data-selected] {
  background: var(--pd-zone-active);
  box-shadow: inset 0 0 0 2px var(--pd-gold);
}
.pd-zone[data-result="goal"] {
  background: rgba(245,197,66,0.22);
  box-shadow: inset 0 0 0 2px var(--pd-gold);
}
.pd-zone[data-result="save"] {
  background: rgba(82,196,98,0.18);
  box-shadow: inset 0 0 0 2px var(--pd-green-bright);
}
.pd-zone[data-result="miss"] {
  background: rgba(180,60,40,0.16);
  box-shadow: inset 0 0 0 2px var(--pd-miss-red-border);
}
.pd-zone:disabled,
.pd-zone[disabled] {
  cursor: not-allowed;
  /* keep disabled zones legible — the net + dividers stay visible */
  opacity: 0.92;
}

.pd-zone-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  font-weight: 700;
  pointer-events: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.1s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.pd-zone:hover .pd-zone-label,
.pd-zone[data-selected] .pd-zone-label {
  color: var(--pd-gold);
  text-shadow: 0 0 8px rgba(245, 197, 66, 0.5);
}

.pd-zone-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border: 2px solid var(--pd-gold);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s;
  pointer-events: none;
}
.pd-zone[data-selected] .pd-zone-reticle {
  opacity: 1;
  animation: pd-reticle-pulse 0.5s ease-out forwards;
}
@keyframes pd-reticle-pulse {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ─── Ball ────────────────────────────────────────────────────────────────── */
.pd-ball {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  z-index: 10;
  pointer-events: none;
  will-change: left, bottom, transform;
}

.pd-ball-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--pd-ball-hi) 0%, var(--pd-ball-mid) 40%, var(--pd-ball-shadow) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  position: relative;
}

.pd-ball-inner::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, transparent 20%, rgba(0,0,0,0.08) 70%);
}

/* Wobble targets the inner ball so it never fights the position transform
   on .pd-ball (which carries translateX(-50%) + scale during flight). */
.pd-ball[data-state="wobble"] .pd-ball-inner {
  animation: pd-wobble 0.42s ease-out;
}
@keyframes pd-wobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  15%  { transform: translateX(-3px) rotate(-8deg); }
  35%  { transform: translateX(3px) rotate(7deg); }
  55%  { transform: translateX(-2px) rotate(-5deg); }
  75%  { transform: translateX(2px) rotate(3deg); }
}

/* ─── Comet trail — tapering streak behind a hard, well-timed strike ─────── */
.pd-comet-trail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.pd-ball[data-comet="on"] .pd-comet-trail {
  opacity: 1;
}
/* The streak is a soft, elongated glow that trails the ball's motion.
   We fake the taper with a radial-to-transparent gradient skewed up-back. */
.pd-ball[data-comet="on"] .pd-comet-trail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 13px;
  transform: translate(-92%, -50%) scaleX(1);
  transform-origin: 100% 50%;
  border-radius: 50%;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(245, 197, 66, 0.55) 28%,
    rgba(245, 197, 66, 0.12) 62%,
    transparent 100%);
  filter: blur(1.5px);
  animation: pd-comet-flick 0.5s ease-out;
}
@keyframes pd-comet-flick {
  0%   { opacity: 0; transform: translate(-92%, -50%) scaleX(0.4); }
  35%  { opacity: 1; transform: translate(-92%, -50%) scaleX(1.05); }
  100% { opacity: 0.85; transform: translate(-92%, -50%) scaleX(1); }
}

/* ─── Net ripple — localized displacement pulse at the ball's entry zone ─── */
.pd-net-ripple {
  position: absolute;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-bottom: -27px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(circle,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.10) 38%,
    transparent 68%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset;
  animation: pd-net-ripple 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.pd-net-ripple[data-kind="save"] {
  background: radial-gradient(circle,
    rgba(82,196,98,0.30) 0%,
    rgba(82,196,98,0.10) 40%,
    transparent 68%);
}
@keyframes pd-net-ripple {
  0%   { transform: scale(0.25); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ─── Keeping-mode armed reticle on the goal mouth ───────────────────────── */
.pd-keep-armed {
  position: absolute;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-bottom: -17px;
  border: 2px solid var(--pd-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
  box-shadow: 0 0 10px rgba(245,197,66,0.6), inset 0 0 8px rgba(245,197,66,0.35);
  animation: pd-keep-armed-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards,
             pd-keep-armed-pulse 0.9s 0.45s infinite;
}
.pd-keep-armed::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: rgba(245,197,66,0.5);
}
@keyframes pd-keep-armed-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pd-keep-armed-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(245,197,66,0.6), inset 0 0 8px rgba(245,197,66,0.35); }
  50%      { box-shadow: 0 0 16px rgba(245,197,66,0.9), inset 0 0 10px rgba(245,197,66,0.5); }
}

/* ─── Keeper figure ───────────────────────────────────────────────────────── */
/* Stands on the line in a ready crouch; dives in a real arc (translate + lean)
   when committing. Arms lead the dive. The figure carries a glove accent so it
   reads as a keeper, not a generic silhouette. */
.pd-keeper {
  position: absolute;
  top: 6%;
  left: 50%;
  --pd-keep-x: 0%;
  --pd-keep-y: 0px;
  --pd-keep-rot: 0deg;
  --pd-keep-scale: 1;
  transform: translateX(-50%) translateX(var(--pd-keep-x)) translateY(var(--pd-keep-y)) rotate(var(--pd-keep-rot)) scale(var(--pd-keep-scale));
  width: 46px;
  height: 62px;
  z-index: 8;
  pointer-events: none;
  transition: top 0.42s cubic-bezier(0.3, 0.9, 0.4, 1),
              left 0.42s cubic-bezier(0.3, 0.9, 0.4, 1),
              transform 0.42s cubic-bezier(0.3, 0.9, 0.4, 1);
}

/* Ready crouch — a small coil before the dive. */
.pd-keeper[data-state="ready"] {
  --pd-keep-y: 2px;
  --pd-keep-scale: 0.96;
  transition: transform 0.22s ease-out;
}

/* Dive targets share ZONE_POS's coordinate system so the keeper's CENTER
   lands exactly where the ball lands at EVERY goal size:
   left = ZONE_POS.left% (translateX(-50%) centers the body),
   top  = (100 - ZONE_POS.bottom)% minus half the keeper's fixed height
   (31px — keep in sync with the 62px height above).
   The old values were calibrated in raw % against the 139px mobile goal
   (a self-width translateX and a baked-in half-height), which missed the
   716px-wide desktop goal by ~190px horizontally and ~90px vertically —
   the "撲的位置不準" complaint. */
.pd-keeper[data-dive="TL"] { left: 16%; --pd-keep-rot: -42deg; top: calc(30% - 31px); }
.pd-keeper[data-dive="TM"] { left: 50%; --pd-keep-rot: 0deg;   top: calc(30% - 31px); --pd-keep-y: -4px; }
.pd-keeper[data-dive="TR"] { left: 84%; --pd-keep-rot: 42deg;  top: calc(30% - 31px); }
.pd-keeper[data-dive="BL"] { left: 16%; --pd-keep-rot: -68deg; top: calc(80% - 31px); }
.pd-keeper[data-dive="BM"] { left: 50%; --pd-keep-rot: 0deg;   top: calc(80% - 31px); --pd-keep-y: 4px; }
.pd-keeper[data-dive="BR"] { left: 84%; --pd-keep-rot: 68deg;  top: calc(80% - 31px); }

/* Diving = mid-flight stretch (slightly bigger reach). */
.pd-keeper[data-state="diving"] { --pd-keep-scale: 1.05; }

/* Caught — gloves flash bright, body braces. */
.pd-keeper[data-state="caught"] {
  filter: drop-shadow(0 0 8px rgba(82,196,98,0.8)) brightness(1.5);
}
.pd-keeper[data-state="caught"] .pd-keeper-glove { fill: #8ff0a0; }

/* Beaten — keeper dims as the ball passes. */
.pd-keeper[data-state="beaten"] {
  filter: brightness(0.7) saturate(0.6);
  opacity: 0.85;
}

/* In keeping mode the keeper is the PLAYER — tint it gold-bright + gloves. */
.pd-keeper[data-role="player"] .pd-keeper-body { fill: var(--pd-gold-bright); }
.pd-keeper[data-role="player"] .pd-keeper-glove { fill: #fff; }

/* ─── Striker figure (keeping mode) ───────────────────────────────────────── */
/* Starts off to the run-up side (--pd-striker-left, set by JS) in a ready
   lean; runs up + drives through the ball at resolution. */
.pd-striker {
  position: absolute;
  bottom: 10%;
  left: var(--pd-striker-left, 50%);
  transform: translateX(-50%);
  width: 40px;
  height: 56px;
  z-index: 9;
  pointer-events: none;
  transition: left 0.4s ease, transform 0.4s ease;
}
.pd-striker:not([hidden]) {
  display: block;
}
/* The drawn-back kicking leg snaps forward on the drive (JS adds scale/rot). */
.pd-striker-leg { transition: all 0.2s ease; }

.pd-hesitation-dot {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pd-gold-bright);
  box-shadow: 0 0 8px var(--pd-gold);
  opacity: 0;
  display: none;
}
.pd-hesitation-dot:not([hidden]) {
  display: block;
  animation: pd-hesitate 0.5s ease-in-out 3;
}
@keyframes pd-hesitate {
  0%, 100% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  50% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ─── Result flash ────────────────────────────────────────────────────────── */
.pd-result-flash {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  border-radius: 0;
}
.pd-result-flash:not([hidden]) {
  display: flex;
  animation: pd-flash-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pd-flash-in {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

.pd-result-flash[data-result="goal"] { background: rgba(245, 197, 66, 0.12); }
.pd-result-flash[data-result="save"] { background: rgba(30, 80, 50, 0.35); }
.pd-result-flash[data-result="miss"] { background: rgba(60, 20, 20, 0.3); }

.pd-result-flash-text {
  font-size: clamp(2rem, 10vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--pd-gold);
  text-shadow: 0 0 20px rgba(245,197,66,0.6);
}

/* ─── Light sweep ─────────────────────────────────────────────────────────── */
.pd-light-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(245,197,66,0) 0%,
    rgba(245,197,66,0.35) 50%,
    rgba(245,197,66,0) 100%);
  background-size: 200% 200%;
  pointer-events: none;
  z-index: 25;
  display: none;
}
.pd-light-sweep:not([hidden]) {
  display: block;
  animation: pd-light-sweep 0.9s ease-out forwards;
}
@keyframes pd-light-sweep {
  0%   { background-position: -100% -100%; opacity: 0; }
  25%  { opacity: 1; }
  100% { background-position: 200% 200%; opacity: 0; }
}

/* ─── Keeping zones (shown in keeping phase) ──────────────────────────────── */
.pd-keep-zones-panel {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid var(--pd-border-turf);
  padding: 10px 12px;
  display: none;
}
.pd-keep-zones-panel:not([hidden]) { display: block; }

.pd-keep-zones-hint {
  font-size: 0.75rem;
  color: var(--pd-gold);
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.pd-keep-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
}

.pd-keep-zone {
  min-height: 52px;
  background: rgba(13, 40, 24, 0.8);
  border: 1.5px solid var(--pd-border-keep);
  border-radius: var(--pd-radius);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.pd-keep-zone:hover {
  background: var(--pd-zone-hover);
  border-color: var(--pd-gold);
  color: var(--pd-gold);
}
.pd-keep-zone[data-selected] {
  background: var(--pd-zone-active);
  border-color: var(--pd-gold);
  color: var(--pd-gold);
  box-shadow: 0 0 8px rgba(245,197,66,0.3);
}
.pd-keep-zone[data-result="save"] {
  background: rgba(245, 197, 66, 0.2);
  border-color: var(--pd-gold);
  color: var(--pd-gold);
}
.pd-keep-zone[data-result="miss"] {
  background: rgba(180, 40, 40, 0.2);
  border-color: var(--pd-miss-red-border);
  color: var(--pd-miss-red-text);
}
.pd-keep-zone:disabled,
.pd-keep-zone[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ─── Power bar ───────────────────────────────────────────────────────────── */
.pd-power-bar-wrap {
  padding: 10px 16px 12px;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid var(--pd-border-turf);
}

.pd-power-bar-hint {
  font-size: 0.875rem;
  color: var(--pd-gold);
  margin-bottom: 6px;
  font-weight: 600;
  text-align: center;
}

.pd-power-bar-track {
  /* Mechanic-honest: the GREEN band (30–66%) is the good-timing sweet spot.
     Both edges are mistimed (dim/red), so the colour story matches the rule
     "release in the green" rather than implying a left→right power ramp. */
  --pd-power-bad:   #b23a24;
  --pd-power-edge:  #8a4a22;
  --pd-power-near:  #3e7a44;
  --pd-power-sweet: #52c462;
  height: 22px;
  background: linear-gradient(to right,
    var(--pd-power-bad)   0%,
    var(--pd-power-edge)  18%,
    var(--pd-power-near)  28%,
    var(--pd-power-sweet) 38%,
    var(--pd-power-sweet) 58%,
    var(--pd-power-near)  68%,
    var(--pd-power-edge)  82%,
    var(--pd-power-bad)   100%
  );
  border-radius: 11px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pd-border-turf);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pd-power-bar-sweet {
  position: absolute;
  top: 0;
  height: 100%;
  width: 36%;
  left: 30%;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 9px;
  pointer-events: none;
}

.pd-power-bar-cursor {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: white;
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  pointer-events: none;
  will-change: left;
}

.pd-power-bar-instructions {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 5px;
}

/* ─── Phase banner ────────────────────────────────────────────────────────── */
.pd-phase-banner {
  position: absolute;
  inset: 0;
  background: rgba(7, 22, 14, 0.93);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
  border-radius: 9px;
}
.pd-phase-banner:not([hidden]) {
  display: flex;
  animation: pd-banner-in 0.4s ease-out;
}
@keyframes pd-banner-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.pd-phase-banner-inner {
  text-align: center;
  padding: 24px 20px;
  max-width: 320px;
}

.pd-phase-banner-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--pd-gold);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.pd-phase-banner-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.pd-phase-banner-btn {
  min-height: 48px;
  padding-inline: 32px;
  background: var(--pd-gold);
  color: var(--pd-text-dark);
  border: none;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--pd-radius);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pd-phase-banner-btn:hover { background: var(--pd-gold-bright); }

/* ─── Sudden death banner ─────────────────────────────────────────────────── */
.pd-sudden-death {
  text-align: center;
  padding: 6px 16px;
  background: linear-gradient(90deg, transparent, rgba(245,197,66,0.15), transparent);
  color: var(--pd-gold);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 1px solid rgba(245,197,66,0.3);
  border-bottom: 1px solid rgba(245,197,66,0.3);
  display: none;
}
.pd-sudden-death:not([hidden]) {
  display: block;
  animation: pd-sd-pulse 1.5s infinite;
}
@keyframes pd-sd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ─── Duel story card ─────────────────────────────────────────────────────── */
.pd-story-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--pd-page-bg-deep) 0%, var(--pd-green-deep) 100%);
  display: none;
  flex-direction: column;
  align-items: stretch;
  z-index: 40;
  overflow-y: auto;
  border-radius: 9px;
  overscroll-behavior: contain;
}
.pd-story-card:not([hidden]) {
  display: flex;
  animation: pd-story-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pd-story-in {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.pd-story-card-inner {
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}

.pd-story-title {
  text-align: center;
}
.pd-story-title-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pd-gold);
  letter-spacing: 0.02em;
}

.pd-story-scores {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.pd-story-grid-wrap {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--pd-border-turf);
  border-radius: var(--pd-radius);
  padding: 12px 8px;
  overflow-x: auto;
}

.pd-story-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 240px;
}

/* Two separate sections — each its own little table, with a heading that names
   the causal story (your shots vs reads, or your dives vs striker shots). */
.pd-story-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 3px solid var(--pd-gold-dim);
  padding-left: 10px;
}
.pd-story-section[data-side="keep"] {
  border-left-color: var(--pd-green-bright);
}
.pd-story-section-head {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--pd-gold);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.pd-story-section[data-side="keep"] .pd-story-section-head {
  color: #7ed694;
}

.pd-story-row {
  display: grid;
  grid-template-columns: 1.8rem 1fr 1fr 2.6rem;
  gap: 6px;
  align-items: center;
  font-size: 0.74rem;
}
.pd-story-row--head {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.62rem;
  border-bottom: 1px solid var(--pd-border-turf);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.pd-story-cell--res {
  text-align: right;
  font-weight: 700;
  font-size: 0.68rem;
}

.pd-story-cell {
  padding: 4px 4px;
  border-radius: 3px;
  text-align: center;
  font-weight: 500;
  background: rgba(255,255,255,0.03);
  color: var(--color-text-muted);
  font-size: 0.7rem;
}
.pd-story-cell[data-hit="true"] {
  background: rgba(245,197,66,0.18);
  color: var(--pd-gold);
  font-weight: 700;
}
.pd-story-cell[data-role="round"] {
  color: var(--color-text-muted);
  background: transparent;
  font-size: 0.65rem;
}
.pd-story-cell[data-goal="true"] { color: var(--pd-gold); }
.pd-story-cell[data-miss="true"]  { color: var(--pd-miss-red-text); }

.pd-story-streak {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.pd-story-streak strong { color: var(--pd-gold); }

.pd-story-actions {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.pd-rematch-btn {
  min-height: 52px;
  padding-inline: 40px;
  background: var(--pd-gold);
  color: var(--pd-text-dark);
  border: none;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: var(--pd-radius);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}
.pd-rematch-btn:hover { background: var(--pd-gold-bright); }
.pd-rematch-btn:active { transform: scale(0.97); }

/* ─── Audio toggle ────────────────────────────────────────────────────────── */
.pd-audio-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--pd-border-turf);
}

.pd-audio-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  min-width: 44px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 4px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pd-audio-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.pd-audio-btn:hover { color: var(--pd-gold); }
.pd-audio-btn[aria-pressed="true"] { color: var(--pd-gold); }
.pd-audio-btn[aria-pressed="true"]  .pd-audio-on  { opacity: 1; }
.pd-audio-btn[aria-pressed="true"]  .pd-audio-off { opacity: 0; }
.pd-audio-btn[aria-pressed="false"] .pd-audio-on  { opacity: 0.3; }
.pd-audio-btn[aria-pressed="false"] .pd-audio-off { opacity: 0; }

/* ─── Inline hint ─────────────────────────────────────────────────────────── */
.pd-inline-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 15;
  animation: pd-hint-fade 1.8s forwards;
}
@keyframes pd-hint-fade {
  0%  { opacity: 0; transform: translateX(-50%) translateY(6px); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0); }
  70% { opacity: 1; }
  100%{ opacity: 0; }
}

/* ─── Responsive: mobile portrait ────────────────────────────────────────── */
@media (max-width: 480px) {
  .penalty-duel-page .tool-frame {
    padding-inline: 8px;
  }

  .pd-ui { border-radius: 8px; }

  .pd-mind-meter {
    min-width: 40px;
    width: 40px;
    padding: 8px 5px 8px 7px;
  }
  .pd-mind-meter-track { min-height: 60px; }
  .pd-mind-meter-label { font-size: 0.875rem; }

  .pd-keep-zones { gap: 5px; }
  .pd-keep-zone  { min-height: 48px; font-size: 0.875rem; }

  .pd-hud { padding: 7px 8px 6px; gap: 6px; }
  .pd-hud-score { font-size: 1.1rem; }
  .pd-round-dot { width: 8px; height: 8px; }
  .pd-hud-phase { font-size: 0.875rem; min-width: 48px; }

  .pd-result-flash-text { font-size: 2.2rem; }
  .pd-goal-area { min-height: 140px; }
  .pd-power-bar-wrap { padding: 8px 10px 10px; }
  .pd-power-bar-track { height: 20px; }
}

/* ─── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .pd-goal-area { min-height: 200px; }
  .pd-mind-meter-track { min-height: 120px; }
  .pd-keep-zone { min-height: 56px; font-size: 0.85rem; }
}

/* ─── Respect reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pd-ball,
  .pd-ball-inner,
  .pd-keeper,
  .pd-striker,
  .pd-zone-reticle,
  .pd-result-flash,
  .pd-light-sweep,
  .pd-phase-banner,
  .pd-story-card,
  .pd-sudden-death,
  .pd-hesitation-dot,
  .pd-comet-trail,
  .pd-comet-trail::before,
  .pd-net-ripple,
  .pd-keep-armed,
  .pd-keep-armed::after,
  .pd-goal-area::before,
  .pd-goal-area::after {
    animation: none !important;
    transition: none !important;
  }
  /* Keep ball motion essential but instant so the game stays playable. */
  .pd-ball { transition: left 0.12s linear, bottom 0.12s linear !important; }
  .pd-keeper { transition: top 0.12s linear, transform 0.12s linear !important; }
}