/* ========================================================================== SudokuWorlds — global stylesheet Bootstrap 5.3 `data-bs-theme` drives every theme switch. Set `data-bs-theme="dark"` or `data-bs-theme="light"` on . ========================================================================== */ /* Area palette (shared by both themes) */ :root { --area-color-0: #c8e6c9; --area-color-1: #b2dfdb; --area-color-2: #ffe0b2; --area-color-3: #f8bbd0; --area-color-4: #d1c4e9; --area-color-5: #ffccbc; --area-color-6: #bbdefb; --area-color-7: #f0f4c3; --area-color-8: #e1bee7; --area-color-9: #dcedc8; } html, body { min-height: 100vh; } body { display: flex; flex-direction: column; } main { flex: 1 0 auto; } /* ========================================================================== Game board ========================================================================== */ .SudokuWorlds-board { display: grid; gap: 0; background-color: #212529; border: 4px solid #212529; max-width: 600px; margin: 0 auto; } .SudokuWorlds-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; border: 2px solid #343a40; font-size: 1.4rem; transition: transform 0.15s; overflow: hidden; } .SudokuWorlds-cell.area-edge-top { border-top-width: 5px; border-top-color: #000; } .SudokuWorlds-cell.area-edge-right { border-right-width: 5px; border-right-color: #000; } .SudokuWorlds-cell.area-edge-bottom { border-bottom-width: 5px; border-bottom-color: #000; } .SudokuWorlds-cell.area-edge-left { border-left-width: 5px; border-left-color: #000; } .SudokuWorlds-cell:hover { transform: scale(1.05); z-index: 5; box-shadow: 0 0 10px rgba(13, 110, 253, 0.5); } .SudokuWorlds-cell.blocked { cursor: not-allowed; opacity: 0.85; } .SudokuWorlds-cell.blocked:hover { transform: none; box-shadow: none; } .SudokuWorlds-cell.occupied { background-image: none !important; } .SudokuWorlds-cell .suspect-portrait { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid #0d6efd; background-color: #fff; background-size: cover; background-position: center; z-index: 3; } .SudokuWorlds-cell .tile-icon { font-size: 1.2rem; color: rgba(0, 0, 0, 0.5); } .area-label { position: absolute; font-size: 0.55rem; font-weight: bold; background: rgba(255, 255, 255, 0.8); padding: 1px 4px; border-radius: 2px; top: 2px; left: 2px; pointer-events: none; white-space: nowrap; z-index: 2; } .suspect-card { cursor: pointer; transition: all 0.2s; border: 2px solid #dee2e6; } .suspect-card:hover { border-color: #0d6efd; transform: translateY(-2px); } .suspect-card.selected { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3); } .suspect-card.placed { background-color: #d1e7dd; } .suspect-card.victim { background-color: #f8d7da; border-color: #842029; } .suspect-portrait-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } /* Dark theme overrides for the game board */ [data-bs-theme="dark"] .SudokuWorlds-board { background-color: #000; border-color: #000; } [data-bs-theme="dark"] .SudokuWorlds-cell { border-color: #0a0c10; color: #f8f9fa; } [data-bs-theme="dark"] .SudokuWorlds-cell.area-edge-top { border-top-color: #fff; } [data-bs-theme="dark"] .SudokuWorlds-cell.area-edge-right { border-right-color: #fff; } [data-bs-theme="dark"] .SudokuWorlds-cell.area-edge-bottom { border-bottom-color: #fff; } [data-bs-theme="dark"] .SudokuWorlds-cell.area-edge-left { border-left-color: #fff; } [data-bs-theme="dark"] .suspect-card { background-color: #212529; color: #f8f9fa; border-color: #495057; } [data-bs-theme="dark"] .suspect-card.placed { background-color: #0f5132; } [data-bs-theme="dark"] .suspect-card.victim { background-color: #58151c; } [data-bs-theme="dark"] .area-label { background: rgba(0, 0, 0, 0.7); color: #f8f9fa; } [data-bs-theme="dark"] .SudokuWorlds-cell .tile-icon { color: rgba(255, 255, 255, 0.55); } /* ========================================================================== Navbar ========================================================================== */ .SudokuWorlds-nav { background: linear-gradient(135deg, #14171c 0%, #1f2530 55%, #2a3140 100%); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0.55rem 0; } @media (min-width: 992px) { .SudokuWorlds-nav.navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto !important; flex-grow: 1; align-items: center; } .SudokuWorlds-nav.navbar-expand-lg .navbar-toggler { display: none !important; } } .SudokuWorlds-nav .navbar-brand { font-family: 'Georgia', 'Times New Roman', serif; font-size: 1.45rem; font-weight: 700; letter-spacing: 0.08em; background: linear-gradient(90deg, #ff6b6b 0%, #ffd166 50%, #06d6a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: transform 0.2s ease; } .SudokuWorlds-nav .navbar-brand:hover { transform: translateY(-1px); } .SudokuWorlds-nav .brand-icon { -webkit-text-fill-color: initial; font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.4)); } .SudokuWorlds-nav .nav-link { color: rgba(255, 255, 255, 0.75) !important; font-weight: 500; padding: 0.5rem 0.9rem !important; border-radius: 8px; transition: all 0.18s ease; position: relative; } .SudokuWorlds-nav .nav-link:hover, .SudokuWorlds-nav .nav-link.active { color: #fff !important; background: rgba(255, 255, 255, 0.08); } .SudokuWorlds-nav .nav-link.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: linear-gradient(90deg, #ff6b6b, #ffd166); border-radius: 2px; } .SudokuWorlds-nav .nav-actions { display: flex; align-items: center; gap: 0.5rem; } .SudokuWorlds-nav .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; transition: all 0.18s ease; padding: 0; } .SudokuWorlds-nav .icon-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } .SudokuWorlds-nav .lang-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: 0.9rem; transition: all 0.18s ease; text-decoration: none; } .SudokuWorlds-nav .lang-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .SudokuWorlds-nav .lang-toggle::after { margin-left: 0.2rem; } .SudokuWorlds-nav .flag { font-size: 1.05rem; line-height: 1; } .SudokuWorlds-nav .user-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); text-decoration: none; font-weight: 500; transition: all 0.18s ease; } .SudokuWorlds-nav .user-pill:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .SudokuWorlds-nav .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff6b6b, #c44569); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; } .SudokuWorlds-nav .user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dropdowns inside the navbar — Bootstrap's dark theme tokens already handle dark backgrounds, we only add extra polish here. */ .SudokuWorlds-nav .dropdown-menu { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); padding: 0.4rem; margin-top: 0.5rem !important; min-width: 180px; } .SudokuWorlds-nav .dropdown-item { border-radius: 8px; padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; } .SudokuWorlds-nav .dropdown-item.active, .SudokuWorlds-nav .dropdown-item:active { background: linear-gradient(90deg, #ff6b6b, #ffd166); color: #fff; } .SudokuWorlds-nav .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.15); padding: 0.35rem 0.55rem; border-radius: 10px; } .SudokuWorlds-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.35); } @media (max-width: 991.98px) { .SudokuWorlds-nav .navbar-collapse { margin-top: 0.75rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.04); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06); } .SudokuWorlds-nav .nav-actions { flex-wrap: wrap; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .SudokuWorlds-nav .user-name { max-width: none; } } .dropdown-toggle::after { border: 0px} /* ========================================================================== Footer ========================================================================== */ .SudokuWorlds-footer { background: linear-gradient(135deg, #14171c 0%, #1f2530 100%); color: rgba(255, 255, 255, 0.75); padding: 1.8rem 0 1.3rem; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.92rem; } .SudokuWorlds-footer .footer-brand { font-family: 'Georgia', 'Times New Roman', serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; background: linear-gradient(90deg, #ff6b6b 0%, #ffd166 50%, #06d6a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; } .SudokuWorlds-footer .footer-brand .brand-icon { -webkit-text-fill-color: initial; } .SudokuWorlds-footer .footer-tagline { color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; } .SudokuWorlds-footer .footer-links { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: inherit; margin-bottom: 0.35rem; } .SudokuWorlds-footer .footer-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.18s ease; } .SudokuWorlds-footer .footer-links a:hover { color: #ffd166; } .SudokuWorlds-footer .footer-copy { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; } /* Light mode footer */ [data-bs-theme="light"] .SudokuWorlds-footer { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); color: rgba(0, 0, 0, 0.7); border-top: 1px solid rgba(0, 0, 0, 0.08); } [data-bs-theme="light"] .SudokuWorlds-footer .footer-brand { background: linear-gradient(90deg, #dc3545 0%, #b8860b 50%, #0d9488 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-bs-theme="light"] .SudokuWorlds-footer .footer-tagline { color: rgba(0, 0, 0, 0.6); } [data-bs-theme="light"] .SudokuWorlds-footer .footer-links a { color: rgba(0, 0, 0, 0.7); } [data-bs-theme="light"] .SudokuWorlds-footer .footer-links a:hover { color: #b8860b; } [data-bs-theme="light"] .SudokuWorlds-footer .footer-copy { color: rgba(0, 0, 0, 0.5); } /* ========================================================================== Homepage — futuristic hero ========================================================================== */ .hero { position: relative; padding: 6rem 0 7rem; overflow: hidden; background: radial-gradient(circle at 18% 22%, rgba(255, 107, 107, 0.10) 0%, transparent 45%), radial-gradient(circle at 82% 78%, rgba(6, 214, 160, 0.10) 0%, transparent 48%), linear-gradient(180deg, #07090d 0%, #0b0f17 100%); color: #f8f9fa; isolation: isolate; } [data-bs-theme="light"] .hero { background: radial-gradient(circle at 18% 22%, rgba(255, 107, 107, 0.06) 0%, transparent 45%), radial-gradient(circle at 82% 78%, rgba(6, 214, 160, 0.06) 0%, transparent 48%), linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); color: #212529; } .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); pointer-events: none; z-index: 0; } [data-bs-theme="light"] .hero-grid-bg { background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); opacity: 0.6; } .hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; pointer-events: none; z-index: 0; animation: hero-float 14s ease-in-out infinite; } [data-bs-theme="light"] .hero-glow { opacity: 0.25; } .hero-glow-a { width: 420px; height: 420px; top: -80px; left: -80px; background: radial-gradient(circle, #ff6b6b 0%, transparent 70%); } .hero-glow-b { width: 520px; height: 520px; bottom: -140px; right: -120px; background: radial-gradient(circle, #06d6a0 0%, transparent 70%); animation-delay: -6s; } @keyframes hero-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(20px, -28px, 0); } } .hero-inner { position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.85); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.5rem; } [data-bs-theme="light"] .hero-eyebrow { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.75); } .hero-eyebrow .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #06d6a0; box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.2); animation: eyebrow-pulse 2.2s ease-in-out infinite; } @keyframes eyebrow-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.15); } 50% { box-shadow: 0 0 0 8px rgba(6, 214, 160, 0.05); } } .hero-title { font-family: 'Georgia', 'Times New Roman', serif; font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 1.1rem; color: #fff; } [data-bs-theme="light"] .hero-title { color: #0b0f17; } .hero-title .accent { background: linear-gradient(90deg, #ff6b6b 0%, #ffd166 50%, #06d6a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-bs-theme="light"] .hero-title .accent { background: linear-gradient(90deg, #dc3545 0%, #b8860b 50%, #0d9488 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lead { font-size: 1.1rem; color: rgba(255, 255, 255, 0.72); max-width: 36rem; line-height: 1.6; margin-bottom: 2.2rem; } [data-bs-theme="light"] .hero-lead { color: rgba(0, 0, 0, 0.65); } .hero-cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 2.4rem; } .btn-primary-hero { display: inline-flex; align-items: center; gap: 0.25rem; background: linear-gradient(90deg, #ff6b6b, #ffd166); border: none; color: #1a1f2b; font-weight: 700; padding: 0.85rem 1.7rem; border-radius: 999px; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; box-shadow: 0 6px 22px rgba(255, 107, 107, 0.32); } .btn-primary-hero:hover { transform: translateY(-2px); color: #1a1f2b; filter: brightness(1.05); box-shadow: 0 14px 30px rgba(255, 107, 107, 0.45); } .btn-secondary-hero { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #f8f9fa; font-weight: 600; padding: 0.85rem 1.7rem; border-radius: 999px; transition: all 0.18s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } [data-bs-theme="light"] .btn-secondary-hero { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.12); color: #212529; } .btn-secondary-hero:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.22); transform: translateY(-2px); } [data-bs-theme="light"] .btn-secondary-hero:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.2); color: #0b0f17; } /* Hero game tags */ .hero-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero-tag { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); transition: all 0.2s ease; } .hero-tag:hover { background: rgba(255, 209, 102, 0.15); border-color: rgba(255, 209, 102, 0.4); color: #ffd166; transform: translateY(-2px); } [data-bs-theme="light"] .hero-tag { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.7); } [data-bs-theme="light"] .hero-tag:hover { background: rgba(255, 152, 0, 0.1); border-color: rgba(255, 152, 0, 0.4); color: #b8860b; } .hero-tag:last-child { background: linear-gradient(135deg, rgba(255, 209, 102, 0.2), rgba(255, 107, 107, 0.2)); border-color: rgba(255, 209, 102, 0.4); color: #ffd166; } [data-bs-theme="light"] .hero-tag:last-child { background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 87, 87, 0.15)); border-color: rgba(255, 152, 0, 0.4); color: #b8860b; } .hero-meta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } [data-bs-theme="light"] .hero-meta { border-top: 1px solid rgba(0, 0, 0, 0.08); } .hero-meta .meta-item .meta-num { font-family: 'Georgia', 'Times New Roman', serif; font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; } [data-bs-theme="light"] .hero-meta .meta-item .meta-num { color: #0b0f17; } .hero-meta .meta-item .meta-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 0.1rem; } [data-bs-theme="light"] .hero-meta .meta-item .meta-label { color: rgba(0, 0, 0, 0.55); } .hero-meta .meta-sep { width: 1px; height: 28px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent); } [data-bs-theme="light"] .hero-meta .meta-sep { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.15), transparent); } .hero-right { position: relative; } .hero-sudoku-shell { position: relative; padding: 1rem; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-bs-theme="light"] .hero-sudoku-shell { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.85) 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .hero-sudoku-corner { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255, 209, 102, 0.55); pointer-events: none; } .hero-sudoku-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 6px; } .hero-sudoku-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 6px; } .hero-sudoku-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 6px; } .hero-sudoku-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 6px; } .hero-scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 1rem; z-index: 2; transition: color 0.18s ease; } .hero-scroll:hover { color: #ffd166; } [data-bs-theme="light"] .hero-scroll { color: rgba(0, 0, 0, 0.5); } [data-bs-theme="light"] .hero-scroll:hover { color: #b8860b; } .hero-scroll .scroll-line { width: 1px; height: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent); } /* Section shell (features + how-it-works) */ .section { padding: 5rem 0; position: relative; } .section-features { background: #0b0f17; } .section-how { background: linear-gradient(180deg, #0b0f17 0%, #070a10 100%); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .section-tag { display: inline-block; padding: 0.25rem 0.8rem; border-radius: 999px; background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.25); color: #ffd166; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; } [data-bs-theme="light"] .section-tag { background: rgba(184, 134, 11, 0.1); border: 1px solid rgba(184, 134, 11, 0.25); color: #b8860b; } .section-title { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: #fff; letter-spacing: -0.01em; margin-bottom: 0.6rem; } [data-bs-theme="light"] .section-title { color: #0b0f17; } .section-sub { color: rgba(255, 255, 255, 0.62); font-size: 1.02rem; } [data-bs-theme="light"] .section-sub { color: rgba(0, 0, 0, 0.6); } /* Feature cards */ .feature-card { height: 100%; position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 1.8rem; color: #f1f3f5; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; overflow: hidden; } [data-bs-theme="light"] .feature-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%); border: 1px solid rgba(0, 0, 0, 0.08); color: #212529; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .feature-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% -20%, rgba(255, 209, 102, 0.12), transparent 55%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .feature-card:hover { transform: translateY(-4px); border-color: rgba(255, 209, 102, 0.32); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } [data-bs-theme="light"] .feature-card:hover { border-color: rgba(184, 134, 11, 0.3); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } .feature-card:hover::before { opacity: 1; } .feature-icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.1rem; position: relative; z-index: 1; } .feature-icon.c1 { background: rgba(255, 107, 107, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.25); } .feature-icon.c2 { background: rgba(255, 209, 102, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.25); } .feature-icon.c3 { background: rgba(6, 214, 160, 0.15); box-shadow: inset 0 0 0 1px rgba(6, 214, 160, 0.25); } .feature-title { font-weight: 700; margin-bottom: 0.45rem; color: #fff; letter-spacing: -0.005em; } [data-bs-theme="light"] .feature-title { color: #0b0f17; } /* How-to */ .how-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 2.1rem; color: #f1f3f5; } [data-bs-theme="light"] .how-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%); border: 1px solid rgba(0, 0, 0, 0.08); color: #212529; } .how-step { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); } [data-bs-theme="light"] .how-step { border-bottom: 1px dashed rgba(0, 0, 0, 0.1); } .how-step:last-child { border-bottom: none; padding-bottom: 0; } .how-step:first-child { padding-top: 0; } .how-step strong { color: #fff; } [data-bs-theme="light"] .how-step strong { color: #0b0f17; } .step-num { flex: 0 0 auto; min-width: 46px; height: 36px; padding: 0 0.6rem; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 107, 107, 0.22), rgba(255, 209, 102, 0.22)); border: 1px solid rgba(255, 209, 102, 0.35); color: #ffd166; font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; } [data-bs-theme="light"] .step-num { background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(184, 134, 11, 0.15)); border: 1px solid rgba(184, 134, 11, 0.3); color: #b8860b; } .cta-card { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255, 107, 107, 0.10), rgba(6, 214, 160, 0.10)); border: 1px solid rgba(255, 209, 102, 0.22); border-radius: 16px; padding: 2.2rem; color: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } [data-bs-theme="light"] .cta-card { background: linear-gradient(135deg, rgba(220, 53, 69, 0.08), rgba(13, 148, 136, 0.08)); border: 1px solid rgba(184, 134, 11, 0.2); color: #212529; } .cta-card .cta-glow { position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 209, 102, 0.4), transparent 70%); filter: blur(40px); pointer-events: none; } .cta-card .cta-icon { font-size: 3rem; margin-bottom: 0.6rem; } .cta-card .cta-heading { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; margin-bottom: 0.4rem; color: #fff; } [data-bs-theme="light"] .cta-card .cta-heading { color: #0b0f17; } .cta-card .cta-body { color: rgba(255, 255, 255, 0.75); margin-bottom: 1.2rem; } [data-bs-theme="light"] .cta-card .cta-body { color: rgba(0, 0, 0, 0.65); } /* ========================================================================== Hero Sudoku widget (Livewire component) ========================================================================== */ .hero-sudoku { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 0.25rem; color: #f1f3f5; } [data-bs-theme="light"] .hero-sudoku { color: #212529; } .hs-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .hs-title { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.95rem; color: #fff; letter-spacing: 0.02em; } [data-bs-theme="light"] .hs-title { color: #0b0f17; } .hs-title .hs-dot { width: 9px; height: 9px; border-radius: 50%; background: #06d6a0; box-shadow: 0 0 10px rgba(6, 214, 160, 0.8); } .hs-title .hs-badge { font-family: 'Georgia', 'Times New Roman', serif; font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; } [data-bs-theme="light"] .hs-title .hs-badge { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.65); } .hs-difficulty { display: inline-flex; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 3px; } [data-bs-theme="light"] .hs-difficulty { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); } .hs-diff { border: none; background: transparent; color: rgba(255, 255, 255, 0.72); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.32rem 0.75rem; border-radius: 999px; cursor: pointer; transition: all 0.18s ease; } [data-bs-theme="light"] .hs-diff { color: rgba(0, 0, 0, 0.65); } .hs-diff:hover { color: #fff; } [data-bs-theme="light"] .hs-diff:hover { color: #0b0f17; } .hs-diff.is-active { background: linear-gradient(90deg, #ff6b6b, #ffd166); color: #1a1f2b; box-shadow: 0 4px 14px rgba(255, 107, 107, 0.3); } .hs-board { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; padding: 6px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); aspect-ratio: 1; max-width: 100%; position: relative; } [data-bs-theme="light"] .hs-board { background: rgba(248, 249, 250, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03); } [data-bs-theme="light"] .hs-cell { background: rgb(182 182 182 / 15%); color: #505355; } .hs-cell { position: relative; aspect-ratio: 1; border: none; background: rgba(255, 255, 255, 0.03); color: #f1f3f5; font-family: 'Georgia', 'Times New Roman', serif; font-weight: 700; font-size: clamp(0.9rem, 1.6vw, 1.15rem); border-radius: 4px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; padding: 0; } [data-bs-theme="light"] .hs-cell.is-given { background: rgb(0 0 0 / 6%); color: #000 } [data-bs-theme="light"] .hs-cell.is-input { color: #1c95c1 } [data-bs-theme="light"] .hs-cell.is-peer { background: rgb(52 111 100 / 20%); } [data-bs-theme="light"] .hs-cell:hover:not(:disabled) { background: rgba(100, 100, 100, 0.156); } [data-bs-theme="light"] .hs-cell.is-selected { background: linear-gradient(135deg, rgb(15 170 113 / 35%), rgb(80 52 197 / 28%)); } .hs-cell.is-input { color: #ffd166; } .hs-cell.is-given { background: rgba(255, 255, 255, 0.06); color: #fff; cursor: default; } .hs-cell:hover:not(:disabled) { background: rgba(162, 162, 162, 0.156); } .hs-cell.is-peer { background: rgb(116 203 162 / 10%); } .hs-cell.is-same-value { background: rgba(6, 214, 160, 0.18); color: #06d6a0; } .hs-cell.is-selected { background: linear-gradient(135deg, rgb(208 206 135 / 35%), rgb(52 201 215 / 28%)); color: #fff; box-shadow: inset 0 0 0 1px rgb(48 125 117 / 60%); } .hs-cell.is-mistake { color: #ff6b6b; background: rgba(255, 107, 107, 0.18); } .hs-cell.has-right-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.14); } .hs-cell.has-bottom-edge { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.14); } .hs-cell.has-right-edge.has-bottom-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(255, 255, 255, 0.14); } .hs-pad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; } [data-bs-theme="light"] .hs-pad { gap: 6px; } .hs-num { padding: 0.55rem 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: #f1f3f5; font-family: 'Georgia', 'Times New Roman', serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.15s ease; } [data-bs-theme="light"] .hs-num { border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.03); color: #212529; } .hs-num:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 209, 102, 0.35); color: #ffd166; transform: translateY(-1px); } [data-bs-theme="light"] .hs-num:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); border-color: rgba(184, 134, 11, 0.35); color: #b8860b; } .hs-num:disabled { opacity: 0.4; cursor: not-allowed; } .hs-num.hs-erase { color: #ff6b6b; } [data-bs-theme="light"] .hs-num.hs-erase { color: #dc3545; } .hs-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .hs-stats { display: inline-flex; gap: 0.9rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.62); } [data-bs-theme="light"] .hs-stats { color: rgba(0, 0, 0, 0.6); } .hs-stat { display: inline-flex; align-items: center; gap: 0.35rem; } .hs-stat.is-warn { color: #ff6b6b; } [data-bs-theme="light"] .hs-stat.is-warn { color: #dc3545; } .hs-actions { display: inline-flex; gap: 0.45rem; } .hs-btn { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #f1f3f5; font-weight: 600; font-size: 0.82rem; padding: 0.45rem 0.85rem; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; } [data-bs-theme="light"] .hs-btn { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); color: #212529; } .hs-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 209, 102, 0.35); color: #ffd166; } [data-bs-theme="light"] .hs-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); border-color: rgba(184, 134, 11, 0.4); color: #b8860b; } .hs-btn:disabled { opacity: 0.4; cursor: not-allowed; } .hs-btn-primary { background: linear-gradient(90deg, #ff6b6b, #ffd166); border-color: transparent; color: #1a1f2b; box-shadow: 0 4px 14px rgba(255, 107, 107, 0.28); } .hs-btn-primary:hover:not(:disabled) { color: #1a1f2b; filter: brightness(1.05); transform: translateY(-1px); } .hs-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7, 9, 13, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 18px; z-index: 10; animation: hs-fade 0.25s ease; } [data-bs-theme="light"] .hs-overlay { background: rgba(255, 255, 255, 0.85); } @keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } } .hs-overlay-card { text-align: center; padding: 1.5rem; } .hs-overlay-icon { font-size: 3rem; margin-bottom: 0.3rem; } .hs-overlay-title { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: 1.4rem; margin-bottom: 0.3rem; color: #fff; } .hs-overlay-body { color: rgba(255, 255, 255, 0.75); margin-bottom: 1rem; } .hs-loading { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(7, 9, 13, 0.6); border-radius: 18px; z-index: 12; } .hs-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: #ffd166; animation: hs-spin 0.7s linear infinite; } @keyframes hs-spin { to { transform: rotate(360deg); } } @media (max-width: 575.98px) { .hs-pad { grid-template-columns: repeat(5, 1fr); } .hs-header { flex-direction: column; align-items: stretch; } .hs-difficulty { justify-content: space-between; } } /* ========================================================================= Light theme for homepage sections — proper light mode ========================================================================= */ [data-bs-theme="light"] .section-features { background: #f8f9fa; } [data-bs-theme="light"] .section-how { background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); } [data-bs-theme="light"] .feature-card, [data-bs-theme="light"] .how-card, [data-bs-theme="light"] .cta-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.08); color: #212529; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } /* ========================================================================== Standalone Sudoku Puzzle page (futuristic theme) ========================================================================== */ .puzzle-page { position: relative; padding: 4rem 0 5rem; overflow: hidden; background: radial-gradient(circle at 18% 18%, rgba(255, 107, 107, 0.10) 0%, transparent 45%), radial-gradient(circle at 82% 82%, rgba(6, 214, 160, 0.10) 0%, transparent 48%), linear-gradient(180deg, #07090d 0%, #0b0f17 100%); color: #f1f3f5; min-height: calc(100vh - 60px); isolation: isolate; } .puzzle-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 75%); pointer-events: none; z-index: 0; } .puzzle-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; pointer-events: none; z-index: 0; animation: hero-float 14s ease-in-out infinite; } .puzzle-glow-a { width: 440px; height: 440px; top: -100px; left: -90px; background: radial-gradient(circle, #ff6b6b 0%, transparent 70%); } .puzzle-glow-b { width: 520px; height: 520px; bottom: -160px; right: -120px; background: radial-gradient(circle, #06d6a0 0%, transparent 70%); animation-delay: -6s; } .puzzle-inner { position: relative; z-index: 1; } .puzzle-head { text-align: center; max-width: 840px; margin: 0 auto 2.4rem; } .puzzle-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.85); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; } .puzzle-eyebrow .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #06d6a0; box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.2); animation: eyebrow-pulse 2.2s ease-in-out infinite; } .puzzle-heading { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: clamp(2rem, 4.2vw, 3rem); color: #fff; letter-spacing: -0.01em; margin-bottom: 0.6rem; } .puzzle-heading .accent { background: linear-gradient(90deg, #ff6b6b 0%, #ffd166 50%, #06d6a0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .puzzle-sub { color: rgba(255, 255, 255, 0.62); font-size: 1rem; } .puzzle-shell { position: relative; max-width: 1100px; margin: 0 auto; padding: 1.4rem; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ---------------- Puzzle widget itself ---------------- */ .sudoku-puzzle { position: relative; display: flex; flex-direction: column; gap: 1rem; color: #f1f3f5; } /* Top bar */ .sp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.25rem 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sp-topbar-left, .sp-topbar-right { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .sp-title { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1rem; color: #fff; letter-spacing: 0.02em; } .sp-title .sp-dot { width: 10px; height: 10px; border-radius: 50%; background: #06d6a0; box-shadow: 0 0 10px rgba(6, 214, 160, 0.8); } .sp-title .sp-badge { font-family: 'Georgia', 'Times New Roman', serif; font-size: 0.72rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; } .sp-difficulty { display: inline-flex; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 3px; } [data-bs-theme="light"] .sp-difficulty { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); } .sp-diff { border: none; background: transparent; color: rgba(255, 255, 255, 0.72); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.38rem 0.9rem; border-radius: 999px; cursor: pointer; transition: all 0.18s ease; } [data-bs-theme="light"] .sp-diff { color: rgba(0, 0, 0, 0.65); } .sp-diff:hover { color: #fff; } [data-bs-theme="light"] .sp-diff:hover { color: #0b0f17; } .sp-diff.is-active { background: linear-gradient(90deg, #ff6b6b, #ffd166); color: #1a1f2b; box-shadow: 0 4px 14px rgba(255, 107, 107, 0.3); } .sp-stat { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; } [data-bs-theme="light"] .sp-stat { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.75); } /* Erros - destaque vermelho */ .sp-stat-errors { border-color: rgba(239, 68, 68, 0.3); } .sp-stat-errors i { color: #ef4444 !important; } .sp-stat-errors .sp-stat-num { color: #ef4444 !important; font-weight: 700; } /* Botão de Hint */ .sp-hint-btn { position: relative; border-color: rgba(250, 204, 21, 0.3); } .sp-hint-btn i { color: #facc15 !important; } .sp-hint-count { position: absolute; top: -4px; right: -4px; background: #facc15; color: #000; font-size: 0.65rem; font-weight: 700; padding: 1px 5px; border-radius: 999px; min-width: 16px; text-align: center; } .sp-hint-btn:disabled { opacity: 0.4; cursor: not-allowed; } .sp-hint-btn:disabled .sp-hint-count { background: #6b7280; } .sp-stat.is-warn { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.3); background: rgba(255, 107, 107, 0.08); } [data-bs-theme="light"] .sp-stat.is-warn { color: #dc3545; border-color: rgba(220, 53, 69, 0.3); background: rgba(220, 53, 69, 0.08); } .sp-stat-time { font-weight: 700; color: #ffd166; } [data-bs-theme="light"] .sp-stat-time { color: #b8860b; } .sp-stat-num { font-weight: 700; } [data-bs-theme="light"] .sp-stat-num { color: #0b0f17; } .sp-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #f1f3f5; font-size: 1.05rem; cursor: pointer; transition: all 0.18s ease; } [data-bs-theme="light"] .sp-icon-btn { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.1); color: #212529; } .sp-icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #ffd166; border-color: rgba(255, 209, 102, 0.35); transform: translateY(-1px); } [data-bs-theme="light"] .sp-icon-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.08); color: #b8860b; border-color: rgba(184, 134, 11, 0.35); } .sp-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Main two-column area */ .sp-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 1.5rem; align-items: start; } @media (max-width: 900px) { .sp-main { grid-template-columns: 1fr; } } /* Board wrapper (with corner accents + overlays) */ .sp-board-wrap { position: relative; padding: 12px; border-radius: 18px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.06); width: 100%; max-width: 900px; margin: 0 auto; } /* Crossword board wrap - no aspect ratio constraint */ .crossword-game .sp-board-wrap { aspect-ratio: unset; height: auto; } .crossword-game .sp-board { width: 100%; aspect-ratio: 1; max-width: 100%; } [data-bs-theme="light"] .sp-board-wrap { background: rgb(245 245 245 / 90%); border: 1px solid rgba(0, 0, 0, 0.1); } .sp-board-corner { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 209, 102, 0.55); pointer-events: none; } .sp-board-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 6px; } .sp-board-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 6px; } .sp-board-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 6px; } .sp-board-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 6px; } .sp-board { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 6px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); width: 100%; aspect-ratio: 1; } [data-bs-theme="light"] .sp-board { background: rgba(248, 249, 250, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.05); } /* Cells */ .sp-cell { position: relative; aspect-ratio: 1; border: none; background: rgba(255, 255, 255, 0.03); color: #f1f3f5; font-family: 'Georgia', 'Times New Roman', serif; font-weight: 700; border-radius: 5px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; } [data-bs-theme="light"] .sp-cell { background: rgba(0, 0, 0, 0.02); color: #212529; } .sp-cell-value { font-size: clamp(0.65rem, 1.2vw, 1rem); line-height: 1; } .sp-cell.is-input .sp-cell-value { color: #ffd166; } [data-bs-theme="light"] .sp-cell.is-input .sp-cell-value { color: #b8860b; } .sp-cell.is-given { background: rgba(255, 255, 255, 0.07); color: #fff; cursor: default; } .sp-cell.is-given .sp-cell-value { color: #fff; } [data-bs-theme="light"] .sp-cell.is-given { background: rgba(0, 0, 0, 0.06); color: #0b0f17; } [data-bs-theme="light"] .sp-cell.is-given .sp-cell-value { color: #0b0f17; } .sp-cell:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); } [data-bs-theme="light"] .sp-cell:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } .sp-cell.is-peer { background: rgb(116 203 162 / 10%); } [data-bs-theme="light"] .sp-cell.is-peer { background: rgba(26, 188, 156, 0.12); } .sp-cell.is-same-value { background: rgba(6, 214, 160, 0.18); } .sp-cell.is-same-value .sp-cell-value { color: #06d6a0; } [data-bs-theme="light"] .sp-cell.is-same-value { background: rgba(13, 148, 136, 0.15); } [data-bs-theme="light"] .sp-cell.is-same-value .sp-cell-value { color: #0d9488; } .sp-cell.is-selected { background: linear-gradient(135deg, rgba(255, 209, 102, 0.38), rgba(255, 107, 107, 0.3)); box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.7); } [data-bs-theme="light"] .sp-cell.is-selected { background: linear-gradient(135deg, rgba(255, 209, 102, 0.5), rgba(255, 165, 0, 0.4)); box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.5), 0 4px 12px rgba(255, 165, 0, 0.25); } .sp-cell.is-selected .sp-cell-value { color: #fff; } [data-bs-theme="light"] .sp-cell.is-selected .sp-cell-value { color: #0b0f17; } .sp-cell.is-mistake { background: rgba(255, 107, 107, 0.22); animation: sp-shake 0.35s ease; } [data-bs-theme="light"] .sp-cell.is-mistake { background: rgba(220, 53, 69, 0.15); } .sp-cell.is-mistake .sp-cell-value { color: #ff6b6b; } [data-bs-theme="light"] .sp-cell.is-mistake .sp-cell-value { color: #dc3545; } @keyframes sp-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } /* Subtle 3x3 region separators — outer walls of the block. */ .sp-cell.has-right-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.18); } .sp-cell.has-bottom-edge { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.18); } .sp-cell.has-right-edge.has-bottom-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(255, 255, 255, 0.18); } /* Thicker 3x3 region border respects the light/dark memory spec. */ [data-bs-theme="light"] .sp-cell.has-right-edge { box-shadow: inset -3px 0 0 rgb(187 187 187 / 65%); } [data-bs-theme="light"] .sp-cell.has-bottom-edge { box-shadow: inset 0 -3px 0 rgb(187 187 187 / 65%); } [data-bs-theme="light"] .sp-cell.has-right-edge.has-bottom-edge { box-shadow: inset -3px 0 0 rgb(187 187 187 / 65%), inset 0 -3px 0 rgb(187 187 187 / 65%); } /* Candidate notes */ .sp-notes { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; padding: 2px; gap: 0; } .sp-note { display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 0.55rem; color: rgba(255, 255, 255, 0.35); font-weight: 600; } [data-bs-theme="light"] .sp-note { color: rgba(0, 0, 0, 0.35); } .sp-note.is-on { color: #06d6a0; } [data-bs-theme="light"] .sp-note.is-on { color: #0d9488; } /* Overlays (pause / solved) */ .sp-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7, 9, 13, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 18px; z-index: 10; animation: sp-fade 0.25s ease; } .sp-overlay-solved { background: radial-gradient(circle at 50% 40%, rgba(255, 209, 102, 0.18), transparent 60%), rgba(7, 9, 13, 0.88); } @keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } } .sp-overlay-card { text-align: center; padding: 1.8rem; max-width: 340px; } .sp-overlay-icon { font-size: 3rem; margin-bottom: 0.4rem; } .sp-overlay-title { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: 1.5rem; margin-bottom: 0.4rem; color: #fff; } .sp-overlay-body { color: rgba(255, 255, 255, 0.75); margin-bottom: 1.1rem; font-size: 0.95rem; } /* Loading spinner over board */ .sp-loading { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: rgba(7, 9, 13, 0.6); border-radius: 18px; z-index: 12; } [data-bs-theme="light"] .sp-loading { background: rgba(255, 255, 255, 0.7); } /* Static loading state (used by lazy-load placeholders) is always visible. */ .sp-loading.sp-loading-static { display: flex; } .sp-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: #ffd166; animation: hs-spin 0.7s linear infinite; } [data-bs-theme="light"] .sp-spinner { border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: #b8860b; } .sp-loading-text { color: var(--text); font-size: 0.7rem; font-weight: 600; text-align: center; opacity: 0.9; letter-spacing: 0.02em; min-height: 1.5em; } [data-bs-theme="light"] .sp-loading-text { color: var(--text); } .sp-loading-tip { color: var(--text); font-size: 0.62rem; font-weight: 400; font-style: italic; text-align: center; opacity: 0.6; letter-spacing: 0.01em; max-width: 28ch; line-height: 1.4; min-height: 1.4em; padding: 0 0.6rem; } [data-bs-theme="light"] .sp-loading-tip { color: var(--text); } /* Side panel (pad + actions) */ .sp-side { display: flex; flex-direction: column; gap: 1rem; align-self: stretch; min-width: 0; max-width: 450px; } .sp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sp-num { position: relative; aspect-ratio: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.5rem 0.4rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); color: #f1f3f5; cursor: pointer; transition: all 0.15s ease; } [data-bs-theme="light"] .sp-num { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); color: #212529; } .sp-num:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 209, 102, 0.35); color: #ffd166; transform: translateY(-1px); } [data-bs-theme="light"] .sp-num:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); border-color: rgba(184, 134, 11, 0.4); color: #b8860b; } .sp-num:disabled { opacity: 0.35; cursor: not-allowed; } .sp-num.is-full { background: rgba(6, 214, 160, 0.1); border-color: rgba(6, 214, 160, 0.3); color: #06d6a0; } [data-bs-theme="light"] .sp-num.is-full { background: rgba(13, 148, 136, 0.12); border-color: rgba(13, 148, 136, 0.35); color: #0d9488; } .sp-num-value { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: 1.55rem; line-height: 1; } .sp-num-count { font-size: 0.66rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); font-weight: 600; } [data-bs-theme="light"] .sp-num-count { color: rgba(0, 0, 0, 0.45); } .sp-num.is-full .sp-num-count { color: rgba(6, 214, 160, 0.8); } [data-bs-theme="light"] .sp-num.is-full .sp-num-count { color: rgba(13, 148, 136, 0.8); } .sp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sp-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.85rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); color: #f1f3f5; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; text-align: left; } [data-bs-theme="light"] .sp-action { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); color: #212529; } .sp-action i { font-size: 1.05rem; color: rgba(255, 255, 255, 0.7); } [data-bs-theme="light"] .sp-action i { color: rgba(0, 0, 0, 0.6); } .sp-action span { flex: 1; } .sp-action .sp-action-hint { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); letter-spacing: 0.04em; } [data-bs-theme="light"] .sp-action .sp-action-hint { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.6); } .sp-action:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 209, 102, 0.35); color: #ffd166; } [data-bs-theme="light"] .sp-action:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); border-color: rgba(184, 134, 11, 0.4); color: #b8860b; } [data-bs-theme="light"] .sp-action:hover:not(:disabled) i { color: #b8860b; } .sp-action:disabled { opacity: 0.4; cursor: not-allowed; } .sp-action.is-on { background: linear-gradient(90deg, rgba(255, 107, 107, 0.25), rgba(255, 209, 102, 0.25)); border-color: rgba(255, 209, 102, 0.45); color: #ffd166; } [data-bs-theme="light"] .sp-action.is-on { background: linear-gradient(90deg, rgba(255, 165, 0, 0.2), rgba(255, 209, 102, 0.2)); border-color: rgba(184, 134, 11, 0.45); color: #b8860b; } [data-bs-theme="light"] .sp-action.is-on i { color: #b8860b; } .sp-toggles { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); } [data-bs-theme="light"] .sp-toggles { background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.08); } .sp-toggle { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; } .sp-toggle input { display: none; } .sp-toggle-track { width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); position: relative; transition: background 0.18s ease; } [data-bs-theme="light"] .sp-toggle-track { background: rgba(0, 0, 0, 0.15); } .sp-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.18s ease; } [data-bs-theme="light"] .sp-toggle-thumb { background: #212529; } .sp-toggle input:checked + .sp-toggle-track { background: linear-gradient(90deg, #ff6b6b, #ffd166); } [data-bs-theme="light"] .sp-toggle input:checked + .sp-toggle-track { background: linear-gradient(90deg, #dc3545, #b8860b); } .sp-toggle input:checked + .sp-toggle-track .sp-toggle-thumb { transform: translateX(16px); } .sp-toggle-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); font-weight: 600; } [data-bs-theme="light"] .sp-toggle-label { color: rgba(0, 0, 0, 0.7); } .sp-bottom-actions { display: flex; gap: 0.5rem; } .sp-btn { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 0.7rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #f1f3f5; cursor: pointer; transition: all 0.18s ease; width: 100%; } [data-bs-theme="light"] .sp-btn { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); color: #212529; } .sp-btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 209, 102, 0.35); color: #ffd166; } [data-bs-theme="light"] .sp-btn-ghost:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); border-color: rgba(184, 134, 11, 0.35); color: #b8860b; } .sp-btn-primary { background: linear-gradient(90deg, #ff6b6b, #ffd166); border-color: transparent; color: #1a1f2b; box-shadow: 0 6px 18px rgba(255, 107, 107, 0.32); } .sp-btn-primary:hover:not(:disabled) { color: #1a1f2b; filter: brightness(1.05); transform: translateY(-1px); } .sp-btn:disabled { opacity: 0.4; cursor: not-allowed; } .sp-shortcuts { margin-top: 1rem; padding: 0.75rem 0.95rem; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.05); } [data-bs-theme="light"] .sp-shortcuts { background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.06); } .sp-shortcuts-title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); font-weight: 700; margin-bottom: 0.5rem; } [data-bs-theme="light"] .sp-shortcuts-title { color: rgba(0, 0, 0, 0.5); } .sp-shortcuts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; } .sp-shortcut { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: rgba(255, 255, 255, 0.72); white-space: nowrap; } [data-bs-theme="light"] .sp-shortcut { color: rgba(0, 0, 0, 0.65); } .sp-shortcut span { color: rgba(255, 255, 255, 0.72); } [data-bs-theme="light"] .sp-shortcut span { color: rgba(0, 0, 0, 0.65); } .sp-shortcut + .sp-shortcut::before { content: '|'; color: rgba(255, 255, 255, 0.18); margin-right: 0.3rem; font-weight: 400; } .sp-shortcut kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 0.1rem 0.35rem; border-radius: 5px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffd166; font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 0.72rem; font-weight: 700; } /* ========================================================================= Light theme for puzzle pages — complete overhaul ========================================================================= */ [data-bs-theme="light"] .puzzle-page { background: radial-gradient(circle at 18% 18%, rgba(255, 107, 107, 0.06) 0%, transparent 45%), radial-gradient(circle at 82% 82%, rgba(6, 214, 160, 0.06) 0%, transparent 48%), linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); color: #212529; } [data-bs-theme="light"] .puzzle-grid-bg { background-image: linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 75%); opacity: 0.5; } [data-bs-theme="light"] .puzzle-glow { opacity: 0.25; } [data-bs-theme="light"] .puzzle-eyebrow { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.75); } [data-bs-theme="light"] .puzzle-heading { color: #0b0f17; } [data-bs-theme="light"] .puzzle-heading .accent { background: linear-gradient(90deg, #dc3545 0%, #b8860b 50%, #0d9488 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-bs-theme="light"] .puzzle-sub { color: rgba(0, 0, 0, 0.6); } [data-bs-theme="light"] .puzzle-shell { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.85) 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); } [data-bs-theme="light"] .sudoku-puzzle { color: #212529; } /* ========================================================================= Size selector (pills) — mirrors .sp-difficulty styling with a cool accent ========================================================================= */ .sp-sizes { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); flex-wrap: wrap; } [data-bs-theme="light"] .sp-sizes { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); } .sp-size { border: none; background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; letter-spacing: 0.04em; font-feature-settings: 'tnum' 1; } [data-bs-theme="light"] .sp-size { color: rgba(0, 0, 0, 0.6); } .sp-size:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.06); } [data-bs-theme="light"] .sp-size:hover:not(:disabled) { color: #0b0f17; background: rgba(0, 0, 0, 0.06); } .sp-size.is-active { background: linear-gradient(135deg, rgba(85, 170, 255, 0.35), rgba(155, 85, 255, 0.35)); color: #fff; box-shadow: 0 2px 8px rgba(85, 170, 255, 0.22); } [data-bs-theme="light"] .sp-size.is-active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.25)); color: #1e40af; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); } .sp-size:disabled { opacity: 0.4; cursor: not-allowed; } /* XL variant gets a complementary accent on difficulty + size pills */ .sp-xl .sp-size.is-active, .sp-xl .sp-diff.is-active { background: linear-gradient(135deg, rgba(6, 214, 160, 0.38), rgba(85, 170, 255, 0.38)); box-shadow: 0 2px 8px rgba(6, 214, 160, 0.22); } .sp-xl .sp-title .sp-dot { background: radial-gradient(circle at 35% 35%, #06d6a0, #118ab2); } /* ========================================================================= Per-size font tuning — larger grids need smaller cell typography ========================================================================= */ .sp-size-4 .sp-cell-value { font-size: clamp(1.6rem, 4.0vw, 2.6rem); } .sp-size-6 .sp-cell-value { font-size: clamp(1.3rem, 3.2vw, 2.1rem); } .sp-size-8 .sp-cell-value { font-size: clamp(1.1rem, 2.6vw, 1.75rem); } .sp-size-9 .sp-cell-value { font-size: clamp(1rem, 2.2vw, 1.55rem); } .sp-size-10 .sp-cell-value { font-size: clamp(0.9rem, 2.0vw, 1.4rem); } .sp-size-12 .sp-cell-value { font-size: clamp(0.8rem, 1.6vw, 1.2rem); } .sp-size-16 .sp-cell-value { font-size: clamp(0.65rem, 1.2vw, 1rem); } .sp-size-10 .sp-note, .sp-size-12 .sp-note { font-size: 0.48rem; } .sp-size-16 .sp-note { font-size: 0.38rem; letter-spacing: -0.02em; } /* Pad scaling: number pad cells shrink on larger grids */ .sp-size-10 .sp-num-value, .sp-size-12 .sp-num-value { font-size: 1.3rem; } .sp-size-16 .sp-num-value { font-size: 1.05rem; } .sp-size-16 .sp-num { aspect-ratio: 1.05; padding: 0.35rem 0.3rem; } .sp-size-16 .sp-num-count { font-size: 0.58rem; } /* Board gap: keep regions visually crisp on denser grids */ .sp-size-12 .sp-board, .sp-size-16 .sp-board { gap: 2px; padding: 4px; } /* ========================================================================= Composite Sudoku — Flower (X) and Cross (+) Five overlapping 9×9 grids on a 21×21 canvas. Most canvas cells are empty (no button is rendered); rendered cells are placed explicitly via grid-row / grid-column inline styles. ========================================================================= */ .sp-composite .sp-board-wrap-composite { background: radial-gradient(circle at 50% 50%, rgba(185, 149, 92, 0.08), transparent 70%), rgba(11, 15, 23, 0.35); padding: 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .sp-composite .sp-board-composite { display: grid; gap: 1px; padding: 2px; background: transparent; aspect-ratio: 1 / 1; width: 100%; max-width: min(82vw, 720px); margin: 0 auto; position: relative; } /* Base cell adjustments for composite layout */ .sp-composite .sp-cell { min-width: 0; font-size: clamp(0.65rem, 1.3vw, 1.1rem); border-radius: 2px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .sp-composite .sp-cell.is-given { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); font-weight: 700; } .sp-composite .sp-cell.is-input { color: #dcb97a; font-weight: 600; } .sp-composite .sp-cell.is-shared { background: rgba(185, 149, 92, 0.07); } .sp-composite .sp-cell.is-shared.is-given { background: rgba(185, 149, 92, 0.18); } .sp-composite .sp-cell.is-peer { background: rgb(116 203 162 / 10%); } .sp-composite .sp-cell.is-shared.is-peer { background: rgb(116 203 162 / 10%) !important; } .sp-composite .sp-cell.is-same-value { background: rgba(185, 149, 92, 0.22); color: #f0d99a; } .sp-composite .sp-cell.is-selected { background: linear-gradient(135deg, rgba(185, 149, 92, 0.55), rgba(220, 185, 122, 0.7)); color: #0b0f17; box-shadow: 0 0 0 2px rgba(220, 185, 122, 0.6), 0 6px 18px rgba(185, 149, 92, 0.35); z-index: 3; transform: scale(1.03); } .sp-composite .sp-cell.is-mistake { color: #ff7a9a; animation: sp-shake 0.35s ease; } /* Internal 3×3 block dividers (respects light-theme 3px spec via existing rule) */ .sp-composite .sp-cell.has-right-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.22); } .sp-composite .sp-cell.has-bottom-edge { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.22); } .sp-composite .sp-cell.has-right-edge.has-bottom-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(255, 255, 255, 0.22); } /* Strong outer "grid wall" — drawn when a canvas neighbour is empty, giving each of the five 9×9 grids a clearly visible boundary. */ .sp-composite .sp-cell.is-edge-t { border-top: 2px solid rgba(220, 185, 122, 0.55); } .sp-composite .sp-cell.is-edge-r { border-right: 2px solid rgba(220, 185, 122, 0.55); } .sp-composite .sp-cell.is-edge-b { border-bottom: 2px solid rgba(220, 185, 122, 0.55); } .sp-composite .sp-cell.is-edge-l { border-left: 2px solid rgba(220, 185, 122, 0.55); } /* ========================================================================= Light theme overrides for composite Sudoku ========================================================================= */ [data-bs-theme="light"] .sp-composite .sp-board-wrap-composite { background: radial-gradient(circle at 50% 50%, rgba(185, 149, 92, 0.06), transparent 70%), rgba(248, 249, 250, 0.85); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.03), 0 4px 20px rgba(0, 0, 0, 0.08); } [data-bs-theme="light"] .sp-composite .sp-cell { background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.06); color: #212529; } [data-bs-theme="light"] .sp-composite .sp-cell.is-given { background: rgba(0, 0, 0, 0.06); color: #0b0f17; } [data-bs-theme="light"] .sp-composite .sp-cell.is-input { color: #b8860b; } [data-bs-theme="light"] .sp-composite .sp-cell:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } [data-bs-theme="light"] .sp-composite .sp-cell.is-peer { background: rgb(52 111 100 / 20%); } [data-bs-theme="light"] .sp-composite .sp-cell.is-shared.is-peer { background: rgba(26, 188, 156, 0.12) !important; } [data-bs-theme="light"] .sp-composite .sp-cell.is-same-value { background: rgba(185, 149, 92, 0.18); color: #8b6914; } [data-bs-theme="light"] .sp-composite .sp-cell.is-selected { background: linear-gradient(135deg, rgba(255, 209, 102, 0.5), rgba(255, 165, 0, 0.4)); color: #0b0f17; box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.5), 0 4px 12px rgba(255, 165, 0, 0.25); } [data-bs-theme="light"] .sp-composite .sp-cell.is-mistake { background: rgba(220, 53, 69, 0.15); color: #dc3545; } [data-bs-theme="light"] .sp-composite .sp-cell.has-right-edge { box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.25); } [data-bs-theme="light"] .sp-composite .sp-cell.has-bottom-edge { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); } [data-bs-theme="light"] .sp-composite .sp-cell.has-right-edge.has-bottom-edge { box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.25); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-t { border-top: 2px solid rgba(139, 105, 20, 0.45); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-r { border-right: 2px solid rgba(139, 105, 20, 0.45); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-b { border-bottom: 2px solid rgba(139, 105, 20, 0.45); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-l { border-left: 2px solid rgba(139, 105, 20, 0.45); } [data-bs-theme="light"] .sp-composite .sp-note { color: rgba(0, 0, 0, 0.35); } [data-bs-theme="light"] .sp-composite .sp-note.is-on { color: #0d9488; } /* Notes mini-grid — identical to the classic component */ .sp-composite .sp-notes { display: grid; width: 100%; height: 100%; font-size: 0.55em; gap: 0; color: rgba(255, 255, 255, 0.45); } .sp-composite .sp-note { display: flex; align-items: center; justify-content: center; line-height: 1; } .sp-composite .sp-note.is-on { color: #9ce39c; font-weight: 600; } /* Variant-specific canvas hints — keeps subtle accent glows that follow the silhouette of each layout. */ .sp-variant-flower .sp-board-wrap-composite::before, .sp-variant-cross .sp-board-wrap-composite::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: screen; } .sp-variant-flower .sp-board-wrap-composite::before { background: radial-gradient(circle at 20% 20%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 80% 20%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 20% 80%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 80% 80%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 50% 50%, rgba(220, 185, 122, 0.22), transparent 32%); } .sp-variant-cross .sp-board-wrap-composite::before { background: radial-gradient(circle at 50% 20%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 20% 50%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 80% 50%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 50% 80%, rgba(185, 149, 92, 0.18), transparent 28%), radial-gradient(circle at 50% 50%, rgba(220, 185, 122, 0.22), transparent 32%); } /* Composite page needs more vertical breathing room */ /* ========================================================================= Variant Cards Section ========================================================================= */ .section-variants { background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 50%, rgba(255, 255, 255, 0.01) 100%); position: relative; overflow: hidden; } .section-variants::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 107, 107, 0.08) 0%, transparent 60%); pointer-events: none; } [data-bs-theme="light"] .section-variants { background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 50%, rgba(0, 0, 0, 0.01) 100%); } .variant-card { height: 100%; padding: 1.75rem; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.2s ease; position: relative; overflow: hidden; } .variant-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff6b6b, #ffd166); opacity: 0; transition: opacity 0.2s ease; } .variant-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } .variant-card:hover::before { opacity: 1; } [data-bs-theme="light"] .variant-card { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } [data-bs-theme="light"] .variant-card:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .variant-icon { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1; } .variant-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; } [data-bs-theme="light"] .variant-title { color: #0b0f17; } .variant-desc { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 1rem; line-height: 1.5; } [data-bs-theme="light"] .variant-desc { color: rgba(0, 0, 0, 0.6); } .variant-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; color: #ffd166; text-decoration: none; transition: all 0.15s ease; } .variant-link:hover { color: #fff; gap: 0.5rem; } [data-bs-theme="light"] .variant-link { color: #b8860b; } [data-bs-theme="light"] .variant-link:hover { color: #0b0f17; } /* ========================================================================= Game Sections (New Homepage Layout) ========================================================================= */ .section-variants { padding: 0; } .game-section { padding: 5rem 0; background: #0a0c10; position: relative; overflow: hidden; } .game-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 209, 102, 0.3) 20%, rgba(255, 107, 107, 0.3) 50%, rgba(255, 209, 102, 0.3) 80%, transparent 100% ); } .game-section-alt { background: #142b2f; position: relative; overflow: hidden; } /* Small floating particles like hero */ .game-section-alt .particle { position: absolute; width: 3px; height: 3px; background: rgba(100, 181, 246, 0.5); border-radius: 50%; animation: float-small-particle 15s infinite ease-in-out; pointer-events: none; } .game-section-alt .particle:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; } .game-section-alt .particle:nth-child(2) { left: 35%; top: 60%; animation-delay: 3s; } .game-section-alt .particle:nth-child(3) { left: 55%; top: 30%; animation-delay: 6s; } .game-section-alt .particle:nth-child(4) { left: 75%; top: 70%; animation-delay: 9s; } .game-section-alt .particle:nth-child(5) { left: 85%; top: 40%; animation-delay: 12s; } @keyframes float-small-particle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; } 25% { transform: translate(30px, -40px) scale(1.2); opacity: 0.7; } 50% { transform: translate(60px, 0) scale(1); opacity: 0.5; } 75% { transform: translate(30px, 40px) scale(0.8); opacity: 0.6; } } .game-section-alt::before { background: linear-gradient(90deg, transparent 0%, rgba(129, 199, 132, 0.3) 20%, rgba(100, 181, 246, 0.3) 50%, rgba(129, 199, 132, 0.3) 80%, transparent 100% ); } /* Grid Lines Effect (Sudoku Variants) */ .section-grid-lines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255, 209, 102, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 209, 102, 0.04) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; overflow: hidden; } .section-grid-lines::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 209, 102, 0.1) 0%, transparent 70%); pointer-events: none; } .section-grid-lines::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(255, 107, 107, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 209, 102, 0.08) 0%, transparent 50%); pointer-events: none; } /* Grid Intersection Dots */ .section-grid-lines .grid-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 209, 102, 0.3); box-shadow: 0 0 8px rgba(255, 209, 102, 0.5); } .section-grid-lines .grid-dot:nth-child(1) { top: 25%; left: 33%; } .section-grid-lines .grid-dot:nth-child(2) { top: 50%; left: 50%; } .section-grid-lines .grid-dot:nth-child(3) { top: 75%; right: 33%; } /* Dots Pattern Effect (Other Games) */ .section-dots-pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle, rgba(100, 181, 246, 0.15) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; overflow: hidden; } .section-dots-pattern::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 15% 20%, rgba(100, 181, 246, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(255, 107, 107, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(129, 199, 132, 0.06) 0%, transparent 60%); pointer-events: none; } .section-dots-pattern::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent 0%, rgba(10, 12, 16, 0.4) 30%, rgba(10, 12, 16, 0.4) 70%, transparent 100% ); pointer-events: none; } [data-bs-theme="light"] .game-section { background: #f5f5f5; } [data-bs-theme="light"] .game-section-alt { background: #ffffff; } /* Game Intro - No card style, just clean text */ .game-intro { padding: 0; } .game-intro-icon { font-size: 4.5rem; margin-bottom: 1.5rem; line-height: 1; display: inline-block; } .game-intro-kids .game-intro-icon, .game-intro:not(.game-intro-kids) .game-intro-icon { font-size: 0; margin-bottom: 0; } .game-intro-kids .game-intro-icon { font-size: 4.5rem; margin-bottom: 1.5rem; } .game-intro-icon i { filter: drop-shadow(0 0 20px rgba(255, 209, 102, 0.4)); color: #ffd166; } .game-intro-kids .game-intro-icon i { filter: drop-shadow(0 0 20px rgba(255, 159, 243, 0.4)); color: #ff9ff3; } .game-intro-title { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: 2.5rem; color: #fff !important; margin-bottom: 1.2rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; } [data-bs-theme="light"] .game-intro-title { color: #0b0f17 !important; } .game-intro-text { font-size: 1.1rem; line-height: 1.9; color: #fff; margin-bottom: 2rem; } [data-bs-theme="light"] .game-intro-text { color: rgba(0, 0, 0, 0.68) !important; } .btn-game-intro { display: inline-flex; align-items: center; gap: 0.6rem; background: transparent; border: 2px solid #ffd166; color: #ffd166; font-weight: 700; padding: 0.9rem 2rem; border-radius: 4px; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; position: relative; overflow: hidden; } .btn-game-intro::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 209, 102, 0.2), transparent); } .btn-game-intro::after { content: '\2192'; display: inline-block; margin-left: 0.4rem; transition: transform 0.3s ease; } .btn-game-intro:hover::before { left: 100%; } .btn-game-intro:hover { background: rgba(255, 209, 102, 0.1); color: #ffd166; border-color: #ffd166; box-shadow: 0 0 20px rgba(255, 209, 102, 0.3); transform: translateY(-2px); } [data-bs-theme="light"] .btn-game-intro { border-color: #b8860b; color: #b8860b; } [data-bs-theme="light"] .btn-game-intro:hover { background: rgba(184, 134, 11, 0.1); color: #b8860b; box-shadow: 0 0 20px rgba(184, 134, 11, 0.2); } .btn-game-intro-kids { border: 2px solid transparent; border-image: linear-gradient(135deg, #52edf9, #ff9ff3, #ffd166) 1; background: transparent; color: transparent; position: relative; } .btn-game-intro-kids::before { content: 'Jogar agora \2192'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 0.6rem; background: linear-gradient(135deg, #52edf9, #ff9ff3, #ffd166); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; } .btn-game-intro-kids:hover { background: rgba(82, 237, 249, 0.1); box-shadow: 0 0 20px rgba(82, 237, 249, 0.3); } .btn-game-intro i { display: none; } .game-category { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 800; font-size: 1.5rem; color: #fff; margin: 2rem 0 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(255, 209, 102, 0.3); } [data-bs-theme="light"] .game-category { color: #0b0f17; border-bottom-color: rgba(184, 134, 11, 0.3); } .game-card { height: 100%; padding: 1.2rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; transition: all 0.3s ease; position: relative; } .game-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #ff6b6b, #ffd166); opacity: 0; transition: opacity 0.3s ease; } .game-card:hover { border-color: rgba(255, 209, 102, 0.3); background: rgba(255, 209, 102, 0.03); box-shadow: 0 0 20px rgba(255, 209, 102, 0.1); transform: translateY(-2px); } .game-card:hover::before { opacity: 1; } [data-bs-theme="light"] .game-card { background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, 0.1); } [data-bs-theme="light"] .game-card:hover { background: rgba(255, 255, 255, 0.8); border-color: rgba(184, 134, 11, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .game-card-kids::before { background: linear-gradient(90deg, #ffd166, #ff9ff3); } .game-card-kids:hover { border-color: rgba(255, 159, 243, 0.3); background: rgba(255, 159, 243, 0.03); box-shadow: 0 0 20px rgba(255, 159, 243, 0.1); } [data-bs-theme="light"] .game-card-kids:hover { border-color: rgba(255, 152, 0, 0.3); } .game-icon { font-size: 2.4rem; margin-bottom: 0.8rem; line-height: 1; display: inline-block; } .game-icon i { color: #ffd166; } .game-card-kids .game-icon i { color: #ff9ff3; } .game-body { margin-top: 0; } .game-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; line-height: 1.2; font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 0.01em; } [data-bs-theme="light"] .game-title { color: #0b0f17; } .game-desc { font-size: 0.92rem; color: rgba(255, 255, 255, 0.65); margin-bottom: 0.8rem; line-height: 1.5; } [data-bs-theme="light"] .game-desc { color: rgba(0, 0, 0, 0.6); } .game-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: #ffd166; text-decoration: none; transition: all 0.25s ease; text-transform: uppercase; letter-spacing: 0.06em; } .game-link.kids { background: linear-gradient(135deg, #52edf9, #ff9ff3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .game-link.kids:hover { background: linear-gradient(135deg, #ff9ff3, #ffd166); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; } .game-link:hover { color: #ff6b6b; text-decoration: none; } [data-bs-theme="light"] .game-link { color: #b8860b; } [data-bs-theme="light"] .game-link:hover { color: #ff6b6b; } .game-link i { transition: transform 0.25s ease; } .game-link:hover i { transform: translateX(4px); } /* ========================================================================= Stats Section ========================================================================= */ .section-stats { background: linear-gradient(126deg, #1c0f28, #183d40); padding: 5rem 0; position: relative; overflow: hidden; } .stats-glow-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 50%, rgba(255, 107, 107, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(255, 209, 102, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(129, 199, 132, 0.06) 0%, transparent 60%); pointer-events: none; } [data-bs-theme="light"] .section-stats { background: #f5f5f5; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .stat-card { text-align: center; padding: 2rem 1.5rem; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #ff6b6b, #ffd166); opacity: 0; transition: opacity 0.3s ease; } .stat-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 209, 102, 0.3); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 209, 102, 0.1); } .stat-card:hover::before { opacity: 1; } [data-bs-theme="light"] .stat-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); } [data-bs-theme="light"] .stat-card:hover { background: #ffffff; border-color: rgba(184, 134, 11, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .stat-icon { font-size: 2rem; margin-bottom: 1rem; color: #ffd166; filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.3)); } .stat-number { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #ff6b6b 0%, #ffd166 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; line-height: 1; letter-spacing: -0.02em; } [data-bs-theme="light"] .stat-number { background: linear-gradient(135deg, #dc3545 0%, #b8860b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } [data-bs-theme="light"] .stat-label { color: rgba(0, 0, 0, 0.65); } .puzzle-page-composite .puzzle-shell { max-width: 1180px; } /* Light-theme tuning — preserve the 3×3 divider spec (3px dark) */ [data-bs-theme="light"] .sp-composite .sp-cell.has-right-edge { box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.65); } [data-bs-theme="light"] .sp-composite .sp-cell.has-bottom-edge { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.65); } [data-bs-theme="light"] .sp-composite .sp-cell.has-right-edge.has-bottom-edge { box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.65), inset 0 -3px 0 rgba(0, 0, 0, 0.65); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-t { border-top-color: rgba(0, 0, 0, 0.7); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-r { border-right-color: rgba(0, 0, 0, 0.7); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-b { border-bottom-color: rgba(0, 0, 0, 0.7); } [data-bs-theme="light"] .sp-composite .sp-cell.is-edge-l { border-left-color: rgba(0, 0, 0, 0.7); } /* Responsive tweaks — shrink the composite board aggressively on mobile */ @media (max-width: 900px) { .sp-composite .sp-board-composite { max-width: 94vw; } .sp-composite .sp-cell { font-size: clamp(0.55rem, 2.2vw, 0.9rem); } } /* ========================================================================== Killer Sudoku — cage styles ========================================================================== */ /* Killer Sudoku internal block edges - more visible with white inset borders */ .sp-killer .sp-cell.has-right-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.4); } .sp-killer .sp-cell.has-bottom-edge { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.4); } .sp-killer .sp-cell.has-right-edge.has-bottom-edge { box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(255, 255, 255, 0.4); } [data-bs-theme="light"] .sp-killer .sp-cell.has-right-edge { box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.65); } [data-bs-theme="light"] .sp-killer .sp-cell.has-bottom-edge { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.65); } [data-bs-theme="light"] .sp-killer .sp-cell.has-right-edge.has-bottom-edge { box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.65), inset 0 -2px 0 rgba(0, 0, 0, 0.65); } /* Killer Sudoku cage borders */ .sp-killer .sp-cell.cage-border-top { border-top: 2px dashed rgba(100, 180, 255, 0.4); } .sp-killer .sp-cell.cage-border-right { border-right: 2px dashed rgba(100, 180, 255, 0.4); } .sp-killer .sp-cell.cage-border-bottom { border-bottom: 2px dashed rgba(100, 180, 255, 0.4); } .sp-killer .sp-cell.cage-border-left { border-left: 2px dashed rgba(100, 180, 255, 0.4); } [data-bs-theme="light"] .sp-killer .sp-cell.cage-border-top { border-top-color: rgba(30, 100, 180, 0.6); } [data-bs-theme="light"] .sp-killer .sp-cell.cage-border-right { border-right-color: rgba(30, 100, 180, 0.6); } [data-bs-theme="light"] .sp-killer .sp-cell.cage-border-bottom { border-bottom-color: rgba(30, 100, 180, 0.6); } [data-bs-theme="light"] .sp-killer .sp-cell.cage-border-left { border-left-color: rgba(30, 100, 180, 0.6); } /* Cage highlight on selection - same cage cells */ .sp-killer .sp-cell.is-cage-peer { background: rgba(100, 180, 255, 0.12); } [data-bs-theme="light"] .sp-killer .sp-cell.is-cage-peer { background: rgba(30, 100, 180, 0.08); } /* Killer Sudoku selected cell - stronger blue to match cage theme */ .sp-killer .sp-cell.is-selected { background: linear-gradient(135deg, rgba(100, 180, 255, 0.45), rgba(70, 150, 230, 0.35)); box-shadow: inset 0 0 0 2px rgba(100, 180, 255, 0.8); } [data-bs-theme="light"] .sp-killer .sp-cell.is-selected { background: linear-gradient(135deg, rgba(30, 100, 180, 0.55), rgba(20, 80, 160, 0.45)); box-shadow: 0 0 0 2px rgba(30, 100, 180, 0.6), 0 4px 12px rgba(30, 100, 180, 0.25); } .sp-killer .sp-cell.is-selected .sp-cell-value { color: #fff; } [data-bs-theme="light"] .sp-killer .sp-cell.is-selected .sp-cell-value { color: #0b0f17; } /* Cage sum label */ .sp-killer .sp-cage-sum { position: absolute; top: 2px; left: 3px; font-size: 0.65rem; font-weight: 700; color: rgba(100, 180, 255, 0.9); pointer-events: none; z-index: 10; line-height: 1; } [data-bs-theme="light"] .sp-killer .sp-cage-sum { color: rgba(30, 100, 180, 0.9); } /* Ensure cells have position relative for absolute positioning of cage sum */ .sp-killer .sp-cell { position: relative; } /* Size selector buttons */ .sp-size-selector { display: flex; gap: 0.35rem; align-items: center; } .sp-size-btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; background: transparent; color: #64b4ff; cursor: pointer; transition: all 0.15s; } .sp-size-btn:hover { background: rgba(100, 180, 255, 0.1); border-color: rgba(100, 180, 255, 0.4); } .sp-size-btn.is-active { background: rgba(100, 180, 255, 0.2); border-color: #64b4ff; color: #64b4ff; } [data-bs-theme="light"] .sp-size-btn { color: #1e64b4; border-color: rgba(0, 0, 0, 0.2); } [data-bs-theme="light"] .sp-size-btn:hover { background: rgba(30, 100, 180, 0.1); border-color: rgba(30, 100, 180, 0.4); } [data-bs-theme="light"] .sp-size-btn.is-active { background: rgba(30, 100, 180, 0.15); border-color: #1e64b4; color: #1e64b4; } /* Responsive adjustments for Killer Sudoku */ @media (max-width: 900px) { .sp-killer .sp-board { max-width: 94vw; } .sp-killer .sp-cell { font-size: clamp(0.6rem, 2.5vw, 1rem); } .sp-killer .sp-cage-sum { font-size: 0.55rem; } } /* ========================================================================== Jigsaw Sudoku — irregular region styles ========================================================================== */ /* Jigsaw Sudoku - Uniform cell background color (like Killer Sudoku cages) */ .sp-jigsaw .sp-cell.is-input { background: rgba(100, 150, 200, 0.08); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-input { background: rgba(60, 120, 180, 0.06); } /* Override given cells with slightly different shade */ .sp-jigsaw .sp-cell.is-given { background: rgba(100, 150, 200, 0.12); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-given { background: rgba(60, 120, 180, 0.10); } /* Region border colors - Single uniform color for all regions */ .sp-jigsaw .sp-cell[class*="region-border-top"] { border-top: 3px dotted #64f6cc70; } .sp-jigsaw .sp-cell[class*="region-border-right"] { border-right: 3px dotted #64f6cc70; } .sp-jigsaw .sp-cell[class*="region-border-bottom"] { border-bottom: 3px dotted #64f6cc70; } .sp-jigsaw .sp-cell[class*="region-border-left"] { border-left: 3px dotted #64f6cc70; } [data-bs-theme="light"] .sp-jigsaw .sp-cell[class*="region-border-top"] { border-top-color: #1976d2; } [data-bs-theme="light"] .sp-jigsaw .sp-cell[class*="region-border-right"] { border-right-color: #1976d2; } [data-bs-theme="light"] .sp-jigsaw .sp-cell[class*="region-border-bottom"] { border-bottom-color: #1976d2; } [data-bs-theme="light"] .sp-jigsaw .sp-cell[class*="region-border-left"] { border-left-color: #1976d2; } /* Jigsaw Sudoku - Region peer highlight (same region cells) */ .sp-jigsaw .sp-cell.is-region-peer { background: rgba(100, 150, 200, 0.15); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-region-peer { background: rgba(60, 120, 180, 0.12); } /* Jigsaw Sudoku selected cell - blue theme */ .sp-jigsaw .sp-cell.is-selected { background: linear-gradient(135deg, rgba(100, 150, 200, 0.45), rgba(70, 120, 180, 0.35)); box-shadow: inset 0 0 0 2px rgba(100, 150, 200, 0.8); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-selected { background: linear-gradient(135deg, rgba(60, 120, 180, 0.55), rgba(40, 100, 160, 0.45)); box-shadow: 0 0 0 2px rgba(60, 120, 180, 0.6), 0 4px 12px rgba(60, 120, 180, 0.25); } .sp-jigsaw .sp-cell.is-selected .sp-cell-value { color: #fff; } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-selected .sp-cell-value { color: #0b0f17; } /* Jigsaw Sudoku region peer highlight */ .sp-jigsaw .sp-cell.is-region-peer { background: rgb(100 200 190 / 20%); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-region-peer { background: rgba(30, 100, 180, 0.07); } /* Jigsaw Sudoku - Peer highlight (same row/column) */ .sp-jigsaw .sp-cell.is-peer { background: rgb(100 150 200 / 17%); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-peer { background: rgba(60, 120, 180, 0.08); } /* Jigsaw Sudoku - When cell is both peer and region-peer, use stronger highlight */ .sp-jigsaw .sp-cell.is-peer.is-region-peer { background: rgb(100 200 190 / 15%); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-peer.is-region-peer { background: rgba(60, 120, 180, 0.14); } /* Jigsaw Sudoku selected cell */ .sp-jigsaw .sp-cell.is-selected { background: linear-gradient(135deg, rgba(100, 180, 255, 0.45), rgba(70, 150, 230, 0.35)); box-shadow: inset 0 0 0 2px rgba(100, 180, 255, 0.8); } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-selected { background: linear-gradient(135deg, rgba(30, 100, 180, 0.55), rgba(20, 80, 160, 0.45)); box-shadow: 0 0 0 2px rgba(30, 100, 180, 0.6), 0 4px 12px rgba(30, 100, 180, 0.25); } .sp-jigsaw .sp-cell.is-selected .sp-cell-value { color: #fff; } [data-bs-theme="light"] .sp-jigsaw .sp-cell.is-selected .sp-cell-value { color: #0b0f17; } /* Responsive adjustments for Jigsaw Sudoku */ @media (max-width: 900px) { .sp-jigsaw .sp-board { max-width: 94vw; } .sp-jigsaw .sp-cell { font-size: clamp(0.6rem, 2.5vw, 1rem); } } /* ========================================================================== Minesweeper Sudoku — Pure mine-finding puzzle styles ========================================================================== */ /* Uniform cell background for Minesweeper Sudoku */ .sp-minesweeper .sp-cell { background: rgba(60, 120, 200, 0.08); border: 1px solid rgba(60, 120, 200, 0.25); } [data-bs-theme="light"] .sp-minesweeper .sp-cell { background: rgba(60, 120, 200, 0.05); border: 1px solid rgba(60, 120, 200, 0.3); } /* Revealed cells */ .sp-minesweeper .sp-cell.is-revealed { background: rgba(60, 120, 200, 0.12); border-color: rgba(60, 120, 200, 0.35); } [data-bs-theme="light"] .sp-minesweeper .sp-cell.is-revealed { background: rgba(60, 120, 200, 0.08); border-color: rgba(60, 120, 200, 0.4); } /* Hidden cells */ .sp-minesweeper .sp-cell.is-hidden { background: rgba(40, 60, 100, 0.15); border-color: rgba(40, 60, 100, 0.35); } [data-bs-theme="light"] .sp-minesweeper .sp-cell.is-hidden { background: rgba(180, 200, 220, 0.25); border-color: rgba(180, 200, 220, 0.5); } /* Bombed cells */ .sp-minesweeper .sp-cell.is-bombed { background: rgba(255, 80, 80, 0.2); border-color: rgba(255, 80, 80, 0.6); } [data-bs-theme="light"] .sp-minesweeper .sp-cell.is-bombed { background: rgba(255, 60, 60, 0.15); border-color: rgba(255, 60, 60, 0.7); } /* Correct flag/mine placement - green highlight */ .sp-minesweeper .sp-cell.is-correct { background: rgba(80, 200, 120, 0.2); border-color: rgba(80, 200, 120, 0.6); box-shadow: 0 0 0 1px rgba(80, 200, 120, 0.4); } [data-bs-theme="light"] .sp-minesweeper .sp-cell.is-correct { background: rgba(60, 180, 100, 0.15); border-color: rgba(60, 180, 100, 0.7); box-shadow: 0 0 0 1px rgba(60, 180, 100, 0.3); } /* Bomb icon */ .sp-minesweeper .sp-bomb-icon { font-size: 1.3rem; line-height: 1; filter: drop-shadow(0 0 2px rgba(255, 80, 80, 0.6)); } /* Mine icon (when revealed by mistake) */ .sp-minesweeper .sp-mine-icon { font-size: 1.2rem; line-height: 1; filter: drop-shadow(0 0 2px rgba(255, 100, 100, 0.5)); } .sp-minesweeper .sp-cell.is-mistake { background: rgba(255, 80, 80, 0.2); border-color: rgba(255, 80, 80, 0.6); } [data-bs-theme="light"] .sp-minesweeper .sp-cell.is-mistake { background: rgba(255, 60, 60, 0.15); border-color: rgba(255, 60, 60, 0.7); } /* Adjacent mine count numbers */ .sp-minesweeper .sp-mine-count { font-size: 1.1rem; font-weight: 700; line-height: 1; } /* Style for 0 mine count - more subtle */ .sp-minesweeper .sp-mine-count.is-zero { color: rgba(150, 150, 150, 0.5); font-weight: 400; } [data-bs-theme="light"] .sp-minesweeper .sp-mine-count.is-zero { color: rgba(120, 120, 120, 0.5); } /* Peer highlight (same row/column/box) */ .sp-minesweeper .sp-cell.is-peer { background: rgba(100, 150, 200, 0.10); } [data-bs-theme="light"] .sp-minesweeper .sp-cell.is-peer { background: rgba(60, 120, 180, 0.08); } /* Selected cell */ .sp-minesweeper .sp-cell.is-selected { background: linear-gradient(135deg, rgba(100, 150, 200, 0.45), rgba(70, 120, 180, 0.35)); box-shadow: inset 0 0 0 2px rgba(100, 150, 200, 0.8); } [data-bs-theme="light"] .sp-minesweeper .sp-cell.is-selected { background: linear-gradient(135deg, rgba(60, 120, 180, 0.55), rgba(40, 100, 160, 0.45)); box-shadow: 0 0 0 2px rgba(60, 120, 180, 0.6), 0 4px 12px rgba(60, 120, 180, 0.25); } /* Safe mode button active state */ .sp-minesweeper .sp-action.is-on.is-safe-active { background: rgba(80, 200, 120, 0.15); border-color: rgba(80, 200, 120, 0.4); box-shadow: 0 0 0 2px rgba(80, 200, 120, 0.3); } [data-bs-theme="light"] .sp-minesweeper .sp-action.is-on.is-safe-active { background: rgba(60, 180, 100, 0.12); border-color: rgba(60, 180, 100, 0.5); box-shadow: 0 0 0 2px rgba(60, 180, 100, 0.25); } /* Make Safe/Bomb buttons taller like sp-num */ .sp-minesweeper .sp-actions .sp-action:nth-child(1), .sp-minesweeper .sp-actions .sp-action:nth-child(2) { padding: 0.75rem 0.85rem; flex-direction: column; justify-content: center; gap: 0.25rem; } .sp-minesweeper .sp-actions .sp-action:nth-child(1) i, .sp-minesweeper .sp-actions .sp-action:nth-child(2) i { font-size: 1.3rem; } .sp-minesweeper .sp-actions .sp-action:nth-child(1) span:not(.sp-action-hint), .sp-minesweeper .sp-actions .sp-action:nth-child(2) span:not(.sp-action-hint) { font-size: 0.9rem; } .sp-minesweeper .sp-actions .sp-action:nth-child(1) .sp-action-hint, .sp-minesweeper .sp-actions .sp-action:nth-child(2) .sp-action-hint { margin-top: 0.15rem; } /* Bomb mode button active state */ .sp-minesweeper .sp-action.is-on.is-bomb-active { background: rgba(255, 80, 80, 0.15); border-color: rgba(255, 80, 80, 0.4); box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.3); } [data-bs-theme="light"] .sp-minesweeper .sp-action.is-on.is-bomb-active { background: rgba(255, 60, 60, 0.12); border-color: rgba(255, 60, 60, 0.5); box-shadow: 0 0 0 2px rgba(255, 60, 60, 0.25); } /* Mine counter stat styling */ .sp-minesweeper .sp-topbar-right .sp-stat:nth-child(2) { color: rgba(255, 150, 100, 0.9); } [data-bs-theme="light"] .sp-minesweeper .sp-topbar-right .sp-stat:nth-child(2) { color: rgba(200, 100, 50, 0.9); } /* Responsive adjustments for Minesweeper Sudoku */ @media (max-width: 900px) { .sp-minesweeper .sp-board { max-width: 94vw; } .sp-minesweeper .sp-cell { font-size: clamp(0.6rem, 2.5vw, 1rem); } .sp-minesweeper .sp-mine-icon { font-size: 1rem; } .sp-minesweeper .sp-mine-count { font-size: 0.7rem; } } /* Minesweeper Sudoku page background */ .puzzle-page-minesweeper .puzzle-grid-bg { background-image: linear-gradient(rgba(100, 150, 200, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 150, 200, 0.03) 1px, transparent 1px); background-size: 20px 20px; } [data-bs-theme="light"] .puzzle-page-minesweeper .puzzle-grid-bg { background-image: linear-gradient(rgba(60, 120, 180, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 120, 180, 0.05) 1px, transparent 1px); } /* ========================================================================= Crossword Puzzle ========================================================================= */ /* Crossword board */ .puzzle-page-crossword { overflow-y: auto !important; overflow-x: hidden; } .puzzle-page-crossword .puzzle-shell { overflow: visible; } .cw-board { background: #2c2c2c; border: 3px solid #2c2c2c; width: 100%; max-width: 100%; display: grid; gap: 2px; } [data-bs-theme="light"] .cw-board { background: #e0e0e0; border: 3px solid #e0e0e0; } /* Crossword cells */ .cw-cell { aspect-ratio: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: all 0.15s ease; font-size: clamp(0.8rem, 2vw, 1.2rem); font-weight: 700; padding: 0; min-width: 0; } [data-bs-theme="light"] .cw-cell { border: 1px solid rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.03); } /* Empty cells (no solution) */ .cw-cell.is-empty { background: rgba(0, 0, 0, 0.6); cursor: default; border-color: rgba(255, 255, 255, 0.05); } [data-bs-theme="light"] .cw-cell.is-empty { background: rgba(0, 0, 0, 0.2); } /* Given cells (pre-revealed) */ .cw-cell.is-given { background: rgba(100, 150, 200, 0.15); } [data-bs-theme="light"] .cw-cell.is-given { background: rgba(100, 150, 200, 0.12); } /* Selected cell */ .cw-cell.is-selected { background: rgba(255, 209, 102, 0.3) !important; border-color: rgba(255, 209, 102, 0.6) !important; box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.4); } /* Mistake */ .cw-cell.is-mistake { background: rgba(255, 80, 80, 0.25) !important; border-color: rgba(255, 80, 80, 0.6) !important; } .cw-cell.is-mistake .cw-letter { color: #ff6b6b !important; } /* Letter display */ .cw-letter { color: #f1f3f5; font-size: 1.4rem; text-transform: uppercase; } [data-bs-theme="light"] .cw-letter { color: #212529; } .cw-letter.is-given-letter { color: #ffd166; font-weight: 800; } /* Mode selector */ .sp-mode-selector { display: flex; gap: 0.5rem; margin-left: 1rem; } .sp-mode-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); color: #f1f3f5; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } [data-bs-theme="light"] .sp-mode-btn { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); color: #212529; } .sp-mode-btn.is-active { background: rgba(255, 209, 102, 0.15); border-color: rgba(255, 209, 102, 0.4); color: #ffd166; } [data-bs-theme="light"] .sp-mode-btn.is-active { background: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.5); } .sp-mode-btn i { font-size: 0.9rem; } /* Words list */ .cw-side { max-width: 450px; } .cw-words-list { flex: 1; overflow-y: auto; margin-bottom: 1rem; max-height: 500px; } .cw-words-title { font-size: 1rem; font-weight: 700; color: #f1f3f5; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .cw-words-title-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .cw-words-title-row .cw-words-title { margin-bottom: 0; } .cw-toggle-definitions { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; font-size: 0.75rem; font-weight: 600; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: all 0.15s ease; } .cw-toggle-definitions:hover { background: rgba(255, 209, 102, 0.15); border-color: rgba(255, 209, 102, 0.4); color: #ffd166; } .cw-toggle-definitions.is-on { border-color: rgba(255, 209, 102, 0.4); color: #ffd166; } .cw-toggle-definitions.is-off { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5); } .cw-toggle-definitions i { font-size: 0.9rem; } [data-bs-theme="light"] .cw-toggle-definitions { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.75); } [data-bs-theme="light"] .cw-toggle-definitions:hover { background: rgba(255, 153, 0, 0.12); border-color: rgba(255, 153, 0, 0.4); color: #b86e00; } [data-bs-theme="light"] .cw-toggle-definitions.is-on { border-color: rgba(255, 153, 0, 0.45); color: #b86e00; } [data-bs-theme="light"] .cw-toggle-definitions.is-off { color: rgba(0, 0, 0, 0.5); } [data-bs-theme="light"] .cw-words-title { color: #212529; } .cw-words-title i { color: #ffd166; } .cw-words-container { display: flex; flex-direction: column; gap: 0.75rem; } .cw-word-item { padding: 0.75rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: all 0.15s ease; } [data-bs-theme="light"] .cw-word-item { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); } .cw-word-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); } [data-bs-theme="light"] .cw-word-item:hover { background: rgba(0, 0, 0, 0.05); } .cw-word-item.is-active { background: rgba(255, 209, 102, 0.1); border-color: rgba(255, 209, 102, 0.4); box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.2); } .cw-word-item.is-guessed { background: linear-gradient(135deg, #4ade80, #22c55e); color: #ffffff; border-color: #22c55e; border-left: 3px solid #16a34a; box-shadow: 0 0 12px rgba(34, 197, 94, 0.45); animation: foundPulse 0.6s ease; } [data-bs-theme="light"] .cw-word-item.is-guessed { background: linear-gradient(135deg, #4ade80, #22c55e); color: #ffffff; border-color: #22c55e; box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35); } .cw-word-item.is-guessed:hover { background: linear-gradient(135deg, #4ade80, #22c55e); border-color: #22c55e; } .cw-word-item.is-guessed .cw-word-text { color: #ffffff; text-decoration: line-through; text-decoration-thickness: 2px; } .cw-word-item.is-guessed .cw-word-direction, [data-bs-theme="light"] .cw-word-item.is-guessed .cw-word-direction { color: rgba(255, 255, 255, 0.9); } .cw-word-item.is-guessed .cw-word-group, [data-bs-theme="light"] .cw-word-item.is-guessed .cw-word-group { color: rgba(255, 255, 255, 0.85); } .cw-word-item.is-guessed .cw-word-clue strong, [data-bs-theme="light"] .cw-word-item.is-guessed .cw-word-clue strong, .cw-word-item.is-guessed .cw-word-clue p, [data-bs-theme="light"] .cw-word-item.is-guessed .cw-word-clue p { color: rgba(255, 255, 255, 0.95); } .cw-word-check { color: #ffffff; font-size: 1.4rem; margin-right: 0.4rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); animation: foundPulse 0.6s ease; } .cw-word-check.cw-word-check--right { margin-right: 0; margin-left: 0.4rem; } .cw-word-direction-below { margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 0.3rem; } .cw-word-item.is-guessed .cw-word-direction-below { color: rgba(255, 255, 255, 0.9); } .cw-word-direction-below i { font-size: 0.85rem; } .cw-word-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .cw-word-direction { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 0.3rem; } [data-bs-theme="light"] .cw-word-direction { color: rgba(0, 0, 0, 0.6); } .cw-word-direction i { font-size: 0.85rem; } .cw-word-text { font-size: 0.9rem; font-weight: 800; color: #ffd166; text-transform: uppercase; letter-spacing: 0.05em; } .cw-word-clue { margin-bottom: 0.5rem; } .cw-word-clue strong { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.25rem; } [data-bs-theme="light"] .cw-word-clue strong { color: rgba(0, 0, 0, 0.7); } .cw-word-clue p { font-size: 0.8rem; color: #f1f3f5; margin: 0; line-height: 1.4; } [data-bs-theme="light"] .cw-word-clue p { color: #212529; } .cw-word-group { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); font-style: italic; } [data-bs-theme="light"] .cw-word-group { color: rgba(0, 0, 0, 0.6); } .cw-word-definition { margin-top: 0.25rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); line-height: 1.4; } [data-bs-theme="light"] .cw-word-definition { color: rgba(0, 0, 0, 0.78); } .cw-word-item.is-guessed .cw-word-definition, [data-bs-theme="light"] .cw-word-item.is-guessed .cw-word-definition { color: rgba(255, 255, 255, 0.95); } /* Guess input */ .cw-guess-input { display: flex; gap: 0.5rem; } .cw-input { flex: 1; padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.2); color: #f1f3f5; font-size: 0.85rem; outline: none; transition: all 0.15s ease; } [data-bs-theme="light"] .cw-input { border: 1px solid rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.05); color: #212529; } .cw-input:focus { border-color: rgba(255, 209, 102, 0.5); box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.2); } .cw-input::placeholder { color: rgba(255, 255, 255, 0.4); } [data-bs-theme="light"] .cw-input::placeholder { color: rgba(0, 0, 0, 0.4); } .cw-guess-btn { padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid rgba(80, 200, 120, 0.4); background: rgba(80, 200, 120, 0.15); color: #50c878; cursor: pointer; transition: all 0.15s ease; font-size: 1.1rem; } .cw-guess-btn:hover { background: rgba(80, 200, 120, 0.25); border-color: rgba(80, 200, 120, 0.6); } /* Crossword page background */ .puzzle-page-crossword .puzzle-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(200, 180, 150, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 180, 150, 0.03) 1px, transparent 1px); background-size: 25px 25px; } [data-bs-theme="light"] .puzzle-page-crossword .puzzle-grid-bg { background-image: linear-gradient(rgba(150, 130, 110, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 130, 110, 0.05) 1px, transparent 1px); } /* ========================================================================== Word Search Game Styles ========================================================================== */ .word-search-game { position: relative; } /* Garantir que o board wrapper tem tamanho adequado para grids grandes */ .word-search-game .sp-board-wrap { max-width: 900px; } /* Ajustar padding para grids grandes */ .word-search-game .sp-board { max-width: 100%; box-sizing: border-box; } /* Garantir que células não ultrapassam o container */ .word-search-game .ws-cell { min-width: 0; min-height: 0; overflow: hidden; font-size: clamp(0.6rem, 2.5vw, 1.2rem); } /* Ajustes responsivos para grids grandes */ @media (max-width: 768px) { .word-search-game .sp-board-wrap { max-width: 100%; padding: 8px; } .word-search-game .sp-board { gap: 1px; padding: 3px; } .word-search-game .ws-cell { font-size: clamp(0.5rem, 3vw, 0.9rem); } } /* Grid 20x20 - ajuste especial */ .ws-board[style*="grid-template-columns: repeat(20"] .ws-cell { font-size: clamp(0.5rem, 2vw, 0.85rem); } /* Garantir que o grid nunca ultrapassa o container */ .ws-board { width: 100% !important; max-width: 100%; box-sizing: border-box; } .word-search-board { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* Word Search Board */ .ws-board { position: relative; z-index: 1; } .ws-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--sp-cell-bg); border: 1px solid var(--sp-cell-border); font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; padding: 0; margin: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; position: relative; z-index: 1; } .ws-cell:hover { background: var(--sp-cell-hover); transform: scale(1.05); z-index: 2; } /* Efeito ao arrastar/selecionar */ .ws-cell.is-selecting { background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white; border-color: #3b82f6; transform: scale(1.08); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); z-index: 3; } /* Célula com hint - destaque amarelo */ .ws-cell.is-hint { background: linear-gradient(135deg, #facc15, #eab308); color: #000; border-color: #facc15; animation: hintPulse 1.5s ease-in-out 3; box-shadow: 0 0 15px rgba(250, 204, 21, 0.6); z-index: 4; } @keyframes hintPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(250, 204, 21, 0.6); } 50% { transform: scale(1.15); box-shadow: 0 0 25px rgba(250, 204, 21, 0.9); } } .ws-cell.is-found { background: linear-gradient(135deg, #4ade80, #22c55e); color: white; border-color: #22c55e; animation: foundPulse 0.6s ease; box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); } @keyframes foundPulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .ws-letter { display: block; font-size: inherit; font-weight: inherit; pointer-events: none; user-select: none; -webkit-user-select: none; } /* Words Panel */ .ws-words-panel { background: var(--sp-panel-bg); border-radius: 12px; padding: 20px; border: 2px solid var(--sp-cell-border); max-height: 600px; overflow-y: auto; } .ws-words-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px 0; color: var(--sp-text); display: flex; align-items: center; gap: 8px; } .ws-words-title i { color: var(--sp-accent); } .ws-side { max-width: 450px; } .ws-words-list { flex: 1; overflow-y: auto; margin-bottom: 1rem; max-height: 500px; } .ws-words-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; position: sticky; top: 0; background: var(--sp-side-bg); padding: 8px 0; z-index: 1; } .ws-toggle-defs-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--sp-text); padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; } .ws-toggle-defs-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--sp-accent); transform: translateY(-1px); } .ws-toggle-defs-btn i { font-size: 1rem; } .ws-words-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--sp-text); display: flex; align-items: center; gap: 8px; } .ws-words-title i { color: var(--sp-accent); } .ws-words-container { display: flex; flex-direction: column; gap: 0.75rem; } /* Layout compacto - 2 colunas */ .ws-words-container.ws-words-compact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .ws-words-container.ws-words-compact .ws-word-item { padding: 0.5rem; } .ws-words-container.ws-words-compact .ws-word-text { font-size: 0.9rem; } .ws-word-item { display: flex; flex-direction: column; padding: 0.75rem; background: rgba(255, 255, 255, 0.03); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.09); border-left: 4px solid var(--sp-accent); transition: all 0.3s ease; } .ws-word-item.is-found { background: linear-gradient(135deg, #4ade80, #22c55e); color: #ffffff; border-color: #22c55e; border-left-color: #16a34a; box-shadow: 0 0 12px rgba(34, 197, 94, 0.45); animation: foundPulse 0.6s ease; } [data-bs-theme="light"] .ws-word-item.is-found { color: #ffffff; box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35); } .ws-word-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ws-word-text { font-weight: 600; letter-spacing: 0.05em; font-size: 1rem; } .ws-word-item.is-found .ws-word-text { text-decoration: line-through; text-decoration-thickness: 2px; color: #ffffff; } .ws-word-item i { font-size: 1.2rem; color: #22c55e; flex-shrink: 0; } .ws-word-item.is-found i, .ws-word-item.is-found .ws-word-check { color: #ffffff; font-size: 1.4rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); animation: foundPulse 0.6s ease; } .ws-word-item.is-found .ws-word-definition { color: rgba(255, 255, 255, 0.92); opacity: 1; } .ws-word-definition { margin-top: 6px; font-size: 0.85rem; opacity: 0.8; line-height: 1.4; } /* ========================================================================== Wordle Game ========================================================================== */ .wordle-game { width: 100%; } /* Word Length Selector */ .sp-word-length { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 0; } .sp-len-btn { padding: 12px 8px; border: 2px solid rgba(102, 126, 234, 0.3); background: transparent; color: var(--text); border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s; text-align: center; } .sp-len-btn:hover { border-color: #667eea; background: rgba(102, 126, 234, 0.1); transform: translateY(-2px); } .sp-len-btn.is-active { border-color: #667eea; background: linear-gradient(135deg, #667eea, #764ba2); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } /* Game Board - usa sp-board diretamente (cores consistentes com o site) */ .wordle-game .sp-board { width: 100% !important; max-width: 100%; aspect-ratio: 1 / 1; /* ← Board sempre quadrado */ box-sizing: border-box; display: grid; gap: 2px; /* Grid centrado - células iguais */ grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 10), minmax(0, 1fr)); /* Centra o grid no quadrado */ justify-content: center; align-content: center; } /* Wordle board wrap - height auto para ajustar ao conteúdo */ .wordle-game .sp-board-wrap { aspect-ratio: unset; height: auto; } /* Garantir que o Wordle board escala como o Word Search */ .wordle-game .sp-board-wrap { max-width: 900px; } .wordle-game .sp-board { max-width: 100%; box-sizing: border-box; } /* Garantir que células não ultrapassam o container */ .wordle-game .wordle-cell { min-width: 0; min-height: 0; overflow: hidden; } /* Ajustes responsivos para Wordle */ @media (max-width: 768px) { .wordle-game .sp-board-wrap { max-width: 100%; padding: 8px; } .wordle-game .sp-board { gap: 1px; } .wordle-game .wordle-cell { font-size: clamp(0.6rem, 3vw, 1rem); } } /* Células Wordle - estilo sp-cell */ .wordle-cell { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; border: none; background: rgba(0, 0, 0, 0.6); color: #f1f3f5; font-family: 'Georgia', 'Times New Roman', serif; font-weight: 700; border-radius: 5px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; } [data-bs-theme="light"] .wordle-cell { background: rgba(0, 0, 0, 0.02); color: #212529; } .wordle-cell:hover:not(:disabled) { background: rgb(0 0 0 / 23%); } [data-bs-theme="light"] .wordle-cell:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } .wordle-cell:disabled { cursor: not-allowed; opacity: 0.9; } /* Estados das células - estilo Wordle */ .wordle-cell.is-selected { background: linear-gradient(135deg, rgba(255, 209, 102, 0.38), rgba(255, 107, 107, 0.3)); box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.7); } [data-bs-theme="light"] .wordle-cell.is-selected { background: linear-gradient(135deg, rgba(255, 209, 102, 0.5), rgba(255, 165, 0, 0.4)); box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.5), 0 4px 12px rgba(255, 165, 0, 0.25); } /* Current row highlighting - same as is-peer */ .wordle-cell.is-current-row { background: rgb(75 158 119 / 33%); } [data-bs-theme="light"] .wordle-cell.is-current-row { background: rgba(26, 188, 156, 0.12); } /* Unused rows - dark background */ .wordle-cell.is-unused { background: rgba(0, 0, 0, 0.6); } [data-bs-theme="light"] .wordle-cell.is-unused { background: rgba(0, 0, 0, 0.08); } .wordle-cell.is-correct { background: rgba(6, 214, 160, 0.3); color: #06d6a0; } .wordle-cell.is-correct .wordle-letter { color: #06d6a0; font-weight: 800; } [data-bs-theme="light"] .wordle-cell.is-correct { background: rgba(16, 185, 129, 0.3); } .wordle-cell.is-present { background: rgba(250, 204, 21, 0.3); color: #facc15; } .wordle-cell.is-present .wordle-letter { color: #facc15; font-weight: 800; } [data-bs-theme="light"] .wordle-cell.is-present { background: rgba(245, 158, 11, 0.3); } .wordle-cell.is-absent { background: rgba(75, 85, 99, 0.15); color: #6b7280; opacity: 0.6; } .wordle-letter { display: block; font-size: clamp(0.65rem, 1.2vw, 1rem); line-height: 1; pointer-events: none; user-select: none; text-transform: uppercase; } .wordle-cursor { display: inline-block; animation: cursorBlink 1s ease-in-out infinite; color: #ffd166; font-weight: 700; font-size: inherit; } @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes flipIn { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } /* Side Panel */ .wordle-side { display: flex; flex-direction: column; } .wordle-side-content { flex: 1; overflow-y: auto; padding-bottom: 1rem; } /* Hints Badge */ .wordle-hints-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: linear-gradient(135deg, #facc15, #eab308); color: #000; font-size: 0.75rem; font-weight: 700; margin-left: 0.5rem; } /* Hint Message */ /* Hint Messages */ .wordle-hints-container { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .wordle-hint-message { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(234, 179, 8, 0.1)); border: 1px solid rgba(250, 204, 21, 0.4); border-radius: 8px; color: #fbbf24; font-size: 0.875rem; line-height: 1.4; } .wordle-hint-number { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #fbbf24; color: #1a1a1a; font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .wordle-hint-message span { flex: 1; } .wordle-hint-close { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #fbbf24; cursor: pointer; border-radius: 4px; transition: all 0.15s ease; } .wordle-hint-close:hover { background: rgba(250, 204, 21, 0.2); } /* Hint Button */ .sp-btn-hint { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, #facc15, #eab308); color: #000; border: none; border-radius: 8px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; } .sp-btn-hint:hover:not(.is-disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4); } .sp-btn-hint.is-disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); } .wordle-section { margin-bottom: 1.5rem; } .wordle-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--text); } .wordle-section-title i { color: #667eea; } /* Keyboard */ .wordle-keyboard { display: flex; flex-direction: column; gap: 6px; } .wordle-key-row { display: flex; gap: 5px; justify-content: center; } .wordle-key { position: relative; min-width: 36px; height: 56px; padding: 0.5rem 0.4rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); color: #f1f3f5; font-weight: 600; font-size: 1.1rem; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; } [data-bs-theme="light"] .wordle-key { border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); color: #212529; } .wordle-key:hover:not(.is-disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 209, 102, 0.35); color: #ffd166; transform: translateY(-1px); } [data-bs-theme="light"] .wordle-key:hover:not(.is-disabled) { background: rgba(0, 0, 0, 0.06); border-color: rgba(184, 134, 11, 0.4); color: #b8860b; } .wordle-key:active:not(.is-disabled) { transform: translateY(0); } .wordle-key-wide { min-width: 38px; flex: 0.6; padding: 0 4px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; font-size: 0.7rem; } .wordle-key-wide:hover:not(.is-disabled) { background: linear-gradient(135deg, #7c8ff5, #8a5bb8); } .wordle-key.is-correct { background: rgba(6, 214, 160, 0.15); border-color: rgba(6, 214, 160, 0.4); color: #06d6a0; } .wordle-key.is-present { background: rgba(250, 204, 21, 0.15); border-color: rgba(250, 204, 21, 0.4); color: #facc15; } .wordle-key.is-absent { background: rgba(75, 85, 99, 0.15); border-color: rgba(75, 85, 99, 0.3); color: #6b7280; opacity: 0.6; } .wordle-key.is-disabled { cursor: not-allowed; opacity: 0.5; } /* Message */ .wordle-message { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; margin-top: 20px; font-weight: 600; background: rgba(102, 126, 234, 0.1); border: 2px solid rgba(102, 126, 234, 0.3); color: var(--text); } .wordle-message.is-success { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.5); color: #22c55e; } .wordle-message.is-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.5); color: #ef4444; } .wordle-message i { font-size: 1.3rem; } /* Success stat */ .sp-stat-success { border-color: rgba(34, 197, 94, 0.3); } .sp-stat-success i { color: #22c55e !important; } /* Responsive */ @media (max-width: 1024px) { .wordle-cell { font-size: clamp(1rem, 2.5vw, 1.5rem); } } @media (max-width: 768px) { .wordle-cell { font-size: clamp(0.6rem, 2.5vw, 0.9rem); } .wordle-key { min-width: 30px; height: 46px; padding: 0.35rem 0.3rem; font-size: 0.9rem; } .wordle-key-wide { min-width: 34px; font-size: 0.65rem; padding: 0 3px; } .sp-word-length { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Hangman Game ========================================================================== */ /* Word Display */ .hangman-word-display { display: flex; gap: 0.5rem; justify-content: center; align-items: center; padding: 2rem 1rem; flex-wrap: wrap; } .hangman-cell { width: 50px; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); border: 2px solid #6b7280; border-radius: 8px; transition: all 0.3s ease; } .hangman-cell.is-revealed { background: rgba(6, 214, 160, 0.2); border-color: #06d6a0; } .hangman-cell-letter { font-size: 2rem; font-weight: 700; color: #06d6a0; font-family: 'Georgia', 'Times New Roman', serif; } .hangman-cell-blank { width: 30px; height: 2px; background: #6b7280; } /* Keyboard */ .hangman-keyboard { margin-bottom: 1.5rem; } .hangman-keyboard-row { display: flex; gap: 0.3rem; justify-content: center; margin-bottom: 0.3rem; } .hangman-key { min-width: 36px; height: 45px; padding: 0.5rem 0.4rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); color: #f1f3f5; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; } .hangman-key:hover:not(.is-disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 209, 102, 0.35); color: #ffd166; transform: translateY(-1px); } .hangman-key.is-correct { background: rgba(6, 214, 160, 0.3); border-color: #06d6a0; color: #06d6a0; } .hangman-key.is-wrong { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #ef4444; opacity: 0.5; cursor: not-allowed; } .hangman-key.is-disabled { opacity: 0.3; cursor: not-allowed; } /* Hints */ .hangman-hints { margin-bottom: 1.5rem; } .hangman-hints-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; color: #ffd166; margin-bottom: 1rem; } .hangman-hints-badge { background: #ffd166; color: #1a1a1a; padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.85rem; font-weight: 700; } .hangman-hints-container { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .hangman-hint-message { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(234, 179, 8, 0.1)); border: 1px solid rgba(250, 204, 21, 0.4); border-radius: 8px; color: #fbbf24; font-size: 0.875rem; line-height: 1.4; } .hangman-hint-number { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #fbbf24; color: #1a1a1a; font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; } /* Status */ .hangman-status { margin-top: 1rem; } .hangman-status-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; color: #ef4444; } .hangman-status-item i { font-size: 1.2rem; } /* Light mode adjustments */ [data-bs-theme="light"] .hangman-cell { background: rgba(0, 0, 0, 0.08); } [data-bs-theme="light"] .hangman-key { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); color: #1a1a1a; } [data-bs-theme="light"] .hangman-key:hover:not(.is-disabled) { background: rgba(0, 0, 0, 0.1); } /* Hangman Game - Force square board */ .hangman-game .sp-board-wrap { aspect-ratio: 1 / 1; height: auto !important; } /* ==================================================================== Cross Math Game — overrides on top of the sp-* design system (sp-board-wrap from CrosswordGame, sp-side from SudokuPuzzle). ==================================================================== */ /* Non-playable cells (operator, equals, block) — no hover/cursor */ .cross-math-game .sp-cell.is-nonplay { cursor: default; } .cross-math-game .sp-cell.is-nonplay:hover { background: inherit; transform: none; box-shadow: none; } /* Block cells: empty separator squares (the "black squares" of the crossword) */ .cross-math-game .sp-cell.cm-block { background: #0f0f0f; border-radius: 0; border-color: transparent; cursor: default; } [data-bs-theme="light"] .cross-math-game .sp-cell.cm-block { background: #2c3050; } /* Operator + equals cells: tinted, slightly different background */ .cross-math-game .sp-cell.cm-op, .cross-math-game .sp-cell.cm-eq { background: rgb(108 255 209 / 15%); border: 1px solid rgb(108 255 244 / 22%); color: rgba(255, 255, 255, 0.85); cursor: default; font-weight: 800; } .cross-math-game .sp-cell.cm-op .sp-cell-value, .cross-math-game .sp-cell.cm-eq .sp-cell-value { font-size: clamp(0.75rem, 1.6vw, 1.2rem); font-weight: 800; line-height: 1; } .cross-math-game .sp-cell.cm-eq .sp-cell-value { color: #ffd166; } [data-bs-theme="light"] .cross-math-game .sp-cell.cm-op, [data-bs-theme="light"] .cross-math-game .sp-cell.cm-eq { background: rgba(108, 140, 255, 0.14); border-color: rgba(108, 140, 255, 0.32); color: #2c3050; } [data-bs-theme="light"] .cross-math-game .sp-cell.cm-eq .sp-cell-value { color: #c97800; } /* Number cells inherit sp-cell defaults; just hint at empty inputs with a dashed border so the player sees them clearly. */ .cross-math-game .sp-cell.cm-num.is-input { border: 1px dashed #00fff8; } /* Lazy-load placeholder — empty board area with a soft pulsing tone while Livewire mounts and generates the real puzzle. */ .cm-board-skeleton { min-height: 360px; height: 100%; aspect-ratio: 1 / 1; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); animation: cm-skeleton-pulse 1.6s ease-in-out infinite; } [data-bs-theme="light"] .cm-board-skeleton { background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%); } @keyframes cm-skeleton-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ========================================================== Kakuro (Cross Sums) — overrides on top of the SudokuPuzzle (sp-*) design system for full visual consistency. ========================================================== */ /* Disable hover/cursor on non-playable cells (clue, block) */ .kakuro-game .sp-cell.is-nonplay { cursor: default; } .kakuro-game .sp-cell.is-nonplay:hover { background: inherit; } /* Solid block cells */ .kakuro-game .sp-cell.kk-block { background: #14172a; border-radius: 0; cursor: default; } [data-bs-theme="light"] .kakuro-game .sp-cell.kk-block { background: #2c3050; } /* Diagonal-split clue cells (rowSum top-right, colSum bottom-left) */ .kakuro-game .sp-cell.kk-clue { position: relative; background: #14172a; border-radius: 0; cursor: default; color: #fff; font-size: clamp(0.55rem, 0.95vw, 0.8rem); font-weight: 700; overflow: hidden; } [data-bs-theme="light"] .kakuro-game .sp-cell.kk-clue { background: #2c3050; } .kk-clue-diag { position: absolute; inset: 0; background: linear-gradient( to bottom right, transparent calc(50% - 0.5px), rgba(255,255,255,0.35) calc(50% - 0.5px), rgba(255,255,255,0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); pointer-events: none; } [data-bs-theme="light"] .kk-clue-diag { background: linear-gradient( to bottom right, transparent calc(50% - 0.5px), rgba(255,255,255,0.5) calc(50% - 0.5px), rgba(255,255,255,0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); } .kk-clue-row { position: absolute; top: 4%; right: 8%; color: #ffd166; line-height: 1; z-index: 1; } .kk-clue-col { position: absolute; bottom: 4%; left: 8%; color: #9bb0ff; line-height: 1; z-index: 1; } [data-bs-theme="light"] .kk-clue-row { color: #ffd166; } [data-bs-theme="light"] .kk-clue-col { color: #9bb0ff; } /* Larger boards (size 11/13) need slightly tighter cell text */ .kakuro-game.sp-size-11 .sp-cell-value, .kakuro-game.sp-size-13 .sp-cell-value { font-size: clamp(0.55rem, 1vw, 0.95rem); } .kakuro-game.sp-size-11 .sp-cell.kk-clue, .kakuro-game.sp-size-13 .sp-cell.kk-clue { font-size: clamp(0.45rem, 0.8vw, 0.7rem); } /* ========================================================================== 2048 game — tile grid + side panel Uses the shared sp-* chrome (top bar, board frame, side panel) and adds game-specific colour ramp + score card + d-pad inside .game-2048. ========================================================================== */ .game-2048 .g2048-board { gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.02); } .game-2048 .g2048-cell { background: rgba(255, 255, 255, 0.04); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); cursor: default; overflow: hidden; position: relative; } .game-2048 .g2048-cell:hover { background: rgba(255, 255, 255, 0.04); } .game-2048 .g2048-tile { /* Inner tile fills 92% of the cell, leaving a 4% "gap" on each side (used to be done with `position: absolute; inset: 4%`, but that made `transform: translate(100%)` move only 92% of a cell width, breaking the per-tile slide-from-origin animation). */ width: 92%; height: 92%; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(0.9rem, 2.4vw, 1.8rem); line-height: 1; color: #2a2a2a; background: #eee4da; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .game-2048 .g2048-tile.is-spawn { animation: g2048-pop 160ms ease-out; } /* Tile slot — a 100%-of-cell wrapper around the visible tile, used as the animation target. translate(100%, 0) on the slot moves it exactly one grid cell to the right. */ .game-2048 .g2048-tile-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* Real 2048-style slide: the server tells us where each tile came from (delta in cells), the inline style sets --from-x / --from-y in % of the slot, and the keyframe animates back to (0, 0). Tiles that didn't move don't get this class — they just stay still. */ .game-2048 .g2048-tile-slot.is-from-origin { animation: g2048-slide-from 180ms ease-out; } @keyframes g2048-slide-from { from { transform: translate(var(--from-x, 0), var(--from-y, 0)); } to { transform: translate(0, 0); } } @keyframes g2048-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } /* Old fake "slide-in from a random direction" animation — replaced by the per-tile origin-driven `g2048-slide-from` above, which actually tracks where each tile came from. */ /* No-op feedback — played briefly when a move is rejected (no tile shifted) so the player can tell their input was received. Subtle nudge in the attempted direction, then back. */ @keyframes g2048-bump-left { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-2.2%); } } @keyframes g2048-bump-right { 0%,100% { transform: translateX(0); } 50% { transform: translateX( 2.2%); } } @keyframes g2048-bump-up { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.2%); } } @keyframes g2048-bump-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY( 2.2%); } } .game-2048 .g2048-board.is-bumping-left { animation: g2048-bump-left 220ms ease-out; } .game-2048 .g2048-board.is-bumping-right { animation: g2048-bump-right 220ms ease-out; } .game-2048 .g2048-board.is-bumping-up { animation: g2048-bump-up 220ms ease-out; } .game-2048 .g2048-board.is-bumping-down { animation: g2048-bump-down 220ms ease-out; } /* Tile colour ramp (classic 2048 palette) */ .game-2048 .g2048-v-2 { background: #eee4da; color: #776e65; } .game-2048 .g2048-v-4 { background: #ede0c8; color: #776e65; } .game-2048 .g2048-v-8 { background: #f2b179; color: #f9f6f2; } .game-2048 .g2048-v-16 { background: #f59563; color: #f9f6f2; } .game-2048 .g2048-v-32 { background: #f67c5f; color: #f9f6f2; } .game-2048 .g2048-v-64 { background: #f65e3b; color: #f9f6f2; } .game-2048 .g2048-v-128 { background: #edcf72; color: #f9f6f2; font-size: clamp(0.8rem, 2.1vw, 1.6rem); } .game-2048 .g2048-v-256 { background: #edcc61; color: #f9f6f2; font-size: clamp(0.8rem, 2.1vw, 1.6rem); } .game-2048 .g2048-v-512 { background: #edc850; color: #f9f6f2; font-size: clamp(0.8rem, 2.1vw, 1.6rem); } .game-2048 .g2048-v-1024 { background: #edc53f; color: #f9f6f2; font-size: clamp(0.65rem, 1.8vw, 1.35rem); box-shadow: 0 0 18px rgba(237, 197, 63, 0.45); } .game-2048 .g2048-v-2048 { background: #edc22e; color: #f9f6f2; font-size: clamp(0.65rem, 1.8vw, 1.35rem); box-shadow: 0 0 24px rgba(237, 194, 46, 0.7); } .game-2048 .g2048-v-4096, .game-2048 .g2048-v-8192, .game-2048 .g2048-v-16384 { background: linear-gradient(135deg, #6b5b95, #b39ddb); color: #fff; font-size: clamp(0.6rem, 1.7vw, 1.2rem); box-shadow: 0 0 28px rgba(179, 157, 219, 0.7); } /* Side panel — score card */ .game-2048 .g2048-score-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); } .game-2048 .g2048-score-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .game-2048 .g2048-score-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; } .game-2048 .g2048-score-value { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Side panel — direction pad */ .game-2048 .g2048-dpad { display: flex; flex-direction: column; align-items: center; gap: 8px; } .game-2048 .g2048-dpad-row { display: flex; gap: 8px; } .game-2048 .g2048-dir { width: 64px; height: 64px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; } /* Larger boards: shrink tile font */ .game-2048 .g2048-board { /* default 4x4 picks up base sizes */ } .game-2048.game-2048 .g2048-board[style*="repeat(5"] .g2048-tile { font-size: clamp(0.75rem, 2vw, 1.5rem); } .game-2048.game-2048 .g2048-board[style*="repeat(6"] .g2048-tile { font-size: clamp(0.65rem, 1.7vw, 1.25rem); } .game-2048.game-2048 .g2048-board[style*="repeat(8"] .g2048-tile { font-size: clamp(0.5rem, 1.3vw, 1rem); } /* ========================================================================== Kids Sudoku — emoji variant (4×4 / 9×9) ========================================================================== Emoji glyphs are colored by the system font; we just need to ensure an emoji-capable font stack is preferred and the size scales appropriately. */ .sp-kids .sp-emoji, .sp-kids .sp-cell-value.sp-emoji, .sp-kids .sp-num-value.sp-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Twemoji Mozilla", sans-serif; /* Native emoji color must win over the digit-tinting `color` rules */ color: initial !important; line-height: 1; } .sp-kids.sp-size-4 .sp-cell-value { font-size: clamp(2.0rem, 5.0vw, 3.2rem); } .sp-kids.sp-size-9 .sp-cell-value { font-size: clamp(1.0rem, 2.4vw, 1.8rem); } .sp-kids .sp-num-value { font-size: 1.7rem; } .sp-kids .sp-note.sp-note-emoji { font-size: 0.7rem; } /* Make the cute animal cells feel a bit more playful */ .sp-kids .sp-cell.is-given { background: rgba(255, 209, 102, 0.06); } [data-bs-theme="light"] .sp-kids .sp-cell.is-given { background: rgba(184, 134, 11, 0.06); } /* Restore peer / same-value / selected highlights at the same specificity level so that .sp-kids .sp-cell.is-given doesn't shadow them when both classes are present (e.g. is-given + is-peer). */ .sp-kids .sp-cell.is-peer { background: rgb(116 203 162 / 18%); } [data-bs-theme="light"] .sp-kids .sp-cell.is-peer { background: rgba(26, 188, 156, 0.18); } .sp-kids .sp-cell.is-same-value { background: rgba(6, 214, 160, 0.22); } [data-bs-theme="light"] .sp-kids .sp-cell.is-same-value { background: rgba(13, 148, 136, 0.18); } .sp-kids .sp-cell.is-given.is-peer { background: linear-gradient(rgb(116 203 162 / 22%), rgb(116 203 162 / 22%)), rgba(255, 209, 102, 0.06); } [data-bs-theme="light"] .sp-kids .sp-cell.is-given.is-peer { background: linear-gradient(rgba(26, 188, 156, 0.22), rgba(26, 188, 156, 0.22)), rgba(184, 134, 11, 0.06); } .sp-kids .sp-cell.is-given.is-same-value { background: linear-gradient(rgba(6, 214, 160, 0.28), rgba(6, 214, 160, 0.28)), rgba(255, 209, 102, 0.06); } [data-bs-theme="light"] .sp-kids .sp-cell.is-given.is-same-value { background: linear-gradient(rgba(13, 148, 136, 0.22), rgba(13, 148, 136, 0.22)), rgba(184, 134, 11, 0.06); } /* Emoji picker rendered INSIDE the clicked cell when 'show picker' is on. Replaces the cell's empty area with a small grid of selectable emojis. */ [x-cloak] { display: none !important; } .sp-kids .sp-cell { position: relative; } .sp-kids-inline { position: absolute; inset: 2px; display: grid; gap: 1px; z-index: 6; background: rgba(20, 25, 35, 0.92); border: 1px solid rgba(255, 209, 102, 0.35); border-radius: 4px; padding: 2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } [data-bs-theme="light"] .sp-kids-inline { background: rgba(255, 255, 255, 0.96); border-color: rgba(184, 134, 11, 0.4); } .sp-kids-inline-opt { display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px; line-height: 1; user-select: none; transition: background 0.1s, transform 0.1s; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Twemoji Mozilla", sans-serif; } .sp-kids.sp-size-4 .sp-kids-inline-opt { font-size: clamp(0.9rem, 2.4vw, 1.6rem); } .sp-kids.sp-size-9 .sp-kids-inline-opt { font-size: clamp(0.55rem, 1.2vw, 0.95rem); } .sp-kids-inline-opt:hover { background: rgba(255, 209, 102, 0.25); transform: scale(1.08); } [data-bs-theme="light"] .sp-kids-inline-opt:hover { background: rgba(184, 134, 11, 0.18); } /* Two side-by-side .sp-toggles containers in the kids variant */ .sp-kids .sp-toggles-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .sp-kids .sp-toggles-row > .sp-toggles { flex: 1 1 0; min-width: 0; } /* Palette picker dropdown (next to the difficulty buttons) */ .sp-palette-picker { position: relative; display: inline-block; } .sp-palette-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 34px; border-radius: 8px; border: 1px solid rgba(255, 209, 102, 0.35); background: rgba(255, 255, 255, 0.05); color: inherit; cursor: pointer; font-size: 0.9rem; transition: background 0.15s, border-color 0.15s; } .sp-palette-toggle:hover:not(:disabled) { background: rgba(255, 209, 102, 0.12); border-color: rgba(255, 209, 102, 0.6); } .sp-palette-toggle:disabled { opacity: 0.5; cursor: not-allowed; } [data-bs-theme="light"] .sp-palette-toggle { background: rgba(184, 134, 11, 0.05); border-color: rgba(184, 134, 11, 0.4); } [data-bs-theme="light"] .sp-palette-toggle:hover:not(:disabled) { background: rgba(184, 134, 11, 0.1); } .sp-palette-preview { display: inline-flex; flex-wrap: wrap; gap: 2px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Twemoji Mozilla", sans-serif; line-height: 1; font-size: 1.1rem; } .sp-palette-name { font-weight: 500; white-space: nowrap; } .sp-palette-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 150px; max-width: 360px; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: rgba(20, 25, 35, 0.97); border: 1px solid rgba(255, 209, 102, 0.3); border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-bs-theme="light"] .sp-palette-menu { background: rgba(255, 255, 255, 0.98); border-color: rgba(184, 134, 11, 0.4); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); } .sp-palette-menu li { margin: 0; } .sp-palette-opt { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; text-align: left; font-size: 0.9rem; } .sp-palette-opt:hover { background: rgba(255, 209, 102, 0.12); border-color: rgba(255, 209, 102, 0.35); } .sp-palette-opt.is-active { background: rgba(255, 209, 102, 0.18); border-color: rgba(255, 209, 102, 0.6); } [data-bs-theme="light"] .sp-palette-opt:hover { background: rgba(184, 134, 11, 0.1); border-color: rgba(184, 134, 11, 0.35); } [data-bs-theme="light"] .sp-palette-opt.is-active { background: rgba(184, 134, 11, 0.18); border-color: rgba(184, 134, 11, 0.55); } /* ============================================================ Kids Math game — endless arithmetic. ============================================================ */ .sp-kids-math .sp-topbar { flex-wrap: wrap; gap: 10px; } .sp-kids-math .sp-topbar-left { flex-wrap: wrap; gap: 10px; align-items: center; } /* Scoreboard */ .sp-math-score { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 18px; } .sp-math-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.95rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); transition: transform 0.15s ease, background 0.2s ease; } .sp-math-chip strong { font-weight: 700; font-size: 1.05rem; } .sp-math-chip-label { opacity: 0.75; font-size: 0.85rem; } .sp-math-chip.is-correct { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.35); } .sp-math-chip.is-wrong { color: #fca5a5; border-color: rgba(252, 165, 165, 0.35); } .sp-math-chip.is-streak { color: #fcd34d; border-color: rgba(252, 211, 77, 0.35); } .sp-math-chip.is-timer { color: #93c5fd; border-color: rgba(147, 197, 253, 0.35); } .sp-math-chip.is-timer.is-low { color: #fca5a5; border-color: rgba(252, 165, 165, 0.55); animation: spMathPulse 0.9s ease-in-out infinite; } [data-bs-theme="light"] .sp-math-chip { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.75); } [data-bs-theme="light"] .sp-math-chip.is-correct { color: #047857; border-color: rgba(4, 120, 87, 0.35); } [data-bs-theme="light"] .sp-math-chip.is-wrong { color: #b91c1c; border-color: rgba(185, 28, 28, 0.35); } [data-bs-theme="light"] .sp-math-chip.is-streak { color: #b45309; border-color: rgba(180, 83, 9, 0.35); } [data-bs-theme="light"] .sp-math-chip.is-timer { color: #1d4ed8; border-color: rgba(29, 78, 216, 0.35); } @keyframes spMathPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Stage */ .sp-math-stage { padding: 18px 14px 20px; gap: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; } /* Equation */ .sp-math-eq { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(6px, 1.4vw, 18px); font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 700; line-height: 1.05; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .sp-math-eq.is-ok { background: rgba(110, 231, 183, 0.12); border-color: rgba(110, 231, 183, 0.45); animation: spMathPop 0.45s ease; } .sp-math-eq.is-ko { background: rgba(252, 165, 165, 0.12); border-color: rgba(252, 165, 165, 0.45); animation: spMathShake 0.45s ease; } [data-bs-theme="light"] .sp-math-eq { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.08); } @keyframes spMathPop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes spMathShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .sp-math-token { display: inline-flex; min-width: 1ch; } .sp-math-token.is-op { color: #fcd34d; font-weight: 700; } [data-bs-theme="light"] .sp-math-token.is-op { color: #b45309; } .sp-math-slot { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2ch; padding: 4px 14px; border-radius: 12px; background: rgba(147, 197, 253, 0.12); border: 2px dashed rgba(147, 197, 253, 0.55); color: #93c5fd; } .sp-math-slot.is-active { border-style: solid; box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.18); } [data-bs-theme="light"] .sp-math-slot { background: rgba(29, 78, 216, 0.08); border-color: rgba(29, 78, 216, 0.45); color: #1d4ed8; } [data-bs-theme="light"] .sp-math-slot.is-active { box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12); } .sp-math-slot-caret { position: absolute; right: 8px; top: 18%; bottom: 18%; width: 2px; background: currentColor; opacity: 0; animation: spMathCaret 1s steps(2) infinite; } .sp-math-slot.is-active .sp-math-slot-caret { opacity: 0.7; } @keyframes spMathCaret { 50% { opacity: 0; } } /* Action row */ .sp-math-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .sp-math-actions .sp-num { min-width: 110px; padding: 10px 16px; font-size: 1rem; } .sp-math-skip { color: #fca5a5; } .sp-math-submit { color: #6ee7b7; font-weight: 700; } [data-bs-theme="light"] .sp-math-skip { color: #b91c1c; } [data-bs-theme="light"] .sp-math-submit { color: #047857; } /* Keypad */ .sp-math-keypad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; margin-top: 6px; width: 100%; max-width: 100%; } .sp-math-keypad .sp-num { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 700; width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; } .sp-math-key-back { color: #fca5a5; } .sp-math-key-enter { color: #6ee7b7; } [data-bs-theme="light"] .sp-math-key-back { color: #b91c1c; } [data-bs-theme="light"] .sp-math-key-enter { color: #047857; } @media (max-width: 480px) { .sp-math-keypad { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } .sp-math-keypad .sp-num { font-size: clamp(0.9rem, 2.5vw, 1.2rem); } .sp-math-actions .sp-num { min-width: 90px; padding: 8px 12px; } .sp-math-eq { padding: 10px 12px; } } /* ======================================== Kids 2048 — emoji-themed variant ======================================== */ .kids-2048 .k2048-board { gap: 6px; padding: 6px; } /* Bump animations for no-op feedback */ .kids-2048 .k2048-board.is-bumping-left { animation: g2048-bump-left 220ms ease-out; } .kids-2048 .k2048-board.is-bumping-right { animation: g2048-bump-right 220ms ease-out; } .kids-2048 .k2048-board.is-bumping-up { animation: g2048-bump-up 220ms ease-out; } .kids-2048 .k2048-board.is-bumping-down { animation: g2048-bump-down 220ms ease-out; } .kids-2048 .k2048-cell { background: rgba(255, 255, 255, 0.06); border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.08); } [data-bs-theme="light"] .kids-2048 .k2048-cell { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } .kids-2048 .k2048-tile-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .kids-2048 .k2048-tile { width: 90%; height: 90%; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); transition: all 0.15s ease; } [data-bs-theme="light"] .kids-2048 .k2048-tile { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.15); } .kids-2048 .k2048-tile.is-spawn { animation: k2048-pop 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes k2048-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .kids-2048 .k2048-emoji { font-size: clamp(1.8rem, 6vw, 3.5rem); line-height: 1; user-select: none; pointer-events: none; } /* Emoji background colors by progression stage */ .kids-2048 [data-value="2"] .k2048-tile, .kids-2048 [data-value="4"] .k2048-tile { background: rgba(238, 228, 218, 0.9); border-color: rgba(238, 228, 218, 0.5); } .kids-2048 [data-value="8"] .k2048-tile, .kids-2048 [data-value="16"] .k2048-tile { background: rgba(242, 177, 121, 0.9); border-color: rgba(242, 177, 121, 0.5); } .kids-2048 [data-value="32"] .k2048-tile, .kids-2048 [data-value="64"] .k2048-tile { background: rgba(246, 124, 95, 0.9); border-color: rgba(246, 124, 95, 0.5); color: #f9f6f2; } .kids-2048 [data-value="128"] .k2048-tile, .kids-2048 [data-value="256"] .k2048-tile { background: rgba(237, 207, 114, 0.9); border-color: rgba(237, 207, 114, 0.5); box-shadow: 0 0 10px rgba(237, 207, 114, 0.3); } .kids-2048 [data-value="512"] .k2048-tile { background: rgba(237, 200, 80, 0.95); border-color: rgba(237, 200, 80, 0.6); box-shadow: 0 0 15px rgba(237, 200, 80, 0.4); } .kids-2048 [data-value="1024"] .k2048-tile { background: linear-gradient(135deg, #edc22e 0%, #f59563 100%); border-color: rgba(245, 149, 99, 0.7); box-shadow: 0 0 20px rgba(245, 149, 99, 0.6); animation: k2048-glow 2s ease-in-out infinite; } @keyframes k2048-glow { 0%, 100% { box-shadow: 0 0 20px rgba(245, 149, 99, 0.6); } 50% { box-shadow: 0 0 30px rgba(245, 149, 99, 0.9); } } /* Responsive */ @media (max-width: 768px) { .kids-2048 .k2048-emoji { font-size: clamp(1.5rem, 5vw, 2.5rem); } } @media (max-width: 480px) { .kids-2048 .k2048-emoji { font-size: clamp(1.2rem, 4.5vw, 2rem); } .kids-2048 .k2048-board { gap: 4px; padding: 4px; } .kids-2048 .k2048-cell { border-radius: 8px; } .kids-2048 .k2048-tile { border-radius: 6px; } } /* Kids 2048 d-pad styling */ .kids-2048 .k2048-dir { font-size: 1.5rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); border: 2px solid rgba(255, 255, 255, 0.15); transition: all 0.15s ease; } [data-bs-theme="light"] .kids-2048 .k2048-dir { background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%); border-color: rgba(0, 0, 0, 0.15); } .kids-2048 .k2048-dir:hover:not(:disabled) { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%); border-color: rgba(255, 209, 102, 0.4); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(255, 209, 102, 0.2); } [data-bs-theme="light"] .kids-2048 .k2048-dir:hover:not(:disabled) { background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.04) 100%); border-color: rgba(184, 134, 11, 0.4); box-shadow: 0 4px 8px rgba(184, 134, 11, 0.15); } .kids-2048 .k2048-dir:active:not(:disabled) { transform: translateY(0); } .kids-2048 .k2048-dir i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } [data-bs-theme="light"] .kids-2048 .k2048-dir i { filter: none; } /* Evolution chain display */ .kids-2048 .k2048-evolution { margin-top: 16px; padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, 0.1); } [data-bs-theme="light"] .kids-2048 .k2048-evolution { border-top-color: rgba(0, 0, 0, 0.1); } .kids-2048 .k2048-evolution-title { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; } .kids-2048 .k2048-evolution-chain { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .kids-2048 .k2048-evo-step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.1); min-width: 60px; position: relative; transition: all 0.2s ease; } [data-bs-theme="light"] .kids-2048 .k2048-evo-step { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); } .kids-2048 .k2048-evo-step.is-current { background: linear-gradient(135deg, rgba(255, 209, 102, 0.2) 0%, rgba(255, 167, 38, 0.15) 100%); border-color: rgba(255, 209, 102, 0.6); box-shadow: 0 0 12px rgba(255, 209, 102, 0.3); transform: scale(1.05); } [data-bs-theme="light"] .kids-2048 .k2048-evo-step.is-current { background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 152, 0, 0.15) 100%); border-color: rgba(255, 152, 0, 0.6); box-shadow: 0 0 12px rgba(255, 152, 0, 0.3); } .kids-2048 .k2048-evo-step.is-next { background: linear-gradient(135deg, rgba(129, 199, 132, 0.2) 0%, rgba(102, 187, 106, 0.15) 100%); border-color: rgba(129, 199, 132, 0.5); box-shadow: 0 0 12px rgb(0 255 31 / 30%); } [data-bs-theme="light"] .kids-2048 .k2048-evo-step.is-next { background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(56, 142, 60, 0.15) 100%); border-color: rgba(76, 175, 80, 0.5); } .kids-2048 .k2048-evo-step.is-locked { opacity: 0.4; filter: grayscale(0.5); } .kids-2048 .k2048-evo-emoji { font-size: 1.8rem; line-height: 1; user-select: none; } .kids-2048 .k2048-evo-value { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); font-family: var(--font-mono); } .kids-2048 .k2048-evo-badge { position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%); color: white; font-size: 0.6rem; font-weight: 700; padding: 3px 6px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 2px 6px rgba(102, 187, 106, 0.4); } .kids-2048 .k2048-evo-arrow { color: var(--text-muted); font-size: 1.2rem; opacity: 0.6; } @keyframes k2048-pulse-next { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(129, 199, 132, 0.2); } 50% { transform: scale(1.08); box-shadow: 0 0 16px rgba(129, 199, 132, 0.4); } } /* Responsive evolution chain */ @media (max-width: 768px) { .kids-2048 .k2048-evolution-chain { gap: 4px; } .kids-2048 .k2048-evo-step { min-width: 50px; padding: 6px; } .kids-2048 .k2048-evo-emoji { font-size: 1.5rem; } .kids-2048 .k2048-evo-value { font-size: 0.7rem; } } /* ============================================ All Games Page ============================================ */ html { scroll-behavior: smooth; } .all-games-page { min-height: 100vh; background: #0a0a0f; } /* Anchor offset for fixed navbar */ .all-games-section[id] { scroll-margin-top: 100px; } /* Hero Section */ .all-games-hero { position: relative; padding: 8rem 0 6rem; overflow: hidden; background: linear-gradient(180deg, #0d0d14 0%, #0a0a0f 100%); } .hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 209, 102, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 209, 102, 0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); } .hero-bg-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 107, 107, 0.15), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 209, 102, 0.1), transparent), radial-gradient(ellipse 60% 40% at 20% 50%, rgba(129, 199, 132, 0.08), transparent); } .hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .particle { position: absolute; width: 4px; height: 4px; background: rgba(255, 209, 102, 0.4); border-radius: 50%; animation: float-particle 15s infinite; } .particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; } .particle:nth-child(2) { left: 30%; top: 60%; animation-delay: 3s; } .particle:nth-child(3) { left: 50%; top: 30%; animation-delay: 6s; } .particle:nth-child(4) { left: 70%; top: 70%; animation-delay: 9s; } .particle:nth-child(5) { left: 90%; top: 40%; animation-delay: 12s; } @keyframes float-particle { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; } 50% { transform: translateY(-100px) scale(1.5); opacity: 0.8; } } .hero-content { position: relative; z-index: 1; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: rgba(255, 209, 102, 0.1); border: 1px solid rgba(255, 209, 102, 0.2); border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: #ffd166; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.1em; } .all-games-title { font-size: 4.5rem; font-weight: 900; margin-bottom: 1.5rem; background: linear-gradient(135deg, #ff6b6b 0%, #ffd166 50%, #81c784 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; letter-spacing: -0.02em; } .all-games-subtitle { font-size: 1.35rem; color: rgba(255, 255, 255, 0.6); max-width: 800px; margin: 0 auto 3rem; line-height: 1.6; } .hero-stats { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 3rem; padding: 2rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-stat { text-align: center; flex: 1; } .hero-stat-icon { font-size: 2rem; margin-bottom: 0.5rem; } .hero-stat-number { font-size: 3rem; font-weight: 900; background: linear-gradient(135deg, #ffd166 0%, #ff6b6b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.25rem; } .hero-stat-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; } .hero-stat-divider { width: 1px; height: 60px; background: linear-gradient(180deg, transparent, rgba(255, 209, 102, 0.3), transparent); } .hero-cta { margin-top: 2rem; } .btn-hero-primary { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2.5rem; background: linear-gradient(135deg, #ffd166, #ff6b6b); color: #0a0a0f; font-weight: 700; font-size: 1.1rem; text-decoration: none; border-radius: 12px; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(255, 209, 102, 0.3); } .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 209, 102, 0.4); text-decoration: none; color: #0a0a0f; } .btn-hero-primary i { font-size: 1.3rem; } .all-games-section { padding: 6rem 0; position: relative; background: linear-gradient(141deg, #1f0f23 0%, #1a1a2e 50%, #0a1819 100%); } .all-games-section-alt { background: #08080d; position: relative; overflow: hidden; } .all-games-section-alt::before, .all-games-section-alt::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 209, 102, 0.08) 0%, transparent 70%); animation: float-particle-alt 20s infinite ease-in-out; pointer-events: none; } .all-games-section-alt::before { top: -150px; left: -150px; animation-delay: 0s; } .all-games-section-alt::after { bottom: -150px; right: -150px; animation-delay: 10s; background: radial-gradient(circle, rgba(255, 107, 107, 0.08) 0%, transparent 70%); } @keyframes float-particle-alt { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 25% { transform: translate(50px, -50px) scale(1.1); opacity: 0.8; } 50% { transform: translate(100px, 0) scale(1); opacity: 0.6; } 75% { transform: translate(50px, 50px) scale(0.9); opacity: 0.7; } } .all-games-section-kids { background: linear-gradient(135deg, #0a0f14 0%, #0f0a14 100%); } /* Section background patterns */ .section-bg-pattern { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .section-bg-grid { background-image: linear-gradient(rgba(255, 209, 102, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 209, 102, 0.02) 1px, transparent 1px); background-size: 60px 60px; } .section-bg-dots { background-image: radial-gradient(circle, rgba(100, 181, 246, 0.08) 1px, transparent 1px); background-size: 40px 40px; } .section-bg-radial { background: radial-gradient(ellipse at 20% 50%, rgba(100, 181, 246, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(255, 107, 107, 0.05) 0%, transparent 50%); } .section-bg-kids { background: radial-gradient(ellipse at 30% 30%, rgba(82, 237, 249, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(255, 159, 243, 0.06) 0%, transparent 50%); } .section-header { display: flex; align-items: flex-start; gap: 2rem; margin-bottom: 4rem; padding-bottom: 2rem; border-bottom: 2px solid rgba(255, 209, 102, 0.15); position: relative; } .section-header::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 200px; height: 2px; background: linear-gradient(90deg, #ffd166, transparent); } .section-badge { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 209, 102, 0.1)); border-radius: 20px; font-size: 2.2rem; color: #ffd166; flex-shrink: 0; border: 1px solid rgba(255, 209, 102, 0.2); box-shadow: 0 4px 20px rgba(255, 209, 102, 0.1); position: relative; overflow: hidden; } .section-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1)); } .section-badge-kids { background: linear-gradient(135deg, rgba(82, 237, 249, 0.1), rgba(255, 159, 243, 0.1)); color: #52edf9; border-color: rgba(82, 237, 249, 0.2); box-shadow: 0 4px 20px rgba(82, 237, 249, 0.1); } .section-text h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.75rem; color: #fff; letter-spacing: -0.01em; } .section-text p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.7; max-width: 600px; } .all-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.5rem; } /* All Games Page Cards */ .all-games-grid .game-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 24px; padding: 2.5rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; backdrop-filter: blur(10px); } .all-games-grid .game-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff6b6b, #ffd166, #81c784); opacity: 0; transition: opacity 0.4s ease; } .all-games-grid .game-card-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 107, 107, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 209, 102, 0.08) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .all-games-grid .game-card:hover { transform: translateY(-12px); border-color: rgba(255, 209, 102, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 209, 102, 0.1); background: rgba(255, 255, 255, 0.03); } .all-games-grid .game-card:hover::before { opacity: 1; } .all-games-grid .game-card:hover .game-card-glow { opacity: 1; } .all-games-grid .game-card-kids { background: linear-gradient(135deg, rgba(82, 237, 249, 0.03), rgba(255, 159, 243, 0.03)); border-color: rgba(82, 237, 249, 0.15); } .all-games-grid .game-card-kids::before { background: linear-gradient(90deg, #52edf9, #ff9ff3, #81c784); } .all-games-grid .game-card-glow-kids { background: radial-gradient(circle at 20% 20%, rgba(82, 237, 249, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 159, 243, 0.1) 0%, transparent 50%); } .all-games-grid .game-card-kids:hover { border-color: rgba(82, 237, 249, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(82, 237, 249, 0.15); } .all-games-grid .game-card-content { position: relative; z-index: 1; } .all-games-grid .game-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 209, 102, 0.15)); border-radius: 16px; font-size: 2rem; color: #ffd166; margin-bottom: 1.5rem; border: 1px solid rgba(255, 209, 102, 0.2); box-shadow: 0 4px 15px rgba(255, 209, 102, 0.1); transition: all 0.3s ease; } .all-games-grid .game-card:hover .game-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 8px 25px rgba(255, 209, 102, 0.2); } .all-games-grid .game-icon-kids { background: linear-gradient(135deg, rgba(82, 237, 249, 0.15), rgba(255, 159, 243, 0.15)); color: #52edf9; border-color: rgba(82, 237, 249, 0.2); box-shadow: 0 4px 15px rgba(82, 237, 249, 0.1); } .all-games-grid .game-card-kids:hover .game-icon-kids { box-shadow: 0 8px 25px rgba(82, 237, 249, 0.2); } .all-games-grid .game-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; color: #fff; letter-spacing: -0.01em; } .all-games-grid .game-card p { font-size: 1rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 1.75rem; line-height: 1.7; min-height: 50px; } .all-games-grid .game-link { display: inline-flex; align-items: center; gap: 0.75rem; color: #ffd166; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.3s ease; padding: 0.85rem 1.75rem; background: transparent; border: 2px solid rgba(255, 209, 102, 0.4); border-radius: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .all-games-grid .game-link-kids { border-color: rgba(82, 237, 249, 0.4); color: #52edf9; } .all-games-grid .game-link:hover { gap: 1rem; text-decoration: none; background: rgba(255, 209, 102, 0.1); border-color: #ffd166; box-shadow: 0 0 30px rgba(255, 209, 102, 0.2); transform: translateX(6px); } .all-games-grid .game-link-kids:hover { background: rgba(82, 237, 249, 0.1); border-color: #52edf9; box-shadow: 0 0 30px rgba(82, 237, 249, 0.2); } .all-games-grid .game-link i { transition: transform 0.3s ease; } .all-games-grid .game-link:hover i { transform: translateX(6px); } /* Background effects */ .section-grid-lines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255, 209, 102, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 209, 102, 0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .section-grid-lines::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 209, 102, 0.08) 0%, transparent 70%); pointer-events: none; } .section-dots-pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle, rgba(100, 181, 246, 0.12) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .section-dots-pattern::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 15% 20%, rgba(100, 181, 246, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(255, 107, 107, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(129, 199, 132, 0.05) 0%, transparent 60%); pointer-events: none; } /* Light theme */ [data-bs-theme="light"] .all-games-page { background: #f5f5f5; } [data-bs-theme="light"] .all-games-hero { background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); } [data-bs-theme="light"] .hero-bg-grid { background-image: linear-gradient(rgba(184, 134, 11, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 134, 11, 0.05) 1px, transparent 1px); } [data-bs-theme="light"] .hero-badge { background: rgba(184, 134, 11, 0.1); border-color: rgba(184, 134, 11, 0.2); color: #b8860b; } [data-bs-theme="light"] .all-games-subtitle { color: rgba(0, 0, 0, 0.6); } [data-bs-theme="light"] .hero-stats { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.05); } [data-bs-theme="light"] .hero-stat-label { color: rgba(0, 0, 0, 0.5); } [data-bs-theme="light"] .all-games-section { background: #f5f5f5; } [data-bs-theme="light"] .all-games-section-alt { background: #ffffff; } [data-bs-theme="light"] .all-games-section-kids { background: linear-gradient(135deg, #f0f9ff 0%, #fff0f9 100%); } [data-bs-theme="light"] .section-header { border-bottom-color: rgba(184, 134, 11, 0.15); } [data-bs-theme="light"] .section-header::after { background: linear-gradient(90deg, #b8860b, transparent); } [data-bs-theme="light"] .section-text h2 { color: #1a1a1a; } [data-bs-theme="light"] .section-text p { color: rgba(0, 0, 0, 0.6); } [data-bs-theme="light"] .all-games-grid .game-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } [data-bs-theme="light"] .all-games-grid .game-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 40px rgba(184, 134, 11, 0.1); } [data-bs-theme="light"] .all-games-grid .game-card h3 { color: #1a1a1a; } [data-bs-theme="light"] .all-games-grid .game-card p { color: rgba(0, 0, 0, 0.6); } [data-bs-theme="light"] .all-games-grid .game-card-kids { background: linear-gradient(135deg, #e0f7ff, #ffe0f7); border-color: rgba(82, 237, 249, 0.2); } /* Responsive */ @media (max-width: 992px) { .all-games-title { font-size: 3.5rem; } .hero-stats { gap: 1.5rem; padding: 1.5rem; } .hero-stat-number { font-size: 2.5rem; } .section-header { gap: 1.5rem; } .section-badge { width: 70px; height: 70px; font-size: 2rem; } .section-text h2 { font-size: 2rem; } .all-games-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } } @media (max-width: 768px) { .all-games-hero { padding: 6rem 0 4rem; } .all-games-title { font-size: 2.5rem; } .all-games-subtitle { font-size: 1.1rem; } .hero-stats { flex-direction: column; gap: 1.5rem; } .hero-stat-divider { width: 60px; height: 1px; } .hero-cta { margin-top: 1.5rem; } .btn-hero-primary { padding: 0.85rem 2rem; font-size: 1rem; } .all-games-section { padding: 4rem 0; } .section-header { flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; } .section-badge { width: 60px; height: 60px; font-size: 1.8rem; } .section-text h2 { font-size: 1.75rem; } .section-text p { font-size: 1rem; } .all-games-grid { grid-template-columns: 1fr; gap: 1.5rem; } .all-games-grid .game-card { padding: 2rem; } } @media (max-width: 480px) { .all-games-hero { padding: 5rem 0 3rem; } .all-games-title { font-size: 2rem; } .hero-badge { font-size: 0.8rem; padding: 0.4rem 1rem; } .all-games-grid .game-card { padding: 1.5rem; } .all-games-grid .game-icon { width: 60px; height: 60px; font-size: 1.6rem; } .all-games-grid .game-card h3 { font-size: 1.3rem; } }