/* ================================ DESIGN TOKENS (Dark default + Light override) ================================ */ :root { /* Page + surface elevation. Use these instead of hardcoded rgbas. */ --bg-page: #050514; --bg-surface-1: rgba(255, 255, 255, 0.03); --bg-surface-2: rgba(255, 255, 255, 0.05); --bg-surface-3: rgba(255, 255, 255, 0.08); --bg-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); /* Borders. */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.2); /* Text. */ --text-primary: #f3f4f6; --text-secondary: #cbd5e1; --text-muted: #9ca3af; --text-faint: #6b7280; /* Accents - the indigo→pink identity stays the same in both themes. */ --accent-from: #6366f1; --accent-to: #ec4899; --accent-warm: #fbbf24; --accent-success: #22c55e; --accent-danger: #ef4444; --accent-info: #818cf8; --gradient-primary: linear-gradient(135deg, var(--accent-from), var(--accent-to)); /* Shadows. */ --shadow-card: 0 8px 22px rgba(0, 0, 0, 0.35); --shadow-card-lg: 0 12px 28px rgba(0, 0, 0, 0.45); --shadow-card-glow: 0 10px 30px rgba(0, 0, 0, 0.35); /* ---- Legacy aliases (kept so existing CSS keeps rendering). ---- */ --background-color: var(--bg-page); --primary-color: var(--bg-surface-2); --accent-color: var(--accent-from); --accent-color-dark: var(--accent-to); --text-color: var(--text-primary); --subtext-color: var(--text-secondary); --input-bg-color: var(--bg-surface-3); --input-border-color: var(--border-default); --button-bg-color: var(--accent-success); --button-hover-bg-color: #16a34a; --shadow-color: rgba(0, 0, 0, 0.45); --word-box-bg: transparent; } /* Light theme - applied via `data-theme="light"` on the or . */ [data-theme="light"] { --bg-page: #f7f8fb; --bg-surface-1: rgba(15, 23, 42, 0.03); --bg-surface-2: rgba(15, 23, 42, 0.05); --bg-surface-3: rgba(15, 23, 42, 0.08); --bg-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)); --border-subtle: rgba(15, 23, 42, 0.08); --border-default: rgba(15, 23, 42, 0.14); --border-strong: rgba(15, 23, 42, 0.22); --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-faint: #94a3b8; /* Accents stay; light theme just gets softer brand glow. */ --accent-warm: #d97706; --shadow-card: 0 8px 22px rgba(15, 23, 42, 0.08); --shadow-card-lg: 0 12px 28px rgba(15, 23, 42, 0.14); --shadow-card-glow: 0 10px 30px rgba(99, 102, 241, 0.18); } /* Old `.theme-light` selector still works for any place that toggled it by JS (legacy). */ .theme-light { color-scheme: light; } /* ================================ GLOBAL STYLES & LAYOUT ================================ */ body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; background-color: var(--background-color); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; } .main-container { width: 100%; margin: 0 auto; /* Reserve room at the bottom so the fixed keyboard never covers the "Show next hint" button. The reserve matches the keyboard's actual height (3 rows + gaps + container padding + safe-area inset). */ --keyboard-area: calc( 3 * clamp(2.6rem, 6.5vw + 1.2rem, 3.2rem) + 2 * 0.4rem + 1.2rem + env(safe-area-inset-bottom, 0px) ); min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: var(--keyboard-area); box-sizing: border-box; } /* ================================ GAME CONTAINER (flex column - sentence grows, hints stay pinned) ================================ */ .game-container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 100%; margin: 0 auto; text-align: center; } /* ================================ DECRYPT SENTENCE SECTION Fluid cell sizing: clamp() picks a width that fits both small phones (2.0rem) and long phrases (≥1.5rem). Cells no longer get shrunk to illegible sizes by the old media query. ================================ */ :root { --cell-size: clamp(1.7rem, 4.2vw + 0.4rem, 2.4rem); --cell-font: clamp(0.95rem, 2.3vw + 0.3rem, 1.25rem); --cell-label-font: clamp(0.65rem, 1.6vw + 0.3rem, 0.85rem); --cell-gap: clamp(0.15rem, 0.6vw, 0.35rem); --word-column-gap: clamp(1.1rem, 4.5vw, 2.2rem); --word-row-gap: clamp(0.4rem, 1.4vw, 0.9rem); } .decrypt-sentence { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: var(--word-column-gap); row-gap: var(--word-row-gap); padding: 0.6rem 0.4rem 1rem; overflow-y: auto; overflow-x: hidden; width: 100%; /* Don't grow into empty space - take the natural content height. The hint section sits right below. If the sentence is too tall for the remaining space, this area shrinks first (flex-shrink: 1) and the internal scroll handles the overflow. */ flex: 0 1 auto; min-height: 0; } .word-box { display: inline-flex; flex-wrap: nowrap; gap: var(--cell-gap); background-color: var(--word-box-bg); margin: 0; position: relative; } /* Small dot between adjacent words on the same row (acts as a typographic separator without taking layout space). */ .word-box + .word-box::before { content: ""; position: absolute; left: calc(-1 * var(--word-column-gap) / 2); top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transform: translate(-50%, -50%); pointer-events: none; } .letter-box { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; } .letter-input { width: var(--cell-size); height: calc(var(--cell-size) * 1.25); text-align: center; font-size: var(--cell-font); font-weight: 700; background: rgba(255, 255, 255, 0.04); color: #f3f4f6; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0.5rem; transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease; padding: 0; line-height: 1; box-shadow: inset 0 -2px 0 transparent; } .letter-input.empty { box-shadow: inset 0 -2px 0 var(--accent-color); } .letter-input.hint { background: linear-gradient(140deg, rgba(99, 102, 241, 0.25), rgba(99, 102, 241, 0.08)); color: #c7d2fe; border-color: rgba(99, 102, 241, 0.35); pointer-events: none; box-shadow: none; } /* Strong focus state: distinct gradient background, thick glowing border, and a subtle pulse so your eye can find the active cell in long phrases. */ .letter-input.focus, .letter-input:focus { outline: none; border: 2px solid #fbbf24; background: linear-gradient(140deg, rgba(251, 191, 36, 0.28), rgba(236, 72, 153, 0.22)); color: #fff7e6; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35), 0 0 14px rgba(251, 191, 36, 0.55); } /* The cell the caret is on - even stronger: bright amber with pulsing aura. */ .letter-input.focus-main, .letter-input.focus-main:focus { outline: none; border: 2px solid #fbbf24; background: linear-gradient(140deg, #f97316, #ec4899); color: #fff; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.55), 0 0 18px rgba(251, 191, 36, 0.75); animation: focus-pulse 1.4s ease-in-out infinite; z-index: 1; } @keyframes focus-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.55), 0 0 18px rgba(251, 191, 36, 0.75); } 50% { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.7), 0 0 26px rgba(251, 191, 36, 0.95); } } .letter-input.duplicate { color: #f9a8d4; border-color: rgba(244, 114, 182, 0.45); } .letter-input-nofill { width: var(--cell-size); height: calc(var(--cell-size) * 1.25); display: flex; align-items: center; justify-content: center; font-size: var(--cell-font); color: #6b7280; } .label-crypted { font-size: var(--cell-label-font); color: #9ca3af; font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; } /* ================================ DECRYPT HINTS SECTION ================================ */ .decrypt-hints { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.5rem 0.6rem; /* Hints area never shrinks - the sentence list scrolls instead. */ flex-shrink: 0; } .hint-item { background: linear-gradient(140deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.06); padding: 0.6rem 0.85rem; border-radius: 0.85rem; display: flex; align-items: center; gap: 0.75rem; color: #e5e7eb; font-size: 0.9rem; text-align: left; min-height: 2.5rem; } .hint-item img { border-radius: 0.6rem; max-height: 3.5rem; width: auto; } /* Toolbar above the keyboard - hot actions on the left, Tip on the right. */ .decrypt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; } .decrypt-toolbar__actions { display: inline-flex; gap: 0.4rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 0.2rem; } /* Compact icon-only button used for clear/auto-jump and similar hot actions. */ .hot-btn { appearance: none; width: 2.1rem; height: 2.1rem; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: #d1d5db; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; } .hot-btn svg { width: 1.05rem; height: 1.05rem; } .hot-btn:hover { background: rgba(255, 255, 255, 0.08); color: #f3f4f6; } .hot-btn:active { transform: scale(0.92); } .hot-btn--active { background: linear-gradient(135deg, #6366f1, #ec4899); color: #fff; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35); } .hot-btn--active:hover { color: #fff; } /* Tiny Tip button - just the label + optional ad chip. */ .tip-btn { appearance: none; border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 700; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(0, 0, 0, 0.4); transition: filter 0.15s ease, transform 0.1s ease; min-height: 2.1rem; } .tip-btn[disabled] { cursor: progress; filter: saturate(0.5); } .tip-btn:hover { filter: brightness(1.08); } .tip-btn:active { transform: scale(0.95); } .tip-btn--free { background: linear-gradient(135deg, #22c55e, #10b981); } .tip-btn--ad { background: linear-gradient(135deg, #6366f1, #ec4899); } .tip-btn__icon { width: 0.9rem; height: 0.9rem; opacity: 0.95; } .tip-btn__label { letter-spacing: 0.02em; } .tip-btn__spinner { width: 0.95rem; height: 0.95rem; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: tip-spin 0.8s linear infinite; } @keyframes tip-spin { to { transform: rotate(360deg); } } /* ================================ RESPONSIVE DESIGN ================================ */ /* Cell sizing is now handled by clamp() above; no fixed-pixel overrides. */ @media (max-width: 480px) { .game-container { padding-left: 4px; padding-right: 4px; } .decrypt-more-hints button { padding: 6px 10px; font-size: 0.85rem; } } /* Modal Overlay */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.3s ease; } /* Modal Content Container */ .modal-content { background-color: var(--primary-color); /* Dark container background */ border-radius: 8px; padding: 20px; width: 90%; max-width: 500px; box-shadow: 0 4px 8px var(--shadow-color); position: relative; text-align: center; } /* Close Button */ .close-btn { position: absolute; top: 10px; right: 10px; font-size: 1.5rem; font-weight: bold; cursor: pointer; color: var(--text-color); transition: color 0.3s ease; } .close-btn:hover { color: var(--accent-color); } /* Modal Header & Message */ .modal-content h3 { margin-top: 0; color: var(--accent-color); } .modal-content p { color: var(--subtext-color); margin-bottom: 20px; } /* Optional Child Content */ .modal-children { margin: 20px 0; } /* Modal Actions Container */ .modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } /* Action Buttons */ .modal-btn { background-color: var(--accent-color); color: var(--text-color); border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .modal-btn:hover { background-color: var(--button-hover-bg-color); } .modal-btn.off { background-color: var(--background-color); } /* Styling for the level image */ .menu-image { width: 50px; height: 50px; border-radius: 8px; margin-right: 15px; } /* Styling for the level title */ .menu-title { font-size: 18px; font-weight: bold; color: var(--text-color); flex: 1; } /* Container for the whole level select page */ .level-select-container { display: flex; flex-direction: column; gap: 15px; padding: 20px; max-width: 600px; /* Adjust as needed */ margin: auto; } /* Base styling for level cards */ .finishedLevel, .unfinishedLevel { display: flex; flex-direction: row; background-color: var(--primary-color); border-radius: 8px; overflow: hidden; /* Ensures the image and content are neatly clipped */ cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease; min-height: 100px; /* Adjust for desired card height */ } /* Glow effect for finished levels */ .finishedLevel { box-shadow: 0 0 10px var(--accent-color); } /* Hover effect for both card types */ .finishedLevel:hover, .unfinishedLevel:hover { transform: scale(1.02); } /* Locked level: same styling as unfinished but non-interactive */ .locked { display: flex; flex-direction: row; background-color: var(--primary-color); border-radius: 8px; overflow: hidden; min-height: 80px; padding: 12px; /* Disable pointer events so clicks and hover do nothing */ pointer-events: none; /* Optionally, reduce opacity to visually indicate the card is disabled */ opacity: 0.6; } /* Left image: fixed width and full height of the card */ .level-select-image { width: 80px; /* Set your fixed width */ /*height: 100%;*/ object-fit: cover; flex-shrink: 0; } /* Right side content area */ .level-select-content { display: flex; flex-direction: column; padding: 10px; flex: 1; justify-content: space-between; } /* Row 1: Contains the title or phrase; occupies most vertical space */ .row1-level { flex-grow: 1; display: flex; align-items: center; } /* Level title/phrase styling */ .level-select-title { font-size: 1rem; font-weight: bold; color: var(--text-color); } .finishedLevel .level-select-title { font-style: italic; } /* Row 2: Contains the hints, aligned to the right */ .row2-level { display: flex; justify-content: flex-end; align-items: center; } /* Hints container */ .divHints { margin: 0; } /* Hint text styling: small, right-aligned */ .hint-text { font-size: 0.75rem; color: var(--subtext-color); margin: 0; padding: 0; text-align: right; font-style: italic; }