/* ============================================================ MartynForge – Free Math Training Stylesheet: assets/css/math.css ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Space+Mono:wght@400;700&family=Quicksand:wght@500;700;800&display=swap'); /* ============================================================ 1. DESIGN TOKENS (3 themes via [data-theme] on ) ============================================================ Roles (same var names across all themes): --bg page background --surface card / pill background --surface2 inset / button resting background --border subtle border --accent1 primary CTA (START btn, selected table btn) --accent2 correct / success --accent3 wrong / danger --accent4 time-mode highlight / info --accent5 count-mode highlight / speed --text primary text --text-muted secondary / label text --bg-glow1 ambient gradient blob 1 (rgba string) --bg-glow2 ambient gradient blob 2 (rgba string) --shadow-cta box-shadow for .btn-start ============================================================ */ /* ── DARK (default) ── */ :root, [data-theme="dark"] { --bg: #0f1117; --surface: #1a1d2e; --surface2: #232740; --border: #2e3354; --accent1: #d4541a; /* MartynForge brand orange */ --accent2: #5be8a0; --accent3: #f75c6e; --accent4: #58b4f7; --accent5: #c47cf7; --text: #eef0ff; --text-muted: #7a80a8; --bg-glow1: rgba(212,84,26,0.08); --bg-glow2: rgba(91,232,160,0.06); --shadow-cta: 0 4px 24px rgba(212,84,26,0.30); --radius: 16px; --radius-sm: 8px; --font-main: 'Nunito', sans-serif; } /* ── LIGHT ── */ [data-theme="light"] { --bg: #f0f2fa; --surface: #ffffff; --surface2: #e8eaf6; --border: #cdd0e8; --accent1: #f0a500; --accent2: #22b573; --accent3: #e8384f; --accent4: #2d8ef0; --accent5: #9b51e0; --text: #1a1d2e; --text-muted: #6b7280; --bg-glow1: rgba(45,142,240,0.06); --bg-glow2: rgba(34,181,115,0.05); --shadow-cta: 0 4px 24px rgba(240,165,0,0.22); --radius: 16px; --radius-sm: 8px; --font-main: 'Nunito', sans-serif; } /* ── GIRL (pastel pink) ── */ [data-theme="girl"] { --bg: #fff0f6; --surface: #ffffff; --surface2: #ffe4f0; --border: #f9b8d4; --accent1: #f7679a; --accent2: #6dd9a8; --accent3: #ff6b8a; --accent4: #c084fc; --accent5: #f9a8d4; --text: #4a1535; --text-muted: #c06080; --bg-glow1: rgba(247,103,154,0.10); --bg-glow2: rgba(192,132,252,0.08); --shadow-cta: 0 4px 28px rgba(247,103,154,0.30); --radius: 20px; --radius-sm: 12px; --font-main: 'Quicksand', 'Nunito', sans-serif; } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-main); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px 16px 40px; } /* Subtle ambient gradient background */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 80% 10%, var(--bg-glow1) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 20% 80%, var(--bg-glow2) 0%, transparent 60%); pointer-events: none; z-index: 0; } #app { position: relative; z-index: 1; width: 100%; max-width: 520px; } /* ============================================================ 3. LAYOUT UTILITIES ============================================================ */ .screen { display: none; } .screen.active { display: block; } .mode-panel { display: none; } .mode-panel.active { display: block; } /* ============================================================ 4. HEADER ============================================================ */ .site-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-top: 8px; gap: 12px; } /* Logo image */ .logo-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .logo-img { height: 40px; width: auto; display: block; transition: opacity 0.15s, filter 0.3s; } .logo-img:hover { opacity: 0.85; } .logo-text { font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; white-space: nowrap; } .logo-text-accent { color: var(--accent1); } /* Dark: logo has black bg — brighten it and tint to match surface */ [data-theme="dark"] .logo-img { filter: brightness(1.15); } /* Light: logo has black bg — invert to white bg, keep colors */ [data-theme="light"] .logo-img { filter: invert(1) hue-rotate(180deg) saturate(1.4) brightness(0.85); } /* Girl: soft warm tint */ [data-theme="girl"] .logo-img { filter: saturate(1.2) brightness(1.1) sepia(0.12); } /* Language switcher */ .lang-switcher { display: flex; gap: 6px; } .lang-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-family: 'Nunito', sans-serif; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; cursor: pointer; transition: all 0.15s; } .lang-btn.active, .lang-btn:hover { background: var(--accent1); border-color: var(--accent1); color: #111; } /* ============================================================ 5. START SCREEN – HERO ============================================================ */ .hero-badge { display: inline-block; background: var(--surface2); border: 1px solid var(--accent1); border-radius: 20px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent1); padding: 4px 14px; margin-bottom: 20px; text-transform: uppercase; } .hero-title { font-size: clamp(2rem, 8vw, 3rem); font-weight: 900; line-height: 1.1; margin-bottom: 10px; } .hero-title .highlight { color: var(--accent1); } .hero-sub { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 32px; max-width: 400px; } /* ============================================================ 6. CONFIG CARDS ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; } .card-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .sublabel { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 10px; } /* ============================================================ 7. TABLE PICKER ============================================================ */ .table-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 6px; } .table-btn { aspect-ratio: 1; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--surface2); color: var(--text); font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 800; cursor: pointer; transition: all 0.15s; } .table-btn:hover { border-color: var(--accent1); color: var(--accent1); } .table-btn.selected { background: var(--accent1); border-color: var(--accent1); color: #111; transform: scale(1.06); } .table-btn-mix { grid-column: span 5; aspect-ratio: auto; padding: 10px; font-size: 0.85rem; border-radius: var(--radius-sm); margin-top: 4px; } /* ============================================================ 8. MODE TOGGLE (Na czas / Na pytania) ============================================================ */ .mode-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; } .mode-tab { flex: 1; padding: 10px 12px; border: none; background: var(--surface2); color: var(--text-muted); font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800; cursor: pointer; transition: all 0.15s; text-align: center; } .mode-tab.active { background: var(--accent4); color: #111; } /* ============================================================ 9. TIME PICKER (mode: Na czas) ============================================================ */ .time-row { display: flex; gap: 8px; } .time-btn { flex: 1; padding: 10px 8px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--surface2); color: var(--text); font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 800; cursor: pointer; transition: all 0.15s; text-align: center; } .time-btn:hover { border-color: var(--accent4); color: var(--accent4); } .time-btn.selected { background: var(--accent4); border-color: var(--accent4); color: #111; } /* ============================================================ 10. QUESTION-COUNT PICKER (mode: Na pytania) ============================================================ */ .qcount-row { display: flex; gap: 8px; margin-bottom: 12px; } .qcount-btn { flex: 1; padding: 10px 8px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--surface2); color: var(--text); font-family: 'Space Mono', monospace; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: all 0.15s; text-align: center; } .qcount-btn:hover { border-color: var(--accent5); color: var(--accent5); } .qcount-btn.selected { background: var(--accent5); border-color: var(--accent5); color: #fff; } /* Optional time limit within count mode */ .qtime-row { display: flex; gap: 8px; } .qtime-btn { flex: 1; padding: 8px 6px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--surface2); color: var(--text-muted); font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 800; cursor: pointer; transition: all 0.15s; text-align: center; } .qtime-btn:hover { border-color: var(--accent4); color: var(--accent4); } .qtime-btn.selected { background: var(--accent4); border-color: var(--accent4); color: #111; } /* ============================================================ 11. BUTTONS ============================================================ */ /* Primary CTA – START / Zagraj ponownie */ .btn-start { width: 100%; padding: 18px; border-radius: var(--radius); border: none; background: var(--accent1); color: #111; font-family: var(--font-main); font-size: 1.1rem; font-weight: 900; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; box-shadow: var(--shadow-cta); letter-spacing: 0.02em; } .btn-start:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta); filter: brightness(1.08); } .btn-start:active { transform: translateY(0); } /* Inline OK button next to answer input */ .btn-ok { padding: 14px 24px; border-radius: var(--radius-sm); border: none; background: var(--accent1); color: #111; font-family: 'Nunito', sans-serif; font-size: 1rem; font-weight: 900; cursor: pointer; transition: transform 0.1s; } .btn-ok:hover { transform: scale(1.04); } /* Secondary – Stop / Menu */ .btn-stop { width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-family: 'Nunito', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s; } .btn-stop:hover { border-color: var(--accent3); color: var(--accent3); } /* ============================================================ 12. GAME SCREEN ============================================================ */ .game-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 8px; flex-wrap: wrap; } /* Timer pill */ .timer-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 8px 16px; } #timer-display { font-family: 'Space Mono', monospace; font-size: 1.3rem; font-weight: 700; color: var(--accent1); min-width: 2.5ch; transition: color 0.3s; } #timer-display.urgent { color: var(--accent3); animation: pulse 0.5s infinite alternate; } /* Question progress pill (count mode) */ .qprogress-pill { display: none; /* shown via JS in count mode */ align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 8px 16px; } #q-counter { font-family: 'Space Mono', monospace; font-size: 1rem; font-weight: 700; color: var(--accent5); } #q-counter-total { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: var(--text-muted); } /* Score pills */ .score-wrap { display: flex; gap: 8px; } .score-pill { display: flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 8px 12px; font-size: 0.85rem; font-weight: 800; } .score-pill .dot { width: 8px; height: 8px; border-radius: 50%; } .score-pill .dot.g { background: var(--accent2); } .score-pill .dot.r { background: var(--accent3); } /* Progress bar */ .progress-bar { height: 4px; background: var(--surface2); border-radius: 2px; margin-bottom: 24px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent4), var(--accent2)); border-radius: 2px; transition: width 0.4s ease; } /* ============================================================ 13. QUESTION CARD ============================================================ */ .question-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 24px 32px; text-align: center; margin-bottom: 20px; position: relative; overflow: hidden; } .question-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(247,201,72,0.05); } .question-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .question-text { font-size: clamp(2.4rem, 10vw, 3.8rem); font-weight: 900; line-height: 1; margin-bottom: 8px; } .question-text .op { color: var(--accent4); } .question-text .eq { color: var(--text-muted); } .feedback-bar { height: 3px; border-radius: 2px; margin-top: 16px; opacity: 0; } .feedback-bar.correct { background: var(--accent2); opacity: 1; } .feedback-bar.wrong { background: var(--accent3); opacity: 1; } /* ============================================================ 14. ANSWER DISPLAY (no — no keyboard on mobile) ============================================================ */ .answer-row { display: flex; gap: 10px; margin-bottom: 12px; } .answer-display { flex: 1; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: 'Space Mono', monospace; font-size: 1.6rem; font-weight: 700; text-align: center; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 62px; transition: border-color 0.15s, background 0.15s; user-select: none; } .answer-display.correct { border-color: var(--accent2); background: rgba(91,232,160,0.07); } .answer-display.wrong { border-color: var(--accent3); background: rgba(247,92,110,0.07); } /* Blinking cursor */ .answer-cursor { color: var(--accent1); font-weight: 300; animation: blink 1s step-end infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================================ 15. NUMPAD ============================================================ */ .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .np-btn { padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: 'Space Mono', monospace; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.1s; user-select: none; } .np-btn:hover { background: var(--surface); border-color: var(--accent1); color: var(--accent1); } .np-btn:active { transform: scale(0.94); } .np-btn.del { color: var(--accent3); } .np-btn.enter { background: var(--accent1); border-color: var(--accent1); color: #111; grid-column: span 2; } .np-btn.enter:hover { background: #ffe066; } /* ============================================================ 16. RESULTS SCREEN ============================================================ */ .result-hero { text-align: center; padding: 32px 20px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; } .result-emoji { font-size: 3rem; margin-bottom: 12px; } .result-title { font-size: 1.8rem; font-weight: 900; margin-bottom: 4px; } .result-sub { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 20px; } .result-score-big { font-size: clamp(3rem, 13vw, 4.5rem); font-weight: 900; font-family: 'Space Mono', monospace; line-height: 1; margin-bottom: 6px; } .result-score-big .pct-symbol { font-size: 0.5em; color: var(--text-muted); } /* Stat chips row */ .result-stats { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .rstat { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; min-width: 68px; } .rstat-val { font-family: 'Space Mono', monospace; font-size: 1.3rem; font-weight: 700; } .rstat-val.g { color: var(--accent2); } .rstat-val.r { color: var(--accent3); } .rstat-val.p { color: var(--accent5); } .rstat-label { font-size: 0.62rem; color: var(--text-muted); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* Speed bonus badge */ .speed-badge { display: none; /* shown via JS when earned */ align-items: center; gap: 6px; background: rgba(196,124,247,0.12); border: 1px solid var(--accent5); border-radius: 20px; padding: 5px 14px; margin-top: 14px; font-size: 0.75rem; font-weight: 800; color: var(--accent5); } /* Grade bar */ .grade-bar { height: 8px; background: var(--surface2); border-radius: 4px; margin: 20px 0 0; overflow: hidden; } .grade-fill { height: 100%; border-radius: 4px; transition: width 1.2s cubic-bezier(.22,1,.36,1); } /* Breakdown (count mode only) */ .grade-breakdown { display: none; margin-top: 14px; padding: 12px 16px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 0.78rem; color: var(--text-muted); line-height: 1.8; text-align: left; } .grade-breakdown.visible { display: block; } .grade-breakdown strong { color: var(--text); } /* ============================================================ 17. FOOTER ============================================================ */ .site-footer { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.68rem; color: var(--text-muted); font-family: 'Space Mono', monospace; letter-spacing: 0.05em; } .footer-logo-link { display: flex; align-items: center; opacity: 0.55; transition: opacity 0.15s; } .footer-logo-link:hover { opacity: 0.85; } .footer-logo-img { height: 28px; width: auto; } [data-theme="dark"] .footer-logo-img { filter: brightness(1.1); } [data-theme="light"] .footer-logo-img { filter: invert(1) hue-rotate(180deg) saturate(1.4) brightness(0.85); } [data-theme="girl"] .footer-logo-img { filter: saturate(1.2) sepia(0.15) brightness(1.1); } /* ============================================================ 18. ANIMATIONS ============================================================ */ @keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } } @keyframes popIn { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes shake { 0%,100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .pop { animation: popIn 0.2s cubic-bezier(.22,1,.36,1) both; } .shake { animation: shake 0.3s ease; } /* ============================================================ 18. HISTORY SCREEN ============================================================ */ /* Header row */ .history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .history-title { font-size: 1.2rem; font-weight: 900; } .btn-history-clear { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-family: var(--font-main); font-size: 0.75rem; font-weight: 700; padding: 5px 10px; cursor: pointer; transition: all 0.15s; } .btn-history-clear:hover { border-color: var(--accent3); color: var(--accent3); } /* Chart card */ .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; position: relative; } #history-chart { width: 100%; height: 280px; display: block; border-radius: var(--radius-sm); } /* Empty state */ .history-empty { text-align: center; color: var(--text-muted); font-size: 0.88rem; padding: 24px 0; } /* Table */ .history-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; } .history-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .history-table thead tr { background: var(--surface2); border-bottom: 1px solid var(--border); } .history-table th { padding: 9px 10px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); text-align: center; } .history-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border); font-family: 'Space Mono', monospace; font-size: 0.8rem; } .history-table tbody tr:last-child td { border-bottom: none; } .history-table tbody tr:hover { background: var(--surface2); } .h-num, .h-time { color: var(--text-muted); font-size: 0.72rem; } .h-table { font-weight: 700; color: var(--accent4); } .h-ok { color: var(--accent2); font-weight: 700; } .h-err { color: var(--accent3); font-weight: 700; } .h-spq { color: var(--accent5); } /* Progress button (results screen) */ .btn-secondary { width: 100%; padding: 14px; border-radius: var(--radius); border: 2px solid var(--accent4); background: transparent; color: var(--accent4); font-family: var(--font-main); font-size: 1rem; font-weight: 900; cursor: pointer; transition: all 0.15s; margin-top: 10px; letter-spacing: 0.02em; } .btn-secondary:hover { background: var(--accent4); color: #111; } /* Header right group */ .header-right { display: flex; align-items: center; gap: 8px; } .icon-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-family: var(--font-main); font-size: 0.72rem; font-weight: 700; padding: 4px 9px; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .icon-btn:hover { background: var(--accent4); border-color: var(--accent4); color: #111; } /* ============================================================ 19. THEME SWITCHER ============================================================ */ .theme-switcher { display: flex; gap: 5px; } .theme-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, border-color 0.15s; background: var(--surface2); line-height: 1; padding: 0; } .theme-btn:hover { transform: scale(1.15); } .theme-btn.active { border-color: var(--accent1); transform: scale(1.12); } /* swatch dots inside each button */ .theme-btn[data-t="dark"] { background: #1a1d2e; color: #f7c948; } .theme-btn[data-t="light"] { background: #e8eaf6; color: #f0a500; } .theme-btn[data-t="girl"] { background: #ffe4f0; color: #f7679a; } /* ============================================================ 20. GIRL THEME – extra decorations ============================================================ */ /* Rounder cards, softer feel */ [data-theme="girl"] .card, [data-theme="girl"] .question-card, [data-theme="girl"] .result-hero { border-color: var(--border); box-shadow: 0 2px 20px rgba(247,103,154,0.08); } /* Pink question operator */ [data-theme="girl"] .question-text .op { color: var(--accent1); } /* Hearts on feedback bar */ [data-theme="girl"] .feedback-bar.correct { background: var(--accent2); } [data-theme="girl"] .feedback-bar.wrong { background: var(--accent3); } /* Progress fill – pink gradient */ [data-theme="girl"] .progress-fill { background: linear-gradient(90deg, var(--accent1), var(--accent4)); } /* Speed badge */ [data-theme="girl"] .speed-badge { background: rgba(249,168,212,0.20); border-color: var(--accent1); color: var(--accent1); } /* Numpad enter key */ [data-theme="girl"] .np-btn.enter { background: var(--accent1); border-color: var(--accent1); } [data-theme="girl"] .np-btn.enter:hover { filter: brightness(1.1); } /* Active lang btn */ [data-theme="girl"] .lang-btn.active, [data-theme="girl"] .lang-btn:hover { background: var(--accent1); border-color: var(--accent1); color: #fff; } /* Girl bg: soft cherry blossom emoji watermark */ [data-theme="girl"] body::after { content: '🌸'; position: fixed; bottom: 24px; right: 20px; font-size: 4rem; opacity: 0.08; pointer-events: none; z-index: 0; user-select: none; }