/* =========================================================================
   AANGAN · THE PAINTED ALMIRAH — the games room                    (skin)
   -------------------------------------------------------------------------
   A SKIN AND NOTHING ELSE. Every game keeps its `.gcard[data-g]` element and
   all of its children, so 12-home.js's selection, the Confirm button and the
   rules sheet never know this happened. js/42-almirah.js paints the cupboard
   into a `.alm-case` layer and positions the cards into its compartments;
   this file only restyles what is already there.

   Loads last, after chalk-sections.css, because that stylesheet gives every
   .gcard a chalk outline and a flex row, and both have to go.
   ========================================================================= */

/* ---------------- the wall ----------------
   ABSOLUTE, NOT FIXED, and that is measured rather than assumed: `#paneGames`
   is itself a containing block, so a fixed child resolves against the pane
   instead of the viewport and the first attempt came out as a pink band
   across the middle of the courtyard with grass either side of the cupboard.
   Absolute over the pane covers the pane's whole box, edge to edge, and
   scrolls with it — which is what a wall should do. */
/* min-height, because the room has to reach the bottom of the screen. Once
   the selection controls moved into the drawer (2026-07-31) the pane became
   only as tall as the cupboard, and it ended in a hard line with pale wall
   under it — the floor this gradient paints simply stopped mid-air. The pane
   now fills at least the scroller, so .alm-room's floor runs off the bottom
   the way a floor does. */
#homeOv #paneGames{position:relative;z-index:1;min-height:100%;box-sizing:border-box}
/* the identity row is a SIBLING of the pane and both sit at z-index 1, so the
   pane — being later — would paint the wall over the avatar and the marbles.
   One step up puts the row back on top, scoped to this tab being the open one
   so no other tab's stacking is touched. */
#homeOv:has(#paneGames.on) .homehead{z-index:2}
/* THE COURTYARD MUST NOT SHOW THROUGH AT THE TOP. Owner saw lawn in the strip
   behind the identity row (2026-07-31), on the real phone rather than in a
   test viewport — and the cause is the one already measured for this pane:
   #paneGames is a containing block, so nothing inside it, fixed or absolute,
   can reach above the pane's own box, and the header sits above that box.
   Bleeding the wall upwards only works until a phone with a taller status bar.
   So the lawn is taken out of the picture entirely while this room is open,
   and #homeOv itself carries the wall's colour behind the header. Removing
   it rather than covering it also stops a few dozen grass tufts animating in
   a tab where nobody can see them. */
#homeOv:has(#paneGames.on) > .ck-floor{display:none}
#homeOv:has(#paneGames.on){background:#f0d6c6}
/* the side bleed is still wanted: the pane is inset from the screen, so
   `inset:0` left a strip of courtyard down both sides of the cupboard */
