:root {
  --bg: #041412;
  --bg-muted: #0b2a1f;
  --panel: rgba(20, 36, 30, 0.6);
  --panel-border: rgba(126, 248, 187, 0.18);
  --text: #e6efe6;
  --muted: #b9d9c5;
  --emphasis: #cfeee0;
  --accent: #22c55e;
  --accent-soft: #9ff3c7;
  --scroll-track: linear-gradient(180deg, rgba(5, 20, 14, 0.92), rgba(2, 13, 9, 0.96));
  --scroll-thumb: linear-gradient(180deg, rgba(78, 224, 139, 0.9), rgba(34, 197, 94, 0.92));
  --scroll-thumb-hover: linear-gradient(180deg, rgba(136, 250, 188, 0.95), rgba(55, 222, 113, 0.95));
  --scroll-thumb-active: linear-gradient(180deg, rgba(178, 255, 216, 0.98), rgba(78, 236, 143, 0.98));
  --btn-border: rgba(141, 255, 202, 0.44);
  --btn-border-strong: rgba(179, 255, 220, 0.78);
  --btn-bg:
    radial-gradient(circle at 12% 18%, rgba(174, 255, 218, 0.18), rgba(174, 255, 218, 0) 40%),
    linear-gradient(135deg, rgba(28, 86, 58, 0.96), rgba(14, 43, 30, 0.96));
  --btn-shadow: 0 12px 26px rgba(4, 14, 9, 0.34), inset 0 1px 0 rgba(217, 255, 235, 0.12);
  --btn-shadow-hover: 0 16px 30px rgba(4, 14, 9, 0.42), 0 0 0 1px rgba(126, 248, 187, 0.22);
  --shadow: 0 10px 28px rgba(7, 15, 10, 0.55);

  /* Header theme: clean (base). */
  --hdr-shell-bg: linear-gradient(180deg, rgba(7, 18, 13, 0.94), rgba(8, 18, 14, 0.9));
  --hdr-shell-border: rgba(121, 243, 176, 0.3);
  --hdr-shell-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  --hdr-nav-bg: linear-gradient(170deg, rgba(12, 31, 22, 0.9), rgba(9, 24, 17, 0.84));
  --hdr-nav-border: rgba(109, 239, 166, 0.22);
  --hdr-item-text: #e4fff1;
  --hdr-item-bg: linear-gradient(145deg, rgba(18, 44, 32, 0.64), rgba(13, 33, 24, 0.6));
  --hdr-item-border: rgba(123, 245, 178, 0.2);
  --hdr-item-hover-bg: linear-gradient(145deg, rgba(40, 118, 77, 0.62), rgba(19, 61, 40, 0.7));
  --hdr-item-hover-border: rgba(156, 255, 206, 0.5);
  --hdr-item-hover-shadow: 0 0 0 1px rgba(164, 255, 211, 0.16), 0 7px 14px rgba(5, 14, 10, 0.22);
  --hdr-item-active-bg: linear-gradient(145deg, rgba(59, 148, 102, 0.78), rgba(24, 78, 52, 0.84));
  --hdr-item-active-border: rgba(201, 255, 229, 0.78);
  --hdr-item-active-shadow: inset 0 1px 0 rgba(239, 255, 247, 0.25), 0 8px 14px rgba(5, 14, 10, 0.25);
  --hdr-item-line: linear-gradient(90deg, rgba(130, 248, 187, 0), rgba(214, 255, 236, 0.95), rgba(130, 248, 187, 0));
  --hdr-mobile-menu-bg: linear-gradient(180deg, rgba(8, 18, 14, 0.99), rgba(7, 17, 13, 0.99));
  --hdr-mobile-menu-border: rgba(117, 240, 171, 0.34);

  /* Shared card surfaces (all sections/tabs). */
  --ui-card-bg: rgba(12, 30, 23, 0.58);
  --ui-card-border: rgba(36, 176, 84, 0.35);
  --ui-card-title: #9fffc4;
  --ui-card-text: #d5fde8;
  --ui-card-link-border: rgba(34, 197, 94, 0.65);
  --ui-card-glow: 0 0 20px rgba(34, 197, 94, 0.4);
  --ui-card-hover-border: rgba(34, 197, 94, 0.9);
  --ui-card-hover-shadow: 0 16px 40px rgba(5, 12, 8, 0.7);
  --ui-panel-bg: rgba(11, 25, 19, 0.75);
  --ui-panel-border: rgba(34, 197, 94, 0.45);
  --ui-panel-title: #9fffc4;
  --ui-panel-text: #e8ffe1;
  --ui-accordion-bg: rgba(12, 28, 20, 0.6);
  --ui-accordion-border: rgba(33, 182, 103, 0.3);
  --ui-accordion-hover-bg: rgba(34, 197, 94, 0.14);
  --ui-accordion-hover-ring: rgba(34, 197, 94, 0.25);
  --ui-rule-bg: rgba(10, 26, 18, 0.72);
  --ui-rule-border: rgba(36, 180, 88, 0.35);
  --ui-rule-title: #8efdab;
}

