/* Copyright (c) 2026 Ascent. All rights reserved. PRIVATE TABLE — https://poker.ascent-web.jp/terms */
/* The action zone —「硝子障子（がらすしょうじ）」
 *
 * One sheet of frosted glass laid into the bottom-right thumb arc, ruled into
 * rows by hairlines. Every action is one full-width line of type: label left,
 * amount right, a lot of space between them, and nothing else. There is no
 * circle, no bezel, no fan and no fill — the sheet is the control.
 *
 * The whole look is four values: a pane tint, a bright hairline for edges, a
 * dim hairline for internal rules, and one row height. Colour appears only
 * where it carries state, and there are exactly four places it does:
 *
 *   1px lime      the clock, across the top edge          (this concerns you now)
 *   1px gold      the rule binding the raise ladder       (these belong together)
 *   1px red       that rule's segment beside オールイン    (past here it is everything)
 *   10% green     a wash under コール                      (matching, not raising)
 *
 * This replaced a fan-shaped dial on 2026-08-09 (owner picked it from five
 * directions). The dial's trigonometry — ARC_RADIUS, arc angles, the 46px
 * bubble floor — is gone with it: the sizes are list items in normal flow now.
 *
 * What did NOT change is `actions.js`'s rules about *when* each control may
 * exist. This file is the look; the frame is still the only authority on
 * whether the pane is on screen at all.
 */

/* ---- the band -------------------------------------------------------- */

/* The pane floats, so this row holds no layout of its own — but it still has
   to hold its *height*. The waiting line below is 56px, and letting this
   collapse to zero would resize the felt on every turn change and drag every
   measured bet-chip position with it. */
.act {
  flex: 0 0 auto;
  position: relative;
  padding: 8px 10px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--bg-lift);
}
.act-primary { min-height: 56px; }

.act-wait {
  min-height: 56px;
  display: grid;
  place-items: center;
  color: var(--ink-4);
  font-size: 13px;
  font-weight: 700;
}

/* ---- the pane -------------------------------------------------------- */

.glass {
  /* One row height, and one place to change it. 52px sits above the 44px tap
     floor with room to spare; on a short screen it drops to the floor itself
     so a fully open ladder cannot run off the top of the phone. */
  --glass-row: 52px;
  --glass-pane-hi: rgba(20, 27, 23, .46);
  --glass-pane-lo: rgba(7, 10, 9, .68);
  --glass-edge: rgba(243, 246, 242, .13);
  --glass-hair: rgba(243, 246, 242, .085);
  /* The danger family, lifted for glass: --danger itself is a fill colour and
     goes muddy as ink on a translucent dark pane. */
  --glass-danger-ink: var(--down);
  --glass-pad: 20px;

  /* Fixed, not absolute: `.screen--table` sets `contain: layout`, which makes
     it the containing block for fixed descendants — so this anchors to the
     bottom-right of the *app column* rather than of a 27-inch monitor. */
  position: fixed;
  right: 12px;
  bottom: calc(10px + var(--safe-bottom));
  /* 260px is the width the direction was drawn at, and it is what a 430pt phone
     gets. Below that the pane yields, because the thing on its left is your own
     two cards: `--you-card-w` is the same token `.you-cards` sizes them with, so
     the pane always stops 8px short of them however they scale. The 40px is
     that clearance plus the row's 14px left padding, plus this pane's own 12px
     inset and the 6px between the cards. */
  width: min(260px, calc(var(--app-w) - 2 * var(--you-card-w) - 40px));
  z-index: 12;                    /* over the felt and your seat, under every overlay */
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass-pane-hi), var(--glass-pane-lo));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  /* The border is an inset shadow so no state change can reflow a row. */
  box-shadow:
    inset 0 0 0 1px var(--glass-edge),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    var(--sh-3);
  overflow: hidden;
  isolation: isolate;
}

/* Without backdrop-filter the pane would be a hole in the felt rather than
   glass, so it becomes an opaque slate instead of a translucent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: linear-gradient(180deg, rgba(14, 19, 16, .92), rgba(7, 10, 9, .96));
  }
}

/* A phone shorter than a 6.1" handset cannot spare 468px for an open ladder.
   Dropping to the tap floor buys 30px and changes nothing else. */
@media (max-height: 760px) {
  .glass { --glass-row: 46px; }
}

/* ---- the clock: one hairline, no dial --------------------------------- */

