/* Blockcraft visual system — implements DESIGN.md. Components use semantic --bc-* tokens only. */

/* ============ §3 Raw palette ============ */
:root {
  --bc-stone-0: #FFFFFF; --bc-stone-50: #FAF4EF; --bc-stone-100: #EBE3DE; --bc-stone-200: #CFC4BE;
  --bc-stone-300: #A99E99; --bc-stone-400: #6A6461; --bc-stone-500: #3E3A38; --bc-stone-600: #272524;
  --bc-stone-700: #1A1817; --bc-stone-800: #121110; --bc-stone-900: #000000;
  --bc-grass-100: #A6E28A; --bc-grass-200: #88D466; --bc-grass-300: #6EC24C; --bc-grass-400: #55A638;
  --bc-grass-500: #3A7F25; --bc-grass-600: #2C661E;
  --bc-gold-100: #FFF07F; --bc-gold-300: #FFC72E; --bc-gold-500: #D99E22; --bc-gold-700: #93550F;
  --bc-diamond-300: #5FE3F2; --bc-diamond-500: #1FB6CC; --bc-diamond-700: #0E6E80;
  --bc-redstone-300: #FF6A5E; --bc-redstone-500: #CC3A35; --bc-redstone-700: #8A1F1B;
}

/* ============ §3.2 Semantic tokens ============ */
:root {
  --bc-bg-base: var(--bc-stone-700);
  --bc-bg-raised: var(--bc-stone-600);
  --bc-bg-deep: var(--bc-stone-900);
  --bc-bg-light: var(--bc-stone-50);
  --bc-surface: var(--bc-stone-600);
  --bc-surface-hover: var(--bc-stone-500);
  --bc-surface-overlay: rgba(39, 37, 36, 0.92);
  --bc-card-bg: var(--bc-surface);
  --bc-text: var(--bc-stone-0);
  --bc-text-muted: var(--bc-stone-300);
  --bc-text-subtle: var(--bc-stone-300);
  --bc-text-inverse: var(--bc-stone-800);
  --bc-text-on-light-muted: var(--bc-stone-400);
  --bc-border: var(--bc-stone-500);
  --bc-border-strong: var(--bc-stone-400);
  --bc-bevel-light: var(--bc-stone-500);
  --bc-bevel-dark: var(--bc-stone-900);
  --bc-primary: var(--bc-grass-500);
  --bc-primary-hover: #34741F;
  --bc-primary-active: var(--bc-grass-600);
  --bc-primary-text: var(--bc-grass-300);
  --bc-secondary: var(--bc-gold-300);
  --bc-link: var(--bc-grass-300);
  --bc-link-hover: var(--bc-grass-100);
  --bc-link-on-light: var(--bc-grass-600);
  --bc-focus-ring: #1E6BE0;
  --bc-focus-halo: var(--bc-stone-0);
  --bc-disabled-bg: var(--bc-stone-500);
  --bc-disabled-text: var(--bc-stone-400);
  --bc-success: var(--bc-grass-300);
  --bc-warning: var(--bc-gold-300);
  --bc-error: var(--bc-redstone-300);
  --bc-info: var(--bc-diamond-300);
  --bc-success-bg: rgba(58, 127, 37, 0.16);
  --bc-warning-bg: rgba(255, 199, 46, 0.14);
  --bc-error-bg: rgba(204, 58, 53, 0.18);
  --bc-info-bg: rgba(31, 182, 204, 0.14);
  --bc-secondary-hover-bg: rgba(58, 127, 37, .14);
  --bc-secondary-active-bg: rgba(58, 127, 37, .24);
  --bc-hero-overlay: linear-gradient(0deg, rgba(18,17,16,.85) 0%, rgba(18,17,16,0) 45%);
  --bc-backdrop: rgba(0, 0, 0, .7);
}

/* ============ §16 Tokens ============ */
:root {
  /* Display face matches the logo font (Noto Sans), not the pixel face — user call, clashed with theme. */
  --bc-font-display: "Noto Sans", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --bc-font-body: "Noto Sans", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --bc-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --bc-fs-display: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
  --bc-fs-h1: clamp(2.5rem, 1.9rem + 1.9vw, 3.5rem);
  --bc-fs-h2: clamp(2rem, 1.6rem + 1.25vw, 2.75rem);
  --bc-fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --bc-fs-h4: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
  --bc-fs-h5: 0.875rem;
  --bc-fs-body-lg: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
  --bc-fs-body: 1rem;
  --bc-fs-body-sm: 0.875rem;
  --bc-fs-caption: 0.75rem;
  --bc-lh-tight: 1.0; --bc-lh-heading: 1.1; --bc-lh-snug: 1.25; --bc-lh-body: 1.6;
  --bc-ls-display: -0.015em; --bc-ls-button: 0.02em; --bc-ls-eyebrow: 0.04em; /* Thai glyphs look broken when tracked wide */
  --bc-fw-regular: 400; --bc-fw-semibold: 600; --bc-fw-bold: 700; --bc-fw-black: 800;

  --bc-space-1: 4px; --bc-space-2: 8px; --bc-space-3: 12px; --bc-space-4: 16px; --bc-space-5: 24px;
  --bc-space-6: 32px; --bc-space-7: 48px; --bc-space-8: 64px; --bc-space-9: 96px; --bc-space-10: 128px;
  --bc-section-y: clamp(56px, 4rem + 2.5vw, 96px);
  --bc-gutter: 16px;

  /* One content width site-wide so every band, the header and the hero share the same left/right edge. */
  --bc-container-text: 720px; --bc-container: 1600px; --bc-container-wide: 1600px; --bc-container-bleed: 2560px;
  --bc-radius-0: 0; --bc-radius-round: 50%;

  --bc-border-1: 1px solid var(--bc-border);
  --bc-border-2: 2px solid var(--bc-border);
  --bc-border-btn: 2px solid var(--bc-stone-800);

  --bc-shadow-bevel: inset 0 4px 0 0 var(--bc-bevel-light), inset 4px 0 0 0 var(--bc-bevel-light), inset 0 -4px 0 0 var(--bc-bevel-dark), inset -4px 0 0 0 var(--bc-bevel-dark);
  --bc-shadow-bevel-pressed: inset 0 4px 0 0 var(--bc-bevel-dark), inset 4px 0 0 0 var(--bc-bevel-dark), inset 0 -4px 0 0 var(--bc-bevel-light), inset -4px 0 0 0 var(--bc-bevel-light);
  --bc-shadow-button: inset 0 -4px 0 0 rgba(0,0,0,.28), inset 0 2px 0 0 rgba(255,255,255,.22);
  --bc-shadow-offset: 0 4px 0 0 rgba(0,0,0,.3);

  --bc-gradient-grass: linear-gradient(180deg, var(--bc-grass-300), var(--bc-grass-400) 50%, var(--bc-grass-500));
  --bc-gradient-stone: linear-gradient(180deg, var(--bc-stone-500), var(--bc-stone-600) 50%, var(--bc-stone-700));

  --bc-duration-fast: 100ms; --bc-duration-base: 200ms; --bc-duration-slow: 300ms; --bc-duration-slide: 600ms;
  --bc-ease-standard: cubic-bezier(.2, 0, 0, 1); --bc-ease-out: cubic-bezier(0, 0, .2, 1); --bc-ease-steps: steps(4, end);

  --bc-z-header: 100; --bc-z-dropdown: 200; --bc-z-modal: 300; --bc-z-toast: 400;
  --bc-header-h: 64px;
}
@media (min-width: 576px) { :root { --bc-gutter: 24px; } }
@media (min-width: 1200px) { :root { --bc-gutter: 48px; --bc-header-h: 72px; } }
@media (min-width: 1440px) { :root { --bc-gutter: 72px; } }

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bc-header-h) + var(--bc-space-4)); }
body {
  margin: 0; background: var(--bc-bg-base); color: var(--bc-text);
  font-family: var(--bc-font-body); font-size: var(--bc-fs-body); line-height: var(--bc-lh-body);
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
}
main { flex: 1; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, p { margin: 0; }
.display, h1, .h1, h2, .h2 { font-family: var(--bc-font-display); font-weight: var(--bc-fw-black); letter-spacing: var(--bc-ls-display); }
.display { font-size: var(--bc-fs-display); line-height: var(--bc-lh-tight); }
h1, .h1 { font-size: var(--bc-fs-h1); line-height: var(--bc-lh-heading); }
h2, .h2 { font-size: var(--bc-fs-h2); line-height: var(--bc-lh-heading); letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--bc-fs-h3); line-height: var(--bc-lh-snug); font-weight: var(--bc-fw-bold); letter-spacing: .01em; }
h4, .h4 { font-size: var(--bc-fs-h4); line-height: 1.4; font-weight: var(--bc-fw-bold); }
h5, .h5, .eyebrow { font-size: var(--bc-fs-h5); line-height: 20px; font-weight: var(--bc-fw-bold); letter-spacing: var(--bc-ls-eyebrow); text-transform: uppercase; }
.eyebrow { color: var(--bc-primary-text); }
.body-lg { font-size: var(--bc-fs-body-lg); line-height: 1.6; }
.body-sm { font-size: var(--bc-fs-body-sm); line-height: 22px; letter-spacing: .01em; }
.caption { font-size: var(--bc-fs-caption); line-height: 18px; letter-spacing: .02em; }
.muted { color: var(--bc-text-muted); }
.mono { font-family: var(--bc-font-mono); }
.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--bc-space-4); }
a { color: var(--bc-link); text-decoration: none; transition: color var(--bc-duration-base) var(--bc-ease-standard); }
a:hover { color: var(--bc-link-hover); text-decoration: underline; }
.prose a { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--bc-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bc-focus-halo); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--bc-space-4); top: -100px; z-index: var(--bc-z-toast); background: var(--bc-bg-deep); color: var(--bc-text); padding: var(--bc-space-3) var(--bc-space-4); }
.skip-link:focus { top: var(--bc-space-4); }
hr, .divider { border: 0; border-top: var(--bc-border-1); margin: var(--bc-space-5) 0; }

