/* ==============================================
   Update 4.0 — RETRO PIXEL OS
   ============================================== */
:root{
  --ink:        #0a0414;
  --ink-2:      #150826;
  --shadow:     #2a0e3f;
  --purple:     #4a1d6e;
  --purple-2:   #6b2a96;
  --magenta:    #c91b6e;
  --hotpink:    #ff2e88;
  --coral:      #ff4d2e;
  --orange:     #ff7f30;
  --gold:       #ffc233;
  --gold-2:     #ffd966;
  --cream:      #ffe8b3;
  --bone:       #f4d4a8;
  --cyan:       #1ad1ff;
  --mint:       #4ce7a0;
  --red:        #ff3b5c;

  --font-display: 'Press Start 2P', monospace;
  --font-ui:      'Silkscreen', monospace;
  --font-body:    'VT323', monospace;

  --frame: 4px;
  --pad:   24px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  background:var(--ink);
}
body{
  font-family:var(--font-body);
  font-size:22px;
  line-height:1.35;
  color:var(--cream);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #2a0e3f 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 100%, #5a1340 0%, transparent 70%),
    var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  image-rendering:pixelated;
  -webkit-font-smoothing:none;
  -moz-osx-font-smoothing:grayscale;
}

/* CRT scanlines + vignette overlay */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.18) 0px,
      rgba(0,0,0,0.18) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode:multiply;
}
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9998;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,27,110,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(26,209,255,0.04), transparent 40%);
}

