/* Isekai Architect — client styles. The game draws on a fixed 1920×1080 stage scaled to the window.
   ONE look everywhere («премиум», owner-approved 27.09): dark neutral base, ivory + brass, paper for cards and
   rules; Cormorant SC for titles, Fira Sans for text, Fira Sans Condensed for figures (bundled, below).
   Separation by air, soft fills and type — few frames. Shared components: .btn (+ .seg), .modal, .tip,
   .toast, .panel, .crest; every colour comes from the tokens on :root (families.ts adds the cell families and seats). */
:root {
  /* «Твой стол» (owner 22.10, the table as a platform): the wood of the rim, its brass, the leather of the books, the wax and the flame */
  --tb-wood-hi-rgb: 122, 78, 44; --tb-wood-rgb: 74, 44, 24; --tb-wood-lo-rgb: 40, 23, 12; --tb-brass-hi: rgb(246, 222, 160); --tb-brass: rgb(185, 138, 64); --tb-brass-lo: rgb(98, 68, 30);
  --tb-leather-rgb: 92, 30, 28; --tb-leather-lo-rgb: 46, 14, 13; --tb-cloth-rgb: 34, 52, 82; --tb-wax: rgb(240, 232, 214); --tb-flame: rgb(255, 196, 96);
  /* ---- theme tokens (docs/design/themes/TOKENS.md). This block IS theme «base»; public/themes.css overrides it per [data-theme].
     A colour is set by its triplet --c-x-rgb ("r, g, b"); --c-x = rgb(var(--c-x-rgb)) follows, and so does every rgba(var(--c-x-rgb), a). */
  /* colours: the contract */
  --c-bg-rgb: 15, 13, 12; --c-bg: rgb(var(--c-bg-rgb)); --c-bg-2-rgb: 14, 12, 10; --c-bg-2: rgb(var(--c-bg-2-rgb));
  --c-surface-rgb: 29, 25, 21; --c-surface: rgb(var(--c-surface-rgb)); --c-surface-2-rgb: 43, 37, 31; --c-surface-2: rgb(var(--c-surface-2-rgb)); --c-surface-3-rgb: 26, 22, 18; --c-surface-3: rgb(var(--c-surface-3-rgb));
  --c-ink-rgb: 239, 230, 211; --c-ink: rgb(var(--c-ink-rgb)); --c-ink-2-rgb: 169, 157, 137; --c-ink-2: rgb(var(--c-ink-2-rgb)); --c-ink-dim-rgb: 110, 101, 87; --c-ink-dim: rgb(var(--c-ink-dim-rgb));
  --c-accent-rgb: 201, 162, 102; --c-accent: rgb(var(--c-accent-rgb)); --c-accent-2-rgb: 231, 201, 143; --c-accent-2: rgb(var(--c-accent-2-rgb)); --c-gold-rgb: 242, 199, 90; --c-gold: rgb(var(--c-gold-rgb));
  --c-danger-rgb: 208, 96, 76; --c-danger: rgb(var(--c-danger-rgb)); --c-ok-rgb: 147, 197, 140; --c-ok: rgb(var(--c-ok-rgb)); --c-warn-rgb: 231, 192, 112; --c-warn: rgb(var(--c-warn-rgb));
  --c-shadow-rgb: 0, 0, 0; --c-shadow: rgb(var(--c-shadow-rgb)); --c-felt-rgb: 43, 58, 51; --c-felt: rgb(var(--c-felt-rgb)); --c-felt-2-rgb: 29, 40, 35; --c-felt-2: rgb(var(--c-felt-2-rgb));
  --c-line: rgba(var(--c-ink-rgb), .16); --c-line-strong: rgba(var(--c-ink-rgb), .28); /* frames are neutral: brass is only «do it» and «chosen» (owner 07.10) */ --c-overlay: rgba(var(--t-bg2-10-rgb), .7);
  /* colours: added roles */
  --c-accent-lo-rgb: 151, 122, 78; --c-accent-lo: rgb(var(--c-accent-lo-rgb)); --c-on-accent-rgb: 26, 19, 10; --c-on-accent: rgb(var(--c-on-accent-rgb)); --c-on-brass: var(--c-on-accent); /* the menu brass key «Играть»: a theme whose on-accent fails on the brass sets its own (themes-build) */ --c-accent-edge-rgb: 90, 68, 36; --c-accent-edge: rgb(var(--c-accent-edge-rgb));
  --c-danger-2-rgb: 240, 164, 148; --c-danger-2: rgb(var(--c-danger-2-rgb)); --c-info-rgb: 140, 188, 255; --c-info: rgb(var(--c-info-rgb)); --c-magic-rgb: 157, 140, 255; --c-magic: rgb(var(--c-magic-rgb)); --c-hi-rgb: 255, 255, 255; --c-hi: rgb(var(--c-hi-rgb));
  --c-felt-3-rgb: 20, 27, 24; --c-felt-3: rgb(var(--c-felt-3-rgb)); --c-paper-rgb: 233, 220, 192; --c-paper: rgb(var(--c-paper-rgb)); --c-paper-ink-rgb: 42, 31, 18; --c-paper-ink: rgb(var(--c-paper-ink-rgb));
  --c-danger-glow: rgba(var(--c-danger-rgb), .55);
  /* seats (JS reads the triplets: midscreen seatColor, richtext tooltips) and the veils over the backdrop art */
  --seat-0-rgb: 246, 168, 74; --seat-1-rgb: 179, 156, 242; --seat-2-rgb: 184, 216, 92; --seat-3-rgb: 125, 196, 255; --seat-4-rgb: 255, 127, 184; /* seat 0 is «ты» (seats count from me): amber — a colour like every seat, never the ink grey nor the felt's teal (owner 08.10) */
  --seat-tip-0-rgb: 246, 168, 74; --seat-tip-1-rgb: 179, 156, 242; --seat-tip-2-rgb: 184, 216, 92; --seat-tip-3-rgb: 125, 196, 255; --seat-tip-4-rgb: 255, 127, 184; /* one colour per seat everywhere (owner 07.10) */
  --seat-lit-0-rgb: 246, 168, 74; --seat-lit-1-rgb: 179, 156, 242; --seat-lit-2-rgb: 184, 216, 92; --seat-lit-3-rgb: 125, 196, 255; --seat-lit-4-rgb: 255, 127, 184; /* a seat colour drawn on a socket (its enamel is dark in every theme) */
  --veil-fight: linear-gradient(180deg,rgba(var(--t-bg2-2-rgb), .86),rgba(var(--t-bg2-2-rgb), .72) 40%,rgba(var(--t-bg2-2-rgb), .9));
  --veil-online: linear-gradient(rgba(var(--t-bg2-2-rgb), .84),rgba(var(--t-bg2-2-rgb), .94)); --veil-room: linear-gradient(rgba(var(--t-bg2-2-rgb), .8),rgba(var(--t-bg2-2-rgb), .92));
  /* type */
  --font-display: "Cormorant SC", "Cormorant", serif; --font-body: "Fira Sans", system-ui, sans-serif; --font-num: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800; --ls-caps: .16em; --fv-num: normal;
  /* shape (a radius off the scale is calc(scale × k), so a sharp theme zeroes them all; ≥ 40px radii are geometry and stay) */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --r-round: 50%; --bw: 1px; --bw-strong: 2px;
  --clip-chamfer: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
  /* depth / texture */
  --shadow-1: 0 3px 8px rgba(var(--c-shadow-rgb), .7);
  --shadow-2: 0 4px 10px rgba(var(--c-shadow-rgb), .6);
  --shadow-glow: 0 0 18px rgba(var(--c-accent-2-rgb), .35);
  --shadow-well: inset 0 2px 4px rgba(var(--c-shadow-rgb), .85);
  --shadow-well-2: inset 0 1px 3px rgba(var(--c-shadow-rgb), .8);
  --shadow-well-3: inset 0 2px 6px rgba(var(--c-shadow-rgb), .8);
  --ring-line: inset 0 0 0 var(--bw) var(--c-line);
  --shadow-edge: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .08), var(--ring-line);
  --tex-plate: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-3));
  --tex-panel: linear-gradient(180deg, rgba(var(--c-surface-rgb), .97), rgba(var(--t-bg-7-rgb), .97));
  --tex-felt: radial-gradient(ellipse at 50% 38%, var(--c-felt) 0%, var(--c-felt-2) 55%, var(--c-felt-3) 100%);
  /* tones: every other colour of the look, named by its nearest role (--t-<role>-<n>), same triplet + colour form;
     public/themes.css derives them from the roles for every theme but base */
  --t-danger-1-rgb: 255, 129, 115; --t-danger-1: rgb(var(--t-danger-1-rgb)); --t-danger-2-rgb: 226, 115, 95; --t-danger-2: rgb(var(--t-danger-2-rgb)); --t-danger-3-rgb: 224, 87, 78; --t-danger-3: rgb(var(--t-danger-3-rgb)); --t-danger-4-rgb: 163, 35, 26; --t-danger-4: rgb(var(--t-danger-4-rgb)); --t-danger-5-rgb: 255, 107, 85; --t-danger-5: rgb(var(--t-danger-5-rgb)); --t-danger-6-rgb: 255, 106, 82; --t-danger-6: rgb(var(--t-danger-6-rgb)); --t-danger-7-rgb: 255, 122, 46; --t-danger-7: rgb(var(--t-danger-7-rgb)); --t-danger-8-rgb: 255, 90, 60; --t-danger-9-rgb: 255, 130, 110; --t-danger-10-rgb: 176, 112, 92; --t-danger-10: rgb(var(--t-danger-10-rgb));
  --t-ink-1-rgb: 243, 231, 207; --t-ink-1: rgb(var(--t-ink-1-rgb)); --t-ink-2-rgb: 255, 235, 200; --t-ink-3-rgb: 255, 246, 227; --t-ink-3: rgb(var(--t-ink-3-rgb)); --t-ink-4-rgb: 243, 230, 200; --t-ink-4: rgb(var(--t-ink-4-rgb)); --t-ink-5-rgb: 255, 236, 200; --t-ink-6-rgb: 255, 214, 207; --t-ink-6: rgb(var(--t-ink-6-rgb)); --t-ink-7-rgb: 255, 245, 220; --t-ink-8-rgb: 255, 246, 224; --t-ink-8: rgb(var(--t-ink-8-rgb)); --t-ink-9-rgb: 255, 240, 204; --t-ink-9: rgb(var(--t-ink-9-rgb)); --t-ink-10-rgb: 242, 232, 210; --t-ink-10: rgb(var(--t-ink-10-rgb)); --t-ink-11-rgb: 244, 236, 217; --t-ink-11: rgb(var(--t-ink-11-rgb)); --t-ink-12-rgb: 255, 244, 214; --t-ink-12: rgb(var(--t-ink-12-rgb)); --t-ink-13-rgb: 243, 234, 216; --t-ink-13: rgb(var(--t-ink-13-rgb)); --t-ink-14-rgb: 216, 208, 236; --t-ink-14: rgb(var(--t-ink-14-rgb)); --t-ink-15-rgb: 243, 233, 210; --t-ink-15: rgb(var(--t-ink-15-rgb)); --t-ink-16-rgb: 214, 205, 234; --t-ink-16: rgb(var(--t-ink-16-rgb)); --t-ink-17-rgb: 255, 240, 210; --t-ink-18-rgb: 226, 207, 245; --t-ink-18: rgb(var(--t-ink-18-rgb)); --t-ink-19-rgb: 201, 201, 214; --t-ink-19: rgb(var(--t-ink-19-rgb)); --t-ink-20-rgb: 255, 220, 210;
  --t-bg2-1-rgb: 14, 11, 9; --t-bg2-2-rgb: 12, 10, 9; --t-bg2-2: rgb(var(--t-bg2-2-rgb)); --t-bg2-3-rgb: 8, 6, 5; --t-bg2-4-rgb: 13, 10, 8; --t-bg2-4: rgb(var(--t-bg2-4-rgb)); --t-bg2-5-rgb: 10, 8, 6; --t-bg2-6-rgb: 12, 9, 7; --t-bg2-6: rgb(var(--t-bg2-6-rgb)); --t-bg2-7-rgb: 13, 10, 7; --t-bg2-7: rgb(var(--t-bg2-7-rgb)); --t-bg2-8-rgb: 16, 13, 10; --t-bg2-9-rgb: 10, 8, 7; --t-bg2-9: rgb(var(--t-bg2-9-rgb)); --t-bg2-10-rgb: 8, 7, 6; --t-bg2-11-rgb: 10, 9, 8; --t-bg2-11: rgb(var(--t-bg2-11-rgb)); --t-bg2-12-rgb: 12, 9, 6; --t-bg2-13-rgb: 6, 5, 4; --t-bg2-14-rgb: 12, 10, 8; --t-bg2-15-rgb: 16, 12, 9; --t-bg2-16-rgb: 18, 13, 9; --t-bg2-17-rgb: 11, 8, 6; --t-bg2-17: rgb(var(--t-bg2-17-rgb)); --t-bg2-18-rgb: 17, 13, 10; --t-bg2-18: rgb(var(--t-bg2-18-rgb)); --t-bg2-19-rgb: 20, 8, 6;
  --t-ok-1-rgb: 127, 200, 106; --t-ok-1: rgb(var(--t-ok-1-rgb)); --t-ok-2-rgb: 198, 240, 184; --t-ok-2: rgb(var(--t-ok-2-rgb)); --t-ok-3-rgb: 159, 208, 140; --t-ok-3: rgb(var(--t-ok-3-rgb)); --t-ok-4-rgb: 159, 224, 138; --t-ok-4: rgb(var(--t-ok-4-rgb)); --t-ok-5-rgb: 143, 224, 122; --t-ok-5: rgb(var(--t-ok-5-rgb));
  --t-paper-1-rgb: 205, 191, 174; --t-paper-1: rgb(var(--t-paper-1-rgb)); --t-paper-2-rgb: 239, 227, 200; --t-paper-2: rgb(var(--t-paper-2-rgb)); --t-paper-3-rgb: 217, 204, 178; --t-paper-3: rgb(var(--t-paper-3-rgb)); --t-paper-4-rgb: 216, 201, 174; --t-paper-4: rgb(var(--t-paper-4-rgb)); --t-paper-5-rgb: 217, 207, 191; --t-paper-5: rgb(var(--t-paper-5-rgb)); --t-paper-6-rgb: 203, 191, 168; --t-paper-6: rgb(var(--t-paper-6-rgb)); --t-paper-7-rgb: 201, 191, 174; --t-paper-7: rgb(var(--t-paper-7-rgb)); --t-paper-8-rgb: 223, 207, 174; --t-paper-8: rgb(var(--t-paper-8-rgb)); --t-paper-9-rgb: 236, 217, 174; --t-paper-9: rgb(var(--t-paper-9-rgb)); --t-paper-10-rgb: 225, 209, 173; --t-paper-10: rgb(var(--t-paper-10-rgb)); --t-paper-11-rgb: 205, 191, 166; --t-paper-11: rgb(var(--t-paper-11-rgb)); --t-paper-12-rgb: 232, 217, 181; --t-paper-12: rgb(var(--t-paper-12-rgb)); --t-paper-13-rgb: 230, 220, 196; --t-paper-13: rgb(var(--t-paper-13-rgb)); --t-paper-14-rgb: 255, 241, 194; --t-paper-14: rgb(var(--t-paper-14-rgb)); --t-paper-15-rgb: 255, 236, 190;
  --t-danger2-1-rgb: 255, 179, 165; --t-danger2-1: rgb(var(--t-danger2-1-rgb)); --t-danger2-2-rgb: 255, 143, 122; --t-danger2-2: rgb(var(--t-danger2-2-rgb)); --t-danger2-3-rgb: 255, 194, 181; --t-danger2-3: rgb(var(--t-danger2-3-rgb)); --t-danger2-4-rgb: 229, 143, 192; --t-danger2-5-rgb: 255, 180, 168; --t-danger2-5: rgb(var(--t-danger2-5-rgb)); --t-danger2-6-rgb: 255, 157, 143; --t-danger2-6: rgb(var(--t-danger2-6-rgb)); --t-danger2-7-rgb: 255, 176, 160; --t-danger2-7: rgb(var(--t-danger2-7-rgb)); --t-danger2-8-rgb: 233, 184, 166; --t-danger2-8: rgb(var(--t-danger2-8-rgb));
  --t-ink2-1-rgb: 168, 145, 106; --t-ink2-1: rgb(var(--t-ink2-1-rgb)); --t-ink2-2-rgb: 142, 129, 114; --t-ink2-2: rgb(var(--t-ink2-2-rgb)); --t-ink2-3-rgb: 196, 183, 159; --t-ink2-3: rgb(var(--t-ink2-3-rgb)); --t-ink2-4-rgb: 185, 169, 141; --t-ink2-4: rgb(var(--t-ink2-4-rgb)); --t-ink2-5-rgb: 143, 128, 104; --t-ink2-5: rgb(var(--t-ink2-5-rgb)); --t-ink2-6-rgb: 185, 171, 152; --t-ink2-6: rgb(var(--t-ink2-6-rgb)); --t-ink2-7-rgb: 185, 173, 151; --t-ink2-7: rgb(var(--t-ink2-7-rgb)); --t-ink2-8-rgb: 143, 134, 118; --t-ink2-8: rgb(var(--t-ink2-8-rgb)); --t-ink2-9-rgb: 168, 152, 125; --t-ink2-9: rgb(var(--t-ink2-9-rgb)); --t-ink2-10-rgb: 157, 143, 120; --t-ink2-10: rgb(var(--t-ink2-10-rgb));
  --t-hi-1-rgb: 255, 250, 235; --t-hi-2-rgb: 223, 231, 240; --t-hi-2: rgb(var(--t-hi-2-rgb)); --t-hi-3-rgb: 230, 238, 247; --t-hi-3: rgb(var(--t-hi-3-rgb)); --t-hi-4-rgb: 239, 234, 248; --t-hi-4: rgb(var(--t-hi-4-rgb)); --t-hi-5-rgb: 207, 231, 255; --t-hi-5: rgb(var(--t-hi-5-rgb)); --t-hi-6-rgb: 232, 242, 255; --t-hi-6: rgb(var(--t-hi-6-rgb));
  --t-accentink-1-rgb: 21, 16, 11; --t-accentink-1: rgb(var(--t-accentink-1-rgb)); --t-accentink-2-rgb: 31, 21, 14; --t-accentink-2: rgb(var(--t-accentink-2-rgb)); --t-accentink-3-rgb: 30, 21, 11; --t-accentink-3: rgb(var(--t-accentink-3-rgb)); --t-accentink-4-rgb: 20, 13, 5; --t-accentink-4: rgb(var(--t-accentink-4-rgb)); --t-accentink-5-rgb: 26, 17, 10; --t-accentink-5: rgb(var(--t-accentink-5-rgb)); --t-accentink-6-rgb: 27, 20, 13; --t-accentink-6: rgb(var(--t-accentink-6-rgb)); --t-accentink-7-rgb: 26, 18, 10; --t-accentink-7: rgb(var(--t-accentink-7-rgb)); --t-accentink-8-rgb: 27, 15, 6; --t-accentink-8: rgb(var(--t-accentink-8-rgb)); --t-accentink-9-rgb: 40, 10, 8;
  --t-accent2-1-rgb: 240, 213, 140; --t-accent2-1: rgb(var(--t-accent2-1-rgb)); --t-accent2-2-rgb: 241, 220, 146; --t-accent2-2: rgb(var(--t-accent2-2-rgb)); --t-accent2-3-rgb: 243, 220, 168; --t-accent2-3: rgb(var(--t-accent2-3-rgb)); --t-accent2-4-rgb: 236, 210, 157; --t-accent2-4: rgb(var(--t-accent2-4-rgb)); --t-accent2-5-rgb: 246, 223, 166; --t-accent2-5: rgb(var(--t-accent2-5-rgb)); --t-accent2-6-rgb: 210, 191, 153; --t-accent2-6: rgb(var(--t-accent2-6-rgb)); --t-accent2-7-rgb: 214, 196, 160; --t-accent2-8-rgb: 203, 185, 148; --t-accent2-8: rgb(var(--t-accent2-8-rgb)); --t-accent2-9-rgb: 217, 199, 159; --t-accent2-9: rgb(var(--t-accent2-9-rgb));
  --t-surface2-1-rgb: 58, 44, 28; --t-surface2-1: rgb(var(--t-surface2-1-rgb)); --t-surface2-2-rgb: 44, 36, 28; --t-surface2-2: rgb(var(--t-surface2-2-rgb)); --t-surface2-3-rgb: 42, 36, 30; --t-surface2-3: rgb(var(--t-surface2-3-rgb)); --t-surface2-4-rgb: 42, 34, 27; --t-surface2-4: rgb(var(--t-surface2-4-rgb)); --t-surface2-5-rgb: 58, 46, 34; --t-surface2-5: rgb(var(--t-surface2-5-rgb)); --t-surface2-6-rgb: 42, 33, 25; --t-surface2-6: rgb(var(--t-surface2-6-rgb)); --t-surface2-7-rgb: 58, 46, 28; --t-surface2-8-rgb: 42, 35, 27; --t-surface2-8: rgb(var(--t-surface2-8-rgb)); --t-surface2-9-rgb: 62, 48, 32; --t-surface2-9: rgb(var(--t-surface2-9-rgb)); --t-surface2-10-rgb: 42, 36, 28; --t-surface2-10: rgb(var(--t-surface2-10-rgb)); --t-surface2-11-rgb: 61, 46, 28; --t-surface2-11: rgb(var(--t-surface2-11-rgb)); --t-surface2-12-rgb: 58, 51, 43; --t-surface2-12: rgb(var(--t-surface2-12-rgb)); --t-surface2-13-rgb: 59, 50, 39; --t-surface2-13: rgb(var(--t-surface2-13-rgb)); --t-surface2-14-rgb: 58, 44, 26; --t-surface2-15-rgb: 46, 37, 28; --t-surface2-15: rgb(var(--t-surface2-15-rgb));
  --t-paperink-1-rgb: 35, 26, 16; --t-paperink-1: rgb(var(--t-paperink-1-rgb)); --t-paperink-2-rgb: 42, 29, 20; --t-paperink-2: rgb(var(--t-paperink-2-rgb)); --t-paperink-3-rgb: 42, 32, 24; --t-paperink-3: rgb(var(--t-paperink-3-rgb)); --t-paperink-4-rgb: 42, 29, 18; --t-paperink-4: rgb(var(--t-paperink-4-rgb)); --t-paperink-5-rgb: 60, 40, 15; --t-paperink-6-rgb: 58, 15, 12; --t-paperink-6: rgb(var(--t-paperink-6-rgb)); --t-paperink-7-rgb: 51, 15, 11; --t-paperink-7: rgb(var(--t-paperink-7-rgb)); --t-paperink-8-rgb: 45, 35, 24; --t-paperink-8: rgb(var(--t-paperink-8-rgb)); --t-paperink-9-rgb: 42, 29, 16; --t-paperink-9: rgb(var(--t-paperink-9-rgb)); --t-paperink-10-rgb: 40, 30, 10; --t-paperink-11-rgb: 62, 46, 24; --t-paperink-11: rgb(var(--t-paperink-11-rgb)); --t-paperink-12-rgb: 74, 36, 24; --t-paperink-12: rgb(var(--t-paperink-12-rgb)); --t-paperink-13-rgb: 51, 26, 18; --t-paperink-13: rgb(var(--t-paperink-13-rgb));
  --t-surface-1-rgb: 34, 29, 24; --t-surface-1: rgb(var(--t-surface-1-rgb)); --t-surface-2-rgb: 29, 25, 22; --t-surface-2: rgb(var(--t-surface-2-rgb)); --t-surface-3-rgb: 36, 29, 22; --t-surface-3: rgb(var(--t-surface-3-rgb)); --t-surface-4-rgb: 36, 29, 23; --t-surface-4: rgb(var(--t-surface-4-rgb)); --t-surface-5-rgb: 28, 24, 20; --t-surface-5: rgb(var(--t-surface-5-rgb)); --t-surface-6-rgb: 34, 27, 20; --t-surface-6: rgb(var(--t-surface-6-rgb)); --t-surface-7-rgb: 36, 26, 46; --t-surface-7: rgb(var(--t-surface-7-rgb)); --t-surface-8-rgb: 29, 24, 20; --t-surface-8: rgb(var(--t-surface-8-rgb));
  --t-surface3-1-rgb: 21, 17, 13; --t-surface3-1: rgb(var(--t-surface3-1-rgb)); --t-surface3-2-rgb: 22, 19, 15; --t-surface3-2: rgb(var(--t-surface3-2-rgb)); --t-surface3-3-rgb: 26, 20, 16; --t-surface3-3: rgb(var(--t-surface3-3-rgb)); --t-surface3-4-rgb: 22, 17, 13; --t-surface3-4: rgb(var(--t-surface3-4-rgb)); --t-surface3-5-rgb: 29, 23, 18; --t-surface3-5: rgb(var(--t-surface3-5-rgb)); --t-surface3-6-rgb: 23, 19, 15; --t-surface3-6: rgb(var(--t-surface3-6-rgb)); --t-surface3-7-rgb: 27, 23, 20; --t-surface3-7: rgb(var(--t-surface3-7-rgb)); --t-surface3-8-rgb: 23, 20, 18; --t-surface3-8: rgb(var(--t-surface3-8-rgb)); --t-surface3-9-rgb: 21, 18, 14; --t-surface3-9: rgb(var(--t-surface3-9-rgb)); --t-surface3-10-rgb: 28, 23, 18; --t-surface3-11-rgb: 26, 20, 15; --t-surface3-11: rgb(var(--t-surface3-11-rgb)); --t-surface3-12-rgb: 20, 20, 26; --t-surface3-13-rgb: 26, 21, 17; --t-surface3-13: rgb(var(--t-surface3-13-rgb));
  --t-bg-1-rgb: 15, 13, 11; --t-bg-1: rgb(var(--t-bg-1-rgb)); --t-bg-2-rgb: 18, 14, 11; --t-bg-2: rgb(var(--t-bg-2-rgb)); --t-bg-3-rgb: 18, 16, 16; --t-bg-3: rgb(var(--t-bg-3-rgb)); --t-bg-4-rgb: 18, 14, 10; --t-bg-4: rgb(var(--t-bg-4-rgb)); --t-bg-5-rgb: 20, 17, 14; --t-bg-5: rgb(var(--t-bg-5-rgb)); --t-bg-6-rgb: 8, 10, 16; --t-bg-7-rgb: 18, 15, 13; --t-bg-8-rgb: 18, 16, 14; --t-bg-8: rgb(var(--t-bg-8-rgb)); --t-bg-9-rgb: 18, 15, 12; --t-bg-9: rgb(var(--t-bg-9-rgb)); --t-bg-10-rgb: 20, 15, 11; --t-bg-11-rgb: 21, 16, 12; --t-bg-11: rgb(var(--t-bg-11-rgb)); --t-bg-12-rgb: 20, 16, 13; --t-bg-12: rgb(var(--t-bg-12-rgb)); --t-bg-13-rgb: 20, 16, 12;
  --t-info-1-rgb: 188, 214, 255; --t-info-1: rgb(var(--t-info-1-rgb)); --t-info-2-rgb: 163, 200, 242; --t-info-2: rgb(var(--t-info-2-rgb)); --t-info-3-rgb: 159, 208, 255; --t-info-3: rgb(var(--t-info-3-rgb)); --t-info-4-rgb: 159, 182, 204; --t-info-4: rgb(var(--t-info-4-rgb)); --t-info-5-rgb: 205, 195, 234; --t-info-5: rgb(var(--t-info-5-rgb)); --t-info-6-rgb: 106, 168, 240; --t-info-6: rgb(var(--t-info-6-rgb));
  --t-magic-1-rgb: 60, 120, 210; --t-magic-1: rgb(var(--t-magic-1-rgb)); --t-magic-2-rgb: 28, 80, 168; --t-magic-2: rgb(var(--t-magic-2-rgb)); --t-magic-3-rgb: 138, 124, 196; --t-magic-3: rgb(var(--t-magic-3-rgb)); --t-magic-4-rgb: 172, 120, 227; --t-magic-4: rgb(var(--t-magic-4-rgb)); --t-magic-5-rgb: 123, 108, 192; --t-magic-5: rgb(var(--t-magic-5-rgb)); --t-magic-6-rgb: 169, 139, 208; --t-magic-6: rgb(var(--t-magic-6-rgb)); --t-magic-7-rgb: 201, 167, 239; --t-magic-7: rgb(var(--t-magic-7-rgb));
  --t-accentlo-1-rgb: 140, 122, 92; --t-accentlo-1: rgb(var(--t-accentlo-1-rgb)); --t-accentlo-2-rgb: 138, 90, 0; --t-accentlo-2: rgb(var(--t-accentlo-2-rgb)); --t-accentlo-3-rgb: 138, 109, 64; --t-accentlo-3: rgb(var(--t-accentlo-3-rgb)); --t-accentlo-4-rgb: 122, 90, 42; --t-accentlo-4: rgb(var(--t-accentlo-4-rgb)); --t-accentlo-5-rgb: 46, 125, 30; --t-accentlo-5: rgb(var(--t-accentlo-5-rgb)); --t-accentlo-6-rgb: 110, 90, 58; --t-accentlo-6: rgb(var(--t-accentlo-6-rgb));
  --t-accent-1-rgb: 179, 154, 108; --t-accent-1: rgb(var(--t-accent-1-rgb)); --t-accent-2-rgb: 176, 145, 92; --t-accent-2: rgb(var(--t-accent-2-rgb)); --t-accent-3-rgb: 201, 138, 90; --t-accent-3: rgb(var(--t-accent-3-rgb)); --t-accent-4-rgb: 217, 164, 65; --t-accent-4: rgb(var(--t-accent-4-rgb)); --t-accent-5-rgb: 201, 167, 122; --t-accent-5: rgb(var(--t-accent-5-rgb)); --t-accent-6-rgb: 231, 150, 60; --t-accent-7-rgb: 220, 150, 70;
  --t-gold-1-rgb: 243, 210, 122; --t-gold-1: rgb(var(--t-gold-1-rgb)); --t-gold-2-rgb: 227, 178, 60; --t-gold-2: rgb(var(--t-gold-2-rgb)); --t-gold-3-rgb: 255, 214, 110; --t-gold-4-rgb: 255, 196, 80; --t-gold-5-rgb: 255, 190, 70;
  --t-inkdim-1-rgb: 75, 88, 102; --t-inkdim-1: rgb(var(--t-inkdim-1-rgb)); --t-inkdim-2-rgb: 107, 90, 68; --t-inkdim-2: rgb(var(--t-inkdim-2-rgb));
  --t-accentedge-1-rgb: 90, 23, 20; --t-accentedge-1: rgb(var(--t-accentedge-1-rgb)); --t-accentedge-2-rgb: 107, 78, 42; --t-accentedge-2: rgb(var(--t-accentedge-2-rgb)); --t-accentedge-3-rgb: 74, 64, 54; --t-accentedge-3: rgb(var(--t-accentedge-3-rgb)); --t-accentedge-4-rgb: 107, 83, 50; --t-accentedge-4: rgb(var(--t-accentedge-4-rgb)); --t-accentedge-5-rgb: 90, 60, 30; --t-accentedge-6-rgb: 79, 59, 31; --t-accentedge-6: rgb(var(--t-accentedge-6-rgb)); --t-accentedge-7-rgb: 74, 66, 56; --t-accentedge-7: rgb(var(--t-accentedge-7-rgb)); --t-accentedge-8-rgb: 107, 79, 36; --t-accentedge-8: rgb(var(--t-accentedge-8-rgb)); --t-accentedge-9-rgb: 90, 70, 48; --t-accentedge-9: rgb(var(--t-accentedge-9-rgb)); --t-accentedge-10-rgb: 90, 66, 40; --t-accentedge-10: rgb(var(--t-accentedge-10-rgb)); --t-accentedge-11-rgb: 110, 58, 44; --t-accentedge-11: rgb(var(--t-accentedge-11-rgb));
  --t-felt-1-rgb: 36, 90, 85; --t-felt-1: rgb(var(--t-felt-1-rgb)); --t-felt-2-rgb: 20, 58, 55; --t-felt-2: rgb(var(--t-felt-2-rgb)); --t-felt-3-rgb: 61, 53, 44; --t-felt-3: rgb(var(--t-felt-3-rgb));
  --t-felt2-1-rgb: 11, 35, 33; --t-felt2-1: rgb(var(--t-felt2-1-rgb)); --t-felt2-2-rgb: 26, 35, 31; --t-felt2-2: rgb(var(--t-felt2-2-rgb)); --t-felt2-3-rgb: 22, 41, 15; --t-felt2-3: rgb(var(--t-felt2-3-rgb)); --t-felt2-4-rgb: 27, 39, 64; --t-felt2-4: rgb(var(--t-felt2-4-rgb));
  --t-warn-1-rgb: 226, 184, 102; --t-warn-1: rgb(var(--t-warn-1-rgb)); --t-warn-2-rgb: 240, 196, 106; --t-warn-2: rgb(var(--t-warn-2-rgb)); --t-warn-3-rgb: 255, 205, 130; --t-warn-4-rgb: 217, 180, 90; --t-warn-4: rgb(var(--t-warn-4-rgb)); --t-warn-5-rgb: 255, 190, 100; --t-warn-6-rgb: 255, 170, 90; --t-warn-7-rgb: 240, 186, 105;
  --t-felt3-1-rgb: 18, 24, 21; --t-felt3-1: rgb(var(--t-felt3-1-rgb)); --t-felt3-2-rgb: 8, 20, 18;
  /* tones only the client code uses (sparks, glossary and lab tints, the chips stripe) */
  --t-gold-6-rgb: 240, 176, 96; --t-gold-6: rgb(var(--t-gold-6-rgb)); --t-gold-7-rgb: 240, 200, 110; --t-gold-7: rgb(var(--t-gold-7-rgb)); --t-magic-8-rgb: 179, 156, 242; --t-magic-8: rgb(var(--t-magic-8-rgb)); --t-ink-21-rgb: 244, 236, 220; --t-ink-21: rgb(var(--t-ink-21-rgb)); --t-warn-8-rgb: 231, 176, 113; --t-warn-8: rgb(var(--t-warn-8-rgb)); --t-info-7-rgb: 110, 150, 220; --t-info-7: rgb(var(--t-info-7-rgb));
  /* card twins: card faces read these, not the page's tones (a card keeps its polarity in a light theme) */
  --t-c-accent-1-rgb: 179, 154, 108; --t-c-accent-1: rgb(var(--t-c-accent-1-rgb)); --t-c-bg-1-rgb: 15, 13, 11; --t-c-bg-1: rgb(var(--t-c-bg-1-rgb)); --t-c-bg2-6-rgb: 12, 9, 7; --t-c-bg2-6: rgb(var(--t-c-bg2-6-rgb)); --t-c-danger-1-rgb: 255, 129, 115; --t-c-danger-1: rgb(var(--t-c-danger-1-rgb)); --t-c-danger-4-rgb: 163, 35, 26; --t-c-danger-4: rgb(var(--t-c-danger-4-rgb)); --t-c-hi-rgb: 255, 255, 255; --t-c-hi: rgb(var(--t-c-hi-rgb)); --t-c-hi-2-rgb: 223, 231, 240; --t-c-hi-2: rgb(var(--t-c-hi-2-rgb)); --t-c-ink-1-rgb: 243, 231, 207; --t-c-ink-1: rgb(var(--t-c-ink-1-rgb)); --t-c-ink-2-rgb: 169, 157, 137; --t-c-ink-2: rgb(var(--t-c-ink-2-rgb)); --t-c-ink-3-rgb: 255, 246, 227; --t-c-ink-3: rgb(var(--t-c-ink-3-rgb)); --t-c-paper-2-rgb: 239, 227, 200; --t-c-paper-2: rgb(var(--t-c-paper-2-rgb)); --t-c-paper-3-rgb: 217, 204, 178; --t-c-paper-3: rgb(var(--t-c-paper-3-rgb)); --t-c-surface-2-rgb: 29, 25, 22; --t-c-surface-2: rgb(var(--t-c-surface-2-rgb)); --t-c-surface2-1-rgb: 58, 44, 28; --t-c-surface2-1: rgb(var(--t-c-surface2-1-rgb));
  --t-c-accent2-1-rgb: 240, 213, 140; --t-c-accent2-1: rgb(var(--t-c-accent2-1-rgb)); --t-c-accent2-2-rgb: 241, 220, 146; --t-c-accent2-2: rgb(var(--t-c-accent2-2-rgb)); --t-c-accentedge-1-rgb: 90, 23, 20; --t-c-accentedge-1: rgb(var(--t-c-accentedge-1-rgb)); --t-c-bg-2-rgb: 14, 12, 10; --t-c-bg-2: rgb(var(--t-c-bg-2-rgb)); --t-c-bg2-2-rgb: 12, 10, 9; --t-c-bg2-2: rgb(var(--t-c-bg2-2-rgb)); --t-c-bg2-5-rgb: 10, 8, 6; --t-c-danger-3-rgb: 224, 87, 78; --t-c-danger-3: rgb(var(--t-c-danger-3-rgb)); --t-c-danger-6-rgb: 255, 106, 82; --t-c-danger-6: rgb(var(--t-c-danger-6-rgb)); --t-c-danger2-1-rgb: 255, 179, 165; --t-c-danger2-1: rgb(var(--t-c-danger2-1-rgb)); --t-c-ink-rgb: 239, 230, 211; --t-c-ink: rgb(var(--t-c-ink-rgb)); --t-c-ink-6-rgb: 255, 214, 207; --t-c-ink-6: rgb(var(--t-c-ink-6-rgb)); --t-c-ink-dim-rgb: 110, 101, 87; --t-c-ink-dim: rgb(var(--t-c-ink-dim-rgb)); --t-c-magic-1-rgb: 60, 120, 210; --t-c-magic-1: rgb(var(--t-c-magic-1-rgb)); --t-c-ok-1-rgb: 127, 200, 106; --t-c-ok-1: rgb(var(--t-c-ok-1-rgb)); --t-c-surface3-3-rgb: 26, 20, 16; --t-c-surface3-3: rgb(var(--t-c-surface3-3-rgb));
  --t-g-accent-7-rgb: 220, 150, 70; --t-g-gold-3-rgb: 255, 214, 110; --t-g-gold-4-rgb: 255, 196, 80; --t-g-gold-5-rgb: 255, 190, 70; --t-g-warn-3-rgb: 255, 205, 130; --t-g-warn-6-rgb: 255, 170, 90; --t-g-warn-7-rgb: 240, 186, 105;
  --c-accent-tx-rgb: var(--c-accent-rgb); --c-accent-tx: rgb(var(--c-accent-tx-rgb)); --c-accent-2-tx-rgb: var(--c-accent-2-rgb); --c-accent-2-tx: rgb(var(--c-accent-2-tx-rgb)); /* the accent as text (a theme whose accent is only a fill sets these) */
  --c-lvl2: var(--c-accent-2-tx); /* PROTOTYPE «Пассивки 2-го уровня»: the 2nd level's colour */
  --c-well-rgb: 0, 0, 0; /* black used as a FILL (a light theme fills toward its page instead) */
  --c-glow-rgb: 242, 199, 90; --c-glow: rgb(var(--c-glow-rgb)); /* the light of a glow (turn light, seat glow): the --t-g-* tones follow it in every theme but base */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--c-bg); overflow: hidden; }
