/* =========================================================
   SPIN369 · กรุงเทพไฟกลางคืน · Bangkok Night Neon
   wet asphalt + sodium streetlamp + neon Thai signs
   ========================================================= */

:root{
  --night:#0F0524;
  --night-2:#1A0838;
  --night-3:#2C1052;
  --asphalt:#2C2C34;
  --asphalt-2:#1A1A24;
  --pink:#FF10F0;
  --pink-2:#C700C0;
  --cyan:#00E5FF;
  --cyan-2:#00B8CC;
  --sodium:#FFC857;
  --sodium-2:#FF9D00;
  --green-walk:#3CFF8E;
  --red-stop:#FF3C5F;
  --paper:#F0E6FF;
  --ink:#E8D8FF;
  --mute:#7B6FA8;
  --line:rgba(255,16,240,.22);
  --line2:rgba(0,229,255,.22);
  --neon-pink:0 0 6px var(--pink),0 0 18px rgba(255,16,240,.6),0 0 36px rgba(255,16,240,.35);
  --neon-cyan:0 0 6px var(--cyan),0 0 18px rgba(0,229,255,.6),0 0 36px rgba(0,229,255,.35);
  --neon-sodium:0 0 4px var(--sodium),0 0 14px rgba(255,200,87,.6),0 0 30px rgba(255,157,0,.35);
  --rad:6px;
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--night);color:var(--ink);
  font-family:'Bai Jamjuree','Krub',system-ui,-apple-system,sans-serif;
  font-weight:400;line-height:1.55;overflow-x:hidden;min-height:100%;
  scroll-behavior:smooth}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ===== Atmospheric layers ===== */
body::before{
  content:'';position:fixed;inset:0;z-index:-5;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 78% 8%,rgba(255,16,240,.28),transparent 60%),
    radial-gradient(ellipse 70% 50% at 12% 18%,rgba(0,229,255,.22),transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 105%,rgba(255,200,87,.22),transparent 55%),
    linear-gradient(180deg,#08021c 0%,var(--night) 28%,#16093b 60%,#1B0B45 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,16,240,.022) 3px 4px);
  mix-blend-mode:screen;
}

/* Wet asphalt mirror band at bottom (city reflection layer) */
.asphalt-mirror{
  position:fixed;left:0;right:0;bottom:0;height:38vh;z-index:-3;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,rgba(15,5,36,.4) 14%,rgba(15,5,36,.92) 60%,#000 100%),
    repeating-linear-gradient(90deg,rgba(255,16,240,.06) 0 2px,transparent 2px 14px),
    radial-gradient(ellipse 45% 20% at 50% 0%,rgba(255,200,87,.18),transparent 70%);
  filter:blur(.6px);
}
.asphalt-mirror::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6px);
  mix-blend-mode:screen;animation:rippleBg 9s linear infinite;
}
@keyframes rippleBg{0%{background-position:0 0}100%{background-position:0 240px}}

/* Rain canvas layer */
.rain{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.55;mix-blend-mode:screen}

/* Floating neon signs (Thai script glowing in distance) */
.neon-flock{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.neon-sign{position:absolute;font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:700;
  letter-spacing:.05em;opacity:.6;filter:blur(.4px);user-select:none;animation:flicker 5.4s infinite;}
.neon-sign.s-pink{color:var(--pink);text-shadow:var(--neon-pink)}
.neon-sign.s-cyan{color:var(--cyan);text-shadow:var(--neon-cyan)}
.neon-sign.s-sodium{color:var(--sodium);text-shadow:var(--neon-sodium)}
.neon-sign.s1{top:6%;left:4%;font-size:38px;transform:rotate(-3deg);animation-delay:-1.2s}
.neon-sign.s2{top:12%;right:6%;font-size:28px;transform:rotate(2deg);animation-delay:-3.8s}
.neon-sign.s3{top:22%;left:16%;font-size:22px;transform:rotate(-1deg);animation-delay:-2.1s}
.neon-sign.s4{top:38%;right:11%;font-size:34px;transform:rotate(4deg);animation-delay:-0.6s}
.neon-sign.s5{top:55%;left:7%;font-size:20px;transform:rotate(-2deg);animation-delay:-4.4s;opacity:.4}
.neon-sign.s6{top:72%;right:18%;font-size:24px;transform:rotate(1deg);animation-delay:-2.9s;opacity:.45}
.neon-sign.s7{top:84%;left:24%;font-size:18px;transform:rotate(-1deg);animation-delay:-1.7s;opacity:.4}
.neon-sign.k1{top:28%;right:24%;font-size:14px;font-family:'Audiowide','Bai Jamjuree',sans-serif;animation-delay:-3.2s;opacity:.45}
.neon-sign.k2{top:62%;left:38%;font-size:14px;font-family:'Audiowide','Bai Jamjuree',sans-serif;animation-delay:-2.5s;opacity:.4}
@keyframes flicker{
  0%,18%,21%,22%,55%,57%,90%,100%{opacity:1;filter:blur(.4px)}
  19%,20%,56%{opacity:.25;filter:blur(2px)}
  88%{opacity:.7}
}

/* Katakana subtle column right side (cyberpunk homage) */
.kata{position:fixed;top:0;right:-2%;bottom:0;width:34%;max-width:480px;z-index:-1;
  opacity:.18;pointer-events:none;mix-blend-mode:screen;
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)}

/* Puddle ripples spawned on click */
.puddle{position:fixed;border:2px solid var(--cyan);border-radius:50%;
  pointer-events:none;z-index:90;animation:puddle 1.1s ease-out forwards;
  box-shadow:0 0 12px var(--cyan),inset 0 0 12px var(--cyan)}
.puddle.alt{border-color:var(--pink);box-shadow:0 0 12px var(--pink),inset 0 0 12px var(--pink)}
@keyframes puddle{
  0%{width:6px;height:6px;opacity:.95;transform:translate(-50%,-50%) scale(.4)}
  100%{width:140px;height:140px;opacity:0;transform:translate(-50%,-50%) scale(1.1)}
}

/* ===== Header ===== */
header.topbar{position:sticky;top:0;z-index:80;backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  background:linear-gradient(180deg,rgba(15,5,36,.92),rgba(15,5,36,.66));
  border-bottom:1px solid var(--line2)}
