/* ==========================================================================
   pokedive.online — stylesheet
   Fan-hub visual language that matches PokéDive (pokedive.com):
   Poké Ball red/white/yellow, ink dungeon HUD panels, pixel-art warmth, Rubik.
   No third-party assets. Hand-written, no build step.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:Rubik;font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/rubik-500.woff2") format("woff2")}
@font-face{font-family:Rubik;font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/rubik-600.woff2") format("woff2")}
@font-face{font-family:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/rubik-700.woff2") format("woff2")}
@font-face{font-family:Rubik;font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/rubik-800.woff2") format("woff2")}
@font-face{font-family:Rubik;font-style:normal;font-weight:900;font-display:swap;src:url("/assets/fonts/rubik-900.woff2") format("woff2")}
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/press-start-2p-400.woff2") format("woff2")}
@font-face{font-family:"Rubik Fallback";src:local("Arial"),local("Helvetica Neue"),local("Segoe UI");size-adjust:97%;ascent-override:92%;descent-override:24%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  --ink:#1d2230;--ink-2:#5a6274;--mute:#667085;--gold-ink:#7a5800;--line:#e6e8ee;
  --paper:#ffffff;--soft:#f4f5f9;--soft-2:#eef0f5;--cream:#fff8d8;
  --red:#e8343a;--red-2:#d22a30;--red-d:#8f161b;
  --yellow:#ffcb05;--yellow-2:#ffe066;--yellow-d:#b58a00;
  --blue:#2a75bb;--blue-2:#5bc8f5;--blue-d:#164a7a;
  --green:#3ccf6e;--green-d:#23964a;
  --pink:#ef6fb0;--purple:#7b47b5;--orange:#ff8a3d;
  --dark:#0d1316;--navy:#141828;--navy-2:#1a2233;--navy-3:#1d2230;
  --shadow-sm:0 2px 0 #1418281f,0 6px 16px #14182814;
  --shadow:0 3px 0 #14182826,0 14px 30px #1418281f;
  --shadow-pop:0 4px 0 #8f161b,0 10px 22px #8f161b3d;
  --radius-sm:12px;--radius:18px;--radius-lg:26px;--radius-pill:999px;
  --font:"Rubik","Rubik Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-pixel:"Press Start 2P","Rubik",monospace;
  --head-h:64px;--pad:20px;
  --stripes:repeating-linear-gradient(-45deg,#ffffff1f 0 10px,#ffffff00 10px 20px);
  --pixel-grid:linear-gradient(#ffffff0d 1px,#ffffff00 1px),linear-gradient(90deg,#ffffff0d 1px,#ffffff00 1px);
}
@media(min-width:901px){:root{--head-h:72px;--pad:32px}}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 14px)}
body{margin:0;font-family:var(--font);font-weight:500;font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--soft);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
strong,b{font-weight:800}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{display:inline-block;width:1.15em;height:1.15em;flex:none;fill:currentColor;vertical-align:-0.16em}
.container{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--pad)}
.skip-link{position:fixed;left:12px;top:10px;z-index:300;padding:12px 22px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:var(--radius-sm);font-weight:800;box-shadow:var(--shadow);transform:translateY(-180%);transition:transform .18s ease}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}

/* ---------- Buttons / chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.9em 1.5em;border:0;border-radius:var(--radius-pill);
  font-weight:800;font-size:1rem;line-height:1;letter-spacing:.01em;cursor:pointer;text-align:center;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;text-decoration:none}
.btn .ico{width:1.05em;height:1.05em;vertical-align:0}
.btn-primary{background:var(--red-2);color:#fff;box-shadow:var(--shadow-pop)}
.btn-primary:hover{background:#b8232b;transform:translateY(-2px);box-shadow:0 6px 0 #6e1015,0 14px 26px #8f161b4d}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 #6e1015,0 4px 10px #8f161b33}
.btn-gold{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 var(--yellow-d),0 10px 22px #b58a0040}
.btn-gold:hover{background:var(--yellow-2);transform:translateY(-2px)}
.btn-light{background:var(--paper);color:var(--ink);box-shadow:0 4px 0 #c9d0dd,0 10px 22px #1418281f;border:1px solid #dde3ee}
.btn-light:hover{background:var(--cream);transform:translateY(-2px)}
.btn-ghost{background:#ffffff14;color:#fff;border:1px solid #ffffff33;box-shadow:none}
.btn-ghost:hover{background:#ffffff24;transform:translateY(-2px)}
.btn-sm{padding:.72em 1.15em;font-size:.92rem}
.btn-lg{padding:1.05em 1.9em;font-size:1.1rem}
.btn .ico-ext{width:.85em;height:.85em;opacity:.75}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.chips li{display:inline-flex;align-items:center;gap:.45em;padding:.42em .85em;border-radius:var(--radius-pill);
  background:#ffffff14;border:1px solid #ffffff2b;color:#fff;font-size:.84rem;font-weight:700;line-height:1.2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.chips .ico{width:1em;height:1em;color:var(--yellow)}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:100;background:#0f151bd9;border-bottom:1px solid #ffffff14;
  -webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);transition:box-shadow .2s ease,background-color .2s ease}
.site-head.is-scrolled{background:#0d1316f2;box-shadow:0 10px 30px #00000059}
.head-inner{display:flex;align-items:center;gap:18px;min-height:var(--head-h)}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:900;letter-spacing:-.02em;line-height:1}
.brand-ball{width:44px;height:44px;filter:drop-shadow(0 3px 6px #00000059);transition:transform .25s ease}
.brand:hover .brand-ball{transform:rotate(-12deg) scale(1.05)}
.brand-name{font-size:1.28rem;white-space:nowrap}
.brand-name-accent{color:var(--blue-2)}
.brand-name-site{font-family:var(--font-pixel);font-size:.48rem;font-weight:400;color:var(--yellow);letter-spacing:.02em;
  display:inline-block;vertical-align:.5em;margin-left:.5em;text-transform:uppercase}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;align-items:center;gap:1.6rem}
.site-nav a{font-size:.95rem;font-weight:700;color:#c9d1e0;padding:.35rem 0;position:relative;transition:color .15s ease}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.site-nav a:hover{color:#fff}
.site-nav a:hover::after{transform:scaleX(1)}
.head-cta{margin-left:.4rem}
.head-cta .ico-ext{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(2rem,4.4vw,3.4rem) 0 clamp(3.2rem,6.4vw,5.2rem);
  background:
    radial-gradient(820px 440px at 84% 12%,#e8343a47,transparent 64%),
    radial-gradient(640px 400px at 6% 96%,#ffcb0526,transparent 62%),
    radial-gradient(1000px 620px at 52% 118%,#7b47b52e,transparent 72%),
    linear-gradient(158deg,#0a0f12 0%,#101720 34%,#1a2130 62%,#2a151d 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--pixel-grid);background-size:26px 26px;opacity:.55;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 35%,transparent 78%);mask-image:radial-gradient(120% 90% at 50% 30%,#000 35%,transparent 78%)}
.hero-wedge{position:absolute;z-index:-1;top:-10%;right:-16%;width:62%;height:124%;pointer-events:none;
  background:linear-gradient(118deg,#b8242a 0%,#e8343a 46%,#d22a30 100%);
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);transform:skewX(-6deg);opacity:.94}
.hero-wedge::before{content:"";position:absolute;left:2.5%;top:0;bottom:0;width:26px;background:linear-gradient(180deg,var(--yellow),#ffb300);box-shadow:0 0 42px #ffcb0559}
.hero-wedge::after{content:"";position:absolute;inset:0;background:var(--stripes);opacity:.22}
.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-deco .deco{position:absolute;opacity:.9}
.deco-star1{left:4%;top:22%;width:30px;height:30px;color:var(--yellow);animation:float 7s ease-in-out infinite}
.deco-star2{right:19%;top:6%;width:20px;height:20px;color:var(--pink);animation:float 9s ease-in-out infinite reverse}
.deco-spark1{right:5%;top:31%;width:26px;height:26px;color:#fff;animation:float 8s ease-in-out infinite}
.deco-heart1{left:7%;bottom:9%;width:22px;height:22px;color:var(--green);animation:float 10s ease-in-out infinite reverse}
.deco-ball1{right:11%;bottom:12%;width:42px;height:42px;color:var(--yellow);opacity:.6;animation:float 11s ease-in-out infinite}
@media(min-width:901px){.hero-deco .deco{opacity:1}}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,5vw,4.2rem);align-items:center}
.hero-copy{max-width:620px}
.eyebrow-pill{display:inline-flex;align-items:center;gap:.6em;padding:.5em .95em;border-radius:var(--radius-pill);
  background:#ffffff12;border:1px solid #ffffff2e;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f2f5fb}
.eyebrow-pill .ico{width:1.15em;height:1.15em;color:var(--yellow)}
.hero-title{font-size:clamp(1.95rem,3.55vw,3.2rem);font-weight:900;line-height:1.03;letter-spacing:-.025em;margin-top:1.1rem;
  text-shadow:0 3px 0 #8f161b,0 10px 34px #00000073}
.hero-title .hl{color:var(--yellow-2)}
.hero-lead{margin-top:1.15rem;font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.62;color:#e3e8f2;max-width:56ch}
.hero-lead strong{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin-top:1.35rem;font-size:.86rem;color:#b9c2d4;font-weight:600}
.hero-trust .ico{width:1em;height:1em;color:var(--yellow)}
.hero-trust a{color:#fff;text-decoration:underline;text-decoration-color:#ffffff4d;text-underline-offset:3px}
.hero-trust a:hover{text-decoration-color:var(--yellow)}

.hero-art{position:relative;display:flex;justify-content:center}
.hero-card{position:relative;width:min(100%,520px);border-radius:20px;background:#0f151b;border:1px solid #ffffff26;
  box-shadow:0 6px 0 #00000066,0 30px 60px #00000073;transform:rotate(-1.6deg);transition:transform .3s ease}
.hero-card:hover{transform:rotate(0) translateY(-4px)}
.hero-card-bar{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border-bottom:1px solid #ffffff14;border-radius:20px 20px 0 0;
  background:#ffffff08;font-family:var(--font-pixel);font-size:.5rem;letter-spacing:.04em;color:#c9d1e0;text-transform:uppercase}
.hero-card-bar .badge-live{margin-left:auto;color:#0d1316;background:var(--yellow);padding:.4em .6em;border-radius:6px;font-size:.46rem}
.lights{display:inline-flex;gap:4px}
.lights i{width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:12px 0 0 #febc2e,24px 0 0 #28c840;margin-right:16px}
.lights i:last-child{margin-right:0}
.hero-shot{position:relative;display:block;overflow:hidden;border-radius:0;background:#101820}
.hero-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000000 45%,#0d1316c9);pointer-events:none}
.hero-shot img{transition:transform .4s ease}
.hero-card:hover .hero-shot img{transform:scale(1.035)}



.hero-card-foot{display:flex;justify-content:space-between;gap:.4rem;padding:.6rem .9rem;border-top:1px solid #ffffff14;
  font-family:var(--font-pixel);font-size:.46rem;letter-spacing:.05em;text-transform:uppercase;color:#9fb0c6}
.hero-card-foot span{display:inline-flex;align-items:center;gap:.5em}
.hero-card-foot span::before{content:"";width:6px;height:6px;background:var(--yellow);image-rendering:pixelated}
.hero-pill{position:absolute;display:inline-flex;align-items:center;gap:.45em;padding:.55em .95em;border-radius:12px;
  font-weight:800;font-size:.82rem;line-height:1;box-shadow:0 3px 0 #14182838,0 10px 20px #14182833;white-space:nowrap;z-index:2}
.hero-pill .ico{width:1.05em;height:1.05em}
.hero-pill--coop{left:-6%;top:22%;background:var(--paper);color:var(--ink);transform:rotate(-4deg)}
.hero-pill--free{right:-3%;bottom:16%;background:var(--yellow);color:var(--ink);transform:rotate(3deg)}
@media(max-width:640px){.hero-pill--coop{left:-2%;top:8%;font-size:.74rem}.hero-pill--free{right:0;bottom:10%;font-size:.74rem}}

/* ---------- Stats strip ---------- */
.stats-strip{position:relative;z-index:2;background:transparent;padding-bottom:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:-58px;padding-bottom:clamp(1.6rem,4vw,2.8rem)}
.stat-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.1rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.15rem;overflow:hidden}
.stat-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:linear-gradient(90deg,var(--red),var(--yellow))}
.stat-card--2::before{background:linear-gradient(90deg,var(--blue),var(--blue-2))}
.stat-card--3::before{background:linear-gradient(90deg,var(--green),var(--yellow))}
.stat-value{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--red)}
.stat-card--2 .stat-value{color:var(--blue)}
.stat-card--3 .stat-value{color:var(--green-d)}
.stat-label{font-size:.82rem;font-weight:700;color:var(--ink-2);line-height:1.3;margin-top:.3rem}