body { color: var(--c-ink); font: var(--fw-med) 16px/1.35 var(--font-body); font-variant-numeric: var(--fv-num); font-variant-emoji: text; -webkit-tap-highlight-color: transparent; user-select: none; }

#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; overflow: hidden; overflow: clip; background: var(--c-bg); }
/* clip, not hidden: a hidden box still scrolls when focus lands on something outside it — a window sliding in from below threw the
   whole stage up and back («со взрывом», owner 29.10) */
#view, .screen { position: absolute; inset: 0; }
/* main.ts paint: a repaint's new button under the mouse takes its hover state at once, no replayed transition (it blinked) */
#view.repaint :hover, #view.repaint :hover * { transition: none !important; }
.screen { background-size: cover; background-position: center; }
#fade { position: absolute; inset: 0; background: var(--c-shadow); opacity: 0; pointer-events: none; transition: opacity .26s cubic-bezier(.4, 0, .2, 1); z-index: 50; }
/* a new screen settles in under the lifting fade (main.ts FADE_MS) */
.screen.scr-in { animation: scr-in .7s cubic-bezier(.16, .84, .24, 1) backwards; }
@keyframes scr-in { from { transform: scale(1.025); filter: brightness(.7); } }
#fade.on { opacity: 1; pointer-events: all; }
/* every scroll in the app (owner 08.10: «по всему приложению так плохо»): a thin rounded thumb in the theme's ink on no track,
   no arrow buttons, brass while held. Chromium draws ::-webkit-scrollbar (and ignores it once scrollbar-color is set, so the
   standard pair is for the other engines only) */
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 6px; background: rgba(var(--c-ink-rgb), .22) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--c-ink-rgb), .38); }
::-webkit-scrollbar-thumb:active { background-color: rgba(var(--c-accent-rgb), .75); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: rgba(var(--c-ink-rgb), .3) transparent; } }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; }
.cap { font: var(--fw-semi) 14px var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-ink-2); }
.dim { color: var(--c-ink-2); margin: 0; }
.warn { color: var(--c-danger); }

/* the one button: a tactile brass/metal plate — hover lights the edge, focus a brass ring, pressed sinks, disabled fades.
   .primary = brass key, .on = the pressed key of a .seg, .ghost = quieter plate, .icon = square, .small = compact */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 46px; padding: 0 22px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  font: var(--fw-semi) 16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); text-shadow: none; white-space: nowrap;
  background: var(--tex-plate); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .1), var(--ring-line), 0 3px 8px rgba(var(--c-shadow-rgb), .5); transition: box-shadow .12s, transform .06s, filter .12s; }
.btn:hover { background: var(--tex-plate); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .14), inset 0 0 0 var(--bw) var(--c-accent), 0 0 14px rgba(var(--c-accent-rgb), .25); }
.btn:active { transform: translateY(1px); filter: brightness(.9); box-shadow: inset 0 2px 5px rgba(var(--c-shadow-rgb), .7), var(--ring-line); }
.btn.primary { color: var(--c-on-accent); background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent) 55%, var(--c-accent-lo));
  box-shadow: inset 0 1px 0 rgba(var(--t-hi-1-rgb), .6), 0 0 0 var(--bw) var(--c-accent-edge), 0 4px 14px rgba(var(--c-accent-rgb), .35); }
.btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(var(--t-hi-1-rgb), .7), 0 0 0 var(--bw) var(--c-accent-edge), 0 0 20px rgba(var(--c-accent-2-rgb), .55); }
.btn.primary:active { filter: brightness(.92); box-shadow: inset 0 2px 5px rgba(var(--t-paperink-5-rgb), .55), 0 0 0 var(--bw) var(--c-accent-edge); }
.btn.on { color: var(--c-ink); background: rgba(var(--c-accent-rgb), .1); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); } /* chosen ≠ do it: a line, never the action's brass fill (owner 07.10) */
.btn.ghost { background: linear-gradient(180deg, rgba(var(--c-surface-2-rgb), .7), rgba(var(--c-surface-3-rgb), .7)); }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:active { opacity: .38; cursor: default; filter: none; transform: none; }
.btn.small { height: 40px; min-height: 0; padding: 0 16px; font-size: 14px; }
.btn.icon { width: 50px; padding: 0; font-size: 24px; }
.btn.big { height: 56px; padding: 0 30px; font-size: 18px; }
.btn.legal { box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .14), inset 0 0 0 var(--bw) var(--c-accent), 0 0 16px rgba(var(--c-accent-2-rgb), .35); }
/* segmented: a recessed track with one brass key */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 3px; border-radius: calc(var(--r-sm) * 7 / 6); background: var(--c-bg-2); box-shadow: var(--shadow-well-2), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .22); }
.seg .btn { height: 38px; padding: 0 16px; border-radius: calc(var(--r-sm) * 5 / 6); font-size: 14px; letter-spacing: .1em; color: var(--c-ink-2); background: transparent; box-shadow: none; }
.seg .btn:hover { color: var(--c-ink); background: transparent; box-shadow: inset 0 0 0 var(--bw) var(--c-line-strong); }
.seg .btn.on { color: var(--c-ink); background: rgba(var(--c-ink-rgb), .06); box-shadow: inset 0 -3px 0 var(--c-accent-2); }

/* the one panel: a soft dark plate without a heavy frame (the fight's panels share its material) */
.panel { background: var(--tex-panel); box-shadow: var(--shadow-edge), 0 18px 40px rgba(var(--c-shadow-rgb), .6); border-radius: var(--r-md); }

/* the one modal */
.shade { position: absolute; inset: 0; background: var(--c-overlay); display: grid; place-items: center; z-index: 65; } /* above the whole table (the hand, the lab drawer), below toasts */
.modal { min-width: 760px; max-width: 1000px; padding: 30px 36px; border: 0; border-radius: var(--r-md); font: var(--fw-med) 18px/1.4 var(--font-body); color: var(--c-ink);
  background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .98), rgba(var(--t-bg-7-rgb), .98)); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .08), inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .17), 0 24px 60px var(--c-shadow); }
.modal h2 { margin: 0 0 20px; font: var(--fw-bold) 24px var(--font-display); color: var(--c-ink); }
.modal p { margin: 0 0 10px; }
.row { display: flex; justify-content: flex-end; gap: 14px; margin-top: 24px; }
.row.left { justify-content: flex-start; }
.field { display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 18px; margin: 16px 0; }
.field > span { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-2); }
.field .seg { grid-column: auto; justify-self: start; }
/* the music choice: the pieces in a 3 × 3 grid, «Сейчас играет» a quiet line */
.music-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -4px 0 12px 258px; max-height: 300px; overflow-y: auto; padding-right: 6px; }
.music-pick[hidden], .music-now .btn[hidden] { display: none; }
.music-pick .btn { justify-content: flex-start; text-transform: none; letter-spacing: 0; }
.music-pick .btn.on { color: var(--c-ink); background: rgba(var(--c-accent-rgb), .1); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.music-now { display: flex; align-items: center; gap: 14px; margin: 0 0 8px 258px; font: var(--fw-med) 14px var(--font-body); color: var(--c-ink-2); }
.ttag { display: inline-block; align-self: center; padding: 3px 10px; border: 1px solid var(--c-ink-2); border-radius: 999px; font: var(--fw-semi) 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-2); white-space: nowrap; }
.field output { font: var(--fw-bold) 24px var(--font-num); color: var(--c-ink); min-width: 44px; text-align: right; }
/* form controls in the same material: a recessed well, a brass toggle, a brass slider */
select { height: 44px; min-width: 0; font: var(--fw-med) 16px var(--font-body); color: var(--c-ink); padding: 0 12px; border: 0; border-radius: var(--r-sm); background-color: var(--c-bg-2);
  box-shadow: var(--shadow-well-2), 0 0 0 var(--bw) var(--c-line); cursor: pointer; }
select option { background: var(--c-surface-3); color: var(--c-ink); }
input[type="text"], input[type="password"], textarea { font: var(--fw-med) 18px var(--font-body); color: var(--c-ink); background: var(--c-bg-2); border: 0; border-radius: var(--r-sm); padding: 10px 12px;
  box-shadow: var(--shadow-well-2), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .35); user-select: text; -webkit-user-select: text; }
.field input[type="text"], .field input[type="password"] { grid-column: 1 / -1; width: 100%; }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; width: 64px; height: 32px; margin: 0; justify-self: start; cursor: pointer; border-radius: var(--r-sm);
  background: var(--c-bg-2); box-shadow: inset 0 1px 3px rgba(var(--c-shadow-rgb), .85), 0 0 0 var(--bw) var(--c-line-strong); transition: background .12s; }
input[type="checkbox"]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: var(--r-xs); transition: left .12s;
  background: linear-gradient(180deg, rgba(var(--c-ink-rgb), .55), rgba(var(--c-ink-rgb), .32)); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .25), 0 1px 3px rgba(var(--c-shadow-rgb), .6); }
input[type="checkbox"]:checked { background: linear-gradient(90deg, rgba(var(--c-accent-lo-rgb), .7), rgba(var(--t-surface2-7-rgb), .9)); }
input[type="checkbox"]:checked::after { left: 35px; background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent) 55%, var(--c-accent-lo)); box-shadow: inset 0 1px 0 rgba(var(--t-hi-1-rgb), .6), 0 0 0 var(--bw) var(--c-accent-edge); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: calc(var(--r-xs) * 3 / 4); background: var(--c-bg-2); box-shadow: var(--shadow-well-2), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .22); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 26px; margin-top: -10px; border-radius: var(--r-xs);
  background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent) 55%, var(--c-accent-lo)); box-shadow: 0 0 0 var(--bw) var(--c-accent-edge), 0 2px 6px rgba(var(--c-shadow-rgb), .6); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: calc(var(--r-xs) * 3 / 4); background: var(--c-bg-2); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 26px; border: 0; border-radius: var(--r-xs); background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); }

/* the one tooltip: a dark plate with a brass hairline; lines keep their breaks */
.tip { position: absolute; transform: translate(-50%, -100%); max-width: 520px; padding: 10px 14px; font: var(--fw-med) 16px/1.4 var(--font-body); color: var(--c-ink); text-align: left; white-space: pre-line;
  border-radius: var(--r-sm); background: linear-gradient(180deg, var(--t-surface-1), var(--t-surface3-2)); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .2), 0 10px 24px rgba(var(--c-shadow-rgb), .7); pointer-events: none; z-index: 80; } /* above every window and its shade (65) and the toast (70), under «нет связи» (90): owner 22.10, a tip in the settings sat behind them */
/* its colour variants (owner 21.10): one plate, a coloured edge and a faint wash — info is the plain plate */
.tip.tone-damage { --tone: var(--t-danger-2); --tone-rgb: var(--t-danger-2-rgb); }
.tip.tone-growth { --tone: var(--t-ok-5); --tone-rgb: var(--t-c-ok-1-rgb); }
.tip.tone-points { --tone: var(--c-accent-2); --tone-rgb: var(--c-accent-2-rgb); }
.tip.tone-ally { --tone: var(--t-info-2); --tone-rgb: var(--t-info-2-rgb); }
.tip[class*="tone-"] { background: linear-gradient(180deg, rgba(var(--tone-rgb), .14), transparent 60%), linear-gradient(180deg, var(--t-surface-1), var(--t-surface3-2));
  box-shadow: inset 0 3px 0 var(--tone), inset 0 0 0 var(--bw) rgba(var(--tone-rgb), .45), 0 10px 24px rgba(var(--c-shadow-rgb), .7); }
/* the banner: the same plate, centred, bigger type, fades in and out by itself */
.tip.tip-banner { transform: translate(-50%, -50%); max-width: 760px; padding: 14px 28px; text-align: center; font: var(--fw-semi) 22px/1.3 var(--font-body); z-index: 59;
  animation: tip-banner var(--tb-ms, 1800ms) ease both; }
.tip.tip-banner b { color: var(--c-accent-2-tx); letter-spacing: .04em; }
@keyframes tip-banner { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } 12% { opacity: 1; transform: translate(-50%, -50%); } 82% { opacity: 1; } 100% { opacity: 0; } }
/* keyword plates (owner 12.10): beside an open tooltip, one plate per keyword — the tooltip's own look and tokens */
.kwplates { position: absolute; width: 300px; overflow: hidden; border-radius: var(--r-sm); pointer-events: none; z-index: 80;
  background: linear-gradient(180deg, var(--t-surface-8), var(--t-bg-2)); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .14), 0 18px 40px rgba(var(--c-shadow-rgb), .6); } /* one opaque block, the fight tooltip's own fill */
.kwplate { padding: 8px 12px; font: var(--fw-med) 14px/1.4 var(--font-body); color: var(--c-ink); text-align: left; }
.kwplate + .kwplate { border-top: var(--bw) solid rgba(var(--c-ink-rgb), .14); }
.kwp-name { font: var(--fw-semi) 16px/1.3 var(--font-body); margin-bottom: 2px; }
.kwp-text { color: var(--c-ink-2); }
body.mdragging .kwplates { display: none !important; }
/* the one toast: a short brass-edged plate at the bottom of the stage */
.toast { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); max-width: 1100px; padding: 12px 22px; z-index: 70; font: var(--fw-semi) 16px/1.35 var(--font-body); color: var(--c-ink);
  border-radius: var(--r-sm); background: linear-gradient(180deg, var(--t-surface2-8), var(--t-surface3-6)); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .1), inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .25), 0 12px 30px rgba(var(--c-shadow-rgb), .7); }

.erow .why small.dpn { display: block; margin-top: 2px; font-size: .78em; opacity: .75; }

.mleave-rated { color: var(--c-danger); font-weight: var(--fw-semi); }

/* no link at a table (netnotice.ts lostBanner): the table dims and greys, a quiet card in the middle; it eats the clicks until the link holds again */
.net-lost { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(var(--c-shadow-rgb), .55); -webkit-backdrop-filter: grayscale(.7) brightness(.8); backdrop-filter: grayscale(.7) brightness(.8); cursor: wait; animation: net-lost-in .4s ease-out both; }
.net-lost-card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 720px; box-sizing: border-box; padding: 40px 48px; border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .92), rgba(var(--c-shadow-rgb), .92)); box-shadow: inset 0 0 0 1px rgba(var(--c-accent-2-rgb), .35), 0 24px 60px rgba(var(--c-shadow-rgb), .75); }
.net-lost-spin { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(var(--c-ink-rgb), .14); border: 4px solid transparent; border-top-color: var(--c-accent-2); box-sizing: border-box; animation: net-lost-spin 1.6s linear infinite; }
.net-lost-t { font: var(--fw-bold) 40px/1.1 var(--font-display); color: var(--c-ink); }
.net-lost-s { font: var(--fw-med) 20px/1.4 var(--font-body); color: color-mix(in srgb, var(--c-ink) 72%, var(--c-bg)); }
@keyframes net-lost-in { from { opacity: 0; } }
@keyframes net-lost-spin { to { transform: rotate(1turn); } }

/* the crest: a chamfered brass plate (never a disc) — seats */
.crest { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; font: var(--fw-bold) 24px var(--font-display); color: var(--c-accent-2-tx);
  clip-path: var(--clip-chamfer); background: linear-gradient(160deg, var(--t-accentlo-3), var(--t-surface2-9) 55%, var(--t-accentedge-4)); }
.crest::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: linear-gradient(165deg, var(--t-surface2-2), var(--t-surface3-1) 70%); }
.crest > span { position: relative; line-height: 1; }
.crest.me { background: linear-gradient(160deg, var(--c-accent-2), var(--c-accent) 50%, var(--c-accent-lo)); }
.crest.me::before { background: linear-gradient(165deg, var(--t-surface2-1), var(--t-accentink-6) 70%); }

/* ---------- shell screens (loading, menu): labels on the art, no boxes (IA-style boards) */

.loading { display: grid; place-content: center; justify-items: center; gap: 30px; background: radial-gradient(circle at 50% 45%, var(--c-surface), var(--t-bg2-11) 70%); }
.bar { width: 720px; height: 6px; border-radius: calc(var(--r-xs) * 3 / 4); overflow: hidden; background: var(--c-bg-2); box-shadow: var(--shadow-well-2), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .22); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-accent-lo), var(--c-accent-2)); transition: width 0.15s; }

/* menu (variant Б): the title over the art, one row of engraved labels */
.menu-col { position: absolute; inset: 0; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: space-between; column-gap: 44px; padding: 120px 80px 150px; }
.menu-col .btn { height: auto; min-height: 56px; padding: 6px 4px; font: var(--fw-bold) 34px/1.1 var(--font-display); letter-spacing: .02em; text-transform: none; color: var(--c-ink);
  background: none; box-shadow: none; text-shadow: 0 2px 10px var(--c-shadow), 0 0 2px var(--c-shadow); border-radius: 0; }
.menu-col .btn:hover, .menu-col .btn:focus-visible { background: none; outline: none; color: var(--c-accent-2-tx); box-shadow: inset 0 -2px 0 var(--c-accent-2); }
.menu-col .btn[aria-disabled="true"] { opacity: .45; }
/* the hub (owner 13.10, F04): three table kinds as doors, the other items in one row below */
.menu-col .btn.door { position: relative; box-sizing: border-box; width: 440px; height: 300px; padding: 26px 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--t-bg2-2-rgb), .88), rgba(var(--t-bg2-2-rgb), .96)); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .2), 0 18px 40px var(--c-shadow); text-shadow: none; }
.menu-col .btn.door:hover, .menu-col .btn.door:focus-visible { background: linear-gradient(180deg, rgba(var(--t-bg2-2-rgb), .92), rgba(var(--t-bg2-2-rgb), .98)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 26px rgba(var(--c-accent-2-rgb), .25), 0 18px 40px var(--c-shadow); }
.menu-col .btn.door.lead { font-size: 34px; color: var(--c-ink); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 30px rgba(var(--c-accent-2-rgb), .25), 0 18px 40px var(--c-shadow); }
/* the fight block (owner 15.10, canvas BF1/BF2): the caption, the three doors or the search in their place, the build line and «С друзьями» */
.search-time { font: var(--fw-semi) 64px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--c-ink); }
/* the plain button inside the menu column (whose own buttons are bare labels): the search's «Отмена», «Сменить», «С друзьями» */
.menu-col .btn.bt { height: 46px; padding: 0 22px; font: var(--fw-semi) 16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); border-radius: var(--r-sm); text-shadow: none;
  background: var(--tex-plate); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .1), var(--ring-line), 0 3px 8px rgba(var(--c-shadow-rgb), .5); }
.menu-col .btn.bt:hover, .menu-col .btn.bt:focus-visible { color: var(--c-ink); background: var(--tex-plate); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .14), inset 0 0 0 var(--bw) var(--c-accent), 0 0 14px rgba(var(--c-accent-rgb), .25); }
.menu-col .btn.bt.small { height: 40px; padding: 0 16px; font-size: 14px; }
.menu-col .btn.bt.big { height: 56px; padding: 0 30px; font-size: 18px; }
.menu-col .btn.bt.primary { color: var(--c-on-accent); background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent) 55%, var(--c-accent-lo)); box-shadow: inset 0 1px 0 rgba(var(--t-hi-1-rgb), .6), 0 0 0 var(--bw) var(--c-accent-edge), 0 4px 14px rgba(var(--c-accent-rgb), .35); }
.menu-col .btn.bt.primary:hover, .menu-col .btn.bt.primary:focus-visible { color: var(--c-on-accent); filter: brightness(1.08); background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent) 55%, var(--c-accent-lo)); box-shadow: inset 0 1px 0 rgba(var(--t-hi-1-rgb), .7), 0 0 0 var(--bw) var(--c-accent-edge), 0 0 20px rgba(var(--c-accent-2-rgb), .55); }
/* the pre-fight table (canvas BF3): a rated seat's tier badge beside its name */
.pre-tier { display: inline-flex; align-items: center; line-height: 0; }
/* «С друзьями» (canvas BF5) */
.modal.friends { width: 860px; }
.modal.friends h3 { margin: 0 0 10px; font: var(--fw-semi) 20px/1.3 var(--font-body); color: var(--c-ink); }
.modal.friends .field input[type="text"] { text-transform: uppercase; letter-spacing: .12em; }

/* bundled faces with Cyrillic (owner verdict 27.09): Cormorant SC (headings), Fira Sans (text), Fira Sans Condensed (figures); latin + cyrillic subsets */
@font-face { font-family: "Cormorant SC"; font-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-sc-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant SC"; font-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-sc-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/cormorant-sc-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/cormorant-sc-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("assets/fonts/fira-sans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("assets/fonts/fira-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("assets/fonts/fira-sans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("assets/fonts/fira-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url("assets/fonts/fira-sans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url("assets/fonts/fira-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-display: swap; src: url("assets/fonts/fira-sans-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-display: swap; src: url("assets/fonts/fira-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 500; font-display: swap; src: url("assets/fonts/fira-sans-condensed-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 500; font-display: swap; src: url("assets/fonts/fira-sans-condensed-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 600; font-display: swap; src: url("assets/fonts/fira-sans-condensed-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 600; font-display: swap; src: url("assets/fonts/fira-sans-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 700; font-display: swap; src: url("assets/fonts/fira-sans-condensed-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Condensed"; font-weight: 700; font-display: swap; src: url("assets/fonts/fira-sans-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.fx { background: var(--c-bg); color: var(--c-ink); font: var(--fw-med) 16px/1.35 var(--font-body); }
.fx .atmo { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: saturate(.55); }

/* top bar */
.ftop { position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: linear-gradient(180deg, var(--t-surface3-7), var(--t-bg-8)); box-shadow: 0 1px 0 rgba(var(--c-accent-rgb), .35), 0 8px 24px rgba(var(--c-shadow-rgb), .55); }
.ftop .rnd { flex: none; display: flex; flex-direction: column; min-width: 96px; margin-right: 6px; }
.ftop .rnd b { font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-ink); }
.ftop .plaque { flex: 0 1 560px; min-width: 0; height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--t-surface-1), var(--t-surface3-2)); box-shadow: inset 0 1px 0 rgba(var(--t-ink-2-rgb), .07), inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .14), 0 6px 16px rgba(var(--c-shadow-rgb), .5); }
.ftop .plaque .crest { width: 36px; height: 36px; font: var(--fw-bold) 14px var(--font-num); }
.ftop .plaque > .rl { min-width: 0; flex: 1; }
.ftop .rline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--fw-bold) 18px/1.1 var(--font-display); }

.ftop .rline.t-word b, .ftop .rline.t-orders b { color: var(--c-accent-2-tx); }
.phases { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.phases span { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: var(--r-xs); color: var(--c-ink-dim); white-space: nowrap; }
.phases span.done { color: var(--c-ink-2); }
.phases span.on { color: var(--c-accent-2-tx); background: none; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.phases i { color: var(--c-ink-dim); font-style: normal; }

.cells { display: flex; gap: 6px; }

/* tags + stats */

.tag { font: var(--fw-semi) 14px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); padding: 3px 8px; border-radius: var(--r-xs); white-space: nowrap;
  background: rgba(var(--c-well-rgb), .35); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .07); }
.tag.t-word { color: var(--t-paper-7); } .tag.t-order { color: var(--c-accent-tx); } .tag.t-liar { color: var(--c-danger); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-danger-rgb), .35); }
.tag.ok { color: var(--c-ok); } .tag.bad { color: var(--c-danger); }

.pts { font: var(--fw-bold) 34px/1 var(--font-num); color: var(--c-ink); text-shadow: 0 2px 8px var(--c-shadow); }
.me .pts { color: var(--c-accent-2-tx); }
.nm { font: var(--fw-bold) 24px/1.1 var(--font-display); color: var(--c-ink); white-space: nowrap; }
.who { display: flex; align-items: center; gap: 14px; }
.meta { display: flex; flex-direction: column; gap: 3px; }
.out { opacity: .45; }

.board { position: absolute; inset: 0; }

/* view: table — felt, wooden rim, brass inlay; chips; HUDs on fixed rim anchors */
.tablev .felt { position: absolute; left: 470px; top: 290px; width: 980px; height: 380px; border-radius: var(--r-round);
  background: var(--tex-felt);
  box-shadow: inset 0 0 60px rgba(var(--c-shadow-rgb), .7), inset 0 0 0 10px var(--t-paperink-2), inset 0 0 0 12px var(--c-accent-lo), inset 0 0 0 13px rgba(var(--c-accent-2-rgb), .35), inset 0 0 0 22px var(--t-accentink-2), 0 30px 70px rgba(var(--c-shadow-rgb), .75); }
.tablev .felt::after { content: ""; position: absolute; inset: 22px; border-radius: var(--r-round); background: repeating-radial-gradient(circle at 50% 50%, rgba(var(--c-hi-rgb), .012) 0 2px, transparent 2px 5px); }

/* the hand: five paper cards fanned along an arc */
.hand { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.card { position: absolute; width: 196px; height: 272px; padding: 14px 14px 12px; border: 0; border-radius: calc(var(--r-lg) * 6 / 7); pointer-events: auto; cursor: default; text-align: left;
  display: flex; flex-direction: column; gap: 6px; color: var(--t-paperink-1); font: var(--fw-med) 14px/1.32 var(--font-body); font-variant-emoji: text;
  background: linear-gradient(165deg, var(--t-ink-10), var(--t-paper-8) 60%, var(--t-accent2-6)); transform-origin: 50% 100%; transform: translateY(var(--lift, 0px)) rotate(var(--r, 0deg));
  box-shadow: inset 0 0 0 5px var(--cf), inset 0 0 0 7px var(--c-paper), inset 0 0 0 8px rgba(var(--c-accent-lo-rgb), .55), 0 16px 30px rgba(var(--c-shadow-rgb), .6);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--r-lg) * 6 / 7); pointer-events: none; background: repeating-linear-gradient(45deg, rgba(var(--t-accentedge-5-rgb), .025) 0 2px, transparent 2px 4px); }
.card.playable { cursor: pointer; }
.card.dim { filter: brightness(.8) saturate(.75); }
/* reading a card (owner 28.09: «смотреть их неудобно»): the mouse over it, keys 1–5 off turn or a touch hold (.peek)
   zooms any card, playable or not, straight and 1.35× from its bottom edge, above the fan — a transform, the layout
   stays; it grows at once (no transition in) so its tooltip is placed above the zoomed card, and eases back out */
.card:hover, .card.peek { transform: translateY(var(--lift, 0px)) scale(1.35); z-index: 10 !important; filter: none; transition: box-shadow .14s ease; }
/* not my move: the cards stay at full colour; only a thin dashed edge says they wait */
.hand.wait .card::after { content: ""; position: absolute; inset: -4px; border-radius: calc(var(--r-lg) * 15 / 14); border: var(--bw) dashed rgba(var(--t-accent2-7-rgb), .45); pointer-events: none; }
.hand.wait .card:hover::after, .hand.wait .card.peek::after { border-color: transparent; }
.card.sel { --lift: var(--sel, -52px); z-index: 9 !important; filter: none;
  box-shadow: inset 0 0 0 5px var(--cf), inset 0 0 0 7px var(--t-c-paper-2), inset 0 0 0 8px var(--c-accent), 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 30px rgba(var(--c-accent-2-rgb), .55), 0 22px 40px rgba(var(--c-shadow-rgb), .65); }
.card.dmark { filter: saturate(.7); }
.card .dx { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); z-index: 2; width: 36px; height: 36px; border-radius: var(--r-round);
  display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 24px/1 var(--font-body); color: var(--t-c-hi); background: var(--c-danger); box-shadow: 0 0 0 var(--bw-strong) var(--t-c-paper-2), 0 4px 10px rgba(var(--c-shadow-rgb), .5); }
.card:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 5px; z-index: 8 !important; }
/* card faces (owner 27.09): the family of the cells' tokens (--c) → a darker ink of it for the frame and marks (--cd) and a
   tinted band (--cb); a type glyph and the family mark in both top corners, so an overlapped card shows them on either strip */