/* Still `#actTimer`, still driven by `table.js` writing `--turn-progress` on
   it — the bar moved into the pane and lost 4px of height, and that is all. */
.act-timer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  z-index: 2;
  background: rgba(243, 246, 242, .07);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
body.is-your-turn .act-timer { opacity: 1; }
.act-timer i {
  display: block;
  height: 100%;
  width: calc(var(--turn-progress, 1) * 100%);
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  transition: width .25s linear, background .3s;
}
.act-timer.is-urgent i {
  background: var(--danger);
  box-shadow: 0 0 6px rgba(224, 85, 95, .45);
}

/* ---- the turn line ---------------------------------------------------- */

/* Still `#turnFlag`: same element, same three children, same code writing to
   it. It stopped being a lime pill parked on the seam and became the pane's
   own first line, because on a sheet whose whole argument is restraint a
   filled pill would have been the loudest thing on screen by a wide margin —
   and the pane only exists on your turn, so the pill was saying twice what
   its own presence already says. */
.turn-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 38px;
  padding: 0 var(--glass-pad);
  color: var(--lime);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}
.turn-flag > span:first-child { font-weight: 900; }
.turn-flag > * { white-space: nowrap; }
/* What staying in costs. `actions.js` deliberately leaves this empty — the
   コール cell carries the number under the word — so it collapses. The element
   survives because the flag keeps its shape either way. */
.turn-flag-call {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(198, 242, 78, .14);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.turn-flag-call:empty { display: none; }

.turn-flag-secs {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-3);
}
/* Urgent and critical move the *ink*, not a background: there is no filled
   surface here to recolour. */
.turn-flag.is-urgent { color: var(--glass-danger-ink); }
.turn-flag.is-urgent .turn-flag-secs { color: var(--glass-danger-ink); }
.turn-flag.is-urgent .turn-flag-call { background: rgba(224, 85, 95, .16); }
/* Final three seconds: in time with the countdown blips, so the warning lands
   whether the phone is muted or face-up.
 *
 * `* var(--motion)`, like every other timed rule here — it was briefly written
 * as a division, which inverts the knob: at `--motion: 0` the duration became
 * 500s and the number froze mid-flash on whichever colour it had reached
 * instead of holding still in its own. Multiplying gives a 0s animation, which
 * runs no keyframes and leaves the base ink alone. The seconds still turn red
 * with `.is-urgent`; only the blinking goes. */
.turn-flag.is-critical .turn-flag-secs {
  animation: criticalFlash calc(.5s * var(--motion)) steps(2, jump-none) infinite;
}
@keyframes criticalFlash {
  0% { color: var(--glass-danger-ink); }
  100% { color: #fff; }
}
body.is-your-turn .act-timer.is-critical i { background: var(--danger); }

/* ---- the raise ladder --------------------------------------------------
 *
 * A 1px gold rule down the left binds the rows into one group and says whose
 * list this is; the segment beside オールイン turns red, so the point where the
 * list stops being a bet and starts being your whole stack is marked by the
 * rule rather than by a red button.
 *
 * Largest size sits furthest from the thumb — an accidental roll of the thumb
 * lands on ⅓, never on all-in. That is the same ordering the fan had, read
 * bottom-to-top instead of near-to-far.
 */
.glass-list {
  padding: 2px var(--glass-pad) 6px;
  animation: glassRise calc(170ms * var(--motion)) var(--ease-out) forwards;
}
/* `forwards`, not `both`, and no stagger. With `both` the rows fill backwards
   into the keyframe's start during their delay, so anything that stops the
   animation running leaves them offset and half transparent — and a
   backgrounded tab does exactly that, over a list whose top row is ALL IN.
   Without backwards fill the resting state *is* the finished state, so a
   ladder whose animation never plays is merely still. */
@keyframes glassRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.glass-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--glass-row);
  margin: 0;
  padding: 0 0 0 16px;
  border: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .12s var(--ease-out);
}
.glass-row::before {                       /* the group rule */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(233, 199, 110, .42);
}
.glass-row + .glass-row::after {           /* divider, clear of the rule */
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--glass-hair);
}

.glass-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--ink);
}
.glass-amt {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
/* The unit, subordinate. Empty in chip mode, where the numbers carry no
   suffix anywhere else in the app either. */
.glass-amt i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-4);
  margin-left: 4px;
}
.glass-amt i:empty { display: none; }

