/* ============================================================
   Crispin's World — components.css
   Cards, buttons, tabs, modals, goal SVG, riddle cards, etc.
   ============================================================ */

/* --------------- Buttons --------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { box-shadow: var(--shadow-lg); color: var(--white); }

.btn-yellow {
  background: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
  color: var(--purple-dark);
  box-shadow: var(--shadow-md);
}
.btn-yellow:hover { color: var(--purple-dark); }

.btn-teal {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: var(--white);
}
.btn-teal:hover { color: var(--white); }

.btn-pitch {
  background: linear-gradient(135deg, var(--pitch), var(--pitch-dark));
  color: var(--white);
}
.btn-pitch:hover { color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--purple);
  border: 2px solid var(--purple);
}
.btn-outline:hover { background: var(--purple); color: var(--white); }

.btn-sm { padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: 1.125rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* --------------- Cards --------------- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card--flat { box-shadow: var(--shadow-sm); }
.card--flat:hover { transform: none; box-shadow: var(--shadow-md); }
.card--pitch { background: linear-gradient(135deg, #064E3B, #065F46); color: var(--white); }
.card--pitch h2, .card--pitch h3 { color: var(--yellow); }
.card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  display: inline-block;
}
.card__title { margin: 0 0 var(--space-2); }
.card__body { color: var(--text-secondary); margin: 0; }

/* Action tile (index page) */
.action-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}
.action-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; color: inherit; }
.action-tile__emoji { font-size: 2.5rem; margin-bottom: var(--space-3); }
.action-tile__title { font-family: var(--font-heading); font-size: 1.3rem; color: var(--purple); margin: 0 0 var(--space-2); }
.action-tile__desc { color: var(--text-secondary); font-size: 0.95rem; margin: 0; }
.action-tile--learning { background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%); }
.action-tile--maths { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); }
.action-tile--fun { background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); }
.action-tile--progress { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); }

/* Hero avatar */
.hero {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  position: relative;
}
.hero__avatar {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  border: 6px solid var(--yellow);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--purple-light);
}
.hero__content { flex: 1; }
.hero__greeting { font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.25rem); color: var(--purple); margin: 0 0 var(--space-2); }
.hero__subtitle { font-size: 1.15rem; color: var(--text-secondary); margin: 0 0 var(--space-3); }
.hero__cr7 {
  background: rgba(107, 33, 168, 0.08);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius-md);
  font-style: italic;
  color: var(--purple-dark);
  margin-top: var(--space-3);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero__cr7-jersey {
  background: var(--yellow);
  color: var(--purple-dark);
  font-family: var(--font-heading);
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.float-emoji {
  position: absolute;
  font-size: 2rem;
  opacity: 0.5;
  pointer-events: none;
  animation: float 4s ease-in-out infinite;
}

/* --------------- Stats strip --------------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
}
.stat {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}
.stat__value {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--purple);
  margin: 0;
  line-height: 1;
}
.stat__label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
  font-weight: 600;
}

/* --------------- Tabs --------------- */
.tabs {
  position: sticky;
  top: calc(var(--topbar-h) + 56px);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  display: flex;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  z-index: 50;
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 700;
  flex: 1;
  min-width: 110px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.tab-btn:hover { background: var(--gray-100); }
.tab-btn.active { background: linear-gradient(135deg, var(--purple), var(--purple-light)); color: var(--white); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s ease-out; }

/* --------------- Lesson cards (accordion) --------------- */
.lesson {
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border-left: 4px solid var(--purple);
}
.lesson__header {
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.lesson__header:hover { background: var(--gray-50); }
.lesson__num {
  width: 36px; height: 36px;
  background: var(--yellow);
  color: var(--purple-dark);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  flex-shrink: 0;
}
.lesson__title { flex: 1; font-family: var(--font-heading); color: var(--purple); font-size: 1.1rem; }
.lesson__chevron {
  transition: transform 0.3s;
  color: var(--purple);
  font-size: 1.25rem;
}
.lesson.open .lesson__chevron { transform: rotate(180deg); }
.lesson__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.lesson.open .lesson__body { max-height: 3000px; }
.lesson__content { padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); }
.lesson__content h4 { color: var(--purple); margin-top: var(--space-4); }
.lesson__content table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.lesson__content th, .lesson__content td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lesson__content th { background: var(--purple); color: var(--white); font-family: var(--font-heading); font-weight: normal; }
.lesson__content tr:nth-child(even) td { background: var(--gray-50); }
.lesson__content ul, .lesson__content ol { padding-left: var(--space-5); }
.lesson__content li { margin-bottom: var(--space-2); }
.example-box {
  background: #FEF3C7;
  border-left: 4px solid var(--yellow);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}
.example-box strong { color: var(--purple-dark); }
.tip-box {
  background: #D1FAE5;
  border-left: 4px solid var(--teal);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}
.watchout-box {
  background: #FEE2E2;
  border-left: 4px solid var(--coral);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}

/* --------------- Practice exercises --------------- */
.exercise {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.exercise__title { font-family: var(--font-heading); color: var(--purple); margin-bottom: var(--space-3); }
.exercise__items { display: grid; gap: var(--space-3); }
.ex-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.ex-item__q { font-weight: 700; color: var(--purple-dark); flex: 1; min-width: 180px; font-size: 1.05rem; }
.ex-item__input, .ex-item select {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  min-width: 100px;
  transition: border-color 0.2s;
}
.ex-item__input:focus, .ex-item select:focus { outline: none; border-color: var(--purple); }
.ex-item.correct { background: #D1FAE5; }
.ex-item.correct .ex-item__input { border-color: var(--teal); }
.ex-item.wrong { background: #FEE2E2; }
.ex-item.wrong .ex-item__input { border-color: var(--coral); }
.ex-feedback {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 700;
  display: none;
}
.ex-feedback.show { display: block; }
.ex-feedback.good { background: #D1FAE5; color: var(--teal-dark); }
.ex-feedback.mixed { background: #FEF3C7; color: #92400E; }
.ex-feedback.bad { background: #FEE2E2; color: var(--coral-dark); }

/* --------------- Quiz --------------- */
.quiz-tier-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.quiz-tier {
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: transform 0.2s;
  cursor: pointer;
  border: 3px solid transparent;
}
.quiz-tier:hover:not(.locked) { transform: translateY(-3px); border-color: var(--yellow); }
.quiz-tier.locked { opacity: 0.55; cursor: not-allowed; }
.quiz-tier__emoji { font-size: 2.5rem; margin-bottom: var(--space-2); }
.quiz-tier__name { font-family: var(--font-heading); color: var(--purple); font-size: 1.2rem; }
.quiz-tier__desc { font-size: 0.9rem; color: var(--text-muted); }
.quiz-tier__badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--purple-dark);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: var(--space-2);
}
.quiz-tier.locked .quiz-tier__badge { background: var(--gray-200); color: var(--gray-500); }

.qz-stage { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-md); }
.qz-progress {
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.qz-progress__fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--pitch)); transition: width 0.4s; }
.qz-meta {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}
.qz-question { font-family: var(--font-heading); color: var(--purple); font-size: 1.4rem; margin-bottom: var(--space-4); }
.qz-options { display: grid; gap: var(--space-3); }
.qz-option {
  padding: var(--space-4);
  background: var(--gray-50);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.15s;
  font-family: var(--font-body);
}
.qz-option:hover { border-color: var(--purple); background: var(--white); }
.qz-option.selected { border-color: var(--purple); background: #F3E8FF; }
.qz-option.correct { border-color: var(--teal); background: #D1FAE5; color: var(--teal-dark); }
.qz-option.wrong { border-color: var(--coral); background: #FEE2E2; color: var(--coral-dark); }
.qz-fill-input {
  padding: var(--space-3);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 1rem;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 600;
}
.qz-fill-input:focus { outline: none; border-color: var(--purple); }
.qz-feedback {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  display: none;
}
.qz-feedback.show { display: block; }
.qz-feedback.correct { background: #D1FAE5; color: var(--teal-dark); border-left: 4px solid var(--teal); }
.qz-feedback.wrong { background: #FEE2E2; color: var(--coral-dark); border-left: 4px solid var(--coral); }
.qz-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); justify-content: flex-end; }

.qz-result {
  text-align: center;
  padding: var(--space-6);
}
.qz-result__stars { font-size: 3rem; margin-bottom: var(--space-3); }
.qz-result__score { font-family: var(--font-heading); font-size: 2.5rem; color: var(--purple); }
.qz-result__xp { font-weight: 700; color: var(--teal-dark); font-size: 1.15rem; margin: var(--space-3) 0; }

/* --------------- Modal --------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-4);
  animation: fadeIn 0.2s;
}
.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.3s ease-out;
  max-height: 90vh;
  overflow-y: auto;
}
.modal__title { font-family: var(--font-heading); color: var(--purple); text-align: center; font-size: 1.6rem; margin-bottom: var(--space-4); }
.modal__body { margin-bottom: var(--space-5); }
.modal__footer { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

.modal--levelup { text-align: center; }
.modal--levelup .big-level {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--yellow-dark);
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: var(--space-3) 0;
}
.modal--badge { text-align: center; }
.modal--badge .badge-emoji { font-size: 4rem; margin: var(--space-3) 0; display: block; animation: badgePop 0.6s ease-out; }

.name-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-family: var(--font-body);
  margin-bottom: var(--space-3);
}
.name-input:focus { outline: none; border-color: var(--purple); }

/* --------------- Toast --------------- */
.toast-zone {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
  pointer-events: none;
}
.toast {
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: auto;
  animation: slideInRight 0.3s ease-out;
  border-left: 4px solid var(--purple);
  font-weight: 600;
}
.toast.success { border-color: var(--teal); }
.toast.warn { border-color: var(--yellow-dark); }
.toast.error { border-color: var(--coral); }
.toast.football { border-color: var(--pitch); background: linear-gradient(135deg, #064E3B, #065F46); color: var(--white); }
.toast.leaving { animation: slideOutRight 0.3s ease-out forwards; }

/* --------------- Sound menu popover --------------- */
.sound-menu {
  position: fixed;
  top: calc(var(--topbar-h) + 8px);
  right: 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  display: none;
  min-width: 240px;
}
.sound-menu.open { display: block; animation: popIn 0.2s; }
.sound-menu__title { font-family: var(--font-heading); color: var(--purple); margin-bottom: var(--space-3); }
.sound-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-weight: 600;
}
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: left 0.2s;
}
.toggle.on { background: var(--teal); }
.toggle.on::after { left: 22px; }

/* --------------- Chapter grid --------------- */
.chapter-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 200px;
  position: relative;
}
.chapter-card:not(.locked):hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; color: inherit; }
.chapter-card.locked { opacity: 0.65; cursor: not-allowed; }
.chapter-card__num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--yellow-dark);
  line-height: 1;
}
.chapter-card__title { font-family: var(--font-heading); color: var(--purple); font-size: 1.15rem; margin: 0; }
.chapter-card__desc { color: var(--text-secondary); font-size: 0.9rem; flex: 1; margin: 0; }
.chapter-card__lock { position: absolute; top: 12px; right: 12px; font-size: 1.5rem; }
.chapter-card__badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--purple-dark);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  align-self: flex-start;
}
.chapter-card__badge.soon { background: var(--gray-200); color: var(--gray-500); }

