` is the skip link's target and it had no scroll-margin, so following the link scrolled the page to main's own top and the sticky bar covered the landing — MEASURED before: after the jump scrollY 73, #main's top at 0 under a 73px header (61/61 at 390), both languages. With the offset the jump clamps at the document's top and main's top edge meets the bar's bottom edge — MEASURED after: 0px of main under the bar at 1536 and 390, both languages, signed out and in. */ #main, .section[id]{scroll-margin-block-start:var(--gt-scroll-offset)} body{ background:var(--bg); color:var(--text); /* ONE source for the face — V-30 B3. This line used to spell the stack out (`Inter,-apple-system,"Segoe UI",Arial,sans-serif`) beside a token that spelt it a second time, and MEASURED (the batch's impact pass): overriding `--gt-family` alone moved `.got-btn` by 1.08px and nothing else, because the body — and by inheritance the whole site — was reading THIS line and not the token. Now the token is the only place the face is decided, which is also what lets /ar re-point it to the Arabic stack in one rule. */ font-family:var(--gt-family); line-height:1.6; -webkit-font-smoothing:antialiased; /* THE SHORT-PAGE RULE (18 Aug, the UI/UX round's Batch 0). Seven customer pages are shorter than the screen and the footer floated mid-viewport — measured at y 396 on the 404, 485 on the cards page, 511 on the cart, 657/691/708/799 elsewhere in a 900 viewport. The body is a column and

takes what is left, so the footer sits at the bottom of the screen on a short page and after the content on a long one. Measured after: 404 footer 396→809, cards 485→809, document 900 both. */ min-block-size:100dvh; display:flex; flex-direction:column; } main{flex:1 0 auto} a{color:inherit;text-decoration:none} /* The container reads the shell tokens (Batch 0): the same 1180 it always was, with a gutter that grows 20→40px with the viewport instead of a fixed 20px at every width. */ .container{max-width:calc(var(--gt-container) + 2 * var(--gt-gutter));margin:0 auto;padding:0 var(--gt-gutter)} /* 🔴 THE SHELF'S MEASURE — FLUID, NOT A WIDER COLUMN (V-06 Batch 4, 22 Aug). V-05 Batch 2 stood here for a few hours and said: the reading measure is 1140, a page that is nothing but a shelf takes 1240, and above 1800 it takes 1560. That whole scheme is DELETED rather than retuned, because V-06 is a different idea and not a different setting of that one. WHAT WAS WRONG WITH IT, MEASURED ON THIS TREE at 1536 before the change: the shelf's box was 1320 wide inside a 1536 viewport, so the grid's left edge sat at 148 and 216px of the page was margin. That space is the catalogue's. The container is now capped at --gt-shelf-max (1680) with FIXED gutters, so below 1680 the shelf is the viewport less its gutters and the tile floor — not a column width — decides how many cards a row holds. Measured after: the grid's left edge is 48 at 1536 and the row holds five. THE GUTTERS ARE THREE FIXED STEPS OF THE SPACING SCALE, NOT --gt-gutter. The shell's gutter is clamp(20px, 3vw, 40px) and cannot produce these: at 1100 it resolves to 33 where the shelf needs 24, and at 390 to 20 where the shelf needs 16. They are two different jobs — one is the reading measure's air, this one is tuned so the fourth track survives 1100. That is the ONE number in this container tuned rather than derived, and it is a GUTTER rather than a hand-written column count on purpose: the count still comes from the floor at every width, including this one. 🔴 THE MIDDLE STEP IS 24 AND THE REFERENCE SAYS 32, WHICH IS A DIVERGENCE THAT EXISTS TO KEEP THE REFERENCE'S OWN PROMISE. Four tracks want 1020 of content. At 32 a 1100 viewport gives 1036 — sixteen pixels — and FIFTEEN OF THOSE ARE A SCROLLBAR THE MEASUREMENT DID NOT HAVE: the round's harness drives a Chrome whose clientWidth equals the viewport, while a real Windows Chrome takes 15px out of the layout viewport before this gutter resolves. Driven at the equivalent narrower viewports: 1085 (a 15px bar) gave 1021 and four tracks by ONE PIXEL, and 1083 (a 17px bar) gave 1019 and THREE. At 24 the same three readings are 1052 / 1037 / 1035, all four tracks, with 32 / 17 / 15 of slack, and 1080 (a 20px bar) still holds. The count at every other width has room to spare, so this is the only step that moved. `--gt-tile-min`'s comment in system.css carries the table. NO `min(100%, …)` GUARD. It was needed while the cap was written as `calc(measure + 2 * gutter)` with the gutter growing; here the cap is a flat 1680 on a border-box element, so below 1680 the declaration is inert and the div is simply the width of its parent. A guard for a state nothing can reach is the kind this project calls indistinguishable from a bug. THREE WEARERS, AND EACH IS A DECISION RATHER THAN AN OVERSIGHT: `/games`, the homepage's `#games` section (they render the same , so one shelf gets one measure — the reference's homepage file says "ONE CONTAINER. Same as /games."), and SINCE V-18b the homepage's `#store` section, so its heading and first card share the games band's left edge — Omar's alignment ask. The store's grid DOES fill this box since V-18d: `.got-store-grid` (system.css) is FIXED counts now (6/3/2), so V-01's empty-track finding — which was about an uncapped `auto-fill` strip minting tracks nothing fills — cannot recur: the track count is written, not derived from a floor, and six cards fill six tracks. The V-18b 1140 cap died with the auto-fill grid. The HERO alone stays at the reading measure: a centred column of words has no tracks to gain. */ .container--shelf{max-width:var(--gt-shelf-max);padding-inline:var(--gt-space-10)} @media (max-width:71.875em){ /* 1150 — this is what keeps 4 tracks at 1100 */ .container--shelf{padding-inline:var(--gt-space-7)} } @media (max-width:32.5em){ /* 520 */ .container--shelf{padding-inline:var(--gt-space-5)} } /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:50; /* 🔴 THIS WAS `rgba(13,15,23,.85)` UNTIL 22 AUG — `brand.ink`'s channels written out as literals, which `BrandPaletteTest` could not see because it knows hex strings. It was found by BUILDING THE LIGHT THEME: the bar stayed black across the top of a white page. A rule that is right in one theme and wrong in the other is BUG-096's family, and the fix is the same one — read the value from the emitter, which now publishes the page's channels for exactly this. */ /* V-13 Batch 4.2 — treatment C, tinted glass (Omar, 24 Aug: "now it is black only, add a small touch to show system colors in the header bar"). The wash is a LAYER OVER the same glass, never a replacement: 13% blue at the inline-start easing through 5% to 7% of the second accent toward the inline-end, then clear. Channels come from the emitter (--blue-rgb, --accent-secondary-rgb, --bg-rgb) so both themes composite their own values — the rule above records what happened last time literals were written here. A gradient's angle is physical, so the [dir="rtl"] rule below mirrors it (100deg → 260deg). NO motion: treatment D was rejected — the bar is sticky, and a permanent traveller would compete with the hero rails wherever both are visible. */ background: linear-gradient(100deg,rgba(var(--blue-rgb),.13) 0%,rgba(var(--blue-rgb),.05) 34%,rgba(var(--accent-secondary-rgb),.07) 76%,transparent 100%), rgba(var(--bg-rgb),.85); backdrop-filter:blur(12px); border-bottom:1px solid transparent; } [dir="rtl"] .site-header{ background: linear-gradient(260deg,rgba(var(--blue-rgb),.13) 0%,rgba(var(--blue-rgb),.05) 34%,rgba(var(--accent-secondary-rgb),.07) 76%,transparent 100%), rgba(var(--bg-rgb),.85); } /* The hairline becomes the brand's own line: transparent → blue → accent → second accent → transparent, fading at both ends. A ::after and not border-image, so the border-box geometry above does not move — the transparent border keeps the 1px of height the flat line occupied, and since V-30 B4 that pixel is inside `--gt-header-height`'s figure: `.nav` takes the token less this border, so the header's border-box lands on the token exactly. Mirrored for RTL like the wash. 🔴 THE GRADIENT IS THE TOKEN — V-42d B2, 11 Sep 2026. This line carried the brand's edge gradient as a private literal from 18 Aug; V-40 minted `--gt-gradient-edge` for the wallet capsule and the top-up cards rather than write a third copy, and left this one because converting it touches every page. It is converted now, and "touches every page" was MEASURED as the header strip of seven kinds of page, signed out and in, both locales, both themes — 48 strips, pixel-identical before and after (the round's report). The RTL token is `270deg` with the same stops, which is the same line as the mirrored literal that stood here (26/60/84 are 100 − 74/40/16). */ .site-header::after{ content:"";position:absolute;inset-inline:0;bottom:-1px;block-size:1px; background:var(--gt-gradient-edge); opacity:.8; } [dir="rtl"] .site-header::after{ background:var(--gt-gradient-edge-rtl); } /* ---- the header row — REBUILT 18 Aug (the UI/UX round's Batch 2) --------- ONE LINE ON THE WIDE ROW, TWO ON THE PHONE (V-30 B5). The 14 Aug note that stood here let the row WRAP at phone width so that nothing could be pushed off the inline end (BUG-205, BUG-206, BUG-208 are the measurements it carried); it made the header 103px for a guest and 159px signed in at 390 — three rows, the account toggle alone on the last — and the 18 Aug rebuild superseded it: the language switch and the guest's sign-in sit inside the ☰ disclosure (`.got-navmenu`, system.css), a full-width SHEET under the header below the breakpoint and inline content at it and above. Since V-30 B5 the row wraps ONCE, on purpose, below 52em: the pill navigation (`.got-tabs`, system.css — outside the disclosure) is a full-width second line under brand · ☰ · basket · balance · account, because the first line cannot take it (MEASURED at 390: three text tabs overflow it by 192–264px, three 44px icon pills by 24px for an English guest). The header is 64.00 on the wide row and 116.00 on the phone, both `--gt-header-height` (system.css); nothing is off-screen at 320 (MEASURED: a 272px pill in a 288px content box, scrollWidth = clientWidth). THE BREAKPOINT IS 52em (832px), the width at which the wide row stops fitting with every target at 44px — measured, both languages, signed-in — and it is the same line system.css draws for the two sheets and for --gt-scroll-offset. 640 remains the phone line for things that are about a PHONE (the logo step, the tile ratio); this one is about the ROW. Sizes are tokens: the tap floor, the spaces, the text scale. GAP-099: the brand and the footer's links are 44px targets here; the pill's tabs, the switch, the toggles and the sheet rows are the system's. ============ V-33 B4: THE WIDE ROW IS A THREE-COLUMN GRID ================ The row was `display:flex; justify-content:space-between` and the centre zone a flex ITEM (`flex: 1 0 auto`) between two side zones of different widths — so the pill centred in the LEFTOVER, not in the header, and by a different amount per locale and per signed-in state (Omar saw it, 3 Sep: right of centre in Arabic, further left in English). MEASURED BEFORE at 1440, pill centre minus header centre: guest −98.23 (/) and +97.91 (/ar); signed in −125.14 and +128.98. The brand was 197.86 wide, the end zone 135.5 (guest) or 293.67 / 301.38 (signed in). Now the row is a grid of the THREE ZONES the header is made of — brand · `.got-header__nav` · `.got-header__end` (system.css; the end zone wraps the ☰ disclosure and the account cluster, so the row has exactly three children) — and the middle column is `auto`: the pill's own width, in the middle of two equal `1fr` tracks, which is the header's centre by construction and not by leftover. THE TWO SIDE TRACKS ARE NOT WRITTEN THE SAME WAY, ON PURPOSE. The brand's is `minmax(0, 1fr)`: the brand is still the one item on the row allowed to give (its rule below), and the track may shrink under it. The end zone's is `minmax(max-content, 1fr)`: its contents are 44px targets, a figure and a name that never give, so the track may not go under them — with `1fr` on both sides and `min-inline-size: 0` on the end zone, the cluster would overflow its track TOWARD the pill at any width where the equal split cannot hold it (MEASURED signed in: the cluster is 452.13 (/) and 459.83 (/ar) wide, and an equal track at 1150 is 362, at 1280 it is 403). So: equal tracks wherever both zones fit — MEASURED 487/487 at 1440 and 407/407 for a guest at 1280, the pill's centre ON the header's in every state — and where the end zone is wider than half the slack, its track holds and the brand's takes what is left, so the pill shifts (1366 signed in: 2.12 / 9.83 short of centre), which is what the flex row did at EVERY width. The full table, by width and state, is in the B4 report. The brand carries `min-inline-size: 0` (its rule below) — that is what lets its track go under the wordmark; the end zone carries NONE, because its floor is the track's `max-content` and a minimum on the item changes nothing there (the B4 verifier MEASURED one rendering byte-identically deleted at six width/state combinations). */ .nav{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr); align-items:center; gap:var(--gt-space-5); /* V-30 B4: the row's floor is THE TOKEN, less the header's 1px transparent border, so the header's border-box IS --gt-header-height (system.css). It binds: the tallest row items at 1536 are the pill and the language switch at 46.00 (the wordmark is 45.98) + 2×8 padding = 62, one under the 63 this resolves to, and the 44px targets + 16 = 60. MEASURED header 64.00 at 1536 and at 390, both languages, signed out and in. It was a bare `72px` — one of five disagreeing copies. */ min-block-size:calc(var(--gt-header-height) - var(--gt-border-hair)); padding-block:var(--gt-space-3); } @media (max-width:52em){ /* No min-block-size here any more: system.css re-declares the token in this band and the rule above reads it, so ONE declaration sizes both rows (this was `min-block-size:0` — 8 + 44 + 8 = 60 — until V-30 B4). HeaderHeightTest asserts nothing in any band sizes `.nav` a second way. `flex-wrap` since V-30 B5: the pill navigation is a full-width second LINE of this row on the phone (`.got-header__nav`, system.css), and the gap is the space between the two lines as well as between items. V-33 B4: the wide row is a grid now (above), so THIS band is where the row is a flex row at all — the phone's two lines are a wrapping flex row of brand · ☰ · cluster · (line 2) the pill, spread by `space-between`. The end zone is `display: contents` in this band (system.css), so the ☰ and the cluster are this row's own items, at the x positions V-30 B5 measured — the B4 fix pass re-measured them against the pre-batch tree, all four states, both languages. */ .nav{ display:flex; justify-content:space-between; gap:var(--gt-space-3); flex-wrap:wrap; } } /* The brand: 44px tall as a target however tall the logo is — and THE ONE THING ON THE ROW THAT MAY GIVE. Every other item is content-sized and `flex-shrink:0` (the balance is a figure, the tabs are names); the brand shrinks first, and the wordmark scales with it (block-size auto under a max, max-inline-size 100%), so a longer balance narrows the logo a little rather than pushing the account toggle into the gutter or off the screen. The verifier found exactly that at 401–409px with a $10.00 balance and off the viewport at 401–412 with $1,000.00 — the mark line below had been set from ONE balance figure. */ /* V-33 B4: `justify-self:start` because the brand is a GRID item on the wide row now (`.nav` above). A grid item's default is `stretch`, and this is a link: stretched, the whole first track — hundreds of pixels of empty header — would be the home link and the focus ring would draw around all of it. `start` gives it its content width, still shrinkable under the track (`min-inline-size:0`, and the wordmark's `max-inline-size:100%`). Logical: `start` is the right edge on /ar. `flex:0 1 auto` is for the phone band, where the row is a flex row. */ .brand{ display:inline-flex; align-items:center; min-block-size:var(--gt-tap-min); flex:0 1 auto; min-inline-size:0; justify-self:start; } /* 46px to match the panels' 3rem lockup, so the mark carries the same weight whichever part of GameOnTime you are looking at. Steps down on a phone, where the row has far less room to give. */ /* The box is reserved BEFORE the file lands (C-06, 19 Aug — the D3 verifier measured 0×0 until then and a 198px jump of the nav row): the attributes give the ratio (aspect-ratio: auto 542/126), and a ratio cannot size an unloaded image on its own — `inline-size:auto` was overriding the attributes' hint. So the inline size is WRITTEN, from the same numbers (46px tall × 542/126), the block size follows the ratio, and the max rules below still clamp it (34px under 52em; a squeezed row shrinks the width and the height follows — no distortion, the ratio transfers). */ .brand-logo{display:block;inline-size:calc(542 / 126 * 46px);block-size:auto;max-block-size:46px;max-inline-size:100%} /* THE LIGHT WORDMARK IS A `