/* TowelSites, "The beach". A gate, a short film, then a 3D beach you walk along. Paper-white UI, one black line,
   the yellow of the towel. Type: Instrument Serif for headlines, DM Sans for reading, Caveat only for the logo. */
:root{
  --paper:#ffffff;
  --ink:#141414;
  --pencil:#4f4f4b;
  --rule:#e4e3de;
  --sun:#ffd84a;
  --display:"Fredoka","Nunito","Segoe UI",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --line:1.5px;
  --barh:60px;
  --g:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
.js body{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(38px,4vw,54px)}
h2{font-size:clamp(34px,3.2vw,44px)}
h3{font-size:23px;font-weight:600}
em{font-style:normal;color:#e0892a}
mark{background:linear-gradient(transparent 56%,var(--sun) 56%,var(--sun) 92%,transparent 92%);color:inherit;padding:0 .1em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.kicker{margin:0 0 12px;font:700 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil)}
.sub{color:var(--pencil);margin:14px 0 0;max-width:34em}
.lead{font-size:18px;font-weight:400;line-height:1.55;margin:18px 0 0;max-width:30em}
.fine{margin:22px 0 0;font-size:13px;color:var(--pencil);font-style:italic;font-weight:300}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--ink);color:var(--paper);text-decoration:none;font:600 15px/1 var(--display);letter-spacing:.01em;padding:0 24px;border:var(--line) solid var(--ink);border-radius:999px;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--sun)}
.btn:active{transform:translate(1px,1px) scale(.97);box-shadow:none}
.btn.ghost{background:var(--paper);color:var(--ink)}

/* ---- the gate ---- */
.gate{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;text-align:center;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.gate.off{opacity:0;transform:scale(1.04);pointer-events:none}
.gate-logo{display:flex;flex-direction:column;align-items:center;gap:4px;animation:breathe 3.2s ease-in-out infinite}
.gate-logo svg{width:170px;height:116px;color:var(--ink)}
.gate-logo span{font:700 54px/1 var(--hand)}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.gate-line{margin:0;font:300 16px/1.5 var(--body);color:var(--pencil)}
.gate-actions{position:absolute;left:0;right:0;bottom:max(44px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:16px;min-height:90px;justify-content:flex-end}
.gate-load{display:flex;align-items:center;gap:14px;font:700 12px/1 var(--body);letter-spacing:.1em;color:var(--pencil);min-width:220px}
.gate-load i{flex:1;height:1.5px;background:var(--rule);position:relative;overflow:hidden}
.gate-load i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--ink);transition:width .3s}
.gate-load.done{display:none}


/* ---- the world ---- */
.world{position:fixed;inset:0;overflow:hidden;background:#dff1fb;opacity:0;transition:opacity 1.2s var(--ease)}
.world.on{opacity:1}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gl.drag{cursor:grabbing}
#gl.hand{cursor:pointer}
.wall{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#fff}
.wall[hidden]{display:none}
.bar{position:absolute;left:0;right:0;top:0;height:var(--barh);display:flex;align-items:center;gap:30px;z-index:5;padding:0 max(var(--g),env(safe-area-inset-right,0px)) 0 max(var(--g),env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.brand svg{width:46px;height:32px}
.brand span{font:700 30px/1 var(--hand)}
.menu{display:flex;gap:4px;margin-left:10px}
.menu a{font:600 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:10px 12px;border-radius:999px;position:relative;transition:background .2s}
.menu a:hover{background:rgba(255,255,255,.7)}
.menu a.on{background:var(--ink);color:var(--paper)}
.status{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{font:500 12px/1 var(--body);letter-spacing:.08em;border:var(--line) solid var(--ink);border-radius:999px;padding:0 12px;min-height:34px;min-width:46px;background:rgba(255,255,255,.75)}
.lang:hover{background:var(--sun)}
.snd{display:inline-flex;align-items:flex-end;gap:2px;height:34px;width:38px;padding:9px 10px;border:var(--line) solid var(--ink);border-radius:999px;background:rgba(255,255,255,.75)}
.snd i{flex:1;height:30%;background:var(--ink);border-radius:1px;transform-origin:bottom;transition:height .2s}
.snd[aria-pressed="true"] i{animation:eq .9s ease-in-out infinite alternate}
.snd[aria-pressed="true"] i:nth-child(2){animation-delay:-.3s}.snd[aria-pressed="true"] i:nth-child(3){animation-delay:-.6s}.snd[aria-pressed="true"] i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:25%}to{height:100%}}
.hint{position:absolute;left:var(--g);bottom:max(var(--g),env(safe-area-inset-bottom,0px));margin:0;z-index:5;font:400 13px/1.5 var(--body);color:var(--pencil);max-width:17em;transition:opacity .5s}
.snd-hint{display:block;font-weight:700;color:var(--ink)}
.snd-hint.off{display:none}
.snd.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,216,74,.9)}60%{box-shadow:0 0 0 10px rgba(255,216,74,0)}}
.hint.off{opacity:0}
.card{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:18px 22px 18px;min-width:260px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:var(--line) solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 rgba(20,20,20,.9);
  animation:cardin .45s var(--ease) both}