/* --------------- Riddle cards --------------- */
.riddle-card {
  perspective: 1000px;
  min-height: 200px;
  cursor: pointer;
}
.riddle-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.riddle-card.flipped .riddle-inner { transform: rotateY(180deg); }
.riddle-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.riddle-face--q { background: linear-gradient(135deg, var(--purple), var(--purple-light)); color: var(--white); }
.riddle-face--q h3 { color: var(--yellow); margin-bottom: var(--space-2); }
.riddle-face--a { background: linear-gradient(135deg, var(--yellow), var(--yellow-dark)); color: var(--purple-dark); transform: rotateY(180deg); }
.riddle-face--a h3 { color: var(--purple-dark); margin-bottom: var(--space-2); }
.riddle-tap { font-size: 0.8rem; opacity: 0.75; margin-top: var(--space-3); }
.riddle-category {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  align-self: flex-start;
  margin-bottom: var(--space-2);
}

.riddle-filter {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.riddle-filter .btn-sm { padding: var(--space-2) var(--space-4); }

/* --------------- Penalty Shootout game --------------- */
.pitch-stage {
  background: linear-gradient(180deg, #065F46 0%, #064E3B 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pitch-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,0.04) 40px, rgba(255,255,255,0.04) 80px);
  pointer-events: none;
}
.pitch-title { color: var(--yellow); font-family: var(--font-heading); text-align: center; margin-bottom: var(--space-3); font-size: 1.8rem; }
.pitch-score { color: var(--white); text-align: center; margin-bottom: var(--space-4); font-weight: 700; font-size: 1.1rem; }

.goal-svg {
  display: block;
  margin: 0 auto var(--space-4);
  max-width: 100%;
  width: 480px;
}
.goal-region {
  fill: rgba(255,255,255,0.08);
  stroke: rgba(255,255,255,0.5);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  cursor: pointer;
  transition: fill 0.15s;
}
.goal-region:hover { fill: rgba(250, 204, 21, 0.3); }
.goal-region.chosen { fill: rgba(250, 204, 21, 0.6); stroke: var(--yellow); stroke-dasharray: none; }
.goal-region.scored { fill: rgba(20, 184, 166, 0.5); }
.goal-region.saved { fill: rgba(251, 113, 133, 0.5); }

.ball-icon { font-size: 2rem; transition: all 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
.keeper-icon { font-size: 2.5rem; transition: all 0.5s ease-out; }

.pitch-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; }
.pitch-log {
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--white);
  margin-top: var(--space-4);
  max-height: 120px;
  overflow-y: auto;
  font-size: 0.9rem;
}
.pitch-log__entry { margin-bottom: var(--space-1); }
.pitch-log__entry.goal { color: var(--yellow); font-weight: 700; }
.pitch-log__entry.miss { color: #FCA5A5; }

/* --------------- Badges gallery --------------- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}
.badge-chip {
  padding: var(--space-3);
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}
.badge-chip:hover { transform: translateY(-2px); }
.badge-chip.locked { opacity: 0.35; filter: grayscale(1); }
.badge-chip__emoji { font-size: 2rem; margin-bottom: var(--space-1); }
.badge-chip__name { font-family: var(--font-heading); font-size: 0.85rem; color: var(--purple); margin: 0; line-height: 1.2; }
.badge-chip__desc { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   NOTEBOOK / SCRAPBOOK AESTHETIC
   (Diary of a Wimpy Kid feel — hand-made, not polished)
   ============================================================ */

:root {
  --paper: #FFFDF5;
  --paper-line: #BFD8F7;
  --paper-margin: #F87171;
  --ink-blue: #1E3A8A;
  --ink-black: #1F2937;
  --marker-red: #DC2626;
  --marker-pink: #EC4899;
  --marker-orange: #F97316;
  --marker-green: #16A34A;
  --marker-purple: #9333EA;
  --tape-yellow: rgba(250, 230, 120, 0.65);
  --tape-blue: rgba(160, 210, 255, 0.6);
}

/* ------- Handwriting font utilities ------- */
.hand  { font-family: 'Kalam', 'Caveat', 'Patrick Hand', cursive; }
.marker { font-family: 'Permanent Marker', 'Kalam', cursive; }
.sketch { font-family: 'Caveat', 'Kalam', cursive; }

/* ------- Notebook page (the whole hero is a page of Crispin's book) ------- */
.scrapbook {
  --page-rotate: -0.5deg;
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 70px, var(--paper-margin) 70px, var(--paper-margin) 72px, transparent 72px),
    repeating-linear-gradient(var(--paper) 0px, var(--paper) 31px, var(--paper-line) 31px, var(--paper-line) 32px);
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.1),
    0 20px 40px rgba(31, 41, 55, 0.25),
    inset 0 0 0 2px rgba(0,0,0,0.05);
  padding: 50px 40px 60px 96px;
  margin-bottom: var(--space-6);
  color: var(--ink-black);
  transform: rotate(var(--page-rotate));
  min-height: 640px;
  overflow: visible;
  isolation: isolate;
}

