/* Burroughs Crater: a Mars dusk outside, parchment panels like the game's menus inside. */
@font-face { font-family: "PixelOp"; src: url("/static/fonts/PixelOperator8.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PixelOp"; src: url("/static/fonts/PixelOperator8-Bold.ttf") format("truetype"); font-weight: bold; font-display: swap; }

:root {
  --night: #1f1118;
  --dusk: #3a1d24;
  --rust: #b8502a;
  --ember: #e8782e;
  --sand: #f6c27a;
  --parch: #f4e6cb;
  --parch-2: #ead6b0;
  --ink: #2b1b14;
  --ink-2: #6a4e3e;
  --line: #c9a97c;
  --link: #a33e14;
  --love: #b8285a;
  --like: #2f7d4f;
  --neutral: #6a5a4a;
  --dislike: #5a5a8a;
  --pixel: "PixelOp", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, var(--dusk) 0, var(--night) 640px) no-repeat, var(--night);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img.pix, .ico, .big, .portrait, .sprite, .stage, .hero-logo, .brand img, .card img, .bday img, .gallery img { image-rendering: pixelated; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rust); }
h1, h2, h3, h4 { font-family: var(--pixel); font-weight: bold; line-height: 1.25; letter-spacing: .02em; }
h1 { font-size: 1.6rem; margin: .2em 0 .5em; }
h2 { font-size: 1.12rem; margin: 1.6em 0 .5em; padding-bottom: .25em; border-bottom: 2px solid var(--line); }
.muted { color: var(--ink-2); }
.lede { font-size: 1.05rem; }

