/* Calcutta — scorecard chrome tokens (spec 102). Do not import full style.css. */

:root {
  --bg-cream-canvas: #faf8f2;
  --bg-cream-card: #f2ede2;
  --bg-cream-card-light: #faf8f5;
  --color-forest: #14321a;
  --color-forest-medium: #1c4825;
  --color-forest-light: #2a6e3b;
  --color-gold: #c2a26a;
  --color-gold-dark: #a5844d;
  --color-charcoal: #2c2b28;
  --color-muted: #7e7c74;
  --color-border: #e3dccf;
  --color-white: #ffffff;
  --color-danger: #b81f1f;
  --stc-chrome-blur: 18px;
  --stc-chrome-gold: rgba(194, 162, 106, 0.38);
  --stc-nav-dock-band: 44px;
  --stc-nav-center-lift: -18px;
  --stc-bottom-chrome: calc(var(--stc-nav-dock-band) + 8px + env(safe-area-inset-bottom, 0px) + 36px);
  --stc-z-toast: 200000;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 4px rgba(28, 27, 24, 0.05);
  --shadow-md: 0 8px 16px rgba(28, 27, 24, 0.08);
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.dark-mode {
  --bg-cream-canvas: #0c120e;
  --bg-cream-card: #152219;
  --bg-cream-card-light: #1d2e23;
  --color-forest: #eaf5ec;
  --color-forest-medium: #a2d9b1;
  --color-forest-light: #52b273;
  --color-gold: #d4af37;
  --color-gold-dark: #ffd700;
  --color-charcoal: #f5f5f5;
  --color-muted: #8e9992;
  --color-border: #1c2b20;
  --color-white: #121a15;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button,
.chip,
.event-gate-btn,
.nav-item,
.tree-player,
.pot-stat,
.icon-btn,
.icon-x {
  touch-action: manipulation;
}

.btn:active:not(:disabled),
.chip:active,
.event-gate-btn:active,
.payout-board-lot:active,
.nav-item:active,
.tree-player:active:not(:disabled),
button.pot-stat:active {
  opacity: 0.72;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: #1c2b21;
  color: var(--color-charcoal);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

body.dark-mode {
  background-color: #070a08;
}

.app-header,
.app-main,
.app-nav {
  width: 100%;
  max-width: 600px;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 850;
  min-height: calc(62px + env(safe-area-inset-top, 0px));
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 14px 12px 16px;
  background: linear-gradient(180deg, rgba(24, 58, 36, 0.97) 0%, rgba(18, 46, 28, 0.93) 100%);
  backdrop-filter: blur(var(--stc-chrome-blur));
  -webkit-backdrop-filter: blur(var(--stc-chrome-blur));
  border-bottom: 1px solid var(--stc-chrome-gold);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 6px 20px rgba(0, 0, 0, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

body.dark-mode .app-header {
  background: linear-gradient(180deg, rgba(14, 20, 16, 0.96) 0%, rgba(10, 16, 12, 0.9) 100%);
  border-bottom-color: rgba(212, 175, 55, 0.22);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.logo-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.logo-text-mark {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--color-gold);
}

.logo-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(194, 162, 106, 0.85);
  margin-top: 2px;
}

.stc-app-version {
  margin-left: 0.42em;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(194, 162, 106, 0.58);
  vertical-align: 0.1em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.mode-pill {
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-gold);
  color: #112f1f;
  cursor: pointer;
}

.mode-pill.is-follow {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.start-over-pill {
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  white-space: nowrap;
}

.start-over-pill:hover,
.start-over-pill:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.recent-events {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.view-card > .recent-events {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.recent-events-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.recent-event-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.recent-event-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--bg-cream-card);
  color: var(--color-charcoal);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}

.recent-event-open:disabled {
  cursor: default;
  opacity: 0.72;
}

.recent-event-name {
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-event-meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

body.dark-mode .recent-event-open {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: inherit;
}

.app-header .icon-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.02rem;
}

.app-header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-gold) !important;
}

.app-main {
  flex: 1;
  background: var(--bg-cream-canvas);
  padding: 16px 16px var(--stc-bottom-chrome);
  min-height: calc(100vh - 70px);
  color: var(--color-charcoal);
}

.app-view {
  display: none;
}

.app-view.active {
  display: block;
}

.app-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  bottom: 0;
  min-height: var(--stc-nav-dock-band);
  padding: 2px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(28, 62, 40, 0.94) 0%, rgba(20, 50, 26, 0.97) 100%);
  border-top: 1px solid var(--stc-chrome-gold);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
}

body.dark-mode .app-nav {
  background: linear-gradient(180deg, rgba(18, 28, 22, 0.94) 0%, rgba(12, 18, 14, 0.97) 100%);
}

.nav-item {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  gap: 3px;
  padding: 7px 10px;
  cursor: pointer;
}

.nav-item i {
  font-size: 1.15rem;
}

.nav-item:not(.center-action-btn).active {
  color: var(--color-gold);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
}

.nav-item.center-action-btn {
  position: relative;
  top: 0;
  grid-column: 2;
  padding: 7px 4px;
  justify-content: flex-end;
}

.action-circle-wrapper {
  width: 50px;
  height: 50px;
  background: linear-gradient(145deg, #245232 0%, #14321a 100%);
  border: 2px solid rgba(194, 162, 106, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--bg-cream-canvas), 0 6px 18px rgba(0, 0, 0, 0.28);
  margin-top: var(--stc-nav-center-lift);
  margin-bottom: 6px;
}

.nav-item.center-action-btn .action-circle-wrapper i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.22rem;
}

.nav-item.center-action-btn.active .action-circle-wrapper {
  background: linear-gradient(145deg, #d4b06a 0%, var(--color-gold) 55%, #a5844d 100%);
}

.nav-item.center-action-btn.active .action-circle-wrapper i {
  color: #14321a;
}

.nav-item.center-action-btn.active span {
  color: var(--color-gold);
}

.view-card {
  background: var(--bg-cream-card-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  min-width: 0;
  max-width: 100%;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.section-title-row .section-title {
  margin-bottom: 0;
}

.stc-card-collapsible-body > .settle-label-toggle {
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-forest);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.section-title i {
  color: var(--color-gold);
  font-size: 1.05rem;
}

.stc-card-collapse-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.stc-card-collapse-header-row .section-title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}

.stc-card-collapse-header-row .section-title:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.stc-card-collapse-chevron {
  flex-shrink: 0;
  margin: 0;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  line-height: 1;
  align-self: center;
}

.stc-card-collapse-chevron:hover {
  color: var(--color-forest);
  background: rgba(0, 0, 0, 0.04);
}

.stc-card-collapse-chevron:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.stc-card-collapse-chevron-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0.5rem;
  opacity: 0.9;
}

.stc-card-collapse-chevron-icons .fa-chevron-up {
  margin-bottom: -2px;
}

body.dark-mode .stc-card-collapse-chevron:hover {
  background: rgba(255, 255, 255, 0.08);
}

.stc-collapsible-card.is-collapsed .stc-card-collapsible-body {
  display: none;
}

.stc-collapsible-card:not(.is-collapsed) .stc-card-collapsible-body {
  margin-top: 10px;
}

.stc-collapsible-card.is-collapsed .stc-card-collapse-header-row {
  margin-bottom: 0;
}

.section-subtitle {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 14px;
}

.form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.event-logo-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.event-logo-preview {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--bg-cream-canvas);
  padding: 4px;
}

.event-logo-pick {
  margin: 0;
  cursor: pointer;
}

.event-identity-head {
  align-items: center;
}

.event-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.event-identity-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}