.card { --cd: color-mix(in srgb, var(--c) 45%, var(--t-accentink-3)); --cf: color-mix(in srgb, var(--c) 78%, var(--t-accentink-3)); --cb: color-mix(in srgb, var(--c) 40%, var(--t-c-paper-2)); }
.card.f-none { --c: var(--t-c-accent-1); }
.card .idx { position: absolute; right: 11px; top: 9px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--c-paper-ink); }
.card .cost { font: var(--fw-bold) 14px/1 var(--font-body); letter-spacing: .06em; color: var(--c-paper-ink); }
.card .idx .ty { line-height: 0; }
.card .idx .fm { line-height: 0; color: var(--cd); }
.card .gl { position: relative; display: flex; align-items: flex-end; gap: 5px; margin: -9px -9px 0; padding: 9px 9px 7px; border-radius: calc(var(--r-sm) * 7 / 6) calc(var(--r-sm) * 7 / 6) 0 0;
  background: var(--cb); border-bottom: 3px solid var(--cd); font: var(--fw-semi) 34px/1 var(--font-body); color: var(--c-paper-ink); }
.card .gl .tyl { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-round); line-height: 0;
  color: var(--c-paper-ink); background: var(--t-ink-11); box-shadow: 0 0 0 1.5px var(--cd); }
.card .nm { font: var(--fw-bold) 24px/1.05 var(--font-display); color: var(--t-paperink-1); margin-top: 4px; white-space: normal; }
.card .tx { color: var(--t-c-surface2-1); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.card .tg { margin-top: auto; font: var(--fw-semi) 14px/1.25 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--t-accentedge-6); border-top: var(--bw) solid rgba(var(--c-accent-lo-rgb), .35); padding-top: 6px; }

/* fight dialogs */
.modal.wide { max-width: 1500px; width: 1400px; }
.offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }

/* phones held upright: ask to rotate (vertical layout is a later stage) */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: grid; place-items: center; position: fixed; inset: 0; background: var(--c-bg); color: var(--c-ink); font: var(--fw-med) 24px/1.4 var(--font-body); text-align: center; padding: 24px; z-index: 100; }
}

.modal select { flex: 1; min-width: 0; height: 40px; font: var(--fw-med) 16px var(--font-body); color: var(--c-ink); padding: 0 10px; border: 0; border-radius: var(--r-sm);
  background: var(--c-bg-2); box-shadow: var(--shadow-well-2), 0 0 0 var(--bw) var(--c-line); }

/* ---------- layer 1 «Сигналы» (grammar G00): brass = only you · paper = a card or a rule · colour = only the family
   (icon + corner mark; the hues come from families.ts as .f-<family> { --c }) · crown = a cause from outside ·
   rail = neighbours and the run direction · brightness = gives points now · hatch = jammed · silhouette = stolen */
.sk { position: relative; flex: none; width: 64px; height: 64px; padding: 0; margin: 0; border: 0; border-radius: calc(var(--r-md) * 4 / 5); cursor: default; color: var(--t-c-ink); font-variant-emoji: text;
  background: linear-gradient(160deg, var(--t-surface-2), var(--t-bg-1)); box-shadow: var(--shadow-well), inset 0 -1px 0 rgba(var(--t-c-ink-2-rgb), .06), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.sk.empty { background: rgba(var(--t-bg-1-rgb), .55); box-shadow: inset 0 1px 3px rgba(var(--c-shadow-rgb), .7), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .08); }
/* family enamel (owner 27.09 «фон ячейки тоже должен отличаться»): a socket that holds a cell takes its family's tint and inner
   edge (tokens from families.ts); an empty slot stays neutral, brass stays «you». A cell that gives nothing now dims its enamel
   too; the jam hatch and the stolen silhouette sit on top. Two cells in one socket: each half its own enamel. */
.sk[data-fam] { background: linear-gradient(160deg, var(--e-top), var(--e-bot)); box-shadow: inset 0 2px 4px rgba(var(--c-shadow-rgb), .7), inset 0 0 0 var(--bw) var(--e-edge), 0 0 0 var(--bw) rgba(var(--c-shadow-rgb), .45); }
.sk.idle[data-fam] { --e-edge: color-mix(in srgb, var(--e-edge) 35%, transparent); background: linear-gradient(160deg, var(--e-idle-top), var(--e-idle-bot)); }
.sk.jam[data-fam] { --e-edge: color-mix(in srgb, var(--e-edge) 35%, transparent); background: repeating-linear-gradient(135deg, rgba(var(--c-well-rgb), .62) 0 5px, transparent 5px 10px), linear-gradient(160deg, var(--e-idle-top), var(--e-idle-bot)); }
.sk .eh { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; background: linear-gradient(160deg, var(--e-top), var(--e-bot)); }
.sk .eh.l { left: 0; border-radius: calc(var(--r-md) * 4 / 5) 0 0 calc(var(--r-md) * 4 / 5); } .sk .eh.r { right: 0; border-radius: 0 calc(var(--r-md) * 4 / 5) calc(var(--r-md) * 4 / 5) 0; }
.sk .eh.idle { background: linear-gradient(160deg, var(--e-idle-top), var(--e-idle-bot)); }
.sk.jam .eh { opacity: .35; }
.sk .g { position: absolute; left: 0; right: 0; top: 9px; text-align: center; font: var(--fw-semi) 34px/1 var(--font-body); color: var(--c); text-shadow: 0 0 12px var(--c); pointer-events: none; }
.sk .g.h { top: 12px; font-size: 24px; } .sk .g.l { left: 5px; right: auto; width: 26px; } .sk .g.r { right: 5px; left: auto; width: 26px; }
.sk .g.dim { opacity: .3; text-shadow: none; }
.sk .dv { position: absolute; left: 31px; top: 8px; bottom: 22px; width: 1px; background: var(--c-line); }
.sk .fb { position: absolute; left: 5px; top: 5px; display: flex; gap: 2px; line-height: 0; pointer-events: none; }
.sk .n { position: absolute; right: 6px; bottom: 3px; font: var(--fw-bold) 18px/1 var(--font-num); color: var(--t-c-ink); text-shadow: 0 1px 2px var(--c-shadow); pointer-events: none; }
.sk .pa { position: absolute; left: 5px; bottom: 5px; font: var(--fw-semi) 14px/1 var(--font-num); color: var(--t-c-ink-2); pointer-events: none; }

.sk .up { position: absolute; right: 6px; top: 5px; display: flex; gap: 2px; pointer-events: none; }
.sk .up i { display: block; width: 3px; height: 8px; background: var(--t-c-ink-2); opacity: .8; }
.sk.idle .g { opacity: .3; text-shadow: none; } .sk.idle .fb { opacity: .45; } .sk.idle .n { color: var(--t-c-ink-dim); font-weight: var(--fw-semi); }
.sk.jam { background: repeating-linear-gradient(135deg, var(--t-surface3-8) 0 5px, var(--t-c-bg2-2) 5px 10px); } .sk.jam .g { opacity: .14; text-shadow: none; } .sk.jam .n { color: var(--t-c-ink-dim); }

.sk .was { position: absolute; right: 6px; bottom: 22px; font: var(--fw-semi) 14px/1 var(--font-num); color: var(--t-c-ink-dim); text-decoration: line-through; pointer-events: none; }
.sk.legal { cursor: pointer; box-shadow: var(--shadow-well), 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 18px rgba(var(--c-accent-2-rgb), .55); animation: skpulse 1.1s ease-in-out infinite; }
.sk.legal:hover { background: linear-gradient(160deg, var(--t-surface2-10), var(--t-surface3-9)); }
.sk.legal:focus-visible { outline: 3px solid var(--t-ink-12); outline-offset: 3px; }
@keyframes skpulse { 50% { box-shadow: var(--shadow-well), 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 28px rgba(var(--c-accent-2-rgb), .85); } }
.sk.pv { box-shadow: var(--shadow-well), 0 0 0 3px var(--c-paper), 0 0 26px rgba(var(--c-paper-rgb), .5); animation: none; }
.sk.lit { box-shadow: inset 0 0 12px rgba(var(--c-accent-2-rgb), .3), 0 0 0 var(--bw) var(--c-accent), 0 0 18px rgba(var(--c-accent-2-rgb), .4); }

/* crown: the causes from outside, over the cell; one token = a crest + one effect glyph, paper for the rule */
.sk .crown { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); display: flex; gap: 4px; z-index: 3; }
.tk { display: inline-flex; align-items: center; height: 24px; border-radius: var(--r-xs); background: var(--t-surface3-1); box-shadow: 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .28), var(--shadow-1); white-space: nowrap; cursor: default; }

.tk.off { opacity: .55; }
.tk.rule { background: var(--c-paper); box-shadow: var(--shadow-1); }
/* a machine on the table: sockets, the rail, the name plate */
.mach { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.mach .cells { gap: 10px; }
.mach.out { opacity: .45; }
.rail { position: relative; flex: none; height: 2px; margin-top: 10px; background: rgba(var(--c-ink-2-rgb), .35); }
.rail .hd { position: absolute; right: -8px; top: -5px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid rgba(var(--c-ink-rgb), .75); }
.rail.rev .hd { right: auto; left: -8px; border-left: 0; border-right: 9px solid rgba(var(--c-ink-rgb), .75); }

.plate { display: flex; align-items: center; gap: 12px; margin-top: 14px; white-space: nowrap; }
.plate .crest { width: 46px; height: 46px; font-size: 24px; }
.plate .mid { display: flex; flex-direction: column; gap: 5px; }
.plate .nm { font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-ink); } .plate .nm.me { color: var(--c-accent-2-tx); }
.plate .turn { font: var(--fw-bold) 14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); padding: 2px 8px; border-radius: calc(var(--r-xs) * 3 / 4); box-shadow: inset 0 0 0 var(--bw) var(--c-ink); }
.plate .turn.me { color: var(--c-on-accent); background: var(--c-accent-2); box-shadow: none; }

.plate .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: 4px; }
.plate .tot { font: var(--fw-bold) 34px/1 var(--font-num); color: var(--c-ink); text-shadow: 0 2px 8px var(--c-shadow); }
.plate .tot.me { color: var(--c-accent-2-tx); }
.plate .tot .was { font: var(--fw-semi) 24px var(--font-num); color: var(--c-ink-dim); text-decoration: line-through; margin-right: 6px; }

.chipw { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: var(--t-surface3-1); box-shadow: 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .3);
  font: var(--fw-semi) 14px var(--font-num); color: var(--c-ink); white-space: nowrap; }
.chipw.off { box-shadow: 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .3), 0 0 0 0 transparent; outline: 1.5px dashed rgba(var(--c-ink-rgb), .55); outline-offset: -1.5px; }
/* the felt at rest: whose turn */
.tablev .felt { left: 560px; top: 310px; width: 800px; height: 250px; }
.tablev .fcenter { position: absolute; left: 960px; top: 386px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 1; }
.tablev .fcenter .cap { color: var(--c-ink-2); letter-spacing: .14em; }
/* my move: the head in brass; the moment it arrives, a short flare (sound.ts plays the cue on the same edge) */
.tablev .fcenter .cap.you { font: var(--fw-bold) 18px var(--font-body); letter-spacing: var(--ls-caps); color: var(--c-accent-2-tx); padding: 7px 18px; border-radius: calc(var(--r-xs) * 3 / 4); background: rgba(var(--c-on-accent-rgb), .72);
  box-shadow: inset 0 0 0 var(--bw) var(--c-accent), var(--shadow-glow); text-shadow: 0 0 12px rgba(var(--c-accent-2-rgb), .45); }
.tablev .fcenter .cap.you.fresh { animation: turnflare 1.8s cubic-bezier(.2,.8,.3,1) both; }
@keyframes turnflare {
  0% { transform: scale(1.6); opacity: 0; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 60px rgba(var(--c-accent-2-rgb), 1); }
  18% { transform: scale(1); opacity: 1; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 48px rgba(var(--c-accent-2-rgb), .9); }
  45% { transform: scale(1.07); box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2), 0 0 34px rgba(var(--c-accent-2-rgb), .7); }
  100% { transform: scale(1); box-shadow: inset 0 0 0 var(--bw) var(--c-accent), var(--shadow-glow); }
}

/* the card preview in words (action panel), and a card the table rule silences */

.card .gl .en { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: calc(var(--r-sm) * 7 / 6); font-size: 24px;
  color: var(--c); text-shadow: 0 0 10px var(--c); background: linear-gradient(160deg, var(--t-c-surface-2), var(--t-c-bg-1)); box-shadow: inset 0 2px 5px rgba(var(--c-shadow-rgb), .7), 0 1px 0 rgba(var(--t-c-hi-rgb), .7); }
.card .gl .en .fb { position: absolute; left: 4px; top: 4px; line-height: 0; }

/* ---------- layer 2: online screens in the approved look (R3-On*) — the fight's material: ivory / brass / paper on dark */
.onl { color: var(--c-ink); background-color: var(--c-bg); }
.onl .cap { font-size: 14px; }
.onl .ok { color: var(--c-ok); }
.onl .btn.small { height: 36px; padding: 0 14px; font-size: 14px; }
.onl .btn.ghost { background: transparent; box-shadow: none; color: var(--c-ink-2); text-transform: none; letter-spacing: 0; }
.onl .btn.ghost:hover { color: var(--c-ink); box-shadow: none; }
.onl .seg .btn { height: 32px; padding: 0 12px; font-size: 14px; letter-spacing: .06em; text-transform: none; }
.onl .crest { color: var(--c-ink); }
/* the seat colour from the server (owner 08.10) */
.onl .crest.me > span { color: var(--c-accent-2-tx); }
.onl .crest.bot > span { font: var(--fw-med) 24px var(--font-body); color: var(--c-ink-2); }
.onl .crest.free { background: linear-gradient(160deg, var(--t-accentedge-7), var(--t-surface2-3)); } .onl .crest.free::before { background: repeating-linear-gradient(135deg, var(--c-surface-3) 0 5px, var(--t-bg-3) 5px 10px); } .onl .crest.free > span { color: var(--c-ink-2); font-family: var(--font-body); }

.onh { position: absolute; left: 0; right: 0; top: 0; height: 110px; display: flex; align-items: center; gap: 18px; padding: 0 32px; z-index: 3; }
.onh .ttl .cap { font-size: 14px; } .onh h1 { margin: 2px 0 0; font: var(--fw-bold) 34px/1 var(--font-display); color: var(--c-ink); letter-spacing: .02em; }
.onh .rt { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.onl .status { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: 4; font: var(--fw-semi) 16px var(--font-body); color: var(--c-accent-2-tx); }
/* the list of tables */
.onl .who { border: 0; background: transparent; color: var(--c-ink-2); font: var(--fw-med) 14px var(--font-body); cursor: pointer; padding: 4px; }
.onl .who b { color: var(--c-ink); } .onl .who:hover { color: var(--c-ink); }
.onl .empty { padding: 40px 20px; color: var(--c-ink-2); font-size: 18px; }
.onl .mfelt { position: relative; width: 380px; height: 220px; margin: 18px 0; }
.onl .mseat { position: absolute; transform: translate(-50%, -50%); width: 42px; height: 42px; display: grid; place-items: center; font: var(--fw-bold) 18px var(--font-display); color: var(--c-ink);
  clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); background: var(--t-surface2-2); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-lo); }
.onl .mseat.bt { color: var(--c-ink-2); font-family: var(--font-body); } .onl .mseat.fr { color: var(--c-ink-2); background: repeating-linear-gradient(135deg, var(--c-surface-3) 0 5px, var(--t-bg-3) 5px 10px); font-family: var(--font-body); }
/* a room: the table with its seats */

.offer.many { grid-template-columns: repeat(4, 1fr); }

/* the clock at the mover's name and on the felt */

.chipw.clock { font-family: var(--font-num); } .chipw.clock.warn { color: var(--c-danger); box-shadow: 0 0 0 var(--bw) var(--c-danger); }
.tablev .fclock { font: var(--fw-bold) 34px/1 var(--font-num); color: var(--c-ink); } .tablev .fclock.warn { color: var(--c-danger); }
/* the end of the fight */
.endscr { position: absolute; inset: 0; z-index: 9; padding: 34px 0 0 96px; color: var(--c-ink);
  background: linear-gradient(180deg, rgba(var(--t-bg2-2-rgb), .94), rgba(var(--t-bg2-2-rgb), .98)), radial-gradient(ellipse at 40% 40%, var(--c-surface), var(--t-bg2-2)); }
.endscr > .cap { font-size: 14px; } .endscr h1 { margin: 2px 0 0; font: var(--fw-bold) 34px/1 var(--font-display); }
.endscr .ehead { position: absolute; left: 150px; top: 150px; }
.endscr .ehead .who { font: var(--fw-bold) 64px/1.1 var(--font-display); color: var(--c-ink); }
.endscr .ehead p { margin: 6px 0 0; font: var(--fw-med) 16px var(--font-body); } .endscr .ehead p b { color: var(--c-ink); }

.endscr .eplaces { position: absolute; left: 150px; top: 330px; width: 940px; display: flex; flex-direction: column; }
.endscr .eplaces .chcap { align-self: flex-end; margin: 0 38px 6px 0; }
.endscr .erow { display: grid; grid-template-columns: 70px 72px 220px 1fr 90px; align-items: center; min-height: 86px; }
.endscr .erow .pl { font: var(--fw-bold) 34px var(--font-display); color: var(--c-ink-2); } .endscr .erow.win .pl { color: var(--c-accent-2-tx); }
.endscr .erow .crest { width: 50px; height: 50px; font-size: 24px; }
.endscr .erow .nm { font: var(--fw-bold) 24px var(--font-display); color: var(--c-ink); } .endscr .erow.me .nm { color: var(--c-accent-2-tx); }
.endscr .erow .why { font: var(--fw-med) 16px var(--font-body); color: var(--c-ink-2); }
.endscr .erow .ch { font: var(--fw-bold) 34px var(--font-num); text-align: right; }
.endscr .eside { position: absolute; left: 1170px; top: 300px; width: 680px; }
.endscr .ebtns { position: absolute; left: 150px; bottom: 110px; display: flex; gap: 14px; }
.endscr .ebtns .btn { height: 52px; padding: 0 26px; }

/* ---------- rich text (richtext.ts): typed values in every explanatory line; each colour ≥ 4.5:1 on the dark panels */

.rt-rule { color: var(--paper-ink, var(--c-paper-ink)); background: var(--paper, var(--c-paper)); font-weight: var(--fw-semi); font-size: .9em; padding: 0 5px; border-radius: calc(var(--r-xs) / 2); box-shadow: 0 1px 3px rgba(var(--c-shadow-rgb), .6); white-space: nowrap; }
.rt-name { font-weight: var(--fw-semi); }
.rt-name.me { color: var(--brass-hi, var(--c-accent-2-tx)); }
/* the one well a sign sits in (look.ts signWell): a colour family on its enamel, else the felt; a screen's class sets the size */
.well { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; color: var(--c, var(--c-ink-2));
  background: linear-gradient(160deg, var(--e-top, var(--c-felt)), var(--e-bot, var(--c-felt-2))); box-shadow: inset 0 2px 5px rgba(var(--c-shadow-rgb), .75), inset 0 0 0 1px rgba(var(--c-ink-rgb), .1); }
.rt-num { color: var(--num-ink); font-weight: var(--fw-heavy); } /* one rule for every context; paper sets --num-ink below */
/* the formatter's actions, conditions and moments (owner 12.10): each action its own colour everywhere, its number with it;
   a condition underlined; a moment of the round with a clock in italics. Paper (cards, card plates) darkens the colours. */
:root { --act-od-gain: #f2c75a; --act-od-grow: #f4f1e6; --act-od-hit: #ff9482; --act-od-copy: #8cbcff; --act-od-guise: #c9bbff; --act-od-save: #d3d8e0; --act-od-burn: #ffaa6e; --act-od-guard: #86d4ff; --act-od-kw: #e7c98f; --act-od-num: #fff6e3;
  --act-gain: var(--c-gold); --act-grow: var(--t-c-hi-2); --act-hit: var(--t-c-danger-1); --act-copy: var(--c-info); --act-guise: var(--fam-mc-violet); --act-save: var(--fam-mc-silver); --act-burn: var(--fam-mc-orange); --act-guard: var(--fam-mc-sky); --kw-mark: var(--brass-hi, var(--c-accent-2-tx)); --num-ink: var(--t-ink-3); }
.card .tx, .mplq.mk-card, .mplq.mk-soul { --act-gain: var(--t-accentlo-2); --act-grow: var(--t-inkdim-1); --act-hit: var(--t-c-danger-4); --act-copy: var(--t-magic-2); --kw-mark: var(--t-accentink-4); --num-ink: var(--t-accentink-4); }
.mfx .card.mk-cell .tx { --act-gain: var(--act-od-gain); --act-grow: var(--act-od-grow); --act-hit: var(--act-od-hit); --act-copy: var(--act-od-copy); --act-guise: var(--act-od-guise); --act-save: var(--act-od-save); --act-burn: var(--act-od-burn); --act-guard: var(--act-od-guard); --kw-mark: var(--act-od-kw); --num-ink: var(--act-od-num); } /* the cell cards of the hand are dark in every theme, not paper: light inks that hold 4.5:1 there (themeshots --audit), the same in all themes */
.rv { font-weight: var(--fw-bold); } .rv b { font-weight: var(--fw-heavy); }
.rv-gain { color: var(--act-gain); } .rv-grow { color: var(--act-grow); } .rv-hit { color: var(--act-hit); } .rv-copy { color: var(--act-copy); }
.rv-guise { color: var(--act-guise); } .rv-save { color: var(--act-save); } .rv-burn { color: var(--act-burn); } .rv-guard { color: var(--act-guard); }
.rk-cond { font-weight: var(--fw-semi); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--kw-mark); }
.rk-time { font-style: italic; font-weight: var(--fw-semi); color: var(--kw-mark); } .rk-time::before { content: "◷ "; font-style: normal; }
.rt-up { color: var(--t-paper-9); font-weight: var(--fw-bold); } /* + warm neutral */
.rt-down { color: var(--t-info-4); font-weight: var(--fw-bold); } /* − muted cold */
.rt-fx { color: var(--brass-hi, var(--c-accent-2-tx)); font-weight: var(--fw-bold); }
.rt-ok { color: var(--ok, var(--c-ok)); font-weight: var(--fw-bold); }
.rt-total { color: var(--brass-hi, var(--c-accent-2-tx)); font-weight: var(--fw-heavy); }

/* a cell's tooltip carries its family edge */
.tip.fam { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .2), 0 10px 24px rgba(var(--c-shadow-rgb), .7); padding-left: 17px; }
/* the native apps' server address (online list chip + dialog) */
.onl .who.srv.warn, .onl .who.srv.warn b { color: var(--c-accent-2-tx); }
.modal.srv { width: 900px; }
.modal.srv .field { grid-template-columns: 240px 1fr; }
.modal.srv .field input[type="text"] { grid-column: auto; font: var(--fw-med) 24px var(--font-body); }
.modal.srv .srv-result { min-height: 26px; margin: 6px 0; font: var(--fw-semi) 16px var(--font-body); }
.modal.srv .srv-result.ok { color: var(--c-ok); } .modal.srv .srv-result.warn { color: var(--c-accent-2-tx); }
/* «Аккаунт» (rating layer 1): the window of log in / create / recovery code / logged in */
.modal.acct { width: 860px; }
.modal.acct .field { grid-template-columns: 240px 1fr; }
.modal.acct .field input[type="text"], .modal.acct .field input[type="password"] { grid-column: auto; font: var(--fw-med) 22px var(--font-body); }
.modal.acct .acct-status { min-height: 26px; margin: 6px 0 0; font: var(--fw-semi) 16px var(--font-body); }
.modal.acct .acct-status.warn, .modal.acct .acct-warn { color: var(--c-accent-2-tx); }
.modal.acct .acct-code { margin: 14px 0; padding: 18px 20px; text-align: center; user-select: all; -webkit-user-select: all; font: var(--fw-bold) 34px var(--font-num); letter-spacing: .12em; color: var(--c-ink);
  background: var(--c-bg-2); border-radius: var(--r-sm); box-shadow: var(--shadow-well-2), 0 0 0 var(--bw-strong) var(--c-accent-2); }

/* the class row of a machine plate */
.plate .clsrow { display: flex; align-items: center; gap: 6px; max-width: 520px; overflow: hidden; }
.plate .clsrow .tag { padding: 2px 7px; font-size: 14px; }

/* ---- the fight screen (.fx + .mfx): the felt, sockets, plates, fan and panel, in the same tokens. The 9 cell colours come from families.ts (midColorCss: .f-mc-* / [data-fam="mc-*"]).
   Phone landscape (844×390 → the stage at ×0.36): the essentials stay ≥ 18 stage px. */
.mfx .sk .lv { position: absolute; right: 5px; top: 4px; font: var(--fw-bold) 14px/1 var(--font-num); color: var(--c-accent-2-tx); text-shadow: 0 1px 2px var(--c-shadow); pointer-events: none; }
.mfx .sk .lv ~ .up { top: 20px; }
.mfx .sk .pa { font: var(--fw-bold) 16px/1 var(--font-num); color: var(--c-ok); }
.mfx .sk .crown .tk.soul { background: var(--c-paper); box-shadow: var(--shadow-1); }
.mfx .sk .crown .tk.soul.me { box-shadow: 0 0 0 1.5px var(--c-accent-2), var(--shadow-1); }

.mfx .plate .chipw.clock { font-size: 16px; height: 26px; }
.mfx .plate .nm { font-size: 24px; }
/* a long name (owner 24.10) truncates with an ellipsis (full name in the title); the pill, clock, badges and chips keep their places */
.mfx .plate .clsrow .tag { font-size: 14px; padding: 2px 8px; }
.mfx .plate .clsrow .tag.t-br { display: inline-flex; align-items: center; gap: 3px; color: var(--c); text-transform: none; letter-spacing: .02em; }
.mfx .tablev .fcenter .cap.you { font-size: 24px; }
.mfx .tablev .fcenter .cap { font-size: 16px; }

.mfx .card .nm { font-size: 24px; }
.mfx .card .tx { font-size: 18px; line-height: 1.28; -webkit-line-clamp: 6; }
.mfx .card .tg { font-size: 14px; }

.mfx .endscr .erow .why { font-size: 18px; }
/* the pick before the fight: five profile plates where the others' machines stand */

/* 01.10: cell names, arrows, tenants, piggies, the crown, the row's empty places, the class plates */
.mfx .hand .card.ghost { visibility: hidden; }
.mfx .sk .lv.ten { right: auto; left: 5px; color: var(--t-info-3); }
.mfx .sk.tenant { box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--t-info-3-rgb), .8); }
.mfx .sk .pa.bank { color: var(--t-c-accent2-2); }
.mfx .sk .mcrown { position: absolute; left: 50%; top: -19px; transform: translateX(-50%); color: var(--t-gold-1); font-size: 18px; text-shadow: 0 0 8px rgba(var(--t-gold-1-rgb), .8); pointer-events: none; }

/* the signs (owner 01.10): the class's silhouette + the cell's pictogram, in the cell's colour; no names on sockets */
.mfx .sk .msign { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); line-height: 0; color: var(--c); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 70%, transparent)); pointer-events: none; }
.mfx .sk .msign .msg-fr { fill: rgba(var(--t-c-bg2-5-rgb), .62); }
.mfx .sk.empty .msign { display: none; }
.mfx .card .gl .en { width: 54px; height: 54px; }
.mfx .card .gl .en .msg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 75%, transparent)); }
.mfx .card.f-none .gl .en, .mfx .card.f-hit .gl .en { color: var(--c); }
/* rich phrases: numbers bold, the four verbs in their colours (paper and dark panels) */

/* the plaque: a merge's result, the card being played — dark wood and brass, the sign on its colour's enamel */
.mplq { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; padding: 12px 14px; margin: 4px 0 10px; border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--t-surface-3), var(--t-bg-4)); border: var(--bw) solid var(--c-line-strong); border-left: 4px solid var(--c);
  box-shadow: inset 0 1px 0 rgba(var(--t-ink-5-rgb), .08), 0 8px 22px rgba(var(--c-shadow-rgb), .55), 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); }
.mplq.f-none, .mplq.f-hit { --c: var(--c-accent); }
.mplq-sg { width: 76px; height: 76px; border-radius: var(--r-md); }
.mplq-sg .msg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 80%, transparent)); }
.mplq-sg .msg-plain { width: 46px; height: 46px; }
.mplq-nm { font: var(--fw-bold) 24px/1.1 var(--font-display); color: var(--t-c-ink-1); letter-spacing: .01em; }
.mplq-sub { margin-top: 3px; font: var(--fw-semi) 14px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, var(--c-accent-2-tx)); }
.mplq-tx { margin-top: 7px; font: var(--fw-med) 16px/1.38 var(--font-num); color: var(--t-c-paper-3); }
.mfx .sk .msign { top: 9px; }
.mfx .sk .msign svg { width: 38px; height: 38px; }

/* 01.10: the sign exactly in the middle; a hover plaque instead of a text tip; the aimed machine lights; my forecast */
.mfx .sk .msign { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tip:has(> .mplq) { padding: 0; background: none; border: 0; box-shadow: none; max-width: none; }
.tip > .mplq { margin: 0; width: 430px; text-align: left; }
.mplq-row { display: flex; justify-content: space-between; gap: 14px; margin-top: 6px; padding-top: 6px; border-top: var(--bw) dashed var(--c-line); font: var(--fw-med) 14px/1.3 var(--font-num); }
.mplq-row span { color: var(--c-accent-tx); white-space: nowrap; }
.mplq-row b { color: var(--t-c-ink-1); font-weight: var(--fw-bold); text-align: right; }
.mplq-row.aim b { color: var(--t-danger2-5); }
.mplq-row.pts b { font-size: 18px; color: var(--t-c-ink-3); }
.mplq-empty { grid-template-columns: 1fr; }
.mfx .sk .n.proj { color: var(--c-accent-2-tx); opacity: .85; font-size: 16px; }
.mfx .plate .tot.proj { color: var(--c-accent-2-tx); }
.mfx [id^="mach-"].aimed { border-radius: calc(var(--r-lg) * 8 / 7); box-shadow: 0 0 0 var(--bw-strong) rgba(var(--t-danger-1-rgb), .9), 0 0 34px rgba(var(--t-danger-1-rgb), .45); transition: box-shadow .12s ease; }
.mfx [id^="mach-"].aimed { box-shadow: 0 0 0 var(--bw) rgba(var(--t-danger-1-rgb), .55), 0 0 22px rgba(var(--t-danger-1-rgb), .22); }
.mfx .sk.aimed { z-index: 3; box-shadow: 0 0 0 3px var(--t-c-danger-1), 0 0 24px rgba(var(--t-c-danger-1-rgb), .85); }
.mplq-row.none b { color: var(--t-c-ink-2); }
/* 02.10: after the run the points stand big in the middle of the cell, its sign dims under them (owner: «Б») */
.mfx .sk.lit .msign { opacity: .2; transition: opacity .25s ease; }
.mfx .sk.lit .n { left: 0; right: 0; top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; font-size: 34px; color: var(--t-c-ink-3); text-shadow: 0 0 10px rgba(var(--c-shadow-rgb), .9), 0 2px 3px var(--c-shadow); }
.fx.an-on:not(.an-c0) .sk[data-col="0"].lit .msign { opacity: 1; }
.fx.an-on:not(.an-c1) .sk[data-col="1"].lit .msign { opacity: 1; }
.fx.an-on:not(.an-c2) .sk[data-col="2"].lit .msign { opacity: 1; }
.fx.an-on:not(.an-c3) .sk[data-col="3"].lit .msign { opacity: 1; }
.fx.an-on:not(.an-c4) .sk[data-col="4"].lit .msign { opacity: 1; }
.fx.an-on:not(.an-c5) .sk[data-col="5"].lit .msign { opacity: 1; }
/* «Как играть» (02.10): tabs, glossary rows with the game's signs, the mixing square */
/* 02.10: hits marked on the struck cell; the journal */
.mfx .sk.struck { box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--t-c-danger-3-rgb), .9), 0 0 16px rgba(var(--t-c-danger-3-rgb), .45); }
.mfx .sk .mhit { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); display: flex; gap: 3px; z-index: 3; pointer-events: none; }
.mfx .sk .mhit-i { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 3px; border-radius: calc(var(--r-md) * 9 / 10); background: var(--t-c-accentedge-1); border: var(--bw) solid var(--t-c-danger-3); color: var(--t-c-ink-6); font: var(--fw-bold) 14px/1 var(--font-num); box-shadow: 0 2px 5px rgba(var(--c-shadow-rgb), .6); }
.mfx .sk .mhit-i .msg { color: var(--t-c-danger-1); }
/* 02.10: the move plan; recipes in «Как играть» */

/* 02.10: a cell card looks like a cell (dark enamel, a big sign), an action card stays paper, a soul is ghost-violet paper */
.mfx .card.mk-cell { background: radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--c) 34%, var(--t-paperink-3)), var(--t-accentink-1) 72%); color: var(--c-paper);
  box-shadow: inset 0 0 0 var(--bw-strong) color-mix(in srgb, var(--c) 80%, var(--c-shadow)), inset 0 0 0 4px var(--t-bg2-7), inset 0 0 0 5px color-mix(in srgb, var(--c) 35%, transparent), 0 12px 26px rgba(var(--c-shadow-rgb), .65); }
.mfx .card.mk-cell::before { background: none; }
.mfx .card.mk-cell .gl { justify-content: center; background: transparent; border-bottom: var(--bw) solid color-mix(in srgb, var(--c) 45%, transparent); padding-top: 12px; }
.mfx .card.mk-cell .gl .en { width: 70px; height: 70px; border-radius: calc(var(--r-lg) * 6 / 7); background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 45%, var(--t-accentink-1)), var(--t-c-bg2-6) 80%);
  box-shadow: inset 0 2px 6px rgba(var(--c-shadow-rgb), .85), 0 0 0 var(--bw) color-mix(in srgb, var(--c) 55%, transparent), 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); }
