/* Spore Cellar website: the game's own look, from the logo, the stone frames and the pixel fonts.
   Fonts and frame art are the game's own, copied into /assets/game/ by scripts/build-site.js. */
@font-face{font-family:'Spore Cellar';font-style:normal;font-weight:400;font-display:block;src:url('/assets/game/fonts/spore-cellar.woff2') format('woff2')}
@font-face{font-family:'Spore Cellar Small';font-style:normal;font-weight:400;font-display:block;src:url('/assets/game/fonts/spore-cellar-small.woff2') format('woff2')}
@font-face{font-family:'Rethink Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/game/fonts/rethink-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Rethink Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/game/fonts/rethink-sans-latin-700-normal.woff2') format('woff2')}

:root{
  --soil:#1e1712; --bench:#2a2019; --bench-2:#352920; --bed:#18120e; --line:#4b3a2c;
  --ink:#f2e6d2; --ink-dim:#b4a088; --ink-faint:#7d6c5a;
  --spore:#f0ad5d; --spore-deep:#c97e33; --lichen:#a8bd86; --glow:#9fe3d0;
  --f-px:'Spore Cellar', 'Rethink Sans', sans-serif;
  --f-px-small:'Spore Cellar Small', 'Spore Cellar', sans-serif;
  --f-body:'Rethink Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.spore-page{margin:0;min-height:100vh;background:var(--soil);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.spore-page a{color:var(--spore)}
.spore-page a:hover{color:#ffc684}
.spore-page a:focus-visible,.spore-page button:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}

.spore-wrap{max-width:820px;margin:0 auto;padding:28px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px))}
.spore-wrap.spore-wide{max-width:1180px}