#homeOv #paneGames > .alm-room{
  position:absolute;top:0;bottom:0;left:-40px;right:-40px;
  z-index:0;pointer-events:none;
  background:
    /* limewash grain: irregular, and on a tile big enough that the eye cannot
       find the repeat — a small tile with a few dots in it is polka dots */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='19'%3E%3Cg fill='%235a3c19' fill-opacity='.15'%3E%3Ccircle cx='2.4' cy='3.1' r='.42'/%3E%3Ccircle cx='16.2' cy='5.8' r='.38'/%3E%3Ccircle cx='20.4' cy='11.6' r='.34'/%3E%3Ccircle cx='3.6' cy='16.4' r='.36'/%3E%3C/g%3E%3Cg fill='%23fffaeb' fill-opacity='.2'%3E%3Ccircle cx='6.1' cy='8.9' r='.24'/%3E%3Ccircle cx='12.8' cy='14.2' r='.28'/%3E%3Ccircle cx='18.1' cy='17.8' r='.22'/%3E%3C/g%3E%3C/svg%3E"),
    /* The wall is wall where the cupboard hangs and FLOOR below it. That is
       not decoration: every control under the almirah — the player stepper,
       the variant toggles, the big buttons — is drawn in chalk, in pale
       strokes meant for the dark courtyard, and on warm sand they washed out
       to nearly nothing. Taking the bottom of the room down into shadow gives
       them back the ground they were designed against, and a room that goes
       dark towards the floor is what a room does. */
    linear-gradient(180deg,
      #f0d6c6 0px,
      #e3c0aa calc(var(--alm-floor,760px) * .58),
      #d9ae76 calc(var(--alm-floor,760px) - 40px),
      #a97f4e calc(var(--alm-floor,760px) + 14px),
      #5d411f calc(var(--alm-floor,760px) + 90px),
      #33240f calc(var(--alm-floor,760px) + 240px));
  background-color:#2b1e0d}

/* ---------------- the cases, side by side ----------------
   A WALL YOU PAN ALONG (owner 2026-07-31). Each cupboard is a screen wide;
   you swipe sideways and it snaps to the next one. `overscroll-behavior-x:
   contain` matters more than it looks: without it, swiping past the last
   case hands the gesture to the page and on iOS that is the back-navigation
   swipe. */
/* THE 6px THAT MADE THIS ROOM SCROLL. This margin used to be `6px 0 4px`, and
   #paneGames has no padding or border, so the 6px COLLAPSED THROUGH the pane's
   top edge and became the pane's own margin: the room started 6px lower while
   its height stayed the same, and homeBody ended up 6px taller than the screen.
   Measured, not reasoned — a Range over every child node of #homeBody found a
   6px band that no node occupied.
   The gap is still 6px; it is now the pane's padding-top (below), where it is
   INSIDE the box and counts. Removing the gap altogether would push the tassel
   against the identity row. */
#homeOv #paneGames{padding-top:6px}
#homeOv #gamewrap{position:relative;display:block;margin:0 0 4px;padding:0;gap:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
#homeOv #gamewrap::-webkit-scrollbar{display:none}
#homeOv #gamewrap > .alm-case{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:0 0;background-size:100% 100%}
/* the snap targets. The cards themselves cannot carry scroll-snap-align —
   they would each become a stop and the swipe would catch on every
   compartment — so one invisible full-width anchor per case does it. */
#homeOv #gamewrap > .alm-snaps{position:absolute;left:0;top:0;z-index:0;
  display:flex;pointer-events:none}
#homeOv #gamewrap > .alm-snaps > i{display:block;flex:none;height:100%;
  scroll-snap-align:start;scroll-snap-stop:always}
/* the owner cut "Everyone's Playing"; 12-home.js still builds the headings,
   so they are hidden here rather than removed from a module that is not
   this one's to edit */
#homeOv #gamewrap > .almshelf-h{display:none !important}

/* ---------------- one game, in its compartment ----------------
   The compartment IS the tap target: no card, no pill, no chevron. You are
   reaching into a hole in a cupboard. */
#homeOv #gamewrap .gcard{
  position:absolute;display:block;margin:0;padding:0;border:0;border-radius:0;
  background:none !important;box-shadow:none;overflow:hidden;
  transition:transform .15s ease}
/* chalk-sections.css outlines every .gcard in chalk; not in this room */
#homeOv #gamewrap .gcard::before,#homeOv #gamewrap .gcard::after{content:none !important}
#homeOv #gamewrap .gcard .gi,#homeOv #gamewrap .gcard .gd,
#homeOv #gamewrap .gcard > div:not([class]){display:none !important}
/* the title still has to exist for screen readers and for the plaque to read
   its text, but the plaque is what is actually shown */
#homeOv #gamewrap .gcard .gt{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

#homeOv #gamewrap .gcard > .alm-goods{position:absolute;inset:0;z-index:2;
  pointer-events:none;line-height:0}
#homeOv #gamewrap .gcard > .alm-goods svg{width:100%;height:100%;display:block}

