/* Aangan — the in-game menu (js/47-gamemenu.js)
   ===========================================================================
   One ⋯ button in place of six buttons and five language chips, and the tens
   row folded in behind it. Owner 2026-08-01: "Most of the things should be
   hidden behind a button."

   The sheet is deliberately the SAME object as the games drawer in
   almirah.css — a card that comes up off the bottom edge with a pull at its
   top. Two different modal shapes in one app is one too many, and the drawer's
   shape is already the one this game's players have learned. */

/* the button itself: same chalk-plaque skin as its neighbours, just narrower */
#gmOpen{min-width:38px;letter-spacing:1px;font-size:15px;line-height:1}

/* the row it lives in stops wrapping now that there is one thing in it */
body.playing .tools{flex-wrap:nowrap;justify-content:flex-end}

/* ---- the sheet ---- */
.gm-sheet{position:fixed;inset:0;z-index:9400;display:flex;align-items:flex-end;
  justify-content:center;pointer-events:none;
  /* ONE CONSTANT FOR HOW FAR THE CARD SITS OFF THE BOTTOM. It is used twice —
     to lift the card off the carpet when open, and to tuck it away when shut —
     and the bug below happened precisely because those two were written in
     different units and drifted apart. Defined once, they cannot. */
  --gm-lift:calc(11px + env(safe-area-inset-bottom,0px));
  /* and take the whole thing out of the picture once it has finished closing,
     so neither the card nor its upward shadow (0 -14px 34px) can paint a line
     along the bottom of a screen that is not showing a menu. The delay is the
     close animation's own duration, so it disappears after the slide, not
     during it. */
  visibility:hidden;transition:visibility 0s linear .26s}
.gm-sheet.on{pointer-events:auto;visibility:visible;transition-delay:0s}
.gm-sheet > .gm-scrim{position:absolute;inset:0;background:rgba(20,12,4,.5);
  opacity:0;transition:opacity .2s ease}
.gm-sheet.on > .gm-scrim{opacity:1}
/* THE SHEET DOES NOT TOUCH THE CARPET (owner 2026-08-04: "the in game option menu
   need a bit spacing as it is touching the carpet line, which is looking improper.
   Make sure to check and apply the fix in every game").
   It ran the full width and sat flush to the bottom, so its top corners butted
   straight into the carpet's floral border columns and its edge cut the border
   line. It is a card lying ON the carpet, so it now keeps a margin all the way
   round and is rounded on all four corners. One rule, and every game gets it —
   this sheet is the shared in-game menu, not a per-game one. */
.gm-sheet > .gm-card{position:relative;width:calc(100% - 22px);max-width:520px;box-sizing:border-box;
  margin:0 0 var(--gm-lift);
  padding:26px 15px 18px;
  border-radius:16px;
  /* haldi paper (owner 2026-08-04) — was #f6ecd6, a near-white the plaques
     then sat on, so the sheet read as white on white. The dot field is what
     stops it from being flat colour. */
  background:var(--hp-field), var(--hp-paper-sheet);
  background-size:var(--hp-field-size), auto;
  box-shadow:0 -14px 34px rgba(16,9,2,.5), 0 -1px 0 rgba(255,248,228,.45) inset;
  /* THE SHEET WAS NEVER FULLY LEAVING THE SCREEN (owner, 2026-08-13: "Look at
     the bottom there is a window. Remove it." — a cream band with the grip
     showing, on the COURTYARD, where there is no in-game menu to open).
     translateY(102%) moves the card 102% of its OWN HEIGHT, but the card is
     also held above the bottom edge by margin var(--gm-lift). Those are
     different quantities and the 2% was never going to cover the margin:
       measured at 390x844 with a 433px card and no home indicator —
         translate 441.66px, card top lands at 842 in an 844 viewport = 2px showing
       on the owner's iPhone, where env(safe-area-inset-bottom) is ~34px, the
       margin becomes 45px and the peek grows to ~36px — enough to show the
       grip, which sits at top:9px of the card. That is the band in the photo.
     The percentage was doing arithmetic on the wrong quantity. Translate by
     the full height PLUS the exact lift, and the card's top lands on the
     viewport's bottom edge at any screen size and any inset. */
  transform:translateY(calc(100% + var(--gm-lift)));
  transition:transform .26s cubic-bezier(.25,.9,.3,1)}
.gm-sheet.on > .gm-card{transform:translateY(0)}

