/* ═══════════════════════════════════════════════════════════════ ROAR BATTLE — kid-facing, iPhone-first. Everything is sized with clamp() so it works from an SE to a Pro Max. ═══════════════════════════════════════════════════════════════ */ :root { --p1: #ff8a2b; --p1-glow: #ffd24c; --p2: #31d8ff; --p2-glow: #a78bfa; --ink: #ffffff; --ink-soft: #c9bdf0; --bg-0: #17092f; --bg-1: #2a0f52; --bg-2: #3d1268; --go-a: #ffe14d; --go-b: #ff7a1a; --round: 26px; --font: ui-rounded, "SF Pro Rounded", "Nunito", "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Class-level `display` would otherwise beat the UA rule for [hidden], and the setup steps are toggled with the attribute. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } /* The white bar along the bottom on iOS. Everything the app draws lives in a box fixed to the layout viewport. When Safari collapses its toolbar the *visual* viewport grows taller than that box, and the strip left over is painted by the page canvas rather than by anything of ours. With no background on that strip came out white — which is also why Safari's own toolbar went white, since it takes its tint from the colour at the edge of the page. Painting the root the same colour the app's gradient ends on makes the strip invisible whether it appears or not. It has to be on : a background on alone stops at the bottom of the fixed box, which is exactly where the problem starts. */ html { background: var(--bg-0); } body { position: fixed; inset: 0; font-family: var(--font); color: var(--ink); background: radial-gradient(120% 80% at 50% -10%, var(--bg-2) 0%, transparent 60%), radial-gradient(100% 70% at 10% 110%, #4b1d7a 0%, transparent 55%), linear-gradient(170deg, var(--bg-1) 0%, var(--bg-0) 100%); -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* drifting starfield */ .stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 78% 12%, #ffe6a8 50%, transparent 51%), radial-gradient(1.8px 1.8px at 33% 62%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 88% 74%, #cbb8ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 34%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 22% 88%, #ffd6f0 50%, transparent 51%), radial-gradient(1.6px 1.6px at 68% 92%, #fff 50%, transparent 51%); opacity: .55; animation: twinkle 5s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .32 } to { opacity: .7 } } #confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; opacity: 0; transition: opacity .3s; } #confetti.is-on { opacity: 1; } /* ── screen stack ───────────────────────────────────────────── */ #app { position: fixed; inset: 0; z-index: 1; } .screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-right, 0px) + 20px) calc(env(safe-area-inset-bottom, 0px) + 18px) calc(env(safe-area-inset-left, 0px) + 20px); overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: center; /* Outgoing screens leave at once — cross-fading two of them looked muddy. */ opacity: 0; visibility: hidden; pointer-events: none; } .screen.is-active { opacity: 1; visibility: visible; pointer-events: auto; animation: screenIn .3s cubic-bezier(.2,.9,.3,1); } @keyframes screenIn { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } } .screen--flat { padding: 0; overflow: hidden; } /* ── the navigation bar ─────────────────────────────────────── Fixed to the top of every screen. Screens leave room for it; the full-bleed games draw underneath and it floats over them, which is why it is tinted and blurred rather than solid. */ :root { --tb: 46px; } .topbar { position: fixed; z-index: 85; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + var(--tb)); padding: env(safe-area-inset-top, 0px) calc(env(safe-area-inset-right, 0px) + 8px) 0 calc(env(safe-area-inset-left, 0px) + 8px); display: flex; align-items: center; gap: 6px; background: linear-gradient(rgba(14,6,34,.82), rgba(14,6,34,.52)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.10); } .tb-btn { appearance: none; cursor: pointer; font-family: inherit; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .02em; padding: 0 12px; height: 34px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border: 2px solid rgba(255,255,255,.20); border-radius: 17px; background: rgba(255,255,255,.10); } .tb-btn:active { transform: scale(.94); } .tb-btn--icon { padding: 0; width: 34px; justify-content: center; font-size: 17px; } .tb-btn--games { background: rgba(255,210,76,.18); border-color: rgba(255,210,76,.45); } /* Nothing to go back to from the first screen, so it stops offering. */ .tb-btn.is-idle { opacity: .35; pointer-events: none; } .tb-where { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Every screen keeps its content clear of the bar. */ body.has-topbar .screen { padding-top: calc(env(safe-area-inset-top, 0px) + var(--tb) + 10px); } body.has-topbar .screen--flat { padding-top: 0; } /* ── snake ──────────────────────────────────────────────────── The board takes whatever is left between the score and the pad, and is always drawn as square cells so the snake never comes out stretched. */ #screen-snake { padding: calc(env(safe-area-inset-top, 0px) + var(--tb) + 6px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px); display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-start; } .sn-head { display: flex; align-items: baseline; gap: 14px; width: 100%; max-width: 460px; justify-content: center; } .sn-score { font-size: 34px; font-weight: 900; color: #9df08a; line-height: 1; } .sn-len { font-size: 14px; font-weight: 800; color: rgba(201,189,240,.85); } .sn-best { font-size: 14px; font-weight: 800; color: #ffd24c; } #snake-canvas { flex: 1 1 auto; width: 100%; max-width: 460px; min-height: 0; border-radius: 18px; border: 3px solid rgba(157,240,138,.35); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 40px rgba(0,0,0,.35); touch-action: none; /* the board is steered, not scrolled */ background: #1d4526; } .sn-hint { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: rgba(201,189,240,.6); text-transform: uppercase; } /* A pad as well as the swipe: some fingers would rather press a button. */ .sn-pad { display: grid; gap: 5px; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 42px); justify-content: center; } .sn-btn { appearance: none; cursor: pointer; font-family: inherit; font-size: 17px; color: #123b1c; font-weight: 900; border: none; border-radius: 12px; background: linear-gradient(#dff8d0, #a9e08c); box-shadow: 0 3px 0 #6fae55; touch-action: none; } .sn-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6fae55; } .sn-btn--up { grid-area: 1 / 2; } .sn-btn--left { grid-area: 2 / 1; } .sn-btn--down { grid-area: 2 / 2; } .sn-btn--right { grid-area: 2 / 3; } .sn-over { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(9,4,22,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sn-over-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 30px 22px; border-radius: 26px; background: linear-gradient(180deg, #2a4a34, #16301f); border: 3px solid rgba(157,240,138,.6); box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: winPop .45s cubic-bezier(.2,1.5,.4,1); } .sn-over-emoji { font-size: 46px; line-height: 1; } .sn-over-score { font-size: 52px; font-weight: 900; color: #9df08a; line-height: 1; } .sn-over-best { margin: 0; font-size: 14px; font-weight: 800; color: rgba(255,255,255,.7); } .sn-over-best.is-new { color: #ffd24c; font-size: 17px; } /* ── the shape every mini game shares ───────────────────────── Score, a note, a best, a board that takes the rest, and a card over the top when it ends. Three games use it verbatim, which is why it is here rather than three times over. */ #screen-pairs, #screen-catch, #screen-bounce { padding: calc(env(safe-area-inset-top, 0px) + var(--tb) + 6px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px); display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: flex-start; } .mg-head { display: flex; align-items: baseline; gap: 14px; width: 100%; max-width: 460px; justify-content: center; } .mg-score { font-size: 32px; font-weight: 900; color: #ffd24c; line-height: 1; } .mg-note { font-size: 13px; font-weight: 800; color: rgba(201,189,240,.85); } .mg-best { font-size: 13px; font-weight: 800; color: #9df08a; } .mg-hint { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(201,189,240,.55); } #pairs-canvas, #catch-canvas, #bounce-canvas, #copy-canvas, #odd-canvas, #cups-canvas { flex: 1 1 auto; width: 100%; max-width: 460px; min-height: 0; border-radius: 18px; touch-action: none; border: 3px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.45); } #pairs-canvas { background: #1a0f38; } #catch-canvas { background: #1b3a6b; } #bounce-canvas { background: #150b30; } #copy-canvas { background: #120a2c; } #odd-canvas { background: #101b3a; } #cups-canvas { background: #160c26; } /* COPY ME's one button. Kept quiet, because it is a help rather than a move, and it goes flat instead of vanishing while the tune is playing — a button that disappears is a button she has to find again. */ .cp-replay { padding: 9px 20px; font-size: 13px; letter-spacing: .05em; border-radius: 999px; flex: 0 0 auto; } .cp-replay[disabled] { opacity: .32; } .mg-over { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(9,4,22,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .mg-over-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 30px 22px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, #38215f, #241246); border: 3px solid rgba(255,210,76,.7); box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: winPop .45s cubic-bezier(.2,1.5,.4,1); } .mg-over-emoji { font-size: 46px; line-height: 1; } .mg-over-score { font-size: 50px; font-weight: 900; color: #ffd24c; line-height: 1; } .mg-over-sub { margin: -2px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(201,189,240,.7); } .mg-over-best { margin: 4px 0 2px; font-size: 14px; font-weight: 800; color: rgba(255,255,255,.7); } .mg-over-best.is-new { color: #ffd24c; font-size: 17px; } /* ── add to home screen ─────────────────────────────────────── Numbered steps with the buttons drawn as they look on the phone, because "tap Share" only helps someone who already knows which one Share is. */ .sheet--add { z-index: 92; } .add-card { max-width: 380px; } .add-emoji { font-size: 42px; line-height: 1; } .add-steps { list-style: none; counter-reset: step; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; } .add-steps li { counter-increment: step; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; line-height: 1.35; color: rgba(255,255,255,.92); } .add-steps li::before { content: counter(step); flex: 0 0 auto; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: rgba(255,210,76,.20); color: #ffd24c; border: 2px solid rgba(255,210,76,.45); } /* A button quoted from the phone's own chrome, so it is recognisable on sight rather than by name. */ .add-key { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; margin: 0 1px; border-radius: 7px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-weight: 800; white-space: nowrap; } .add-key svg { width: 13px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .add-note { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: rgba(201,189,240,.75); } /* ── the key ────────────────────────────────────────────────── The little question that unlocks a mini game. Big buttons, one tap, and nothing on it that looks like failure. */ .sheet--key { z-index: 95; } .key-lock { font-size: 40px; line-height: 1; } .key-emoji { font-size: 40px; line-height: 1; margin-top: -2px; } .key-show { font-size: clamp(30px, 10vw, 46px); font-weight: 900; letter-spacing: .10em; color: #ffd24c; margin: 2px 0 6px; } .key-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .key-opt { appearance: none; cursor: pointer; font-family: inherit; color: #fff; min-width: 68px; padding: 14px 10px; font-size: 26px; font-weight: 900; border: 3px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.08); } .key-opt:active { transform: scale(.94); } /* ── grow a tree ────────────────────────────────────────────── What it wants, then the three things you can give it. Big targets: this is the whole of the game, and it is all done with one finger. */ #screen-tree { padding: calc(env(safe-area-inset-top, 0px) + var(--tb) + 6px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px); display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: flex-start; } #tree-canvas { flex: 1 1 auto; width: 100%; max-width: 460px; min-height: 0; border-radius: 18px; touch-action: none; border: 3px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.45); background: #8fc9e8; } .tr-asks { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(201,189,240,.8); display: flex; align-items: center; gap: 8px; } .tr-want { font-size: 30px; line-height: 1; animation: wantPop .5s cubic-bezier(.2,1.6,.4,1); } @keyframes wantPop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1); } } .tr-tools { display: flex; gap: 10px; justify-content: center; } .tr-tool { appearance: none; cursor: pointer; font-family: inherit; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; min-width: 84px; border: 3px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.07); } .tr-tool span { font-size: 30px; line-height: 1; } .tr-tool b { font-size: 11px; font-weight: 900; letter-spacing: .06em; } .tr-tool:active { transform: scale(.94); } /* ── space duel ─────────────────────────────────────────────── Two bars, a board, and whoever lives here working away opposite you. */ .screen--duel { padding: calc(env(safe-area-inset-top, 0px) + var(--tb) + 6px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px); justify-content: flex-start; gap: 8px; } .du-head { text-align: center; } .du-title { margin: 0; font-size: clamp(22px, 7vw, 32px); font-weight: 900; letter-spacing: .04em; color: #ffd24c; } .du-how { margin: 2px 0 0; font-size: 13px; color: rgba(201,189,240,.85); } .du-bars { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 5px; } .du-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; } .du-row b { min-width: 42px; text-align: left; color: #fff; } /* Direct child only: the bar's fill is a span too, and this rule was pinning it to 62px so both bars looked a quarter full at nil-nil. */ .du-row > span { min-width: 62px; text-align: right; color: rgba(201,189,240,.9); } .du-track { flex: 1 1 auto; height: 12px; border-radius: 6px; background: rgba(255,255,255,.10); overflow: hidden; display: block; } .du-fill { display: block; height: 100%; border-radius: 6px; transition: width .12s linear; } .du-fill--me { background: linear-gradient(90deg, #9df08a, #4fd07a); width: var(--me, 0%); } .du-fill--them { background: linear-gradient(90deg, #ff9a6a, #e8542f); width: var(--them, 0%); } #duel-canvas { flex: 1 1 auto; width: 100%; max-width: 460px; min-height: 0; border-radius: 18px; touch-action: none; border: 3px solid rgba(255,255,255,.14); background: radial-gradient(120% 80% at 50% 0%, #241046, #0d0620); box-shadow: 0 10px 30px rgba(0,0,0,.45); } .du-over, .rn-over { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(9,4,22,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .du-over-card, .rn-over-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 28px 20px; border-radius: 26px; max-width: 320px; text-align: center; background: linear-gradient(180deg, #38215f, #241246); border: 3px solid rgba(255,210,76,.7); box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: winPop .45s cubic-bezier(.2,1.5,.4,1); } .du-wins { font-size: 26px; font-weight: 900; color: #ffd24c; } /* ── run! ─────────────────────────────────────────────────── */ .rn-picks, .rn-levels { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 400px; } .rn-pick, .rn-level-btn { appearance: none; cursor: pointer; font-family: inherit; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; min-width: 74px; border: 3px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.06); } .rn-pick span, .rn-level-btn span { font-size: 30px; line-height: 1; } .rn-pick b, .rn-level-btn b { font-size: 11px; font-weight: 900; letter-spacing: .05em; } .rn-pick.is-on, .rn-level-btn.is-on { border-color: #ffd24c; background: rgba(255,210,76,.16); box-shadow: 0 0 18px -4px #ffd24c; } .rn-pick:active, .rn-level-btn:active { transform: scale(.95); } #screen-run { padding: calc(env(safe-area-inset-top, 0px) + var(--tb) + 6px) 8px calc(env(safe-area-inset-bottom, 0px) + 8px); display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center; } .rn-head { display: flex; align-items: baseline; gap: 14px; width: 100%; max-width: 560px; justify-content: center; } .rn-score { font-size: 32px; font-weight: 900; color: #ffd24c; line-height: 1; } .rn-level { font-size: 13px; font-weight: 800; color: rgba(201,189,240,.85); } .rn-best { font-size: 13px; font-weight: 800; color: #9df08a; } /* A runner wants a letterbox, not a portrait strip: on a phone held upright a full-height board is nine tenths empty sky with the action in a band at the bottom. */ #run-canvas { flex: 0 1 auto; width: 100%; max-width: 560px; aspect-ratio: 3 / 2; max-height: 58vh; border-radius: 18px; touch-action: none; border: 3px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.45); background: #2b1a52; } .rn-hint { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(201,189,240,.55); } .rn-over-who { font-size: 46px; line-height: 1; } .rn-over-score { font-size: 50px; font-weight: 900; color: #ffd24c; line-height: 1; } .rn-over-best { margin: 0; font-size: 14px; font-weight: 800; color: rgba(255,255,255,.7); } .rn-over-best.is-new { color: #ffd24c; font-size: 17px; } /* ── the launch ─────────────────────────────────────────────── Over everything, including the bar: for these few seconds there is nothing else on the phone but the rocket. */ .launch { position: fixed; inset: 0; z-index: 120; background: #090416; } #launch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .launch-word { position: absolute; left: 0; right: 0; top: 18%; text-align: center; pointer-events: none; font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 0 6px 26px rgba(0,0,0,.75), 0 0 40px rgba(255,210,76,.5); opacity: 0; } .launch-word.is-on { opacity: 1; } .launch-word.is-ready { font-size: 28px; animation: lwIn .5s ease both; } .launch-word.is-count { font-size: clamp(90px, 34vw, 190px); line-height: 1; animation: lwCount .8s cubic-bezier(.2,1.5,.4,1) both; } .launch-word.is-liftoff { font-size: clamp(34px, 11vw, 60px); color: #ffd24c; animation: lwShout .7s cubic-bezier(.2,1.6,.4,1) both; } .launch-word.is-space { font-size: clamp(30px, 9vw, 52px); animation: lwIn .6s ease both; } /* where it is going, and where it got to */ .launch-word.is-where, .launch-word.is-arrived, .launch-word.is-welcome { font-size: clamp(26px, 8vw, 44px); line-height: 1.15; animation: lwIn .6s ease both; } .launch-word.is-welcome { font-size: clamp(38px, 13vw, 68px); } .launch-word small { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); text-shadow: 0 2px 8px rgba(0,0,0,.7); } .launch-word.is-welcome small { margin-top: 6px; font-size: 15px; letter-spacing: .04em; text-transform: none; color: #ffd24c; } .launch-word.is-arrived { color: #ffd24c; } .launch-word.is-gone { opacity: 0; transition: opacity .4s ease; } @keyframes lwCount { 0% { transform: scale(2.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.75); opacity: 0; } } @keyframes lwShout { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.15) rotate(2deg); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes lwIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } } .launch-skip { position: absolute; z-index: 2; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); right: calc(env(safe-area-inset-right, 0px) + 16px); appearance: none; cursor: pointer; font-family: inherit; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 800; padding: 8px 14px; border: 2px solid rgba(255,255,255,.25); border-radius: 16px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .launch-skip:active { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { .launch-word { animation: none !important; } } /* ── settings ─────────────────────────────────────────────── */ .sheet--set { z-index: 92; } .set-row { appearance: none; cursor: pointer; font-family: inherit; color: #fff; width: 100%; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); font-size: 15px; text-align: left; } .set-row:active { transform: scale(.98); } .set-what { font-weight: 700; } .set-val { color: #ffd24c; font-weight: 900; } /* ── type ───────────────────────────────────────────────────── */ .title { margin: 0; line-height: .92; font-size: clamp(56px, 19vw, 108px); font-weight: 900; letter-spacing: -.02em; } .title-word { display: block; background: linear-gradient(180deg, #fff7d6 0%, var(--go-a) 45%, var(--go-b) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(255,180,60,.5)); animation: bobble 2.6s ease-in-out infinite; } .title-word--2 { background: linear-gradient(180deg, #e6faff 0%, var(--p2) 45%, var(--p2-glow) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(120,200,255,.5)); animation-delay: .3s; } @keyframes bobble { 0%, 100% { transform: translateY(0) rotate(-1deg) } 50% { transform: translateY(-8px) rotate(1deg) } } .tagline { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink-soft); } .heading { margin: 0; font-size: clamp(26px, 7.4vw, 36px); font-weight: 900; text-shadow: 0 3px 0 rgba(0,0,0,.28); } .heading--sm { font-size: clamp(20px, 5.6vw, 26px); } .subheading { margin: 0; max-width: 22em; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink-soft); } .fineprint { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: rgba(201,189,240,.72); } /* Which build is loaded. Tap it to reload past a stale cache. */ .build-tag { margin: 10px 0 0; padding: 4px 10px; font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: rgba(201,189,240,.5); background: rgba(255,255,255,.05); border: 0; border-radius: 999px; } .warn { margin: 0; max-width: 24em; padding: 12px 16px; font-size: 14px; font-weight: 700; line-height: 1.45; color: #fff3c4; background: rgba(255,180,40,.14); border: 2px solid rgba(255,200,70,.42); border-radius: 18px; } .status { margin: 0; min-height: 22px; font-size: 15px; font-weight: 700; color: var(--p1-glow); } /* ── buttons ────────────────────────────────────────────────── */ .btn { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 900; letter-spacing: .04em; color: #43210a; padding: 18px 40px; font-size: 22px; border-radius: 999px; background: linear-gradient(180deg, var(--go-a) 0%, var(--go-b) 100%); box-shadow: 0 7px 0 #b8480a, 0 14px 26px rgba(255,120,20,.4); transition: transform .09s ease, box-shadow .09s ease, opacity .2s; } .btn--huge { padding: 22px 52px; font-size: clamp(24px, 7vw, 30px); } .btn:active { transform: translateY(6px); box-shadow: 0 1px 0 #b8480a, 0 6px 14px rgba(255,120,20,.35); } .btn:disabled { opacity: .38; box-shadow: 0 7px 0 #6c4a2e; } .btn--go { animation: breathe 2.2s ease-in-out infinite; } .btn--go:active { animation: none; } @keyframes breathe { 0%,100% { scale: 1 } 50% { scale: 1.04 } } .linkish { appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; padding: 8px 12px; } .linkish:active { color: #fff; } /* ── splash ─────────────────────────────────────────────────── */ .splash-beasts { position: relative; height: 92px; width: 100%; } .beast { position: absolute; font-size: 66px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); } .b1 { left: 12%; animation: sway 3.2s ease-in-out infinite; } .b2 { right: 12%; animation: sway 3.2s ease-in-out infinite reverse; } @keyframes sway { 0%,100% { transform: translateY(0) rotate(-7deg) } 50% { transform: translateY(-14px) rotate(7deg) } } /* ── mic screen ─────────────────────────────────────────────── */ .big-emoji { font-size: 88px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); } .pulse { animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } } .room-bar { width: min(260px, 70vw); height: 12px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; } .room-bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--p2), var(--p2-glow)); animation: sweep 1.2s ease-in-out infinite; } @keyframes sweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(250%) } } /* ── setup ──────────────────────────────────────────────────── */ .player-chip { padding: 9px 22px; border-radius: 999px; font-size: 15px; font-weight: 900; letter-spacing: .14em; color: #2a1400; background: linear-gradient(180deg, #fff, #ffd9a8); box-shadow: 0 5px 0 rgba(0,0,0,.28); } .player-chip--p1 { background: linear-gradient(180deg, #ffe9c9, var(--p1)); } .player-chip--p2 { background: linear-gradient(180deg, #d6f6ff, var(--p2)); } .step { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } .avatar-drop { position: relative; display: grid; place-items: center; width: min(190px, 50vw); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.08); border: 5px dashed rgba(255,255,255,.35); overflow: hidden; cursor: pointer; transition: transform .12s, border-color .2s; } .avatar-drop:active { transform: scale(.96); } .avatar-drop.has-photo { border-style: solid; border-color: var(--p1-glow); } .avatar-drop img { width: 100%; height: 100%; object-fit: cover; } .avatar-plus { font-size: 54px; } .name-input { width: min(280px, 78vw); padding: 14px 18px; font-family: inherit; font-size: 18px; font-weight: 800; text-align: center; color: #fff; background: rgba(255,255,255,.10); border: 3px solid rgba(255,255,255,.22); border-radius: 18px; outline: none; } .name-input::placeholder { color: rgba(255,255,255,.42); } .name-input:focus { border-color: var(--p1-glow); background: rgba(255,255,255,.16); } /* record orb */ .record-orb { position: relative; appearance: none; border: 0; cursor: pointer; padding: 0; width: min(220px, 58vw); aspect-ratio: 1; border-radius: 50%; background: transparent; display: grid; place-items: center; --c: var(--p1); --p: 0; } .record-orb--p2 { --c: var(--p2); } .orb-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(255,255,255,.14) 0); -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63%); mask: radial-gradient(circle, transparent 0 62%, #000 63%); filter: drop-shadow(0 0 18px var(--c)); } .orb-photo { width: 60%; height: 60%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 12px 26px rgba(0,0,0,.45); } .orb-label { position: absolute; bottom: 4%; padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 900; letter-spacing: .08em; color: #2a1400; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.3); } .record-orb.is-recording { animation: shudder .4s ease-in-out infinite; } @keyframes shudder { 0%,100% { transform: rotate(-1.5deg) scale(1.02) } 50% { transform: rotate(1.5deg) scale(1.05) } } .meter { width: min(280px, 76vw); height: 16px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; } .meter i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #7ef08a, var(--go-a), #ff5c5c); transition: width .06s linear; } /* ── versus + mode cards ────────────────────────────────────── */ .versus { display: flex; align-items: center; justify-content: center; gap: 14px; } .vs-side { display: flex; flex-direction: column; align-items: center; gap: 6px; } .vs-photo { width: min(96px, 24vw); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.45); } .vs-photo--p1 { border-color: var(--p1); animation: tiltA 3s ease-in-out infinite; } .vs-photo--p2 { border-color: var(--p2); animation: tiltB 3s ease-in-out infinite; } @keyframes tiltA { 0%,100% { transform: rotate(-5deg) } 50% { transform: rotate(5deg) } } @keyframes tiltB { 0%,100% { transform: rotate(5deg) } 50% { transform: rotate(-5deg) } } .vs-name { font-size: 14px; font-weight: 900; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-badge { font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.6); animation: pulse 1.4s ease-in-out infinite; } .mode-card { appearance: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 14px; width: min(430px, 92vw); padding: 16px 18px; border-radius: var(--round); border: 3px solid rgba(255,255,255,.16); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); box-shadow: 0 8px 0 rgba(0,0,0,.3), 0 16px 30px rgba(0,0,0,.32); color: #fff; font-family: inherit; transition: transform .1s, box-shadow .1s; } .mode-card:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.3); } .mode-card--grab { border-color: rgba(255,180,70,.5); } .mode-card--roar { border-color: rgba(90,210,255,.45); } .mode-emoji { font-size: 44px; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); } .mode-text { display: flex; flex-direction: column; gap: 3px; } .mode-text b { font-size: 21px; font-weight: 900; letter-spacing: .02em; } .mode-text i { font-style: normal; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink-soft); } .mode-text em { font-style: normal; font-size: 11.5px; font-weight: 900; letter-spacing: .1em; color: var(--go-a); text-transform: uppercase; } /* ── countdown ──────────────────────────────────────────────── */ #screen-countdown { justify-content: space-around; } .countdown { font-size: clamp(90px, 30vw, 190px); font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 0 40px rgba(255,220,120,.8), 0 8px 0 rgba(0,0,0,.35); } .countdown--flip { transform: rotate(180deg); } .countdown.is-go { font-size: clamp(64px, 21vw, 130px); color: var(--go-a); } .countdown.pop { animation: popIn .45s cubic-bezier(.2,1.5,.4,1); } .countdown--flip.pop { animation: popInFlip .45s cubic-bezier(.2,1.5,.4,1); } @keyframes popIn { from { transform: scale(.2); opacity: 0 } to { transform: scale(1); opacity: 1 } } @keyframes popInFlip { from { transform: rotate(180deg) scale(.2); opacity: 0 } to { transform: rotate(180deg) scale(1); opacity: 1 } } /* ── GRAB IT ────────────────────────────────────────────────── */ #screen-grab { display: block; } #grab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .grab-hud { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none; } .grab-hud--bottom { bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); } .grab-hud--top { top: calc(env(safe-area-inset-top, 0px) + var(--tb) + 8px); transform: rotate(180deg); } .hud-score { font-size: 40px; font-weight: 900; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.4); } .hud-score--p1 { color: var(--p1-glow); } .hud-score--p2 { color: var(--p2); } .hud-score.pop { animation: scorePop .35s cubic-bezier(.2,1.6,.4,1); } @keyframes scorePop { 0% { transform: scale(1) } 45% { transform: scale(1.45) } 100% { transform: scale(1) } } .hud-name { font-size: 15px; font-weight: 900; color: rgba(255,255,255,.75); max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flash-banner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: clamp(30px, 10vw, 52px); font-weight: 900; color: var(--go-a); text-shadow: 0 0 30px rgba(255,200,60,.9), 0 5px 0 rgba(0,0,0,.4); pointer-events: none; text-align: center; } .flash-banner.go { animation: bannerZip 1.2s ease-out forwards; } @keyframes bannerZip { 0% { opacity: 0; transform: translateY(-50%) scale(.4) } 25% { opacity: 1; transform: translateY(-50%) scale(1.1) } 70% { opacity: 1; transform: translateY(-50%) scale(1) } 100% { opacity: 0; transform: translateY(-50%) scale(1.25) } } /* ── ROAR METER ─────────────────────────────────────────────── */ .screen--battle { justify-content: flex-start; gap: 10px; } .timer-wrap { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .timer { font-size: 42px; font-weight: 900; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.35); } .timer.is-low { color: #ff5c78; animation: pulse .5s ease-in-out infinite; } .timer-track { width: 100%; height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; } .timer-track i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #9df08a, var(--go-a), #ff5c5c); transition: width .1s linear; } .arena { flex: 1; width: 100%; max-width: 460px; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .lane { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; --c: var(--p1); --g: var(--p1-glow); } .lane--p2 { --c: var(--p2); --g: var(--p2-glow); } .lane-avatar { width: 64px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 4px solid var(--c); box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .12s, box-shadow .12s; } .lane-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .lane.is-roaring .lane-avatar { transform: scale(1.14) rotate(-4deg); box-shadow: 0 0 30px var(--g); } .bar-track { position: relative; flex: 1; width: 100%; min-height: 0; border-radius: 20px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.10); overflow: hidden; } /* faint rungs so the climb is readable */ .bar-track::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 2px, transparent 2px 10%); } .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, var(--g) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: 0 0 26px var(--g), inset 0 2px 0 rgba(255,255,255,.5); } .bar-cap { position: absolute; left: 0; right: 0; top: -3px; height: 6px; border-radius: 99px; background: #fff; box-shadow: 0 0 18px #fff, 0 0 34px var(--g); } .lane.is-roaring .bar-track { border-color: var(--g); box-shadow: 0 0 24px color-mix(in srgb, var(--g) 45%, transparent); } .lane-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; } .lane-score { font-size: 30px; font-weight: 900; color: var(--g); line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.35); } .lane-name { font-size: 13px; font-weight: 800; color: var(--ink-soft); max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hype { margin: 0; font-size: clamp(22px, 7vw, 32px); font-weight: 900; letter-spacing: .04em; color: var(--go-a); text-shadow: 0 0 24px rgba(255,200,60,.7), 0 4px 0 rgba(0,0,0,.35); } .hype.pop { animation: hypePop .5s cubic-bezier(.2,1.5,.4,1); } @keyframes hypePop { 0% { transform: scale(.6) rotate(-6deg); opacity: 0 } 100% { transform: none; opacity: 1 } } /* ── result ─────────────────────────────────────────────────── */ .crown { font-size: 58px; animation: sway 2.4s ease-in-out infinite; } .winner-photo { width: min(180px, 46vw); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 7px solid var(--p1); box-shadow: 0 0 46px rgba(255,220,120,.65), 0 16px 34px rgba(0,0,0,.5); animation: popIn .55s cubic-bezier(.2,1.5,.4,1); } .winner-name { margin: 0; font-size: clamp(30px, 9vw, 44px); font-weight: 900; text-shadow: 0 4px 0 rgba(0,0,0,.32); } .winner-line { margin: 0; font-size: 17px; font-weight: 800; color: var(--go-a); letter-spacing: .04em; } .final-scores { display: flex; gap: 12px; } .final { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 116px; padding: 12px 16px; border-radius: 20px; background: rgba(255,255,255,.09); border: 3px solid rgba(255,255,255,.14); } .final span { font-size: 13px; font-weight: 800; color: var(--ink-soft); max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .final b { font-size: 30px; font-weight: 900; line-height: 1.1; } .final--p1 { border-color: var(--p1); } .final--p1 b { color: var(--p1-glow); } .final--p2 { border-color: var(--p2); } .final--p2 b { color: var(--p2); } /* ── short screens (iPhone SE, landscape) ───────────────────── */ @media (max-height: 680px) { .splash-beasts { height: 70px } .beast { font-size: 52px } .big-emoji { font-size: 64px } .btn { padding: 15px 34px; font-size: 19px } .btn--huge { padding: 17px 40px } .screen { gap: 10px } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } } /* ── input-mode toggle ──────────────────────────────────────── */ .how-play { display: flex; flex-direction: column; align-items: center; gap: 8px; } .how-label { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; } .seg { display: flex; gap: 6px; padding: 6px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); border-radius: 999px; } .seg-btn { appearance: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 20px; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 900; letter-spacing: .03em; color: var(--ink-soft); background: transparent; transition: background .18s, color .18s, transform .1s; } .seg-btn i { font-style: normal; font-size: 10.5px; font-weight: 700; opacity: .75; } .seg-btn:active { transform: scale(.96); } .seg-btn.is-on { color: #43210a; background: linear-gradient(180deg, var(--go-a), var(--go-b)); box-shadow: 0 3px 0 rgba(0,0,0,.28); } .row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } /* ── press-and-hold surfaces ────────────────────────────────── */ /* Full-bleed, transparent, and split down the middle: each player owns one half so nobody has to aim at a small button. */ .tap-layer { position: absolute; inset: 0; z-index: 5; touch-action: none; -webkit-user-select: none; user-select: none; } .tap-layer::before, .tap-layer::after { content: ''; position: absolute; left: 0; right: 0; height: 50%; pointer-events: none; } .tap-layer::before { top: 0; } .tap-layer::after { bottom: 0; } .tap-layer--split-x::before, .tap-layer--split-x::after { top: 0; bottom: 0; height: auto; width: 50%; right: auto; } .tap-layer--split-x::before { left: 0; } .tap-layer--split-x::after { left: 50%; } /* ── combo + series ─────────────────────────────────────────── */ .hud-combo { padding: 3px 12px; border-radius: 999px; font-size: 15px; font-weight: 900; letter-spacing: .04em; color: #43210a; background: linear-gradient(180deg, #fff3b0, var(--go-a)); box-shadow: 0 0 18px rgba(255,210,76,.7); } .hud-combo.pop { animation: scorePop .4s cubic-bezier(.2,1.6,.4,1); } .series { display: flex; align-items: baseline; gap: 8px; padding: 8px 20px; border-radius: 999px; background: rgba(255,255,255,.09); border: 2px solid rgba(255,255,255,.16); font-size: 26px; font-weight: 900; } .series b:first-of-type { color: var(--p1-glow); } .series b:last-of-type { color: var(--p2); } .series span { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ink-soft); text-transform: uppercase; } /* ── animal picker ──────────────────────────────────────────── */ .sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: rgba(9, 4, 22, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: screenIn .22s cubic-bezier(.2,.9,.3,1); --c: var(--p1); --g: var(--p1-glow); } .sheet-card { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(420px, 100%); max-height: 100%; padding: 22px 18px 12px; border-radius: var(--round); background: linear-gradient(165deg, #35176b, #221046); border: 3px solid var(--c); box-shadow: 0 20px 50px rgba(0,0,0,.55); overflow-y: auto; -webkit-overflow-scrolling: touch; } .animal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; width: 100%; } .animal { appearance: none; border: 0; background: none; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: inherit; transition: transform .1s; } .animal:active { transform: scale(.9); } .animal-face { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.35); } .animal:active .animal-face { box-shadow: 0 1px 0 rgba(0,0,0,.3); } .animal-name { font-size: 11px; font-weight: 900; letter-spacing: .03em; color: var(--ink-soft); } @media (max-height: 680px) { .animal-grid { gap: 8px 6px; } .animal-face { font-size: clamp(24px, 8vw, 32px); } .sheet-card { gap: 12px; padding: 16px 14px 8px; } } /* ── leaving a game ─────────────────────────────────────────── */ /* GRAB IT and ROAR METER had no way out but the 45 seconds. This sits in the top-left, opposite the sound button, clear of the drain bar and level pips down the middle of each edge. */ .game-x { position: fixed; z-index: 80; top: calc(env(safe-area-inset-top, 0px) + 8px); left: calc(env(safe-area-inset-left, 0px) + 8px); width: 42px; height: 42px; padding: 0; display: grid; place-items: center; font-size: 18px; font-weight: 800; line-height: 1; color: #fff; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(20,10,44,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; } .game-x:active { transform: scale(.9); } /* The question itself sits above everything, including the tap layers, so a game cannot be played through it. */ .sheet--quit { z-index: 90; } .quit-card { max-width: 20em; text-align: center; } .quit-emoji { font-size: 46px; line-height: 1; } .quit-card .heading { margin: 0; } .quit-card .subheading { margin: -6px 0 2px; } .quit-card .btn { width: min(260px, 72vw); } /* Defined after .btn--ghost, which it tints, so leaving reads differently from staying at a glance. */ .btn.btn--quit { border-color: rgba(255,138,138,.55); color: #ffc9c9; background: rgba(255,90,90,.12); } /* ── how many players ───────────────────────────────────────── */ .count-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .count-card { appearance: none; cursor: pointer; font-family: inherit; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(160px, 42vw); padding: 20px 14px; border-radius: var(--round); border: 3px solid var(--p1); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); box-shadow: 0 8px 0 rgba(0,0,0,.3); transition: transform .1s, box-shadow .1s; } .count-card--p2 { border-color: var(--p2); } .count-card:active { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.3); } .count-emoji { font-size: 38px; line-height: 1.1; } .count-card b { font-size: 17px; font-weight: 900; letter-spacing: .04em; } .count-card i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-soft); } /* ── take your sides ────────────────────────────────────────── */ /* `.screen` centres its children; the side panels must fill the width. */ #screen-sides { display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; } .side { flex: 1; display: grid; place-items: center; padding: 12px; } .side--top { transform: rotate(180deg); background: linear-gradient(180deg, rgba(49,216,255,.20), transparent); } .side--bottom { background: linear-gradient(0deg, rgba(255,138,43,.20), transparent); } .side-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; } .side-photo { width: min(110px, 26vh); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.45); } .side--top .side-photo { border-color: var(--p2); } .side--bottom .side-photo { border-color: var(--p1); } .side-name { font-size: clamp(20px, 6vw, 28px); font-weight: 900; } .side-tag { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .side-split { display: grid; place-items: center; padding: 4px; border-top: 2px dashed rgba(255,255,255,.22); border-bottom: 2px dashed rgba(255,255,255,.22); } .side-split span { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgba(201,189,240,.75); text-transform: uppercase; } /* ROAR METER is played upright, so the two sides sit left and right. */ #screen-sides.is-lr { flex-direction: row; } #screen-sides.is-lr .side--top { transform: none; background: linear-gradient(270deg, rgba(49,216,255,.20), transparent); order: 3; } #screen-sides.is-lr .side--bottom { background: linear-gradient(90deg, rgba(255,138,43,.20), transparent); order: 1; } #screen-sides.is-lr .side-split { order: 2; border: 0; border-left: 2px dashed rgba(255,255,255,.22); border-right: 2px dashed rgba(255,255,255,.22); } #screen-sides.is-lr .side-split span { writing-mode: vertical-rl; } /* ── game list ──────────────────────────────────────────────── */ .btn--ghost { background: rgba(255,255,255,.10); color: #fff; border: 3px solid rgba(255,255,255,.28); box-shadow: 0 5px 0 rgba(0,0,0,.3); padding: 14px 30px; font-size: 17px; animation: none; } .btn--ghost:active { box-shadow: 0 1px 0 rgba(0,0,0,.3); } .mode-card--balloon { border-color: rgba(230,150,255,.55); } .by-sienna { color: #e6b3ff !important; } /* ── THE HOT AIR BALLOON ────────────────────────────────────── */ #screen-balloon { display: block; } #balloon-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .bl-top { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + var(--tb) + 8px); left: 14px; display: flex; flex-direction: column; gap: 1px; pointer-events: none; } /* the two flight controls, opposite the score */ .bl-tools { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + var(--tb) + 8px); right: calc(env(safe-area-inset-right, 0px) + 12px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .bl-tool { appearance: none; cursor: pointer; font-family: inherit; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; padding: 7px 11px; white-space: nowrap; border: 2px solid rgba(255,255,255,.24); border-radius: 15px; background: rgba(20,10,44,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-shadow: 0 2px 4px rgba(0,0,0,.5); } .bl-tool:active { transform: scale(.94); } .bl-tool--trip { border-color: rgba(255,210,76,.6); background: rgba(90,60,20,.6); } .bl-tool--trip.is-home { border-color: rgba(126,200,255,.65); background: rgba(20,50,90,.6); } /* "the moon" across the middle while the balloon is on its way */ .bl-place { position: absolute; z-index: 7; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; font-size: 26px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.8); animation: placeIn .8s cubic-bezier(.2,1.4,.4,1); } @keyframes placeIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } } .bl-score { font-size: 38px; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 20px rgba(255,200,120,.6); } .bl-by { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #ffd9f2; text-shadow: 0 2px 4px rgba(0,0,0,.6); } .bl-exit { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; width: 40px; height: 40px; padding: 0; font-size: 17px; font-weight: 900; color: #fff; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(20,10,44,.45); cursor: pointer; } .bl-exit:active { transform: scale(.9); } /* two thumb clusters: a move pad on the left, burner + vent on the right */ .bl-pad { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 14px; touch-action: none; } .bl-dpad { position: relative; width: 148px; height: 148px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; } .bl-dpad-label, .bl-lift-label { font-size: 9px; font-weight: 900; letter-spacing: .14em; color: rgba(255,255,255,.7); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.7); } .bl-dpad-label { grid-area: 2 / 2; align-self: center; } .bl-btn { appearance: none; cursor: pointer; padding: 0; display: grid; place-items: center; font-family: inherit; font-size: 20px; font-weight: 900; color: #3a2210; border: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,214,150,.9)); box-shadow: 0 4px 0 rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.35); -webkit-user-select: none; user-select: none; touch-action: none; } .bl-btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.4); } .bl-btn--up { grid-area: 1 / 2; } .bl-btn--left { grid-area: 2 / 1; } .bl-btn--right { grid-area: 2 / 3; } .bl-btn--down { grid-area: 3 / 2; } .bl-lift { display: flex; flex-direction: column; align-items: center; gap: 5px; } .bl-btn--lift { width: 68px; height: 62px; font-size: 24px; border-radius: 20px; } .bl-lift .bl-btn:first-child { background: linear-gradient(180deg, #ffd98a, #ff8a2b); box-shadow: 0 4px 0 #a8480a, 0 8px 18px rgba(255,120,20,.4); } .bl-lift .bl-btn:last-child { background: linear-gradient(180deg, #dff2ff, #7ec8ff); box-shadow: 0 4px 0 #2b6f9c, 0 8px 18px rgba(60,160,220,.35); } .bl-end { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(9,4,22,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .bl-end-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(360px, 100%); padding: 24px 20px 16px; text-align: center; border-radius: var(--round); border: 3px solid #e6b3ff; background: linear-gradient(165deg, #3a1a6b, #221046); box-shadow: 0 20px 50px rgba(0,0,0,.55); } .bl-end-emoji { font-size: 52px; animation: sway 2.6s ease-in-out infinite; } .bl-end-score { font-size: 54px; font-weight: 900; line-height: 1; color: var(--go-a); text-shadow: 0 4px 0 rgba(0,0,0,.35); } .bl-end-tally { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); } .bl-credit { margin: 4px 0 0; font-size: 12px; font-weight: 900; letter-spacing: .06em; color: #e6b3ff; } @media (max-height: 680px) { .bl-dpad { width: 124px; height: 124px; } .bl-btn--lift { width: 58px; height: 52px; } .bl-score { font-size: 30px; } } /* ── COUNTING ───────────────────────────────────────────────── */ .mode-card--count { border-color: rgba(126,232,160,.5); } #screen-counting { gap: 6px; } .ct-stage { position: relative; width: min(272px, 70vw); aspect-ratio: 1; display: grid; place-items: center; --p: 0; --c: var(--go-a); } /* fills up during the pause, so the next number is something to wait for */ .ct-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(255,255,255,.10) 0); /* `closest-side` — the default (farthest-corner) makes 88% land outside the box entirely, and the whole ring gets masked away. */ -webkit-mask: radial-gradient(closest-side, transparent 0 85%, #000 87%); mask: radial-gradient(closest-side, transparent 0 85%, #000 87%); opacity: .9; } .ct-number { font-size: clamp(90px, 34vw, 190px); font-weight: 900; line-height: 1; text-shadow: 0 6px 0 rgba(0,0,0,.3); font-variant-numeric: tabular-nums; } .ct-number.pop { animation: ctPop .5s cubic-bezier(.2,1.5,.4,1); } @keyframes ctPop { 0% { transform: scale(.55); opacity: 0 } 100% { transform: scale(1); opacity: 1 } } .ct-word { font-size: clamp(22px, 6.5vw, 32px); font-weight: 900; letter-spacing: .02em; color: #fff; text-transform: lowercase; max-width: 90vw; word-break: break-word; } .ct-dots { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: min(330px, 84vw); } .ct-dots i { width: 15px; height: 15px; border-radius: 50%; animation: ctDot .45s cubic-bezier(.2,1.6,.4,1) both; } @keyframes ctDot { from { transform: scale(0) } to { transform: scale(1) } } .ct-controls { display: flex; align-items: center; gap: 14px; } .ct-btn { appearance: none; cursor: pointer; padding: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 21px; font-weight: 900; color: #2b1a10; border: 0; background: linear-gradient(180deg, #fff, #d8cdf0); box-shadow: 0 5px 0 rgba(0,0,0,.35); } .ct-btn--big { width: 78px; height: 78px; font-size: 30px; background: linear-gradient(180deg, var(--go-a), var(--go-b)); box-shadow: 0 6px 0 #b8480a, 0 12px 24px rgba(255,120,20,.35); } .ct-btn:active { transform: translateY(5px); box-shadow: 0 0 0 rgba(0,0,0,.35); } .ct-voice { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; } .ct-voice b { color: #fff; } .ct-voice .linkish { font-size: 12px; padding: 4px 6px; } @media (max-height: 680px) { .ct-stage { width: min(220px, 58vw); } .ct-btn { width: 48px; height: 48px } .ct-btn--big { width: 64px; height: 64px; font-size: 25px } } /* ── voice picker ───────────────────────────────────────────── */ .voice-list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .voice-row { appearance: none; cursor: pointer; font-family: inherit; text-align: left; display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-radius: 14px; color: #fff; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); } .voice-row b { font-size: 15px; font-weight: 900; } .voice-row span { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-left: auto; } .voice-row:active { transform: scale(.98); } .voice-row.is-on { background: linear-gradient(180deg, rgba(255,225,77,.28), rgba(255,122,26,.18)); border-color: var(--go-a); } .voice-row.is-on b::after { content: ' ✓'; color: var(--go-a); } /* ── SIENNA'S CALCULATOR ────────────────────────────────────── */ .mode-card--calc { border-color: rgba(126,200,255,.5); } #screen-calc { gap: 10px; justify-content: flex-start; padding-top: calc(env(safe-area-inset-top,0px) + var(--tb) + 12px); } .cl-head { display: flex; align-items: center; gap: 8px; width: min(420px, 100%); } .cl-title { margin: 0; flex: 1; text-align: left; font-size: clamp(19px, 5.6vw, 25px); font-weight: 900; background: linear-gradient(180deg, #fff, var(--p2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cl-speak, .cl-exit { appearance: none; cursor: pointer; padding: 0; flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; font-size: 18px; font-weight: 900; color: #fff; border: 2px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(255,255,255,.10); } .cl-speak.is-off { opacity: .5; } .cl-speak:active, .cl-exit:active { transform: scale(.9); } .cl-screen { width: min(420px, 100%); padding: 14px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18)); border: 2px solid rgba(255,255,255,.14); text-align: right; overflow: hidden; } .cl-sum { font-size: 15px; font-weight: 800; color: var(--ink-soft); min-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-out { font-size: clamp(38px, 13vw, 58px); font-weight: 900; line-height: 1.1; color: var(--go-a); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 3px 0 rgba(0,0,0,.3); } .cl-out.is-long { font-size: clamp(26px, 8vw, 38px); } .cl-out.pop { animation: scorePop .3s cubic-bezier(.2,1.6,.4,1); } .cl-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; width: min(420px, 100%); flex: 1; min-height: 0; } .cl-key { appearance: none; cursor: pointer; border: 0; padding: 0; display: grid; place-items: center; min-height: 54px; font-family: inherit; font-size: clamp(21px, 6.4vw, 28px); font-weight: 900; color: #2b1a10; border-radius: 18px; background: linear-gradient(180deg, #fff, #ddd3ee); box-shadow: 0 4px 0 rgba(0,0,0,.4); -webkit-user-select: none; user-select: none; } .cl-key:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.4); } .cl-key--wide { grid-column: span 2; } .cl-key--op { color: #fff; background: linear-gradient(180deg, #5cc4f5, #2f7fd0); box-shadow: 0 4px 0 #1d5590; } .cl-key--fn { background: linear-gradient(180deg, #e7dcf7, #b9a8d6); } .cl-key--clear { color: #fff; background: linear-gradient(180deg, #ff8f8f, #e8483f); box-shadow: 0 4px 0 #a52a24; } .cl-key--eq { color: #43210a; background: linear-gradient(180deg, var(--go-a), var(--go-b)); box-shadow: 0 4px 0 #b8480a; } .cl-credit { margin: 0; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; color: #e6b3ff; } @media (max-height: 700px) { .cl-key { min-height: 44px; font-size: clamp(18px, 5.6vw, 23px); } .cl-out { font-size: clamp(30px, 10vw, 42px); } .cl-screen { padding: 10px 14px; } } /* ══════════════════════ SPELLING BEE ══════════════════════ */ .mode-card--spell { border-color: rgba(255,210,76,.5); } .screen--spell { justify-content: flex-start; gap: 10px; padding-top: calc(env(safe-area-inset-top, 0px) + var(--tb) + 8px); } .sp-head { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; } .sp-title { flex: 1; margin: 0; text-align: center; font-size: clamp(17px, 5vw, 21px); font-weight: 900; letter-spacing: .01em; color: #ffd24c; text-shadow: 0 2px 0 rgba(0,0,0,.35); } .sp-stars { min-width: 62px; font-size: 14px; font-weight: 900; color: #fff; background: rgba(255,210,76,.18); border: 1px solid rgba(255,210,76,.4); border-radius: 999px; padding: 5px 10px; } .sp-exit { appearance: none; cursor: pointer; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(20,10,44,.55); } .sp-exit:active { transform: scale(.9); } .sp-streak { font-size: 13px; font-weight: 900; color: #ffb35c; animation: popIn .3s cubic-bezier(.2,1.6,.4,1); } /* ── the word itself ── */ /* Takes whatever room the keyboard does not, so the word sits in the middle of the screen where she is looking rather than stranded up in a corner. */ .sp-stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; } .sp-emoji { font-size: clamp(58px, 19vw, 88px); line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); animation: bobEmoji 2.6s ease-in-out infinite; } @keyframes bobEmoji { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } } /* One line, always. A word that wraps stops looking like a word, so the tiles are sized from how many letters there are — set in --tile by the game once it knows the width it has. */ .sp-word { display: flex; flex-wrap: nowrap; justify-content: center; gap: 5px; width: 100%; max-width: 520px; } .sp-tile { display: grid; place-items: center; flex: 0 0 auto; width: var(--tile, 40px); height: calc(var(--tile, 40px) * 1.3); font-size: calc(var(--tile, 40px) * 0.72); font-weight: 900; line-height: 1; border-radius: calc(var(--tile, 40px) * 0.22); } /* letters she is given: solid and calm */ .sp-tile.is-given { color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); } /* the gaps: an empty slot with a line under it, like a workbook */ .sp-tile.is-blank { border-bottom: 4px solid rgba(255,255,255,.30); border-radius: 4px; } /* the one she is filling in now: glowing and waiting */ .sp-tile.is-next { border-bottom: 4px solid #ffd24c; border-radius: 4px; background: rgba(255,210,76,.14); animation: nextPulse 1.1s ease-in-out infinite; } @keyframes nextPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,76,.5); } 50% { box-shadow: 0 0 0 7px rgba(255,210,76,0); } } /* one she worked out: gold, and hers */ .sp-tile.is-filled { color: #2b1a10; background: linear-gradient(180deg, #ffe17a, #ffb52e); box-shadow: 0 3px 0 rgba(0,0,0,.3); } .sp-tile.is-pop { animation: tilePop .45s cubic-bezier(.2,1.7,.4,1); } @keyframes tilePop { 0% { transform: scale(.5) rotate(-12deg); } 60% { transform: scale(1.25) rotate(5deg); } 100% { transform: scale(1); } } .sp-clue { margin: 0; min-height: 2.6em; max-width: 22em; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: rgba(201,189,240,.75); } .sp-clue.is-clue { color: #ffe89a; animation: popIn .32s cubic-bezier(.2,1.6,.4,1); } /* ── help buttons ── */ .sp-help { display: flex; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 520px; } .sp-help-btn { appearance: none; cursor: pointer; font-family: inherit; flex: 1 1 0; min-width: 96px; padding: 11px 6px; font-size: 12.5px; font-weight: 900; letter-spacing: .02em; color: #fff; border: 2px solid rgba(126,200,255,.45); border-radius: 14px; background: rgba(126,200,255,.14); } .sp-help-btn:active { transform: translateY(2px); } .sp-help-btn--hint { border-color: rgba(255,210,76,.5); background: rgba(255,210,76,.16); color: #ffe89a; } /* ── the alphabet ── */ .sp-pad { width: 100%; max-width: 520px; } /* Which keyboard, and which case. Small and quiet — they are set once and then forgotten, so they must not compete with the letters. */ .sp-opts { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; } .sp-opt { appearance: none; cursor: pointer; font-family: inherit; padding: 5px 12px; font-size: 11.5px; font-weight: 900; letter-spacing: .04em; color: rgba(201,189,240,.9); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.07); } .sp-opt:active { transform: scale(.94); background: rgba(255,255,255,.14); } /* Rows rather than a fixed grid: QWERTY needs 10 / 9 / 7 and A–Z 7 / 7 / 7 / 5, and both have to fit the width of an SE. */ .sp-keys { display: flex; flex-direction: column; gap: 6px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); } .sp-row { display: flex; gap: 5px; justify-content: center; } .sp-key { appearance: none; cursor: pointer; border: 0; padding: 0; flex: 1 1 0; min-width: 0; max-width: 62px; display: grid; place-items: center; min-height: 46px; font-family: inherit; font-size: clamp(15px, 4.6vw, 21px); font-weight: 900; color: #2b1a10; border-radius: 13px; background: linear-gradient(180deg, #fff, #ded4ee); box-shadow: 0 4px 0 rgba(0,0,0,.4); -webkit-user-select: none; user-select: none; } .sp-key:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.4); } .sp-key:disabled { opacity: .35; } /* a wrong letter shakes its head — no buzzer, no penalty */ .sp-key.is-wrong { background: linear-gradient(180deg, #ffd3d3, #ff9d9d); animation: keyShake .4s ease; } @keyframes keyShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-4deg); } 45% { transform: translateX(5px) rotate(4deg); } 70% { transform: translateX(-3px) rotate(-2deg); } } /* ── the celebration ── */ .sp-win { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(9,4,22,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sp-win-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 26px 22px; border-radius: 26px; background: linear-gradient(180deg, #38215f, #241246); border: 3px solid rgba(255,210,76,.7); box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: winPop .45s cubic-bezier(.2,1.5,.4,1); } @keyframes winPop { 0% { transform: scale(.7) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .sp-win-stars { font-size: 34px; line-height: 1; letter-spacing: 2px; animation: starSpin .6s cubic-bezier(.2,1.6,.4,1); } @keyframes starSpin { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } } .sp-win-praise { font-size: clamp(19px, 5.6vw, 24px); font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); } .sp-win-word { font-size: clamp(26px, 8vw, 38px); font-weight: 900; letter-spacing: .06em; color: #ffd24c; text-shadow: 0 3px 0 rgba(0,0,0,.35); } @media (max-height: 700px) { .sp-emoji { font-size: clamp(34px, 11vw, 46px); } .sp-clue { min-height: 2.2em; font-size: 12.5px; } .sp-key { min-height: 40px; } .sp-help-btn { padding: 9px 6px; } } /* ══════════════════════ HOME ══════════════════════ */ /* The home screen carries seven tiles now, so it starts at the top and the title is smaller — centring a column taller than the screen pushes the top of it off, which is what buried the lion behind the R. */ .screen--home { justify-content: flex-start; gap: 10px; } .screen--home .splash-beasts { height: 62px; } .screen--home .beast { font-size: 46px; } .screen--home .title { font-size: clamp(40px, 13vw, 66px); } .screen--home .tagline { font-size: 15px; margin-bottom: 2px; } .screen--home .fineprint { margin-top: 2px; } .screen--home .linkish { padding: 6px 12px; font-size: 14px; } /* ══════════════════════ GAME TILES ══════════════════════ */ /* The games, as a grid, on the first screen and on ALL GAMES. Two columns so the names stay readable — three would shrink them past a five year old. */ .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; width: 100%; max-width: 460px; } .tile { appearance: none; cursor: pointer; font-family: inherit; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 13px 8px 11px; color: #fff; border: 2px solid rgba(255,255,255,.14); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); box-shadow: 0 5px 0 rgba(0,0,0,.32); transition: transform .08s ease, box-shadow .08s ease; } .tile:active { transform: translateY(5px); box-shadow: 0 0 0 rgba(0,0,0,.32); } .tile-emoji { font-size: clamp(28px, 8.5vw, 38px); line-height: 1; } .tile-name { font-size: clamp(11.5px, 3.4vw, 13.5px); font-weight: 900; letter-spacing: .02em; line-height: 1.15; } .tile-note { font-size: clamp(9.5px, 2.8vw, 11px); font-weight: 700; font-style: normal; line-height: 1.2; color: rgba(201,189,240,.75); } /* the noisy ones warm, the learning ones cool, so they group at a glance */ .tile--play { border-color: rgba(255,180,60,.38); } .tile--learn { border-color: rgba(126,200,255,.35); } .tile--mini { border-color: rgba(157,240,138,.42); } /* ══════════════════════ WHAT'S THE TIME? ══════════════════════ */ .screen--clock { justify-content: flex-start; gap: 8px; padding-top: calc(env(safe-area-inset-top, 0px) + var(--tb) + 8px); } .ck-head { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; } .ck-title { flex: 1; margin: 0; text-align: center; font-size: clamp(16px, 4.8vw, 20px); font-weight: 900; color: #7ec8ff; text-shadow: 0 2px 0 rgba(0,0,0,.35); } .ck-stars { min-width: 60px; padding: 5px 10px; font-size: 14px; font-weight: 900; color: #fff; background: rgba(255,210,76,.18); border: 1px solid rgba(255,210,76,.4); border-radius: 999px; } .ck-exit { appearance: none; cursor: pointer; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(20,10,44,.55); } .ck-exit:active { transform: scale(.9); } .ck-bar { display: flex; gap: 10px; align-items: center; } .ck-level { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #9df08a; background: rgba(157,240,138,.14); border: 1px solid rgba(157,240,138,.3); border-radius: 999px; padding: 4px 11px; } .ck-streak { font-size: 12px; font-weight: 900; color: #ffb35c; } .ck-ask { margin: 0; font-size: clamp(16px, 4.6vw, 19px); font-weight: 900; } .ck-clockwrap { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; } #ck-canvas { width: min(46vh, 74vw, 300px); height: min(46vh, 74vw, 300px); display: block; } .ck-legend { display: flex; gap: 14px; font-size: 11px; font-weight: 800; color: rgba(201,189,240,.8); } .ck-dot { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; } .ck-dot--h { background: #ffd24c; width: 11px; height: 6px; } .ck-dot--m { background: #7ec8ff; } .ck-digital-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; } .ck-digital-wrap.is-on { flex: 1 1 auto; justify-content: center; } .ck-digital { font: 900 clamp(40px, 13vw, 58px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #ffd24c; letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0,0,0,.35); } .ck-inwords { font-size: clamp(15px, 4.4vw, 18px); font-weight: 900; color: #fff; } .ck-teach { margin: 0; max-width: 24em; padding: 9px 13px; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: #fff3c4; background: rgba(255,180,40,.13); border: 1px solid rgba(255,200,70,.35); border-radius: 14px; } /* the four answers */ .ck-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; max-width: 420px; margin-top: auto; } .ck-opt { appearance: none; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; padding: 9px 6px; color: #2b1a10; border: 0; border-radius: 17px; background: linear-gradient(180deg, #fff, #ded4ee); box-shadow: 0 5px 0 rgba(0,0,0,.38); } .ck-opt:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.38); } .ck-label { font-size: clamp(20px, 6vw, 26px); font-weight: 900; line-height: 1; } .ck-sub { font-size: clamp(10px, 3vw, 12px); font-weight: 800; opacity: .72; line-height: 1.15; } .ck-opt canvas { width: clamp(58px, 19vw, 86px); height: clamp(58px, 19vw, 86px); display: block; } .ck-options.is-faces .ck-opt { min-height: 0; padding: 7px; } .ck-opt.is-gone { opacity: .22; box-shadow: none; transform: scale(.94); } .ck-opt.is-right { background: linear-gradient(180deg, #c9ffb8, #7ee06a); animation: ckRight .45s cubic-bezier(.2,1.6,.4,1); } @keyframes ckRight { 0% { transform: scale(1); } 55% { transform: scale(1.09); } 100% { transform: scale(1); } } .ck-opt.is-wrong { background: linear-gradient(180deg, #ffd3d3, #ff9d9d); animation: keyShake .4s ease; } .ck-help { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 420px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); } .ck-help-btn { appearance: none; cursor: pointer; font-family: inherit; flex: 1 1 0; min-width: 92px; padding: 10px 6px; font-size: 12px; font-weight: 900; color: #fff; border: 2px solid rgba(126,200,255,.45); border-radius: 14px; background: rgba(126,200,255,.14); } .ck-help-btn:active { transform: translateY(2px); } .ck-help-btn--hint { border-color: rgba(255,210,76,.5); background: rgba(255,210,76,.16); color: #ffe89a; } .ck-help-btn.is-off { opacity: .5; } .ck-win { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(9,4,22,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .ck-win-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 24px 26px 20px; border-radius: 26px; background: linear-gradient(180deg, #38215f, #241246); border: 3px solid rgba(126,200,255,.7); box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: winPop .45s cubic-bezier(.2,1.5,.4,1); } .ck-win-stars { font-size: 32px; line-height: 1; letter-spacing: 2px; animation: starSpin .6s cubic-bezier(.2,1.6,.4,1); } .ck-win-time { font-size: clamp(21px, 6.4vw, 27px); font-weight: 900; color: #fff; } .ck-win-digital { font: 900 clamp(28px, 9vw, 38px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #ffd24c; letter-spacing: .04em; } .ck-win-level { font-size: 13px; font-weight: 900; color: #9df08a; } @media (max-height: 700px) { #ck-canvas { width: min(38vh, 52vw, 200px); height: min(38vh, 52vw, 200px); } .ck-teach { font-size: 11.5px; padding: 7px 11px; } .ck-help-btn { padding: 8px 6px; } } /* ── what she is building ─────────────────────────────────────── Five right words finishes one. The blocks grow left to right so the strip reads as progress even before the thing on the end appears. */ .sp-build { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 4px; } .sp-build-what { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .sp-build-what b { font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: rgba(201,189,240,.75); } .sp-build-what i { font-size: 11.5px; font-style: normal; color: #ffd24c; font-weight: 700; } .sp-build-count { margin-left: auto; font-size: 12px; font-weight: 900; color: rgba(201,189,240,.7); } /* ── the rocket ─────────────────────────────────────────────── One drawing, five pieces. A piece she has not earned yet is a faint outline, so she can see what the next right word will add. */ .rk { height: 44px; width: auto; overflow: visible; } .rk-part { opacity: .16; transition: opacity .35s ease; } .rk-part path, .rk-part circle { fill: rgba(255,255,255,.5); } .rk-part.is-on { opacity: 1; animation: rkPop .45s cubic-bezier(.2,1.7,.4,1); } @keyframes rkPop { from { transform: scale(.4); } to { transform: none; } } .rk-part.is-on[data-part="body"] path { fill: #f4f1ff; } .rk-part.is-on[data-part="fins"] path { fill: #e8542f; } .rk-part.is-on[data-part="glass"] circle { fill: #4fb3e8; } .rk-part.is-on[data-part="glass"] .rk-glint { fill: #bfe6ff; } .rk-part.is-on[data-part="nose"] path { fill: #e8542f; } .rk-part.is-on[data-part="engine"] path { fill: #6b5a86; } .rk-flame { fill: #ffd24c; transform-origin: 32px 90px; animation: rkFlame .12s steps(2) infinite alternate; } @keyframes rkFlame { from { transform: scaleY(.75) } to { transform: scaleY(1.15) } } .sp-stickers { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 300px; } .sp-sticker { font-size: 17px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); } /* the fifth word: the rocket is finished, and it goes */ .sp-win.is-checkpoint .sp-win-card { border-color: #ffd24c; } .sp-win-rocket { display: block; height: 92px; } .sp-win-rocket .rk { height: 92px; } .sp-win-build.is-launch .sp-win-rocket .rk { animation: rkLaunch 2.6s cubic-bezier(.5,0,.9,.4) .35s forwards; } @keyframes rkLaunch { 0% { transform: none; } 12% { transform: translateY(6px) scale(.97); } /* it settles, then goes */ 100% { transform: translateY(-115vh) scale(.7); } } /* balloons let go at the same moment, drifting up behind it */ .sp-balloons { position: absolute; left: 0; right: 0; bottom: 0; top: -60vh; pointer-events: none; } .sp-balloons i { position: absolute; bottom: -30px; left: calc(8% + var(--i) * 21%); font-size: 26px; font-style: normal; animation: balloonUp 3.4s ease-in calc(.3s + var(--i) * .18s) forwards; } @keyframes balloonUp { 0% { transform: translateY(0) rotate(-6deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-95vh) rotate(8deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sp-win-build.is-launch .sp-win-rocket .rk, .sp-balloons i, .rk-flame { animation: none; } } .sp-win-build { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); } .sp-win-build b { font-size: 17px; font-weight: 900; color: #ffd24c; } .sp-win-build i { font-size: 12.5px; font-style: normal; color: rgba(201,189,240,.85); } 70% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) rotate(0); } } /* ── quiz, or move the hands yourself ──────────────────────────── */ .ck-modes { display: flex; gap: 6px; width: 100%; max-width: 420px; } .ck-mode { appearance: none; cursor: pointer; font-family: inherit; flex: 1 1 0; padding: 9px 6px; font-size: 11.5px; font-weight: 900; letter-spacing: .03em; color: rgba(201,189,240,.85); border: 2px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.05); } .ck-mode.is-on { color: #17092f; border-color: transparent; background: linear-gradient(180deg, #a9dcff, #7ec8ff); } .ck-mode:active { transform: translateY(2px); } /* the clock fills the screen when she is the one moving it */ .screen--clock .ck-clockwrap { touch-action: none; } /* Hands-on mode has no answers to show, so the clock gets the room. */ .screen--clock.is-play #ck-canvas { width: min(56vh, 92vw, 400px); height: min(56vh, 92vw, 400px); } .screen--clock.is-play .ck-ask { font-size: clamp(15px, 4.2vw, 17px); opacity: .8; }