/* The Nuitai website: the front door and the small pages. Same palette as the wiki. */
:root {
  --bg: #faf6ee;
  --panel: #f2ecdf;
  --card: #fffdf8;
  --ink: #20242a;
  --muted: #5c6470;
  --line: #ddd4c2;
  --s: 62%;  --l: 36%;
  --sb: 70%; --lb: 92%;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13171c; --panel: #1a1f26; --card: #1d232b; --ink: #e8e4da;
    --muted: #9aa3ae; --line: #2d353f;
    --s: 62%; --l: 72%; --sb: 38%; --lb: 19%; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #13171c; --panel: #1a1f26; --card: #1d232b; --ink: #e8e4da;
  --muted: #9aa3ae; --line: #2d353f;
  --s: 62%; --l: 72%; --sb: 38%; --lb: 19%; color-scheme: dark;
}
.hue {
  --c: hsl(var(--h) var(--s) var(--l));
  --cb: hsl(var(--h) var(--sb) var(--lb));
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
}
a { color: inherit; }
/* The column beside the shell (shell.css): as wide as the page wants, centred in what is left. */
main.wrap { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
/* The front page's sea chart, drawn by drawings.py, sits behind everything in the border color. */
.chart { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; color: var(--line); }
body { position: relative; z-index: 0; }
/* The gallery's plumeria garland, top and bottom. */
.lei { line-height: 0; }
.lei svg { display: block; }
.lei.bottom svg { transform: scaleY(-1); }

.pitch {
  margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; border-left: 4px solid var(--line);
  background: var(--panel); font-family: var(--serif); font-size: 1.1rem; line-height: 1.6;
}
.pitch p { margin: 0; }
/* Today on Nuitai: where Pōhaku Nui is (build.py, today_line), under the map. Each region's name in its own colour. */
.today { margin: .7rem 0 0; line-height: 1.6; text-align: center; }
.today a.hue { color: var(--c); font-weight: 600; text-decoration: none; }

.doors {
  display: grid; gap: .9rem; margin: 0 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.door {
  display: block; padding: 1rem 1.1rem; border-radius: .8rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--c);
  transition: transform .08s;
}
.door:hover { transform: translateY(-2px); background: var(--cb); }
.door b { display: block; font-family: var(--serif); font-size: 1.4rem; color: var(--c); }
.door span { display: block; color: var(--muted); font-size: .95rem; margin-top: .2rem; }

/* The front page: the map is the home view, as big as the screen allows (Frankie, 10/16), with the names over it. */
main.wrap.home { max-width: none; padding: 1.25rem 2rem 1.5rem; }
.map-link { display: block; margin: 0 auto; width: min(100%, calc(100vh - 7rem)); }
.map-link img { width: 100%; height: auto; display: block; border-radius: .8rem; border: 1px solid var(--line); }
/* With the AI art switch off (shell.css) the painted map goes, and the program's to-scale map stands in for it. */
.map-link .map-plain { display: none; }
html[data-art="off"] .map-link .map-plain { display: block; }
/* The names over the painted map. The sea is dark in both themes, so the labels are always
   light on dark, edged in the region's wiki colour. */
.map-wrap { position: relative; }
.map-link .place {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font: 600 clamp(.65rem, 1vw, 1rem)/1.2 var(--sans); color: #fff; text-decoration: none;
  padding: .15em .55em; border-radius: 99px; background: rgb(10 20 40 / .72);
  border: 2px solid rgb(255 255 255 / .55); box-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
.map-link .place.hue { border-color: hsl(var(--h) 75% 66%); }
.map-link .place:hover, .map-link .place:focus-visible { background: rgb(10 20 40 / .92); outline: none; transform: translate(-50%, -50%) scale(1.08); }
/* Pōhaku Nui where he stands today (Frankie, 10/18): his picture in a gold ring, with a slow ripple. */
.map-link .walker {
  position: absolute; transform: translate(-50%, -50%); width: clamp(36px, 6%, 72px); aspect-ratio: 1;
  border-radius: 50%; border: 2px solid #f2c94c; box-shadow: 0 0 0 3px rgb(10 20 40 / .65), 0 2px 8px rgb(0 0 0 / .6);
}
.map-link .walker[hidden] { display: none; }
.map-link .walker img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 50%; }
.map-link .walker::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #f2c94c;
  animation: walker-ripple 3s ease-out infinite; pointer-events: none;
}
.map-link .walker:hover, .map-link .walker:focus-visible { transform: translate(-50%, -50%) scale(1.15); outline: none; }
@keyframes walker-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .map-link .walker::after { animation: none; opacity: 0; } }
/* The floating continent, over the sea only while its name is pointed at or focused (Frankie, 10/14). */
.map-link .sky-layer { position: absolute; inset: 0; border-color: transparent; background: none; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.map-wrap:has(.sky:hover, .sky:focus-visible) .sky-layer { opacity: 1; }
@media (max-width: 860px) {
  main.wrap.home { padding: 1rem; }
  .map-link { width: 100%; }
}
h1.title { font-family: var(--serif); font-size: 2.4rem; margin: 0 0 .5rem; }
/* A page's title, its first line and its jump list are centred (Frankie, 10/16); the sections under them stay left. */
main.wrap > h1.title, main.wrap > h1.title + p { text-align: center; }
main.wrap > .jump { justify-content: center; }
figure { margin: 2rem 0; }
figure img { width: 100%; height: auto; display: block; border-radius: .8rem; border: 1px solid var(--line); background: #fff; }
figcaption { color: var(--muted); margin-top: .5rem; font-size: .95rem; }

footer.small {
  margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .8rem; line-height: 1.5;
}

/* The gallery and the credits page. */
.wrap.wide { max-width: 76rem; }
.jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.5rem; }
.pill {
  display: inline-block; padding: .25rem .7rem; border-radius: 99px; text-decoration: none;
  font-size: .9rem; background: var(--cb); color: var(--c); border: 1px solid var(--c);
}
.pill:hover { background: var(--card); }
section { margin: 2.2rem 0; scroll-margin-top: 1rem; }
section h2 {
  font-family: var(--serif); font-size: 1.6rem; color: var(--c); margin: 0 0 .5rem;
  padding-bottom: .3rem; border-bottom: 3px solid var(--c);
}
section h2 .n { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin-left: .6rem; font-weight: 400; }
section .note { color: var(--muted); margin: 0 0 1rem; }
.grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.tile {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c);
  border-radius: .7rem; overflow: hidden; display: flex; flex-direction: column;
}
.tile > a { display: block; background: var(--panel); }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 0; border-radius: 0; }
.grid.wide .tile img { aspect-ratio: auto; object-fit: contain; background: #fff; }
.tile figcaption { margin: 0; padding: .5rem .65rem .65rem; font-size: .9rem; color: var(--ink); }
.tile figcaption b { display: block; line-height: 1.3; }
.tile figcaption span { display: block; color: var(--muted); margin-top: .2rem; }
.tile figcaption .old { font-style: italic; }
.tile .from { display: block; margin-top: .3rem; color: var(--c); font-size: .85rem; text-decoration: none; }
.tile .from:hover { font-weight: 700; }
.faces { display: flex; flex-wrap: wrap; gap: .6rem; }
.face {
  display: block; width: 4.5rem; height: 4.5rem; border-radius: .6rem; overflow: hidden;
  border: 2px solid var(--c); background: var(--cb);
}
.face img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
/* One frame of the sprite sheet: the walk-down row, 64 px frames, drawn three times as big. */
.sprite .frame {
  display: block; height: 12rem; image-rendering: pixelated;
  background: url("art/sprites/kailo-lpc.png") no-repeat; background-size: 2496px auto;
  background-position: center -1920px; background-color: var(--panel);
}
.block {
  margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--card);
  border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: .7rem;
}
.block h2 { border: 0; padding: 0; font-size: 1.35rem; }
.block ul { padding-left: 1.2rem; }
.block li { margin: .35rem 0; }
.block a { color: var(--c); }
details summary { cursor: pointer; color: var(--c); }
details pre {
  white-space: pre-wrap; font-size: .78rem; max-height: 24rem; overflow: auto;
  background: var(--panel); padding: .75rem; border-radius: .5rem;
}
footer.small a { color: var(--muted); }