/* Twinkling stars layer */
.starfield{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 42%, #ffe8b3, transparent),
    radial-gradient(1px 1px at 47% 9%, #fff, transparent),
    radial-gradient(1px 1px at 63% 33%, #1ad1ff, transparent),
    radial-gradient(1px 1px at 78% 14%, #fff, transparent),
    radial-gradient(1px 1px at 88% 50%, #ffc233, transparent),
    radial-gradient(1px 1px at 8%  62%, #fff, transparent),
    radial-gradient(1px 1px at 35% 78%, #ff2e88, transparent),
    radial-gradient(1px 1px at 70% 88%, #fff, transparent),
    radial-gradient(1px 1px at 92% 78%, #4ce7a0, transparent);
  animation:twinkle 4s steps(2) infinite;
  opacity:.7;
}
@keyframes twinkle{
  0%,100%{ opacity:.7; }
  50%{ opacity:.3; }
}

/* ============================================
   PIXEL FRAME — chunky 8-bit border using shadows
   ============================================ */
.frame{
  position:relative;
  background:var(--ink-2);
  border:var(--frame) solid var(--gold);
  box-shadow:
    0 0 0 var(--frame) var(--ink),
    inset 0 0 0 var(--frame) var(--ink-2);
  padding:calc(var(--pad) + 4px);
}
.frame--magenta{ border-color:var(--magenta); }
.frame--cyan{ border-color:var(--cyan); }
.frame--coral{ border-color:var(--coral); }
.frame--purple{ border-color:var(--purple-2); }

/* corner pixel notches */
.frame::before,
.frame::after{
  content:'';
  position:absolute;
  width:8px; height:8px;
  background:var(--ink);
  z-index:2;
}
.frame::before{ top:-4px; left:-4px; box-shadow: calc(100% + 8px - 8px) 0 0 var(--ink); }
.frame::after{ bottom:-4px; left:-4px; box-shadow: calc(100% + 8px - 8px) 0 0 var(--ink); }

/* ============================================
   TYPOGRAPHY
   ============================================ */
.display{
  font-family:var(--font-display);
  letter-spacing:.05em;
  line-height:1.4;
  text-transform:uppercase;
}
.ui{
  font-family:var(--font-ui);
  letter-spacing:.06em;
  text-transform:uppercase;
}
h1,h2,h3,h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; }
h1{ font-size:clamp(22px,5vw,40px); }
h2{ font-size:clamp(18px,3.4vw,28px); }
h3{ font-size:clamp(13px,2vw,18px); }
h4{ font-size:clamp(11px,1.6vw,14px); }
p{ font-family:var(--font-body); font-size:clamp(18px,2vw,22px); }

a{ color:var(--cyan); text-decoration:none; }
a:hover{ color:var(--gold); }

.glow-gold{   color:var(--gold);    text-shadow:0 0 0 var(--ink), 2px 2px 0 var(--coral); }
.glow-pink{   color:var(--hotpink); text-shadow:2px 2px 0 var(--purple); }
.glow-cyan{   color:var(--cyan);    text-shadow:2px 2px 0 var(--purple); }
.glow-coral{  color:var(--coral);   text-shadow:2px 2px 0 #5a0a18; }
.glow-cream{  color:var(--cream);   text-shadow:2px 2px 0 var(--ink); }

.label{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.15em;
  color:var(--gold);
  text-transform:uppercase;
}

/* ============================================
   NAV — fixed retro HUD
   ============================================ */
.hud{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:linear-gradient(180deg, rgba(10,4,20,.95), rgba(10,4,20,.85));
  backdrop-filter:blur(2px);
  border-bottom:2px solid var(--gold);
  box-shadow:0 4px 0 var(--coral), 0 8px 0 var(--ink);
}
.hud-inner{
  max-width:1280px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.hud-logo{ margin-right:auto; }
.hud-rsvp{
  font-family:var(--font-display);
  font-size:11px;
  padding:8px 14px;
  background:var(--hotpink);
  color:var(--ink);
  border:2px solid var(--cyan);
  cursor:pointer;
  letter-spacing:.12em;
  text-decoration:none;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s steps(2), background .12s steps(2);
  white-space:nowrap;
  animation:rsvp-pulse 2.4s steps(8) infinite;
}
.hud-rsvp:hover{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--coral);
  transform:translate(-1px,-1px);
  animation:none;
}
@keyframes rsvp-pulse{
  0%,100%{ box-shadow:3px 3px 0 var(--ink); }
  50%   { box-shadow:3px 3px 0 var(--ink), 0 0 12px var(--hotpink); }
}
.hud-logo{
  font-family:var(--font-display);
  font-size:14px;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--coral);
  letter-spacing:.05em;
  display:flex;
  align-items:center;
  gap:8px;
}
.hud-logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--coral);
  line-height:1;
}
.hud-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.hud-nav a{
  font-family:var(--font-ui);
  font-size:11px;
  padding:8px 10px;
  color:var(--cream);
  border:2px solid transparent;
  letter-spacing:.1em;
  transition:all .12s steps(2);
}
.hud-nav a:hover{
  color:var(--ink);
  background:var(--gold);
  border-color:var(--coral);
}

.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-size:11px;
  padding:8px 12px;
  background:var(--gold);
  color:var(--ink);
  border:2px solid var(--coral);
  cursor:pointer;
  letter-spacing:.1em;
  transition:transform .12s steps(2);
}
.lang-toggle:hover{ background:var(--gold-2); }
.lang-toggle:active{ transform:translate(1px,1px); }
.lang-toggle .flag{
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-size:14px;
  line-height:1;
}

.hud-burger{
  display:none;
  background:var(--gold);
  color:var(--ink);
  border:2px solid var(--coral);
  font-family:var(--font-display);
  font-size:11px;
  padding:8px 12px;
  cursor:pointer;
}
@media (max-width: 880px){
  .hud-nav{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    background:var(--ink);
    border-top:2px solid var(--gold);
    padding:8px;
    gap:4px;
    display:none;
  }
  .hud-nav.open{ display:flex; }
  .hud-nav a{ width:100%; text-align:left; }
  .hud-burger{ display:block; }
}
@media (max-width: 480px){
  .hud-inner{ padding:8px 10px; gap:6px; }
  .hud-logo{ font-size:12px; }
  .hud-rsvp,
  .lang-toggle,
  .hud-burger{ padding:6px 9px; font-size:10px; }
  .lang-toggle .flag{ font-size:12px; }
}

/* ============================================
   HERO / TITLE SCREEN
   ============================================ */
.hero{
  position:relative;
  min-height:100vh;
  padding:120px 16px 60px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-scene{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,
      #1a0626 0%,
      #3d0d4e 18%,
      #6b1659 35%,
      #c4326b 55%,
      #ff5e2e 72%,
      #ffa53d 84%,
      #ffd966 92%,
      #4a1858 100%
    );
}
/* pixel sun */
.hero-sun{
  position:absolute;
  bottom:4%;
  left:50%;
  transform:translate(-50%, var(--py, 0px));
  will-change:transform;
  width:min(420px, 70vw);
  aspect-ratio:1;
  z-index:1;
  background:
    radial-gradient(circle at center, var(--gold-2) 0%, var(--gold-2) 45%, var(--orange) 45%, var(--orange) 50%, var(--coral) 50%, var(--coral) 55%, transparent 55%);
  filter:drop-shadow(0 0 40px rgba(255,127,48,.6));
  animation:sun-pulse 4s steps(8) infinite;
}
.hero-sun::before,
.hero-sun::after{
  content:'';
  position:absolute;
  inset:0;
  /* horizontal pixel slats */
  background:repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 8px,
    rgba(10,4,20,.7) 8px,
    rgba(10,4,20,.7) 12px
  );
  mask:radial-gradient(circle at center, black 55%, transparent 55%);
  -webkit-mask:radial-gradient(circle at center, black 55%, transparent 55%);
}
.hero-sun::after{
  background:repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 16px,
    rgba(10,4,20,.4) 16px,
    rgba(10,4,20,.4) 20px
  );
}
@keyframes sun-pulse{
  0%,100%{ filter:drop-shadow(0 0 40px rgba(255,127,48,.6)); }
  50%{    filter:drop-shadow(0 0 80px rgba(255,194,51,.8)); }
}
/* pixel ocean reflection */
.hero-ocean{
  position:absolute;
  bottom:0; left:0; right:0;
  height:18%;
  background:
    repeating-linear-gradient(0deg,
      transparent 0,
      transparent 6px,
      rgba(255,194,51,.35) 6px,
      rgba(255,194,51,.35) 8px
    ),
    linear-gradient(180deg, #4a1858 0%, #1a0626 100%);
}
/* pixel dunes silhouette in foreground */
.hero-dunes{
  position:absolute;
  bottom:0; left:-5%; right:-5%;
  height:30%;
  transform:translateY(var(--py, 0px));
  will-change:transform;
  background:
    radial-gradient(ellipse 60% 100% at 25% 100%, var(--ink) 50%, transparent 51%),
    radial-gradient(ellipse 50% 100% at 75% 100%, var(--ink) 50%, transparent 51%);
  z-index:2;
}
.hero-dunes::before{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:25%;
  background:var(--ink);
}

.hero-content{
  position:relative;
  z-index:5;
  max-width:1100px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

.hero-badges{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.hero-badge{
  display:inline-flex;
  gap:6px;
  align-items:center;
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--ink);
  background:var(--gold);
  padding:6px 12px;
  letter-spacing:.18em;
  box-shadow:4px 4px 0 var(--coral);
}
.hero-badge::before{ content:'◆'; color:var(--coral); }
.hero-badge--alt{
  background:var(--hotpink);
  color:var(--ink);
  box-shadow:4px 4px 0 var(--cyan);
  font-family:var(--font-display);
  font-size:10px;
}
.hero-badge--alt::before{ content:''; }

.title-update{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(38px, 10vw, 110px);
  line-height:.95;
  color:var(--gold);
  letter-spacing:.02em;
  margin:8px 0;
  text-shadow:
    4px 4px 0 var(--coral),
    8px 8px 0 var(--magenta),
    12px 12px 0 var(--purple);
  animation:title-bob 3s steps(6) infinite;
}
@keyframes title-bob{
  0%,100%{ transform:translateY(0); }
  50%{    transform:translateY(-4px); }
}
/* RGB-split glitch — fires briefly every 7s */
.title-update::before,
.title-update::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  display:block;
  text-align:center;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  pointer-events:none;
  text-shadow:none;
  opacity:0;
  z-index:1;
}
.title-update::before{
  color:var(--cyan);
  animation:glitch-cyan 7s steps(4) infinite;
}
.title-update::after{
  color:var(--hotpink);
  animation:glitch-pink 7s steps(4) infinite;
}
@keyframes glitch-cyan{
  0%, 87%, 100%   { opacity:0; transform:translate(0,0); clip-path:inset(0 0 100% 0); }
  88%, 89.5%      { opacity:.75; transform:translate(-5px, 1px); clip-path:inset(15% 0 60% 0); }
  90%, 91.5%      { opacity:.55; transform:translate(-7px,-2px); clip-path:inset(55% 0 18% 0); }
  92%, 93%        { opacity:.4;  transform:translate(-3px, 0);   clip-path:inset(35% 0 35% 0); }
}
@keyframes glitch-pink{
  0%, 87%, 100%   { opacity:0; transform:translate(0,0); clip-path:inset(0 0 100% 0); }
  88%, 89.5%      { opacity:.75; transform:translate(5px,-1px); clip-path:inset(20% 0 55% 0); }
  90%, 91.5%      { opacity:.55; transform:translate(7px, 2px); clip-path:inset(60% 0 12% 0); }
  92%, 93%        { opacity:.4;  transform:translate(3px, 0);   clip-path:inset(40% 0 30% 0); }
}

.hero-subtitle{
  font-family:var(--font-display);
  font-size:clamp(13px,2.4vw,20px);
  color:var(--cream);
  text-shadow:3px 3px 0 var(--ink);
  letter-spacing:.1em;
}
.hero-tagline{
  font-family:var(--font-body);
  font-size:clamp(18px,2.4vw,26px);
  color:var(--gold-2);
  font-style:italic;
  letter-spacing:.03em;
  text-shadow:2px 2px 0 var(--ink);
  margin-top:-8px;
  max-width:42ch;
}
.hero-meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--gold);
  letter-spacing:.15em;
}
.hero-meta span{
  background:rgba(10,4,20,.7);
  padding:8px 12px;
  border:2px solid var(--gold);
  text-shadow:1px 1px 0 var(--ink);
}

.hero-tag{
  font-family:var(--font-display);
  font-size:clamp(10px,1.6vw,14px);
  color:var(--hotpink);
  letter-spacing:.18em;
  margin-top:12px;
  text-shadow:2px 2px 0 var(--ink);
}

/* countdown */
.countdown{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.countdown .cell{
  background:var(--ink);
  border:3px solid var(--gold);
  padding:10px 12px;
  min-width:72px;
  box-shadow:4px 4px 0 var(--magenta);
}
.countdown .num{
  font-family:var(--font-display);
  font-size:clamp(18px,3vw,26px);
  color:var(--gold-2);
  display:block;
  text-align:center;
}
.countdown .lbl{
  font-family:var(--font-ui);
  font-size:9px;
  color:var(--cream);
  letter-spacing:.15em;
  display:block;
  text-align:center;
  margin-top:4px;
}

.start-btn{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  font-family:var(--font-display);
  font-size:13px;
  color:var(--ink);
  background:var(--gold);
  border:3px solid var(--ink);
  cursor:pointer;
  letter-spacing:.1em;
  box-shadow:6px 6px 0 var(--coral), 6px 6px 0 4px var(--ink);
  text-transform:uppercase;
  transition:transform .1s steps(2);
}
.start-btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--coral), 8px 8px 0 4px var(--ink);
  background:var(--gold-2);
}
.start-btn .blink{ animation:blink 1s steps(2) infinite; }
.start-btn .chevron{
  display:inline-block;
  animation:chev-pulse 1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
@keyframes chev-pulse{
  0%,100%{ transform:translateX(0); }
  50%    { transform:translateX(4px); }
}

/* ============================================
   SHARED SECTION SHELL
   ============================================ */
section.s{
  position:relative;
  z-index:5;
  padding:80px 16px;
  max-width:1280px;
  margin:0 auto;
}
.section-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.section-head .chip{
  font-family:var(--font-display);
  font-size:11px;
  color:var(--ink);
  background:var(--gold);
  padding:6px 10px;
  letter-spacing:.1em;
}
.section-head h2{
  color:var(--cream);
  text-shadow:3px 3px 0 var(--magenta);
}
.section-head .line{
  flex:1;
  height:6px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px, transparent 8px 12px);
  margin-top:10px;
}

