.bottom-section {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  flex: none;
}

.bottom-section-inner {
  max-width: var(--col-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 7px;
}

.hand-area {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 4px;
  /* Capped to the same column as the rest of the UI. Below 430px this is a
     no-op; above it, it stops the hand (and so the dora tiles derived from
     it) scaling past the strip that has to contain them. */
  max-width: var(--col-max);
  width: 100%;
  margin: 0 auto;
}

.table-info-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  /* Fixed row heights, not 1fr: auto/fr rows take their minimum from the
     stick panel's text, so the strip resized when the mono font swapped in. */
  grid-template-rows: 31px 31px;
  gap: 5px;
}

.dora-panel {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(245, 233, 196, 0.15);
  min-width: 0;
}

.dora-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-mid);
  flex: none;
}

.stick-panel {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(245, 233, 196, 0.15);
  align-items: center;
  justify-content: center;
}

.stick-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

/* Dotted rule separating Pot from Honba */
.stick-cell + .stick-cell {
  border-left: 1px dotted rgba(245, 233, 196, 0.38);
  padding-left: 6px;
}

.stick-cell-label {
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 233, 196, 0.5);
}

.stick-cell-val {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-cream);
  font-variant-numeric: tabular-nums;
}

/* ── VIEW TOGGLE — shares the stick panel's box exactly; the grid gives
   both the same width and height, so they read as one stacked pair. ── */
.view-toggle {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(245, 192, 74, 0.5);
  color: var(--gold-pale);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, border-color 160ms ease;
}

.view-toggle:active { background: rgba(245, 192, 74, 0.18); }
.view-toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.view-toggle-icon {
  width: 13px;
  height: 13px;
  flex: none;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Both labels occupy the same grid cell, so the button is always as wide as
   the LONGER one ("Discards"). Swapping views only flips visibility — the box
   never resizes, so the strip below it can't shift. */
.view-toggle-labels {
  display: grid;
  justify-items: center;
  align-items: center;
}

.view-toggle-labels > .vt-label {
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: nowrap;
}

.view-toggle-labels > .vt-label[data-on] { visibility: visible; }

.dora-strip {
  display: flex;
  gap: var(--tile-gap);
  align-items: center;
}

.dora-tile {
  flex: 0 0 auto;
  width: var(--tile-w);
  height: calc(var(--tile-h) + 4px);
  border-radius: 2px;
  position: relative;
}

.dora-tile.empty {
  height: var(--tile-h);
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 0.5px rgba(200, 148, 26, 0.25);
}

.hand-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3px;
}

.hand-header-title {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 233, 196, 0.55);
}

.hand-seal-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--green-pale);
  background: rgba(29, 158, 117, 0.16);
  border: 1px solid rgba(29, 158, 117, 0.4);
}

.hand-tiles {
  display: flex;
  gap: var(--tile-gap);
  align-items: flex-end;
  justify-content: center;
  padding: 6px 4px 3px;
}

.hand-tile-hit {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
  width: var(--tile-w);
  height: calc(var(--tile-h) + var(--tile-cap));
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 var(--tile-w);
  position: relative;
  transform: translateY(0);
  transition: transform 120ms ease;
}

/* Enlarged tap target.
   It must NOT grow wider than the tile pitch. A 13-tile hand puts tiles on a
   ~22px pitch, so the previous `max(44px, 100%)` made every target roughly
   twice its slot and cover both neighbours entirely — the last matching
   sibling won the hit test, so every tap selected the tile to its right.
   Grow only into the gap horizontally, and take the extra touch area
   vertically, where the row has room to spare. */
.hand-tile-hit::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--tile-gap));
  width: calc(100% + var(--tile-gap));
  height: calc(100% + var(--tile-cap) + var(--tile-gap));
  transform: translateX(-50%);
  z-index: 1;
}

.hand-tile-hit.selected {
  transform: translateY(-13px);
}

.hand-tile-hit .tile-hand {
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.user-meld-row {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--tile-gap) * 2);
  align-items: flex-end;
  min-height: 0;
}