.event-identity-name.section-title {
  display: block;
  font-size: 1.28rem;
  line-height: 1.25;
  font-weight: 700;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-forest-medium);
  margin-bottom: 6px;
}

.form-control {
  font-family: var(--font-sans);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-size: 0.95rem;
  color: var(--color-charcoal);
  outline: none;
  width: 100%;
}

.form-control:focus {
  border-color: var(--color-forest-light);
  box-shadow: 0 0 0 3px rgba(30, 63, 32, 0.1);
}

.form-control:disabled {
  opacity: 0.65;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn {
  font-family: var(--font-sans);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.85rem;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-forest);
  color: var(--color-white);
  border: 1px solid var(--color-forest);
}

body.dark-mode .btn-primary {
  background: #143a23;
  color: #eaf5ec;
  border: 1px solid #2a6e3b;
}

.btn-primary:disabled {
  opacity: 1;
}

.btn-outline {
  background: transparent;
  color: var(--color-forest-medium);
  border: 1px solid var(--color-forest-medium);
}

.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid rgba(184, 31, 31, 0.35);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.auction-nav {
  margin: -6px -6px 0;
  padding: 0 6px 4px;
}

.auction-links {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--color-border);
}

.auction-links button {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
}

.auction-links button.is-on {
  color: var(--color-forest);
  box-shadow: 0 2px 0 var(--color-gold);
}

.auction-body {
  margin-top: 4px;
  padding-top: 12px;
  border-top: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auction-section {
  background: var(--bg-cream-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.auction-section .auction-lot-list-wrap,
.auction-section .chip-row,
.auction-section .payout-board-lots,
.auction-section .pot-banner-block {
  margin: 0;
}

.auction-body > .chip-row:first-child,
.auction-body > .auction-lot-list-wrap:first-child {
  margin-top: 0;
}

.auction-lot-list-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 8px;
}

.btn-run-auction {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

.btn-run-auction.is-running,
body.dark-mode .btn-run-auction.is-running {
  background: var(--color-gold);
  color: #14321a;
}

.auction-lot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  contain: layout;
}

.auction-lot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border);
  background: var(--bg-cream-card);
  color: var(--color-forest);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  touch-action: manipulation;
  contain: layout style;
}

.auction-lot-grip {
  flex-shrink: 0;
  color: var(--color-muted);
  cursor: grab;
  touch-action: none;
  padding: 2px 4px;
  font-size: 0.95rem;
}

.auction-lot-name {
  flex: 1;
  min-width: 0;
}

.auction-lot-status {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.auction-lot-item.is-progress .auction-lot-status {
  color: var(--color-gold-dark);
}

.auction-lot-item.is-complete .auction-lot-status {
  color: var(--color-forest-light);
}

.auction-lot-item.is-active {
  border-color: var(--color-forest);
  background: var(--color-forest);
  color: var(--color-white);
}

.auction-lot-item.is-active .auction-lot-grip {
  color: var(--color-gold);
}

.auction-lot-item.is-active .auction-lot-status {
  color: var(--color-gold);
}

.auction-lot-item.is-dragging {
  opacity: 0.7;
}

.auction-lot-item.is-dragging .auction-lot-grip {
  cursor: grabbing;
}

.btn-xs {
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.sum-ok {
  color: var(--color-forest-light);
  font-weight: 700;
  font-size: 0.82rem;
}

.sum-bad {
  color: var(--color-danger);
  font-weight: 700;
  font-size: 0.82rem;
}

.event-gate-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  gap: 10px;
  margin: 10px 0 14px;
}

.event-gate-cluster {
  min-width: 0;
}

.event-gate-cluster .gate-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.event-gate-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-cream-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.event-gate-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px 9px;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: var(--color-forest-medium);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.event-gate-btn i {
  font-size: 1.05rem;
  color: var(--color-gold-dark);
}

.event-gate-btn.is-on {
  background: var(--color-forest);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.event-gate-btn.is-on i {
  color: var(--color-gold);
}

body.dark-mode .event-gate-btn.is-on {
  background: #143a23;
  color: #eaf5ec;
  box-shadow: none;
  outline: 1px solid #2a6e3b;
}

#event-gate .btn {
  width: 100%;
}

.csv-import {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.csv-import-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-forest);
  margin: 0 0 4px;
}

.csv-slot {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.csv-slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.csv-slot-name {
  font-weight: 700;
  font-size: 0.88rem;
}

.csv-slot-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

#event-gate .csv-import .btn {
  width: auto;
}

#event-gate .csv-import > .btn-primary {
  width: 100%;
  margin-top: 12px;
}

.csv-upload-lbl {
  margin: 0;
  cursor: pointer;
}

.csv-upload-lbl input {
  display: none;
}

.csv-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-md);
  font-weight: 600;
  max-width: 100%;
}

.csv-file-clear {
  border: none;
  background: none;
  padding: 0 2px;
  color: var(--color-muted);
  cursor: pointer;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.chip {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-forest-medium);
  background: transparent;
  color: var(--color-forest-medium);
  cursor: pointer;
}

.chip.paid,
.chip.active {
  background: var(--color-forest);
  color: var(--color-white);
  border-color: var(--color-forest);
}

body.dark-mode .chip.paid,
body.dark-mode .chip.active {
  background: #143a23;
  color: #eaf5ec;
  border-color: #2a6e3b;
}

.chip.is-done {
  opacity: 0.55;
}

.chip.active.is-done {
  opacity: 1;
}

.chip-row .btn {
  align-self: center;
}

.completed-lots {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.completed-lot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--bg-cream-card-light);
  overflow: hidden;
}

.completed-lot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 4px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-forest);
}

.completed-lot-pot {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-dark);
}

.completed-lot-places {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 4px 12px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.chip:disabled {
  cursor: default;
}

.payout-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--bg-cream-card);
}

.payout-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 280px;
}

.payout-matrix th,
.payout-matrix td {
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}

.payout-matrix thead th {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  background: var(--bg-cream-card-light);
  vertical-align: bottom;
}

.payout-matrix .payout-matrix-pays-h {
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid rgba(194, 162, 106, 0.45);
  letter-spacing: 0.06em;
}

.payout-matrix thead tr:nth-child(2) th:first-child,
.payout-matrix tbody td.is-pay-start {
  border-left: 1px solid rgba(194, 162, 106, 0.45);
}

.payout-matrix .payout-matrix-pct {
  display: block;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  margin-top: 2px;
}

.payout-matrix th:first-child,
.payout-matrix td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--color-forest);
}

.payout-matrix tbody tr {
  cursor: pointer;
}

.payout-matrix tbody tr:last-child th,
.payout-matrix tbody tr:last-child td {
  border-bottom: none;
}

.payout-matrix tbody tr.is-active {
  background: rgba(194, 162, 106, 0.18);
}

.payout-matrix tbody td {
  font-weight: 800;
  color: var(--color-forest);
}

.payout-matrix tfoot th,
.payout-matrix tfoot td {
  font-weight: 800;
  color: var(--color-forest);
  background: var(--bg-cream-card-light);
  border-bottom: none;
  border-top: 1.5px solid var(--color-gold);
}

.payout-matrix tfoot td.is-pay-start {
  border-left: 1px solid rgba(194, 162, 106, 0.45);
}

.pot-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 0;
}

.pot-banner-money {
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--bg-cream-card-light);
  overflow: hidden;
}

.pot-banner-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.pot-banner-name {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-forest);
}