.mfx .card.mk-cell .gl .tyl, .mfx .card.mk-cell .gl .en .fb { display: none; }
.mfx .card.mk-cell .nm { color: var(--t-c-ink-1); text-align: center; }
.mfx .card.mk-cell .tx { color: var(--t-c-paper-3); }

.mfx .card.mk-cell .tg { color: color-mix(in srgb, var(--c) 40%, var(--act-od-kw)); border-top-color: var(--c-line); }
.mfx .card.mk-cell .idx, .mfx .card.mk-cell .cost { color: var(--c-paper); }
.mfx .card.mk-soul { background: linear-gradient(170deg, var(--t-hi-4), var(--t-ink-14)); }
.mfx .card.mk-soul .gl { background: var(--t-info-5); border-bottom-color: var(--t-magic-5); }
.mfx .card.mk-soul .gl .en { color: var(--c-magic); }
/* plaques of cards and souls take their card's paper; a cell's plaque stays dark */
.mplq.mk-card { background: linear-gradient(160deg, var(--t-ink-15), var(--t-paper-10)); border: var(--bw) solid var(--t-accent-2); border-left: 4px solid var(--c); }
.mplq.mk-soul { background: linear-gradient(160deg, var(--t-hi-4), var(--t-ink-16)); border: var(--bw) solid var(--t-magic-3); border-left: 4px solid var(--t-magic-3); }
.mplq.mk-card .mplq-nm, .mplq.mk-soul .mplq-nm { color: var(--t-paperink-1); }
.mplq.mk-card .mplq-sub, .mplq.mk-soul .mplq-sub { color: var(--t-accentedge-8); }
.mplq.mk-card .mplq-tx, .mplq.mk-soul .mplq-tx { color: var(--t-c-surface2-1); }

.mplq.mk-card .mplq-row span, .mplq.mk-soul .mplq-row span { color: var(--t-accentlo-4); } .mplq.mk-card .mplq-row b, .mplq.mk-soul .mplq-row b { color: var(--t-paperink-1); }
/* 02.10: no type glyph on cards; «Куда» as icons; the dock (this round's journal / my recipes) at the bottom left */
.mfx .card .gl .tyl, .mfx .card .idx .ty, .mfx .card .idx .fm { display: none; }
.mfx .card .gl { justify-content: center; }
.mfx .card .tg.wtg { display: flex; justify-content: center; padding-top: 6px; }
.mfx .card .tx { -webkit-line-clamp: 8; }
 
.mfx .card .tg.wtg { position: absolute; left: 8px; top: 8px; margin: 0; padding: 0; border: 0; z-index: 2; display: block; }
/* 02.10: pick a seat by clicking the enemy; the compact top-up row; a hand card's «now» plaque */
.mfx [id^="mach-"].pickseat { cursor: pointer; border-radius: calc(var(--r-lg) * 8 / 7); box-shadow: 0 0 0 var(--bw) rgba(var(--t-danger-1-rgb), .6), 0 0 18px rgba(var(--c-accent-rgb), .22); animation: mid-pick 1.8s ease-in-out infinite; }
.mfx [id^="mach-"].pickseat:hover { box-shadow: 0 0 0 2px rgba(var(--c-accent-2-rgb), .85), 0 0 26px rgba(var(--c-accent-rgb), .4); }
@keyframes mid-pick { 50% { box-shadow: 0 0 0 var(--bw) rgba(var(--t-danger-1-rgb), .3), 0 0 10px rgba(var(--c-accent-rgb), .1); } }
.mfx .sk .mhint { position: absolute; left: 50%; top: 100%; margin-top: 4px; transform: translateX(-50%); z-index: 5; display: none; max-width: 190px; width: max-content; padding: 3px 8px; border-radius: var(--r-md); background: var(--t-accentedge-1); border: var(--bw) solid var(--t-ok-5); color: var(--t-ink-6); font: var(--fw-bold) 13px/1.2 var(--font-body); text-align: center; pointer-events: none; }
.mfx .sk:hover .mhint, .mfx .sk:focus-visible .mhint { display: block; }
.ctip-live { margin-top: 6px; color: var(--t-ok-5); }
.mfx .pickseat-tag { position: absolute; right: 10px; bottom: -12px; z-index: 4; padding: 3px 10px; border-radius: var(--r-md); background: var(--t-accentedge-1); border: var(--bw) solid var(--t-danger-1); color: var(--t-ink-6); font: var(--fw-bold) 14px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }

.mplq-row.none b { color: var(--t-c-ink-2); }
.mfx .card .tx { display: block; -webkit-line-clamp: unset; flex: 1 1 0; min-height: 0; overflow: hidden; line-height: 1.24; }
/* a text still cut at 14px with closed-up lines (midscreen fitNow, audit 30.10): the emblem gives its height to the text */
.mfx .hand .card.tight .gl .en { width: 36px; height: 36px; }
.mfx .hand .card.mk-cell.tight .gl .en { width: 48px; height: 48px; }
.mfx .hand .card.tight .gl .en > svg { width: 24px; height: 24px; }
.mfx .hand .card.mk-cell.tight .gl .en > svg { width: 38px; height: 38px; }

/* 02.10: the control panel, redesigned — head (what, whose clock, the turn's actions), one big instruction, the plan, the footer */

/* ---- v14 (owner-approved canvas 02.10): stadium felt with the bank and the bets, seat colours, the header
   with the ante and the rule's name, the round's intro, the turn medallion, card pills, the own-cell capsule, merge by
   dragging, the plan's badges, the journal/recipes dock, the glossary. Everything here is scoped to `.mfx.v14`. */
.mfx.v14 .tablev .felt { left: 584px; top: 310px; width: 752px; height: 232px; border-radius: 116px; z-index: 1;
  background: radial-gradient(ellipse 62% 70% at 50% 42%, var(--t-felt-1) 0%, var(--t-felt-2) 70%, var(--t-felt2-1) 100%);
  box-shadow: inset 0 0 40px rgba(var(--c-shadow-rgb), .55), 0 0 0 10px var(--t-paperink-4), 0 0 0 14px var(--t-accentedge-2), 0 0 0 18px var(--t-accentink-5), 0 12px 30px 18px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .tablev .felt::after { inset: 12px; border-radius: 104px; background: none; box-shadow: inset 0 0 0 1.5px rgba(var(--c-accent-2-rgb), .16); }
.mfx.v14 .tablev .fcenter { visibility: hidden; pointer-events: none; }
.mfx.v14 .mfelt { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mfx.v14 .mfelt > * { pointer-events: auto; }
.mfx.v14 .mbank { position: absolute; left: 790px; top: 400px; width: 340px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.mfx.v14 .mbank-st { display: flex; align-items: flex-end; gap: 2px; }
.mfx.v14 .mbank-t { display: flex; flex-direction: column; line-height: 1.05; text-shadow: 0 2px 4px var(--c-shadow); }
.mfx.v14 .mbank-t > span:first-child { display: flex; align-items: baseline; gap: 6px; }
.mfx.v14 .mbank-t .cap { color: var(--c-accent-2-tx); font-size: 14px; }
.mfx.v14 .mbank-t b { font: var(--fw-bold) 24px/1 var(--font-num); color: var(--t-ink-4); }
.mfx.v14 .mbank-s { font: var(--fw-semi) 14px var(--font-body); color: rgba(var(--c-ink-rgb), .8); white-space: nowrap; }
.mfx.v14 .mbet { position: absolute; width: max-content; min-width: 60px; display: flex; flex-direction: column; align-items: center; text-shadow: 0 2px 4px var(--c-shadow); }
.mfx.v14 .mbet.dim { opacity: .55; }
.mfx.v14 .mbet > b { font: var(--fw-bold) 24px/1 var(--font-num); color: var(--c-ink); margin-top: 2px; }
.mfx.v14 .mbet-s { font: var(--fw-semi) 14px var(--font-body); color: rgba(var(--c-ink-rgb), .92); white-space: nowrap; }
.mfx.v14 .mbet-s2 { font: var(--fw-med) 14px var(--font-body); color: rgba(var(--c-ink-rgb), .75); white-space: nowrap; }
.mfx.v14 .mbet-h svg { filter: grayscale(1) brightness(.7); }
.mfx.v14 .mbet-0 { display: block; width: 26px; height: 15px; border-radius: var(--r-round); border: var(--bw-strong) dashed; margin-bottom: 2px; }
/* the plates: a seat colour ring in the crest itself (no overlay that could cover the name), the reserve right of name + hits */
.mfx.v14 .plate.mplate { align-items: center; }
.mfx.v14 .crest.mseat { background: var(--seat); }
.mfx.v14 .crest.mseat::before { inset: 3px; }
.mfx.v14 .crest.mseat.me > span { color: var(--c-accent-2-tx); }
.mfx.v14 .mplate .mtop { display: flex; align-items: center; gap: 18px; }
/* owner 26.10 «всегда в рамках этой стрелочки»: the plate is exactly the machine's width (the rail), whatever its name, marks, chips or total; a long name is cut, never the plate */
.mfx.v14 .mach > .plate.mplate { width: 100%; box-sizing: border-box; gap: 8px; }
.mfx.v14 .mach > .plate.mplate > .mid { flex: 1 1 auto; min-width: 0; }
.mfx.v14 .mach > .plate.mplate .mtop { gap: 10px; min-width: 0; }
.mfx.v14 .mach > .plate.mplate > .rt { flex: none; margin-left: auto; }
.mfx.v14 .mach > .plate.mplate .mtotal { margin-left: 0; }
.mfx.v14 .mach > .plate.mplate .mtotal .mt-then { left: auto; right: 0; top: 100%; margin-left: 0; } /* the plan «→ ≈18 +4» under the total, inside the plate */
.mfx.v14 .mres { display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 3px var(--c-shadow); }
.mfx.v14 .mres > div { display: flex; flex-direction: column; line-height: 1; }
.mfx.v14 .mres b { font: var(--fw-bold) 24px/1 var(--font-num); color: var(--c-ink); }
.mfx.v14 .mres span { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink-2); margin-top: 2px; }
.mfx.v14 .mauto { font: var(--fw-bold) 14px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-ink-2); padding: 2px 7px; border-radius: calc(var(--r-xs) * 3 / 4); }
.mfx.v14 .mtotal { position: relative; top: -6px; display: flex; align-items: baseline; gap: 10px; margin-left: 30px; font: var(--fw-bold) 48px/1 var(--font-num); color: var(--c-ink); white-space: nowrap; }
.mfx.v14 .mtotal .mt-then:not(:empty)::before { content: "→"; margin: 0 10px 0 0; font-size: 24px; color: var(--c-ink-dim); }
.mfx.v14 .mtotal .mt-then[data-d]::after { content: attr(data-d); margin-left: 10px; font-size: 24px; }
.mfx.v14 .mtotal.up .mt-then { color: var(--t-ok-4); } .mfx.v14 .mtotal.dn .mt-then { color: var(--t-danger2-2); }
/* bigger cell marks (v14 bug list: +3, ≈10, →2 were ~9–10 px on screen) */
.mfx.v14 .sk .lv { font-size: 16px; } .mfx.v14 .sk .pa { font-size: 16px; } .mfx.v14 .sk .n.proj { font-size: 18px; opacity: .95; }
.mfx.v14 .sk.own { cursor: pointer; }
.mfx.v14 .sk.own:hover { box-shadow: var(--shadow-well), 0 0 0 var(--bw-strong) rgba(var(--c-accent-2-rgb), .6); }
.mfx.v14 .mhit-i { background: var(--t-paperink-6); border-color: var(--hc, var(--t-danger-3)); }
/* the plan on its target (+N green / −N red) */
.mfx.v14 .mbadge { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); z-index: 6; min-width: 56px; height: 26px; padding: 0 8px; border-radius: calc(var(--r-lg) * 13 / 14);
  display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 16px var(--font-num); white-space: nowrap; pointer-events: auto; }
.mfx.v14 .mbadge.up { background: var(--t-felt2-3); color: var(--t-ok-2); box-shadow: 0 0 0 var(--bw-strong) var(--t-ok-1), var(--shadow-2); }
.mfx.v14 .mbadge.dn { background: var(--t-paperink-7); color: var(--t-danger2-3); box-shadow: 0 0 0 var(--bw-strong) var(--t-danger-2), var(--shadow-2); }
.mfx.v14 .mbadge.plate { position: absolute; left: auto; right: -20px; top: -14px; transform: none; }
.mfx.v14 .plate { position: relative; }
/* the header */
.mfx.v14 .ftop.mtop { height: 80px; gap: 20px; }
.mfx.v14 .mrnd { flex-direction: row; align-items: center; gap: 14px; padding-right: 20px; border-right: var(--bw) solid rgba(var(--c-accent-rgb), .2); }
.mfx.v14 .mrnd b { font: var(--fw-bold) 48px/1 var(--font-display); color: var(--t-ink-4); }
.mfx.v14 .mrnd > div { display: flex; flex-direction: column; gap: 3px; }
.mfx.v14 .mrnd-a { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink); white-space: nowrap; }
.mfx.v14 .mrule { position: relative; flex: 0 0 auto; background: none; box-shadow: none; padding: 0; height: auto; cursor: help; }
.mfx.v14 .mrule .crest { width: 44px; height: 44px; border-radius: var(--r-round); clip-path: none; background: radial-gradient(circle at 40% 30%, var(--t-surface2-11), var(--t-accentink-7)); box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--c-accent-rgb), .55); color: var(--c-accent-2-tx); }
.mfx.v14 .mrule .crest::before { display: none; }
.mfx.v14 .mrule .rline { overflow: visible; display: flex; align-items: center; gap: 8px; font-size: 24px; }
.mfx.v14 .mq { display: inline-flex; width: 18px; height: 18px; border-radius: var(--r-round); box-shadow: inset 0 0 0 1.5px rgba(var(--c-accent-rgb), .6); color: var(--c-accent-tx); font: var(--fw-bold) 14px var(--font-body); font-style: normal; align-items: center; justify-content: center; }
.mfx.v14 .mrule-pop { display: none; position: absolute; left: -10px; top: 58px; width: 520px; z-index: 50; padding: 14px 16px; border-radius: calc(var(--r-lg) * 6 / 7); white-space: normal; cursor: default;
  background: rgba(var(--t-bg2-8-rgb), .98); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .6), 0 14px 34px rgba(var(--c-shadow-rgb), .75); }
.mfx.v14 .mrule:hover .mrule-pop, .mfx.v14 .mrule:focus-visible .mrule-pop { display: block; }
.mfx.v14 .mrule-pn { margin-top: 4px; font: var(--fw-bold) 24px/1.1 var(--font-display); color: var(--t-ink-4); }
.mfx.v14 .mrule-pt { margin-top: 6px; font: var(--fw-med) 16px/1.4 var(--font-body); color: var(--c-ink); }
/* the turn's three actions (owner 18.10): names in the indicator, a plaque for all three (hover, focus or a tap), Закалка closes the other machines */
.mfx.v14 .mph { position: relative; outline: none; }
.mfx.v14 .mph:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; } /* the three actions' plaque reached by Tab shows where the focus is (audit 30.10) */
.mfx.v14 .mph.hasnat { cursor: help; }
.mfx.v14 .mph span.nat-melt.on { color: var(--t-gold-6); box-shadow: inset 0 0 0 var(--bw-strong) var(--t-gold-6), 0 0 12px rgba(var(--t-gold-6-rgb), .45); }
.mfx.v14 .mph span.nat-forge.on { color: var(--c-accent-2); }
.mfx.v14 .mph span.nat-temper.on { color: var(--t-info-2); box-shadow: inset 0 0 0 var(--bw-strong) var(--t-info-2), 0 0 12px rgba(var(--t-info-2-rgb), .4); }
.mfx.v14 .mnat-pop { display: none; position: absolute; right: 0; top: 40px; width: 496px; max-width: calc(100vw - 24px); box-sizing: border-box; z-index: 60; padding: 14px 16px; border-radius: var(--r-sm); cursor: default; text-align: left; letter-spacing: normal; text-transform: none;
  background: rgba(var(--t-bg2-8-rgb), .98); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .28), 0 14px 34px rgba(var(--c-shadow-rgb), .75); flex-direction: column; gap: 10px; font: var(--fw-med) 14px/1.35 var(--font-body); color: var(--c-ink); white-space: normal; }
.mfx.v14 .mph.hasnat:hover .mnat-pop, .mfx.v14 .mph.hasnat:focus .mnat-pop, .mfx.v14 .mph.hasnat:focus-within .mnat-pop { display: flex; }
.mfx.v14 .mnat-cap { font: var(--fw-semi) 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-2); }
.mfx.v14 .mnat-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--r-sm); opacity: .8; }
.mfx.v14 .mnat-row.now { opacity: 1; background: rgba(var(--t-info-2-rgb), .12); box-shadow: inset 0 0 0 var(--bw) var(--t-info-2); }
.mfx.v14 .mnat-row.nat-melt.now { background: rgba(var(--t-gold-6-rgb), .12); box-shadow: inset 0 0 0 var(--bw) var(--t-gold-6); }
.mfx.v14 .mnat-row.nat-forge.now { background: rgba(var(--c-accent-2-rgb), .12); box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2); }
.mfx.v14 .mnat-name { font: var(--fw-bold) 20px/1.2 var(--font-display); }
.mfx.v14 .mnat-name em { font: var(--fw-med) 14px var(--font-body); font-style: normal; color: var(--c-ink-2); }
.mfx.v14 .mnat-row.nat-melt .mnat-name { color: var(--t-gold-6); }
.mfx.v14 .mnat-row.nat-forge .mnat-name { color: var(--c-accent-2); }
.mfx.v14 .mnat-row.nat-temper .mnat-name { color: var(--t-info-2); }
.mfx.v14 .mnat-line b { font-weight: var(--fw-semi); }
/* phones: the stage is scaled down to ~0.4, so the plaque is drawn larger to stay readable on the screen (≈11 px text) */

.mfx.v14 .mnat-line.k-can b { color: var(--c-ok); }
.mfx.v14 .mnat-line.k-free b { color: var(--c-gold); }
.mfx.v14 .mnat-line.k-no b { color: var(--c-danger-2); }
.mfx.v14 .board.temper { box-shadow: inset 0 0 120px rgba(var(--t-info-2-rgb), .12); }
/* Закалка: the other machines are framed in frost steel — a thin rim round the whole machine, the cells stay fully readable (owner 18.10) */
.mfx.v14 .mach.frozen { border-radius: calc(var(--r-lg) * 8 / 7); box-shadow: 0 0 0 var(--bw) rgba(var(--t-info-2-rgb), .55), 0 0 0 5px rgba(var(--t-info-2-rgb), .1), 0 0 22px rgba(var(--t-info-2-rgb), .22); transition: box-shadow .5s ease; }
.mfx.v14 .mph { gap: 0; }
.mfx.v14 .mph span { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: calc(var(--r-lg) * 15 / 14); font: var(--fw-bold) 14px var(--font-body); letter-spacing: .1em; }
.mfx.v14 .mph span.on { box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); background: none; color: var(--c-accent-2-tx); }
.mfx.v14 .mph i { width: 14px; height: 2px; background: var(--c-line); }
.mfx.v14 .mkey { font: var(--fw-bold) 14px var(--font-num); padding: 1px 5px; border-radius: calc(var(--r-xs) * 3 / 4); box-shadow: inset 0 0 0 var(--bw) currentColor; opacity: .7; letter-spacing: 0; text-transform: none; }
/* the turn medallion: a clock ring around a disc; dark while it is only the clock, brass + glow when it does something */
.mfx.v14 .mmed { position: absolute; right: 28px; bottom: 24px; z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.mfx.v14 .mmed > * { pointer-events: auto; }
.mfx.v14 .mmed-head { text-align: right; max-width: 300px; text-shadow: 0 2px 6px var(--c-shadow), 0 0 2px var(--c-shadow); }
.mfx.v14 .mmed-title { font: var(--fw-bold) 24px/1 var(--font-display); color: var(--t-ink-4); }
.mfx.v14 .mmed-line { margin-top: 5px; font: var(--fw-semi) 16px/1.3 var(--font-body); color: rgba(var(--c-ink-rgb), .9); white-space: pre-line; }
.mfx.v14 .mmed-row { display: flex; align-items: flex-end; gap: 16px; }
.mfx.v14 .mmed-top { pointer-events: auto; display: flex; justify-content: flex-end; }
.mfx.v14 .mmed-smalls { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-bottom: 4px; } /* a column beside the disc: the plates never reach the hand (owner 07.10) */
.mfx.v14 .mmed-sw { display: flex; }
.mfx.v14 .mmed-sm { position: relative; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: var(--r-sm); border: 0; cursor: pointer; display: flex; align-items: center; color: var(--c-accent-2-tx);
  background: radial-gradient(circle at 40% 30%, var(--t-felt-3), var(--c-surface-3)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-line-strong), 0 6px 14px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mmed-sm:hover, .mfx.v14 .mmed-sm.hot { box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 16px rgba(var(--c-accent-2-rgb), .4), 0 6px 14px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mmed-sm.off { opacity: .35; cursor: default; }
.mfx.v14 .mmed-si { line-height: 0; }
.mfx.v14 .mmed-bd { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; font: var(--fw-bold) 13px/20px var(--font-num); text-align: center; color: var(--c-on-accent); background: var(--c-accent-2); box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), .6); pointer-events: none; }
.mfx.v14 .mmed-sm:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; }
.mfx.v14 .mmed-dial { position: relative; width: 148px; height: 148px; flex: none; }
.mfx.v14 .mmed-ring { position: absolute; left: 0; top: 0; transform: rotate(-90deg); }
.mfx.v14 .mmed-track { fill: rgba(var(--t-bg2-14-rgb), .75); stroke: rgba(var(--t-ink-17-rgb), .1); stroke-width: 8; }
.mfx.v14 .mmed-arc { fill: none; stroke: rgba(var(--c-accent-2-rgb), .55); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .9s linear; } /* calm until the last 10 s (owner 07.10) */
.mfx.v14 .mmed-arc.warn { stroke: var(--t-danger-5); filter: drop-shadow(0 0 6px var(--t-danger-5)); }
.mfx.v14 .mmed-disc { position: absolute; left: 16px; top: 16px; width: 116px; height: 116px; border-radius: var(--r-round); border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; text-align: center; }
.mfx.v14 .mmed-disc.off { cursor: default; color: var(--c-ink-2); background: radial-gradient(circle at 40% 30%, var(--t-surface2-12), var(--t-surface-5)); box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--c-accent-rgb), .35), 0 8px 18px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mmed-disc.live { cursor: pointer; color: var(--c-on-accent); background: radial-gradient(circle at 40% 30%, var(--t-accent2-3), var(--c-accent) 55%, var(--c-accent-lo));
  box-shadow: inset 0 2px 0 rgba(var(--t-hi-1-rgb), .6), 0 0 0 var(--bw-strong) var(--c-accent-edge), 0 10px 26px var(--c-line-strong), 0 0 0 6px rgba(var(--c-accent-2-rgb), .18), 0 0 34px rgba(var(--c-accent-2-rgb), .55); }
.mfx.v14 .mmed-disc.live:hover { filter: brightness(1.08); }
.mfx.v14 .mmed-lb { font: var(--fw-bold) 16px/1.1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.mfx.v14 .mmed-disc.off .mmed-lb { font: var(--fw-bold) 18px/1 var(--font-num); letter-spacing: .06em; }
.mfx.v14 .mmed-sub { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.mfx.v14 .mmed-key { font: var(--fw-bold) 14px var(--font-num); padding: 1px 6px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 var(--bw) currentColor; opacity: .7; }
.mfx.v14 .mmed-badge { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); padding: 2px 10px; border-radius: var(--r-md); background: var(--t-bg-9); box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2); font: var(--fw-bold) 16px var(--font-num); color: var(--c-ink); white-space: nowrap; }
.mfx.v14 .mmed-badge.warn { color: var(--t-danger2-1); box-shadow: inset 0 0 0 var(--bw) var(--t-danger-5); }
/* the pills under the raised card */
.mfx.v14 .mpills { position: absolute; width: 640px; display: flex; justify-content: center; gap: 8px; z-index: 11; pointer-events: none; }
.mfx.v14 .mpill { pointer-events: auto; height: 34px; padding: 0 14px; border: 0; border-radius: calc(var(--r-lg) * 17 / 14); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink); background: rgba(var(--t-bg2-1-rgb), .94); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .4), 0 4px 12px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mpill[aria-disabled="true"] { cursor: default; }
.mfx.v14 .mpill.go { box-shadow: inset 0 0 0 1.5px var(--c-accent-2), 0 0 14px rgba(var(--c-accent-2-rgb), .35); }
.mfx.v14 .mpill .msg { color: var(--c-accent-2-tx); }
/* the capsule over my own cell */
.mfx.v14 .mcap { position: absolute; top: -54px; transform: translateX(-50%); z-index: 8; height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: calc(var(--r-lg) * 10 / 7); white-space: nowrap;
  background: rgba(var(--t-bg2-1-rgb), .96); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .45), 0 8px 20px rgba(var(--c-shadow-rgb), .7); }