/* Three-ring binder holes on the left edge */
.scrapbook::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0; bottom: 0;
  width: 22px;
  background-image:
    radial-gradient(circle at 50% 60px, rgba(0,0,0,0.35) 10px, transparent 11px),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.35) 10px, transparent 11px),
    radial-gradient(circle at 50% calc(100% - 60px), rgba(0,0,0,0.35) 10px, transparent 11px);
  pointer-events: none;
}

/* Folded corner (top-right) */
.scrapbook::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50px; height: 50px;
  background:
    linear-gradient(225deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 50%, transparent 50%),
    linear-gradient(225deg, #F3F4F6 0%, #F3F4F6 50%, transparent 50%);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}

/* Page header (marker-drawn title) */
.scrapbook__title-wrap {
  text-align: center;
  margin-bottom: var(--space-5);
}
.scrapbook__title {
  display: inline-block;
  font-family: 'Permanent Marker', 'Kalam', cursive;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  color: var(--marker-red);
  line-height: 1;
  transform: rotate(-2deg);
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.08);
  position: relative;
}
.scrapbook__title span { display: block; }
.scrapbook__title span:nth-child(1) { color: var(--marker-purple); transform: rotate(1deg); }
.scrapbook__title span:nth-child(2) { color: var(--marker-orange); transform: rotate(-1deg); font-size: 1.1em; }
.scrapbook__title span:nth-child(3) { color: var(--marker-green); transform: rotate(2deg); }

.scrapbook__subtitle {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: var(--ink-blue);
  transform: rotate(1deg);
  display: inline-block;
  margin-top: 8px;
}

/* Underline drawn like a marker squiggle */
.scribble-underline {
  position: relative;
  display: inline-block;
}
.scribble-underline::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  bottom: -8px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M 2 6 Q 20 2 40 7 T 80 6 Q 100 2 120 8 T 160 6 Q 180 3 198 7' stroke='%23DC2626' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat center;
  background-size: 100% 100%;
}

/* ------- Polaroid ------- */
.polaroid {
  --tilt: -3deg;
  background: #FFFFFF;
  padding: 14px 14px 50px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.15),
    0 10px 25px rgba(0,0,0,0.2);
  transform: rotate(var(--tilt));
  position: relative;
  width: 220px;
  transition: transform 0.3s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }

.polaroid__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 30%;
  background: #E5E7EB;
  filter: saturate(0.9) contrast(1.05);
}

.polaroid__caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 12px;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  color: var(--ink-blue);
}

.polaroid__tape {
  position: absolute;
  width: 90px;
  height: 26px;
  background: var(--tape-yellow);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 120, 0.5),
    0 1px 3px rgba(0,0,0,0.15);
  backdrop-filter: blur(0.5px);
}
.polaroid__tape--tl { top: -13px; left: -20px; transform: rotate(-35deg); }
.polaroid__tape--tr { top: -13px; right: -20px; transform: rotate(25deg); background: var(--tape-blue); }
.polaroid__tape--br { bottom: -10px; right: -16px; transform: rotate(-15deg); background: var(--tape-yellow); width: 60px; }

/* Little #7 jersey sticker on the polaroid */
.polaroid__seven {
  position: absolute;
  top: -18px; right: -18px;
  width: 48px; height: 48px;
  background: #DC2626;
  color: white;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 1.6rem;
  transform: rotate(15deg);
}

/* ------- Sticky notes ------- */
.sticky-note {
  --tilt: -2deg;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 22px;
  background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.1),
    0 8px 20px rgba(0,0,0,0.15),
    inset 0 -3px 8px rgba(0,0,0,0.05);
  transform: rotate(var(--tilt));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: var(--ink-black);
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  min-height: 130px;
  position: relative;
  border-radius: 2px;
  cursor: pointer;
}
.sticky-note:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.03);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 16px 30px rgba(0,0,0,0.2);
  text-decoration: none;
  color: var(--ink-black);
}
.sticky-note__icon { font-size: 2.4rem; margin-bottom: 6px; line-height: 1; }
.sticky-note__title { font-size: 1.3rem; line-height: 1.1; margin-bottom: 4px; }
.sticky-note__sub { font-family: 'Caveat', cursive; font-size: 1rem; color: var(--ink-blue); font-weight: 400; }