/* the name, painted on a cream plaque at the foot of its own compartment */
#homeOv #gamewrap .gcard > .alm-nm{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:3px 3px 4px;text-align:center;
  font-family:var(--ck-disp);line-height:1.1;
  color:#17568f;letter-spacing:.2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
  background:linear-gradient(180deg,#f5f0e2,#e4dcc6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 -2px 4px rgba(11,47,78,.30);
  border-top:1.4px solid rgba(28,111,180,.6)}

/* Taking a box out is the whole selection idea, so the selected compartment
   gets nothing else — no ring, no tint. The art already says it. What it does
   get is the plaque going brass, which survives at a glance and in a
   screenshot where a subtle change of contents might not. */
#homeOv #gamewrap .gcard.sel > .alm-nm{
  color:#5a3a08;background:linear-gradient(180deg,#ffe6a8,#e8c46e);
  border-top-color:rgba(122,80,12,.7)}
#homeOv #gamewrap .gcard:active{transform:scale(.985)}
#homeOv #gamewrap .gcard:focus-visible{outline:2px solid #ffdf9e;outline-offset:-3px}

/* the sub-choices and the buttons sit on the sand under the cupboard */
#homeOv #paneGames .subchoose,#homeOv #paneGames .cta{position:relative;z-index:1}

@media (prefers-reduced-motion: reduce){
  #homeOv #gamewrap .gcard{transition:none}
}

/* ---------------- the swipe affordance ----------------
   Outside the scroller, so they do not travel with it. A snap scroller whose
   next case is entirely off-screen gives you no reason to try swiping at
   all — these are the only thing saying there is more wall. */
#homeOv #paneGames > .alm-dots{
  position:relative;z-index:2;display:flex;justify-content:center;gap:7px;
  margin:2px 0 10px;pointer-events:none}
#homeOv #paneGames > .alm-dots > i{width:7px;height:7px;border-radius:50%;
  background:rgba(28,80,127,.28);box-shadow:inset 0 1px 1px rgba(11,47,78,.35);
  transition:background .18s ease, transform .18s ease}
#homeOv #paneGames > .alm-dots > i.on{background:#1c6fb4;transform:scale(1.32);
  box-shadow:0 1px 2px rgba(11,47,78,.5)}
@media (prefers-reduced-motion: reduce){
  #homeOv #paneGames > .alm-dots > i{transition:none}
}

/* ======================== THE DRAWER ========================
   Owner 2026-07-31: the selection controls used to sit on the sand below the
   cupboard, which meant the almirah — the thing this room is — was always
   half off the bottom of the screen. Pressing a compartment now raises a
   sheet with that game's name, its options and the ways to start it. Built in
   42-almirah.js by MOVING the existing controls, so their wiring is untouched.

   FIXED TO THE VIEWPORT, and it lives on <body> to get there. Anchored inside
   the pane it could only reach the pane's own bottom edge, and the pane is as
   tall as its content — so the drawer came to rest with a band of bare wall
   underneath it, floating instead of pulled out of the bottom of the screen.
   Fixed positioning inside #paneGames would not have fixed that either: the
   pane is a containing block, the same fact that made the wall an absolute
   layer further up this file. z-index sits just under the Mindori chit, which
   is the only other thing in this app that owns the whole screen. */
/* ONE base selector, and every rule below shares it. A second alternative was
   in this list for a moment and it quietly broke everything: each selector in
   a comma list carries its OWN specificity, `#homeOv ~ .almsheet` is (1,1,0),
   and it beat the `.almsheet.on` rule — so the sheet kept the base
   `visibility:hidden` even with `.on` set. It opened, it was measurably the
   right size in the right place, and it was invisible and untouchable. */
#homeOv > .almsheet{position:fixed;inset:0;z-index:9400;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;visibility:hidden}
#homeOv > .almsheet.on{pointer-events:auto;visibility:visible}
#homeOv > .almsheet .alms-scrim{position:absolute;inset:0;
  background:rgba(26,14,5,.5);opacity:0;transition:opacity .22s ease}
