:root {
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --clay: #d84315;
  --bg: #f4f6f4;
  --card: #ffffff;
  --ink: #1f2a1f;
  --muted: #6b7a6b;
  --line: #dde5dd;
  --win: #e8f5e9;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

header {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  color: #fff;
  padding: 18px 24px 0;
}
.header-inner { display: flex; align-items: center; gap: 14px; }
.logo { font-size: 34px; }
h1 { margin: 0; font-size: 22px; }
.sub { margin: 2px 0 12px; opacity: .85; font-size: 13px; }

/* Four tabs don't fit a phone; let the row scroll rather than widen the page. */
nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; }
.tab {
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  padding: 10px 20px;
  white-space: nowrap;
  font-size: 14px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}
.tab.active { background: var(--bg); color: var(--ink); font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
.panel.hidden { display: none; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card h2 { margin: 0 0 6px; font-size: 17px; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }
code { background: #eef2ee; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-col { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--green); border-color: var(--green); }

.btn {
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  color: var(--ink);
  background: #e8ece8;
}
.btn.primary { background: var(--green); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--green-dark); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.danger { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6c2; }
.btn.big { padding: 12px 22px; font-size: 15px; }

.report { font-size: 13px; margin-top: 10px; }
.report .ok { color: var(--green-dark); font-weight: 600; }
.report ul { margin: 6px 0 0; padding-left: 18px; color: var(--clay); }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
#schedule-progress { font-size: 14px; color: var(--muted); }
#schedule-progress b { color: var(--ink); }

.round { margin-bottom: 22px; }
.round h3 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--green-dark);
}
.round h3 .window { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.match {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.match .vs { color: var(--muted); font-size: 12px; }
.match .p { font-weight: 600; }
.match .p.winner { color: var(--green-dark); }
.match .p.winner::after { content: " 🏆"; }
.match .score { color: var(--muted); font-size: 13px; }
.match .spacer, .spacer { flex: 1; }
.match .contact { font-size: 12px; color: var(--muted); width: 100%; }
.match.done { background: var(--win); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
tr.rank-1 td { background: var(--win); }
td.num, th.num { text-align: right; }

.empty { color: var(--muted); font-size: 14px; padding: 24px; text-align: center; }

.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}
.modal.hidden { display: none; }
.modal-box {
  background: #fff; border-radius: 12px; padding: 20px 22px;
  width: min(420px, 90vw);
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.modal-box h3 { margin: 0 0 14px; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }

#toast {
  position: fixed; top: 14px; right: 14px; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
}
.toast-msg {
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  animation: fade 3.5s forwards;
}
.toast-msg.error { background: #b71c1c; }
@keyframes fade { 0%,80% { opacity: 1; } 100% { opacity: 0; } }

.danger-zone h2 { color: #b71c1c; }
.del { background: none; border: none; color: #b71c1c; cursor: pointer; font-size: 13px; }

/* ---------- player portal & v2 additions ---------- */

.header-inner .spacer { flex: 1; }
.btn.ghost.light { border-color: rgba(255,255,255,.4); color: #fff; }
.light-link { color: inherit; }
.nav-pad { height: 1px; }
.hidden { display: none !important; }

.login-card { max-width: 420px; margin: 40px auto; }
.login-card .form-col { gap: 10px; }

.banner {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

.match .match-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match .match-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.slots { display: flex; gap: 12px; flex-wrap: wrap; }
.slot { font-size: 13px; }
.slot.muted, .muted { color: var(--muted); }

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 10px;
}
.badge.win { background: var(--win); color: var(--green-dark); }
.badge.loss { background: #fdecea; color: #b71c1c; }
.warn { color: var(--clay); }

table.grid { width: auto; }
table.grid th { text-align: center; }
table.grid td { text-align: center; padding: 6px 10px; border-bottom: none; }
table.grid tbody th { text-align: left; padding-right: 14px; color: var(--ink); font-size: 13px; }
table.grid input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--green); cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  background: #eef2ee;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 6px 4px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-x { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12px; }
.chip-x:hover { color: #b71c1c; }

label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); }
.sub-hint { font-size: 11px; color: var(--muted); font-style: italic; }
input.locked, select.locked {
  background: #eef0ee;
  color: var(--muted);
  cursor: not-allowed;
}
input.locked + .sub-hint::after { content: " 🔒"; }
#config-banner { background: #eef4ff; border-color: #b9d2f5; }

.dev-banner {
  background: repeating-linear-gradient(45deg, #fff3cd, #fff3cd 12px, #ffe9a8 12px, #ffe9a8 24px);
  border: 2px solid #e0a800;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dev-banner select { padding: 4px 8px; }
.dev-banner .hint { margin: 0; }
label > .sub-hint { margin-top: -2px; }

/* ---------- availability calendar ---------- */

.cal-scroll { overflow-x: auto; padding-bottom: 6px; }
.cal-head, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  min-width: 760px;   /* below this the cells stop being legible and it scrolls */
}
.cal-head { margin-bottom: 6px; }
.cal-head div {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.cal-grid { grid-auto-rows: auto; }
.cal-cell {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.cal-cell.blank { border: none; background: transparent; }
/* weekends stand out at a glance */
.cal-cell.sat { background: #e9f6ea; border-color: #c7e6c9; }
.cal-cell.sun { background: #e6f1fb; border-color: #c3dcf3; }
/* keep .na last so an unavailable day always reads as greyed out */
.cal-cell.na { background: #f0f0f0; border-color: var(--line); }
.cal-cell.na .cal-hours { opacity: .35; }
.cal-date { font-size: 12px; font-weight: 600; text-align: center; }
.na-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  font-size: 10.5px;
  line-height: 1.2;
  padding: 3px 4px;
  cursor: pointer;
  color: var(--muted);
  min-height: 30px;
}
.na-btn:hover { border-color: #757575; color: var(--ink); }
.na-btn.active { background: #757575; border-color: #757575; color: #fff; font-weight: 600; }
.cal-hours { display: flex; flex-direction: row; gap: 3px; align-items: center; }
.cal-hours select { flex: 1 1 0; min-width: 0; width: auto; padding: 3px 2px;
  font-size: 11.5px; border-radius: 6px; text-align: center; text-align-last: center;
  -webkit-appearance: none; appearance: none; }
.cal-to { font-size: 10px; color: var(--muted); line-height: 1; flex: 0 0 auto; }

/* ---------- schedule chart (player x player matrix) ---------- */

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn {
  background: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--green); color: #fff; font-weight: 600; }

.mx-scroll {
  overflow: auto;
  max-height: 78vh;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; width: auto; }
table.matrix th, table.matrix td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 5px 7px;
}
.mx-corner, .mx-col, .mx-row {
  background: #eef2ee;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.mx-corner {
  position: sticky; left: 0; top: 0; z-index: 3;
  color: var(--muted); font-weight: 500;
}
.mx-col { position: sticky; top: 0; z-index: 2; text-align: center; }
.mx-row { position: sticky; left: 0; z-index: 2; text-align: left; }

.mx-cell {
  min-width: 96px;
  max-width: 130px;
  vertical-align: top;
  line-height: 1.35;
  cursor: pointer;
}
.mx-cell:hover { outline: 2px solid var(--green); outline-offset: -2px; }
.mx-self { background: repeating-linear-gradient(45deg, #f4f6f4, #f4f6f4 6px, #e9ede9 6px, #e9ede9 12px); }
.mx-set { background: #fff; }
.mx-open { background: #fffdf3; }
.mx-won { background: var(--win); }
.mx-lost { background: #fdecea; }
.mx-date { font-weight: 600; }
.mx-result { font-weight: 700; }
.mx-won .mx-result { color: var(--green-dark); }
.mx-lost .mx-result { color: #b71c1c; }
.mx-sub { color: var(--muted); font-size: 11px; }
.mx-venue {
  font-size: 11px;
  color: var(--green-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.empty-cell { color: var(--muted); text-align: center; cursor: default; }

.avail-summary { font-size: 14px; line-height: 1.5; }
.avail-summary .ok { color: var(--green-dark); }
.avail-summary .warn { color: var(--clay); }
.btn.primary:disabled, .btn.primary.disabled {
  background: #a5b8a5;
  cursor: not-allowed;
}

.match.mine { border-color: var(--green); border-width: 2px; }
.modal-section {
  margin: 18px 0 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--green-dark);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.modal-box { max-width: min(560px, 92vw); }

.badge.prop { background: #eef2ee; color: var(--muted); }
.badge.half { background: #fff3cd; color: #7a5c00; }
.ack-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

.badge.cancel { background: #fdecea; color: #b71c1c; }
.mx-me { background: var(--green) !important; color: #fff; }
.mx-cell.mx-mine { box-shadow: inset 0 0 0 2px rgba(46,125,50,.35); }

/* ---------- My matches: four life-stage columns ---------- */

.match-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.match-col { min-width: 0; }
.match-col h3 {
  margin: 0 0 2px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}
.col-count {
  background: var(--green);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  padding: 1px 8px;
  font-weight: 700;
}
.col-blurb { color: var(--muted); font-size: 12px; margin: 0 0 10px; line-height: 1.35; }
.col-empty {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* cards go vertical inside a narrow column */
.match-cols .match { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
.match-cols .match .spacer { display: none; }
.match-cols .match-actions { flex-direction: column; gap: 6px; }
.match-cols .match-actions .btn { width: 100%; text-align: center; padding: 8px 10px; }
.match-cols .match .contact { width: auto; word-break: break-word; }
.match-cols .slots { flex-direction: column; gap: 2px; }
.match-cols .badge { white-space: normal; line-height: 1.3; }

@media (max-width: 1150px) { .match-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .match-cols { grid-template-columns: 1fr; } }

.why-no-date {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b5900;
}

/* ---------- structured score entry ---------- */

.score-sides {
  display: grid;
  grid-template-columns: 68px 1fr 1fr;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  margin-bottom: 6px;
}
.score-sides span + span { text-align: center; }
.score-row {
  display: grid;
  grid-template-columns: 68px 1fr 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.score-row > label { font-size: 13px; color: var(--ink); font-weight: 600; }
.score-row select { width: 100%; text-align: center; }
.set3-type { display: flex; gap: 6px; margin: 4px 0 8px 76px; }
.set3-type button {
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--muted);
}
.set3-type button.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.score-msg { font-size: 13px; min-height: 18px; margin: 4px 0 2px; }
.score-msg.bad { color: #b71c1c; }
.score-msg.good { color: var(--green-dark); font-weight: 600; }

/* ---------- tournament switcher ---------- */
.tbar {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 0 0 12px;
}
.tbar label { color: rgba(255,255,255,.85); }
.tbar select { min-width: 220px; }
.tbar .hint { color: rgba(255,255,255,.75); margin: 0 0 6px; }
/* Content column + league switcher rail. The rail is context for the whole
   portal, so it sits beside every tab instead of pushing each page down. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 22px;
  align-items: start; }
/* The frame is a list of function names now — the settings live in modals — so
   it no longer needs the width the inline SMTP form did. */
.layout-admin { grid-template-columns: minmax(0, 1fr) 240px; }
/* The console shows wide tables and a player x player chart; give it more room
   than the player portal, which is mostly a single reading column. */
body.admin main { max-width: 1400px; }
body.admin .sysfn { padding: 10px 12px; }
body.admin .sysfn-name { font-size: 14px; }
body.admin .sysfn-desc { font-size: 11.5px; }
.layout.solo { grid-template-columns: minmax(0, 1fr); }   /* only one league */
.col-main { min-width: 0; }                               /* let wide tables scroll */
.tsel { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 10px; }
.tsel-col { background: #fff; border: 1px solid #e2e6ea; border-radius: 10px; padding: 10px 10px 8px; }
.tsel-col.active-col { border-color: #2f855a; }
.tsel-title { font-size: 17px; font-weight: 700; color: #2d3748; margin: 0 0 2px; }
.tsel-head { font-weight: 700; font-size: 15px; color: #2d3748; margin-bottom: 2px; }
.tsel-col.active-col .tsel-head { color: #2f855a; }
.tsel-blurb { font-size: 12.5px; color: #718096; line-height: 1.35; margin-bottom: 8px; }
.tsel-item { display: block; width: 100%; text-align: left; background: #f7fafc;
  border: 1px solid #e2e6ea; border-radius: 8px; padding: 9px 11px; margin-bottom: 6px;
  cursor: pointer; font: inherit; color: #2d3748; }
.tsel-item:hover { background: #edf2f7; }
.tsel-item.on { background: #2f855a; border-color: #2f855a; color: #fff; }
.tsel-col:not(.active-col) .tsel-item.on { background: #4a5568; border-color: #4a5568; }
.tsel-name { display: block; font-weight: 600; font-size: 15px; }
.tsel-item.on .tsel-name { text-decoration: underline; }
.tsel-when { display: block; font-size: 12.5px; opacity: .75; margin-top: 1px; }
.tsel-empty { font-size: 13px; color: #a0aec0; padding: 4px 2px; }
.tsel-more { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 4px 2px 2px; margin: 0; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 600; color: #2f855a; }
.tsel-more:hover { text-decoration: underline; }
.banner.ro { background: #edf2f7; border-color: #cbd5e0; color: #2d3748; }
@media (max-width: 900px) { .layout-admin { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) {
  /* Stacked: the rail sits ABOVE the content, not after it — in DOM order it
     comes last, which would otherwise bury the switcher under a long page. */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .tsel { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
  .tsel-title { flex: 1 1 100%; }
  .tsel-col { flex: 1 1 200px; }
}

/* A finished season's calendar is on show but frozen — make that visible,
   not just unresponsive. */
.panel.read-only .card { opacity: .72; }
.panel.read-only select, .panel.read-only button { cursor: not-allowed; }

/* Admin: matches that cannot resolve without someone acting */
.blk { border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; font-size: 13px;
  line-height: 1.5; border: 1px solid; }
.blk ul { margin: 8px 0 0; padding-left: 20px; }
.blk li { margin-bottom: 3px; }
.blk .vs { opacity: .55; }
.blk .muted { opacity: .7; font-size: 12px; }
.warn-blk { background: #fffbea; border-color: #f0d98c; color: #6b5314; }
.bad-blk  { background: #fdecea; border-color: #f5c6c2; color: #8a1c14; }

/* ---------- admin: system frame ---------- */
/* System settings are global; league setup is per-tournament. Splitting them
   apart means the Setup tab is only ever about the league in front of you. */
.sysrail { display: flex; flex-direction: column; gap: 12px; }
.sysrail-title { font-size: 17px; font-weight: 700; color: #2d3748; margin: 0; }
.sysrail-sub { font-size: 12.5px; color: #718096; margin: -8px 0 0; line-height: 1.4; }
.sysrail .card { padding: 14px; }
.sysrail .card h2 { font-size: 15px; }
.sysrail .hint { font-size: 12px; line-height: 1.45; }
/* a 360px column can't hold a horizontal form row */
.sysrail .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
.sysrail .form-row input[type="number"] { width: 100% !important; }
.sysrail .btn { width: 100%; }
.sysrail .check { flex-direction: row; align-items: center; gap: 8px; }
.sysrail .report { font-size: 12px; }

/* ---------- admin: system function list ---------- */
.sysfn-list { display: flex; flex-direction: column; gap: 8px; }
.sysfn { display: block; width: 100%; text-align: left; background: #fff;
  border: 1px solid #e2e6ea; border-radius: 10px; padding: 12px 14px;
  cursor: pointer; font: inherit; color: #2d3748; }
.sysfn:hover { border-color: #2f855a; background: #f7fbf8; }
.sysfn-name { display: block; font-size: 15px; font-weight: 700; }
.sysfn-desc { display: block; font-size: 12.5px; color: #718096; margin-top: 2px;
  line-height: 1.4; }
.sysfn.danger:hover { border-color: #c0392b; background: #fdf3f2; }
.sysfn.danger .sysfn-name { color: #8a1c14; }

/* .modal-box sets an explicit width, so raising max-width alone did nothing —
   the SMTP form and venue list need the real estate. */
.modal-box.wide { width: min(720px, 94vw); max-width: min(720px, 94vw);
  max-height: 88vh; overflow-y: auto; }

/* venue management */
.venue-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line); }
.venue-row:last-child { border-bottom: 0; }
.venue-row.off .venue-name, .venue-row.off .venue-addr { opacity: .55; }
.venue-main { flex: 1 1 auto; min-width: 0; }
.venue-name { font-weight: 600; font-size: 14px; }
.venue-addr { font-size: 12px; color: var(--muted); margin-top: 1px; }
.venue-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.venue-new { border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  margin-top: 12px; background: #f7fafc; }

/* Reset is not a routine function — quiet in the list, deliberate to fire. */
.sysfn-quiet { display: block; width: 100%; text-align: left; background: none;
  border: 0; padding: 10px 4px 0; margin-top: 4px; cursor: pointer; font: inherit;
  font-size: 12.5px; color: #a0aec0; border-top: 1px solid #e2e6ea; }
.sysfn-quiet:hover { color: #c0392b; }
.reset-inventory { background: #fdf3f2; border: 1px solid #f5c6c2; border-radius: 8px;
  padding: 10px 12px; margin-top: 12px; font-size: 13px; line-height: 1.7; color: #8a1c14; }
#reset-phrase { letter-spacing: 1px; }
.row-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
tr.editing td { background: #f7fbf8; vertical-align: middle; }
tr.editing input { padding: 5px 7px; font-size: 13px; }

/* Six columns don't fit the content column once the System frame takes 360px.
   Scroll the table rather than wrapping every name and venue onto two lines. */
#players-table { overflow-x: auto; }
#players-table table { min-width: 800px; }
#players-table td, #players-table th { white-space: nowrap; }
#players-table tr.editing td { white-space: normal; }

/* Editing a venue: four fields in a fixed 2x2 grid with the buttons on their
   own line. Wrapping them into a flex row orphaned "State" onto a second line
   with the buttons floating beside the first, which read as a broken form. */
.venue-row.editing { flex-direction: column; align-items: stretch; gap: 10px; }
.venue-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.venue-edit label { min-width: 0; }
.venue-edit input { width: 100%; }
.venue-edit-actions { justify-content: flex-end; }