.head-wrap{max-width:1340px;margin:0 auto;padding:14px 22px;display:grid;
  grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer}
.brand .neon-mark{
  position:relative;width:48px;height:48px;display:grid;place-items:center;
  border:2px solid var(--pink);background:radial-gradient(circle at 50% 50%,rgba(255,16,240,.18),transparent 70%);
  box-shadow:var(--neon-pink),inset 0 0 12px rgba(255,16,240,.3);
  transform:rotate(-6deg);
}
.brand .neon-mark::after{content:'';position:absolute;inset:-5px;border:1px dashed var(--cyan);opacity:.5;animation:spin 22s linear infinite}
.brand .neon-mark span{font-family:'Audiowide',sans-serif;font-size:22px;color:#fff;
  text-shadow:var(--neon-cyan);transform:rotate(6deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt h1{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:20px;letter-spacing:.12em;
  margin:0;color:#fff;text-shadow:var(--neon-pink)}
.brand-txt h1 b{color:var(--cyan);text-shadow:var(--neon-cyan)}
.brand-txt small{font-family:'Krub','Bai Jamjuree',sans-serif;color:var(--sodium);font-size:11px;
  letter-spacing:.18em;margin-top:4px;text-shadow:var(--neon-sodium)}

/* nav */
nav.primary{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-start}
nav.primary a{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:12px;letter-spacing:.1em;
  color:#cfd6f0;padding:10px 12px;border:1px solid transparent;position:relative;
  transition:.2s;text-transform:uppercase}
nav.primary a:hover{color:var(--cyan);border-color:rgba(0,229,255,.45);
  background:rgba(0,229,255,.05);text-shadow:var(--neon-cyan)}
nav.primary a.act{color:var(--pink);border-color:var(--pink);background:rgba(255,16,240,.06);
  text-shadow:var(--neon-pink)}
nav.primary a::before{content:'';position:absolute;top:-1px;left:6px;width:6px;height:6px;
  background:var(--sodium);border-radius:50%;box-shadow:var(--neon-sodium);
  opacity:0;transition:.2s}
nav.primary a:hover::before,nav.primary a.act::before{opacity:1}

/* Bangkok 24hr clock chip (in header) */
.bkk-clock{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border:1px solid var(--sodium);background:rgba(255,200,87,.06);
  font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:12px;color:var(--sodium);
  text-shadow:var(--neon-sodium);letter-spacing:.15em;white-space:nowrap;cursor:default}
.bkk-clock .ph{color:var(--cyan);text-shadow:var(--neon-cyan);font-size:10px;letter-spacing:.18em}
.bkk-clock .dot{width:7px;height:7px;border-radius:50%;background:var(--green-walk);
  box-shadow:0 0 6px var(--green-walk);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}

.head-cta{display:flex;gap:8px;align-items:center}
.btn{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-weight:400;font-size:12px;
  letter-spacing:.14em;border:0;padding:11px 20px;cursor:pointer;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-radius:var(--rad);
  transition:transform .2s,filter .2s,box-shadow .2s}
.btn-pink{background:linear-gradient(90deg,var(--pink),var(--pink-2));color:#fff;
  box-shadow:var(--neon-pink)}
.btn-cyan{background:linear-gradient(90deg,var(--cyan),var(--cyan-2));color:#001a1f;
  box-shadow:var(--neon-cyan)}
.btn-sodium{background:linear-gradient(90deg,var(--sodium),var(--sodium-2));color:#3a1f00;
  box-shadow:var(--neon-sodium)}
.btn-out{background:transparent;color:var(--cyan);border:1px solid var(--cyan)}
.btn-out:hover{background:rgba(0,229,255,.12);box-shadow:var(--neon-cyan)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.12) saturate(1.15)}
.btn:active{transform:translateY(0)}

.burger{display:none;background:none;border:1px solid var(--cyan);color:var(--cyan);
  padding:8px 12px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:14px;border-radius:var(--rad)}

@media(max-width:1080px){
  .head-wrap{grid-template-columns:auto auto auto;gap:12px}
  nav.primary{display:none;order:5;width:100%;background:rgba(15,5,36,.95);padding:12px;border-radius:var(--rad);border:1px solid var(--line2)}
  nav.primary.open{display:flex;flex-direction:column;gap:4px}
  nav.primary a{display:block;width:100%}
  .burger{display:inline-flex}
  .head-cta{order:4}
}
@media(max-width:520px){
  .head-cta .btn-out{display:none}
}

/* ===== Promo ribbon (running marquee) ===== */
.ribbon{background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(255,16,240,.12),rgba(0,0,0,.6));
  border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.ribbon::before{content:'';position:absolute;left:0;top:0;width:80px;height:100%;
  background:linear-gradient(90deg,var(--night),transparent);z-index:2;pointer-events:none}
.ribbon::after{content:'';position:absolute;right:0;top:0;width:80px;height:100%;
  background:linear-gradient(-90deg,var(--night),transparent);z-index:2;pointer-events:none}
.ribbon-track{display:flex;gap:42px;white-space:nowrap;animation:run 42s linear infinite;
  font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;color:var(--cyan);padding:9px 0}
.ribbon-track b{color:var(--pink);text-shadow:var(--neon-pink)}
.ribbon-track i{color:var(--sodium);font-style:normal;text-shadow:var(--neon-sodium)}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Sections ===== */
section.page{display:none;padding:32px 0 64px;animation:in .35s ease}
section.page.act{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap{max-width:1340px;margin:0 auto;padding:0 22px}

/* Heading style */
h2.head{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;font-size:clamp(22px,3.2vw,34px);
  margin:0 0 6px;color:#fff;line-height:1.15;position:relative;padding-left:18px}
h2.head::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;
  background:linear-gradient(180deg,var(--pink),var(--cyan));box-shadow:0 0 8px var(--pink)}
h2.head em{font-style:normal;color:var(--cyan);text-shadow:var(--neon-cyan)}
h2.head u{text-decoration:none;color:var(--pink);text-shadow:var(--neon-pink)}
h2.head .thai{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:600;font-size:.65em;
  letter-spacing:.04em;color:var(--sodium);text-shadow:var(--neon-sodium);text-transform:none;
  margin-left:14px;display:inline-block}
.subhead{font-family:'Krub','Bai Jamjuree',sans-serif;color:var(--mute);font-size:14px;
  margin:0 0 22px;padding-left:18px;line-height:1.6;max-width:780px}
.subhead::before{content:'// ';color:var(--cyan);font-family:'Audiowide',sans-serif;
  font-size:11px;letter-spacing:.2em}

/* divider */
hr.glow{border:0;height:1px;margin:48px 0;
  background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent);opacity:.55}

/* ===== HERO — Bangkok skyline + tuk-tuk ===== */
.hero{position:relative;padding:42px 0 56px;border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;position:relative;z-index:2}
.hero-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border:1px solid var(--cyan);background:rgba(0,229,255,.06);
  font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;letter-spacing:.22em;
  color:var(--cyan);text-shadow:var(--neon-cyan);text-transform:uppercase;border-radius:var(--rad)}
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--green-walk);
  box-shadow:0 0 8px var(--green-walk);animation:blink 1.4s infinite}