#homeOv > .almsheet.on .alms-scrim{opacity:1}

/* A DRAWER OF THIS ALMIRAH (owner 2026-07-31: match the room). It was plain
   timber, which belongs to no room in this house. Read down its front edge and
   it is the cupboard's own construction, in the cupboard's own paint:

     cobalt lip ....... the case's frame, lit on top and dark under, 5px
     cream band ....... the SAME 22x11 diamond-and-rosette tile the case wears,
                        lifted straight out of 42-almirah.js so the two can
                        never drift apart
     ochre front ...... the painted back of a compartment
     dark inside ...... and then it is an OPEN drawer, so it goes into shadow.
                        Not decoration: every control in here is drawn in chalk,
                        in pale strokes, and on ochre they wash out to nothing —
                        which is the same reason the room's own floor goes dark
                        towards the bottom.

   Square corners, near enough. This cupboard has no radius anywhere on it. */
#homeOv > .almsheet .alms-card{
  position:relative;width:100%;max-width:520px;box-sizing:border-box;
  /* the CARD no longer scrolls — .alms-body does. It used to be the scroller,
     and the pull, the × and the whole painted band are absolutely positioned
     inside it, so scrolling down the options carried the drawer's own head
     off the top of the screen and left you with no way out and no cupboard.
     Column flex + a min-height:0 body keeps the head nailed to the top. */
  max-height:82%;overflow:hidden;display:flex;flex-direction:column;
  padding:60px 15px calc(18px + env(safe-area-inset-bottom,0px));
  border-radius:2px 2px 0 0;
  background:
    /* 1. the cobalt lip */
    linear-gradient(180deg,#4b9ad6 0,#2f7ec0 2px,#1c6fb4 3.6px,#0d3a5f 5px,
      rgba(0,0,0,0) 5px) no-repeat 0 0/100% 5px,
    /* 2. the case's own band, tiled across */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2711%27%3E%3Crect%20width%3D%2722%27%20height%3D%2711%27%20fill%3D%27%23f2ecdc%27%2F%3E%3Cpath%20d%3D%27M5.5%201.5%20L9.5%205.5%20L5.5%209.5%20L1.5%205.5%20Z%27%20fill%3D%27%231c6fb4%27%2F%3E%3Cpath%20d%3D%27M5.5%203.4%20L7.6%205.5%20L5.5%207.6%20L3.4%205.5%20Z%27%20fill%3D%27%23f2ecdc%27%2F%3E%3Ccircle%20cx%3D%275.5%27%20cy%3D%275.5%27%20r%3D%27.85%27%20fill%3D%27%231c6fb4%27%2F%3E%3Cg%20fill%3D%27%233f92a6%27%20transform%3D%27translate%2816.5%2C5.5%29%27%3E%3Cpath%20d%3D%27M0%200%20Q2.5%20-1.2%200%20-4.2%20Q-2.5%20-1.2%200%200%20Z%27%2F%3E%3Cpath%20d%3D%27M0%200%20Q2.5%201.2%200%204.2%20Q-2.5%201.2%200%200%20Z%27%2F%3E%3Cpath%20d%3D%27M0%200%20Q1.2%20-2.5%204.2%200%20Q1.2%202.5%200%200%20Z%27%2F%3E%3Cpath%20d%3D%27M0%200%20Q-1.2%20-2.5%20-4.2%200%20Q-1.2%202.5%200%200%20Z%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%275.5%27%20r%3D%271.3%27%20fill%3D%27%23b49a63%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%275.5%27%20r%3D%27.55%27%20fill%3D%27%23f2ecdc%27%2F%3E%3Crect%20width%3D%2722%27%20height%3D%27.9%27%20fill%3D%27%2312507f%27%2F%3E%3C%2Fsvg%3E") repeat-x 0 5px/22px 11px,
    /* 3. limewash grain over the painted front */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2723%27%20height%3D%2719%27%3E%3Cg%20fill%3D%27rgba%2890%2C60%2C25%2C.17%29%27%3E%3Ccircle%20cx%3D%272.4%27%20cy%3D%273.1%27%20r%3D%27.42%27%2F%3E%3Ccircle%20cx%3D%2716.2%27%20cy%3D%275.8%27%20r%3D%27.38%27%2F%3E%3Ccircle%20cx%3D%2720.4%27%20cy%3D%2711.6%27%20r%3D%27.34%27%2F%3E%3Ccircle%20cx%3D%273.6%27%20cy%3D%2716.4%27%20r%3D%27.36%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27rgba%28255%2C250%2C235%2C.22%29%27%3E%3Ccircle%20cx%3D%276.1%27%20cy%3D%278.9%27%20r%3D%27.24%27%2F%3E%3Ccircle%20cx%3D%2712.8%27%20cy%3D%2714.2%27%20r%3D%27.28%27%2F%3E%3Ccircle%20cx%3D%2718.1%27%20cy%3D%2717.8%27%20r%3D%27.22%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat 0 16px/23px 19px,
    /* 4. THE TEAK NICHE (owner 2026-08-21, picked from three C mockups over
       the terracotta this replaces). The sheet is the INSIDE of the almirah
       now: dark planked teak, so the box you tapped on the shelf stands in
       front of you inside the cupboard. The 2026-08-19 one-flow rule (drawer
       = pause = game menu, one surface) survives the colour: gamemenu.css's
       token block is retoned to the same wood in the same commit. Band and
       cobalt lip above are still untouched — they are the cupboard's face. */
    repeating-linear-gradient(90deg, transparent 0 87px, rgba(12,6,2,.5) 87px 90px),
    linear-gradient(180deg,
      #1c1006 16px, #241606 30px, #3a2410 48px,
      #4a2c14 64px, #4a2c14 55%, #2c1a09 100%);
  box-shadow:0 -1px 0 rgba(11,47,78,.55), 0 -16px 34px rgba(11,24,40,.5);
  /* MARIGOLD SLATE TOKENS, LOCAL TO THIS CARD. Same mechanism as the
     haldi-paper flip below (and gamemenu.css's identical block) — redefine
     the --hp-* tokens themselves, scoped to just this card, rather than
     their shared root in chalk.css. That root also feeds the Wall/Group/
     Tour/Settings headers (rooms.css) and would repaint four tabs nobody
     asked to change. Every .cbtn/.bigbtn/.btn plaque inside this drawer
     already reads its colours from --hp-paper/--hp-ink/--hp-edge (tin.css),
     so this one block retones all of them at once. */
  --hp-paper:linear-gradient(180deg,#241606,#1a0f05 70%,#140c04);
  --hp-paper-sheet:radial-gradient(140% 90% at 30% -10%, rgba(255,240,200,.08), transparent 55%),
    linear-gradient(180deg,#241606,#1a0f05 70%,#140c04);
  --hp-edge:rgba(236,207,134,.4); --hp-edge-soft:rgba(236,207,134,.24);
  --hp-ink:#f0dcb2; --hp-ink-2:#e8d5ac; --hp-ink-3:#cfa76a; --hp-ink-4:rgba(240,220,178,.4);
  --hp-ink-shadow:0 1px 0 rgba(0,0,0,.35);
  --hp-title:#ffd98a;
  --hp-lift:inset 0 1px 0 rgba(236,207,134,.16), inset 0 -2px 4px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.35);
  /* THE INK, FLIPPED AT THE CARD (owner 2026-08-04, and this is the half of
     the haldi change that is easy to miss). tin.css flips the chalk tokens
     inside each PLAQUE, and its comment says why it stops there: "Text OUTSIDE
     a plaque is left alone: it sits directly on a dark room and has to stay
     light." That was true while this drawer ran ochre into near-black. The
     moment the ground became paper it stopped being true, and everything that
     is not a plaque — the player stepper, the BOTS caption, section labels —
     was pale chalk on pale paper and effectively invisible. Rendered at 3x, the
     stepper had all but disappeared. So the tokens flip here as well, once, for
     everything the card contains. */
  --ck-chalk:var(--hp-ink);
  --ck-chalk-2:var(--hp-ink-2);
  --ck-chalk-3:var(--hp-ink-3);
  --ck-chalk-4:var(--hp-ink-4);
  --ck-shadow:var(--hp-ink-shadow);
  --ck-blue:var(--hp-title);
  color:var(--hp-ink)}
#homeOv > .almsheet.on .alms-card{transform:translateY(0)}
/* the stepper is a well cut into the paper, not a plaque on top of it */
#homeOv > .almsheet .alms-body .pstep{
  background:rgba(120,86,38,.10) !important;
  border:1px solid var(--hp-edge-soft) !important;
  box-shadow:inset 0 1px 3px rgba(90,62,24,.18) !important}
