/* Aangan — SHEET ENAMEL (owner 2026-10-05, report rmuvirm9m6v6)
   =============================================================================
   "I want to change the game options sheet in general for ALL games not just
   mindi. Keep the wood. The rectangles should change into something else — this
   screen looks subpar … it's majorly colours and the shape of the bars. Match
   the HOME screen." Picked Direction A (enamel plaques) from the mockups.

   So the flat dark rectangles almirah.css gives the relocated controls become
   the SAME bevelled enamel tiles the lobby (63-newhome.js, .lob-hb) uses — the
   home screen the owner named as the reference. One house, not two dialects.

   WHY A SEPARATE FILE, LOADED LAST. almirah.css styles these controls through
   ~140 tuned lines (the --hp-* token flip + the "teak niche furniture" block),
   much of it !important at `button#id.bigbtn` specificity. Overriding from a
   file that loads after it — at matched-or-higher specificity — is reversible
   in one <link> and leaves that carefully-commented block intact to fall back
   to. Everything here is scoped to `#homeOv > .almsheet`, so it only ever
   touches the pulled-out options drawer, never the same classes elsewhere.

   COLOUR-CODED BY ACTION, like the lobby tiles:
     terracotta = the primary (Solo / Invite — the thing that STARTS a game)
     green      = host / open a table
     teak       = join / secondary
     ghost      = Rules
   The generic class selectors mean every game's sheet is restyled at once —
   Rummy's joker toggles, Kachuful's best-of-N, the player stepper, all of it.

   Verified: .claude/mp/sheet-enamel.js at 390 + 360, en/hi/gu/mr, across games
   with different controls (mindi variants, rummy joker+format, kach tour, the
   plain ones), + the deal still fires. */

/* ---- the enamel ground, shared by every plaque in the drawer ---------- */
#homeOv #almSheet .alms-body .bigbtn,
#homeOv #almSheet .alms-body .cbtn,
#homeOv #almSheet .alms-body .cta .btn{
  border:0 !important;border-radius:15px !important;
  color:#fff6e9 !important;
  box-shadow:0 5px 13px rgba(20,10,2,.4),
             inset 0 1.4px 0 rgba(255,255,255,.18),
             inset 0 -3px 7px rgba(20,12,4,.3),
             inset 0 0 0 1.3px rgba(28,16,6,.3) !important;
  background-image:none;
}
#homeOv #almSheet .alms-body .bigbtn::before,
#homeOv #almSheet .alms-body .cbtn::before{content:none !important}

/* ---- the big action bars: icon in a disc on the left, two lines ------- */
#homeOv #almSheet .alms-body .bigbtn{
  display:flex !important;align-items:center;gap:12px;
  padding:13px 15px !important;text-align:left;
  background:linear-gradient(160deg,#5f6e37,#43501f) !important;   /* default = green (Direction A, owner 2026-10-05: go back to this) */
}
#homeOv #almSheet .alms-body .bigbtn .bi{
  /* margin-left:auto, NOT margin:0 — the base .bigbtn .bi is order:2 + margin-left:auto
     (disc pinned to the RIGHT EDGE). margin:0 dropped the auto, so each disc trailed
     its own title at a different x (owner screenshot 2026-10-06) instead of all four
     lining up on one right-hand column. */
  flex:0 0 34px;width:34px;height:34px;margin:0 0 0 auto !important;
  display:flex;align-items:center;justify-content:center;font-size:18px !important;
  background:rgba(255,246,225,.14);border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
#homeOv #almSheet .alms-body .bigbtn > span:not(.bi){display:block;line-height:1.25}
/* ICONS GONE ON THE PHONE (owner 2026-10-06: "new updated game section not showing
   icons on phone"). The painted LIC icons are <svg viewBox="0 0 48 48"> with NO
   width/height, and this .bi became a flex disc. Chromium gives a size-less SVG a
   replaced size and it drew fine here; WebKit (every iPhone browser) lets a flex
   item with no intrinsic size collapse to 0x0, so the icon simply wasn't there.
   One explicit size for every icon in the sheet's discs — and the Settings discs,
   which share the same flex .bi. */
#homeOv #almSheet .alms-body .bigbtn .bi svg,
#homeOv #paneSettings .setrow .bigbtn .bi svg{
  display:block;width:22px;height:22px;flex:0 0 22px;min-width:22px}
/* the WhatsApp glyph is a FILL shape: keep chalk-home's `.primary .bi svg{stroke}`
   (meant for the chalk line-art icons) from outlining it in yellow */
#homeOv #almSheet .alms-body button#glInviteBtn .bi svg{stroke:none !important}
#homeOv #almSheet .alms-body .bigbtn .bt{
  font-family:var(--ck-disp,"Fraunces",Georgia,serif) !important;
  font-size:16px !important;font-weight:700 !important;color:#fff6e9 !important;
  text-shadow:0 1px 1px rgba(20,10,2,.3)}
