/* Pearl Lagoon — shared styles. Single deliberate deep-sea theme. */
:root{
  color-scheme: dark;
  --ink:#041A22;
  --ink-2:#072631;
  --panel:#0B3240;
  --panel-2:#114253;
  --line:#1E5566;
  --brass:#E9C46A;
  --brass-2:#F6DFA0;
  --coral:#FF7F6B;
  --mint:#3FD8D0;
  --text:#EAF6F4;
  --muted:#8DB5B8;
  --display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:14px;
  --maxw:1180px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font:16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--brass-2)}
a:hover{color:var(--brass)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:700}
h3{font-size:1.1rem;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.eyebrow{font:600 .75rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.muted{color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* starfield canvas */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.glow-a,.glow-b{position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none}
.glow-a{width:520px;height:520px;background:#0E6A73;top:-160px;left:-120px;animation:drift 18s ease-in-out infinite alternate}
.glow-b{width:420px;height:420px;background:#5A2E5C;bottom:-140px;right:-100px;animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(80px,60px) scale(1.15)}}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.head-in{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:800 1.05rem/1 var(--display);letter-spacing:.02em;white-space:nowrap}
.logo svg{width:34px;height:34px;flex:none}
.logo b{color:var(--brass)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.92rem;padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover{color:var(--text);background:var(--panel)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--brass)}
.coin-chip{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--ink-2);font:600 .9rem var(--mono);white-space:nowrap}
.coin-chip i{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--brass-2),var(--brass) 55%,#B07A1C);box-shadow:0 0 12px rgba(242,181,68,.6)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:10px;width:42px;height:42px;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;transition:transform .25s,opacity .25s}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:12px 20px 20px;background:var(--ink-2);border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .coin-chip{margin-left:auto}
}
@media (max-width:420px){.logo span{display:none}}

/* buttons */
.btn{--c:var(--brass);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .95rem/1 var(--display);letter-spacing:.03em;
  padding:14px 22px;border-radius:999px;border:0;cursor:pointer;color:var(--ink);background:var(--c);text-decoration:none;
  box-shadow:0 6px 0 color-mix(in srgb,var(--c) 55%,#000),0 10px 30px color-mix(in srgb,var(--c) 30%,transparent);transition:transform .12s,box-shadow .12s,filter .2s}
.btn:hover{filter:brightness(1.08);color:var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 55%,#000)}
.btn[disabled]{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--panel)}
.btn.coral{--c:var(--coral)}
.btn.mint{--c:var(--mint)}

/* sections */
section{padding-block:72px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:32px}
.sec-head p{max-width:520px;margin:0}
.panel{background:linear-gradient(180deg,var(--panel),var(--ink-2));border:1px solid var(--line);border-radius:var(--r)}
.reveal{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}

/* ---------- HOME: hero + machine ---------- */
.hero{padding-block:40px 24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:40px;align-items:center}
.hero h1 .hl{color:var(--brass);display:inline-block;animation:flicker 4s infinite}
@keyframes flicker{0%,92%,100%{text-shadow:0 0 22px rgba(242,181,68,.55)}94%{text-shadow:none;opacity:.8}96%{text-shadow:0 0 30px rgba(242,181,68,.9)}}
.hero-lede{font-size:1.1rem;color:var(--muted);max-width:44ch}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tag{font:600 .78rem var(--mono);padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag b{color:var(--mint);font-weight:600}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}

.machine{position:relative;padding:18px;border-radius:24px;
  background:linear-gradient(160deg,#0F4A58,#062630 60%);border:1px solid #2A6B78;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.machine::before{content:"";position:absolute;inset:-2px;border-radius:26px;padding:2px;
  background:conic-gradient(from var(--ang,0deg),var(--brass),var(--coral),var(--mint),var(--brass));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;animation:orbitborder 6s linear infinite;pointer-events:none}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes orbitborder{to{--ang:360deg}}
.machine.lit::before{opacity:1;animation-duration:1.2s}
.m-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.m-title{font:800 .95rem var(--display);letter-spacing:.12em;text-transform:uppercase}
.m-title small{display:block;font:500 .7rem var(--mono);letter-spacing:.1em;color:var(--muted)}
.lights{display:flex;gap:6px}
.lights i{width:8px;height:8px;border-radius:50%;background:var(--brass);opacity:.3;animation:bulb 1.2s infinite}
.lights i:nth-child(2n){animation-delay:.6s}
.machine.lit .lights i{animation-duration:.25s}
@keyframes bulb{50%{opacity:1;box-shadow:0 0 10px var(--brass)}}

.reels-frame{position:relative;border-radius:16px;background:#03161C;padding:10px;border:1px solid #1B4E5A;overflow:hidden}
.reels{--cell:76px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;height:calc(var(--cell)*4);position:relative}
@media (max-width:560px){.reels{--cell:56px;gap:5px}}
.reel{position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#05202A,#0B3A47 50%,#05202A)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,22,28,.85),transparent 22%,transparent 78%,rgba(3,22,28,.85))}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.strip.blur{filter:blur(2px)}
.cell{height:var(--cell);display:grid;place-items:center;padding:10%}
.cell svg{width:100%;height:100%;max-width:74px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.cell.hit{animation:hit .7s ease-in-out infinite alternate;position:relative;z-index:2}
.cell.hit svg{filter:drop-shadow(0 0 14px var(--brass))}
@keyframes hit{from{transform:scale(1)}to{transform:scale(1.12)}}
#lines{position:absolute;inset:10px;pointer-events:none;width:calc(100% - 20px);height:calc(100% - 20px)}

.m-bar{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:16px}
.readout{background:#03161C;border:1px solid #1B4E5A;border-radius:12px;padding:8px 14px}
.readout label{display:block;font:600 .62rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.readout output{font:700 1.25rem var(--mono);font-variant-numeric:tabular-nums;color:var(--brass-2)}
.readout.prize output{color:var(--mint)}
.bet-ctl{display:flex;align-items:center;gap:8px}
.round{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font:700 1.2rem var(--mono);cursor:pointer}
.round:hover{border-color:var(--brass)}
.play-btn{width:96px;height:96px;border-radius:50%;font-size:1rem;padding:0;--c:var(--coral)}
.play-btn.busy{animation:pulse .6s infinite alternate}
@keyframes pulse{to{filter:brightness(1.25)}}
.m-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;margin-top:14px;font-size:.85rem}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted);font-weight:600}
.switch input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);position:relative;cursor:pointer;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked{background:color-mix(in srgb,var(--mint) 30%,var(--panel-2))}
.switch input:checked::after{transform:translateX(16px);background:var(--mint)}
.msg{min-height:1.6em;font:600 .9rem var(--mono);color:var(--muted);text-align:center;margin-top:10px}
.msg.good{color:var(--mint)}
@media (max-width:560px){
  .m-bar{grid-template-columns:1fr 1fr}
  .m-bar .play-wrap{grid-column:1/-1;order:3;display:flex;justify-content:center}
}

.xp{margin-top:14px}
.xp-row{display:flex;justify-content:space-between;font:600 .75rem var(--mono);color:var(--muted);margin-bottom:6px}
.xp-bar{height:8px;border-radius:999px;background:#03161C;border:1px solid #1B4E5A;overflow:hidden}
.xp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--brass));transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* overlay */
.starburst{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(2,16,20,.72);backdrop-filter:blur(4px);padding:20px}
.starburst .card{text-align:center;padding:40px 48px;border-radius:24px;background:radial-gradient(circle at 50% 0,#0F5563,#072631 70%);border:1px solid var(--brass);animation:pop .5s cubic-bezier(.2,1.6,.4,1) both;max-width:100%}
.starburst h2{font-size:clamp(2rem,7vw,3.4rem);color:var(--brass);text-shadow:0 0 30px rgba(242,181,68,.7);margin:0}
.starburst .amt{font:800 clamp(2rem,6vw,3rem) var(--mono);color:var(--text);margin:.2em 0 .6em}
@keyframes pop{from{transform:scale(.6);opacity:0}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:120}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--ink-2);padding:20px}
.stat output{display:block;font:700 1.6rem var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.stat span{font:600 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}

/* paytable */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.pay{padding:18px;display:flex;gap:14px;align-items:center;transition:transform .25s,border-color .25s}
.pay:hover{transform:translateY(-4px) rotate(-.5deg);border-color:var(--brass)}
.pay svg{width:52px;height:52px;flex:none}
.pay h3{font-size:.85rem;margin:0 0 4px}
.pay dl{margin:0;display:grid;grid-template-columns:auto auto;gap:0 10px;font:600 .78rem var(--mono);color:var(--muted)}
.pay dd{margin:0;color:var(--brass-2);text-align:right}
.lines-map{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}
.lm{padding:10px;text-align:center;font:600 .72rem var(--mono);color:var(--muted)}
.lm svg{width:100%;height:auto;display:block;margin-bottom:6px}
@media (max-width:600px){.lines-map{grid-template-columns:repeat(3,1fr)}}

/* wheel + scratch */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.duo .panel{padding:28px;display:flex;flex-direction:column;gap:16px}
.wheel-box{position:relative;width:min(300px,100%);aspect-ratio:1;margin:0 auto;max-width:100%}
.wheel-box canvas{width:100%;height:100%;display:block}
.wheel-box .pin{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--coral);filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));z-index:2}
.wheel-box .hub{position:absolute;inset:40%;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--brass-2),var(--brass) 60%,#8F6212);box-shadow:0 0 20px rgba(242,181,68,.6);display:grid;place-items:center;font:800 .7rem var(--display);color:var(--ink)}
.center{text-align:center}
.scratch{position:relative;width:min(300px,100%);aspect-ratio:1;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--line);touch-action:none}
.scratch-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);background:#062A33;padding:8px;gap:6px}
.scratch-grid div{display:grid;place-items:center;border-radius:10px;background:var(--panel)}
.scratch-grid svg{width:70%;height:70%}
.scratch-grid div.m{background:color-mix(in srgb,var(--brass) 25%,var(--panel));box-shadow:inset 0 0 0 2px var(--brass)}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}

/* achievements */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ach{padding:16px;display:flex;gap:12px;align-items:center;opacity:.55;transition:opacity .3s,border-color .3s,transform .3s}
.ach .medal{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px dashed var(--line);font:800 .8rem var(--mono);color:var(--muted)}
.ach h3{font-size:.82rem;margin:0}
.ach p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.4}
.ach.on{opacity:1;border-color:var(--brass)}
.ach.on .medal{border:0;background:radial-gradient(circle at 35% 35%,var(--brass-2),var(--brass) 60%,#8F6212);color:var(--ink);box-shadow:0 0 18px rgba(242,181,68,.5)}
.ach.just{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}

/* leaderboard */
.board{overflow-x:auto}
.board table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:420px}
.board th,.board td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.board th{font:600 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.board td.r{text-align:right;font-family:var(--mono)}
.board tr.me td{background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--mint);font-weight:700}
.rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel-2);font:700 .8rem var(--mono)}
tr:nth-child(1) .rank{background:var(--brass);color:var(--ink)}
tr:nth-child(2) .rank{background:#C9D4E3;color:var(--ink)}
tr:nth-child(3) .rank{background:#C98A5A;color:var(--ink)}

/* feature cards */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.features{grid-template-columns:1fr}}
.feature{padding:26px;position:relative;overflow:hidden}
.feature .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--panel-2);margin-bottom:14px}
.feature .ico svg{width:26px;height:26px}
.feature::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-60px;top:-60px;background:radial-gradient(var(--c,var(--brass)),transparent 70%);opacity:.15;transition:opacity .3s,transform .5s}
.feature:hover::after{opacity:.35;transform:scale(1.3)}

