/*
  05-overlays.css — the six easter-egg overlay modes (Gay, Mutiny, Flumph,
  Daddy Problem, Skuttles, Christmas) plus the shared .mode-card family.
  Extracted verbatim from styles.css in v37: these must stay UNLAYERED and
  load LAST so mode reskins beat the v37 component styles, exactly as they
  used to beat the legacy base styles.
*/

body.gay-mode {
  --bg: #16051f;
  --bg2: #271044;
  --wood: #17051f;
  --wood2: #341052;
  --wood3: #6f2077;
  --paper: #fff3fb;
  --paper2: #eadcff;
  --paper3: #d6c0f2;
  --ink: #1c1122;
  --ink-soft: #41284f;
  --muted: #674873;
  --faint: #80688c;
  --line: rgba(50, 15, 64, .24);
  --line-strong: rgba(50, 15, 64, .46);
  --text: #180d22;
  --gold: #b83289;
  --gold2: #fff1a8;
  --cyan: #ff6ec7;
  --ok: #0c7b3e;
  --warn: #b46600;
  --danger: #c21f4d;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 26rem),
    radial-gradient(circle at bottom right, rgba(0, 245, 212, .18), transparent 30rem),
    linear-gradient(135deg, #7b1236 0%, #8d4310 18%, #9a7b0b 34%, #176a38 52%, #155779 70%, #4b247e 86%, #5d1749 100%);
}

body.gay-mode .topbar {
  background: linear-gradient(180deg, rgba(24, 5, 37, .98), rgba(47, 14, 72, .96));
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982) 1;
  color: #fff8ff;
}

body.gay-mode h1,
body.gay-mode .screen-title h2,
body.gay-mode .section-title h2 {
  color: #fff1a8;
  text-shadow: 0 2px 0 rgba(0,0,0,.72);
}

body.gay-mode .subtitle {
  color: #ffdff4;
}

body.gay-mode .topbar .tag,
body.gay-mode .topbar .summary-pill,
body.gay-mode .topbar .time-toggle.icon-only {
  background: rgba(0,0,0,.36);
  border-color: rgba(255,255,255,.34);
  color: #fff8ff;
}

body.gay-mode .card,
body.gay-mode .modal,
body.gay-mode .compact-board,
body.gay-mode .resource-card,
body.gay-mode .quest-card,
body.gay-mode .npc-card,
body.gay-mode .holding-card,
body.gay-mode .mod-card,
body.gay-mode .weapon-summary-card,
body.gay-mode .slot-cell,
body.gay-mode .component-table,
body.gay-mode .crew-compact {
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  color: var(--ink);
  border-color: rgba(81, 30, 100, .50);
}

body.gay-mode .summary-pill-card,
body.gay-mode .metric {
  background: linear-gradient(180deg, rgba(255, 247, 253, .88), rgba(232, 219, 255, .92));
  color: var(--ink);
}

