/* «Режим безумия» (2026-09-19): the app in the game's style, a grim madhouse with black humor.
   All of the mode's styling is under html.mad; the normal look is not touched by this file (except the
   switch in the menu header). Fonts and background come from the game CDN, the same files its client draws;
   without the CDN the fallback fonts stay and the mode does not break. Texts are rewritten by mad.js. */

@font-face {
  font-family: "Madhouse Old";
  src: url("https://cdn.cargohustle.online/assets/font/OLD_bezpredmet_old.woff") format("woff");
  font-display: swap;
  unicode-range: U+0000-0030, U+0032-10FFFF;
}
/* The game font's "1" looks like "I" ("I8 450" read as a letter). Only the digit "1" comes from our own
   font with the same metrics (fonts/madhouse-one.woff, built by scripts/mad/make_one_font.py). */
@font-face {
  font-family: "Madhouse Old";
  src: url("fonts/madhouse-one.woff?v=1") format("woff");
  font-display: swap;
  unicode-range: U+0031;
}
@font-face {
  font-family: "Madhouse Assuan";
  src: url("https://cdn.cargohustle.online/assets/font/ASSUAN_Assuan.woff") format("woff");
  font-display: swap;
}

/* --- switch in the menu header: always visible ---------------------------------------- */
/* Menu is 304 px wide: "Madhouse" + switch + close button cramped together, with no gap the label touched
   the close button, and with Roboto/SF it overflowed the edge. 8 px gap and a slightly smaller sign and label. */