#homeOv #almSheet .alms-body .bigbtn .bs{
  font-size:10.5px !important;font-weight:600;color:rgba(255,246,225,.9) !important}

/* colour by role — specificity carries the id so it beats almirah.css's
   `button#soloBtn.bigbtn` !important marigold */
#homeOv #almSheet .alms-body button#soloBtn.bigbtn,
#homeOv #almSheet .alms-body button#glInviteBtn.bigbtn{
  background:linear-gradient(160deg,#a8472a,#7e2f17) !important}   /* primary = terracotta */
#homeOv #almSheet .alms-body button#soloBtn.bigbtn *,
#homeOv #almSheet .alms-body button#glInviteBtn.bigbtn *{color:#fff6e9 !important;text-shadow:none}
#homeOv #almSheet .alms-body button#openTableBtn.bigbtn{
  background:linear-gradient(160deg,#5f6e37,#43501f) !important}   /* host = green */
/* openTableBtn + glInviteBtn carry class .primary (for the old marigold), so
   tin.css's `.bigbtn.primary .bt` paints the title dark — right on marigold,
   wrong on our enamel. Force cream on every child, same as #soloBtn above. */
#homeOv #almSheet .alms-body button#openTableBtn.bigbtn *{color:#fff6e9 !important;text-shadow:none}
#homeOv #almSheet .alms-body button#joinTableBtn.bigbtn,
#homeOv #almSheet .alms-body button#playGroupBtn.bigbtn{
  background:linear-gradient(160deg,#6a4a24,#4a3015) !important}   /* secondary = teak */

/* ---- variant toggles (rmjoker / rmfmt / mindivar): small enamel tiles -- */
#homeOv #almSheet .alms-body .cbtn{
  background:linear-gradient(160deg,#6a4a24,#4a3015) !important;
  padding:10px 6px !important}
#homeOv #almSheet .alms-body .cbtn .big,
#homeOv #almSheet .alms-body .cbtn .sm{color:#fff6e9 !important}
#homeOv #almSheet .alms-body .cbtn .sm{color:rgba(255,246,225,.85) !important}
/* the chosen one lights green with a brass keyline — the lobby’s "on" look, warmed to honey */
#homeOv #almSheet .alms-body .cbtn.sel{
  background:linear-gradient(160deg,#5f6e37,#43501f) !important;
  box-shadow:0 5px 13px rgba(20,10,2,.4),
             inset 0 1.4px 0 rgba(255,255,255,.2),
             inset 0 0 0 1.5px rgba(236,207,134,.7) !important}

/* ---- the player stepper: one unified brass-edged capsule --------------- */
#homeOv #almSheet .alms-body .pstep{
  background:linear-gradient(160deg,#4a2c14,#3a2010) !important;
  border:1.4px solid rgba(201,164,74,.5) !important;border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,235,180,.14),0 3px 8px rgba(0,0,0,.4) !important}
#homeOv #almSheet .alms-body .pstep .pnum b{color:#f6e4bb !important}
#homeOv #almSheet .alms-body .pstep .pnum span{color:#b79b6a !important}
/* knobs stay brass — "the one thing you turn" (almirah.css keeps these) */

/* ---- Confirm = terracotta, Rules = ghost outline ---------------------- */
#homeOv #almSheet .alms-body .cta .btn{
  font-family:var(--ck-disp,"Fraunces",Georgia,serif) !important;
  font-size:14px !important;font-weight:700 !important;padding:12px 14px !important}
#homeOv #almSheet .alms-body .cta .btn.primary{
  background:linear-gradient(160deg,#a8472a,#7e2f17) !important;color:#fff6e9 !important}
#homeOv #almSheet .alms-body .cta #gamesRulesBtn{
  background:transparent !important;color:#eccf86 !important;
  box-shadow:inset 0 0 0 1.4px rgba(201,164,74,.55) !important}

/* =============================================================================
   PAUSE — bars sized to their text (owner 2026-10-05, same report)
   "some look way too big for the text they contain." Resume was a full-width
   slab; it becomes a pill that fits its word. The ad strip slims down. */
#pauseOv .pausepanel .cta{display:flex;justify-content:center}
#pauseOv .pausepanel .cta .btn#resumeBtn{
  flex:0 0 auto;width:auto;min-width:0;
  padding:11px 32px !important;border-radius:999px !important;
  font-family:var(--ck-disp,"Fraunces",Georgia,serif);font-size:17px}
#pauseOv .pausepanel .adslot.pausead{
  padding:8px 12px !important;border-radius:8px;margin-bottom:12px;
  font-size:10px;letter-spacing:.4px;min-height:0}

