/* ============================================================
   Father's Day — DAD'S MATCHDAY (for Mr Boateng)
   Football tribute: FIFA-style player card, mowed pitch,
   sticker-album gallery, stadium anthem, full-time scoreboard.
   Mobile-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --font-jersey: 'Anton', 'Arial Narrow', sans-serif;
  --font-ui:     'Archivo', system-ui, sans-serif;
  --font-mono:   'DM Mono', 'Courier New', monospace;
  --maxw: 460px;
  --kit: #E4002B;
}

/* ---------- Modes ---------- */
[data-mode="day"] {
  --pitch:   #2C8B50;
  --pitch-2: #277E48;
  --edge:    #0E3D21;
  --line:    rgba(255,255,255,0.72);
  --cream:   #F2F8F2;
  --cream-soft: rgba(242,248,242,0.78);
  --card:    #FFFFFF;
  --card-ink:#16271C;
  --card-soft:#52685B;
  --card-muted:#86988C;
  --hair:    rgba(20,40,30,0.13);
  --kit:     #E4002B;
  --flood:   rgba(255,255,255,0);
}
[data-mode="night"] {
  --pitch:   #16572F;
  --pitch-2: #134B29;
  --edge:    #07260f;
  --line:    rgba(255,255,255,0.55);
  --cream:   #EEF6EE;
  --cream-soft: rgba(238,246,238,0.72);
  --card:    #FFFFFF;
  --card-ink:#16271C;
  --card-soft:#52685B;
  --card-muted:#86988C;
  --hair:    rgba(20,40,30,0.13);
  --kit:     #E4002B;
  --flood:   rgba(213,255,224,0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--edge);
  font-family: var(--font-ui);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }

.page {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% -6%, var(--flood), transparent 60%),
    repeating-linear-gradient(180deg, var(--pitch) 0 66px, var(--pitch-2) 66px 132px);
  color: var(--cream);
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,0.45);
  transition: background .5s ease;
}

.content { position: relative; z-index: 4; }

/* ---------- atoms ---------- */
.kicker {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream);
}
.board {
  background: var(--card); color: var(--card-ink);
  border-radius: 12px; box-shadow: 0 16px 36px rgba(0,0,0,0.28);
}
.divider { height: 2px; background: var(--line); opacity: .4; margin: 0 26px; }

/* ============================================================
   HERO — scoreboard + player card
   ============================================================ */
.hero { padding: 16px 22px 40px; position: relative; }

.scorebar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px; padding: 9px 14px; margin-bottom: 26px;
  backdrop-filter: blur(3px);
}
.scorebar .side { font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); }
.scorebar .vs { font-family: var(--font-mono); font-size: 11px; color: var(--kit); letter-spacing: 0.1em; }
.scorebar .clock { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: #ffe07a; }
.scorebar .clock .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kit); box-shadow: 0 0 7px var(--kit); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-title { text-align: center; margin-bottom: 22px; }
.hero-title .k { color: var(--cream); opacity: .9; margin-bottom: 8px; }
.hero-title h1 {
  font-family: var(--font-jersey); font-weight: 400;
  font-size: clamp(40px, 13vw, 60px); line-height: 0.9; letter-spacing: 0.01em;
  text-transform: uppercase; margin: 0; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.hero-title h1 b { color: var(--kit); -webkit-text-stroke: 0; }

/* pitch markings behind card */
.markings { position: absolute; left: 0; right: 0; top: 210px; height: 360px; z-index: 0; pointer-events: none; }
.mark-circle { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; border: 2px solid var(--line); border-radius: 50%; opacity: .5; }
.mark-line { position: absolute; top: 18px; left: 24px; right: 24px; height: 2px; background: var(--line); opacity: .5; }
.mark-spot { position: absolute; top: 132px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--line); opacity: .55; }