/* Header: the game logo, crisp pixels, and the menu under it */
.spore-head{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:22px;text-align:center}
.spore-head a{display:block;line-height:0}
.spore-head img{width:min(460px,100%);height:auto;image-rendering:pixelated}
.spore-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.spore-nav a{display:inline;line-height:1.6;font:400 14px/1.6 var(--f-px-small);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.spore-nav a:hover{color:var(--spore)}
.spore-nav a[aria-current="page"]{color:var(--spore);border-bottom-color:var(--spore-deep)}

/* Stone-framed panel, the same 9-slice frame as the game's panels */
.spore-panel{border:26px solid transparent;border-image:url('/assets/game/images/ui/stone-frame.png') 78 round;image-rendering:pixelated;background:var(--bench);background-clip:padding-box;padding:20px 22px}
.spore-panel h1{margin:0 0 4px;font:400 32px/1.25 var(--f-px);color:var(--spore);text-shadow:3px 3px 0 #0e0c12}
.spore-panel .spore-updated{margin:0 0 18px;font:400 12px/1.4 var(--f-px-small);color:var(--ink-faint)}
.spore-section{margin:0 0 22px}
.spore-section:last-child{margin-bottom:0}
.spore-section h2{margin:0 0 8px;font:400 24px/1.25 var(--f-px);color:var(--ink)}
.spore-section p{margin:0 0 10px;color:var(--ink-dim)}
.spore-section ul{margin:0 0 10px;padding-left:22px;color:var(--ink-dim)}
.spore-section li{margin-bottom:6px}
.spore-section strong{color:var(--ink)}
.spore-section address{margin:0 0 10px;font-style:normal;color:var(--ink-dim);background:var(--bed);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.spore-section code{font:400 14px var(--f-mono);background:var(--bed);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink);overflow-wrap:anywhere}

/* Footer */
.spore-foot{margin-top:22px;text-align:center;font:400 12px/1.8 var(--f-px-small);color:var(--ink-faint)}
.spore-foot a{color:var(--ink-dim);text-decoration:none;margin:0 6px}
.spore-foot a:hover{color:var(--spore)}

@media (max-width:560px){
  .spore-panel{padding:14px 12px;border-width:18px}
  .spore-panel h1{font-size:24px}
  .spore-section h2{font-size:16px}
  body.spore-page{font-size:16px}
}

/* ---------- Home page ---------- */
.spore-hero{text-align:center;max-width:760px;margin:0 auto 26px}
.spore-hero h1{margin:6px 0 6px;font:400 40px/1.2 var(--f-px);color:var(--spore);text-shadow:4px 4px 0 #0e0c12;text-wrap:balance}
.spore-hero .spore-lead{margin:0 0 14px;font:400 24px/1.3 var(--f-px);color:var(--ink)}
.spore-hero p{color:var(--ink-dim);margin:0 0 18px}
.spore-hero .spore-price{margin:16px 0 0;font:400 12px/1.6 var(--f-px-small);color:var(--lichen);letter-spacing:.04em;text-transform:uppercase}

/* Store buttons: the game's own pixel button art (normal, hover, pressed) */
.spore-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.spore-store{display:flex;flex-direction:column;align-items:center;justify-content:center;width:236px;aspect-ratio:352/68;padding:0 18px 3px;background:url('/assets/game/images/ui/btn_blank_normal.png') center/100% 100% no-repeat;image-rendering:pixelated;text-decoration:none;color:#e2d6be}
a.spore-store:hover{background-image:url('/assets/game/images/ui/btn_blank_hover.png');color:#f6eedc}
a.spore-store:active{background-image:url('/assets/game/images/ui/btn_blank_pressed.png');padding-top:3px;padding-bottom:0}
.spore-store-name{font:400 16px/1.1 var(--f-px);text-transform:uppercase;text-shadow:2px 2px 0 #0e0c12}
.spore-store-sub{font:400 12px/1.2 var(--f-px-small);color:#8c86a0;margin-top:3px}
.spore-store.is-soon{filter:grayscale(.5) brightness(.75)}

.spore-shot-main{margin:0 0 26px}
.spore-shot-main img,.spore-gallery img,.spore-shots img{display:block;width:100%;height:auto;border-radius:12px;border:2px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55)}

.spore-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:26px}
.spore-feature h2{margin:0 0 8px;font:400 24px/1.25 var(--f-px);color:var(--spore)}
.spore-feature ul{margin:0;padding-left:20px;color:var(--ink-dim)}
.spore-feature li{margin-bottom:6px}

/* The shelf of all 16 fungi on the home page */
.spore-shelf{margin-bottom:26px}
.spore-shelf h2{margin:0 0 4px;font:400 24px/1.25 var(--f-px);color:var(--spore)}
.spore-shelf > p{margin:0 0 14px;color:var(--ink-dim)}
.spore-shelf ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.spore-shelf li{display:grid;justify-items:center;gap:4px;text-align:center;font:400 12px/1.25 var(--f-px-small);color:var(--ink-dim)}
.spore-shelf img{width:100%;max-width:96px;height:auto;aspect-ratio:1;background:var(--bed);border:1px solid var(--line);border-radius:10px;padding:4px}

.spore-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:26px}
.spore-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}
.spore-platforms{text-align:center}
.spore-platforms h2{margin:0 0 8px;font:400 24px/1.25 var(--f-px);color:var(--ink)}
.spore-platforms p{color:var(--ink-dim);margin:0 0 8px}
.spore-small{font-size:15px}

@media (max-width:900px){
  .spore-features{grid-template-columns:minmax(0,1fr)}
  .spore-gallery{grid-template-columns:minmax(0,1fr)}
  .spore-shelf ul{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .spore-hero h1{font-size:32px}
  .spore-hero .spore-lead{font-size:16px}
  .spore-store{width:100%;max-width:300px}
}

/* Quick start guide: numbered steps with pixel numerals */
.spore-guide{margin-bottom:26px}
.spore-guide h2{margin:0 0 12px;font:400 24px/1.25 var(--f-px);color:var(--spore)}
.spore-guide ol{list-style:none;counter-reset:step;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.spore-guide li{counter-increment:step;position:relative;padding-left:44px;color:var(--ink-dim)}
.spore-guide li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;background:var(--bed);border:2px solid var(--line);border-radius:6px;font:400 16px/1 var(--f-px);color:var(--spore)}
.spore-guide strong{color:var(--ink)}
@media (max-width:900px){.spore-guide ol{grid-template-columns:minmax(0,1fr)}}

/* ---------- Press page ---------- */
.spore-press{display:grid;gap:26px}
.spore-press .spore-panel h2{margin:0 0 6px;font:400 26px/1.25 var(--f-px);color:var(--spore);text-shadow:3px 3px 0 #0e0c12}
.spore-press .spore-panel > p{margin:0 0 14px;color:var(--ink-dim);max-width:70ch}
/* A note under a bed of fungi spans the full width of the cards above it */
.spore-press .spore-panel > p.spore-note{margin:16px 0 0;max-width:none}
.spore-eyebrow{margin:0 0 4px;font:400 12px/1.4 var(--f-px-small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.spore-pitch{font-size:18px;color:var(--ink);max-width:66ch;margin:0 auto;text-align:center}

/* Fact sheet: the game's ledger */
/* Four columns on a wide screen (two full rows of four facts), two on a tablet, one on a phone */
.spore-facts{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border:1px solid var(--line);border-radius:12px;background:var(--bed);overflow:hidden}
@media (min-width:600px){.spore-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1150px){.spore-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.spore-fact a[href^="mailto:"]{white-space:nowrap}
.spore-fact{padding:12px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:2px;min-width:0;margin:0 -1px -1px 0}
.spore-fact dt{font:400 12px/1.4 var(--f-px-small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.spore-fact dd{margin:0;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.spore-fact dd.is-soon{color:var(--ink-dim);font-weight:400}

/* Beds of fungi with their rules */
.spore-fungi{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.spore-fungus{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;background:var(--bed);border:1px solid var(--line);border-radius:12px;padding:8px 12px 8px 8px}
.spore-fungus img{width:64px;height:64px;border-radius:8px;background:#241b14}
.spore-fungus h3{margin:0;font:700 16px/1.3 var(--f-body);color:var(--ink)}
.spore-fungus p{margin:2px 0 0;font-size:15px;line-height:1.45;color:var(--ink-dim)}
.spore-note{margin:14px 0 0;border-left:3px solid var(--glow);padding:10px 14px;background:rgba(159,227,208,.06);border-radius:0 8px 8px 0;color:var(--ink-dim);max-width:72ch}

.spore-numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.spore-num{display:grid;gap:2px;padding:12px 14px;border-top:2px solid var(--line)}
.spore-num b{font:400 28px/1.1 var(--f-px);color:var(--spore);font-variant-numeric:tabular-nums}
.spore-num span{color:var(--ink-dim);font-size:15px;line-height:1.35}

.spore-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.spore-cols > div{display:grid;gap:12px;align-content:start;min-width:0}
.spore-moments{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--ink-dim)}
.spore-moments li{padding-left:22px;position:relative}
.spore-moments li::before{content:'';position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--spore);box-shadow:0 0 8px rgba(240,173,93,.6)}
.spore-moments strong{color:var(--ink)}
.spore-keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}
.spore-keys dt{font:400 14px/1.7 var(--f-mono);color:var(--glow);white-space:nowrap}
.spore-keys dd{margin:0;color:var(--ink-dim)}
.spore-keys kbd{font:400 13px var(--f-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--bench-2);color:var(--ink)}

.spore-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.spore-shots figure,.spore-art figure{margin:0;display:grid;gap:6px;align-content:start}
.spore-shots figcaption,.spore-art figcaption{font-size:14px;color:var(--ink-dim)}
.spore-art{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.spore-art .frame{display:grid;place-items:center;aspect-ratio:16/9;max-width:100%;background:var(--bed);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.spore-art .frame img{max-height:88%;width:auto;max-width:90%}

@media (max-width:560px){
  .spore-press .spore-panel h2{font-size:20px}
  .spore-keys{grid-template-columns:minmax(0,1fr)}
  .spore-keys dt{white-space:normal}
}

/* Email preferences: the game's pixel button as a form button */
.spore-form{margin:16px 0 0}
.spore-form .spore-store{width:300px;max-width:100%}
button.spore-store{border:0;cursor:pointer;font:inherit;background-color:transparent}
button.spore-store:hover{background-image:url('/assets/game/images/ui/btn_blank_hover.png');color:#f6eedc}
button.spore-store:active{background-image:url('/assets/game/images/ui/btn_blank_pressed.png');padding-top:3px;padding-bottom:0}