.sticky-note--pink  { background: linear-gradient(180deg, #FCE7F3 0%, #FBCFE8 100%); --tilt: 2deg; }
.sticky-note--blue  { background: linear-gradient(180deg, #DBEAFE 0%, #BFDBFE 100%); --tilt: -3deg; }
.sticky-note--green { background: linear-gradient(180deg, #D1FAE5 0%, #A7F3D0 100%); --tilt: 1deg; }
.sticky-note--orange{ background: linear-gradient(180deg, #FED7AA 0%, #FDBA74 100%); --tilt: -1deg; }

/* Tape strip at top of sticky */
.sticky-note::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 60px; height: 20px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape-yellow);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ------- Scrapbook sections ------- */
.scrapbook__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-5);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
@media (max-width: 680px) {
  .scrapbook__grid { grid-template-columns: 1fr; justify-items: center; }
  .scrapbook { padding: 30px 20px 40px 50px; }
  .scrapbook::before { left: 8px; width: 16px; }
}

/* Doodles — inline SVGs sprinkled around */
.doodle {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
}
.doodle--football-1  { top: 24px;  right: 90px; transform: rotate(20deg); }
.doodle--star-1      { top: 12%;   left: 120px; }
.doodle--arrow-1     { top: 38%;   right: 8%;   transform: rotate(-15deg); }
.doodle--heart-1     { bottom: 60px; right: 130px; }
.doodle--lightning-1 { top: 60%; left: 40%; transform: rotate(10deg); }

/* Arrow "look at this" pointing at polaroid */
.scribble-arrow {
  position: relative;
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: var(--marker-red);
  transform: rotate(-6deg);
}

/* Handwritten "bullet list" */
.hand-list {
  list-style: none;
  padding-left: 0;
  font-family: 'Kalam', cursive;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--ink-blue);
}
.hand-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 6px;
}
.hand-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--marker-green);
  font-family: 'Permanent Marker', cursive;
  font-size: 1.1rem;
}
.hand-list li.strike {
  text-decoration: line-through;
  text-decoration-color: var(--marker-red);
  text-decoration-thickness: 2px;
  opacity: 0.65;
}

/* Section header with drawn box */
.hand-header {
  display: inline-block;
  position: relative;
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--marker-purple);
  padding: 6px 14px;
  margin-bottom: var(--space-3);
  transform: rotate(-1deg);
}
.hand-header::before {
  content: '';
  position: absolute;
  inset: -4px -6px;
  border: 3px solid var(--marker-purple);
  border-radius: 8px;
  opacity: 0.8;
  /* hand-drawn wobble via SVG */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'><path d='M 4 6 Q 50 2 100 5 T 196 6 Q 198 30 196 54 Q 150 58 100 55 T 4 54 Q 2 30 4 6 Z' stroke='%239333EA' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
  border: none;
}

/* Speech bubble (for the riddle) */
.speech-bubble {
  position: relative;
  background: white;
  border: 3px solid var(--ink-black);
  border-radius: 20px;
  padding: 18px 20px;
  font-family: 'Kalam', cursive;
  font-size: 1.15rem;
  color: var(--ink-black);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
  margin: 0 0 20px 80px;
  max-width: 520px;
  transform: rotate(0.5deg);
}
.speech-bubble::before {
  content: '';
  position: absolute;
  left: -22px; top: 24px;
  width: 0; height: 0;
  border-right: 22px solid black;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  left: -16px; top: 26px;
  width: 0; height: 0;
  border-right: 18px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Paper clip */
.paperclip {
  position: absolute;
  top: -14px; left: 30%;
  width: 38px; height: 60px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none'><path d='M 14 5 Q 30 5 30 22 L 30 48 Q 30 55 20 55 Q 10 55 10 48 L 10 22 Q 10 14 20 14 Q 26 14 26 22 L 26 40' stroke='%23A0A0A0' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center;
  z-index: 3;
}

/* Match score (handwritten stats) */
.hand-scorecard {
  position: relative;
  background: white;
  border: 2px dashed var(--ink-blue);
  padding: 16px 20px;
  font-family: 'Kalam', cursive;
  transform: rotate(0.8deg);
  box-shadow: 3px 3px 0 rgba(30, 58, 138, 0.15);
}
.hand-scorecard__title {
  font-family: 'Permanent Marker', cursive;
  color: var(--marker-red);
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.hand-scorecard__row {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  color: var(--ink-blue);
  border-bottom: 1.5px dotted rgba(30, 58, 138, 0.3);
  padding: 4px 0;
}
.hand-scorecard__row:last-child { border-bottom: none; }
.hand-scorecard__label { }
.hand-scorecard__val { font-weight: 700; color: var(--marker-red); }

/* Notebook-framed section for the shootout */
.notebook-frame {
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 70px, var(--paper-margin) 70px, var(--paper-margin) 71px, transparent 71px),
    repeating-linear-gradient(var(--paper) 0px, var(--paper) 31px, var(--paper-line) 31px, var(--paper-line) 32px);
  border-radius: 6px;
  padding: 40px 30px 40px 90px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 18px 35px rgba(31, 41, 55, 0.2);
  transform: rotate(0.5deg);
  margin-bottom: var(--space-6);
}
@media (max-width: 680px) {
  .notebook-frame { padding: 24px 16px 30px 46px; }
}

/* Big "SIIUUU" style handwritten emphasis */
.siuuu {
  display: inline-block;
  font-family: 'Permanent Marker', cursive;
  font-size: 1.5em;
  color: var(--marker-red);
  transform: rotate(-6deg);
}

/* PS handwritten footer note */
.ps-note {
  margin-top: var(--space-5);
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--marker-pink);
  transform: rotate(-2deg);
  display: inline-block;
}

/* ============================================================
   PACK HERO — daily pack-opening experience (LEGACY, unused)
   ============================================================ */
.pack-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  min-height: 640px;
  color: white;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(88, 28, 135, 0.7), transparent 70%),
    radial-gradient(ellipse at 50% 80%, rgba(250, 204, 21, 0.15), transparent 60%),
    linear-gradient(180deg, #060314 0%, #1A0B2E 40%, #0B0520 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

/* Ambient dust motes drifting upward */
.pack-hero__motes {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.mote {
  position: absolute;
  width: 4px; height: 4px;
  background: rgba(250, 204, 21, 0.6);
  border-radius: 50%;
  filter: blur(0.5px);
  box-shadow: 0 0 4px rgba(250, 204, 21, 0.7);
  animation: mote-rise linear infinite;
}
@keyframes mote-rise {
  0%   { transform: translateY(0)     translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(-300px) translateX(20px); }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-640px) translateX(-10px); opacity: 0; }
}

/* Spotlight from above */
.pack-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(ellipse at top, rgba(250, 204, 21, 0.22), transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Stage — contains pack, rays, particles, CTA, revealed card */
.pack-stage {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* ---------- CLOSED PACK ---------- */
.pack {
  --pack-w: 260px;
  --pack-h: 370px;
  width: var(--pack-w);
  height: var(--pack-h);
  position: relative;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%),
    repeating-linear-gradient(135deg, #B45309 0px, #B45309 3px, transparent 3px, transparent 10px),
    linear-gradient(165deg, #FBBF24 0%, #F59E0B 30%, #92400E 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.35),
    inset 0 0 0 5px rgba(120, 53, 15, 0.6),
    inset 0 0 60px rgba(120, 53, 15, 0.5),
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(250, 204, 21, 0.4);
  animation: pack-float 3s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.15s ease;
  overflow: hidden;
  transform-style: preserve-3d;
}
.pack:hover:not(.is-opening) {
  transform: translateY(-4px) rotate(-1deg) scale(1.02);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.45),
    inset 0 0 0 5px rgba(120, 53, 15, 0.6),
    inset 0 0 60px rgba(120, 53, 15, 0.5),
    0 24px 50px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(250, 204, 21, 0.55);
}
@keyframes pack-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}

/* Pack inner face */
.pack__inner {
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(139, 69, 19, 0.15) 100%);
}

.pack__top-banner {
  width: 100%;
  text-align: center;
  padding: 6px 0;
  border-top: 1.5px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  color: #7C2D12;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.pack__title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: #FFFFFF;
  letter-spacing: 0.12em;
  text-shadow:
    0 2px 0 #7C2D12,
    0 4px 6px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(255, 255, 255, 0.3);
  margin: 0;
  text-transform: uppercase;
}
.pack__seven {
  font-family: var(--font-heading);
  font-size: 4.5rem;
  line-height: 1;
  color: #7C2D12;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 40px rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* Wax-seal circle */
.pack__seal {
  position: relative;
  width: 86px; height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #FECACA 0%, #EF4444 50%, #991B1B 100%);
  box-shadow:
    inset 2px 2px 6px rgba(255, 255, 255, 0.3),
    inset -2px -2px 6px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.05em;
}
.pack__seal::before {
  /* Seal ribs */
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.3);
}