/* faq */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:700 1.4rem var(--mono);color:var(--brass);transition:transform .25s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{color:var(--muted);padding-bottom:16px;margin:0;max-width:70ch}

/* CTA band */
.cta-band{padding:44px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  background:radial-gradient(circle at 10% 50%,rgba(255,107,87,.25),transparent 50%),radial-gradient(circle at 90% 50%,rgba(92,225,198,.2),transparent 50%),var(--panel)}
.cta-band h2{margin:0}

/* inner pages */
.page-hero{padding-block:56px 36px;border-bottom:1px solid var(--line)}
.crumbs{font:600 .78rem var(--mono);color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.page-hero p{max-width:60ch;color:var(--muted);font-size:1.08rem;margin:0}
.page-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;padding-block:48px 72px}
@media (max-width:860px){.page-body{grid-template-columns:1fr;gap:24px}}
.side{position:sticky;top:90px;align-self:start}
@media (max-width:860px){.side{position:static}}
.side h4{font:600 .7rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side a{display:block;padding:8px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:600;font-size:.92rem}
.side a:hover{background:var(--panel)}
.side a[aria-current="page"]{background:var(--panel-2);color:var(--brass);box-shadow:inset 3px 0 0 var(--brass)}
@media (max-width:860px){.side ul{display:flex;flex-wrap:wrap;gap:6px}.side a{border:1px solid var(--line);padding:6px 12px}}
.prose{max-width:72ch}
.prose h2{font-size:1.35rem;margin-top:1.8em;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.prose .note{padding:18px 20px;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);margin:1.4em 0}
.prose .note.warn{border-color:var(--coral)}
.prose table{border-collapse:collapse;width:100%;margin:1em 0}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;font-size:.93rem}
.prose th{font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.updated{font:600 .78rem var(--mono);color:var(--muted);margin-bottom:24px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px}
.pager a{padding:18px 20px;text-decoration:none;color:var(--text);display:block}
.pager a:hover{border-color:var(--brass)}
.pager small{display:block;font:600 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pager strong{font-family:var(--display);font-size:1rem}
.pager .next{text-align:right;grid-column:2}
.steps{counter-reset:s;list-style:none;padding:0!important;display:grid;gap:14px}
.steps li{counter-increment:s;padding:18px 18px 18px 64px;position:relative;border:1px solid var(--line);border-radius:12px;background:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--brass);color:var(--ink);display:grid;place-items:center;font:800 .85rem var(--mono)}
.form{display:grid;gap:14px;max-width:560px}
.form label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.form input,.form textarea,.form select{font:inherit;color:var(--text);background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--mint);outline:none}
.check-list{display:grid;gap:10px;list-style:none;padding:0!important}
.check-list label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check-list input{accent-color:var(--brass);margin-top:5px}

