/* v2 interface: signs, billboards, hotspots, liner notes, HUD */
:root {
  --navy: #22325a; --navy-d: #16213f;
  --paper: #fff8ea; --paper-d: #efe2c6;
  --red: #e2474b; --red-d: #b3302f;
  --gold: #ffc629; --gold-d: #dca200;
  --teal: #2fc3b0;
  --display: 'Bungee', Impact, sans-serif;
  --grotesk: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

/* ---------- chapter sign (anchored to the world, reads like a poster) ---------- */
.csign { width: 720px; transform: translateX(-50%); text-align: center; color: var(--navy); pointer-events: none; }
.csign > * { pointer-events: auto; }
.csign .tag { display: inline-block; font-family: var(--display); font-size: 19px; letter-spacing: .02em; text-transform: uppercase; color: #fff;
  background: var(--red); padding: 9px 20px 6px; transform: rotate(-2.5deg); box-shadow: 5px 5px 0 var(--red-d); }
.csign h2 { font-family: var(--display); font-weight: 400; font-size: 86px; line-height: .92; margin: 22px 0 14px; letter-spacing: -.01em;
  text-shadow: 0 7px 0 rgba(255,255,255,.55); }
.csign .role { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.csign .when { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.csign p { font-family: var(--grotesk); font-size: 25px; line-height: 1.32; margin: 18px auto 22px; max-width: 600px; }
.csign .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--grotesk); font-weight: 600; font-size: 20px; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--navy); border: 0; padding: 13px 22px 12px; box-shadow: 5px 5px 0 rgba(22,33,63,.35); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(22,33,63,.35); }
.btn.red { background: var(--red); box-shadow: 5px 5px 0 var(--red-d); }
.btn.ghost { background: var(--paper); color: var(--navy); box-shadow: 5px 5px 0 rgba(22,33,63,.25); }
.btn .arr { font-family: var(--sans); }

