/* The World Cup — A Grand Tour, 1930-2026. © 2026 Rushikesh Dane. All rights reserved. */
:root{
  --parch:#E0C9A6; --parch-deep:#d6bd96; --paper:#FBF3E2;
  --navy:#0F3157; --navy-l:#2C5A82; --wine:#7D262F; --wine-l:#a8434c;
  --green-d:#487054; --green-l:#79A988; --gold:#C8A24B; --gold-d:#a9863a;
  --rose-d:#D05257; --rose-l:#D67A83; --ink:#2B2620; --ink-soft:#54493c;
  --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--parch);
  background-image:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.35), transparent 55%),
    repeating-linear-gradient(45deg, rgba(43,38,32,.018) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(43,38,32,.018) 0 2px, transparent 2px 22px);
  color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-size:20px; line-height:1.62; letter-spacing:.1px;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 26px 90px;}
.deco-font{font-family:"Poiret One","Century Gothic","Futura",sans-serif;}

/* ---------- HERO ---------- */
.hero{position:relative; text-align:center; padding:46px 0 18px;}
.hero .kicker{ font-family:"Poiret One",sans-serif; letter-spacing:6px;
  text-transform:uppercase; color:var(--wine); font-size:.72rem; font-weight:400;}
.hero h1{ font-family:"Poiret One",sans-serif; color:var(--navy);
  font-size:clamp(2.1rem,6.4vw,4rem); line-height:1.02; margin:.18em 0 .12em;
  letter-spacing:1px; font-weight:400;}
.hero h1 .amp{color:var(--gold);}
.hero .sub{ font-style:italic; color:var(--wine); font-size:clamp(1rem,2.5vw,1.45rem);
  margin:0;}
.sunburst{display:block; margin:6px auto 2px;}
.hero-figs{display:flex; justify-content:center; align-items:flex-end; gap:0;
  margin-top:-6px;}

/* ---------- TYPOGRAPHY ---------- */
.lede{font-size:1.16rem; max-width:760px; margin:18px auto 6px; text-align:center; color:var(--ink-soft);}
.act-head{ display:flex; align-items:baseline; gap:18px; margin:74px 0 8px;
  border-bottom:2px solid rgba(43,38,32,.18); padding-bottom:10px;}
.act-num{ font-family:"Poiret One",sans-serif; color:var(--gold-d);
  font-size:2.6rem; line-height:1; letter-spacing:2px; flex:0 0 auto;}
.act-head h2{ font-family:"Poiret One",sans-serif; color:var(--navy);
  font-size:clamp(1.5rem,4vw,2.3rem); margin:0; font-weight:400; letter-spacing:.5px;}
h3.sub-head{ font-family:"Poiret One",sans-serif; color:var(--wine);
  font-size:1.3rem; font-weight:400; letter-spacing:.4px; margin:34px 0 4px;}
p{margin:.55em 0 .9em;}
.section p{max-width:780px;}
b,strong{color:var(--navy); font-weight:600;}
em.w{font-style:normal; color:var(--wine); font-weight:600;}

/* ---------- DID YOU KNOW (blockquote) ---------- */
.dyk{ border-left:6px solid var(--gold); background:rgba(255,255,255,.40);
  padding:12px 20px; border-radius:0 12px 12px 0; margin:20px 0; font-size:1.04rem;
  box-shadow:0 6px 18px -14px rgba(0,0,0,.4);}
.dyk .tag{color:var(--wine); font-weight:600;}

