/* Palette is drawn from the app logo: plum outline, pink brain, cream tile. */ :root { --bg: #3E1746; --bg-soft: #5C2465; --panel: #56215F; --line: #7A3E85; --text: #FDE1DC; --muted: #D6A9C6; --accent: #FC4C76; --accent-strong: #E02A6A; --good: #34d399; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --radius: 16px; --board-size: min(92vw, 460px); --app-pad: 16px; } /* Light theme — driven by data-theme on ; JS resolves Auto from system. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --bg: #FDE1DC; --bg-soft: #FFF3F0; --panel: #ffffff; --line: #E8BFC6; --text: #4A1A52; --muted: #8A5C7F; } * { box-sizing: border-box; } /* A SOLID colour on the root element is what paints the safe-area strips (status bar / home indicator) and the overscroll area. A gradient alone leaves those regions on the default canvas, which renders black. */ html { background-color: var(--bg); /* The page still scrolls (the puzzle screen is taller than the viewport) — the scrollbar itself is just hidden, so it never sits over the artwork. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } html, body { margin: 0; padding: 0; color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; -webkit-tap-highlight-color: transparent; } body { background-color: var(--bg); background-image: radial-gradient(1200px 600px at 50% -10%, var(--bg-soft) 0%, var(--bg) 55%); background-attachment: fixed; } :root[data-theme="light"] body { background-image: radial-gradient(1200px 800px at 50% -10%, #ffffff, var(--bg)); } .app { max-width: 520px; margin: 0 auto; min-height: 100dvh; padding: max(var(--app-pad), env(safe-area-inset-top)) var(--app-pad) calc(var(--app-pad) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; } /* App bar */ .appbar { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; } /* Explicit width AND height — the source SVG is 512x512, so it must be pinned. */ .brand-logo { width: 38px; height: 38px; flex: none; display: block; border-radius: 9px; } /* Toolbar: theme selector + share/install */ .toolbar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .segmented { display: inline-flex; background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; padding: 3px; gap: 2px; } .segmented button { font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; } .segmented button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .icon-action { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; } .icon-action:hover { border-color: var(--accent); } .icon-action svg { width: 15px; height: 15px; } .icon-action.icon-only { padding: 7px 11px; font-size: 0.95rem; line-height: 1; } /* Install-help modal (iOS route) */ .modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); padding: 20px; z-index: 50; } .modal-card { position: relative; max-width: 340px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px 22px; box-shadow: var(--shadow); } .modal-card h3 { margin: 0 0 8px; } .modal-card p { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .modal-close { position: absolute; top: 8px; right: 10px; font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 4px 8px; } .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size: 0.85rem; box-shadow: var(--shadow); z-index: 60; } .appbar h1 { margin: 0; font-size: clamp(1.4rem, 5.5vw, 2rem); letter-spacing: 0.5px; background: linear-gradient(90deg, var(--accent), #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; } .iconbtn { position: absolute; left: 0; display: grid; place-items: center; width: 38px; height: 38px; padding: 0 2px 3px 0; font: inherit; font-size: 1.6rem; line-height: 1; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; } .iconbtn:hover { border-color: var(--accent); } /* Screens. The active screen takes the leftover column space so its contents (notably the game boards) can size against the viewport instead of overflowing it. */ .screen { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-height: 0; } .lead { margin: 0; color: var(--muted); text-align: center; font-size: 0.92rem; } .section-h { margin: 6px 0 -6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; } /* Home menu */ .menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: var(--text); transition: transform 0.08s ease, border-color 0.15s ease; } .card:hover { border-color: var(--accent); transform: translateY(-2px); } .card:active { transform: translateY(0); } .card-ico { width: 34px; height: 34px; display: block; border-radius: 9px; } .card-title { font-weight: 700; font-size: 1.02rem; } .card-sub { font-size: 0.74rem; color: var(--muted); } /* Progress strip */ .progress-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .pcell { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .pico { width: 22px; height: 22px; margin: 0 auto; display: block; border-radius: 6px; } .pico-emoji { width: auto; height: auto; font-size: 1.1rem; line-height: 22px; } .pval { font-weight: 700; font-variant-numeric: tabular-nums; } .plabel { font-size: 0.6rem; color: var(--muted); } /* Mode bar — scrolls horizontally with no visible scrollbar. The row bleeds past the app's side padding to the screen edge, and a mask (not an overlay) fades the chips to true transparency, so the fade blends into whatever the page background happens to be. JS toggles .can-left / .can-right, which set how wide each fade is. */ .modes-wrap { --fade-l: 0px; --fade-r: 0px; margin-inline: calc(-1 * var(--app-pad)); } .modes-wrap.can-left { --fade-l: 44px; } .modes-wrap.can-right { --fade-r: 44px; } .modes { display: flex; gap: 6px; padding-inline: var(--app-pad); /* keeps first/last chip aligned to content */ padding-block: 2px; /* room for the focus ring */ overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); transition: -webkit-mask-image 0.25s ease, mask-image 0.25s ease; } .modes::-webkit-scrollbar { display: none; } .mode-btn { flex: 1 0 auto; font: inherit; font-weight: 600; font-size: 0.85rem; white-space: nowrap; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .mode-btn:hover { border-color: var(--accent); } .mode-btn.is-active { color: #04283a; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); border-color: var(--accent-strong); } .mode-banner { text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--accent); background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 10px; padding: 8px; } /* Grid mini-games */ .stats-3 { grid-template-columns: repeat(3, 1fr); } .mini-msg { text-align: center; font-weight: 600; min-height: 1.4em; color: var(--text); } /* The board shrinks to whatever vertical space is left, so a mini-game always fits the viewport and the page never scrolls mid-play. */ .grid-game { align-self: center; height: min(92vw, 420px); aspect-ratio: 1; flex: 0 1 auto; min-height: 0; display: grid; gap: 8px; } .seq-grid { grid-template-columns: repeat(3, 1fr); } .pad { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--text) 14%, var(--panel)); cursor: pointer; transition: background 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease; } .pad:active { transform: scale(0.97); } .pad.lit { background: var(--accent); box-shadow: 0 0 18px rgba(56, 189, 248, 0.7); } .pad.correct { background: var(--good); box-shadow: 0 0 14px rgba(52, 211, 153, 0.6); } .pad.wrong { background: #ef4444; } .seqpad { background: color-mix(in srgb, #a78bfa 20%, var(--panel)); } .seqpad.flash { background: #a78bfa; box-shadow: 0 0 22px rgba(167, 139, 250, 0.8); } .seqpad.wrong { background: #ef4444; } /* Reaction pad */ .reaction-pad { align-self: center; height: min(92vw, 420px); aspect-ratio: 1; flex: 0 1 auto; min-height: 0; border: none; border-radius: 18px; cursor: pointer; color: #04283a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow); transition: background 0.08s ease; } .rx-big { font-size: clamp(1.6rem, 8vw, 2.6rem); font-weight: 800; } .rx-small { font-size: 0.9rem; opacity: 0.85; } .reaction-pad.wait { background: color-mix(in srgb, var(--text) 16%, var(--panel)); color: var(--text); } .reaction-pad.red { background: #dc2626; color: #fff; } .reaction-pad.green { background: #22c55e; color: #052e16; } .reaction-pad.toosoon { background: #f59e0b; color: #422006; } .reaction-pad.result { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); } /* Stats */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: center; } .stat-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .stat-value { display: block; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } /* In-play controls — the only two needed mid-game, kept above the board so the pinned screen never hides them. */ .play-row { display: flex; gap: 10px; justify-content: center; } .play-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none; white-space: nowrap; touch-action: manipulation; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .play-toggle:hover { border-color: var(--accent); } .play-toggle input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; } /* Lit when the goal is showing or numbers are on. */ .play-toggle[aria-pressed="true"], .play-toggle:has(input:checked) { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); } .play-toggle:disabled { opacity: 0.45; cursor: default; } /* Board */ /* The board runs the full width of the screen — bleeding past the app's side padding — so the tiles are as large as possible to tap. */ .board-wrap { position: relative; width: calc(100% + 2 * var(--app-pad)); margin-inline: calc(-1 * var(--app-pad)); } .board { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; touch-action: manipulation; } .tile { position: absolute; /* Tiles move with transform, not left/top: animating position forces a layout pass on every frame, which is what made the slide feel sluggish. transform stays on the compositor. */ left: 0; top: 0; will-change: transform; border: none; padding: 0; margin: 0; border-radius: 8px; background-repeat: no-repeat; cursor: pointer; transition: transform 0.11s cubic-bezier(0.3, 0, 0.2, 1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: #fff; font-weight: 700; font-size: clamp(1rem, 5vw, 1.6rem); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); display: flex; align-items: flex-start; justify-content: flex-start; } .tile .num { margin: 4px 0 0 6px; padding: 1px 7px; border-radius: 999px; background: rgba(15, 23, 42, 0.55); font-size: 0.85em; opacity: 0; transition: opacity 0.15s ease; } .board.show-numbers .tile .num { opacity: 1; } /* The press feedback must not use transform — that is holding the tile's position. Dim it instead. */ .tile.movable:active { filter: brightness(0.88); } .tile.blank { display: none; } /* Solved: drop the rounded corners and inner edge so the tiles fuse into one uninterrupted picture, with the board background filling the last gap. */ .board.solved .tile { border-radius: 0; box-shadow: none; } /* Preview */ .preview { position: absolute; right: 8px; bottom: 8px; background: rgba(15, 23, 42, 0.85); border: 1px solid var(--line); border-radius: 10px; padding: 6px; text-align: center; backdrop-filter: blur(4px); } .preview-label { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 3px; } #previewCanvas { display: block; border-radius: 6px; width: 96px; height: 96px; } /* The hidden attribute must win over the display rules below */ [hidden] { display: none !important; } /* While a mini-game is in play the page is pinned — no scrolling and no rubber-band, so the board can't shift under the player's finger. */ html.is-playing, html.is-playing body { overflow: hidden; overscroll-behavior: none; } /* touch-action does NOT inherit, so it has to sit on the tap targets themselves — this is what stops iOS double-tap-to-zoom while playing. */ .pad, .tile, .btn, .toggle, .mode-btn, .card, .iconbtn, .icon-action, .reaction-pad, select, button { touch-action: manipulation; } /* Visually hide the file input WITHOUT display:none — iOS Safari refuses to open the picker for a display:none input, but this technique works. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .upload-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; text-align: center; } .btn.is-disabled { opacity: 0.5; pointer-events: none; } /* Win overlay */ /* The finished picture is the reward, so the result sits in a compact popover pinned to the foot of the board — no dimming, no blur over the artwork. */ .win-overlay { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; padding: 14px; animation: rise 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .win-card { text-align: center; padding: 14px 20px 16px; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); backdrop-filter: blur(8px); } .win-card h2 { font-size: 1.15rem; } .win-emoji { font-size: 1.5rem; line-height: 1; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .win-card h2 { margin: 6px 0; } .win-card p { margin: 0 0 16px; color: var(--muted); } .win-emoji { font-size: 2.4rem; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } /* Controls */ .controls { display: flex; flex-direction: column; gap: 12px; } .control-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: end; } .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .field-wide { grid-column: 1 / -1; } .field span { font-size: 0.75rem; color: var(--muted); } select, .btn { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; } select { width: 100%; } .btn { flex: 1; min-width: 110px; font-weight: 600; transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease; } .btn:hover { border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); border-color: var(--accent-strong); color: #04283a; } .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); } .toggle { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; user-select: none; white-space: nowrap; } /* A row holding a single button (Start on the mini-games) shouldn't inherit the two-column split — span the grid and centre it. */ .control-row > .btn:only-child { grid-column: 1 / -1; justify-self: center; min-width: min(260px, 100%); } /* Action buttons sit on an even 2-column grid so every control is the same size, rather than each one sizing itself to its label. */ .control-row.actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .control-row.actions .btn, .control-row.actions .toggle { flex: none; width: 100%; min-width: 0; min-height: 46px; margin: 0; display: flex; align-items: center; justify-content: center; } .toggle input { accent-color: var(--accent); width: 16px; height: 16px; } /* Badhri Labs launcher — custom properties pierce its shadow DOM, so the component picks up this app's palette in both light and dark themes. */ app-switcher { display: block; --as-accent: var(--accent); --as-text: var(--text); --as-muted: var(--muted); --as-card-bg: var(--panel); --as-card-border: var(--line); --as-card-border-hover: var(--accent); --as-font: inherit; } /* Bottom scrim — stands in for the hidden scrollbar by hinting that the page continues below. JS adds .can-scroll-down while there is more to reach. */ .scroll-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.25s ease; background: linear-gradient(to top, var(--bg) 15%, transparent); } html.can-scroll-down .scroll-fade { opacity: 1; } /* Shared footer under every screen. margin-top:auto pins it to the bottom when a screen is short, so it never floats mid-page. */ .app-foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 10px; } /* align-self centres the box itself — text-align alone leaves an inline span hugging the left edge of the flex column. */ .splash-footer { align-self: center; text-align: center; color: var(--muted); font-size: 12px; } .foot { text-align: center; color: var(--muted); font-size: 0.8rem; } .foot p { margin: 0; } /* Crop modal */ .crop-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, 0.78); backdrop-filter: blur(4px); } .crop-card { width: min(360px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 20px; text-align: center; } .crop-card h2 { margin: 0 0 4px; font-size: 1.2rem; } .crop-hint { margin: 0 0 14px; color: var(--muted); font-size: 0.82rem; } .crop-view { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 0 auto 14px; border-radius: 12px; overflow: hidden; background: #0b1220; border: 1px solid var(--line); touch-action: none; cursor: grab; } .crop-view:active { cursor: grabbing; } .crop-view canvas { display: block; width: 100%; height: 100%; } .crop-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px); background-size: 33.33% 33.33%; box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.8); } .zoom { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--muted); font-size: 0.8rem; } .zoom input[type="range"] { flex: 1; accent-color: var(--accent); } .crop-actions { display: flex; gap: 10px; }