#homeOv > .almsheet .alms-body :is(.pnum b,.pnum span,.pbtn){color:var(--hp-ink) !important}
#homeOv > .almsheet .alms-body .pbtn{border-color:var(--hp-edge) !important}

/* the brass pull, on the painted front under the band — the only thing that
   says "drag me", and brass is what this cupboard's fittings are */
/* the pull is a real control now, not a decal: it takes a tap, and the whole
   header strip above the first plaque takes a downward drag (see dragToClose
   in 42-almirah.js). `touch-action:none` is what stops the browser claiming
   the drag as a scroll before the handler ever sees it. */
#homeOv > .almsheet .alms-card{touch-action:pan-y}
#homeOv > .almsheet .alms-grip{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:52px;height:6px;margin:0;border-radius:3px;
  cursor:grab;pointer-events:auto;touch-action:none;
  background:linear-gradient(180deg,#f2d68c,#c9a44a 55%,#8d6d22);
  box-shadow:0 1px 0 rgba(255,246,220,.5) inset, 0 2px 3px rgba(40,24,4,.45)}
/* the strip the drag lives in — invisible, but it has to be a real box or
   there is nothing for a thumb to land on above the first plaque */
#homeOv > .almsheet .alms-grip::before{content:"";position:absolute;
  left:-90px;right:-90px;top:-20px;bottom:-18px;touch-action:none}
