:root { --ink: #f2f5f8; --muted: #9ba8bb; --line: rgba(255,255,255,.13); --line-strong: rgba(255,255,255,.22); --panel: #121829; --panel-soft: #1a2335; --bg: #080c14; --sidebar: #0a0f1a; --accent: #78a6ff; --accent-2: #42c99b; --danger: #ff806e; --warm: #d7a84a; --shadow: 0 18px 38px color-mix(in srgb, var(--bg) 70%, black); --shadow-low: 0 4px 12px color-mix(in srgb, var(--bg) 75%, black); } html { scroll-behavior: smooth; } body[data-theme="light"] { --ink: #172033; --muted: #647086; --line: #d9e0ea; --line-strong: #c6d0df; --panel: #ffffff; --panel-soft: #f0f4f8; --bg: #e6edf5; --sidebar: #f8fafc; --accent: #2850d8; --accent-2: #18866e; --danger: #c95538; --warm: #a97813; --shadow: 0 10px 26px rgba(33,45,71,.09); --shadow-low: 0 1px 2px rgba(33,45,71,.08); } /* Light mode: elements with hardcoded dark text need white text on dark accent/accent-2 backgrounds */ body[data-theme="light"] .primary-button, body[data-theme="light"] .segment.active { color: #fff; } body[data-theme="light"] .match-tile.matched { color: #fff; } body[data-theme="light"] .avatar { color: #fff; } body[data-theme="light"] .toast { color: #fff; } /* Light mode: inputs should be white, not gray */ body[data-theme="light"] input, body[data-theme="light"] textarea, body[data-theme="light"] select { background: #ffffff; border-color: var(--line-strong); } /* Light mode: ghost/soft buttons need readable borders */ body[data-theme="light"] .ghost-button { border-color: var(--line-strong); } body[data-theme="light"] .soft-button { background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); } body[data-theme="forest"] { --bg:#071b16; --sidebar:#0d241d; --panel:#123126; --panel-soft:#183d30; --accent:#62d18f; --accent-2:#b7d86a; --warm:#e2be63; } body[data-theme="sunset"] { --bg:#211116; --sidebar:#2b1720; --panel:#351d28; --panel-soft:#442637; --accent:#ff8f70; --accent-2:#ffd36a; --warm:#ffc15c; } body[data-theme="aurora"] { --bg:#101426; --sidebar:#141b33; --panel:#192341; --panel-soft:#223057; --accent:#6ee7f9; --accent-2:#b58cff; --warm:#f3d36b; } body[data-theme="candy"] { --bg:#201326; --sidebar:#2d1836; --panel:#3a2047; --panel-soft:#4a2a5a; --accent:#ff8bd1; --accent-2:#7be5ff; --warm:#ffe071; } /* 👹 DEMON - secret theme, unlocks at 100 mastered */ body[data-theme="demon"] { --bg:#0d0005; --sidebar:#160008; --panel:#1e000c; --panel-soft:#2a0011; --accent:#ff1a3c; --accent-2:#ff6b00; --warm:#ff9500; --danger:#ff1a3c; --ink:#ffeef0; --muted:#c47080; --line:rgba(255,26,60,.18); --line-strong:rgba(255,26,60,.32); --shadow: 0 18px 48px rgba(200,0,30,.35); } body[data-theme="demon"] .brand-mark { background: linear-gradient(135deg, #ff1a3c, #ff6b00); } body[data-theme="demon"] .flashcard-face::before { background: linear-gradient(#ff1a3c, #ff6b00); } * { box-sizing: border-box; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } body { position: relative; margin: 0; min-height: 100dvh; color: var(--ink); background: var(--bg); font-family: "Nunito", sans-serif; letter-spacing: 0; } .app-shell, .auth-screen { position: relative; z-index: 1; } /* ════════════════════════════════════════════════════════════════════════ AMBIENT BACKDROP SYSTEM Fixed, full-viewport, purely decorative. Themed by body[data-theme] and reacts to whichever view is active via :has() — no JS hooks needed. ════════════════════════════════════════════════════════════════════════ */ .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); } .backdrop-layer { position: absolute; inset: -10%; transition: opacity 1.1s ease, background 1.1s ease; filter: blur(0px); } .backdrop-grain { position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── DARK (default) — deep space, drifting nebula ── */ body[data-theme="dark"] .layer-mid { background: radial-gradient(46% 38% at 18% 22%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(40% 34% at 84% 70%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%); filter: blur(60px); opacity: .8; animation: nebulaDrift 50s ease-in-out infinite alternate; } body[data-theme="dark"] .layer-near { background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); opacity: .5; } @keyframes starDrift { from { transform: translate(0,0); } to { transform: translate(-2%, -2%); } } @keyframes nebulaDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(3%, -2%) scale(1.06); } } /* ── LIGHT — sunny, airy, soft daylight blur ── */ body[data-theme="light"] .layer-far { background: linear-gradient(180deg, #cfe6ff 0%, #eaf1f9 55%, #fdf3e3 100%); } body[data-theme="light"] .layer-mid { background: radial-gradient(38% 32% at 20% 14%, color-mix(in srgb, #fff6da 80%, transparent), transparent 70%), radial-gradient(42% 36% at 80% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%), radial-gradient(50% 40% at 60% 90%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 72%); filter: blur(70px); opacity: .9; animation: cloudDrift 60s ease-in-out infinite alternate; } body[data-theme="light"] .layer-near { background: radial-gradient(40% 30% at 50% -5%, color-mix(in srgb, #fff 60%, transparent), transparent 70%); } @keyframes cloudDrift { from { transform: translate(0,0); } to { transform: translate(-3%, 2%); } } /* ── AURORA — flowing northern-light bands, WebGL shader (see initAuroraBackground in script.js). When "Fancy graphics" is off, the canvas hides and the old static conic-gradient swirl shows instead. ── */ body[data-theme="aurora"] .layer-far { background: radial-gradient(120% 90% at 50% -10%, #0c1530, var(--bg) 60%); } body[data-theme="aurora"] .layer-mid { background: conic-gradient(from 200deg at 50% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 18%, color-mix(in srgb, var(--accent-2) 26%, transparent) 32%, transparent 50%, color-mix(in srgb, var(--warm) 14%, transparent) 64%, transparent 80%); filter: blur(50px); opacity: 0; } body.reduce-motion[data-theme="aurora"] .layer-mid { opacity: .7; } body[data-theme="aurora"] .layer-near { background-image: radial-gradient(1px 1px at 10% 20%, #fff 90%, transparent), radial-gradient(1px 1px at 70% 60%, #fff 90%, transparent), radial-gradient(1px 1px at 40% 80%, #fff 90%, transparent); opacity: .4; } .aurora-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; } body[data-theme="aurora"]:not(.reduce-motion) .aurora-canvas { opacity: .85; } /* ── SUNSET — layered horizon glow, animated sun rise/set cycle (see initSunsetCycleBackground in script.js). The background/opacity below are the static fallback shown when JS hasn't taken over yet, or when "Fancy graphics" is off (the cycle freezes at this exact look). ── */ body[data-theme="sunset"] .layer-far { background: linear-gradient(180deg, #1c0e22 0%, #4a1d30 38%, #c44b3f 62%, #ffb454 84%, #ffd98a 100%); } body[data-theme="sunset"] .layer-mid { background: radial-gradient(60% 30% at 50% 88%, color-mix(in srgb, #ffe2a0 75%, transparent), transparent 75%); filter: blur(40px); opacity: .85; } body[data-theme="sunset"] .layer-near { background: linear-gradient(180deg, transparent 0%, transparent 70%, color-mix(in srgb, var(--bg) 70%, black) 100%); opacity: .5; } /* ── CANDY — dreamy dusk, soft pink/lavender cloud gradients, faint dot-grid (see initCandyDotGridBackground in script.js). Ported from reactbits.dev/backgrounds/dot-grid, toned down: no GSAP, no click shockwave, just a quiet proximity glow. When "Fancy graphics" is off, the canvas hides and the old static cloud-gradient swirl shows instead. ── */ body[data-theme="candy"] .layer-far { background: linear-gradient(165deg, #241430 0%, #3a1f47 50%, #5a2c5e 100%); } body[data-theme="candy"] .layer-mid { background: radial-gradient(40% 34% at 25% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%), radial-gradient(46% 38% at 78% 65%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 72%), radial-gradient(34% 30% at 55% 92%, color-mix(in srgb, var(--warm) 24%, transparent), transparent 72%); filter: blur(65px); opacity: 0; animation: cloudDrift 46s ease-in-out infinite alternate; } body.reduce-motion[data-theme="candy"] .layer-mid { opacity: .85; } body[data-theme="candy"] .layer-near { background: radial-gradient(50% 40% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 75%); } .dot-grid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; } body[data-theme="candy"]:not(.reduce-motion) .dot-grid-canvas { opacity: .45; } /* ── FOREST — canopy light, dappled shade, raymarched pixel-snow (see initForestSnowBackground in script.js). Ported from reactbits.dev/backgrounds/pixel-snow (a Three.js voxel-raymarch shader), rewritten against raw WebGL2 since this project has no build step. When "Fancy graphics" is off, the canvas hides and the old static canopy-glow gradient shows instead. ── */ body[data-theme="forest"] .layer-far { background: linear-gradient(165deg, #051712 0%, #0c2a1f 60%, #123b29 100%); } body[data-theme="forest"] .layer-mid { background: radial-gradient(30% 50% at 12% 0%, color-mix(in srgb, var(--warm) 18%, transparent), transparent 70%), radial-gradient(46% 60% at 90% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 75%); filter: blur(55px); opacity: 0; animation: canopySway 24s ease-in-out infinite alternate; } body.reduce-motion[data-theme="forest"] .layer-mid { opacity: .8; } .forest-snow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; } body[data-theme="forest"]:not(.reduce-motion) .forest-snow-canvas { opacity: .8; } @keyframes canopySway { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-1.5%) rotate(0.6deg); } } /* ── DEMON — deep garnet glow, ember particles, glitching terminal (see initDemonTerminalBackground in script.js). Ported from reactbits.dev/backgrounds/faulty-terminal, rewritten against raw WebGL1 instead of OGL since this project has no build step. When "Fancy graphics" is off, the canvas hides and the old static garnet glow shows instead. ── */ body[data-theme="demon"] .layer-far { background: radial-gradient(120% 90% at 50% 110%, #3a0a12, var(--bg) 65%); } body[data-theme="demon"] .layer-mid { background: radial-gradient(40% 34% at 30% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%), radial-gradient(44% 38% at 75% 75%, color-mix(in srgb, var(--warm) 18%, transparent), transparent 72%); filter: blur(60px); opacity: 0; animation: nebulaDrift 40s ease-in-out infinite alternate; } body.reduce-motion[data-theme="demon"] .layer-mid { opacity: .85; } .demon-terminal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; } body[data-theme="demon"]:not(.reduce-motion) .demon-terminal-canvas { opacity: .5; } body[data-theme="demon"] .layer-near { background-image: radial-gradient(2px 2px at 20% 30%, color-mix(in srgb, var(--warm) 90%, transparent) 90%, transparent), radial-gradient(1.5px 1.5px at 60% 70%, color-mix(in srgb, var(--accent) 90%, transparent) 90%, transparent), radial-gradient(1.5px 1.5px at 80% 20%, color-mix(in srgb, var(--warm) 90%, transparent) 90%, transparent); opacity: .5; animation: starDrift 90s linear infinite; } /* ── Per-view mood shifts (works across themes via :has(), no JS needed) ── */ body:has(#gamesView.active) .layer-mid { filter: blur(45px); opacity: .95; } body:has(#browseView.active) .layer-far { filter: saturate(1.08); } /* Browse → Community tab goes full cosmic regardless of theme: published sets become "stars" */ body:has(#browseCommunity:not(.hidden)) .backdrop { background: #060a16; } body:has(#browseCommunity:not(.hidden)) .layer-far { background-image: radial-gradient(1.5px 1.5px at 6% 12%, #fff 95%, transparent), radial-gradient(1px 1px at 16% 70%, #fff 95%, transparent), radial-gradient(1.5px 1.5px at 28% 34%, #fff 95%, transparent), radial-gradient(1px 1px at 41% 82%, #fff 95%, transparent), radial-gradient(2px 2px at 53% 18%, #fff 95%, transparent), radial-gradient(1px 1px at 64% 58%, #fff 95%, transparent), radial-gradient(1.5px 1.5px at 77% 90%, #fff 95%, transparent), radial-gradient(1px 1px at 88% 30%, #fff 95%, transparent), radial-gradient(1.5px 1.5px at 95% 66%, #fff 95%, transparent), radial-gradient(1px 1px at 35% 5%, #fff 95%, transparent), radial-gradient(1px 1px at 70% 8%, #fff 95%, transparent); background-color: #060a16; opacity: .85; animation: starDrift 160s linear infinite; } body:has(#browseCommunity:not(.hidden)) .layer-mid { background: radial-gradient(50% 40% at 50% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 75%); filter: blur(70px); } button, input, textarea, select { font: inherit; } button { border: 0; cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .54; } button:not(:disabled):active:not(.circle-menu-item):not(.circle-menu-hub) { transform: scale(0.97) !important; } button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .flashcard:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent); outline-offset: 2px; } .skip-link { position: absolute; top: -100%; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #07101d; font-weight: 760; font-size: .88rem; transition: top .15s ease; } .skip-link:focus-visible { top: 12px; } h1, h2, p { margin: 0; } h1 { max-width: 680px; font-size: clamp(2rem, 3.2vw, 3.35rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: pretty; } p { text-wrap: pretty; } #masteryPercent, #cardMasteryPercent, #cardCounter, #adCountdown, .lobby-num-label input, #matchClock, #rushTimer, #quizScore, #quizProgress, #quizTimerDisplay { font-variant-numeric: tabular-nums; } .hidden { display: none !important; } .app-shell { display: grid; grid-template-columns: 292px minmax(0,1fr); min-height: 100dvh; } .boot-loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; } .boot-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: boot-spin .7s linear infinite; } @media (prefers-reduced-motion: reduce) { .boot-spinner { animation: none; opacity: .6; } } @keyframes boot-spin { to { transform: rotate(360deg); } } /* Infinite grid hero background, behind the sign-in screen */ .auth-screen { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 100dvh; padding: 28px; } .auth-grid-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .auth-panel, .deck-panel, .theme-panel, .editor-panel, .progress-panel, .policy-panel { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(150%); } .auth-panel { position: relative; overflow: hidden; display: grid; align-content: center; gap: 16px; width: min(440px, 100%); padding: clamp(28px,5vw,48px); background: color-mix(in srgb, var(--panel) 99%, transparent); } .auth-panel::before { content: ""; position: absolute; top: -120px; right: -100px; z-index: 0; width: 280px; height: 280px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, transparent); filter: blur(90px); } .auth-panel > * { position: relative; z-index: 1; } .auth-brand { margin-bottom: 4px; } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--sidebar) 94%, transparent); } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 850; } .brand strong, .brand span { display: block; } .brand span, .user-panel span, .eyebrow, .ad-slot span, .card-kicker, .game-over span { color: var(--muted); font-size: .75rem; font-weight: 720; text-transform: uppercase; } .user-panel { display: grid; grid-template-columns: 42px minmax(0,1fr) 40px; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); } .user-panel strong, .user-panel span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #08121e; background: var(--accent-2); font-weight: 850; overflow: hidden; } .avatar img, .circle-menu-hub img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-tabs, .deck-list, .theme-list, .card-editor, .ai-results { display: grid; gap: 8px; } .nav-tab, .soft-button, .ghost-button, .google-button, .primary-button, .segment, .icon-button, .theme-chip { min-height: 40px; border-radius: 10px; transition: transform .16s cubic-bezier(0.23,1,0.32,1), background .16s cubic-bezier(0.23,1,0.32,1), color .16s cubic-bezier(0.23,1,0.32,1), border-color .16s cubic-bezier(0.23,1,0.32,1), box-shadow .16s cubic-bezier(0.23,1,0.32,1); } .nav-tab:hover, .soft-button:hover, .ghost-button:hover, .google-button:hover, .primary-button:hover, .segment:hover, .icon-button:hover, .theme-chip:hover { transform: translateY(-1px); } .nav-tab { padding: 0 14px; text-align: left; color: var(--muted); background: transparent; font-weight: 720; } .nav-tab:nth-child(1).active { box-shadow: inset 3px 0 0 var(--accent); } .nav-tab:nth-child(2).active { box-shadow: inset 3px 0 0 var(--accent-2); } .nav-tab:nth-child(3).active { box-shadow: inset 3px 0 0 var(--warm); } .nav-tab:nth-child(4).active { box-shadow: inset 3px 0 0 var(--danger); } .nav-tab:nth-child(5).active { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 50%, var(--accent-2)); } .nav-tab:nth-child(6).active { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warm) 50%, var(--accent)); } .nav-tab:hover, .nav-tab.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft)); } .deck-panel, .theme-panel { padding: 14px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-weight: 850; } .deck-item { display: grid; gap: 4px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 10px; color: var(--ink); background: var(--panel-soft); text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; } .deck-item.active { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 15%, var(--panel-soft)); transform: scale(1.015); } .deck-item span { color: var(--muted); font-size: .82rem; } .theme-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .theme-chip { border: 1px solid var(--line); color: var(--ink); background: var(--panel-soft); font-size: .82rem; font-weight: 760; } .theme-chip.active { border-color: var(--accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); } .theme-chip.theme-demon { border-color: rgba(255,26,60,.4); } .theme-chip.theme-demon.active { border-color: #ff1a3c; box-shadow: 0 0 12px rgba(255,26,60,.4); } /* Locked secret chip — show a subtle red pulse to tease it */ .theme-chip[title*="Secret"] { border-color: rgba(255,26,60,.25); animation: secretPulse 3s ease-in-out infinite; } @keyframes secretPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,26,60,0); } 50% { box-shadow: 0 0 8px rgba(255,26,60,.3); } } .ad-slot { position: relative; margin-top: auto; min-height: 126px; padding: 16px 16px 16px 19px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); overflow: hidden; } .ad-slot::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--warm); } .ad-slot span { display: inline-block; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--warm) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--warm) 14%, transparent); color: var(--warm); } .ad-slot .adsbygoogle { margin-top: 8px; } .ad-slot.hidden-ad { display: none; } .ad-slot.tall { min-height: 310px; } .ad-slot.video { min-height: 190px; } /* Main */ .main { min-width: 0; padding: 28px 30px; max-width: 1440px; margin: 0 auto; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .top-actions, .study-controls, .quick-actions, .game-tabs, .bulk-tools, .ai-controls, .import-options, .orientation-toggle, .game-hud, .card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .top-actions { justify-content: flex-end; } .limit-meter { width: 170px; color: var(--muted); font-size: .84rem; font-weight: 800; } .meter { height: 8px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--panel-soft) 80%, #000); } .meter div { height: 100%; width: 0%; border-radius: inherit; background: var(--accent-2); } .primary-button, .ghost-button, .soft-button { padding: 0 16px; font-weight: 760; } .primary-button { color: #07101d; background: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent); } .primary-button:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent); } .new-collection-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 10px; color: #07101d; background: var(--accent); font-weight: 760; font-size: .92rem; box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .16s cubic-bezier(0.23,1,0.32,1), box-shadow .16s ease; } .new-collection-btn:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent); } .ghost-button, .google-button { border: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb, var(--panel) 86%, transparent); } .ghost-button.danger { color: var(--danger); } .soft-button, .icon-button { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft)); } .danger-button { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--panel-soft)); } .danger-button:hover { background: color-mix(in srgb, var(--danger) 24%, var(--panel-soft)); } .icon-button { display: grid; width: 40px; place-items: center; font-size: 1.2rem; font-weight: 850; } .icon-button svg { width: 18px; height: 18px; flex-shrink: 0; } .reduce-motion-btn { width: 100%; margin-top: 10px; font-size: .82rem; } .password-field { position: relative; } #passwordInput { padding-right: 44px; } .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; width: 34px; height: 34px; place-items: center; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 8px; transition: color .14s ease; } .password-toggle:hover { color: var(--ink); } .password-toggle svg { width: 18px; height: 18px; } .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; font-weight: 720; } .auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); } .google-button { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 760; } .google-button span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 999px; color: #fff; background: #4285f4; font-size: .9rem; font-weight: 850; } .pulse-action { animation: shadowPulse 2.4s ease-in-out infinite; } /* Glowing Shadow button (recreated from 21st.dev/community/components/aliimam/glowing-shadow) */ @property --hue { syntax: ""; inherits: true; initial-value: 0; } @property --bg-y { syntax: ""; inherits: true; initial-value: 0; } @property --bg-x { syntax: ""; inherits: true; initial-value: 0; } @property --bg-size { syntax: ""; inherits: true; initial-value: 0; } @property --white-shadow { syntax: ""; inherits: true; initial-value: 0; } .glow-container { --card-color: hsl(222deg 38% 9%); --card-radius: 10px; --border-width: 2px; --bg-size: 1; --hue: 228; --hue-speed: 1; --animation-speed: 4s; --interaction-speed: .55s; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 6px; border-radius: calc(var(--card-radius) + 6px); cursor: pointer; } .glow-content { position: relative; z-index: 1; width: 100%; min-height: 40px; border: 0; border-radius: var(--card-radius); color: #fff; background: var(--card-color); font-weight: 760; cursor: pointer; } .glow-content::before { content: ""; position: absolute; inset: calc(var(--border-width) * -1); border-radius: calc(var(--card-radius) + var(--border-width)); box-shadow: 0 0 16px black; mix-blend-mode: color-burn; z-index: -1; background: hsl(0deg 0% 16%) radial-gradient( 30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 100% 90%) calc(0% * var(--bg-size)), hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 100% 80%) calc(20% * var(--bg-size)), hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 100% 60%) calc(40% * var(--bg-size)), transparent 100% ); opacity: 0; transition: --bg-size var(--interaction-speed) ease; } .glow-content.fields-ready::before { animation: hue-animation var(--animation-speed) ease-in-out 1, rotate-bg var(--animation-speed) ease-in-out 1, ring-reveal var(--animation-speed) ease-in-out 1; } .glow-container:hover .glow-content { box-shadow: 0 0 calc(var(--white-shadow) * 1.5px) calc(var(--white-shadow) * 0.4px) hsl(calc(var(--hue) * var(--hue-speed) * 1deg) 90% 65% / 32%); animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite, hue-animation var(--animation-speed) linear infinite; } @keyframes shadow-pulse { 0%, 24%, 46%, 73%, 96% { --white-shadow: .5; } 12%, 28%, 41%, 63%, 75%, 82%, 98% { --white-shadow: 2.5; } 6%, 32%, 57% { --white-shadow: 1.3; } 18%, 52%, 88% { --white-shadow: 3.5; } } @keyframes rotate-bg { 0% { --bg-x: 0; --bg-y: 0; } 25% { --bg-x: 100; --bg-y: 0; } 50% { --bg-x: 100; --bg-y: 100; } 75% { --bg-x: 0; --bg-y: 100; } 100% { --bg-x: 0; --bg-y: 0; } } @keyframes ring-reveal { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes hue-animation { 0% { --hue: 228; } 25% { --hue: 164; } 50% { --hue: 14; } 75% { --hue: 38; } 100% { --hue: 228; } } /* Views */ .view { display: none; opacity: 0; transform: translateY(4px); } .view.active { display: block; animation: panelFade .22s cubic-bezier(0.23,1,0.32,1) forwards; } .study-layout, .builder-grid, .ai-grid, .import-grid { display: grid; gap: 20px; } .study-layout { grid-template-columns: minmax(320px,1fr) 320px; } .builder-grid, .ai-grid { grid-template-columns: minmax(360px,1fr) 300px; } .import-grid { grid-template-columns: 1fr 1fr; } .orientation-toggle { margin-bottom: 12px; } .segment { padding: 0 16px; color: var(--muted); background: color-mix(in srgb, var(--panel-soft) 76%, #000); font-weight: 760; } .segment.active { color: #07101d; background: var(--accent); } /* Flashcard */ .flashcard { position: relative; min-height: 440px; border: 1px solid var(--line-strong); border-radius: 18px; outline: none; transform-style: preserve-3d; transition: transform .55s ease; box-shadow: var(--shadow); animation: cardFloat 6s ease-in-out infinite; } .flashcard.flipped { transform: rotateY(180deg); } .flashcard-face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 34px; border-radius: 18px; backface-visibility: hidden; background: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px), var(--panel); background-size: 100% 34px; text-align: center; overflow: hidden; } .flashcard-face::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; border-radius: 18px 0 0 18px; background: linear-gradient(var(--accent), var(--accent-2)); } .flashcard-face div { max-width: 780px; overflow-wrap: anywhere; font-size: clamp(1.85rem,4vw,3.8rem); font-weight: 840; line-height: 1.08; } .flashcard-face div.text-md { font-size: clamp(1.3rem,3vw,2.2rem); line-height: 1.15; } .flashcard-face div.text-sm { font-size: clamp(1rem,2.2vw,1.55rem); line-height: 1.25; font-weight: 760; } .flashcard-face div.text-xs { font-size: clamp(0.8rem,1.8vw,1.15rem); line-height: 1.35; font-weight: 720; } .flashcard-back { transform: rotateY(180deg); background: linear-gradient(color-mix(in srgb, var(--accent-2) 8%, transparent) 1px, transparent 1px), var(--panel); background-size: 100% 34px; } .study-controls { justify-content: center; margin-top: 16px; font-weight: 760; } /* Card actions */ .card-actions { justify-content: center; margin-top: 14px; gap: 12px; } .card-actions .soft-button { min-width: 140px; font-size: 1rem; font-weight: 760; } .study-controls-hint { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; color: var(--muted); font-size: .76rem; font-weight: 720; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 20px; width: fit-content; margin-left: auto; margin-right: auto; } .study-controls-hint kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); font-size: .74rem; font-family: inherit; background: var(--panel-soft); margin-right: 3px; } .answer-wrong { color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 14%, var(--panel-soft)) !important; } .answer-right { color: var(--accent-2) !important; background: color-mix(in srgb, var(--accent-2) 14%, var(--panel-soft)) !important; } .active-shuffle { color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; } /* Progress panel */ .progress-panel, .editor-panel, .policy-panel, .game-board { padding: 18px; } .mastery-card-row { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 12px; color: var(--muted); font-size: .8rem; font-weight: 720; } .mastery-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 14px; } .mastery-dot { aspect-ratio: 1; border-radius: 6px; background: var(--panel-soft); transition: background .3s ease, opacity .2s ease, outline-color .15s ease; } .mastery-dot:hover { transform: scale(1.12); transition: background .3s ease, transform .15s ease, opacity .2s ease; } .mastery-dot-current { outline: 2px solid var(--accent); outline-offset: 2px; } .mastery-dot-dimmed { opacity: .28; } /* Builder */ label { display: grid; gap: 8px; color: var(--muted); font-size: .85rem; font-weight: 720; } input:not([type="checkbox"]), textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: color-mix(in srgb, var(--panel) 82%, #000); font-weight: 560; } input:not([type="checkbox"]), select { min-height: 44px; padding: 0 12px; } textarea { resize: vertical; padding: 12px; line-height: 1.5; } .bulk-tools { margin: 14px 0; display: flex; gap: 10px; flex-wrap: wrap; } .edit-header-row { display: grid; grid-template-columns: 28px minmax(0,1fr) minmax(0,1.35fr) 40px; gap: 8px; padding: 0 0 8px; border-bottom: 2px solid var(--line-strong); margin-bottom: 4px; } .col-label { color: var(--muted); font-size: .8rem; font-weight: 760; text-transform: uppercase; letter-spacing: .04em; } .edit-row { display: grid; grid-template-columns: 28px minmax(0,1fr) minmax(0,1.35fr) 40px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); } .edit-row input { min-width: 0; } .row-num { color: var(--muted); font-size: .8rem; font-weight: 760; text-align: center; } .delete-row-btn { font-size: .9rem; } /* Games Lobby */ #gameLobby { padding: 0; } .lobby-header { margin-bottom: 20px; } .lobby-title { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 850; line-height: 1.1; margin: 0 0 4px; } .lobby-sub { color: var(--muted); margin: 0; font-size: .9rem; } .lobby-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; } .lobby-game-btn { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; text-align: left; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: color-mix(in srgb, var(--panel) 94%, transparent); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; cursor: pointer; } .lobby-game-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-low); } .lobby-game-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .lobby-game-btn strong { display: block; font-size: 1rem; font-weight: 850; } .lobby-game-btn span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.4; } .lobby-config { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 12px; } .lobby-config-row { display: flex; align-items: center; gap: 14px; } .lobby-option-label { color: var(--muted); font-size: .85rem; font-weight: 760; min-width: 80px; } .lobby-mode-options { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); } .lobby-num-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; font-weight: 760; } .lobby-num-label input { width: 64px; min-height: 36px; } .lobby-unit { color: var(--muted); font-size: .82rem; } .lobby-checkbox-label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .88rem; font-weight: 720; cursor: pointer; } .lobby-checkbox-label input[type="checkbox"] { width: 16px; min-height: 16px; accent-color: var(--accent); cursor: pointer; } .lobby-checkbox-label select { min-height: 36px; width: auto; padding: 0 10px; margin-left: 2px; } .lobby-divider { height: 1px; background: var(--line); margin: 2px 0; } .lobby-set-row { display: flex; justify-content: flex-end; } #startGameBtn { min-width: 110px; height: 44px; font-size: .95rem; } /* Quiz game */ .quiz-game { display: grid; gap: 16px; max-width: 820px; } .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quiz-option-btn { min-height: 54px; padding: 10px 16px; text-align: left; font-size: .95rem; white-space: normal; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .quiz-option-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .quiz-correct { border-color: var(--accent-2) !important; background: color-mix(in srgb, var(--accent-2) 18%, var(--panel)) !important; color: var(--ink) !important; } .quiz-wrong { border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 18%, var(--panel)) !important; color: var(--ink) !important; } #quizNext { justify-self: start; } /* Game board */ #gamePlay { min-height: 460px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: var(--shadow); padding: 18px; } .game-board { min-height: 420px; } .game-hud { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); } .match-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; } .match-tile { min-height: 118px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--panel); font-weight: 720; text-align: left; overflow-wrap: anywhere; box-shadow: var(--shadow-low); transition: transform .16s ease, border-color .16s ease, background .16s ease; } .match-tile:hover:not(.matched):not(.selected) { transform: translateY(-2px); } .match-tile.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); } .match-tile.matched { color: #07101d; background: var(--accent-2); border-color: var(--accent-2); } .type-game, .rush-game { display: grid; gap: 16px; max-width: 820px; } .prompt-card, .game-over { padding: 24px; border-radius: 14px; background: var(--panel-soft); border: 1px solid var(--line); } .prompt-card strong, .game-over strong { display: block; margin-top: 8px; font-size: clamp(1.45rem,3vw,2.5rem); line-height: 1.1; } .game-over { display: grid; gap: 10px; max-width: 560px; text-align: left; } .game-over h2 { font-size: 2.5rem; color: var(--accent); } .feedback { min-height: 26px; font-weight: 760; } /* AI Generate */ .ai-actions { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .ai-dest-label { flex: 1; min-width: 140px; } .ai-generate-btn { flex-shrink: 0; height: 44px; padding: 0 24px; font-size: .95rem; } .ai-remaining-badge { font-size: .78rem; font-weight: 760; color: var(--muted); } .ai-usage-info { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); } .ai-usage-info span { display: block; font-weight: 820; color: var(--ink); margin-bottom: 3px; font-size: .9rem; } .ai-usage-info p { margin: 0; color: var(--muted); font-size: .82rem; } .ai-result { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); animation: panelFade .18s cubic-bezier(0.23,1,0.32,1) forwards; } .policy-panel { display: grid; gap: 14px; align-content: start; } .metric { display: block; margin-bottom: 6px; color: var(--warm); font-size: 1.05rem; font-weight: 820; line-height: 1.4; } /* Builder publish */ .builder-head-actions { display: flex; gap: 8px; align-items: center; } .active-publish { background: color-mix(in srgb, var(--accent-2) 18%, var(--panel-soft)) !important; color: var(--accent-2) !important; } .saved-set-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--panel-soft)); font-size: .85rem; font-weight: 720; color: var(--muted); } .deck-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: .68rem; font-weight: 760; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } .badge-public { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); } .badge-synced { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } /* Browse */ .browse-subnav { display: flex; gap: 8px; margin-bottom: 24px; } .browse-subtab { padding: 7px 20px; border-radius: 9px; font-size: .9rem; font-weight: 760; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: background .16s cubic-bezier(0.23,1,0.32,1), color .16s cubic-bezier(0.23,1,0.32,1), border-color .16s cubic-bezier(0.23,1,0.32,1); } .browse-subtab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .browse-subtab:not(.active):hover { color: var(--ink); border-color: var(--line-strong); } .browse-header { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } .browse-header input { flex: 1; min-width: 180px; max-width: 480px; margin: 0; } .browse-header select, .yours-header select { width: auto; min-height: 44px; flex-shrink: 0; cursor: pointer; } .browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .browse-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(12px) saturate(150%); transition: border-color .16s cubic-bezier(0.23,1,0.32,1), box-shadow .16s cubic-bezier(0.23,1,0.32,1); } .browse-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-low); } .browse-card-body { min-width: 0; } .browse-card-body strong { display: block; font-weight: 820; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browse-card-body span { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; } .browse-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .browse-report-btn { font-size: .85rem; opacity: .55; transition: opacity .15s; } .browse-report-btn:hover { opacity: 1; } .browse-star-btn { color: var(--muted); transition: color .15s ease, transform .15s ease; } .browse-star-btn:hover { color: var(--warm); transform: scale(1.08); } .browse-star-btn.starred { color: var(--warm); } .browse-empty { color: var(--muted); font-size: .9rem; padding: 32px 0; } /* Yours */ .yours-header { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } .yours-header input { flex: 1; min-width: 180px; margin: 0; } .yours-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(12px) saturate(150%); margin-bottom: 8px; transition: border-color .16s cubic-bezier(0.23,1,0.32,1); } .yours-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .yours-card-select { flex-shrink: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--accent); } .yours-card-body { min-width: 0; flex: 1; } .yours-card-body strong { display: block; font-weight: 820; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yours-card-body span { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; } .yours-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .yours-folder-select { width: auto; min-height: unset !important; height: 34px; padding: 0 8px; border-radius: 8px; font-size: .82rem; background: var(--panel-soft); border: 1px solid var(--line); color: var(--ink); cursor: pointer; } .yours-section-label { margin: 18px 0 10px; font-size: .78rem; font-weight: 760; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .yours-folder { margin-bottom: 18px; } .yours-folder-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .yours-folder-toggle { background: none; border: none; font-weight: 820; font-size: .95rem; color: var(--ink); cursor: pointer; padding: 0; min-height: unset; display: flex; align-items: center; gap: 6px; } .yours-folder-toggle::before { content: "▾"; font-size: .8em; color: var(--muted); transition: transform .16s cubic-bezier(0.23,1,0.32,1); } .yours-folder.collapsed .yours-folder-toggle::before { transform: rotate(-90deg); } .yours-folder.collapsed .yours-folder-body { display: none; } .folder-count { font-weight: 600; font-size: .82rem; color: var(--muted); } .yours-folder-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .yours-folder-rename, .yours-folder-delete { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px; min-height: unset; border-radius: 6px; transition: color .12s ease, background .12s ease; } .yours-folder-rename { font-size: .95rem; } .yours-folder-rename:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .yours-folder-delete:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } .deck-list-see-all { display: block; margin-top: 4px; padding: 6px 12px; font-size: .78rem; font-weight: 720; color: var(--muted); text-align: center; background: none; border: none; cursor: pointer; width: 100%; border-radius: 8px; transition: color .14s ease; } .deck-list-see-all:hover { color: var(--accent); } .sidebar-footer { display: flex; gap: 14px; padding-top: 8px; flex-wrap: wrap; } .sidebar-footer a { font-size: .75rem; font-weight: 720; color: var(--muted); text-decoration: none; transition: color .14s ease; } .sidebar-footer a:hover { color: var(--ink); } .auth-footer { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .auth-footer a { font-size: .78rem; font-weight: 720; color: var(--muted); text-decoration: none; transition: color .14s ease; } .auth-footer a:hover { color: var(--ink); } /* Import */ .import-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); margin: 14px 0; gap: 10px; } /* Dialog */ dialog { width: min(480px,calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 0; color: var(--ink); background: var(--panel); box-shadow: 0 24px 64px rgba(0,0,0,.34); } dialog::backdrop { background: rgba(5,8,13,.66); } .modal-card { display: grid; gap: 14px; padding: 22px; text-align: center; } .fake-video { position: relative; display: grid; min-height: 210px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--sidebar), var(--panel-soft)); } .play-dot { width: 72px; height: 72px; border-radius: 999px; background: rgba(255,255,255,.2); } .fake-video span { position: absolute; font-size: 4rem; font-weight: 950; } .toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: min(360px,calc(100vw - 48px)); padding: 14px 16px; border-radius: 12px; color: #07101d; background: var(--accent); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .toast.show { opacity: 1; transform: translateY(0); } /* Animations */ @keyframes panelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes shadowPulse { 0%,100% { box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); } } @keyframes authButtonGlow { 0%,100% { opacity: .4; filter: blur(14px); } 50% { opacity: .85; filter: blur(20px); } } @keyframes cardFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } } @keyframes cardSlideInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes cardSlideInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } .card-slide-next .flashcard-face div { animation: cardSlideInRight .22s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .card-slide-prev .flashcard-face div { animation: cardSlideInLeft .22s cubic-bezier(0.22, 1, 0.36, 1) forwards; } body.reduce-motion .card-slide-next .flashcard-face div, body.reduce-motion .card-slide-prev .flashcard-face div { animation: none !important; } /* 100% mastery celebration */ @keyframes masteryNumPop { 0% { transform: scale(1); color: inherit; } 45% { transform: scale(1.28); color: var(--accent-2); } 100% { transform: scale(1); color: inherit; } } @keyframes masteryPanelGlow { 0% { box-shadow: var(--shadow); } 40% { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent-2) 50%, transparent); } 100% { box-shadow: var(--shadow); } } @keyframes dotPop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } .mastery-complete #masteryPercent { animation: masteryNumPop .52s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .mastery-complete.progress-panel { animation: masteryPanelGlow .7s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .mastery-complete .mastery-dot { animation: dotPop .4s cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 18ms) forwards; } body.reduce-motion .mastery-complete #masteryPercent, body.reduce-motion .mastery-complete.progress-panel, body.reduce-motion .mastery-complete .mastery-dot { animation: none !important; } /* Reduce motion mode */ body.reduce-motion { background: var(--bg) !important; } body.reduce-motion .backdrop-layer { animation: none !important; } body.reduce-motion .flashcard { animation: none !important; } body.reduce-motion .pulse-action { animation: none !important; } body.reduce-motion .glow-content::before, body.reduce-motion .glow-container:hover .glow-content { animation: none !important; } body.reduce-motion .view.active { animation: none !important; opacity: 1 !important; transform: none !important; } body.reduce-motion .theme-chip[title*="Secret"] { animation: none !important; } body.reduce-motion * { transition-duration: 0.05s !important; } body.reduce-motion .flashcard { transition: none !important; } /* ════════════════════════════════════════════════════════════════════════ ACCOUNT CIRCLE MENU Replaces the old plain sign-out button. The hub starts at the trigger button's screen position, slides to viewport center, then the items fan out radially around it. Reversed on close. All positioning math is done in script.js via inline left/top/--tx/--ty; CSS only owns the transitions. ════════════════════════════════════════════════════════════════════════ */ .circle-menu-overlay { position: fixed; inset: 0; z-index: 80; } .circle-menu-overlay.hidden { display: none; } .circle-menu-backdrop { position: absolute; inset: 0; background: rgba(4,6,12,.6); backdrop-filter: blur(8px) saturate(120%); opacity: 0; transition: opacity .38s ease; } .circle-menu-overlay.open .circle-menu-backdrop { opacity: 1; } .circle-menu-hub { position: fixed; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; z-index: 2; display: grid; place-items: center; color: #fff; font-weight: 850; font-size: 1.3rem; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow-low); will-change: transform, opacity; transform: translate(-50%, -50%) scale(1); opacity: 1; transition: transform .42s cubic-bezier(0.16,1,0.3,1), opacity .42s cubic-bezier(0.16,1,0.3,1); } .circle-menu-items { position: fixed; inset: 0; pointer-events: none; } /* Positioning wrapper: owns the FLIP open/close transition (placement, scale, opacity). Kept separate from the actual