/* ========================================================================= AANGAN · THE ROOMS FIT ON THE SCREEN (2026-08-16) ------------------------------------------------------------------------- Owner: "The tabs other than shop and games. These two feel good... I want to elimiate as much chrome window scroll as possible... Rest all pages make the chromewindow scroll." WHAT WAS ACTUALLY HAPPENING, measured before anything was changed. The document never scrolled — `.panel.page` is 92dvh with overflow:hidden and `.homebody` inside it is the scroller. What the owner was feeling is each ROOM scrolling inside that frame, and it felt like a web page because it was one: a tall painted banner, then a flat column of controls under it. At 390x844, with 780px of visible room: Home 780 100% fits Games 786 101% +6 (fixed by the chopadi, 59-chopadi.js) Group 901 116% +121 Profile 1119 143% +339 Cups 1273 163% +493 Shop 1340 172% +560 — the owner likes this one, left alone Wall 8439 1082% +7659 At 360x640 every number is worse: Group +325, Wall +7863. ONE CAUSE IN FOUR ROOMS. rooms.css reserves the banner as padding on the pane itself — 202px on Group, 212px on Wall, 222px on Cups, 262px on Profile — so a third of the screen is spent before the first control. Games and Shop feel right because in those two the ART IS THE CONTAINER: a cupboard you page sideways, a shelf with its own tabs. SO THE FIX IS STRUCTURAL, NOT A TRIM. Each of the four becomes what the almirah already is: pane ── absolute, inset:0, a flex column that cannot grow │ ├── .hr the painted room, one layer behind everything (unchanged) ├── .rf-top the room's identifying object — the brass plate, the │ mirror, the subtabs. Fixed height. Never scrolls. ├── .rf-scroll THE ONE THING THAT MOVES. flex:1, overflow-y:auto, │ overscroll-behavior:contain so it cannot chain out to │ the page behind it. └── .rf-foot the actions that must always be reachable — ＋New group, Share on WhatsApp. Fixed. Never scrolls away. Nothing keeps its old padding-top, because nothing needs it: the art is now BEHIND the content instead of above it. EVERY CONTROL KEEPS ITS ELEMENT AND ITS ID. 60-roomfit.js only moves nodes into the three boxes; no renderer in 12-home.js, 22-achieve.js or 28-tour-ui.js knows this file exists. ========================================================================= */ /* ---------------------------------------------------------------- the shell */ #homeOv #paneTour.rf, #homeOv #paneSettings.rf, #homeOv #paneGroup.rf, #homeOv #paneWall.rf{ position:absolute;inset:0;min-height:0;padding:0; display:flex;flex-direction:column;overflow:hidden} /* SHARED FRAME (owner 2026-08-24): a room fills #homeBody with inset:0, which is ABSOLUTE and so ignores #homeBody's padding — its brass plate ran UNDER the fixed #nhTop header (GROUP CODE clipped) and its foot ran UNDER #nhBar. Inset each room between the two fixed bars so the whole room sits in the clear. */ #homeOv.has-nhbar #paneTour.rf, #homeOv.has-nhbar #paneSettings.rf, #homeOv.has-nhbar #paneGroup.rf, #homeOv.has-nhbar #paneWall.rf{ top:var(--nh-toph,58px); bottom:var(--nh-navh,76px); } /* .pane.on is `display:block` in styles.css and would beat the flex above on specificity alone, so it is restated here for the four that are flex. */ #homeOv #paneTour.rf.on, #homeOv #paneSettings.rf.on, #homeOv #paneGroup.rf.on, #homeOv #paneWall.rf.on{display:flex} #homeOv #paneTour.rf:not(.on), #homeOv #paneSettings.rf:not(.on), #homeOv #paneGroup.rf:not(.on), #homeOv #paneWall.rf:not(.on){display:none} /* the painted room, now a ground rather than a header */ #homeOv .pane.rf > .hr{left:0;right:0} /* THE BANNER STOPS BEING A BANNER — but NOT by squashing it. The first attempt shortened each head band (112 / 74 / 64px) and the render showed exactly why that is wrong: the art is painted with `background-size:100% 100%`, so a band drawn for 190-210px and shown at 64 is not cropped, it is CRUSHED — the showcase's three cups came out as flat ellipses sitting on a shelf line drawn through them. So each room keeps its band at the height it was drawn for, and the content simply sits IN FRONT of it instead of below it. That is what the owner asked for in the first place: "art behind, not above". Two rooms give theirs up altogether, because they have a better identifying object now — the cork board and the glass cabinet ARE those rooms. */ #homeOv #paneGroup.rf > .hr .hr-head{height:190px} /* THE MIRROR IS SHORTER NOW (owner 2026-08-25: "shorten the profile upper part so cards, table theme and bangles can be seen on single page"). 250 → 175: at 250 the showcase needed ~540px and the room only offered ~460, so a real account had to scroll to reach its bangles. 175 frees ~75px, so the common showcase lands on one page and scroll stays as the overflow fallback. The art is REDRAWN at 175 (45-rooms.js MAKE.paneSettings hh:175), not squashed — its coordinates are all Hh*ratio, so the mirror keeps its proportions instead of crushing the way the file's own banner warning describes. */ #homeOv #paneSettings.rf > .hr .hr-head{height:175px} /* the mirror: kept, shorter, and it HOLDS the profile */ /* ...but ONLY in the profile view. Owner 2026-08-24: "The upper fixed part is not needed in the settings menu". The mirror is the dressing table, and it holds the profile — on the SETTINGS view it is 250px of furniture pushing the first real row (Chopadi) to about y=590 on a 844px screen, on a screen whose whole job is rules, subscription and switches. #paneWall and #paneTour already drop their head art the same way, so this is the room following a rule the file already had rather than a new exception. */ #homeOv #paneSettings.rf.view-settings > .hr .hr-head{display:none} /* ...and the BOX the mirror sat in has to go with it. .rf-top below is a FIXED 250px block (210px at the short breakpoint) whose only content is #myProfileCard, which the settings view already hides — so hiding the art alone left 250px of empty teak above the first row and moved the problem instead of fixing it. Measured before this line: content still started at roughly y=630. The .rf-shelf goes too; it only holds the showcase editor. */ #homeOv #paneSettings.rf.view-settings > .rf-top{display:none} #homeOv #paneSettings.rf.view-settings .rf-shelf{display:none} #homeOv #paneWall.rf > .hr .hr-head{display:none} #homeOv #paneTour.rf > .hr .hr-head{display:none} #homeOv .pane.rf > .rf-top{flex:0 0 auto;position:relative;z-index:2} #homeOv .pane.rf > .rf-scroll{flex:1;min-height:0;overflow-y:auto; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; position:relative;z-index:2;padding:10px 14px 14px} #homeOv .pane.rf > .rf-foot{flex:0 0 auto;position:relative;z-index:3; padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px)); background:linear-gradient(rgba(24,15,7,0),rgba(24,15,7,.42) 34%,rgba(24,15,7,.6))} /* the scroller's first heading should not start hard against the room's edge */ #homeOv .pane.rf > .rf-scroll > h3:first-child{margin-top:0} /* a hairline so a bounded list reads as bounded rather than as a cut-off page */ #homeOv .pane.rf > .rf-scroll::after{content:"";display:block;height:2px} /* ====================== GROUP · the baithak ============================== */ /* the group's name and code on a brass plate, and — right under it — "Share on WhatsApp" as a full-width RECTANGLE (owner 2026-08-25: "Make Share on WhatsApp box a rectangle and place it below Group Name/Group Code box"). Both ride the fixed head, so the one action that grows the baithak is always in view while the member list scrolls under it. */ /* ONE GUTTER FOR THE GROUP ROOM'S TWO BUTTONS. Share-on-WhatsApp lives in .rf-top and +New Group lives in .rf-scroll, and those two boxes are inset by DIFFERENT amounts — which is why the pill came out short again on 2026-09-05 despite already saying width:100%. It was sized correctly; its containing block was not: #waShareBtn in .rf-top padding 12 (10 under 380px) -> pane - 24 #newGroupPill in .rf-scroll margin 8 + padding 10 = 18 -> pane - 36 Measured: wa 340 / pill 324 at 360, wa 366 / pill 354 at 390, inset 8 and 6. A flat -8px "fix" would have matched at 360 and missed at 390 by four pixels, which is exactly the kind of miss that looks fine and fails the check. So name the gutter once and let BOTH sides derive from it — the pill cancels .rf-scroll's own 18px inset and re-applies the same gutter the header uses, so the two agree at every width and in every language. Guarded by .claude/mp/group-buttons.js. */ #homeOv #paneGroup.rf{--grp-gutter:12px;--grp-scroll-inset:18px} #homeOv #paneGroup.rf > .rf-top{padding:10px var(--grp-gutter) 10px;display:flex;flex-direction:column;gap:8px} #homeOv #paneGroup.rf .selgame{margin:0} #homeOv #paneGroup.rf > .rf-top #waShareBtn{width:100%;margin:0;min-height:0;padding:11px 14px} /* the head art is pale and the room's text is pale chalk, so where they now overlap the list gets its own ground — the takhat the mockup put it on */ #homeOv #paneGroup.rf > .rf-scroll{margin:0 8px 0;padding:10px 10px 12px; border-radius:9px 9px 0 0; /* the takhat is TEAK, not slate. This was bottle green (rgba(38,67,62,…)), one of fourteen greens in this stylesheet and the single clearest reason the baithak read as foreign next to the almirah — nani's house is plaster, teak, brass and oxide. Same three-stop shape, same job (a darker ground so pale chalk text stays legible over the pale head art), in the wood the rest of the app is built from. (owner 2026-08-24) NOW OPAQUE, and it stops going black (owner 2026-09-10: "get a better background for it"). Two faults in the old alpha stack: what the room painted BEHIND it bled through — that is how the sofa's red band ended up across the names — and the third stop, .93 over a dark room, landed at #2b1a0b, so a list long enough to fill the pane faded into a hole at the bottom. One warm teak wall, opaque, even from top to bottom, with the distemper grain drawn INTO it (a 3px repeating wash, so it is still a painted wall rather than a flat swatch) and a hairline of light along the top edge where the room meets it. */ background-color:#4a2e15; background-image: repeating-linear-gradient(90deg,rgba(255,238,206,.030) 0 1px,rgba(0,0,0,0) 1px 3px), linear-gradient(rgba(255,235,196,.09),rgba(255,235,196,0) 90px), linear-gradient(#4d3017,#432a12); box-shadow:inset 0 1px 0 rgba(255,225,175,.20)} /* THE FOUR LISTS BECOME FOUR SEGMENTS OF ONE SCROLLER. The room carries Members, Your groups, Online now and Recent results, one under the other — 699px of list on a 780px screen, and that is before a group has more than six people in it. They are the same four lists, shown one at a time; the headings they used to need are now the segment names, so nothing was written that was not already there. */ /* 11px AND 44px, both floors, and both were caught by .claude/mp/a11y.js rather than by eye: the first pass set these at 10.5px (9.5px on a 360) and min-height:38, which put four new strings under this app's own text floor and four new controls under the tap-target minimum. Four names in five scripts do not fit one line at 11px on a 360px phone, so they WRAP — two short lines inside a 44px button, rather than one unreadable line. */ /* The baithak's painted wall clock + calendar sat high in the head layer and poked ABOVE the board's top edge, into the gap behind the segment tab bar (owner 2026-08-20: "this should not overlap with background ... so it will look clean"). Clip the head to the band the group-code bar already covers, so nothing paints down into the tab zone — the tabs now sit on a clean board edge. (Reversible: the decorations belong lower on the wall; repositioning them there instead of clipping is the fuller fix, in 45-rooms.js.) */ #homeOv #paneGroup.rf .hr-head{clip-path:inset(0 0 112px 0)} #homeOv #paneGroup.rf .rf-seg{display:flex;gap:5px;margin:0 0 9px} /* font matches the main menu, not a plain sans (owner 2026-08-20: "the font should be matching the main menu fonts"). The courtyard labels + Wall subtabs are --ck-ui, uppercase, letter-spaced; the segment tabs now read the same. */ #homeOv #paneGroup.rf .rf-seg button{flex:1;min-width:0;min-height:44px;padding:5px 3px; border-radius:14px;cursor:pointer;font-family:var(--ck-ui);font-weight:800; text-transform:uppercase;letter-spacing:.3px;font-size:11px;line-height:1.15; /* the ground goes DARKER rather than the text brighter — the unselected buttons measured 3.80-3.86:1 with a 10% tint over the mid-green wall, and a warm house does not answer that with a whiter label */ color:var(--ang-ink-pale);background:rgba(58,36,16,.5);border:1px solid rgba(255,235,200,.24); white-space:normal;word-break:break-word;overflow:hidden} #homeOv #paneGroup.rf .rf-seg button.on{background:linear-gradient(#f0c65f,#d29e30); color:#3a2708;font-weight:600;border-color:#b4832a} #homeOv #paneGroup.rf .rf-seg button:focus-visible{outline:3px solid var(--gold);outline-offset:2px} /* the segment that is not showing is not in the layout at all */ #homeOv #paneGroup.rf .rf-off{display:none !important} /* THE ACTIONS RIDE THE FOOT OF THE SCROLL now, not a fixed bar of three equal squares (owner 2026-08-25: the boxes were "too big"). Full-width compact rectangles at the very bottom of the takhat — you reach them by scrolling past the members, and ＋New group / Leave / Delete come last. */ /* width:auto SHRINK-WRAPPED IT — measured 198px in English, 139px in Hindi, i.e. the pill collapsed to its own text and the length now varied by LANGUAGE, which is the exact fault this rule exists to prevent. The margins were right (left offset went to 0 in all five); only the width was wrong. So keep 100% of the inner box and add back the two insets the margins cancel, which lands on #waShareBtn's column at both widths. */ /* TWO actions, not one pill (owner 2026-09-10: "give different options for Create New Group and Join A Group, the box and fonts should match with the Leave Group text box"). Both are .bigbtn now and share the Leave/Delete rule below, so all four boxes are one family; only the top margin differs, to set the pair off from the list above them. */ #homeOv #paneGroup.rf > .rf-scroll #newGroupPill{margin-top:15px} #homeOv #paneGroup.rf > .rf-scroll #joinGroupPill{margin-top:8px} /* CENTRE the label (owner 2026-08-26). .bigbtn is a left-aligned flex row (it was built for an icon + text), so Leave/Delete read ragged-left next to the centred New-group pill. Centre the row and its text so all three align. */ #homeOv #paneGroup.rf > .rf-scroll #newGroupPill, #homeOv #paneGroup.rf > .rf-scroll #joinGroupPill, #homeOv #paneGroup.rf > .rf-scroll #leaveGroupBtn, #homeOv #paneGroup.rf > .rf-scroll #deleteGroupBtn{width:100%;margin-left:0;margin-right:0;margin-bottom:0;min-height:0;padding:11px 14px; justify-content:center;text-align:center} #homeOv #paneGroup.rf > .rf-scroll #newGroupPill > span, #homeOv #paneGroup.rf > .rf-scroll #joinGroupPill > span, #homeOv #paneGroup.rf > .rf-scroll #leaveGroupBtn > span, #homeOv #paneGroup.rf > .rf-scroll #deleteGroupBtn > span{text-align:center;width:auto;flex:0 1 auto} /* one half of the fold-out at a time — Create opens the name field, Join opens the code field; the other's heading and form are not there to scroll past. BOTH headings go: they were written for the two-halves-at-once layout, so the join one reads "OR join with a code" — an "or" with nothing before it now. The button you just tapped says which half this is. */ #newGroupZone.only-create > #joinGroupH, #newGroupZone.only-create > #gJoinForm, #newGroupZone.only-join > #createGroupH, #newGroupZone.only-join > #gCreateForm, #newGroupZone.only-create > #createGroupH, #newGroupZone.only-join > #joinGroupH{display:none !important} #newGroupZone.only-create > #gCreateForm, #newGroupZone.only-join > #gJoinForm{margin-top:8px} /* #newGroupPill keeps two stray .galipill rules (a display face in chalk-sections, block/width in styles.css). Neither shows: the label lives in its own , which .bigbtn sets to Fraunces 700/15.5 — the same hand Leave group uses, measured. Left alone on purpose; those rules are still right for every other .galipill. */ /* ====================== PROFILE · the dressing table ===================== */ /* THE MIRROR WAS EMPTY. 250px of painted glass with the profile card sitting in a list below it — so the one object that identifies the room showed nothing, and the room still needed 1119px. The card moves INTO the glass, which is what a mirror is for, and 250px stops being a cost. */ #homeOv #paneSettings.rf > .rf-top{height:175px;display:flex;flex-direction:column; align-items:center;justify-content:center;padding:12px 24px 44px} /* !important, and it is earned: .bigbtn is styled in styles.css AND again in chalk-sections.css, and the render showed the card still wearing its tan panel in the middle of the mirror — a button-shaped box floating in glass. */ #homeOv #paneSettings.rf > .rf-top #myProfileCard{ background:transparent !important;border:0 !important;box-shadow:none !important; padding:0 !important;width:auto;max-width:100%; flex-direction:column;gap:7px;text-align:center;color:#2f4741} #homeOv #paneSettings.rf > .rf-top #myProfileCard .hh-av{ width:46px !important;height:46px !important;flex:0 0 46px !important;font-size:20px !important; border:3px solid rgba(255,250,235,.75);box-shadow:0 5px 14px rgba(40,60,55,.35)} #homeOv #paneSettings.rf > .rf-top #myProfileCard .bt{ font-family:var(--serif);font-size:18px;color:#2f4741} #homeOv #paneSettings.rf > .rf-top #myProfileCard .bs{ /* on the mirror's glass this measured 3.6:1 — the glass is a mid green-grey, so the line under your name needs real ink, not a tint of it */ font-size:11px;color:#233b35;letter-spacing:.4px} /* what you are showing off is laid ON the table, in front of the glass */ /* -70px put "Showing off" and "Card decks" straight across the mantel and its scalloped valance in the render. The objects belong just BELOW the shelf edge, not on top of it. */ #homeOv #paneSettings.rf .rf-shelf{position:relative;z-index:3;margin:6px 0 0; padding:0 12px 10px} #homeOv #paneSettings.rf .rf-shelf #showEditor{margin:0} #homeOv #paneSettings.rf .rf-shelf h3{margin:0 0 4px;font-size:11px;letter-spacing:1px; text-transform:uppercase;color:rgba(255,240,210,.72);text-align:center} /* ====================== WALL · the notice board ========================== */ #homeOv #paneWall.rf > .rf-top{padding:9px 12px 7px} #homeOv #paneWall.rf .subtabs{margin:0} /* the cork, so a bounded list reads as a board rather than as a cut page */ /* A DARK BOARD, and that is a correction. The first pass made the cork the pale colour a real notice board is — and the render showed every row of the Wall in pale chalk on pale cork, unreadable. The rows are drawn by 22-achieve.js for a dark room and recolouring all of them would be a second place for that styling to live. So the board is dark instead. */ /* margin-top 9, not 0: the frame is drawn as a 9px box-shadow ring OUTSIDE the scroller's box, and at margin-top:0 it painted straight across the bottom edge of STATS / ACHIEVEMENTS / BADGES. */ /* THE FRAME IS TEAK, NOT TEAL. Owner 2026-08-25: "in wall the edges are in bluish color, fix that thing." The cork board was ringed in #2f6f74 — a green-blue that is the one cold colour in a warm house and reads as foreign the same way the baithak's bottle-green takhat did. Same wood the Cups cabinet is framed in (#5f3c16), so the two shelf-rooms match. */ #homeOv #paneWall.rf > .rf-scroll{margin:9px 10px 10px;padding:10px 9px 12px; border-radius:4px;background:linear-gradient(#4a3a22,#3a2c18); box-shadow:inset 0 2px 12px rgba(0,0,0,.5),0 0 0 9px #5f3c16,0 0 0 10px rgba(255,246,225,.16), 0 8px 20px rgba(0,0,0,.35)} #homeOv #paneWall.rf > .rf-scroll::before{content:"";position:absolute;inset:0;opacity:.35; pointer-events:none; background-image:radial-gradient(circle,rgba(255,235,195,.20) 1.4px,transparent 1.5px), radial-gradient(circle,rgba(0,0,0,.30) 1.1px,transparent 1.2px); background-size:11px 11px,7px 7px} /* ====================== CUPS · the showcase ============================== */ /* the cabinet becomes the room: the content sits behind glass instead of under a 222px picture of a cabinet */ #homeOv #paneTour.rf > .rf-scroll{margin:8px 10px 10px;padding:11px 10px 14px; border-radius:4px; background:linear-gradient(160deg,rgba(214,232,238,.13),rgba(150,190,205,.05) 45%,rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(226,240,246,.20),0 0 0 8px #5f3c16, 0 0 0 9px rgba(255,225,175,.25),0 10px 24px rgba(0,0,0,.45)} /* one sheen of glass falling across the front, the same gesture rooms.css already uses on this room's body */ #homeOv #paneTour.rf > .rf-scroll::before{content:"";position:absolute;left:-25%;top:-10%; width:52%;height:130%;transform:rotate(17deg);pointer-events:none; background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,0))} /* ---------------------------------------------------------------- phones */ @media (max-width:380px){ #homeOv .pane.rf > .rf-scroll{padding:9px 10px 12px} #homeOv .pane.rf > .rf-foot{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))} /* the narrow phone tightens the gutter; the pill follows automatically because both sides read --grp-gutter (see the note at .rf-top above) */ #homeOv #paneGroup.rf{--grp-gutter:10px} #homeOv #paneGroup.rf > .rf-top{padding:8px var(--grp-gutter) 7px} #homeOv #paneGroup.rf .rf-seg button{padding:4px 2px;letter-spacing:-.2px} #homeOv #paneSettings.rf > .rf-top{height:158px;padding:10px 20px 40px} #homeOv #paneSettings.rf > .hr .hr-head{height:158px} #homeOv #paneSettings.rf .rf-shelf{margin-top:4px} #homeOv #paneWall.rf > .rf-scroll{margin:8px 8px 8px;box-shadow:inset 0 2px 10px rgba(90,60,20,.35), 0 0 0 7px #5f3c16,0 0 0 8px rgba(255,246,225,.16),0 8px 20px rgba(0,0,0,.35)} #homeOv #paneTour.rf > .rf-scroll{margin:6px 8px 8px} } /* ---------- CUPS: the cards are LIGHT now, so the text has to be INK -------- Owner 2026-08-16: "I want readability to be improved and color crisp everywhere", with a screenshot of this room. Measured before touching it: "A marble prize pool — the higher you finish…" 1.42:1 "A trophy for every championship you win." 1.46:1 "The Champion's Gold card deck — win once…" 1.52:1 "Predict you'll win — deliver it for +25" 1.19:1 Under 3:1 is not "a bit low", it is not being read. The cause is the same one that hit the Wall's cork board: these strings are `--ink` (cream) and `--muted` (pale tan), which are correct on a dark card and invisible the moment the card became a light tan panel. The gate is .claude/mp/contrast.js, which samples the RENDERED PIXELS behind each string rather than guessing from the DOM. */ #homeOv #paneTour.rf .tourrewards li, #homeOv #paneTour.rf .tourrewards > div{color:#3b2a14} #homeOv #paneTour.rf .tourcall .tcall-tx span, #homeOv #paneTour.rf .tourmine .tm-skin, #homeOv #paneTour.rf .tourhall-empty{color:#7a5a2c} #homeOv #paneTour.rf .tourhero-s{color:rgba(253,248,236,.8)} /* THE CUP ABOVE "TOURNAMENTS" IS GOLD, not ink. Owner 2026-08-25: "the Trophy symbol above the tournament is not visible, make it in golden color." The chalk cup icon is stroked #3a2a14 by tin.css line 205 — an !important rule that paints every plaque icon in dark ink, which is right on the cream shop tiles it was written for and invisible here, where the cup sits alone on the dark cabinet head. Out-specify it (2 ids + .rf) and paint the cabinet's own gold. */ #homeOv #paneTour.rf .tourhero-ic[data-ck-ico] svg{stroke:#f0c65f !important;stroke-width:1.7 !important} /* YOUR TROPHIES: gold cup, black count (owner 2026-08-26). The cup was the same tin.css dark-ink casualty as the head cup; the "0" was --gold (orange) and read as a warning on the tan card. Gold cup with a dark rim for definition on the light card, and an ink count. */ #homeOv #paneTour.rf .tm-cupic[data-ck-ico] svg, #homeOv #paneTour.rf .tm-cupic svg{stroke:#c9a44a !important;stroke-width:1.8 !important; fill:#f4e2a8 !important;paint-order:stroke fill} #homeOv #paneTour.rf .tm-cup b{color:#2c1c08 !important} /* NOTE (owner 2026-08-26 "marbles color not matching header"): the tour lakhoti piles render muddy while the header's are bright glass, though both are the same #lakPileSym symbol with the same fixed gradients. Reproduced: a fresh copy of the symbol is bright in a plain div but dark the moment it sits inside .tourrewards — independent of size, fill, colour, drop-shadow, the card's overflow clip, or a forced compositing layer (all tried, none moved it). It is a Chromium paint bug around the marble's internal url(#lakBlur) filter in this nesting, and the real fix is to re-author the marble art without that inner filter. Deferred rather than shipped as a hack. */ /* THE BUG TAB. position:fixed at left:0, top:50% — the overlap scan found it sitting across a game's name plaque on the almirah in all five languages at every phone size, and across "＋ New group" and "Share on WhatsApp" in the baithak. It hides while the house is open, where "Report a problem" is a row in the Profile drawer anyway, and stays exactly where it is during a hand — the case it was drawn for. */ body.rf-room #bugFab{display:none} /* ===== ROOM FEET CLEAR THE PAINTED NAV (owner 2026-08-24) ================= #nhBar is a fixed strip and a sibling of the panes, so a .rf room — a flex column sized to the whole overlay — laid its foot straight underneath it. Measured at 390x844 in the baithak: nav top 768, #waShareBtn bottom 815, #newGroupPill bottom 815, .rf-foot bottom 824. Fifty-six pixels of the two buttons a groupless player most needs were under the wood. --nh-navh is the bar's MEASURED height (63-newhome.js sets it); 76px is the drawn height and only a fallback. .has-nhbar is put on #homeOv when the bar mounts, so the live tile home is untouched by this rule. */ #homeOv.has-nhbar .pane.rf > .rf-foot{ padding-bottom:calc(9px + var(--nh-navh,76px) + env(safe-area-inset-bottom,0px)); } /* a room with no foot still must not end under the bar */ #homeOv.has-nhbar .pane.rf > .rf-scroll:last-child{ padding-bottom:calc(14px + var(--nh-navh,76px)); }