/* All-in borrows a hue exactly twice — the rule segment, and the ink. */
.glass-row--allin::before { background: rgba(224, 85, 95, .7); }
.glass-row--allin .glass-label,
.glass-row--allin .glass-amt { color: var(--glass-danger-ink); }
.glass-row--allin .glass-amt i { color: rgba(255, 141, 150, .5); }

/* Unaffordable: keeps its slot so the ladder never shifts under the thumb,
   keeps the amount it *would* have been struck through so you can see what you
   were short of, and loses its colour entirely. Grey is the state; the strike
   and the note are the reason. */
.glass-row:disabled { cursor: not-allowed; }
.glass-row:disabled::before { background: rgba(243, 246, 242, .10); }
.glass-row:disabled .glass-label { color: var(--ink-4); font-weight: 500; }
.glass-row:disabled .glass-amt { color: rgba(143, 156, 148, .9); font-weight: 500; }
.glass-row:disabled .glass-amt i { color: rgba(103, 115, 108, .75); }
.glass-amt s {
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(195, 206, 198, .75);
}
.glass-note {
  font-size: 9.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .1em;
  color: var(--ink-4);
}
/* A size the minimum-raise floor lifted onto a number already in the list.
   Still that bet, still tappable; just not asking for attention it has not
   earned. Removing it would shorten the ladder and move every remaining row
   under the thumb between one hand and the next. */
.glass-row--dup { opacity: .5; }

/* The sizer entry: same row grammar, quieter type, and a chevron instead of a
   number because it is the only row that leads somewhere else. */
.glass-row--tune { min-height: 46px; }
.glass-row--tune .glass-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-2);
}
.glass-chev {
  width: 14px;
  height: 14px;
  background: currentColor;
  color: var(--ink-4);
  /* Drawn rather than fetched: this app makes zero external requests, and the
     two carets it needs are cheaper as clip-paths than as icon paths. */
  clip-path: polygon(28% 0, 100% 50%, 28% 100%, 6% 82%, 56% 50%, 6% 18%);
}

/* ---- the raise toggle: the hinge between the list and the pair --------- */

.glass-raise {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - var(--glass-pad) * 2);
  margin: 0 var(--glass-pad);
  min-height: 56px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--glass-hair);
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .12s var(--ease-out);
}
.glass-raise .btn-act-main {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-2);
  transition: color .12s var(--ease-out);
}
/* Open is the only time gold appears on the word, and the same gold runs down
   the list above it — one colour, said twice, meaning "these belong together". */
.glass-raise[aria-expanded="true"] .btn-act-main { color: var(--gold); }
/* Shove-only: 「オールイン」and the amount on the same row, with no list to open. */
.glass-raise .btn-act-sub {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.glass-raise .btn-act-sub:empty { display: none; }
.glass-raise .glass-caret {
  margin-left: auto;
  width: 16px;
  height: 9px;
  background: currentColor;
  color: var(--ink-3);
  clip-path: polygon(50% 0, 100% 100%, 78% 100%, 50% 42%, 22% 100%, 0 100%);
  transition: transform calc(180ms * var(--motion)) var(--ease-out), color .12s var(--ease-out);
}
/* The caret and the amount both want the right edge; whichever is present
   takes it, and `margin-left:auto` on both would push the caret off. */
.glass-raise .btn-act-sub:not(:empty) ~ .glass-caret { margin-left: 8px; }
.glass-raise[aria-expanded="true"] .glass-caret {
  transform: rotate(180deg);
  color: var(--gold);
}
.glass-raise:disabled { cursor: not-allowed; }
.glass-raise:disabled .btn-act-main { color: var(--ink-4); }
.glass-raise:disabled .glass-caret { opacity: .4; }
/* Shove-only wears the same red ink as the ladder's top rung, so the word
   means the same thing in both places. */
.glass-raise.is-shove .btn-act-main,
.glass-raise.is-shove .btn-act-sub { color: var(--glass-danger-ink); }

/* ---- the two-way choice ------------------------------------------------
 *
 * The brighter edge above it marks the row that commits. The rule between the
 * two cells is inset top and bottom so it reads as a line drawn on glass, not
 * as a seam between two buttons — and every cell is a rectangle, so there are
 * no dead corners for a tap to fall into.
 *
 * 0.85fr / 1.15fr, not 1fr / 1fr. The design separated these two by ink weight
 * and a 10% wash alone, and its own notes called that the weakest point in the
 * direction: one of the two cells folds your hand, and a colour-blind player
 * gets no cue at all from a green tint. Making the destructive cell the
 * smaller one costs a little symmetry and buys a size difference that survives
 * any palette. It is also the direction the reference apps go.
 */
.glass-pair {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  border-top: 1px solid var(--glass-edge);
}
.glass-act {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  min-height: 64px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .12s var(--ease-out), opacity .15s;
}
.glass-act + .glass-act::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--glass-hair);
}
.glass-act .btn-act-main {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.1;
  /* One word, one line. At 390 the fold cell (.85fr beside your cards) has
     ~81px of text box and 「フォールド」 needs ~83, so it broke as
     「フォール / ド」 on every turn (NJ-0924-2). The 8px side padding takes
     the overflow; the word never reaches the cell's edge. */
  white-space: nowrap;
}
/* The leading `+` is written by actions.js and is mandatory: the number sits
   under the word, not after it, and without the sign it reads as the size of
   the pot you are calling into rather than what leaves your stack. */
