/* generated by tools/info-page.mjs: fonts, apps/client/src/ui/kour-tokens.css, tools/info-site/info.css */
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/poppins-latin-500-normal.woff2) format('woff2')}
      @font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/poppins-latin-700-normal.woff2) format('woff2')}
      @font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/poppins-latin-800-normal.woff2) format('woff2')}
      @font-face{font-family:'Fjalla One';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/fjalla-one-latin-400-normal.woff2) format('woff2')}
/*
 * Kour design tokens (docs/DESIGN.md): the measured look of the original uGUI panels as CSS
 * custom properties plus a few utility classes, for every UI of the rebuild that is not drawn
 * from an original UI document (DOM panels, full-screen states, standalone tools).
 *
 * Every value is taken from the extracted UI documents (apps/client/public/assets/extracted/ui);
 * the source object of each token is listed in docs/DESIGN.md "Tokens". Lengths of the size
 * tokens are canvas units of the 1920 x 1080 reference canvas (ui/dom-canvas.ts lays DOM panels
 * out in these units); the em-based tokens scale with the text.
 *
 * This file is plain CSS that loads nothing (no imports, no fonts, no images):
 * tools/sync-design-tokens.mjs copies it unchanged for tools that cannot import game code.
 * Change values here only together with docs/DESIGN.md.
 */