/* ============ §5 Layout ============ */
.container { width: 100%; max-width: calc(var(--bc-container) + 2 * var(--bc-gutter)); margin: 0 auto; padding: 0 var(--bc-gutter); }
.container--wide { max-width: calc(var(--bc-container-wide) + 2 * var(--bc-gutter)); }
.container--text { max-width: calc(var(--bc-container-text) + 2 * var(--bc-gutter)); }
.band { padding: var(--bc-section-y) 0; background: var(--bc-bg-base); }
.band--base, .band--deep { --bc-card-bg: var(--bc-surface); }
.band--raised { background: var(--bc-bg-raised); --bc-card-bg: var(--bc-bg-base); }
.band--deep { background: var(--bc-bg-deep); }
.band--tight { padding: var(--bc-space-7) 0; }
.section-head { text-align: center; display: grid; gap: var(--bc-space-3); justify-items: center; margin-bottom: var(--bc-space-7); }
.section-head p { max-width: 60ch; }
.section-head--split { display: flex; align-items: end; justify-content: space-between; gap: var(--bc-space-4); text-align: left; flex-wrap: wrap; }
@media (max-width: 767.98px) { .section-head { margin-bottom: var(--bc-space-6); } }
.grid { display: grid; gap: var(--bc-space-4); grid-template-columns: 1fr; }
@media (min-width: 576px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid { gap: var(--bc-space-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.stack > * + * { margin-top: var(--bc-space-4); }
.row { display: flex; gap: var(--bc-space-4); align-items: center; flex-wrap: wrap; }
/* Search/filter bar: the input must not take the whole line and push the button under it. */
.filter-form { display: flex; gap: var(--bc-space-3); align-items: center; flex-wrap: wrap; }
.filter-form .input { width: auto; flex: 1 1 180px; min-width: 160px; max-width: 280px; }
.filter-form .btn { flex: none; }
.row--between { justify-content: space-between; }

/* ============ §6 Header ============ */
.header {
  position: sticky; top: 0; z-index: var(--bc-z-header); height: var(--bc-header-h);
  background: var(--bc-surface-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--bc-shadow-offset); border-bottom: 1px solid transparent;
}
.header__inner { height: 100%; display: flex; align-items: center; gap: var(--bc-space-4); max-width: calc(var(--bc-container-wide) + 2 * var(--bc-gutter)); margin: 0 auto; padding: 0 var(--bc-gutter); }
@media (min-width: 1200px) { .header__inner { gap: var(--bc-space-6); } }
.logo { display: inline-flex; align-items: center; gap: var(--bc-space-3); color: var(--bc-text); font-family: var(--bc-font-body); font-weight: var(--bc-fw-black); font-size: 20px; letter-spacing: .04em; line-height: 1; min-height: 44px; }
.logo:hover { color: var(--bc-text); text-decoration: none; }
.logo__mark { width: 32px; height: 32px; image-rendering: pixelated; }
@media (min-width: 576px) { .logo { font-size: 22px; } }
.nav { display: none; align-items: stretch; height: 100%; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--bc-space-4); color: var(--bc-text-muted);
  font-size: 15px; font-weight: var(--bc-fw-semibold); letter-spacing: .02em; border-bottom: 4px solid transparent; border-top: 4px solid transparent;
}
.nav a:hover { color: var(--bc-text); text-decoration: none; border-bottom-color: var(--bc-surface-hover); }
.nav a[aria-current="page"] { color: var(--bc-text); border-bottom-color: var(--bc-primary); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--bc-space-4); }
/* Two classes so .btn / .chip (declared later) cannot turn these back on at phone width. */
.header__actions .header__desktop-only { display: none; }
@media (min-width: 1200px) { .nav { display: flex; } .header__actions .header__desktop-only { display: inline-flex; } .menu-toggle { display: none; } }
@media (max-width: 575.98px) { .header__actions { gap: var(--bc-space-2); } }
.points-chip { display: inline-flex; align-items: center; gap: var(--bc-space-2); height: 40px; padding: 0 var(--bc-space-3); background: var(--bc-bg-deep); border: var(--bc-border-2); color: var(--bc-text); font-weight: 700; font-size: var(--bc-fs-body-sm); }
.points-chip:hover { text-decoration: none; color: var(--bc-text); border-color: var(--bc-border-strong); }
/* The balance chip fits from tablet width up; phones see the balance in the menu panel instead. */
@media (max-width: 767.98px) { .points-chip { display: none; } }
.points-chip__icon { width: 12px; height: 12px; background: var(--bc-secondary); box-shadow: inset -3px -3px 0 var(--bc-gold-500); }

.menu-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; background: transparent; border: 2px solid var(--bc-border); color: var(--bc-text); cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
.mobile-panel {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); background: var(--bc-bg-base); z-index: var(--bc-z-modal);
  transform: translateX(100%); transition: transform var(--bc-duration-slow) var(--bc-ease-out); display: flex; flex-direction: column; visibility: hidden;
  box-shadow: var(--bc-shadow-offset);
}
.mobile-panel[data-open="true"] { transform: none; visibility: visible; }
.mobile-panel__head { height: var(--bc-header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--bc-gutter); border-bottom: var(--bc-border-1); }
.mobile-panel nav { overflow-y: auto; flex: 1; }
.mobile-panel nav a, .mobile-panel nav button.linklike { display: flex; align-items: center; min-height: 56px; padding: 0 var(--bc-gutter); border-bottom: var(--bc-border-1); color: var(--bc-text); font-size: 18px; font-weight: 600; width: 100%; }
.mobile-panel nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--bc-primary); }
.mobile-panel__foot { padding: var(--bc-space-4) var(--bc-gutter); border-top: var(--bc-border-1); }
.scrim { position: fixed; inset: 0; background: var(--bc-backdrop); z-index: calc(var(--bc-z-modal) - 1); }
body.nav-open { overflow: hidden; }

.announcement { background: var(--bc-warning-bg); color: var(--bc-warning); text-align: center; padding: var(--bc-space-2) var(--bc-gutter); font-size: var(--bc-fs-body-sm); font-weight: 700; }

/* ============ §10 Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-space-2);
  min-width: 96px; height: 48px; padding: 0 var(--bc-space-5); border-radius: 0; border: 2px solid transparent;
  font-family: var(--bc-font-body); font-size: 15px; line-height: 20px; font-weight: var(--bc-fw-black);
  letter-spacing: var(--bc-ls-button); text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--bc-duration-base) var(--bc-ease-standard), color var(--bc-duration-base) var(--bc-ease-standard), transform var(--bc-duration-fast) var(--bc-ease-standard);
}
.btn:hover { text-decoration: none; }
.btn--sm { height: 40px; padding: 0 var(--bc-space-4); font-size: 14px; position: relative; }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; min-width: 160px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--bc-primary); color: var(--bc-stone-0); border: var(--bc-border-btn); box-shadow: var(--bc-shadow-button); }
.btn--primary:hover { background: var(--bc-primary-hover); color: var(--bc-stone-0); }
.btn--primary:active { background: var(--bc-primary-active); box-shadow: none; transform: translateY(2px); }
.btn--secondary { background: transparent; border-color: var(--bc-primary); color: var(--bc-primary-text); }
.btn--secondary:hover { background: var(--bc-secondary-hover-bg); color: var(--bc-grass-200); }
.btn--secondary:active { background: var(--bc-secondary-active-bg); }
.btn--danger { background: transparent; border-color: var(--bc-redstone-500); color: var(--bc-error); }
.btn--danger:hover { background: var(--bc-error-bg); color: var(--bc-error); }
.btn--ghost { background: none; border: 0; min-width: 0; padding: 0; height: auto; min-height: 44px; color: var(--bc-link); font-weight: 700; text-transform: none; letter-spacing: 0; }
.btn--ghost:hover { color: var(--bc-link-hover); text-decoration: underline; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bc-disabled-bg); color: var(--bc-disabled-text); border-color: var(--bc-disabled-bg); box-shadow: none; cursor: not-allowed; transform: none; }
.btn--secondary:disabled { background: transparent; border-color: var(--bc-disabled-text); }
.btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; position: absolute; width: 6px; height: 6px; background: var(--bc-stone-0); box-shadow: -12px 0 0 var(--bc-stone-0), 12px 0 0 var(--bc-stone-0); animation: bc-pulse 1s var(--bc-ease-steps) infinite; }
@keyframes bc-pulse { 50% { opacity: .3; } }
.btn-group { display: flex; gap: var(--bc-space-4); flex-wrap: wrap; }
@media (max-width: 767.98px) { .btn-group--stack { flex-direction: column; } .btn-group--stack .btn { width: 100%; } }
.inline-form { display: inline-block; margin: 0; }
.inline-form + .inline-form, .btn + .inline-form, .inline-form + .btn { margin-left: var(--bc-space-3); }
button.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--bc-link); cursor: pointer; text-align: left; }

/* ============ §7 Hero ============ */
.hero { position: relative; background: var(--bc-bg-deep); max-width: var(--bc-container-bleed); margin: 0 auto; }
.hero__media { position: relative; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; image-rendering: pixelated; }
/* Cover only (user, 2026-10-08): full-bleed picture, no text box, no buttons. The bottom fades into the page;
   with 2+ slides small square dots sit at the bottom centre. */
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--bc-bg-deep) 0%, rgba(18,17,16,0) 18%); }
.hero__media img { will-change: transform; }
.hero__overlay { position: absolute; inset: auto 0 var(--bc-space-5) 0; display: flex; justify-content: center; }
.hero__controls { display: flex; gap: var(--bc-space-2); }
.hero__dot { width: 14px; height: 14px; padding: 0; border: 2px solid rgba(0, 0, 0, .6); background: rgba(255, 255, 255, .55); cursor: pointer; }
.hero__dot[aria-current="true"] { background: var(--bc-primary); }
@media (max-width: 767.98px) { .hero__media { aspect-ratio: 16 / 10; width: 100%; } }
@media (min-width: 768px) { .hero__media { height: max(60vh, 480px); } }
@media (min-width: 1200px) { .hero__media { height: min(80vh, 820px); } }
.page-hero { position: relative; height: 360px; background: var(--bc-bg-deep); overflow: hidden; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; image-rendering: pixelated; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: var(--bc-hero-overlay); }
.page-hero .container { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--bc-space-3); padding-bottom: var(--bc-space-7); }
.page-hero--short { height: 240px; }

