/*
  The websites' design system (web spec W1). One stylesheet for both sites; a theme class on <html> sets the colors
  and the display font:
    .studio  aygames.gg, direction A "Crest": navy and gold, headings in Cinzel.
    .game    grindhold.aygames.gg: the game's palette, headings in Pixelify Sans.
  Mobile first. Fonts are served from /fonts (SIL Open Font License, see the OFL files there).
*/

@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("/fonts/pixelify-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---- Tokens --------------------------------------------------------------------------------------------------- */

:root {
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 18px; --radius-xl: 24px;
  --container: 1200px;
  --nav-height: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

.studio {
  --bg: #0b0e24;
  --bg-2: #0f1331;
  --surface: #141a40;
  --surface-2: #1b2250;
  --line: rgba(242, 184, 75, .16);
  --line-soft: rgba(244, 238, 226, .08);
  --text: #f4eee2;
  --muted: #bdb6a8;
  --accent: #f2b84b;
  --accent-hi: #ffe39e;
  --accent-deep: #c5862a;
  --accent-ink: #1c1406;
  --second: #ef6b43;
  --glow: rgba(45, 52, 120, .9);
  --font-display: "Cinzel", Georgia, serif;
  --display-weight: 700;
  --display-tracking: .01em;
  --display-features: normal;
  --display-case: none;
}

.game {
  --bg: #100e15;
  --bg-2: #14121a;
  --surface: #1c1924;
  --surface-2: #252130;
  --line: rgba(224, 178, 58, .18);
  --line-soft: rgba(242, 230, 208, .08);
  --text: #f2e6d0;
  --muted: #bdb7c6;
  --accent: #e0b23a;
  --accent-hi: #f7e07a;
  --accent-deep: #b07f1c;
  --accent-ink: #2b1a05;
  --second: #8db9e3;
  --ember: #d86b45;
  --leaf: #6fa84a;
  --glow: rgba(224, 178, 58, .14);
  --font-display: "Pixelify Sans", var(--font-text);
  --display-weight: 700;
  --display-tracking: .01em;
  /* Pixelify Sans draws its fi and fl ligatures like an A. font-feature-settings, unlike font-variant-ligatures,
     survives the font shorthand. */
  --display-features: "liga" 0, "clig" 0;
  --display-case: none;
}

/* ---- Base ----------------------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 400 16px/1.65 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
h1, h2, h3, h4 { margin: 0 0 var(--space-4); line-height: 1.15; text-wrap: balance; }
h1, h2, h3, .display {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-feature-settings: var(--display-features); text-transform: var(--display-case);
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1rem; font-weight: 700; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--space-6) 0; }
code, kbd { font-family: var(--font-mono); font-size: .92em; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 100; padding: var(--space-2) var(--space-4); border-radius: var(--radius-s); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.skip-link:focus { top: var(--space-3); }

/* ---- Layout --------------------------------------------------------------------------------------------------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
/* Edit mode's page, header and footer too: wider, so the village's tiles are bigger to aim at. */
.container-wide { max-width: 1680px; }
.section { padding-block: var(--space-8); position: relative; }
.section-alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-block: 1px solid var(--line-soft); }
.section-title { margin-bottom: var(--space-6); }
@media (min-width: 960px) { .container { padding-inline: 32px; } .section { padding-block: 80px; } }

/* ---- Buttons -------------------------------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: 11px 20px; border: 0; border-radius: var(--radius-m);
  font: 600 15px/1.2 var(--font-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-deep); }
.btn-primary:hover { background: var(--accent-hi); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-soft), inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.btn-ghost:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.btn-small { min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.game .btn { border-radius: 8px; }
.game .btn-primary { box-shadow: 0 4px 0 #7a5210, inset 0 2px 0 rgba(255, 255, 255, .3); }
.game .btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5210, inset 0 2px 0 rgba(255, 255, 255, .3); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- Navigation ----------------------------------------------------------------------------------------------- */

.site-nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-height);
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line-soft);
}
.site-nav .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand-mark { width: 38px; height: 38px; }
.brand-word { font: 700 18px/1 var(--font-display); letter-spacing: .16em; }
.brand-wordmark { height: 30px; width: auto; }
.brand-icon { width: 36px; height: 36px; border-radius: 9px; }
.nav-links { display: none; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--text); opacity: .82; text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; color: var(--text); }
.nav-actions { display: none; align-items: center; gap: var(--space-3); }
/* The phone menu: a <details> needs no script. */
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg { width: 20px; height: 20px; }
.nav-menu[open] summary { background: rgba(255, 255, 255, .06); }
.nav-menu .menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 300px); padding: var(--space-3);
  border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.menu-panel a:not(.btn) { display: block; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; }