/* Subtle winter variant (icy green, not fully blue). */
[data-header-theme="winter"] {
  --hdr-shell-bg:
    radial-gradient(circle at 15% -80%, rgba(196, 255, 239, 0.34), transparent 50%),
    linear-gradient(180deg, rgba(5, 15, 13, 0.95), rgba(6, 15, 13, 0.84));
  --hdr-shell-border: rgba(171, 255, 229, 0.46);
  --hdr-shell-shadow: 0 10px 24px rgba(2, 8, 8, 0.28);
  --hdr-nav-bg: linear-gradient(165deg, rgba(14, 34, 30, 0.9), rgba(10, 24, 21, 0.82));
  --hdr-nav-border: rgba(166, 255, 226, 0.28);
  --hdr-item-text: #ebfffb;
  --hdr-item-bg: linear-gradient(145deg, rgba(20, 48, 42, 0.66), rgba(14, 36, 32, 0.56));
  --hdr-item-border: rgba(166, 255, 226, 0.26);
  --hdr-item-hover-bg: linear-gradient(145deg, rgba(37, 108, 93, 0.72), rgba(20, 69, 58, 0.74));
  --hdr-item-hover-border: rgba(193, 255, 236, 0.62);
  --hdr-item-hover-shadow: 0 0 0 1px rgba(171, 255, 229, 0.2), 0 8px 16px rgba(4, 12, 12, 0.26);
  --hdr-item-active-bg:
    radial-gradient(circle at 82% 12%, rgba(229, 255, 247, 0.3), rgba(229, 255, 247, 0) 50%),
    linear-gradient(145deg, rgba(61, 145, 124, 0.8), rgba(28, 88, 73, 0.84));
  --hdr-item-active-border: rgba(223, 255, 245, 0.9);
  --hdr-item-active-shadow: inset 0 1px 0 rgba(240, 255, 250, 0.32), 0 10px 17px rgba(3, 10, 9, 0.3);
  --hdr-item-line: linear-gradient(90deg, rgba(171, 255, 229, 0), rgba(232, 255, 248, 0.98), rgba(171, 255, 229, 0));
  --hdr-mobile-menu-bg:
    radial-gradient(circle at 18% -20%, rgba(195, 255, 238, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(7, 16, 14, 0.99), rgba(7, 15, 13, 0.99));
  --hdr-mobile-menu-border: rgba(178, 255, 232, 0.4);

  --ui-card-bg: rgba(16, 37, 33, 0.64);
  --ui-card-border: rgba(171, 255, 229, 0.34);
  --ui-card-title: #d9fff0;
  --ui-card-text: #e8fff7;
  --ui-card-link-border: rgba(171, 255, 229, 0.68);
  --ui-card-glow: 0 0 20px rgba(171, 255, 229, 0.34);
  --ui-card-hover-border: rgba(223, 255, 245, 0.86);
  --ui-card-hover-shadow: 0 16px 38px rgba(4, 11, 10, 0.55);
  --ui-panel-bg: rgba(13, 30, 27, 0.78);
  --ui-panel-border: rgba(171, 255, 229, 0.42);
  --ui-panel-title: #d9fff0;
  --ui-panel-text: #ebfff7;
  --ui-accordion-bg: rgba(13, 31, 27, 0.67);
  --ui-accordion-border: rgba(171, 255, 229, 0.3);
  --ui-accordion-hover-bg: rgba(171, 255, 229, 0.14);
  --ui-accordion-hover-ring: rgba(171, 255, 229, 0.3);
  --ui-rule-bg: rgba(13, 31, 27, 0.76);
  --ui-rule-border: rgba(171, 255, 229, 0.34);
  --ui-rule-title: #d0ffec;
}

[data-header-theme="winter"] body {
  background: radial-gradient(circle at 20% 12%, #21473f 0%, #0b1f1c 50%, #040707 100%);
}

[data-header-theme="winter"] .logo {
  color: #9ef3d7;
  text-shadow: 0 0 18px rgba(188, 255, 236, 0.28);
}

[data-header-theme="winter"] .logo::after {
  content: " ❄";
}

[data-header-theme="winter"] .main-nav > a[href$="index.html"]::before {
  content: "❄";
}

[data-header-theme="winter"] .main-nav > a[href$="faq.html"]::before {
  content: "✶";
}

[data-header-theme="winter"] .main-nav > a[href$="rules.html"]::before {
  content: "✦";
}

[data-header-theme="winter"] .main-nav > a[href$="mechanics.html"]::before {
  content: "❅";
}

[data-header-theme="winter"] .main-nav > a[href$="Admin.html"]::before,
[data-header-theme="winter"] .main-nav > .dropdown .dropbtn::before {
  content: "☃";
}

@keyframes winter-snow-fall {
  from {
    transform: translate3d(-1vw, -18vh, 0);
  }
  to {
    transform: translate3d(1vw, 112vh, 0);
  }
}

[data-header-theme="winter"] body::before,
[data-header-theme="winter"] body::after {
  content: "";
  position: fixed;
  top: -20vh;
  left: 0;
  width: 100%;
  height: 140vh;
  pointer-events: none;
  z-index: 2;
  opacity: 0.32;
  background-repeat: repeat;
  will-change: transform;
}

[data-header-theme="winter"] body::before {
  background-image:
    radial-gradient(circle, rgba(235, 255, 248, 0.92) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(200, 255, 237, 0.78) 1px, transparent 1.45px);
  background-size: 160px 170px, 230px 220px;
  background-position: 0 0, 72px 40px;
  animation: winter-snow-fall 17s linear infinite;
}

[data-header-theme="winter"] body::after {
  background-image:
    radial-gradient(circle, rgba(233, 255, 247, 0.72) 0.9px, transparent 1.35px),
    radial-gradient(circle, rgba(191, 255, 232, 0.55) 1px, transparent 1.45px);
  background-size: 140px 150px, 260px 240px;
  background-position: 28px 10px, 110px 70px;
  opacity: 0.22;
  animation: winter-snow-fall 24s linear infinite;
}

/* Halloween variant (orange + deep violet, still in site style). */
[data-header-theme="halloween"] {
  --hdr-shell-bg:
    radial-gradient(circle at 15% -80%, rgba(255, 170, 102, 0.28), transparent 50%),
    linear-gradient(180deg, rgba(20, 11, 8, 0.95), rgba(14, 9, 16, 0.9));
  --hdr-shell-border: rgba(255, 165, 90, 0.44);
  --hdr-shell-shadow: 0 10px 24px rgba(9, 4, 13, 0.34);
  --hdr-nav-bg: linear-gradient(165deg, rgba(31, 16, 11, 0.9), rgba(22, 12, 28, 0.86));
  --hdr-nav-border: rgba(255, 150, 77, 0.3);
  --hdr-item-text: #fff0e2;
  --hdr-item-bg: linear-gradient(145deg, rgba(54, 27, 16, 0.7), rgba(39, 20, 45, 0.62));
  --hdr-item-border: rgba(255, 154, 84, 0.28);
  --hdr-item-hover-bg: linear-gradient(145deg, rgba(116, 59, 27, 0.76), rgba(74, 35, 84, 0.74));
  --hdr-item-hover-border: rgba(255, 188, 136, 0.64);
  --hdr-item-hover-shadow: 0 0 0 1px rgba(255, 173, 110, 0.2), 0 8px 16px rgba(11, 5, 14, 0.3);
  --hdr-item-active-bg:
    radial-gradient(circle at 82% 12%, rgba(255, 210, 173, 0.28), rgba(255, 210, 173, 0) 50%),
    linear-gradient(145deg, rgba(153, 75, 31, 0.82), rgba(90, 39, 95, 0.84));
  --hdr-item-active-border: rgba(255, 210, 173, 0.9);
  --hdr-item-active-shadow: inset 0 1px 0 rgba(255, 235, 218, 0.26), 0 10px 17px rgba(10, 4, 15, 0.34);
  --hdr-item-line: linear-gradient(90deg, rgba(255, 180, 121, 0), rgba(255, 224, 196, 0.98), rgba(255, 180, 121, 0));
  --hdr-mobile-menu-bg:
    radial-gradient(circle at 18% -20%, rgba(255, 167, 101, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(18, 10, 9, 0.99), rgba(15, 9, 18, 0.99));
  --hdr-mobile-menu-border: rgba(255, 168, 98, 0.4);

  --ui-card-bg: rgba(33, 17, 14, 0.7);
  --ui-card-border: rgba(255, 151, 82, 0.34);
  --ui-card-title: #ffd0a8;
  --ui-card-text: #ffe8d1;
  --ui-card-link-border: rgba(255, 176, 122, 0.72);
  --ui-card-glow: 0 0 20px rgba(255, 145, 77, 0.3);
  --ui-card-hover-border: rgba(255, 209, 173, 0.88);
  --ui-card-hover-shadow: 0 16px 40px rgba(11, 5, 14, 0.56);
  --ui-panel-bg: rgba(32, 16, 14, 0.78);
  --ui-panel-border: rgba(255, 151, 82, 0.44);
  --ui-panel-title: #ffd3ad;
  --ui-panel-text: #ffe9d7;
  --ui-accordion-bg: rgba(29, 15, 14, 0.66);
  --ui-accordion-border: rgba(255, 149, 79, 0.28);
  --ui-accordion-hover-bg: rgba(255, 166, 94, 0.16);
  --ui-accordion-hover-ring: rgba(255, 182, 127, 0.3);
  --ui-rule-bg: rgba(30, 15, 14, 0.76);
  --ui-rule-border: rgba(255, 151, 82, 0.34);
  --ui-rule-title: #ffc997;
}

[data-header-theme="halloween"] body {
  background: radial-gradient(circle at 22% 14%, #4a2718 0%, #1a0f13 48%, #070408 100%);
}

[data-header-theme="halloween"] body::before,
[data-header-theme="halloween"] body::after {
  content: none;
}

[data-header-theme="halloween"] .logo {
  color: #ffbb7c;
  text-shadow: 0 0 18px rgba(255, 170, 112, 0.3);
}

[data-header-theme="halloween"] .logo::after {
  content: " 🎃";
}

[data-header-theme="halloween"] .main-nav > a[href$="index.html"]::before {
  content: "🎃";
}

[data-header-theme="halloween"] .main-nav > a[href$="faq.html"]::before {
  content: "🕯";
}

[data-header-theme="halloween"] .main-nav > a[href$="rules.html"]::before {
  content: "🦇";
}

[data-header-theme="halloween"] .main-nav > a[href$="mechanics.html"]::before {
  content: "🕸";
}

[data-header-theme="halloween"] .main-nav > a[href$="Admin.html"]::before,
[data-header-theme="halloween"] .main-nav > .dropdown .dropbtn::before {
  content: "👻";
}

/* Theme-aware overrides for page-local hero/chip styles. */
:root {
  --ui-hero-border: rgba(126, 248, 187, 0.28);
  --ui-hero-bg:
    radial-gradient(circle at 50% -18%, rgba(117, 255, 201, 0.17), rgba(117, 255, 201, 0)),
    linear-gradient(145deg, rgba(9, 25, 17, 0.9), rgba(7, 18, 13, 0.82)),
    repeating-linear-gradient(135deg, rgba(126, 248, 187, 0.06) 0 2px, transparent 2px 12px);
  --ui-hero-shadow: 0 18px 36px rgba(6, 16, 10, 0.58);
  --ui-kicker-bg: rgba(34, 197, 94, 0.16);
  --ui-kicker-border: rgba(126, 248, 187, 0.32);
  --ui-kicker-text: #b6ffd6;
  --ui-hero-title: #dcffe9;
  --ui-hero-text: #b9d9c5;
  --ui-hero-title-shadow: 0 0 30px rgba(126, 248, 187, 0.32);
  --ui-facts-bg: rgba(18, 52, 35, 0.55);
  --ui-facts-border: rgba(95, 224, 153, 0.35);
  --ui-facts-text: #ceffe1;
  --ui-rules-block-bg: rgba(11, 29, 21, 0.88);
  --ui-rules-block-border: rgba(70, 210, 100, 0.45);
  --ui-rules-block-title: #cfeee0;
  --ui-surface-bg: linear-gradient(165deg, rgba(14, 33, 24, 0.76), rgba(10, 23, 18, 0.88));
  --ui-surface-border: rgba(34, 197, 94, 0.28);
  --ui-surface-shadow: inset 0 1px 0 rgba(185, 255, 210, 0.08), 0 8px 20px rgba(5, 12, 8, 0.34);
  --ui-surface-title: #cffff1;
  --ui-surface-text: #dcfaeb;
  --ui-surface-muted: #c8f4dc;
  --ui-tab-btn-bg: linear-gradient(145deg, rgba(8, 17, 12, 0.92), rgba(12, 27, 19, 0.9));
  --ui-tab-btn-border: rgba(34, 197, 94, 0.5);
  --ui-tab-btn-text: #d8fbe7;
  --ui-tab-btn-hover-bg: linear-gradient(145deg, rgba(15, 34, 23, 0.95), rgba(17, 42, 28, 0.92));
  --ui-tab-btn-hover-border: rgba(34, 197, 94, 0.9);
  --ui-tab-btn-hover-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  --ui-tab-active-bg: rgba(34, 197, 94, 0.18);
  --ui-tab-active-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
  --ui-tab-active-border: rgba(34, 197, 94, 0.9);
  --ui-emph-allies-border: rgba(126, 248, 187, 0.3);
  --ui-emph-allies-bg-top: rgba(126, 248, 187, 0.2);
  --ui-emph-allies-bg-bottom: rgba(126, 248, 187, 0.08);
  --ui-emph-allies-text: #dcffe9;
  --ui-emph-neutral-border: rgba(248, 198, 96, 0.36);
  --ui-emph-neutral-bg-top: rgba(248, 198, 96, 0.22);
  --ui-emph-neutral-bg-bottom: rgba(248, 198, 96, 0.1);
  --ui-emph-neutral-text: #ffecc1;
  --ui-emph-hostile-border: rgba(239, 124, 124, 0.4);
  --ui-emph-hostile-bg-top: rgba(239, 124, 124, 0.24);
  --ui-emph-hostile-bg-bottom: rgba(239, 124, 124, 0.1);
  --ui-emph-hostile-text: #ffd5d5;
  --ui-scp-glow: rgba(126, 248, 187, 0.34);
  --ui-scp-border: rgba(126, 248, 187, 0.24);
  --ui-scp-bg-900: rgba(7, 18, 13, 0.9);
  --ui-scp-bg-800: rgba(10, 28, 19, 0.86);
  --ui-scp-bg-700: rgba(16, 44, 30, 0.74);
}

[data-header-theme="winter"] {
  --ui-hero-border: rgba(171, 255, 229, 0.44);
  --ui-hero-bg:
    radial-gradient(circle at 50% -18%, rgba(222, 255, 247, 0.2), rgba(222, 255, 247, 0)),
    linear-gradient(145deg, rgba(13, 33, 28, 0.9), rgba(10, 24, 21, 0.84)),
    repeating-linear-gradient(135deg, rgba(171, 255, 229, 0.07) 0 2px, transparent 2px 12px);
  --ui-hero-shadow: 0 18px 34px rgba(4, 11, 10, 0.5);
  --ui-kicker-bg: rgba(171, 255, 229, 0.16);
  --ui-kicker-border: rgba(204, 255, 239, 0.44);
  --ui-kicker-text: #e9fff8;
  --ui-hero-title: #e4fff5;
  --ui-hero-text: #d4f5e8;
  --ui-hero-title-shadow: 0 0 30px rgba(204, 255, 239, 0.28);
  --ui-facts-bg: rgba(22, 58, 49, 0.56);
  --ui-facts-border: rgba(171, 255, 229, 0.42);
  --ui-facts-text: #e8fff7;
  --ui-rules-block-bg: rgba(14, 35, 30, 0.9);
  --ui-rules-block-border: rgba(171, 255, 229, 0.42);
  --ui-rules-block-title: #e3fff4;
  --ui-surface-bg: linear-gradient(165deg, rgba(18, 42, 36, 0.82), rgba(12, 31, 27, 0.88));
  --ui-surface-border: rgba(171, 255, 229, 0.36);
  --ui-surface-shadow: inset 0 1px 0 rgba(224, 255, 244, 0.11), 0 10px 24px rgba(4, 11, 10, 0.3);
  --ui-surface-title: #e6fff4;
  --ui-surface-text: #ecfff8;
  --ui-surface-muted: #dbfff1;
  --ui-tab-btn-bg: linear-gradient(145deg, rgba(16, 39, 34, 0.92), rgba(14, 34, 30, 0.9));
  --ui-tab-btn-border: rgba(171, 255, 229, 0.45);
  --ui-tab-btn-text: #ebfffb;
  --ui-tab-btn-hover-bg: linear-gradient(145deg, rgba(32, 77, 67, 0.95), rgba(18, 58, 49, 0.92));
  --ui-tab-btn-hover-border: rgba(214, 255, 244, 0.82);
  --ui-tab-btn-hover-shadow: 0 0 12px rgba(171, 255, 229, 0.42);
  --ui-tab-active-bg: rgba(171, 255, 229, 0.22);
  --ui-tab-active-shadow: 0 0 12px rgba(171, 255, 229, 0.48);
  --ui-tab-active-border: rgba(223, 255, 245, 0.9);
  --ui-emph-allies-border: rgba(204, 255, 239, 0.44);
  --ui-emph-allies-bg-top: rgba(204, 255, 239, 0.24);
  --ui-emph-allies-bg-bottom: rgba(171, 255, 229, 0.12);
  --ui-emph-allies-text: #ecfff8;
  --ui-emph-neutral-border: rgba(255, 219, 170, 0.44);
  --ui-emph-neutral-bg-top: rgba(255, 219, 170, 0.22);
  --ui-emph-neutral-bg-bottom: rgba(255, 219, 170, 0.1);
  --ui-emph-neutral-text: #fff4e1;
  --ui-emph-hostile-border: rgba(255, 185, 185, 0.42);
  --ui-emph-hostile-bg-top: rgba(255, 185, 185, 0.2);
  --ui-emph-hostile-bg-bottom: rgba(255, 185, 185, 0.09);
  --ui-emph-hostile-text: #ffe3e3;
  --ui-scp-glow: rgba(202, 255, 239, 0.38);
  --ui-scp-border: rgba(176, 255, 232, 0.3);
  --ui-scp-bg-900: rgba(9, 20, 18, 0.92);
  --ui-scp-bg-800: rgba(14, 34, 30, 0.88);
  --ui-scp-bg-700: rgba(20, 52, 45, 0.78);

  --btn-border: rgba(179, 255, 228, 0.54);
  --btn-border-strong: rgba(223, 255, 245, 0.9);
  --btn-bg:
    radial-gradient(circle at 12% 18%, rgba(224, 255, 246, 0.22), rgba(224, 255, 246, 0) 40%),
    linear-gradient(135deg, rgba(34, 93, 75, 0.96), rgba(16, 52, 43, 0.96));
  --btn-shadow: 0 12px 26px rgba(4, 11, 10, 0.34), inset 0 1px 0 rgba(237, 255, 250, 0.16);
  --btn-shadow-hover: 0 16px 30px rgba(4, 11, 10, 0.42), 0 0 0 1px rgba(171, 255, 229, 0.32);
}

[data-header-theme="halloween"] {
  --ui-hero-border: rgba(255, 168, 98, 0.48);
  --ui-hero-bg:
    radial-gradient(circle at 50% -18%, rgba(255, 186, 132, 0.2), rgba(255, 186, 132, 0)),
    linear-gradient(145deg, rgba(28, 15, 13, 0.9), rgba(19, 11, 22, 0.86)),
    repeating-linear-gradient(135deg, rgba(255, 173, 113, 0.07) 0 2px, transparent 2px 12px);
  --ui-hero-shadow: 0 18px 36px rgba(9, 4, 13, 0.54);
  --ui-kicker-bg: rgba(255, 153, 84, 0.16);
  --ui-kicker-border: rgba(255, 198, 150, 0.46);
  --ui-kicker-text: #ffe4c8;
  --ui-hero-title: #ffd2a5;
  --ui-hero-text: #ffdcbc;
  --ui-hero-title-shadow: 0 0 30px rgba(255, 177, 125, 0.3);
  --ui-facts-bg: rgba(59, 29, 19, 0.58);
  --ui-facts-border: rgba(255, 165, 96, 0.42);
  --ui-facts-text: #ffe7cf;
  --ui-rules-block-bg: rgba(31, 16, 14, 0.9);
  --ui-rules-block-border: rgba(255, 154, 85, 0.45);
  --ui-rules-block-title: #ffd2aa;
  --ui-surface-bg: linear-gradient(165deg, rgba(44, 22, 15, 0.86), rgba(30, 16, 36, 0.88));
  --ui-surface-border: rgba(255, 154, 84, 0.38);
  --ui-surface-shadow: inset 0 1px 0 rgba(255, 226, 192, 0.11), 0 10px 24px rgba(10, 4, 14, 0.35);
  --ui-surface-title: #ffd8b5;
  --ui-surface-text: #ffe9d7;
  --ui-surface-muted: #ffdcbc;
  --ui-tab-btn-bg: linear-gradient(145deg, rgba(54, 27, 16, 0.78), rgba(39, 20, 45, 0.72));
  --ui-tab-btn-border: rgba(255, 154, 84, 0.44);
  --ui-tab-btn-text: #fff0e2;
  --ui-tab-btn-hover-bg: linear-gradient(145deg, rgba(116, 59, 27, 0.82), rgba(74, 35, 84, 0.8));
  --ui-tab-btn-hover-border: rgba(255, 209, 173, 0.9);
  --ui-tab-btn-hover-shadow: 0 0 12px rgba(255, 173, 110, 0.42);
  --ui-tab-active-bg: rgba(255, 168, 98, 0.2);
  --ui-tab-active-shadow: 0 0 12px rgba(255, 173, 110, 0.46);
  --ui-tab-active-border: rgba(255, 210, 173, 0.92);
  --ui-emph-allies-border: rgba(255, 198, 150, 0.48);
  --ui-emph-allies-bg-top: rgba(255, 198, 150, 0.24);
  --ui-emph-allies-bg-bottom: rgba(255, 168, 98, 0.12);
  --ui-emph-allies-text: #ffe9d2;
  --ui-emph-neutral-border: rgba(255, 181, 121, 0.52);
  --ui-emph-neutral-bg-top: rgba(255, 181, 121, 0.28);
  --ui-emph-neutral-bg-bottom: rgba(255, 154, 84, 0.14);
  --ui-emph-neutral-text: #fff0dc;
  --ui-emph-hostile-border: rgba(255, 146, 132, 0.48);
  --ui-emph-hostile-bg-top: rgba(255, 146, 132, 0.26);
  --ui-emph-hostile-bg-bottom: rgba(255, 125, 110, 0.12);
  --ui-emph-hostile-text: #ffe1da;
  --ui-scp-glow: rgba(255, 182, 123, 0.36);
  --ui-scp-border: rgba(255, 162, 95, 0.34);
  --ui-scp-bg-900: rgba(18, 11, 10, 0.92);
  --ui-scp-bg-800: rgba(30, 15, 14, 0.88);
  --ui-scp-bg-700: rgba(60, 29, 19, 0.78);

  --btn-border: rgba(255, 178, 121, 0.56);
  --btn-border-strong: rgba(255, 216, 186, 0.94);
  --btn-bg:
    radial-gradient(circle at 12% 18%, rgba(255, 208, 174, 0.24), rgba(255, 208, 174, 0) 40%),
    linear-gradient(135deg, rgba(113, 53, 27, 0.96), rgba(61, 29, 64, 0.96));
  --btn-shadow: 0 12px 26px rgba(10, 4, 14, 0.42), inset 0 1px 0 rgba(255, 236, 220, 0.16);
  --btn-shadow-hover: 0 16px 30px rgba(10, 4, 14, 0.5), 0 0 0 1px rgba(255, 173, 110, 0.36);
}

[data-header-theme] :is(.index-hero, .faq-hero, .rules-hero, .mechanics-hero, .admin-hero, .subpage-hero) {
  border: 1px solid var(--ui-hero-border) !important;
  background: var(--ui-hero-bg) !important;
  box-shadow: var(--ui-hero-shadow) !important;
}

[data-header-theme] .page-kicker,
[data-header-theme] .mechanics-kicker {
  background: var(--ui-kicker-bg) !important;
  border-color: var(--ui-kicker-border) !important;
  color: var(--ui-kicker-text) !important;
}

[data-header-theme] :is(.index-hero h1, .faq-hero h1, .rules-hero h1, .mechanics-hero h1, .admin-hero h1, .subpage-hero h1) {
  color: var(--ui-hero-title) !important;
  text-shadow: var(--ui-hero-title-shadow) !important;
}

[data-header-theme] :is(.index-hero p, .faq-hero p, .rules-hero p, .mechanics-hero p, .admin-hero p, .subpage-hero p) {
  color: var(--ui-hero-text) !important;
}

[data-header-theme] :is(.quick-facts span, .rules-quick-facts span, .admin-quick-facts span, .subpage-facts span) {
  background: var(--ui-facts-bg) !important;
  border-color: var(--ui-facts-border) !important;
  color: var(--ui-facts-text) !important;
}

[data-header-theme] .rules-block {
  background: var(--ui-rules-block-bg) !important;
  border-color: var(--ui-rules-block-border) !important;
}

[data-header-theme] .rules-block h2 {
  color: var(--ui-rules-block-title) !important;
}

[data-header-theme] :is(.class-tabs, .items-menu, .memorial-tabs, .crafting-table-wrapper, .scp914-page .panel) {
  background: var(--ui-surface-bg) !important;
  border-color: var(--ui-surface-border) !important;
  box-shadow: var(--ui-surface-shadow) !important;
}

[data-header-theme] :is(.class-content, .class-unit, .crafting-card, .registration-card, .item-card, .rule-subitem, .scp914-page .result-card) {
  background: var(--ui-surface-bg) !important;
  border-color: var(--ui-surface-border) !important;
}

[data-header-theme] :is(.class-tab-btn, .items-menu a, .rules-side-nav a, .memorial-tab-btn) {
  background: var(--ui-tab-btn-bg) !important;
  border-color: var(--ui-tab-btn-border) !important;
  color: var(--ui-tab-btn-text) !important;
}

[data-header-theme] :is(.class-tab-btn:hover, .items-menu a:hover, .rules-side-nav a:hover, .memorial-tab-btn:hover) {
  background: var(--ui-tab-btn-hover-bg) !important;
  border-color: var(--ui-tab-btn-hover-border) !important;
  box-shadow: var(--ui-tab-btn-hover-shadow) !important;
}

[data-header-theme] :is(.class-content h2, .class-unit h3, .crafting-card h3, .registration-card h2, .item-card h3, .items-section-title, .items-menu h3, .panel h2) {
  color: var(--ui-surface-title) !important;
}

[data-header-theme] :is(.class-content p, .class-unit p, .crafting-card p, .registration-card p, .item-card p, .items-menu .menu-group, .inline-link, .stub-note, .crafting-intro, .steps-list, .panel p, .field label) {
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .cmd {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-tab-btn-bg) !important;
  color: var(--ui-surface-title) !important;
}

[data-header-theme] .scp914-page {
  --scp-glow: var(--ui-scp-glow);
  --scp-border: var(--ui-scp-border);
  --scp-bg-900: var(--ui-scp-bg-900);
  --scp-bg-800: var(--ui-scp-bg-800);
  --scp-bg-700: var(--ui-scp-bg-700);
}

[data-header-theme] :is(.hero-action, .index-card-action, .rules-docs-link) {
  border-color: var(--btn-border) !important;
  background: var(--btn-bg) !important;
  box-shadow: var(--btn-shadow) !important;
  color: #effff4 !important;
}

[data-header-theme] :is(.hero-action:hover, .index-card-action:hover, .rules-docs-link:hover) {
  border-color: var(--btn-border-strong) !important;
  box-shadow: var(--btn-shadow-hover) !important;
}

[data-header-theme] .hero-action::after,
[data-header-theme] .index-card-action::after {
  background: var(--hdr-item-line) !important;
}

[data-header-theme] .hero-action-primary {
  border-color: var(--btn-border-strong) !important;
  background: var(--btn-bg) !important;
}

[data-header-theme] .index-card {
  background: var(--ui-card-bg) !important;
  border-color: var(--ui-card-border) !important;
}

[data-header-theme] .card-icon {
  background: var(--ui-kicker-bg) !important;
  border-color: var(--ui-kicker-border) !important;
}

[data-header-theme] .card-desc {
  color: var(--ui-card-text) !important;
}

[data-header-theme] .faq-group {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-surface-bg) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-header-theme] .faq-group-header {
  background: var(--ui-surface-bg) !important;
  border-bottom-color: var(--ui-surface-border) !important;
}

[data-header-theme] .faq-group-header::after {
  background: repeating-linear-gradient(120deg, rgba(126, 248, 187, 0.02) 0 1px, transparent 1px 14px) !important;
}

[data-header-theme] .faq-group-name,
[data-header-theme] .faq-group-count,
[data-header-theme] .faq-note,
[data-header-theme] .rules-update-note {
  background: var(--ui-surface-bg) !important;
  border-color: var(--ui-surface-border) !important;
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .rules-docs-note {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .faq-group-count {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-kicker-bg) !important;
}

[data-header-theme] :is(.class-unit, .crafting-card, .registration-card, .item-card, .rule-subitem, .class-unit li, .items-section-title, .items-menu .menu-group, .crafting-table-wrapper, .crafting-table thead, .crafting-table th, .crafting-table td) {
  border-color: var(--ui-surface-border) !important;
}

[data-header-theme] :is(.class-unit h3, .crafting-card h3, .registration-card h2, .items-section-title, .crafting-table th) {
  color: var(--ui-surface-title) !important;
}

[data-header-theme] :is(.class-unit p, .class-unit li, .crafting-card p, .registration-card p, .item-card p, .crafting-table td, .steps-list, .inline-link, .stub-note, .crafting-intro) {
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .class-unit > p > strong:first-child:not(:has(> code:first-child)) {
  color: var(--ui-surface-title) !important;
}

[data-header-theme] .class-unit > p > strong > code {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-tab-btn-bg) !important;
  color: var(--ui-surface-title) !important;
}

[data-header-theme] .admin-intro {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-surface-bg) !important;
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .admin-hero::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)) !important;
}

[data-header-theme] .rules-side-nav {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-surface-bg) !important;
  box-shadow: var(--ui-surface-shadow) !important;
}