/* =============================================================================
   SETTINGS MENU — same enamel, every card (owner 2026-10-05, report rmuvirm9m6v6
   "same treatment in cups and settings … they look subpar")
   The gear's menu reuses .bigbtn / .btn / .subcard, so it is retoned the way the
   sheet is: teak plaques, terracotta for the primary (SAVE, the best-value tier),
   green for the offer card. Cream ink on the enamel. The ID-card view
   (#paneSettings:not(.view-settings)) is untouched — this only dresses the gear
   menu. Two ids (#homeOv #paneSettings) to clear tin.css's :is()+:not() rules. */
#homeOv #paneSettings .setrow .bigbtn{
  display:flex !important;align-items:center;gap:12px;border:0 !important;border-radius:15px !important;
  padding:13px 15px !important;text-align:left;color:#fff6e9 !important;
  background:linear-gradient(160deg,#6a4a24,#4a3015) !important;
  box-shadow:0 5px 13px rgba(20,10,2,.4),inset 0 1.4px 0 rgba(255,255,255,.18),
             inset 0 -3px 7px rgba(20,12,4,.3),inset 0 0 0 1.3px rgba(28,16,6,.3) !important}
#homeOv #paneSettings .setrow .bigbtn::before{content:none !important}
#homeOv #paneSettings .setrow .bigbtn .bi{flex:0 0 34px;width:34px;height:34px;margin:0 0 0 auto !important;
  display:flex;align-items:center;justify-content:center;font-size:18px !important;
  background:rgba(255,246,225,.14);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
#homeOv #paneSettings .setrow .bigbtn .bt{font-family:var(--ck-disp,"Fraunces",Georgia,serif) !important;
  font-size:16px !important;font-weight:700 !important;color:#fff6e9 !important}
#homeOv #paneSettings .setrow .bigbtn .bs{font-size:10.5px !important;color:rgba(255,246,225,.9) !important}

/* the Remove-ads offer card → green enamel; its two tiers inside: teak / terracotta */
#homeOv #paneSettings .subcard{border:0 !important;border-radius:15px !important;
  background:linear-gradient(160deg,#5f6e37,#43501f) !important;color:#fff6e9 !important;
  box-shadow:0 5px 13px rgba(20,10,2,.4),inset 0 1.4px 0 rgba(255,255,255,.18),
             inset 0 -3px 7px rgba(20,12,4,.3),inset 0 0 0 1.3px rgba(28,16,6,.3) !important}
#homeOv #paneSettings .subcard::before{content:none !important}
/* DARK INK ON THE TAN CARD (owner 2026-10-10: "darken it"). These three were
   cream #fff6e9 — fine on the dark enamel this card used to be, but the card is a
   light tan gradient (#e3d0a1 -> #cfb478) now, and cream on it measured 1.4-1.9:1.
   Warm browns from the perk line's family, measured at BOTH gradient ends:
   title 7.9 / 6.0:1, subtitle 8.9 / 6.7:1, footer note 6.1 / 4.6:1 (it sits at the
   darker bottom). The price cards keep cream — they are dark brown enamel. */
#homeOv #paneSettings .subcard .sub-h{color:#5a2810 !important}
#homeOv #paneSettings .subcard .sub-sub{color:#3f2a10 !important}
#homeOv #paneSettings .subcard .sub-note{color:#5c4318 !important}
#homeOv #paneSettings .subcard .subtier{border:0 !important;border-radius:12px !important;color:#fff6e9 !important;
  background:linear-gradient(160deg,#6a4a24,#4a3015) !important;
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.18),inset 0 0 0 1.2px rgba(28,16,6,.35) !important}
#homeOv #paneSettings .subcard .subtier *{color:#fff6e9 !important}

/* SAVE and any primary → terracotta pill, sized to its text */
#homeOv #paneSettings .setrow .btn.primary{
  background:linear-gradient(160deg,#a8472a,#7e2f17) !important;color:#fff6e9 !important;
  border:0 !important;border-radius:999px !important;padding:10px 24px !important;width:auto !important;flex:0 0 auto;
  font-family:var(--ck-disp,"Fraunces",Georgia,serif) !important;font-weight:700 !important;
  box-shadow:0 3px 8px rgba(20,10,2,.35),inset 0 1.4px 0 rgba(255,235,200,.3) !important}

/* LANGUAGE + THEME: PLAIN SQUARES, NO CHALK (owner 2026-10-10: "remove the chalk
   lines from Language and Theme options, just make a simple square"). The chalk
   look was chalk-sections.css's ::before outline run through the #ckRoughFine
   roughen filter, which on this cream sheet read as a wobbly double line around
   every chip. Here: no ::before at all, one clean 1.5px border, 9px corners,
   equal height; the selected chip keeps its green enamel fill. Scoped to
   Settings only — the in-game sheet's language row (gamemenu.css) is untouched. */