/* ============================================
   LORE — narrator dialogue
   ============================================ */
.lore-box{
  background:var(--ink-2);
  border:4px solid var(--cyan);
  padding:22px 22px 24px;
  position:relative;
  box-shadow: 0 0 0 4px var(--ink), 8px 8px 0 4px var(--magenta);
}
.lore-tag{
  position:absolute;
  top:-14px; left:16px;
  font-family:var(--font-display);
  font-size:10px;
  color:var(--ink);
  background:var(--cyan);
  padding:5px 9px;
  letter-spacing:.12em;
}
.lore-box p{
  font-family:var(--font-body);
  font-size:clamp(20px,2.2vw,26px);
  color:var(--cream);
  line-height:1.4;
  margin-bottom:14px;
}
.lore-box p:last-child{ margin-bottom:0; }
.lore-box .speaker{
  font-family:var(--font-display);
  font-size:11px;
  color:var(--gold);
  display:block;
  margin-bottom:10px;
  letter-spacing:.12em;
}
.lore-cursor{
  display:inline-block;
  width:14px; height:18px;
  background:var(--gold);
  vertical-align:middle;
  animation:blink 0.7s steps(2) infinite;
}

/* ============================================
   PLAYERS — character select grid
   ============================================ */
/* crew banner — animated group portrait above the player grid */
.crew-banner{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 28px;
  padding:0;
  background:var(--ink-2);
  border:4px solid var(--gold);
  box-shadow:0 0 0 4px var(--ink), 8px 8px 0 4px var(--magenta);
  cursor:pointer;
  overflow:hidden;
  font:inherit;
  color:inherit;
  transition:transform .15s steps(3);
}
.crew-banner:hover{ transform:translate(-2px,-2px); }
.crew-banner img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  -ms-interpolation-mode:nearest-neighbor;
}
.crew-banner-tag{
  position:absolute;
  bottom:10px; left:10px;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--ink);
  background:var(--gold);
  padding:5px 9px;
  letter-spacing:.12em;
  box-shadow:3px 3px 0 var(--ink);
}

.players-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
/* phones: force 2-up so users scroll half as much through the roster */
@media (max-width:600px){
  .players-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
}

