/* ============================================================ GameRoch — production adaptations (P01, revised in cycle 2) ============================================================ This file is NOT approved design. It supplements css/base.css and css/model.css with rules for real product components those two do not cover at all, because the approved model was an inline widget inside someone else's page: it had no page canvas, no in-page game player, no offline banner, no loading skeletons and no toast. Loaded AFTER model.css, and every rule here is scoped either outside the product root or to an element the approved design does not contain. It must not override an approved colour, size, position or hierarchy. Cycle-2 audit: this file was the home of two high-severity visual defects, so every rule was re-examined and anything that fought the approved CSS rather than supplementing it was deleted. What was removed, and why, is recorded at the bottom of this file and in build/UI_BUILDER_REPORT.md §11. ============================================================ */ /* ---------- Page canvas (outside the product root) ---------- The approved #gr-complete is background:transparent, because the model was embedded in a page that already had a colour. A real site has to paint its own canvas or the adult theme frames a dark app in white, and the pre-paint theme script would have nothing to colour. Strictly outside .gr-app; the QA harness neutralises it on both sides (normalization N4). */ html { background: #f3f6fb; } html[data-theme="kids"] { background: #fff8ee; } html[data-theme="adult"] { background: #111b26; } /* ---------- Page box ---------- margin:0 because the UA's 8px body margin would inset the product root and make .gr-app 16px narrower than the approved max-width allows. padding:0 stated explicitly: the public app deliberately has NO page gutter, so .gr-app reaches its approved width at every viewport (viewport width up to max-width:1600px, then centred). qa/README.md L11 puts the export wrapper's 16px page padding in the candidate QA wrapper, not here. background:transparent so the html canvas above shows through. */ body { margin: 0; padding: 0; background: transparent; } /* ---------- Bold weight (P01 cycle 3, owner decision OD2) ---------- The approved stylesheets declare no font-weight for b, strong or th at all, so a browser renders them at the UA default 700. The rendered fragment the owner approved does not: the review export's wrapper declares `b, strong, th { font-weight: var(--font-weight-medium) }` with --font-weight-medium: 500, and every in the approved picture is therefore 500. This is decided the opposite way to the icon-size conflict, deliberately. There, the approved PRODUCT source states 18px twice (base.css and initIcons()), so the wrapper's 16px !important was overriding something approved and QA restored 18px on both sides. Here the approved stylesheets are SILENT, so the only record of what was approved is the rendered fragment - and DESIGN_FREEZE asks for the product design byte-derived from the source, which for a value the stylesheets never state means the fragment's computed value. Shipping 700 would make every bold run in the product heavier than the design that was signed off. Measured cost of not doing this (QA diagnostic, both sides forced to 700): guest desktop meaningful diff 0.4253% -> 0.2021%, guest mobile 0.8205% -> 0.5001%, home desktop 0.7161% -> 0.6823%, home mobile 1.0899% -> 1.0218%. Scoped under #gr-complete and deliberately at the lowest useful specificity, so every approved rule that does state a weight for a bare b/strong/th still wins: .gr-brand strong (700), .gr-stat strong (700), .br-review>strong (700), .dw-game strong (600), .model-runtime-header b (600), .model-rank>strong (600). That is exactly how the export's own rule behaves in the same cascade. QA confirmed it empirically in cycle 3: seven matched b/strong/th compared element by element on both sides, zero weight mismatches, and the 700s - including the .gr-brand wordmark - not flattened. P02, PLEASE READ BEFORE PORTING THE REMAINING SCREENS. The approved stylesheets DO state a weight at (1,0,1)/(1,0,0) for #gr-complete itself and for button / input / select / textarea / h1 / h2 / h3 - 14 of the 63 weight-stating approved selectors. None of those can match a bare b/strong/th, so this rule is safe as things stand. But it means a nested inside an approved heading computes 500 here where the heading itself is heavier. No P01 surface has one; if a screen you port does, check it against the rendered fragment and, if the reference shows the heading's weight, add an approved-specificity rule for that case rather than weakening this one. This is a product change, not a QA normalization, and it is reversible by deleting this one rule. Flagged to the owner as OD2. */ #gr-complete b, #gr-complete strong, #gr-complete th { font-weight: 500; } /* ---------- Loading states (truthful, never faked) ---------- */ #gr-complete .gr-skel { background: var(--gr-tint); border-radius: var(--gr-radius); animation: gr-pulse 1.4s ease-in-out infinite; } #gr-complete[data-motion="off"] .gr-skel { animation: none; } @media (prefers-reduced-motion: reduce) { #gr-complete .gr-skel { animation: none; } } @keyframes gr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } #gr-complete .gr-skel-card { aspect-ratio: 1 / 1; } #gr-complete .gr-skel-line { height: 12px; margin-top: 8px; border-radius: 6px; } /* ---------- Game player overlay ---------- New surface: the approved model had no real player — its runtime was the simulated 4x4 grid DEMO_TO_PRODUCTION forbids shipping. display:none until it is opened, so it never occupies space in the shell. Styled from approved tokens only. */ #gr-complete .gr-gameplayer { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; background: var(--gr-bg); } #gr-complete .gr-gameplayer[data-open="true"] { display: flex; } /* ---------- P05 / GR-B1-13: the reserved status region ---------- The defect this replaces was a layout OWNERSHIP defect, not a paint order one. The status region was #gr-complete .gr-gp-status { position:absolute; inset:auto 0 0 0; } so it was out of flow, nothing subtracted its height from the rectangle handed to the runtime, and it painted over whatever the game had drawn at the bottom of its viewport — for a quiz, the lower answer row. docs/RUNTIME_SCREENSHOT_FINDING.md forbids the cosmetic repairs: no blanket bottom padding, no global text shrink, no overflow:hidden, no z-index shuffle, and the save reporting is not removed. So the region is moved into the host chrome instead: .gr-gp-chrome flex:0 0 auto bar + status; laid out FIRST .gr-gp-stage flex:1 1 auto min-height:0; what is left is the runtime iframe fills the stage The chrome reserves the status line whether or not there is a message (`min-height` on .gr-gp-status), so showing, changing or dismissing a status cannot resize the game — CATALOGUE_RUNTIME: success "must not resize the game unexpectedly". */ #gr-complete .gr-gameplayer .gr-gp-chrome { flex: 0 0 auto; background: var(--gr-panel); border-bottom: 1px solid var(--gr-line); padding-top: env(safe-area-inset-top, 0px); } #gr-complete .gr-gameplayer .gr-gp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 0; } #gr-complete .gr-gameplayer .gr-gp-bar strong { font-family: Outfit, 'DM Sans', Arial, sans-serif; font-size: 16px; letter-spacing: -.5px; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #gr-complete .gr-gameplayer .gr-gp-bar > button { flex: 0 0 auto; } /* The status region: its OWN row in the chrome, with a FIXED height. A fixed height is the whole repair. A min-height would still grow when a message wrapped to a second line or the Retry control appeared, and the stage would shrink under a game that had already laid itself out — which CATALOGUE_RUNTIME forbids ("must not resize the game unexpectedly") and which is how the reported defect would have come back in a new shape. Two lines are reserved below 700px and one above it, where the longest message this host can produce fits on one line with room to spare. The full text always stays in the DOM, so the polite live region announces it in full even where it is visually clamped, and `title` carries it to a pointer. */ #gr-complete .gr-gp-status { flex: 0 0 auto; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 14px; font-size: 12px; line-height: 16px; color: var(--gr-sub); text-align: center; overflow: hidden; } #gr-complete .gr-gp-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 32px; } @media (min-width: 700px) { #gr-complete .gr-gp-status { height: 26px; } #gr-complete .gr-gp-status > span { -webkit-line-clamp: 1; max-height: 16px; white-space: nowrap; } } #gr-complete .gr-gp-status[data-tone="pending"] { color: var(--gr-sub); } #gr-complete .gr-gp-status[data-tone="success"] { color: var(--gr-ink); } /* #be4141 is the approved .gr-error colour from base.css, reused rather than invented. */ #gr-complete .gr-gp-status[data-tone="error"] { color: #be4141; } #gr-complete .gr-gp-retry { flex: 0 0 auto; height: 22px; min-height: 22px; padding: 0 8px; font: inherit; font-size: 11px; line-height: 20px; border: 1px solid var(--gr-line); border-radius: 999px; background: var(--gr-bg); color: var(--gr-ink); cursor: pointer; } /* The stage is the ONE container the runtime is sized from. min-height:0 is load-bearing: without it a flex child refuses to shrink below its content and the iframe pushes the chrome off the top on a short window. */ #gr-complete .gr-gameplayer .gr-gp-stage { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; position: relative; overflow: hidden; background: var(--gr-bg); /* The bottom inset is subtracted HERE and nowhere else, so it is never double-counted by the host and the game both. */ padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } #gr-complete .gr-gameplayer iframe { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; min-width: 0; border: 0; display: block; background: var(--gr-bg); } /* A short window (the 1366x650 / 1280x600 rows of the test matrix, and any browser at 150-200% zoom) gives the chrome back to the game by tightening its own spacing — never by cropping the stage. The status row keeps a fixed height here too, so the rule above is not weakened. */ @media (max-height: 560px) { #gr-complete .gr-gameplayer .gr-gp-bar { padding: 6px 12px 0; } #gr-complete .gr-gameplayer .gr-gp-bar strong { font-size: 14px; } #gr-complete .gr-gp-status { height: 24px; padding: 2px 12px; } #gr-complete .gr-gp-status > span { -webkit-line-clamp: 1; max-height: 16px; } } /* ---------- Icon sprite sizing ---------- The ported surfaces use Lucide , which the approved CSS already sizes (#gr-complete button svg,#gr-complete i svg{width:18px; height:18px}). The 46 routes P02 still owns use an inline sprite instead, which no approved selector matches. Same 18px box, same stroke, so the two mechanisms render identically side by side. */ #gr-complete .gr-ic { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Toast ---------- Transient status, a sibling of .gr-app rather than a child, opacity:0 until shown, so it never occupies space in the product root. */ #gr-complete .gr-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; background: var(--gr-panel); border: 1px solid var(--gr-line); color: var(--gr-ink); border-radius: 99px; padding: 10px 18px; font-size: 13px; box-shadow: var(--gr-shadow, 0 8px 20px #17385914); opacity: 0; pointer-events: none; transition: opacity .18s ease; } #gr-complete .gr-toast[data-show="true"] { opacity: 1; } #gr-complete[data-motion="off"] .gr-toast { transition: none; } /* ---------- Links wearing an approved control class ---------- The approved design has no anywhere: every interactive label is a ` with an and keeps the attribute, so the attribute is what to select on. */ [dir=rtl] #gr-complete [data-lucide=arrow-right], [dir=rtl] #gr-complete [data-lucide=arrow-left], [dir=rtl] #gr-complete [data-lucide=chevron-right], [dir=rtl] #gr-complete [data-lucide=chevron-left], [dir=rtl] #gr-complete [data-lucide=corner-down-right], [dir=rtl] #gr-complete [data-lucide=trending-up] { transform: scaleX(-1); } /* A RANK IS A NUMBER, AND A NUMBER IS NOT MIRRORED. The bidi algorithm keeps the digits themselves in order; what moves is the column, and in a right-to-left reading order the rank belongs first, which is the right. `.model-rank` is already a flex row, so the document direction does that on its own — this only keeps the rank's own box from stretching. */ [dir=rtl] #gr-complete .model-rank strong { direction: ltr; unicode-bidi: isolate; } /* An English fragment inside a right-to-left sentence — a game's name, a locale code, a handle — is isolated so it cannot drag the punctuation around it to the wrong end of the line. This is the single most common right-to-left defect and it is invisible to anyone who does not read the language. */ [dir=rtl] #gr-complete .gr-lang-en { direction: ltr; text-align: right; } /* ========================================================================== OWNER DIRECTION — second smoke review, 28 September 2026 -------------------------------------------------------------------------- Four things the owner hit while playing the Hindi build. Everything here overrides the approved design on his instruction, which is first in the authority order, and lives in the production layer so base.css and model.css stay frozen. ========================================================================== */ /* ---------- 1. Navigation that stays put ------------------------------ "Jab screen neeche scroll down kr rahe hai toh side ke option hatt jaa rahe hai." WHY IT SCROLLED AWAY, measured rather than guessed: the sidebar is a grid item stretched to the full height of the page, and the owner-smoke item-4 rule above makes it `overflow-y: auto`. A scroll box that is as tall as its content never scrolls, and anything sticky inside it sticks to THAT box — so no descendant could ever have followed the screen. So the scrolling moves one level in. The column keeps its full height (it carries the background and the dividing line down the whole page); its contents — .gr-sidebar-inner — stick beneath the header and are limited to the screen's height, scrolling on their own if the window is short. That finally does what item 4 meant: "the column scrolls on a short window rather than pushing the side note out of view". THE HEADER STICKS TOO, above the phone breakpoint. Search, sign-in and the balance are what a player reaches for from anywhere on a long page, and every web game portal keeps them on screen. Below the breakpoint the header is two rows tall and a phone screen cannot spare that, so there it scrolls and the BOTTOM bar sticks instead — the phone equivalent of the sidebar, which had the same fault: it sat at the very end of the page, so the menu was only reachable by scrolling all the way down. `--gr-header-h` is the header's measured height (appearance.js, watchHeaderHeight); 75px is only the value before the first measurement. */ #gr-complete { --gr-header-h: 75px; } #gr-complete .gr-sidebar { overflow: visible; } @container gr-shell (min-width: 621px) { #gr-complete .gr-header { position: sticky; top: 0; z-index: 30; } /* THE HEIGHT LEAVES ROOM FOR THE END OF THE PAGE. A sticky block can only travel inside its column, and the column ends 72px above the bottom of the page (the footer and the page padding sit below it — measured, the same at every width). At the very end of the scroll the column's bottom therefore rises into view and pushes a full-height block up UNDER the header — the first test of this caught Home 64px behind it. The column's own 22px bottom padding (base.css) is off-limits to it as well, so the room is 72 + 22, plus a little. Reserving it keeps the whole list clear of the header all the way down; on a short window the block scrolls inside itself instead, and what goes below its fold is the decorative note, never a destination. */ #gr-complete .gr-sidebar-inner { --gr-foot-room: 100px; position: sticky; top: var(--gr-header-h, 75px); max-height: calc(100vh - var(--gr-header-h, 75px) - var(--gr-foot-room)); max-height: calc(100dvh - var(--gr-header-h, 75px) - var(--gr-foot-room)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; /* The approved padding lives on the column; the sticky block needs a little of its own so the first item does not touch the header's border once it is stuck. */ padding: 2px 0 12px; } } @container gr-shell (max-width: 620px) { #gr-complete .gr-bottom { position: sticky; bottom: 0; z-index: 30; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 20px rgba(16, 32, 60, .08); } } /* ---------- 2. The language switcher at the foot of the sidebar ------- */ #gr-complete .gr-side-lang { width: 100%; justify-content: flex-start; gap: 10px; margin: 14px 0 0; padding: 10px 12px; min-height: 44px; border: 1px solid var(--gr-line); border-radius: 12px; background: var(--gr-panel); color: var(--gr-ink); font-size: 12px; font-weight: 650; } #gr-complete .gr-side-lang:hover { border-color: var(--gr-blue); background: var(--gr-tint); } #gr-complete .gr-side-lang[aria-current="page"] { border-color: var(--gr-blue); color: var(--gr-blue); } #gr-complete .gr-side-lang-name { flex: 1; min-width: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #gr-complete .gr-side-lang svg:last-child { width: 15px; height: 15px; opacity: .55; } [dir=rtl] #gr-complete .gr-side-lang svg:last-child { transform: scaleX(-1); } /* ---------- 3. A settings row is one tap target ---------------------- "Bhasha pr click nhi ho raha." The owner clicked the row's label. A row whose only control is one enabled navigation now forwards a click anywhere on it to that control (v3-app.js, rowTarget); this is the part the eye needs — the pointer, and the row's button lighting up while the pointer is anywhere on the row, so it is obvious what the click will do. `:has()` is only the affordance: an engine without it still gets the working click. */ #gr-complete .gr-row:has(> button[data-route]:not(:disabled):only-of-type) { cursor: pointer; } #gr-complete .gr-row:has(> button[data-route]:not(:disabled):only-of-type):hover > button[data-route] { border-color: var(--gr-blue); background: var(--gr-tint); color: var(--gr-blue); } /* ---------- 4. The platform balance, in the header -------------------- */ #gr-complete .gr-coin { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff8d6 0 16%, #ffd54f 17% 58%, #e3a514 59% 100%); box-shadow: inset 0 0 0 2px #f8cb45, inset 0 -3px 0 rgba(170, 110, 0, .35), 0 1px 3px rgba(150, 100, 0, .35); } #gr-complete .gr-coins { gap: 8px; min-height: 38px; padding: 0 13px 0 8px; border: 1px solid #f0cf6a; border-radius: 12px; background: #fff8e1; /* 7.9:1 on the cream, in every theme — the pill carries its own surface rather than a theme token, because gold on a dark theme's panel would be a different colour pair in each theme. */ color: #5a4210; font: 700 13px Outfit, 'DM Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } #gr-complete .gr-coins:hover { background: #ffefb8; } #gr-complete .gr-coins.is-gaining { animation: gr-coins-gain .7s ease-out; } @keyframes gr-coins-gain { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 200, 40, .55); } 35% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255, 200, 40, .0); } 100% { transform: scale(1); } } @container gr-shell (max-width: 620px) { #gr-complete .gr-coins { padding: 0 10px 0 6px; font-size: 12px; min-height: 36px; } #gr-complete .gr-coin { width: 19px; height: 19px; } } /* Roch Points, beside the coins (owner, 1 Oct 2026). Like the coin pill it carries its own surface, so it is the same violet pair in every theme — #3a1f9a on #f1ecff is 9.6:1. */ #gr-complete .gr-rpill { gap: 7px; min-height: 38px; padding: 0 12px 0 9px; border: 1px solid #cdbcff; border-radius: 12px; background: #f1ecff; color: #3a1f9a; font: 700 13px Outfit, 'DM Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } #gr-complete .gr-rpill:hover { background: #e4dbff; } #gr-complete .gr-rpill small { font-size: 10px; font-weight: 800; letter-spacing: .4px; opacity: .8; } #gr-complete .gr-rpgem { flex: none; width: 15px; height: 15px; border-radius: 28%; rotate: 45deg; background: linear-gradient(135deg, #cdbcff, #7b4dff 55%, #4f2bc4); box-shadow: inset 0 0 0 1.5px #ffffff80, 0 1px 0 #3a1f9a; } @container gr-shell (max-width: 850px) { #gr-complete .gr-rpill small { display: none; } } @container gr-shell (max-width: 620px) { #gr-complete .gr-rpill { padding: 0 9px 0 7px; font-size: 12px; min-height: 36px; } } /* ---------- 5. Notices arrive at the top ---------------------------- The pill used to float at the BOTTOM of the screen, and the same message was also written into a line below the footer that never cleared — the "+10 coins" the owner found at the end of the page. It now arrives just under the header, where the eye already is and where the balance it just changed is shown. Nothing here ever blocks a click. */ #gr-complete .gr-toast { top: calc(var(--gr-header-h, 75px) + 14px); bottom: auto; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 520px); width: max-content; padding: 11px 18px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.35; box-shadow: 0 14px 34px rgba(16, 32, 60, .18); transform: translate(-50%, -14px) scale(.97); transition: opacity .2s ease, transform .38s cubic-bezier(.2, 1.35, .4, 1); } #gr-complete .gr-toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0) scale(1); } @media (max-width: 640px) { /* The header scrolls away on a phone, so the notice anchors to the screen's own top edge, clear of the notch. */ #gr-complete .gr-toast { top: calc(12px + env(safe-area-inset-top, 0px)); } } #gr-complete .gr-toast[data-kind="reward"] { padding: 10px 20px 10px 12px; border: 1px solid #f0c64c; border-radius: 16px; background: linear-gradient(135deg, #fffaeb, #ffe7a1); color: #4d3809; } #gr-complete .gr-toast .gr-toast-coin { flex: none; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff8d6 0 16%, #ffd54f 17% 58%, #e3a514 59% 100%); box-shadow: inset 0 0 0 3px #f8cb45, inset 0 -4px 0 rgba(170, 110, 0, .35), 0 3px 8px rgba(150, 100, 0, .35); } #gr-complete .gr-toast[data-kind="reward"][data-show="true"] .gr-toast-coin { animation: gr-coin-spin .95s ease-out; } @keyframes gr-coin-spin { 0% { transform: rotateY(0) scale(.55); } 60% { transform: rotateY(540deg) scale(1.14); } 100% { transform: rotateY(720deg) scale(1); } } #gr-complete .gr-toast-copy b { display: block; font: 750 16px/1.2 Outfit, 'DM Sans', Arial, sans-serif; } #gr-complete .gr-toast-copy small { display: block; margin-top: 2px; font-size: 12px; color: #6b5213; } @media (prefers-reduced-motion: reduce) { #gr-complete .gr-toast { transition: opacity .15s ease; transform: translate(-50%, 0); } #gr-complete .gr-toast .gr-toast-coin, #gr-complete .gr-coins.is-gaining { animation: none; } } /* ========================================================================== THE NEXT LEVEL — premium themes, characters, the Home hub -------------------------------------------------------------------------- OWNER DIRECTION, 29 September 2026. Themes worth unlocking, a character for every player, and a UI lift across the site. Tokens stay the single source of colour: a premium theme writes its palette onto #gr-complete as custom properties (js/core/themes.js), so every component below — and every approved component — reads the theme without knowing which one it is. ========================================================================== */ /* ---- premium themes ------------------------------------------------------ */ #gr-complete[data-premium] .gr-app { background: var(--gr-decor, none), var(--gr-bg); } /* White hero copy on every premium hero: the palettes are checked for white at 4.5:1 on both hero stops, and the approved pale-blue copy was only ever checked against Everyday Blue. */ #gr-complete[data-premium] .gr-hero p, #gr-complete[data-premium] .gr-hero .gr-eyebrow { color: #fff; } #gr-complete[data-premium] .gr-play { box-shadow: 0 6px 18px #00000030; } #gr-complete[data-tone=dark] .gr-brand strong span { color: #c797ff; } #gr-complete[data-tone=dark] { color-scheme: dark; } /* The slow ambient light of the Epic and Legendary themes: one blurred layer behind the page, moved with a transform so the compositor does the work. */ #gr-complete[data-ambient] .gr-app { position: relative; isolation: isolate; } #gr-complete[data-ambient] .gr-app::before { content: ''; position: absolute; inset: -12%; z-index: -1; pointer-events: none; background: var(--gr-ambient, none); animation: gr-ambient 46s ease-in-out infinite alternate; } @keyframes gr-ambient { from { transform: translate3d(-4%, -3%, 0) scale(1.04); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } } #gr-complete[data-motion=off] .gr-app::before { animation: none; } @media (prefers-reduced-motion: reduce) { #gr-complete .gr-app::before { animation: none; } } /* ---- currency marks and requirement chips -------------------------------- */ #gr-complete .gr-cur { display: inline-block; width: 14px; height: 14px; flex: none; vertical-align: -2px; } #gr-complete .gr-cur-coins { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f5b300 55%, #b98100); box-shadow: inset 0 0 0 1.5px #b98100; } #gr-complete .gr-cur-diamonds { background: linear-gradient(135deg, #b8f0ff, #3aa6ff 55%, #1f5fd1); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); } #gr-complete .gr-cur-roch { border-radius: 4px; background: linear-gradient(135deg, #b794ff, #7c3aed); transform: rotate(45deg) scale(.8); } #gr-complete .gr-req { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; line-height: 1.3; background: var(--gr-tint); color: var(--gr-ink); } #gr-complete .gr-req.is-free { color: var(--gr-blue); } #gr-complete .gr-reqs { display: flex; flex-wrap: wrap; gap: 6px; } /* ---- rarity -------------------------------------------------------------- */ #gr-complete .gr-rarity { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .3px; } #gr-complete .gr-rarity[data-r=common] { background: #e7ecf3; color: #33415a; } #gr-complete .gr-rarity[data-r=rare] { background: #dcecff; color: #0f4c9c; } #gr-complete .gr-rarity[data-r=epic] { background: #efe2ff; color: #5b21b6; } #gr-complete .gr-rarity[data-r=legendary] { background: linear-gradient(90deg, #fff1c2, #ffd9ef); color: #7a3b00; } /* ---- the theme gallery --------------------------------------------------- */ #gr-complete .gr-collection { margin-top: 30px; } #gr-complete .gr-collection-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } #gr-complete .gr-collection-head h2 { font-size: 22px; } #gr-complete .gr-collection-head p { margin: 4px 0 0; font-size: 12px; } #gr-complete .gr-theme-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } #gr-complete .gr-ptheme { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; border: 1px solid var(--gr-line); background: var(--gr-panel); box-shadow: var(--gr-shadow); transition: transform .2s ease, box-shadow .2s ease; } #gr-complete .gr-ptheme:hover { transform: translateY(-3px); box-shadow: 0 14px 30px #1a1a3a26; } #gr-complete .gr-ptheme.is-previewing { outline: 3px solid var(--gr-blue); outline-offset: 2px; } /* The swatch is the theme itself, drawn with ITS tokens: page, panel and accent, over its own background art. */ #gr-complete .gr-ptheme-swatch { position: relative; height: 124px; padding: 10px; display: grid; grid-template-columns: 16px 1fr; gap: 8px; background: var(--sw-decor), var(--sw-bg); } #gr-complete .gr-ptheme-swatch i { border-radius: 6px; background: var(--sw-panel); opacity: .92; } #gr-complete .gr-sw-main { display: grid; grid-template-rows: 1fr 30px; gap: 7px; min-width: 0; } /* The theme's own hero, with its accent button on it. */ #gr-complete .gr-ptheme-swatch em { position: relative; border-radius: 10px; background: linear-gradient(120deg, var(--sw-hero), var(--sw-hero2)); } #gr-complete .gr-ptheme-swatch em::before { content: ''; position: absolute; left: 9px; top: 9px; width: 46%; height: 7px; border-radius: 4px; background: #ffffffd9; } #gr-complete .gr-ptheme-swatch em::after { content: ''; position: absolute; left: 9px; bottom: 9px; width: 34%; height: 11px; border-radius: 6px; background: var(--sw-accent); } #gr-complete .gr-sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } #gr-complete .gr-sw-row b { position: relative; border-radius: 8px; background: var(--sw-panel); } #gr-complete .gr-sw-row b::before { content: ''; position: absolute; left: 7px; top: 8px; width: 55%; height: 5px; border-radius: 3px; background: var(--sw-ink); opacity: .7; } #gr-complete .gr-sw-row b::after { content: ''; position: absolute; left: 7px; bottom: 7px; width: 30%; height: 5px; border-radius: 3px; background: var(--sw-accent); } #gr-complete .gr-ptheme-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px 14px; } #gr-complete .gr-ptheme-body h3 { font-size: 15px; } #gr-complete .gr-ptheme-body > button { width: 100%; min-height: 38px; font-size: 12px; margin-top: auto; } #gr-complete .gr-gallery-note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--gr-tint); color: var(--gr-ink); font-size: 12px; margin-top: 18px; } #gr-complete .gr-gallery-note svg { color: var(--gr-blue); flex: none; } @container gr-shell (max-width: 1100px) { #gr-complete .gr-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container gr-shell (max-width: 620px) { #gr-complete .gr-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } /* ---- the preview bar ----------------------------------------------------- */ #gr-complete .gr-preview-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; width: min(820px, calc(100vw - 24px)); padding: 10px 12px 10px 16px; border-radius: 18px; background: var(--gr-panel); color: var(--gr-ink); border: 1px solid var(--gr-line); box-shadow: 0 16px 40px #00000040; } #gr-complete .gr-preview-bar[hidden] { display: none; } #gr-complete .gr-preview-bar .gr-pv-name { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; } #gr-complete .gr-preview-bar .gr-pv-name b { font: 700 15px/1.2 Outfit, Arial, sans-serif; } #gr-complete .gr-preview-bar .gr-pv-name small { font-size: 11px; } #gr-complete .gr-preview-bar button { min-height: 38px; font-size: 12px; border-radius: 12px; } @media (max-width: 640px) { #gr-complete .gr-preview-bar { bottom: calc(84px + env(safe-area-inset-bottom)); justify-content: flex-start; } /* On a phone the way out becomes a corner button, so the bar is two rows, not three. */ #gr-complete .gr-preview-bar .gr-pv-name { padding-right: 40px; } #gr-complete .gr-preview-bar .gr-pv-exit { position: absolute; top: 8px; right: 8px; width: 38px; padding: 0; } #gr-complete .gr-preview-bar .gr-pv-exit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ---- characters ---------------------------------------------------------- */ #gr-complete .gr-char { display: block; flex: none; } #gr-complete .gr-face { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--gr-tint); } #gr-complete .gr-face .gr-char { width: 32px; height: 32px; } /* The header avatar and the profile avatar become the character. */ #gr-complete .gr-avatar.has-char { background: var(--gr-tint); box-shadow: none; padding: 0; overflow: hidden; } #gr-complete .gr-avatar.has-char .gr-char { width: 86%; height: 86%; } /* Leaderboard rows: the face sits between the rank and the name. */ /* `.model-rank>span` makes every direct span a stretching grid column; the face is a span too, so it states its own box. */ #gr-complete .model-rank .gr-face { flex: none; display: inline-grid; gap: 0; width: 34px; height: 34px; border-radius: 11px; } #gr-complete .model-rank .gr-face .gr-char { width: 29px; height: 29px; } #gr-complete .gr-char-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #gr-complete .gr-char-card { display: grid; justify-items: center; gap: 8px; padding: 16px 12px 14px; border-radius: 18px; text-align: center; background: var(--gr-panel); border: 1px solid var(--gr-line); box-shadow: var(--gr-shadow); } #gr-complete .gr-char-card .gr-char-stage { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: radial-gradient(circle at 50% 35%, #ffffff, var(--gr-tint) 70%); } #gr-complete[data-tone=dark] .gr-char-card .gr-char-stage { background: radial-gradient(circle at 50% 35%, #ffffff26, var(--gr-tint) 70%); } /* Locked characters stay in full colour — wanting one starts with seeing it — and carry a small lock on their stage instead. */ #gr-complete .gr-char-card .gr-char-stage { position: relative; } #gr-complete .gr-char-card .gr-lock { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gr-ink); color: var(--gr-panel); box-shadow: 0 0 0 3px var(--gr-panel); } #gr-complete .gr-char-card .gr-lock svg { width: 14px; height: 14px; } #gr-complete .gr-char-card.is-yours { border-color: var(--gr-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gr-blue) 25%, transparent); } #gr-complete .gr-char-card h3 { font-size: 15px; } #gr-complete .gr-char-card .gr-reqs { justify-content: center; } @container gr-shell (max-width: 900px) { #gr-complete .gr-char-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container gr-shell (max-width: 620px) { #gr-complete .gr-char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- the Home hub -------------------------------------------------------- */ /* The one memorable thing on Home: the player's own character, big, beside what today holds — the reward, the streak, the balance — and the one action that matters, Continue. Everything else on Home stays as it was. */ #gr-complete .gr-hub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 20px; margin-bottom: 22px; border-radius: 24px; background: var(--gr-panel); border: 1px solid var(--gr-line); box-shadow: var(--gr-shadow); } #gr-complete .gr-hub-char { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 30px; background: radial-gradient(circle at 50% 30%, #ffffffcc, var(--gr-tint) 72%); } #gr-complete[data-tone=dark] .gr-hub-char { background: radial-gradient(circle at 50% 30%, #ffffff2e, var(--gr-tint) 72%); } #gr-complete .gr-hub-char .gr-char { width: 80px; height: 80px; } #gr-complete .gr-hub h1 { font-size: clamp(22px, 2.6cqw, 30px); } #gr-complete .gr-hub .gr-hub-sub { margin: 4px 0 10px; font-size: 13px; } #gr-complete .gr-hub-chips { display: flex; flex-wrap: wrap; gap: 8px; } #gr-complete .gr-hub-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--gr-tint); color: var(--gr-ink); font-size: 12px; font-weight: 700; } #gr-complete .gr-hub-chip svg { width: 15px; height: 15px; color: var(--gr-blue); } #gr-complete .gr-hub-actions { display: grid; gap: 8px; justify-items: stretch; } #gr-complete .gr-hub-actions .gr-play { min-height: 50px; padding: 12px 22px; font-size: 14px; border-radius: 14px; } #gr-complete .gr-hub-actions .gr-soft { font-size: 12px; } @container gr-shell (max-width: 760px) { #gr-complete .gr-hub { grid-template-columns: auto minmax(0, 1fr); } #gr-complete .gr-hub-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } } @container gr-shell (max-width: 420px) { #gr-complete .gr-hub { gap: 14px; padding: 14px; } #gr-complete .gr-hub-char { width: 72px; height: 72px; border-radius: 22px; } #gr-complete .gr-hub-char .gr-char { width: 60px; height: 60px; } #gr-complete .gr-hub-actions { grid-template-columns: 1fr; } } /* ---- a quieter, firmer site-wide feel ------------------------------------- Small things that add up: controls answer the press, focus is always visible, cards lift a little under a pointer, and headings get a steadier rhythm. No colour changes here — the palettes own colour. */ #gr-complete :focus-visible { outline: 3px solid var(--gr-blue); outline-offset: 2px; } #gr-complete .gr-soft:hover:not(:disabled) { border-color: var(--gr-blue); } #gr-complete .gr-soft:active:not(:disabled) { transform: translateY(1px); } #gr-complete .gr-panel { transition: box-shadow .2s ease; } #gr-complete .gr-section-head h2 { letter-spacing: -.4px; } #gr-complete .gr-topic:hover { box-shadow: 0 8px 18px #1a1a3a1a; } /* ---------- Profile: the hall of fame (V3 Live Update 1) ---------- Three medals and one line — a glance at what the Achievements screen holds. */ #gr-complete .gr-hall { display: grid; gap: 10px; justify-items: center; text-align: center; } #gr-complete .gr-hall-medals { display: flex; gap: clamp(14px, 5cqi, 44px); align-items: flex-end; justify-content: center; padding: 6px 0 2px; } #gr-complete .gr-hall-line { margin: 0; font-weight: 700; } #gr-complete .gr-hall-badges { color: var(--gr-sub); font-weight: 500; font-size: 14px; } #gr-complete .gr-hall .gr-buttons { justify-content: center; }