.mfx.v14 .mcap::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: rgba(var(--t-bg2-1-rgb), .96); box-shadow: 1px 1px 0 rgba(var(--c-accent-2-rgb), .45); }
.mfx.v14 .mcap-i { height: 32px; padding: 0 12px; border: 0; border-radius: calc(var(--r-lg) * 8 / 7); display: inline-flex; align-items: center; gap: 6px; background: none; cursor: pointer; font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink); }
.mfx.v14 .mcap-i .msg { color: var(--c-accent-2-tx); }
.mfx.v14 .mcap-i:hover { background: rgba(var(--c-accent-2-rgb), .12); }
.mfx.v14 .mcap-i.danger { box-shadow: inset 0 0 0 1.5px var(--t-danger-2); color: var(--t-danger2-3); }
.mfx.v14 .mcap-i.danger .msg { color: var(--t-danger2-2); }
.mfx.v14 .mcap-i.danger.hot { box-shadow: inset 0 0 0 var(--bw-strong) var(--t-danger-2), 0 0 10px rgba(var(--t-danger-2-rgb), .45); }
.mfx.v14 .mcap.del { top: -96px; }
.mfx.v14 .mcap-q { padding: 0 10px; font: var(--fw-med) 14px var(--font-body); color: var(--c-ink); }
/* merge by dragging */
.mghost { position: fixed; z-index: 100; pointer-events: none; color: var(--c-accent-2-tx); opacity: .9; filter: drop-shadow(0 10px 14px rgba(var(--c-shadow-rgb), .7)); line-height: 0; }
.mfx.v14 .sk.msrc > *:not(.mfree) { visibility: hidden; }
.mfx.v14 .sk.msrc { background: var(--t-c-bg-2) !important; box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--c-accent-2-rgb), .45) !important; outline: var(--bw-strong) dashed rgba(var(--c-accent-2-rgb), .45); outline-offset: -2px; }
.mfx.v14 .mfree { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); padding: 2px 8px; border-radius: calc(var(--r-md) * 9 / 10); background: rgba(var(--t-bg2-1-rgb), .92); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .5); font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink); white-space: nowrap; visibility: visible; }
.mfx.v14 .sk.mpart { box-shadow: var(--shadow-well), 0 0 0 var(--bw-strong) rgba(var(--c-accent-2-rgb), .55); }
.mfx.v14 .sk.mdrop { box-shadow: var(--shadow-well), 0 0 0 3px var(--t-c-ok-1), 0 0 18px rgba(var(--t-c-ok-1-rgb), .6); }
.mfx.v14 .sk.mdrop > *:not(.mfuture):not(.marrow) { visibility: hidden; }
body.mdragging .tip { display: none !important; }
.mfx.v14 .mfuture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--c); line-height: 0; opacity: .95; }
.mfx.v14 .marrow { position: absolute; left: 50%; top: -42px; transform: translateX(-50%); color: var(--t-ok-1); line-height: 0; filter: drop-shadow(0 0 6px var(--t-ok-1)); }
.mfx.v14 .marrow .msg path { stroke-width: 3.5; }
.mfx.v14 .mget { position: absolute; left: 1320px; top: 540px; width: 340px; z-index: 9; padding: 12px 14px; border-radius: var(--r-lg); background: rgba(var(--t-bg2-1-rgb), .95); box-shadow: inset 0 0 0 var(--bw) rgba(var(--t-ok-1-rgb), .55), 0 14px 30px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mget .mplq { margin: 6px 0 0; grid-template-columns: 56px 1fr; background: none; border: 0; box-shadow: none; padding: 0; }
.mfx.v14 .mget .mplq-sg { width: 56px; height: 56px; }
.mfx.v14 .mget-w { margin-top: 8px; padding-top: 8px; border-top: var(--bw) solid rgba(var(--c-accent-2-rgb), .15); font: var(--fw-semi) 14px var(--font-body); color: var(--t-ok-2); }
/* the dock (bottom left): one panel, two switches under it */
.mfx.v14 .mdock2 { position: absolute; left: 24px; bottom: 24px; width: 500px; z-index: 7; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.mfx.v14 .mdock2 > * { pointer-events: auto; }
.mfx.v14 .mdk-p { border-radius: var(--r-lg); padding: 8px 6px; background: rgba(var(--t-bg2-1-rgb), .92); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .28), 0 12px 30px rgba(var(--c-shadow-rgb), .55); }
.mfx.v14 .mdk-h { display: flex; align-items: center; padding: 0 8px 4px; }
.mfx.v14 .mdk-all { margin-left: auto; border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 5px; font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink-2); }
.mfx.v14 .mdk-all:hover { color: var(--c-accent-2-tx); }
.mfx.v14 .mdk-b { height: 196px; overflow: hidden; }
.mfx.v14 .mdk-b.rec { height: auto; }
.mfx.v14 .mjr { height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: calc(var(--r-md) * 4 / 5); font: var(--fw-med) 16px var(--font-body); color: var(--c-ink); white-space: nowrap; overflow: hidden; cursor: default; }
.mfx.v14 .mjr:hover { background: color-mix(in srgb, var(--sc, var(--c-accent)) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--sc, rgba(var(--c-accent-rgb), .4)); }
.mfx.v14 .mjr.hot { background: color-mix(in srgb, var(--sc, var(--c-accent)) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--sc, var(--c-accent)); }
.mfx.v14 .mjr.dim { opacity: .55; }
.mfx.v14 .mjr-t { overflow: hidden; text-overflow: ellipsis; }
.mfx.v14 .mjr-t > b:first-child { color: var(--sc); }
.mfx.v14 .mjr-dot { flex: none; width: 22px; height: 22px; border-radius: var(--r-round); background: var(--sc); display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 14px var(--font-display); color: var(--c-on-accent); }
.mfx.v14 .mjr-ic { flex: none; width: 22px; display: flex; justify-content: center; color: var(--c-accent-tx); line-height: 0; }
.mfx.v14 .mdk-sws { display: flex; gap: 10px; align-items: center; }
/* the piece playing now (owner 04.10): the dock column's first line, never under the hand fan */
.mfx.v14 .mdk-np { align-self: flex-start; max-width: 100%; padding: 3px 10px; border-radius: calc(var(--r-md) * 4 / 5); background: rgba(var(--c-well-rgb), .45); font: var(--fw-med) 14px var(--font-body); color: var(--c-accent-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfx.v14 .mdk-np:empty { display: none; }
.mfx.v14 .mdk-sw { height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: calc(var(--r-lg) * 9 / 7); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: var(--fw-semi) 16px var(--font-body);
  color: var(--c-ink); background: rgba(var(--t-bg2-1-rgb), .92); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .28), 0 12px 30px rgba(var(--c-shadow-rgb), .55); }
.mfx.v14 .mdk-sw .msg { color: var(--c-accent-2-tx); }
.mfx.v14 .mdk-sw.on { background: rgba(var(--c-accent-rgb), .12); color: var(--c-ink); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.mfx.v14 .mdk-sw.on .msg { color: var(--c-on-accent); }
.mfx.v14 .mrc2 { display: grid; grid-template-columns: 100px repeat(4, 52px); gap: 6px 14px; align-items: center; padding: 2px 8px 4px; }
.mfx.v14 .mrc2-h { justify-self: center; text-align: center; font: var(--fw-bold) 14px var(--font-body); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.mfx.v14 .mrc2-r { font: var(--fw-bold) 14px var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.mfx.v14 .mrc2-x { width: 52px; height: 52px; border-radius: calc(var(--r-sm) * 7 / 6); display: flex; align-items: center; justify-content: center; color: var(--c); line-height: 0; cursor: help;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 19%, transparent), color-mix(in srgb, var(--c) 5%, transparent)); box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c) 47%, transparent); }
.mfx.v14 .mrc2-x.n2, .mfx.v14 .mrc2-x.n3 { flex-wrap: wrap; gap: 1px; align-content: center; } /* 2–3 class cells for one mix */
.mfx.v14.mfocus .sk:not(.mhov):not(.mattk):not(.mtgt):not(.mally):not(.aimed) .lv.aim { opacity: .25; }
.mfx.v14 .mrc2-x:hover { box-shadow: inset 0 0 0 var(--bw) var(--c), 0 0 14px color-mix(in srgb, var(--c) 67%, transparent); }
.mfx.v14 .mrec-card { display: none; }
.mfx.v14 .mrec-card.on { display: block; }
.mfx.v14 .mrec-card .mplq { margin: 0; grid-template-columns: 56px 1fr; }
.mfx.v14 .mrec-card .mplq-sg { width: 56px; height: 56px; }
/* the journal's light on the table */
.mfx.v14 .mjl { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mfx.v14 .sk.jlit { box-shadow: var(--shadow-well), 0 0 0 3px var(--jc), 0 0 18px var(--jc); }
.mfx.v14 [id^="mach-"].jtgt { border-radius: calc(var(--r-lg) * 8 / 7); box-shadow: 0 0 0 3px var(--t-danger-2), 0 0 18px rgba(var(--t-danger-2-rgb), .6); }
/* «весь журнал» */
.modal.midlog2 { width: 960px; }
.modal.midlog2 .mlog2-f { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 10px; }
.modal.midlog2 .mlog2-b { height: 30px; padding: 0 12px; border: 0; border-radius: calc(var(--r-lg) * 15 / 14); cursor: pointer; font: var(--fw-semi) 14px var(--font-body); color: var(--sc, var(--c-ink-2)); background: none; box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .17); }
.modal.midlog2 .mlog2-b.on { background: rgba(var(--c-ink-rgb), .06); color: var(--sc, var(--c-ink)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.modal.midlog2 .mlog2 { max-height: 600px; overflow-y: auto; }
.modal.midlog2 .cap { margin: 14px 0 4px; }
.modal.midlog2 .mjr { display: flex; gap: 10px; align-items: center; padding: 7px 6px; border-bottom: var(--bw) solid rgba(var(--c-accent-rgb), .1); font: var(--fw-med) 16px/1.35 var(--font-body); }
.modal.midlog2 .mjr.dim { opacity: .6; }
.modal.midlog2 .mjr-t > b:first-child { color: var(--sc); }
.modal.midlog2 .mjr-dot { flex: none; width: 20px; height: 20px; border-radius: var(--r-round); background: var(--sc); display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 14px var(--font-display); color: var(--c-on-accent); }
.modal.midlog2 .mjr-ic { flex: none; width: 20px; display: flex; justify-content: center; color: var(--c-accent-tx); line-height: 0; }
.modal.midlog2 .row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
/* «Статистика» (the log window's second tab, owner 05.10): five light sections, the seat colours, figures in --num */
.modal.midlog2 .mlog2-tabs { margin: -4px 0 12px; }
.modal.midlog2 .mst-sec { margin-bottom: 18px; }
.modal.midlog2 .mst-sec > .cap { margin: 4px 0 8px; }
.mst .mst-legend { display: flex; gap: 14px; flex-wrap: wrap; font: var(--fw-med) 14px var(--font-body); color: var(--c-ink-2); margin-bottom: 6px; }
.mst .mst-legend i { display: inline-block; width: 10px; height: 10px; border-radius: calc(var(--r-xs) / 2); margin-right: 6px; background: var(--sc); }
.mst .mst-bars { display: flex; gap: 10px; align-items: flex-end; height: 120px; padding: 0 2px 0; border-bottom: var(--bw) solid rgba(var(--c-accent-rgb), .25); overflow-x: auto; overflow-y: hidden; }
.mst .mst-bg { flex: 1 0 auto; min-width: 30px; height: 100%; display: flex; flex-direction: column; align-items: center; }
.mst .mst-bb { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.mst .mst-bar { flex: 1; max-width: 18px; min-width: 4px; border-radius: calc(var(--r-xs) / 2) calc(var(--r-xs) / 2) 0 0; background: var(--sc); opacity: .55; }
.mst .mst-bar.me { opacity: 1; box-shadow: 0 0 6px var(--sc); }
.mst .mst-bl { font: var(--fw-semi) 14px var(--font-num); color: var(--c-ink-2); padding-top: 3px; }
.mst .mst-t { display: grid; font: var(--fw-med) 14px/1.3 var(--font-body); }
.mst .mst-t7 { grid-template-columns: 70px repeat(6, 1fr); margin-top: 10px; }
.mst .mst-t9 { grid-template-columns: 2.3fr .7fr .7fr .8fr 1.1fr 1.3fr 1.3fr .9fr .8fr; }
.mst .mst-t4 { grid-template-columns: 2fr .6fr .7fr .7fr; }
.mst .mst-t3 { grid-template-columns: 2fr .7fr .7fr; }
.mst .mst-th, .mst .mst-tr { display: contents; }
.mst .mst-th > * { padding: 4px 6px; font: var(--fw-semi) 14px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-tx); text-align: left; border-bottom: var(--bw) solid rgba(var(--c-accent-rgb), .25); }
.mst .mst-tr > * { padding: 5px 6px; border-bottom: var(--bw) solid rgba(var(--c-accent-rgb), .1); font-family: var(--font-num); display: flex; align-items: center; gap: 4px; min-width: 0; }
.mst .mst-tr > b { color: var(--c-ink); }
.mst .mst-tr .up { color: var(--c-ok); }
.mst .mst-sort { padding: 4px 6px; border: 0; background: none; cursor: pointer; font: var(--fw-semi) 14px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-tx); text-align: left; border-bottom: var(--bw) solid rgba(var(--c-accent-rgb), .25); }
.mst .mst-sort.on { color: var(--c-accent-2-tx); text-decoration: underline; text-underline-offset: 3px; }
.mst .mst-name { gap: 8px; font-family: var(--font-body); }
.mst .mst-name > span { display: flex; flex-direction: column; min-width: 0; }
.mst .mst-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst .mst-name small { font: var(--fw-med) 14px var(--font-body); color: var(--c-ink-2); }
.mst .mst-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--sc); }
.mst .mst-dot.other { background: var(--c-ink-dim); }
.mst .mst-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 22px; }
.mst .mst-sub { font-size: 14px; margin: 0 0 6px; }
.mst .mst-foes { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; font: var(--fw-med) 14px/1.3 var(--font-body); }
.mst .mst-fn { color: var(--sc); font-family: var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst .mst-fb { gap: 8px; }
.mst .mst-tk { flex: 1; height: 8px; border-radius: var(--r-xs); background: rgba(var(--c-accent-rgb), .12); overflow: hidden; }
.mst .mst-tk i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--sc); }
.mst .mst-fb.in .mst-tk i { background: var(--c-danger); }
.mst .mst-fb > b { min-width: 28px; text-align: right; }
.mst .mst-chips { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 14px; }
.mst .mst-chl { fill: none; stroke: var(--c-accent-2); stroke-width: 2; stroke-linejoin: round; }
.mst .mst-note { font-size: 14px; margin-top: 4px; }
/* the glossary «Как устроен бой» */
.modal.midgloss { width: 1380px; max-width: 1380px; padding: 22px 30px; }
.modal.midgloss h2 { margin-bottom: 10px; }
.modal.midgloss .mgl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.modal.midgloss .mgl-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.modal.midgloss .mgl-t { height: 38px; padding: 0 12px; border-radius: calc(var(--r-lg) * 19 / 14); text-transform: none; letter-spacing: 0; font: var(--fw-semi) 16px var(--font-body); }
.modal.midgloss .mgl-n { font: var(--fw-bold) 14px var(--font-num); opacity: .7; }
.modal.midgloss .mgl-find { margin-left: auto; height: 36px; width: 250px; border-radius: calc(var(--r-lg) * 9 / 7); border: 0; padding: 0 14px; font: var(--fw-med) 14px var(--font-body); color: var(--c-ink); background: rgba(var(--c-well-rgb), .3); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .17); }
.modal.midgloss .mgl-body { height: 760px; overflow-y: auto; padding-right: 6px; } /* one height for every tab: the tabs never jump (09.10) */
.modal.midgloss .mgl-sec { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 4px 10px; flex-wrap: wrap; }
.modal.midgloss .mgl-ss { font: var(--fw-med) 14px var(--font-body); color: var(--c-ink-2); }
.modal.midgloss .mgl-grid { display: grid; gap: 4px 14px; }
.modal.midgloss .mgl-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .modal.midgloss .mgl-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal.midgloss .mgl-e { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: var(--r-md); }
.modal.midgloss .mgl-e[hidden], .modal.midgloss .mgl-w[hidden] { display: none; }
.modal.midgloss .mgl-sg { width: 44px; height: 44px; border-radius: calc(var(--r-md) * 9 / 10); }
.modal.midgloss .mgl-l { font: var(--fw-bold) 24px var(--font-display); }
.modal.midgloss .mgl-bd b { font: var(--fw-bold) 24px/1.1 var(--font-display); }
.modal.midgloss .mgl-bd small { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink-2); }
.modal.midgloss .mgl-bd p { margin: 3px 0 0; font: var(--fw-med) 16px/1.4 var(--font-body); color: var(--c-ink); }
.modal.midgloss .mgl-steps { display: flex; gap: 10px; align-items: flex-start; padding: 14px 10px; border-radius: var(--r-lg); background: rgba(var(--c-accent-2-rgb), .04); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .15); }
.modal.midgloss .mgl-st { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.modal.midgloss .mgl-st b { font: var(--fw-bold) 24px var(--font-display); }
.modal.midgloss .mgl-st small { font: var(--fw-med) 14px var(--font-body); color: var(--c-ink-2); }
.modal.midgloss .mgl-si { width: 46px; height: 46px; border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; color: var(--c-accent-2-tx); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .5); background: rgba(var(--c-accent-2-rgb), .06); }
.modal.midgloss .mgl-ar { color: var(--c-ink-dim); font-size: 24px; padding-top: 14px; }
.modal.midgloss .mgl-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 14px; }
.modal.midgloss .mgl-w { padding: 6px 10px; display: flex; flex-direction: column; }
.modal.midgloss .mgl-w b { font: var(--fw-bold) 18px var(--font-display); }
.modal.midgloss .mgl-w small { font: var(--fw-med) 14px/1.3 var(--font-body); color: var(--c-ink-2); }
.modal.midgloss .mgl-more, .modal.midgloss .mgl-none { margin: 10px 0 0; text-align: center; font: var(--fw-med) 14px var(--font-body); color: var(--c-ink-dim); }
.modal.midgloss .mgl-chips { display: inline-flex; gap: 8px; }
.modal.midgloss .mgl-chip { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-lg); cursor: pointer; font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink-2); background: none; box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.modal.midgloss .mgl-chip.on { background: rgba(var(--c-accent-2-rgb), .16); color: var(--c-accent-2-tx); box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2); }
/* the cards: no «Куда» line or icons (owner 02.10: «пусть не показываются») */
.mfx .card .tg { display: none; }
/* the end screen: the name column no longer runs into «why» (v14 bug list) */
.mfx .endscr .eplaces { width: 1000px; }
.mfx .endscr .erow { grid-template-columns: 64px 66px minmax(0, 400px) 1fr 80px; column-gap: 14px; }
.mfx .endscr .erow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a rated table (rating layer C1; canvas R05): a points column after the chips, and the rank panel over the survey note */
.mfx .endscr .eplaces.rated { width: 1000px; }
.mfx .endscr .eplaces.rated .erow { grid-template-columns: 54px 60px minmax(0, 340px) 1fr 66px 84px; column-gap: 12px; }
.endscr .erow .dp { font: var(--fw-bold) 28px var(--font-num); text-align: right; color: var(--c-ink-2); }
.endscr .erow .dp.up, .mrated .up { color: var(--c-ok); } .endscr .erow .dp.down, .mrated .down { color: var(--c-danger); }
.endscr .eplaces.rated .chcap { display: flex; gap: 30px; justify-content: flex-end; margin-right: 0; } .endscr .dpcap { min-width: 84px; text-align: right; }
.mfx .endscr .eside .mrated { margin-bottom: 18px; padding: 22px 26px; border-radius: var(--r-md); background: rgba(var(--t-bg2-12-rgb), .72); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .3); }
.mrated .mr-body { display: flex; align-items: center; gap: 22px; margin-top: 10px; } .mrated .mr-lines { display: flex; flex-direction: column; gap: 4px; font: var(--fw-med) 18px/1.35 var(--font-body); }
.mrated .mr-tier { display: flex; align-items: center; gap: 12px; font: var(--fw-bold) 30px var(--font-display); } .mrated .mr-pts b { font: var(--fw-bold) 26px var(--font-num); } .mrated .mr-change { color: var(--c-accent-2-tx); }
/* the house's seal beside a ladder bot's name: one small brass disc wherever the name is drawn (seatlabel.ts) */
.hseal { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-left: .5em; border-radius: 50%; vertical-align: .1em; font: var(--fw-bold) .72em/1 var(--font-display); color: var(--c-accent-2); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); background: rgba(var(--c-accent-rgb), .12); cursor: pointer; }

/* the ladder (ladderscreen.ts, canvas R04) and the member card (playercard.ts, R06): theme tokens only */
.lad-body { position: absolute; left: 96px; right: 96px; top: 150px; bottom: 40px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.lad-bar { display: flex; align-items: center; gap: 24px; }
.lad-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .96), rgba(var(--t-bg-7-rgb), .96)); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .17), 0 18px 40px var(--c-shadow); }
.lad-h { display: flex; align-items: baseline; gap: 16px; margin: 10px 0 2px; font: var(--fw-bold) 22px var(--font-display); color: var(--c-ink); }
.lad-h .dim { font: var(--fw-med) 15px var(--font-body); }
.lad-more { margin: 0 0 4px 62px; }
.lad-morebtn { align-self: center; }
.lad-foot { display: flex; align-items: baseline; gap: 28px; }
.lad-mine { margin: 0; font: var(--fw-bold) 22px var(--font-display); color: var(--c-ink); }
.lad-foot .dim { margin: 0; font-size: 15px; }
.modal.pcardwin { min-width: 640px; max-width: 760px; }
.pc-head { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; }
.pc-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-name { font: var(--fw-bold) 34px/1.1 var(--font-display); color: var(--c-ink); }
.pc.special .pc-name { color: var(--c-accent-2-tx); }
.pc-tag { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.pc-rank { display: flex; align-items: center; gap: 14px; font: var(--fw-bold) 22px var(--font-display); color: var(--c-accent-2-tx); }
.pc-pts { font: var(--fw-bold) 22px var(--font-num); color: var(--c-ink); }
.pc-line { margin: 0 0 10px; font-style: italic; color: var(--c-ink-2); }
.pc-rows { display: flex; flex-direction: column; gap: 2px; }
.pc-row { display: flex; gap: 20px; padding: 6px 0; border-top: 1px solid rgba(var(--c-ink-rgb), .12); }
.pc-k { flex: none; width: 190px; font: var(--fw-semi) 14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-2); padding-top: 3px; }
.pc-v { flex: 1; min-width: 0; }
.pc-note { margin: 12px 0 0; font-size: 15px; }

/* ---- the pick before the fight in two steps (owner 05.10, canvas «pickcanvas» Main + CellsA «two-rows») */
/* step 1: five large class plaques, the chosen one lifts in its class colour (--hue, midpickdata CLASS_HUE) */
.mfx.v14.mpick .mpk1 { position: absolute; left: 60px; right: 60px; top: 100px; bottom: 30px; z-index: 3; display: flex; flex-direction: column; gap: 20px; }
.mfx.v14.mpick .mpk1-head { display: flex; align-items: baseline; gap: 24px; }
.mfx.v14.mpick .mpk1-t { margin: 0; font: var(--fw-bold) 48px/1 var(--font-display); letter-spacing: .02em; color: var(--t-ink-1); text-shadow: 0 2px 8px var(--c-shadow); }
.mfx.v14.mpick .mpk1-sub { font: var(--fw-med) 24px var(--font-body); color: var(--t-ink2-4); }
.mfx.v14.mpick .mpk1-note { margin-left: auto; font: var(--fw-med) 18px var(--font-body); color: var(--t-ink2-5); }
/* six class plaques in one row (Кукловод 05.10): narrower plaques, smaller stars and lines */
/* step 1 as a list of builds (owner 07.10): compact cards in a grid, the chosen one opened below */
/* step 1 (owner 08.10: «верни те большие плашки»): the five class builds as big plates, the chosen one lifts in its class
   colour (--hue); the player's own builds and «Новая сборка» in a strip under them */
/* no entrance on the pick (owner 23.10): it appears in place; the screen-level settle (scr-in) is off for it too */
.screen.scr-in.mpick { animation: none; }
/* (history) step 1 entered with the screen itself (one settle, owner 08.10: «два раза идёт прогрузка анимации» — the pick paints twice
   at once and per-plate rises replayed); step 2 lets the hand cells rise */
/* step 2: a placed cell leaves by its ✕; the slot a dragged cell is over lifts */
.mfx.v14.mpick .mpk-out { position: absolute; top: -8px; right: -8px; z-index: 3; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font: var(--fw-bold) 14px/1 var(--font-body); color: var(--c-ink); background: var(--c-surface-3); box-shadow: 0 0 0 2px var(--c-bg), inset 0 0 0 1px var(--c-line-strong); opacity: 0; transition: opacity .15s; }
.mfx.v14.mpick .sk:hover .mpk-out, .mfx.v14.mpick .mpk-out:focus-visible { opacity: 1; }
.mfx.v14.mpick .mpk-out:hover { color: var(--c-paper); background: var(--c-danger); }
.mfx.v14.mpick .sk.mdrop { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--c-accent-2), 0 0 26px rgba(var(--c-accent-2-rgb), .6); }
.mfx.v14.mpick.mpk-dragging .sk.legal, .mfx.v14.mpick.mpk-dragging [data-pslot] { cursor: grabbing; }
.mpk-ghost { position: fixed; z-index: 1000; pointer-events: none; }
.mfx.v14.mpick .mpk-hc { cursor: grab; touch-action: none; }
.mfx.v14.mpick .mpk1-crest { flex: none; width: 96px; height: 96px; border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; color: var(--hue);
  background: rgba(var(--c-well-rgb), .35); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--hue) 60%, transparent); }
.mfx.v14.mpick .mpk1-q { font: italic var(--fw-med) 18px/1.2 var(--font-body); color: var(--hue); }
.mfx.v14.mpick .mpk-fp { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mfx.v14.mpick .mpk-fp .tag { font-size: 14px; color: var(--c-accent-tx); text-transform: none; letter-spacing: .02em; box-shadow: inset 0 0 0 var(--bw) var(--c-line); cursor: help; }
.mfx.v14.mpick .mpk1-chosen { font: var(--fw-med) 24px var(--font-body); color: var(--t-ink2-5); }
.mfx.v14.mpick .mpk1-chosen b { color: var(--t-ink-1); }
.mfx.v14.mpick .mpk-clock { font: var(--fw-med) 18px var(--font-body); color: var(--c-ink-2); }
.mfx.v14.mpick .mpk-clock b { font: var(--fw-bold) 24px var(--font-num); color: var(--c-ink); }
/* step 2: the felt carries my class; 4–5 seats: the table shrinks left so the side machines stay clear of the right column */
.mfx.v14.mpick .mpk-felt { position: absolute; left: 584px; top: 310px; width: 752px; height: 232px; display: flex; align-items: center; justify-content: center; gap: 26px; }
.mfx.v14.mpick .mpk-felt .mpk1-crest { width: 76px; height: 76px; }
.mfx.v14.mpick .mpk-fc { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mfx.v14.mpick .mpk-fn { font: var(--fw-bold) 34px/1 var(--font-display); color: var(--t-ink-1); cursor: help; }
.mfx.v14.mpick .mpk-fc .mpk1-q { font-size: 18px; }
/* the pick's table stands exactly where the fight's does (owner 23.10): no shift, no scale on .board */
.mfx.v14.mpick #mid-pick-recipes { width: fit-content; max-width: 500px; }
.mfx.v14.mpick .mpk-here { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 24px var(--font-num); color: var(--c-accent-2-tx); opacity: .8; pointer-events: none; }
/* the hand: 12 base cells, two rows of six, left of the right column (owner 05.10: the old fan ran under the column) */
.mfx.v14.mpick .mpk-hand { position: absolute; left: 540px; right: 24px; bottom: 24px; z-index: 4; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mfx.v14.mpick .mpk-hc { position: relative; height: 112px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 8px; border: 0; border-radius: calc(var(--r-lg) * 6 / 7); text-align: left;
  color: var(--t-ink-1); cursor: pointer; background: rgba(var(--t-bg-10-rgb), .92); box-shadow: inset 0 4px 0 var(--c), inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .11), 0 6px 14px rgba(var(--c-shadow-rgb), .45); }
.mfx.v14.mpick .mpk-hc:hover, .mfx.v14.mpick .mpk-hc:focus-visible { outline: none; box-shadow: inset 0 4px 0 var(--c), inset 0 0 0 var(--bw) var(--c-accent), 0 8px 18px rgba(var(--c-shadow-rgb), .5); }
.mfx.v14.mpick .mpk-hc.on { background: rgba(var(--t-surface2-14-rgb), .95); box-shadow: inset 0 4px 0 var(--c), inset 0 0 0 var(--bw-strong) var(--c-warn), 0 0 18px rgba(var(--c-warn-rgb), .35); }
.mfx.v14.mpick .mpk-hc.dim { opacity: .45; cursor: default; }
.mfx.v14.mpick .mpk-hc-h { display: flex; align-items: center; gap: 8px; }
.mfx.v14.mpick .mpk-hc-h b { flex: 1; min-width: 0; font: var(--fw-bold) 24px/1 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfx.v14.mpick .mpk-hc-s { flex: none; line-height: 0; color: var(--c); }
.mfx.v14.mpick .mpk-hc .mkey { flex: none; font: var(--fw-bold) 14px var(--font-num); padding: 1px 6px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 var(--bw) currentColor; opacity: .5; }
.mfx.v14.mpick .mpk-hc-t { font: var(--fw-med) 16px/1.3 var(--font-body); color: var(--t-paper-4); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* the fixed right column: the round rule, what my class merges, the aiming, «N из 3», «Готов» */
.mfx.v14.mpick .mpk-side { position: absolute; right: 24px; top: 96px; bottom: 330px; width: 387px; z-index: 5; display: flex; flex-direction: column; gap: 14px; }
.mfx.v14.mpick .mpk-box { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: calc(var(--r-lg) * 8 / 7); background: rgba(var(--t-bg2-6-rgb), .82); box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.mfx.v14.mpick .mpk-box .cap { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--t-ink2-9); }
.mfx.v14.mpick .mpk-box p { margin: 0; font: var(--fw-med) 16px/1.4 var(--font-body); color: var(--t-paper-4); }
.mfx.v14.mpick .mpk-box p.dim { font-size: 14px; color: var(--t-ink2-10); }
.mfx.v14.mpick .mpk-box.aim { box-shadow: inset 0 0 0 var(--bw-strong) var(--t-danger-1), 0 0 22px rgba(var(--t-danger-1-rgb), .25); }
.mfx.v14.mpick .mpk-box.aim > b { font: var(--fw-bold) 24px/1.15 var(--font-display); color: var(--t-ink-6); }
.mfx.v14.mpick .mpk-box .row { display: flex; gap: 12px; }
.mfx.v14.mpick .mpk-bar { position: absolute; left: 540px; right: 24px; bottom: 270px; z-index: 4; display: flex; align-items: center; gap: 12px; }
.mfx.v14.mpick .mpk-bar .mpk-go { flex: none; padding: 10px 28px; font-size: 24px; }
.mfx.v14.mpick .mpk-count { flex: 1; display: flex; justify-content: flex-start; align-items: baseline; gap: 24px; font: var(--fw-semi) 24px var(--font-body); color: var(--t-ink-1); text-shadow: 0 1px 4px var(--c-shadow); }
/* an enemy's slot my start cell will hit (owner 04.10: the arrow is set on the table, as in the fight) */
.mfx.v14.mpick .sk.mpk-tgt { box-shadow: var(--shadow-well), 0 0 0 var(--bw-strong) rgba(var(--t-c-danger-1-rgb), .7), 0 0 16px rgba(var(--t-c-danger-1-rgb), .35); }
/* the room before a v14 fight: the same stadium felt as the fight itself (owner: one shape, no ovals) */
/* readability pass (playtest 02.10): bet chip numbers, button labels and key hints bigger; lining digits in titles;
   room between a long medallion line and the seconds badge */
.mfx.v14 .mmed { gap: 24px; }
.mfx.v14 .mmed-title, .mfx.v14 .mmed-line { font-variant-numeric: lining-nums; }

.mfx.v14 .mmed-key { font-size: 14px; opacity: .85; }
.mfx.v14 .hand .card { width: 176px; } /* the fight fan, centred on the table between the dock and the medallion (midscreen FAN) */
.tip .ctip { display: grid; gap: 6px; max-width: 460px; text-align: left; } /* a class's tooltip: tactic, passives, cards */
.tip .ctip .cap { margin-top: 6px; padding-top: 6px; border-top: var(--bw) solid rgba(var(--c-accent-2-rgb), .15); }
.tip .ctip-h b { font: var(--fw-semi) 18px var(--disp, serif); color: var(--c-ink); }
.tip .ctip-i { display: grid; gap: 2px; } .tip .ctip-i > b { justify-self: start; } .tip .ctip-n { color: var(--gold, var(--c-accent-2-tx)); }
.tip .ctip-t { font: var(--fw-med) 14px/1.4 var(--font-body); color: var(--c-ink); }

/* the mover's light (owner 03.10: «не обводкой — сзади жёлтое пусть светится, светом»): a warm glow behind their
   machine that slides to whoever moves next */
.mfx.v14 .mturnlit { position: absolute; z-index: 1; pointer-events: none; border-radius: var(--r-round);
  background: radial-gradient(closest-side, rgba(var(--t-g-gold-3-rgb), .55), rgba(var(--t-g-gold-4-rgb), .28) 55%, rgba(var(--t-g-gold-5-rgb), 0) 100%);
  filter: blur(14px); transform: scale(1.25, 1.6);
  transition: left .6s cubic-bezier(.3,.7,.2,1), top .6s cubic-bezier(.3,.7,.2,1), width .6s ease, height .6s ease;
  animation: mturnlit 2.2s ease-in-out infinite; }
@keyframes mturnlit { 50% { opacity: .75; } }
.mfx.v14 .mach.turn { z-index: 2; }
.tip .ctip-s { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
/* «Лаборатория боя»: the setup list, the bar over the fight, the engine drawer */
.mlabwrap { position: absolute; inset: 0; }
/* «Лаборатория боя»: variant А «Справочник» (owner 04.10) — groups left, tiles in the middle, the chosen setup right */
/* «Просмотр боя» (viewer.ts): a fixed top bar; the real fight screen at 80 % with the play strip under it; the inspector on the right */
.screen.mview { background: var(--c-bg); color: var(--c-ink); font-family: var(--font-body); }
.mview input, .mview select, .mview textarea { background: var(--c-bg); color: var(--c-ink); border: var(--bw) solid var(--c-line); border-radius: var(--r-sm); font: inherit; padding: 2px 6px; }
.mview-top { position: absolute; left: 0; top: 0; width: 1920px; height: 56px; box-sizing: border-box; padding: 0 12px; display: flex; gap: 8px; align-items: center; border-bottom: var(--bw) solid var(--c-line); font: var(--fw-med) 15px/1.3 var(--font-body); }
.mview-lb { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
#mview-round { width: 56px; }
.mview-seg { display: flex; }
.mview-seg .btn.on, .mview-tile.on { box-shadow: inset 0 0 0 2px var(--c-gold); color: var(--c-gold); }
.mview.edit #mview-edit { box-shadow: inset 0 0 0 2px var(--c-danger); color: var(--c-danger); }
.mview-find { position: relative; }
#mview-find { width: 220px; }
.mview-found { position: absolute; left: 0; top: calc(100% + 4px); width: 520px; max-height: 640px; overflow: auto; z-index: 100; background: var(--c-bg); border: var(--bw) solid var(--c-line-strong); border-radius: var(--r-sm); }
.mview-hit { display: flex; gap: 12px; justify-content: space-between; width: 100%; padding: 6px 10px; border: 0; background: none; color: var(--c-ink); text-align: left; font: inherit; cursor: pointer; }
.mview-hit span { opacity: .6; font-size: 13px; }
.mview-hit:hover, .mview-hit.on { background: rgba(var(--c-ink-rgb), .08); }
.mview-left { position: absolute; left: 0; top: 56px; width: 1536px; height: 864px; overflow: hidden; }
.mview.edit .mview-left { box-shadow: inset 0 0 0 3px var(--c-danger); }
.mview.edit .mview-zoom * { cursor: crosshair; }
.mview-zoom { position: relative; width: 1920px; height: 1080px; }
/* the screen's own surface in the sandbox (viewer.ts): its layers sit over the screen, the screen still takes the presses between them */
.sbx-stage { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
:where(.sbx-stage > *) { pointer-events: auto; } /* zero weight: a layer that takes no presses (a toast, a tip) keeps its own rule */
.mview-god { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 95; padding: 4px 14px; border-radius: var(--r-sm); background: var(--c-danger); color: var(--c-bg); font: var(--fw-bold) 15px/1.3 var(--font-body); }
.mview-picked { outline: 2px solid var(--c-info); outline-offset: 5px; } /* the inspected thing: solid, off the frame — a red dashed ring read as a game mark (owner 27.10, the red bowl) */
.sk.mview-step-to { outline: 4px solid var(--c-gold); outline-offset: 3px; }
.sk.mview-step-from { outline: 4px dashed var(--c-info); outline-offset: 3px; }
.mview-play { position: absolute; left: 0; top: 920px; width: 1536px; height: 160px; box-sizing: border-box; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; border-top: var(--bw) solid var(--c-line); font: var(--fw-med) 16px/1.3 var(--font-body); }
.mview-prow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#mview-bet { width: 70px; }
.mview-steptext { font-size: 14px; opacity: .85; }
.mview-panel { position: absolute; left: 1536px; top: 56px; width: 384px; height: 1024px; box-sizing: border-box; padding: 10px 12px 40px; overflow: auto; border-left: var(--bw) solid var(--c-line); font: var(--fw-med) 15px/1.35 var(--font-body); user-select: text; }
.mview-h { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; font: var(--fw-bold) 18px/1.25 var(--font-body); }
.mview-line { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; font-weight: var(--fw-semi); }
.mview-line input[type="number"] { width: 80px; }
.mview-hint { padding: 12px 0; opacity: .75; }
.mview-pas { display: flex; gap: 8px; align-items: center; margin: 4px 0 0 4px; }
.mview-pas > span { flex: 1; }
.mview-tbox { display: flex; flex-direction: column; gap: 4px; }
.mview-tgrp { display: flex; flex-direction: column; gap: 2px; }
.mview-tcap { font-size: 12px; opacity: .6; }
.mview-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.mview-tile { min-width: 38px; height: 38px; padding: 0 4px; display: grid; place-items: center; border: var(--bw) solid var(--c-line); border-radius: var(--r-sm); background: rgba(var(--c-ink-rgb), .04); color: var(--c-ink); cursor: pointer; font: var(--fw-bold) 14px var(--font-body); }
.mview-tile:hover { border-color: var(--c-line-strong); }
.mview-tword { font-size: 12px; line-height: 1.1; padding: 2px; }
.mview-tfilter { width: 100%; box-sizing: border-box; }
.mview-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
#mview-search { width: 100%; box-sizing: border-box; margin: 6px 0; }
.mview-count { font-size: 13px; opacity: .8; }
.mview-sec > summary { cursor: pointer; font-weight: var(--fw-bold); padding: 4px 0; }
.mview-sec .mview-sec { margin-left: 10px; }
.mview-row { display: flex; gap: 8px; align-items: center; min-height: 26px; margin-left: 10px; }
.mview-row.derived, .mview-row.raw { opacity: .6; }
.mview-k { min-width: 140px; max-width: 170px; opacity: .9; font-size: 14px; }
.mview-tag, .mview-val { font-size: 12px; opacity: .75; }
.mview-in input[type="number"] { width: 80px; }
.mview-in select { max-width: 190px; }
.btn.mview-mini { min-height: 22px; padding: 0 7px; font-size: 13px; }
.mview-acts { display: flex; gap: 6px; margin: 2px 0 6px 10px; }
.mview-none { display: flex; gap: 6px; font-size: 12px; }
.mview-err, .mview-jerr { color: var(--c-danger); padding: 6px 0; }
#mview-json { width: 100%; height: 320px; box-sizing: border-box; font: 12px/1.3 monospace; }
.screen.mlab2 { display: flex; flex-direction: column; background: radial-gradient(ellipse at 60% 30%, var(--t-surface2-4) 0%, var(--t-bg-5) 60%, var(--c-bg) 100%); color: var(--c-ink); font-family: var(--font-body); outline: none; }
.mlab2-top { height: 84px; flex-shrink: 0; display: flex; align-items: center; gap: 18px; padding: 0 30px; border-bottom: var(--bw) solid rgba(var(--c-accent-rgb), .25); background: var(--tex-panel); }
.mlab2-tt { display: flex; flex-direction: column; gap: 3px; } .mlab2-tt b { font: var(--fw-bold) 34px/1 var(--font-display); color: var(--c-accent-2-tx); } .mlab2-tt span { font-size: 14px; color: var(--c-ink-2); }
.mlab2-q { margin-left: auto; width: 420px; height: 46px; padding: 0 18px; border: 0; border-radius: calc(var(--r-lg) * 23 / 14); background: var(--c-bg-2); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .17); color: var(--c-ink); font: var(--fw-med) 16px var(--font-body); outline: none; }
.mlab2-q:focus { box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent); }
.mlab2-body { flex: 1; display: flex; min-height: 0; }
.mlab2-nav { width: 300px; flex-shrink: 0; padding: 20px 14px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; border-right: var(--bw) solid rgba(var(--c-accent-rgb), .18); background: rgba(var(--c-bg-2-rgb), .55); }
.mlab2-cap { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .14em; color: var(--c-accent-tx); }
.mlab2-nav .mlab2-cap { color: var(--c-ink-dim); padding: 14px 12px 6px; }
.mlab2-ni { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-ink); font: var(--fw-med) 16px var(--font-body); text-align: left; cursor: pointer; }
.mlab2-ni:hover { background: rgba(var(--c-accent-rgb), .12); }
.mlab2-ni.on { background: rgba(var(--c-accent-rgb), .12); color: var(--c-ink); box-shadow: inset 3px 0 0 var(--c-accent-2); font-weight: var(--fw-semi); }
.mlab2-ni i { width: 11px; height: 11px; border-radius: calc(var(--r-xs) * 3 / 4); flex-shrink: 0; }
.mlab2-ni i.snd { background: var(--c-accent-2); border-radius: var(--r-round); box-shadow: 0 0 10px rgba(var(--c-accent-2-rgb), .6); }
.mlab2-ni em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--c-ink-2); } .mlab2-ni.on em { color: var(--c-on-accent); }
.mlab2-main { flex: 1; min-width: 0; padding: 26px 30px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.mlab2-h { display: flex; align-items: baseline; gap: 14px; } .mlab2-h h1 { margin: 0; font: var(--fw-bold) 34px/1 var(--font-display); } .mlab2-h span { font-size: 16px; color: var(--c-ink-2); }
.mlab2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* the catalogue's chips and colour headings (owner 11.10, «Б»: one catalogue with filters) */
.mlab2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mlab2-chips .mlab2-cap { min-width: 92px; color: var(--c-ink-dim); }
.mlab2-chip { height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-round); cursor: pointer; background: var(--c-bg-2); color: var(--c-ink-2); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .17); font: var(--fw-med) 15px var(--font-body); }
.mlab2-chip:hover { color: var(--c-ink); box-shadow: inset 0 0 0 var(--bw) var(--c-accent); }
.mlab2-chip.on { background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); color: var(--c-on-accent); box-shadow: none; font-weight: var(--fw-semi); }
.mlab2-gh { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; font: var(--fw-semi) 15px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.mlab2-gh::before { content: ""; width: 14px; height: 14px; border-radius: calc(var(--r-xs) * 3 / 4); background: var(--t); }
.mlab2-none { margin: 0; font-size: 16px; color: var(--c-ink-2); }
.mlab2-tile { display: flex; gap: 14px; padding: 16px; border: 0; border-radius: var(--r-lg); text-align: left; cursor: pointer; color: var(--c-ink); background: var(--tex-plate); box-shadow: inset 0 0 0 var(--bw) var(--c-line); transition: box-shadow .12s ease, transform .12s ease; }
.mlab2-tile:hover { box-shadow: inset 0 0 0 var(--bw) var(--c-accent), 0 8px 18px rgba(var(--c-shadow-rgb), .45); }
.mlab2-tile.on { background: linear-gradient(180deg, var(--t-surface2-5), var(--t-surface-6)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 22px rgba(var(--c-accent-2-rgb), .25); }
.mlab2-sg { width: 60px; height: 60px; border-radius: calc(var(--r-lg) * 6 / 7); }
.mlab2-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .mlab2-tx b { font: var(--fw-bold) 24px/1.05 var(--font-display); }
.mlab2-tx > span { font-size: 14px; line-height: 1.35; color: var(--c-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mlab2-det { width: 400px; flex-shrink: 0; padding: 26px; display: flex; flex-direction: column; gap: 18px; border-left: var(--bw) solid rgba(var(--c-accent-rgb), .18); background: var(--tex-panel); overflow-y: auto; }
.mlab2-dh { display: flex; align-items: center; gap: 16px; } .mlab2-dh b { display: block; font: var(--fw-bold) 34px/1 var(--font-display); } .mlab2-dh div span { font-size: 14px; color: var(--t); font-weight: var(--fw-semi); }
.mlab2-big { width: 88px; height: 88px; border-radius: calc(var(--r-lg) * 9 / 7); }
.mlab2-big svg { width: 52px; height: 52px; }
.mlab2-desc { margin: 0; font-size: 18px; line-height: 1.45; }
.mlab2-box { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: calc(var(--r-lg) * 6 / 7); background: var(--c-bg-2); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .11); font-size: 16px; line-height: 1.45; }
.mlab2-sp { flex: 1; }
.mlab2-open { height: 58px; border: 0; border-radius: calc(var(--r-lg) * 29 / 14); cursor: pointer; background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); color: var(--c-on-accent); font: var(--fw-bold) 24px var(--font-display); box-shadow: 0 6px 24px rgba(var(--c-accent-2-rgb), .25); }
.mlab2-open:hover { filter: brightness(1.08); }
.mlab2-nx { display: flex; gap: 10px; } .mlab2-nx button { flex: 1; }
/* the sound desk */
.mlab2-sec { display: flex; flex-direction: column; gap: 10px; }
.mlab2-pads { display: flex; flex-direction: column; gap: 8px; }
.mlab2-pg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mlab2-pg > span { width: 150px; font-size: 14px; color: var(--c-ink-2); }
.mlab2-pad { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-md); cursor: pointer; background: var(--tex-plate); box-shadow: inset 0 0 0 var(--bw) var(--c-line); color: var(--c-ink); font: var(--fw-med) 14px var(--font-body); }
.mlab2-pad:hover { box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2); } .mlab2-pad:active { transform: translateY(1px); background: var(--t-surface2-5); }
.mlab2-pad.hot { box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-danger-rgb), .55); color: var(--c-danger-2); }
.mlabwrap .mlab-bar { position: absolute; z-index: 7; left: 608px; top: 10px; width: 510px; height: 60px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: calc(var(--r-lg) * 6 / 7);
  background: rgba(var(--t-bg2-16-rgb), .94); box-shadow: inset 0 0 0 var(--bw) rgba(var(--t-ok-1-rgb), .6); }