.pcard{
  background:var(--ink-2);
  border:4px solid var(--coral);
  padding:0;
  position:relative;
  display:flex;
  flex-direction:column;
  box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px var(--magenta);
  transition:transform .15s steps(3);
}
.pcard:hover{
  transform:translate(-3px,-3px);
  box-shadow: 0 0 0 4px var(--ink), 9px 9px 0 4px var(--magenta);
}
.pcard.is-host{ border-color:var(--gold); box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--coral); }
.pcard.is-bonus{
  border-color:var(--cyan);
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--hotpink);
}
.pcard.is-bonus .pcard-top{
  background:linear-gradient(180deg, #0a0414 0%, #2a0e3f 35%, #6b1659 65%, #1ad1ff 100%);
  border-bottom-color:var(--cyan);
}
.pcard.is-bonus .pcard-name{ color:var(--cyan); text-shadow:2px 2px 0 var(--magenta); }
.pcard.is-bonus .pcard-id{ color:var(--hotpink); }

/* full-image card variant — image fills the frame, click to zoom */
.pcard--img{
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
}
.pcard--img img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  -ms-interpolation-mode:nearest-neighbor;
}
/* tap-to-zoom hint, bottom-right of each card */
.pcard--img::after{
  content:'▸ ZOOM';
  position:absolute;
  bottom:6px; right:6px;
  font-family:var(--font-display);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--ink);
  background:var(--gold);
  padding:4px 6px;
  pointer-events:none;
  box-shadow:2px 2px 0 var(--ink);
  z-index:3;
}
.pcard--img.is-bonus::after{ background:var(--cyan); }
.pcard-ribbon.ribbon-host{
  background:var(--gold);
  color:var(--ink);
}
.pcard-ribbon.ribbon-host::after{ background:#a07748; }

/* CAPTAIN blinking tag — sits just above the SHADI name box on the card art,
   pixel-tag styled like the PRESS START blink in the hero */
.pcard.is-captain .cap-blink{
  position:absolute;
  top:3px;
  left:3px;
  z-index:4;
  font-family:var(--font-display);
  font-size:8px;
  letter-spacing:.14em;
  color:var(--hotpink);
  background:rgba(10,4,20,0.88);
  padding:3px 6px;
  border:1px solid var(--hotpink);
  text-shadow:1px 1px 0 var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
/* shared star treatment for CAPTAIN + BONUS tags — beefier glyph than Press Start 2P */
.pcard.is-captain .cap-star,
.pcard-ribbon .cap-star{
  font-family:'Apple Color Emoji','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif;
  font-size:9px;
  line-height:1;
  letter-spacing:0;
}

/* sparkly stars on bonus card avatar background */
.pcard.is-bonus .pcard-top::before{
  content:'';
  background:
    radial-gradient(1px 1px at 18% 20%, #fff, transparent),
    radial-gradient(1px 1px at 70% 35%, #ffc233, transparent),
    radial-gradient(1px 1px at 30% 60%, #fff, transparent),
    radial-gradient(1px 1px at 85% 70%, #1ad1ff, transparent),
    radial-gradient(1px 1px at 50% 15%, #ff2e88, transparent),
    radial-gradient(2px 2px at 20% 45%, #fff, transparent);
  width:auto; height:auto;
  inset:0;
  top:0; right:0;
  border-radius:0;
  box-shadow:none;
  background-color:transparent;
  animation:twinkle 2.5s steps(2) infinite;
}

/* ribbon flag for bonus card */
.pcard-ribbon{
  position:absolute;
  top:14px;
  left:-10px;
  z-index:5;
  background:var(--cyan);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:9px;
  padding:5px 12px 5px 14px;
  letter-spacing:.16em;
  box-shadow:3px 3px 0 var(--ink);
  white-space:nowrap;
}
.pcard-ribbon::after{
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:4px; height:4px;
  background:#0a8fb3;
}

.pcard-top{
  position:relative;
  height:240px;
  background:linear-gradient(180deg, #2d0f4e 0%, #6b1659 50%, #c4326b 100%);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border-bottom:4px solid var(--coral);
}
.pcard.is-host .pcard-top{ border-bottom-color:var(--gold); }
.pcard-top::before{
  /* moons */
  content:'';
  position:absolute;
  top:18px; right:24px;
  width:32px; height:32px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--cream) 0%, var(--cream) 40%, var(--bone) 41%, var(--bone) 100%);
  box-shadow:
    -42px 16px 0 -8px var(--gold),
    20px 60px 0 -22px var(--cyan);
}
.pcard-top::after{
  /* horizon mountain */
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:40%;
  background:
    radial-gradient(ellipse 55% 100% at 30% 100%, #2a0a3d 50%, transparent 51%),
    radial-gradient(ellipse 50% 100% at 70% 100%, #1a0428 50%, transparent 51%);
}
.pcard-avatar{
  position:relative;
  z-index:2;
  width:140px; height:170px;
  margin-bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.pcard-body{ padding:14px 14px 16px; }
.pcard-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:10px;
}
.pcard-name{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--ink);
  letter-spacing:.04em;
  word-break:break-word;
}
.pcard-id{
  font-family:var(--font-ui);
  font-size:9px;
  color:var(--cyan);
  letter-spacing:.18em;
}
.pcard-nick{
  font-family:var(--font-body);
  font-size:18px;
  color:var(--hotpink);
  margin-bottom:8px;
  letter-spacing:.05em;
}
.pcard-nick::before{ content:'« '; opacity:.7; }
.pcard-nick::after{ content:' »'; opacity:.7; }

.pcard-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 8px;
  margin:8px 0 10px;
  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.1em;
}
.pcard-meta .k{ color:var(--cyan); }
.pcard-meta .v{ color:var(--cream); font-family:var(--font-body); font-size:14px; letter-spacing:0; text-transform:none; }

.pcard-stats{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:8px;
}
.pstat{
  display:grid;
  grid-template-columns:74px 1fr 28px;
  gap:8px;
  align-items:center;
}
.pstat .nm{
  font-family:var(--font-ui);
  font-size:9px;
  color:var(--cream);
  letter-spacing:.12em;
}
.pstat .bar{
  height:10px;
  background:#2a0a3d;
  border:2px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.pstat .fill{
  position:absolute;
  inset:0;
  width:0%;
  background:repeating-linear-gradient(90deg,
    var(--c,var(--coral)) 0 6px,
    rgba(0,0,0,.2) 6px 8px
  );
  transition:width 1.4s steps(20);
}
.pstat .vl{
  font-family:var(--font-ui);
  font-size:11px;
  color:var(--gold);
  text-align:right;
}
.pstat.charisma .fill{ --c:var(--hotpink); }
.pstat.energy   .fill{ --c:var(--gold); }
.pstat.style    .fill{ --c:var(--cyan); }
.pstat.chaos    .fill{ --c:var(--coral); }

.pcard-tag{
  margin-top:12px;
  padding-top:10px;
  border-top:2px dashed rgba(255,194,51,.4);
  font-family:var(--font-body);
  font-size:16px;
  color:var(--cream);
  font-style:italic;
}
.pcard-tag::before{ content:'» '; color:var(--gold); }

/* sprite avatars - tiny pixel-art figures via CSS */
.sprite{
  position:relative;
  width:80px; height:120px;
  image-rendering:pixelated;
}
.sprite svg{ width:100%; height:100%; }

/* ============================================
   MAP — pixel map + embed
   ============================================ */
.map-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}
@media (max-width:880px){
  .map-grid{ grid-template-columns:1fr; }
}
.map-card{
  background:var(--ink-2);
  border:4px solid var(--cyan);
  padding:18px;
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--coral);
}
.map-info h3{ color:var(--gold); margin-bottom:10px; text-shadow:2px 2px 0 var(--magenta); }
.map-info .row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
  font-family:var(--font-body);
  font-size:18px;
}
.map-info .row .ico{
  font-family:var(--font-display);
  font-size:10px;
  background:var(--gold);
  color:var(--ink);
  padding:4px 6px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.map-info .cta{
  display:inline-block;
  margin-top:18px;
  padding:10px 16px;
  background:var(--coral);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.1em;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--gold);
  cursor:pointer;
}
.map-info .cta:hover{ background:var(--gold); }

.pixmap{
  position:relative;
  width:100%;
  aspect-ratio:11/10;
  background:#0e2a3a;
  border:4px solid var(--cyan);
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--coral);
  overflow:hidden;
  image-rendering:pixelated;
}
.pixmap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  image-rendering:pixelated;
  -ms-interpolation-mode:nearest-neighbor;
}
.pixmap svg{ display:block; }

/* AURA destination pulse overlay (centered on the pin in the static map) */
.aura-ping{
  position:absolute;
  top:83%;
  left:48%;
  width:0;
  height:0;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 0 6px rgba(255,46,136,.6));
}
.aura-ping .ring{
  position:absolute;
  top:0; left:0;
  width:18px; height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  border:3px solid var(--hotpink);
  opacity:0;
  animation:aura-pulse 2.4s steps(12) infinite;
}
.aura-ping .ring.r2{
  border-color:var(--gold);
  animation-delay:.8s;
  animation-duration:2.4s;
}
.aura-ping .ring.r3{
  border-color:var(--cyan);
  animation-delay:1.6s;
}
@keyframes aura-pulse{
  0%   { transform:scale(0.3); opacity:0.95; }
  85%  { transform:scale(3.6); opacity:0; }
  100% { transform:scale(3.6); opacity:0; }
}
/* On smaller maps the pulse should also shrink */
@media (max-width:640px){
  .aura-ping .ring{ width:12px; height:12px; margin:-6px 0 0 -6px; border-width:2px; }
}
.embed{
  width:100%;
  aspect-ratio:1.4/1;
  border:0;
  background:var(--ink);
  display:block;
}
.embed-wrap{
  margin-top:16px;
  border:4px solid var(--gold);
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--magenta);
  overflow:hidden;
}

/* ============================================
   STYLE GUIDE — moodboard
   ============================================ */
.style-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:980px){ .style-grid{ grid-template-columns:1fr; } }

