/* styles-9.css — PenaltyGame (hero lead-magnet mini-game). Everything here sits ON
   the always-dark pitch photo, so colours are FIXED light-on-dark literals, NOT
   var(--ink)/var(--bone) (those flip in light theme and would turn cream/black over
   the night photo). Only --accent (theme-stable orange) is a token. Sharp corners,
   1px hairlines, glows not shadows — house style. */

/* ── hero slogan strip (the modal's trigger) — lives ON the hero, so it MUST work
   in both themes: use tokens here, not the fixed literals used over the photo. ── */
.hero-penalty {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 16px; align-self: flex-start;
  margin: 26px 0 4px; padding: 13px 14px 13px 18px;
  /* frosted panel: a theme-adaptive scrim (dark in dark theme, light in light) + blur
     so the banner separates cleanly from a busy hero photo behind it. --ink flips with
     the theme, so light text stays on a dark scrim and vice-versa. */
  background: color-mix(in srgb, var(--ink) 64%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid var(--bone-faint); border-left: 3px solid var(--accent);
  color: var(--bone); cursor: pointer; text-align: left;
  transition: border-color 0.2s, transform 0.2s, background 0.2s, box-shadow 0.3s;
  animation: hpGlow 3.6s ease-in-out infinite;              /* soft accent breathing to draw the eye */
}
@keyframes hpGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 26px -3px color-mix(in srgb, var(--accent) 44%, transparent); } }
.hero-penalty:hover { border-color: var(--bone); border-left-color: var(--accent); transform: translateY(-2px); background: color-mix(in srgb, var(--ink) 72%, transparent); }

/* pulsing aim-pip (penalty = take your aim) */
.hp-pip { position: relative; width: 11px; height: 11px; flex: none; background: var(--accent); }
.hp-pip::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--accent); animation: hpPing 1.9s ease-out infinite; }
@keyframes hpPing { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(2.8); opacity: 0; } }

.hp-body { display: flex; flex-direction: column; gap: 5px; }
.hp-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.hp-slug { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(16px, 2.5vw, 22px); letter-spacing: 0.01em; line-height: 1; }
.hp-slug .italic { font-style: normal; color: var(--accent); } /* upright, not the Cormorant italic — matches the slug */

/* accent-filled chip CTA */
.hp-go { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent); padding: 9px 13px; white-space: nowrap; transition: background 0.2s; }
.hp-go .arrow { transition: transform 0.2s; }
.hero-penalty:hover .hp-go { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.hero-penalty:hover .hp-go .arrow { transform: translateX(3px); }

/* won state: the same banner shows the unlocked code + a copy button (not clickable
   as a whole — only the copy chip is) */
.hero-penalty.is-won { cursor: default; }
.hero-penalty.is-won:hover { transform: none; }
.hp-slug.hp-code { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-stretch: normal; letter-spacing: 0.16em; color: var(--accent); }
/* reserve fixed widths so the copy action never reflows the banner (kicker text +
   button label both change on copy) */
.hero-penalty.is-won .hp-kicker { display: inline-block; min-width: 15rem; white-space: nowrap; }
.hero-penalty.is-won .hp-go { min-width: 6.5rem; justify-content: center; }
@media (max-width: 640px) { .hero-penalty.is-won .hp-kicker { min-width: 0; } }

/* slow sheen sweep — premium catch-the-eye, low opacity */
.hero-penalty::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -55%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-16deg); animation: hpSheen 5.5s ease-in-out 2s infinite;
}
@keyframes hpSheen { 0% { left: -55%; } 50%, 100% { left: 145%; } }

@media (max-width: 640px) {
  .hero-penalty { gap: 12px; padding: 12px 12px 12px 15px; width: 100%; }
  .hp-go { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero-penalty, .hp-pip::after, .hero-penalty::before { animation: none; } }

.pen-overlay { padding: 0; align-items: stretch; justify-content: stretch; }

.pen-modal {
  --pen-bone: #f4f1eb;          /* fixed light ink over the dark photo */
  --pen-dim: rgba(244, 241, 235, 0.62);
  --pen-line: rgba(244, 241, 235, 0.16);
  --pen-scrim: rgba(8, 9, 12, 0.55);
  position: fixed; inset: 0;
  background-color: #08090c;
  background-size: cover; background-position: center;
  overflow: hidden;
  animation: nmModalIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
/* a gentle top+bottom scrim so HUD text and bars stay legible on any crop */
.pen-modal::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,9,12,0.55) 0%, transparent 22%, transparent 55%, rgba(8,9,12,0.72) 100%);
}