.mlabwrap .mlab-bar .btn { height: 40px; padding: 0 14px; font-size: 14px; }
.mlabwrap .ftop .plaque { flex: 0 1 300px; } /* the lab's bar sits in the header, between the rule and the round's steps (owner 07.10) */
.mlabwrap .mlab-t { flex: 1; min-width: 0; } .mlabwrap .mlab-t b { font: var(--fw-bold) 14px var(--font-body); color: var(--t-ok-2); }
.mlabwrap .mlab-eng { position: absolute; z-index: 60; right: 16px; top: 90px; width: 560px; max-height: 640px; overflow: auto; padding: 12px 14px; border-radius: calc(var(--r-lg) * 6 / 7);
  background: rgba(var(--t-bg2-1-rgb), .96); box-shadow: inset 0 0 0 var(--bw) rgba(var(--t-ok-1-rgb), .5); font: var(--fw-med) 14px var(--font-body); color: var(--c-ink); }
.mlabwrap .mlab-eng .cap { margin: 10px 0 4px; } .mlabwrap .mlab-eng pre { margin: 0; white-space: pre-wrap; font: 12px/1.45 ui-monospace, Consolas, monospace; color: var(--t-paper-5); }
.mlabwrap .mlab-seat { margin: 4px 0; } .mlabwrap .mlab-seat div { font: 12px ui-monospace, Consolas, monospace; color: var(--t-paper-5); }
/* hover links (owner 03.10): the enemy cell that takes from mine lit red, the cells mine works on lit green */
.mfx.v14 .sk.mattk { box-shadow: 0 0 0 3px var(--t-c-danger-6), 0 0 22px 6px rgba(var(--t-danger-8-rgb), .55) !important; }
.mfx.v14 .sk.mlink { box-shadow: 0 0 0 3px var(--t-ok-5), 0 0 22px 6px rgba(var(--t-c-ok-1-rgb), .5) !important; }
/* the forecast total breakdown: a box with no sign */
.mfx.v14 .mbadge.ten { top: auto; bottom: -30px; background: var(--t-surface-7); color: var(--t-ink-18); box-shadow: 0 0 0 var(--bw-strong) var(--t-magic-6), var(--shadow-2); white-space: nowrap; } /* an enemy copy will move in here */
/* the cell's formula strip (owner 03.10, canvas F2): «≈34 = 4 · +12 · +5 · −8», each member coloured by its SOURCE —
   a cell in its family colour, a card on paper, a soul gold, a passive dashed, a rule brass, a copy blue; the sign by colour */
.mtf .mstrip { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 8px 10px; border-radius: calc(var(--r-lg) * 6 / 7); background: rgba(var(--c-well-rgb), .28); }
.mtf .mstrip-n { font: var(--fw-bold) 34px/1 var(--font-num); color: var(--c-ink); white-space: nowrap; }
.mtf .mstrip-eq { font: var(--fw-bold) 24px var(--font-num); color: var(--t-ink2-2); }
.mtf .mstrip-f { display: flex; flex-wrap: wrap; gap: 6px; }
.mtf .mterm { --c: var(--t-ink2-6); display: inline-flex; flex-direction: column; align-items: flex-start; padding: 4px 9px; border-radius: calc(var(--r-md) * 9 / 10);
  background: color-mix(in srgb, var(--c) 20%, var(--t-bg-11)); box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c) 60%, transparent); }
.mtf .mterm-v { display: inline-flex; align-items: center; gap: 4px; font: var(--fw-bold) 18px/1.15 var(--font-num); color: var(--c-ink); }
.mtf .mterm.pos .mterm-v { color: var(--t-ok-2); } .mtf .mterm.neg .mterm-v { color: var(--t-danger2-1); }
.mtf .mterm-l { font: var(--fw-med) 14px/1.2 var(--font-body); color: var(--t-paper-1); white-space: nowrap; }
.mtf .mterm.k-base { --c: var(--t-ink2-2); }
.mtf .mterm.k-copy { --c: var(--c-info); }
.mtf .mterm.k-soul { --c: var(--t-accent2-1); }
.mtf .mterm.k-rule { --c: var(--t-accent-4); }
.mtf .mterm.k-passive { --c: var(--t-ink2-6); box-shadow: inset 0 0 0 var(--bw) rgba(var(--t-paper-1-rgb), .7); outline: var(--bw) dashed rgba(var(--t-paper-1-rgb), .6); outline-offset: -4px; }
.mtf .mterm.k-card { background: var(--t-paper-12); box-shadow: inset 0 0 0 var(--bw) var(--t-accent-1); }
.mtf .mterm.k-card .mterm-l { color: var(--t-accentedge-9); } .mtf .mterm.k-card.pos .mterm-v { color: var(--t-accentlo-5); } .mtf .mterm.k-card.neg .mterm-v { color: var(--t-danger-4); }
.mtf .mterm.k-card .mterm-v svg { color: var(--t-paperink-9); }
.mtf .mterm.k-cond { --c: var(--t-danger-2); } .mtf .mterm.k-cond .mterm-v { color: var(--t-danger2-1); }
.mtf .mterm.k-other { --c: var(--t-ink2-2); }
/* the cell plaque, canvas F2 one to one (owner 03.10: «отличается от того что в канвасе F2») */
.tip:has(> .mtf) { padding: 0; background: none; border: 0; box-shadow: none; max-width: none; white-space: normal; }
.mtf { position: relative; width: 560px; box-sizing: border-box; padding: 16px 20px 18px; border-radius: var(--r-lg); text-align: left; white-space: normal;
  background: linear-gradient(180deg, var(--t-surface-8), var(--t-bg-2)); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .14), 0 18px 40px rgba(var(--c-shadow-rgb), .6); color: var(--c-ink); }
.mtf-edge { position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: calc(var(--r-xs) / 2); background: var(--c); }
.mtf-hd { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; }
.mtf-sg { width: 60px; height: 60px; border-radius: calc(var(--r-lg) * 6 / 7); display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--c);
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c) 22%, var(--t-surface3-3)), var(--t-bg2-4)); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-hi-rgb), .12); }
.mtf-nm { font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-ink); }
.mtf-sb { margin-top: 4px; font: var(--fw-semi) 14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.mtf .mstrip { margin: 12px 0 0; padding: 10px 12px; gap: 12px; }
.mtf .mstrip-n { font-size: 48px; }
.mtf .mstrip-eq { font-size: 24px; }
.mtf .mterm { padding: 5px 10px; border-radius: var(--r-md); }
.mtf .mterm-v { font-size: 24px; gap: 5px; }
.mtf .mterm-v svg { width: 18px; height: 18px; }
.mtf .mterm-l { font-size: 14px; }
.mtf-tx { margin-top: 12px; font: var(--fw-med) 18px/1.6 var(--font-body); color: var(--c-ink); }

.mget .mplq-row b { white-space: nowrap; } /* «≈ 6 · −7» on one line */
.mtf .mterm.k-grown { --c: var(--t-hi-2); } .mtf .mterm.k-grown .mterm-v { color: var(--t-hi-3); } /* what the cell has grown by: white, like growth */
/* a copy of mine the run puts into an empty slot (Постояльцы, Подселенец): a faint sign + its forecast */
.mfx .sk .mghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .45; color: var(--c); line-height: 0; filter: drop-shadow(0 0 6px var(--c)); pointer-events: none; }
.mfx .sk .mghost svg { width: 30px; height: 30px; }
.mtf-cor { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; align-self: start; } /* slot · target · how long */
/* the corner lines: every extra fact right of the name, compact and right-aligned (owner 03.10) */
.mtf-cor { max-width: 270px; }
.mtf-cl { font: var(--fw-med) 14px/1.3 var(--font-body); color: var(--t-paper-1); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.mtf-cl b { color: var(--c-ink); font-weight: var(--fw-bold); } .mtf-cl.aim b { color: var(--t-danger2-1); }
.mtf-cl.grow { color: var(--t-hi-3); } .mtf-cl.grow svg { width: 14px; height: 14px; }
.mtf-cl.copy, .mtf-cl.copy b { color: var(--t-info-1); }
.mtf-cl.bank, .mtf-cl.bank b { color: var(--t-accent2-1); }
/* the piggy's savings: the number in a gold ring, no ◎ glyph (owner 03.10) */
.mfx.v14 .sk .pa.bank { left: 3px; bottom: 3px; min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: calc(var(--r-md) * 11 / 10); display: flex; align-items: center; justify-content: center;
  font: var(--fw-bold) 14px/1 var(--font-num); color: var(--t-c-accent2-2); background: rgba(var(--t-paperink-10-rgb), .85); box-shadow: inset 0 0 0 1.5px var(--t-warn-4); }
/* my total never moves my plate: the «→ ≈28» of a plan floats to the right of the number (owner 03.10: «чтобы плашка не двигалась») */
.mfx.v14 .mtotal { position: relative; }
.mfx.v14 .mtotal .mt-then { position: absolute; left: 100%; top: 0; margin-left: 10px; white-space: nowrap; }
.mtf .mterm.k-bank { --c: var(--t-accent2-1); } .mtf .mterm.k-bank .mterm-v { color: var(--t-accent2-2); }
/* the bet zone (owner 21.10, #1 #3): one fixed box above the circle — the call, [−] bet / max [+], the most it wins, «Поставить» and
   «Без ставки». Every row is always there and the box never changes size between a bet of 0 and more */
.mfx.v14 .mmed-go { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; }
/* marks for what the engine knows (owner 03.10): order, deferred move, hits, deck, fresh ×2, practised hand, bet info */
.mfx.v14 .mmark { padding: 0 6px; border-radius: var(--r-sm); font: var(--fw-semi) 14px/18px var(--font-body); color: var(--t-paper-1); background: rgba(var(--c-hi-rgb), .07); white-space: nowrap; }
.mfx.v14 .mmark.lurk { color: var(--t-info-1); } .mfx.v14 .mmark.hit { color: var(--t-danger2-1); background: rgba(var(--t-danger-6-rgb), .12); }
/* the bag (owner 17.10): the plate right of the hand fan — the next card face up, «в мешке N · сброс M»; a press opens the window (no shade) */
.mfx.v14 .mbag { position: absolute; left: 1430px; top: 852px; z-index: 6; width: 128px; box-sizing: border-box; padding: 6px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; border-radius: var(--r-md); cursor: pointer;
  color: var(--c-ink); background: rgb(var(--c-bg-rgb) / .55); font: var(--fw-med) 18px/1.2 var(--font-body); transition: opacity .35s ease, filter .35s ease, box-shadow .15s ease; }
.mfx.v14 .mbag:hover { box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2), 0 0 16px rgb(var(--c-bg-rgb) / .8); }
.mfx.v14 .mbag:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; }
.mfx.v14 .mbag.open { box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.mfx.v14 .mbag.wait { opacity: .55; filter: saturate(.55); }
.mfx.v14 .mbag.wait:hover, .mfx.v14 .mbag.wait.open { opacity: .9; filter: none; }
.mfx.v14 .mbag .bcap { font: var(--fw-semi) 14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-2); }
.mfx.v14 .mbag .bslot { position: relative; display: block; width: 127px; height: 118px; }
.mfx.v14 .mbag .bmini { position: relative; display: block; width: 127px; height: 118px; overflow: hidden; border-radius: var(--r-md); transform-style: preserve-3d; }
.mfx.v14 .mbag .bmini .card { left: 0; top: 0; transform: scale(.648); transform-origin: 0 0; pointer-events: none; z-index: 0; filter: none; }
.mfx.v14 .mbag .bmini .card .tx, .mfx.v14 .mbag .bmini .card .tg { display: none; }
.mfx.v14 .mbag .bmini.famine .card { filter: grayscale(.8) brightness(.6); }
.mfx.v14 .mbag .bmini.none { display: grid; place-items: center; box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.mfx.v14 .mbag .bnone { font: var(--fw-bold) 34px var(--font-num); color: var(--c-ink-2); }
.mfx.v14 .mbag .bmini.shuf { animation: bagturn .5s ease-out 1; box-shadow: 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 18px var(--c-accent-2); }
@keyframes bagturn { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.mfx.v14 .mbag .bbadge { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); max-width: 124px; white-space: nowrap; padding: 0 8px; border-radius: var(--r-sm); font: var(--fw-heavy) 14px/20px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-accent-2); }
.mfx.v14 .mbag .bbadge.bad { color: var(--c-ink); background: var(--c-danger); }
.mfx.v14 .mbag .bnum { color: var(--c-ink); } .mfx.v14 .mbag .bnum .num { font: var(--fw-bold) 20px var(--font-num); }
.mfx.v14 .mbag .bdis { color: var(--c-ink-2); }
/* the bag window: the Modal's look over the table, no shade; info only. Centred on the stage (owner 21.10, #18: it sat left), it grows
   out of the bag plate and shrinks back into it; every card is the hand's own card face, scaled */
.modal.mbagwin { position: absolute; left: 340px; top: 110px; width: 1240px; max-height: 800px; overflow: auto; min-width: 0; max-width: none; box-sizing: border-box; z-index: 60; padding: 24px 32px 28px;
  transform-origin: 1180px 820px; animation: bagwin-in .22s cubic-bezier(.2,.8,.2,1) both; }
.modal.mbagwin.leaving { animation: bagwin-out .18s ease-in both; pointer-events: none; }
@keyframes bagwin-in { from { opacity: 0; transform: scale(.82) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bagwin-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.86) translateY(20px); } }
.modal.mbagwin .mhead { display: flex; justify-content: space-between; align-items: flex-start; }
.modal.mbagwin h2 { margin: 0 0 6px; }
.mbagwin .bsub { margin: 0 0 16px; font-size: 18px; color: var(--c-ink-2); }
.mbagwin .bzones { display: flex; gap: 36px; align-items: flex-start; }
.mbagwin .bz h3 { margin: 0 0 12px; font: var(--fw-bold) 24px var(--font-display); color: var(--c-ink); }
.mbagwin .bz-bag { flex: 0 0 auto; }
.mbagwin .bz-dis { flex: 1 1 0; min-width: 0; padding-left: 36px; box-shadow: inset 1px 0 0 var(--c-line); }
.mbagwin .bg { margin: 0 0 14px; }
.mbagwin .bg h4 { margin: 0 0 8px; font: var(--fw-semi) 18px var(--font-body); color: var(--c-ink-2); }
.mbagwin .bgrid { display: grid; grid-template-columns: repeat(6, 118px); gap: 14px; }
.mbagwin .bz-dis .bgrid { grid-template-columns: repeat(2, 118px); }
.mbagwin .bempty, .mbagwin .bhint { color: var(--c-ink-2); font-size: 18px; }
.mbagwin .bhint { margin-top: 14px; }
/* a tile: the card at 0.6 of the hand's size (196 × 272), its count and the «next» flag over it */
.mbagwin .bt { position: relative; width: 118px; height: 164px; border-radius: var(--r-md); }
.mbagwin .bt .bcard { position: absolute; left: 0; top: 0; width: 196px; height: 272px; transform: scale(.6); transform-origin: 0 0; }
.mbagwin .bt .bcard .card { position: absolute; left: 0; top: 0; transform: none; pointer-events: none; }
.mbagwin .bt .bcount { position: absolute; right: -6px; bottom: -6px; z-index: 2; min-width: 30px; padding: 0 7px; border-radius: var(--r-sm); text-align: center; font: var(--fw-bold) 18px/26px var(--font-num); color: var(--c-on-accent); background: var(--c-accent-2); box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), .6); }
.mbagwin .bt.next .bcard .card { box-shadow: inset 0 0 0 5px var(--cf), 0 0 0 4px var(--c-accent-2), 0 0 22px var(--c-accent-2); }
.mbagwin .bt .bflag { position: absolute; left: 50%; top: -9px; z-index: 2; transform: translateX(-50%); white-space: nowrap; padding: 0 8px; border-radius: var(--r-sm); font: var(--fw-heavy) 14px/18px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-accent-2); }
.mbagwin .bt.gone { filter: saturate(.45) brightness(.82); }
.mfx.v14 .sk .mfresh { position: absolute; left: 3px; top: 3px; z-index: 5; padding: 0 4px; border-radius: var(--r-sm); font: var(--fw-heavy) 14px/16px var(--font-num); color: var(--t-c-surface3-3); background: var(--t-c-accent2-1); }
/* states of the new cells (04.10), tokens from the page kit: shield blue, stun grey, charge gold, evolved gold, nomad blue, glass cracks, shard glint, flame glow */
.mfx .sk .pa.shield.max { border-color: var(--t-warn-8); color: var(--t-warn-8); }
.mfx .sk .pa.shield { left: auto; right: 3px; bottom: auto; top: 22px; min-width: 18px; padding: 2px 4px; box-sizing: border-box; text-align: center; font: var(--fw-heavy) 14px/1 var(--font-num); color: var(--t-hi-6); background: var(--t-c-magic-1); border: var(--bw-strong) solid var(--t-info-2); border-radius: calc(var(--r-sm) * 7 / 6) calc(var(--r-sm) * 7 / 6) var(--r-md) var(--r-md); box-shadow: 0 0 8px var(--t-c-magic-1); }
.mfx .sk .pa.moves.branded { left: auto; right: 3px; transform: none; bottom: auto; top: 3px; }
.mfx .sk .pa.moves { left: 50%; transform: translateX(-50%); bottom: 3px; padding: 1px 4px; font: var(--fw-heavy) 14px/1 var(--font-num); color: var(--t-info-2); background: var(--t-felt2-4); border: var(--bw) solid var(--t-info-2); border-radius: calc(var(--r-sm) * 7 / 6); }
.mfx .sk .mevo { position: absolute; left: 3px; top: 22px; z-index: 5; padding: 1px 4px; border-radius: calc(var(--r-sm) * 7 / 6); font: var(--fw-heavy) 14px/1 var(--font-num); color: var(--t-accentink-8); background: var(--t-c-accent2-2); pointer-events: none; }
.mfx .sk .mstun { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--r-md) * 4 / 5); background: rgba(var(--t-surface3-12-rgb), .65); color: var(--t-ink-19); font: var(--fw-heavy) 24px/1 var(--font-num); pointer-events: none; }
.mfx .sk .pa.wear, .mfx .sk .pa.stance { left: 3px; top: 40px; bottom: auto; transform: none; padding: 1px 4px; font: var(--fw-heavy) 14px/1 var(--font-num); color: var(--t-info-2); background: var(--t-felt2-4); border: var(--bw) solid var(--t-info-2); border-radius: calc(var(--r-sm) * 7 / 6); }
.mfx .sk .pa.stance.def { color: var(--t-c-accent2-2); border-color: var(--t-c-accent2-2); }
/* 23.10 systems: the upstart's crown (top right), a заказ's progress (under the wear and stance marks) */
.mfx .sk .pa.rear { left: 50%; right: auto; top: 2px; bottom: auto; transform: translateX(-50%); padding: 0; font: var(--fw-heavy) 13px/1 var(--font-num); color: var(--t-c-magic-1); background: none; border: 0; text-shadow: 0 1px 2px var(--c-shadow); pointer-events: none; } /* 23.10 «Дружина»: the bottom's mark, like the peak's ▲ */
/* 24.10 «Алхимик: чаши»: a bowl is a vessel under the slot in the colour of the bowl (a plain mark like a soul's); a red one carries its arrow; the slot gets a rim of that colour */
.mfx .sk.bowl-yellow { --bc: var(--fam-mc-yellow); } .mfx .sk.bowl-white { --bc: var(--fam-mc-white); } .mfx .sk.bowl-red { --bc: var(--fam-mc-red); } .mfx .sk.bowl-blue { --bc: var(--fam-mc-blue); }
.mfx .sk.bowl { box-shadow: inset 0 -3px 0 var(--bc); }
.mfx .sk .bowlmark { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 3px; color: var(--bc, currentColor); pointer-events: none; filter: drop-shadow(0 1px 2px var(--c-shadow)); }
.mfx .sk .bowlmark .bt { font: var(--fw-heavy) 12px/1 var(--font-num); font-style: normal; }
.mfx .sk .pa.guess { opacity: .5; pointer-events: auto; cursor: help; } .mtf-cl.guess { opacity: .55; } /* 24.10: an enemy's king / pauper by a forecast over the public view — paler, a tooltip says it can change */
.mtf-cl.bowl-hd { gap: 6px; } .mtf-cl.bowl-hd .bowl-ic { display: inline-grid; color: var(--bc, currentColor); } .mtf-cl.bowl-hd .bt { font: var(--fw-heavy) 14px/1 var(--font-num); font-style: normal; }
.mtf-cl.bowl-hd .bowl-x, .kwplate.bowl-side .bowl-times { color: var(--fam-mc-yellow); } .kwplate.bowl-side .bowl-times { font-weight: var(--fw-bold); margin-bottom: 4px; } /* owner 26.10: the bowl acts ×2 / ×3 and why */
.bowl-ic.bowl-yellow { --bc: var(--fam-mc-yellow); } .bowl-ic.bowl-white { --bc: var(--fam-mc-white); } .bowl-ic.bowl-red { --bc: var(--fam-mc-red); } .bowl-ic.bowl-blue { --bc: var(--fam-mc-blue); }
.kwplate.bowl-side .bowl-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .kwplate.bowl-side .bowl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .kwplate.bowl-side .bowl-arr { color: var(--c-ink-2); }
.bowl-dot2 { display: inline-flex; gap: 1px; flex: none; } .bowl-dot2 i { width: 6px; height: 12px; background: var(--c-ink-2); } .bowl-dot2 i:first-child { border-radius: 6px 0 0 6px; } .bowl-dot2 i:last-child { border-radius: 0 6px 6px 0; } .bowl-both { font-weight: var(--fw-bold); }
.mcq-r.bowl-fx { margin-top: 4px; } .mcq-i .bowl-dot { width: 8px; height: 8px; border-radius: 50%; } .mcq-i.bowl-silent { opacity: .55; } .bowl-fx .mcq-i i { font-size: 13px; }
.mfx .sk.c-thrall { outline: 1.5px dashed rgba(var(--t-c-hi-rgb), .55); outline-offset: -3px; } /* 24.10 «Некромант: мертвяки»: a thrall stands for one round — a dashed edge on its frame */
.mfx .sk .mrider { font-size: 13px; line-height: 1; color: var(--rider-c, #8c8f96); text-shadow: 0 0 4px var(--t-c-magic-1); pointer-events: none; } /* 24.10: a thrall «on» the cell — a ☠ in the thrall's colour */
.mfx .sk.c-thrall .msign { filter: drop-shadow(0 0 6px var(--t-c-magic-1)); }
.mfx .sk .pa.upstart { left: 50%; right: auto; top: 2px; bottom: auto; transform: translateX(-50%); padding: 0; font: var(--fw-heavy) 13px/1 var(--font-num); color: var(--t-c-accent2-2); background: none; border: 0; text-shadow: 0 1px 2px var(--c-shadow); pointer-events: none; } /* owner 23.10: a mark at the top, never over the points */
.mfx .sk .pa.order { left: 3px; top: 58px; bottom: auto; transform: none; padding: 1px 4px; font: var(--fw-heavy) 13px/1 var(--font-num); color: var(--t-info-2); background: var(--t-felt2-4); border: var(--bw) solid var(--t-info-2); border-radius: calc(var(--r-sm) * 7 / 6); }
.mfx .sk .mstone { position: absolute; inset: 0; z-index: 6; pointer-events: none; /* owner 23.10: the hover is the cell's own plaque */ display: flex; align-items: center; justify-content: center; border-radius: calc(var(--r-md) * 4 / 5); background: rgba(var(--t-surface3-12-rgb), .72); color: var(--t-ink-19); }
.mfx .sk.fragile::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--r-md) * 4 / 5); pointer-events: none; z-index: 4;
  background: linear-gradient(135deg, transparent 46%, rgba(var(--t-c-hi-rgb), .7) 47%, transparent 49%), linear-gradient(35deg, transparent 60%, rgba(var(--t-c-hi-rgb), .55) 61%, transparent 63%); }
/* Кукловод 05.10: a string on the cell this run (a thread mark), a switched cell (two arrows) */
.mfx .sk .mfrag { position: absolute; left: 3px; bottom: 24px; z-index: 5; font: var(--fw-heavy) 14px/1 var(--font-num); color: var(--t-hi-5); pointer-events: none; }
.mfx .sk.c-shard .msign { filter: drop-shadow(0 0 7px var(--t-hi-5)) drop-shadow(0 0 2px var(--t-c-hi)); }
.mfx .sk.c-flame { box-shadow: 0 0 14px rgba(var(--t-danger-7-rgb), .7), inset 0 0 12px rgba(var(--t-danger-7-rgb), .35); }
.mfx .sk.c-flame .msign { filter: drop-shadow(0 0 8px var(--t-danger-7)); }
.mfx.v14 .sk .pa.up { left: 3px; bottom: 24px; color: var(--t-c-danger2-1); font-size: 14px; }
.mcap-i.off { opacity: .45; cursor: default; }

/* the choice strip (04.10, общее правило 14): a merge's 2–3 class cells, a card's options */
.mfx.v14 .mchoice { position: absolute; left: 50%; top: 300px; transform: translateX(-50%); z-index: 12; padding: 12px 14px; border-radius: var(--r-lg); background: rgba(var(--t-bg2-1-rgb), .96);
  box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .55), 0 14px 30px rgba(var(--c-shadow-rgb), .6); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.mfx.v14 .mchoice-row { display: flex; gap: 10px; }
.mfx.v14:has(.mchoice) .mach.me { z-index: 13; } /* owner 26.10: an option under the pointer shows its plan; my row's badges rise above the strip's lower edge */
/* many options («Переплавка»: up to 12) wrap into rows inside the screen; past the height — scroll (owner 04.10: «в экран не помещается») */
.mfx.v14 .mchoice { max-width: calc(100vw - 32px); max-height: calc(100vh - 320px); box-sizing: border-box; }
.mfx.v14 .mchoice-row { flex-wrap: wrap; justify-content: center; overflow-y: auto; min-height: 0; max-width: 100%; }
.mfx.v14 .mchoice-row .mchoice-i { width: 260px; flex: 0 0 260px; }
.mfx.v14 .mchoice-i { width: 300px; border: 0; padding: 8px; border-radius: var(--r-md); background: rgba(var(--t-felt3-2-rgb), .8); color: var(--c-ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .3); }
.mfx.v14 .mchoice-i.txt { width: auto; padding: 14px 22px; font: var(--fw-bold) 18px var(--font-display); text-align: center; }
.mfx.v14 .mchoice-i:hover, .mfx.v14 .mchoice-i:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), var(--shadow-glow); }
.mfx.v14 .mchoice-i .mplq { margin: 0; background: none; border: 0; box-shadow: none; padding: 0; }
/* the instrument stand (owner 04.10) */
.mlab2-st-note { margin: 0 0 12px; font-size: 14px; color: var(--c-ink-2); max-width: 900px; }
.mlab2-st-fam > h3 { margin: 14px 0 8px; font: var(--fw-semi) 16px var(--font-body); color: var(--c-accent-2-tx); }
.mlab2-st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mlab2-st { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(var(--c-well-rgb), .28); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .09); }
.mlab2-st-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .mlab2-st-h b { font: var(--fw-semi) 16px var(--font-body); color: var(--c-ink); }
.mlab2-st-v { font-size: 14px; padding: 1px 7px; border-radius: calc(var(--r-md) * 4 / 5); } .mlab2-st-v.can { color: var(--t-ok-3); box-shadow: inset 0 0 0 var(--bw) rgba(var(--t-ok-3-rgb), .4); } .mlab2-st-v.almost { color: var(--t-warn-1); box-shadow: inset 0 0 0 var(--bw) rgba(var(--t-warn-1-rgb), .4); }
.mlab2-st-r { font-size: 14px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.mlab2-st-f { font-size: 14px; color: var(--t-accent-5); }
.mlab2-st-b { display: flex; flex-wrap: wrap; gap: 6px; } .mlab2-st-b .mlab2-pad { min-height: 32px; padding: 0 10px; font-size: 14px; }
/* the lab's player (owner 05.10) */
.mlab2-pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .mlab2-pl-head b { font: var(--fw-semi) 18px var(--font-body); color: var(--c-ink); }
.mlab2-pl-pos { font-size: 14px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.mlab2-pl-secs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mlab2-pl-sec { min-height: 30px; padding: 0 10px; border: 0; border-radius: calc(var(--r-md) * 4 / 5); cursor: pointer; background: var(--tex-plate); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .12); color: var(--c-ink); font: var(--fw-med) 14px var(--font-body); }
.mlab2-pl-sec.on { background: var(--t-accentedge-10); box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2); } .mlab2-pl-sec.extra { color: var(--c-ink-2); font-style: italic; }
.mlab2-pl-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.mlab2-pl-tr { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: center; padding: 7px 10px; border-radius: calc(var(--r-md) * 4 / 5); background: rgba(var(--c-well-rgb), .28); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .08); transition: background .08s, box-shadow .08s; }
.mlab2-pl-tr > i { grid-row: span 2; width: 10px; height: 10px; border-radius: var(--r-round); background: var(--t-inkdim-2); }
.mlab2-pl-tr b { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink); } .mlab2-pl-tr span { font-size: 14px; color: var(--c-ink-2); }
.mlab2-pl-tr.hot { background: rgba(var(--c-accent-rgb), .22); box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2); } .mlab2-pl-tr.hot > i { background: var(--t-warn-2); box-shadow: 0 0 8px var(--t-warn-2); }
.mlab2-pl-tr.off { opacity: .35; }