.gm-sheet .gm-grip{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:48px;height:5px;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,#c3ab7c,#9a8353)}
/* the grip needs a thumb-sized area, not a 5px one */
.gm-sheet .gm-grip::before{content:"";position:absolute;left:-80px;right:-80px;top:-9px;bottom:-13px}

/* THE GAME'S NAME, at the top of the sheet. Owner 2026-08-08: "in top of the in
   game option menu. Show which game is user playing." It sits under the grip —
   which is absolutely positioned at top:9px — so the strip needs its own top
   margin to clear it rather than relying on the grip taking space it does not
   take. Same haldi-paper ink as the buttons, one step quieter, so it reads as a
   heading and not a sixth control. */
.gm-sheet .gm-title{
  margin:14px 0 10px;text-align:center;
  font-family:var(--ck-disp,serif);font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--hp-title,#5c4324);
  padding-bottom:9px;border-bottom:1px solid rgba(120,90,45,.20)}

/* THE MOVED BUTTONS LOSE THEIR TEXT ON A LIGHT SHEET, and the render is the
   only reason I know. They are chalk-skinned — their lettering is a near-white
   `--ck-chalk` meant for a dark room — so lifting them onto a cream card left
   Rules / Change Game / Exit as pale ghosts you could barely read.

   Same trap the almirah drawer hit, and the same fix tin.css already uses:
   flip the chalk TOKENS inside the card rather than chasing each control with
   its own colour rule. One block here beats six selectors that drift. */
/* TEAK NICHE (owner 2026-08-21 — was marigold slate 2026-08-19; the drawer
   moved to the inside-the-almirah wood and the one-flow rule brings this
   surface with it): redefining the --hp-* tokens THEMSELVES,
   scoped to just this card, rather than touching their shared root definition
   in chalk.css — that root feeds the almirah drawer, the Wall/Group/Tour/
   Settings headers and more (rooms.css), so changing it there would repaint
   five tabs nobody asked to change. This sheet gets the warm terracotta the
   pause screen now uses; everything else keeps the haldi-paper tan it had. */
.gm-sheet .gm-card{
  --hp-paper:linear-gradient(180deg,#241606,#1a0f05 70%,#140c04);
  --hp-paper-sheet:radial-gradient(140% 90% at 30% -10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg,#241606,#1a0f05 70%,#140c04);
  --hp-edge:rgba(255,235,200,.35); --hp-edge-soft:rgba(255,235,200,.22);
  --hp-ink:#fbeed9; --hp-ink-2:#f3ddb8; --hp-ink-3:#e6c9a6; --hp-ink-4:rgba(255,235,200,.4);
  --hp-ink-shadow:0 1px 0 rgba(0,0,0,.25);
  --hp-title:#ffd27a;
  --hp-lift:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.3);
  --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-yellow:#8a5f12; --ck-pink:#9c3a58; --ck-blue:var(--hp-title);
  color:var(--hp-ink)}
.gm-sheet .gm-card .btn{color:var(--hp-ink) !important;text-shadow:var(--hp-ink-shadow) !important;
  background:var(--hp-paper) !important;
  border:1.4px solid var(--hp-edge) !important;box-shadow:var(--hp-lift) !important}
/* Exit keeps its own colour — it is the one with consequences — but on paper
   rather than the pale pink plastic it was, so it belongs to the same sheet. */
.gm-sheet .gm-card #exitBtn{background:linear-gradient(180deg,#c87c66,#b4644e 62%,#a45340) !important;
  border-color:rgba(112,42,26,.7) !important;color:#fff0e9 !important;
  text-shadow:0 1px 1px rgba(80,26,14,.55) !important;
  --ck-chalk:#fff0e9; --ck-chalk-2:rgba(255,240,233,.86); --ck-shadow:0 1px 1px rgba(80,26,14,.55)}
.gm-sheet .gm-card .gm-tens{color:var(--hp-ink)}
.gm-sheet .gm-card .gm-tens *{color:var(--hp-ink) !important;text-shadow:none !important;opacity:1 !important}
.gm-sheet .gm-card .langsel button{color:var(--hp-ink) !important;
  background:var(--hp-paper) !important;border:1px solid var(--hp-edge) !important}
.gm-sheet .gm-card .langsel button.on{background:linear-gradient(180deg,#f2c96a,#dda93c) !important;
  color:#3a2606 !important;border-color:rgba(120,86,32,.6) !important}

/* the moved controls, laid out as a list rather than a cramped toolbar */
.gm-sheet .gm-items{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.gm-sheet .gm-items > .btn{width:100%;box-sizing:border-box;padding:9px 10px;
  /* the mockup went tighter still (34px), but that undercuts the 40-44px
     touch-target floor this app's older audience actually needs (see the
     team-colour contrast note elsewhere in this file's history) — 40px
     keeps most of the density win without trading away tap accuracy. */
  font-size:12.5px;min-height:40px;
  /* JUST THE WORD, CENTRED (owner 2026-08-04: "remove the icons. and make text
     center align"). label() in 47-gamemenu.js no longer paints a glyph, so there is
     one thing in the box and it sits in the middle. */
  display:flex;align-items:center;justify-content:center;text-align:center;
  /* SQUARED, LIKE EVERYTHING ELSE IN HERE (owner 2026-08-04, mockup A).
     These inherit .btn's `border-radius:999px`, so five lozenges sat above a row
     of 6px chips and a slate-cornered card — three different corner radii in one
     sheet, which is most of why it read as unfinished. 9px is the card's 16px
     stepped down, and it is the same figure the language switch uses. */
  border-radius:9px}
/* PAIRED, NOT STACKED SIX DEEP (owner 2026-08-19: "wasting too much real
   estate due to bigger buttons... give me the menu sheet option shorter,
   better if we can fit two option in one row"). Rules and Change Game used
   to span the full row each (below is the 2026-08-04/08-08 history of why —
   kept for the record since the reasoning about holes in the grid still
   matters, it just resolves differently now that Report a Problem exists to
   fill one): Pause pairs with Sound, Rules pairs with Change Game, and the
   two buttons with real consequences — Report a Problem and Exit — are the
   only ones left standing alone on their own row. Four rows instead of six. */
.gm-sheet .gm-items > #reportBtn{grid-column:1/-1;order:5}
.gm-sheet .gm-items > #muteBtn{order:2}
.gm-sheet .gm-items > #pauseBtn{order:1}
.gm-sheet .gm-items > #rulesBtn{order:3}
.gm-sheet .gm-items > #changeGameBtn{order:4}
/* Exit spans the row and sits apart — it is the one with consequences */
.gm-sheet .gm-items > #exitBtn{grid-column:1/-1;margin-top:5px;border-radius:9px;order:6}

/* the language chips must not wrap into a clipped last item — five of them at
   this size fit one row only if they are allowed to shrink together */
/* THE CONTAINER IS WHAT WAS CUTTING THEM (owner 2026-08-04: "see the edge cutting
   from both the circular end in language, make it look like square instead of
   circular"). `.lang` in styles.css is `border-radius:999px; overflow:hidden` — a
   pill that CLIPS its children, so however square the chips themselves are, the
   first and last get a half-circle bitten out of their outer edge. Setting the
   radius on the buttons alone did not touch it, and a computed-style check on the
   button read a perfectly correct 6px while the render still showed the curve: the
   round corner belonged to the parent.

   ONE SWITCH NOW, NOT FIVE LOOSE CHIPS (owner 2026-08-04, mockup A). The gaps are
   gone and the frame is back on the container, so the five read as a single
   segmented control with the current language lit — which is what a five-way
   choice should look like, and the same object a phone's own language picker is.
   The clipping trap above is genuinely fixed rather than dodged: the container can
   carry `border-radius` and `overflow:hidden` again BECAUSE its children are now
   square, so there is no curve of theirs for it to bite into. Its clip is what
   rounds the two outer ends of the strip, which is the only place a curve belongs. */
.gm-sheet .gm-lang .langsel{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%;
  border:1px solid var(--hp-edge);border-radius:9px;overflow:hidden;
  background:rgba(120,88,40,.08)}
.gm-sheet .gm-lang .langsel button{padding:11px 4px;font-size:13px;width:100%;box-sizing:border-box;
  /* segments, so: no radius of their own, and a hairline between rather than a gap */
  border-radius:0 !important;
  border:0 !important;border-right:1px solid var(--hp-edge) !important;
  background:none !important}
.gm-sheet .gm-lang .langsel button:last-child{border-right:0 !important}
/* the lit segment. Restated here because the rule that used to paint it also set
   a border, and these have none — it comes after that block on purpose. */
.gm-sheet .gm-card .langsel button.on{
  background:linear-gradient(180deg,#f2c96a,#dda93c) !important;color:#3a2606 !important}

/* the tens, folded in from the row that used to sit across the top */
.gm-sheet .gm-tens{margin-top:12px;padding-top:10px;border-top:1px solid var(--hp-edge-soft);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.gm-sheet .gm-tenslbl{width:100%;text-align:center;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hp-dim);margin-bottom:2px}

/* Only the box. The langsel's own layout is the 5-column grid set above, and it
   must not be restated here: this block used to re-declare `display:flex;
   flex-wrap:wrap` plus its own padding, which came later in the file and so
   quietly beat the grid. The five chips wrapped to five FULL-WIDTH rows and ate
   roughly half the sheet — visible in the owner's own screenshot of 2026-08-04
   and in every render since, while the comment four lines up went on explaining
   why they were a single row. Two rules for one thing, and the second won. */
.gm-sheet .gm-lang{margin-top:12px;display:flex;justify-content:center}

/* THE TENS ROW GOES BACK ON THE BOARD (owner 2026-08-04: "Tens are not showing
   on the board it is showing in game menu option. Adjust below ser and make sure
   it wont overlap with something also show which team taken the tens").

   It was hidden here on 2026-08-01 as "reference, not live state". In Mindi the
   four tens ARE the score — they are the only cards that count — so which of
   them has gone and to whom is the most live thing on the screen. It is back
   where it was, and the sheet no longer carries a copy: two places showing the
   same four coins is how they drift.

   It needs no positioning rule. #tensrow already sits directly after #board in
   index.html, so "below the ser" is where the document puts it; the styling
   below only has to keep it clear of the row above and legible on the weave. */

@media (prefers-reduced-motion: reduce){
  .gm-sheet > .gm-card, .gm-sheet > .gm-scrim{transition:none}
}