/* footer */
.site-foot{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(2,14,18,.85));padding-block:56px 28px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font:600 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-grid a{color:var(--text);text-decoration:none;font-size:.93rem}
.foot-grid a:hover{color:var(--brass)}
.disclaimer{font-size:.86rem;color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--ink-2);margin-top:16px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.age{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:3px solid var(--coral);color:var(--coral);font:800 1rem var(--display)}
.help-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.help-links a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;font-size:.85rem}
.help-links a:hover{border-color:var(--mint);color:var(--mint)}


.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:150;background:var(--panel-2);border:1px solid var(--brass);padding:12px 18px;border-radius:12px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:pop .4s cubic-bezier(.2,1.6,.4,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ================= Pearl Lagoon additions ================= */
:root{--r:20px}
h1,h2{letter-spacing:-.02em}
.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr)}
.hero-grid .machine{order:-1}
@media (max-width:980px){.hero-grid .machine{order:0}}
.hero h1 .hl{color:var(--mint);animation:shimmer 5s ease-in-out infinite}
@keyframes shimmer{0%,100%{text-shadow:0 0 18px rgba(63,216,208,.45)}50%{text-shadow:0 0 34px rgba(63,216,208,.9)}}
.machine{border-radius:32px}
.machine::before{border-radius:34px;background:conic-gradient(from var(--ang,0deg),var(--mint),var(--brass),var(--coral),var(--mint))}
.reels-frame{border-radius:22px}
.reel{border-radius:14px}
.btn{border-radius:18px}
.play-btn{border-radius:50%;--c:var(--mint)}
.lights i{background:var(--mint)}
@keyframes bulb{50%{opacity:1;box-shadow:0 0 10px var(--mint)}}