.menu-panel a:not(.btn):hover { background: rgba(255, 255, 255, .06); }
.menu-panel .btn { width: 100%; margin-top: var(--space-2); }
@media (min-width: 900px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-menu { display: none; }
}
/* The game's header has four links, and the player's own once they're logged in: narrower than 1080px they'd squeeze,
   so its menu button stays until then. */
@media (min-width: 900px) and (max-width: 1079.98px) {
  .game .nav-links, .game .nav-actions { display: none; }
  .game .nav-menu { display: block; }
}

/* ---- Hero ----------------------------------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-8); isolation: isolate; }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--muted); max-width: 560px; margin-bottom: var(--space-6); }
.hero-note { margin-top: var(--space-4); font-size: .9rem; color: var(--muted); }
.hero-numbers { margin-top: var(--space-2); font-size: .9rem; color: var(--muted); }
.hero-numbers strong { color: var(--text); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .hero { padding-block: 80px var(--space-6); }
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}

/* A framed picture, such as the living village. */
.frame {
  position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -24px rgba(0, 0, 0, .8);
}
.frame img { width: 100%; }
.game .frame { border-radius: 10px; box-shadow: 0 0 0 2px #3a2618, 0 0 0 4px rgba(224, 178, 58, .5), 0 24px 48px -24px rgba(0, 0, 0, .85); }

.frame picture { display: contents; }

/* The studio's front page: who we are in a line, then each game once, its picture beside its story. */
.studio-intro { padding-block: var(--space-8) var(--space-6); }
.studio-intro h1 em { font-style: normal; color: var(--accent); }
.studio-intro .lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--muted); max-width: 600px; margin: 0; }
.games { padding-block: var(--space-6) var(--space-8); }
.game-row { display: grid; gap: var(--space-6); align-items: center; }
.game-row + .game-row { margin-top: var(--space-8); }
.game-row .shot { display: grid; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-l); text-decoration: none; }
.game-row .shot img { width: 100%; height: 100%; object-fit: cover; }
.game-row h2 { margin-bottom: var(--space-1); }
.game-row .where { font-size: .9rem; font-weight: 600; color: var(--muted); margin-bottom: var(--space-4); }
.game-row .text > p:not(.where) { color: var(--muted); max-width: 520px; }
@media (min-width: 900px) {
  .studio-intro { padding-block: 80px var(--space-7); }
  .game-row { grid-template-columns: 1.15fr 1fr; gap: var(--space-8); }
  .game-row.flip .shot { order: 2; }
}