/* ============ Panels & cards (§8, §9) ============ */
.panel { background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel); border: 1px solid transparent; padding: var(--bc-space-6); }
.panel--tight { padding: var(--bc-space-5); }
@media (max-width: 767.98px) { .panel { padding: var(--bc-space-5); } }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel);
  border: 1px solid transparent; color: var(--bc-text); height: 100%;
  transition: background-color var(--bc-duration-base) var(--bc-ease-standard), transform var(--bc-duration-base) var(--bc-ease-standard);
}
a.card:hover { background: var(--bc-surface-hover); transform: translateY(-4px); text-decoration: none; color: var(--bc-text); }
a.card:active { transform: translateY(0); box-shadow: var(--bc-shadow-bevel-pressed); }
.card__media { overflow: hidden; aspect-ratio: 16 / 9; background: var(--bc-bg-deep); padding: 4px 4px 0; }
.card__media--square { aspect-ratio: 1 / 1; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--bc-duration-base) var(--bc-ease-standard); image-rendering: pixelated; }
a.card:hover .card__media img { transform: scale(1.03); }
.card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--bc-gradient-stone); }
.card__placeholder span { width: 48px; height: 48px; background: var(--bc-primary); box-shadow: inset -8px -8px 0 var(--bc-grass-600), inset 8px 8px 0 var(--bc-grass-400); }
.card__body { padding: 20px; display: flex; flex-direction: column; gap: var(--bc-space-2); flex: 1; }
@media (max-width: 767.98px) { .card__body { padding: var(--bc-space-4); } }
.card__eyebrow { font-size: var(--bc-fs-caption); line-height: 18px; text-transform: uppercase; font-weight: 700; letter-spacing: var(--bc-ls-eyebrow); color: var(--bc-primary-text); }
.card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__text { color: var(--bc-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { margin-top: auto; padding-top: var(--bc-space-2); font-size: var(--bc-fs-caption); color: var(--bc-text-subtle); display: flex; justify-content: space-between; align-items: center; gap: var(--bc-space-2); }
.price { font-weight: 800; color: var(--bc-text); font-size: var(--bc-fs-body); display: inline-flex; align-items: center; gap: var(--bc-space-2); }
.price::before { content: ""; width: 12px; height: 12px; background: var(--bc-secondary); box-shadow: inset -3px -3px 0 var(--bc-gold-500); }
.feature-card { padding: var(--bc-space-5); gap: var(--bc-space-3); }
.feature-icon { width: 48px; height: 48px; display: grid; grid-template-columns: repeat(4, 1fr); }
.feature-icon i { display: block; }

/* Server info panel (§8.6) */
.server-panel { display: grid; gap: var(--bc-space-6); align-items: center; }
@media (min-width: 900px) { .server-panel { grid-template-columns: 1fr minmax(340px, 400px); gap: var(--bc-space-7); align-items: stretch; } }
.stat-cells { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bc-space-3); }
@media (min-width: 1200px) { .stat-cells { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { display: grid; gap: var(--bc-space-1); align-content: start; padding: var(--bc-space-4); background: var(--bc-bg-deep); border: var(--bc-border-1); }
.stat-cell__value { font-size: var(--bc-fs-h4); font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: var(--bc-space-2); font-weight: 700; }
.status::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.status--online { color: var(--bc-success); } .status--offline { color: var(--bc-error); } .status--degraded { color: var(--bc-warning); }

/* IP chip */
.ip-chip { display: flex; align-items: stretch; height: 48px; background: var(--bc-bg-deep); border: var(--bc-border-2); }
.ip-chip__text { flex: 1; display: flex; align-items: center; padding: 0 var(--bc-space-4); font-family: var(--bc-font-mono); font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ip-chip__btn { min-width: 96px; border: 0; border-left: var(--bc-border-2); background: transparent; color: var(--bc-primary-text); font: 800 14px/1 var(--bc-font-body); text-transform: uppercase; letter-spacing: var(--bc-ls-button); cursor: pointer; }
.ip-chip__btn:hover { background: var(--bc-secondary-hover-bg); }

/* Promo band (§8.4) */
.promo { position: relative; background: var(--bc-bg-deep); overflow: hidden; aspect-ratio: 4 / 5; max-width: var(--bc-container-bleed); margin: 0 auto; }
@media (min-width: 768px) { .promo { aspect-ratio: 16 / 9; } }
@media (min-width: 1200px) { .promo { aspect-ratio: 21 / 9; } }
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; image-rendering: pixelated; }
.promo::after { content: ""; position: absolute; inset: 0; background: var(--bc-hero-overlay); }
.promo__content { position: absolute; inset: auto 0 12% 0; z-index: 1; text-align: center; display: grid; gap: var(--bc-space-5); justify-items: center; padding: 0 var(--bc-gutter); }
@media (max-width: 767.98px) { .promo__content .display { font-size: 32px; line-height: 36px; } }

/* Image + text (§8.3) */
.media-text { display: grid; gap: var(--bc-space-6); align-items: center; }
.media-text__img { box-shadow: var(--bc-shadow-bevel); background: var(--bc-card-bg); padding: 4px; aspect-ratio: 16 / 9; }
.media-text__img img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.media-text__text { display: grid; gap: var(--bc-space-4); justify-items: start; }
@media (min-width: 768px) { .media-text { grid-template-columns: 1fr 1fr; } .media-text--flip .media-text__img { order: 2; } }
@media (min-width: 1200px) { .media-text { grid-template-columns: 7fr 5fr; gap: var(--bc-space-7); } .media-text--flip { grid-template-columns: 5fr 7fr; } }
.media-text + .media-text { margin-top: var(--bc-space-9); }

/* Community stats (§8.7) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--bc-space-4); text-align: center; max-width: 880px; margin-inline: auto; }
.stats > div { padding: var(--bc-space-5) var(--bc-space-4); background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel); border: 1px solid transparent; }
.stat__num { font-family: var(--bc-font-display); font-size: var(--bc-fs-h1); line-height: var(--bc-lh-heading); font-weight: 600; }

/* CTA banner (§8.8) */
.cta { display: grid; gap: var(--bc-space-5); justify-items: center; text-align: center; }
@media (min-width: 1200px) { .cta { grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; align-items: center; gap: var(--bc-space-6); } }
.cta__icon { width: 64px; height: 64px; image-rendering: pixelated; }

/* ============ §15 Components ============ */
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--bc-space-2); font-size: var(--bc-fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; background: var(--bc-info-bg); color: var(--bc-info); }
.badge--success { background: var(--bc-success-bg); color: var(--bc-success); }
.badge--warning { background: var(--bc-warning-bg); color: var(--bc-warning); }
.badge--error { background: var(--bc-error-bg); color: var(--bc-error); }
.badge--neutral { background: var(--bc-bg-deep); color: var(--bc-text-muted); }

.tabs { display: flex; gap: 0; border-bottom: var(--bc-border-1); overflow-x: auto; margin-bottom: var(--bc-space-6); scrollbar-width: thin; }
.tabs a { flex: none; display: flex; align-items: center; height: 48px; padding: 0 var(--bc-space-4); color: var(--bc-text-muted); font-weight: 600; border-bottom: 4px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--bc-text); text-decoration: none; border-bottom-color: var(--bc-surface-hover); }
.tabs a[aria-current="page"] { color: var(--bc-text); border-bottom-color: var(--bc-primary); }

.field { display: grid; gap: var(--bc-space-2); }
.field + .field, .field + .field-row, .field-row + .field { margin-top: var(--bc-space-4); }
.field-row { display: grid; gap: var(--bc-space-4); align-items: start; }
.field-row > .field + .field { margin-top: 0; }
@media (min-width: 768px) { .field-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
label, .label { font-size: var(--bc-fs-body-sm); font-weight: 700; }
.hint { font-size: var(--bc-fs-body-sm); color: var(--bc-text-muted); }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 0 var(--bc-space-4); background: var(--bc-bg-deep); color: var(--bc-text);
  border: var(--bc-border-2); border-radius: 0; font: 400 16px/26px var(--bc-font-body);
  transition: border-color var(--bc-duration-base) var(--bc-ease-standard);
}
textarea.input { padding: var(--bc-space-3) var(--bc-space-4); min-height: 120px; resize: vertical; }
textarea.input.mono { font-family: var(--bc-font-mono); font-size: 14px; }
.input:focus { border-color: var(--bc-primary); outline: none; }
.input:focus-visible { outline: 2px solid var(--bc-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bc-focus-halo); }
.input[aria-invalid="true"] { border-color: var(--bc-error); }
.input:disabled { color: var(--bc-disabled-text); border-color: var(--bc-disabled-bg); cursor: not-allowed; }
input[type="file"].input { padding: var(--bc-space-2); }
.check { display: flex; align-items: center; gap: var(--bc-space-3); min-height: 44px; font-weight: 400; font-size: var(--bc-fs-body); }
.check input { width: 20px; height: 20px; accent-color: var(--bc-primary); }
.form-error { display: flex; gap: var(--bc-space-2); color: var(--bc-error); font-size: var(--bc-fs-body-sm); }

.alert { display: flex; gap: var(--bc-space-3); padding: var(--bc-space-3) var(--bc-space-4); box-shadow: inset 4px 0 0 var(--bc-info); background: var(--bc-info-bg); color: var(--bc-text); border: 1px solid transparent; }
.alert--success { box-shadow: inset 4px 0 0 var(--bc-success); background: var(--bc-success-bg); }
.alert--error { box-shadow: inset 4px 0 0 var(--bc-error); background: var(--bc-error-bg); }
.alert--warning { box-shadow: inset 4px 0 0 var(--bc-warning); background: var(--bc-warning-bg); }
.alert strong { flex: none; }

.toasts { position: fixed; z-index: var(--bc-z-toast); right: var(--bc-space-5); bottom: var(--bc-space-5); display: grid; gap: var(--bc-space-3); width: min(420px, calc(100% - 2 * var(--bc-space-4))); }
@media (max-width: 767.98px) { .toasts { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--bc-space-4); } }
.toast { background: var(--bc-surface); box-shadow: var(--bc-shadow-bevel), inset 8px 0 0 var(--bc-info); border: 1px solid transparent; padding: var(--bc-space-4) var(--bc-space-4) var(--bc-space-4) var(--bc-space-6); display: flex; gap: var(--bc-space-3); align-items: start; }
.toast--success { box-shadow: var(--bc-shadow-bevel), inset 8px 0 0 var(--bc-success); }
.toast--error { box-shadow: var(--bc-shadow-bevel), inset 8px 0 0 var(--bc-error); }
.toast p { flex: 1; }
.toast__close { width: 44px; height: 44px; margin: -12px -12px -12px 0; background: none; border: 0; color: var(--bc-text-muted); font-size: 20px; cursor: pointer; }

.modal { border: 1px solid transparent; padding: 0; background: var(--bc-surface); color: var(--bc-text); box-shadow: var(--bc-shadow-bevel); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); }
.modal::backdrop { background: var(--bc-backdrop); }
.modal__inner { padding: var(--bc-space-6); display: grid; gap: var(--bc-space-4); position: relative; }
.modal__close { position: absolute; top: var(--bc-space-2); right: var(--bc-space-2); width: 44px; height: 44px; background: none; border: 0; color: var(--bc-text-muted); font-size: 24px; cursor: pointer; }

.table-wrap { overflow-x: auto; background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel); border: 1px solid transparent; padding: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--bc-fs-body-sm); }
.table th, .table td { text-align: left; padding: var(--bc-space-3) var(--bc-space-4); border-bottom: var(--bc-border-1); vertical-align: middle; }
.table th { font-size: var(--bc-fs-caption); text-transform: uppercase; letter-spacing: var(--bc-ls-eyebrow); color: var(--bc-text-muted); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.wrap { max-width: 360px; word-break: break-word; }
.empty { padding: var(--bc-space-7) var(--bc-space-4); text-align: center; color: var(--bc-text-muted); }

.chips { display: flex; gap: var(--bc-space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--bc-space-4); }
.chips + :not(.chips) { margin-top: var(--bc-space-6); }
.chips__label { flex: none; min-width: 88px; font-size: var(--bc-fs-caption); font-weight: 700; color: var(--bc-text-muted); letter-spacing: var(--bc-ls-eyebrow); }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--bc-space-4); border: var(--bc-border-2); background: var(--bc-bg-deep); color: var(--bc-text-muted); font-size: var(--bc-fs-body-sm); font-weight: 600; }
.chip:hover { color: var(--bc-text); text-decoration: none; border-color: var(--bc-border-strong); }
.chip[aria-current="page"] { border-color: var(--bc-primary); color: var(--bc-text); background: var(--bc-secondary-hover-bg); }


.qr { background: var(--bc-stone-0); padding: var(--bc-space-3); width: 100%; max-width: 280px; image-rendering: pixelated; }
.qr.qr--static { image-rendering: auto; max-width: 420px; height: auto; margin-inline: auto; display: block; }
.avatar { width: 64px; height: 64px; image-rendering: pixelated; background: var(--bc-bg-deep); }
.rank-num { font-family: var(--bc-font-mono); color: var(--bc-text-muted); }
.rank-1 { color: var(--bc-gold-300); } .rank-2 { color: var(--bc-stone-200); } .rank-3 { color: var(--bc-gold-500); }

/* ============ Footer ============ */
.legal { background: var(--bc-bg-base); padding: var(--bc-space-6) 0; }
.footer { background: var(--bc-bg-deep); border-top: 4px solid var(--bc-stone-500); padding: var(--bc-space-7) 0 0; }
.footer__grid { display: grid; gap: var(--bc-space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.footer h5 { margin-bottom: var(--bc-space-3); color: var(--bc-text); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--bc-text-muted); font-size: var(--bc-fs-body-sm); }
.footer li a:hover { color: var(--bc-text); }
.footer__bar a { color: var(--bc-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer__bar a:hover { color: var(--bc-text); }
.footer__bar { margin-top: var(--bc-space-7); background: var(--bc-bg-raised); padding: var(--bc-space-4) 0; color: var(--bc-text-subtle); }

/* ============ §12 Motion ============ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--bc-duration-slow) var(--bc-ease-out), transform var(--bc-duration-slow) var(--bc-ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
  .reveal { transform: none; transition: opacity 150ms linear !important; }
  a.card:hover, a.card:hover .card__media img, .btn--primary:active { transform: none; }
}
@media (forced-colors: active) {
  .btn, .card, .panel, .table-wrap, .toast, .modal, .header { border: 1px solid CanvasText; }
  .status::before, .price::before, .points-chip__icon { forced-color-adjust: none; }
}

/* ============ Admin ============ */
.admin { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - var(--bc-header-h)); }
@media (min-width: 1200px) { .admin { grid-template-columns: 240px 1fr; } }
.admin__side { background: var(--bc-bg-deep); border-right: var(--bc-border-1); padding: var(--bc-space-4) 0; }
.admin__side a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--bc-space-5); color: var(--bc-text-muted); font-weight: 600; font-size: var(--bc-fs-body-sm); }
.admin__side a:hover { color: var(--bc-text); background: var(--bc-bg-raised); text-decoration: none; }
.admin__side a[aria-current="page"] { color: var(--bc-text); box-shadow: inset 4px 0 0 var(--bc-primary); background: var(--bc-bg-raised); }
.admin__side h5 { color: var(--bc-text-subtle); padding: var(--bc-space-4) var(--bc-space-5) var(--bc-space-2); font-size: var(--bc-fs-caption); }
/* Groups are drawers so a heading never reads as a clickable item. */
.admin__group { border-bottom: var(--bc-border-1); }
.admin__group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-2);
  min-height: 48px; padding: 0 var(--bc-space-5); cursor: pointer; list-style: none;
  color: var(--bc-text-subtle); font-size: var(--bc-fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.admin__group > summary::-webkit-details-marker { display: none; }
.admin__group > summary::after { content: "+"; font-weight: 700; color: var(--bc-text-subtle); }
.admin__group[open] > summary::after { content: "−"; }
.admin__group > summary:hover { color: var(--bc-text); background: var(--bc-bg-raised); }
.admin__group > summary:focus-visible { outline: 2px solid var(--bc-focus-ring); outline-offset: -2px; }
.admin__group a { padding-left: var(--bc-space-6); }
.admin__foot { padding: var(--bc-space-4) var(--bc-space-5); display: flex; justify-content: center; }
.admin__foot .btn { width: 100%; }
@media (max-width: 1199.98px) {
  .admin__side { display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: var(--bc-border-1); }
  .admin__side h5 { display: none; }
  .admin__side a { flex: none; }
  /* On a narrow screen the drawers flatten into one scrolling strip of links. */
  .admin__group { display: flex; border-bottom: 0; }
  .admin__group > summary { display: none; }
  .admin__group a { padding-left: var(--bc-space-5); }
  .admin__foot { padding: 0; }
  .admin__foot .btn { width: auto; }
}
.admin__main { padding: var(--bc-space-6) var(--bc-gutter) var(--bc-space-9); --bc-card-bg: var(--bc-surface); min-width: 0; }
.admin__main h1 { font-size: 40px; line-height: 44px; margin-bottom: var(--bc-space-6); }
.kpis { display: grid; gap: var(--bc-space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--bc-space-6); }
.kpi { display: grid; gap: var(--bc-space-1); }
.kpi__value { font-family: var(--bc-font-display); font-size: 36px; line-height: 40px; }
.bars { display: flex; align-items: end; gap: var(--bc-space-2); height: 160px; padding-top: var(--bc-space-4); }
.bars__col { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: var(--bc-space-1); height: 100%; text-align: center; }
.bars__bar { align-self: end; background: var(--bc-primary); box-shadow: var(--bc-shadow-button); min-height: 2px; }
.code-list { font-family: var(--bc-font-mono); background: var(--bc-bg-deep); padding: var(--bc-space-4); white-space: pre-wrap; user-select: all; }
.two-col { display: grid; gap: var(--bc-space-5); }
@media (min-width: 1200px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.page-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--bc-space-4); flex-wrap: wrap; margin-bottom: var(--bc-space-6); }
.page-actions h1 { margin-bottom: 0; }
.slip-img { max-width: 100%; max-height: 70vh; background: var(--bc-stone-0); }

