/* ==========================================================================
   Святкове оформлення.

   Тему ставить сервер атрибутом <html data-theme="…"> (див. SiteThemeService), тож
   сторінка в святкових кольорах із першого кадру. Тут — палітра кожної теми (ті самі
   змінні, що в :root у app.css) і статичний декор; анімацію й гілки по кутах малює
   theme.js на <canvas>.

   Палітри задані на [data-theme], а не лише на html: так плитка-прев'ю в адмінці
   (<div data-theme="autumn">) показує кольори теми, не перемикаючи весь сайт.
   Декор — лише на html[data-theme], щоб плитки не обростали гірляндами.

   data-theme-fx на <html> — вибір самої людини (кнопка з емодзі в шапці):
     calm — кольори й декор без анімації; off — без оформлення (data-theme знімається).
   ========================================================================== */

/* ---------------------------------------------------------------- палітри */

[data-theme="autumn"] {
  --bg:#15100c; --card:#211913; --line:#3d2d20; --txt:#f3e9df; --muted:#b19d8a;
  --acc:#f0923a; --acc-txt:#2b1200; --field:#100b08; --warn:#e6b34d;
  --t1:#f0923a; --t2:#d9482b; --t3:#f2c14e;
  --bg-art:
    radial-gradient(900px 520px at 8% -6%, rgba(217,72,43,.20), transparent 70%),
    radial-gradient(800px 600px at 105% 20%, rgba(240,146,58,.16), transparent 70%),
    radial-gradient(900px 700px at 50% 120%, rgba(242,193,78,.10), transparent 70%);
}
[data-theme="halloween"] {
  --bg:#110b17; --card:#1c1326; --line:#3a2650; --txt:#efe6f7; --muted:#a895bb;
  --acc:#ff7b1c; --acc-txt:#2a0e00; --field:#0c0712; --warn:#ffb020;
  --t1:#ff7b1c; --t2:#9b5de5; --t3:#7ae582;
  --bg-art:
    radial-gradient(circle at 88% 14%, #fff6d6 0 42px, rgba(255,240,190,.55) 46px, rgba(255,214,120,.12) 120px, transparent 260px),
    radial-gradient(1000px 600px at 0% 100%, rgba(155,93,229,.22), transparent 70%),
    radial-gradient(900px 500px at 100% 100%, rgba(255,123,28,.12), transparent 70%),
    radial-gradient(700px 400px at 30% -10%, rgba(122,229,130,.06), transparent 70%);
}
[data-theme="christmas"] {
  --bg:#08131f; --card:#102033; --line:#22405e; --txt:#eef5fb; --muted:#9db3c8;
  --acc:#e5383b; --acc-txt:#ffffff; --field:#06101a; --warn:#f6c445;
  --t1:#e5383b; --t2:#2fbf71; --t3:#f6c445;
  --bg-art:
    radial-gradient(1000px 600px at 50% -20%, rgba(80,140,220,.22), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, rgba(47,191,113,.13), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(229,56,59,.13), transparent 70%);
}
[data-theme="winter"] {
  --bg:#0a1420; --card:#13212f; --line:#28415a; --txt:#eef6fd; --muted:#9fb6cb;
  --acc:#6cc6ff; --acc-txt:#032033; --field:#07101a; --warn:#ffd36b;
  --t1:#6cc6ff; --t2:#b9e6ff; --t3:#ffffff;
  --bg-art:
    radial-gradient(1100px 600px at 50% -15%, rgba(108,198,255,.20), transparent 70%),
    radial-gradient(800px 500px at 0% 110%, rgba(185,230,255,.08), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(185,230,255,.05));
}
[data-theme="valentine"] {
  --bg:#160a12; --card:#24121e; --line:#4a2440; --txt:#fbe9f2; --muted:#c39ab0;
  --acc:#ff4f8b; --acc-txt:#2e0013; --field:#10070d; --warn:#ffb86b;
  --t1:#ff4f8b; --t2:#ff99c2; --t3:#ffd1e3;
  --bg-art:
    radial-gradient(900px 600px at 15% 0%, rgba(255,79,139,.20), transparent 70%),
    radial-gradient(900px 600px at 90% 100%, rgba(255,153,194,.14), transparent 70%);
}
[data-theme="spring"] {
  --bg:#10161a; --card:#18232a; --line:#2f4450; --txt:#eff7f4; --muted:#a0b8b0;
  --acc:#f48fbd; --acc-txt:#2d0718; --field:#0b1114; --warn:#f2cf5b;
  --t1:#f48fbd; --t2:#8fdc97; --t3:#ffe28a;
  --bg-art:
    radial-gradient(900px 600px at 100% -10%, rgba(244,143,189,.20), transparent 70%),
    radial-gradient(900px 600px at 0% 110%, rgba(143,220,151,.15), transparent 70%),
    radial-gradient(600px 400px at 40% 40%, rgba(255,226,138,.05), transparent 70%);
}
[data-theme="easter"] {
  --bg:#13121b; --card:#1e1c2a; --line:#3b3654; --txt:#f6f2ea; --muted:#b3abc2;
  --acc:#f4c84a; --acc-txt:#2a1e00; --field:#0e0d14; --warn:#f49a4a;
  --t1:#d7263d; --t2:#f4c84a; --t3:#7bc96f;
  --bg-art:
    radial-gradient(1000px 600px at 50% -20%, rgba(244,200,74,.18), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, rgba(123,201,111,.12), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(215,38,61,.12), transparent 70%);
}
[data-theme="trinity"] {
  --bg:#0c150f; --card:#142218; --line:#29432f; --txt:#eef7ee; --muted:#9fbaa2;
  --acc:#9bdc5a; --acc-txt:#132400; --field:#08100a; --warn:#f2d45c;
  --t1:#9bdc5a; --t2:#4fb36c; --t3:#f2d45c;
  --bg-art:
    radial-gradient(1000px 650px at 0% -10%, rgba(155,220,90,.18), transparent 70%),
    radial-gradient(900px 600px at 100% 110%, rgba(79,179,108,.16), transparent 70%),
    radial-gradient(600px 400px at 70% 30%, rgba(242,212,92,.05), transparent 70%);
}
[data-theme="independence"] {
  --bg:#0a1324; --card:#111f3a; --line:#25406c; --txt:#f2f6ff; --muted:#a3b4d3;
  --acc:#ffd43b; --acc-txt:#1d1600; --field:#071020; --warn:#ffb13b;
  --t1:#2f7bf5; --t2:#ffd43b; --t3:#ffffff;
  --bg-art:
    radial-gradient(1100px 600px at 50% -20%, rgba(47,123,245,.26), transparent 70%),
    radial-gradient(900px 600px at 50% 120%, rgba(255,212,59,.14), transparent 70%);
}

[data-theme="women"] {
  --bg:#150f1a; --card:#211728; --line:#43304f; --txt:#f8eefb; --muted:#bba5c6;
  --acc:#c995ff; --acc-txt:#1e0835; --field:#0f0a13; --warn:#ffd84d;
  --t1:#c995ff; --t2:#ffd84d; --t3:#ff7eb6;
  --bg-art:
    radial-gradient(900px 600px at 0% -10%, rgba(201,149,255,.20), transparent 70%),
    radial-gradient(800px 600px at 100% 110%, rgba(255,216,77,.13), transparent 70%),
    radial-gradient(700px 500px at 100% 0%, rgba(255,126,182,.10), transparent 70%);
}
[data-theme="constitution"] {
  --bg:#0b1628; --card:#12233e; --line:#27436f; --txt:#f2f6ff; --muted:#a6b8d6;
  --acc:#5aa2ff; --acc-txt:#02152e; --field:#081122; --warn:#ffd43b;
  --t1:#2f7bf5; --t2:#ffd43b; --t3:#ffffff;
  --bg-art:
    radial-gradient(1000px 600px at 0% -15%, rgba(47,123,245,.24), transparent 70%),
    radial-gradient(900px 600px at 100% 115%, rgba(255,212,59,.14), transparent 70%);
}
[data-theme="defenders"] {
  --bg:#0f130c; --card:#1a2015; --line:#36412b; --txt:#f1f2e8; --muted:#adb39a;
  --acc:#dcb94a; --acc-txt:#231b00; --field:#0b0e08; --warn:#f0a845;
  --t1:#2f7bf5; --t2:#dcb94a; --t3:#7d9a4a;
  --bg-art:
    radial-gradient(1000px 600px at 50% -20%, rgba(220,185,74,.18), transparent 70%),
    radial-gradient(800px 600px at 0% 110%, rgba(125,154,74,.16), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(47,123,245,.12), transparent 70%);
}
/* Реліз GTA VI: неоновий захід сонця над Вайс-Сіті — рожевий, помаранчевий і бірюзовий. */
[data-theme="gtavi"] {
  --bg:#120a1f; --card:#1d1230; --line:#3d2560; --txt:#fbeefc; --muted:#c2a5cf;
  --acc:#ff4fa3; --acc-txt:#2b0016; --field:#0c0616; --warn:#ffb347;
  --t1:#ff4fa3; --t2:#ffb347; --t3:#2de2e6;
  --bg-art:
    linear-gradient(0deg, rgba(255,79,163,.22), rgba(255,140,90,.08) 22%, transparent 45%),
    radial-gradient(900px 500px at 100% -10%, rgba(45,226,230,.16), transparent 70%),
    radial-gradient(900px 600px at 0% 0%, rgba(124,58,237,.22), transparent 70%);
}

/* ---------------------------------------------------------------- спільне для будь-якої теми */

html[data-theme] body { background:var(--bg); }
/* Сяйво теми — окремий фіксований шар під усім вмістом (background-attachment:fixed iOS
   ігнорує, а з окремим шаром фон не «їде» разом зі сторінкою на жодному пристрої). */
html[data-theme] body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--bg-art); }
/* Напівпрозора шапка з розмиттям: під нею видно сяйво, сніг і листя. */
html[data-theme] header { background:color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(10px); backdrop-filter:saturate(1.3) blur(10px); }
/* Кольорова лінія під шапкою — у фірмових кольорах теми, повільно «тече». */
html[data-theme] header { border-bottom-color:transparent; }
html[data-theme] header::before { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--t1), var(--t2), var(--t3), var(--t2), var(--t1));
  background-size:200% 100%; animation:th-flow 12s linear infinite; pointer-events:none; }