/* Vanguard Realm's cover: drawn here in its colors, with no pictures from its site. */
.cover-vanguard {
  display: grid; place-items: center; align-content: center; gap: 6px; padding: var(--space-4); text-align: center;
  color: #fec46b;
  /* A board of our own drawing: two lanes, the river between the halves and a bridge on each lane, under a glow. */
  background:
    linear-gradient(rgba(214, 189, 140, .32), rgba(214, 189, 140, .32)) 28.5% 50% / 7% 13% no-repeat,
    linear-gradient(rgba(214, 189, 140, .32), rgba(214, 189, 140, .32)) 71.5% 50% / 7% 13% no-repeat,
    radial-gradient(55% 45% at 50% 50%, rgba(254, 196, 107, .2), transparent 72%),
    linear-gradient(180deg, transparent 44%, rgba(79, 126, 187, .3) 44% 56%, transparent 56%),
    linear-gradient(90deg, transparent 26%, rgba(201, 205, 230, .11) 26% 33%, transparent 33% 67%, rgba(201, 205, 230, .11) 67% 74%, transparent 74%),
    radial-gradient(120% 90% at 30% 10%, #2a3163 0%, #14182e 62%), #14182e;
}
.cover-vanguard strong { font: 800 clamp(1.3rem, 1rem + 2.2vw, 2.6rem)/.95 "Arial Narrow", "Roboto Condensed", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.cover-vanguard span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c9cde6; }

/* Otherhaven's cover: drawn here in its colors, with no pictures from its site. */
.cover-otherhaven {
  display: grid; place-items: center; align-content: start; gap: 6px; padding: 13% var(--space-4) 0; text-align: center;
  color: #f4c766;
  /* A haven of our own drawing: the shore, the low sun's light on the sea, the sun and a dusk sky. */
  background:
    linear-gradient(180deg, transparent 82%, #24150a 82%),
    linear-gradient(rgba(244, 199, 102, .5), rgba(244, 199, 102, .08)) 50% 73% / 22% 18% no-repeat,
    linear-gradient(180deg, transparent 64%, #1f3a44 64%),
    radial-gradient(11% 18% at 50% 64%, #f4c766 0 96%, transparent 100%),
    linear-gradient(180deg, #24150a 0%, #4a2a16 42%, #a4582a 64%), #24150a;
}
.cover-otherhaven strong { font: 700 clamp(1.5rem, 1.1rem + 2.4vw, 2.9rem)/1 "Pixelify Sans", Arial, sans-serif; letter-spacing: .02em; font-feature-settings: "liga" 0; }
.cover-otherhaven span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #efdcc0; }

/* ---- Feature rows --------------------------------------------------------------------------------------------- */

.feature { display: grid; gap: var(--space-6); align-items: center; }
.feature + .feature { margin-top: var(--space-8); }
.feature .text { max-width: 520px; }
.feature .text p { color: var(--muted); font-size: 1.05rem; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .feature.flip .media { order: 2; }
}

/* ---- Questions ------------------------------------------------------------------------------------------------ */

/* Questions and their answers, all in view: the question in bold, its answer under it. */
.qa { display: grid; gap: var(--space-6) var(--space-8); margin: 0; }
.qa dt { font-weight: 700; font-size: 1.05rem; margin-bottom: var(--space-2); }
.qa dd { margin: 0; color: var(--muted); }
@media (min-width: 860px) { .qa { grid-template-columns: 1fr 1fr; } }

/* ---- Footer --------------------------------------------------------------------------------------------------- */

.site-footer { padding-block: var(--space-8) var(--space-6); background: var(--bg-2); border-top: 1px solid var(--line-soft); font-size: .95rem; }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
.footer-about { grid-column: 1 / -1; max-width: 360px; }
.footer-about p { color: var(--muted); margin-top: var(--space-3); }
.site-footer h2 { font: 700 .78rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.site-footer a { color: var(--text); opacity: .85; text-decoration: none; }
.site-footer a:hover { opacity: 1; color: var(--accent); }
.footer-base { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .88rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); } .footer-about { grid-column: auto; } }

/* ---- Pages of text: the legal pages and notices --------------------------------------------------------------- */

.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.prose h2 { font-size: 1.5rem; margin-top: var(--space-7); }
.prose h3 { font-size: 1.15rem; margin-top: var(--space-5); font-family: var(--font-text); letter-spacing: 0; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.prose li + li { margin-top: var(--space-2); }
.prose .updated { color: var(--muted); font-size: .95rem; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0 var(--space-5); font-size: .95rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--line-soft); }
.prose th { color: var(--muted); font-weight: 600; }
.note { padding: var(--space-4) var(--space-5); border-radius: var(--radius-m); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid var(--line); }
.note p:last-child { margin-bottom: 0; }

/* ---- Commands ------------------------------------------------------------------------------------------------- */

.page-lead { color: var(--muted); font-size: 1.08rem; max-width: 680px; }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-5) 0 var(--space-7); font-size: .95rem; }
.jump span { color: var(--muted); }
.cmd-group + .cmd-group { margin-top: var(--space-8); }
.cmds { margin: var(--space-4) 0 0; }
.cmds > div { display: grid; gap: var(--space-1) var(--space-6); padding-block: var(--space-4); border-top: 1px solid var(--line-soft); }
.cmds > div:last-child { border-bottom: 1px solid var(--line-soft); }
.cmds dt code { font-size: 1rem; font-weight: 700; color: var(--accent); }
.cmds dd { margin: 0; color: var(--muted); }
.cmds .opts { list-style: none; padding: 0; display: grid; gap: 4px; margin: var(--space-2) 0 0; font-size: .9rem; }
.cmds .opts code { font-size: .85rem; font-weight: 600; color: var(--text); }
@media (min-width: 760px) { .cmds > div { grid-template-columns: 220px 1fr; } }
.cmd-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); }
.cmd-end p { margin: 0; color: var(--muted); }
.cmd-group h2 { font-size: 1.6rem; margin-bottom: var(--space-2); }

/* ---- Leaderboard ---------------------------------------------------------------------------------------------- */

/* A tab for each board (LEADERBOARD_SPEC LB3), radio buttons as the front page's ages have, the grind's on a row of
   their own (LB7), and its table: the first three's places in gold, silver and bronze, and a long name wrapping rather
   than widening the page. */