/* Utilities (inline style attributes are blocked by CSP) */
.text-center { text-align: center; }
.justify-center { justify-content: center; }
.mt-4 { margin-top: var(--bc-space-4); } .mt-5 { margin-top: var(--bc-space-5); } .mt-6 { margin-top: var(--bc-space-6); } .mt-7 { margin-top: var(--bc-space-7); }
.mb-4 { margin-bottom: var(--bc-space-4); } .mb-6 { margin-bottom: var(--bc-space-6); }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }

/* Hero carousel thumbs (§7: square 64px, active = 4px primary outline) */
.hero__slide[hidden] { display: none; }
.pixel-icon { image-rendering: pixelated; }

/* Product accent: a 4px top bar from a token ramp (flat colour, no gradients) */
.product-card { --accent: var(--bc-stone-500); }
.product-card--grass { --accent: var(--bc-grass-400); }
.product-card--gold { --accent: var(--bc-gold-500); }
.product-card--diamond { --accent: var(--bc-diamond-500); }
.product-card--redstone { --accent: var(--bc-redstone-500); }
.product-card .card__media { box-shadow: inset 0 4px 0 var(--accent); padding-top: 8px; }
.price--rp::before { background: var(--bc-diamond-300); box-shadow: inset -3px -3px 0 var(--bc-diamond-700); }

.auth-card { display: grid; gap: var(--bc-space-5); max-width: 520px; margin: 0 auto; }
.auth-card > .divider { margin: var(--bc-space-2) 0; }
.product-layout { display: grid; gap: var(--bc-space-6); align-items: start; }
.product-layout .media-text__img { aspect-ratio: 1 / 1; }
@media (min-width: 768px) { .product-layout { grid-template-columns: 5fr 7fr; gap: var(--bc-space-7); } }
p.input { display: flex; align-items: center; margin: 0; }

.account-head { display: grid; gap: var(--bc-space-5); align-items: center; grid-template-columns: auto 1fr; }
.account-balances { grid-column: 1 / -1; display: flex; gap: var(--bc-space-6); align-items: center; flex-wrap: wrap; }
@media (min-width: 768px) { .account-head { grid-template-columns: auto 1fr auto; } .account-balances { grid-column: auto; } }
.text-success { color: var(--bc-success); } .text-error { color: var(--bc-error); }

.thumb { width: 40px; height: 40px; object-fit: cover; background: var(--bc-bg-deep); image-rendering: pixelated; }
.thumb--lg { width: 120px; height: auto; aspect-ratio: auto; }
.input--sm { min-height: 40px; width: 120px; }
/* A lone number field should not stretch across a whole panel. */
.input--num { max-width: 240px; }
/* Table row actions: one line, evenly spaced, buttons of the same height. */
.row-actions { display: flex; align-items: center; gap: var(--bc-space-3); justify-content: flex-end; }
.row-actions .btn--ghost { min-height: 40px; }
.otp { font-size: 28px; letter-spacing: .3em; text-align: center; }
.text-warning { color: var(--bc-warning); }
.admin__main .page-actions h1 { margin-bottom: 0; }
@media (min-width: 1200px) { .header .menu-toggle { display: none; } }

/* ============ Colour templates (values come from /theme.css) ============ */
:root { --bc-on-primary: var(--bc-stone-0); --bc-primary-light: var(--bc-grass-300); --bc-primary-dark: var(--bc-grass-600); --bc-primary-glow: rgba(58,127,37,.35); --bc-heading-gradient: none; }
.btn--primary, .btn--primary:hover { color: var(--bc-on-primary); }
.btn--secondary:hover { color: var(--bc-link-hover); }
.btn[aria-busy="true"]::before { background: var(--bc-on-primary); box-shadow: -12px 0 0 var(--bc-on-primary), 12px 0 0 var(--bc-on-primary); }
.card__placeholder span { box-shadow: inset -8px -8px 0 var(--bc-primary-dark), inset 8px 8px 0 var(--bc-primary-light); }
.announcement { background: var(--bc-secondary-hover-bg); color: var(--bc-primary-text); }

/* Marketplace effects: gradient headings + glow (enabled per site setting) */
.fx-on .display, .fx-on h1, .fx-on h2, .fx-on .h2, .fx-on .stat__num, .fx-on .kpi__value {
  background: var(--bc-heading-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  /* background-clip: text only paints inside the box, and Thai marks above/below the line (ุ ู ่ ้ ั)
     stick out of a tight line-height; extend the painted area without moving the layout. */
  padding-block: .18em .22em; margin-block: -.18em -.22em;
}
.fx-on a.card:hover { box-shadow: var(--bc-shadow-bevel), 0 0 0 2px var(--bc-primary), 0 0 32px var(--bc-primary-glow); }
.fx-on .btn--primary:hover { box-shadow: var(--bc-shadow-button), 0 0 20px var(--bc-primary-glow); }
.fx-on .price { color: var(--bc-primary-text); }
@media (forced-colors: active) { .fx-on .display, .fx-on h1, .fx-on h2, .fx-on .h2, .fx-on .stat__num, .fx-on .kpi__value { background: none; color: CanvasText; } }

/* Product gradient backgrounds */
.product-card .card__media { box-shadow: none; padding-top: 4px; }
.color-swatch.has-bg, .color-pick__swatch.has-bg, .product-media.has-bg { background: var(--pc-bg); }
.card__media:has(> .card__placeholder) { background: var(--bc-bg-deep); }
.product-card.has-bg .card__media { background: var(--pc-bg); }
.product-card.has-bg .card__placeholder { background: transparent; }
.product-card.has-bg .card__media img, .product-media img { object-fit: contain; }
/* Item icons fill their canvas edge to edge; leave breathing room so the icon sits inside the slot
   instead of touching its frame (user call 2026-09-29). Padding shrinks the box, contain keeps the ratio. */
.product-card .card__media img { object-fit: contain; padding: 16%; }
/* Product pictures are 448px+ renders and artwork, not pixel art: nearest-neighbour scaling (the global img rule) made them jagged
   whenever the tile was smaller or larger than the file. Smooth scaling keeps them sharp at any size (user call 2026-10-08). */
.product-card .card__media img, .product-media img, .thumb { image-rendering: auto; }
.product-media img { padding: 16%; }
.product-media.color-swatch.has-bg, .color-pick__swatch.has-bg, .product-media.has-bg { background: var(--pc-bg); }
/* Store grid: small, dense product tiles (user call 2026-10-05: cards were too big). Two per row on phones,
   as many ~250px tiles as fit above that (was 200px; user asked for a bit bigger on 2026-10-08). The server name is left out because the shop is already one server. */
.product-desc .doc { margin-top: var(--bc-space-3); font-size: var(--bc-fs-body-sm); line-height: 1.75; overflow-wrap: anywhere; }
.md strong { font-weight: 800; color: var(--bc-text); }
.md code { font-family: var(--bc-font-mono); font-size: .9em; background: var(--bc-bg-deep); padding: 1px 6px; overflow-wrap: anywhere; }
.md .md-code { background: var(--bc-bg-deep); border: 2px solid var(--bc-border); padding: var(--bc-space-3); overflow-x: auto; white-space: pre; }
.md .md-code code { background: none; padding: 0; }
.md .md-h { font-size: var(--bc-fs-body-lg); line-height: 1.4; color: var(--bc-text); margin-top: var(--bc-space-5); }
.md > .md-h:first-child { margin-top: 0; }
.md h5.md-h { font-size: var(--bc-fs-body); }
.md .md-sub { font-size: var(--bc-fs-caption); color: var(--bc-text-muted); }
.md ul, .md ol { padding-left: 1.4em; }
.md ul { list-style: square; }
.md li::marker { color: var(--bc-primary-text); }
.md li + li { margin-top: 2px; }
.md blockquote { border-left: 4px solid var(--bc-border-strong); padding-left: var(--bc-space-3); color: var(--bc-text-muted); }
.md a { color: var(--bc-link); text-decoration: underline; }
.md-spoiler { background: var(--bc-stone-500); color: transparent; cursor: pointer; padding: 0 2px; transition: color var(--bc-duration-base); }
.md-spoiler:hover, .md-spoiler:focus { color: inherit; background: var(--bc-bg-deep); outline: none; }
.grid--products { grid-template-columns: repeat(2, 1fr); gap: var(--bc-space-3); }
@media (min-width: 576px) { .grid--products { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--bc-space-4); } }
.grid--products .card__media img { padding: 10%; }
.grid--products .card__body { padding: 14px; gap: 2px; }
.grid--products .card__eyebrow { font-size: 11px; line-height: 16px; }
.grid--products .card__title { font-size: 1.0625rem; line-height: 1.4; font-weight: 700; }
.grid--products .card__meta { padding-top: var(--bc-space-2); }
.grid--products .price { font-size: var(--bc-fs-body-sm); }
.fx-on .product-card.has-bg:hover { box-shadow: var(--bc-shadow-bevel), 0 0 0 2px var(--pc-edge), 0 0 32px var(--bc-primary-glow); }