/* and the close, painted the way the compartment plaques are lettered */
#homeOv > .almsheet .alms-x{
  position:absolute;top:19px;right:8px;width:34px;height:34px;padding:0;
  font:400 25px/1 Georgia,serif;color:#123f66;
  background:none;border:0;cursor:pointer;opacity:.8;
  -webkit-tap-highlight-color:transparent}
#homeOv > .almsheet .alms-x:active{opacity:1}
#homeOv > .almsheet .alms-x:focus-visible{outline:2px solid #ffdf9e;
  outline-offset:-4px;border-radius:6px}

/* the moved controls. They were laid out for the sand under the cupboard, so
   the only thing that changes is the spacing between them. */
#homeOv > .almsheet .alms-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
#homeOv > .almsheet .alms-body > *{margin:0 0 8px}
#homeOv > .almsheet .alms-body > *:last-child{margin-bottom:0}
#homeOv > .almsheet .alms-body .cta{display:flex;gap:8px}
#homeOv > .almsheet .alms-body .cta .btn{flex:1}
/* DENSER (owner 2026-08-19: "we are wasting too much real estate due to
   bigger buttons... specially when you click on a game and it gives you
   options"). Every control this drawer moves in keeps its generic sizing
   from chalk-sections.css/tin.css/styles.css — built for a screen with one
   or two of them, not five stacked in a sheet. Scoped tighter here only. */
