/* Day skins (days.py) and Isten mód: the palette comes from <style id="theme-css">; this file adds
   the rest of the look – page background, header, cards, heading font, the dot's emoji. Every
   html[data-skin] sets a few --skin-* variables, the shared rules below use them. */

html[data-skin]:not(.retro) body { background: var(--skin-bg, none), var(--bg); background-attachment: fixed; }
html[data-skin]:not(.retro) .top { background: var(--skin-header, var(--accent)); }
html[data-skin]:not(.retro) .top .brand { color: var(--skin-header-fg, var(--accent-fg)); text-shadow: var(--skin-brand-shadow, none); }
html[data-skin]:not(.retro) h1, html[data-skin]:not(.retro) .card > h2, html[data-skin]:not(.retro) .top .brand,
html[data-skin]:not(.retro) .banner.season { font-family: var(--skin-font, inherit); letter-spacing: var(--skin-font-spacing, normal); }
html[data-skin]:not(.retro) .card { border: var(--skin-card-border, 1px solid var(--line)); border-radius: var(--skin-radius, 12px);
  box-shadow: var(--skin-card-shadow, none); background: var(--skin-card-bg, none), var(--card); }
html[data-skin]:not(.retro) :is(.event, .issues li, .nav-list li) { border-radius: var(--skin-radius, 10px); box-shadow: var(--skin-item-shadow, none);
  border-top-style: var(--skin-border-style, solid); border-right-style: var(--skin-border-style, solid); border-bottom-style: var(--skin-border-style, solid); }
html[data-skin]:not(.retro) nav.bottom { background: var(--skin-nav-bg, var(--card)); border-top: var(--skin-nav-border, 1px solid var(--line)); }
html[data-skin]:not(.retro) .banner.season { background: var(--skin-banner, var(--info-bg)); color: var(--skin-banner-fg, var(--info-fg));
  font-size: 1.05rem; }
/* the status dot shows the day's emoji while HDF is fine (a problem shows the colour as usual) */
html:not(.retro) .health.ok[data-dot]::after { content: attr(data-dot); background: none; box-shadow: none; width: auto; height: auto;
  font-size: 19px; line-height: 1; filter: drop-shadow(0 0 2px rgba(0,0,0,.35)); }