.money-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  padding: 10px 12px;
  margin: 0;
  background: var(--bg-cream-card-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.money-bar-item .k {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-right: 6px;
}

.money-amt {
  font-family: var(--font-sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-dark);
  letter-spacing: -0.02em;
}

body.dark-mode .money-amt,
body.dark-mode .player-row .c-sale:not(.is-open),
body.dark-mode .sale-amount-prefix,
body.dark-mode .sale-who-lot,
body.dark-mode .auction-links button.is-on {
  color: #c2a26a;
}

body.dark-mode .auction-links button.is-on {
  box-shadow: 0 2px 0 #c2a26a;
}

.bidder-pick-list .empty-hint {
  flex: 1 1 100%;
}

.pot-stat {
  background: transparent;
  border-radius: 0;
  padding: 10px 8px;
  text-align: center;
  border: none;
}

.pot-banner-money .pot-stat + .pot-stat {
  border-left: 1px solid var(--color-border);
}

button.pot-stat {
  font: inherit;
  color: inherit;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

button.pot-stat.is-active {
  border-color: var(--color-gold);
  background: var(--bg-cream-card-light);
}

.pot-stat .k {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.pot-stat .v {
  font-weight: 800;
  color: var(--color-forest);
  font-size: 0.95rem;
}

.payout-block {
  margin-top: 12px;
  padding: 12px 12px 8px;
  background: var(--bg-cream-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.payout-breakdowns-label {
  margin: 16px 0 4px;
}

.payout-block-house {
  border-left: 3px solid var(--color-gold);
}

.payout-block-places {
  border-left: 3px solid var(--color-forest-light);
}

.payout-block-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.payout-block-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.payout-block-title-row .payout-block-title {
  margin-bottom: 0;
}

.payout-brackets-title {
  margin-top: 14px;
}

.payout-remap-row {
  margin-bottom: 8px;
}

.payout-block-note {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 10px;
  line-height: 1.35;
}

.payout-block .chip-row {
  margin: 0 0 8px;
}

.payout-block .payout-slider:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}

.payout-slider {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.payout-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-charcoal);
}

.payout-pct-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-forest);
  font-weight: 700;
}

.payout-pct-entry label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.payout-lock {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--bg-cream-card);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.payout-lock i {
  pointer-events: none;
}

.payout-lock.is-on {
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
  background: rgba(194, 162, 106, 0.16);
}

.payout-slider.is-locked-pct input[type="range"],
.payout-slider.is-locked-pct input[type="number"] {
  accent-color: var(--color-gold-dark);
  opacity: 0.65;
  pointer-events: none;
  cursor: not-allowed;
}

.payout-pct-entry input {
  width: 3.4rem;
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.payout-slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-forest-light);
  cursor: pointer;
}

.payout-slider input[type="range"]:disabled {
  cursor: default;
  opacity: 0.85;
}

.player-row,
.payout-row,
.bidder-row,
.board-row {
  display: grid;
  gap: 6px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.player-row {
  grid-template-columns: 2.4rem minmax(8.5rem, 1.6fr) minmax(5.6rem, auto) 4.4rem;
}

.player-row input,
.player-row select {
  padding: 7px 8px;
  font-size: 0.88rem;
}

.player-row .c-seed.is-static {
  font-weight: 800;
  text-align: center;
  color: var(--color-forest);
}

.player-row .c-name {
  min-width: 0;
}

button.c-sale {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-sans);
  cursor: pointer;
  width: 100%;
}

.player-row .c-sale {
  min-width: 0;
  padding: 7px 4px;
  text-align: center;
  font-weight: 800;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-dark);
  white-space: nowrap;
}

.player-row .c-sale.is-open {
  color: var(--color-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.player-row .c-sale.is-static {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  cursor: default;
}

.player-row .c-place.is-static {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  cursor: default;
  font-weight: 700;
  color: var(--color-charcoal);
}

.player-row .c-place.is-static {
  font-size: 0.82rem;
  gap: 4px;
}

.player-row .c-place .cal-medal {
  margin-left: 0;
  font-size: 0.78rem;
}

.bidder-pick-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 6px;
  max-height: min(40vh, 280px);
  overflow-y: auto;
  margin: 8px 0 10px;
}

.bidder-pick-row {
  font-family: var(--font-sans);
  font-weight: 600;
  text-align: left;
  width: auto;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-charcoal);
  cursor: pointer;
}

.bidder-pick-row.is-on {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(194, 162, 106, 0.35);
  font-weight: 800;
}

.player-head {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  font-weight: 700;
}

.result-cell {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--color-forest-light);
  text-align: right;
}

.result-cell.is-zero {
  color: var(--color-muted);
  font-weight: 600;
}

.result-cell.is-pending {
  color: var(--color-muted);
  font-weight: 500;
}

.icon-x {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.95rem;
}

.bracket-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hidden {
  display: none !important;
}

.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 300000;
  background: rgba(20, 50, 26, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cal-modal.hidden {
  display: none !important;
}

#bidder-pick-modal.cal-modal {
  align-items: flex-start;
  padding-top: max(12px, env(safe-area-inset-top), 6vh);
  padding-bottom: 12px;
}

#bidder-pick-modal .cal-modal-card {
  max-height: min(78dvh, calc(100dvh - 24px));
  overflow: auto;
}

.cal-modal-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-cream-canvas);
  color: var(--color-charcoal);
  border-radius: var(--radius-lg);
  padding: 20px 18px 16px;
  box-shadow: var(--shadow-md);
}

.cal-modal-card .form-group {
  margin-top: 10px;
}

.sale-who {
  text-align: center;
  margin: 0 0 10px;
}

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

.sale-who-lot {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 6px;
}

.sale-who-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

.sale-who-seed {
  flex: 0 0 auto;
  min-width: 1.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.sale-who-name {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-forest);
  line-height: 1.15;
}

.sale-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 10px 4px 14px;
  border-bottom: 1px solid var(--color-gold);
}

.sale-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.sale-amount-prefix {
  font-family: var(--font-sans);
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  line-height: 1;
}

.sale-amount-input {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
  width: 6ch;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--color-forest);
  font-variant-numeric: tabular-nums;
  caret-color: var(--color-forest-light);
}

.sale-amount-input::placeholder {
  color: var(--color-muted);
  opacity: 0.4;
  font-weight: 600;
}

.sale-amount-input:focus {
  outline: none;
  box-shadow: none;
}

.bracket-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
}

.bracket-item .c-field-size {
  width: 3.5rem;
  padding: 7px 4px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.bracket-item.is-active {
  background: rgba(194, 162, 106, 0.14);
}

.bracket-item .bracket-names {
  display: flex;
  gap: 6px;
  min-width: 0;
  width: auto;
  grid-template-columns: none;
}

.bracket-item .bracket-names input {
  flex: 1;
  min-width: 0;
}

.bracket-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.bracket-names label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.bracket-names input {
  width: 100%;
  min-width: 0;
}

.qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
}

.event-share {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 4px;
}

.event-share-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.share-code-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.share-code-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-forest-medium);
}

.event-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}

.event-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 68px;
  padding: 12px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.event-share-btn i {
  font-size: 1.2rem;
}

#btn-tv-board {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 56px;
  gap: 8px;
  font-size: 0.88rem;
}

.event-share-qr .live-qr canvas,
.event-share-qr .live-qr img,
.event-share-qr .live-qr table,
.event-share-qr canvas,
.event-share-qr img,
.event-share-qr table {
  width: 140px !important;
  height: 140px !important;
}

.qr-wrap canvas,
.qr-wrap img,
.qr-wrap table {
  width: 180px !important;
  height: 180px !important;
}