/* Sepia, the old-map look: parchment and brown ink. */
:root[data-theme="sepia"] {
  --bg: #efe2c4; --panel: #e6d3ab; --card: #f6ebd0; --ink: #3a2a18;
  --muted: #6c5536; --line: #cbb386;
  --s: 42%; --l: 33%; --sb: 38%; --lb: 84%; color-scheme: light;
}
:root[data-theme="sepia"] .pitch { border-left-color: #a8875a; }
:root[data-theme="sepia"] .map-link img, :root[data-theme="sepia"] .grid.wide .tile img { filter: sepia(.35); }

.door b .em { display: inline; font-size: 1em; margin: 0; color: inherit; }

/* Behind the scenes: the spoiler warning at the door, then everything. */
.gate {
  margin: 1.5rem 0; padding: 1.2rem 1.25rem; background: var(--cb);
  border: 2px solid var(--c); border-radius: .8rem;
}
.gate h2 { border: 0; padding: 0; }
.gate a { color: var(--c); }
.enter {
  font: inherit; font-weight: 600; padding: .5rem 1.1rem; border-radius: 99px; cursor: pointer;
  background: var(--c); color: var(--bg); border: 0;
}
.gated #inside { display: none; }
:root:not(.gated) .enter { display: none; }
dl.pairs { margin: .5rem 0 0; }
dl.pairs dt { font-weight: 700; color: var(--c); margin-top: .8rem; }
dl.pairs dd { margin: .15rem 0 0; }
details.src {
  margin: .6rem 0; background: var(--card); border: 1px solid var(--line);
  border-left: 5px solid var(--c); border-radius: .7rem; padding: .2rem 1rem;
}
details.src summary { cursor: pointer; padding: .5rem 0; font-family: var(--serif); font-size: 1.2rem; color: var(--c); }
details.src summary .n { font-family: var(--sans); font-size: .85rem; color: var(--muted); margin-left: .6rem; }
details.src[open] { padding-bottom: .8rem; }
ul.qs li { margin: .3rem 0; }
dl.pairs .meta { display: block; color: var(--muted); font-size: .88rem; margin-top: .15rem; }
.block p a, .block li a { color: var(--c); }
/* Links show by colour and weight, never an underline (Frankie, 10/17). */
.block a, .gate a { text-decoration: none; font-weight: 700; }
.block a:hover, .gate a:hover { background: var(--cb); border-radius: 3px; }

/* The Lexicon (Frankie, 10/16): its sections hold prose, lists and tables from lore/register/lexicon/. */
.lex h3 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; color: var(--c); }
.lex h4 { font-size: 1rem; margin: 1rem 0 .3rem; }
.lex p { margin: .5rem 0; }
.lex-table { overflow-x: auto; margin: .6rem 0 1rem; }
.lex-table table { border-collapse: collapse; font-size: .92rem; min-width: 100%; }
.lex-table th, .lex-table td { border: 1px solid var(--line); padding: .35rem .55rem; text-align: left; vertical-align: top; }
.lex-table th { background: color-mix(in srgb, var(--c) 14%, transparent); }