/* wave divider */
.wave{display:block;width:100%;height:46px;color:var(--ink-2);margin-bottom:-1px}
.wave path{animation:waveShift 9s ease-in-out infinite alternate}
@keyframes waveShift{to{transform:translateX(-60px)}}
.band{background:var(--ink-2)}

/* free dives + depth */
.dive-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--coral) 22%,transparent);border:1px solid var(--coral);font:700 .78rem var(--mono);color:var(--text)}
.dive-badge[hidden]{display:none!important}
.machine.diving{box-shadow:0 0 0 2px var(--coral),0 30px 80px rgba(255,127,107,.25)}
.depth{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:stretch;margin-top:14px}
.gauge{width:18px;border-radius:999px;background:linear-gradient(180deg,#6FE3F0,#127A8C 30%,#0A3D59 60%,#06142B);position:relative;border:1px solid var(--line);min-height:70px}
.gauge i{position:absolute;left:-5px;right:-5px;height:4px;border-radius:2px;background:var(--brass);box-shadow:0 0 10px var(--brass);transition:top .6s cubic-bezier(.2,.8,.2,1)}

/* section heads on band */
.zone-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.zone{padding:14px 16px;border-radius:14px;border:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.zone b{display:block;font:700 .95rem var(--display);color:var(--text)}
.zone.on{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 10%,transparent)}
@media (max-width:640px){.zone-strip{grid-template-columns:1fr}}

/* clam picker */
.clams{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0}
.clam{aspect-ratio:1;max-width:100%;border:1px solid var(--line);border-radius:50% 50% 22px 22px;background:radial-gradient(circle at 50% 30%,#1A6070,#0B3240);cursor:pointer;display:grid;place-items:center;position:relative;transition:transform .3s;color:var(--text);font:700 1rem var(--mono);padding:0}
.clam:hover:not([disabled]){transform:translateY(-6px) rotate(-3deg)}
.clam svg{width:70%;height:70%;transition:transform .5s}
.clam.open svg{transform:scale(.6) translateY(-30%)}
.clam .val{position:absolute;bottom:14%;opacity:0;transition:opacity .4s .2s;color:var(--brass-2)}
.clam.open .val{opacity:1}
.clam.chosen{border-color:var(--brass);box-shadow:0 0 24px rgba(233,196,106,.5)}
.clam[disabled]{cursor:default}

/* bubble game */
.bubble-stage{position:relative;width:100%;aspect-ratio:4/3;max-width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#0B4656,#03161C);touch-action:manipulation}
.bubble-stage canvas{width:100%;height:100%;display:block;cursor:pointer}
.bubble-hud{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;font:700 .85rem var(--mono);pointer-events:none}
.bubble-cover{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(3,22,28,.55);padding:20px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.trio{grid-template-columns:1fr}}
.trio .panel{padding:24px;display:flex;flex-direction:column;gap:14px}

/* expeditions */
.quests{display:grid;gap:12px}
.quest{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;padding:16px 18px}
.quest h3{margin:0;font-size:.95rem}
.quest p{margin:0;color:var(--muted);font-size:.85rem}
.qbar{grid-column:1/-1;height:8px;border-radius:999px;background:#03161C;border:1px solid var(--line);overflow:hidden}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--brass));transition:width .5s}
.quest .btn{padding:10px 16px;font-size:.8rem}
.quest.done{opacity:.55}

/* codex flip cards */
.codex{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:860px){.codex{grid-template-columns:repeat(2,1fr)}}
.card3d{perspective:900px;aspect-ratio:3/4;max-width:100%;cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left}
.card3d .inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card3d.flip .inner{transform:rotateY(180deg)}
.card3d .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--ink-2));padding:16px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.card3d .front{align-items:center;justify-content:center;text-align:center}
.card3d .front svg{width:60%;max-width:110px}
.card3d .back{transform:rotateY(180deg);font-size:.86rem;color:var(--muted)}
.card3d .back h3{color:var(--text);font-size:.95rem;margin:0}
.card3d.locked .front svg{filter:brightness(0) opacity(.35)}
.card3d.locked .front b{color:var(--muted)}
.card3d .front small{font:600 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ocean canvas */
#sea{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body{background:linear-gradient(180deg,#06303B 0%,var(--ink) 45%,#020E13 100%) fixed}
.age{border-color:var(--coral);color:var(--coral)}
.mail{font-family:var(--mono);user-select:all;color:var(--brass-2)}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.trio .panel{grid-column:auto!important}}
.bubble-stage{aspect-ratio:16/10}
.clams{margin:auto 0}
.clam svg{width:86%;height:86%}
.trio .panel:first-child{justify-content:space-between}