/* ── 😇 Isten mód (IDDQD): gold and marble ── */
html[data-skin="god"] {
  --skin-font: "Cinzel", Georgia, serif; --skin-font-spacing: .5px;
  --skin-header: linear-gradient(135deg, #8a6d1a, #c9a227 25%, #ffe28a 50%, #c9a227 75%, #8a6d1a);
  --skin-header-fg: #2b1d00; --skin-brand-shadow: 0 1px 0 rgba(255,255,255,.6);
  --skin-bg: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.9), transparent 60%),
             repeating-linear-gradient(115deg, rgba(160,130,60,.05) 0 2px, transparent 2px 18px);
  --skin-card-border: 2px solid #d9b65a; --skin-card-shadow: 0 0 0 3px #fff8e1, 0 0 0 4px #e8cf86, 0 6px 18px rgba(140,105,20,.18);
  --skin-nav-border: 2px solid #d9b65a; --skin-item-shadow: 0 0 0 1px #e8cf86, 0 4px 12px rgba(140,105,20,.15);
}
html[data-skin="god"] .health.ok::after { background: #ffd700; box-shadow: 0 0 10px 3px #ffd700; }

/* ── 🧸💙 09.02. Évforduló: sky, clouds, plush cards ── */
html[data-skin="evfordulo"] {
  --skin-font: "Gochi Hand", "Comic Sans MS", cursive; --skin-font-spacing: .3px;
  --skin-header: linear-gradient(120deg, #7fb5ff, #a9c8ff 45%, #b9b2ff 100%);
  --skin-header-fg: #13306b; --skin-brand-shadow: 0 1px 0 rgba(255,255,255,.7);
  --skin-bg: radial-gradient(ellipse 60% 18% at 15% 12%, rgba(255,255,255,.95), transparent 70%),
             radial-gradient(ellipse 50% 15% at 85% 30%, rgba(255,255,255,.9), transparent 70%),
             radial-gradient(ellipse 70% 20% at 40% 70%, rgba(255,255,255,.85), transparent 70%),
             linear-gradient(180deg, #cfe5ff, #eaf3ff 40%, #f4f0ff);
  --skin-radius: 20px; --skin-card-border: 2px dashed #9cc2f5;
  --skin-card-shadow: 0 0 0 4px #fff, 0 8px 22px rgba(70,120,210,.18);
  --skin-banner: linear-gradient(90deg, #dbeaff, #e9e3ff); --skin-banner-fg: #183a72;
  --skin-nav-bg: rgba(255,255,255,.92); --skin-border-style: dashed; --skin-item-shadow: 0 4px 14px rgba(70,120,210,.14);
}
html[data-skin="evfordulo"] .top .brand::after { content: " 💙"; }
html[data-skin="evfordulo"] .top { animation: skyshimmer 8s ease-in-out infinite alternate; background-size: 200% 100%; }
@keyframes skyshimmer { to { background-position: 100% 0; } }
html[data-skin="evfordulo"] nav.bottom a.on { color: #2f6fd6; }

/* ── 🎄 Karácsony: night, faint stars, garland ── */
html[data-skin="karacsony"] {
  --skin-font: "Playfair Display", Georgia, serif;
  --skin-header: linear-gradient(180deg, #0b1726, #12324e); --skin-header-fg: #ffe9a8;
  --skin-bg: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 60%, #fff, transparent),
             radial-gradient(1.5px 1.5px at 70% 30%, #ffe9a8, transparent), radial-gradient(1px 1px at 85% 75%, #fff, transparent),
             radial-gradient(1px 1px at 55% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 85%, #fff, transparent);
  --skin-card-border: 1px solid #2c5278; --skin-card-shadow: inset 0 3px 0 #c0392b, 0 6px 18px rgba(0,0,0,.35);
  --skin-banner: linear-gradient(90deg, #7a1f2b, #1f5130); --skin-banner-fg: #fff6dc; --skin-item-shadow: 0 4px 14px rgba(0,0,0,.35);
}
html[data-skin="karacsony"] .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none;
  background: radial-gradient(circle, #ff5252 2px, transparent 3px) 0 0 / 24px 6px, radial-gradient(circle, #ffd54f 2px, transparent 3px) 8px 0 / 24px 6px,
              radial-gradient(circle, #69f0ae 2px, transparent 3px) 16px 0 / 24px 6px; animation: twinkle 1.2s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .45; } }
html[data-skin] .top { position: sticky; }

/* ── 🕯 Advent ── */
html[data-skin="advent"] {
  --skin-font: "Playfair Display", Georgia, serif;
  --skin-header: linear-gradient(180deg, #5c1a24, #7a1f2b); --skin-header-fg: #fff3d6;
  --skin-bg: linear-gradient(180deg, #f6f1e8, #efe6d6);
  --skin-card-shadow: inset 0 3px 0 #2f5d3a, 0 4px 14px rgba(90,60,20,.12);
}

/* ── ❄ December ── */
html[data-skin="snow"] {
  --skin-header: linear-gradient(180deg, #2b6a9e, #3d82b8); --skin-header-fg: #fff;
  --skin-bg: linear-gradient(180deg, #e9f2fb, #f6f9fc);
  --skin-card-shadow: 0 4px 14px rgba(43,106,158,.10); --skin-radius: 14px;
}

/* ── 🥂 Szilveszter / 🎆 Újév ── */
html[data-skin="szilveszter"] {
  --skin-font: "Playfair Display", Georgia, serif;
  --skin-header: linear-gradient(135deg, #0e0b1f, #2a1f55 60%, #0e0b1f); --skin-header-fg: #ffd166;
  --skin-bg: radial-gradient(1.5px 1.5px at 15% 25%, #ffd166, transparent), radial-gradient(1px 1px at 45% 65%, #fff, transparent),
             radial-gradient(1.5px 1.5px at 75% 35%, #ff7eb6, transparent), radial-gradient(1px 1px at 88% 80%, #fff, transparent);
  --skin-card-border: 1px solid #4b3f86; --skin-card-shadow: 0 0 0 1px rgba(255,209,102,.25), 0 8px 22px rgba(0,0,0,.45);
  --skin-banner: linear-gradient(90deg, #3a2f6e, #6b2f5f); --skin-banner-fg: #ffeec2;
}
html[data-skin="ujev"] {
  --skin-font: "Playfair Display", Georgia, serif;
  --skin-header: linear-gradient(135deg, #b8860b, #d4a017 40%, #f3d27a 60%, #b8860b); --skin-header-fg: #2a1f00;
  --skin-bg: radial-gradient(circle at 80% 0%, rgba(255,215,120,.35), transparent 45%), linear-gradient(180deg, #fff8e7, #fff);
  --skin-card-border: 1px solid #ecd59a; --skin-card-shadow: 0 6px 18px rgba(180,130,20,.15);
}

/* ── 🇭🇺 national days: paper and the tricolour ── */
html[data-skin="marc15"], html[data-skin="aug20"], html[data-skin="okt23"] {
  --skin-font: "Playfair Display", Georgia, serif;
  --skin-header: linear-gradient(180deg, #ce2939 0 33.3%, #f4f1ea 33.3% 66.6%, #477050 66.6%);
  --skin-header-fg: #1f2a1f; --skin-brand-shadow: 0 0 6px #fff, 0 0 2px #fff;
  --skin-bg: repeating-linear-gradient(0deg, rgba(120,100,60,.035) 0 1px, transparent 1px 4px), linear-gradient(180deg, #f8f6f0, #f2efe6);
  --skin-card-shadow: inset 4px 0 0 #ce2939, inset 8px 0 0 #fff, inset 12px 0 0 #477050, 0 3px 10px rgba(60,50,30,.10);
  --skin-banner: linear-gradient(90deg, #ce2939, #f4f1ea 50%, #477050); --skin-banner-fg: #1f1f1f;
}
html[data-skin="marc15"] .card, html[data-skin="aug20"] .card, html[data-skin="okt23"] .card { padding-left: 22px; }
html[data-skin="marc15"] .top .brand::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -2px;
  border-radius: 50%; background: radial-gradient(circle, #ce2939 0 30%, #fff 30% 55%, #477050 55%); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
/* 1956: the flag with the hole cut out of the middle, calm and grey */
html[data-skin="okt23"] { --skin-header: linear-gradient(180deg, #ce2939 0 33.3%, #f4f1ea 33.3% 66.6%, #477050 66.6%); }
html[data-skin="okt23"] .banner.season::before { content: ""; flex: none; width: 30px; height: 20px; border-radius: 2px;
  background: radial-gradient(circle at 50% 50%, var(--bg) 0 5px, transparent 6px), linear-gradient(180deg, #ce2939 0 33.3%, #fff 33.3% 66.6%, #477050 66.6%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
html[data-skin="okt23"] body { filter: saturate(.8); }

/* ── 🕯 Mindenszentek: calm, dark, a flickering candle ── */
html[data-skin="mindenszentek"] {
  --skin-font: "Playfair Display", Georgia, serif;
  --skin-header: linear-gradient(180deg, #17161c, #24222c); --skin-header-fg: #f0d9a8;
  --skin-bg: radial-gradient(ellipse at 50% 0%, rgba(240,179,91,.10), transparent 55%);
  --skin-card-border: 1px solid #3a3646;
}
html[data-skin="mindenszentek"] .health.ok[data-dot]::after { animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .75; } 55% { opacity: .95; } }

/* ── 🐣 Húsvét / 🕊 Pünkösd / 🌳 Május 1. ── */
html[data-skin="husvet"] {
  --skin-header: linear-gradient(120deg, #9ccc65, #d4e157 50%, #fff176); --skin-header-fg: #2d3319;
  --skin-bg: radial-gradient(circle at 10% 90%, rgba(255,205,210,.5), transparent 30%), radial-gradient(circle at 90% 20%, rgba(179,229,252,.5), transparent 30%),
             linear-gradient(180deg, #fbfbe9, #fff);
  --skin-radius: 18px; --skin-card-shadow: 0 4px 14px rgba(120,140,40,.12);
}
html[data-skin="punkosd"] {
  --skin-header: linear-gradient(120deg, #8c9eff, #b3bcff 50%, #e8eaff); --skin-header-fg: #1a1f4a;
  --skin-bg: radial-gradient(ellipse at 50% -10%, rgba(255,236,179,.7), transparent 50%), linear-gradient(180deg, #f6f7fb, #fff);
}
html[data-skin="majus1"] {
  --skin-header: linear-gradient(120deg, #43a047, #66bb6a 50%, #9ccc65); --skin-header-fg: #fff;
  --skin-bg: radial-gradient(circle at 90% 100%, rgba(165,214,167,.45), transparent 40%), linear-gradient(180deg, #eef8ec, #fff);
  --skin-radius: 16px;
}

/* ── 🎂 / 🌷 / 💘 / 🎅 / 🐸 / π / 🖥 ── */
html[data-skin="birthday"] {
  --skin-font: "Gochi Hand", cursive; --skin-header: linear-gradient(120deg, #ff8fb8, #ffb74d 50%, #81d4fa); --skin-header-fg: #3a1f2d;
  --skin-bg: radial-gradient(circle at 15% 15%, rgba(255,183,77,.25), transparent 25%), radial-gradient(circle at 85% 40%, rgba(129,212,250,.25), transparent 25%),
             linear-gradient(180deg, #fff4f8, #fff);
  --skin-radius: 18px; --skin-card-shadow: 0 6px 18px rgba(194,24,91,.10);
}
html[data-skin="nevnap_krisztian"] {
  --skin-font: "Gochi Hand", cursive; --skin-header: linear-gradient(120deg, #90a8e0, #b9cbf0 60%, #e3ebfa); --skin-header-fg: #16264d;
  --skin-bg: radial-gradient(circle at 100% 100%, rgba(185,203,240,.5), transparent 35%), linear-gradient(180deg, #f2f6fc, #fff);
  --skin-radius: 18px;
}
html[data-skin="nevnap_oliver"], html[data-skin="nonap"] {
  --skin-font: "Gochi Hand", cursive; --skin-header: linear-gradient(120deg, #e891b9, #f8bbd0 60%, #fce4ec); --skin-header-fg: #4a1a33;
  --skin-bg: radial-gradient(circle at 0% 100%, rgba(248,187,208,.5), transparent 35%), linear-gradient(180deg, #fbf3f8, #fff);
  --skin-radius: 18px;
}
html[data-skin="valentin"] {
  --skin-font: "Gochi Hand", cursive; --skin-header: linear-gradient(120deg, #f06292, #ff8a80); --skin-header-fg: #fff;
  --skin-bg: radial-gradient(circle at 50% 120%, rgba(240,98,146,.25), transparent 50%), linear-gradient(180deg, #fff0f4, #fff);
  --skin-radius: 20px; --skin-card-shadow: 0 6px 18px rgba(216,27,96,.12);
}
html[data-skin="mikulas"] {
  --skin-header: linear-gradient(180deg, #c62828, #b71c1c); --skin-header-fg: #fff;
  --skin-bg: linear-gradient(180deg, #fff6f4, #fff);
  --skin-card-shadow: inset 0 4px 0 #fff, inset 0 7px 0 #c62828, 0 4px 14px rgba(198,40,40,.10);
}
html[data-skin="mikulas"] .top { border-bottom: 6px solid #fff; }
html[data-skin="szokonap"] { --skin-header: linear-gradient(120deg, #66bb6a, #a5d6a7); --skin-header-fg: #123512; --skin-radius: 18px;
  --skin-bg: linear-gradient(180deg, #eef8ee, #fff); }
html[data-skin="pi"] { --skin-header: linear-gradient(120deg, #3949ab, #5c6bc0); --skin-header-fg: #fff;
  --skin-bg: linear-gradient(rgba(57,73,171,.06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(57,73,171,.06) 1px, transparent 1px) 0 0 / 22px 22px; }
html[data-skin="sysadmin"] { --skin-header: linear-gradient(120deg, #37474f, #546e7a); --skin-header-fg: #fff; }

/* ── sci-fi and spooky: ✨ 05.04 / ⚡ 10.21 / 💻 / 🐈‍⬛ / 🎃 ── */
html[data-skin="may4"] {
  --skin-font: "Orbitron", sans-serif; --skin-font-spacing: 1px;
  --skin-header: linear-gradient(180deg, #04050b, #0d1020); --skin-header-fg: #ffe81f;
  --skin-bg: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 33% 72%, #fff, transparent),
             radial-gradient(1.5px 1.5px at 58% 28%, #cfe3ff, transparent), radial-gradient(1px 1px at 78% 62%, #fff, transparent),
             radial-gradient(1px 1px at 91% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 92%, #fff, transparent),
             radial-gradient(1px 1px at 66% 88%, #fff, transparent);
  --skin-card-border: 1px solid #2a3060; --skin-card-shadow: 0 0 12px rgba(80,140,255,.15);
  --skin-banner: #000; --skin-banner-fg: #ffe81f;
}
html[data-skin="may4"] .health.ok[data-dot]::after { filter: drop-shadow(0 0 6px #4fc3f7); }
html[data-skin="bttf"] {
  --skin-font: "Orbitron", sans-serif;
  --skin-header: linear-gradient(90deg, #0d0b14, #2b1846 40%, #0d0b14); --skin-header-fg: #ff8a00;
  --skin-bg: linear-gradient(180deg, transparent 70%, rgba(255,138,0,.10)), repeating-linear-gradient(90deg, rgba(0,180,255,.06) 0 1px, transparent 1px 40px);
  --skin-card-border: 1px solid #3c2d5c; --skin-card-shadow: 0 0 0 1px rgba(255,138,0,.2), 0 0 16px rgba(0,180,255,.12);
  --skin-banner: linear-gradient(90deg, #ff8a00, #ff2d55); --skin-banner-fg: #fff;
}
html[data-skin="programozo"] {
  --skin-font: "Share Tech Mono", ui-monospace, monospace;
  --skin-header: linear-gradient(180deg, #0b100c, #12201a); --skin-header-fg: #3ddc84;
  --skin-bg: repeating-linear-gradient(0deg, rgba(61,220,132,.035) 0 1px, transparent 1px 3px);
  --skin-card-border: 1px solid #234032;
}
html[data-skin="pentek13"] {
  --skin-font: "Creepster", cursive; --skin-font-spacing: 1px;
  --skin-header: linear-gradient(180deg, #120c18, #24162f); --skin-header-fg: #d1b3ff;
  --skin-bg: radial-gradient(ellipse at 50% 120%, rgba(179,136,255,.18), transparent 60%);
  --skin-card-border: 1px solid #3d2b4d;
}
html[data-skin="halloween"] {
  --skin-font: "Creepster", cursive; --skin-font-spacing: 1px;
  --skin-header: linear-gradient(180deg, #100a05, #3a1d05); --skin-header-fg: #ff8c1a;
  --skin-bg: radial-gradient(circle at 85% 8%, rgba(255,214,120,.35) 0 22px, transparent 24px), radial-gradient(ellipse at 50% 120%, rgba(255,140,26,.18), transparent 60%);
  --skin-card-border: 1px solid #4a2e14; --skin-card-shadow: 0 0 14px rgba(255,140,26,.10);
  --skin-banner: linear-gradient(90deg, #ff8c1a, #6a1b9a); --skin-banner-fg: #fff;
}

/* ── effects (fun.js): particles, butterflies, the teddy, cube, matrix, fire ── */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 260; overflow: hidden; }
.fx i { position: absolute; font-style: normal; will-change: transform; }
.fx .fall { top: -30px; animation: fx-fall linear forwards; }
@keyframes fx-fall { to { transform: translate(var(--dx, 20px), 110vh) rotate(var(--rot, 180deg)); } }
.fx .rise { bottom: -40px; animation: fx-rise ease-in forwards; }
@keyframes fx-rise { to { transform: translate(var(--dx, 0), -115vh) rotate(var(--rot, 0deg)); } }
.fx .twinkle { animation: fx-twinkle ease-in-out infinite; }
@keyframes fx-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.fx .walk { bottom: 70px; left: -60px; animation: fx-walk linear forwards; font-size: 34px; }
@keyframes fx-walk { to { transform: translateX(calc(100vw + 120px)); } }
.fx .hop { bottom: 70px; left: -60px; animation: fx-hop 6s linear forwards; font-size: 34px; }
@keyframes fx-hop { 0% { transform: translate(0, 0); } 10% { transform: translate(10vw, -60px); } 20% { transform: translate(20vw, 0); }
  30% { transform: translate(30vw, -60px); } 40% { transform: translate(40vw, 0); } 50% { transform: translate(50vw, -60px); } 60% { transform: translate(60vw, 0); }
  70% { transform: translate(70vw, -60px); } 80% { transform: translate(80vw, 0); } 90% { transform: translate(90vw, -60px); } 100% { transform: translate(calc(100vw + 120px), 0); } }
.fx .flutter { animation: fx-flutter ease-in-out infinite alternate; }
@keyframes fx-flutter { 0% { transform: translate(0, 0); } 25% { transform: translate(var(--fx1), var(--fy1)); }
  50% { transform: translate(var(--fx2), var(--fy2)); } 75% { transform: translate(var(--fx3), var(--fy3)); } 100% { transform: translate(var(--fx4), var(--fy4)); } }
/* the blue butterfly (fun.js moves it): the wings flap around the body's axis, slower while resting */
.bfly { position: absolute; left: 0; top: 0; width: 54px; height: 44px; will-change: transform; filter: drop-shadow(0 3px 4px rgba(10,40,120,.25)); }
.bfly svg { width: 100%; height: 100%; overflow: visible; }
.bfly .bw-l { transform-box: view-box; transform-origin: 50px 40px; animation: wing .22s ease-in-out infinite alternate; }
.bfly .bw-r { transform-box: view-box; transform-origin: 0 0; animation: wing-r .22s ease-in-out infinite alternate; }   /* a mirror: its matrix carries the axis */
.bfly.resting .bw-l, .bfly.resting .bw-r { animation-duration: 1.4s; }
@keyframes wing { from { transform: scaleX(1); } to { transform: scaleX(.18); } }
@keyframes wing-r { from { transform: matrix(-1, 0, 0, 1, 100, 0); } to { transform: matrix(-.18, 0, 0, 1, 59, 0); } }
/* the teddy in the corner (09.02.) */
.teddy { position: fixed; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 40; font-size: 46px; line-height: 1;
  border: 0; background: none; padding: 0; min-height: 0; cursor: pointer; animation: teddy 3s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(30,60,120,.3)); }
@keyframes teddy { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
.teddy.hug { animation: hug .6s ease; }
@keyframes hug { 50% { transform: scale(1.35) rotate(-8deg); } }
/* Rubik's cube */
.rubik { position: fixed; left: 50%; top: 45%; width: 90px; height: 90px; margin: -45px; z-index: 270; pointer-events: none;
  transform-style: preserve-3d; animation: cube 3.2s ease-in-out forwards; }
.rubik div { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: #111; border-radius: 6px; }
.rubik div span { border-radius: 3px; }
@keyframes cube { 0% { transform: rotateX(-20deg) rotateY(0) scale(.2); opacity: 0; } 15% { opacity: 1; transform: rotateX(-20deg) rotateY(45deg) scale(1); }
  85% { opacity: 1; transform: rotateX(-25deg) rotateY(585deg) scale(1); } 100% { opacity: 0; transform: rotateX(-25deg) rotateY(675deg) scale(.4); } }
/* matrix rain */
.matrix { position: fixed; inset: 0; z-index: 270; pointer-events: none; background: rgba(0,10,0,.82); animation: fade-out 4.5s forwards; }
@keyframes fade-out { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* the 88 mph fire trails */
.fire-trail { position: fixed; left: -40vw; height: 6px; width: 40vw; z-index: 270; pointer-events: none; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #ff6d00 40%, #ffd600 80%, #fff); box-shadow: 0 0 14px 4px rgba(255,120,0,.8);
  animation: trail 1.2s ease-in forwards; }
@keyframes trail { to { transform: translateX(170vw); } }
.flash { position: fixed; inset: 0; z-index: 280; background: #fff; pointer-events: none; animation: flash .5s ease-out forwards; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
/* shake / wobble */
body.shake { animation: shake .6s ease-in-out; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px) rotate(-1deg); }
  40%, 60% { transform: translateX(8px) rotate(1deg); } }
body.wobble { animation: wobble 1.6s ease-in-out; }
@keyframes wobble { 25% { transform: skewX(4deg) rotate(1deg); } 50% { transform: skewX(-4deg) rotate(-1deg); } 75% { transform: skewX(2deg); } }
/* the May 4th crawl */
.crawl { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); height: 45vh; z-index: 270; pointer-events: none; perspective: 300px; overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 30%); animation: fade-out 9s forwards; }
.crawl p { position: absolute; left: 10%; right: 10%; bottom: -40%; margin: 0; color: #ffe81f; font: 700 1.3rem/1.5 "Orbitron", sans-serif; text-align: center;
  transform-origin: 50% 100%; animation: crawl 9s linear forwards; }
@keyframes crawl { from { transform: rotateX(25deg) translateY(0); } to { transform: rotateX(25deg) translateY(-160%); } }
@media (prefers-reduced-motion: reduce) {
  .fx, .rubik, .matrix, .fire-trail, .crawl { display: none; }
  .teddy, html[data-skin] .top, .health::after { animation: none !important; }
}