.style-card{
  background:var(--ink-2);
  border:4px solid var(--magenta);
  padding:20px;
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--gold);
  display:flex; flex-direction:column;
}
.style-card.women{ border-color:var(--hotpink); box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--cyan); }
.style-card.acc{   border-color:var(--cyan);    box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--coral); }

/* image-only mood-board variant — keeps the colored frame, image fills inside */
.style-card--img{
  position:relative;
  padding:0;
  display:block;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:transform .15s steps(3);
}
.style-card--img::after{
  content:'▸ CLICK TO ZOOM';
  position:absolute;
  bottom:10px; right:10px;
  font-family:var(--font-display);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--ink);
  background:var(--gold);
  padding:5px 7px;
  pointer-events:none;
  display:block;
  box-shadow:2px 2px 0 var(--ink);
  z-index:2;
}
@media (max-width:680px){
  .style-card--img::after{ content:'▸ TAP TO ZOOM'; }
}
.style-card--img:hover{ transform:translate(-3px,-3px); }
.style-card--img img{
  display:block;
  width:100%;
  height:auto;
  /* photos, not pixel art — render smoothly + lift dark mids for legibility */
  image-rendering:auto;
  filter:brightness(1.12) contrast(1.08) saturate(1.05);
  transition:filter .2s steps(2);
}
.style-card--img:hover img{
  filter:brightness(1.2) contrast(1.12) saturate(1.08);
}
/* gear is the darkest — all brass/leather on black, no skin/cream tones to lift it. boost more. */
.style-card--img.acc img{
  filter:brightness(1.28) contrast(1.18) saturate(1.1);
}
.style-card--img.acc:hover img{
  filter:brightness(1.35) contrast(1.22) saturate(1.12);
}

/* ============================================
   MOOD BOARD — sub-sections + responsive grid of cropped cards
   ============================================ */