.board-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 var(--space-4); }
.board-tabs-break { flex-basis: 100%; height: 0; }
.board-tabs label { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer; }
.board-tabs label:hover { color: var(--text); }
.board-views > section { display: none; max-width: 640px; }
.board-picker input:nth-of-type(1):checked ~ .board-views > section:nth-child(1),
.board-picker input:nth-of-type(2):checked ~ .board-views > section:nth-child(2),
.board-picker input:nth-of-type(3):checked ~ .board-views > section:nth-child(3),
.board-picker input:nth-of-type(4):checked ~ .board-views > section:nth-child(4),
.board-picker input:nth-of-type(5):checked ~ .board-views > section:nth-child(5),
.board-picker input:nth-of-type(6):checked ~ .board-views > section:nth-child(6),
.board-picker input:nth-of-type(7):checked ~ .board-views > section:nth-child(7),
.board-picker input:nth-of-type(8):checked ~ .board-views > section:nth-child(8),
.board-picker input:nth-of-type(9):checked ~ .board-views > section:nth-child(9),
.board-picker input:nth-of-type(10):checked ~ .board-views > section:nth-child(10),
.board-picker input:nth-of-type(11):checked ~ .board-views > section:nth-child(11),
.board-picker input:nth-of-type(12):checked ~ .board-views > section:nth-child(12),
.board-picker input:nth-of-type(13):checked ~ .board-views > section:nth-child(13) { display: block; }
.board-picker input:nth-of-type(1):checked ~ .board-tabs label:nth-of-type(1),
.board-picker input:nth-of-type(2):checked ~ .board-tabs label:nth-of-type(2),
.board-picker input:nth-of-type(3):checked ~ .board-tabs label:nth-of-type(3),
.board-picker input:nth-of-type(4):checked ~ .board-tabs label:nth-of-type(4),
.board-picker input:nth-of-type(5):checked ~ .board-tabs label:nth-of-type(5),
.board-picker input:nth-of-type(6):checked ~ .board-tabs label:nth-of-type(6),
.board-picker input:nth-of-type(7):checked ~ .board-tabs label:nth-of-type(7),
.board-picker input:nth-of-type(8):checked ~ .board-tabs label:nth-of-type(8),
.board-picker input:nth-of-type(9):checked ~ .board-tabs label:nth-of-type(9),
.board-picker input:nth-of-type(10):checked ~ .board-tabs label:nth-of-type(10),
.board-picker input:nth-of-type(11):checked ~ .board-tabs label:nth-of-type(11),
.board-picker input:nth-of-type(12):checked ~ .board-tabs label:nth-of-type(12),
.board-picker input:nth-of-type(13):checked ~ .board-tabs label:nth-of-type(13) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.board-picker input:nth-of-type(1):focus-visible ~ .board-tabs label:nth-of-type(1),
.board-picker input:nth-of-type(2):focus-visible ~ .board-tabs label:nth-of-type(2),
.board-picker input:nth-of-type(3):focus-visible ~ .board-tabs label:nth-of-type(3),
.board-picker input:nth-of-type(4):focus-visible ~ .board-tabs label:nth-of-type(4),
.board-picker input:nth-of-type(5):focus-visible ~ .board-tabs label:nth-of-type(5),
.board-picker input:nth-of-type(6):focus-visible ~ .board-tabs label:nth-of-type(6),
.board-picker input:nth-of-type(7):focus-visible ~ .board-tabs label:nth-of-type(7),
.board-picker input:nth-of-type(8):focus-visible ~ .board-tabs label:nth-of-type(8),
.board-picker input:nth-of-type(9):focus-visible ~ .board-tabs label:nth-of-type(9),
.board-picker input:nth-of-type(10):focus-visible ~ .board-tabs label:nth-of-type(10),
.board-picker input:nth-of-type(11):focus-visible ~ .board-tabs label:nth-of-type(11),
.board-picker input:nth-of-type(12):focus-visible ~ .board-tabs label:nth-of-type(12),
.board-picker input:nth-of-type(13):focus-visible ~ .board-tabs label:nth-of-type(13) { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.table.board th[scope="row"] { width: 100%; white-space: normal; overflow-wrap: anywhere; }
.table.board .place { display: inline-block; min-width: 2.2em; padding: 1px 6px; border-radius: 999px; text-align: center; color: var(--muted); }
.table.board .place-1 .place { background: #e0b23a; color: #2b1a05; }
.table.board .place-2 .place { background: #c3c6d0; color: #17161c; }
.table.board .place-3 .place { background: #c9824a; color: #241306; }
.board-note { color: var(--muted); font-size: .92rem; max-width: 640px; margin-top: var(--space-5); }

/* ---- Dashboard ------------------------------------------------------------------------------------------------ */

/* Who's logged in and the pages, beside the page: a row above it on a phone, a column on a wide screen. */
.dash { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-8); }
.dash-side { display: grid; gap: var(--space-4); align-content: start; }
.dash-user { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.dash-user img { flex: none; border-radius: 50%; background: var(--surface-2); }
.dash-user strong { display: block; line-height: 1.25; overflow-wrap: anywhere; }
.dash-user span { font-size: .85rem; color: var(--muted); }
.dash-nav { display: flex; gap: var(--space-1); overflow-x: auto; margin-inline: -4px; }
.dash-nav a { padding: 7px 12px; border-radius: var(--radius-s); color: var(--muted); text-decoration: none; font-weight: 600; white-space: nowrap; }
.dash-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.dash-nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .07); }
.dash-main { min-width: 0; }
.dash-main h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); margin-bottom: var(--space-2); }
.dash-sub { color: var(--muted); margin-bottom: var(--space-6); }
.dash-h2 { font-size: 1.3rem; margin: var(--space-7) 0 var(--space-3); }
.dash-foot { margin-top: var(--space-5); font-size: .92rem; color: var(--muted); }
@media (min-width: 900px) {
  .dash { grid-template-columns: 200px 1fr; gap: var(--space-8); align-items: start; }
  .dash-side { position: sticky; top: calc(var(--nav-height) + var(--space-6)); }
  .dash-nav { flex-direction: column; overflow: visible; }
}