.share-code {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  color: var(--color-forest);
  font-weight: 700;
}

.event-share .share-code {
  font-size: 1.15rem;
  letter-spacing: 0.14em;
}

.bidder-row {
  grid-template-columns: minmax(0, 1.4fr) 2.8rem 4.8rem 4.8rem;
  column-gap: 10px;
  cursor: pointer;
}

.bidder-row.has-share,
.bidder-head.has-share {
  grid-template-columns: minmax(0, 1.4fr) 2.8rem 4.8rem 4.8rem 2rem;
}

.bidder-row .text-share {
  justify-self: end;
}

.bidder-share-spacer {
  display: block;
}

.text-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-forest-medium);
  cursor: pointer;
}

.text-share:hover,
.text-share:focus-visible {
  background: rgba(20, 50, 26, 0.08);
  color: var(--color-forest);
}

body.dark-mode .text-share {
  color: var(--color-gold);
}

body.dark-mode .text-share:hover,
body.dark-mode .text-share:focus-visible {
  background: rgba(194, 162, 106, 0.16);
  color: #e8d7a8;
}

.payout-board-title-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.payout-board-title .text-share {
  color: var(--color-forest-medium);
}

.bidder-row > :not(:first-child),
.board-row > .settle-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settle-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settle-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bidder-book-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 10px;
}

.bidder-book-toolbar .chip-row {
  margin: 0;
}

.print-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.print-pick-list .btn {
  width: 100%;
  justify-content: center;
}

.bidder-head {
  cursor: default;
}

.bidder-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  justify-content: flex-end;
}

.bidder-head .bidder-sort:first-child {
  justify-content: flex-start;
}

.bidder-sort.is-on {
  color: var(--color-forest);
}

.bidder-sort i {
  font-size: 0.7rem;
}

.bidder-book-row {
  cursor: pointer;
}

.bidder-book-row .bidder-won {
  flex: 0 0 4.6rem;
  font-weight: 700;
  color: var(--color-forest);
}

body.dark-mode .bidder-book-row .bidder-won {
  color: var(--color-forest-medium);
}

.bidder-book-spacer {
  flex: 0 0 28px;
}

.bidder-win-line {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 2.8rem 4.8rem 4.8rem;
  gap: 6px;
  column-gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 0.82rem;
  color: var(--color-charcoal);
}

.bidder-win-line > :not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bidder-win-line .settle-name {
  white-space: normal;
}

.bidder-win-player.is-cashed {
  color: var(--color-forest-light);
  font-weight: 800;
}

.bidder-win-player.is-missed {
  color: var(--color-muted);
}

.bidder-win-meta {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.25;
}

.place-best {
  font-variant-numeric: tabular-nums;
}

.place-best.is-live {
  font-style: italic;
  font-weight: 400;
  color: var(--color-muted);
  white-space: normal;
  line-height: 1.2;
}

.place-best.is-locked {
  font-style: normal;
  font-weight: 800;
  color: var(--color-charcoal);
}

.bidder-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.bidder-edit-row .bidder-num {
  flex: 0 0 2.4rem;
  font-weight: 800;
  color: var(--color-gold-dark);
}

.bidder-num-edit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--color-gold-dark);
  font-weight: 800;
}

.bidder-num-edit .bidder-hash {
  flex: none;
  font-size: 0.95rem;
}

.bidder-num-edit .bidder-num-input {
  flex: none;
  width: 3.4rem;
  min-width: 0;
  padding: 7px 6px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-dark);
}

.bidder-edit-row input {
  flex: 1;
}

.bidder-paid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
}

.bidder-paid input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-forest);
}
  min-width: 0;
}

.bidder-edit-row.is-paddle-only {
  justify-content: flex-start;
}

.bidder-edit-row.is-paddle-only .bidder-num {
  flex: 0 0 auto;
  font-size: 1.15rem;
}

.bidder-row .pl-pos,
.bidder-win-line .pl-pos {
  color: var(--color-forest-light);
  font-weight: 800;
}

.bidder-row .pl-neg,
.bidder-win-line .pl-neg {
  color: var(--color-danger);
  font-weight: 800;
}

.bidder-detail {
  font-size: 0.8rem;
  color: var(--color-muted);
  padding: 0 0 10px;
}

.bidder-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 2.8rem 4.8rem 4.8rem;
  column-gap: 10px;
  padding: 6px 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.bidder-detail-head .bidder-spent,
.bidder-detail-head .bidder-won {
  text-align: right;
}

.bidder-count-unit {
  display: none;
}

.board-row {
  grid-template-columns: 3.2rem minmax(0, 1.2fr) minmax(0, 1fr) 5.2rem;
  column-gap: 10px;
  font-size: 0.88rem;
}

.board-row > :first-child {
  text-align: center;
}

.board-row > :last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.payout-board {
  margin-top: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-cream-card-light);
}

.payout-split-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  margin: 2px 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--bg-cream-card-light);
  text-align: center;
}

.payout-split-item {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-forest);
  white-space: nowrap;
}

.payout-split-place {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.payout-split-pct {
  font-weight: 800;
  color: var(--color-gold-dark);
}

body.dark-mode .payout-split-pct {
  color: var(--color-gold);
}

.payout-board-lots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  margin: 4px 0 2px;
}

.payout-board-lot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--bg-cream-card);
  color: var(--color-forest);
  text-align: center;
  cursor: pointer;
  font: inherit;
  box-shadow: var(--shadow-sm);
}

.payout-board-lot-name {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  max-width: 100%;
}

.payout-board-lot-pot {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-dark);
}

.payout-board-lot.is-on {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.payout-board-lot.is-on .payout-board-lot-pot {
  color: var(--color-gold);
}

.payout-board-lot.is-label {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.payout-board-lot.is-label .payout-board-lot-name {
  white-space: normal;
}

body.dark-mode .payout-board-lot.is-on {
  background: #143a23;
  border-color: #2a6e3b;
  color: #eaf5ec;
}

.payout-board[data-flight="championship"] {
  border-left: 4px solid var(--color-forest-light);
}

.payout-board[data-flight="second"] {
  border-left: 4px solid var(--color-gold);
}

.payout-board-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-cream-card);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-forest);
}

.payout-board-title > span:first-child {
  min-width: 0;
  flex: 1;
  white-space: normal;
  overflow: visible;
  line-height: 1.25;
}

.payout-board-pot {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-dark);
}

.payout-board-head {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted);
  background: rgba(20, 50, 26, 0.05);
  padding-left: 12px;
  padding-right: 12px;
}

body.dark-mode .payout-board-head {
  background: rgba(234, 245, 236, 0.06);
}

.payout-board .board-row {
  padding-left: 12px;
  padding-right: 12px;
}

.payout-board-body .board-row:nth-child(even) {
  background: rgba(194, 162, 106, 0.1);
}

.payout-board-body .board-row-house {
  background: rgba(20, 50, 26, 0.06);
  color: var(--color-muted);
  font-weight: 600;
}

body.dark-mode .payout-board-body .board-row:nth-child(even) {
  background: rgba(212, 175, 55, 0.08);
}

body.dark-mode .payout-board-body .board-row-house {
  background: rgba(82, 178, 115, 0.1);
}

.payout-board-body .board-row:last-child {
  border-bottom: none;
}

.payout-board-empty {
  padding: 8px 12px;
}

.follow-players {
  margin-top: 14px;
  padding-top: 4px;
}