.style-section{
  margin-top:24px;
  margin-bottom:36px;
}
.style-section-title{
  font-family:var(--font-display);
  font-size:clamp(13px, 1.8vw, 16px);
  color:var(--gold);
  margin-bottom:16px;
  text-shadow:2px 2px 0 var(--magenta);
  letter-spacing:.06em;
}
.moodboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:14px;
}
.moodboard-grid--gear{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.moodboard-card{
  display:block;
  padding:0;
  background:var(--ink-2);
  border:3px solid var(--gold);
  box-shadow:0 0 0 3px var(--ink), 4px 4px 0 3px var(--magenta);
  cursor:pointer;
  overflow:hidden;
  font:inherit;
  color:inherit;
  text-align:left;
  transition:transform .15s steps(3), box-shadow .15s steps(3);
}
.moodboard-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:0 0 0 3px var(--ink), 6px 6px 0 3px var(--magenta);
}
.moodboard-card img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  -ms-interpolation-mode:nearest-neighbor;
}
.moodboard-card--wide{ border-color:var(--cyan); box-shadow:0 0 0 3px var(--ink), 4px 4px 0 3px var(--coral); }
.moodboard-card--wide:hover{ box-shadow:0 0 0 3px var(--ink), 6px 6px 0 3px var(--coral); }

.style-quote{
  margin-top:18px;
  padding:14px 18px;
  background:var(--ink);
  border-left:4px solid var(--gold);
  font-family:var(--font-body);
  font-size:clamp(18px, 2vw, 22px);
  color:var(--cream);
  font-style:italic;
  max-width:60ch;
}

.style-card h3{
  color:var(--gold);
  margin-bottom:6px;
  text-shadow:2px 2px 0 var(--ink);
}
.style-card .sub{
  font-family:var(--font-ui);
  font-size:10px;
  color:var(--cyan);
  letter-spacing:.18em;
  margin-bottom:14px;
}
.style-card ul{
  list-style:none;
  font-family:var(--font-body);
  font-size:18px;
  color:var(--cream);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.style-card li{
  padding-left:18px;
  position:relative;
}
.style-card li::before{
  content:'▸';
  position:absolute;
  left:0;
  color:var(--gold);
}

.swatches{
  display:flex;
  gap:4px;
  margin-top:14px;
  flex-wrap:wrap;
}
.swatches .sw{
  width:32px; height:32px;
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}

.style-vibe{
  margin-top:16px;
  padding:10px 12px;
  background:var(--ink);
  border-left:4px solid var(--gold);
  font-family:var(--font-body);
  font-size:17px;
  color:var(--cream);
  font-style:italic;
}

/* DO / DON'T row */
.dodont{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
}
@media (max-width:680px){ .dodont{ grid-template-columns:1fr; } }
.dodont-cell{
  padding:14px;
  border:3px solid var(--mint);
  background:rgba(76,231,160,.05);
}
.dodont-cell.dont{
  border-color:var(--red);
  background:rgba(255,59,92,.05);
}
.dodont-cell h4{
  font-size:11px;
  color:var(--mint);
  margin-bottom:8px;
  letter-spacing:.12em;
}
.dodont-cell.dont h4{ color:var(--red); }
.dodont-cell ul{
  list-style:none;
  font-family:var(--font-body);
  font-size:17px;
  color:var(--cream);
}
.dodont-cell li{ padding-left:16px; position:relative; }
.dodont-cell li::before{ content:'+'; position:absolute; left:0; color:var(--mint); font-weight:700; }
.dodont-cell.dont li::before{ content:'×'; color:var(--red); }

/* ============================================
   SCHEDULE — extended weekend overview + quest log
   ============================================ */
.weekend-overview{
  background:var(--ink-2);
  border:4px solid var(--cyan);
  padding:18px;
  margin-bottom:22px;
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--magenta);
}
.weekend-overview-head{
  font-family:var(--font-display);
  font-size:12px;
  color:var(--cyan);
  letter-spacing:.14em;
  margin-bottom:14px;
  text-shadow:2px 2px 0 var(--ink);
}
.weekend-days{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}
.weekend-day{
  padding:12px;
  background:var(--ink);
  border:2px solid var(--purple-2);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.weekend-day .day-label{
  font-family:var(--font-display);
  font-size:11px;
  color:var(--cream);
  letter-spacing:.1em;
}
.weekend-day .day-tag{
  font-family:var(--font-body);
  font-size:16px;
  color:var(--bone);
  line-height:1.3;
}
.weekend-day--main{
  border-color:var(--gold);
  background:linear-gradient(180deg, var(--ink) 0%, #2a0e3f 100%);
  box-shadow:0 0 0 1px var(--coral);
  animation:sat-glow 2.4s steps(8) infinite;
}
@keyframes sat-glow{
  0%,100%{ box-shadow:0 0 0 1px var(--coral), 0 0 0 transparent; }
  50%   { box-shadow:0 0 0 1px var(--coral), 0 0 18px var(--hotpink); }
}
.weekend-day--main .day-label{
  color:var(--gold);
  text-shadow:2px 2px 0 var(--coral);
  animation:sat-label-pulse 2.4s steps(8) infinite;
}
@keyframes sat-label-pulse{
  0%,100%{ text-shadow:2px 2px 0 var(--coral); }
  50%   { text-shadow:2px 2px 0 var(--coral), 0 0 8px var(--gold-2); }
}
.weekend-day--main .day-tag{
  color:var(--gold-2);
  font-weight:bold;
}
.weekend-note{
  margin-top:14px;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--bone);
  opacity:.75;
  font-style:italic;
}

.quest-log{
  background:var(--ink-2);
  border:4px solid var(--gold);
  padding:8px;
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--coral);
}
.quest{
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-bottom:2px dashed rgba(255,194,51,.3);
  position:relative;
}
.quest:last-child{ border-bottom:none; }
.quest .time{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--magenta);
  text-align:center;
  background:var(--ink);
  padding:8px 6px;
  border:2px solid var(--gold);
}
.quest .body{ }
.quest .title{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--cream);
  margin-bottom:4px;
  text-shadow:1px 1px 0 var(--ink);
}
.quest .desc{
  font-family:var(--font-body);
  font-size:17px;
  color:var(--bone);
  opacity:.9;
}
.quest .pin{
  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.15em;
  padding:4px 8px;
  background:var(--purple);
  color:var(--cream);
  border:2px solid var(--ink);
  white-space:nowrap;
}
.quest .pin.beach{ background:var(--cyan); color:var(--ink); }
.quest .pin.fire{  background:var(--coral); color:var(--ink); }
.quest .pin.feast{ background:var(--gold); color:var(--ink); }
.quest .pin.dance{ background:var(--hotpink); color:var(--ink); }
.quest .pin.dawn{  background:var(--mint); color:var(--ink); }

