/* ==========================================================================
   SONIC PICO PARK Guide — site skin
   Palette sampled from the six official screenshots:
     paper #ddf3fe (the sky field, 67-85% of every frame)
     block #0078ba (every platform, wall and block)
     edge  #0b75b3 (the hard drop edge under each block)
     ring  #f2c317 (gold rings)     flag #e5342b (goal plate)
   Zero rounded corners. Hard offset shadows only, no blur.
   ========================================================================== */

@font-face{font-family:'Press Start 2P';src:url(assets/fonts/press-start-2p.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Rubik';src:url(assets/fonts/rubik-400.woff2) format('woff2');font-weight:300 900;font-display:swap}

:root{
  --paper:#ddf3fe; --paper-2:#d0edfd; --paper-3:#c2e6fa; --paper-panel:#e9f8ff; --paper-card:#f0fbff;
  --block:#0078ba; --block-hi:#0069a6; --block-lo:#0b75b3; --block-deep:#06304a;
  --ink:#06304a; --white:#ffffff; --off-white:#e7f8ff;
  --ring:#f2c317; --flag:#e5342b;
  --cat-blue:#8fd6f2; --cat-pink:#f79ac7; --cat-yellow:#f7d757; --cat-green:#a8dfa0;
  --pixel:'Press Start 2P','Courier New',monospace;
  --font:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1180px; --line:3px solid var(--block-lo); --hard:6px 6px 0 var(--block-lo);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.62;
  background-image:
    linear-gradient(45deg,rgba(0,120,186,.05) 25%,transparent 25%,transparent 75%,rgba(0,120,186,.05) 75%),
    linear-gradient(45deg,rgba(0,120,186,.05) 25%,transparent 25%,transparent 75%,rgba(0,120,186,.05) 75%);
  background-size:48px 48px;background-position:0 0,24px 24px}
img{max-width:100%;height:auto;display:block}
a{color:#005c92;text-decoration-color:var(--ring)}
a:hover{color:var(--flag)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--white);padding:8px 12px;z-index:99}

/* ribbon */
.ribbon{background:var(--block-lo);color:var(--off-white);font-family:var(--pixel);font-size:9.5px;letter-spacing:.04em;line-height:2;text-align:center}
.ribbon .wrap{padding:5px 22px}

/* header */
.topbar{background:#0069a6;border-bottom:4px solid var(--block-deep);position:relative;z-index:60}
.topbar::after{content:"";display:block;height:12px;pointer-events:none;background-image:
  linear-gradient(90deg,var(--block-deep) 50%,transparent 50%),
  linear-gradient(90deg,transparent 50%,var(--block-deep) 50%);
  background-size:24px 12px;background-position:0 0,12px 0;opacity:.22}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white);margin-right:auto}
.brand img{width:40px;height:40px;border:2px solid var(--block-deep);background:var(--white);image-rendering:pixelated;flex:0 0 auto}
.brand span{font-family:var(--font);font-weight:700;font-size:17px;letter-spacing:.01em;line-height:1.15}
.brand span::after{content:"unofficial guide";display:block;font-family:var(--pixel);font-size:7.5px;color:var(--ring);letter-spacing:.06em;margin-top:4px}
.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative}
.nav ul{display:flex;align-items:center;gap:3px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav li{position:relative}
.nav a{display:block;color:var(--white);text-decoration:none;font-size:14px;font-weight:500;padding:8px 10px;border:2px solid transparent}
.nav a:hover,.nav li.active > a{background:var(--block-deep);border-color:var(--block-deep);color:var(--ring)}
.nav li.has-kids > a::after{content:" ▾";font-size:10px}
.nav li.has-kids::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:12px;z-index:39}
.nav .kids{display:none;position:absolute;top:100%;left:0;min-width:252px;background:var(--paper-card);border:var(--line);
  box-shadow:var(--hard);padding:6px;flex-direction:column;z-index:80}