/* ---------- ALERT / HIGHLIGHT BOXES ---------- */
.alert{ border-radius:14px; padding:15px 22px 15px 20px; margin:22px 0; font-size:1.04rem;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.55); display:flex; gap:12px; align-items:flex-start;}
.alert .eye{font-size:1.15rem; flex:0 0 auto; line-height:1.4;}
.alert.success{ background:#dfeadd; border-left:7px solid var(--green-d); color:#26402f;}
.alert.simple{ background:#f6ebd6; border-left:7px solid var(--wine); color:#3a2326;}
.alert b{color:inherit;}

/* ---------- CHART CARD (white bg to pop) ---------- */
.card{ background:var(--card); border-radius:18px; padding:24px 26px 20px;
  margin:24px 0; box-shadow:0 18px 44px -26px rgba(15,49,87,.55), 0 2px 0 rgba(200,162,75,.5);
  border:1px solid rgba(200,162,75,.35); position:relative;}
.card::before{ content:""; position:absolute; inset:7px; border-radius:13px;
  border:1px solid rgba(15,49,87,.08); pointer-events:none;}
.card .c-title{ font-family:"Poiret One",sans-serif; color:var(--ink); font-size:1.32rem;
  letter-spacing:.4px; margin:0 0 1px;}
.card .c-sub{ font-style:italic; color:var(--navy); font-size:.96rem; margin:0 0 6px;}
.card .c-rule{height:2.5px; width:62px; background:var(--gold); border-radius:2px; margin:6px 0 14px;}
.chart svg{display:block; width:100%; height:auto; overflow:visible;}
.axis text{font-family:"Cormorant Garamond",serif; font-size:13px; fill:var(--ink-soft);}
.axis line, .axis path{stroke:rgba(43,38,32,.22);}
.grid line{stroke:rgba(43,38,32,.10);}
.bar-lbl{font-family:"Cormorant Garamond",serif; fill:var(--ink); font-size:14px;}
.val-lbl{font-family:"Poiret One",sans-serif; font-size:13px; fill:var(--ink);}

/* tooltip */
.tooltip{ position:fixed; pointer-events:none; opacity:0; z-index:50;
  background:var(--navy); color:#fdf6e6; padding:9px 13px; border-radius:9px;
  font-family:"Cormorant Garamond",serif; font-size:15px; line-height:1.35;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6); max-width:260px;
  border:1px solid var(--gold); transition:opacity .12s;}
.tooltip b{color:var(--gold); font-weight:600;}
.tooltip .sc{font-family:"Poiret One",sans-serif; font-size:17px; color:#fff;}

/* ---------- EDITION EXPLORER ---------- */
.explorer-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px;}
.explorer-bar label{font-family:"Poiret One",sans-serif; color:var(--navy); font-size:1.05rem; letter-spacing:.5px;}
select#editionSelect{ font-family:"Cormorant Garamond",serif; font-size:1.05rem;
  padding:5px 12px; border:1.6px solid var(--navy); border-radius:8px; background:var(--paper);
  color:var(--ink); cursor:pointer;}
.exp-head{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:4px 0 18px; min-height:64px;}
.exp-crown{ width:64px; height:64px; flex:0 0 auto;}
.exp-champ{font-family:"Poiret One",sans-serif; font-size:1.7rem; color:var(--navy); line-height:1.05;}
.exp-champ small{display:block; font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:1rem; color:var(--wine); letter-spacing:.3px; margin-top:2px;}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.tile{ background:var(--paper); border-radius:12px; padding:12px 14px 14px;
  border:1px solid rgba(200,162,75,.4);}
.tile .t-k{font-family:"Poiret One",sans-serif; font-size:.72rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--wine);}
.tile .t-v{font-family:"Poiret One",sans-serif; font-size:1.55rem; color:var(--navy); margin:2px 0 8px; line-height:1;}
.tile .t-track{height:8px; background:rgba(15,49,87,.10); border-radius:5px; overflow:hidden;}
.tile .t-fill{height:100%; width:0; border-radius:5px; transition:width .7s cubic-bezier(.2,.7,.2,1);}

/* ---------- DRAMA TICKER ---------- */
.drama-readout{ background:var(--paper); border:1px solid rgba(200,162,75,.45);
  border-radius:12px; padding:14px 18px; margin-top:14px; min-height:96px;
  display:flex; gap:16px; align-items:center;}
