/* MineVault portal – design tokens, reset, layout. Block-game look: pixel headings, bevelled panels, grass / dirt / stone colours.
 * All artwork is drawn by tools/theme/build-art.py and build-font.py (own work, no external files or fonts). */
@font-face {
  font-family: "MineVault Pixel";
  src: url("../fonts/mv-pixel.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter (SIL Open Font License, see fonts/OFL-Inter.txt) – the font of the Modern design; only loaded when a design uses it */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* 8.0.0: the type of the MineVault CI 1.0 (SIL Open Font License, see fonts/OFL-Barlow.txt and OFL-JetBrainsMono.txt) –
 * Barlow for text, Barlow Condensed for headings and buttons, JetBrains Mono for IDs; latin with umlauts, loaded when used */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* earth tones */
  --bg-0: #120d08;
  --bg-1: #1b1410;
  --bg-2: #2b2018;
  --bg-3: #3d2e22;
  --bg-4: #54402e;
  --ink: #f7f2e8;
  --ink-2: #dad1c2;
  --ink-3: #b3a897;
  /* block colours */
  --gold: #ffc83a;
  --gold-2: #ffe27a;
  --gold-3: #c99a14;
  --grass: #3c8526;            /* 7.0: a little deeper – white text on it reaches 4.5:1 (WCAG AA; #4fa72f gave 3.0) */
  --grass-2: #7fd650;
  --grass-3: #255218;
  --diamond: #4aedd9;
  --diamond-2: #a2f7ee;
  --diamond-3: #1c8c80;
  --redstone: #e5392f;
  --lapis: #4a73ff;
  --amethyst: #b57bff;
  --emerald: #17dd62;
  --sky: #5aa6ff;
  --sky-2: #a9d6ff;
  /* meaning */
  --ok: #67e377;
  --warn: #ffc83a;
  --bad: #ff7468;
  --info: #7bb8ff;
  --link: #8ff3e6;
  --on-accent: #ffffff;
  /* surfaces */
  --line: rgba(255, 200, 58, 0.4);
  --line-2: rgb(var(--lite-rgb) / 0.14);
  --glass: rgba(33, 24, 17, 0.94);
  --glass-2: rgb(var(--lite-rgb) / 0.06);
  --glass-3: rgb(var(--lite-rgb) / 0.12);
  --field: #0e0a07;
  /* pixel bevels (box-shadow parts) */
  --outline: 0 0 0 2px #000;
  --outline-l: 0 0 0 3px #000;
  --shade-rgb: 0 0 0;
  --lite-rgb: 255 255 255;
  --bw: 2px; --nbw: -2px; --bw3: 3px; --nbw3: -3px;
  --bevel: inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.2), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.38);
  --bevel-hi: inset var(--bw3) var(--bw3) 0 rgb(var(--lite-rgb) / 0.34), inset var(--nbw3) var(--nbw3) 0 rgb(var(--shade-rgb) / 0.36);
  --sunk: inset var(--bw) var(--bw) 0 rgb(var(--shade-rgb) / 0.6), inset var(--nbw) var(--nbw) 0 rgb(var(--lite-rgb) / 0.12);
  --radius: 0;
  --radius-s: 0;
  --shadow: var(--outline), 0 12px 0 rgb(var(--shade-rgb) / 0.35);
  --shadow-s: 0 4px 0 rgb(var(--shade-rgb) / 0.35);
  --text-shadow: 0.125em 0.125em 0 rgb(var(--shade-rgb) / 0.55);
  --pixel: "MineVault Pixel", "Courier New", ui-monospace, monospace;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --header-h: 68px;
  --tile-dirt: url("../img/tiles/dirt-dark.png");
  --tile-planks: url("../img/tiles/planks-dark.png");
  --tile-stone: url("../img/tiles/stone-dark.png");
  --img-grass: url("../img/tiles/grass-top.png");
  --img-clouds: url("../img/clouds.png");
  --img-landscape: url("../img/landscape.png");
  --img-ground: url("../img/ground.png");
  /* start-page sky (top → horizon) and the colour used for hover tints: both follow the active design */
  --scene-1: #1f5fc4;
  --scene-2: #3d86ec;
  --scene-3: #6fb3ff;
  --scene-4: #a9d6ff;
  --accent2-rgb: 127 214 80;
  /* 7.8.5: the world of the 3D start scene (theme-shared.js derives the same) */
  --mv-scene: overworld;
  /* 6.91: the mood of the base design (Overworld: drifting clouds) – the same values theme-shared.js derives for it */
  /* 6.92: the picture behind page heads – the day picture; Nether, The End, Ocean and Cherry grove draw their own sky,
     clouds and landscape instead (theme-shared.js, headTokens), so their heads no longer show the Overworld */
  --mv-head-layers: url(/brand/home-day) 50% 58% / cover no-repeat;
  --mv-amb-anim: mv-amb-drift;
  --mv-amb-step: 0px;
  --mv-amb-img: radial-gradient(60% 18% at 22% 12%, rgba(255, 255, 255, 0.07), transparent 70%), radial-gradient(45% 14% at 78% 26%, rgba(255, 255, 255, 0.05), transparent 70%);
  /* 8.7.1: the fixed colours that are the same in every design, in one place instead of copied into each sheet.
     White text reaches 4.5:1 on the solid ones (checked when they were chosen, 7.0 / 7.13.2). */
  --c-danger: #b3261e; --c-alert: #c62828; --c-warn-solid: #b88a0c; --c-warn-deep: #a8740a; --c-info-solid: #3f67e0;
  --c-good-solid: #17807a; --c-muted-solid: #6b6b6b; --c-on-ok: #0b2d0f; --c-on-warn: #2b1d00;
  /* the second colour of the tile gradients (the first one is a design colour where there is one) */
  --t-diamond-2: #2f6bff; --t-gold-2: #ff7a1a; --t-amethyst: #8b5cff; --t-amethyst-2: #d946ef; --t-mint: #22c58f; --t-mint-2: #0ea5e9; --t-pink: #ff3d7f;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-1); }