.nav li.has-kids:hover .kids,.nav li.has-kids:has(:focus-visible) .kids{display:flex}
.nav .kids li{width:100%}
.nav .kids a{color:var(--ink);font-size:14px;border:0;padding:7px 9px;border-left:4px solid var(--cat-blue)}
.nav .kids a:hover{background:var(--paper);color:var(--block-deep);border-left-color:var(--flag)}
.cta{background:var(--ring);color:var(--block-deep)!important;border:2px solid var(--block-deep)!important;font-weight:700;
  text-decoration:none;padding:8px 13px;white-space:nowrap;box-shadow:3px 3px 0 var(--block-deep)}
.cta:hover{background:var(--white)}
.lang{color:var(--off-white);font-family:var(--pixel);font-size:8.5px;border:2px solid rgba(255,255,255,.45);
  padding:8px 8px;text-decoration:none;white-space:nowrap;line-height:1}
.lang:hover{color:var(--ring);border-color:var(--ring)}
span.lang{cursor:default}

/* hero */
.hero{background:var(--paper);border-bottom:4px solid var(--block-lo);padding:30px 0 26px}
.hero-in{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:38px;align-items:center}
.eyebrow{font-family:var(--pixel);font-size:9.5px;letter-spacing:.07em;color:#00588a;margin:0 0 13px;text-transform:uppercase;line-height:1.8}
.hero h1{font-family:var(--font);font-weight:900;font-size:clamp(36px,5vw,60px);line-height:.95;letter-spacing:-.02em;margin:0 0 15px;color:var(--block);text-transform:uppercase}
.hero h1 .no{display:block;font-family:var(--pixel);font-size:clamp(15px,1.9vw,22px);letter-spacing:.02em;color:var(--flag);margin-top:10px;line-height:1.5}
.lead{font-size:18px;color:var(--ink);margin:0 0 18px;max-width:46ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.btn{display:inline-block;background:var(--block);color:var(--white);text-decoration:none;font-weight:700;font-size:15px;
  padding:11px 17px;border:3px solid var(--block-deep);box-shadow:4px 4px 0 var(--block-deep)}
.btn:hover{background:var(--block-lo);color:var(--white)}
.btn.ghost{background:var(--white);color:var(--block-deep)}
.btn.ghost:hover{background:var(--ring)}
.hero-shot{margin:0}
.hero-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:4px solid var(--block-deep);box-shadow:var(--hard);background:var(--paper)}

/* facts strip */
.facts-strip{background:var(--block-hi);border-bottom:4px solid var(--block-deep)}
.facts{display:flex;flex-wrap:wrap;gap:0}
.fact{flex:1 1 165px;padding:12px 16px;border-right:2px solid rgba(255,255,255,.22);color:var(--white)}
.fact:last-child{border-right:0}
.fact-k{display:block;font-family:var(--pixel);font-size:7.5px;letter-spacing:.07em;color:#fff6d0;text-transform:uppercase;margin-bottom:6px;line-height:1.8}
.fact-v{display:block;font-size:15px;font-weight:700;line-height:1.28}

/* section head */
.section-head{margin:40px 0 16px}
.overline{display:inline-block;font-family:var(--pixel);font-size:8.5px;letter-spacing:.07em;color:var(--block-deep);
  background:var(--ring);padding:6px 8px;text-transform:uppercase;margin-bottom:10px;line-height:1.3}
.section-head h2{font-size:clamp(23px,2.7vw,31px);font-weight:800;color:var(--block);margin:0;letter-spacing:-.01em;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.count-pill{font-family:var(--pixel);font-size:10px;background:var(--white);color:var(--block-deep);
  border:2px solid var(--block-lo);padding:6px 7px;line-height:1}

/* cards */
.grid{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 6px}
.card{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;background:var(--paper-card);border:var(--line);
  box-shadow:var(--hard);text-decoration:none;color:var(--ink);transition:transform .1s steps(2,end)}
.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--block-lo)}
.card .thumb{display:block;position:relative;aspect-ratio:16/9;background:var(--block);overflow:hidden;border-bottom:0;box-shadow:inset 0 -3px 0 var(--block-lo)}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.card .thumb::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.5);pointer-events:none}
.pill-tag{position:absolute;left:8px;bottom:8px;font-family:var(--pixel);font-size:7.5px;background:var(--ring);
  color:var(--block-deep);padding:6px 6px;border:2px solid var(--block-deep);line-height:1;z-index:2}