.card[hidden]{display:none}
.card small{font:700 11.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--pencil)}
.card strong{font:600 30px/1.05 var(--display);letter-spacing:-.01em}
.card .btn{margin-top:8px;min-height:42px;font-size:14px}
@keyframes cardin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.travel{position:absolute;right:var(--g);bottom:max(var(--g),env(safe-area-inset-bottom,0px));z-index:5;display:flex;align-items:center;gap:10px}
.arrow{width:42px;height:42px;border:var(--line) solid var(--ink);border-radius:50%;background:rgba(255,255,255,.8);font:400 16px/1 var(--body);transition:background .2s,transform .15s}
.arrow:hover{background:var(--sun)}
.track{position:relative;width:120px;height:1.5px;background:var(--ink);opacity:.9}
.track .pos{position:absolute;top:50%;left:var(--x,0%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--sun);border:var(--line) solid var(--ink)}
.track::before{content:"";position:absolute;left:0;right:0;top:-3px;height:7px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--ink) calc(25% - 1px) 25%)}

/* ---- the sheet ---- */
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);z-index:60;background:var(--paper);border-left:var(--line) solid var(--ink);box-shadow:-10px 0 40px rgba(20,20,20,.12);display:flex;flex-direction:column;
  transform:translateX(104%);transition:transform .55s var(--ease)}
