/* ============================================ Islamic Cryptogram - Main Stylesheet ============================================ */ /* --- Design Tokens --- */ :root { /* ===== Thakey design tokens (brand source of truth) ===== */ --thk-ink: #0C2B2A; /* app background (deep midnight teal) */ --thk-ink-2: #103835; /* raised panels / cards */ --thk-ink-3: #16433F; /* hover / active surface */ --thk-line: #1F524D; /* hairline borders */ --thk-gold: #C8A24C; /* primary accent, interactive, "the key" */ --thk-gold-soft: #E6C878; /* highlights, focus glow */ --thk-gold-deep: #A6822F; /* pressed gold */ --thk-cream: #F2ECDD; /* primary text (NOT pure white) */ --thk-cream-dim: #C9C2B2; /* secondary text */ --thk-muted: #9FC2BA; /* captions, taglines */ --thk-sage: #5E8B82; /* secondary UI */ --thk-correct: #5FA86B; /* solved / correct letter */ --thk-wrong: #C2603F; /* wrong guess — soft terracotta */ --thk-hint: #D8B24A; /* hint glow */ /* ===== Semantic tokens (mapped onto Thakey, dark-first) ===== */ --color-primary: var(--thk-gold); /* interactive / "the key" */ --color-primary-light: var(--thk-gold-soft); --color-primary-dark: var(--thk-gold-deep); --color-primary-deep: #2C6E66; /* teal pair for hero gradients */ --color-primary-50: var(--thk-ink-3); /* selected/active surface */ --color-secondary: var(--thk-gold); /* Islamic gold ornaments */ --color-secondary-light: var(--thk-gold-soft); --color-secondary-dark: var(--thk-gold-deep); --color-accent: var(--thk-sage); --color-accent-light: #7FB0A6; --color-bg: var(--thk-ink); --color-bg-alt: #0E322F; --color-surface: var(--thk-ink-2); --color-surface-hover: var(--thk-ink-3); --color-line: var(--thk-line); --color-text: var(--thk-cream); --color-text-secondary: var(--thk-cream-dim); --color-text-muted: var(--thk-muted); --color-success: var(--thk-correct); --color-error: var(--thk-wrong); --color-warning: var(--thk-hint); /* Team colors */ --color-team-a: var(--thk-gold); --color-team-b: #4C84C2; /* Typography */ --font-primary: 'IBM Plex Sans Arabic', 'Cairo', 'Noto Naskh Arabic', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Cairo', 'Sora', 'Amiri', Georgia, serif; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 50%; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; } /* ===== Light (day) theme — same brand, warm off-whites, gold+teal accents. Activated by (set by the early inline script in the layout head from the user's local time, or their saved toggle choice). Only the --thk-* source tokens + a few literals are overridden; everything else is derived from them, so the whole UI re-themes with no per-component rules. ===== */ :root[data-theme="light"] { --thk-ink: #F4EFE6; /* app background (warm off-white) */ --thk-ink-2: #FCFAF4; /* raised panels / cards (never pure #fff) */ --thk-ink-3: #EFE7D6; /* hover / active surface */ --thk-line: #E2D8C4; /* hairline borders */ --thk-gold: #B8893A; /* accent, deep enough for AA on cream */ --thk-gold-soft: #D8B45C; --thk-gold-deep: #8F6B22; --thk-cream: #1A2E2C; /* now the PRIMARY (dark) text */ --thk-cream-dim: #46544F; /* secondary text */ --thk-muted: #5E726C; /* captions */ --thk-sage: #4C7A70; --thk-correct: #3E8E54; --thk-wrong: #B5482A; --thk-hint: #B07D27; /* literal semantic tokens that don't reference --thk-* */ --color-primary-deep: #2C6E66; --color-primary-50: #EFE7D6; --color-bg-alt: #EBE3D4; --color-accent-light: #4C7A70; --color-team-b: #2E63C2; --shadow-sm: 0 1px 3px rgba(60,45,20,0.08); --shadow-md: 0 4px 12px rgba(60,45,20,0.10); --shadow-lg: 0 8px 24px rgba(60,45,20,0.12); } /* Hero uses literal colours for its immersive gradient → theme it explicitly. */ :root[data-theme="light"] .hero { background: radial-gradient(130% 90% at 50% -15%, rgba(184,137,58,0.18), transparent 60%), linear-gradient(160deg, #F7F1E6 0%, #F1E8D7 55%, #FBF7EF 100%); color: var(--thk-cream); border-bottom-color: var(--thk-line); } :root[data-theme="light"] .hero::before { opacity: 0.05; } :root[data-theme="light"] .hero-daily-link { color: var(--thk-cream-dim); } :root[data-theme="light"] .hero-daily-link:hover { color: var(--thk-cream); } /* Smooth (but instant-enough) cross-fade when toggling. */ body, .site-header, .hero, .cipher-display, .key, .category-tile { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: reduce) { body, .site-header, .hero, .cipher-display, .key, .category-tile { transition: none; } } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-primary); color: var(--color-text); background: var(--color-bg); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } /* --- Container --- */ .container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--space-lg); } /* --- Header --- */ .site-header { background: var(--color-surface); border-bottom: 2px solid var(--color-primary); padding: var(--space-md) 0; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); } .logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex: 0 0 auto; padding-inline-start: 4px; color: var(--color-primary-dark); flex-shrink: 0; } .logo-icon { font-size: 1.5rem; } .logo-text { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } /* Nav layout */ .main-nav { display: flex; align-items: center; gap: var(--space-lg); } .nav-links { display: flex; align-items: center; gap: var(--space-lg); } .nav-auth { display: flex; align-items: center; gap: var(--space-md); } .nav-link { text-decoration: none; color: var(--color-text-secondary); font-weight: 500; font-size: 0.9rem; transition: color var(--transition-fast); white-space: nowrap; } .nav-link:hover { color: var(--color-primary); } .nav-link-admin { color: var(--color-secondary); font-weight: 600; } .nav-link-admin:hover { color: #bf9660; } .nav-btn-register { white-space: nowrap; } /* Nav separator */ .nav-auth::before { content: ''; display: block; width: 1px; height: 24px; background: rgba(0,0,0,0.1); margin-inline-end: var(--space-xs); } /* Mobile hamburger */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .nav-toggle:hover { background: var(--color-bg-alt); } .nav-toggle-bar { display: block; width: 100%; height: 2px; background: var(--color-text); border-radius: 1px; transition: all var(--transition-fast); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* User dropdown menu */ .nav-user-menu { position: relative; } .nav-user-btn { display: flex; align-items: center; gap: var(--space-sm); padding: 0.3rem 0.6rem; background: var(--color-bg-alt); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-full); cursor: pointer; font-family: var(--font-primary); transition: all var(--transition-fast); } .nav-user-btn:hover { background: var(--color-surface-hover); border-color: var(--color-primary); } .nav-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--color-primary); color: white; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; } .nav-user-name { font-size: 0.85rem; font-weight: 500; color: var(--color-text); } .nav-dropdown { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 180px; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,0.08); padding: var(--space-xs) 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--transition-fast); z-index: 200; } .nav-dropdown.dropdown-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-item { display: block; padding: 0.5rem var(--space-lg); font-size: 0.85rem; color: var(--color-text-secondary); text-decoration: none; transition: all var(--transition-fast); } .nav-dropdown-item:hover { background: var(--color-bg-alt); color: var(--color-primary); } .nav-dropdown-divider { border: none; border-top: 1px solid rgba(0,0,0,0.06); margin: var(--space-xs) 0; } .nav-dropdown-logout { color: var(--color-error); } .nav-dropdown-logout:hover { background: #fdf0ef; color: var(--color-error); } /* --- Main Content --- */ .main-content { flex: 1; } /* --- Footer --- */ .site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.9); padding: var(--space-xl) 0; text-align: center; margin-top: auto; } .footer-text { font-size: 0.9rem; margin-bottom: var(--space-xs); } .footer-copyright { font-size: 0.78rem; opacity: 0.75; margin-top: 4px; } .footer-verse { font-family: var(--font-display); font-size: 0.85rem; opacity: 0.7; font-style: italic; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.6rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius-md); font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); line-height: 1.4; } .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn-lg { padding: 0.8rem 2rem; font-size: 1rem; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; } .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-secondary { background: var(--color-secondary); color: var(--color-text); border-color: var(--color-secondary); } .btn-secondary:hover { background: var(--color-secondary-light); } .btn-accent { background: var(--color-accent); color: white; border-color: var(--color-accent); } .btn-accent:hover { background: var(--color-accent-light); } .btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: white; } /* --- Badges --- */ .badge { display: inline-block; padding: 0.2rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .badge-easy { background: #d5f5e3; color: #059669; } .badge-medium { background: #fef3cd; color: #856404; } .badge-hard { background: #f8d7da; color: #842029; } /* --- Hero Section --- */ .hero { position: relative; overflow: hidden; background: radial-gradient(130% 90% at 50% -15%, rgba(200,162,76,0.18), transparent 60%), linear-gradient(160deg, #0E322F 0%, #0B2A28 55%, #103835 100%); color: var(--thk-cream, #F2ECDD); padding: var(--space-3xl) 0; text-align: center; border-bottom: 1px solid var(--thk-line, #1F524D); } /* Ambient eight-point star (girih) tessellation watermark — زخرفة إسلامية */ .hero::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C8A24C' stroke-width='1'%3E%3Crect x='26' y='26' width='32' height='32'/%3E%3Cpolygon points='42,14 70,42 42,70 14,42'/%3E%3C/g%3E%3C/svg%3E"); background-size: 84px 84px; opacity: 0.06; pointer-events: none; z-index: 0; } .hero > .container { position: relative; z-index: 1; } /* Featured brand mark in the banner */ .hero-mark { display: inline-block; line-height: 0; margin-bottom: var(--space-md); filter: drop-shadow(0 6px 20px rgba(200,162,76,.30)); } .hero-mark svg { display: block; } .hero .thk-ornament { margin: 0 auto var(--space-lg); max-width: 320px; } .hero-bismillah { font-size: 3.5rem; line-height: 1.2; margin-bottom: var(--space-md); opacity: 0.85; font-family: var(--font-display); } .hero-title { font-family: var(--font-display); font-size: 3rem; font-weight: 700; margin-bottom: var(--space-md); text-shadow: 0 2px 8px rgba(0,0,0,0.2); } .hero-subtitle { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto var(--space-xl); line-height: 1.7; } .hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } .hero-daily { margin-top: var(--space-lg); } .hero-daily-link { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.95rem; transition: color var(--transition-fast); } .hero-daily-link:hover { color: white; text-decoration: underline; } .hero-daily-link strong { color: var(--color-secondary-light); } /* --- Features --- */ .features { padding: var(--space-3xl) 0; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-xl); } .feature-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.05); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .feature-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; } .feature-card-link:hover h3 { color: var(--color-primary); } .feature-icon { font-size: 2.5rem; margin-bottom: var(--space-md); } .feature-card h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-primary-dark); margin-bottom: var(--space-sm); } .feature-card p { color: var(--color-text-secondary); font-size: 0.9rem; } /* --- How to Play --- */ .how-to-play { background: var(--color-bg-alt); padding: var(--space-3xl) 0; } .how-to-play h2 { font-family: var(--font-display); text-align: center; font-size: 2rem; color: var(--color-primary-dark); margin-bottom: var(--space-xl); } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-xl); } .step { text-align: center; } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--color-primary); color: white; border-radius: var(--radius-full); font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-md); } .step h4 { margin-bottom: var(--space-xs); color: var(--color-text); } .step p { color: var(--color-text-secondary); font-size: 0.9rem; } /* ============================================ GAME BOARD STYLES ============================================ */ .game-section { padding: var(--space-xl) 0; } /* --- Game Header (3-column: timer | hearts | actions) --- */ .game-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(0,0,0,0.1); } .game-header-left { display: flex; align-items: center; gap: var(--space-sm); flex: 1; } .game-header-center { display: flex; align-items: center; justify-content: center; flex: 1; } .game-header-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); flex: 1; } .game-timer { font-family: 'Courier New', monospace; font-size: 1.25rem; font-weight: 700; color: var(--color-text); background: var(--color-bg-alt); padding: 0.3rem 0.75rem; border-radius: var(--radius-md); } /* --- Lives / Hearts --- */ .lives-display { display: flex; gap: 4px; align-items: center; } .heart { font-size: 1.35rem; line-height: 1; transition: all 0.25s ease; } .heart.active { color: #e74c3c; } .heart.lost { color: #ccc; transform: scale(0.8); animation: heartBreak 0.35s ease; } @keyframes heartBreak { 0% { transform: scale(1); color: #e74c3c; } 50% { transform: scale(1.15); } 100% { transform: scale(0.8); color: #ccc; } } /* --- Messages --- */ .game-message { padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-lg); font-weight: 500; text-align: center; } .game-message.success { background: #d5f5e3; color: #059669; border: 1px solid #a3e4c1; } .game-message.error { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; } .game-message.info { background: #cff4fc; color: #055160; border: 1px solid #9eeaf9; } /* --- Loading --- */ .game-loading { text-align: center; padding: var(--space-3xl); color: var(--color-text-muted); } .spinner { width: 40px; height: 40px; border: 3px solid var(--color-bg-alt); border-top-color: var(--color-primary); border-radius: 50%; margin: 0 auto var(--space-md); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Puzzle source info --- */ .puzzle-source { text-align: center; margin-bottom: var(--space-lg); font-size: 0.85rem; color: var(--color-text-muted); display: flex; flex-direction: column; align-items: center; gap: 4px; } .puzzle-source-main { font-family: var(--font-display, serif); font-size: 1.1rem; font-weight: 700; color: var(--color-text); letter-spacing: .3px; } .puzzle-source-topic { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--thk-gold, #C8A24C); background: color-mix(in srgb, var(--thk-gold, #C8A24C) 14%, transparent); border: 1px solid color-mix(in srgb, var(--thk-gold, #C8A24C) 35%, transparent); border-radius: 999px; padding: 2px 12px; } /* --- Cipher Display (puzzle card) --- */ /* Hidden input that drives the phone's native keyboard — off-screen but focusable. font-size >=16px stops iOS from auto-zooming when it gets focus. */ .wpgmc-mobile-input { position: fixed; bottom: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; font-size: 16px; background: transparent; color: transparent; caret-color: transparent; pointer-events: none; z-index: -1; } .cipher-display { direction: rtl; background: var(--color-surface); border: 2px solid rgba(0,0,0,0.08); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); min-height: 180px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px 14px; justify-content: center; box-shadow: var(--shadow-sm); } .cipher-word { direction: rtl; display: inline-flex; flex-direction: row; gap: 3px; margin: 4px 4px; } /* --- Cipher Cell (letter on top, number below) --- */ .cipher-cell { display: flex; flex-direction: column; align-items: center; width: 32px; cursor: pointer; transition: all var(--transition-fast); } .cipher-cell.punctuation { cursor: default; width: 18px; } /* Letter area (top) — the answer slot */ .cell-letter { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; font-family: var(--font-primary); color: var(--color-text); border-bottom: 2px solid #bbb; transition: all var(--transition-fast); background: transparent; } /* Punctuation letter styling */ .cipher-cell.punctuation .cell-letter { border-bottom: none; color: var(--color-text-muted); font-weight: 400; } .punct-char { font-size: 0.95rem; } /* Number area (bottom) */ .cell-number { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); height: 18px; display: flex; align-items: center; justify-content: center; font-family: 'Courier New', monospace; line-height: 1; } /* --- Cell States --- */ /* Selected (currently active number) */ .cipher-cell.selected .cell-letter { border-bottom-color: var(--color-primary); background: #e8f5ee; border-radius: 2px 2px 0 0; } .cipher-cell.selected .cell-number { color: var(--color-primary); font-weight: 700; } /* Correct guess */ .cipher-cell.correct .cell-letter { border-bottom-color: var(--color-success); color: var(--color-success); background: #d5f5e3; border-radius: 2px 2px 0 0; } /* Incorrect guess (flash) */ .cipher-cell.incorrect .cell-letter { border-bottom-color: var(--color-error); color: var(--color-error); background: #fde8e8; border-radius: 2px 2px 0 0; animation: shake 0.3s ease; } /* Pre-revealed letters */ .cipher-cell.revealed .cell-letter { border-bottom-color: var(--color-secondary); color: var(--color-secondary); background: #fef9e7; border-radius: 2px 2px 0 0; font-style: italic; } /* Hint letters */ .cipher-cell.hint .cell-letter { border-bottom-color: var(--color-warning); color: #b8860b; background: #fff8e1; border-radius: 2px 2px 0 0; } /* Failed / game-over unsolved cells */ .cipher-cell.failed .cell-letter { border-bottom-color: #ccc; color: #aaa; background: #f0f0f0; border-radius: 2px 2px 0 0; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* --- Keyboard --- */ .keyboard { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .keyboard-row { display: flex; gap: 4px; justify-content: center; } .key { width: 38px; height: 50px; border: 1px solid #d0d0d0; border-radius: var(--radius-md); background: var(--color-surface); font-family: var(--font-primary); color: var(--color-text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: all var(--transition-fast); box-shadow: 0 1px 2px rgba(0,0,0,0.08); padding: 2px 0; } .key-letter { font-size: 0.85rem; font-weight: 600; line-height: 1; } .key-number { font-size: 0.6rem; font-weight: 500; line-height: 1; min-height: 0.6rem; color: var(--color-text-muted); } .key:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); } .key:hover .key-letter, .key:hover .key-number { color: white; } .key:active { transform: scale(0.95); } .key.correct-key { background: var(--color-success); color: white; border-color: var(--color-success); } .key.correct-key .key-letter, .key.correct-key .key-number { color: white; } .key-action { width: auto; padding: 0 12px; background: var(--color-bg-alt); flex-direction: row; } .key-action .key-letter { font-size: 0.75rem; } /* --- Completion Modal --- */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-lg); overflow-y: auto; -webkit-overflow-scrolling: touch; backdrop-filter: blur(4px); } .modal-content { background: var(--color-surface); border-radius: var(--radius-xl); max-width: 480px; width: 100%; box-shadow: var(--shadow-lg); overflow: hidden; animation: modalIn 0.3s ease; } @keyframes modalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-header { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; padding: var(--space-xl); text-align: center; } .modal-header h2 { font-family: var(--font-display); font-size: 1.75rem; } .modal-body { padding: var(--space-xl); } .score-display { text-align: center; margin-bottom: var(--space-xl); } .score-label { display: block; font-size: 0.85rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; } .score-value { font-size: 3rem; font-weight: 700; color: var(--color-primary); font-family: var(--font-display); } .completion-stats { display: flex; justify-content: center; gap: var(--space-xl); margin-bottom: var(--space-xl); } .stat { text-align: center; } .stat-label { display: block; font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; } .stat-value { font-size: 1.1rem; font-weight: 600; color: var(--color-text); } .revealed-quote { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-lg); text-align: center; border-inline-start: 4px solid var(--color-secondary); } .revealed-quote blockquote { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-text); margin-bottom: var(--space-sm); line-height: 1.6; } .revealed-quote cite { font-size: 0.85rem; color: var(--color-text-muted); font-style: normal; } .modal-footer { padding: var(--space-lg) var(--space-xl); display: flex; gap: var(--space-md); justify-content: center; border-top: 1px solid rgba(0,0,0,0.05); } /* Success modal header (green gradient) */ .success-header { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); position: relative; } /* Game Over modal header (red gradient) */ .gameover-header { background: linear-gradient(135deg, #c0392b 0%, #8e2420 100%); } .gameover-message { text-align: center; font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: var(--space-lg); } .gameover-answer-label { font-size: 0.85rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm); } /* --- Win Modal Enhancements --- */ .modal-header-icon { font-size: 2.5rem; margin-bottom: var(--space-xs); animation: starPulse 2s ease-in-out infinite; } @keyframes starPulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; } 50% { transform: scale(1.2) rotate(10deg); opacity: 1; } } .modal-celebration { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .celebration-particle { position: absolute; top: -20px; font-size: 1.2rem; opacity: 0; animation: celebrationFall linear forwards; } @keyframes celebrationFall { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(120px) rotate(360deg); } } /* --- Game Over Progress Indicator --- */ .gameover-progress { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); padding: var(--space-md); background: var(--color-bg-alt); border-radius: var(--radius-md); } .gameover-progress-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; } .gameover-progress-bar { flex: 1; height: 10px; background: rgba(0,0,0,0.08); border-radius: var(--radius-full); overflow: hidden; } .gameover-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: var(--radius-full); transition: width 0.8s ease; } .gameover-progress-text { font-size: 0.8rem; font-weight: 700; color: var(--color-text); white-space: nowrap; font-family: 'Courier New', monospace; direction: ltr; unicode-bidi: bidi-override; } /* --- Game Over Encouragement Verse --- */ .gameover-verse { text-align: center; font-family: var(--font-display); font-size: 0.9rem; color: var(--color-text-secondary); margin-top: var(--space-lg); line-height: 1.7; } .gameover-verse span { display: block; font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-primary); margin-top: var(--space-xs); } /* ============================================ AUTH PAGES (Login / Register) ============================================ */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 200px); padding: var(--space-xl) var(--space-lg); background: radial-gradient(ellipse at 20% 50%, rgba(16,185,129,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(212,175,119,0.06) 0%, transparent 50%), var(--color-bg); } .auth-container { width: 100%; max-width: 440px; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid rgba(0,0,0,0.06); } .auth-header { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-accent) 100%); color: white; text-align: center; padding: var(--space-xl) var(--space-xl) var(--space-lg); } .auth-bismillah { font-size: 2.5rem; line-height: 1; margin-bottom: var(--space-sm); opacity: 0.9; } .auth-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; margin-bottom: var(--space-xs); } .auth-subtitle { font-size: 0.9rem; opacity: 0.85; } /* Auth alerts */ .auth-alert { margin: var(--space-lg) var(--space-xl) 0; padding: var(--space-md); border-radius: var(--radius-md); font-size: 0.875rem; line-height: 1.5; } .auth-alert-success { background: #d5f5e3; color: #059669; border: 1px solid #a3e4c1; } .auth-alert-error { background: #f8d7da; color: #842029; border: 1px solid #f1aeb5; } .auth-error-list { list-style: none; margin: 0; padding: 0; } .auth-error-list li { padding: 2px 0; } .auth-error-list li + li { border-top: 1px solid rgba(132,32,41,0.1); margin-top: 4px; padding-top: 6px; } /* Auth form */ .auth-form { padding: var(--space-xl); } .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); } .form-input { width: 100%; padding: 0.65rem 0.85rem; border: 2px solid #e0ddd6; border-radius: var(--radius-md); font-family: var(--font-primary); font-size: 0.9rem; color: var(--color-text); background: var(--color-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; } .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); } .form-input::placeholder { color: var(--color-text-muted); } .form-hint { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--space-xs); } /* Checkbox */ .form-check-group { margin-bottom: var(--space-lg); } .form-check { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; } .form-check-input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; } .form-check-label { font-size: 0.875rem; color: var(--color-text-secondary); } /* Block button */ .btn-block { display: block; width: 100%; padding: 0.75rem; font-size: 1rem; } /* Auth footer */ .auth-footer { text-align: center; padding: 0 var(--space-xl) var(--space-lg); font-size: 0.875rem; color: var(--color-text-secondary); } .auth-link { color: var(--color-primary); text-decoration: none; font-weight: 600; transition: color var(--transition-fast); } .auth-link:hover { color: var(--color-primary-dark); text-decoration: underline; } /* Islamic verse at bottom */ .auth-verse { text-align: center; padding: var(--space-lg) var(--space-xl); background: var(--color-bg-alt); border-top: 1px solid rgba(0,0,0,0.05); } .auth-verse p { font-family: var(--font-display); font-size: 0.9rem; color: var(--color-text-secondary); font-style: italic; line-height: 1.6; margin-bottom: var(--space-xs); } .auth-verse cite { font-size: 0.8rem; color: var(--color-text-muted); font-style: normal; } /* ============================================ ADMIN PANEL STYLES ============================================ */ .admin-layout { display: flex; min-height: calc(100vh - 120px); } .admin-sidebar { width: 250px; background: var(--color-primary-dark); color: white; padding: var(--space-lg) 0; flex-shrink: 0; } .admin-sidebar-header { padding: 0 var(--space-lg) var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: var(--space-md); } .admin-sidebar-header h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; } .admin-sidebar-header small { font-size: 0.75rem; opacity: 0.7; } .admin-nav { list-style: none; padding: 0; margin: 0; } .admin-nav-item a { display: flex; align-items: center; gap: var(--space-sm); padding: 0.6rem var(--space-lg); color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all var(--transition-fast); border-inline-start: 3px solid transparent; } .admin-nav-item a:hover { background: rgba(255,255,255,0.08); color: white; } .admin-nav-item a.active { background: rgba(255,255,255,0.1); color: white; border-inline-start-color: var(--color-secondary); } .admin-nav-icon { font-size: 1.1rem; width: 20px; text-align: center; } .admin-content { flex: 1; padding: var(--space-xl) var(--space-2xl); min-width: 0; } .admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(0,0,0,0.08); } .admin-page-header h1 { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-primary-dark); } /* Admin stat cards */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-2xl); } .stat-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.05); border-top: 3px solid var(--color-primary); } .stat-card-value { font-size: 2rem; font-weight: 700; color: var(--color-primary); font-family: var(--font-display); line-height: 1.2; } .stat-card-label { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-xs); } /* Admin tables */ .admin-table-wrapper { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid rgba(0,0,0,0.05); } .admin-table-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid rgba(0,0,0,0.05); } .admin-table-header h2 { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-text); } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { background: var(--color-bg-alt); padding: 0.75rem var(--space-lg); text-align: start; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); border-bottom: 1px solid rgba(0,0,0,0.08); } .admin-table td { padding: 0.75rem var(--space-lg); font-size: 0.875rem; color: var(--color-text); border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle; } .admin-table tr:hover td { background: var(--color-surface-hover); } .admin-table-actions { display: flex; gap: var(--space-xs); } /* Admin badges */ .badge-status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .badge-approved { background: #d5f5e3; color: #059669; } .badge-pending { background: #fef3cd; color: #856404; } .badge-rejected { background: #f8d7da; color: #842029; } /* Pagination */ .admin-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-lg); } .admin-pagination a, .admin-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-md); font-size: 0.85rem; text-decoration: none; color: var(--color-text-secondary); border: 1px solid rgba(0,0,0,0.08); transition: all var(--transition-fast); } .admin-pagination a:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); } .admin-pagination .active { background: var(--color-primary); color: white; border-color: var(--color-primary); font-weight: 600; } /* Admin forms */ .admin-form-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.05); padding: var(--space-xl); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .form-textarea { width: 100%; padding: 0.65rem 0.85rem; border: 2px solid #e0ddd6; border-radius: var(--radius-md); font-family: var(--font-primary); font-size: 0.9rem; color: var(--color-text); background: var(--color-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; resize: vertical; min-height: 120px; line-height: 1.6; } .form-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); } .form-select { width: 100%; padding: 0.65rem 0.85rem; border: 2px solid #e0ddd6; border-radius: var(--radius-md); font-family: var(--font-primary); font-size: 0.9rem; color: var(--color-text); background: var(--color-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6560' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-inline-end: 36px; } .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); } .form-actions { display: flex; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid rgba(0,0,0,0.05); } /* ============================================ PLAYER DASHBOARD STYLES ============================================ */ .player-section { padding: var(--space-2xl) 0; } .player-header { text-align: center; margin-bottom: var(--space-2xl); } .player-header h1 { font-family: var(--font-display); font-size: 1.75rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .player-header p { color: var(--color-text-secondary); font-size: 0.9rem; } .player-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-2xl); } .player-stat-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.05); } .player-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--color-primary); font-family: var(--font-display); line-height: 1.2; } .player-stat-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-xs); } .player-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-2xl); } .player-welcome-card { text-align: center; padding: var(--space-xl); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.05); } .player-welcome-icon { font-size: 2.5rem; margin-bottom: var(--space-md); } .player-welcome-card h3 { font-family: var(--font-display); color: var(--color-primary-dark); margin-bottom: var(--space-sm); } .player-welcome-card p { color: var(--color-text-secondary); max-width: 400px; margin: 0 auto; font-size: 0.9rem; } /* History table */ .history-table-wrapper { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid rgba(0,0,0,0.05); } .history-table { width: 100%; border-collapse: collapse; } .history-table th { background: var(--color-bg-alt); padding: 0.75rem var(--space-lg); text-align: start; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); border-bottom: 1px solid rgba(0,0,0,0.08); } .history-table td { padding: 0.75rem var(--space-lg); font-size: 0.875rem; color: var(--color-text); border-bottom: 1px solid rgba(0,0,0,0.04); } .history-table tr:hover td { background: var(--color-surface-hover); } /* ============================================ LEADERBOARD STYLES ============================================ */ .leaderboard-section { padding: var(--space-2xl) 0; } .leaderboard-header { text-align: center; margin-bottom: var(--space-xl); } .leaderboard-header h1 { font-family: var(--font-display); font-size: 2rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .leaderboard-header p { color: var(--color-text-secondary); font-size: 0.95rem; } .leaderboard-filters { display: flex; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-xl); flex-wrap: wrap; } .filter-btn { padding: 0.45rem 1.1rem; border: 2px solid var(--color-primary); border-radius: var(--radius-full); background: transparent; color: var(--color-primary); font-family: var(--font-primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); } .filter-btn:hover, .filter-btn.active { background: var(--color-primary); color: white; } .leaderboard-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid rgba(0,0,0,0.05); max-width: 700px; margin: 0 auto; } .leaderboard-table { width: 100%; border-collapse: collapse; } .leaderboard-table th { background: var(--color-bg-alt); padding: 0.75rem var(--space-lg); text-align: start; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); border-bottom: 1px solid rgba(0,0,0,0.08); } .leaderboard-table td { padding: 0.75rem var(--space-lg); font-size: 0.9rem; color: var(--color-text); border-bottom: 1px solid rgba(0,0,0,0.04); } .leaderboard-table tr:hover td { background: var(--color-surface-hover); } .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-full); font-weight: 700; font-size: 0.85rem; } .rank-1 { background: #fef3cd; color: #b8860b; } .rank-2 { background: #e8e8e8; color: #666; } .rank-3 { background: #fde8d4; color: #b85c38; } .rank-other { background: var(--color-bg-alt); color: var(--color-text-secondary); } /* Empty state */ .empty-state { text-align: center; padding: var(--space-3xl) var(--space-xl); color: var(--color-text-muted); } .empty-state-icon { font-size: 3rem; margin-bottom: var(--space-md); opacity: 0.5; } .empty-state h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: var(--space-sm); } .empty-state p { font-size: 0.9rem; max-width: 400px; margin: 0 auto; } /* Danger button */ .btn-danger { background: var(--color-error); color: white; border-color: var(--color-error); } .btn-danger:hover { background: #a93226; border-color: #a93226; } .btn-success { background: var(--color-success); color: white; border-color: var(--color-success); } .btn-success:hover { background: #059669; border-color: #059669; } .btn-warning { background: var(--color-warning); color: var(--color-text); border-color: var(--color-warning); } .btn-warning:hover { background: #c49a3b; border-color: #c49a3b; } /* Text utilities */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; } /* ============================================ RESPONSIVE ============================================ */ /* --- Responsive --- */ @media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 0.95rem; } .cipher-cell { width: 28px; } .cell-letter { width: 24px; height: 24px; font-size: 0.9rem; } .cell-number { font-size: 0.6rem; } .key { width: 32px; height: 44px; } .key-letter { font-size: 0.8rem; } .key-number { font-size: 0.55rem; } .game-header { flex-wrap: wrap; gap: var(--space-sm); } .game-header-left, .game-header-center, .game-header-right { flex: none; } .completion-stats { gap: var(--space-md); flex-wrap: wrap; } /* Mobile nav */ .nav-toggle { display: flex; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: 2px solid var(--color-primary); box-shadow: var(--shadow-md); flex-direction: column; padding: var(--space-md) var(--space-lg); gap: var(--space-sm); z-index: 100; } .main-nav.nav-open { display: flex; } .nav-links { flex-direction: column; align-items: stretch; gap: 0; } .nav-links .nav-link { padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,0.04); } .nav-auth { flex-direction: column; align-items: stretch; gap: var(--space-sm); padding-top: var(--space-sm); } .nav-auth::before { display: none; } .nav-auth .nav-link { padding: 0.5rem 0; } .nav-btn-register { text-align: center; } .nav-user-menu { width: 100%; } .nav-user-btn { width: 100%; justify-content: flex-start; } .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-radius: 0; padding: 0; padding-inline-start: var(--space-xl); display: none; } .nav-dropdown.dropdown-open { display: block; } /* Admin responsive */ .admin-layout { flex-direction: column; } .admin-sidebar { width: 100%; } .admin-nav { display: flex; flex-wrap: wrap; gap: 0; } .admin-nav-item a { padding: 0.5rem var(--space-md); border-inline-start: none; border-bottom: 3px solid transparent; } .admin-nav-item a.active { border-bottom-color: var(--color-secondary); border-inline-start-color: transparent; } .admin-content { padding: var(--space-lg); } .form-row { grid-template-columns: 1fr; } /* Auth responsive */ .auth-page { padding: var(--space-md); } .auth-container { max-width: 100%; } } @media (max-width: 480px) { .hero-actions { flex-direction: column; align-items: center; } .cipher-display { padding: var(--space-md); gap: 4px 8px; } .cipher-cell { width: 24px; } .cell-letter { width: 20px; height: 22px; font-size: 0.8rem; } .cell-number { font-size: 0.55rem; } .key { width: 28px; height: 40px; } .key-letter { font-size: 0.7rem; } .key-number { font-size: 0.5rem; } .heart { font-size: 1.1rem; } .game-timer { font-size: 1rem; } .auth-title { font-size: 1.4rem; } .auth-bismillah { font-size: 2rem; } .stat-cards { grid-template-columns: 1fr 1fr; } } /* ============================================ Achievements ============================================ */ /* Progress bar (used on achievements page and dashboard) */ .achievement-progress-bar { width: 100%; max-width: 320px; height: 8px; background: var(--color-bg-alt); border-radius: var(--radius-full); overflow: hidden; margin: var(--space-sm) 0; } .achievement-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: var(--radius-full); transition: width 0.5s ease; } /* Category sections */ .achievement-category { margin-bottom: var(--space-2xl); } .achievement-category-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .achievement-category-desc { color: var(--color-text-secondary); font-size: 0.88rem; margin-bottom: var(--space-md); } /* Achievement grid */ .achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); } /* Achievement card */ .achievement-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; position: relative; } .achievement-card.earned { border-inline-start: 4px solid var(--color-primary); background: linear-gradient(135deg, rgba(16,185,129,0.03), rgba(212,175,119,0.03)); } .achievement-card.locked { opacity: 0.55; filter: grayscale(0.5); } .achievement-card.earned:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Icon */ .achievement-icon { font-size: 1.8rem; min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt); border-radius: var(--radius-md); } .achievement-card.earned .achievement-icon { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); filter: none; } .achievement-card.earned .achievement-icon { background: rgba(16,185,129,0.1); } /* Info */ .achievement-info { flex: 1; min-width: 0; } .achievement-name { font-weight: 700; font-size: 0.95rem; color: var(--color-text); } .achievement-desc { font-size: 0.82rem; color: var(--color-text-secondary); margin-top: 2px; } .achievement-date { font-size: 0.75rem; color: var(--color-primary); margin-top: 4px; font-weight: 500; } /* Check mark */ .achievement-check { font-size: 1.2rem; color: var(--color-primary); font-weight: 700; } /* Dashboard summary card */ .achievement-summary-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(212,175,119,0.06)); border: 1px solid rgba(16,185,129,0.15); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); } .achievement-summary-left { display: flex; align-items: center; gap: var(--space-md); } .achievement-summary-icon { font-size: 1.6rem; } .achievement-summary-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-primary-dark); } .achievement-summary-text { font-size: 0.85rem; color: var(--color-text-secondary); } .achievement-summary-right { display: flex; align-items: center; gap: var(--space-md); } /* Streak fire animation on dashboard */ .streak-fire { font-size: 1rem; display: inline-block; animation: streak-pulse 1.5s ease-in-out infinite; } @keyframes streak-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .streak-card .player-stat-value { color: var(--color-secondary); } /* Small button variant */ .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; } /* Responsive */ @media (max-width: 600px) { .achievement-grid { grid-template-columns: 1fr; } .achievement-summary-card { flex-direction: column; text-align: center; } .achievement-summary-left { flex-direction: column; } .achievement-summary-right { flex-direction: column; width: 100%; } .achievement-progress-bar { width: 100%; max-width: none; } } /* ============================================ Analytics Bar Chart ============================================ */ .analytics-bar-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 160px; padding-top: var(--space-md); } .analytics-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .analytics-bar-value { font-size: 0.7rem; font-weight: 700; color: var(--color-primary-dark); margin-bottom: 4px; } .analytics-bar { width: 100%; max-width: 40px; min-height: 4px; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: height 0.4s ease; } .analytics-bar-label { font-size: 0.65rem; color: var(--color-text-muted); margin-top: 4px; white-space: nowrap; } /* ============================================ Game Modes ============================================ */ /* --- Mode Badges (in game header) --- */ .badge-mode { font-size: 0.7rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .badge-mode-timed { background: #e3f0ff; color: var(--color-accent); border: 1px solid rgba(30,58,138,0.2); } .badge-mode-nohints { background: #fff3e0; color: #b8560b; border: 1px solid rgba(184,86,11,0.2); } /* --- Countdown Timer (timed mode) --- */ .game-timer.countdown { color: var(--color-accent); background: #e3f0ff; border: 1px solid rgba(30,58,138,0.2); } .game-timer.countdown-warning { color: var(--color-error); background: #fde8e8; border: 1px solid rgba(192,57,43,0.2); animation: timerPulse 1s ease-in-out infinite; } @keyframes timerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* --- Mode Bonus Label (completion modal) --- */ .mode-bonus-label { display: block; font-size: 0.8rem; color: var(--color-secondary); font-weight: 600; margin-top: var(--space-xs); } /* --- Game Modes Section (home page) --- */ .game-modes-section { padding: var(--space-2xl) 0 var(--space-3xl); } .game-modes-title { font-family: var(--font-display); text-align: center; font-size: 2rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .game-modes-subtitle { text-align: center; color: var(--color-text-secondary); font-size: 0.95rem; margin-bottom: var(--space-xl); } .game-modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); } .game-mode-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.05); border-top: 3px solid var(--color-primary); transition: transform var(--transition-normal), box-shadow var(--transition-normal); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .game-mode-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .game-mode-card-timed { border-top-color: var(--color-accent); } .game-mode-card-nohints { border-top-color: #b8560b; } .game-mode-icon { font-size: 2.5rem; margin-bottom: var(--space-xs); } .game-mode-card h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .game-mode-card p { color: var(--color-text-secondary); font-size: 0.88rem; line-height: 1.5; margin-bottom: var(--space-sm); } .game-mode-details { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-bottom: var(--space-md); } .game-mode-detail { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; background: var(--color-bg-alt); border-radius: var(--radius-full); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; } /* Responsive game modes */ @media (max-width: 480px) { .game-modes-grid { grid-template-columns: 1fr; } } /* ============================================ XP / Level System (P2 - Richer Gamification) ============================================ */ /* --- Level Card (Player Dashboard) --- */ .level-card { background: var(--color-surface); border: 2px solid var(--color-secondary); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-lg); } .level-card-empty { border-style: dashed; opacity: 0.8; } .level-card-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); } .level-badge-large { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .level-number { line-height: 1; } .level-info { flex: 1; } .level-title-text { font-size: 1.15rem; font-weight: 700; color: var(--color-text); } .level-arabic { font-size: 0.95rem; color: var(--color-secondary); font-weight: 400; margin-inline-start: var(--space-xs); } .level-xp-text { font-size: 0.9rem; color: var(--color-text-secondary); margin-top: 2px; } /* --- Level Progress Bar --- */ .level-progress-section { margin-top: var(--space-sm); } .level-xp-bar { width: 100%; height: 12px; background: var(--color-bg-alt); border-radius: 6px; overflow: hidden; position: relative; } .level-xp-bar-modal { height: 10px; margin-top: var(--space-xs); } .level-xp-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: 6px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); min-width: 0; } .level-xp-labels { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; } /* --- Level Badge Tiers (color progression) --- */ .level-tier-1 { background: #78909c; } /* Grey — Seeker */ .level-tier-2 { background: var(--color-primary); } /* Green — Learner */ .level-tier-3 { background: var(--color-accent); } /* Blue — Reader */ .level-tier-4 { background: #7b1fa2; } /* Purple — Scholar */ .level-tier-5 { background: var(--color-secondary); color: var(--color-text); } /* Gold — Sage */ .level-tier-6 { background: #e65100; } /* Orange — Illuminator */ .level-tier-7 { background: #c62828; } /* Red — Wise One */ .level-tier-8 { background: linear-gradient(135deg, var(--color-secondary), #ff6f00); } /* Gold gradient — Grand Scholar */ /* --- Small Level Badge (Leaderboard) --- */ .level-badge-sm { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: #fff; } /* --- Level-Up Section in Completion Modal --- */ .level-up-section { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-bg-alt); } .xp-gained { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); text-align: center; margin-bottom: var(--space-sm); } .level-up-banner { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--color-secondary-light), var(--color-secondary)); color: var(--color-text); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-sm); font-weight: 700; } .level-up-icon { font-size: 1.5rem; } .level-up-text { font-size: 1.2rem; letter-spacing: 0.5px; } .level-up-detail { font-size: 0.9rem; font-weight: 500; } /* Level-up animation */ .level-up-animate { animation: levelUpPulse 0.6s ease-out; } @keyframes levelUpPulse { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } /* --- Responsive XP/Level --- */ @media (max-width: 480px) { .level-badge-large { width: 44px; height: 44px; font-size: 1.1rem; } .level-title-text { font-size: 1rem; } .level-up-banner { flex-direction: column; gap: var(--space-xs); } } /* ============================================ TEAM VS TEAM STYLES ============================================ */ /* --- Game Mode Card (team variant on home page) --- */ .game-mode-card-team { border-top-color: var(--color-team-b); } /* --- Team Lobby Section --- */ .team-lobby-section { padding: var(--space-2xl) 0 var(--space-3xl); } .team-lobby-title { font-family: var(--font-display); text-align: center; font-size: 2rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .team-lobby-subtitle { text-align: center; color: var(--color-text-secondary); font-size: 0.95rem; margin-bottom: var(--space-xl); } /* --- Lobby Tabs (Create / Join toggle) --- */ .team-lobby-tabs { display: flex; justify-content: center; gap: var(--space-xs); margin-bottom: var(--space-xl); } .team-tab { padding: 0.55rem 1.5rem; border: 2px solid var(--color-primary); border-radius: var(--radius-full); background: transparent; color: var(--color-primary); font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); } .team-tab:hover { background: rgba(16,185,129,0.08); } .team-tab.active { background: var(--color-primary); color: white; } /* --- Lobby Form Panels --- */ .team-form-panel { max-width: 440px; margin: 0 auto; background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-xl); box-shadow: var(--shadow-md); border: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: var(--space-md); } .team-form-panel .btn { margin-top: var(--space-sm); } /* --- Team Room Section --- */ .team-room-section { padding: var(--space-xl) 0 var(--space-3xl); } /* --- Room Header (waiting room) --- */ .room-header { text-align: center; margin-bottom: var(--space-xl); } .room-title { font-family: var(--font-display); font-size: 1.75rem; color: var(--color-primary-dark); margin-bottom: var(--space-md); } .room-code-display { display: inline-flex; align-items: center; gap: var(--space-sm); background: var(--color-bg-alt); border: 2px dashed var(--color-secondary); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-lg); margin-bottom: var(--space-sm); } .room-code-label { font-size: 0.85rem; color: var(--color-text-secondary); font-weight: 500; } .room-code-value { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); letter-spacing: 0.15em; font-family: 'Courier New', monospace; direction: ltr; unicode-bidi: bidi-override; } .room-hint { font-size: 0.85rem; color: var(--color-text-muted); } /* --- Teams Container (waiting room panels) --- */ .teams-container { display: flex; align-items: stretch; gap: var(--space-lg); margin-bottom: var(--space-xl); justify-content: center; } .team-panel { flex: 1; max-width: 320px; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.06); border-top: 3px solid var(--color-text-muted); display: flex; flex-direction: column; } .team-panel-a { border-top-color: var(--color-team-a); } .team-panel-b { border-top-color: var(--color-team-b); } .team-panel .team-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; text-align: center; margin-bottom: var(--space-md); color: var(--color-text); } .team-panel-a .team-name { color: var(--color-team-a); } .team-panel-b .team-name { color: var(--color-team-b); } /* VS divider between team panels */ .teams-vs { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-text-muted); padding: 0 var(--space-xs); } /* --- Player List --- */ .team-player-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; min-height: 60px; } .team-player-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); background: var(--color-bg-alt); border-radius: var(--radius-md); font-size: 0.88rem; transition: background var(--transition-fast); } .team-player-item.player-me { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.15); } .team-player-item.player-ready { background: rgba(16,185,129,0.05); } .player-name { font-weight: 600; color: var(--color-text); } .player-badges { display: flex; gap: var(--space-xs); align-items: center; } .badge-host { font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: var(--radius-full); background: var(--color-secondary); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.03em; } .badge-ready { font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: var(--radius-full); background: #d5f5e3; color: #059669; text-transform: uppercase; letter-spacing: 0.03em; } /* --- Room Actions --- */ .room-actions { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-md); } .room-status-text { text-align: center; font-size: 0.9rem; color: var(--color-text-muted); font-weight: 500; } /* --- Team Progress Bars (in-game header) --- */ .team-progress-bars { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; max-width: 300px; } .team-progress-bar { display: flex; align-items: center; gap: var(--space-sm); } .team-bar-label { font-size: 0.7rem; font-weight: 700; min-width: 52px; text-align: end; color: var(--color-text-secondary); } .team-bar-track { flex: 1; height: 10px; background: var(--color-bg-alt); border-radius: var(--radius-full); overflow: hidden; } .team-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.4s ease; min-width: 0; } .team-bar-a .team-bar-fill { background: linear-gradient(90deg, var(--color-team-a), var(--color-primary-light)); } .team-bar-b .team-bar-fill { background: linear-gradient(90deg, var(--color-team-b), var(--color-accent-light)); } .team-bar-count { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); min-width: 32px; font-family: 'Courier New', monospace; direction: ltr; unicode-bidi: bidi-override; } /* --- Team Lives Row (in-game) --- */ .team-lives-row { display: flex; justify-content: center; gap: var(--space-xl); margin-bottom: var(--space-md); padding: var(--space-sm) 0; } .team-lives { display: flex; align-items: center; gap: var(--space-xs); } .team-lives-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); } /* --- Team Results (post-game) --- */ .team-results-content { text-align: center; padding: var(--space-2xl) 0; max-width: 560px; margin: 0 auto; } .team-results-title { font-family: var(--font-display); font-size: 2rem; color: var(--color-primary-dark); margin-bottom: var(--space-xl); } .team-results-scores { display: flex; gap: var(--space-xl); justify-content: center; margin-bottom: var(--space-xl); } .team-result-card { flex: 1; max-width: 220px; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.06); border-top: 4px solid var(--color-text-muted); } .team-result-a { border-top-color: var(--color-team-a); } .team-result-b { border-top-color: var(--color-team-b); } .team-result-card h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: var(--space-sm); color: var(--color-text); } .team-result-a h3 { color: var(--color-team-a); } .team-result-b h3 { color: var(--color-team-b); } .team-result-solved { font-size: 2.5rem; font-weight: 800; color: var(--color-primary); font-family: var(--font-display); line-height: 1.2; } .team-result-label { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-xs); } .team-results-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* --- Team Responsive --- */ @media (max-width: 768px) { .teams-container { flex-direction: column; align-items: center; } .team-panel { max-width: 100%; width: 100%; } .teams-vs { padding: var(--space-xs) 0; } .team-progress-bars { max-width: 220px; } } @media (max-width: 480px) { .team-lobby-title { font-size: 1.5rem; } .room-code-value { font-size: 1.25rem; } .team-results-scores { flex-direction: column; align-items: center; } .team-result-card { max-width: 100%; width: 100%; } .team-lives-row { flex-direction: column; align-items: center; gap: var(--space-sm); } } /* ================================================================ STORE / MONETIZATION (STUB) ================================================================ */ .store-section { padding: var(--space-2xl) 0; } .store-header { text-align: center; margin-bottom: var(--space-2xl); } .store-header h1 { font-family: var(--font-display); font-size: 2.5rem; color: var(--color-primary-dark); margin-bottom: var(--space-sm); } .store-header p { color: var(--color-text-secondary); font-size: 1.1rem; } .store-coming-soon { text-align: center; padding: var(--space-3xl) var(--space-xl); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); max-width: 500px; margin: 0 auto; } .store-coming-soon-icon { font-size: 3rem; margin-bottom: var(--space-md); } .store-coming-soon h2 { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-primary); margin-bottom: var(--space-md); } .store-coming-soon p { color: var(--color-text-secondary); margin-bottom: var(--space-lg); line-height: 1.8; } .store-premium-badge { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark, #b8963d)); color: var(--color-surface); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-lg); font-weight: 600; margin-bottom: var(--space-xl); max-width: 400px; margin-inline: auto; } .store-premium-icon { font-size: 1.3rem; } .store-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-2xl); } .store-product-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; text-align: center; transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .store-product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .store-product-premium { border-top: 4px solid var(--color-secondary); } .store-product-type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--space-sm); } .store-product-name { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-primary-dark); margin-bottom: var(--space-sm); } .store-product-desc { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: var(--space-md); flex: 1; } .store-product-price { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-md); } .store-product-period { font-size: 0.85rem; font-weight: 400; color: var(--color-text-muted); } .btn-store-buy { width: 100%; } .store-benefits { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-xl); box-shadow: var(--shadow-sm); } .store-benefits h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-primary-dark); text-align: center; margin-bottom: var(--space-lg); } .store-benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); } .store-benefit-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); background: var(--color-bg); border-radius: var(--radius-md); font-size: 0.95rem; } .store-benefit-icon { font-size: 1.3rem; flex-shrink: 0; } @media (max-width: 480px) { .store-product-grid { grid-template-columns: 1fr; } .store-benefits-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════ GATEWAY — Language Selection Page ══════════════════════════════════════════════════════════════════ */ .gateway-section { padding: var(--space-3xl) 0; min-height: 80vh; display: flex; align-items: center; } .gateway-header { text-align: center; margin-bottom: var(--space-2xl); } .gateway-bismillah { font-size: 3rem; color: var(--color-primary); margin-bottom: var(--space-md); } .gateway-title { font-family: var(--font-display); font-size: 2.5rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .gateway-title-ar { font-family: var(--font-display); font-size: 2rem; color: var(--color-secondary); margin-bottom: var(--space-lg); font-weight: 400; } .gateway-subtitle { font-size: 1.2rem; color: var(--color-text-secondary); } .gateway-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); max-width: 800px; margin: 0 auto var(--space-2xl); } .gateway-card { position: relative; background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-md); border: 2px solid transparent; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); cursor: pointer; } .gateway-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); } .gateway-card-suggested { border-color: var(--color-primary-light, #34d399); } .gateway-card-icon { font-size: 3rem; margin-bottom: var(--space-md); } .gateway-card-title { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-primary-dark); margin-bottom: var(--space-sm); } .gateway-card-desc { color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--space-md); } .gateway-card-features { list-style: none; padding: 0; margin: 0 0 var(--space-lg); font-size: 0.9rem; color: var(--color-text-secondary); } .gateway-card-features li { padding: var(--space-xs) 0; border-bottom: 1px solid rgba(0,0,0,0.05); } .gateway-card-features li:last-child { border-bottom: none; } .gateway-card-btn { width: 100%; } .gateway-suggested-badge { position: absolute; top: var(--space-md); right: var(--space-md); background: var(--color-primary); color: white; font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-md); } [dir="ltr"] .gateway-suggested-badge { right: auto; left: var(--space-md); } .gateway-footer-note { text-align: center; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.8; } @media (max-width: 640px) { .gateway-cards { grid-template-columns: 1fr; } .gateway-title { font-size: 1.8rem; } .gateway-title-ar { font-size: 1.4rem; } } /* ══════════════════════════════════════════════════════════════════ LTR OVERRIDES — English layout (dir="ltr") ══════════════════════════════════════════════════════════════════ */ [dir="ltr"] body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; text-align: left; } [dir="ltr"] .site-header .container { gap: 2rem; } [dir="ltr"] .site-header .logo { margin-right: 0; margin-left: 0; } [dir="ltr"] .main-nav { text-align: left; } [dir="ltr"] .nav-links { direction: ltr; } [dir="ltr"] .nav-auth { margin-left: auto; margin-right: 0; } [dir="ltr"] .nav-lang-switch { margin-left: var(--space-md); margin-right: 0; } [dir="ltr"] .hero-daily-link { direction: ltr; } [dir="ltr"] .cipher-display { direction: ltr; text-align: left; } [dir="ltr"] .cipher-word { flex-direction: row; direction: ltr; } [dir="ltr"] .keyboard { direction: ltr; } [dir="ltr"] .puzzle-source { text-align: left; } [dir="ltr"] .game-header-left { text-align: left; } [dir="ltr"] .game-header-right { text-align: right; } [dir="ltr"] .revealed-quote blockquote { text-align: left; } [dir="ltr"] .step-number { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; } [dir="ltr"] .leaderboard-table, [dir="ltr"] .admin-table { text-align: left; } [dir="ltr"] .leaderboard-table th, [dir="ltr"] .leaderboard-table td { text-align: left; } [dir="ltr"] .team-player-item { direction: ltr; text-align: left; } [dir="ltr"] #team-cipher-display { direction: ltr; text-align: left; } [dir="ltr"] .completion-modal-content, [dir="ltr"] .gameover-modal-content { text-align: left; direction: ltr; } [dir="ltr"] .player-stats-grid, [dir="ltr"] .history-table { text-align: left; } [dir="ltr"] .achievement-card { text-align: left; } /* Language switch link styling */ .nav-lang-switch { display: flex; align-items: center; } [dir="ltr"] .logo { gap: 1rem; } .nav-lang-link { font-size: 0.85rem; opacity: 0.8; transition: opacity var(--transition-fast); } .nav-lang-link:hover { opacity: 1; } /* ===== Day/Night theme toggle ===== */ .nav-theme { display: flex; align-items: center; margin-inline-start: var(--space-sm); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--color-line, #1F524D); background: var(--color-surface-hover, transparent); color: var(--thk-gold, #C8A24C); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .theme-toggle:hover { border-color: var(--thk-gold, #C8A24C); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--thk-gold, #C8A24C); outline-offset: 2px; } .theme-toggle svg { display: block; width: 19px; height: 19px; } .theme-toggle .ti-sun { display: inline-block; } .theme-toggle .ti-moon { display: none; } :root[data-theme="light"] .theme-toggle .ti-sun { display: none; } :root[data-theme="light"] .theme-toggle .ti-moon { display: inline-block; } /* ============================================ RESPONSIVE SAFETY LAYER (engineering pass) Appended last so these guards win the cascade. They prevent horizontal overflow, keep the on-screen keyboard from running off narrow phones, guarantee fluid media, and let wide data tables scroll instead of breaking the layout. Verified to be additive (no existing rule is altered). ============================================ */ /* 1. Never allow the page to scroll sideways on any device. */ html, body { max-width: 100%; overflow-x: hidden; } html { scroll-behavior: smooth; } *, *::before, *::after { box-sizing: border-box; } /* 2. Media is always fluid. */ img, svg, video, canvas { max-width: 100%; height: auto; } /* 3. The cipher keyboard must wrap rather than overflow on small screens. (Base rule had no flex-wrap, so a long letter row could clip off-screen.) */ .keyboard-row { flex-wrap: wrap; } /* 4. The cipher display already wraps; make sure it can never force overflow. */ .cipher-display { max-width: 100%; overflow-x: auto; } /* 5. Wide data tables (leaderboard, history, admin lists) scroll within their own box on small screens instead of stretching the viewport. */ .table-wrap, .leaderboard-table-wrap, .history-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table { max-width: 100%; } /* 6. Touch ergonomics: guarantee a comfortable minimum tap target for the primary interactive controls (buttons, nav, keyboard action keys, links styled as buttons) without shrinking the dense letter keys. */ @media (max-width: 768px) { .btn, .nav-btn, .key-action, button, [role="button"] { min-height: 44px; } /* Generous, well-spaced selection keys remain usable by thumb. */ .key { min-width: 30px; } } /* 7. Modals never exceed the viewport. The BODY scrolls when content is tall, while the footer (action buttons) stays pinned and visible — clear of the mobile browser's bottom toolbar / home indicator. Uses dvh so the modal fits the *visible* viewport on mobile Safari/Chrome (100vh wrongly includes the area hidden behind the toolbar, which was pushing the buttons off-screen). */ .modal, .modal-content, .completion-modal { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); } .modal-content { display: flex; flex-direction: column; overflow: hidden; } .modal-content .modal-header, .modal-content .modal-footer { flex-shrink: 0; } .modal-content .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; } .modal-content .modal-footer { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); } /* Neat scroll affordances on tall result modals (down = more below; up = top). */ .modal-content { position: relative; } .modal-scroll-hint { position: absolute; left: 50%; margin-left: -20px; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--color-line, #1F524D); background: var(--color-surface, #103835); color: var(--thk-gold, #C8A24C); box-shadow: 0 4px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 6; cursor: pointer; } .modal-scroll-hint.is-visible { opacity: 0.96; pointer-events: auto; } .modal-scroll-hint:hover { border-color: var(--thk-gold, #C8A24C); } .modal-scroll-down.is-visible { animation: thkScrollBob 1.5s ease-in-out infinite; } @keyframes thkScrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .modal-scroll-down.is-visible { animation: none; } } /* ============================================ CATEGORY-FIRST HOME FLOW (engineering pass) Step 1 = selectable category tiles; Step 2 = level + mode. RTL-safe (logical properties) and fully responsive. ============================================ */ /* Hero is lighter now that the difficulty buttons moved into Step 2. */ .hero-compact { padding-block: clamp(28px, 6vw, 64px); } /* Attractive, high-contrast hero CTA (gold on the green hero, with a soft glow and a gentle attention pulse) — no longer green-on-green. */ .hero-cta, .hero-cta:link, .hero-cta:visited { margin-bottom: 12px; background: linear-gradient(135deg, #f6c545 0%, #e8a008 100%); color: #3a2a00; border: 0; font-weight: 800; letter-spacing: .2px; padding: 14px 40px; border-radius: 999px; box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 0 4px rgba(255, 255, 255, .18); animation: wpgmcCtaPulse 2.4s ease-in-out infinite; } .hero-cta:hover { background: linear-gradient(135deg, #ffd25e 0%, #f0a90a 100%); color: #3a2a00; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .28), 0 0 0 5px rgba(255, 255, 255, .22); } @keyframes wpgmcCtaPulse { 0%, 100% { box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 0 4px rgba(255,255,255,.18); } 50% { box-shadow: 0 12px 30px rgba(0,0,0,.26), 0 0 0 9px rgba(255,255,255,.10); } } @media (prefers-reduced-motion: reduce) { .hero-cta { animation: none; } } /* Floating Start popup — slides up once a level/mode is chosen. */ .start-popup { position: fixed; inset-inline: 0; bottom: 18px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(120%); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); z-index: 60; } .start-popup.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .start-popup-inner { display: flex; align-items: center; gap: 14px; background: var(--color-surface, #fff); border: 1px solid rgba(0, 0, 0, .08); border-radius: 999px; padding: 10px 12px 10px 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); max-width: calc(100vw - 24px); } .start-popup-summary { font-weight: 700; color: var(--color-text, #222); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; } .start-popup .btn-start { margin: 0; white-space: nowrap; } @media (max-width: 560px) { .start-popup { bottom: 0; } .start-popup-inner { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; justify-content: space-between; padding: 10px 14px; } .start-popup-summary { max-width: 50%; font-size: .9rem; } } .picker { padding-block: clamp(28px, 5vw, 56px); scroll-margin-top: 80px; } /* Guided progress stepper (Category → Level → Start) */ .picker-progress { list-style: none; margin: 0 auto clamp(20px, 3vw, 34px); padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; max-width: 1080px; } .pp-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--color-surface, #fff); border: 1px solid rgba(0, 0, 0, .1); color: var(--color-text-muted, #6b6b6b); font-weight: 600; font-size: .95rem; transition: background .15s ease, color .15s ease, border-color .15s ease; } .pp-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; background: rgba(0, 0, 0, .06); color: inherit; } .pp-step.is-current { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-50, #eaf6ef); } .pp-step.is-current .pp-num { background: var(--color-primary); color: #fff; } .pp-step.is-done { color: var(--color-success, #1c8a4e); border-color: color-mix(in srgb, var(--color-success, #1c8a4e) 40%, transparent); } .pp-step.is-done .pp-num { background: var(--color-success, #1c8a4e); color: #fff; } .pp-sep { width: 22px; height: 2px; background: rgba(0, 0, 0, .12); border-radius: 2px; } @media (max-width: 560px) { .pp-label { display: none; } .pp-step { padding: 6px; } .pp-sep { width: 14px; } } /* Step header: numbered badge + title */ .picker-head { display: flex; align-items: center; gap: 14px; max-width: 1080px; margin: 0 auto clamp(16px, 3vw, 28px); } .picker-step-num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, var(--color-primary))); box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.15)); } .picker-title { margin: 0; font-size: clamp(1.3rem, 3.5vw, 1.9rem); line-height: 1.2; } .picker-sub { margin: 2px 0 0; color: var(--color-text-muted, #6b6b6b); font-size: .95rem; } .chosen-cat { font-weight: 700; color: var(--color-primary); } .picker-change { color: var(--color-primary); text-decoration: underline; cursor: pointer; } /* Selectable category tiles */ .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); max-width: 1080px; margin: 0 auto; } .category-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: clamp(20px, 3vw, 34px) clamp(14px, 2vw, 22px); background: var(--color-surface, #fff); border: 2px solid rgba(0, 0, 0, .08); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; font-family: inherit; color: inherit; min-height: 100%; } .category-tile:hover, .category-tile:focus-visible { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: 0 10px 26px rgba(0, 0, 0, .12); outline: none; } .category-tile.is-selected { border-color: var(--color-primary); background: var(--color-primary-50, #eaf6ef); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 10px 26px rgba(0,0,0,.12); } .category-icon { font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; } .category-name { font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 800; color: var(--color-primary); } .category-desc { font-size: .9rem; color: var(--color-text-muted, #6b6b6b); line-height: 1.6; } .category-check { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; transform: scale(0); transition: transform .15s ease; } .category-tile.is-selected .category-check { transform: scale(1); } /* Step 2 reveal */ .picker-step2 { margin-top: clamp(28px, 5vw, 52px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid rgba(0, 0, 0, .08); animation: wpgmcReveal .35s ease both; } .picker-step2[hidden] { display: none; } @keyframes wpgmcReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Difficulty pills */ .difficulty-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1080px; margin: 0 auto clamp(20px, 3vw, 32px); } .diff-pill { min-height: 46px; padding: 0 clamp(18px, 4vw, 30px); border-radius: 999px; border: 2px solid var(--color-primary); background: transparent; color: var(--color-primary); font-family: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease; } .diff-pill:hover { transform: translateY(-2px); } .diff-pill.is-active { background: var(--color-primary); color: #fff; } /* Selectable game-mode cards (Step 2) */ .mode-selectable { position: relative; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .mode-selectable:hover { transform: translateY(-3px); } .mode-selectable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .mode-selectable.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 10px 26px rgba(0, 0, 0, .12); } .mode-check { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; transform: scale(0); transition: transform .15s ease; } .mode-selectable.is-selected .mode-check { transform: scale(1); } /* Connected (joined) rendering of a fully-solved word. Hidden until the word's letters are all known; then the per-letter boxes are replaced by the real, properly-joined Arabic word. */ .cipher-word-joined { display: none; /* Qur'anic / classical Naskh face so the completed word reads like script. */ font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Traditional Arabic', serif; font-weight: 400; font-size: 2.4rem; line-height: 2.35; color: var(--color-success, #1c8a4e); padding: 2px 8px; white-space: nowrap; animation: wpgmcJoinIn .25s ease both; } /* English words keep the UI font (Amiri Quran is Arabic-only). */ [dir="ltr"] .cipher-word-joined { font-family: var(--font-primary, inherit); font-weight: 700; } /* The revealed verse/Hadith on the completion & game-over screens uses the same Qur'anic face (Arabic UI only). */ .wpgmc-rtl #final-quote, .wpgmc-rtl #gameover-quote { font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif; font-size: 1.65rem; line-height: 2.2; } .cipher-word.is-solved { align-self: center; } .cipher-word.is-solved .cipher-cell { display: none; } .cipher-word.is-solved .cipher-word-joined { display: inline-block; } @keyframes wpgmcJoinIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ AUTH SCREENS (sign up / log in) — professional redesign ============================================ */ .auth-screen { min-height: calc(100vh - 220px); display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px, 5vw, 56px) 16px; } .auth-card { width: 100%; max-width: 440px; background: var(--color-surface, #fff); border: 1px solid rgba(0, 0, 0, .06); border-radius: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .12); padding: clamp(22px, 4vw, 36px); } .auth-card-head { text-align: center; margin-bottom: 22px; } .auth-bismillah { display: block; font-size: 2.2rem; color: var(--color-primary); line-height: 1; margin-bottom: 8px; } .auth-card .auth-title { font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 800; margin: 0 0 4px; color: var(--color-text, #1a1a1a); } .auth-subtitle { margin: 0; color: var(--color-text-muted, #6b6b6b); font-size: .95rem; line-height: 1.6; } /* Social buttons */ .auth-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid rgba(0, 0, 0, .14); transition: transform .12s ease, box-shadow .15s ease, background .15s ease; } .social-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); } .social-btn-google { background: #fff; color: #1f1f1f; } .social-btn-apple { background: #000; color: #fff; border-color: #000; } .social-ic { display: inline-flex; align-items: center; } /* Divider */ .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted, #9a9a9a); font-size: .82rem; margin: 8px 0 18px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, .1); } /* Errors */ .auth-card .auth-errors { background: #fdecea; border: 1px solid #f5c6cb; color: #a12622; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: .9rem; } .auth-card .auth-errors p { margin: 2px 0; } /* Form */ .auth-card .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-field { display: flex; flex-direction: column; gap: 6px; } .auth-card .auth-label { font-size: .85rem; font-weight: 700; color: var(--color-text, #333); } .auth-card .auth-input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 1.5px solid rgba(0, 0, 0, .16); border-radius: 12px; font-size: 1rem; font-family: inherit; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .auth-card .auth-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .auth-password { position: relative; display: flex; } .auth-password .auth-input { padding-inline-end: 46px; } .auth-toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; font-size: 1.05rem; opacity: .55; border-radius: 8px; } .auth-toggle.is-on, .auth-toggle:hover { opacity: 1; } .auth-card .auth-submit { margin-top: 6px; width: 100%; min-height: 50px; font-size: 1.05rem; } .auth-alt { text-align: center; margin: 18px 0 0; color: var(--color-text-muted, #6b6b6b); font-size: .92rem; } .auth-alt a { color: var(--color-primary); font-weight: 700; text-decoration: none; } .auth-alt a:hover { text-decoration: underline; } /* ============================================ TEAM VS TEAM feature page ============================================ */ .team-hero { text-align: center; color: #fff; background: linear-gradient(135deg, var(--color-primary, #10b981), #0e7490); padding: clamp(36px, 7vw, 72px) 16px; } .team-badge { display: inline-block; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .5px; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; } .team-hero-icon { font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; margin-bottom: 10px; } .team-title { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; margin: 0 0 10px; } .team-lead { max-width: 640px; margin: 0 auto 22px; font-size: 1.05rem; line-height: 1.7; opacity: .95; } .team-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-outline-light { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .8); border-radius: 999px; padding: 12px 26px; font-weight: 700; text-decoration: none; } .btn-outline-light:hover { background: rgba(255, 255, 255, .14); } .team-note { max-width: 760px; margin: clamp(20px, 4vw, 32px) auto 0; text-align: center; color: var(--color-text-muted, #6b6b6b); line-height: 1.7; } /* The "how it works" tiles are presentational here, not selectable. */ .team-section ~ * .category-tile[aria-disabled="true"], .picker .category-tile[aria-disabled="true"] { cursor: default; } .picker .category-tile[aria-disabled="true"]:hover { transform: none; border-color: rgba(0, 0, 0, .08); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); } /* ===== Team vs Team lobby + room ===== */ .team-hero-sm { padding-block: clamp(28px, 5vw, 48px); } /* Lobby: how-it-works beside the create/join card */ .team-lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 4vw, 40px); max-width: 980px; margin: 0 auto; align-items: start; } .team-steps-title { margin: 0 0 14px; font-size: 1.3rem; } .team-steps-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .team-steps-list li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; } .ts-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--color-primary), #0e7490); } .team-secure-note { display: flex; gap: 8px; align-items: flex-start; background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); border-radius: 12px; padding: 12px 14px; font-size: .85rem; line-height: 1.6; color: var(--color-text, #333); } .team-field-row { display: flex; gap: 12px; } .team-field-row .auth-field { flex: 1; } .team-cta { width: 100%; min-height: 50px; margin-top: 6px; } .team-code-input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; font-size: 1.2rem; } /* Share / copy */ .team-share { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .team-copy.is-copied { background: var(--color-success, #16a34a); color: #fff; border-color: var(--color-success, #16a34a); } @media (max-width: 760px) { .team-lobby-grid { grid-template-columns: 1fr; } .team-steps { order: 2; } } .team-lobby-card { max-width: 460px; margin: 0 auto; background: var(--color-surface, #fff); border: 1px solid rgba(0,0,0,.07); border-radius: 18px; box-shadow: 0 16px 44px rgba(0,0,0,.1); padding: clamp(18px, 4vw, 30px); } .team-tabs { display: flex; gap: 6px; background: rgba(0,0,0,.05); border-radius: 999px; padding: 4px; margin-bottom: 18px; } .team-tab { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 999px; font-weight: 700; font-family: inherit; cursor: pointer; color: var(--color-text-muted, #666); } .team-tab.active { background: var(--color-primary); color: #fff; } .team-panel { display: flex; flex-direction: column; gap: 14px; } .team-roomcode { text-align: center; margin: 0 auto 18px; background: var(--color-surface, #fff); border: 1px dashed var(--color-primary); border-radius: 12px; padding: 10px 18px; max-width: 320px; } .team-roomcode span { display: block; font-size: .8rem; color: var(--color-text-muted, #777); } .team-roomcode strong { font-size: 1.8rem; letter-spacing: .25em; color: var(--color-primary); } .team-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; margin: 0 auto; } .team-column { background: var(--color-surface, #fff); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 14px; } .team-column-a { border-top: 3px solid #2563eb; } .team-column-b { border-top: 3px solid #dc2626; } .team-column h3 { margin: 0 0 10px; text-align: center; } .team-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .team-player-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0,0,0,.03); border-radius: 8px; padding: 8px 10px; } .team-player-item.player-me { outline: 2px solid var(--color-primary); } .player-badges { display: flex; gap: 4px; } .badge-host, .badge-ready { font-size: .7rem; padding: 2px 8px; border-radius: 999px; color: #fff; } .badge-host { background: #b45309; } .badge-ready { background: var(--color-success, #16a34a); } .team-room-status { text-align: center; color: var(--color-text-muted, #666); margin: 0 0 14px; } .team-room-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .team-progress { max-width: 720px; margin: 0 auto 18px; display: flex; flex-direction: column; gap: 8px; } .team-progress-row { display: flex; align-items: center; gap: 10px; } .team-progress-label { min-width: 110px; font-weight: 700; font-size: .9rem; } .team-progress-bar { flex: 1; height: 14px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; } .team-progress-fill { height: 100%; width: 0; transition: width .3s ease; } .team-fill-a { background: #2563eb; } .team-fill-b { background: #dc2626; } .team-results-card { max-width: 460px; margin: 0 auto; text-align: center; background: var(--color-surface, #fff); border-radius: 18px; box-shadow: 0 16px 44px rgba(0,0,0,.1); padding: clamp(20px, 4vw, 34px); } .team-results-scores { display: flex; justify-content: center; gap: 24px; margin: 18px 0; } .team-result { display: flex; flex-direction: column; gap: 4px; } .team-result strong { font-size: 2rem; } .team-result-a strong { color: #2563eb; } .team-result-b strong { color: #dc2626; } .team-results-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } @media (max-width: 560px) { .team-columns { grid-template-columns: 1fr; } .team-progress-label { min-width: 84px; } } /* ===== Tafsir + Asbab al-Nuzul on the result screens ===== */ .tafsir-section { margin: 16px auto 6px; max-width: 640px; text-align: start; display: flex; flex-direction: column; } /* Show al-Tafsir al-Muyassar first, then al-Sa'di, then the reason-for-revelation. */ .tafsir-section [id$="-tafsir2"] { order: -1; } .tafsir-section [id$="-sabab"] { order: 1; } .tafsir-block { background: var(--color-primary-50, #e7f7ef); border-inline-start: 4px solid var(--color-primary); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .sabab-block { background: #fff8e9; border-inline-start-color: var(--color-secondary, #c79a4e); } .tafsir-heading { margin: 0 0 8px; font-size: 1rem; font-weight: 800; color: var(--color-primary-dark, #0a7c57); } .sabab-block .tafsir-heading { color: var(--color-secondary-dark, #a87d33); } .tafsir-text { margin: 0 0 6px; line-height: 2; font-size: 1.08rem; font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif; color: var(--color-text, #2d2a24); } /* English tafsir: normal reading font, left-aligned, comfortable line height. */ .tafsir-text-en { font-family: 'Amiri', Georgia, 'Times New Roman', serif; text-align: left; line-height: 1.75; font-size: 1.02rem; } /* Original Arabic ayah shown under the English translation (Qur'anic script). */ .ayah-original { margin: 10px 0 4px; font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Traditional Arabic', serif; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 2.3; text-align: center; direction: rtl; color: var(--color-primary-deep, #0e7490); } .tafsir-ref { display: block; font-size: .85rem; color: var(--color-text-muted, #6b6560); font-style: normal; } /* ===== Repeated-symbol indicators (cryptogram aid) ===== */ .cipher-cell { position: relative; } /* Subtle, always-on dot under symbols that appear more than once. */ .cipher-cell.cipher-repeats .cell-number { position: relative; } .cipher-cell.cipher-repeats .cell-number::after { content: ""; position: absolute; inset-inline-end: -7px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--color-secondary, #c79a4e); opacity: .85; } /* When a cell is selected, every other cell with the same symbol lights up. */ .cipher-cell.is-same-symbol .cell-letter { background: var(--color-primary-50, #e7f7ef); border-bottom-color: var(--color-primary); border-radius: 4px 4px 0 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 28%, transparent); } .cipher-cell.is-same-symbol .cell-number { color: var(--color-primary); font-weight: 700; } /* "×N" badge on the selected cell when its symbol repeats. */ .cipher-repeat-badge { position: absolute; top: -9px; inset-inline-end: -9px; background: var(--color-secondary, #c79a4e); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); pointer-events: none; animation: wpgmcBadgePop .18s ease both; } @keyframes wpgmcBadgePop { from { transform: scale(0); } to { transform: scale(1); } } /* ===== Thakey geometric ornament (replaces the Bismillah chrome) ===== */ .thk-ornament { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 22px); line-height: 1; color: var(--thk-gold, #C8A24C); margin: 0 auto; max-width: 420px; } .thk-ornament .thk-orn-rule { flex: 1 1 auto; max-width: 150px; height: 1px; background: linear-gradient(90deg, transparent, currentColor 80%); opacity: 0.5; } .thk-ornament .thk-orn-rule:last-child { background: linear-gradient(90deg, currentColor 20%, transparent); } .thk-ornament .thk-orn-star { flex: 0 0 auto; color: var(--thk-gold, #C8A24C); filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); } /* Reduced-motion users get no animated ornaments (none animate here anyway). */ @media (prefers-reduced-motion: reduce) { .thk-ornament .thk-orn-star { filter: none; } } /* ===== Brand logo mark (Thakey lockup) ===== */ .logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .logo-mark { display: inline-flex; line-height: 0; } .logo-mark svg { display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28)); } .logo-lockup { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1; text-align: center; } .logo-text { letter-spacing: .2px; } .logo-wordmark { font-family: 'Sora', var(--font-display, serif); font-weight: 700; font-size: 1.32rem; letter-spacing: 3px; color: var(--thk-cream, #F2ECDD); } /* Arabic brand wordmark (ذكي) — Arabic display font, no Latin letter-spacing. Tight, centred metrics so it sits level with the mark (Arabic faces carry extra space above the glyph, which otherwise makes the word look low). */ .logo-wordmark-ar { font-family: 'Cairo', 'Tajawal', var(--font-display, sans-serif); font-weight: 700; font-size: 1.42rem; letter-spacing: 0; line-height: 1; margin-top: -5px; /* lift ذكي higher */ margin-bottom: 9px; /* more breathing room above the subtitle */ } .logo-subtitle { font-family: 'Cairo', var(--font-primary, sans-serif); font-weight: 600; font-size: .8rem; letter-spacing: .3px; line-height: 1.1; color: var(--thk-gold, #C8A24C); margin-top: 0; } /* ============================================ LARGE-SCREEN / TV / CAST SCALING When the game is cast to a TV (Chromecast/HDMI) or shown on a big monitor, scale type, spacing, the board and keyboard up so it reads clearly from a distance. Driven by root font-size (rem-based UI scales automatically) plus explicit sizing for the px-based board/keyboard. ============================================ */ /* Large desktop / starts the scale-up. */ @media (min-width: 1400px) { html { font-size: 20px; } .container { max-width: 1240px; } .cipher-cell { width: 46px; } .cell-letter { width: 42px; height: 42px; font-size: 1.45rem; } .cell-number { font-size: 1rem; } .key { width: 56px; height: 70px; } .key-letter { font-size: 1.25rem; } .cipher-word-joined { font-size: 2.6rem; } } /* HDMI / 1080p TVs and big monitors — go large. */ @media (min-width: 1700px) { html { font-size: 25px; } .container { max-width: 1500px; } .game-section .container, .team-room .container { max-width: 1600px; } .cipher-cell { width: 64px; } .cell-letter { width: 58px; height: 58px; font-size: 2rem; } .cell-number { font-size: 1.25rem; } .key { width: 82px; height: 102px; border-radius: 12px; } .key-letter { font-size: 1.7rem; } .key-number { font-size: .9rem; } .cipher-word-joined { font-size: 3.6rem; } .game-timer { font-size: 2rem; } } /* Big / 4K TVs — very large, readable across a room. */ @media (min-width: 2300px) { html { font-size: 32px; } .container { max-width: 2100px; } .game-section .container, .team-room .container { max-width: 2200px; } .cipher-cell { width: 88px; } .cell-letter { width: 80px; height: 80px; font-size: 2.7rem; } .cell-number { font-size: 1.6rem; } .key { width: 112px; height: 138px; } .key-letter { font-size: 2.3rem; } .cipher-word-joined { font-size: 5rem; } } /* TV-optimised scaler: any wide landscape display ≥1280 (Chromecast/HDMI/full screen) gets fluid, screen-relative sizing so the board and keyboard fill the TV and read from across a room. Comes last so it wins on 16:9 screens; capped so 4K stays sensible. */ @media (min-width: 1280px) and (min-aspect-ratio: 16/9) { .cipher-display { padding: clamp(24px, 2.4vw, 52px); gap: clamp(8px, .8vw, 18px) clamp(12px, 1.4vw, 28px); } .cipher-cell { width: clamp(46px, 3.6vw, 110px); } .cell-letter { width: clamp(42px, 3.2vw, 100px); height: clamp(42px, 3.2vw, 100px); font-size: clamp(1.45rem, 2.2vw, 3rem); } .cell-number { font-size: clamp(1rem, 1.1vw, 1.7rem); } .key { width: clamp(56px, 4.4vw, 140px); height: clamp(70px, 5.4vw, 172px); border-radius: 12px; } .key-letter { font-size: clamp(1.25rem, 1.8vw, 2.6rem); } .key-number { font-size: clamp(.7rem, .8vw, 1.2rem); } .keyboard { gap: clamp(6px, .6vw, 14px); } .keyboard-row { gap: clamp(6px, .6vw, 14px); } .cipher-word-joined { font-size: clamp(2.6rem, 3.6vw, 5rem); } .game-timer { font-size: clamp(1.6rem, 2vw, 3rem); } .puzzle-source { font-size: clamp(1.1rem, 1.4vw, 2rem); } } /* ===== Premium in-room (waiting / match / results) ===== */ .team-room .container { max-width: 1100px; } .team-roomcode { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep, #0e7490)); color: #fff; border: 0; border-radius: 16px; padding: 14px 22px; margin: 0 auto 22px; max-width: 560px; box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.12)); } .team-roomcode span { color: rgba(255,255,255,.85); font-size: .85rem; } .team-roomcode strong { color: #fff; font-size: 1.9rem; letter-spacing: .28em; } .team-roomcode .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); } .team-roomcode .btn-outline:hover { background: rgba(255,255,255,.16); } .team-room .game-header { align-items: center; } .team-difficulty-badge, #team-difficulty-badge { background: var(--color-primary-50, #e7f7ef); color: var(--color-primary-dark, #0a7c57); padding: 4px 12px; border-radius: 999px; font-weight: 700; } .team-progress-bar { height: 18px; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); } .team-result.is-winner { transform: scale(1.06); } .team-results-title { font-size: clamp(1.4rem, 4vw, 2rem); } /* ===== Premium Team lobby ===== */ .team-hero-lobby { padding-bottom: clamp(72px, 12vw, 130px); } .team-lobby-section { padding: 0 16px clamp(40px, 6vw, 70px); } .team-lobby-wrap { max-width: 940px; margin: clamp(-110px, -11vw, -80px) auto 0; background: var(--color-surface, #fff); border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .18); overflow: hidden; } .team-lobby-wrap .team-lobby-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 0; max-width: none; margin: 0; align-items: stretch; } .team-lobby-side { background: linear-gradient(160deg, var(--color-primary, #10b981), #0e7490); color: #fff; padding: clamp(24px, 3.2vw, 40px); display: flex; flex-direction: column; gap: 16px; } .team-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; } .team-vs-side { width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .28); } .team-vs-a { background: #2563eb; } .team-vs-b { background: #dc2626; } .team-vs-badge { font-weight: 800; font-size: .85rem; letter-spacing: 1px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45); padding: 7px 13px; border-radius: 999px; } .team-side-title { margin: 0; font-size: 1.25rem; color: #fff; } .team-lobby-side .team-steps-list { margin: 0; gap: 11px; } .team-lobby-side .team-steps-list li { color: rgba(255, 255, 255, .96); line-height: 1.55; } .team-lobby-side .ts-num { background: rgba(255, 255, 255, .22); color: #fff; } .team-lobby-side .team-secure-note { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .96); margin-top: auto; } .team-lobby-main { padding: clamp(24px, 3.2vw, 40px); display: flex; flex-direction: column; } .team-lobby-main .team-tabs { margin-bottom: 20px; } .team-lobby-main .team-panel { gap: 16px; } @media (max-width: 760px) { .team-lobby-wrap .team-lobby-grid { grid-template-columns: 1fr; } .team-lobby-wrap { margin-top: clamp(-64px, -13vw, -44px); } } /* The single, prominent Start button */ .picker-start { text-align: center; margin-top: clamp(22px, 4vw, 36px); } .btn-start { min-width: 240px; font-size: 1.15rem; box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 35%, transparent); } .btn-start:hover { transform: translateY(-2px); } /* Tablet / phone reflow */ @media (max-width: 760px) { .category-grid { grid-template-columns: 1fr; } .picker-head { gap: 10px; } .btn-start { width: 100%; min-width: 0; } }