/* The player's village, big, at the top of the overview, with edit mode's link under it. */
.dash-village { margin: 0 0 var(--space-3); }
.dash-village img { width: 100%; height: auto; }
.dash-village-edit { margin-bottom: var(--space-6); font-size: .95rem; }

/* Facts: a label and its value on each line, with a hairline between, like a receipt. */
.facts { margin: 0; }
.facts > div { display: grid; gap: var(--space-1) var(--space-5); padding-block: var(--space-3); border-top: 1px solid var(--line-soft); }
.facts > div:last-child { border-bottom: 1px solid var(--line-soft); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts small { color: var(--muted); font-size: .9rem; }
.facts .item { margin-right: var(--space-3); white-space: nowrap; }
.facts .plain { list-style: none; padding: 0; margin: var(--space-1) 0 0; }
@media (min-width: 640px) { .facts > div { grid-template-columns: 150px 1fr; } }
.note-inline { color: var(--accent-hi); }
meter { display: block; width: min(320px, 100%); height: 6px; margin-top: 6px; border: 0; border-radius: 3px; background: var(--surface-2); }
meter::-webkit-meter-bar { background: var(--surface-2); border: 0; border-radius: 3px; height: 6px; }
meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: 3px; }
meter::-moz-meter-bar { background: var(--accent); border-radius: 3px; }

/* Tables: the army and the battles. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: 10px var(--space-3); text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.table thead th { font-size: .82rem; font-weight: 600; color: var(--muted); }
.table tbody th { font-weight: 600; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table small { color: var(--muted); font-weight: 400; }
.table .gain { color: #8fd07a; }
.table .loss { color: #f09a7c; }
.table .stars { color: var(--muted); letter-spacing: .1em; }
.table .stars span { color: var(--accent); }
.troop { display: flex; align-items: center; gap: var(--space-3); }
.troop img { flex: none; image-rendering: pixelated; }
.troop small { display: block; }
.table tr.locked { opacity: .55; }

/* The inventory: an emoji, a name and how many, on a line each. */
.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 var(--space-6); }
.items li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: var(--space-3); align-items: baseline; padding-block: 8px; border-bottom: 1px solid var(--line-soft); }
.items small { color: var(--muted); margin-left: var(--space-2); }
.items .qty { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .items { grid-template-columns: 1fr 1fr; } }

