/* ==========================================================================
   THE UTILITY CLUSTER — one row, four games.

   The doors a player can ASK the game something through, pinned to the
   cabinet's top-right. Three of the four already agreed on this geometry and
   drifted only in the details that are hardest to see side by side: Dice's
   shield was 22px where its siblings' was 19, Plinko's #fairBtn was missing
   the .ub class and re-declared half of it locally, and BirdCrash was a
   different species entirely — plated circles across three !important layers,
   with a gear where the house draws sliders.

   THE OPEN STATE IS NOT DECORATION. Plinko was the only game that drew one, so
   in Dice and Mines an open door looked exactly like a closed one and the only
   way to tell which panel you were in was to read it. [aria-expanded] carries
   it here for every game. There is a focus ring now, too: no game had one.

   ---- THUMB PIXELS, NOT CSS PIXELS ----

   Plinko and BirdCrash do not resize their cabinet, they SCALE it: #frame
   carries transform:scale(--fit) and everything inside is authored at a base
   size and multiplied. So a 44px button is 44px only when the scale is 1. At
   844x390 Plinko's fit lands near 0.6 and the same declaration renders a 25px
   target — measured, in the mobile sweep, not predicted. BirdCrash's own
   source names the trap ("a control's CSS height and the height a thumb
   actually gets are different numbers — on a phone they differ by nearly
   half") and solves it locally for its steppers; the cluster needs the same
   arithmetic or the touch rung is a number that never reaches a thumb.

   --k is the cabinet's rendered scale, CLAMPED TO 1 and written by chrome.js.
   Every size below divides by it, so the row holds its nominal size when the
   cabinet shrinks and is left alone when the cabinet grows. Dice and Mines
   resize rather than scale, so --k is 1 there and the calc() is a no-op.
   ========================================================================== */

#corner{
  --k: 1;                /* cabinet scale, damped above 1, from chrome.js */
  /* 42/22/19 -> 36/19/17 (owner, 2026-08-31: "way too big on large monitors").
     The row is the quietest thing on the board — four questions the player
     asks once — and at 42 it was competing with the lockup for the corner.
     The touch rung below keeps its own numbers: a thumb target is a floor,
     not a taste. */
  --door: 36px;
  --glyph: 19px;
  --shield: 17px;
  --gap: 6px;
  --top: 18px;
  --right: 26px;

  position:absolute;
  top:calc(var(--top) / var(--k));
  right:calc(var(--right) / var(--k));
  z-index:7;
  display:flex; align-items:center;
  gap:calc(var(--gap) / var(--k));
}

#corner .ub{
  width:calc(var(--door) / var(--k));
  height:calc(var(--door) / var(--k));
  border-radius:calc(11px / var(--k));
  flex:none;
  display:grid; place-items:center;
  padding:0; border:0; background:none; cursor:pointer;
  color:#5A6070;                                  /* lint-allow-raw-color — house chrome ink, pre-tenant */
  transition:color .16s, background .16s;
}
#corner .ub svg{
  width:calc(var(--glyph) / var(--k));
  height:calc(var(--glyph) / var(--k));
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

@media (hover:hover){#corner .ub:hover{ color:#fff; background:rgba(255,255,255,.06); }}

/* A DOOR THAT IS OPEN SAYS SO. */
#corner .ub[aria-expanded="true"]{ color:#fff; background:rgba(255,255,255,.09); }

/* A SWITCH THAT IS OFF SAYS SO, and it says it twice: the glyph swaps (see
   .sw/.sx below) and the whole control drops to the resting ink, so the state
   reads from across the board without resolving the drawing. */
#corner .ub[aria-pressed="false"]{ color:#3E4350; }        /* lint-allow-raw-color — the muted rung of the same ink */
@media (hover:hover){#corner .ub[aria-pressed="false"]:hover{ color:#8C94A6; }}

#corner .ub:focus-visible{
  outline:2px solid var(--cp-red-hi, #F24235);
  outline-offset:2px;
}

/* ---- the fairness door carries its name, because it is the one control here
   making a CLAIM rather than opening a list. It is the first thing to shed
   when the row runs out of room -- 12.5px of text is worth ~90px of row, a
   whole rung bought before any button has to shrink. ---- */
#corner #fairBtn{
  width:auto;
  padding:0 calc(14px / var(--k)) 0 calc(11px / var(--k));
  display:flex; align-items:center; gap:calc(8px / var(--k));
  color:#7B8296;                                  /* lint-allow-raw-color */
  font:600 calc(12.5px / var(--k))/1 var(--ui, var(--font-body, inherit));
  letter-spacing:.02em;
}
#corner #fairBtn .ic{ display:grid; place-items:center; color:var(--cp-red-hi, #F24235); }
#corner #fairBtn .ic svg{
  width:calc(var(--shield) / var(--k));
  height:calc(var(--shield) / var(--k));
}