body.as-admin header::before { background:var(--warn); animation:none; }
@keyframes th-flow { to { background-position:-200% 0; } }

/* Картки: ледь помітний теплий відблиск теми по верхньому краю. */
html[data-theme] .card { box-shadow:0 1px 0 0 color-mix(in srgb, var(--t1) 18%, transparent) inset,
  0 10px 30px -18px color-mix(in srgb, var(--t1) 45%, transparent); }
html[data-theme] button:not(.ghost):not(:disabled):hover { filter:brightness(1.08);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
html[data-theme] ::selection { background:color-mix(in srgb, var(--acc) 45%, transparent); }
html[data-theme] footer { border-top-color:var(--line) !important; }
/* Святковий рядок у підвалі: емодзі теми, кожне легенько гойдається у своєму ритмі. */
.season-foot { display:flex; justify-content:center; gap:14px; font-size:20px; margin-bottom:10px;
  user-select:none; }
.season-foot span { display:inline-block; animation:th-bob 3.2s ease-in-out infinite; cursor:default; }
.season-foot span:nth-child(2n) { animation-delay:-1.1s; }
.season-foot span:nth-child(3n) { animation-delay:-2.1s; animation-duration:3.8s; }
.season-foot span:hover { animation:th-jump .6s ease-out; }
@keyframes th-bob { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-4px) rotate(4deg); } }
@keyframes th-jump { 0% { transform:scale(1); } 40% { transform:translateY(-10px) scale(1.35) rotate(12deg); } 100% { transform:scale(1); } }

