/* The worlds: each one's colours, fonts and corners (CSS variables used by app.css), plus the styles for its own
   decorations, title card and win animation. The JavaScript for each world is in js/worlds/. */

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* =============================================================================================
   NOTEBOOK (paper.js): light = a notebook page, dark = a blueprint
   ============================================================================================= */
[data-world="paper"] {
    --block: repeating-linear-gradient(45deg, #2b2b33 0 2.2px, #f4eee0 2.2px 6px);
    --board-shadow: 4px 6px 0 rgba(43, 43, 51, .2);
    --sketch: 18px 6px 16px 8px / 8px 16px 6px 18px;
}
[data-world="paper"][data-theme="dark"] {
    --bg: #163a6b;
    --surface: rgba(18, 48, 92, .9);
    --surface-solid: #173f75;
    --surface-2: #1e4a85;
    --ink: #eef5ff;
    --muted: #a9c1e4;
    --line: rgba(220, 235, 255, .42);
    --hover: rgba(255, 255, 255, .08);
    --accent: #ffd166;
    --accent-2: #7fd1ff;
    --accent-ink: #10223f;
    --cell: #1b4580;
    --cell-ink: #ffffff;
    --block: repeating-linear-gradient(45deg, rgba(234, 242, 255, .85) 0 2px, #163a6b 2px 6px);
    --grid: #eaf2ff;
    --num: #bcd4f5;
    --word: #2a5a96;
    --sel: #b8892a;
    --solved: #1f5f7d;
    --wrong: #ff8a8a;
    --revealed: #7fd1ff;
    --good: #5fd08a;
    --shadow: 3px 4px 0 rgba(0, 0, 0, .3);
    --board-shadow: 4px 6px 0 rgba(0, 0, 0, .35);
    color-scheme: dark;
}
[data-world="paper"] .card, [data-world="paper"] .stat-tile, [data-world="paper"] .daily-chip, [data-world="paper"] .boss-chip, [data-world="paper"] .world-card { border-radius: var(--sketch); border-width: 2px; }
[data-world="paper"] .card { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
[data-world="paper"] .board-wrap { transform: rotate(-.6deg); }
[data-world="paper"] .hero-title, [data-world="paper"] .page-head h1 { text-decoration: underline wavy color-mix(in srgb, var(--accent) 60%, transparent) 2px; text-underline-offset: 8px; }
[data-world="paper"] .clue-bar { border-left-style: solid; background-image: linear-gradient(transparent 92%, color-mix(in srgb, var(--accent-2) 30%, transparent) 92%); }
[data-world="paper"] .cell.typed .ltr { animation: pen-in .2s ease-out; }
@keyframes pen-in { 0% { transform: rotate(-12deg) scale(.85); } 60% { transform: rotate(3deg) scale(1.05); } }
.paper-loops { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hl-loop { fill: none; stroke-width: .085; stroke-linecap: round; stroke-linejoin: round; opacity: .6; mix-blend-mode: multiply; }
[data-theme="dark"] .hl-loop { mix-blend-mode: screen; opacity: .5; }
.hl-loop.grow { stroke-dasharray: 1; animation: draw .65s ease-out backwards; }
.paper-stamp { position: absolute; top: 50%; left: 50%; z-index: 5; transform: translate(-50%, -50%) rotate(-14deg); pointer-events: none; }
.paper-stamp span {
    display: block;
    padding: 4px 22px;
    border: 7px double #d7263d;
    border-radius: 12px;
    color: #d7263d;
    font: 900 clamp(2rem, 9vw, 3.5rem)/1.15 "Nunito", sans-serif;
    letter-spacing: .08em;
    opacity: .82;
    mix-blend-mode: multiply;
    -webkit-mask: radial-gradient(circle at 20% 30%, transparent 0 3px, #000 4px) 0 0 / 23px 19px, linear-gradient(#000, #000);
    -webkit-mask-composite: source-in;
}
[data-theme="dark"] .paper-stamp span { border-color: #ffd166; color: #ffd166; mix-blend-mode: normal; }
.paper-stamp.slam { animation: slam .3s cubic-bezier(.6, 0, .9, .5) backwards; }
@keyframes slam { from { opacity: 0; transform: translate(-50%, -50%) rotate(-32deg) scale(3.2); } }
.paper-sticker {
    position: fixed;
    z-index: 830;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    color: #f6c533;
    font-size: 40px;
    text-shadow: 2px 2px 0 #b8860b;
    filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .3));
    transform: rotate(var(--r));
    pointer-events: none;
    animation: sticker .5s cubic-bezier(.2, 1.8, .4, 1) backwards;
}
@keyframes sticker { from { transform: rotate(var(--r)) scale(0); } }
.paper-plane { position: fixed; top: 0; left: 0; z-index: 830; display: flex; flex-direction: row-reverse; align-items: center; pointer-events: none; }
.paper-plane svg { width: 92px; filter: drop-shadow(3px 6px 4px rgba(0, 0, 0, .25)); }
.paper-banner {
    position: relative;
    margin-right: 34px;
    padding: 6px 16px;
    background: #fffdf7;
    color: #2b2b33;
    border: 2px solid #2b2b33;
    border-radius: 6px;
    font: 700 1.6rem "Caveat", cursive;
    white-space: nowrap;
    transform: rotate(-3deg);
    box-shadow: 3px 4px 0 rgba(0, 0, 0, .15);
}
.paper-banner::after { content: ""; position: absolute; top: 50%; right: -36px; width: 36px; border-top: 2px dashed #2b2b33; }
.tc-paper { background: rgba(43, 43, 51, .22); }
.tcp-card {
    position: relative;
    width: min(440px, 86vw);
    padding: 30px 32px 22px;
    background: repeating-linear-gradient(#fffef7 0 33px, rgba(80, 140, 210, .32) 33px 34px);
    background-color: #fffef7;
    color: #2b2b33;
    border-top: 6px solid #e2483c;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    transform: rotate(-3deg);
    animation: card-toss .65s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.tcp-card small { color: #e2483c; font: 900 .78rem "Nunito", sans-serif; letter-spacing: .18em; }
.tcp-card h2 { margin: 4px 0 2px; font: 700 3.2rem/1 "Caveat", cursive; }
.tcp-card p { margin: 0; font: 600 1.05rem "Nunito", sans-serif; color: #55525e; }
.tcp-clip { position: absolute; top: -30px; right: 44px; width: 28px; height: 76px; }
.tcp-underline { display: block; width: 80%; height: 16px; margin-top: 6px; }
.tcp-underline path { fill: none; stroke: #e2483c; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s ease .5s forwards; }
.tc.out .tcp-card { animation: card-out .45s ease-in forwards; }
@keyframes card-toss { from { transform: translateY(80vh) rotate(28deg); } }
@keyframes card-out { to { opacity: 0; transform: translateY(-90vh) rotate(-30deg); } }

/* =============================================================================================
   DEEP SPACE (space.js)
   ============================================================================================= */
[data-world="space"] {
    --bg: #05030f;
    --surface: rgba(14, 12, 38, .6);
    --surface-solid: #120f30;
    --surface-2: rgba(60, 50, 130, .35);
    --ink: #e8ecff;
    --muted: #9aa3d6;
    --line: rgba(130, 150, 255, .3);
    --hover: rgba(124, 92, 255, .16);
    --accent: #7c5cff;
    --accent-2: #29e6ff;
    --accent-ink: #ffffff;
    --cell: rgba(12, 16, 44, .88);
    --cell-ink: #e8f6ff;
    --block: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .75) 0 1px, transparent 1.6px) 0 0 / 14px 14px, radial-gradient(circle at 70% 75%, rgba(180, 200, 255, .55) 0 1px, transparent 1.6px) 0 0 / 19px 19px, #02010a;
    --grid: rgba(41, 230, 255, .32);
    --num: #7fdcff;
    --word: rgba(124, 92, 255, .36);
    --sel: rgba(41, 230, 255, .45);
    --solved: rgba(41, 230, 255, .14);
    --wrong: #ff4d8d;
    --revealed: #ffd166;
    --good: #29e6ff;
    --radius: 16px;
    --radius-sm: 10px;
    --cell-radius: 6px;
    --gap: 3px;
    --shadow: 0 0 0 1px rgba(124, 92, 255, .12), 0 10px 30px rgba(0, 0, 0, .45);
    --board-shadow: 0 0 40px rgba(41, 230, 255, .25), 0 0 0 1px rgba(41, 230, 255, .4);
    --font-body: "Exo 2", system-ui, sans-serif;
    --font-head: "Orbitron", sans-serif;
    --font-cell: "Orbitron", sans-serif;
    --head-scale: .72;
    --cell-weight: 700;
    color-scheme: dark;
}
[data-world="space"] .card-head h2, [data-world="space"] .game-titles h1, [data-world="space"] .hero-title, [data-world="space"] .page-head h1,
[data-world="space"] .clues h2, [data-world="space"] .res-title, [data-world="space"] .settings legend { text-transform: uppercase; letter-spacing: .06em; }
[data-world="space"] .hero-title, [data-world="space"] .res-title { text-shadow: 0 0 22px rgba(124, 92, 255, .7); }
[data-world="space"] .btn.primary, [data-world="space"] .modes a.active, [data-world="space"] .difficulty button.active, [data-world="space"] .opt input:checked + span {
    background: linear-gradient(135deg, #7c5cff, #29b8ff);
    border-color: transparent;
    box-shadow: 0 0 18px rgba(124, 92, 255, .55);
}
[data-world="space"] .board { overflow: hidden; }
[data-world="space"] .board::before {
    content: "";
    position: absolute;
    top: -40%;
    right: 0;
    left: 0;
    z-index: 3;
    height: 35%;
    background: linear-gradient(transparent, rgba(41, 230, 255, .1), transparent);
    animation: scan 5s linear infinite;
    pointer-events: none;
}
@keyframes scan { to { top: 110%; } }
[data-world="space"] .cell { font-size: clamp(1.3rem, 7vw, 2.2rem); box-shadow: inset 0 0 0 1px rgba(41, 230, 255, .16); }
[data-world="space"] .cell .ltr { text-shadow: 0 0 10px rgba(127, 251, 255, .85); }
[data-world="space"] .cell.selected { box-shadow: inset 0 0 0 2px #29e6ff, 0 0 18px rgba(41, 230, 255, .6); animation: sp-pulse 1.4s ease-in-out infinite; }
@keyframes sp-pulse { 50% { box-shadow: inset 0 0 0 2px #b48cff, 0 0 26px rgba(124, 92, 255, .7); } }
[data-world="space"] .cell.typed .ltr { animation: materialize .25s ease-out; }
@keyframes materialize { 0% { transform: scale(1.3); text-shadow: 0 0 24px #ffffff, 0 0 40px #7ffbff; } }
[data-world="space"] .board.solved { box-shadow: 0 0 60px rgba(41, 230, 255, .45), 0 0 0 2px rgba(41, 230, 255, .7); }
.board.sp-charge { animation: charge .65s ease-in forwards; }
@keyframes charge { to { filter: brightness(1.6); box-shadow: 0 0 90px rgba(41, 230, 255, .95), 0 0 0 3px #ffffff; } }
.space-const { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px rgba(127, 251, 255, .9)); }
.const-line { fill: none; stroke: rgba(150, 245, 255, .6); stroke-width: .028; stroke-linecap: round; stroke-linejoin: round; }
.const.grow .const-line { stroke-dasharray: 1; animation: draw .8s ease-out backwards; }
.const-star { fill: #ffffff; transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.const.grow .const-star { animation: star-pop .55s cubic-bezier(.2, 1.8, .4, 1) backwards, twinkle 2.6s ease-in-out infinite; }
@keyframes star-pop { from { transform: scale(0) rotate(-90deg); } }
@keyframes twinkle { 50% { transform: scale(.55) rotate(45deg); opacity: .7; } }
.tc-space { background: radial-gradient(circle, rgba(10, 8, 40, .5), rgba(2, 0, 10, .85)); }
.tcs-frame {
    position: relative;
    min-width: min(580px, 88vw);
    padding: 28px 40px 22px;
    background: rgba(8, 10, 35, .78);
    border: 1px solid rgba(41, 230, 255, .5);
    box-shadow: 0 0 44px rgba(41, 230, 255, .25), inset 0 0 34px rgba(41, 230, 255, .12);
    color: #e8f6ff;
    text-align: center;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
    animation: holo-in .55s cubic-bezier(.2, 1.2, .4, 1) backwards;
}
.tcs-c { position: absolute; width: 22px; height: 22px; border: 3px solid #29e6ff; }
.tcs-c.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.tcs-c.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.tcs-c.bl { bottom: 6px; left: 6px; border-top: 0; border-right: 0; }
.tcs-c.br { right: 6px; bottom: 6px; border-top: 0; border-left: 0; }
.tcs-line { color: #7ffbff; font: 700 .8rem "Orbitron", sans-serif; letter-spacing: .32em; animation: fade-up .4s ease .15s backwards; }
.tcs-line.dim { margin-top: 2px; color: rgba(127, 251, 255, .55); animation-delay: .9s; }
.tcs-title { margin: 12px 0 4px; color: #fff; font: 900 clamp(1.8rem, 6vw, 3.4rem) "Orbitron", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 18px #7c5cff, 0 0 40px rgba(41, 230, 255, .6); animation: glitch 1.4s steps(1) .25s; }
.tcs-sub { color: #b9c4ff; font: 600 1.05rem "Exo 2", sans-serif; }
.tcs-bar { width: 70%; height: 4px; margin: 16px auto 10px; background: rgba(41, 230, 255, .15); }
.tcs-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7c5cff, #29e6ff); box-shadow: 0 0 10px #29e6ff; animation: load 1.25s cubic-bezier(.3, .8, .4, 1) .3s forwards; }
.tcs-scan { position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 3px, rgba(41, 230, 255, .05) 3px 4px); pointer-events: none; }
.tc.out .tcs-frame { animation: holo-out .4s ease-in forwards; }
@keyframes holo-in { 0% { opacity: 0; transform: scale(1, .02); } 40% { opacity: 1; transform: scale(1.05, .02); } }
@keyframes holo-out { 50% { transform: scale(1.04, .02); } to { opacity: 0; transform: scale(0, .02); } }
@keyframes load { to { width: 100%; } }
@keyframes glitch {
    0% { transform: translate(3px, -1px); text-shadow: -3px 0 #ff4d8d, 3px 0 #29e6ff; }
    10% { transform: translate(-2px, 1px); clip-path: inset(10% 0 55% 0); }
    20% { transform: none; clip-path: none; text-shadow: 0 0 18px #7c5cff; }
    32% { transform: translate(-3px, 0); text-shadow: 3px 0 #ff4d8d, -3px 0 #29e6ff; clip-path: inset(60% 0 8% 0); }
    40% { transform: none; clip-path: none; text-shadow: 0 0 18px #7c5cff, 0 0 40px rgba(41, 230, 255, .6); }
}

/* =============================================================================================
   GARDEN (garden.js): day = a sunny meadow, night = moonlight and fireflies
   ============================================================================================= */
[data-world="garden"] {
    --bg: #eaf3e0;
    --surface: rgba(255, 253, 248, .88);
    --surface-solid: #fffdf8;
    --surface-2: #eef4e4;
    --ink: #263328;
    --muted: #63735f;
    --line: #c9d3bf;
    --hover: #e7eedd;
    --cell: #fffdf8;
    --cell-ink: #263328;
    --block: #3d5a40;
    --grid: #3d5a40;
    --num: #66756a;
    --accent: #d4607a;
    --accent-2: #4e8a4b;
    --accent-ink: #ffffff;
    --word: #fbe1e7;
    --sel: #f4aebf;
    --solved: #e3f0d8;
    --good: #4e8a4b;
    --radius: 22px;
    --radius-sm: 14px;
    --cell-radius: 6px;
    --shadow: 0 6px 18px rgba(61, 90, 64, .16);
    --board-shadow: 0 10px 28px rgba(61, 90, 64, .25);
    --font-head: "Fredoka", sans-serif;
    --font-cell: "Fredoka", sans-serif;
    --head-scale: .8;
    --cell-weight: 600;
    --vine: #4e8a4b;
    --leaf: #77b35f;
}
[data-world="garden"][data-theme="dark"] {
    --bg: #101a14;
    --surface: rgba(24, 36, 28, .86);
    --surface-solid: #1b261d;
    --surface-2: #223025;
    --ink: #e6eee2;
    --muted: #9aab9c;
    --line: #34453a;
    --hover: #223025;
    --cell: #1e2a20;
    --cell-ink: #e6eee2;
    --block: #090f0a;
    --grid: #090f0a;
    --num: #9aab9c;
    --accent: #ef89a2;
    --accent-ink: #121a14;
    --accent-2: #8fcb73;
    --word: #3a2731;
    --sel: #6b3346;
    --solved: #1f3324;
    --good: #8fcb73;
    --shadow: 0 6px 18px rgba(0, 0, 0, .4);
    --vine: #6fae63;
    --leaf: #8fcb73;
    color-scheme: dark;
}
[data-world="garden"] .logo-text::before { content: "\273F\00a0"; display: inline-block; color: var(--accent); animation: spin 12s linear infinite; }
[data-world="garden"] .board { overflow: visible; }
[data-world="garden"] .board > .cell.c-tl { border-top-left-radius: 10px; }
[data-world="garden"] .board > .cell.c-tr { border-top-right-radius: 10px; }
[data-world="garden"] .board > .cell.c-bl { border-bottom-left-radius: 10px; }
[data-world="garden"] .board > .cell.c-br { border-bottom-right-radius: 10px; }
[data-world="garden"] .cell.typed .ltr { animation: sprout-in .22s ease-out; }
@keyframes sprout-in { from { transform: translateY(4px) scale(.85); } }
svg.garden { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the vines and flowers grow over the squares, so while you play they're see-through; once the puzzle is solved the garden comes out in full */
svg.garden .g-vines { opacity: .42; transition: opacity .8s ease; }
svg.garden .g-flowers { opacity: .55; transition: opacity .8s ease; }
.board.solved svg.garden .g-vines, .board.solved svg.garden .g-flowers { opacity: 1; }
.vine-stem { fill: none; stroke: var(--vine); stroke-width: .045; stroke-linecap: round; }
.vine-tendril { fill: none; stroke: var(--vine); stroke-width: .02; stroke-linecap: round; }
.vine.grow .vine-stem, .vine-stem.big { stroke-dasharray: 1; animation: draw .6s ease-out backwards; }
.vine.grow .vine-tendril { stroke-dasharray: 1; animation: draw .5s ease-out .45s backwards; }
.vine.grow .vine-leaf { animation: fade-in .3s ease-out .45s backwards; }
@keyframes fade-in { from { opacity: 0; } }
.bud.pop { animation: sprout .45s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes sprout { from { transform: scale(0) translateY(.4px); } }
.bloom.pop .petal { animation: unfold .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.bloom.pop .flower-middle { animation: sprout .4s cubic-bezier(.3, 1.6, .5, 1) .15s backwards; }
.bloom.from-bud { animation: swell .35s ease-out; }
@keyframes unfold { from { opacity: 0; transform: scale(.1) rotate(-30deg); } }
@keyframes swell { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } }
.sway { animation: sway 3.4s ease-in-out infinite alternate; }
.sway.slow { animation-duration: 4.6s; }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.sparkle-burst { opacity: 0; animation: sparkle .9s ease-out backwards; }
@keyframes sparkle { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
.leaf-grow { animation: leaf-grow .45s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes leaf-grow { from { transform: scale(0); } }
.bloom.wave { animation: wave-pulse .8s cubic-bezier(.3, 1.6, .5, 1) var(--wave) both; }
@keyframes wave-pulse { 40% { transform: scale(1.45) rotate(25deg); } 100% { transform: scale(1.12); } }
.garden-sides { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.garden-sides svg.side { position: absolute; bottom: 0; overflow: visible; }
.garden-sides svg.left { left: 0; }
.garden-sides svg.right { right: 0; }
.garden-sides .vine-stem.big { animation-duration: 1.2s; }
.side-leaf { animation: fade-in .5s ease-out backwards; }
.side-bloom { animation: big-bloom .9s cubic-bezier(.3, 1.5, .5, 1) var(--wave) backwards; }
.side-bloom .petal, .side-bloom .flower-middle { animation: none !important; }
@keyframes big-bloom { from { transform: scale(0) rotate(-140deg); } }
.garden-sides.instant .vine-stem, .garden-sides.instant .side-leaf, .garden-sides.instant .side-bloom { animation: none; }
.garden-celebration { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; transition: opacity 1.4s ease; }
.garden-celebration.fade { opacity: 0; }
.falling-petal { position: absolute; top: -20px; width: var(--size, 10px); height: calc(var(--size, 10px) * 1.4); border-radius: 60% 0 60% 0; opacity: .9; animation: petal-fall linear both; }
@keyframes petal-fall {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(var(--drift), 27vh) rotate(140deg); }
    50% { transform: translate(0, 55vh) rotate(270deg); }
    75% { transform: translate(var(--drift), 82vh) rotate(400deg); }
    100% { transform: translate(0, 110vh) rotate(540deg); }
}
.critter-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.garden-celebration .critter, .critter-layer .critter { position: absolute; top: 0; left: 0; }
.critter.butterfly { width: 38px; height: 38px; }
.critter.bee { width: 26px; height: 26px; }
.critter.ladybug { width: 18px; height: 18px; }
.critter .wing { animation: flap .22s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleX(.25); } }
.critter.bee .wing { animation: buzz .06s ease-in-out infinite alternate; }
@keyframes buzz { to { opacity: .3; } }
.tc-garden { place-items: end center; background: linear-gradient(transparent 40%, rgba(38, 51, 40, .3)); overflow: hidden; }
.tcg-sign { position: relative; display: flex; flex-direction: column; align-items: center; animation: sign-up .75s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.tcg-board {
    position: relative;
    order: -1;
    min-width: min(460px, 84vw);
    padding: 20px 34px 18px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 24px), linear-gradient(#cf9a60, #a8743f);
    color: #fff8e8;
    border: 5px solid #7a5230;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .25);
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.tcg-board small { font: 700 .8rem "Nunito", sans-serif; letter-spacing: .2em; opacity: .9; }
.tcg-board h2 { margin: 4px 0; font: 700 2.6rem/1.05 "Fredoka", sans-serif; }
.tcg-board p { margin: 0; font: 700 1rem "Nunito", sans-serif; }
.tcg-post { width: 28px; height: 30vh; background: linear-gradient(90deg, #8a5d34, #b07a45 45%, #7a5230); border: 4px solid #6b4426; border-top: 0; }
.tcg-vine { position: absolute; bottom: 0; left: 50%; width: 60px; height: 30vh; margin-left: -30px; overflow: visible; }
.tcg-vine path { fill: none; stroke: #4e8a4b; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s ease .4s forwards; }
.tcg-flower { position: absolute; color: #e8798f; font-size: 30px; font-style: normal; text-shadow: none; animation: stamp-in .5s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.tcg-flower.f1 { top: -18px; left: -14px; animation-delay: .7s; }
.tcg-flower.f2 { top: -12px; right: -12px; color: #f2c94c; animation-delay: .85s; }
.tcg-flower.f3 { bottom: -20px; right: 30%; color: #b48ad8; animation-delay: 1s; }
.tc.out .tcg-sign { animation: sign-down .45s ease-in forwards; }
@keyframes sign-up { from { transform: translateY(85vh); } }
@keyframes sign-down { to { transform: translateY(95vh) rotate(4deg); } }

/* =============================================================================================
   NEON ARCADE (arcade.js)
   ============================================================================================= */
[data-world="arcade"] {
    --bg: #0b0221;
    --surface: rgba(16, 4, 40, .84);
    --surface-solid: #140534;
    --surface-2: #22094a;
    --ink: #f5f0ff;
    --muted: #b8a3e0;
    --line: #ff2a6d;
    --hover: rgba(255, 42, 109, .16);
    --accent: #ff2a6d;
    --accent-2: #05d9e8;
    --accent-ink: #0b0221;
    --cell: #0d0326;
    --cell-ink: #05d9e8;
    --block: repeating-linear-gradient(45deg, #ff2a6d 0 3px, #1a0838 3px 10px);
    --grid: #05d9e8;
    --num: #f9c80e;
    --word: #4a0d3d;
    --sel: #ff2a6d;
    --solved: #0e2a46;
    --wrong: #ff2a6d;
    --revealed: #f9c80e;
    --good: #3dfc8a;
    --radius: 0px;
    --radius-sm: 0px;
    --cell-radius: 0px;
    --gap: 3px;
    --shadow: 4px 4px 0 #05d9e8;
    --board-shadow: 7px 7px 0 #ff2a6d, 0 0 34px rgba(5, 217, 232, .35);
    --font-body: "VT323", monospace;
    --font-head: "Press Start 2P", monospace;
    --font-cell: "Press Start 2P", monospace;
    --head-scale: .5;
    color-scheme: dark;
}
[data-world="arcade"] body { font-size: 1.28rem; }
[data-world="arcade"] .crt {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 890;
    pointer-events: none;
    background: repeating-linear-gradient(rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45));
    animation: crt 7s steps(1) infinite;
}
@keyframes crt { 0%, 100% { opacity: 1; } 47% { opacity: .85; } 48% { opacity: 1; } 80% { opacity: .92; } }
[data-world="arcade"] .btn, [data-world="arcade"] .tool, [data-world="arcade"] .modes, [data-world="arcade"] .bar-group, [data-world="arcade"] .difficulty, [data-world="arcade"] .timer-wrap,
[data-world="arcade"] .helper-row button, [data-world="arcade"] .opt span, [data-world="arcade"] .streak-badge, [data-world="arcade"] .result-banner,
[data-world="arcade"] .res-card, [data-world="arcade"] .m-bubble, [data-world="arcade"] .toast, [data-world="arcade"] .modes a, [data-world="arcade"] .difficulty button,
[data-world="arcade"] .clue-bar, [data-world="arcade"] .cb-num, [data-world="arcade"] .wk-day i, [data-world="arcade"] .switch .track, [data-world="arcade"] .switch .track::after { border-radius: 0; }
[data-world="arcade"] .btn { border: 3px solid var(--accent-2); font: .62rem "Press Start 2P", monospace; text-transform: uppercase; }
[data-world="arcade"] .btn.primary { border-color: var(--accent); }
[data-world="arcade"] .modes a, [data-world="arcade"] .difficulty button, [data-world="arcade"] .helper-row button { font-size: 1.2rem; font-weight: 400; }
[data-world="arcade"] .card { border-width: 3px; }
[data-world="arcade"] .hero-title, [data-world="arcade"] .page-head h1, [data-world="arcade"] .game-titles h1 { line-height: 1.4; text-shadow: 3px 3px 0 #ff2a6d, -2px -2px 0 #05d9e8; }
[data-world="arcade"] .timer { font: 1rem "Press Start 2P", monospace; }
[data-world="arcade"] .cell { font-size: clamp(1rem, 5.4vw, 1.65rem); }
[data-world="arcade"] .cell .ltr { text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; }
[data-world="arcade"] .cell .num { font: .5rem "Press Start 2P", monospace; }
[data-world="arcade"] .cell.selected { animation: cursor 1s steps(2) infinite; }
[data-world="arcade"] .cell.selected .ltr { color: #0b0221; text-shadow: none; }
@keyframes cursor { 50% { background: #7a0f35; } }
[data-world="arcade"] .cell.typed .ltr { animation: pixel-pop .2s steps(3); }
@keyframes pixel-pop { from { transform: scale(2.3); } }
[data-world="arcade"] .cell.arc-done:not(.selected) { animation: rainbow 2s steps(6) infinite; }
@keyframes rainbow {
    0% { box-shadow: inset 0 0 0 2px #ff2a6d; }
    33% { box-shadow: inset 0 0 0 2px #05d9e8; }
    66% { box-shadow: inset 0 0 0 2px #f9c80e; }
    100% { box-shadow: inset 0 0 0 2px #ff2a6d; }
}
[data-world="arcade"] .board.solved .cell .ltr { color: #f9c80e; text-shadow: 2px 0 #ff2a6d, 0 0 10px rgba(249, 200, 14, .6); }
[data-world="arcade"] .clue-bar { color: #ffffff; }
[data-world="arcade"] .cb-num { font: .7rem "Press Start 2P", monospace; padding: 4px 6px; }
[data-world="arcade"] .streak-num { font: 1.3rem "Press Start 2P", monospace; }
[data-world="arcade"] .res-title { line-height: 1.3; text-shadow: 3px 3px 0 #ff2a6d; }
.arc-hud { display: flex; gap: 14px; color: #f9c80e; font: .55rem "Press Start 2P", monospace; white-space: nowrap; }
.arc-hud b { color: #ffffff; font-weight: 400; text-shadow: 0 0 8px #ff2a6d; }
.arc-pop { position: fixed; z-index: 830; color: #f9c80e; font: .95rem "Press Start 2P", monospace; text-shadow: 2px 2px 0 #ff2a6d; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); animation: arc-pop 1.1s steps(14) forwards; }
.arc-pop.combo { color: #3dfc8a; font-size: 1.15rem; }
@keyframes arc-pop { 0% { transform: translate(-50%, -50%) scale(.5); } 15% { transform: translate(-50%, -50%) scale(1.35); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.arc-clear { position: fixed; inset: 0; z-index: 830; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: rgba(11, 2, 33, .55); pointer-events: none; text-align: center; }
.arc-clear-t { color: #fff; font: clamp(1.5rem, 6vw, 3.6rem) "Press Start 2P", monospace; text-shadow: 4px 4px 0 #ff2a6d, -3px -3px 0 #05d9e8; animation: zoom .5s steps(6) backwards, hue 1.2s steps(4) infinite; }
@keyframes zoom { from { transform: scale(4); opacity: 0; } }
@keyframes hue { 50% { color: #f9c80e; } }
.arc-clear-s { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; color: #f9c80e; font: clamp(.75rem, 2.6vw, 1.25rem) "Press Start 2P", monospace; }
.arc-clear-s b { color: #fff; font-weight: 400; }
.arc-clear-k { color: #fff; font: .8rem "Press Start 2P", monospace; opacity: 0; }
.arc-clear.blink .arc-clear-k { opacity: 1; animation: blink .8s steps(2) infinite; }
.arc-clear.out { animation: fade-out .3s steps(3) forwards; }
@keyframes fade-out { to { opacity: 0; } }
.tc-arcade { background: rgba(0, 0, 0, .4); }
.tca-band {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 28px 16px;
    background: #0b0221;
    border-top: 5px solid #ff2a6d;
    border-bottom: 5px solid #05d9e8;
    text-align: center;
    animation: band-in .35s steps(5) backwards;
}
.tca-stage { color: #f9c80e; font: .85rem "Press Start 2P", monospace; }
.tca-title { color: #fff; font: clamp(1.1rem, 4vw, 2.2rem) "Press Start 2P", monospace; text-transform: uppercase; text-shadow: 3px 3px 0 #ff2a6d; }
.tca-ready { color: #05d9e8; font: clamp(1rem, 3vw, 1.6rem) "Press Start 2P", monospace; animation: blink .5s steps(2) infinite; }
.tca-ready.go { color: #3dfc8a; animation: go .5s steps(5) forwards; }
@keyframes go { to { transform: scale(2.4); opacity: 0; } }
@keyframes band-in { from { transform: scaleY(0); } }
.tc.out .tca-band { animation: band-out .3s steps(4) forwards; }
@keyframes band-out { to { transform: scaleY(0); } }

/* =============================================================================================
   SNOW DAY (snow.js): day = a bright winter valley, night = moonlight and the northern lights
   ============================================================================================= */
[data-world="snow"] {
    --bg: #e9f1f8;
    --surface: rgba(250, 253, 255, .88);
    --surface-solid: #f8fbfe;
    --surface-2: #e4eef7;
    --ink: #1d2c3f;
    --muted: #5b6f87;
    --line: #c6d6e6;
    --hover: #e0ebf5;
    --cell: #fbfdff;
    --cell-ink: #1d2c3f;
    --block: linear-gradient(160deg, #46698f, #22405f);
    --grid: #2c4a6b;
    --num: #56708e;
    --accent: #2f7fd0;
    --accent-2: #d6455d;
    --accent-ink: #ffffff;
    --word: #d6e9fb;
    --sel: #9ccbf2;
    --solved: #e2f1fc;
    --good: #2f9d7d;
    --wrong: #d6455d;
    --revealed: #a26ad0;
    --radius: 20px;
    --radius-sm: 12px;
    --cell-radius: 6px;
    --shadow: 0 8px 22px rgba(35, 64, 95, .14);
    --board-shadow: 0 12px 30px rgba(35, 64, 95, .28);
    --font-body: "Quicksand", system-ui, sans-serif;
    --font-head: "Comfortaa", sans-serif;          /* lighter than the old Sniglet */
    --font-cell: "Quicksand", sans-serif;
    --head-scale: .85;
    --cell-weight: 700;
}
[data-world="snow"][data-theme="dark"] {
    --bg: #0b1630;
    --surface: rgba(15, 29, 58, .86);
    --surface-solid: #11213f;
    --surface-2: #19305a;
    --ink: #e8f2ff;
    --muted: #9cb3d4;
    --line: #2b4470;
    --hover: #1a3156;
    --cell: #13274a;
    --cell-ink: #eef6ff;
    --block: linear-gradient(160deg, #060d1d, #0b1730);
    --grid: #050b18;
    --num: #8fb0dc;
    --accent: #7cc4ff;
    --accent-2: #ff7d8f;
    --accent-ink: #081428;
    --word: #1e3d66;
    --sel: #2f5f96;
    --solved: #173459;
    --good: #5fd4a8;
    --wrong: #ff7d8f;
    --revealed: #c79cff;
    --shadow: 0 8px 22px rgba(0, 0, 0, .4);
    --board-shadow: 0 0 30px rgba(124, 196, 255, .2), 0 12px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
}
[data-world="snow"] .logo-text::before { content: "\2744\00a0"; display: inline-block; color: var(--accent); animation: spin 14s linear infinite; }
[data-world="snow"] .board { overflow: visible; }
[data-world="snow"] .cell.typed .ltr { animation: frost-in .22s ease-out; }
@keyframes frost-in { 0% { transform: scale(1.25); text-shadow: 0 0 12px #bfe3ff; } }
/* finished words: an icy sheen over whatever colour the square has */
[data-world="snow"] .cell.sn-iced { background-image: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(170, 215, 250, .35) 60%, rgba(255, 255, 255, .5)); }
[data-world="snow"][data-theme="dark"] .cell.sn-iced { background-image: linear-gradient(160deg, rgba(140, 200, 255, .22), rgba(60, 110, 180, .12) 60%, rgba(160, 210, 255, .2)); }
.board.sn-frozen { box-shadow: 0 0 0 3px #cfe8fb, 0 0 34px rgba(140, 200, 250, .6), var(--board-shadow); }
.cell.sn-freeze { animation: sn-freeze .55s ease var(--fz, 0ms) both; }
@keyframes sn-freeze { 0% { box-shadow: inset 0 0 0 0 rgba(150, 210, 255, 0); } 50% { box-shadow: inset 0 0 26px rgba(220, 240, 255, 1); filter: brightness(1.3); } 100% { box-shadow: inset 0 0 18px rgba(130, 195, 245, .85); filter: brightness(1.08) saturate(.75); } }
svg.snow-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sn-cap { fill: #ffffff; filter: drop-shadow(0 .02px .02px rgba(60, 100, 140, .35)); }
[data-theme="dark"] .sn-cap { fill: #e6eef9; }
.sn-icicle { fill: rgba(205, 232, 255, .92); stroke: #ffffff; stroke-width: .008; transform-box: fill-box; transform-origin: top; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
[data-theme="dark"] .sn-icicle { fill: rgba(170, 210, 250, .8); }
.sn-crystal path { fill: none; stroke: #7dbbeb; stroke-width: .17; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .sn-crystal path { stroke: #d6ecff; }
[data-theme="dark"] .sn-crystal { filter: drop-shadow(0 0 .3px #9fd2ff); }
.sn-spin { transform-box: fill-box; transform-origin: center; animation: sn-turn 20s linear infinite; }
.sn-crystal.grow .sn-spin { animation: sn-spin-in .7s cubic-bezier(.2, 1.4, .4, 1) backwards, sn-turn 20s linear .7s infinite; }
.sn-crystal.grow path { stroke-dasharray: 1; animation: draw .6s ease-out backwards; }
@keyframes sn-spin-in { from { transform: rotate(-120deg) scale(.1); opacity: 0; } }
@keyframes sn-turn { to { transform: rotate(360deg); } }
.sn-frost { filter: drop-shadow(0 0 .015px #8cc8f5); }
.sn-frost-main { fill: none; stroke: #ffffff; stroke-width: .022; stroke-linecap: round; }
.sn-frost-feather { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: .012; stroke-linecap: round; }
[data-theme="light"] .sn-frost-main, [data-theme="light"] .sn-frost-feather { stroke: #7fbbe8; }
.sn-frost.grow .sn-frost-main { stroke-dasharray: 1; animation: draw .7s ease-out backwards; }
.sn-frost.grow .sn-frost-feather { stroke-dasharray: 1; animation: draw 1s ease-out .2s backwards; }
.sn-globe { position: fixed; z-index: 830; pointer-events: none; animation: sn-globe-in .5s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.sn-glass {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 32%, rgba(180, 220, 255, .1) 72%, rgba(255, 255, 255, .38));
    box-shadow: inset 0 0 50px rgba(255, 255, 255, .5), inset -20px -30px 60px rgba(120, 170, 220, .25), 0 24px 60px rgba(20, 50, 90, .35);
}
.sn-glass::after { content: ""; position: absolute; top: 9%; left: 16%; width: 28%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(6px); transform: rotate(-30deg); }
.sn-base {
    position: absolute;
    top: 86%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 76%;
    height: 22%;
    background: linear-gradient(#a0442e, #6e2a1c);
    border: 3px solid #4d1c12;
    border-radius: 14px 14px 26px 26px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 10px 24px rgba(0, 0, 0, .3);
    transform: translateX(-50%);
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
.sn-base span { color: #ffe6a8; font: 700 clamp(1rem, 3.4vw, 1.6rem) "Comfortaa", sans-serif; letter-spacing: .08em; text-shadow: 0 2px 0 #4d1c12; }
.sn-globe.pop { animation: sn-pop .45s ease-out forwards; }
@keyframes sn-globe-in { from { transform: scale(.2); opacity: 0; } }
@keyframes sn-pop { to { transform: scale(1.25); opacity: 0; filter: blur(6px); } }
.sn-snowman-wrap { position: fixed; z-index: 832; width: 150px; height: 210px; pointer-events: none; }
.sn-snowman { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(30, 60, 100, .25)); }
.sn-snowman g { transform-box: fill-box; transform-origin: center; }
.sn-snowman .snm-arm.l { transform-origin: right bottom; }
.sn-snowman .snm-arm.r { transform-origin: left bottom; }
.sn-snowman .snm-nose { transform-origin: left center; }
.sn-snowman .snm-b { transform-origin: center bottom; }
.tc-snow { background: radial-gradient(circle, rgba(225, 238, 250, .35), rgba(20, 40, 70, .45)); overflow: hidden; }
.tcw-flakes { position: absolute; inset: 0; pointer-events: none; }
.tcw-flake { position: absolute; top: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); animation: tcw-fall var(--t) linear var(--d) infinite; }
@keyframes tcw-fall { to { transform: translate(var(--x), 105vh); } }
.tcw-sign { position: relative; transform-origin: 50% -40vh; animation: tcw-swing 1.3s cubic-bezier(.3, 1.2, .4, 1) backwards; }
.tcw-rope { position: absolute; bottom: 100%; width: 4px; height: 60vh; background: repeating-linear-gradient(170deg, #b88a55 0 5px, #8a6236 5px 10px); }
.tcw-rope.l { left: 18%; }
.tcw-rope.r { right: 18%; }
.tcw-board {
    position: relative;
    min-width: min(460px, 84vw);
    padding: 26px 34px 22px;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 30px), linear-gradient(#9b6a3e, #7a4f2b);
    color: #fff8ec;
    border: 5px solid #5c3a1e;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .25);
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.tcw-cap {
    position: absolute;
    top: -18px;
    right: -10px;
    left: -10px;
    height: 30px;
    background: radial-gradient(circle at 10% 100%, #fff 0 22px, transparent 23px), radial-gradient(circle at 32% 100%, #fff 0 26px, transparent 27px), radial-gradient(circle at 56% 100%, #fff 0 20px, transparent 21px), radial-gradient(circle at 78% 100%, #fff 0 25px, transparent 26px), radial-gradient(circle at 95% 100%, #fff 0 18px, transparent 19px);
    filter: drop-shadow(0 3px 2px rgba(60, 90, 130, .3));
}
.tcw-board small { font: 700 .8rem "Quicksand", sans-serif; letter-spacing: .22em; opacity: .92; }
.tcw-board h2 { margin: 6px 0 4px; font: 700 2.4rem/1.1 "Comfortaa", sans-serif; }
.tcw-board p { margin: 0; font: 700 1rem "Quicksand", sans-serif; }
.tcw-icicles { position: absolute; top: 100%; right: 6%; left: 6%; height: 26px; background: linear-gradient(135deg, transparent 50%, rgba(220, 240, 255, .95) 50%) 0 0 / 22px 26px, linear-gradient(225deg, transparent 50%, rgba(220, 240, 255, .95) 50%) 11px 0 / 22px 26px; -webkit-mask: linear-gradient(#000 30%, transparent); mask: linear-gradient(#000 30%, transparent); }
.tc.out .tcw-sign { animation: tcw-up .45s ease-in forwards; }
@keyframes tcw-swing { 0% { transform: translateY(-110vh) rotate(0); } 55% { transform: translateY(0) rotate(7deg); } 72% { transform: rotate(-4deg); } 86% { transform: rotate(2deg); } 100% { transform: none; } }
@keyframes tcw-up { to { transform: translateY(-110vh) rotate(-6deg); } }

/* =============================================================================================
   ACORN WOODS (squirrel.js): day = a golden autumn afternoon, night = a harvest moon
   ============================================================================================= */
[data-world="squirrel"] {
    --bg: #f6ead6;
    --surface: rgba(255, 249, 238, .9);
    --surface-solid: #fff9ee;
    --surface-2: #f4e5cc;
    --ink: #3b2414;
    --muted: #7d5f45;
    --line: #e0c8a4;
    --hover: #f2e0c2;
    --cell: #fffaf1;
    --cell-ink: #3b2414;
    --block: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px), linear-gradient(#6e4728, #4e321d);
    --grid: #6b4426;
    --num: #8a6646;
    --accent: #d2601f;
    --accent-2: #b8862a;
    --accent-ink: #ffffff;
    --word: #fde3c0;
    --sel: #f5b475;
    --solved: #fbeccf;
    --good: #5f8f3a;
    --wrong: #c8321f;
    --revealed: #8f6bc4;
    --radius: 18px;
    --radius-sm: 12px;
    --cell-radius: 5px;
    --shadow: 0 8px 20px rgba(91, 52, 20, .16);
    --board-shadow: 0 0 0 5px #6b4426, 0 0 0 8px #4e321d, 0 14px 30px rgba(60, 30, 10, .35);
    --font-head: "Patua One", serif;
    --font-cell: "Patua One", serif;
    --head-scale: .85;
    --cell-weight: 400;
}
[data-world="squirrel"][data-theme="dark"] {
    --bg: #161011;
    --surface: rgba(36, 24, 20, .88);
    --surface-solid: #241814;
    --surface-2: #33231b;
    --ink: #f5e7d3;
    --muted: #b99c80;
    --line: #4a3426;
    --hover: #33231b;
    --cell: #2a1c16;
    --cell-ink: #f5e7d3;
    --block: repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 7px), linear-gradient(#1c120c, #0e0805);
    --grid: #120b07;
    --num: #b99c80;
    --accent: #f08a3c;
    --accent-2: #e0b04a;
    --accent-ink: #1b0f08;
    --word: #4a2d1a;
    --sel: #7d4520;
    --solved: #3a2817;
    --good: #9cc66a;
    --wrong: #ff7a5c;
    --revealed: #c3a0ff;
    --shadow: 0 8px 20px rgba(0, 0, 0, .45);
    --board-shadow: 0 0 0 5px #3a2416, 0 0 0 8px #24160d, 0 14px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
}
[data-world="squirrel"] .logo-text::before { content: "\1F330\00a0"; display: inline-block; animation: wobble 3s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(14deg); } }
[data-world="squirrel"] .board { overflow: visible; }
[data-world="squirrel"] .cell.typed .ltr { animation: carve-in .2s ease-out; }
@keyframes carve-in { from { transform: translateY(-4px) rotate(-6deg); } }
[data-world="squirrel"] .cell.sq-done { background-image: radial-gradient(circle at 70% 25%, rgba(255, 214, 120, .45), transparent 60%), linear-gradient(160deg, rgba(255, 200, 110, .28), rgba(230, 140, 50, .14)); }
[data-world="squirrel"][data-theme="dark"] .cell.sq-done { background-image: radial-gradient(circle at 70% 25%, rgba(240, 160, 60, .28), transparent 60%), linear-gradient(160deg, rgba(240, 150, 60, .16), rgba(120, 60, 20, .1)); }
.board.sq-solved { box-shadow: 0 0 0 5px #8a5a2a, 0 0 0 8px #e0b04a, 0 0 34px rgba(240, 180, 70, .55), 0 14px 30px rgba(60, 30, 10, .35); }
svg.sq-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sq-nut-in { filter: drop-shadow(.01px .02px .01px rgba(60, 30, 10, .35)); }
.sq-nut.drop .sq-nut-in { animation: nut-drop .6s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes nut-drop { 0% { transform: translateY(-.6px) rotate(-90deg); opacity: 0; } 55% { transform: translateY(.03px); opacity: 1; } 75% { transform: translateY(-.06px); } }
.sq-hud { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 1rem "Patua One", serif; white-space: nowrap; }
.sq-hud svg { width: 20px; height: 22px; }
.sq-hud.bump { animation: hud-bump .35s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes hud-bump { 40% { transform: scale(1.18) rotate(-4deg); } }
.sq-runner { position: fixed; top: 0; left: 0; z-index: 830; width: 48px; height: 32px; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(60, 30, 10, .3)); }
.sq-runner svg, .tcq-peek svg { width: 100%; height: 100%; overflow: visible; }
.sq-runner .sq-tail { transform-box: fill-box; transform-origin: right bottom; animation: tail-flick .25s ease-in-out infinite alternate; }
@keyframes tail-flick { to { transform: rotate(14deg); } }
.sq-hero { position: fixed; z-index: 832; width: 120px; height: 120px; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(60, 30, 10, .35)); }
.sq-hero svg, .sq-gold svg { width: 100%; height: 100%; overflow: visible; }
.sq-hero g { transform-box: fill-box; }
.sqh-tail { transform-origin: right bottom; }
.sqh-arms { transform-origin: center bottom; }
.sq-gold { position: fixed; z-index: 833; width: 44px; height: 53px; pointer-events: none; filter: drop-shadow(0 0 12px rgba(255, 210, 90, .8)); }
.sq-gold g { transform-box: fill-box; transform-origin: center; }
.tc-squirrel { background: radial-gradient(circle, rgba(255, 220, 160, .25), rgba(60, 30, 10, .45)); overflow: hidden; }
.tcq-leaves { position: absolute; inset: 0; pointer-events: none; }
.tcq-leaf { position: absolute; top: -20px; width: var(--s); height: calc(var(--s) * .6); border-radius: 60% 0 60% 0; background: var(--c); animation: tcq-fall var(--t) linear var(--d) infinite; }
@keyframes tcq-fall { 30% { transform: translate(var(--x), 30vh) rotate(160deg); } 100% { transform: translate(0, 110vh) rotate(520deg); } }
.tcq-wrap { position: relative; animation: tcq-roll-in 1s cubic-bezier(.2, .9, .3, 1) backwards; }
.tcq-slice {
    position: relative;
    z-index: 1;
    display: grid;
    place-content: center;
    width: min(360px, 78vw);
    aspect-ratio: 1;
    padding: 30px;
    background: radial-gradient(circle, #f2cf9a 0 6%, transparent 7%), repeating-radial-gradient(circle, #e9bf86 0 9px, #d6a466 10px 12px, #e3b67a 13px 20px), #e3b67a;
    color: #4a2a12;
    border: 12px solid #6b4426;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #8a5a30, inset 0 0 30px rgba(110, 60, 20, .35), 0 20px 44px rgba(40, 20, 5, .4);
    text-align: center;
    animation: tcq-spin 1s cubic-bezier(.2, .9, .3, 1) backwards;
}
.tcq-slice small { font: 900 .78rem "Nunito", sans-serif; letter-spacing: .18em; }
.tcq-slice h2 { margin: 6px 0 4px; font: 400 clamp(1.8rem, 6vw, 2.6rem)/1.05 "Patua One", serif; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.tcq-slice p { margin: 0; font: 700 .95rem "Nunito", sans-serif; }
.tcq-peek { position: absolute; top: -28px; left: 50%; z-index: 0; width: 84px; height: 56px; margin-left: -42px; animation: tcq-peek .5s cubic-bezier(.2, 1.6, .4, 1) .95s backwards; }
@keyframes tcq-roll-in { from { transform: translateX(-110vw); } }
@keyframes tcq-spin { from { transform: rotate(-720deg); } }
@keyframes tcq-peek { from { transform: translateY(60px); } }
.tc.out .tcq-wrap { animation: tcq-roll-out .5s cubic-bezier(.6, 0, .9, .6) forwards; }
.tc.out .tcq-slice { animation: tcq-spin-out .5s cubic-bezier(.6, 0, .9, .6) forwards; }
@keyframes tcq-roll-out { to { transform: translateX(110vw); } }
@keyframes tcq-spin-out { to { transform: rotate(540deg); } }

/* =============================================================================================
   LIGHT MODES for Deep Space (a sunlit solar system) and Neon Arcade (a pastel vaporwave day)
   ============================================================================================= */
[data-world="space"][data-theme="light"] {
    --bg: #f3ecf8;
    --surface: rgba(255, 252, 248, .78);
    --surface-solid: #fffaf3;
    --surface-2: rgba(255, 236, 214, .7);
    --ink: #2a1f4a;
    --muted: #6d628f;
    --line: rgba(124, 92, 255, .28);
    --hover: rgba(255, 170, 60, .16);
    --accent: #6b4cf0;
    --accent-2: #f08a1c;
    --accent-ink: #ffffff;
    --cell: rgba(255, 253, 248, .92);
    --cell-ink: #2a1f4a;
    --block: radial-gradient(circle at 35% 35%, #ffd27a 0 18%, transparent 19%), linear-gradient(135deg, #3a2a78, #1d1440);
    --grid: rgba(107, 76, 240, .45);
    --num: #8a6cf5;
    --word: #ffe3bf;
    --sel: #ffc078;
    --solved: #fff1d8;
    --wrong: #e2365c;
    --revealed: #6b4cf0;
    --good: #1f9e74;
    --shadow: 0 0 0 1px rgba(124, 92, 255, .1), 0 10px 30px rgba(120, 80, 40, .14);
    --board-shadow: 0 0 40px rgba(255, 180, 80, .45), 0 0 0 1px rgba(107, 76, 240, .4);
    color-scheme: light;
}
[data-world="space"][data-theme="light"] .cell .ltr { text-shadow: 0 0 8px rgba(255, 190, 90, .7); }
[data-world="space"][data-theme="light"] .cell.selected { box-shadow: inset 0 0 0 2px #f08a1c, 0 0 18px rgba(255, 170, 60, .6); animation: sun-pulse 1.4s ease-in-out infinite; }
@keyframes sun-pulse { 50% { box-shadow: inset 0 0 0 2px #6b4cf0, 0 0 26px rgba(255, 190, 90, .8); } }
[data-world="space"][data-theme="light"] .hero-title, [data-world="space"][data-theme="light"] .res-title { text-shadow: 0 0 22px rgba(255, 180, 80, .8); }
[data-world="space"][data-theme="light"] .btn.primary, [data-world="space"][data-theme="light"] .modes a.active, [data-world="space"][data-theme="light"] .difficulty button.active,
[data-world="space"][data-theme="light"] .opt input:checked + span { background: linear-gradient(135deg, #6b4cf0, #f08a1c); box-shadow: 0 0 18px rgba(255, 160, 60, .55); }
[data-world="space"][data-theme="light"] .board::before { background: linear-gradient(transparent, rgba(255, 200, 100, .18), transparent); }
[data-world="space"][data-theme="light"] .const-line { stroke: rgba(240, 138, 28, .75); }
[data-world="space"][data-theme="light"] .const-star { fill: #f08a1c; }
[data-world="space"][data-theme="light"] .space-const { filter: drop-shadow(0 0 3px rgba(255, 190, 90, .9)); }

[data-world="arcade"][data-theme="light"] {
    --bg: #ffeef9;
    --surface: rgba(255, 250, 255, .88);
    --surface-solid: #fff7fd;
    --surface-2: #f6e3ff;
    --ink: #2b0d47;
    --muted: #7b5a98;
    --line: #ff2a6d;
    --hover: rgba(255, 42, 109, .1);
    --accent: #ff2a6d;
    --accent-2: #009fb8;
    --accent-ink: #ffffff;
    --cell: #fffaff;
    --cell-ink: #2b0d47;
    --block: repeating-linear-gradient(45deg, #ff2a6d 0 3px, #ffe1f4 3px 10px);
    --grid: #00b3cc;
    --num: #c2408a;
    --word: #ffd9ec;
    --sel: #ff8fbf;
    --solved: #dff8ff;
    --wrong: #e0115a;
    --revealed: #8a4fd6;
    --good: #12a865;
    --shadow: 4px 4px 0 #00b3cc;
    --board-shadow: 7px 7px 0 #ff2a6d, 0 0 30px rgba(0, 179, 204, .3);
    color-scheme: light;
}
[data-world="arcade"][data-theme="light"] .crt { background: repeating-linear-gradient(rgba(120, 0, 120, .05) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(160, 60, 160, .18)); }
[data-world="arcade"][data-theme="light"] .cell .ltr { text-shadow: 2px 0 rgba(255, 42, 109, .55), -2px 0 rgba(0, 179, 204, .55); }
[data-world="arcade"][data-theme="light"] .cell.selected .ltr { color: #2b0d47; }
[data-world="arcade"][data-theme="light"] .board.solved .cell .ltr { color: #c2408a; text-shadow: 2px 0 #00b3cc; }
[data-world="arcade"][data-theme="light"] .clue-bar { color: var(--ink); }
[data-world="arcade"][data-theme="light"] .arc-hud { color: #c2408a; }
[data-world="arcade"][data-theme="light"] .arc-hud b { color: #2b0d47; text-shadow: none; }
@keyframes cursor-light { 50% { background: #ffc2dc; } }
[data-world="arcade"][data-theme="light"] .cell.selected { animation-name: cursor-light; }

/* =============================================================================================
   CORAL REEF (ocean.js): day = a sunlit reef, night = the glowing deep sea
   ============================================================================================= */
[data-world="ocean"] {
    --bg: #dff5fb;
    --surface: rgba(245, 253, 255, .86);
    --surface-solid: #f3fcff;
    --surface-2: #dcf2f8;
    --ink: #0d3049;
    --muted: #4f7690;
    --line: #b6dbe8;
    --hover: #d4eef6;
    --cell: #fbfeff;
    --cell-ink: #0d3049;
    --block: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25) 0 8%, transparent 9%) 0 0 / 18px 18px, linear-gradient(160deg, #157ab3, #0b4f80);
    --grid: #0e6aa0;
    --num: #3f7fa3;
    --accent: #ff6f61;
    --accent-2: #0fa3b8;
    --accent-ink: #ffffff;
    --word: #d3f1f7;
    --sel: #8fe0ee;
    --solved: #e3fbf3;
    --good: #19a77a;
    --wrong: #e2365c;
    --revealed: #8f6bd6;
    --radius: 22px;
    --radius-sm: 14px;
    --cell-radius: 8px;
    --shadow: 0 8px 22px rgba(11, 79, 128, .16);
    --board-shadow: 0 12px 30px rgba(11, 79, 128, .28);
    --font-head: "Baloo 2", sans-serif;
    --font-cell: "Baloo 2", sans-serif;
    --head-scale: .9;
    --cell-weight: 800;
}
[data-world="ocean"][data-theme="dark"] {
    --bg: #030b1f;
    --surface: rgba(6, 22, 48, .84);
    --surface-solid: #071a38;
    --surface-2: #0d2850;
    --ink: #dff6ff;
    --muted: #8db7d6;
    --line: #18406e;
    --hover: #0f2c56;
    --cell: #082041;
    --cell-ink: #dff6ff;
    --block: radial-gradient(circle at 30% 30%, rgba(120, 255, 220, .25) 0 6%, transparent 7%) 0 0 / 16px 16px, #010712;
    --grid: #01050f;
    --num: #6fd6ff;
    --accent: #5ef0d0;
    --accent-2: #b48cff;
    --accent-ink: #03141f;
    --word: #10345e;
    --sel: #17617a;
    --solved: #0b3340;
    --good: #5ef0d0;
    --wrong: #ff6f8f;
    --revealed: #b48cff;
    --shadow: 0 8px 22px rgba(0, 0, 0, .45);
    --board-shadow: 0 0 34px rgba(94, 240, 208, .22), 0 12px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
}
[data-world="ocean"] .logo-text::before { content: "\1F41A\00a0"; display: inline-block; animation: wobble 3s ease-in-out infinite; }
[data-world="ocean"] .board { overflow: visible; }
[data-world="ocean"] .cell.typed .ltr { animation: bob-in .22s ease-out; }
@keyframes bob-in { from { transform: translateY(4px) scale(.9); } }
[data-world="ocean"] .cell.oc-done { background-image: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .45) 35%, transparent 50%, rgba(255, 255, 255, .3) 65%, transparent 80%); background-size: 220% 100%; animation: caustic 4s linear infinite; }
[data-world="ocean"][data-theme="dark"] .cell.oc-done { background-image: linear-gradient(115deg, transparent 20%, rgba(94, 240, 208, .16) 35%, transparent 50%, rgba(180, 140, 255, .14) 65%, transparent 80%); }
@keyframes caustic { from { background-position: 0 0; } to { background-position: -220% 0; } }
.board.oc-solved { box-shadow: 0 0 0 3px #ffd166, 0 0 36px rgba(255, 209, 102, .55), var(--board-shadow); }
svg.oc-layer, svg.cd-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oc-item-in { transform-box: fill-box; transform-origin: center; filter: drop-shadow(.005px .012px .008px rgba(0, 40, 80, .3)); }
.oc-item.float .oc-item-in { animation: oc-float .7s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes oc-float { from { opacity: 0; transform: translateY(.4px) scale(.3); } }
.oc-runner { position: fixed; top: 0; left: 0; z-index: 830; width: 48px; height: 32px; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 40, 80, .3)); }
.oc-runner svg { width: 100%; height: 100%; overflow: visible; }
.oc-tail { transform-box: fill-box; transform-origin: right center; animation: oc-wag .18s ease-in-out infinite alternate; }
@keyframes oc-wag { to { transform: scaleY(.6); } }
.oc-chest { position: fixed; z-index: 832; width: 180px; height: 146px; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 30, 60, .4)); }
.oc-chest svg { width: 100%; height: 100%; overflow: visible; }
.oc-chest g { transform-box: fill-box; }
.oc-lid { transform-origin: left bottom; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.oc-chest.open .oc-lid { transform: rotate(-38deg) translate(-6px, -10px); }
.oc-chest-glow { opacity: 0; transform-origin: center; transition: opacity .3s; }
.oc-chest.open .oc-chest-glow { opacity: 1; animation: glow-pulse 1s ease-in-out infinite alternate; }
@keyframes glow-pulse { to { transform: scale(1.2); opacity: .6; } }
.oc-whale { position: fixed; left: 0; z-index: 829; width: 380px; height: 136px; pointer-events: none; }
.oc-whale svg { width: 100%; height: 100%; overflow: visible; }
.oc-spout { opacity: 0; animation: spout 3.6s ease-out forwards; }
@keyframes spout { 0%, 40% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }
.tc-ocean { background: radial-gradient(circle, rgba(140, 220, 240, .25), rgba(5, 40, 80, .5)); overflow: hidden; }
.tco-bubbles { position: absolute; inset: 0; pointer-events: none; }
.tco-bub { position: absolute; bottom: -24px; width: var(--s); height: var(--s); border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; animation: tco-rise var(--t) linear var(--d) infinite; }
@keyframes tco-rise { 50% { transform: translate(12px, -55vh); } 100% { transform: translate(-8px, -110vh); } }
.tco-scroll { position: relative; display: flex; flex-direction: column; align-items: center; animation: tco-drop .5s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.tco-roll { display: block; width: min(500px, 88vw); height: 22px; border-radius: 11px; background: linear-gradient(#a0612f, #6b3d1a 60%, #4a2810); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); z-index: 1; }
.tco-paper {
    width: min(460px, 82vw);
    padding: 22px 30px;
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .5), transparent 40%), linear-gradient(#f6e7c1, #ead3a0);
    color: #4a3214;
    text-align: center;
    overflow: hidden;
    transform-origin: top;
    animation: unroll .7s cubic-bezier(.3, 1.2, .5, 1) .35s backwards;
}
.tco-paper small { font: 800 .8rem "Nunito", sans-serif; letter-spacing: .2em; color: #8a5a22; }
.tco-paper h2 { margin: 6px 0 4px; font: 800 2.5rem/1.05 "Baloo 2", sans-serif; }
.tco-paper p { margin: 0; font: 700 1rem "Nunito", sans-serif; }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tco-drop { from { transform: translateY(-70vh); } }
.tc.out .tco-scroll { animation: tco-up .45s ease-in forwards; }
@keyframes tco-up { to { transform: translateY(-110vh); opacity: 0; } }

/* =============================================================================================
   CANDY HILLS (candy.js): day = a pastel candy valley, night = glowing candy lanterns
   ============================================================================================= */
[data-world="candy"] {
    --bg: #fff0f7;
    --surface: rgba(255, 251, 253, .9);
    --surface-solid: #fffafc;
    --surface-2: #ffe6f2;
    --ink: #4a1d3a;
    --muted: #8c5a78;
    --line: #f6c3dc;
    --hover: #ffe0ef;
    --cell: #fffdfe;
    --cell-ink: #4a1d3a;
    --block: repeating-linear-gradient(45deg, #ff5c8a 0 8px, #ffffff 8px 16px);
    --grid: #ff8fb8;
    --num: #c2407a;
    --accent: #ff4f8b;
    --accent-2: #2fb7c9;
    --accent-ink: #ffffff;
    --word: #ffe1ef;
    --sel: #ffb3d4;
    --solved: #f2fff0;
    --good: #2fae6b;
    --wrong: #e0213f;
    --revealed: #8f5ad6;
    --radius: 24px;
    --radius-sm: 16px;
    --cell-radius: 10px;
    --shadow: 0 8px 20px rgba(255, 79, 139, .16);
    --board-shadow: 0 0 0 5px #ffffff, 0 0 0 9px #ff8fb8, 0 14px 30px rgba(200, 60, 120, .25);
    --font-head: "Lilita One", sans-serif;
    --font-cell: "Lilita One", sans-serif;
    --head-scale: .9;
    --cell-weight: 400;
}
[data-world="candy"][data-theme="dark"] {
    --bg: #1b0f2e;
    --surface: rgba(40, 20, 62, .86);
    --surface-solid: #2a1544;
    --surface-2: #3a1d5a;
    --ink: #ffe9f6;
    --muted: #c9a2d8;
    --line: #5a2f7a;
    --hover: #3a1d5a;
    --cell: #2c1748;
    --cell-ink: #ffe9f6;
    --block: repeating-linear-gradient(45deg, #b8326a 0 8px, #2c1748 8px 16px);
    --grid: #120821;
    --num: #ff9ec7;
    --accent: #ff6fae;
    --accent-2: #5ee0e8;
    --accent-ink: #1b0f2e;
    --word: #4a2366;
    --sel: #8a2f6b;
    --solved: #2c3a4a;
    --good: #7cdc5a;
    --wrong: #ff6f8f;
    --revealed: #c79cff;
    --shadow: 0 8px 20px rgba(0, 0, 0, .45);
    --board-shadow: 0 0 0 5px #3a1d5a, 0 0 0 9px #ff6fae, 0 0 30px rgba(255, 111, 174, .35);
    color-scheme: dark;
}
[data-world="candy"] .logo-text::before { content: "\1F36D\00a0"; display: inline-block; animation: spin 8s linear infinite; }
[data-world="candy"] .board { overflow: visible; }
[data-world="candy"] .cell.typed .ltr { animation: jelly .25s ease-out; }
@keyframes jelly { 0% { transform: scale(.8, 1.2); } 50% { transform: scale(1.15, .9); } }
.board.cd-solved { box-shadow: 0 0 0 5px #ffffff, 0 0 0 9px #ffd23f, 0 0 34px rgba(255, 210, 63, .6), 0 14px 30px rgba(200, 60, 120, .25); }
.cd-candy-in { transform-box: fill-box; transform-origin: center; filter: drop-shadow(.006px .012px .008px rgba(120, 20, 60, .3)); }
.cd-candy.pop .cd-candy-in { animation: cd-pop .55s cubic-bezier(.2, 1.8, .4, 1) backwards; }
@keyframes cd-pop { from { transform: scale(0) rotate(-180deg); } }
.cd-icing { fill: #ffc2dc; stroke: #ffffff; stroke-width: .012; filter: drop-shadow(0 .015px .01px rgba(160, 40, 90, .3)); }
[data-theme="dark"] .cd-icing { fill: #ff8fc2; stroke: #ffd6ea; }
.cd-frost.grow { animation: drip-in .6s ease-out backwards; transform-box: fill-box; transform-origin: top; }
@keyframes drip-in { from { transform: scaleY(0); opacity: 0; } }
.cd-pinata { position: fixed; z-index: 832; width: 140px; height: 170px; pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 10px 12px rgba(120, 20, 60, .35)); }
.cd-pinata svg { width: 100%; height: 100%; overflow: visible; }
.cd-pinata.burst .cd-pinata-body { animation: pinata-pop .35s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes pinata-pop { to { transform: scale(1.6); opacity: 0; } }
.tc-candy { background: radial-gradient(circle, rgba(255, 220, 240, .35), rgba(90, 20, 70, .45)); }
.tcc-candy { position: relative; display: flex; align-items: center; animation: tcc-in .7s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.tcc-wrap {
    position: relative;
    z-index: 1;
    min-width: min(420px, 74vw);
    padding: 24px 34px;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 14px, transparent 14px 28px), linear-gradient(#ff7fb0, #ff4f8b);
    color: #ffffff;
    border-radius: 40px;
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), 0 20px 40px rgba(120, 20, 60, .35);
    text-align: center;
    text-shadow: 0 2px 0 rgba(140, 20, 70, .5);
}
.tcc-wrap small { font: 900 .8rem "Nunito", sans-serif; letter-spacing: .2em; }
.tcc-wrap h2 { margin: 6px 0 4px; font: 400 2.6rem/1.05 "Lilita One", sans-serif; }
.tcc-wrap p { margin: 0; font: 800 1rem "Nunito", sans-serif; }
.tcc-twist { width: 64px; height: 90px; background: linear-gradient(#ffb3d1, #ff7fb0); animation: untwist .6s ease .6s backwards; }
.tcc-twist.l { margin-right: -14px; clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%, 18% 50%); transform-origin: right center; }
.tcc-twist.r { margin-left: -14px; clip-path: polygon(100% 0, 0 35%, 0 65%, 100% 100%, 82% 50%); transform-origin: left center; }
@keyframes untwist { from { transform: scaleY(.25); } }
@keyframes tcc-in { from { transform: scale(.2) rotate(-540deg); opacity: 0; } }
.tc.out .tcc-candy { animation: tcc-out .45s ease-in forwards; }
@keyframes tcc-out { to { transform: scale(.2) rotate(360deg); opacity: 0; } }

/* =============================================================================================
   Shared by the worlds below (Worlds.decoBoard): the board decoration layer
   ============================================================================================= */
svg.deco-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.deco-mark-in { transform-box: fill-box; transform-origin: center; }
.deco-mark.pop .deco-mark-in { animation: deco-pop .45s cubic-bezier(.2, 1.8, .4, 1) backwards; }
@keyframes deco-pop { from { transform: scale(0) rotate(-90deg); } }
.deco-word.grow { animation: deco-word-in .3s ease-out backwards; }
@keyframes deco-word-in { from { opacity: 0; } }
/* lines that draw themselves (paths with pathLength="1") */
.deco-word.grow .lb-line, .deco-word.grow .vc-crack, .deco-word.grow .sk-band, .deco-word.grow .ds-border { stroke-dasharray: 1; animation: deco-draw .7s ease-out backwards; }
@keyframes deco-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* =============================================================================================
   HAUNTED LIBRARY (library.js): day = a sunlit reading room, night = floating candles at midnight
   ============================================================================================= */
[data-world="library"] {
    --bg: #efe4cc;
    --surface: rgba(252, 247, 234, .92);
    --surface-solid: #fcf7ea;
    --surface-2: #f1e5c8;
    --ink: #3a2a1a;
    --muted: #7a6448;
    --line: #d8c49a;
    --hover: #f3e8cc;
    --cell: #fbf5e6;
    --cell-ink: #2a1a10;
    --block: linear-gradient(135deg, #5a1a22, #3a1016);
    --grid: #5a3a24;
    --num: #8a2a2e;
    --accent: #8a2a2e;
    --accent-2: #2e5a8a;
    --accent-ink: #fff8ea;
    --word: #f3e3b4;
    --sel: #e8c66a;
    --solved: #e6efd2;
    --good: #3a7a3a;
    --wrong: #c0262e;
    --revealed: #2e5a8a;
    --radius: 10px;
    --radius-sm: 6px;
    --cell-radius: 2px;
    --shadow: 0 6px 16px rgba(60, 40, 10, .16);
    --board-shadow: 0 0 0 4px #c99a2e, 0 0 0 10px #5a3a24, 0 14px 30px rgba(40, 20, 0, .3);
    --font-head: "IM Fell English SC", serif;
    --font-cell: "Courier Prime", monospace;
    --head-scale: 1;
    --cell-weight: 700;
}
[data-world="library"][data-theme="dark"] {
    --bg: #140f22;
    --surface: rgba(30, 22, 48, .9);
    --surface-solid: #1e1630;
    --surface-2: #2a2042;
    --ink: #efe6d0;
    --muted: #b4a6c8;
    --line: #3e3060;
    --hover: #2a2042;
    --cell: #241a38;
    --cell-ink: #f4ead0;
    --block: linear-gradient(135deg, #0c0816, #1a1028);
    --grid: #0c0816;
    --num: #e8b84a;
    --accent: #e8b84a;
    --accent-2: #8ae0c8;
    --accent-ink: #1a1028;
    --word: #352a52;
    --sel: #7a5a2e;
    --solved: #22383a;
    --good: #8ae0a8;
    --wrong: #ff7a8a;
    --revealed: #8ae0c8;
    --shadow: 0 8px 20px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 4px #e8b84a, 0 0 0 10px #2a1a3a, 0 0 34px rgba(232, 184, 74, .25);
    color-scheme: dark;
}
[data-world="library"] .logo-text::before { content: "\1F4DA\00a0"; }
[data-world="library"] .board { overflow: visible; }
[data-world="library"] .cell.typed .ltr { animation: ink-in .2s ease-out; }
@keyframes ink-in { from { transform: scale(1.2) rotate(-4deg); } }
.lb-ink { fill: #2a1a10; }
[data-theme="dark"] .lb-ink { fill: #8ae0c8; }
.lb-line { fill: none; stroke: #2a1a10; stroke-width: .035; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
[data-theme="dark"] .lb-line { stroke: #e8b84a; opacity: .85; }
.board.lb-solved { box-shadow: 0 0 0 4px #e8c66a, 0 0 0 10px #5a3a24, 0 0 36px rgba(232, 198, 106, .7); }
.lb-book { position: fixed; z-index: 832; width: 60px; height: 40px; display: flex; perspective: 200px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.lb-book i { flex: 1; border: 3px solid transparent; border-radius: 3px; background: linear-gradient(#f4ead0, #e2d4b2) padding-box, var(--c) border-box; animation: lb-flap .26s ease-in-out infinite alternate; transform-origin: right center; }
.lb-book i:last-child { transform-origin: left center; animation-name: lb-flap-r; }
@keyframes lb-flap { from { transform: rotateY(10deg); } to { transform: rotateY(65deg); } }
@keyframes lb-flap-r { from { transform: rotateY(-10deg); } to { transform: rotateY(-65deg); } }
.tc-library { background: radial-gradient(circle, rgba(60, 40, 20, .2), rgba(20, 10, 30, .55)); }
.tcl-book { position: relative; perspective: 1400px; animation: tcl-in .5s ease-out backwards; }
.tcl-page {
    min-width: min(440px, 80vw);
    padding: 28px 38px 22px;
    background: repeating-linear-gradient(transparent 0 27px, rgba(120, 90, 50, .14) 27px 28px), #f6ecd2;
    color: #3a2a1a;
    border-left: 12px solid #7a1f2b;
    border-radius: 4px 12px 12px 4px;
    box-shadow: 0 20px 40px rgba(30, 15, 0, .4), inset -8px 0 14px rgba(120, 90, 50, .15);
    text-align: center;
}
.tcl-page small { font: 700 .8rem "Courier Prime", monospace; letter-spacing: .2em; color: #8a2a2e; }
.tcl-page h2 { margin: 6px 0 4px; font: 400 2.7rem/1.05 "IM Fell English SC", serif; }
.tcl-page p { margin: 0; font: 700 1rem "Courier Prime", monospace; }
.tcl-orn { display: block; margin-top: 8px; color: #a8862a; font-style: normal; }
.tcl-cover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #8a2a2e, #5a141c);
    border-radius: 4px 12px 12px 4px;
    box-shadow: inset 0 0 0 7px #5a141c, inset 0 0 0 10px #c99a2e;
    transform-origin: left center;
    backface-visibility: hidden;
    animation: tcl-open 1s cubic-bezier(.5, 0, .3, 1) .35s forwards;
}
.tcl-cover b { color: #e8c66a; font-size: 3.4rem; }
@keyframes tcl-open { to { transform: rotateY(-165deg); } }
@keyframes tcl-in { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.tc.out .tcl-book { animation: tcl-out .45s ease-in forwards; }
@keyframes tcl-out { to { transform: translateY(-30px) scale(.9); opacity: 0; } }

/* =============================================================================================
   VOLCANO ISLAND (volcano.js): day = a tropical beach, night = an eruption
   ============================================================================================= */
[data-world="volcano"] {
    --bg: #fff4e0;
    --surface: rgba(255, 250, 240, .92);
    --surface-solid: #fffaf0;
    --surface-2: #ffe8c8;
    --ink: #3a1a10;
    --muted: #8a5a40;
    --line: #f2c89a;
    --hover: #ffecd2;
    --cell: #fffaf2;
    --cell-ink: #2a120a;
    --block: linear-gradient(145deg, #4a302c, #2a1a18);
    --grid: #4a302c;
    --num: #c8481a;
    --accent: #f05a14;
    --accent-2: #12a4a4;
    --accent-ink: #ffffff;
    --word: #ffe4c4;
    --sel: #ffb870;
    --solved: #e6f6e0;
    --good: #2a9a5a;
    --wrong: #d8261a;
    --revealed: #12849a;
    --radius: 16px;
    --radius-sm: 10px;
    --cell-radius: 6px;
    --shadow: 0 8px 18px rgba(160, 60, 10, .16);
    --board-shadow: 0 0 0 5px #2a1a18, 0 0 0 9px #ff8a1f, 0 14px 30px rgba(120, 40, 10, .3);
    --font-head: "Bungee", sans-serif;
    --font-cell: "Bungee", sans-serif;
    --head-scale: .8;
    --cell-weight: 400;
}
[data-world="volcano"][data-theme="dark"] {
    --bg: #1a0a0e;
    --surface: rgba(40, 16, 18, .9);
    --surface-solid: #2a1214;
    --surface-2: #3a1a1a;
    --ink: #ffe8d8;
    --muted: #d8a088;
    --line: #5a2a22;
    --hover: #3a1a1a;
    --cell: #2a1416;
    --cell-ink: #ffe8d8;
    --block: linear-gradient(145deg, #0e0608, #1e0a0a);
    --grid: #0e0608;
    --num: #ff9a4a;
    --accent: #ff7a2a;
    --accent-2: #ffd23a;
    --accent-ink: #1a0a0e;
    --word: #4a1e18;
    --sel: #8a3414;
    --solved: #2a3a20;
    --good: #8ae070;
    --wrong: #ff6a5a;
    --revealed: #ffd23a;
    --shadow: 0 8px 20px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 5px #0e0608, 0 0 0 9px #ff6a1a, 0 0 40px rgba(255, 106, 26, .45);
    color-scheme: dark;
}
[data-world="volcano"] .logo-text::before { content: "\1F30B\00a0"; }
[data-world="volcano"] .board { overflow: visible; }
[data-world="volcano"] .cell.typed .ltr { animation: magma-in .22s ease-out; }
@keyframes magma-in { from { transform: scale(1.3); text-shadow: 0 0 10px #ff8a1f, 0 0 2px #ffd23a; } }
.vc-ember { fill: #ff7a2a; animation: vc-pulse 1.6s ease-in-out infinite; }
@keyframes vc-pulse { 50% { fill: #ffcf4a; } }
.vc-glow { fill: none; stroke: rgba(255, 120, 30, .4); stroke-width: .075; stroke-linecap: round; stroke-linejoin: round; animation: vc-glow 2s ease-in-out infinite; }
.deco-word.grow .vc-glow { stroke-dasharray: 1; animation: deco-draw .7s ease-out backwards, vc-glow 2s ease-in-out .7s infinite; }
@keyframes vc-glow { 50% { stroke: rgba(255, 190, 60, .6); } }
.vc-crack { fill: none; stroke: #ffb030; stroke-width: .022; stroke-linecap: round; stroke-linejoin: round; }
.board.vc-solved { box-shadow: 0 0 0 5px #2a1a18, 0 0 0 9px #ffcf3a, 0 0 40px rgba(255, 140, 30, .75); }
.tc-volcano { background: radial-gradient(circle, rgba(255, 120, 30, .25), rgba(40, 10, 5, .6)); }
.tcv-stone {
    min-width: min(440px, 80vw);
    padding: 26px 34px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .12), transparent 50%), linear-gradient(160deg, #6a5a54, #3a2a26);
    color: #ffd27a;
    border-radius: 22px 30px 18px 34px;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), inset 0 0 28px rgba(255, 110, 20, .35), 0 20px 40px rgba(40, 10, 0, .5), 0 0 40px rgba(255, 110, 20, .35);
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 140, 30, .9), 0 0 2px #ff5a1a;
    animation: tcv-rise .7s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.tcv-stone small { font: 900 .8rem "Nunito", sans-serif; letter-spacing: .2em; }
.tcv-stone h2 { margin: 8px 0 4px; font: 400 2.2rem/1.1 "Bungee", sans-serif; }
.tcv-stone p { margin: 0; color: #ffe8c8; font: 800 1rem "Nunito", sans-serif; }
@keyframes tcv-rise { from { transform: translateY(70vh) rotate(6deg); } }
.tc.out .tcv-stone { animation: tcv-sink .45s ease-in forwards; }
@keyframes tcv-sink { to { transform: translateY(80vh) rotate(-4deg); } }

/* =============================================================================================
   SKY KINGDOM (sky.js): day = floating islands in a blue sky, night = stars and sky lanterns
   ============================================================================================= */
[data-world="sky"] {
    --bg: #e8f6ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-solid: #ffffff;
    --surface-2: #e2f1ff;
    --ink: #1e3a5a;
    --muted: #5a7a9a;
    --line: #bcdcf6;
    --hover: #e2f1ff;
    --cell: #ffffff;
    --cell-ink: #18324e;
    --block: linear-gradient(160deg, #6ab4f0, #3a86dc);
    --grid: #8ac0ee;
    --num: #3a86dc;
    --accent: #ff5c6c;
    --accent-2: #3a9cf0;
    --accent-ink: #ffffff;
    --word: #dff0ff;
    --sel: #ffe08a;
    --solved: #e8fbe8;
    --good: #2aa45a;
    --wrong: #e8344e;
    --revealed: #7a5cff;
    --radius: 26px;
    --radius-sm: 16px;
    --cell-radius: 12px;
    --shadow: 0 10px 24px rgba(40, 110, 200, .16);
    --board-shadow: 0 0 0 6px #ffffff, 0 0 0 10px #8ac0ee, 0 16px 36px rgba(40, 110, 200, .25);
    --font-head: "Comfortaa", sans-serif;
    --font-cell: "Comfortaa", sans-serif;
    --head-scale: .95;
    --cell-weight: 700;
}
[data-world="sky"][data-theme="dark"] {
    --bg: #0e1232;
    --surface: rgba(26, 30, 70, .88);
    --surface-solid: #1a1e46;
    --surface-2: #242a5a;
    --ink: #eef0ff;
    --muted: #a8b0e0;
    --line: #343c7a;
    --hover: #242a5a;
    --cell: #1c2252;
    --cell-ink: #f4f4ff;
    --block: linear-gradient(160deg, #0a0c24, #1a1a40);
    --grid: #0a0c24;
    --num: #ffb86a;
    --accent: #ffb86a;
    --accent-2: #8ab4ff;
    --accent-ink: #121640;
    --word: #2c3474;
    --sel: #6a4a8a;
    --solved: #1e3a4a;
    --good: #8ae0a8;
    --wrong: #ff7a8a;
    --revealed: #c0a8ff;
    --shadow: 0 10px 24px rgba(0, 0, 0, .45);
    --board-shadow: 0 0 0 6px #242a5a, 0 0 0 10px #ffb86a, 0 0 34px rgba(255, 184, 106, .3);
    color-scheme: dark;
}
[data-world="sky"] .logo-text::before { content: "\2601\FE0F\00a0"; }
[data-world="sky"] .board { overflow: visible; }
[data-world="sky"] .cell.typed .ltr { animation: float-in .2s ease-out; }
@keyframes float-in { from { transform: translateY(-5px) scale(1.12); } }
.sk-band { fill: none; stroke-width: .028; stroke-linecap: round; opacity: .85; }
.board.sk-solved { box-shadow: 0 0 0 6px #ffffff, 0 0 0 10px #ffd84a, 0 0 40px rgba(255, 216, 74, .65); }
.sk-balloon { position: fixed; bottom: -130px; z-index: 832; width: 44px; height: 56px; pointer-events: none; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .65), transparent 32%), var(--c); border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; }
.sk-balloon::before { content: ""; position: absolute; left: 50%; top: 100%; margin: -2px 0 0 -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--c); }
.sk-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 70px; background: rgba(80, 80, 90, .55); }
.sk-plane { position: fixed; left: 0; top: 0; z-index: 833; width: 90px; height: 45px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(30, 60, 120, .3)); }
.sk-plane svg { width: 100%; height: 100%; overflow: visible; }
.tc-sky { background: radial-gradient(circle, rgba(255, 255, 255, .2), rgba(30, 80, 160, .35)); }
.tcs-fly { display: flex; align-items: center; animation: tcs-in 1.1s cubic-bezier(.2, .9, .3, 1) backwards, tcs-bob 2s ease-in-out 1.1s infinite; }
.tcs-banner {
    min-width: min(380px, 62vw);
    padding: 18px 34px 18px 46px;
    background: #ffffff;
    color: #1e3a5a;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%);
    text-align: center;
    animation: tcs-wave 1.4s ease-in-out infinite;
}
.tcs-fly { filter: drop-shadow(0 10px 18px rgba(30, 80, 160, .3)); }
.tcs-banner small { color: #ff5c6c; font: 900 .78rem "Nunito", sans-serif; letter-spacing: .2em; }
.tcs-banner h2 { margin: 6px 0 4px; font: 700 2.3rem/1.1 "Comfortaa", sans-serif; }
.tcs-banner p { margin: 0; font: 800 1rem "Nunito", sans-serif; }
.tcs-rope { width: 50px; height: 2px; flex: none; background: #6a7a8a; }
.tcs-plane { width: 110px; height: 55px; flex: none; }
.tcs-plane svg { width: 100%; height: 100%; overflow: visible; }
.tcs-prop { transform-box: fill-box; transform-origin: center; animation: tcs-prop .06s linear infinite alternate; }
@keyframes tcs-prop { to { transform: scaleY(.15); } }
@keyframes tcs-in { from { transform: translateX(110vw); } }
@keyframes tcs-bob { 50% { transform: translateY(-8px); } }
@keyframes tcs-wave { 50% { transform: skewY(-1.5deg); } }
.tc.out .tcs-fly { animation: tcs-out .55s ease-in forwards; }
@keyframes tcs-out { to { transform: translateX(-120vw) translateY(-60px); } }

/* =============================================================================================
   DESERT CARAVAN (desert.js): day = golden dunes, night = a campfire under a giant moon
   ============================================================================================= */
[data-world="desert"] {
    --bg: #fbecd0;
    --surface: rgba(255, 248, 232, .92);
    --surface-solid: #fff8e8;
    --surface-2: #f6e2bc;
    --ink: #4a2a12;
    --muted: #8a6440;
    --line: #e8c890;
    --hover: #f8e6c4;
    --cell: #fff8ea;
    --cell-ink: #3a200c;
    --block: linear-gradient(135deg, #b8743a, #8a5228);
    --grid: #a8682a;
    --num: #b8541e;
    --accent: #d0602a;
    --accent-2: #2e8ac4;
    --accent-ink: #ffffff;
    --word: #f8dfb0;
    --sel: #f0b860;
    --solved: #e8f2d0;
    --good: #3a8a3a;
    --wrong: #c8261a;
    --revealed: #2e7ab4;
    --radius: 12px;
    --radius-sm: 8px;
    --cell-radius: 4px;
    --shadow: 0 8px 18px rgba(140, 80, 20, .16);
    --board-shadow: 0 0 0 4px #e8c48a, 0 0 0 10px #a8682a, 0 14px 30px rgba(120, 60, 10, .28);
    --font-head: "Rye", serif;
    --font-cell: "Rye", serif;
    --head-scale: .85;
    --cell-weight: 400;
}
[data-world="desert"][data-theme="dark"] {
    --bg: #0e1428;
    --surface: rgba(22, 30, 58, .9);
    --surface-solid: #161e3a;
    --surface-2: #202a4c;
    --ink: #f0e6d2;
    --muted: #a8b0c8;
    --line: #2e3a62;
    --hover: #202a4c;
    --cell: #1c2440;
    --cell-ink: #f4e8d0;
    --block: linear-gradient(135deg, #080c1a, #141c34);
    --grid: #080c1a;
    --num: #ffb050;
    --accent: #ffb050;
    --accent-2: #8ab4ff;
    --accent-ink: #0e1428;
    --word: #2c3658;
    --sel: #7a5020;
    --solved: #1e3a3a;
    --good: #8ae0a8;
    --wrong: #ff7a6a;
    --revealed: #8ab4ff;
    --shadow: 0 8px 20px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 4px #2a3456, 0 0 0 10px #ffb050, 0 0 34px rgba(255, 176, 80, .3);
    color-scheme: dark;
}
[data-world="desert"] .logo-text::before { content: "\1F3DC\FE0F\00a0"; }
[data-world="desert"] .board { overflow: visible; }
[data-world="desert"] .cell.typed .ltr { animation: dust-in .22s ease-out; }
@keyframes dust-in { from { transform: scale(1.2); text-shadow: 0 0 8px rgba(232, 168, 32, .8); } }
.ds-carve { fill: rgba(140, 80, 30, .5); }
.ds-carve-line { fill: none; stroke: rgba(140, 80, 30, .6); stroke-width: .012; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .ds-carve { fill: rgba(255, 190, 110, .45); }
[data-theme="dark"] .ds-carve-line { stroke: rgba(255, 190, 110, .55); }
.ds-border { fill: none; stroke: #b8743a; stroke-width: .022; stroke-linecap: round; }
.ds-border.thin { stroke-width: .01; }
.ds-dot { fill: #d9a85a; }
[data-theme="dark"] .ds-border { stroke: #ffb050; }
[data-theme="dark"] .ds-dot { fill: #ffd890; }
.board.ds-solved { box-shadow: 0 0 0 4px #ffe680, 0 0 0 10px #c8902a, 0 0 40px rgba(255, 210, 60, .7); }
.ds-chest { position: fixed; z-index: 832; width: 180px; height: 146px; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(60, 30, 0, .45)); }
.ds-chest svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.ds-lid { transform-box: fill-box; transform-origin: 6% 100%; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.ds-chest.open .ds-lid { transform: rotate(-28deg) translate(-4px, -16px); }
.ds-rays { position: absolute; left: 50%; top: 40%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 220, 120, .55) 0 9deg, transparent 9deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); opacity: 0; transition: opacity .4s; }
.ds-chest.open .ds-rays { opacity: 1; animation: ds-spin 9s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.tc-desert { background: radial-gradient(circle, rgba(255, 220, 150, .25), rgba(80, 40, 10, .45)); }
.tcd-scroll { display: flex; align-items: center; filter: drop-shadow(0 18px 30px rgba(60, 30, 0, .4)); }
.tcd-paper {
    width: min(440px, 76vw);
    padding: 24px 30px;
    background: repeating-linear-gradient(90deg, rgba(160, 110, 40, .08) 0 3px, transparent 3px 9px), repeating-linear-gradient(rgba(160, 110, 40, .06) 0 2px, transparent 2px 11px), #f0dca8;
    color: #4a2a12;
    text-align: center;
    animation: tcd-unroll .8s cubic-bezier(.4, 0, .2, 1) backwards;
}
.tcd-paper small { color: #b8541e; font: 900 .78rem "Nunito", sans-serif; letter-spacing: .2em; }
.tcd-paper h2 { margin: 8px 0 4px; font: 400 2.3rem/1.1 "Rye", serif; }
.tcd-paper p { margin: 0; font: 800 1rem "Nunito", sans-serif; }
.tcd-roll { width: 26px; height: 170px; flex: none; background: linear-gradient(90deg, #8a5a1e, #e8c48a 45%, #a8742a); border-radius: 13px; z-index: 1; }
.tcd-roll.l { margin-right: -8px; animation: tcd-roll-l .8s cubic-bezier(.4, 0, .2, 1) backwards; }
.tcd-roll.r { margin-left: -8px; animation: tcd-roll-r .8s cubic-bezier(.4, 0, .2, 1) backwards; }
@keyframes tcd-unroll { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes tcd-roll-l { from { transform: translateX(calc(min(440px, 76vw) / 2)); } }
@keyframes tcd-roll-r { from { transform: translateX(calc(min(440px, 76vw) / -2)); } }
.tc.out .tcd-scroll { animation: tcd-out .45s ease-in forwards; }
@keyframes tcd-out { to { transform: translateY(40px); opacity: 0; } }

/* =============================================================================================
   ROBOT FACTORY (robot.js): day = a bright lab, night = the night shift
   ============================================================================================= */
[data-world="robot"] {
    --bg: #eef2f6;
    --surface: rgba(250, 252, 255, .93);
    --surface-solid: #fafcff;
    --surface-2: #e4eaf0;
    --ink: #1e2a36;
    --muted: #5a6a7a;
    --line: #c4ced8;
    --hover: #e4eaf0;
    --cell: #ffffff;
    --cell-ink: #16202a;
    --block: repeating-linear-gradient(45deg, #3a424c 0 6px, #343b44 6px 12px);
    --grid: #4a545e;
    --num: #e8761a;
    --accent: #f07a10;
    --accent-2: #1aa0d8;
    --accent-ink: #ffffff;
    --word: #dceefa;
    --sel: #ffd27a;
    --solved: #dcf8e8;
    --good: #1a9a5a;
    --wrong: #e0262e;
    --revealed: #1a80c8;
    --radius: 8px;
    --radius-sm: 5px;
    --cell-radius: 3px;
    --shadow: 0 6px 14px rgba(30, 50, 70, .16);
    --board-shadow: 0 0 0 4px #8a96a2, 0 0 0 8px #3a424c, 0 0 0 11px #ffcc1a, 0 14px 30px rgba(20, 40, 60, .3);
    --font-head: "Russo One", sans-serif;
    --font-cell: "Share Tech Mono", monospace;
    --head-scale: .85;
    --cell-weight: 400;
}
[data-world="robot"][data-theme="dark"] {
    --bg: #10161e;
    --surface: rgba(24, 32, 42, .92);
    --surface-solid: #18202a;
    --surface-2: #222c38;
    --ink: #dfe8f0;
    --muted: #8a9aaa;
    --line: #2e3a48;
    --hover: #222c38;
    --cell: #1a222c;
    --cell-ink: #e8f6ff;
    --block: repeating-linear-gradient(45deg, #06090c 0 6px, #0c1116 6px 12px);
    --grid: #06090c;
    --num: #3cff9a;
    --accent: #ff9a2a;
    --accent-2: #3cff9a;
    --accent-ink: #10161e;
    --word: #22384a;
    --sel: #6a4a1a;
    --solved: #163a2a;
    --good: #3cff9a;
    --wrong: #ff6a7a;
    --revealed: #3ad0ff;
    --shadow: 0 8px 20px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 4px #2a3644, 0 0 0 8px #06090c, 0 0 0 11px #ff9a2a, 0 0 30px rgba(255, 154, 42, .3);
    color-scheme: dark;
}
[data-world="robot"] .logo-text::before { content: "\1F916\00a0"; }
[data-world="robot"] .board { overflow: visible; }
[data-world="robot"] .cell.typed .ltr { animation: print-in .15s steps(3); }
@keyframes print-in { from { transform: scaleY(.3); } }
.rb-led { animation: rb-blink 1.4s steps(1) infinite; }
@keyframes rb-blink { 50% { fill-opacity: .35; } }
.rb-strip { fill: #2a323c; }
[data-theme="dark"] .rb-strip { fill: #06090c; }
.rb-dot { fill: #2a4a3a; animation: rb-chase 1.6s linear infinite; }
@keyframes rb-chase { 0%, 12% { fill: #3cff9a; } 30%, 100% { fill: #2a4a3a; } }
.board.rb-solved { box-shadow: 0 0 0 4px #8a96a2, 0 0 0 8px #3a424c, 0 0 0 11px #3cff9a, 0 0 40px rgba(60, 255, 154, .6); }
.rb-belt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 831; height: 64px; pointer-events: none; border-top: 10px solid #8a96a2; background: repeating-linear-gradient(90deg, #3a424c 0 30px, #262c34 30px 34px); background-size: 34px 100%; box-shadow: 0 -6px 20px rgba(0, 0, 0, .3); animation: rb-belt .5s linear infinite; }
@keyframes rb-belt { to { background-position-x: 34px; } }
.rb-belt.stop { animation-play-state: paused; }
.rb-trophy { position: fixed; bottom: 64px; z-index: 833; width: 120px; height: 140px; pointer-events: none; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), filter .7s; }
.rb-trophy svg { width: 100%; height: 100%; }
.rb-trophy.lift { transform: translateY(-22vh) scale(1.35); filter: drop-shadow(0 0 24px rgba(255, 210, 58, .9)); }
.rb-stamp {
    position: fixed;
    left: 50%;
    top: 34%;
    z-index: 834;
    padding: 6px 22px;
    background: rgba(255, 255, 255, .88);
    color: #e0262e;
    border: 6px solid #e0262e;
    border-radius: 12px;
    font: 400 clamp(2rem, 7vw, 3.6rem) "Russo One", sans-serif;
    letter-spacing: .12em;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-10deg);
    animation: rb-stamp .24s cubic-bezier(.6, 0, .8, 1) backwards;
}
@keyframes rb-stamp { from { transform: translate(-50%, -50%) rotate(-10deg) scale(3); opacity: 0; } }
.tc-robot { background: radial-gradient(circle, rgba(60, 255, 154, .08), rgba(5, 10, 15, .6)); }
.tcr-monitor { position: relative; padding: 18px 18px 30px; background: linear-gradient(#9aa4ae, #6a747e); border-radius: 22px; box-shadow: 0 20px 40px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .4); animation: tcl-in .4s ease-out backwards; }
.tcr-screen {
    min-width: min(420px, 76vw);
    padding: 24px 30px;
    background: repeating-linear-gradient(rgba(0, 0, 0, .25) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, #10301e, #04100a);
    color: #3cff9a;
    border-radius: 12px;
    text-align: center;
    text-shadow: 0 0 8px rgba(60, 255, 154, .7);
    animation: crt-on .5s ease-out .25s backwards;
}
.tcr-screen small { font: 400 .9rem "Share Tech Mono", monospace; letter-spacing: .15em; }
.tcr-screen h2 { margin: 8px 0 4px; font: 400 2.3rem/1.1 "Russo One", sans-serif; }
.tcr-screen p { margin: 0; font: 400 1.05rem "Share Tech Mono", monospace; }
.tcr-led { position: absolute; right: 26px; bottom: 10px; width: 8px; height: 8px; border-radius: 50%; background: #3cff9a; box-shadow: 0 0 8px #3cff9a; }
@keyframes crt-on { 0% { transform: scale(.6, .01); filter: brightness(4); } 50% { transform: scale(1, .01); filter: brightness(3); } 100% { transform: none; filter: none; } }
.tc.out .tcr-screen { animation: crt-off .35s ease-in forwards; }
.tc.out .tcr-monitor { animation: tcd-out .45s ease-in .2s forwards; }
@keyframes crt-off { 50% { transform: scale(1, .01); filter: brightness(3); } 100% { transform: scale(0, .01); } }

/* =============================================================================================
   BIG TOP CARNIVAL (carnival.js): day = a sunny fair, night = the fair all lit up
   ============================================================================================= */
[data-world="carnival"] {
    --bg: #fff3e6;
    --surface: rgba(255, 252, 246, .93);
    --surface-solid: #fffcf6;
    --surface-2: #ffe8d0;
    --ink: #3a1420;
    --muted: #8a5a5a;
    --line: #f2c8b0;
    --hover: #ffebd8;
    --cell: #fffdf8;
    --cell-ink: #2a0c16;
    --block: repeating-linear-gradient(90deg, #e8344e 0 9px, #ffffff 9px 18px);
    --grid: #a81e2e;
    --num: #c81e3a;
    --accent: #e8344e;
    --accent-2: #2e8ae0;
    --accent-ink: #ffffff;
    --word: #ffe6c8;
    --sel: #ffcf3a;
    --solved: #e8f6e0;
    --good: #2a9a4a;
    --wrong: #d8161e;
    --revealed: #2e7ae0;
    --radius: 18px;
    --radius-sm: 12px;
    --cell-radius: 6px;
    --shadow: 0 8px 18px rgba(170, 30, 50, .15);
    --board-shadow: 0 0 0 5px #ffcf3a, 0 0 0 10px #a81e2e, 0 14px 30px rgba(120, 20, 30, .28);
    --font-head: "Shrikhand", serif;
    --font-cell: "Shrikhand", serif;
    --head-scale: .85;
    --cell-weight: 400;
}
[data-world="carnival"][data-theme="dark"] {
    --bg: #120c24;
    --surface: rgba(32, 20, 52, .9);
    --surface-solid: #201434;
    --surface-2: #2e1e48;
    --ink: #fff0e0;
    --muted: #c8a8c8;
    --line: #42305e;
    --hover: #2e1e48;
    --cell: #241838;
    --cell-ink: #fff4e6;
    --block: repeating-linear-gradient(90deg, #6a1220 0 9px, #1a1028 9px 18px);
    --grid: #0a0614;
    --num: #ffcf3a;
    --accent: #ffcf3a;
    --accent-2: #ff5a8a;
    --accent-ink: #120c24;
    --word: #3a2650;
    --sel: #7a2a3a;
    --solved: #1e3a34;
    --good: #8ae0a0;
    --wrong: #ff6a7a;
    --revealed: #8ab4ff;
    --shadow: 0 8px 20px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 5px #ffcf3a, 0 0 0 10px #6a1220, 0 0 36px rgba(255, 207, 58, .35);
    color-scheme: dark;
}
[data-world="carnival"] .logo-text::before { content: "\1F3AA\00a0"; }
[data-world="carnival"] .board { overflow: visible; }
[data-world="carnival"] .cell.typed .ltr { animation: ta-da .2s ease-out; }
@keyframes ta-da { from { transform: scale(1.35) rotate(6deg); } }
.cv-bulb { fill: #fff2b0; animation: cv-chase .75s steps(1) infinite; }
.deco-word.grow .cv-bulb { transform-box: fill-box; transform-origin: center; animation: cv-chase .75s steps(1) infinite, cv-in .3s ease-out backwards; }
@keyframes cv-chase { 0% { fill: #fff2b0; } 33% { fill: #c8902a; } }
@keyframes cv-in { from { transform: scale(0); } }
.board.cv-solved { box-shadow: 0 0 0 5px #fff2b0, 0 0 0 10px #e8344e, 0 0 40px rgba(255, 207, 58, .75); }
.cv-tower { position: fixed; z-index: 832; width: 80px; pointer-events: none; }
.cv-tower svg { display: block; width: 100%; height: 100%; }
.cv-seg { opacity: .3; }
.cv-tower.go .cv-seg { animation: cv-seg .1s forwards; }
@keyframes cv-seg { to { opacity: 1; } }
.cv-bell { position: absolute; left: 50%; top: -14px; width: 50px; height: 44px; margin-left: -25px; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffcf3a 40%, #b8802a); border-radius: 50% 50% 14% 14% / 70% 70% 14% 14%; z-index: 1; }
.cv-tower.rung .cv-bell { animation: cv-ring .12s ease-in-out 6 alternate; box-shadow: 0 0 30px 10px rgba(255, 220, 90, .8); }
@keyframes cv-ring { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.cv-puck { position: absolute; left: 50%; bottom: 18px; width: 34px; height: 14px; margin-left: -17px; background: #2e8ae0; border-radius: 7px; box-shadow: 0 0 0 2px #ffffff; }
.cv-tower.go .cv-puck { animation: cv-puck .6s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes cv-puck { to { bottom: calc(100% - 44px); } }
.tc-carnival { background: radial-gradient(circle, rgba(255, 220, 120, .2), rgba(60, 10, 30, .5)); }
.tcc2-sign { position: relative; transform-origin: 50% -60vh; animation: tcc2-drop .9s cubic-bezier(.3, 1.4, .5, 1) backwards, tcc2-swing 2.4s ease-in-out .9s infinite; }
.tcc2-chain { position: absolute; bottom: 100%; width: 4px; height: 60vh; background: repeating-linear-gradient(#9aa4ae 0 7px, transparent 7px 10px); }
.tcc2-chain.l { left: 18%; }
.tcc2-chain.r { right: 18%; }
.tcc2-board {
    min-width: min(420px, 76vw);
    padding: 20px 30px;
    background: radial-gradient(circle at 50% 0, #c8283a, #8a1424);
    color: #ffcf3a;
    border: 12px dotted #fff2b0;
    border-radius: 22px;
    box-shadow: 0 0 0 6px #c8902a, 0 20px 40px rgba(60, 10, 20, .45), 0 0 30px rgba(255, 220, 120, .4);
    text-align: center;
    text-shadow: 0 3px 0 #5a0a14;
    animation: tcc2-bulbs .5s steps(1) infinite;
}
.tcc2-board small { color: #ffffff; font: 900 .78rem "Nunito", sans-serif; letter-spacing: .2em; text-shadow: none; }
.tcc2-board h2 { margin: 6px 0 4px; font: 400 2.5rem/1.1 "Shrikhand", serif; }
.tcc2-board p { margin: 0; color: #fff2d8; font: 800 1rem "Nunito", sans-serif; text-shadow: none; }
@keyframes tcc2-bulbs { 50% { border-color: #ffcf3a; } }
@keyframes tcc2-drop { from { transform: translateY(-100vh); } }
@keyframes tcc2-swing { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.tc.out .tcc2-sign { animation: tcc2-up .45s ease-in forwards; }
@keyframes tcc2-up { to { transform: translateY(-110vh); } }

/* =============================================================================================
   RAINY CITY (rain.js): day = a cosy rainy day, night = city lights in the rain
   ============================================================================================= */
[data-world="rain"] {
    --bg: #e6ecf2;
    --surface: rgba(250, 252, 255, .9);
    --surface-solid: #fafcff;
    --surface-2: #e2e8f0;
    --ink: #22303e;
    --muted: #5a6a7a;
    --line: #c4d0dc;
    --hover: #e2e8f0;
    --cell: #fdfeff;
    --cell-ink: #1a2634;
    --block: linear-gradient(160deg, #4a5868, #36424e);
    --grid: #5a6878;
    --num: #e84a5a;
    --accent: #f04a5a;
    --accent-2: #2a98f0;
    --accent-ink: #ffffff;
    --word: #e0eefa;
    --sel: #ffd86a;
    --solved: #e4f4ea;
    --good: #2a9a5a;
    --wrong: #d8262e;
    --revealed: #2a88e0;
    --radius: 16px;
    --radius-sm: 10px;
    --cell-radius: 6px;
    --shadow: 0 8px 18px rgba(40, 60, 90, .15);
    --board-shadow: 0 0 0 5px #ffffff, 0 0 0 9px #5a6878, 0 14px 30px rgba(30, 50, 80, .28);
    --font-head: "Pacifico", cursive;
    --font-cell: "Josefin Sans", sans-serif;
    --head-scale: .78;
    --cell-weight: 700;
}
[data-world="rain"][data-theme="dark"] {
    --bg: #0c1220;
    --surface: rgba(20, 28, 46, .9);
    --surface-solid: #141c2e;
    --surface-2: #1e2840;
    --ink: #e6eef8;
    --muted: #9aaac0;
    --line: #2a3654;
    --hover: #1e2840;
    --cell: #18223a;
    --cell-ink: #eef4ff;
    --block: linear-gradient(160deg, #060a14, #10182a);
    --grid: #060a14;
    --num: #ff8ac4;
    --accent: #ff6ab4;
    --accent-2: #ffd27a;
    --accent-ink: #0c1220;
    --word: #24345a;
    --sel: #6a3a5a;
    --solved: #1a3a3a;
    --good: #8ae0a8;
    --wrong: #ff7a8a;
    --revealed: #8ab4ff;
    --shadow: 0 8px 20px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 5px #1e2840, 0 0 0 9px #ff6ab4, 0 0 34px rgba(255, 106, 180, .3);
    color-scheme: dark;
}
[data-world="rain"] .logo-text::before { content: "\1F327\FE0F\00a0"; }
[data-world="rain"] .board { overflow: visible; }
[data-world="rain"] .cell.typed .ltr { animation: drip-letter .2s ease-out; }
@keyframes drip-letter { from { transform: translateY(-5px); } }
.rn-puddle { fill: rgba(106, 180, 240, .28); }
[data-theme="dark"] .rn-puddle { fill: rgba(120, 150, 220, .3); }
.rn-ring { fill: none; stroke: rgba(40, 130, 210, .7); stroke-width: .01; transform-box: fill-box; transform-origin: center; animation: rn-ripple 2.4s ease-out infinite backwards; }
[data-theme="dark"] .rn-ring { stroke: rgba(200, 220, 255, .7); }
@keyframes rn-ripple { 0% { transform: scale(.2); opacity: 0; } 10% { opacity: 1; } 60% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.board.rn-solved { box-shadow: 0 0 0 5px #ffffff, 0 0 0 9px #ffd86a, 0 0 40px rgba(255, 216, 106, .7); }
.rn-dim { position: fixed; inset: 0; z-index: 829; background: rgba(30, 40, 60, .45); pointer-events: none; animation: rn-fade .5s backwards; transition: opacity 1s; }
.rn-dim.clear { opacity: 0; }
@keyframes rn-fade { from { opacity: 0; } }
.rn-umbrella { position: fixed; z-index: 832; pointer-events: none; transform-origin: 50% 70%; filter: drop-shadow(0 10px 12px rgba(20, 30, 50, .35)); animation: rn-open .55s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.rn-umbrella svg { width: 100%; height: 100%; overflow: visible; }
@keyframes rn-open { from { transform: translateY(-40px) scale(.08, .6); } }
.rn-sun { position: fixed; inset: 0; z-index: 830; pointer-events: none; background: radial-gradient(circle at 82% 8%, rgba(255, 240, 180, .65), transparent 45%), repeating-conic-gradient(from 0deg at 82% 8%, rgba(255, 245, 200, .2) 0 6deg, transparent 6deg 14deg); animation: rn-fade .8s backwards; }
.rn-mini { position: fixed; top: -70px; z-index: 832; width: 44px; height: 38px; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(20, 30, 50, .25)); }
.rn-mini svg { width: 100%; height: 100%; overflow: visible; }
.tc-rain { background: radial-gradient(circle, rgba(200, 220, 240, .2), rgba(20, 30, 50, .5)); }
.tcw-window { position: relative; overflow: hidden; border: 12px solid #6a4a36; border-radius: 10px; box-shadow: 0 20px 40px rgba(10, 20, 40, .45), inset 0 0 0 2px rgba(255, 255, 255, .3); animation: tcl-in .45s ease-out backwards; }
.tcw-text { min-width: min(420px, 76vw); padding: 26px 32px; background: linear-gradient(160deg, #fff6e0, #ffe2b0); color: #3a2a1e; text-align: center; }
.tcw-text small { color: #e84a5a; font: 900 .78rem "Nunito", sans-serif; letter-spacing: .2em; }
.tcw-text h2 { margin: 6px 0 4px; font: 400 2.3rem/1.25 "Pacifico", cursive; }
.tcw-text p { margin: 0; font: 800 1rem "Nunito", sans-serif; }
.tcw-fog { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(220, 230, 240, .96), rgba(190, 205, 222, .96)); animation: tcw-wipe .8s ease-in-out .45s forwards; }
@keyframes tcw-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.tcw-drop { position: absolute; width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .9), rgba(140, 190, 240, .5)); animation: tcw-run 2.4s ease-in infinite; }
@keyframes tcw-run { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(160px); opacity: 0; } }
.tc.out .tcw-window { animation: tcd-out .45s ease-in forwards; }

/* =============================================================================================
   CLASSIC (classic.js): a plain page, the default for new players. Light = white, dark = near black.
   ============================================================================================= */
[data-world="classic"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --surface-2: #f2f3f5;
    --ink: #1a1a1a;
    --muted: #64666c;
    --line: #d6d8dc;
    --hover: #f0f2f5;
    --cell: #ffffff;
    --cell-ink: #111111;
    --block: #1a1a1a;
    --grid: #1a1a1a;
    --num: #3a3a3a;
    --accent: #2a62c9;
    --accent-2: #3a9a52;
    --accent-ink: #ffffff;
    --word: #dde8fb;
    --sel: #9fc0f2;
    --solved: #e4f3e6;
    --good: #2f8a4a;
    --wrong: #d0312d;
    --revealed: #7a4fc4;
    --radius: 10px;
    --radius-sm: 6px;
    --cell-radius: 0;
    --shadow: 0 1px 3px rgba(0, 0, 0, .1);
    --board-shadow: 0 0 0 2px #1a1a1a;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-head: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-cell: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --head-scale: .8;
    --cell-weight: 600;
}
[data-world="classic"][data-theme="dark"] {
    --bg: #121214;
    --surface: #1c1c20;
    --surface-solid: #1c1c20;
    --surface-2: #26262c;
    --ink: #ececf0;
    --muted: #a0a2aa;
    --line: #34343c;
    --hover: #26262c;
    --cell: #1c1c20;
    --cell-ink: #f2f2f5;
    --block: #000000;
    --grid: #000000;
    --num: #b8b8c0;
    --accent: #7aa8ff;
    --accent-2: #6fcf8a;
    --accent-ink: #121214;
    --word: #24324a;
    --sel: #3a5a8a;
    --solved: #1e3426;
    --good: #6fcf8a;
    --wrong: #ff6a66;
    --revealed: #b89aff;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 2px #000000;
    color-scheme: dark;
}
[data-world="classic"] .mascot { display: none; }
[data-world="classic"] .clues { -webkit-backdrop-filter: none; backdrop-filter: none; }
.tc-classic { background: rgba(0, 0, 0, .12); }
.tcx-card { min-width: min(360px, 80vw); padding: 22px 28px; background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); text-align: center; font-family: var(--font-body); animation: tcx-in .25s ease-out backwards; }
.tcx-card small { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .15em; }
.tcx-card h2 { margin: 6px 0 2px; font-size: 1.8rem; font-weight: 800; }
.tcx-card p { margin: 0; color: var(--muted); font-weight: 600; }
@keyframes tcx-in { from { opacity: 0; transform: translateY(8px); } }
.tc.out .tcx-card { animation: tcx-out .25s ease-in forwards; }
@keyframes tcx-out { to { opacity: 0; } }

/* =============================================================================================
   CELESTIAL RIFT (rift.js, the secret world): night = violet space with a golden tear of heaven-light,
   day = a pale gold dawn over clouds with the tear a dark violet wound
   ============================================================================================= */
[data-world="rift"] {
    --bg: #fbf1e4;
    --surface: rgba(255, 250, 242, .86);
    --surface-solid: #fffaf2;
    --surface-2: #f6e8ff;
    --ink: #2a1d3f;
    --muted: #7a6a8e;
    --line: #e6d2f2;
    --hover: #f6e8ff;
    --cell: #fffdf8;
    --cell-ink: #2a1d3f;
    --block: radial-gradient(circle at 30% 35%, rgba(255, 230, 160, .9) 0 1px, transparent 1.7px) 0 0 / 15px 15px, linear-gradient(160deg, #4a1f9a, #1a0a40);
    --grid: #b48a3a;
    --num: #9b6bff;
    --accent: #7a3cff;
    --accent-2: #d9a640;
    --accent-ink: #ffffff;
    --word: #f1e2ff;
    --sel: #ffe2a0;
    --solved: #fff3d0;
    --good: #2a9a6a;
    --wrong: #d6336c;
    --revealed: #c9902f;
    --radius: 18px;
    --radius-sm: 12px;
    --cell-radius: 4px;
    --shadow: 0 10px 26px rgba(122, 60, 255, .16);
    --board-shadow: 0 0 0 3px #e8c66a, 0 0 0 7px #fffaf2, 0 0 0 9px #b48a3a, 0 16px 40px rgba(122, 60, 255, .25);
    --font-body: "Nunito", system-ui, sans-serif;
    --font-head: "Cinzel", serif;
    --font-cell: "Cinzel", serif;
    --head-scale: .92;
    --cell-weight: 700;
}
[data-world="rift"][data-theme="dark"] {
    --bg: #07031a;
    --surface: rgba(24, 12, 54, .78);
    --surface-solid: #170a36;
    --surface-2: rgba(122, 60, 255, .2);
    --ink: #f6eeff;
    --muted: #b9a6dc;
    --line: rgba(232, 198, 106, .3);
    --hover: rgba(122, 60, 255, .2);
    --cell: rgba(22, 10, 50, .92);
    --cell-ink: #fff6d8;
    --block: radial-gradient(circle at 30% 35%, rgba(255, 240, 200, .85) 0 1px, transparent 1.7px) 0 0 / 15px 15px, radial-gradient(circle at 70% 75%, rgba(200, 160, 255, .6) 0 1px, transparent 1.6px) 0 0 / 21px 21px, #04020c;
    --grid: rgba(232, 198, 106, .55);
    --num: #e8c66a;
    --accent: #e8c66a;
    --accent-2: #9b6bff;
    --accent-ink: #1a0a36;
    --word: rgba(122, 60, 255, .32);
    --sel: rgba(232, 198, 106, .42);
    --solved: rgba(232, 198, 106, .14);
    --good: #8ae0b8;
    --wrong: #ff6a9a;
    --revealed: #ffb86b;
    --shadow: 0 0 0 1px rgba(232, 198, 106, .14), 0 10px 30px rgba(0, 0, 0, .5);
    --board-shadow: 0 0 0 2px #e8c66a, 0 0 0 6px #170a36, 0 0 0 7px rgba(232, 198, 106, .5), 0 0 46px rgba(155, 107, 255, .35);
    color-scheme: dark;
}
[data-world="rift"] .logo-text::before { content: "\1F320\00a0"; }
[data-world="rift"] .card-head h2, [data-world="rift"] .game-titles h1, [data-world="rift"] .hero-title, [data-world="rift"] .page-head h1,
[data-world="rift"] .clues h2, [data-world="rift"] .res-title, [data-world="rift"] .settings legend { letter-spacing: .06em; }
[data-world="rift"][data-theme="dark"] .hero-title, [data-world="rift"][data-theme="dark"] .res-title { text-shadow: 0 0 22px rgba(232, 198, 106, .55); }
[data-world="rift"] .btn.primary, [data-world="rift"] .modes a.active, [data-world="rift"] .difficulty button.active, [data-world="rift"] .opt input:checked + span {
    background: linear-gradient(135deg, #7a3cff, #b46bff 55%, #d9a640);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 16px rgba(122, 60, 255, .4);
}
[data-world="rift"][data-theme="dark"] .btn.primary, [data-world="rift"][data-theme="dark"] .modes a.active, [data-world="rift"][data-theme="dark"] .difficulty button.active, [data-world="rift"][data-theme="dark"] .opt input:checked + span {
    background: linear-gradient(135deg, #f2d27a, #e8b84a 55%, #c49bff);
    color: #1a0a36;
    box-shadow: 0 0 18px rgba(232, 198, 106, .5);
}
[data-world="rift"] .board { overflow: visible; }
[data-world="rift"] .cell .ltr { text-shadow: 0 0 1px rgba(155, 107, 255, .2); }
[data-world="rift"][data-theme="dark"] .cell .ltr { text-shadow: 0 0 10px rgba(255, 220, 140, .65); }
[data-world="rift"] .cell.selected { animation: rf-pulse 1.8s ease-in-out infinite; }
@keyframes rf-pulse { 50% { box-shadow: inset 0 0 0 2px #e8c66a, 0 0 18px rgba(232, 198, 106, .55); } }
[data-world="rift"] .cell.typed .ltr { animation: rf-ltr .3s ease-out; }
@keyframes rf-ltr { 0% { transform: translateY(-6px) scale(1.25); text-shadow: 0 0 22px #fff6d8, 0 0 34px #e8c66a; } }
.rf-halo { fill: none; stroke: #e8c66a; stroke-width: .03; stroke-linecap: round; stroke-dasharray: 1; }
.rf-halo-glow { fill: none; stroke: rgba(255, 214, 120, .45); stroke-width: .1; stroke-linecap: round; stroke-dasharray: 1; }
.deco-word.grow .rf-halo, .deco-word.grow .rf-halo-glow { animation: draw .7s ease-out backwards; }
.rf-star { fill: #fff6d8; stroke: #e8c66a; stroke-width: .012; transform-box: fill-box; transform-origin: center; animation: twinkle 3s ease-in-out infinite; }
.deco-word.grow .rf-star { animation: star-pop .55s cubic-bezier(.2, 1.8, .4, 1) backwards, twinkle 3s ease-in-out infinite; }
.board.rf-solved { box-shadow: 0 0 0 3px #fff6d8, 0 0 0 7px #e8c66a, 0 0 60px rgba(255, 214, 120, .7); }
/* the title card: a stained-glass rose window */
.tc-rift { background: radial-gradient(circle, rgba(60, 20, 120, .35), rgba(8, 2, 24, .7)); }
.tcr-window { position: relative; display: grid; place-items: center; width: min(340px, 72vw); aspect-ratio: 1; animation: tcr-in 1s cubic-bezier(.2, .9, .3, 1) backwards; }
.tcr-rose { position: absolute; inset: 0; animation: tcr-spin 14s linear infinite; filter: drop-shadow(0 0 24px rgba(155, 107, 255, .6)) drop-shadow(0 0 4px rgba(232, 198, 106, .9)); }
.tcr-rose svg { width: 100%; height: 100%; }
.tcr-text { position: relative; display: grid; place-content: center; width: 58%; aspect-ratio: 1; padding: 14px 6px; border-radius: 50%; background: radial-gradient(circle, #fff6d8, #f2d27a 70%, #c9902f); color: #2a1d3f; text-align: center; box-shadow: 0 0 0 3px #2a1d3f, 0 0 30px rgba(255, 220, 140, .8); }
.tcr-text small { font: 800 .62rem "Nunito", sans-serif; letter-spacing: .14em; color: #6b3fd6; }
.tcr-text h2 { margin: 2px 0; font: 700 clamp(1rem, 4.4vw, 1.5rem) "Cinzel", serif; line-height: 1.05; }
.tcr-text p { margin: 0; font: 700 .7rem "Nunito", sans-serif; color: #5a4a6e; }
@keyframes tcr-in { from { opacity: 0; transform: scale(.4) rotate(-40deg); filter: brightness(3); } }
@keyframes tcr-spin { to { transform: rotate(360deg); } }
.tc.out .tcr-window { animation: tcr-out .5s ease-in forwards; }
@keyframes tcr-out { to { opacity: 0; transform: scale(1.35); filter: brightness(2.5) blur(3px); } }