.pen-ball { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* goal celebration — confetti + fireworks, over everything (clicks pass through) */
.pen-fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }

/* the goalkeeper standing in the goal (positioned inline from the GOAL rect) */
.pen-keeper {
  position: absolute; z-index: 2; transform: translateX(-50%); pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
  animation: penKeeperIn 0.3s ease both;
}
@keyframes penKeeperIn { from { opacity: 0; } to { opacity: 1; } }
/* preloaded on the intro but not shown; he pops in the instant play starts (already decoded) */
.pen-keeper.is-pre { visibility: hidden; }
.pen-keeper.save { animation: penSave 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes penSave {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(1.05) rotate(-2deg); }
  100% { transform: translateX(-50%) scale(1); }
}

/* net-ripple overlay pinned over the goal mouth (positioned inline) */
.pen-goal { position: absolute; z-index: 3; pointer-events: none; opacity: 0; }
.pen-goal.rippling {
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.16), transparent 70%);
  animation: penRipple 0.6s ease-out;
}
@keyframes penRipple {
  0% { opacity: 0; transform: scale(1); }
  18% { opacity: 1; transform: scale(1.015); }
  100% { opacity: 0; transform: scale(1); }
}

/* close */
.pen-close {
  position: absolute; top: 14px; right: 14px; z-index: 8;
  width: 44px; height: 44px; line-height: 40px; text-align: center;
  font-size: 26px; color: var(--pen-bone);
  background: var(--pen-scrim); border: 1px solid var(--pen-line);
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pen-close:hover { border-color: var(--accent); }

/* HUD: eyebrow + attempt pips */
.pen-hud { position: absolute; top: 18px; left: 18px; z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.pen-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.pen-dots { display: flex; gap: 7px; }
.pen-dots i { width: 22px; height: 3px; background: var(--pen-line); display: block; transition: background 0.3s; }
.pen-dots i.now { background: var(--pen-bone); }
.pen-dots i.used { background: var(--accent); }

/* Shared, high-contrast track look so the bars read clearly over the grass:
   near-opaque dark fill + blur + a bright hairline. */
.pen-track-h, .pen-track-v {
  --pm: 10px; position: relative;
  background: rgba(9, 10, 13, 0.9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1.5px solid rgba(244, 241, 235, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);   /* dark ring separates it from the pitch */
}
.pen-sweet-h, .pen-sweet-v {
  position: absolute; background: color-mix(in srgb, var(--accent) 46%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);
}
.pen-mark-h, .pen-mark-v {
  position: absolute; background: var(--pen-bone);
  box-shadow: 0 0 16px rgba(244, 241, 235, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
/* live bar glows at its edges to pull the eye */
.pen-bar-h.live .pen-track-h, .pen-bar-v.live .pen-track-v {
  border-color: rgba(244, 241, 235, 0.72);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 0 1px rgba(0, 0, 0, 0.45);
}

/* ── horizontal bar (bottom-centre) — aimed FIRST ── */
.pen-bar-h { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); z-index: 4; width: min(560px, 84vw); }
.pen-track-h { height: 20px; }
.pen-sweet-h { top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.pen-mark-h { top: -6px; width: var(--pm); height: 32px; }

/* ── vertical bar — aimed SECOND. Docks onto the RIGHT END of the horizontal bar
   (same bottom baseline, rising up → clean L-corner). ── */
.pen-bar-v { position: absolute; left: calc(50% + min(560px, 84vw) / 2 - 20px); bottom: 9%; z-index: 4; height: min(260px, 42vh); }
.pen-track-v { width: 20px; height: 100%; }
.pen-sweet-v { left: 0; right: 0; top: 50%; transform: translateY(-50%); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.pen-mark-v { left: -6px; height: var(--pm); width: 32px; }

@keyframes penSlideH { from { left: 0; } to { left: calc(100% - var(--pm)); } }
@keyframes penSlideV { from { top: 0; } to { top: calc(100% - var(--pm)); } }

/* live aim reticle on the goal (position set per-frame in JS). Sharp target box +
   centre dot; accent while aiming direction, whitens once the direction is locked. */
.pen-reticle {
  position: absolute; z-index: 4; width: 40px; height: 40px; pointer-events: none;
  border: 2px solid var(--accent); background: transparent;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: penReticlePulse 1.1s ease-in-out infinite;
}
.pen-reticle .r-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--accent); }
@keyframes penReticlePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.92; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
.pen-reticle.locked { border-color: var(--pen-bone); box-shadow: 0 0 16px rgba(244, 241, 235, 0.5); }
.pen-reticle.locked .r-dot { background: var(--pen-bone); box-shadow: 0 0 8px rgba(244, 241, 235, 0.85); }

/* big tap layer */
.pen-tap {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  font: inherit; color: var(--pen-bone); -webkit-tap-highlight-color: transparent;
}
.pen-hint {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--pen-bone);
  background: var(--pen-scrim); border: 1px solid var(--pen-line); padding: 8px 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translateY(-56px);
}

/* centre panels: intro + result */
.pen-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7;
  width: min(440px, 88vw); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 34px 28px; background: color-mix(in srgb, #08090c 78%, transparent);
  border: 1px solid var(--pen-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: nmModalIn 0.34s cubic-bezier(0.16, 1, 0.3, 1); cursor: default;
}
button.pen-panel { cursor: pointer; }
.pen-title {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; font-size: clamp(30px, 7vw, 46px); line-height: 0.95;
  color: var(--pen-bone); margin: 0;
}
.pen-title .italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-stretch: normal; text-transform: none; color: var(--accent); }
.pen-sub { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.5; color: var(--pen-dim); margin: 0; max-width: 34ch; }
.pen-cta-lbl { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
.pen-cta-lbl .arrow, .pen-btn .arrow { margin-left: 6px; }
.pen-btn { margin-top: 8px; }

/* difficulty-step kicker in the intro panel */
.pen-lvl { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* revealed promo code — the reward after all three levels */
.pen-code {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(22px, 5vw, 32px); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--accent); padding: 14px 22px 14px 26px; margin: 4px 0 2px;
  user-select: all; -webkit-user-select: all;
}

/* clipboard confirmation under the code */
.pen-copied { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 4px 0 0; animation: nmFadeIn 0.2s ease; }

/* result-panel action row: primary accent .cta + secondary .pen-ghost */
.pen-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.pen-actions .pen-btn { margin-top: 0; }
.pen-ghost {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pen-bone); background: transparent; border: 1px solid var(--pen-line); padding: 12px 16px; cursor: pointer;
  transition: border-color 0.2s;
}
.pen-ghost:hover { border-color: var(--pen-bone); }
.pen-ghost .arrow { margin-left: 6px; }

/* result shout — GOAL! / MISS / SO CLOSE */
.pen-shout {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 6;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; font-size: clamp(56px, 16vw, 130px); line-height: 0.9;
  pointer-events: none; animation: penShout 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pen-shout.goal { color: var(--accent); text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent); }
.pen-shout.saved { color: var(--pen-bone); text-shadow: 0 0 34px rgba(244, 241, 235, 0.4); }
.pen-shout.miss { color: var(--pen-dim); }
.pen-shout.post { color: var(--pen-bone); text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent); }
@keyframes penShout {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* a quick full-screen flash on GOAL */
.pen-shout.goal::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 22%, transparent); animation: penFlash 0.4s ease-out forwards;
}
@keyframes penFlash { from { opacity: 0.8; } to { opacity: 0; } }

@media (max-width: 640px) {
  /* on phones the horizontal bar is nearly full-width, so pin the vertical to the
     screen's right edge instead of docking (it would run off-screen otherwise) */
  .pen-bar-v { left: auto; right: 4%; top: auto; bottom: 12%; height: min(220px, 36vh); }
  .pen-bar-h { bottom: 12%; }
  .pen-hint { transform: translateY(-40px); }
}

/* respect reduced motion: kill the shout/ripple/flash animations (bars still work) */
@media (prefers-reduced-motion: reduce) {
  .pen-modal, .pen-panel, .pen-shout, .pen-goal.rippling { animation: none; }
  .pen-shout.goal::after { display: none; }
}