.pack__footer {
  width: 100%;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #7C2D12;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Shine sweep on pack */
.pack::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 35%;
  height: 120%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: rotate(20deg);
  animation: pack-sheen 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pack-sheen {
  0%, 100% { transform: translateX(-30%) rotate(20deg); opacity: 0; }
  40%, 60% { opacity: 0.85; }
  100% { transform: translateX(300%) rotate(20deg); opacity: 0; }
}

/* Aura ring behind the pack */
.pack__aura {
  position: absolute;
  width: 360px; height: 360px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(250, 204, 21, 0.4) 0%, transparent 45%);
  filter: blur(20px);
  animation: aura-pulse 2s ease-in-out infinite;
}
@keyframes aura-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
}

/* Date chip */
.pack__date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.3);
  border-radius: var(--radius-full);
  color: rgba(250, 204, 21, 0.95);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  backdrop-filter: blur(6px);
  text-transform: uppercase;
}

/* Open button */
.pack-open-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%);
  color: #3F1D0B;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(250, 204, 21, 0.5), 0 0 0 0 rgba(250, 204, 21, 0.6);
  animation: pack-cta-pulse 1.8s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pack-open-btn:hover { transform: translateY(-3px) scale(1.04); }
.pack-open-btn:active { transform: translateY(0) scale(0.96); }
@keyframes pack-cta-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(250, 204, 21, 0.5), 0 0 0 0 rgba(250, 204, 21, 0.65); }
  50% { box-shadow: 0 10px 30px rgba(250, 204, 21, 0.5), 0 0 0 24px rgba(250, 204, 21, 0); }
}

/* Pack-opening animation states */
.pack.is-shaking { animation: pack-shake 0.4s ease-in-out; }
@keyframes pack-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-8px) rotate(-3deg); }
  30% { transform: translateX(8px) rotate(3deg); }
  45% { transform: translateX(-6px) rotate(-2deg); }
  60% { transform: translateX(6px) rotate(2deg); }
  75% { transform: translateX(-3px) rotate(-1deg); }
}
.pack.is-charging {
  animation: pack-charge 0.8s ease-out forwards;
}
@keyframes pack-charge {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.1); filter: brightness(1.8); }
}
.pack.is-exploding {
  animation: pack-explode 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes pack-explode {
  0% { transform: scale(1.1); filter: brightness(1.8) blur(0); opacity: 1; }
  60% { transform: scale(1.5); filter: brightness(3) blur(4px); opacity: 0.8; }
  100% { transform: scale(2); filter: brightness(4) blur(20px); opacity: 0; }
}

/* Light rays SVG overlay during opening */
.pack-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 800px; height: 800px;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s;
  mix-blend-mode: screen;
}
.pack-rays.active {
  opacity: 1;
  animation: rays-emerge 1.5s ease-out forwards;
}
@keyframes rays-emerge {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); opacity: 0; }
}

/* Flash overlay */
.pack-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, rgba(250, 204, 21, 0.8) 30%, transparent 70%);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
}
.pack-flash.active { animation: pack-flash-anim 0.6s ease-out forwards; }
@keyframes pack-flash-anim {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* Particles that explode out from pack */
.pack-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 12;
  opacity: 0;
}
.pack-particle.burst { animation: particle-burst 0.9s ease-out forwards; }
@keyframes particle-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--px, 100px)), calc(-50% + var(--py, 100px))) scale(0.4);
    opacity: 0;
  }
}

/* Reveal state — contains the revealed FUT card + welcome text + menu */
.pack-stage.revealed .pack,
.pack-stage.revealed .pack-open-btn,
.pack-stage.revealed .pack__date-chip,
.pack-stage.revealed .pack__aura { display: none; }

.pack-stage .reveal-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: center;
}
.pack-stage.revealed .reveal-wrap {
  display: flex;
  animation: reveal-fade 0.5s ease-out;
}
@keyframes reveal-fade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.reveal-hello {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: transparent;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDE047 60%, #F59E0B 100%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}
.reveal-sub {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  margin: 0;
}

/* Card rises from pack origin */
.pack-stage .fut-card {
  animation: card-rise 1s cubic-bezier(0.25, 1.2, 0.3, 1) both;
}
.pack-stage.revealed .fut-card {
  animation: card-rise 1s cubic-bezier(0.25, 1.2, 0.3, 1) both, rare-bounce 0.5s ease-out 1s;
}
@keyframes card-rise {
  0% { transform: translateY(60px) scale(0.4); opacity: 0; }
  60% { transform: translateY(-10px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes rare-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px) rotate(1deg); }
  60% { transform: translateY(4px) rotate(-1deg); }
}

/* Live stats + menu for reveal state */
.reveal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* Reveal-state game menu */
.reveal-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  width: 100%;
  max-width: 760px;
  margin-top: var(--space-3);
}

/* Skip hint during animation */
.pack-skip-hint {
  position: absolute;
  bottom: 12px;
  right: 16px;
  z-index: 25;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}
.pack-hero.is-opening .pack-skip-hint { opacity: 1; }
.pack-skip-hint:hover { color: white; }

@media (max-width: 620px) {
  .pack-hero { min-height: 560px; padding: var(--space-5) var(--space-3); }
  .pack { --pack-w: 220px; --pack-h: 320px; }
  .pack__title { font-size: 1.6rem; }
  .pack__seven { font-size: 3.5rem; }
}

/* ============================================================
   MATCH HERO — (kept for legacy, now deprecated) cinematic stadium
   ============================================================ */
.match-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  min-height: 540px;
  color: var(--white);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}

/* --- Layered stadium background --- */
.match-hero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(250, 204, 21, 0.35), transparent 55%),
    linear-gradient(180deg, #4C1D95 0%, #5B21B6 20%, #7C3AED 35%, #EA580C 65%, #7C2D12 90%, #1E1B4B 100%);
  z-index: 1;
}
/* Floating light orbs in the sky */
.match-hero__sky::before,
.match-hero__sky::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.match-hero__sky::before {
  top: 8%; left: 20%;
  width: 200px; height: 200px;
  background: rgba(250, 204, 21, 0.45);
  animation: orb-drift 12s ease-in-out infinite;
}
.match-hero__sky::after {
  top: 12%; right: 18%;
  width: 160px; height: 160px;
  background: rgba(251, 113, 133, 0.4);
  animation: orb-drift 14s ease-in-out infinite 2s;
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.55; }
  50% { transform: translate(20px, -12px); opacity: 0.85; }
}