.decision-area {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── Notification area: retro terminal readout ── */
.notice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  /* The slot is reserved unconditionally: fixed height, no flex shrink, and a
     clipped single line. It holds its 26px whether it is mid-type, showing a
     full message, or completely empty — so nothing below it ever moves.
     Never hide this element when idle; leave it blank and let the caret sit. */
  height: 26px;
  min-height: 26px;
  flex: none;
  padding: 0 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(4, 22, 18, 0.92), rgba(2, 12, 10, 0.94));
  border: 1px solid rgba(93, 202, 165, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(159, 225, 203, 0.09),
    inset 0 0 16px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: rgba(245, 233, 196, 0.9);
  white-space: nowrap;
}

/* CRT scanlines */
.notice::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(159, 225, 203, 0.055) 0 1px,
    transparent 1px 3px);
}

.notice-prompt {
  flex: none;
  color: var(--green-light);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(93, 202, 165, 0.55);
}

/* min-height keeps the line box (and so the row height) even when empty */
.notice-text {
  flex: 0 1 auto;
  overflow: hidden;
  min-height: 12px;
}

.notice-cursor {
  flex: none;
  width: 6px;
  height: 12px;
  background: var(--green-light);
  box-shadow: 0 0 8px rgba(93, 202, 165, 0.8);
  animation: caret 1.06s infinite;
}

@keyframes caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.notice .note-action { color: var(--red-light); font-weight: 700; margin-left: 0; }
.notice .note-tile { color: var(--gold-light); font-weight: 700; margin-left: 0; }

.notice-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.action-bar {
  display: flex;
  gap: 6px;
  min-height: 38px;
}