/* ---- the sound switch draws its own state. aria-pressed is the single
   source; there is no class to drift out of sync with the label. ---- */
#corner .sx{ display:none; }
#corner [aria-pressed="false"] .sw{ display:none; }
#corner [aria-pressed="false"] .sx{ display:block; }

/* ==========================================================================
   THE LADDER. data-rung is written by chrome.js from the cabinet's RENDERED
   box, so it is chosen in the same pixels a thumb lands in. Each rung restates
   its whole geometry through the variables above rather than overriding two
   properties and inheriting a third from the rung above it.
   ========================================================================== */

/* THE WORD COMES OFF ON WIDTH — it is ~90px of row, and whether it fits depends
   on how much row there is, not on how tall the cabinet is. Tying it to a rung
   whose gate included height hid it at 900x520: 900px across, and the word came
   off for want of forty pixels of height. Dice's own suite asks for it there.

   The door squares in the SAME rule, which is what stops "Provably Fair"
   wrapping inside a squared box and spilling through the frame's right edge —
   the defect Dice hit when the two were governed separately. */
#corner:not([data-label]) .flab{ display:none; }
#corner:not([data-label]) #fairBtn{
  width:calc(var(--door) / var(--k));
  padding:0; display:grid; place-items:center;
}

/* These come down with the base or the ladder inverts: the base dropped to 36,
   and tight at its old 38 would have been LARGER than the roomy rung above it
   — a row that grows as its cabinet shrinks. Same 14% cut, monotonic again:
   36 -> 34 -> 32, with touch still standing apart at 44. */
#corner[data-rung="tight"]{ --door:34px; --glyph:18px; --shield:16px; --gap:3px; --top:12px; --right:14px; }
#corner[data-rung="tight"] .ub{ border-radius:calc(10px / var(--k)); }

#corner[data-rung="tiny"]{ --door:32px; --glyph:17px; --shield:15px; --gap:3px; --top:12px; --right:14px; }
#corner[data-rung="tiny"] .ub{ border-radius:calc(9px / var(--k)); }

/* THE ONE RUNG THAT GOES UP. A thumb needs more than a cursor does, so the
   smallest screens get the BIGGEST targets -- the opposite of what shrinking
   everything at every breakpoint would do. 44 is the floor, and because every
   size here divides by --k it is 44 RENDERED px, not 44 authored ones. */
#corner[data-rung="touch"]{ --door:44px; --glyph:22px; --shield:20px; --gap:2px; }
#corner[data-rung="touch"] .ub{ border-radius:calc(12px / var(--k)); }

/* The notch, on every game rather than the two that remembered it. */
#corner[data-safe]{
  top:calc(var(--top) / var(--k) + env(safe-area-inset-top, 0px));
  right:calc(var(--right) / var(--k) + env(safe-area-inset-right, 0px));
}

@media (prefers-reduced-motion: reduce){
  #corner .ub{ transition:none; }
}


/* ==========================================================================
   THE LOCKUP HOLDS ITS SIZE, like the row above it and the dialog over it.

   Plinko and BirdCrash scale their whole cabinet, so a 26px mark rendered at
   42px in Plinko and 29px in BirdCrash on a 2560 desktop while Dice and Mines
   held 26 -- the same lockup at four sizes, which is exactly what a shared
   logo must not do. --cpinv is 1/scale, published on the scaled box by
   chrome.js; the row and the sheet already divide by it and the lockup was the
   last piece of chrome that did not.

   transform, not a width: the lockup is a two-row grid of two images and a
   caption, and counter-scaling the box keeps every internal relationship the
   games already agreed on. Origin top-left so it stays pinned to its corner.
   ========================================================================== */
.brand{ transform:scale(var(--cpinv, 1)); transform-origin:top left; }
.tick__brand{ transform:scale(var(--cpinv, 1)); transform-origin:left center; }


/* THE LOCKUP SHEDS ON THE ROW'S OWN RUNG, and only at the smallest one. The
   mark is the identity and it never goes; the wordmark and the game name are
   what a narrow cabinet can spare. One rule for four games, against the three
   different thresholds this used to be spelled with. */
[data-chromerung="tiny"] .brand .wm,
[data-chromerung="tiny"] .brand span,
[data-chromerung="tiny"] .tick__brand .wm,
[data-chromerung="tiny"] .tick__brand .gm{ display:none; }