/* =====================================================================================================================
   M4 Eternal — design system (ds.css)
   ---------------------------------------------------------------------------------------------------------------------
   The one shared sheet of the public site, and the base the staff panel (web/admin) is meant to adopt so both look the
   same. Load it FIRST, then the site chrome (site.css) and the page sheet:

     <link rel="stylesheet" href="/assets/css/ds.css">
     <link rel="stylesheet" href="/assets/css/site.css">   (public site only: masthead, footer, home, guides)
     <link rel="stylesheet" href="/assets/css/<page>.css">

   Identity: the MIR4 client — night-blue ink, bronze-gold hairlines, the MIR4 red for the one action that matters, a cold
   cyan for selection and focus. Art, UI textures and fonts are the client's own (web/assets/official/, never committed);
   every component degrades to plain CSS when that folder is missing. CSP: style-src 'self' — no inline style="" in
   markup, no external fonts; set custom properties from JS (element.style.setProperty) when needed.

   CONTENTS
     1. Fonts (WN Sans per script)
     2. Tokens
        colour ..... --ink --night --deep --steel --slate (surfaces, darkest first) · --surface-1..3 (panels)
                     --text --muted --faint (text, all AA on --night) · --gold* (accent) · --red* (primary action)
                     --cyan* (selection, focus) · --jade/--ok, --amber/--warn, --danger, --info (status)
                     --line (neutral hairline) · --gold-hair / --gold-line (bronze hairlines)
        type ....... --font · --fs-2xs 12 · --fs-xs 12.5 · --fs-sm 13.5 · --fs-base 15 · --fs-md 16 · --fs-lg 18 · --fs-xl 22
                     --fs-2xl 28 · --fs-3xl (section title, fluid) · --fs-display (page title, fluid)
                     --lh-tight 1.15 · --lh-snug 1.35 · --lh-base 1.6 · --track-caps (letter-spacing of small caps)
        space ...... --sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 20 · --sp-6 24 · --sp-8 32 · --sp-10 40
                     --sp-12 48 · --sp-16 64 · --section-y (fluid vertical rhythm of a page section)
        radius ..... --r-xs 2 (default, the client's sharp frames) · --r-sm 4 · --r-md 6 · --r-lg 10 · --r-pill
        shadow ..... --sh-1 (raised) · --sh-2 (panel) · --sh-3 (popover/modal) · --glow-gold · --glow-cyan · --glow-red
        motion ..... --dur-1 .15s · --dur-2 .25s · --dur-3 .45s · --ease · --ease-out (all off under reduced motion)
        layout ..... --wrap 1240 · --wrap-wide 1440 · --header-h 60 · --gutter
        z-index .... --z-sticky 50 · --z-dropdown 60 · --z-overlay 90 · --z-modal 100 · --z-toast 110
     3. Base (reset, body, links, focus ring, selection, headings, skip link)
     4. Layout utilities   .wrap .wrap--wide .stack .cluster .grid-auto .sr-only .muted .num .hide-sm
     5. Typography         .kicker .title .lede .section-head (alias .band__head) .link-arrow
     6. Buttons            .btn + --primary --secondary --ghost --danger (flat) · --start --frame --blue (client textures)
                           sizes --small/--sm --lg · --wide · --icon · states :hover :active :focus-visible :disabled [aria-busy]
     7. Surfaces           .panel (+ .panel__title) · .card (+ --link --flat) · .divider
     8. Badges            .badge (+ --ok --warn --ban/--danger --staff/--info) · .tag · .chip (+ --gold --info --plain) · .status (+ --live --partial --planned)
     9. Tabs               .tabs > button[role=tab][aria-selected] (segmented) · .tabs--line (underline variant)
    10. Tables             .table (+ --compact --hover) inside .table-wrap (horizontal scroll on small screens)
    11. Forms              .form .field (label, input, select, textarea, .field__hint, [data-invalid]) · .check · .strength
    12. Feedback           .notice (+ --ok --warn --info) · .toast-region > .toast (+ --ok --warn --danger) · .empty
                           .loading · .skeleton
    13. Motion             [data-reveal] · .fade-swap · @keyframes rise/spin/swap · prefers-reduced-motion
   ===================================================================================================================== */