/* A rarity's name in its color (LOOT_SPEC L4), light enough to read on the dark theme. */
.rarity { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
.r-common { color: #c8c7cf; }
.r-uncommon { color: #9ccb63; }
.r-rare { color: #8db9e3; }
.r-epic { color: #cfa8ea; }
.r-legendary { color: #f2c14e; }

/* Settings, one after the other. */
.setting { max-width: 640px; }
.setting + .setting { margin-top: var(--space-2); }
.setting p { color: var(--muted); }

/* Edit mode (EDIT_MODE_SPEC E7): the village's picture with a canvas over it that the script draws the outlines on,
   the lines under it, and the pieces by group beside it on a wide screen, under it on a narrower one. */
.editor { display: grid; gap: var(--space-5); align-items: start; }
.editor-picture { margin: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.editor-picture[data-picked] { cursor: crosshair; }
.editor-picture img { width: 100%; height: auto; }
.editor-picture canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.editor-spot { min-height: 3.2em; margin: var(--space-4) 0 var(--space-1); }
.editor-spot strong { margin-right: .35em; }
.editor-news { min-height: 1.6em; margin: 0 0 var(--space-3); color: var(--accent-hi); }
.editor .no { color: #f09a7c; }
.editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.editor-pieces h2 { margin: 0 0 var(--space-1); font: 600 .82rem/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); }
.editor-pieces ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.editor-pieces button {
  display: flex; gap: var(--space-2); width: 100%; padding: 5px 10px; border: 0; border-radius: var(--radius-s);
  background: none; color: var(--text); font: 500 .92rem/1.4 var(--font-text); text-align: left; cursor: pointer;
}
.editor-pieces button span { flex: none; width: 1.4em; text-align: center; }
.editor-pieces button:hover { background: rgba(255, 255, 255, .05); }
.editor-pieces button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* The Great Hall's builder (HOUSEHOLD_SPEC LH10): a wall is dragged along a line, so the picture takes the finger's drags
   itself rather than scrolling the page; and the coins over its tools. */
.hall-picture { touch-action: none; cursor: crosshair; }
.hall-tools .hall-coins { margin: 0 0 var(--space-4); font-weight: 600; }
.hall-tools button small { margin-left: auto; color: inherit; opacity: .7; }
/* The palette's filter and its pictures (HALL2_SPEC HS7): an age, a search by name, and each floor, style and piece drawn
   small beside its name. */
.hall-filter { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.hall-filter select, .hall-filter input {
  width: 100%; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .04); color: var(--text); font: 500 .92rem/1.4 var(--font-text);
}
.hall-filter select option { background: var(--bg); color: var(--text); }
.hall-tools button img.swatch { flex: none; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
@media (min-width: 1100px) {
  .editor { grid-template-columns: 1fr 250px; }
  .editor-pieces { position: sticky; top: calc(var(--nav-height) + var(--space-4)); max-height: calc(100vh - var(--nav-height) - var(--space-7)); overflow-y: auto; }
}

/* A page with nothing to show yet says why, and what to do. */
.blank { max-width: 560px; padding-block: var(--space-4); }
.blank h2 { font-size: 1.4rem; }
.blank p { color: var(--muted); }

/* The nav's login, or who's logged in. */
.nav-login, .nav-player { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; font-weight: 600; opacity: .85; }
.nav-login:hover, .nav-player:hover { opacity: 1; color: var(--text); }
.nav-player img { border-radius: 50%; }

/* A page with one short thing to say: logging in, and logging out. */
.narrow { max-width: 640px; }

/* ---- Errors --------------------------------------------------------------------------------------------------- */

.error-page { display: grid; place-items: center; text-align: center; min-height: 60vh; padding-block: var(--space-8); }
.error-page .code { font: 700 clamp(4rem, 3rem + 6vw, 7rem)/1 var(--font-display); color: var(--accent); font-feature-settings: var(--display-features); }
.error-page p { color: var(--muted); max-width: 440px; margin-inline: auto; }

/* ---- Grindhold's front page --------------------------------------------------------------------------------- */

/* Grind. Build. Raid., a line and a color each. */
.grind-build-raid span { display: block; }
.grind-build-raid span:nth-child(1) { color: var(--accent-hi); }
.grind-build-raid span:nth-child(2) { color: var(--second); }
.grind-build-raid span:nth-child(3) { color: var(--ember); }
@media (min-width: 960px) { .game-hero .hero-grid { grid-template-columns: .85fr 1.15fr; } }

/* A message in a Discord channel, in Discord's dark theme, as the bot sends it: a container with its accent bar. */
.chat { padding: var(--space-5); border-radius: var(--radius-l); background: #313338; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85); }
.msg { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; }
.msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; line-height: 1.2; }
.msg-head strong { color: #f2f3f5; font-weight: 600; }
.app-tag { padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; }
.msg-time { color: #949ba4; font-size: 12px; }
.msg-card { padding: 12px 16px; border-radius: 8px; background: #2b2d31; border-left: 4px solid var(--accent); }
.msg-title { margin: 0 0 4px; color: #f2f3f5; font-weight: 700; }
.msg-text { margin: 0 0 12px; color: #dbdee1; font-size: .95rem; }
.msg-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dbtn { padding: 6px 16px; border-radius: 4px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; }
.dbtn-danger { background: #da373c; }

/* The market guide's pictures of the bot's messages (TRADING_SPEC TR5): an order's lines with its button beside them,
   the trade's olive bar, menus and buttons under the message, and Discord's box for a command and its options. */
.guide .chat { margin: var(--space-5) 0 var(--space-6); box-shadow: none; }
.msg-card-trade { border-left-color: #9db33b; }
.msg-emoji { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; }
.msg-sub { margin: 0 0 12px; color: #949ba4; font-size: 12px; }
.msg-order { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.msg-tree { margin: 0 0 12px; color: #dbdee1; font-size: .95rem; line-height: 1.5; }
.msg-tree b { color: #f2f3f5; }
.msg-tree code, .msg-sub code { padding: 0 4px; border-radius: 4px; background: #1e1f22; color: #dbdee1; font-size: .85em; }
/* An entry's details as the bot writes them since VILLAGE2_SPEC VL2: Discord's own bullets, a wrapped line under its text. */
.msg-list { margin: 2px 0 0; padding-left: 1.3em; }
.msg-list li + li { margin-top: 2px; }
.msg-card .msg-buttons + .msg-buttons, .msg-card .msg-buttons + .msg-small { margin-top: 8px; }
.msg-small { margin: 4px 0 0; color: #949ba4; font-size: 12px; }
.msg-below { display: grid; gap: 8px; margin-top: 8px; }
.dmenu { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 4px; background: #1e1f22; color: #dbdee1; font-size: 14px; }
.dmenu-arrow { color: #949ba4; }
.dbtn-success { background: #248046; }
.dbtn-primary { background: #5865f2; }
.dbtn-link::after { content: "↗"; margin-left: 6px; }
.mention { padding: 0 2px; border-radius: 3px; background: rgba(88, 101, 242, .3); color: #c9cdfb; font-weight: 500; }
.dcommand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--space-3) 0; padding: 10px 14px; border-radius: 8px; background: #383a40; color: #dbdee1; font-size: 14px; }
.dcommand-name { margin-right: 4px; color: #f2f3f5; font-weight: 600; }
.dopt { display: inline-flex; overflow: hidden; border-radius: 4px; background: #4e5058; }
.dopt span { padding: 2px 6px; background: #2b2d31; color: #949ba4; }
.dopt b { padding: 2px 8px; color: #f2f3f5; font-weight: 500; }
.guide h3 + p, .guide .dcommand + p { margin-top: var(--space-2); }
.guide-end { margin-top: var(--space-7); }
/* On a phone the message takes the whole width, without the avatar's column. */
@media (max-width: 520px) {
  .guide .chat { padding: var(--space-3); }
  .guide .msg { grid-template-columns: 1fr; }
  .guide .msg-avatar { display: none; }
  .guide .msg-card { padding: 10px 12px; }
}

/* A close look at the village: the picture scaled up around its middle, its pixels kept sharp. */
.frame.zoom { aspect-ratio: 4 / 3; }
.frame.zoom img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.9); transform-origin: 50% 56%; image-rendering: pixelated; }

/* The raid's replay is cropped to its battle; a fixed shape keeps the page from jumping when it loads. */
.frame.raid { aspect-ratio: 16 / 10; }
.frame.raid img { width: 100%; height: 100%; object-fit: cover; }

.skins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.text .skins-grid { margin-top: var(--space-4); }
.skins-grid figure { margin: 0; }
.skins-grid figcaption { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(16, 14, 21, .82); font-size: .85rem; font-weight: 600; }

/* A small line under a feature's text: the commands or numbers behind it. */
.feature .text .detail { font-size: .92rem; color: var(--muted); margin-top: var(--space-4); }
.feature .text .detail code { color: var(--text); }

/* The Great Hall across its levels: the sprites at their own size, standing on one line, with a caption each. On a
   phone the row scrolls. */
.halls-figure { margin: var(--space-8) 0 0; }
.halls { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); overflow-x: auto; list-style: none; margin: 0; padding: 0 0 var(--space-3); scroll-snap-type: x proximity; }
.halls li { flex: none; text-align: center; scroll-snap-align: center; }
.halls img { margin: 0 auto var(--space-2); }
.halls span { font: 600 .85rem/1 var(--font-text); color: var(--muted); }

/* The ages (AGES_SPEC A7): a tab for each age, and the village at the top of the one picked. The tabs are radio buttons
   with their labels, so it takes no script: the village shown is the one whose button is checked. */
.age-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.age-tabs label { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer; }
.age-tabs label:hover { color: var(--text); }
.age-views figure { display: none; margin: 0; }
.age-views figcaption { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(16, 14, 21, .82); font-size: .85rem; font-weight: 600; }
.age-picker input:nth-of-type(1):checked ~ .age-views figure:nth-child(1),
.age-picker input:nth-of-type(2):checked ~ .age-views figure:nth-child(2),
.age-picker input:nth-of-type(3):checked ~ .age-views figure:nth-child(3),
.age-picker input:nth-of-type(4):checked ~ .age-views figure:nth-child(4),
.age-picker input:nth-of-type(5):checked ~ .age-views figure:nth-child(5) { display: block; }
.age-picker input:nth-of-type(1):checked ~ .age-tabs label:nth-child(1),
.age-picker input:nth-of-type(2):checked ~ .age-tabs label:nth-child(2),
.age-picker input:nth-of-type(3):checked ~ .age-tabs label:nth-child(3),
.age-picker input:nth-of-type(4):checked ~ .age-tabs label:nth-child(4),
.age-picker input:nth-of-type(5):checked ~ .age-tabs label:nth-child(5) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.age-picker input:nth-of-type(1):focus-visible ~ .age-tabs label:nth-child(1),
.age-picker input:nth-of-type(2):focus-visible ~ .age-tabs label:nth-child(2),
.age-picker input:nth-of-type(3):focus-visible ~ .age-tabs label:nth-child(3),
.age-picker input:nth-of-type(4):focus-visible ~ .age-tabs label:nth-child(4),
.age-picker input:nth-of-type(5):focus-visible ~ .age-tabs label:nth-child(5) { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* The troops, standing at twice their size so they keep their sizes to each other, each on its patch of ground, with
   its name, what it's for and when the shop sells it. */
.lineup { margin: var(--space-8) 0 0; }
.lineup ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); list-style: none; margin: 0; padding: 0; text-align: center; }
.lineup .stand { display: flex; align-items: flex-end; justify-content: center; height: 124px; margin-bottom: var(--space-3); border-bottom: 3px solid #3a2618; }
.lineup img { image-rendering: pixelated; }
.lineup strong { display: block; font-family: var(--font-display); font-feature-settings: var(--display-features); font-size: 1.05rem; }
.lineup p { margin: 4px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.lineup small { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--second); }
.lineup figcaption, .halls-figure figcaption { margin-top: var(--space-5); font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: var(--space-3); }
@media (min-width: 640px) { .lineup ul { grid-template-columns: repeat(4, 1fr); } }

/* A plain closing line with its button, not a band. */
.closing { text-align: center; }
.closing p { color: var(--muted); max-width: 560px; margin: 0 auto var(--space-5); }
.closing .ctas { justify-content: center; }

/* The studio's contact: a heading and a sentence with the ways in, under a line. */
#contact { border-top: 1px solid var(--line-soft); }
.contact { max-width: 640px; }
.contact h2 { margin-bottom: var(--space-3); }
.contact p { color: var(--muted); margin: 0; font-size: 1.08rem; }

/* The store (STORE_SPEC): a card for each pack of gems, its price and Buy, and the small print under them. */
.store-note { max-width: 680px; margin-block: var(--space-5); }
.store-note .ctas { margin-top: var(--space-3); }
.store-held { margin: var(--space-5) 0 0; }
.store-held a { margin-left: var(--space-2); font-size: .95rem; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.pack { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.pack h2 { font-size: 1.3rem; margin: 0; }
.pack p { margin: 0; }
.pack-gems { font-size: 1.15rem; font-weight: 600; }
.pack-price { color: var(--muted); font-variant-numeric: tabular-nums; }
.pack form, .pack-why { margin-top: auto; padding-top: var(--space-3); }
.pack .btn { width: 100%; justify-content: center; }
.pack-why { color: var(--muted); font-size: .9rem; }
.store-terms { max-width: 760px; margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .92rem; }
.store-order { margin-top: var(--space-5); font-size: .9rem; overflow-wrap: anywhere; }

/* ---- Motion --------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}