/* Хэллоуин: a village garden cut from paper, a picket fence, cabbage beds, a scarecrow (garden.svg, a mask so it
   takes each theme's ink), across the air card and the bottom of the side panel.
   Light: an orange dusk over plum silhouettes, paper cards cut by hand. Dark: midnight under the moon, the silhouettes
   black. Kurale's folk letters for the titles over Commissioner for reading. */
[data-design="halloween"] {
  --sky: linear-gradient(180deg, #ffbd66 0%, #f58a45 45%, #c9505c 100%);
  --bg: #f58a45;
  --side: #2b1631;
  --side-glow: #9c3f55;
  --card: #fff3e3;
  --card-2: #ffe4c2;
  --line: rgb(43 22 49 / 0.14);
  --text: #2b1631;
  --muted: #7a5560;
  --accent: #c2470a;
  --accent-ink: #fff3e3;
  --accent-soft: rgb(194 71 10 / 0.1);
  --danger: #b3261e;
  --shadow: 0 10px 24px rgb(80 20 30 / 0.25);
  --silhouette: #2b1631;
  --stage: linear-gradient(180deg, #ffd08a 0%, #f58a45 55%, #b8465e 100%);
  --stage-text: #2b1631;
  --title-ink: #2b1631;
  --cut: 6px 16px 8px 18px / 16px 6px 18px 8px;
  --lv1: #9a5a00; --lv2: #1f6f8b; --lv3: #7a3fa8; --lv4: #7a5560; --lv5: #b3261e;
  color-scheme: light;
}
[data-design="halloween"][data-theme="dark"] {
  --sky: radial-gradient(circle at 86% 6%, rgb(255 236 190 / 0.14), transparent 28%), linear-gradient(180deg, #121b30 0%, #0a101d 100%);
  --bg: #0b111e;
  --side: #070b13;
  --side-glow: #1b2a44;
  --card: #141d2e;
  --card-2: #1c2740;
  --line: rgb(255 170 90 / 0.13);
  --text: #f6e7cf;
  --muted: #a99880;
  --accent: #ff9a3c;
  --accent-ink: #1b0e04;
  --accent-soft: rgb(255 154 60 / 0.12);
  --danger: #ff6b5a;
  --shadow: 0 14px 30px rgb(0 0 0 / 0.5);
  --silhouette: #03060c;
  --stage: radial-gradient(circle at 80% 24%, #fff4d6 0 4.5%, rgb(255 244 214 / 0.22) 5.5%, transparent 20%), linear-gradient(180deg, #1d2a4a 0%, #0b1120 85%);
  --stage-text: #f6e7cf;
  --title-ink: #f6e7cf;
  --lv1: #ffb35c; --lv2: #6cc3e0; --lv3: #c9a0f2; --lv4: #a99880; --lv5: #ff6b5a;
  color-scheme: dark;
}

[data-design="halloween"] body { font-family: Commissioner, system-ui, sans-serif; background: var(--sky) fixed, var(--bg); }
[data-design="halloween"] h1, [data-design="halloween"] h2, [data-design="halloween"] h3, [data-design="halloween"] .tile-value { font-family: Kurale, Georgia, serif; font-weight: 400; letter-spacing: 0; }
[data-design="halloween"] .head h1 { font-size: clamp(28px, 3.4vw, 40px); color: var(--title-ink); }

/* the side panel: the sky going down to the garden */
[data-design="halloween"] .side { position: relative; background: linear-gradient(180deg, var(--side) 50%, var(--side-glow)); border-right: 0; padding-bottom: 96px; }
[data-design="halloween"] .side::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 70px; pointer-events: none;
  background: var(--silhouette); -webkit-mask: url(/designs/garden.svg) left bottom / auto 70px repeat-x; mask: url(/designs/garden.svg) left bottom / auto 70px repeat-x;
}
[data-design="halloween"][data-theme="light"] .side::after { background: #1a0c20; }
[data-design="halloween"] .logo.only-light { display: none; } /* the panel is dark in both themes: the white logo always */
[data-design="halloween"] .logo.only-dark { display: inline; }
[data-design="halloween"] .nav a { color: #f6dcc0; border-radius: 8px; }
[data-design="halloween"] .nav a:hover { background: rgb(255 255 255 / 0.07); color: #fff; }
[data-design="halloween"] .nav a.on { background: rgb(255 154 60 / 0.18); color: #ffb35c; }
[data-design="halloween"] .nav .badge { --c: #ffb35c; }
[data-design="halloween"] .side-foot, [data-design="halloween"] .side-foot .ext-link { color: #e9c9a8; }

/* paper, cut by hand */
[data-design="halloween"] :is(.card, .tile, .faq-item, .pl, .hint, .quick-row, .me, .seg, .vote, .toast, .menu, .design-card) {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--cut); box-shadow: var(--shadow);
}
[data-design="halloween"] .faq-item[open] { border-color: var(--accent); }
[data-design="halloween"] .faq-item p { color: var(--text); opacity: 0.85; line-height: 1.7; }
[data-design="halloween"] :is(.hint, .quick-row, .tile) > .ic, [data-design="halloween"] .setting-title .ic { color: var(--accent); }
[data-design="halloween"] .btn { border-radius: 8px; border: 1.5px solid rgb(43 22 49 / 0.3); background: var(--card); }
[data-design="halloween"][data-theme="dark"] .btn { border-color: rgb(255 170 90 / 0.25); background: var(--card-2); }
[data-design="halloween"] .btn:hover { border-color: var(--accent); }
[data-design="halloween"] .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
[data-design="halloween"][data-theme="dark"] .btn.primary { box-shadow: 0 0 16px rgb(255 154 60 / 0.35); }
[data-design="halloween"] .input { border-radius: 8px; background: color-mix(in srgb, var(--card) 70%, #fff); }
[data-design="halloween"][data-theme="dark"] .input { background: #0e1524; }
[data-design="halloween"] .seg button { border-radius: 6px; }
[data-design="halloween"] .seg button.on { background: var(--accent); color: var(--accent-ink); }
[data-design="halloween"] .badge { border-radius: 6px; }

/* the air: a night garden on stage */
[data-design="halloween"] .hero { background: var(--stage); color: var(--stage-text); border: 0; border-radius: 10px 22px 12px 24px; box-shadow: var(--shadow); padding-bottom: 92px; }
[data-design="halloween"] .hero-bg { display: none; }
[data-design="halloween"] .hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 74px; z-index: -1; pointer-events: none;
  background: var(--silhouette); -webkit-mask: url(/designs/garden.svg) left bottom / auto 74px repeat-x; mask: url(/designs/garden.svg) left bottom / auto 74px repeat-x;
}
[data-design="halloween"] .hero .cover-wrap, [data-design="halloween"] .hero-info { position: relative; z-index: 1; }
[data-design="halloween"] .cover { border-radius: 8px 18px 10px 20px; box-shadow: 0 12px 26px rgb(0 0 0 / 0.35); }
[data-design="halloween"] .cover.placeholder { background: rgb(0 0 0 / 0.16); }
[data-design="halloween"] .eyebrow { color: var(--stage-text); opacity: 0.85; text-transform: none; letter-spacing: 0; font-size: 14px; }
[data-design="halloween"] .hero h2 { font-family: Kurale, Georgia, serif; font-weight: 400; }
[data-design="halloween"] .hero .sub, [data-design="halloween"] .hero .ext-link { color: var(--stage-text); opacity: 0.85; }
[data-design="halloween"] .hero .time { color: var(--stage-text); }
[data-design="halloween"] .hero .btn:not(.primary) { background: rgb(255 243 227 / 0.88); color: #2b1631; border-color: rgb(43 22 49 / 0.35); }
[data-design="halloween"][data-theme="dark"] .hero .btn:not(.primary) { background: rgb(20 29 46 / 0.85); color: var(--text); border-color: rgb(255 170 90 / 0.25); }
[data-design="halloween"][data-theme="light"] .hero .btn.primary { background: #2b1631; color: #ffe4c2; }
[data-design="halloween"] .radio-down { color: var(--stage-text); text-decoration: underline wavy var(--danger); }

/* lists and the rest */
[data-design="halloween"] .row:hover { background: var(--card-2); }
[data-design="halloween"] .row.mine { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
[data-design="halloween"] .thumb { border-radius: 6px 10px 6px 10px; }
[data-design="halloween"] .ch.has-bot { border-color: var(--accent); background: var(--accent-soft); }
[data-design="halloween"] .pl-art { background: var(--stage); color: var(--stage-text); border-radius: 8px 16px 10px 18px; }
[data-design="halloween"] .design-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
[data-design="halloween"] .thank > .ic { color: var(--accent); }
[data-design="halloween"] .thank a, [data-design="halloween"] .version a { color: var(--accent); }

/* the player: night ink; the listen button a pumpkin that glows while it plays */
[data-design="halloween"] .bar { background: var(--side); border-top: 0; color: #f6e7cf; }
[data-design="halloween"] .bar .t-sub { color: #c9ab90; }
[data-design="halloween"] .center .time { color: #ffb35c; }
[data-design="halloween"] .listen { width: 52px; height: 52px; color: #2b1631; background: radial-gradient(circle at 38% 32%, #ffc77a, #f07a1e 55%, #b84a0c); }
[data-design="halloween"].listening .listen { box-shadow: 0 0 0 4px rgb(255 154 60 / 0.22), 0 0 26px rgb(255 154 60 / 0.6); }
[data-design="halloween"] .right { color: #c9ab90; }
[data-design="halloween"] .right input { accent-color: #ff9a3c; }
[data-design="halloween"] .toast { box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }

@media (max-width: 860px) {
  [data-design="halloween"] .tabs { background: var(--side); border-top: 0; }
  [data-design="halloween"] .tabs a { color: #f6dcc0; }
  [data-design="halloween"] .tabs a.on { color: #ffb35c; }
  [data-design="halloween"] .hero { padding-bottom: 84px; }
  [data-design="halloween"] .head-icon { width: 40px; height: 40px; }
  [data-design="halloween"] .head h1 { font-size: 24px; }
}
[data-design="halloween"] .quick-row .input, [data-design="halloween"] .quick-row .input:focus { border: 0; outline: none; background: none; box-shadow: none; }