/* ==========================================================================
   Base
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-ext-wght-normal.ad4eb06671be.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-primary: #1554c7;
  --color-primary-dark: #0e3f99;
  --color-primary-soft: #eaf1fd;
  --color-navy: #0b2250;
  --color-accent: #e30613;
  --color-text: #1a2233;
  --color-muted: #5d687a;
  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-border: #e1e6ee;
  --color-border-strong: #cdd5e0;
  --color-danger: #c4291c;
  --color-success: #17804a;
  --color-warning: #a35300;
  --radius: 12px;
  --radius-small: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-hover: 0 6px 20px rgba(16, 24, 40, 0.09);
  --control-height: 46px;
  --container: 1140px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

main { flex: 1; padding-top: 2rem; padding-bottom: 3rem; }

a { color: var(--color-primary); text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.75rem; color: var(--color-navy); letter-spacing: -0.02em; }
h1 { font-size: 1.85rem; font-weight: 800; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
@media (min-width: 768px) { h1 { font-size: 2.3rem; } }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }

.lead { font-size: 1.1rem; color: var(--color-muted); max-width: 42rem; }
.help { font-size: 0.875rem; color: var(--color-muted); margin: 0.35rem 0 0; }
.eyebrow { margin: 0 0 0.2rem; color: var(--color-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.eyebrow a { color: inherit; }
.text-warning { color: var(--color-warning); font-weight: 600; }
.link-danger { color: var(--color-danger); }

/* ==========================================================================
   Header and footer
   ========================================================================== */

.site-header {
  background: rgba(11, 34, 80, 0.97);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #0b2250;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner { display: flex; align-items: center; flex-wrap: wrap; min-height: 68px; }

.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--color-navy); text-decoration: none; }
.logo { display: block; height: 48px; width: auto; overflow: visible; }
@media (max-width: 400px) { .logo { height: 42px; } }
.brand img { display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-navy); }
.brand-tagline { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-top: 0.2rem; }
.brand:hover .brand-name { color: var(--color-primary); }

.nav-toggle { display: none; }
.nav-toggle-label { margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-small); }
.nav-toggle-label:hover { background: rgba(255, 255, 255, 0.08); }
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; position: relative; }
.nav-toggle-label span::before,
.nav-toggle-label span::after { content: ""; position: absolute; }
.nav-toggle-label span::before { top: -6px; }
.nav-toggle-label span::after { top: 6px; }

.site-nav { display: none; width: 100%; flex-direction: column; padding: 0.25rem 0 1rem; }
.nav-toggle:checked ~ .site-nav { display: flex; }
.site-nav a,
.nav-link-button {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-small);
  color: #dce6f8;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.site-nav a:hover,
