/* ═══════════════════════════════════════════════════════════════════════
   THE TOWER OF DEATH DESIGN — THE SINGLE SOURCE (Mike's decision
   2026-07-27: "design must come from one file, so that anything new is
   done our way right away").

   Here and only here live the TOKENS (sizes, paper, stone, font sizes,
   radii) and the ROLES — four classes used to mark up anything new:

     `.роль-гнездо`   a holder for an item: doll cell, map cell, item art
                      · sharp corner · hard frame · pressed inward
     `.роль-лист`     container: card, tile, panel, window, tooltip
                      · radius 2 · soft frame · no shadow
     `.роль-действие` anything pressable: button, tab, mode, chip, channel
                      · radius 3 · frame in the material's tone
     `.роль-метка`    a label with no action: tag, counter, badge · pill

   RULE: a new screen takes the roles from here and writes NO colors, radii
   or font sizes of its own. Need a size that doesn't exist — add a token
   here, not a literal on the spot. `tools/design_audit.py` checks this: it
   counts how many places are still outside the system, and that number
   must go down.

   Role details and why it is so — `дизайн/09-интерфейс.md`, the
   design-system section; how to build screens —
   `заметки/вёрстка-руководство.md`.
   ═══════════════════════════════════════════════════════════════════════ */

/* The «Книга Смерти» chrome font (Mike 2026-09-26) — self-hosted, not from a
   third-party server: the player does not go to Google for letters. Weight
   700 only, two subsets (Cyrillic, and Latin with digits), 31 KB; license —
   fonts/OFL-cormorant-sc.txt */
