/* ============================================================
   pontoon.taxi — 1996 → modern transforming one-pager
   ============================================================ */

:root{
  /* 16-color VGA palette */
  --c-black:#000000; --c-maroon:#800000; --c-green:#008000; --c-olive:#808000;
  --c-navy:#000080;  --c-purple:#800080; --c-teal:#008080;  --c-silver:#c0c0c0;
  --c-gray:#808080;  --c-red:#ff0000;    --c-lime:#00ff00;  --c-yellow:#ffff00;
  --c-blue:#0000ff;  --c-fuchsia:#ff00ff;--c-aqua:#00ffff;  --c-white:#ffffff;

  /* modern palette */
  --ocean-0:#04141f; --ocean-1:#06212e; --ocean-2:#0a3344;
  --foam:#eafcff; --teal:#1ad6c4; --teal-2:#2de2c4; --cyan:#39d0ff;
  --coral:#ff7e5f; --pink:#ff5e8a; --gold:#ffd166; --gold-2:#ffb627;
  --ink:#e8f6fa; --ink-dim:#9fc2cd; --line:rgba(255,255,255,.12);
  --glass:rgba(8,32,44,.55); --glass-2:rgba(12,44,60,.7);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--c-teal); color:#000;
  font-family:"Times New Roman",Times,serif; overflow-x:hidden;
}
img{max-width:100%}
a{cursor:pointer}

/* ===== shared HUD (sound) ===== */
#hud{position:fixed; top:10px; right:12px; z-index:60}
body.phase-modern #hud{top:auto; right:auto; bottom:16px; left:16px}
.hud-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:"VT323",monospace; font-size:16px; letter-spacing:1px;
  background:#000; color:var(--c-lime); border:2px solid var(--c-lime);
  padding:4px 9px; border-radius:0; box-shadow:0 0 0 1px #000;
}
.hud-btn .hud-ico{font-size:14px}
body.phase-modern .hud-btn{
  font-family:"Space Grotesk",sans-serif; font-size:12px; letter-spacing:.5px;
  background:var(--glass); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; backdrop-filter:blur(10px); box-shadow:none;
  padding:7px 13px; text-transform:uppercase; font-weight:600;
}

/* ============================================================
   PHASE 1 — RETRO 1996
   ============================================================ */
.retro-stage{
  position:relative; min-height:100vh; padding-bottom:24px;
  background:
    repeating-linear-gradient(0deg, #007575 0 2px, #008080 2px 4px);
  transform-origin:center center;
}
/* CRT scanlines */
.crt-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:40; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}

