/* Yinzer Town Square skins. The default look (black and gold) lives in app.css.
   A skin is a set of token overrides on <html data-skin="..."> plus a few decorations.
   Seasonal skins switch on by date in app.js; the visitor can always pick another in the footer. */

/* ---------- shared Halloween decorations ---------- */
[data-skin^="halloween"] .hero { border-color: var(--line-2); }
[data-skin^="halloween"] .hero::after {
  content: ""; position: absolute; right: 12px; top: 10px; width: 180px; height: 70px; pointer-events: none; opacity: .85;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 70'><g fill='%23000'><path d='M30 30c6-10 14-12 20-6 2-6 10-8 14 0 6-6 14-4 20 6-8-2-14 2-17 8-3-6-9-8-14-6-6-2-12 0-17 6 0-6-4-8-6-8z'/><path d='M110 12c4-7 10-8 14-4 1-4 7-6 10 0 4-4 10-3 14 4-6-1-10 1-12 6-2-4-6-6-10-4-4-1-8 0-12 4 0-4-3-6-4-6z' transform='scale(.8) translate(30 5)'/><path d='M120 50c5-8 11-9 16-5 1-5 8-6 11 0 5-5 11-3 16 5-6-2-11 1-13 7-2-5-7-7-11-5-5-1-9 0-13 5 0-5-4-7-6-7z' transform='scale(.6) translate(90 30)'/></g></svg>") no-repeat right top / contain;
}
[data-skin^="halloween"] .hero .moon { display: block; opacity: .22; right: 150px; top: -20px; }
[data-skin^="halloween"] .hero h1 { color: var(--pumpkin); text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 24px rgba(242,107,29,.35); }
[data-skin^="halloween"] .sec-head h2::before { content: "\1F383"; content: "\1F383" / ""; margin-right: 8px; font-size: .9em; }
[data-skin^="halloween"] .btn.primary { box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 18px var(--glow); }
[data-skin^="halloween"] .fab { box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 22px var(--glow); }
[data-skin^="halloween"] .brand-sub { color: var(--pumpkin); }
[data-skin^="halloween"] .nav a[aria-current="page"] { box-shadow: 0 0 0 3px var(--glow); }
[data-skin^="halloween"] .count .n { color: var(--pumpkin); }
[data-skin^="halloween"] .tonight-card { border-color: var(--pumpkin); box-shadow: 0 0 24px var(--glow); }
@media (max-width: 720px) { [data-skin^="halloween"] .hero::after { width: 120px; height: 48px; right: 6px; top: 6px; } [data-skin^="halloween"] .hero .moon { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  [data-skin^="halloween"] .hero::after { animation: flutter 6s ease-in-out infinite; }
  @keyframes flutter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}

/* ---------- 1. Pumpkin Patch: near-black with warm orange heat ---------- */
:root[data-skin="halloween-pumpkin"] {
  --bg: #120909; --panel: #1c100f; --panel-2: #241513; --line: #3a1f1a; --line-2: #4d2a21;
  --fg: #fff1dc; --muted: #cba58c; --gold: #ff9f1a; --gold-2: #ffb84a; --gold-ink: #241000; --gold-soft: rgba(255,159,26,.16);
  --pumpkin: #ff6a00; --purple: #8a4bff; --focus: #ffc266; --glow: rgba(255,106,0,.35);
}
:root[data-skin="halloween-pumpkin"] .hero { background: radial-gradient(ellipse at 20% 0%, #4a1a05 0%, #1c100f 55%, #120909 100%); }
:root[data-skin="halloween-pumpkin"] header.site { background: #140a0a; border-bottom-color: #4d2a21; }
:root[data-skin="halloween-pumpkin"] .legal-strip { background: #160b0b; }

/* ---------- 2. Witching Hour: deep purple night, slime-green accents ---------- */
:root[data-skin="halloween-witch"] {
  --bg: #140b24; --panel: #1e1236; --panel-2: #271846; --line: #3a2a5c; --line-2: #4e3a78;
  --fg: #f3ecff; --muted: #b7a8d6; --gold: #9bff3f; --gold-2: #b9ff6e; --gold-ink: #0d1a04; --gold-soft: rgba(155,255,63,.14);
  --pumpkin: #ff8c1a; --purple: #b388ff; --focus: #d4ff9a; --glow: rgba(155,255,63,.3);
}
:root[data-skin="halloween-witch"] .hero { background: radial-gradient(ellipse at 80% 0%, #3a1a66 0%, #1e1236 50%, #140b24 100%); }
:root[data-skin="halloween-witch"] .hero .moon { background: radial-gradient(circle at 35% 35%, #e8d8ff, #b388ff 60%, #6b3fc2); opacity: .35; }
:root[data-skin="halloween-witch"] header.site { background: #120a20; border-bottom-color: #4e3a78; }
:root[data-skin="halloween-witch"] .legal-strip { background: #120a20; }
:root[data-skin="halloween-witch"] .tag.gold { background: rgba(155,255,63,.16); color: #c9ff8a; }

/* ---------- 3. Haunted Gold: the brand colors with candlelight and cobwebs ---------- */
:root[data-skin="halloween-gold"] {
  --bg: #0d0b09; --panel: #17120e; --panel-2: #1f1912; --line: #332a1e; --line-2: #4a3c2a;
  --fg: #f6eedd; --muted: #b3a48c; --gold: #ffb612; --gold-2: #ffd04a; --gold-ink: #1a1400; --gold-soft: rgba(255,182,18,.16);
  --pumpkin: #ff7a1a; --purple: #7b4bd6; --focus: #ffd56a; --glow: rgba(255,182,18,.28);
}
:root[data-skin="halloween-gold"] .hero { background: radial-gradient(circle at 15% 100%, rgba(255,140,26,.28) 0%, transparent 40%), radial-gradient(circle at 85% 90%, rgba(255,182,18,.18) 0%, transparent 35%), linear-gradient(180deg, #1f1912, #0d0b09); }
:root[data-skin="halloween-gold"] .hero::before {
  content: ""; position: absolute; left: 0; top: 0; width: 140px; height: 140px; pointer-events: none; opacity: .35;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%23d9c9a3' stroke-width='1'><path d='M0 0L140 140M0 0L0 140M0 0L140 0M0 0L60 140M0 0L140 60M0 0L25 140M0 0L140 25'/><path d='M0 30Q22 26 30 0M0 60Q44 52 60 0M0 90Q66 78 90 0M0 120Q88 104 120 0'/></svg>") no-repeat left top / contain;
}
:root[data-skin="halloween-gold"] header.site { background: #0f0c09; }

/* ---------- 4. Graveyard Fog: mossy charcoal, pale fog, bone-white type ---------- */
:root[data-skin="halloween-fog"] {
  --bg: #0e1512; --panel: #16201b; --panel-2: #1d2a23; --line: #2a3a32; --line-2: #3a4f44;
  --fg: #eaf2ea; --muted: #9fb3a4; --gold: #b6f26a; --gold-2: #cdfa8e; --gold-ink: #0e1a08; --gold-soft: rgba(182,242,106,.14);
  --pumpkin: #ff8a3d; --purple: #8f7bd6; --focus: #dcffb0; --glow: rgba(182,242,106,.28);
}
:root[data-skin="halloween-fog"] .hero { background: linear-gradient(180deg, #1d2a23 0%, #16201b 55%, #0e1512 100%); }
:root[data-skin="halloween-fog"] .hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(220,235,225,.10) 60%, rgba(220,235,225,.16)); filter: blur(6px); }
:root[data-skin="halloween-fog"] .hero .moon { background: radial-gradient(circle at 35% 35%, #ffffff, #dfe9df 60%, #9fb3a4); opacity: .28; }
:root[data-skin="halloween-fog"] header.site { background: #0c1310; border-bottom-color: #3a4f44; }
:root[data-skin="halloween-fog"] .legal-strip { background: #0c1310; }

/* ---------- picker ---------- */
.skin-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.skin-pick select { font: inherit; font-size: 13px; background: var(--panel); color: var(--fg); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; }

/* ---------- install steps sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; background: rgba(5,4,3,.78); display: flex; align-items: flex-end; justify-content: center; padding: 0; overflow-y: auto; }
.sheet-card { background: var(--panel); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 560px; display: grid; gap: 12px; }
.sheet-card h2 { font-size: 22px; }
.sheet-card ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.45; }
.sheet-card .tabs { display: flex; gap: 8px; }
.sheet-card .tabs button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.sheet-card .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (min-width: 721px) { .sheet { align-items: center; padding: 20px; } .sheet-card { border-radius: 18px; border-bottom: 1px solid var(--line-2); } }