:root{ --bg:#0c0c10; --fg:#f5f5f7; --muted:rgba(245,245,247,.68); --card:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12); --stroke2:rgba(255,255,255,.16); --brand1:#00c2a8; --brand2:#7b61ff; /* Primary CTA gradient (kept in sync with brand colors) */ --accent1: var(--brand1); --accent2: var(--brand2); --amber1:#ffb020; --amber2:#ff6b35; --danger1:#ff5964; --shadow:0 18px 60px rgba(0,0,0,.55); --shadow2:0 10px 26px rgba(0,0,0,.30); } *{ box-sizing:border-box; } html,body{ min-height:100%; } /* Background layer: Some mobile browsers treat / backgrounds differently on long pages (you can get a visible "step" when scrolling past the initial viewport height). We solve this by: - keeping the base color on - rendering the subtle gradient as a fixed, full-viewport layer (so it never "ends") */ html{ position:relative; background: var(--bg); } html::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background: radial-gradient(1200px 800px at 20% -10%, rgba(123,97,255,.22), transparent 55%), radial-gradient(900px 600px at 120% 10%, rgba(0,194,168,.18), transparent 55%), radial-gradient(800px 500px at 30% 120%, rgba(255,176,32,.10), transparent 60%), var(--bg); } body{ margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:transparent; color:var(--fg); -webkit-font-smoothing:antialiased; padding:18px; } .container{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; } /* Confetti layer should sit behind the UI */ .confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:0; } /* Streak ceremony overlay (Today solve) */ .streak-ceremony{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; z-index:9998; /* just below .modal */ background: rgba(0,0,0,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events:none; } .streak-ceremony.hidden{ display:none; } /* Reset notice is dismissible */ .streak-ceremony--reset{ pointer-events:auto; } .streak-ceremony-card{ width:min(520px, calc(100vw - 32px)); border-radius:24px; background: rgba(24,24,28,.92); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 26px 78px rgba(0,0,0,.58); padding:26px 22px 24px; position:relative; text-align:center; } html[data-theme="light"] .streak-ceremony-card{ background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.10); box-shadow: var(--shadow2); } /* Thin gradient accent strip to match modal language */ .streak-ceremony-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:10px; border-top-left-radius:24px; border-top-right-radius:24px; background: linear-gradient(135deg, var(--brand1), var(--brand2)); opacity:.92; } .streak-ceremony-title{ margin-top:2px; font-size:16px; font-weight:800; letter-spacing:0.01em; opacity:.88; display:block; width:100%; margin-bottom:10px; } .streak-ceremony-sub{ font-size:13px; opacity:.78; margin-top:-2px; margin-bottom:14px; } .streak-ceremony-number--small{ font-size:56px; } .streak-ceremony--reset .streak-ceremony-plus{ display:none; } .streak-ceremony--reset .streak-ceremony-card{ padding-top:24px; } .streak-ceremony-number-value{ display:inline-block; } .streak-ceremony-number-flame{ font-size:44px; line-height:1; transform: translateY(2px); opacity:.95; } .streak-ceremony-number{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:0px; font-size:72px; line-height:1; font-weight:900; letter-spacing:-0.02em; color: rgba(255,255,255,.98); text-shadow: 0 14px 40px rgba(0,0,0,.45); } html[data-theme="light"] .streak-ceremony-number{ color: var(--fg); text-shadow: 0 10px 30px rgba(0,0,0,.10); } .streak-ceremony-plus{ position:absolute; right:22px; top:42px; font-weight:900; letter-spacing:-0.01em; padding:8px 10px; border-radius:999px; background: linear-gradient(135deg, rgba(0,194,168,.92), rgba(123,97,255,.92)); color: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 48px rgba(0,0,0,.40); opacity:0; } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:underline; } .muted{ color:var(--muted); } .small{ font-size:13px; } .streak-reminder{ margin-top:4px; } .sr-only{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } /* =========================== Hero header =========================== */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .topbar{ flex-wrap:nowrap; } .brand{ flex-wrap:nowrap; } .top-actions{ flex-wrap:nowrap; } .topbar.hero{ padding:18px 18px; border-radius:28px; background: linear-gradient(90deg, rgba(0,194,168,0.92), rgba(123,97,255,0.92)); border: 1px solid rgba(255,255,255,0.14); box-shadow: var(--shadow); position:relative; overflow:hidden; } .topbar.hero::after{ content:""; position:absolute; inset:-60px -40px; background: radial-gradient(420px 260px at 10% 20%, rgba(255,255,255,.16), transparent 60%), radial-gradient(360px 240px at 85% 10%, rgba(255,255,255,.12), transparent 60%), radial-gradient(520px 340px at 70% 100%, rgba(0,0,0,.10), transparent 60%); pointer-events:none; opacity:.9; } .brand{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; min-width:0; } .brand-text{ min-width:0; } .logo{ width:44px; height:44px; display:grid; place-items:center; border-radius:16px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow2); font-size:22px; } .title{ font-weight:950; letter-spacing:-.02em; font-size:24px; color:#fff; text-shadow: 0 10px 22px rgba(0,0,0,.25); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .subtitle{ margin-top:2px; color: rgba(255,255,255,.85); } .top-actions{ display:flex; gap:10px; position:relative; z-index:1; } .hero-link{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 14px; border-radius:16px; font-weight:950; color:#fff; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.18); box-shadow: var(--shadow2); text-decoration:none; transition: transform .12s ease, filter .18s ease; white-space:nowrap; } .hero-link:hover{ filter:brightness(1.06); transform:translateY(-1px); text-decoration:none; } .hero-link:active{ transform:translateY(0) scale(.99); } .back-link{ width:44px; height:44px; display:grid; place-items:center; border-radius:16px; background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.18); color:#fff; } .back-link:hover{ filter:brightness(1.06); text-decoration:none; } .icon-btn{ width:44px; height:44px; border-radius:16px; background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:22px; line-height:1; font-weight:900; transition:transform .12s ease, filter .2s ease; box-shadow: var(--shadow2); } .icon-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); } .icon-btn:active{ transform:translateY(0) scale(.99); } html[data-theme="light"] .topbar.hero{ background: linear-gradient(90deg, rgba(0,194,168,0.80), rgba(123,97,255,0.80)); border: 1px solid rgba(0,0,0,.10); } /* Light mode: keep header copy white for strong contrast on the brand gradient */ html[data-theme="light"] .title{ color:#fff; text-shadow: 0 10px 22px rgba(0,0,0,.22); } html[data-theme="light"] .subtitle{ color: rgba(255,255,255,.86); text-shadow: 0 8px 18px rgba(0,0,0,.18); } html[data-theme="light"] .hero-link, html[data-theme="light"] .icon-btn, html[data-theme="light"] .back-link{ background: rgba(255,255,255,.30); border: 1px solid rgba(0,0,0,.12); color:#0b0b0f; } /* Cards */ .card{ border-radius:22px; background:var(--card); border:1px solid var(--stroke); box-shadow:var(--shadow2); padding:16px 16px 14px; } /* ===== Riddle meta row ===== */ .riddle-toprow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .riddle-meta-left{ display:flex; align-items:center; gap:8px; min-width:0; } /* Small "How to play" info button beside the riddle number */ .help-btn{ width:34px; height:34px; border-radius:14px; font-size:18px; background:rgba(0,0,0,.10); } html[data-theme="light"] .help-btn{ background: rgba(255,255,255,.28); } @media (max-width:560px){ .help-btn{ width:32px; height:32px; border-radius:13px; font-size:17px; } } .riddle-meta-text{ font-weight:900; font-size:15px; color: rgba(245,245,247,.72); } html[data-theme="light"] .riddle-meta-text{ color: rgba(10,10,12,.70); } .riddle-meta-type{ color: rgba(245,245,247,.78); } html[data-theme="light"] .riddle-meta-type{ color: rgba(10,10,12,.74); } /* Emoji stage */ .emoji-stage{ display:flex; align-items:center; justify-content:flex-start; min-height:160px; padding:18px 14px; border-radius:22px; background: radial-gradient(320px 200px at 20% 30%, rgba(0,194,168,.16), transparent 60%), radial-gradient(340px 220px at 90% 20%, rgba(123,97,255,.14), transparent 60%), rgba(0,0,0,.10); border:1px solid rgba(255,255,255,.12); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; margin-bottom:14px; } html[data-theme="light"] .emoji-stage{ background: radial-gradient(320px 200px at 20% 30%, rgba(0,194,168,.14), transparent 60%), radial-gradient(340px 220px at 90% 20%, rgba(123,97,255,.12), transparent 60%), rgba(255,255,255,.35); border:1px solid rgba(0,0,0,.10); } .emoji-seq{ font-size:78px; white-space:nowrap; display:inline-block; flex:0 0 auto; margin:0 auto; text-align:center; line-height:1.05; filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)); padding:6px 10px; } @media (max-width:560px){ .emoji-stage{ min-height:140px; } .emoji-seq{ font-size:60px; } } /* ===== Guess row ===== */ .guess-form{ display:grid; grid-template-columns: 1fr 160px; gap:10px; align-items:stretch; } /* Input */ #guessInput{ height:54px; border-radius:18px; padding:0 18px; font-size:20px; font-weight:900; letter-spacing:.01em; color:inherit; background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); outline:none; } #guessInput::placeholder{ color: rgba(255,255,255,.55); font-weight:850; font-size:18px; letter-spacing:.01em; } #guessInput:focus{ border-color: rgba(46, 247, 225, .30); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 6px rgba(117,95,255,.12), 0 0 0 1px rgba(46,247,225,.22); } /* Buttons */ .secondary-btn{ height:54px; border-radius:18px; padding:0 16px; font-weight:950; font-family:inherit; font-size:20px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, filter .18s ease, box-shadow .18s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; background: rgba(0,0,0,.10); color:inherit; position:relative; } .secondary-btn::before{ content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; background:linear-gradient(135deg, var(--brand1), var(--brand2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.75; pointer-events:none; } .secondary-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); text-decoration:none; } .secondary-btn:active{ transform:translateY(0) scale(.99); } .guess-btn{ font-size:20px; } .primary-btn{ height:54px; border-radius:18px; padding:0 16px; font-weight:950; font-size:20px; letter-spacing:.01em; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, filter .18s ease, box-shadow .18s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; background-image:linear-gradient(90deg, var(--accent1), var(--accent2)); color: rgba(255,255,255,.95); text-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 10px 26px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.10) inset; } .primary-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); } .primary-btn:active{ transform:translateY(0) scale(.99); } @media (max-width:560px){ .guess-form{ grid-template-columns: 1fr 140px; } } /* Hint + pips row */ .hint-row{ margin-top:12px; display:grid; grid-template-columns: 1fr 160px; gap:10px; align-items:center; } @media (max-width:560px){ .hint-row{ grid-template-columns: 1fr 140px; } } .hint-inline{ min-height:22px; display:flex; align-items:center; gap:8px; font-weight:850; } .hint-inline.hidden{ display:none; } .hint-label{ color: rgba(245,245,247,.70); font-weight:950; } html[data-theme="light"] .hint-label{ color: rgba(10,10,12,.65); } .hint-content{ font-weight:950; letter-spacing:0.06em; word-spacing:0.28em; } .hint-content .hint-mask{ letter-spacing:0.22em; } .hint-content .hint-hit{ letter-spacing:0; } /* Attempts pips */ .attempts-pips{ display:flex; grid-column: 2; justify-self: end; gap:10px; align-items:center; justify-content:flex-end; min-height:22px; } .pip{ width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:transparent; transition: transform 180ms ease, filter 180ms ease, background 180ms ease, border-color 180ms ease; } .pip.used, .pip.wrong{ background: linear-gradient(135deg, var(--amber1), var(--amber2)); border-color: transparent; filter: drop-shadow(0 0 6px rgba(255,176,32,.25)); } .pip.good{ background: linear-gradient(135deg, rgba(0,194,168,.90), rgba(123,97,255,.90)); border-color: transparent; filter: drop-shadow(0 0 6px rgba(0,194,168,.28)); } .pip.pop{ transform: scale(1.35); } .pip.glow{ filter: drop-shadow(0 0 10px rgba(255,176,32,.42)); } /* Feedback */ .feedback{ margin-top:10px; font-weight:850; color: rgba(245,245,247,.78); } html[data-theme="light"] .feedback{ color: rgba(10,10,12,.72); } /* Streak */ .streak-bar{ margin-top:12px; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); } /* When the user has a nickname set, the streak bar becomes a shortcut to the player card. */ .streak-bar.streak-bar-clickable{ cursor:pointer; } .streak-bar.streak-bar-clickable:focus-visible{ outline:2px solid rgba(123,97,255,.9); outline-offset:2px; } html[data-theme="light"] .streak-bar{ border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.30); } .streaks{ display:flex; align-items:center; gap:8px; font-weight:950; } .streak-number{ font-size:18px; } .streak-flame{ filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); } /* Yesterday inline answer */ .y-answer{ margin-top:12px; padding:14px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); } html[data-theme="light"] .y-answer{ border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.30); } /* Nav row */ .nav-row{ margin-top:14px; display:flex; gap:10px; align-items:center; justify-content:space-between; } .hidden{ display:none; } /* Result card */ .result-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .result-title{ font-weight:950; font-size:22px; } .result-emoji{ font-size:42px; white-space:nowrap; } .answer-wrap, .explain-wrap{ padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); margin-bottom:10px; } .streak-ceremony-sub{ font-size:13px; opacity:.78; margin-top:-2px; margin-bottom:14px; } .streak-ceremony-number--small{ font-size:56px; } .streak-ceremony--reset .streak-ceremony-plus{ display:none; } .streak-ceremony--reset .streak-ceremony-card{ padding-top:24px; } .answer{ font-weight:950; font-size:18px; } .explanation{ margin-top:6px; color:var(--muted); line-height:1.4; } .share-primary{ margin-top:10px; } .result-actions{ display:flex; gap:10px; margin-top:12px; justify-content:space-between; align-items:center; } .hof-link{ border-radius:16px; padding:10px 14px; border:1px solid var(--stroke); background:rgba(0,0,0,.10); font-weight:950; } /* Prose (used on About page and other content-heavy cards) */ .prose{ line-height:1.55; } .prose h2{ margin:18px 0 10px; font-size:18px; letter-spacing:-0.01em; } .prose p{ margin:10px 0; } .prose ul{ margin:10px 0 10px 18px; padding:0; } .prose li{ margin:6px 0; } .about-kicker{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; } .pill{ display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(0,0,0,.10); font-weight:900; font-size:12px; } html[data-theme="light"] .pill{ background:rgba(255,255,255,.65); } .about-faq{ margin-top:14px; border:1px solid var(--stroke); border-radius:18px; padding:10px 12px; background:rgba(0,0,0,.10); } html[data-theme="light"] .about-faq{ background:rgba(255,255,255,.60); } .about-faq summary{ cursor:pointer; list-style:none; } .about-faq summary::-webkit-details-marker{ display:none; } .about-faq-body{ margin-top:10px; } /* Footer */ .footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px; } /* Footer stacked layout (main + practice) */ .footer.footer-stack{ flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; } .footer.footer-stack .footer-meta{ width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } /* Footer identity bar (icon button + identity + icon button) */ .footer-identity-row{ display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; } .footer-icon-btn{ width: 44px; height: 44px; } .footer-icon-btn.has-dot{ position: relative; } .footer-icon-btn.has-dot::after{ content: ""; position: absolute; width: 8px; height: 8px; border-radius: 999px; top: 8px; right: 8px; background: var(--brand1); box-shadow: 0 0 0 2px rgba(0,0,0,.45); } html[data-theme="light"] .footer-icon-btn.has-dot::after{ box-shadow: 0 0 0 2px rgba(255,255,255,.85); } .footer-identity{ min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; border-radius: 14px; cursor: pointer; } .footer-identity:active{ transform: scale(.99); } .footer-identity:focus-visible{ outline: 2px solid rgba(123,97,255,.65); outline-offset: 2px; } .footer-identity{ text-align:center; } .footer-identity-line1{ display: flex; align-items: center; gap: 10px; min-width: 0; justify-content: center; } .footer-nick{ display: flex; align-items: center; gap: 10px; min-width: 0; } .footer-nick-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .footer-identity-line2{ display: flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: 14px; line-height: 1.2; white-space: nowrap; justify-content: center; } .footer-identity-line2.hidden{ display:none; } .footer-streak-label{ color: var(--muted); font-weight: 700; } .footer-streak-val{ color: inherit; font-weight: 950; } .footer-streak-emoji{ filter: saturate(1.25) brightness(1.05); } html[data-theme="light"] .footer-streak-label{ color: rgba(0,0,0,.55); } /* Footer meta link (subtle internal nav) */ .footer-meta .footer-link{ color: var(--muted); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.28); text-underline-offset: 3px; } .footer-meta .footer-link:hover{ color: inherit; border-bottom-color: rgba(255,255,255,.55); } html[data-theme="light"] .footer-meta .footer-link{ border-bottom-color: rgba(0,0,0,.28); } html[data-theme="light"] .footer-meta .footer-link:hover{ border-bottom-color: rgba(0,0,0,.55); } /* index/practice wrap left+right in .footer-row; keep them on one line */ .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; flex-wrap:nowrap; } .footer-left, .footer-right{ display:flex; align-items:center; gap:10px; } /* allow long nick/city to truncate rather than forcing the button onto a new line */ .footer-left{ min-width:0; flex:1; } /* Only the right cluster (buttons) should auto-push to the edge */ .footer-right{ margin-left:auto; justify-content:flex-end; flex-shrink:0; } .footer-nick{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Match the muted footer tone from the pre-player-card footer. */ .footer-nick-left{ color: var(--muted); } .footer-nick{ font-weight:700; font-size:14px; line-height:1.2; color: inherit; } .footer-nick.footer-nick-anon{ color: inherit; font-weight:700; } /* Subtle player indicator next to the footer nickname (helps users map it to their profile). */ .footer-nick.footer-nick-player::before{ content:"👤 "; opacity:.7; } /* Clickable nickname should feel like the About/Archive links (subtle dotted underline). */ .footer-nick-clickable{ cursor:pointer; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.28); } .footer-nick-clickable:hover{ border-bottom-color: rgba(255,255,255,.55); } html[data-theme="light"] .footer-nick-clickable{ border-bottom-color: rgba(0,0,0,.28); } html[data-theme="light"] .footer-nick-clickable:hover{ border-bottom-color: rgba(0,0,0,.55); } .footer-nick-clickable:focus{ outline:none; border-radius:10px; box-shadow: 0 0 0 3px rgba(0,194,168,.22), 0 0 0 6px rgba(123,97,255,.14); padding:2px 6px; margin:-2px -6px; } .footer-nick-btn{ height:36px; border-radius:14px; padding:0 12px; font-size:14px; } .footer-nick-btn.is-cog{ width:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; } /* Two-line footer nickname layout (helps long nick/city on mobile) */ .footer-nick-row{ align-items:flex-start; } .footer-nick-row.footer-nick-row-anon{ align-items:center; } .footer-nick-left{ flex-direction:column; align-items:flex-start; gap:6px; } .footer-nick-left.footer-nick-left-anon{ flex-direction:row; align-items:center; gap:10px; } .footer-streak-row{ display:flex; } .footer-streak-row.hidden{ display:none; } .footer-streak{ font-weight:700; font-size:14px; line-height:1.2; white-space:nowrap; color: inherit; } /* Player card modal head: keep title + close button on one row */ .player-modal .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .player-modal .modal-head h3{ margin:0; font-size:20px; font-weight:950; letter-spacing:-.01em; } .modal-head .icon-btn{ font-size:24px; } /* Recovery modal head: keep title + close button on one row */ .recovery-modal .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .streak-ceremony-sub{ font-size:13px; opacity:.78; margin-top:-2px; margin-bottom:14px; } .streak-ceremony-number--small{ font-size:56px; } .streak-ceremony--reset .streak-ceremony-plus{ display:none; } .streak-ceremony--reset .streak-ceremony-card{ padding-top:24px; } .recovery-modal .modal-head h3{ margin:0; font-size:20px; font-weight:950; letter-spacing:-.01em; } /* Toast */ .toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:rgba(18,18,20,.92); border:1px solid rgba(255,255,255,.12); color:inherit; padding:10px 12px; border-radius:14px; box-shadow:var(--shadow2); z-index: 12000; max-width: calc(100vw - 36px); text-align:center; font-weight: 750; letter-spacing: .01em; } .toast.hidden{ display:none; } .toast:not(.hidden){ animation: toastPop .16s ease-out; } @keyframes toastPop{ from{ transform: translateX(-50%) translateY(8px) scale(.98); opacity:.0; } to{ transform: translateX(-50%) translateY(0px) scale(1); opacity:1; } } /* Louder toast style for share/clipboard confirmations */ .toast.is-loud{ font-weight: 900; background: linear-gradient(135deg, var(--brand1), var(--brand2)); border: 1px solid rgba(255,255,255,.20); color: rgba(255,255,255,.98); box-shadow: 0 18px 48px rgba(0,0,0,.45); } .toast.is-error{ background: rgba(255,70,70,.92); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.98); } html[data-theme="light"] .toast{ background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.10); color: var(--fg); } /* In light mode, keep loud/error toasts on their colored surfaces (avoid white-on-white). */ html[data-theme="light"] .toast.is-loud{ background: linear-gradient(135deg, var(--brand1), var(--brand2)); color: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.25); } html[data-theme="light"] .toast.is-error{ background: rgba(255,70,70,.92); color: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.25); } /* Modal */ .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; /* Slightly stronger backdrop so modals feel like a "window" in dark mode */ background:rgba(0,0,0,.62); z-index:9999; } .modal.hidden{ display:none; } .modal-content{ width:min(720px, calc(100vw - 24px)); border-radius:22px; /* Dark mode: a touch lighter than the page so it reads as a distinct surface */ background: rgba(24,24,28,.96); padding:22px 22px 18px 22px; box-shadow: 0 26px 78px rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.14); position:relative; /* Keep actions reachable on small screens */ max-height: calc(100vh - 44px); overflow:auto; animation: modalIn .14s ease-out; } html[data-theme="light"] .modal-content{ background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.10); box-shadow: var(--shadow2); } /* Thin gradient accent strip (shared across all modals) */ .modal-content::before{ content:""; position:absolute; top:0; left:0; right:0; height:12px; background: linear-gradient(135deg, var(--brand1), var(--brand2)); opacity:.92; pointer-events:none; } /* Clear focus rings inside modals (keyboard + accessibility) */ .modal-content :is(button, a, input, textarea, select):focus-visible{ outline: 2px solid rgba(255,255,255,.34); outline-offset: 3px; } html[data-theme="light"] .modal-content :is(button, a, input, textarea, select):focus-visible{ outline: 2px solid rgba(0,0,0,.28); } @keyframes modalIn{ from{ transform: translateY(10px) scale(.985); opacity: .0; } to{ transform: translateY(0) scale(1); opacity: 1; } } /* Keep the hero subtitle only when there's enough horizontal space */ @media (max-width:520px){ .topbar.hero .subtitle{ display:none; } } /* Yesterday view: keep it clean */ .view-yesterday .guess-form, .view-yesterday .streak-bar, .view-yesterday #feedback{ display:none !important; } .view-yesterday #hintInline{ display:none !important; } /* NEW: always hide the separate result card on Yesterday view (prevents duplication) */ .view-yesterday #resultCard{ display:none !important; } @media (max-width:430px){ body{ padding:14px; } .topbar.hero{ padding:14px 14px; border-radius:24px; } .logo{ width:40px; height:40px; border-radius:15px; font-size:20px; } .title{ font-size:20px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .subtitle{ display:none; } .hero-link{ display:none; } .icon-btn{ width:40px; height:40px; border-radius:15px; } .card{ border-radius:20px; padding:14px 14px 12px; } .guess-form{ grid-template-columns: minmax(0, 1fr) 124px; } #guessInput{ min-width:0; } .hint-row{ grid-template-columns: minmax(0, 1fr) 124px; grid-template-rows:auto auto; align-items:start; } .hint-inline{ grid-column:1 / -1; grid-row:2; } .attempts-pips{ grid-column:2; grid-row:1; justify-self:end; } .nav-row{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px; } .nav-row .secondary-btn{ font-size:18px; } /* Keep nickname + button on one row on very small screens */ .footer{ flex-direction:column; align-items:stretch; gap:10px; } .footer-row{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; } .footer-left{ flex:1 1 auto; min-width:0; max-width:none; } .footer-right{ flex:0 0 auto; } .guess-btn{ font-size:19px; } .footer{ gap:8px; } .footer-nick-btn{ height:40px; border-radius:14px; padding:0 12px; } } /* Practice mode */ .practice-filters{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; margin-top:8px; -webkit-overflow-scrolling:touch; } .practice-filters::-webkit-scrollbar{ display:none; } .practice-cat{ flex:0 0 auto; height:42px; border-radius:16px; padding:0 12px; font-size:14px; } .practice-links{ margin-top:2px; } .mini-link{ background:none; border:none; padding:0; margin:0; color: var(--muted); font-weight:900; font-family:inherit; font-size:13px; cursor:pointer; text-decoration: underline; text-underline-offset: 3px; } .mini-link:hover{ color: inherit; } .y-review{ margin-top:10px; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); } html[data-theme="light"] .y-review{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.30); } .y-review.hidden{ display:none; } .practice-actions{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px; } .practice-actions .secondary-btn, .practice-actions .primary-btn{ width:100%; } /* Archive */ .archive-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; } .archive-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); text-decoration:none; color:inherit; } html[data-theme="light"] .archive-item{ border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.30); } .archive-item:hover{ border-color: rgba(255,255,255,.20); } html[data-theme="light"] .archive-item:hover{ border-color: rgba(0,0,0,.18); } .archive-item:focus{ outline:2px solid rgba(123,97,255,.45); outline-offset:2px; } .archive-item-left{ min-width:0; flex:1; } .archive-item-date{ font-weight:950; letter-spacing:-.01em; } .archive-item-emoji{ font-size:30px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.30)); white-space:nowrap; flex:0 0 auto; } .archive-actions{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px; } .archive-actions .secondary-btn, .archive-actions .primary-btn{ width:100%; } .archive-actions.single{ grid-template-columns: 1fr; } .archive-mask{ margin-top:10px; } /* HoF styling */ .hof-card-head{ display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-bottom:12px; } .hof-card-title{ font-weight:950; letter-spacing:-.02em; font-size:22px; } .hof-controls{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; } /* Timeframe buttons — match main button system */ .hof-period{ height:48px; border-radius:18px; padding:0 10px; font-weight:950; font-family:inherit; font-size:16px; cursor:pointer; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); color:inherit; position:relative; white-space:nowrap; transition: transform .12s ease, filter .18s ease, box-shadow .18s ease; } html[data-theme="light"] .hof-period{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.30); } /* Gradient border */ .hof-period::before{ content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; background:linear-gradient(135deg, var(--brand1), var(--brand2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.45; pointer-events:none; } /* Active state: clean (same background), stronger border + glow, white text */ .hof-period.active{ border-color: transparent; } .hof-period.active::before{ opacity:.95; } .hof-period.active{ box-shadow: 0 0 0 4px rgba(0,194,168,.14), 0 0 0 7px rgba(123,97,255,.10); } .hof-period:hover{ filter:brightness(1.06); transform:translateY(-1px); } .hof-period:active{ transform:translateY(0) scale(.99); } .hof-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; } .hof-row{ display:grid; grid-template-columns: 90px 1fr 90px 130px; gap:10px; align-items:center; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); } html[data-theme="light"] .hof-row{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.30); } .hof-row-clickable{ cursor:pointer; } .hof-row-clickable:focus{ outline:2px solid rgba(0,194,168,.38); outline-offset:2px; } .hof-row-clickable:hover{ background: rgba(0,0,0,.16); } html[data-theme="light"] .hof-row-clickable:hover{ background: rgba(255,255,255,.55); } .hof-row.you{ outline:2px solid rgba(0,194,168,.38); box-shadow:0 0 0 6px rgba(123,97,255,.10); } .hof-rank{ font-weight:950; } .hof-player .name{ font-weight:950; } .hof-player .city{ color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hof-streak{ font-weight:950; text-align:right; white-space:nowrap; } .hof-when{ color:var(--muted); font-size:13px; text-align:right; white-space:nowrap; } .hof-youline{ padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); margin-bottom:10px; } .streak-ceremony-sub{ font-size:13px; opacity:.78; margin-top:-2px; margin-bottom:14px; } .streak-ceremony-number--small{ font-size:56px; } .streak-ceremony--reset .streak-ceremony-plus{ display:none; } .streak-ceremony--reset .streak-ceremony-card{ padding-top:24px; } html[data-theme="light"] .hof-youline{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.30); } @media (max-width:720px){ .hof-row{ grid-template-columns: 90px 1fr; } .hof-when{ text-align:left; } } /* Mobile: equal-width timeframe buttons on one row */ @media (max-width:430px){ .hof-card-head{ gap:10px; } .hof-controls{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; } .hof-period{ height:48px; border-radius:18px; padding:0 8px; font-size:15px; } .hof-row{ grid-template-columns: 84px minmax(0,1fr) 76px; gap:12px; } .hof-when{ display:none; } } /* Nickname modal (HoF + main) */ .nick-modal{ width:min(520px, calc(100vw - 32px)); border-radius:22px; padding:18px 18px 16px; } .nick-modal .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .nick-modal h3{ margin:0; font-size:20px; font-weight:950; letter-spacing:-.01em; } .nick-form{ margin-top:12px; display:grid; grid-template-columns: 1fr; gap:12px; } @media (min-width:520px){ .nick-form{ grid-template-columns: 1fr 1fr; } .nick-form .field:nth-child(3), .nick-form .modal-actions{ grid-column: 1 / -1; } } .field{ display:flex; flex-direction:column; gap:6px; } .field-label{ font-size:12px; font-weight:850; letter-spacing:.02em; color:var(--muted); } .field input{ height:46px; border-radius:16px; padding:0 14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color:var(--text); /* iOS Safari: prevent auto-zoom on focus by keeping inputs >= 16px */ font-size:16px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } html[data-theme="light"] .field input{ border:1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.50); color:rgba(12,12,16,.95); } .field input::placeholder{ color: rgba(245,245,247,.45); } html[data-theme="light"] .field input::placeholder{ color: rgba(10,10,12,.40); } .field input:focus{ border-color: rgba(0,194,168,.55); box-shadow: 0 0 0 4px rgba(0,194,168,.14), 0 0 0 7px rgba(123,97,255,.10); } .modal-actions{ display:flex; gap:10px; margin-top:6px; } .modal-actions .primary-btn, .modal-actions .secondary-btn{ flex:1; height:48px; border-radius:18px; } @media (max-width:430px){ .nick-modal{ padding:18px 16px 14px; } .modal-actions{ flex-direction:row; } } /* Player card modal */ .player-modal{ width:min(560px, calc(100vw - 32px)); border-radius:22px; padding:18px 18px 16px; } /* Help modal */ .help-body{ padding-top:2px; } .help-list{ margin: 8px 0 0; padding-left: 18px; color: rgba(245,245,247,.86); line-height: 1.45; font-weight: 650; } .help-list li{ margin: 8px 0; } html[data-theme="light"] .help-list{ color: rgba(10,10,12,.80); } .player-card-body{ margin-top:10px; display:flex; flex-direction:column; gap:14px; } .player-card-cta{ margin-top:2px; text-align:center; } .player-card-cta .primary-btn{ width:100%; } .player-id{ display:flex; flex-direction:column; gap:2px; } .player-name{ font-size:22px; font-weight:950; letter-spacing:-.01em; } .player-name{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .player-badges{ display:inline-flex; align-items:center; gap:6px; } .player-badges-muted{ opacity:.55; filter: grayscale(1) saturate(.4); } .player-badges-muted .badge-chip{ background: rgba(0,0,0,.10); box-shadow:none; } /* Badge chips (used in player card + footer + HoF) */ .badge-row{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; } .badge-chip{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.12); box-shadow: 0 8px 22px rgba(0,0,0,.22); font-size:14px; line-height:1; } .badge-more{ padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.12); font-size:12px; font-weight:850; color:var(--muted); } .badge-row-clickable{ cursor:pointer; } .badge-row-clickable:focus{ outline:2px solid rgba(123,97,255,.55); outline-offset:2px; border-radius:10px; } .badge-info{ margin-top:6px; } .badge-info-note{ color: rgba(255,255,255,.70); font-size:14px; line-height:1.35; margin:8px 0 12px; } .badge-groups{ display:flex; flex-direction:column; gap:12px; } .badge-group{ padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.10); } .badge-group-title{ font-weight:900; letter-spacing:-.01em; margin-bottom:8px; } .badge-list{ display:flex; flex-direction:column; gap:8px; } .badge-info-row{ display:flex; gap:10px; align-items:flex-start; padding:6px 8px; border-radius:12px; } .badge-info-emoji{ flex:0 0 26px; width:26px; font-size:18px; line-height:1; margin-top:1px; } .badge-info-label{ color:#fff; font-weight:800; font-size:14px; line-height:1.25; } .badge-group-earned{ border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.16); } .badge-earned-row{ display:flex; flex-wrap:wrap; gap:6px; } .badge-info-row.is-earned{ background: rgba(0,0,0,.10); } .badge-earned-check{ margin-left:auto; flex:0 0 auto; font-weight:950; color: rgba(255,255,255,.72); } html[data-theme="light"] .badge-group-earned{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.85); } html[data-theme="light"] .badge-info-row.is-earned{ background: rgba(0,0,0,.06); } html[data-theme="light"] .badge-earned-check{ color: rgba(0,0,0,.55); } html[data-theme="light"] .badge-group{ border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.75); } html[data-theme="light"] .badge-info-note{ color: rgba(0,0,0,.62); } html[data-theme="light"] .badge-info-label{ color: var(--fg); } html[data-theme="light"] .badge-chip, html[data-theme="light"] .badge-more{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.45); box-shadow: 0 10px 22px rgba(0,0,0,.10); } .player-meta{ display:flex; flex-direction:column; gap:2px; } .player-meta-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .player-city{ font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .player-since{ font-size:14px; text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .player-rank{ font-size:13px; text-align:right; margin-left:auto; } /* Player card actions (groundwork: disabled buttons for now) */ .player-actions{ display:flex; gap:10px; } .player-actions.hidden{ display:none; } .player-actions .primary-btn, .player-actions .outline-btn{ flex:1; } .player-actions .primary-btn{ padding:10px 10px; border-radius:16px; font-weight: 900; letter-spacing: .01em; font-size:16px; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:8px; } .player-actions .secondary-btn{ padding:10px 10px; border-radius:16px; font-weight: 900; letter-spacing: .01em; font-size:16px; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:8px; height:54px; } .player-actions .secondary-btn::before{ border-radius:16px; } .player-actions .primary-btn[disabled], .player-actions .outline-btn[disabled]{ opacity:.55; cursor:not-allowed; } .player-actions .btn-emoji{ font-size:18px; line-height:1; } .player-actions .btn-text{ line-height:1; white-space:nowrap; font-size:15px; } .player-share-nudge{ margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size:13px; color:rgba(255,255,255,.92); } .player-share-nudge.hidden{ display:none; } /* Recovery key modal */ .recovery-modal{ max-width: 640px; } .recovery-body{ padding: 2px 2px 4px; } .recovery-section{ padding: 10px 2px; } .recovery-section.hidden{ display:none; } .recovery-title{ font-weight: 900; font-size: 16px; margin-bottom: 6px; } .recovery-divider{ height:1px; background: rgba(255,255,255,.10); margin: 10px 0; } .recovery-actions{ display:flex; gap:10px; margin-top: 10px; } .recovery-actions .primary-btn, .recovery-actions .outline-btn{ flex:1; } .recovery-key-wrap{ margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } .recovery-key-wrap.hidden{ display:none; } .recovery-key{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 15px; letter-spacing: .02em; word-break: break-word; color: rgba(255,255,255,.95); } .recovery-row{ display:flex; gap: 10px; align-items: flex-end; margin-top: 10px; } .recovery-row .secondary-btn{ height:44px; border-radius:14px; padding:0 12px; font-size:16px; font-weight:900; } .recovery-row .secondary-btn::before{ border-radius:14px; } .recovery-confirm{ flex: 1; min-width: 0; } .recovery-confirm .text-input{ width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.92); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .recovery-restore{ display:flex; gap:10px; margin-top: 10px; } .recovery-restore .text-input{ flex:1; padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.92); font-weight: 700; } .recovery-restore .primary-btn{ padding: 10px 12px; border-radius: 16px; font-weight: 900; } .recovery-preview{ margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .recovery-preview.hidden{ display:none; } .recovery-preview-title{ font-weight: 800; margin-bottom: 8px; } .recovery-preview-card{ padding: 10px 10px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); } .recovery-preview-name{ font-weight: 900; font-size: 16px; } .recovery-preview-kpis{ margin-top: 8px; display:flex; gap:8px; flex-wrap: wrap; } .chip{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); font-weight: 800; font-size: 13px; color: rgba(255,255,255,.92); } .player-share-nudge strong{ font-weight:900; } .player-share-nudge.pop{ animation: nudgePop .22s ease-out; } /* Light mode: ensure the player-card copy nudge is readable on the lighter modal surface. */ html[data-theme="light"] .player-share-nudge{ background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.10); color: rgba(10,10,12,.82); } @keyframes nudgePop{ from{ transform: translateY(6px); opacity:.0; } to{ transform: translateY(0px); opacity:1; } } /* Anonymous player card preview skeleton */ .anon-preview{ margin-top:10px; } .anon-skeleton{ opacity:.55; filter: grayscale(1) saturate(.35); } .anon-skel-pill .v{ color: rgba(255,255,255,.55); } .anon-skel-bar .dist-square{ background: rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.08); } html[data-theme="light"] .anon-skeleton{ opacity:.70; filter: grayscale(1) saturate(.35); } html[data-theme="light"] .anon-skel-bar .dist-square{ background: rgba(0,0,0,.10) !important; border:1px solid rgba(0,0,0,.06); } .player-streaks{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .stat-pill{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); border-radius:18px; padding:12px 12px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; } html[data-theme="light"] .stat-pill{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.45); } .stat-pill .k{ color:var(--muted); font-size:12px; font-weight:850; letter-spacing:.02em; } .stat-pill .k .stat-emoji{ font-size:16px; margin-right:6px; position:relative; top:1px; opacity:1; filter:saturate(2.05) brightness(1.28) contrast(1.05); text-shadow: 0 1px 0 rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.28); } .stat-pill .v{ font-size:24px; font-weight:950; } .player-dist{ border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10); border-radius:18px; padding:12px 12px; } html[data-theme="light"] .player-dist{ border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.35); } .player-dist-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .player-dist-kpis{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .player-kpi .k{ color:var(--muted); font-size:12px; font-weight:850; letter-spacing:.02em; margin-bottom:4px; } .player-kpi .v{ font-size:18px; font-weight:950; } .player-kpi-right{ margin-left:auto; text-align:right; } .dist-pill{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); border-radius:999px; padding:8px 10px; font-weight:850; font-size:12px; color:var(--muted); white-space:nowrap; } html[data-theme="light"] .dist-pill{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.45); } .dist-rows{ margin-top:10px; display:flex; flex-direction:column; gap:8px; } .dist-row{ display:flex; align-items:center; gap:10px; } .dist-label{ width:88px; color:var(--muted); font-size:12px; font-weight:850; letter-spacing:.02em; } .dist-bar{ flex:1; display:flex; gap:4px; min-width:0; } .dist-value{ width:34px; text-align:right; font-weight:950; font-size:14px; } .dist-s .dist-sq{ background: rgba(0,194,168,.90); } .dist-f .dist-sq{ background: linear-gradient(135deg, var(--amber1), var(--amber2)); } .dist-sq{ width:10px; height:10px; border-radius:3px; box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset; } html[data-theme="light"] .dist-sq{ box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset; } .player-stats-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .player-stats-grid .stat{ border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10); border-radius:18px; padding:12px 12px; } html[data-theme="light"] .player-stats-grid .stat{ border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.35); } .player-stats-grid .stat-wide{ grid-column: 1 / -1; } .player-stats-grid .k{ color:var(--muted); font-size:12px; font-weight:850; letter-spacing:.02em; margin-bottom:4px; } .player-stats-grid .v{ font-size:18px; font-weight:950; } .player-restore-note{ margin-top:-4px; } @media (max-width:430px){ .player-modal{ padding:18px 16px 14px; } .player-streaks{ grid-template-columns: 1fr 1fr; } .stat-pill .v{ font-size:22px; } .stat-pill .k .stat-emoji{ font-size:18px; } .player-since{ font-size:13px; } } /* ------------------------------ Share modal + solved CTA polish ------------------------------ */ .share-primary{ width: 100%; } .share-primary .primary-btn{ width: 100%; display: block; font-size: 22px; } /* Extra safety: keep the solved-page CTA consistently wide */ #sharePrimaryBtn{ width: 100%; } /* Solved-page share strip (Today lane) */ #shareStrip{ margin-top: 10px; width: 100%; display: flex; flex-direction: column; gap: 6px; } /* Ensure the shared `.hidden { display:none; }` convention still wins over this ID rule */ #shareStrip.hidden{ display:none; } #shareStrip .primary-btn{ width: 100%; display: block; font-size: 22px; /* Use padding + min-height so the button reliably grows across mobile UAs */ height: auto; min-height: 58px; padding: 10px 16px; line-height: 1.1; } .next-countdown{ text-align: center; } #shareModal .modal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; } #shareModal .modal-head h3{ margin: 0; flex: 1; } #shareModal .icon-btn, #shareModal .close-btn{ flex: 0 0 auto; } #shareModal .share-preview{ margin-bottom: 16px; padding: 12px 14px 16px 14px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow2); white-space: pre-wrap; /* preserve from shareText */ word-break: break-word; line-height: 1.25; font-size: 18px; font-weight: 750; } html[data-theme="light"] #shareModal .share-preview{ background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.10); } #shareModal .share-actions{ margin-top: 20px; } /* Share hero: keep rhythm without adding extra copy */ .share-hero{ margin: 2px 0 10px; } .share-outcome{ min-height: 10px; } /* --- Consistency polish (CTA + share modal + inputs) --- */ #sharePrimaryBtn{ width:100%; flex:1; height:58px; } .share-modal .share-actions{ margin-top:16px; display:flex; gap:12px; width:100%; align-items:stretch; justify-content:stretch; } .share-modal .share-actions button{ flex: 1 1 0; min-width: 0; height:54px; border-radius:18px; padding:0 16px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, filter .18s ease, box-shadow .18s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; background: rgba(0,0,0,.10); position:relative; box-shadow:none; text-shadow:none; font-size:20px; font-weight:950; letter-spacing:.01em; color: rgba(255,255,255,.95); } /* Subtle hierarchy: keep buttons equal size, but prime "Share" as the best path */ .share-modal .share-actions .primary-btn{ border-color: rgba(255,255,255,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 8px 18px rgba(0,0,0,.18); background: rgba(255,255,255,.04); } html[data-theme="light"] .share-modal .share-actions .primary-btn{ border-color: rgba(0,0,0,.16); box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset, 0 10px 22px rgba(0,0,0,.08); background: rgba(255,255,255,.70); } .share-nudge{ margin-top:12px; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: rgba(255,255,255,.95); font-size:16px; line-height:1.3; font-weight:500; display:flex; align-items:flex-start; gap:8px; } html[data-theme="light"] .share-nudge{ border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.65); color: rgba(10,10,12,.78); } /* Ensure hidden truly hides share nudge (share-nudge sets display:flex later in the cascade) */ .share-nudge.hidden{ display:none; } .share-nudge:empty{ display:none; } .share-nudge .nudge-emoji, .modal-callout .nudge-emoji{ flex: 0 0 auto; width: 22px; text-align:center; margin-top: 1px; } .share-nudge .nudge-strong{ font-weight: 850; } .share-nudge .nudge-text{ flex: 1 1 auto; min-width: 0; font-weight:500; } /* Modal callout: used for light "coming soon" notes, restore code, etc. */ .modal-callout{ margin-top:12px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); display:flex; align-items:flex-start; gap:8px; } .modal-callout-muted{ color: rgba(255,255,255,.72); font-size:14px; line-height:1.35; } .modal-callout.hidden{ display:none; } .modal-callout:empty{ display:none; } html[data-theme="light"] .modal-callout{ border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.55); } html[data-theme="light"] .modal-callout-muted{ color: rgba(10,10,12,.70); } .share-nudge:not(.hidden){ animation: shareNudgeIn .16s ease-out; } @keyframes shareNudgeIn{ from{ transform: translateY(6px); opacity: .0; } to{ transform: translateY(0px); opacity: 1; } } .share-modal .share-actions button::before{ content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; background:linear-gradient(135deg, var(--brand1), var(--brand2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.75; pointer-events:none; } html[data-theme="light"] .share-modal .share-actions button{ color: rgba(10,10,12,.92); } /* Ensure share action buttons never appear as filled gradient buttons */ .share-modal .share-actions button.primary-btn{ background-image:none; } /* Make CTA rows look consistent: equal-width pills */ .nav-row > a, .nav-row > button, .result-actions > a, .result-actions > button{ flex: 1 1 0; min-width: 0; } /* --- Practice lane polish --- */ .icon-link{ text-decoration:none; color:inherit; } .icon-link:focus-visible{ outline: 3px solid rgba(255,255,255,.22); outline-offset: 3px; border-radius: 14px; } @keyframes derShuffle{ 0% { transform: translateY(2px) scale(.985); filter: blur(6px); opacity:.55; } 45% { transform: translateY(-2px) scale(1.01); filter: blur(2px); opacity:.90; } 100% { transform: translateY(0px) scale(1); filter: blur(0px); opacity:1; } } .emoji-seq.der-shuffle{ animation: derShuffle .36s ease-out both; } /* --- Archive → Riddle page polish (SEO lane) --- */ .page-archive-riddle .title{ max-width: 72vw; } .page-archive-riddle .nav-row{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; justify-content:stretch; } .page-archive-riddle .nav-row .secondary-btn{ width:100%; text-align:center; padding:12px 10px; font-size:15px; } .page-archive-riddle .reveal-row{ display:flex; justify-content:flex-end; margin-top:8px; } .page-archive-riddle .reveal-link{ background:none; border:0; padding:6px 2px; font: inherit; color: rgba(255,255,255,.68); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; } .page-archive-riddle .reveal-link:hover{ color: rgba(255,255,255,.85); } .page-archive-riddle .reveal-link:active{ transform: translateY(1px); } .page-archive-riddle .reveal-link:focus-visible{ outline: 3px solid rgba(255,255,255,.22); outline-offset: 3px; border-radius: 10px; } html[data-theme="light"] .page-archive-riddle .reveal-link{ color: rgba(10,10,12,.60); } html[data-theme="light"] .page-archive-riddle .reveal-link:hover{ color: rgba(10,10,12,.78); } @media (max-width: 520px){ .page-archive-riddle .title{ font-size:22px; max-width: 74vw; } .page-archive-riddle .subtitle{ font-size:13px; } } @media (max-width: 380px){ .page-archive-riddle .title{ font-size:20px; max-width: 76vw; } .page-archive-riddle .subtitle{ font-size:12px; } .page-archive-riddle .nav-row .secondary-btn{ font-size:14px; padding:11px 8px; } } @keyframes derCardCeremony{ 0% { filter: brightness(.92) saturate(.98); transform: translateY(0); } 45% { filter: brightness(1.05) saturate(1.02); transform: translateY(-1px); } 100% { filter: brightness(1) saturate(1); transform: translateY(0); } } .card.der-card-ceremony{ animation: derCardCeremony .52s cubic-bezier(.2,.9,.2,1) both; will-change: filter, transform; } .practice-actions.single{ display:grid; grid-template-columns: 1fr; } .practice-actions.single #nextBtn{ width:100%; } /* =========================== Light mode polish (safe) - scoped to html[data-theme="light"] - does NOT affect dark mode =========================== */ html[data-theme="light"]{ /* Brighter, crisper neutrals (override tokens only) */ --bg: #F6F7FB; --panel: #EEF1F7; --card: #FFFFFF; --card2: #F3F5FA; --fg: #0E1116; --muted: #5C6574; --stroke: rgba(14,17,22,0.10); --stroke2: rgba(0,0,0,.14); --shadow: 0 10px 30px rgba(14,17,22,0.08); --shadow2: 0 10px 26px rgba(0,0,0,.14); /* Keep CTA gradient consistent in light theme too */ --accent1: var(--brand1); --accent2: var(--brand2); } /* Reduce “frost/blur” in light mode for a cleaner Wordle-like look */ html[data-theme="light"] .card{ backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow: var(--shadow); } /* Emoji stage: subtle crisp surface */ html[data-theme="light"] .emoji-box{ background: linear-gradient(180deg, #FFFFFF, var(--panel)); border-color: var(--stroke); } /* Inputs: crisp borders + brand-tinted focus glow */ html[data-theme="light"] #guessInput{ background: #FFFFFF; border-color: rgba(14,17,22,0.16); color: var(--fg); } html[data-theme="light"] #guessInput::placeholder{ color: #7A8392; } html[data-theme="light"] #guessInput:focus{ box-shadow: 0 0 0 3px rgba(0,194,168,0.18), 0 8px 26px rgba(14,17,22,0.06); border-color: rgba(0,194,168,0.55); } /* Button tiers in light mode (keep existing layout/sizing) */ html[data-theme="light"] .secondary-btn{ background: var(--card2); border-color: var(--stroke); color: var(--fg); } html[data-theme="light"] .secondary-btn:hover{ filter: brightness(0.98); } html[data-theme="light"] .primary-btn{ /* ensure CTA remains clearly primary */ color: #FFFFFF; text-shadow: 0 1px 0 rgba(0,0,0,.18); box-shadow: 0 2px 10px rgba(14,17,22,0.06); } /* Attempts pips: stronger contrast in light mode */ html[data-theme="light"] .pip{ border-color: rgba(14,17,22,0.22); } html[data-theme="light"] .pip.off{ background: transparent; } @media (max-width: 360px) { .emoji-stage { padding: 22px 12px; } .emoji-row { font-size: 44px; gap: 12px; } .guess-form { grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; } .hint-row { grid-template-columns: minmax(0, 1fr) 112px; } .secondary-btn { font-size: 17px; padding: 12px 12px; } .guess-btn { font-size: 18px; } .footer-nick { font-size: 18px; } .footer-streak { font-size: 18px; } .footer-nick-btn { padding: 10px 14px; } } /* Hide horizontal scrollbar for emoji stage (keeps layout stable) */ .emoji-stage::-webkit-scrollbar{ display:none; } /* Recovery: keep anonymous "Restore player" secondary CTA visually calm */ .player-card-cta .secondary-btn{ font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 18px; } .player-card-cta .secondary-btn .btn-text{ font-size: 13px; line-height: 1; }