/* watching a fight (owner 05.10: «наблюдать за чужой игрой»): one bar under the header, no controls of a seat */
.watchbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 16px;
  background: var(--tex-panel); box-shadow: var(--shadow-edge); border-radius: var(--r-pill); font: var(--fw-med) 18px/1.2 var(--font-body); color: var(--c-ink); white-space: nowrap; max-width: 1500px; }
.watchbar .watch-txt { color: var(--c-accent-2-tx); }
.watchbar .watch-seats { display: flex; align-items: center; gap: 4px; }
.watchbar .watch-hid { font-size: 16px; }
.watch-pickbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; padding: 24px 28px; background: var(--tex-panel); box-shadow: var(--shadow-edge); border-radius: calc(var(--r-lg) * 6 / 7); color: var(--c-ink); font: 18px/1.4 var(--font-body); }
.watch-pk { display: flex; justify-content: space-between; padding: 8px 0; border-top: var(--bw) solid rgba(var(--c-accent-rgb), .2); }
.watch-pk.done span { color: var(--c-ok); }
/* pick step 2: the same recipe grid, squeezed into the 387px right column; a mix my placed cells can make is lit */
.mfx.v14.mpick .mdk-b .mrc2-x.mine { box-shadow: inset 0 0 0 var(--bw-strong) var(--c-warn), 0 0 14px rgba(var(--c-warn-rgb), .45); }
/* the post-fight survey v2 (midsurvey.ts): one question per screen; on a phone (stage ×0.36) the answers stay ≥ 40 real px tall */
.modal.msv { width: 1240px; min-height: 620px; display: flex; flex-direction: column; }
.msv-body { flex: 1; display: flex; flex-direction: column; gap: 26px; }
.msv-step { font: var(--fw-semi) 18px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-tx); }
.msv-q { margin: 0; font: var(--fw-semi) 34px/1.3 var(--font-body); color: var(--c-ink); }
.msv-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.msv-opts .btn, .msv-scale .btn { height: 112px; font-size: 34px; letter-spacing: .02em; text-transform: none; white-space: normal; line-height: 1.15; }
.msv-scale { display: flex; align-items: center; gap: 16px; }
.msv-scale .btn { flex: 1; font: var(--fw-bold) 48px var(--font-num); }
.msv-end { font: var(--fw-med) 24px var(--font-body); color: var(--c-ink-2); max-width: 140px; text-align: center; }
.msv-open { display: flex; gap: 16px; align-items: stretch; }
.msv-open textarea { flex: 1; min-height: 150px; font-size: 34px; resize: none; }
.msv-open .btn { height: auto; min-width: 200px; font-size: 24px; }
.msv-opts .btn.on, .msv-scale .btn.on { color: var(--c-ink); background: rgba(var(--c-accent-rgb), .12); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.msv-foot { margin-top: auto; justify-content: space-between; }
.msv-foot .btn { height: 84px; min-width: 240px; font-size: 24px; }

/* Кукловод (owner 05.10): a strung / switched cell gets a faint pink edge; the words are in its hover */
.mfx .sk.strung { box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--t-danger2-4-rgb), .7); }
.mfx .sk.switched { outline: var(--bw) dashed rgba(var(--t-danger2-4-rgb), .8); outline-offset: -3px; }

/* ---- the kit screen (owner 06.10, canvas «Лоадаут»): tiles of the parts, the open part below; cards as in the fight */

/* ---- «Аналитика» (owner 06.10): the bot runs of the kits as charts, beside the lab */
.manal { display: flex; flex-direction: column; padding: 28px 44px; box-sizing: border-box; gap: 16px; color: var(--c-ink); font-family: var(--font-body);
  background: radial-gradient(ellipse 90% 70% at 50% 38%, var(--t-surface2-6) 0%, var(--t-surface3-4) 55%, var(--t-bg2-9) 100%); }
.manal-h { display: flex; align-items: center; gap: 18px; }
.manal-h h1 { margin: 0; font: var(--fw-bold) 48px/1 var(--font-display); color: var(--c-accent-2-tx); }
.manal-h .row { margin-left: auto; display: flex; gap: 8px; }
.manal-body { flex: 1 1 0; min-height: 0; overflow: auto; border-radius: calc(var(--r-lg) * 8 / 7); padding: 22px 26px; background: linear-gradient(175deg, var(--t-surface-4), var(--t-bg-2)); box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.manal-svg { max-width: 100%; height: auto; }
.manal-svg .manal-lab { font: var(--fw-med) 14px/1 var(--font-body); fill: var(--c-paper); }
.manal-svg .manal-lab.pre { font-weight: var(--fw-bold); fill: var(--c-accent-2); }
.manal-svg .manal-num { font: var(--fw-semi) 14px/1 var(--font-num); fill: var(--t-ink2-1); }
.manal-t { border-collapse: collapse; font-size: 14px; }
.manal-t th { text-align: left; font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--t-ink2-1); padding: 8px 12px; border-bottom: var(--bw) solid var(--c-line); }
.manal-t td { padding: 6px 12px; border-bottom: var(--bw) solid rgba(var(--c-accent-rgb), .1); color: var(--c-paper); font-variant-numeric: tabular-nums; }
.manal-t td.hi { color: var(--c-ok); }
.manal-t td.lo { color: var(--c-danger-2); }

/* «Аналитика» v2: findings first (owner 06.10: «никакие выводы по ней не сделаешь») */
.manal-legend { display: flex; gap: 22px; font-size: 14px; color: var(--t-ink2-3); }
.manal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.manal-legend i { width: 12px; height: 12px; border-radius: var(--r-round); display: inline-block; }
.manal-svg .manal-axis { font: var(--fw-semi) 14px/1 var(--font-body); fill: var(--t-ink2-1); letter-spacing: .06em; }

/* ---- navigation (owner 07.10, «один стек слоёв»): «← куда», the window's ✕, the danger button, the menu's lead item */
.btn.back { width: auto; padding: 0 18px 0 14px; gap: 8px; font-size: 16px; white-space: nowrap; }
.mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.modal .mhead h2 { margin: 0; }
.mx { flex: none; width: 46px; height: 46px; margin: -10px -14px 0 0; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font: var(--fw-semi) 24px var(--font-body); color: var(--c-ink-2); }
.mx:hover, .mx:focus-visible { color: var(--c-ink); background: rgba(var(--c-ink-rgb), .07); }
.btn.danger { color: var(--c-danger-2); background: none; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-danger); }
.btn.danger:hover { background: rgba(var(--c-danger-rgb), .14); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-danger), 0 0 14px var(--c-danger-glow); }
/* touch: «назад», ✕, the icons and the main button take a press over 128 stage px (≈ 44 px on a 812×375 phone) */
@media (pointer: coarse) {
  .btn.back, .mx, .btn.icon, .btn.primary, .btn.touch { position: relative; }
  .btn.back::after, .mx::after, .btn.icon::after, .btn.primary::after, .btn.touch::after { content: ""; position: absolute; left: -39px; right: -39px; top: -41px; bottom: -41px; }
  .btn.back::after, .btn.primary::after, .btn.touch::after { left: -12px; right: -12px; }
}
/* the light follows the phase (owner 07.10): a hand that cannot play now steps back — lower, dimmer — and comes up on my turn */
.mfx.v14 .hand { transition: transform .35s ease, opacity .35s ease, filter .35s ease; }
.mfx.v14 .hand.wait { transform: translateY(16px); opacity: .55; filter: saturate(.55); }
.mfx.v14 .hand.wait:hover { opacity: .9; filter: none; }
.mfx.v14 .mcap-tip { position: absolute; top: -98px; transform: translateX(-50%); z-index: 8; pointer-events: none; padding: 7px 14px; border-radius: var(--r-sm); white-space: nowrap;
  font: var(--fw-semi) 16px var(--font-body); color: var(--c-ink); background: rgba(var(--t-bg2-1-rgb), .94); box-shadow: inset 0 0 0 var(--bw) var(--c-line-strong); }
.mfx.v14 .mcap-tip.high { top: -98px; }
.mfx.v14 .sk.flash { animation: mflash 1.4s ease-out 1; }
@keyframes mflash { 0% { box-shadow: 0 0 0 3px var(--c-ink), 0 0 26px rgba(var(--c-ink-rgb), .8); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; } }
/* the list: an empty list leads to «Новый стол» in its middle; a row is chosen by a click or ↑ ↓ (owner 07.10) */
.mlabwrap .mlab-task { position: absolute; z-index: 5; left: 24px; top: 590px; width: 480px; padding: 14px 18px; border-radius: var(--r-md); pointer-events: none;
  background: rgba(var(--t-bg2-16-rgb), .9); box-shadow: inset 0 0 0 var(--bw) rgba(var(--t-ok-1-rgb), .6); }
.mlabwrap .mlab-task p { margin: 6px 0 0; font: var(--fw-semi) 18px/1.35 var(--font-body); color: var(--c-ink); }
/* ---- «Сборки» (owner 07.10): the list left, the chosen build right, its main button bottom right */
.bcard { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; border-radius: var(--r-md); cursor: pointer; text-align: left;
  color: var(--c-ink); background: var(--c-surface); box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.bcard:hover { box-shadow: inset 0 0 0 var(--bw) var(--c-line-strong); }
.bcard.on { background: rgba(var(--c-accent-rgb), .1); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.bcard-crest { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-round); color: var(--hue, var(--c-accent-2)); box-shadow: inset 0 0 0 var(--bw-strong) var(--hue, var(--c-accent-2)); }
.bcard-crest.lg { width: 72px; height: 72px; }
.bcard-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bcard-t b { font: var(--fw-bold) 24px/1.1 var(--font-display); }
.bcard-t i { font: italic var(--fw-med) 16px var(--font-body); color: var(--c-ink-2); }
.bstart { display: flex; gap: 10px; margin-top: 8px; }
.bslot { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-bg-2); box-shadow: inset 0 0 0 var(--bw) var(--c-line); color: var(--c-ink-2); font: var(--fw-semi) 16px var(--font-num); }
.bslot:not(.empty) { color: var(--c, var(--c-ink)); background: linear-gradient(160deg, var(--e-top, var(--c-bg-2)), var(--e-bot, var(--c-bg-2))); box-shadow: inset 0 0 0 var(--bw-strong) var(--c, var(--c-line-strong)); }
/* the empty list holds only «Нет столов — Новый стол»: nothing to scroll, so no scrollbar on a press (owner 08.10, screen 5) */
/* a card dragged from the hand (owner 08.10): a small copy follows the pointer, the card in the fan stays as its shadow */
.mcard-drag { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(var(--c-shadow-rgb), .7)); }
.mcard-drag .mcard-ghost { pointer-events: none; }
.mfx .card.mlifted { opacity: .35; }
/* the round's intro (owner 08.10: «лучше удлинить и в целом поработать над анимациями»): the shade comes, the box unfolds from
   its middle, the lines arrive one by one — the round's numeral first, the rule last and brightest; on «Понятно» it lifts away */
/* no tables at all (owner 08.10: «нужно центрировать»): the column heads and the empty detail go, «Новый стол» stands in the
   middle of the screen */
/* a dragged cell (owner 08.10: «фигурка должна замениться на саму ячейку»): the socket as on the table, lifted */
.mcell-ghost { position: fixed; left: 0; top: 0; transform-origin: 50% 50%; pointer-events: none; }
.mcell-ghost .sk { box-shadow: 0 0 0 2px var(--c-accent-2), 0 16px 26px rgba(var(--c-shadow-rgb), .7); }

/* ---- the shelf of builds (owner 08.10: the pick before a fight and «Сборки» look the same): the five class plates with
   their stars, the player's own builds in a strip (no stars), what the chosen build holds, the place's buttons */
.mfx.v14.mpick .mpk1 > .bbr { flex: 1; min-height: 0; }
.bbr { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
/* the presets row (owner 23.10: ready builds «в ряд с уже существующими пресетами (горизонтальный скролл обязателен)»): one line of
   plates, each a fifth of the row as before; a sixth and more go past the edge and the row scrolls sideways (the page itself does not) */
.bbr-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; padding: 10px 0 12px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.bbr-grid > .bbr-c { scroll-snap-align: start; }
.bbr-c { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 14px; padding: 20px 16px 18px; border: 0; border-radius: calc(var(--r-lg) * 11 / 7);
  text-align: center; color: var(--t-ink-1); cursor: pointer; background: rgba(var(--t-bg2-15-rgb), .82); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .12), 0 10px 26px rgba(var(--c-shadow-rgb), .5);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s, background .32s; }
.bbr-c:hover, .bbr-c:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--hue) 70%, transparent), 0 12px 30px rgba(var(--c-shadow-rgb), .55); }
.bbr-c.on { background: linear-gradient(180deg, var(--t-paperink-8) 0%, var(--t-surface3-11) 100%); transform: translateY(-8px);
  box-shadow: inset 0 0 0 3px var(--hue), 0 0 52px color-mix(in srgb, var(--hue) 36%, transparent), 0 14px 30px rgba(var(--c-shadow-rgb), .6); }
.bbr-top { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bbr-crest { flex: none; width: 72px; height: 72px; border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; color: var(--hue);
  background: rgba(var(--c-well-rgb), .35); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--hue) 60%, transparent); }
.bbr-n { font: var(--fw-bold) 34px/1 var(--font-display); }
.bbr-q { font: italic var(--fw-med) 18px/1.2 var(--font-body); color: var(--hue); }
.bbr-stats { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.bbr-sr { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: var(--fw-med) 16px var(--font-body); color: var(--t-paper-11); }
.bbr-st { position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 2px; color: var(--t-surface2-13); white-space: nowrap; }
.bbr-stf { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--c-warn); }
.bbr-st.hard .bbr-stf { color: var(--t-accent-3); }
.bbr-mine { flex: none; display: flex; flex-direction: column; gap: 8px; }
.bbr-mineh { display: flex; align-items: baseline; gap: 16px; }
.bbr-mineh .dim { font-size: 16px; }
.bbr-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 8px; }
.bbr-row .bcard { flex: none; width: 330px; background: rgba(var(--c-shadow-rgb), .45); }
.bbr-row .bcard.on { box-shadow: inset 0 0 0 3px var(--hue), 0 0 30px color-mix(in srgb, var(--hue) 30%, transparent); }
.bbr-new { flex: none; width: 250px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-md); cursor: pointer;
  color: var(--c-ink-2); background: transparent; font: var(--fw-bold) 18px var(--font-body); transition: color .2s, border-color .2s, background .2s; }
.bbr-new:hover, .bbr-new:focus-visible { outline: none; color: var(--c-ink); border-color: var(--c-accent-2); background: rgba(var(--c-accent-rgb), .08); }
.bbr-plus { font: 300 34px/1 var(--font-body); color: var(--c-accent-2-tx); }
.bbr-det { flex: none; min-height: 230px; max-height: 300px; display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: 36px; padding: 22px 30px; border-radius: var(--r-lg); overflow: hidden;
  background: rgba(var(--c-shadow-rgb), .45); box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--hue, var(--c-line)) 40%, transparent); }
.bbr-det.empty { place-items: center; grid-template-columns: 1fr; font: var(--fw-med) 24px var(--font-body); color: var(--c-ink-2); }
.bbr-d1, .bbr-d2, .bbr-d3 { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bbr-dh { display: flex; align-items: center; gap: 14px; }
.bbr-dn { font: var(--fw-bold) 34px/1.1 var(--font-display); color: var(--c-ink); }
.bbr .bname { flex: 1; min-width: 0; height: 52px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: var(--c-bg-2); color: var(--c-ink); font: var(--fw-bold) 34px var(--font-display); box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.bbr .bq { font: italic var(--fw-med) 18px var(--font-body); color: var(--c-ink-2); }
.bbr-l { margin: 0; font: var(--fw-med) 16px/1.4 var(--font-body); color: var(--c-ink-2); }
.bbr .bsec p { margin: 4px 0 0; font: var(--fw-med) 16px/1.4 var(--font-body); color: var(--c-ink); }
.bbr .bpas { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bbr-foot { flex: none; display: flex; align-items: center; gap: 28px; }
.bbr-act { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mfx.v14.builds .ftop .plaque { flex-basis: 980px; } /* «Сборки»: its header line is a sentence, not a step */

/* ---- settings, variant Б (owner 08.10): «Вид» with the themes as small tables on the left, «Общее» and «Звук» on the right */
.modal.setw { width: 1240px; max-width: none; }
.setc { display: grid; grid-template-columns: 500px 1px minmax(0, 1fr); column-gap: 44px; }
.setvl { background: var(--c-line); }
.setcol { display: flex; flex-direction: column; min-width: 0; }
.setsec { display: flex; flex-direction: column; gap: 8px; }
.setsec + .setsec { margin-top: 26px; }
.setcap { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; font: var(--fw-semi) 14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-2); }
.setcap::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.setstack { display: flex; flex-direction: column; gap: 12px; }
.setstack + .setstack { margin-top: 18px; }
.setlbl { font: var(--fw-med) 16px var(--font-body); color: var(--c-ink); }
.setnote { font: var(--fw-reg) 14px var(--font-body); color: var(--c-ink-2); }
.setw .field { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 18px; min-height: 40px; margin: 2px 0; }
.setw .field > span { font: var(--fw-med) 16px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.setw .field output { font-size: 18px; }
.setw .seg { align-self: flex-start; }
.thms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.thm { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.thm-tile { position: relative; display: block; width: 112px; height: 76px; border-radius: var(--r-sm); background: rgb(var(--c-bg-rgb)); box-shadow: inset 0 0 0 1px rgba(239, 230, 211, .14); transition: transform .2s; }
.thm:hover .thm-tile, .thm:focus-visible .thm-tile { transform: translateY(-2px); }
.thm:focus-visible { outline: none; }
.thm.on .thm-tile { outline: 2px solid var(--c-accent-2); outline-offset: 3px; }
.thm-felt { position: absolute; inset: 9px 8px; border-radius: 999px; background: radial-gradient(ellipse at 50% 38%, rgb(var(--c-felt-rgb)) 0%, rgb(var(--c-felt-2-rgb)) 55%, rgb(var(--c-felt-3-rgb)) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.thm-cell { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border-radius: var(--r-xs); background: rgb(var(--c-surface-2-rgb)); box-shadow: inset 0 0 0 1.5px rgb(var(--c-accent-rgb)); }
.thm-dot { position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: rgb(var(--seat-0-rgb)); }
.thm-nm { min-height: 20px; font: 600 17px/1.15 var(--font-display); color: var(--c-ink-2); text-align: center; text-wrap: balance; }
.thm.on .thm-nm { color: var(--c-ink); }
/* a «base» tile inside another theme's page: base's own values (themes.css leaves the base block empty, :root holds them) */
.thm[data-theme="base"] { --c-bg-rgb: 15, 13, 12; --c-surface-2-rgb: 43, 37, 31; --c-accent-rgb: 201, 162, 102; --c-felt-rgb: 43, 58, 51; --c-felt-2-rgb: 29, 40, 35; --c-felt-3-rgb: 20, 27, 24;
  --seat-0-rgb: 246, 168, 74; --r-sm: 6px; --r-xs: 4px; --font-display: "Cormorant SC", "Cormorant", serif; }

/* a build card keeps one height whatever its name (owner 08.10: a long name grew the strip over the class plates) */
.bcard-t b, .bcard-t i { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbr-row { flex: none; height: 96px; flex-wrap: nowrap; overflow-y: hidden; align-items: stretch; }
.bbr-row .bcard { height: 84px; }
.bbr-grid { min-height: 380px; }
.bbr .bname { text-overflow: ellipsis; }
/* «Почему уходишь?» in the leave window (midscreen.ts midBack, 09.10) */
.mleave-q { margin: 14px 0 6px; color: var(--c-ink-2); }
.mleave-whys { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.btn.mleave-why.on { color: var(--c-ink); background: rgba(var(--c-accent-rgb), .14); box-shadow: inset 0 0 0 2px var(--c-accent-2); }

/* «Как играть» 09.10: the goal line, linked names, and the phone size (the stage scaled below 0.6 — text twice as large) */
.modal.midgloss .mgl-goal { margin: 0 0 10px; text-align: center; font: var(--fw-bold) 22px var(--font-display); color: var(--c-accent-2-tx); }
.modal.midgloss .mgl-ln { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--c-accent-2-tx); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.modal.midgloss .mgl-ln:hover, .modal.midgloss .mgl-ln:focus-visible { color: var(--c-ink); outline: none; }
.modal.midgloss.big { width: 1880px; max-width: 1880px; padding: 20px 28px; }
.modal.midgloss.big .mgl-head { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
.modal.midgloss.big .mgl-find { width: auto; margin: 0; height: 76px; font-size: 30px; padding: 0 24px; }
.modal.midgloss.big .mgl-tabs { gap: 12px; }
.modal.midgloss.big .mgl-t { height: 76px; padding: 0 26px; font-size: 30px; }
.modal.midgloss.big .mgl-n { font-size: 24px; }
.modal.midgloss.big .mgl-body { height: 690px; }
.modal.midgloss.big .mgl-grid.c2, .modal.midgloss.big .mgl-grid.c3, .modal.midgloss.big .mgl-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal.midgloss.big .mgl-bd b { font-size: 40px; }
.modal.midgloss.big .mgl-bd small, .modal.midgloss.big .mgl-ss, .modal.midgloss.big .cap { font-size: 26px; }
.modal.midgloss.big .mgl-bd p, .modal.midgloss.big .mgl-w small, .modal.midgloss.big .mgl-st small, .modal.midgloss.big .mgl-more, .modal.midgloss.big .mgl-none { font-size: 30px; line-height: 1.35; }
.modal.midgloss.big .mgl-w b, .modal.midgloss.big .mgl-goal { font-size: 36px; }
.modal.midgloss.big .mgl-st b { font-size: 34px; }
.modal.midgloss.big .mgl-steps { flex-wrap: wrap; }
.modal.midgloss.big .mgl-st { flex: 1 1 30%; }
.modal.midgloss.big .mgl-ar { display: none; }
.modal.midgloss.big .mgl-sg { width: 72px; height: 72px; }
.modal.midgloss.big .mgl-sg svg { width: 52px; height: 52px; }
.modal.midgloss.big .mgl-chip { height: 64px; font-size: 28px; padding: 0 20px; }
.modal.midgloss.big .mgl-chips { flex-wrap: wrap; }

/* «Первый раунд» (midlesson.ts, 09.10): a step — dots, title, words, a drawn table in the game's colours */
.modal.midgloss .mls { display: flex; flex-direction: column; gap: 10px; max-width: 1120px; margin: 4px auto 0; }
.modal.midgloss .mls-dots { display: flex; gap: 6px; }
.modal.midgloss .mls-dots span { flex: 1; height: 5px; border-radius: 3px; background: rgba(var(--c-ink-rgb), .12); }
.modal.midgloss .mls-dots span.on { background: var(--c-accent); }
.modal.midgloss .mls-n { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink-2); }
.modal.midgloss .mls-h { margin: 0; font: var(--fw-bold) 34px var(--font-display); color: var(--c-accent-2-tx); }
.modal.midgloss .mls-t { margin: 0; font: var(--fw-med) 19px/1.45 var(--font-body); color: var(--c-ink); }
.modal.midgloss .mls-pic { margin-top: 8px; padding: 16px; border-radius: var(--r-lg); background: rgba(var(--c-felt-3-rgb), .9); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .15); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.modal.midgloss .mls-seats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.modal.midgloss .mls-seat { min-width: 150px; padding: 12px 16px; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.modal.midgloss .mls-seat.me, .modal.midgloss .mls-m.me { box-shadow: inset 0 0 0 2px var(--c-accent); }
.modal.midgloss .mls-seat b { font: var(--fw-bold) 20px var(--font-display); color: var(--c-ink); }
.modal.midgloss .mls-chips { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-bold) 24px var(--font-num); color: var(--c-gold); }
.modal.midgloss .mls-bet { font: var(--fw-bold) 30px var(--font-num); color: var(--c-accent-2-tx); }
.modal.midgloss .mls-two { flex-direction: row; justify-content: center; flex-wrap: wrap; }
.modal.midgloss .mls-to { font-size: 30px; color: var(--c-accent); }
.modal.midgloss .mls-rule { flex-direction: row; align-items: flex-start; color: var(--c-accent-2-tx); }
.modal.midgloss .mls-rule b { font: var(--fw-bold) 24px var(--font-display); color: var(--c-ink); }
.modal.midgloss .mls-rule p { margin: 4px 0 0; font: var(--fw-med) 17px/1.4 var(--font-body); color: var(--c-ink); }
.modal.midgloss .mls-run { flex-direction: column; align-items: stretch; }
.modal.midgloss .mls-m { padding: 8px 10px; border-radius: var(--r-md); box-shadow: inset 0 0 0 var(--bw) var(--c-line); display: flex; flex-direction: column; gap: 6px; }
.modal.midgloss .mls-who { display: flex; justify-content: space-between; font: var(--fw-bold) 18px var(--font-display); color: var(--c-ink); }
.modal.midgloss .mls-who span { font: var(--fw-bold) 22px var(--font-num); color: var(--c-gold); }
.modal.midgloss .mls-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.modal.midgloss .mls-c { position: relative; min-height: 96px; border-radius: var(--r-md); padding: 8px 4px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 6%, transparent)); box-shadow: inset 0 0 0 1.5px var(--c); }
.modal.midgloss .mls-c small { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink); text-align: center; }
.modal.midgloss .mls-c b { font: var(--fw-bold) 24px var(--font-num); color: var(--c-ink); }
.modal.midgloss .mls-c i { position: absolute; bottom: 3px; font: var(--fw-semi) 12px var(--font-num); font-style: normal; color: var(--c-ink-dim); }
.modal.midgloss .mls-c.empty { --c: var(--c-ink-dim); background: none; box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), .18); }
.modal.midgloss .mls-c.lit { box-shadow: inset 0 0 0 2px var(--c-accent-2); background: rgba(var(--c-accent-2-rgb), .1); }
.modal.midgloss .mls-hand { display: flex; gap: 10px; justify-content: center; align-items: flex-end; }
.modal.midgloss .mls-card { width: 110px; height: 132px; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--c); background: rgba(var(--c-bg-2-rgb), .9); box-shadow: inset 0 0 0 2px var(--c); }
.modal.midgloss .mls-card small { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink); }
.modal.midgloss .mls-card.up { transform: translateY(-16px); box-shadow: inset 0 0 0 3px var(--c), 0 8px 18px rgba(0, 0, 0, .45); }
.modal.midgloss .mls-cap { margin: 0; font: var(--fw-med) 16px var(--font-body); color: var(--c-ink-2); }
.modal.midgloss .mls-pic > .mls-m { align-self: stretch; }
.modal.midgloss .mls-bank { border-collapse: collapse; font: var(--fw-med) 18px var(--font-num); color: var(--c-ink); }
.modal.midgloss .mls-bank th, .modal.midgloss .mls-bank td { padding: 6px 16px; text-align: center; border-bottom: 1px solid var(--c-line); }
.modal.midgloss .mls-bank thead th { font: var(--fw-semi) 14px var(--font-body); color: var(--c-ink-2); }
.modal.midgloss .mls-bank tbody th { text-align: left; font: var(--fw-bold) 18px var(--font-display); }
.modal.midgloss .mls-bank tr.me td, .modal.midgloss .mls-bank tr.me th { color: var(--c-accent-2-tx); }
.modal.midgloss .mls-nav { display: flex; justify-content: space-between; align-items: center; }
.modal.midgloss.big .mls { max-width: none; }
.modal.midgloss.big .mls-n, .modal.midgloss.big .mls-cap, .modal.midgloss.big .mls-c small, .modal.midgloss.big .mls-card small, .modal.midgloss.big .mls-bank thead th { font-size: 26px; }
.modal.midgloss.big .mls-h { font-size: 52px; }
.modal.midgloss.big .mls-t, .modal.midgloss.big .mls-rule p, .modal.midgloss.big .mls-bank { font-size: 30px; }
.modal.midgloss.big .mls-c { min-height: 170px; }
.modal.midgloss.big .mls-c b, .modal.midgloss.big .mls-who, .modal.midgloss.big .mls-who span { font-size: 34px; }
.modal.midgloss.big .mls-card { width: 170px; height: 200px; }
.modal.midgloss.big .mls-nav .btn { height: 80px; font-size: 30px; padding: 0 34px; }
.modal.midgloss.big .mls-c svg, .modal.midgloss.big .mls-card svg, .modal.midgloss.big .mls-pic > svg, .modal.midgloss.big .mls-chips svg { width: 52px; height: 52px; }
.modal.midgloss.big .mls-c i { font-size: 22px; }
.modal.midgloss.big .mls-seat b, .modal.midgloss.big .mls-rule b { font-size: 34px; }
.modal.midgloss.big .mls-chips, .modal.midgloss.big .mls-bet { font-size: 40px; }
.modal.midgloss .mls-pic.mls-seats { flex-direction: row; justify-content: center; }

/* ---- rank + profile (owner 13.10, flow ②③): the menu's rank plate, the profile screen, the first-launch window */
.tier-badge { flex: none; display: block; }
.pips { display: inline-flex; gap: 6px; align-items: center; }
.pips i { display: block; width: 14px; height: 14px; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); background: var(--c-accent); }
.pips i.o { background: rgba(var(--c-ink-rgb), .18); }
.prof-last { margin: 14px 0 0; color: var(--c-ink-2); } .prof-last b { color: var(--c-ink); font-weight: var(--fw-semi); }
/* the rank bar (rankview.ts rankBar): tier edge to edge, division ticks, my points, the ghost of the hidden level */
.rbar { margin: 14px 0 0; }
.rbar .rb-ends { display: flex; justify-content: space-between; font: var(--fw-semi) 13px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-2); margin-bottom: 6px; }
.rbar .rb-track { position: relative; height: 12px; border-radius: 6px; background: rgba(var(--c-ink-rgb), .12); }
.rbar .rb-fill { position: absolute; left: 0; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--c-accent-lo), var(--c-accent-2)); }
.rbar .rb-tick { position: absolute; top: -3px; width: 2px; height: 18px; margin-left: -1px; background: rgba(var(--c-ink-rgb), .45); }
.rbar .rb-me { position: absolute; top: -4px; width: 6px; height: 20px; margin-left: -3px; border-radius: 3px; background: var(--c-ink); box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
.rbar .rb-ghost { position: absolute; top: -6px; width: 16px; height: 24px; margin-left: -8px; box-sizing: border-box; border: 2px dashed var(--c-accent-2-tx); border-radius: 8px; opacity: .6; font: var(--fw-bold) 16px/20px var(--font-num); text-align: center; color: var(--c-accent-2-tx); }
.rbar .rb-ghost.above { margin-left: -16px; } .rbar .rb-ghost.below { margin-left: 0; }
.rbar .rb-legend { display: flex; align-items: center; gap: 8px; min-height: 18px; margin-top: 8px; font-size: 14px; color: var(--c-ink-2); }
.rbar .rb-sw { display: inline-block; width: 12px; height: 16px; box-sizing: border-box; border: 2px dashed var(--c-accent-2-tx); border-radius: 6px; opacity: .6; }
.rbar .rb-note { margin: 6px 0 0; font-size: 15px; line-height: 1.35; }
.mrated .mr-why { color: var(--c-ink); font-size: 17px; }
.prof-soon { margin: 20px 0 0; color: var(--c-accent-2-tx); font: var(--fw-semi) 16px/1.4 var(--font-body); }
.prof-call { margin: 18px 0 0; }
.modal.welcome { width: 760px; }
.modal.welcome .field { grid-template-columns: 1fr; }
.modal.welcome .field input[type="text"] { grid-column: auto; font: var(--fw-med) 22px var(--font-body); }
/* touch (one input-mode helper, platform.ts): keyboard hints are hidden */
html[data-input="touch"] .mkey { display: none; }
.kt-ms.closed { opacity: .4; cursor: not-allowed; }
/* phone: the menu's plain buttons («Отмена» of the search, «Сменить», «С друзьями») are themselves a ≥128 stage-px target (≈ 44 px at 844×390), not only a padded press area */

/* «Учебный бой» (tutorial.ts): the step card at the left, the spotlight that shuts the stage but for the allowed action, the skip button */
.tutwrap .tut-block { position: absolute; inset: 0; z-index: 40; background: rgba(var(--c-shadow-rgb), .52); }
.tutwrap .tut-holes { position: absolute; inset: 0; z-index: 41; pointer-events: none; }
.tutwrap .tut-hole { position: absolute; border-radius: var(--r-md); box-shadow: 0 0 0 2px rgba(var(--c-accent-2-rgb), .9), 0 0 18px rgba(var(--c-accent-rgb), .5); }
.tutwrap .tut-skip { position: absolute; z-index: 46; right: 24px; top: 74px; }
.mls-practice { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* ---- owner 21.10 (playtest feedback) ---- */
/* #8: a hand card's hit area is a still wrapper; only the card inside grows and turns straight, so its edge never loses the pointer */
.mfx .hand .cardw { position: absolute; width: 176px; height: 272px; pointer-events: auto; transform-origin: 50% 100%; transform: rotate(var(--r, 0deg)); }
.mfx .hand .cardw > .card { left: 0; top: 0; transform: translateY(var(--lift, 0px)); }
.mfx .hand .cardw:hover > .card, .mfx .hand .cardw > .card.peek { transform: translateY(var(--lift, 0px)) rotate(calc(-1 * var(--r, 0deg))) scale(1.35); filter: none; transition: box-shadow .14s ease; }
.mfx .hand .cardw:hover, .mfx .hand .cardw:has(> .card.peek) { z-index: 10 !important; }
.mfx .hand .cardw:has(> .card.sel) { z-index: 9 !important; }
.mfx .hand .cardw:has(> .card:focus-visible) { z-index: 8 !important; }
.mfx .hand.wait .cardw:hover > .card::after { border-color: transparent; }
/* #9.2 #9.3 #21: what a hovered cell (or the forecast, a passive) works on: targets red, its own seat's cells in the ally colour, the cells making my forecast gold */
.mfx.v14 .sk.mtgt { box-shadow: 0 0 0 3px var(--t-danger-2), 0 0 20px 4px rgba(var(--t-danger-2-rgb), .5) !important; }
.mfx.v14 .sk.mally { box-shadow: 0 0 0 3px var(--t-info-2), 0 0 20px 4px rgba(var(--t-info-2-rgb), .5) !important; }
.mfx.v14 .sk.mcontrib { box-shadow: 0 0 0 3px var(--c-accent-2), 0 0 20px 4px rgba(var(--c-accent-2-rgb), .5) !important; }
/* #9.1 #24: a machine is marked by a soft tint behind it and one clean hairline, no thick red frame */
.mfx [id^="mach-"].aimed, .mfx.v14 [id^="mach-"].jtgt, .mfx [id^="mach-"].pickseat { border-radius: calc(var(--r-lg) * 8 / 7);
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--t-danger-2-rgb), .2), rgba(var(--t-danger-2-rgb), .06) 70%, transparent);
  box-shadow: 0 0 0 var(--bw) rgba(var(--t-danger-2-rgb), .55); transition: background .15s ease, box-shadow .15s ease; animation: none; }