/* 7.3.0: the room of the scroll bar is kept from the start – it appeared when a page grew taller than the window and the
   whole page moved sideways by its width (header included) */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  font: 16px/1.55 var(--font);
  color: var(--ink);
  background: var(--bg-1) var(--tile-dirt) 0 0 / 64px 64px;
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  isolation: isolate;   /* 6.91: the layers behind the page (body::before/::after) sit above the body's own background */
}
/* optional site image: set --bg-image in theme.css */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-image, none) center / cover no-repeat;
  opacity: 0.25;
}
/* 6.91: the mood of the design (theme-shared.js, ambientTokens) – a quiet layer behind the content that moves only with
   transform/opacity (no repaint per frame), one pattern step and over again. Not in the team area (a place to work),
   not with reduced motion, not while printing. */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0;
  top: calc(-1 * var(--mv-amb-step, 0px));
  bottom: calc(-1 * var(--mv-amb-step, 0px));
  z-index: -1;
  pointer-events: none;
  background-image: var(--mv-amb-img, none);
  background-size: 100% var(--mv-amb-step, 100%);
  animation: var(--mv-amb-anim, none) 40s linear infinite;
  will-change: transform;
}
@keyframes mv-amb-drift { 0%, 100% { transform: translate3d(-4%, 0, 0); } 50% { transform: translate3d(4%, 0, 0); } }
@keyframes mv-amb-rise { from { transform: translate3d(0, var(--mv-amb-step), 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes mv-amb-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--mv-amb-step), 0); } }
@keyframes mv-amb-twinkle { 0%, 100% { opacity: .45; transform: translate3d(0, 0, 0); } 50% { opacity: 1; transform: translate3d(0, calc(var(--mv-amb-step) / 2), 0); } }
@keyframes mv-amb-waves { 0%, 100% { transform: translate3d(-3%, 0, 0) scaleY(1); } 50% { transform: translate3d(3%, 0, 0) scaleY(1.08); } }
@keyframes mv-amb-sweep { 0%, 15% { transform: translate3d(-70%, 0, 0); } 65%, 100% { transform: translate3d(70%, 0, 0); } }
/* 7.16 Vault 2.0: crystal glints rise one step and flash on the way (same opacity at both ends – no jump) */
@keyframes mv-amb-glint { 0% { opacity: .45; transform: translate3d(0, 0, 0); } 30% { opacity: 1; } 55% { opacity: .5; } 80% { opacity: .95; } 100% { opacity: .45; transform: translate3d(0, calc(-1 * var(--mv-amb-step)), 0); } }
body.page-team::before, body.page-replay::before { content: none; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
@media print { body::before { content: none; } }

/* pixel headings: the font has an 8 pixel grid, so sizes are multiples of 8 px */
h1, h2, h3, h4, .pixel { font-family: var(--pixel); font-weight: var(--font-weight-display, 400); line-height: 1.25; margin: 0 0 0.6em; text-shadow: var(--text-shadow); letter-spacing: var(--letter-display, 0.02em); }
/* 6.19: a heading colour set in the design (Team → Appearance → More colours); otherwise the text colour */
h1, h2, h3, h4 { color: var(--heading, inherit); }
h1 { font-size: 40px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 16px; color: var(--ink-3); text-shadow: none; }
@media (max-width: 600px) { h1 { font-size: 32px; } h2 { font-size: 24px; } }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--diamond-2); text-decoration: underline; text-underline-offset: 3px; }
small, .small { font-size: 0.86rem; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 0.94em; }
.gold { color: var(--gold-2); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.hidden, [hidden] { display: none !important; }
/* 8.5.0: !important – a design's heading rule (.page-head h1 { position: relative }) made the hidden title peek out */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.sr-only::after, .sr-only::before { content: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { overflow-wrap: anywhere; }

:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
::selection { background: rgb(var(--accent2-rgb) / 0.55); color: #fff; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 760px; }
.container.wide { max-width: 1360px; }
main { flex: 1 0 auto; padding: 40px 0 64px; }
/* 7.3.0: nothing jumps while a page loads – the header holds its height before the script fills it, and the page is at
   least one screen tall, so the footer starts below the fold and is not pushed down in sight when the content arrives */
#site-header:empty { display: block; height: var(--header-h); }
.hd-online.pending { visibility: hidden; }
main { min-height: calc(100vh - var(--header-h)); }
.stack > * + * { margin-top: 16px; }
.stack-s > * + * { margin-top: 8px; }
.stack-l > * + * { margin-top: 28px; }
.stack > * + .btn { margin-top: 16px; } /* a button is a flex item with its own 2px margin – keep the stack rhythm */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.top { align-items: flex-start; }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 900px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  main { padding: 28px 0 48px; }
  .container { padding: 0 16px; }
}

/* ---------- panels (inventory look) ---------- */
.card {
  position: relative;
  background: linear-gradient(var(--glass), var(--glass)), var(--tile-dirt) 0 0 / 64px 64px;
  background-color: var(--bg-2);
  border: 0;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--outline), var(--bevel), var(--shadow-s);
}
.card.gold { box-shadow: var(--outline), inset 0 4px 0 var(--gold), var(--bevel), var(--shadow-s); padding-top: 28px; }
.card.flat { box-shadow: var(--outline), var(--bevel); }
.card.tight { padding: 16px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.panel-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } /* 6.21.3: badges and buttons wrap on phones */
.panel-title h2, .panel-title h3 { margin: 0; }
.panel-title > svg.icon { color: var(--gold-2); }
.divider { height: 2px; background: rgb(var(--shade-rgb) / 0.55); box-shadow: 0 2px 0 rgb(var(--lite-rgb) / 0.07); margin: 18px 0; border: 0; }

/* ---------- header / footer ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: linear-gradient(rgba(20, 12, 5, 0.46), rgba(20, 12, 5, 0.46)), var(--tile-planks) 0 0 / 64px 64px;
  background-color: var(--bg-3);
  border-bottom: 4px solid #000;
  box-shadow: inset 0 3px 0 rgb(var(--lite-rgb) / 0.12);
}
/* a strip of turf hanging below the bar */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 18px;
  background: var(--img-grass) repeat-x 0 0 / 48px 48px;
  pointer-events: none;
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-family: var(--pixel); font-size: 24px; line-height: 1; text-shadow: var(--text-shadow); letter-spacing: 0.02em; }
.brand:hover { text-decoration: none; color: #fff; }
.brand img { width: 40px; height: 40px; object-fit: contain; image-rendering: auto; }
.brand span b { color: var(--gold-2); font-weight: 400; }
/* 6.52: the second logo in the header – any width, the height of the first logo */
.site-header .brand > img.brand-wordmark.brand-wordmark { width: auto; max-width: 280px; height: 38px; object-fit: contain; object-position: left center; animation: none; filter: none; transform: none; }
.site-header.hd2 .brand:hover img.brand-wordmark, #site-header .brand img.brand-wordmark { transform: none; animation: none; }
@media (max-width: 1250px) { .site-header .brand > img.brand-wordmark.brand-wordmark { height: 30px; max-width: 200px; } }
@media (max-width: 700px) { .site-header .brand > img.brand-wordmark.brand-wordmark { height: 22px; max-width: 150px; } }
@media (max-width: 480px) { .site-header .brand > img.brand-wordmark.brand-wordmark { display: none; } }
.nav { display: flex; gap: 6px; margin-left: 6px; }
.nav a, .nav .nav-menu-btn {
  color: var(--ink);
  padding: 9px 12px 8px;
  white-space: nowrap;
  font-family: var(--pixel);
  font-size: 16px;
  line-height: 1;
  text-shadow: var(--text-shadow);
  background: rgb(var(--shade-rgb) / 0.3);
  box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.14), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.35);
  transition: background var(--mv-dur-fast) var(--mv-ease-out);
  border-radius: var(--radius-b);
}
.nav a:hover, .nav .nav-menu-btn:hover { background: rgb(var(--accent2-rgb) / 0.3); color: #fff; text-decoration: none; }
.nav a[aria-current="page"], .nav .nav-menu-btn[aria-current="page"] { background: var(--grass); box-shadow: var(--outline), var(--bevel-hi); color: #fff; }
/* the long words of the header go on narrow screens */
@media (max-width: 1360px) and (min-width: 861px) { .nav .nav-long { display: none; } }
/* block designs: the pixel font is wide – a tighter header from 1600 px down, so the account chip always fits */
@media (max-width: 1600px) and (min-width: 861px) {
  .nav { gap: 4px; margin-left: 2px; }
  .nav a, .nav .nav-menu-btn { padding: 8px 8px 7px; font-size: 14px; }
  .brand { font-size: 20px; }
  .user-chip .name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 6.26: the header is compact now – the name next to the avatar stays visible down to phone width */
/* Community menu (6.16) */
.nav-drop { position: relative; }
.nav .nav-menu-btn { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav .nav-menu-btn .icon { width: 14px; height: 14px; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.nav-drop.open .nav-menu-btn .icon { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 300px; display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 18px 44px rgb(var(--shade-rgb) / 0.5); }
.nav .nav-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: transparent; box-shadow: none; text-shadow: none; font-family: inherit; font-size: .95rem; line-height: 1.25; white-space: normal; color: var(--ink); }
.nav .nav-menu a > span:last-child { display: grid; }
/* 6.48: menus and panels fade in with a short drop (they used to appear in one frame while their caret turned) */
.nav-menu:not([hidden]) { animation: menu-in var(--mv-dur-base) var(--mv-ease-out) both; transform-origin: top center; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.tab, .side-nav a { transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out); }
.nav .nav-menu a:hover, .nav .nav-menu a[aria-current="page"] { background: rgb(var(--accent2-rgb) / 0.18); box-shadow: none; color: var(--ink); }
.nm-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(var(--accent2-rgb) / 0.16); color: rgb(var(--accent2-rgb)); }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn.menu-toggle { display: none; }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 12px 4px 4px;
  background: rgb(var(--shade-rgb) / 0.4);
  box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.14);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--radius-b);
}
.user-chip:hover { text-decoration: none; background: rgb(var(--accent2-rgb) / 0.3); color: #fff; }
.user-chip img, .avatar { width: 30px; height: 30px; border-radius: var(--radius-s); background: var(--bg-3); image-rendering: pixelated; object-fit: cover; box-shadow: var(--outline); }
.avatar.lg { width: 72px; height: 72px; }
.avatar.md { width: 44px; height: 44px; }
.avatar.sm { width: 24px; height: 24px; }
@media (max-width: 1100px) {
  .nav { gap: 4px; }
  .nav a { padding: 9px 9px 8px; }
  .brand { font-size: 16px; }
}
@media (max-width: 860px) {
  .icon-btn.menu-toggle { display: inline-grid; }
  .nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; margin: 0; padding: 14px 16px 20px; gap: 8px;
    background: var(--bg-1) var(--tile-dirt) 0 0 / 64px 64px;
    border-bottom: 4px solid #000;
  }
  .nav.open { display: flex; }
  .nav a, .nav .nav-menu-btn { padding: 14px 14px 12px; }
  .nav .nav-menu-btn { width: 100%; justify-content: space-between; }
  .nav-menu { position: static; min-width: 0; margin-top: 6px; box-shadow: none; }
  .user-chip .name { display: none; }
  .user-chip { padding: 4px; }
}
.site-footer {
  margin-top: auto;
  padding: 66px 0 34px;
  color: var(--ink-2);
  font-size: 0.9rem;
  background: var(--img-grass) repeat-x 0 0 / 48px 48px, var(--bg-1) var(--tile-stone) 0 0 / 64px 64px;
  border-top: 0;
  box-shadow: inset 0 -80px 60px -40px rgb(var(--shade-rgb) / 0.55);
}
.site-footer .container { display: flex; gap: 18px 28px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.site-footer .container > * { padding: 4px 10px; background: rgb(var(--shade-rgb) / 0.5); }
.site-footer a { color: var(--link); }
.site-footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
/* 6.21.3: footer in columns */
.site-footer .container.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.site-footer .container.foot-grid > * { padding: 0; background: none; }
.foot-brand { display: grid; gap: 10px; }
.foot-brand .brand { font-size: 20px; }
.foot-brand .brand img { width: 32px; height: 32px; }
.foot-address b { color: var(--ink); }
.foot-col { display: grid; gap: 8px; align-content: start; }
.foot-col b { color: var(--ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.foot-col a { color: var(--ink-2); }
.foot-col a:hover { color: var(--link); }
.foot-motion { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.foot-motion:hover, .foot-motion:focus-visible { color: var(--link); }
@media (max-width: 760px) { .site-footer .container.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* ---------- forms ---------- */
label, .label { display: block; font-size: 0.86rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field { display: block; }
.field + .field, .field + .row, .row + .field { margin-top: 16px; }
.hint { font-size: 0.82rem; color: var(--ink-3); margin-top: 6px; }
.hint.err { color: var(--bad); }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 0;
  border-radius: var(--radius-s);
  padding: 12px 14px;
  box-shadow: var(--outline), var(--sunk);
  transition: box-shadow var(--mv-dur-fast) var(--mv-ease-out);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 0.8; }
input:hover, select:hover, textarea:hover { box-shadow: var(--outline), var(--sunk), 0 0 0 4px rgb(var(--lite-rgb) / 0.28); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--outline), var(--sunk), 0 0 0 5px var(--gold); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { box-shadow: var(--outline), var(--sunk), 0 0 0 5px var(--redstone); }
textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-2) 50%), linear-gradient(135deg, var(--gold-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--grass); padding: 0; box-shadow: none; }
input[type="range"] { box-shadow: none; background: transparent; padding: 0; }
input[type="range"]:focus { box-shadow: none; }
input[type="file"] { padding: 9px 10px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); cursor: pointer; margin-bottom: 0; }
.check > input[type=checkbox], .check > input[type=radio] { flex-shrink: 0; } /* 6.32: the box keeps its size next to a long, wrapping label */
.input-group { display: flex; gap: 10px; }
.input-group > input { flex: 1; min-width: 0; }
.code-input { font-family: var(--pixel); font-size: 24px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 16px 10px 14px; border-radius: var(--radius-s); }
.counter { text-align: right; font-size: 0.8rem; color: var(--ink-3); }
.counter.bad { color: var(--bad); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--btn-neutral, var(--c-muted-solid));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 2px;
  font-family: var(--pixel); font-size: 16px; font-weight: 400; line-height: 1;
  color: var(--btn-ink, var(--on-accent));
  text-shadow: var(--text-shadow);
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--radius-b);
  padding: 12px 18px 11px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--outline), var(--bevel-hi);
  transition: filter var(--mv-dur-press) var(--mv-ease-out), transform var(--mv-dur-press) var(--mv-ease-out);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { text-decoration: none; color: var(--btn-ink, #fff); filter: brightness(1.18); }
.btn:active { transform: translateY(2px); box-shadow: var(--outline), inset var(--bw3) var(--bw3) 0 rgb(var(--shade-rgb) / 0.4), inset var(--nbw3) var(--nbw3) 0 rgb(var(--lite-rgb) / 0.18); }
.btn.primary { --btn-bg: var(--grass); color: var(--on-accent); }
.btn.primary:hover { color: #fff; }
.btn.gold { --btn-bg: var(--c-warn-solid); color: var(--on-accent); }
.btn.danger { --btn-bg: var(--c-danger); color: var(--on-accent); }
.btn.good { --btn-bg: var(--c-good-solid); color: var(--on-accent); }   /* 7.13.2: white on it 4.8:1 (was #1d8f87, 3.9:1) */
.btn.gold:hover, .btn.danger:hover, .btn.good:hover { color: #fff; }
.btn.ghost { --btn-bg: rgb(var(--shade-rgb) / 0.35); box-shadow: 0 0 0 2px rgb(var(--shade-rgb) / 0.7), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.12); color: var(--ink-2); }
.btn.ghost:hover { color: #fff; }
.btn.sm { padding: 8px 12px 7px; font-size: 16px; }
.btn.lg { padding: 16px 26px 15px; font-size: 24px; }
.btn.block { width: calc(100% - 4px); }
/* 6.35: on phones a long label wraps inside the button instead of pushing it out of its card */
@media (max-width: 560px) { .btn { max-width: calc(100% - 4px); white-space: normal; text-align: center; line-height: 1.15; } .btn.lg { font-size: 20px; padding: 14px 18px 13px; } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(0.6); }
.btn.busy { pointer-events: none; position: relative; color: transparent !important; text-shadow: none; }
.btn.busy::after { content: ""; position: absolute; width: 16px; height: 16px; border: 4px solid rgb(var(--lite-rgb) / 0.3); border-top-color: #fff; animation: spin 0.8s steps(8) infinite; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; background: rgb(var(--shade-rgb) / 0.3); border: 0; color: var(--ink); cursor: pointer; box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.14), inset var(--nbw) var(--nbw) 0 rgb(var(--shade-rgb) / 0.35); border-radius: var(--radius-b); }
.icon-btn:hover { background: rgb(var(--accent2-rgb) / 0.35); color: #fff; }
/* 6.48: icon buttons answer like the other buttons – a soft hover, a press */
.icon-btn { transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out), transform var(--mv-dur-press) var(--mv-ease-out); }
.icon-btn:active { transform: translateY(1px); }
svg.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -0.18em; }
svg.icon.lg { width: 1.6em; height: 1.6em; }

/* 6.48: motion tokens – one speed and one curve per kind of movement, used by every component (docs/MOTION.md).
 * press: a button going down · fast: hover, colour, small state changes · base: dialogs, toasts, menus coming in ·
 * slow: bars and larger reveals. out: things arriving and reacting · in: things leaving · spring: a small overshoot for
 * things that pop (icons, badges) – never for text blocks or dialogs. */
:root {
  --mv-dur-press: 80ms; --mv-dur-fast: 140ms; --mv-dur-base: 220ms; --mv-dur-slow: 360ms;
  --mv-ease-out: cubic-bezier(.2, .8, .2, 1); --mv-ease-in: cubic-bezier(.4, 0, 1, 1);
  --mv-ease-inout: cubic-bezier(.65, 0, .35, 1); --mv-ease-spring: cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes drift { to { background-position: -480px 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.reveal { animation: fade-up 0.35s steps(6) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* 7.24.0: the portal's own switch (footer, Profile & security) does the same as the system setting */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html.reduce-motion .pg-wait { opacity: 1; }
/* 7.32.0: high contrast – every text in the full text colour, clearly visible lines, underlined links, a thick focus ring
   (all designs are dark, so the light text colour is the stronger one) */
html.high-contrast { --ink-2: var(--ink); --ink-3: color-mix(in srgb, var(--ink) 88%, transparent); --line: rgb(255 255 255 / .45); --line-2: rgb(255 255 255 / .32); }
html.high-contrast a:not(.btn):not(.tab):not(.set-card):not(.brand):not([class*="nav"]) { text-decoration: underline; text-underline-offset: 2px; }
html.high-contrast .muted, html.high-contrast .faint, html.high-contrast .hint { color: var(--ink) !important; opacity: 1 !important; }
html.high-contrast :focus-visible { outline: 3px solid var(--highlight, #ffcf5a) !important; outline-offset: 3px !important; }
/* 7.32.0: larger text – the whole page a size larger (zoom keeps the proportions; narrow screens switch to the phone layout) */
html.large-text body { zoom: 1.15; }

/* ---------- loading / empty ---------- */
.skeleton { background: linear-gradient(90deg, rgb(var(--lite-rgb) / 0.05) 25%, rgb(var(--lite-rgb) / 0.12) 50%, rgb(var(--lite-rgb) / 0.05) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; min-height: 1em; }
.skeleton.line { height: 14px; margin: 8px 0; }
.skeleton.block { height: 96px; }
.spinner { width: 24px; height: 24px; border: 4px solid rgb(var(--lite-rgb) / 0.18); border-top-color: var(--grass-2); animation: spin 0.8s steps(8) infinite; display: inline-block; vertical-align: middle; }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-3); }
.empty svg.icon { width: 2.2em; height: 2.2em; margin-bottom: 8px; opacity: 0.8; }
.empty b { display: block; color: var(--ink-2); margin-bottom: 4px; font-size: 1.05rem; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--gold); color: #1b1405; font-family: var(--pixel); font-size: 16px; box-shadow: var(--outline); transition: top var(--mv-dur-fast) var(--mv-ease-out); border-radius: var(--radius-s); }
.skip:focus { top: 10px; text-decoration: none; }
main:focus { outline: none; }

/* spacing utilities (inline styles are blocked by the CSP) */
.m0 { margin: 0 !important; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 16px; }

#result, [id$="-anchor"] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------------------------------------------------------------- 6.25: a calmer type scale
   Page titles stay big; titles inside cards are a step smaller, so a page reads as page → section → content. */
.card h2, .panel-title h2, .dialog h2 { font-size: 20px; letter-spacing: 0.02em; }
.card h3, .panel-title h3 { font-size: 16px; }
.lead { max-width: 68ch; }
.page-head p, .cm-hero p, .fm-head p { max-width: 68ch; }
.empty-inline { padding: 22px 8px; color: var(--ink-3); text-align: center; }

/* ---------------------------------------------------------------- 6.26: compact header – menus and the account menu */
.header-end .nav-drop { position: relative; }
.header-end .user-chip { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.header-end .user-chip > .icon { width: 14px; height: 14px; opacity: .8; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.header-end .nav-drop.open .user-chip > .icon { transform: rotate(180deg); }
.nav-menu.account-menu { left: auto; right: 0; min-width: 270px; }
.header-end .nav-menu a, .nav-menu .nm-signout { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: .95rem; line-height: 1.25; }
.header-end .nav-menu a > span:last-child { display: grid; }
.header-end .nav-menu a:hover, .header-end .nav-menu a[aria-current="page"] { background: rgb(var(--accent2-rgb) / 0.18); }
.nav-menu a.hi .nm-icon { background: linear-gradient(135deg, var(--grass), var(--grass-2)); color: #fff; }
.nav-menu .nm-signout { width: 100%; border: 0; border-top: 1px solid var(--line-2); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 12px; background: none; cursor: pointer; font: inherit; color: var(--ink-2); }
.nav-menu .nm-signout:hover { color: var(--bad); }
.nav-menu .nm-signout .icon { width: 18px; height: 18px; margin: 0 8px; }
@media (max-width: 860px) {
  .nav-menu.account-menu { position: absolute; top: calc(100% + 10px); right: 0; width: min(300px, calc(100vw - 32px)); }
}

/* 6.28: messages and notifications in the header */
.hd-alerts { display: flex; align-items: center; gap: 4px; }
.hd-btn { position: relative; }
.hd-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; color: #fff; background: var(--c-alert); box-shadow: 0 0 0 2px var(--header-bg, var(--bg-1)); }   /* 7.13.2: --bad (#ff7468) under white was 2.6:1 */
.hd-count[hidden] { display: none; }
.hd-panel { right: 0; left: auto; width: min(360px, calc(100vw - 24px)); padding: 6px; }
.hd-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; border-bottom: 1px solid var(--line-2); }
.hd-panel-head a { font-size: .82rem; }
@media (max-width: 700px) { .hd-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; } }
.hd-list { display: grid; max-height: 60vh; overflow-y: auto; padding-top: 4px; }
.hd-list > p { padding: 8px; }
.hd-item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.hd-item:hover { background: rgb(var(--accent2-rgb) / .14); text-decoration: none; }
.hd-item > span { display: grid; min-width: 0; }
.hd-item b { font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-item.unread b { font-weight: 900; }
.hd-item.unread::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--diamond); }
.hd-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--shade-rgb) / .35); }
@media (max-width: 520px) { .hd-alerts .hd-btn { width: 36px; height: 36px; } }

/* 6.28: messages and bell joined the header – keep it inside narrow phones */
@media (max-width: 440px) {
  .header-end { gap: 6px; }
  .header-end .icon-btn { width: 36px; height: 36px; }
  .header-end .user-chip > .icon { display: none; }
  .brand { gap: 8px; font-size: 14px; }
}
@media (max-width: 360px) {
  #site-header .brand > span, #site-header .brand > img.brand-wordmark { display: none; }
}

/* 6.30: every page builds up with the springy pop of the start page shortcuts (motion.js) */
.pg-wait { opacity: 0; }
.pg-pop { animation: pg-pop .5s var(--pg-d, 0ms) cubic-bezier(.2, 1.35, .4, 1) backwards; }
@keyframes pg-pop { from { opacity: 0; translate: 0 16px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
#site-header .brand img { animation: pg-logo .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pg-logo { from { scale: .4; rotate: -12deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pg-wait { opacity: 1; } .pg-pop, #site-header .brand img { animation: none; } }

/* ---------- 6.38: the new header (.hd2) ----------
   Brand left, the main entries with icons in the middle, server + account right. Works in both design families:
   the colours come from the design (--header-* of the rounded designs, the block colours otherwise); the current page
   is marked with a pixel bar under its entry instead of a filled button. Once the page is scrolled the bar gets darker. */
.site-header.hd2 { transition: box-shadow var(--mv-dur-base) var(--mv-ease-out); }
.site-header.hd2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .18), rgb(0 0 0 / .32)); opacity: 0; transition: opacity var(--mv-dur-base) var(--mv-ease-out); pointer-events: none; }
.site-header.hd2.scrolled { box-shadow: 0 14px 30px -14px rgb(0 0 0 / .7); }
.site-header.hd2.scrolled::before { opacity: 1; }
.site-header.hd2 .container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
.site-header.hd2 .brand { gap: 10px; white-space: nowrap; }
.site-header.hd2 .brand img { width: 42px; height: 42px; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .35)); transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.site-header.hd2 .brand:hover img { transform: rotate(-6deg) scale(1.06); }
.site-header.hd2 .nav { justify-self: center; align-items: center; gap: 2px; margin: 0; }
.site-header.hd2 .nav > a,
.site-header.hd2 .nav > .nav-drop > .nav-menu-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: transparent; box-shadow: none; border-radius: 10px;
  color: var(--header-ink-2, var(--ink)); transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out);
}
.site-header.hd2 .nav > a:hover,
.site-header.hd2 .nav > .nav-drop > .nav-menu-btn:hover,
.site-header.hd2 .nav-drop.open > .nav-menu-btn { background: var(--header-hover, rgb(var(--lite-rgb) / .1)); color: var(--header-ink, #fff); }
.site-header.hd2 .nav > a[aria-current="page"],
.site-header.hd2 .nav > .nav-drop > .nav-menu-btn[aria-current="page"] { background: transparent; box-shadow: none; color: var(--header-ink, #fff); }
.site-header.hd2 .nav > a[aria-current="page"]::after,
.site-header.hd2 .nav > .nav-drop > .nav-menu-btn[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 4px; border-radius: 1px;
  background: var(--header-accent, var(--grass)); box-shadow: 0 2px 0 rgb(0 0 0 / .35);
}
.site-header.hd2 .nav .nav-ic { width: 18px; height: 18px; flex: none; opacity: .85; transform: none; }
.site-header.hd2 .nav .nav-caret { width: 14px; height: 14px; flex: none; opacity: .7; }
.site-header.hd2 .header-end { gap: 8px; }

/* the server: live dot, address, players online – click copies */
.hd-server {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgb(var(--lite-rgb) / .14); background: var(--header-hover, rgb(var(--shade-rgb) / .45)); color: var(--header-ink, var(--ink));
  font: 700 .86rem/1 var(--mono, ui-monospace, monospace); transition: border-color var(--mv-dur-fast) var(--mv-ease-out), filter var(--mv-dur-fast) var(--mv-ease-out);
}
.hd-server:hover { border-color: rgb(var(--lite-rgb) / .32); filter: brightness(1.1); }
/* rounded designs: the colours of their bar (readable on light bars too); block designs: gold and green */
.hd-server .hd-addr { color: var(--header-ink, var(--gold-2)); }
.hd-server .hd-online { font-family: var(--font); font-size: .78rem; font-weight: 800; color: var(--header-ink-2, var(--ok)); }
.hd-server .hd-online[hidden] { display: none; }
.hd-server .hd-copy { width: 14px; height: 14px; opacity: .55; }
.hd-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ink-3); }
.hd-server.online .hd-dot { background: var(--ok); animation: hd-pulse 2.2s ease-out infinite; }
.hd-server.offline .hd-dot { background: var(--bad); }
.hd-server.copied { border-color: var(--ok); }
.hd-server.copied .hd-addr { color: var(--ok); }
@keyframes hd-pulse { 0% { box-shadow: 0 0 0 0 rgb(90 220 130 / .55); } 70%, 100% { box-shadow: 0 0 0 7px rgb(90 220 130 / 0); } }
.nav-server { display: none; }
@media (max-width: 1360px) { .hd-server .hd-online { display: none; } }
@media (max-width: 1220px) and (min-width: 861px) { .site-header.hd2 .header-end .hd-server { display: none; } }
/* block designs: the pixel font is wide – smaller entries until 1600 px so the brand never touches them */
@media (max-width: 1600px) and (min-width: 861px) {
  .site-header.hd2 .nav > a, .site-header.hd2 .nav > .nav-drop > .nav-menu-btn { padding: 9px 9px; gap: 6px; }
  .site-header.hd2 .nav .nav-ic { width: 16px; height: 16px; }
}
@media (max-width: 1100px) and (min-width: 861px) { .site-header.hd2 .nav > a, .site-header.hd2 .nav > .nav-drop > .nav-menu-btn { padding: 9px 10px; gap: 6px; } }

/* phones: the menu opens as a grid of large tiles, the server on top */
@media (max-width: 860px) {
  .site-header.hd2 .container { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header.hd2 .header-end .hd-server { display: none; }
  .site-header.hd2 .nav { justify-self: stretch; }
  .site-header.hd2 .nav.open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  .site-header.hd2 .nav > a,
  .site-header.hd2 .nav > .nav-drop > .nav-menu-btn {
    flex-direction: column; justify-content: center; gap: 6px; width: 100%; min-height: 78px; padding: 12px 8px;
    background: rgb(var(--shade-rgb) / .35); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(var(--lite-rgb) / .08);
  }
  .site-header.hd2 .nav .nav-ic { width: 24px; height: 24px; }
  .site-header.hd2 .nav .nav-caret { display: none; }
  .site-header.hd2 .nav > a[aria-current="page"],
  .site-header.hd2 .nav > .nav-drop > .nav-menu-btn[aria-current="page"] { color: var(--ink); box-shadow: inset 0 0 0 2px var(--header-accent, var(--grass)); }
  .site-header.hd2 .nav > a[aria-current="page"]::after,
  .site-header.hd2 .nav > .nav-drop > .nav-menu-btn[aria-current="page"]::after { display: none; }
  .site-header.hd2 .nav-drop.open { grid-column: 1 / -1; }
  .site-header.hd2 .nav-drop.open > .nav-menu-btn { min-height: 0; flex-direction: row; }
  .nav-server { display: flex; grid-column: 1 / -1; justify-content: center; }
  .nav-server .hd-server { width: 100%; justify-content: center; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hd-server.online .hd-dot { animation: none; } .site-header.hd2, .site-header.hd2::before { transition: none; } }

/* ================================================================== 6.44: the portal frame */
/* Every page opens like the start page: its head is a wide banner with the MineVault world (the standard picture or the
   team's own), darkened towards the text and tinted in the colours of the design. Behind the content a calm light,
   at the bottom a call to play. Only layout and light – colours stay those of each design. */
body:not(.home) main { position: relative; isolation: isolate; overflow-x: clip; }
body:not(.home) main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(800px 420px at 8% 420px, rgb(var(--accent2-rgb) / .1), transparent 70%),
    radial-gradient(700px 420px at 95% 760px, rgb(139 92 255 / .08), transparent 70%),
    radial-gradient(900px 500px at 40% 100%, rgb(255 176 32 / .05), transparent 70%); }

/* 7.3.1: the banner picture in the size the screen needs (smaller copies of the built-in picture; an own picture is
   served as it is). Designs with their own sky set --mv-head-layers in /brand/theme.css, which comes later and wins. */
@supports (background-image: image-set(url("/brand/home-day") 1x)) {
  @media (max-width: 640px) { :root { --mv-head-layers: image-set(url(/brand/home-day?w=640) 1x, url(/brand/home-day?w=960) 2x) 50% 58% / cover no-repeat; } }
  @media (min-width: 641px) and (max-width: 960px) { :root { --mv-head-layers: image-set(url(/brand/home-day?w=960) 1x, url(/brand/home-day?w=1600) 2x) 50% 58% / cover no-repeat; } }
  @media (min-width: 961px) { :root { --mv-head-layers: image-set(url(/brand/home-day?w=1600) 1x, url(/brand/home-day) 2x) 50% 58% / cover no-repeat; } }
}

/* the banner: the first head of a page, full width */
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) {
  position: relative; isolation: isolate; max-width: none;
  margin: -28px calc(50% - 50vw) 30px; padding: 64px max(20px, calc(50vw - 50% + 20px)) 46px;
  min-height: 236px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  background:
    linear-gradient(90deg, rgb(8 10 18 / .92) 0%, rgb(8 10 18 / .72) 38%, rgb(8 10 18 / .28) 72%, rgb(8 10 18 / .45) 100%),
    radial-gradient(600px 260px at 12% 100%, rgb(var(--accent2-rgb) / .3), transparent 70%),
    var(--mv-head-layers), #0d1220;
  color: #f1f4f8; box-shadow: inset 0 -1px 0 rgb(255 255 255 / .06); }
/* (doubled class: as specific as the banner rule above, which would otherwise push the forum title to the right) */
:is(#app, main > .container) > .fm-head.fm-head:first-child { flex-direction: row; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--grass), var(--accent, var(--grass-2)) 50%, transparent); opacity: .85; }
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) :is(h1, .lead, p) { color: #f1f4f8; text-shadow: 0 2px 18px rgb(0 0 0 / .45); }
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.05; margin: 2px 0 4px; }
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) :is(.lead, p) { color: rgb(241 244 248 / .82); max-width: 62ch; }
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) a:not(.btn) { color: #ffd27a; }
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) .eyebrow { align-self: flex-start; }
:is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) .btn.ghost { color: #f1f4f8; border-color: rgb(255 255 255 / .3); }
.container.narrow > .page-head:first-child { padding-inline: max(20px, calc(50vw - 50% + 20px)); }
@media (max-width: 700px) {
  :is(:is(#app, main > .container) > :is(.page-head, .fm-head):first-child, #app > .subnav:first-child + .page-head) { min-height: 180px; padding-top: 44px; padding-bottom: 30px; margin-top: -20px;
    background:
      linear-gradient(180deg, rgb(8 10 18 / .55), rgb(8 10 18 / .9)),
      var(--mv-head-layers), #0d1220; }
}

/* pages with tabs above their head (community): the head becomes the banner, the tabs sit on its lower edge */
#app:has(> .subnav:first-child + .page-head) { display: flex; flex-direction: column; }
#app:has(> .subnav:first-child + .page-head) > .page-head { order: -1; padding-bottom: 86px; }
#app:has(> .subnav:first-child + .page-head) > .subnav { position: relative; z-index: 2; margin: -74px 0 28px; }
#app:has(> .subnav:first-child + .page-head) > .subnav .tab:not([aria-current="page"]) { color: rgb(241 244 248 / .86); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
#app:has(> .subnav:first-child + .page-head) > .subnav .tab:not([aria-current="page"]):hover { color: #fff; background: rgb(255 255 255 / .16); }
#app:has(> .subnav:first-child + .page-head) > :not(.page-head) { min-width: 0; align-self: stretch; width: auto; margin-left: 0; margin-right: 0; }

/* the sign-in pages: the world behind a glass card */
body.auth-solo { background: linear-gradient(180deg, rgb(8 10 18 / .5), rgb(8 10 18 / .82)), url(/brand/home-day) 50% 60% / cover no-repeat fixed, #0d1220; }
/* 7.3.1: on a phone the picture is drawn about 1600 px wide (it fills the portrait screen) – the smaller copy is enough */
@media (max-width: 960px) { body.auth-solo { background-image: linear-gradient(180deg, rgb(8 10 18 / .5), rgb(8 10 18 / .82)), url(/brand/home-day?w=1600); } }
body.auth-solo .auth-card { background: rgb(14 18 28 / .72); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 30px 70px -30px rgb(0 0 0 / .85); color: #eef2f7; }
body.auth-solo .auth-card :is(h1, label, .auth-sub, p) { color: #eef2f7; }
body.auth-solo .auth-card .auth-sub { color: rgb(238 242 247 / .75); }
body.auth-solo .auth-home { color: #eef2f7; }

/* the footer: a call to play, then the columns */
.site-footer .container.foot-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 30px; padding: 20px 24px;
  border-radius: calc(var(--radius) + 4px); background: linear-gradient(120deg, rgb(var(--accent2-rgb) / .16), rgb(139 92 255 / .1) 60%, transparent), rgb(var(--shade-rgb) / .35);
  box-shadow: var(--outline), inset 0 1px 0 rgb(var(--lite-rgb) / .06); }
.site-footer .container.foot-cta > * { padding: 0; background: none; }
.foot-cta-text { display: grid; gap: 2px; }
.foot-cta-text b { font-size: 1.25rem; color: var(--ink); }
.foot-cta-text span { color: var(--ink-3); }
.foot-cta-ip { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgb(var(--shade-rgb) / .45); box-shadow: inset 0 0 0 1px var(--line-2); }
.foot-cta-ip code { font-weight: 800; font-size: 1.02rem; color: var(--gold-2, #ffb020); background: none; }
.foot-cta-ip > .icon { color: var(--ink-3); }
@media (max-width: 600px) { .site-footer .container.foot-cta { padding: 16px; } .foot-cta-ip { width: 100%; justify-content: space-between; } }
/* 6.44: the header is wider on big screens and gets denser instead of overlapping (shell.js measures it) */
@media (min-width: 1240px) { .site-header.hd2 .container { max-width: 1440px; } }
.site-header.hd2.hd-tight1 .header-end .hd-server { display: none; }
.site-header.hd2.hd-tight2 .nav .nav-ic { display: none; }
.site-header.hd2.hd-tight2 .nav > a, .site-header.hd2.hd-tight2 .nav > .nav-drop > .nav-menu-btn { padding-left: 8px; padding-right: 8px; }
.site-header.hd2.hd-tight3 .header-end .user-chip > :not(img, .avatar) { display: none; }
/* 6.45: the server's logo floats on the right of every page banner (Team → Logo and icon) */
:is(#app, main > .container) > :is(.page-head, .fm-head):first-child::before,
#app > .subnav:first-child + .page-head::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; right: max(20px, calc(50vw - 50% + 20px)); top: 50%; width: 190px; aspect-ratio: 1; transform: translateY(-50%);
  background: url(/brand/logo?w=512) center / contain no-repeat; filter: drop-shadow(0 12px 22px rgb(0 0 0 / .55)); animation: banner-logo 6s ease-in-out infinite; }
@keyframes banner-logo { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -8px; rotate: 2deg; } }
@media (max-width: 1000px) { :is(#app, main > .container) > :is(.page-head, .fm-head):first-child::before, #app > .subnav:first-child + .page-head::before { width: 120px; opacity: .9; } }
@media (max-width: 700px) { :is(#app, main > .container) > :is(.page-head, .fm-head):first-child::before, #app > .subnav:first-child + .page-head::before { display: none; } }
@media (prefers-reduced-motion: reduce) { :is(#app, main > .container) > :is(.page-head, .fm-head):first-child::before { animation: none; } }
/* 6.92 (7.0): soft cross-fades between the pages of the portal (View Transitions across documents – CSS only; browsers
   without it simply load the next page as before). The header stays put, only the content changes. */
@view-transition { navigation: auto; }
#site-header { view-transition-name: mv-header; }
::view-transition-old(root) { animation: var(--mv-dur-fast) var(--mv-ease-in) both mv-vt-out; }
::view-transition-new(root) { animation: var(--mv-dur-base) var(--mv-ease-out) both mv-vt-in; }
@keyframes mv-vt-out { to { opacity: 0; } }
@keyframes mv-vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}