.nav-link-button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.site-nav a.btn { color: #fff; margin-top: 0.5rem; text-align: center; background: var(--color-accent); border-color: var(--color-accent); }
.site-nav a.btn:hover { background: #b8000f; border-color: #b8000f; color: #fff; }
.nav-form { margin: 0; }
.nav-link-button { background: none; border: 0; font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; width: 100%; text-align: left; }

@media (min-width: 860px) {
  .nav-toggle-label { display: none; }
  .site-nav { display: flex; width: auto; margin-left: auto; flex-direction: row; align-items: center; gap: 0.15rem; padding: 0; }
  .site-nav a.btn { margin: 0 0 0 0.5rem; }
  .nav-link-button { width: auto; }
}

.site-footer { background: var(--color-navy); color: #b8c4da; font-size: 0.9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.footer-inner nav { display: flex; gap: 1.25rem; }
.footer-inner a { color: #dfe7f5; text-decoration: none; }
.footer-inner a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-height);
  padding: 0 1.3rem;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-secondary { background: #fff; color: var(--color-navy); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: #f4f7fb; color: var(--color-navy); border-color: #b3bfd0; }
.btn-small { min-height: 36px; padding: 0 0.9rem; font-size: 0.875rem; }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: #9c1f15; border-color: #9c1f15; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ==========================================================================
   Layout blocks
   ========================================================================== */

.section { margin-top: 2.25rem; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.page-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1.25rem; }
.page-title h1 { margin: 0; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.35rem;
}
.card-empty { color: var(--color-muted); }
.card-empty p { margin: 0; }

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 2.25rem 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(227, 6, 19, 0.3), transparent 32%),
    linear-gradient(135deg, #1554c7 0%, #0b2250 100%);
}
.hero::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.06);
}
.hero h1 { color: #fff; max-width: 38rem; }
.hero .lead { color: #d6e2f8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; position: relative; z-index: 1; }
.hero .btn { background: #fff; color: var(--color-navy); border-color: #fff; }
.hero .btn:hover { background: #eef3fc; }
.hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.hero .notice { position: relative; z-index: 1; color: var(--color-text); }
@media (min-width: 768px) { .hero { padding: 3.25rem 3rem; } }

main.narrow { max-width: 600px; }
.auth-page .page-body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.auth-page h1 { font-size: 1.6rem; }
.auth-page h2 { font-size: 1rem; color: var(--color-muted); font-weight: 600; margin-top: 1.75rem; }
@media (min-width: 768px) { .auth-page .page-body { padding: 2.25rem; } }

/* ==========================================================================
   Forms
   ========================================================================== */

.form { display: block; }
.card.form { padding: 1.5rem; }
.field { margin-bottom: 1.1rem; }
.field label,
.field legend { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; color: var(--color-navy); }
.field fieldset,
fieldset.filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }

.field input[type="text"],
.field input[type="search"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 16px; /* prevents zoom on iOS */
  color: var(--color-text);
  background-color: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  box-shadow: inset 0 1px 1px rgba(16, 24, 40, 0.03);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #98a2b3; }

/* Own arrow for selects: Safari ignores size and padding of native selects. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235d687a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px;
  cursor: pointer;
}
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field input[type="search"] { -webkit-appearance: none; appearance: none; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #b3bfd0; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21, 84, 199, 0.18); }

.field input[type="file"] { font: inherit; font-size: 0.9rem; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

.field-checkbox label,
.radio-options label { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 500; cursor: pointer; color: var(--color-text); }
.field-checkbox input,
.radio-options input { width: 20px; height: 20px; margin: 0.1rem 0 0; flex: none; }
.radio-options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.field .error,
.form-errors { color: var(--color-danger); font-size: 0.875rem; margin: 0.35rem 0 0; }
.form-errors ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.field-has-error input,
.field-has-error select,
.field-has-error textarea { border-color: var(--color-danger); }

.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.form-actions .btn { flex: 1 1 160px; }
.form-actions .form-actions { display: contents; }
.form-actions-vertical { flex-direction: column; }
.form-actions-vertical .btn { flex: none; }
.form-actions form { margin: 0; }
.form-actions .btn-link { align-self: center; }

.divider { display: flex; align-items: center; gap: 0.75rem; color: var(--color-muted); font-size: 0.875rem; margin: 1.5rem 0; }
.divider::before,
.divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.provider-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* ==========================================================================
   Messages and notices
   ========================================================================== */

.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.message { padding: 0.8rem 1rem; border-radius: var(--radius-small); background: var(--color-primary-soft); border: 1px solid #c9dbf7; margin-bottom: 0.5rem; }
.message-success { background: #e8f6ee; border-color: #bfe3cd; }
.message-warning { background: #fff5e8; border-color: #f6d7ab; }
.message-error { background: #fdecea; border-color: #f4c3bd; }

.notice { background: #fff6ea; border: 1px solid #f6d7ab; border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.notice p { margin: 0 0 0.75rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-danger { background: #fdecea; border-color: #f4c3bd; }
.notice-success { background: #e8f6ee; border-color: #b9e2c9; }

/* ==========================================================================
   Lists, data, badges
   ========================================================================== */

.data-list { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1rem; margin: 0; }
.data-list dt { color: var(--color-muted); font-size: 0.85rem; margin-top: 0.55rem; }
.data-list dd { margin: 0; }
@media (min-width: 600px) {
  .data-list { grid-template-columns: 190px 1fr; }
  .data-list dt, .data-list dd { margin-top: 0.45rem; }
}
.data-list-compact { grid-template-columns: 1fr auto !important; }
.link-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.link-list li { padding: 0.35rem 0; }

.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.result-main { display: flex; flex-direction: column; min-width: 0; }
.result-name { font-size: 1.02rem; color: var(--color-navy); }
.result-name a { color: inherit; text-decoration: none; }
.result-meta { color: var(--color-muted); font-size: 0.9rem; }
.result form { margin: 0; }

.badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); margin-left: 0.25rem; }
.badge-success { background: #e8f6ee; color: var(--color-success); }
.badge-muted { background: #eef0f3; color: var(--color-muted); }

.badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.tag { font-size: 0.74rem; font-weight: 650; padding: 0.14rem 0.5rem; border-radius: 6px; background: #eef1f5; color: var(--color-text); white-space: nowrap; }
.tag-rating { background: var(--color-primary-soft); color: #0e3f99; }
.tag-kind { background: #f2eafc; color: #5b2a91; }
.tag-hobby { background: #e6f6ed; color: var(--color-success); }
.tag-age { background: #fff1e0; color: var(--color-warning); }
.tag-gender { background: #fde9f1; color: #a0244f; }
.tag-series { background: #fff1e6; color: #b04a00; }

.phase { display: inline-block; font-size: 0.76rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; margin-top: 0.3rem; width: fit-content; }
.phase-draft { background: #eef0f3; color: var(--color-muted); }
.phase-announced { background: var(--color-primary-soft); color: var(--color-primary); }
.phase-open { background: #e3f6ea; color: var(--color-success); }
.phase-closed { background: #fff1e0; color: var(--color-warning); }
.phase-finished { background: #eef0f3; color: var(--color-muted); }
.phase-cancelled { background: #fdecea; color: var(--color-danger); }

.status { display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 700; padding: 0.32rem 0.8rem; border-radius: 999px; white-space: nowrap; }
.status-open { background: var(--color-primary); color: #fff; }
.status-announced { background: var(--color-primary-soft); color: var(--color-primary); }
.status-closed, .status-finished { background: #eef0f3; color: var(--color-muted); }
.status-cancelled { background: #fdecea; color: var(--color-danger); }
.status-draft { background: #fff5e6; color: var(--color-warning); }

/* ==========================================================================
   Accounts, xTTV, clubs
   ========================================================================== */

.profile-head, .club-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.profile-head h1, .club-head h1 { margin-bottom: 0.1rem; }
.avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1554c7, #0b2250); color: #fff;
  font-weight: 800; font-size: 1.5rem; text-decoration: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--color-border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-large { width: 160px; height: 160px; font-size: 3rem; }
.photo-preview { display: flex; justify-content: center; margin: 0.5rem 0 1.25rem; }
.club-logo { max-width: 88px; max-height: 88px; object-fit: contain; flex: none; border-radius: var(--radius-small); }

.result-list + .not-listed, .not-listed { margin-top: 1rem; }
.not-listed h2 { font-size: 1.05rem; }
.not-listed p { margin-top: 0; }
.rc-id-search { margin-top: 1.25rem; }
.rc-id-search summary { cursor: pointer; color: var(--color-primary); }
.rc-id-search .form { margin-top: 1rem; }
.xttv-box { margin-bottom: 1.5rem; }
.xttv-box h2 { font-size: 1.05rem; }
.xttv-status { margin: 0 0 0.5rem; font-weight: 650; }
.xttv-status::before { content: "● "; }
.xttv-status-linked::before { color: var(--color-success); }
.xttv-status-not_listed::before { color: var(--color-muted); }
.xttv-status-open::before, .xttv-status-disputed::before { color: var(--color-accent); }

.club-picker { max-height: 60vh; overflow-y: auto; margin: 0 -1.35rem; padding: 0 1.35rem; }
.club-group h2 { font-size: 0.78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 1.25rem 0 0.5rem; position: sticky; top: 0; background: var(--color-surface); padding: 0.3rem 0; }
.club-group ul { list-style: none; margin: 0; padding: 0; }
.club-option { display: block; padding: 0.6rem 0.6rem; border-radius: var(--radius-small); color: var(--color-text); text-decoration: none; }
a.club-option:hover { background: var(--color-primary-soft); color: var(--color-text); }
.club-option-taken { color: var(--color-muted); }
.club-option small { display: block; font-size: 0.8rem; }
.club-code { display: inline-block; min-width: 3.6rem; font-weight: 750; color: var(--color-primary); }
.club-option-taken .club-code { color: var(--color-muted); }

.club-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.club-card { display: flex; align-items: center; gap: 0.85rem; color: var(--color-text); text-decoration: none; height: 100%; transition: box-shadow 0.15s, border-color 0.15s; }
.club-card:hover { box-shadow: var(--shadow-hover); border-color: #c7d6ec; color: var(--color-text); }
.club-card img { width: 44px; height: 44px; object-fit: contain; }
.club-card-initials { width: 44px; height: 44px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; flex: none; }

/* ==========================================================================
   Tournament management
   ========================================================================== */

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.toolbar form { margin: 0; }
.danger-zone { margin-top: 2rem; }
.past-list { margin-top: 1rem; }
.past-list summary { cursor: pointer; color: var(--color-primary); margin-bottom: 0.75rem; }
.prose { margin-top: 1rem; }
.prose p:first-child { margin-top: 0; }
.map { height: 280px; border-radius: var(--radius); border: 1px solid var(--color-border); z-index: 0; }
.map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.6rem; }
.map-actions .help { margin: 0; }

/* ==========================================================================
   Calendar and public pages
   ========================================================================== */

.filterbar { margin-bottom: 1.25rem; }
.filterbar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.filterbar-more { margin-top: 0.6rem; }
.filterbar .help:empty { display: none; }
@media (min-width: 760px) {
  .filterbar-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px) {
  .filterbar-row { grid-template-columns: 1.1fr 1.3fr 0.8fr 1fr 1fr auto; }
  .filterbar-more { grid-template-columns: repeat(5, 1fr); }
}
.fb-item { min-width: 0; }
.fb-item select,
.fb-item input[type="text"],
.fb-item input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 15px;
  color: var(--color-text);
  background-color: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fb-item select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235d687a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 15px;
  cursor: pointer;
}
.fb-item select:focus,
.fb-item input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21, 84, 199, 0.18); }
.fb-near { position: relative; }
.fb-near input { padding-right: 2.6rem !important; }
.fb-locate { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; color: var(--color-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fb-locate:hover { background: var(--color-primary-soft); }
.fb-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 500; cursor: pointer; min-height: 42px; }
.fb-check input { width: 18px; height: 18px; }
.fb-more-toggle { min-height: 42px; padding: 0 0.9rem; }
.result-count { color: var(--color-muted); margin: 0 0 0.5rem; }
#calendar-results.loading { opacity: 0.5; transition: opacity 0.2s; }
.month-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin: 1.75rem 0 0.75rem; font-weight: 750; }
.month:first-of-type .month-title { margin-top: 0.75rem; }

.tcard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.tcard { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.tcard:hover { border-color: #c7d6ec; box-shadow: var(--shadow-hover); }
.tcard-link { display: grid; grid-template-columns: 58px 1fr; gap: 0.25rem 1rem; padding: 1.1rem; color: var(--color-text); text-decoration: none; }
.tcard-link:hover { color: var(--color-text); }
.tcard-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #eef4fd, #e2ecfb); border-radius: 12px; padding: 0.45rem 0; height: fit-content; }
.tcard-weekday, .tcard-month { font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); }
.tcard-day { font-size: 1.55rem; font-weight: 800; line-height: 1.05; color: var(--color-navy); }
.tcard-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.08rem; color: var(--color-navy); }
.tcard-logo { width: 28px; height: 28px; object-fit: contain; }
.tcard-meta { display: block; color: var(--color-muted); font-size: 0.88rem; }
.tcard-competitions { list-style: none; margin: 0.7rem 0 0; padding: 0.6rem 0 0; border-top: 1px dashed var(--color-border); display: grid; gap: 0.4rem; }
.tcard-competitions li { display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; gap: 0.2rem 0.6rem; font-size: 0.9rem; }
.tcard-competitions .badges { grid-column: 2 / -1; margin: 0; }
.tcard-time { font-variant-numeric: tabular-nums; color: var(--color-muted); }
.tcard-cname { font-weight: 650; }
.tcard-places { color: var(--color-muted); font-size: 0.82rem; grid-column: 3; grid-row: 1; }
.tcard .status { grid-column: 2; justify-self: start; margin-top: 0.6rem; }
.tcard-live { position: absolute; right: 1.1rem; bottom: 1.1rem; }
.btn-live { background: #fff; color: var(--color-danger); border: 1px solid var(--color-danger); }
.btn-live:hover { background: #fdecea; color: var(--color-danger); }
.tcard-cancelled .tcard-title strong { text-decoration: line-through; }
@media (min-width: 700px) {
  .tcard-link { grid-template-columns: 64px 1fr auto; padding: 1.2rem 1.35rem; }
  .tcard .status { grid-column: 3; grid-row: 1; align-self: start; margin-top: 0; }
  .tcard-competitions li { grid-template-columns: 3rem auto 1fr auto; }
  .tcard-competitions .badges { grid-column: 3; grid-row: 1; }
  .tcard-places { grid-column: 4; }
}
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; color: var(--color-muted); }

.tournament-head { display: flex; gap: 1.1rem; align-items: flex-start; }
.tournament-head h1 { margin-bottom: 0.3rem; }
.tournament-when { margin: 0 0 0.6rem; color: var(--color-muted); }
.detail-layout { display: grid; gap: 0 1.75rem; }
@media (min-width: 900px) { .detail-layout { grid-template-columns: 1fr 350px; } }
.competition-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.competition { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; }
.competition-time { font-size: 1.2rem; font-weight: 800; color: var(--color-navy); font-variant-numeric: tabular-nums; min-width: 3.4rem; }
.competition-body { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.competition-name { font-weight: 750; font-size: 1.05rem; color: var(--color-navy); text-decoration: none; }
.venue-photo { width: 100%; border-radius: var(--radius); margin-bottom: 1rem; }

.next-tournament { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; transition: box-shadow 0.15s; }
.next-tournament:hover { box-shadow: var(--shadow-hover); }
.next-main { flex: 1 1 260px; color: var(--color-text); text-decoration: none; }
.next-main:hover { color: var(--color-text); }
.next-main::after { content: ""; position: absolute; inset: 0; }  /* the whole card opens the tournament */
.next-side { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; }
.next-live { position: relative; z-index: 1; text-align: center; }
.next-name { font-size: 1.35rem; color: var(--color-navy); }
.countdown { text-align: center; background: linear-gradient(135deg, #1554c7, #0b2250); color: #fff; border-radius: var(--radius); padding: 0.85rem 1.35rem; min-width: 150px; }
.countdown-value { display: block; font-size: 1.45rem; font-weight: 800; }
.countdown-label { font-size: 0.76rem; opacity: 0.85; }

/* ==========================================================================
   Entries
   ========================================================================== */

.table-wrap { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 700; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--color-border); background: #f8fafc; }
.table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table form { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.row-me td { background: #fff8ef; }
.row-attention td { background: #fff6ea; }
.player-cell { display: flex; align-items: center; gap: 0.5rem; }
.mini-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.paid-toggle { font: inherit; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.65rem; border: 1px solid var(--color-border-strong); background: #fff; color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.paid-toggle.is-paid { background: #e3f6ea; border-color: #b7e2c7; color: var(--color-success); }
.row-actions { white-space: nowrap; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.inline-form .field { flex: 1 1 240px; margin: 0; }
.candidate-list { margin-top: 0.75rem; }
.competition-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.entry-count { display: flex; flex-direction: column; align-items: center; line-height: 1.15; text-decoration: none; color: var(--color-navy); font-variant-numeric: tabular-nums; padding: 0.2rem 0.5rem; border-radius: var(--radius-small); }
.entry-count:hover { background: var(--color-primary-soft); }
.entry-count span { font-size: 0.72rem; color: var(--color-muted); }
.entry-count.is-full strong, .tcard-places.is-full { color: var(--color-danger); }
.guide-toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; }
.guide-toc li { margin: 0.15rem 0; break-inside: avoid; }
.guide h2 { font-size: 1.3rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); scroll-margin-top: 1rem; }
.guide h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide h3 { margin-top: 1.5rem; }
.guide li { margin: 0.3rem 0; }
.guide-shot { margin: 1.25rem 0 1.5rem; }
.guide-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-small); box-shadow: 0 1px 4px rgba(11, 34, 80, 0.08); }
.guide-shot figcaption { margin-top: 0.45rem; font-size: 0.86rem; color: var(--color-muted); }
.guide-table { overflow-x: auto; margin: 0.75rem 0 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.guide-table td:first-child { font-weight: 600; min-width: 9.5rem; }
@media (max-width: 640px) { .guide-toc ol { columns: 1; } }
@media print {
  .site-header, .site-footer, .guide-print, .guide-toc { display: none; }
  .guide { border: 0; box-shadow: none; padding: 0; }
  .guide h2 { break-after: avoid; }
  .guide-table tr, .guide-shot { break-inside: avoid; }
  .guide-shot img { max-width: 80%; box-shadow: none; }
}
.legal h2 { font-size: 1.05rem; margin-top: 1.5rem; }
.legal h2:first-child { margin-top: 0; }
.my-entry { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.my-entry form { margin: 0; }
.my-entry .btn-link { font-size: 0.85rem; }
.pair-pick { display: grid; gap: 1rem; }
@media (min-width: 700px) { .pair-pick { grid-template-columns: 1fr 1fr; } }
.pair-pick fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pair-pick legend { font-weight: 700; margin-bottom: 0.5rem; color: var(--color-navy); }
.pick { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0.6rem; border-radius: var(--radius-small); cursor: pointer; }
.pick:hover { background: var(--color-primary-soft); }
.pick input { margin-top: 0.25rem; }
.invite-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.invite-form input[type="text"] { min-height: 36px; padding: 0.3rem 0.6rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); font: inherit; font-size: 0.9rem; min-width: 200px; }
.passend-row { margin-bottom: 0.6rem; }
.passend-toggle { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; background: var(--color-primary-soft); border: 1px solid #c9dbf7; border-radius: 999px; cursor: pointer; font-size: 0.92rem; }
.passend-toggle input { width: 18px; height: 18px; }
.feed-url code { word-break: break-all; font-size: 0.85rem; background: #f4f6fa; padding: 0.4rem 0.6rem; border-radius: 6px; display: block; }
.notify-button { margin-top: 0.6rem; font-size: 0.9rem; text-decoration: none; }
.notify-button:hover { text-decoration: underline; }
/* Installed app on iPhone: keep the header below the status bar. */
.site-header { padding-top: env(safe-area-inset-top); }

/* Series */
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.tab { padding: 0.45rem 0.95rem; border-radius: 999px; background: #fff; border: 1px solid var(--color-border-strong); color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.tab:hover { border-color: var(--color-primary); }
.tab-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.standings-search { width: 100%; max-width: 360px; min-height: 42px; padding: 0.4rem 0.8rem; margin-bottom: 0.7rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); font: inherit; }
.standings th a { color: inherit; }
.struck { text-decoration: line-through; color: var(--color-muted); }
.points-table { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; }
.place-input { width: 4.5rem; min-height: 36px; padding: 0.2rem 0.4rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); font: inherit; text-align: right; }
.result-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; flex: none; }
.series-rank { text-align: right; white-space: nowrap; }
@media (max-width: 600px) {
  .standings th, .standings td { padding-left: 0.4rem; padding-right: 0.4rem; }
  .standings td:nth-child(2) { min-width: 8.5rem; }
}
.section[id] { scroll-margin-top: 80px; }
.points-editor { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.points-editor legend { font-weight: 700; color: var(--color-navy); margin-bottom: 0.3rem; }
.points-editor .js-suggest { margin: 0.2rem 0 0.8rem; }
.points-grid { border-collapse: collapse; width: 100%; max-width: 420px; }
.points-grid th, .points-grid td { padding: 0.3rem 0; border-bottom: 1px solid var(--color-border, #e3e8f0); text-align: left; vertical-align: middle; }
.points-grid th { font-weight: 600; padding-right: 1rem; white-space: nowrap; }
.points-grid th .help { font-weight: 400; margin: 0; }
.points-grid input { width: 6.5rem; min-height: 42px; padding: 0.3rem 0.6rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); font: inherit; text-align: right; }
.points-grid input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.points-grid .unit { color: var(--color-muted); margin-left: 0.4rem; }
.points-grid .field-has-error input { border-color: var(--color-danger, #c0392b); }
.points-participation th, .points-participation td { border-bottom: 0; padding-top: 0.6rem; }
.operator { font-style: normal; line-height: 1.6; margin: 0.4rem 0 1rem; }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-accent:hover { background: #b8000f; border-color: #b8000f; color: #fff; }
.nom-group { margin-bottom: 1rem; }
.nom-group h3 { margin: 0; }
.player-form { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.player-form select, .player-form input { min-height: 34px; padding: 0.2rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); font: inherit; font-size: 0.88rem; background: #fff; }
.player-form input { width: 9rem; }
.compact-select { min-height: 36px; padding: 0.2rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); font: inherit; background: #fff; }
.hero-logo svg { display: block; width: min(340px, 100%); height: auto; margin: 0 0 1rem; }
/* Small selects in tables: same own arrow as .field select (Safari draws native selects grey). */
.player-form select, .compact-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235d687a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 14px;
  cursor: pointer;
}
.player-form select:focus, .player-form input:focus, .compact-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.choice-list { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.choice { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); cursor: pointer; }
.choice:hover { background: var(--color-primary-soft); }
.choice .result-meta { margin-left: auto; }
.nav-badge { display: inline-block; min-width: 1.3rem; padding: 0.05rem 0.4rem; margin-left: 0.2rem; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.3; }
.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
.figure { padding: 1rem; }
.figure strong { display: block; font-size: 1.8rem; color: var(--color-navy); line-height: 1.1; }
.figure span { display: block; }
/* Check-in */
.checkin-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.checkin-buttons { white-space: nowrap; }
.checkin-btn { min-width: 4.2rem; min-height: 40px; margin: 0 0.15rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); background: #fff; font: inherit; font-weight: 700; cursor: pointer; color: var(--color-muted); }
.checkin-row.is-present .checkin-present { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.checkin-row.is-missing .checkin-missing { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.checkin-row.is-present td { background: #eef9f2; }
.checkin-row.is-missing td { background: #fdf0ef; }
.checkin-row.is-missing td:first-child strong { text-decoration: line-through; color: var(--color-muted); }
.guest-results { margin-top: 0.8rem; }
.guest-results .result { padding: 0.55rem 0; border-top: 1px solid var(--color-border); }
.guest-form { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.guest-form .form-actions { grid-column: 1 / -1; }
.section > .card + .card { margin-top: 0.8rem; }
.pair-slots { display: grid; gap: 1rem; }
@media (min-width: 800px) { .pair-slots { grid-template-columns: 1fr 1fr; } }
.pair-slot h4 { margin: 0 0 0.5rem; color: var(--color-navy); }
.selected-slot { padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-primary-soft); margin: 0; }
/* Tournament operation: groups */
.play-groups { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.play-group { min-width: 0; }
.play-group h2 { margin-top: 0; }
.play-group h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; color: var(--color-muted); }
.play-group .row-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.play-group tr.is-withdrawn td { color: var(--color-muted); }
.play-group tr.is-withdrawn strong { text-decoration: line-through; }
.move-form { margin: 0; }
.match-list { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.2rem; font-size: 0.92rem; }
.match { display: flex; justify-content: space-between; gap: 0.5rem; }
.match-state { color: var(--color-muted); white-space: nowrap; }
.match-done .match-state { color: var(--color-text); font-weight: 700; }
.match-called .match-state { color: var(--color-danger); font-weight: 700; }
.match-title { font-size: 1.5rem; }
.match-title span { color: var(--color-muted); font-weight: 400; }
.sets-table { border-collapse: collapse; margin-bottom: 0.5rem; }
.sets-table th, .sets-table td { padding: 0.25rem 0.4rem; text-align: center; }
.set-input { width: 4.5rem; min-height: 46px; font: inherit; font-size: 1.2rem; text-align: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); }
.games-input { display: flex; align-items: flex-end; gap: 0.8rem; margin-bottom: 0.5rem; }
.games-input label { display: grid; gap: 0.3rem; font-weight: 600; }
.notice-warning { background: #fff6e0; border-color: #f2d58f; }
.match-link { flex: 1; display: flex; justify-content: space-between; gap: 0.5rem; color: inherit; text-decoration: none; padding: 0.12rem 0.35rem; margin: 0 -0.35rem; border-radius: 6px; }
.match-link:hover { background: var(--color-primary-soft); color: inherit; }
.match-link:hover .match-players { color: var(--color-primary); }
/* KO bracket */
.bracket { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.bracket-round { display: flex; flex-direction: column; justify-content: space-around; gap: 0.6rem; min-width: 200px; }
.bracket-round h3 { font-size: 0.85rem; color: var(--color-muted); margin: 0 0 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
.bracket-match { display: grid; gap: 0.15rem; padding: 0.45rem 0.6rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-small); color: inherit; text-decoration: none; font-size: 0.9rem; }
.bracket-match:hover { border-color: var(--color-primary); }
.bracket-match.status-called { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
.bracket-match.status-void { opacity: 0.6; }
.bracket-player { display: flex; justify-content: space-between; gap: 0.6rem; }
.bracket-player.is-winner { font-weight: 700; }
.bracket-player em { color: var(--color-muted); font-style: normal; }
.places-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
/* Hall plan: grid of --cols x --rows cells, a table is 2 x 1 cells (rotated 1 x 2) */
.hall-plan { position: relative; width: 100%; aspect-ratio: var(--cols) / var(--rows); background-color: #f7f9fc; background-image: linear-gradient(#e6ebf3 1px, transparent 1px), linear-gradient(90deg, #e6ebf3 1px, transparent 1px); background-size: calc(100% / var(--cols)) calc(100% / var(--rows)); border: 2px solid var(--color-border-strong); border-radius: var(--radius-small); margin: 0.8rem 0 1rem; overflow: hidden; }
.hall-table { position: absolute; left: calc(100% / var(--cols) * var(--x)); top: calc(100% / var(--rows) * var(--y)); width: calc(100% / var(--cols) * 2); height: calc(100% / var(--rows)); display: flex; align-items: center; justify-content: center; background: #1f6fb2; color: #fff; border: 2px solid #fff; border-radius: 4px; font-weight: 800; box-sizing: border-box; user-select: none; touch-action: none; }
.hall-table.is-rotated { width: calc(100% / var(--cols)); height: calc(100% / var(--rows) * 2); }
.hall-table.is-inactive { background: #9aa4b2; }
.hall-plan.editing .hall-table { cursor: grab; }
.hall-table::after { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; border-left: 1px solid rgba(255, 255, 255, 0.7); }
.hall-table.is-rotated::after { left: 8%; right: 8%; top: 50%; bottom: auto; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.7); }
.hall-table span { position: relative; z-index: 1; background: inherit; padding: 0 0.2em; }
/* Board (tables & calling) */
main.wide { max-width: 1400px; }
.legend { font-size: 0.8rem; font-weight: 500; color: var(--color-muted); margin-left: 0.8rem; }
.dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; vertical-align: -1px; margin-left: 0.4rem; }
.dot.free, .hall-plan.live .hall-table.is-free { background: #1e9e55; }
.dot.busy, .hall-plan.live .hall-table.is-busy { background: #d63a2f; }
.hall-plan.live .hall-table { font-weight: 600; }
.hall-plan.live .hall-table::after { display: none; }
.table-info { display: flex; flex-direction: column; align-items: center; line-height: 1.1; text-align: center; overflow: hidden; padding: 0 0.15rem; }
.table-info b { font-size: 0.95rem; }
.table-info small { font-size: 0.62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.board-columns { display: grid; gap: 1.2rem; }
@media (min-width: 1000px) { .board-columns { grid-template-columns: 1.2fr 1fr; } }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.board-item { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; }
.board-item > div:first-child { display: grid; gap: 0.1rem; }
.board-item.is-running { border-left: 4px solid #d63a2f; }
.call-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.wait-badge { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; background: #eef1f6; color: var(--color-muted); width: fit-content; }
.wait-badge.warn { background: #fff0db; color: #b25c00; }
.wait-badge.alert { background: #fde3e1; color: #c0281c; }
.waiting-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); }
.manage-tabs { margin: 0.2rem 0 1.2rem; }
.turniertag-hint a { font-weight: 700; }

/* Top menu: direct link to the tournament management on the tournament day */
.site-nav a.nav-tournament-day { background: var(--accent, #e30613); color: #fff; border-radius: 6px; font-weight: 700; }
.site-nav a.nav-tournament-day:hover { background: #b90510; color: #fff; }
.tab-disabled { opacity: 0.45; cursor: not-allowed; }

/* Tournament management: steps of a competition on the tournament day */
.steps { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0.45rem 0 0.35rem; padding: 0; font-size: 0.82rem; }
.step { padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border-strong); color: var(--color-muted); background: #fff; }
.step + .step::before { content: ""; }
.step-done { background: #e7f6ec; border-color: #9fd6b0; color: #1c6b35; }
.step-done::after { content: " ✓"; }
.step-current { background: var(--color-navy); border-color: var(--color-navy); color: #fff; font-weight: 700; }
.fallback-details summary { cursor: pointer; }
.fallback-details[open] summary { margin-bottom: 0.6rem; }
.fallback-details ol { padding-left: 1.3rem; }
.check-list { margin: 0.4rem 0 0.9rem; padding-left: 1.2rem; }
.check-list li { margin: 0.2rem 0; }

/* Live page */
.live-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-danger, #e30613); margin-right: 0.3rem; animation: live-pulse 1.6s infinite; vertical-align: middle; }
@keyframes live-pulse { 50% { opacity: 0.3; } }
.live-updated { margin: 0 0 0.8rem; }
.live-columns { display: grid; gap: 0 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.live-match { display: flex; gap: 0.9rem; align-items: center; padding: 0.7rem 0.9rem; }
.live-table, .live-score { flex: none; min-width: 4.6rem; text-align: center; font-weight: 800; color: var(--color-navy); }
.live-table { background: #fdecec; color: #b3261e; border-radius: 6px; padding: 0.25rem 0.4rem; }
.live-players .is-winner, .hd-players-small .is-winner { font-weight: 700; }
.live-group-title { margin-top: 0; display: flex; justify-content: space-between; gap: 0.5rem; }
.cross-table td, .cross-table th { padding-left: 0.35rem; padding-right: 0.35rem; }
.cross-table .cross-self { background: #d9dee6; }
.live-matches summary { cursor: pointer; margin: 0.6rem 0 0.3rem; color: var(--color-muted); font-weight: 600; }
div.bracket-match:hover { border-color: var(--color-border); }

/* Hall display (TV) */
body.hall-display { background: #07163a; color: #fff; min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-size: clamp(16px, 1.6vw, 34px); }
.hd-head { display: flex; align-items: center; gap: 1.2em; padding: 0.6em 1.2em; background: #0b2250; }
.hd-brand svg { height: 2.2em; width: auto; }
.hd-title { flex: 1; font-size: 1.2em; }
.hd-clock { font-size: 1.8em; font-weight: 800; font-variant-numeric: tabular-nums; }
#hall { flex: 1; padding: 0.8em 1.2em; display: flex; flex-direction: column; gap: 0.8em; }
.hall-display h2 { color: #9fb6e6; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.4em; }
.hd-called { background: #e30613; border-radius: 0.5em; padding: 0.6em 0.9em; animation: hd-flash 1.2s ease-in-out 3; }
.hd-called h2 { color: #fff; }
@keyframes hd-flash { 50% { background: #ff4d57; } }
.hd-call { display: flex; align-items: center; gap: 0.8em; padding: 0.2em 0; }
.hd-table { font-size: 3em; font-weight: 900; min-width: 1.6em; text-align: center; background: #fff; color: #e30613; border-radius: 0.2em; line-height: 1.15; }
.hd-players { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.6em; font-size: 1.6em; }
.hd-players small, .hd-players-small small { display: block; width: 100%; font-size: 0.55em; opacity: 0.8; font-weight: 400; }
.hd-vs { opacity: 0.7; }
.hd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.hd-row { display: flex; align-items: center; gap: 0.7em; padding: 0.35em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.hd-row.is-new { color: #ffd2d4; }
.hd-table-small, .hd-score { flex: none; min-width: 2.6em; text-align: center; font-weight: 800; border-radius: 0.25em; padding: 0.1em 0.2em; }
.hd-table-small { background: #e30613; }
.hd-score { background: #1554c7; }
.hd-players-small { flex: 1; }
.hd-since { flex: none; opacity: 0.75; font-variant-numeric: tabular-nums; }
.hd-empty { opacity: 0.6; }
.hd-foot { display: flex; justify-content: space-between; align-items: center; padding: 0.4em 1.2em; font-size: 0.6em; opacity: 0.6; }
.hd-foot a { color: #fff; }
.hd-foot a.is-active { font-weight: 700; }
.hd-foot button { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; padding: 0.3em 0.8em; font: inherit; cursor: pointer; }
@media (max-width: 800px) { .hd-grid { grid-template-columns: 1fr; } }
.waiting-table td { vertical-align: middle; }
.waiting-table tr.alert td { background: #fff5f4; }
.waiting-table tr.warn td { background: #fffaf1; }
.waiting-table .call-form { justify-content: flex-end; }
/* Board: progress of the groups */
.progress-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.progress-card { padding: 0.8rem 1rem; }
.progress-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.progress-row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.2rem 0; font-size: 0.9rem; }
.progress-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-bar { height: 0.55rem; background: #e6eaf0; border-radius: 999px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--color-primary, #1554c7); }
.progress-row.is-behind .progress-bar span { background: #e08a00; }
.progress-row.is-done .progress-bar span { background: #2e9e57; }
.progress-count { white-space: nowrap; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.progress-total { margin-bottom: 0.3rem; }
.progress-total .progress-name { font-weight: 800; color: var(--color-navy); }
.progress-group { margin: 0.35rem 0 0 1rem; padding: 0.35rem 0 0.35rem 0.7rem; border-left: 3px solid #d5dbe3; }
.progress-group.is-behind { border-left-color: #e08a00; }
.progress-group.is-done { border-left-color: #2e9e57; }
.progress-group-head { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.88rem; }
.match-dots { display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem; margin-top: 0.3rem; }
.match-round { display: inline-flex; gap: 2px; }
.match-dots i, .legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; background: #d9dee6; }
.legend i { vertical-align: -0.1rem; margin: 0 0.15rem 0 0.4rem; }
i.dot-done { background: #2e9e57; }
i.dot-called { background: #d63a2f; }
i.dot-pending { background: #d9dee6; }
/* Secondary button for actions that delete something (e.g. undo the draw) */
.btn-danger-outline { background: #fff; color: var(--color-danger); border-color: #e7b3ae; }
.btn-danger-outline:hover { background: #fdf0ef; color: #9c1f15; border-color: var(--color-danger); }
.board-filter { margin: -0.2rem 0 0.7rem; }
.board-filter .tab { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.progress-total { grid-template-columns: auto 1fr auto; }
.progress-total .progress-name { white-space: normal; overflow: visible; }
/* Match sheets: mode, print batch, table QR */
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.board-head h2 { margin: 0; }
.sheet-mode label { font-size: 0.85rem; color: var(--color-muted); display: flex; gap: 0.4rem; align-items: center; }
.print-batch { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0; padding: 0.5rem 0.8rem; border-radius: var(--radius-small); background: #eef1f6; font-size: 0.9rem; }
.print-batch.has-items { background: #fff0db; }
.table-confirm { text-align: center; }
.table-confirm-names { font-size: 1.4rem; font-weight: 800; color: var(--color-navy); display: flex; flex-direction: column; gap: 0.1rem; margin: 0.4rem 0; }
.table-confirm-names span { font-size: 1rem; color: var(--color-muted); }
.btn-block { display: block; width: 100%; text-align: center; margin: 0.8rem 0 0.4rem; }
/* Board: compact hall plan (at most about a third of the screen height), collapsible */
.hall-plan.live { max-width: calc(40vh * var(--cols) / var(--rows)); margin-left: auto; margin-right: auto; }
.hall-toggle { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.hall-toggle-icon { display: inline-block; transition: transform 0.15s; }
.hall-section.is-collapsed .hall-plan { display: none; }
.hall-section.is-collapsed .hall-toggle-icon { transform: rotate(-90deg); }
/* Tournament day: second menu row under the phase tabs */
.subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.2rem; margin: -0.4rem 0 1.4rem; padding: 0 0.2rem; border-bottom: 1px solid var(--color-border); }
.subnav-item { padding: 0.55rem 0 0.5rem; color: var(--color-muted); font-weight: 600; font-size: 0.95rem; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav-item:hover { color: var(--color-navy); }
.subnav-item.is-active { color: var(--color-navy); border-bottom-color: var(--color-accent, #e30613); }
.subnav-sep { flex: 1; }
.phase-back { margin: -0.4rem 0 1rem; font-size: 0.9rem; }
.phase-back a { color: var(--color-muted); text-decoration: none; }
.phase-back a:hover { color: var(--color-navy); text-decoration: underline; }
/* Common head of the tournament management pages */
main.wide .page-narrow { max-width: 640px; }
.tournament-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 0 0 0.9rem; }
.tb-back { color: var(--color-muted); text-decoration: none; font-size: 0.9rem; }
.tb-back:hover { color: var(--color-navy); text-decoration: underline; }
.tb-name { font-weight: 800; font-size: 1.15rem; color: var(--color-navy); text-decoration: none; }
.tb-name:hover { text-decoration: underline; color: var(--color-navy); }
.tb-meta { color: var(--color-muted); font-size: 0.9rem; }
.tab-active, .tab-active:hover, .tab-active:visited { color: #fff; }
/* "← back" links: the same subtle style everywhere */
.back-link { margin: 0 0 0.6rem; font-size: 0.92rem; }
.back-link a { color: var(--color-muted); text-decoration: none; }
.back-link a:hover { color: var(--color-navy); text-decoration: underline; }
/* Hall display: pages with standings, brackets and final results */
.hd-slides { background: #0b2250; border-radius: 0.5em; padding: 0.6em 0.9em; }
.hd-slide h2 { color: #fff; font-size: 1.1em; text-transform: none; letter-spacing: 0; display: flex; justify-content: space-between; }
.hd-slide-count { opacity: 0.5; font-weight: 400; font-size: 0.8em; }
.hd-table { width: 100%; border-collapse: collapse; font-size: 1.05em; }
.hd-table th { text-align: left; font-size: 0.65em; text-transform: uppercase; letter-spacing: 0.06em; color: #9fb6e6; font-weight: 600; padding: 0.2em 0.4em; }
.hd-table td { padding: 0.25em 0.4em; border-top: 1px solid rgba(255, 255, 255, 0.1); font-variant-numeric: tabular-nums; }
.hd-table td:nth-child(n+4), .hd-table th:nth-child(n+4) { text-align: center; }
.hd-table .hd-name { font-weight: 700; }
.hd-table .hd-club { opacity: 0.7; font-size: 0.8em; }
.hd-table tr.is-out { opacity: 0.45; text-decoration: line-through; }
.hd-note { font-size: 0.65em; opacity: 0.6; margin: 0.4em 0 0; }
.hd-bracket { display: flex; gap: 1em; }
.hd-bracket-round { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 0.4em; min-width: 0; }
.hd-bracket-round h3 { font-size: 0.6em; color: #9fb6e6; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.hd-bracket-match { background: rgba(255, 255, 255, 0.07); border-radius: 0.25em; padding: 0.2em 0.4em; font-size: 0.8em; }
.hd-bracket-match.is-running { box-shadow: 0 0 0 2px #e30613; }
.hd-bracket-match span { display: flex; justify-content: space-between; gap: 0.5em; white-space: nowrap; overflow: hidden; }
.hd-bracket-match .is-winner { font-weight: 800; }
.hd-places { columns: 2; margin: 0; padding: 0; list-style: none; font-size: 1.1em; }
.hd-places li { padding: 0.2em 0; break-inside: avoid; }
.hd-places small { opacity: 0.6; font-size: 0.65em; }
.hd-place { display: inline-block; min-width: 2.2em; font-weight: 800; color: #ffd166; }
/* Links: actions are buttons; links in text and data are calm and consistent */
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.data-list a, .result-name a, .result-meta a, .table td a, .club-head a, .tb-name { text-decoration: none; }
.data-list a:hover, .result-name a:hover, .result-meta a:hover, .table td a:hover { text-decoration: underline; }
.section-head, .page-title { align-items: center; }
.button-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.turniertag-hint p { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.play-group .row-actions { flex-wrap: wrap; gap: 0.3rem; }
.play-group .row-actions .btn-small { padding: 0.2rem 0.55rem; font-size: 0.8rem; }
.play-group .table-wrap { overflow-x: visible; }
@media (max-width: 1300px) { .play-group .row-actions { flex-direction: column; align-items: flex-end; } }
/* "Meine Turniere": choose the club for a new tournament/series */
.choose-club { position: relative; }
.choose-club summary { list-style: none; cursor: pointer; }
.choose-club summary::-webkit-details-marker { display: none; }
.choose-club-menu { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 20; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-small); box-shadow: 0 6px 20px rgba(11, 34, 80, 0.12); display: grid; min-width: 14rem; }
.choose-club-menu a { padding: 0.55rem 0.9rem; text-decoration: none; color: var(--color-navy); }
.choose-club-menu a:hover { background: #eef3fb; }
.list-title { font-size: 0.95rem; color: var(--color-muted); margin: 1rem 0 0.5rem; }
/* Heading rows with a button: heading and button centred on one line, the same gap to the card below */
.section-head { align-items: center; margin-bottom: 0.75rem; }
.section-head > h2, .section-head > h3 { margin: 0; }
.page-narrow { max-width: 640px; }

/* Online payment master switch of a club */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.switch-row > div { flex: 1 1 260px; }
.switch-row p { margin: 0; }
.switch-row .badge { margin: 0 0.35rem 0 0; }

.section-head > .toolbar { margin: 0; }

/* Board: last finished matches, to correct a result */
.recent-results { margin-top: 1rem; }
.recent-results > summary { cursor: pointer; font-weight: 650; color: var(--color-navy); padding: 0.3rem 0; }
.recent-results .board-list { margin-top: 0.5rem; }

/* Board: what the tournament management has to do next */
.board-item.is-todo { border-left: 4px solid var(--color-primary); }
.todo-panel { margin-bottom: 1.2rem; }

/* One competition on the tournament day: check-in, draw and matches, playing system */
.comp-tabs { margin: 0.2rem 0 1.1rem; }
.comp-tabs .tab { padding: 0.32rem 0.8rem; font-size: 0.88rem; }
.hall-edit { margin: -0.4rem 0 1.2rem; }
.form-section { margin: 1.6rem 0 0.3rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); font-size: 1.15rem; }

.steps .step a { color: inherit; text-decoration: none; }
.steps .step a:hover { text-decoration: underline; }

/* Preparation: harmless actions left, state changes (draft, cancel) right */
.toolbar-sep { flex: 1; }

/* Rarely used, weighty actions (remove a player, undo the draw): quiet until hovered */
.btn-quiet { background: #fff; color: var(--color-muted); border-color: var(--color-border-strong); font-weight: 600; }
.btn-quiet:hover { color: var(--color-danger); border-color: #e7b3ae; background: #fff; }

/* Board: foldable sections below the call lists */
.board-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.board-fold > summary::-webkit-details-marker { display: none; }
.board-fold > summary::before { content: "▸"; color: var(--color-muted); font-size: 0.9rem; }
.board-fold[open] > summary::before { content: "▾"; }
.board-fold > summary h2 { margin: 0; }
.board-fold[open] > summary { margin-bottom: 0.75rem; }

.more-settings { margin: 0.4rem 0 1rem; }
.more-settings > summary { cursor: pointer; font-weight: 600; color: var(--color-primary); padding: 0.4rem 0; }
.more-settings[open] > summary { margin-bottom: 0.6rem; }

/* KO with all places played: one small bracket per range of places */
.chain-title { margin: 1.2rem 0 0.4rem; font-size: 1rem; color: var(--color-navy); }

/* Fee per person (flat fee of the tournament) */
.fee-form { display: inline-block; margin: 0 0.25rem 0.2rem 0; }

/* Seeding by hand before the draw */
.seed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.4rem 1.2rem; margin: 0.6rem 0; }
.seed-row { display: flex; align-items: center; gap: 0.6rem; }
.seed-row input { width: 4.2rem; min-height: 38px; text-align: center; font: inherit; border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); }