@font-face {
  font-family: 'Cormorant SC'; font-style: normal; font-weight: 700;
  font-display: swap; src: url(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-style: normal; font-weight: 700;
  font-display: swap; src: url(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;
}

/* Tower of Death — BK 2004-era style: light bg, Verdana 12px, blue links,
   gray panels, retro buttons. Our own CSS recreating the original's spirit. */

/* Size grid (дизайн/09-интерфейс, Mike's decision): all sizes are
   proportional to the screen — horizontals in vw with readability limits,
   text-zone verticals in em. Images are drawn for these frames (portrait
   2:3 300×450, icon 96×96, cell tile 88×88 — sources at 2×). Templates use
   only these variables. */
:root {
  /* grid sizes: +10% and another +10%
     (Mike's decisions, 2026-07-18) */
  --cell: clamp(32px, 2.9vw, 53px);      /* map cell, 1:1 */
  --icon: clamp(34px, 3.15vw, 53px);  /* item icon / arrow, 1:1 */
  --slot: clamp(121px, 11.5vw, 179px); /* doll slot column (proportions' W) */
  --portrait: clamp(117px, 10.9vw, 182px); /* character portrait 2:3 */
  --gauge: clamp(85px, 9.7vw, 157px);  /* timer gauge */
  --content: min(97vw, 1500px);        /* content column */
  /* chat online zone; +15% to the base (Mike's edit 2026-07-20) */
  --online: clamp(127px, 13.8vw, 207px);
  /* doll column exactly its width (the .doll formula) and a tighter
     character grid gap — a smaller hole between the doll and info
     (Mike's edit 2026-07-20) */
  --doll-coll: calc(var(--portrait) * 1.748 + 16px);
  --set-gap: clamp(16px, 1.8vw, 30px);
}
* { box-sizing: border-box; }
/* window scrollbar hidden (Mike's edit) — wheel/touchpad still work */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  background: var(--paper-bg); color: #000;
  font: 12px Verdana, Arial, sans-serif; margin: 0; line-height: 1.45;
  /* the page always fits the window exactly — the window itself does not
     scroll and shows no bars (Mike's edit 2026-07-20: the two-line header
     was bursting 100vh) */
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
a { color: #295fa6; }
a:hover { color: #cc0000; }

/* Scaffold as in BK: header → content → full-width bottom chat frame */

/* ═══ HEADER — one line (Mike's concept 2026-07-25) ═══════════════════════
   There used to be two 99px tiers, with the tabs hanging in a void and
   a menu of seven 11px links in the least reachable corner. Now it is
   44px, and each piece answers its own question: logo and tabs — where
   to go, clock — what is happening in the world, chips — how I am
   doing, nick — who I am. The stone and BK's "button-like" tabs
   stayed; the density changed. */
:root {
  /* ═══ DESIGN SYSTEM (Mike's decision 2026-07-25, prototype
     `прототип/дизайн-система.html`). Rule: SHAPE ENCODES ROLE, not the
     taste of a particular edit. There were 9 different corner radii and
     9 frames — now there are four roles. A new number in the styles is
     taken ONLY from here. */
  --r-socket: 0;        /* holder: doll cell, map cell, item art */
  --r-paper: 2px;        /* container: card, tile, panel, window */
  --r-action: 3px;    /* pressable: button, tab, mode, chip, channel */
  --r-tag: 999px;     /* no-action label: tag, counter, badge */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;      /* spacing step */
  /* FONT SIZES: 15 random sizes (8…30) became a ladder where each rung
     has its own job. 16px is NOT on the ladder: it is the iOS anti-zoom
     of input fields and the main red button. Tab glyphs are a size of
     their own; they are not text. */
  --k-badge: 9px;    /* digit in a counter pill */
  --k-tag: 10px;   /* CAPS caption, muted note */
  /* the caption line above the doll (name and level) — BOTH columns of the
     "doll + numbers" pair reserve it, see the `.пб-числа` primitive */
  --sbs-caption: 22px;
  --k-small: 11px;   /* secondary text */
  --k-base: 12px;    /* main game text */
  --k-val: 13px;    /* value, item name, nick */
  --k-accent: 15px;  /* block title, large button */
  --k-large: 18px;  /* large screen number */
  --k-heading: 22px;   /* screen name */
  --k-timer: 30px;  /* main countdown — unique game-wide */
  --k-glyph: 19px;    /* emoji tab icons on the phone */
  --paper-bg: #e8e3d9;      /* page bg (tooltip's too — "paper over paper") */
  --paper: #f4f0e7;          /* BK paper: card, panel, tile */
  --paper-header: #e4ded2;    /* table header — the same paper, a bit darker */
  --action-bg: #eae5d9;  /* button, tab, mode at rest */
  --action-hover: #f2eee4;
  --action-pressed: #ddd6c6;
  --action-off: #efece4;
  --track: #ddd6c6;         /* gauge track (HP, recharge) — not an action */
  --paper-field: #fffdf7;     /* input field and ACTIVE element (stone pairing) */
  --paper-edge: #d8d2c4;   /* soft frame — containers */
  --socket-edge: #9a9a9a; /* hard frame — sockets ONLY */
  --action-edge: #c2bba8;
  /* THE SOCKET STANDS OUT (Mike's edit 2026-07-26, from a BK screenshot).
     At first I made a niche — it came out "sunken", but in the original
     the cell is RAISED: light falls from the top-left, the shadow goes
     down-right, and the whole tile casts a shadow on the bg. The bevels
     are HARD, with no blur — hence the crispness */
  /* EMPTY cell — sunken (light from bottom-right): the spot is visibly free */
  --inset: inset -1px -1px 0 rgba(255, 255, 255, .8),
                  inset 1px 1px 0 rgba(122, 110, 86, .5),
                  inset 0 2px 4px rgba(58, 50, 34, .16);
  /* OCCUPIED — raised (light top-left, own shadow on the bg) */
  --raised-socket: inset 1px 1px 0 rgba(255, 255, 255, .95),
                     inset -1px -1px 0 rgba(122, 110, 86, .55),
                     0 2px 3px rgba(52, 44, 30, .30);
  --raised: drop-shadow(1px 2px 1.5px rgba(52, 44, 30, .45));
  /* The OLD soft inset — the one from before the doll layout. The Tower
     needs it: its cells are caught by the `[class*="яч-"]` selector, and
     overriding `--вдавленность` for the doll dragged foreign bevels and an
     outer shadow there (Mike's decision 2026-07-27: give the tournament
     back its old look, leave the character alone) */
  --inset-soft: inset 0 1px 2px rgba(0, 0, 0, .10);
  /* AN OCCUPIED SOCKET — one look for the whole game (reference breakdown,
     Mike 2026-07-26): a clean dark outline + a soft shadow under the tile,
     NO inner bevel. The art itself gives the volume. Kept in variables,
     otherwise the doll and the inventory cards drift apart — which is what
     happened: the card kept the niche */
  --taken-edge: #23201a;
  --taken-shadow: 0 1px 1px rgba(52, 44, 30, .16);
  --taken-bg: linear-gradient(#fdfbf5, #f4f0e7 55%, #f1ece1);

  /* ═══ THE «КНИГА СМЕРТИ» CHROME (Mike's choice 2026-09-26 out of five
     concepts, `арт/рама-концепты/Kniga.html`): the gray stone of the
     header and chat gave way to burgundy binding leather with double gold
     embossing; the meta tabs are bookmark ribbons hanging from under the
     header; the chat buttons are brass.
     THE «камень-…» NAMES ARE HISTORICAL: a hundred rules rest on them
     (fighter windows, shelf, notices, toasts), so the material was changed
     through values, not renaming. New things for the chrome come from the
     tokens below. */
  /* a lower header (Mike's edit 2026-09-26: "make the header smaller too"):
     58 → 46 px, medallion 44 → 34, plaques 30 → 26 — near the old stone 44 */
  --header: 46px;
  --plaque-height: 26px;   /* clock, chips, nick — one header row height */
  /* bookmark ribbons hang below the header — the content under them
     starts lower (desktop only: on a phone the tabs are in the bottom
     dock). Short ones: Mike's edit 2026-09-26, "smaller bookmarks, they
     take up a lot of space" (was 42px, the content moved up by 14px) */
  --ribbons: 30px;
  /* how much height the chrome took from the screen vs. the old stone
     one (header 44 + field 12 = 56): doll growth formulas subtract
     the increase so that screens with the doll don't slide under the
     chat */
  --chrome-extra: calc(var(--header) + var(--ribbons) + 6px - 56px);
  --stone-top: #3b1518;     /* leather without texture: gradient top */
  --stone-bottom: #200b0c;
  --button: #6a181c;          /* bookmark ribbon: tab/channel/chrome button */
  --button-hover: #86252a;
  --edge: #160707;          /* dark leather cut */
  --gold-text: #f1d08a;          /* text emboss: nick, numbers, clock */
  --edge-gold: #8a7850;   /* "you are here" on PAPER (active screen
                                 tab, chosen recipe) — not chrome */
  --text: #f3e6cc;           /* values on leather: parchment */
  --muted-leather: #c9b392;            /* captions, secondary on leather */
  --emboss: #c9a45c;        /* gold lines, plaque frames, ribbon trim */
  --leather: url(img/frame/leather.jpg) center / 768px auto #2a0f10;
  /* double emboss at the edge: the outer line brighter, the inner one
     dimmer and shorter, as on a spine. Bg layers, not pseudo-elements:
     this way the lines always stay under the content and don't argue
     with the medallion */
  --emboss-top:
    linear-gradient(rgba(201, 164, 92, .8), rgba(201, 164, 92, .8)) 10px 4px / calc(100% - 20px) 1px no-repeat,
    linear-gradient(rgba(201, 164, 92, .42), rgba(201, 164, 92, .42)) 14px 7px / calc(100% - 28px) 1px no-repeat;
  --emboss-bottom:
    linear-gradient(rgba(201, 164, 92, .42), rgba(201, 164, 92, .42)) 14px calc(100% - 7px) / calc(100% - 28px) 1px no-repeat,
    linear-gradient(rgba(201, 164, 92, .8), rgba(201, 164, 92, .8)) 10px calc(100% - 4px) / calc(100% - 20px) 1px no-repeat;
  --leather-shadow: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .48));
  /* gold-framed plaque: clock, chips, nick, menu */
  --plaque-frame: 0 0 0 1px var(--emboss), inset 0 0 0 3px rgba(0, 0, 0, .55),
                  inset 0 0 0 4px rgba(201, 164, 92, .5);
  --plaque-bg: rgba(0, 0, 0, .38);
  /* bookmark ribbon: dark edge — light middle — dark edge */
  --ribbon: linear-gradient(90deg, #5a1115, #84222a 50%, #5a1115);
  --ribbon-hover: linear-gradient(90deg, #6c171c, #9a2c33 50%, #6c171c);
  --ribbon-active: linear-gradient(90deg, var(--emboss) 0 3px, #9c2a2e 3px calc(100% - 3px), var(--emboss) calc(100% - 3px));
  /* brass: round chat buttons and time display */
  --brass: radial-gradient(circle at 35% 30%, #fbe7ae, #c99a45 45%, #6b4a1c 80%);
  --brass-hover: radial-gradient(circle at 35% 30%, #fff3cf, #dcb05a 45%, #7d5722 80%);
  --brass-edge: #3b2812;
  --brass-sign: #2a1609;
  /* ═══ BUTTONS AND TABS ON PAPER — variant D "brass and leather" (Mike's
     choice 2026-09-26, amended the same day: "more detailed and finer edge
     contrast, the buttons themselves thinner and smaller"). Screen modes
     are leather boards with brass corners on rivets; tabs are stitched
     leather straps on rivets; ordinary buttons are brass plates with
     stamped letters. The edges are soft: a semi-transparent edge, an
     embossed frame inside, a light shadow */
  /* LIGHT FINISH (Mike's edit the same day: "all buttons lighter, too
     bright a shade, needs to be lighter"): on paper — cognac leather (its
     own tile `leather-light.jpg`, the same grain as the binding), dark
     letters; "you are here" — muted wine instead of deep crimson. The
     dark burgundy remains only on the chrome — the header and the chat */
  /* a touch richer (Mike's edit: "buttons are good, but a touch
     brighter"): the tile is warmer, the whitish veil thinner */
  --leather-light: url(img/frame/leather-light.jpg) center / 768px auto #d2a972;
  --leather-board: linear-gradient(rgba(255, 250, 235, .14), rgba(90, 55, 25, .12)), var(--leather-light);
  /* the selected is half a tone darker (Mike's edit: "pressed buttons
     a tiny bit darker"; was #b0615a → #8c463f) */
  --leather-board-active: var(--wine);
  --leather-edge: rgba(110, 72, 35, .45);
  --leather-lettering: #4a2d16;
  --leather-lettering-active: #fff6e6;
  --stitch: rgba(95, 60, 28, .42);           /* dashed stitch on the strap */
  /* brass board corners: a 6.5 px triangle with a rivet — bg layers,
     under the text, at any width */
  --corners-brass:
    radial-gradient(circle at 3px 3px, #fff3cf 0 .9px, transparent 1.3px) top left / 9px 9px no-repeat,
    radial-gradient(circle at 6px 3px, #fff3cf 0 .9px, transparent 1.3px) top right / 9px 9px no-repeat,
    radial-gradient(circle at 3px 6px, #fff3cf 0 .9px, transparent 1.3px) bottom left / 9px 9px no-repeat,
    radial-gradient(circle at 6px 6px, #fff3cf 0 .9px, transparent 1.3px) bottom right / 9px 9px no-repeat,
    linear-gradient(135deg, #f1d28a 0 4px, #a87a30 4px 6.5px, transparent 6.5px) top left / 9px 9px no-repeat,
    linear-gradient(225deg, #f1d28a 0 4px, #a87a30 4px 6.5px, transparent 6.5px) top right / 9px 9px no-repeat,
    linear-gradient(45deg, #d4a650 0 4px, #8a6326 4px 6.5px, transparent 6.5px) bottom left / 9px 9px no-repeat,
    linear-gradient(315deg, #d4a650 0 4px, #8a6326 4px 6.5px, transparent 6.5px) bottom right / 9px 9px no-repeat;
  /* strap rivets — one at each end */
  --rivets:
    radial-gradient(circle at 6px 50%, #fbe7ae 0 1.1px, #8a6326 1.6px, transparent 2.1px),
    radial-gradient(circle at calc(100% - 6px) 50%, #fbe7ae 0 1.1px, #8a6326 1.6px, transparent 2.1px);
  /* flat plate brass — buttons on paper */
  --brass-flat: linear-gradient(#fcefcc, #efcf92 58%, #d9af68);
  --brass-flat-hover: linear-gradient(#fff7e0, #f5daa4 58%, #e2bb78);
  --brass-flat-edge: rgba(125, 90, 40, .42);
  /* A STRONG ACTION — the same wine leather as "you are here" (Mike
     2026-09-26: "the tone of «собрать отряд» sticks out to the eye —
     everything is uniform, the style must not break on any page").
     Before: bright red #8d1414 on the main buttons, the fight bar and
     «напасть» — a different tone than the selected modes. Now one wine
     for everything strong: the screen's main button, «Вперёд!!!»,
     «напасть», «продать сейчас», the fight bar; the main one stands out
     by size, brass corners and a gold frame, not by a red of its own */
  --wine: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .14)), linear-gradient(#9d4f48, #783630);
  --wine-hover: linear-gradient(rgba(255, 255, 255, .16), rgba(0, 0, 0, .1)), linear-gradient(#aa5a52, #85403a);
  --wine-blood: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .16)), linear-gradient(#8a3b35, #62241f);
  --wine-edge: rgba(70, 22, 16, .7);
  --wine-frame: inset 0 0 0 3px rgba(255, 255, 255, .05), inset 0 0 0 4px rgba(255, 228, 190, .42);
  --wine-lettering: #fff6e6;
  --wine-shadow-lettering: 0 1px 1px rgba(60, 15, 10, .45);
  /* a dimmed action (closed, not allowed) — pale light leather */
  --leather-fading: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)), var(--leather-light);
  --leather-fading-lettering: #8a7658;
  /* ═══ ITEM LEVEL AND GRADE (Mike 2026-09-26: "highlight the levels
     properly: items are divided by inner level and by level as the base").
     LEVEL — the metal of the «N ур» plate: 1 bronze, 2 silver, 3 gold.
     GRADE I–IV — a gem in the color of its grade's forging stone. Both
     marks — only next to the item name: the image mounting is removed
     (Mike 2026-09-26) */
  --metal-1: linear-gradient(#f0cfa6, #bd8650 55%, #85562b);
  --metal-1-trim: #a8733f;  --metal-1-lettering: #3a2210;
  --metal-2: linear-gradient(#fbfcfd, #c9cdd2 55%, #8f959c);
  --metal-2-trim: #9ea4ab;  --metal-2-lettering: #262b31;
  --metal-3: linear-gradient(#fff3c2, #e6bd4e 55%, #a97a18);
  --metal-3-trim: #c79a30;  --metal-3-lettering: #3b2804;
  --gem-1: radial-gradient(circle at 35% 30%, #f1f1ec, #a3a39b 45%, #5f5f58 90%);
  --gem-2: radial-gradient(circle at 35% 30%, #c8f5cf, #3f9d57 45%, #1b5a2c 90%);
  --gem-3: radial-gradient(circle at 35% 30%, #cfe2ff, #3a74c9 45%, #1a3b73 90%);
  --gem-4: radial-gradient(circle at 35% 30%, #ffd0cc, #c8313b 45%, #6a0d16 90%);
  /* «ты в деле» — the same finish, green */
  --leather-green: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .14)), linear-gradient(#6a8752, #4b6a3d);
  /* chrome font — Cormorant SC (OFL, lives in static/fonts): serif small
     caps, like a stamp on a binding. Chrome only — game text is Verdana */
  --font-chrome: 'Cormorant SC', 'Palatino Linotype', Palatino, Georgia, serif;
  /* CHROME FONT SIZES — their own short ladder: Cormorant small caps
     have short lowercase; its 17px equal 13px Verdana to the eye. Two
     rungs, no literals in the chrome rules */
  --k-chrome: 17px;        /* ribbons, clock/chip plaques, nick+menu */
  --k-chrome-small: 15px;  /* channels, captions, narrow screens */

  /* ── SEMANTIC COLORS ────────────────────────────────────────────────
     They cannot be reduced to paper and stone: they encode CONTENT, not
     material. But their source is still one — here (Mike's edit
     2026-07-27: these same colors used to sit as literals right in the
     templates, and "one place" was only about CSS). */
  --good: #0a7a0a;          /* gain, success, «изучено» */
  --bad: #a01818;           /* shortage, damage, loss */
  --alarm: #cc3322;         /* «есть что вложить», broken */
  --rare: #7a0a7a;          /* permanent, portal — the out-of-ordinary */
  --muted-paper: #8a8272;       /* caption and secondary ON PAPER */
  --quieter-paper: #999;          /* very muted: «пока ничего», a dash */
  --ink-paper: #3b382f;         /* main text ON PAPER: card section titles,
                                 bold numbers (BK reference,
                                 Mike 2026-08-03); until now `var(--чернила)`
                                 silently fell through to inheritance in a
                                 couple of places */
}

/* ── ROLES: all new things are marked up with these ───────────────────── */
.role-socket {
  background: var(--paper-field); border: 1px solid #9a9a9a; border-radius: 0;
  box-shadow: var(--inset);
}
.role-paper {
  background: var(--paper); border: 1px solid var(--paper-edge);
  border-radius: var(--r-paper); box-shadow: none;
}
.role-action {
  background: var(--action-bg); color: #3b382f;
  border: 1px solid var(--action-edge); border-radius: var(--r-action);
  cursor: pointer;
}
.role-action:hover:not(:disabled) { background: var(--action-hover); }
.role-action:active { background: var(--action-pressed); }
/* "you are here" — the same on stone and on paper: light paper + gold edge */
.role-action.current, .role-selected {
  background: var(--paper-field); color: #1f1f1f;
  border-color: var(--edge-gold); box-shadow: inset 0 0 0 1px #fffdf7;
}
.role-tag {
  display: inline-block; padding: 1px 7px; background: var(--action-bg);
  border: 1px solid var(--paper-edge); border-radius: var(--r-tag);
  font-size: var(--k-tag); color: #5a554c;
}