.card-body{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1 1 auto}
.card-body h3{font-size:17px;font-weight:700;margin:0 0 7px;color:var(--block-deep);line-height:1.28}
.card-body p{font-size:14px;margin:0 0 10px;color:#0d3f5c;line-height:1.5}
.card .go{margin-top:auto;font-family:var(--pixel);font-size:8.5px;color:#b8241c;letter-spacing:.04em;line-height:1.6}
.card .stamp{font-size:11px;color:#2c6c8c;margin-top:6px}
.card.sm{flex:1 1 220px}
.card.sm .card-body h3{font-size:15px;margin:0}

/* article */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:38px;align-items:start;
  margin:26px auto 44px;max-width:var(--maxw);padding:0 22px}
.article-grid > div{min-width:0}
article{background:var(--paper-panel);border:var(--line);box-shadow:var(--hard);padding:30px 32px 26px;min-width:0}
article h1{font-size:clamp(27px,3.4vw,39px);line-height:1.07;font-weight:900;letter-spacing:-.015em;color:var(--block);margin:0 0 12px}
.art-lead{font-size:18px;color:#0d3f5c;margin:0 0 6px;max-width:74ch}
.art-meta{font-family:var(--pixel);font-size:8.5px;color:#2c6c8c;letter-spacing:.03em;line-height:2.2;
  margin:0 0 20px;padding-bottom:14px;border-bottom:3px solid var(--paper-2)}
article h2{font-size:clamp(20px,2.3vw,26px);font-weight:800;color:var(--block);margin:34px 0 12px;line-height:1.2;
  padding-bottom:9px;border-bottom:3px solid var(--ring);scroll-margin-top:20px}
article h2::before{content:"";display:inline-block;width:13px;height:13px;margin-right:9px;vertical-align:-1px;
  background:var(--ring);border:2px solid var(--block-lo)}
article h3{font-size:18px;font-weight:700;color:var(--block-deep);margin:24px 0 8px}
article p{margin:0 0 14px}
article ul,article ol{margin:0 0 16px;padding-left:24px}
article li{margin:0 0 7px}
article ul{list-style:none;padding-left:4px}
article ul > li{position:relative;padding-left:24px}
article ul > li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;
  border:3px solid var(--ring);border-radius:50%;background:transparent}
article ol > li::marker{color:var(--block);font-weight:700}
article strong{color:var(--block-deep)}
article code{font-family:var(--pixel);font-size:11px;background:var(--paper-2);padding:3px 5px;border:1px solid var(--paper-3);overflow-wrap:anywhere;word-break:break-word}
article img.zoom{width:100%;height:auto;margin:8px 0 8px;border:3px solid var(--block-lo);background:var(--paper);cursor:zoom-in}
article blockquote{margin:0 0 16px;padding:12px 16px;background:var(--paper);border-left:6px solid var(--block);font-size:16px;color:#0d3f5c}
article blockquote p:last-child{margin-bottom:0}

/* tables */
.tbl-wrap{overflow-x:auto;margin:0 0 18px;border:var(--line);background:var(--paper-panel);max-width:100%}
table{border-collapse:collapse;width:100%;font-size:15px;table-layout:auto}
thead th{background:var(--block);color:var(--white);text-align:left;font-weight:700;font-size:14px;padding:10px 12px;
  border-right:2px solid var(--block-deep);white-space:normal}
thead th:last-child{border-right:0}
tbody td{padding:9px 12px;border-bottom:2px solid var(--paper-3);border-right:2px solid var(--paper-3);vertical-align:top}
tbody td:last-child{border-right:0}
tbody tr:nth-child(odd){background:var(--paper)}
tbody tr:nth-child(even){background:var(--paper-card)}
table strong,table b{color:var(--block-deep)}
td.num,th.num{font-family:var(--pixel);font-size:11px;white-space:nowrap}

/* quick answer */
.quick-answer{background:var(--paper);border:var(--line);border-left:8px solid var(--ring);padding:14px 16px 12px;margin:0 0 22px}
.qa-stamp{display:inline-block;font-family:var(--pixel);font-size:7.5px;letter-spacing:.06em;background:var(--block);
  color:var(--white);padding:6px 7px;margin-bottom:10px;text-transform:uppercase;line-height:1.3}
.quick-answer p{margin:0;font-size:16px}

/* callout */
.callout{background:var(--paper);border:3px solid var(--block-lo);border-left:8px solid var(--cat-blue);padding:13px 16px;margin:0 0 18px;font-size:16px;overflow-wrap:anywhere}
.callout.note{border-left-color:var(--cat-yellow)}
.callout.warn{border-left-color:var(--flag)}
.callout p:last-child{margin-bottom:0}

/* breadcrumb */
.crumb{font-size:13px;color:#2c6c8c;margin:0 0 12px;font-weight:500}
.crumb a{color:#00507e;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:#2c6c8c;margin:0 4px}
.crumb .here{color:var(--block-deep);font-weight:700}

/* toc */
.toc{position:sticky;top:16px;background:var(--paper-panel);border:var(--line);box-shadow:5px 5px 0 var(--block-lo);padding:14px 14px 12px}
.toc .overline{background:var(--block);color:var(--white);margin-bottom:10px}
.toc-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.toc-list a{font-size:13.5px;color:#0d3f5c;text-decoration:none;padding:6px 7px;border-left:3px solid var(--paper-3);line-height:1.35;display:block}
.toc-list a:hover{background:var(--paper);border-left-color:var(--ring);color:var(--block-deep)}

/* all guides */
.all-guides{margin-top:34px;padding-top:8px;border-top:4px solid var(--paper-2)}
.all-guides .grid{gap:16px}
.more-link{margin:14px 0 0;font-size:14px;font-weight:500}
.more-link a{color:#00507e;text-decoration:none;border-bottom:3px solid var(--ring)}

/* home prose */
.home-body,.home-prose{margin-top:34px}
.home-body h2,.home-prose h2{font-size:clamp(21px,2.4vw,27px);font-weight:800;color:var(--block);margin:34px 0 12px;padding-bottom:9px;border-bottom:3px solid var(--ring)}
.home-body h2::before,.home-prose h2::before{content:"";display:inline-block;width:13px;height:13px;margin-right:9px;background:var(--ring);border:2px solid var(--block-lo)}
.home-body p,.home-prose p{margin:0 0 14px;max-width:92ch}
.home-body ul,.home-prose ul{list-style:none;padding-left:4px;margin:0 0 16px}
.home-body ul > li,.home-prose ul > li{position:relative;padding-left:24px;margin-bottom:7px}
.home-body ul > li::before,.home-prose ul > li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;border:3px solid var(--ring);border-radius:50%}
.home-body ol,.home-prose ol{padding-left:24px;margin:0 0 16px}
.home-body strong,.home-prose strong{color:var(--block-deep)}

/* footer */
.foot{background:var(--block-deep);color:var(--off-white);margin-top:10px;border-top:4px solid var(--block-lo)}
.foot::before{content:"";display:block;height:12px;pointer-events:none;background-image:
  linear-gradient(90deg,var(--block) 50%,transparent 50%),
  linear-gradient(90deg,transparent 50%,var(--block) 50%);
  background-size:24px 12px;background-position:0 0,12px 0;opacity:.5}
.foot .wrap{padding:22px 22px 24px}
.disclaimer{font-size:13px;color:#a9cfe4;max-width:78ch;margin:0 0 12px}
.foot-links{font-size:14px;margin:0 0 10px}
.foot-links a{color:var(--off-white);text-decoration:none;border-bottom:2px solid var(--block)}
.foot-links a:hover{color:var(--ring)}
.foot .muted{font-family:var(--pixel);font-size:8px;color:#6ea6c4;margin:0;line-height:2.2}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(6,48,74,.95);display:flex;align-items:center;justify-content:center;
  cursor:zoom-out;z-index:999;padding:20px}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;border:4px solid var(--white)}

/* ad slots */
.ad-slot:empty{display:none}
.ad-inner{min-height:0}
.ad-slot-native{margin:26px auto;max-width:var(--maxw)}
@media (hover: hover) and (pointer: fine){.ad-slot-mobile{display:none}}

/* responsive */
@media (max-width:980px){
  .article-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{position:static;margin-bottom:22px}
  .toc .toc-list{flex-direction:row;flex-wrap:wrap;gap:6px}
  .toc .toc-list a{border:2px solid var(--paper-3);border-left-width:3px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .hero-shot{order:-1}
  .hero{padding-top:20px}
}
@media (max-width:860px){
  .bar{padding:9px 14px;gap:8px}
  .brand span{font-size:14px}
  .brand img{width:32px;height:32px}
  .nav{width:100%;gap:6px}
  /* one horizontal scrolling row: no 690px tall stacked menu on phones */
  .nav ul{width:100%;gap:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:0 0 auto;min-width:0}
  .nav li.has-kids{flex:0 0 auto}
  .nav a{padding:7px 9px;font-size:13px;white-space:nowrap}
  /* dropdown is hover-only on desktop; on touch it opens as a compact 2-col grid */
  .nav li.has-kids .kids{position:static;display:none;box-shadow:none;border-width:2px;margin-top:4px;
    width:100%;flex-direction:row;flex-wrap:wrap;gap:2px;padding:4px}
  .nav li.has-kids:hover .kids,.nav li.has-kids:has(:focus-visible) .kids{display:flex}
  .nav li.has-kids .kids li{flex:1 1 46%}
  .nav li.has-kids .kids a{padding:6px 7px;font-size:12.5px;border-left-width:3px;white-space:normal}
  .nav .cta,.lang{font-size:8.5px;padding:7px 8px;flex:0 0 auto}
  .card{flex:1 1 100%}
  article{padding:22px 18px 20px}
  .article-grid{padding:0 14px}
}
@media (max-width:1100px){
  thead th{white-space:normal}
  tbody td{overflow-wrap:anywhere}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 14px}
  .tbl-wrap table{min-width:0}
  article table{font-size:13.5px}
  article thead th,article tbody td{padding:7px 8px}
  .fact{flex:1 1 50%;border-right:0;border-bottom:2px solid rgba(255,255,255,.18)}
  .hero h1{font-size:32px}
  .lead{font-size:16px}
  article h1{font-size:25px}
  thead th,tbody td{padding:8px 9px;font-size:14px}
  .home-body p,.home-prose p{max-width:100%}
}

/* pico checker divider */
.pico-div{height:14px;margin:30px 0;background-image:
  linear-gradient(90deg,var(--block) 50%,transparent 50%),
  linear-gradient(90deg,transparent 50%,var(--block) 50%);
  background-size:28px 14px;background-position:0 0,14px 0;opacity:.28}

/* stat chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.chip{border:3px solid var(--block-lo);background:var(--paper-card);padding:9px 12px;box-shadow:4px 4px 0 var(--paper-3);min-width:96px}
.chip b{display:block;font-family:var(--pixel);font-size:14px;color:var(--block);line-height:1.6}
.chip span{font-size:10.5px;font-family:var(--font);color:#2c6c8c;letter-spacing:.02em}
.chip.c1{border-top-color:var(--cat-blue);border-top-width:8px}
.chip.c2{border-top-color:var(--cat-pink);border-top-width:8px}
.chip.c3{border-top-color:var(--cat-yellow);border-top-width:8px}
.chip.c4{border-top-color:var(--cat-green);border-top-width:8px}
.ad-banner-box{min-height:50px;display:flex;justify-content:center;max-width:100%;overflow:hidden}