/* Admin: colour pickers */
.color-swatch { display: block; width: 64px; height: 36px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.color-pick { display: flex; flex-wrap: wrap; gap: var(--bc-space-2); }
.color-pick__item { display: grid; justify-items: center; gap: var(--bc-space-1); cursor: pointer; font-weight: 400; min-width: 64px; }
.color-pick__item input { position: absolute; opacity: 0; pointer-events: none; }
.color-pick__swatch { width: 56px; height: 56px; border: 2px solid var(--bc-border); }
.color-pick__swatch--none { background: var(--bc-bg-deep); }
.color-pick__item input:checked + .color-pick__swatch { outline: 4px solid var(--bc-primary); outline-offset: 2px; }
.color-pick__item input:focus-visible + .color-pick__swatch { outline: 2px solid var(--bc-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bc-focus-halo); }
.input--color { padding: 4px; height: 48px; cursor: pointer; }
.gradient-preview { height: 120px; display: grid; place-items: center; box-shadow: var(--bc-shadow-bevel); background: linear-gradient(135deg, #FFF07F, #D99E22); }
.theme-grid { border: 0; margin: 0; padding: 0; display: grid; gap: var(--bc-space-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.theme-card { position: relative; display: grid; gap: var(--bc-space-3); padding: var(--bc-space-4); background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel); border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.theme-card input { position: absolute; opacity: 0; }
.theme-card__swatch { height: 64px; background: linear-gradient(180deg, color-mix(in srgb, var(--ts) 45%, white), var(--ts) 55%, color-mix(in srgb, var(--ts) 80%, black)); }
.theme-card__swatch--custom { background: linear-gradient(90deg, #CC3A35, #FFC72E, #55A638, #1FB6CC, #9B5DE5); }
.theme-card:has(input:checked) { box-shadow: var(--bc-shadow-bevel), 0 0 0 4px var(--bc-primary); }
.theme-card:has(input:focus-visible) { outline: 2px solid var(--bc-focus-ring); outline-offset: 2px; }
.theme-preview .theme-preview__heading { color: var(--bc-text); background: none; }
.theme-preview.fx-preview .theme-preview__heading { background: var(--bc-heading-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-preview .btn { pointer-events: none; }

/* Gift purchase */
.buy-mode { border: 0; padding: 0; margin: 0 0 var(--bc-space-2); display: grid; gap: var(--bc-space-2); grid-template-columns: 1fr 1fr; }
.buy-mode legend { grid-column: 1 / -1; margin-bottom: var(--bc-space-2); }
.buy-mode__option { display: flex; align-items: center; gap: var(--bc-space-2); min-height: 48px; padding: 0 var(--bc-space-3); border: var(--bc-border-2); cursor: pointer; font-weight: 600; font-size: var(--bc-fs-body-sm); }
.buy-mode__option:has(input:checked) { border-color: var(--bc-primary); background: var(--bc-secondary-hover-bg); }
.buy-mode__option input { width: 18px; height: 18px; accent-color: var(--bc-primary); }
[data-friend-field][hidden] { display: none; }

/* Monthly rewards */
.reward-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--bc-space-4); flex-wrap: wrap; }
.progress { position: relative; height: 16px; background: var(--bc-bg-deep); box-shadow: inset 0 0 0 2px var(--bc-border); }
.progress__bar { position: absolute; inset: 2px auto 2px 2px; width: 0; max-width: calc(100% - 4px); background: var(--bc-primary); box-shadow: var(--bc-shadow-button); }
.fx-on .progress__bar { background: var(--bc-heading-gradient); }
.progress__tick { position: absolute; top: -4px; width: 4px; height: 24px; margin-left: -2px; background: var(--bc-border-strong); }
.progress__tick.is-reached { background: var(--bc-on-primary); box-shadow: 0 0 0 2px var(--bc-primary); }
.reward-list { list-style: none; padding: 0; margin: var(--bc-space-2) 0 0; display: grid; gap: var(--bc-space-1); }
.reward-card.is-ready { box-shadow: var(--bc-shadow-bevel), 0 0 0 2px var(--bc-primary); }
.fx-on .reward-card.is-ready { box-shadow: var(--bc-shadow-bevel), 0 0 0 2px var(--bc-primary), 0 0 24px var(--bc-primary-glow); }
.reward-card.is-claimed { box-shadow: var(--bc-shadow-bevel), 0 0 0 2px var(--bc-success); }
.reward-claimed { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; border: 2px solid var(--bc-success); background: var(--bc-success-bg); color: var(--bc-success); font-size: 17px; font-weight: 800; line-height: 1.2; }
.reward-claimed::before { content: "✓"; font-size: 20px; font-weight: 900; }

/* Server addresses (Java + Bedrock) */
.ip-list { display: grid; gap: var(--bc-space-3); }
.ip-list__label { display: flex; justify-content: space-between; gap: var(--bc-space-2); font-size: var(--bc-fs-caption); font-weight: 700; letter-spacing: var(--bc-ls-eyebrow); text-transform: uppercase; color: var(--bc-text-muted); margin-bottom: var(--bc-space-1); }
.ip-list__label .mono { letter-spacing: 0; text-transform: none; color: var(--bc-text); }
.ip-grid { display: grid; gap: var(--bc-space-4); }
@media (min-width: 768px) { .ip-grid { grid-template-columns: 1fr 1fr; } }

.card--disabled { opacity: .6; cursor: not-allowed; }
.card--disabled .badge { align-self: flex-start; }

/* Cookie consent bar (§15 modal/toast family: bevelled surface, no blur) */
.consent { position: fixed; inset: auto 0 0 0; z-index: 60; padding-bottom: var(--bc-space-4); pointer-events: none; }
.consent__box { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-5); flex-wrap: wrap; pointer-events: auto; background: var(--bc-surface); }
.consent__text { flex: 1 1 360px; display: grid; gap: var(--bc-space-2); }
.pay-stack { max-width: 640px; margin-inline: auto; }
.pay-stack .qr { margin-inline: auto; }
.pay-stack .stack > form { text-align: left; }

/* Admin: render a product image from a resource pack (admin pages only) */
.mc-render { border-top: 1px solid var(--bc-border); padding-top: var(--bc-space-4); display: grid; gap: var(--bc-space-3); }
.mc-render__preview { display: flex; align-items: center; justify-content: center; min-height: 140px; background: var(--bc-bg-deep); padding: var(--bc-space-3); }
.mc-render__canvas { image-rendering: pixelated; max-width: 100%; height: auto; }
.error-text { color: var(--bc-error); }
.ok-text { color: var(--bc-success); }
.mc-gallery { width: min(1100px, 94vw); max-height: 88vh; border: var(--bc-border-2); background: var(--bc-surface); color: var(--bc-text); padding: var(--bc-space-5); }
.mc-gallery::backdrop { background: rgba(0, 0, 0, .7); }
.mc-gallery__head { display: flex; gap: var(--bc-space-4); align-items: flex-end; margin-bottom: var(--bc-space-4); }
.mc-gallery__search { flex: 1; margin: 0; }
.mc-gallery .chips { margin-bottom: var(--bc-space-3); }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--bc-space-2); max-height: 58vh; overflow: auto; padding: var(--bc-space-2); background: var(--bc-bg-deep); }
.mc-tile { display: grid; justify-items: center; gap: var(--bc-space-1); padding: var(--bc-space-2); border: var(--bc-border-2); background: var(--bc-surface); color: var(--bc-text-muted); cursor: pointer; }
.mc-tile:hover, .mc-tile:focus-visible { border-color: var(--bc-primary); color: var(--bc-text); }
.mc-tile__canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.mc-tile__label { font-size: var(--bc-fs-caption); word-break: break-all; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.mc-tile--failed { opacity: .45; }

/* Ranking: top five stand on a podium (no frames), everyone else is a plain list. The characters idle with a gentle float and sway. */
.stack-boards { display: grid; gap: var(--bc-space-9, 96px); }
.rank-board .section-head { margin-bottom: var(--bc-space-6); }
.rank-board { --rank-1: var(--bc-gold-300); --rank-2: var(--bc-stone-200); --rank-3: #CD7F32; --rank-4: var(--bc-stone-300); --rank-5: var(--bc-stone-400); }
.podium { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; column-gap: var(--bc-space-3); list-style: none; padding: 0; margin: 0 auto var(--bc-space-6); max-width: 1040px; }
/* DOM order is rank order; the grid puts 4-2-1-3-5 left to right so #1 stands in the middle even on a short board. */
.podium__slot { grid-row: 1; position: relative; display: grid; justify-items: center; text-align: center; min-width: 0; }
.podium__slot--4 { grid-column: 1; } .podium__slot--2 { grid-column: 2; } .podium__slot--1 { grid-column: 3; } .podium__slot--3 { grid-column: 4; } .podium__slot--5 { grid-column: 5; }
.podium__figure { position: relative; display: grid; justify-items: center; align-items: end; padding-top: var(--bc-space-4); }
.podium__skin { position: relative; z-index: 1; height: 190px; width: auto; image-rendering: pixelated; object-fit: contain; transform-origin: 50% 100%; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); transition: transform .25s ease; }
.podium__slot--1 .podium__skin { height: 250px; }
.podium__slot--4 .podium__skin, .podium__slot--5 .podium__skin { height: 150px; }
.podium__floor { width: 70%; height: 12px; margin-top: -6px; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.podium__name { margin: var(--bc-space-3) 0 0; max-width: 100%; font-weight: 800; font-size: var(--bc-fs-h5, 1.1rem); overflow-wrap: anywhere; }
.podium__slot--1 .podium__name { font-size: var(--bc-fs-h4, 1.35rem); color: var(--rank-1); }
.podium__value { margin: var(--bc-space-1) 0 var(--bc-space-3); font-family: var(--bc-font-mono); font-weight: 700; color: var(--bc-text-muted); }
.podium__slot--1 .podium__value { color: var(--bc-text); }
@media (prefers-reduced-motion: no-preference) {
  .podium__figure { animation: podium-float 3.6s ease-in-out infinite alternate; }
  .podium__slot--2 .podium__figure { animation-delay: -.9s; } .podium__slot--3 .podium__figure { animation-delay: -1.8s; }
  .podium__slot--4 .podium__figure { animation-delay: -2.4s; } .podium__slot--5 .podium__figure { animation-delay: -.4s; }
  .podium__slot--1 .podium__figure { animation-duration: 3s; }
  .podium__skin { animation: podium-sway 4.2s ease-in-out infinite alternate; }
  .podium__slot--2 .podium__skin { animation-delay: -1s; } .podium__slot--3 .podium__skin { animation-delay: -2s; }
  .podium__slot--4 .podium__skin { animation-delay: -3s; } .podium__slot--5 .podium__skin { animation-delay: -.5s; }
  .podium__slot:hover .podium__skin { animation: podium-hop .6s ease-out; }
}
@keyframes podium-float { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes podium-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes podium-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-22px) rotate(4deg); } 100% { transform: translateY(0); } }
/* Thank-you note above the ranking boards */
.rank-thanks { max-width: 760px; margin-inline: auto; text-align: center; }
.rank-thanks h2 { margin-bottom: var(--bc-space-5); }
.rank-thanks p { font-size: 1.0625rem; line-height: 1.95; color: var(--bc-text-muted); margin: 0 0 var(--bc-space-4); }
.rank-thanks .eyebrow { color: var(--bc-gold-300); margin-bottom: var(--bc-space-2); }
.rank-thanks__sign { margin-top: var(--bc-space-5); font-weight: 700; color: var(--bc-text); }
.rank-thanks__sign::before { content: ""; display: block; width: 48px; height: 4px; margin: 0 auto var(--bc-space-4); background: var(--bc-gold-300); }
.podium__name.is-anon { font-style: italic; color: var(--bc-text-muted); font-weight: 600; }
/* Everyone from #6 down */
@media (max-width: 719.98px) {
  .podium { grid-template-columns: 1fr; row-gap: var(--bc-space-3); }
  .podium__slot, .podium__slot--1, .podium__slot--2, .podium__slot--3, .podium__slot--4, .podium__slot--5 { grid-column: 1; grid-row: auto; grid-template-columns: 88px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; column-gap: var(--bc-space-4); }
  .podium__figure { grid-row: 1 / span 2; padding-top: 0; }
  .podium__skin, .podium__slot--1 .podium__skin, .podium__slot--4 .podium__skin, .podium__slot--5 .podium__skin { height: 112px; }
  .podium__floor { display: none; }
  .podium__slot--1 .podium__figure::before { display: none; }
  .podium__name { grid-column: 2; margin-top: 0; align-self: end; }
  .podium__value { grid-column: 2; margin: 0; align-self: start; }
}

/* ---------- Bot check (honeypot + proof-of-work CAPTCHA) ---------- */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.captcha { display: flex; align-items: center; gap: var(--bc-space-3); margin-top: var(--bc-space-4); padding: var(--bc-space-3) var(--bc-space-4); border: var(--bc-border-2); background: var(--bc-bg-deep); color: var(--bc-text-muted); font-size: var(--bc-fs-body-sm); }
.captcha__box { flex: none; width: 16px; height: 16px; border: 2px solid var(--bc-border-strong); }
.captcha[data-state="done"] { color: var(--bc-text); }
.captcha[data-state="done"] .captcha__box { background: var(--bc-success); border-color: var(--bc-success); }
.captcha[data-state="error"] .captcha__box { background: var(--bc-error); border-color: var(--bc-error); }
@media (prefers-reduced-motion: no-preference) { .captcha:not([data-state]) .captcha__box { animation: captcha-spin 1s steps(4) infinite; } }
@keyframes captcha-spin { to { transform: rotate(360deg); } }

/* Active sessions on /account/security */
.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bc-space-3); }
.session-list li { display: grid; gap: var(--bc-space-1); padding: var(--bc-space-3); border: var(--bc-border-1); background: var(--bc-bg-deep); }

/* ---------- Home promotion strip (ws_promos, 1920x400 banners) ---------- */
.promo-strip .container { display: grid; gap: var(--bc-space-3); }
.promo-strip__frame { position: relative; box-shadow: var(--bc-shadow-bevel); background: var(--bc-bg-deep); padding: 4px; }
.promo-strip__track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.promo-strip__track::-webkit-scrollbar { display: none; }
.promo-strip__track:focus-visible { outline: 3px solid var(--bc-focus-ring); outline-offset: 2px; }
.promo-strip__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 24 / 5; }
.promo-strip__slide a { display: block; height: 100%; }
.promo-strip__slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* height 100% of the 24:5 slide, not the 400 attribute */
/* DESIGN.md §15 carousel arrows: square 48px bevelled block buttons. The chevron is drawn with borders,
   not a text glyph, so it sits in the exact centre whatever the font's baseline does. */
.promo-strip__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; padding: 0; background: var(--bc-surface); color: var(--bc-text); border: var(--bc-border-btn); box-shadow: var(--bc-shadow-button); cursor: pointer; transition: background-color var(--bc-duration-base) var(--bc-ease-standard); }
.promo-strip__arrow > span { display: none; }
.promo-strip__arrow::before { content: ""; width: 12px; height: 12px; border: solid currentColor; border-width: 0 4px 4px 0; margin-top: -2px; }
.promo-strip__arrow--next::before { transform: rotate(-45deg); margin-left: -6px; }
.promo-strip__arrow--prev::before { transform: rotate(135deg); margin-left: 6px; }
.promo-strip__arrow:hover { background: var(--bc-primary); color: var(--bc-on-primary); }
.promo-strip__arrow:active { box-shadow: none; transform: translateY(calc(-50% + 2px)); }
.promo-strip__arrow--prev { left: var(--bc-space-3); }
.promo-strip__arrow--next { right: var(--bc-space-3); }
.promo-strip__dots { display: flex; justify-content: center; gap: var(--bc-space-2); }
.promo-strip__dots button { width: 28px; height: 28px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.promo-strip__dots button::before { content: ""; display: block; width: 8px; height: 8px; background: var(--bc-border-strong); }
.promo-strip__dots button[aria-current="true"]::before { background: var(--bc-primary); width: 8px; box-shadow: 0 0 0 2px var(--bc-primary); }
/* Phones: the arrows would cover most of a 75px-tall banner; swipe and the dots do the job. */
@media (max-width: 575.98px) { .promo-strip__arrow { display: none; } }
.promo-admin__img { display: block; width: 100%; height: auto; aspect-ratio: 24 / 5; object-fit: cover; box-shadow: var(--bc-shadow-bevel); padding: 4px; background: var(--bc-bg-deep); }
.promo-strip [hidden] { display: none; } /* arrows/dots stay hidden until app.js enables them */
.promo-admin__img[hidden] { display: none; }

/* ---------- In-game screenshots (public/img/spawn, views/partials/photo.ejs) ---------- */
img.is-photo { image-rendering: auto; } /* real screenshots: smooth scaling, not nearest-neighbour */
/* A band with a darkened screenshot behind its content (login, register, account header, errors). */
.band--photo { position: relative; overflow: hidden; isolation: isolate; }
.band--photo > .band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(18,17,16,.82) 0%, rgba(18,17,16,.55) 55%, rgba(18,17,16,.35) 100%); }
.band--photo .auth-card { box-shadow: var(--bc-shadow-bevel), 0 24px 48px rgba(0,0,0,.45); }
.band--tall { min-height: 60vh; display: grid; align-items: center; }