/* intro title */
.intro { width: 900px; transform: translateX(-50%); text-align: center; color: var(--navy); }
.intro .name { font-family: var(--display); font-weight: 400; line-height: .86; margin: 24px 0 18px; }
.intro .name span { display: block; }
.intro .name .a { color: #ffb13b; text-shadow: -5px 5px 0 #d8611d, -10px 10px 0 #b34a14; }
.intro .name .b { color: #ff8fa3; text-shadow: -5px 5px 0 #b12c5a, -10px 10px 0 #7c1a3f; }
.intro .role { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.intro p { font-family: var(--grotesk); font-size: 26px; line-height: 1.3; max-width: 680px; margin: 14px auto 24px; }

/* ---------- fact billboards ---------- */
.fact { width: 300px; transform: translateX(-50%); }
.fact .face { background: #fff; border: 5px solid var(--navy); padding: 18px 20px 16px; text-align: center; box-shadow: 8px 8px 0 rgba(22,33,63,.18); }
.fact strong { display: block; font-family: var(--display); font-weight: 400; font-size: 52px; line-height: 1; color: var(--red); }
.fact span { display: block; font-family: var(--grotesk); font-size: 18px; line-height: 1.25; color: var(--navy); margin-top: 8px; }
.fact .posts { height: 150px; margin: 0 60px; background: linear-gradient(90deg, var(--navy) 0 12px, transparent 12px calc(100% - 12px), var(--navy) calc(100% - 12px)); }

/* ---------- hotspots ---------- */
.spot { transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.spot button { pointer-events: auto; }
.spot .plus { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: var(--gold); color: var(--navy); font-family: var(--display); font-size: 34px; line-height: 1;
  box-shadow: 0 6px 0 var(--gold-d), 0 0 0 0 rgba(255,198,41,.6); animation: ping 1.8s ease-out infinite; }
.spot .label { font-family: var(--grotesk); font-weight: 600; font-size: 18px; color: #fff; background: var(--navy); padding: 7px 14px 6px; white-space: nowrap; border: 0; cursor: pointer; }
.spot.open .plus { transform: rotate(45deg); animation: none; background: #fff; }
@keyframes ping { 0% { box-shadow: 0 6px 0 var(--gold-d), 0 0 0 0 rgba(255,198,41,.7); } 70%,100% { box-shadow: 0 6px 0 var(--gold-d), 0 0 0 26px rgba(255,198,41,0); } }

/* ---------- liner notes (in-world detail card) ---------- */
.liner { width: 460px; transform: translateX(-50%); pointer-events: none; }
.liner .string { width: 3px; height: 2000px; margin: -2000px auto 0; background: rgba(22,33,63,.55); }
.liner .card { position: relative; pointer-events: auto; background: var(--paper); color: var(--navy); padding: 30px 30px 34px; transform-origin: 50% 0;
  box-shadow: 10px 12px 0 rgba(22,33,63,.2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 92% 100%, 80% calc(100% - 10px), 66% 100%, 52% calc(100% - 12px), 38% 100%, 24% calc(100% - 9px), 10% 100%, 0 calc(100% - 12px)); }
.liner .card::before { content: ''; position: absolute; top: -10px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,198,41,.8); }
.liner .kicker { font-family: var(--display); font-size: 14px; letter-spacing: .04em; color: var(--red); text-transform: uppercase; }
.liner h3 { font-family: var(--grotesk); font-weight: 800; font-size: 32px; line-height: 1.05; margin: 8px 0 12px; }
.liner p { font-family: var(--sans); font-size: 18px; line-height: 1.5; margin: 0; }
.liner .stats { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 3px dashed var(--paper-d); }
.liner .stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1; color: var(--red); }
.liner .stats span { font-family: var(--grotesk); font-size: 15px; }
.liner .links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.liner .links a { font-family: var(--grotesk); font-weight: 600; font-size: 17px; color: var(--navy); }
.liner .close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--navy); font-size: 28px; cursor: pointer; }
.liner.in .card { animation: dropIn .7s cubic-bezier(.2,1.5,.4,1) both; }
.liner.out { animation: liftOut .35s ease-in forwards; }
@keyframes dropIn { from { transform: translateY(-420px) rotate(-6deg); } 60% { transform: translateY(12px) rotate(2deg); } to { transform: translateY(0) rotate(0); } }
@keyframes liftOut { to { transform: translateX(-50%) translateY(-600px); opacity: 0; } }

/* ---------- gate marquee + ticket ---------- */
.marquee-text { transform: translateX(-50%); font-family: var(--display); font-size: 26px; color: var(--gold); white-space: nowrap; text-shadow: 0 0 12px rgba(255,198,41,.8); letter-spacing: .03em; }
.ticket { transform: translateX(-50%) rotate(-4deg); background: var(--gold); color: var(--navy); padding: 16px 30px 14px 40px; font-family: var(--display); font-size: 26px; text-align: center; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 97% 50%, 100% 65%, 100% 100%, 0 100%, 0 65%, 3% 50%, 0 35%); }
.ticket small { display: block; font-family: var(--grotesk); font-weight: 600; font-size: 16px; margin-top: 4px; }

/* ---------- mixing desk (skills) ---------- */
.desk { transform: translateX(-50%); background: #2a2d36; padding: 22px 22px 18px; box-shadow: 10px 10px 0 rgba(22,33,63,.25); border-top: 10px solid #3b3f4b; }
.desk .strips { display: flex; gap: 14px; }
.desk .strip { width: 108px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.desk .slot { position: relative; width: 12px; height: 190px; background: #111318; border-radius: 6px; }
.desk .knob { position: absolute; left: 50%; bottom: 0; width: 46px; height: 26px; transform: translateX(-50%); background: var(--gold); border-radius: 4px; box-shadow: inset 0 -6px 0 var(--gold-d); transition: bottom 1.1s cubic-bezier(.2,1.4,.4,1); }
.desk.in .knob { bottom: var(--lvl); }
.desk .meter { display: flex; flex-direction: column-reverse; gap: 3px; height: 70px; }
.desk .meter i { width: 30px; height: 7px; background: #3a3f4a; }
.desk.in .meter i { animation: meter .6s steps(1) infinite; animation-delay: var(--d); }
@keyframes meter { 0%,100% { background: #3a3f4a; } 30%,60% { background: var(--teal); } }
.desk .name { order: -1; font-family: var(--grotesk); font-weight: 600; font-size: 15px; line-height: 1.15; color: #fff; text-align: center; min-height: 36px; }
.desk .slot { height: 150px; }
.desk .meter { height: 56px; }
.tools-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 820px; transform: translateX(-50%); }
.tools-row span { font-family: var(--grotesk); font-weight: 600; font-size: 19px; color: var(--navy); background: #fff; padding: 9px 16px 8px; box-shadow: 4px 4px 0 rgba(22,33,63,.2); }

/* ---------- backstage passes (certs) ---------- */
.pass { width: 250px; transform: translateX(-50%); transform-origin: 50% -200px; }
.pass .lanyard { width: 24px; height: 200px; margin: -200px auto 0; background: repeating-linear-gradient(0deg, var(--red) 0 20px, var(--red-d) 20px 24px); }
.pass .body { background: #fff; border-top: 26px solid var(--navy); padding: 18px 18px 20px; text-align: center; box-shadow: 8px 8px 0 rgba(22,33,63,.2); border-radius: 0 0 12px 12px; }
.pass.gold .body { border-top-color: var(--gold); } .pass.teal .body { border-top-color: var(--teal); }
.pass .yr { font-family: var(--display); font-size: 16px; color: var(--red); }
.pass b { display: block; font-family: var(--grotesk); font-weight: 800; font-size: 23px; line-height: 1.1; color: var(--navy); margin: 6px 0; }
.pass span { font-family: var(--sans); font-size: 15px; line-height: 1.35; color: var(--navy); }
.pass.in { animation: passSwing 2.4s ease-in-out both; }
@keyframes passSwing { 0% { transform: translateX(-50%) rotate(-12deg); } 30% { transform: translateX(-50%) rotate(7deg); } 60% { transform: translateX(-50%) rotate(-3deg); } 100% { transform: translateX(-50%) rotate(0); } }

/* ---------- HUD ---------- */
#hud2 { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 16px 22px; pointer-events: none; }
#hud2 > * { pointer-events: auto; }
.logo { font-family: var(--display); font-size: 30px; color: var(--navy); text-decoration: none; background: none; border: 0; cursor: pointer; }
.logo i { color: var(--red); font-style: normal; }
.hud-spacer { flex: 1; }
.hud-link { font-family: var(--grotesk); font-weight: 600; font-size: 19px; color: var(--navy); text-decoration: none; padding: 8px 4px; border-bottom: 3px solid transparent; }
.hud-link:hover { border-bottom-color: var(--navy); }
.chapters { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 16px; }
.chapters button { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--navy); background: var(--paper); cursor: pointer; padding: 0; }
.chapters button.on { background: var(--red); }
.chapters button::after { content: attr(data-label); position: absolute; right: 32px; top: 50%; transform: translateY(-50%); font-family: var(--grotesk); font-weight: 600; font-size: 15px;
  white-space: nowrap; color: #fff; background: var(--navy); padding: 4px 10px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.chapters button:hover::after, .chapters button.on::after { opacity: 1; }
.now-playing { position: fixed; left: 22px; bottom: 20px; z-index: 10; font-family: var(--display); font-size: 15px; color: #fff; background: var(--navy); padding: 9px 14px 7px; display: flex; gap: 10px; align-items: center; }
.now-playing .eq { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.now-playing .eq i { width: 4px; background: var(--gold); animation: eq .8s ease-in-out infinite alternate; }
.now-playing .eq i:nth-child(2) { animation-delay: -.3s; } .now-playing .eq i:nth-child(3) { animation-delay: -.55s; }
@keyframes eq { from { height: 3px; } to { height: 16px; } }

@media (max-width: 760px) {
  .hud-link.hide-sm { display: none; }
  .chapters { right: 10px; gap: 12px; }
  .chapters button::after { display: none; }
}