/* shell.css - Poki-style "windowed game" shell (OPT-IN per game). * * A game opts in by linking this stylesheet (after game-info.css) and loading * /shell.js at the end of . shell.js stamps html.shell, so every rule * here is gated on that class and the file is inert if the script doesn't run * (or when the page is embedded in an iframe). * * DESKTOP (wide viewport + fine pointer): the #hero game box is no longer * full-bleed - it becomes a centered rounded stage sitting inside one uniform * grid of the other games' icons that wraps it on the left, right and along * the bottom. The content article still flows below. * * MOBILE: unchanged full-screen play. The back button shows an "exit screen" * (html.shell-exited, via MochiShell.onBack()): the game shrinks into a card * behind a Continue overlay, with a home/title header above and a tile grid * of other games below - a second chance to keep playing or hop to another * game instead of bouncing straight to the homepage. */ /* The canvas always fills the hero minus the in-flow title bar + ad strip. When #hero is full-viewport this equals game-info.css's 100dvh rule, and when the shell shrinks #hero (desktop stage / mobile exit card) the canvas follows the box - games measure clientWidth/Height, so they just adapt. */ html.shell #hero #game { height: calc(100% - var(--ad-h) - var(--bar-h, 46px)); } /* Shell chrome is hidden until its mode is active. */ .shell-surround, .shell-head, .shell-exit-grid, .shell-continue { display: none; } /* ---------------- mobile exit screen (html.shell-exited) ---------------- */ html.shell-exited { background: radial-gradient(120% 60% at 50% -10%, oklch(93% 0.045 195), transparent 70%), oklch(86% 0.07 195); } html.shell-exited #hero { height: 56vh; height: 56dvh; width: auto; margin: 12px 14px 0; border-radius: 22px; box-shadow: 0 18px 44px oklch(35% 0.06 200 / 0.35); } /* home + title header above the game card */ html.shell-exited .shell-head { display: flex; gap: 10px; margin: 14px 14px 0; } .shell-head { font-family: var(--gi-body, system-ui, sans-serif); } .shell-head .shell-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 62px; border-radius: 18px; background: #fff; text-decoration: none; box-shadow: 0 8px 22px oklch(35% 0.06 200 / 0.22); } .shell-head .shell-logo img { width: 34px; height: 34px; display: block; } .shell-head .shell-title { flex: 1; min-width: 0; padding: 10px 16px; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px oklch(35% 0.06 200 / 0.22); } .shell-head .shell-title b { display: block; font-family: var(--gi-display, system-ui, sans-serif); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--ink, #4a2b3e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shell-head .shell-title span { font-size: 13px; font-weight: 600; color: var(--ink-soft, #8a6a7d); } /* dim + big play "Continue" overlay covering the paused game card */ html.shell #hero .shell-continue { position: absolute; inset: 0; z-index: 80; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; border: none; padding: 0; cursor: pointer; border-radius: inherit; background: oklch(30% 0.05 200 / 0.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); font-family: var(--gi-body, system-ui, sans-serif); } html.shell-exited #hero .shell-continue { display: flex; } .shell-continue .shell-play { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .shell-continue .shell-play svg { width: 36px; height: 36px; margin-left: 5px; fill: #4ec0ca; } .shell-continue span { font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); letter-spacing: 0.02em; } .shell-continue:active .shell-play { transform: scale(0.94); } /* tile grid of other games under the paused card */ html.shell-exited .shell-exit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 16px 14px 22px; } .shell-exit-grid a { display: block; line-height: 0; transition: transform 0.12s ease; } .shell-exit-grid a:active { transform: scale(0.93); } .shell-exit-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; box-shadow: 0 8px 22px oklch(35% 0.06 200 / 0.28); background: rgba(255, 255, 255, 0.5); } /* ---------------- desktop windowed stage + surround grid ----------------- */ @media (min-width: 1100px) and (pointer: fine) { html.shell { /* fallback stage size; shell.js quantizes --stage-w/h to the icon lattice (96px cell + 14px gap) so the floating stage lines up with the surround grid built below. */ --stage-w: min(1100px, calc(100vw - 276px)); --stage-h: min(calc(100vh - 46px), 800px); background: radial-gradient(1100px 520px at 12% -8%, oklch(95% 0.035 195), transparent 62%), radial-gradient(900px 600px at 105% 2%, oklch(93% 0.045 340 / 0.55), transparent 58%), oklch(87% 0.062 195); } /* padding-top (not a collapsing margin on #hero) gives the stage AND the absolutely-positioned surround one stable shared origin at y=23 */ html.shell body { position: relative; background: transparent; padding-top: 23px; } html.shell #hero { position: relative; z-index: 1; width: var(--stage-w); height: var(--stage-h); margin: 0 auto 30px; border-radius: 18px; box-shadow: 0 26px 64px oklch(35% 0.06 200 / 0.35); } /* ONE uniform grid of game icons wrapping the stage on the left, right and along the bottom - so the surround reads as a single lattice, not three separate rails. shell.js sets the column/row counts and places an invisible .shell-hole the exact size + position of the floating stage; the stage sits on top (z-index 1) covering that hole. Every gap is the same 14px, so the side columns and the bottom row line up cleanly at the corners. */ html.shell .shell-surround { /* top:23 matches body's padding-top so the grid's first row lines up with the stage's top edge. No overflow clip - shell.js places exactly enough tiles to fill the cells, so nothing spills, and clipping would only cut off the icons' drop-shadows (notably the bottom row's). */ position: absolute; top: 23px; left: 0; right: 0; z-index: 0; display: grid; gap: 14px; grid-auto-rows: 96px; justify-content: center; align-content: start; } html.shell .shell-surround .shell-hole { visibility: hidden; } .shell-surround a { display: block; line-height: 0; transition: transform 0.13s ease; } .shell-surround a:hover { transform: scale(1.07); } .shell-surround a:active { transform: scale(0.95); } .shell-surround img { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; box-shadow: 0 8px 22px oklch(35% 0.06 200 / 0.3); background: rgba(255, 255, 255, 0.5); } }