/* Home: spawn tour (screenshot tiles with a translucent caption band, DESIGN.md news-tile style) */
.spawn-tour { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bc-space-4); grid-template-columns: 1fr; }
@media (min-width: 576px) { .spawn-tour { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .spawn-tour { grid-template-columns: repeat(4, 1fr); } }
.spawn-tour__item { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bc-bg-base); box-shadow: var(--bc-shadow-bevel); padding: 4px; }
.spawn-tour__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-base) var(--bc-ease-standard); }
.spawn-tour__item:hover img { transform: scale(1.04); }
.spawn-tour__label { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: var(--bc-space-2) var(--bc-space-3); background: rgba(18, 17, 16, .72); color: #fff; font-weight: var(--bc-fw-black); font-size: var(--bc-fs-body-sm); letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .spawn-tour__item:hover img { transform: none; } }
/* Text over screenshots (page headers, promo band). Gradient text + a shadow showed the shadow
   through the transparent glyphs (muddy), so these headings are solid white on a darker scrim
   placed where the text sits: bottom-left for page headers, centre for the promo band. */
.page-hero::after { background: linear-gradient(90deg, rgba(18,17,16,.85) 0%, rgba(18,17,16,.55) 45%, rgba(18,17,16,.1) 80%), linear-gradient(0deg, rgba(18,17,16,.9) 0%, rgba(18,17,16,0) 70%); }
.promo::after { background: radial-gradient(ellipse 60% 55% at 50% 72%, rgba(18,17,16,.82) 0%, rgba(18,17,16,.45) 60%, rgba(18,17,16,.15) 100%); }
.page-hero h1, .fx-on .page-hero h1, .promo__content .display, .fx-on .promo__content .display {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff;
  padding-block: 0; margin-block: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.page-hero .eyebrow { color: var(--bc-primary-text); }
.page-hero .muted { color: rgba(255, 255, 255, .82); }

/* Brand icons as masks: they take the button's text colour, so they follow the theme (DESIGN.md §10). */
.icon-mask { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.btn--sm .icon-mask { width: 16px; height: 16px; }
.btn--lg .icon-mask { width: 22px; height: 22px; }
.icon-mask--discord { --icon: url("/img/icon-discord.svg"); }
.icon-mask--facebook { --icon: url("/img/icon-facebook.svg"); }
.icon-mask--microsoft { --icon: url("/img/icon-microsoft.svg"); }
/* Brand block buttons (Discord / Facebook / Microsoft): the same construction as .btn--primary —
   dark 2px border, --bc-shadow-button bevel, press = drop 2px — only the fill is the brand colour. */
.btn--brand { background: var(--brand); color: #fff; border: var(--bc-border-btn); box-shadow: var(--bc-shadow-button); }
.btn--brand:hover { background: var(--brand-hover); color: #fff; }
.btn--brand:active { background: var(--brand-active); box-shadow: none; transform: translateY(2px); }
.btn--brand-discord { --brand: #5865F2; --brand-hover: #4752C4; --brand-active: #3C45A5; }
.btn--brand-facebook { --brand: #1877F2; --brand-hover: #0F63CF; --brand-active: #0B4FA6; }
.btn--brand-microsoft { --brand: #107C10; --brand-hover: #0E6A0E; --brand-active: #0B560B; }
/* Not built yet: keep the block look, dimmed, instead of the grey disabled fill. */
.btn--brand:disabled, .btn--brand[aria-disabled="true"] { background: var(--brand); color: #fff; border: var(--bc-border-btn); box-shadow: var(--bc-shadow-button); opacity: .55; transform: none; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .btn--brand:active { transform: none; } }
/* ---------- Polish pass (2026-09-30): rhythm and alignment ---------- */
/* A page header or photo band already separates the page from the header; a full section gap under it reads as a hole. */
.page-hero + .band, .band--photo + .band { padding-top: var(--bc-space-7); }
/* Link-cards with a horizontal layout (reward summary on /account). */
.card.reward-summary { flex-direction: row; text-align: left; }
.card.reward-summary > div { display: grid; gap: var(--bc-space-1); }
/* Latin names on buttons (the account button) keep their own case. */
.btn--case { text-transform: none; letter-spacing: 0; }
/* Feature icons sit in a fixed square so different artwork reads as the same size. */
.feature-card > .pixel-icon { width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--bc-space-2); }
.section-head--split { margin-bottom: var(--bc-space-6); }
/* Pages without a page header (product page) start closer to the site header. */
main > .band:first-child { padding-top: var(--bc-space-7); }
/* The closing CTA shares its ground with a base band above it: drop the doubled gap. */
.band--base + .band--cta { padding-top: 0; }
/* At 1440px the text column of an image+text block gets wide; keep lines readable. */
.media-text__text p { max-width: 52ch; }

/* ---------- Home: gameplay tabs + YouTube clip (DESIGN.md §0 "Gameplay trailers": vertical tabs left, framed video right) ---------- */
.gameplay { display: grid; gap: var(--bc-space-5); align-items: start; }
@media (min-width: 992px) { .gameplay { grid-template-columns: minmax(280px, 4fr) 8fr; gap: var(--bc-space-6); } }
.gameplay__tabs { display: flex; gap: var(--bc-space-2); overflow-x: auto; scrollbar-width: none; }
.gameplay__tabs::-webkit-scrollbar { display: none; }
.gameplay__tab {
  flex: none; display: grid; gap: var(--bc-space-1); text-align: left; cursor: pointer; font: inherit;
  min-height: 44px; padding: var(--bc-space-3) var(--bc-space-4); color: var(--bc-text-muted);
  background: var(--bc-card-bg); border: 1px solid transparent; box-shadow: inset 0 -4px 0 transparent;
  transition: background-color var(--bc-duration-base) var(--bc-ease-standard), color var(--bc-duration-base) var(--bc-ease-standard);
}
.gameplay__tab:hover { color: var(--bc-text); background: var(--bc-surface-hover); }
.gameplay__tab[aria-selected="true"] { color: var(--bc-text); background: var(--bc-surface-hover); box-shadow: inset 0 -4px 0 var(--bc-primary); }
.gameplay__tab-title { font-weight: var(--bc-fw-black); font-size: var(--bc-fs-body); line-height: 1.3; white-space: nowrap; }
.gameplay__tab-text { display: none; font-size: var(--bc-fs-body-sm); line-height: 22px; color: var(--bc-text-muted); }
@media (min-width: 992px) {
  .gameplay__tabs { flex-direction: column; gap: 0; overflow: visible; box-shadow: var(--bc-shadow-bevel); background: var(--bc-card-bg); padding: 4px; }
  .gameplay__tab { padding: var(--bc-space-4) var(--bc-space-5); background: transparent; box-shadow: inset 4px 0 0 transparent; }
  .gameplay__tab + .gameplay__tab { border-top: var(--bc-border-1); }
  .gameplay__tab[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--bc-primary); }
  .gameplay__tab-title { font-size: var(--bc-fs-h4); white-space: normal; }
  .gameplay__tab-text { display: block; }
}
.gameplay__panel-title { display: none; margin-bottom: var(--bc-space-3); }
html:not(.no-js) .gameplay__panel[data-inactive] { display: none; }
/* Without JavaScript every mode is listed one under another, each with its own heading. */
.no-js .gameplay__tabs { display: none; }
.no-js .gameplay__panel-title { display: block; }
.no-js .gameplay__panel + .gameplay__panel { margin-top: var(--bc-space-6); }
.gameplay__frame { background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel); border: 1px solid transparent; padding: var(--bc-space-2); }
.gameplay__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bc-bg-deep); }
.gameplay__video > img { width: 100%; height: 100%; object-fit: cover; }
.gameplay__video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gameplay__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(0deg, rgba(18,17,16,.55), rgba(18,17,16,.15)); }
.gameplay__play-icon { position: relative; width: 88px; height: 88px; background: var(--bc-primary); border: var(--bc-border-btn); box-shadow: var(--bc-shadow-button); transition: background-color var(--bc-duration-base) var(--bc-ease-standard), transform var(--bc-duration-fast) var(--bc-ease-standard); }
.gameplay__play-icon::before { content: ""; position: absolute; left: 34px; top: 24px; border-style: solid; border-width: 18px 0 18px 28px; border-color: transparent transparent transparent var(--bc-on-primary); }
.gameplay__play:hover .gameplay__play-icon { background: var(--bc-primary-hover); }
.gameplay__play:active .gameplay__play-icon { box-shadow: none; transform: translateY(2px); }
.gameplay__play:focus-visible { outline-offset: -6px; }
.gameplay__gate { position: absolute; left: var(--bc-space-4); right: var(--bc-space-4); bottom: var(--bc-space-4); max-width: 480px; display: grid; gap: var(--bc-space-3); padding: var(--bc-space-4); background: var(--bc-surface-overlay); box-shadow: var(--bc-shadow-bevel); }
.gameplay__gate .btn-group { gap: var(--bc-space-2); }
.gameplay__gate .inline-form + .btn { margin-left: 0; }
.gameplay__soon { position: absolute; left: var(--bc-space-4); top: var(--bc-space-4); }
.gameplay__credit { display: flex; justify-content: space-between; gap: var(--bc-space-3); flex-wrap: wrap; margin-top: var(--bc-space-3); }
@media (max-width: 575.98px) {
  .gameplay__play-icon { width: 64px; height: 64px; }
  .gameplay__play-icon::before { left: 24px; top: 16px; border-width: 14px 0 14px 22px; }
  .gameplay__gate { position: static; max-width: none; box-shadow: none; }
  .gameplay__video:has(.gameplay__gate) { aspect-ratio: auto; }
  .gameplay__video:has(.gameplay__gate) > img { aspect-ratio: 16 / 9; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .gameplay__play:active .gameplay__play-icon { transform: none; } }

/* ---------- Home community: live Discord card (server-side widget.json) + Facebook page card ---------- */
.community-grid { display: grid; gap: var(--bc-space-5); align-items: stretch; }
@media (min-width: 992px) { .community-grid { grid-template-columns: 1fr 1fr; } }
.community-grid--single { max-width: 640px; margin-inline: auto; }
.community-card { display: flex; flex-direction: column; gap: var(--bc-space-4); padding: var(--bc-space-5); background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel); border: 1px solid transparent; min-width: 0; }
.community-card > .btn { margin-top: auto; }
.community-card__head { display: flex; align-items: center; gap: var(--bc-space-4); }
.community-card__head > div { display: grid; gap: var(--bc-space-1); min-width: 0; }
.community-card__logo { flex: none; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border: var(--bc-border-btn); box-shadow: var(--bc-shadow-button); }
.community-card__logo .icon-mask { width: 24px; height: 24px; }
.community-card__logo--discord { background: #5865F2; }
.community-card__logo--facebook { background: #1877F2; }
.dc-members { list-style: none; margin: 0; padding: var(--bc-space-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--bc-space-1) var(--bc-space-2); background: var(--bc-bg-deep); flex: 1; align-content: start; min-height: 240px; max-height: 460px; overflow: auto; scrollbar-width: thin; }
.dc-member { display: flex; align-items: center; gap: var(--bc-space-2); min-height: 44px; padding: 0 var(--bc-space-2); min-width: 0; }
.dc-member__avatar { position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--bc-radius-round); background: var(--bc-surface-hover); display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--bc-text-muted); }
.dc-member__avatar img { width: 32px; height: 32px; border-radius: var(--bc-radius-round); object-fit: cover; }
.dc-member__dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid var(--bc-bg-deep); background: var(--bc-success); }
.dc-member__dot--idle { background: var(--bc-warning); }
.dc-member__dot--dnd { background: var(--bc-error); }
.dc-member__name { display: grid; min-width: 0; font-size: var(--bc-fs-body-sm); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-member__nick, .dc-member__game { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-member__game { font-size: var(--bc-fs-caption); font-weight: 400; color: var(--bc-text-muted); }
.fb-frame { flex: 1; display: grid; place-items: center; min-height: 344px; background: var(--bc-bg-deep); overflow: hidden; }
.fb-frame iframe { display: block; width: 100%; max-width: 500px; height: 460px; border: 0; background: var(--bc-stone-0); }
.fb-frame__gate { display: grid; gap: var(--bc-space-3); justify-items: center; text-align: center; max-width: 360px; padding: var(--bc-space-5); color: var(--bc-text-muted); }

/* ---------- Long-form text pages (privacy, cookies, terms, rules, guide, news article) ----------
   One body size, generous Thai line height, and a clear rhythm: big gap above a section heading,
   small gap under it. Heading margins are set here with the gradient-heading padding (.18em/.22em)
   taken into account, because .fx-on headings use negative margins to hide that padding. */
.doc { font-size: var(--bc-fs-body); line-height: 1.8; color: var(--bc-stone-100); }
.doc > * { margin: 0; }
.doc > * + * { margin-top: var(--bc-space-4); }
.doc > h2, .fx-on .doc > h2 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: 1.35; letter-spacing: 0; margin-block: calc(var(--bc-space-7) - .18em) calc(-.22em); }
.doc > h2:first-child, .fx-on .doc > h2:first-child { margin-top: -.18em; }
.doc > h2 + * { margin-top: var(--bc-space-3); }
.doc__meta { font-size: var(--bc-fs-body-sm); color: var(--bc-text-muted); }
.doc > .doc__lead { font-size: var(--bc-fs-body-lg); line-height: 1.75; color: var(--bc-text); margin-top: var(--bc-space-3); }
.doc__note { font-size: var(--bc-fs-body-sm); line-height: 1.75; color: var(--bc-text-muted); }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li + li { margin-top: var(--bc-space-2); }
.doc li::marker { color: var(--bc-primary-text); }
.doc strong { color: var(--bc-text); }
.doc a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.doc .table-wrap { margin-top: var(--bc-space-4); }
.doc .table { font-size: var(--bc-fs-body-sm); line-height: 1.6; }
.doc .table td { vertical-align: top; }
.doc > .btn-group { margin-top: var(--bc-space-5); }
.doc > .mt-7 { margin-top: var(--bc-space-7); }

/* ---------- Small phones (2026-09-30 mobile sweep) ---------- */
/* 360px: logo text + account button + menu button must fit on one line without clipping the wordmark. */
@media (max-width: 419.98px) {
  .header__inner { gap: var(--bc-space-2); }
  .header .logo { font-size: 16px; gap: var(--bc-space-2); letter-spacing: .02em; }
  .header .logo__mark { width: 28px; height: 28px; }
  .header__actions .btn--sm { padding: 0 var(--bc-space-3); min-width: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}
/* Feature cards with an icon: icon beside the text on phones instead of a tall stacked card. */
@media (max-width: 575.98px) {
  .feature-card:has(> .pixel-icon) { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--bc-space-4); row-gap: var(--bc-space-1); align-content: start; }
  .feature-card:has(> .pixel-icon) > .pixel-icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .feature-card:has(> .pixel-icon) > * { grid-column: 2; }
  .feature-card:has(> .pixel-icon) > .pixel-icon { grid-column: 1; }
}
/* Scrollable tab rows: a trailing spacer so the last tab can scroll fully clear of the fade. */
@media (max-width: 767.98px) {
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .tabs::after { content: ""; flex: 0 0 32px; }
}
.feature-card:has(> .pixel-icon) > .badge { justify-self: start; }
/* Admin: only the legal bar at the bottom, and KPI tiles that fit five in a row. */
.footer--compact { padding-top: 0; border-top-width: 2px; }
.footer--compact .footer__bar { margin-top: 0; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.row-actions .btn--sm::after { display: none; }
/* Gradient headings hide their paint padding with negative margins (see .fx-on above), which also wipes
   out any margin a heading asks for. Put the intended gaps back where headings rely on them. */
.fx-on .admin__main > h1 { margin-bottom: calc(var(--bc-space-6) - .22em); }
.fx-on :is(h1, h2).mb-4 { margin-bottom: calc(var(--bc-space-4) - .22em); }
.fx-on :is(h1, h2).mb-6 { margin-bottom: calc(var(--bc-space-6) - .22em); }
.fx-on :is(h1, h2).mt-6 { margin-top: calc(var(--bc-space-6) - .18em); }
.fx-on :is(h1, h2).mt-7 { margin-top: calc(var(--bc-space-7) - .18em); }
.fx-on .stack > :is(h1, h2):not(:first-child) { margin-top: calc(var(--bc-space-4) - .18em); }

/* ---------- Admin: feature switches ---------- */
.feature-groups { display: grid; gap: var(--bc-space-5); }
@media (min-width: 1200px) { .feature-groups { grid-template-columns: 1fr 1fr; align-items: start; } }
.feature-group { margin: 0; min-width: 0; padding-top: var(--bc-space-5); }
.feature-group__title { float: left; width: 100%; margin-bottom: var(--bc-space-2); padding: 0; }
.feature-group__title + * { clear: both; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-5); padding: var(--bc-space-4) 0; border-top: var(--bc-border-1); cursor: pointer; font-weight: 400; }
.switch-row__text { display: grid; gap: var(--bc-space-1); }
.switch-row__label { font-weight: 700; font-size: var(--bc-fs-body); }
.switch-row__hint { font-size: var(--bc-fs-body-sm); color: var(--bc-text-muted); line-height: 1.6; }
/* Square block switch: a 56x28 track with a 20px knob, knob and track turn primary when on. */
.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 56px; height: 28px; margin: 0; background: var(--bc-bg-deep); border: 2px solid var(--bc-border-strong); cursor: pointer; transition: background-color var(--bc-duration-base) var(--bc-ease-standard), border-color var(--bc-duration-base) var(--bc-ease-standard); }
.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--bc-text-muted); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); transition: transform var(--bc-duration-base) var(--bc-ease-standard), background-color var(--bc-duration-base) var(--bc-ease-standard); }
.switch:checked { background: var(--bc-primary); border-color: var(--bc-primary); }
.switch:checked::before { transform: translateX(28px); background: var(--bc-on-primary); }
.switch:focus-visible { outline: 2px solid var(--bc-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bc-focus-halo); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
@media (forced-colors: active) { .switch { border-color: CanvasText; } .switch::before { background: CanvasText; forced-color-adjust: none; } }

/* ---------- Top-up step 1: pick the server ---------- */
.server-pick__card { display: grid; gap: var(--bc-space-2); align-content: start; padding: var(--bc-space-5); min-height: 148px; }
.server-pick__name { font-size: var(--bc-fs-h4); font-weight: var(--bc-fw-black); letter-spacing: .02em; }
.server-pick__go { margin-top: auto; padding-top: var(--bc-space-2); font-weight: 700; color: var(--bc-link); }
a.card:hover .server-pick__go { color: var(--bc-link-hover); }
.topup-server { display: flex; align-items: center; gap: var(--bc-space-3); flex-wrap: wrap; padding: var(--bc-space-3) var(--bc-space-4); background: var(--bc-card-bg); box-shadow: inset 4px 0 0 var(--bc-primary); }
.topup-server__name { font-weight: var(--bc-fw-black); letter-spacing: .02em; }
.topup-server .btn--ghost { margin-left: auto; min-height: 36px; }

/* ---------- Admin: revenue per server ---------- */
.bars--days { gap: 2px; }
.bars--days .bars__col .caption { font-size: 10px; }
.table tfoot th { color: var(--bc-text); font-size: var(--bc-fs-body-sm); text-transform: none; letter-spacing: 0; border-top: var(--bc-border-2); border-bottom: 0; }
.table tr.is-current td { background: var(--bc-secondary-hover-bg); }
.revenue-server { display: grid; gap: var(--bc-space-4); align-items: end; }
@media (min-width: 1200px) { .revenue-server { grid-template-columns: 160px 140px 1fr 1fr auto auto; } .revenue-server .field + .field { margin-top: 0; } }
.revenue-server__name { align-self: center; }
.revenue-server .check { min-height: 48px; }

/* Pager (views/partials/pager.ejs): built like .chip, current page in the primary colour. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-3) var(--bc-space-4); flex-wrap: wrap; margin-top: var(--bc-space-4); }
.pager__info { font-size: var(--bc-fs-body-sm); color: var(--bc-text-muted); }
.pager__links { display: flex; align-items: center; gap: var(--bc-space-2); flex-wrap: wrap; }
.pager__btn, .pager__num { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 0 var(--bc-space-3); border: var(--bc-border-2); background: var(--bc-bg-deep); color: var(--bc-text-muted); font-size: var(--bc-fs-body-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.pager a:hover { color: var(--bc-text); text-decoration: none; border-color: var(--bc-border-strong); }
.pager__num[aria-current="page"] { background: var(--bc-primary); border-color: var(--bc-primary); color: var(--bc-on-primary); }
.pager__btn[aria-disabled="true"] { opacity: .4; }
.pager__gap { color: var(--bc-text-subtle); padding: 0 var(--bc-space-1); }
.list-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-3) var(--bc-space-4); flex-wrap: wrap; margin-bottom: var(--bc-space-4); }
@media (max-width: 575px) { .pager__btn { padding: 0 var(--bc-space-2); } .pager__gap { display: none; } }
/* Long text cells keep a readable width on phones; the .table-wrap scrolls sideways instead. */
.table td.wrap { min-width: 180px; }

/* Server status panel: live player count with an XP-bar style meter, join card on the right */
.server-live { display: grid; gap: var(--bc-space-4); align-content: center; }
.server-live__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-3); flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: var(--bc-space-2); min-height: 32px; padding: 0 var(--bc-space-3); background: var(--bc-bg-deep); border: var(--bc-border-2); font-size: var(--bc-fs-body-sm); font-weight: 800; }
.status-pill::before { content: ""; width: 10px; height: 10px; background: currentColor; }
.status-pill--online { color: var(--bc-success); } .status-pill--offline { color: var(--bc-error); }
.server-live__count { display: flex; align-items: baseline; gap: var(--bc-space-3); flex-wrap: wrap; margin: 0; }
.server-live__num { font-size: clamp(3.25rem, 2.4rem + 3.4vw, 5rem); line-height: 1; font-weight: 800; color: var(--bc-primary-text); font-variant-numeric: tabular-nums; }
.server-live__of { font-size: var(--bc-fs-body-lg, 1.125rem); font-weight: 600; color: var(--bc-text-muted); }
.xp-bar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; padding: 4px; background: var(--bc-bg-deep); border: var(--bc-border-2); }
.xp-bar i { height: 16px; background: var(--bc-bg-raised); }
.xp-bar i.is-on { background: var(--bc-primary-text); box-shadow: inset 0 -4px 0 0 rgba(0,0,0,.25), inset 0 3px 0 0 rgba(255,255,255,.3); }
.server-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bc-space-3); margin: 0; }
.server-meta > div { display: grid; gap: 2px; padding: var(--bc-space-3) var(--bc-space-4); background: var(--bc-bg-deep); border-left: 4px solid var(--bc-border); }
.server-meta dt { font-size: var(--bc-fs-caption); font-weight: 700; color: var(--bc-text-muted); }
.server-meta dd { margin: 0; font-size: var(--bc-fs-h4); font-weight: 800; }
.server-join { display: grid; gap: var(--bc-space-4); align-content: center; padding: var(--bc-space-5); background: var(--bc-bg-deep); border: var(--bc-border-1); }
.server-join .eyebrow { margin: 0; }
@media (max-width: 575.98px) { .server-meta { grid-template-columns: 1fr; } .xp-bar i { height: 12px; } }