/* the night gets louder — heat-rising titles for sunset / headline / late-night quests */
.quest:has(.pin.fire) .title{
  color:var(--coral);
  text-shadow:1px 1px 0 var(--ink), 0 0 6px rgba(255,127,48,.45);
}
.quest:has(.pin.dance) .title{
  color:var(--hotpink);
  text-shadow:1px 1px 0 var(--ink), 0 0 8px rgba(255,46,136,.55);
}

@media (max-width:680px){
  .quest{
    grid-template-columns:1fr;
    gap:8px;
  }
  .quest .pin{ justify-self:start; }
}

/* ============================================
   INTEL — survival kit, weather, camp code
   ============================================ */
.intel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.intel-card{
  background:var(--ink-2);
  border:4px solid var(--cyan);
  padding:18px;
  box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--magenta);
  display:flex; flex-direction:column;
}
.intel-card.kit{   border-color:var(--gold);    box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--purple-2); }
.intel-card.wx{    border-color:var(--coral);   box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--cyan); }
.intel-card.rules{ border-color:var(--mint);    box-shadow:0 0 0 4px var(--ink), 6px 6px 0 4px var(--coral); }
.intel-card h3{
  color:var(--gold);
  margin-bottom:6px;
  font-size:14px;
  text-shadow:2px 2px 0 var(--ink);
}
.intel-card .tag{
  font-family:var(--font-ui);
  font-size:10px;
  color:var(--cyan);
  letter-spacing:.16em;
  margin-bottom:14px;
}
.intel-card ul{ list-style:none; font-family:var(--font-body); font-size:18px; color:var(--cream); display:flex; flex-direction:column; gap:6px; }
.intel-card li{ padding-left:20px; position:relative; }
.intel-card li::before{ content:'▣'; position:absolute; left:0; color:var(--gold); font-size:14px; }

.weather-box{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  margin-top:auto;
  padding:14px;
  background:var(--ink);
  border:2px solid var(--coral);
}
.weather-icon{
  width:48px; height:48px;
  background:
    radial-gradient(circle at center, var(--gold) 30%, var(--orange) 30% 50%, transparent 50%);
  position:relative;
}
.weather-stats{ font-family:var(--font-body); font-size:16px; color:var(--cream); }
.weather-stats .big{
  font-family:var(--font-display);
  font-size:18px;
  color:var(--coral);
  display:block;
  margin-bottom:2px;
}

/* Family / nannies — compact side-note strip */
.family-callout{
  margin-top:24px;
  padding:10px 16px;
  background:var(--ink-2);
  border:3px solid var(--hotpink);
  box-shadow:0 0 0 3px var(--ink), 4px 4px 0 3px var(--gold);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:10px 16px;
}
.family-callout .fc-tag{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--gold);
  text-shadow:2px 2px 0 var(--magenta);
  flex-shrink:0;
  white-space:nowrap;
}
.family-callout .fc-text{
  font-family:var(--font-body);
  font-size:clamp(15px, 1.7vw, 18px);
  color:var(--cream);
  flex:1 1 220px;
  min-width:0;
  line-height:1.25;
}
.family-cta{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 12px;
  font-family:var(--font-display);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--ink);
  background:var(--hotpink);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--cyan);
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s steps(2);
  white-space:nowrap;
  flex-shrink:0;
  margin-left:auto;
}
.family-cta:hover{
  background:var(--gold);
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--cyan);
}
@media (max-width:520px){
  .family-callout{ justify-content:center; text-align:center; }
  .family-cta{ margin-left:0; }
}

/* RSVP CTA */
.rsvp{
  margin-top:36px;
  padding:32px 20px;
  text-align:center;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 12px,
      rgba(255,46,136,.08) 12px 14px
    ),
    var(--ink-2);
  border:4px solid var(--hotpink);
  box-shadow:0 0 0 4px var(--ink), 8px 8px 0 4px var(--gold);
  position:relative;
}
.rsvp h3{
  color:var(--gold);
  font-size:18px;
  margin-bottom:8px;
  text-shadow:3px 3px 0 var(--magenta);
}
.rsvp p{
  color:var(--cream);
  font-size:20px;
  max-width:560px;
  margin:0 auto 18px;
}
.rsvp-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.rsvp-btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:12px 18px;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink);
  background:var(--gold);
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--coral);
  cursor:pointer;
  text-decoration:none;
}
.rsvp-btn.ghost{ background:var(--ink); color:var(--cyan); border-color:var(--cyan); box-shadow:4px 4px 0 var(--magenta); }
.rsvp-btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--coral); }
.rsvp-btn.ghost:hover{ box-shadow:5px 5px 0 var(--magenta); color:var(--gold); }

/* ============================================
   LIGHTBOX — click a player card to zoom
   ============================================ */
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  cursor:zoom-out;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:min(100%, 720px);
  max-height:90vh;
  width:auto;
  height:auto;
  display:block;
  border:4px solid var(--gold);
  box-shadow:0 0 0 4px var(--ink), 8px 8px 0 4px var(--magenta);
  /* smooth scaling — pinch-zoom + pixelated rasterisation OOM-crashes WebKit on big images */
  image-rendering:auto;
  cursor:default;
}
.lightbox-close{
  position:absolute;
  top:20px; right:20px;
  width:44px; height:44px;
  background:var(--gold);
  color:var(--ink);
  border:3px solid var(--ink);
  font-family:var(--font-display);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--coral);
  z-index:2;
}
.lightbox-close:hover{ background:var(--coral); color:var(--ink); }
.lightbox-download{
  position:absolute;
  top:20px; right:76px;
  height:44px;
  padding:0 14px;
  background:var(--cyan);
  color:var(--ink);
  border:3px solid var(--ink);
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.1em;
  line-height:1;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--magenta);
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.lightbox-download:hover{ background:var(--gold); }
.lightbox-download .dl-arrow{
  font-size:14px;
  line-height:1;
  /* sharp pixel rendering — chunkier than smoothed Unicode arrow */
  font-family:var(--font-display);
}
.lightbox-prev,
.lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px;
  background:var(--gold);
  color:var(--ink);
  border:3px solid var(--ink);
  font-family:var(--font-display);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--magenta);
  z-index:1;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0 0 4px;
}
.lightbox.has-nav .lightbox-prev,
.lightbox.has-nav .lightbox-next{ display:flex; }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
.lightbox-prev:hover,
.lightbox-next:hover{
  background:var(--coral);
  transform:translateY(-50%) translate(-1px,-1px);
  box-shadow:5px 5px 0 var(--magenta);
}
@media (max-width:560px){
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; font-size:20px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ width:38px; height:38px; font-size:18px; top:12px; right:12px; }
  .lightbox-download{ height:38px; padding:0 10px; font-size:9px; top:12px; right:58px; gap:6px; }
  .lightbox-download .dl-arrow{ font-size:11px; }
  /* on very narrow phones, keep just the arrow icon */
  @media (max-width:380px){
    .lightbox-download .dl-label{ display:none; }
    .lightbox-download{ width:38px; padding:0; justify-content:center; }
  }
}