.follow-players-label {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.follow-players-row {
  grid-template-columns: 2.4rem minmax(0, 1.6fr) 3.6rem minmax(4.4rem, auto) minmax(7.2rem, auto);
}

.follow-players-head {
  padding-top: 4px;
  padding-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom-width: 1.5px;
}

.follow-players-row .c-paddle.is-static {
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-forest);
}

.follow-players-row .c-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.follow-players-row .c-sale.is-static {
  justify-content: flex-end;
  text-align: right;
}

.follow-players-row .c-best.is-static {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .follow-players-head {
    display: none;
  }
  .follow-players-row.player-row {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    grid-template-areas:
      "seed name best"
      "seed paddle sale";
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .follow-players-row .c-seed {
    grid-area: seed;
    align-self: start;
    padding-top: 2px;
  }
  .follow-players-row .c-name {
    grid-area: name;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
  }
  .follow-players-row .c-best,
  .follow-players-row .c-best.is-static {
    grid-area: best;
    justify-content: flex-end;
    min-height: 0;
    text-align: right;
  }
  .follow-players-row .c-paddle,
  .follow-players-row .c-paddle.is-static {
    grid-area: paddle;
    justify-content: flex-start;
    text-align: left;
    color: var(--color-muted);
    font-size: 0.88rem;
  }
  .follow-players-row .c-sale,
  .follow-players-row .c-sale.is-static {
    grid-area: sale;
    font-size: 0.88rem;
  }
}

@media (max-width: 720px) {
  #view-settlement .bidder-head {
    display: none;
  }
  #view-settlement .bidder-row,
  #view-settlement .bidder-row.has-share {
    grid-template-columns: minmax(0, 1fr) auto 2rem;
    grid-template-areas:
      "name won share"
      "count spent share";
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #view-settlement .bidder-row .settle-name {
    grid-area: name;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
  }
  #view-settlement .bidder-row .bidder-won {
    grid-area: won;
    font-weight: 800;
    font-size: 1rem;
  }
  #view-settlement .bidder-row .bidder-count {
    grid-area: count;
    justify-self: start;
    text-align: left;
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 600;
  }
  #view-settlement .bidder-count-unit {
    display: inline;
  }
  #view-settlement .bidder-row .bidder-spent {
    grid-area: spent;
    font-size: 0.88rem;
    color: var(--color-muted);
  }
  #view-settlement .bidder-row .text-share {
    grid-area: share;
    align-self: center;
  }
  #view-settlement .bidder-detail-head,
  #view-settlement .bidder-win-line {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name won"
      "name spent";
    column-gap: 10px;
    row-gap: 2px;
  }
  #view-settlement .bidder-detail-head .settle-name,
  #view-settlement .bidder-win-line .settle-name {
    grid-area: name;
  }
  #view-settlement .bidder-detail-head .bidder-won,
  #view-settlement .bidder-win-line .bidder-won {
    grid-area: won;
    align-self: start;
  }
  #view-settlement .bidder-detail-head .bidder-spent,
  #view-settlement .bidder-win-line .bidder-spent {
    grid-area: spent;
    align-self: end;
  }
  #view-settlement .bidder-detail-head .bidder-count,
  #view-settlement .bidder-win-line .bidder-count {
    display: none;
  }
}

.empty-hint {
  color: var(--color-muted);
  font-size: 0.88rem;
  padding: 8px 0;
}

.toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  z-index: var(--stc-z-toast);
  width: calc(100% - 20px);
  max-width: 568px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--stc-chrome-gold);
  background: var(--bg-cream-card);
  color: var(--color-charcoal);
  font-size: 0.78rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.24s ease, transform 0.28s ease;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.is-spectator .clerk-only {
  display: none !important;
}

body.is-spectator .nav-organizer-only {
  visibility: hidden;
  pointer-events: none;
}

.mt-3 {
  margin-top: 12px;
}

.flight-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

.pot-banner-split {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 0;
}

.pot-banner-split .pot-stat {
  background: var(--bg-cream-card-light);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
}

.pot-banner-split button.pot-stat.is-active {
  box-shadow: inset 0 0 0 1px var(--color-gold);
  background: var(--bg-cream-canvas);
}

.tree-diptych {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.rr-board {
  min-height: 0;
}

.rr-board .tree-round {
  min-width: 7.25rem;
}

.tree-board {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding-bottom: 4px;
}

.tree-board-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-forest);
  margin-bottom: 8px;
}

.tree-rounds {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  width: max-content;
  min-width: 100%;
  padding-right: 12px;
}

.tree-rounds:not(.is-single) {
  min-height: 0;
}

.tree-rounds.is-n16:not(.is-single) {
  min-height: 580px;
}

.tree-rounds.is-n8:not(.is-single) {
  min-height: 280px;
}

.tree-rounds.rr-board {
  min-height: 0;
}

.tree-round {
  display: flex;
  flex-direction: column;
  flex: 1 0 6.75rem;
  min-width: 6.75rem;
}

.tree-round-label {
  flex: 0 0 1.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

.tree-round-slots {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.tree-rounds.is-n16:not(.is-single) .tree-round-slots {
  gap: 14px;
}

.tree-rounds.is-n8:not(.is-single) .tree-round-slots {
  gap: 10px;
}

.tree-rounds.is-n4:not(.is-single) .tree-round-slots,
.tree-rounds.rr-board .tree-round-slots {
  gap: 8px;
}

.tree-pair {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.tree-rounds.is-n16 .tree-pair {
  gap: 12px;
}

.tree-rounds.is-n8 .tree-pair,
.tree-rounds.is-n4 .tree-pair {
  gap: 6px;
}

.tree-rounds:not(.is-single) .tree-pair {
  flex: 1 1 0;
}

.tree-slot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 0;
  padding: 0;
}

.tree-rounds:not(.is-single) .tree-slot {
  flex: 1 1 0;
}

.tree-rounds.rr-board .tree-slot {
  flex: 0 0 auto;
}

.tree-match-unit {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1.5px solid var(--color-gold);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.tree-rounds:not(.is-single) .tree-match {
  flex: 1 1 auto;
  min-width: 0;
}

.tree-match-cap {
  flex: 0 0 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg-cream-card);
  box-shadow: inset -1px 0 0 var(--color-border);
}

.tree-match {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: none;
}

.tree-match-empty {
  min-height: 52px;
  opacity: 0.4;
}

.tree-player {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  text-align: left;
  padding: 7px 10px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-charcoal);
  cursor: pointer;
}

.cal-medal {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.88rem;
  line-height: 1;
}

.cal-medal--gold {
  color: #c9a227;
}

.cal-medal--silver {
  color: #8e99a4;
}

.cal-medal--bronze {
  color: #b87333;
}

.tree-player + .tree-player {
  border-top: 1px dashed var(--color-border);
}

.tree-player:disabled {
  cursor: default;
}

.tree-player.is-bye {
  color: var(--color-muted);
  font-style: italic;
  opacity: 0.75;
}

.tree-player.is-winner {
  background: rgba(42, 110, 59, 0.16);
  font-weight: 700;
}

.tree-player.is-alive {
  box-shadow: inset 0 0 0 2px var(--color-gold);
}

.tree-player.is-locked {
  color: var(--color-forest-light);
  font-weight: 700;
}

.tree-seed {
  flex: 0 0 1.2rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--color-muted);
}

.tree-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#print-poster,
#print-settle {
  display: none;
}