[data-header-theme] .note-card {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-surface-bg) !important;
}

[data-header-theme] .note-card p,
[data-header-theme] .rules-block h3,
[data-header-theme] .rules-block h4,
[data-header-theme] .headline h1,
[data-header-theme] .subhead-compact {
  color: var(--ui-surface-title) !important;
}

[data-header-theme] :is(.rel-table-wrap, .scenario-grid) {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-surface-bg) !important;
}

[data-header-theme] :is(.scenario-row, .scenario-label, .scenario-text, .scenario-note, .flow-block, .flow-step) {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-surface-bg) !important;
}

[data-header-theme] :is(.scenario-label, .scenario-note, .scenario-text, .flow-step strong, .flow-step p) {
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .rule-card :is(.label-note, .label-example, .label-exception, .label-question, .rule-key, .term-hostile, .term-neutral, .term-allies) {
  color: var(--ui-surface-title) !important;
}

[data-header-theme] .rule-card :is(.label-good, .scenario-good) {
  color: var(--ui-kicker-text) !important;
}

[data-header-theme] .rule-card :is(.label-bad, .scenario-bad) {
  color: #ffd2d2 !important;
}

[data-header-theme] :is(.hl-yellow, .hl-red) {
  border: 1px solid var(--ui-surface-border) !important;
  background: var(--ui-tab-btn-bg) !important;
  color: var(--ui-surface-title) !important;
}

[data-header-theme] .rule-card :is(.emph, .emph-neutral, .emph-danger, .label-recommend) {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-tab-btn-bg) !important;
  color: var(--ui-surface-title) !important;
}