/* player card (FIFA-style) */
.player-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 320px; margin: 0 auto;
  aspect-ratio: 0.72; border-radius: 16px; overflow: hidden;
  background: linear-gradient(165deg, #ffe9a8 0%, var(--kit) 46%, #6d0016 100%);
  box-shadow: 0 26px 50px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.35);
}
.pc-photo { position: absolute; inset: 0; }
.pc-photo image-slot { width: 100%; height: 100%; display: block; }
.pc-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.05) 28%, rgba(0,0,0,0.45) 58%, rgba(0,0,0,0.86) 100%); }
.pc-corner {
  position: absolute; top: 16px; left: 16px; z-index: 3; text-align: center; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.pc-corner .rate { font-family: var(--font-jersey); font-size: 42px; line-height: 0.8; }
.pc-corner .pos { font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; }
.pc-corner .rule { width: 30px; height: 2px; background: rgba(255,255,255,0.7); margin: 7px auto; }
.pc-corner .crest { font-size: 18px; line-height: 1; }
.pc-num {
  position: absolute; top: 16px; right: 18px; z-index: 3;
  font-family: var(--font-jersey); font-size: 40px; color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.pc-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 18px 18px; color: #fff; text-align: center; }
.pc-name { font-family: var(--font-jersey); font-size: clamp(28px, 9vw, 38px); line-height: 0.92; text-transform: uppercase; letter-spacing: 0.01em; }
.pc-divide { height: 2px; background: rgba(255,255,255,0.45); margin: 9px 30px 12px; }
.pc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; max-width: 220px; margin: 0 auto; }
.pc-stats .st { display: flex; align-items: baseline; gap: 7px; justify-content: flex-start; }
.pc-stats .st b { font-family: var(--font-jersey); font-size: 17px; min-width: 26px; }
.pc-stats .st span { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; opacity: 0.92; }

.kickoff {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin: 26px auto 0; cursor: pointer;
  background: #fff; color: var(--card-ink); border: none; border-radius: 100px;
  padding: 13px 24px 13px 15px;
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(0,0,0,0.3); transition: transform .15s ease;
}
.kickoff:active { transform: scale(.96); }
.kickoff .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--kit); color: #fff; display: grid; place-items: center; }
.kickoff .ic svg { width: 13px; height: 13px; }

/* ============================================================
   GAFFER'S NOTES — message
   ============================================================ */
.notes { padding: 44px 22px; }
.notes .board { padding: 26px 24px 28px; }
.notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.notes-head .badge { width: 34px; height: 38px; flex: none; background: var(--kit); border-radius: 5px 5px 14px 14px / 5px 5px 16px 16px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.notes-head .h { font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-soft); }
.letter { font-family: var(--font-ui); font-size: 17px; line-height: 1.66; color: var(--card-ink); font-weight: 400; }
.letter p { margin: 0 0 0.95em; }
.letter em { color: var(--kit); font-style: normal; font-weight: 700; }
.sign-inline { margin-top: 18px; font-family: var(--font-jersey); font-size: 24px; text-transform: uppercase; color: var(--card-ink); letter-spacing: 0.02em; }

/* ============================================================
   STICKER ALBUM — gallery
   ============================================================ */
