/* Self-hosted brand fonts (latin subset) — work offline in the iOS app, no CDN. Quicksand is a variable font covering 400–700 in one file. */ @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/quicksand-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/spacemono-400-latin.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/spacemono-700-latin.woff2') format('woff2'); } :root { --bg: #fff7ed; --ink: #3b2d3f; --pink: #ff5d8f; --yellow: #ffd166; --green: #06d6a0; --blue: #4cc9f0; --red: #ef476f; --berry: #c42e62; /* AA-safe pink for small text — white-on-pink fails contrast */ --font-brand: 'Quicksand', ui-rounded, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'Space Mono', ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; } /* `display:flex` on .quiz-screen would otherwise override the UA [hidden] rule, leaking the level view under other screens. Keep hidden authoritative. */ [hidden] { display: none !important; } html { /* pink underlay = webview's first paint before renders, so the native launch screen → content handoff never flashes the WKWebView's default background. Body's own bg paints over this immediately. */ background: #ff5d8f; /* native-app feel: no text scaling, no rubber-band scroll on the page */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; /* contain the header's 100vw full-bleed band — no stray horizontal scrollbar */ overflow-x: clip; } /* First paint eases up from the dark-pink launch/underlay into the lighter app bg, instead of snapping. Body starts transparent (pink shows through) and fades to opaque on its single render. */ @keyframes app-fade-in { from { opacity: 0; } to { opacity: 1; } } body { margin: 0; font-family: var(--font-brand); animation: app-fade-in 0.45s ease-out both; background: radial-gradient(circle at 15% 20%, #ffe3ee 0%, transparent 45%), radial-gradient(circle at 85% 80%, #dff6ff 0%, transparent 45%), var(--bg); color: var(--ink); min-height: 100dvh; display: grid; /* fixed-width centred column — the track must NOT size to content, or wide feedback ("🔥 3 in a row!") would stretch the progress bar and shift the mascot. .screen fills this; its own max-width is the cap. */ grid-template-columns: min(100%, 480px); justify-content: center; align-items: center; /* app, not document: suppress text selection, callout menu, double-tap zoom, and the grey tap flash on buttons */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .load-error { /* always-visible failure surface — sits above every screen, survives screen switches because it's a body child, not inside a .screen */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; border: none; font: inherit; font-size: 1.05rem; color: white; background: var(--red); padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); cursor: pointer; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15); } .screen { position: relative; text-align: center; /* honour the notch / Dynamic Island and the home-indicator inset */ padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); max-width: 480px; width: 100%; } h1 { font-size: 3rem; margin: 0 0 8px; color: var(--pink); } /* Two-tone wordmark: "DoReMi" (solfège) pink + "ngo" (flamingo) plum */ .wordmark { font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .wm-solfege { color: var(--pink); } .wm-ngo { color: var(--ink); } .tagline { font-size: 1.1rem; margin-bottom: 32px; } .big-btn { font-size: 1.4rem; padding: 18px 36px; border: none; border-radius: 999px; background: var(--pink); color: white; cursor: pointer; box-shadow: 0 4px 0 #d23369; } .big-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #d23369; } .big-btn.secondary { background: white; color: var(--pink); box-shadow: 0 4px 0 #e8d5c4; margin-top: 12px; } .big-btn.secondary:active { box-shadow: 0 2px 0 #e8d5c4; } .level-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .level-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: none; border-radius: 16px; background: white; cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: 0 2px 0 #e8d5c4; } .level-card:active { transform: translateY(1px); } .level-card .level-main { display: flex; align-items: center; gap: 14px; flex: 1; border: none; background: none; font: inherit; color: inherit; text-align: left; padding: 0; cursor: pointer; } .level-card .badge { font-size: 1.5rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); flex-shrink: 0; } .level-card.cleared .badge { background: #d8f5ec; } .level-card.current { outline: 3px solid var(--pink); } .level-card .level-name { font-weight: 700; } .level-card .level-sub { font-size: 0.85rem; color: #8a7a8f; } .theory-body { text-align: left; font-size: 1.05rem; line-height: 1.55; margin-bottom: 20px; } .level-card .book-btn { margin-left: auto; border: none; background: var(--bg); border-radius: 10px; font-size: 1.1rem; padding: 8px; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; color: var(--ink); } .level-card .book-btn svg { width: 22px; height: 22px; display: block; } /* Nav header pins to the top while the screen scrolls. Full-bleed (negative margins cancel the screen's padding) so its backdrop spans edge-to-edge, with a gradient that's solid at the top and fades to transparent at the bottom — content dissolves under the bar instead of meeting a hard box edge (iOS large-title nav pattern). */ .quiz-header { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; margin: calc(-1 * max(24px, env(safe-area-inset-top))) calc(-1 * max(24px, env(safe-area-inset-right))) 0 calc(-1 * max(24px, env(safe-area-inset-left))); padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 20px max(24px, env(safe-area-inset-left)); } /* Full-bleed backdrop: spans the whole viewport width, not just the centred 480px column, so it never leaves a vertical seam on wide screens (iPad/desktop). Content stays in-column; only the fading band breaks out. */ .quiz-header::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: linear-gradient(var(--bg) 60%, transparent); z-index: -1; pointer-events: none; } .quiz-header .bar-track { flex: 1; } /* Info screens are top-aligned (not vertically centred by body) so the back button always sits at the very top, even when the content is short. */ #about-screen, #notes-screen, #theory-screen { align-self: start; min-height: 100dvh; } /* Same as .quiz-screen: column fills the viewport so Mingo anchors at the bottom (margin-top:auto on the mascot stage) instead of floating mid-screen. */ #daily-screen { align-self: start; min-height: 100dvh; display: flex; flex-direction: column; } #daily-mascot-stage { margin-top: auto; } /* Level view fills the viewport: nav at top, question/answers centred in the thumb zone, Mingo anchored at the bottom talking up through a bubble. */ .quiz-screen { min-height: 100dvh; display: flex; flex-direction: column; } .quiz-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 20px); min-height: 0; /* let it shrink on short screens instead of overflowing */ } .quiz-main .degrees, .quiz-main .replays { margin: 0; } .mascot-stage { position: relative; /* anchor for the absolutely-placed speech bubble */ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; /* Mingo pinned to the bottom… */ gap: 4px; margin-top: 8px; /* …with fixed reserved space above. The bubble is taken out of flow (absolute) so however many lines it grows to, it never shifts the centred question or moves Mingo. */ min-height: 150px; } /* Back chevron, top-left — replaces the ambiguous 🗺️ map glyph */ .back-btn { flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 0 #e8d5c4; } .back-btn svg { width: 22px; height: 22px; display: block; } .back-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #e8d5c4; } /* Home has no nav header, just the floating burger. A top fade scrim gives the button the same backdrop the other screens get from .quiz-header — but only once scrolled, so it never dims the mascot sitting at the top at rest. `body.scrolled` is toggled by a scroll listener in main.js. */ #home-screen::before { content: ''; position: fixed; inset: 0 0 auto 0; height: calc(max(16px, env(safe-area-inset-top)) + 56px); background: linear-gradient(var(--bg) 55%, transparent); z-index: 9; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } body.scrolled #home-screen::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { #home-screen::before { transition: none; } body { animation: none; } } /* Burger menu — top-right of the home screen */ .menu-btn { /* fixed (not absolute) so it stays put while the home screen scrolls. The calc keeps it on the centred column's right edge on wide viewports. */ position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right), calc((100vw - 480px) / 2 + 16px)); width: 44px; height: 44px; border: none; border-radius: 50%; background: white; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 0 #e8d5c4; z-index: 10; } .menu-btn svg { width: 24px; height: 24px; display: block; } .menu-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #e8d5c4; } /* Back-to-modes button on the Learn map — mirrors the burger, top-left. */ .home-back-btn { position: fixed; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left), calc((100vw - 480px) / 2 + 16px)); z-index: 10; } .menu-popover { position: fixed; top: max(64px, calc(env(safe-area-inset-top) + 48px)); right: max(16px, env(safe-area-inset-right), calc((100vw - 480px) / 2 + 16px)); z-index: 10; background: white; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 6px; display: flex; flex-direction: column; min-width: 190px; text-align: left; transform-origin: top right; /* iOS-style spring: scale from the anchor corner, slight overshoot, no rotation */ animation: menu-pop-in 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both; } .menu-popover.closing { animation: menu-pop-out 0.18s ease-in forwards; } @keyframes menu-pop-in { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } @keyframes menu-pop-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } /* Backdrop dim behind the open menu (UIMenu-style) */ .menu-scrim { position: fixed; inset: 0; z-index: 9; background: rgba(59, 45, 63, 0.18); animation: scrim-in 0.2s ease both; } .menu-scrim.closing { animation: scrim-out 0.18s ease forwards; } @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scrim-out { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .menu-popover, .menu-popover.closing, .menu-scrim, .menu-scrim.closing { animation: none; } } .menu-item { display: flex; align-items: center; gap: 16px; border: none; background: none; font: inherit; font-size: 1rem; text-align: left; padding: 12px 14px; border-radius: 10px; cursor: pointer; color: var(--ink); } .menu-item:active { background: #faf0e6; } .menu-item.danger { color: var(--pink); } .menu-icon { width: 24px; flex: none; display: grid; place-items: center; } .menu-icon svg { width: 22px; height: 22px; display: block; } /* Notes reference — squircle + blurb per named note */ .notes-title { color: var(--pink); margin: 0 0 4px; } .notes-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; } .note-row { display: flex; align-items: center; gap: 16px; } .note-slot { flex: none; min-width: 64px; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: #c4b2c9; } .note-slot .degree-btn { flex: none; } .note-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .note-desc { margin: 0; font-size: 0.9rem; line-height: 1.4; color: #5d4c62; } .walk-slot { display: flex; align-items: center; gap: 10px; min-height: 1.5em; font-size: 0.85rem; font-weight: 700; color: #c4b2c9; } .walk-link { border: none; background: none; padding: 0; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--pink); cursor: pointer; } .icon-btn { border: none; background: white; border-radius: 12px; font-size: 1.2rem; min-width: 44px; min-height: 44px; padding: 8px 10px; cursor: pointer; box-shadow: 0 2px 0 #e8d5c4; } .book-btn { min-width: 44px; min-height: 44px; } .walk { display: flex; gap: 10px; justify-content: center; min-height: 1.5em; margin: 0 0 6px; font-weight: 700; color: #c4b2c9; } .walk-note { transition: transform 0.15s, color 0.15s; } .walk-note.lit { color: var(--pink); transform: scale(1.3); } /* Notes outside the button octave (e.g. the high Do you walk up to) read as a tinted variant so the prime/comma mark isn't the only cue. */ .walk-note-octave { color: var(--blue); font-style: italic; } .walk-note-octave.lit { color: var(--blue); transform: scale(1.3); } @media (prefers-reduced-motion: reduce) { .walk-note.lit { transform: none; } } .replays { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 8px; } .chip-btn { border: none; background: white; border-radius: 999px; font: inherit; font-size: 0.95rem; min-height: 44px; padding: 8px 16px; cursor: pointer; box-shadow: 0 2px 0 #e8d5c4; } .chip-btn:disabled { opacity: 0.4; } .slots { display: flex; gap: 10px; justify-content: center; margin: 8px 0; } .slot { min-width: 56px; min-height: 48px; border-radius: 14px; background: white; box-shadow: inset 0 0 0 2px #e8d5c4; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; } .slot.filled { box-shadow: inset 0 0 0 2px var(--blue); } .slot.good { background: #d8f5ec; box-shadow: inset 0 0 0 2px var(--green); } .slot.bad { background: #fde3e9; box-shadow: inset 0 0 0 2px var(--red); } .kbd-hint { font-size: 0.75rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .about { text-align: left; font-size: 0.95rem; line-height: 1.55; color: #5d4c62; } .about h2 { font-size: 1.05rem; color: var(--ink); margin: 20px 0 6px; } .about p { margin: 0 0 10px; } .footer { margin-top: 24px; font-size: 0.8rem; } .footer a { color: #b39bbb; } .meet-help { margin-top: 14px; font-size: 0.85rem; } .meet-help a { color: #b39bbb; } @media (pointer: coarse) { .kbd-hint { display: none; } } .status { color: #8a7a8f; } .prompt { font-size: 1.3rem; min-height: 2em; } .bar-track { height: 18px; border-radius: 999px; background: #f3e3d3; overflow: hidden; } .bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--yellow), var(--green)); transition: width 0.4s ease; } .degrees { display: flex; flex-wrap: wrap; gap: clamp(8px, 2.5vw, 12px); justify-content: center; margin: 24px 0; } .degree-btn { /* fluid so a row of answers fits SE-class widths without scrolling */ width: clamp(62px, 21vw, 88px); height: clamp(62px, 21vw, 88px); border: none; border-radius: clamp(16px, 5vw, 20px); font-size: clamp(1.2rem, 5.5vw, 1.5rem); font-weight: 700; color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform 0.1s; } .degree-btn:disabled { opacity: 0.45; } .degree-btn:not(:disabled):active { transform: scale(0.95); } .degree-btn .num { font-size: 0.9rem; font-weight: 400; opacity: 0.85; } .degree-btn[data-degree="1"] { background: var(--pink); } .degree-btn[data-degree="2"] { background: #f4845f; } .degree-btn[data-degree="3"] { background: var(--yellow); color: var(--ink); } .degree-btn[data-degree="4"] { background: var(--green); } .degree-btn[data-degree="5"] { background: var(--blue); } .degree-btn[data-degree="6"] { background: #7b6cf6; } .degree-btn[data-degree="7"] { background: #c66cf6; } /* chromatic degrees (note reference, chromatic levels) */ .degree-btn[data-degree="fi"] { background: #2a9d8f; } .degree-btn[data-degree="te"] { background: #e76f51; } .degree-btn[data-degree="ra"] { background: #e07a9b; } .degree-btn[data-degree="me"] { background: #d6a14a; } .degree-btn[data-degree="le"] { background: #6a76c4; } .degree-btn.correct { outline: 4px solid var(--green); } .degree-btn.wrong { outline: 4px solid var(--red); } .degree-btn.playing { transform: scale(1.1); box-shadow: 0 0 0 4px var(--yellow), 0 0 18px var(--yellow); } @media (prefers-reduced-motion: reduce) { .degree-btn.playing { transform: none; } } /* Mingo's speech bubble — rises above him, with a little downward tail. Hidden when empty so he stands alone while the player listens. */ .feedback { /* Out of flow, bottom-anchored just above Mingo, so it grows upward as lines are added without ever pushing siblings. drop-shadow (vs box-shadow) wraps the whole silhouette — bubble + tail — so the tail carries the shadow too. */ position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); margin: 0; width: max-content; max-width: 100%; font-size: 1.05rem; font-weight: 700; line-height: 1.35; text-align: center; text-wrap: balance; background: white; color: var(--ink); border-radius: 16px; padding: 12px 18px; filter: drop-shadow(0 3px 0 #e8d5c4); } .feedback:empty { display: none; } .feedback::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: inherit; } .feedback.good { color: #04a47b; background: #d8f5ec; filter: drop-shadow(0 3px 0 #b3e6d6); } .feedback.bad { color: var(--berry); background: #fde3e9; filter: drop-shadow(0 3px 0 #f3c3cf); } /* ---------- mascot ---------- */ .mascot svg { width: 100%; height: 100%; overflow: visible; } /* head pokes out mid-wiggle */ .mascot-lg { width: 130px; height: 156px; margin: 0 auto; } .mascot-sm { width: 56px; height: 67px; flex-shrink: 0; } .mascot .flamingo { transform-origin: 50% 80%; animation: bob 3s ease-in-out infinite; } .mascot.good .flamingo { animation: hop 0.5s ease-out 2; } .mascot.bad .flamingo { animation: wiggle 0.5s ease-in-out 1; } .mascot.party .flamingo { animation: party 0.7s ease-in-out infinite; } /* mood FX — shown only in the matching state */ .mascot .fx { display: none; } .mascot.good .fx-happy { display: inline; } .mascot.party .fx-party { display: inline; } .mascot.bad .fx-sad { display: inline; } .spark, .tear { transform-box: fill-box; transform-origin: center; } .spark { animation: sparkle 1.2s ease-in-out infinite; } .spark-b { animation-delay: 0.4s; } .tear { animation: drip 1.6s ease-in-out infinite; } @keyframes sparkle { 0%, 100% { transform: scale(0.4); opacity: 0.2; } 50% { transform: scale(1); opacity: 1; } } @keyframes drip { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-2deg); } } @keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px) rotate(-4deg); } } @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } } @keyframes party { 0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); } 50% { transform: translateY(-10px) rotate(6deg) scale(1.06); } } /* ---------- hand signs ---------- */ .degree-btn .sign { width: 22px; height: 22px; color: rgba(255, 255, 255, 0.9); } .degree-btn[data-degree="3"] .sign { color: rgba(59, 45, 63, 0.75); } .degree-btn .sign svg { width: 100%; height: 100%; display: block; } /* ---------- confetti ---------- */ .confetti-piece { position: fixed; top: -20px; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; animation: confetti-fall linear forwards; z-index: 10; } @keyframes confetti-fall { to { transform: translateY(105vh) rotate(720deg); } } /* ---------- streak ---------- */ .streak-pop { display: inline-block; animation: streak-pop 0.4s ease-out; } @keyframes streak-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .mascot .flamingo, .mascot.good .flamingo, .mascot.bad .flamingo, .mascot.party .flamingo, .spark, .tear, .streak-pop { animation: none; } .confetti-piece { display: none; } .bar-fill { transition: none; } } /* ---------- Daily mode ---------- */ /* Centre the title block across the full width; the back button floats over the left so it doesn't shove the title off-centre. Extra vertical padding keeps the header from crowding the top edge / notch. */ #daily-screen .quiz-header { justify-content: center; padding-top: max(44px, calc(env(safe-area-inset-top) + 24px)); padding-bottom: 26px; } #daily-screen #daily-back-btn { position: absolute; left: max(24px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); } #daily-screen .daily-help-btn { position: absolute; right: max(24px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); } #daily-screen .daily-help-btn:active { transform: translateY(-50%) translateY(2px); } .daily-headline { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; } .daily-title { font-family: var(--font-brand); font-weight: 700; font-size: 1.2rem; } .daily-sub { font-size: 0.8rem; opacity: 0.7; } .daily-play { display: flex; justify-content: center; margin: 0.25rem 0 1.5rem; } .daily-play .big-btn { margin-top: 0; padding: 0.6rem 1.2rem; font-size: 1rem; } /* Spent its turn's replay: clearly inert until the next Guess re-enables it. */ .daily-play .big-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: 0 2px 0 #d23369; } .daily-board { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 0.5rem 0 1rem; } .daily-lane { display: flex; gap: 6px; justify-content: center; } .daily-cell { position: relative; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-weight: 700; font-size: 0.9rem; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px rgba(59, 45, 63, 0.14); transition: transform 0.12s ease, background 0.12s ease; } .daily-cell.filled { box-shadow: inset 0 0 0 2px var(--blue); transform: scale(1.04); } .daily-cell.green { background: var(--green); color: #06382c; box-shadow: none; } .daily-cell.yellow { background: var(--yellow); color: var(--ink); box-shadow: none; } .daily-cell.grey { background: #cdbfd0; color: #5a4a5e; box-shadow: none; } /* Non-colour cue so green (right spot) and yellow (right note, wrong spot) stay distinguishable for colourblind players, and on the text-less recap grid: a solid corner pip = exact, a hollow ring = present. */ .daily-cell.green::after, .daily-cell.yellow::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; } .daily-cell.green::after { background: #06382c; } .daily-cell.yellow::after { box-shadow: inset 0 0 0 2px #7a5b00; } .daily-board.recap .daily-cell.green::after, .daily-board.recap .daily-cell.yellow::after { top: 3px; right: 3px; width: 7px; height: 7px; } /* On the result screen the board is a recap, not a play surface — text-less but sized to fill the available width so it doesn't read as cramped. Cells scale with the viewport (clamped) and the gap scales with them. */ .daily-board.recap { gap: clamp(5px, 1.6vw, 9px); margin: 0.35rem 0 0.75rem; } .daily-board.recap .daily-lane { gap: clamp(5px, 1.6vw, 9px); } .daily-board.recap .daily-cell { width: clamp(34px, 9vw, 52px); height: clamp(34px, 9vw, 52px); border-radius: 10px; font-size: 0; } .daily-palette { margin-top: 0.25rem; } /* A Degree proven absent from the tune is greyed and locked out of the palette. */ .daily-palette .degree-btn.absent { background: #cdbfd0; color: #6e5f72; opacity: 0.55; box-shadow: none; } .daily-palette .degree-btn.absent .sign { color: #6e5f72; } /* Results: one centred, width-capped column so figures + chart line up. */ .daily-result { text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; max-width: 360px; margin: 0 auto; } .daily-result h2 { font-family: var(--font-brand); margin: 0.1rem 0; font-size: 1.5rem; } .daily-reveal { font-weight: 600; color: var(--berry); margin: 0; } .daily-result .big-btn { margin: 0.6rem auto 0; } /* Web daily-only flavor (www.doremingo.com/daily): nudge to the full game. */ .daily-upsell { display: block; margin-top: 0.9rem; font-size: 0.95rem; color: var(--berry); } .daily-stats { width: 100%; } .stat-figures { display: flex; justify-content: space-between; gap: 0.4rem; margin: 0.2rem 0 0.7rem; } .stat-figures span { display: flex; flex-direction: column; align-items: center; flex: 1; } .stat-figures b { font-size: 1.35rem; font-family: var(--font-brand); line-height: 1.1; } .stat-figures small { font-size: 0.66rem; opacity: 0.65; margin-top: 0.1rem; } .dist-title { font-size: 0.78rem; opacity: 0.7; margin: 0.2rem 0; text-align: left; } .dist { display: flex; flex-direction: column; gap: 4px; } .dist-row { display: flex; align-items: center; gap: 6px; } .dist-label { width: 1ch; font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.7; } .dist-bar { background: #cdbfd0; color: #fff; border-radius: 4px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; padding: 1px 6px; text-align: right; min-width: 1ch; } .dist-bar.hot { background: var(--green); color: #06382c; } #daily-countdown { font-family: var(--font-mono); font-size: 0.85rem; opacity: 0.8; } /* ---------- bottom tab bar — the three top-level Modes ---------- */ /* iOS-style persistent tab bar. Shown only on the mode roots (Learn map + Daily board); JS toggles [hidden] via syncTabBar(). Fixed to the bottom, full-bleed, honouring the home-indicator inset. */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 4px; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: linear-gradient(to top, var(--bg) 72%, transparent); } .tab-btn { flex: 1 1 0; max-width: 140px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; background: transparent; color: #9a8b9e; /* resting: muted plum */ cursor: pointer; border-radius: 14px; font-family: var(--font-brand); -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .tab-btn .tab-icon { width: 24px; height: 24px; display: block; } .tab-btn .tab-label { font-size: 0.72rem; font-weight: 700; } .tab-btn:active { transform: scale(0.94); } .tab-btn.active { color: var(--berry); background: #ffe6ee; } /* Keep home-screen content clear of the fixed bar. */ #home-screen { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* ---------- Daily "how to play" modal ---------- */ .help-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(59, 45, 63, 0.45); } .help-overlay[hidden] { display: none; } .help-dialog { border-radius: 20px; padding: 24px; max-width: 360px; width: 100%; color: var(--ink); background: #fff; box-shadow: 0 12px 40px rgba(59, 45, 63, 0.28); text-align: left; } .help-dialog h2 { margin: 0 0 12px; color: var(--pink); font-size: 1.3rem; } .help-dialog p { margin: 0 0 12px; line-height: 1.45; font-size: 0.95rem; } .help-dialog .big-btn { margin-top: 4px; width: 100%; }