[data-header-theme] .rule-card .emph {
  border-color: var(--ui-emph-allies-border) !important;
  background: linear-gradient(180deg, var(--ui-emph-allies-bg-top), var(--ui-emph-allies-bg-bottom)) !important;
  color: var(--ui-emph-allies-text) !important;
}

[data-header-theme] .rule-card .emph-neutral {
  border-color: var(--ui-emph-neutral-border) !important;
  background: linear-gradient(180deg, var(--ui-emph-neutral-bg-top), var(--ui-emph-neutral-bg-bottom)) !important;
  color: var(--ui-emph-neutral-text) !important;
}

[data-header-theme] .rule-card .emph-danger {
  border-color: var(--ui-emph-hostile-border) !important;
  background: linear-gradient(180deg, var(--ui-emph-hostile-bg-top), var(--ui-emph-hostile-bg-bottom)) !important;
  color: var(--ui-emph-hostile-text) !important;
}

[data-header-theme] .rules-nav-toggle,
[data-header-theme] .rules-side-nav a,
[data-header-theme] .rules-side-nav a.nav-subitem {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-tab-btn-bg) !important;
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .rules-side-nav a:hover,
[data-header-theme] .rules-side-nav a.is-active {
  border-color: var(--ui-tab-active-border) !important;
  background: var(--ui-tab-active-bg) !important;
  color: var(--ui-tab-active-text) !important;
}