.action-group {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.action-group-full {
  justify-content: stretch;
  width: 100%;
}

.action-group-full .btn-action {
  flex: 1;
}

.claim-chooser {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(100% + 8px);
  display: flex;
  gap: 6px;
  justify-content: center;
}

.claim-choice {
  min-height: 38px;
  border: 1px solid rgba(245, 192, 74, 0.58);
  border-radius: 8px;
  background: rgba(5, 29, 23, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
}

.entry-overlay,
.result-panel-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 20px max(18px, env(safe-area-inset-bottom));
  background: rgba(1, 10, 8, 0.62);
}

.entry-overlay[hidden],
.result-panel-layer[hidden],
.claim-chooser[hidden] {
  display: none;
}

.entry-panel,
.result-card {
  width: min(100%, var(--col-max));
  border: 1px solid rgba(245, 192, 74, 0.42);
  border-radius: 8px;
  background: rgba(4, 25, 20, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.58);
  padding: 16px;
}

.entry-panel h2,
.result-card h2 {
  margin: 0 0 14px;
  color: var(--gold-light);
  font-size: 24px;
  font-family: var(--font-display);
  letter-spacing: 0;
}

.entry-field {
  display: grid;
  gap: 7px;
  color: rgba(245, 233, 196, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-field input {
  min-height: 48px;
  border: 1px solid rgba(245, 192, 74, 0.34);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
  color: var(--gold-cream);
  font: 700 16px/1 var(--font-sans);
  padding: 0 12px;
}

.entry-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.entry-actions .btn-action {
  min-height: 56px;
}

.entry-status,
.result-card p {
  margin: 12px 0 0;
  color: rgba(245, 233, 196, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lobby-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.lobby-panel[hidden] {
  display: none;
}

.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.lobby-header h3 {
  margin: 0;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.lobby-count {
  flex-shrink: 0;
  color: var(--gold-cream);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.lobby-seats {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lobby-seat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  min-width: 0;
  border: 1px solid rgba(245, 192, 74, 0.34);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
  padding: 0 12px;
}

.lobby-seat-index {
  color: rgba(245, 233, 196, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lobby-seat-name {
  min-width: 0;
  overflow: hidden;
  color: var(--gold-cream);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-seat.is-empty .lobby-seat-name {
  color: rgba(245, 233, 196, 0.72);
  font-weight: 700;
}

.lobby-leave {
  width: 100%;
  min-height: 56px;
}

.result-card {
  max-height: min(78dvh, 560px);
  overflow: auto;
}

.result-card h3 {
  margin: 12px 0 6px;
  color: var(--gold-mid);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-grid,
.result-payments {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin-top: 10px;
  color: rgba(245, 233, 196, 0.74);
}

.result-grid strong,
.result-payments strong {
  color: var(--gold-cream);
  font-family: var(--font-mono);
}

.result-list {
  margin: 10px 0;
  padding-left: 18px;
  color: rgba(245, 233, 196, 0.78);
}

.result-card .btn-action {
  width: 100%;
  margin-top: 14px;
}

.action-timer {
  color: var(--red-light);
  margin-left: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.header-brand-menu,
.btn-action {
  --control-bg-top: rgba(255, 255, 255, 0.1);
  --control-bg-mid: rgba(245, 192, 74, 0.1);
  --control-bg-bottom: rgba(0, 0, 0, 0.22);
  --control-border: rgba(245, 192, 74, 0.45);
  --control-fg: var(--gold-light);
  --control-glow: rgba(245, 192, 74, 0.2);
  --control-shadow: rgba(0, 0, 0, 0.48);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--control-bg-top) 0%, var(--control-bg-mid) 48%, var(--control-bg-bottom) 100%);
  color: var(--control-fg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 14px var(--control-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
}

.header-brand-menu::after,
.btn-action::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 46%;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.header-brand-menu:hover,
.btn-action:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 18px var(--control-shadow),
    0 0 12px var(--control-glow);
}

.header-brand-menu:active,
.btn-action:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 2px 5px rgba(0, 0, 0, 0.28),
    0 3px 8px var(--control-shadow);
}

.header-brand-menu:focus-visible,
.btn-action:focus-visible {
  outline: 2px solid rgba(255, 232, 146, 0.9);
  outline-offset: 2px;
}

.btn-action {
  height: 40px;
  min-width: 72px;
  padding: 0 16px;
  font-weight: 800;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-action.primary {
  --control-bg-top: #e6bd55;
  --control-bg-mid: #c8941a;
  --control-bg-bottom: #75500c;
  --control-border: rgba(245, 192, 74, 0.72);
  --control-fg: #211503;
  --control-glow: rgba(245, 192, 74, 0.24);
}

.btn-action.secondary {
  --control-bg-top: rgba(255, 232, 146, 0.12);
  --control-bg-mid: rgba(200, 148, 26, 0.08);
  --control-bg-bottom: rgba(0, 0, 0, 0.34);
  --control-border: rgba(245, 192, 74, 0.48);
  --control-fg: var(--gold-light);
  --control-glow: rgba(245, 192, 74, 0.22);
}

.btn-action.jade {
  --control-bg-top: #9de9cf;
  --control-bg-mid: #5DCAA5;
  --control-bg-bottom: #127a57;
  --control-border: rgba(157, 233, 207, 0.9);
  --control-fg: #052118;
  --control-glow: rgba(93, 202, 165, 0.34);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.65) 100%);
  border-top: 0.5px solid rgba(200, 148, 26, 0.25);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(245, 233, 196, 0.65);
  font-size: 11px;
  font-weight: 600;
}

.nav-item.active {
  color: var(--gold-pale);
}

/* ── Animations ───────────────────────────────────────────────────────── */

@keyframes turn-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(245, 192, 74, 0.6),
      0 0 0 2.5px rgba(200, 148, 26, 0.25),
      0 0 8px 1px rgba(245, 192, 74, 0.35),
      inset 0 1px 0 rgba(255, 240, 160, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 220, 100, 0.95),
      0 0 0 3px rgba(200, 148, 26, 0.35),
      0 0 14px 2px rgba(255, 210, 80, 0.55),
      inset 0 1px 0 rgba(255, 240, 160, 0.35);
  }
}

@keyframes pulse-timer {
  0%, 100% { opacity: 1 }
  50% { opacity: 0.4 }
}

/* ── Dashboard stat badges ────────────────────────────────────────────── */

.stat-label {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--gold-mid);
}

.stat-label--time {
  color: var(--red-light);
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  flex-shrink: 0;
}

.stat-badge--wall {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

.stat-badge--time {
  background: linear-gradient(135deg, var(--red-light), var(--red-dragon));
  color: #fff;
}

.stat-val {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-cream);
}

.timer-text {
  animation: pulse-timer 1s infinite;
  color: var(--red-light) !important;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
}

/* ── Responsive overrides ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hand-tile-hit,
  .btn-action,
  .header-brand-menu {
    transition: none;
  }

  .timer-text {
    animation: none;
  }
}

.action-bar .btn-action {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  height: auto;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 9px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .notice-cursor { animation: none; }
}