.album { padding: 32px 22px 44px; }
.album-head { text-align: center; margin-bottom: 26px; }
.album-head .kicker { display: block; margin-bottom: 6px; }
.album-head h2 { font-family: var(--font-jersey); font-size: 32px; text-transform: uppercase; margin: 0; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.sticker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.sticker {
  position: relative; background: #fff; padding: 7px 7px 24px; border-radius: 4px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}
.sticker:nth-child(odd) { transform: rotate(-2.2deg); }
.sticker:nth-child(even) { transform: rotate(1.8deg); }
.sticker .art { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 2px; background: #20302a; }
.sticker .art image-slot { width: 100%; height: 100%; display: block; }
.sticker .no { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: #6c7d71; text-transform: uppercase; }
.sticker::after { content: ""; position: absolute; top: 7px; left: 7px; right: 7px; height: 30%; background: linear-gradient(120deg, rgba(255,255,255,0.5), transparent 60%); border-radius: 2px; pointer-events: none; }

/* ============================================================
   STADIUM ANTHEM
   ============================================================ */
.anthem { padding: 30px 22px 44px; }
.anthem .board { padding: 18px; display: flex; align-items: center; gap: 15px; }
.anthem .crest-sq { width: 70px; height: 70px; flex: none; border-radius: 8px; overflow: hidden; background: #20302a; position: relative; }
.anthem .crest-sq image-slot { width: 100%; height: 100%; display: block; }
.anthem .meta { flex: 1; min-width: 0; }
.anthem .meta .lbl { font-family: var(--font-ui); font-weight: 800; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kit); }
.anthem .meta .ttl { font-family: var(--font-jersey); font-size: 22px; line-height: 1.04; margin: 4px 0 2px; color: var(--card-ink); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anthem .meta .by { font-family: var(--font-ui); font-size: 13px; color: var(--card-soft); font-weight: 500; }
.anthem .meta .eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 12px; margin-top: 8px; }
.anthem .meta .eq i { width: 2.5px; background: var(--kit); height: 30%; border-radius: 2px; }
.anthem.playing .eq i { animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(1){animation-delay:-.2s}.eq i:nth-child(2){animation-delay:-.5s}.eq i:nth-child(3){animation-delay:-.1s}.eq i:nth-child(4){animation-delay:-.7s}.eq i:nth-child(5){animation-delay:-.35s}
@keyframes eq { 0%,100%{height:22%} 50%{height:100%} }
.anthem .whistle {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: none; background: var(--kit); color: #fff; display: grid; place-items: center;
  cursor: pointer; transition: transform .15s ease; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.anthem .whistle:active { transform: scale(.92); }
.anthem .whistle svg { width: 18px; height: 18px; }

/* ============================================================
   FULL TIME — sign-off scoreboard
   ============================================================ */
.fulltime { padding: 24px 22px 96px; }
.ft-board {
  background: #0c1f14; border: 2px solid rgba(255,255,255,0.16); border-radius: 14px;
  padding: 30px 24px 32px; text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.ft-board .ft { font-family: var(--font-jersey); font-size: clamp(36px, 12vw, 50px); color: #ffe07a; letter-spacing: 0.04em; line-height: 0.9; text-transform: uppercase; }
.ft-score { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 20px 0 16px; }
.ft-score .team { font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); max-width: 90px; line-height: 1.2; }
.ft-score .num { font-family: var(--font-jersey); font-size: 52px; color: #fff; line-height: 0.8; }
.ft-score .dash { color: rgba(255,255,255,0.5); font-family: var(--font-jersey); font-size: 30px; }
.ft-motm { display: inline-block; white-space: nowrap; background: var(--kit); color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; margin-bottom: 18px; }
.ft-from { font-family: var(--font-jersey); font-size: 28px; text-transform: uppercase; color: #fff; }
.ft-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); opacity: .7; margin-top: 12px; }

/* ============================================================
   FLOATING — matchday pill
   ============================================================ */
.music-pill {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 70; display: flex; align-items: center; gap: 11px;
  background: #fff; border: none; box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  border-radius: 100px; padding: 7px 16px 7px 8px; cursor: pointer;
  max-width: calc(var(--maxw) - 44px); width: max-content; font-family: var(--font-ui);
  transition: transform .2s ease;
}
.music-pill:active { transform: translateX(-50%) scale(.97); }
.pill-ball {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #1c1c1c 0 16%, transparent 17%),
    radial-gradient(circle at 22% 70%, #1c1c1c 0 11%, transparent 12%),
    radial-gradient(circle at 78% 70%, #1c1c1c 0 11%, transparent 12%),
    #fff;
  box-shadow: inset 0 0 0 1.5px #cfd6d0;
}
.music-pill.playing .pill-ball { animation: roll 1.6s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
.pill-txt { line-height: 1.15; min-width: 0; }
.pill-txt .a { font-family: var(--font-ui); font-weight: 800; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--card-muted); }
.pill-txt .b { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--card-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 13px; }
.pill-eq i { width: 2.5px; background: var(--kit); height: 30%; border-radius: 2px; }
.music-pill.playing .pill-eq i { animation: eq 0.9s ease-in-out infinite; }
.pill-eq i:nth-child(1){animation-delay:-.2s}.pill-eq i:nth-child(2){animation-delay:-.55s}.pill-eq i:nth-child(3){animation-delay:-.1s}.pill-eq i:nth-child(4){animation-delay:-.4s}

/* ---------- ticker-tape confetti ---------- */
.confetti-layer { position: fixed; inset: 0; z-index: 75; pointer-events: none; overflow: hidden; }
.petal { position: absolute; top: -24px; width: 7px; height: 12px; border-radius: 1px; background: var(--kit); opacity: 0; will-change: transform, opacity; }

image-slot { background: #20302a; }

@media (prefers-reduced-motion: reduce) {
  .petal { display: none; }
  .scorebar .clock .dot, .eq i, .pill-eq i, .music-pill.playing .pill-ball { animation: none !important; }
}


/* ============================================================
   desktop.css — big-screen (tablet / laptop) layout for ALL
   five Father's Day themes. Mobile stays untouched; at >= 992px
   the page becomes a two-pane spread: a sticky hero panel on the
   left, the notes / gallery / music / sign-off scrolling on the
   right, with galleries opening up to more columns.

   Relies on the shared structure each app now uses:
     .page > .content > (header.hero + .rest)
   ============================================================ */

@media (min-width: 992px) {

  /* ---------------- shared frame ---------------- */
  .page {
    max-width: 1200px;
    overflow: visible;            /* let the hero pin via position:sticky */
  }

  .content {
    display: grid;
    grid-template-columns: minmax(360px, 432px) minmax(0, 1fr);
    column-gap: 60px;
    align-items: start;
    padding: 0 52px;
  }

  .hero {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rest { min-width: 0; }
  .rest > .divider:first-child { display: none; }

  /* keep long-form reading at a comfortable measure */
  .rest .letter { max-width: 58ch; }

  /* ---------------- ELEGANT (styles.css) ---------------- */
  .hero-portrait { max-height: 58vh; }
  .gallery .grid { gap: 16px; }

  /* ---------------- CINEMA (cinema.css) ---------------- */
  .poster-wrap { max-width: 360px; margin-left: auto; margin-right: auto; }
  .poster { max-height: 42vh; }
  .hero .bulb-rule { margin-top: 12px; margin-bottom: 16px; }

  /* ---------------- HIGHLIFE (highlife.css) ---------------- */
  .record-set { max-width: 432px; }
  .crate-grid { grid-template-columns: repeat(3, 1fr); }

  /* ---------------- MATCHDAY (matchday.css) ---------------- */
  .markings { display: none; }
  .sticker-grid { grid-template-columns: repeat(3, 1fr); }

  /* ---------------- GARAGE (garage.css) ---------------- */
  .cover-frame { max-height: 46vh; }
  .specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .spec-row { padding: 11px 0; }
  .road-grid { grid-template-columns: repeat(3, 1fr); }
}

/* A roomier mid-band for large tablets / small laptops in portrait. */
@media (min-width: 992px) and (max-width: 1180px) {
  .content { column-gap: 44px; padding: 0 36px; }
  .crate-grid, .sticker-grid, .road-grid { grid-template-columns: repeat(2, 1fr); }
}



/* ============================================================
   Static control state — vanilla music + confetti helpers.
   (Added for the no-framework static build.)
   ============================================================ */
[data-music-toggle] { cursor: pointer; }
.i-pause { display: none; }
.is-playing .i-play { display: none; }
.is-playing .i-pause { display: inline-block; }
[data-when-playing] { display: none; }
.is-playing [data-when-idle] { display: none; }
.is-playing [data-when-playing] { display: inline; }