/* ---------------------------------------------------------------- кнопка теми в шапці */

.season-box[hidden] { display:none; }
.season-box { display:inline-flex; position:relative; }
.season-btn { all:unset; cursor:pointer; font-size:20px; line-height:1; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:color-mix(in srgb, var(--acc) 14%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent);
  transition:transform .2s, box-shadow .2s; animation:th-wiggle 6s ease-in-out infinite; }
.season-btn:hover { transform:scale(1.12) rotate(-8deg);
  box-shadow:0 0 0 1px var(--acc), 0 0 18px color-mix(in srgb, var(--acc) 55%, transparent); }
.season-btn:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
html[data-theme-fx="off"] .season-btn { filter:grayscale(1); opacity:.55; animation:none;
  background:transparent; box-shadow:0 0 0 1px var(--line); }
@keyframes th-wiggle { 0%,88%,100% { transform:rotate(0); } 91% { transform:rotate(-14deg) scale(1.08); }
  94% { transform:rotate(12deg) scale(1.08); } 97% { transform:rotate(-6deg); } }

.season-pop { position:fixed; z-index:40; width:min(330px, calc(100vw - 24px)); background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:0 18px 50px rgba(0,0,0,.55);
  animation:th-pop .18s ease-out; }
@keyframes th-pop { from { opacity:0; transform:translateY(-6px) scale(.97); } }
.season-pop h3 { margin:0 0 4px; font-size:17px; display:flex; align-items:center; gap:8px; }
.season-pop h3 .sp-ico { font-size:26px; }
.season-pop .sp-greet { color:var(--muted); font-size:13px; line-height:1.45; margin:0 0 12px; }
.season-pop .sp-opts { display:flex; flex-direction:column; gap:6px; }
.season-pop .sp-opt { all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:10px; align-items:flex-start;
  padding:9px 11px; border-radius:10px; border:1px solid var(--line); font-size:14px; }