[data-header-theme] .rules-side-nav .nav-group {
  border-color: var(--ui-surface-border) !important;
  background: var(--ui-kicker-bg) !important;
  color: var(--ui-kicker-text) !important;
}

[data-header-theme] .note-card p {
  color: #d4ffd6 !important;
}

[data-header-theme] .rules-block h3 {
  color: #8fffb6 !important;
}

[data-header-theme] .rules-block h4 {
  color: #b5ffc8 !important;
}

[data-header-theme] .subhead-compact {
  color: #e9fff2 !important;
}

[data-header-theme] .scenario-row {
  background: transparent !important;
}

[data-header-theme] .scenario-label {
  background: linear-gradient(160deg, rgba(56, 146, 90, 0.76), rgba(38, 109, 68, 0.82)) !important;
  color: #07170e !important;
}

[data-header-theme] .scenario-text {
  background: transparent !important;
  color: #d7f5e3 !important;
}

[data-header-theme] .scenario-note {
  background: rgba(73, 152, 98, 0.75) !important;
  color: #07170e !important;
}

[data-header-theme] .rule-card .label-note,
[data-header-theme] .rule-card .label-example,
[data-header-theme] .rule-card .label-exception,
[data-header-theme] .rule-card .label-question {
  background: transparent !important;
  border: none !important;
}

[data-header-theme] .rule-card .label-note {
  color: #5f99b0 !important;
}

[data-header-theme] .rule-card .label-example {
  color: #c93a3a !important;
}

[data-header-theme] .rule-card .label-exception {
  color: #caa06a !important;
}

[data-header-theme] .rule-card .label-question {
  color: #44c037 !important;
}

[data-header-theme] .rule-card .rule-key {
  color: #d7f2df !important;
}

