/* worlds4.css — the look and the motion for the four later worlds. Each world gets (a) a living backdrop behind the whole app and (b) a treatment on every .sb-card, so choosing a world changes the room the speller is sitting in — not just the accent colour. Everything here is decorative and pointer-events:none, and the app-wide "Reduce motion" switch stops all of it (see the block at the very bottom). */ /* ---------- the shared backdrop layer ---------- */ .w4-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .w4-bg>*{position:absolute;pointer-events:none} /* the app already sits in a z-index:1 wrapper, so the backdrop reads behind everything */ /* ================= 1. GOD'S ABODE — gold light, slow-turning rays, gilded cards ========== */ @keyframes w4-godray{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} @keyframes w4-motes{0%{transform:translateY(0);opacity:.0}12%{opacity:.85}100%{transform:translateY(-92vh);opacity:0}} @keyframes w4-gleam{0%,100%{opacity:.35}50%{opacity:.9}} [data-theme="godly"] .w4-godrays{left:50%;top:-40vh;width:180vmax;height:180vmax;margin-left:-90vmax; background:repeating-conic-gradient(from 0deg,rgba(240,194,74,.16) 0deg 6deg,transparent 6deg 22deg); animation:w4-godray 120s linear infinite} [data-theme="godly"] .w4-glow{left:50%;top:-26vh;width:80vmax;height:80vmax;margin-left:-40vmax;border-radius:50%; background:radial-gradient(circle,rgba(255,243,208,.5),rgba(255,243,208,0) 68%);animation:w4-gleam 7s ease-in-out infinite} [data-theme="godly"] .w4-mote{bottom:-10px;width:5px;height:5px;border-radius:50%;background:#F6DC8A; box-shadow:0 0 8px 2px rgba(246,220,138,.75);animation:w4-motes linear infinite} /* gilded card: a double gold inset and a lit top edge */ [data-theme="godly"] .sb-card{position:relative; box-shadow:inset 0 0 0 1px rgba(184,134,11,.55),inset 0 0 0 5px color-mix(in srgb,#F6DC8A 26%,transparent),var(--sh-rest); border-color:color-mix(in srgb,#B8860B 42%,var(--line))} [data-theme="godly"] .sb-card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(246,220,138,.95),transparent)} /* ================= 2. SERPENT'S LAIR — drifting crawlies, vine-wrapped cards ============= */ @keyframes w4-slither{0%{transform:translateX(-18vw) rotate(-2deg)}100%{transform:translateX(118vw) rotate(2deg)}} @keyframes w4-crawl{0%{transform:translate(-8vw,0) rotate(0)}50%{transform:translate(52vw,-3vh) rotate(8deg)}100%{transform:translate(112vw,0) rotate(0)}} @keyframes w4-breathe4{0%,100%{opacity:.16}50%{opacity:.34}} [data-theme="serpent"] .w4-fog{inset:0;background:radial-gradient(120% 90% at 50% 110%,rgba(63,168,106,.3),transparent 62%);animation:w4-breathe4 9s ease-in-out infinite} [data-theme="serpent"] .w4-snake{left:0;width:44vw;height:60px;animation:w4-slither linear infinite} [data-theme="serpent"] .w4-bug{left:0;width:26px;height:26px;animation:w4-crawl linear infinite;opacity:.5} /* Serpent-wrapped cards: the border is a COILING body — a sinusoid weaving along every edge with scale-dashes riding the curves — and a viper head resting on the top-right corner. Three serpents cycle across neighbouring cards: green tree-viper, golden python, hooded cobra (classes stamped by the runtime). */ [data-theme="serpent"] .sb-card{position:relative;border:9px solid transparent; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2084%2084%22%3E%3Cpath%20d%3D%22M14%2010%20q7%20-6%2014%200%20q7%206%2014%200%20q7%20-6%2014%200%20q7%206%2014%200%20Q74%2010%2074%2014%20q6%207%200%2014%20q-6%207%200%2014%20q6%207%200%2014%20q-6%207%200%2014%20Q74%2074%2070%2074%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20Q10%2074%2010%2070%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20Q10%2010%2014%2010%20z%22%20fill%3D%22none%22%20stroke%3D%22%232E7D52%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M14%2010%20q7%20-6%2014%200%20q7%206%2014%200%20q7%20-6%2014%200%20q7%206%2014%200%20Q74%2010%2074%2014%20q6%207%200%2014%20q-6%207%200%2014%20q6%207%200%2014%20q-6%207%200%2014%20Q74%2074%2070%2074%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20Q10%2074%2010%2070%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20Q10%2010%2014%2010%20z%22%20fill%3D%22none%22%20stroke%3D%22%233FA86A%22%20stroke-width%3D%226%22%20stroke-dasharray%3D%222.6%205.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22/%3E%3C/svg%3E") 20 round} [data-theme="serpent"] .sb-card::after{content:"";position:absolute;top:-17px;right:8px;width:56px;height:36px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2056%2036%22%3E%3Cpath%20d%3D%22M3%2018%20Q5%207%2017%205%20Q31%202%2041%209%20Q48%2013%2049%2018%20Q48%2023%2041%2027%20Q31%2034%2017%2031%20Q5%2029%203%2018%20z%22%20fill%3D%22%233FA86A%22/%3E%3Cpath%20d%3D%22M3%2018%20Q5%207%2017%205%20Q31%202%2041%209%22%20fill%3D%22none%22%20stroke%3D%22%238FD9A8%22%20stroke-width%3D%221.6%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M12%2010%20q5%20-3%2010%20-1%20M12%2026%20q5%203%2010%201%22%20stroke%3D%22%238FD9A8%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2212.5%22%20rx%3D%224%22%20ry%3D%223.4%22%20fill%3D%22%23FFE07A%22/%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2223.5%22%20rx%3D%224%22%20ry%3D%223.4%22%20fill%3D%22%23FFE07A%22/%3E%3Cpath%20d%3D%22M22%209.6%20v5.8%20M22%2020.6%20v5.8%22%20stroke%3D%22%231E2B14%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M14%209%20q3%20-2%206%20-1%20M14%2027%20q3%202%206%201%22%20stroke%3D%22%231E2B14%22%20stroke-width%3D%221.1%22%20fill%3D%22none%22%20opacity%3D%22.55%22/%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2215%22%20r%3D%221%22%20fill%3D%22%231E2B14%22/%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2221%22%20r%3D%221%22%20fill%3D%22%231E2B14%22/%3E%3Cpath%20d%3D%22M49%2018%20h4%20M53%2018%20l3%20-2.6%20M53%2018%20l3%202.6%22%20stroke%3D%22%23E0453A%22%20stroke-width%3D%221.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") no-repeat center/contain; filter:drop-shadow(0 2px 3px rgba(10,30,16,.35))} [data-theme="serpent"] .sb-card.w4-sn2{border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2084%2084%22%3E%3Cpath%20d%3D%22M14%2010%20q7%20-6%2014%200%20q7%206%2014%200%20q7%20-6%2014%200%20q7%206%2014%200%20Q74%2010%2074%2014%20q6%207%200%2014%20q-6%207%200%2014%20q6%207%200%2014%20q-6%207%200%2014%20Q74%2074%2070%2074%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20Q10%2074%2010%2070%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20Q10%2010%2014%2010%20z%22%20fill%3D%22none%22%20stroke%3D%22%238A6B1E%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M14%2010%20q7%20-6%2014%200%20q7%206%2014%200%20q7%20-6%2014%200%20q7%206%2014%200%20Q74%2010%2074%2014%20q6%207%200%2014%20q-6%207%200%2014%20q6%207%200%2014%20q-6%207%200%2014%20Q74%2074%2070%2074%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20Q10%2074%2010%2070%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20Q10%2010%2014%2010%20z%22%20fill%3D%22none%22%20stroke%3D%22%23E0B54A%22%20stroke-width%3D%226%22%20stroke-dasharray%3D%222.6%205.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22/%3E%3C/svg%3E") 20 round} [data-theme="serpent"] .sb-card.w4-sn2::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2056%2036%22%3E%3Cpath%20d%3D%22M3%2018%20Q5%207%2017%205%20Q31%202%2041%209%20Q48%2013%2049%2018%20Q48%2023%2041%2027%20Q31%2034%2017%2031%20Q5%2029%203%2018%20z%22%20fill%3D%22%23C8A96A%22/%3E%3Cpath%20d%3D%22M3%2018%20Q5%207%2017%205%20Q31%202%2041%209%22%20fill%3D%22none%22%20stroke%3D%22%238A6B1E%22%20stroke-width%3D%221.6%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M12%2010%20q5%20-3%2010%20-1%20M12%2026%20q5%203%2010%201%22%20stroke%3D%22%238A6B1E%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2212.5%22%20rx%3D%224%22%20ry%3D%223.4%22%20fill%3D%22%23FFE07A%22/%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2223.5%22%20rx%3D%224%22%20ry%3D%223.4%22%20fill%3D%22%23FFE07A%22/%3E%3Cpath%20d%3D%22M22%209.6%20v5.8%20M22%2020.6%20v5.8%22%20stroke%3D%22%231E2B14%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M14%209%20q3%20-2%206%20-1%20M14%2027%20q3%202%206%201%22%20stroke%3D%22%231E2B14%22%20stroke-width%3D%221.1%22%20fill%3D%22none%22%20opacity%3D%22.55%22/%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2215%22%20r%3D%221%22%20fill%3D%22%231E2B14%22/%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2221%22%20r%3D%221%22%20fill%3D%22%231E2B14%22/%3E%3Cpath%20d%3D%22M49%2018%20h4%20M53%2018%20l3%20-2.6%20M53%2018%20l3%202.6%22%20stroke%3D%22%23E0453A%22%20stroke-width%3D%221.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E")} [data-theme="serpent"] .sb-card.w4-sn3{border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2084%2084%22%3E%3Cpath%20d%3D%22M14%2010%20q7%20-6%2014%200%20q7%206%2014%200%20q7%20-6%2014%200%20q7%206%2014%200%20Q74%2010%2074%2014%20q6%207%200%2014%20q-6%207%200%2014%20q6%207%200%2014%20q-6%207%200%2014%20Q74%2074%2070%2074%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20Q10%2074%2010%2070%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20Q10%2010%2014%2010%20z%22%20fill%3D%22none%22%20stroke%3D%22%231E5B4A%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M14%2010%20q7%20-6%2014%200%20q7%206%2014%200%20q7%20-6%2014%200%20q7%206%2014%200%20Q74%2010%2074%2014%20q6%207%200%2014%20q-6%207%200%2014%20q6%207%200%2014%20q-6%207%200%2014%20Q74%2074%2070%2074%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20q-7%206%20-14%200%20q-7%20-6%20-14%200%20Q10%2074%2010%2070%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20q-6%20-7%200%20-14%20q6%20-7%200%20-14%20Q10%2010%2014%2010%20z%22%20fill%3D%22none%22%20stroke%3D%22%233FA8A0%22%20stroke-width%3D%226%22%20stroke-dasharray%3D%222.6%205.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22/%3E%3C/svg%3E") 20 round} [data-theme="serpent"] .sb-card.w4-sn3::after{top:-22px;width:50px;height:46px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2052%2046%22%3E%3Cpath%20d%3D%22M26%202%20Q46%206%2048%2024%20Q48%2040%2026%2044%20Q4%2040%204%2024%20Q6%206%2026%202%20z%22%20fill%3D%22%231E5B4A%22/%3E%3Cpath%20d%3D%22M26%206%20Q42%209%2044%2024%20Q43%2037%2026%2040%20Q9%2037%208%2024%20Q10%209%2026%206%20z%22%20fill%3D%22%233FA8A0%22/%3E%3Cpath%20d%3D%22M26%2028%20q-5%203%20-4%207%20q4%20-2%204%20-2%20q0%200%204%202%20q1%20-4%20-4%20-7%20z%22%20fill%3D%22%231E5B4A%22%20opacity%3D%22.9%22/%3E%3Cellipse%20cx%3D%2219%22%20cy%3D%2219%22%20rx%3D%223.4%22%20ry%3D%224%22%20fill%3D%22%23FFE07A%22/%3E%3Cellipse%20cx%3D%2233%22%20cy%3D%2219%22%20rx%3D%223.4%22%20ry%3D%224%22%20fill%3D%22%23FFE07A%22/%3E%3Cpath%20d%3D%22M19%2015.6%20v6.8%20M33%2015.6%20v6.8%22%20stroke%3D%22%231E2B14%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M15%2013%20q4%20-3%208%20-2%20M29%2011%20q4%20-1%208%202%22%20stroke%3D%22%231E2B14%22%20stroke-width%3D%221.1%22%20fill%3D%22none%22%20opacity%3D%22.5%22/%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%22.9%22%20fill%3D%22%231E2B14%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2226%22%20r%3D%22.9%22%20fill%3D%22%231E2B14%22/%3E%3Cpath%20d%3D%22M26%2031%20v6%20l-3.4%202.6%20M26%2037%20l3.4%202.6%22%20stroke%3D%22%23E0453A%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E")} /* the tail coils in a spiral off the bottom-left corner */ [data-theme="serpent"] .sb-card::before{content:"";position:absolute;left:-12px;bottom:-10px;width:40px;height:32px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2032%22%3E%3Cpath%20d%3D%22M38%206%20q-16%20-4%20-26%206%20q-8%208%200%2014%20q7%205%2012%20-1%20q4%20-5%20-1%20-8%20q-4%20-2%20-6%201%22%20fill%3D%22none%22%20stroke%3D%22%232E7D52%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M38%206%20q-16%20-4%20-26%206%22%20fill%3D%22none%22%20stroke%3D%22%238FD9A8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22/%3E%3C/svg%3E") no-repeat center/contain;opacity:.95} /* ================= 3. RACE ZONE — cars zooming past, wheels on the cards ================= */ @keyframes w4-zoom{0%{transform:translateX(-24vw) scaleX(1)}100%{transform:translateX(124vw) scaleX(1)}} @keyframes w4-speedline{0%{transform:translateX(110vw);opacity:0}8%{opacity:.55}100%{transform:translateX(-30vw);opacity:0}} @keyframes w4-spin4{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} @keyframes w4-flagwave{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}} [data-theme="race"] .w4-asphalt{left:0;right:0;bottom:0;height:26vh; background:linear-gradient(180deg,transparent,rgba(44,58,85,.22))} [data-theme="race"] .w4-chequer{left:0;right:0;top:0;height:14px; background:repeating-linear-gradient(90deg,rgba(44,58,85,.5) 0 14px,rgba(255,255,255,.5) 14px 28px); animation:w4-flagwave 1.6s linear infinite} [data-theme="race"] .w4-car{left:0;animation:w4-zoom linear infinite} [data-theme="race"] .w4-line{right:0;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#4A8CFF); animation:w4-speedline linear infinite} /* wheeled card: a wheel at each bottom corner, and a lap stripe up the right edge */ [data-theme="race"] .sb-card{position:relative;border-color:color-mix(in srgb,#2456D6 38%,var(--line))} [data-theme="race"] .sb-card::before,[data-theme="race"] .sb-card::after{content:"";position:absolute;bottom:-8px;width:22px;height:22px; border-radius:50%;background:radial-gradient(circle at 50% 50%,#D8DEE9 0 22%,#2C3A55 23% 74%,#1A2438 75%); box-shadow:0 2px 5px rgba(0,0,0,.28);pointer-events:none;animation:w4-spin4 1.1s linear infinite} [data-theme="race"] .sb-card::before{left:18px} [data-theme="race"] .sb-card::after{right:18px} /* the countdown chrome the world puts on every screen */ @keyframes w4-cd{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}} .w4-countdown{position:fixed;inset:0;z-index:70;display:grid;place-items:center;pointer-events:none} .w4-countdown b{font-family:"Bungee",system-ui,sans-serif;font-size:clamp(64px,18vw,190px);color:#FFC83D; text-shadow:0 6px 0 #14337A,0 10px 26px rgba(0,0,0,.4);animation:w4-cd .75s ease-out forwards} .w4-lights{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:70;display:flex;gap:9px;pointer-events:none} .w4-lights i{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)} .w4-lights i.on{background:#FFC83D;box-shadow:0 0 12px 3px rgba(255,200,61,.75)} /* ================= 4. DINO ERA — a grazing brachiosaurus, ferns, dinos on the cards ====== */ @keyframes w4-walk{0%{transform:translateX(-30vw)}100%{transform:translateX(120vw)}} @keyframes w4-graze{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}} @keyframes w4-fly{0%{transform:translate(-12vw,0)}50%{transform:translate(55vw,-4vh)}100%{transform:translate(118vw,0)}} /* Bees do not glide. w4-fly on its own slid them across the meadow in a single shallow arc, which read as floating — a balloon, not an insect. w4-beeline gives the crossing four rises and falls, which is what makes it read as flight. (A wingbeat squash on an inner wrapper was tried and removed: at 3Hz across six bees it read as a twitch — and its keyframe name collided with the dino pterosaur's own w4-flap.) */ @keyframes w4-beeline{ 0%{transform:translate(-12vw,0)} 12%{transform:translate(4vw,-3.2vh)} 25%{transform:translate(20vw,.6vh)} 38%{transform:translate(36vw,-4vh)} 50%{transform:translate(52vw,-.8vh)} 62%{transform:translate(68vw,-3.6vh)} 75%{transform:translate(84vw,.4vh)} 88%{transform:translate(101vw,-2.6vh)} 100%{transform:translate(118vw,0)}} @keyframes w4-sway4{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} @keyframes w4-creep{0%{transform:translateX(-24vw)}100%{transform:translateX(120vw)}} @keyframes w4-creepR{0%{transform:translateX(120vw) scaleX(-1)}100%{transform:translateX(-24vw) scaleX(-1)}} @keyframes w4-cotton{0%{transform:translateY(-6vh)}100%{transform:translateY(108vh)}} @keyframes w4-cotdrift{0%,100%{margin-left:0}50%{margin-left:34px}} @keyframes w4-eyeblink{0%,88%,100%{opacity:1}92%,96%{opacity:0}} [data-theme="dino"] .w4-haze{inset:0;background:linear-gradient(180deg,rgba(246,220,138,.28),transparent 40%,rgba(46,68,22,.3))} /* majesty: the brachiosaurus stands, filling the corner, neck sweeping as it grazes */ [data-theme="dino"] .w4-brachio{bottom:-6px;left:0;width:min(60vw,760px);aspect-ratio:300/210;opacity:.9;filter:drop-shadow(0 8px 18px rgba(20,30,8,.35));animation:w4-walk 130s linear infinite} [data-theme="dino"] .w4-ptero{top:9vh;left:0;width:88px;animation:w4-fly 44s linear infinite;opacity:.5} [data-theme="dino"] .w4-fern{bottom:0;width:120px;transform-origin:50% 100%;animation:w4-sway4 6s ease-in-out infinite;opacity:.6} [data-theme="dino"] .w4-tree{bottom:0;aspect-ratio:90/240;height:auto!important;transform-origin:50% 100%;animation:w4-sway4 11s ease-in-out infinite} [data-theme="dino"] .w4-raptor{aspect-ratio:170/80;animation:w4-creep linear infinite;opacity:.8} [data-theme="dino"] .w4-raptor-b{animation:w4-creepR linear infinite;opacity:.7} /* floating cottonwood — soft glowing seeds, falling and drifting on two timelines */ [data-theme="dino"] .w4-cotton{top:0;border-radius:50%; background:radial-gradient(circle,rgba(255,252,238,.95) 0 28%,rgba(255,250,228,.35) 60%,transparent 72%); box-shadow:0 0 8px 2px rgba(255,248,220,.5); animation-name:w4-cotton,w4-cotdrift;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite} /* one broad late-afternoon sunbeam across the scene */ [data-theme="dino"] .w4-beam{left:-10vw;top:-16vh;width:70vw;height:150vh;transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(246,220,138,.16) 42%,rgba(246,220,138,.28) 50%,rgba(246,220,138,.16) 58%,transparent); animation:w4-gleam 11s ease-in-out infinite} /* night in the valley: the creatures' eyes catch the light and shine */ [data-theme="dino"][data-mode="dusk"] .w4-eye{fill:#FFE07A;animation:w4-eyeblink 5s linear infinite; filter:drop-shadow(0 0 5px rgba(255,224,122,.95)) drop-shadow(0 0 12px rgba(255,224,122,.6))} [data-theme="dino"][data-mode="dusk"] .w4-cotton{box-shadow:0 0 10px 3px rgba(255,248,220,.65)} [data-theme="dino"][data-mode="dusk"] .w4-beam{background:linear-gradient(90deg,transparent,rgba(200,214,255,.10) 42%,rgba(200,214,255,.18) 50%,rgba(200,214,255,.10) 58%,transparent)} [data-theme="dino"][data-mode="dusk"] .w4-haze{background:linear-gradient(180deg,rgba(60,74,130,.3),transparent 40%,rgba(10,18,4,.5))} /* dino-flanked card: a silhouette standing at the side, scute ridge along the top */ [data-theme="dino"] .sb-card{position:relative;border-color:color-mix(in srgb,#5E7A2E 40%,var(--line))} /* a row of scutes riding the card's own top edge, fading out at both ends */ [data-theme="dino"] .sb-card::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:9px;pointer-events:none; background: radial-gradient(circle at 50% 100%, #6F9438 0 42%, transparent 43%) 0 0/16px 9px repeat-x; -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);opacity:.85} [data-theme="dino"] .sb-card::after{content:"";position:absolute;right:8px;bottom:8px;width:58px;height:58px;pointer-events:none; opacity:.3;background-repeat:no-repeat;background-size:contain;background-position:bottom right; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M6 54 q7 -20 23 -20 q15 0 17 16 l6 3 z' fill='%235E7A2E'/%3E%3Cpath d='M28 35 q-3 -17 8 -24 q9 -6 12 1 q3 6 -5 9 q-8 3 -7 14 z' fill='%235E7A2E'/%3E%3Cellipse cx='47' cy='11' rx='6' ry='4' fill='%235E7A2E'/%3E%3C/svg%3E")} /* ---------- accessibility: the app's Reduce-motion switch stops every world effect ---------- */ :root[data-motion="off"] .w4-bg *, :root[data-motion="off"] [data-theme] .sb-card::before, :root[data-motion="off"] [data-theme] .sb-card::after, :root[data-motion="off"] .w4-countdown b, :root[data-motion="off"] .w4-lights i{animation:none!important} :root[data-motion="off"] .w4-bg{display:none} /* small screens: keep the moving furniture light so the text stays the point */ @media(max-width:560px){ [data-theme="race"] .sb-card::before,[data-theme="race"] .sb-card::after{width:19px;height:19px;bottom:-8px} [data-theme="dino"] .sb-card::after{width:38px;height:38px} [data-theme="godly"] .sb-card{box-shadow:inset 0 0 0 1px rgba(184,134,11,.5),inset 0 0 0 4px color-mix(in srgb,#F6DC8A 22%,transparent),var(--sh-rest)} } /* The backdrop is a sibling of #root, so #root must be lifted above it while a later world is active (it is otherwise a non-positioned box, and positioned siblings would paint over). */ .w4-on #root{position:relative;z-index:1} /* ---------- focus screens: no moving scenery where the speller is working ---------- Practice (Word Coach, training, revisions) and Supercharge are for concentration — the runtime marks them with .w4-calm on , which parks the backdrop entirely and freezes the card decorations. Home, Arcade, Progress etc. keep the show. */ /* Focus screens keep a PICTURE, not a show: every scene element freezes in place and the whole layer dims to a faint backdrop — a still image, never motion, behind the work. */ .w4-calm .w4-bg{opacity:.22;filter:saturate(.75)} .w4-calm .w4-bg *{animation-play-state:paused!important} .w4-calm [data-theme] .sb-card::before, .w4-calm [data-theme] .sb-card::after{animation:none!important} /* white mode is pure paper: the scene fades to a whisper so the background reads white */ [data-mode="white"] .w4-bg{opacity:.13;filter:saturate(.55)} /* ================= scenes for the ORIGINAL EIGHT worlds ===================================== Lighter than the four flagship worlds — three or four elements each, reusing the shared keyframes. Classes are world-agnostic; scenes only mount inside their own world. */ @keyframes w4-twk{0%,100%{opacity:.12}50%{opacity:.95}} @keyframes w4-shoot{0%{transform:translate(0,0) rotate(158deg);opacity:0}5%{opacity:.9}26%{transform:translate(-38vw,22vh) rotate(158deg);opacity:0}100%{transform:translate(-38vw,22vh) rotate(158deg);opacity:0}} @keyframes w4-swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}} .w4o-twk{border-radius:50%;background:#fff;animation:w4-twk ease-in-out infinite} .w4o-shoot{width:130px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);animation:w4-shoot 8s ease-out infinite} .w4o-across{animation:w4-fly linear infinite} /* a bee crossing the meadow, rather than drifting across it */ .w4o-across.w4o-bee{animation-name:w4-beeline;animation-timing-function:ease-in-out} .w4o-zoom{animation:w4-zoom linear infinite} .w4o-rise{bottom:-12px;border-radius:50%;animation:w4-motes linear infinite} .w4o-fall{top:0;animation-name:w4-cotton,w4-cotdrift;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite} .w4o-sway{bottom:0;transform-origin:50% 100%;animation:w4-sway4 8s ease-in-out infinite} .w4o-swing{transform-origin:50% 0%;animation:w4-swing 9s ease-in-out infinite} .w4o-gleam{animation:w4-gleam 9s ease-in-out infinite} .w4o-spin{animation:w4-spin4 linear infinite} /* ================= card shapes for the ORIGINAL EIGHT ====================================== Each world reshapes the card itself — radius, edge, one signature mark — kept lighter than the flagship four so text always wins. */ [data-theme="spellbound"] .sb-card{border-radius:26px 10px 26px 10px;border-color:color-mix(in srgb,#F0B429 45%,var(--line))} [data-theme="spellbound"] .sb-card::after{content:"";position:absolute;top:-7px;right:16px;width:16px;height:14px;pointer-events:none;opacity:.8; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M4 0 h8 l4 7 l-4 7 h-8 l-4 -7 z' fill='%23F0B429'/%3E%3C/svg%3E") no-repeat center/contain} [data-theme="spellbound"] .sb-card{position:relative} /* Spotlight cards are little theatres — kept translucent and rosy so the curtains frame the card without competing with what is written on it. */ [data-theme="marquee"] .sb-card{position:relative;overflow:hidden;border-radius:14px; border-color:color-mix(in srgb,#DE8E9B 45%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,#F0C46A 14%,transparent),var(--sh-rest)} [data-theme="marquee"] .sb-card::before{content:"";position:absolute;left:0;right:0;top:0;height:15px;pointer-events:none;z-index:1; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2028%2020%22%3E%3Crect%20width%3D%2228%22%20height%3D%2212%22%20fill%3D%22%23E8A3AE%22/%3E%3Cpath%20d%3D%22M0%200%20h7%20v10%20q0%208%20-3.5%208%20q-3.5%200%20-3.5%20-8%20z%22%20fill%3D%22%23DE8E9B%22/%3E%3Cpath%20d%3D%22M14%200%20h7%20v10%20q0%208%20-3.5%208%20q-3.5%200%20-3.5%20-8%20z%22%20fill%3D%22%23F0B6BF%22/%3E%3Cpath%20d%3D%22M7%200%20h7%20v9%20q0%207%20-3.5%207%20q-3.5%200%20-3.5%20-7%20z%22%20fill%3D%22%23EAA9B3%22/%3E%3Cpath%20d%3D%22M21%200%20h7%20v9%20q0%207%20-3.5%207%20q-3.5%200%20-3.5%20-7%20z%22%20fill%3D%22%23E29AA6%22/%3E%3Crect%20width%3D%2228%22%20height%3D%222%22%20fill%3D%22%23F0C46A%22/%3E%3C/svg%3E") 0 0/28px 15px repeat-x;opacity:.5} [data-theme="marquee"] .sb-card::after{content:"";position:absolute;inset:0;pointer-events:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2046%20130%22%3E%3Cg%20transform%3D%22scale%281%2C1%29%22%20transform-origin%3D%2223%2065%22%3E%3Cpath%20d%3D%22M2%200%20H30%20Q26%2034%2016%2052%20Q8%2066%2010%2092%20Q11%20112%2022%20130%20H2%20z%22%20fill%3D%22%23E8A3AE%22/%3E%3Cpath%20d%3D%22M8%200%20Q16%2030%2012%2052%20Q6%2068%208%2094%20Q9%20114%2016%20130%20H8%20Q2%20108%204%2088%20Q6%2064%2010%2048%20Q14%2028%208%200%20z%22%20fill%3D%22%23F0B6BF%22/%3E%3Cpath%20d%3D%22M20%200%20Q24%2026%2018%2046%20Q12%2062%2013%2090%22%20fill%3D%22none%22%20stroke%3D%22%23DE8E9B%22%20stroke-width%3D%222.4%22/%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%2274%22%20rx%3D%228%22%20ry%3D%225.4%22%20fill%3D%22%23F0C46A%22/%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%2274%22%20rx%3D%224%22%20ry%3D%222.6%22%20fill%3D%22%23D8A83C%22/%3E%3C/g%3E%3C/svg%3E") left top/auto 62% no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2046%20130%22%3E%3Cg%20transform%3D%22scale%28-1%2C1%29%22%20transform-origin%3D%2223%2065%22%3E%3Cpath%20d%3D%22M2%200%20H30%20Q26%2034%2016%2052%20Q8%2066%2010%2092%20Q11%20112%2022%20130%20H2%20z%22%20fill%3D%22%23E8A3AE%22/%3E%3Cpath%20d%3D%22M8%200%20Q16%2030%2012%2052%20Q6%2068%208%2094%20Q9%20114%2016%20130%20H8%20Q2%20108%204%2088%20Q6%2064%2010%2048%20Q14%2028%208%200%20z%22%20fill%3D%22%23F0B6BF%22/%3E%3Cpath%20d%3D%22M20%200%20Q24%2026%2018%2046%20Q12%2062%2013%2090%22%20fill%3D%22none%22%20stroke%3D%22%23DE8E9B%22%20stroke-width%3D%222.4%22/%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%2274%22%20rx%3D%228%22%20ry%3D%225.4%22%20fill%3D%22%23F0C46A%22/%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%2274%22%20rx%3D%224%22%20ry%3D%222.6%22%20fill%3D%22%23D8A83C%22/%3E%3C/g%3E%3C/svg%3E") right top/auto 62% no-repeat;opacity:.38} [data-theme="aurora"] .sb-card{position:relative;border-radius:20px;border-color:color-mix(in srgb,#4A5BD4 42%,var(--line)); box-shadow:inset 0 0 22px color-mix(in srgb,#7D8CF0 10%,transparent),var(--sh-rest)} [data-theme="aurora"] .sb-card::after{content:"✦";position:absolute;top:6px;right:12px;color:#7D8CF0;font-size:12px;pointer-events:none;opacity:.8;animation:w4-twk 2.6s ease-in-out infinite} [data-theme="anime"] .sb-card{position:relative;border-radius:6px;border-left:5px solid #C43D5A} [data-theme="anime"] .sb-card::after{content:"";position:absolute;right:10px;top:-6px;width:22px;height:12px;pointer-events:none;opacity:.85; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cellipse cx='6' cy='6' rx='4' ry='6' fill='%23F3B2C0' transform='rotate(24 6 6)'/%3E%3Cellipse cx='16' cy='6' rx='3.4' ry='5' fill='%23E76D88' transform='rotate(-18 16 6)'/%3E%3C/svg%3E") no-repeat center/contain} [data-theme="science"] .sb-card{position:relative;border-radius:10px;border-color:color-mix(in srgb,#0E8A78 42%,var(--line)); background-image:linear-gradient(color-mix(in srgb,#3BC0AA 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#3BC0AA 5%,transparent) 1px,transparent 1px);background-size:22px 22px} [data-theme="origami"] .sb-card{position:relative;border-radius:3px;border-color:color-mix(in srgb,#C25A2E 40%,var(--line))} [data-theme="origami"] .sb-card::after{content:"";position:absolute;top:0;right:0;width:0;height:0;pointer-events:none; border-left:22px solid color-mix(in srgb,#E88A5C 40%,var(--paper,#fff));border-bottom:22px solid transparent;filter:drop-shadow(-2px 2px 2px rgba(90,50,20,.18))} [data-theme="pixel"] .sb-card{border-radius:0;border:3px solid color-mix(in srgb,#3B6FE0 55%,var(--line)); box-shadow:6px 6px 0 color-mix(in srgb,#3B6FE0 22%,transparent)} [data-theme="avatar"] .sb-card{position:relative;border-radius:28px 12px 24px 14px;border-color:color-mix(in srgb,#2E8FB8 42%,var(--line)); box-shadow:inset 0 -14px 24px -18px color-mix(in srgb,#2E8FB8 35%,transparent),var(--sh-rest)} [data-theme="avatar"] .sb-card::after{content:"";position:absolute;top:9px;right:14px;width:50px;height:9px;pointer-events:none;opacity:.85; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 9'%3E%3Ccircle cx='4.5' cy='4.5' r='3.6' fill='%23AEDDE4'/%3E%3Ccircle cx='19' cy='4.5' r='3.6' fill='%233FA9D8'/%3E%3Ccircle cx='33.5' cy='4.5' r='3.6' fill='%235FB87A'/%3E%3Ccircle cx='48' cy='4.5' r='3.6' fill='%23F3A13C'/%3E%3C/svg%3E") no-repeat center/contain} /* ================= TOTAL CALM on Practice & Supercharge ==================================== Focus screens strip everything the worlds add: the scene freezes to a faint still, the card costumes come off entirely (plain radius, plain border, no pseudo-element chrome), and the flashing Find-your-Bee-Band pill in the header holds still. Music is stopped by the runtime on the same signal. */ .w4-calm [data-theme] .sb-card{border-image:none!important;border:1px solid var(--line)!important;border-radius:var(--r-xl,20px)!important;box-shadow:var(--sh-rest)!important;background-image:none!important} .w4-calm [data-theme] .sb-card::before, .w4-calm [data-theme] .sb-card::after{display:none!important} .w4-calm .sb-band-call{animation:none!important;background:var(--chip)!important} .w4-calm .sb-band-call::after{display:none!important} .w4-calm .sb-band-call .sb-band-spark{animation:none!important} /* ===== BIG ambient signatures for the original eight — the layer you cannot miss ========= */ @keyframes w4-bgdrift{0%{background-position:0 0}100%{background-position:224px 128px}} @keyframes w4-ribbon{0%,100%{transform:skewX(-12deg) translateX(-4vw);opacity:.5}50%{transform:skewX(-12deg) translateX(4vw);opacity:.85}} @keyframes w4-huerot{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(40deg)}} /* Bizzing Bee: a whole honeycomb wall, slowly drifting, plus a warm hive glow */ [data-theme="spellbound"] .w4o-comb{inset:0;opacity:.16;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048.00%2027.71%22%3E%3Cpolygon%20points%3D%22-16.00%2C0.00%20-8.00%2C-13.86%208.00%2C-13.86%2016.00%2C0.00%208.00%2C13.86%20-8.00%2C13.86%22%20fill%3D%22none%22%20stroke%3D%22%23F0B429%22%20stroke-width%3D%222%22/%3E%3Cpolygon%20points%3D%2232.00%2C0.00%2040.00%2C-13.86%2056.00%2C-13.86%2064.00%2C0.00%2056.00%2C13.86%2040.00%2C13.86%22%20fill%3D%22none%22%20stroke%3D%22%23F0B429%22%20stroke-width%3D%222%22/%3E%3Cpolygon%20points%3D%228.00%2C13.86%2016.00%2C0.00%2032.00%2C0.00%2040.00%2C13.86%2032.00%2C27.71%2016.00%2C27.71%22%20fill%3D%22none%22%20stroke%3D%22%23F0B429%22%20stroke-width%3D%222%22/%3E%3Cpolygon%20points%3D%22-16.00%2C27.71%20-8.00%2C13.86%208.00%2C13.86%2016.00%2C27.71%208.00%2C41.57%20-8.00%2C41.57%22%20fill%3D%22none%22%20stroke%3D%22%23F0B429%22%20stroke-width%3D%222%22/%3E%3Cpolygon%20points%3D%2232.00%2C27.71%2040.00%2C13.86%2056.00%2C13.86%2064.00%2C27.71%2056.00%2C41.57%2040.00%2C41.57%22%20fill%3D%22none%22%20stroke%3D%22%23F0B429%22%20stroke-width%3D%222%22/%3E%3Cpolygon%20points%3D%228.00%2C41.57%2016.00%2C27.71%2032.00%2C27.71%2040.00%2C41.57%2032.00%2C55.43%2016.00%2C55.43%22%20fill%3D%22none%22%20stroke%3D%22%23F0B429%22%20stroke-width%3D%222%22/%3E%3Cpolygon%20points%3D%228.00%2C-13.86%2016.00%2C-27.71%2032.00%2C-27.71%2040.00%2C-13.86%2032.00%2C0.00%2016.00%2C0.00%22%20fill%3D%22none%22%20stroke%3D%22%23F0B429%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") 0 0/96.00px 55.43px repeat;animation:w4-bgdrift 60s linear infinite} [data-theme="spellbound"] .w4o-hiveglow{left:50%;bottom:-30vh;width:90vmax;height:70vmax;margin-left:-45vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,194,61,.30),transparent 65%);animation:w4-gleam 8s ease-in-out infinite} /* Spotlight: a lit stage floor and a bulb string across the top */ [data-theme="marquee"] .w4o-stagefloor{left:0;right:0;bottom:0;height:34vh;background:linear-gradient(180deg,transparent,rgba(240,180,41,.30))} [data-theme="marquee"] .w4o-bulbs{left:0;right:0;top:0;height:16px;background:radial-gradient(circle at 50% 55%,#F6DC8A 0 4px,rgba(246,220,138,.25) 5px,transparent 7px) 0 0/44px 16px repeat-x;animation:w4-gleam 3.6s ease-in-out infinite} /* Galaxy: a full aurora ribbon sweeping the sky, hue slowly turning */ [data-theme="aurora"] .w4o-ribbon{left:-10vw;top:6vh;width:120vw;height:34vh;border-radius:50%; background:linear-gradient(100deg,transparent,rgba(125,140,240,.4) 30%,rgba(54,209,255,.35) 55%,rgba(185,140,255,.4) 75%,transparent); filter:blur(18px);animation:w4-ribbon 14s ease-in-out infinite, w4-huerot 26s linear infinite alternate} [data-theme="aurora"] .w4o-nebula{right:-14vw;bottom:-16vh;width:70vmax;height:52vmax;border-radius:50%;background:radial-gradient(circle,rgba(125,140,240,.28),transparent 62%)} /* Blade: the rising sun and the ridge under it */ [data-theme="anime"] .w4o-sun{right:8vw;top:6vh;width:34vmin;height:34vmin;border-radius:50%;background:radial-gradient(circle,#F3B2C0 0 58%,rgba(243,178,192,.4) 70%,transparent 74%);animation:w4-gleam 9s ease-in-out infinite} [data-theme="anime"] .w4o-ridge{left:0;right:0;bottom:0;height:26vh;background:linear-gradient(180deg,transparent,rgba(142,44,68,.30)); clip-path:polygon(0 62%,16% 34%,30% 58%,48% 22%,64% 52%,80% 30%,100% 56%,100% 100%,0 100%)} /* Lab: graph paper everywhere + a slow-turning molecule */ [data-theme="science"] .w4o-graph{inset:0;opacity:.5;background:linear-gradient(rgba(59,192,170,.12) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(59,192,170,.12) 1px,transparent 1px) 0 0/26px 26px} [data-theme="science"] .w4o-mol{right:4vw;top:12vh;width:130px;height:130px;opacity:.5;animation:w4-spin4 40s linear infinite} /* Origami: giant paper facets folding across the corner */ [data-theme="origami"] .w4o-facets{right:-6vw;top:-6vh;width:56vmin;height:56vmin;opacity:.28;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20d%3D%22M0%200%20L80%200%20L0%2080%20z%22%20fill%3D%22%23E88A5C%22%20opacity%3D%22.5%22/%3E%3Cpath%20d%3D%22M80%200%20L80%2080%20L0%2080%20z%22%20fill%3D%22%23F0C9A2%22%20opacity%3D%22.4%22/%3E%3C/svg%3E") 0 0/80px 80px repeat;transform:rotate(14deg)} /* Arcade: scanlines + a CRT glow rising from the floor */ [data-theme="pixel"] .w4o-scan{inset:0;opacity:.5;background:repeating-linear-gradient(180deg,rgba(59,111,224,.10) 0 2px,transparent 2px 5px)} [data-theme="pixel"] .w4o-crt{left:0;right:0;bottom:0;height:36vh;background:linear-gradient(180deg,transparent,rgba(59,111,224,.28));animation:w4-gleam 5s ease-in-out infinite} /* Elements: the four powers hold the corners — each aura sits under its own medallion */ [data-theme="avatar"] .w4o-el1{left:-14vmin;bottom:-14vmin;width:52vmin;height:52vmin;border-radius:50%;background:radial-gradient(circle,rgba(95,184,122,.32),transparent 62%);animation:w4-gleam 6s ease-in-out infinite} [data-theme="avatar"] .w4o-el2{right:-14vmin;bottom:-14vmin;width:52vmin;height:52vmin;border-radius:50%;background:radial-gradient(circle,rgba(243,161,60,.35),transparent 62%);animation:w4-gleam 7s ease-in-out infinite} [data-theme="avatar"] .w4o-el3{right:-12vmin;top:-12vmin;width:44vmin;height:44vmin;border-radius:50%;background:radial-gradient(circle,rgba(47,167,216,.34),transparent 62%);animation:w4-gleam 8s ease-in-out infinite} [data-theme="avatar"] .w4o-el4{left:-12vmin;top:-12vmin;width:44vmin;height:44vmin;border-radius:50%;background:radial-gradient(circle,rgba(174,221,228,.32),transparent 62%);animation:w4-gleam 9s ease-in-out infinite} /* Spotlight's room: full-height proscenium curtains frame the stage */ [data-theme="marquee"] .w4o-drape{top:0;bottom:0;width:7vw;min-width:40px;opacity:.34; background:repeating-linear-gradient(90deg,rgba(222,142,155,.85) 0 12px,rgba(240,182,191,.85) 12px 22px,rgba(232,163,174,.85) 22px 30px)} [data-theme="marquee"] .w4o-drapeL{left:0;border-right:3px solid rgba(240,196,106,.7);box-shadow:8px 0 20px rgba(90,40,48,.12)} [data-theme="marquee"] .w4o-drapeR{right:0;border-left:3px solid rgba(240,196,106,.7);box-shadow:-8px 0 20px rgba(90,40,48,.12)} /* dark mode: the spotlights actually SHINE — bright beams, glowing bulbs, a lit floor pool */ [data-theme="marquee"][data-mode="dusk"] .w4o-swing{filter:brightness(1.9) drop-shadow(0 0 30px rgba(246,220,138,.85));mix-blend-mode:screen} [data-theme="marquee"][data-mode="dusk"] .w4o-bulbs{filter:brightness(1.6) drop-shadow(0 0 12px rgba(246,220,138,.95))} [data-theme="marquee"][data-mode="dusk"] .w4o-stagefloor{background:linear-gradient(180deg,transparent,rgba(246,220,138,.22))} /* ===== Lab, upgraded: pouring, bubbling, reacting ========================================= */ @keyframes w4-pourflow{to{stroke-dashoffset:-22}} @keyframes w4-liquid{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(50deg)}} @keyframes w4-react{0%,64%{opacity:0;transform:scale(.4)}72%{opacity:1;transform:scale(1.25)}84%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}} @keyframes w4-fizz{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-46px);opacity:0}} [data-theme="science"] .w4o-pour{animation:w4-liquid 12s ease-in-out infinite} [data-theme="science"] .w4o-pour .stream{stroke-dasharray:5 5;animation:w4-pourflow .5s linear infinite} [data-theme="science"] .w4o-beaker{bottom:-4px} [data-theme="science"] .w4o-beaker .fizz circle{animation:w4-fizz 2.2s ease-out infinite} [data-theme="science"] .w4o-beaker .fizz circle:nth-child(2){animation-delay:-.7s} [data-theme="science"] .w4o-beaker .fizz circle:nth-child(3){animation-delay:-1.4s} [data-theme="science"] .w4o-react{animation:w4-react 5s ease-out infinite} /* ===== Galaxy = Van Gogh's Starry Night ==================================================== The sky rolls: the double swirl drifts and breathes, stars burn inside painted halos, the crescent blazes top-right, the cypress flames on the left, hills hold the horizon. Light mode is the painting by day; DARK MODE IS THE PAINTING — everything turns up. */ @keyframes w4-vgroll{0%,100%{transform:translateX(0) rotate(-1.2deg)}50%{transform:translateX(3vw) rotate(1.2deg)}} @keyframes w4-vgflame{0%,100%{transform:skewX(0) scaleY(1)}50%{transform:skewX(2.2deg) scaleY(1.015)}} @keyframes w4-vgburn{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}} [data-theme="aurora"] .w4o-vgswirl{opacity:.5;animation:w4-vgroll 22s ease-in-out infinite} [data-theme="aurora"] .w4o-vgswirl2{opacity:.38} [data-theme="aurora"] .w4o-vgmoon{opacity:.75;animation:w4-gleam 9s ease-in-out infinite} [data-theme="aurora"] .w4o-vghills{left:0;right:0;bottom:0;height:12vh;opacity:.4} [data-theme="aurora"] .w4o-vgstar{border-radius:50%;animation-name:w4-vgburn;animation-timing-function:ease-in-out;animation-iteration-count:infinite; background:radial-gradient(circle,#FFF8D8 0 26%,#F5D76E 52%,rgba(245,215,110,.25) 72%,transparent 78%); box-shadow:0 0 10px 3px rgba(245,215,110,.35)} /* night: the real thing */ [data-theme="aurora"][data-mode="dusk"] .w4o-vgswirl{opacity:.95} [data-theme="aurora"][data-mode="dusk"] .w4o-vgswirl2{opacity:.75} [data-theme="aurora"][data-mode="dusk"] .w4o-vgmoon{opacity:1;filter:drop-shadow(0 0 26px rgba(240,201,74,.55))} [data-theme="aurora"][data-mode="dusk"] .w4o-vghills{opacity:.85} [data-theme="aurora"][data-mode="dusk"] .w4o-vgstar{box-shadow:0 0 16px 6px rgba(245,215,110,.6),0 0 40px 14px rgba(125,140,240,.3)} [data-theme="aurora"][data-mode="dusk"] .w4-bg{background:radial-gradient(120% 100% at 70% 0%,#25316B 0%,#1B2450 52%,#131A38 100%)} /* ===== Arcade: tetromino rain + the pixel hero ============================================ */ @keyframes w4-tetfall{0%{transform:translateY(-16vh) rotate(0)}100%{transform:translateY(116vh) rotate(180deg)}} [data-theme="pixel"] .w4o-tet{top:0;animation:w4-tetfall linear infinite} [data-theme="pixel"] .w4o-tstack{left:0;right:0;bottom:0;height:54px;opacity:.5} @keyframes w4-pixhop{0%,100%{transform:translateY(0) scaleY(.9)}32%{transform:translateY(-9vh) scaleY(1.06)}52%{transform:translateY(-10vh) scaleY(1)}} [data-theme="pixel"] .w4o-hopper{animation:w4-pixhop 1.15s ease-in-out infinite;transform-origin:50% 100%} /* ===== Dino Era: the full cast, and a Pandora night ======================================= */ /* the resident giant: parked in the right gutter, neck rising clear of the cards */ [data-theme="dino"] .w4-brachstill{right:-7vw;bottom:-6px;width:min(38vw,470px);aspect-ratio:300/210;opacity:.5;transform:scaleX(-1)} [data-theme="dino"] .w4-ptero{aspect-ratio:2/1} @keyframes w4-flap{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-18deg)}} @keyframes w4-flapR{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(18deg)}} [data-theme="dino"] .w4-ptero .wingL{transform-box:fill-box;transform-origin:right center;animation:w4-flap .9s ease-in-out infinite} [data-theme="dino"] .w4-ptero .wingR{transform-box:fill-box;transform-origin:left center;animation:w4-flapR .9s ease-in-out infinite} @keyframes w4-raptorbob{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-7px) rotate(1.8deg)}} @keyframes w4-legkick{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-24deg)}} @keyframes w4-legkickB{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(20deg)}} [data-theme="dino"] .w4-raptor .rap{transform-box:fill-box;transform-origin:center;animation:w4-raptorbob .42s ease-in-out infinite} [data-theme="dino"] .w4-raptor .legA{transform-box:fill-box;transform-origin:top center;animation:w4-legkick .42s ease-in-out infinite} [data-theme="dino"] .w4-raptor .legB{transform-box:fill-box;transform-origin:top center;animation:w4-legkickB .42s ease-in-out infinite} [data-theme="dino"] .w4-spore{bottom:-10px;border-radius:50%;background:#BFE8D0;opacity:.3;animation:w4-motes linear infinite} /* ---- night on Pandora ---- */ [data-theme="dino"][data-mode="dusk"] .w4-bg{background:radial-gradient(130% 110% at 30% 0%,#12343A 0%,#0C2430 48%,#071820 100%)} [data-theme="dino"][data-mode="dusk"] .w4-haze{background:radial-gradient(120% 80% at 50% 110%,rgba(64,224,208,.20),transparent 60%),linear-gradient(180deg,rgba(120,80,220,.12),transparent 40%)} [data-theme="dino"][data-mode="dusk"] .w4-fern{opacity:.95;filter:brightness(1.7) saturate(1.6) hue-rotate(95deg) drop-shadow(0 0 16px rgba(111,231,220,.55))} [data-theme="dino"][data-mode="dusk"] .w4-tree{filter:brightness(1.4) saturate(1.4) hue-rotate(80deg) drop-shadow(0 0 14px rgba(111,231,220,.35))} [data-theme="dino"][data-mode="dusk"] .w4-brachio, [data-theme="dino"][data-mode="dusk"] .w4-brachstill{filter:brightness(1.3) drop-shadow(0 0 20px rgba(111,231,220,.45))} [data-theme="dino"][data-mode="dusk"] .w4-raptor{filter:brightness(1.35) drop-shadow(0 0 10px rgba(111,231,220,.5))} [data-theme="dino"][data-mode="dusk"] .w4-ptero{filter:brightness(1.4) drop-shadow(0 0 12px rgba(199,125,255,.55))} [data-theme="dino"][data-mode="dusk"] .w4-spore{opacity:1;background:radial-gradient(circle,#D8FFF4 0 30%,#6FE7DC 60%,transparent 75%); box-shadow:0 0 12px 4px rgba(111,231,220,.65),0 0 30px 10px rgba(199,125,255,.25)} [data-theme="dino"][data-mode="dusk"] .w4-spore:nth-of-type(3n){background:radial-gradient(circle,#F2E4FF 0 30%,#C77DFF 60%,transparent 75%); box-shadow:0 0 12px 4px rgba(199,125,255,.6),0 0 30px 10px rgba(111,231,220,.25)} /* ===== the night hive shimmers: a real close-packed lattice, one cell lighting after another in a travelling wave. Day mode never mounts the cost (display:none). ===== */ [data-theme="spellbound"] .w4-hexcell{display:none} @keyframes w4-hexglow{0%,80%,100%{opacity:.05}86%{opacity:.95}92%{opacity:.3}} [data-theme="spellbound"][data-mode="dusk"] .w4-hexcell{display:block;opacity:.05; animation:w4-hexglow 6.8s linear infinite;filter:drop-shadow(0 0 9px rgba(255,211,77,.75))} [data-theme="spellbound"][data-mode="dusk"] .w4o-comb{opacity:.22} /* THE SAME TRAVELLING WAVE IN DAYLIGHT, retuned rather than reused. The night values do not transfer: a cell flashing to .95 with a gold drop-shadow is a glow against black and a smear against pale lavender, and the shadow is the expensive part — it is a filter on up to 360 elements, which is exactly why day mode originally skipped the whole thing. So daylight gets the wave with no filter at all, and a peak of .40 instead of .95 — enough that the lattice reads as lit honey, not enough to pull the eye off a word. The lattice is already in the DOM in every mode; only the animation was ever being saved. */ @keyframes w4-hexglow-day{0%,80%,100%{opacity:.05}86%{opacity:.40}92%{opacity:.15}} [data-theme="spellbound"][data-mode="light"] .w4-hexcell{display:block;opacity:.05; animation:w4-hexglow-day 6.8s linear infinite} [data-theme="spellbound"][data-mode="light"] .w4o-comb{opacity:.20} /* WHITE MODE KEEPS NO LATTICE AT ALL, which is where it already was — and I put it back after measuring, not before. White sets opacity:.13 on the whole .w4-bg layer, and a group opacity forces its children into an offscreen buffer; showing 308 hexagons under that costs ~17fps whether they animate or not. Turning the animation off recovered almost none of it, because the cost is the compositing, not the wave. Measured, three samples each: light 61fps -> 58 with the wave (cheap: no group opacity) white 56fps -> 39 with the lattice (still 39 with animation:none) White is the mode a parent picks to make the app quiet. It stays quiet. */ [data-theme="spellbound"][data-mode="white"] .w4o-comb{opacity:.13} @media(prefers-reduced-motion:reduce){ [data-theme="spellbound"] .w4-hexcell{animation:none}} /* ===== the Milky Way: corner to corner through the centre ================================= */ [data-theme="aurora"] .w4o-milkyway{left:50%;top:50%;width:220vmax;height:26vmin;border-radius:50%; background:radial-gradient(55% 100% at 50% 50%, rgba(223,233,248,.10), transparent 74%); filter:blur(9px);opacity:.7} [data-theme="aurora"] .w4o-mwstar{border-radius:50%;background:#FFF6E0;opacity:.6;animation-name:w4-twk;animation-timing-function:ease-in-out;animation-iteration-count:infinite} [data-theme="aurora"][data-mode="dusk"] .w4o-milkyway{opacity:1} [data-theme="aurora"][data-mode="dusk"] .w4o-mwstar{opacity:.95;box-shadow:0 0 7px 2px rgba(255,246,224,.55)} [data-theme="aurora"] .w4o-mwbright{box-shadow:0 0 8px 3px rgba(255,246,224,.5)} [data-theme="aurora"][data-mode="dusk"] .w4o-mwbright{box-shadow:0 0 12px 4px rgba(255,246,224,.75),0 0 30px 10px rgba(159,184,232,.3)} /* ===== Origami: the sheet that folds itself into a crane ================================== */ [data-theme="origami"] .w4o-foldstage{right:5vw;bottom:8vh;width:min(24vw,260px);aspect-ratio:1;perspective:900px} [data-theme="origami"] .fs-fold{position:absolute;inset:12%;transform-style:preserve-3d;animation:w4-fspack 14s ease-in-out infinite} [data-theme="origami"] .fs-sheet{position:absolute;inset:0;background:linear-gradient(135deg,#F8F0DF,#EFE2C8);box-shadow:0 6px 18px rgba(90,60,30,.18);border-radius:2px} [data-theme="origami"] .fs-corner{position:absolute;width:50%;height:50%;background:linear-gradient(135deg,#F2E7D0,#E8D8BA);backface-visibility:visible} [data-theme="origami"] .fs-tl{left:0;top:0;clip-path:polygon(0 0,100% 0,0 100%);transform-origin:50% 50%;animation:w4-ftl 14s ease-in-out infinite} [data-theme="origami"] .fs-tr{right:0;top:0;clip-path:polygon(0 0,100% 0,100% 100%);transform-origin:50% 50%;animation:w4-ftr 14s ease-in-out infinite} [data-theme="origami"] .fs-bl{left:0;bottom:0;clip-path:polygon(0 0,0 100%,100% 100%);transform-origin:50% 50%;animation:w4-fbl 14s ease-in-out infinite} [data-theme="origami"] .fs-br{right:0;bottom:0;clip-path:polygon(100% 0,100% 100%,0 100%);transform-origin:50% 50%;animation:w4-fbr 14s ease-in-out infinite} @keyframes w4-ftl{0%,6%{transform:rotate3d(-1,1,0,0deg)}12%,80%{transform:rotate3d(-1,1,0,-179deg)}88%,100%{transform:rotate3d(-1,1,0,0deg)}} @keyframes w4-ftr{0%,13%{transform:rotate3d(1,1,0,0deg)}19%,80%{transform:rotate3d(1,1,0,179deg)}88%,100%{transform:rotate3d(1,1,0,0deg)}} @keyframes w4-fbl{0%,20%{transform:rotate3d(1,1,0,0deg)}26%,80%{transform:rotate3d(1,1,0,-179deg)}88%,100%{transform:rotate3d(1,1,0,0deg)}} @keyframes w4-fbr{0%,27%{transform:rotate3d(-1,1,0,0deg)}33%,80%{transform:rotate3d(-1,1,0,179deg)}88%,100%{transform:rotate3d(-1,1,0,0deg)}} @keyframes w4-fspack{0%,34%{transform:rotateZ(0) scale(1);opacity:1} 42%{transform:rotateZ(45deg) scale(.5);opacity:1}46%{transform:rotateZ(45deg) scale(.42);opacity:0} 82%{transform:rotateZ(45deg) scale(.42);opacity:0}86%{transform:rotateZ(10deg) scale(.9);opacity:1}92%,100%{transform:rotateZ(0) scale(1);opacity:1}} [data-theme="origami"] .fs-crane{position:absolute;inset:6%;opacity:0;animation:w4-fscrane 14s ease-in-out infinite} @keyframes w4-fscrane{0%,42%{opacity:0;transform:scale(.3) translateY(8%)} 48%{opacity:1;transform:scale(1.06) translateY(-2%)}52%{transform:scale(1) translateY(0)} 60%{transform:scale(1) translateY(-5%)}68%{transform:scale(1) translateY(0)}76%{transform:scale(1) translateY(-4%)} 80%{opacity:1;transform:scale(1) translateY(0)}86%,100%{opacity:0;transform:scale(.4) translateY(6%)}} @keyframes w4-cflapL{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-26deg)}} @keyframes w4-cflapR{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(26deg)}} [data-theme="origami"] .fs-crane .cwL{transform-box:fill-box;transform-origin:right bottom;animation:w4-cflapL 1s ease-in-out infinite} [data-theme="origami"] .fs-crane .cwR{transform-box:fill-box;transform-origin:left bottom;animation:w4-cflapR 1s ease-in-out infinite} /* falling paper squares fold over in the air as they drift down */ @keyframes w4-flippaper{0%{transform:rotateY(0) rotateX(8deg)}50%{transform:rotateY(178deg) rotateX(-8deg);filter:brightness(.86)}100%{transform:rotateY(356deg) rotateX(8deg)}} [data-theme="origami"] .w4o-flippaper{animation:w4-flippaper 2.6s ease-in-out infinite;box-shadow:0 2px 5px rgba(90,60,30,.2)} /* night: paper lanterns — the fold glows warm from within */ [data-theme="origami"][data-mode="dusk"] .fs-sheet, [data-theme="origami"][data-mode="dusk"] .fs-corner{filter:brightness(1.08);box-shadow:0 0 22px rgba(240,180,90,.4)} [data-theme="origami"][data-mode="dusk"] .fs-crane{filter:drop-shadow(0 0 16px rgba(240,180,90,.55))} [data-theme="origami"][data-mode="dusk"] .w4o-flippaper{box-shadow:0 0 10px rgba(240,180,90,.45)} /* ================= Elements: the four-nations sky ========================================== Air holds the top-left, water the top-right, earth the bottom-left, fire the bottom-right. Two bending streams arc corner to corner, earth islands hover mid-air, a koi pair circles its pond, and at dusk the whole world crosses into the spirit realm. */ [data-theme="avatar"] .w4o-elmed{width:min(11vw,104px);aspect-ratio:1;opacity:.8} [data-theme="avatar"] .w4o-elmed .med-ring{transform-box:fill-box;transform-origin:center;animation:w4-spin4 26s linear infinite} [data-theme="avatar"] .med-air .med-ring{animation-duration:19s} [data-theme="avatar"] .med-earth .med-ring{animation-direction:reverse} [data-theme="avatar"] .med-water .med-ring{animation-duration:31s;animation-direction:reverse} [data-theme="avatar"] .w4o-bend{inset:0} @keyframes w4-bendflow{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-44}} [data-theme="avatar"] .bend-flow{stroke-dasharray:5 6;stroke-linecap:round;animation:w4-bendflow 3.2s linear infinite} [data-theme="avatar"] .bend-lag{stroke-dasharray:3 8;animation-duration:4.1s} @keyframes w4-islefloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}} [data-theme="avatar"] .w4o-isle{animation:w4-islefloat 7s ease-in-out infinite;filter:drop-shadow(0 12px 10px rgba(40,30,10,.16))} @keyframes w4-peb{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} [data-theme="avatar"] .isle-peb{transform-box:fill-box;animation:w4-peb 3.4s ease-in-out infinite} [data-theme="avatar"] .isle-peb2{transform-box:fill-box;animation:w4-peb 4.2s ease-in-out infinite reverse} [data-theme="avatar"] .w4o-ember{background:radial-gradient(circle,#FFE07A 0 30%,#F3A13C 60%,transparent 75%)} [data-theme="avatar"] .w4o-wisp{display:none;background:radial-gradient(circle,#D8FFF4 0 28%,#6FE7DC 58%,transparent 75%)} [data-theme="avatar"] .w4o-pond{left:18vw;bottom:2vh;width:16vmin;height:16vmin;border-radius:50%;opacity:.85; background:radial-gradient(circle at 40% 35%,rgba(143,208,236,.55),rgba(46,143,184,.4) 62%,rgba(38,64,78,.45)); box-shadow:inset 0 0 18px rgba(20,60,80,.35)} [data-theme="avatar"] .w4o-koiring{position:absolute;inset:9%;animation:w4-spin4 15s linear infinite} [data-theme="avatar"] .w4o-temple{right:15vw;bottom:0;width:min(11vw,108px);aspect-ratio:90/130;opacity:.5} [data-theme="avatar"] .temple-win{opacity:0} /* dusk: the spirit world opens — teal night, every element burning with its own light */ [data-theme="avatar"][data-mode="dusk"] .w4-bg{background:radial-gradient(130% 110% at 60% 0%,#123A44 0%,#0C2A34 50%,#071C24 100%)} [data-theme="avatar"][data-mode="dusk"] .w4o-elmed{opacity:1} [data-theme="avatar"][data-mode="dusk"] .med-air{filter:drop-shadow(0 0 14px rgba(174,221,228,.75))} [data-theme="avatar"][data-mode="dusk"] .med-water{filter:drop-shadow(0 0 14px rgba(63,169,216,.8))} [data-theme="avatar"][data-mode="dusk"] .med-earth{filter:drop-shadow(0 0 14px rgba(95,184,122,.75))} [data-theme="avatar"][data-mode="dusk"] .med-fire{filter:drop-shadow(0 0 16px rgba(243,161,60,.85))} [data-theme="avatar"][data-mode="dusk"] .w4o-bend{mix-blend-mode:screen;filter:brightness(1.25) drop-shadow(0 0 5px rgba(111,231,220,.25))} [data-theme="avatar"][data-mode="dusk"] .w4o-bendwater path{stroke:#9BE8E0} [data-theme="avatar"][data-mode="dusk"] .w4o-isle{filter:brightness(1.15) drop-shadow(0 0 14px rgba(111,231,220,.4))} [data-theme="avatar"][data-mode="dusk"] .w4o-ember{box-shadow:0 0 10px 3px rgba(243,161,60,.55)} [data-theme="avatar"][data-mode="dusk"] .w4o-wisp{display:block;box-shadow:0 0 12px 4px rgba(111,231,220,.5)} [data-theme="avatar"][data-mode="dusk"] .w4o-pond{opacity:1; background:radial-gradient(circle at 40% 35%,rgba(143,236,228,.6),rgba(46,143,184,.5) 62%,rgba(18,44,58,.6)); box-shadow:0 0 26px 8px rgba(111,231,220,.35),inset 0 0 18px rgba(20,60,80,.35)} [data-theme="avatar"][data-mode="dusk"] .w4o-koiring{filter:drop-shadow(0 0 8px rgba(245,242,232,.55))} [data-theme="avatar"][data-mode="dusk"] .w4o-temple{opacity:.8;filter:brightness(.72)} [data-theme="avatar"][data-mode="dusk"] .temple-win{opacity:1;filter:drop-shadow(0 0 6px rgba(246,220,138,.9));animation:w4-gleam 4s ease-in-out infinite} [data-theme="avatar"][data-mode="dusk"] .w4o-bendfire{filter:brightness(1.15) drop-shadow(0 0 5px rgba(243,161,60,.3))}