:root {
  /* ---- type: TMP "Nexa-Heavy SDF" = Poppins Bold; TMP bold style = ExtraBold */
  --kour-font: 'Poppins', Arial, sans-serif;
  --kour-weight: 700;
  --kour-weight-bold: 800;
  /* TMP face info: lineHeight 43.5 / pointSize 29 */
  --kour-line-height: 1.5;
  /* text sizes by role (canvas units) */
  --kour-size-hero: 50px;
  --kour-size-tab: 40px;
  --kour-size-title: 36px;
  --kour-size-heading: 32px;
  --kour-size-row: 30px;
  --kour-size-button: 28px;
  --kour-size-body: 26px;
  --kour-size-small: 22px;
  --kour-size-label: 16px;
  --kour-size-tiny: 12px;

  /* ---- text effects (TMP material "Nexa-Heavy SDF Material", em of the text's own size) */
  /* underlay: offset (0.521, -0.794) x ScaleRatioC 0.594 x GradientScale 4 / pointSize 29 */
  --kour-text-shadow: 0.0427em 0.0651em 0.0066em rgb(0 0 0 / 0.537);
  /* outline of the HUD material "Nexa-Heavy SDF Material 1" (kill feed, gun game names) */
  --kour-outline-width: 0.0238em;
  --kour-text-outline:
    var(--kour-outline-width) 0 0 #000,
    calc(var(--kour-outline-width) * 0.7071) calc(var(--kour-outline-width) * 0.7071) 0 #000,
    0 var(--kour-outline-width) 0 #000,
    calc(var(--kour-outline-width) * -0.7071) calc(var(--kour-outline-width) * 0.7071) 0 #000,
    calc(var(--kour-outline-width) * -1) 0 0 #000,
    calc(var(--kour-outline-width) * -0.7071) calc(var(--kour-outline-width) * -0.7071) 0 #000,
    0 calc(var(--kour-outline-width) * -1) 0 #000,
    calc(var(--kour-outline-width) * 0.7071) calc(var(--kour-outline-width) * -0.7071) 0 #000;
  /* rebuild (user request 2026-10-04): heavier outlines of HUD texts that stand on the game
     picture, reach beyond the glyph in em of the text size. The same values as
     ui/text-outline.ts TEXT_OUTLINES (tests/text-outline.test.ts compares them). */
  --kour-outline-chat: 0.04em;
  --kour-outline-board: 0.05em;
  --kour-outline-popup: 0.0655em;
  --kour-outline-damage: 0.08em;
  --kour-outline-warning: 0.07em;
  /* status lines on the game picture (CTF flag line, FB26): the chat's rim + the strong underlay */
  --kour-outline-status: 0.04em;
  /* the underlay of the chat / board / status levels: the material's offsets, black 80 % */
  --kour-text-shadow-strong: 0.0427em 0.0651em 0.0066em rgb(0 0 0 / 0.8);
  /* uGUI Shadow effect of icons: (1, -1), black 50 % */
  --kour-icon-shadow: drop-shadow(1px 1px 0 rgb(0 0 0 / 0.5));

  /* ---- surfaces */
  --kour-bg: #111111;
  --kour-surface: #1a1a1a;
  --kour-surface-2: #1d1d1d;
  --kour-surface-3: #222222;
  --kour-card: #2b2b2b;
  --kour-card-2: #333333;
  --kour-field: #3c3c3c;
  --kour-field-light: #525252;
  --kour-inset: rgb(0 0 0 / 0.1);
  --kour-row: rgb(0 0 0 / 0.31);
  --kour-line: #2e2e2e;
  --kour-line-light: #3f3f3f;
  --kour-dialog: #151718;
  --kour-toast: rgb(65 65 65 / 0.97);
  --kour-scrim: rgb(26 26 26 / 0.86);
  --kour-scrim-panel: rgb(7 7 7 / 0.55);
  --kour-scrim-dialog: rgb(0 0 0 / 0.71);
  /* SocialPanel: its own scrim and the header bar of its frame */
  --kour-scrim-social: rgb(0 0 0 / 0.745);
  /* FB26: the band of a "death message" announcement (ui/screens/souls-banner.css) and its serif
     letters - system serif faces, nothing downloaded */
  --kour-souls-band: rgb(0 0 0 / 0.72);
  --kour-font-serif: Georgia, 'Times New Roman', Times, serif;
  --kour-surface-bar: #262626;

  /* ---- text colours */
  --kour-text: #ffffff;
  --kour-text-2: #c5c5c5;
  --kour-text-3: #9f9f9f;
  --kour-text-body: #b2b2b2;
  --kour-text-label: #616161;
  --kour-text-disabled: rgb(149 149 149 / 0.32);
  --kour-text-pressed: #000000;

  /* ---- action colours (button fills); "-2" = the colour of the button's glow layer */
  --kour-blue: #2198f1;
  --kour-blue-deep: #195ba9;
  --kour-blue-deep-2: #038abe;
  --kour-green: #3ec326;
  --kour-green-2: #31841b;
  --kour-green-deep: #319f2b;
  --kour-red: #ca473e;
  --kour-red-2: #b4252d;
  --kour-red-close: #b03434;
  --kour-red-deep: #981620;
  --kour-grey: #484848;
  --kour-grey-light: #6a6a6a;
  --kour-grey-light-2: #9a9a9a;
  --kour-orange: #ff9e00;
  --kour-orange-2: #ff7c00;
  --kour-yellow: #ffff00;
  --kour-link: #0000ff;

  /* ---- meaning */
  --kour-kp: #ffd021;
  --kour-kp-earn: #ffe600;
  --kour-level: #ff9700;
  --kour-error: #ff0000;
  --kour-error-icon: #db2626;
  --kour-online: rgb(30 255 0 / 0.78);
  --kour-offline: rgb(137 137 137 / 0.78);
  /* rebuild: the third status "In a Match" of the friend list (friend-list.ts STATUS_COLORS
     (1, 0.69, 0, 0.784)), also the friend chat's status word (FB26) */
  --kour-in-match: rgb(255 176 0 / 0.78);
  /* the unread count of a friend row / chat tab (FB26): the lobby's notification badge red */
  --kour-unread: var(--kour-lobby-badge);
  --kour-ban: #ad2a2a;
  /* rebuild (user request 2026-10-21): the word NUKE of the kill feed's "{name} dropped a NUKE",
     the online stripe's green without its transparency (ui/screens/nuke-feed.ts NUKE_GREEN) */
  --kour-nuke: #1eff00;
  /* ShopPanel.RarityColor: Uncommon, Rare, Epic, Legendary, Immortal */
  --kour-rarity-0: #1ec227;
  --kour-rarity-1: #0070dd;
  --kour-rarity-2: #a12fef;
  --kour-rarity-3: #ffd200;
  --kour-rarity-4: #f51300;
  /* rebuild (user request FB6SKIN): Unobtainable above Immortal - a premium black: black panels
     with a slow dark violet sheen and purple glints, item names purple with a pulsing purple glow
     (ui/rarity-fx.css; RARITIES color / textColor in reference/custom-items.json) */
  --kour-rarity-5: #000000;
  --kour-rarity-5-sheen: #3b2f52;
  --kour-rarity-5-glint: #a35cff;
  --kour-rarity-5-text: #b57bff;
  /* rebuild (FB17ITEMS, the Unobtainable reveal of ui/panels/unobtainable-reveal.css): the two
     cells of the Error skins' checker (assets-custom/weapon-skins/errorchecker.png: magenta
     (255, 0, 222) / near-black (5, 1, 4)), its glitch layers and the scanlines over them */
  --kour-error-magenta: #ff00de;
  --kour-error-black: #050104;
  --kour-error-scan: rgb(0 0 0 / 0.35);
  /* rebuild (FB34, the looks of the Unobtainable reveal for the Reality Crate's collections,
     ui/panels/unobtainable-reveal.css): Secret = the laser of its skins (render/skin-fx.ts LASER
     color / core) on a near-black red; Chroma = the rainbow of its skins (skin-fx.ts rainbow) as
     a band and as a wheel, split cyan / magenta ghosts; Reality = the bone white of the Karambit
     Antique's blade */
  --kour-secret-red: #ff2418;
  --kour-secret-core: #ffd9d2;
  --kour-secret-text: #ff6a5c;
  --kour-secret-black: #080102;
  --kour-chroma-cyan: #27e6ff;
  --kour-chroma-magenta: #ff3df2;
  --kour-chroma-text: #e8fbff;
  --kour-chroma-black: #03050b;
  --kour-chroma-band: linear-gradient(
    90deg,
    #ff2a2a,
    #ffb92a 17%,
    #f4ff2a 33%,
    #2aff5d 50%,
    #2ad4ff 67%,
    #5a2aff 83%,
    #ff2ae0
  );
  --kour-chroma-wheel: conic-gradient(
    #ff2a2a,
    #ffb92a,
    #f4ff2a,
    #2aff5d,
    #2ad4ff,
    #5a2aff,
    #ff2ae0,
    #ff2a2a
  );
  --kour-reality-bone: #efe9dc;
  --kour-reality-black: #050608;
  /* rebuild (FB33, the golden weapon's unlock of ui/golden-reveal.css and the class mastery of
     the challenges): the Golden Zombie's ramp (tools/build-golden-zombie.py RAMP: bronze shadow,
     bronze, gold, light gold, pale highlight), the warm black behind the unlock, the glow of its
     texts and the dark casting the gold rises through */
  --kour-golden-shadow: #2e1a06;
  --kour-golden-bronze: #7a4c0e;
  --kour-golden: #d6a024;
  --kour-golden-light: #fad25c;
  --kour-golden-pale: #fff6c8;
  --kour-golden-black: #0b0702;
  --kour-golden-text-glow: 0 0.05em 0 #2e1a06, 0 0 0.3em rgb(250 210 92 / 0.65);
  --kour-golden-cast: brightness(0.12) sepia(1) saturate(2.2);
  /* FB34: a finished class mastery picture in gold (ui/panels/challenge-nodes.ts setGoldPicture):
     the picture's light and dark on the golden ramp, a soft glow of the light gold around it */
  --kour-golden-picture: grayscale(1) sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(1.12)
    contrast(1.1) drop-shadow(0 0 0.35em rgb(250 210 92 / 0.6));
  /* FB34: the max level's label taking turns with "MAX LVL" (ui/unity/max-level-tag.ts
     MAX_LEVEL_LOOK holds the same values for the world canvases; unity-ui.css ".u-maxlvl") */
  --kour-maxlvl: #ead9ff;
  --kour-maxlvl-glow: 0 0 0.18em #b266ff, 0 0 0.5em #6a1fd0;
  --kour-maxlvl-cycle: 7s;
  --kour-rarity-none: #323232;
  /* ShopItemSlot as DOM (FB24LOBBY, ui/effects-tab.css; measured on the shop's weapon cards): the
     card's surface = the rarity at this share on the panel's grey, the picture in the rarity
     darkening to this share towards the bottom, rim and button lightened by 0.2
     (ShopItemSlot.GetAdjustedColor), the button of an owned item Color.gray, of the equipped one
     (0.15, 0.15, 0.15) */
  --kour-slot-card: 30%;
  --kour-slot-picture-bottom: 55%;
  --kour-slot-light: 20%;
  --kour-slot-owned: #808080;
  --kour-slot-current: #262626;
  --kour-slot-radius: 18px;
  --kour-slot-rim: 4px;
  --kour-slot-name: 24px;
  --kour-slot-rarity: 22.6px;
  --kour-slot-button: 32px;
  --kour-slot-button-height: 50px;
  /* the shop's tab row (shoppanel Image (1)): bar, the open tab's tile, its label yellow */
  --kour-shop-tabbar: #0d0d0d;
  --kour-shop-tab-open: #24240b;
  /* TeamDesign "first": Terrorists / Counter - Terrorists, and their scoreboard text colours */
  --kour-team-1: #fdc429;
  --kour-team-2: #4299ec;
  --kour-team-1-text: #ffeaa0;
  --kour-team-2-text: #a6d3e9;
  /* RankManager.rankBackgroundColors: first tier of Bronze, Silver, Gold, Champion; Elite */
  --kour-rank-bronze: #412e22;
  --kour-rank-silver: #545e67;
  --kour-rank-gold: #d19a00;
  --kour-rank-champion: #561898;
  --kour-rank-elite: #ee391f;
  /* the rank "Celestial" (FB12, rank-style.css): its box, the gold of the rays, the starlight of
     the halo, the shine over the emblem */
  --kour-rank-celestial: #0d174d;
  --kour-rank-celestial-gold: rgb(255 236 170 / 0.5);
  --kour-rank-celestial-halo: rgb(150 196 255 / 0.55);
  --kour-rank-celestial-rim: rgb(255 224 138 / 0.32);
  --kour-rank-celestial-shine: rgb(255 255 255 / 0.75);

  /* ---- shape: sliced sprite "Slider15_White_Frame" (18 px border) / pixelsPerUnitMultiplier */
  --kour-radius: 9px;
  --kour-radius-sm: 6px;
  --kour-radius-lg: 18px;
  --kour-radius-dialog: 30px;
  /* "Slider15_White_Handle" (38 px border) at multiplier 3 */
  --kour-radius-pill: 12.7px;
  /* uGUI Outline effect of raised boxes (notification, region button) */
  --kour-outline: 4px;

  /* ---- sizes of controls (canvas units) */
  --kour-field-height: 44px;
  --kour-button-height: 52px;
  --kour-close-width: 54px;
  --kour-close-height: 48px;
  --kour-toggle: 44px;
  --kour-scrollbar: 20px;
  --kour-gap: 5px;
  --kour-pad: 10px;
  --kour-pad-lg: 20px;
  /* SocialPanel frame: the header bar 25 in from the sides, its top 31 below the frame's */
  --kour-panel-inset: 25px;
  --kour-panel-bar-top: 31px;
  --kour-panel-bar-height: 88.64px;

  /* ---- motion */
  /* AnimatedButton tweens and the Animator cross-fades of button states */
  --kour-press: 0.05s;
  /* Selectable ColorTint fadeDuration */
  --kour-fade: 0.1s;
  /* Popup.Show / Popup.Close */
  --kour-popup-in: 0.1s;
  --kour-popup-out: 0.15s;
  /* Popup.startFrom (0, -90) and DOTween OutCirc (approximated as a cubic Bezier) */
  --kour-popup-from: 90px;
  --kour-ease-popup: cubic-bezier(0.075, 0.82, 0.165, 1);
  /* side panels as drawers (FB18UI, ui/drawer.ts DRAWER = the same values for the canvases):
     in like the Leaderboards' Popup (0.2 s, OutCirc), out like Popup.Close (0.15 s, InOutQuint) */
  --kour-drawer-in: 0.2s;
  --kour-drawer-out: 0.15s;
  --kour-ease-drawer-in: cubic-bezier(0.075, 0.82, 0.165, 1);
  --kour-ease-drawer-out: cubic-bezier(0.86, 0, 0.07, 1);
  --kour-hover-scale: 1.02;
  --kour-press-scale: 0.94;

  /* ---- selection frame of "the current entry" (docs/DESIGN.md 3.14, ui/select-frame.ts): a white
     line from the entry's edge inwards, no glow - the outline of the original's chosen colour
     slot (PfpSelectPanel, 5 units) */
  --kour-selected-line: 5px;
  --kour-selected-color: var(--kour-text);
  /* a row a screen opened the settings on (ui/panels/settings-focus.ts, FB23UIFIX): the frame of
     .kour-selected over a faint light surface, once */
  --kour-focus-flash-surface: rgb(255 255 255 / 0.1);

  /* ---- the new lobby (FB16UI, docs/DESIGN.md 6.4): measured on the user's "Lobby Rework"
     design (externalHere/new UI, 1920 x 1080), no original counterpart */
  --kour-lobby-bar: #282828;
  --kour-lobby-bar-end: #343434;
  --kour-lobby-bar-line: #3a3a3a;
  --kour-lobby-square: #272727;
  /* hover of the header bar (FB23UIFIX, user request "beim hovern über die navbar im main menu
     etwas deutlichere Markierung"): lighter surface, white line at the bottom of a segment */
  --kour-lobby-square-hover: #3c3c3c;
  --kour-lobby-nav-hover: #363636;
  --kour-lobby-nav-hover-line: 4px;
  --kour-lobby-card: #262626;
  --kour-lobby-backdrop-in: #2b2b2b;
  --kour-lobby-backdrop-out: #050505;
  --kour-lobby-welcome: #cfcfcf;
  --kour-lobby-credit: #000000;
  --kour-lobby-play: #04d10c;
  --kour-lobby-play-top: #2ee82b;
  --kour-lobby-play-edge: #0b9e10;
  --kour-lobby-finder: #2f8be6;
  --kour-lobby-finder-top: #4ba6f3;
  --kour-lobby-finder-edge: #1c64bd;
  /* the friends button: exactly the green of PLAY NOW (FB26, user request "der fried panel button
     soll das gleiche grün haben wie der 'Play now' button im main menu"; FB23UIFIX had the Kour
     dialog green, before that the design's lime #84ea12 -> #6fdb06) - same gradient and rim */
  --kour-lobby-friends: var(--kour-lobby-play);
  --kour-lobby-friends-top: var(--kour-lobby-play-top);
  --kour-lobby-friends-rim: var(--kour-lobby-play-rim);
  --kour-lobby-discord: #5865f2;
  --kour-lobby-badge: #e5322b;
  --kour-lobby-shine: rgb(255 255 255 / 0.28);
  --kour-lobby-spinner-track: rgb(255 255 255 / 0.35);
  /* square buttons of the bar 12, credit pill 14, badges 15 (half their height) */
  --kour-lobby-radius-square: 12px;
  --kour-lobby-radius-credit: 14px;
  --kour-lobby-radius-badge: 15px;
  /* the 3-unit rims of PLAY (all round) and SERVER FINDER (bottom) */
  --kour-lobby-play-rim: inset 0 0 0 3px var(--kour-lobby-play-edge);
  --kour-lobby-finder-rim: inset 0 -3px 0 var(--kour-lobby-finder-edge);
  /* entrance: the bar, the sides and the PLAY block glide in (0.5 s, ease-out-quint) */
  --kour-lobby-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kour-lobby-in: 0.5s;
  /* the animated backdrop (FB17, docs/DESIGN.md 6.4): the original lobby's motifs - the tiled
     crosshairs and skulls of `lobby` "fx-es" (sprites aim-repeat / skull-tile at 17 % / 9 %,
     turned 10 degrees) and the gold glow "FX_REGULAR" (1, 0.83, 0) - quieter on the dark vignette:
     the pattern's opacity, the glow and the light sweep as shares of --kour-kp / --kour-text */
  --kour-lobby-bg-icons: 0.065;
  --kour-lobby-bg-glow: 13%;
  --kour-lobby-bg-sweep: 5%;
  /* one tile of the pattern (canvas units) and the slow cycles */
  --kour-lobby-bg-tile: 420;
  --kour-lobby-bg-drift: 120s;
  --kour-lobby-bg-breathe: 7s;
  --kour-lobby-bg-sweep-cycle: 16s;

  /* ---- the shop's Home page in Vue (FB18VUE, docs/DESIGN.md 6.5): the colours and radii of the
     original page (shoppanel Home), each from its node */
  /* CaseGallery/unlockBtn (0, 0.694, 1) and its glow (0.134, 0.382, 0.604) */
  --kour-shop-crate-buy: #00b1ff;
  --kour-shop-crate-buy-glow: #22619a;
  /* CaseOfTheDay: Image_2 (0.396, 0, 0.8), rays fx_2_ (1, 0.467, 0.993), glow fx_3 (0.6, 0, 1),
     unlockBtn_1 (0.411, 0, 0.83) and its glow (0.311, 0, 0.651) */
  --kour-shop-cod: #6500cc;
  --kour-shop-cod-rays: #ff77fd;
  --kour-shop-cod-glow: #9900ff;
  --kour-shop-cod-button: #6900d4;
  --kour-shop-cod-button-glow: #4f00a6;
  /* CaseOfTheDayHover: Image_2 (0.377 grey), fx_2_ (0.865, 0.354, 1), unlockBtn_1 (0, 0.755,
     0.164) and its glow (0, 0.491, 0.037); CaseOfTheDayPressed: fx_2_ (0.472 grey) */
  --kour-shop-cod-hover: #606060;
  --kour-shop-cod-rays-hover: #dd5aff;
  --kour-shop-cod-button-hover: #00c02a;
  --kour-shop-cod-button-glow-hover: #007d09;
  --kour-shop-cod-rays-pressed: #787878;
  /* the band behind "CASE OF THE DAY" (glow_10, #1C1C1C 64 %) and "CLICK TO OPEN" (50 %) */
  --kour-shop-cod-band: rgb(28 28 28 / 0.64);
  --kour-shop-cod-pill: rgb(28 28 28 / 0.5);
  /* the gallery's notification (1, 0, 0.199) */
  --kour-shop-badge: #ff0033;
  /* right/BottomRight/buykp (0, 0.485, 1) and its Image_Glow_Bottom (0, 0.923, 1) */
  --kour-shop-buy-kp: #007cff;
  --kour-shop-buy-kp-glow: #00ebff;
  /* Slider15_White_Handle (rim 38) with pixelsPerUnitMultiplier 0.9 (CaseGallery), 0.88
     (CaseOfTheDay/Image_1: the white rim, 10 units larger and not maskable) and 1.2 (unlockBtn,
     unlockBtn_1) */
  --kour-shop-radius-card: 42.2px;
  --kour-shop-radius-cod-rim: 43.2px;
  --kour-shop-radius-button: 31.7px;

  /* ---- ProfilePanel in Vue (FB18VUE2, docs/DESIGN.md 6.6): profilepanel's colours */
  /* Top / Top (2) Image: the title bars, the rebuild's section cards and the level bar (0.085) */
  --kour-profile-bar: #161616;
  /* Top (3)/Image …: the stat tiles (0.071) and their labels (TMP 0.561) */
  --kour-profile-tile: #121212;
  --kour-profile-tile-label: #8f8f8f;
  /* "ACCOUNT CREATED" (Text (TMP) (1)_1: 0.226) and the date below it (createDateTxt: 0.387) */
  --kour-profile-created-label: #3a3a3a;
  --kour-profile-created: #636363;
  /* levelinfo (white, alpha 0.196) and xp-fill (white 13.3 %) */
  --kour-profile-xp-alpha: 0.196;
  --kour-profile-xp-fill: rgb(255 255 255 / 0.133);
  /* Rank: uGUI Outline (0.123, alpha 0.5, distance 4 = --kour-outline) */
  --kour-profile-rank-outline: rgb(31 31 31 / 0.5);
  /* profileImageParent/Image: the own picture's hover cover (0.198, alpha 0.694) */
  --kour-profile-picture-cover: rgb(51 51 51 / 0.694);
  /* BANNED (black 78.4 %) and its line "This user has 1 Admin Ban on record" (0.755, 0.174,
     0.174) */
  --kour-profile-banned-cover: rgb(0 0 0 / 0.784);
  --kour-profile-banned: #c02c2c;
}