.hero h2.title{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:clamp(38px,6vw,76px);
  line-height:1;letter-spacing:.02em;margin:14px 0 16px;color:#fff}
.hero h2.title .glow-p{background:linear-gradient(90deg,var(--pink),#ff80ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,16,240,.5))}
.hero h2.title .glow-c{background:linear-gradient(90deg,var(--cyan),#88faff,var(--sodium));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(0,229,255,.5))}
.hero p.lead{font-family:'Krub','Bai Jamjuree',sans-serif;color:#d8c8ff;max-width:560px;
  line-height:1.75;font-size:15px;margin:0 0 22px}
.hero p.lead b{color:var(--sodium);text-shadow:var(--neon-sodium)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* Skyline scene (right pane) */
.scene{position:relative;aspect-ratio:5/4;border:1px solid var(--line2);background:#06021a;
  overflow:hidden;border-radius:var(--rad)}
.scene::before{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,#0c0432 0%,#170a48 35%,#251064 70%,#3a1485 100%),
    radial-gradient(ellipse 80% 30% at 50% 95%,rgba(255,200,87,.4),transparent 70%);
  z-index:0}
.scene .moon{position:absolute;top:14%;right:14%;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff,#ffe6f9 30%,#ff7af0 70%,transparent 80%);
  filter:blur(.5px);opacity:.85;z-index:1}
.scene .skyline{position:absolute;left:0;right:0;bottom:32%;height:48%;z-index:2;
  background:
    linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 100%);
}
.scene .skyline svg{width:100%;height:100%;display:block}
.scene .road{position:absolute;left:0;right:0;bottom:0;height:32%;z-index:3;
  background:linear-gradient(180deg,var(--asphalt-2) 0%,#000 100%)}
.scene .road::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--sodium);box-shadow:var(--neon-sodium);opacity:.6}
.scene .road::after{content:'';position:absolute;left:0;right:0;top:60%;height:3px;
  background:repeating-linear-gradient(90deg,var(--sodium) 0 30px,transparent 30px 60px);opacity:.4}
.scene .lamp{position:absolute;width:3px;background:#444;z-index:3}
.scene .lamp::after{content:'';position:absolute;top:-7px;left:50%;width:14px;height:14px;
  border-radius:50%;background:radial-gradient(circle,var(--sodium) 30%,transparent 70%);
  transform:translateX(-50%);box-shadow:var(--neon-sodium)}
.scene .lamp.l1{left:8%;top:55%;height:25%}
.scene .lamp.l2{left:48%;top:58%;height:23%}
.scene .lamp.l3{left:88%;top:55%;height:25%}
.scene .tuktuk{position:absolute;bottom:8%;left:-12%;width:84px;z-index:5;
  filter:drop-shadow(0 4px 0 rgba(255,16,240,.4));animation:tukDrive 14s linear infinite}
.scene .tuktuk svg{width:100%;height:auto;display:block}
@keyframes tukDrive{
  0%{transform:translateX(0)}
  90%{transform:translateX(620%)}
  100%{transform:translateX(620%);opacity:0}
}
.scene .billboard{position:absolute;top:8%;left:6%;padding:6px 11px;border:1px solid var(--pink);
  background:rgba(255,16,240,.1);font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;
  letter-spacing:.2em;color:#fff;text-shadow:var(--neon-pink);z-index:4;
  animation:flicker 4.5s infinite;animation-delay:-1.7s;border-radius:var(--rad)}
.scene .billboard.b2{top:24%;right:8%;left:auto;border-color:var(--cyan);background:rgba(0,229,255,.1);
  color:var(--cyan);text-shadow:var(--neon-cyan);animation-delay:-3.3s}
.scene .ripple{position:absolute;left:50%;bottom:6%;width:60px;height:14px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(255,200,87,.6),transparent 70%);
  transform:translateX(-50%);z-index:3;animation:rip 4s ease-in-out infinite}
@keyframes rip{
  0%,100%{transform:translateX(-50%) scale(.95);opacity:.4}
  50%{transform:translateX(-50%) scale(1.1);opacity:.7}
}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}.scene{aspect-ratio:16/10}}

/* ===== Stats counter strip ===== */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px}
.stat{padding:14px 16px;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(0,229,255,.05),transparent);
  position:relative;border-radius:var(--rad)}
.stat::before{content:'';position:absolute;left:0;top:0;width:5px;height:100%;
  background:linear-gradient(180deg,var(--pink),var(--sodium));box-shadow:0 0 8px var(--pink)}
.stat .lbl{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;letter-spacing:.2em;
  color:var(--mute);text-transform:uppercase}
.stat .val{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-weight:400;font-size:24px;
  color:#fff;margin-top:4px;text-shadow:0 0 6px rgba(255,255,255,.2)}
.stat .val small{font-size:12px;color:var(--sodium);margin-left:4px;letter-spacing:.05em}
@media(max-width:980px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ===== Soi Map (signature feature) ===== */
.soi-map{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,#0a031e,#150832);
  border-radius:var(--rad);padding:20px;margin-top:8px;overflow:hidden}
.soi-map::before{content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,16,240,.04) 0 28px,transparent 28px 56px),
    repeating-linear-gradient(0deg,rgba(0,229,255,.04) 0 28px,transparent 28px 56px);
  pointer-events:none}
.soi-map-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:13px;letter-spacing:.2em;
  color:var(--cyan);text-shadow:var(--neon-cyan);text-transform:uppercase;flex-wrap:wrap;gap:10px}
