/* ========================================================================== GRIDROP · OVERTAKE — THE GALLERY: the two cases that frame the ceremony. The owner's approved render (`.claude/gauntlet-gallery/reference/owner- screenshot.md`) puts THREE vertical zones on the felt: a tall rounded case on each gutter and the ceremony between them. This file is the two cases. The ceremony is not touched by one declaration in here. Loaded AFTER `finale.css`, which is itself after `felt-final.css`, so at equal specificity this file wins and no `!important` is needed anywhere in it — the same discipline finale.css states in its own header. ⚠️ EVERY SELECTOR IS SCOPED UNDER `.ofin`. A bare `.ogal-nm` or `.ogal-av` rule would leak onto the lobby, the browse list, the invite row and the racebar on BOTH pages — those pages carry `.nm`, `.av`, `.sav` and `.st` nodes of their own, and a wing class is only one careless rename away from colliding with them. `.ofin` exists on the end screen and nowhere else (`felt-final.css:37`), so it is the cheapest possible fence. WHAT THIS FILE MAY STYLE is fixed by `.claude/gauntlet-gallery/CONTRACT-DOM .md` §2-§3 — `.ogal{,-h,-tiles,-tile,-prev,-meta,-nm,-pill,-more,-rows,-row, -av,-dot,-who,-st,-inv,-empty,-foot}` plus the state attributes `data-ogal`, `data-ogal-fit`, `data-side`, `data-state`, `data-kind`, `data-pill`, `data-online` and the measured `--ogalGut`. Nothing else. The module builder owns `gallery.js`; neither of us may change that contract alone. SIZES COME FROM THE VARIABLES felt.js ALREADY PUBLISHES on ``, and from exactly SIX of them — `--finPad` (:2029), `--finPadIn` (:2033), `--finPadX` (:2035), `--restGapY` (:2134), `--restAv` (:2136) and `--restNmF` (:2137) — each already clamped off felt.js's one R = clamp(min(W/1600,H/900),.34,1.12). Every other size in this file is a named fraction of one of those, published here as its own variable with the same `var(…, )` fallback style the two older files use. The list is short on purpose: the fewer inputs, the fewer ways a wing can disagree with the panel it is standing beside. ⚠️ NO VIEWPORT MEDIA QUERY SIZES ANYTHING HERE. Standing project rule, and both sibling files obey it. The collapse rides on the `data-ogal-fit` attribute gallery.js writes (CONTRACT-DOM §5) and on felt.js's own `body.ot-tight` (`felt.js:1932`, stage under 520px tall) — never on a width or height breakpoint of my invention. The only bare px in this file are PHYSICAL minimums (a fingertip, a readable glyph, a device hairline); each one is named where it appears and says why it must not scale. THE PALETTE IS THE TABLE'S, not the site's: felt #143440 / #0d2530, neon teal #45eded, gold #f0c04f, ink #eafcff, muted #9fb6bf, presence green #3ad29f (the same green `tables/skin.css:399` strikes the equipped tick in). ⚠️ BUT THE MATERIAL IS `.ofin-panel`'S, and that is a different question from the palette. The reference draws one felt with no card behind the screen; the live screen has a wallpaper and a bordered panel, and the owner has ruled that both stay. A case therefore has to be the same KIND OF OBJECT as the ceremony rather than a different material standing beside it — so its edge, its blur, its three shadows and its corner all come from the panel's own recipe (felt-final.css:56-62), restated as the `--ogalEdge/Cast/Bloom/Lift/Blur` tokens in section 1 and spent at `--ogalSec` of the panel's weight. The one thing that is NOT copied is how dark the panel's fill is: the owner ruled a case may not end up darker than the felt it sits on, and section 2 records why the fill inverts while the material does not. ⚠️ THERE IS NO RED IN THIS FILE, deliberately. `--red:#ff6b6b` belongs to the leave button alone on this screen (finale.css section 1), and a second red object in the gutters would compete with the one destructive action the player has. ========================================================================== */ /* ========================================================================== 1 · THE TOKENS, AND THE GATE ========================================================================== ⚠️ THE WINGS DO NOT EXIST UNTIL THE JS HAS MEASURED. `--ogalGut` is written INLINE on `.ofin` by gallery.js (CONTRACT-DOM §3) and inline always beats a stylesheet, so the fallbacks below only ever apply in the window before the first pass — and in that window the honest width is NONE. `data-ogal="on"` is the JS saying "I have measured and both wings fit"; without it nothing paints. This is also the whole of `data-ogal="off"`: one gate, two jobs, and no chance of a 300px case flashing into a 190px gutter on first paint. Declared on `.ofin` rather than on `body` so the tokens die with the stage. `.ofin` is destroyed and rebuilt wholesale on every re-render (`felt.js:1858-1874` → paintFinal), which is exactly the lifetime we want. */ .ofin{ /* ---- paint ------------------------------------------------------------ */ --ogalInk:#eafcff; /* names, values — the reference's white */ --ogalMute:#9fb6bf; /* headers, status lines, the foot */ --ogalTeal:#45eded; /* the pills and the chevron */ --ogalGold:#f0c04f; /* the champion's tint, used once */ --ogalLive:#3ad29f; /* the presence dot = skin.css:399's green */ /* ---- THE PANEL'S OWN MATERIAL, so the three boxes read as one kit ------- The reference puts everything on ONE felt with no card behind the screen. The live screen has a wallpaper AND `.ofin-panel`, and the owner has ruled that both stay — so the only way to stop a case reading as "a sidebar parked next to a modal dialog" is for the case to be made of the SAME STUFF as the panel: same edge, same pigments, same light, same shadow logic, same corner-radius token, at less weight. ⚠️ THESE ARE RESTATED HERE BECAUSE THERE IS NOTHING TO `var()`. `.ofin-panel` writes its material as LITERALS (felt-final.css:58-62) and declares no tokens for it, so a case cannot read them at run time. Naming them here with the line they came from is the next best thing: one place to re-sync, and a `git grep` from felt-final.css lands on it. The one part of the panel's material that IS a token — its radius — is read as a token below (`--ogalRad`) rather than copied. */ --ogalEdge:rgba(120,214,226,.22); /* = .ofin-panel's border :61 */ --ogalCast:rgba(0,0,0,.65); /* = its drop shadow's ink :62 */ --ogalBloom:rgba(69,237,237,.08); /* = its cyan bloom :62 */ --ogalLift:rgba(230,245,250,.1); /* = its inset top light :62 */ --ogalBlur:7px; /* = its backdrop blur :59 */ /* ⚠️ HOW MUCH OF THE PANEL'S WEIGHT A CASE IS ALLOWED TO CARRY, in one place. Criterion 2 requires the cases to stay VISIBLY SECONDARY and it already passes — matching the panel's material is not permission to match its presence. So the case takes the panel's PIGMENTS unchanged (same ink, same cyan, same light: that is what makes it the same object) and .6 of its shadow GEOMETRY (a smaller cast, a tighter bloom: that is what makes it the smaller one). Same paint, less of it — rather than a second palette mixed to look "like" the first, which is how two objects drift apart. */ --ogalSec:.6; /* ---- rhythm, all derived ---------------------------------------------- */ /* the breathing room on either side of a case, inside its gutter. .62 of the panel's own horizontal padding (`--finPadX`, felt.js:2034-2035) puts it at 22.3px at 1920 — the reference's own figure — and it collapses with the panel's padding on a small screen instead of holding a desktop number. */ --ogalPad:calc(var(--finPadX,34px) * .62); /* the case's own inner padding, and its floor. 8px is a PHYSICAL minimum: below it the 1px border and the tile's own edge start reading as one line rather than as a container holding something. */ --ogalPadIn:max(8px,calc(var(--finPadIn,26px) * .62)); --ogalGap:calc(var(--restGapY,10px) * 1.1); /* between tiles / rows */ /* ⚠️ THE CORNER IS A RELATIONSHIP TO THE PANEL'S CORNER, NOT A NUMBER OF ITS OWN. Round 1 derived this off `--finPadIn`, which is the panel's PADDING — a coincidence that happened to land near the reference's ≈22px and would have drifted the moment felt.js retuned one token and not the other. `--finRad` IS the panel's radius (felt-final.css:56, written by felt.js: 2031 as `tight ? 0 : round(26*R)`), so reading it is what makes the two corners one family for good: .78 of the panel's own curve, 22.6px against its 29px at 1920 — the reference's figure, now arrived at structurally. (`--finRad` is 0 under `ot-tight`; no wing renders there, section 6.) */ --ogalRad:calc(var(--finRad,26px) * .78); /* 22.6px at 1920 = REF */ --ogalRadIn:calc(var(--ogalRad) * .62); /* 14.0px at 1920 = REF */ /* ---- type, and the 11px floor ----------------------------------------- */ /* ⚠️ `max(11px, …)` ON EVERY ONE OF THESE, AND IT IS NOT BELT-AND-BRACES. `--restNmF` bottoms out at 10px (felt.js:2137's own clamp floor, and :2236's give-back floor is 10 too), so a name derived straight off it would ship at 10px on a landscape phone — under BAR criterion 12's stated floor. 11px is a legibility measurement, not a proportion, so like finale.css's `--finTap:44px` it deliberately does NOT scale with R. Above the floor every one of these still rides R through --restNmF. */ --ogalHF:max(11px,calc(var(--restNmF,16px) * .74)); /* the case header */ --ogalNmF:max(11px,calc(var(--restNmF,16px) * .95)); /* item / friend name */ --ogalStF:max(11px,calc(var(--restNmF,16px) * .74)); /* the status line */ --ogalPillF:max(11px,calc(var(--restNmF,16px) * .76));/* Price / Invite */ --ogalFootF:max(11px,calc(var(--restNmF,16px) * .74));/* See all / N of M */ /* ⚠️ 32px IS A FINGERTIP, NOT A PROPORTION — the same reasoning finale.css records for its own `--finTap:44px` at :283. BAR criterion 12 sets this floor for whatever survives on a landscape phone; scaling it with R would be scaling away the only thing it exists for. It is lower than finale's 44 because these are TERTIARY actions sharing a screen with a primary that has the stronger claim on the space — recorded as such rather than rounded up, exactly as finale.css:1408-1417 records its own shortfall. */ --ogalTap:32px; /* the friend portrait: a shade larger than a standings row's, because a row here carries two lines of text beside it and a 28px disc reads as a bullet rather than as a person. 24px is a second physical floor. */ --ogalAv:max(24px,calc(var(--restAv,28px) * 1.25)); /* how tall a preview box wants to be, as a fraction of the case's OWN width rather than of the viewport — so a narrow case gets a proportionate preview and the tile keeps its shape at every R. ONE value, at every size: round 1 also turned this knob down to .30 under `body.ot-tight` to keep a kit wing alive on a phone, and section 6 has since established that no wing renders there at all — so the second value went with the block that set it, and `--ogalPrevK` no longer has a state to disagree with. */ --ogalPrevK:.52; /* THE CASE'S OUTER BOUND — and it is a bound, not a height. `--finPad` is `.ofin-panel`'s own inset (felt-final.css:53-54, felt.js:2029), so `100% − 2 × --ogalInset` is exactly the box the panel is allowed to fill. Section 2 spends it as a `max-height` and never as a size. ⚠️ ROUND 1 PINNED `top` AND `bottom` TO THIS, AND THAT WAS THE DEFECT. The panel is `top:50%` + `translate(-50%,-50%)` capped at `100% − 2 × --finPad` (finale.css:1064-1068) — i.e. it is CONTENT-tall and the cap is only its ceiling. A case pinned to that ceiling is therefore taller than the panel by however much the panel did not need: 1006px against an 876px panel at 1920, which reads as a sidebar parked beside a modal rather than as a container beside the ceremony. The case is now content-tall too (`--ogalH` below), on the panel's own centre line. */ --ogalInset:var(--finPad,26px); } /* ⚠️ THE ONE EXPRESSION BOTH WINGS TAKE THEIR WIDTH FROM — this is criterion 1. `clamp()` is CONTRACT-DOM §4's, verbatim in shape; the outer `min()` is the defence. THE TRAP IT IS THERE FOR: `clamp(196px, …, 320px)` has a FLOOR, and a floor is a promise to return 196px even when the gutter is 180px wide. The case would then start at a negative inset and its inner edge would land at (gut + W)/2 — INSIDE `.ofin-panel`, which is criterion 11's one hard failure ("no case rect intersects the centre column's rect"). gallery.js is supposed to have written `data-ogal-fit="none"` long before that, but a CSS file that can only be correct while its JS is correct is a CSS file with a bug in it. So the width is additionally capped at the gutter less a 1px hairline on each side, and the case is centred in whatever gutter it actually got. The 2px is a DEVICE HAIRLINE, not a scaled space: it exists so the two rects are provably disjoint rather than tangent, because a critic's intersection test may or may not treat touching edges as an overlap and the answer must not depend on which. */ .ofin{ --ogalW:min( clamp(196px, calc(var(--ogalGut,300px) - var(--ogalPad) * 2), 320px), calc(var(--ogalGut,300px) - 2px) ); } /* ⚠️ AND THE ONE EXPRESSION BOTH WINGS TAKE THEIR HEIGHT FROM. This is the other half of criterion 1, and the answer to round 1's "the case out-frames the ceremony". THE REFERENCE draws the two cases with the same top edge and the same bottom edge AS EACH OTHER, beside a centre column — never a case that overhangs the ceremony top and bottom. `.ofin-panel` is content-tall under a cap (finale.css:1064-1068), so the only way a case can sit inside the same band is to be content-tall as well, on the same centre line, under the same cap. NOTHING BELOW IS MEASURED OR GUESSED: every term is one of this file's own tokens, so the sum rides felt.js's R exactly as its parts do, and BOTH wings take the SAME expression — which is what keeps criterion 1's top-edge and bottom-edge tests structural now that `top`/`bottom` no longer pin them. THE SUM IS THE KIT CASE'S, because it is the taller body of the two and the one the reference details tile by tile. The friends case takes the identical height and spends its slack the way section 5 already asks: below the last row, above the foot. Same for a kit case that loses a tile — CONTRACT §6 REMOVES a tile it cannot render rather than showing a hole, and the freed height lands in ONE place under the last tile, never split into two voids. */ .ofin{ /* the preview box, published once HERE so the height sum, section 4's box and the module's own `--fcw` arithmetic all read one number. */ --ogalPrevH:calc(var(--ogalW,300px) * var(--ogalPrevK)); /* the meta line is as tall as the TALLER of its two children, and that is the PILL, not the name: `1.3` of line, plus `2 × .22` of its own padding, plus its 1px border on each side. Written as a `max()` rather than assumed, because which of the two wins depends on the `--ogalNmF` / `--ogalPillF` ratio in section 1 and that ratio is allowed to change. */ --ogalMetaH:max( calc(var(--ogalNmF) * 1.35), calc(var(--ogalPillF) * 1.74 + 2px) ); /* ONE TILE: preview + the tile's own inner gap + the meta line + its padding on both sides + its 1px border on both sides. The `max(6px, …)` is section 3's own padding floor restated rather than re-derived, so the height sum and the box it is summing can never disagree about it. */ --ogalTileH:calc( var(--ogalPrevH) + var(--ogalPadIn) * .42 + var(--ogalMetaH) + max(6px,calc(var(--ogalPad) * .55)) * 2 + 2px ); /* the header: one line, the gap under it, and the 1px rule itself */ --ogalHeadH:calc(var(--ogalHF) * 1.35 + var(--ogalPadIn) * .45 + 1px); /* the footer is its 32px TARGET, never its 12px label — `.ogal-more` carries `min-height:var(--ogalTap)` and a 1px top rule (section 3). */ --ogalFootH:calc(var(--ogalTap) + 1px); /* header + three tiles + the two gaps between them + footer, then the case's own two gaps (`--ogalGap * .8` each), its padding on both sides, and its 1px border on both sides. 813px at 1920 against an 876px panel: inside the ceremony's band, and visibly secondary to it — which is what the reference asks for in words. */ --ogalH:calc( var(--ogalHeadH) + var(--ogalTileH) * 3 + var(--ogalGap) * 2 + var(--ogalFootH) + var(--ogalGap) * 1.6 + var(--ogalPadIn) * 2 + 2px ); } /* ========================================================================== 2 · THE CASE — a container on the felt, not a card ========================================================================== `.ofin` is `position:absolute;inset:0;z-index:2;overflow:hidden` (felt-final.css:37) and `.ofin-panel` is ALSO absolute, centred, at `width:var(--finW)` (felt-final.css:53-57, and finale.css:1064-1068 re-pins it to `top:50%` with a `max-height`). So the stage has two free gutters, each `(100% − var(--finW))/2` wide, and an absolutely positioned node placed there contributes NOTHING to the panel's height arithmetic. That is the only reason a whole new panel can be added to this screen at all — felt.js budgets the panel from the five children it knows about, and a sixth flow child it has never heard of is a height it cannot give back (the same lesson finale.css:2 records for its own title). ⚠️ z-index 3, AND THAT NUMBER IS LOAD-BEARING. The stage's own layers are `.ofin-card` 1 (the drifting glass), `.ofin` 2, `.ofin-rank` 3, `.ofin-panel` 4, `.ofin-exit` 5, `.ofin-det`/`.ofin-inst` 6. At 3 the wings sit above the drifting glass — so they read as objects on the felt rather than as things the glass slides over — and BELOW the panel, so that even if the geometry above were ever wrong, a wing still cannot paint over the ceremony. Belt for the width cap's braces. */ .ofin .ogal{ position:absolute; z-index:3; box-sizing:border-box; width:var(--ogalW); /* ⚠️ CENTRED ON THE PANEL'S OWN AXIS AND CONTENT-TALL — not pinned to the stage's inset, which is what made the case 1006px tall beside an 876px ceremony in round 1. `.ofin-panel` is `top:50%` + `translate(-50%,-50%)` with `max-height:100% − 2 × --finPad` (finale.css:1064-1068); the case takes the same 50% line, the same cap and its own content height (`--ogalH`), so the two objects live in one vertical band and a case can never out-frame the ceremony again. Both wings take this identical block, which is what keeps criterion 1's top-edge and bottom-edge tests structural rather than lucky. The cap still governs a short-but-not-tight stage: there the case fills it and the flex construction below does the shrinking, exactly as before. */ top:50%; bottom:auto; height:var(--ogalH); max-height:calc(100% - var(--ogalInset) * 2); transform:translateY(-50%); padding:var(--ogalPadIn); display:flex; flex-direction:column; gap:calc(var(--ogalGap) * .8); /* ---- THE SURFACE: the panel's material, at the panel's own recipe ------- `.ofin-panel` is a translucent 180° two-stop film over a 7px backdrop blur, closed by a 1px cool-cyan hairline, a wide black cast, a faint cyan bloom and a 1px inset light along its top edge (felt-final.css:58-62). Every one of those five moves is repeated below, in the same order, out of the tokens above — so the kit case, the ceremony and the friends case are one object seen three times, and a future change to the panel's recipe has ONE place to be answered here rather than five scattered literals. 🔴 THE ONE DELIBERATE DIVERGENCE, AND THE OWNER RULED IT: the FILL's DIRECTION. The panel's film DARKENS — rgba(12,22,28,.72) → rgba(8,14,19,.82) takes its interior to rgb(9,18,23), far below the ground it sits on. A case copying that literal darkness measured ~4 RGB points DARKER than the felt 60px away, against a reference that says in words "fill barely lighter than the felt", and the owner's ruling is that a case may not end up darker than its ground. So the case follows the panel's MATERIAL and not its DARKNESS: same construction, same blur, same two stops, same 180°, same "present at the lit top edge and receding downward" logic — but built from the table's own felt highlight #143440 (rgb 20,52,64), which is lighter than every tone of the nebula, so the film can only ever LIFT. Over the measured ground rgb(13,44,54) that resolves to about rgb(17,49,60) at the top and rgb(15,47,57) at the foot: barely lighter, everywhere, by construction. Falling alpha rather than the panel's rising alpha is the same optical statement with the pigment inverted — a dark film gets heavier as it recedes, a light film gets thinner. */ border-radius:var(--ogalRad); background:linear-gradient(180deg,rgba(20,52,64,.62),rgba(20,52,64,.34)); -webkit-backdrop-filter:blur(var(--ogalBlur)); backdrop-filter:blur(var(--ogalBlur)); /* THE EDGE IS THE PANEL'S EDGE, to the value. 1px is checked as 1px by criterion 2 and is a device hairline, which is why it is not derived; the colour is now `--ogalEdge` = the panel's own rgba(120,214,226,.22) rather than round 1's #45eded at .34. Still a teal border, as criterion 2 requires — and a QUIETER one than round 1 shipped, which is the right direction for an object that has to stay secondary. */ border:1px solid var(--ogalEdge); /* ⚠️ THE PANEL'S THREE SHADOWS, IN THE PANEL'S ORDER, AT `--ogalSec` OF ITS GEOMETRY — the pigments are untouched, so the light on all three boxes has one source and one colour. The bloom is the part criterion 2 measures: `.ofin-title` carries `drop-shadow(0 0 18px rgba(69,237,237,.5))` (finale.css §2) and this is 24px at .08 — a sixth of its strength, and weaker than round 1's own .10. The inset top light is taken at full value rather than scaled: it is a 1px hairline of light, the same class of thing as the border, and a hairline at 60% is just a dimmer hairline. */ box-shadow:0 calc(30px * var(--ogalSec)) calc(80px * var(--ogalSec)) var(--ogalCast), 0 0 calc(40px * var(--ogalSec)) var(--ogalBloom), inset 0 1px 0 var(--ogalLift); /* ⚠️ `overflow:hidden` IS NOT WHAT SATISFIES criterion 11's `scrollHeight == clientHeight`, AND ASSUMING IT DOES WOULD HIDE A REAL DEFECT. A clipped box still REPORTS its overflowing content in `scrollHeight`; hidden only stops you seeing it. What actually guarantees the equality is the flex construction below — every child of a case is either `flex:none` (header, footer) or shrinkable with `min-height:0` (the list), so the children's used sizes can never sum past the case. The clip is here for the second half of criterion 12 ("nothing is cut at any edge"): it keeps any single misbehaving renderer's ink inside the rounded corner rather than letting it spill onto the felt. */ overflow:hidden; } /* ⚠️ THE GATE. Nothing paints until gallery.js has measured the gutter and said so. See the note at section 1: `--ogalGut` arrives as an inline style, and before it does the fallbacks in this file are guesses. A guess that paints is worse than nothing for the ~1 frame it lives. */ .ofin .ogal{ display:none } .ofin[data-ogal="on"] .ogal{ display:flex } /* THE TWO SIDES ARE LOGICAL, NOT PHYSICAL — CONTRACT-DOM §2: the kit wing is `data-side="start"`, which is the LEFT in English and the RIGHT in Arabic, and gallery.js never positions anything. ⚠️ `inset-inline-*` MIRRORS AND `[dir=rtl]` DOES NOT. Both pages ship `` and switch language by toggling `body.ar` alone — the `dir` attribute is never written — so a `[dir=rtl]` SELECTOR matches nothing here and has already cost this project a round (finale.css:203-215 records the measurement). What IS true is that `tokens.css:16` gives `body.ar` a computed `direction:rtl`, and a LOGICAL property reads the computed direction rather than the attribute. So these two rules mirror on their own, with no Arabic copy of either, exactly as finale.css's `.ofin-bar` does. (`tokens.css:17` pins `.topbar/.cols/.grid/.pgrid` back to ltr — none of which is an ancestor of `.ofin`, which hangs off `.col`.) THE CASE IS CENTRED IN ITS OWN GUTTER rather than pinned to the stage edge: half the slack goes outside it and half between it and the panel, so the two wings are symmetric about the ceremony without either of them needing to know the other's number. */ .ofin .ogal[data-side="start"]{ inset-inline-start:calc((var(--ogalGut,300px) - var(--ogalW)) / 2); } .ofin .ogal[data-side="end"]{ inset-inline-end:calc((var(--ogalGut,300px) - var(--ogalW)) / 2); } /* THE HEADER LINE — «THE CHAMPION WORE» / «FRIENDS ONLINE». Small, uppercase, letter-spaced, muted grey-teal, at the case's reading-start corner (the reference, both cases). `text-align:start` rather than `left`, for the same reason as the insets above. ⚠️ CRITERION 2 MEASURES THIS AGAINST THE TITLE: header ≤ 0.35 × the title's size. `--finTitleF` is `--finHeadF * 2.2` (finale.css §2), which is 61.6px at 1920 against this header's 12.6px — a ratio of 0.20, comfortably inside the bar at every R because both sides ride the same R. */ .ofin .ogal-h{ flex:none; margin:0; text-align:start; text-transform:uppercase; /* a no-op in Arabic, which has no case */ font:800 var(--ogalHF)/1.35 Cairo,sans-serif; letter-spacing:.12em; color:var(--ogalMute); padding-bottom:calc(var(--ogalPadIn) * .45); border-bottom:1px solid rgba(159,182,191,.14); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ⚠️ ARABIC TAKES NO TRACKING, AND THIS IS ONE OF THE TWO PLACES A `body.ar` RULE IS GENUINELY NEEDED (logical properties cannot reach it). Arabic is cursive: `letter-spacing` inserts space between glyphs that are drawn joined, so a tracked Arabic header reads as a word coming apart. `.12em` on a 12px header is 1.4px between every letter of «ما ارتداه البطل». The Latin tracking is what makes a small uppercase line read as a label; Arabic gets the same job done by the weight and the colour alone. */ body.ar .ofin .ogal-h{ letter-spacing:normal } /* THE CHAMPION'S CASE IS TINTED, ONCE. CONTRACT-DOM §3: `data-state` on `.ogal-kit` is `champion` (online — the owner's decision of 2026-08-22, option ب: everybody sees the CHAMPION's kit) or `yours` (solo). Gold is already this screen's champion colour — the pedestal, the medal, the badge, the rim — so the header rule under the champion's case borrows it and says whose kit this is without a second word of copy. One hairline, at .3 alpha: a stronger signal here would start competing with the podium for the same meaning. */ .ofin .ogal-kit[data-state="champion"] > .ogal-h{ color:rgba(240,196,79,.82); border-bottom-color:rgba(240,196,79,.3); } /* `partial` = the champion is remote and only the avatar is knowable (CONTRACT-DOM §3). The case still renders and still says whose it is; it is simply quieter, because two of its three tiles are absent. Nothing is faked to fill them — that is criterion 8's rule for the friends case and it is the same rule here. */ .ofin .ogal-kit[data-state="partial"] > .ogal-h{ opacity:.8 } /* ========================================================================== 3 · THE KIT CASE — three tiles, each with a preview, a name and a pill ========================================================================== THE STACK IS A FLEX COLUMN AND EVERY MEMBER OF IT IS DECLARED, because that is what makes criterion 11 structural: · `.ogal-h` flex:none — never gives up a pixel · `.ogal-tiles` flex:1, min-h:0 — absorbs every pixel of slack, and is the only thing that shrinks · `.ogal-more` flex:none — the footer keeps its tap target With that, the children's used sizes cannot sum past the case at any R, in any language, at any tile count. It is felt-final.css:170-172's own lesson applied one level out: a shrinkable row in a capped list crushes itself to nothing and then reports that everything fits — so the things that must not crush are pinned, and exactly one box is allowed to absorb. ⚠️ `justify-content:flex-start`, AND ROUND 1 HAD IT AS `center` — the other half of the same defect. Centring only ever had a job because the case was pinned ~1006px tall around ~813px of tiles, and it did not remove that band of nothing: it SPLIT it, into ~125px of dead space above the first tile and ~120px below the last. Two voids are worse than one, because the reader sees the case float rather than fill. The case is content-tall now (`--ogalH`, section 1) so normally there is no slack at all; when there is — a tile the module could not render, or a case capped on a short stage — it belongs in ONE place, below the last tile and above the footer. One gap, one rhythm, top to bottom, which is the composition the reference draws. */ .ofin .ogal-tiles{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; gap:var(--ogalGap); } /* THE TILE. Radius ≈14px, a slightly lighter fill than the case, a hairline border, generous inner padding — the reference, element for element. `flex:0 1 auto` and NOT `1 1 0`: a share-the-box tile would make the tiles define themselves from whatever height the case happened to have — a preview swimming in a box rather than the reference's compact stack, and a circular argument now that the case's height is derived FROM the tile. It is the tile that states its size and the case that follows. Natural height — which is now the CASE's height (`--ogalH`, section 1), so the two agree by construction — and shrink only when the case genuinely cannot hold them, i.e. on a stage short enough for `max-height` to bite before `ot-tight` does. `min-height:0` is what lets that shrink actually happen — without it the tile's own content is its floor and the stack overflows instead. */ .ofin .ogal-tile{ flex:0 1 auto; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; gap:calc(var(--ogalPadIn) * .42); padding:max(6px,calc(var(--ogalPad) * .55)); /* 6px = a physical floor: below it the tile's border and the preview's edge become one line */ border-radius:var(--ogalRadIn); /* ⚠️ THE TILE LIFTS OFF THE CASE THE WAY THE CASE LIFTS OFF THE FELT, and for the same two reasons. The reference says a tile is "a slightly lighter fill" than the case — so it may not be a darker box, and round 1's second stop rgba(16,42,54,.5) resolved to roughly the ground's own value, which is what let a sample taken inside a case come back darker than the felt beside it. The pigment here is `--ogalLift`, the panel's OWN inset highlight (felt-final.css:62) at a third of a step and a sixth of a step: one light source for the whole kit, one direction of travel — felt → case → tile, each a little nearer the light. Same 180°, same falling alpha as the case above, so the three surfaces read as one material at three depths. */ background:linear-gradient(180deg,rgba(230,245,250,.055),rgba(230,245,250,.025)); border:1px solid rgba(159,182,191,.13); overflow:hidden; } /* hover is one more step toward the same light, plus the teal edge — never a different colour of tile, which would break the family for one interaction. */ .ofin .ogal-tile:hover{ border-color:var(--ogalEdge); background:linear-gradient(180deg,rgba(230,245,250,.085),rgba(230,245,250,.045)); } /* THE PREVIEW BOX. It is the only shrinkable part of a tile — the name and the pill are pinned below — so when the case runs out of room it is the artwork that gives, never the words that say what the thing is. The height is a fraction of the CASE'S OWN WIDTH, not of the viewport: a narrow case gets a proportionate preview and the tile keeps its shape at every R. */ .ofin .ogal-prev{ flex:1 1 auto; min-height:0; height:calc(var(--ogalW,300px) * var(--ogalPrevK)); position:relative; display:flex; align-items:center; justify-content:center; border-radius:calc(var(--ogalRadIn) * .72); overflow:hidden; } /* THE META LINE — name on the reading-start side, pill on the reading-end side. ⚠️ CRITERION 3 MEASURES THE PILL'S EDGE: "the pill's right edge is within 4px of the tile's inner right edge". `margin-inline-start:auto` on the pill is what makes that structural — the pill is pushed to the row's end edge, which IS the tile's inner end edge because the row has no padding of its own, so the delta is 0 by construction and it mirrors in Arabic for free. A `justify-content:space-between` would give the same answer with two tiles and the wrong one the moment a tile ever carries a third child. */ .ofin .ogal-meta{ flex:none; display:flex; align-items:center; gap:calc(var(--ogalPadIn) * .4); min-width:0; } .ofin .ogal-nm{ min-width:0; font:700 var(--ogalNmF)/1.35 Cairo,sans-serif; color:var(--ogalInk); text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ofin .ogal-meta > .ogal-nm{ flex:1 1 auto } /* THE PILL. Small, teal-outlined, on the row's end edge (the reference). Three things it can say, per CONTRACT-DOM §3's `data-pill`; the DEFAULT below is the outline, so a pill that arrives with no attribute at all still reads as a pill rather than as bare text. */ .ofin .ogal-pill{ flex:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; padding:calc(var(--ogalPillF) * .22) calc(var(--ogalPillF) * .66); border-radius:999px; font:700 var(--ogalPillF)/1.3 Cairo,sans-serif; font-variant-numeric:tabular-nums; /* a price is a number, and a number must not jitter */ white-space:nowrap; color:var(--ogalTeal); border:1px solid rgba(69,237,237,.45); background:rgba(69,237,237,.06); } /* `price` is the reference's own case and takes the default outline unchanged; it is written out so the attribute is never a silent no-op. */ .ofin .ogal-pill[data-pill="price"]{ color:var(--ogalTeal); border-color:rgba(69,237,237,.45); background:rgba(69,237,237,.06); } /* `own` is a STATE, not an offer — you already have it, so there is nothing to click and nothing to weigh up. Filled and quiet rather than outlined and bright, so the eye skips it and lands on the ones that are still for sale. */ .ofin .ogal-pill[data-pill="own"]{ color:#bff3f7; border-color:transparent; background:rgba(69,237,237,.16); } /* `tier` is a rarity, and rarity on this screen is already gold — the same #f0c04f the podium, the medal and the badge use. */ .ofin .ogal-pill[data-pill="tier"]{ color:var(--ogalGold); border-color:rgba(240,196,79,.5); background:rgba(240,196,79,.08); } /* THE FOOTER — `See all` in muted white with a thin chevron, centred. A `