[data-header-theme] .term-hostile {
  color: #e07a7a !important;
}

[data-header-theme] .term-neutral {
  color: #d9b36a !important;
}

[data-header-theme] .term-allies {
  color: #67b98f !important;
}

[data-header-theme] .rule-card .label-good,
[data-header-theme] .scenario-good {
  color: #66b98a !important;
}

[data-header-theme] .rule-card .label-bad,
[data-header-theme] .scenario-bad {
  color: #c76b6b !important;
}

[data-header-theme] .hl-yellow {
  border: none !important;
  background: rgba(255, 225, 107, 0.95) !important;
  color: #251c0c !important;
}

[data-header-theme] .hl-red {
  border: none !important;
  background: rgba(222, 96, 96, 0.9) !important;
  color: #fff !important;
}

[data-header-theme] .rule-card .label-recommend {
  border-color: rgba(97, 214, 124, 0.35) !important;
  background: rgba(64, 149, 84, 0.22) !important;
  color: #c9ffd6 !important;
}

[data-header-theme] :is(.mechanic-card, .mechanic-icon, .mechanics-page .card, .mechanic-list, .mechanic-desc) {
  border-color: var(--ui-card-border) !important;
}

[data-header-theme] .mechanic-card {
  background: var(--ui-card-bg) !important;
}

[data-header-theme] :is(.mechanic-card h2, .flow-block h2) {
  color: var(--ui-card-title) !important;
}

[data-header-theme] :is(.mechanic-desc, .mechanic-list, .flow-step p) {
  color: var(--ui-card-text) !important;
}

[data-header-theme] .mechanic-icon {
  background: var(--ui-kicker-bg) !important;
}

[data-header-theme] .class-unit h3 {
  background: var(--ui-tab-btn-bg) !important;
  border-color: var(--ui-surface-border) !important;
  color: var(--ui-surface-title) !important;
}

[data-header-theme] .class-unit li {
  background: var(--ui-tab-btn-bg) !important;
  border-color: var(--ui-surface-border) !important;
  color: var(--ui-surface-text) !important;
}

[data-header-theme] .class-unit li::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5)) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.28) !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 90px;
  scrollbar-width: auto;
  scrollbar-color: #51d98f rgba(7, 24, 16, 0.88);
}

/* Site-themed scrollbar for Chromium and Safari browsers. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-left: 1px solid rgba(82, 222, 142, 0.2);
  box-shadow: inset 0 0 0 1px rgba(143, 255, 201, 0.06);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 1px solid rgba(7, 24, 16, 0.95);
  min-height: 44px;
  box-shadow: inset 0 0 0 1px rgba(182, 255, 214, 0.18), 0 0 14px rgba(54, 212, 115, 0.24);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  box-shadow: inset 0 0 0 1px rgba(205, 255, 229, 0.22), 0 0 18px rgba(93, 241, 152, 0.34);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: var(--scroll-track);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: radial-gradient(circle at 20% 15%, #103d29 0%, #081712 50%, #020301 100%);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.45;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

p,
li,
h1,
h2,
h3,
h4 {
  overflow-wrap: anywhere;
}

@keyframes element-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header,
.hero,
.faq-hero,
.subpage-hero,
.rules-hero,
.admin-hero,
.admin-panel,
.faq-section,
.rules-section,
.accordion,
.rule-card,
.cards-grid .card,
.class-panel,
.site-footer {
  animation: element-fade-up 0.72s ease-out both;
}

.site-header {
  animation-delay: 0.04s;
}

.hero,
.faq-hero,
.subpage-hero,
.rules-hero,
.admin-hero,
.admin-panel,
.faq-section,
.rules-section {
  animation-delay: 0.12s;
}

.cards-grid .card:nth-child(1),
.accordion:nth-of-type(1),
.rule-card:nth-of-type(1),
.class-panel:nth-of-type(1) {
  animation-delay: 0.16s;
}

.cards-grid .card:nth-child(2),
.accordion:nth-of-type(2),
.rule-card:nth-of-type(2),
.class-panel:nth-of-type(2) {
  animation-delay: 0.24s;
}

.cards-grid .card:nth-child(3),
.accordion:nth-of-type(3),
.rule-card:nth-of-type(3),
.class-panel:nth-of-type(3) {
  animation-delay: 0.32s;
}

.cards-grid .card:nth-child(4),
.accordion:nth-of-type(4),
.rule-card:nth-of-type(4),
.class-panel:nth-of-type(4) {
  animation-delay: 0.4s;
}

.cards-grid .card:nth-child(5),
.accordion:nth-of-type(5),
.rule-card:nth-of-type(5),
.class-panel:nth-of-type(5) {
  animation-delay: 0.48s;
}

.cards-grid .card:nth-child(6),
.accordion:nth-of-type(6),
.rule-card:nth-of-type(6),
.class-panel:nth-of-type(6),
.cards-grid .card:nth-child(n + 7),
.accordion:nth-of-type(n + 7),
.rule-card:nth-of-type(n + 7),
.class-panel:nth-of-type(n + 7),
.site-footer {
  animation-delay: 0.56s;
}

.container {
  width: min(1180px, 100% - 2rem);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hdr-shell-bg);
  border-bottom: 1px solid var(--hdr-shell-border);
  box-shadow: var(--hdr-shell-shadow);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 248, 187, 0.3), transparent);
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.68rem 0;
  gap: 0.9rem;
}

.logo {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: #46ea86;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: none;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.24rem;
  border-radius: 15px;
  border: 1px solid var(--hdr-nav-border);
  background: var(--hdr-nav-bg);
  box-shadow: inset 0 1px 0 rgba(198, 255, 225, 0.08);
}

.main-nav a,
.dropbtn {
  color: var(--hdr-item-text);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--hdr-item-border);
  background: var(--hdr-item-bg);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  position: relative;
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.main-nav > a {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
}

.main-nav > a::before,
.main-nav > .dropdown .dropbtn::before {
  display: inline-block;
  margin-right: 0;
  line-height: 1;
  font-size: 0.84rem;
  font-weight: 700;
  opacity: 0.86;
  flex-shrink: 0;
  transform: translateY(-0.5px);
}

.main-nav > a::after,
.main-nav > .dropdown .dropbtn::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.22rem;
  height: 2px;
  border-radius: 999px;
  background: var(--hdr-item-line);
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}

.main-nav > a[href$="index.html"]::before {
  content: "⌂";
}

.main-nav > a[href$="faq.html"]::before {
  content: "?";
}

.main-nav > a[href$="rules.html"]::before {
  content: "⚖";
}

.main-nav > a[href$="mechanics.html"]::before {
  content: "⚙";
}

.main-nav > a[href$="Admin.html"]::before {
  content: "◇";
}

.main-nav > .dropdown .dropbtn::before {
  content: "◇";
}

.main-nav a:hover,
.dropbtn:hover {
  color: #f3fff4;
  background: var(--hdr-item-hover-bg);
  border-color: var(--hdr-item-hover-border);
  box-shadow: var(--hdr-item-hover-shadow);
  transform: translateY(-1px);
}

.main-nav a:hover::after,
.dropbtn:hover::after {
  opacity: 0.88;
  transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
  color: #f4fff8;
  border-color: var(--hdr-item-active-border);
  background: var(--hdr-item-active-bg);
  box-shadow: var(--hdr-item-active-shadow);
}

.main-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.dropdown {
  position: relative;
}

.dropbtn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid rgba(76, 217, 129, 0.24);
  background: rgba(16, 44, 30, 0.45);
}

.dropdown-content {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 240px;
  background: rgba(14, 32, 24, 0.92);
  border: 1px solid rgba(34, 197, 94, 0.36);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(4, 10, 7, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: 0.28s ease;
  z-index: 101;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.dropdown-content.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-content a {
  color: var(--text);
  display: block;
  padding: 0.68rem 0.9rem;
  border-bottom: 1px solid rgba(93, 168, 121, 0.2);
  transition: background 0.28s ease;
}


@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(4, 13, 9, 0.98);
  }

  .dropdown-content {
    background: rgba(14, 32, 24, 0.98);
  }
}

/* Fallback for browsers without :has() support. JS tabs still control active state. */
.no-has .class-content .class-panel {
  display: none;
}

