/* ============================================================ НЕОН / СВЕРХТЕХ — animated futuristic skin (v2.3) Activated by data-skin="neon" on . Deep violet + neon glow, living drifting aurora. Reversible (skin attribute). ============================================================ */ /* 1. Tokens — violet glass */ :root[data-skin="neon"]{ --blue:#8B6CFF !important; --glass-bg:linear-gradient(180deg,rgba(38,30,68,.54),rgba(20,15,38,.62)); --glass-bg-2:linear-gradient(180deg,rgba(46,36,80,.5),rgba(26,20,48,.58)); --glass-brd:rgba(150,120,255,.24); --glass-hl:rgba(196,176,255,.16); --glass-shadow:0 18px 46px rgba(14,6,40,.6); --glass-blur:blur(28px) saturate(155%); } /* 2. Deep violet base + living drifting aurora */ :root[data-skin="neon"]{ background: radial-gradient(60% 50% at 16% 0%, rgba(124,77,255,.30), transparent 60%), radial-gradient(55% 45% at 90% 6%, rgba(34,211,255,.20), transparent 60%), radial-gradient(72% 56% at 50% 110%, rgba(255,61,166,.16), transparent 62%), #08060F !important; background-attachment:fixed; } :root[data-skin="neon"] body::before{ content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none; background: radial-gradient(36% 30% at 24% 26%, rgba(124,77,255,.50), transparent 60%), radial-gradient(32% 28% at 78% 18%, rgba(34,211,255,.34), transparent 60%), radial-gradient(40% 34% at 60% 84%, rgba(255,61,166,.30), transparent 62%); filter:blur(46px); animation:neonDrift 22s ease-in-out infinite alternate; } @keyframes neonDrift{ 0%{transform:translate(-4%,-2%) scale(1.05) rotate(0deg);opacity:.82} 50%{opacity:1} 100%{transform:translate(4%,3%) scale(1.2) rotate(9deg);opacity:.8} } @media (prefers-reduced-motion:reduce){:root[data-skin="neon"] body::before{animation:none}} /* 3. Chrome — neon violet/cyan */ :root[data-skin="neon"] .app-header{background:rgba(12,9,22,.66)!important} :root[data-skin="neon"] .header-title::before, :root[data-skin="neon"] .splash-logo, :root[data-skin="neon"] .about-logo{background:linear-gradient(140deg,#9B6CFF,#22D3FF)!important;box-shadow:0 0 24px rgba(124,77,255,.6),inset 0 1px 0 rgba(255,255,255,.3)!important} :root[data-skin="neon"] .header-action{color:#22D3FF!important} :root[data-skin="neon"] .hero-greeting{background:linear-gradient(100deg,#BBA4FF,#22D3FF)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 0 16px rgba(124,77,255,.42))} :root[data-skin="neon"] #runTime{background:linear-gradient(180deg,#CBB8FF,#22D3FF)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:0 0 34px rgba(124,77,255,.55)!important} :root[data-skin="neon"] .splash-screen{background:radial-gradient(60% 45% at 18% 10%,rgba(124,77,255,.4),transparent 60%),radial-gradient(55% 42% at 85% 8%,rgba(34,211,255,.3),transparent 60%),#08060F !important} /* 4. Home module tiles — violet-glass + neon glyphs */ :root[data-skin="neon"] #view-menu .module-row[data-go]{background:var(--glass-bg)!important;box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hl)!important} :root[data-skin="neon"] #view-menu .module-row[data-go] .module-icon{background:linear-gradient(150deg,#2C2256,#181034)!important;box-shadow:inset 0 0 0 1px rgba(150,120,255,.35),0 0 18px rgba(124,77,255,.35)!important} :root[data-skin="neon"] #view-menu .module-row[data-go] .module-icon svg{fill:#CBB8FF!important} /* 5. CTAs — violet -> magenta with glow */ :root[data-skin="neon"] .btn-primary, :root[data-skin="neon"] .btn-green, :root[data-skin="neon"] .slp-add, :root[data-skin="neon"] .slp-save, :root[data-skin="neon"] .obj-add, :root[data-skin="neon"] .tsk-add-btn, :root[data-skin="neon"] .rit-save, :root[data-skin="neon"] .trk-save, :root[data-skin="neon"] .wk-share, :root[data-skin="neon"] .foc-start-grad, :root[data-skin="neon"] .tt-mega-add{background:linear-gradient(135deg,#8B5CFF,#E13DBA)!important;color:#fff!important;box-shadow:0 8px 28px rgba(124,77,255,.5),inset 0 1px 0 rgba(255,255,255,.25)!important;text-shadow:none!important} :root[data-skin="neon"] .btn-tinted{background:rgba(124,77,255,.2)!important;color:#BBA4FF!important} /* 6. Level card + ranks -> neon */ :root[data-skin="neon"] .lvl-card{--rankrgb:139,108,255!important;--rank:#9B7CFF!important} :root[data-skin="neon"] .lvl-card::before{background:radial-gradient(170px 105px at 12% 50%,rgba(124,77,255,.36),transparent 72%)!important} :root[data-skin="neon"] .lvl-em .rank-gl, :root[data-skin="neon"] .lvl-badge svg{fill:#CBB8FF!important} :root[data-skin="neon"] .lvl-num{color:#22D3FF!important} :root[data-skin="neon"] .quest-ic, :root[data-skin="neon"] .rem-nudge-ic{background:linear-gradient(150deg,#2C2256,#181034)!important;box-shadow:inset 0 0 0 1px rgba(150,120,255,.32)!important} :root[data-skin="neon"] .quest-ic svg, :root[data-skin="neon"] .rem-nudge-ic svg{fill:#CBB8FF!important} :root[data-skin="neon"] .quest-ck.done{background:#8B5CFF!important;border-color:#8B5CFF!important} /* 7. Accent gradients + hero numbers -> neon */ :root[data-skin="neon"] .g-focus, :root[data-skin="neon"] .g-time{background:linear-gradient(135deg,#8B5CFF,#22D3FF)!important} :root[data-skin="neon"] .g-stats, :root[data-skin="neon"] .g-diary{background:linear-gradient(135deg,#9B6CFF,#E13DBA)!important} :root[data-skin="neon"] .ach-hero-num, :root[data-skin="neon"] .wk-hero-num, :root[data-skin="neon"] .dtx-hero-num, :root[data-skin="neon"] .path-rank, :root[data-skin="neon"] .slp-hero-num{background:linear-gradient(135deg,#BBA4FF,#22D3FF)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important} :root[data-skin="neon"] .timer-phase-label.free{color:#22D3FF!important} /* 8. Subtle neon edge on key cards */ :root[data-skin="neon"] .lvl-card, :root[data-skin="neon"] .quests-card, :root[data-skin="neon"] .rem-nudge, :root[data-skin="neon"] .wk-tile, :root[data-skin="neon"] .anl-card{box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hl),0 0 0 1px rgba(124,77,255,.10)!important} :root[data-skin="neon"] .seg-btn.active{color:#22D3FF!important}