.sheet.on{transform:none}
.sheet[hidden]{display:none}
.sheet-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--g) 12px;border-bottom:1px dashed #cfcec8}
.crumb{font:700 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil)}
.close{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 6px 0 14px;border:var(--line) solid var(--ink);border-radius:999px;font:600 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.close i{position:relative;width:26px;height:26px}
.close i::before,.close i::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:1.5px;margin-top:-.75px;background:var(--ink);transform:rotate(45deg)}
.close i::after{transform:rotate(-45deg)}
.close:hover{background:var(--sun)}
.sheet-body{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:34px var(--g) 60px}
.sheet-body>article>*{animation:up .5s var(--ease) both}
.sheet-body>article>*:nth-child(2){animation-delay:.06s}.sheet-body>article>*:nth-child(3){animation-delay:.12s}.sheet-body>article>*:nth-child(4){animation-delay:.18s}.sheet-body>article>*:nth-child(5){animation-delay:.24s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- documents ---- */
.js .docs{display:none}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px;color:var(--pencil)}
.ticks li::before{content:"✓";margin-right:7px;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:26px}
.thumb{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}
.thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:var(--line) solid var(--ink);border-radius:10px;margin-bottom:6px;transition:transform .25s,box-shadow .25s}
.thumb:hover img{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--sun)}
.thumb span{font:600 20px/1.1 var(--display)}
.thumb small{font-size:12px;font-weight:700;color:var(--pencil);letter-spacing:.06em;text-transform:uppercase}
.shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:var(--line) solid var(--ink);border-radius:12px;margin-bottom:22px}
.plan{padding:22px 0 20px;border-top:1px dashed #cfcec8;margin-top:22px}
.plan.star{position:relative}
.plan .kicker{margin-bottom:10px;color:var(--ink)}
.big{margin:0;display:flex;align-items:baseline;gap:12px}
.price{font:700 60px/1 var(--display);letter-spacing:-.02em}
.star .price{background:linear-gradient(transparent 58%,var(--sun) 58%,var(--sun) 92%,transparent 92%)}
.once{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--pencil)}
.monthly{margin:8px 0 0;font-size:14px;color:var(--pencil)}
.monthly strong{font:700 22px/1 var(--display);color:var(--ink);margin:0 2px}
.inc{list-style:none;padding:0;margin:16px 0 0}
.inc li{padding:7px 0 7px 20px;position:relative;font-size:15px;color:var(--pencil)}
.inc li::before{content:"+";position:absolute;left:0;top:6px;color:var(--ink)}
.when{margin:14px 0 0;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.when::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sun);border:var(--line) solid var(--ink);margin-right:8px;vertical-align:0}
.note{display:inline-block;margin:22px 0 0;font:700 22px/1.15 var(--hand);background:var(--sun);padding:12px 16px 14px;box-shadow:2px 3px 0 rgba(20,20,20,.14);transform:rotate(-2deg)}
.steps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:20px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.steps span{display:grid;place-items:center;width:46px;height:46px;font:700 22px/1 var(--display);background:var(--sun);border:var(--line) solid var(--ink);border-radius:50%}
.steps p{margin:4px 0 0;color:var(--pencil)}
details{border-top:1px dashed #cfcec8}
details:last-of-type{border-bottom:1px dashed #cfcec8}
summary{cursor:pointer;font-weight:700;padding:13px 34px 13px 0;min-height:48px;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:9px;font:300 28px/1 var(--body);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 16px;color:var(--pencil)}
#d-faq h2{margin-bottom:18px}
.addr{margin:22px 0 0;font:600 26px/1.1 var(--display);user-select:all;word-break:break-all}

/* ---- no WebGL / no JavaScript: the drawing and a readable page ---- */
.no-js .gate,.no-js .sheet,.no-js .bar,.no-js .hint,.no-js .card,.no-js .travel{display:none}
.no-js .world,.no-gl .world{position:relative;height:46vh;min-height:280px;opacity:1}
.no-js #gl,.no-gl #gl{display:none}
.no-js .docs,.no-gl .docs{display:block;max-width:640px;margin:0 auto;padding:28px 20px 60px}
.no-js .docs article,.no-gl .docs article{padding:34px 0;border-bottom:var(--line) solid var(--ink)}
.no-gl body,.js.no-gl body{overflow:auto}
.no-gl .gate,.no-gl .hint,.no-gl .card,.no-gl .travel{display:none}
.no-gl .bar{position:sticky;top:0;background:var(--paper);border-bottom:var(--line) solid var(--ink)}

/* ---- phones ---- */
@media (max-width:760px){
  :root{--g:16px}
  .menu{display:none}
  .gate-logo svg{width:130px;height:90px}
  .gate-logo span{font-size:44px}
  .hint{max-width:12em;font-size:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .card{left:16px;right:16px;transform:none;min-width:0;bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:14px 16px}
  .card strong{font-size:28px}
  @keyframes cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .travel{left:16px;right:16px;justify-content:space-between}
  .track{flex:1;width:auto}
  .sheet{width:100%;border-left:0;top:0}
  .sheet-body{padding:26px 16px 60px}
  h1{font-size:36px}
  .price{font-size:52px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- the menu: a fast-food board ---- */
.sheet.wide{width:min(760px,100%)}
.board{position:relative;background:#1c1b20;color:#fff;border-radius:26px;padding:58px 26px 0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,20,20,.5);
  background-image:radial-gradient(80% 60% at 50% 0%,rgba(255,216,74,.16),transparent 60%),repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.025) 38px 40px)}
.bulbs{position:absolute;left:0;right:0;top:16px;display:flex;justify-content:space-around;padding:0 10px}
.bulbs i{width:11px;height:11px;border-radius:50%;background:#ffd84a;box-shadow:0 0 10px 2px rgba(255,216,74,.6);animation:bulb 1.8s ease-in-out infinite}
.bulbs i:nth-child(odd){animation-delay:-.9s}.bulbs i:nth-child(3n){animation-delay:-.4s;background:#fff1b0}
@keyframes bulb{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}
.board-head{text-align:center;margin-bottom:26px;animation:up .5s var(--ease) .05s both}
.board-tag{display:inline-block;font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#141414;background:#ffd84a;padding:8px 12px;border-radius:999px;transform:rotate(-2deg);margin-bottom:14px}
.board h2{font-size:clamp(44px,5vw,62px);font-weight:700;color:#fff;letter-spacing:.01em;text-transform:uppercase;text-shadow:0 4px 0 #e04a3f,0 8px 24px rgba(224,74,63,.35)}
.board-sub{margin:12px auto 0;max-width:30em;color:rgba(255,255,255,.72);font-size:15px}
.combos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.combo{position:relative;border-radius:20px;padding:22px 20px 20px;overflow:visible;animation:popin .6s cubic-bezier(.2,.9,.3,1.3) both;transition:transform .25s var(--ease)}
.combo:hover{transform:translateY(-3px) rotate(-.4deg)}
.combo.c1{background:#ffd84a;color:#141414;animation-delay:.15s}
.combo.c2{background:linear-gradient(160deg,#ff7a4d,#e04a3f 70%);color:#fff;animation-delay:.28s}
@keyframes popin{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:none}}
.combo .no{position:absolute;left:16px;top:-12px;font:700 12px/1 var(--display);letter-spacing:.08em;background:#141414;color:#fff;padding:7px 10px;border-radius:999px}
.combo .badge{position:absolute;right:14px;top:-14px;font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;border-radius:999px;transform:rotate(4deg);transform-origin:50% 100%;animation:wobble 2.8s ease-in-out infinite}
.c1 .badge{background:#e04a3f;color:#fff}.c2 .badge{background:#ffd84a;color:#141414;animation-delay:-1.4s}
@keyframes wobble{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-3deg) translateY(-2px)}}
.combo .ico{width:58px;height:58px;margin:4px 0 10px;filter:drop-shadow(2px 3px 0 rgba(20,20,20,.18))}
.combo h3{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.combo-sub{margin:8px 0 0;font-size:14px;opacity:.85;min-height:2.8em}
.combo .sticker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:124px;height:124px;border-radius:50%;margin:14px 0 4px;background:#fff;color:#141414;transform:rotate(-7deg);box-shadow:0 10px 24px -10px rgba(20,20,20,.55),inset 0 0 0 4px #fff,inset 0 0 0 6px #141414;animation:slap .55s cubic-bezier(.2,.9,.3,1.5) both}
.c1 .sticker{animation-delay:.5s}.c2 .sticker{animation-delay:.68s;background:#fff}
.combo .sticker .price{font:700 40px/1 var(--display);letter-spacing:-.03em}
.combo .sticker small{font:700 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-top:4px;opacity:.7}
@keyframes slap{0%{opacity:0;transform:translateY(-30px) rotate(-18deg) scale(1.35)}70%{opacity:1;transform:translateY(2px) rotate(-5deg) scale(.96)}100%{transform:rotate(-7deg)}}
.combo .monthly{margin:6px 0 0;font-size:14px;color:inherit;opacity:.9}
.combo .monthly strong{font:700 22px/1 var(--display);color:inherit;margin:0 3px}
.combo .inc{margin-top:14px}
.combo .inc li{color:inherit;opacity:.92;font-size:14px;padding:6px 0 6px 22px;border:0}
.combo .inc li::before{content:"✓";color:inherit;font-weight:700;top:5px}
.c1 .inc li::before{color:#e04a3f}
.combo .when{color:inherit;font-weight:800}
.combo .when::before{background:#fff;border-color:currentColor}
.c1 .when::before{background:#141414}
.combos-h{margin:30px 0 28px;font:700 18px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#fff}
.combos.social{margin-top:6px}
.combo.c3{background:linear-gradient(160deg,#7fe3ff,#38b6e8 75%);color:#141414;animation-delay:.36s}
.combo.c4{background:linear-gradient(160deg,#ff8fc2,#e8457f 75%);color:#fff;animation-delay:.44s}
.c3 .badge{background:#141414;color:#fff;animation-delay:-.7s}.c4 .badge{background:#ffd84a;color:#141414;animation-delay:-2.1s}
.c3 .sticker{animation-delay:.8s}.c4 .sticker{animation-delay:.92s}
.c3 .inc li::before{color:#141414}
.sides{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 18px;animation:up .5s var(--ease) .5s both}
.sides-h{font:700 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#ffd84a;margin-right:4px}
.chip{font:600 13px/1 var(--body);color:#fff;border:1.5px solid rgba(255,255,255,.3);padding:9px 12px;border-radius:999px;transition:background .2s,border-color .2s}
.chip:hover{background:rgba(255,255,255,.1);border-color:#ffd84a}
.strip{margin:0 -26px;background:#ffd84a;color:#141414;overflow:hidden;white-space:nowrap;padding:11px 0;font:700 12.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.strip-track{display:inline-flex;align-items:center;gap:22px;animation:strip 16s linear infinite;will-change:transform}
.strip i{font-style:normal;color:#e04a3f}
@keyframes strip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#d-prices .note{margin-top:26px}
@media (max-width:760px){
  .board{padding:52px 16px 0;border-radius:20px}
  .combos{grid-template-columns:1fr}
  .combo-sub{min-height:0}
  .strip{margin:0 -16px}
  .board h2{font-size:40px}
}
@media (prefers-reduced-motion:reduce){.bulbs i,.badge,.strip-track,.combo,.combo .sticker{animation:none!important}}

/* ==== Vice City edition: sunset, neon pink + teal, a game HUD. Bebas Neue for HUD + titles on the beach,
   Yellowtail for neon script, Caveat stays the logo, Fredoka/Nunito stay for reading. ==== */
:root{
  --vc-night:#150a24;
  --vc-violet:#2a1356;
  --vc-pink:#ff3d9a;
  --vc-teal:#2ff5e0;
  --vc-gold:#ffd23f;
  --vc-orange:#ff8a3d;
  --hud:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --neon:"Yellowtail","Brush Script MT",cursive;
}
.world{background:linear-gradient(#2a1356,#d9468f 55%,#ffa15e)}
/* a soft violet vignette, like the game's sunset grade */
.world::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(42,19,86,.55))}

/* loader: a loading screen */
.gate{background:linear-gradient(180deg,#2a1356 0%,#8e2b8f 38%,#ff4f8b 62%,#ffa15e 80%,#ffd27a 100%);color:#fff;overflow:hidden}
.gate::before{content:"";position:absolute;left:50%;top:58%;width:min(56vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(#ffe36e,#ff5f9e 80%);-webkit-mask:linear-gradient(180deg,#000 52%,transparent 52% 57%,#000 57% 66%,transparent 66% 71%,#000 71% 79%,transparent 79% 85%,#000 85% 91%,transparent 91% 97%,#000 97%);mask:linear-gradient(180deg,#000 52%,transparent 52% 57%,#000 57% 66%,transparent 66% 71%,#000 71% 79%,transparent 79% 85%,#000 85% 91%,transparent 91% 97%,#000 97%);opacity:.9}
.gate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(#2b1d6b,#150a24)}
.gate>*{position:relative;z-index:1}
.gate-logo{color:#fff;filter:drop-shadow(0 0 10px rgba(255,61,154,.9)) drop-shadow(0 0 24px rgba(255,61,154,.5))}
.gate-logo svg{color:#fff}
.gate-logo span{color:#fff;text-shadow:0 0 6px #fff,0 0 18px var(--vc-pink),0 0 40px var(--vc-pink)}
.gate-load{color:#fff;font:400 18px/1 var(--hud);letter-spacing:.12em;text-shadow:0 2px 0 var(--vc-night)}
.gate-load i{height:8px;background:rgba(21,10,36,.6);border:2px solid var(--vc-night);border-radius:0}
.gate-load i::after{background:linear-gradient(90deg,var(--vc-pink),var(--vc-teal))}
.gate-line{position:absolute;left:0;right:0;bottom:max(36px,env(safe-area-inset-bottom,0px));color:#fff;font:400 15px/1.4 var(--body);opacity:.85}

/* top bar */
.bar{z-index:6;background:linear-gradient(rgba(21,10,36,.72),rgba(21,10,36,0));color:#fff}
.brand{color:#fff}
.brand svg{color:#fff;filter:drop-shadow(0 0 6px var(--vc-pink))}
.brand span{color:#fff;text-shadow:0 0 4px #fff,0 0 14px var(--vc-pink),0 0 28px var(--vc-pink)}
.menu a{font:400 19px/1 var(--hud);letter-spacing:.08em;color:#fff;text-shadow:0 2px 0 var(--vc-night)}
.menu a:hover{background:rgba(255,61,154,.25)}
.menu a.on{background:var(--vc-pink);color:#fff;text-shadow:none;box-shadow:0 0 18px rgba(255,61,154,.7)}
.lang,.snd{background:rgba(21,10,36,.55);border-color:#fff;color:#fff}
.lang:hover{background:var(--vc-pink)}
.snd i{background:#fff}
.snd.pulse{animation:vcpulse 1.6s ease-in-out infinite}
@keyframes vcpulse{0%,100%{box-shadow:0 0 0 0 rgba(47,245,224,.9)}60%{box-shadow:0 0 0 10px rgba(47,245,224,0)}}

/* hint moves up under the bar; the radar has the corner */
.hint{top:calc(var(--barh) + 64px);bottom:auto;color:#fff;text-shadow:0 1px 0 var(--vc-night),0 0 10px rgba(21,10,36,.6);font-weight:600}
.snd-hint{color:var(--vc-teal)}

/* HUD: clock, money, stars (top right) */
.hud{position:absolute;right:max(var(--g),env(safe-area-inset-right,0px));top:calc(var(--barh) + 4px);z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:0;
  font-family:var(--hud);letter-spacing:.04em;line-height:1;opacity:0;transform:translateY(-8px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.hud.on{opacity:1;transform:none}
.hud-clock{font-size:34px;color:#fff;-webkit-text-stroke:1.5px var(--vc-night);paint-order:stroke fill;text-shadow:0 3px 0 var(--vc-night)}
.hud-money{font:400 38px/1 var(--hud);letter-spacing:.04em;color:#7dff8e;-webkit-text-stroke:1.5px #0d2a14;paint-order:stroke fill;text-shadow:0 3px 0 #0d2a14;pointer-events:auto;cursor:pointer;transition:transform .15s}
.hud-money:hover{transform:scale(1.06)}
.hud-stars{display:flex;gap:2px;margin-top:4px}
.hud-stars i{font-style:normal;font-size:26px;color:rgba(21,10,36,.55);-webkit-text-stroke:1.5px rgba(255,255,255,.55);transition:color .3s,transform .3s}
.hud-stars i.on{color:var(--vc-gold);-webkit-text-stroke:1.5px var(--vc-night);text-shadow:0 0 12px rgba(255,210,63,.8);animation:starpop .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes starpop{from{transform:scale(2.2) rotate(-30deg)}to{transform:none}}

/* radar (bottom left) */
.radar{position:absolute;left:max(var(--g),env(safe-area-inset-left,0px));bottom:max(var(--g),env(safe-area-inset-bottom,0px));z-index:5;width:132px;height:132px;border-radius:50%;
  border:4px solid var(--vc-night);box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 22px rgba(47,245,224,.45),0 8px 18px rgba(21,10,36,.5);background:var(--vc-night)}

/* radio station name, top centre, like changing station in the car */
.radio{position:absolute;left:0;right:0;top:calc(var(--barh) + 14px);z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;opacity:0}
.radio b{font:400 clamp(40px,5vw,64px)/1 var(--neon);color:#fff;text-shadow:0 0 6px #fff,0 0 18px var(--vc-teal),0 0 38px var(--vc-teal)}
.radio small{font:400 18px/1 var(--hud);letter-spacing:.14em;color:#fff;text-shadow:0 2px 0 var(--vc-night)}
.radio.on{animation:radio 3.6s var(--ease) both}
@keyframes radio{0%{opacity:0;transform:translateY(-10px)}10%,75%{opacity:1;transform:none}100%{opacity:0}}

/* mission passed */
.passed{position:fixed;left:0;right:0;top:34%;z-index:80;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;opacity:0;text-align:center}
.passed strong{font:400 clamp(46px,7vw,92px)/.95 var(--hud);letter-spacing:.03em;color:var(--vc-gold);-webkit-text-stroke:3px var(--vc-night);paint-order:stroke fill;text-shadow:0 5px 0 var(--vc-night),0 0 40px rgba(255,138,61,.6);text-transform:uppercase}
.passed small{font:400 clamp(24px,3vw,34px)/1 var(--hud);letter-spacing:.08em;color:#fff;-webkit-text-stroke:2px var(--vc-night);paint-order:stroke fill;text-transform:uppercase}
.passed.on{animation:passed 2.6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes passed{0%{opacity:0;transform:scale(1.6)}12%{opacity:1;transform:scale(.97)}18%{transform:none}82%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}

/* the card: a mission title */
.card{background:linear-gradient(160deg,rgba(42,19,86,.88),rgba(21,10,36,.92));color:#fff;border:2px solid var(--vc-pink);border-radius:6px;box-shadow:0 0 0 4px rgba(21,10,36,.6),0 0 26px rgba(255,61,154,.5),0 18px 40px -12px rgba(21,10,36,.8)}
.card small{color:var(--vc-teal);font:400 16px/1 var(--hud);letter-spacing:.16em}
.card strong{font:400 46px/1 var(--hud);letter-spacing:.03em;color:#fff;-webkit-text-stroke:1.5px var(--vc-night);paint-order:stroke fill;text-shadow:0 3px 0 var(--vc-pink),0 0 20px rgba(255,61,154,.6)}
.card .btn{background:var(--vc-pink);border-color:var(--vc-pink);color:#fff;font:400 20px/1 var(--hud);letter-spacing:.1em;border-radius:4px}
.card .btn:hover{box-shadow:4px 4px 0 var(--vc-teal)}

/* travel arrows: HUD buttons; the radar replaces the track */
.travel .track{display:none}
.arrow{background:rgba(21,10,36,.6);border:2px solid #fff;color:#fff;font:400 22px/1 var(--hud)}
.arrow:hover{background:var(--vc-pink)}

/* the sheet: night-time paper, neon accents */
.sheet{--paper:#1b0d2e;--ink:#fff3fa;--pencil:#cdb8e0;--rule:rgba(255,255,255,.14);--sun:var(--vc-pink);background:#1b0d2e;color:var(--ink);border-left:2px solid var(--vc-pink);box-shadow:-10px 0 50px rgba(255,61,154,.25)}
.sheet-top{border-bottom:1px solid rgba(255,61,154,.35)}
.crumb{color:var(--vc-teal);font:400 17px/1 var(--hud);letter-spacing:.14em}
.close{border-color:var(--ink);font:400 17px/1 var(--hud);letter-spacing:.1em}
.close:hover{background:var(--vc-pink);border-color:var(--vc-pink)}
.sheet h1,.sheet h2{color:#fff;text-shadow:0 0 22px rgba(255,61,154,.35)}
.sheet em{color:var(--vc-teal)}
.sheet mark{background:linear-gradient(transparent 60%,rgba(255,61,154,.75) 60%,rgba(255,61,154,.75) 92%,transparent 92%)}
.sheet .btn{background:var(--vc-pink);border-color:var(--vc-pink);color:#fff}
.sheet .btn:hover{box-shadow:4px 4px 0 var(--vc-teal)}
.sheet .btn.ghost{background:transparent;border-color:#fff;color:#fff}
.sheet .thumb img,.sheet .shot{border-color:rgba(255,255,255,.5)}
.sheet .thumb:hover img{box-shadow:4px 4px 0 var(--vc-pink)}
.sheet .steps span{background:var(--vc-pink);border-color:var(--vc-pink);color:#fff}
.sheet details,.sheet details:last-of-type{border-color:rgba(255,255,255,.18)}
.sheet .note{background:var(--vc-gold);color:#141414}
.sheet .kicker{color:var(--vc-teal)}
.sheet .board{box-shadow:0 0 0 2px rgba(255,61,154,.5),0 30px 60px -30px rgba(0,0,0,.7)}
.sheet .board h2{text-shadow:0 4px 0 var(--vc-pink),0 8px 24px rgba(255,61,154,.45)}
.sheet .combo.c1{background:linear-gradient(160deg,#ffe36e,#ffd23f)}
.sheet .combo.c2{background:linear-gradient(160deg,#ff6fb0,#ff3d9a 70%)}
.sheet .strip{background:var(--vc-teal)}
.sheet .strip i{color:var(--vc-pink)}

.no-gl .hud,.no-gl .radar,.no-gl .radio,.no-gl .passed,.no-js .hud,.no-js .radar,.no-js .radio,.no-js .passed{display:none}
.no-gl .world::after,.no-js .world::after{display:none}

@media (max-width:760px){
  .hint{top:calc(var(--barh) + 92px)}
  .hud{top:calc(var(--barh) - 2px)}
  .hud-clock{font-size:24px}.hud-money{font-size:28px}.hud-stars i{font-size:18px}
  .radar{width:92px;height:92px;border-width:3px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .travel{left:auto;right:16px;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  .card{bottom:calc(122px + env(safe-area-inset-bottom,0px))}
  .card strong{font-size:38px}
  .passed{top:28%}
}
@media (prefers-reduced-motion:reduce){.passed.on{opacity:1}.radio.on{opacity:1}}