/* Alpine Village website. Colours come from the game's UI theme (scripts/ui/ui_theme.gd):
   ink, soft ink and cream, with parchment and timber from its panels. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("../fonts/PixelifySans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #3a2620;
  --ink-soft: #86644c;
  --cream: #f8f2e0;
  --parchment: #f1e3c0;
  --parchment-dark: #d8c296;
  --timber: #7a4a2a;
  --timber-dark: #4e2e1c;
  --meadow: #6e9652;
  --meadow-dark: #46663a;
  --forest: #2f4b3a;
  --sky: #9fd0ef;
  --sky-deep: #5d9fd0;
  --snow: #e8eef7;
  --gold: #f2c14e;
  --berry: #c8483a;
  --night: #1f2440;
  --radius: 6px;
  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1160px;
  --shadow: 0 6px 0 rgba(58, 38, 32, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
.px, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--timber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--berry); }
h1, h2, h3, h4 { font-family: var(--pixel); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--cream); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.eyebrow { font-family: var(--pixel); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.4em; display: block; }

/* ---- The game's panel and buttons as nine-patches (12px margins, drawn at 2x) ---- */
.panel {
  border: 24px solid transparent;
  border-image: url("../../game/img/ui/panel.png") 12 fill / 24px / 0 stretch;
  image-rendering: pixelated;
  padding: 4px 8px;
  color: var(--ink);
}
.frame {
  border: 16px solid transparent;
  border-image: url("../../game/img/ui/panel.png") 12 fill / 16px stretch;
  image-rendering: pixelated;
  box-shadow: var(--shadow);
  background: var(--timber);
  border-radius: 2px;
  display: block;
}
.frame img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--pixel); font-size: 1.15rem; font-weight: 600;
  color: var(--cream); text-decoration: none;
  padding: 6px 20px 10px;
  border: 12px solid transparent;
  border-image: url("../../game/img/ui/button.png") 8 fill / 16px stretch;
  image-rendering: pixelated;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer; background: none;
  transition: transform 0.08s;
}
.btn:hover { border-image-source: url("../../game/img/ui/button_hover.png"); color: #fff; transform: translateY(-2px); }
.btn:active { border-image-source: url("../../game/img/ui/button_pressed.png"); transform: translateY(1px); }
.btn.light { border-image-source: url("../../game/img/ui/panel.png"); border-image-slice: 12 fill; color: var(--ink); text-shadow: none; }
.btn.light:hover { color: var(--berry); }
.btn img { width: 24px; }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--timber-dark);
  background-image: linear-gradient(180deg, #5e3a24 0 50%, #553420 50% 100%);
  background-size: 100% 8px;
  border-bottom: 4px solid #2c1a10;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}
.topbar-inner { max-width: var(--max); margin: 0 auto; padding: 6px var(--gutter); display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); font-family: var(--pixel); font-size: 1.45rem; font-weight: 700; text-shadow: 0 2px 0 #2c1a10; }
.brand:hover { color: var(--gold); }
.brand img { height: 38px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--cream); text-decoration: none; font-family: var(--pixel); font-size: 1.15rem; padding: 6px 12px; border-radius: 4px; }
.nav a:hover, .nav a[aria-current] { background: rgba(255, 255, 255, 0.12); color: var(--gold); }
.nav a.nav-cta { background: var(--berry); color: #fff; margin-left: 8px; box-shadow: 0 3px 0 #7d2a20; }
.nav a.nav-cta:hover { background: #d95a4b; color: #fff; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--cream); margin: 4px 0; }
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--timber-dark); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 16px; border-bottom: 4px solid #2c1a10; }
  .nav.open { display: flex; }
  .nav a.nav-cta { margin: 8px 0 0; text-align: center; }
}