/* marquee */
.marquee{overflow:hidden; white-space:nowrap; border-block:3px ridge var(--c-yellow); background:var(--c-navy)}
.retro-marquee{position:sticky; top:0; z-index:30}
.marquee-track{
  display:inline-block; padding:4px 0; color:var(--c-yellow);
  font-family:"VT323",monospace; font-size:20px; letter-spacing:1px;
  animation:marq 26s linear infinite;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.retro-frame{
  max-width:840px; margin:14px auto; background:var(--c-silver);
  border:4px ridge var(--c-white); padding:8px;
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
}

/* masthead */
.retro-head{
  background:var(--c-black); border:3px inset var(--c-gray);
  padding:10px 8px 14px; text-align:center; position:relative;
}
.construction{
  font-family:"VT323",monospace; color:var(--c-yellow); font-size:18px;
  display:flex; gap:10px; justify-content:center; align-items:center; margin-bottom:6px;
}
.construction .cone{font-size:18px}
.retro-logo{margin:6px 0 4px; font-family:"Press Start 2P",monospace; font-size:30px; line-height:1.25}
.rainbow{
  background:linear-gradient(90deg,#ff0000,#ff8000,#ffff00,#00ff00,#00ffff,#ff00ff,#ff0000);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #000; animation:rain 4s linear infinite;
  filter:drop-shadow(2px 2px 0 #000);
}
@keyframes rain{to{background-position:200% 0}}
.retro-sub{color:var(--c-aqua); font-family:"VT323",monospace; font-size:20px; margin:4px 0 0}
.newbadge{position:absolute; top:6px; right:8px; transform:rotate(12deg)}
.newbadge .blink{
  display:inline-block; background:var(--c-red); color:#fff; font-family:"Press Start 2P";
  font-size:10px; padding:6px; border:2px solid #fff; border-radius:50%;
}

/* pixel boat hero */
.retro-hero{
  position:relative; height:170px; margin-top:8px; overflow:hidden;
  background:linear-gradient(#7ad0ff 0 56%, #006a9c 56% 60%, #004f78 60% 100%);
  border:3px inset var(--c-gray);
}
.pixel-water{
  position:absolute; inset:auto 0 0 0; height:46%;
  background:
    repeating-linear-gradient(90deg,#00b0e6 0 8px,#0090c6 8px 16px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 4px,transparent 4px 12px);
  background-blend-mode:overlay; animation:waterShift 1.2s steps(4) infinite;
}
@keyframes waterShift{to{background-position:16px 0, 0 0}}
.pixel-boat{
  position:absolute; left:50%; bottom:34px; width:200px; height:120px;
  transform:translateX(-50%); image-rendering:pixelated;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0) rotate(-1.5deg)}50%{transform:translate(-50%,-8px) rotate(1.5deg)}}
.boat-sun{position:absolute; top:-14px; right:-46px; width:34px; height:34px; background:var(--c-yellow); border:3px solid #ffae00; border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,0,.35)}
.boat-hull{position:absolute; bottom:18px; left:10px; width:180px; height:22px; background:var(--c-silver); border:3px solid #000; border-radius:0 0 40px 40px}
.boat-deck{position:absolute; bottom:40px; left:24px; width:152px; height:14px; background:#deb887; border:3px solid #000}
.boat-canopy{position:absolute; bottom:78px; left:40px; width:120px; height:26px; background:var(--c-red); border:3px solid #000}
.boat-pole{position:absolute; bottom:54px; width:6px; height:26px; background:#000}
.pole1{left:46px}.pole2{right:46px}
.boat-pax{position:absolute; bottom:54px; width:16px; height:18px; border:3px solid #000; border-radius:8px 8px 0 0}
.p1{left:60px; background:var(--c-fuchsia)} .p2{left:92px; background:var(--c-lime)} .p3{left:124px; background:var(--c-aqua)}
.boat-wake{position:absolute; bottom:6px; left:0; width:200px; height:10px;
  background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 22px); opacity:.7;
  animation:waterShift 0.6s steps(2) infinite;}

/* columns */
.retro-cols{display:flex; gap:8px; margin-top:8px}
.retro-side{width:180px; flex:none}
.retro-main{flex:1; min-width:0}

.side-box, .content-box{
  background:var(--c-white); border:3px outset var(--c-silver); padding:8px; margin-bottom:8px;
}
.side-title{
  background:var(--c-navy); color:var(--c-yellow); font-family:"VT323",monospace; font-size:18px;
  text-align:center; margin:-8px -8px 8px; padding:3px;
}
.side-links{list-style:none; margin:0; padding:0; font-family:"VT323",monospace; font-size:19px}
.side-links li{padding:3px 0; border-bottom:1px dashed var(--c-silver)}
.bullet{color:var(--c-red)}
.r-link{color:var(--c-blue); text-decoration:underline}
.r-link:visited{color:var(--c-purple)}
.r-link:hover{color:var(--c-red); background:var(--c-yellow)}
.mini{font-size:11px; color:var(--c-red)}
.fire{filter:saturate(1.4)}

.counter-box{text-align:center}
.odometer{display:inline-flex; gap:2px; background:#000; padding:4px; border:2px inset #444}
.odometer span{
  font-family:"VT323",monospace; font-size:24px; color:var(--c-lime);
  background:#001a00; padding:1px 5px; border:1px solid #0a0;
}
.counter-cap{font-family:"VT323",monospace; font-size:16px; color:#000; margin-top:4px}

.guestbook{font-family:"VT323",monospace; font-size:20px; text-align:center; color:var(--c-maroon); margin:4px 0}
.award{display:flex; align-items:center; gap:6px; justify-content:center; margin-top:8px}
.award-star{color:var(--c-yellow); font-size:34px; -webkit-text-stroke:1px #b58900}
.award-txt{font-family:"VT323",monospace; font-size:14px; line-height:1.1; color:var(--c-maroon)}

/* main content */
.r-h2{font-family:"Press Start 2P"; font-size:14px; color:var(--c-maroon); margin:2px 0 10px; line-height:1.5}
.r-h3{font-family:"Press Start 2P"; font-size:12px; color:var(--c-purple); text-align:center; margin:6px 0; line-height:1.6}
.r-p{font-size:16px; line-height:1.5; margin:8px 0; color:#000}
.r-p.small{font-size:15px}
.hl{background:var(--c-yellow); padding:0 2px}
.price{color:var(--c-red); font-size:1.1em}
.hr-fancy{text-align:center; color:var(--c-teal); font-family:"VT323",monospace; font-size:18px; letter-spacing:2px; margin:6px 0}

.raffle-retro{background:#fffbe6; border:3px dashed var(--c-red); padding:8px; margin:6px 0}

/* enter button = THE trigger */
.enter-zone{text-align:center; margin:14px 0 6px}
.enter-hype{font-family:"Press Start 2P"; font-size:11px; color:var(--c-green)}
.enter-btn{
  display:inline-block; cursor:pointer; margin:8px 0; padding:14px 22px;
  background:linear-gradient(var(--c-lime),#0a0);
  border:5px outset #0f0; color:#000; line-height:1.5;
}
.enter-btn:active{border-style:inset}
.enter-btn-top{display:block; font-family:"Press Start 2P"; font-size:16px}
.enter-btn-sub{display:block; font-family:"VT323",monospace; font-size:16px; margin-top:6px}
.enter-btn:hover{background:linear-gradient(var(--c-yellow),#e0a000); animation:wob .25s linear infinite}
@keyframes wob{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
.enter-fine{font-family:"VT323",monospace; font-size:15px; color:var(--c-gray)}

/* 88x31 badges */
.badges{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px}
.badge88{
  width:88px; height:31px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:"VT323",monospace; font-size:13px; line-height:1; border:2px solid #000; color:#fff;
}
.b-ns{background:linear-gradient(#5a5a8a,#1a1a4a)} .b-ie{background:linear-gradient(#0a7,#053)}
.b-html{background:linear-gradient(#a00,#500)} .b-y2k{background:linear-gradient(#a0a,#404)}

/* footer */
.retro-foot{margin-top:10px; text-align:center; background:var(--c-black); border:3px inset var(--c-gray); padding:8px}
.webring{font-family:"VT323",monospace; font-size:18px; color:var(--c-aqua)}
.copyr{font-family:"VT323",monospace; font-size:15px; color:var(--c-silver); margin:5px 0 0}
.copyr.tiny{font-size:13px; color:var(--c-gray)}

/* blink */
.blink{animation:blink 1s steps(1) infinite}
.blink2{animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   TRANSFORMATION FX (The Mask)
   ============================================================ */
.fx-layer{position:fixed; inset:0; z-index:50; pointer-events:none; display:none}
.fx-layer.run{display:block}

.fx-spiral{
  position:absolute; inset:-40%; opacity:0;
  background:conic-gradient(from 0deg,
    #ff00ff,#00ffff,#ffff00,#00ff00,#ff0000,#0000ff,#ff00ff);
  filter:blur(2px);
}
.fx-layer.run .fx-spiral{animation:spiralIn 1.5s cubic-bezier(.6,0,.4,1) forwards}
@keyframes spiralIn{
  0%{opacity:0; transform:rotate(0) scale(.2)}
  35%{opacity:.85}
  70%{opacity:.9; transform:rotate(900deg) scale(1.4)}
  100%{opacity:0; transform:rotate(1440deg) scale(2.4)}
}

.fx-flash{position:absolute; inset:0; background:#fff; opacity:0}
.fx-layer.run .fx-flash{animation:flash 1.5s ease-in forwards}
@keyframes flash{0%,55%{opacity:0}66%{opacity:1}100%{opacity:0}}

.fx-rings{position:absolute; inset:0; display:grid; place-items:center}
.fx-rings span{position:absolute; width:40px; height:40px; border:6px solid #fff; border-radius:50%; opacity:0}
.fx-layer.run .fx-rings span{animation:ringOut 1.1s ease-out forwards}
.fx-layer.run .fx-rings span:nth-child(2){animation-delay:.12s}
.fx-layer.run .fx-rings span:nth-child(3){animation-delay:.24s}
@keyframes ringOut{0%{opacity:0; transform:scale(.2)}30%{opacity:.9}100%{opacity:0; transform:scale(22)}}

.fx-sparks{position:absolute; inset:0}
.spark{position:absolute; left:50%; top:50%; font-size:22px; will-change:transform,opacity}
.fx-layer.run .spark{animation:sparkFly .9s ease-out forwards}
@keyframes sparkFly{0%{opacity:0; transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(1.3) rotate(var(--tr))}}

.fx-tada{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0;
  font-family:"Press Start 2P"; font-size:min(9vw,64px); color:#fff;
  text-shadow:0 0 14px #1ad6c4,0 0 26px #ff5e8a; -webkit-text-stroke:2px #04141f;
}
.fx-layer.run .fx-tada{animation:tada 1.5s ease-out forwards}
@keyframes tada{0%,58%{opacity:0; transform:scale(.4) rotate(-8deg)}74%{opacity:1; transform:scale(1.08) rotate(2deg)}88%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(1.1)}}

/* the retro stage spinning out, mask-style */
.retro-stage.transforming{animation:maskOut 1.5s cubic-bezier(.55,0,.4,1) forwards}
@keyframes maskOut{
  0%{transform:rotate(0) scale(1); filter:none}
  30%{transform:rotate(180deg) scale(1.15); filter:hue-rotate(120deg) saturate(2)}
  60%{transform:rotate(900deg) scale(.55); filter:hue-rotate(320deg) saturate(3) blur(2px)}
  85%{transform:rotate(1300deg) scale(.05); filter:blur(8px) brightness(2)}
  100%{transform:rotate(1440deg) scale(0); opacity:0; filter:blur(14px)}
}

/* modern stage exploding in */
.modern-stage.reveal{animation:maskIn 1s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes maskIn{0%{opacity:0; transform:scale(1.3); filter:blur(20px) brightness(2)}100%{opacity:1; transform:scale(1); filter:none}}

body.shake{animation:shake .5s linear}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-6px)}60%{transform:translate(-6px,5px)}80%{transform:translate(5px,-4px)}}

/* ============================================================
   PHASE 2 — MODERN
   ============================================================ */
body.phase-modern{
  background:var(--ocean-0); color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
}
body.phase-modern .crt-overlay{display:none}
.modern-stage{position:relative; min-height:100vh; overflow:hidden}

/* ocean backdrop */
.ocean{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, #0c4a5e 0%, var(--ocean-1) 45%, var(--ocean-0) 100%);}
.waves{position:absolute; bottom:0; left:0; width:100%; height:62vh; opacity:.5}
.wave{transform-origin:center}
.w1{fill:#0e4d63; animation:waveMove 14s ease-in-out infinite}
.w2{fill:#0a3a4d; opacity:.8; animation:waveMove 19s ease-in-out infinite reverse}
.w3{fill:#072a39; opacity:.9; animation:waveMove 24s ease-in-out infinite}
@keyframes waveMove{0%,100%{transform:translateX(0)}50%{transform:translateX(-4%)}}

.modern-stage > *:not(.ocean){position:relative; z-index:1}

/* nav */
.m-nav{
  display:flex; align-items:center; gap:18px; max-width:1180px; margin:0 auto;
  padding:18px 24px;
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink)}
.brand-mark{color:var(--teal); display:grid; place-items:center;
  width:38px; height:38px; background:rgba(26,214,196,.12); border:1px solid rgba(26,214,196,.35); border-radius:11px}
.brand-text{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:22px; letter-spacing:-.5px}
.brand-text .dot{color:var(--teal)}
.brand-text.small{font-size:18px}
.m-links{display:flex; gap:22px; margin-left:auto}
.m-links a{color:var(--ink-dim); text-decoration:none; font-weight:500; font-size:15px; transition:color .2s}
.m-links a:hover{color:var(--ink)}
.nav-cta{margin-left:8px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px;
  padding:13px 20px; border-radius:13px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .15s ease, box-shadow .25s ease, background .2s; white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--cyan)); color:#022;
  box-shadow:0 10px 30px rgba(26,214,196,.35)}
.btn-primary:hover{box-shadow:0 14px 40px rgba(26,214,196,.5); transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#3a2600;
  box-shadow:0 10px 30px rgba(255,182,39,.3)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,182,39,.45)}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-soft{background:rgba(26,214,196,.12); color:var(--teal-2); border:1px solid rgba(26,214,196,.3)}
.btn-soft:hover{background:rgba(26,214,196,.2)}
.btn-block{width:100%}

/* hero */
.hero{max-width:1180px; margin:0 auto; padding:40px 24px 60px}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--teal-2); text-transform:uppercase; letter-spacing:1px;
  background:rgba(26,214,196,.1); border:1px solid rgba(26,214,196,.25); padding:6px 12px; border-radius:999px}
.eyebrow.gold-eye{color:var(--gold); background:rgba(255,209,102,.1); border-color:rgba(255,209,102,.3)}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(26,214,196,.7); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,214,196,.6)}70%{box-shadow:0 0 0 9px rgba(26,214,196,0)}100%{box-shadow:0 0 0 0 rgba(26,214,196,0)}}
.hero-title{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(40px,6vw,72px);
  line-height:1.02; letter-spacing:-2px; margin:18px 0 16px}
.grad{background:linear-gradient(120deg,var(--teal),var(--cyan),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-lead{font-size:18px; line-height:1.6; color:var(--ink-dim); max-width:520px; margin:0 0 26px}
.hero-lead strong{color:var(--ink)} .hero-lead .per{font-size:.7em; color:var(--ink-dim)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap}
.hero-stats div{display:flex; flex-direction:column}
.hero-stats b{font-family:"Space Grotesk"; font-size:26px; color:var(--ink)}
.hero-stats span{font-size:13px; color:var(--ink-dim)}

/* booking card */
.book-card{background:var(--glass); border:1px solid var(--line); border-radius:22px;
  backdrop-filter:blur(18px); box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden}
.bc-tabs{display:flex; padding:8px; gap:6px; border-bottom:1px solid var(--line)}
.bc-tab{flex:1; padding:11px; border-radius:13px; border:none; cursor:pointer; background:transparent;
  color:var(--ink-dim); font-family:"Space Grotesk"; font-weight:600; font-size:15px; transition:.2s}
.bc-tab.is-active{background:rgba(26,214,196,.15); color:var(--teal-2)}
.bc-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:14px}
.fld{display:flex; flex-direction:column; gap:6px}
.fld-lbl{font-size:12px; font-weight:600; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.6px}
.fld input, .fld select{width:100%; padding:13px 14px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:var(--ink); font-size:15px; font-family:"Inter",sans-serif; outline:none; transition:.2s}
.fld input::placeholder{color:#6f93a0}
.fld input:focus, .fld select:focus{border-color:var(--teal); background:rgba(26,214,196,.07); box-shadow:0 0 0 3px rgba(26,214,196,.15)}
.fld select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fc2cd' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:9px 13px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--ink-dim); cursor:pointer; font-size:14px; font-weight:500; font-family:"Inter"; transition:.2s}
.chip.is-active{background:rgba(26,214,196,.16); color:var(--teal-2); border-color:rgba(26,214,196,.4)}
.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.05)}
.step{width:46px; padding:12px 0; border:none; background:transparent; color:var(--teal-2); font-size:20px; cursor:pointer; font-family:"Space Grotesk"}
.step:hover{background:rgba(26,214,196,.12)}
.stepper input{border:none; text-align:center; background:transparent; box-shadow:none; padding:12px 0}
.fare{background:rgba(26,214,196,.08); border:1px dashed rgba(26,214,196,.35); border-radius:13px; padding:12px 14px}
.fare-line{display:flex; justify-content:space-between; align-items:baseline}
.fare-line span:first-child{color:var(--ink-dim); font-size:14px}
.fare-amt{font-family:"Space Grotesk"; font-weight:700; font-size:26px; color:var(--teal-2)}
.fare-note{font-size:12px; color:var(--ink-dim); margin-top:3px}
.bc-fine{font-size:12px; color:var(--ink-dim); text-align:center; margin:0}

/* section heads */
section{padding:64px 24px}
.section-head{max-width:760px; margin:0 auto 40px; text-align:center}
.section-head h2{font-family:"Space Grotesk"; font-size:clamp(28px,4vw,42px); letter-spacing:-1px; margin:0 0 12px}
.section-head p{color:var(--ink-dim); font-size:17px; margin:0; line-height:1.6}

/* how */
.how{max-width:1100px; margin:0 auto}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step-card{background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:26px; backdrop-filter:blur(10px)}
.step-num{width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(135deg,var(--teal),var(--cyan)); color:#022; font-family:"Space Grotesk"; font-weight:700; font-size:20px; margin-bottom:14px}
.step-card h3{font-family:"Space Grotesk"; font-size:20px; margin:0 0 8px}
.step-card p{color:var(--ink-dim); line-height:1.6; margin:0; font-size:15px}

/* rides */
.rides{max-width:1180px; margin:0 auto}
.ride-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ride-card{background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:24px;
  display:flex; flex-direction:column; backdrop-filter:blur(10px); transition:transform .2s, border-color .2s}
.ride-card:hover{transform:translateY(-4px); border-color:rgba(26,214,196,.4)}
.rc-feature{border-color:rgba(255,209,102,.35); background:linear-gradient(180deg,rgba(255,209,102,.06),var(--glass))}
.rc-charter{border-color:rgba(255,126,95,.3)}
.rc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.rc-emoji{font-size:32px}
.rc-tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--teal-2);
  background:rgba(26,214,196,.14); padding:4px 9px; border-radius:999px}
.rc-tag.gold{color:var(--gold); background:rgba(255,209,102,.14)}
.ride-card h3{font-family:"Space Grotesk"; font-size:21px; margin:0 0 8px}
.rc-desc{color:var(--ink-dim); line-height:1.55; font-size:14px; flex:1; margin:0 0 16px}
.rc-price{display:flex; align-items:baseline; gap:5px; margin-bottom:16px}
.rc-price b{font-family:"Space Grotesk"; font-size:30px; color:var(--ink)}
.rc-price span{color:var(--ink-dim); font-size:14px}

/* heal */
.heal{max-width:1100px; margin:0 auto}
.heal-inner{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.heal-copy h2{font-family:"Space Grotesk"; font-size:clamp(28px,4vw,42px); letter-spacing:-1px; margin:14px 0 16px; line-height:1.1}
.heal-copy p{color:var(--ink-dim); font-size:17px; line-height:1.7; margin:0 0 22px}
.heal-list{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px}
.heal-list li{display:flex; align-items:center; gap:12px; font-size:16px; color:var(--ink)}
.heal-list span{font-size:22px}
.heal-art{position:relative; aspect-ratio:1; display:grid; place-items:center; max-width:380px; margin:0 auto; width:100%}
.ha-sun{position:absolute; width:46%; height:46%; border-radius:50%;
  background:radial-gradient(circle,var(--gold),var(--coral)); filter:blur(2px); box-shadow:0 0 80px rgba(255,126,95,.6)}
.ha-ring{position:absolute; border:2px solid rgba(26,214,196,.4); border-radius:50%}
.r1{width:60%; height:60%; animation:ripple 4s ease-out infinite}
.r2{width:80%; height:80%; animation:ripple 4s ease-out infinite .8s}
.r3{width:100%; height:100%; animation:ripple 4s ease-out infinite 1.6s}
@keyframes ripple{0%{transform:scale(.6); opacity:0}40%{opacity:.7}100%{transform:scale(1.05); opacity:0}}
.ha-boat{position:relative; font-size:64px; animation:bob2 3s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}

/* raffle */
.raffle{max-width:1100px; margin:0 auto}
.raffle-card{display:grid; grid-template-columns:1.1fr .9fr; gap:0; border-radius:24px; overflow:hidden;
  border:1px solid rgba(255,209,102,.3); box-shadow:0 30px 80px rgba(0,0,0,.45)}
.raffle-copy{padding:42px; background:linear-gradient(160deg,rgba(255,209,102,.1),rgba(255,126,95,.06),var(--glass-2))}
.raffle-copy h2{font-family:"Space Grotesk"; font-size:clamp(26px,3.5vw,38px); letter-spacing:-1px; margin:14px 0 14px; line-height:1.1}
.raffle-copy p{color:var(--ink-dim); line-height:1.7; font-size:16px; margin:0 0 22px}
.raffle-copy strong{color:var(--gold)}
.raffle-prizes{display:flex; gap:14px; margin-bottom:22px; flex-wrap:wrap}
.rp{flex:1; min-width:130px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center}
.rp span{font-size:30px; display:block; margin-bottom:6px}
.rp b{display:block; font-family:"Space Grotesk"; font-size:15px}
.rp small{color:var(--ink-dim); font-size:12px}
.countdown{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:12px; padding:12px 16px; width:fit-content}
.cd-lbl{font-size:13px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.6px}
.cd-time{font-family:"Space Grotesk"; font-weight:700; font-size:22px; color:var(--gold); font-variant-numeric:tabular-nums}
.raffle-form{padding:42px; background:var(--glass-2); display:flex; flex-direction:column; gap:14px}
.raffle-form h3{font-family:"Space Grotesk"; font-size:24px; margin:0 0 6px}
.form-hint{font-size:13px; color:var(--ink-dim); margin:0}
.form-hint em{color:var(--teal-2); font-style:normal; font-weight:600}
.form-hint.err{color:var(--coral)}
.fld.invalid input{border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,126,95,.15)}

/* footer */
.m-foot{position:relative; z-index:1; margin-top:40px; border-top:1px solid var(--line);
  background:rgba(2,12,18,.7); backdrop-filter:blur(10px)}
.foot-cta{text-align:center; padding:56px 24px 40px}
.foot-cta h2{font-family:"Space Grotesk"; font-size:clamp(28px,4vw,44px); letter-spacing:-1px; margin:0 0 22px}
.foot-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:1100px; margin:0 auto; padding:20px 24px; border-top:1px solid var(--line)}
.foot-links{display:flex; gap:18px}
.foot-links a{color:var(--ink-dim); text-decoration:none; font-size:14px}
.foot-links a:hover{color:var(--ink)}
.time-machine{background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink-dim);
  border-radius:999px; padding:8px 14px; font-size:13px; cursor:pointer; font-family:"Inter"; transition:.2s}
.time-machine:hover{color:var(--gold); border-color:rgba(255,209,102,.4)}
.foot-fine{max-width:1100px; margin:0 auto; padding:0 24px 30px; color:#5f818c; font-size:12px; line-height:1.6; text-align:center}

/* ============================================================
   MODAL / TICKET
   ============================================================ */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(2,10,16,.8); backdrop-filter:blur(8px); animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{position:relative; width:min(460px,100%); background:var(--glass-2); border:1px solid var(--line);
  border-radius:22px; padding:34px 30px; box-shadow:0 40px 100px rgba(0,0,0,.6); animation:popIn .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{opacity:0; transform:scale(.85) translateY(20px)}to{opacity:1; transform:scale(1) translateY(0)}}
.modal-x{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--ink-dim); font-size:26px; cursor:pointer; line-height:1}
.modal-x:hover{color:var(--ink)}
.modal-body{text-align:center}
.modal-emoji{font-size:54px; margin-bottom:8px}
.modal-body h3{font-family:"Space Grotesk"; font-size:26px; margin:6px 0 10px}
.modal-body p{color:var(--ink-dim); line-height:1.6; margin:0 0 18px}

/* raffle ticket */
.ticket{position:relative; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#3a2600;
  border-radius:16px; padding:20px; margin:6px 0 18px; text-align:left; box-shadow:0 14px 40px rgba(255,182,39,.3)}
.ticket::before,.ticket::after{content:""; position:absolute; top:50%; width:24px; height:24px; background:var(--glass-2); border-radius:50%; transform:translateY(-50%)}
.ticket::before{left:-12px} .ticket::after{right:-12px}
.ticket-top{display:flex; justify-content:space-between; align-items:center; border-bottom:2px dashed rgba(58,38,0,.4); padding-bottom:10px; margin-bottom:10px}
.ticket-top b{font-family:"Space Grotesk"; font-size:16px; letter-spacing:1px}
.ticket-num{font-family:"VT323",monospace; font-size:34px; letter-spacing:3px; line-height:1}
.ticket-row{display:flex; justify-content:space-between; font-size:13px; margin-top:4px}
.ticket-row span:first-child{opacity:.7}

/* confirmation chips for ride */
.confirm-line{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px}
.confirm-line:last-child{border:none}
.confirm-line span:first-child{color:var(--ink-dim)}
.confirm-line b{font-family:"Space Grotesk"}
.modal-actions{display:flex; gap:10px; margin-top:10px}
.modal-actions .btn{flex:1}

/* ============================================================
   RETRO ARCADE — dodge da buoys
   ============================================================ */
.arcade{background:#000; border:3px ridge var(--c-lime); padding:8px; margin:6px 0; text-align:center}
.arcade .r-h3{color:var(--c-lime)}
.arcade .r-p{color:var(--c-aqua)}
.arcade-screen{position:relative; width:320px; max-width:100%; margin:6px auto; border:3px inset #0a0; background:#001018; line-height:0}
#game{display:block; width:100%; height:auto; image-rendering:pixelated; background:#001a26}
.arcade-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; background:rgba(0,0,0,.78); line-height:1.3}
.arcade-overlay.hide{display:none}
.ao-title{font-family:"Press Start 2P"; font-size:14px; color:var(--c-yellow); text-shadow:2px 2px 0 #a00}
.ao-msg{font-family:"VT323",monospace; font-size:18px; color:var(--c-aqua); padding:0 10px}
.coin-btn{cursor:pointer; font-family:"Press Start 2P"; font-size:12px; color:#000; padding:9px 12px;
  background:linear-gradient(var(--c-yellow),#e0a000); border:4px outset var(--c-yellow)}
.coin-btn:active{border-style:inset}
.coin-btn:hover{animation:wob .25s linear infinite}
.arcade-hud{display:flex; justify-content:space-between; font-family:"VT323",monospace; font-size:18px; color:var(--c-lime); padding:0 4px}
.arcade-hud b{color:var(--c-yellow)}
.arcade-help{font-family:"VT323",monospace; font-size:15px; color:var(--c-silver); margin:4px 0 0}

/* ============================================================
   MODERN MAP — draggable ICW pins
   ============================================================ */
.map-wrap{position:relative; width:100%; height:170px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(160deg,#0a3344,#06212e); touch-action:none; user-select:none}
.icw-map{position:absolute; inset:0; width:100%; height:100%}
.map-channel{animation:chanPulse 4s ease-in-out infinite}
@keyframes chanPulse{0%,100%{opacity:.7}50%{opacity:1}}
.route-line{filter:drop-shadow(0 0 4px rgba(26,214,196,.6)); animation:dash 18s linear infinite}
@keyframes dash{to{stroke-dashoffset:-200}}
.dock-dot{fill:rgba(255,255,255,.55)} .dock-dot.near{fill:var(--gold)}
.dock-label{fill:#bfe6ef; font:600 9px "Inter",sans-serif; pointer-events:none}
.pin{position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; cursor:grab;
  border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.5); padding:0; z-index:3; transition:transform .1s}
.pin:active{cursor:grabbing; transform:scale(1.25)}
.pin.dragging{transform:scale(1.3); z-index:5}
.pin-pickup{background:var(--teal)} .pin-dropoff{background:var(--coral)}
.pin-tip{position:absolute; bottom:130%; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:600 10px "Inter",sans-serif; color:#022; background:#fff; padding:2px 7px; border-radius:6px; pointer-events:none}
.pin-pickup .pin-tip{background:var(--teal)} .pin-dropoff .pin-tip{background:var(--coral); color:#3a0f08}
.pin-tip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:inherit}
.map-hint{position:absolute; bottom:6px; right:8px; font:500 11px "Inter",sans-serif; color:var(--ink-dim);
  background:rgba(0,0,0,.4); padding:3px 7px; border-radius:6px; pointer-events:none}

.fare-code{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(26,214,196,.3);
  display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--gold)}
.fare-code b{font-family:"Space Grotesk"; letter-spacing:1px}
.fare-code .strike{color:var(--ink-dim); text-decoration:line-through; margin-right:6px}

/* ============================================================
   DOLPHINS
   ============================================================ */
.dolphin-layer{position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden}
.dolphin{position:absolute; bottom:-40px; font-size:42px; pointer-events:auto; cursor:pointer;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); will-change:transform}
.dolphin:hover{filter:drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.splash{position:fixed; z-index:5; font-size:26px; pointer-events:none; transform:translate(-50%,-50%)}

/* ============================================================
   TOASTS
   ============================================================ */
.toasts{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:95;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; width:min(92vw,440px)}
.toast{pointer-events:auto; background:var(--glass-2); border:1px solid var(--line); color:var(--ink);
  border-radius:14px; padding:13px 18px; font-size:14px; font-family:"Inter",sans-serif; line-height:1.4;
  box-shadow:0 16px 40px rgba(0,0,0,.5); backdrop-filter:blur(12px); display:flex; align-items:center; gap:10px;
  animation:toastIn .4s cubic-bezier(.2,.9,.3,1.2)}
.toast.out{animation:toastOut .4s ease forwards}
.toast .t-emoji{font-size:24px}
.toast b{color:var(--gold); font-family:"Space Grotesk"}
.toast.win{border-color:rgba(255,209,102,.5); background:linear-gradient(160deg,rgba(255,209,102,.15),var(--glass-2))}
@keyframes toastIn{from{opacity:0; transform:translateY(18px) scale(.95)}to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0; transform:translateY(18px) scale(.95)}}
/* retro-styled toast when in 1996 */
body.phase-retro .toast{font-family:"VT323",monospace; font-size:18px; background:#000; color:var(--c-lime);
  border:3px ridge var(--c-lime); border-radius:0; backdrop-filter:none}
body.phase-retro .toast b{color:var(--c-yellow); font-family:"VT323",monospace}

/* ============================================================
   ICW DISPATCH — water-taxi driving game (modern)
   ============================================================ */
.play{padding:48px 22px}
.game2-wrap{position:relative; width:min(960px,100%); margin:0 auto; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:#06212e; box-shadow:0 24px 60px rgba(0,0,0,.45)}
#game2{display:block; width:100%; height:auto; background:linear-gradient(#0c4256,#072734); cursor:grab}
#game2:active{cursor:grabbing}
.game2-wrap.playing #game2{touch-action:none}
.g2-hud{position:absolute; top:10px; left:10px; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none}
.g2-stat{background:rgba(4,20,31,.72); border:1px solid var(--line); border-radius:10px; padding:5px 10px;
  backdrop-filter:blur(6px); text-align:center; line-height:1.1}
.g2-stat span{display:block; font-size:9px; letter-spacing:1px; color:var(--ink-dim)}
.g2-stat b{font-family:"Space Grotesk"; font-size:16px; color:var(--ink)}
#g2Cash{color:var(--gold) !important}
.g2-sms{position:absolute; top:10px; right:10px; width:min(244px,52%); display:flex; flex-direction:column;
  gap:8px; pointer-events:none}
.sms-card{background:rgba(20,44,60,.94); border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:12px 12px 12px 4px; padding:8px 11px; font-size:12.5px; line-height:1.35; color:var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.4); animation:smsIn .35s cubic-bezier(.2,.9,.3,1.2)}
.sms-card .sms-from{font-size:10px; color:var(--ink-dim); margin-bottom:2px}
.sms-card .sms-fare{color:var(--gold); font-weight:700}
.sms-card.aboard{border-left-color:var(--gold)}
.sms-card.paid{border-left-color:#46d17f; color:#bff5d4}
.sms-card.miss{border-left-color:var(--coral); color:#ffc7ba}
.sms-card.out{animation:smsOut .35s ease forwards}
@keyframes smsIn{from{opacity:0; transform:translateX(22px)}to{opacity:1; transform:none}}
@keyframes smsOut{to{opacity:0; transform:translateX(22px); height:0; margin:0; padding-top:0; padding-bottom:0}}
.g2-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(4,16,24,.84); backdrop-filter:blur(3px); text-align:center; padding:20px}
.g2-overlay.hide{display:none}
.g2-card{max-width:460px}
.g2-card h3{font-family:"Space Grotesk"; font-size:clamp(24px,4vw,32px); margin:0 0 10px}
.g2-card p{color:var(--ink-dim); font-size:14px; line-height:1.6; margin:0 0 18px}
.g2-pin{font-weight:700} .g2-pin.pickup{color:#46d17f} .g2-pin.drop{color:var(--gold)}
.g2-help{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--ink-dim);
  background:rgba(4,20,31,.6); padding:3px 10px; border-radius:8px; pointer-events:none; white-space:nowrap}

/* ============================================================
   1996 BANNER AD (advertises the makers)
   ============================================================ */
.ad-banner{display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  margin:0 0 14px; padding:7px 10px; border:3px outset var(--c-yellow); cursor:pointer; overflow:hidden;
  background:repeating-linear-gradient(45deg,#000 0 14px,#001a00 14px 28px);
  font-family:"VT323",monospace; text-align:center}
.ad-banner:hover{border-style:inset; animation:adwob .18s linear infinite}
@keyframes adwob{50%{transform:translateX(1px)}}
.ad-spark{color:var(--c-yellow); font-size:24px; line-height:1; animation:adspin 2.2s linear infinite}
@keyframes adspin{to{transform:rotate(360deg)}}
.ad-text{display:flex; flex-direction:column; line-height:1.15}
.ad-l1{color:var(--c-red); font-size:18px; font-weight:bold; text-shadow:1px 1px 0 var(--c-yellow)}
.ad-l2{color:var(--c-aqua); font-size:18px}
.ad-l2 b{color:var(--c-yellow)}
.ad-l3{color:var(--c-fuchsia); font-size:16px}
.ad-l3 u{color:var(--c-white)}

/* ============================================================
   AGENCY / MADE BY (modern phase advert)
   ============================================================ */
.agency{padding:44px 22px 6px; display:flex; justify-content:center}
.agency-card{position:relative; width:min(900px,100%); text-align:center; padding:40px 28px;
  border-radius:24px; border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(160deg,rgba(26,214,196,.12),var(--glass-2));
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.agency-card::before{content:""; position:absolute; inset:-2px; border-radius:26px; padding:1px; pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(57,208,255,.5),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}
.agency-card h2{font-family:"Space Grotesk"; font-size:clamp(26px,4vw,40px); margin:6px 0 10px}
.agency-lead{max-width:640px; margin:0 auto 24px; color:var(--ink-dim); font-size:16px; line-height:1.65}
.agency-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px}
.agency-contact{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; font-size:14px}
.agency-contact a{color:var(--ink); text-decoration:none; opacity:.85}
.agency-contact a:hover{color:var(--cyan); opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; gap:32px}
  .heal-inner{grid-template-columns:1fr; gap:32px}
  .raffle-card{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .ride-grid{grid-template-columns:1fr 1fr}
  .m-links{display:none}
}
@media (max-width:620px){
  .retro-frame{margin:8px; padding:6px}
  .retro-cols{flex-direction:column}
  .retro-side{width:100%; display:flex; gap:8px; flex-wrap:wrap}
  .retro-side .side-box{flex:1; min-width:140px}
  .retro-logo{font-size:18px}
  .ride-grid{grid-template-columns:1fr}
  .hero{padding-top:20px}
  .raffle-copy,.raffle-form{padding:26px}
  section{padding:48px 18px}
  .nav-cta{display:none}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto}
  .retro-stage.transforming{opacity:0}
  .modern-stage.reveal{opacity:1}
}