/* Mingli Games — shared shell. * * Design target: a five-year-old on an iPad. Everything tappable is at least * 56px, nothing depends on reading a sentence, and no interaction needs * precision dragging. Colour does the talking; text is a label at most. */ :root { --sunny: #ffb703; --orange: #fb8500; --sky: #219ebc; --sky-soft: #8ecae6; --mint: #06d6a0; --pink: #ef476f; --purple: #9b5de5; --cream: #fff8ec; --ink: #2b2118; --ink-soft: #6b5a49; --card: #ffffff; --shadow: 0 6px 0 rgba(43, 33, 24, 0.18); --shadow-lift: 0 10px 0 rgba(43, 33, 24, 0.18); --radius: 22px; --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito", "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; font-family: var(--font); color: var(--ink); background: linear-gradient(180deg, #bfe8ff 0%, #ffe6bd 100%); -webkit-user-select: none; user-select: none; touch-action: manipulation; } /* A game page is a fixed full-screen stage, so nothing should scroll. * * This must NOT be set on : `overflow: hidden` there stops the viewport * scrolling for the user while still allowing scripted scrollTop, so a page * that cannot be scrolled by finger or wheel still looks scrollable to a test * that just sets scrollTop. That is exactly how the hub shipped unscrollable. */ body { overflow: hidden; } /* The hub is an ordinary document — let the viewport scroll it. */ body.scrollable { overflow: visible; height: auto; min-height: 100%; } canvas.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } /* ---------------------------------------------------------------- buttons */ .btn { appearance: none; border: none; font-family: var(--font); font-weight: 800; font-size: 22px; color: var(--ink); background: var(--card); border-radius: 18px; min-height: 56px; min-width: 56px; padding: 0 18px; box-shadow: var(--shadow); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease; } .btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(43, 33, 24, 0.18); } .btn[disabled] { filter: grayscale(0.7) opacity(0.5); pointer-events: none; } .btn.round { border-radius: 50%; padding: 0; width: 60px; height: 60px; font-size: 26px; } .btn.big { font-size: 28px; min-height: 68px; padding: 0 28px; } .btn.go { background: var(--mint); color: #04352a; } .btn.stop { background: var(--pink); color: #fff; } .btn.sun { background: var(--sunny); } .btn.ghost { background: rgba(255, 255, 255, 0.75); } /* ------------------------------------------------------------------- hud */ .hud { position: fixed; inset: 0; pointer-events: none; display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top)) 12px 12px; overflow: hidden; } .hud > * { pointer-events: auto; } .topbar { display: flex; align-items: center; gap: 10px; } .topbar .spacer { flex: 1; pointer-events: none; } .level-pill { background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 10px 20px; font-weight: 900; font-size: 20px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; gap: 10px; /* "9 / 50" and "15 / 50" have to be the same shape, or the bar twitches * every time a level is won. */ font-variant-numeric: tabular-nums; } /* In the top bar the pill sits in a row of round buttons, so it has to be * their height. Two thirds of one looked like it had come loose. */ /* The zoom column is mostly gaps. `.hud > *` turns the whole strip into a tap * catcher, so anything in the scene underneath it — a camouflaged animal, a * hop stone at the right-hand end of a number line — is unreachable. Only the * three buttons should take a tap. */ .zoombar { pointer-events: none; } .zoombar > * { pointer-events: auto; } .topbar .level-pill { height: 60px; /* "1 / 50" stacking into three lines when the bar gets crowded looked like a * broken layout rather than a tight one. */ white-space: nowrap; flex: 0 0 auto; } .goal-chip { align-self: center; margin-top: 10px; background: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 10px 22px; font-size: 22px; font-weight: 800; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; max-width: min(92vw, 620px); text-align: center; } .bottombar { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: center; padding-bottom: max(6px, env(safe-area-inset-bottom)); /* Last line of defence on a short screen — a control the child cannot * reach is worse than one they have to scroll to. */ max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; } .bottombar::-webkit-scrollbar { display: none; } /* Landscape on a phone: very little height, so everything tightens up. */ @media (max-height: 520px) { .hud { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; } .bottombar { gap: 6px; } .btn.big { min-height: 50px; font-size: 21px; padding: 0 20px; } .btn.round { width: 46px; height: 46px; font-size: 20px; } .btn { min-height: 46px; } .topbar .level-pill { height: 46px; padding: 0 14px; font-size: 17px; } } /* Zoom, down the right-hand edge. * * Vertically centred rather than tucked above the controls: the control bar * changes height from game to game and a button that moves is a button that has * to be found again. Nothing important is ever drawn out here — the board is * framed to the middle. */ .zoombar { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; } @media (max-height: 520px) { .zoombar { gap: 5px; right: 8px; } } /* A horizontal tray of controls. Every game has one. */ .run-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; } /* ---------------------------------------------------------------- panels */ .veil { position: fixed; inset: 0; background: rgba(30, 22, 15, 0.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; animation: fade 0.2s ease; } @keyframes fade { from { opacity: 0; } } .panel { background: var(--cream); border-radius: 32px; padding: 28px 26px; text-align: center; box-shadow: 0 18px 0 rgba(43, 33, 24, 0.25); max-width: 460px; width: 100%; animation: pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); } @keyframes pop { from { transform: scale(0.7); opacity: 0; } } .panel h2 { margin: 0 0 6px; font-size: 34px; } .panel p { margin: 0 0 16px; font-size: 20px; color: var(--ink-soft); font-weight: 700; } .stars, .big-icon { font-size: 46px; letter-spacing: 6px; margin: 6px 0 18px; min-height: 56px; } .big-icon { letter-spacing: 0; } .star-pop { display: inline-block; animation: starIn 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; } @keyframes starIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } } .panel-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* A question for the grown-up sitting alongside, not an instruction for the * child. Quiet on purpose: it must never look like the next thing to do. */ .talk-prompt { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px auto 16px !important; padding: 9px 16px; max-width: 92%; border-radius: 18px; background: rgba(33, 158, 188, 0.12); color: var(--ink-soft); font-size: 17px !important; font-weight: 700; font-style: italic; line-height: 1.3; } .talk-prompt svg { flex: none; color: var(--sky); } /* ------------------------------------------------------------------ rules */ .panel-rules { text-align: left; max-height: calc(100dvh - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .panel-rules h2 { text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 30px; } .rules-head { margin: 18px 0 8px; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); } .rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .rules li { position: relative; padding: 10px 14px 10px 40px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); font-size: 18px; font-weight: 700; line-height: 1.35; } .rules li::before { content: ""; position: absolute; left: 15px; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: var(--mint); } .rules.house li::before { background: var(--sky); } .panel-rules .panel-row { margin-top: 20px; } /* ------------------------------------------------------------------ toast */ /* Toasts sit just above the controls, not over the middle of the board. A * message that covers the puzzle it is talking about is worse than no message. * `--ui-bottom` is the height of the control bar, set by the game host. */ .toast { position: fixed; left: 50%; bottom: calc(var(--ui-bottom, 90px) + 14px); transform: translateX(-50%); background: rgba(255, 255, 255, 0.96); border-radius: 22px; padding: 16px 26px; font-size: 24px; font-weight: 900; box-shadow: var(--shadow); z-index: 60; animation: pop 0.25s cubic-bezier(0.2, 1.4, 0.4, 1); max-width: 88vw; text-align: center; } /* A toast is a message, never a target. * * Every game up to now took its input from buttons in the bar *below* the * toast, so a message sitting over the board was only ever in the way visually. * Another Like This is played with a finger on the clay, and on a phone the * toast covers the bottom half of the pot — including the hint toast, which * appears at exactly the moment a child is first reaching for it. Two seconds of * "the clay is ignoring me" is the whole first impression. */ .toast { pointer-events: none; } .toast.leaving { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; transform: translateX(-50%) translateY(14px); } /* ------------------------------------------------------------ level select */ .sheet { position: fixed; inset: 0; background: linear-gradient( 180deg, var(--page-top, #bfe8ff), var(--page-bottom, #ffe6bd) ); z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: max(14px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)); } .sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; max-width: 640px; margin-inline: auto; } .sheet-head h1 { font-size: clamp(19px, 5.5vw, 28px); margin: 0; white-space: nowrap; } .sheet-head .level-pill { white-space: nowrap; font-size: 17px; padding: 8px 14px; } .world { margin: 0 auto 16px; max-width: 640px; background: rgba(255, 255, 255, 0.5); border-radius: 26px; padding: 14px 14px 16px; border-left: 8px solid var(--world-tint, var(--sunny)); box-shadow: 0 4px 0 rgba(43, 33, 24, 0.08); } /* One tint per world, matching the 3D theme that world plays in. */ .world.theme-0 { --world-tint: #7bd389; } .world.theme-1 { --world-tint: #fb8500; } .world.theme-2 { --world-tint: #8ecae6; } .world.theme-3 { --world-tint: #2f9e44; } .world.theme-4 { --world-tint: #ef476f; } .world.theme-5 { --world-tint: #5a6bab; } .world.theme-6 { --world-tint: #e8825f; } .world.theme-7 { --world-tint: #2a8a7a; } .world.sealed { opacity: 0.62; } .world h3 { font-size: 21px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; } .world-count { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--ink-soft); } .world .blurb { font-size: 16px; color: var(--ink-soft); font-weight: 700; margin: 0 0 10px; } .world-bar { height: 8px; border-radius: 99px; background: rgba(43, 33, 24, 0.12); overflow: hidden; margin: 0 0 12px; } .world-bar i { display: block; height: 100%; border-radius: 99px; background: var(--world-tint); transition: width 0.4s ease; } .lvl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; } .lvl { aspect-ratio: 1; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); border: none; font-family: var(--font); font-weight: 900; font-size: 30px; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: transform 0.08s ease; } .lvl:active { transform: translateY(5px); } .lvl .mini-stars { font-size: 13px; letter-spacing: 1px; height: 15px; } .lvl.locked { background: rgba(255, 255, 255, 0.45); color: rgba(43, 33, 24, 0.3); box-shadow: none; pointer-events: none; } .lvl.done { background: var(--sunny); } /* ------------------------------------------------------------------- misc */ /* -------------------------------------------------------------- confetti */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; } .confetti i { position: absolute; top: -6vh; border-radius: 2px; animation-name: fall; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes fall { to { transform: translateY(112vh) rotate(760deg); opacity: 0.15; } } @media (prefers-reduced-motion: reduce) { .confetti { display: none; } } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 480px) { .btn { font-size: 19px; min-height: 52px; padding: 0 14px; } .btn.round { width: 54px; height: 54px; font-size: 23px; } .topbar .level-pill { height: 54px; padding: 0 15px; font-size: 18px; } .goal-chip { font-size: 18px; padding: 8px 16px; } .panel h2 { font-size: 28px; } } /* The narrow phones, where the top bar runs out of room. * * The bar is home · level · help · restart · sound with a spacer between, and * at 360 px it needs about 385 — so the tail hung off the right and `.hud`'s * `overflow: hidden` cropped it. The mute button was 58% visible on every game * on the site; Robot Mountain, which had a sixth control, lost it altogether. * * The room is bought from the gaps and the level pill's side padding, never * from the buttons. A control that has slid off the screen and a control that * is too small to hit are the same bug to a four-year-old, so shrinking the * round buttons to make them fit would just trade one for the other — they stay * 54 px here, as they are on every phone. * * 390 px and up is deliberately untouched: it was measured correct, and the * cheapest way to break a layout is to restyle the case that already worked. */ @media (max-width: 385px) { .topbar { gap: 5px; } .topbar .level-pill { padding: 0 7px; } } /* The narrowest phone anybody still holds, where even that is not enough: four * 56 px buttons and the pill come to more than the width. The last of the room * comes out of the pill's type, because "12/50" stays legible a size down and a * button that has slid off the screen does not. */ @media (max-width: 340px) { .hud { padding-left: 6px; padding-right: 6px; } .topbar { gap: 3px; } .topbar .level-pill { padding: 0 5px; font-size: 15px; gap: 5px; } } /* --------------------------------------------------------------- icons */ /* Icons inherit the button's colour, so a button only ever needs one colour * set on it. They must not shrink when a label sits next to them. */ .btn svg, .lvl svg, .level-pill svg, .world h3 svg, .panel h2 svg, .silo-tag svg { flex: none; display: block; } .btn { gap: 9px; } .btn.round svg { margin: 0; } .tiny { width: 38px !important; height: 38px !important; min-width: 38px; min-height: 38px; } .tiny svg { width: 19px; height: 19px; } .stars { display: flex; justify-content: center; align-items: center; gap: 6px; letter-spacing: 0; } .star-pop.won { color: var(--sunny); } .star-pop.missed { color: rgba(43, 33, 24, 0.22); } .big-icon { display: flex; justify-content: center; color: var(--orange); } .mini-stars { display: flex; gap: 2px; justify-content: center; color: var(--sunny); height: 15px; } .lvl.done .mini-stars { color: #8a5a00; } .lvl.locked svg { color: rgba(43, 33, 24, 0.3); } .level-pill, .world h3, .panel h2, .sheet-head h1 { display: flex; align-items: center; gap: 8px; } .level-pill svg { color: var(--sunny); } .world h3 svg { color: var(--world-tint, var(--orange)); } .world-count { margin-left: auto; display: flex; align-items: center; gap: 4px; } .world-count svg { color: var(--sunny); } /* --------------------------------------------------------- people & settings */ .avatar, .swatch { border-radius: 50%; background: var(--tint, var(--sky)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; border: none; box-shadow: 0 3px 0 rgba(43, 33, 24, 0.2); } .swatches { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 6px 0 16px; } .swatch { width: 54px; height: 54px; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; outline: 4px solid transparent; } .swatches.small .swatch { width: 40px; height: 40px; } .swatch.on { outline-color: var(--ink); transform: translateY(-3px); } .swatch:active { transform: translateY(2px); } .name-input { display: block; width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 21px; font-weight: 800; color: var(--ink); text-align: center; padding: 12px 14px; border-radius: 16px; border: 3px solid rgba(43, 33, 24, 0.14); background: #fff; margin: 0 0 14px; } .name-input:focus { outline: none; border-color: var(--mint); } .settings-head { font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 18px 0 8px; text-align: left; } .people { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .person-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); border: 3px solid transparent; cursor: pointer; } .person-row.on { border-color: var(--mint); background: #fff; } .person-name { font-weight: 900; font-size: 19px; text-align: left; flex: 1; } .panel-settings, .panel-who { max-width: 420px; text-align: center; max-height: 86vh; overflow-y: auto; } .fine-print { font-size: 14px !important; line-height: 1.4; color: var(--ink-soft); margin-top: 16px !important; }