.no-has .class-content .class-panel:first-of-type {
  display: block;
}

.no-has .class-tabs .class-tab-btn:first-of-type {
  background: rgba(34, 197, 94, 0.18);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
  border-color: rgba(34, 197, 94, 0.9);
}

.subpage {
  position: relative;
  padding-bottom: 1rem;
}

.subpage::before,
.subpage::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
  opacity: 0.55;
}

.subpage::before {
  width: 360px;
  height: 360px;
  top: -110px;
  right: -80px;
  background: radial-gradient(circle, rgba(117, 255, 201, 0.22), rgba(117, 255, 201, 0));
}

.subpage::after {
  width: 300px;
  height: 300px;
  bottom: 8%;
  left: -100px;
  background: radial-gradient(circle, rgba(40, 220, 112, 0.18), rgba(40, 220, 112, 0));
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(126, 248, 187, 0.32);
  color: #b6ffd6;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  text-transform: uppercase;
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.subpage-hero {
  text-align: left;
  margin-top: 1rem;
  margin-bottom: 1.3rem;
  padding: 1.3rem;
  border: 1px solid rgba(126, 248, 187, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(9, 25, 17, 0.86), rgba(7, 18, 13, 0.78)),
    repeating-linear-gradient(135deg, rgba(126, 248, 187, 0.06) 0 2px, transparent 2px 12px);
  box-shadow: 0 18px 36px rgba(6, 16, 10, 0.58);
}

.subpage-hero h1 {
  margin: 0;
  color: #dcffe9;
  font-family: "Russo One", "Segoe UI", sans-serif;
  letter-spacing: 0.03em;
  text-shadow: 0 0 30px rgba(126, 248, 187, 0.32);
}

.subpage-hero p {
  margin: 0.7rem 0 0;
  max-width: 780px;
  color: #b9d9c5;
  font-family: "Manrope", "Segoe UI", sans-serif;
  line-height: 1.6;
}

.subpage-facts {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.subpage-facts span {
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(95, 224, 153, 0.35);
  background: rgba(18, 52, 35, 0.55);
  border-radius: 999px;
  color: #ceffe1;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown-content a:hover {
  background: rgba(34, 197, 94, 0.18);
}

.burger-btn {
  display: none;
  background: linear-gradient(150deg, rgba(14, 38, 27, 0.82), rgba(8, 24, 16, 0.72));
  border: 1px solid rgba(96, 236, 154, 0.28);
  border-radius: 10px;
  cursor: pointer;
  width: 40px;
  height: 34px;
  padding: 0.42rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  align-items: center;
}

.burger-btn span {
  width: 100%;
  height: 2.5px;
  border-radius: 999px;
  background: #dcffe9;
  transition: 0.36s ease;
}

.burger-btn.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.burger-btn.active span:nth-child(2) {
  opacity: 0;
}

.burger-btn.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.hero {
  padding: 2rem 0 1rem;
  text-align: center;
}

.hero h1 {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: clamp(2rem, 6vw, 3rem);
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.hero p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
}

.cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 1.2rem 0 2rem;
}

/* Readability tweaks: softer tones, comfortable line-height and highlights */
.rules-block,
.rule-card,
.note-card,
.rules-hero {
  background-color: rgba(10, 22, 16, 0.88);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

.rules-block h2,
.rules-block h3,
.rules-block h4,
.rules-hero h1 {
  color: #cfeee0;
}

.rule-card p,
.rule-card li,
.note-card p,
.rules-hero p {
  color: #eaf7ec;
}

.rules-side-nav a {
  color: #e6f6ea;
}
.rules-side-nav a:hover {
  background: rgba(44, 110, 74, 0.78);
}

/* Softer inline highlights to avoid glare */
.hl-yellow {
  background: rgba(255, 236, 153, 0.9);
  color: #211b10;
  padding: 0 0.18rem;
  border-radius: 3px;
  font-weight: 700;
}
.hl-red {
  background: rgba(222, 96, 96, 0.88);
  color: #fff;
  padding: 0 0.18rem;
  border-radius: 3px;
  font-weight: 700;
}

::selection {
  background: rgba(126, 248, 187, 0.16);
  color: #021006;
}

/* Make emphasis noticeable but soft */
strong, b {
  color: var(--emphasis);
  font-weight: 700;
}

.rule-card .rule-key {
  color: var(--emphasis);
  font-weight: 700;
  background: rgba(126, 248, 187, 0.08);
  padding: 0 0.16rem;
  border-radius: 4px;
}

.admin-panel {
  background: var(--ui-panel-bg);
  border: 1px solid var(--ui-panel-border);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1.3rem;
}

.admin-panel.hidden {
  display: none;
}

.admin-panel h2 {
  margin: 0;
  color: var(--ui-panel-title);
}

.admin-panel p {
  margin: 0.6rem 0 0;
  color: var(--ui-panel-text);
}

.admin-tab {
  display: none;
}

.admin-tab.active {
  display: block;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
    max-height: 100vh;
  min-height: 210px;
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: 16px;
  padding: 1.05rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  transition: transform 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: var(--ui-card-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.34s ease;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--ui-card-hover-border);
  box-shadow: var(--ui-card-hover-shadow);
}

.card:hover::before {
  opacity: 1;
}

.card h2 {
  margin: 0 0 0.45rem;
  color: var(--ui-card-title);
}

.card p,
.card a:not(.action-btn) {
  color: var(--ui-card-text);
}

.card a:not(.action-btn) {
  text-decoration: none;
  border-bottom: 1px dashed var(--ui-card-link-border);
}

.card a:not(.action-btn):hover {
  color: #efffee;
}

.class-tab-btn.is-active {
  background: linear-gradient(135deg, rgba(42, 128, 85, 0.98), rgba(18, 56, 38, 0.98)) !important;
  box-shadow: 0 0 0 1px rgba(126, 248, 187, 0.24), 0 14px 28px rgba(7, 22, 14, 0.5) !important;
  border-color: rgba(191, 255, 226, 0.9) !important;
}

.action-btn {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.92rem 0;
  border-radius: 12px;
  border: 1px solid rgba(126, 248, 187, 0.45);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.82), rgba(16, 152, 82, 0.86));
  box-shadow: 0 10px 18px rgba(10, 35, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #f4fff6;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(8, 28, 18, 0.62), 0 0 14px rgba(126, 248, 187, 0.45);
  filter: brightness(1.05);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 12px rgba(8, 28, 18, 0.5);
}

.action-btn:focus-visible {
  outline: 2px solid #d5ffe7;
  outline-offset: 2px;
}

/* Unified premium style for primary buttons and button-like links across pages. */
:is(
  button:not(.burger-btn):not(.dropbtn):not(.video-overlay-btn):not(.notice-close-btn):not([aria-label="Закрыть титры"]),
  a.hero-action,
  .action-btn,
  .class-tab-btn,
  .rules-docs-link,
  .rules-nav-toggle,
  .video-play-btn,
  .credits-audio-btn,
  .notice-confirm-btn
) {
  border: 1px solid var(--btn-border) !important;
  border-radius: 14px !important;
  background: var(--btn-bg) !important;
  color: #effff4 !important;
  box-shadow: var(--btn-shadow) !important;
  text-decoration: none;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

:is(
  button:not(.burger-btn):not(.dropbtn):not(.video-overlay-btn):not(.notice-close-btn):not([aria-label="Закрыть титры"]),
  a.hero-action,
  .action-btn,
  .class-tab-btn,
  .rules-docs-link,
  .rules-nav-toggle,
  .video-play-btn,
  .credits-audio-btn,
  .notice-confirm-btn
)::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -35%;
  width: 38%;
  height: 300%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(220, 255, 238, 0.45), rgba(255, 255, 255, 0));
  transform: rotate(18deg);
  transition: left 0.35s ease;
  pointer-events: none;
}

