/* DustDash website: shared styles for every page.
   The game's own look: deep space (#05060f, the app's background), Fredoka (bundled here,
   so the site makes no third-party requests), and the board's colours: stardust gold,
   Moss green, ice cyan, pirate red. One dark theme by choice: it is the game's world. */
@font-face{font-family:"Fredoka";src:url(fonts/Fredoka-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/Fredoka-600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/Fredoka-700.ttf) format("truetype");font-weight:700;font-display:swap}
:root{
  --space:#05060f; --deep:#0d1030; --panel:#141a3f; --panel-2:#1c2352; --line:#ffffff1c;
  --ink:#f3f1ff; --muted:#b9bfdc; --faint:#8f9bb6;
  --gold:#ffe066; --green:#8dff7a; --cyan:#7fd0ff; --red:#ff5a6e; --purple:#b06cff; --pink:#ff9ad5;
  --round:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--space);color:var(--ink);font:17px/1.6 var(--round);font-weight:400;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 6%,#fffa 50%,transparent 51%),radial-gradient(1px 1px at 72% 3%,#fff8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 12%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 30% 20%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 92% 24%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 4% 32%,#fff6 50%,transparent 51%),
    radial-gradient(1px 1px at 82% 44%,#fff5 50%,transparent 51%),radial-gradient(1.5px 1.5px at 18% 58%,#fff5 50%,transparent 51%),
    radial-gradient(60% 40% at 85% 0%,#3a1e6b66,transparent 70%),radial-gradient(50% 35% at 0% 30%,#0f3b5a55,transparent 70%),
    linear-gradient(180deg,#05060f 0,#0a0c24 1200px,#05060f 100%);
  background-repeat:no-repeat}
a{color:var(--gold)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--round);font-weight:700;line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
.kick{font:600 12px/1 var(--round);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:24px;letter-spacing:.01em}
.mark img{width:40px;height:40px;border-radius:10px}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:600}
.top nav a:hover,.top nav a[aria-current]{color:var(--gold)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:28px 72px}
.hero h1{font-size:clamp(40px,6.6vw,72px);letter-spacing:-.01em}
.hero h1 .dd{background:linear-gradient(180deg,#fff 10%,#ffd1ec 55%,#ff9ad5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:19px;color:var(--muted);max-width:34em;margin-top:20px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 22px;font:700 16px var(--round);text-decoration:none}
.btn.go{background:var(--green);color:#0b2a12}
.btn.ghost{border:2px solid var(--line);color:var(--ink)}
.soon{font:700 11px var(--round);letter-spacing:.12em;text-transform:uppercase;background:#0b2a12;color:var(--green);border-radius:999px;padding:3px 8px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.facts span{font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:#ffffff08}

/* phone frame around real app frames */
.phone{border-radius:38px;padding:10px;background:#0b0d1e;box-shadow:0 0 0 2px #ffffff14,0 30px 80px #000a,0 0 60px #7fd0ff22;max-width:340px;justify-self:center;width:100%}
.phone img{border-radius:30px;width:100%;height:auto}

/* sections */
section{padding-block:56px}
.sec-head{max-width:640px;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.sec-head h2{font-size:clamp(28px,4.4vw,42px)}
.sec-head p{color:var(--muted);font-size:18px}

.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
.story .art{border-radius:28px;overflow:hidden;box-shadow:0 20px 60px #0008}
.story .copy{display:flex;flex-direction:column;gap:14px;font-size:18px;color:var(--muted)}
.story .copy b{color:var(--ink)}
.cast{display:flex;gap:18px;align-items:flex-end;margin-top:6px}
.cast figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;color:var(--faint)}
.cast img{height:96px;width:auto}

.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.how figure{margin:0;display:flex;flex-direction:column;gap:14px}
.how .phone{max-width:300px}
.how figcaption b{display:block;font-size:19px;color:var(--ink)}
.how figcaption{color:var(--muted);font-size:16px}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid var(--line);border-radius:22px;padding:20px}
.card h3{font-size:19px;margin-bottom:6px}
.card p{color:var(--muted);font-size:16px}
.card.g h3{color:var(--green)} .card.c h3{color:var(--cyan)} .card.y h3{color:var(--gold)}
.card.r h3{color:var(--red)} .card.p h3{color:var(--purple)} .card.k h3{color:var(--pink)}

.fair{background:linear-gradient(135deg,#1a1440,#0d1030);border:1px solid #ffe06633;border-radius:28px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.fair h2{font-size:clamp(26px,3.6vw,36px);color:var(--gold)}
.fair ul{margin:0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.fair li b{color:var(--ink)}

.closing{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.closing img{width:120px;border-radius:28px;box-shadow:0 0 50px #8dff7a33}
.closing h2{font-size:clamp(28px,4.6vw,44px)}
.closing p{color:var(--muted);max-width:36em}

/* home page chapters (2026-10-10): story film, gameplay loops, loot, pirates, marketplace, gear */
.phone video{border-radius:30px;width:100%;height:auto;display:block;background:#000}
h2.big{font-size:clamp(28px,4.4vw,42px);color:var(--ink)}
.loot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.loot div,.gear div{background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.loot img,.gear img{width:72px;height:72px;object-fit:contain;margin-bottom:4px}
.loot b,.gear b{font-size:20px;color:var(--ink)}
.loot b.y{color:var(--gold)} .loot b.c{color:var(--cyan)} .loot b.g{color:var(--green)}
.loot span,.gear span{color:var(--muted);font-size:16px}
.pirates{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:stretch;
  background:radial-gradient(80% 60% at 100% 0%,#ff5a6e22,transparent 70%),linear-gradient(135deg,#2a0f22,#0d1030);border:1px solid #ff5a6e44;border-radius:28px;padding:28px}
.pirates .copy,.trade .copy{display:flex;flex-direction:column;gap:14px;font-size:18px;color:var(--muted)}
.pirates h2.big{color:var(--red)}
.crew{display:flex;gap:16px;align-items:flex-end;margin-top:6px}
.crew img:first-child{width:260px;max-width:62%;border-radius:18px}
.crew img:last-child{width:110px}
.kraken{background:#05060f99;border:1px solid #b06cff55;border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--muted)}
.kraken img{width:100%;max-width:280px;align-self:center;filter:drop-shadow(0 0 30px #b06cff55)}
.kraken h3{font-size:24px;color:var(--purple)}
.trade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
.trade h2.big{color:var(--gold)}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:14px;align-items:center}
.ticks img{width:48px;height:48px;object-fit:contain;flex:none}
.ticks b{color:var(--ink)}
.gear{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gear b{color:var(--green)}
.also{color:var(--muted);margin-top:18px;font-size:17px}
.also b{color:var(--ink)}
.fair-sub{color:var(--muted);margin-top:12px;font-size:18px}

/* documents (privacy, terms, support) */
.doc{max-width:760px;padding-block:20px 64px}
.doc h1{font-size:clamp(34px,5.4vw,52px);margin-top:10px}
.updated{color:var(--faint);font-size:15px;margin-top:8px}
.short{background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid #ffe06633;border-radius:20px;padding:18px 20px;margin:24px 0 8px;color:var(--ink)}
.doc h2{font-size:24px;margin:34px 0 10px;color:var(--gold)}
.doc h3{font-size:19px;margin:22px 0 6px}
.doc p{color:var(--muted);margin-bottom:12px}
.doc p b,.doc li b{color:var(--ink)}
.doc ul,.doc ol{color:var(--muted);padding-left:22px;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.tbl{overflow-x:auto;margin:6px 0 14px}
.doc table{width:100%;border-collapse:collapse;font-size:16px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line);color:var(--muted)}
.doc th{color:var(--ink);font-weight:600;border-top:0}
.doc td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.faq{display:flex;flex-direction:column;gap:12px;margin:8px 0 18px}
.faq details{background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid var(--line);border-radius:18px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:18px;list-style-position:outside}
.faq details[open] summary{margin-bottom:8px}
.faq details p:last-child{margin-bottom:0}
.contact{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#123a2a,#0d1030);border:1px solid #8dff7a44;border-radius:22px;padding:18px 20px;margin:20px 0}
.contact img{width:64px;height:auto;flex:none}
.contact p{margin:0;color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--line);padding-block:26px 40px;color:var(--faint);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer nav{display:flex;gap:16px;flex-wrap:wrap}

@media (max-width:860px){
  .hero,.story,.fair{grid-template-columns:minmax(0,1fr)}
  .hero{gap:32px;padding-bottom:48px}
  .how,.cards{grid-template-columns:minmax(0,1fr)}
  .pirates,.trade{grid-template-columns:minmax(0,1fr)}
  .loot,.gear{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how .phone{max-width:280px}
}
@media (max-width:520px){
  .top nav{gap:14px}
  .mark{font-size:22px}
  .doc td:first-child{white-space:normal}
}

/* 12 Oct 2026: the sky behind the page moves in three phases (Nick): the home
   planet at the start, deep space after the story, kraken waters from the
   pirates on. Fixed behind everything; the script at the foot of index.html
   sets body[data-phase] from whichever part of the page is in the middle. */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.phase{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
body[data-phase="home"] .phase.home,body[data-phase="space"] .phase.space,body[data-phase="deep"] .phase.deep{opacity:1}
.phase .pan{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:pan 40s ease-in-out infinite alternate}
.phase.home .pan{background-image:url(img/bg_home.webp);filter:saturate(1.1)}
.phase.home .haze{position:absolute;inset:0;background:linear-gradient(180deg,#05060fcc 0%,#05060f8c 35%,#05060fb3 70%,#05060f 100%),radial-gradient(70% 50% at 20% 30%,#05060f99,transparent 70%)}
.phase.space{background:#05060f}
.phase.space .pan{background-image:url(img/bg_space.webp);opacity:.4;animation-duration:60s}
.stars{position:absolute;inset:-50% 0 0 0;background-repeat:repeat;animation:starfall linear infinite}
.stars.s1{background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent 60%),radial-gradient(1px 1px at 140px 90px,#fffc,transparent 60%),radial-gradient(1.5px 1.5px at 80px 160px,#ffe066,transparent 60%),radial-gradient(1px 1px at 200px 210px,#7fd0ff,transparent 60%);background-size:240px 240px;animation-duration:90s;opacity:.8}
.stars.s2{background-image:radial-gradient(2px 2px at 60px 60px,#fff,transparent 60%),radial-gradient(1.5px 1.5px at 300px 250px,#ff9ad5,transparent 60%);background-size:380px 380px;animation-duration:45s;opacity:.6}
.drift{position:absolute;height:auto}
.comet{width:90px;animation:comet 14s linear infinite}
.comet.c1{top:12%;left:-10%}
.comet.c2{top:58%;left:-10%;width:70px;animation-delay:-7s;animation-duration:18s}
.rock{width:70px;opacity:.75;animation:rock 50s linear infinite}
.rock.r1{top:30%;right:-8%}
.rock.r2{top:78%;right:-8%;width:52px;animation-delay:-25s;animation-duration:64s}
.phase.deep{background:radial-gradient(60% 45% at 85% 15%,#ff5a6e33,transparent 70%),radial-gradient(70% 55% at 10% 85%,#b06cff40,transparent 70%),linear-gradient(180deg,#120617,#05060f 60%,#160a24)}
.phase.deep .nebula{position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 50%,#7a1f4a22,transparent 70%);animation:pulse 8s ease-in-out infinite}
.tent{position:absolute;height:auto;opacity:.5;filter:drop-shadow(0 0 20px #b06cff55)}
.tent.t1{left:-60px;top:38%;width:300px;transform-origin:0 50%;animation:reach 7s ease-in-out infinite}
.tent.t2{right:-50px;top:4%;width:260px;transform-origin:100% 0;animation:reach 9s ease-in-out -3s infinite}
.tent.t3{right:-40px;bottom:6%;width:220px;transform-origin:100% 100%;animation:reach 8s ease-in-out -5s infinite}
.tent.t4{left:-70px;bottom:-30px;width:280px;transform-origin:0 100%;animation:reach 10s ease-in-out -2s infinite}
@keyframes pan{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-2%,-3%)}}
@keyframes starfall{from{transform:translateY(0)}to{transform:translateY(50%)}}
@keyframes comet{0%{transform:translate(0,0) rotate(-25deg);opacity:0}8%{opacity:1}60%{opacity:1}100%{transform:translate(130vw,40vh) rotate(-25deg);opacity:0}}
@keyframes rock{from{transform:translateX(0) rotate(0)}to{transform:translateX(-120vw) rotate(-360deg)}}
@keyframes reach{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(7deg) scale(1.06)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
/* phase 1 body background stays dark for the rest of the page */
body{background-attachment:scroll}

/* the cast, cut out and stepping forward of their panels */
.char{filter:drop-shadow(0 18px 30px #000c)}
.hero-art{position:relative;justify-self:center;width:100%;max-width:340px}
.hero-art .phone{max-width:300px;margin-left:auto}
.hero-moss{position:absolute;left:-70px;bottom:-34px;width:52%;max-width:190px;animation:hop 4s ease-in-out infinite}
.hero-welchy{position:absolute;left:-90px;top:30%;width:80px;animation:flutter 3s ease-in-out infinite}
.cast .bob,.bob{animation:flutter 3s ease-in-out infinite}
.pirates{margin-top:70px}
.crew{align-items:flex-end}
.crew img.char{width:420px;max-width:72%;border-radius:0;margin:-10px 0 -46px -30px}
.kraken{position:relative;overflow:visible}
.kraken img.char{width:125%;max-width:420px;margin:-120px -40px -10px;align-self:center;filter:drop-shadow(0 0 40px #b06cffaa) drop-shadow(0 20px 30px #000c)}
.sway{animation:krak 6s ease-in-out infinite;transform-origin:50% 40%}
.trade-art{position:relative;max-width:360px;justify-self:center;width:100%}
.trade-art .phone{max-width:300px}
.trade-captain{position:absolute;right:-60px;bottom:-30px;width:46%;max-width:170px}
@keyframes hop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes flutter{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(6px,-12px) rotate(6deg)}}
@keyframes krak{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-8px)}}
@media (max-width:860px){
  .hero-art{max-width:300px}
  .hero-moss{left:-34px;width:44%}
  .hero-welchy{left:-30px;top:18%;width:60px}
  .crew img.char{max-width:100%;margin:0 0 -30px -10px}
  .kraken img.char{margin:-90px auto -10px;width:100%}
  .trade-captain{right:-20px;width:40%}
  .tent{opacity:.32}
  .tent.t1,.tent.t4{width:200px}
  .tent.t2,.tent.t3{width:170px}
}
@media (prefers-reduced-motion: reduce){
  .phase .pan,.stars,.drift,.tent,.nebula,.hero-moss,.hero-welchy,.bob,.sway{animation:none!important}
  .drift{display:none}
}
.hero-welchy,.cast .bob{filter:drop-shadow(0 6px 10px #0007)}

/* 12 Oct 2026 (Nick): comets shoot through the screen head-first along the
   line of their tails, like a real shooting star: a quick streak, then a long
   wait. The art's head is bottom-left and its tail top-right, so the path is
   45 degrees down and to the left, with no rotation. Asteroids just drift. */
.comet{left:auto;width:96px;opacity:0;filter:drop-shadow(0 0 12px #7fd0ffaa);animation:shoot 9s cubic-bezier(.3,0,.7,1) infinite}
.comet.c1{top:-14%;right:-12%;animation-delay:1.5s}
.comet.c2{top:8%;right:-30%;left:auto;width:66px;filter:drop-shadow(0 0 12px #ffb36688);animation-duration:13s;animation-delay:6s}
@keyframes shoot{0%{transform:translate(0,0);opacity:0}1.5%{opacity:1}13%{opacity:1}16%{transform:translate(-125vmax,125vmax);opacity:0}100%{transform:translate(-125vmax,125vmax);opacity:0}}
.rock{animation:float 90s linear infinite}
.rock.r1{top:28%;right:-10%}
.rock.r2{top:72%;right:-10%;animation-duration:120s;animation-delay:-60s}
@keyframes float{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-32vw,-2vh) rotate(-30deg)}50%{transform:translate(-64vw,1vh) rotate(-60deg)}75%{transform:translate(-96vw,-1vh) rotate(-90deg)}100%{transform:translate(-128vw,0) rotate(-120deg)}}