.glass-act .btn-act-sub {
  font-family: var(--font-num);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--call);
  line-height: 1.1;
}
.glass-act .btn-act-sub:empty { display: none; }   /* チェック carries no number */
/* Fold is quieter than call by ink alone — no red box, nothing to hit by
   reflex; it is simply the paler of two words on the same sheet. */
.glass-act--fold .btn-act-main { color: var(--ink-3); font-weight: 600; }
/* Call is the only cell with a wash, and it is 10% of one colour. */
.glass-act--call {
  background-image: linear-gradient(to top, rgba(61, 220, 154, .10), rgba(61, 220, 154, 0) 70%);
}
.glass-act:disabled { opacity: .32; cursor: not-allowed; }
.glass-act:disabled .btn-act-sub { color: var(--ink-4); }

/* ---- pressed ----------------------------------------------------------
 * A class, not `:active`: `:active` is unreliable on iOS Safari, and `dom.js`
 * already puts `.pressed` on every tappable node from `pointerdown`. */
.glass-row.pressed,
.glass-raise.pressed,
.glass-act.pressed { background-color: rgba(243, 246, 242, .075); }
.glass-row:disabled.pressed,
.glass-raise:disabled.pressed,
.glass-act:disabled.pressed { background-color: transparent; }

.glass :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -3px;
  border-radius: 3px;
}

/* ---- bet sizer --------------------------------------------------------
 *
 * The fine-adjust, reached from the 調整 row. Full width rather than on the
 * pane, because it is a different kind of thing: the ladder is a set of
 * choices and this is one continuous number. The two never share the screen —
 * `openSizer()` hides the primary row — so there is nothing to reconcile
 * between them beyond the surface they are drawn on, which they now share.
 */
.sizer {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(20, 27, 23, .5), rgba(7, 10, 9, .72));
  box-shadow: inset 0 0 0 1px rgba(243, 246, 242, .13);
  animation: glassRise calc(180ms * var(--motion)) var(--ease-out);
}
.sizer-head { display: flex; align-items: center; gap: 10px; }
.sizer-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}
/* The × sits on the 24px icon grid; the button supplies the 44px target. */
.sizer-close .icon { width: 20px; height: 20px; }
.sizer-amount {
  flex: 1 1 auto;
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.sizer-caption {
  flex: 0 0 auto;
  min-width: 62px;
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

/* A tall transparent track makes the whole strip grabbable — the visible line
   is drawn by the runnable pseudo-elements, so the touch target is 44px even
   though the track looks like 6px. */
.sizer-slider {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  appearance: none;
  touch-action: none;   /* stop the page from stealing the drag */
  cursor: pointer;
}
.sizer-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--gold) 0 var(--fill, 0%),
    rgba(255, 255, 255, .1) var(--fill, 0%) 100%
  );
}
.sizer-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}
.sizer-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gold); }
.sizer-slider::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.sizer-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}

.sizer-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sizer-presets .chip-opt { min-height: var(--tap-min); font-size: 13px; }
.chip-opt--max { border-color: #6a3a3f; color: #ffbfc4; }
.chip-opt--max.is-on { border-color: var(--danger); background: rgba(224, 85, 95, .18); color: #ffd7da; }

/* Belt and braces alongside `--motion`: at zero the movement goes and the
   information stays. */
@media (prefers-reduced-motion: reduce) {
  .glass *,
  .glass *::before,
  .glass *::after,
  .sizer {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}