/* the row itself was a 999px pill with overflow:hidden and a hairline border
   (the old segmented control) — it clipped the first and last chip round and drew
   a faint line behind them, so it is flattened to a plain flex row */
#homeOv #paneSettings .langsel{display:flex;flex-wrap:wrap;gap:8px;border:0 !important;
  border-radius:0 !important;overflow:visible !important;background:none !important}
#homeOv #paneSettings .langsel button::before{content:none}
#homeOv #paneSettings .langsel button{display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-width:48px;height:42px;padding:0 14px !important;border-radius:9px !important;
  border:1.5px solid #c4a26b !important;background:#f8f0de !important}
/* language / theme chips: warm the selected one to green + brass (keeps the cream chip row) */
#homeOv #paneSettings .langsel button.on{border-color:#43501f !important;
  background:linear-gradient(160deg,#5f6e37,#43501f) !important;color:#fff6e9 !important;
  box-shadow:inset 0 0 0 1.6px rgba(236,207,134,.8) !important}

/* =============================================================================
   CUPS — enamel on the interactive controls (owner 2026-10-05, report
   rmuvirm9m6v6). The gold match-length toggle, the beige game-picker tiles, the
   call-your-shot row and the gold Flip & Start become the sheet's Direction A
   enamel: teak picks, green "on", terracotta Flip. The red Premier League banner
   stays (terracotta, already on-palette) and the cream .lg-card info panels stay
   cream — they are the reading surfaces (the white the owner wanted kept) and
   their reward-icon wells assume a light card. Scoped #homeOv #paneTour (2 ids),
   loads after league.css so it wins source-order ties. */
/* the game-picker tiles → teak plaques, cream ink (picked & un-picked identical,
   as league.css intends — the selection signal was removed on purpose) */
#homeOv #paneTour .lg-pick,
#homeOv #paneTour .lg-pick.sel{
  border:0 !important;border-radius:11px !important;color:#fff6e9 !important;
  background:linear-gradient(160deg,#6a4a24,#4a3015) !important;
  box-shadow:0 4px 10px rgba(16,8,2,.4),inset 0 1.3px 0 rgba(255,255,255,.16),inset 0 0 0 1.1px rgba(28,16,6,.35) !important}
#homeOv #paneTour .lg-pick .lg-pn,#homeOv #paneTour .lg-pick b{color:#fff6e9 !important}
/* the 3 / 5-match series toggle → teak off, green on with a brass keyline */
#homeOv #paneTour .lg-series{border:0 !important;border-radius:11px !important;color:#f0dcb2 !important;
  background:linear-gradient(160deg,#6a4a24,#4a3015) !important;
  box-shadow:inset 0 1.2px 0 rgba(255,255,255,.14),inset 0 0 0 1.1px rgba(28,16,6,.35) !important}
#homeOv #paneTour .lg-series.on{color:#fff6e9 !important;
  background:linear-gradient(160deg,#5f6e37,#43501f) !important;
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.2),inset 0 0 0 1.6px rgba(236,207,134,.8) !important}
/* call your shot → teak card, cream copy; chosen → green */
#homeOv #paneTour .lg-board .tourcall{border:0 !important;border-radius:11px !important;
  background:linear-gradient(160deg,#6a4a24,#4a3015) !important;
  box-shadow:0 4px 10px rgba(16,8,2,.4),inset 0 1.3px 0 rgba(255,255,255,.16),inset 0 0 0 1.1px rgba(28,16,6,.35) !important}
#homeOv #paneTour .lg-board .tourcall *{color:#fff6e9 !important}
/* legible.css:50 forces .tcall-tx span dark (#5f4520) for the old light card,
   at higher specificity + !important — out-specify it for the teak card */
#homeOv #paneTour .lg-board .tourcall .tcall-tx span{color:#fff6e9 !important}
#homeOv #paneTour .lg-board .tourcall.on{background:linear-gradient(160deg,#5f6e37,#43501f) !important;
  box-shadow:inset 0 0 0 1.6px rgba(236,207,134,.8) !important}
/* Flip & Start → the one terracotta primary */
#homeOv #paneTour .lg-toss{border:0 !important;border-radius:13px !important;color:#fff6e9 !important;
  background:linear-gradient(160deg,#a8472a,#7e2f17) !important;
  box-shadow:0 5px 13px rgba(20,10,2,.42),inset 0 1.5px 0 rgba(255,235,200,.3) !important}
#homeOv #paneTour .lg-toss span,#homeOv #paneTour .lg-toss b{color:#fff6e9 !important}