.season-pop .sp-opt:hover { border-color:var(--acc); }
.season-pop .sp-opt.on { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 12%, transparent); }
.season-pop .sp-opt small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.season-pop .sp-opt .sp-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--muted); flex:none; margin-top:2px; }
.season-pop .sp-opt.on .sp-dot { border-color:var(--acc); background:radial-gradient(circle, var(--acc) 0 3px, transparent 4px); }
.season-pop .sp-foot .sp-more { white-space:nowrap; }
/* Вибір стилю, коли сьогодні діє кілька тем: кожна плитка — у кольорах своєї теми. */
.season-pop .sp-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin:2px 0 6px; }
.season-pop .sp-label small { text-transform:none; letter-spacing:0; font-weight:400; }
.season-pop .sp-styles { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px; margin-bottom:12px; }
.season-pop .sp-style { all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:10px; font-size:13px; line-height:1.25; color:var(--txt);
  background:var(--bg-art), var(--card); border:1px solid var(--line);
  box-shadow:inset 0 -3px 0 -1px var(--t1); transition:transform .15s, border-color .15s; }
.season-pop .sp-style:hover { transform:translateY(-1px); border-color:var(--acc); }
.season-pop .sp-style.on { border-color:var(--acc); box-shadow:inset 0 -3px 0 -1px var(--t1), 0 0 0 2px color-mix(in srgb, var(--acc) 40%, transparent); }
.season-pop .sp-style .sp-st-ico { font-size:22px; flex:none; }
.season-pop .sp-style small { display:block; color:var(--muted); font-size:11px; }
.season-pop .sp-foot { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:8px; }

/* Привітання, коли людина вперше бачить нову тему. */
.season-toast { position:fixed; left:50%; top:calc(var(--hdr-h, 58px) + 12px); z-index:30;
  transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:calc(100vw - 24px);
  padding:10px 14px 10px 12px; border-radius:18px; background:var(--card); width:max-content;
  border:1px solid color-mix(in srgb, var(--acc) 55%, var(--line)); font-size:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--acc) 25%, transparent);
  animation:th-toast-in .5s cubic-bezier(.2,1.4,.4,1); cursor:pointer; }
.season-toast .st-ico { font-size:24px; animation:th-wiggle 2.2s ease-in-out infinite; }
.season-toast.bye { animation:th-toast-out .35s ease-in forwards; }
@keyframes th-toast-in { from { opacity:0; transform:translate(-50%, -18px) scale(.9); } }
@keyframes th-toast-out { to { opacity:0; transform:translate(-50%, -12px) scale(.95); } }