.drama-score{font-family:"Poiret One",sans-serif; font-size:1.9rem; color:var(--navy); white-space:nowrap;}
.drama-score .vs{color:var(--gold); font-size:1.1rem; margin:0 6px;}
.drama-txt b{color:var(--wine);}
.drama-txt .yr{font-family:"Poiret One",sans-serif; color:var(--gold-d); letter-spacing:1px;}

/* debutant cards */
.debut-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:18px 0;}
.debut{ background:var(--card); border-radius:14px; padding:18px 16px; text-align:center;
  border:1px solid rgba(200,162,75,.4); box-shadow:0 14px 34px -24px rgba(15,49,87,.5);}
.debut .star{font-size:1.5rem;}
.debut .nm{font-family:"Poiret One",sans-serif; font-size:1.18rem; color:var(--navy); margin:6px 0 2px;}
.debut .meta{font-size:.92rem; color:var(--ink-soft); font-style:italic;}

.legend{display:flex; flex-wrap:wrap; gap:16px; margin:2px 0 12px; font-size:.92rem; color:var(--ink-soft);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.swatch{width:13px; height:13px; border-radius:3px; display:inline-block;}

.flank{display:flex; align-items:stretch; gap:6px;}
.flank .fig{flex:0 0 auto; align-self:center;}
.flank .chart{flex:1 1 auto; min-width:0;}

/* journey-of-the-ball map */
.journey-bar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:10px;}
.play-btn{ font-family:"Poiret One",sans-serif; font-size:1rem; letter-spacing:.5px;
  padding:7px 18px; border:1.6px solid var(--navy); border-radius:22px; background:var(--navy);
  color:#fdf6e6; cursor:pointer; transition:background .2s,transform .1s; -webkit-tap-highlight-color:transparent;}
.play-btn:hover{background:var(--navy-l);}
.play-btn:active{transform:scale(.96);}
.play-btn:disabled{opacity:.55; cursor:default;}
.journey-label{font-style:italic; color:var(--wine); font-size:1rem;}
#worldmap svg .land{fill:#efe2c8; stroke:#d8c39c; stroke-width:.5;}
#worldmap svg .host{fill:#cdb98f;}
#worldmap svg .graticule{fill:none; stroke:rgba(43,38,32,.07); stroke-width:.5;}
.ocean{fill:#f6efe0;}

footer{ text-align:center; margin-top:70px; padding-top:26px; border-top:2px solid rgba(43,38,32,.18);
  color:var(--ink-soft); font-style:italic;}
footer .deco-font{font-style:normal; color:var(--navy); letter-spacing:2px;}

@media(max-width:760px){
  body{font-size:18px;}
  .wrap{padding:0 16px 70px;}
  .card{padding:18px 14px 16px; border-radius:14px;}
  .card::before{inset:5px;}
  .tiles{grid-template-columns:repeat(2,1fr); gap:10px;}
  .tile .t-v{font-size:1.3rem;}
  .debut-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .hero-figs .fig{transform:scale(.72);}
  .flank .fig{display:none;}
  .act-head{margin:54px 0 8px; gap:12px;}
  .act-num{font-size:2rem;}
  .alert{padding:13px 16px; font-size:.98rem;}
  .lede{font-size:1.06rem;}
  .legend{font-size:.84rem; gap:10px;}
  .drama-score{font-size:1.5rem;}
  .exp-champ{font-size:1.4rem;}
  .journey-label{font-size:.9rem;}
}
@media(max-width:430px){
  .tiles{grid-template-columns:repeat(2,1fr);}
  .debut-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:2rem;}
}
/* larger touch targets + no text selection fl::on drag for interactive svg */
.chart svg{ -webkit-tap-highlight-color:transparent; touch-action:pan-y; }
.chart svg circle, .chart svg rect, .chart svg path{ }
@media(hover:none){ .tooltip{font-size:14px;} }
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important;}}

