/* ========================================================================= AANGAN · THE TABLE, IN CHALK (rebuild phase 5) ------------------------------------------------------------------------- Option A, "Chalk on Weave" (owner 2026-07-28). The korai mat stops being a panel floating on a dark floor and becomes the BACKGROUND OF THE WHOLE PLAYING SCREEN. Everything the game draws on top — score, trump, turn, the tens — is then written straight onto that weave in chalk: no chips, no boxes, no containers. The mat is the slate. How the full bleed is done, and why it is done this way: the carpet recipe is repeated here onto `body.playing` instead of moving `.table` out of the layout. `.table` keeps its exact place in the flex flow, so every seat coordinate, trick position and deal animation still resolves against the same box it always did — no JS changes, and nothing can drift. `.table` simply stops painting itself. Because every board game (kodi, rummy, sevens, bluff, aapo, teen patti) mounts its own wrapper INSIDE `#table`, they all land on the carpet for free. Scoped entirely to `body.playing`, so the menus are untouched. Load order: styles.css → chalk.css → chalk-home.css → chalk-sections.css → chalk-bridge.css → chalk-table.css ========================================================================= */ /* ===================== THE CARPET ===================== */ /* Same recipe as `.table` in styles.css, lifted onto the page. Keep the two in step: if a mat colourway changes there, it changes here. */ /* THIS IS THE FLOOR, NOT A SECOND CARPET (owner 2026-08-03: "I can see two carpets on the game floor. That is not intended.") It used to be a carpet, and correctly so: the 2026-07-28 "Chalk on Weave" pass lifted the korai recipe from `.table` onto the page so the mat filled the whole screen, and `.table` stopped painting itself. The note above still says "Keep the two in step." They went out of step on 2026-08-02, when the six drawn carpets landed as a CANVAS inside #table (js/48-weave.js). From then on the screen carried two different textiles at once — this striped korai recipe edge to edge, and a completely different drawn carpet on top of it. A rug on a rug, and the two never even matched, because the canvas is picked from the shop while these band tokens are a fixed fallback palette. The canvas is the carpet, and since 2026-08-03 it is FULL SCREEN — it mounts on at position:fixed, z-index:-1 (js/48-weave.js), so the drawn carpet IS the playing screen and #table is nothing but the box the seats are measured against. The owner asked for that directly: "Make the carpet fullscreen." So this rule paints no pattern at all any more. It is only the ground the canvas sits on — what shows for the frame before the canvas lands, behind a carpet id that has no spec, and under the negative z-index. AND THAT GROUND IS NOW THE MAIN MENU'S OWN (owner 2026-08-04: "after starting the game, the background is still showing the old Brown Tile Carpet. Show the main menu background instead of that tiles.") It was `linear-gradient(#1b140d, #120c07)` — a flat dark brown chosen so that nothing behind the carpet could read as a second textile. The reasoning was sound and the result was not: on a screen where the canvas does not cover (a carpet id with no spec, the frame before it lands, or any device where the z-index:-1 canvas ends up behind body's own background) the player is looking at a brown nobody chose, and it looks like a leftover from the version before. The fix is to declare no background here at all, so `body`'s own — the warm marigold-glow ground the main menu is on — shows through instead. The original worry does not apply to it: that ground is a wash and a 45 degree hairline, not a weave, so it cannot read as a rug under a rug. When the canvas does cover, this changes nothing whatsoever, which is exactly the property you want in a fallback. Do not put a colour back here without checking what a player sees when the carpet has not painted. */ body.playing{ background-attachment:fixed; } /* the mat panel stops painting itself — it is now just the field the seats are measured against. Its binding, stitch and lamp-pool all belong to the page now, so they go. */ body.playing .table{ background:none; border:0; border-radius:0; box-shadow:none; margin:0; min-height:0; /* the flex row owns the height now */ } body.playing .table::before, body.playing .table::after{content:none} body.playing #matTrim{display:none} /* the wrap loses its side gutters so nothing reads as a frame over the weave */ body.playing .wrap{padding-left:calc(9px + env(safe-area-inset-left)); padding-right:calc(9px + env(safe-area-inset-right))} /* the woven brand sat exactly where the trick pile lands — a straight breach of the no-overlap rule. On the full-bleed carpet it moves up out of the drop zone and drops back, so the weave still carries the mark without ever sitting under a card. */ body.playing #matBrand{top:26%;opacity:.34} body.playing #matBrand .mb-sub{display:none} /* ===================== CHALK ON THE WEAVE ===================== */ /* One shadow does all the legibility work: chalk over a busy amber weave needs a dark halo or it goes soft. Everything written on the mat wears it. */ body.playing .board, body.playing .tensrow, body.playing .handlabel, body.playing .seat .nm, body.playing .seat .meta{text-shadow:var(--ck-shadow)} /* ---- score line: written, not chipped ---- */ body.playing .board{ min-height:0;margin:0 2px 6px;gap:6px; font-family:var(--ck-disp);color:var(--ck-chalk); border-bottom:2px solid var(--ck-chalk-4);padding-bottom:6px; } body.playing .teambox{font-family:var(--ck-disp);font-size:13.5px;font-weight:600;color:var(--ck-chalk)} body.playing .teambox b{font-family:var(--ck-disp);font-size:19px;font-weight:700;margin-left:2px} body.playing .teambox .dot{width:7px;height:7px} /* the pills lose their containers and become chalk numbers */ body.playing .ppill{ background:none;border:0;padding:2px 4px;gap:5px; font-family:var(--ck-disp);font-size:12.5px;color:var(--ck-chalk-2)} body.playing .ppill b{font-family:var(--ck-disp);font-size:17px;font-weight:700;color:var(--ck-chalk)} body.playing .ppill.me b{color:var(--ck-yellow)} body.playing .ppill.me{border:0} body.playing .ppill .dt{width:7px;height:7px} body.playing .ppill.done{opacity:.5} body.playing .ppill.over b{color:var(--ck-peach)} /* trump is a chalk note, not a chip */ body.playing .trumpchip{ background:none;border:0;padding:2px 4px; font-family:var(--ck-ui);font-size:var(--ck-t-xs);font-weight:800;letter-spacing:2px; text-transform:uppercase;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} /* ---- the tens: chalk glyphs, lit when captured ---- */ /* inline-flex, not the grid the coin used — otherwise the suit drops onto a second row and reads as "10" sitting above "♠" */ /* Under the ser, clear of it, and legible on the weave. The board above carries its own bottom rule, so this only needs room to breathe under it. */ body.playing .tensrow{gap:14px;margin:5px 0 6px;flex-wrap:nowrap;min-height:22px} body.playing .coin{ width:auto;height:auto;border:0;border-radius:0;background:none; display:inline-flex;align-items:baseline;gap:1px; font-family:var(--ck-disp);font-size:16px;font-weight:700; color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} body.playing .coin .s{font-size:15px;opacity:1} /* WHOSE TEN IT IS (owner 2026-08-04: "show which team taken the tens"). Colour alone was already the signal and it is the app's own convention — the score row above marks Your Team with a gold dot and Opponents with a coral one, and the seats use the same two. But an uncaptured ten and a captured one were only a shade apart on a busy weave, so the two states are now clearly different things: a ten still out there is faint and thin, a ten that has been taken is full weight in its team's colour with a soft halo behind it. */ /* A TAKEN TEN IS A CHIP, NOT TINTED CHALK. Owner 2026-08-13: "Who scored which mindi is not properly visible... Use loud colours." The note above was right that colour is the convention and wrong that colour was enough. The two colours were --ck-yellow #f8e4a0 and --ck-pink #f6bfd1: pastels a few points apart in lightness, told apart by hue alone, painted as TEXT on a dark weave at 16px with a soft halo. Hue-only at that size is the first thing to go for the eyes this game is for. Now three things change at once when a ten is taken, so it reads before it is read: it gains a SOLID CHIP of its team's colour, the ink flips to dark ON that chip, and the two team colours are marigold and peacock rather than two pastels (see --team-a / --team-b in styles.css). An untaken ten stays what it was — faint, thin, unfilled — so the two states are different OBJECTS rather than two shades of one. The chip is padding and a radius on the existing inline-flex box, so nothing moves: the row keeps its nowrap and its 22px min-height. */ body.playing .coin{opacity:.42;font-weight:600} body.playing .coin.team0,body.playing .coin.team1{ opacity:1;font-weight:800; padding:1px 8px 2px;border-radius:999px; text-shadow:none; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 2px 5px rgba(6,20,12,.45)} body.playing .coin.team0{color:var(--team-a-ink); background:linear-gradient(180deg,#ffc45c 0%,var(--team-a) 55%,var(--team-a-deep) 100%)} body.playing .coin.team1{color:var(--team-b-ink); background:linear-gradient(180deg,#8fdcff 0%,var(--team-b) 55%,var(--team-b-deep) 100%)} /* ---- turn: a name with a chalk rule under it, centred on the mat ---- */ /* THE TURN BOX IS THE WIDTH OF THE HUD BOX. Owner 2026-08-08: "the turn box edges should match the HUD box width." It measured dead centre already — bar 132..258 against a plate at 55..335, both centred on 195, 0px off — so what read as misaligned was never the centring. It was a narrow pill floating under a much wider plate: two boxes stacked with nothing agreeing but their midpoints. The two now share one inset. #hud sits --slate-in inside .wrap and this bar sits inside #table, and those two boxes have the same outer edge, so the same --slate-in on both puts the edges on the same vertical lines. One variable drives both; there is no second number to keep in step. */ body.playing .turnbar{ left:var(--slate-in,11px);right:var(--slate-in,11px);top:4px;transform:none; width:auto;max-width:none;justify-content:center; padding:2px 6px 5px;border-radius:0; background:none;border:0;box-shadow:none; font-family:var(--ck-disp);font-size:14px;color:var(--ck-chalk); text-shadow:var(--ck-shadow);border-bottom:2.5px solid var(--ck-chalk-3)} body.playing .turnbar.show{display:flex} /* PILLS TURN LINE, RELOCATED ABOVE THE MAT (06-render.js hudMode, 2026-09-03). In the mat it sat at top:4px, centred — right on top of the dead-centre top seat that even player counts (Kachuful 4 & 6, 7-8 at 2) always have, in a gap too small on a real phone to hold it, so it used to tuck into the corner and read as "not aligned with the HUD box". Out of the ring it can't collide with any seat, and the same --slate-in inset as the plate lines its edges up with the HUD at every count and every height. Static block → the mat below simply starts one line lower. */ body.playing .turnbar.tb-strip{ position:static;z-index:auto;transform:none; left:auto;right:auto;top:auto;width:auto;max-width:none; margin:1px var(--slate-in,11px) 3px} body.playing .turnbar .tb-dot{display:none} body.playing .turnbar .tb-now{font-weight:600} body.playing .turnbar .tb-now.you{color:var(--ck-yellow)} body.playing .turnbar .tb-next{font-family:var(--ck-ui);font-size:11px;color:var(--ck-chalk-3)} body.playing .turnbar .tb-next b{color:var(--ck-chalk-2);font-weight:700} /* ---- seats: names in chalk; the avatar is a real object and keeps its own art ---- */ body.playing .seat .nm{font-family:var(--ck-disp);font-size:12.5px;font-weight:600;color:var(--ck-chalk)} body.playing .seat.active .nm{color:var(--ck-yellow)} body.playing .seat .meta{font-family:var(--ck-ui);color:var(--ck-chalk-2)} body.playing .seat.active .av{ box-shadow:0 0 0 3px var(--ck-yellow),0 0 24px 5px rgba(248,228,160,.85)} body.playing .tgtchip{ background:none;border:0;padding:0; font-family:var(--ck-disp);font-size:12px;font-weight:700;color:var(--ck-chalk-2); text-shadow:var(--ck-shadow)} body.playing .tgtchip.done{color:var(--ck-green)} body.playing .tgtchip.over{color:var(--ck-peach)} /* ---- the hand's own label ---- */ body.playing .handlabel{ font-family:var(--ck-disp);font-size:13px;font-weight:600;color:var(--ck-chalk-2)} /* ===================== HEADER ===================== */ /* One row of chalk-outlined controls instead of two rows of filled pills. */ body.playing header{gap:5px;padding-bottom:2px} body.playing header .brand{display:none} /* the mat already carries the mark */ body.playing header .tools{gap:5px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto} body.playing header .tools .btn{ padding:4px 10px;font-size:11.5px;font-weight:700;border-radius:999px; background:none;border:1.5px solid var(--ck-chalk-4);color:var(--ck-chalk-2); text-shadow:var(--ck-shadow);box-shadow:none} body.playing header .tools .btn:hover{border-color:var(--ck-chalk-3);color:var(--ck-chalk)} /* The five language buttons were the reason the toolbar needed a second row. Nobody switches language mid-hand, and the chalk shell already moved the picker into Profile on the home screen — so it leaves the table too, and the remaining controls fit on one line. */ body.playing header .langsel{display:none} /* ===================== CARDS STAY REAL ===================== */ /* Chalk's founding rule: only real objects keep their own material. The cards, the deck backs and the diya are real, so nothing above touches them — they just gain a little more lift now that they sit on an open weave. */ body.playing .play .card, body.playing .hcard .card{box-shadow:0 6px 14px rgba(30,16,4,.42)} /* ===================== QUIETER MAT FURNITURE ===================== */ /* On a full-bleed carpet the diya and marble are decoration on a much larger field — they step back so the cards stay the subject. */ body.playing #matDiya{opacity:.8} body.playing #matMarble{opacity:.85} @media (prefers-reduced-motion:reduce){ body.playing{background-attachment:scroll} } /* ===== THE STATS READ ON THE CARPET, NOT ON ITS BORDER ===== Owner 2026-08-03, in the same breath as "make the carpet fullscreen": "If you have to provide a background based UI to show the stats or any live information, do it then." Going fullscreen put the carpet's ornamented border band along the SCREEN edge, and the score row landed straight on it — "Your Team · 0" over a floral trellis, with the corner rosette colliding with the score itself. Unreadable, and it broke the no-overlap rule the moment the carpet moved. So the live information is inset into the carpet's FIELD, which is the calm part of every colourway by design. --mat-fi is published by js/48-weave.js from the same fieldInset() the carpet is drawn with — not a copy of the number — so a mat with a wider band pushes the stats in by exactly that much. TOP ONLY, deliberately. The hand at the bottom is CARDS, and cards lying over the carpet's edge is what cards do on a real mat; insetting them too would cost ~44px of the one axis a phone cannot spare. Text gets the field, objects may touch the border. */ body.playing .wrap{ padding-top:calc(var(--mat-fi, 12px) + env(safe-area-inset-top)); padding-left:calc(var(--mat-fi, 9px) + env(safe-area-inset-left)); padding-right:calc(var(--mat-fi, 9px) + env(safe-area-inset-right)); } /* ...but the HAND breaks back out. Cards are objects, and a card lying over the carpet's edge is what cards do on a real mat. Insetting them as well would cost ~88px of width at 390 — the one axis a thirteen-card fan cannot spare — for no readability gain, since a card carries its own paper behind its index. */ body.playing .handwrap{ margin-left:calc(-1 * var(--mat-fi, 9px)); margin-right:calc(-1 * var(--mat-fi, 9px)); } /* the score/trump row and the turn line are the two pieces of live text that sit highest — give them a quiet reading strip so they hold up over a busy field too, without becoming the chips the chalk direction removed */ body.playing header, body.playing .turnbar{ text-shadow:0 1px 3px rgba(8,4,0,.85), 0 0 10px rgba(8,4,0,.6); } /* The field is ~88px narrower than the screen at 390, and the score row did not fit any more — "Your Team · 0", the ser note and "Opponents · 0" wrapped onto two lines, costing a whole row of the height a phone has least of. Tightened rather than un-inset: the row is live information, so it stays in the field. */ body.playing .board{gap:4px;flex-wrap:nowrap;align-items:baseline} body.playing .teambox{font-size:12px;white-space:nowrap} body.playing .teambox b{font-size:16.5px;margin-left:1px} /* 9.5 -> 11px for the same reason as the team labels: the a11y floor, and an audience of elders. The tracking pays for the width (1.2px -> .3px) because this chip already sets text-overflow:ellipsis a few rules down, so anything that does not fit disappears quietly rather than failing loudly. */ body.playing .trumpchip{font-size:11px;letter-spacing:.3px;white-space:nowrap;flex:0 1 auto;min-width:0} /* AND THE SER MUST NOT SPILL OUT OF ITS OWN CHIP (owner 2026-08-04: "when the Ser is applied it is overlapping with points text bars. adjust the fonts"). The row above is `flex-wrap:nowrap` with a 4px gap, and the chip is `flex:0 1 auto; min-width:0` — so when the ser text grows (a long suit name, a wider system face, a bigger score) the chip's BOX shrinks obediently while its `white-space:nowrap` text runs straight out of it and over the score beside it. That is the overlap, and it is why a box-against-box check never saw it: the boxes never intersect, only the ink does. Measure scrollWidth against clientWidth, not rectangles. Two things stop it. The chip clips and ellipsises, so its text can never leave its box whatever happens; and the scores are the ones that hold their width, because a score you cannot read is worse than a ser you have to squint at — the ser also sits under the tens row and in the menu, the score sits nowhere else. */ body.playing .trumpchip{overflow:hidden;text-overflow:ellipsis;display:block; line-height:1.7} /* the suit symbol carries the note now, so it is drawn a size up and not tracked */ body.playing .trumpchip .trumpsuit{font-size:13px;letter-spacing:0;vertical-align:-1px} body.playing .teambox{flex:0 0 auto} @media (max-width:372px){ body.playing .teambox{font-size:11px} body.playing .teambox b{font-size:15px} body.playing .trumpchip{font-size:11px;letter-spacing:.1px;padding:4px 6px} } /* ===================== THE SLATE ===================================== Owner 2026-08-04: "build A and make it live." Owner 2026-08-05, seeing it live: "This is looking good but its too big, make it look in a proper way, adjusting spacing and not overlapping the carpet side lines. The oval square corners lines are touching the carpet sidelines. Also because of this score system the table is looking much smaller now." WHAT WAS ACTUALLY WRONG, before any of this. `.board` was `justify-content:space-between` across three items of unequal width, so the ser was never centred -- it landed wherever the two scores left it and slid sideways every time a score grew a digit. The tens row underneath was centred on its own axis with no relation to it. No amount of nudging padding fixes that, because the row had no grid to be aligned to. It has one now: `1fr auto 1fr`, ser in the middle column, tens on the same plate. TWO THINGS THE FIRST CUT GOT WRONG, both measured off the live build: 1. IT SAT ON THE CARPET'S BORDER. `body.playing .wrap` is padded by --mat-fi, which js/48-weave.js publishes from the carpet's own fieldInset() -- so the wrap's content edge IS the inner edge of the floral border, and a plate at `margin:0 2px` had 2px of clearance. At 390 that put its edges at 46 and 344 against a field of 44 to 346, so its 13px corners curved straight into the border line. Text may sit flush in the field; a drawn OBJECT with a corner radius may not, because its corner reads as a shape crossing the frame. It gets a real inset of its own now, one constant for both sides. 2. IT WAS TOO TALL, AND THE MAT PAID FOR IT. 126px at 390 against roughly 70 for the row it replaced, which is 56px straight off the table -- and the table is the game. Two changes, no loss of information: the dot moves onto the same line as the name instead of floating above it, so each side is two rows rather than three; and every size comes down a step. The number is still by far the biggest thing on the strip, which is the whole point of it. SCOPED TO .bd-team, WHICH renderBoard() SETS. #board carries three different layouts and a hard three-column grid applied to a row of four per-seat pills would be nonsense. 2-3-5, 7-8, Kachuful, Gadhedo and President keep every rule above this block. Mindi is the only isTeam game today and the class follows the FLAG, not the id, so a second team game gets the slate for free. */ /* ONE CONSTANT FOR THE INSET, not the same number written into four rules. Measured, not picked: 11px is the smallest gap at which the plate's 12px corner is unmistakably clear of the border at 360, which is the narrowest field. It is inset from the WRAP, which is already inset by --mat-fi, so it follows a wider carpet band automatically. */ body.playing .board.bd-team, body.playing .board.bd-tens + .tensrow{--slate-in:11px} /* the plate. Its bottom edge is open, because the tens row closes it. */ body.playing .board.bd-team{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:0;flex-wrap:nowrap; /* THE SAME CLEARANCE ON TOP AS ON THE SIDES (owner 2026-08-05: "move it downwards a bit so it doesn't overlap with that carpet lining"). The sides got --slate-in when the plate was first pulled off the border; the TOP kept a 2px margin from before, and it did not matter then because the header band was sitting above it. Reclaiming that band for mockup B moved the plate up to where the header had been — which is the carpet's inner top line — and the 2px put its corners straight back on it. Same fault as the sides, one message apart, and the same constant fixes it. */ margin:var(--slate-in) var(--slate-in) 0;padding:6px 8px 5px; background:linear-gradient(180deg,rgba(10,20,14,.55),rgba(8,16,11,.32)); border:1px solid rgba(255,235,200,.14);border-top-color:rgba(255,235,200,.22); border-bottom:0;border-radius:12px 12px 0 0; box-shadow:inset 0 1px 0 rgba(255,240,210,.1); /* the old rule under the row is the plate's edge now */ border-bottom-style:none} /* ...unless there is no tens row to close it (a future team game that is not Mindi). render() sets .bd-tens only while the row is actually showing, so the plate closes itself rather than ending in a raw open edge. */ body.playing .board.bd-team:not(.bd-tens){ border-bottom:1px solid rgba(255,235,200,.14);border-radius:12px;margin-bottom:5px} /* EACH SIDE IS TWO ROWS, NOT THREE. The dot used to float on a line of its own above the name, which cost ~11px of a strip that is over the mat the game is played on. It belongs beside the name anyway -- it is the name's colour key, not a separate fact. Grid rather than flex so the number can span both columns and stay centred under a dot-plus-name pair of any width. */ body.playing .bd-team .teambox{ display:grid;grid-template-columns:auto auto;justify-content:center; align-content:center;gap:1px 5px;min-width:0;flex:1 1 0;white-space:normal} body.playing .bd-team .teambox .dot{ grid-row:1;grid-column:1;align-self:center;width:6px;height:6px; box-shadow:0 0 7px currentColor} /* IN PLAY THESE ARE THE OVERRIDE THAT COUNTS. The base rules in styles.css never reach the table — these win — so the team colours have to be changed HERE as well or the score row keeps its two pastels while the tens beside it are marigold and peacock, which is worse than leaving all four alone. */ body.playing .bd-team .teambox.t0 .dot{color:var(--team-a);background:var(--team-a)} body.playing .bd-team .teambox.t1 .dot{color:var(--team-b);background:var(--team-b)} /* the name: quiet, tracked, and clipped rather than allowed to shove the grid. Gujarati and Punjabi run long here -- "ਤੁਹਾਡੀ ਟੀਮ" is wider than "Your Team" -- and a 1fr column a word can widen is not a grid. */ body.playing .bd-team .teambox .tl{ grid-row:1;grid-column:2; /* 11px, not 9.5 — the a11y gate's floor, and the floor exists because this app is aimed at "my mother's friends or elders". Raising it is the easy half; the hard half is that this is a grid column that CANNOT wrap and Gujarati/Punjabi already run long here ("ਤੁਹਾਡੀ ਟੀਮ" is wider than "Your Team"), so the letter-spacing comes down from .1em to .04em to pay for the extra height. Measured, not assumed: scrollWidth vs clientWidth for this element in all five languages at 390 and 360 — see the note in the commit. */ font-family:var(--ck-ui);font-size:11px;font-weight:600;line-height:1.2; letter-spacing:.04em;text-transform:uppercase;color:var(--ck-chalk-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* the number: the one thing on this strip you read at a glance, and still by far the biggest, even a step down */ body.playing .bd-team .teambox b{ grid-row:2;grid-column:1/-1;justify-self:center; font-family:var(--ck-disp);font-size:21px;font-weight:800;line-height:1.02; margin:0;font-variant-numeric:tabular-nums lining-nums; text-shadow:var(--ck-shadow),0 0 13px rgba(255,225,170,.16)} body.playing .bd-team .teambox.t0 b{color:var(--team-a)} body.playing .bd-team .teambox.t1 b{color:var(--team-b)} /* the ser: its own column, ruled off on both sides, the glyph carrying it. `display:block` and the ellipsis clamp from the rule above are undone here -- they exist to stop the ser spilling in the OLD flex row, and in a grid cell of its own it has nothing to spill into. */ body.playing .bd-team .trumpchip{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:0;padding:0 13px;align-self:stretch;flex:0 0 auto; overflow:visible;text-overflow:clip;letter-spacing:0;line-height:1.1; /* STRAIGHT RULES, NOT A LENS. `.trumpchip` in styles.css is a pill -- `border-radius:999px` -- and this only replaces its left and right borders. Two side borders on a 999px radius do not draw two vertical hairlines, they draw the two curved ends of a capsule: the render came back with the ser sitting inside an ellipse. Nothing in the source says "circle"; you have to look at it. */ border-radius:0; border-left:1px solid rgba(255,235,200,.15); border-right:1px solid rgba(255,235,200,.15)} body.playing .bd-team .trumpchip .tl{ /* 8px -> 11px, same reasoning; the tracking pays for it again */ font-family:var(--ck-ui);font-size:11px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--ck-chalk-3);white-space:nowrap;line-height:1.3} body.playing .bd-team .trumpchip .trumpsuit{ font-size:19px;line-height:1.05;letter-spacing:0;vertical-align:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))} /* the tens, docked: same plate, four equal columns, and it closes the box */ body.playing .board.bd-tens + .tensrow{ display:grid;grid-template-columns:repeat(4,1fr);place-items:center; gap:0;margin:0 var(--slate-in) 5px;padding:4px 8px 5px; background:linear-gradient(180deg,rgba(8,16,11,.3),rgba(8,16,11,.1)); border:1px solid rgba(255,235,200,.14); border-top:1px dashed rgba(255,235,200,.18); border-radius:0 0 12px 12px;min-height:0} body.playing .board.bd-tens + .tensrow .coin{font-size:14.5px;line-height:1.25} /* the narrow phone. The plate does not need the emergency tightening the old flex row did -- a grid cannot wrap -- so this only trims the type. 372 -> 380 (2026-08-14). 375x667 is the iPhone SE 2 and 3, and it fell in the four-pixel gap between this breakpoint and the one above: "OPPONENTS" came out 4px over its column and rendered "OPPONENT…". The 4px IS the letter-spacing — .04em at 11px across nine characters — which this block already takes back down to .01em, so the phone simply needed to be inside the block. 380 covers 375 and stops short of 390, which measures clean and does not need tightening. Measured across nine phones and five languages by .claude/mp/phone-fit.js. */ @media (max-width:380px){ body.playing .board.bd-team{padding:5px 6px 5px} body.playing .bd-team .teambox b{font-size:19px} body.playing .bd-team .teambox .tl{font-size:11px;letter-spacing:.01em} body.playing .bd-team .teambox{gap:1px 4px} body.playing .bd-team .trumpchip{padding:0 10px} body.playing .bd-team .trumpchip .trumpsuit{font-size:17px} body.playing .board.bd-tens + .tensrow{padding:4px 6px 5px} body.playing .board.bd-tens + .tensrow .coin{font-size:13.5px} } /* THE 320px PHONE, WHERE THE ENGLISH WORD RUNS OUT OF PLATE (2026-08-14). Owner: "make the game compatible on all phones". Measured on a 320x568 screen — the floor, an SE1 or an old budget Android — the plate gives each team column 64px and "OPPONENTS" wants 80, so it rendered "OPPON…". Only English: hi/gu/mr/pa words are shorter and were clean at this width (.claude/mp/phone-fit.js runs all five and says so). Three things were NOT available as fixes and it is worth writing down why: · smaller type — 11px is the a11y floor for this app, and the floor exists because the players are "my mother's friends or elders" · wrapping — "Opponents" is ONE word; there is nothing to wrap · widening the plate — --slate-in is 11px because that is the smallest gap at which the plate's corner is unmistakably clear of the carpet lining, measured when the slate was drawn. Stealing it back would put the corners on the border again, which is a fault the owner has already reported once. So the dot goes instead, and only here. It costs nothing: the SCORE ITSELF already carries the team colour — the rule twenty lines up says exactly that — so the dot is the one piece of redundant information on the strip. Losing it hands the label its 6px plus the 4px gap, and the ser's side padding gives back the rest. */ @media (max-width:380px){ /* 340 -> 380 (same day, one better measurement later). scrollWidth is an integer and it was rounding real clipping away: at 360 — the commonest budget-Android width there is — "OPPONENTS" was 1.4px over, Hindi "आप" and Gujarati "તમારી ટીમ" 0.4px each. Half a pixel is a whole ellipsis. Measuring the text with a Range instead showed all of it, so every phone below 380 now gets the dot's space handed to the word. */ body.playing .bd-team .teambox .dot{display:none} body.playing .bd-team .teambox{grid-template-columns:1fr} body.playing .bd-team .teambox .tl{grid-column:1;letter-spacing:0} /* 13px -> 4px. "OPPONENTS" is 69.4px of text and the column was 68 — one and a half pixels, which scrollWidth rounds away and the screen does not. */ body.playing .bd-team .trumpchip{padding:0 4px} /* the plate's own side padding, for the last two pixels. Measured: with the dot gone "Opponents" was still 2px over, and 8px -> 5px here gives 6px back across the row — three per column, which clears it with a pixel to spare. */ body.playing .board.bd-team{padding:5px 5px 5px} } /* THE PILLS KEEP THE INLINE READING, so the punctuation renderBoard() no longer writes gets drawn back for them. 2-3-5, 7-8, Kachuful and President still show "Ser: " on one line, and that colon is right there. The SPACE has to come back too, and not as part of the content string: the old markup was `${lbl}: ` and the gap in it was a real text node between two elements. Take the string apart and the space goes with it -- the first render of this came back reading "Trump" jammed together. A margin rather than `content:":\00a0"` because a non-breaking space inside generated content is invisible in the source and the next person to touch this will not find it. */ body.playing .bd-pills .trumpchip .tl::after{content:":"} body.playing .bd-pills .trumpchip .trumpsuit{margin-left:.34em} /* ===================== THE HUD ======================================= Owner 2026-08-05, having picked mockup B: "build B and make it live." TWO THINGS, and they are connected. 1 · THE ⋯ HAD A WHOLE ROW TO ITSELF. "the in game option menu is so off, because of that the whole score board system is taking more space." Measured at 390: a header band 27px tall and 303px wide, holding one 38x25 button at the far right. Six controls and five language chips moved behind that button on 2026-08-01 and the row they left never went with them. It is docked into the score plate now and the band is gone — see #hud in index.html for why it cannot simply live inside #board or #tensrow. Where on the plate: the TENS row's right end. Not the score row — padding that for a button narrows both team columns and ellipsised "OPPONENTS" to "OPPONEN..." in the mockup. Not above the plate — pinned there it crossed the carpet's floral border, which is the same complaint the owner had just made about the plate's own corners. The tens are four coins in a ~276px plate, about 116px of slack, and it is the one row here that can spare some. 2 · THE TURN LINE LANDED ON A PLAYER. "'Turns' notifications is overlapping with user profiles." Arithmetic, not bad luck — see turnFit() in 06-render.js for the numbers. The bar is clamped and slimmed here, which buys most of it, and turnFit() measures what is left and tucks the bar out of the mat on the phones where clamping is not enough. */ /* the header goes only once the button has actually been re-homed. body.gm-docked is set by 47-gamemenu.js after the move succeeds — if it ever cannot find #hud the button stays in the header, this never matches, and the player still has a menu. A rule that hid the header unconditionally would take the menu with it. */ body.playing.gm-docked header{display:none} body.playing .hud{position:relative} /* room at the end of the tens row for the button to sit in */ body.playing .hud .board.bd-tens + .tensrow{padding-right:36px} body.playing .hud #gmOpen{ min-width:26px;width:26px;height:24px;padding:0;margin:0;z-index:4; display:grid;place-items:center; /* the glyph, centred in the box */ border-radius:7px;font-size:14px;line-height:1;letter-spacing:0; /* READS AS A BUTTON, not part of the tens row (owner 2026-08-29, UX sweep F1): the ⋯ is the only in-game way to pause / see rules / leave, but at .07 alpha it disappeared into the trump strip and players couldn't find the exit. The hit area was already 44px (::after below); this lifts the INK so the control is discoverable — a clearly bordered chip, still quiet enough not to fight the mat. Footprint unchanged, so the tight plate layout is untouched. */ background:rgba(255,235,200,.18);border:1px solid rgba(255,235,200,.46); color:var(--ck-chalk-1,#f4e8cf);text-shadow:var(--ck-shadow); box-shadow:0 1px 2px rgba(0,0,0,.28)} body.playing .hud #gmOpen:active{transform:scale(.94)} /* MINDI ALONE PINS IT. Its plate has two rows and the button belongs to the right end of the second — the owner asked for that game to be left exactly as it is. Every other mode puts the button IN the row; see the plate block below for why absolute positioning was wrong there. */ body.playing.hud-mindi .hud{position:relative} body.playing.hud-mindi .hud #gmOpen{ position:absolute;right:calc(var(--slate-in,11px) + 6px);bottom:9px; height:22px;min-width:30px;width:30px; display:block;font-size:14px;line-height:20px} /* a 30x22 box is under the 44px a thumb wants, and the plate has no room to give it. The hit area grows instead of the ink — the same trick the sheet's grip uses — so the target is comfortable without the button looking heavy. */ body.playing .hud #gmOpen::after{content:"";position:absolute;inset:-11px -9px} /* the turn line: clamped tight to the mat's top and slimmed, which is most of the clearance back */ body.playing .turnbar{top:1px;padding:1px 7px 3px;font-size:12.5px} body.playing .turnbar .tb-next{font-size:11px} /* ...and when even that is not enough it moves out of the centre column, which is where the crowding is. turnFit() adds this after measuring against every seat. NOT above the mat, which is where this went first. `bottom:calc(100% + 2px)` put it in the plate's space and the plate has a background, so the turn line simply disappeared on exactly the phones it was supposed to be rescued on — and the check passed, because it asked whether the bar cleared the seats and never whether it could still be SEEN. The screenshot is what caught it. The top seat is centred, so the mat's top-LEFT corner is the one place on a short mat that is reliably empty: the side seats are far down the ring. */ body.playing .turnbar.tb-tuck{ left:5px;right:auto;transform:none;top:2px; max-width:38%; padding:1px 6px 2px;font-size:11.5px; border-bottom-width:2px} /* AND IT DROPS THE "next X" CLAUSE. Moving to the corner was not enough on its own: at 360x640 the mat is 342px wide, the full bar is ~163px, and the top seat's box spans 130-212 across it — so the corner bar still ran 38px into Partner. Whose turn it is NOW is the part that matters when there is no room; who is after them is a nicety, and it comes back the moment the mat is tall enough not to need the tuck at all. */ body.playing .turnbar.tb-tuck .tb-next, body.playing .turnbar.tb-tuck .tb-sep{display:none} /* =============== THE SAME PLATE, IN THE OTHER TWELVE GAMES ============= Owner 2026-08-06, on the per-game mockups: "build it and make it live." The plate above was written for Mindi and verified on Mindi, and shipping it that way was my regression: the ⋯ printed over the ser in 2-3-5 / 7-8 / Kachuful, over the pills in Gadhedo / Badshah, and floated over the carpet's floral border in the seven layout and board games, whose .board and .tensrow are display:none so #hud measured zero high. Rummy's turn line landed on a Bot's face. Same object, same materials, same 12px corner, same --slate-in inset — it just has to carry whatever that game actually has. hudMode() in 06-render.js picks the mode; the four are described there. ------------------------------------------------------------------------- */ /* ---- THE PLATE IS #hud ITSELF, AND THE ⋯ IS IN THE ROW ------------------- Owner 2026-08-07, on Kachuful: "the color points, ser and in game menu option is not center align in the HUD box." MEASURED, at 390: the plate ran 55..335 and the ink+button ran 98..329 — 44px of empty plate on the left and 6px on the right, the whole visible group 18.9px right of centre. Badshah was 43.9px out, Rummy 29.4px. The cause is that the score row and the button were centred SEPARATELY. The row was centred between symmetric 34px gutters and the button was then pinned absolutely into the right one — so the right gutter was full and the left was empty, and the plate read as shoved right. hud-all.js said "0px off centre" the whole time, because it compared #board's children against #board and the button is neither. No arithmetic fixes that while the button is out of flow: the offset needed depends on the row's own width, which changes with the game, the score and the language. The button has to BE in the row. So #hud stops being a bare wrapper and becomes the plate — one centred flex line holding the score row (or the turn line) and the ⋯ together — which is what the bare games were already doing and what the other modes should have done from the start. #board keeps its own identity inside as a flex item, so renderBoard() can go on rewriting its innerHTML and `.board.bd-tens + .tensrow` still holds for Mindi, which is untouched by all of this. ------------------------------- */ body.playing.hud-pills .hud, body.playing.hud-cards .hud, body.playing.hud-bare .hud{ display:flex;align-items:center;justify-content:center;gap:10px; min-height:0; margin:var(--slate-in,11px) var(--slate-in,11px) 6px; padding:7px 12px; background:linear-gradient(180deg,rgba(10,20,14,.55),rgba(8,16,11,.32)); border:1px solid rgba(255,235,200,.14);border-top-color:rgba(255,235,200,.22); border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,240,210,.1)} /* the score row is now a plain flex item — the plate around it is #hud's */ body.playing.hud-pills .hud .board.bd-pills, body.playing.hud-cards .hud .board.bd-pills{ display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap; flex:0 1 auto;min-width:0; margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none} body.playing.hud-pills .hud .board.bd-pills .pills, body.playing.hud-cards .hud .board.bd-pills .pills{ display:flex;gap:2px;flex-wrap:nowrap;min-width:0;justify-content:center;flex:0 1 auto} /* THE PILLS ROW IS STEPPED DOWN SO IT ACTUALLY FITS TRUE CENTRING. Owner 2026-08-08, choosing between three compromises: "go for 1". Centring the row on the plate AND pinning the ⋯ to the right edge means the row must fit inside plateWidth minus TWICE the button zone — 164px at 390. Measured before this: 2-3-5 needed about 187 and spilled left, reading -11.4px off centre at 390 and -14px at 360 in Marathi; Kachuful -3 to -8; 7-8 only -2.9px, and only in Marathi. It is really a 2-3-5 problem. It varies by LANGUAGE, which is the reason this is a type step and not a nudge: "TRUMP" sets wider than "સર", so any fixed offset would be wrong in four languages out of five. Making the row narrower than the space is the only fix that cannot be language-dependent. */ body.playing.hud-pills .hud .ppill{padding:1px 3px;gap:3px} body.playing.hud-pills .hud .ppill b{font-size:13px} body.playing.hud-pills .hud .ppill .dt{width:5px;height:5px} /* MANY SEATS: shrink the per-player pills so the row + ⋯ never collide (owner 2026-08-26: "in 10 players the option button is overlapping with a user icon on the HUD"). The pills are fixed-width and never wrap, so from 8 seats up they filled the plate and pushed ⋯ off its own right edge. From the 8th pill on, tighten every pill (padding, gap, number, dot) so ten of them plus the button stay inside the plate even at 360. :has() is already how this app gates the bug tab, so it is safe on the target webviews. */ body.playing.hud-pills .hud .pills:has(> .ppill:nth-child(8)), body.playing.hud-cards .hud .pills:has(> .ppill:nth-child(8)){gap:1px} body.playing.hud-pills .hud .pills:has(> .ppill:nth-child(8)) .ppill, body.playing.hud-cards .hud .pills:has(> .ppill:nth-child(8)) .ppill{padding:1px 2px;gap:2px} body.playing.hud-pills .hud .pills:has(> .ppill:nth-child(8)) .ppill b, body.playing.hud-cards .hud .pills:has(> .ppill:nth-child(8)) .ppill b{font-size:11.5px} body.playing.hud-pills .hud .pills:has(> .ppill:nth-child(8)) .ppill .dt, body.playing.hud-cards .hud .pills:has(> .ppill:nth-child(8)) .ppill .dt{width:4px;height:4px} /* Badshah/Gadhedo draw the count ON a fixed 21×27 card, which the padding rules above cannot shrink — so shrink the card itself from the 8th seat on. */ body.playing.hud-cards .hud .board.bd-pills .pills:has(> .ppill:nth-child(8)) .ppill b{ width:17px;height:22px;font-size:11px;border-radius:2.5px} /* keep the menu button a fixed island the pills can never eat into */ body.playing.hud-pills .hud #gmOpen, body.playing.hud-cards .hud #gmOpen{flex:0 0 auto} /* the ser joins the line instead of being pushed to the far right */ body.playing.hud-pills .hud .trumpchip, body.playing.hud-cards .hud .trumpchip{ flex:0 0 auto;white-space:nowrap;border-radius:0; padding:1px 0 1px 6px;margin-left:1px; border-left:1px solid rgba(255,235,200,.18); font-size:8px;letter-spacing:.06em} body.playing.hud-pills .hud .trumpchip .trumpsuit, body.playing.hud-cards .hud .trumpchip .trumpsuit{font-size:12px;letter-spacing:0} /* 2-3-5 at three players is the tightest row in the game — three targets, the ser and the button — and Kachuful at six is tighter still. Step the type down rather than let the line overflow. */ @media (max-width:392px){ body.playing.hud-pills .hud, body.playing.hud-cards .hud, body.playing.hud-bare .hud{padding:7px 10px;gap:8px} body.playing.hud-pills .hud .ppill b{font-size:12px} body.playing.hud-pills .hud .ppill{padding:1px 2px;gap:2px} body.playing.hud-pills .hud .trumpchip{font-size:7.5px;padding-left:5px} } @media (max-width:366px){ body.playing.hud-pills .hud, body.playing.hud-cards .hud, body.playing.hud-bare .hud{padding:6px 8px;gap:7px} body.playing.hud-pills .hud .ppill b{font-size:11.5px} /* 2-3-5 at 360 was the last row still spilling — -2.7px in English, -3.4px in Marathi — so the pill's own side padding goes at this width. Three pills and a ser is the widest thing this plate ever has to centre. */ body.playing.hud-pills .hud .ppill{padding:1px 1px;gap:2px} body.playing.hud-pills .hud .board.bd-pills .pills{gap:1px} body.playing.hud-pills .hud .trumpchip{font-size:7px;padding-left:4px} body.playing.hud-pills .hud .trumpchip .trumpsuit{font-size:10.5px} } /* Owner report, 2026-08-18 (screenshot): "if there are more than 4 players give better spacing in HUD, the line between users point and trump is overlapping." First attempt (same day) shrank the pills to fit ONE line — font down to 10px, dot down to 3px, padding to nothing. It stopped the text boxes literally intersecting, but at six pills the row is still unreadable, and the owner is right back here: "I am telling you in every update, fix this once and for all." Shrinking was always going to hit a floor; six pills of ANY size do not fit next to a fixed 38px ⋯ button in ~300px. The floor is not the font — it is trying to keep six things on one line at all. THE ACTUAL FIX: let the pills WRAP, at a size a player can read, instead of shrinking to fit a line that was never going to hold six. `.pills` itself now wraps (it only ever wrapped the OUTER box before, which just dropped the trump chip alone onto its own line and left all six pills still jammed together). Three pills at a time, at close to the normal pills-mode size, reads as a scoreboard; six slivers in a row reads as noise. `.wide` stays a player-COUNT class (G.N>4, set in renderBoard(), 06-render.js), not a viewport-width step — the crowding is caused by pill COUNT, not phone width, and #hud has no fixed height for the extra row to fight (turnFit() re-measures the seat/turn-bar gap on every render, so a taller wrapped HUD is accounted for automatically, never hard-coded). */ /* SUPERSEDED 2026-09-03: the wrap above balanced BADLY. flex-wrap fills a row then drops the remainder, so six pills went 5+1 at 390 and 4+2 at 360 — a lopsided block with the trump chip stranded on a THIRD line — and the owner was back with "HUD is not proper when there are 6 players in Kachuful." A ragged wrap can't be talked into even rows; a GRID can. The pills now lay out in a grid whose column count keys off the pill COUNT (via :has), so every Kachuful size lands even: four go 2x2, five go 3+2, six go two rows of three. The trump chip stays a sibling BESIDE the grid (outer row goes back to nowrap), so the plate is two lines tall at most instead of three — which also frees the vertical room the relocated turn line needs (06-render.js hudMode). */ body.playing.hud-pills .hud .board.bd-pills.wide{flex-wrap:nowrap;justify-content:center} body.playing.hud-pills .hud .board.bd-pills.wide .pills{ display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,auto); justify-content:center;justify-items:center;gap:3px 5px} /* five or six pills (a 5th child exists) → three columns; four → the 2x2 above */ body.playing.hud-pills .hud .board.bd-pills.wide .pills:has(> .ppill:nth-child(5)){grid-template-columns:repeat(3,auto)} body.playing.hud-pills .hud .board.bd-pills.wide .ppill{padding:1px 5px;gap:3px;flex:0 0 auto;min-width:34px;justify-content:center} body.playing.hud-pills .hud .board.bd-pills.wide .ppill b{font-size:12px} body.playing.hud-pills .hud .board.bd-pills.wide .ppill .dt{width:5px;height:5px;margin-right:1px} body.playing.hud-pills .hud .board.bd-pills.wide .trumpchip{font-size:9px;padding-left:6px;margin-left:1px} body.playing.hud-pills .hud .board.bd-pills.wide .trumpchip .trumpsuit{font-size:11px} @media (max-width:392px){ body.playing.hud-pills .hud .board.bd-pills.wide .ppill b{font-size:11.5px} body.playing.hud-pills .hud .board.bd-pills.wide .ppill{padding:1px 4px} body.playing.hud-pills .hud .board.bd-pills.wide .trumpchip{font-size:8.5px;padding-left:5px} } @media (max-width:366px){ body.playing.hud-pills .hud .board.bd-pills.wide .ppill b{font-size:11px} body.playing.hud-pills .hud .board.bd-pills.wide .ppill{padding:1px 3px;gap:2px} body.playing.hud-pills .hud .board.bd-pills.wide .trumpchip{font-size:8px;padding-left:4px} } /* ---- Gadhedo & Badshah: the count rides ON the card --------------------- Owner 2026-08-06: "show remaining cards on the Card Icon itself, it will look more clean and adjust the card next to the user color". It was `13` and then a separate 🂠 glyph beside it — digits with decoration next to them. Drawn as one object, a small card carrying its own number, the row becomes four hands you read at a glance. */ body.playing.hud-cards .hud .board.bd-pills .ppill{ background:none;border:0;padding:0;gap:0} /* the CARD is the object now */ body.playing.hud-cards .hud .board.bd-pills .ppill .dt{display:none} body.playing.hud-cards .hud .board.bd-pills .ppill .pcx{display:none} body.playing.hud-cards .hud .board.bd-pills .ppill b{ display:grid;place-items:center; width:21px;height:27px;border-radius:3px; font-family:var(--ck-disp);font-size:12.5px;font-weight:800;line-height:1; color:#2c2418;text-shadow:none; background:linear-gradient(163deg,#fdf8ec,#efe3c9 62%,#e3d4b4); box-shadow:0 1px 2px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.45)} /* EVERY SEAT RULE CARRIES THE SAME PREFIX AS THE RULE ABOVE, so the cascade is decided by ORDER. Written shorter — `.hud-cards .ppill.s0 b`, four classes against the base rule's six — they lose silently, and the first render of this came back as four identical cream cards with no player colour on any of them. The measurement passed, because it had no opinion about colour. It does now. */ body.playing.hud-cards .hud .board.bd-pills .ppill.s0 b{ background:linear-gradient(163deg,#fdf6e2,#f6e5b6 62%,#eed69a); box-shadow:0 1px 2px rgba(0,0,0,.42), inset 0 0 0 1.5px #e2b455} body.playing.hud-cards .hud .board.bd-pills .ppill.s1 b{ background:linear-gradient(163deg,#f2f7fd,#dbe8f8 62%,#c6d9f0); box-shadow:0 1px 2px rgba(0,0,0,.42), inset 0 0 0 1.5px #7a9fd4} body.playing.hud-cards .hud .board.bd-pills .ppill.s2 b{ background:linear-gradient(163deg,#fdf1f0,#f9dcd8 62%,#f2c6c0); box-shadow:0 1px 2px rgba(0,0,0,.42), inset 0 0 0 1.5px #dd8375} body.playing.hud-cards .hud .board.bd-pills .ppill.s3 b{ background:linear-gradient(163deg,#fdf4ea,#f6e2cc 62%,#eed2b2); box-shadow:0 1px 2px rgba(0,0,0,.42), inset 0 0 0 1.5px var(--terra-deep)} /* yours is lifted and ringed, so you find it without reading */ body.playing.hud-cards .hud .board.bd-pills .ppill.me b{ transform:translateY(-2px); box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 0 0 2px #f0c869, 0 0 0 1.5px rgba(248,228,160,.55)} /* a player who is out shows a spent card, not a number */ body.playing.hud-cards .hud .board.bd-pills .ppill.done b{opacity:.42;transform:none} /* ---- CONTENT CENTRED ON THE PLATE, ⋯ PINNED RIGHT -------------------------- Owner 2026-08-07, on Badshah: "In HUD Align cards in exactly middle and in game option menu should be right align in the HUD box. And your turn notification box is also not align with HUD box." Same for Teen Patti and Rummy: "Align your turn notification in middle in the HUD and in game option menu should be right align in the HUD box." MEASURED at 390 before the change — the plate runs 55..335, centre 195: Badshah cards 132..225, centre 178.5 — 16.5px left of the plate centre Teen Patti turn 129..227, centre 178 — 17px left Rummy turn 115..242, centre 178.5 — 16.5px left All three because the row and the ⋯ were centred TOGETHER as one group, so the content had to sit left to make room for the button. This is the navbar arrangement instead: the title is centred on the box and the menu lives at the right edge. Both reserved zones are the same width, so "centred" is the plate's true centre and not the centre of what is left over — and the max-width means the content can never grow into the button, which is the failure this arrangement invites. */ /* 2026-08-08: the pills games join this too. The owner asked for the same arrangement on 7-8 — "Align your turn notification in middle in the HUD and in game option menu should be right align in the HUD box" — which settles the question left open on 2026-08-07, when Kachuful/2-3-5/7-8 were the only three still centring the row and the ⋯ together as one line. One rule now. */ body.playing.hud-pills .hud, body.playing.hud-cards .hud, body.playing.hud-bare .hud{position:relative} body.playing.hud-pills .hud #gmOpen, body.playing.hud-cards .hud #gmOpen, body.playing.hud-bare .hud #gmOpen{ position:absolute;right:12px;top:50%;transform:translateY(-50%)} body.playing.hud-pills .hud #gmOpen:active, body.playing.hud-cards .hud #gmOpen:active, body.playing.hud-bare .hud #gmOpen:active{transform:translateY(-50%) scale(.94)} /* 12 right + 26 button + 8 clearance, mirrored on the left so the centre is the plate's own and the content cannot reach the button from either side */ body.playing.hud-pills .hud .board.bd-pills, body.playing.hud-cards .hud .board.bd-pills, body.playing.hud-bare .hud #turnBar.turnbar{max-width:calc(100% - 92px)} /* ---- the bare games: Rummy, Paplu, Bluff, Sevens, Aapo, Teen Patti, Kodi ---- These seven have no score row of their own — .board and .tensrow are display:none for them — so #hud was a zero-height box with a button floating out of it. The plate above carries the TURN LINE instead, which does double duty: it gives the ⋯ something to sit in, and it takes the turn line off the mat, which is what stops it printing on a face in Rummy. turnFit() never ran for these games — they do not call render() — so there was no guard at all. */ body.playing.hud-bare #turnBar.turnbar{ position:static;transform:none;left:auto;top:auto;max-width:none;width:auto; margin:0;padding:0;background:none;border:0;box-shadow:none; flex:0 1 auto;min-width:0; display:flex;align-items:center;justify-content:center;gap:6px; font-size:12.5px;min-height:20px} /* it holds its row even with nothing to say, so the plate does not collapse and re-inflate every time a turn changes hands */ body.playing.hud-bare #turnBar.turnbar:not(.show){visibility:hidden;display:flex} /* THE NON-BLOCKING FIRST-TIME RULES CHIP (owner 2026-08-30). A small warm pill over the live table for an invited/host first-timer (10-wiring maybeRulesChip); tapping it opens the Chopadi book, it auto-dismisses after ~7s, and ONLY the pill takes pointer events, so the table stays fully playable underneath. */ /* DOCKED TO THE RIGHT EDGE, mid-height — the one band that is clear of the seats and the trick in every game, so it never overlaps play (a top-centre pill sat on the partner seat). Mirrors the bug tab on the left edge; slides in from the edge and retracts. */ body.playing .rules-chip{position:absolute; right:0; top:62%; transform:translateX(110%); z-index:6; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 12px 8px 14px; border-radius:16px 0 0 16px; border:1px solid rgba(255,235,200,.5); border-right:0; background:linear-gradient(180deg,rgba(58,34,12,.95),rgba(38,21,7,.95)); color:#f4e8cf; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:12.5px; box-shadow:-2px 3px 11px rgba(0,0,0,.42); transition:transform .32s ease; cursor:pointer; -webkit-tap-highlight-color:transparent} body.playing .rules-chip.in{transform:translateX(0)} body.playing .rules-chip .rc-a{font-size:15px; color:#ffdf8a; line-height:1} body.playing .rules-chip:active{transform:translateX(0) scale(.96)}