@media print {
  @page {
    size: portrait;
    margin: 0.35in;
  }
  html,
  body {
    height: 100%;
    overflow: hidden;
    background: #faf8f2;
  }
  html.print-settle,
  body.print-settle {
    height: auto !important;
    overflow: visible !important;
  }
  .app-header,
  .app-main,
  .app-nav,
  .toast,
  .cal-modal {
    display: none !important;
  }
  body.print-poster #print-poster {
    display: flex;
    position: relative;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: #faf8f2;
    color: #14321a;
    page-break-inside: avoid;
    break-inside: avoid-page;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #print-poster .poster-main {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-bottom: 6px;
  }
  #print-poster .poster-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 92%;
  }
  #print-poster .poster-event-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
  }
  #print-poster .poster-event-logo[hidden] {
    display: none;
  }
  #print-poster .poster-matrix {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 4px 0 2px;
  }
  #print-poster .poster-matrix-label {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #14321a;
    margin-bottom: 8px;
    flex: 0 0 auto;
  }
  #print-poster #print-matrix {
    flex: 1 1 auto;
    min-height: 0;
  }
  #print-poster .payout-matrix-wrap {
    margin: 0;
    overflow: hidden;
  }
  #print-poster .payout-matrix {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    table-layout: fixed;
    background: #faf8f2;
  }
  #print-poster .payout-matrix th:first-child,
  #print-poster .payout-matrix td:first-child {
    width: 26%;
  }
  #print-poster .payout-matrix th,
  #print-poster .payout-matrix td {
    box-sizing: border-box;
    padding: 7px 8px;
    font-size: 0.92rem;
    line-height: 1.25;
    color: #14321a;
    border-bottom: 1px solid #e3dccf;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #print-poster .payout-matrix tbody th,
  #print-poster .payout-matrix tbody td {
    height: clamp(1.45rem, calc(34vh / var(--print-matrix-rows, 1)), 2.5rem);
  }
  #print-poster .payout-matrix-wrap.is-tight th,
  #print-poster .payout-matrix-wrap.is-tight td {
    padding: 5px 6px;
    font-size: 0.8rem;
  }
  #print-poster .payout-matrix-wrap.is-pack th,
  #print-poster .payout-matrix-wrap.is-pack td {
    padding: 3px 4px;
    font-size: 0.68rem;
  }
  #print-poster .payout-matrix thead {
    height: auto;
  }
  #print-poster .payout-matrix thead th {
    font-size: 0.78rem;
    color: #a5844d;
    background: #f2ede2;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #print-poster .payout-matrix-wrap.is-tight thead th {
    font-size: 0.7rem;
  }
  #print-poster .payout-matrix-wrap.is-pack thead th {
    font-size: 0.6rem;
  }
  #print-poster .payout-matrix tbody tr {
    cursor: default;
    height: auto;
  }
  #print-poster .payout-matrix tbody tr.is-active {
    background: transparent;
  }
  #print-poster .poster-brand {
    position: static;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 2px 2px;
    margin-top: auto;
  }
  #print-poster .poster-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  #print-poster .poster-wordmark {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #14321a;
    line-height: 1;
  }
  #print-poster .poster-wordmark span {
    font-family: Outfit, sans-serif;
    font-weight: 300;
    color: #a5844d;
  }
  #print-poster .poster-name {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    padding: 0;
    min-width: 0;
    line-height: 1.2;
  }
  #print-poster .poster-title-row:not(:has(.poster-event-logo:not([hidden]))) .poster-name {
    text-align: center;
  }
  #print-poster .poster-url {
    font-family: Outfit, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-align: center;
  }
  #print-qr img,
  #print-qr canvas,
  #print-qr table {
    width: 128px !important;
    height: 128px !important;
  }
  body.print-poster #print-settle {
    display: none !important;
  }
  body.print-settle #print-poster {
    display: none !important;
  }
  body.print-settle #print-settle {
    display: block;
    min-height: 0;
    background: #faf8f2;
    color: #14321a;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.print-settle #print-settle-body {
    display: block;
  }
  body.print-settle #print-settle .player-head {
    display: grid !important;
  }
  body.print-settle #print-settle .settle-name {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  body.print-settle #print-settle .pl-pos {
    color: #2d6a3a !important;
  }
  body.print-settle #print-settle .pl-neg {
    color: #a33a2d !important;
  }
  body.print-settle #print-settle .bidder-win-player.is-cashed {
    color: #2d6a3a !important;
    font-weight: 800;
  }
  body.print-settle #print-settle .bidder-win-player.is-missed {
    color: #7e7c74 !important;
  }
  #print-settle .print-sheet-bidders .print-settle-kicker {
    font-size: 1.1rem;
  }
  #print-settle .print-sheet-bidders .print-settle-code {
    font-size: 0.72rem;
    margin: 1px 0 8px;
  }
  #print-settle .print-sheet-bidders .print-settle-h {
    font-size: 0.88rem;
    margin: 0 0 6px;
  }
  #print-settle .print-sheet-bidders .print-settle-group {
    margin: 0;
    page-break-inside: auto;
    break-inside: auto;
  }
  #print-settle .print-sheet-bidders .print-settle-detail {
    padding: 0 0 2px 6px;
  }
  #print-settle .print-sheet-bidders .player-head,
  #print-settle .print-sheet-bidders .bidder-row {
    padding: 2px 0;
    font-size: 0.72rem;
    line-height: 1.25;
  }
  #print-settle .print-sheet-bidders .player-head {
    font-size: 0.58rem;
  }
  #print-settle .print-sheet-bidders .bidder-win-line {
    padding: 1px 0;
    font-size: 0.68rem;
    line-height: 1.2;
  }
  #print-settle .print-sheet-bidders .bidder-win-meta {
    font-size: 0.6rem;
    line-height: 1.15;
  }

  #print-settle .print-settle-kicker {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #14321a;
  }
  #print-settle .print-settle-code {
    font-family: Outfit, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #a5844d;
    margin: 2px 0 14px;
  }
  #print-settle .print-settle-group {
    page-break-inside: avoid;
    margin: 0 0 10px;
  }
  #print-settle .print-settle-bidder {
    cursor: default;
    font-weight: 800;
  }
  #print-settle .print-settle-detail {
    padding: 0 0 6px 6px;
    border-left: 2px solid rgba(20, 50, 26, 0.18);
    margin: 0 0 0 4px;
  }
  #print-settle .print-settle-h {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #14321a;
    margin: 16px 0 8px;
    page-break-after: avoid;
  }
  #print-settle .print-settle-paddle {
    page-break-inside: avoid;
    margin: 0 0 14px;
  }
  #print-settle .print-settle-paddle-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: #14321a;
    padding: 8px 0 2px;
  }
  #print-settle .payout-board {
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0 0 14px;
    border: 1px solid #d9d3c4;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    color: #14321a;
  }
  #print-settle .print-sheet-winners .print-settle-kicker {
    font-size: 1.1rem;
  }
  #print-settle .print-sheet-winners .print-settle-code {
    font-size: 0.72rem;
    margin: 1px 0 6px;
  }
  #print-settle .print-sheet-winners .print-settle-h {
    font-size: 0.88rem;
    margin: 0 0 8px;
  }
  #print-settle .print-winners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
  }
  #print-settle .print-sheet-winners .payout-board {
    margin: 0;
    border-radius: 6px;
  }
  #print-settle .print-sheet-winners .payout-board-title {
    padding: 4px 8px;
    font-size: 0.78rem;
    gap: 6px;
  }
  #print-settle .print-sheet-winners .payout-board-pot {
    font-size: 0.68rem;
  }
  #print-settle .print-sheet-winners .payout-board-empty,
  #print-settle .print-sheet-winners .empty-hint {
    margin: 6px 8px;
    font-size: 0.62rem;
  }
  #print-settle .print-sheet-winners .payout-board .board-row {
    padding: 2px 6px;
    font-size: 0.62rem;
    line-height: 1.2;
    column-gap: 4px;
    grid-template-columns: 2.1rem minmax(0, 1.15fr) minmax(0, 1fr) 3.2rem;
  }
  #print-settle .print-sheet-winners .payout-board-head {
    font-size: 0.52rem;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  #print-settle .payout-board-title {
    background: #f2ede2;
    color: #14321a;
    border-bottom: 1px solid #d9d3c4;
  }
  #print-settle .payout-board-pot {
    color: #8a6a2f !important;
  }
  #print-settle .payout-board-head {
    background: #f7f3ea;
    color: #6b6a64;
  }
  #print-settle .payout-board .board-row {
    display: grid !important;
  }
  #print-settle .payout-board-body .board-row:nth-child(even) {
    background: rgba(194, 162, 106, 0.12);
  }
  #print-settle .text-share {
    display: none !important;
  }
  #print-settle .print-settle-h:first-of-type {
    margin-top: 0;
  }
  #print-settle .poster-brand {
    position: static;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 2px 2px;
    margin-top: 12px;
  }
  #print-settle .poster-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  #print-settle .poster-wordmark {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #14321a;
    line-height: 1;
  }
  #print-settle .poster-wordmark span {
    font-family: Outfit, sans-serif;
    font-weight: 300;
    color: #a5844d;
  }
}

