:root {
  color-scheme: light;
  --canvas: #f3f6f5;
  --surface: #ffffff;
  --surface-subtle: #e9efed;
  --surface-strong: #d8e1de;
  --ink: #18211f;
  --ink-muted: #586662;
  --line: #c7d1ce;
  --line-strong: #8c9c97;
  --felt: #1f5c48;
  --felt-strong: #174b3b;
  --felt-soft: #dbece5;
  --blue: #245d91;
  --blue-soft: #e2edf7;
  --amber: #855b08;
  --amber-soft: #fff0c7;
  --red: #a52a24;
  --red-soft: #fbe8e6;
  --violet: #66508f;
  --violet-soft: #eee9f6;
  --shadow: 0 1px 3px rgb(19 39 33 / 12%);
  --radius: 8px;
  --radius-small: 4px;
  --touch: 3rem;
  --content-width: 75rem;
  --action-bar-space: 5.75rem;
  /* Height of the fixed .table-primary-tabs bar, and the clearance a scrolling
     table page must reserve so its last row stays tappable above it. The bar adds
     env(safe-area-inset-bottom) to its own height; the old flat 4rem did not, so on
     a phone with a home indicator the bar stood 102px tall over 64px of padding. */
  --table-tabs-height: 4.25rem;
  --table-tabs-clearance: calc(
    var(--table-tabs-height) + env(safe-area-inset-bottom) + 1.25rem
  );
  font-family:
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 100%;
  font-synthesis: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  min-width: 320px;
  background: var(--canvas);
  scroll-behavior: smooth;
}

html[data-stage="2"] .prototype-mark {
  background: var(--felt);
  color: #fff;
}

html[data-stage="3"] .prototype-mark {
  background: #176b51;
  color: #fff;
}

.stage3-returning-notice {
  border-color: #d4a24c;
  background: #fff7e7;
  color: #69450d;
}

.stage3-table-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: #edf7f2;
  color: #165542;
}

.stage3-table-sync[hidden] { display: none; }

.stage3-table-sync > svg,
.stage3-table-sync__icon > svg {
  flex: 0 0 18px;
}

.stage3-table-sync > span {
  flex: 1 1 12rem;
  min-width: 0;
  margin-right: auto;
}

.stage3-command-queue-control {
  display: flex;
  margin-left: auto;
}

.stage3-command-queue-control:empty {
  display: none;
}

.stage3-command-queue-control button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.stage3-command-queue-control button.is-rejected {
  border-color: #963d2b;
  background: #963d2b;
  color: #fff;
}

.stage3-command-queue-control button span {
  display: inline;
  flex: none;
  min-width: auto;
  margin: 0;
}

.stage3-command-queue-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage3-command-queue-list li {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.stage3-command-queue-list li.is-rejected {
  border-color: var(--red, #a52a24);
  background: var(--red-soft);
}

.stage3-command-queue-list__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.stage3-command-queue-list time,
.stage3-command-queue-list small {
  color: var(--ink-muted);
}

.stage3-command-queue-list p {
  margin: 0;
}

.stage3-command-queue-list .button {
  justify-self: end;
}

.stage3-command-recovery-intro {
  display: grid;
  padding: 0.7rem;
  border: 1px solid #e8a395;
  border-radius: 8px;
  background: var(--concept-coral-soft, #fdebe7);
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.stage3-command-recovery-intro p,
.stage3-command-recovery-intro strong,
.stage3-command-recovery-intro span { display: block; margin: 0; }
.stage3-command-recovery-intro span { margin-top: 0.15rem; color: var(--ink-muted); }

.stage3-command-recovery-details { display: grid; margin: 0; gap: 0; }
.stage3-command-recovery-details > div {
  display: grid;
  padding: 0.55rem 0;
  border-top: 1px solid rgb(150 61 43 / 18%);
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.65rem;
}
.stage3-command-recovery-details dt { color: var(--ink-muted); font-weight: 800; }
.stage3-command-recovery-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.stage3-command-recovery-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.stage3-command-recovery-actions .button { justify-self: auto; }
.stage3-command-recovery-undo {
  display: flex;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--concept-sky-soft, #eaf3f8);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.stage3-command-recovery-undo div,
.stage3-command-recovery-undo strong,
.stage3-command-recovery-undo span { display: block; }
.stage3-command-recovery-undo span { color: var(--ink-muted); font-size: 0.84rem; }

.stage3-replay-report {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #93b9aa;
  background: #f3faf7;
  color: var(--ink);
}

.stage3-replay-report__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.stage3-replay-report h3,
.stage3-replay-report p,
.stage3-replay-report ul {
  margin: 0;
}

.stage3-replay-report h3 {
  font-size: 1rem;
}

.stage3-replay-report small {
  color: var(--ink-muted);
}

.stage3-replay-report ul {
  padding-left: 1.2rem;
}

.stage3-replay-report li,
.stage3-replay-report p {
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

.replay-reorder-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: replay-order;
}

.replay-reorder-list li {
  display: grid;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  counter-increment: replay-order;
}

.replay-reorder-list li > div {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.55rem;
}

.replay-reorder-list li > div::before {
  content: counter(replay-order) ".";
  color: var(--ink-muted);
  font-weight: 800;
}

.replay-reorder-list time {
  grid-column: 2;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.replay-reorder-list strong {
  grid-column: 2;
  overflow-wrap: anywhere;
}

.replay-reorder-list__controls {
  display: inline-flex;
  gap: 0.35rem;
}

.replay-reorder-list__controls .icon-button {
  width: 2.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
}

.offline-reconciliation-list {
  display: grid;
  gap: 0.55rem;
}

.offline-reconciliation-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.offline-reconciliation-list > div.is-affected {
  border-color: var(--red, #a52a24);
  background: var(--red-soft);
}

.offline-reconciliation-list strong,
.offline-reconciliation-list span {
  overflow-wrap: anywhere;
}

.offline-reconciliation-list b {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--ink-muted);
}

.offline-reconciliation-list .is-affected b {
  color: var(--red, #a52a24);
}

.offline-reconciliation-dialog__actions {
  flex-wrap: wrap;
}

.offline-settlement-mismatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--red, #a52a24);
  background: var(--red-soft);
}

.offline-settlement-mismatch span:last-child {
  overflow-wrap: anywhere;
}

.stage3-table-sync strong,
.stage3-table-sync small {
  display: block;
}

.stage3-table-sync small {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The sync banner truncates to one line because its text is a status detail. A
   storage-full alert is instruction the user has to act on, so it wraps instead. */
.stage3-table-sync[role="alert"] small {
  overflow: visible;
  color: var(--red, #a52a24);
  text-overflow: clip;
  white-space: normal;
}

.stage3-table-sync button {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
}

.stage3-table-sync--conflict {
  flex-wrap: wrap;
  background: var(--red-soft);
  color: var(--red);
}

.stage3-table-sync--rejected {
  flex-wrap: wrap;
  border-bottom-color: #d96b57;
  background: var(--concept-coral-soft, #fdebe7);
  color: #842f22;
}

.stage3-table-sync__icon {
  display: grid;
  width: 3rem;
  min-width: 3rem;
  place-items: center;
}

.stage3-table-sync__icon .ahu-mascot--compact {
  width: 3rem;
  height: 3rem;
  animation: none;
}

@media (max-width: 36rem) {
  .stage3-command-recovery-actions,
  .stage3-command-recovery-undo { align-items: stretch; flex-direction: column; }
  .stage3-command-recovery-actions .button,
  .stage3-command-recovery-undo .button { width: 100%; justify-content: center; }
}

.flow-qr--online {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.flow-qr--online svg.qr-code {
  display: block;
  width: min(100%, 11rem);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.flow-qr__fallback {
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.flow-qr__fallback:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.flow-qr--online > span svg {
  width: 42px;
  height: 42px;
  color: var(--felt);
}

.stage2-local-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid #b9d6ca;
  border-radius: 8px;
  background: #edf7f2;
  color: #124c3c;
}

.stage2-local-banner > svg {
  flex: 0 0 24px;
}

.stage2-local-banner span,
.stage2-local-banner strong,
.stage2-local-banner small {
  display: block;
}

.stage2-local-banner small {
  margin-top: 2px;
  color: #4c665d;
}

.stage2-empty-table {
  margin: 0 0 12px;
  padding: 18px 12px;
  border: 1px dashed #b8b3a5;
  border-radius: 8px;
  color: #625e54;
  text-align: center;
}

.stage2-player-names {
  margin: 0;
  padding: 0;
  border: 0;
}

.stage2-player-names legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.stage2-player-names label {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.stage2-player-names label span {
  color: #716d63;
  font-weight: 700;
  text-align: center;
}

.stage2-player-names input {
  min-width: 0;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* No double-tap-to-zoom anywhere in the app. A 牌枱 is used in fast bursts of repeated taps
   — 一筒 three times to build 111筒, a name then an amount then 確認 — and a phone reads two
   quick taps near the same spot as "zoom in", so the page lurched and the second tap was
   swallowed. `manipulation` drops double-tap zoom and its ~300ms click delay while leaving
   pinch-zoom and scrolling untouched, so the app is still zoomable by the ordinary gesture.
   This is deliberately NOT `user-scalable=no` on the viewport, which would take pinch-zoom
   away from everyone.

   `touch-action` is intersected down the ancestor chain, so a descendant cannot opt back in.
   That is why this is applied to the page surfaces rather than to `body`: the two surfaces
   Harry wants left alone — the share-card preview and an uploaded 番數表 — are images you
   read by zooming, and their dialogs opt out by carrying `data-zoom-preview`. Modals are
   siblings of the page shells inside `#app`, never descendants, which is what makes the
   exemption reachable. */
#app > *:not(.modal-backdrop),
#app .modal-backdrop:not([data-zoom-preview]) {
  touch-action: manipulation;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button,
select {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: rgb(31 92 72 / 18%);
}

:focus-visible {
  outline: 3px solid #f0b429;
  outline-offset: 2px;
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  line-height: 1.3;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell {
  min-height: 100vh;
  padding-block-end: 0;
}

.app-loading,
.noscript-message {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 1.5rem;
  place-items: center;
  color: var(--ink-muted);
  text-align: center;
}

.app-loading p,
.noscript-message {
  margin: 0;
}

.stage3-loading {
  display: grid;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f7faf7;
  color: var(--ink);
  text-align: center;
}

.stage3-loading__walker {
  width: 6.4rem;
  margin-block-end: 1rem;
  animation: stage3-ahu-walk 2.4s ease-in-out infinite;
}

.stage3-loading__walker .ahu-mascot {
  animation-duration: 0.48s;
}

.stage3-loading h1 {
  margin: 0;
  font-size: 1.25rem;
}

.stage3-loading p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

/* 麻雀金句 on the loading screen: the quote is the thing worth reading while
   waiting, so it gets a tile of its own, the ink and the weight. Selectors are
   qualified with .stage3-loading p to outrank the muted paragraph rule above. */
.stage3-loading p.stage3-loading__quote {
  max-width: 20rem;
  margin-block-start: 0.35rem;
  padding: 0.95rem 1.15rem;
  border: 1.5px solid var(--tile-edge);
  border-bottom-width: 5px;
  border-radius: 20px;
  background-image: var(--tile-face);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.6;
  text-wrap: balance;
}

.stage3-loading p.stage3-loading__source {
  margin-block-start: 0.6rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.stage3-loading__tip {
  display: grid;
  width: min(100%, 20rem);
  margin-block-start: 0.55rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid #d9bd6f;
  border-bottom-width: 5px;
  border-radius: 20px;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  background-color: #fffaf0;
  background-image: var(--tile-face);
  color: #5d4613;
  box-shadow: 0 14px 26px -24px rgb(93 70 19 / 75%);
  text-align: start;
}

.stage3-loading__tip-icon {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 8px;
}

.stage3-loading__tip p {
  display: grid;
  min-width: 0;
  margin: 0;
  gap: 0.12rem;
  color: #5d4613;
  font-size: 1.08rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.stage3-loading__tip strong {
  color: #7a5200;
  font-size: inherit;
}

@keyframes stage3-ahu-walk {
  0%, 100% { transform: translateX(-1.8rem) rotate(-2deg); }
  50% { transform: translateX(1.8rem) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .stage3-loading__walker,
  .stage3-loading__walker .ahu-mascot {
    animation: none;
  }
}

.app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 1px 2px rgb(19 39 33 / 8%);
}

.app-header__inner {
  display: flex;
  width: min(100%, var(--content-width));
  min-height: 4rem;
  margin-inline: auto;
  padding: 0.5rem 1rem;
  align-items: center;
  gap: 0.75rem;
}

.brand-mark {
  display: inline-grid;
  width: 2.5rem;
  height: 3rem;
  border: 1px solid #b9c2bf;
  border-bottom-width: 4px;
  border-radius: var(--radius-small);
  place-items: center;
  flex: 0 0 auto;
  background: #fffdf8;
  color: var(--red);
  box-shadow: var(--shadow);
  font-family: serif;
  font-size: 1.35rem;
  font-weight: 800;
}

.header-title {
  min-width: 0;
  margin-inline-end: auto;
}

.header-title h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 750;
}

.header-title p,
.header-context {
  margin: 0.1rem 0 0;
  color: var(--ink-muted);
  font-size: 0.89rem;
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
}

.table-code {
  color: var(--ink-muted);
  font-size: 0.89rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-content {
  display: grid;
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding: 1rem;
  gap: 1rem;
}

.status-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.actor-switch {
  display: inline-flex;
  min-height: var(--touch);
  margin-inline-start: auto;
  padding-inline-start: 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  font-size: 0.89rem;
  font-weight: 700;
}

.actor-switch select {
  align-self: stretch;
  min-width: 6rem;
  padding-inline: 0.5rem;
  border: 0;
  border-inline-start: 1px solid var(--line);
  background: var(--surface);
  font-weight: 700;
}

.status-pill {
  display: inline-flex;
  min-height: 1.75rem;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  align-items: center;
  gap: 0.35rem;
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 0.89rem;
  font-weight: 650;
  line-height: 1.25;
}

.status-pill::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

.status-pill--synced,
.status-pill--cross-checked {
  border-color: #5c947e;
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.status-pill--pending,
.status-pill--review {
  border-color: #c79b3b;
  background: var(--amber-soft);
  color: var(--amber);
}

.status-pill--conflict {
  border-color: #c26761;
  background: var(--red-soft);
  color: var(--red);
}

.status-pill--offline {
  border-color: #8d79ac;
  background: var(--violet-soft);
  color: var(--violet);
}

.status-pill--info {
  border-color: #7698b8;
  background: var(--blue-soft);
  color: var(--blue);
}

.table-stage {
  display: grid;
  grid-template-areas:
    "center center"
    "north east"
    "west south";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #154434;
  border-radius: var(--radius);
  background: var(--felt);
  box-shadow: var(--shadow);
}

.table-center {
  grid-area: center;
  display: grid;
  min-width: 0;
  min-height: 5.5rem;
  padding: 0.75rem;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: var(--radius-small);
  align-content: center;
  justify-items: center;
  gap: 0.25rem;
  background: rgb(12 52 39 / 42%);
  color: #ffffff;
  text-align: center;
}

.table-center__round {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
}

.table-center__meta,
.table-center__latest {
  margin: 0;
  color: #e2f0ea;
  font-size: 0.89rem;
}

.seat-card {
  display: grid;
  min-width: 0;
  min-height: 8rem;
  padding: 0.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  align-content: start;
  gap: 0.45rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.seat-card--north {
  grid-area: north;
}

.seat-card--east {
  grid-area: east;
}

.seat-card--south {
  grid-area: south;
}

.seat-card--west {
  grid-area: west;
}

.seat-card--current {
  border-color: #f0b429;
}

.seat-card--conflict {
  border-color: var(--red);
  background: #fffafa;
}

.seat-card__header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.5rem;
}

.seat-card__identity {
  min-width: 0;
  margin-inline-end: auto;
}

.seat-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
}

.seat-card__wind {
  display: inline-flex;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  align-items: center;
  justify-content: center;
  background: var(--surface-subtle);
  color: var(--ink);
  font-size: 0.89rem;
  font-weight: 750;
}

.seat-card__dealer {
  color: var(--red);
  font-size: 0.84rem;
  font-weight: 750;
}

.seat-card__balance {
  min-width: 0;
  margin: 0;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.seat-card__balance--positive,
.delta--positive {
  color: var(--felt-strong);
}

.seat-card__balance--negative,
.delta--negative {
  color: var(--red);
}

.seat-card__meta {
  display: flex;
  min-width: 0;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.workspace {
  min-width: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.tab-list {
  display: flex;
  min-width: 0;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--line);
  gap: 0.25rem;
  overflow-x: auto;
}

.tab-button {
  min-height: var(--touch);
  padding: 0.65rem 0.9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font-weight: 700;
  white-space: nowrap;
}

.tab-button:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

.tab-button[aria-selected="true"] {
  border-bottom-color: var(--felt);
  color: var(--felt-strong);
}

.tab-count {
  display: inline-flex;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-inline-start: 0.25rem;
  padding-inline: 0.3rem;
  border-radius: var(--radius-small);
  align-items: center;
  justify-content: center;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.tab-panel {
  min-width: 0;
  padding: 1rem;
}

.section-heading {
  display: flex;
  min-width: 0;
  margin-block-end: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.section-heading__meta {
  margin: 0 0 0 auto;
  color: var(--ink-muted);
  font-size: 0.89rem;
}

.review-list,
.history-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.75rem;
}

.review-item {
  display: grid;
  min-width: 0;
  padding: 0.875rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--amber);
  border-radius: var(--radius);
  gap: 0.75rem;
  background: var(--surface);
}

.review-item--conflict {
  border-inline-start-color: var(--red);
}

.review-item--complete {
  border-inline-start-color: var(--felt);
}

.review-item__header,
.history-row__header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.review-item__title,
.history-row__title {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
}

.review-item__time,
.history-row__time {
  margin: 0 0 0 auto;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.review-item__summary,
.history-row__summary {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.review-item__actions,
.history-row__actions,
.button-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.history-row {
  display: grid;
  min-width: 0;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line);
  gap: 0.5rem;
}

.history-row:last-child {
  border-bottom: 0;
}

.history-deltas {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
}

.history-delta {
  min-width: 0;
  margin: 0;
  padding: 0.375rem;
  border-radius: var(--radius-small);
  background: var(--surface-subtle);
  text-align: center;
}

.history-delta__name {
  display: block;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.history-delta__value {
  display: block;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.conflict-panel {
  display: grid;
  min-width: 0;
  padding: 1rem;
  border: 1px solid #c26761;
  border-inline-start: 4px solid var(--red);
  border-radius: var(--radius);
  gap: 0.875rem;
  background: var(--red-soft);
}

.review-item .conflict-panel {
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid #c26761;
  border-radius: 0;
  background: transparent;
}

.conflict-panel__header h2,
.conflict-panel__header h3 {
  margin: 0;
  color: var(--red);
  font-size: 1rem;
}

.conflict-panel__header p {
  margin: 0.25rem 0 0;
  color: #6e3632;
  font-size: 0.94rem;
}

.conflict-compare {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
}

.conflict-option {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #c8918c;
  border-radius: var(--radius-small);
  background: var(--surface);
}

.conflict-option--selected {
  border-color: var(--felt);
  box-shadow: inset 4px 0 0 var(--felt);
}

.conflict-option__source {
  margin: 0 0 0.25rem;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 650;
}

.conflict-option__amount {
  margin: 0;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.conflict-option__facts {
  margin: 0.25rem 0 0;
  color: var(--ink-muted);
  font-size: 0.89rem;
}

.conflict-difference {
  margin: 0;
  padding: 0.625rem;
  border-inline-start: 3px solid var(--amber);
  background: var(--amber-soft);
  color: #65490f;
  font-size: 0.89rem;
}

.audit-timeline {
  position: relative;
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

.audit-event {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 4rem;
  padding: 0 0 1rem 2rem;
  grid-template-columns: minmax(0, 1fr);
}

.audit-event::before {
  position: absolute;
  top: 0.75rem;
  bottom: -0.75rem;
  left: 0.55rem;
  width: 2px;
  background: var(--line);
  content: "";
}

.audit-event:last-child::before {
  display: none;
}

.audit-event__marker {
  position: absolute;
  z-index: 1;
  top: 0.3rem;
  left: 0.18rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.audit-event--conflict .audit-event__marker {
  background: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.audit-event--resolved .audit-event__marker {
  background: var(--felt);
  box-shadow: 0 0 0 1px var(--felt);
}

.audit-event__title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 750;
}

.audit-event__meta,
.audit-event__detail {
  margin: 0.15rem 0 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.button,
.icon-button,
.action-button {
  min-height: var(--touch);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.button,
.action-button {
  display: inline-flex;
  min-width: 0;
  padding: 0.625rem 0.9rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
}

.icon-button {
  display: inline-grid;
  width: var(--touch);
  min-width: var(--touch);
  padding: 0;
  place-items: center;
  font-size: 1.25rem;
}

.button:hover,
.icon-button:hover,
.action-button:hover {
  border-color: var(--felt);
  background: var(--felt-soft);
}

.button--primary,
.action-button--primary {
  border-color: var(--felt-strong);
  background: var(--felt-strong);
  color: #ffffff;
}

.button--primary:hover,
.action-button--primary:hover {
  border-color: #0f362a;
  background: #0f362a;
}

.button--danger,
.action-button--danger {
  border-color: var(--red);
  color: var(--red);
}

.button--danger:hover,
.action-button--danger:hover {
  background: var(--red-soft);
}

.button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--blue);
}

.action-bar {
  position: sticky;
  z-index: 10;
  bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 2px 8px rgb(19 39 33 / 14%);
}

.action-bar__inner {
  display: grid;
  width: min(100%, 42rem);
  margin-inline: auto;
  grid-template-columns: repeat(var(--table-tab-count, 3), minmax(0, 1fr));
  gap: 0.5rem;
}

.action-button {
  padding-inline: 0.5rem;
  font-size: 0.94rem;
}

dialog,
.dialog {
  width: min(calc(100% - 2rem), 36rem);
  max-height: min(90vh, 48rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1rem 3rem rgb(11 28 23 / 28%);
  overflow: auto;
}

dialog::backdrop {
  background: rgb(11 28 23 / 58%);
}

.modal-backdrop {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  padding: 1rem;
  place-items: center;
  background: rgb(11 28 23 / 58%);
  overflow-y: auto;
}

.dialog__header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
}

.dialog__title {
  min-width: 0;
  margin: 0 auto 0 0;
  font-size: 1.0625rem;
}

.dialog__body {
  display: grid;
  min-width: 0;
  padding: 1rem;
  gap: 1rem;
}

.dialog__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--surface);
}

.form-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
}

.field {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.field label,
.field-label {
  font-size: 0.94rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea,
.input {
  width: 100%;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.field textarea {
  min-height: 6rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  border-color: var(--felt);
}

.field-hint,
.field-error {
  margin: 0;
  font-size: 0.84rem;
}

.field-hint {
  color: var(--ink-muted);
}

.field-error {
  color: var(--red);
  font-weight: 650;
}

.field [aria-invalid="true"],
[aria-invalid="true"].input {
  border-color: var(--red);
  background: #fffafa;
}

.bootstrap-error {
  display: grid;
  width: min(calc(100% - 2rem), 30rem);
  min-height: 100dvh;
  margin-inline: auto;
  padding-block: 3rem;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.bootstrap-error h1,
.bootstrap-error p {
  margin: 0;
}

.bootstrap-error h1 {
  font-size: 1.5rem;
}

.bootstrap-error p {
  color: var(--ink-muted);
  line-height: 1.65;
}

.bootstrap-error__mark {
  width: 3.25rem;
  aspect-ratio: 1;
  padding: 0.45rem;
  border-radius: 8px;
  background: var(--felt);
}

.bootstrap-error__mark i {
  display: block;
  width: 100%;
  height: 100%;
  border: 0.28rem solid #fff;
  border-radius: 50%;
}

.amount-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.amount-field {
  display: grid;
  min-width: 0;
  padding: 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  gap: 0.35rem;
  background: var(--surface-subtle);
}

.amount-field input {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.balance-check {
  display: flex;
  min-width: 0;
  padding: 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-subtle);
  font-size: 0.89rem;
}

.balance-check__total {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.balance-check--invalid {
  border-color: #c26761;
  background: var(--red-soft);
  color: var(--red);
}

.empty-state {
  display: grid;
  min-height: 8rem;
  padding: 1.5rem;
  place-items: center;
  color: var(--ink-muted);
  text-align: center;
}

.empty-state p {
  margin: 0;
}

.fixture-page {
  padding-block-end: 2rem;
}

.fixture-banner {
  padding: 0.625rem 0.75rem;
  border-inline-start: 4px solid var(--blue);
  background: var(--blue-soft);
  color: #244b6e;
  font-size: 0.89rem;
}

.fixture-banner p {
  margin: 0;
}

.fixture-panel {
  display: grid;
  min-width: 0;
  gap: 1.25rem;
}

.fixture-title {
  min-width: 0;
  margin: 0;
  font-size: 1.125rem;
}

.fixture-facts {
  display: grid;
  min-width: 0;
  margin: 0.75rem 0 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.fixture-facts > div {
  display: flex;
  min-width: 0;
  padding-block-end: 0.4rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  gap: 0.5rem;
}

.fixture-facts dt {
  min-width: 3rem;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.fixture-facts dd {
  min-width: 0;
  margin: 0 0 0 auto;
  font-size: 0.89rem;
  font-weight: 700;
  text-align: end;
}

.fixture-leg-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.5rem;
}

.fixture-leg {
  display: flex;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--amber);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--surface);
}

.fixture-leg--complete {
  border-inline-start-color: var(--felt);
}

.fixture-leg__title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 750;
}

.fixture-leg__meta {
  margin: 0.15rem 0 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.fixture-control {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fixture-control legend {
  margin-block-end: 0.5rem;
  font-size: 0.94rem;
  font-weight: 750;
}

.fixture-segment {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--line-strong);
  overflow: hidden;
}

.fixture-segment label {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.625rem;
  place-items: center;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.89rem;
  font-weight: 700;
  text-align: center;
}

.fixture-segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fixture-segment label:has(input:checked) {
  background: var(--felt-strong);
  color: #ffffff;
}

.fixture-segment label:has(input:focus-visible) {
  outline: 3px solid #f0b429;
  outline-offset: -3px;
}

.fixture-state-compare {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.fixture-state {
  min-width: 0;
  padding-block: 0.75rem;
  border-block: 1px solid var(--line);
}

.fixture-state h3 {
  margin: 0;
  font-size: 1rem;
}

.fixture-outcome {
  padding: 0.75rem;
  border-inline-start: 4px solid var(--felt);
  background: var(--felt-soft);
}

.fixture-outcome--rejected {
  border-inline-start-color: var(--red);
  background: var(--red-soft);
  color: #6e3632;
}

.fixture-outcome h3,
.fixture-outcome p {
  margin: 0;
}

.fixture-outcome h3 {
  font-size: 1rem;
}

.fixture-outcome p {
  margin-block-start: 0.25rem;
  font-size: 0.89rem;
}

.flow-layout {
  display: grid;
  width: min(100%, 42rem);
  min-width: 0;
  margin-inline: auto;
  padding: 1rem;
  gap: 1.5rem;
}

.flow-progress {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.flow-progress li {
  position: relative;
  display: grid;
  min-width: 0;
  padding-block-end: 0.625rem;
  border-bottom: 3px solid var(--line);
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.flow-progress li > span {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  place-items: center;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.flow-progress li > strong {
  min-width: 0;
  font-weight: 750;
}

.flow-progress .flow-progress__step--complete,
.flow-progress .flow-progress__step--current {
  border-bottom-color: var(--felt);
  color: var(--felt-strong);
}

.flow-progress .flow-progress__step--complete > span,
.flow-progress .flow-progress__step--current > span {
  border-color: var(--felt);
  background: var(--felt-soft);
}

.flow-screen,
.flow-form,
.flow-qr-simulation,
.flow-community,
.flow-community__section {
  display: grid;
  min-width: 0;
  gap: 1rem;
}

.flow-screen__heading {
  min-width: 0;
  padding-block-end: 1rem;
  border-bottom: 1px solid var(--line);
}

.flow-screen__heading h2 {
  margin: 0;
  font-size: 1.25rem;
}

.flow-screen__heading > p:last-child {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.mahjong-variant-picker {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0.55rem;
}

.mahjong-variant-picker legend {
  margin-block-end: 0.45rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.mahjong-variant-option {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  min-height: 3.25rem;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  align-items: center;
  gap: 0.65rem;
  background: #ffffff;
}

.mahjong-variant-option:has(input:checked) {
  border-color: var(--felt);
  background: var(--felt-soft);
}

.mahjong-variant-option.is-disabled {
  color: var(--ink-muted);
  background: #f4f5f1;
}

.mahjong-variant-option > span {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.mahjong-variant-option small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.cantonese-points-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.cantonese-points-table summary {
  padding: 0.75rem;
  cursor: pointer;
  font-weight: 800;
}

.cantonese-points-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 0.75rem 0.75rem;
  gap: 0.45rem;
}

.cantonese-points-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
}

.cantonese-points-grid input {
  min-width: 0;
  width: 100%;
}

@media (max-width: 420px) {
  .cantonese-points-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.flow-eyebrow {
  margin: 0 0 0.25rem;
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 750;
}

.flow-actions {
  justify-content: flex-end;
}

.flow-actions .button {
  text-decoration: none;
}

.flow-choice-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.flow-choice {
  display: grid;
  min-width: 0;
  min-height: 5.5rem;
  padding: 0.875rem;
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--felt);
  border-radius: var(--radius-small);
  align-content: center;
  gap: 0.2rem;
  background: var(--surface);
  text-align: start;
}

.flow-choice:hover {
  border-color: var(--felt);
  background: var(--felt-soft);
}

.flow-choice strong {
  font-size: 1rem;
}

.flow-choice span {
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.flow-invite-layout,
.flow-home-invite {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.flow-invite-code {
  display: flex;
  min-width: 0;
  margin: 0.35rem 0;
  color: var(--felt-strong);
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.2;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flow-qr {
  display: grid;
  width: min(100%, 15rem);
  min-width: 0;
  margin: 0 auto;
  gap: 0.4rem;
  text-align: center;
}

.flow-qr img {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: #ffffff;
  image-rendering: pixelated;
}

.flow-qr figcaption {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.flow-qr--compact {
  width: min(100%, 11rem);
}

.flow-summary {
  display: grid;
  min-width: 0;
  margin: 0;
}

.flow-summary > div {
  display: flex;
  min-width: 0;
  min-height: var(--touch);
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 0.75rem;
}

.flow-summary dt {
  color: var(--ink-muted);
  font-size: 0.89rem;
  font-weight: 700;
}

.flow-summary dd {
  min-width: 0;
  margin-inline-start: auto;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-align: end;
}

.flow-community__section {
  padding-block-end: 1rem;
  border-bottom: 1px solid var(--line);
}

.flow-community__section .section-heading {
  margin: 0;
}

.flow-community__section .section-heading .button {
  min-height: var(--touch);
  margin-inline-start: auto;
}

.flow-member-list,
.flow-table-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-member-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.flow-member-list li {
  display: flex;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.5rem;
  border: 1px solid var(--line);
  align-items: center;
  gap: 0.5rem;
}

.flow-member-list li > button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.5rem;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.flow-member-list li > button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--felt) 32%, transparent);
  outline-offset: 2px;
}

.flow-member-list li > span {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  place-items: center;
  flex: 0 0 auto;
  background: var(--surface-subtle);
  color: var(--felt-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

.flow-member-list strong {
  min-width: 0;
  font-size: 0.89rem;
}

.flow-home-invite {
  padding: 0.875rem;
  border-inline-start: 4px solid var(--blue);
  background: var(--blue-soft);
}

.flow-table-list {
  gap: 0;
}

.flow-table-row {
  display: grid;
  min-width: 0;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.flow-table-row:last-child {
  border-bottom: 0;
}

.flow-table-row__main {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flow-table-row__main > div {
  min-width: 0;
}

.flow-table-row h4,
.flow-table-row p {
  margin: 0;
}

.flow-table-row h4 {
  font-size: 1rem;
}

.flow-table-row p {
  margin-block-start: 0.15rem;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.flow-table-row > .button {
  width: fit-content;
  text-decoration: none;
}

.flow-empty-table {
  display: grid;
  min-height: 8rem;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  color: var(--ink-muted);
  background: var(--surface-subtle);
}

.flow-empty-table .lucide-icon {
  width: 2rem;
  height: 2rem;
}

.room-setup-dialog .dialog__header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.room-rules-lock {
  padding: 0.15rem 0.35rem;
  border: 1px solid #9aaba5;
  border-radius: var(--radius-small);
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.room-save-profile {
  justify-content: flex-start !important;
}

.room-save-profile > span,
.room-mode-option > span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.room-save-profile small,
.room-mode-option small {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.room-mode-option {
  display: grid;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.45rem;
  border-radius: var(--radius-small);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  font-size: 0.89rem;
}

.room-mode-option.is-selected {
  background: var(--felt-strong);
  color: #ffffff;
}

.room-mode-option.is-selected small {
  color: #d7ebe3;
}

.room-mode-option input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--felt);
}

.lucide-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
}

.compact-table-header .app-header__inner {
  width: min(100%, 48rem);
  min-height: 3.5rem;
  padding: 0.35rem 0.75rem;
  gap: 0.625rem;
}

.compact-table-header .header-title h1 {
  font-size: 1rem;
}

.compact-table-header .header-title p {
  font-size: 0.8rem;
}

.compact-table-header__back {
  color: var(--ink);
  text-decoration: none;
}

.prototype-mark {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.table-fixture-page {
  width: min(100%, 48rem);
  min-height: calc(100vh - 3.5rem);
  margin-inline: auto;
  padding-block-end: var(--table-tabs-clearance);
  background: var(--surface);
}

.table-workspace,
.table-view-panel,
.compact-table-view,
.compact-secondary-view,
.table-entry {
  min-width: 0;
}

.table-utilities {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.table-utilities__row {
  display: grid;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  grid-template-columns: repeat(var(--utility-count, 4), minmax(0, 1fr));
  gap: 0.125rem;
}

.table-utilities__row--secondary {
  padding-block-start: 0;
  border-top: 1px solid var(--surface-subtle);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.table-utility {
  display: grid;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.35rem 0.15rem;
  border: 0;
  border-radius: var(--radius-small);
  place-items: center;
  align-content: center;
  gap: 0.15rem;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.table-utility:hover,
.table-utility--active {
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.table-utility span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.table-score-diamond {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
  grid-template-areas:
    ". top ."
    "left surface right"
    ". bottom .";
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  grid-template-rows: minmax(4.5rem, auto) minmax(6.75rem, auto) minmax(4.5rem, auto);
  gap: 0.5rem;
  background: #edf2ef;
}

.table-score-diamond__surface {
  grid-area: surface;
  display: grid;
  width: min(100%, 8.75rem);
  min-width: 0;
  min-height: 6.75rem;
  padding: 0.6rem;
  border: 1px solid #123f31;
  border-radius: var(--radius-small);
  place-self: stretch center;
  align-content: center;
  justify-items: center;
  gap: 0.1rem;
  background: var(--felt);
  color: #ffffff;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
  container-type: inline-size;
}

.table-score-diamond__surface span,
.table-score-diamond__surface strong,
.table-score-diamond__surface small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.table-identity-control {
  display: block;
  width: 100%;
  min-width: 0;
}

.table-identity-control select {
  width: 100%;
  min-width: 0;
  min-height: 1.65rem;
  padding: 0.1rem 1.2rem 0.1rem 0.25rem;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: var(--radius-small);
  background: #ffffff;
  color: var(--felt-strong);
  font-size: clamp(0.5rem, 12cqi, 0.6875rem);
  font-weight: 800;
}

.table-current-identity {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.25rem 0.35rem;
  border-radius: var(--radius-small);
  background: rgb(255 255 255 / 92%);
  color: var(--felt-strong);
}

.table-current-identity > svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}

.table-current-identity span {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.table-current-identity small {
  font-size: 0.75rem;
  font-weight: 700;
}

.table-current-identity strong {
  overflow: hidden;
  font-size: clamp(0.5rem, 12cqi, 0.6875rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-waiting-identity {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  color: var(--felt-strong);
}

.table-waiting-identity > svg {
  width: 0.9rem;
  height: 0.9rem;
}

.table-waiting-identity small { color: var(--ink-muted); }
.table-waiting-identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-notification {
  display: flex;
  width: calc(100% - 1rem);
  min-width: 0;
  min-height: var(--touch);
  margin: 0.5rem auto 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid #b88928;
  border-radius: var(--radius-small);
  align-items: center;
  gap: 0.5rem;
  background: #fff6df;
  color: #674609;
  font-weight: 750;
  text-align: start;
}

.table-notification span {
  min-width: 0;
  flex: 1 1 auto;
}

.table-notification--rejected {
  border-color: #d37979;
  background: #fff0f0;
  color: #8b2020;
}

.table-dealer-pending {
  margin-block-start: 0.2rem;
  color: #ffe39a;
  font-size: clamp(0.5rem, 11cqi, 0.625rem);
  font-style: normal;
  font-weight: 750;
}

.table-score-diamond__surface span {
  color: #d7ebe3;
  font-size: clamp(0.5625rem, 12cqi, 0.6875rem);
  font-weight: 700;
}

.table-score-diamond__surface strong {
  font-size: clamp(0.625rem, 15cqi, 1rem);
  white-space: nowrap;
}

.table-score-diamond__surface small {
  margin-block-start: 0.3rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: var(--radius-small);
  color: #f7faf9;
  font-size: clamp(0.5rem, 11cqi, 0.625rem);
  font-weight: 700;
}

.table-score-diamond__player {
  position: relative;
  display: grid;
  width: min(100%, 8.75rem);
  min-width: 0;
  min-height: 4.5rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid #aebbb6;
  border-radius: var(--radius-small);
  place-self: center;
  align-content: center;
  justify-items: center;
  gap: 0.1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(21 49 40 / 12%);
  container-type: inline-size;
  text-align: center;
}

.table-score-diamond__dealer {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: grid;
  width: auto;
  min-width: 1.5rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  border-radius: 0.25rem;
  place-items: center;
  background: #f1c85b;
  color: #5c4100;
  font-size: 0.8rem;
  font-weight: 850;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.table-dice-result {
  display: flex;
  margin-block-start: 0.25rem;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.table-dice-result b {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.2rem;
  place-items: center;
  background: #ffffff;
  color: var(--felt-strong);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.table-score-diamond__player:hover {
  border-color: var(--felt);
  background: #f7faf9;
}

.table-score-diamond__player--top {
  grid-area: top;
}

.table-score-diamond__player--right {
  grid-area: right;
}

.table-score-diamond__player--bottom {
  grid-area: bottom;
}

.table-score-diamond__player--left {
  grid-area: left;
}

.table-score-diamond__player--current {
  border-color: #b47a0d;
  box-shadow: inset 0 -3px #d39b2b;
}

.table-score-diamond__player span,
.table-score-diamond__player strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.table-score-diamond__player span {
  font-size: clamp(0.625rem, 14cqi, 0.8125rem);
  font-weight: 750;
}

.table-score-diamond__player strong {
  font-size: clamp(0.625rem, 18cqi, 1.125rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.opponent-ledger-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(var(--opponent-count, 3), minmax(0, 1fr));
  background: var(--surface);
}

.opponent-ledger {
  min-width: 0;
  padding: 1.125rem 0.625rem 1.5rem;
  border-inline-end: 1px solid var(--line);
  text-align: center;
}

.opponent-ledger:last-child {
  border-inline-end: 0;
}

.opponent-ledger__header p,
.opponent-ledger__header h2,
.opponent-ledger__unsettled {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

.opponent-ledger__header p {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.opponent-ledger__header h2 {
  min-height: 1.35rem;
  margin-block-start: 0.15rem;
  font-size: 1rem;
}

.opponent-ledger__unsettled {
  display: flex;
  max-width: 100%;
  min-height: 1.5rem;
  margin-block-start: 0.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.opponent-ledger__unsettled b {
  display: grid;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 50%;
  place-items: center;
  background: #bf2148;
  color: #ffffff;
  font-size: 0.75rem;
}

.opponent-ledger__actions {
  display: grid;
  min-width: 0;
  margin-block-start: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
}

.opponent-ledger__kick,
.opponent-ledger__settle {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.35rem 0.25rem;
  border: 0;
  border-radius: var(--radius-small);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.2;
}

.opponent-ledger__kick {
  background: #ef3b65;
}

.opponent-ledger__kick:hover,
.opponent-ledger__kick--active {
  background: #bf2148;
}

.opponent-ledger__settle {
  display: flex;
  padding-inline: 0.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #85878d;
}

.opponent-ledger__settle strong {
  min-width: 1rem;
  font-size: 0.89rem;
}

.opponent-ledger__settle--matched:hover {
  background: #62656a;
}

.opponent-ledger__settle--conflict {
  background: var(--red);
}

.opponent-ledger__settle--pending {
  background: #9b6a0d;
}

.opponent-ledger__settle--delegated {
  background: var(--blue);
}

.opponent-ledger__records {
  display: grid;
  min-width: 0;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  grid-auto-rows: minmax(3.25rem, auto);
}

.opponent-ledger__records li {
  display: grid;
  min-width: 0;
  border-bottom: 1px solid #e3e7e5;
  place-items: center;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.opponent-ledger__records li:last-child {
  border-bottom: 0;
}

.opponent-ledger__record-button {
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.opponent-ledger__record-button:hover {
  background: var(--surface-subtle);
}

.opponent-ledger__record-value {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.25rem;
  place-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.table-fixture-page--large-scores .opponent-ledger__record-button {
  font-size: 1.375rem;
}

.table-fixture-page--large-scores .opponent-ledger__record-value {
  font-size: 1.375rem;
}

.table-audience-ledger-empty {
  display: grid;
  min-height: 9rem;
  padding: 1.5rem;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  color: var(--ink-muted);
  text-align: center;
}

.table-audience-ledger-empty strong {
  color: var(--ink);
  font-size: 1rem;
}

.table-audience-ledger-empty span {
  max-width: 24rem;
  font-size: 0.84rem;
}

.table-audience-ledger-empty ul {
  display: flex;
  max-width: 24rem;
  margin: 0.25rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
  list-style: none;
}

.opponent-ledger__empty {
  color: #a3aaa7;
  font-weight: 500;
}

.opponent-ledger__locked-row {
  color: #c4cac7;
}

.opponent-ledger__auto-mode {
  display: grid;
  min-height: var(--touch);
  place-items: center;
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 800;
}

.table-entry-dialog {
  width: min(calc(100% - 1rem), 32rem);
}

.table-entry-dialog__body {
  gap: 0.875rem;
}

.table-profile-dialog {
  width: min(calc(100% - 1rem), 56rem);
  max-height: min(92dvh, 54rem);
}

.table-profile-dialog__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 0.85rem;
}

.table-profile-dialog .ahu-profile-hero--concept,
.table-profile-dialog .ahu-profile-section {
  width: 100%;
  margin: 0;
}

.table-profile-dialog__status {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.table-profile-dialog__status--error {
  color: var(--red);
}

.community-name-dialog input {
  font-size: 1rem;
}

.ahu-community-hero__title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
}

.ahu-community-hero__title h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ahu-community-hero__title .ahu-icon-button {
  flex: none;
}

.seat-manager__table {
  display: grid;
  min-width: 0;
  padding: 0.5rem;
  grid-template-areas:
    ". top ."
    "left surface right"
    ". bottom .";
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  background: #edf2ef;
}

.seat-manager {
  overflow-x: hidden;
}

.seat-manager__tables,
.seat-manager__table-wrap {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

.seat-manager__table-wrap > h3 {
  margin: 0;
  font-size: 0.9rem;
}

@media (min-width: 48rem) {
  .seat-manager--merged {
    width: min(calc(100% - 1rem), 70rem);
  }

  .seat-manager--merged .seat-manager__tables {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    align-items: start;
  }
}

.seat-manager__seat {
  display: grid;
  min-width: 0;
  min-height: 6.75rem;
  padding: 0.4rem;
  border: 1px dashed #9aaba5;
  border-radius: var(--radius-small);
  align-content: center;
  gap: 0.35rem;
  background: rgb(255 255 255 / 72%);
  text-align: center;
}

.seat-manager__seat--top {
  grid-area: top;
}

.seat-manager__seat--right {
  grid-area: right;
}

.seat-manager__seat--bottom {
  grid-area: bottom;
}

.seat-manager__seat--left {
  grid-area: left;
}

.seat-manager__seat--drop-target {
  border-color: var(--felt-strong);
  background: #dcebe5;
  box-shadow: inset 0 0 0 2px var(--felt-strong);
}

.seat-manager__seat > span {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.seat-manager__surface {
  grid-area: surface;
  display: grid;
  min-width: 0;
  min-height: 6.75rem;
  border-radius: var(--radius-small);
  place-items: center;
  background: var(--felt);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 750;
}

.seat-manager__member {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.35rem 0.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.1rem 0.25rem;
  background: var(--surface);
  color: var(--ink);
  cursor: grab;
  text-align: start;
  touch-action: none;
}

.seat-manager__member > span {
  grid-row: 1 / span 2;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.seat-manager__member strong,
.seat-manager__member small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.seat-manager__member strong {
  font-size: 0.84rem;
}

.seat-manager__member small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.seat-manager__member:hover,
.seat-manager__member--selected {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
}

.seat-manager__member--dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.seat-manager__move {
  min-width: 0;
  min-height: 2rem;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--felt-strong);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
}

.seat-manager__audience {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

.seat-manager__section-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.seat-manager__section-heading > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.45rem;
}

.seat-manager__section-heading .button {
  min-height: 2.25rem;
  padding: 0.4rem 0.65rem;
}

.seat-manager__section-heading h3,
.seat-manager__section-heading span,
.seat-manager__audience-list p {
  margin: 0;
}

.seat-manager__section-heading h3 {
  font-size: 1rem;
}

.seat-manager__section-heading span,
.seat-manager__audience-list p {
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.seat-manager__audience-list {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.table-choice-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0.4rem;
}

.table-choice-list legend {
  margin-block-end: 0.5rem;
  font-size: 0.94rem;
  font-weight: 700;
}

.table-choice-list label,
.table-setting-list label {
  display: flex;
  min-width: 0;
  min-height: 3rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  align-items: center;
  gap: 0.65rem;
  background: var(--surface);
}

.table-choice-list input,
.table-setting-list input {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  accent-color: var(--felt-strong);
}

.table-delegate-list label > span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.table-delegate-list small {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.table-empty-action {
  margin: 0;
  padding: 1rem;
  color: var(--ink-muted);
  text-align: center;
}

.draw-jackpot-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.table-setting-list {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

.settings-section {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  gap: 0.65rem;
}

.settings-section:first-child {
  padding-block-start: 0;
  border-top: 0;
}

.settings-section legend {
  padding: 0;
  font-size: 0.94rem;
  font-weight: 800;
}

.settings-section > label {
  display: flex;
  min-width: 0;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.settings-section > label select {
  width: auto;
  min-width: 6rem;
}

.settings-number-grid,
.settings-inline-fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.settings-number-grid .field:last-child {
  grid-column: 1 / -1;
}

.room-feature-details--jackpot .field:last-child {
  grid-column: auto;
}

.settings-section select {
  width: 100%;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.guided-score-preview,
.proposal-review-message,
.settlement-counter-claim {
  display: flex;
  min-width: 0;
  min-height: 4rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #9bb7ad;
  border-radius: var(--radius-small);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #eef7f3;
}

.guided-score-preview-list {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
}

.guided-score-preview span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.guided-score-preview small {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.guided-score-preview strong,
.proposal-review-message strong,
.settlement-counter-claim strong {
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}

.proposal-review-message {
  display: grid;
  justify-content: stretch;
  text-align: center;
}

.proposal-review-message--rejected {
  border-color: #d37979;
  background: #fff0f0;
}

.modal-backdrop--mandatory {
  background: rgb(11 28 23 / 68%);
}

.table-proposal-dialog--mandatory {
  display: grid;
  width: min(calc(100% - 2rem), 36rem);
  min-height: min(15rem, calc(100dvh - 2rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.table-proposal-dialog--mandatory .dialog__header {
  padding-inline-end: 1rem;
}

.table-proposal-dialog--mandatory .dialog__body {
  align-content: center;
}

.table-proposal-dialog--mandatory .proposal-review-message {
  min-height: 5.5rem;
  place-content: center;
}

.table-proposal-dialog--mandatory .proposal-review-message strong {
  font-size: 1.75rem;
}

.table-proposal-dialog--mandatory .dialog__footer .button {
  min-height: 3.25rem;
  flex: 1 1 10rem;
}

.table-pending-settlement-dialog {
  width: min(calc(100% - 2rem), 26rem);
}

.table-pending-settlement-dialog__question {
  margin: 0;
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.table-pending-settlement-dialog .dialog__body {
  min-height: 7rem;
  place-content: center;
}

.table-pending-settlement-dialog .dialog__footer .button {
  min-height: 3rem;
  flex: 1 1 7rem;
}

.proposal-review-count {
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 750;
  white-space: nowrap;
}

.proposal-review-facts,
.room-rules-summary {
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.proposal-review-facts > div,
.room-rules-summary > div {
  display: grid;
  min-width: 0;
  padding: 0.55rem;
  gap: 0.15rem;
  background: var(--surface);
}

.proposal-review-facts dt,
.room-rules-summary dt {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.proposal-review-facts dd,
.room-rules-summary dd {
  min-width: 0;
  margin: 0;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.settlement-amount {
  display: grid;
  min-height: 5rem;
  place-items: center;
  align-content: center;
  gap: 0.15rem;
  background: var(--surface-subtle);
}

.settlement-amount span {
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.settlement-amount strong {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.settlement-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.settlement-comparison span {
  display: grid;
  min-width: 0;
  min-height: 4rem;
  padding: 0.5rem;
  place-items: center;
  gap: 0.15rem;
  background: var(--surface);
  font-size: 0.84rem;
}

.settlement-comparison strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.table-waiting-view {
  display: grid;
  min-height: calc(100vh - 3.5rem);
  padding: 1rem;
  align-content: start;
  gap: 1.25rem;
  background: #edf2ef;
}

.table-waiting-view > header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.table-waiting-view h2,
.table-waiting-view h3 {
  margin: 0;
}

.table-waiting-view > header span {
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-small);
  background: var(--felt);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
}

.table-waiting-seats {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.table-waiting-seat {
  display: grid;
  min-width: 0;
  min-height: 5rem;
  padding: 0.5rem;
  border: 1px dashed #9aaba5;
  place-items: center;
  background: rgb(255 255 255 / 65%);
  color: var(--ink-muted);
  font-size: 0.89rem;
  font-weight: 700;
}

.table-waiting-seat--joined {
  border-style: solid;
  border-color: var(--felt);
  background: var(--surface);
  color: var(--ink);
}

.table-waiting-invite {
  display: grid;
  min-width: 0;
  gap: 0.75rem;
}

.table-waiting-invite > div {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.table-setting-list label > span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.table-setting-list strong,
.table-setting-list small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.table-setting-list strong {
  font-size: 0.89rem;
}

.table-setting-list small {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.entry-kind-segment {
  display: grid;
  min-width: 0;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  gap: 0.2rem;
  background: var(--surface-subtle);
}

.entry-kind-segment button {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.4rem 0.35rem;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  font-size: 0.94rem;
  font-weight: 750;
}

.entry-kind-segment button:hover {
  background: #ffffff;
}

.entry-kind-segment button.is-selected {
  background: var(--felt-strong);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.entry-kind-segment--sign button.is-negative {
  background: var(--red);
}

.entry-kind-segment--sign button.is-positive {
  background: var(--felt-strong);
}

.entry-field-group {
  display: grid;
  min-width: 0;
  padding-block: 0.125rem;
  gap: 0.75rem;
}

.entry-fan-field input,
.table-entry-dialog--manual input {
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-align: center;
}

.entry-participant-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  gap: 0.4rem;
}

.entry-participant {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 0.89rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.entry-participant:hover,
.entry-participant--selected {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: #1b4f7c;
}

.dealer-continuation-stepper {
  display: flex;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
}

.dealer-continuation-stepper > span { font-size: 0.89rem; font-weight: 850; }
.dealer-continuation-stepper > div { display: grid; grid-template-columns: 2.35rem 3rem 2.35rem; align-items: center; gap: 0.3rem; }
.dealer-continuation-stepper button {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  place-items: center;
  background: var(--surface-subtle);
  color: var(--felt-strong);
}
.dealer-continuation-stepper button:disabled { color: var(--ink-muted); opacity: 0.45; }
.dealer-continuation-stepper .lucide-icon { width: 1rem; height: 1rem; }
.dealer-continuation-stepper output { font-size: 1.2rem; font-variant-numeric: tabular-nums; font-weight: 950; text-align: center; }

.entry-switch {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem 0;
  border: 0;
  border-block: 1px solid var(--line);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: transparent;
  font-weight: 750;
  text-align: start;
}

.entry-switch__control {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 1rem;
  flex: 0 0 auto;
  background: #818d89;
}

.entry-switch__control i {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.entry-switch[aria-checked="true"] .entry-switch__control {
  background: var(--felt-strong);
}

.entry-switch[aria-checked="true"] .entry-switch__control i {
  left: 1.4375rem;
}

.entry-permission {
  display: flex;
  min-width: 0;
  min-height: 3rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.84rem;
}

.entry-permission span {
  color: inherit;
  opacity: 0.84;
}

.entry-permission--allowed {
  border-color: #6b9d89;
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.entry-permission--delegated {
  border-color: #7698b8;
  background: var(--blue-soft);
  color: var(--blue);
}

.entry-permission--denied {
  border-color: #c26761;
  background: var(--red-soft);
  color: var(--red);
}

.manual-delta-preview {
  display: grid;
  min-width: 0;
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 1px;
  background: var(--line);
}

.manual-delta-preview span {
  display: grid;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.45rem 0.25rem;
  align-content: center;
  justify-items: center;
  gap: 0.1rem;
  background: var(--surface);
  font-size: 0.8rem;
  text-align: center;
}

.manual-delta-preview strong {
  max-width: 100%;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.table-primary-tabs {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  width: min(100%, 48rem);
  min-width: 320px;
  margin-inline: auto;
  padding-block-end: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(var(--table-tab-count, 3), minmax(0, 1fr));
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 -2px 8px rgb(19 39 33 / 10%);
}

.table-primary-tablist { display: contents; }

.table-command-bar {
  position: sticky;
  z-index: 12;
  top: 4rem;
  display: grid;
  min-width: 0;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 2.5rem 2.5rem minmax(4.5rem, auto) minmax(5rem, auto);
  justify-content: end;
  gap: 0.4rem;
  background: rgb(255 255 255 / 96%);
}

.table-command-bar button {
  display: grid;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  place-items: center;
  background: var(--surface);
}

.table-command-bar .table-command-bar__settle {
  padding-inline: 1rem;
  background: var(--felt-strong);
  color: #fff;
  font-size: 0.89rem;
  font-weight: 800;
}

.table-command-bar .table-command-bar__invite {
  display: flex;
  padding-inline: 0.7rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 850;
}

.table-command-bar__invite .lucide-icon { width: 0.9rem; height: 0.9rem; }

.final-settlement-body,
.final-settlement-body section,
.final-transfer-list,
.meal-calculator form { display: grid; min-width: 0; gap: 0.65rem; }
.final-settlement-busy {
  display: flex;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #b7c9bd;
  align-items: center;
  gap: 0.65rem;
  background: #eaf4ed;
  color: #173d2e;
}
.final-settlement-busy .lucide-icon { flex: 0 0 auto; animation: settlement-spinner 0.9s linear infinite; }
.final-settlement-busy span { display: grid; min-width: 0; }
.final-settlement-busy small { font-size: 0.78rem; }
@keyframes settlement-spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .final-settlement-busy .lucide-icon { animation: none; }
}
.final-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); border: 1px solid var(--line); }
.final-score-grid span { display: grid; min-width: 0; padding: 0.65rem 0.2rem; border-inline-end: 1px solid var(--line); justify-items: center; }
.final-score-grid span:last-child { border-inline-end: 0; }
.final-score-grid small { color: var(--ink-muted); font-size: 0.75rem; }
.final-score-grid strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.final-settlement-body h3 { margin: 0; font-size: 1rem; }
.final-transfer-list p { display: grid; min-height: 2.75rem; margin: 0; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--line); grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.89rem; }
.final-transfer-list p span { color: var(--ink-muted); text-align: center; }
.meal-calculator { padding-block-start: 0.75rem; border-top: 1px solid var(--line); }
.meal-calculator form { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; }
.meal-calculator label { display: grid; min-width: 0; gap: 0.2rem; color: var(--ink-muted); font-size: 0.8rem; font-weight: 700; }
.meal-calculator input,.meal-calculator select { width: 100%; min-width: 0; min-height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: #fff; }
.meal-result { margin: 0; padding: 0.65rem; background: var(--felt-soft); color: var(--felt-strong); font-size: 0.89rem; font-weight: 750; }

@media (max-width: 30rem) {
  .meal-calculator form { grid-template-columns: 1fr 1fr; }
  .meal-calculator form .button { grid-column: 1 / -1; }
}

.table-primary-tabs button,
.table-primary-tabs__profile {
  display: grid;
  min-width: 0;
  min-height: 3.75rem;
  padding: 0.4rem;
  border: 0;
  place-items: center;
  align-content: center;
  gap: 0.1rem;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.table-primary-tabs button:hover,
.table-primary-tabs button[aria-selected="true"],
.table-primary-tabs__profile:hover {
  color: var(--felt-strong);
}

.table-primary-tabs button[aria-selected="true"] .lucide-icon {
  stroke-width: 2.5;
}

.compact-secondary-view {
  display: grid;
  padding: 1rem;
  gap: 1.25rem;
}

.compact-view-heading,
.score-chart-section__heading {
  display: flex;
  min-width: 0;
  margin: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.compact-view-heading h2,
.score-chart-section__heading h2 {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
}

.compact-view-heading > div p {
  margin: 0.15rem 0 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.table-live-mode {
  display: grid;
  width: fit-content;
  margin: 0.65rem auto 0;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  grid-template-columns: auto repeat(2, minmax(4rem, 1fr));
  align-items: center;
  background: var(--surface-subtle);
}

.table-live-mode > span {
  padding-inline: 0.55rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.table-live-mode button {
  min-height: 2.75rem;
  padding: 0.25rem 0.65rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 750;
}

.table-live-mode button[aria-pressed="true"] {
  background: #ffffff;
  color: var(--felt-strong);
  box-shadow: 0 1px 3px rgb(19 39 33 / 18%);
}

.table-ledger-dialog {
  width: min(94vw, 34rem);
}

.table-ledger-dialog .dialog__header > div {
  min-width: 0;
  flex: 1;
}

.table-ledger-dialog__body {
  display: grid;
  gap: 1rem;
}

.table-ledger-pairs {
  display: grid;
  gap: 0.5rem;
}

.table-ledger-pair {
  display: grid;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
}

.table-ledger-pair.is-active {
  border-color: #8ab49a;
  background: var(--felt-soft);
}

.table-ledger-pair.is-pending {
  border-color: #d9bd79;
  background: #fffaf0;
}

.table-ledger-pair > div {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.table-ledger-pair > div > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1.45;
}

.table-ledger-pair small {
  margin-inline-start: 0.25rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.table-ledger-pair > strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.table-ledger-empty {
  margin: 0;
  padding: 1.2rem;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--ink-muted);
  text-align: center;
}

.table-false-win-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.table-false-win-options button {
  display: grid;
  min-height: 3.25rem;
  place-content: center;
  gap: 0.1rem;
}

.table-false-win-options button small {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.table-false-win-penalty-field {
  border: 1px solid var(--line);
}

@media (max-width: 34rem) {
  .table-ledger-pair {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .table-ledger-pair .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.compact-record-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.compact-record-list li {
  display: flex;
  min-height: 3.75rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.94rem;
  font-weight: 700;
}

.compact-record-list__draft {
  color: var(--blue);
}

.compact-record-list__draft small {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.hand-history-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hand-history-item {
  display: grid;
  min-width: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  gap: 0.65rem;
}

.hand-history-item__round-bar {
  display: flex;
  min-width: 0;
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border-inline-start: 4px solid var(--felt-strong);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--surface-subtle);
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 800;
}

.hand-history-item__round-bar small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.hand-history-item article { display: grid; min-width: 0; gap: 0.45rem; }
.hand-history-item header { display: flex; min-width: 0; justify-content: space-between; align-items: center; gap: 0.5rem; }
.hand-history-item header > div { display: flex; min-width: 0; align-items: center; gap: 0.45rem; }
.hand-history-item h3 { margin: 0; font-size: 1rem; }
.hand-history-item p { margin: 0; color: var(--ink-muted); font-size: 0.84rem; }
.hand-event { flex: 0 0 auto; padding: 0.12rem 0.35rem; border-radius: 3px; background: var(--felt-soft); color: var(--felt-strong); font-size: 0.75rem; font-weight: 800; }
.hand-event--adjustment { background: var(--amber-soft); color: var(--amber); }
.hand-sync-chip { display: inline-flex; min-height: 1.5rem; flex: 0 0 auto; align-items: center; padding: 0.12rem 0.4rem; border: 1px solid #bc8618; border-radius: 4px; background: #fff9e9; color: #76540e; font-size: 0.68rem; font-weight: 800; letter-spacing: 0; }
.hand-sync-chip--held { border-color: rgba(179, 38, 30, 0.4); background: rgba(179, 38, 30, 0.08); color: #b3261e; }
.hand-settlement-mark { display: grid; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; border: 1px solid #bc8618; border-radius: 50%; place-items: center; background: #fff9e9; color: #76540e; font-size: 0.8rem; font-weight: 850; }
.hand-deltas { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid #e2e8e6; }
.hand-deltas > span { display: grid; min-width: 0; padding: 0.35rem 0.2rem; border-inline-end: 1px solid #e2e8e6; text-align: center; }
.hand-deltas > span:last-child { border-inline-end: 0; }
.hand-deltas small { color: var(--ink-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-deltas strong { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.hand-deltas em { color: var(--ink-muted); font-size: 0.75rem; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.35; }
.hand-history-item footer { display: flex; justify-content: space-between; color: var(--ink-muted); font-size: 0.75rem; }
.hand-history-system { display: grid; min-width: 0; padding: 0.6rem 0; border-bottom: 1px dashed var(--line); grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; color: var(--ink-muted); font-size: 0.8rem; }
.hand-history-system .lucide-icon { width: 1rem; height: 1rem; }
.hand-history-system--undo { color: #b3261e; }
.hand-history-system--undo .lucide-icon { color: #b3261e; }
.undo-reverted-chip { display: inline-flex; align-items: center; padding: 0.1rem 0.4rem; border: 1px solid rgba(179, 38, 30, 0.4); border-radius: 999px; background: rgba(179, 38, 30, 0.08); color: #b3261e; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; }
.hand-history-item--reverted article { opacity: 0.62; }
.hand-history-item--reverted article h3 { text-decoration: line-through; text-decoration-color: rgba(179, 38, 30, 0.6); }

.undo-review-dialog__body { display: grid; gap: 0.75rem; }
.undo-review-dialog__list { display: grid; width: 100%; gap: 0.4rem; margin: 0; padding: 0; border: 0; text-align: start; }
.undo-review-dialog__list legend { padding: 0 0 0.35rem; font-size: 0.75rem; color: var(--ink-muted); }
.undo-review-option { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); align-items: center; gap: 0.55rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 0.9rem; cursor: pointer; }
.undo-review-option.is-selected { border-color: var(--accent, #2f6b4f); background: rgba(47, 107, 79, 0.08); }
.undo-review-option span { display: grid; gap: 0.15rem; min-width: 0; }
.undo-review-option strong { font-size: 0.875rem; overflow-wrap: anywhere; }
.undo-review-option small { font-size: 0.6875rem; color: var(--ink-muted); }
.undo-result-list { display: grid; gap: 0.4rem; margin: 0.6rem 0 0.75rem; padding: 0; list-style: none; }
.undo-result-list li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; overflow-wrap: anywhere; }

.table-records-empty {
  display: grid;
  min-height: 12rem;
  padding: 2rem 1rem;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  border-block: 1px solid var(--line);
  color: var(--ink-muted);
  text-align: center;
}

.table-records-empty .lucide-icon {
  width: 2rem;
  height: 2rem;
  color: var(--felt-strong);
}

.table-records-empty strong { color: var(--ink); }
.table-records-empty span { max-width: 28rem; font-size: 0.89rem; }

.table-operation-history { border-top: 1px solid var(--line); }

.table-operation-history summary {
  display: flex;
  min-height: 2.75rem;
  padding: 0.6rem 0;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 750;
  list-style: none;
}

.table-operation-history summary::-webkit-details-marker { display: none; }
.table-operation-history summary .lucide-icon { width: 1rem; height: 1rem; }
.table-operation-history summary span { margin-inline-start: auto; }
.table-operation-history ol { margin: 0; padding: 0; list-style: none; }

.statistics-view {
  gap: 1.5rem;
}

.statistics-summary {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
  gap: 1px;
  background: var(--line);
}

.statistics-summary > div {
  display: grid;
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.55rem 0.25rem;
  align-content: center;
  justify-items: center;
  gap: 0.15rem;
  background: var(--surface);
  text-align: center;
}

.statistics-summary dt {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.statistics-summary dd {
  margin: 0;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.score-chart-section {
  display: grid;
  min-width: 0;
  gap: 0.75rem;
}

.score-chart__legend {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.4rem 0.75rem;
}

.score-chart__legend > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.score-chart__legend i {
  width: 0.75rem;
  height: 3px;
  flex: 0 0 auto;
  background: var(--series-color);
}

.score-chart__legend strong {
  margin-inline-start: auto;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.score-chart__name {
  min-width: 0;
}

.score-chart {
  position: relative;
  height: 15rem;
  min-height: 15rem;
  padding-inline-start: 2.75rem;
}

.score-chart__y-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 2.5rem;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.score-chart__plot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.score-chart__gridline {
  stroke: #dce2e0;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.score-chart__gridline--zero {
  stroke: #8c9c97;
}

.score-chart__line {
  fill: none;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.score-chart__endpoint {
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.player-stat-grid {
  display: grid;
  min-width: 0;
  gap: 0.75rem;
}

.player-stat-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--series-color);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.player-stat-card > header {
  display: flex;
  min-width: 0;
  min-height: 4rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 0.75rem;
}

.player-stat-card > header > div {
  min-width: 0;
  margin-inline-end: auto;
}

.player-stat-card h3,
.player-stat-card p {
  margin: 0;
}

.player-stat-card h3 {
  font-size: 1rem;
}

/* The name opens that player's 個人檔案. Keep it looking like the heading it is — the whole
   card is already colour-coded to the player — and only mark it as a target on hover/focus,
   so the Statistics page does not turn into a wall of links. */
.player-stat-card__profile {
  display: inline-flex;
  min-width: 0;
  border-radius: 6px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.player-stat-card__profile:hover,
.player-stat-card__profile:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.player-stat-card__profile:focus-visible {
  outline: 2px solid var(--focus, #14614a);
  outline-offset: 2px;
}

.player-stat-card p {
  margin-block-start: 0.15rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.player-stat-card > header > strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player-stat-card dl {
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 1px;
  background: var(--line);
}

.player-stat-card dl > div {
  display: grid;
  min-width: 0;
  min-height: 3.75rem;
  padding: 0.45rem 0.2rem;
  align-content: center;
  justify-items: center;
  gap: 0.1rem;
  background: var(--surface);
  text-align: center;
}

.player-stat-card dt {
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.player-stat-card dd {
  margin: 0;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.table-notice {
  padding: 0.75rem;
  border-inline-start: 4px solid var(--felt);
  background: var(--felt-soft);
}

.table-notice--conflict {
  border-inline-start-color: var(--red);
  background: var(--red-soft);
  color: #6e3632;
}

.table-notice--pending {
  border-inline-start-color: var(--amber);
  background: var(--amber-soft);
  color: #65490f;
}

.table-notice--delegated {
  border-inline-start-color: var(--blue);
  background: var(--blue-soft);
  color: #244b6e;
}

.table-notice h3,
.table-notice p {
  margin: 0;
}

.table-notice h3 {
  font-size: 1rem;
}

.table-notice p {
  margin-block-start: 0.25rem;
  font-size: 0.89rem;
}

@media (min-width: 48rem) {
  .page-content {
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
  }

  .table-stage {
    grid-template-areas:
      ". north ."
      "west center east"
      ". south .";
    grid-template-columns: minmax(11rem, 1fr) minmax(13rem, 1.2fr)
      minmax(11rem, 1fr);
    grid-template-rows: auto minmax(9rem, 1fr) auto;
    padding: 1rem;
    gap: 0.875rem;
  }

  .seat-card {
    min-height: 8.5rem;
  }

  .table-center {
    min-height: 9rem;
  }

  .conflict-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tab-panel {
    padding: 1.25rem 1.5rem;
  }

  .action-bar__inner {
    grid-template-columns: repeat(3, minmax(8rem, 1fr));
  }

  .fixture-state-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-layout {
    padding: 1.5rem;
  }

  .flow-choice-grid,
  .flow-invite-layout,
  .flow-home-invite {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-member-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .flow-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .table-utilities__row {
    padding-inline: 1.5rem;
  }

  .compact-secondary-view {
    padding: 1.5rem;
  }

  .score-chart__legend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .player-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .opponent-ledger-grid[data-opponent-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opponent-ledger__unsettled {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media (max-width: 27rem) {
  .app-header {
    position: static;
  }

  .app-header__inner {
    min-height: 64px;
    padding: 8px 12px;
    align-items: flex-start;
    gap: 8px;
  }

  .brand-mark {
    width: 40px;
    height: 48px;
    font-size: 1rem;
  }

  .header-title h1 {
    font-size: 1rem;
  }

  .app-header .icon-button {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 1rem;
  }

  .compact-table-header .app-header__inner {
    min-height: 64px;
    align-items: center;
  }

  .header-context,
  .table-code {
    display: none;
  }

  .page-content,
  .tab-panel {
    padding: 0.75rem;
  }

  .table-stage {
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .seat-card {
    min-height: 7.75rem;
    padding: 0.625rem;
  }

  .seat-card__balance {
    font-size: 1.25rem;
  }

  .seat-card__meta {
    display: none;
  }

  .history-deltas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-bar {
    position: static;
  }

  .action-button {
    font-size: 1.125rem;
  }

  .action-button__label {
    display: none;
  }

  .dialog__footer > .button {
    flex: 1 1 8rem;
  }

  .fixture-segment {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow-layout {
    padding: 0.75rem;
  }

  .flow-progress li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .flow-progress li > strong {
    width: 100%;
  }

  .flow-actions > .button,
  .flow-table-row > .button {
    width: 100%;
    flex: 1 1 100%;
  }

  .opponent-ledger {
    padding-inline: 0.5rem;
  }

  .table-entry-dialog {
    width: 100%;
    max-height: calc(100vh - 1rem);
    align-self: end;
  }

  .table-proposal-dialog--mandatory {
    min-height: min(19rem, calc(100dvh - 1rem));
    align-self: center;
  }
}

@media (max-width: 22rem) {
  .compact-table-header .prototype-mark,
  .compact-table-header .header-title p {
    display: none;
  }

  .compact-secondary-view {
    padding-inline: 0.25rem;
  }

  .opponent-ledger {
    padding-inline: 0.35rem;
  }

  .table-score-diamond {
    padding-inline: 0.35rem;
    gap: 0.25rem;
  }

  .table-score-diamond__player {
    padding-inline: 0.1rem;
  }

  .seat-manager__table {
    padding-inline: 0;
    grid-template-areas:
      "surface"
      "top"
      "right"
      "bottom"
      "left";
    grid-template-columns: minmax(0, 1fr);
  }

  .seat-manager__surface,
  .seat-manager__seat {
    min-height: 4rem;
  }

  .seat-manager__member {
    width: calc(100% - 2px);
    justify-self: center;
  }

  .settings-number-grid,
  .settings-inline-fields,
  .settlement-comparison,
  .table-waiting-seats {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-number-grid .field:last-child {
    grid-column: auto;
  }

  .settings-section > label {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-section > label select {
    width: 100%;
    min-width: 0;
  }

  .opponent-ledger__kick,
  .opponent-ledger__settle {
    font-size: 0.8rem;
  }
}

@media (forced-colors: active) {
  .seat-card--current,
  .seat-card--conflict,
  .conflict-panel,
  .review-item,
  .player-stat-card,
  .table-notice {
    border-width: 2px;
  }

  .status-pill::before,
  .audit-event__marker {
    border: 1px solid currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Claude Code's selected 阿糊 visual direction, applied to the tested local logic. */
:root {
  --canvas: #f5efe1;
  --surface: #fffdf7;
  --surface-subtle: #f4efe4;
  --surface-strong: #e4d9c0;
  --ink: #20301f;
  --ink-muted: #7d877f;
  --line: #ece3cf;
  --line-strong: #d8cdae;
  --felt: #2f7d5b;
  --felt-strong: #1f6b4c;
  --felt-soft: #e2f0e8;
  --blue: #287f78;
  --blue-soft: #e2f1ef;
  --amber: #9a6818;
  --amber-soft: #fbeed6;
  --red: #d1462f;
  --red-soft: #fdeee4;
  --violet: #6e5f91;
  --violet-soft: #f0ebf6;
  --shadow: 0 10px 24px -18px rgb(32 48 31 / 42%);
  --radius: 18px;
  --radius-small: 12px;
  font-family:
    "Noto Sans CJK HK", "Noto Sans HK", "PingFang HK", "Microsoft JhengHei",
    system-ui, sans-serif;
}

body {
  background:
    linear-gradient(180deg, #eee9dd 0, var(--canvas) 12rem, var(--canvas) 100%);
}

.app-header {
  border-bottom-color: var(--line);
  background: rgb(255 253 247 / 96%);
  box-shadow: 0 8px 24px -22px rgb(32 48 31 / 55%);
}

.brand-mark {
  border: 2px solid #eadfc4;
  border-bottom-width: 5px;
  border-radius: 14px;
  background: linear-gradient(#fffef9, #f4ecd9);
  color: #c8442f;
  box-shadow: 0 12px 22px -16px rgb(60 80 60 / 55%);
}

.compact-table-header .app-header__inner {
  min-height: 4.25rem;
  padding: 0.55rem 0.85rem;
}

.compact-table-header .header-title h1 {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 900;
}

.compact-table-header__back,
.compact-table-header .icon-button {
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.table-fixture-page {
  min-height: calc(100vh - 4.25rem);
  background: var(--canvas);
}

.table-command-bar {
  top: 4.25rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 0;
  background: rgb(245 239 225 / 96%);
}

.table-command-bar button {
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #ffffff;
  color: var(--ink-muted);
  box-shadow: var(--shadow);
}

.table-command-bar button:disabled {
  background: #f1eadb;
  box-shadow: none;
}

.table-command-bar .table-command-bar__settle {
  border-color: #ff8a5c;
  background: #ff8a5c;
  box-shadow: 0 12px 22px -14px rgb(255 138 92 / 82%);
}

.merged-table-switch {
  display: grid;
  width: calc(100% - 1.7rem);
  min-width: 0;
  min-height: 3.5rem;
  margin: 0.65rem 0.85rem 0;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid #9bbdad;
  border-radius: 8px;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto 1.25rem;
  align-items: center;
  gap: 0.6rem;
  background: #f2faf6;
  color: var(--ink);
  text-align: start;
}

.merged-table-switch:hover {
  border-color: var(--felt-strong);
  background: #e8f5ee;
}

.merged-table-switch__icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 8px;
  place-items: center;
  background: var(--felt-strong);
  color: #ffffff;
}

.merged-table-switch__copy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.merged-table-switch__copy small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 750;
}

.merged-table-switch__copy strong {
  overflow: hidden;
  font-size: 0.94rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merged-table-switch__action {
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

.merged-table-switch > .lucide-icon {
  width: 1rem;
  color: var(--felt-strong);
}

.merged-table-switch-dialog {
  width: min(calc(100% - 2rem), 28rem);
}

.merged-table-switch-list {
  display: grid;
  min-width: 0;
  gap: 0.55rem;
}

.merged-table-switch-list > button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 2.4rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
  color: var(--ink);
  text-align: start;
}

.merged-table-switch-list > button:not(:disabled):hover {
  border-color: var(--felt-strong);
  background: #f2faf6;
}

.merged-table-switch-list > button:disabled {
  border-color: #9bbdad;
  background: #e8f5ee;
  color: var(--felt-strong);
  opacity: 1;
}

.merged-table-switch-list > button > span:first-child {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  place-items: center;
  background: var(--surface-subtle);
  color: var(--felt-strong);
}

.merged-table-switch-list > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.merged-table-switch-list strong,
.merged-table-switch-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merged-table-switch-list strong {
  font-size: 0.94rem;
  font-weight: 900;
}

.merged-table-switch-list small {
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.merged-table-switch-list > button > .lucide-icon {
  width: 1rem;
  color: var(--felt-strong);
}

.table-utilities {
  margin: 0 0.85rem 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.table-utilities__row {
  padding: 0.4rem;
  gap: 0.25rem;
}

.table-utility {
  min-height: 3.75rem;
  border-radius: 13px;
  color: #6f7972;
}

.table-utility:hover,
.table-utility--active {
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.table-live-mode {
  margin: 0 auto 0.65rem;
  padding: 0.25rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #efe8d8;
}

.table-live-mode button {
  border-radius: 999px;
}

.table-live-mode button[aria-pressed="true"] {
  background: #ffffff;
  box-shadow: 0 5px 12px -8px rgb(32 48 31 / 55%);
}

.table-jackpot-status {
  display: flex;
  min-width: 0;
  margin: 0 0.85rem 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1.5px solid #d49a27;
  border-radius: 11px;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  background: #fff8df;
  color: #6d4b0b;
}

.table-jackpot-status > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.25rem auto;
  align-items: center;
  column-gap: 0.35rem;
}

.table-jackpot-status > span .lucide-icon { grid-row: 1 / 3; }
.table-jackpot-status small { font-size: 0.8rem; font-weight: 750; }
.table-jackpot-status strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.table-jackpot-status button { flex: none; }

.jackpot-pool-total {
  display: flex;
  min-height: 4rem;
  padding: 0.75rem;
  border: 1.5px solid #d49a27;
  border-radius: 8px;
  align-items: center;
  justify-content: space-between;
  background: #fff8df;
  color: #6d4b0b;
}

.jackpot-pool-total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.table-jackpot-dialog select { width: 100%; min-height: 2.75rem; }
.hand-deltas .hand-deltas__jackpot { border-color: #d49a27; background: #fff8df; }

.table-score-diamond {
  margin: 0 0.85rem 0.75rem;
  padding: 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  gap: 0.45rem;
  background: #f4efe4;
  box-shadow: 0 18px 34px -28px rgb(32 48 31 / 60%);
}

.table-score-diamond__surface {
  min-height: 7.25rem;
  border: 0;
  border-radius: 22px;
  background: var(--felt-strong);
  box-shadow: 0 14px 26px -16px rgb(31 107 76 / 85%);
}

.table-score-diamond__surface small {
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
}

.table-round-control {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 1.8rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  grid-template-columns: minmax(0, 1fr) 0.75rem;
  place-items: center;
  gap: 0.2rem;
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
}

.table-round-control:hover,
.table-round-control:focus-visible { background: rgb(255 255 255 / 22%); }
.table-round-control strong { font-size: 0.89rem; letter-spacing: 0; }
.table-round-control .lucide-icon { width: 0.75rem; height: 0.75rem; }

.table-ahu-status {
  display: flex;
  width: 100%;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.table-ahu-status .ahu-mascot { flex: 0 0 auto; }
.table-ahu-status .ahu-mascot > span { color: var(--felt-strong); }
.table-ahu-status > small {
  max-width: 3.8rem;
  margin: 0;
  padding: 0.18rem 0.3rem;
  border: 0;
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.25;
}

.table-ahu-status--sad > small { color: #a73e31; }
.table-ahu-status--happy > small { color: #7c5413; }

.table-round-choice {
  min-width: 0;
  padding: 0;
  border: 0;
}

.table-round-choice + .table-round-choice { margin-block-start: 0.8rem; }
.table-round-choice legend {
  margin-block-end: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.table-round-choice > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.table-round-choice label { min-width: 0; }
.table-round-choice input { position: absolute; opacity: 0; pointer-events: none; }
.table-round-choice span {
  display: grid;
  min-height: 2.65rem;
  padding: 0.35rem 0.2rem;
  border: 1.5px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 10px;
  place-items: center;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
}

.table-round-choice input:checked + span {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.table-round-choice input:focus-visible + span { outline: 3px solid rgb(40 127 120 / 30%); }

.table-identity-control select {
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
}

.table-score-diamond__surface .table-current-identity {
  color: var(--felt-strong);
}

.table-score-diamond__surface .table-current-identity span,
.table-score-diamond__surface .table-current-identity strong,
.table-score-diamond__surface .table-current-identity small {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.table-score-diamond__surface .table-current-identity small {
  font-size: 0.75rem;
  opacity: 0.72;
}

.table-score-diamond__surface .table-current-identity strong {
  font-size: clamp(0.5rem, 12cqi, 0.6875rem);
}

.table-score-diamond__player {
  min-height: 4.8rem;
  border: 1.5px solid var(--line);
  border-top-width: 4px;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 10px 18px -16px rgb(32 48 31 / 70%);
}

.table-score-diamond__player--top { border-top-color: #2c9c86; }
.table-score-diamond__player--left { border-top-color: #ff8a5c; }
.table-score-diamond__player--right { border-top-color: #e0a53a; }
.table-score-diamond__player--bottom { border-top-color: #2f7d5b; }

.table-score-diamond__player:hover {
  border-color: #2f7d5b;
  background: #fffef9;
  transform: translateY(-1px);
}

.table-score-diamond__player--current {
  border-color: #f6b23c;
  box-shadow: 0 0 0 3px rgb(246 178 60 / 26%);
}

.table-score-diamond__dealer {
  border-radius: 999px;
  background: #f6b23c;
  color: #674709;
}

.table-entry {
  margin: 0 0.85rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.table-entry__heading {
  display: flex;
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #f1ead9;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fffdf8;
}

.table-entry__heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.6rem;
}

.table-entry__heading h2,
.table-entry__heading p {
  margin: 0;
}

.table-entry__heading h2 {
  font-size: 1rem;
  font-weight: 900;
}

.table-entry__heading p,
.table-entry__heading > span {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.table-entry__tile {
  display: grid;
  width: 2.1rem;
  height: 2.5rem;
  border: 1.5px solid #eadfc4;
  border-bottom-width: 4px;
  border-radius: 9px;
  place-items: center;
  background: linear-gradient(#fffef9, #f4ecd9);
  color: #c8442f;
  font-family: serif;
  font-weight: 900;
}

.opponent-ledger-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #ffffff;
}

.opponent-ledger {
  padding: 0.85rem 0.45rem 1.1rem;
  border-inline-end-color: #f1ead9;
}

.opponent-ledger__header p {
  color: #8a9184;
  font-weight: 700;
}

.opponent-ledger__header h2 {
  font-weight: 900;
}

.opponent-ledger__unsettled {
  color: var(--felt-strong);
  font-weight: 800;
}

.opponent-ledger__unsettled b {
  background: #ff8a5c;
}

.opponent-ledger__actions {
  gap: 0.35rem;
}

.opponent-ledger__kick,
.opponent-ledger__settle {
  min-height: 2.75rem;
  border-radius: 12px;
}

.opponent-ledger__kick {
  border: 1.5px solid var(--line);
  background: #ffffff;
  color: var(--felt-strong);
}

.opponent-ledger__kick:hover,
.opponent-ledger__kick--active {
  border-color: #ff8a5c;
  background: #fdeee4;
  color: #c8442f;
}

.opponent-ledger__settle {
  background: var(--felt-strong);
  color: #ffffff;
}

.opponent-ledger__settle--matched:hover { background: #175a40; }
.opponent-ledger__settle--pending { background: #e0a53a; color: #3f2c08; }

.opponent-ledger__records {
  margin-top: 0.75rem;
  padding-inline: 0.25rem;
}

.opponent-ledger__records li {
  border-bottom-color: #f1ead9;
}

.opponent-ledger__record-value {
  color: #34423a;
}

.opponent-ledger__empty {
  color: #d8cdae;
}

.table-primary-tabs {
  padding: 0.35rem 0.55rem calc(0.35rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgb(255 253 247 / 98%);
  box-shadow: 0 -10px 26px -22px rgb(32 48 31 / 60%);
}

.table-primary-tabs button,
.table-primary-tabs__profile {
  min-height: 3.35rem;
  border-radius: 13px;
}

.table-primary-tabs button[aria-selected="true"] {
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.modal-backdrop {
  background: rgb(30 40 32 / 46%);
  backdrop-filter: blur(3px);
}

.dialog {
  border: 1.5px solid var(--line);
  border-radius: 24px;
  background: var(--canvas);
  box-shadow: 0 28px 60px -26px rgb(16 15 12 / 75%);
}

.dialog__header,
.dialog__footer {
  border-color: var(--line);
  background: #fffdf8;
}

.dialog__header {
  border-radius: 24px 24px 0 0;
}

.dialog__title {
  font-weight: 900;
}

.dialog__body {
  background: var(--canvas);
}

.share-preview-dialog__body {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: rgb(32 48 31 / 4%);
}

.share-preview-dialog__image {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1080 / 1350;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -14px rgb(32 48 31 / 45%);
  background: #f7f2e5;
  object-fit: contain;
}

.entry-kind-segment {
  padding: 0.3rem;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #efe8d8;
}

.entry-kind-segment button {
  min-height: 2.85rem;
  border-radius: 12px;
}

.entry-kind-segment button.is-selected {
  background: var(--felt-strong);
  color: #ffffff;
  box-shadow: 0 8px 16px -12px rgb(31 107 76 / 85%);
}

.entry-participant,
.table-choice-list label,
.table-setting-list label {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.entry-participant--selected {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.field input,
.field select,
.field textarea {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

/* iOS Safari zooms the page when a focused text control computes below 16px.
   Entry sheets are used one-handed and must keep their current scale after the keyboard opens. */
.table-entry-dialog .field input,
.table-entry-dialog .field select,
.table-entry-dialog .field textarea,
.table-entry-dialog .self-draw-payer-fan input {
  font-size: 1rem;
}

.entry-fan-field input {
  min-height: 4rem;
  color: var(--felt-strong);
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
}

.guided-score-preview-list {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.guided-score-preview {
  background: #ffffff;
}

.guided-score-preview strong {
  color: var(--felt-strong);
}

.button {
  border-radius: 14px;
}

.button--primary {
  border-color: var(--felt-strong);
  background: var(--felt-strong);
  box-shadow: 0 10px 20px -15px rgb(31 107 76 / 90%);
}

.button--danger {
  border-color: #ff8a5c;
  background: #ff8a5c;
}

.compact-secondary-view {
  margin: 0 0.85rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.statistics-summary,
.player-stat-card,
.hand-history-item__round-bar {
  border-color: var(--line);
  border-radius: 14px;
}

.hand-history-item__round-bar {
  border-inline-start-color: var(--felt-strong);
  background: var(--felt-soft);
}

.table-records-view {
  /* max-width, not width: the narrow-screen rules below still set a side margin,
     and a fixed 100% width would push that margin off-screen. */
  max-width: 62rem;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table-records-view .hand-history-list { gap: 0.75rem; }

.table-records-view .hand-history-item {
  grid-template-columns: minmax(6rem, 7.5rem) minmax(0, 1fr);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  gap: 0;
  background: #ffffff;
}

.table-records-view .hand-history-item__round-bar {
  min-height: 100%;
  padding: 0.75rem;
  border: 0;
  border-inline-start: 4px solid var(--felt-strong);
  border-radius: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.table-records-view .hand-history-item article {
  padding: 0.75rem;
  gap: 0.55rem;
}

.table-records-view .hand-deltas {
  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.table-records-view .hand-deltas > span { padding: 0.45rem 0.35rem; }
.table-records-view .hand-deltas small { font-size: 0.8rem; }
.table-records-view .hand-deltas strong { font-size: 0.94rem; }
.table-records-view .hand-deltas em { font-size: 0.8rem; overflow-wrap: anywhere; }

.table-chat-view {
  /* Reserves the app header, command bar, sync banner and the fixed bottom tab
     bar, so the composer is never covered by .table-primary-tabs. The old 15.5rem
     cleared the tabs by exactly 1px, so the larger type immediately pushed the
     composer underneath them; this leaves real slack. Verified against the online
     smoke's 500x844, 500x740 and 500x668 viewports. */
  display: grid;
  width: min(100%, 48rem);
  height: calc(100dvh - var(--table-chat-chrome, 17rem));
  min-height: 22rem;
  max-height: 48rem;
  margin-inline: auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: #f6f8f7;
}

.table-chat-heading {
  display: flex;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
}

.table-chat-heading > div { display: flex; min-width: 0; align-items: center; gap: 0.65rem; }
.table-chat-heading h2 { margin: 0; font-size: 1rem; }

.table-chat-connection {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
}

.table-chat-connection i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #b8c2be;
}

.table-chat-connection--connected i { background: #218258; }
.table-chat-connection--offline i { background: #c75142; }

.table-chat-load {
  display: inline-flex;
  min-height: 2rem;
  padding: 0.3rem 0.45rem;
  border: 0;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  color: var(--felt-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

.table-chat-load .lucide-icon { width: 0.9rem; height: 0.9rem; }

.table-chat-log {
  display: flex;
  min-height: 0;
  padding: 0.9rem 0.75rem;
  overflow-y: auto;
  flex-direction: column;
  gap: 0.7rem;
  overscroll-behavior: contain;
}

.table-chat-state {
  margin: auto;
  color: var(--ink-muted);
  font-size: 0.89rem;
}

.table-chat-message {
  display: grid;
  min-width: 0;
  max-width: min(88%, 32rem);
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: end;
  gap: 0.45rem;
  align-self: flex-start;
}

.table-chat-message--mine {
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-self: flex-end;
}

.table-chat-message--mine .table-chat-avatar { grid-column: 2; }
.table-chat-message--mine > div { grid-column: 1; grid-row: 1; background: #dff2e8; }

.table-chat-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.84rem;
}

.table-chat-message > div {
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid #dce4e0;
  border-radius: 8px;
  background: #fff;
}

.table-chat-message header { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.table-chat-message header strong { overflow: hidden; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.table-chat-message time { flex: 0 0 auto; color: var(--ink-muted); font-size: 0.75rem; }
.table-chat-message p { margin: 0.2rem 0 0; font-size: 0.94rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }

.table-chat-error {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border-top: 1px solid #efc8c2;
  background: #fff1ef;
  color: #8c3026;
  font-size: 0.84rem;
}

.table-chat-composer {
  display: grid;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto 2.6rem;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
}

.table-chat-composer input {
  width: 100%;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 0.94rem;
}

.table-chat-composer > span { color: var(--ink-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.table-chat-composer button { display: grid; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 6px; place-items: center; background: var(--felt-strong); color: #fff; }
.table-chat-composer button:disabled { opacity: 0.45; }

.table-chat-unread {
  display: inline-grid;
  min-width: 1rem;
  height: 1rem;
  margin-inline-start: 0.2rem;
  padding-inline: 0.2rem;
  border-radius: 999px;
  place-items: center;
  background: #b83c32;
  color: #fff;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.table-waiting-chat {
  display: inline-flex;
  min-height: 2.25rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  align-items: center;
  gap: 0.3rem;
  background: #fff;
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 800;
}

.table-waiting-chat .lucide-icon { width: 1rem; height: 1rem; }
.table-waiting-chat b { display: inline-grid; min-width: 1rem; height: 1rem; border-radius: 50%; place-items: center; background: #b83c32; color: #fff; font-size: 0.75rem; }

@media (max-width: 40rem) {
  .table-command-bar {
    position: static;
  }

  .table-score-diamond {
    grid-template-rows: minmax(4.5rem, auto) minmax(6.5rem, auto) minmax(4.5rem, auto);
  }

  .table-entry__heading > span {
    display: none;
  }

  .table-entry-dialog,
  .final-settlement-dialog {
    width: 100%;
    max-height: calc(100dvh - 1rem);
    border-radius: 26px 26px 0 0;
    align-self: end;
  }

  .table-entry-dialog .dialog__header,
  .final-settlement-dialog .dialog__header {
    border-radius: 26px 26px 0 0;
  }

  .table-records-view .hand-history-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .table-records-view .hand-history-item__round-bar {
    min-height: 2.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 23rem) {
  .table-utilities,
  .table-score-diamond,
  .table-entry,
  .compact-secondary-view {
    margin-inline: 0.45rem;
  }

  .opponent-ledger {
    padding-inline: 0.25rem;
  }

  .opponent-ledger__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 阿糊 application shell. Social/profile screens are local visual fixtures. */
.ahu-app {
  min-height: 100dvh;
  background: var(--canvas);
}

.flow-layout.ahu-flow-shell {
  display: block;
  width: min(100%, 56rem);
  min-height: 100dvh;
  margin-inline: auto;
  padding: 0;
}

.ahu-active-table-notice {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-bottom: 1px solid #b7c9bd;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 0.55rem;
  background: #eaf4ed;
  color: #173d2e;
  text-decoration: none;
  box-shadow: 0 2px 8px rgb(19 39 33 / 10%);
}

.ahu-active-table-notice span {
  display: grid;
  min-width: 0;
  gap: 0.05rem;
}

.ahu-active-table-notice small,
.ahu-active-table-notice strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-active-table-notice small { font-size: 0.72rem; }
.ahu-active-table-notice strong { font-size: 0.88rem; }
.ahu-active-table-notice .lucide-icon { width: 1.1rem; height: 1.1rem; }
.ahu-flow-shell.has-active-table .ahu-topbar { top: 3.5rem; }

.ahu-flow-shell[data-flow-screen="login"],
.ahu-flow-shell[data-flow-screen="username"],
.ahu-flow-shell[data-flow-screen="choice"],
.ahu-flow-shell[data-flow-screen="create"],
.ahu-flow-shell[data-flow-screen="join"],
.ahu-flow-shell[data-flow-screen="invite"],
.ahu-flow-shell[data-flow-screen="preview"],
.ahu-flow-shell[data-flow-screen="returning"] {
  width: min(100%, 34rem);
}

.ahu-screen {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  padding: 1rem 1rem 6.25rem;
  align-content: start;
  gap: 1.15rem;
  background: var(--canvas);
}

.ahu-screen button,
.ahu-screen a,
.ahu-screen input {
  font: inherit;
}

.ahu-screen h1,
.ahu-screen h2,
.ahu-screen h3,
.ahu-screen p {
  letter-spacing: 0;
}

.ahu-kicker {
  margin: 0;
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ahu-mascot {
  position: relative;
  display: grid;
  width: 6.4rem;
  height: 7.65rem;
  border: 2px solid #e5dac1;
  border-bottom-width: 8px;
  border-radius: 20px;
  place-items: center;
  background: #fffef9;
  box-shadow: 0 18px 28px -22px rgb(32 48 31 / 64%);
  color: var(--felt-strong);
  font-family: "Noto Serif CJK HK", "Songti HK", serif;
  font-size: 3.35rem;
  font-weight: 900;
  line-height: 1;
  animation: ahu-mascot-bob 3.4s ease-in-out infinite;
}

.ahu-mascot > span {
  transform: translateY(-0.15rem);
}

.ahu-mascot__eye,
.ahu-mascot__mouth {
  position: absolute;
  display: block;
  background: var(--ink);
}

.ahu-mascot__eye {
  top: 4.85rem;
  width: 0.28rem;
  height: 0.38rem;
  border-radius: 999px;
}

.ahu-mascot__eye--left { left: 2.35rem; }
.ahu-mascot__eye--right { right: 2.35rem; }

/* Rosy cheeks: the cheapest way to read "cute" at any size. */
.ahu-mascot__cheek {
  position: absolute;
  top: 5.25rem;
  display: block;
  width: 0.85rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #f2937a;
  opacity: 55%;
}

.ahu-mascot__cheek--left { left: 1rem; }
.ahu-mascot__cheek--right { right: 1rem; }

.ahu-mascot--compact .ahu-mascot__cheek {
  top: 2.05rem;
  width: 0.38rem;
  height: 0.22rem;
}

.ahu-mascot--compact .ahu-mascot__cheek--left { left: 0.32rem; }
.ahu-mascot--compact .ahu-mascot__cheek--right { right: 0.32rem; }

.ahu-mascot__mouth {
  bottom: 0.75rem;
  left: 50%;
  width: 0.9rem;
  height: 0.42rem;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.ahu-mascot--compact {
  width: 2.65rem;
  height: 3.1rem;
  border-bottom-width: 4px;
  border-radius: 10px;
  font-size: 1.45rem;
  animation: none;
}

.ahu-mascot--compact .ahu-mascot__eye {
  top: 1.9rem;
  width: 0.12rem;
  height: 0.16rem;
}

.ahu-mascot--compact .ahu-mascot__eye--left { left: 0.92rem; }
.ahu-mascot--compact .ahu-mascot__eye--right { right: 0.92rem; }

.ahu-mascot--compact .ahu-mascot__mouth {
  bottom: 0.28rem;
  width: 0.42rem;
  height: 0.18rem;
}

@keyframes ahu-mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-0.35rem) rotate(1deg); }
}

.ahu-mascot__tear,
.ahu-mascot__spark {
  position: absolute;
  display: block;
}

.ahu-mascot--sad .ahu-mascot__eye {
  height: 0.18rem;
  border-radius: 999px;
  transform: rotate(12deg);
}

.ahu-mascot--sad .ahu-mascot__eye--right { transform: rotate(-12deg); }
.ahu-mascot--sad .ahu-mascot__mouth {
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%) rotate(180deg);
}

.ahu-mascot__tear {
  bottom: 0.37rem;
  width: 0.12rem;
  height: 0.28rem;
  border-radius: 999px 999px 60% 60%;
  background: #4ea7cf;
}

.ahu-mascot__tear--left { left: 0.75rem; }
.ahu-mascot__tear--right { right: 0.75rem; }

.ahu-mascot--happy {
  border-color: #f2c35f;
  animation: ahu-mascot-dance 0.72s ease-in-out infinite;
}

.ahu-mascot--happy .ahu-mascot__eye {
  height: 0.12rem;
  border-radius: 999px;
  transform: rotate(18deg);
}

.ahu-mascot--happy .ahu-mascot__eye--right { transform: rotate(-18deg); }
.ahu-mascot__spark {
  top: 0.25rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 2px;
  background: #f6b23c;
  transform: rotate(45deg);
}

.ahu-mascot__spark--left { left: -0.24rem; }
.ahu-mascot__spark--right { right: -0.24rem; background: #ff8a5c; }

@keyframes ahu-mascot-dance {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-0.3rem) rotate(4deg); }
}

.ahu-draft-badge {
  display: inline-flex;
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid #dfd2b8;
  border-radius: 999px;
  align-items: center;
  background: #fffaf0;
  color: #846f46;
  font-size: 0.8rem;
  font-weight: 850;
  white-space: nowrap;
}

.ahu-prototype-note {
  margin: 0;
  color: #8a9184;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

.ahu-text-button {
  width: fit-content;
  min-height: 2.75rem;
  margin-inline: auto;
  padding: 0.45rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--felt-strong);
  font-size: 0.89rem;
  font-weight: 850;
}

.ahu-login {
  min-height: 100dvh;
  padding: clamp(2rem, 7vh, 4.5rem) 1.25rem 1.5rem;
  align-content: center;
}

.ahu-login__brand {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  text-align: center;
}

.ahu-login__brand .ahu-mascot {
  margin-block-end: 0.9rem;
}

.ahu-login__brand h1 {
  margin: 0;
  color: var(--ink);
  font-size: 2.25rem;
  font-weight: 950;
  line-height: 1.08;
}

.ahu-login__brand > p:last-child {
  margin: 0.1rem 0 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.ahu-auth-actions {
  display: grid;
  margin-block-start: 1.4rem;
  gap: 0.65rem;
}

.ahu-auth-button {
  display: grid;
  width: 100%;
  min-height: 3.45rem;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 10px 20px -18px rgb(32 48 31 / 55%);
  color: var(--ink);
}

.ahu-auth-button::after {
  content: "";
}

.ahu-auth-button:hover {
  border-color: #b9cbbf;
  background: #fffef9;
}

.ahu-auth-button--guest {
  border-color: var(--felt-strong);
  background: var(--felt-strong);
  color: #ffffff;
}

.ahu-auth-button--guest:hover {
  border-color: #185b40;
  background: #185b40;
}

.ahu-auth-button .lucide-icon {
  width: 1.25rem;
  height: 1.25rem;
  justify-self: center;
}

.ahu-auth-button strong {
  min-width: 0;
  font-size: 0.94rem;
}

.ahu-auth-button__copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.ahu-auth-button__copy small {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.2;
}

.ahu-auth-button--guest .ahu-auth-button__copy small {
  color: rgb(255 255 255 / 82%);
}

.ahu-auth-mark {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  place-items: center;
  justify-self: center;
  background: #ffffff;
  color: #4285f4;
  font-weight: 900;
}

.ahu-auth-mark--tile {
  border-radius: 7px;
  color: #c8442f;
  font-family: serif;
}

.ahu-onboarding {
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: 1rem 1.15rem 2rem;
  align-content: start;
}

.ahu-onboarding__back {
  justify-self: start;
}

.ahu-onboarding__brand {
  display: grid;
  margin-block-start: clamp(0.5rem, 5vh, 2.5rem);
  justify-items: center;
  gap: 0.35rem;
}

.ahu-onboarding__brand h1 {
  margin: 0;
  font-size: 1.5rem;
}

.ahu-onboarding .flow-screen__heading {
  padding: 0;
  border: 0;
  text-align: center;
}

.ahu-onboarding .flow-screen__heading h2 {
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 950;
}

.ahu-onboarding .flow-screen__heading > p:last-child {
  font-size: 0.89rem;
}

.ahu-onboarding .flow-eyebrow {
  color: #d75c3f;
}

.ahu-onboarding .flow-form,
.ahu-onboarding .flow-qr-simulation {
  padding: 1rem;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: var(--shadow);
}

.ahu-onboarding .field input,
.ahu-onboarding .field select {
  min-height: 3.25rem;
  border-radius: 12px;
}

.ahu-onboarding .flow-actions,
.ahu-onboarding .flow-actions .button {
  width: 100%;
}

.ahu-onboarding .flow-actions .button {
  min-height: 3.2rem;
}

.ahu-topbar {
  position: sticky;
  z-index: 8;
  top: 0;
  display: grid;
  min-width: 0;
  min-height: 4rem;
  margin: -1rem -1rem 0;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgb(236 227 207 / 82%);
  grid-template-columns: 2.75rem minmax(0, 1fr) minmax(2.75rem, max-content);
  align-items: center;
  gap: 0.65rem;
  background: rgb(245 239 225 / 96%);
  backdrop-filter: blur(12px);
}

.flow-member-list li { position: relative; }

.flow-member-list .flow-member-list__remove {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  z-index: 2;
  width: 1.8rem;
  min-height: 1.8rem;
  padding: 0.3rem;
  border: 1px solid #d9b5b0;
  background: #fff;
  box-shadow: 0 2px 6px rgb(80 30 25 / 14%);
}

.ahu-topbar__mascot {
  display: grid;
  place-items: center;
}

.ahu-topbar__title {
  display: grid;
  min-width: 0;
  justify-items: center;
  line-height: 1.15;
}

.ahu-topbar__title strong,
.ahu-topbar__title small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-topbar__title strong {
  font-size: 1rem;
  font-weight: 950;
}

.ahu-topbar__title small {
  margin-block-start: 0.18rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.ahu-icon-button {
  display: inline-grid;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  place-items: center;
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.ahu-icon-button .lucide-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.ahu-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ahu-icon-button--danger {
  border-color: #e4b5ad;
  background: #fff7f5;
  color: #a9362a;
  box-shadow: none;
}

.ahu-icon-button--danger:hover {
  border-color: #c96558;
  background: #fff0ed;
}

.ahu-topbar__spacer {
  width: 2.65rem;
}

.ahu-choice-screen .ahu-topbar {
  margin-block-end: 0.35rem;
}

.ahu-choice-screen .flow-choice-grid {
  gap: 0.75rem;
}

.ahu-choice-screen .flow-choice {
  display: grid;
  min-height: 6.25rem;
  padding: 0.95rem;
  border: 1.5px solid var(--line);
  border-inline-start: 0;
  border-radius: 16px;
  grid-template-columns: 2.8rem minmax(0, 1fr) 1.25rem;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.75rem;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.ahu-choice-screen .flow-choice:hover {
  border-color: #a4c3b2;
  background: #fffef9;
}

.ahu-choice-screen .flow-choice__icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  grid-row: 1 / 3;
  place-items: center;
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.ahu-choice-screen .flow-choice__icon--coral {
  background: var(--red-soft);
  color: #c8442f;
}

.ahu-choice-screen .flow-choice > strong {
  align-self: end;
  font-size: 1rem;
}

.ahu-choice-screen .flow-choice > span:not(.flow-choice__icon) {
  align-self: start;
  font-size: 0.84rem;
}

.ahu-choice-screen .flow-choice > .lucide-icon {
  width: 1.05rem;
  grid-column: 3;
  grid-row: 1 / 3;
  color: #9aa197;
}

.ahu-welcome-row {
  display: grid;
  min-width: 0;
  padding: 1.1rem 0 0.4rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
}

.ahu-welcome-row p,
.ahu-welcome-row h1 {
  margin: 0;
}

.ahu-welcome-row p {
  color: var(--ink-muted);
  font-size: 0.89rem;
}

.ahu-welcome-row h1 {
  margin-block-start: 0.15rem;
  font-size: 1.55rem;
  font-weight: 950;
}

.ahu-returning {
  padding: 1.15rem 1.1rem 2rem;
}

.table-intro-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100dvh;
  background: var(--canvas);
}

.table-intro-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--canvas);
}

.ahu-returning-actions {
  display: grid;
  gap: 0.65rem;
}

.ahu-returning-action {
  display: grid;
  width: 100%;
  min-height: 4.35rem;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 15px;
  grid-template-columns: 2.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: start;
  text-decoration: none;
}

.ahu-returning-action:hover {
  border-color: #aac5b5;
  background: #fffef9;
}

.ahu-returning-action--primary {
  min-height: 6rem;
  border-color: var(--felt-strong);
  background: var(--felt-strong);
  color: #ffffff;
  box-shadow: 0 16px 26px -20px rgb(31 107 76 / 85%);
}

.ahu-returning-action--primary:hover {
  border-color: #185b40;
  background: #185b40;
}

.ahu-returning-action--logout {
  color: #bd4f3a;
}

.ahu-returning-action > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.ahu-returning-action strong,
.ahu-returning-action small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-returning-action strong { font-size: 0.94rem; }
.ahu-returning-action small { color: var(--ink-muted); font-size: 0.84rem; }
.ahu-returning-action--primary small { color: rgb(255 255 255 / 72%); }

.ahu-list-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 11px;
  place-items: center;
  background: var(--surface-subtle);
  color: var(--felt-strong);
}

.ahu-returning-action--primary .ahu-list-icon {
  background: rgb(255 255 255 / 14%);
  color: #ffffff;
}

.ahu-list-icon .lucide-icon,
.ahu-returning-action > .lucide-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.ahu-live-dot {
  display: inline-flex;
  min-height: 1.55rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  align-items: center;
  background: #f6b23c;
  color: #4d370c;
  font-size: 0.75rem;
  white-space: nowrap;
}

.ahu-app-page {
  padding-top: 1rem;
}

.ahu-page-heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.ahu-page-heading p,
.ahu-page-heading h1 {
  margin: 0;
}

.ahu-page-heading p {
  margin-block-end: 0.2rem;
  color: var(--felt-strong);
  font-size: 0.84rem;
  font-weight: 850;
}

.ahu-page-heading h1 {
  font-size: 1.25rem;
  font-weight: 950;
}

.ahu-search-field {
  display: grid;
  min-width: 0;
  height: 3rem;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: center;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.ahu-search-field .lucide-icon {
  width: 1rem;
  justify-self: center;
  color: #8a9184;
}

.ahu-search-field input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 0.75rem 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  /* 1rem, not 0.89rem: iOS Safari zooms the page to fit any focused field under 16px.
     See Touch in DESIGN.md. */
  font-size: 1rem;
}

.ahu-user-search {
  display: grid;
  min-width: 0;
  padding-block-end: 0.2rem;
  gap: 0.45rem;
}

.ahu-user-search .ahu-section-heading h2 {
  font-size: 0.94rem;
}

.ahu-user-search__form {
  min-width: 0;
}

.ahu-search-field--action {
  grid-template-columns: 2.65rem minmax(0, 1fr) 3rem;
}

.ahu-search-field--action input {
  padding-inline-end: 0.35rem;
}

.ahu-search-field--action button {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--line);
  place-items: center;
  background: transparent;
  color: var(--felt-strong);
}

.ahu-search-field--action button .lucide-icon {
  color: currentColor;
}

.ahu-search-field--action button:disabled {
  opacity: 0.45;
}

.ahu-user-search__status {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.ahu-user-search__status--error {
  color: var(--red);
}

.ahu-user-search-result {
  outline: 0;
}

.ahu-user-search-result:focus-visible {
  box-shadow: 0 0 0 3px rgb(47 125 91 / 22%);
}

.ahu-community-list,
.ahu-friend-list,
.ahu-opponent-list,
.ahu-merge-list {
  display: grid;
  align-items: start;
  gap: 0.65rem;
}

.ahu-community-card,
.ahu-friend-row,
.ahu-opponent-list button,
.ahu-wide-link {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.7rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: start;
}

.ahu-community-card {
  grid-template-columns: 2.85rem minmax(0, 1fr) 1rem;
}

.ahu-community-card:hover,
.ahu-friend-row:hover,
.ahu-opponent-list button:hover,
.ahu-wide-link:hover {
  border-color: #acc8b8;
  background: #fffef9;
}

.ahu-community-mark {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  place-items: center;
  background: var(--felt-strong);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 950;
}

.ahu-community-card:nth-child(2) .ahu-community-mark {
  background: #ff8a5c;
}

.ahu-community-card:nth-child(3) .ahu-community-mark {
  background: #2c9c86;
}

.ahu-community-card__body,
.ahu-community-card__body > span {
  display: flex;
  min-width: 0;
}

.ahu-community-card__body {
  flex-direction: column;
  gap: 0.2rem;
}

.ahu-community-card__body > span {
  align-items: center;
  gap: 0.4rem;
}

.ahu-community-card__body strong,
.ahu-community-card__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-community-card__body strong { font-size: 0.94rem; }
.ahu-community-card__body small { color: var(--ink-muted); font-size: 0.8rem; }

.ahu-community-card__body b {
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: var(--amber-soft);
  color: #8b621c;
  font-size: 0.75rem;
}

.community-variant-heading {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.community-variant-badge {
  flex: 0 0 auto;
  padding: 0.14rem 0.38rem;
  border: 1px solid #b7c9bd;
  border-radius: 999px;
  background: #eef6f0;
  color: var(--felt-strong);
  font-size: 0.75rem;
  font-weight: 750;
}

.cantonese-settlement-panel {
  display: grid;
  padding: 0.85rem;
  border-block: 1px solid var(--line);
  gap: 0.7rem;
  background: #fffef9;
}

.cantonese-settlement-panel > header,
.cantonese-pending-list article,
.cantonese-debt-list p,
.final-rake-pool {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.cantonese-settlement-panel h2,
.cantonese-settlement-panel p,
.cantonese-pending-list article,
.final-rake-pool {
  margin: 0;
}

.cantonese-settlement-panel header p,
.cantonese-pending-list small {
  display: block;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.cantonese-pending-list,
.cantonese-debt-list {
  display: grid;
  gap: 0.5rem;
}

.cantonese-pending-list article,
.cantonese-debt-list p,
.final-rake-pool {
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.cantonese-pending-list article > div {
  min-width: 0;
}

.cantonese-pending-list strong,
.cantonese-pending-list small {
  overflow-wrap: anywhere;
}

.cantonese-debt-list p span {
  color: var(--ink-muted);
  text-align: center;
}

.final-rake-pool {
  margin-block-start: 0.65rem;
  color: var(--felt-strong);
}

.ahu-community-card > .lucide-icon,
.ahu-friend-row > .lucide-icon,
.ahu-opponent-list button > .lucide-icon,
.ahu-wide-link > .lucide-icon:last-child {
  width: 1rem;
  color: #9da49b;
}

.ahu-split-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.ahu-split-actions .button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.ahu-split-actions .lucide-icon,
.ahu-full-button .lucide-icon,
.ahu-profile-hero .button .lucide-icon {
  width: 1rem;
  height: 1rem;
}

.ahu-bottom-nav {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 50%;
  display: grid;
  width: min(100%, 56rem);
  min-height: 4.6rem;
  padding: 0.35rem max(0.45rem, env(safe-area-inset-right)) calc(0.35rem + env(safe-area-inset-bottom)) max(0.45rem, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgb(255 253 247 / 98%);
  box-shadow: 0 -12px 28px -24px rgb(32 48 31 / 70%);
  transform: translateX(-50%);
}

.ahu-bottom-nav button {
  display: grid;
  min-width: 0;
  min-height: 3.65rem;
  padding: 0.3rem;
  border: 0;
  border-radius: 12px;
  place-items: center;
  align-content: center;
  gap: 0.2rem;
  background: transparent;
  color: #8a9184;
}

.ahu-bottom-nav button[aria-current="page"] {
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.ahu-bottom-nav .lucide-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.ahu-bottom-nav span {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-avatar {
  display: inline-grid;
  width: 2.65rem;
  height: 2.65rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  place-items: center;
  flex: 0 0 auto;
  background: #2f7d5b;
  box-shadow: 0 0 0 1px var(--line);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 950;
}

.ahu-avatar--b { background: #ff8a5c; }
.ahu-avatar--c { background: #2c9c86; }
.ahu-avatar--d { background: #e0a53a; color: #3c2a08; }
.ahu-avatar--e { background: #6e5f91; }
.ahu-avatar--f { background: #557060; }

.ahu-avatar--photo { background: var(--surface-subtle); padding: 0; overflow: hidden; }
.ahu-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ahu-avatar-edit {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.ahu-avatar-edit__trigger {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #2f7d5b;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.ahu-avatar-edit__trigger svg { width: 0.85rem; height: 0.85rem; }

.ahu-friend-row {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.ahu-friend-row__profile,
.ahu-friend-row__table {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 0.75rem;
  border: 0;
  grid-template-columns: 2.8rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  color: var(--ink);
  text-align: start;
}

.ahu-friend-row__profile > span:nth-child(2),
.ahu-friend-row__table > span {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.ahu-friend-row__table {
  border-top: 1px solid var(--line);
  grid-template-columns: 1.8rem minmax(0, 1fr) 1rem;
  background: #f7fbf7;
}

.ahu-friend-row__table > .lucide-icon:first-child {
  width: 1rem;
  justify-self: center;
  color: var(--felt);
}

.ahu-friend-row__profile > .lucide-icon:last-child,
.ahu-friend-row__table > .lucide-icon:last-child {
  width: 1rem;
  color: #9da49b;
}

.table-friend-spectator-status {
  margin: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid #b7d2c0;
  border-radius: 6px;
  background: #eef8f0;
  color: #246443;
  font-size: 0.84rem;
  font-weight: 850;
  text-align: center;
}

.is-friend-spectator button:disabled {
  cursor: default;
  opacity: 0.58;
}

.ahu-friend-row > span:nth-child(2),
.ahu-opponent-list button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.ahu-friend-row strong,
.ahu-friend-row small,
.ahu-opponent-list strong,
.ahu-opponent-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-friend-row strong,
.ahu-opponent-list strong { font-size: 0.94rem; }
.ahu-friend-row small,
.ahu-opponent-list small { color: var(--ink-muted); font-size: 0.8rem; }
.ahu-friend-row > b,
.ahu-opponent-list button > b { font-size: 0.89rem; }

.ahu-presence-wrap {
  position: relative;
  display: inline-flex;
  width: 2.65rem;
  height: 2.65rem;
}

.ahu-presence {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #a5aaa4;
}

.ahu-presence--online { background: #2c9c86; }
.ahu-presence--at-table { background: #f6b23c; }
.ahu-presence--active-table {
  background: #24a148;
  box-shadow: 0 0 0 2px rgb(36 161 72 / 18%);
}

.ahu-profile-hero {
  display: grid;
  min-width: 0;
  padding: 0.45rem 0 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
}

.ahu-profile-hero__identity {
  min-width: 0;
}

.ahu-profile-hero__identity h1,
.ahu-profile-hero__identity p {
  overflow-wrap: anywhere;
}

.ahu-profile-hero__aside {
  display: grid;
  min-width: 0;
  max-width: 10rem;
  align-self: start;
  justify-items: end;
  gap: 0.55rem;
}

.ahu-profile-badges {
  display: flex;
  max-width: 10rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

.ahu-profile-badge {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  flex: none;
  border: 3px solid #d4a84a;
  border-radius: 50%;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 34%, var(--badge-light), var(--badge-dark));
  box-shadow: 0 5px 12px -8px rgb(32 48 31 / 76%);
}

.ahu-profile-badge--s {
  border-color: #f6c458;
  box-shadow: 0 0 0 3px rgb(246 196 88 / 28%), 0 5px 14px -7px rgb(154 101 0 / 80%);
}

.ahu-profile-badge .hulo-hero-svg {
  width: 88%;
  height: 88%;
}

.ahu-avatar--hero {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.3rem;
}

.ahu-profile-hero h1,
.ahu-profile-hero p {
  margin: 0;
}

.ahu-profile-hero h1 {
  font-size: 1.35rem;
  font-weight: 950;
}

.ahu-profile-hero p {
  margin-block-start: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

.ahu-profile-hero .ahu-profile-handle {
  color: var(--felt-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.ahu-profile-hero .ahu-profile-community-count {
  margin-block-start: 0.05rem;
  font-size: 0.75rem;
}

.ahu-profile-hero .button {
  display: inline-flex;
  min-height: 2.6rem;
  padding-inline: 0.75rem;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.ahu-variant-switcher {
  display: grid;
  width: min(100%, 22rem);
  min-height: 2.5rem;
  margin: 0 auto 0.8rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: #f3f1eb;
}

.ahu-variant-switcher button {
  min-width: 0;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
}

.ahu-variant-switcher button[aria-pressed="true"] {
  background: #ffffff;
  box-shadow: 0 1px 4px rgb(32 44 37 / 15%);
  color: var(--felt-strong);
}

.ahu-profile-stats {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 0;
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ahu-profile-stats > div {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.2rem;
}

.ahu-profile-stats > div:not(:nth-child(3n + 1)) {
  border-inline-start: 1px solid var(--line);
}

.ahu-profile-stats > div:nth-child(n + 4) {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.ahu-profile-stats dt {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.ahu-profile-stats dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 950;
}

.ahu-profile-section {
  display: grid;
  min-width: 0;
  padding-block: 0.2rem 0.75rem;
  border-bottom: 1px solid var(--line);
  gap: 0.75rem;
}

.ahu-section-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ahu-section-heading h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 950;
}

.ahu-section-heading h2 span,
.ahu-section-heading > span {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.ahu-ability-bars {
  display: grid;
  gap: 0.62rem;
}

.ahu-ability-bars > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1.7rem;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
}

.ahu-ability-bars i {
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: #e8e1d2;
}

.ahu-ability-bars i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--felt-strong);
}

.ahu-ability-bars strong {
  text-align: end;
}

.ahu-achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.ahu-achievement {
  display: grid;
  min-width: 0;
  min-height: 6.5rem;
  padding: 0.65rem 0.45rem;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  background: #eee8dc;
  color: #9a9d95;
  text-align: center;
}

.ahu-achievement--unlocked {
  border-color: #efcc83;
  background: var(--amber-soft);
  color: #8a5c13;
}

.ahu-achievement .lucide-icon {
  width: 1.45rem;
  height: 1.45rem;
}

.ahu-achievement strong {
  max-width: 100%;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.ahu-achievement span {
  font-size: 0.75rem;
}

.ahu-badges {
  gap: 0.85rem;
}

.ahu-badge-gallery__heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.ahu-badge-gallery__heading p,
.ahu-badge-gallery__heading h1 {
  margin: 0;
}

.ahu-badge-gallery__heading p {
  margin-block-end: 0.18rem;
  color: var(--felt-strong);
  font-size: 0.82rem;
  font-weight: 850;
}

.ahu-badge-gallery__heading h1,
.ahu-badge-gallery__heading h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 950;
}

.ahu-badge-gallery__heading > span {
  flex: none;
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.ahu-badge-gallery {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 0.4rem;
}

.ahu-badge-card {
  display: grid;
  min-width: 0;
  min-height: 18rem;
  margin: 0;
  padding: 0.7rem 0.35rem 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  background: #fffdf8;
  box-shadow: 0 8px 20px -18px rgb(32 48 31 / 72%);
  text-align: center;
}

.ahu-badge-card__frame {
  position: relative;
  display: grid;
  width: clamp(4.2rem, 100%, 6.4rem);
  aspect-ratio: 1;
  place-items: center;
}

.ahu-badge-card__rays {
  position: absolute;
  z-index: 0;
  inset: -24%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 238 180 / 98%) 0deg 2.2deg, rgb(246 196 88 / 55%) 2.2deg 4deg, rgb(246 196 88 / 0%) 4deg 9deg);
  mask-image: radial-gradient(circle, transparent 56%, #000 60%, #000 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 56%, #000 60%, #000 88%, transparent 100%);
}

.ahu-badge-card__medallion {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  border: 5px solid #e6a817;
  border-radius: 50%;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 34%, var(--badge-light), var(--badge-dark));
  box-shadow: 0 9px 18px -13px rgb(32 48 31 / 72%);
}

.ahu-badge-card__medallion--locked {
  border-color: #9aa7b2;
  background: radial-gradient(circle at 50% 34%, #b3bcc4, #7d8890);
}

.ahu-badge-card__medallion--locked .ahu-badge-card__hero {
  filter: grayscale(1) contrast(.92) opacity(.62);
}

.ahu-badge-card__medallion--s {
  border-color: #fbe066;
  box-shadow: 0 0 0 5px rgb(255 240 130 / 55%), 0 0 22px 4px rgb(255 224 90 / 85%), 0 9px 18px -13px rgb(32 48 31 / 72%);
  animation: ahu-badge-s-glow 1.9s ease-in-out infinite;
}

@keyframes ahu-badge-s-glow {
  0%, 100% {
    border-color: #fbe066;
    box-shadow: 0 0 0 5px rgb(255 240 130 / 45%), 0 0 18px 3px rgb(255 224 90 / 70%), 0 9px 18px -13px rgb(32 48 31 / 72%);
  }
  50% {
    border-color: #fff6c2;
    box-shadow: 0 0 0 7px rgb(255 246 194 / 70%), 0 0 30px 7px rgb(255 232 120 / 95%), 0 9px 18px -13px rgb(32 48 31 / 72%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ahu-badge-card__medallion--s {
    animation: none;
  }
}

.ahu-badge-card__hero {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.ahu-badge-card__sparkle {
  position: absolute;
  z-index: 2;
  fill: #f6c458;
  pointer-events: none;
}

.hulo-hero-svg {
  display: block;
  width: 84%;
  height: 84%;
  overflow: visible;
}

.ahu-badge-card h2,
.ahu-badge-card p,
.ahu-badge-card small {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

.ahu-badge-card h2 {
  color: #356375;
  font-size: 1rem;
  font-weight: 950;
}

.ahu-badge-card p {
  color: var(--ink-muted);
  font-size: 0.66rem;
  line-height: 1.32;
}

.ahu-badge-card__title {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 3.2rem;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
}

.ahu-badge-card__tier {
  flex: none;
  padding: 0.16rem 0.42rem;
  border: 1px solid #9fb1bc;
  border-radius: 4px;
  background: #e7eef2;
  color: #425c6b;
  font-size: 0.78rem;
  font-weight: 900;
}

.ahu-badge-card__tier--a { border-color: #d4a84a; background: #fff6db; color: #855e12; }
.ahu-badge-card__tier--s { border-color: #c28c17; background: #f6c458; color: #4d3608; }
.ahu-badge-card.is-tier-a h2 { color: #8a5c13; }
.ahu-badge-card.is-tier-s h2 { color: #9a6500; }
.ahu-badge-card p.ahu-badge-card__description {
  min-height: 2.35rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.4;
}
.ahu-badge-card small {
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ahu-badge-card.is-not-applicable { background: #f2f1ed; }

.ahu-wide-link {
  grid-template-columns: 2rem minmax(0, 1fr) 1rem;
}

.ahu-wide-link > .lucide-icon:first-child {
  width: 1.3rem;
  color: var(--felt-strong);
}

.ahu-wide-link > span {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.ahu-wide-link strong { font-size: 0.89rem; }
.ahu-wide-link small { color: var(--ink-muted); font-size: 0.8rem; }

.ahu-ledger-summary {
  display: grid;
  min-height: 9rem;
  padding: 1.25rem;
  border-radius: 18px;
  place-items: center;
  align-content: center;
  gap: 0.2rem;
  background: var(--felt-strong);
  box-shadow: 0 16px 30px -24px rgb(31 107 76 / 90%);
  color: #ffffff;
}

.ahu-ledger-summary p,
.ahu-ledger-summary h1,
.ahu-ledger-summary span { margin: 0; }
.ahu-ledger-summary p { color: rgb(255 255 255 / 72%); font-size: 0.84rem; }
.ahu-ledger-summary h1 { font-size: 2.2rem; font-weight: 950; }
.ahu-ledger-summary span { color: rgb(255 255 255 / 72%); font-size: 0.84rem; }

.ahu-ledger-year select {
  min-width: 4.8rem;
  min-height: 2.25rem;
  padding: 0.35rem 1.6rem 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 850;
}

.ahu-monthly-trend {
  display: grid;
  min-height: 9.5rem;
  padding: 0.6rem 0.2rem 0.2rem;
  grid-template-columns: repeat(12, minmax(2.5rem, 1fr));
  align-items: end;
  gap: 0.25rem;
  overflow-x: auto;
}

.ahu-monthly-trend > span {
  display: grid;
  height: 8.3rem;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  align-items: end;
  gap: 0.2rem;
}

.ahu-monthly-trend b {
  display: block;
  width: 1rem;
  height: var(--bar-height);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: #9aa39c;
}

.ahu-monthly-trend b.delta--positive { background: var(--felt-strong); }
.ahu-monthly-trend b.delta--negative { background: #c25a54; }
.ahu-monthly-trend small { color: var(--ink-muted); font-size: 0.75rem; white-space: nowrap; }
.ahu-monthly-trend em { font-size: 0.75rem; font-style: normal; font-weight: 850; }

.ahu-session-list {
  display: grid;
  gap: 0.5rem;
}

.ahu-session-list > button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 5.2rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  color: var(--ink);
  text-align: start;
}

.ahu-session-list > button:hover { border-color: #91b5a3; background: #fffef9; }
.ahu-session-list time,
.ahu-session-list > button > span { display: grid; min-width: 0; gap: 0.12rem; }
.ahu-session-list strong { font-size: 0.84rem; }
.ahu-session-list small { color: var(--ink-muted); font-size: 0.75rem; line-height: 1.35; overflow-wrap: anywhere; }
.ahu-session-list > button > b { font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.ahu-session-list .lucide-icon { width: 1rem; color: var(--ink-muted); }

.ahu-friend-ranking,
.ahu-session-score-list,
.ahu-session-event-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.4rem;
}

.ahu-friend-ranking > li,
.ahu-session-score-list > li {
  display: grid;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}

.ahu-friend-ranking > li > b,
.ahu-session-score-list > li > b {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  place-items: center;
  background: var(--felt-soft);
  color: var(--felt-strong);
  font-size: 0.75rem;
}

.ahu-friend-ranking > li > span { display: grid; min-width: 0; }
.ahu-friend-ranking strong,
.ahu-session-score-list strong { font-size: 0.89rem; }
.ahu-friend-ranking small { color: var(--ink-muted); font-size: 0.75rem; }

.ahu-ledger-detail__heading {
  display: flex;
  min-width: 0;
  padding: 0.65rem 0 0.85rem;
  border-bottom: 1px solid var(--line);
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.ahu-ledger-detail__heading p,
.ahu-ledger-detail__heading h1 { margin: 0; }
.ahu-ledger-detail__heading p { color: var(--ink-muted); font-size: 0.75rem; }
.ahu-ledger-detail__heading h1 { margin-block-start: 0.18rem; font-size: 1.25rem; }
.ahu-ledger-detail__heading > strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }

.ahu-session-event-list > li {
  display: grid;
  min-width: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.55rem;
}

.ahu-session-event-list > li > b { color: var(--ink-muted); font-size: 0.75rem; }
.ahu-session-event-list > li > span:nth-child(2) { display: grid; min-width: 0; gap: 0.15rem; }
.ahu-session-event-list strong { font-size: 0.84rem; }
.ahu-session-event-list small { color: var(--ink-muted); font-size: 0.75rem; }
.ahu-session-event-deltas { display: flex; min-width: 0; grid-column: 2; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.ahu-session-event-deltas small { font-weight: 800; }

.ahu-ledger-delete {
  display: inline-flex;
  width: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
  border-color: #cf9c98;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #a33f39;
}
.ahu-ledger-delete .lucide-icon { width: 1rem; }
.ahu-ledger-detail__heading > div:first-child { min-width: 0; }
.ahu-ledger-detail__heading h1 { overflow-wrap: anywhere; }
.ahu-ledger-detail__tools { display: grid; flex: 0 0 auto; justify-items: end; gap: 0.35rem; }
.ahu-ledger-detail__tools > strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }

.ahu-opponent-list button {
  grid-template-columns: 2.7rem minmax(0, 1fr) auto 1rem;
}

.ahu-community-hero {
  display: flex;
  min-width: 0;
  padding: 0.45rem 0 0.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ahu-community-hero h1,
.ahu-community-hero p,
.ahu-community-hero span { margin: 0; }
.ahu-community-hero h1 { font-size: 1.45rem; font-weight: 950; }
.ahu-community-hero div > span { color: var(--ink-muted); font-size: 0.84rem; }
.ahu-community-mark--large { width: 3.8rem; height: 3.8rem; font-size: 1.3rem; }

.flow-community.ahu-screen,
.flow-community.ahu-screen .flow-community__section {
  gap: 0.85rem;
}

.flow-community.ahu-screen .flow-community__section {
  padding-block-end: 0.9rem;
  border-bottom-color: var(--line);
}

.flow-community.ahu-screen .flow-member-list {
  display: flex;
  min-width: 0;
  padding: 0.2rem 0.1rem;
  gap: 0.8rem;
  overflow-x: auto;
}

.flow-community.ahu-screen .flow-member-list li {
  display: grid;
  width: 3.3rem;
  min-width: 3.3rem;
  min-height: 0;
  padding: 0;
  border: 0;
  justify-items: center;
  gap: 0.3rem;
  background: transparent;
}

.flow-community.ahu-screen .flow-member-list li > button {
  display: grid;
  min-height: var(--touch);
  padding: 0.2rem;
  justify-items: center;
  gap: 0.3rem;
  text-align: center;
}

.flow-community.ahu-screen .flow-member-list strong {
  width: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-community.ahu-screen .flow-table-list {
  display: grid;
  gap: 0.65rem;
}

.community-fan-entry__button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 4.4rem;
  padding: 0.7rem 0;
  border: 0;
  grid-template-columns: 2.7rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  color: var(--ink);
  text-align: start;
}

.community-fan-entry__button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.community-fan-entry__button strong { font-size: 0.94rem; }
.community-fan-entry__button small {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-fan-entry__button > .lucide-icon { width: 1rem; color: var(--ink-muted); }

.community-fan-screen {
  min-width: 0;
  gap: 0.9rem;
}

.community-fan-heading {
  display: flex;
  min-width: 0;
  padding: 0.45rem 0 0.2rem;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.community-fan-heading p,
.community-fan-heading h1 { margin: 0; }
.community-fan-heading h1 {
  margin-block-start: 0.1rem;
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.community-fan-heading__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.community-fan-choice {
  display: grid;
  min-width: 0;
  padding-block-end: 1rem;
  border-bottom: 1px solid var(--line);
  gap: 0.55rem;
}

.community-fan-choice .ahu-section-heading { margin: 0; }

.community-fan-choice__options {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.community-fan-choice__option {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 5rem;
  padding: 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 2.35rem minmax(0, 1fr) 0.9rem;
  align-items: center;
  gap: 0.45rem;
  background: #ffffff;
  color: var(--ink);
  text-align: start;
}

.community-fan-choice__option.is-selected {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
}

.community-fan-choice__option:disabled { cursor: not-allowed; opacity: 0.65; }

.community-fan-choice__option > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.community-fan-choice__option strong {
  font-size: 0.84rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.community-fan-choice__option small {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-fan-choice__option > .lucide-icon {
  width: 0.9rem;
  color: var(--ink-muted);
}

.community-fan-section {
  display: grid;
  min-width: 0;
  padding-block-end: 1rem;
  border-bottom: 1px solid var(--line);
  gap: 0.7rem;
}

.community-fan-section .ahu-section-heading {
  min-width: 0;
  margin: 0;
}

.community-fan-section .ahu-section-heading > span,
.community-fan-catalog__heading span {
  color: var(--ink-muted);
  font-size: 0.74rem;
}

.community-fan-sheet-row {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 4.2rem;
  padding: 0.55rem 0;
  border-block: 1px solid var(--line);
  align-items: center;
  gap: 0.45rem;
}

.community-fan-sheet-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  margin-inline-end: auto;
  gap: 0.12rem;
}

.community-fan-sheet-row strong,
.community-fan-sheet-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-fan-sheet-row strong { font-size: 0.88rem; }
.community-fan-sheet-row small { color: var(--ink-muted); font-size: 0.75rem; }
.community-fan-sheet-row .ahu-icon-button {
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
}

.community-fan-empty {
  margin: 0;
  padding: 1rem 0;
  color: var(--ink-muted);
  text-align: center;
}

.community-fan-catalog__heading > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.community-fan-catalog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.community-fan-presets {
  display: grid;
  min-width: 0;
  padding-block: 0.2rem 0.9rem;
  border-bottom: 1px solid var(--line);
  gap: 0.65rem;
}

.community-fan-preset-section-heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.community-fan-preset-section-heading > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.community-fan-preset-section-heading h3,
.community-fan-preset-section-heading p {
  margin: 0;
}

.community-fan-preset-section-heading h3 { font-size: 1rem; }
.community-fan-preset-section-heading > span {
  color: var(--ink-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.community-fan-preset-list {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.community-fan-preset-card {
  display: grid;
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  align-content: start;
  gap: 0.65rem;
  background: #fff;
}

.community-fan-preset-card.is-current {
  border-color: #76a995;
  box-shadow: inset 0 3px 0 var(--felt-strong);
}

.community-fan-preset-card__heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
}

.community-fan-preset-card__heading .ahu-list-icon {
  width: 2.1rem;
  height: 2.1rem;
}

.community-fan-preset-card__heading > div {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.community-fan-preset-card h4 {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.community-fan-preset-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.community-fan-preset-card dl,
.community-fan-preset-meta {
  display: grid;
  min-width: 0;
  margin: 0;
}

.community-fan-preset-card dl > div,
.community-fan-preset-meta > div {
  display: grid;
  min-width: 0;
  padding: 0.24rem 0;
  border-bottom: 1px solid #e8ece9;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0.45rem;
}

.community-fan-preset-card dt,
.community-fan-preset-card dd,
.community-fan-preset-meta dt,
.community-fan-preset-meta dd {
  min-width: 0;
  margin: 0;
  font-size: 0.69rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.community-fan-preset-card dt,
.community-fan-preset-meta dt { color: var(--ink-muted); }
.community-fan-preset-card dd,
.community-fan-preset-meta dd { font-weight: 750; }
.community-fan-preset-card .button { width: 100%; margin-block-start: auto; }

.community-fan-preset-dialog {
  width: min(calc(100% - 1rem), 58rem);
  max-height: 94dvh;
}

.community-fan-preset-dialog > form {
  display: grid;
  min-height: 0;
  max-height: 94dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.community-fan-preset-dialog__title {
  display: grid;
  min-width: 0;
  margin-inline-end: auto;
  gap: 0.12rem;
}

.community-fan-preset-dialog__title p,
.community-fan-preset-dialog__description { margin: 0; }

.community-fan-preset-dialog__body {
  display: grid;
  min-height: 0;
  padding: 0.9rem;
  align-content: start;
  gap: 0.9rem;
  overflow-y: auto;
}

.community-fan-preset-dialog__description {
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.community-fan-preset-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
}

.community-fan-preset-meta > div {
  padding: 0.55rem;
  border: 0;
  border-inline-end: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
}

.community-fan-preset-meta > div:last-child { border-inline-end: 0; }
.community-fan-preset-meta a {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  color: var(--felt-strong);
  text-decoration: none;
}
.community-fan-preset-meta a .lucide-icon { width: 0.8rem; min-width: 0.8rem; }

.community-fan-preset-diff,
.community-fan-preset-preview {
  display: grid;
  min-width: 0;
  gap: 0.55rem;
}

.community-fan-preset-diff__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.community-fan-preset-diff__summary span {
  display: grid;
  min-height: 3.25rem;
  padding: 0.42rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  place-items: center;
  align-content: center;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.community-fan-preset-diff__summary strong {
  color: var(--ink);
  font-size: 1rem;
}

.community-fan-preset-diff__details {
  display: grid;
  gap: 0.35rem;
}

.community-fan-preset-diff__details details {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.community-fan-preset-diff__details summary {
  min-height: 2.6rem;
  padding: 0.55rem 0.65rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.community-fan-preset-diff__details > p {
  margin: 0;
  padding: 0.65rem;
  color: var(--felt-strong);
  font-size: 0.8rem;
}

.community-fan-preset-change-list {
  display: grid;
  max-height: 13rem;
  margin: 0;
  padding: 0 0.65rem 0.6rem;
  list-style: none;
  overflow-y: auto;
}

.community-fan-preset-change-list li {
  display: grid;
  min-width: 0;
  min-height: 2.2rem;
  padding: 0.3rem 0;
  border-top: 1px solid #e8ece9;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
}

.community-fan-preset-change-list li > span { min-width: 0; overflow-wrap: anywhere; }
.community-fan-preset-change-list del { color: var(--danger); }
.community-fan-preset-change-list strong { color: var(--felt-strong); }
.community-fan-preset-change-list .lucide-icon { width: 0.75rem; }

.community-fan-groups {
  display: grid;
  min-width: 0;
  gap: 0.9rem;
}

.community-fan-group {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.community-fan-group__heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.community-fan-group__heading h3 {
  margin: 0;
  font-size: 0.82rem;
}

.community-fan-group__heading span {
  color: var(--ink-muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.community-fan-preview {
  width: min(calc(100% - 1rem), 52rem);
  max-height: 94vh;
}

.community-fan-preview__title,
.ability-share-picker__title {
  display: grid;
  min-width: 0;
  margin-inline-end: auto;
  gap: 0.1rem;
}

.community-fan-preview__title small,
.ability-share-picker__title small {
  max-width: min(68vw, 38rem);
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-fan-preview__body {
  min-height: min(66vh, 42rem);
  align-content: center;
  justify-items: center;
  background: #eef1ed;
}

.community-fan-preview__frame,
.community-fan-preview__image {
  display: block;
  width: 100%;
  min-width: 0;
  height: min(66vh, 42rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  object-fit: contain;
}

.community-fan-preview__body > p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.76rem;
  text-align: center;
}

.community-fan-preview__fallback {
  display: grid;
  max-width: 24rem;
  justify-items: center;
  gap: 0.55rem;
  color: var(--ink-muted);
  text-align: center;
}

.community-fan-preview__fallback .lucide-icon {
  width: 3rem;
  height: 3rem;
  color: var(--felt-strong);
}

.community-fan-preview__fallback strong { color: var(--ink); }

.community-fan-transfer__note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.community-fan-transfer__list,
.ability-share-picker__list {
  display: grid;
  min-width: 0;
  max-height: min(52vh, 24rem);
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0.45rem;
  overflow-y: auto;
}

.community-fan-transfer__list label,
.ability-share-picker__list label {
  display: grid;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  background: #ffffff;
}

.ability-share-picker__list label {
  grid-template-columns: auto 2.5rem minmax(0, 1fr);
}

.community-fan-transfer__list input,
.ability-share-picker__list input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--felt-strong);
}

.community-fan-transfer__list span,
.ability-share-picker__list label > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.community-fan-transfer__list strong,
.ability-share-picker__list strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.community-fan-transfer__list small,
.ability-share-picker__list small {
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.ability-share-picker__count {
  margin: 0;
  color: var(--felt-strong);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: end;
}

.community-fan-search {
  display: grid;
  min-width: 0;
  min-height: var(--touch);
  padding: 0 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
}

.community-fan-search > .lucide-icon {
  width: 1rem;
  color: var(--ink-muted);
}

.community-fan-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.86rem;
}

.community-fan-search output {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.community-fan-search-empty {
  margin: 0;
  padding: 1rem 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  text-align: center;
}

.community-fan-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-fan-list > li {
  display: grid;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.48rem 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.community-fan-list > li > span {
  min-width: 0;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}
/* A 番 value is free text, so it can be a phrase like 莊家收每門1底 or 5(雙響) 10(三響).
   It has to wrap like the 牌型 name beside it rather than run out of its cell. */
.community-fan-list > li > strong {
  min-width: 0;
  color: var(--felt-strong);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.community-fan-list:not(.community-fan-list--editing) {
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.community-fan-list:not(.community-fan-list--editing) > li {
  min-height: 3.1rem;
  padding: 0.38rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Flow the name and the value like words so a long pair breaks onto a second
     line inside the cell instead of overflowing a quarter-width column. */
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: start;
  column-gap: 0.3rem;
  row-gap: 0.05rem;
}

.community-fan-list:not(.community-fan-list--editing) > li > span {
  font-size: 0.84rem;
  line-height: 1.3;
}

.community-fan-list:not(.community-fan-list--editing) > li > strong {
  justify-self: start;
  font-size: 0.84rem;
}

.community-fan-editor,
.community-fan-editor__actions {
  display: grid;
  min-width: 0;
  gap: 0.65rem;
}

.community-fan-editor__actions {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.community-fan-list--editing > li {
  /* The value column carries free text now, not a 1-3 digit number. */
  grid-template-columns: minmax(0, 1fr) minmax(6.6rem, 7.8rem) 2.6rem;
  gap: 0.45rem;
}

.community-fan-list--editing input {
  width: 100%;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.45rem 0.55rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
}

.community-fan-list--editing label {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.community-fan-list--editing .ahu-icon-button {
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
}

.community-fan-add {
  justify-self: start;
}

.community-fan-source {
  display: inline-flex;
  min-height: var(--touch);
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  color: var(--felt-strong);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}
.community-fan-source .lucide-icon { width: 0.9rem; }
.community-fan-error { margin: 0; }

@media (min-width: 52rem) {
  .community-fan-list:not(.community-fan-list--editing) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .community-fan-preset-list { grid-template-columns: minmax(0, 1fr); }
  .community-fan-preset-card {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.8fr) auto;
    align-items: center;
  }
  .community-fan-preset-card .button { width: auto; }
}

@media (max-width: 34rem) {
  .community-fan-preset-card { grid-template-columns: minmax(0, 1fr); }
  .community-fan-preset-card .button { width: 100%; }
  .community-fan-preset-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-fan-preset-meta > div:nth-child(2) { border-inline-end: 0; }
  .community-fan-preset-meta > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .community-fan-preset-diff__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .community-fan-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .community-fan-heading__actions {
    width: 100%;
    justify-content: space-between;
  }
  .community-fan-heading__actions .button { margin-inline-start: auto; }
  .community-fan-sheet-row { gap: 0.3rem; }
  .community-fan-sheet-row .ahu-list-icon { display: none; }
  .community-fan-choice__option {
    min-height: 5.5rem;
    padding: 0.5rem;
    grid-template-columns: minmax(0, 1fr) 0.8rem;
  }
  .community-fan-choice__option .ahu-list-icon { display: none; }
  .community-fan-list--editing > li {
    grid-template-columns: minmax(0, 1fr) 6.2rem 2.5rem;
    gap: 0.35rem;
  }
  .community-fan-editor__actions {
    grid-template-columns: 1fr 1fr;
  }
  .community-fan-editor__actions .button:first-child,
  .community-fan-editor__actions .button:last-child { grid-column: 1 / -1; }
  .community-fan-catalog__heading {
    align-items: flex-start;
  }
  .community-fan-catalog__actions .button {
    min-height: 2.4rem;
    padding-inline: 0.55rem;
    font-size: 0.78rem;
  }
  .community-fan-preview__body {
    min-height: 58vh;
    padding: 0.5rem;
  }
  .community-fan-preview__frame,
  .community-fan-preview__image { height: 58vh; }
}

.flow-table-row.ahu-table-card {
  display: block;
  padding: 0;
  border: 0;
}

.ahu-table-card > a,
.ahu-table-card > button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 5.6rem;
  padding: 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 15px;
  grid-template-columns: 2.65rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: start;
  text-decoration: none;
}

.ahu-table-card > button:disabled {
  opacity: 0.72;
}

.ahu-table-card__tile {
  display: grid;
  width: 2.55rem;
  height: 3rem;
  border: 1.5px solid #e5dac1;
  border-bottom-width: 5px;
  border-radius: 9px;
  place-items: center;
  background: #fffef9;
  color: var(--felt-strong);
  font-family: serif;
  font-size: 1.25rem;
  font-weight: 900;
}

.ahu-table-card__main {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.ahu-table-card__main > span {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ahu-table-card__main strong { font-size: 0.94rem; }
.ahu-table-card__main small { color: var(--ink-muted); font-size: 0.8rem; }
.ahu-table-card__main b { color: var(--felt-strong); font-size: 0.8rem; }
.ahu-table-card > a > .lucide-icon,
.ahu-table-card > button > .lucide-icon { width: 1rem; color: #9da49b; }

.ahu-full-button {
  display: inline-flex;
  width: 100%;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.ahu-merge-list label {
  display: grid;
  min-width: 0;
  min-height: 4.3rem;
  padding: 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
}

.ahu-merge-list label > span:not(.status-pill) {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.ahu-merge-list strong { font-size: 0.94rem; }
.ahu-merge-list small { color: var(--ink-muted); font-size: 0.8rem; }

.ahu-merge-form,
.ahu-merge-fields {
  display: grid;
  min-width: 0;
  gap: 0.8rem;
}

.ahu-merge-form select {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding-inline: 0.75rem 2rem;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background-color: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  text-overflow: ellipsis;
}

.ahu-merge-impact {
  display: grid;
  padding: 0.85rem;
  border: 1.5px solid #f0d392;
  border-radius: 14px;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  background: var(--amber-soft);
  color: #795318;
}

.ahu-merge-impact .lucide-icon { width: 1.3rem; }
.ahu-merge-impact p { display: grid; margin: 0; gap: 0.15rem; }
.ahu-merge-impact strong { font-size: 0.89rem; }
.ahu-merge-impact span { font-size: 0.8rem; line-height: 1.45; }

.merged-settlement-breakdown {
  display: grid;
  gap: 0.6rem;
}

.merged-settlement-breakdown article {
  display: grid;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  gap: 0.4rem;
  background: #ffffff;
}

.merged-settlement-breakdown article > span {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
}

.merged-settlement-breakdown small {
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.merged-settlement-breakdown b { color: var(--ink); }

.table-player-actions-backdrop {
  align-items: end;
}

.table-player-actions {
  width: min(calc(100% - 1rem), 31rem);
  max-height: calc(100dvh - 1rem);
  margin-inline: auto;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

.table-player-actions__handle {
  width: 2.8rem;
  height: 0.28rem;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: #cec5b3;
}

.table-player-actions .dialog__header {
  border-radius: 0;
}

.table-player-actions .dialog__header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.table-player-actions .dialog__header span:not(.ahu-avatar) {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.table-player-actions .dialog__header small {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.table-player-actions__body {
  display: grid;
  padding: 0.75rem;
  gap: 0.55rem;
}

.table-player-actions__body > button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 4.2rem;
  padding: 0.7rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  grid-template-columns: 2.6rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.65rem;
  background: #ffffff;
  color: var(--ink);
  text-align: start;
}

.table-player-actions__body > button:hover {
  border-color: #abc8b7;
  background: #fffef9;
}

.table-player-actions__body > button > span:first-child {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 11px;
  place-items: center;
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.table-player-actions__body > button:nth-child(2) > span:first-child {
  background: var(--red-soft);
  color: #c8442f;
}

.table-player-actions__body > button:nth-child(3) > span:first-child {
  background: var(--amber-soft);
  color: #8d6219;
}

.table-player-actions__body > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.table-player-actions__body strong { font-size: 0.94rem; }
.table-player-actions__body small { color: var(--ink-muted); font-size: 0.8rem; }
.table-player-actions__body .lucide-icon { width: 1.15rem; }
.table-player-actions__body > button > .lucide-icon { width: 0.95rem; color: #9aa197; }

.table-achievement-draft {
  border: 1.5px solid #ead29a;
  border-radius: 15px;
  overflow: hidden;
  background: #fffaf0;
}

.table-achievement-draft__toggle {
  display: grid;
  width: 100%;
  min-height: 3.7rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  color: #76501a;
  text-align: start;
}

.table-achievement-draft__toggle > .lucide-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.table-achievement-draft__toggle > span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.table-achievement-draft__toggle strong { font-size: 0.89rem; }
.table-achievement-draft__toggle small { font-size: 0.75rem; }
.table-achievement-draft__toggle b {
  display: grid;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  place-items: center;
  background: #f6b23c;
  color: #4d370c;
  font-size: 0.8rem;
}

.table-achievement-draft__body {
  display: grid;
  padding: 0.75rem;
  border-top: 1px solid #ead29a;
  gap: 0.65rem;
  background: #fffdf8;
}

.table-achievement-draft__body > p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* 儲存牌型 is built out of repeated taps on the same target — 一筒 three times makes
   111筒 — and a phone reads two quick taps in one place as double-tap-to-zoom. The page
   zoomed and the second tile never landed on the rack. `manipulation` drops double-tap
   zoom (and its ~300ms click delay) for touches inside this panel while leaving pinch
   zoom and scrolling alone, so the page is still zoomable by the usual gesture. This is
   scoped to the panel deliberately: it is the only surface where tapping the same
   control repeatedly and fast is the normal way to use it. */
.table-achievement-draft__body,
.table-achievement-draft__body button,
.table-achievement-rack > button,
.table-achievement-tiles button {
  touch-action: manipulation;
}

.table-achievement-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
}

.table-achievement-tiles button {
  min-width: 0;
  min-height: 2.55rem;
  padding: 0.3rem 0.15rem;
  border: 1.5px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.64rem;
  font-weight: 850;
}

.table-achievement-tiles button.is-selected {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
  color: var(--felt-strong);
}

@media (min-width: 44rem) {
  .ahu-screen {
    padding-inline: 1.5rem;
  }

  .ahu-topbar {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .ahu-community-list,
  .ahu-friend-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ahu-tables-section .flow-table-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ahu-profile-section,
  .ahu-wide-link,
  .ahu-profile-stats,
  .ahu-profile-hero,
  .ahu-badge-gallery__heading,
  .ahu-badge-gallery {
    width: min(100%, 44rem);
    margin-inline: auto;
  }

  .ahu-badge-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ahu-petty-book .ahu-ledger-summary,
  .ahu-petty-book .ahu-profile-section {
    width: min(100%, 42rem);
    margin-inline: auto;
  }
}

@media (max-width: 27rem) {
  .ahu-screen {
    padding-inline: 0.8rem;
  }

  .ahu-topbar {
    margin-inline: -0.8rem;
    padding-inline: 0.8rem;
  }

  .ahu-profile-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
  }

  .ahu-profile-hero__aside,
  .ahu-profile-badges {
    max-width: 6.75rem;
  }

  .ahu-profile-badge {
    width: 1.95rem;
  }

  .ahu-profile-hero .button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .ahu-achievement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ahu-community-card,
  .ahu-friend-row,
  .ahu-opponent-list button {
    padding-inline: 0.6rem;
    gap: 0.55rem;
  }

  .ahu-friend-row__profile,
  .ahu-friend-row__table { gap: 0.55rem; }
}

/* Playful polish pass: tactile feedback on controls + a soft living pulse on the
   active seat, layered on top of the existing 阿糊 system. Purely additive (no
   layout/box-model changes), so it cannot regress spacing anywhere else. */
.button,
.icon-button,
.action-button,
.entry-participant,
.table-round-control,
.table-score-diamond__player {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.button:hover,
.icon-button:hover,
.action-button:hover,
.table-round-control:hover {
  transform: translateY(-1px);
}

.button:active,
.icon-button:active,
.action-button:active,
.entry-participant:active,
.table-round-control:active {
  transform: translateY(0) scale(0.96);
}

.button--primary:hover,
.action-button--primary:hover {
  box-shadow: 0 10px 20px -10px rgb(15 54 42 / 55%);
}

.entry-participant--selected {
  animation: ahu-chip-pop 0.28s ease;
}

@keyframes ahu-chip-pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.table-score-diamond__player:hover {
  transform: translateY(-2px);
}

.table-score-diamond__player:active {
  transform: translateY(0) scale(0.97);
}

.table-score-diamond__player--current {
  animation: ahu-seat-glow 2.6s ease-in-out infinite;
}

@keyframes ahu-seat-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgb(246 178 60 / 26%); }
  50% { box-shadow: 0 0 0 6px rgb(246 178 60 / 40%); }
}

.ahu-table-card,
.flow-table-row.ahu-table-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ahu-table-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgb(19 39 33 / 45%);
}

@media (prefers-reduced-motion: reduce) {
  .button, .icon-button, .action-button, .entry-participant,
  .table-round-control, .table-score-diamond__player,
  .ahu-table-card, .flow-table-row.ahu-table-card {
    transition: none;
    animation: none;
  }
}

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

  .opponent-ledger__unsettled-row--old {
    animation: none;
    background: #fff4cf;
  }
}

/* Pair targeting, meal allocation, saved hands, and merged social ledger. */
.opponent-ledger__unsettled-row {
  display: grid;
  min-width: 0;
  margin-block-start: 0.3rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem;
}

@keyframes old-settlement-reminder {
  0%, 45% { background: #fff4cf; }
  55%, 100% { background: #ffd9ca; }
}

.opponent-ledger__unsettled-row--old {
  padding: 0.25rem;
  border-radius: 7px;
  animation: old-settlement-reminder 1s steps(1, end) infinite;
}

.opponent-ledger__unsettled-row .opponent-ledger__unsettled {
  min-width: 0;
  margin: 0;
  justify-content: end;
  white-space: normal;
}

.opponent-ledger__inline-settle {
  min-width: 2.4rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.35rem;
  border: 0;
  border-radius: 7px;
  background: var(--felt-strong);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 850;
}

.opponent-ledger__inline-settle:disabled {
  background: #d8d9d4;
  color: #777d76;
}

.opponent-ledger__active-total {
  display: grid;
  min-height: 2.4rem;
  margin-block-start: 0.15rem;
  place-items: center;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  line-height: 1;
}

.opponent-ledger__active-total--empty { visibility: hidden; }

.table-surrender-dialog {
  width: min(92vw, 25rem);
  text-align: center;
}

.table-invite-dialog { width: min(92vw, 27rem); }
.table-invite-dialog__body { display: grid; justify-items: center; gap: 0.85rem; }
.table-invite-dialog__body img { width: min(58vw, 12rem); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff; object-fit: contain; }
.table-invite-dialog__body > div { display: grid; justify-items: center; gap: 0.15rem; }
.table-invite-dialog__body > div span,
.table-invite-dialog__body label > span { color: var(--ink-muted); font-size: 0.8rem; font-weight: 750; }
.table-invite-dialog__body > div strong { font-size: 1.25rem; letter-spacing: 0; }
.table-invite-dialog__body label { display: grid; width: 100%; gap: 0.3rem; }
.table-invite-dialog__body input { width: 100%; min-width: 0; }

.table-surrender-dialog .dialog__body {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
}

.table-surrender-dialog h2,
.table-surrender-dialog p { margin: 0; }
.table-surrender-dialog h2 { font-size: 1.05rem; }
.table-surrender-dialog p { color: var(--ink-muted); font-size: 0.84rem; line-height: 1.55; }
.table-surrender-dialog__flag {
  padding: 0.35rem 0.65rem;
  border-radius: 7px;
  background: #fdeee4;
  color: #b53d2d;
  font-size: 0.84rem;
  font-weight: 950;
}

.meal-calculator form {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.meal-calculator__heading,
.meal-result > div {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.meal-calculator__heading h3,
.meal-calculator__heading p { margin: 0; }
.meal-calculator__heading p { margin-block-start: 0.15rem; color: var(--ink-muted); font-size: 0.8rem; line-height: 1.45; }
.meal-calculator__heading > strong { flex: 0 0 auto; color: var(--felt-strong); font-size: 0.8rem; }
.meal-calculator__saved-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.meal-calculator__saved-actions strong { color: var(--felt-strong); font-size: 0.8rem; }
.meal-calculator__controls { min-width: 0; margin: 0; padding: 0; border: 0; }

.meal-payer-picker,
.meal-obligation-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.meal-payer-picker legend,
.meal-obligation-group legend {
  margin-block-end: 0.45rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
}

.meal-payer-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.meal-payer-picker legend { grid-column: 1 / -1; }
.meal-payer-picker label {
  display: grid;
  min-width: 0;
  min-height: 3rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  background: #fff;
}

.meal-payer-picker input { width: 1rem; min-height: 1rem; }
.meal-payer-picker label > span { display: grid; min-width: 0; color: var(--ink); font-size: 0.8rem; }
.meal-payer-picker small { color: var(--ink-muted); font-size: 0.75rem; }

.meal-obligation-groups { display: grid; min-width: 0; gap: 0.85rem; }
.meal-obligation-group { display: grid; gap: 0.3rem; }
.meal-obligation-group > label {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.8fr);
  align-items: center;
  gap: 0.6rem;
}
.meal-obligation-group > label > span:first-child { display: flex; min-width: 0; align-items: center; gap: 0.3rem; color: var(--ink); }
.meal-obligation-group small { padding: 0.12rem 0.3rem; border-radius: 5px; background: var(--amber-soft); color: #7f5b19; font-size: 0.75rem; }
.meal-money-input { position: relative; display: block; }
.meal-money-input b { position: absolute; z-index: 1; top: 50%; left: 0.55rem; color: var(--ink-muted); font-size: 0.75rem; transform: translateY(-50%); }
.meal-money-input input { padding-inline-start: 2.45rem; text-align: end; }
.meal-empty { margin: 0; padding: 0.75rem; border: 1px dashed var(--line); color: var(--ink-muted); font-size: 0.84rem; text-align: center; }
.meal-result { display: grid; gap: 0.35rem; }
.meal-result > div span { color: var(--felt-strong); font-size: 0.8rem; }
.meal-result p { display: grid; margin: 0; padding-block: 0.35rem; border-top: 1px solid rgb(31 107 76 / 14%); grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem; font-size: 0.84rem; }
.meal-result p span { text-align: center; }

.table-final-confirmation-dialog {
  width: min(92vw, 25rem);
  text-align: center;
}

.table-final-confirmation-dialog .dialog__body {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
}

.table-final-confirmation-dialog h2,
.table-final-confirmation-dialog p { margin: 0; }
.table-final-confirmation-dialog h2 { font-size: 1.05rem; }
.table-final-confirmation-dialog p { color: var(--ink-muted); font-size: 0.84rem; line-height: 1.55; }
.table-final-confirmation-dialog__icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  place-items: center;
  background: var(--amber-soft);
  color: #8a5c13;
}
.table-final-confirmation-dialog__icon .lucide-icon { width: 1.25rem; height: 1.25rem; }

.settlement-warning-list {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0.4rem;
  list-style: none;
  text-align: start;
}

.settlement-warning-list li {
  display: grid;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle);
  gap: 0.15rem;
}

.settlement-warning-list strong,
.settlement-warning-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settlement-warning-list span {
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.table-redo-confirmation-dialog {
  border-color: #d9bd6f;
}

.table-redo-confirmation-dialog .dialog__body {
  padding-block: 1.25rem;
}

.table-redo-confirmation-dialog .dialog__footer {
  justify-content: stretch;
}

.table-redo-confirmation-dialog .dialog__footer .button {
  flex: 1 1 0;
}

.table-undo-warning-dialog {
  border-color: #d79a91;
}

.table-undo-warning-dialog .dialog__body {
  padding-block: 1.25rem;
}

.table-undo-warning-dialog .table-final-confirmation-dialog__icon {
  background: var(--red-soft);
  color: var(--red);
}

/* How much 找數 leaves with the 鋪. It has to read as a consequence, not as body
   copy, because it is the part a 手動 player cannot see coming. */
/* Specific enough to beat `.table-final-confirmation-dialog p`, which otherwise
   greys this line down to the same muted body copy it has to stand out from. */
.table-undo-warning-dialog p.table-undo-warning-dialog__settlements {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 0.75rem;
  background: var(--red-soft);
  color: var(--red);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.table-undo-warning-dialog .dialog__footer {
  justify-content: stretch;
}

.table-undo-warning-dialog .dialog__footer .button {
  flex: 1 1 0;
}

.final-settlement-dialog { width: min(96vw, 46rem); }
.final-settlement-body { gap: 1rem; }
.final-section-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.final-section-heading > span { color: var(--ink-muted); font-size: 0.8rem; }
.button--compact {
  display: inline-flex;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
}
.button--compact .lucide-icon { width: 0.85rem; height: 0.85rem; }
.final-score-grid { overflow: hidden; border-radius: 8px; background: #fff; }
.final-score-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
  gap: 0.45rem;
}
.final-score-edit-grid label { display: grid; min-width: 0; gap: 0.25rem; }
.final-score-edit-grid label > span { overflow: hidden; color: var(--ink-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.final-score-edit-grid input { min-width: 0; min-height: 2.6rem; padding: 0.45rem; text-align: center; }
.final-score-edit-actions { display: flex; justify-content: end; gap: 0.45rem; }
.final-score-edit-actions .button { min-height: 2.35rem; }
.final-score-warning { color: #8a5c13; }
.final-transfer-list .final-transfer-warning {
  display: block;
  padding: 0.7rem;
  border: 1px solid #e8bf62;
  border-radius: 7px;
  background: var(--amber-soft);
  color: #7b5312;
  text-align: center;
}
.final-multiplier-bar {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}
.final-multiplier-bar button {
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 850;
}
.final-multiplier-bar button.is-selected {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
  color: var(--felt-strong);
}
.final-rounding-note { margin: 0; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.45; }
.meal-allocation-mode { width: min(100%, 20rem); }
.meal-diner-picker { padding-block-start: 0.3rem; border-top: 1px solid var(--line); }
.meal-contribution-groups { gap: 0.4rem; }
.meal-contribution-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.8fr);
  align-items: center;
  gap: 0.6rem;
}
.meal-contribution-row > span:first-child { color: var(--ink); }
.meal-result .meal-share-summary {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.meal-result .meal-share-summary span { line-height: 1.5; text-align: start; }

.table-achievement-rack,
.ahu-saved-hand__rack {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(17, minmax(0, 1fr));
  gap: 0.12rem;
}

.table-achievement-rack {
  grid-template-columns: repeat(var(--achievement-rack-columns, 17), minmax(0, 1fr));
}

.table-achievement-rack > button,
.table-achievement-rack__empty {
  display: grid;
  min-width: 0;
  aspect-ratio: 0.72;
  padding: 0;
  border: 1px solid #ddcfad;
  border-radius: 4px;
  place-items: center;
  background: #fff;
  overflow: hidden;
}
.table-achievement-rack > button { border-bottom-width: 3px; }
.table-achievement-rack__empty { border-style: dashed; background: #f6f1e6; }
.mahjong-tile-face {
  display: inline-grid;
  position: relative;
  width: 1.9rem;
  aspect-ratio: 0.72;
  border: 1px solid #d9ceb4;
  border-bottom-width: 3px;
  border-radius: 4px;
  place-items: center;
  background: #fffdf6;
  box-shadow: inset 0 -0.15rem 0 #f0eadb;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1;
  overflow: hidden;
}
.mahjong-tile-face > b,
.mahjong-tile-face > i { font-style: normal; line-height: 1; }
.mahjong-tile-face--character { align-content: center; gap: 0.14rem; }
.mahjong-tile-face--character b { color: #245c91; font-size: 0.86rem; }
.mahjong-tile-face--character i { color: #c33f32; font-size: 0.68rem; font-weight: 950; }
.mahjong-tile-face--honor b { color: #202c25; font-size: 0.9rem; }
.mahjong-tile-face--red b { color: #c53730; font-size: 0.95rem; }
.mahjong-tile-face--green b { color: #1f7550; font-size: 0.95rem; }
.mahjong-white-dragon-frame {
  position: absolute;
  inset: 14% 18%;
  border: max(1px, 0.08em) solid #3077a8;
  background: transparent;
}
.mahjong-circle-layout,
.mahjong-bamboo-layout,
.mahjong-bamboo-bird {
  position: absolute;
  inset: 7%;
}
.mahjong-circle-mark,
.mahjong-bamboo-stick {
  position: absolute;
  left: var(--tile-x);
  top: var(--tile-y);
  display: block;
  transform: translate(-50%, -50%) rotate(var(--tile-rotation)) scale(var(--tile-scale));
}
.mahjong-circle-mark {
  width: 22%;
  aspect-ratio: 1;
  border: max(1px, 0.06em) solid #f8f3e7;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf6 0 38%, #278260 42%);
  box-shadow: 0 0 0 1px #176347;
}
.mahjong-circle-mark[data-color="red"] { background: radial-gradient(circle, #fffdf6 0 38%, #c84638 42%); box-shadow: 0 0 0 1px #9c3229; }
.mahjong-circle-mark[data-color="blue"] { background: radial-gradient(circle, #fffdf6 0 38%, #3077a8 42%); box-shadow: 0 0 0 1px #245a80; }
.mahjong-circle-mark[data-color="multi"] {
  background: radial-gradient(circle, #fffdf6 0 34%, transparent 36%), conic-gradient(#c84638 0 25%, #278260 25% 50%, #3077a8 50% 75%, #d49a24 75%);
  box-shadow: 0 0 0 1px #176347;
}
.mahjong-bamboo-stick {
  width: 13%;
  height: 24%;
  border-radius: 45%;
  background-color: #278260;
  background-image: linear-gradient(to bottom, transparent 0 27%, #f7f1e2 28% 35%, transparent 36% 63%, #f7f1e2 64% 71%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgb(12 91 62 / 32%);
}
.mahjong-bamboo-layout[data-count="7"] .mahjong-bamboo-stick,
.mahjong-bamboo-layout[data-count="8"] .mahjong-bamboo-stick,
.mahjong-bamboo-layout[data-count="9"] .mahjong-bamboo-stick { width: 11%; height: 20%; }
.mahjong-bamboo-stick[data-color="red"] { background-color: #c84638; }
.mahjong-bamboo-stick[data-color="blue"] { background-color: #3077a8; }
.mahjong-bamboo-bird__tail,
.mahjong-bamboo-bird__body,
.mahjong-bamboo-bird__wing,
.mahjong-bamboo-bird__head,
.mahjong-bamboo-bird__eye,
.mahjong-bamboo-bird__beak { position: absolute; display: block; }
.mahjong-bamboo-bird__tail {
  left: 28%; bottom: 11%; width: 18%; height: 44%;
  border-radius: 60% 15% 70% 20%; background: #3077a8; transform: rotate(27deg);
  box-shadow: 0.24rem 0.05rem 0 -0.03rem #278260;
}
.mahjong-bamboo-bird__body { left: 29%; top: 34%; width: 49%; height: 39%; border-radius: 55% 55% 48% 52%; background: #278260; transform: rotate(-12deg); }
.mahjong-bamboo-bird__wing { left: 36%; top: 43%; width: 30%; height: 22%; border-radius: 65% 35% 65% 35%; background: #3077a8; transform: rotate(15deg); }
.mahjong-bamboo-bird__head { right: 12%; top: 21%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #c84638; }
.mahjong-bamboo-bird__eye { right: 19%; top: 29%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: #1f2d26; }
.mahjong-bamboo-bird__beak { right: 3%; top: 35%; width: 13%; height: 9%; background: #d49a24; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mahjong-tile-face--small { font-size: 0.52rem; border-bottom-width: 2px; }
.mahjong-tile-face--small.mahjong-tile-face--honor b,
.mahjong-tile-face--small.mahjong-tile-face--red b,
.mahjong-tile-face--small.mahjong-tile-face--green b { font-size: 0.58rem; }
.mahjong-tile-face--small.mahjong-tile-face--character b { font-size: 0.58rem; }
.mahjong-tile-face--small.mahjong-tile-face--character i { font-size: 0.42rem; }
.table-achievement-rack .mahjong-tile-face { width: 100%; height: 100%; border: 0; border-radius: 2px; box-shadow: none; }
.ahu-saved-hand__rack .mahjong-tile-face { width: 100%; height: auto; }
.table-achievement-tiles button { display: grid; min-height: 4.2rem; place-items: center; align-content: center; gap: 0.08rem; }
.table-achievement-tiles button > span:not(.mahjong-tile-face) { font-size: 0.56rem; }
.table-achievement-tiles button > b { color: var(--ink-muted); font-size: 0.52rem; }
.table-achievement-tiles button:disabled { opacity: 0.45; }
.table-achievement-name { display: grid; gap: 0.25rem; }
.table-achievement-name > span { color: var(--ink-muted); font-size: 0.8rem; font-weight: 800; }
.table-achievement-name input { width: 100%; min-height: 2.75rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.table-achievement-name input::placeholder { color: #a8a39a; opacity: 1; }

.hand-history-achievement {
  display: flex;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid #ead29a;
  border-radius: 7px;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  background: #fff8e7;
  color: #76501a;
}
.hand-history-achievement .ahu-mascot { flex: 0 0 auto; }
.hand-history-achievement > span { display: grid; min-width: 0; gap: 0.06rem; }
.hand-history-achievement strong { font-size: 0.84rem; }
.hand-history-achievement small { overflow-wrap: anywhere; color: #76501a; font-size: 0.75rem; }
.hand-history-achievement__rack { flex: 1 0 100%; }

.ahu-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ahu-outcome-stats {
  display: grid;
  width: min(100%, 28rem);
  margin: 0.55rem auto 0.2rem;
  padding: 0.55rem;
  border-radius: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--felt-soft);
}
.ahu-outcome-stats > div { display: grid; justify-items: center; gap: 0.1rem; }
.ahu-outcome-stats > div + div { border-inline-start: 1px solid rgb(31 107 76 / 18%); }
.ahu-outcome-stats dt { color: var(--ink-muted); font-size: 0.75rem; font-weight: 800; }
.ahu-outcome-stats dd { margin: 0; color: var(--felt-strong); font-size: 1rem; font-weight: 950; }

.ahu-ability-radar { display: grid; width: min(100%, 22rem); margin-inline: auto; place-items: center; }
.ahu-ability-radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.ahu-radar__ring,.ahu-radar__axis { fill: #f5efe2; stroke: #d9d3c7; stroke-width: 1; }
.ahu-radar__ring--inner { fill: none; }
.ahu-radar__axis { fill: none; }
.ahu-radar__value { fill: rgb(44 156 134 / 30%); stroke: #217e6d; stroke-width: 2.5; }
.ahu-ability-radar text { fill: var(--ink); font-family: inherit; font-size: 9px; font-weight: 850; }
.ahu-ability-radar text tspan:last-child { fill: var(--ink-muted); font-size: 8px; }
.ahu-ability-heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}
.ahu-ability-heading .ahu-text-button {
  min-height: 2.35rem;
  padding-inline: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  gap: 0.3rem;
  background: #ffffff;
  white-space: nowrap;
}
.ahu-ability-heading .ahu-text-button .lucide-icon { width: 0.9rem; }

.ahu-saved-hands { display: grid; gap: 0.65rem; }
.ahu-saved-hand { display: grid; min-width: 0; padding: 0.7rem; border: 1px solid #ead29a; border-radius: 8px; gap: 0.55rem; background: #fffaf0; }
.ahu-saved-hand > div:first-child { display: flex; min-width: 0; align-items: center; gap: 0.55rem; }
.ahu-saved-hand > div:first-child > span { display: grid; width: 2rem; height: 2rem; border-radius: 50%; place-items: center; background: var(--amber-soft); color: #8a5c13; }
.ahu-saved-hand p,.ahu-saved-hand strong,.ahu-saved-hand small { margin: 0; }
.ahu-saved-hand p { display: grid; min-width: 0; flex: 1; gap: 0.1rem; }
.ahu-saved-hand strong { font-size: 0.89rem; }
.ahu-saved-hand small { color: var(--ink-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.ahu-saved-hand__rack .mahjong-tile-face { min-width: 0; overflow: hidden; }
.ahu-empty-state { margin: 0; padding: 0.8rem; border: 1px dashed var(--line); color: var(--ink-muted); font-size: 0.8rem; line-height: 1.5; text-align: center; }

.ahu-ledger-summary { min-height: 11.5rem; border-radius: 8px; }
.ahu-ledger-summary dl { display: grid; width: min(100%, 16rem); margin: 0.65rem 0 0; padding-block-start: 0.55rem; border-top: 1px solid rgb(255 255 255 / 22%); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ahu-ledger-summary dl > div { display: grid; justify-items: center; gap: 0.05rem; }
.ahu-ledger-summary dl > div + div { border-inline-start: 1px solid rgb(255 255 255 / 18%); }
.ahu-ledger-summary dt { color: rgb(255 255 255 / 70%); font-size: 0.75rem; }
.ahu-ledger-summary dd { margin: 0; font-size: 1rem; font-weight: 950; }
.ahu-opponent-list button { grid-template-columns: 1.4rem 2.7rem minmax(0, 1fr) auto 1rem; }
.ahu-rank { display: grid; width: 1.35rem; height: 1.35rem; border-radius: 50%; place-items: center; background: #eee8dc; color: var(--ink-muted); font-size: 0.75rem; }
.ahu-opponent-list button:first-child .ahu-rank { background: var(--amber-soft); color: #8a5c13; }
.ahu-friend-search-results { display: grid; padding-block-end: 0.65rem; border-bottom: 1px solid var(--line); gap: 0.35rem; }
.ahu-friend-search-results > div { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; }
.ahu-friend-search-results > div > button:first-child { display: grid; min-width: 0; padding: 0.35rem; border: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.5rem; background: transparent; text-align: start; }
.ahu-friend-search-results > div > button:first-child > span { display: grid; min-width: 0; }
.ahu-friend-search-results strong { font-size: 0.84rem; }
.ahu-friend-search-results small { color: var(--ink-muted); font-size: 0.75rem; }
.ahu-friend-search-results .button { min-height: 2.3rem; padding-inline: 0.55rem; font-size: 0.8rem; }
/* Name and its two meta lines stack; at the larger type they no longer share a line. */
.ahu-opponent-meta {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.ahu-opponent-meta small:last-child {
  overflow: visible;
  color: var(--felt-strong);
  font-size: 0.75rem;
  text-overflow: clip;
  white-space: normal;
}

@media (min-width: 44rem) {
  .ahu-outcome-stats { width: min(100%, 28rem); }
}

@media (max-width: 40rem) {
  .final-settlement-dialog { width: 100%; }
}

@media (max-width: 27rem) {
  .meal-payer-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meal-obligation-group > label { grid-template-columns: minmax(0, 1fr) 7.25rem; }
  .opponent-ledger__unsettled-row { grid-template-columns: minmax(0, 1fr); }
  .opponent-ledger__unsettled-row .opponent-ledger__unsettled { justify-content: center; }
  .opponent-ledger__inline-settle { width: 100%; }
  .ahu-opponent-list button { grid-template-columns: 1.2rem 2.4rem minmax(0, 1fr) auto; }
  .ahu-opponent-list button > .lucide-icon { display: none; }
  .ahu-session-list > button { grid-template-columns: minmax(0, 1fr) auto; }
  .ahu-session-list time { grid-column: 1; }
  .ahu-session-list > button > span { grid-column: 1; }
  .ahu-session-list .lucide-icon { display: none; }
  .ahu-session-list > button > b { grid-column: 2; grid-row: 1 / span 2; }
  .final-score-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final-transfer-list p { grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr) minmax(3.5rem, auto); font-size: 0.8rem; }
  .meal-contribution-row { grid-template-columns: minmax(0, 1fr) 7.25rem; }
  .table-achievement-draft__body { padding-inline: 0.5rem; }
  .mahjong-tile-face { font-size: 1.08rem; }
}

/* Player grading badges (docs/PLAYER_GRADING_SYSTEM.md) — display only. */
.ahu-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.3rem;
  border-radius: 0.45rem;
  font-size: 0.89rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  vertical-align: middle;
}
.ahu-grade--s { background: linear-gradient(135deg, #b8860b, #e6a817); box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.35); }
.ahu-grade--a { background: #b3403a; }
.ahu-grade--b { background: #2f6db3; }
.ahu-grade--c { background: #38835a; }
.ahu-grade--d { background: #6b7280; }
.ahu-grade--none { background: transparent; color: var(--ink-soft, #6b7280); font-weight: 600; }
.ahu-grade--hero { margin-inline-start: 0.4rem; height: 1.55rem; min-width: 1.55rem; font-size: 0.94rem; }
.ahu-opponent-meta .ahu-grade { margin-inline-start: 0.35rem; }

.ahu-grade-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}
.ahu-grade-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line, #e5e0d6);
  border-radius: 999px;
  font-size: 0.89rem;
}
.ahu-grade-note {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
  color: var(--ink-soft, #6b7280);
}
.ahu-profile-stats-note {
  margin: 0.9rem 0 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid var(--line, #e5e0d6);
  background: var(--surface-subtle, #e9efed);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-muted, #586662);
}
.ahu-profile-stats-note strong { color: var(--ink, #18211f); }

/* 花牌 faces and the flower strip beside the 17-tile achievement rack. */
.mahjong-tile-face--flower { place-items: center; background: #fdf3f3; }
.mahjong-tile-face--flower b { color: #b3403a; font-size: 1.05em; }
.mahjong-tile-face--flower .mahjong-flower-number {
  position: absolute;
  top: 7%;
  z-index: 1;
  color: #202c25;
  font-size: 0.52em;
  font-style: normal;
  font-weight: 950;
}
.mahjong-flower-number[data-corner="left"] { left: 10%; }
.mahjong-flower-number[data-corner="right"] { right: 10%; }
.mahjong-flower-number[data-color="red"] { color: #c53730; }
.table-achievement-rack--flowers { margin-top: 0.3rem; opacity: 0.96; }
.ahu-saved-hand__share { margin-inline-start: auto; flex-shrink: 0; }

/* The post-settlement stage mirrors the lower half of the 1c share-card
   reference: one verdict followed by compact, evidence-backed 糊仔 awards. */
.final-settlement-celebration {
  display: grid;
  min-width: 0;
  padding-block: 1rem 0.15rem;
  border-top: 1px solid var(--line);
  gap: 0.85rem;
}

.final-badge-changes {
  display: grid;
  min-width: 0;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  gap: 0.65rem;
}

.final-badge-changes__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.final-badge-change {
  display: grid;
  min-width: 0;
  min-height: 5.6rem;
  padding: 0.6rem;
  border: 1px solid #b9d8c5;
  border-radius: 8px;
  grid-template-columns: 4.15rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  background: #f6fff8;
}
.final-badge-change.is-loss { border-color: #e7b7a9; background: #fff7f3; }
.final-badge-change__hero { display: grid; width: 4.15rem; height: 4.15rem; }
.final-badge-change__hero .hulo-hero-svg { width: 100%; height: 100%; }
.final-badge-change > span:last-child { display: grid; min-width: 0; gap: 0.08rem; }
.final-badge-change small,
.final-badge-change strong,
.final-badge-change b,
.final-badge-change em { overflow-wrap: anywhere; }
.final-badge-change small { color: var(--ink-muted); font-size: 0.7rem; }
.final-badge-change strong { font-size: 0.88rem; }
.final-badge-change b { color: var(--felt-strong); font-size: 0.76rem; }
.final-badge-change.is-loss b { color: var(--red); }
.final-badge-change em { color: var(--ink-muted); font-size: 0.7rem; font-style: normal; }

.badge-celebration-dialog { width: min(92vw, 35rem); }
.badge-celebration-dialog__body { display: grid; gap: 0.8rem; text-align: center; }
.badge-celebration-dialog__body h2,
.badge-celebration-dialog__body p { margin: 0; }
.badge-celebration-dialog__changes { display: grid; gap: 0.65rem; }
.badge-celebration-dialog__change {
  display: grid;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #b9d8c5;
  border-radius: 8px;
  grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  background: #f6fff8;
  text-align: start;
}
.badge-celebration-dialog__change.is-loss { border-color: #e7b7a9; background: #fff7f3; }
.badge-celebration-dialog__change > div:last-child { position: relative; z-index: 2; display: grid; min-width: 0; gap: 0.28rem; }
.badge-celebration-dialog__change strong { font-size: 1.05rem; }
.badge-celebration-dialog__change b { color: var(--felt-strong); font-size: 0.84rem; }
.badge-celebration-dialog__change.is-loss b { color: var(--red); }
.badge-celebration-dialog__change p { color: var(--ink-muted); font-size: 0.78rem; line-height: 1.45; }

/* 糊仔動畫 gallery. The assets do NOT share one aspect ratio — heights are all
   140 but widths run 200–320 — so each frame gets its own --emote-ratio from
   the catalog instead of a fixed box. The spec's own finding is that a
   two-character scene stops being readable much under 120px wide, which sets
   the 8.5rem column floor. */
.emote-gallery-dialog { width: min(94vw, 44rem); }
.emote-recipients {
  display: grid;
  margin: 0 0 0.65rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 8px;
  gap: 0.45rem;
  background: var(--concept-canvas, #f2f5f2);
}
.emote-recipients legend {
  padding: 0;
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 850;
}
.emote-recipients__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.emote-recipients__all,
.emote-recipients__person {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 750;
  /* A display name can be long and must not be truncated (see Names in DESIGN.md). */
  overflow-wrap: anywhere;
}
.emote-recipients__all { font-weight: 900; }

.emote-gallery__note {
  margin: 0 0 0.75rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.emote-gallery {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  list-style: none;
}
.emote-gallery__item {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.5rem 0.6rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 8px;
  gap: 0.4rem;
  /* Frames differ in height because the scenes differ in ratio, so the message box is
     pinned to the bottom of the cell — otherwise the fields in one row sit at different
     heights and the grid reads as broken rather than as varied artwork. */
  align-content: space-between;
  background: var(--concept-paper, #fffefb);
  text-align: center;
}
.emote-gallery__send {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  gap: 0.4rem;
  cursor: pointer;
  font: inherit;
  background: none;
}
.emote-gallery__name {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* One message field for the whole picker, not one per cell. It has to be at least 16px:
   iOS Safari zooms the page to fit any focused field smaller than that, and no 16px text
   fits inside a 8.5rem gallery cell — a per-cell box could only be fixed by shrinking the
   text, which is the thing that causes the zoom. A single wide field is also the only way
   the 40-character limit is visible while typing. */
.emote-gallery__say {
  display: grid;
  margin: 0 0 0.6rem;
  gap: 0.3rem;
}
.emote-gallery__say > span {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 850;
}
.emote-gallery__message {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 8px;
  background: var(--concept-paper, #fffefb);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 750;
}
.emote-gallery__message::placeholder {
  color: var(--ink-muted);
  font-weight: 700;
  opacity: 1;
}
.emote-gallery__frame {
  display: grid;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: var(--emote-ratio, 260 / 140);
  place-items: center;
  background: var(--concept-mint, #dff1e9);
}
.emote-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.emote-gallery__send:disabled {
  cursor: default;
  opacity: 0.45;
}
.emote-gallery__footer {
  flex-wrap: wrap;
  gap: 0.6rem;
}
.emote-gallery__mute {
  display: flex;
  margin-right: auto;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

/* The play layer. It is a sibling of #app (see index.html), so it is positioned
   against the viewport and survives every repaint — an emote must not restart
   because someone recorded a hand while it was in the air. `pointer-events: none`
   throughout: a 4-second animation may never sit between a player and the 牌枱. */
.emote-layer {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  padding: 0 0.75rem;
  /* Centred, not docked to the bottom: at the bottom of a phone it sat over the 找數 row
     and read as a toast rather than as something happening at the table. */
  align-content: center;
  justify-items: center;
  gap: 0.4rem;
  pointer-events: none;
}
/* Sized by HEIGHT, not width. Every scene is 140 tall but 200–320 wide, so a shared
   width makes the narrow ones tower over the 牌桌 — one of them covered the seat
   diamond for its whole four seconds. A fixed height keeps every emote the same
   visual weight and lets the card be as wide as its scene needs. */
.emote-flyout {
  display: grid;
  max-width: 100%;
  margin: 0;
  padding: 0.4rem 0.4rem 0.5rem;
  justify-self: center;
  border: 1px solid var(--concept-line, #dce4df);
  border-bottom: 3px solid var(--concept-jade-dark, #0d4637);
  border-radius: 12px;
  justify-items: center;
  gap: 0.25rem;
  animation: emote-flyout-in 260ms ease-out both;
  background: var(--concept-paper, #fffefb);
  box-shadow: 0 18px 34px -22px rgb(9 60 45 / 70%);
}
.emote-flyout.is-leaving { animation: emote-flyout-out 380ms ease-in both; }
.emote-flyout__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 6.25rem;
  border-radius: 8px;
  aspect-ratio: var(--emote-ratio, 260 / 140);
  background: var(--concept-mint, #dff1e9);
  object-fit: contain;
}
.emote-flyout__caption {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}

@keyframes emote-flyout-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes emote-flyout-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

/* The assets handle their own prefers-reduced-motion internally; this covers the
   card's entrance and exit, which are ours. */
@media (prefers-reduced-motion: reduce) {
  .emote-flyout,
  .emote-flyout.is-leaving { animation-duration: 1ms; }
}

.final-settlement-celebration__header {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

.final-settlement-celebration__mascot { align-self: start; }
.final-settlement-celebration__header > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}
.final-settlement-celebration__header p,
.final-settlement-celebration__header h3,
.final-settlement-celebration__header small { margin: 0; }
.final-settlement-celebration__header h3 {
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.final-settlement-celebration__header small {
  color: var(--ink-muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}
.final-settlement-celebration__header .button { white-space: nowrap; }

.final-settlement-awards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.final-settlement-award {
  display: grid;
  min-width: 0;
  min-height: 5.8rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  background: #fffdf6;
}

.final-settlement-award__hero {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
}
.final-settlement-award__hero .hulo-hero-svg {
  width: 100%;
  height: 100%;
}
.final-settlement-award > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}
.final-settlement-award strong,
.final-settlement-award b,
.final-settlement-award small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.final-settlement-award strong { font-size: 0.9rem; }
.final-settlement-award b { color: var(--felt-strong); font-size: 0.78rem; }
.final-settlement-award small { color: var(--ink-muted); font-size: 0.72rem; }

@media (max-width: 36rem) {
  .final-settlement-celebration__header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .final-settlement-celebration__header .button {
    width: 100%;
    grid-column: 1 / -1;
  }
  .final-settlement-awards { grid-template-columns: minmax(0, 1fr); }
  .final-badge-changes__grid { grid-template-columns: minmax(0, 1fr); }
  .badge-celebration-dialog__change { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

.flow-qr--generated svg.qr-code { width: 11rem; height: 11rem; border-radius: 0.6rem; }

/* 糊仔 presence: inline notes, heading mascots, empty states. */
.ahu-inline-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.75rem;
  background: rgba(56, 131, 90, 0.08);
}
.ahu-inline-note small { color: var(--ink-soft, #4b5563); font-weight: 600; }
.ahu-heading-mascot .ahu-mascot--compact { transform: scale(0.85); }
.ahu-empty-state .ahu-mascot { margin: 0 auto 0.75rem; }
.ahu-ledger-summary { position: relative; }
.ahu-ledger-summary__mascot { position: absolute; top: 0.75rem; right: 0.9rem; }

.table-score-diamond__player .table-seat-avatar {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.65rem;
  height: 1.65rem;
  border-width: 1px;
  font-size: 0.75rem;
}

.ahu-session-score-list > li > span {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.ahu-session-score-list > li > span small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ahu-friend-ranking > li.is-current-user {
  border-radius: 7px;
  background: var(--felt-soft);
}

.ahu-friend-ranking__identity,
.ahu-friend-ranking__profile {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
  color: inherit;
  text-align: start;
}

.ahu-friend-ranking__profile {
  width: fit-content;
  max-width: 100%;
  min-height: 2.5rem;
  margin: -0.25rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.ahu-friend-ranking__profile:hover .ahu-name-line__text {
  color: var(--felt-strong);
  text-decoration: underline;
  text-underline-offset: 0.14rem;
}

.ahu-friend-ranking__profile:focus-visible {
  outline: 3px solid rgb(47 125 91 / 22%);
  outline-offset: 1px;
}

/* 計埋飯錢 opt-in */
.meal-calculator__opt-in {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.meal-calculator__opt-in input { width: 1.15rem; height: 1.15rem; accent-color: #38835a; }
.meal-calculator__opt-in h3 { margin: 0; display: inline; }
.meal-calculator__opt-in small { display: block; color: var(--ink-soft, #6b7280); }
.meal-calculator--collapsed { padding-block: 0.7rem; }
.meal-calculator__opt-in--active { margin-bottom: 0.5rem; }
.meal-calculator__edit-bar { flex-wrap: wrap; justify-content: space-between; cursor: default; }

/* 番數 scroll wheel: the selected band stays fixed while values roll behind it. */
.fan-input-row { display: grid; grid-template-columns: minmax(7.25rem, 0.85fr) minmax(9.5rem, 1.15fr); gap: 0.75rem; align-items: stretch; }
.fan-wheel-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line, #e5e0d6);
  border-radius: 0.7rem;
  background: var(--surface, #fff);
}
.fan-wheel {
  height: 11rem;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.95), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.95)),
    transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 131, 90, 0.45) transparent;
  position: relative;
}
.fan-wheel::-webkit-scrollbar { width: 5px; }
.fan-wheel::-webkit-scrollbar-thumb { background: rgba(56, 131, 90, 0.45); border-radius: 999px; }
.fan-wheel::-webkit-scrollbar-track { background: transparent; }

/* A fixed band across the middle of the wheel marking the slot that counts. The
   wheel previously showed a column of numbers with nothing to say which one was
   picked or that it scrolled at all, which is the single most-used control in the
   app. The band sits behind the numbers and never intercepts a tap. */
.fan-wheel-shell::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0.3rem;
  left: 0.3rem;
  height: 2.5rem;
  border: 1px solid rgba(56, 131, 90, 0.35);
  border-radius: 0.5rem;
  background: rgba(56, 131, 90, 0.08);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.fan-wheel__pad { height: 4.25rem; scroll-snap-align: none; }
.fan-wheel__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.5rem;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-soft, #6b7280);
  scroll-snap-align: center;
  cursor: pointer;
}
.fan-wheel__item.is-selected { color: #38835a; font-weight: 900; font-size: 1.35rem; }
.fan-direct-entry {
  display: grid;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--line, #e5e0d6);
  border-radius: 0.7rem;
  align-content: center;
  gap: 0.75rem;
  background: #fffdf8;
}
.fan-direct-entry > span { color: var(--ink-soft, #6b7280); font-size: 0.84rem; font-weight: 850; }
.fan-direct-entry > small { color: var(--ink-soft, #6b7280); font-size: 0.74rem; font-weight: 700; text-align: center; }
.entry-fan-field input,
.entry-adjustment-amount-field input {
  min-height: 4rem;
  align-self: center;
  color: var(--felt-strong);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: center;
}

.stage2-session-dialog__delete { margin-inline-end: auto; }

.ahu-community-actions {
  display: grid;
  padding-block: 0.25rem 0.75rem;
}

.ahu-community-actions .button,
.ahu-developer-form .button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.ahu-community-actions .lucide-icon,
.ahu-developer-form .lucide-icon,
.stage2-session-dialog__delete .lucide-icon {
  width: 1rem;
  height: 1rem;
}

.ahu-developer__heading {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.ahu-developer__heading h1,
.ahu-developer__heading p { margin: 0; }
.ahu-developer__heading h1 { font-size: 1.25rem; }
.ahu-developer__heading p { margin-block-start: 0.2rem; color: var(--ink-muted); font-size: 0.84rem; }

.ahu-developer .ahu-topbar__title strong {
  overflow: visible;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.ahu-developer__return-table {
  display: inline-flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
}

.ahu-developer__return-table .lucide-icon {
  width: 1rem;
  height: 1rem;
}

.ahu-developer-form {
  display: grid;
  padding: 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  gap: 0.65rem;
  background: #ffffff;
}

.ahu-developer-form > label { font-weight: 850; }
.ahu-developer-form textarea {
  width: 100%;
  min-width: 0;
  padding: 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  resize: vertical;
  color: var(--ink);
  font: inherit;
}

.ahu-developer-form__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ahu-developer-form__meta > span { color: var(--ink-muted); font-size: 0.78rem; }
.ahu-developer-form__success { color: var(--felt-strong); font-weight: 800; }
.fan-formula {
  font-weight: 700;
  color: #38835a;
}

.entry-fan-field > .fan-formula,
.entry-fan-field > .fan-formula + .field-hint {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 7px;
  font-size: calc(0.8rem + 1px);
  line-height: 1.45;
}

.entry-fan-field > .fan-formula {
  margin-block-start: 0.55rem;
  background: #dff2e7;
  color: #185f43;
}

.entry-fan-field > .fan-formula + .field-hint {
  margin-block-start: 0.35rem;
  background: #fff0ca;
  color: #72500b;
}

.self-draw-fan-overrides {
  display: grid;
  gap: 0.65rem;
}

.self-draw-fan-overrides__toggle {
  display: inline-flex;
  width: 100%;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.self-draw-fan-overrides__toggle .lucide-icon { width: 1rem; height: 1rem; }
.self-draw-fan-overrides.is-expanded .self-draw-fan-overrides__toggle {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
  color: var(--felt-strong);
}

.self-draw-fan-overrides__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.self-draw-payer-fan {
  display: grid;
  min-width: 0;
  padding: 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  gap: 0.45rem;
  background: #ffffff;
}

.self-draw-payer-fan > span {
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.self-draw-payer-fan input {
  width: 100%;
  min-width: 0;
  min-height: 3.15rem;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  color: var(--felt-strong);
  font-size: 1.25rem;
  font-weight: 900;
  text-align: center;
}

.self-draw-payer-fan small {
  min-width: 0;
  padding: 0.35rem;
  border-radius: 6px;
  background: #dff2e7;
  font-size: calc(0.75rem + 1px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fan-transition-preview {
  display: grid;
  padding: 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  gap: 0.45rem;
  background: #ffffff;
}

.fan-transition-preview__label { font-size: 0.82rem; font-weight: 850; }
.fan-transition-preview__empty { color: var(--ink-muted); font-size: 0.82rem; }
.fan-transition-preview > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fan-transition-badge {
  display: inline-flex;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: calc(0.78rem + 1px);
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.fan-transition-badge--pull { background: #dff2e7; color: #185f43; }
.fan-transition-badge--kick { background: #ffe0da; color: #963b2f; }
.fan-transition-badge--settle { background: #dcecff; color: #255d91; }

.table-invite-dialog__prompt,
.table-invite-dialog__explanation { margin: 0; line-height: 1.55; text-align: start; }
.table-invite-dialog__back {
  justify-self: start;
  display: inline-flex;
  padding: 0;
  border: 0;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  color: var(--felt-strong);
  font: inherit;
  font-weight: 800;
}
.table-invite-dialog__back .lucide-icon { width: 1rem; height: 1rem; }
.table-invite-dialog__body > h3 { margin: 0; font-size: 1.1rem; }
.table-invite-mode-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.table-invite-mode-grid button {
  display: grid;
  min-width: 0;
  min-height: 7rem;
  padding: 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  place-items: center;
  gap: 0.35rem;
  background: #ffffff;
  color: var(--ink);
}
.table-invite-mode-grid button > span { display: grid; width: 2.2rem; height: 2.2rem; border-radius: 7px; place-items: center; background: var(--felt-soft); color: var(--felt-strong); }
.table-invite-mode-grid button strong { font-size: 1rem; }
.table-invite-mode-grid button small { color: var(--ink-muted); font-size: 0.78rem; line-height: 1.4; }
.table-invite-mode-grid button:disabled { opacity: 0.45; }

.spectator-login {
  display: grid;
  width: min(100% - 2rem, 28rem);
  min-height: 100dvh;
  margin-inline: auto;
  align-content: center;
  gap: 1rem;
}
.spectator-login__brand { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.spectator-login__brand h1,
.spectator-login__brand p { margin: 0; }
.spectator-login__brand h1 { font-size: 1.7rem; }
.spectator-login__brand > p:last-child { max-width: 24rem; color: var(--ink-muted); line-height: 1.6; }

@media (max-width: 520px) {
  .self-draw-fan-overrides__fields { grid-template-columns: 1fr; }
  .table-invite-mode-grid { grid-template-columns: 1fr; }
  .table-invite-mode-grid button { min-height: 5.5rem; }
}
.table-locked-banner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0.7rem;
  background: rgba(56, 131, 90, 0.12);
  color: #2c6647;
  font-weight: 700;
}
.table-locked-banner .lucide-icon { width: 1rem; height: 1rem; }
.table-locked-banner__mapping { margin-inline-start: auto; background: #ffffff; color: #2c6647; }

.archived-participant-dialog__warning {
  margin: 0;
  padding: 0.75rem;
  border-inline-start: 4px solid var(--concept-coral, #dc6e61);
  background: #fff4f1;
  color: #71352e;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.55;
}

.archived-participant-dialog__confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.5;
}

.archived-participant-dialog__confirm input { margin-block-start: 0.2rem; }

@media (max-width: 32rem) {
  .table-locked-banner__mapping { width: 100%; margin-inline-start: 0; justify-content: center; }
}
.table-command-bar__settle:disabled,
.table-score-diamond__player:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── 糊仔 遊戲感 layer ─────────────────────────────────────────────────────
   Final pass for Harry's "太平淡、唔夠好玩" note. Everything here is skin:
   colour, depth, texture, motion and type weight. No box-model or grid
   changes, so no screen can re-flow because of it. The through-line is the
   mahjong tile itself — ivory face, warm bottom edge, sitting on green felt. */

:root {
  --felt-deep: #114836;
  --coral: #e2603c;
  --gold: #e9b449;
  --tile-edge: #e0d0aa;
  --tile-face: linear-gradient(180deg, #fffef9 0%, #f7efdc 100%);
  --shadow-tile: 0 14px 26px -18px rgb(24 52 38 / 55%);
}

/* ---------------------------------------------------------------------------
   Concept A, applied app-wide.

   The Concept A tokens used to live only on `.ahu-flow-shell`, so every screen
   outside that shell — the table workspace, the 自摸／食糊／賞罰 entry dialog,
   settlement, the profile and 小氣簿 pages — silently fell back to the older
   cream palette above (#f5efe1 canvas, #ece3cf lines, #2f7d5b felt). One app
   rendered in two colour systems. These declarations re-point the shared legacy
   tokens at the Concept A values from DESIGN.md so both halves match; the
   `--concept-*` names are also published here so any surface can use them
   directly. `.ahu-flow-shell` keeps its own copy for specificity, and every
   value below is unchanged from DESIGN.md.
   --------------------------------------------------------------------------- */
:root {
  --concept-ink: #20352d;
  --concept-muted: #607068;
  --concept-paper: #fffefb;
  --concept-canvas: #f2f5f2;
  --concept-jade: #14614a;
  --concept-jade-dark: #0d4637;
  --concept-mint: #dff1e9;
  --concept-coral: #e96f58;
  --concept-coral-soft: #fde3dd;
  --concept-sun: #efb845;
  --concept-sun-soft: #fff0bf;
  --concept-sky: #4f8fbb;
  --concept-sky-soft: #dceef8;
  --concept-plum: #71558a;
  --concept-plum-soft: #eadff3;
  --concept-rose-soft: #f8dfe4;
  --concept-clay: #b8452f;
  --concept-clay-dark: #90301f;
  --concept-line: #dce4df;
  --concept-radius: 18px;
  --concept-shadow: 0 18px 40px -28px rgb(26 58 45 / 45%);

  --canvas: var(--concept-canvas);
  --surface: var(--concept-paper);
  --surface-subtle: #eef1ef;
  --surface-strong: #dbe4df;
  --ink: var(--concept-ink);
  --ink-muted: var(--concept-muted);
  --line: var(--concept-line);
  --line-strong: #c2d0c8;
  --felt: var(--concept-jade);
  --felt-strong: var(--concept-jade-dark);
  --felt-soft: var(--concept-mint);
  --felt-deep: var(--concept-jade-dark);
  --coral: var(--concept-coral);
  --gold: var(--concept-sun);
  --radius: 18px;
  --radius-small: 14px;
  /* The tile face keeps its two-stop gradient so seats still read as physical
     tiles; only the hues move from cream to Concept A paper. */
  --tile-edge: #cbd7d0;
  --tile-face: linear-gradient(180deg, #fffefb 0%, #f4f8f6 100%);
  --shadow: 0 10px 24px -18px rgb(26 58 45 / 42%);
  --shadow-tile: 0 14px 26px -18px rgb(20 60 45 / 45%);
}

/* Felt table cloth: the Concept A paper wash with a faint tile-dot weave. */
body {
  background-image:
    radial-gradient(circle at 50% -6rem, rgb(20 97 74 / 10%) 0, transparent 22rem),
    radial-gradient(rgb(20 97 74 / 5%) 1px, transparent 1px),
    linear-gradient(180deg, #e9eeeb 0, var(--canvas) 12rem, var(--canvas) 100%);
  background-size: 100% 100%, 22px 22px, 100% 100%;
}

/* Tappable cards read as tiles laid on the table: ivory face, warm bottom lip. */
.ahu-community-card,
.ahu-friend-row,
.ahu-opponent-list button,
.ahu-wide-link,
.ahu-table-card,
.ahu-auth-button,
.table-score-diamond__player {
  border-bottom-width: 4px;
  border-bottom-color: var(--tile-edge);
  background-image: var(--tile-face);
}

.ahu-auth-button--guest {
  border-bottom-color: var(--felt-deep);
  background-image: linear-gradient(180deg, #348c66 0%, var(--felt-strong) 100%);
}

/* 糊仔 greets you before the sign-in choices, so the first screen has a voice. */
.ahu-speech {
  position: relative;
  max-width: 17rem;
  margin: 0 0 0.35rem;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 18px 18px 18px 6px;
  background: var(--surface);
  color: var(--felt-strong);
  font-size: 0.94rem;
  font-weight: 800;
  box-shadow: var(--shadow);
}

/* The 糊 glyph is denser than 發 was; lift it clear of the mascot's eyes. */
.ahu-mascot > span { transform: translateY(-0.5rem); }
.ahu-mascot { font-size: 3rem; }
.ahu-mascot--compact { font-size: 1.3rem; }
.ahu-mascot--compact > span { transform: translateY(-0.22rem); }

.table-score-diamond__player {
  border-radius: 16px;
  box-shadow: var(--shadow-tile);
}

/* Green surfaces gain depth instead of reading as flat blocks of colour. */
.table-score-diamond__surface,
.ahu-ledger-summary,
.ahu-community-mark,
.stage2-local-banner--hero {
  background-image: linear-gradient(165deg, var(--felt) 0%, var(--felt-deep) 100%);
}

.table-score-diamond__surface {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 16px 28px -18px rgb(17 72 54 / 90%);
}

/* Primary actions get a solid bottom lip so they look pressable. */
.button--primary {
  border-color: var(--felt-deep);
  background-image: linear-gradient(180deg, #348c66 0%, var(--felt-strong) 100%);
  box-shadow: 0 3px 0 var(--felt-deep), 0 12px 22px -14px rgb(17 72 54 / 85%);
}

.button--primary:active {
  box-shadow: 0 1px 0 var(--felt-deep), 0 6px 14px -12px rgb(17 72 54 / 85%);
}

.table-command-bar__settle {
  background-image: linear-gradient(180deg, #f4794f 0%, var(--coral) 100%);
  box-shadow: 0 3px 0 #b8462a, 0 12px 22px -14px rgb(184 70 42 / 80%);
}

/* Every section title carries a small tile bullet — cheap, consistent, on-theme. */
.ahu-section-heading h2::before,
.final-section-heading > strong::before {
  display: inline-block;
  width: 0.62rem;
  height: 0.82rem;
  margin-inline-end: 0.45rem;
  border: 1px solid var(--felt-deep);
  border-bottom-width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #348c66 0%, var(--felt-strong) 100%);
  content: "";
  vertical-align: -0.08em;
}

/* 勝 / 負 / 和 carry their meaning in colour, not just position. */
.ahu-outcome-stats > div:nth-child(1) dd { color: var(--felt-strong); }
.ahu-outcome-stats > div:nth-child(2) dd { color: var(--red); }
.ahu-outcome-stats > div:nth-child(3) dd { color: var(--amber); }

/* Stat readouts sit on their own tile faces so the profile stops reading as a list. */
.ahu-profile-stats > div,
.statistics-summary > div,
.player-stat-card dl > div {
  border-radius: 12px;
  background: rgb(255 253 247 / 72%);
}

/* Scores are the thing people scan first: tabular, heavy, unmistakable. */
.table-score-diamond__player strong,
.ahu-ledger-summary strong,
.ahu-profile-stats dd,
.ahu-outcome-stats dd,
.statistics-summary dd,
.player-stat-card dd {
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.delta--positive { color: var(--felt-strong); }
.delta--negative { color: var(--red); }

/* Screens arrive with a small settle instead of snapping in.
   `backwards`, not `both`, on purpose. `both` keeps the final keyframe applied forever, and
   its final keyframe is `transform: translateY(0)` — an identity transform, but a transform
   all the same, so `.ahu-screen` stayed a containing block for `position: fixed` descendants.
   The bottom nav lives inside the screen, so it was pinned to the bottom of the *page*
   instead of the viewport: on 主頁 you had to scroll ~800px down before 好友 or 檔案 came
   into reach. `backwards` still supplies the `from` state before the animation starts, and
   the `to` state is the natural resting state anyway, so nothing is lost by not persisting it. */
.ahu-screen,
.table-view-panel {
  animation: ahu-screen-in 0.32s ease backwards;
}

@keyframes ahu-screen-in {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ahu-screen,
  .table-view-panel {
    animation: none;
  }
}

/* Two join methods fit side by side on a phone; stacking them wasted the screen
   and made the join step — Harry's least favourite — look longer than it is. */
.ahu-onboarding .fixture-segment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 14px;
}

.ahu-onboarding .fixture-segment label span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ahu-onboarding .fixture-segment .lucide-icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* The remaining tap targets join the tile family so the whole app feels like one set. */
.flow-choice,
.ahu-returning-action {
  border-bottom-width: 4px;
  border-bottom-color: var(--tile-edge);
  background-image: var(--tile-face);
}

.ahu-returning-action--primary {
  border-bottom-color: var(--felt-deep);
  background-image: linear-gradient(165deg, #348c66 0%, var(--felt-strong) 100%);
}

/* Suit-coloured icon chips: the eye finds the right row before reading it. */
.ahu-returning-action .ahu-list-icon { color: var(--felt-strong); }
.ahu-returning-action--primary .ahu-list-icon { color: #ffffff; }
.ahu-returning-action--logout .ahu-list-icon { color: var(--red); }

/* ── 大牌 / 成就 moment ────────────────────────────────────────────────────
   The reaction card that drops in after a big hand or an unlocked 牌型.
   Celebration for the winner, commiseration for whoever paid for it. It sits
   above the table but never blocks it: tapping anywhere dismisses. */
.table-moment {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  padding: 1.25rem;
  place-items: center;
  background: rgb(20 40 32 / 32%);
  animation: ahu-moment-veil 0.24s ease both;
}

.table-moment__card {
  position: relative;
  display: grid;
  width: min(100%, 20rem);
  padding: 1.5rem 1.35rem 1.25rem;
  border: 1.5px solid var(--line);
  border-bottom-width: 6px;
  border-bottom-color: var(--tile-edge);
  border-radius: 26px;
  justify-items: center;
  gap: 0.3rem;
  background-image: var(--tile-face);
  text-align: center;
  box-shadow: 0 30px 60px -28px rgb(16 40 30 / 80%);
  animation: ahu-moment-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.table-moment .ahu-mascot { margin-block-end: 0.75rem; }

.table-moment__kicker {
  margin: 0;
  color: var(--felt-strong);
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.table-moment__card strong {
  font-size: 1.75rem;
  font-weight: 950;
  line-height: 1.15;
}

.table-moment__card small {
  color: var(--ink-muted);
  font-size: 0.89rem;
  line-height: 1.45;
}

.table-moment__card .button {
  min-width: 8rem;
  margin-block-start: 1rem;
}

.table-moment__lead {
  margin: 0.15rem 0 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 700;
}

.table-moment--pity .table-moment__kicker { color: var(--red); }
.table-moment--pity .table-moment__card { border-bottom-color: #e3bfae; }

/* Falling tiles instead of generic confetti — cheaper and more on-theme. */
.table-moment__confetti {
  position: absolute;
  overflow: hidden;
  inset: 0;
}

.table-moment__confetti i {
  position: absolute;
  top: -3rem;
  width: 0.7rem;
  height: 0.95rem;
  border: 1px solid var(--tile-edge);
  border-bottom-width: 3px;
  border-radius: 3px;
  background: var(--tile-face);
  animation: ahu-moment-fall 2.8s linear infinite;
}

.table-moment__confetti i:nth-child(3n) { background-image: linear-gradient(180deg, #ffe9c9, #f6c458); }
.table-moment__confetti i:nth-child(4n) { background-image: linear-gradient(180deg, #ffd9cd, #ef8a68); }
.table-moment__confetti i:nth-child(1) { left: 4%; animation-delay: 0s; }
.table-moment__confetti i:nth-child(2) { left: 12%; animation-delay: 0.7s; }
.table-moment__confetti i:nth-child(3) { left: 20%; animation-delay: 1.4s; }
.table-moment__confetti i:nth-child(4) { left: 28%; animation-delay: 0.3s; }
.table-moment__confetti i:nth-child(5) { left: 36%; animation-delay: 1.1s; }
.table-moment__confetti i:nth-child(6) { left: 44%; animation-delay: 1.9s; }
.table-moment__confetti i:nth-child(7) { left: 52%; animation-delay: 0.5s; }
.table-moment__confetti i:nth-child(8) { left: 60%; animation-delay: 1.6s; }
.table-moment__confetti i:nth-child(9) { left: 68%; animation-delay: 0.9s; }
.table-moment__confetti i:nth-child(10) { left: 76%; animation-delay: 2.1s; }
.table-moment__confetti i:nth-child(11) { left: 84%; animation-delay: 0.2s; }
.table-moment__confetti i:nth-child(12) { left: 90%; animation-delay: 1.3s; }
.table-moment__confetti i:nth-child(13) { left: 96%; animation-delay: 0.6s; }
.table-moment__confetti i:nth-child(14) { left: 8%; animation-delay: 2.4s; }

@keyframes ahu-moment-veil {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ahu-moment-pop {
  0% { transform: translateY(1.5rem) scale(0.82); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes ahu-moment-fall {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(115vh) rotate(420deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .table-moment,
  .table-moment__card { animation: none; }
  .table-moment__confetti { display: none; }
}

/* An open, dismayed mouth reads as "唉…" far faster than an inverted smile. */
.ahu-mascot--sad .ahu-mascot__mouth {
  bottom: 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  transform: translateX(-50%);
}

.ahu-mascot--compact.ahu-mascot--sad .ahu-mascot__mouth {
  bottom: 0.24rem;
  width: 0.22rem;
  height: 0.22rem;
}

/* A pity card should not end in a celebratory green button. */
.table-moment--pity .table-moment__card .button {
  border-color: var(--line-strong);
  background-image: none;
  background-color: var(--surface-subtle);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--line-strong);
}

/* 惡夢: the counterweight to 成就解鎖 — same card shape, opposite mood. */
.ahu-section-note {
  margin: 0.35rem 0 0.65rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.ahu-nightmares .ahu-section-heading h2::before {
  border-color: #b8402c;
  background: linear-gradient(180deg, #ef7a5c 0%, var(--red) 100%);
}

.ahu-saved-hand--nightmare {
  border-color: #f0d5cb;
  background-image: linear-gradient(180deg, #fffdfb 0%, #fdf1eb 100%);
}

.ahu-saved-hand--nightmare > div > span {
  background: var(--red-soft);
  color: var(--red);
}

/* Signed net change per seat, shown after all guided-entry controls. */
.entry-outcome {
  display: grid;
  padding: 0.8rem 0.9rem;
  border: 1px solid #9bb7ad;
  border-radius: 8px;
  gap: 0.45rem;
  background: #eef7f3;
  color: var(--ink);
}

.entry-outcome__caption {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--felt-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

.entry-outcome__caption small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.entry-outcome__rows {
  display: grid;
  gap: 0;
}

.entry-outcome__rows > div {
  display: flex;
  min-width: 0;
  min-height: 2.25rem;
  padding-block: 0.35rem;
  border-top: 1px solid #cfe0d8;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.entry-outcome__rows span {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.2rem;
  font-size: 0.95rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.entry-outcome__rows span small {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.entry-outcome__rows strong {
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.entry-outcome__rows strong.delta--positive { color: var(--felt-strong); }
.entry-outcome__rows strong.delta--negative { color: var(--red); }

.entry-outcome__pending {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.89rem;
  font-weight: 600;
}

.entry-outcome__pending { font-weight: 500; }

.table-entry__settle-all {
  min-height: 40px;
  white-space: nowrap;
}

.opponent-ledger__sync-status {
  display: grid;
  gap: 4px;
  margin: 4px 0;
  color: var(--color-text-secondary, #5d6570);
  font-size: 0.72rem;
  line-height: 1.25;
}

.opponent-ledger__sync-status--pending { color: #166534; }
.opponent-ledger__sync-status--held,
.opponent-ledger__sync-status--rejected { color: #a52a2a; }

.opponent-ledger__sync-status button {
  min-height: 30px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
}

.table-settlement-batch-dialog {
  width: min(92vw, 520px);
}

.table-settlement-batch-list {
  display: grid;
  gap: 10px;
}

.table-settlement-batch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  background: #fff;
}

.table-settlement-batch-row.is-selected {
  border-color: #27734b;
  box-shadow: inset 3px 0 #27734b;
}

.table-settlement-batch-player {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.table-settlement-batch-player input {
  width: 20px;
  height: 20px;
}

.table-settlement-batch-player span {
  display: grid;
  min-width: 0;
}

.table-settlement-batch-player strong,
.table-settlement-batch-player small {
  overflow-wrap: anywhere;
}

.table-settlement-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(52px, 1fr));
  border: 1px solid #b7bec7;
  border-radius: 7px;
  overflow: hidden;
}

.table-settlement-choice button {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: #f6f7f8;
  color: #27313a;
  font-weight: 700;
}

.table-settlement-choice button + button { border-left: 1px solid #b7bec7; }
.table-settlement-choice button[aria-pressed="true"] { background: #235d43; color: #fff; }
.table-settlement-pending-label { color: #5d6570; font-size: 0.8rem; }

@media (max-width: 430px) {
  .table-entry__heading {
    align-items: flex-start;
  }

  .table-entry__settle-all {
    max-width: 120px;
  }

  .table-settlement-batch-row {
    grid-template-columns: 1fr;
  }

  .table-settlement-choice {
    width: 100%;
  }
}

/* ── 更新中 overlay ─────────────────────────────────────────────────────────
   Covers the table while an update is in flight so a second impatient tap
   cannot land on another button. Sits above the reaction card (z-index 40) and
   the fixed table tabs, and reuses .modal-backdrop--mandatory so it reads as a
   blocking dialog rather than a dismissible sheet. */
.table-sync-overlay {
  z-index: 60;
  cursor: progress;
}

.table-sync-overlay__card {
  display: grid;
  width: min(100%, 18rem);
  padding: 1.6rem 1.35rem 1.4rem;
  border-bottom-width: 6px;
  border-bottom-color: var(--tile-edge);
  border-radius: 26px;
  justify-items: center;
  gap: 0.35rem;
  background-image: var(--tile-face);
  text-align: center;
}

.table-sync-overlay__card strong {
  color: var(--ink);
  font-size: 1.12rem;
}

.table-sync-overlay__card small {
  color: var(--ink-muted);
  font-size: 0.89rem;
}

/* Three tiles flipping in sequence — the wait reads as 阿糊 writing the score
   down, not as a generic spinner. */
.table-sync-overlay__tiles {
  display: flex;
  margin-block-end: 0.85rem;
  gap: 0.4rem;
}

.table-sync-overlay__tiles i {
  width: 1.5rem;
  height: 2rem;
  border: 1.5px solid var(--tile-edge);
  border-bottom-width: 3px;
  border-radius: 7px;
  background-image: var(--tile-face);
  animation: ahu-sync-tile 1.2s ease-in-out infinite;
}

.table-sync-overlay__tiles i:nth-child(2) { animation-delay: 0.15s; }
.table-sync-overlay__tiles i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ahu-sync-tile {
  0%, 70%, 100% { transform: rotateY(0deg) translateY(0); }
  35% { transform: rotateY(180deg) translateY(-0.35rem); }
}

.table-sync-overlay__stalled {
  margin: 0.5rem 0 0.25rem;
  color: var(--ink-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.table-sync-overlay__card .button { margin-block-start: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  .table-sync-overlay__tiles i { animation-duration: 2.4s; }
}

/* ── 旁觀者 screen (?watch=<token>) ─────────────────────────────────────────
   A read-only view of somebody else's 牌局. It borrows the app's cream and
   felt palette so a shared link still looks like 麻雀糊仔, but it owns no
   control that can change a score. */
.spectator-page {
  display: grid;
  gap: 0.85rem;
  max-width: 34rem;
  margin-inline: auto;
  padding: 0.9rem 0.9rem 2.5rem;
}

.spectator-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--felt-soft);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
}

.spectator-banner svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--felt-strong); }

.spectator-section {
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.spectator-section h2 {
  margin: 0 0 0.7rem;
  color: var(--felt-strong);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.spectator-empty { margin: 0; color: var(--ink-muted); font-size: 0.88rem; }

/* The diamond mirrors the table screen's seating so a spectator recognises
   where everybody is sitting, but the seats are plain text, not buttons. */
.spectator-diamond {
  display: grid;
  position: relative;
  min-height: 15rem;
  align-items: center;
  justify-items: center;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 45%, var(--felt-soft), var(--surface-subtle));
  grid-template:
    ".    top    ." 1fr
    "left .   right" 1fr
    ".   bottom   ." 1fr / 1fr 1fr 1fr;
  gap: 0.4rem;
  padding: 0.75rem;
}

.spectator-diamond__round {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  color: var(--felt-strong);
  font-size: 0.85rem;
  font-weight: 700;
}

.spectator-diamond__seat {
  display: grid;
  position: relative;
  gap: 0.15rem;
  min-width: 5.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-block-end-width: 3px;
  border-radius: var(--radius-small);
  background: var(--surface);
  text-align: center;
}

.spectator-diamond__seat--top { grid-area: top; }
.spectator-diamond__seat--left { grid-area: left; }
.spectator-diamond__seat--right { grid-area: right; }
.spectator-diamond__seat--bottom { grid-area: bottom; }
.spectator-diamond__seat--empty { color: var(--ink-muted); opacity: 0.7; }

.spectator-diamond__seat span { font-size: 0.9rem; font-weight: 600; }
.spectator-diamond__seat strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.spectator-diamond__dealer {
  position: absolute;
  inset-block-start: -0.55rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  min-width: 1.35rem;
  padding: 0.1rem 0.3rem;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
}

.spectator-achievements { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.spectator-achievements li {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-block-end-width: 3px;
  border-radius: var(--radius-small);
  background: var(--amber-soft);
}

.spectator-achievements b { font-size: 1rem; }
.spectator-achievements span { color: var(--ink-muted); font-size: 0.85rem; }
.spectator-achievements em { color: var(--red); font-size: 0.82rem; font-style: normal; }

.spectator-records { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.spectator-record {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-block-end-width: 3px;
  border-radius: var(--radius-small);
  background: var(--surface-subtle);
}

.spectator-record--voided { opacity: 0.55; text-decoration: line-through; }

.spectator-record__head { display: flex; gap: 0.5rem; align-items: baseline; }

.spectator-record__label {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--felt-soft);
  color: var(--felt-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.spectator-record__round { color: var(--ink-muted); font-size: 0.75rem; }
.spectator-record__table { margin-inline-start: auto; color: var(--ink-muted); font-size: 0.72rem; font-weight: 800; }
.spectator-record__title { margin: 0; font-size: 0.95rem; font-weight: 600; }
.spectator-record__detail { margin: 0; color: var(--ink-muted); font-size: 0.83rem; }

.spectator-record__deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-block-start: 0.15rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.spectator-chat { display: grid; gap: 0.45rem; margin: 0 0 0.7rem; padding: 0; list-style: none; }
.spectator-chat li { font-size: 0.88rem; line-height: 1.45; }
.spectator-chat b { margin-inline-end: 0.35rem; color: var(--felt-strong); }

.spectator-chat-form { display: flex; gap: 0.5rem; }

.spectator-chat-form input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}

.spectator-foot { margin: 0; color: var(--ink-muted); font-size: 0.78rem; text-align: center; }

.spectator-page--error { place-content: center; min-height: 70vh; }

.spectator-error {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  padding: 1.5rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.spectator-error h1 { margin: 0; font-size: 1.25rem; }
.spectator-error p { margin: 0; color: var(--ink-muted); font-size: 0.92rem; line-height: 1.55; }

/* 分享牌局 dialog */
.table-share-link-dialog__url {
  overflow-wrap: anywhere;
  margin: 0.6rem 0 0.25rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-subtle);
  font-size: 0.82rem;
}

.table-share-link-dialog__meta { margin: 0; color: var(--ink-muted); font-size: 0.8rem; }
.table-share-link-dialog__status { margin: 0.4rem 0 0; color: var(--ink-muted); font-size: 0.85rem; }
.table-share-link-dialog__status--bad { color: var(--red); }

/* 廣東牌玩法設定 */
.cantonese-preset-settings,
.cantonese-setting-group {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
}

.cantonese-setting-group > span {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.cantonese-setting-options {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  gap: 0.45rem;
}

.cantonese-setting-option {
  display: grid;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  place-items: center;
  background: #ffffff;
  text-align: center;
  cursor: pointer;
}

.cantonese-setting-option.is-selected {
  border-color: var(--felt-strong);
  background: var(--felt-soft);
  box-shadow: inset 0 0 0 1px var(--felt-strong);
}

.cantonese-setting-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cantonese-setting-option span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.cantonese-setting-option strong { font-size: 0.9rem; }
.cantonese-setting-option small { color: var(--ink-muted); font-size: 0.75rem; }

.cantonese-preset-summary {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0;
  border-block: 1px solid var(--line);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cantonese-preset-summary span {
  color: var(--ink-muted);
  font-size: 0.78rem;
  text-align: end;
}

.cantonese-points-table summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cantonese-points-table summary small {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--amber-soft);
  color: #7b5614;
  font-size: 0.75rem;
}

.cantonese-points-dragger {
  display: grid;
  min-width: 0;
  padding: 0.2rem 0.75rem 0.8rem;
  gap: 0.45rem;
}

.cantonese-points-dragger > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  font-weight: 850;
}

.cantonese-points-dragger output {
  color: var(--felt-strong);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.cantonese-points-dragger input[type="range"] {
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  accent-color: var(--felt-strong);
  cursor: ew-resize;
}

.cantonese-points-dragger__limits {
  display: flex;
  min-width: 0;
  margin-top: -0.65rem;
  justify-content: space-between;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.cantonese-opponent-ledger__previous {
  display: flex;
  min-width: 0;
  min-height: 1.3rem;
  margin-block-start: 0.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.cantonese-opponent-ledger__previous strong {
  font-size: 0.78rem;
  font-weight: 850;
}

.cantonese-opponent-ledger__current {
  margin-block-start: 0.35rem;
}

.table-entry--cantonese .cantonese-settlement-panel {
  border-bottom: 0;
}

/* 拉劈／找數規則警告 */
.table-rule-warning-backdrop {
  position: fixed;
  z-index: 160;
  inset: 0;
  display: grid;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  place-items: center;
  background: rgb(27 35 30 / 68%);
}

.table-rule-warning-dialog {
  width: min(100%, 25rem);
  max-height: min(36rem, calc(100dvh - 2rem));
  border: 1px solid #d89b3c;
  box-shadow: 0 22px 60px rgb(18 27 21 / 35%);
}

.table-rule-warning-dialog .dialog__body {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  text-align: center;
}

.table-rule-warning-dialog .dialog__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.table-rule-warning-dialog .dialog__footer .button {
  min-width: 0;
}

.table-rule-warning-dialog .dialog__footer .button--primary {
  grid-column: 1 / -1;
}

.table-rule-warning-dialog__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  place-items: center;
  background: #fff1cf;
  color: #97620b;
}

.table-rule-warning-dialog__icon .lucide-icon { width: 1.4rem; height: 1.4rem; }
.table-rule-warning-dialog h2,
.table-rule-warning-dialog p { margin: 0; }
.table-rule-warning-dialog p { font-size: 1rem; font-weight: 800; line-height: 1.55; }
.table-rule-warning-dialog small { color: var(--ink-muted); line-height: 1.5; }

/* 結算：飯錢輸入後才顯示合併摘要及最後付款建議 */
.final-net-summary,
.final-payment-plan {
  display: grid;
  min-width: 0;
  gap: 0.65rem;
}

.final-net-summary__list {
  display: grid;
  min-width: 0;
  border-block: 1px solid var(--line);
}

.final-net-summary__list article {
  display: grid;
  min-width: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(4rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.final-net-summary__list article:last-child { border-bottom: 0; }
.final-net-summary__list article > strong { overflow-wrap: anywhere; }
.final-net-summary__list article > p { display: grid; min-width: 0; margin: 0; gap: 0.15rem; }
.final-net-summary__list article > p span { font-size: 0.8rem; line-height: 1.35; }
.final-net-summary__list article > p small { color: var(--ink-muted); }
.final-net-summary__list article > b { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.final-payment-plan {
  padding: 0.85rem;
  border: 1px solid #73a986;
  border-radius: 8px;
  background: #eaf5ed;
}

.final-payment-plan__heading { display: grid; gap: 0.1rem; }
.final-payment-plan__heading small { color: #4f785d; font-size: 0.75rem; font-weight: 850; }
.final-payment-plan__heading h3 { color: #194b30; font-size: 1.15rem; }

.final-payment-plan .final-transfer-list { gap: 0.5rem; }
.final-payment-plan .final-transfer-list p {
  min-height: 3.4rem;
  padding: 0.7rem;
  border: 1px solid #c8dfcf;
  border-radius: 7px;
  background: #ffffff;
  font-size: 0.98rem;
  font-weight: 750;
}

.final-payment-plan .final-transfer-list p span { color: #405a49; }
.final-payment-plan .final-transfer-list p span b { color: #173f29; font-size: 1.12rem; }
.final-payment-plan .final-rounding-note { margin: 0; color: #587060; }

@media (max-width: 24rem) {
  .merged-table-switch__action { display: none; }
  .merged-table-switch { grid-template-columns: 2.35rem minmax(0, 1fr) 1.25rem; }
  .cantonese-preset-summary { align-items: start; flex-direction: column; }
  .cantonese-preset-summary span { text-align: start; }
  .final-net-summary__list article { grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr); }
  .final-net-summary__list article > b { grid-column: 2; }
}

/* Concept A production shell: shared chrome, main page, and community surfaces. */
.ahu-flow-shell {
  --concept-ink: #20352d;
  --concept-muted: #607068;
  --concept-paper: #fffefb;
  --concept-canvas: #f2f5f2;
  --concept-jade: #14614a;
  --concept-jade-dark: #0d4637;
  --concept-mint: #dff1e9;
  --concept-coral: #e96f58;
  --concept-coral-soft: #fde3dd;
  --concept-sun: #efb845;
  --concept-sun-soft: #fff0bf;
  --concept-sky: #4f8fbb;
  --concept-sky-soft: #dceef8;
  --concept-plum: #71558a;
  --concept-plum-soft: #eadff3;
  --concept-rose-soft: #f8dfe4;
  --concept-clay: #b8452f;
  --concept-clay-dark: #90301f;
  --concept-radius: 18px;
  --concept-shadow: 0 18px 40px -28px rgb(26 58 45 / 45%);
}

.flow-layout.ahu-flow-shell[data-flow-screen="returning"],
.flow-layout.ahu-flow-shell[data-flow-screen="communities"],
.flow-layout.ahu-flow-shell[data-flow-screen="home"],
.flow-layout.ahu-flow-shell[data-flow-screen="features"] {
  width: min(100%, 75rem);
}

.hulo-action-graphic {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.ahu-brandbar {
  position: sticky;
  z-index: 18;
  top: 0;
  display: flex;
  min-height: 4.5rem;
  margin: -1.15rem -1.1rem 0;
  padding: max(0.65rem, env(safe-area-inset-top)) 1.1rem 0.65rem;
  border-bottom: 1px solid rgb(30 73 57 / 9%);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgb(255 254 251 / 94%);
  backdrop-filter: blur(18px);
}

.ahu-brandbar__brand,
.ahu-brandbar__profile {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--concept-ink);
}

.ahu-brandbar__brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  text-align: start;
}

.ahu-brandbar__brand > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.ahu-brandbar__brand strong {
  font-size: 1.08rem;
  font-weight: 950;
}

.ahu-brandbar__brand small {
  color: var(--concept-muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.ahu-brandbar__mark {
  position: relative;
  display: grid;
  width: 2.65rem;
  height: 2.9rem;
  flex: none;
  border: 2px solid #dfcfab;
  border-bottom-width: 6px;
  border-radius: 12px;
  place-items: center;
  background: #fffaf0;
}

.ahu-brandbar__mark::before {
  width: 1.15rem;
  height: 1.15rem;
  border: 4px solid var(--concept-jade);
  border-radius: 50%;
  content: "";
}

.ahu-brandbar__mark i {
  position: absolute;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--concept-coral);
}

.ahu-avatar--brandbar {
  width: 2.65rem;
  height: 2.65rem;
  border-color: var(--concept-paper);
  box-shadow: 0 0 0 1px #d7e0da;
}

.ahu-main-page {
  padding: 1.15rem 1.1rem calc(7rem + env(safe-area-inset-bottom));
  gap: 1.5rem;
  background: var(--concept-canvas);
  color: var(--concept-ink);
}

.ahu-main-welcome {
  display: flex;
  min-width: 0;
  padding-top: 0.45rem;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.ahu-main-welcome p,
.ahu-main-welcome h1,
.ahu-main-quick header p,
.ahu-main-quick header h2,
.ahu-main-destinations header p,
.ahu-main-destinations header h2 {
  margin: 0;
}

.ahu-main-welcome p {
  margin-bottom: 0.2rem;
  color: var(--concept-muted);
  font-size: 0.95rem;
  font-weight: 750;
}

.ahu-main-welcome h1 {
  overflow-wrap: anywhere;
  font-size: 2rem;
  font-weight: 950;
  line-height: 1.25;
}

.ahu-main-table {
  position: relative;
  isolation: isolate;
  min-height: 21.75rem;
  overflow: hidden;
  border: 1px solid var(--concept-jade-dark);
  border-bottom: 7px solid var(--concept-jade-dark);
  border-radius: var(--concept-radius);
  background: var(--concept-jade);
  box-shadow: 0 30px 60px -35px rgb(9 60 45 / 85%);
  color: #fff;
}

/* The hero banner carries the answer to "is a 牌枱 running right now?", so the
   two states do not share a background: jade means go back to a live table,
   clay means there is nothing to go back to and the card is an invitation to
   start one. Colour, not just wording, because this is read at a glance. */
.ahu-main-table.is-empty {
  border-color: var(--concept-clay-dark);
  background: var(--concept-clay);
  box-shadow: 0 30px 60px -35px rgb(96 32 20 / 85%);
}

.ahu-main-table.is-empty .ahu-main-eyebrow { color: #ffdccf; }
.ahu-main-table.is-empty .ahu-main-eyebrow i {
  background: #ffc4a8;
  box-shadow: 0 0 0 4px rgb(255 196 168 / 18%);
}
.ahu-main-table.is-empty .ahu-main-table__copy > small { color: #f7d3c6; }
.ahu-main-table.is-empty dt { color: #eebfaf; }
.ahu-main-table.is-empty .ahu-main-table__bubble { color: var(--concept-clay-dark); }

.ahu-main-table::after {
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -5rem;
  width: 19rem;
  height: 19rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 50%;
  content: "";
}

.ahu-main-table__copy {
  position: relative;
  z-index: 2;
  display: grid;
  width: 70%;
  padding: 2.3rem;
  justify-items: start;
}

.ahu-main-eyebrow {
  display: inline-flex;
  margin: 0 0 1rem;
  align-items: center;
  gap: 0.55rem;
  color: #cfeade;
  font-size: 0.9rem;
  font-weight: 850;
}

.ahu-main-eyebrow i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #55c491;
  box-shadow: 0 0 0 4px rgb(85 196 145 / 15%);
}

.ahu-main-table__copy > small {
  color: #c5e2d6;
  font-size: 1rem;
  font-weight: 750;
}

.ahu-main-table h2 {
  margin: 0.1rem 0 1rem;
  font-size: 3rem;
  font-weight: 950;
  line-height: 1.1;
}

.ahu-main-table dl {
  display: flex;
  margin: 0 0 1.4rem;
}

.ahu-main-table dl div {
  display: grid;
  min-width: 5.7rem;
  padding-right: 1rem;
  gap: 0.2rem;
}

.ahu-main-table dl div + div {
  padding-left: 1rem;
  border-left: 1px solid rgb(255 255 255 / 18%);
}

.ahu-main-table dt {
  color: #acd1c1;
  font-size: 0.78rem;
  font-weight: 750;
}

.ahu-main-table dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.ahu-main-table__continue {
  display: inline-flex;
  min-height: 3.25rem;
  padding: 0 1.35rem;
  border: 0;
  border-bottom: 4px solid #d7a72c;
  border-radius: 14px;
  align-items: center;
  gap: 0.6rem;
  background: #f4c95d;
  box-shadow: 0 16px 25px -18px rgb(2 29 21 / 60%);
  color: #3d300c;
  font-size: 1.02rem;
  font-weight: 950;
  text-decoration: none;
}

.ahu-main-table__continue .lucide-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.ahu-main-table__mascot {
  position: absolute;
  z-index: 1;
  right: clamp(0.75rem, 5vw, 4rem);
  bottom: 1.25rem;
  width: min(20vw, 11.25rem);
  filter: drop-shadow(0 20px 18px rgb(5 42 31 / 35%));
}

.ahu-main-table__bubble {
  position: absolute;
  z-index: 3;
  top: 2rem;
  right: clamp(1rem, 8vw, 7rem);
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid #e5d6b8;
  border-radius: 15px 15px 4px;
  background: #fffaf0;
  color: var(--concept-jade-dark);
  font-size: 0.84rem;
  font-weight: 850;
  transform: rotate(2deg);
}

.ahu-main-quick,
.ahu-main-destinations {
  display: grid;
  gap: 0.85rem;
}

.ahu-main-quick header p,
.ahu-main-destinations header p {
  color: var(--concept-jade);
  font-size: 0.84rem;
  font-weight: 900;
}

.ahu-main-quick header h2,
.ahu-main-destinations header h2 {
  margin-top: 0.15rem;
  font-size: 1.45rem;
  font-weight: 950;
}

.ahu-main-quick > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.ahu-main-quick--three > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ahu-main-quick__action {
  display: grid;
  min-width: 0;
  min-height: 6.75rem;
  padding: 1rem;
  border: 1px solid transparent;
  border-bottom-width: 4px;
  border-radius: var(--concept-radius);
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  color: var(--concept-ink);
  text-align: start;
}

.ahu-main-quick__action--create {
  border-color: #f2bfb4;
  border-bottom-color: #e2a294;
  background: var(--concept-coral-soft);
}

.ahu-main-quick__action--join {
  border-color: #bad9e9;
  border-bottom-color: #8ebfd9;
  background: var(--concept-sky-soft);
}

.ahu-main-quick__action--communities {
  border-color: #b7d9ca;
  border-bottom-color: #80b69f;
  background: var(--concept-mint);
}

.ahu-main-quick__action > span:first-child {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 16px;
  place-items: center;
  background: var(--concept-coral);
  color: #fff;
}

.ahu-main-quick__action--join > span:first-child { background: var(--concept-sky); }
.ahu-main-quick__action--communities > span:first-child { background: var(--concept-jade); }
.ahu-main-quick__action > span:nth-child(2) { display: grid; min-width: 0; gap: 0.2rem; }
.ahu-main-quick__action strong { font-size: 1.14rem; font-weight: 950; }
.ahu-main-quick__action small { color: var(--concept-muted); font-size: 0.88rem; font-weight: 700; }
.ahu-main-quick__action .lucide-icon { width: 1.15rem; height: 1.15rem; }

.ahu-main-destinations__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.ahu-main-destination {
  display: grid;
  min-width: 0;
  min-height: 12rem;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid transparent;
  border-bottom-width: 4px;
  border-radius: var(--concept-radius);
  align-content: start;
  gap: 0.5rem;
  color: var(--concept-ink);
  text-align: start;
}

.ahu-main-destination > span { display: grid; gap: 0.15rem; }
.ahu-main-destination strong { font-size: 1.18rem; font-weight: 950; }
.ahu-main-destination small { color: var(--concept-muted); font-size: 0.88rem; font-weight: 700; }
.ahu-main-destination .hulo-action-graphic { height: 6.8rem; order: 2; }
.ahu-main-destination.is-mint { border-color: #b7ddce; border-bottom-color: #8ec9b2; background: #dcf1e8; }
.ahu-main-destination.is-coral { border-color: #f3beb4; border-bottom-color: #df9c8e; background: var(--concept-coral-soft); }
.ahu-main-destination.is-sun { border-color: #ead486; border-bottom-color: #d2b352; background: var(--concept-sun-soft); }
.ahu-main-destination.is-sky { border-color: #b8d9ea; border-bottom-color: #8abdd7; background: var(--concept-sky-soft); }
.ahu-main-destination.is-plum { border-color: #ceb9df; border-bottom-color: #b092c8; background: var(--concept-plum-soft); }
.ahu-main-destination.is-rose { border-color: #e8b8c2; border-bottom-color: #d494a2; background: var(--concept-rose-soft); }

.ahu-main-logout {
  display: inline-flex;
  justify-self: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border: 0;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  color: #a24b3f;
  font-weight: 850;
}

.ahu-main-logout .lucide-icon { width: 1rem; }

.stage2-concept-main { padding-bottom: 2.5rem; }

.stage2-brand-mode {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
  color: var(--concept-jade);
}

.stage2-brand-mode > .lucide-icon { width: 1.15rem; height: 1.15rem; }
.stage2-brand-mode > span { display: grid; gap: 0.05rem; text-align: end; }
.stage2-brand-mode strong { font-size: 0.82rem; font-weight: 950; }
.stage2-brand-mode small { color: var(--concept-muted); font-size: 0.7rem; font-weight: 750; }

.stage2-concept-main__notice {
  width: min(100%, 36rem);
  margin: -0.4rem 0 0;
  border-color: #b8d9ea;
  background: var(--concept-sky-soft);
  color: #315f79;
}

.stage2-main-sessions {
  display: grid;
  min-width: 0;
  gap: 0.85rem;
}

.stage2-main-sessions > header {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.15rem 0.75rem;
}

.stage2-main-sessions > header p,
.stage2-main-sessions > header h2 { margin: 0; }
.stage2-main-sessions > header p { color: var(--concept-jade); font-size: 0.84rem; font-weight: 900; }
.stage2-main-sessions > header h2 { font-size: 1.45rem; font-weight: 950; }
.stage2-main-sessions > header span { grid-column: 2; grid-row: 1 / span 2; color: var(--concept-muted); font-size: 0.84rem; font-weight: 850; }
.stage2-main-sessions .ahu-returning-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage2-main-sessions .ahu-returning-action { min-height: 4.7rem; border-radius: 8px; }
.stage2-main-destinations .ahu-main-destinations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage2-concept-main__storage-note { margin: -0.25rem 0 0; }

.ahu-communities-page {
  gap: 1rem;
  background: var(--concept-canvas);
}

.ahu-communities-hero {
  display: grid;
  min-height: 12.5rem;
  padding: 1.4rem 1.6rem;
  overflow: hidden;
  border: 1px solid #badacb;
  border-bottom: 5px solid #8fc5ae;
  border-radius: var(--concept-radius);
  grid-template-columns: minmax(14rem, 1fr) 12rem auto;
  align-items: center;
  gap: 1rem;
  background: #dcf0e7;
}

.ahu-communities-hero p,
.ahu-communities-hero h1 { margin: 0; }
.ahu-communities-hero p { color: var(--concept-jade); font-size: 0.84rem; font-weight: 900; }
.ahu-communities-hero h1 { margin: 0.2rem 0 0.35rem; font-size: 2.15rem; font-weight: 950; }
.ahu-communities-hero span { color: var(--concept-muted); font-size: 0.9rem; font-weight: 750; }
.ahu-communities-hero > .hulo-action-graphic { width: 12rem; }
.ahu-communities-hero__actions { display: flex; gap: 0.5rem; }
.ahu-communities-hero__actions .button { min-height: 3rem; gap: 0.35rem; white-space: nowrap; }

.ahu-communities-page .ahu-community-list {
  width: min(100%, 70rem);
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.ahu-communities-page .community-variant-heading { grid-column: 1 / -1; }
.ahu-communities-page .ahu-community-card {
  min-height: 4.75rem;
  padding: 0.55rem 0.65rem;
  border-bottom-width: 4px;
  border-radius: 8px;
  grid-template-columns: 2.7rem minmax(0, 1fr) 1rem;
  box-shadow: var(--concept-shadow);
}

.ahu-communities-page .ahu-community-mark { width: 2.6rem; height: 2.85rem; border-bottom: 4px solid #0d4637; }

.ahu-communities-empty {
  display: grid;
  grid-column: 1 / -1;
  min-height: 18rem;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  color: var(--concept-muted);
}

.ahu-communities-empty .hulo-action-graphic { width: 9rem; }
.ahu-communities-empty strong { color: var(--concept-ink); font-size: 1.2rem; }

.flow-community.ahu-screen {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--concept-canvas);
}

.flow-community .ahu-topbar { order: 0; }
.flow-community .ahu-community-hero { order: 1; }
.flow-community .ahu-community-invite { order: 2; }
.flow-community .ahu-community-tabs { order: 3; }
.flow-community .ahu-tables-section { order: 4; }
.flow-community .ahu-members-band { order: 5; }
.flow-community .community-fan-entry { order: 6; }
.flow-community .ahu-community-actions { order: 7; }
.flow-community .ahu-prototype-note { order: 8; }
.flow-community .ahu-bottom-nav { order: 9; }

.flow-community .ahu-community-hero {
  position: relative;
  display: grid;
  min-height: 13rem;
  padding: 1.5rem 1.7rem;
  overflow: hidden;
  border: 1px solid #badacb;
  border-bottom: 5px solid #8fc5ae;
  border-radius: var(--concept-radius);
  grid-template-columns: minmax(15rem, 1fr) 13rem auto;
  align-items: center;
  gap: 1rem;
  background: #dcf0e7;
}

.ahu-community-hero__copy { min-width: 0; }
.flow-community .ahu-community-hero h1 { font-size: 2.2rem; }
.flow-community .ahu-community-hero__copy > span { color: var(--concept-muted); font-size: 0.9rem; font-weight: 750; }
.ahu-community-hero__art { width: 13rem; }
.flow-community .ahu-community-mark--large { width: 4.6rem; height: 5.1rem; border-bottom-width: 7px; font-size: 1.7rem; }

.flow-community .ahu-community-invite {
  display: grid;
  width: min(100%, 44rem);
  min-width: 0;
  margin-inline: auto;
  padding: 0.9rem 1rem;
  border: 1.5px solid #b9d8cf;
  border-inline-start: 5px solid var(--concept-coral);
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 9rem);
  align-items: center;
  gap: 1rem;
  background: #edf7f4;
  box-shadow: 0 12px 28px -26px rgb(22 73 56 / 55%);
}

.ahu-community-invite__copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 0.18rem;
}

.ahu-community-invite__copy p,
.ahu-community-invite__copy h2 { margin: 0; }
.ahu-community-invite__copy h2 { font-size: 1.25rem; font-weight: 950; }
.ahu-community-invite__copy > p:not(.ahu-kicker) {
  color: var(--concept-muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.ahu-community-invite__copy .field-label { margin-block-start: 0.4rem; }
.ahu-community-invite__copy .flow-invite-code {
  margin: 0.08rem 0 0;
  font-size: 1.75rem;
  font-weight: 950;
}

.flow-community .ahu-community-invite .flow-qr {
  width: min(100%, 9rem);
  margin: 0;
  justify-self: end;
  gap: 0.22rem;
}

.ahu-community-invite__rotate {
  grid-column: 1 / -1;
  justify-self: start;
}

.flow-community .ahu-community-invite .flow-qr--online {
  min-height: 0;
  padding: 0.45rem;
  background: #ffffff;
}

.flow-community .ahu-community-invite .flow-qr figcaption,
.flow-community .ahu-community-invite .flow-qr__fallback {
  font-size: 0.7rem;
  line-height: 1.25;
}

.ahu-community-tabs {
  display: grid;
  width: min(100%, 32rem);
  min-height: 3.5rem;
  margin-inline: auto;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #e7ece8;
}

.ahu-community-tabs a {
  display: inline-flex;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--concept-muted);
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
}

.ahu-community-tabs a:first-child { background: var(--concept-paper); color: var(--concept-jade); box-shadow: var(--concept-shadow); }
.ahu-community-tabs b { min-width: 1.35rem; padding: 0.1rem 0.35rem; border-radius: 999px; background: #d5e2dc; font-size: 0.72rem; text-align: center; }

.flow-community__section {
  scroll-margin-top: 5rem;
  border-radius: var(--concept-radius);
}

.flow-community .flow-table-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.flow-community .ahu-table-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--concept-radius);
  background: var(--concept-paper);
  box-shadow: var(--concept-shadow);
}

.flow-community .ahu-table-card > a,
.flow-community .ahu-table-card > button {
  min-height: 6.4rem;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-radius: 0;
  grid-template-columns: 4.8rem minmax(0, 1fr) 1rem;
  gap: 0.75rem;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.ahu-table-card__board {
  position: relative;
  display: block;
  width: 4rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border: 4px solid #b89259;
  border-radius: 12px;
  background: var(--concept-jade);
  box-shadow: 0 15px 24px -18px rgb(11 53 39 / 72%);
}

.ahu-table-card__board i {
  position: absolute;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--concept-paper);
  border-radius: 50%;
  place-items: center;
  background: #e1eee8;
  color: var(--concept-jade);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 950;
}

.ahu-table-card__board .is-top { top: -0.8rem; left: 50%; transform: translateX(-50%); }
.ahu-table-card__board .is-right { top: 50%; right: -0.8rem; transform: translateY(-50%); }
.ahu-table-card__board .is-bottom { bottom: -0.8rem; left: 50%; transform: translateX(-50%); }
.ahu-table-card__board .is-left { top: 50%; left: -0.8rem; transform: translateY(-50%); }
.ahu-table-card__board > b { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / 74%); font-size: 0.8rem; }

.flow-community .ahu-table-card__main > small,
.flow-community .ahu-table-card__main > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-new-table-strip {
  display: grid;
  width: 100%;
  min-height: 5.6rem;
  margin-top: 0.85rem;
  padding: 0.35rem 0.85rem;
  overflow: hidden;
  border: 1px solid #b8d9ea;
  border-bottom: 4px solid #8abdd7;
  border-radius: var(--concept-radius);
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  gap: 0.7rem;
  background: var(--concept-sky-soft);
  color: var(--concept-ink);
  text-align: start;
}

.ahu-new-table-strip .hulo-action-graphic { width: 4.5rem; }
.ahu-new-table-strip > span { display: grid; gap: 0.15rem; }
.ahu-new-table-strip small { color: var(--concept-muted); font-size: 0.78rem; font-weight: 750; }
.ahu-new-table-strip strong { font-size: 1rem; font-weight: 950; }
.ahu-new-table-strip > .lucide-icon { width: 1.25rem; color: var(--concept-sky); }

.ahu-bottom-nav {
  right: 0.75rem;
  bottom: max(0.65rem, env(safe-area-inset-bottom));
  left: 0.75rem;
  width: auto;
  min-height: 4.25rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgb(43 74 62 / 15%);
  border-radius: 18px;
  grid-template-columns: 1fr 1fr 1fr 3.5rem 1fr 1fr;
  background: rgb(255 254 251 / 96%);
  box-shadow: 0 14px 42px -18px rgb(21 55 42 / 45%);
  transform: none;
  backdrop-filter: blur(18px);
}

.ahu-bottom-nav button {
  min-height: 3rem;
  border-radius: 10px;
}

.ahu-bottom-nav .ahu-bottom-nav__create {
  width: 3.25rem;
  min-width: 3.25rem;
  height: 3.25rem;
  min-height: 3.25rem;
  margin: -1.35rem auto 0;
  border: 4px solid var(--concept-paper);
  border-radius: 50%;
  background: var(--concept-coral);
  box-shadow: 0 11px 24px -12px rgb(188 70 51 / 75%);
  color: #fff;
}

.ahu-bottom-nav .ahu-bottom-nav__create .lucide-icon { width: 1.4rem; height: 1.4rem; }

@media (min-width: 56.25rem) {
  .flow-layout.ahu-flow-shell[data-flow-screen="returning"],
  .flow-layout.ahu-flow-shell[data-flow-screen="communities"],
  .flow-layout.ahu-flow-shell[data-flow-screen="home"],
  .flow-layout.ahu-flow-shell[data-flow-screen="friends"],
  .flow-layout.ahu-flow-shell[data-flow-screen="petty-book"],
  .flow-layout.ahu-flow-shell[data-flow-screen="profile"],
  .flow-layout.ahu-flow-shell[data-flow-screen="badges"],
  .flow-layout.ahu-flow-shell[data-flow-screen="features"],
  .flow-layout.ahu-flow-shell[data-flow-screen="developer"] {
    width: min(100%, 78rem);
    padding-left: 0;
  }

  .flow-layout.ahu-flow-shell[data-flow-screen="returning"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="communities"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="home"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="friends"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="petty-book"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="profile"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="badges"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="features"] > .ahu-screen,
  .flow-layout.ahu-flow-shell[data-flow-screen="developer"] > .ahu-screen {
    padding-left: 6.5rem;
  }

  .ahu-bottom-nav {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0.9rem;
    width: 4.25rem;
    min-height: 24rem;
    padding: 0.7rem 0.35rem;
    border-radius: 18px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(0, 1fr));
    transform: translateY(-50%);
  }

  .ahu-bottom-nav .ahu-bottom-nav__create {
    margin: 0 auto;
  }
}

@media (max-width: 56.24rem) {
  .ahu-communities-page .ahu-community-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahu-communities-hero { grid-template-columns: minmax(14rem, 1fr) 10rem; }
  .ahu-communities-hero__actions { grid-column: 1 / -1; }
  .ahu-communities-hero > .hulo-action-graphic { width: 10rem; }
  .flow-community .ahu-community-hero { grid-template-columns: minmax(14rem, 1fr) 11rem auto; }
  .ahu-community-hero__art { width: 11rem; }
}

@media (max-width: 43.75rem) {
  .ahu-main-page { padding-inline: 0.85rem; }
  .ahu-brandbar { margin-inline: -0.85rem; padding-inline: 0.85rem; }
  .ahu-main-welcome { align-items: start; }
  .ahu-main-welcome h1 { font-size: 1.55rem; }
  .ahu-main-table { min-height: 23.5rem; }
  .ahu-main-table__copy { width: 100%; padding: 1.3rem; }
  .ahu-main-table h2 { font-size: 2.2rem; }
  .ahu-main-table dl div { min-width: 0; padding-right: 0.7rem; }
  .ahu-main-table dl div + div { padding-left: 0.7rem; }
  .ahu-main-table__mascot { right: 0.7rem; bottom: 0.65rem; width: 7.4rem; }
  .ahu-main-table__bubble { top: auto; right: 1rem; bottom: 8.8rem; }
  .ahu-main-quick > div,
  .ahu-main-quick--three > div { grid-template-columns: minmax(0, 1fr); }
  .ahu-main-destinations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahu-main-destination { min-height: 11rem; padding: 0.85rem; }
  .ahu-main-destination .hulo-action-graphic { height: 6.1rem; }
  .stage2-main-sessions .ahu-returning-actions { grid-template-columns: minmax(0, 1fr); }
  .stage2-main-destinations .ahu-main-destinations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahu-communities-hero { min-height: 12rem; padding: 1.1rem; grid-template-columns: minmax(0, 1fr) 7rem; }
  .ahu-communities-hero h1 { font-size: 1.7rem; }
  .ahu-communities-hero > .hulo-action-graphic { width: 7rem; }
  .ahu-communities-page .ahu-community-list { grid-template-columns: minmax(0, 1fr); }
  .flow-community .ahu-community-hero { min-height: 12rem; padding: 1.1rem; grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: 0.7rem; }
  .flow-community .ahu-community-hero__copy { align-self: start; }
  .flow-community .ahu-community-hero h1 { font-size: 1.65rem; line-height: 1.16; white-space: normal; }
  .ahu-community-hero__art { width: 5.5rem; }
  .flow-community .ahu-community-mark--large { position: absolute; right: 1rem; bottom: 1rem; width: 3.2rem; height: 3.55rem; font-size: 1.15rem; }
  .flow-community .ahu-community-invite {
    padding: 0.75rem 0.8rem;
    grid-template-columns: minmax(0, 1fr) 8rem;
    gap: 0.7rem;
  }
  .ahu-community-invite__copy h2 { font-size: 1.1rem; }
  .ahu-community-invite__copy > p:not(.ahu-kicker) { font-size: 0.76rem; }
  .ahu-community-invite__copy .flow-invite-code { font-size: 1.35rem; }
  .flow-community .ahu-community-invite .flow-qr { width: 8rem; }
  .flow-community .flow-table-list { grid-template-columns: minmax(0, 1fr); }
  .flow-community .ahu-table-card > a,
  .flow-community .ahu-table-card > button { min-height: 6.1rem; padding: 0.65rem 0.75rem; grid-template-columns: 4.25rem minmax(0, 1fr) 0.9rem; gap: 0.65rem; text-align: start; }
  .flow-community .ahu-table-card__board { width: 3.7rem; }
  .ahu-new-table-strip { grid-template-columns: 4.25rem minmax(0, 1fr) 2rem; }
  .ahu-new-table-strip .hulo-action-graphic { width: 4.25rem; }
}

@media (max-width: 24.4rem) {
  .ahu-brandbar__brand small { display: none; }
  .stage2-brand-mode small { display: none; }
  .ahu-main-welcome h1 { font-size: 1.35rem; }
  .ahu-main-table h2 { font-size: 2rem; }
  .ahu-main-table dl { gap: 0.45rem; }
  .ahu-main-table dl div { padding: 0; }
  .ahu-main-table dl div + div { padding: 0; border: 0; }
  .ahu-main-table dd { font-size: 0.86rem; }
  .ahu-main-destination strong { font-size: 1rem; }
  .ahu-main-destination small { font-size: 0.8rem; }
  .ahu-community-tabs a { padding-inline: 0.25rem; font-size: 0.78rem; }
  .flow-community .ahu-community-invite {
    grid-template-columns: minmax(0, 1fr) 7.25rem;
    gap: 0.5rem;
  }
  .flow-community .ahu-community-invite .flow-qr { width: 7.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ahu-main-destination .hulo-action-graphic { transition: none; }
}

/* -------------------------------------------------------------------------- */
/* Concept A production table                                                  */
/* -------------------------------------------------------------------------- */

.table-fixture-page {
  width: min(100%, 78rem);
  background: transparent;
}

.table-workspace {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

.compact-table-header {
  border-bottom-color: var(--concept-line, #dce4df);
  background: rgb(255 254 251 / 96%);
  backdrop-filter: blur(18px);
}

.compact-table-header .header-title h1 { font-size: 1.08rem; font-weight: 950; }
.compact-table-header .header-title p { font-size: 0.82rem; }

.table-command-bar {
  top: 4rem;
  width: min(calc(100% - 1.7rem), 62rem);
  margin: 0.8rem auto 0.65rem;
  padding: 0.45rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 14px;
  background: rgb(255 254 251 / 96%);
  box-shadow: 0 12px 26px -22px rgb(32 53 45 / 55%);
}

.table-command-bar button {
  min-height: 2.7rem;
  border: 0;
  border-radius: 10px;
  background: #f0f4f1;
}

.table-command-bar button:not(:disabled):hover { background: #e3eee8; }
.table-command-bar .table-command-bar__invite { color: var(--concept-jade, #14614a); }
.table-command-bar .table-command-bar__settle {
  border-bottom: 3px solid #b8462a;
  background: var(--concept-coral, #e96f58);
  font-size: 0.94rem;
}

.compact-table-view > .table-utilities {
  width: min(calc(100% - 1.7rem), 45rem);
  margin: 0 auto 0.7rem;
  border-radius: 14px;
  box-shadow: 0 12px 25px -22px rgb(32 53 45 / 52%);
}

.table-utilities__row { padding: 0.45rem; gap: 0.35rem; }
.table-utilities__row--secondary { padding-block-start: 0.45rem; }

.table-utility {
  min-height: 4.4rem;
  padding: 0.45rem 0.25rem;
  border-radius: 10px;
  gap: 0.35rem;
  color: var(--concept-ink, #20352d);
  font-size: 0.84rem;
  font-weight: 850;
}

.table-utility__icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9px;
  place-items: center;
  background: var(--concept-mint, #dff1e9);
  color: var(--concept-jade, #14614a);
  font-style: normal;
}

.table-utility__icon .lucide-icon { width: 1.15rem; height: 1.15rem; }
.table-utility--dealer .table-utility__icon { background: var(--concept-sun-soft, #fff0bf); color: #795914; }
.table-utility--draw .table-utility__icon { background: var(--concept-sky-soft, #dceef8); color: #326984; }
.table-utility--pair-ledger .table-utility__icon { background: var(--concept-plum-soft, #eadff3); color: #664d7a; }
.table-utility--more .table-utility__icon { background: var(--concept-coral-soft, #fde3dd); color: #a34737; }
.table-utility--award-penalty .table-utility__icon { background: var(--concept-sun-soft, #fff0bf); color: #795914; }
.table-utility--false-win .table-utility__icon { background: var(--concept-rose-soft, #f8dfe4); color: #9c3d50; }
.table-utility--delegation .table-utility__icon { background: var(--concept-sky-soft, #dceef8); color: #326984; }
.table-utility--dice .table-utility__icon { background: var(--concept-plum-soft, #eadff3); color: #664d7a; }
.table-utility--active { background: #f3eee2; color: var(--concept-jade, #14614a); }

.compact-table-view > .table-live-mode {
  width: fit-content;
  max-width: calc(100% - 1.7rem);
  margin: 0 auto 0.7rem;
  background: #e9eeeb;
}

.table-score-diamond {
  width: min(calc(100% - 1.7rem), 35rem);
  aspect-ratio: 1;
  margin: 0 auto 0.85rem;
  padding: 1rem;
  border: 1px solid #ccd9d2;
  border-bottom: 6px solid #afc5ba;
  border-radius: 20px;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr) minmax(0, 0.92fr);
  grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.16fr) minmax(0, 0.92fr);
  gap: 0.65rem;
  background: #e6eee9;
  box-shadow: 0 20px 34px -26px rgb(18 73 54 / 55%);
  transform: none;
}

.table-score-diamond__surface {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0.55rem;
  border: 7px solid #b99056;
  border-radius: 14px;
  place-self: center;
  gap: 0.1rem;
  background: var(--concept-jade-deep, #0d4637);
  box-shadow: 0 20px 30px -22px rgb(11 63 47 / 75%);
}

.table-round-control {
  min-height: 1.75rem;
  border-radius: 7px;
}

.table-round-control strong { font-size: 0.82rem; }

.table-ahu-status {
  min-height: 2.8rem;
  gap: 0.2rem;
}

.table-ahu-status__graphic {
  width: min(100%, 4.4rem);
  height: auto;
}

.table-ahu-status__graphic use { pointer-events: none; }
.table-ahu-status .ahu-mascot { font-size: 1.8rem; }
.table-ahu-status > small { max-width: 4.4rem; font-size: 0.7rem; }

.table-score-diamond__surface .table-current-identity,
.table-identity-control select {
  min-height: 1.65rem;
  border-radius: 7px;
}

.table-score-diamond__player {
  width: min(100%, 9rem);
  min-height: 4.8rem;
  padding: 0.5rem 0.3rem;
  border-radius: 12px;
  place-self: center;
  gap: 0.18rem;
}

.table-score-diamond__player span {
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-score-diamond__player strong { font-size: 1.12rem; }
.table-score-diamond__dealer { top: 0.2rem; right: 0.2rem; }

.table-entry,
.table-entry--cantonese {
  width: min(calc(100% - 1.7rem), 62rem);
  margin: 0 auto 1rem;
  border-radius: 14px;
}

.table-entry__heading {
  min-height: 4.75rem;
  padding: 0.85rem 1rem;
}

.table-entry__heading h2 { font-size: 1.16rem; }
.table-entry__heading p,
.table-entry__heading > span { font-size: 0.84rem; }
.table-entry__tile { width: 2.25rem; height: 2.7rem; }

.opponent-ledger-grid { grid-template-columns: repeat(var(--opponent-count, 3), minmax(0, 1fr)); }
.opponent-ledger { padding: 0.9rem 0.5rem 1.1rem; }
.opponent-ledger__header p { font-size: 0.82rem; }
.opponent-ledger__header h2 { font-size: 1.05rem; }
.opponent-ledger__active-total { min-height: 2rem; font-size: 1.35rem; font-weight: 950; }
.opponent-ledger__kick,
.opponent-ledger__settle { min-height: 2.8rem; font-size: 0.86rem; font-weight: 900; }
.opponent-ledger__record-value { min-height: 2.3rem; font-size: 1rem; font-weight: 850; }

.table-entry-dialog { width: min(100%, 38rem); }
.table-entry-dialog .dialog__title { font-size: 1.28rem; }
.table-entry-dialog__body { gap: 1rem; }
.table-entry-dialog .entry-kind-segment button { font-size: 0.92rem; font-weight: 900; }
.entry-fan-field > label { font-size: 1rem; font-weight: 900; }

.fan-range-control {
  display: grid;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 12px;
  gap: 0.75rem;
  background: #ffffff;
}

.fan-range-control__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--concept-muted, #607068);
  font-size: 0.84rem;
  font-weight: 800;
}

.fan-range-control__heading output {
  color: var(--concept-jade, #14614a);
  font-size: 1.08rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.fan-range-control__slider {
  width: 100%;
  height: 2rem;
  margin: 0;
  accent-color: var(--concept-jade, #14614a);
  cursor: grab;
}

.fan-range-control__slider:active { cursor: grabbing; }

.fan-number-stepper {
  display: grid;
  min-width: 0;
  grid-template-columns: 3.25rem minmax(5rem, 1fr) 3.25rem;
  align-items: stretch;
  gap: 0.5rem;
}

.fan-number-stepper button {
  display: grid;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0;
  border: 1px solid var(--concept-line, #dce4df);
  border-bottom-width: 3px;
  border-radius: 10px;
  place-items: center;
  background: #f3f6f4;
  color: var(--concept-jade, #14614a);
}

.fan-number-stepper button:hover { border-color: #8fb8a9; background: var(--concept-mint, #dff1e9); }
.fan-number-stepper button .lucide-icon { width: 1.2rem; height: 1.2rem; }
.entry-fan-field .fan-number-stepper input {
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.35rem;
  border-radius: 10px;
  font-size: 1.55rem;
}

.guided-score-preview strong { font-size: 1.18rem; }
.entry-outcome__score strong { font-size: 1.2rem; }

.table-view-panel > .compact-secondary-view,
.table-view-panel > .table-chat-view {
  width: min(calc(100% - 1.7rem), 62rem);
  margin-inline: auto;
}

.compact-view-heading h2,
.table-chat-heading h2 { font-size: 1.28rem; }
.compact-view-heading p { font-size: 0.84rem; }
.compact-view-heading .ahu-heading-mascot { transform: scale(0.84); transform-origin: right center; }
.statistics-summary dd { font-size: 1.3rem; }
.player-stat-card h3 { font-size: 1.05rem; }
.player-stat-card dd { font-size: 1rem; }

.final-settlement-celebration__mascot .hulo-action-graphic { width: 6.5rem; }
.final-settlement-celebration__header h3 { font-size: 1.2rem; }

@media (min-width: 56.25rem) {
  .table-fixture-page {
    padding-inline: 5.75rem 1.25rem;
    padding-block-end: 2rem;
  }

  .table-primary-tabs {
    top: 5rem;
    right: auto;
    bottom: auto;
    left: max(0.85rem, calc(50% - 39rem + 0.85rem));
    display: flex;
    width: 4.65rem;
    min-width: 0;
    height: min(31rem, calc(100dvh - 6.25rem));
    margin: 0;
    padding: 0.55rem 0.35rem;
    border: 1px solid var(--concept-line, #dce4df);
    border-radius: 16px;
    flex-direction: column;
    background: rgb(255 254 251 / 98%);
    box-shadow: 0 14px 30px -22px rgb(32 53 45 / 60%);
  }

  .table-primary-tablist {
    display: grid;
    width: 100%;
    gap: 0.35rem;
  }

  .table-primary-tabs button,
  .table-primary-tabs__profile {
    width: 100%;
    min-height: 4.2rem;
    border-radius: 11px;
    font-size: 0.78rem;
  }

  .table-primary-tabs__profile { margin-block-start: auto; }
  .table-primary-tabs .lucide-icon { width: 1.25rem; height: 1.25rem; }
  .table-chat-view { height: calc(100dvh - 11.5rem); max-height: 52rem; }
}

@media (max-width: 56.24rem) {
  .table-fixture-page { padding-block-end: calc(var(--table-tabs-clearance) + 0.5rem); }

  .table-primary-tabs {
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    width: auto;
    min-width: 0;
    padding: 0.35rem calc(0.35rem + env(safe-area-inset-right)) calc(0.35rem + env(safe-area-inset-bottom)) calc(0.35rem + env(safe-area-inset-left));
    border: 1px solid var(--concept-line, #dce4df);
    border-radius: 16px;
    grid-template-columns: repeat(var(--table-tab-count, 3), minmax(0, 1fr));
  }

  .table-primary-tablist { display: contents; }
  .table-primary-tabs button,
  .table-primary-tabs__profile { min-height: 3.55rem; }
}

@media (max-width: 30rem) {
  .table-command-bar {
    width: calc(100% - 1rem);
    margin-block-start: 0.5rem;
    grid-template-columns: 2.55rem 2.55rem minmax(4.35rem, auto) minmax(4.6rem, auto);
    gap: 0.3rem;
  }

  .compact-table-view > .table-utilities,
  .table-entry,
  .table-entry--cantonese,
  .table-view-panel > .compact-secondary-view,
  .table-view-panel > .table-chat-view { width: calc(100% - 1rem); }

  .table-utility { min-height: 4rem; font-size: 0.76rem; }
  .table-utility__icon { width: 2rem; height: 2rem; }

  .table-score-diamond {
    width: calc(100% - 1rem);
    padding: 0.55rem;
    border-radius: 15px;
    gap: 0.3rem;
  }

  .table-score-diamond__surface {
    padding: 0.3rem;
    border-width: 5px;
    border-radius: 10px;
  }

  .table-round-control { min-height: 1.45rem; padding: 0.1rem 0.2rem; }
  .table-round-control strong { font-size: 0.72rem; }
  .table-round-control .lucide-icon { display: none; }
  .table-ahu-status { min-height: 2.15rem; }
  .table-ahu-status__graphic { width: 3rem; }
  .table-ahu-status .ahu-mascot { font-size: 1.45rem; }
  .table-ahu-status > small { display: none; }
  .table-score-diamond__surface .table-current-identity small { display: none; }
  .table-score-diamond__surface .table-current-identity strong,
  .table-identity-control select { font-size: 0.65rem; }

  .table-score-diamond__player {
    min-height: 4.2rem;
    padding: 0.35rem 0.15rem;
    border-radius: 9px;
  }

  .table-score-diamond__player .table-seat-avatar {
    top: 0.18rem;
    left: 0.18rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.62rem;
  }
  .table-score-diamond__player span { font-size: 0.78rem; }
  .table-score-diamond__player strong { font-size: 1rem; }
  .table-score-diamond__dealer { min-width: 1.25rem; height: 1.05rem; font-size: 0.68rem; }

  .table-entry__heading { padding: 0.7rem; }
  .table-entry__heading h2 { font-size: 1.04rem; }
  .table-entry__settle-all { min-height: 2.7rem; padding-inline: 0.55rem; font-size: 0.8rem; }
  .opponent-ledger { padding-inline: 0.3rem; }
  .opponent-ledger__header h2 { font-size: 0.92rem; }
  .opponent-ledger__active-total { font-size: 1.18rem; }
  .opponent-ledger__actions { grid-template-columns: minmax(0, 1fr); }
  .opponent-ledger__kick,
  .opponent-ledger__settle { min-height: 2.55rem; padding-inline: 0.2rem; font-size: 0.78rem; }
  .opponent-ledger__record-value { font-size: 0.9rem; }

  .fan-range-control { padding: 0.7rem; }
  .fan-number-stepper { grid-template-columns: 3rem minmax(4.5rem, 1fr) 3rem; }
  .fan-number-stepper button,
  .entry-fan-field .fan-number-stepper input { min-height: 3rem; }
  .final-settlement-celebration__mascot .hulo-action-graphic { width: 5rem; }
}

/* Concept A identity and dense-list pass. Collectible badges remain the
   production medallions; compact surfaces suppress rays and cap visible art. */
.ahu-name-line {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0.28rem;
  vertical-align: middle;
}

.ahu-name-line__text {
  min-width: 0;
  overflow: hidden;
  font-size: inherit;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ahu-inline-badges {
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.16rem;
}

.ahu-inline-badge {
  display: inline-grid;
  width: 1.22rem;
  height: 1.22rem;
  border: 2px solid #d4a84a;
  border-radius: 50%;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 34%, var(--badge-light), var(--badge-dark));
  box-shadow: 0 2px 5px -3px rgb(32 48 31 / 70%);
}

.ahu-inline-badge--s {
  border-color: #fbe066;
  box-shadow: 0 0 0 2px rgb(255 240 130 / 45%), 0 0 6px 1px rgb(255 224 90 / 75%), 0 2px 5px -3px rgb(154 101 0 / 78%);
  animation: ahu-inline-badge-s-glow 1.9s ease-in-out infinite;
}

@keyframes ahu-inline-badge-s-glow {
  0%, 100% {
    border-color: #fbe066;
    box-shadow: 0 0 0 2px rgb(255 240 130 / 35%), 0 0 4px 1px rgb(255 224 90 / 55%), 0 2px 5px -3px rgb(154 101 0 / 78%);
  }
  50% {
    border-color: #fff6c2;
    box-shadow: 0 0 0 3px rgb(255 246 194 / 65%), 0 0 9px 2px rgb(255 232 120 / 90%), 0 2px 5px -3px rgb(154 101 0 / 78%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ahu-inline-badge--s {
    animation: none;
  }
}

.ahu-inline-badge .hulo-hero-svg {
  width: 90%;
  height: 90%;
}

.ahu-inline-badge-more {
  display: inline-grid;
  min-width: 1.28rem;
  height: 1.22rem;
  padding-inline: 0.16rem;
  border: 1px solid #c8d0ca;
  border-radius: 4px;
  place-items: center;
  flex: none;
  background: #f3f6f4;
  color: var(--ink-muted);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.ahu-friend-row {
  min-height: 64px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.ahu-user-search-result { grid-template-columns: minmax(0, 1fr); }

/* 新好友通知. Sun rather than coral: somebody adding you is good news, not a
   warning, and the row sits directly above the ordinary 好友列表. */
.ahu-friend-notices {
  display: grid;
  margin-block-start: 0.9rem;
  gap: 0.5rem;
}

.ahu-friend-notice {
  border-color: #e6c98a;
  background: #fffaf0;
}

.ahu-friend-notice__ack {
  align-self: center;
  padding-inline: 0.75rem;
  white-space: nowrap;
}

.ahu-friend-row__profile {
  min-height: 62px;
  padding: 0.55rem 0.65rem;
  grid-template-columns: 2.45rem minmax(0, 1fr) 0.9rem;
  gap: 0.55rem;
}

.ahu-friend-row__profile .ahu-avatar,
.ahu-friend-row .ahu-presence-wrap {
  width: 2.35rem;
  height: 2.35rem;
}

.ahu-friend-row__tables {
  display: flex;
  max-width: 8rem;
  padding: 0.35rem 0.4rem;
  border-inline-start: 1px solid var(--line);
  align-items: center;
  gap: 0.28rem;
  overflow-x: auto;
  background: #f7fbf7;
}

.ahu-friend-row__table {
  display: grid;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid #b9d3c2;
  border-radius: 8px;
  grid-template-columns: 1fr;
  place-items: center;
  background: #ffffff;
  color: var(--felt-strong);
}

.ahu-friend-row__table > .lucide-icon:first-child {
  width: 1.05rem;
  height: 1.05rem;
}

.ahu-opponent-list,
.ahu-friend-ranking {
  align-items: start;
}

.ahu-opponent-list button {
  min-height: 60px;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  grid-template-columns: 1.35rem 2.35rem minmax(0, 1fr) auto 0.85rem;
  gap: 0.42rem;
  box-shadow: 0 5px 14px -14px rgb(32 48 31 / 72%);
}

.ahu-opponent-list .ahu-avatar {
  width: 2.25rem;
  height: 2.25rem;
}

.ahu-opponent-meta { gap: 0.12rem; }
.ahu-opponent-meta > small:last-child { white-space: nowrap; }

.ahu-friend-ranking > li {
  min-height: 60px;
  padding: 0.38rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  background: #ffffff;
}

.ahu-profile-hero__identity h1 {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ahu-profile-hero__identity h1 > .ahu-name-line { flex: 0 1 auto; }
.ahu-profile-variant-suffix { flex: none; }

.ahu-profile-badge-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.ahu-profile-badge-showcase__item {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  place-items: center;
  align-content: start;
  gap: 0.22rem;
  background: #fffdf8;
  text-align: center;
}

.ahu-profile-badge-showcase__item .ahu-badge-card__frame {
  width: 5.25rem;
  margin-block-end: 0.3rem;
}

.ahu-profile-badge-showcase__item h3,
.ahu-profile-badge-showcase__item > span,
.ahu-profile-badge-showcase__item p {
  position: relative;
  z-index: 2;
  margin: 0;
}
.ahu-profile-badge-showcase__item h3 { font-size: 0.9rem; font-weight: 950; }
.ahu-profile-badge-showcase__item > span { color: #8a6417; font-size: 0.72rem; font-weight: 900; }
.ahu-profile-badge-showcase__item p { color: var(--ink-muted); font-size: 0.75rem; line-height: 1.4; }

.flow-member-list .ahu-name-line {
  max-width: 7.5rem;
  justify-content: center;
}

.table-score-diamond__player > .ahu-name-line,
.table-score-diamond__player .ahu-inline-badges,
.table-current-identity .ahu-name-line,
.opponent-ledger__header .ahu-name-line,
.score-chart__name .ahu-name-line,
.player-stat-card h3 .ahu-name-line,
.table-chat-message header .ahu-name-line,
.final-score-grid .ahu-name-line {
  display: inline-flex;
}

.table-score-diamond__player > .ahu-name-line {
  width: 100%;
  justify-content: center;
}

.table-score-diamond__player .ahu-name-line__text,
.table-score-diamond__player .ahu-inline-badge-more {
  font-size: 0.76rem;
}

.table-score-diamond__player .ahu-inline-badge,
.table-current-identity .ahu-inline-badge,
.opponent-ledger__header .ahu-inline-badge {
  width: 1rem;
  height: 1rem;
  border-width: 1px;
}

.table-score-diamond__player .ahu-inline-badge-more,
.table-current-identity .ahu-inline-badge-more,
.opponent-ledger__header .ahu-inline-badge-more {
  min-width: 1rem;
  height: 1rem;
}

.table-score-diamond__player .ahu-inline-badge .hulo-hero-svg,
.table-current-identity .ahu-inline-badge .hulo-hero-svg,
.opponent-ledger__header .ahu-inline-badge .hulo-hero-svg {
  width: 90%;
  height: 90%;
}

.opponent-ledger__header h2 .ahu-name-line { justify-content: center; }
.score-chart__name .ahu-name-line { max-width: 9rem; }
.table-chat-message header .ahu-name-line { min-width: 0; }

@media (min-width: 48rem) {
  .ahu-friend-list,
  .ahu-opponent-list,
  .ahu-friend-ranking {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .ahu-friend-list,
  .ahu-opponent-list,
  .ahu-petty-book .ahu-profile-section:has(.ahu-friend-ranking) {
    width: min(100%, 52rem);
    margin-inline: auto;
  }
}

@media (max-width: 30rem) {
  .ahu-friend-row,
  .ahu-friend-row__profile { min-height: 60px; }
  .ahu-friend-row__profile { padding: 0.42rem 0.5rem; }
  .ahu-friend-row__tables { max-width: 6.6rem; }
  .ahu-friend-row__table { width: 2.55rem; min-width: 2.55rem; min-height: 2.55rem; }
  .ahu-opponent-list button,
  .ahu-friend-ranking > li { min-height: 56px; }
  .ahu-opponent-list button { grid-template-columns: 1.2rem 2.15rem minmax(0, 1fr) auto; }
  .ahu-opponent-list button > .lucide-icon { display: none; }
  .ahu-opponent-list .ahu-avatar { width: 2.05rem; height: 2.05rem; }
  .ahu-profile-badge-showcase__item .ahu-badge-card__frame { width: 4.5rem; }
  .ahu-profile-badge-showcase__item { padding-inline: 0.3rem; }
  .ahu-profile-badge-showcase__item p { font-size: 0.7rem; }
}

/* Concept A inner-page shells. The mascot supports the heading; identity and
   commands remain the primary scan targets. */
.ahu-page-heading {
  display: flex;
  width: min(100%, 70rem);
  min-width: 0;
  margin-inline: auto;
  padding: 0.65rem 0 0.2rem;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
}

.ahu-page-heading__copy {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}

.ahu-page-heading__copy p,
.ahu-page-heading__copy h1,
.ahu-page-heading__copy span { margin: 0; }
.ahu-page-heading__copy p { color: var(--concept-jade); font-size: 0.84rem; font-weight: 950; }
.ahu-page-heading__copy h1 { font-size: 2.35rem; font-weight: 950; line-height: 1.16; }
.ahu-page-heading__copy span { max-width: 38rem; color: var(--concept-muted); font-size: 1rem; font-weight: 700; line-height: 1.55; }
.ahu-page-heading__mascot { width: 8.25rem; flex: 0 0 auto; }

.ahu-profile-return {
  display: flex;
  width: min(100%, 70rem);
  margin: 0.45rem auto 0;
}

.ahu-profile-return__button {
  min-height: 2.75rem;
  padding-inline: 0.85rem 1rem;
  border-color: var(--concept-line);
  background: var(--concept-paper);
  color: var(--concept-jade-dark);
  font-weight: 900;
}

.ahu-profile-return__button .lucide-icon {
  width: 1rem;
  height: 1rem;
}

.ahu-friends-layout {
  display: grid;
  width: min(100%, 70rem);
  min-width: 0;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.75fr);
  align-items: start;
  gap: 1.25rem;
}

.ahu-friends-layout__main,
.ahu-friends-list-section {
  display: grid;
  min-width: 0;
  gap: 0.8rem;
}

.ahu-friends-privacy {
  display: flex;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #bfd5ca;
  border-radius: 8px;
  align-items: center;
  gap: 0.55rem;
  background: #edf6f1;
  color: #335f4e;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.45;
}

.ahu-friends-privacy .lucide-icon { width: 1rem; height: 1rem; flex: none; }

.ahu-section-heading--concept {
  align-items: end;
}

.ahu-section-heading--concept > div {
  display: grid;
  gap: 0.12rem;
}

.ahu-section-heading--concept p,
.ahu-section-heading--concept h2 { margin: 0; }
.ahu-section-heading--concept p { color: var(--concept-jade); font-size: 0.78rem; font-weight: 950; }
.ahu-section-heading--concept h2 { font-size: 1.4rem; font-weight: 950; }

.ahu-friends-aside {
  display: grid;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #b9d9cb;
  border-radius: 8px;
  gap: 0.55rem;
  background: var(--concept-mint);
  box-shadow: var(--concept-shadow);
}

.ahu-friends-aside h2,
.ahu-friends-aside p { margin: 0; }
.ahu-friends-aside h2 { font-size: 1.18rem; font-weight: 950; }
.ahu-friends-aside p { color: #47685a; font-size: 0.88rem; font-weight: 700; line-height: 1.55; }
.ahu-friends-aside .hulo-action-graphic { width: min(100%, 12rem); margin: 0.3rem auto 0; }

.ahu-friends .ahu-user-search { gap: 0.45rem; }
.ahu-friends .ahu-search-field--action { min-height: 3.6rem; border-radius: 8px; background: var(--concept-paper); }
/* 1rem, not 0.95rem: iOS Safari zooms the page to fit any focused field under 16px. */
.ahu-friends .ahu-search-field--action input { font-size: 1rem; font-weight: 750; }
.ahu-friends .ahu-search-field--action button { min-width: 3rem; }

.ahu-petty-tools {
  display: flex;
  width: min(100%, 42rem);
  min-width: 0;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ahu-petty-tools .ahu-variant-switcher { margin: 0; }
.ahu-ledger-summary h2 { margin: 0; font-size: 2.2rem; font-weight: 950; }

.ahu-profile-hero--concept {
  width: min(100%, 44rem);
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 8px;
  background: var(--concept-paper);
  box-shadow: var(--concept-shadow);
}

.ahu-profile-hero__identity h2 {
  display: flex;
  min-width: 0;
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 1.35rem;
  font-weight: 950;
}

.ahu-profile-hero__identity h2 > .ahu-name-line { flex: 0 1 auto; }

.ahu-profile-hero__actions {
  display: flex;
  margin-block-start: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ahu-profile-hero__actions .ahu-text-button {
  min-height: 2.6rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 6px;
  background: #ffffff;
}

.ahu-profile-hero__mascot { width: 8.5rem; }
.ahu-profile-hero__mascot .hulo-action-graphic { width: 100%; }

.ahu-profile-columns {
  display: grid;
  width: min(100%, 70rem);
  min-width: 0;
  margin: 0.9rem auto 0;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 1rem;
}

.ahu-profile-columns > .ahu-profile-section {
  width: 100%;
  margin: 0;
}

.ahu-ability-card,
.ahu-profile-achievements {
  padding: 1rem;
  border: 1px solid var(--concept-line, #dce4df);
  border-radius: 8px;
  background: #fffefb;
  box-shadow: var(--concept-shadow);
}

.ahu-ability-visual {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
}

.ahu-ability-radar { width: min(100%, 25rem); margin-inline: auto; }
.ahu-radar__grade--s { fill: #8a6413; font-weight: 950; }
.ahu-radar__grade--a { fill: #a33f39; font-weight: 950; }
.ahu-radar__grade--b,
.ahu-radar__grade--c,
.ahu-radar__grade--d { fill: var(--concept-sky, #4f8fbb); font-weight: 950; }
.ahu-radar__grade--none { fill: var(--ink-muted); }

.ahu-ability-axis-list {
  display: grid;
  min-width: 0;
  margin: 0;
  gap: 0.55rem;
}

.ahu-ability-axis-list > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1.8rem;
  align-items: center;
  gap: 0.45rem;
}

.ahu-ability-axis-list dt,
.ahu-ability-axis-list dd { font-size: 0.8rem; font-weight: 900; }
.ahu-ability-axis-list dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.ahu-ability-axis-list > div > span { height: 0.45rem; overflow: hidden; border-radius: 999px; background: #e5ece8; }
.ahu-ability-axis-list i { display: block; width: var(--ability-value); height: 100%; border-radius: inherit; background: var(--ability-color); }

@media (max-width: 58rem) {
  .ahu-profile-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 37.5rem) {
  .ahu-profile-hero__mascot { display: none; }
  .ahu-ability-visual { grid-template-columns: minmax(0, 1fr); }
  .ahu-ability-radar { width: min(100%, 19rem); }
  .ahu-profile-columns { gap: 0.75rem; }
  .fan-input-row { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .fan-wheel { height: 8rem; }
  .fan-wheel__pad { height: 2.75rem; }
  .fan-direct-entry { padding: 0.65rem; }
  .fan-direct-entry .fan-number-stepper {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    gap: 0.3rem;
  }
  .fan-direct-entry .fan-number-stepper button,
  .entry-fan-field .fan-direct-entry .fan-number-stepper input { min-height: 2.75rem; }
}

.ahu-feature-grid {
  display: grid;
  width: min(100%, 70rem);
  min-width: 0;
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.ahu-feature-card {
  display: grid;
  min-width: 0;
  min-height: 16.25rem;
  overflow: hidden;
  padding: 1.05rem;
  border: 1px solid var(--feature-edge);
  border-bottom-width: 5px;
  border-radius: 8px;
  align-content: start;
  gap: 0.55rem;
  background: var(--feature-bg);
}

.ahu-feature-card.is-jade { --feature-color: #14614a; --feature-bg: #dff1e9; --feature-edge: #acd7c6; }
.ahu-feature-card.is-coral { --feature-color: #d55743; --feature-bg: #fde3dd; --feature-edge: #efb6aa; }
.ahu-feature-card.is-plum { --feature-color: #71558a; --feature-bg: #eadff3; --feature-edge: #c9b0da; }
.ahu-feature-card.is-sky { --feature-color: #3d789d; --feature-bg: #dceef8; --feature-edge: #abd0e5; }
.ahu-feature-card.is-sun { --feature-color: #946b12; --feature-bg: #fff0bf; --feature-edge: #e7cc7a; }
.ahu-feature-card.is-rose { --feature-color: #9a4e5d; --feature-bg: #f8dfe4; --feature-edge: #e3afba; }

.ahu-feature-card__icon {
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 8px;
  place-items: center;
  background: var(--feature-color);
  color: #ffffff;
}

.ahu-feature-card__icon .lucide-icon { width: 1.3rem; height: 1.3rem; }
.ahu-feature-card h2,
.ahu-feature-card p { margin: 0; }
.ahu-feature-card h2 { font-size: 1.2rem; font-weight: 950; }
.ahu-feature-card p { color: var(--concept-muted); font-size: 0.9rem; font-weight: 700; line-height: 1.55; }
.ahu-feature-card .hulo-action-graphic { width: 7rem; margin: auto auto 0; }

.ahu-feature-actions {
  display: flex;
  width: min(100%, 70rem);
  margin-inline: auto;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.ahu-feature-actions .button { min-height: 3rem; }
.ahu-feature-actions .lucide-icon { width: 1rem; height: 1rem; }

.ahu-report-layout {
  display: grid;
  width: min(100%, 70rem);
  min-width: 0;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.7fr);
  align-items: start;
  gap: 1.1rem;
}

.ahu-report-form {
  padding: 1.25rem;
  border-color: var(--concept-line, #dce4df);
  gap: 1rem;
  background: var(--concept-paper);
  box-shadow: var(--concept-shadow);
}

.ahu-report-context {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.8rem;
}

.ahu-report-field {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
}

.ahu-report-field > span { font-size: 0.88rem; font-weight: 900; }

.ahu-report-field input,
.ahu-report-field select {
  width: 100%;
  min-width: 0;
  min-height: 3.1rem;
  padding-inline: 0.75rem;
  border: 1.5px solid #c8d6ce;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: var(--concept-ink);
  font: inherit;
  font-weight: 700;
}

.ahu-report-form textarea {
  min-height: 12rem;
  padding: 0.85rem;
  border-color: #c8d6ce;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.55;
}

.ahu-report-form textarea:focus,
.ahu-report-field input:focus,
.ahu-report-field select:focus {
  border-color: var(--concept-jade);
  outline: 0;
  box-shadow: 0 0 0 4px rgb(20 97 74 / 11%);
}

.ahu-report-aside {
  display: grid;
  min-width: 0;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid #e8b8c2;
  border-radius: 8px;
  gap: 0.65rem;
  background: var(--concept-rose-soft);
  box-shadow: var(--concept-shadow);
}

.ahu-report-aside .hulo-action-graphic { width: min(100%, 12rem); margin-inline: auto; }
.ahu-report-aside h2,
.ahu-report-aside p { margin: 0; }
.ahu-report-aside h2 { font-size: 1.2rem; font-weight: 950; }
.ahu-report-aside p { color: #79515a; font-size: 0.88rem; font-weight: 700; line-height: 1.55; }

@media (max-width: 56.24rem) {
  .ahu-page-heading__copy h1 { font-size: 2rem; }
  .ahu-friends-layout { grid-template-columns: minmax(0, 1fr); }
  .ahu-friends-aside { grid-row: 1; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; }
  .ahu-friends-aside h2,
  .ahu-friends-aside p { grid-column: 1; }
  .ahu-friends-aside .hulo-action-graphic { width: 7rem; grid-column: 2; grid-row: 1 / span 2; }
  .ahu-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ahu-report-layout { grid-template-columns: minmax(0, 1fr); }
  .ahu-report-aside { grid-row: 1; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; }
  .ahu-report-aside .hulo-action-graphic { width: 8rem; grid-row: 1 / span 3; }
}

@media (max-width: 37.5rem) {
  .ahu-page-heading { align-items: center; }
  .ahu-page-heading__copy h1 { font-size: 1.75rem; }
  .ahu-page-heading__copy span { font-size: 0.9rem; }
  .ahu-page-heading__mascot { width: 6rem; }
  .ahu-friends-aside { grid-template-columns: minmax(0, 1fr) 5rem; padding: 0.9rem; }
  .ahu-friends-aside .hulo-action-graphic { width: 5rem; }
  .ahu-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .ahu-feature-card { min-height: 13.5rem; }
  .ahu-feature-actions { display: grid; }
  .ahu-report-aside { grid-template-columns: 5.5rem minmax(0, 1fr); padding: 0.9rem; }
  .ahu-report-aside .hulo-action-graphic { width: 5.5rem; }
  .ahu-developer .ahu-page-heading { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .ahu-developer .ahu-page-heading__copy h1 { font-size: 1.55rem; }
  .ahu-developer .ahu-page-heading__mascot { width: 4.5rem; }
  .ahu-report-context { grid-template-columns: minmax(0, 1fr); }
  .ahu-developer-form__meta { align-items: stretch; flex-direction: column; }
  .ahu-developer-form__meta .button { width: 100%; }
  .ahu-petty-tools { align-items: stretch; flex-direction: column; }
  .ahu-petty-tools .ahu-ledger-year select { width: 100%; }
}

/* Concept A sharing surfaces. The underlying share and spectator behavior is
   unchanged; these rules only give the production paths the accepted layout. */
.share-preview-dialog {
  width: min(calc(100vw - 1.5rem), 64rem);
  max-width: 64rem;
  max-height: min(94vh, 54rem);
  overflow: hidden;
  border-radius: 8px;
  background: #fffefb;
}

.share-preview-dialog .dialog__header { border-radius: 8px 8px 0 0; }

.share-preview-dialog__body {
  display: grid;
  min-width: 0;
  max-height: min(76vh, 46rem);
  overflow-y: auto;
  padding: 1rem;
  grid-template-columns: minmax(19rem, 34rem) minmax(16rem, 1fr);
  align-items: start;
  gap: 1rem;
  background: #edf2ef;
}

.share-preview-dialog__figure {
  display: grid;
  min-width: 0;
  margin: 0;
  place-items: center;
}

.share-preview-dialog__image {
  width: min(100%, 31rem);
  max-width: none;
  border: 1px solid #d8cba9;
  border-radius: 8px;
  background: #f7f2e5;
  box-shadow: 0 18px 38px -28px rgb(32 53 45 / 52%);
}

.share-preview-tools {
  display: grid;
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid #b8d9ca;
  border-radius: 8px;
  align-content: start;
  gap: 0.6rem;
  background: #dff1e9;
}

.share-preview-dialog--achievement .share-preview-tools {
  border-color: #efb6aa;
  background: #fde3dd;
}

.share-preview-dialog--ability .share-preview-tools,
.share-preview-dialog--ability-solo .share-preview-tools {
  border-color: #abd0e5;
  background: #dceef8;
}

.share-preview-tools .hulo-action-graphic {
  width: min(100%, 10rem);
  margin: 0 auto 0.2rem;
}

.share-preview-tools h3,
.share-preview-tools p { margin: 0; }
.share-preview-tools h3 { font-size: 1.3rem; font-weight: 950; }
.share-preview-tools > p:not(.ahu-kicker) { color: #486158; font-size: 0.9rem; font-weight: 700; line-height: 1.55; }

.share-preview-tools dl {
  display: grid;
  margin: 0.3rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgb(32 53 45 / 14%);
  gap: 0.45rem;
}

.share-preview-tools dl div {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
}

.share-preview-tools dt { color: #60736b; font-weight: 700; }
.share-preview-tools dd { margin: 0; font-weight: 900; text-align: right; }

.share-preview-tools__privacy {
  display: flex;
  margin-top: 0.35rem;
  padding: 0.6rem;
  border-radius: 8px;
  align-items: center;
  gap: 0.45rem;
  background: rgb(255 255 255 / 62%);
  color: #315e4d;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
}

.share-preview-tools__privacy .lucide-icon { width: 1rem; height: 1rem; flex: none; }
.share-preview-dialog .dialog__footer .lucide-icon { width: 1rem; height: 1rem; }

.spectator-topbar {
  position: sticky;
  z-index: 24;
  top: 0;
  display: flex;
  min-height: 4.5rem;
  padding: max(0.65rem, env(safe-area-inset-top)) clamp(0.9rem, 3vw, 1.75rem) 0.65rem;
  border-bottom: 1px solid rgb(30 73 57 / 10%);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgb(255 254 251 / 94%);
  backdrop-filter: blur(18px);
}

.spectator-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  color: #20352d;
  text-decoration: none;
}

.spectator-brand > span:last-child { display: grid; min-width: 0; gap: 0.05rem; }
.spectator-brand strong { font-size: 1.08rem; font-weight: 950; }
.spectator-brand small { color: #65766e; font-size: 0.76rem; font-weight: 750; }

.spectator-mode {
  display: inline-flex;
  min-height: 2.4rem;
  padding: 0 0.8rem;
  border-radius: 8px;
  align-items: center;
  gap: 0.4rem;
  background: #dceef8;
  color: #315e78;
  font-size: 0.8rem;
  font-weight: 900;
}

.spectator-mode .lucide-icon { width: 1rem; height: 1rem; }

.spectator-page {
  display: grid;
  width: min(100%, 72rem);
  max-width: 72rem;
  margin-inline: auto;
  padding: 1.6rem clamp(0.8rem, 3vw, 2rem) 3rem;
  gap: 0.9rem;
  background: #f3f6f4;
}

.spectator-heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.spectator-heading > div { display: grid; min-width: 0; gap: 0.18rem; }
.spectator-heading p,
.spectator-heading h1,
.spectator-heading span,
.spectator-heading small { margin: 0; }
.spectator-heading p { color: #14614a; font-size: 0.8rem; font-weight: 950; }
.spectator-heading h1 { font-size: 2.25rem; font-weight: 950; line-height: 1.16; }
.spectator-heading span,
.spectator-heading > small { color: #65766e; font-size: 0.82rem; font-weight: 750; }

.spectator-banner {
  min-height: 3.6rem;
  padding: 0.75rem 0.95rem;
  border-color: #b7d6e7;
  border-radius: 8px;
  background: #dceef8;
  color: #315e78;
  font-weight: 800;
}

.spectator-banner svg { color: #3d789d; }

.spectator-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.75fr);
  align-items: start;
  gap: 1rem;
}

.spectator-side { display: grid; min-width: 0; align-content: start; gap: 0.85rem; }

.spectator-section {
  min-width: 0;
  padding: 1rem;
  border-color: #d9e1dc;
  border-radius: 8px;
  background: #fffefb;
  box-shadow: 0 16px 30px -28px rgb(32 53 45 / 50%);
}

.spectator-section h2 {
  margin-bottom: 0.75rem;
  color: #20352d;
  font-size: 1.08rem;
  font-weight: 950;
  letter-spacing: 0;
}

.spectator-table-panel {
  display: grid;
  min-height: 34rem;
  padding: 1.1rem;
  place-items: center;
}

.spectator-diamond {
  position: relative;
  display: block;
  width: min(100%, 32rem);
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 8px;
  background: #eef4f0;
}

.spectator-diamond__center {
  position: absolute;
  inset: 22%;
  display: grid;
  padding: 0.6rem;
  border: 7px solid #d4b66a;
  border-radius: 8px;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  background: #14614a;
  color: #ffffff;
  text-align: center;
}

.spectator-diamond__center .hulo-action-graphic { width: min(62%, 7rem); }
.spectator-diamond__center strong { font-size: 1.05rem; font-weight: 950; }
.spectator-diamond__center small { color: rgb(255 255 255 / 76%); font-size: 0.72rem; font-weight: 750; }

.spectator-diamond__seat {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 7.6rem;
  min-height: 4.8rem;
  padding: 0.55rem 0.65rem;
  border-color: #d5ded8;
  border-bottom-width: 4px;
  border-radius: 8px;
  align-content: center;
  gap: 0.08rem;
  background: #fffefb;
  box-shadow: 0 12px 22px -20px rgb(32 53 45 / 60%);
  text-align: center;
}

.spectator-diamond__seat--top { top: 0.7rem; left: 50%; transform: translateX(-50%); }
.spectator-diamond__seat--right { top: 50%; right: 0.7rem; transform: translateY(-50%); }
.spectator-diamond__seat--bottom { bottom: 0.7rem; left: 50%; transform: translateX(-50%); }
.spectator-diamond__seat--left { top: 50%; left: 0.7rem; transform: translateY(-50%); }
.spectator-diamond__seat small { color: #65766e; font-size: 0.66rem; font-weight: 800; }
.spectator-diamond__seat span { font-size: 0.86rem; font-weight: 900; }
.spectator-diamond__seat strong { font-size: 1.12rem; font-weight: 950; }
.spectator-diamond__seat .ahu-name-line { justify-content: center; }
.spectator-diamond__seat .ahu-inline-badge { width: 1.15rem; height: 1.15rem; }

.spectator-diamond__dealer {
  border-radius: 8px;
  background: #e96f58;
  font-weight: 900;
}

.spectator-achievements li,
.spectator-record {
  padding: 0.65rem 0.7rem;
  border-bottom-width: 1px;
  border-radius: 8px;
}

.spectator-achievements li { border-color: #e7cc7a; background: #fff0bf; }
.spectator-record { border-color: #d8e2dc; background: #f3f6f4; }
.spectator-records { max-height: 22rem; overflow-y: auto; padding-right: 0.15rem; }
.spectator-records--full { max-height: none; overflow: visible; }
.spectator-record__label { border-radius: 8px; background: #dff1e9; color: #14614a; font-weight: 900; }
.spectator-view-tabs {
  display: grid;
  padding: 0.3rem;
  border: 1px solid #d9e1dc;
  border-radius: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  background: #eef2ef;
}
.spectator-view-tabs button {
  display: inline-flex;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  color: #607068;
  font-size: 0.86rem;
  font-weight: 850;
}
.spectator-view-tabs button.is-selected { background: #fffefb; color: #14614a; box-shadow: 0 2px 8px rgb(32 53 45 / 10%); }
.spectator-view-tabs .lucide-icon { width: 1rem; height: 1rem; }
.spectator-view-all { width: 100%; margin-top: 0.75rem; }
.spectator-history,
.spectator-statistics { width: 100%; }
.spectator-statistics { display: grid; gap: 1rem; }
.spectator-statistics > h2,
.spectator-score-chart h3 { margin: 0; }
.spectator-statistics__summary {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.spectator-statistics__summary div {
  display: grid;
  min-width: 0;
  padding: 0.65rem 0.35rem;
  border-radius: 7px;
  gap: 0.15rem;
  background: #eef4f0;
  text-align: center;
}
.spectator-statistics__summary dt { color: #607068; font-size: 0.74rem; font-weight: 750; }
.spectator-statistics__summary dd { margin: 0; color: #20352d; font-size: 1.05rem; font-weight: 950; }
.spectator-score-chart { display: grid; min-width: 0; gap: 0.65rem; }
.spectator-score-chart h3 { font-size: 1rem; }
.spectator-statistics__players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.spectator-statistics__players article { min-width: 0; padding: 0.8rem; border-left: 4px solid var(--series-color); border-radius: 7px; background: #f3f6f4; }
.spectator-statistics__players header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 0.5rem; }
.spectator-statistics__players header > b { flex: none; font-variant-numeric: tabular-nums; }
.spectator-statistics__players dl { display: grid; margin: 0.65rem 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.spectator-statistics__players dl div { min-width: 0; }
.spectator-statistics__players dt { color: #607068; font-size: 0.7rem; }
.spectator-statistics__players dd { margin: 0.08rem 0 0; font-size: 0.9rem; font-weight: 900; }
.spectator-chat li { padding: 0.55rem 0.65rem; border-radius: 8px; background: #f3f6f4; }
.spectator-chat-form input { border-radius: 8px; }
.spectator-chat-form .button { min-width: 3rem; padding-inline: 0.75rem; }
.spectator-foot { padding-top: 0.35rem; }

@media (max-width: 52rem) {
  .share-preview-dialog__body { grid-template-columns: minmax(0, 1fr); }
  .share-preview-tools { grid-template-columns: 7rem minmax(0, 1fr); align-items: center; }
  .share-preview-tools .hulo-action-graphic { grid-row: 1 / span 5; width: 7rem; }
  .share-preview-tools dl,
  .share-preview-tools__privacy { grid-column: 2; }
  .spectator-layout { grid-template-columns: minmax(0, 1fr); }
  .spectator-table-panel { min-height: 30rem; }
}

@media (max-width: 37.5rem) {
  .share-preview-dialog { width: calc(100vw - 0.7rem); max-height: 97vh; }
  .share-preview-dialog__body { max-height: 76vh; padding: 0.65rem; }
  .share-preview-tools { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); padding: 0.8rem; }
  .share-preview-tools .hulo-action-graphic { width: 5.5rem; }
  .share-preview-tools h3 { font-size: 1.08rem; }
  .share-preview-tools > p:not(.ahu-kicker) { font-size: 0.8rem; }
  .spectator-topbar { min-height: 4.1rem; padding-inline: 0.8rem; }
  .spectator-brand small { display: none; }
  .spectator-mode { padding-inline: 0.55rem; }
  .spectator-page { padding: 1.1rem 0.6rem 2rem; }
  .spectator-view-tabs button { padding-inline: 0.35rem; font-size: 0.78rem; }
  .spectator-statistics__players { grid-template-columns: minmax(0, 1fr); }
  .spectator-statistics__players dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spectator-heading { align-items: start; flex-direction: column; gap: 0.35rem; }
  .spectator-heading h1 { font-size: 1.75rem; }
  .spectator-table-panel { min-height: 0; padding: 0.55rem; }
  .spectator-diamond { width: 100%; }
  .spectator-diamond__center { inset: 27%; border-width: 5px; }
  .spectator-diamond__center .hulo-action-graphic { width: min(60%, 4.5rem); }
  .spectator-diamond__center strong { font-size: 0.82rem; }
  .spectator-diamond__seat { min-width: 6.1rem; min-height: 4.2rem; padding: 0.4rem; }
  .spectator-diamond__seat--top { top: 0.4rem; }
  .spectator-diamond__seat--right { right: 0.4rem; }
  .spectator-diamond__seat--bottom { bottom: 0.4rem; }
  .spectator-diamond__seat--left { left: 0.4rem; }
  .spectator-diamond__seat span { font-size: 0.76rem; }
  .spectator-diamond__seat strong { font-size: 0.95rem; }
  .spectator-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}

/* ===========================================================================
   Concept A polish pass — 2026-08-11
   ---------------------------------------------------------------------------
   Presentation only. No rule in this block changes DOM order, adds or removes a
   control, or alters any scoring, dealer, settlement, or persistence behaviour.
   For the table workspace and the 自摸／食糊／賞罰 entry dialog the change is
   deliberately restricted to colour, border, size, and weight: those two
   surfaces keep their exact accepted layout.
   =========================================================================== */

/* --- Table workspace: finish the Concept A repaint ------------------------ */

/* The "本機已保存 / 已同步" state read as a solid dark-green block wedged
   against the table name. It is status, not a primary action. The stage
   selectors above are attribute-qualified, so this needs matching weight. */
html[data-stage] .compact-table-header .prototype-mark {
  padding: 0.25rem 0.6rem;
  border: 1px solid #bfdfd0;
  border-radius: 999px;
  background: var(--concept-mint);
  color: var(--concept-jade);
  font-size: 0.7rem;
  font-weight: 900;
}

/* Undo/redo were pinned to the right with `justify-content: end`, leaving ~40%
   of the bar empty on a phone. Same four controls, same order: undo/redo/invite
   sit at their natural width from the left and 結算 keeps the right edge. */
.table-command-bar {
  justify-content: normal;
  grid-template-columns: 2.55rem 2.55rem auto minmax(0, 1fr);
}
.table-command-bar .table-command-bar__settle { justify-self: end; min-width: 4.6rem; }

@media (max-width: 30rem) {
  .table-command-bar { grid-template-columns: 2.55rem 2.55rem auto minmax(0, 1fr); }
}

/* Disabled undo/redo still used the cream disabled fill. */
.table-command-bar button:disabled { background: #eef1ef; }

/* The diamond's centre rim used an off-palette brass (#b99056); `sun` keeps the
   physical table-rim reading while staying inside the DESIGN.md hue set. */
.table-score-diamond__surface { border: 4px solid var(--concept-sun); }

/* Seats: paper faces, and one Concept A hue per fixed seat position so the four
   players are separable at a glance across the table. */
.table-score-diamond__player { background: var(--concept-paper); }
.table-score-diamond__player--top { border-top-color: var(--concept-jade); }
.table-score-diamond__player--left { border-top-color: var(--concept-coral); }
.table-score-diamond__player--right { border-top-color: var(--concept-sun); }
.table-score-diamond__player--bottom { border-top-color: var(--concept-sky); }
.table-score-diamond__player:hover {
  border-color: var(--concept-jade);
  background: var(--concept-paper);
}
.table-score-diamond__player--current {
  border-color: var(--concept-sun);
  box-shadow: 0 0 0 3px rgb(239 184 69 / 26%);
}
.table-score-diamond__dealer {
  background: var(--concept-sun);
  color: #4a3708;
}

/* Running scores are the one thing read from across a physical table. */
.table-score-diamond__player .table-score-diamond__value,
.table-score-diamond__player strong {
  font-size: 1.55rem;
  font-weight: 950;
}

/* Remaining legacy cream edges inside the ledger columns. */
.table-entry {
  border-bottom-color: var(--concept-line);
  background: var(--concept-paper);
}
.opponent-ledger { border-inline-end-color: var(--concept-line); }
.opponent-ledger__records li { border-bottom-color: var(--concept-line); }
.opponent-ledger__header p { color: var(--concept-muted); }

/* Per-pair 找數 read as a washed-out sage next to an equally pale 劈半, so the
   two were easy to mistake mid-hand. 找數 goes solid jade, 劈半 becomes an amber
   outline, and the batch 結算/找數 keeps coral as the page-level action. */
.opponent-ledger__settle {
  border: 0;
  border-bottom: 3px solid var(--concept-jade-dark);
  background: var(--concept-jade);
  background-image: linear-gradient(180deg, #1c7a5d 0%, var(--concept-jade) 100%);
  color: #fff;
  font-weight: 950;
}
.opponent-ledger__kick {
  border: 1px solid #e6cf8c;
  background: var(--concept-sun-soft);
  color: #795914;
  font-weight: 900;
}
.table-entry__settle-all {
  border: 0;
  border-color: #c8543f;
  background: var(--concept-coral);
  /* .button--primary paints a jade gradient over `background`; override the
     image too or the coral never shows. */
  background-image: linear-gradient(180deg, #f18a74 0%, var(--concept-coral) 100%);
  box-shadow: 0 3px 0 #c8543f, 0 12px 22px -14px rgb(184 70 42 / 80%);
  color: #fff;
}

/* The 糊 bullet beside 拉劈記錄 was the last cream/ivory tile on the page. */
.table-entry__tile {
  border-color: #bfdfd0;
  background: linear-gradient(#fffefb, var(--concept-mint));
  color: var(--concept-jade);
}

/* --- 自摸／食糊／賞罰 entry dialog: colour, size, and two overflow repairs --- */

/* Header/footer were the last cream surfaces inside the dialog. */
.dialog__header,
.dialog__footer { background: var(--concept-paper); }

/* The 自摸／食糊／賞罰 segment sat on a cream track. */
.entry-kind-segment { background: #eef1ef; }

/* The 儲存牌型 card and its tile counter. The counter is a grid cell with
   `place-items: center` and no inline padding, so "0/17-21" sat flush against
   both pill edges and read as clipped. */
.table-achievement-draft {
  border-color: #e6cf8c;
  background: var(--concept-sun-soft);
}
.table-achievement-draft__toggle { color: #795914; }
.table-achievement-draft__toggle b {
  padding-inline: 0.55rem;
  background: var(--concept-sun);
  color: #4a3708;
  font-weight: 950;
  white-space: nowrap;
}
.table-achievement-draft__body {
  border-top-color: #e6cf8c;
  background: var(--concept-paper);
}

/* 參與者可入數 packed its name list hard against the right edge. It already
   wraps; it just had no room to. */
.entry-permission {
  gap: 0.35rem 0.6rem;
  padding: 0.6rem 0.75rem;
}
.entry-permission span { overflow-wrap: anywhere; }
.entry-permission--allowed { border-color: #bfdfd0; }

/* The selected 番 was a pale tint on a pale card — the one value the player must
   confirm before recording. */
.fan-wheel__item.is-selected {
  border-radius: 10px;
  background: var(--concept-jade);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 950;
}

/* --- Main page: phone density and reading order ---------------------------- */

/* 登出 was the only bare text link on a page built entirely from embossed
   cards, so it read as unfinished. Same action, same position, real control. */
.ahu-main-logout {
  justify-self: stretch;
  width: 100%;
  min-height: 3.1rem;
  justify-content: center;
  border: 1px solid var(--concept-line);
  border-bottom: 4px solid #cbd7d0;
  border-radius: 14px;
  background: var(--concept-paper);
  font-weight: 900;
}

@media (max-width: 43.75rem) {
  /* The hero ran 23.5rem tall with a narrow CTA and ~40% of its width given to
     the mascot, so "快速開枱" never appeared on the first screen. */
  .ahu-main-table { min-height: 0; }
  .ahu-main-table__copy { padding: 1.15rem 1.05rem 1.05rem; }
  .ahu-main-table h2 { margin: 0.1rem 0 0.85rem; font-size: 1.85rem; }
  .ahu-main-eyebrow { margin-bottom: 0.5rem; font-size: 0.78rem; }
  .ahu-main-table__copy > small { font-size: 0.85rem; }

  /* Three stats sat in a flex row whose phone override removed the padding, so
     the hairline separators collapsed onto the values and the row read as one
     run-on string. Equal columns on a translucent tile instead. */
  .ahu-main-table dl {
    display: grid;
    margin-bottom: 0.9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .ahu-main-table dl div,
  .ahu-main-table dl div + div {
    min-width: 0;
    padding: 0.45rem 0.4rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 10px;
    background: rgb(255 255 255 / 11%);
    text-align: center;
  }

  .ahu-main-table dt { font-size: 0.68rem; }
  .ahu-main-table dd { font-size: 0.9rem; }

  /* The single highest-emphasis action on the page should not be a narrow pill
     with the mascot crowding it. */
  .ahu-main-table__continue {
    width: 100%;
    justify-content: center;
    min-height: 3.15rem;
  }

  .ahu-main-table__mascot { right: 0.35rem; bottom: auto; top: 3.6rem; width: 6rem; }
  .ahu-main-table__bubble { top: 1rem; right: 1rem; bottom: auto; }

  /* Quick actions were 6.75rem full-width cards, three stacked. Same three
     buttons, same order and colour coding, as compact rows. */
  .ahu-main-quick > div,
  .ahu-main-quick--three > div { gap: 0.5rem; }

  .ahu-main-quick__action {
    min-height: 3.9rem;
    padding: 0.55rem 0.8rem;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  .ahu-main-quick__action > span:first-child {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
  }

  .ahu-main-quick__action strong { font-size: 1rem; }
  .ahu-main-quick__action small { font-size: 0.76rem; }

  /* Six destination tiles had free heights and a 6.1rem mascot pushing the
     title into a thin band at the top. Fixed square, title first, mascot as a
     corner watermark — all six now read identically. */
  .ahu-main-destinations__grid { gap: 0.6rem; }

  .ahu-main-destination {
    position: relative;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0.8rem 0.75rem;
  }

  .ahu-main-destination > span { position: relative; z-index: 2; }
  .ahu-main-destination strong { font-size: 1.02rem; line-height: 1.25; }
  .ahu-main-destination small { font-size: 0.74rem; line-height: 1.4; }

  .ahu-main-destination .hulo-action-graphic {
    position: absolute;
    z-index: 1;
    right: -0.35rem;
    bottom: -0.35rem;
    width: 5.6rem;
    height: auto;
  }
}

/* --- Community page -------------------------------------------------------- */

/* The generated QR was pinned to a hard 11rem (176px) while its phone container
   is ~114px, so the SVG spilled to a document width of 432px against a 390px
   viewport. That horizontal document overflow is what exposed the strip of body
   background down the right side of the whole page. */
.flow-qr--generated svg.qr-code {
  width: min(100%, 11rem);
  height: auto;
}

.flow-qr { min-width: 0; }
.flow-qr figcaption,
.flow-qr__fallback { overflow-wrap: anywhere; }

/* The invite card was the only surface in the app with a coloured left border;
   Concept A's motif is the embossed bottom border. */
.flow-community .ahu-community-invite {
  border: 1px solid #b9d8cf;
  border-bottom: 5px solid #a9d3c1;
  border-radius: var(--concept-radius);
}

/* The 8-digit code is the thing people read aloud across a table, but it was
   set smaller than the card's own title. */
.ahu-community-invite__copy .flow-invite-code {
  color: var(--concept-jade);
  font-size: 2rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 43.75rem) {
  /* One column on a phone so the QR gets real size instead of a 7-8rem sliver
     wedged beside the copy. Same elements, same order. */
  .flow-community .ahu-community-invite {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
  }

  .ahu-community-invite__copy { justify-items: center; }
  .ahu-community-invite__copy .flow-invite-code { font-size: 1.9rem; }

  .flow-community .ahu-community-invite .flow-qr {
    width: min(100%, 12rem);
    justify-self: center;
  }
}

@media (max-width: 24.4rem) {
  .flow-community .ahu-community-invite { grid-template-columns: minmax(0, 1fr); }
  .flow-community .ahu-community-invite .flow-qr { width: min(100%, 11rem); }
}

/* --- Shared inner-page surfaces (community / profile / 小氣簿) -------------- */

/* The sticky inner-page top bar was still the legacy cream. */
.ahu-topbar {
  border-bottom-color: rgb(30 73 57 / 9%);
  background: rgb(255 254 251 / 96%);
}

/* The 8-digit invite code was being caught by the card's generic body-copy rule
   (`.ahu-community-invite__copy > p:not(.ahu-kicker)`, which outranked it), so
   the one value people read aloud rendered at 12px in muted grey. */
.flow-community .ahu-community-invite__copy .flow-invite-code {
  color: var(--concept-jade);
  font-size: 2rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

@media (max-width: 43.75rem) {
  .flow-community .ahu-community-invite__copy .flow-invite-code { font-size: 1.9rem; }
}

/* Profile stat tiles kept a cream face. */
.ahu-profile-stats > div,
.statistics-summary > div,
.player-stat-card dl > div { background: rgb(247 250 248 / 90%); }

/* --- Profile: make the ability radar readable ------------------------------ */

/* The rings were cream (#f5efe2) on a cream page and the value polygon was a
   30%-alpha teal, so at low values the chart was effectively invisible. */
.ahu-radar__ring,
.ahu-radar__axis {
  fill: var(--concept-paper);
  stroke: #c7d9d0;
}

.ahu-radar__value {
  fill: rgb(20 97 74 / 22%);
  stroke: var(--concept-jade);
  stroke-width: 2.5;
}

.ahu-ability-bars i { background: #e8eeeb; }
.ahu-ability-bars i b { background: var(--concept-jade); }

/* 勝 / 負 / 和 keep their meaning-by-colour, now on Concept A hues. */
.ahu-outcome-stats > div:nth-child(1) dd { color: var(--concept-jade); }
.ahu-outcome-stats > div:nth-child(2) dd { color: #9c3b26; }
.ahu-outcome-stats > div:nth-child(3) dd { color: #795914; }
.ahu-outcome-stats > div + div { border-inline-start-color: rgb(20 97 74 / 16%); }

/* --- 小氣簿: the monthly trend ---------------------------------------------- */

/* Twelve months in a 2.5rem-minimum grid overflow a 390px phone. The row does
   scroll, but with no track behind the bars and every value at zero it read as
   a ~150px empty band with the later months apparently missing. A light column
   track gives each month a visible slot and makes the scroll obvious. */
.ahu-monthly-trend {
  min-height: 8.75rem;
  grid-template-columns: repeat(12, minmax(2.35rem, 1fr));
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.ahu-monthly-trend > span {
  height: 7.6rem;
  background:
    linear-gradient(#eef1ef 0 0) top center / 1.05rem calc(100% - 2.7rem) no-repeat;
  border-radius: 4px;
}

.ahu-monthly-trend b {
  border-radius: 4px 4px 0 0;
  background: #b6c1bb;
}

.ahu-monthly-trend b.delta--positive { background: var(--concept-jade); }
.ahu-monthly-trend b.delta--negative { background: #c8543f; }
.ahu-monthly-trend small { color: var(--concept-muted); }

/* --- Profile identity actions and the 小氣簿 year field --------------------- */

/* 更改頭像 stretched to the full row while 更改名稱 sat at its text width, so
   the pair read as one primary and one afterthought. Same two buttons, equal
   weight, Concept A shape. */
.ahu-profile-hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ahu-profile-hero__actions > .button,
.ahu-profile-hero__actions .ahu-text-button {
  width: 100%;
  min-height: 2.9rem;
  margin-inline: 0;
  justify-content: center;
  border: 1px solid var(--concept-line);
  border-bottom: 4px solid #cbd7d0;
  border-radius: 14px;
  background: var(--concept-paper);
  background-image: none;
  box-shadow: none;
  color: var(--concept-jade);
  font-weight: 900;
}

.ahu-profile-hero__actions .ahu-profile-action--avatar-change {
  background: var(--concept-sky-soft, #eaf3f8);
  border-bottom-color: #9fc6dc;
  color: #285f82;
}

.ahu-profile-hero__actions .ahu-profile-action--avatar-remove {
  background: var(--concept-coral-soft, #fdebe7);
  border-bottom-color: #e8a395;
  color: #963d2b;
}

.ahu-profile-action--name-change { grid-column: 1 / -1; }

.ahu-profile-badge-link {
  background: var(--concept-sun-soft, #fff4d8);
  border-color: #e4c471;
  color: #775714;
}

/* 快速入枱選單 and 分享 were bare text on a page of embossed cards. */
.ahu-profile-section > .ahu-text-button,
.ahu-profile-page > .ahu-text-button,
.ahu-ability-heading .ahu-text-button {
  border: 1px solid #bfdfd0;
  border-bottom: 3px solid #a9d3c1;
  border-radius: 999px;
  background: var(--concept-paper);
  color: var(--concept-jade);
  font-weight: 900;
}

/* The year picker was the only raw native control on the page. */
.ahu-ledger-year select {
  min-height: 2.9rem;
  padding: 0.45rem 2rem 0.45rem 0.85rem;
  border: 1px solid var(--concept-line);
  border-bottom-width: 4px;
  border-bottom-color: #cbd7d0;
  border-radius: 14px;
  background: var(--concept-paper);
  color: var(--concept-ink);
  font-size: 0.95rem;
  font-weight: 900;
}

/* The 小氣簿 hero's 勝率／最佳／最差 used hairline dividers; the main-page hero
   now uses translucent tiles, so match it. */
.ahu-ledger-summary > dl > div {
  padding: 0.45rem 0.4rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 10px;
  background: rgb(255 255 255 / 11%);
}

.ahu-ledger-summary > dl > div + div { border-inline-start-color: rgb(255 255 255 / 16%); }
.ahu-ledger-summary > dl dt { color: #a9cfbe; }
.ahu-ledger-summary > dl dd { color: #fff; }

/* Empty 拉劈 record slots used a warm sand (#d8cdae) that no longer belongs to
   any Concept A ramp; a neutral grey reads as "nothing here yet" instead of as
   a faint gold value. */
.opponent-ledger__record-value { color: var(--concept-ink); }
/* Listed after the value rule: the empty slot carries both classes. */
.opponent-ledger__record-value.opponent-ledger__empty { color: #b6c1bb; }

/* ---------------------------------------------------------------------------
   Long-name pass — 2026-08-11

   Display names are user-supplied and routinely longer than the four demo
   fixtures ("Harry", "阿明"). Every name-bearing surface used to end in
   `white-space: nowrap; text-overflow: ellipsis`, so "Kenneth Lau Chi Wai"
   became "Kenneth Lau C…" on the 牌桌 diamond, the 統計 cards, the 聊天
   header, the 社群 member grid and the 結算 score grid — and in the 結算
   score grid the names overlapped their neighbours outright.

   The rule now is: a name wraps onto as many lines as it needs, and its cell
   grows. Only the 牌桌 diamond keeps a clamp (2 lines), because the seat tiles
   sit inside a fixed diamond and cannot grow without pushing the seats apart.
   Nothing here changes which names are rendered or in what order.
   --------------------------------------------------------------------------- */

.ahu-name-line {
  flex-wrap: wrap;
  row-gap: 0.1rem;
}

.ahu-name-line__text {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
}

/* 牌桌 — seat tiles. The diamond geometry is fixed, so the name clamps at two
   lines rather than wrapping freely; `min-height` lets the tile take the
   second line without the seats colliding. */
/* `.table-score-diamond__player span` also sets `white-space: nowrap` at equal
   specificity, so the wrapping properties have to be restated here or the
   clamp has nothing to clamp. */
.table-score-diamond__player .ahu-name-line__text {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.15;
}

.table-score-diamond__player {
  height: auto;
  min-height: 4.8rem;
}

/* 牌桌 — the "你 · 找數" identity strip above the diamond. */
.table-current-identity strong,
.table-waiting-identity strong {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* 牌桌 — 拉劈記錄 column headers (上家／對家／下家). */
.opponent-ledger__header {
  height: auto;
  align-items: start;
}

.opponent-ledger__header .ahu-name-line {
  justify-content: center;
  text-align: center;
}

/* 記錄 — the per-hand delta grid names each of the four players in a narrow
   column, so those were cut hardest of all. */
.hand-deltas small {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.2;
}

/* 統計 — score-curve legend and per-player cards. */
.score-chart__name,
.player-stat-card h3 {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* 聊天 — message author. A long name now takes a second line above the
   bubble instead of being cut mid-word. */
.table-chat-message header strong {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.table-chat-message header {
  align-items: baseline;
  flex-wrap: wrap;
}

/* 社群 — the 成員 list.

   This was a horizontally-scrolling strip of 3.3rem avatar cells, which is far
   too narrow for a real display name: "Kenneth Lau Chi Wai" broke to five
   lines mid-word and still overflowed. No amount of wrapping fixes a 53px
   cell, so the strip is now one full-width row per member — avatar, name, and
   the 管理員 chip on the right. Same members, same order, same count. */
.flow-community.ahu-screen .flow-member-list {
  display: grid;
  overflow-x: visible;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

.flow-community.ahu-screen .flow-member-list li {
  display: grid;
  width: auto;
  min-width: 0;
  padding: 0.3rem;
  border: 1px solid var(--concept-line);
  border-bottom-width: 3px;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  background: var(--concept-paper);
}

.flow-community.ahu-screen .flow-member-list li > .flow-member-list__profile {
  display: grid;
  min-height: 3.25rem;
  padding: 0.35rem 0.3rem;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: 0.6rem;
  text-align: start;
}

.flow-community.ahu-screen .flow-member-list strong,
.flow-member-list strong {
  overflow: visible;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
}

.flow-member-list .ahu-name-line {
  max-width: 100%;
  justify-content: start;
}

.flow-community.ahu-screen .flow-member-list .ahu-name-line__text {
  font-size: 0.92rem;
  overflow-wrap: break-word;
  text-align: start;
}

/* Member administration is one deliberate action cluster, never two badges floating
   over the profile target. Equal stable dimensions keep the row still when a role changes. */
.flow-member-list__actions {
  display: inline-grid;
  padding-inline-end: 0.15rem;
  grid-auto-columns: 2.65rem;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.4rem;
}

.flow-community.ahu-screen .flow-member-list__actions .ahu-icon-button {
  position: static;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  padding: 0;
  border: 1px solid #afd4c3;
  border-bottom: 4px solid #82b9a1;
  border-radius: 12px;
  transform: none;
  background: var(--concept-mint, #dff1e9);
  color: var(--concept-jade, #14614a);
  box-shadow: none;
}

.flow-community.ahu-screen .flow-member-list__actions .ahu-icon-button:hover,
.flow-community.ahu-screen .flow-member-list__actions .ahu-icon-button:focus-visible {
  border-color: #82b9a1;
  background: #d3ebdf;
}

.flow-community.ahu-screen .flow-member-list__actions .flow-member-list__appoint.is-appointed {
  border-color: #e0c383;
  border-bottom-color: #cba54d;
  background: var(--concept-sun-soft, #fff0bf);
  color: #795914;
}

.flow-community.ahu-screen .flow-member-list__actions .flow-member-list__remove {
  border-color: #e8b5aa;
  border-bottom-color: #dc8e7f;
  background: var(--concept-coral-soft, #fde3dd);
  color: #963d2b;
}

.flow-community.ahu-screen .flow-member-list__actions .flow-member-list__remove:hover,
.flow-community.ahu-screen .flow-member-list__actions .flow-member-list__remove:focus-visible {
  border-color: #d77f6d;
  background: #fbd6cd;
}

.flow-community.ahu-screen .flow-member-list__actions .ahu-icon-button:disabled {
  opacity: 0.48;
}

.community-rejoin-requests {
  display: grid;
  margin-block-start: 1rem;
  gap: 0.5rem;
}

.community-rejoin-requests h3 { margin: 0; font-size: 1rem; }
.community-rejoin-requests ul { display: grid; margin: 0; padding: 0; gap: 0.4rem; list-style: none; }
.community-rejoin-requests li {
  display: grid;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--concept-line);
  border-radius: 8px;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  background: var(--concept-paper);
}
.community-rejoin-requests li > span { min-width: 0; }
.community-rejoin-requests li strong,
.community-rejoin-requests li small { display: block; overflow-wrap: break-word; }
.community-rejoin-requests li small { color: var(--concept-muted); font-size: 0.75rem; }

@media (min-width: 34rem) {
  .flow-community.ahu-screen .flow-member-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 結算 — 最終分數. This grid was the worst case: names spilled out of their
   cells and printed on top of each other. The cells now wrap and the row
   stretches to the tallest name. */
/* Cells stretch to the tallest name, and the score is pinned to the bottom row
   so every player's number still lines up across the grid. */
.final-score-grid span {
  height: auto;
  grid-template-rows: 1fr auto;
  align-content: stretch;
}

.final-score-grid small {
  width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.final-score-edit-grid label > span {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* 結算 — 今晚獎項 cards on the celebration panel. */
.final-settlement-award strong,
.final-settlement-award b,
.final-settlement-award small {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.final-settlement-award {
  align-items: start;
}

/* 好友／換人 lists share the same name component. */
.ahu-friend-row strong,
.ahu-opponent-list strong,
.ahu-community-card__body strong {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* ---------------------------------------------------------------------------
   返回進行中牌枱 banner — 2026-08-11

   This is the one thing on the main screen that is genuinely time-sensitive:
   a table is live right now and the user is not looking at it. It used to be
   pale mint (#eaf4ed) on a cream page, which read as another quiet card and
   was routinely missed. It is now coral — the Concept A alert accent, and the
   only coral surface above the fold — with white type, a live dot, and a
   breathing highlight so it registers in peripheral vision.

   Height stays at 3.5rem because `.ahu-flow-shell.has-active-table .ahu-topbar`
   pins the topbar to `top: 3.5rem`.
   --------------------------------------------------------------------------- */

/* A deepened coral rather than `--concept-coral` itself: white on
   `#e96f58` is only 3.05:1, below WCAG AA for text this size. The ramp
   below holds ~4.6–5.0:1 across the band the wording sits in. */
.ahu-active-table-notice {
  border-bottom: 3px solid #93321d;
  background: #c1462e;
  background-image: linear-gradient(180deg, #cf5138 0%, #c1462e 60%, #ae3c26 100%);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgb(147 50 29 / 80%);
}

.ahu-active-table-notice small {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: rgb(255 255 255 / 92%);
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* The live dot. Purely decorative — the link already carries an aria-label. */
.ahu-active-table-notice small::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  flex: none;
  background: #fff;
  box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
  animation: ahu-active-table-pulse 1.8s ease-out infinite;
}

.ahu-active-table-notice strong {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 950;
}

.ahu-active-table-notice .lucide-icon {
  color: #fff;
  opacity: 0.95;
}

.ahu-active-table-notice:hover,
.ahu-active-table-notice:focus-visible {
  background-image: linear-gradient(180deg, #d95c41 0%, #cb4f36 60%, #b8442c 100%);
}

@keyframes ahu-active-table-pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 75%); }
  70% { box-shadow: 0 0 0 0.42rem rgb(255 255 255 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .ahu-active-table-notice small::before { animation: none; }
}

/* ---------------------------------------------------------------------------
   管理員 indicator — 2026-08-11

   The person who opened the community stays in the 成員 grid (so the 成員 count
   and the grid order are unchanged) and is marked in place with a gold crown
   chip instead. Their avatar also gets the gold ring the podium uses, so the
   admin is findable at a glance without reading every name.
   --------------------------------------------------------------------------- */

.flow-member-list__owner {
  display: inline-flex;
  max-width: 100%;
  padding: 0.1rem 0.42rem 0.1rem 0.3rem;
  border: 1px solid #e0c383;
  border-radius: 999px;
  align-items: center;
  gap: 0.18rem;
  background: var(--concept-sun-soft, #fff0bf);
  color: #8a6413;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

.flow-member-list__owner .lucide-icon {
  width: 0.68rem;
  height: 0.68rem;
  flex: none;
}

/* Somebody who left the 社群 but played at this 牌枱: their name has to stay for the
   記錄 to read correctly, so it is marked rather than removed. Deliberately quieter than
   the 管理員 chip — it is a footnote, not a status worth drawing the eye to. */
.ahu-former-member {
  display: inline-flex;
  max-width: 100%;
  margin-inline-start: 0.3rem;
  padding: 0.1rem 0.42rem;
  border: 1px solid var(--line, #d7e0da);
  border-radius: 999px;
  align-items: center;
  background: var(--surface-muted, #f1f4f2);
  color: var(--dim, #5d6b63);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

.flow-member-list li.is-community-owner .ahu-avatar,
.flow-member-list li.is-community-owner .ahu-presence-wrap {
  box-shadow: 0 0 0 2px #e0c383;
}

/* ---------------------------------------------------------------------------
   Real-play repairs: table fan rules and live chat preview
   --------------------------------------------------------------------------- */

.table-command-bar {
  grid-template-columns: 2.55rem 2.55rem auto 2.55rem minmax(0, 1fr);
}

.table-command-bar .table-command-bar__fan-rules {
  color: var(--concept-jade, #14614a);
}

.table-command-bar__fan-rules .lucide-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.table-waiting-fan-rules {
  display: grid;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  place-items: center;
  background: #fff;
  color: var(--concept-jade, #14614a);
}

.table-waiting-fan-rules .lucide-icon { width: 1rem; height: 1rem; }

.table-fan-rules-dialog {
  width: min(48rem, calc(100vw - 1.5rem));
  max-height: min(50rem, calc(100dvh - 1.5rem));
}

.table-fan-rules-dialog .dialog__header > div {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.table-fan-rules-dialog .dialog__header small {
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.table-fan-rules-dialog__body {
  display: grid;
  min-height: 0;
  max-height: calc(100dvh - 10.5rem);
  padding: 0.85rem;
  overflow-y: auto;
  align-content: start;
  gap: 0.75rem;
}

.table-fan-rules-list .community-fan-list:not(.community-fan-list--editing) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.table-fan-rules-sheet {
  display: grid;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: 1.35rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 0.65rem;
  background: var(--concept-mint, #e4f2eb);
  color: var(--concept-jade, #14614a);
  text-align: start;
}

.table-fan-rules-sheet span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.table-fan-rules-sheet strong,
.table-fan-rules-sheet small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-fan-rules-sheet small { color: var(--ink-muted); }

.table-fan-rules-state {
  display: grid;
  min-height: 16rem;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  color: var(--ink-muted);
  text-align: center;
}

.table-chat-preview {
  position: fixed;
  z-index: 70;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: min(29rem, calc(100vw - 2rem));
  min-height: 4rem;
  border: 1px solid #cbdad2;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  overflow: hidden;
  background: #fffefb;
  box-shadow: 0 18px 42px -18px rgb(32 53 45 / 62%);
  animation: table-chat-preview-in 180ms ease-out;
}

.table-chat-preview__open {
  display: grid;
  min-width: 0;
  min-height: 4rem;
  padding: 0.55rem 0.45rem 0.55rem 0.65rem;
  border: 0;
  grid-template-columns: 2rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  color: var(--ink);
  text-align: start;
}

.table-chat-preview__open > span {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.table-chat-preview__open small {
  overflow: hidden;
  color: var(--concept-jade, #14614a);
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-chat-preview__open strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 800;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.table-chat-preview__open > .lucide-icon {
  color: var(--concept-jade, #14614a);
}

.table-chat-preview__dismiss {
  display: grid;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
  place-items: center;
  align-self: stretch;
  background: #f0f4f1;
  color: var(--ink-muted);
}

.table-chat-preview__dismiss .lucide-icon {
  width: 1rem;
  height: 1rem;
}

@keyframes table-chat-preview-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 56.24rem) {
  .table-chat-preview {
    right: 0.65rem;
    bottom: calc(var(--table-tabs-clearance) + 0.75rem + env(safe-area-inset-bottom));
    width: calc(100vw - 1.3rem);
  }
}

@media (max-width: 30rem) {
  .table-command-bar {
    grid-template-columns: 2.55rem 2.55rem minmax(4.1rem, auto) 2.55rem minmax(4.6rem, auto);
  }

  .table-command-bar__invite span { display: none; }
  .table-command-bar__invite { min-width: 2.55rem; }
  .table-fan-rules-list .community-fan-list:not(.community-fan-list--editing) { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .table-chat-preview { animation: none; }
}