/* Stadium silhouette */
.match-hero__stadium {
  position: absolute;
  left: 0; right: 0;
  bottom: 28%;
  height: 200px;
  z-index: 2;
  opacity: 0.9;
}
/* Stadium floodlights (pulsing) */
.match-hero__lights {
  position: absolute;
  left: 0; right: 0;
  top: 8%;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: space-around;
}
.match-light {
  position: relative;
  width: 60px; height: 80px;
  animation: light-flicker 4s ease-in-out infinite;
}
.match-light:nth-child(2) { animation-delay: 0.7s; }
.match-light:nth-child(3) { animation-delay: 1.4s; }
.match-light:nth-child(4) { animation-delay: 2.1s; }
.match-light::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 180px; height: 160px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(255,255,230,0.5), transparent 65%);
  filter: blur(8px);
}
.match-light::after {
  content: '';
  position: absolute;
  top: 65px; left: 50%;
  width: 14px; height: 14px;
  transform: translateX(-50%);
  background: #FDE68A;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(253, 230, 138, 0.9), 0 0 30px rgba(255, 255, 200, 0.6);
}
@keyframes light-flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 1; }
  50% { opacity: 0.8; }
  52% { opacity: 1; }
}

/* Crowd rows */
.match-hero__crowd {
  position: absolute;
  left: 0; right: 0;
  bottom: 22%;
  height: 90px;
  z-index: 3;
  overflow: hidden;
  opacity: 0.9;
}
.crowd-row {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.crowd-row--1 { bottom: 0; }
.crowd-row--2 { bottom: 22px; }
.crowd-row--3 { bottom: 44px; opacity: 0.7; }
.crowd-person {
  width: 18px; height: 28px;
  background: #1E1B4B;
  border-radius: 50% 50% 20% 20%;
  animation: crowd-bob 1.8s ease-in-out infinite;
  flex-shrink: 0;
  margin: 0 2px;
}
.crowd-row--1 .crowd-person { background: #1E1B4B; }
.crowd-row--2 .crowd-person { background: #312E81; }
.crowd-row--3 .crowd-person { background: #4338CA; }
.crowd-person:nth-child(3n) { animation-delay: 0.3s; }
.crowd-person:nth-child(5n) { animation-delay: 0.6s; }
.crowd-person:nth-child(7n) { animation-delay: 0.9s; }
@keyframes crowd-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Pitch foreground */
.match-hero__pitch {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 25%;
  z-index: 4;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%),
    repeating-linear-gradient(90deg, rgba(34,197,94,0.95) 0px, rgba(34,197,94,0.95) 60px, rgba(22,163,74,0.95) 60px, rgba(22,163,74,0.95) 120px),
    linear-gradient(180deg, #15803D 0%, #14532D 100%);
  border-top: 2px solid #FACC15;
  box-shadow: inset 0 20px 30px rgba(0,0,0,0.3);
}

/* Confetti drifting in sky */
.match-hero__confetti {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.confetti-mini {
  position: absolute;
  width: 8px; height: 12px;
  opacity: 0.7;
  animation: confetti-drift 8s linear infinite;
}
@keyframes confetti-drift {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(540px) rotate(720deg); opacity: 0; }
}

/* ---------- Content grid ---------- */
.match-hero__content {
  position: relative;
  z-index: 10;
  padding: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: minmax(300px, 1.3fr) minmax(260px, 1fr);
  gap: var(--space-5);
  align-items: center;
  min-height: 540px;
}
@media (max-width: 860px) {
  .match-hero__content {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-3);
    gap: var(--space-4);
  }
  .match-hero { min-height: auto; }
}

/* ---------- Left side: title block ---------- */
.match-hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: 0;
  animation: title-enter 0.8s ease-out 0.3s forwards;
}
@keyframes title-enter {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.match-day-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 14px;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}
.match-day-badge__dot {
  width: 8px; height: 8px;
  background: white;
  border-radius: 50%;
  animation: pulse-red 1.2s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.match-hero__welcome {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.match-hero__name {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7vw, 4.8rem);
  line-height: 0.9;
  margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDE047 50%, #F59E0B 100%);
  -webkit-background-clip: text;
          background-clip: text;
  letter-spacing: 0.02em;
  text-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55)) drop-shadow(0 0 24px rgba(250, 204, 21, 0.35));
  animation: name-scale 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards;
}
@keyframes name-scale {
  0% { opacity: 0; transform: scale(0.4); filter: drop-shadow(0 0 30px rgba(250,204,21,0.9)); }
  100% { opacity: 1; transform: scale(1); }
}

.match-hero__subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  margin: 0;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  opacity: 0;
  animation: subtitle-enter 0.6s ease-out 1s forwards;
}
@keyframes subtitle-enter {
  0% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Live stats row */
.match-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  opacity: 0;
  animation: subtitle-enter 0.6s ease-out 1.2s forwards;
}
.live-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: var(--radius-full);
  color: white;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}
.live-stat__icon { font-size: 1rem; }
.live-stat--streak { border-color: rgba(251, 146, 60, 0.6); }
.live-stat--xp { border-color: rgba(250, 204, 21, 0.6); }
.live-stat--level { border-color: rgba(168, 85, 247, 0.6); }

/* Primary CTA */
.match-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%);
  color: #4C1D95;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(250, 204, 21, 0.45), 0 0 0 0 rgba(250, 204, 21, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  width: max-content;
  opacity: 0;
  animation: cta-enter 0.6s ease-out 1.5s forwards, cta-pulse 2s ease-in-out 2s infinite;
}
.match-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(250, 204, 21, 0.6);
  color: #4C1D95;
  text-decoration: none;
}
.match-cta:active { transform: translateY(0) scale(0.97); }
@keyframes cta-enter {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(250, 204, 21, 0.45), 0 0 0 0 rgba(250, 204, 21, 0.5); }
  50% { box-shadow: 0 8px 24px rgba(250, 204, 21, 0.45), 0 0 0 16px rgba(250, 204, 21, 0); }
}

/* ---------- Right side: FUT card ---------- */
.match-hero__side {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: card-enter 0.9s cubic-bezier(0.25, 0.8, 0.3, 1.3) 0.8s forwards;
}
@keyframes card-enter {
  0% { opacity: 0; transform: translateY(30px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Game-menu buttons ---------- */
.game-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
  opacity: 0;
  animation: subtitle-enter 0.6s ease-out 1.8s forwards;
}
.game-menu-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(107, 33, 168, 0.85) 0%, rgba(76, 29, 149, 0.9) 100%);
  border: 2px solid rgba(250, 204, 21, 0.3);
  border-radius: var(--radius-md);
  color: white;
  text-decoration: none;
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(6px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.game-menu-btn::before {
  /* Slide-in gradient sheen on hover */
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(250, 204, 21, 0.2) 50%, transparent 100%);
  transition: left 0.5s ease;
}
.game-menu-btn:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
  box-shadow: 0 10px 24px rgba(250, 204, 21, 0.25);
  color: white;
  text-decoration: none;
}
.game-menu-btn:hover::before { left: 100%; }
.game-menu-btn__icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.game-menu-btn__label {
  flex: 1;
  font-size: 1rem;
}
.game-menu-btn__sub {
  display: block;
  color: rgba(250, 204, 21, 0.85);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  margin-top: 2px;
  font-family: var(--font-body);
  font-weight: 600;
}
.game-menu-btn__arrow {
  color: var(--yellow);
  font-size: 1.2rem;
  transition: transform 0.2s;
}
.game-menu-btn:hover .game-menu-btn__arrow { transform: translateX(4px); }

/* ---------- Shootout section (own section, no longer in hero) ---------- */
.shootout-section {
  position: relative;
  background: linear-gradient(135deg, #064E3B 0%, #022c22 50%, #042f2e 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.shootout-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.shootout-section__header h2 {
  color: var(--yellow);
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  flex: 1;
  min-width: 200px;
}
.shootout-section__header p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 0.95rem;
}

