/* Copyright (c) 2026 Ascent. All rights reserved. PRIVATE TABLE — https://poker.ascent-web.jp/terms */
/* ---- menu sheet ------------------------------------------------------- *
 *
 * B-0814-2 案(a). Its own file rather than a block in table.css: that file is
 * night-ui's declared area and both of us are editing tonight, so a new file
 * is the difference between two independent diffs and one lost one.
 *
 * The sheet itself, its scrim, grip and head are `.sheet` — shared with the
 * history sheet, already responsive, already sliding up from the app floor.
 * Only the rows inside are new.
 */

.menu-rows {
  display: flex;
  flex-direction: column;
  padding: 4px 16px 8px;
}

/* Full-width rows, not a strip of icon buttons. The reason these moved off the
   header at all is that a 22px glyph was carrying the whole meaning; here
   there is room for the verb, so the row says it. */
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.menu-row:last-child { border-bottom: 0; }
.menu-row.pressed { background: var(--surface-2); }

.menu-row-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--ink-3);
}
.menu-row-icon .icon { width: 22px; height: 22px; }

.menu-row-label { flex: 1 1 auto; min-width: 0; }

/* What the toggle is currently doing, in the row's own words.
   This used to claim `aria-pressed` was "the same fact for a screen reader, so
   the two cannot drift". They drifted (NQA-0827-1): the word is about the
   feature and `aria-pressed` is about the button, and on a mute row those are
   inverses. The screen-reader fact and the printed fact are two different
   statements that happen to coincide on some rows; see `data-on` below. */
.menu-row-state {
  flex: 0 0 auto;
  color: var(--ink-4);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
/* Gold means "this is on", and it is bound to `data-on` -- the same fact the
   row's own word says -- not to `aria-pressed`. NQA-0827-1: `aria-pressed`
   describes the *button*, and the three rows disagree about what pressing does.
   Muting is "pressed = the sound is off"; the premium reveal is "pressed = the
   feature is on". Colouring from that attribute therefore painted two rows gold
   when they read "OFF" and one gold when it read "ON", on the same sheet.
   `aria-pressed` keeps its button meaning for screen readers and is not touched
   here; `data-on` carries the display state and nothing else. A row with no
   on/off state (the hand-ranking list) sets neither and stays quiet. */
.menu-row[data-on="false"] .menu-row-icon { color: var(--ink-4); }
.menu-row[data-on="true"] .menu-row-state { color: var(--gold); }

/* Ending the match ends it for everyone (CONTRACT #4), so it is set apart from
   the preferences above it and does not borrow their quiet styling. */
.menu-quit {
  flex: 0 0 auto;
  margin: 6px 16px 16px;
  min-height: var(--tap-min);
  border-color: var(--line);
  color: var(--ink-2);
}

/* ---- hand reference sheet ------------------------------------------- */

.sheet--hand-ref { max-height: min(82dvh, 680px); }

.hand-ref-list {
  counter-reset: hand-rank;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px 16px calc(16px + var(--safe-bottom));
  list-style: none;
  overflow: auto;
}

.hand-ref-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  counter-increment: hand-rank;
}
.hand-ref-list li:last-child { border-bottom: 0; }

.hand-ref-list li::before {
  content: counter(hand-rank);
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(233, 199, 110, .12);
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.hand-ref-list b {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.hand-ref-list span {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-width: 0;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.35;
}