/** * Platform chrome: page shell, loading state and the shared completion reveal. * * State is driven by `data-pd-state` and `data-pd-phase` on , written * only by platform/shell.js. Games never set these; they call * `context.ready()` and `context.setPhase()`. */ body.pd-game { display: flex; flex-direction: column; align-items: stretch; background: transparent; } .pd-game-root { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 280px; background: transparent; } /* Welcome / loading: keep shells clear so the fixed html wash shows. */ html:has(body.pd-game.pd-welcome), html:has(body.pd-game[data-pd-state="loading"]), html:has(body.pd-game:not(.pd-content-ready)), body.pd-game.pd-welcome, body.pd-game[data-pd-state="loading"], body.pd-game:not(.pd-content-ready) { background: transparent !important; } /* Clear game shell fills so the hub wash shows through on start screens. */ body.pd-game.pd-welcome .pd-game-root, body.pd-game.pd-welcome .pd-game-root > *, body.pd-game.pd-welcome .content, body.pd-game.pd-welcome .game-shell, body.pd-game.pd-welcome .hl-content, body.pd-game.pd-welcome .hls-content, body.pd-game.pd-welcome .hsf-content, body.pd-game.pd-welcome .game-sunflowers, body.pd-game.pd-welcome .game-sunflowers .content, body.pd-game.pd-welcome .pd-welcome-screen { background: transparent !important; } .pd-game-root > * { width: 100%; max-width: 100%; } body.pd-game .content, body.pd-game .hl-content { margin-left: auto; margin-right: auto; } /* Completion: unlock document scroll and let the shell grow with results. Do not force min-height:0 on every child — that breaks games like The Middle that size their content with min-height. */ html.pd-done, body.pd-done, html:has(body.pd-game:has(.is-done)), body.pd-game:has(.is-done) { height: auto !important; max-height: none !important; min-height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; /* Beat leftover modal touch-action:none if a class races on close. */ touch-action: manipulation !important; } body.pd-done .pd-game-root, body.pd-game:has(.is-done) .pd-game-root { flex: none !important; min-height: auto !important; height: auto !important; overflow: visible !important; width: 100%; } body.pd-done .pd-play-area, body.pd-done .content, body.pd-done .game-shell, body.pd-done .container, body.pd-done .hl-content, body.pd-done .hl-shell, body.pd-done .hls-content, body.pd-done .hls-shell, body.pd-done .hx-content, body.pd-done .hx-shell, body.pd-game:has(.is-done) .pd-play-area, body.pd-game:has(.is-done) .content, body.pd-game:has(.is-done) .game-shell, body.pd-game:has(.is-done) .container, body.pd-game:has(.is-done) .hl-content, body.pd-game:has(.is-done) .hl-shell, body.pd-game:has(.is-done) .hls-content, body.pd-game:has(.is-done) .hls-shell, body.pd-game:has(.is-done) .hx-content, body.pd-game:has(.is-done) .hx-shell { flex: none !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* --- Loading ------------------------------------------------------------ */ /* Hold the game under the chrome until saved progress is restored, then slide it up. Opacity/transform (not display) so layout is reserved — no jump. */ body[data-pd-state="loading"] .pd-game-root > * { opacity: 0; transform: translateY(22px); pointer-events: none; } body[data-pd-state="ready"] .pd-game-root > * { animation: pd-game-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Content is held via opacity until ready(); no shared page spinner. */ @keyframes pd-game-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body[data-pd-state="loading"] .pd-game-root > * { opacity: 0; transform: none; } body[data-pd-state="ready"] .pd-game-root > * { animation: none; opacity: 1; } } /* --- Completion reveal -------------------------------------------------- */ /* Shared across every game: completion lines rise together when `.is-shown`. Games opt in by marking children `.pd-c-line`. */ .pd-complete .pd-c-line { opacity: 0; } .pd-complete.is-shown .pd-c-line { animation: pd-rise-in 0.5s var(--pd-ease-rise) both; animation-delay: 0s; } @keyframes pd-rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pd-complete.is-shown .pd-c-line { animation: none; opacity: 1; } } /* --- Rotate gate -------------------------------------------------------- */ .pd-rotate-gate { display: none; } /* Short landscape viewports only — never tablets in landscape. */ @media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { .pd-rotate-gate { position: fixed; inset: 0; z-index: var(--pd-z-rotate); display: grid; place-items: center; padding: var(--pd-spacing-5); background: var(--pd-colour-background); text-align: center; } } .pd-rotate-icon { width: 64px; height: 64px; color: var(--pd-colour-text); } .pd-rotate-title { margin: var(--pd-spacing-4) 0 var(--pd-spacing-2); font-family: var(--pd-font-heading); font-weight: var(--pd-weight-black); font-size: 1.25rem; } .pd-rotate-body { margin: 0; color: var(--pd-colour-muted); } /* --- Shared game welcome / home screen ---------------------------------- */ /* Nested / doubled selectors beat each game's `.game-* * { margin/padding: 0 }` reset. */ .pd-welcome-screen.pd-welcome-screen { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px; width: 100%; max-width: 440px; margin: 0 auto; padding: 24px 22px; box-sizing: border-box; text-align: center; } .pd-welcome-screen.pd-welcome-screen.is-active, .pd-welcome-screen.pd-welcome-screen.active { display: flex; } /* Welcome: fill the space under the top bar; allow scroll on short iOS viewports so Play / Choose puzzle never get clipped by the home indicator or Safari bar. */ html:has(body.pd-game.pd-welcome), body.pd-game.pd-welcome { min-height: 100dvh !important; height: auto !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; } body.pd-game.pd-welcome { display: flex; flex-direction: column; } body.pd-game.pd-welcome .pd-game-root, body.pd-game.pd-welcome .pd-game-root .content, body.pd-game.pd-welcome .pd-game-root .game-shell, body.pd-game.pd-welcome .pd-game-root .hl-content { flex: 1 1 auto; min-height: 0 !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: column; align-items: center; overflow: visible !important; } body.pd-game.pd-welcome .pd-game-root { width: 100%; } body.pd-game.pd-welcome .pd-welcome-screen.pd-welcome-screen, body.pd-game.pd-welcome .pd-welcome-screen.pd-welcome-screen.is-active, body.pd-game.pd-welcome .pd-welcome-screen.pd-welcome-screen.active, body.pd-game.pd-welcome .is-welcome .pd-welcome-screen { display: flex !important; flex: 1 1 auto; width: 100%; max-width: 440px; min-height: min(100dvh - var(--pd-chrome-height, 58px), 720px); justify-content: center !important; padding-top: 12px !important; padding-bottom: max(32px, calc(24px + env(safe-area-inset-bottom, 0px))) !important; overflow: visible !important; box-sizing: border-box; } /* Play: vertically center game content under chrome (not welcome / not complete). `.pd-done` / `.is-done` must win so completion can scroll like main games. */ html:has(body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done))), body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) { height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) { display: flex; flex-direction: column; } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .content, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .game-shell, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .hl-content, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .hl-shell, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .hls-content, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .hls-shell, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .hx-content, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root .hx-shell { flex: 1 1 auto; min-height: 0 !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: column; align-items: center; overflow: hidden !important; } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-game-root { width: 100%; } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-play-area, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-screen.screen.active, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .hl-play, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .hls-play, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .hx-play { flex: 1 1 auto; width: 100%; min-height: 0 !important; display: flex !important; flex-direction: column; justify-content: safe center !important; align-items: center; /* Extra bottom padding nudges the optical center ~50px up */ padding-top: 0; padding-bottom: 100px; box-sizing: border-box; overflow: auto !important; -webkit-overflow-scrolling: touch; } /* Let the play block size to its content so centering is visible. Sunflowers keeps a stretch chain so fitBoard can measure height. */ body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-play-area > .container, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-play-area > .hl-play, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-play-area > .hls-play, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .pd-play-area > .hx-play, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-zanagrams:not(.is-home) .game-shell > .subtitle, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-zanagrams:not(.is-home) .game-shell > .board-slot { flex: 0 1 auto !important; height: auto !important; max-height: 100%; min-height: 0; width: 100%; } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-zanagrams:not(.is-home) .game-shell { justify-content: safe center !important; padding-top: 0; padding-bottom: 100px; box-sizing: border-box; } /* The Middle: top-align so the mobile keyboard doesn't shove the board */ body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-themiddle .pd-play-area { justify-content: flex-start !important; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; padding-top: 8px !important; } /* 18 Words: center squares + timer + word + letters as one stack */ body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-18words .game-shell { justify-content: safe center !important; padding-top: 0 !important; padding-bottom: 100px; box-sizing: border-box; } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-18words .game-screen.screen.active { flex: 0 1 auto !important; justify-content: flex-start !important; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-18words .w18-grid-slot { flex: 0 0 auto; } /* Sunflowers: center the garden like other games (~50px optical nudge via pd-play-area padding-bottom). Keep the board stack content-sized so justify-content can actually center it; fitBoard measures .pd-play-area. */ body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-sunflowers .pd-play-area { justify-content: safe center !important; } body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-sunflowers .game-area, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-sunflowers .play, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-sunflowers .board-slot, body.pd-game:not(.pd-welcome):not(.pd-done):not(:has(.is-done)) .game-sunflowers .board-wrap { flex: 0 1 auto !important; height: auto !important; max-height: 100%; min-height: 0; justify-content: flex-start !important; } .pd-welcome-screen .pd-welcome-icon { display: block; width: clamp(88px, 22vw, 120px); height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; } .pd-welcome-screen .pd-welcome-icon[hidden] { display: none !important; } .pd-welcome-screen .pd-welcome-title { margin: 0; padding: 0; font-family: "Baloo 2", system-ui, sans-serif; font-size: clamp(30px, 9vw, 40px); font-weight: 800; letter-spacing: 0.5px; line-height: 1.1; color: var(--pd-colour-heading, #161613); } .pd-welcome-screen .pd-welcome-copy { margin: 0; padding: 0; max-width: 18em; font-family: var(--pd-font-ui); font-size: clamp(20px, 5.5vw, 24px); font-weight: 500; letter-spacing: 0.3px; line-height: 1.45; color: var(--pd-colour-heading, #161613); } .pd-welcome-screen .pd-welcome-meta { display: none; } .pd-welcome-screen .pd-welcome-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(280px, 100%); } /* Beat per-game `.btn { font-family: Baloo }` rules on start screens. */ .pd-welcome-screen .pd-welcome-play, button.pd-welcome-play, .pd-welcome-screen .pd-welcome-archive, button.pd-welcome-archive { font-family: var(--pd-font-ui) !important; } .pd-welcome-screen .pd-welcome-play, .pd-welcome-screen .pd-welcome-archive { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100% !important; max-width: none; margin: 0 !important; border-radius: 999px; font-family: var(--pd-font-ui) !important; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; } .pd-welcome-screen .pd-welcome-play { padding: 15px 28px; border: 0; background: var(--pd-colour-heading, #161613); color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 8px 20px rgba(22, 22, 19, 0.22); transition: background 0.15s ease; } .pd-welcome-screen .pd-welcome-play:hover { background: #2b2b2b; } .pd-welcome-screen .pd-welcome-play:active { transform: scale(0.98); } .pd-welcome-screen .pd-welcome-archive { padding: 13px 28px; border: 2px solid var(--pd-colour-heading, #161613); background: transparent; color: var(--pd-colour-heading, #161613); font-size: 17px; font-weight: 700; transition: background 0.15s ease, color 0.15s ease; } .pd-welcome-screen .pd-welcome-archive .pd-welcome-archive-icon { display: block; width: 1.15em; height: 1.15em; flex: 0 0 auto; } .pd-welcome-screen .pd-welcome-archive .pd-welcome-archive-icon svg { display: block; width: 100%; height: 100%; } .pd-welcome-screen .pd-welcome-archive[hidden] { display: none !important; } .pd-welcome-screen .pd-welcome-archive:hover { background: color-mix(in srgb, var(--pd-colour-heading, #161613) 8%, transparent); } .pd-welcome-screen .pd-welcome-archive:active { transform: scale(0.98); } html[data-theme="dark"] .pd-welcome-screen .pd-welcome-play { background: #2a2a26; color: var(--pd-colour-heading, #f5f4ed); border: 1.5px solid color-mix(in srgb, var(--pd-colour-heading, #f5f4ed) 28%, transparent); box-shadow: none; } html[data-theme="dark"] .pd-welcome-screen .pd-welcome-play:hover { background: #343430; } html[data-theme="dark"] .pd-welcome-screen .pd-welcome-archive { border-color: color-mix(in srgb, var(--pd-colour-heading, #f5f4ed) 45%, transparent); color: var(--pd-colour-heading, #f5f4ed); } html[data-theme="dark"] .pd-welcome-screen .pd-welcome-archive:hover { background: color-mix(in srgb, var(--pd-colour-heading, #f5f4ed) 10%, transparent); } /* While welcome is showing, hide the play surface under it */ .is-welcome .pd-play-area { display: none !important; } .is-welcome .pd-welcome-screen { display: flex; }