/* ================================================================ BRAIN BATTLE — Trivia Quiz Fonts: loaded via Google Fonts CDN (see index.html ) - Barlow Condensed: display/heading typeface - DM Sans: body/UI typeface - JetBrains Mono: monospace/numeric typeface Palette: Deep Obsidian · Electric Cyan · Hot Coral ================================================================ */ /* ═══════════════════════════════════════════════════════════════ ROOT DESIGN TOKENS ═══════════════════════════════════════════════════════════════ */ :root { --bg: #070810; --bg2: #0a0b15; --surface: #0e0d22; --panel: #11102a; --panel2: #0c0f20; --border: #1c1840; --border2: #252050; --accent: #c060ff; --accent-dim: rgba(192, 96, 255, 0.5); --accent-glow: rgba(192, 96, 255, 0.18); --accent-deep: rgba(192, 96, 255, 0.06); --accent2: #ff4d8a; --accent2-dim: rgba(255, 77, 138, 0.5); --accent2-glow: rgba(255, 77, 138, 0.18); --accent2-deep: rgba(255, 77, 138, 0.06); --gold: #ffcc44; --gold-glow: rgba(255, 204, 68, 0.22); /* unearned star — silver that reads on dark panels */ --star-off: #8f93a3; /* danger hover text — light red on dark themes; overridden to a dark red on light themes so it never turns white-on-tint */ --danger-hover-fg: #f87171; --green: #00e899; --text: #d0c8f4; --text-dim: #5040a0; --text-muted: #16123a; --r: 8px; --r2: 14px; --t: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --shadow-deep: 0 32px 80px rgba(0, 0, 0, 0.9); --overlay-bg: rgba(4, 6, 14, 0.88); --btn-fg: #ffffff; --btn2-fg: #ffffff; --ff-head: "Barlow Condensed", sans-serif; --ff-body: "DM Sans", sans-serif; --ff-mono: "JetBrains Mono", monospace; } /* ── Theme background images ─────────────────────────────────── Declared in style.css so each url() resolves relative to THIS stylesheet (../images → script/images). That works whether the app is served at the site root or under a subdirectory, and the value follows html[data-theme], which theme-init.js sets before first paint and ThemeSystem keeps in sync on every theme switch. */ html { --thm-bg-url: url("../images/cartoonic-background.jpg"); --thm-bg-url-css: url("../images/cartoonic-background.jpg"); } html[data-theme="magazine"] { --thm-bg-url: url("../images/magazine-background.jpg"); --thm-bg-url-css: url("../images/magazine-background.jpg"); } html[data-theme="purple"] { --thm-bg-url: url("../images/purple-background.jpg"); --thm-bg-url-css: url("../images/purple-background.jpg"); } html[data-theme="black"] { --thm-bg-url: url("../images/black-background.jpg"); --thm-bg-url-css: url("../images/black-background.jpg"); } html[data-theme="white"] { --thm-bg-url: url("../images/white-background.jpg"); --thm-bg-url-css: url("../images/white-background.jpg"); } /* ── Portrait background variants ────────────────────────────── The images above are wide (1920×1080); on a narrow/tall screen `background-size: cover` crops most of that width away, which cuts off the decorative corner shapes. Tall 1080×1920 portrait variants are not shipped; to add them later, drop e.g. cartoonic-background-portrait.jpg into script/images and swap the URLs below this comment inside a @media (max-aspect-ratio) block, keeping the fallback to the wide images otherwise. */ /* ── Theme overrides (4 lobby themes — lobby/popups only) ───── */ body[data-theme="purple"] { --bg: #0d0618; --bg2: #120a1f; --surface: #170d2b; --panel: #1a1030; --panel2: #130a24; --border: #2a1a4d; --border2: #3b2870; --accent: #a78bfa; --accent-dim: rgba(167, 139, 250, 0.5); --accent-glow: rgba(167, 139, 250, 0.18); --accent-deep: rgba(167, 139, 250, 0.06); --accent2: #e879f9; --accent2-dim: rgba(232, 121, 249, 0.5); --accent2-glow: rgba(232, 121, 249, 0.18); --accent2-deep: rgba(232, 121, 249, 0.06); --text: #ede9fe; --text-dim: #7c6bb8; --text-muted: #231543; --star-off: #8f93a8; } body[data-theme="black"] { --bg: #0a0a0a; --bg2: #101010; --surface: #151515; --panel: #191919; --panel2: #111111; --border: #262626; --border2: #333333; --accent: #e5e7eb; --accent-dim: rgba(229, 231, 235, 0.5); --accent-glow: rgba(229, 231, 235, 0.18); --accent-deep: rgba(229, 231, 235, 0.06); --accent2: #9ca3af; --accent2-dim: rgba(156, 163, 175, 0.5); --accent2-glow: rgba(156, 163, 175, 0.18); --accent2-deep: rgba(156, 163, 175, 0.06); --text: #f4f4f5; --text-dim: #6b7280; --text-muted: #1c1c1e; --star-off: #a1a1ad; --danger-hover-fg: #fca5a5; } /* ── White theme — white background image, pure black text, black-only ── Palette is pure black: black text, black accents, black elements. No gradients anywhere — every gradient-built surface is overridden to a solid color, and no overlay sits on top of the white background image. */ html[data-theme="white"], body[data-theme="white"] { --bg: #ffffff; --bg2: #ffffff; --surface: #f6f6f6; --panel: #ffffff; --panel2: #f1f1f1; --border: #e5e5e5; --border2: #d4d4d4; --accent: #000000; /* black only */ --accent-dim: rgba(0, 0, 0, 0.5); --accent-glow: rgba(0, 0, 0, 0.16); --accent-deep: rgba(0, 0, 0, 0.06); --accent2: #000000; /* black only */ --accent2-dim: rgba(0, 0, 0, 0.5); --accent2-glow: rgba(0, 0, 0, 0.18); --accent2-deep: rgba(0, 0, 0, 0.06); --text: #000000; /* pure black */ --text-dim: #3f3f46; --text-muted: #d4d4d8; --star-off: #a3a3ad; --danger-hover-fg: #b91c1c; /* deep emerald — mint #00e899 disappears on white */ --green: #047857; /* No overlay — the white background image shows through fully */ } /* ── Cartoonic theme — comic-book cream paper, red/blue ink, Bangers font ── Light theme like White (hardcoded white text is overridden below), but with a playful comic palette and the Bangers display font. */ html[data-theme="cartoonic"], body[data-theme="cartoonic"] { --bg: #fff1d6; --bg2: #ffedcf; --surface: #fff6e4; --panel: #fffdf5; --panel2: #fdeccd; --border: #e8d5ac; --border2: #d9c293; --accent: #d62828; --accent-dim: rgba(214, 40, 40, 0.5); --accent-glow: rgba(214, 40, 40, 0.18); --accent-deep: rgba(214, 40, 40, 0.06); --accent2: #1d5f9e; --accent2-dim: rgba(29, 95, 158, 0.5); --accent2-glow: rgba(29, 95, 158, 0.18); --accent2-deep: rgba(29, 95, 158, 0.06); --text: #221a10; --text-dim: #6f5b3d; --text-muted: #e6d3a9; --star-off: #b9ac90; --danger-hover-fg: #a61c1c; /* deep green — mint #00e899 disappears on cream paper */ --green: #15803d; /* Cartoonic display font */ --ff-head: "Bangers", "Barlow Condensed", sans-serif; --fr-font-display: "Bangers", "Bebas Neue", sans-serif; } /* ── Magazine theme — editorial ivory paper, burgundy/navy ink, serif font ── Light theme like White/Cartoonic (hardcoded white text is overridden below) with a print-magazine palette and Playfair Display headings. */ html[data-theme="magazine"], body[data-theme="magazine"] { --bg: #f6efe1; --bg2: #f0e6d2; --surface: #fcf8ef; --panel: #fffdf8; --panel2: #ece0c8; --border: #d9c9a8; --border2: #c2ac83; --accent: #7a2e1d; --accent-dim: rgba(122, 46, 29, 0.5); --accent-glow: rgba(122, 46, 29, 0.18); --accent-deep: rgba(122, 46, 29, 0.06); --accent2: #1f3a5f; --accent2-dim: rgba(31, 58, 95, 0.5); --accent2-glow: rgba(31, 58, 95, 0.18); --accent2-deep: rgba(31, 58, 95, 0.06); --text: #191510; --text-dim: #6a5d47; --text-muted: #d9c9a8; --star-off: #a89a7f; --danger-hover-fg: #8c2f1d; /* deep green — mint #00e899 disappears on ivory paper */ --green: #166534; /* Magazine display font */ --ff-head: "Playfair Display", "Barlow Condensed", serif; --fr-font-display: "Playfair Display", "Bebas Neue", serif; } /* Hardcoded white text → dark ink (readable on light themes) */ html[data-theme="white"] .lb-ew-txt, html[data-theme="cartoonic"] .lb-ew-txt, html[data-theme="magazine"] .lb-ew-txt, html[data-theme="white"] .lb-tag, html[data-theme="cartoonic"] .lb-tag, html[data-theme="magazine"] .lb-tag, html[data-theme="white"] .lb-select-btn:hover, html[data-theme="cartoonic"] .lb-select-btn:hover, html[data-theme="magazine"] .lb-select-btn:hover, html[data-theme="white"] .lb-icon-btn:hover, html[data-theme="cartoonic"] .lb-icon-btn:hover, html[data-theme="magazine"] .lb-icon-btn:hover, html[data-theme="white"] .fr-ov-back:hover, html[data-theme="cartoonic"] .fr-ov-back:hover, html[data-theme="magazine"] .fr-ov-back:hover, html[data-theme="white"] .fr-action-btn:hover, html[data-theme="cartoonic"] .fr-action-btn:hover, html[data-theme="magazine"] .fr-action-btn:hover, html[data-theme="white"] .lb-earn-ad-btn:hover, html[data-theme="cartoonic"] .lb-earn-ad-btn:hover, html[data-theme="magazine"] .lb-earn-ad-btn:hover, html[data-theme="white"] .tb-btn-primary:hover, html[data-theme="cartoonic"] .tb-btn-primary:hover, html[data-theme="magazine"] .tb-btn-primary:hover, html[data-theme="white"] .thm-back-btn:hover, html[data-theme="cartoonic"] .thm-back-btn:hover, html[data-theme="magazine"] .thm-back-btn:hover, html[data-theme="white"] .thm-subtitle, html[data-theme="cartoonic"] .thm-subtitle, html[data-theme="magazine"] .thm-subtitle, html[data-theme="white"] .thm-card-name, html[data-theme="cartoonic"] .thm-card-name, html[data-theme="magazine"] .thm-card-name, html[data-theme="white"] .thm-apply-btn:hover, html[data-theme="cartoonic"] .thm-apply-btn:hover, html[data-theme="magazine"] .thm-apply-btn:hover, html[data-theme="white"] .gfp-action-btn--danger:hover, html[data-theme="cartoonic"] .gfp-action-btn--danger:hover, html[data-theme="magazine"] .gfp-action-btn--danger:hover, html[data-theme="white"] .quiz-question, html[data-theme="cartoonic"] .quiz-question, html[data-theme="magazine"] .quiz-question, html[data-theme="white"] .lobby-title-flow, html[data-theme="cartoonic"] .lobby-title-flow, html[data-theme="magazine"] .lobby-title-flow, html[data-theme="white"] .fr-settings-row-lbl, html[data-theme="cartoonic"] .fr-settings-row-lbl, html[data-theme="magazine"] .fr-settings-row-lbl, html[data-theme="white"] .fr-shop-item-name, html[data-theme="cartoonic"] .fr-shop-item-name, html[data-theme="magazine"] .fr-shop-item-name, html[data-theme="white"] .tb-row-lbl, html[data-theme="cartoonic"] .tb-row-lbl, html[data-theme="magazine"] .tb-row-lbl, html[data-theme="white"] .thm-dot--active .thm-dot-label, html[data-theme="cartoonic"] .thm-dot--active .thm-dot-label, html[data-theme="magazine"] .thm-dot--active .thm-dot-label, html[data-theme="white"] .coin-count, html[data-theme="cartoonic"] .coin-count, html[data-theme="magazine"] .coin-count { color: var(--text); } /* Medium emphasis text */ html[data-theme="white"] .lb-diff-row, html[data-theme="cartoonic"] .lb-diff-row, html[data-theme="magazine"] .lb-diff-row, html[data-theme="white"] .fr-panel-sub, html[data-theme="cartoonic"] .fr-panel-sub, html[data-theme="magazine"] .fr-panel-sub, html[data-theme="white"] .fr-rs-lbl, html[data-theme="cartoonic"] .fr-rs-lbl, html[data-theme="magazine"] .fr-rs-lbl, html[data-theme="white"] .fr-settings-row-sub, html[data-theme="cartoonic"] .fr-settings-row-sub, html[data-theme="magazine"] .fr-settings-row-sub, html[data-theme="white"] .fr-shop-item-desc, html[data-theme="cartoonic"] .fr-shop-item-desc, html[data-theme="magazine"] .fr-shop-item-desc, html[data-theme="white"] .fr-shop-balance-bar, html[data-theme="cartoonic"] .fr-shop-balance-bar, html[data-theme="magazine"] .fr-shop-balance-bar, html[data-theme="white"] .tb-modal-close, html[data-theme="cartoonic"] .tb-modal-close, html[data-theme="magazine"] .tb-modal-close, html[data-theme="white"] .tb-color-lbl, html[data-theme="cartoonic"] .tb-color-lbl, html[data-theme="magazine"] .tb-color-lbl, html[data-theme="white"] .tb-color-hex, html[data-theme="cartoonic"] .tb-color-hex, html[data-theme="magazine"] .tb-color-hex, html[data-theme="white"] .thm-dot-label, html[data-theme="cartoonic"] .thm-dot-label, html[data-theme="magazine"] .thm-dot-label, html[data-theme="white"] .thm-custom-sublabel, html[data-theme="cartoonic"] .thm-custom-sublabel, html[data-theme="magazine"] .thm-custom-sublabel, html[data-theme="white"] .thm-clbl, html[data-theme="cartoonic"] .thm-clbl, html[data-theme="magazine"] .thm-clbl, html[data-theme="white"] .thm-chex, html[data-theme="cartoonic"] .thm-chex, html[data-theme="magazine"] .thm-chex, html[data-theme="white"] #overlay-levels-page .level-cell.locked, html[data-theme="cartoonic"] #overlay-levels-page .level-cell.locked { color: var(--text-dim); } /* Body/info copy */ html[data-theme="white"] .fr-info-text, html[data-theme="cartoonic"] .fr-info-text, html[data-theme="magazine"] .fr-info-text, html[data-theme="white"] .fr-ctrl-row, html[data-theme="cartoonic"] .fr-ctrl-row, html[data-theme="magazine"] .fr-ctrl-row { color: var(--text-dim); } /* Faint / decorative text — readable gray instead of white-on-dark */ html[data-theme="white"] .ld-bar-label, html[data-theme="cartoonic"] .ld-bar-label, html[data-theme="magazine"] .ld-bar-label, html[data-theme="white"] .fr-footer, html[data-theme="cartoonic"] .fr-footer, html[data-theme="magazine"] .fr-footer, html[data-theme="white"] .fr-ad-placeholder, html[data-theme="cartoonic"] .fr-ad-placeholder, html[data-theme="magazine"] .fr-ad-placeholder, html[data-theme="white"] .ad-modal-footer, html[data-theme="cartoonic"] .ad-modal-footer, html[data-theme="magazine"] .ad-modal-footer, html[data-theme="white"] .thm-footer, html[data-theme="cartoonic"] .thm-footer, html[data-theme="magazine"] .thm-footer, html[data-theme="white"] .ad-footer-label, html[data-theme="cartoonic"] .ad-footer-label, html[data-theme="magazine"] .ad-footer-label { color: #6b7280; } /* Surfaces that were white-on-dark → light surface on light themes */ html[data-theme="white"] .coin-display, html[data-theme="cartoonic"] .coin-display, html[data-theme="magazine"] .coin-display, html[data-theme="white"] .fr-toggle:not(.active), html[data-theme="cartoonic"] .fr-toggle:not(.active), html[data-theme="magazine"] .fr-toggle:not(.active), html[data-theme="white"] .fr-ctrl-row kbd, html[data-theme="cartoonic"] .fr-ctrl-row kbd, html[data-theme="magazine"] .fr-ctrl-row kbd, html[data-theme="white"] .fr-rs-box, html[data-theme="cartoonic"] .fr-rs-box, html[data-theme="magazine"] .fr-rs-box, html[data-theme="white"] .lobby-hof-row, html[data-theme="cartoonic"] .lobby-hof-row, html[data-theme="magazine"] .lobby-hof-row, html[data-theme="white"] .thm-dot--active, html[data-theme="cartoonic"] .thm-dot--active, html[data-theme="magazine"] .thm-dot--active, html[data-theme="white"] #overlay-levels .level-cell.locked, html[data-theme="cartoonic"] #overlay-levels .level-cell.locked, html[data-theme="white"] #overlay-difficulty .level-cell.locked, html[data-theme="cartoonic"] #overlay-difficulty .level-cell.locked, html[data-theme="white"] #overlay-levels-page .level-cell.locked, html[data-theme="cartoonic"] #overlay-levels-page .level-cell.locked { background: var(--panel2); border-color: var(--border2); } html[data-theme="white"] .coin-display:hover, html[data-theme="cartoonic"] .coin-display:hover, html[data-theme="magazine"] .coin-display:hover { background: var(--border); } /* Cartoonic — the coin icon's site-wide light gold (#ffcc44) barely shows up on the cream background. Swap it for a darker amber that keeps the same coin look but stays legible here. */ html[data-theme="cartoonic"] .coin-icon-svg circle:not([fill="none"]) { fill: #b3790c; } html[data-theme="cartoonic"] .coin-icon-svg circle[fill="none"] { stroke: #b3790c; } html[data-theme="cartoonic"] .coin-icon-svg text { fill: #b3790c; } /* Same fix for the lobby screen's coin icon (separate inline SVG). */ html[data-theme="cartoonic"] .lb-lobby-coins svg circle:not([fill="none"]) { fill: #b3790c; } html[data-theme="cartoonic"] .lb-lobby-coins svg circle[fill="none"] { stroke: #b3790c; } html[data-theme="cartoonic"] .lb-lobby-coins svg text { fill: #b3790c; } html[data-theme="white"] .fr-toggle:not(.active)::after, html[data-theme="cartoonic"] .fr-toggle:not(.active)::after, html[data-theme="magazine"] .fr-toggle:not(.active)::after { background: var(--text-dim); } /* Theme-builder cards on light themes — the modern base already uses var(--panel) + theme-accent borders, so only copy needs lightening */ html[data-theme="white"] .thm-card-desc, html[data-theme="cartoonic"] .thm-card-desc, html[data-theme="magazine"] .thm-card-desc { color: var(--text-dim); } /* Theme-dot checkmark — accent instead of white */ html[data-theme="white"] .lobby-theme-dot.selected::before, html[data-theme="cartoonic"] .lobby-theme-dot.selected::before, html[data-theme="magazine"] .lobby-theme-dot.selected::before { color: var(--accent); } /* ═══════════════════════════════════════════════════════════════ CARTOONIC THEME — comic-book elements Thick ink outlines, sticker-style offset shadows, Bangers labels ═══════════════════════════════════════════════════════════════ */ /* Big PLAY button — comic sticker: ink ring + hard offset shadow */ html[data-theme="cartoonic"] .lb-big-play { border: 4px solid var(--text); box-shadow: 0 5px 0 var(--text), 0 14px 30px rgba(0, 0, 0, 0.28); } html[data-theme="cartoonic"] .lb-big-play:hover { box-shadow: 0 4px 0 var(--text), 0 18px 42px rgba(0, 0, 0, 0.32); } html[data-theme="cartoonic"] .lb-big-play svg, html[data-theme="cartoonic"] .lb-play-label { filter: none; text-shadow: none; } html[data-theme="cartoonic"] .lb-play-label { letter-spacing: 0.08em; } /* Comic buttons — ink outline + offset shadow, Bangers labels */ html[data-theme="cartoonic"] .lb-select-btn, html[data-theme="cartoonic"] .lb-icon-btn, html[data-theme="cartoonic"] .fr-action-btn, html[data-theme="cartoonic"] .fr-ov-back, html[data-theme="cartoonic"] .thm-back-btn, html[data-theme="cartoonic"] .tb-btn-primary, html[data-theme="cartoonic"] .gfp-icon-btn, html[data-theme="cartoonic"] .abtn, html[data-theme="cartoonic"] .thm-card-btn { background: var(--panel); border: 3px solid var(--text); color: var(--text); box-shadow: 0 3px 0 var(--text); font-family: var(--fr-font-display); letter-spacing: 0.06em; border-radius: 999px; } /* Small +EARN pill — thinner comic ring */ html[data-theme="cartoonic"] .lb-earn-ad-btn { background: var(--panel); border: 2px solid var(--text); color: var(--text); box-shadow: 0 2px 0 var(--text); font-family: var(--fr-font-display); letter-spacing: 0.06em; } html[data-theme="cartoonic"] .lb-select-btn svg, html[data-theme="cartoonic"] .lb-icon-btn svg, html[data-theme="cartoonic"] .gfp-icon-btn svg { stroke: var(--text); } html[data-theme="cartoonic"] .lb-select-btn:hover, html[data-theme="cartoonic"] .lb-icon-btn:hover, html[data-theme="cartoonic"] .fr-action-btn:hover, html[data-theme="cartoonic"] .tb-btn-primary:hover, html[data-theme="cartoonic"] .thm-back-btn:hover, html[data-theme="cartoonic"] .lb-earn-ad-btn:hover, html[data-theme="cartoonic"] .thm-card-btn:hover { background: var(--accent); border-color: var(--text); color: var(--panel); } /* Cartoonic — subtle letter-spacing on body text for a cleaner look (elements with their own letter-spacing keep it). */ html[data-theme="cartoonic"] body { letter-spacing: 0.015em; } /* Comic hover — flip the icons to the panel color too, otherwise the dark ink strokes vanish against the red hover fill. */ html[data-theme="cartoonic"] .lb-select-btn:hover svg, html[data-theme="cartoonic"] .lb-icon-btn:hover svg, html[data-theme="cartoonic"] .fr-action-btn:hover svg, html[data-theme="cartoonic"] .fr-ov-back:hover svg, html[data-theme="cartoonic"] .thm-back-btn:hover svg, html[data-theme="cartoonic"] .gfp-icon-btn:hover svg, html[data-theme="cartoonic"] .thm-card-btn:hover svg { stroke: var(--panel); } /* Theme cards on cartoonic — comic panels with ink outlines + Bangers */ html[data-theme="cartoonic"] .thm-card { background: var(--panel); border: 3px solid var(--text); border-radius: 18px; box-shadow: 0 4px 0 var(--text); } html[data-theme="cartoonic"] .thm-card:hover { transform: translateY(-3px); box-shadow: 0 4px 0 var(--text), 0 14px 26px rgba(0, 0, 0, 0.18); } html[data-theme="cartoonic"] .thm-card--active { border-color: var(--accent) !important; box-shadow: 0 4px 0 var(--text), 0 0 0 3px rgba(214, 40, 40, 0.25) !important; } html[data-theme="cartoonic"] .thm-card-name { font-family: var(--fr-font-display); color: var(--text); letter-spacing: 0.04em; } html[data-theme="cartoonic"] .thm-card-btn--active { background: var(--accent) !important; border-color: var(--text) !important; color: var(--panel) !important; box-shadow: 0 2px 0 var(--text); } html[data-theme="cartoonic"] .thm-card-preview { border-bottom: 3px solid var(--text); } /* Modes page category tiles keep the comic sticker look */ html[data-theme="cartoonic"] #overlay-modes .cat-card.diff-card-layout { border: 3px solid var(--text); border-radius: 22px; box-shadow: 0 3px 0 var(--text); } html[data-theme="cartoonic"] #overlay-modes .cat-card .cat-card-icon { border: 2px solid var(--text); border-radius: 18px; box-shadow: 0 2px 0 var(--text); } /* In-game question card — comic panel with ink outline */ html[data-theme="cartoonic"] .quiz-card { background: var(--panel); border: 3px solid var(--text); border-radius: 18px; box-shadow: 0 5px 0 var(--text), 0 0 34px rgba(0, 0, 0, 0.12); } html[data-theme="cartoonic"] .quiz-question { font-family: var(--fr-font-display); font-size: clamp(1.15rem, 3vw, 1.5rem); letter-spacing: 0.02em; color: var(--text); } html[data-theme="cartoonic"] .fr-section-title, html[data-theme="cartoonic"] .fr-settings-label, html[data-theme="cartoonic"] .fr-settings-row-lbl { font-family: var(--fr-font-display); letter-spacing: 0.08em; color: var(--text); } html[data-theme="cartoonic"] .fr-settings-label { color: var(--accent); } /* Cartoonic: remove glow text-shadows — they blur ink text on the cream paper and make it hard to read. Flat comic lettering only. */ html[data-theme="cartoonic"] .fr-panel-title, html[data-theme="cartoonic"] .fr-panel-title--danger, html[data-theme="cartoonic"] .fr-panel-title--success, html[data-theme="cartoonic"] .fr-panel-sub, html[data-theme="cartoonic"] .fr-section-title, html[data-theme="cartoonic"] .tb-modal-title, html[data-theme="cartoonic"] .dialog-title, html[data-theme="cartoonic"] .shop-title, html[data-theme="cartoonic"] .quiz-question, html[data-theme="cartoonic"] .lb-play-label, html[data-theme="cartoonic"] .lb-big-play:hover .lb-play-label, html[data-theme="cartoonic"] .quit-dialog-title { text-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════ MAGAZINE THEME — editorial & modern Playfair serif headlines, hairline rules, masthead strips and oxblood/navy/gold ink on warm paper ═══════════════════════════════════════════════════════════════ */ /* Section + settings headings — serif small caps with a hairline rule */ html[data-theme="magazine"] .fr-section-title, html[data-theme="magazine"] .fr-settings-label { font-family: var(--fr-font-display); font-weight: 700; letter-spacing: 0.14em; color: var(--accent); border-bottom: 1px solid rgba(122, 46, 29, 0.25); } html[data-theme="magazine"] .fr-settings-row-lbl { font-family: var(--fr-font-display); font-weight: 600; letter-spacing: 0.02em; color: var(--text); } html[data-theme="magazine"] .fr-settings-row-sub { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--text-dim); } /* Theme cards — magazine spreads: hairline frame, masthead strip, serif small-cap name with a rule, editorial rect button */ html[data-theme="magazine"] .thm-card { position: relative; background: var(--panel); border: 1px solid var(--border2); border-radius: 4px; box-shadow: 0 2px 10px rgba(25, 21, 16, 0.06); } html[data-theme="magazine"] .thm-card::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--accent); } html[data-theme="magazine"] .thm-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(25, 21, 16, 0.1); } html[data-theme="magazine"] .thm-card--active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent2), 0 8px 24px rgba(25, 21, 16, 0.12) !important; } /* Masthead strip across the top of each preview */ html[data-theme="magazine"] .thm-card-preview::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--accent2); z-index: 2; } html[data-theme="magazine"] .thm-card-name { font-family: var(--fr-font-display); font-weight: 800; letter-spacing: 0.08em; color: var(--accent); border-bottom: 1px solid rgba(122, 46, 29, 0.3); padding-bottom: 4px; text-transform: uppercase; } html[data-theme="magazine"] .thm-card-desc { font-family: Georgia, "Times New Roman", serif; font-style: italic; } html[data-theme="magazine"] .thm-card-btn { border-radius: 2px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-family: var(--fr-font-display); font-weight: 700; letter-spacing: 0.16em; } html[data-theme="magazine"] .thm-card-btn:hover { background: var(--accent); color: var(--panel); } html[data-theme="magazine"] .thm-card-btn--active { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--panel) !important; } /* Editorial double-rule dividers (solid — no gradients) */ html[data-theme="magazine"] .fr-divider { height: 2px; background: var(--accent); opacity: 0.5; box-shadow: 0 3px 0 -1px var(--accent2); } /* ═══════════════════════════════════════════════════════════════ RESET + BASE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: var(--bg); color: var(--text); font-family: var(--ff-body); overflow: hidden; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; } /* Marble theme — contrast overrides */ /* ═══════════════════════════════════════════════════════════════ PARTICLES ═══════════════════════════════════════════════════════════════ */ #particles { position: fixed; inset: 0; pointer-events: none; z-index: 999; will-change: transform; contain: strict; } /* ═══════════════════════════════════════════════════════════════ SCREENS ═══════════════════════════════════════════════════════════════ */ /* Smooth page transitions — fade + slight rise when a screen appears. Runs as an animation so display:none toggling can't skip it. */ @keyframes qcScreenIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .screen:not(.hidden):not(.lobby-pre-enter) { animation: qcScreenIn 0.28s cubic-bezier(0.22, 0.8, 0.3, 1); } .screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 16px 8px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Same background as every other screen — no flash on screen change */ background: var(--thm-bg-url) center center / cover no-repeat; } .screen.hidden { opacity: 0; pointer-events: none; transform: scale(0.97); display: none; } #s-game { justify-content: flex-start; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; align-items: stretch; overscroll-behavior: contain; background: var(--thm-bg-url) center center / cover no-repeat; } #s-game * { -webkit-tap-highlight-color: transparent; } /* ═══════════════════════════════════════════════════════════════ LOADING SCREEN ═══════════════════════════════════════════════════════════════ */ #loading-screen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.65s; } #loading-screen.fade-out { opacity: 0; pointer-events: none; transform: scale(1.03); visibility: hidden; } #loading-screen.gone { display: none; visibility: hidden; } .load-bg { position: absolute; inset: 0; overflow: hidden; } .load-bg-hex { position: absolute; width: 60px; height: 60px; opacity: 0; animation: hexFloat 6s ease-in-out infinite; } .load-bg-hex::before { content: ""; display: block; width: 100%; height: 100%; background: var(--accent-deep); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border: 1px solid var(--accent-dim); } @keyframes hexFloat { 0% { opacity: 0; transform: scale(0.6) rotate(0deg); } 30% { opacity: 0.4; } 70% { opacity: 0.2; } 100% { opacity: 0; transform: scale(1.2) rotate(30deg); } } .load-center { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 2; } .load-eyebrow { font-family: var(--ff-mono); font-size: 0.58rem; letter-spacing: 0.6em; text-transform: uppercase; color: var(--accent); opacity: 0.6; margin-bottom: 6px; animation: fadeSlideUp 0.6s ease both; } .load-logo-wrap { position: relative; display: flex; align-items: baseline; gap: 0; margin-bottom: 14px; animation: fadeSlideUp 0.6s 0.1s ease both; } .load-logo-flow { font-family: var(--ff-head); font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 900; line-height: 1; color: var(--text); letter-spacing: -0.01em; } .load-logo-line { font-family: var(--ff-head); font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 900; line-height: 1; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); filter: drop-shadow(0 0 20px var(--accent-glow)); letter-spacing: -0.01em; } .load-subtitle { font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.5em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 36px; animation: fadeSlideUp 0.6s 0.2s ease both; } .load-bar-wrap { width: 280px; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: fadeSlideUp 0.6s 0.3s ease both; } .load-bar-track { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; position: relative; } .load-bar-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--accent); transition: width 0.3s ease; box-shadow: 0 0 10px var(--accent-glow); position: relative; } .load-bar-fill::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-glow); transform: translateX(4px); } .load-percent { font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; } .load-ad-slot, .load-ad-label, .load-ad-dot { display: none !important; } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ LOBBY SCREEN ═══════════════════════════════════════════════════════════════ */ #lobby-screen { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 200; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #lobby-screen.hidden { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(14px) scale(0.985); display: none; } /* Applied right after display:none is removed, before rAF kicks in */ #lobby-screen.lobby-pre-enter { display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); pointer-events: none; transition: none; } /* Triggered one frame later — animates in smoothly */ #lobby-screen.lobby-entering { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s; } .lobby-bg-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .lobby-pipe-line { position: absolute; height: 2px; background: var(--accent-deep); animation: pipeSweep 8s ease-in-out infinite; } .lobby-pipe-line:nth-child(2) { animation-delay: -2.5s; animation-duration: 11s; } .lobby-pipe-line:nth-child(3) { animation-delay: -5s; animation-duration: 9s; } @keyframes pipeSweep { 0% { left: -100%; width: 40%; } 100% { left: 110%; width: 60%; } } .lobby-ambient { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: none; pointer-events: none; z-index: 0; animation: ambientPulse 4s ease-in-out infinite alternate; } @keyframes ambientPulse { 0% { opacity: 0.6; } 100% { opacity: 1; } } .lobby-layout { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 900px; padding: 44px 24px 32px; position: relative; z-index: 1; flex: 0 0 auto; margin: auto; } /* Left panel */ .lobby-left { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; max-width: 420px; } .lobby-brand { margin-bottom: 28px; text-align: left !important; } .lobby-eyebrow { font-family: var(--ff-mono); font-size: 0.65rem; letter-spacing: 0.55em; text-transform: uppercase; color: var(--accent); opacity: 0.65; display: block; margin-bottom: 10px; } .lobby-title-wrap { display: flex; align-items: baseline; gap: 0; margin-bottom: 10px; } .lobby-title-flow { font-family: var(--ff-head); font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 900; line-height: 0.95; color: #fff; letter-spacing: -0.02em; } .lobby-title-line { font-family: var(--ff-head); font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); filter: drop-shadow(0 0 16px var(--accent-glow)); } .lobby-tagline { font-family: var(--ff-body); font-size: 0.9rem; font-weight: 400; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; display: block; } .lobby-divider { width: 100%; height: 1px; background: var(--accent-dim); margin: 20px 0; opacity: 0.35; } .lb-sec-label { font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; display: block; } /* Difficulty selector */ .diff-cards-row { display: flex; gap: 10px; width: 100%; margin-bottom: 20px; } .diff-card { flex: 1; padding: 14px 12px 12px; background: rgba(255, 255, 255, 0.025); border: 1.5px solid var(--border2); border-radius: var(--r2); cursor: pointer; transition: all var(--t); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px; } .diff-card::before { content: ""; position: absolute; inset: 0; background: var(--accent-deep); opacity: 0; transition: opacity var(--t); } .diff-card:hover { border-color: var(--accent); transform: translateY(-2px); } .diff-card:hover::before { opacity: 1; } .diff-card.active { border-color: var(--accent); background: var(--accent-deep); box-shadow: 0 0 24px var(--accent-glow), 0 8px 32px rgba(0, 0, 0, 0.3); } .diff-card.active::before { opacity: 1; } .diff-card-grid-icon { display: grid; gap: 2px; position: relative; z-index: 1; margin-bottom: 2px; } .diff-card-dot { border-radius: 2px; background: var(--text-muted); transition: background var(--t); } .diff-card.active .diff-card-dot { background: var(--accent); } .diff-card:hover:not(.active) .diff-card-dot { background: var(--accent-dim); } .diff-card-name { font-family: var(--ff-head); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); transition: color var(--t); position: relative; z-index: 1; } .diff-card.active .diff-card-name { color: var(--accent); } .diff-card-size { font-family: var(--ff-mono); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.04em; position: relative; z-index: 1; } .diff-card-active-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--t); } .diff-card.active .diff-card-active-bar { transform: scaleX(1); } /* Selection badge */ .lobby-sel-row { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 18px; } .lobby-sel-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-deep); border: 1px solid var(--accent-dim); border-radius: 100px; padding: 5px 14px; font-family: var(--ff-mono); font-size: 0.56rem; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; } .lobby-sel-arrow { color: var(--text-dim); font-size: 0.7rem; } .lobby-sel-hint { font-family: var(--ff-body); font-size: 0.72rem; color: var(--text-dim); } /* Play button */ .lobby-play-btn { width: 100%; padding: 16px 24px; background: transparent; border: 2px solid var(--accent); border-radius: var(--r2); color: var(--accent); font-family: var(--ff-head); font-size: 1.35rem; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; transition: color var(--t); box-shadow: 0 0 30px var(--accent-glow), inset 0 0 40px var(--accent-deep); } .lobby-play-btn::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .lobby-play-btn:hover { color: var(--bg); } .lobby-play-btn:hover::before { transform: translateX(0); } .lobby-play-btn span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; } .lobby-play-arrow { font-size: 1.2rem; transition: transform var(--t); } .lobby-play-btn:hover .lobby-play-arrow { transform: translateX(4px); } /* Right panel */ .lobby-right { display: flex; flex-direction: column; gap: 14px; width: 220px; flex-shrink: 0; } .lobby-stat-card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border2); border-radius: var(--r2); padding: 16px; overflow: hidden; position: relative; } .lobby-stat-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--accent-dim); } /* Hall of fame */ .lobby-hof-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } .lobby-hof-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: var(--r); transition: border-color var(--t); } .lobby-hof-row:hover { border-color: var(--border2); } .lobby-hof-pos { font-family: var(--ff-mono); font-size: 0.82rem; font-weight: 700; min-width: 22px; } .lobby-hof-row:nth-child(1) .lobby-hof-pos { color: var(--gold); } .lobby-hof-row:nth-child(2) .lobby-hof-pos { color: #b0bec5; } .lobby-hof-row:nth-child(3) .lobby-hof-pos { color: #a07860; } .lobby-hof-name { flex: 1; font-family: var(--ff-body); font-size: 1rem; color: var(--text); } .lobby-hof-wins { font-family: var(--ff-mono); font-size: 0.84rem; color: var(--gold); } .lobby-hof-empty { font-family: var(--ff-body); font-style: italic; font-size: 1rem; color: var(--text); opacity: 0.4; text-align: center; padding: 4px 0; } /* Theme swatches */ .lobby-theme-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } #theme-dots-row { display: flex; flex-wrap: wrap; gap: 6px; } .lobby-theme-dot { width: 32px; height: 32px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: all var(--t); position: relative; outline: 2px solid transparent; outline-offset: 2px; } .lobby-theme-dot:hover { transform: scale(1.2); outline-color: var(--accent); } .lobby-theme-dot.selected { outline-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .lobby-theme-dot.selected::before { content: "\2714"; position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 0.48rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.32); border-radius: 6px; } .theme-dot-inner { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border-radius: 6px; overflow: hidden; } .theme-dot-inner span { display: block; } .custom-theme-dot { background: var(--panel); border: 1.5px solid var(--border2) !important; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .custom-dot-inner { display: flex; align-items: center; justify-content: center; color: var(--text-dim); } .custom-dot-inner svg { width: 16px; height: 16px; transition: color var(--t); } .custom-theme-dot:hover .custom-dot-inner svg { color: var(--accent); animation: spinOnce 0.5s ease; } @keyframes spinOnce { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Top-right action buttons */ .lobby-top-actions { position: sticky; top: 0; right: 0; align-self: flex-end; display: flex; gap: 8px; z-index: 10; align-items: center; padding: 14px 20px 8px; margin-left: auto; background: var(--bg); pointer-events: auto; } .lobby-icon-btn { width: 42px; height: 42px; background: rgba(255, 255, 255, 0.04); border: 1.5px solid var(--border2); border-radius: var(--r); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: all var(--t); } .lobby-icon-btn svg { width: 20px; height: 20px; } .lobby-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-deep); } /* Coin row */ .lobby-coin-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border2); border-radius: var(--r); } .lobby-coin-left { display: flex; align-items: center; gap: 8px; } .lobby-coin-label { font-family: var(--ff-body); font-size: 1rem; color: var(--text-dim); display: flex; align-items: center; } .lobby-coin-val { font-family: var(--ff-mono); font-size: 1.4rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); } .lobby-coin-earn { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent2); border: 1.5px solid var(--accent2-dim); background: var(--accent2-deep); padding: 6px 14px; border-radius: 100px; cursor: pointer; transition: all var(--t); } .lobby-coin-earn:hover { background: var(--accent2); color: var(--btn2-fg, #ffffff); } /* Hide legacy/unused lobby sections */ .lobby-mode-section, .lobby-diff-section, .lobby-series-section, .lobby-theme-section, .lobby-hof, .lobby-selection-row, .lobby-inner { display: none !important; } /* ═══════════════════════════════════════════════════════════════ LEVEL SELECT POPUP ═══════════════════════════════════════════════════════════════ */ .level-select-dialog { max-width: 520px; width: 100%; padding: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 16px !important; border: 1.5px solid var(--border2) !important; background: var(--surface) !important; flex-shrink: 0; } .lvl-dlg-inner { padding: 24px 22px 20px; } .lvl-dlg-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .lvl-dlg-title { font-family: var(--ff-head); font-size: 1.5rem; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; display: block; } .lvl-dlg-sub { font-family: var(--ff-body); font-size: 0.78rem; color: var(--text-dim); font-style: italic; margin-top: 2px; display: block; } .lvl-dlg-badge { font-family: var(--ff-mono); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--accent2-deep); border: 1px solid var(--accent2-dim); color: var(--accent2); } /* Progress bar */ .lvl-dlg-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .lvl-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .lvl-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s; box-shadow: 0 0 6px var(--accent-glow); } .lvl-progress-label { font-family: var(--ff-mono); font-size: 0.5rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; } /* Level grid */ #overlay-levels .level-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: 100%; margin-bottom: 14px; contain: layout style; } #overlay-levels .level-cell { aspect-ratio: 1; border-radius: 7px; background: rgba(255, 255, 255, 0.03); border: 1.5px solid var(--border); color: var(--text-dim); font-family: var(--ff-mono); font-size: 0.54rem; font-weight: 700; cursor: pointer; transition: all var(--t); display: flex; align-items: center; justify-content: center; padding: 0; position: relative; } #overlay-levels .level-cell:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-deep); transform: scale(1.12); box-shadow: 0 0 10px var(--accent-glow); z-index: 2; } #overlay-levels .level-cell.done { background: rgba(0, 232, 153, 0.07); border-color: rgba(0, 232, 153, 0.4); color: var(--green); } #overlay-levels .level-cell.done::after { content: ""; position: absolute; bottom: 2px; right: 2px; width: 8px; height: 8px; opacity: 0.6; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350c8a0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain; } #overlay-levels .level-cell.next { border-color: var(--accent2); color: var(--accent2); background: var(--accent2-deep); box-shadow: 0 0 10px var(--accent2-glow); animation: glowBlink 0.9s ease-in-out infinite; } #overlay-levels .level-cell.picked { border-color: var(--gold) !important; color: var(--gold) !important; background: rgba(255, 204, 68, 0.08) !important; box-shadow: 0 0 10px rgba(255, 204, 68, 0.3) !important; animation: none !important; } #overlay-levels .level-cell.locked { background: rgba(255, 255, 255, 0.02); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; opacity: 0.38; pointer-events: none; } #overlay-levels .level-cell.locked::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain; } /* Difficulty tabs inside popup */ .lvl-diff-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .lvl-diff-tab { padding: 8px 16px; border-radius: 8px 8px 0 0; font-family: var(--ff-mono); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; border: none; background: transparent; transition: all var(--t); border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; position: relative; } .lvl-diff-tab:hover { color: var(--text); } .lvl-diff-tab.active { color: var(--accent); border-color: var(--border2); background: var(--surface); } .lvl-diff-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent); } /* ═══════════════════════════════════════════════════════════════ GAME SCREEN — topbar, score, board ═══════════════════════════════════════════════════════════════ */ .board-wrap { position: relative; flex-shrink: 0; margin: 6px auto 18px; display: flex; align-items: center; justify-content: center; } .board-wrap::before, .board-wrap::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--accent); border-style: solid; opacity: 0.9; z-index: 2; pointer-events: none; } .board-wrap::before { top: -5px; left: -5px; border-width: 2.5px 0 0 2.5px; } .board-wrap::after { top: -5px; right: -5px; border-width: 2.5px 2.5px 0 0; } .board-corner-br { position: absolute; bottom: -5px; right: -5px; width: 18px; height: 18px; border: 2.5px solid var(--accent); border-width: 0 2.5px 2.5px 0; opacity: 0.9; z-index: 2; pointer-events: none; } .board-corner-bl { position: absolute; bottom: -5px; left: -5px; width: 18px; height: 18px; border: 2.5px solid var(--accent); border-width: 0 0 2.5px 2.5px; opacity: 0.9; z-index: 2; pointer-events: none; } /* Board SVG — GPU-accelerated, zero-lag pipe rendering */ #board-svg { display: block; cursor: crosshair; will-change: contents; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; shape-rendering: optimizeSpeed; isolation: isolate; } #board-svg path { will-change: d; vector-effect: non-scaling-stroke; } #board-svg rect { will-change: fill; } .game-topbar { width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px; background: rgba(var(--th-bg-r), var(--th-bg-g), var(--th-bg-b), 0.72); border: 1px solid rgba(var(--th-r), var(--th-g), var(--th-b), 0.2); border-radius: 12px; margin-bottom: 8px; flex-shrink: 0; } .game-logo { font-family: var(--ff-head); font-size: 1.4rem; font-weight: 800; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); } .game-logo-sub { font-family: var(--ff-mono); font-size: 0.58rem; letter-spacing: 0.28em; color: var(--text-dim); text-transform: uppercase; margin-top: 1px; } .series-label { font-family: var(--ff-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text); opacity: 0.9; } .header-controls { display: flex; gap: 5px; align-items: center; } .icon-btn { width: 36px; height: 36px; background: var(--panel); border: 1.5px solid var(--border); border-radius: var(--r); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: all var(--t); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-deep); box-shadow: 0 0 10px var(--accent-glow); } .icon-btn:active { transform: scale(0.92); transition: transform 0.08s ease; } /* Score panel */ .score-panel { width: 100%; max-width: 520px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 5px; align-items: center; margin-bottom: 7px; flex-shrink: 0; } .score-side { background: var(--panel); border: 2px solid var(--border); border-radius: var(--r); padding: 7px 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: border-color 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .score-side.ax { border-color: var(--accent2); box-shadow: 0 0 10px var(--accent2-glow); } .score-side.ao { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .score-player { font-family: var(--ff-mono); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text); opacity: 0.85; text-transform: uppercase; } .score-num { font-family: var(--ff-mono); font-size: 1.4rem; font-weight: 700; line-height: 1.1; will-change: contents; font-variant-numeric: tabular-nums; } .sx .score-num { color: var(--accent2); text-shadow: 0 0 10px var(--accent2-dim); } .so .score-num { color: var(--accent); text-shadow: 0 0 10px var(--accent-dim); } .st .score-num { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); } .score-name { font-family: var(--ff-body); font-size: 0.68rem; font-weight: 500; color: var(--text); opacity: 0.7; text-align: center; } .score-vs { font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--text-dim); text-align: center; } /* Fill/progress bar */ .series-progress { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-shrink: 0; } .fill-track-wrap { flex: 1; display: flex; flex-direction: column; gap: 2px; contain: layout; } .fill-track-label { font-family: var(--ff-mono); font-size: 0.38rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } .fill-track { height: 5px; background: var(--panel); border: 1px solid var(--border2); border-radius: 3px; overflow: hidden; } .fill-bar { height: 100%; width: 0%; border-radius: 3px; background: var(--accent); transition: width 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 0 6px var(--accent-glow); will-change: width; } .fill-pct { font-family: var(--ff-mono); font-size: 0.58rem; font-weight: 700; color: var(--accent); flex-shrink: 0; min-width: 32px; text-align: right; } /* Round log */ .round-log-wrap { width: 100%; max-width: 520px; margin-bottom: 4px; flex-shrink: 0; } .round-log-label { font-family: var(--ff-mono); font-size: 0.38rem; letter-spacing: 0.25em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 3px; } .round-log { display: flex; flex-wrap: wrap; gap: 2px; min-height: 16px; } .round-chip { padding: 1px 7px; border-radius: 3px; font-family: var(--ff-mono); font-size: 0.44rem; letter-spacing: 0.04em; } .round-chip.rc { background: var(--accent-deep); color: var(--accent); border: 1px solid var(--accent-dim); } .round-chip.rp { background: var(--accent2-deep); color: var(--accent2); border: 1px solid var(--accent2-dim); } /* Status/turn bar */ .turn-bar { width: 100%; max-width: 520px; text-align: center; margin-bottom: 6px; min-height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .turn-text { font-family: "Bebas Neue", "Orbitron", sans-serif; font-size: 1.05rem; font-weight: 400; letter-spacing: 0.12em; transition: color 0.2s; will-change: contents; contain: content; } .turn-text.xt { color: var(--accent2); text-shadow: 0 0 10px var(--accent2-dim); } .turn-text.ot { color: var(--accent); text-shadow: 0 0 10px var(--accent-dim); } .turn-text.dt { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); } @keyframes glowBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .blink { animation: glowBlink 0.7s ease-in-out infinite; } /* Action buttons */ .btn-row { width: 100%; max-width: 520px; display: flex; gap: 6px; flex-shrink: 0; margin-top: 4px; } .abtn { flex: 1; padding: 10px 6px; background: var(--panel); border: 1.5px solid var(--border2); border-radius: var(--r); color: var(--text); font-family: var(--ff-mono); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all var(--t); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 5px; } .abtn::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t); } .abtn span { position: relative; z-index: 1; } .abtn svg { color: currentColor; width: 13px; height: 13px; position: relative; z-index: 1; flex-shrink: 0; } .abtn:active { transform: scale(0.96); transition: transform 0.08s ease; } .abtn.undo-btn:hover { color: var(--text); border-color: var(--accent); } .abtn.undo-btn:hover::before { background: rgba(255, 255, 255, 0.06); opacity: 1; } .abtn.hint-btn { border-color: var(--accent2); color: var(--accent2); } .abtn.hint-btn:hover { color: var(--btn2-fg, #ffffff); border-color: var(--accent2); } .abtn.hint-btn::before { background: var(--accent2); } .abtn.hint-btn:hover::before { opacity: 1; } .abtn.reset-btn { border-color: rgba(255, 80, 80, 0.5); color: rgba(240, 100, 100, 0.9); } .abtn.reset-btn:hover { color: #ffffff; } .abtn.reset-btn::before { background: #e05050; } .abtn.reset-btn:hover::before { opacity: 1; } .abtn.hint-btn-ad { border-color: var(--gold) !important; color: var(--gold) !important; animation: glowBlink 0.8s ease-in-out infinite; } .abtn.hint-btn-ad::before { background: var(--gold) !important; } .abtn.hint-btn-ad:hover { color: #ffffff !important; } .abtn.hint-btn-ad:hover::before { opacity: 1 !important; } /* ═══════════════════════════════════════════════════════════════ OVERLAYS ═══════════════════════════════════════════════════════════════ */ .overlay { position: fixed; inset: 0; background: var(--overlay-bg, rgba(4, 6, 14, 0.88)); display: flex; align-items: flex-start; justify-content: center; z-index: 300; backdrop-filter: var(--backdrop-blur, blur(12px) saturate(0.7)); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; padding: 16px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: opacity; transform: translateZ(0); } .overlay.show { opacity: 1; pointer-events: all; } /* On tall screens, center dialogs vertically */ @media (min-height: 600px) { .overlay { align-items: center; } } .dialog { background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; padding: 32px 36px 28px; text-align: center; max-width: 360px; width: 100%; position: relative; box-shadow: var(--shadow-deep); transform: translate3d(0, 14px, 0) scale(0.96); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; flex-shrink: 0; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .overlay.show .dialog { transform: translate3d(0, 0, 0) scale(1); } .dialog::before { content: ""; position: absolute; top: 8px; left: 8px; width: 14px; height: 14px; border: 1px solid var(--border2); border-width: 1px 0 0 1px; } .dialog::after { content: ""; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border: 1px solid var(--border2); border-width: 1px 1px 0 0; } .d-corner-br { position: absolute; bottom: 8px; right: 8px; width: 14px; height: 14px; border: 1px solid var(--border2); border-width: 0 1px 1px 0; } .d-corner-bl { position: absolute; bottom: 8px; left: 8px; width: 14px; height: 14px; border: 1px solid var(--border2); border-width: 0 0 1px 1px; } .dialog-title { font-family: var(--ff-head); font-size: 1.4rem; font-weight: 800; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 5px; text-shadow: 0 0 20px var(--accent-glow); } .dialog-subtitle { font-family: var(--ff-body); font-size: 0.88rem; color: var(--text-dim); margin-bottom: 20px; font-style: italic; } .primary-btn { width: 100%; padding: 12px; background: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--r); color: var(--btn-fg, #ffffff); font-family: var(--ff-mono); font-size: 0.48rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: all var(--t); position: relative; overflow: hidden; } .primary-btn::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); opacity: 0; transition: opacity var(--t); } .primary-btn:hover { color: var(--btn-fg, #ffffff); } .primary-btn:hover::before { opacity: 1; } .primary-btn span { position: relative; z-index: 1; } .go-lobby-btn { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; } .go-lobby-btn:hover { color: #ffffff !important; } .go-lobby-btn::before { background: rgba(0, 0, 0, 0.15) !important; } .quit-danger-btn { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; } .quit-danger-btn::before { background: rgba(0, 0, 0, 0.15) !important; } .quit-danger-btn:hover { color: #ffffff !important; } .quit-dialog-title { color: #c05050 !important; text-shadow: 0 0 20px rgba(180, 50, 50, 0.4) !important; } .quit-confirm-btn { background: #c05050 !important; border-color: #a03030 !important; color: #ffffff !important; } .quit-confirm-btn::before { background: rgba(0, 0, 0, 0.15) !important; } .quit-confirm-btn:hover { color: #ffffff !important; } .pause-icon-wrap { margin: 14px auto 20px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; } .pause-icon-wrap svg { width: 52px; height: 52px; stroke: var(--accent); stroke-width: 2; opacity: 0.7; } /* ═══════════════════════════════════════════════════════════════ WIN OVERLAY ═══════════════════════════════════════════════════════════════ */ #result-overlay { background: var(--thm-bg-url) center center / cover no-repeat; backdrop-filter: none; z-index: 400; } #result-overlay.hidden { opacity: 0; pointer-events: none; visibility: hidden; } .result-box { background: var(--surface); border: 1.5px solid var(--border2); border-radius: 16px; padding: 36px 40px 30px; text-align: center; width: 100%; max-width: 360px; box-shadow: var(--shadow-deep); animation: popIn 0.36s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; flex-shrink: 0; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .result-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); } @keyframes popIn { from { transform: scale(0.65); opacity: 0; } to { transform: scale(1); opacity: 1; } } #res-sym { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .res-title { font-family: var(--ff-head); font-size: 1.8rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 5px; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); } .res-sub { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 16px; font-style: italic; } .res-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; } .res-star { color: var(--star-off); font-size: 1.5rem; } .res-star.on { color: var(--gold); filter: drop-shadow(0 0 8px var(--gold-glow)); } .res-stats { display: flex; gap: 8px; margin-bottom: 20px; } .rs-box { flex: 1; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 6px; text-align: center; } .rs-val { font-family: var(--ff-mono); font-size: 1.1rem; font-weight: 700; color: var(--text); } .rs-lbl { font-family: var(--ff-mono); font-size: 0.4rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; } .res-btns { display: flex; flex-wrap: wrap; gap: 8px; } .res-btns .rbtn.pri { flex: 1 1 100%; } .res-btns .rbtn.sec { flex: 1 1 calc(50% - 4px); } .rbtn { flex: 1; padding: 11px; border-radius: var(--r); cursor: pointer; font-family: var(--ff-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; transition: all var(--t); position: relative; overflow: hidden; } .rbtn.pri { background: var(--accent); border: 1.5px solid var(--accent); color: var(--btn-fg, #ffffff); } .rbtn.pri::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); opacity: 0; transition: opacity var(--t); } .rbtn.pri:hover { color: var(--btn-fg, #ffffff); } .rbtn.pri:hover::before { opacity: 1; } .rbtn.pri span { position: relative; z-index: 1; } .rbtn.sec { background: var(--panel); border: 1.5px solid var(--border); color: var(--text-dim); } .rbtn.sec:hover { border-color: var(--border2); color: var(--text); } /* ═══════════════════════════════════════════════════════════════ CHAMPION SCREEN ═══════════════════════════════════════════════════════════════ */ #s-champ { justify-content: flex-start; overflow-y: auto; padding-top: 20px; padding-bottom: 24px; } .champ-header { text-align: center; margin-bottom: 14px; width: 100%; max-width: 440px; border-bottom: 1px solid var(--border2); padding-bottom: 12px; } #champ-trophy { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } #champ-trophy svg { width: 52px; height: 52px; } .champ-title { font-family: var(--ff-head); font-size: 1.8rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 3px; background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); } .champ-sub { font-family: var(--ff-body); font-size: 0.88rem; color: var(--text-dim); font-style: italic; } /* Congratulations icon row — SVG icons only (no emojis) */ .champ-icons { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 2px; } .champ-icons svg { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); } .final-scores { width: 100%; max-width: 440px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 12px; } .fs-side { background: var(--panel); border: 2px solid var(--border); border-radius: var(--r); padding: 13px 10px; text-align: center; } .fs-side-x { border-color: var(--accent2-dim); } .fs-side-o { border-color: var(--accent-dim); } .fs-side-t { border-color: rgba(255, 215, 0, 0.3); } .fs-player { font-family: var(--ff-mono); font-size: 0.44rem; letter-spacing: 0.2em; color: var(--text-dim); margin-bottom: 3px; } .fs-num { font-family: var(--ff-mono); font-size: 2.2rem; font-weight: 700; line-height: 1; } .fs-side-x .fs-num { color: var(--accent2); text-shadow: 0 0 12px var(--accent2-dim); } .fs-side-o .fs-num { color: var(--accent); text-shadow: 0 0 12px var(--accent-dim); } .fs-side-t .fs-num { color: var(--gold); text-shadow: 0 0 12px var(--gold-glow); } .fs-name { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; } .fs-vs { font-family: var(--ff-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.1em; text-align: center; } .stats-strip { display: flex; gap: 8px; width: 100%; max-width: 440px; margin-bottom: 10px; } .stat-box { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 11px 8px; text-align: center; } .stat-num { font-family: var(--ff-mono); font-size: 1.2rem; font-weight: 700; color: var(--text); } .stat-lbl { font-family: var(--ff-mono); font-size: 0.42rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; } .replay-log { width: 100%; max-width: 440px; margin-bottom: 10px; } .replay-label { font-family: var(--ff-mono); font-size: 0.44rem; letter-spacing: 0.28em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; } .replay-rows { display: flex; flex-direction: column; gap: 3px; max-height: 96px; overflow-y: auto; } .replay-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 4px; font-size: 0.7rem; background: var(--panel); border: 1px solid var(--border); } .rn { font-family: var(--ff-mono); font-size: 0.44rem; color: var(--text-dim); min-width: 24px; } .rx { color: var(--accent); font-weight: 600; } .ro { color: var(--accent2); font-weight: 600; } .replay-moves { margin-left: auto; font-size: 0.56rem; color: var(--text-dim); } /* Leaderboard list (champion screen) */ .lb-list { width: 100%; max-width: 440px; margin-bottom: 10px; } .lb-title { font-family: var(--ff-mono); font-size: 0.44rem; letter-spacing: 0.28em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; } .lb-entry { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; } .lbe-rank { display: flex; align-items: center; gap: 3px; min-width: 26px; } .lbe-name { flex: 1; font-size: 0.8rem; color: var(--text); } .lbe-score { font-family: var(--ff-mono); font-size: 0.58rem; color: var(--gold); } .lb-empty { font-size: 0.72rem; color: var(--text-dim); text-align: center; padding: 8px 0; } /* Champion action buttons */ .champ-btns { display: flex; gap: 8px; width: 100%; max-width: 440px; } .cbtn { flex: 1; padding: 12px; border-radius: var(--r); cursor: pointer; font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; transition: all var(--t); position: relative; overflow: hidden; } .cbtn.filled { background: var(--accent); border: 1.5px solid var(--accent); color: var(--btn-fg, #ffffff); } .cbtn.filled::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); opacity: 0; transition: opacity var(--t); } .cbtn.filled:hover { color: var(--btn-fg, #ffffff); } .cbtn.filled:hover::before { opacity: 1; } .cbtn.filled span { position: relative; z-index: 1; } .cbtn.ghost { background: var(--panel); border: 1.5px solid var(--border); color: var(--text-dim); } .cbtn.ghost:hover { border-color: var(--border2); color: var(--text); } /* ═══════════════════════════════════════════════════════════════ TOAST NOTIFICATION ═══════════════════════════════════════════════════════════════ */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--panel); border: 1px solid var(--accent); border-radius: 100px; padding: 8px 20px; font-family: var(--ff-mono); font-size: 0.54rem; letter-spacing: 0.1em; color: var(--accent); white-space: nowrap; opacity: 0; pointer-events: none; z-index: 500; transition: all 0.24s; box-shadow: 0 0 20px var(--accent-glow); } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ═══════════════════════════════════════════════════════════════ AD OVERLAY ═══════════════════════════════════════════════════════════════ */ #overlay-ad { position: fixed; inset: 0; background: var(--overlay-bg, rgba(4, 6, 14, 0.88)); backdrop-filter: var(--backdrop-blur, blur(8px) saturate(0.6)); display: flex; align-items: flex-start; justify-content: center; z-index: 700; opacity: 0; pointer-events: none; transition: opacity 0.32s; padding: 20px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (min-height: 500px) { #overlay-ad { align-items: center; } } #overlay-ad.show { opacity: 1; pointer-events: all; } .ad-card { width: 100%; max-width: 340px; background: var(--surface); border: 1.5px solid var(--border2); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-deep); display: flex; flex-direction: column; animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .ad-card-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--panel2); border-bottom: 1px solid var(--border); } .ad-topbar-adlabel { font-family: var(--ff-mono); font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); } .ad-topbar-skip { font-family: var(--ff-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; padding: 5px 14px; border-radius: 3px; border: 1.5px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: default; transition: all 0.2s; white-space: nowrap; opacity: 0.7; pointer-events: none; } .ad-topbar-skip.visible { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-deep); opacity: 1; cursor: pointer; pointer-events: all; } .ad-topbar-skip.visible:hover { background: var(--accent-glow); color: var(--accent); } .ad-content-box { width: calc(100% - 20px); min-height: 250px; position: relative; background: var(--bg2); display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--border); margin: 10px; border-radius: 2px; box-sizing: border-box; } .ad-content-box::before, .ad-content-box::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--border2); border-style: solid; z-index: 2; pointer-events: none; } .ad-content-box::before { top: 6px; left: 6px; border-width: 1.5px 0 0 1.5px; } .ad-content-box::after { bottom: 6px; right: 6px; border-width: 0 1.5px 1.5px 0; } .ad-content-box iframe { width: 100%; height: 100%; min-height: 250px; border: none; display: block; } .ad-card-footer { font-family: var(--ff-body); font-size: 0.68rem; color: var(--text-dim); text-align: center; padding: 10px 16px; font-style: italic; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 6px; } .ad-footer-dot { font-size: 0.5rem; color: var(--text-dim); } /* Hide legacy ad elements */ .ad-popup-wrap, .ad-popup-label, .ad-popup-reward, .ad-iframe-wrap, .ad-timer-bar-wrap, .ad-timer-label, .ad-skip-btn, #level-select-panel, .ad-card::before, .ad-timer-track, .ad-timer-fill, .ad-content-badge, .ad-topbar-title { display: none !important; } /* ═══════════════════════════════════════════════════════════════ COINS + SHOP ═══════════════════════════════════════════════════════════════ */ .coin-display { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 100px; padding: 6px 13px 6px 9px; cursor: pointer; transition: all var(--t); flex-shrink: 0; } .coin-display:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.04); } .coin-icon { font-size: 15px; line-height: 1; } .coin-icon-svg { display: block; flex-shrink: 0; } .lobby-coin-svg { display: block; } .coin-count { font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); min-width: 26px; text-align: center; } .coin-earn-pop { position: fixed; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1.5px solid var(--gold); border-radius: 100px; padding: 6px 16px; font-family: var(--ff-mono); font-size: 0.66rem; font-weight: 700; color: var(--gold); box-shadow: 0 0 16px var(--gold-glow); pointer-events: none; z-index: 600; animation: coinPop 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; will-change: transform, opacity; display: flex; align-items: center; gap: 6px; } @keyframes coinPop { 0% { bottom: 80px; opacity: 0; transform: translateX(-50%) scale(0.7); } 20% { opacity: 1; transform: translateX(-50%) scale(1.1); } 70% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { bottom: 140px; opacity: 0; transform: translateX(-50%) scale(0.9); } } #overlay-shop .dialog { max-width: 400px; text-align: left; padding: 22px 20px; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex-shrink: 0; } .shop-title { font-family: var(--ff-head); font-size: 1.3rem; font-weight: 800; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 14px; text-align: center; text-shadow: 0 0 16px var(--accent-glow); display: flex; align-items: center; justify-content: center; gap: 6px; } .shop-balance-row { font-family: var(--ff-body); font-size: 0.72rem; color: var(--text-dim); text-align: center; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; } .shop-section-label { font-family: var(--ff-mono); font-size: 0.42rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; margin-top: 13px; } .shop-grid { display: flex; flex-direction: column; gap: 6px; } .shop-item { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border2); border-radius: var(--r); padding: 10px 14px; transition: all var(--t); cursor: pointer; } .shop-item:hover { border-color: var(--accent); transform: translateX(3px); } .shop-item-icon { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; } .shop-item-info { flex: 1; } .shop-item-name { font-family: var(--ff-mono); font-size: 0.58rem; font-weight: 700; color: var(--text); margin-bottom: 2px; } .shop-item-desc { font-family: var(--ff-body); font-size: 0.66rem; color: var(--text-dim); } .shop-item-price { font-family: var(--ff-mono); font-size: 0.82rem; font-weight: 700; color: var(--accent); flex-shrink: 0; display: flex; align-items: center; gap: 2px; } .shop-item-price.free { color: var(--accent2); } .shop-item.disabled { opacity: 0.45; pointer-events: none; } /* Enhanced shop layout */ .shop-header-bar { padding: 18px 20px 12px; border-bottom: 1px solid var(--border2); background: var(--panel); position: sticky; top: 0; z-index: 1; } .shop-scroll { max-height: 60vh; overflow-y: auto; padding: 8px 20px 4px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .shop-balance-val { color: var(--accent); font-family: var(--ff-mono); font-weight: 700; font-size: 1rem; } /* Owned / active states */ .shop-item-price.owned { color: #4caf50; font-weight: 700; } .shop-item-price.active-boost { color: var(--accent); font-weight: 700; } .shop-item.shop-item-owned { opacity: 0.75; border-color: #4caf5055; } .shop-item.shop-item-unaffordable { opacity: 0.55; } .shop-item.shop-item-unaffordable .shop-item-price { color: #888; } /* Theme swatch in shop */ .shop-theme-swatch { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--border2); } /* Theme dot lock state */ .lobby-theme-dot.locked-theme { opacity: 0.7; position: relative; } .theme-lock-badge { position: absolute; bottom: -6px; right: -6px; background: var(--bg); border: 1px solid var(--accent); border-radius: 6px; font-size: 0.55rem; font-family: var(--ff-mono); color: var(--accent); padding: 2px 4px; font-weight: 700; white-space: nowrap; pointer-events: none; line-height: 1.2; display: flex; align-items: center; gap: 2px; } .lobby-theme-dot { position: relative; } /* ═══════════════════════════════════════════════════════════════ DAILY STREAK ═══════════════════════════════════════════════════════════════ */ #overlay-streak .dialog { text-align: center; max-width: 340px; } .streak-days { display: flex; gap: 5px; justify-content: center; margin: 14px 0; } .streak-day { width: 34px; height: 44px; border-radius: 8px; border: 1.5px solid var(--border2); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .streak-day-label { font-family: var(--ff-mono); font-size: 0.36rem; color: var(--text-dim); letter-spacing: 0.04em; } .streak-day-coin { font-family: var(--ff-mono); font-size: 0.46rem; font-weight: 700; color: var(--text-dim); display: inline-flex; align-items: center; gap: 2px; } .streak-day.done { border-color: var(--gold); background: rgba(255, 204, 68, 0.08); } .streak-day.done .streak-day-coin { color: var(--gold); } .streak-day.today { border-color: var(--accent); background: var(--accent-deep); animation: glowBlink 0.7s ease-in-out infinite; } .streak-day.today .streak-day-coin { color: var(--accent); } .streak-reward-big { font-family: var(--ff-mono); font-size: 1.3rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 16px var(--gold-glow); margin: 6px 0; } #overlay-streak .streak-claim-btn { width: 100%; padding: 12px; background: transparent; border: 1.5px solid var(--gold); border-radius: var(--r); color: var(--gold); font-family: var(--ff-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t); box-shadow: 0 0 14px var(--gold-glow); } /* Hover fills the button with gold and switches the label to a fixed dark ink — no overlay pseudo-element, so the text is never covered. Scoped to #overlay-streak so the generic .fr-action-btn hover rules (and per-theme overrides) can't wash it out. */ #overlay-streak .streak-claim-btn:hover { color: #241a00; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 18px var(--gold-glow); } /* ═══════════════════════════════════════════════════════════════ SETTINGS ═══════════════════════════════════════════════════════════════ */ .settings-dialog { max-width: 380px; text-align: left; padding: 28px 24px 22px; } .settings-group { margin-bottom: 14px; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } .settings-row:last-child { border-bottom: none; } .settings-row-info { flex: 1; } .settings-row-label { font-family: var(--ff-body); font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 2px; } .settings-row-sub { font-family: var(--ff-body); font-size: 0.72rem; color: var(--text-dim); } .settings-section-label { font-family: var(--ff-mono); font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; margin-top: 4px; } .settings-danger-btn { width: 100%; padding: 10px; background: transparent; border: 1.5px solid rgba(180, 50, 50, 0.5); border-radius: var(--r); color: rgba(200, 80, 80, 0.8); font-family: var(--ff-mono); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all var(--t); } .settings-danger-btn:hover { border-color: #e05050; color: #e05050; background: rgba(180, 50, 50, 0.1); } .toggle-btn { width: 44px; height: 24px; border-radius: 100px; background: var(--border2); border: 1.5px solid var(--border2); cursor: pointer; transition: all 0.22s; position: relative; flex-shrink: 0; } .toggle-btn.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); transition: all 0.22s; } .toggle-btn.active .toggle-knob { left: 22px; background: var(--bg); } /* ═══════════════════════════════════════════════════════════════ THEME BUILDER (LEGACY MODAL RULES — unused, kept for reference) The theme builder is now the full-page .thm-fullscreen layout. NOTE: the old #overlay-theme-builder centering rule was removed because it re-centered the flex column and pushed the pinned topbar above the scroll origin (content hidden from top). ═══════════════════════════════════════════════════════════════ */ .tb-dialog { background: var(--surface); border: 1.5px solid var(--border2); border-radius: 12px; padding: 0; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-shadow: var(--shadow-deep); flex-shrink: 0; } .tb-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--border2); } .tb-header-left { display: flex; align-items: center; gap: 10px; } .tb-header-icon { font-size: 1rem; color: var(--accent); opacity: 0.7; } .tb-header-title { font-family: var(--ff-head); font-size: 1.3rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text); } .tb-close-btn { font-family: var(--ff-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.18em; padding: 6px 13px; border-radius: 4px; background: transparent; border: 1.5px solid var(--border2); color: var(--text-dim); cursor: pointer; transition: all 0.18s; } .tb-close-btn:hover { border-color: var(--accent); color: var(--accent); } .tb-section-label { font-family: var(--ff-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); padding: 14px 22px 6px; } .tb-section-sub { font-family: var(--ff-body); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--text-dim); } .tb-sound-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 22px 14px; border-bottom: 1px solid var(--border2); } .tb-row-label { font-family: var(--ff-mono); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text); } .tb-sound-controls { display: flex; align-items: center; gap: 10px; } .tb-toggle { width: 40px; height: 22px; border-radius: 100px; background: var(--border2); border: 1.5px solid var(--border2); cursor: pointer; position: relative; transition: all 0.2s; flex-shrink: 0; } .tb-toggle.active { background: var(--accent); border-color: var(--accent); } .tb-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.2s; } .tb-toggle.active .tb-knob { left: 20px; } .tb-slider { -webkit-appearance: none; appearance: none; width: 90px; height: 4px; border-radius: 2px; background: var(--border2); outline: none; cursor: pointer; } .tb-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; } .tb-vol-label { font-family: var(--ff-mono); font-size: 0.5rem; color: var(--text-dim); min-width: 30px; } .tb-swatches-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 22px 16px; border-bottom: 1px solid var(--border2); } .tb-swatch { border-radius: 5px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.18s; position: relative; } .tb-swatch:hover { border-color: var(--accent); transform: scale(1.04); } .tb-swatch.active { border-color: var(--accent); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } .tb-swatch-board { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); height: 52px; width: 100%; } .tb-swatch-cell { display: block; } .tb-swatch-label { display: block; text-align: center; font-family: var(--ff-mono); font-size: 0.44rem; font-weight: 700; letter-spacing: 0.12em; padding: 4px 4px 5px; text-transform: uppercase; } .tb-color-preview-bar { display: flex; height: 18px; margin: 0 22px 10px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border2); } .tb-cpb-seg { flex: 1; } .tb-color-grid { padding: 0 22px 8px; } .tb-color-row { display: grid; grid-template-columns: 100px 1fr 100px 1fr; gap: 8px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); } .tb-color-row:last-child { border-bottom: none; } .tb-color-label { font-family: var(--ff-body); font-size: 0.8rem; font-weight: 600; color: var(--text); } .tb-color-pick-wrap { display: flex; align-items: center; gap: 8px; } .tb-color-pick { width: 28px; height: 22px; border-radius: 4px; border: 1.5px solid var(--border2); cursor: pointer; padding: 0; background: none; flex-shrink: 0; } .tb-color-pick::-webkit-color-swatch-wrapper { padding: 1px; } .tb-color-pick::-webkit-color-swatch { border: none; border-radius: 2px; } .tb-color-hex { font-family: var(--ff-mono); font-size: 0.48rem; color: var(--text-dim); letter-spacing: 0.04em; } .tb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--border2); } .tb-btn-reset { font-family: var(--ff-mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 18px; border-radius: 4px; background: transparent; border: 1.5px solid var(--border2); color: var(--text-dim); cursor: pointer; transition: all 0.18s; } .tb-btn-reset:hover { border-color: var(--accent); color: var(--accent); } .tb-btn-apply { font-family: var(--ff-mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 20px; border-radius: 4px; background: var(--accent); border: 1.5px solid var(--accent); color: var(--btn-fg, #ffffff); cursor: pointer; transition: all 0.18s; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } .tb-btn-apply:hover { filter: brightness(1.1); transform: translateY(-1px); } /* Graphics Quality Selector */ /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — 5 mandatory breakpoints Laptop: 1281–1440px | Small Laptop: 1025–1280px Tablet: 769–1024px | Mobile: 481–768px Small Mobile: ≤480px Each step reduces all scalable values by ~20–30% ═══════════════════════════════════════════════════════════════ */ /* ================================================================ LAPTOP — 1281px to 1440px (~10% reduction from base) ================================================================ */ @media (min-width: 1281px) and (max-width: 1440px) { /* Lobby brand / title */ .lobby-title-flow { font-size: clamp(2.5rem, 4.5vw, 4rem); } .lobby-title-line { font-size: clamp(2.5rem, 4.5vw, 4rem); } .lobby-tagline { font-size: 0.82rem; } .lobby-eyebrow { font-size: 0.6rem; } .lobby-play-btn { font-size: 1.22rem; padding: 15px 22px; } .lobby-play-arrow { font-size: 1.1rem; } .lobby-sel-hint { font-size: 0.66rem; } .lobby-coin-val { font-size: 1.28rem; } .lobby-coin-earn { font-size: 0.66rem; padding: 5px 13px; } .lobby-coin-label { font-size: 0.92rem; } .lobby-icon-btn { width: 40px; height: 40px; } .lobby-icon-btn svg { width: 19px; height: 19px; } .lobby-top-actions { padding: 13px 19px 8px; gap: 7px; } .lobby-brand { margin-bottom: 25px; } .lobby-layout { padding-top: 42px; } .lobby-stat-num { font-size: 1.05rem; } .lobby-stat-lbl { font-size: 0.62rem; } .lobby-hof-name { font-size: 0.96rem; } .lobby-hof-pos { font-size: 0.8rem; } .lobby-hof-wins { font-size: 0.82rem; } .lobby-hof-empty { font-size: 0.96rem; } .diff-card-name { font-size: 1.02rem; } .diff-card-size { font-size: 0.64rem; } .lb-empty { font-size: 0.66rem; } .lb-sec-label { font-size: 0.6rem; } /* Game screen */ .game-logo { font-size: 1.3rem; } .game-logo-sub { font-size: 0.54rem; } .series-label { font-size: 0.63rem; } .icon-btn { width: 34px; height: 34px; } .icon-btn svg { width: 15px; height: 15px; } .coin-count { font-size: 0.66rem; } .score-num { font-size: 1.34rem; } .score-player { font-size: 0.54rem; } .score-name { font-size: 0.64rem; } .score-vs { font-size: 0.57rem; } .fill-track-label { font-size: 0.54rem; } .fill-pct { font-size: 0.57rem; } .round-log-label { font-size: 0.54rem; } .turn-text { font-size: 0.87rem; } .abtn { font-size: 0.52rem; padding: 10px 6px; } .ro { font-size: 0.42rem; } /* Popups / dialogs */ .dialog { max-width: 293px; padding: 30px 34px 26px; } .result-box { max-width: 293px; padding: 33px 37px 27px; } .dialog-title { font-size: 1.32rem; } .dialog-subtitle { font-size: 0.84rem; } .primary-btn { font-size: 0.46rem; padding: 11px; } .rbtn { font-size: 0.54rem; padding: 10px; } .res-title { font-size: 1.72rem; } .res-sub { font-size: 0.78rem; } .rs-val { font-size: 1.05rem; } .rs-lbl { font-size: 0.38rem; } .cbtn { font-size: 0.58rem; padding: 11px; } .champ-title { font-size: 1.72rem; } .champ-sub { font-size: 0.84rem; } .stat-num { font-size: 1.15rem; } .stat-lbl { font-size: 0.4rem; } .fs-num { font-size: 2.1rem; } .fs-player { font-size: 0.42rem; } .fs-name { font-size: 0.69rem; } .replay-row { font-size: 0.67rem; } .replay-moves { font-size: 0.54rem; } .rn { font-size: 0.42rem; } .lbe-name { font-size: 0.77rem; } .lbe-score { font-size: 0.56rem; } .lb-title { font-size: 0.42rem; } .settings-row-label { font-size: 0.87rem; } .settings-row-sub { font-size: 0.69rem; } .settings-section-label { font-size: 0.48rem; } .settings-danger-btn { font-size: 0.52rem; } /* Shop */ .shop-title { font-size: 1.25rem; } .shop-balance-row { font-size: 0.69rem; } .shop-balance-val { font-size: 0.96rem; } .shop-section-label { font-size: 0.4rem; } .shop-item-name { font-size: 0.56rem; } .shop-item-desc { font-size: 0.63rem; } .shop-item-price { font-size: 0.79rem; } /* Level select popup */ .level-select-dialog { max-width: 423px; } .lvl-dlg-inner { padding: 22px 20px 18px; } .lvl-dlg-title { font-size: 1.44rem; } .lvl-dlg-sub { font-size: 0.75rem; } .lvl-dlg-badge { font-size: 0.46rem; } /* Theme builder */ .tb-dialog { max-width: 423px; } .tb-header-title { font-size: 1.25rem; } .tb-header-icon { font-size: 0.96rem; } .tb-close-btn { font-size: 0.48rem; padding: 5px 12px; } .tb-section-label { font-size: 0.48rem; } .tb-section-sub { font-size: 0.67rem; } .tb-section-title { font-size: 0.51rem; } .tb-row-label { font-size: 0.52rem; } .tb-color-label { font-size: 0.77rem; } .tb-color-hex { font-size: 0.46rem; } .tb-color-name { font-size: 0.46rem; } .tb-vol-label { font-size: 0.48rem; } .tb-swatch-label { font-size: 0.42rem; } .tb-btn-apply { font-size: 0.5rem; padding: 9px 19px; } .tb-btn-reset { font-size: 0.5rem; padding: 8px 17px; } /* Streak */ .streak-day-coin { font-size: 0.44rem; } .streak-reward-big { font-size: 1.25rem; } .streak-claim-btn { font-size: 0.58rem; } /* Notifications */ .notification { font-size: 0.62rem; } .tooltip { font-size: 0.56rem; } .coin-earn-pop { font-size: 0.63rem; } /* Ad overlay */ .ad-card { max-width: 300px; } .ad-card-topbar { padding: 9px 13px; } .ad-topbar-adlabel { font-size: 0.53rem; } .ad-topbar-skip { font-size: 0.56rem; padding: 5px 13px; } .ad-content-box { margin: 9px; min-height: 210px; } .ad-content-box iframe { min-height: 210px; } .ad-card-footer { font-size: 0.65rem; padding: 9px 14px; } /* Loading screen */ .load-logo-flow { font-size: clamp(3.2rem, 9vw, 5.5rem); } .load-logo-line { font-size: clamp(3.2rem, 9vw, 5.5rem); } .load-subtitle { font-size: 0.6rem; letter-spacing: 0.48em; } .load-percent { font-size: 0.68rem; } .load-bar-wrap { width: 268px; } } /* ================================================================ SMALL LAPTOP — 1025px to 1280px (~25% reduction from Laptop) ================================================================ */ @media (min-width: 1025px) and (max-width: 1280px) { /* Lobby layout — stack to column, centered */ #lobby-screen { align-items: center; justify-content: center; } .lobby-layout { flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px 24px; max-width: 560px; } .lobby-left { max-width: 100%; align-items: center; text-align: center; } .lobby-right { width: 100%; max-width: 480px; } .lobby-brand { text-align: center !important; margin-bottom: 14px; } .lobby-stat-card { display: none; } .lobby-themes-card { display: block; padding: 12px 14px; margin: auto; width: fit-content; } .lobby-themes-card .lobby-theme-dot { width: 28px; height: 28px; } .lobby-divider { margin: 12px 0; } /* Lobby brand / title */ .lobby-title-flow { font-size: clamp(2rem, 4vw, 3.2rem); } .lobby-title-line { font-size: clamp(2rem, 4vw, 3.2rem); } .lobby-tagline { font-size: 0.66rem; } .lobby-eyebrow { font-size: 0.48rem; } .lobby-play-btn { font-size: 0.98rem; padding: 13px 18px; } .lobby-play-arrow { font-size: 0.88rem; } .lobby-sel-hint { font-size: 0.53rem; } .lobby-coin-val { font-size: 1.02rem; } .lobby-coin-earn { font-size: 0.53rem; padding: 4px 10px; } .lobby-coin-label { font-size: 0.74rem; } .lobby-icon-btn { width: 32px; height: 32px; } .lobby-icon-btn svg { width: 15px; height: 15px; } .lobby-top-actions { padding: 10px 15px 6px; gap: 6px; } .lobby-brand { margin-bottom: 19px; } .lobby-stat-num { font-size: 0.84rem; } .lobby-stat-lbl { font-size: 0.5rem; } .lobby-hof-name { font-size: 0.77rem; } .lobby-hof-pos { font-size: 0.64rem; } .lobby-hof-wins { font-size: 0.66rem; } .lobby-hof-empty { font-size: 0.77rem; } .diff-card-name { font-size: 0.82rem; } .diff-card-size { font-size: 0.51rem; } .lb-empty { font-size: 0.53rem; } .lb-sec-label { font-size: 0.48rem; } /* Game screen */ .game-logo { font-size: 1.04rem; } .game-logo-sub { font-size: 0.43rem; } .series-label { font-size: 0.5rem; } .icon-btn { width: 27px; height: 27px; } .icon-btn svg { width: 12px; height: 12px; } .coin-count { font-size: 0.53rem; } .score-num { font-size: 1.07rem; } .score-player { font-size: 0.43rem; } .score-name { font-size: 0.51rem; } .score-vs { font-size: 0.46rem; } .fill-track-label { font-size: 0.43rem; } .fill-pct { font-size: 0.46rem; } .round-log-label { font-size: 0.43rem; } .turn-text { font-size: 0.7rem; } .abtn { font-size: 0.42rem; padding: 8px 5px; } .ro { font-size: 0.34rem; } /* Popups / dialogs */ .dialog { max-width: 276px; padding: 24px 27px 21px; } .result-box { max-width: 276px; padding: 26px 30px 22px; } .dialog-title { font-size: 1.06rem; } .dialog-subtitle { font-size: 0.67rem; } .primary-btn { font-size: 0.37rem; padding: 9px; } .rbtn { font-size: 0.43rem; padding: 8px; } .res-title { font-size: 1.37rem; } .res-sub { font-size: 0.62rem; } .rs-val { font-size: 0.84rem; } .rs-lbl { font-size: 0.3rem; } .cbtn { font-size: 0.46rem; padding: 9px; } .champ-title { font-size: 1.37rem; } .champ-sub { font-size: 0.67rem; } .stat-num { font-size: 0.92rem; } .stat-lbl { font-size: 0.32rem; } .fs-num { font-size: 1.68rem; } .fs-player { font-size: 0.34rem; } .fs-name { font-size: 0.55rem; } .replay-row { font-size: 0.54rem; } .replay-moves { font-size: 0.43rem; } .rn { font-size: 0.34rem; } .lbe-name { font-size: 0.61rem; } .lbe-score { font-size: 0.45rem; } .lb-title { font-size: 0.34rem; } .settings-row-label { font-size: 0.7rem; } .settings-row-sub { font-size: 0.55rem; } .settings-section-label { font-size: 0.38rem; } .settings-danger-btn { font-size: 0.42rem; } /* Shop */ .shop-title { font-size: 1rem; } .shop-balance-row { font-size: 0.55rem; } .shop-balance-val { font-size: 0.77rem; } .shop-section-label { font-size: 0.32rem; } .shop-item-name { font-size: 0.45rem; } .shop-item-desc { font-size: 0.5rem; } .shop-item-price { font-size: 0.63rem; } /* Level select popup */ .level-select-dialog { max-width: 390px; } .lvl-dlg-inner { padding: 18px 16px 14px; } .lvl-dlg-title { font-size: 1.15rem; } .lvl-dlg-sub { font-size: 0.6rem; } .lvl-dlg-badge { font-size: 0.37rem; } /* Theme builder */ .tb-dialog { max-width: 390px; } .tb-header-title { font-size: 1rem; } .tb-header-icon { font-size: 0.77rem; } .tb-close-btn { font-size: 0.38rem; padding: 4px 10px; } .tb-section-label { font-size: 0.38rem; } .tb-section-sub { font-size: 0.54rem; } .tb-section-title { font-size: 0.41rem; } .tb-row-label { font-size: 0.42rem; } .tb-color-label { font-size: 0.61rem; } .tb-color-hex { font-size: 0.37rem; } .tb-color-name { font-size: 0.37rem; } .tb-vol-label { font-size: 0.38rem; } .tb-swatch-label { font-size: 0.34rem; } .tb-btn-apply { font-size: 0.4rem; padding: 7px 15px; } .tb-btn-reset { font-size: 0.4rem; padding: 6px 13px; } /* Streak */ .streak-day-coin { font-size: 0.35rem; } .streak-reward-big { font-size: 1rem; } .streak-claim-btn { font-size: 0.46rem; } /* Notifications */ .notification { font-size: 0.5rem; } .tooltip { font-size: 0.45rem; } .coin-earn-pop { font-size: 0.5rem; } /* Ad overlay */ .ad-card { max-width: 260px; } .ad-card-topbar { padding: 8px 11px; } .ad-topbar-adlabel { font-size: 0.42rem; } .ad-topbar-skip { font-size: 0.45rem; padding: 4px 10px; } .ad-content-box { margin: 8px; min-height: 178px; } .ad-content-box iframe { min-height: 178px; } .ad-card-footer { font-size: 0.52rem; padding: 8px 12px; } /* Loading screen */ .load-logo-flow { font-size: clamp(2.6rem, 8vw, 4.4rem); } .load-logo-line { font-size: clamp(2.6rem, 8vw, 4.4rem); } .load-subtitle { font-size: 0.48rem; letter-spacing: 0.38em; } .load-percent { font-size: 0.54rem; } .load-bar-wrap { width: 214px; } } /* ================================================================ TABLET — 769px to 1024px (~25% reduction from Small Laptop) Lobby: single-column layout, game screen adjustments ================================================================ */ @media (min-width: 769px) and (max-width: 1024px) { /* Lobby layout — stack to column, centered */ #lobby-screen { align-items: center; justify-content: center; } .lobby-layout { flex-direction: column; align-items: center; max-width: 520px; gap: 12px; padding: 24px 18px 20px; margin: auto; } .lobby-left { max-width: 100%; align-items: center; text-align: center; } .lobby-right { width: 100%; max-width: 480px; } .lobby-brand { text-align: center !important; margin-bottom: 10px; } .lobby-stat-card { display: none; } .lobby-themes-card { display: block; padding: 10px 12px; margin: auto; width: fit-content; } .lobby-themes-card .lobby-theme-dot { width: 26px; height: 26px; } .lobby-divider { margin: 10px 0; } /* Lobby brand / title */ .lobby-title-flow { font-size: clamp(1.6rem, 3.8vw, 2.6rem); } .lobby-title-line { font-size: clamp(1.6rem, 3.8vw, 2.6rem); } .lobby-tagline { font-size: 0.52rem; } .lobby-eyebrow { font-size: 0.38rem; } .lobby-play-btn { font-size: 0.78rem; padding: 10px 14px; } .lobby-play-arrow { font-size: 0.7rem; } .lobby-sel-hint { font-size: 0.42rem; } .lobby-coin-val { font-size: 0.82rem; } .lobby-coin-earn { font-size: 0.42rem; padding: 3px 8px; } .lobby-coin-label { font-size: 0.59rem; } .lobby-icon-btn { width: 26px; height: 26px; } .lobby-icon-btn svg { width: 12px; height: 12px; } .lobby-top-actions { padding: 8px 12px 5px; gap: 5px; } .lobby-stat-num { font-size: 0.67rem; } .lobby-stat-lbl { font-size: 0.4rem; } .lobby-hof-name { font-size: 0.61rem; } .lobby-hof-pos { font-size: 0.51rem; } .lobby-hof-wins { font-size: 0.53rem; } .lobby-hof-empty { font-size: 0.61rem; } .diff-card-name { font-size: 0.65rem; } .diff-card-size { font-size: 0.41rem; } .lb-empty { font-size: 0.42rem; } .lb-sec-label { font-size: 0.38rem; } /* Game screen */ .game-logo { font-size: 0.83rem; } .game-logo-sub { font-size: 0.34rem; } .series-label { font-size: 0.4rem; } .icon-btn { width: 22px; height: 22px; } .icon-btn svg { width: 10px; height: 10px; } .coin-count { font-size: 0.42rem; } .score-num { font-size: 0.86rem; } .score-player { font-size: 0.34rem; } .score-name { font-size: 0.41rem; } .score-vs { font-size: 0.37rem; } .fill-track-label { font-size: 0.34rem; } .fill-pct { font-size: 0.37rem; } .round-log-label { font-size: 0.34rem; } .turn-text { font-size: 0.56rem; } .abtn { font-size: 0.34rem; padding: 6px 4px; } .ro { font-size: 0.27rem; } /* Popups / dialogs */ .dialog { max-width: 220px; padding: 19px 21px 17px; } .result-box { max-width: 220px; padding: 21px 24px 17px; } .dialog-title { font-size: 0.85rem; } .dialog-subtitle { font-size: 0.54rem; } .primary-btn { font-size: 0.3rem; padding: 7px; } .rbtn { font-size: 0.34rem; padding: 6px; } .res-title { font-size: 1.1rem; } .res-sub { font-size: 0.5rem; } .rs-val { font-size: 0.67rem; } .rs-lbl { font-size: 0.24rem; } .cbtn { font-size: 0.37rem; padding: 7px; } .champ-title { font-size: 1.1rem; } .champ-sub { font-size: 0.54rem; } .stat-num { font-size: 0.74rem; } .stat-lbl { font-size: 0.26rem; } .fs-num { font-size: 1.34rem; } .fs-player { font-size: 0.27rem; } .fs-name { font-size: 0.44rem; } .replay-row { font-size: 0.43rem; } .replay-moves { font-size: 0.34rem; } .rn { font-size: 0.27rem; } .lbe-name { font-size: 0.49rem; } .lbe-score { font-size: 0.36rem; } .lb-title { font-size: 0.27rem; } .settings-row-label { font-size: 0.56rem; } .settings-row-sub { font-size: 0.44rem; } .settings-section-label { font-size: 0.3rem; } .settings-danger-btn { font-size: 0.34rem; } /* Shop */ .shop-title { font-size: 0.8rem; } .shop-balance-row { font-size: 0.44rem; } .shop-balance-val { font-size: 0.61rem; } .shop-section-label { font-size: 0.26rem; } .shop-item-name { font-size: 0.36rem; } .shop-item-desc { font-size: 0.4rem; } .shop-item-price { font-size: 0.5rem; } /* Level select popup */ .level-select-dialog { max-width: 300px; } .lvl-dlg-inner { padding: 14px 12px 11px; } .lvl-dlg-title { font-size: 0.92rem; } .lvl-dlg-sub { font-size: 0.48rem; } .lvl-dlg-badge { font-size: 0.3rem; } /* Theme builder */ .tb-dialog { max-width: 300px; } .tb-header-title { font-size: 0.8rem; } .tb-header-icon { font-size: 0.61rem; } .tb-close-btn { font-size: 0.3rem; padding: 3px 8px; } .tb-section-label { font-size: 0.3rem; } .tb-section-sub { font-size: 0.43rem; } .tb-section-title { font-size: 0.33rem; } .tb-row-label { font-size: 0.34rem; } .tb-color-label { font-size: 0.49rem; } .tb-color-hex { font-size: 0.3rem; } .tb-color-name { font-size: 0.3rem; } .tb-vol-label { font-size: 0.3rem; } .tb-swatch-label { font-size: 0.27rem; } .tb-btn-apply { font-size: 0.32rem; padding: 6px 12px; } .tb-btn-reset { font-size: 0.32rem; padding: 5px 10px; } /* Streak */ .streak-day-coin { font-size: 0.28rem; } .streak-reward-big { font-size: 0.8rem; } .streak-claim-btn { font-size: 0.37rem; } /* Notifications */ .notification { font-size: 0.4rem; } .tooltip { font-size: 0.36rem; } .coin-earn-pop { font-size: 0.4rem; } /* Ad overlay */ .ad-card { max-width: 220px; } .ad-card-topbar { padding: 7px 9px; } .ad-topbar-adlabel { font-size: 0.34rem; } .ad-topbar-skip { font-size: 0.36rem; padding: 3px 8px; } .ad-content-box { margin: 7px; min-height: 150px; } .ad-content-box iframe { min-height: 150px; } .ad-card-footer { font-size: 0.42rem; padding: 7px 10px; } /* Loading screen */ .load-logo-flow { font-size: clamp(2rem, 7vw, 3.5rem); } .load-logo-line { font-size: clamp(2rem, 7vw, 3.5rem); } .load-subtitle { font-size: 0.38rem; letter-spacing: 0.3em; } .load-percent { font-size: 0.43rem; } .load-bar-wrap { width: 170px; } } /* ================================================================ MOBILE — 481px to 768px (~25% reduction from Tablet) Lobby: stacked single-column, game: compact layout ================================================================ */ @media (min-width: 481px) and (max-width: 768px) { /* Lobby — stack to column, aligned to bottom */ #lobby-screen { flex-direction: column; justify-content: flex-end; align-items: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lobby-top-actions { position: sticky; top: 0; align-self: stretch; justify-content: center; z-index: 10; } .lobby-layout { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 14px max(24px, env(safe-area-inset-bottom, 24px)); width: 100%; flex: 0 0 auto; margin-top: auto; padding-top: 18px; } .lobby-left { max-width: 100%; } .lobby-right { width: 100%; } .lobby-stat-card { display: none; } .lobby-themes-card { display: block; padding: 10px 12px; } .lobby-themes-card .lobby-theme-dot { width: 26px; height: 26px; } .lobby-brand { margin-bottom: 10px; } .lobby-divider { margin: 10px 0; } /* Game screen */ #s-game { justify-content: flex-start; align-items: center; padding: 6px 8px 6px; } #s-game .game-topbar, #s-game .score-panel, #s-game .series-progress, #s-game .round-log-wrap, #s-game .turn-bar { flex-shrink: 0; width: 100%; } #s-game .board-wrap { flex: 1 1 0; display: flex; align-items: center; justify-content: center; margin: 4px auto; width: 100%; min-height: 0; } #s-game .btn-row { flex-shrink: 0; margin-top: auto; padding-bottom: env(safe-area-inset-bottom, 4px); width: 100%; } .game-topbar { flex-wrap: nowrap; gap: 0; padding: 0 2px 5px; width: 100%; min-width: 0; } /* Lobby brand / title */ .lobby-title-flow { font-size: clamp(1.3rem, 5vw, 2rem); } .lobby-title-line { font-size: clamp(1.3rem, 5vw, 2rem); } .lobby-tagline { font-size: 0.41rem; } .lobby-eyebrow { font-size: 0.3rem; } .lobby-play-btn { font-size: 0.62rem; padding: 8px 11px; } .lobby-play-arrow { font-size: 0.56rem; } .lobby-sel-hint { font-size: 0.34rem; } .lobby-coin-val { font-size: 0.65rem; } .lobby-coin-earn { font-size: 0.34rem; padding: 3px 6px; } .lobby-coin-label { font-size: 0.47rem; } .lobby-icon-btn { width: 21px; height: 21px; } .lobby-icon-btn svg { width: 10px; height: 10px; } .lobby-top-actions { padding: 6px 10px 4px; gap: 4px; } .lobby-stat-num { font-size: 0.54rem; } .lobby-stat-lbl { font-size: 0.32rem; } .lobby-hof-name { font-size: 0.49rem; } .lobby-hof-pos { font-size: 0.41rem; } .lobby-hof-wins { font-size: 0.42rem; } .lobby-hof-empty { font-size: 0.49rem; } .diff-card-name { font-size: 0.52rem; } .diff-card-size { font-size: 0.33rem; } .lb-empty { font-size: 0.34rem; } .lb-sec-label { font-size: 0.3rem; } /* Game screen text */ .game-logo { font-size: clamp(0.6rem, 2.8vw, 0.78rem); } .game-logo-sub { font-size: 0.28rem; } .series-label { font-size: clamp(0.3rem, 1.4vw, 0.38rem); } .icon-btn { width: 18px; height: 18px; } .icon-btn svg { width: 8px; height: 8px; } .coin-display { padding: 3px 6px 3px 4px; gap: 3px; } .coin-count { font-size: 0.34rem; } .score-num { font-size: 0.69rem; } .score-player { font-size: 0.27rem; } .score-name { font-size: 0.33rem; } .score-vs { font-size: 0.3rem; } .fill-track-label { font-size: 0.27rem; } .fill-pct { font-size: 0.3rem; } .round-log-label { font-size: 0.27rem; } .turn-text { font-size: 0.45rem; } .abtn { font-size: 0.27rem; padding: 5px 3px; } .ro { font-size: 0.22rem; } /* Popups / dialogs */ .dialog { max-width: 88vw; padding: 15px 17px 13px; } .result-box { max-width: 88vw; padding: 17px 19px 14px; } .dialog-title { font-size: 0.68rem; } .dialog-subtitle { font-size: 0.43rem; } .primary-btn { font-size: 0.24rem; padding: 6px; } .rbtn { font-size: 0.27rem; padding: 5px; } .res-title { font-size: 0.88rem; } .res-sub { font-size: 0.4rem; } .rs-val { font-size: 0.54rem; } .rs-lbl { font-size: 0.19rem; } .cbtn { font-size: 0.3rem; padding: 6px; } .champ-title { font-size: 0.88rem; } .champ-sub { font-size: 0.43rem; } .stat-num { font-size: 0.59rem; } .stat-lbl { font-size: 0.21rem; } .fs-num { font-size: 1.07rem; } .fs-player { font-size: 0.22rem; } .fs-name { font-size: 0.35rem; } .replay-row { font-size: 0.34rem; } .replay-moves { font-size: 0.27rem; } .rn { font-size: 0.22rem; } .lbe-name { font-size: 0.39rem; } .lbe-score { font-size: 0.29rem; } .lb-title { font-size: 0.22rem; } .settings-row-label { font-size: 0.45rem; } .settings-row-sub { font-size: 0.35rem; } .settings-section-label { font-size: 0.24rem; } .settings-danger-btn { font-size: 0.27rem; } /* Shop */ .shop-title { font-size: 0.64rem; } .shop-balance-row { font-size: 0.35rem; } .shop-balance-val { font-size: 0.49rem; } .shop-section-label { font-size: 0.21rem; } .shop-item-name { font-size: 0.29rem; } .shop-item-desc { font-size: 0.32rem; } .shop-item-price { font-size: 0.4rem; } /* Level select popup */ .level-select-dialog { max-width: 88vw; } .lvl-dlg-inner { padding: 11px 10px 9px; } .lvl-dlg-title { font-size: 0.74rem; } .lvl-dlg-sub { font-size: 0.38rem; } .lvl-dlg-badge { font-size: 0.24rem; } /* Theme builder */ .tb-dialog { max-width: 88vw; } .tb-header-title { font-size: 0.64rem; } .tb-header-icon { font-size: 0.49rem; } .tb-close-btn { font-size: 0.24rem; padding: 3px 6px; } .tb-section-label { font-size: 0.24rem; } .tb-section-sub { font-size: 0.34rem; } .tb-section-title { font-size: 0.26rem; } .tb-row-label { font-size: 0.27rem; } .tb-color-label { font-size: 0.39rem; } .tb-color-hex { font-size: 0.24rem; } .tb-color-name { font-size: 0.24rem; } .tb-vol-label { font-size: 0.24rem; } .tb-swatch-label { font-size: 0.22rem; } .tb-btn-apply { font-size: 0.26rem; padding: 5px 10px; } .tb-btn-reset { font-size: 0.26rem; padding: 4px 8px; } /* Streak */ .streak-day-coin { font-size: 0.22rem; } .streak-reward-big { font-size: 0.64rem; } .streak-claim-btn { font-size: 0.3rem; } /* Notifications */ .notification { font-size: 0.32rem; } .tooltip { font-size: 0.29rem; } .coin-earn-pop { font-size: 0.32rem; } /* Ad overlay */ .ad-card { max-width: 185px; } .ad-card-topbar { padding: 6px 7px; } .ad-topbar-adlabel { font-size: 0.27rem; } .ad-topbar-skip { font-size: 0.29rem; padding: 2px 6px; } .ad-content-box { margin: 6px; min-height: 126px; } .ad-content-box iframe { min-height: 126px; } .ad-card-footer { font-size: 0.34rem; padding: 6px 8px; } /* Loading screen */ .load-logo-flow { font-size: clamp(1.6rem, 6vw, 2.8rem); } .load-logo-line { font-size: clamp(1.6rem, 6vw, 2.8rem); } .load-subtitle { font-size: 0.3rem; letter-spacing: 0.24em; } .load-percent { font-size: 0.34rem; } .load-bar-wrap { width: 136px; } } /* ================================================================ SMALL MOBILE — ≤ 480px (~25% reduction from Mobile) Lobby: compact stacked, game: minimal footprint ================================================================ */ @media (max-width: 480px) { /* Lobby — stack to column */ #lobby-screen { flex-direction: column; justify-content: flex-end; align-items: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lobby-top-actions { position: sticky; top: 0; align-self: stretch; justify-content: center; z-index: 10; } .lobby-layout { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px max(18px, env(safe-area-inset-bottom, 18px)); width: 100%; flex: 0 0 auto; margin-top: auto; padding-top: 14px; } .lobby-left { max-width: 100%; } .lobby-right { width: 100%; } .lobby-stat-card { display: none; } .lobby-themes-card { display: block; padding: 8px 10px; } .lobby-themes-card .lobby-theme-dot { width: 22px; height: 22px; } .lobby-brand { margin-bottom: 7px; } .lobby-divider { margin: 8px 0; } .diff-cards-row { gap: 5px; } .diff-card { padding: 8px 7px 7px; } /* Game screen */ #s-game { justify-content: flex-start; align-items: center; padding: 4px 6px 4px; } #s-game .game-topbar, #s-game .score-panel, #s-game .series-progress, #s-game .round-log-wrap, #s-game .turn-bar { flex-shrink: 0; width: 100%; } #s-game .board-wrap { flex: 1 1 0; display: flex; align-items: center; justify-content: center; margin: 3px auto; width: 100%; min-height: 0; } #s-game .btn-row { flex-shrink: 0; margin-top: auto; padding-bottom: env(safe-area-inset-bottom, 3px); width: 100%; } .game-topbar { flex-wrap: nowrap; gap: 0; padding: 0 1px 4px; width: 100%; min-width: 0; } /* Lobby brand / title */ .lobby-title-flow { font-size: clamp(1rem, 4vw, 1.55rem); } .lobby-title-line { font-size: clamp(1rem, 4vw, 1.55rem); } .lobby-tagline { font-size: 0.33rem; } .lobby-eyebrow { font-size: 0.24rem; } .lobby-play-btn { font-size: 0.5rem; padding: 6px 9px; } .lobby-play-arrow { font-size: 0.45rem; } .lobby-sel-hint { font-size: 0.27rem; } .lobby-coin-val { font-size: 0.52rem; } .lobby-coin-earn { font-size: 0.27rem; padding: 2px 5px; } .lobby-coin-label { font-size: 0.38rem; } .lobby-icon-btn { width: 17px; height: 17px; } .lobby-icon-btn svg { width: 8px; height: 8px; } .lobby-top-actions { padding: 5px 8px 3px; gap: 3px; } .lobby-stat-num { font-size: 0.43rem; } .lobby-stat-lbl { font-size: 0.26rem; } .lobby-hof-name { font-size: 0.39rem; } .lobby-hof-pos { font-size: 0.33rem; } .lobby-hof-wins { font-size: 0.34rem; } .lobby-hof-empty { font-size: 0.39rem; } .diff-card-name { font-size: 0.42rem; } .diff-card-size { font-size: 0.26rem; } .lb-empty { font-size: 0.27rem; } .lb-sec-label { font-size: 0.24rem; } /* Game screen text */ .game-logo { font-size: clamp(0.46rem, 2.2vw, 0.6rem); } .game-logo-sub { display: none; } .series-label { font-size: clamp(0.24rem, 1.1vw, 0.3rem); } .icon-btn { width: 14px; height: 14px; } .icon-btn svg { width: 6px; height: 6px; } .coin-display { padding: 2px 5px 2px 3px; gap: 2px; } .coin-count { font-size: 0.27rem; } .score-num { font-size: 0.55rem; } .score-player { font-size: 0.22rem; } .score-name { font-size: 0.26rem; } .score-vs { font-size: 0.24rem; } .fill-track-label { font-size: 0.22rem; } .fill-pct { font-size: 0.24rem; } .round-log-label { font-size: 0.22rem; } .turn-text { font-size: 0.36rem; } .abtn { font-size: 0.22rem; padding: 4px 3px; } .ro { font-size: 0.18rem; } /* Popups / dialogs */ .dialog { max-width: 94vw; padding: 12px 13px 10px; } .result-box { max-width: 94vw; padding: 13px 15px 11px; } .dialog-title { font-size: 0.54rem; } .dialog-subtitle { font-size: 0.34rem; } .primary-btn { font-size: 0.19rem; padding: 5px; } .rbtn { font-size: 0.22rem; padding: 4px; } .res-title { font-size: 0.7rem; } .res-sub { font-size: 0.32rem; } .rs-val { font-size: 0.43rem; } .rs-lbl { font-size: 0.15rem; } .cbtn { font-size: 0.24rem; padding: 5px; } .champ-title { font-size: 0.7rem; } .champ-sub { font-size: 0.34rem; } .stat-num { font-size: 0.47rem; } .stat-lbl { font-size: 0.17rem; } .fs-num { font-size: 0.86rem; } .fs-player { font-size: 0.18rem; } .fs-name { font-size: 0.28rem; } .replay-row { font-size: 0.27rem; } .replay-moves { font-size: 0.22rem; } .rn { font-size: 0.18rem; } .lbe-name { font-size: 0.31rem; } .lbe-score { font-size: 0.23rem; } .lb-title { font-size: 0.18rem; } .settings-row-label { font-size: 0.36rem; } .settings-row-sub { font-size: 0.28rem; } .settings-section-label { font-size: 0.19rem; } .settings-danger-btn { font-size: 0.22rem; } /* Shop */ .shop-title { font-size: 0.51rem; } .shop-balance-row { font-size: 0.28rem; } .shop-balance-val { font-size: 0.39rem; } .shop-section-label { font-size: 0.17rem; } .shop-item-name { font-size: 0.23rem; } .shop-item-desc { font-size: 0.26rem; } .shop-item-price { font-size: 0.32rem; } /* Level select popup */ .level-select-dialog { max-width: 94vw; } .lvl-dlg-inner { padding: 9px 8px 7px; } .lvl-dlg-title { font-size: 0.59rem; } .lvl-dlg-sub { font-size: 0.3rem; } .lvl-dlg-badge { font-size: 0.19rem; } /* Theme builder */ .tb-dialog { max-width: 94vw; } .tb-header-title { font-size: 0.51rem; } .tb-header-icon { font-size: 0.39rem; } .tb-close-btn { font-size: 0.19rem; padding: 2px 5px; } .tb-section-label { font-size: 0.19rem; } .tb-section-sub { font-size: 0.27rem; } .tb-section-title { font-size: 0.21rem; } .tb-row-label { font-size: 0.22rem; } .tb-color-label { font-size: 0.31rem; } .tb-color-hex { font-size: 0.19rem; } .tb-color-name { font-size: 0.19rem; } .tb-vol-label { font-size: 0.19rem; } .tb-swatch-label { font-size: 0.17rem; } .tb-btn-apply { font-size: 0.21rem; padding: 4px 8px; } .tb-btn-reset { font-size: 0.21rem; padding: 3px 6px; } /* Streak */ .streak-day-coin { font-size: 0.18rem; } .streak-reward-big { font-size: 0.51rem; } .streak-claim-btn { font-size: 0.24rem; } /* Notifications */ .notification { font-size: 0.26rem; } .tooltip { font-size: 0.23rem; } .coin-earn-pop { font-size: 0.26rem; } /* Ad overlay */ .ad-card { max-width: 155px; } .ad-card-topbar { padding: 5px 6px; } .ad-topbar-adlabel { font-size: 0.22rem; } .ad-topbar-skip { font-size: 0.23rem; padding: 2px 5px; } .ad-content-box { margin: 5px; min-height: 105px; } .ad-content-box iframe { min-height: 105px; } .ad-card-footer { font-size: 0.27rem; padding: 5px 6px; } /* Loading screen */ .load-logo-flow { font-size: clamp(1.3rem, 5vw, 2.2rem); } .load-logo-line { font-size: clamp(1.3rem, 5vw, 2.2rem); } .load-subtitle { font-size: 0.24rem; letter-spacing: 0.19em; } .load-percent { font-size: 0.27rem; } .load-bar-wrap { width: 108px; } } /* ================================================================ HEIGHT-BASED ADJUSTMENTS (preserved — width-independent) ================================================================ */ @media (max-height: 700px) { .load-ad-slot { display: none; } .placeholder { gap: 4px; padding: 8px; } .ad-size { font-size: 13px; } .ad-size span { font-size: 10px; } .ad-label { font-size: 5.5px; } .ad-subtitle { font-size: 6.5px; } .ad-desc { display: none; } } @media (max-height: 640px) { .game-topbar { padding-bottom: 6px; margin-bottom: 6px; } .score-panel { margin-bottom: 4px; } .score-num { font-size: 1.2rem; } .series-progress { margin-bottom: 4px; } .round-log-wrap { margin-bottom: 4px; } .turn-bar { margin-bottom: 6px; min-height: 20px; } .turn-text { font-size: 0.6rem; } .ad-topbar-adlabel { font-size: 0.374rem; } .ad-topbar-skip { font-size: 0.398rem; padding: 4px 11px; } .ad-card-footer { font-size: 0.437rem; } .ad-card-topbar { padding: 8px 12px; } } @media (max-height: 580px) { .round-log-wrap { display: none; } .score-num { font-size: 1rem; } .ad-topbar-adlabel { font-size: 0.359rem; } .ad-topbar-skip { font-size: 0.382rem; padding: 4px 10px; } .ad-card-footer { font-size: 0.421rem; } .ad-card-topbar { padding: 7px 11px; } } /* ================================================================ LANDSCAPE ORIENTATION (mobile/tablet landscape) ================================================================ */ @media (orientation: landscape) and (max-height: 520px) { #lobby-screen { overflow-y: auto; } .lobby-brand { margin-bottom: 8px; } .lobby-title-flow { font-size: clamp(1.4rem, 4.5vw, 2.5rem); } .lobby-title-line { font-size: clamp(1.4rem, 4.5vw, 2.5rem); } .lobby-tagline { display: none; } .lobby-divider { margin: 6px 0; } .lobby-play-btn { padding: 8px 16px; font-size: 0.72rem; } .lobby-coin-val { font-size: 0.88rem; } .lobby-coin-earn { font-size: 0.56rem; padding: 4px 8px; } .lobby-coin-label { font-size: 0.72rem; } .lobby-icon-btn { width: 30px; height: 30px; } .lobby-icon-btn svg { width: 13px; height: 13px; } .lobby-top-actions { padding: 7px 12px 4px; gap: 4px; } #s-game { flex-direction: row; flex-wrap: wrap; padding: 5px 8px; overflow-y: auto; } .game-topbar { width: 100%; flex-shrink: 0; padding-bottom: 4px; margin-bottom: 4px; flex-wrap: nowrap; } .game-logo { font-size: 0.82rem; } .game-logo-sub { display: none; } .series-label { font-size: 0.46rem; } .score-panel, .series-progress, .round-log-wrap, .turn-bar, .btn-row { flex-shrink: 0; width: 100%; } .score-num { font-size: 0.9rem; } .score-player { font-size: 0.38rem; } .score-name { font-size: 0.35rem; } .turn-text { font-size: 0.5rem; } .btn-row { flex-direction: row; justify-content: center; gap: 5px; } .abtn { font-size: 0.55rem; padding: 5px 8px; } .ad-topbar-adlabel { font-size: 0.359rem; } .ad-topbar-skip { font-size: 0.382rem; padding: 4px 10px; } .ad-card-footer { font-size: 0.421rem; } .ad-card-topbar { padding: 7px 11px; } } /* ================================================================ CENTER GAME ON WIDE + TALL SCREENS ================================================================ */ @media (min-width: 769px) and (min-height: 751px) { #s-game { justify-content: center; } .ad-size { font-size: 26px; } .ad-size span { font-size: 20px; } .ad-label { font-size: 9px; } .ad-subtitle { font-size: 10px; } .ad-desc { font-size: 9px; } } /* ═══════════════════════════════════════════════════════════════ AD PLACEHOLDER (iframe: script/ads/ad.html) Uses CSS vars — adapts to every theme automatically. ═══════════════════════════════════════════════════════════════ */ /* Ad placeholder page base — scoped to avoid overriding game styles */ .placeholder-page html, .placeholder-page body { width: 100%; height: 100%; background: var(--bg, #141c0a); font-family: "Georgia", serif; } .placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg, #141c0a); border: 1px dashed var(--border2, #3a4a28); gap: 10px; padding: 20px; text-align: center; position: relative; } .placeholder::before, .placeholder::after { content: ""; position: absolute; width: 16px; height: 16px; border-color: var(--border, #4a5a30); border-style: solid; } .placeholder::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; } .placeholder::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; } .ad-label { font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted, #6a7a50); font-family: "Courier New", monospace; } .ad-size { font-size: 28px; font-weight: 700; color: var(--accent, #b8c878); font-family: "Georgia", serif; letter-spacing: 0.02em; line-height: 1; } .ad-size span { font-size: 22px; color: var(--accent2, #8a9a6a); margin: 0 4px; } .ad-subtitle { font-size: 11px; color: var(--text-dim, #6a7a50); font-family: "Georgia", serif; font-style: italic; } .ad-desc { font-size: 10px; color: var(--text-muted, #4a5a30); line-height: 1.5; max-width: 200px; font-family: "Courier New", monospace; } @media (max-width: 1400px) { .ad-size { font-size: 26px; } .ad-size span { font-size: 20px; } .ad-label { font-size: 9px; } .ad-subtitle { font-size: 10px; } .ad-desc { font-size: 9px; } } @media (min-width: 601px) and (max-width: 1024px) { .ad-size { font-size: 22px; } .ad-size span { font-size: 17px; } .ad-label { font-size: 8px; } .ad-subtitle { font-size: 9px; } .ad-desc { font-size: 8px; } } @media (max-width: 700px) { .placeholder { gap: 8px; padding: 16px; } .ad-size { font-size: 20px; } .ad-size span { font-size: 15px; } .ad-label { font-size: 8px; } .ad-subtitle { font-size: 9px; } .ad-desc { font-size: 8px; max-width: 170px; } } @media (max-width: 600px) { .placeholder { gap: 7px; padding: 14px; } .ad-size { font-size: 18px; } .ad-size span { font-size: 14px; } .ad-label { font-size: 7px; } .ad-subtitle { font-size: 8px; } .ad-desc { font-size: 7px; max-width: 150px; } } @media (max-width: 520px) { .placeholder { gap: 6px; padding: 12px; } .ad-size { font-size: 16px; } .ad-size span { font-size: 12px; } .ad-label { font-size: 6.5px; } .ad-subtitle { font-size: 7.5px; } .ad-desc { font-size: 6.5px; max-width: 130px; } } @media (max-width: 420px) { .placeholder { gap: 5px; padding: 10px; } .ad-size { font-size: 14px; } .ad-size span { font-size: 11px; } .ad-label { font-size: 6px; } .ad-subtitle { font-size: 7px; } .ad-desc { font-size: 6px; max-width: 110px; } } @media (max-width: 380px) { .placeholder { gap: 4px; padding: 8px; } .ad-size { font-size: 13px; } .ad-size span { font-size: 10px; } .ad-label { font-size: 5.5px; } .ad-subtitle { font-size: 6.5px; } .ad-desc { display: none; } } @media (max-width: 360px) { .ad-size { font-size: 11px; } .ad-size span { font-size: 9px; } .ad-label { font-size: 5px; } .ad-subtitle { font-size: 6px; } } /* ================================================================ FLAPPY ROCKET DESIGN SYSTEM — Lobby & Overlay Styles (moved from inline