/* ===== NEW: texture · cinema · transitions · sound ===== */
.grain{position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.17; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.svg-defs{position:absolute; width:0; height:0;}
.hero h1,.hero .sub,.act-head h2,.deco-font,.c-title{
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(43,38,32,.16);}
.fig{filter:url(#inkbleed);}

.hero{min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.hero .globe-stage{position:relative; width:min(280px,70vw); height:min(280px,70vw); margin:0 auto 6px;}
.hero .globe-stage svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.spin{transform-box:fill-box; transform-origin:50% 50%; animation:spin 48s linear infinite;}
.orbit{transform-box:fill-box; transform-origin:50% 50%; animation:spin 26s linear infinite;}
.orbit.rev{animation:spin 38s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.cin{opacity:0; animation:rise 1.1s ease both;}
.cin.d1{animation-delay:.25s} .cin.d2{animation-delay:.55s} .cin.d3{animation-delay:.85s} .cin.d4{animation-delay:1.15s}
@keyframes rise{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
.scroll-cue{margin-top:20px; font-family:"Poiret One",sans-serif; letter-spacing:3px; text-transform:uppercase;
  font-size:.64rem; color:var(--ink-soft); opacity:0; animation:rise 1s 1.5s both, bob 2.4s 1.5s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}

.divider{position:relative; height:56px; margin:4px 0 -6px;}
.divider .road{position:absolute; top:50%; left:2%; right:2%; border-top:2px dashed var(--gold-d); opacity:.4;}
.divider .roller{position:absolute; top:50%; left:2%; width:32px; height:32px; margin-top:-16px;}
.divider.go .roller{animation:roll 1.7s cubic-bezier(.25,.1,.25,1) forwards;}
@keyframes roll{from{left:2%; transform:rotate(0);} to{left:calc(98% - 32px); transform:rotate(1080deg);}}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

.sound-btn{position:fixed; right:16px; bottom:16px; z-index:20; width:46px; height:46px; border-radius:50%;
  border:1.6px solid var(--gold-d); background:rgba(251,243,226,.92); color:var(--navy); cursor:pointer;
  font-size:1.1rem; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(43,38,32,.18);
  transition:transform .15s, background .2s; -webkit-tap-highlight-color:transparent;}
.sound-btn:hover{background:#fff;} .sound-btn:active{transform:scale(.93);}
.sound-btn.on{background:var(--navy); color:var(--gold); border-color:var(--navy);}
.sound-hint{position:fixed; right:70px; bottom:26px; z-index:20; font-family:"Cormorant Garamond",serif;
  font-style:italic; color:var(--ink-soft); font-size:.92rem; background:rgba(251,243,226,.9);
  padding:4px 10px; border-radius:14px; opacity:0; transform:translateX(8px); transition:.4s; pointer-events:none;}
.sound-hint.show{opacity:1; transform:none;}

/* Ko-fi "Support me" widget: sit beside the volume button (.sound-btn).
   Ko-fi's own CSS switches the wrap to width:auto/50% under ~550px, and since
   only `right` is set (left:auto), that becomes a shrink-to-fit box with no
   in-flow content (the button is an absolutely-positioned iframe) -> width
   collapses to 0 and the 195px button iframe inside overflows off-screen.
   Pinning the width ourselves bypasses that breakpoint logic entirely. */
.floatingchat-container-wrap, .floatingchat-container-wrap-mobi{
  right:72px !important; left:auto !important; bottom:16px !important;
  width:195px !important; max-width:195px !important;
}
.floating-chat-kofi-popup-iframe{
  right:72px !important; left:auto !important;
}
/* The popup is 325px (288px under 350px device-width) wide; anchoring it from
   the right at the same offset as the button overflows past the left edge on
   phones, so only move it on screens with room to spare and let narrow ones
   keep Ko-fi's own safe, left-anchored default. */
@media(min-width:480px){
  .floating-chat-kofi-popup-iframe-mobi{
    right:72px !important; left:auto !important;
  }
}