/* ---------- Sections ---------- */
.section{padding:clamp(3.2rem,7vw,5.8rem) 0;background:var(--paper)}
.section--alt{background:var(--soft)}
.section--alt + .section--alt{padding-top:0}
.section--dark{position:relative;isolation:isolate;overflow:hidden;color:#e8edf6;
  background:radial-gradient(760px 420px at 88% 0%,#e8343a2b,transparent 62%),radial-gradient(620px 360px at 0% 100%,#ffcb051a,transparent 60%),
  linear-gradient(180deg,#101720 0%,#0d1316 100%)}
.section--dark::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--pixel-grid);background-size:26px 26px;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 82%);mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 82%)}
.section-head{max-width:760px;margin-bottom:clamp(1.6rem,3.2vw,2.5rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .section-sub{margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-pixel);font-size:.56rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.9rem;line-height:1.4}
.kicker .ico{width:1.5em;height:1.5em;color:var(--red)}
.section--dark .kicker{color:var(--yellow)}
.section--dark .kicker .ico{color:var(--yellow)}
.section-title{font-size:clamp(1.62rem,3.3vw,2.4rem);font-weight:900;line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.section--dark .section-title{color:#fff}
.section-sub{margin-top:.85rem;font-size:1.04rem;color:var(--ink-2);max-width:66ch}
.section--dark .section-sub{color:#b9c2d4}
.section-sub a{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.section--dark .section-sub a{color:var(--blue-2)}
.subsection-title{font-size:1.25rem;font-weight:900;letter-spacing:-.01em;margin:2.2rem 0 1rem;color:var(--ink)}
.section--dark .subsection-title{color:#fff}
.updated-line{margin-top:1.4rem;font-size:.84rem;color:var(--mute);font-weight:600}
.section--dark .updated-line{color:#8f9ab0}

/* ---------- Panels / prose ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,2.6vw,2rem);box-shadow:var(--shadow-sm)}
.panel .subsection-title:first-child{margin-top:0}
.note-line{margin:.9rem 0 0;font-size:.8rem;line-height:1.5;color:var(--mute);font-weight:600}
.section--dark .note-line{color:#8f9ab0}
.section--dark .panel{background:#151d29;border-color:#ffffff1a;box-shadow:0 3px 0 #00000040,0 18px 34px #00000059}
.prose p{font-size:1.03rem;line-height:1.72;color:var(--ink-2)}
.prose p + p{margin-top:1rem}
.prose ul,.prose ol{margin:.9rem 0 0;padding-left:1.35rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:.45rem;font-size:1rem;line-height:1.65;color:var(--ink-2)}
.prose li::marker{color:var(--red);font-weight:700}
.prose h3 + ul,.prose h3 + ol{margin-top:.8rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--blue-d)}
.section--dark .prose p{color:#c9d3e4}
.section--dark .prose strong{color:#fff}
.section--dark .prose a{color:var(--blue-2)}

/* ---------- Cards ---------- */
.card-grid{display:grid;gap:16px;margin-top:clamp(1.2rem,2.6vw,1.9rem)}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps{grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:step}
.pillar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tips-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.2rem;
  box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d8deea}
.card-title{font-size:1.06rem;font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.card-text{margin-top:.5rem;font-size:.94rem;line-height:1.62;color:var(--ink-2)}
.card-text a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.card .ico{color:var(--red)}
.section--dark .card{background:#151d29;border-color:#ffffff1a;box-shadow:0 3px 0 #00000040,0 14px 30px #0000004d}
.section--dark .card:hover{border-color:#ffffff33}
.section--dark .card-title{color:#fff}
.section--dark .card-text{color:#b6c1d3}
.section--dark .card .ico{color:var(--yellow)}
/* step cards */
.step{border-top:5px solid var(--red);padding-top:1.4rem}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-19px;left:16px;display:grid;place-items:center;
  width:36px;height:36px;border-radius:12px;background:var(--red);color:#fff;font-family:var(--font-pixel);font-size:.68rem;
  box-shadow:0 3px 0 var(--red-d)}
.steps .step:nth-child(2){border-top-color:var(--orange)}.steps .step:nth-child(2)::before{background:var(--orange);box-shadow:0 3px 0 #b4511a}
.steps .step:nth-child(3){border-top-color:var(--yellow)}.steps .step:nth-child(3)::before{background:var(--yellow);color:var(--ink);box-shadow:0 3px 0 var(--yellow-d)}
.steps .step:nth-child(4){border-top-color:var(--green)}.steps .step:nth-child(4)::before{background:var(--green);box-shadow:0 3px 0 var(--green-d)}
.steps .step:nth-child(5){border-top-color:var(--blue)}.steps .step:nth-child(5)::before{background:var(--blue);box-shadow:0 3px 0 var(--blue-d)}
/* pillar cards */
.pillar-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pillar-shot{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;image-rendering:pixelated;border-bottom:1px solid var(--line);background:#dce8d2}
.pillar-card .card-title,.pillar-card .card-text{padding-inline:1.15rem}
.pillar-card .card-title{margin-top:1rem;display:flex;align-items:center;gap:.5em}
.pillar-card .card-title::before{content:"";width:9px;height:9px;background:var(--red);box-shadow:0 0 0 3px #e8343a26}
.pillar-card .card-text{padding-bottom:1.2rem}
/* haven: 4 cards in one row on desktop */
#haven .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1080px){#haven .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#haven .feature-grid{grid-template-columns:1fr}}
/* tips cards get a ball bullet */
.tip-card .card-title{display:flex;align-items:flex-start;gap:.55em}
.tip-card .card-title::before{content:"";flex:none;width:12px;height:12px;margin-top:.32em;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff 0 22%,var(--ink) 24% 38%,var(--red) 40% 100%);box-shadow:0 0 0 2px var(--ink)}
/* save steps */
.save-steps{list-style:none;counter-reset:savestep;display:grid;gap:.7rem;margin-top:1.2rem}
.save-steps li{position:relative;padding:.85rem 1rem .85rem 3.2rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.96rem;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.save-steps li::before{counter-increment:savestep;content:counter(savestep);position:absolute;left:.9rem;top:50%;translate:0 -50%;
  display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--yellow);color:var(--ink);
  font-family:var(--font-pixel);font-size:.56rem;box-shadow:0 2px 0 var(--yellow-d)}
.section--dark .save-steps li{background:#151d29;border-color:#ffffff1a;color:#c9d3e4}
.save-steps.card{background:transparent;border:0;box-shadow:none;padding:0}

/* ---------- Game / play ---------- */
.play-section{background:
  radial-gradient(700px 320px at 50% 0%,#e8343a14,transparent 65%),
  linear-gradient(180deg,var(--soft) 0%,var(--soft) 55%,#eef0f5 100%)}
.game-shell{margin:clamp(1.6rem,3vw,2.4rem) auto 0;max-width:980px;border-radius:var(--radius-lg);padding:10px;
  background:linear-gradient(160deg,#2a3140,#12181f 48%,#1d2230);border:1px solid #ffffff1a;
  box-shadow:0 5px 0 #0b1015,0 34px 70px #1418284d,0 0 0 1px #ffffff0a inset}
.game-bar{display:flex;align-items:center;gap:.7rem;padding:.55rem .85rem .7rem;color:#c9d1e0}
.game-title{display:flex;align-items:baseline;gap:.55em;font-weight:800;color:#fff;font-size:.98rem;letter-spacing:-.01em}
.game-title b{font-family:var(--font-pixel);font-size:.48rem;font-weight:400;color:var(--yellow);text-transform:uppercase;letter-spacing:.03em}
.game-actions{margin-left:auto;display:flex;align-items:center;gap:.45rem}
.pill-btn{display:inline-flex;align-items:center;gap:.45em;padding:.5em .85em;border-radius:var(--radius-pill);
  background:#ffffff14;border:1px solid #ffffff26;color:#e8edf6;font-size:.8rem;font-weight:800;line-height:1;cursor:pointer;
  transition:background-color .15s ease,transform .15s ease;white-space:nowrap}
.pill-btn:hover{background:#ffffff24;transform:translateY(-1px)}
.pill-btn .ico{width:1.05em;height:1.05em}
.pill-btn--ghost{background:transparent}
.pill-btn[hidden]{display:none}
.game-stage{position:relative;border-radius:var(--radius);overflow:hidden;background:#0a0f13;
  box-shadow:0 0 0 1px #000000,0 0 0 2px #ffffff0f inset}
.game-stage::before{content:"";display:block;padding-top:56.25%}
.stage-frame{position:absolute;inset:0}
.stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  text-align:center;color:#fff;text-decoration:none;z-index:3}
.play-overlay-tint{position:absolute;inset:0;background:
  radial-gradient(520px 260px at 50% 46%,#0d131680,transparent 72%),
  linear-gradient(180deg,#0d131626 0%,#0d1316a6 72%,#0d1316e6 100%)}
.play-cta{position:relative;z-index:1;display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;border-radius:20px;
  background:#0d1316b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #ffffff26;
  box-shadow:0 4px 0 #00000059,0 18px 40px #00000073;transition:transform .18s ease,background-color .18s ease}
.play-overlay:hover .play-cta{transform:translateY(-2px);background:#0d1316d9}
.play-orb{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;flex:none;
  border:3px solid #ffffffd9;box-shadow:0 4px 0 var(--red-d),0 10px 22px #00000066}
.play-orb .ico{width:26px;height:26px;margin-left:3px}
.play-cta-text{display:flex;flex-direction:column;gap:.18rem;text-align:left}
.play-cta-text strong{font-size:1.16rem;font-weight:900;letter-spacing:-.01em}
.play-cta-text small{font-size:.8rem;font-weight:600;color:#c9d3e4}
.play-badges{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.play-badges span{padding:.32em .7em;border-radius:var(--radius-pill);background:#ffffff17;border:1px solid #ffffff2b;
  font-size:.72rem;font-weight:700;color:#e8edf6;letter-spacing:.02em}
.stage-note{position:absolute;left:12px;bottom:10px;z-index:2;font-size:.68rem;font-weight:600;color:#e8edf6;
  background:#0d1316a6;padding:.3em .6em;border-radius:8px;border:1px solid #ffffff1f}
/* loading */
.stage-loading{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:#0d1316f2;color:#fff;text-align:center;padding:1rem}
.stage-loading[hidden]{display:none}
.ball-spinner{width:46px;height:46px;border-radius:50%;border:4px solid #ffffff2e;border-top-color:var(--red);animation:spin 1s linear infinite}
.stage-loading-text{font-weight:800;font-size:1rem}
.stage-loading-sub{font-size:.82rem;color:#b9c2d4;max-width:46ch}
.stage-progress{width:min(260px,70%);height:6px;border-radius:99px;background:#ffffff1f;overflow:hidden}
.stage-progress i{display:block;height:100%;width:38%;background:linear-gradient(90deg,var(--red),var(--yellow));border-radius:99px;animation:progress 1.6s ease-in-out infinite}
.stage-slow{font-size:.8rem;color:#c9d3e4}
.stage-slow a{color:var(--blue-2);text-decoration:underline}
/* frame (only used when frameable:true) */
#gameFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0a0f13;z-index:2}
#gameFrame[hidden]{display:none}
/* blocked panel (iframe policy) */
.stage-blocked{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  background:linear-gradient(180deg,#0d1316e8,#0d1316fa);color:#fff;text-align:center;padding:clamp(1rem,3vw,1.6rem)}
.stage-blocked[hidden]{display:none}
.stage-blocked .stage-error-ball{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--ink);box-shadow:0 3px 0 var(--yellow-d)}
.stage-blocked .stage-error-ball .ico{width:26px;height:26px}
.stage-error-title{font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:900;letter-spacing:-.01em}
.stage-error-text{font-size:.86rem;line-height:1.55;color:#c2cbdb;max-width:52ch}
.stage-error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.3rem}
.stage-error-actions .pill-btn{background:var(--red);border-color:#ffffff33;box-shadow:0 3px 0 var(--red-d);text-decoration:none}
.stage-error-actions .pill-btn:hover{background:var(--red-2)}
.stage-error-actions .pill-btn--ghost{background:#ffffff14;box-shadow:none}
.game-hints{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.1rem}
.hint{display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:var(--radius-pill);background:var(--paper);
  border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.hint-num{display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:var(--yellow);color:var(--ink);
  font-family:var(--font-pixel);font-size:.44rem;box-shadow:0 2px 0 var(--yellow-d)}
.game-note{display:flex;align-items:flex-start;justify-content:center;gap:.55em;max-width:760px;margin:1rem auto 0;
  font-size:.82rem;line-height:1.55;color:var(--ink-2);text-align:center}
.game-note .ico{width:1.15em;height:1.15em;color:var(--red);margin-top:.15em}
.game-note a{color:var(--blue);font-weight:700;text-decoration:underline}
.noscript-note{max-width:680px;margin:1rem auto 0;padding:.9rem 1.1rem;border-radius:var(--radius-sm);background:var(--cream);
  border:1px solid #f0d98a;font-size:.88rem;color:var(--ink);text-align:center}
.noscript-note a{color:var(--blue);font-weight:700;text-decoration:underline}
/* toast */
.toast{position:fixed;left:50%;bottom:22px;translate:-50% 20px;z-index:200;max-width:min(92vw,460px);padding:.8rem 1.1rem;border-radius:14px;
  background:var(--navy);color:#fff;font-size:.86rem;font-weight:600;text-align:center;box-shadow:0 4px 0 #00000059,0 16px 34px #00000066;
  opacity:0;pointer-events:none;transition:opacity .2s ease,translate .2s ease}
.toast.is-visible{opacity:1;translate:-50% 0}

/* ---------- Network promo ---------- */
.promo-section{background:linear-gradient(180deg,#101720,#0d1316);border-top:1px solid #ffffff0f;border-bottom:1px solid #ffffff0f}
.promo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(1.2rem,2.6vw,1.9rem)}
.promo-card{display:flex;flex-direction:column;background:#151d29;border:1px solid #ffffff1a;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 3px 0 #00000040,0 14px 30px #0000004d;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;height:100%}
.promo-card:hover{transform:translateY(-4px);border-color:#ffffff33;box-shadow:0 4px 0 #0000004d,0 20px 40px #00000066}
.promo-shot{display:block;background:#0a0f13;overflow:hidden}
.promo-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .3s ease}
.promo-card:hover .promo-shot img{transform:scale(1.04)}
.promo-body{display:flex;flex-direction:column;gap:.35rem;padding:.85rem .95rem 1rem;flex:1}
.promo-name{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.promo-text{font-size:.82rem;line-height:1.45;color:#aab6c9;flex:1}
.promo-cta{display:inline-flex;align-items:center;gap:.35em;margin-top:.45rem;font-size:.78rem;font-weight:800;color:var(--yellow);text-transform:uppercase;letter-spacing:.06em}
.promo-cta .ico{width:.9em;height:.9em}
.promo-note{margin-top:1.2rem;text-align:center;font-size:.84rem;color:#8f9ab0;font-weight:600}

/* ---------- Controls table ---------- */
.controls-panel{overflow:hidden;padding:0}
.controls-table{width:100%;border-collapse:collapse;font-size:.93rem}
.controls-table thead th{background:var(--navy);color:#fff;font-family:var(--font-pixel);font-weight:400;font-size:.5rem;letter-spacing:.04em;
  text-transform:uppercase;text-align:left;padding:.85rem 1.1rem}
.controls-table tbody tr{border-top:1px solid var(--line)}
.controls-table tbody tr:nth-child(even){background:#fafbfe}
.controls-table tbody th,.controls-table tbody td{padding:.7rem 1.1rem;text-align:left;vertical-align:middle}
.controls-table tbody th{width:38%;font-weight:700;color:var(--ink)}
.controls-table tbody td{color:var(--ink-2)}
.controls-table kbd{display:inline-block;padding:.22em .55em;border-radius:7px;background:var(--paper);border:1px solid #d8deea;
  box-shadow:0 2px 0 #c9d0dd;font-family:var(--font);font-size:.82em;font-weight:800;color:var(--ink);white-space:nowrap}
.controls-table kbd + kbd{margin-left:.3em}
.section--dark .controls-panel{background:#151d29;border-color:#ffffff1a}
.section--dark .controls-table thead th{background:#0d1316;color:var(--yellow)}
.section--dark .controls-table tbody tr{border-color:#ffffff14}
.section--dark .controls-table tbody tr:nth-child(even){background:#1a2331}
.section--dark .controls-table tbody th{color:#fff}
.section--dark .controls-table tbody td{color:#b6c1d3}
.section--dark .controls-table kbd{background:#0d1316;border-color:#ffffff26;box-shadow:0 2px 0 #000000;color:#fff}

/* ---------- FAQ ---------- */
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;margin-top:clamp(1.2rem,2.6vw,1.9rem)}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-item[open]{border-color:#f2c3c5;box-shadow:0 3px 0 #e8343a1f,0 14px 30px #1418281a}
.faq-item summary{position:relative;display:flex;align-items:flex-start;gap:.7em;padding:1rem 2.6rem 1rem 1.1rem;cursor:pointer;
  font-weight:800;font-size:.98rem;line-height:1.35;color:var(--ink);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"";flex:none;width:14px;height:14px;margin-top:.18em;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff 0 22%,var(--ink) 24% 38%,var(--red) 40% 100%);box-shadow:0 0 0 2px var(--ink)}
.faq-item summary::after{content:"+";position:absolute;right:1rem;top:50%;translate:0 -50%;display:grid;place-items:center;
  width:24px;height:24px;border-radius:8px;background:var(--soft-2);color:var(--ink-2);font-weight:800;font-size:1rem;line-height:1;transition:background-color .15s ease,color .15s ease}
.faq-item[open] summary::after{content:"–";background:var(--red);color:#fff}
.faq-item summary:hover::after{background:var(--yellow);color:var(--ink)}
.faq-item p{padding:0 1.15rem 1.1rem;font-size:.92rem;line-height:1.65;color:var(--ink-2)}
.faq-item p a{color:var(--blue);font-weight:700;text-decoration:underline}
.section--dark .faq-item{background:#151d29;border-color:#ffffff1a}
.section--dark .faq-item summary{color:#fff}
.section--dark .faq-item p{color:#b6c1d3}
.section--dark .faq-item summary::after{background:#ffffff14;color:#c9d3e4}

/* ---------- About grid ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:1.4rem}
.panel-title{font-size:1.02rem;font-weight:800;color:var(--ink);margin-bottom:.6rem}
.section--dark .panel-title{color:#fff}
.credits-list{display:grid;gap:.6rem}
.credits-list li{position:relative;padding-left:1.35rem;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.credits-list li::before{content:"";position:absolute;left:0;top:.48em;width:8px;height:8px;border-radius:2px;background:var(--yellow);box-shadow:0 0 0 2px var(--ink)}
.credits-list code{background:var(--soft-2);border-radius:4px;padding:.08em .35em;font-size:.86em}
.disclaimer{font-size:.86rem;line-height:1.6;color:var(--ink-2)}
.section--dark .credits-list li,.section--dark .disclaimer{color:#b6c1d3}

/* ---------- Footer ---------- */
.site-foot{position:relative;color:#c9d3e4;background:linear-gradient(180deg,#0f151b,#0a0f12);border-top:1px solid #ffffff0f;padding:0 0 1.4rem;overflow:hidden}
.site-foot::before{content:"";display:block;height:26px;background:url("/assets/img/pixel-grass.svg") repeat-x center bottom/auto 26px;opacity:.85;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.foot-inner{display:grid;grid-template-columns:1.2fr 1.5fr auto;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:.8rem;max-width:360px}
.brand--foot .brand-name{font-size:1.15rem}
.brand--foot .brand-ball{width:40px;height:40px}
.foot-tagline{font-size:.88rem;line-height:1.6;color:#9fabc0}
.foot-brand .btn{align-self:flex-start}
.foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.foot-heading{font-family:var(--font-pixel);font-size:.5rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--yellow);margin-bottom:.85rem}
.foot-col ul{display:grid;gap:.5rem}
.foot-col a{font-size:.86rem;color:#aab6c9;transition:color .15s ease}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-aside{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.foot-badge{display:inline-flex;align-items:center;gap:.4em;padding:.4em .75em;border-radius:var(--radius-pill);background:#ffffff12;
  border:1px solid #ffffff1f;font-size:.72rem;font-weight:700;color:#dbe3ef}
.foot-badge .ico{width:1em;height:1em;color:var(--yellow)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-top:1.1rem;border-top:1px solid #ffffff12}
.foot-legal{font-size:.76rem;line-height:1.5;color:#8f9ab0;max-width:70ch}
.foot-legal a{color:#c9d3e4;text-decoration:underline;text-underline-offset:2px}
.foot-copy{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:#8f9ab0;white-space:nowrap}

/* ---------- Back to top ---------- */
.to-top{position:fixed;right:18px;bottom:18px;z-index:150;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:2px solid #ffffff33;background:var(--navy);color:#fff;cursor:pointer;box-shadow:0 4px 0 #00000066,0 12px 24px #00000059;
  transition:transform .16s ease,background-color .16s ease;opacity:1}
.to-top[hidden]{display:none}
.to-top:hover{background:var(--red);transform:translateY(-2px)}
.to-top .ico{width:20px;height:20px}

/* ---------- Animations ---------- */
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes progress{0%{transform:translateX(-110%)}60%{transform:translateX(160%)}100%{transform:translateX(260%)}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:2.4rem}
  .hero-copy{max-width:none}
  .hero-art{justify-content:flex-start;padding-left:2%}
  .hero-card{width:min(100%,560px)}
  .hero-wedge{width:74%;right:-24%;opacity:.8}
  .feature-grid,.tips-grid,.pillar-grid,.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr 1fr}
  .foot-aside{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media(max-width:820px){
  .hero-deco{display:none}
  .site-nav{display:none}
  .head-cta{margin-left:auto}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-list{grid-template-columns:1fr}
  .foot-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-inner{grid-template-columns:1fr}
  .foot-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .chips li{font-size:.78rem;padding:.38em .7em}
  .cta-row .btn{flex:1 1 auto;justify-content:center}
  .stat-card{padding:.95rem .9rem}
  .stats-grid{gap:10px;margin-top:-48px}
  .card-grid{gap:12px}
  .feature-grid,.tips-grid,.pillar-grid,.mode-grid,.steps,.promo-grid{grid-template-columns:1fr}
  .play-cta{gap:.7rem;padding:.8rem 1rem;width:calc(100% - 28px);justify-content:center}
  .play-orb{width:46px;height:46px}
  .play-orb .ico{width:22px;height:22px}
  .play-cta-text strong{font-size:1rem}
  .play-cta-text small{font-size:.72rem}
  .play-badges{display:none}
  .game-title b{display:none}
  .game-bar{padding:.5rem .6rem .6rem}
  .game-hints{gap:.45rem}
  .hint{font-size:.74rem;padding:.4em .7em}
  .foot-nav{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .stage-error-text{display:none}
  .controls-table tbody th{width:44%}
  .controls-table tbody th,.controls-table tbody td{padding:.6rem .8rem;font-size:.88rem}
  .controls-table thead th{padding:.7rem .8rem}
  .hero-pill--coop{left:-1%;top:6%}
  .hero-pill--free{right:0;bottom:8%}
  .to-top{right:12px;bottom:12px;width:44px;height:44px}
}
@media(max-width:420px){
  .game-actions .pill-btn span{display:none}
  .game-actions .pill-btn{padding:.5em .6em}
}
@media(max-width:400px){
  .brand-name-site{display:none}
  .btn-lg{padding:.95em 1.3em;font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero-deco .deco{animation:none}
}
@media print{
  .site-head,.game-shell,.to-top,.toast,.promo-section,.hero-art,.skip-link{display:none!important}
  body{background:#fff;color:#000}
}