.mfx [id^="mach-"].pickseat:hover { background: radial-gradient(ellipse at 50% 45%, rgba(var(--t-danger-2-rgb), .3), rgba(var(--t-danger-2-rgb), .1) 70%, transparent); box-shadow: 0 0 0 var(--bw-strong) rgba(var(--t-danger-2-rgb), .8); }
.mfx.v14 .mach.frozen { border-radius: calc(var(--r-lg) * 8 / 7); background: radial-gradient(ellipse at 50% 45%, rgba(var(--t-info-2-rgb), .16), transparent 75%); box-shadow: none; }
/* #12: the circle's actions: one size, one round brass button each, the count on a pill, the words in the shared tooltip */
.mfx.v14 .mmed-sm { width: 52px; height: 52px; border-radius: var(--r-round); background: radial-gradient(circle at 50% 35%, var(--t-surface-1), var(--t-surface3-2));
  box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--c-accent-2-rgb), .55), 0 6px 14px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mmed-sm:hover, .mfx.v14 .mmed-sm.hot { background: radial-gradient(circle at 50% 35%, rgba(var(--c-accent-2-rgb), .3), var(--t-surface3-2)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 16px rgba(var(--c-accent-2-rgb), .45), 0 6px 14px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mmed-sm.off { opacity: .4; filter: grayscale(.8); }
.mfx.v14 .mmed-bd { right: -4px; top: -4px; }
/* #22: «Выйти из боя» as an icon */
.mfx .mtop .mback { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; }
/* #5.3: enemy cells aiming at me, an icon and a number */
.mfx.v14 .mmark.aimme { display: inline-flex; align-items: center; gap: 3px; cursor: default; }
/* #5.7 #16: passives as icons */
.mfx .plate .clsrow .tag.t-ico { padding: 3px 5px; line-height: 0; }
/* PROTOTYPE «Пассивки 2-го уровня»: the level mark on a passive's sign, the «Улучшить · N» buttons over the bet medallion */
.mfx .plate .clsrow .tag .pup-mark { display: inline-block; margin-left: 3px; font: var(--fw-bold) 11px/1 var(--font-num); font-style: normal; letter-spacing: .02em; vertical-align: 4px; color: var(--c-lvl2); }
.mfx.v14 .mmed-ups { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-bottom: 44px; }
.mfx.v14 .mmed-up { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0; border-radius: var(--r-md); cursor: pointer; font: var(--fw-bold) 15px/1 var(--font-body); color: var(--c-accent-2-tx); background: radial-gradient(circle at 50% 35%, var(--t-surface-1), var(--t-surface3-2)); box-shadow: inset 0 0 0 var(--bw-strong) rgba(var(--c-accent-2-rgb), .6), 0 4px 10px rgba(var(--c-shadow-rgb), .5); }
.mfx.v14 .mmed-up:hover { box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 16px rgba(var(--c-accent-2-rgb), .4), 0 6px 14px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mmed-up:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; }
/* the 2nd level of a passive (one block everywhere: tips, the kit, the class tip): «II · N фишек», then its text. One colour for «level 2»;
   the formatter keeps the numbers and keywords in their own colours, so only the plain words take it. */
.pl2 { display: block; margin-top: 6px; padding: 4px 0 0 8px; border-left: 2px solid var(--c-lvl2); font: var(--fw-med) 14px/1.38 var(--font-body); color: var(--c-lvl2); }
.pl2 .pl2-h { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: var(--r-xs); font: var(--fw-bold) 12px/18px var(--font-num); letter-spacing: .04em; color: var(--c-on-accent); background: var(--c-lvl2); white-space: nowrap; }
.pl2.bought .pl2-h::after { content: " ✓"; }
/* #13: a soul over its slot is its icon */
.mfx .sk .crown .tk.soul.ico { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: var(--r-round); color: var(--c-paper-ink); }
/* #14: the soul's slot hint as icons */
.mfx .sk .mhint.ico { gap: 2px; align-items: center; padding: 3px 5px; }
.mfx .sk:hover .mhint.ico, .mfx .sk:focus-visible .mhint.ico { display: inline-flex; }
/* #15 #17: a cell's consequences in its tooltip: icon, target, number */
.mcq-r { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 6px; max-width: 270px; }
.mcq-i { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-sm); background: rgba(var(--c-hi-rgb), .06); font: var(--fw-semi) 15px var(--font-body); color: var(--c-ink); }
.mcq-i b { font: var(--fw-bold) 16px var(--font-num); }
.mcq-i i { font-style: normal; font-weight: var(--fw-bold); }
/* owner 22.10 (1.2): the colour is the action's type — points yellow, growth white, damage red, other grey (the cells' verb colours);
   the icon is the action. A copier's repeated action keeps its colour and wears a blue ring (the copy verb) */
.mcq-i { --tc: var(--c-ink-2); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); }
.mcq-i.k-pts { --tc: var(--fam-mc-yellow); } .mcq-i.k-grow { --tc: var(--fam-mc-white); } .mcq-i.k-dmg { --tc: var(--fam-mc-red); } .mcq-i.k-fx { --tc: var(--c-ink-2); } .mcq-i.k-soul { --tc: var(--c-accent-2-tx); }
.mcq-i .mcq-ic { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; }
.mcq-i.copied .mcq-ic { box-shadow: 0 0 0 2px var(--fam-mc-blue); }
.mcq-i .mcq-hand { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; font: var(--fw-bold) 14px var(--font-num); opacity: .9; }
.mfx.v14 .mmark.mhits { display: inline-flex; align-items: center; gap: 3px; } .mfx.v14 .mmark.mhits.full { color: var(--t-danger2-1); }
/* #19: the dock row's card on hover (the hand's card face) */
.mfx.v14 .mdk-card { position: absolute; left: 540px; bottom: 30px; z-index: 9; display: none; width: 196px; height: 272px; pointer-events: none; }
.mfx.v14 .mdk-card.on { display: block; }
.mfx.v14 .mdk-card .card { left: 0; top: 0; transform: none; box-shadow: inset 0 0 0 5px var(--cf), inset 0 0 0 7px var(--c-paper), 0 18px 40px rgba(var(--c-shadow-rgb), .8); }
/* #6: «Сейчас играет» on the switches' line, right of «Рецепты» */
.mfx.v14 .mdk-sws .mdk-np { align-self: center; min-width: 0; flex: 0 1 auto; max-width: 220px; }
/* правка 2 #7: a passive is «активна» — a sign beside its name */
.tip .ctip-h b .ctip-on { display: inline-grid; vertical-align: -2px; margin-left: 8px; color: var(--t-ok-5); }
/* правка 2 #9: smoother — a tooltip eases in, lit sockets fade their glow, controls ease on hover; nothing that a repaint rebuilds
   gets an entrance animation (the fight screen repaints often, it would replay) */
.tip:not(.tip-banner) { animation: tip-in .12s ease-out both; }
@keyframes tip-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.mfx .sk { transition: box-shadow .16s ease, background-color .16s ease, filter .16s ease; }
.mfx [id^="mach-"] { transition: background .2s ease, box-shadow .2s ease; }
.mfx.v14 .mmed-sm, .mfx.v14 .mmed-disc, .mfx.v14 .mdk-sw, .mfx .plate .clsrow .tag { transition: box-shadow .14s ease, background .14s ease, transform .14s ease, opacity .14s ease; }
.mfx.v14 .mmed-sm:active:not(.off) { transform: translateY(1px) scale(.97); }
.mfx .hand .cardw > .card { transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease, filter .14s ease; }
.mfx.v14 .mdk-card.on { animation: tip-in .14s ease-out both; }
/* the bet zone «А · Покер» (owner 22.10): the bet big, chips that add, ⟲ back */
/* the bet chips (owner 23.10): casino chips of their value in a column where the action circles stand; the turn ring is the confirm */
/* the bet chips in two columns (owner 23.10), ↺ under them */
.mfx.v14 .mbc { display: grid; grid-template-columns: repeat(2, 52px); gap: 10px 12px; justify-items: center; align-items: center; margin-bottom: 4px; }
.mfx.v14 .mbc .mbc-undo { grid-column: 1 / -1; }
.mfx.v14 .mbc-chip { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--r-round); background: none; cursor: pointer; line-height: 0; filter: drop-shadow(0 5px 6px rgba(var(--c-shadow-rgb), .6)); transition: transform .12s ease, filter .12s ease, opacity .12s ease; }
.mfx.v14 .mbc-chip:hover:not([aria-disabled="true"]) { transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(var(--c-accent-2-rgb), .7)) drop-shadow(0 6px 8px rgba(var(--c-shadow-rgb), .6)); }
.mfx.v14 .mbc-chip:active:not([aria-disabled="true"]) { transform: translateY(1px) scale(.95); }
.mfx.v14 .mbc-chip[aria-disabled="true"] { opacity: .4; filter: grayscale(.7); cursor: default; }
.mfx.v14 .mbc.lock .mbc-chip { opacity: .35; filter: grayscale(.8); }
.mfx.v14 .mbc-chip:focus-visible, .mfx.v14 .mbc-undo:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; }
.mfx.v14 .mbc-n { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; font: var(--fw-bold) 13px/20px var(--font-num); text-align: center; color: #fff; background: var(--t-danger-5); box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), .6); pointer-events: none; }
.mfx.v14 .mbc-undo { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-round); background: none; cursor: pointer; font: var(--fw-bold) 20px/1 var(--font-body); color: var(--c-ink); box-shadow: inset 0 0 0 2px rgba(var(--c-ink-rgb), .25); }
.mfx.v14 .mbc-undo:hover:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 2px var(--c-accent-2); }
.mfx.v14 .mbc-undo[aria-disabled="true"] { opacity: .3; cursor: default; }
/* «выигрыш до» right over the ring (owner 23.10) */
.mfx.v14 .mmed-top:has(.mbc-win) { position: absolute; right: 0; bottom: 182px; width: 148px; justify-content: center; }
.mfx.v14 .mbc-win { font: var(--fw-semi) 17px var(--font-body); color: var(--c-accent-2-tx); text-align: center; white-space: nowrap; text-shadow: 0 2px 6px var(--c-shadow); }
.mfx.v14 .mbc-win.off { opacity: .5; }
.mfx.v14 .mmed-big { font: var(--fw-bold) 40px/1 var(--font-num); }
.mfx.v14 .mmed-dial.ok .mmed-track { stroke: var(--t-ok-5, #4f9d6a); }
.mfx.v14 .mmed-dial.ok .mmed-disc { color: #dff5e6; background: radial-gradient(circle at 40% 30%, #3f8a5b, #245a3a 70%); box-shadow: inset 0 0 0 var(--bw-strong) #6fcf94, 0 8px 18px rgba(var(--c-shadow-rgb), .6); }
.mfx.v14 .mmed-dial.ok .mmed-lb { font-size: 13px; }
/* a build's icon (owner 22.10): the picker's grid and the sign that opens it */
.modal.bicowin { width: 760px; max-width: none; }
.bicons { display: grid; grid-template-columns: repeat(10, 56px); gap: 10px; justify-content: center; }
.bico { width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; color: var(--c-ink); background: var(--c-surface-2); box-shadow: inset 0 0 0 var(--bw) var(--c-line); transition: box-shadow .12s ease, color .12s ease; }
.bico:hover { color: var(--c-accent-2-tx); box-shadow: inset 0 0 0 1.5px var(--c-accent-2); }
.bico.on { color: var(--c-accent-2-tx); box-shadow: inset 0 0 0 2px var(--c-accent-2), 0 0 12px rgba(var(--c-accent-2-rgb), .35); }
.bico:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; }
.bico-edit { border: 0; padding: 0; cursor: pointer; background: none; color: inherit; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--c-line); }
.bico-edit:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent-2); }
/* SKELETON (owner 22.10, docs/plan/screens-redesign-2210.md): the menu, the room, the profile, the ladder, the loading screen and the
   tutorial card lost their look before the redesign; this keeps them usable and nothing more */
.screen.skel { box-sizing: border-box; padding: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; overflow: auto; background: var(--c-bg); color: var(--c-ink); font: var(--fw-med) 18px/1.4 var(--font-body); }
.skel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
button.skel-row { border: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.skel-row.me { box-shadow: inset 0 0 0 1.5px var(--c-accent-2); }
.skel-warn { color: var(--c-danger-2); }
.skel-code { font: var(--fw-bold) 24px var(--font-num); letter-spacing: .1em; }
/* the step card sits under the enemies' row, on the empty left of the felt: at top 90px it hid Enemy 1's first slot and name (audit 30.10) */
.tutwrap .skel-card { position: absolute; z-index: 46; left: 24px; top: 312px; max-width: 520px; box-sizing: border-box; padding: 16px; border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink); font: var(--fw-med) 17px/1.4 var(--font-body); }

/* Workshop plate on the home table (owner 22.10): the mat is all build — big icon and name left, passives and souls as icon wells right. */
.menu-build { display: flex; align-items: center; justify-content: space-between; gap: 32px; box-sizing: border-box; width: 100%; height: 100%; padding: 0 28px; overflow: hidden; color: var(--c-ink); }
.mb-head { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mb-sign { display: inline-flex; flex: none; }
.mb-name { max-width: 230px; min-width: 0; font: var(--fw-bold) 28px/1.1 var(--font-display); color: var(--tb-brass-hi); text-wrap: balance; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.mb-name-long { font-size: 22px; }
.mb-side { display: flex; align-items: center; gap: 34px; flex: none; }
.mb-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mb-cap { font-size: .68em; font-style: normal; font-variant: small-caps; text-transform: lowercase; letter-spacing: .14em; color: var(--tb-brass-hi); opacity: .6; }
.mb-wells { display: flex; align-items: center; }
.mb-passives .mb-wells { gap: 14px; }
.mb-medal { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; color: rgba(var(--tb-wood-lo-rgb), .9); background: radial-gradient(circle at 34% 28%, var(--tb-brass-hi), var(--tb-brass) 55%, var(--tb-brass-lo)); box-shadow: inset 0 0 0 3px var(--tb-brass-lo), inset 0 0 0 5px rgba(var(--tb-wood-hi-rgb), .5), 0 3px 6px rgba(var(--tb-wood-lo-rgb), .8); transition: transform .15s; }
.mb-medal:hover { transform: translateY(-3px); }
.mb-coin { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(var(--tb-wood-rgb), .95), rgba(var(--tb-leather-lo-rgb), 1)); box-shadow: inset 0 0 0 2px var(--tb-brass), 0 2px 5px rgba(var(--tb-wood-lo-rgb), .8); transform: rotate(-4deg); transition: transform .15s; }
.mb-coin:first-child { margin-left: 0; }
.mb-coin:nth-child(even) { transform: rotate(4deg) translateY(2px); }
.mb-coin:hover { transform: translateY(-5px) rotate(0); z-index: 1; }

/* Home table speaker (tablemusic.ts) */
.mtf-tx.dim { opacity: .7; margin-top: 4px; }
/* the preset plate's measured profile (owner 24.10 «Да, переноси»): the verb ring around the crest, the rounds line, the table scale */
.bbr-ring { position: relative; flex: none; width: 84px; height: 84px; }
.bbr-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bbr-ring .bbr-crest { position: absolute; inset: 10px; width: auto; height: auto; }
.bbr-rg { fill: none; stroke-width: 6; }
.bbr-rg.rg-yellow { stroke: var(--fam-mc-yellow); } .bbr-rg.rg-white { stroke: var(--fam-mc-white); } .bbr-rg.rg-red { stroke: var(--fam-mc-red); } .bbr-rg.rg-blue { stroke: var(--fam-mc-blue); }
.bbr-cv { width: 100%; }
.bbr-cvbar { height: 12px; border-radius: 6px; }
.bbr-cvax { display: flex; justify-content: space-between; margin-top: 3px; font: var(--fw-med) 13px var(--font-body); color: var(--t-paper-11); }
.bbr-tb { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font: var(--fw-med) 14px var(--font-body); color: var(--t-paper-11); }
.bbr-tbtr { position: relative; height: 4px; border-radius: 2px; background: var(--t-surface2-13); }
.bbr-tbtr > i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--hue); }

/* slotmap «края» (owner 28.10 «использовать пространство максимально эффективно»): the slot speaks with its edges (midscreen.ts
   layoutMarks). 64 × 64: the top edge — the owner's colour of someone else's cell, ▲▼ as the corner, the form sign, the order's pips,
   ×2; the right edge — the target's tab, ☠, ⚔; the left edge — the shield's number (its ring inside the frame), the wear's pips; the
   bottom bar is the bowl (a red one's target on it), the growth and the points beside it; every figure 15px but the growth and the points (16px, below); the glyph in the middle */
.mfx .sk > .g { position: absolute !important; z-index: 4; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;
  inset: auto; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important;
  border: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; white-space: nowrap; font: var(--fw-heavy) 15px/1 var(--font-num) !important; } /* one size for every figure (owner 28.10 «очень слишком мелко», «на 2пх больше»: 11 → 15) */
.mfx .sk > .g-ten { left: 0 !important; top: 0 !important; width: 64px !important; height: 3px !important; z-index: 3; background: currentColor; border-radius: calc(var(--r-md) * 4 / 5) calc(var(--r-md) * 4 / 5) 0 0; }
.mfx .sk > .g-king { left: 0 !important; top: 0 !important; width: 13px !important; height: 13px !important; clip-path: polygon(0 0, 100% 0, 0 100%); border-top-left-radius: calc(var(--r-md) * 4 / 5); background: var(--fam-mc-yellow); }
.mfx .sk > .g-king.rear { background: rgba(var(--c-ink-rgb), .55); }
.mfx .sk > .g-form { left: 13px !important; top: 1px !important; width: 13px !important; height: 16px !important; }
.mfx .sk > .g-order { left: 26px !important; top: 1px !important; width: 22px !important; height: 16px !important; font-size: 13px !important; letter-spacing: -.4px; } /* «5/6» */
.mfx .sk > .g-order.pips { left: 26px !important; top: 6px !important; width: calc(var(--of) * 5px) !important; height: 6px !important; overflow: visible;
  background: radial-gradient(circle at 2.5px 3px, transparent 1.2px, var(--c-ink-2) 1.3px 2.1px, transparent 2.3px) 0 0 / 5px 6px repeat-x; }
.mfx .sk > .g-order.pips::before { content: ""; position: absolute; left: 0 !important; top: 0 !important; width: calc(var(--n) * 5px) !important; height: 6px !important;
  background: radial-gradient(circle at 2.5px 3px, var(--c-ink) 2.1px, transparent 2.3px) 0 0 / 5px 6px repeat-x; }
.mfx .sk > .g-fresh { left: 48px !important; top: 1px !important; width: 15px !important; height: 16px !important; }
.mfx .sk > .g-aim { left: 45px !important; top: 17px !important; width: 19px !important; height: 16px !important; justify-content: flex-start; padding-left: 2px !important; background: currentColor;
  clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%); }
.mfx .sk > .g-aim > b { color: var(--t-c-bg-2); font: inherit; }
.mfx .sk > .g-rider { left: 45px !important; top: 34px !important; width: 9px !important; height: 12px !important; font-size: 10px !important; }
.mfx .sk > .g-up { left: 54px !important; top: 34px !important; width: 9px !important; height: 12px !important; font-size: 10px !important; }
.mfx .sk > .g-ring { left: 1px !important; top: 1px !important; width: 62px !important; height: 62px !important; z-index: 3; border: 1.5px solid var(--t-info-1); border-radius: calc(var(--r-md) * 4 / 5 - 1px); }
.mfx .sk > .g-shield { left: 1px !important; top: 17px !important; width: 18px !important; height: 15px !important; border-radius: 3px; background: var(--t-info-1); }
.mfx .sk > .g-shield > b { color: var(--t-c-bg-2); font: inherit; }
.mfx .sk > .g-wear { left: 0 !important; top: 32px !important; width: 19px !important; height: 15px !important; letter-spacing: -.4px; font-size: 13px !important; } /* «5/6» */
.mfx .sk > .g-wear.pips { left: 6px !important; top: 32px !important; width: 6px !important; height: calc(var(--of) * 4px) !important; overflow: visible;
  background: radial-gradient(circle at 3px 2px, transparent 1px, var(--c-ink-2) 1.1px 1.8px, transparent 2px) 0 0 / 6px 4px repeat-y; }
.mfx .sk > .g-wear.pips::before { content: ""; position: absolute; left: 0 !important; top: 0 !important; width: 6px !important; height: calc(var(--n) * 4px) !important;
  background: radial-gradient(circle at 3px 2px, var(--c-ink) 1.8px, transparent 2px) 0 0 / 6px 4px repeat-y; }
.mfx .sk > .g-bowl { left: 25px !important; top: 48px !important; width: 14px !important; height: 14px !important; overflow: visible; }
.mfx .sk > .g-bowl .bt { position: static; width: 14px !important; height: 14px !important; border-radius: 7px; background: var(--bt-c); color: var(--t-c-bg-2); font: var(--fw-heavy) 12px/14px var(--font-num); font-style: normal; text-align: center; }
/* the growth and the points are read every move (owner 28.10 «не видно нихуя», «на 2пх больше»): 16px, each half of the bottom bar
   (29 / 33 px); a figure of 4+ signs («+1,2K» 27px, «≈1,2K» 32px at 14px) is 14px (layoutMarks marks it .long); a bowl in the middle
   of the bar takes its 14px and the two go 2px smaller beside it */
.mfx .sk > .g-grow { left: 1px !important; top: 48px !important; width: 29px !important; height: 15px !important; justify-content: flex-start; letter-spacing: -.4px; font-size: 16px !important; }
.mfx .sk > .g-pts { left: 30px !important; top: 48px !important; width: 33px !important; height: 15px !important; justify-content: flex-end; letter-spacing: -.4px; font-size: 16px !important; }
.mfx .sk > .g-grow.long, .mfx .sk > .g-pts.long { font-size: 14px !important; }
.mfx .sk:has(> .g-bowl) > .g-grow { width: 24px !important; font-size: 14px !important; }
.mfx .sk:has(> .g-bowl) > .g-pts { left: 39px !important; width: 24px !important; font-size: 14px !important; }
.mfx .sk:has(> .g-bowl) > .g-grow.long, .mfx .sk:has(> .g-bowl) > .g-pts.long { font-size: 12px !important; }
/* the glyph 26px (was 30) so the edges' figures can grow: 19-45 x 18-44 */
.mfx .sk:not(.empty):not(.lit) .msign { top: 31px !important; }
.mfx .sk:not(.empty):not(.lit) .msign svg { width: 26px !important; height: 26px !important; }

/* the seat plate keeps its shape whatever the numbers (audit 27.10, items 9–14): a fixed height; the name keeps ~5 letters; the
   marks after it in one line of fixed height — one that does not fit wraps to the hidden second line (whole, never half under the
   chips); the chips' stack in a fixed box; the plan «→ ≈N +d» under the total, small, inside the plate */
.mfx.v14 .mach > .plate.mplate { height: 82px; }
.mfx.v14 .mplate .mmarks { flex: 1 1 0; min-width: 0; height: 24px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 6px; overflow: hidden; }
.mfx.v14 .mplate .mmark.out { color: var(--c-ink-dim); background: rgba(var(--c-ink-rgb), .08); }
.mfx.v14 .mres { flex: none; height: 36px; align-items: flex-end; }
.mfx.v14 .mres > svg { max-height: 36px; }
.mfx.v14 .mach > .plate.mplate .mtotal { top: 0; flex-direction: column; align-items: flex-end; gap: 0; font-size: 44px; }
.mfx.v14 .mach > .plate.mplate .mtotal .mt-then { position: static; font-size: 20px; line-height: 22px; }
.mfx.v14 .mach > .plate.mplate .mtotal .mt-then:not(:empty)::before { font-size: 16px; margin-right: 4px; }
.mfx.v14 .mach > .plate.mplate .mtotal .mt-then[data-d]::after { font-size: 16px; margin-left: 4px; }
.mfx.v14 .plate .clsrow .tag.more { padding: 2px 6px; font: var(--fw-bold) 14px/1 var(--font-num); cursor: help; }

/* the seat plate (owner 27.10 «у всего должно быть свое место», 28.10): a grid of fixed cells — changing one value moves no other part.
   crest | name (over the turn too) | chips | marks (top right); crest | passives | turn | chips | the total (bottom right) */
.mfx.v14 .mach > .plate.mplate { display: grid; grid-template-columns: 40px minmax(0, 1fr) 86px 64px 104px; grid-template-rows: 32px 32px;
  grid-template-areas: "crest nm nm chips marks" "crest pass turn chips total"; column-gap: 6px; row-gap: 4px; align-items: center; justify-items: start; }
.mfx.v14 .mach > .plate.mplate > .crest { grid-area: crest; }
.mfx.v14 .mach > .plate.mplate > .pnm { grid-area: nm; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfx.v14 .mach > .plate.mplate > .mmarks { grid-area: marks; width: 100%; }
.mfx.v14 .mach > .plate.mplate > .mres { grid-area: chips; }
.mfx.v14 .mach > .plate.mplate > .pturn { grid-area: turn; }
.mfx.v14 .mach > .plate.mplate > .prow { grid-area: pass; width: 100%; min-width: 0; overflow: hidden; }
.mfx.v14 .mach > .plate.mplate > .rt { grid-area: total; justify-self: end; margin: 0; }
.mfx.v14 .mach > .plate.mplate > :not(.crest) { align-self: stretch; display: flex; align-items: center; min-width: 0; } /* each cell fills its area: an empty one keeps its box */
.mfx.v14 .mach > .plate.mplate > .rt { width: 100%; justify-content: flex-end; } /* the total by its right edge, its plan «→ ≈N +d» before it */
.mfx.v14 .mach > .plate.mplate > .mmarks { align-self: center; height: 24px; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; } /* one line shown, from the right; a mark that does not fit wraps below, hidden */
.mfx.v14 .mach > .plate.mplate > .pnm { display: block; line-height: 32px; } /* a block, not a flex box: only a block shows the «…» of a long name */
.mfx.v14 .mach > .plate.mplate .mtotal { position: static; flex-direction: row-reverse; align-items: baseline; gap: 6px; font-size: 32px; line-height: 32px; }
.mfx.v14 .mach > .plate.mplate .mtotal .mt-then { font-size: 14px; line-height: 16px; }
.mfx.v14 .mach > .plate.mplate .mtotal .mt-then:empty { display: none; }
.mfx.v14 .mach > .plate.mplate .mtotal .mt-then:not(:empty)::before, .mfx.v14 .mach > .plate.mplate .mtotal .mt-then[data-d]::after { font-size: 12px; }
/* the chips: the reserve in the bet picker's chips — piles of 10, 5 and 1, each in its fixed place — and the number under them */
.mfx.v14 .mach > .plate.mplate > .mres { height: auto; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.mfx.v14 .mres .mcoins { display: grid; grid-template-columns: repeat(3, 18px); gap: 3px; height: 30px; align-items: end; }
.mfx.v14 .mres .mcoins > span { position: relative; height: 30px; }
.mfx.v14 .mres .mcoins svg { position: absolute; left: 0; width: 18px; height: 18px; filter: drop-shadow(0 1px 1px var(--c-shadow)); }
.mfx.v14 .mach > .plate.mplate .mres b { font-size: 18px; line-height: 18px; }

/* the fight's cell card speaks with its edges, as its slot does (owner 28.10 «то же самое, что с клеткой», «лишние слова не надо»;
   classview.ts cellCardEl, midscreen.ts cellTip): the top edge — someone else's cell in its owner's colour; the right rail — every state
   a badge, its sign over one figure, every figure one size, the sentence a plate beside the card; the bottom bar — the bowl in its
   colour, its target and what it gives; the middle, the most room — the points' formula and, past a divider, what it does to others */
.mtf .mtf-hd > div:nth-child(2) { min-width: 0; } .mtf .mtf-sb { white-space: nowrap; }
.mtf { overflow: hidden; }
.mtb { --tc: var(--c-ink-2); display: inline-flex; align-items: center; gap: 3px; height: 22px; color: var(--tc); white-space: nowrap; }
.mtb-ic { display: grid; place-items: center; font: var(--fw-heavy) 16px/1 var(--font-num); }
.mtb-ic svg { width: 17px; height: 17px; }
.mtb > b { font: var(--fw-heavy) 15px/1 var(--font-num); color: var(--c-ink); }
.mtb.aim { --tc: var(--fam-mc-red); } .mtb.grow { --tc: var(--fam-mc-white); } .mtb.bank { --tc: var(--t-accent2-1); } .mtb.soul { --tc: var(--c-accent-2-tx); }
.mtb.king { --tc: var(--fam-mc-yellow); } .mtb.rear { --tc: rgba(var(--c-ink-rgb), .6); } .mtb.rider { --tc: var(--rc); } .mtb.branded { --tc: var(--fam-mc-red); }
.mtb.once { --tc: var(--t-info-1); } .mtb.once > b { color: var(--tc); } .mtb.guess { opacity: .55; }
/* the corner: every state in one row from the right (owner 28.10 «просто в ряд, ничего лишнего»), a long row wraps under itself */
.mtf .mtf-cor { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 4px 12px; max-width: 290px; }
/* the plate beside the card for a corner mark (owner 28.10 «чётко, красиво, лишнего чтобы не было»): the same mark as in the corner on
   the left, its name and one sentence on the right; the bowl's plate opens with the bowl in its colour */
.kwplate.kwp-st { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; }
.kwplate.kwp-st > .mtb { justify-content: flex-start; height: 21px; }
.kwplate.kwp-st .kwp-name { margin-bottom: 1px; }
.kwplate.bowl-side .kwp-name { display: flex; align-items: center; gap: 8px; } .kwplate .bowl-ic { display: inline-flex; align-items: center; gap: 4px; color: var(--bc); }
.kwplate .bowl-ic .bt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--bt-c); color: var(--t-c-bg-2); font: var(--fw-heavy) 13px/1 var(--font-num); font-style: normal; }
.mtf-top { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--own); }
.mtf .mstrip-out { margin-left: auto; padding-left: 12px; border-left: var(--bw) solid rgba(var(--c-ink-rgb), .14); flex-direction: column; align-items: flex-end; flex-wrap: nowrap; max-width: none; }
.mtf .mstrip-out .mcq-i { padding: 4px 10px; gap: 6px; } .mtf .mstrip-out .mcq-i b { font-size: 22px; } .mtf .mstrip-out .mcq-ic { width: 22px; height: 22px; } .mtf .mstrip-out .mcq-ic svg { width: 18px; height: 18px; }
.mtf-bowl { --bc: var(--c-ink-2); display: flex; align-items: center; gap: 10px; margin: 14px -20px -18px; padding: 8px 20px; min-height: 40px; box-sizing: border-box;
  background: color-mix(in srgb, var(--bc) 16%, transparent); border-top: 3px solid var(--bc); }
.mtf-bowl.bowl-yellow { --bc: var(--fam-mc-yellow); } .mtf-bowl.bowl-white { --bc: var(--fam-mc-white); } .mtf-bowl.bowl-red { --bc: var(--fam-mc-red); } .mtf-bowl.bowl-blue { --bc: var(--fam-mc-blue); }
.mtf-bowl .bowl-ic { display: inline-flex; align-items: center; gap: 4px; color: var(--bc); }
.mtf-bowl .bt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 10px; background: var(--bt-c); color: var(--t-c-bg-2); font: var(--fw-heavy) 14px/1 var(--font-num); font-style: normal; }
.mtf-bowl .bowl-x { font: var(--fw-heavy) 14px/1 var(--font-num); color: var(--fam-mc-yellow); }
.mtf-bowl .mcq-r.bowl-fx { margin: 0; justify-content: flex-start; max-width: none; }

/* ---------- «Песочница»: a finding of the screen check outlined on the screen (viewer.ts) */
#mview-panel .sbx-sent { margin: 0 0 8px; padding-left: 22px; font-size: 12px; }
#mview-panel .sbx-sent code { word-break: break-all; }
#sbx-strip .sbx-bad { color: #ffb4aa; }
.sbx-hit { outline: 3px solid #ff3b2f !important; outline-offset: 1px; }