/* Closing call to action: spawn photo, text left, IPs right */
.band.cta-band { padding: var(--bc-space-9) 0; }
.cta-band::before { background: linear-gradient(90deg, rgba(18,17,16,.9) 0%, rgba(18,17,16,.7) 50%, rgba(18,17,16,.35) 100%); }
.cta-box { display: grid; gap: var(--bc-space-6); align-items: center; }
@media (min-width: 900px) { .cta-box { grid-template-columns: 1.2fr minmax(320px, 420px); gap: var(--bc-space-8); } .cta-box:has(> :only-child) { grid-template-columns: 1fr; } }
.cta-box__text { display: grid; gap: var(--bc-space-3); justify-items: start; }
.cta-box__text .eyebrow, .cta-box__text h2, .cta-box__text p { margin: 0; }
.cta-band h2, .fx-on .cta-band h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; padding-block: 0; margin-block: 0; font-size: var(--bc-fs-h1); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.cta-band .muted { color: rgba(255,255,255,.82); }
.cta-box__actions { display: flex; flex-wrap: wrap; gap: var(--bc-space-3); margin-top: var(--bc-space-3); }
.cta-box__ips { padding: var(--bc-space-5); background: rgba(18,17,16,.82); border: var(--bc-border-1); }
@media (max-width: 575.98px) { .band.cta-band { padding: var(--bc-space-8) 0; } .cta-box__actions .btn { width: 100%; } }