:is(
  button:not(.burger-btn):not(.dropbtn):not(.video-overlay-btn):not(.notice-close-btn):not([aria-label="Закрыть титры"]),
  a.hero-action,
  .action-btn,
  .class-tab-btn,
  .rules-docs-link,
  .rules-nav-toggle,
  .video-play-btn,
  .credits-audio-btn,
  .notice-confirm-btn
):hover {
  transform: translateY(-2px);
  border-color: var(--btn-border-strong) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  filter: brightness(1.04);
}

:is(
  button:not(.burger-btn):not(.dropbtn):not(.video-overlay-btn):not(.notice-close-btn):not([aria-label="Закрыть титры"]),
  a.hero-action,
  .action-btn,
  .class-tab-btn,
  .rules-docs-link,
  .rules-nav-toggle,
  .video-play-btn,
  .credits-audio-btn,
  .notice-confirm-btn
):hover::before {
  left: 112%;
}

:is(
  button:not(.burger-btn):not(.dropbtn):not(.video-overlay-btn):not(.notice-close-btn):not([aria-label="Закрыть титры"]),
  a.hero-action,
  .action-btn,
  .class-tab-btn,
  .rules-docs-link,
  .rules-nav-toggle,
  .video-play-btn,
  .credits-audio-btn,
  .notice-confirm-btn
):active {
  transform: translateY(0);
  box-shadow: 0 9px 18px rgba(4, 14, 9, 0.4) !important;
}

:is(
  .hero-action,
  .action-btn,
  .class-tab-btn,
  .rules-docs-link,
  .rules-nav-toggle,
  .video-play-btn,
  .credits-audio-btn,
  .notice-confirm-btn
):focus-visible {
  outline: 2px solid rgba(178, 255, 210, 0.95);
  outline-offset: 3px;
}

.faq-section,
.rules-section {
  margin: 2rem 0 2.3rem;
}

.accordion {
  background: var(--ui-accordion-bg);
  border: 1px solid var(--ui-accordion-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.7rem;
}

.accordion-btn {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  border-radius: 10px;
  transition: background-color 0.36s ease, transform 0.3s ease, box-shadow 0.36s ease;
}

.accordion-btn:hover {
  background: var(--ui-accordion-hover-bg);
  box-shadow: inset 0 0 0 1px var(--ui-accordion-hover-ring);
}

.accordion-btn:active {
  transform: scale(0.997);
}

.accordion-btn:focus-visible {
  outline: 2px solid rgba(126, 248, 187, 0.9);
  outline-offset: 2px;
}

.accordion-btn::-webkit-details-marker {
  display: none;
}

.accordion-btn::after {
  content: '▾';
  color: var(--accent-soft);
  transition: transform 0.36s ease;
}

.accordion-btn.active::after {
  transform: rotate(-180deg);
}

.accordion[open] .accordion-btn::after {
  transform: rotate(-180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height 0.46s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, transform 0.4s ease;
  padding: 0 1rem;
}

.accordion[open] .accordion-content {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.faq-section .accordion-content {
  max-height: none;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-3px);
  padding: 0 1rem;
  transition: grid-template-rows 0.56s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.46s ease, transform 0.46s ease;
}

.faq-section .accordion-content > * {
  overflow: hidden;
}

.faq-section .accordion-content-inner {
  min-height: 0;
}

.faq-section .accordion-content p {
  margin: 0.65rem 0 1rem;
  transform: translateY(-5px);
  transition: transform 0.46s ease;
}

.faq-section .accordion[open] .accordion-content {
  max-height: none;
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.faq-section .accordion[open] .accordion-content p {
  transform: translateY(0);
}

.accordion-content p {
  margin: 0.65rem 0 1rem;
  color: var(--muted);
}

.rule-card {
  background: var(--ui-rule-bg);
  border: 1px solid var(--ui-rule-border);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow);
}

.rule-card h2 {
  margin: 0 0 0.55rem;
  color: var(--ui-rule-title);
}

.rule-card ol {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.rule-card li {
  margin-bottom: 0.45rem;
}

.site-footer {
  padding: 1.2rem 0 1.4rem;
  text-align: center;
  color: #97bfa4;
  border-top: 1px solid rgba(40, 190, 101, 0.24);
}

@media (max-width: 940px) {
  body.menu-open {
    overflow: hidden;
  }

  .main-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    background: var(--hdr-mobile-menu-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 0.95rem 0.86rem 1.05rem;
    padding: max(0.95rem, env(safe-area-inset-top)) 0.86rem max(1.05rem, env(safe-area-inset-bottom));
    gap: 0.38rem;
    transform: translateX(-106%);
    transition: transform 0.34s ease;
    width: min(320px, 92vw);
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--hdr-mobile-menu-border);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.33);
    border-radius: 0 16px 16px 0;
  }

  .main-nav.active {
    transform: translateX(0);
  }

  .main-nav a,
  .dropbtn {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0.68rem 0.82rem;
    white-space: normal;
    border-radius: 12px;
  }

  .dropdown-content {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 0.15rem;
    box-shadow: none;
    border-radius: 10px;
  }

  .burger-btn {
    display: flex;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(1180px, 100% - 1.2rem);
  }

  .header-inner {
    padding: 0.65rem 0;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 7.5vw, 2.7rem);
  }

  .hero p {
    font-size: 0.95rem;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: auto;
    padding: 0.9rem;
  }

  .action-btn {
    font-size: 0.95rem;
    padding: 0.8rem 0;
  }

  .rel-table {
    font-size: 11px;
  }

  .rel-table th,
  .rel-table td {
    padding: 6px 8px;
  }
}

@media (max-width: 760px) {
  .hero,
  .index-hero,
  .mechanics-hero,
  .rules-hero,
  .admin-hero,
  .subpage-hero {
    border-radius: 14px !important;
    padding: 0.95rem !important;
  }

  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
    margin: 1rem 0 1.5rem;
  }

  .card {
    border-radius: 14px;
  }

  .class-page,
  .items-wrap,
  .rules-layout {
    grid-template-columns: 1fr !important;
  }

  .class-tabs,
  .items-menu,
  .rules-side-nav,
  .memorial-tabs {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .class-tab-btn,
  .memorial-tab-btn {
    width: 100% !important;
    text-align: left !important;
  }

  .class-tab-btn,
  .rules-side-nav a,
  .items-menu a,
  .memorial-tab-btn,
  .accordion-btn,
  .action-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .rel-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .cmd,
  code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 420px) {
  .main-nav {
    width: min(320px, 94vw);
    gap: 0.2rem;
  }

  .subpage-hero {
    margin-top: 0.55rem;
    padding: 0.85rem !important;
  }

  .subpage-facts span {
    width: 100%;
    text-align: center;
  }

  .logo {
    font-size: 1.3rem;
  }

  .hero h1 {
    font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  }

  .hero p {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .card {
    min-height: 155px;
    padding: 0.75rem;
  }

  .card h2 {
    font-size: 1.1rem;
  }

  .card p {
    font-size: 0.92rem;
  }

  .action-btn {
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-nav a,
  .dropbtn {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.45rem 0.68rem;
    font-size: 0.92rem;
  }

  .dropdown-content {
    width: 100%;
    max-width: 100%;
  }

  .container {
    width: min(1180px, 100% - 0.85rem);
  }

  .header-inner {
    padding: 0.6rem 0;
    gap: 0.6rem;
  }

  .rel-table {
    font-size: 10.5px;
  }

  .rel-table th,
  .rel-table td {
    padding: 6px 7px;
  }
}

@media (max-width: 360px) {
  .logo {
    font-size: 1.1rem;
  }

  .hero h1 {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }

  .main-nav > a::before,
  .main-nav > .dropdown .dropbtn::before {
    margin-right: 0.25rem;
  }

  .card {
    min-height: 145px;
    padding: 0.6rem;
  }

  .action-btn {
    font-size: 0.85rem;
    padding: 0.65rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .hero,
  .admin-panel,
  .faq-section,
  .rules-section,
  .cards-grid .card,
  .accordion,
  .rule-card,
  .site-footer {
    animation: none !important;
  }

  .accordion-btn,
  .accordion-content {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-header-theme="winter"] body::before,
  [data-header-theme="winter"] body::after {
    animation: none;
  }

  [data-header-theme="halloween"] body::before,
  [data-header-theme="halloween"] body::after {
    animation: none;
  }
}