/* ---- Hero: the valley of the title screen ---- */
.hero { position: relative; min-height: min(86vh, 760px); display: grid; place-items: center; overflow: hidden; background: #b9def2; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 60px var(--gutter) 150px; }
.logo {
  font-family: var(--pixel); font-weight: 700; color: #fff;
  font-size: clamp(3rem, 10vw, 7.2rem); line-height: 0.95; margin: 0 0 18px;
  text-shadow: 0 4px 0 var(--timber-dark), 4px 0 0 var(--timber-dark), -4px 0 0 var(--timber-dark), 0 -4px 0 var(--timber-dark), 4px 4px 0 var(--timber-dark), -4px 4px 0 var(--timber-dark), 4px -4px 0 var(--timber-dark), -4px -4px 0 var(--timber-dark), 0 12px 0 rgba(44, 26, 16, 0.35);
}
.logo .snowcap { display: inline-block; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.hero .tagline { font-family: var(--pixel); font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: var(--ink); background: rgba(248, 242, 224, 0.92); display: inline-block; padding: 6px 18px; border-radius: 4px; box-shadow: 0 4px 0 rgba(58, 38, 32, 0.25); margin-bottom: 26px; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.seasons { position: absolute; z-index: 3; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(58, 38, 32, 0.78); padding: 6px; border-radius: 8px; }
.seasons button { font-family: var(--pixel); font-size: 1rem; color: var(--cream); background: transparent; border: 0; padding: 6px 12px; border-radius: 5px; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.seasons button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.seasons button:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,0.15); }
.hero-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--timber-dark); z-index: 2; }
@media (max-width: 560px) { .seasons button span.label { display: none; } .seasons button { font-size: 1.3rem; } }