/* header */
header.top { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: rgba(20, 8, 12, .55); border-bottom: 2px solid #000; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(4px); }
.brand img { height: 36px; display: block; }
.topnav { display: flex; align-items: center; gap: 18px; flex: 1; }
.topnav > a { color: var(--sand); font-family: var(--pixel); text-decoration: none; font-size: .95rem; }
.topnav > a:hover { color: #fff; }
.search { margin-left: auto; position: relative; }
.search input { width: 260px; padding: 7px 10px; border: 2px solid #000; border-radius: 4px; background: var(--parch); font: inherit; color: var(--ink); }
.results { position: absolute; right: 0; top: 42px; width: 320px; max-height: 60vh; overflow: auto; background: var(--parch); border: 2px solid #000; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.results a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--parch-2); }
.results a:hover, .results a.on { background: var(--parch-2); }
.results img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.results small { margin-left: auto; color: var(--ink-2); }

/* layout */
.wrap { max-width: 1240px; margin: 0 auto; padding: 24px; display: flex; gap: 24px; align-items: flex-start; }
body.home .wrap { display: block; max-width: 1100px; }
main { flex: 1; min-width: 0; }
body.wiki main { background: var(--parch); border: 2px solid #000; border-radius: 6px; padding: 24px 32px 32px; box-shadow: 0 0 0 4px var(--parch-2) inset, 0 10px 40px rgba(0,0,0,.35); }
nav.side { width: 200px; flex: none; background: var(--parch); border: 2px solid #000; border-radius: 6px; padding: 14px 16px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; }
nav.side h4 { margin: 14px 0 6px; font-size: .85rem; color: var(--ink-2); }
nav.side ul { list-style: none; margin: 0; padding: 0; }
nav.side li a { display: block; padding: 2px 0; text-decoration: none; }
.side-home { font-family: var(--pixel); font-weight: bold; text-decoration: none; }
.crumbs { font-size: .85rem; color: var(--ink-2); margin-bottom: 4px; }
footer { color: #b89a86; text-align: center; font-size: .85rem; padding: 24px; }
footer a { color: var(--sand); }
footer p { margin: 4px 0; }

/* infobox */
.infobox { float: right; width: 300px; margin: 0 0 16px 24px; background: var(--parch-2); border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; }
.ib-title { background: var(--rust); color: #fff4e0; font-family: var(--pixel); font-weight: bold; text-align: center; padding: 8px; }
.ib-img { text-align: center; padding: 14px; background: radial-gradient(circle, #f9edd4 0, var(--parch-2) 70%); }
.ib-img .big { width: 96px; height: 96px; object-fit: contain; }
.ib-img .portrait { width: 160px; height: auto; }
.ib-img .sprite { max-width: 200px; max-height: 160px; min-height: 96px; object-fit: contain; }
.infobox table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.infobox th { text-align: left; width: 38%; padding: 6px 10px; vertical-align: top; color: var(--ink-2); font-weight: 600; border-top: 1px solid var(--line); }
.infobox td { padding: 6px 10px; border-top: 1px solid var(--line); }

/* tables */
.wikitable { border-collapse: collapse; margin: 10px 0 16px; font-size: .93rem; background: #fbf3e2; max-width: 100%; }
.wikitable th, .wikitable td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: middle; }
.wikitable thead th { background: var(--parch-2); font-weight: 700; position: sticky; top: 62px; }
.wikitable.sortable thead th { cursor: pointer; user-select: none; }
.wikitable.sortable thead th::after { content: " \2195"; color: var(--ink-2); font-size: .8em; }
.wikitable tbody tr:nth-child(even) { background: #f6ead2; }
main { overflow-x: auto; }
.ico { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.ico.mon { width: 32px; height: 32px; }
.taste { display: inline-block; min-width: 72px; padding: 1px 8px; border-radius: 3px; color: #fff; font-weight: 600; font-size: .85rem; text-align: center; }
.taste.loves { background: var(--love); } .taste.likes { background: var(--like); } .taste.neutral { background: var(--neutral); } .taste.dislikes { background: var(--dislike); }
ul.tastes { list-style: none; padding: 0; } ul.tastes li { margin: 6px 0; }
.badge { background: #7a3cc8; color: #fff; border-radius: 3px; padding: 1px 6px; font-size: .8rem; font-weight: 600; }
ul.cols { columns: 3 220px; padding-left: 18px; } ul.cols li { break-inside: avoid; margin: 2px 0; }
.stages { display: flex; gap: 14px; align-items: flex-end; margin: 8px 0; }
.stage { zoom: 2; }

/* villagers */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; background: #fbf3e2; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); text-align: center; font-size: .88rem; }
.card:hover { border-color: var(--rust); transform: translateY(-1px); }
.card img { width: 96px; height: 96px; object-fit: contain; }
.card b { font-family: var(--pixel); font-size: .95rem; }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day { min-height: 74px; background: #fbf3e2; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; font-size: .78rem; display: flex; flex-direction: column; gap: 3px; }
.day .num { font-family: var(--pixel); color: var(--ink-2); }
.fest { background: var(--ember); color: #fff; border-radius: 3px; padding: 1px 4px; text-decoration: none; font-weight: 600; }
.bday { display: flex; align-items: center; gap: 3px; text-decoration: none; }
.bday img { width: 22px; height: 22px; object-fit: contain; }

/* wiki home */
.wiki-hero { background: var(--parch-2); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; margin-bottom: 18px; }
.wiki-hero h1 { margin-top: 0; }
.portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.portal { background: #fbf3e2; border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; }
.portal h3 { margin: 0 0 8px; font-size: 1rem; color: var(--rust); }
.portal ul { margin: 0; padding-left: 18px; }
.portal.wide { margin-top: 14px; }

/* landing page */
body.home main { color: #f4e6cb; }
body.home a { color: var(--sand); }
.hero { position: relative; border: 2px solid #000; border-radius: 8px; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.hero-art { position: absolute; inset: 0; background: url("/static/img/title_sky.png") center / cover no-repeat; image-rendering: pixelated; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,8,12,0) 30%, rgba(20,8,12,.85) 100%); }
.hero-text { position: relative; z-index: 1; padding: 32px 36px; max-width: 720px; }
.hero-logo { width: min(100%, 636px); display: block; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.tag { font-family: var(--pixel); color: var(--sand); letter-spacing: .25em; text-transform: uppercase; margin: 10px 0 14px; }
.pitch { font-size: 1.1rem; color: #fff0dc; text-shadow: 0 1px 2px #000; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.btn { display: inline-block; font-family: var(--pixel); font-weight: bold; padding: 12px 20px; background: var(--ember); color: #2b1208 !important; border: 2px solid #000; border-radius: 4px; text-decoration: none; box-shadow: 0 4px 0 #7a2a12; }
.btn:hover { background: var(--sand); }
.btn-disabled { background: #8a6a5a; color: #f4e6cb !important; box-shadow: 0 4px 0 #4a3028; cursor: default; }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 36px 0; }
.feature { background: rgba(244, 230, 203, .06); border: 1px solid rgba(246, 194, 122, .25); border-radius: 6px; padding: 16px 18px; }
.feature h3 { margin: 0 0 6px; color: var(--sand); font-size: 1rem; }
.feature p { margin: 0; color: #e6d2b8; font-size: .95rem; }
.gallery-wrap h2, .cta-bottom h2 { color: var(--sand); border-color: rgba(246,194,122,.3); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gallery img { width: 100%; display: block; border: 2px solid #000; border-radius: 4px; }
.cta-bottom { text-align: center; margin: 40px 0 10px; }
.narrow { max-width: 760px; margin: 0 auto; background: var(--parch); color: var(--ink); border: 2px solid #000; border-radius: 6px; padding: 24px 32px; }
.narrow a { color: var(--link) !important; }
.facts th { width: 140px; }

@media (max-width: 900px) {
  .wrap { flex-direction: column; padding: 16px; }
  nav.side { position: static; width: 100%; max-height: none; }
  nav.side ul { columns: 2; }
  .infobox { float: none; width: 100%; margin: 0 0 16px; }
  body.wiki main { padding: 18px 16px; }
  header.top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .search input { width: 100%; } .search { flex: 1 1 100%; } .results { width: 100%; }
  .cal { grid-template-columns: repeat(4, 1fr); }
  .hero { min-height: 420px; } .hero-text { padding: 20px; }
}