/* ============ /guide: in-game GUI mock-ups (built from CSS, no game screenshots) ============ */
.container--guide { max-width: calc(1200px + 2 * var(--bc-gutter)); }
.guide-edition { display: grid; gap: var(--bc-space-6); align-items: center; }
@media (min-width: 900px) {
  .guide-edition { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--bc-space-8); }
  .guide-edition--flip > .guide-edition__text { order: 2; }
}
.guide-edition__text { display: grid; gap: var(--bc-space-4); align-content: center; }
.guide-edition__text > * { margin: 0; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bc-space-3); counter-reset: gstep; }
.guide-steps li { counter-increment: gstep; display: grid; grid-template-columns: 40px 1fr; gap: var(--bc-space-4); align-items: start; padding: var(--bc-space-3) var(--bc-space-4) var(--bc-space-3) var(--bc-space-3); background: var(--bc-card-bg); box-shadow: var(--bc-shadow-bevel); border: 1px solid transparent; font-size: var(--bc-fs-body); line-height: 1.6; }
.guide-steps li::before { content: counter(gstep); display: grid; place-items: center; width: 40px; height: 40px; background: var(--bc-primary); color: var(--bc-stone-0); border: var(--bc-border-btn); box-shadow: var(--bc-shadow-button); font-weight: 800; font-size: 18px; }
.guide-steps li > span { padding-top: 6px; }
.guide-steps strong { color: var(--bc-primary-text); font-weight: 800; }
.guide-steps code { font-family: inherit; font-size: inherit; font-weight: 700; padding: 0 .4em; background: rgba(255,255,255,.12); color: var(--bc-text); overflow-wrap: anywhere; }
.guide-next { display: grid; gap: var(--bc-space-5); align-items: center; }
@media (min-width: 900px) { .guide-next { grid-template-columns: 1fr auto; gap: var(--bc-space-7); } }
.guide-next h2, .guide-next p { margin: 0; }
.guide-next > div:first-child { display: grid; gap: var(--bc-space-2); }
.guide-next__actions { display: flex; flex-wrap: wrap; gap: var(--bc-space-3); }

/* Stage: a blurred spawn photo with the fake game screen on top. Everything is sized in cqw so the
   mock-up scales as one picture. */
.mc-stage { position: relative; margin: 0; overflow: hidden; isolation: isolate; container-type: inline-size; border: var(--bc-border-2); box-shadow: 0 0 0 4px var(--bc-bg-deep); background: #1b1b1b; }
.mc-stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: blur(.9cqw) brightness(.5) saturate(.85); transform: scale(1.06); }
.mc-gui { font-family: var(--bc-font-body); font-weight: 600; color: #fff; -webkit-user-select: none; user-select: none; }
/* Field text can be copied: one click selects the whole value. */
.mcj__field span, .mcb__field span { -webkit-user-select: all; user-select: all; cursor: text; }
.mc-mark { position: relative; }
.mc-pin { position: absolute; right: -1.6cqw; top: -2.4cqw; z-index: 3; display: grid; place-items: center; width: max(22px, 5cqw); height: max(22px, 5cqw); background: var(--bc-primary); color: var(--bc-stone-0); border: 2px solid #000; box-shadow: var(--bc-shadow-button); font: 800 max(12px, 2.7cqw)/1 var(--bc-font-body); }

/* Java Edition: "Edit Server Info" */
.mc-java { aspect-ratio: 774 / 608; display: grid; place-items: center; }
.mcj { width: 54%; display: grid; gap: 2.6cqw; }
.mcj__title { margin: 0; text-align: center; font-size: 3.4cqw; line-height: 1.2; font-weight: 700; }
.mcj__group { display: grid; gap: .8cqw; }
.mcj__label { margin: 0; font-size: 2.6cqw; line-height: 1.2; color: #b8b8b8; }
.mcj__field { display: flex; align-items: center; height: 6.4cqw; padding: 0 1.6cqw; background: #000; border: .4cqw solid #a0a0a0; font-size: 2.8cqw; }
.mcj__btn { position: relative; display: grid; place-items: center; height: 6.6cqw; background: #707070; border: .4cqw solid #000; box-shadow: inset .5cqw .5cqw 0 rgba(255,255,255,.38), inset -.5cqw -.5cqw 0 rgba(0,0,0,.42); font-size: 2.8cqw; }
.mcj__btn--focus { margin-top: 2.2cqw; border-color: #fff; }
.mcj__btns { display: grid; gap: 1.2cqw; margin-top: 1.2cqw; }

/* Bedrock Edition: "Edit Server" */
.mc-bedrock { aspect-ratio: 4 / 3; display: grid; grid-template-rows: auto 1fr; align-content: start; }
.mcb__bar { position: relative; display: grid; place-items: center; height: 9cqw; background: #e8e9ea; border-bottom: .6cqw solid #bdbebf; color: #1e1e1f; }
.mcb__title { font-size: 3.4cqw; font-weight: 800; letter-spacing: .04em; }
.mcb__back { position: absolute; left: 4.4cqw; top: 50%; width: 2.2cqw; height: 2.2cqw; border-left: .6cqw solid #1e1e1f; border-bottom: .6cqw solid #1e1e1f; transform: translateY(-50%) rotate(45deg); }
.mcb__panel { align-self: start; width: 90%; margin: 3.4cqw auto 0; background: #48494a; border: .5cqw solid #242425; }
.mcb__row { display: grid; gap: 1.2cqw; padding: 2.2cqw 2.4cqw; border-bottom: .4cqw solid #5b5c5d; }
.mcb__label { margin: 0; font-size: 2.7cqw; line-height: 1.2; }
.mcb__field { display: flex; align-items: center; height: 6.6cqw; padding: 0 2cqw; background: #313233; border: .5cqw solid #1e1e1f; box-shadow: inset 0 .5cqw 0 rgba(0,0,0,.35); font-size: 2.8cqw; }
.mcb__btns { display: grid; grid-template-columns: 1fr; gap: 1.6cqw; padding: 2cqw 2.4cqw; }
.mcb__btn { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; height: 7.6cqw; border: .5cqw solid; box-shadow: inset 0 -.7cqw 0 rgba(0,0,0,.25), inset 0 .4cqw 0 rgba(255,255,255,.2); font-size: 2.8cqw; font-weight: 700; }
.mcb__btn--red { background: #d23c3c; border-color: #8a2323; opacity: .75; }
.mcb__btn--green { background: #3c8527; border-color: #1d4d12; }
.mcb__icon { width: 3.8cqw; height: 3.8cqw; background: #fff; -webkit-mask: var(--mc-icon) center / contain no-repeat; mask: var(--mc-icon) center / contain no-repeat; }
.mcb__icon--trash { --mc-icon: url(/img/icon-mc-trash.svg); }
.mcb__icon--save { --mc-icon: url(/img/icon-mc-save.svg); }
@media (max-width: 575.98px) { .guide-steps li { grid-template-columns: 36px 1fr; gap: var(--bc-space-3); } .guide-steps li::before { width: 36px; height: 36px; } }

/* Ranking #1: light streaming out from behind the champion, like rays through a cathedral window.
   A soft halo plus long rays fading outwards; the rays turn very slowly. */
.podium__slot--1 .podium__figure::before {
  content: ""; position: absolute; left: 50%; top: 52%; z-index: 0; width: min(560px, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(255, 244, 200, .85) 0%, rgba(255, 220, 120, .45) 28%, rgba(255, 200, 80, 0) 62%),
    repeating-conic-gradient(from 0deg, rgba(255, 238, 170, .34) 0deg 5deg, rgba(255, 238, 170, 0) 5deg 15deg, rgba(255, 238, 170, .2) 15deg 18deg, rgba(255, 238, 170, 0) 18deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, rgba(0, 0, 0, .55) 55%, transparent 100%); mask: radial-gradient(closest-side, #000 25%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .podium__slot--1 .podium__figure::before { animation: podium-rays 90s linear infinite; }
}
@keyframes podium-rays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 719.98px) { .podium__slot--1 .podium__figure::before { width: 260px; top: 50%; } }

.rank-empty { text-align: center; padding: var(--bc-space-6) 0; }

/* ---------- Offline page (database down) ---------- */
.offline { min-height: 100vh; display: grid; align-items: center; }
.offline__logo { margin-inline: auto; }

/* Login: "forgot password" sits on the password label row, away from the submit button. */
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bc-space-3); }
.field__link { font-size: var(--bc-fs-body-sm); font-weight: 700; line-height: inherit; }

/* Monthly reward: pick one key from the shop as picture tiles (radio inputs, works without JS). */
.key-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.key-picker__item { position: relative; display: block; cursor: pointer; }
.key-picker__input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.key-picker__tile { height: 100%; transition: transform .08s; }
.key-picker__item:hover .key-picker__tile { transform: translateY(-2px); }
.key-picker__tick { display: none; margin-top: 6px; font-weight: 800; color: var(--bc-success); }
.key-picker__input:checked + .key-picker__tile { box-shadow: var(--bc-shadow-bevel), 0 0 0 3px var(--bc-success); }
.key-picker__input:checked + .key-picker__tile .key-picker__tick { display: block; }
.key-picker__input:focus-visible + .key-picker__tile { outline: 3px solid var(--bc-primary); outline-offset: 2px; }
.key-picker__tile .card__title { font-size: 14px; }

/* Reward page: the big total sits close under the eyebrow; the Thai tone marks above the line must not touch it. */
.h2.reward-total, .fx-on .h2.reward-total { margin-block-start: .3em; line-height: 1.5; }