@media (max-width: 420px) {
  .player-head {
    display: none;
  }
  .player-row {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    grid-template-areas:
      "seed name name"
      "sale sale place";
    column-gap: 8px;
    row-gap: 8px;
  }
  .player-row .c-seed {
    grid-area: seed;
  }
  .player-row input.c-name {
    grid-area: name;
    font-size: 1rem;
  }
  .player-row .c-sale {
    grid-area: sale;
  }
  .player-row .c-place {
    grid-area: place;
  }
}

#tv-board-root {
  display: none;
}

body.tv-board .app-header,
body.tv-board .app-main,
body.tv-board .app-nav {
  display: none !important;
}

body.tv-board #tv-board-root {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #0f1c12;
  color: #faf8f2;
  overflow: hidden;
}

.tv-board {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.tv-loop-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(194, 162, 106, 0.18);
  pointer-events: none;
  z-index: 4;
}

.tv-loop-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #c2a26a;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@keyframes tv-loop-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.tv-mid {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tv-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  overflow: hidden;
}

.tv-main {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tv-payout-dock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  flex: 0 0 auto;
  min-width: 0;
  margin: 14px 0 0;
  padding: 12px 4px 2px;
  border-top: 1px solid rgba(194, 162, 106, 0.28);
}

.tv-payout-tile {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  border: none;
  border-radius: 0;
  background: none;
  text-align: left;
}

.tv-payout-tile-k {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(201, 194, 179, 0.55);
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  text-align: left;
}

.tv-payout-tile-v {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #c2a26a;
}

.tv-payout-tile-pot .tv-payout-tile-v {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
}

.tv-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "event back"
    "event tools";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  margin-bottom: 8px;
}

.tv-event {
  grid-area: event;
  align-self: center;
  justify-self: stretch;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
}

.tv-back {
  grid-area: back;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: #faf8f2;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}

.tv-top-end {
  grid-area: tools;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.tv-back-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.15;
}

.tv-back-title em {
  font-family: Outfit, sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #c2a26a;
}

.tv-back-version {
  font-family: Outfit, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(232, 215, 168, 0.55);
}

.tv-logo {
  width: 28px;
  height: 28px;
}

.tv-lot {
  text-align: center;
  flex: 0 0 auto;
  margin: 0 0 10px;
}

.tv-lot-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
}

.tv-lot-pot {
  margin-top: 2px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #c2a26a;
}

.tv-event-logo {
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  object-fit: contain;
  flex: 0 0 auto;
}

.tv-event-name {
  min-width: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: #faf8f2;
  overflow: visible;
  white-space: normal;
}

.tv-mode {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid rgba(194, 162, 106, 0.55);
  border-radius: var(--radius-md);
}

.tv-mode-btn {
  border: none;
  background: transparent;
  color: #c9c2b3;
  font-family: Outfit, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
}

.tv-mode-btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.tv-mode-btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.tv-mode-btn:first-child:last-child {
  border-radius: var(--radius-md);
}

.tv-mode-btn.is-on {
  background: #c2a26a;
  color: #14321a;
}

.tv-bidder-chrome {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.tv-done {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 24px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  margin: 8px 0 12px;
}

.tv-lot-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 24px 22px;
  border: 2px solid #c2a26a;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(194, 162, 106, 0.22), rgba(194, 162, 106, 0.06));
  box-shadow: 0 0 0 6px rgba(194, 162, 106, 0.08);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tv-lot-hero-fit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.tv-lot-hero-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.45rem, 4.2vh, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0;
  flex: 0 0 auto;
}

.tv-lot-hero-pot {
  margin-top: 8px;
  font-size: clamp(1.2rem, 3.2vh, 2.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #e8d7a8;
  flex: 0 0 auto;
}

.tv-lot-hero-pot-k {
  display: inline-block;
  margin-right: 0.35em;
  font-size: 0.45em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
  color: rgba(232, 215, 168, 0.72);
}

.tv-lot-hero-places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 18px;
}

.tv-lot-hero-places .tv-bracket-place-k {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.tv-lot-hero-places .tv-place-v {
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
}

.tv-hero-payouts {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(232, 215, 168, 0.28);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px 14px;
  overflow: hidden;
}

.tv-pay-card {
  flex: 1 1 7.2rem;
  max-width: 11.5rem;
  min-width: 6.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 10px 14px;
  border: 1px solid rgba(194, 162, 106, 0.42);
  border-radius: 12px;
  background: rgba(20, 50, 26, 0.38);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.tv-pay-card.is-filled {
  border-color: rgba(194, 162, 106, 0.7);
  background: rgba(20, 50, 26, 0.55);
}

.tv-pay-place {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c2a26a;
}

.tv-pay-player {
  margin-top: 7px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(0.92rem, 1.9vh, 1.22rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tv-pay-bidder {
  margin-top: 4px;
  font-size: clamp(0.72rem, 1.5vh, 0.92rem);
  font-weight: 700;
  color: #c2a26a;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-pay-amt {
  margin-top: 8px;
  font-size: clamp(1.05rem, 2.5vh, 1.55rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #e8d7a8;
}

.tv-hero-empty {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.1rem;
}

.tv-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.tv-result-place {
  flex: 0 0 5.5rem;
  font-weight: 800;
  color: #e8d7a8;
  white-space: nowrap;
}

.tv-result-paddle {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: #c2a26a;
  white-space: nowrap;
}

.tv-done .tv-col-sold {
  min-height: 0;
}

.tv-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 6px 0 14px;
  flex: 0 0 auto;
}

.tv-side-card {
  text-align: center;
  padding: 14px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.tv-side-card.is-empty {
  opacity: 0.55;
}

.tv-side-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1rem, 2.1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 6px;
}

.tv-side-amt {
  margin-top: 0;
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #e8d7a8;
}

.tv-upnext {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 28px 20px 30px;
  width: 100%;
  border: 2px solid #c2a26a;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(194, 162, 106, 0.22), rgba(194, 162, 106, 0.06));
  box-shadow: 0 0 0 6px rgba(194, 162, 106, 0.08);
  min-width: 0;
}

.tv-upnext.is-sold {
  border-color: #4a5c4e;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.tv-upnext-kicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c2a26a;
}

.tv-upnext-seed {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a5844d;
  margin-top: 8px;
}

.tv-side-card .tv-upnext-seed {
  font-size: 0.72rem;
  margin-top: 6px;
}

.tv-side-card .tv-side-name {
  margin-top: 2px;
}

.tv-upnext-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 6px;
}

.tv-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tv-col {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tv-col ol {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.tv-col-queue ol {
  overflow: hidden;
}

.tv-done .tv-results h2 {
  text-align: center;
}

.tv-done .tv-col-sold ol {
  overflow: hidden;
}

.tv-done .tv-results ol {
  columns: 1;
  column-gap: 28px;
}

.tv-done .tv-results.is-wide ol {
  columns: 2;
}

.tv-done .tv-results li {
  break-inside: avoid;
  page-break-inside: avoid;
}

.tv-col h2 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c2a26a;
  margin: 0 0 8px;
}

.tv-col li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.15rem;
}

.tv-seed {
  flex: 0 0 2rem;
  font-weight: 800;
  color: #c2a26a;
}

.tv-col-queue .tv-queue-who,
.tv-col-sold .tv-queue-who {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
  flex: 1;
}

.tv-seed-mark {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  color: #c2a26a;
  white-space: nowrap;
}

.tv-col-queue .tv-name,
.tv-col-sold .tv-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-bidder {
  flex: 0 1 auto;
  font-size: 0.95rem;
  font-weight: 700;
  color: #c2a26a;
  white-space: nowrap;
}

.tv-side-bidder {
  margin-top: 0;
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  font-weight: 700;
  color: #c2a26a;
}

.tv-side-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
}

.tv-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #e8d7a8;
}

.tv-empty {
  opacity: 0.55;
  justify-content: center;
  color: #8a8478;
  font-size: 0.95rem;
}

.tv-done .tv-col-sold .tv-empty {
  column-span: all;
}

.tv-places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 4px 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(194, 162, 106, 0.35);
}