/* Шари анімації й декору: поверх вмісту, але під шапкою (z 5) і вікнами (z 50); кліки — крізь них. */
#seasonFx { position:fixed; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
#seasonDeco { position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
#seasonDeco .sd-corner { position:absolute; opacity:.9; transform-origin:top left; }
#seasonDeco .sd-tl { left:0; top:var(--hdr-h, 58px); }
#seasonDeco .sd-br { right:6px; bottom:10px; transform-origin:bottom right; }
#seasonDeco .sd-sway { animation:th-sway 7s ease-in-out infinite; }
#seasonDeco .sd-br.sd-sway { animation-duration:8.5s; animation-delay:-3s; }
@keyframes th-sway { 0%,100% { rotate:0deg; } 50% { rotate:1.6deg; } }
/* Гілки по кутах — лише там, де по боках від вмісту є вільне місце. */
@media (max-width:1100px) { #seasonDeco .sd-corner { display:none; } }

/* ---------------------------------------------------------------- Різдво: гірлянда */
.season-garland { position:absolute; left:0; right:0; bottom:-12px; height:22px; pointer-events:none; overflow:hidden; }
.season-garland::before, .season-garland::after { content:''; position:absolute; inset:0; }
/* дріт */
.season-garland { background:
  radial-gradient(60px 16px at 30px -4px, transparent 13px, rgba(30,60,40,.9) 14px, rgba(30,60,40,.9) 15px, transparent 16px) 0 0 / 60px 22px repeat-x; }
/* дві групи лампочок блимають по черзі */
.season-garland::before { background:
  radial-gradient(circle at 10px 12px, #ff4d4f 0 3.5px, rgba(255,77,79,.45) 5px, transparent 9px) 0 0 / 120px 22px repeat-x,
  radial-gradient(circle at 70px 12px, #ffd43b 0 3.5px, rgba(255,212,59,.45) 5px, transparent 9px) 0 0 / 120px 22px repeat-x;
  animation:th-blink 1.6s steps(1) infinite; }
.season-garland::after { background:
  radial-gradient(circle at 40px 14px, #4dabf7 0 3.5px, rgba(77,171,247,.45) 5px, transparent 9px) 0 0 / 120px 22px repeat-x,
  radial-gradient(circle at 100px 14px, #51cf66 0 3.5px, rgba(81,207,102,.45) 5px, transparent 9px) 0 0 / 120px 22px repeat-x;
  animation:th-blink 1.6s steps(1) infinite; animation-delay:-.8s; }
@keyframes th-blink { 0% { opacity:1; } 50% { opacity:.25; } }

/* ---------------------------------------------------------------- Зима: бурульки */
.season-icicles { position:absolute; left:0; right:0; bottom:-14px; height:14px; pointer-events:none;
  background:
    linear-gradient(170deg, rgba(220,240,255,.85) 0 40%, transparent 41%) 0 0 / 23px 14px repeat-x,
    linear-gradient(190deg, rgba(220,240,255,.7) 0 30%, transparent 31%) 11px 0 / 37px 10px repeat-x;
  -webkit-mask:linear-gradient(#000, rgba(0,0,0,.5)); mask:linear-gradient(#000, rgba(0,0,0,.5)); }

/* ---------------------------------------------------------------- Великдень і День Незалежності: орнамент */
/* Вишиванковий ромбовий орнамент під шапкою — червоне з чорним (Великдень) або синьо-жовте. */
.season-ornament { position:absolute; left:0; right:0; bottom:-9px; height:9px; pointer-events:none;
  --o1:var(--t1); --o2:#1a1a1a;
  background:
    linear-gradient(45deg, transparent 33%, var(--o1) 34% 66%, transparent 67%) 0 0 / 9px 9px repeat-x,
    linear-gradient(-45deg, transparent 33%, var(--o2) 34% 66%, transparent 67%) 4.5px 0 / 9px 9px repeat-x;
  opacity:.9; }
html[data-theme="independence"] .season-ornament,
html[data-theme="constitution"] .season-ornament,
html[data-theme="defenders"] .season-ornament { --o1:#2f7bf5; --o2:#ffd43b; }

/* ---------------------------------------------------------------- Хелловін: павук */
.season-spider { position:absolute; right:24%; top:100%; width:2px; pointer-events:none;
  background:linear-gradient(rgba(220,220,230,.55), rgba(220,220,230,.25));
  animation:th-spider 9s ease-in-out infinite; transform-origin:top; }
.season-spider::after { content:'🕷️'; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  font-size:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
@keyframes th-spider { 0%,100% { height:24px; } 40% { height:150px; } 55% { height:138px; } 70% { height:150px; } }
@media (max-width:600px) { .season-spider { right:30%; } }

/* ---------------------------------------------------------------- GTA VI: сонце й неон */
/* Смугасте ретро-сонце, що сідає за нижній край екрана (окремий фіксований шар під вмістом). */
html[data-theme="gtavi"] body::after { content:''; position:fixed; z-index:-1; pointer-events:none;
  --sun:min(70vw, 560px); width:var(--sun); height:var(--sun); left:50%; bottom:calc(var(--sun) * -.6);
  transform:translateX(-50%); border-radius:50%; opacity:.2;
  background:linear-gradient(180deg, #ffe27a 0%, #ffb347 30%, #ff6f7d 55%, #ff4fa3 75%, #b93cf6 100%);
  box-shadow:0 0 120px 30px rgba(255,79,163,.35);
  -webkit-mask:linear-gradient(#000 0 40%, transparent 40% 43%, #000 43% 49%, transparent 49% 53%, #000 53% 58%, transparent 58% 63%, #000 63% 67%, transparent 67% 73%, #000 73%);
          mask:linear-gradient(#000 0 40%, transparent 40% 43%, #000 43% 49%, transparent 49% 53%, #000 53% 58%, transparent 58% 63%, #000 63% 67%, transparent 67% 73%, #000 73%); }
/* Неонова трубка під шапкою: рожево-бірюзова, світиться й зрідка «мерехтить», як вивіска. */
.season-neon { position:absolute; left:0; right:0; bottom:-3px; height:3px; pointer-events:none;
  background:linear-gradient(90deg, #ff4fa3, #ffb347 35%, #2de2e6 65%, #ff4fa3);
  box-shadow:0 0 8px #ff4fa3, 0 0 18px rgba(45,226,230,.6), 0 4px 30px rgba(255,79,163,.45);
  animation:th-neon 7s linear infinite; }
@keyframes th-neon { 0%,91%,95%,100% { opacity:1; } 92% { opacity:.35; } 93% { opacity:.9; } 94% { opacity:.25; } }
/* Заголовки карток — з легким неоновим світінням. */
html[data-theme="gtavi"] h1, html[data-theme="gtavi"] .card > b:first-child {
  text-shadow:0 0 10px rgba(255,79,163,.55), 0 0 22px rgba(45,226,230,.25); }

/* ---------------------------------------------------------------- без анімації */
html[data-theme-fx="calm"] header::before,
html[data-theme-fx="calm"] .season-foot span,
html[data-theme-fx="calm"] .season-btn,
html[data-theme-fx="calm"] .season-garland::before,
html[data-theme-fx="calm"] .season-garland::after,
html[data-theme-fx="calm"] .season-spider,
html[data-theme-fx="calm"] .season-neon,
html[data-theme-fx="calm"] #seasonDeco .sd-sway { animation:none !important; }
html[data-theme-fx="calm"] .season-spider { height:60px; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] header::before, .season-foot span, .season-btn, .season-garland::before,
  .season-garland::after, .season-spider, .season-neon, #seasonDeco .sd-sway, .season-toast .st-ico { animation:none !important; }
  .season-spider { height:60px; }
}

/* ---------------------------------------------------------------- шапка на телефоні */
@media (max-width:600px) {
  header .season-box { order:0; }
  header:has(.season-box:not([hidden])) h1 { margin-right:0; }
  header .season-box { margin-right:auto; }
  .season-btn { width:30px; height:30px; font-size:17px; }
}

/* ---------------------------------------------------------------- адмінка: плитки тем */
.th-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:10px; }
.th-tile { position:relative; border-radius:12px; overflow:hidden; border:2px solid var(--line);
  background:var(--bg); color:var(--txt); cursor:pointer; text-align:left; padding:0; font-weight:400; }
.th-tile:hover { border-color:var(--acc); }
.th-tile.sel { border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent); }
.th-tile .tt-art { height:64px; background:var(--bg-art), var(--bg); display:flex; align-items:center;
  justify-content:center; font-size:30px; position:relative; }
.th-tile .tt-art::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--t1), var(--t2), var(--t3)); }
.th-tile .tt-body { padding:8px 10px 10px; background:var(--card); }
.th-tile .tt-name { font-weight:700; font-size:13px; }
.th-tile .tt-rule { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.35; min-height:30px; }
.th-tile .tt-row { display:flex; align-items:center; gap:6px; margin-top:8px; }
.th-tile .tt-chip { font-size:11px; padding:2px 8px; border-radius:999px; background:var(--acc); color:var(--acc-txt); font-weight:700; }
.th-tile .tt-sw { width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,.15); }
.th-tile.off { opacity:.5; }
.th-tile .tt-now { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; padding:2px 7px;
  border-radius:999px; background:rgba(0,0,0,.55); color:#fff; letter-spacing:.03em; }
.th-sched { display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size:13px; }
.th-sched .ts-row { display:flex; gap:10px; align-items:center; padding:6px 10px; border-radius:8px; background:var(--field); }
.th-sched .ts-row.now { outline:1px solid var(--acc); }
.th-sched .ts-dates { color:var(--muted); min-width:150px; font-variant-numeric:tabular-nums; }
.th-modes { display:flex; gap:6px; flex-wrap:wrap; }
.th-tile .tt-custom { color:var(--acc); font-weight:700; }
.th-edit { margin-top:12px; padding:14px; border-radius:12px; background:var(--card); color:var(--txt);
  border:1px solid var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.th-edit .the-head { display:flex; align-items:center; gap:8px; }
.th-edit label { display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.th-edit input { width:auto; }