so the host overlays (in ) are untouched. Keys off --neon. */ /* ---------- Atmospheric background (no grid — just light & depth) ---------- */ main.h-screen.w-screen, main.min-h-screen { background-color: var(--background) !important; background-image: radial-gradient(120% 82% at 50% -12%, color-mix(in oklab, var(--neon) 17%, transparent), transparent 55%), radial-gradient(170% 135% at 50% 38%, transparent 44%, rgba(0, 0, 0, .76) 100%), radial-gradient(1250px 720px at 11% -12%, color-mix(in oklab, var(--neon) 26%, transparent), transparent 60%), radial-gradient(1150px 780px at 106% 3%, color-mix(in oklab, var(--neon) 15%, transparent), transparent 56%), radial-gradient(1600px 1350px at 50% 132%, color-mix(in oklab, var(--neon) 14%, transparent), transparent 62%) !important; background-attachment: fixed !important; } /* ---------- Glassy panels ---------- */ main .rounded-2xl.border, main .rounded-xl.border { background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012)) !important; border-color: rgba(255, 255, 255, .11) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 1px rgba(0, 0, 0, .5), 0 26px 54px -28px rgba(0, 0, 0, .92) !important; } /* Active team panel — lift with a slow breathing neon halo */ main .neon-ring { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px color-mix(in oklab, var(--neon) 60%, transparent), 0 0 40px -2px color-mix(in oklab, var(--neon) 52%, transparent), 0 26px 54px -26px rgba(0, 0, 0, .95) !important; animation: wtbHalo 3.6s ease-in-out infinite; } @keyframes wtbHalo { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px color-mix(in oklab, var(--neon) 74%, transparent), 0 0 56px 1px color-mix(in oklab, var(--neon) 62%, transparent), 0 26px 54px -26px rgba(0, 0, 0, .95); } } /* ---------- Board "screen" — recess it for depth ---------- */ main section > .rounded-2xl.border { background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .3)) !important; box-shadow: inset 0 0 110px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .05), 0 34px 64px -30px rgba(0, 0, 0, .9) !important; } /* ---------- Split-flap tiles: a clean mechanical look, IDENTICAL every cell ---------- No per-letter styling, no opacity difference — a hidden row gives nothing away. */ main.h-screen.w-screen .flap { background: linear-gradient(180deg, color-mix(in oklab, var(--flap) 88%, white 6%) 0%, color-mix(in oklab, var(--flap) 91%, white 2%) 47.5%, var(--flap-edge) 49.5%, var(--flap-edge) 50.5%, color-mix(in oklab, var(--flap) 95%, black 7%) 52.5%, color-mix(in oklab, var(--flap) 84%, black 11%) 100%) !important; border: 1px solid color-mix(in oklab, var(--neon) 8%, #000 80%) !important; border-radius: 9px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 5px rgba(0, 0, 0, .5), 0 5px 0 -1px var(--flap-edge), 0 11px 18px -10px rgba(0, 0, 0, .7) !important; } /* unify opacity so empty cells are indistinguishable from letter cells */ main.h-screen.w-screen .flap-letter { opacity: 1 !important; } /* ---------- Answer: a neon "backplate" so it reads as a key game element ---------- Top-down neon gradient panel; the clickable answer bar + uniform tiles sit on it. */ main.h-screen.w-screen .rounded-xl.p-1 { background: linear-gradient(180deg, color-mix(in oklab, var(--neon) 32%, var(--background)) 0%, color-mix(in oklab, var(--neon) 9%, var(--background)) 52%, var(--background) 100%) !important; border: 1px solid color-mix(in oklab, var(--neon) 40%, transparent) !important; border-radius: 18px !important; padding: 11px 16px 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 46px -12px color-mix(in oklab, var(--neon) 58%, transparent), 0 22px 46px -22px rgba(0, 0, 0, .85) !important; } main.h-screen.w-screen .rounded-xl.p-1 > button { background: linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .52)) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; padding: 8px 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 34px rgba(0, 0, 0, .5) !important; } /* answer tiles match the board tiles (uniform → length stays hidden) */ main.h-screen.w-screen .rounded-xl.p-1 .flap-letter { background: linear-gradient(180deg, color-mix(in oklab, var(--flap) 88%, white 6%) 0%, color-mix(in oklab, var(--flap) 91%, white 2%) 47.5%, var(--flap-edge) 49.5%, var(--flap-edge) 50.5%, color-mix(in oklab, var(--flap) 95%, black 7%) 52.5%, color-mix(in oklab, var(--flap) 84%, black 11%) 100%) !important; color: #fff !important; border: 1px solid color-mix(in oklab, var(--neon) 8%, #000 80%) !important; } /* ---------- Buttons ---------- */ main .neon-btn-solid { background-image: linear-gradient(180deg, color-mix(in oklab, var(--neon) 100%, white 10%), color-mix(in oklab, var(--neon) 86%, black 14%)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 28px -4px color-mix(in oklab, var(--neon) 75%, transparent), 0 12px 30px -12px rgba(0, 0, 0, .85) !important; } main .neon-btn { background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)) !important; } /* ---------- Headings ---------- */ main .neon-text { text-shadow: 0 0 10px color-mix(in oklab, var(--neon) 58%, transparent), 0 0 34px color-mix(in oklab, var(--neon) 30%, transparent) !important; }