.soi-map-title .legend{display:flex;gap:14px;font-size:11px;color:var(--mute);letter-spacing:.1em}
.soi-map-title .legend i{font-style:normal}
.soi-map-title .legend .dotp{display:inline-block;width:8px;height:8px;background:var(--pink);border-radius:50%;
  box-shadow:0 0 6px var(--pink);margin-right:5px;vertical-align:middle}
.soi-map-title .legend .dotc{display:inline-block;width:8px;height:8px;background:var(--cyan);border-radius:50%;
  box-shadow:0 0 6px var(--cyan);margin-right:5px;vertical-align:middle}
.soi-map-title .legend .dots{display:inline-block;width:8px;height:8px;background:var(--sodium);border-radius:50%;
  box-shadow:0 0 6px var(--sodium);margin-right:5px;vertical-align:middle}

.soi-svg{width:100%;height:auto;display:block;position:relative;z-index:2;aspect-ratio:16/9;max-height:520px}
.soi-svg .road-line{stroke:#3d3a55;stroke-width:18;fill:none;opacity:.85;stroke-linecap:round}
.soi-svg .road-edge{stroke:rgba(255,200,87,.25);stroke-width:1;fill:none;stroke-dasharray:4 6;animation:dash 8s linear infinite}
@keyframes dash{to{stroke-dashoffset:-200}}
.soi-svg .soi-node{cursor:pointer;transition:filter .25s,transform .25s;transform-origin:center;transform-box:fill-box}
.soi-svg .soi-node:hover{filter:drop-shadow(0 0 8px var(--pink)) drop-shadow(0 0 18px var(--pink));transform:scale(1.06)}
.soi-svg .soi-node circle{stroke-width:2;fill:#0a031e}
.soi-svg .soi-node.p circle{stroke:var(--pink)}
.soi-svg .soi-node.c circle{stroke:var(--cyan)}
.soi-svg .soi-node.s circle{stroke:var(--sodium)}
.soi-svg .soi-node text{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;font-weight:600;text-anchor:middle;fill:#fff}
.soi-svg .soi-node .iconchar{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:14px;text-anchor:middle;dominant-baseline:central;fill:var(--cyan)}
.soi-svg .soi-node.p .iconchar{fill:var(--pink)}
.soi-svg .soi-node.s .iconchar{fill:var(--sodium)}
.soi-svg .crossroad{fill:#1a0c40;stroke:var(--cyan);stroke-width:1.5;opacity:.8}
.soi-svg .lamp{fill:var(--sodium);filter:drop-shadow(0 0 4px var(--sodium))}
.soi-svg .nlabel{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:9px;letter-spacing:.2em;fill:var(--mute);text-transform:uppercase}
.soi-svg .lbl-thai{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:11px;fill:#fff;font-weight:600}

.soi-tooltip{position:absolute;pointer-events:none;background:rgba(15,5,36,.95);border:1px solid var(--cyan);
  padding:10px 14px;font-family:'Krub','Bai Jamjuree',sans-serif;font-size:12px;color:#fff;
  z-index:5;border-radius:var(--rad);box-shadow:var(--neon-cyan);min-width:220px;display:none;
  transform:translate(-50%,-110%)}
.soi-tooltip.show{display:block;animation:tipIn .2s ease}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,-100%)}to{opacity:1;transform:translate(-50%,-110%)}}
.soi-tooltip h5{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:13px;color:var(--pink);
  text-shadow:var(--neon-pink);margin:0 0 4px;letter-spacing:.1em;text-transform:uppercase}
.soi-tooltip p{font-size:11px;color:var(--mute);margin:0;line-height:1.5}
.soi-tooltip .meta{display:flex;gap:8px;margin-top:6px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;letter-spacing:.1em}
.soi-tooltip .meta b{color:var(--sodium)}

@media(max-width:760px){
  .soi-svg{aspect-ratio:4/3}
  .soi-svg .lbl-thai{font-size:9px}
}

/* ===== Categories grid ===== */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:8px}
.cat{position:relative;padding:24px 18px;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(0,229,255,.05),rgba(15,5,36,.6));
  cursor:pointer;color:#fff;overflow:hidden;transition:.25s;border-radius:var(--rad);text-align:left;display:block}
.cat:hover{border-color:var(--pink);box-shadow:inset 0 0 30px rgba(255,16,240,.18),0 0 18px rgba(255,16,240,.18);transform:translateY(-2px)}
.cat .ic{font-size:32px;line-height:1;filter:drop-shadow(0 0 6px var(--cyan))}
.cat:hover .ic{filter:drop-shadow(0 0 10px var(--pink))}
.cat h3{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:14px;margin:10px 0 4px;
  letter-spacing:.08em;text-transform:uppercase}
.cat .thai{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:600;color:var(--sodium);
  font-size:13px;display:block;margin-top:2px}
.cat p{font-size:11px;color:var(--mute);margin:6px 0 0;font-family:'Krub','Bai Jamjuree',sans-serif}
.cat::after{content:'→';position:absolute;right:14px;top:14px;font-family:'Audiowide','Bai Jamjuree',sans-serif;
  color:var(--cyan);font-size:14px;opacity:.5;transition:.25s}
.cat:hover::after{opacity:1;transform:translateX(3px);color:var(--pink)}
@media(max-width:1080px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ===== Game grid (slot/fishing cards) ===== */
.games{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.game{position:relative;border:1px solid var(--line2);background:#06021a;overflow:hidden;
  cursor:pointer;transition:.25s;border-radius:var(--rad)}
.game:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 0 14px rgba(0,229,255,.3)}
.game .thumb{aspect-ratio:3/4;position:relative;overflow:hidden;display:block;width:100%;height:auto;background:#1a0838}
.game img.thumb{object-fit:cover}
.game::before{content:'';position:absolute;inset:0;border:1px solid transparent;pointer-events:none;
  background:linear-gradient(135deg,transparent 70%,rgba(255,16,240,.35));mix-blend-mode:screen;opacity:0;transition:.25s;z-index:2}
.game:hover::before{opacity:1}
.game .meta{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line2);background:rgba(15,5,36,.85)}
.game .meta b{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:600;font-size:12px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64%}
.game .meta span{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;color:var(--sodium);letter-spacing:.08em}
.game .provider-tag{position:absolute;top:6px;left:6px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:9px;
  background:rgba(255,16,240,.85);color:#fff;padding:3px 7px;letter-spacing:.12em;z-index:3;border-radius:3px}
.game .hot{position:absolute;top:6px;right:6px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:9px;
  background:rgba(255,200,87,.85);color:#3a1f00;padding:3px 7px;letter-spacing:.1em;z-index:3;border-radius:3px}
.game .new{position:absolute;top:6px;right:6px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:9px;
  background:rgba(0,229,255,.85);color:#001a1f;padding:3px 7px;letter-spacing:.1em;z-index:3;border-radius:3px}
.game .rtp{position:absolute;bottom:48px;right:6px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:9px;
  background:rgba(15,5,36,.85);color:var(--cyan);padding:3px 7px;letter-spacing:.05em;z-index:3;border-radius:3px;border:1px solid var(--cyan)}
@media(max-width:1080px){.games{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.games{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.games{grid-template-columns:repeat(2,1fr)}}

/* ===== Live Casino tables ===== */
.tables{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.table{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,16,240,.05),rgba(15,5,36,.7));
  overflow:hidden;cursor:pointer;border-radius:var(--rad);transition:.25s}
.table:hover{transform:translateY(-2px);box-shadow:0 0 18px rgba(255,16,240,.3)}
.table .top{position:relative;aspect-ratio:16/10;overflow:hidden}
.table img{width:100%;height:100%;object-fit:cover}
.table .live-badge{position:absolute;top:8px;left:8px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;
  background:var(--red-stop);color:#fff;padding:3px 9px;letter-spacing:.12em;z-index:3;
  display:flex;align-items:center;gap:5px;border-radius:3px}
.table .live-badge::before{content:'';width:6px;height:6px;background:#fff;border-radius:50%;animation:blink 1.2s infinite}
.table .seats{position:absolute;bottom:8px;right:8px;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;
  background:rgba(0,0,0,.78);color:var(--green-walk);padding:3px 9px;letter-spacing:.1em;z-index:3;border-radius:3px}
.table .body{padding:12px 14px}
.table h4{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:14px;color:#fff;margin:0 0 4px;letter-spacing:.04em}
.table .desc{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:11px;color:var(--mute);margin:0}
.table .stake{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line2);
  font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px}
.table .stake .min{color:var(--cyan)}
.table .stake .max{color:var(--sodium)}
@media(max-width:840px){.tables{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tables{grid-template-columns:1fr}}

/* ===== Sports table ===== */
.match-tab{width:100%;border-collapse:collapse;font-family:'Krub','Bai Jamjuree',sans-serif;
  font-size:13px;border:1px solid var(--line2);border-radius:var(--rad);overflow:hidden}
.match-tab th,.match-tab td{padding:11px 14px;border-bottom:1px solid var(--line2);text-align:left}
.match-tab th{font-family:'Audiowide','Bai Jamjuree',sans-serif;color:var(--cyan);font-size:11px;
  letter-spacing:.18em;background:rgba(0,229,255,.06);text-transform:uppercase;text-shadow:var(--neon-cyan)}
.match-tab tr:hover{background:rgba(255,16,240,.04)}
.match-tab tr:last-child td{border-bottom:none}
.match-tab .live-dot{display:inline-block;width:8px;height:8px;background:var(--red-stop);border-radius:50%;
  animation:blink 1s infinite;margin-right:7px;box-shadow:0 0 5px var(--red-stop)}
.odd{display:inline-block;min-width:58px;text-align:center;border:1px solid var(--cyan);color:var(--cyan);
  padding:5px 10px;cursor:pointer;background:rgba(0,229,255,.05);font-family:'Audiowide','Bai Jamjuree',sans-serif;
  font-size:12px;border-radius:3px;transition:.2s}
.odd:hover{background:var(--cyan);color:#001a1f;box-shadow:var(--neon-cyan)}
.match-tab .league{color:var(--sodium);font-size:11px;font-weight:600}
.match-tab .vs{color:#fff}

/* ===== Lottery (graffiti style) ===== */
.lott-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lott{position:relative;padding:18px;border:1px solid var(--line);overflow:hidden;border-radius:var(--rad);
  background:linear-gradient(135deg,rgba(255,16,240,.08),rgba(0,229,255,.05));cursor:pointer;transition:.25s}
.lott:hover{transform:translateY(-3px);border-color:var(--pink);box-shadow:0 0 18px rgba(255,16,240,.3)}
.lott::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,16,240,.15),transparent 40%),
    radial-gradient(circle at 80% 100%,rgba(0,229,255,.15),transparent 40%);
  pointer-events:none}
.lott .graffiti{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;letter-spacing:.2em;
  color:var(--cyan);text-shadow:var(--neon-cyan);text-transform:uppercase;position:relative;z-index:2}
.lott h4{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:700;font-size:18px;color:#fff;
  margin:6px 0 2px;position:relative;z-index:2;text-shadow:0 0 6px rgba(255,255,255,.2)}
.lott .next{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;color:var(--sodium);
  text-shadow:var(--neon-sodium);letter-spacing:.1em;position:relative;z-index:2}
.lott .countdown{display:flex;gap:5px;margin-top:12px;position:relative;z-index:2}
.lott .countdown span{flex:1;background:rgba(15,5,36,.8);border:1px solid var(--pink);padding:8px 0;
  text-align:center;font-family:'Audiowide','Bai Jamjuree',sans-serif;color:var(--pink);
  text-shadow:var(--neon-pink);font-size:18px;border-radius:3px}
.lott .countdown span small{display:block;font-size:8px;color:var(--mute);text-shadow:none;letter-spacing:.18em;margin-top:2px}
.lott .pay{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line2);
  font-family:'Krub','Bai Jamjuree',sans-serif;font-size:11px;color:var(--mute);position:relative;z-index:2}
.lott .pay b{color:var(--cyan);font-weight:600}
@media(max-width:980px){.lott-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.lott-grid{grid-template-columns:1fr}}

/* ===== Withdrawal feed (live) ===== */
.feed{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;border:1px solid var(--line2);
  overflow:hidden;border-radius:var(--rad);background:rgba(15,5,36,.5)}
.feed-row{display:grid;grid-template-columns:1.4fr 1fr 100px 110px 90px;padding:9px 14px;
  border-bottom:1px solid rgba(255,16,240,.08);align-items:center;gap:8px}
.feed-row.head{background:rgba(255,16,240,.08);color:var(--pink);font-family:'Audiowide','Bai Jamjuree',sans-serif;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;text-shadow:var(--neon-pink)}
.feed-row.head div{color:var(--pink)}
.feed-row .who{color:#fff;display:flex;align-items:center;gap:8px}
.feed-row .ava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--cyan));
  display:grid;place-items:center;font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;color:#fff;flex:0 0 auto}
.feed-row .where{color:var(--sodium);font-size:11px}
.feed-row .method{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;color:var(--cyan);letter-spacing:.06em}
.feed-row .amt{color:var(--green-walk);font-family:'Audiowide','Bai Jamjuree',sans-serif;font-weight:400;text-shadow:0 0 6px rgba(60,255,142,.4);text-align:right}
.feed-row .stat{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;color:var(--green-walk);
  border:1px solid var(--green-walk);padding:2px 7px;text-align:center;letter-spacing:.12em;border-radius:3px}
.feed-row.flash{animation:flashRow 1.2s ease}
@keyframes flashRow{0%{background:rgba(255,16,240,.18)}100%{background:transparent}}
@media(max-width:760px){
  .feed-row{grid-template-columns:1fr 80px 1fr;font-size:12px}
  .feed-row .where,.feed-row .stat{display:none}
}

/* ===== Provider wall ===== */
.providers{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.prov{aspect-ratio:1.6/1;border:1px solid var(--line2);background:rgba(0,229,255,.04);
  display:grid;place-items:center;padding:10px;cursor:pointer;transition:.2s;border-radius:var(--rad);overflow:hidden}
.prov:hover{border-color:var(--pink);background:rgba(255,16,240,.08);transform:translateY(-2px)}
.prov img{max-width:80%;max-height:60%;object-fit:contain;filter:brightness(1.05)}
.prov .nm{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;letter-spacing:.05em;color:#cfd6f0;text-align:center}
@media(max-width:1080px){.providers{grid-template-columns:repeat(6,1fr)}}
@media(max-width:680px){.providers{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.providers{grid-template-columns:repeat(3,1fr)}}

/* ===== Bank marquee · สถานี ตรอกซอยฝากถอน (top of footer)
   "Neon storefront soi" — 15 banks duplicated ×2 for seamless infinite loop
   Tuk-tuk SVG slides L→R every 8s above the marquee
   ===== */
.bank-marquee{position:relative;margin-top:60px;padding:24px 0 0;
  background:linear-gradient(180deg,transparent 0,rgba(15,5,36,.7) 38%,rgba(0,0,0,.92) 100%);
  border-top:1px solid var(--line2);overflow-x:hidden}
/* wet asphalt mirror band underneath the marquee */
.bank-marquee::after{content:'';position:absolute;left:0;right:0;bottom:0;height:54px;
  background:
    repeating-linear-gradient(90deg,rgba(255,16,240,.07) 0 2px,transparent 2px 12px),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(0,229,255,.14),transparent 70%);
  mix-blend-mode:screen;pointer-events:none;opacity:.7;filter:blur(.4px)}

.bm-head{text-align:center;padding-bottom:12px}
.bm-title{display:flex;justify-content:center;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 4px}
.bm-thai{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:700;font-size:20px;
  color:var(--pink);text-shadow:var(--neon-pink);letter-spacing:.04em}
.bm-en{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;
  color:var(--sodium);text-shadow:var(--neon-sodium);letter-spacing:.22em;text-transform:uppercase}
.bm-sub{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:12px;color:var(--mute);margin:0}

/* Tuk-tuk track above the marquee */
.bm-tuk-track{position:relative;height:50px;margin:6px 0 0;overflow:hidden}
.bm-tuk-track::before{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:repeating-linear-gradient(90deg,var(--sodium) 0 16px,transparent 16px 38px);opacity:.4}
.bm-tuk{position:absolute;bottom:8px;left:0;width:54px;height:32px;
  filter:drop-shadow(0 0 6px var(--pink)) drop-shadow(0 0 12px rgba(0,229,255,.4));
  animation:bmTukRide 8s linear infinite;will-change:transform}
@keyframes bmTukRide{
  0%{transform:translateX(-80px)}
  100%{transform:translateX(calc(100vw + 20px))}
}

/* Marquee strip */
.bm-marquee{position:relative;overflow:hidden;padding:14px 0;
  background:linear-gradient(180deg,#06021a,#08031f 50%,#06021a);
  border-top:1px solid var(--pink);border-bottom:1px solid var(--cyan);
  box-shadow:inset 0 0 28px rgba(255,16,240,.18),inset 0 0 48px rgba(0,229,255,.08)}
.bm-marquee::before,.bm-marquee::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none}
.bm-marquee::before{left:0;background:linear-gradient(90deg,#06021a 0%,transparent 100%)}
.bm-marquee::after{right:0;background:linear-gradient(-90deg,#06021a 0%,transparent 100%)}

.bm-row{display:flex;gap:12px;width:max-content;padding:0 6px;
  animation:bmScroll 35s linear infinite;will-change:transform}
@keyframes bmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bm-marquee:hover .bm-row{animation-play-state:paused}

/* Storefront sign — neon-glow filter (pink + cyan drop-shadow) */
.bm-store{flex:0 0 138px;height:90px;position:relative;
  background:linear-gradient(180deg,#0a0220 0%,#1a0838 70%,#080318 100%);
  border:2px solid var(--pink);border-radius:6px;
  display:grid;grid-template-rows:1fr auto;
  padding:8px 10px 6px;text-decoration:none;cursor:pointer;
  filter:drop-shadow(0 0 6px var(--pink)) drop-shadow(0 0 12px var(--cyan));
  transition:transform .25s,filter .25s;
  animation:neonPinkFlicker 3.6s infinite;animation-delay:var(--d,0s)}
.bm-store::after{content:'';position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,16,240,.16) 0%,transparent 30%,transparent 70%,rgba(0,229,255,.16) 100%);
  mix-blend-mode:screen}
.bm-store:hover{transform:translateY(-3px) scale(1.04);
  filter:drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 0 22px var(--pink));
  animation-play-state:paused}
.bm-store img{width:100%;height:42px;object-fit:contain;
  filter:brightness(1.12) drop-shadow(0 0 5px rgba(0,229,255,.5));
  margin:auto;display:block;position:relative;z-index:1}
.bm-store .bm-name{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;
  letter-spacing:.16em;color:var(--sodium);text-shadow:var(--neon-sodium);
  text-align:center;text-transform:uppercase;
  border-top:1px dashed rgba(255,200,87,.32);padding-top:5px;margin-top:5px;
  position:relative;z-index:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* alternating border tones — pink ↔ cyan ↔ sodium */
.bm-store:nth-child(3n+2){border-color:var(--cyan)}
.bm-store:nth-child(3n+2):hover{filter:drop-shadow(0 0 10px var(--pink)) drop-shadow(0 0 22px var(--cyan))}
.bm-store:nth-child(3n+3){border-color:var(--sodium)}
.bm-store:nth-child(3n+3):hover{filter:drop-shadow(0 0 10px var(--pink)) drop-shadow(0 0 22px var(--sodium))}

/* Bangkok soi neon-pink-flicker · irregular timing (varied per cell via --d delay) */
@keyframes neonPinkFlicker{
  0%,18%{opacity:1}
  19%{opacity:.4}
  20%{opacity:1}
  50%{opacity:.85}
  88%{opacity:1}
  100%{opacity:1}
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .bm-row,.bm-tuk,.bm-store{animation:none}
  .bm-store{opacity:1}
}

@media (max-width:560px){
  .bm-store{flex:0 0 116px;height:80px;padding:6px 8px 5px}
  .bm-store img{height:34px}
  .bm-thai{font-size:17px}
  .bm-en{font-size:10px;letter-spacing:.18em}
  .bm-tuk{width:46px;height:28px}
}

/* ===== Why cards ===== */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why .why-card{padding:20px;border:1px solid var(--line2);border-radius:var(--rad);
  background:linear-gradient(180deg,rgba(255,16,240,.04),transparent);position:relative;overflow:hidden}
.why .why-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--cyan),var(--sodium));opacity:.6}
.why .why-card .num{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:14px;color:var(--cyan);
  letter-spacing:.2em;text-shadow:var(--neon-cyan)}
.why .why-card h4{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:700;font-size:17px;
  color:#fff;margin:6px 0 4px}
.why .why-card p{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;color:var(--mute);margin:0;line-height:1.6}
@media(max-width:880px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why{grid-template-columns:1fr}}

/* ===== Tuk-tuk delivery deposit (signature) ===== */
.tuk-track{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,#0a031e,#150832);
  border-radius:var(--rad);padding:20px;overflow:hidden;margin-top:14px}
.tuk-track::before{content:'';position:absolute;left:0;right:0;bottom:30px;height:2px;background:var(--sodium);
  box-shadow:var(--neon-sodium);opacity:.5}
.tuk-track::after{content:'';position:absolute;left:0;right:0;bottom:24px;height:14px;
  background:repeating-linear-gradient(90deg,var(--sodium) 0 24px,transparent 24px 50px);opacity:.3}
.tuk-stage{position:relative;height:120px}
.tuk-vehicle{position:absolute;bottom:32px;left:0;width:80px;height:60px;transition:left 1.2s cubic-bezier(.25,.1,.25,1.4);z-index:3}
.tuk-vehicle svg{width:100%;height:100%}
.tuk-status{display:flex;justify-content:space-between;align-items:center;margin-top:14px;
  font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:12px;letter-spacing:.15em;color:var(--cyan);text-shadow:var(--neon-cyan);flex-wrap:wrap;gap:10px}
.tuk-status .eta{color:var(--sodium);text-shadow:var(--neon-sodium)}
.tuk-status .station{color:var(--pink);text-shadow:var(--neon-pink)}

/* ===== Page-specific: Station (deposit/withdraw/account) ===== */
.station-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pane{padding:22px;border:1px solid var(--line2);background:rgba(15,5,36,.4);border-radius:var(--rad)}
.pane h3{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:14px;color:var(--cyan);
  text-shadow:var(--neon-cyan);margin:0 0 14px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--line2);padding-bottom:10px}
.pane h3 .thai{display:block;font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;
  color:var(--sodium);text-shadow:var(--neon-sodium);text-transform:none;letter-spacing:.04em;margin-top:4px}
.field{margin-bottom:14px}
.field label{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:10px;color:var(--mute);
  display:block;margin-bottom:6px;letter-spacing:.18em;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;background:#06021a;border:1px solid var(--line2);
  color:#fff;font-family:'Krub','Bai Jamjuree',sans-serif;font-size:14px;outline:none;border-radius:var(--rad);transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink);box-shadow:0 0 8px rgba(255,16,240,.4)}
.qchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.qchips span{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;border:1px solid var(--cyan);
  padding:5px 11px;cursor:pointer;color:var(--cyan);letter-spacing:.06em;transition:.2s;border-radius:3px}
.qchips span:hover{background:var(--cyan);color:#001a1f;box-shadow:var(--neon-cyan)}
@media(max-width:840px){.station-grid{grid-template-columns:1fr}}

/* VIP tier badges (in station) */
.tiers{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:8px}
.tier{padding:14px;border:1px solid var(--line2);border-radius:var(--rad);background:linear-gradient(180deg,rgba(0,229,255,.04),transparent);text-align:center}
.tier .ic{font-size:24px;margin-bottom:4px}
.tier b{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;color:var(--cyan);letter-spacing:.1em;display:block}
.tier .thai{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:600;font-size:13px;color:#fff;display:block;margin:4px 0}
.tier ul{margin:8px 0 0;padding:0;list-style:none;font-family:'Krub','Bai Jamjuree',sans-serif;font-size:11px;color:var(--mute);line-height:1.6}
.tier.gold{border-color:var(--sodium);box-shadow:inset 0 0 22px rgba(255,200,87,.12)}
.tier.gold b{color:var(--sodium);text-shadow:var(--neon-sodium)}
.tier.legend{border-color:var(--pink);box-shadow:inset 0 0 22px rgba(255,16,240,.18)}
.tier.legend b{color:var(--pink);text-shadow:var(--neon-pink)}
@media(max-width:1080px){.tiers{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.tiers{grid-template-columns:repeat(2,1fr)}}

/* tabs (login/signup) */
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tabs .tabbtn{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:12px;letter-spacing:.16em;
  padding:9px 16px;border:1px solid var(--line2);color:#cfd6f0;cursor:pointer;text-transform:uppercase;
  background:transparent;border-radius:var(--rad)}
.tabs .tabbtn.act{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:var(--neon-pink)}

/* ===== Contact page ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:8px}
.contact-card{padding:22px;border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(180deg,rgba(15,5,36,.6),rgba(15,5,36,.3));
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:.25s;cursor:pointer}
.contact-card:hover{transform:translateY(-3px);border-color:var(--pink);box-shadow:0 0 18px rgba(255,16,240,.25)}
.contact-card .ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,16,240,.1);border:1px solid var(--pink);font-size:24px;box-shadow:var(--neon-pink)}
.contact-card .ic.cyan{background:rgba(0,229,255,.1);border-color:var(--cyan);box-shadow:var(--neon-cyan)}
.contact-card .ic.sodium{background:rgba(255,200,87,.1);border-color:var(--sodium);box-shadow:var(--neon-sodium)}
.contact-card h4{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:14px;color:#fff;
  margin:6px 0 2px;letter-spacing:.08em}
.contact-card .num{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:18px;color:var(--sodium);
  text-shadow:var(--neon-sodium);letter-spacing:.05em}
.contact-card .num.pink{color:var(--pink);text-shadow:var(--neon-pink)}
.contact-card .num.cyan{color:var(--cyan);text-shadow:var(--neon-cyan)}
.contact-card p{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;color:var(--mute);margin:0}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.faq{border:1px solid var(--line2);border-radius:var(--rad);overflow:hidden}
.faq details{padding:16px 18px;border-bottom:1px solid var(--line2);background:rgba(15,5,36,.3);transition:.2s}
.faq details:last-child{border-bottom:none}
.faq details:hover{background:rgba(0,229,255,.04)}
.faq details[open]{background:rgba(255,16,240,.05)}
.faq summary{font-family:'Krub','Bai Jamjuree',sans-serif;font-weight:700;font-size:14px;color:#fff;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:'+';color:var(--pink);font-family:'Audiowide','Bai Jamjuree',sans-serif;
  font-size:18px;transition:.2s}
.faq details[open] summary::after{content:'−';color:var(--cyan)}
.faq p{margin:12px 0 0;font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;color:var(--mute);line-height:1.75}
.faq p b{color:var(--sodium)}

/* ===== Footer ===== */
footer{margin-top:80px;border-top:1px solid var(--line);padding:36px 0 100px;
  background:linear-gradient(180deg,transparent,rgba(15,5,36,.92))}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px}
.foot h4{font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:12px;letter-spacing:.2em;
  color:var(--cyan);text-shadow:var(--neon-cyan);margin:0 0 12px;text-transform:uppercase}
.foot p,.foot a,.foot li{font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;
  color:#a8a0c8;line-height:1.85;text-decoration:none}
.foot a:hover{color:var(--pink);text-shadow:var(--neon-pink)}
.foot ul{padding:0;margin:0;list-style:none}
.copyright{margin-top:24px;padding-top:18px;border-top:1px solid var(--line2);
  font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:11px;color:var(--mute);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;letter-spacing:.1em}
.copyright .lic{color:var(--cyan)}
@media(max-width:880px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}

/* ===== Floating contact rail ===== */
.float{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px}
.float a,.float button{width:54px;height:54px;border:1px solid var(--cyan);background:rgba(15,5,36,.85);
  color:var(--cyan);display:grid;place-items:center;cursor:pointer;text-decoration:none;
  font-family:'Audiowide','Bai Jamjuree',sans-serif;font-size:22px;border-radius:50%;transition:.2s}
.float a:hover,.float button:hover{background:var(--cyan);color:#001a1f;box-shadow:var(--neon-cyan)}
.float .line{border-color:var(--green-walk);color:var(--green-walk)}
.float .line:hover{background:var(--green-walk);color:#003814}
.float .tg{border-color:var(--cyan)}
.float .top{border-color:var(--pink);color:var(--pink);font-size:18px}
.float .top:hover{background:var(--pink);color:#fff;box-shadow:var(--neon-pink)}

/* ===== Toast ===== */
.toast-host{position:fixed;left:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;
  gap:8px;max-width:340px;pointer-events:none}
.toast{background:rgba(15,5,36,.95);border:1px solid var(--pink);padding:11px 16px;
  font-family:'Krub','Bai Jamjuree',sans-serif;font-size:13px;color:#fff;box-shadow:var(--neon-pink);
  animation:tin .3s ease;border-radius:var(--rad);pointer-events:auto;backdrop-filter:blur(10px)}
.toast.cyan{border-color:var(--cyan);box-shadow:var(--neon-cyan)}
.toast.sodium{border-color:var(--sodium);box-shadow:var(--neon-sodium)}
.toast b{color:var(--sodium);text-shadow:var(--neon-sodium);font-family:'Audiowide','Bai Jamjuree',sans-serif;
  font-size:11px;letter-spacing:.18em;display:block;margin-bottom:3px}
.toast.cyan b{color:var(--cyan)}
@keyframes tin{from{transform:translateX(-110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ===== Modal (easter) ===== */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,16,.78);backdrop-filter:blur(6px);
  z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal-mask.show{display:flex}
.modal{max-width:480px;width:100%;border:1px solid var(--pink);padding:30px;background:#0a031e;
  position:relative;border-radius:var(--rad);box-shadow:var(--neon-pink)}
.modal h3{font-family:'Audiowide','Bai Jamjuree',sans-serif;color:var(--pink);margin:0 0 8px;
  letter-spacing:.18em;text-shadow:var(--neon-pink)}
.modal p{font-family:'Krub','Bai Jamjuree',sans-serif;color:#cfe9ff;font-size:14px;line-height:1.7}
.modal code{font-family:'Audiowide','Bai Jamjuree',sans-serif;color:var(--cyan);background:rgba(0,229,255,.1);
  padding:2px 8px;border-radius:3px;letter-spacing:.1em}
.modal .close{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--cyan);
  font-size:22px;cursor:pointer;font-family:'Audiowide','Bai Jamjuree',sans-serif}

/* ===== Selection / scrollbar ===== */
::selection{background:var(--pink);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#06021a}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--pink),var(--cyan));border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--cyan),var(--pink))}