/* ---------- 1. fonts: the client's WN Sans family, each script only when a page needs it ---------- */
@font-face {
  font-family: "WN Sans"; src: url("/assets/official/fonts/wn-sans.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-218F, U+2190-21FF, U+2212, U+25A0-25FF;
}
@font-face {
  font-family: "WN Sans Thai"; src: url("/assets/official/fonts/wn-sans-thai.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: "WN Sans KR"; src: url("/assets/official/fonts/wn-sans-kr.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF;
}
@font-face {
  font-family: "WN Sans JP"; src: url("/assets/official/fonts/wn-sans-jp.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: "WN Sans SC"; src: url("/assets/official/fonts/wn-sans-sc.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: "WN Sans TC"; src: url("/assets/official/fonts/wn-sans-tc.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF;
}

/* ---------- 2. tokens ---------- */
:root {
  /* colour: surfaces, darkest first */
  --ink: #05070b;
  --night: #0a0f17;
  --deep: #0e1520;
  --steel: #182231;
  --slate: #243246;
  --surface-1: rgba(14, 21, 32, 0.72);          /* rows, inputs on a panel */
  --surface-2: rgba(20, 29, 43, 0.82);          /* cards */
  --surface-3: rgba(28, 40, 58, 0.94);          /* popovers, menus, toasts */
  --panel: rgba(11, 16, 25, 0.84);
  --panel-hi: rgba(20, 29, 43, 0.94);
  --panel-grad: linear-gradient(180deg, rgba(24, 34, 49, 0.78), rgba(10, 15, 23, 0.9));
  /* colour: text (contrast on --night: text 15.4, muted 8.3, faint 5.2, gold 8.6, cyan 10.6) */
  --text: #ebe5d6;
  --text-soft: #d3cdbf;                         /* long-form paragraphs */
  --muted: #a4abb8;
  --faint: #868e9c;
  --on-accent: #fff4dc;                         /* text on red / gold fills */
  /* colour: accent, primary, selection */
  --gold: #d2ab67;
  --gold-hi: #f6e2ae;
  --gold-lo: #8a6a36;                           /* decorative only, never text */
  --gold-line: rgba(210, 171, 103, 0.34);
  --gold-hair: rgba(210, 171, 103, 0.16);
  --gold-wash: rgba(210, 171, 103, 0.07);
  --red: #c42a1c;
  --red-hi: #e8452f;
  --red-deep: #5b130d;
  --cyan: #74d4f2;
  --cyan-line: rgba(116, 212, 242, 0.36);
  --cyan-wash: rgba(116, 212, 242, 0.08);
  --line: rgba(164, 171, 184, 0.2);
  --line-strong: rgba(164, 171, 184, 0.36);
  --line-field: #656c79;                        /* control borders: 3:1 on --night and on --steel (WCAG 1.4.11) */
  /* colour: status */
  --jade: #72c29d;
  --ok: var(--jade);
  --amber: #e0a24a;
  --warn: var(--amber);
  --danger: #ef6a52;
  --info: var(--cyan);

  /* type */
  --font: "WN Sans", "WN Sans KR", "WN Sans JP", "WN Sans Thai", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --fs-2xs: 12px;                              /* floor of any text on the site (M-7) */
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: clamp(24px, 2.6vw, 34px);
  --fs-display: clamp(30px, 4.2vw, 54px);
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --track-caps: 0.14em;
  --track-wide: 0.22em;

  /* space (4 px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --section-y: clamp(36px, 4.6vw, 64px);

  /* radius: the client's frames are sharp; softer radii for small controls only */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;
  --radius: var(--r-xs);

  /* shadow */
  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.8);
  --sh-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 44px -26px rgba(0, 0, 0, 0.9);
  --sh-3: 0 28px 60px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4);
  --shadow: var(--sh-2);
  --glow-gold: 0 0 24px -6px rgba(210, 171, 103, 0.45);
  --glow-cyan: 0 0 24px -6px rgba(116, 212, 242, 0.5);
  --glow-red: 0 0 26px -6px rgba(232, 69, 47, 0.55);

  /* motion */
  --dur-1: 0.15s;
  --dur-2: 0.25s;
  --dur-3: 0.45s;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* layout */
  --wrap: 1240px;
  --wrap-wide: 1440px;
  --header-h: 60px;
  --gutter: 24px;

  /* z-index */
  --z-sticky: 50;
  --z-dropdown: 60;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 110;

  --art: "/assets/official/";
  color-scheme: dark;
}
:lang(zh-Hant) { --font: "WN Sans", "WN Sans TC", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif; }
:lang(zh-Hans) { --font: "WN Sans", "WN Sans SC", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif; }
:lang(ja) { --font: "WN Sans", "WN Sans JP", "Yu Gothic", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; }
:lang(ko) { --font: "WN Sans", "WN Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; }
:lang(th) { --font: "WN Sans", "WN Sans Thai", "Leelawadee UI", "Thonburi", "Noto Sans Thai", system-ui, sans-serif; }
/* Scripts without capitals read badly with wide tracking: every small-caps label tightens through this one token. */
:lang(ko), :lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(th) { --track-caps: 0.05em; --track-wide: 0.1em; --fs-2xs: 13px; --fs-xs: 13px; }
/* Korean wraps between words (eojeol), never mid-word. */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 640px) { :root { --gutter: 16px; --fs-base: 14.5px; } }

/* ---------- 3. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--ink); }
html.i18n-pending body { opacity: 0; animation: i18n-reveal 0s 1.2s forwards; }
@keyframes i18n-reveal { to { opacity: 1; } }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(116, 212, 242, 0.05), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(196, 42, 28, 0.04), transparent 60%),
    linear-gradient(180deg, var(--night), var(--ink) 60%);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: opacity var(--dur-2);
}
body * { font-family: inherit; }
main { flex: 1; }
img, video { max-width: 100%; display: block; }
img.art--missing { visibility: hidden; }
a { color: var(--gold-hi); text-decoration: none; transition: color var(--dur-2); }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: var(--lh-tight); letter-spacing: 0.01em; }
p { margin: 0 0 1em; }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }
hr, .divider { height: 1px; border: 0; margin: var(--sp-6) 0; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.skip { position: absolute; left: 12px; top: -60px; z-index: var(--z-toast); padding: 10px 16px; background: var(--red); color: #fff; }
.skip:focus { top: 12px; color: #fff; }

/* ---------- 4. layout utilities ---------- */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--wide { width: min(var(--wrap-wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.stack { display: grid; gap: var(--stack, var(--sp-4)); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--sp-3)); }
.grid-auto { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .hide-sm { display: none; } }

/* ---------- 5. typography ---------- */
/* The kicker: small caps in gold between the client's title ornaments. */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold);
}
.kicker::before, .kicker::after {
  content: ""; width: 24px; height: 18px; flex: none;
  background: url("/assets/official/ui/title-deco-02.png") center / contain no-repeat;
  opacity: 0.9;
}
.kicker::after { transform: scaleX(-1); }

/* Gold engraved titles. */
.title, .page-head h1 {
  background: linear-gradient(180deg, #fff6dc 0%, var(--gold-hi) 38%, var(--gold) 70%, var(--gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(210, 171, 103, 0.16));
}
.title { font-size: var(--fs-3xl); text-transform: uppercase; letter-spacing: 0.07em; }
:lang(ko) .title, :lang(ja) .title, :lang(zh-Hant) .title, :lang(zh-Hans) .title { letter-spacing: 0.03em; }
.lede { color: var(--text-soft); font-size: var(--fs-md); max-width: 64ch; }

/* A section's heading row: kicker + title on the left, a link on the right. */
.section-head, .band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.section-head .kicker, .band__head .kicker { margin-bottom: var(--sp-1); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold);
}
.link-arrow::after { content: ""; width: 22px; height: 1px; background: currentColor; transition: width var(--dur-3) var(--ease); }
.link-arrow:hover::after { width: 36px; }

/* ---------- 6. buttons ---------- */
.btn {
  --h: 44px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h);
  padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  color: var(--text); background: none;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: filter var(--dur-2), transform var(--dur-1), background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.btn:hover { color: #fff; filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite;
}
.btn--wide { width: 100%; }
.btn--small, .btn--sm { --h: 36px; padding-inline: var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { --h: 52px; padding-inline: var(--sp-8); font-size: var(--fs-md); }
.btn--icon { --h: 40px; width: var(--h); padding: 0; }

/* Flat variants: forms, tables and the staff panel. */
.btn--primary {
  color: var(--on-accent); border-color: rgba(255, 140, 90, 0.35);
  background: linear-gradient(180deg, #a92617, #6b140c); box-shadow: inset 0 1px 0 rgba(255, 220, 190, 0.18), var(--sh-1);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 220, 190, 0.2), var(--glow-red); }
.btn--secondary { color: var(--gold-hi); border-color: var(--gold-line); background: linear-gradient(180deg, rgba(210, 171, 103, 0.12), rgba(210, 171, 103, 0.03)); }
.btn--secondary:hover { border-color: var(--gold); box-shadow: var(--glow-gold); }
.btn--ghost { color: var(--muted); border-color: var(--line); background: transparent; }
.btn--ghost:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.03); filter: none; }
.btn--danger { color: #ffd7ce; border-color: rgba(239, 106, 82, 0.5); background: rgba(91, 19, 13, 0.5); }
.btn--danger:hover { border-color: var(--danger); }

/* Client textures as nine-slice frames: "Start game" red lacquer (the one main action of a view), gold and cyan frames.
   Without the extracted art the fallback backgrounds keep them readable. */
.btn--start {
  --h: 54px;
  min-height: var(--h);
  padding: 0 var(--sp-5);
  font-size: var(--fs-md); letter-spacing: 0.18em;
  color: var(--on-accent); text-shadow: 0 1px 0 #2a0503, 0 0 14px rgba(255, 140, 90, 0.35);
  border: solid transparent; border-width: 15px 38px; border-radius: 0;
  border-image: url("/assets/official/ui/btn-gamestart.png") 30 80 fill / 15px 38px stretch;
  background: linear-gradient(180deg, #8f2217, #4d0e09) padding-box;
}
.btn--start::after {
  content: ""; position: absolute; inset: -6px -20px; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(232, 69, 47, 0.35), transparent);
  opacity: 0; transition: opacity var(--dur-3);
}
.btn--start:hover::after { opacity: 1; }
.btn--frame {
  --h: 44px;
  border: solid transparent; border-width: 13px 28px; border-radius: 0;
  border-image: url("/assets/official/ui/btn-nor-01.png") 20 44 fill / 13px 28px stretch;
  background: linear-gradient(180deg, rgba(58, 43, 18, 0.7), rgba(14, 16, 22, 0.8)) padding-box;
  padding: 0 var(--sp-1);
  color: var(--gold-hi);
}
.btn--blue { border-image-source: url("/assets/official/ui/btn-nor-02.png"); background: linear-gradient(180deg, rgba(18, 44, 58, 0.7), rgba(10, 15, 23, 0.8)) padding-box; color: #d7f3ff; }
.btn--frame.btn--small, .btn--frame.btn--sm { --h: 36px; border-width: 10px 22px; border-image-width: 10px 22px; padding: 0 var(--sp-1); }
.btn--start.btn--small, .btn--start.btn--sm { --h: 42px; border-width: 12px 30px; border-image-width: 12px 30px; font-size: var(--fs-sm); }

/* ---------- 7. surfaces ---------- */
/* The popup panel of the client: dark glass, bronze hairline, a gilded top edge and the ornament in the corner. */
.panel {
  --pad: var(--sp-6);
  position: relative;
  background: var(--panel-grad);
  border: 1px solid var(--gold-hair);
  box-shadow: var(--sh-2);
  padding: var(--pad);
}
.panel::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
  opacity: 0.7;
}
.panel::after {
  content: ""; position: absolute; right: 0; top: 0; width: 96px; height: 46px; pointer-events: none;
  background: url("/assets/official/ui/pattern-popup.png") right top / contain no-repeat; opacity: 0.7;
}
.panel__title {
  display: flex; align-items: center; gap: 10px;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--sp-5); padding: var(--sp-3) var(--pad);
  background: url("/assets/official/ui/frame-popup-02.png") center / 100% 100%, linear-gradient(180deg, rgba(36, 50, 70, 0.55), rgba(20, 29, 43, 0.3));
  font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-hi);
  border-bottom: 1px solid var(--gold-hair);
}
.panel__title::before { content: ""; width: 18px; height: 18px; flex: none; background: url("/assets/official/ui/title-deco.png") center / contain no-repeat; }
@media (max-width: 640px) { .panel { --pad: var(--sp-4); } }

/* A plain card: lists, tiles, admin widgets. --link lifts on hover. */
.card {
  position: relative; display: block; padding: var(--sp-4);
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--gold-hair); border-radius: var(--radius); box-shadow: var(--sh-1);
}
.card--flat { background: var(--surface-1); box-shadow: none; }
.card--link { transition: border-color var(--dur-2), transform var(--dur-2) var(--ease), background var(--dur-2); }
.card--link:hover { color: var(--text); border-color: var(--gold-line); background: var(--surface-3); transform: translateY(-2px); }
.card__title { font-size: var(--fs-md); color: #fff; margin: 0 0 var(--sp-1); }
.card__meta { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 8. badges, tags, chips, status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px;
  font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.5; color: var(--text);
  background: rgba(5, 7, 11, 0.6); border: 1px solid var(--gold-hair); border-radius: var(--radius);
}
.badge i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); flex: none; }
.badge--ok { color: #c9f0dc; border-color: rgba(114, 194, 157, 0.4); }
.badge--ok i { background: var(--jade); box-shadow: 0 0 8px var(--jade); }
.badge--warn { color: #f6dcae; border-color: rgba(224, 162, 74, 0.45); }
.badge--warn i { background: var(--amber); }
.badge--ban, .badge--danger { color: #ffd7ce; border-color: rgba(239, 106, 82, 0.55); background: rgba(91, 19, 13, 0.55); }
.badge--ban i, .badge--danger i { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.badge--staff, .badge--info { color: #d7f3ff; border-color: var(--cyan-line); }
.badge--staff i, .badge--info i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.tag {
  display: inline-block; padding: 2px 8px;
  font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.5;
  color: var(--cyan); border: 1px solid var(--cyan-line); background: var(--cyan-wash); border-radius: var(--radius);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
  font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.6;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.chip--gold { color: var(--gold-hi); border-color: var(--gold-line); background: var(--gold-wash); }
.chip--info { color: var(--cyan); border-color: var(--cyan-line); }
.chip--plain { text-transform: none; letter-spacing: 0.02em; }
.status { display: inline-block; padding: 2px 9px; font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; border: 1px solid; border-radius: var(--radius); }
.status--live { color: var(--jade); border-color: rgba(114, 194, 157, 0.4); }
.status--partial { color: var(--amber); border-color: rgba(224, 162, 74, 0.4); }
.status--planned { color: var(--faint); border-color: rgba(134, 142, 156, 0.5); }

/* ---------- 9. tabs ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 0; margin-bottom: var(--sp-5); border: 1px solid var(--gold-hair); background: rgba(10, 15, 23, 0.7); }
.tabs > button, .tabs > a {
  min-height: 40px; padding: 0 var(--sp-5); background: transparent; color: var(--muted);
  border: 0; cursor: pointer; font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: color var(--dur-2), background var(--dur-2);
}
.tabs > * + * { border-left: 1px solid var(--gold-hair); }
.tabs > :hover { color: var(--text); }
.tabs > [aria-selected="true"], .tabs > [aria-current="page"] {
  color: #fff; background: linear-gradient(180deg, rgba(116, 212, 242, 0.16), rgba(10, 15, 23, 0.5)); box-shadow: inset 0 -2px 0 var(--cyan);
}
.tabs--line { border: 0; border-bottom: 1px solid var(--gold-hair); background: none; display: flex; }
.tabs--line > * + * { border-left: 0; }
.tabs--line > [aria-selected="true"] { background: none; }

/* ---------- 10. tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gold-hair); background: var(--surface-1); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 500; font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--faint); padding: var(--sp-2) var(--sp-3); background: var(--deep); border-bottom: 1px solid var(--gold-line); white-space: nowrap;
}
.table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gold-hair); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table--hover tbody tr { transition: background var(--dur-1); }
.table--hover tbody tr:hover { background: var(--cyan-wash); }
.table--compact td, .table--compact th { padding: 6px 10px; }
.table .r, .table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 11. forms ---------- */
.form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.field { display: grid; gap: 6px; }
.field label:not(.check), .field__label, .label { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 44px; padding: 0 var(--sp-3);
  color: var(--text); font-size: var(--fs-md); /* 16px: no zoom on focus in iOS */
  background: rgba(5, 7, 11, 0.7); border: 1px solid var(--line-field); border-radius: var(--radius);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.field textarea, textarea.input { padding: var(--sp-3); min-height: 120px; line-height: var(--lh-base); resize: vertical; }
.field select, select.input { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(-45deg, transparent 50%, var(--gold) 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { border-color: #8a91a0; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(116, 212, 242, 0.18); }
.field input:disabled, .input:disabled { opacity: 0.6; cursor: not-allowed; }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea, .input[aria-invalid="true"] { border-color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--faint); min-height: 1em; line-height: 1.45; }
.field[data-invalid] .field__hint { color: var(--danger); }
.check { display: inline-flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); color: var(--text-soft); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); flex: none; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength span { height: 3px; background: rgba(255, 255, 255, 0.08); transition: background var(--dur-3); }
.strength[data-level="1"] span:nth-child(-n+1) { background: var(--danger); }
.strength[data-level="2"] span:nth-child(-n+2) { background: var(--amber); }
.strength[data-level="3"] span:nth-child(-n+3) { background: var(--gold); }
.strength[data-level="4"] span { background: var(--jade); }
.form .btn { margin-top: var(--sp-1); }

/* ---------- 12. feedback ---------- */
.notice { margin: 0; padding: 10px 14px; font-size: var(--fs-sm); line-height: 1.5; border-left: 3px solid var(--danger); background: rgba(239, 106, 82, 0.1); color: var(--text); }
.notice--ok { border-left-color: var(--jade); background: rgba(114, 194, 157, 0.1); }
.notice--warn { border-left-color: var(--amber); background: rgba(224, 162, 74, 0.1); }
.notice--info { border-left-color: var(--gold); background: rgba(210, 171, 103, 0.1); color: var(--gold-hi); }
/* Toasts: <div class="toast-region" role="status" aria-live="polite"> holding <div class="toast toast--ok">…</div>. */
.toast-region {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast);
  display: grid; gap: var(--sp-2); width: min(380px, calc(100% - 2 * var(--sp-4))); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--text);
  background: var(--surface-3); border: 1px solid var(--gold-line); border-left: 3px solid var(--gold);
  box-shadow: var(--sh-3); backdrop-filter: blur(10px);
  animation: toast-in var(--dur-3) var(--ease-out) both;
}
.toast--ok { border-left-color: var(--jade); }
.toast--warn { border-left-color: var(--amber); }
.toast--danger { border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.empty { padding: var(--sp-6); text-align: center; border: 1px dashed var(--gold-hair); color: var(--muted); }
.loading { color: var(--faint); letter-spacing: 0.08em; }
.loading::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; vertical-align: -3px;
  background: url("/assets/official/ui/throbber.png") center / contain no-repeat; animation: spin 1s linear infinite; }
.skeleton { border-radius: var(--radius); background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- 13. motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fade-swap { animation: swap 0.5s var(--ease) both; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].is-quiet { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
@media print {
  body { background: #fff; color: #000; }
  .masthead, .footer, .skip { display: none !important; }
}