body.gay-mode .button.primary {
  background: linear-gradient(90deg, #e40303 0%, #ff8c00 18%, #ffed00 38%, #008026 58%, #24408e 78%, #732982 100%);
  color: #111;
  border-color: rgba(255,255,255,.64);
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

body.gay-mode .button.secondary {
  background: linear-gradient(180deg, #7b2fa0, #233f96);
  color: #fff8ff;
  border-color: rgba(255, 185, 231, .44);
}

body.gay-mode .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: linear-gradient(180deg, #66318a, #37145d);
  color: #fff8ff;
  border-color: rgba(255,255,255,.26);
}

body.gay-mode .bottom-nav {
  background: rgba(24, 5, 37, .98);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982) 1;
}

body.gay-mode .navbtn {
  color: #ead8ef;
}

body.gay-mode .navbtn.active {
  color: #fff;
  background: rgba(255, 110, 199, .24);
  outline-color: rgba(255,255,255,.38);
}

body.gay-mode .toast {
  background: rgba(20, 5, 32, .98);
  color: #fff8ff;
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 14px 36px rgba(0,0,0,.46);
}

.mode-card {
  grid-column: 1 / -1;
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.mode-card img {
  width: min(42vw, 180px);
  height: 62px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  flex: 0 0 auto;
}

.mode-card b {
  display: block;
  font-size: .84rem;
  letter-spacing: .08em;
}

.mode-card span {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  line-height: 1.25;
  position: relative;
}

.mode-emblem {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 1.55rem;
  line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.14);
}

@media (max-width: 430px) {
  .mode-card { gap: 8px; padding: 7px 8px; }
  .mode-card img { width: min(38vw, 130px); height: 48px; }
  .mode-card span { font-size: .72rem; }
  .mode-emblem { width: 40px; height: 40px; border-radius: 12px; font-size: 1.35rem; }
}

.gay-mode-card {
  background: linear-gradient(135deg, rgba(0,0,0,.60), rgba(112, 20, 116, .62));
  border: 1px solid rgba(255,255,255,.42);
  color: #fff8ff;
}

.gay-mode-card img {
  border: 1px solid rgba(255,255,255,.25);
}

.gay-mode-card b { color: #fff1a8; }

.gay-mode-card span { color: #ffe5f8; }

body.mutiny-mode {
  --bg: #150808;
  --bg2: #2a0b0b;
  --wood: #1f0a0a;
  --wood2: #3a0d0d;
  --wood3: #6b1512;
  --paper: #fff3d0;
  --paper2: #f3dfaa;
  --paper3: #dbc07a;
  --ink: #221307;
  --ink-soft: #493013;
  --muted: #6b481b;
  --faint: #8f6b35;
  --line: rgba(83, 26, 9, .24);
  --line-strong: rgba(83, 26, 9, .46);
  --text: #211106;
  --gold: #ffd45c;
  --gold2: #fff0a8;
  --cyan: #f0b32e;
  --ok: #486c1c;
  --warn: #b56a00;
  --danger: #b50f0f;
  background:
    radial-gradient(circle at top left, rgba(255, 212, 92, .16), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(181, 15, 15, .26), transparent 30rem),
    linear-gradient(135deg, #260707 0%, #4a0c0c 35%, #7b1414 58%, #2a0b0b 100%);
}

body.mutiny-mode .topbar {
  background: linear-gradient(180deg, rgba(43, 6, 6, .98), rgba(95, 13, 13, .96));
  border-bottom: 4px solid #ffd45c;
  color: #fff6cf;
}

body.mutiny-mode h1,
body.mutiny-mode .screen-title h2,
body.mutiny-mode .section-title h2 {
  color: #ffe48a;
  text-shadow: 0 2px 0 rgba(0,0,0,.75);
}

body.mutiny-mode .subtitle {
  color: #ffe8ae;
}

body.mutiny-mode .topbar .tag,
body.mutiny-mode .topbar .summary-pill,
body.mutiny-mode .topbar .time-toggle.icon-only {
  background: rgba(0,0,0,.38);
  border-color: rgba(255, 212, 92, .56);
  color: #fff6cf;
}

body.mutiny-mode .card,
body.mutiny-mode .modal,
body.mutiny-mode .compact-board,
body.mutiny-mode .resource-card,
body.mutiny-mode .quest-card,
body.mutiny-mode .npc-card,
body.mutiny-mode .holding-card,
body.mutiny-mode .mod-card,
body.mutiny-mode .weapon-summary-card,
body.mutiny-mode .slot-cell,
body.mutiny-mode .component-table,
body.mutiny-mode .crew-compact {
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  color: var(--ink);
  border-color: rgba(109, 33, 12, .55);
}

body.mutiny-mode .summary-pill-card,
body.mutiny-mode .metric {
  background: linear-gradient(180deg, rgba(255, 244, 204, .95), rgba(235, 207, 134, .96));
  color: var(--ink);
}

body.mutiny-mode .button.primary {
  background: linear-gradient(180deg, #b50f0f, #6f0808);
  color: #fff6cf;
  border-color: rgba(255, 212, 92, .72);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

body.mutiny-mode .button.secondary {
  background: linear-gradient(180deg, #6f0808, #320606);
  color: #fff6cf;
  border-color: rgba(255, 212, 92, .45);
}

body.mutiny-mode .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: linear-gradient(180deg, #7c1414, #3a0a0a);
  color: #fff6cf;
  border-color: rgba(255, 212, 92, .35);
}

body.mutiny-mode .bottom-nav {
  background: rgba(39, 6, 6, .98);
  border-top: 4px solid #ffd45c;
}

body.mutiny-mode .navbtn {
  color: #f1d899;
}

body.mutiny-mode .navbtn.active {
  color: #fff6cf;
  background: rgba(181, 15, 15, .42);
  outline-color: rgba(255, 212, 92, .48);
}

body.mutiny-mode .toast {
  background: rgba(43, 6, 6, .98);
  color: #fff6cf;
  border-color: rgba(255, 212, 92, .62);
  box-shadow: 0 14px 36px rgba(0,0,0,.46);
}

.mutiny-mode-card {
  background: linear-gradient(135deg, rgba(76, 6, 6, .92), rgba(150, 17, 17, .90));
  border: 1px solid rgba(255, 212, 92, .72);
  color: #fff6cf;
}

.mutiny-emblem { background: #ffd45c; color: #7b0d0d; font-size: 1.7rem; }

.mutiny-mode-card b { color: #ffe48a; }

.mutiny-mode-card span { color: #fff3c6; }

body.christmas-mode {
  --bg: #10261c;
  --bg2: #1f4d36;
  --wood: #173322;
  --wood2: #234830;
  --wood3: #6f1f1a;
  --paper: #fff8e7;
  --paper2: #eadfbd;
  --paper3: #d8c58f;
  --ink: #1c1710;
  --ink-soft: #463823;
  --muted: #67563a;
  --faint: #83734f;
  --line: rgba(48, 34, 18, .24);
  --line-strong: rgba(48, 34, 18, .46);
  --text: #1b130c;
  --gold: #b72f2f;
  --gold2: #fff2b5;
  --cyan: #f4d35e;
  --ok: #1f6b3a;
  --warn: #b76c1d;
  --danger: #b72f2f;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(183,47,47,.18), transparent 30rem),
    linear-gradient(135deg, #0f2a1c 0%, #183f2d 48%, #5b1717 100%) !important;
}

body.christmas-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  opacity: .62;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.55) 0 2px, transparent 3px);
  background-size: 92px 92px, 138px 138px, 210px 210px;
  animation: christmasSnow 18s linear infinite;
}

body.christmas-mode .topbar {
  background: linear-gradient(180deg, rgba(18,54,35,.98), rgba(91,23,23,.98));
  border-bottom-color: #f4d35e;
}

body.christmas-mode h1,
body.christmas-mode .screen-title h2,
body.christmas-mode .section-title h2 {
  color: #fff2b5;
  text-shadow: 0 2px 2px rgba(0,0,0,.65);
}

body.christmas-mode .card,
body.christmas-mode .modal,
body.christmas-mode .compact-board,
body.christmas-mode .resource-card,
body.christmas-mode .quest-card,
body.christmas-mode .npc-card,
body.christmas-mode .holding-card,
body.christmas-mode .mod-card,
body.christmas-mode .weapon-summary-card,
body.christmas-mode .slot-cell,
body.christmas-mode .component-table,
body.christmas-mode .crew-compact {
  background: linear-gradient(180deg, #fff8e7, #eadfbd);
  color: #1c1710;
  border-color: rgba(115, 35, 22, .28);
}

body.christmas-mode .button.primary {
  background: linear-gradient(180deg, #b72f2f, #7f1d1d);
  color: #fff8e7;
  border-color: rgba(255,242,181,.45);
}

body.christmas-mode .button.secondary,
body.christmas-mode .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: rgba(31, 107, 58, .18);
  color: #1c1710;
  border-color: rgba(31, 107, 58, .34);
}

body.christmas-mode .bottom-nav {
  background: rgba(18,54,35,.98);
  border-top-color: #f4d35e;
}

body.christmas-mode .navbtn { color: #e5d9a6; }

body.christmas-mode .navbtn.active { color: #fff8e7; background: rgba(183,47,47,.32); outline-color: rgba(244,211,94,.5); }

body.flumph-mode {
  --bg: #cab884;
  --bg2: #d8c998;
  --wood: #3e4e57;
  --wood2: #4f6d81;
  --wood3: #5d86ac;
  --paper: #f8efd2;
  --paper2: #ead9aa;
  --paper3: #d5c38a;
  --ink: #171410;
  --ink-soft: #3d3628;
  --muted: #5b4f36;
  --faint: #756a4e;
  --line: rgba(28, 46, 58, .25);
  --line-strong: rgba(28, 46, 58, .48);
  --text: #171410;
  --gold: #5d86ac;
  --gold2: #ecfbff;
  --cyan: #5d86ac;
  --ok: #35745e;
  --warn: #9a6b20;
  --danger: #9c4458;
  background:
    radial-gradient(circle at top left, rgba(93,134,172,.28), transparent 24rem),
    radial-gradient(circle at bottom right, rgba(104,211,232,.18), transparent 32rem),
    linear-gradient(135deg, #cab884 0%, #d8c998 45%, #8eb6c8 100%) !important;
}

body.flumph-mode .topbar {
  background: linear-gradient(180deg, rgba(70,92,98,.98), rgba(93,134,172,.96));
  border-bottom-color: #baf3ff;
}

body.flumph-mode h1,
body.flumph-mode .screen-title h2,
body.flumph-mode .section-title h2 {
  color: #ecfbff;
  text-shadow: 0 2px 2px rgba(0,0,0,.58);
}

body.flumph-mode .subtitle { color: #f6efd7; }

body.flumph-mode .card,
body.flumph-mode .modal,
body.flumph-mode .compact-board,
body.flumph-mode .resource-card,
body.flumph-mode .quest-card,
body.flumph-mode .npc-card,
body.flumph-mode .holding-card,
body.flumph-mode .mod-card,
body.flumph-mode .weapon-summary-card,
body.flumph-mode .slot-cell,
body.flumph-mode .component-table,
body.flumph-mode .crew-compact {
  background: linear-gradient(180deg, #f8efd2, #ead9aa);
  color: #171410;
  border-color: rgba(28,46,58,.25);
}

body.flumph-mode details.compact-board > summary,
body.flumph-mode details.loadout-section > summary,
body.flumph-mode .section-title {
  position: relative;
  background: linear-gradient(90deg, #5d86ac, #72abc3 54%, #5d86ac);
  color: #f8fff7;
  border: 1px solid rgba(236,251,255,.48);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 7px 18px rgba(28,46,58,.18);
}

body.flumph-mode details.compact-board > summary::before,
body.flumph-mode details.loadout-section > summary::before,
body.flumph-mode .section-title::before,
body.flumph-mode details.compact-board > summary::after,
body.flumph-mode details.loadout-section > summary::after,
body.flumph-mode .section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 14px;
  background:
    linear-gradient(90deg, #72abc3, #baf3ff 55%, #72abc3) center / 100% 4px no-repeat,
    linear-gradient(135deg, transparent 42%, #baf3ff 43% 57%, transparent 58%) 1px 2px / 6px 10px no-repeat,
    linear-gradient(90deg, transparent 42%, #baf3ff 43% 57%, transparent 58%) center 2px / 4px 10px no-repeat,
    linear-gradient(45deg, transparent 42%, #baf3ff 43% 57%, transparent 58%) calc(100% - 1px) 2px / 6px 10px no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.28));
}

body.flumph-mode details.compact-board > summary::before,
body.flumph-mode details.loadout-section > summary::before,
body.flumph-mode .section-title::before {
  left: -4px;
  transform: translateY(-50%) rotate(180deg);
}

body.flumph-mode details.compact-board > summary::after,
body.flumph-mode details.loadout-section > summary::after,
body.flumph-mode .section-title::after {
  right: -4px;
  transform: translateY(-50%);
}

body.flumph-mode .section-title h2,
body.flumph-mode details.compact-board > summary span:first-child,
body.flumph-mode details.loadout-section > summary span:first-child { color: #f8fff7; }

body.flumph-mode .button.primary {
  background: linear-gradient(180deg, #5d86ac, #3e637d);
  color: #f8fff7;
  border-color: rgba(236,251,255,.5);
}

body.flumph-mode .button.secondary,
body.flumph-mode .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: rgba(93,134,172,.16);
  color: #171410;
  border-color: rgba(93,134,172,.38);
}

body.flumph-mode .bottom-nav {
  background: rgba(62,78,87,.98);
  border-top-color: #baf3ff;
}

body.flumph-mode .navbtn { color: #d8eefa; }

body.flumph-mode .navbtn.active { color: #fffdf0; background: rgba(93,134,172,.42); outline-color: rgba(186,243,255,.48); }

body.flumph-mode .navbtn[data-screen="npcs"] .nav-icon svg { display: none; }

body.flumph-mode .navbtn[data-screen="npcs"] .nav-icon::before { content: "🦑"; font-size: 1.25rem; line-height: 1; }

.flumph-portrait {
  background: #cab884;
  border-color: rgba(93,134,172,.5);
  overflow: hidden;
}

.flumph-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
}

body.flumph-mode .npc-card {
  animation: flumphBob 5.5s ease-in-out infinite;
}

body.daddy-mode {
  --bg: #1f1230;
  --bg2: #3d2357;
  --wood: #21112f;
  --wood2: #3b1e54;
  --wood3: #68428c;
  --paper: #f6edf8;
  --paper2: #e6d4ef;
  --paper3: #c8acd7;
  --ink: #211328;
  --ink-soft: #4a2e55;
  --muted: #684c73;
  --faint: #806b89;
  --line: rgba(55, 25, 75, .26);
  --line-strong: rgba(55, 25, 75, .48);
  --text: #211328;
  --gold: #8e5bb7;
  --gold2: #ffe9ad;
  --cyan: #d89fed;
  --ok: #3e7656;
  --warn: #a56c28;
  --danger: #9d3656;
  background:
    radial-gradient(circle at top left, rgba(216,159,237,.18), transparent 26rem),
    radial-gradient(circle at bottom right, rgba(255,233,173,.12), transparent 30rem),
    linear-gradient(135deg, #1f1230 0%, #392052 55%, #5a316b 100%) !important;
}

body.daddy-mode .topbar {
  background: linear-gradient(180deg, rgba(31,18,48,.98), rgba(72,39,97,.98));
  border-bottom-color: #d89fed;
}

body.daddy-mode h1,
body.daddy-mode .screen-title h2,
body.daddy-mode .section-title h2 {
  color: #ffe9ad;
  text-shadow: 0 2px 2px rgba(0,0,0,.65);
}

body.daddy-mode .subtitle { color: #efdff3; }

body.daddy-mode .card,
body.daddy-mode .modal,
body.daddy-mode .compact-board,
body.daddy-mode .resource-card,
body.daddy-mode .quest-card,
body.daddy-mode .npc-card,
body.daddy-mode .holding-card,
body.daddy-mode .mod-card,
body.daddy-mode .weapon-summary-card,
body.daddy-mode .slot-cell,
body.daddy-mode .component-table,
body.daddy-mode .crew-compact {
  background: linear-gradient(180deg, #f6edf8, #e6d4ef);
  color: #211328;
  border-color: rgba(55,25,75,.28);
}

body.daddy-mode details.compact-board > summary,
body.daddy-mode details.loadout-section > summary,
body.daddy-mode .section-title,
body.daddy-mode .summary-pill {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 42%, rgba(139,94,42,.20) 0 6px, transparent 7px),
    radial-gradient(circle at 38% 70%, rgba(139,94,42,.18) 0 5px, transparent 6px),
    radial-gradient(circle at 67% 34%, rgba(139,94,42,.16) 0 7px, transparent 8px),
    radial-gradient(circle at 86% 66%, rgba(139,94,42,.18) 0 4px, transparent 5px),
    linear-gradient(180deg, #ffe9ad, #d9a94d) !important;
  color: #2b1735 !important;
  border-color: rgba(92,52,20,.45) !important;
  box-shadow: inset 0 -2px 0 rgba(92,52,20,.12), 0 7px 18px rgba(31,18,48,.18);
}

body.daddy-mode details.compact-board > summary span,
body.daddy-mode details.loadout-section > summary span,
body.daddy-mode .section-title h2,
body.daddy-mode .section-title .hint,
body.daddy-mode .summary-pill {
  color: #2b1735 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

body.daddy-mode details.compact-board > summary::after,
body.daddy-mode details.loadout-section > summary::after,
body.daddy-mode .section-title::after {
  content: "🧀";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  opacity: .42;
  font-size: 1rem;
  pointer-events: none;
}

.daddy-portrait {
  background: #2b1735;
  border-color: rgba(255,233,173,.6);
  overflow: hidden;
}

.daddy-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}

body.daddy-mode .npc-card {
  box-shadow: 0 10px 22px rgba(31,18,48,.16), inset 0 0 0 1px rgba(255,233,173,.22);
}

body.daddy-mode .button.primary {
  background: linear-gradient(180deg, #8e5bb7, #603777);
  color: #fff7e5;
  border-color: rgba(255,233,173,.46);
}

body.daddy-mode .button.secondary,
body.daddy-mode .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: rgba(142,91,183,.14);
  color: #211328;
  border-color: rgba(142,91,183,.35);
}

body.daddy-mode .bottom-nav {
  background: rgba(31,18,48,.98);
  border-top-color: #d89fed;
}

body.daddy-mode .navbtn { color: #d9c3e5; }

body.daddy-mode .navbtn.active { color: #fff7e5; background: rgba(142,91,183,.36); outline-color: rgba(216,159,237,.48); }

body.daddy-mode .toast {
  background: rgba(31,18,48,.98);
  color: #fff7e5;
  border-color: rgba(216,159,237,.48);
}

body.christmas-mode .topbar .button,
body.daddy-mode .topbar .button {
  color: #fff8e7;
  text-shadow: 0 1px 2px rgba(0,0,0,.78);
}

body.christmas-mode .topbar .button .faint,
body.daddy-mode .topbar .button .faint {
  color: rgba(255,248,231,.94);
  text-shadow: 0 1px 2px rgba(0,0,0,.78);
}

body.christmas-mode .topbar .button.secondary,
body.christmas-mode .topbar .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: linear-gradient(180deg, rgba(35,76,48,.96), rgba(21,55,37,.96));
  color: #fff8e7;
  border-color: rgba(244,211,94,.52);
}

body.daddy-mode .topbar .button.secondary,
body.daddy-mode .topbar .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: linear-gradient(180deg, rgba(76,42,106,.96), rgba(51,27,76,.96));
  color: #fff7e5;
  border-color: rgba(216,159,237,.52);
}

.flumph-mode-card {
  background: linear-gradient(90deg, #5d86ac, #cab884);
  color: #111;
  border: 1px solid rgba(236,251,255,.45);
}

.flumph-mode-card img {
  border: 1px solid rgba(255,255,255,.45);
}

.flumph-mode-card b { color: #0f2936; }

.flumph-mode-card span { color: #142c36; }

.daddy-mode-card {
  background: linear-gradient(90deg, #321649, #6a3b8e 52%, #9a6d28);
  color: #fff7e5;
  border: 1px solid rgba(255,233,173,.42);
}

.daddy-mode-card img {
  border: 1px solid rgba(255,233,173,.55);
  box-shadow: 0 0 0 2px rgba(59,30,84,.28);
  object-position: center top;
}

.daddy-mode-card b { color: #ffe9ad; }

.daddy-mode-card span { color: #f8eafa; }

.christmas-mode-card {
  background: linear-gradient(90deg, #123623, #7f1d1d);
  color: #fff8e7;
  border: 1px solid rgba(244,211,94,.48);
}

.christmas-emblem { background: #fff8e7; color: #7f1d1d; }

.christmas-mode-card b { color: #fff2b5; }

.christmas-mode-card span { color: #fff8e7; }

body:not(.skuttles-mode) .skuttles-nav,
body:not(.skuttles-mode) #screen-keyboard {
  display: none !important;
}

body.skuttles-mode {
  --bg: #24180f;
  --bg2: #4b3421;
  --wood: #2e1f14;
  --wood2: #5d4027;
  --wood3: #8d6331;
  --paper: #ead7ad;
  --paper2: #d2b27b;
  --paper3: #b9874f;
  --ink: #21150b;
  --ink-soft: #4b341f;
  --muted: #75502b;
  --faint: #947049;
  --line: rgba(50, 33, 16, .28);
  --line-strong: rgba(50, 33, 16, .5);
  --text: #21150b;
  --gold: #9d6c33;
  --gold2: #fff1c4;
  --cyan: #d29446;
  background:
    linear-gradient(rgba(36,24,15,.78), rgba(36,24,15,.78)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%23d39a4a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' opacity='.23'%3E%3Cpath d='M23 72c18-17 42-16 61 0-12 15-44 18-61 0z'/%3E%3Cpath d='M132 94c10-15 35-17 48-4 7 7 8 18 0 25-9 8-25 8-35 0'/%3E%3Cpath d='M144 118l-20 16m12-30l-28-2m-53 42c10-10 31-10 41 1'/%3E%3Cpath d='M211 35l6 17 17 2-13 10 4 17-14-9-15 9 5-17-13-10 17-2z'/%3E%3C/g%3E%3Cg fill='%23d39a4a' opacity='.18'%3E%3Cpath d='M47 28c8 0 8 12 15 12 3 0 4-1 7-3-2 6-4 9-9 9-6 0-10-4-13-8-3 4-7 8-13 8-5 0-7-3-9-9 3 2 4 3 7 3 7 0 7-12 15-12z'/%3E%3Cpath d='M87 26c6 0 6 10 11 10 2 0 3-1 5-2-1 5-3 8-7 8-5 0-8-3-10-6-3 3-6 6-11 6-4 0-6-3-7-8 2 1 3 2 5 2 5 0 5-10 11-10z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at top left, rgba(255,220,150,.16), transparent 22rem),
    radial-gradient(circle at bottom right, rgba(115,69,29,.38), transparent 28rem),
    linear-gradient(135deg, #21150b 0%, #4b3421 48%, #7c572d 100%) !important;
  background-blend-mode: normal, soft-light, normal, normal, normal;
}

body.skuttles-mode .topbar {
  background: linear-gradient(180deg, rgba(44,29,18,.98), rgba(97,67,39,.96));
  border-bottom-color: #d29446;
  box-shadow: inset 0 -1px 0 rgba(255,241,196,.14);
}

body.skuttles-mode h1,
body.skuttles-mode .screen-title h2,
body.skuttles-mode .section-title h2 {
  color: #fff0b8;
  text-shadow: 0 2px 2px rgba(0,0,0,.55);
}

body.skuttles-mode .subtitle { color: #f6e6bd; }

body.skuttles-mode .card,
body.skuttles-mode .modal,
body.skuttles-mode .compact-board,
body.skuttles-mode .resource-card,
body.skuttles-mode .quest-card,
body.skuttles-mode .npc-card,
body.skuttles-mode .holding-card,
body.skuttles-mode .mod-card,
body.skuttles-mode .weapon-summary-card,
body.skuttles-mode .slot-cell,
body.skuttles-mode .component-table,
body.skuttles-mode .crew-compact {
  background: linear-gradient(180deg, #f0dfb7, #d7bf86);
  color: #1f1409;
  border-color: rgba(45,30,14,.35);
}

body.skuttles-mode details.compact-board > summary,
body.skuttles-mode details.loadout-section > summary,
body.skuttles-mode .section-title {
  background: linear-gradient(90deg, #7a5730, #b88a42 52%, #7a5730);
  color: #fff6cf;
  border-color: rgba(255,240,184,.48);
  border-radius: 16px 16px 10px 10px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.13), 0 8px 18px rgba(43,27,17,.18);
}

body.skuttles-mode .section-title h2,
body.skuttles-mode details.compact-board > summary span:first-child,
body.skuttles-mode details.loadout-section > summary span:first-child { color: #fff6cf; }

body.skuttles-mode details.compact-board > summary,
body.skuttles-mode details.loadout-section > summary,
body.skuttles-mode .section-title {
  position: relative;
  overflow: hidden;
}

body.skuttles-mode details.compact-board > summary::after,
body.skuttles-mode details.loadout-section > summary::after,
body.skuttles-mode .section-title::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64' viewBox='0 0 320 64'%3E%3Cg fill='none' stroke='%23fff1c4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 40c18-14 38-13 54 0-12 12-40 14-54 0z'/%3E%3Cpath d='M85 17l8 13 15 2-11 9 4 15-12-8-12 8 4-15-11-9 15-2z'/%3E%3Cpath d='M132 42c7-11 24-12 34-3 4 4 5 10 0 15-6 5-18 5-24 0'/%3E%3Cpath d='M194 18c7 0 7 10 12 10 2 0 3-1 5-2-1 5-3 8-7 8-5 0-9-4-10-6-2 2-5 6-10 6-4 0-6-3-7-8 2 1 3 2 5 2 5 0 5-10 12-10z'/%3E%3Cpath d='M238 39c15-13 33-13 47 0-10 10-35 12-47 0z'/%3E%3Cpath d='M301 20l4 9 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 64px;
  background-repeat: repeat-x;
  background-position: center;
}

body.skuttles-mode .button.primary {
  background: linear-gradient(180deg, #a06d2a, #6b441d);
  color: #fff6cf;
  border-color: rgba(255,240,184,.46);
}

body.skuttles-mode .button.secondary,
body.skuttles-mode .button:not(.primary):not(.secondary):not(.danger):not(.ghost) {
  background: linear-gradient(180deg, rgba(245,226,183,.86), rgba(220,190,132,.9));
  color: #21150b;
  border-color: rgba(109,72,33,.42);
}

body.skuttles-mode .bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  background: rgba(35,25,17,.99);
  border-top-color: #e4b348;
  z-index: 80 !important;
}

body.skuttles-mode .bottom-nav-inner {
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  max-width: var(--max) !important;
}

body.skuttles-mode .navbtn { color: #e6d2a6; }

body.skuttles-mode .navbtn.active { color: #fff6cf; background: rgba(174,119,47,.34); outline-color: rgba(255,240,184,.45); }

body.skuttles-mode .summary-pill,
body.skuttles-mode .tag,
body.skuttles-mode .badge,
body.skuttles-mode .pill {
  background: rgba(146,101,49,.16);
  color: #4b341f;
  border-color: rgba(109,72,33,.24);
}

body.skuttles-mode .version-footer { color: #d6bf95; }

.skuttles-mode-card {
  background: linear-gradient(90deg, #5c3f24, #b67d3b);
  color: #fff6cf;
  border: 1px solid rgba(255,240,184,.45);
}

.skuttles-mode-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Cg fill='none' stroke='%23fff1c4' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 42c14-12 31-12 44 0-9 9-31 11-44 0z'/%3E%3Cpath d='M74 17l7 11 13 2-10 8 3 13-11-7-11 7 3-13-10-8 13-2z'/%3E%3Cpath d='M118 41c6-10 21-11 30-3 4 4 4 9 0 13-5 5-16 5-21 0'/%3E%3Cpath d='M176 40c14-12 30-12 42 0-8 9-29 10-42 0z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

.skuttles-mode-card img {
  border: 1px solid rgba(255,240,184,.5);
  box-shadow: 0 0 0 2px rgba(54,33,18,.25);
  background: #ead7ad;
}

.skuttles-mode-card b { color: #fff0b8; }

.skuttles-mode-card span { color: #fff8dc; }

@media (max-width: 430px) {
body.skuttles-mode .bottom-nav-inner { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; gap: 1px !important; }
}

/* ---------- v37 patches ---------- */
/* The nav has 6 tabs now; Skuttles Mode's old 9-column force is retuned. */
body.skuttles-mode .bottom-nav-inner {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* v37 token bridge: modes remap the legacy palette (--paper, --gold, --cyan,
   --wood, --bg). Inside a mode, derive the v37 tokens from those legacy
   variables so the new components (tiles, rows, segs, helm bar, sheets)
   recolor along with the classic cards. All six modes define the full
   legacy palette on body, so these var() chains always resolve. */
body.gay-mode, body.mutiny-mode, body.flumph-mode,
body.daddy-mode, body.skuttles-mode, body.christmas-mode {
  --chart: var(--paper);
  --chart-2: var(--paper2);
  --hull: var(--wood);
  --deck: var(--bg);
  --brass: var(--gold);
  --brass-bright: var(--gold2);
  --lagoon: var(--cyan);
}
body.gay-mode, body.mutiny-mode, body.flumph-mode,
body.daddy-mode, body.skuttles-mode, body.christmas-mode {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
}