#homeOv > .almsheet .cbtn{padding:9px 6px;min-width:0}
#homeOv > .almsheet .cbtn .big{font-size:15px;margin-bottom:0}
#homeOv > .almsheet .cbtn .sm{font-size:9.5px}
#homeOv > .almsheet .bigbtn{padding:10px}
#homeOv > .almsheet .bigbtn .bi{font-size:19px}
#homeOv > .almsheet .bigbtn .bt{font-size:13.5px}
#homeOv > .almsheet .bigbtn .bs{font-size:10px}
#homeOv > .almsheet .cta .btn{padding:9px 14px;font-size:13px}
#homeOv > .almsheet .pstep{padding:4px 8px}
#homeOv > .almsheet .pstep .pbtn{width:36px;height:36px;font-size:20px}
#homeOv > .almsheet .pstep .pnum b{font-size:21px}

@media (prefers-reduced-motion: reduce){
  #homeOv > .almsheet .alms-card,
  #homeOv > .almsheet .alms-scrim{transition:none}
}

/* ============ THE TEAK NICHE'S FURNITURE (owner 2026-08-21) ============
   The chosen C2 mockup, applied to the REAL controls the sheet relocates.
   Late in the file on purpose: the rules above set colour through tokens,
   these four set the pieces that are not token-shaped. */
/* the game card is the lamplit NICHE the box stands in */
#homeOv > .almsheet #selGameCard{
  background:linear-gradient(180deg,#170e05,#241606) !important;
  border:1px solid #0e0803 !important;border-radius:12px;
  box-shadow:inset 0 8px 14px rgba(0,0,0,.7), inset 0 -2px 0 rgba(236,207,134,.14) !important;
  position:relative;overflow:hidden}
/* the lamp lights the BOX, and the box stands at the card's right edge —
   the first pass lit empty wood on the left (caught at the render) */
#homeOv > .almsheet #selGameCard::before{content:"";position:absolute;right:4px;top:4px;
  width:118px;height:calc(100% - 8px);border-radius:10px;
  background:radial-gradient(closest-side,rgba(255,220,150,.30),transparent);pointer-events:none}
#homeOv > .almsheet #selGameCard .sgi{filter:drop-shadow(2px 3px 4px rgba(0,0,0,.6))}
#homeOv > .almsheet #selGameCard .sgt b{color:var(--hp-title)}
/* the player knobs are BRASS — the one thing you turn */
#homeOv > .almsheet .alms-body .pbtn{
  background:linear-gradient(180deg,#eccf86,#c9a44a 55%,#a5822f) !important;
  border-color:#7a5a24 !important;color:#33270a !important;
  box-shadow:inset 0 1.5px 0 rgba(255,244,214,.8), 0 2px 4px rgba(8,4,1,.4)}
/* a chosen variant glows like brass catching the lamp */
#homeOv > .almsheet .alms-body .cbtn.sel{
  background:linear-gradient(180deg,#8a6220,#5c3f10) !important;
  border-color:#eccf86 !important;color:#ffeec8 !important;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.4), 0 0 10px rgba(236,207,134,.25)}
/* the deal is MARIGOLD — the single bright thing in the cupboard */
/* button#...bigbtn: tin.css reaches (2,2,0) through its :is() and both sides
   carry !important, so this must measure higher, not merely load later */
#homeOv > .almsheet .alms-body button#soloBtn.bigbtn,
#homeOv > .almsheet .alms-body button#glInviteBtn.bigbtn{
  background:linear-gradient(180deg,#f7c95e,#e8912a 60%,#c96f1a) !important;
  border-color:#8a4d10 !important;color:#3b2004 !important;
  text-shadow:0 1px 0 rgba(255,236,180,.5);
  box-shadow:inset 0 1.5px 0 rgba(255,236,180,.8), 0 3px 8px rgba(8,4,1,.5) !important}
#homeOv > .almsheet .alms-body button#soloBtn.bigbtn *{color:#3b2004 !important;text-shadow:none}