.drawer-head { gap: 8px; }
.drawer-head .drawer-brand { font-size: 18px; }
.drawer-head .mad-switch { margin: 0 auto 0 0; }
.mad-switch {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 0; border: 0; background: transparent; color: var(--hint);
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mad-switch-track {
  position: relative; flex: 0 0 auto; width: 50px; height: 24px; border-radius: 999px;
  background: rgba(127, 127, 127, .32); transition: background .2s ease, box-shadow .2s ease;
}
/* The knob is a long pill capsule: off is pale, on is red-white (owner's request). */
.mad-switch-knob {
  position: absolute; top: 4px; left: 3px; width: 30px; height: 16px; border-radius: 999px;
  background: linear-gradient(90deg, #fbf7ee 0 50%, #d9cfc4 50% 100%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .2s ease, background .2s ease;
}
.mad-switch-knob::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 2px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .6);
}
.mad-switch.on .mad-switch-track { background: #5e1010; box-shadow: 0 0 10px rgba(216, 53, 42, .55); }
.mad-switch.on .mad-switch-knob {
  transform: translateX(14px);
  background: linear-gradient(90deg, #f6ecd6 0 50%, #d0342a 50% 100%);
}
.mad-switch.on .mad-switch-label { color: #e0503f; }
.mad-switch:active .mad-switch-track { transform: scale(.95); }
@media (max-width: 359px) { .mad-switch-label { display: none; } }

/* --- tutorial for old players (version 2.0): darkness, a lit window and the orderly's note ------
   Also shown in the normal theme, so not under html.mad. The window is a hole in the dimming
   (a huge shadow around it), the whole layer catches taps, and mad.js lets through only those in the window.
   The layer is above the menu (30) and toasts (40) but below the "Bot updating / No connection" screen (.upd, 100):
   that one can appear mid-tutorial, and then it covers the tutorial instead of hiding under it. */
.mad-tut { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mad-tut-hole {
  position: fixed; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(8, 5, 3, .86), 0 0 0 3px #c0392b, 0 0 26px 8px rgba(224, 70, 58, .55);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.mad-tut-hole::after {
  content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: inherit; border: 2px solid rgba(224, 70, 58, .8);
  animation: mad-tut-pulse 1.6s ease-out infinite;
}
@keyframes mad-tut-pulse {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.mad-tut-note {
  position: fixed; box-sizing: border-box; padding: 12px 14px 10px; pointer-events: none;
  background: #eadbb8; color: #2a1c10; border-left: 6px solid #8b1e1e; border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7);
  font: 400 15px/1.4 "Madhouse Old", "Courier New", monospace; transform: rotate(-.8deg);
  transition: left .3s ease, top .3s ease;
}
.mad-tut-arrow {
  position: absolute; top: -9px; width: 18px; height: 18px; background: #eadbb8;
  transform: rotate(45deg);
}
.mad-tut-title {
  display: block; margin-bottom: 4px; color: #8b1e1e;
  font: 400 18px/1.2 "Madhouse Assuan", "Madhouse Old", serif; letter-spacing: .02em;
}
.mad-tut-step { margin-top: 6px; font-size: 12px; color: #6e5838; text-align: right; }
.mad-tut-note.shake { animation: mad-tut-shake .4s ease; }
@keyframes mad-tut-shake {
  0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; }
  60% { translate: -4px 0; } 80% { translate: 3px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mad-tut-hole::after, .mad-tut-note.shake { animation: none; }
  .mad-tut-hole, .mad-tut-note { transition: none; }
}

/* --- palette and fonts ------------------------------------------------------------------ */
html.mad {
  --bg: #120d09;
  --bg2: #1f1812;
  --text: #eee1c7;
  --hint: #a8977a;
  --link: #e8c46a;
  --btn: #8b1e1e;
  --btn-text: #f6ecd2;
  --danger: #e0503f;
  --ok: #9fcf5a;
  --warn: #e8b04a;
  --radius: 4px;
  --mad-paper: #eadbb8;
  --mad-ink: #2a1c10;
  --mad-line: rgba(201, 176, 124, .22);
    /* Grain: light for dark surfaces, dark for paper. */
  --mad-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .7  0 0 0 0 .5  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --mad-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .18  0 0 0 0 .06  0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
/* The browser moves body's background to the whole screen and sizes it by the root's height. On a short
   tab (empty "Архив") the root is shorter than the screen, and the gradients tiled, giving red
   stripes every couple hundred pixels. Root is at least screen height, background does not repeat. */
html.mad { min-height: 100%; }
html.mad body {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(139, 30, 30, .22), transparent 60%),
    radial-gradient(140% 90% at 50% 120%, rgba(0, 0, 0, .85), transparent 60%),
    #120d09;
  background-repeat: no-repeat;
  font-family: "Madhouse Old", "Courier New", ui-monospace, monospace;
  letter-spacing: .01em;
}
/* The madhouse corridor behind everything: the same background as the game loading screen. */
html.mad body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("https://cdn.cargohustle.online/assets/bg_loading_madhouse.webp") center / cover no-repeat;
  opacity: .14; filter: sepia(.5) contrast(1.15);
}
/* Interference of an old monitor and a lamp about to burn out. */
html.mad body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    var(--mad-noise);
  opacity: .32; will-change: opacity;
  animation: mad-lamp 9s steps(1) infinite;
}
@keyframes mad-lamp {
  0%, 61%, 64%, 67%, 100% { opacity: .32; }
  62% { opacity: .55; }
  63% { opacity: .2; }
  65% { opacity: .6; }
  66% { opacity: .28; }
}
html.mad main { padding-top: 16px; }

/* --- header: blood drips from the edge ---------------------------------------------------------- */
html.mad .top {
  background: linear-gradient(#1c150f, #120d09);
  box-shadow: 0 1px 0 rgba(201, 176, 124, .22), 0 8px 18px rgba(0, 0, 0, .55);
}
html.mad .top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='14' viewBox='0 0 180 14'><path fill='%237a1414' d='M0 0h180v2.5c-6 0-7 .5-8 3s-1 5-3 5-2-2.5-2.5-5-2-3-7-3H130c-4 0-5 1-5.5 4.5S123 13 121 13s-2.5-2-3-6-2-4.5-6-4.5H78c-5 0-6 .5-6.5 2S71 7.5 69 7.5 67 6 66.5 4.5 64 2.5 58 2.5H22c-4 0-5 1-5.5 3.5S15 10 13 10s-2.5-2-3-4S7 2.5 0 2.5Z'/></svg>") repeat-x 0 0 / 180px 14px;
}
/* One drop sometimes breaks off the longest streak. */
html.mad .top::before {
  content: ""; position: absolute; left: 119px; top: calc(100% + 10px); width: 4px; height: 6px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #8b1e1e; pointer-events: none;
  opacity: 0; animation: mad-drop 7s ease-in infinite;
}
@keyframes mad-drop {
  0%, 70% { transform: translateY(0) scaleY(.6); opacity: 0; }
  74% { transform: translateY(0) scaleY(1); opacity: 1; }
  96% { transform: translateY(60px) scaleY(1.3); opacity: .9; }
  100% { transform: translateY(70px) scaleY(1.3); opacity: 0; }
}
html.mad .brand {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 21px; letter-spacing: .03em;
  color: #efe2c4; text-shadow: 2px 2px 0 rgba(139, 30, 30, .75);
}
html.mad .who { font-size: 12px; }
/* Wallet in the header: parchment-colored typewriter, divider is the header's seam. */
html.mad .top-wallet { font-size: 13px; }
html.mad .top-wallet .tw-i b { font-weight: 400; color: #efe2c4; }
html.mad .top-wallet .tw-stats { border-left-color: var(--mad-line); }
html.mad .icon-btn {
  border-radius: 50%; color: #efe2c4;
  background: radial-gradient(circle at 35% 30%, #4d4238, #17110c 72%);
  box-shadow: inset 0 0 0 2px rgba(201, 176, 124, .35), inset 0 -3px 6px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .6);
}
html.mad .back-btn { background: radial-gradient(circle at 35% 30%, #b8352c, #5e1010 75%); }
html.mad .menu-dot { background: #e0503f; box-shadow: 0 0 8px rgba(224, 80, 63, .8); }

/* --- menu: dark wood, iron rivets instead of colored plates ------------------------- */
html.mad .drawer-overlay { background: rgba(30, 0, 0, .62); }
html.mad .drawer {
  border-radius: 0; background: var(--mad-noise), linear-gradient(90deg, #15100b, #1f1711);
  border-right: 2px solid rgba(201, 176, 124, .22);
  box-shadow: 0 0 60px rgba(0, 0, 0, .85), inset -12px 0 30px rgba(0, 0, 0, .45);
}
html.mad .drawer-brand {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 21px; letter-spacing: .04em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #e0463a; -webkit-text-fill-color: #e0463a;
  text-shadow: 0 0 6px rgba(224, 70, 58, .65), 0 0 18px rgba(139, 30, 30, .6);
  animation: mad-neon 6s steps(1) infinite;
}
/* Sign with a faulty lamp: sometimes goes out for a split second. */
@keyframes mad-neon {
  0%, 18%, 21%, 55%, 57%, 100% { opacity: 1; }
  19%, 56% { opacity: .35; text-shadow: none; }
  20% { opacity: .8; }
}
html.mad .drawer-nav button {
  font-weight: 400; font-size: 16px; color: #d9cba9; border-radius: 3px;
}
html.mad .drawer-nav button.active {
  background: linear-gradient(90deg, rgba(139, 30, 30, .5), rgba(139, 30, 30, 0) 90%);
  color: #f6ecd2; box-shadow: inset 3px 0 0 #c0392b;
}
html.mad .nav-ico {
  border-radius: 50%; color: var(--c);
  background: radial-gradient(circle at 35% 30%, #4d4238, #15100b 72%);
  box-shadow: inset 0 0 0 2px rgba(201, 176, 124, .32), inset 0 -3px 6px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .7);
}
html.mad .drawer-nav button[data-tab="profile"]   { --c: #e8c46a; }
html.mad .drawer-nav button[data-tab="energy"]    { --c: #f0b44a; }
html.mad .drawer-nav button[data-tab="quests"]    { --c: #d9c38a; }
html.mad .drawer-nav button[data-tab="business"]  { --c: #c9a15a; }
html.mad .drawer-nav button[data-tab="dice"]      { --c: #e6dcc4; }
html.mad .drawer-nav button[data-tab="mutagens"]  { --c: #9fcf5a; }
html.mad .drawer-nav button[data-tab="wardrobe"]  { --c: #c08a5a; }
html.mad .drawer-nav button[data-tab="friends"]   { --c: #9ab4bc; }
html.mad .drawer-nav button[data-tab="bosses"]    { --c: #e0503f; }
html.mad .drawer-nav button[data-tab="fight"]     { --c: #ff6a50; }
html.mad .drawer-nav button[data-tab="raid"]      { --c: #8fa2c0; }
html.mad .drawer-nav button[data-tab="pvp"]       { --c: #d98a5a; }
html.mad .drawer-nav button[data-tab="stats"]     { --c: #cbb98f; }
html.mad .drawer-nav button[data-tab="changelog"] { --c: #e8c46a; }
html.mad .drawer-nav button[data-tab="feedback"]  { --c: #b9c4a0; }
html.mad .drawer-nav button[data-tab="notify"]    { --c: #d08aa0; }
html.mad .drawer-nav button[data-tab="sub"]       { --c: #ffde88; }
html.mad .drawer-nav button[data-tab="admin"]     { --c: #a8b0bc; }
html.mad .nav-badge {
  background: #c0392b; font-weight: 400;
  box-shadow: 0 0 0 2px #15100b, 0 0 8px rgba(224, 80, 63, .6);
}
/* State badges: a full drip is poison green, the rest is a dull brass tag. */
html.mad .nav-badge.ok {
  background: #3f7d2c; color: #eaf6c8;
  box-shadow: 0 0 0 2px #15100b, 0 0 8px rgba(140, 220, 90, .55);
}
html.mad .nav-badge.soft {
  background: rgba(21, 16, 11, .85); color: var(--c, #d9cba9);
  box-shadow: inset 0 0 0 1px rgba(201, 176, 124, .35);
}
/* Divider is a surgical seam. */
html.mad .drawer-sep {
  height: 2px; flex-basis: 2px; background: repeating-linear-gradient(90deg, rgba(192, 57, 43, .65) 0 6px, transparent 6px 11px);
}

/* --- cards: sheets on tape, headings with a seam ------------------------------------------ */
html.mad .card {
  position: relative; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 240, 210, .04), rgba(0, 0, 0, .1)), var(--mad-noise), #1f1812;
  border: 1px solid var(--mad-line);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .05), 0 8px 18px rgba(0, 0, 0, .45);
}
/* The fight tab keeps its cards in two blocks (.fight-main, .fight-side), "Mutagens in items" too
   (.gear-side, .gear-list), wardrobe with "Sharpening" too (.wr-side, .wr-list), so they get tape as well. */
html.mad .tab > .card::before, html.mad .fight-main > .card::before, html.mad .fight-side > .card::before,
html.mad .gear-side > .card::before, html.mad .gear-list > .card::before,
html.mad .wr-side > .card::before, html.mad .wr-list > .card::before {
  content: ""; position: absolute; top: -8px; left: 22px; width: 64px; height: 16px; pointer-events: none;
  background: rgba(226, 212, 180, .26); transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html.mad .tab > .card:nth-child(even)::before, html.mad .fight-side > .card:nth-child(even)::before,
html.mad .fight-main > .card:has(> .fight-head)::before {   /* left of the fight card: boss portrait */
  left: auto; right: 26px; transform: rotate(3deg); width: 54px;
}
html.mad .card > h2:first-child {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 19px; letter-spacing: .02em;
  padding-bottom: 7px; margin-bottom: 8px; border-bottom: 2px dashed rgba(192, 57, 43, .55);
}
/* "Mutagens in items" sections are collapsibles: heading like a card's, the seam only when open. */
html.mad .gear-sec > summary {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 19px; letter-spacing: .02em;
}
html.mad .gear-sec[open] > summary { padding-bottom: 7px; margin-bottom: 8px; border-bottom: 2px dashed rgba(192, 57, 43, .55); }
html.mad .gear-sec-n, html.mad .gear-sec-idle { font-family: "Madhouse Old", monospace; letter-spacing: 0; font-weight: 400; }
html.mad .gear-sec-n { border-radius: 3px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 176, 124, .16); }
html.mad .gear-list .gear-row.sel { border-radius: 3px; background: rgba(159, 207, 90, .09); }
/* Fight card: the heading sits next to the boss portrait, so the seam goes under the whole header. */
html.mad .fight-who > h2 {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 19px; letter-spacing: .02em;
}
html.mad .fight-head { padding-bottom: 9px; border-bottom: 2px dashed rgba(192, 57, 43, .55); }
/* nowrap: «в палате: 6 / 50» does not break, otherwise a lone "/ 50" drops to a new line */
html.mad .card h2 .sub { font-family: "Madhouse Old", monospace; letter-spacing: 0; white-space: nowrap; }
html.mad .row + .row, html.mad .fr-row + .fr-row, html.mad .gear-row + .gear-row,
html.mad .count-row, html.mad .switch-row + .switch-row, html.mad .mut-step, html.mad .drop-cat,
html.mad .wr-sum-row + .wr-sum-row {
  border-top-style: dashed; border-top-color: rgba(201, 176, 124, .18);
}
html.mad .stat, html.mad .statline, html.mad .task, html.mad .item, html.mad .wr-item, html.mad .biz-item,
html.mad .gear-pick, html.mad .mut-tile, html.mad .die, html.mad .plan, html.mad .admin-user, html.mad .fb-dialog {
  border-radius: 3px;
}
html.mad .stat { background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 176, 124, .16); }
html.mad .stat .n, html.mad .energy-big, html.mad .stepper .count, html.mad .count-unit, html.mad .hud-frac, html.mad .mut-step-val {
  font-weight: 400;
}
html.mad .energy-big { font-family: "Madhouse Assuan", "Madhouse Old", serif; letter-spacing: .01em; }
html.mad .task { background: rgba(0, 0, 0, .28); border-left: 3px solid rgba(201, 176, 124, .3); }
html.mad .item { background: var(--mad-noise), #1f1812; border: 1px solid rgba(201, 176, 124, .14); }
html.mad .wr-item, html.mad .biz-item, html.mad .gear-pick, html.mad .statline {
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(201, 176, 124, .14);
}
/* Fight "History": the result strip on the left stays colored in the mode, drops are tags on a string */
html.mad .hist { border-left: 3px solid rgba(201, 176, 124, .3); }
html.mad .hist-ok { border-left-color: #9fcf5a; }
html.mad .hist-danger { border-left-color: #e0503f; }
html.mad .hist-warn { border-left-color: #e8b04a; }
html.mad .hist-name b, html.mad .hist-meta b { font-weight: 400; }
html.mad .hist-drop { border-radius: 3px; background: rgba(0, 0, 0, .32); border: 1px dashed rgba(201, 176, 124, .28); }
/* Boss order in the raid is a note in the personal file; a star on a violent patient is a tag, the lock has no indent */
html.mad .raid-prio { border-radius: 3px; background: rgba(0, 0, 0, .28); border: 1px dashed rgba(201, 176, 124, .28); }
html.mad .raid-prio-head b { font-weight: 400; }
html.mad .raid-prio .q-row { border-top-style: dashed; border-top-color: rgba(201, 176, 124, .18); }
html.mad .star-btn.locked::before { margin-right: 0; }
html.mad .plan { background: rgba(0, 0, 0, .3); border: 1px dashed rgba(201, 176, 124, .4); }
html.mad .plan.best { border: 1px solid #c9b07c; box-shadow: inset 0 0 0 1px #c9b07c, 0 0 16px rgba(201, 176, 124, .2); }
html.mad .task-name, html.mad .plan .price, html.mad .task-rate, html.mad .task-cost, html.mad .fr-who b,
html.mad .item .name, html.mad .wr-plus, html.mad .wr-stat { font-weight: 400; }

/* --- buttons: blood, iron and locks -------------------------------------------------------- */
html.mad .btn, html.mad .task-go, html.mad .fr-btn {
  font-weight: 400; letter-spacing: .02em; border-radius: 3px;
  background: linear-gradient(180deg, #a52a24, #6e1414); color: #f6ecd2; border: 1px solid #3d0b0b;
  box-shadow: inset 0 1px 0 rgba(255, 200, 180, .25), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 2px 0 #240606, 0 4px 10px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
html.mad .btn:active, html.mad .task-go:active, html.mad .fr-btn:active {
  transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 200, 180, .2), 0 0 0 #240606;
}
html.mad .btn.secondary, html.mad .fr-btn.alt {
  background: linear-gradient(180deg, #2c231b, #1a130d); color: #e9dcbd;
  border: 1px solid rgba(201, 176, 124, .38);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .07), 0 2px 0 #0a0705;
}
html.mad .btn.danger { background: linear-gradient(180deg, #c0392b, #7a1712); }
html.mad .btn.confirm, html.mad .task-go.confirm, html.mad .fr-btn.confirm {
  background: repeating-linear-gradient(-45deg, #d99a2b 0 10px, #c4851c 10px 20px);
  color: #1e1206; text-shadow: none; border-color: #6a4210;
}
html.mad .btn.locked, html.mad .fr-btn.locked, html.mad .task-go.locked, html.mad .fr-btn.alt.locked {
  background: repeating-linear-gradient(-45deg, #1b1510 0 8px, #231a13 8px 16px);
  color: #8f7f64; border: 1px dashed rgba(201, 176, 124, .3); box-shadow: none; text-shadow: none;
}
html.mad .fr-btn.done, html.mad .fr-btn:disabled {
  background: rgba(0, 0, 0, .25); color: var(--hint); border: 1px solid rgba(201, 176, 124, .18);
  box-shadow: none; text-shadow: none;
}
html.mad .btn:disabled, html.mad .task-go:disabled { opacity: .45; filter: grayscale(.4); }
/* Procedure in progress: the button does not dim, the spinner is a red drop along the edge. */
html.mad .btn.busy:disabled { opacity: 1; filter: none; }
html.mad .busy-spin { border-color: #e0b25a; border-right-color: transparent; border-top-color: #c0392b; }
html.mad .link-btn { text-decoration-style: dashed; }
/* «Сжечь историю болезни»: sheet with a red edge, the prohibition is a note on a paperclip. */
html.mad .wipe-card { border-color: rgba(192, 57, 43, .65); }
html.mad .wipe-card > h2:first-child { border-bottom-color: rgba(192, 57, 43, .8); }
html.mad .wipe-warn { font-weight: 400; }
html.mad .wipe-lock {
  border-radius: 3px; font-weight: 400; background: rgba(0, 0, 0, .3);
  border: 1px dashed rgba(217, 154, 43, .55); color: #e0b25a;
}

/* Chips, floors, segments are tags on a string. */
html.mad .chip, html.mad .floorpick {
  font-weight: 400; border-radius: 3px; background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(201, 176, 124, .3); color: #e2d4b3;
}
html.mad .chip.on, html.mad .floorpick.on {
  background: linear-gradient(180deg, #a52a24, #6e1414); border-color: #3d0b0b; color: #f6ecd2;
}
html.mad .floorpick b { font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; }
html.mad .seg { border-radius: 3px; background: rgba(0, 0, 0, .38); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); }
html.mad .seg-btn { font-weight: 400; border-radius: 2px; }
html.mad .seg-btn.on, html.mad .wr-seg .seg-btn.on { background: var(--mad-paper); color: var(--mad-ink); }
html.mad .badge {
  font-weight: 400; background: transparent; border: 1.5px solid currentColor; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #cbb98f;
}
html.mad .badge.ok { color: #9fcf5a; background: transparent; }
html.mad .badge.warn { color: #e8b04a; background: transparent; }
html.mad .badge.danger { color: #e0503f; background: transparent; }

/* Settings switches: the knob is a pill. */
html.mad .switch { background: #2a1f17; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1px rgba(201, 176, 124, .28); }
html.mad .switch.on { background: linear-gradient(180deg, #a52a24, #6e1414); }
/* The knob is a long red-white capsule, like the madness switch in the menu header. */
html.mad .switch::after {
  top: 6px; left: 4px; width: 32px; height: 18px; border-radius: 999px;
  background: linear-gradient(90deg, #f6ecd6 0 50%, #8a6a64 50% 100%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), inset 0 3px 0 -1px rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .5);
}
html.mad .switch.on::after {
  transform: translateX(10px);
  background: linear-gradient(90deg, #f6ecd6 0 50%, #d0342a 50% 100%);
}
html.mad .step, html.mad .mut-step-btn { background: radial-gradient(circle at 35% 30%, #4d4238, #17110c 72%); color: #efe2c4; }
html.mad .stepper { background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(201, 176, 124, .22); }

/* Input fields are a ruled form. */
html.mad textarea, html.mad input[type="search"], html.mad .pause-inputs input[type="number"] {
  background: repeating-linear-gradient(#ecdfc0 0 23px, #d6c49e 23px 24px);
  color: var(--mad-ink); border: 1px solid #8a6d45; border-radius: 2px;
}
html.mad textarea::placeholder, html.mad input::placeholder { color: #8a7550; }
/* Dice goals checklist: a row has no background of its own (a paper sheet is under it), a lifted one is a dark sheet,
   the insertion point is a red dashed line. */
html.mad .goal-row { background: transparent; border-top: 1px dashed var(--mad-line); }
html.mad .goal-row.dragging { background: #2a2018; border: 1px solid var(--mad-line); }
html.mad .goal-grip { background: rgba(234, 219, 184, .08); border-radius: 2px; }
html.mad .goal-grip.off { background: none; }
html.mad .goal-num { color: #c0392b; }
html.mad .goal-slot { border-color: rgba(192, 57, 43, .75); border-radius: 2px; }
html.mad .goal-select { background: #ecdfc0; color: var(--mad-ink); border: 1px solid #8a6d45; border-radius: 2px; }
html.mad input.count { color: var(--text); }
/* The number field and the «−/+» buttons have no font: inherit, without it they would stay in the system font. */
html.mad input.count, html.mad .step, html.mad .mut-step-btn { font-family: inherit; }

/* --- gauges: vials with liquid ---------------------------------------- */
html.mad .bar {
  height: 12px; border-radius: 2px; background: linear-gradient(#0a0705, #1a130d);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 176, 124, .22);
}
html.mad .bar.big { height: 18px; }
html.mad .bar > i {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #b5e070, #4f7f22); box-shadow: 0 0 8px rgba(143, 179, 90, .45);
}
html.mad .bar > i::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .13) 0 6px, transparent 6px 12px);
  background-size: 17px 17px; animation: mad-ooze 1.8s linear infinite;
}
@keyframes mad-ooze { to { background-position: 17px 0; } }
html.mad .bar.energy > i { background: linear-gradient(180deg, #ffd27a, #b8741c); box-shadow: 0 0 8px rgba(240, 180, 74, .45); }
html.mad .bar.boss > i, html.mad .energy-card.is-full .bar.big > i {
  background: linear-gradient(180deg, #e0463a, #6e1414); box-shadow: 0 0 8px rgba(224, 70, 58, .5);
}
html.mad .bar.combat > i { background: linear-gradient(180deg, #b58ae0, #4a2a6e); box-shadow: 0 0 8px rgba(160, 110, 220, .45); }
html.mad .bar.exp > i { background: linear-gradient(180deg, #c6f07e, #3f6f2b); box-shadow: 0 0 10px rgba(160, 230, 90, .55); }

/* --- medical history: a paper sheet with a stamp ------------------------------------------- */
html.mad #tab-profile > .card:has(#profileLevelExp) {
  --text: #2a1c10; --hint: #6e5838; --bg: rgba(90, 60, 30, .08); --link: #8b1e1e;
  --ok: #3f6f2b; --warn: #8a4e0a; --danger: #8b1e1e;
  color: var(--text);
  background:
    radial-gradient(circle at 88% 18%, rgba(139, 30, 30, .1), transparent 40%),
    radial-gradient(circle at 8% 92%, rgba(120, 80, 30, .2), transparent 45%),
    var(--mad-grain), var(--mad-paper);
  border: 1px solid #bfa77a;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 0 44px rgba(120, 80, 30, .28);
}
html.mad #tab-profile > .card:has(#profileLevelExp) > h2:first-child { padding-right: 96px; border-bottom-color: rgba(139, 30, 30, .55); }
html.mad #tab-profile > .card:has(#profileLevelExp)::after {
  content: "БУЙНЫЙ"; position: absolute; top: 12px; right: 12px; pointer-events: none;
  padding: 3px 8px 1px; border: 3px double rgba(160, 32, 28, .78); border-radius: 4px;
  color: rgba(160, 32, 28, .82); font: 400 15px/1.1 "Madhouse Assuan", "Madhouse Old", serif; letter-spacing: .14em;
  transform: rotate(9deg);
}
html.mad #tab-profile > .card:has(#profileLevelExp) .stat {
  background: rgba(90, 60, 30, .09); border: 1px dashed rgba(90, 60, 30, .45);
}
html.mad #tab-profile > .card:has(#profileLevelExp) .row + .row { border-top-color: rgba(90, 60, 30, .3); }
html.mad #tab-profile > .card:has(#profileLevelExp) .btn.secondary {
  background: transparent; color: var(--mad-ink); border: 1.5px solid rgba(42, 28, 16, .75);
  box-shadow: none; text-shadow: none;
}
html.mad #tab-profile > .card:has(#profileLevelExp) .bar { background: rgba(42, 28, 16, .75); }

/* --- medical history: the patient doll, a photo by a height chart ---------------------------- */
html.mad .doll-stage {
  border-radius: 3px; border: 1px solid var(--mad-line);
  background:
    radial-gradient(75% 60% at 62% 38%, rgba(233, 220, 191, .16), transparent 72%),
    repeating-linear-gradient(180deg, transparent 0 11.2%, rgba(233, 220, 191, .15) 11.2% 11.5%),
    linear-gradient(180deg, #2b261d, #17130e);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .6);
}
html.mad .doll-stage::after { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5)); }
html.mad .doll-stat {
  border-radius: 3px; padding: 3px 11px 3px 3px; background: rgba(21, 16, 11, .78);
  border: 1px dashed rgba(201, 176, 124, .45); color: #efe2c4;
}
html.mad .doll-ico { border-radius: 3px; background: rgba(233, 220, 191, .1); }
html.mad .doll-val b { font-weight: 400; font-size: 16px; }
@media (min-width: 1700px) {
  html.mad .doll-stat { padding: 4px 14px 4px 4px; }
  html.mad .doll-val b { font-size: 21px; }
  html.mad .doll-lvl { font-size: 17px; }
}
html.mad .doll-lvl {
  border-radius: 3px; background: transparent; border: 3px double rgba(224, 70, 58, .8); color: #e0463a;
  font: 400 14px/1.2 "Madhouse Assuan", "Madhouse Old", serif; letter-spacing: .1em; transform: rotate(6deg);
  padding: 3px 8px 1px;
}

/* --- bosses: portraits are photos from the personal file ---------------------------------------------- */
html.mad .boss-ava {
  filter: sepia(.4) contrast(1.08);
  box-shadow: 0 0 0 2px rgba(201, 176, 124, .38), 0 2px 6px rgba(0, 0, 0, .6);
}
html.mad .boss-face {
  border: 5px solid #e9dcbf; border-bottom-width: 22px; border-radius: 2px;
  filter: sepia(.3) contrast(1.08); transform: rotate(-2.5deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
}
html.mad .boss-face-num { top: 12px; left: 12px; background: #8b1e1e; transform: rotate(-2.5deg); font-weight: 400; }
html.mad .boss-diag-label { color: #e0503f; letter-spacing: .12em; }
html.mad .boss-killer { background: rgba(0, 0, 0, .3); border: 1px dashed rgba(201, 176, 124, .3); }
html.mad .killer-name { font-weight: 400; }
html.mad .room-row.me { background: rgba(139, 30, 30, .3); }
html.mad .room-dmg { color: #ff6a50; font-weight: 400; }

/* Dice are real, made of bone. */
html.mad .die {
  --warn: #8a4e0a; --hint: #6e5838;
  background: var(--mad-grain), #efe2c4; color: var(--mad-ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .45);
}
html.mad .die-face { font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; }
html.mad .die-best { outline: 2px solid #c0392b; }

/* Mutagens are jars in the laboratory. */
html.mad .mut-tile { background: rgba(0, 0, 0, .35); border: 1px solid rgba(143, 179, 90, .25); box-shadow: inset 0 0 14px rgba(143, 179, 90, .12); }
html.mad .mut-tile.sel { outline: 2px solid #9fcf5a; }
html.mad .mut-count { background: #8b1e1e; color: #f6ecd2; font-weight: 400; }

/* --- icons instead of emoji (set by mad.js): game images and own mask drawings ------------- */
html.mad .mad-ico {
  display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .02em; vertical-align: -.24em;
  object-fit: contain; font-style: normal;
}
/* The emoji itself next to the icon: invisible, but stays in the button text and is read aloud.
   left/top are required (owner complaint 2026-09-20: "Задания" slid right on the phone).
   Without them the hidden twin sits where the emoji would stand, and inside a side strip
   (quest line portraits, mutagen type chips) that is far off-screen. The strip scrolls and clips its
   content, but a twin with position: absolute is measured from the card, not the strip,
   so it escapes the clipping and stretches the page sideways. With left: 0 it stays in the card's corner. */
.mad-ico-alt {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
html.mad .mad-ico-svg {
  background: currentColor;
  -webkit-mask: var(--mad-ico) center / contain no-repeat; mask: var(--mad-ico) center / contain no-repeat;
}
/* Padlock on a paid button: the game's padlock instead of an emoji. */
html.mad .btn.locked::before, html.mad .fr-btn.locked::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.16em;
  background: url("https://cdn.cargohustle.online/assets/floor/floor_ui_3.webp") center / contain no-repeat;
}
html.mad .switch.locked::after {
  content: ""; background: url("https://cdn.cargohustle.online/assets/floor/floor_ui_3.webp") center / auto 16px no-repeat, #3a2e24;
}

/* --- toast is a note on paper, an error is red ------------------------------------------ */
html.mad .toast {
  background: var(--mad-grain), var(--mad-paper); color: var(--mad-ink);
  border-radius: 2px; border-left: 6px solid #8b1e1e; transform: rotate(-.6deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .65);
}
html.mad .toast.err { background: var(--mad-noise), #3a0d0b; color: #ffd9cc; border-left-color: #ff5a3c; }

/* --- loading: a cardiogram instead of a spinner ----------------------------------------------- */
html.mad .loading::before {
  content: ""; display: block; width: 150px; height: 34px; margin: 0 auto 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='34' viewBox='0 0 70 34'><path d='M0 17H22L26 12L30 17H34L37 3L41 31L45 17H52L56 13L60 17H70' fill='none' stroke='%23e0463a' stroke-width='2' stroke-linejoin='round'/></svg>") repeat-x 0 0 / 70px 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  animation: mad-ekg 1.3s linear infinite;
}
@keyframes mad-ekg { to { background-position: -70px 0; } }
html.mad .loading, html.mad .empty { color: #b8a67f; }

/* --- "Bot updating" screen: a scene in the madhouse corridor -------------------------------------
   A lamp on a wire swings and flickers, light falls on the medical-history clipboard with the stamp
   «ПЕРЕСМЕНКА», a cardiogram instead of a bar, a whisper on top (more often than in the app, mad.js).
   The same scene is on the Caddy page (deploy/updating/index.html): change here, fix there too. */
.upd-lamp, .upd-stamp, .upd-ekg { display: none; }
html.mad .upd {
  overflow: hidden;
  background:
    radial-gradient(55% 40% at 50% 42%, rgba(255, 214, 140, .10), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 35%, rgba(0, 0, 0, .9) 100%),
    linear-gradient(rgba(18, 13, 9, .62), rgba(18, 13, 9, .86)),
    url("https://cdn.cargohustle.online/assets/bg_loading_madhouse.webp") center / cover no-repeat,
    #120d09;
}
html.mad .upd-card { position: relative; z-index: 1; }
html.mad .upd-title {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 26px;
  color: #efe2c4; text-shadow: 3px 3px 0 rgba(139, 30, 30, .8);
}
html.mad .upd-text { color: #cdbd9a; }
html.mad .upd-quip { color: #a8977a; font-style: italic; }
html.mad .upd-shadow { fill: rgba(0, 0, 0, .45); }
html.mad .upd-lamp {
  display: block; position: absolute; top: 0; left: 50%; width: 0; height: 0; z-index: 0;
  transform-origin: 0 0; animation: upd-swing 4.8s ease-in-out infinite alternate;
}
html.mad .upd-cord { position: absolute; left: -1px; top: 0; width: 2px; height: 15vh; background: #3a2e24; }
html.mad .upd-shade {
  position: absolute; top: 15vh; left: -36px; width: 72px; height: 28px;
  border-radius: 36px 36px 8px 8px / 28px 28px 8px 8px;
  background: radial-gradient(ellipse at 50% 20%, #7a6a52, #2a2016 75%);
  box-shadow: 0 3px 0 #120d09, 0 0 0 1px rgba(201, 176, 124, .25);
}
html.mad .upd-shade::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 12px; margin-left: -8px;
  border-radius: 0 0 8px 8px; background: #ffe7a6; box-shadow: 0 0 14px 6px rgba(255, 220, 140, .55);
  animation: mad-lamp-bulb 7s steps(1) infinite;
}
html.mad .upd-beam {
  position: absolute; top: calc(15vh + 26px); left: -170px; width: 340px; height: 62vh;
  background: linear-gradient(rgba(255, 226, 160, .22), rgba(255, 226, 160, 0) 92%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  animation: mad-lamp-beam 7s steps(1) infinite;
}
@keyframes upd-swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes mad-lamp-beam {
  0%, 41%, 44%, 47%, 83%, 85%, 100% { opacity: 1; }
  42%, 45%, 84% { opacity: .15; }
  43%, 46% { opacity: .7; }
}
@keyframes mad-lamp-bulb {
  0%, 41%, 44%, 47%, 83%, 85%, 100% { opacity: 1; }
  42%, 45%, 84% { opacity: .3; }
  43%, 46% { opacity: .8; }
}
/* Stamp on the clipboard sheet: the sheet is roughly the middle of the picture. */
html.mad .upd-stamp {
  display: block; position: absolute; top: 92px; left: 50%; pointer-events: none;
  transform: translateX(-60%) rotate(-14deg);
  padding: 4px 10px 2px; border: 3px double rgba(192, 40, 32, .88); border-radius: 4px;
  color: rgba(192, 40, 32, .92); font: 400 19px/1.1 "Madhouse Assuan", "Madhouse Old", serif;
  letter-spacing: .14em; text-transform: uppercase; background: rgba(245, 237, 220, .12);
}
html.mad .upd-bar { display: none; }
html.mad .upd-ekg {
  display: block; width: 210px; max-width: 70%; height: 34px; margin: 18px auto 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='34' viewBox='0 0 70 34'><path d='M0 17H22L26 12L30 17H34L37 3L41 31L45 17H52L56 13L60 17H70' fill='none' stroke='%23e0463a' stroke-width='2' stroke-linejoin='round'/></svg>") repeat-x 0 0 / 70px 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  animation: mad-ekg 1.3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.mad .upd-lamp, html.mad .upd-beam, html.mad .upd-shade::after, html.mad .upd-ekg { animation: none; }
}
/* «Ожидаем выхода игры…» (bot frozen): the same corridor, the sheet has a «ЗАКРЫТО» stamp, the note is
   a scrap of paper under the lamp. The screen stays long, so tall content scrolls. */
html.mad .upd.frozen { overflow-y: auto; }
html.mad .upd-note {
  background: rgba(245, 237, 220, .07); border: 1px solid rgba(201, 176, 124, .28); border-radius: 4px;
  color: #d8c8a5;
}

/* --- whisper: a pale phrase appears and fades (set by mad.js) ------------------------------ */
.mad-whisper { display: none; }
html.mad .mad-whisper {
  display: block; position: fixed; z-index: 140; pointer-events: none; white-space: nowrap;
  font-family: "Madhouse Old", monospace; font-weight: 400; letter-spacing: .28em; color: #e0463a;
  transform: rotate(var(--r, -3deg)); opacity: 0;
  animation: mad-whisper var(--t, 4.2s) ease-in-out forwards;
}
html.mad .mad-whisper.pale { color: #eadbb8; }
@keyframes mad-whisper {
  0% { opacity: 0; filter: blur(3px); }
  35% { opacity: .2; filter: blur(.4px); }
  60% { opacity: .16; filter: blur(.6px); }
  100% { opacity: 0; filter: blur(4px); }
}

/* --- switching on: flash and glitch ----------------------------------------------------------- */
html.mad-glitch body::after { animation: mad-flash .7s steps(1) 1; }
@keyframes mad-flash {
  0% { opacity: 1; background-color: rgba(190, 0, 0, .45); }
  15% { opacity: 1; background-color: rgba(255, 255, 255, .18); }
  30% { opacity: 1; background-color: rgba(120, 0, 0, .35); }
  45% { opacity: .7; background-color: transparent; }
  60% { opacity: 1; background-color: rgba(190, 0, 0, .2); }
  100% { opacity: .32; background-color: transparent; }
}
html.mad-glitch main, html.mad-glitch .drawer-nav, html.mad-glitch .top { animation: mad-jitter .7s steps(1) 1; }
@keyframes mad-jitter {
  0% { translate: 4px 0; } 15% { translate: -5px 2px; } 30% { translate: 3px -2px; }
  45% { translate: -2px 0; } 60% { translate: 2px 1px; } 80%, 100% { translate: 0 0; }
}
html.mad-glitch .drawer-nav button { text-shadow: 2px 0 rgba(255, 0, 0, .7), -2px 0 rgba(0, 255, 255, .45); }

@media (prefers-reduced-motion: reduce) {
  html.mad body::after, html.mad .drawer-brand, html.mad .top::before, html.mad .bar > i::after,
  html.mad .loading::before { animation: none !important; }
  html.mad .top::before { display: none; }
}

/* --- "Assignment sheet" (Quests) and boss medals ------------------------------------------ */
html.mad .qst-item { background: rgba(0, 0, 0, .28); border-left: 3px solid rgba(201, 176, 124, .3); border-radius: 3px; }
html.mad .qst-item.active { border-left-color: #c9b07c; box-shadow: none; }
html.mad .qst-item.completed { border-left-color: #c0392b; box-shadow: inset 0 0 0 1px rgba(192, 57, 43, .6); }
html.mad .qst-row, html.mad .qst-sum + .qst-sum { border-top-style: dashed; border-top-color: rgba(201, 176, 124, .18); }
html.mad .qst-sum-v { font-weight: 400; }
html.mad .qst-claim { box-shadow: inset 0 0 0 1px #c0392b, 0 8px 18px rgba(0, 0, 0, .45); }
html.mad .qst-name, html.mad .qst-item-name, html.mad .qst-line-name { font-weight: 400; }
html.mad .qst-chip.on img { box-shadow: 0 0 0 2px #c0392b; }
html.mad .qst-ava, html.mad .qst-chip img { border: 1px solid rgba(201, 176, 124, .35); }
html.mad .medal.on .medal-cap { color: #c9b07c; }

/* --- Promo plate: an order from the personal file ----------------------------------------------- */
html.mad .gift-wrap { background: rgba(10, 7, 5, .85); }
/* The card is a snapshot from the medical-history folder: dark paper in corridor light.
   Text on it is light (owner's fix 2026-09-20: dark on such a background was unreadable). */
html.mad .gift-card {
  background: #e8dcc0 url("https://cdn.cargohustle.online/assets/bg_loading_madhouse.webp") center / cover;
  background-blend-mode: luminosity; color: #f2e5c6; border: 1px solid #b9a37a; border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), inset 0 0 90px rgba(120, 80, 40, .35);
  transform: rotate(-.6deg);
}
html.mad .gift-card > * { position: relative; z-index: 1; }
/* The close cross is above the paper and above the stamp, otherwise the «ВЫДАНО» seal would cover it. */
html.mad .gift-card > .gift-close { position: absolute; z-index: 4; color: #e7d9b8; }
html.mad .gift-card h2 {
  font-family: "Madhouse Assuan", serif; letter-spacing: .06em; color: #f6e8c8;
  text-shadow: 0 0 22px rgba(192, 57, 43, .75), 0 2px 4px rgba(0, 0, 0, .9);
}
html.mad .gift-card p {
  color: #e7d9b8; opacity: 1; font-size: 15px; text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
html.mad .gift-days {
  color: #e0463a; font-family: "Madhouse Assuan", serif;
  text-shadow: 0 0 20px rgba(224, 70, 58, .5), 0 2px 4px rgba(0, 0, 0, .85);
}
html.mad .gift-days i { color: #d8c9a8; }
/* The «выдано» stamp is red paint OVER the text, semi-transparent: that is how a seal goes
   on a ready document (owner's request 2026-09-20). It does not catch clicks. */
html.mad .gift-stamp {
  display: block; position: absolute; right: 8px; bottom: 78px; width: 152px; height: 152px;
  border: 5px solid #e0463a; border-radius: 50%; transform: rotate(-16deg);
  color: #e0463a; font-family: "Madhouse Assuan", serif; font-size: 22px;
  letter-spacing: .12em; opacity: .5; z-index: 3; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
html.mad .gift-stamp::after {
  content: "ВЫДАНО"; position: absolute; inset: 0; display: grid; place-items: center;
}
html.mad .gift-card .btn {
  background: #8b1e1e; color: #f6ecd2; border-radius: 2px;
  box-shadow: inset 0 0 0 1px #5d1212, 0 8px 18px rgba(0, 0, 0, .45);
}

/* --- Daily reward: a daily ration on the same paper as the promo order -------------------- */
html.mad .daily-day {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 17px;
  letter-spacing: .12em; text-transform: none; color: #d8c9a8; text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
html.mad .daily-prize::before {
  background: radial-gradient(circle, rgba(224, 70, 58, .38) 0%, rgba(120, 30, 20, .2) 42%, transparent 70%);
}
html.mad .daily-amount {
  font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; color: #e0463a;
  text-shadow: 0 0 20px rgba(224, 70, 58, .5), 0 2px 4px rgba(0, 0, 0, .85);
}
html.mad .daily-name { color: #e7d9b8; opacity: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
html.mad .daily-done { color: #e7d9b8; font-weight: 400; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
/* The «ВЫДАНО» stamp lands on the ration only when it is claimed, with a thump, like a seal on paper. */
html.mad .daily-card.taken .daily-stamp {
  display: block; position: absolute; right: 2px; top: 52px; width: 116px; height: 116px;
  border: 5px solid #e0463a; border-radius: 50%; transform: rotate(-16deg);
  color: #e0463a; font-family: "Madhouse Assuan", serif; font-size: 20px;
  letter-spacing: .12em; opacity: .55; z-index: 3; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); animation: daily-stamp .32s ease-out;
}
html.mad .daily-card.taken .daily-stamp::after {
  content: "ВЫДАНО"; position: absolute; inset: 0; display: grid; place-items: center;
}
@keyframes daily-stamp {
  from { transform: rotate(-16deg) scale(1.9); opacity: 0; }
  to { transform: rotate(-16deg) scale(1); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  html.mad .daily-card.taken .daily-stamp { animation: none; }
}

/* Tips on the right on a very wide screen (style.css, min-width: 1700px): as a sheet, like the cards. */
@media (min-width: 1700px) {
  html.mad .tab.active:has(> .card ~ .card):not(#tab-changelog, #tab-stats, #tab-admin) > .guide:last-child {
    border-radius: 3px; border: 1px solid var(--mad-line);
    background: linear-gradient(180deg, rgba(255, 240, 210, .04), rgba(0, 0, 0, .1)), var(--mad-noise), #1f1812;
    box-shadow: inset 0 1px 0 rgba(255, 240, 210, .05), 0 8px 18px rgba(0, 0, 0, .45);
  }
  html.mad .tab.active:has(> .card ~ .card):not(#tab-changelog, #tab-stats, #tab-admin) > .guide:last-child::before {
    content: "Памятка"; font-family: "Madhouse Assuan", "Madhouse Old", serif; font-weight: 400; font-size: 19px;
    letter-spacing: .02em; color: #efe2c4; padding-bottom: 7px; border-bottom: 2px dashed rgba(192, 57, 43, .55);
  }
}

/* --- underground (PvP): fighter cards are the same photos by a height chart, tags instead of plates --- */
html.mad .pvp-st { border-radius: 3px; background: rgba(21, 16, 11, .5); border: 1px dashed rgba(201, 176, 124, .35); }
html.mad .pvp-st b { font-weight: 400; font-size: 15px; letter-spacing: 0; }
html.mad .pvp-st small { font-size: 10px; letter-spacing: 0; }
html.mad .pvp-name { font-weight: 400; font-size: 19px; }
html.mad .pvp-run.live { border: 1px dashed rgba(224, 70, 58, .8); }
html.mad .pvp-ava { border-radius: 3px; filter: sepia(.35) contrast(1.05); }

/* «Заначки» (2026-10-10): pictures a bit sepia, the section panels in the paper tone. */
html.mad .sh-sec { background: rgba(0, 0, 0, .22); }
html.mad .sh-part > img { filter: sepia(.25); }
html.mad .sh-part.locked > img { filter: grayscale(1) sepia(.3); opacity: .5; }