/* ============================================
   FOOTER
   ============================================ */
footer{
  margin-top:60px;
  padding:30px 16px 50px;
  text-align:center;
  border-top:4px solid var(--gold);
  background:linear-gradient(180deg, transparent, rgba(255,46,136,.08));
  position:relative;
  z-index:5;
}
footer .marquee{
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--gold);
  letter-spacing:.18em;
  margin-bottom:18px;
  border-top:2px solid var(--coral);
  border-bottom:2px solid var(--coral);
  padding:8px 0;
}
footer .marquee span{
  display:inline-block;
  padding-left:100%;
  animation:marq 22s linear infinite;
}
@keyframes marq{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}
footer .credits{
  font-family:var(--font-body);
  font-size:16px;
  color:var(--bone);
  opacity:.7;
}
.version-tag{
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.15em;
  color:var(--hotpink);
  padding:2px 6px;
  border:1px solid var(--hotpink);
  margin-left:4px;
}
footer .game-over{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--hotpink);
  text-shadow:2px 2px 0 var(--ink);
  margin-top:12px;
}

/* ============================================
   UTILITIES
   ============================================ */
.center{ text-align:center; }
.muted{ color:var(--bone); opacity:.7; }
.hide-mobile{ }
.show-mobile{ display:none; }
@media (max-width:680px){
  .hide-mobile{ display:none; }
  .show-mobile{ display:initial; }
  section.s{ padding:60px 12px; }
  .pcard-top{ height:200px; }
  .pcard-avatar{ width:110px; height:140px; }
  .quest .time{ font-size:11px; }
}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s ease, transform .5s steps(8);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}

/* press-start cursor */
.press{ cursor:pointer; }
.press:active{ transform:translate(2px,2px); }

/* ============================================
   BOOT SEQUENCE — CRT loading screen on first session
   ============================================ */
.boot-screen{
  position:fixed;
  inset:0;
  z-index:11000;
  background:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.04) 0 1px,
    transparent 1px 3px
  );
  transition:opacity .4s steps(8);
}
.boot-screen.done{ opacity:0; pointer-events:none; }
html.no-boot .boot-screen{ display:none; }
.boot-text{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  font-family:var(--font-display);
  color:var(--gold);
  font-size:13px;
  letter-spacing:.12em;
  min-width:240px;
}
.boot-line{
  display:block;
  opacity:0;
  animation:boot-show .15s steps(2) forwards;
}
.boot-line:nth-of-type(1){ animation-delay:.05s; }
.boot-line:nth-of-type(2){ animation-delay:.35s; }
.boot-bar{
  width:240px;
  height:14px;
  background:var(--ink-2);
  border:2px solid var(--gold);
  box-shadow:3px 3px 0 var(--coral);
  opacity:0;
  animation:boot-show .15s steps(2) .55s forwards;
}
.boot-bar-fill{
  height:100%;
  width:0;
  background:var(--gold);
  animation:boot-fill .8s steps(20) .6s forwards;
}
.boot-ready{
  color:var(--mint);
  text-shadow:2px 2px 0 var(--ink);
  animation-delay:1.42s !important;
}
@keyframes boot-show{ to{ opacity:1; } }
@keyframes boot-fill{ to{ width:100%; } }

/* ============================================
   NIGHT VEIL — palette shift on scroll (sunset → night)
   ============================================ */
.night-veil{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(8, 16, 48, 0.55) 0%, transparent 65%),
    linear-gradient(180deg, transparent 0%, rgba(14, 8, 36, 0.45) 100%);
  opacity:calc(var(--scroll-progress, 0) * 1);
  transition:opacity .12s linear;
}

/* ============================================
   SAND PARTICLES — drifting pixel canvas
   ============================================ */
.sand-canvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  width:100%;
  height:100%;
}

/* Soundtrack — Spotify embed pushed to the right of the strip */
.music-strip{
  margin-top:14px;
  padding:8px 14px;
  background:var(--ink-2);
  border:3px solid var(--cyan);
  box-shadow:0 0 0 3px var(--ink), 4px 4px 0 3px var(--magenta);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
}
.music-strip .ms-tag{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cyan);
  text-shadow:2px 2px 0 var(--magenta);
  flex-shrink:0;
  white-space:nowrap;
}
.music-strip .music-embed{
  width:340px;
  max-width:100%;
  height:80px;
  border:0;
  display:block;
  background:var(--ink);
  border-radius:8px;
  margin-left:auto;
  flex-shrink:0;
}
@media (max-width:520px){
  .music-strip{ padding:8px 10px; }
  .music-strip .music-embed{ width:100%; margin-left:0; }
}

/* ============================================
   ROUTE SVG — animated dots over the map
   ============================================ */
.route-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 0 2px rgba(255,194,51,.7));
}
.route-dot{
  /* SVG presentation only — animation defined inline via animateMotion */
}

/* ============================================
   MOTION-REDUCED OVERRIDES
   ============================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee span{ animation:none; padding-left:0; }
  .reveal{ opacity:1; transform:none; }
  .title-update::before, .title-update::after{ display:none; }
  .night-veil{ opacity:0; }
  .hero-sun, .hero-dunes{ --py: 0 !important; }
  .route-svg{ display:none; }
}