/* ═══ HALLOWEEN · Hallows’ Eve ═════════════════════════════════════════════
   Loaded by the live build. Independent of Cherry: charcoal-and-ember oil,
   twisted oak, pumpkin lanterns, ravens, harvest moon. */

[data-palette="halloween"] {
  --ground: light-dark(#f8f3ea, #0b0a0e);
  --surface: light-dark(#fffaf0, #151016);
  --surface-2: light-dark(#f1e8d9, #1f1720);
  --line: light-dark(#e2d5c2, #2e2230);
  --line-strong: light-dark(#cdbca4, #453247);
  --ink: light-dark(#231a12, #f2e9dd);
  --ink-2: light-dark(#5f5141, #bfae9a);
  --ink-3: light-dark(#8c7b66, #8c7a70);
  --accent: light-dark(#b85a1f, #f0a35a);
  --accent-ink: light-dark(#ffffff, #1a0d05);
  --accent-wash: light-dark(#fbefe0, #2d1b10);
  --accent-line: light-dark(#e7c49c, #5c3a1f);
  --console: light-dark(#1a1018, #08070a);
  --chrome: light-dark(#241426, #17101b);
  --chrome-2: light-dark(#332036, #231725);
  --chrome-line: light-dark(#4a3350, #38263e);
  --chrome-ink: light-dark(#f6ecdf, #f4e9dc);
  --chrome-muted: light-dark(#c9b6c9, #b9a6b9);
}

@media (min-width: 921px) {
  :root[data-palette="halloween"] .sakura-host {
    background: #17101b;
    border-right-color: #38263e;
    isolation: isolate;
  }

  :root[data-palette="halloween"] .sakura-host > .sakura-scene {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #0b0a0e 0%, #1a0d1c 58%, #2a1020 100%);
  }

  :root[data-palette="halloween"] .sakura-host > :not(.sakura-scene) {
    position: relative;
    z-index: 2;
  }

  .sakura-scene > div { position: absolute; inset: 0; pointer-events: none; }

  :root[data-palette="halloween"] .sakura-sky {
    background-image: url("images/themes/halloween/sky.webp");
    opacity: .9;
  }

  :root[data-palette="halloween"] .sakura-tree-back {
    background-image: url("images/themes/halloween/tree-back.webp");
    opacity: .98;
  }

  :root[data-palette="halloween"] .sakura-tree-mid {
    background-image: url("images/themes/halloween/tree-mid.webp");
    opacity: .38;
    filter: brightness(.82) saturate(.9);
  }

  :root[data-palette="halloween"] .sakura-branch-front {
    background-image: url("images/themes/halloween/branch-front.webp");
    opacity: .9;
  }

  :root[data-palette="halloween"] .sakura-branch-hanging {
    background-image: url("images/themes/halloween/branch-hanging.webp");
    opacity: .93;
  }

  :root[data-palette="halloween"] .sakura-scrim {
    background:
      linear-gradient(90deg, rgb(8 5 10 / .9) 0%, rgb(8 5 10 / .68) 34%, rgb(20 10 24 / .2) 70%, rgb(8 5 10 / .5) 100%),
      linear-gradient(180deg, rgb(10 7 12 / .12) 0%, transparent 38%, rgb(42 16 32 / .55) 100%);
  }

  :root[data-palette="halloween"] .sakura-theme-extra {
    z-index: 5;
    background-image: url("images/themes/halloween/extra.webp");
    background-position: 8px calc(100% - 6px);
    background-size: 56% auto;
    background-repeat: no-repeat;
    opacity: 1;
    filter: drop-shadow(0 0 16px rgb(240 163 90 / .22));
  }

  :root[data-palette="halloween"] .sakura-host .side-brand {
    border: 1px solid rgb(240 163 90 / .28);
    background: linear-gradient(135deg, rgb(51 32 54 / .86), rgb(23 16 27 / .62));
    box-shadow: inset 0 1px 0 rgb(246 236 223 / .12), 0 12px 28px rgb(0 0 0 / .3);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }

  :root[data-palette="halloween"] .sakura-host .side-brand::after {
    display: none;
    content: none;
  }

  :root[data-palette="halloween"] .sakura-host .side-brand .brand-mark {
    color: #f0a35a;
    border-color: rgb(240 163 90 / .5);
    background: #17131a url("images/themes/halloween/mark.webp") center / cover no-repeat;
    filter: drop-shadow(0 0 10px rgb(240 163 90 / .25));
  }

  :root[data-palette="halloween"] .sakura-host .side-brand-name {
    color: #f6ecdf;
    font-size: 15px;
    letter-spacing: .1em;
  }

  :root[data-palette="halloween"] .sakura-host .side-brand-name em { color: #f0a35a; }

  :root[data-palette="halloween"] .sakura-host .side-brand-sub {
    color: #c9b6c9;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  :root[data-palette="halloween"] .sakura-host .nav-section {
    color: #c9a77f;
    text-shadow: 0 1px 3px rgb(0 0 0 / .65);
  }

  :root[data-palette="halloween"] .sakura-host .nav-item {
    color: #f0e2d5;
    border: 1px solid transparent;
    border-radius: 8px;
    text-shadow: 0 1px 3px rgb(0 0 0 / .6);
  }

  :root[data-palette="halloween"] .sakura-host .nav-item svg { color: #f0b27a; }

  :root[data-palette="halloween"] .sakura-host .nav-item:hover {
    background: rgb(240 163 90 / .1);
    border-color: rgb(240 163 90 / .2);
    color: #fff4e6;
  }

  :root[data-palette="halloween"] .sakura-host .nav-item.active {
    background: linear-gradient(90deg, rgb(240 163 90 / .34), rgb(240 163 90 / .08));
    border-color: rgb(240 163 90 / .3);
    color: #fff4e6;
    box-shadow: inset 3px 0 0 #f0a35a, 0 4px 14px rgb(0 0 0 / .18);
  }

  :root[data-palette="halloween"] .sakura-host .nav-item.active::before {
    display: none;
    content: none;
  }

  :root[data-palette="halloween"] .sakura-host .nav-item.active svg {
    color: #ffd39a;
    filter: drop-shadow(0 0 6px rgb(240 163 90 / .35));
  }

  :root[data-palette="halloween"] .sakura-host .side-conn {
    color: #d9c4b8;
    border-top-color: rgb(240 163 90 / .16);
    text-shadow: 0 1px 3px rgb(0 0 0 / .55);
  }

  :root[data-palette="halloween"] .sakura-host > .btn-danger-ghost {
    color: #f0b7a0;
    border-color: rgb(240 163 90 / .18);
    background: rgb(11 10 14 / .35);
  }

  :root[data-palette="halloween"] .sakura-topbar {
    padding: 5.5px clamp(9px, 1.3vw, 18px);
    border-bottom-color: rgb(240 163 90 / .16);
    background: linear-gradient(180deg, rgb(11 10 14 / .72), rgb(11 10 14 / .38));
    box-shadow: 0 10px 32px rgb(0 0 0 / .3);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
    isolation: isolate;
  }

  :root[data-palette="halloween"] .sakura-topbar > :not(.sakura-topbar-scene) {
    position: relative;
    z-index: 2;
  }

  :root[data-palette="halloween"] .sakura-topbar .page-title {
    color: #f6ecdf;
    text-shadow: 0 1px 3px rgb(0 0 0 / .55);
  }

  :root[data-palette="halloween"] .sakura-topbar .page-title::before { color: #c9a77f; }

  :root[data-palette="halloween"] .sakura-topbar .acct-select,
  :root[data-palette="halloween"] .sakura-topbar .btn:not(.run-pill) {
    border-color: rgb(240 163 90 / .22);
    background: rgb(11 10 14 / .62);
    color: #f0e2d5;
    box-shadow: inset 0 1px 0 rgb(246 236 223 / .06);
  }

  :root[data-palette="halloween"] .sakura-topbar .acct-select { color-scheme: dark; }

  :root[data-palette="halloween"] .sakura-topbar .btn:not(.run-pill):hover {
    border-color: rgb(240 163 90 / .34);
    background: rgb(240 163 90 / .12);
    color: #fff4e6;
  }

  :root[data-palette="halloween"] .sakura-topbar .connect-pill {
    border-color: rgb(240 163 90 / .22);
    background: rgb(11 10 14 / .55);
    color: #e9d0c0;
  }

  :root[data-palette="halloween"] .sakura-topbar .connect-pill.connected {
    border-color: rgb(127 191 143 / .42);
    background: rgb(47 122 82 / .22);
    color: #b7e3c5;
  }

  :root[data-palette="halloween"] .sakura-topbar .run-pill {
    border-color: rgb(240 163 90 / .22);
    box-shadow: 0 5px 16px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .12);
  }

  :root[data-palette="halloween"] .sakura-topbar .run-pill.running {
    border-color: rgb(127 191 143 / .55);
    background: linear-gradient(135deg, #3f8a5f, #2f6b49);
    color: #f2fff6;
  }

  :root[data-palette="halloween"] .sakura-topbar .run-pill.stopped {
    border-color: rgb(240 163 90 / .38);
    background: linear-gradient(135deg, #e08a2e, #a33a2e);
    color: #1a0d05;
  }

  :root[data-palette="halloween"] .sakura-topbar .run-pending { color: #f0d2a0; }

  :root[data-palette="halloween"] .sakura-main {
    position: relative;
    isolation: isolate;
    background: #0b0a0e;
  }

  :root[data-palette="halloween"] .sakura-main::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: clamp(230px, 20vw, 286px);
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(10 7 12 / .12) 0%, rgb(10 7 12 / .32) 36%, rgb(10 7 12 / .72) 100%),
      url("images/themes/halloween/main-hero.webp") center top / cover no-repeat;
  }

  :root[data-palette="halloween"] .sakura-main > .content {
    position: relative;
    z-index: 1;
    padding: clamp(10px, 1.5vw, 21px);
  }

  :root[data-palette="halloween"] .sakura-main .command-hero {
    align-self: stretch;
    min-height: 126px;
    padding: clamp(9px, 1.2vw, 15px);
    background: linear-gradient(90deg, rgb(8 5 10 / .9) 0%, rgb(8 5 10 / .62) 42%, rgb(20 10 24 / .12) 78%, rgb(8 5 10 / .35) 100%);
    border-color: rgb(240 163 90 / .16);
    box-shadow: 0 18px 42px rgb(0 0 0 / .28);
  }

  :root[data-palette="halloween"] .sakura-main .command-hero-copy {
    flex: 1 1 auto;
    max-width: 760px;
  }

  :root[data-palette="halloween"] .sakura-main .command-hero h1 { margin: 4px 0 2px; }

  :root[data-palette="halloween"] .sakura-main .command-hero p {
    max-width: 720px;
    margin: 0;
  }

  :root[data-palette="halloween"] .sakura-main .command-hero::before {
    background: linear-gradient(120deg, rgb(240 163 90 / .18), transparent 64%);
  }

  :root[data-palette="halloween"] .sakura-main .page-banner {
    background: linear-gradient(90deg, rgb(8 5 10 / .9) 0%, rgb(8 5 10 / .62) 45%, rgb(20 10 24 / .14) 80%);
    border-color: rgb(240 163 90 / .16);
    box-shadow: 0 14px 34px rgb(0 0 0 / .24);
  }

  :root[data-palette="halloween"] .sakura-main .page-banner::before {
    background: linear-gradient(120deg, rgb(240 163 90 / .18), transparent 64%);
  }

  :root[data-palette="halloween"] .sakura-main .panel {
    border-color: color-mix(in srgb, var(--line-strong) 64%, transparent);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    box-shadow: 0 12px 32px rgb(0 0 0 / .16), inset 0 1px 0 rgb(246 236 223 / .05);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
    backdrop-filter: blur(12px) saturate(1.06);
  }

  :root[data-palette="halloween"] .sakura-main .status-strip {
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    border-color: color-mix(in srgb, var(--line-strong) 64%, transparent);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
    backdrop-filter: blur(12px) saturate(1.06);
  }

  :root[data-palette="halloween"] .sakura-main .stat-card { padding: 7px 9px; }

  :root[data-palette="halloween"] .sakura-main .stat-ico {
    width: 36px;
    height: 36px;
    right: 7px;
    opacity: .6;
  }

  :root[data-palette="halloween"] .sakura-main .seg {
    border-color: color-mix(in srgb, var(--line-strong) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 66%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  :root[data-palette="halloween"] .sakura-main .seg-btn.active {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  :root[data-palette="halloween"] .sakura-main .bot-card {
    border-color: color-mix(in srgb, var(--line-strong) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  :root[data-palette="halloween"] .sakura-main .bot-card:hover {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }

  :root[data-palette="halloween"] .sakura-main .bot-card.on {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--accent-wash) 72%, transparent),
      color-mix(in srgb, var(--surface) 82%, transparent) 72%);
  }

  :root[data-palette="halloween"] .sakura-main .console-col {
    border-color: color-mix(in srgb, var(--chrome-line) 80%, transparent);
    background: color-mix(in srgb, var(--console) 84%, transparent);
    box-shadow: 0 14px 34px rgb(0 0 0 / .24), inset 0 1px 0 rgb(246 236 223 / .04);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
  }

  :root[data-palette="halloween"] .sakura-main .console-head {
    border-bottom-color: color-mix(in srgb, var(--chrome-line) 80%, transparent);
    background: color-mix(in srgb, var(--console) 72%, transparent);
  }

  :root[data-palette="halloween"] .sakura-main .console-body { background: transparent; }

  :root[data-palette="halloween"] .sakura-main .session-gains {
    border-color: color-mix(in srgb, var(--chrome-line) 70%, transparent);
    background: color-mix(in srgb, var(--console) 55%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sakura-petals { display: none; }
}