/* Legacy .stadium-hero — keep empty shell so no refs break if reused */
.stadium-hero { position: relative; }
.stadium-hero__grid { display: grid; }
.stadium-hero__side { text-align: center; }
/* ============================================================
   FUT-STYLE PLAYER CARD (Crispin)
   ============================================================ */
.fut-card {
  --fut-w: 260px;
  --fut-h: 380px;
  /* Parallax vars, set by JS: -0.5..0.5 range */
  --mx: 0;
  --my: 0;
  --tilt: 1;          /* 0..1 easing toward hover state */
  width: var(--fut-w);
  height: var(--fut-h);
  margin: 0 auto;
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 215, 0, 0.18), transparent 60%),
    linear-gradient(165deg, #FACC15 0%, #F59E0B 30%, #B45309 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    inset 0 0 60px rgba(139, 69, 19, 0.35),
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(250, 204, 21, 0.35);
  padding: 14px;
  animation: fut-float 4.5s ease-in-out infinite;
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    rotateX(calc(var(--my) * 14deg * var(--tilt)))
    rotateY(calc(var(--mx) * -14deg * var(--tilt)));
  transition: transform 0.15s ease-out;
  will-change: transform;
  cursor: pointer;
}

/* Holographic gloss overlay — follows cursor */
.fut-card__gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.65 * var(--tilt));
  background:
    radial-gradient(
      circle at calc(50% + var(--mx) * 120%) calc(50% + var(--my) * 120%),
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 240, 150, 0.25) 25%,
      transparent 55%
    );
  transition: opacity 0.3s ease-out;
  z-index: 5;
}
/* Iridescent stripes that shift with angle */
.fut-card__holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: calc(0.35 * var(--tilt));
  background:
    repeating-linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 100, 200, 0.12) 6px,
      rgba(100, 200, 255, 0.1) 12px,
      rgba(255, 220, 100, 0.1) 18px,
      rgba(255, 255, 255, 0.05) 24px
    );
  background-position: calc(var(--mx) * 40%) calc(var(--my) * 40%);
  transition: opacity 0.3s ease-out;
  z-index: 4;
}
/* 3D depth layers — content that translates in Z for parallax feel */
.fut-card__photo,
.fut-card__top,
.fut-card__name,
.fut-card__stats,
.fut-card__spark {
  transform: translateZ(calc(var(--depth, 6px) * var(--tilt)));
}
.fut-card__photo { --depth: 18px; }
.fut-card__top { --depth: 24px; }
.fut-card__name { --depth: 14px; }
.fut-card__stats { --depth: 10px; }
.fut-card__spark { --depth: 30px; }
.fut-card__burst { transform: translateZ(calc(-8px * var(--tilt))); }
@keyframes fut-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* Inner shimmer ornament */
.fut-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.fut-card::after {
  /* Diagonal light sheen that sweeps across */
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40%;
  height: 120%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: rotate(20deg);
  animation: fut-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fut-sheen {
  0%, 100% { transform: translateX(-30%) rotate(20deg); opacity: 0; }
  40%, 60% { opacity: 0.85; }
  100% { transform: translateX(280%) rotate(20deg); opacity: 0; }
}

/* Top strip: rating + position + flag */
.fut-card__top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 8px 0;
  color: #3F1D0B;
}
.fut-card__rating {
  line-height: 0.95;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}
.fut-card__rating-num {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  color: #3F1D0B;
}
.fut-card__rating-pos {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #3F1D0B;
  letter-spacing: 0.12em;
  margin-top: 2px;
  opacity: 0.9;
}
.fut-card__flag {
  font-size: 1.25rem;
  line-height: 1;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Photo area */
.fut-card__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 178px;
  margin-top: -4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.fut-card__photo img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: 50% 22%;
  /* Radial mask — centre bright, edges fade to transparent so the gray
     studio background blends into the gold card, making background-free */
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, #000 55%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, #000 55%, transparent 80%);
  filter: saturate(1.2) contrast(1.1) brightness(1.05) drop-shadow(0 6px 8px rgba(0,0,0,0.35));
}

/* Action-line burst behind the photo (adds "pose energy") */
.fut-card__burst {
  position: absolute;
  top: 50px; left: 0; right: 0;
  height: 200px;
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(255,255,255,0.18) 0deg 20deg,
      transparent 20deg 45deg,
      rgba(255,255,255,0.18) 45deg 65deg,
      transparent 65deg 90deg,
      rgba(255,255,255,0.18) 90deg 110deg,
      transparent 110deg 135deg,
      rgba(255,255,255,0.18) 135deg 155deg,
      transparent 155deg 180deg,
      rgba(255,255,255,0.18) 180deg 200deg,
      transparent 200deg 225deg,
      rgba(255,255,255,0.18) 225deg 245deg,
      transparent 245deg 270deg,
      rgba(255,255,255,0.18) 270deg 290deg,
      transparent 290deg 315deg,
      rgba(255,255,255,0.18) 315deg 335deg,
      transparent 335deg 360deg
    );
  animation: burst-spin 18s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes burst-spin { to { transform: rotate(360deg); } }

/* Floating sparkles */
.fut-card__spark {
  position: absolute;
  z-index: 3;
  color: #FFFFFF;
  font-size: 1rem;
  pointer-events: none;
  animation: spark-twinkle 2.5s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
.fut-card__spark:nth-child(odd) { animation-delay: 0.6s; }
@keyframes spark-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Name row */
.fut-card__name {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #3F1D0B;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
}
.fut-card__divider {
  position: relative;
  z-index: 2;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(63, 29, 11, 0.7), transparent);
  margin: 6px 16px 8px;
}

/* Stats grid */
.fut-card__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  padding: 0 14px;
  color: #3F1D0B;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.4;
}
.fut-stat {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  padding: 1px 0;
}
.fut-stat__label { font-size: 0.7rem; letter-spacing: 0.08em; }
.fut-stat__val {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #6B21A8;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

@media (max-width: 520px) {
  .fut-card { --fut-w: 220px; --fut-h: 330px; }
  .fut-card__rating-num { font-size: 2rem; }
  .fut-card__photo { height: 150px; }
  .fut-card__photo img { width: 170px; height: 170px; }
}

/* Old crest kept in case reused later (legacy) */
.crest {
  --crest-size: 210px;
  width: var(--crest-size);
  height: var(--crest-size);
  margin: 0 auto var(--space-4);
  position: relative;
  animation: crest-float 4s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}
@keyframes crest-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* Outer jersey-stripe ring */
.crest__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 45deg,
      #FACC15 0deg 40deg,
      #6B21A8 40deg 80deg,
      #FACC15 80deg 120deg,
      #6B21A8 120deg 160deg,
      #FACC15 160deg 200deg,
      #6B21A8 200deg 240deg,
      #FACC15 240deg 280deg,
      #6B21A8 280deg 320deg,
      #FACC15 320deg 360deg
    );
  animation: crest-spin 24s linear infinite;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(250, 204, 21, 0.25);
}
@keyframes crest-spin { to { transform: rotate(360deg); } }

/* White separator between ring and photo */
.crest__sep {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 1px rgba(107, 33, 168, 0.15);
}