/* ---- Sections ---- */
.section { padding: clamp(56px, 9vw, 110px) 0; position: relative; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head p { font-size: 1.15rem; color: var(--ink-soft); }
.band-parchment { background: var(--parchment); }
.band-meadow { background: var(--meadow); color: var(--cream); }
.band-meadow .eyebrow { color: #dfeccc; }
.band-night { background: var(--night); color: var(--cream); }
.band-night .eyebrow { color: #a9b3e0; }
.edge-top::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; background: inherit; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 24 L0 16 L8 16 L8 8 L16 8 L16 0 L32 0 L32 8 L40 8 L40 16 L48 16 L48 24Z'/%3E%3C/svg%3E") repeat-x bottom / 48px 24px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 24 L0 16 L8 16 L8 8 L16 8 L16 0 L32 0 L32 8 L40 8 L40 16 L48 16 L48 24Z'/%3E%3C/svg%3E") repeat-x bottom / 48px 24px; }

/* Story intro: letter */
.letter { max-width: 720px; margin: 0 auto; transform: rotate(-0.6deg); }
.letter .panel { padding: 18px 28px 8px; font-size: 1.15rem; }
.letter p:first-child::first-letter { font-family: var(--pixel); font-size: 3rem; float: left; line-height: 0.9; margin: 6px 10px 0 0; color: var(--timber); }
.letter .sig { font-family: var(--pixel); text-align: right; color: var(--ink-soft); }

/* Features: alternating rows */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(56px, 8vw, 96px); }
.feature:last-child { margin-bottom: 0; }
.feature.flip > .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media .frame { transform: rotate(-1deg); transition: transform 0.25s; }
.feature.flip .feature-media .frame { transform: rotate(1deg); }
.feature-media:hover .frame { transform: rotate(0) scale(1.015); }
.feature h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.feature ul { padding-left: 0; list-style: none; }
.feature li { padding-left: 30px; position: relative; margin-bottom: 6px; }
.feature li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 12px; background: var(--meadow); box-shadow: 3px 3px 0 var(--meadow-dark); }
.sticker { position: absolute; z-index: 2; font-family: var(--pixel); font-size: 1rem; background: var(--gold); color: var(--ink); padding: 4px 12px; border-radius: 3px; box-shadow: 0 3px 0 #a87d1e; transform: rotate(4deg); right: -10px; top: -14px; }
.thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.thumbs button { border: 3px solid var(--parchment-dark); padding: 0; background: none; cursor: pointer; width: 84px; border-radius: 3px; overflow: hidden; line-height: 0; }
.thumbs button[aria-pressed="true"] { border-color: var(--berry); }
.thumbs img { width: 100%; image-rendering: pixelated; }
@media (max-width: 820px) {
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip > .feature-media { order: 0; }
}

/* Villagers */
.villagers { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; }
.villagers .villager { flex: 0 0 118px; }
.villager { text-align: center; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; position: relative; padding: 0; }
.villager .stage { height: 170px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.villager .stage::after { content: ""; position: absolute; bottom: -4px; width: 64px; height: 12px; background: rgba(0,0,0,0.18); border-radius: 50%; }
.villager img { width: 78px; image-rendering: pixelated; position: relative; z-index: 1; transition: transform 0.15s; }
.villager:hover img, .villager:focus-visible img { transform: translateY(-8px); }
.villager .name { font-family: var(--pixel); font-size: 1.35rem; display: block; margin-top: 12px; }
.villager .role { font-size: 0.95rem; opacity: 0.85; display: block; line-height: 1.3; }
.bubble { position: absolute; z-index: 5; bottom: 178px; left: 50%; transform: translateX(-50%) scale(0.9); width: min(250px, 80vw); background: var(--cream); color: var(--ink); font-size: 0.98rem; line-height: 1.4; padding: 12px 14px; border-radius: 6px; border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; text-align: left; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--ink); }
.villager.talking .bubble { opacity: 1; transform: translateX(-50%) scale(1); }
.hint { text-align: center; opacity: 0.8; font-size: 0.95rem; margin-top: 28px; }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat { text-align: center; padding: 10px 6px; display: flex; }
.stat .panel { padding: 10px 4px 2px; flex: 1; }
.stat b { display: block; font-family: var(--pixel); font-size: 2.6rem; line-height: 1; color: var(--timber); }
.stat span { font-size: 0.95rem; color: var(--ink-soft); }
.stat img { height: 52px; image-rendering: pixelated; display: block; margin: 0 auto 6px; }

/* Season scrubber */
.scrubber .tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.scrubber .tabs button { font-family: var(--pixel); font-size: 1.1rem; border: 3px solid currentColor; background: transparent; color: inherit; padding: 4px 14px; border-radius: 4px; cursor: pointer; }
.scrubber .tabs button[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.scrubber .view { max-width: 900px; margin: 0 auto; position: relative; }
.scrubber .view img { transition: opacity 0.5s; }
.scrubber .caption { text-align: center; margin-top: 16px; font-size: 1.1rem; min-height: 2em; }

/* Posts */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 26px; }
.card { background: #fff9ea; border: 3px solid var(--parchment-dark); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform 0.15s; }
.card:hover { transform: translateY(-4px); color: inherit; }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; display: block; border-bottom: 3px solid var(--parchment-dark); }
.card .card-body { padding: 16px 20px 20px; }
.card h3 { font-size: 1.35rem; margin-bottom: 6px; color: var(--ink); }
.card time, .meta { font-size: 0.9rem; color: var(--ink-soft); }
.tag { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: var(--parchment); color: var(--ink-soft); padding: 1px 8px; border-radius: 3px; margin-right: 4px; }
.draft-badge { background: var(--berry); color: #fff; }

/* Newsletter */
.letters { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; max-width: 880px; margin: 0 auto; }
.letters .mailbox { width: 140px; }
.signup { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.signup input { flex: 1 1 240px; font: inherit; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 4px; background: var(--cream); color: var(--ink); }
.signup input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.signup-soon { font-family: var(--pixel); background: rgba(255,255,255,0.12); padding: 10px 14px; border-radius: 4px; display: inline-block; }
@media (max-width: 640px) { .letters { grid-template-columns: 1fr; text-align: center; } .letters .mailbox { margin: 0 auto; width: 100px; } }

/* Footer */
.footer { background: var(--forest); color: #dfe8d6; position: relative; padding: 70px 0 24px; margin-top: 0; }
.footer-hills { position: absolute; top: -40px; left: 0; right: 0; height: 41px; background: var(--forest); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cpath d='M0 40 V28 H8 V20 H16 V16 H24 V12 H40 V16 H48 V20 H56 V24 H72 V20 H80 V12 H88 V8 H96 V4 H112 V8 H120 V16 H128 V24 H144 V28 H160 V40Z'/%3E%3C/svg%3E") repeat-x bottom / 160px 40px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cpath d='M0 40 V28 H8 V20 H16 V16 H24 V12 H40 V16 H48 V20 H56 V24 H72 V20 H80 V12 H88 V8 H96 V4 H112 V8 H120 V16 H128 V24 H144 V28 H160 V40Z'/%3E%3C/svg%3E") repeat-x bottom / 160px 40px; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.footer-about { max-width: 420px; }
.footer-title { font-family: var(--pixel); font-size: 1.6rem; color: #fff; margin-bottom: 6px; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 28px; align-content: start; }
.footer a { color: #fff; }
.footer a:hover { color: var(--gold); }
.footer-small { max-width: var(--max); margin: 36px auto 0; padding: 0 var(--gutter); font-size: 0.85rem; opacity: 0.7; }

/* ---- Page header used by blog, wiki and map ---- */
.page-hero { background: linear-gradient(180deg, var(--sky) 0%, #cfe8f5 100%); position: relative; padding: 48px 0 70px; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: url("../../game/img/valley/hills.png") repeat-x bottom / auto 64px; image-rendering: pixelated; opacity: 0.95; }
.page-hero.winter::after { background-image: url("../../game/img/valley/hills_winter.png"); }
.page-hero.autumn::after { background-image: url("../../game/img/valley/hills_autumn.png"); }
.page-hero h1 { margin-bottom: 8px; }
.page-hero p { max-width: 640px; font-size: 1.15rem; margin: 0; }
.crumbs { font-size: 0.95rem; margin-bottom: 10px; }
.crumbs a { color: var(--ink-soft); }

/* ---- Blog post ---- */
.post { padding: 40px 0 80px; }
.prose { font-size: 1.1rem; }
.prose h2 { font-size: 1.8rem; margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose img { image-rendering: pixelated; border: 4px solid var(--timber); border-radius: 3px; box-shadow: var(--shadow); display: block; margin: 1.4em auto; }
.prose blockquote { margin: 1.4em 0; padding: 12px 20px; background: var(--parchment); border-left: 6px solid var(--timber); font-style: italic; }
.prose code { background: var(--parchment); padding: 1px 6px; border-radius: 3px; font-size: 0.92em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.98rem; }
.prose th, .prose td { border-bottom: 2px solid var(--parchment-dark); padding: 6px 10px; text-align: left; }
.post-cover { margin: -40px auto 32px; max-width: 900px; position: relative; z-index: 2; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 20px; border-top: 3px dashed var(--parchment-dark); flex-wrap: wrap; }

/* ---- Wiki ---- */
.wiki-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 40px 0 80px; }
.wiki-side { position: sticky; top: 80px; align-self: start; font-size: 0.98rem; }
.wiki-side h4 { font-size: 1.05rem; margin: 18px 0 6px; color: var(--ink-soft); }
.wiki-side a { display: block; text-decoration: none; padding: 2px 8px; border-radius: 3px; color: var(--ink); }
.wiki-side a:hover, .wiki-side a[aria-current] { background: var(--parchment); color: var(--timber); }
@media (max-width: 860px) { .wiki-layout { grid-template-columns: 1fr; } .wiki-side { position: static; order: 2; } }
.search { position: relative; max-width: 560px; margin-top: 18px; }
.search input { width: 100%; font: inherit; font-size: 1.1rem; padding: 12px 16px 12px 46px; border: 3px solid var(--ink); border-radius: 6px; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Cpath fill='%233a2620' d='M6 2h6v2h2v2h2v6h-2v2h-2v2H6v-2H4v-2H2V6h2V4h2zm0 2v2H4v6h2v2h6v-2h2V6h-2V4zM16 14h2v2h-2zm2 2h2v4h-2v-2h-2v-2z'/%3E%3C/svg%3E") no-repeat 16px center; }
.search input:focus { outline: 3px solid var(--gold); }
.search-results { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; background: var(--cream); border: 3px solid var(--ink); border-radius: 6px; z-index: 20; max-height: 60vh; overflow: auto; box-shadow: var(--shadow); display: none; }
.search-results.open { display: block; }
.search-results a { display: flex; gap: 12px; align-items: center; padding: 8px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--parchment-dark); }
.search-results a:hover, .search-results a.active { background: var(--parchment); }
.search-results img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.search-results small { display: block; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.3; }
.search-results .kind { margin-left: auto; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.tile { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: #fff9ea; border: 3px solid var(--parchment-dark); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform 0.12s, border-color 0.12s; }
.tile:hover { transform: translateY(-3px); border-color: var(--timber); color: var(--ink); }
.tile img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; flex: none; }
.tile b { font-family: var(--pixel); font-size: 1.2rem; font-weight: 600; display: block; line-height: 1.2; }
.tile small { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.3; display: block; }
.grid-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 30px; }
.grid-items a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; text-align: center; text-decoration: none; color: var(--ink); background: #fff9ea; border: 2px solid var(--parchment-dark); border-radius: 5px; font-size: 0.95rem; line-height: 1.25; }
.grid-items a:hover { border-color: var(--timber); background: var(--parchment); }
.grid-items img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.infobox { float: right; width: 300px; margin: 0 0 24px 32px; }
.infobox .panel { padding: 8px 10px 4px; }
.infobox .portrait { text-align: center; background: linear-gradient(180deg, var(--sky) 0 70%, var(--meadow) 70%); border-radius: 4px; padding: 16px 0 10px; margin-bottom: 10px; }
.infobox .portrait img { width: 96px; image-rendering: pixelated; }
.infobox .portrait.small img { width: 64px; }
.infobox .portrait.dark { background: linear-gradient(180deg, #2b2733 0 70%, #3d3529 70%); }
.infobox h2 { font-size: 1.5rem; text-align: center; margin-bottom: 8px; }
.infobox dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 0.95rem; }
.infobox dt { font-weight: 800; color: var(--ink-soft); }
.infobox dd { margin: 0; }
@media (max-width: 700px) { .infobox { float: none; width: 100%; margin: 0 0 24px; } }
.wiki-article h2 { font-size: 1.6rem; margin-top: 1.5em; padding-bottom: 6px; border-bottom: 3px solid var(--parchment-dark); }
.wiki-article .lead { font-size: 1.2rem; font-style: italic; color: var(--ink-soft); }
.wl { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.wl img { height: 1.5em; width: auto; vertical-align: middle; image-rendering: pixelated; }
.wl img.icon-person { height: 1.6em; margin: -0.4em 0 -0.2em; }
.wl img { margin: -0.2em 0; }
.missing { border-bottom: 2px dotted var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chips li { background: #fff9ea; border: 2px solid var(--parchment-dark); border-radius: 20px; padding: 2px 12px 2px 6px; }
.chips li.love { border-color: #e48a9a; background: #fde8ec; }
.chips li.dislike { border-color: #b8a99a; background: #f0ebe4; opacity: 0.9; }
table.data { width: 100%; border-collapse: collapse; margin: 1em 0 1.5em; font-size: 0.98rem; }
table.data th { text-align: left; font-family: var(--pixel); font-weight: 600; background: var(--parchment); padding: 6px 10px; }
table.data td { padding: 6px 10px; border-bottom: 2px solid var(--parchment); vertical-align: middle; }
.quote { background: var(--parchment); border-radius: 6px; padding: 12px 18px; margin: 10px 0; position: relative; font-style: italic; }
.quote::before { content: "“"; font-family: var(--pixel); font-size: 2.4rem; color: var(--timber); position: absolute; left: -6px; top: -14px; }
.season-dot { display: inline-block; padding: 1px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 800; }
.season-spring { background: #d9efc4; color: #3d6a24; }
.season-summer { background: #fff0b0; color: #7a5a00; }
.season-autumn { background: #f6d5b0; color: #8a4510; }
.season-winter { background: #dfe9f7; color: #2f4f80; }
.minimap { margin: 12px 0; }
.minimap img { width: 100%; image-rendering: pixelated; border-radius: 3px; }
.clear { clear: both; }

/* ---- Map ---- */
.map-page { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 58px); min-height: 520px; }
.map-panel { background: var(--parchment); border-right: 4px solid var(--timber); overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.map-panel h1 { font-size: 1.7rem; margin: 0; }
.map-panel h2 { font-size: 1.15rem; margin: 0 0 8px; color: var(--ink-soft); }
.world { position: relative; border: 4px solid var(--timber); border-radius: 4px; line-height: 0; background: #e8d9b0; }
.world img { width: 100%; image-rendering: pixelated; }
.world button { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: var(--cream); cursor: pointer; padding: 0; }
.world button[aria-pressed="true"] { background: var(--berry); box-shadow: 0 0 0 3px var(--cream); animation: pulse 1.2s infinite; }
.world button:disabled { opacity: 0.5; cursor: default; background: var(--parchment-dark); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(248, 242, 224, 0.4); } }
.place-list { display: grid; gap: 4px; }
.place-list button { text-align: left; font: inherit; font-family: var(--pixel); font-size: 1.1rem; background: transparent; border: 2px solid transparent; border-radius: 4px; padding: 4px 10px; cursor: pointer; color: var(--ink); }
.place-list button:hover { background: #fff9ea; }
.place-list button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 0.95rem; }
.filters label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.filters .swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.map-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.map-tools button { font: inherit; font-size: 0.92rem; border: 2px solid var(--ink); background: var(--cream); border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.map-tools button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.map-about { font-size: 0.95rem; }
#map { background: #1d2a22; }
.leaflet-container { font-family: var(--body); }
.leaflet-popup-content-wrapper { background: var(--cream); color: var(--ink); border-radius: 6px; border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,0.3); }
.leaflet-popup-tip { background: var(--ink); }
.leaflet-popup-content { margin: 10px 14px; font-size: 0.95rem; line-height: 1.45; }
.leaflet-popup-content h3 { font-size: 1.15rem; margin: 0 0 4px; }
.leaflet-popup-content img { image-rendering: pixelated; }
.pin { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid var(--ink); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,0.3); }
.pin > * { transform: rotate(45deg); font-size: 14px; line-height: 1; }
.pin img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; border-radius: 50%; }
.pin-label { font-family: var(--pixel); font-size: 13px; color: #fff; white-space: nowrap; pointer-events: none; }
.far .pin-label:not(.lbl-shop):not(.lbl-service) { display: none; }
.leaflet-tooltip.pin-label { color: #fff; background: rgba(58, 38, 32, 0.85); border: 0; border-radius: 3px; box-shadow: none; padding: 1px 6px; }
.leaflet-tooltip.pin-label::before { display: none; }
.you-pin { width: 18px; height: 18px; border-radius: 50%; background: var(--berry); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--berry); animation: pulse 1.2s infinite; }
.map-hint { font-size: 0.85rem; color: var(--ink-soft); }
.coords { position: absolute; z-index: 500; right: 10px; bottom: 10px; background: rgba(58, 38, 32, 0.85); color: var(--cream); font-family: var(--pixel); padding: 3px 10px; border-radius: 4px; font-size: 0.95rem; pointer-events: none; }
.map-wrap { position: relative; }
@media (max-width: 820px) {
  .map-page { grid-template-columns: 1fr; grid-template-rows: auto 70vh; height: auto; }
  .map-panel { border-right: 0; border-bottom: 4px solid var(--timber); }
  .map-panel .collapsible { display: none; }
  .map-panel.expanded .collapsible { display: block; }
}
.only-mobile { display: none; }
@media (max-width: 820px) { .only-mobile { display: inline-flex; } }

/* Fun bits */
.cloud { position: absolute; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}