/* ---------------------------------------------------------------- utilities */

/* white bold text with the underlay shadow: every text of the original panels */
.kour-text {
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  line-height: var(--kour-line-height);
  color: var(--kour-text);
  text-shadow: var(--kour-text-shadow);
}
.kour-text-outline {
  text-shadow: var(--kour-text-outline);
}
/* a chat / kill feed line of a DOM chat: outline of the chat level plus the stronger underlay
   (the look of TEXT_OUTLINES.chat on the canvases' chat slots). The outline is ONE stroke below
   the fill with round joins (ui/unity/text.ts TextStroke, FUTURE-IMPROVMENTS #352), at least one
   device pixel wide (#353: --layer-px of ui/dom-canvas.ts canvasLayer); browsers without text
   strokes draw eight hard shadows. Names painted with a gradient (background-clip: text) take the
   same as a filter: four hard shadows widen the glyphs by the outline, the fifth is the underlay. */
.kour-text-outline-chat {
  --kour-chat-rim: max(var(--kour-outline-chat), var(--layer-px, 0px));
  -webkit-text-stroke: calc(var(--kour-chat-rim) * 2) #000;
  paint-order: stroke fill;
  stroke-linejoin: round;
  text-shadow: var(--kour-text-shadow-strong);
  --u-name-shadow: drop-shadow(var(--kour-chat-rim) 0 0 #000)
    drop-shadow(calc(var(--kour-chat-rim) * -1) 0 0 #000) drop-shadow(0 var(--kour-chat-rim) 0 #000)
    drop-shadow(0 calc(var(--kour-chat-rim) * -1) 0 #000)
    drop-shadow(0.0427em 0.0651em 0.0033em rgb(0 0 0 / 0.8));
}
@supports not (paint-order: stroke fill) {
  .kour-text-outline-chat {
    -webkit-text-stroke: 0;
    text-shadow:
      var(--kour-chat-rim) 0 0 #000,
      calc(var(--kour-chat-rim) * 0.7071) calc(var(--kour-chat-rim) * 0.7071) 0 #000,
      0 var(--kour-chat-rim) 0 #000,
      calc(var(--kour-chat-rim) * -0.7071) calc(var(--kour-chat-rim) * 0.7071) 0 #000,
      calc(var(--kour-chat-rim) * -1) 0 0 #000,
      calc(var(--kour-chat-rim) * -0.7071) calc(var(--kour-chat-rim) * -0.7071) 0 #000,
      0 calc(var(--kour-chat-rim) * -1) 0 #000,
      calc(var(--kour-chat-rim) * 0.7071) calc(var(--kour-chat-rim) * -0.7071) 0 #000,
      var(--kour-text-shadow-strong);
  }
}

/* panel: full-bleed dark page; card: the box of a dialog; field: an input / dropdown row */
.kour-panel {
  background: var(--kour-bg);
  color: var(--kour-text);
}
.kour-card {
  background: var(--kour-card);
  border-radius: var(--kour-radius);
}
.kour-field {
  background: var(--kour-field);
  border-radius: var(--kour-radius);
  min-height: var(--kour-field-height);
}

/* button: flat tinted frame, white bold label; hover 1.02, pressed white with black label */
.kour-btn {
  --kour-btn-color: var(--kour-grey);
  --kour-btn-glow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
  border: 0;
  border-radius: var(--kour-radius);
  padding: 0.25em 0.9em;
  background: var(--kour-btn-glow), var(--kour-btn-color);
  color: var(--kour-text);
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  text-shadow: var(--kour-text-shadow);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--kour-press) ease-out;
}
.kour-btn:hover:not(:disabled) {
  transform: scale(var(--kour-hover-scale));
}
.kour-btn:active:not(:disabled) {
  transform: scale(var(--kour-press-scale));
  background: #ffffff;
  color: var(--kour-text-pressed);
  filter: none;
}
.kour-btn:disabled {
  filter: brightness(0.78);
  opacity: 0.5;
  cursor: default;
}
.kour-btn:focus-visible {
  outline: 2px solid var(--kour-yellow);
  outline-offset: 2px;
}
.kour-btn--blue {
  --kour-btn-color: var(--kour-blue);
}
.kour-btn--buy {
  --kour-btn-color: var(--kour-blue-deep);
  --kour-btn-glow: linear-gradient(to right, transparent, var(--kour-blue-deep-2));
}
.kour-btn--green {
  --kour-btn-color: var(--kour-green);
  --kour-btn-glow: linear-gradient(to bottom, transparent, var(--kour-green-2));
}
.kour-btn--red {
  --kour-btn-color: var(--kour-red);
  --kour-btn-glow: linear-gradient(to bottom, transparent, var(--kour-red-2));
}
.kour-btn--grey {
  --kour-btn-color: var(--kour-grey);
}
.kour-btn--light {
  --kour-btn-color: var(--kour-grey-light);
  --kour-btn-glow: linear-gradient(to right, transparent, var(--kour-grey-light-2));
}
.kour-btn--orange {
  --kour-btn-color: var(--kour-orange);
  --kour-btn-glow: linear-gradient(to right, transparent, var(--kour-orange-2));
}

/* close button: the red "X" in the top left corner of a panel */
.kour-close {
  --kour-btn-color: var(--kour-red-close);
  width: var(--kour-close-width);
  height: var(--kour-close-height);
  padding: 0;
  font-size: 24px;
  font-weight: var(--kour-weight-bold);
}

/* tab row: dark bar, the open tab lighter, the label white in every state but pressed */
.kour-tabs {
  display: flex;
  gap: var(--kour-gap);
  padding: 3px 4px;
  background: var(--kour-surface-2);
  border-radius: var(--kour-radius);
}
.kour-tab {
  flex: 1;
  margin: 0;
  border: 0;
  border-radius: var(--kour-radius);
  padding: 0.2em 0.8em;
  background: rgb(29 29 29 / 0.063);
  color: var(--kour-text);
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  text-shadow: var(--kour-text-shadow);
  cursor: pointer;
  transition:
    background-color 0.06s linear,
    color 0.06s linear;
}
.kour-tab:hover {
  background: rgb(151 151 151 / 0.184);
  color: #989898;
}
.kour-tab:active {
  background: rgb(255 255 0 / 0.176);
  color: var(--kour-yellow);
}
.kour-tab.is-active,
.kour-tab[aria-selected='true'] {
  background: rgb(151 151 151 / 0.184);
  color: var(--kour-text);
  cursor: default;
}

/* Kour Points: the gold number next to the coin */
.kour-kp {
  color: var(--kour-kp);
  font-weight: var(--kour-weight);
}
.kour-kp-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  object-fit: contain;
}

/* name badge ("<sprite=n>" of the TMP sprite asset, ui/unity/tmp-sprites.ts): as tall as the
   font's ascent line (1.05 em), glyph 17.7 x 16.7 with bearing -0.83 and advance 17.63 */
.kour-badge {
  display: inline-block;
  width: 1.113em;
  height: 1.05em;
  margin: 0 0.048em 0 -0.052em;
  vertical-align: -0.17em;
  object-fit: contain;
}
/* badges in a row (up to three in front of a name): each covers 38 % of the one before */
.kour-badges > .kour-badge + .kour-badge {
  margin-left: -0.473em;
}
/* the clan's badge inside its tag: "[TAG<badge>]" */
.kour-badge--tag {
  margin: 0 -0.07em 0 0.02em;
}

/* error notification (NotificationContainer) */
.kour-toast {
  border-radius: var(--kour-radius);
  background: var(--kour-toast);
  box-shadow: 0 0 0 var(--kour-outline) var(--kour-line);
  color: var(--kour-text);
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  text-shadow: var(--kour-text-shadow);
}

/* the selection frame of a DOM entry (cards, chips, tiles): the same look as the uGUI frame
   (ui/select-frame.ts markCurrent); the entry keeps its surface and text colours */
.kour-selected {
  box-shadow: inset 0 0 0 var(--kour-selected-line) var(--kour-selected-color);
}

/* the short mark on a settings row (ui/panels/settings-focus.ts, FB23UIFIX): selection frame and a
   faint surface, held for half the time, then faded out; no click is taken */
.kour-focus-flash {
  position: absolute;
  inset: 0;
  border-radius: var(--kour-radius);
  box-shadow: inset 0 0 0 var(--kour-selected-line) var(--kour-selected-color);
  background: var(--kour-focus-flash-surface);
  pointer-events: none;
  animation: kour-focus-flash var(--kour-focus-flash-ms, 1200ms) ease-out forwards;
}
@keyframes kour-focus-flash {
  0%,
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kour-focus-flash {
    animation: none;
  }
}

/* scroll areas: track and handle of the original scrollbars */
.kour-scroll {
  scrollbar-color: var(--kour-card-2) var(--kour-surface-3);
}

/* FB34: the picture of a finished class mastery challenge / a mastered class (challenge-nodes.ts);
   important: the node's own inline filter (a ColorTint fade) never undoes it */
.kour-gold-picture {
  filter: var(--kour-golden-picture) !important;
}

/*
 * The status page of the info site (FB6INFO, tools/info-page.mjs). tools/info-page.mjs puts the
 * @font-face rules of our own font files and apps/client/src/ui/kour-tokens.css (unchanged) in
 * front of this file, so every colour, radius, shadow and the font come from the Kour tokens
 * (docs/DESIGN.md); the sizes are those of a website (rem), not canvas units. Nothing is
 * selectable (the legal pages are).
 */
:root {
  color-scheme: dark;
  /* the graph's series: regions in fixed colours by token, all regions together in white */
  --series-eu: var(--kour-blue);
  --series-us: var(--kour-rarity-2);
  --series-asia: var(--kour-green-deep);
  --series-sa: var(--kour-red);
  --series-all: var(--kour-text);
  --tone-online: var(--kour-online);
  --tone-restarting: var(--kour-orange);
  --tone-offline: var(--kour-red);
  --tone-unknown: var(--kour-offline);
  --tone-update: var(--kour-blue);
  --tone-restart: var(--kour-grey-light-2);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, var(--kour-surface-bar) 0%, var(--kour-bg) 62%)
    var(--kour-bg);
  color: var(--kour-text);
  font: var(--kour-weight) 16px / var(--kour-line-height) var(--kour-font);
  text-shadow: var(--kour-text-shadow);
  user-select: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: 100%;
}
a {
  color: inherit;
  -webkit-user-drag: none;
}
a:focus-visible,
button:focus-visible,
svg:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--kour-yellow);
  outline-offset: 2px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- header */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  padding-bottom: 1.2rem;
}
.mark {
  font-weight: var(--kour-weight-bold);
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.mark span {
  color: var(--kour-kp);
}
.tag {
  display: inline-block;
  padding: 0.1rem 0.8rem;
  border-radius: var(--kour-radius);
  background: var(--kour-kp);
  color: var(--kour-bg);
  font:
    400 0.95rem / 1.6 'Fjalla One',
    var(--kour-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
}

/* ---- cards */
main {
  display: grid;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
}
.card {
  background: var(--kour-surface);
  border-radius: var(--kour-radius-lg);
  padding: 1.1rem 1.2rem 1.2rem;
  min-width: 0;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
h2 {
  font-weight: var(--kour-weight-bold);
  font-size: 1.25rem;
  line-height: 1.3;
}
h3 {
  font-size: 1.05rem;
  margin: 1.1rem 0 0.5rem;
}
.fine {
  color: var(--kour-text-3);
  font-size: 0.85rem;
}
.problem {
  border-radius: var(--kour-radius);
  background: var(--kour-toast);
  box-shadow: 0 0 0 var(--kour-outline) var(--kour-line);
  padding: 0.6rem 0.9rem;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.95rem;
}
.problem[hidden] {
  display: none;
}

/* ---- the headline */
.summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.9rem;
}
.summary .dot {
  grid-row: span 3;
  width: 1.05rem;
  height: 1.05rem;
}
.summary h1 {
  font-weight: var(--kour-weight-bold);
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  line-height: 1.25;
}
.summary p {
  color: var(--kour-text-2);
}
.dot {
  display: inline-block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--tone-unknown);
}
[data-tone='online'] .dot,
[data-tone='online'] > .dot {
  background: var(--tone-online);
}
[data-tone='restarting'] .dot {
  background: var(--tone-restarting);
}
[data-tone='offline'] .dot {
  background: var(--tone-offline);
}
[data-tone='update'] .dot {
  background: var(--tone-update);
}
[data-tone='restart'] .dot {
  background: var(--tone-restart);
}

/* ---- region cards */
.regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 0.9rem;
}
.region__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.region__name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.pill {
  flex: none;
  padding: 0.05rem 0.7rem;
  border-radius: var(--kour-radius-pill);
  background: var(--kour-card);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.pill::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  vertical-align: 0.05rem;
  background: var(--tone-unknown);
}
[data-tone='online'] .pill::before {
  background: var(--tone-online);
}
[data-tone='restarting'] .pill::before {
  background: var(--tone-restarting);
}
[data-tone='offline'] .pill::before {
  background: var(--tone-offline);
}
.region__now {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.7rem 0 0.8rem;
}
.big {
  font-weight: var(--kour-weight-bold);
  font-size: 2.6rem;
  line-height: 1;
}
.region__unit {
  color: var(--kour-text-2);
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.9rem;
  margin: 0;
}
.fact {
  min-width: 0;
}
.fact dt {
  color: var(--kour-text-3);
  font-size: 0.8rem;
}
.fact dd {
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.fact__sub {
  display: block;
  color: var(--kour-text-3);
  font-size: 0.8rem;
}

/* ---- series keys (legend, tooltip, region names): a short line in the series colour */
.key {
  display: inline-block;
  flex: none;
  width: 0.95rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background: var(--series-all);
}
.key--eu {
  background: var(--series-eu);
}
.key--us {
  background: var(--series-us);
}
.key--asia {
  background: var(--series-asia);
}
.key--sa {
  background: var(--series-sa);
}

/* ---- players: peaks, tabs, graph, legend, table */
.peaks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.peak {
  display: flex;
  flex-direction: column;
  background: var(--kour-surface-3);
  border-radius: var(--kour-radius);
  padding: 0.55rem 0.75rem;
  min-width: 0;
}
.peak__value {
  font-weight: var(--kour-weight-bold);
  font-size: 1.5rem;
  line-height: 1.2;
}
.peak__label {
  color: var(--kour-text-2);
  font-size: 0.85rem;
}
.peak__note {
  color: var(--kour-text-3);
  font-size: 0.78rem;
}
.kour-tabs {
  min-width: min(100%, 19rem);
}
.kour-tab {
  font-size: 0.92rem;
  padding: 0.3em 0.7em;
}
.chart {
  position: relative;
  width: 100%;
  min-height: 190px;
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}
.chart .grid {
  stroke: var(--kour-line);
  stroke-width: 1;
}
.chart .axis {
  fill: var(--kour-text-3);
  font-size: 11px;
  text-shadow: none;
}
.chart .line {
  fill: none;
  stroke: var(--series-all);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .line--eu {
  stroke: var(--series-eu);
}
.chart .line--us {
  stroke: var(--series-us);
}
.chart .line--asia {
  stroke: var(--series-asia);
}
.chart .line--sa {
  stroke: var(--series-sa);
}
.chart .area {
  fill: var(--series-all);
  fill-opacity: 0.08;
  stroke: none;
}
.chart .cross {
  stroke: var(--kour-text-3);
  stroke-width: 1;
}
.chart .dot {
  fill: var(--series-all);
  stroke: var(--kour-surface);
  stroke-width: 2;
}
.chart .dot--eu {
  fill: var(--series-eu);
}
.chart .dot--us {
  fill: var(--series-us);
}
.chart .dot--asia {
  fill: var(--series-asia);
}
.chart .dot--sa {
  fill: var(--series-sa);
}
.tip {
  position: absolute;
  top: 0.4rem;
  z-index: 2;
  min-width: 10rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--kour-radius);
  background: var(--kour-card);
  box-shadow: 0 0 0 var(--kour-outline) var(--kour-line);
  font-size: 0.85rem;
  pointer-events: none;
  white-space: nowrap;
}
.tip[hidden] {
  display: none;
}
.tip__time {
  color: var(--kour-text-2);
  margin-bottom: 0.2rem;
}
.tip__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.tip__row span:last-child {
  color: var(--kour-text-2);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.legend__now {
  color: var(--kour-text-3);
}
details {
  margin-top: 0.8rem;
}
summary {
  cursor: pointer;
  color: var(--kour-text-2);
  font-size: 0.9rem;
}
.table-wrap {
  max-height: 18rem;
  overflow: auto;
  margin-top: 0.5rem;
  scrollbar-color: var(--kour-card-2) var(--kour-surface-3);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
th,
td {
  text-align: right;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--kour-line);
  white-space: nowrap;
}
th:first-child,
td:first-child {
  text-align: left;
}
th {
  color: var(--kour-text-2);
  position: sticky;
  top: 0;
  background: var(--kour-surface);
}

/* ---- updates and downtimes, stats */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.9rem;
  align-items: start;
}
.events,
.leaders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.more {
  width: 100%;
  min-height: 2.5rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.more[hidden] {
  display: none;
}
.event,
.leader,
.empty {
  background: var(--kour-surface-3);
  border-radius: var(--kour-radius);
  padding: 0.5rem 0.75rem;
}
.empty {
  color: var(--kour-text-2);
}
.event__head {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.event__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.event__region,
.event__when {
  color: var(--kour-text-2);
  font-size: 0.85rem;
}
.event__detail {
  color: var(--kour-text-3);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--kour-surface-3);
  border-radius: var(--kour-radius);
  padding: 0.65rem 0.8rem;
  min-width: 0;
}
.tile__value {
  font-weight: var(--kour-weight-bold);
  font-size: 1.55rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tile__label {
  color: var(--kour-text-2);
  font-size: 0.88rem;
}
.tile__note {
  color: var(--kour-text-3);
  font-size: 0.75rem;
}
.leader {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  grid-template-areas: 'rank name level' 'rank class kills';
  column-gap: 0.6rem;
  align-items: center;
}
.leader__rank {
  grid-area: rank;
  color: var(--kour-text-3);
}
.leader__name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader__class {
  grid-area: class;
  color: var(--kour-text-2);
  font-size: 0.85rem;
}
.leader__level {
  grid-area: level;
  color: var(--kour-level);
  text-align: right;
}
.leader__kills {
  grid-area: kills;
  color: var(--kour-text-3);
  font-size: 0.8rem;
  text-align: right;
}

/* ---- footer */
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.2rem;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  color: var(--kour-text-3);
  font-size: 0.88rem;
}
footer a {
  color: var(--kour-text-3);
}
footer a:hover {
  color: var(--kour-text);
}
footer .fine {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
}
noscript p {
  margin: 0 auto;
  max-width: 68rem;
  padding: 1rem 16px;
}

@media (max-width: 30rem) {
  .card {
    padding: 0.95rem 0.95rem 1rem;
  }
  .peaks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .peak {
    padding: 0.45rem 0.55rem;
  }
  .peak__value {
    font-size: 1.25rem;
  }
  .big {
    font-size: 2.2rem;
  }
  .tile__value {
    font-size: 1.3rem;
  }
  .kour-tabs {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}