/* Photo holder — circular, photo face-centered */
.crest__photo {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #E5E7EB 0%, #9CA3AF 100%);
}
.crest__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%; /* bring his face to centre of the circle */
  display: block;
  filter: saturate(1.12) contrast(1.06) brightness(1.02);
}

/* Yellow under-shine arc inside the ring */
.crest__shine {
  position: absolute;
  top: 8%;
  left: 18%;
  right: 18%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse at top, rgba(255,255,255,0.35), transparent 70%);
  pointer-events: none;
  z-index: 3;
}

/* #7 jersey badge */
.crest__seven {
  position: absolute;
  top: -4px; right: -4px;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #FB7185 0%, #DC2626 100%);
  color: white;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.45), 0 0 0 1px rgba(220, 38, 38, 0.2);
  z-index: 4;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* Orbiting football mini-icon (pure decoration) */
.crest__ball {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 36px; height: 36px;
  transform: translateX(-50%);
  background: white;
  border-radius: 50%;
  border: 3px solid #6B21A8;
  box-shadow: 0 4px 10px rgba(107, 33, 168, 0.35);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Nameplate strip */
.crest__name {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 18px;
  background: linear-gradient(90deg, #6B21A8, #4C1D95);
  color: var(--yellow);
  font-family: var(--font-heading);
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--yellow);
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@media (max-width: 520px) {
  .crest { --crest-size: 170px; }
  .crest__seven { width: 52px; height: 52px; font-size: 1.7rem; }
}

.stadium-hero__greeting {
  font-family: var(--font-heading);
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 var(--space-2);
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.stadium-hero__greeting .yellow { color: var(--yellow); }
.stadium-hero__subtitle {
  color: rgba(255,255,255,0.85);
  margin: 0 0 var(--space-3);
  font-weight: 600;
}
.stadium-hero__cr7 {
  background: rgba(250, 204, 21, 0.12);
  border-left: 3px solid var(--yellow);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  color: rgba(255,255,255,0.95);
  font-style: italic;
  min-height: 64px;
}
.stadium-hero__cr7 .cr7-jersey {
  width: 36px; height: 36px;
  background: var(--yellow);
  color: var(--purple-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  flex-shrink: 0;
}

.stadium-hero__game {
  position: relative;
  z-index: 2;
}

/* ============================================================
   Penalty Shootout (v2) styling
   ============================================================ */
.pitch-stage--big {
  background: linear-gradient(180deg, #064E3B 0%, #022c22 100%);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  overflow: hidden;
  position: relative;
}
.pitch-scoreboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  background: rgba(0,0,0,0.45);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid rgba(250,204,21,0.3);
}
.sb-cell { text-align: center; }
.sb-label {
  color: var(--yellow);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.sb-val {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(250,204,21,0.4);
}
.sb-val--big { font-size: 2rem; color: var(--yellow); }

.pitch-playfield {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.goal-svg--v2 {
  width: 100%;
  display: block;
  max-height: 440px;
  border-radius: var(--radius-md);
  background: #050B1F;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
@keyframes crowd-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.crowd-dot { animation: crowd-bob 1.8s ease-in-out infinite; }
.crowd-dot:nth-child(3n) { animation-delay: 0.3s; }
.crowd-dot:nth-child(5n) { animation-delay: 0.6s; }
.crowd-dot:nth-child(7n) { animation-delay: 0.9s; }

.power-wrap {
  background: rgba(0,0,0,0.5);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid rgba(255,255,255,0.1);
}
.power-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}
.power-label .muted { color: rgba(255,255,255,0.7); font-weight: 600; font-family: var(--font-body); font-size: 0.8rem; }
.power-meter {
  position: relative;
  height: 18px;
  background: rgba(0,0,0,0.5);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}
.power-zone {
  position: absolute;
  top: 0; bottom: 0;
  opacity: 0.35;
}
.power-zone--low    { left: 0;    width: 25%;  background: linear-gradient(90deg, #DC2626, #F87171); }
.power-zone--sweet  { left: 25%;  width: 30%;  background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.power-zone--high   { left: 55%;  width: 40%;  background: linear-gradient(90deg, #F97316, #EF4444); }
.power-zone--wild   { left: 95%;  width: 5%;   background: #991B1B; }
.power-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(250,204,21,0.6), rgba(250,204,21,0.9));
  transition: width 0.05s linear;
  pointer-events: none;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.4);
}
.power-marker {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 3px;
  left: 0;
  background: var(--white);
  box-shadow: 0 0 6px var(--white);
  transition: left 0.05s linear;
  pointer-events: none;
}
.power-hint { font-size: 0.75rem; margin-top: 4px; color: rgba(255,255,255,0.55); }

.pitch-message {
  margin-top: var(--space-3);
  background: rgba(250,204,21,0.1);
  border: 1px solid rgba(250,204,21,0.3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--white);
  font-weight: 700;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* ---------- Penalty shootout feel upgrades ---------- */
.pitch-stage--big.stage-slowmo .goal-svg--v2 {
  filter: saturate(1.3) contrast(1.1);
}
.pitch-stage--big.stage-shake { animation: stage-shake 0.35s ease-in-out; }
@keyframes stage-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translate(-4px, -2px); }
  40% { transform: translate(4px, 2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}
.pitch-stage--big.stage-miss .goal-svg--v2 {
  filter: grayscale(0.85) brightness(0.7);
  transition: filter 0.4s ease;
}

/* Streak banner — flies in, escalates with size */
.streak-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  z-index: 20;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--yellow);
  text-shadow:
    0 0 20px rgba(250, 204, 21, 0.9),
    0 4px 0 #4C1D95,
    0 8px 20px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
}
.streak-banner.show {
  animation: streak-pop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes streak-pop {
  0%   { transform: translate(-50%, -50%) scale(0.1) rotate(-8deg); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.25) rotate(4deg); opacity: 1; }
  25%  { transform: translate(-50%, -50%) scale(1)    rotate(-2deg); }
  75%  { transform: translate(-50%, -50%) scale(1)    rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4)  rotate(0deg); opacity: 0; }
}
.streak-banner--fire {
  color: #FBBF24;
  text-shadow:
    0 0 30px rgba(251, 191, 36, 1),
    0 0 60px rgba(239, 68, 68, 0.7),
    0 4px 0 #7F1D1D,
    0 8px 20px rgba(0,0,0,0.7);
}
.streak-banner--epic {
  background: linear-gradient(90deg, #A855F7, #FACC15, #EF4444, #06B6D4);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.8));
}

/* Ball trail — ghost copies that fade */
.ball-ghost {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.2) 70%, transparent 100%);
  pointer-events: none;
  animation: ghost-fade 0.5s ease-out forwards;
}
@keyframes ghost-fade {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}

/* Net ripple lines */
@keyframes net-ripple {
  0% { opacity: 0.7; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ============================================================
   Scoreboard-style stats strip (landing page)
   ============================================================ */
.stats-strip--stadium {
  background: linear-gradient(90deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 2px solid var(--yellow);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
}
.stats-strip--stadium .stat {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  color: var(--white);
}
.stats-strip--stadium .stat__value {
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(250,204,21,0.5);
  font-size: 2.2rem;
}
.stats-strip--stadium .stat__label {
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Section hero title for "Tonight's Match" etc. */
.match-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  color: var(--purple);
}
.match-title .match-badge {
  background: var(--pitch);
  color: var(--white);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}