/* The Food page's pixel icons (10/20): drawn small, scaled up without blur. */
dl.pairs dt .food-icon { width: 48px; height: 48px; image-rendering: pixelated; vertical-align: middle; margin-right: .5rem; }

/* The SNES Demo's Keyboard Controls (Frankie, 10/24): the keys on the left, what they do on the right, in groups. */
table.keys { width: 100%; border-collapse: collapse; margin: .4rem 0 .2rem; }
table.keys td { padding: .45rem .5rem; border-top: 1px solid var(--line); vertical-align: middle; }
table.keys td:first-child { width: 45%; line-height: 2; }
table.keys tr.group th {
  text-align: left; padding: .9rem .5rem .3rem; font-family: var(--serif); font-size: 1.05rem; color: var(--c);
}
table.keys tbody:first-child tr.group th { padding-top: .2rem; }
table.keys td b { color: var(--c); }
kbd {
  display: inline-block; min-width: 1.9em; padding: .05rem .45rem; text-align: center;
  font: 600 .85rem var(--sans); color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-bottom-width: 3px; border-radius: .35rem; white-space: nowrap;
}
@media (max-width: 520px) {
  table.keys td:first-child { width: auto; }
  table.keys td { display: block; border-top: 0; padding: .1rem .5rem; }
  table.keys tr:not(.group) { display: block; border-top: 1px solid var(--line); padding: .4rem 0; }
}

/* The Game page's four doors, two by two (Frankie, 11/9); one column on a phone. */
.doors.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 40rem) { .doors.two { grid-template-columns: 1fr; } }