.tv-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
}

.tv-place-k {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c2a26a;
}

.tv-place-v {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tv-bracket-cards {
  flex: 0 0 22rem;
  width: 22rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 14px;
  border: none;
  border-left: 1px solid rgba(194, 162, 106, 0.35);
  max-height: none;
  overflow: hidden;
  background: #0f1c12;
}

.tv-bracket-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  font: inherit;
  color: inherit;
  text-align: left;
}

.tv-bracket-card-hit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tv-bracket-card-hit:focus-visible {
  outline: 2px solid #c2a26a;
  outline-offset: -2px;
}

.tv-bracket-card:hover {
  border-color: rgba(194, 162, 106, 0.55);
}

.tv-bracket-card.is-open {
  border-color: rgba(120, 160, 130, 0.45);
  box-shadow: none;
}

.tv-bracket-card.is-complete {
  border-color: #c2a26a;
  box-shadow: 0 0 0 1px rgba(194, 162, 106, 0.28);
}

.tv-bracket-card.is-current {
  border-color: #faf8f2;
  box-shadow: 0 0 0 2px rgba(250, 248, 242, 0.28);
}

.tv-bracket-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
}

.tv-bracket-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-bracket-status {
  justify-self: start;
  font-family: Outfit, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 215, 168, 0.55);
  white-space: nowrap;
}

.tv-bracket-card.is-current .tv-bracket-status {
  color: rgba(232, 215, 168, 0.78);
}

.tv-bracket-pot {
  flex: 0 0 auto;
  font-family: Outfit, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #e8d7a8;
}

.tv-bracket-places {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55em;
  margin-top: 0;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.tv-bracket-place {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  white-space: nowrap;
}

.tv-bracket-place-k {
  font-size: 0.72rem;
  font-weight: 700;
  color: #c2a26a;
}

.tv-bracket-place-v {
  font-size: 0.78rem;
  font-weight: 800;
  color: #e8d7a8;
}

.tv-phone-roster {
  display: none;
}

@media (max-width: 720px) {
  body.tv-board #tv-board-root {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .tv-board {
    height: auto;
    min-height: 100%;
    overflow: visible;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
  .tv-body {
    flex-direction: column;
    overflow: visible;
    gap: 12px;
  }
  .tv-main {
    display: none;
  }
  .tv-bracket-cards {
    flex: 1 1 auto;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: none;
    gap: 10px;
  }
  .tv-bracket-card {
    flex: 0 0 auto;
    overflow: visible;
  }
  .tv-bracket-card-hit {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 12px;
  }
  .tv-phone-roster {
    display: block;
    list-style: none;
    margin: 0;
    padding: 4px 0 8px;
    border-top: 1px solid rgba(194, 162, 106, 0.28);
  }
  .tv-phone-row {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: center;
    padding: 8px 12px;
  }
  .tv-phone-roster.has-facts .tv-phone-row {
    grid-template-columns: 2.2rem minmax(0, 34%) minmax(4.5rem, 1fr) auto;
  }
  .tv-phone-roster.has-facts .tv-phone-who {
    padding-right: 8px;
  }
  .tv-phone-facts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    justify-self: center;
    gap: 0 0.45em;
    min-width: 0;
    text-align: center;
  }
  .tv-phone-best {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .tv-phone-best.is-live {
    font-style: italic;
    font-weight: 500;
    color: rgba(232, 215, 168, 0.78);
    white-space: normal;
    line-height: 1.2;
  }
  .tv-phone-best.is-locked {
    font-style: normal;
    font-weight: 800;
    color: #faf8f2;
  }
  .tv-phone-win {
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #e8d7a8;
    white-space: nowrap;
  }
  .tv-phone-row.is-empty {
    color: rgba(201, 194, 179, 0.55);
    font-size: 0.85rem;
  }
  .tv-phone-seed {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #c2a26a;
    text-align: right;
  }
  .tv-phone-who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .tv-phone-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tv-phone-mark {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c2a26a;
  }
  .tv-phone-bidder {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(232, 215, 168, 0.7);
  }
  .tv-phone-amt {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #e8d7a8;
    white-space: nowrap;
  }
  .tv-phone-row.is-current-bid {
    background: rgba(194, 162, 106, 0.16);
    box-shadow: inset 3px 0 0 #c2a26a;
  }
  .tv-phone-row.is-current-bid .tv-phone-name {
    font-size: 1.05rem;
  }
  .tv-phone-row.is-next-up .tv-phone-mark {
    color: rgba(232, 215, 168, 0.78);
  }
  .tv-top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "event back"
      "tools tools";
    column-gap: 8px;
    row-gap: 10px;
    margin-bottom: 12px;
  }
  .tv-event {
    justify-self: stretch;
    max-width: none;
    gap: 10px;
  }
  .tv-event-logo {
    width: 40px;
    height: 40px;
  }
  .tv-event-name {
    font-size: 1.05rem;
  }
  .tv-back {
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    justify-content: center;
  }
  .tv-back-copy {
    display: none;
  }
  .tv-logo {
    width: 36px;
    height: 36px;
  }
  .tv-top-end {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .tv-bidder-chrome {
    margin-left: auto;
    justify-content: flex-end;
  }
  .tv-mode-btn {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 0.72rem;
  }
  .tv-bracket-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name pot"
      "status pot";
    align-items: center;
    row-gap: 2px;
  }
  .tv-bracket-name {
    grid-area: name;
  }
  .tv-bracket-status {
    grid-area: status;
  }
  .tv-bracket-pot {
    grid-area: pot;
    align-self: center;
  }
  .tv-loop-progress {
    position: sticky;
    bottom: 0;
  }
}