/* ==========================================================================
   TTBuddy-huisstijl (revamp oktober 2026)

   Eén betekenis per kleur:
   - merkrood   : logo, hoofdknop, actieve tab. Nooit voor uitslagen.
   - tafelblauw : nu aan tafel, tafelnummer, live
   - groen      : winst, ratingwinst, "gaat door"
   - neutraal   : verlies (geen rood bij een kind dat verliest)
   - amber      : straks, hierna aan de beurt, wacht op loting
   - inkt       : tekst, namen en links

   Letters: Bricolage Grotesque (koppen, scores, tafelnummers), Figtree (tekst).
   Nooit kleiner dan 12 px (labels) of 13 px (tekst).
   ========================================================================== */

:root {
  --tt-red: #D8232A;
  --tt-red-press: #B5141B;
  --tt-red-solid: #D8232A; /* vlak met witte tekst (knoppen, tellers): in beide thema's 5:1 */
  --tt-red-solid-press: #B5141B;
  --tt-red-soft: #FCEBEC;
  --tt-ink: #0F1522;
  --tt-ink-2: #2A3342;
  --tt-muted: #5A6372;
  --tt-faint: #8A93A3;
  --tt-line: #E3E6EB;
  --tt-line-strong: #D2D7DE;
  --tt-paper: #F3F4F6;
  --tt-card: #FFFFFF;
  --tt-raise: #F8F9FA;
  --tt-blue: #2457D6;
  --tt-blue-soft: #E7EEFD;
  --tt-blue-solid: #2457D6; /* vlak met witte tekst: in beide thema's diep genoeg */
  --tt-green: #0F9157;
  --tt-green-soft: #E1F4EA;
  --tt-amber: #9A6400;
  --tt-amber-fill: #F2A100;
  --tt-amber-soft: #FFF3D9;
  --tt-neutral-soft: #ECEEF2;
  --tt-danger: #C62828;
  --tt-gold: #C99A2E;
  --tt-silver: #9AA3AE;
  --tt-bronze: #B87333;
  --tt-shadow: 0 1px 2px rgba(15,21,34,.05), 0 6px 20px rgba(15,21,34,.05);
  --tt-shadow-lg: 0 2px 8px rgba(15,21,34,.08), 0 24px 60px rgba(15,21,34,.16);
  --tt-glass: rgba(255,255,255,.82);

  --tt-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tt-display: "Bricolage Grotesque", "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;

  --tt-r-sm: 10px;
  --tt-r: 14px;
  --tt-r-lg: 20px;
  --tt-r-xl: 26px;

  --tt-ease: cubic-bezier(.2,.8,.2,1);
  --tt-ease-in: cubic-bezier(.4,0,1,1);
  --tt-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.3%, 1);
  --tt-dur-1: 120ms;
  --tt-dur-2: 240ms;
  --tt-dur-3: 320ms;

  --sidebar-width: 256px;
  --header-height: 60px;

  /* Oude namen, zodat bestaande schermen meteen de nieuwe kleuren krijgen */
  --tt-primary: var(--tt-red);
  --tt-primary-hover: var(--tt-red-press);
  --tt-text: var(--tt-ink);
  --tt-text-muted: var(--tt-muted);
  --tt-gray-light: var(--tt-raise);
  --content-bg: var(--tt-paper);
  --sidebar-bg: var(--tt-card);
  --sidebar-border: var(--tt-line);
  --sidebar-text: var(--tt-ink-2);
  --sidebar-text-muted: var(--tt-muted);
  --sidebar-hover: var(--tt-raise);
  --sidebar-active-bg: var(--tt-neutral-soft);

  /* Bootstrap volgt de huisstijl */
  --bs-body-font-family: var(--tt-font);
  --bs-body-bg: var(--tt-paper);
  --bs-body-color: var(--tt-ink);
  --bs-emphasis-color: var(--tt-ink);
  --bs-secondary-color: var(--tt-muted);
  --bs-tertiary-bg: var(--tt-raise);
  --bs-secondary-bg: var(--tt-neutral-soft);
  --bs-border-color: var(--tt-line);
  --bs-border-color-translucent: var(--tt-line);
  --bs-border-radius: var(--tt-r-sm);
  --bs-border-radius-lg: var(--tt-r);
  --bs-primary: var(--tt-red);
  --bs-primary-rgb: 216,35,42;
  --bs-secondary-rgb: 90,99,114;
  --bs-success-rgb: 15,145,87;
  --bs-info-rgb: 36,87,214;
  --bs-warning-rgb: 242,161,0;
  --bs-danger-rgb: 198,40,40;
  --bs-link-color: var(--tt-ink);
  --bs-link-color-rgb: 15,21,34;
  --bs-link-hover-color: var(--tt-ink);
  --bs-link-hover-color-rgb: 15,21,34;
  --bs-focus-ring-color: rgba(36,87,214,.35);
  --bs-heading-color: var(--tt-ink);
  color-scheme: light;
}

[data-theme="dark"] {
  --tt-red: #FF4B52;
  --tt-red-press: #E0343B;
  --tt-red-solid: #D8232A;
  --tt-red-solid-press: #B5141B;
  --tt-red-soft: #3A1517;
  --tt-ink: #EDF0F5;
  --tt-ink-2: #C9CFD9;
  --tt-muted: #A2ABBA;
  --tt-faint: #7D8696;
  --tt-line: #262E3B;
  --tt-line-strong: #334052;
  --tt-paper: #0B0F16;
  --tt-card: #141A24;
  --tt-raise: #19202C;
  --tt-blue: #7C9BFF;
  --tt-blue-soft: #18233F;
  --tt-blue-solid: #3A66E0;
  --tt-green: #3DD68C;
  --tt-green-soft: #12291F;
  --tt-amber: #FFC24A;
  --tt-amber-fill: #FFB020;
  --tt-amber-soft: #2E2410;
  --tt-neutral-soft: #222A36;
  --tt-danger: #FF6B6B;
  --tt-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --tt-shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
  --tt-glass: rgba(20,26,36,.82);

  --bs-body-bg: var(--tt-paper);
  --bs-body-color: var(--tt-ink);
  --bs-emphasis-color: var(--tt-ink);
  --bs-secondary-color: var(--tt-muted);
  --bs-tertiary-bg: var(--tt-raise);
  --bs-secondary-bg: var(--tt-neutral-soft);
  --bs-border-color: var(--tt-line);
  --bs-border-color-translucent: var(--tt-line);
  --bs-primary-rgb: 255,75,82;
  --bs-success-rgb: 61,214,140;
  --bs-info-rgb: 124,155,255;
  --bs-warning-rgb: 255,194,74;
  --bs-danger-rgb: 255,107,107;
  --bs-link-color: var(--tt-ink);
  --bs-link-color-rgb: 237,240,245;
  --bs-link-hover-color: var(--tt-ink);
  --bs-link-hover-color-rgb: 237,240,245;
  --bs-heading-color: var(--tt-ink);
  color-scheme: dark;
}

/* ---------- basis ---------- */
html { -webkit-text-size-adjust: 100%; }
@supports (font: -apple-system-body) {
  /* De lettergrootte van de telefoon telt mee (iOS "Tekstgrootte") */
  html.ios { font: -apple-system-body; }
}
body {
  font-family: var(--tt-font);
  background: var(--tt-paper);
  color: var(--tt-ink);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11";
}
* { font-family: inherit; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .tt-display {
  font-family: var(--tt-display);
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--tt-ink);
  text-wrap: balance;
}
h5, h6, .h5, .h6 { font-weight: 700; color: var(--tt-ink); }
p { color: inherit; }
a { color: var(--tt-ink); }
a:hover { color: var(--tt-ink); }
::selection { background: color-mix(in srgb, var(--tt-blue) 25%, transparent); }
:focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 2px; }
.text-muted { color: var(--tt-muted) !important; }
.small, small { font-size: .875em; }
.tt-num { font-variant-numeric: tabular-nums; }
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ic-fill { fill: currentColor; }
.ic-lg { width: 1.4em; height: 1.4em; }
.tt-mono { fill: currentColor; --ball: var(--tt-red); }

/* Links in lopende tekst: inkt met een rustige onderstreping */
a.tt-link { color: var(--tt-ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tt-ink) 25%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a.tt-link:hover { text-decoration-color: var(--tt-ink); color: var(--tt-ink); }

/* ---------- app-schil ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 1040;
  background: var(--tt-card); border-right: 1px solid var(--tt-line);
  display: flex; flex-direction: column; transition: transform var(--tt-dur-3) var(--tt-ease);
}
.sidebar-header { display: flex; align-items: center; padding: 22px 22px 18px; text-decoration: none; color: var(--tt-ink); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; }
.sidebar-nav .nav-section { padding: 16px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-faint); }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 1px 0;
  border-radius: 12px; color: var(--tt-ink-2); text-decoration: none; font-size: 15px; font-weight: 600;
  transition: background var(--tt-dur-1) var(--tt-ease), color var(--tt-dur-1);
}
.sidebar-nav .nav-link .ic { width: 20px; height: 20px; color: var(--tt-muted); }
.sidebar-nav .nav-link:hover { background: var(--tt-raise); color: var(--tt-ink); }
.sidebar-nav .nav-link.active { background: var(--tt-neutral-soft); color: var(--tt-ink); font-weight: 800; }
.sidebar-nav .nav-link.active .ic { color: var(--tt-ink); stroke-width: 2.4; }
.sidebar-nav .nav-link .tt-badge { margin-left: auto; }
.sidebar-footer { padding: 12px 22px; border-top: 1px solid var(--tt-line); display: grid; gap: 4px; }
.sidebar-footer a { display: flex; align-items: center; gap: 10px; color: var(--tt-muted); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 0; }
.sidebar-footer a:hover { color: var(--tt-ink); }
.sidebar-user { padding: 12px 16px 16px 22px; border-top: 1px solid var(--tt-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar-user .user-info { display: flex; align-items: center; gap: 10px; color: var(--tt-ink); font-size: 14px; font-weight: 600; text-decoration: none; min-width: 0; }
.sidebar-user .user-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-logout { border: 0; background: none; color: var(--tt-muted); padding: 8px; border-radius: 10px; }
.btn-logout:hover { color: var(--tt-ink); background: var(--tt-raise); }
.tt-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--tt-ink); color: var(--tt-paper); font-weight: 800; font-size: 14px; text-decoration: none; }
.tt-avatar:hover { color: var(--tt-paper); }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(9,12,18,.45); z-index: 1035; }
.sidebar-overlay.show { display: block; }

.theme-toggle { display: inline-flex; gap: 2px; background: var(--tt-neutral-soft); border-radius: 999px; padding: 3px; }
.theme-toggle button { border: 0; background: none; color: var(--tt-muted); border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.theme-toggle button.active { background: var(--tt-card); color: var(--tt-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.main-wrapper { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.top-header {
  position: sticky; top: 0; z-index: 1020; height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 24px 0; display: flex; align-items: center; gap: 12px;
  background: var(--tt-glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--tt-line) 70%, transparent);
}
.top-header .page-title { font-family: var(--tt-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--tt-ink); margin: 0; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-header .page-title > a, .top-header .page-title > span > a { color: var(--tt-ink); text-decoration: none; }
.top-header .page-title .ic { width: 22px; height: 22px; }
.header-mono { color: var(--tt-ink); text-decoration: none; flex: 0 0 auto; }
.header-lockup { text-decoration: none; }
/* Logo in de kopbalk alleen op de telefoon (op een groot scherm staat het in de zijbalk) */
.top-header .header-mono, .top-header .header-lockup { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tt-iconbtn {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--tt-line); background: var(--tt-card); color: var(--tt-ink); position: relative; cursor: pointer;
  transition: transform var(--tt-dur-1) var(--tt-ease), background var(--tt-dur-1);
}
.tt-iconbtn:hover { background: var(--tt-raise); color: var(--tt-ink); }
.tt-iconbtn:active { transform: scale(.94); }
.tt-iconbtn .ic { width: 19px; height: 19px; }
.tt-iconbtn.is-on { color: var(--tt-red); }
.main-content { flex: 1; padding: 24px 28px 40px; width: 100%; max-width: 1180px; }
.tt-lockup { display: inline-flex; align-items: flex-end; color: var(--tt-ink); text-decoration: none; }
.tt-lockup svg { display: block; fill: currentColor; --ball: var(--tt-red); }
.tt-lockup b { font-family: var(--tt-display); font-weight: 800; letter-spacing: -.035em; line-height: .74; }
.tt-lockup:hover { color: var(--tt-ink); }

/* ---------- onderbalk (telefoon) ---------- */
.mobile-bottom-nav {
  display: none; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 1040;
  height: 68px; border-radius: 24px; padding: 0 6px;
  background: var(--tt-glass); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border: 1px solid color-mix(in srgb, var(--tt-line) 80%, transparent); box-shadow: 0 10px 30px rgba(15,21,34,.14);
}
.mobile-bottom-nav .nav-items { display: flex; height: 100%; position: relative; }
.mobile-bottom-nav .bnav-link {
  flex: 1; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0;
  color: var(--tt-muted); text-decoration: none; font-size: 12px; font-weight: 700; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav .bnav-link .ic { width: 24px; height: 24px; stroke-width: 1.9; transition: transform var(--tt-dur-1) var(--tt-ease); }
.mobile-bottom-nav .bnav-link .tt-glyph { width: 30px; height: 24px; fill: currentColor; --ball: currentColor; }
.mobile-bottom-nav .bnav-link.active { color: var(--tt-ink); }
.mobile-bottom-nav .bnav-link.active .ic { stroke-width: 2.4; }
.mobile-bottom-nav .bnav-link:active .ic, .mobile-bottom-nav .bnav-link:active .tt-glyph { transform: scale(.88); }
.mobile-bottom-nav .bnav-badge { position: absolute; top: 8px; left: 50%; margin-left: 4px; }
.nav-ball {
  position: absolute; top: 6px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--tt-red);
  transform: translateX(var(--bx, -20px)); pointer-events: none;
}

.tt-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--tt-red-solid); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; border: 2px solid var(--tt-card); }

/* ---------- bladen (Meer, zoeken, spelerkaart) ---------- */
.tt-scrim { position: fixed; inset: 0; background: rgba(9,12,18,.45); z-index: 1050; opacity: 0; pointer-events: none; transition: opacity var(--tt-dur-2) var(--tt-ease); }
.tt-scrim.show { opacity: 1; pointer-events: auto; }
.tt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1051; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--tt-card); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18);
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%); transition: transform 380ms var(--tt-spring); visibility: hidden;
}
.tt-sheet.show { transform: translateY(0); visibility: visible; }
/* Toetsenbord open: het blad blijft erboven (iPhone schuift het toetsenbord over de pagina,
   Android maakt de pagina kleiner via interactive-widget). --tt-toetsenbord en --tt-vvh komen uit tt-app.js. */
.tt-sheet { bottom: var(--tt-toetsenbord, 0px); max-height: calc(var(--tt-vvh, 100dvh) * .92); }
.tt-sheet--zoek { min-height: min(60vh, calc(var(--tt-vvh, 100dvh) * .92)); }
.tt-sheet--zoek #zoekResultaten { padding-bottom: 8px; }
.kb-open .mobile-bottom-nav { display: none !important; }
.tt-sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--tt-line-strong); margin: 0 auto 14px; }
/* Telefoon: het blad glijdt bij sluiten naar beneden (zichtbaar tot de beweging klaar is), en
   omlaag slepen aan het streepje of bovenaan het blad sluit het (tt-app.js). Het streepje zelf
   scrolt niet en is ruimer aan te raken dan het lijkt. */
@media (max-width: 991.98px) {
  .tt-sheet { transition: transform 260ms var(--tt-ease), visibility 0s linear 260ms; }
  .tt-sheet.show { transition: transform 380ms var(--tt-spring), visibility 0s; }
  .tt-sheet__grab { position: relative; touch-action: none; }
  .tt-sheet__grab::before { content: ''; position: absolute; inset: -14px -70px -12px; }
}
@media (min-width: 992px) {
  .tt-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, 92vw); border-radius: 26px; transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform var(--tt-dur-2) var(--tt-ease), opacity var(--tt-dur-2) var(--tt-ease); padding-bottom: 22px; }
  .tt-sheet.show { transform: translate(-50%, -50%); opacity: 1; }
  .tt-sheet__grab { display: none; }
}
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.more-tile { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 18px; background: var(--tt-raise); border: 1px solid var(--tt-line); color: var(--tt-ink); text-decoration: none; font-size: 13.5px; font-weight: 700; text-align: center; }
.more-tile .ic { width: 24px; height: 24px; }
.more-tile:hover, .more-tile:active { background: var(--tt-neutral-soft); color: var(--tt-ink); }
.sheet-link { display: flex; align-items: center; gap: 14px; padding: 13px 4px; color: var(--tt-ink); text-decoration: none; font-size: 16px; font-weight: 600; border: 0; background: none; width: 100%; text-align: left; border-bottom: 1px solid var(--tt-line); }
.sheet-link .ic { width: 20px; height: 20px; color: var(--tt-muted); }
.sheet-link:last-child { border-bottom: 0; }
.sheet-link:hover { color: var(--tt-ink); }
.sheet-section { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-faint); margin: 16px 4px 4px; }

/* ---------- Bootstrap-onderdelen in de huisstijl ---------- */
.card { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); box-shadow: none; color: var(--tt-ink); }
.card > .card-header:first-child { border-radius: calc(var(--tt-r-lg) - 1px) calc(var(--tt-r-lg) - 1px) 0 0; }
.card-header { background: transparent; border-bottom: 1px solid var(--tt-line); font-weight: 800; font-size: 15px; padding: 14px 16px; color: var(--tt-ink); }
.card-footer { background: transparent; border-top: 1px solid var(--tt-line); }
.card-body { color: var(--tt-ink); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--tt-ink); --bs-table-hover-bg: var(--tt-raise); --bs-table-striped-bg: var(--tt-raise); color: var(--tt-ink); margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--tt-line); padding: .6rem .65rem; }
.table thead th { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); border-bottom: 1px solid var(--tt-line); white-space: nowrap; }
.table tbody td { vertical-align: middle; font-size: 15px; font-variant-numeric: tabular-nums; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--tt-raise); }

.nav-tabs, .nav-pills {
  border: 1px solid var(--tt-line); background: var(--tt-card); border-radius: var(--tt-r); padding: 4px; gap: 4px;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 16px !important;
}
.nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item, .nav-pills .nav-item { flex: 0 0 auto; }
.nav-tabs .nav-link, .nav-pills .nav-link {
  border: 0 !important; margin: 0 !important; border-radius: var(--tt-r-sm); color: var(--tt-muted); background: none;
  font-size: 14px; font-weight: 700; padding: 8px 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--tt-dur-1) var(--tt-ease), color var(--tt-dur-1);
}
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { color: var(--tt-ink); background: var(--tt-raise); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--tt-ink) !important; color: var(--tt-paper) !important; }
.nav-tabs .nav-link .badge, .nav-pills .nav-link .badge { background: color-mix(in srgb, currentColor 16%, transparent) !important; color: inherit !important; }

.btn { --bs-btn-font-weight: 700; border-radius: 12px; font-weight: 700; transition: transform var(--tt-dur-1) var(--tt-ease), background var(--tt-dur-1), border-color var(--tt-dur-1), color var(--tt-dur-1); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:active { transform: scale(.97); }
.btn-sm { border-radius: 10px; font-size: 13.5px; min-height: 32px; }
.btn-tt, .btn-primary { background: var(--tt-red-solid); border-color: var(--tt-red-solid); color: #fff; }
.btn-tt:hover, .btn-tt:focus, .btn-tt:active, .btn-primary:hover, .btn-primary:active { background: var(--tt-red-solid-press) !important; border-color: var(--tt-red-solid-press) !important; color: #fff !important; }
.btn-ink { background: var(--tt-ink); border-color: var(--tt-ink); color: var(--tt-paper); }
.btn-ink:hover { background: var(--tt-ink-2); border-color: var(--tt-ink-2); color: var(--tt-paper); }
.btn-outline-tt { border-color: var(--tt-red); color: var(--tt-red); }
.btn-outline-tt:hover { background: var(--tt-red-solid); border-color: var(--tt-red-solid); color: #fff; }
.btn-outline-secondary, .btn-light, .btn-soft { --bs-btn-color: var(--tt-ink); --bs-btn-border-color: var(--tt-line-strong); --bs-btn-hover-bg: var(--tt-raise); --bs-btn-hover-border-color: var(--tt-line-strong); --bs-btn-hover-color: var(--tt-ink); --bs-btn-active-bg: var(--tt-neutral-soft); --bs-btn-active-border-color: var(--tt-line-strong); --bs-btn-active-color: var(--tt-ink); background: var(--tt-card); }
.btn-outline-primary { --bs-btn-color: var(--tt-ink); --bs-btn-border-color: var(--tt-line-strong); --bs-btn-hover-bg: var(--tt-ink); --bs-btn-hover-border-color: var(--tt-ink); --bs-btn-hover-color: var(--tt-paper); }
.btn-link { color: var(--tt-ink); font-weight: 700; }

.badge { border-radius: 999px; font-weight: 700; font-size: 12px; padding: .32em .62em; letter-spacing: .01em; }
.badge.bg-secondary { background: var(--tt-neutral-soft) !important; color: var(--tt-ink-2) !important; }
.badge.bg-success { background: var(--tt-green-soft) !important; color: var(--tt-green) !important; }
.badge.bg-info { background: var(--tt-blue-soft) !important; color: var(--tt-blue) !important; }
.badge.bg-warning { background: var(--tt-amber-soft) !important; color: var(--tt-amber) !important; }
.badge.bg-primary { background: var(--tt-red-solid) !important; color: #fff !important; }
.badge.bg-light { background: var(--tt-neutral-soft) !important; color: var(--tt-ink-2) !important; }
.badge.text-dark { color: var(--tt-ink) !important; }
.badge-success { background: var(--tt-green-soft); color: var(--tt-green); }
.badge-info { background: var(--tt-blue-soft); color: var(--tt-blue); }
.badge-warning { background: var(--tt-amber-soft); color: var(--tt-amber); }
.badge-danger { background: var(--tt-red-soft); color: var(--tt-red); }
.text-success { color: var(--tt-green) !important; }
.text-warning { color: var(--tt-amber) !important; }
.text-info { color: var(--tt-blue) !important; }
.text-primary { color: var(--tt-red) !important; }
.bg-light { background-color: var(--tt-raise) !important; }

.form-control, .form-select {
  border-radius: 12px; border-color: var(--tt-line-strong); background-color: var(--tt-card); color: var(--tt-ink);
  min-height: 44px; font-size: 16px;
}
.form-control-sm, .form-select-sm { min-height: 36px; font-size: 14px; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--tt-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tt-blue) 18%, transparent); background-color: var(--tt-card); color: var(--tt-ink); }
.form-control::placeholder { color: var(--tt-faint); }
.form-label { font-weight: 700; font-size: 14px; color: var(--tt-ink-2); }
.form-check-input:checked { background-color: var(--tt-ink); border-color: var(--tt-ink); }
.form-switch .form-check-input:checked { background-color: var(--tt-green); border-color: var(--tt-green); }
.input-group-text { background: var(--tt-raise); border-color: var(--tt-line-strong); color: var(--tt-muted); border-radius: 12px; }

.alert { border-radius: var(--tt-r); border: 1px solid transparent; font-size: 15px; }
.alert-success { background: var(--tt-green-soft); color: var(--tt-ink); border-color: color-mix(in srgb, var(--tt-green) 25%, transparent); }
.alert-warning { background: var(--tt-amber-soft); color: var(--tt-ink); border-color: color-mix(in srgb, var(--tt-amber-fill) 30%, transparent); }
.alert-danger { background: var(--tt-red-soft); color: var(--tt-ink); border-color: color-mix(in srgb, var(--tt-red) 25%, transparent); }
.alert-info { background: var(--tt-blue-soft); color: var(--tt-ink); border-color: color-mix(in srgb, var(--tt-blue) 25%, transparent); }
.dropdown-menu { border-radius: var(--tt-r); border-color: var(--tt-line); box-shadow: var(--tt-shadow-lg); background: var(--tt-card); padding: 6px; }
.dropdown-item { border-radius: 10px; padding: 8px 12px; font-weight: 600; color: var(--tt-ink); }
.dropdown-item:hover { background: var(--tt-raise); color: var(--tt-ink); }
.modal-content { border-radius: var(--tt-r-xl); border: 0; background: var(--tt-card); color: var(--tt-ink); }
.list-group-item { background: var(--tt-card); border-color: var(--tt-line); color: var(--tt-ink); }
.progress { background: var(--tt-neutral-soft); border-radius: 999px; }
.pagination { --bs-pagination-color: var(--tt-ink); --bs-pagination-bg: var(--tt-card); --bs-pagination-border-color: var(--tt-line); --bs-pagination-hover-color: var(--tt-ink); --bs-pagination-hover-bg: var(--tt-raise); --bs-pagination-active-bg: var(--tt-ink); --bs-pagination-active-border-color: var(--tt-ink); --bs-pagination-active-color: var(--tt-paper); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }
.tooltip { --bs-tooltip-bg: var(--tt-ink); --bs-tooltip-color: var(--tt-paper); --bs-tooltip-font-size: 13px; }
hr { border-color: var(--tt-line); opacity: 1; }
.border-bottom, .border-top, .border { border-color: var(--tt-line) !important; }

/* ---------- oude hulpklassen ---------- */
.action-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--tt-muted); background: none; border: 0; cursor: pointer; text-decoration: none; }
.action-icon:hover { color: var(--tt-ink); background: var(--tt-raise); }
.action-icon.disabled { opacity: .3; pointer-events: none; }
.action-icon.delete-btn:hover { color: var(--tt-danger); }
.opponent-blur { filter: blur(5px); user-select: none; pointer-events: none; }
.lic-badge-a { background: #7A1F2B; color: #fff; }
.lic-badge-b { background: #9A6400; color: #fff; }
.lic-badge-c { background: #1F6F4A; color: #fff; }
.fav-row > td { background-color: color-mix(in srgb, var(--tt-blue) 7%, transparent) !important; }
.fav-row > td:nth-child(2) { font-weight: 800; }

/* ==========================================================================
   Onderdelen van de nieuwe schermen
   ========================================================================== */

/* koppen op een pagina */
.tt-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 14px; }
.tt-h1 { font-family: var(--tt-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0; }
.tt-sub { font-size: 14px; color: var(--tt-muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.tt-sec { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-muted); margin: 20px 2px 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tt-sec small { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; }
/* "nu bezig" met de live-stip: de stip vóór de tekst, niet eroverheen (17-10) */
.tt-sec small:has(> .tt-live) { display: inline-flex; align-items: center; gap: 7px; align-self: center; }

/* segmenten (vaste tabbladen bovenaan een pagina) */
.tt-segs { display: flex; gap: 4px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r); padding: 4px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.tt-segs::-webkit-scrollbar { display: none; }
.tt-segs a, .tt-segs button { flex: 1 0 auto; text-align: center; font-size: 14px; font-weight: 700; color: var(--tt-muted); padding: 9px 12px; border-radius: var(--tt-r-sm); text-decoration: none; white-space: nowrap; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tt-segs a:hover, .tt-segs button:hover { color: var(--tt-ink); background: var(--tt-raise); }
.tt-segs a.on, .tt-segs button.on, .tt-segs [aria-current="page"] { background: var(--tt-ink); color: var(--tt-paper); }
.tt-segs .count { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 15%, transparent); }

/* filterchips (categorieën, datums) */
.tt-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 2px 16px; }
.tt-chips::-webkit-scrollbar { display: none; }
.tt-chip { flex: 0 0 auto; font-size: 14px; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: var(--tt-card); border: 1px solid var(--tt-line); color: var(--tt-ink-2); text-decoration: none; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tt-chip:hover { color: var(--tt-ink); border-color: var(--tt-line-strong); }
.tt-chip.on, .tt-chip[aria-pressed="true"] { background: var(--tt-ink); border-color: var(--tt-ink); color: var(--tt-paper); }

/* statuslabels */
.tt-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--tt-neutral-soft); color: var(--tt-ink-2); white-space: nowrap; line-height: 1.2; }
.tt-pill .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.tt-pill.blue { background: var(--tt-blue-soft); color: var(--tt-blue); }
.tt-pill.green { background: var(--tt-green-soft); color: var(--tt-green); }
.tt-pill.amber { background: var(--tt-amber-soft); color: var(--tt-amber); }
.tt-pill.red { background: var(--tt-red-soft); color: var(--tt-red); }
.tt-pill.solid-blue { background: var(--tt-blue-solid); color: #fff; }
.tt-live { width: 8px; height: 8px; border-radius: 50%; background: var(--tt-blue); flex: 0 0 auto; display: inline-block; animation: tt-puls 2s infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--tt-blue) 55%, transparent); }
@keyframes tt-puls { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* winst / verlies */
.tt-wl { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; flex: 0 0 auto; }
.tt-wl.w { background: var(--tt-green-soft); color: var(--tt-green); }
.tt-wl.v { background: var(--tt-neutral-soft); color: var(--tt-muted); }
.tt-wl.wo { background: none; border: 1.5px dashed var(--tt-line-strong); color: var(--tt-muted); font-size: 10.5px; }
.tt-wl.now { background: var(--tt-blue-solid); color: #fff; font-size: 12px; letter-spacing: .02em; }
.tt-wl.next { background: var(--tt-amber-soft); color: var(--tt-amber); font-size: 12px; }
.tt-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.tt-delta.up { color: var(--tt-green); }
.tt-delta.dn { color: var(--tt-muted); }

/* bolletjes per partij in een poule */
.tt-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.tt-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--tt-line); display: block; }
.tt-dots i.w { background: var(--tt-green); }
.tt-dots i.v { background: var(--tt-red); }
.tt-dots i.o { background: none; box-shadow: inset 0 0 0 1.5px var(--tt-line-strong); }
.tt-dots i.now { background: var(--tt-blue); animation: tt-puls 2s infinite; }
/* Walk-over: een streepje, geen winst of verlies (17-10) */
.tt-dots i.wo { height: 3px; border-radius: 2px; background: var(--tt-muted); align-self: center; }
/* Dubbel: twee rondjes in elkaar, als een liggende 8 (competitie, 17-10) */
.tt-dots i.dbl { position: relative; margin-right: 7px; }
.tt-dots i.dbl::after { content: ""; position: absolute; left: 7px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: inherit; box-shadow: -1.5px 0 0 1px var(--tt-card); }
.tt-dots i.o.dbl::after { background: var(--tt-card); box-shadow: inset 0 0 0 1.5px var(--tt-line-strong); }
/* De dag in één oogopslag op het bord van Iedereen: bolletjes per partij, de stand en de rating van de dag */
.tt-dagstand { display: inline-flex; align-items: center; gap: 6px; vertical-align: -1px; }
.tt-dagstand b { font-size: 13px; font-weight: 800; color: var(--tt-ink-2); font-variant-numeric: tabular-nums; }
.tt-dagstand .tt-delta { font-size: 13px; }
.tt-dagstand .tt-delta::before { content: '·'; margin-right: 6px; color: var(--tt-muted); font-weight: 700; }
/* De plek in de poule erachter alleen als die er heel op past; anders valt hij weg naar een
   afgesneden tweede regel (geen "6e va…") */
.tt-row .mid > span.tt-row__dag { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 12px; height: 1.5em; margin-top: 4px; }
.tt-row__plek::before { content: '·'; margin-right: 6px; }

/* kaart-rijen */
.tt-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: 18px; margin-bottom: 8px; color: var(--tt-ink); text-decoration: none; }
a.tt-row:hover { border-color: var(--tt-line-strong); color: var(--tt-ink); }
.tt-row .mid { flex: 1; min-width: 0; }
.tt-row .mid > b { display: block; font-size: 16px; line-height: 1.25; }
.tt-row .mid > span { display: block; font-size: 13.5px; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-row .end { text-align: right; font-size: 13px; color: var(--tt-muted); flex: 0 0 auto; }
.tt-row .end b { display: block; font-family: var(--tt-display); font-size: 20px; color: var(--tt-ink); letter-spacing: -.02em; line-height: 1.1; }
.tt-av { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; flex: 0 0 auto; background: var(--tt-ink-2); }

/* Deelnemerslijst */
.tt-plist { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 0 14px; margin-bottom: 12px; }
.tt-prow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--tt-line); }
.tt-prow:first-child { border-top: 0; }
.tt-prow .tt-av { width: 36px; height: 36px; font-size: 13px; }
.tt-prow .mid { flex: 1; min-width: 0; }
.tt-prow .mid a, .tt-prow .mid b { display: block; font-size: 15.5px; font-weight: 700; color: var(--tt-ink); text-decoration: none; line-height: 1.3; }
.tt-prow .mid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-prow .mid span { display: block; font-size: 13px; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-prow .end { text-align: right; font-size: 12px; color: var(--tt-muted); flex: 0 0 auto; }
.tt-prow .end b { display: block; font-family: var(--tt-display); font-size: 18px; color: var(--tt-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tt-prow .tt-iconbtn { flex: 0 0 auto; margin-right: -8px; }
.tt-prow .end b.tt-delta.up { color: var(--tt-green); }
.tt-prow .end b.tt-delta.dn { color: var(--tt-muted); }
.tt-prow.is-extra { display: none; }
.tt-plist.alles .tt-prow.is-extra { display: flex; }
.tt-plist__meer { display: flex; width: calc(100% + 28px); margin: 0 -14px; min-height: 44px; align-items: center; justify-content: center; gap: 4px; border: 0; border-top: 1px solid var(--tt-line); background: none; color: var(--tt-ink-2); font-size: 14px; font-weight: 700; border-radius: 0 0 var(--tt-r-lg) var(--tt-r-lg); }
.tt-plist.alles .tt-plist__meer { display: none; }

/* wedstrijdregel: één vorm voor elke partij */
.tt-match { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tt-line); }
.tt-match:last-child { border-bottom: 0; }
.tt-match.is-now { background: color-mix(in srgb, var(--tt-blue) 6%, transparent); box-shadow: inset 3px 0 0 var(--tt-blue); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.tt-match.is-highlight { animation: tt-oplichten 2.4s var(--tt-ease) 1; }
@keyframes tt-oplichten { 0%, 30% { background: color-mix(in srgb, var(--tt-amber-fill) 22%, transparent); } 100% { background: transparent; } }
.tt-match__who { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.tt-match__who .tegen { color: var(--tt-muted); font-weight: 500; }
.tt-match__who a, .tt-match__who .naam { color: var(--tt-ink); font-weight: 700; text-decoration: none; }
.tt-match__who a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-match__meta { font-size: 13.5px; color: var(--tt-muted); margin-top: 2px; line-height: 1.45; }
.tt-match__meta b { color: var(--tt-ink-2); font-weight: 700; }
.tt-match__score { text-align: right; font-variant-numeric: tabular-nums; }
.tt-match__score b { display: block; font-family: var(--tt-display); font-size: 22px; letter-spacing: -.02em; line-height: 1.05; }
.tt-match__score b.wo { font-family: var(--tt-font); font-size: 14px; font-weight: 700; color: var(--tt-muted); letter-spacing: 0; }
.tt-match__score span { display: block; font-size: 12.5px; color: var(--tt-muted); white-space: nowrap; }
.tt-match__inzet { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tt-match__inzet .tt-delta { font-size: 13px; }
.tt-match__games { display: none; font-size: 13px; color: var(--tt-faint); font-variant-numeric: tabular-nums; white-space: pre; margin-top: 2px; letter-spacing: .01em; }
@media (max-width: 575.98px) {
  .tt-match__games { display: block; }
  .tt-match__score span.games { display: none; }
}
.tt-match__time { font-family: var(--tt-display); font-weight: 800; font-size: 17px; text-align: right; }
.tt-tafel { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--tt-blue); }

/* Partij tussen twee spelers of koppels (toernooi- en poulelijsten) */
.tt-duels { padding: 0 16px; }
.tt-duels__kop { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); padding: 12px 0 2px; }
.tt-duel { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--tt-line); }
.tt-duels > .tt-duel:first-child, .tt-duels__kop + .tt-duel { border-top: 0; }
.tt-duel.is-now { background: color-mix(in srgb, var(--tt-blue) 6%, transparent); box-shadow: inset 3px 0 0 var(--tt-blue); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.tt-duel__mark { font-family: var(--tt-display); font-weight: 800; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.tt-duel__mark .voorbij { color: var(--tt-faint); }
.tt-duel__mark .tt-wl { width: 34px; height: 24px; border-radius: 7px; }
.tt-duel__p { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; line-height: 22px; }
.tt-duel__p .wie { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tt-duel__p .naam { color: var(--tt-ink); font-weight: 600; text-decoration: none; }
.tt-duel__p a.naam:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-duel__p.win .naam { font-weight: 800; }
.tt-duel__p.lose .naam { color: var(--tt-ink-2); font-weight: 500; }
.tt-duel__p small { font-size: 12.5px; color: var(--tt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 4px; }
.tt-duel__p small .up { color: var(--tt-green); font-weight: 700; }
.tt-duel__p .tt-delta { font-size: 12.5px; margin-left: 4px; }
.tt-duel__p .fav { width: 12px; height: 12px; color: var(--tt-red); margin-left: 3px; vertical-align: -1px; }
.tt-duel__p .sets { font-family: var(--tt-display); font-size: 19px; font-weight: 800; color: var(--tt-faint); min-width: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.tt-duel__p.win .sets { color: var(--tt-ink); }
.tt-duel .tt-match__meta { margin-top: 3px; }
.tt-duel .tt-match__meta .games { white-space: pre; font-variant-numeric: tabular-nums; }

/* poulekaart: overal dezelfde kolommen */
.tt-pool { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); overflow: hidden; margin-bottom: 12px; }
.tt-pool__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.tt-pool__head .t { flex: 1; min-width: 0; }
.tt-pool__head .t b { display: block; font-size: 16px; line-height: 1.25; }
.tt-pool__head .t span { font-size: 13px; color: var(--tt-muted); }
.tt-pool__head a { color: var(--tt-ink); text-decoration: none; }
.tt-ring { width: 40px; height: 40px; flex: 0 0 auto; }
.tt-pool table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tt-pool th { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); text-align: left; padding: 4px 8px 6px; white-space: nowrap; }
.tt-pool td { padding: 9px 8px; border-top: 1px solid var(--tt-line); vertical-align: middle; }
.tt-pool td:first-child, .tt-pool th:first-child { padding-left: 16px; width: 30px; color: var(--tt-muted); font-weight: 700; }
.tt-pool td.r, .tt-pool th.r { text-align: right; padding-right: 16px; white-space: nowrap; }
.tt-pool td.c, .tt-pool th.c { text-align: center; }
.tt-pool td .naam { color: var(--tt-ink); text-decoration: none; font-weight: 600; }
.tt-pool td .naam:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-pool td .tt-pool__rating { font-size: 12.5px; font-weight: 500; color: var(--tt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 5px; }
.tt-pool tr.me td { background: color-mix(in srgb, var(--tt-blue) 7%, transparent); }
.tt-pool tr.me td .naam { font-weight: 800; }
.tt-pool tr.cut td { border-bottom: 2px dashed color-mix(in srgb, var(--tt-green) 55%, transparent); }
.tt-pool .wide { display: none; }
@media (min-width: 768px) { .tt-pool .wide { display: table-cell; } }
.tt-tag { font-size: 12px; font-weight: 800; border-radius: 6px; padding: 2px 6px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.tt-tag.now { background: var(--tt-blue-solid); color: #fff; }
.tt-tag.nog { background: var(--tt-neutral-soft); color: var(--tt-muted); }
.tt-tag.fav { background: var(--tt-red-soft); color: var(--tt-red); }
.tt-pool__foot { font-size: 12.5px; font-weight: 700; color: var(--tt-green); padding: 6px 16px 10px; display: flex; gap: 6px; align-items: center; }
.tt-pool__foot .ic { width: 13px; height: 13px; }
details.tt-pool > summary { list-style: none; cursor: pointer; }
.tt-pool__meer { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 4px; border: 0; border-top: 1px solid var(--tt-line); background: none; color: var(--tt-ink-2); font-size: 14px; font-weight: 700; }
.tt-pool__meer:hover { color: var(--tt-ink); background: var(--tt-raise); }
.tt-pool__meer .ic { width: 16px; height: 16px; }
.pool-matches-container { border-top: 1px solid var(--tt-line); }
details.tt-pool > summary::-webkit-details-marker { display: none; }
details.tt-pool > summary .chev { transition: transform var(--tt-dur-2) var(--tt-ease); color: var(--tt-muted); }
details.tt-pool[open] > summary .chev { transform: rotate(180deg); }

/* ticket: wie speelt nu, met groot tafelnummer */
.tt-ticket { background: var(--tt-card); border-radius: 24px; border: 1px solid var(--tt-line); overflow: hidden; margin-bottom: 12px; position: relative; }
.tt-tickets { display: grid; gap: 12px; margin-bottom: 12px; }
.tt-tickets > .tt-ticket { margin: 0; }
@media (min-width: 992px) { .tt-tickets { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); } }
.tt-ticket__top { padding: 16px 18px 12px; display: flex; justify-content: space-between; gap: 14px; }
.tt-ticket__state { font-size: 12.5px; font-weight: 800; color: var(--tt-blue); display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .07em; }
.tt-ticket__state.next { color: var(--tt-amber); }
.tt-ticket__state.done { color: var(--tt-muted); }
.tt-ticket__name { font-family: var(--tt-display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; line-height: 1.05; margin-top: 4px; color: var(--tt-ink); text-decoration: none; display: block; }
.tt-ticket__vs { font-size: 15px; color: var(--tt-ink-2); margin-top: 4px; }
.tt-ticket__vs a { color: var(--tt-ink); font-weight: 700; text-decoration: none; }
.tt-ticket__tbl { text-align: center; background: var(--tt-blue-solid); color: #fff; border-radius: 18px; padding: 8px 12px 10px; min-width: 88px; align-self: flex-start; }
.tt-ticket__tbl.next { background: var(--tt-amber-soft); color: var(--tt-amber); }
.tt-ticket__tbl small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.tt-ticket__tbl b { display: block; font-family: var(--tt-display); font-size: 44px; line-height: .95; font-weight: 800; letter-spacing: -.03em; }
.tt-ticket__perf { display: flex; gap: 6px; padding: 0 18px 14px; flex-wrap: wrap; }
.tt-ticket__actions { display: flex; border-top: 1px dashed var(--tt-line-strong); }
.tt-ticket__actions > * { flex: 1; text-align: center; padding: 13px 6px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--tt-ink); text-decoration: none; border: 0; background: none; }
.tt-ticket__actions > * + * { border-left: 1px dashed var(--tt-line-strong); }
.tt-ticket__actions > *:hover { background: var(--tt-raise); color: var(--tt-ink); }
.tt-ticket::before, .tt-ticket::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--tt-paper); bottom: 38px; border: 1px solid var(--tt-line); }
.tt-ticket::before { left: -10px; } .tt-ticket::after { right: -10px; }
.tt-ticket.no-actions::before, .tt-ticket.no-actions::after { display: none; }
/* In het paneel van een speler: de naam staat in de kop erboven, de tegenstander is de hoofdregel */
.tt-ticket__vs--hoofd { font-size: 18px; line-height: 1.3; margin-top: 6px; }

/* Kop van het spelerpaneel op Vandaag: wie, en hoe de dag tot nu toe gaat; daaronder de volgende partij */
.tt-spelerkop__wie { display: flex; align-items: center; gap: 12px; }
.tt-spelerkop__wie .tt-av { width: 48px; height: 48px; font-size: 16px; }
.tt-spelerkop__naam { display: block; font-family: var(--tt-display); font-weight: 800; font-size: 24px; letter-spacing: -.03em; line-height: 1.1; color: var(--tt-ink); text-decoration: none; }
.tt-spelerkop__naam:hover { color: var(--tt-ink); }
.tt-spelerkop__sub { font-size: 14px; color: var(--tt-muted); margin-top: 3px; }
.tt-spelerkop__dag { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--tt-muted); }
.tt-spelerkop .tt-stats { margin-top: 12px; }

/* spelerknoppen bovenaan de toernooidag */
.tt-switch { position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); z-index: 1010; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -28px 14px; padding: 8px 28px 6px; background: color-mix(in srgb, var(--tt-paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); scroll-snap-type: x proximity; }
.tt-switch::-webkit-scrollbar { display: none; }
.tt-pchip { display: grid; justify-items: center; gap: 5px; flex: 0 0 auto; width: 64px; border: 0; background: none; padding: 0; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.tt-pchip .ring { width: 56px; height: 56px; border-radius: 50%; padding: 3px; background: var(--tt-line); position: relative; transition: transform var(--tt-dur-1) var(--tt-ease); }
.tt-pchip:active .ring { transform: scale(.94); }
.tt-pchip .ring > b { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 800; border: 2.5px solid var(--tt-paper); }
.tt-pchip.now .ring { background: var(--tt-blue); }
.tt-pchip.next .ring { background: var(--tt-amber-fill); }
.tt-pchip[aria-pressed="true"] .ring { box-shadow: 0 0 0 2px var(--tt-paper), 0 0 0 4px var(--tt-ink); }
.tt-pchip .lbl { font-size: 13px; color: var(--tt-muted); font-weight: 700; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-pchip[aria-pressed="true"] .lbl { color: var(--tt-ink); font-weight: 800; }
.tt-pchip .tbl { position: absolute; right: -6px; bottom: -3px; background: var(--tt-blue-solid); color: #fff; font-size: 12px; font-weight: 800; border-radius: 7px; padding: 1px 5px; border: 2px solid var(--tt-paper); }
.tt-pchip .ok { position: absolute; right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 50%; background: var(--tt-ink); color: var(--tt-paper); display: grid; place-items: center; border: 2px solid var(--tt-paper); }
.tt-pchip .ok .ic { width: 11px; height: 11px; stroke-width: 3; }
.tt-pchip.all .ring > b { background: var(--tt-card); color: var(--tt-ink); border-color: var(--tt-card); }

/* tegels met een getal */
.tt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tt-stat { background: var(--tt-raise); border: 1px solid var(--tt-line); border-radius: 16px; padding: 11px 13px; min-width: 0; }
.tt-stat small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); }
.tt-stat b { display: block; font-family: var(--tt-display); font-size: 24px; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tt-stat span { font-size: 13px; color: var(--tt-muted); }
.tt-form { display: inline-flex; gap: 4px; }
.tt-form i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; }
.tt-form i.w { background: var(--tt-green-soft); color: var(--tt-green); }
.tt-form i.v { background: var(--tt-neutral-soft); color: var(--tt-muted); }

.tt-card { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 14px 16px; margin-bottom: 12px; }
.tt-card--flush { padding: 4px 16px; }
.tt-empty { text-align: center; padding: 34px 18px; color: var(--tt-muted); background: var(--tt-card); border: 1px dashed var(--tt-line-strong); border-radius: var(--tt-r-lg); }
.tt-empty b { display: block; color: var(--tt-ink); font-family: var(--tt-display); font-size: 20px; letter-spacing: -.02em; margin-bottom: 4px; }
.tt-empty .ic { width: 32px; height: 32px; color: var(--tt-faint); margin-bottom: 8px; }

/* spelerkaart (blad) */
.tt-pcard__head { display: flex; gap: 14px; align-items: center; }
.tt-pcard__head .tt-av { width: 58px; height: 58px; font-family: var(--tt-display); font-size: 22px; }
.tt-pcard__head h3 { margin: 0; font-size: 24px; letter-spacing: -.03em; line-height: 1.05; }
.tt-pcard__head p { margin: 3px 0 0; font-size: 14px; color: var(--tt-muted); }
.tt-pcard__row { display: flex; align-items: center; gap: 12px; background: var(--tt-raise); border: 1px solid var(--tt-line); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; font-size: 14.5px; color: var(--tt-ink-2); }
.tt-pcard__row b.sc { font-family: var(--tt-display); font-size: 24px; letter-spacing: -.02em; color: var(--tt-ink); margin-left: auto; white-space: nowrap; flex: 0 0 auto; }
.tt-pcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tt-spark { width: 100%; height: 34px; display: block; margin-top: 4px; }

/* zoeken */
.tt-search-input { display: flex; gap: 10px; align-items: center; background: var(--tt-raise); border: 1px solid var(--tt-line-strong); border-radius: 14px; padding: 0 14px; }
.tt-search-input input { flex: 1; border: 0; background: none; font-size: 17px; padding: 12px 0; color: var(--tt-ink); outline: none; min-width: 0; }
.tt-search-input .ic { color: var(--tt-muted); width: 20px; height: 20px; }

/* uitleg bij een tik (in plaats van tooltips die op een telefoon niet werken) */
.tt-uitleg { border: 0; background: none; padding: 0 2px; color: var(--tt-faint); cursor: pointer; vertical-align: 1px; }
.tt-uitleg .ic { width: 15px; height: 15px; }
.tt-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 1100; background: var(--tt-ink); color: var(--tt-paper); padding: 12px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; max-width: min(92vw, 420px); box-shadow: var(--tt-shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--tt-dur-2) var(--tt-ease), transform var(--tt-dur-2) var(--tt-ease); }
.tt-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 992px) { .tt-toast { bottom: 28px; } }

/* laden: de bal stuitert over het tafeltje */
/* Laden en verversen: de bal stuit om en om op de linker- en de rechterhelft en gaat elke keer in een
   boog ruim over het net. Bij het stuiten ligt hij óp het blad, nooit erin. Maten bij 64 px breed
   (0,533 px per monogram-eenheid): blad op 32,5 px, bovenkant net op 24,5 px, net in het midden. */
.tt-loader { width: 64px; height: 56px; position: relative; color: var(--tt-ink); margin: 0 auto; }
.tt-loader svg { position: absolute; left: 0; bottom: 0; width: 64px; height: 44.8px; fill: currentColor; --ball: transparent; }
.tt-loader i { position: absolute; left: 9.9px; top: 24.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--tt-red); transform-origin: 50% 100%;
  animation: tt-rally-x 1.1s linear infinite, tt-rally-y .55s infinite, tt-rally-stuit .55s infinite; }
@keyframes tt-rally-x { 0%, 100% { translate: 0 0; } 50% { translate: 36.3px 0; } }
/* omhoog afremmend, omlaag versnellend: een echte worp */
@keyframes tt-rally-y {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  50% { transform: translateY(-17px); animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  100% { transform: translateY(0); }
}
@keyframes tt-rally-stuit { 0%, 100% { scale: 1.3 .72; } 10%, 90% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .tt-loader i { animation: none; translate: 32px 0; transform: translateY(-9.3px); } }
.tt-skel { background: linear-gradient(90deg, var(--tt-neutral-soft) 25%, var(--tt-raise) 50%, var(--tt-neutral-soft) 75%); background-size: 200% 100%; animation: tt-skel 1.4s infinite; border-radius: 10px; }
@keyframes tt-skel { to { background-position: -200% 0; } }

/* winstmoment en medaille */
.tt-pop { animation: tt-pop .5s var(--tt-spring) 1; }
@keyframes tt-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.tt-dagsom { padding-bottom: 12px; }
.tt-dagsom__kop { font-family: var(--tt-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.tt-dagsom__medailles { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.tt-dagsom__medailles > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.tt-dagsom__medailles .tt-medal { width: 30px; height: 30px; margin: 0; box-shadow: none; }
.tt-dagsom__medailles .tt-medal .ic { width: 16px; height: 16px; }
.tt-medal { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.tt-medal .ic { width: 40px; height: 40px; }
.tt-medal.goud { background: linear-gradient(145deg, #F2D27A, #B9851A); }
.tt-medal.zilver { background: linear-gradient(145deg, #E3E7EC, #8D97A3); }
.tt-medal.brons { background: linear-gradient(145deg, #E9B07C, #9C5B23); }
.tt-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1200; }

/* ---------- telefoon ---------- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }
  .top-header { padding-left: 16px; padding-right: 12px; }
  .top-header .header-mono { display: inline-flex; }
  /* Een subpagina met een terugknop: geen logo ervoor, zoals op iOS */
  .top-header:has(.tt-back) .header-mono { display: none; }
  .main-content { padding: 14px 16px calc(110px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bottom-nav { display: block; }
  .tt-switch { margin: 0 -16px 14px; padding: 8px 16px 6px; }
  .tt-h1 { font-size: 30px; }
  .is-toplevel .top-header .header-mono { display: none; }
  .is-toplevel .top-header .header-lockup { display: inline-flex; }
}
@media (min-width: 992px) {
  .header-desktop-hide { display: none !important; }
}

/* Laden: een stuiterend balletje in plaats van een draaiend rondje (voorstel 7) */
.spinner-border, .spinner-grow { width: .62em; height: .62em; border: 0 !important; border-radius: 50%; background: var(--tt-red); vertical-align: .05em;
  animation: tt-stuiter .5s cubic-bezier(.33, 0, .66, 1) infinite alternate !important; }
.spinner-border-sm, .spinner-grow-sm { width: .55em; height: .55em; }
@keyframes tt-stuiter { from { transform: translateY(-.4em); } to { transform: translateY(.12em) scale(1.12, .88); } }

/* ---------- beweging ---------- */
/* Geen overgangsanimatie tussen pagina's: die liet elke klik trager aanvoelen */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- toernooipagina ---------- */
.tt-back { display: inline-flex; align-items: center; gap: 2px; color: var(--tt-red); font-weight: 700; font-size: 16px; text-decoration: none; margin-left: -6px; }
.tt-back:hover, .top-header .page-title > a.tt-back { color: var(--tt-red); }
.top-header .page-title > a.tt-back { font-family: var(--tt-font); font-size: 17px; font-weight: 600; letter-spacing: 0; gap: 0; }
.tt-back .ic { width: 22px; height: 22px; }
.tt-meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tt-meta-pills a.tt-pill { text-decoration: none; }
.tt-meta-pills a.tt-pill:hover, .tt-meta-pills button.tt-pill:hover { color: var(--tt-ink); background: var(--tt-raise); }
.tt-segs.sm { display: inline-flex; margin: 0; padding: 3px; }
.tt-segs.sm a, .tt-segs.sm button { flex: 0 0 auto; padding: 6px 12px; font-size: 13.5px; }
.tt-acc > .tt-pool__head { width: 100%; border: 0; background: none; text-align: left; color: inherit; padding-bottom: 14px; }
.tt-acc > .tt-pool__head .chev { color: var(--tt-muted); transition: transform var(--tt-dur-2) var(--tt-ease); }
.tt-acc.open > .tt-pool__head .chev { transform: rotate(180deg); }
.tt-acc > [data-groep-inhoud] { border-top: 1px solid var(--tt-line); }
.tt-podia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 6px; }
.tt-podium { margin: 0; }
.tt-podium .kop { display: block; font-size: 15px; margin-bottom: 4px; }
.tt-podium__rij { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--tt-line); }
.tt-podium .kop + .tt-podium__rij { border-top: 0; }
.tt-podium__rij .tt-medal { width: 28px; height: 28px; box-shadow: none; margin: 0; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.tt-podium__rij a, .tt-podium__rij .n { display: block; color: var(--tt-ink); font-weight: 700; text-decoration: none; font-size: 15px; line-height: 1.35; }
.tt-podium__rij a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-plist__kop { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); padding: 12px 0 4px; }
.tt-plist__kop + .tt-prow { border-top: 0; }
.tt-prow .plek { width: 22px; text-align: center; font-weight: 800; color: var(--tt-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* ========== spelers (profiel, ranglijsten, onderling) ========== */
/* ==========================================================================
   Spelerspagina's (revamp, voorstel 6 en 12): profiel, toernooispeler,
   ranglijsten, Onderling, je spelers en clubs. Alleen tokens uit tt.css.
   ========================================================================== */

/* ---------- naamlink (partials/player-link) ---------- */
.tt-naam { color: var(--tt-ink); font-weight: 600; text-decoration: none; }
a.tt-naam:hover { color: var(--tt-ink); text-decoration: underline; text-underline-offset: 3px; }
.tt-naam.is-winst { font-weight: 800; }
.tt-naam__fav { width: 12px; height: 12px; color: var(--tt-red); margin-left: 3px; vertical-align: -1px; }
.tt-naam__meta { font-size: 12.5px; color: var(--tt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 4px; }
.tt-naam + .tt-delta, .tt-naam__meta + .tt-delta { font-size: 12.5px; margin-left: 4px; }

/* ---------- kenmerken als pillen (partials/player-badges) ---------- */
.tt-kenmerken { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.tt-pill.lic { color: #fff; text-decoration: none; }
.tt-pill.lic-a { background: #7A1F2B; }
.tt-pill.lic-b { background: #9A6400; }
.tt-pill.lic-c { background: #1F6F4A; }
a.tt-pill.lic:hover { color: #fff; filter: brightness(1.08); }

/* ---------- profielkop ---------- */
.tt-profiel { display: flex; gap: 14px; align-items: center; margin: 2px 0 14px; }
.tt-profiel .tt-av { width: 64px; height: 64px; font-family: var(--tt-display); font-size: 24px; }
.tt-profiel__naam { min-width: 0; flex: 1; }
.tt-profiel__naam .tt-h1 { font-size: 28px; text-wrap: balance; }
.tt-profiel__naam p { margin: 4px 0 0; font-size: 14.5px; color: var(--tt-muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.tt-volg { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 0 16px; font-weight: 700; font-size: 14.5px; }
.tt-volg .ic { width: 17px; height: 17px; }
.tt-volg.is-fav { background: var(--tt-card); color: var(--tt-ink); border: 1px solid var(--tt-line-strong); }
.tt-volg.is-fav .ic { color: var(--tt-red); }
@media (max-width: 575.98px) {
  .tt-profiel { align-items: flex-start; }
  .tt-profiel .tt-av { width: 56px; height: 56px; font-size: 21px; }
  .tt-profiel__naam .tt-h1 { font-size: 26px; }
  /* Op de telefoon alleen het hartje; de tekst blijft voor schermlezers */
  .tt-volg { width: 44px; padding: 0; justify-content: center; position: relative; }
  .tt-volg [data-fav-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.tt-kerncijfers { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin-bottom: 12px; }
.tt-kerncijfers .tt-stat b { font-size: 30px; }
.tt-kerncijfers .tt-stat .tt-delta { font-size: 13px; }
.tt-kerncijfers summary { list-style: none; cursor: pointer; }
.tt-kerncijfers summary::-webkit-details-marker { display: none; }
.tt-kerncijfers summary .ic { width: 15px; height: 15px; color: var(--tt-faint); vertical-align: -2px; transition: transform var(--tt-dur-2) var(--tt-ease); }
.tt-kerncijfers details[open] summary .ic { transform: rotate(180deg); }
.tt-jaren { width: 100%; margin-top: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; border-collapse: collapse; }
.tt-jaren td { padding: 4px 0; border-top: 1px solid var(--tt-line); color: var(--tt-ink-2); }
.tt-jaren td:first-child { color: var(--tt-muted); font-weight: 700; width: 72px; }
/* Per seizoen (VJ/NJ): een tik opent de partijen van dat seizoen */
.tt-jaren__seizoen { color: var(--tt-ink); text-decoration: underline; text-decoration-color: var(--tt-line-strong); text-underline-offset: 3px; }
.tt-jaren__seizoen:hover { text-decoration-color: currentColor; }
.tt-seizoen .tt-pool__head { scroll-margin-top: 84px; }
/* Spelerspagina: de rating van nu, als de NTTB een toernooi nog niet verwerkte */
.tt-kerncijfers .tt-nunog { display: block; font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-kerncijfers .tt-nunog b { display: inline; font-size: inherit; font-family: inherit; color: var(--tt-ink); }
.tt-jaren td.r { text-align: right; }
.tt-jaren .comp { display: block; font-size: 12px; color: var(--tt-muted); }

.tt-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tt-links a.tt-pill { text-decoration: none; min-height: 34px; padding: 6px 12px; }
.tt-links a.tt-pill:hover { color: var(--tt-ink); background: var(--tt-raise); }

/* ---------- ratinggrafiek ---------- */
.tt-grafiek { position: relative; height: 190px; }
.tt-grafiek canvas { width: 100%; height: 100%; display: block; }
.tt-grafiek__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tt-grafiek__kop b { font-size: 15px; }
.tt-grafiek__kop span { font-size: 13px; color: var(--tt-muted); }

/* ---------- seizoenen en dagen ---------- */
.tt-seizoen > .tt-pool__head .tt-delta { font-size: 15px; flex: 0 0 auto; }
.tt-seizoen__inhoud { padding: 0 16px 4px; border-top: 1px solid var(--tt-line); }
.tt-dag { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); padding: 14px 0 2px; }
.tt-dag .tt-delta { font-size: 13px; letter-spacing: 0; text-transform: none; }
.tt-dag small { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tt-muted); }
.tt-dag + .tt-match { padding-top: 8px; }
.tt-dag__toernooi { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tt-ink); text-decoration: none; }
.tt-dag__toernooi:hover { color: var(--tt-ink); text-decoration: underline; text-underline-offset: 3px; }
.tt-lijst { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 0 16px 4px; margin-bottom: 12px; }
.tt-lijst > .tt-match:first-child { padding-top: 12px; }
.tt-laden { text-align: center; color: var(--tt-muted); font-size: 14px; padding: 18px 0; }

/* Partij zonder uitslag (walk-over): "w.o." in plaats van 0–0 */

/* Wat er te winnen valt, onder een partij die nog moet komen */
.tt-match:has(+ .tt-inzet) { border-bottom: 0; padding-bottom: 4px; }
.tt-inzet { margin: 0 0 0 44px; padding: 0 0 12px; border-bottom: 1px solid var(--tt-line); font-size: 13.5px; color: var(--tt-muted); }
.tt-inzet b { color: var(--tt-green); font-weight: 800; }
.tt-lijst > .tt-inzet:last-child { border-bottom: 0; }

/* ---------- je spelers (players/index) ---------- */
.tt-zoek { position: relative; margin-bottom: 14px; }
.tt-zoek .tt-search-input { background: var(--tt-card); }
.tt-zoek__res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1040; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); box-shadow: var(--tt-shadow-lg); max-height: 60vh; overflow-y: auto; padding: 4px 12px; }
.tt-zoek__res[hidden] { display: none; }
.tt-zoek__leeg { padding: 14px 4px; color: var(--tt-muted); font-size: 14px; }
.tt-spelers .tt-row { padding: 10px 8px 10px 14px; }
.tt-spelers .tt-row .end { min-width: 54px; }
.tt-spelers .tt-row .end small { display: block; font-size: 12px; font-weight: 700; }
.tt-spelers .tt-iconbtn, .tt-zoek__res .tt-iconbtn { flex: 0 0 auto; width: 44px; height: 44px; }
.tt-rij-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.tt-rij-link:hover { color: inherit; }
.tt-rij-link .mid b { display: block; font-size: 16px; line-height: 1.25; }
.tt-rij-link .mid > span { display: block; font-size: 13.5px; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- toevoegen (players/search) ---------- */
.tt-toevoegen { max-width: 640px; }
.tt-toevoegen label { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); margin-bottom: 6px; display: block; }
.tt-gevonden { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 15px; margin: 12px 0; }
.tt-gevonden dt { color: var(--tt-muted); font-weight: 600; }
.tt-gevonden dd { margin: 0; font-weight: 700; }

/* ---------- ranglijsten ---------- */
.tt-filter { display: grid; gap: 4px; margin-bottom: 4px; }
.tt-filter .tt-chips { margin-bottom: 6px; }
.tt-chip.lic-a.on { background: #7A1F2B; border-color: #7A1F2B; color: #fff; }
.tt-chip.lic-b.on { background: #9A6400; border-color: #9A6400; color: #fff; }
.tt-chip.lic-c.on { background: #1F6F4A; border-color: #1F6F4A; color: #fff; }
.tt-chip .ic { width: 15px; height: 15px; }
.tt-samenstellen { margin: 4px 0 12px; }
.tt-samenstellen .form-check { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding-left: 0; }
.tt-samenstellen .form-check-input { margin: 0; float: none; }
.tt-samenstellen .form-check-label { font-size: 14px; }
.tt-rang .tt-prow { padding: 8px 0; }
.tt-rang .tt-prow .plek { width: 34px; font-size: 15px; }
.tt-rang .tt-prow .plek small { display: block; font-size: 12px; font-weight: 800; line-height: 1; }
.tt-rang .tt-prow .plek small.up { color: var(--tt-green); }
.tt-rang .tt-prow .plek small.dn { color: var(--tt-muted); }
.tt-rang .tt-prow.is-me { background: color-mix(in srgb, var(--tt-blue) 7%, transparent); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.tt-rang .tt-prow .end small { display: block; font-size: 12px; font-weight: 700; }
.tt-rang .tt-prow .end small.up { color: var(--tt-green); }
.tt-rang .tt-prow .end small.dn { color: var(--tt-muted); }
.tt-rang .tt-prow .end .was { font-weight: 600; color: var(--tt-muted); }

/* ---------- clubpagina: feitjes per periode ---------- */
.tt-periode { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.tt-periode .mid { flex: 1; min-width: 0; text-align: center; }
.tt-periode .mid b { display: block; font-family: var(--tt-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--tt-ink); }
.tt-periode .mid span { display: block; font-size: 13px; color: var(--tt-muted); margin-top: 2px; }
.tt-periode .tt-iconbtn.leeg { visibility: hidden; }
.tt-periode__uitleg { font-size: 13.5px; color: var(--tt-muted); text-align: center; text-wrap: balance; max-width: 34em; margin: 0 auto 12px; }

/* ---------- Onderling ---------- */
.tt-tegen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.tt-tegen__vs { font-family: var(--tt-display); font-weight: 800; color: var(--tt-faint); padding-top: 22px; font-size: 15px; }
.tt-kant { min-width: 0; }
.tt-kant__speler { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 8px; }
.tt-kant__speler .tt-av { width: 44px; height: 44px; font-size: 15px; }
.tt-kant__speler div > b { display: block; font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.tt-kant__speler div > span { display: block; font-size: 13px; color: var(--tt-muted); }
.tt-kant .tt-chips { margin: 8px 0 0; padding: 2px 0; }
.tt-kant .tt-zoek { margin-bottom: 0; }
.tt-kant .tt-search-input input { font-size: 15px; padding: 10px 0; }
.tt-kant .tt-zoek__res { min-width: 240px; }
@media (max-width: 575.98px) {
  .tt-tegen { grid-template-columns: 1fr; gap: 6px; }
  .tt-tegen__vs { padding: 0; text-align: center; }
}
.tt-stand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; padding: 18px 16px; }
.tt-stand b { display: block; font-family: var(--tt-display); font-size: 46px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tt-stand span { display: block; font-size: 14px; color: var(--tt-muted); margin-top: 4px; overflow-wrap: anywhere; }
.tt-stand .midden b { font-size: 22px; color: var(--tt-muted); }
.tt-reeksen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -4px 0 14px; }
.tt-tijdlijn { position: relative; height: 26px; background: var(--tt-raise); border: 1px solid var(--tt-line); border-radius: 8px; }
.tt-tijdlijn i { position: absolute; top: 4px; width: 7px; height: 16px; border-radius: 3px; transform: translateX(-3.5px); }
.tt-tijdlijn__as { position: relative; height: 18px; font-size: 12px; color: var(--tt-muted); margin-top: 4px; }
.tt-tijdlijn__as span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tt-tijdlijn__as span:first-child { transform: none; left: 0; }
.tt-tijdlijn__as span:last-child { transform: none; right: 0; left: auto; }
.tt-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--tt-ink-2); }
.tt-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- clubs (beheer) ---------- */
.tt-clubkaart { height: 420px; border-radius: var(--tt-r-lg); overflow: hidden; border: 1px solid var(--tt-line); margin-bottom: 12px; z-index: 0; }
@media (max-width: 575.98px) { .tt-clubkaart { height: 340px; } }
.tt-chip .regio-kleur { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.tt-chip.off { opacity: .4; }
.tt-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; padding: 0 16px 6px; border-top: 1px solid var(--tt-line); }
.tt-club { display: flex; align-items: center; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--tt-line); min-width: 0; }
.tt-club a { flex: 1; min-width: 0; color: var(--tt-ink); text-decoration: none; }
.tt-club a b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-club a span { display: block; font-size: 13px; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-club .tt-iconbtn { width: 40px; height: 40px; }
.leaflet-popup-content, .gm-iw { font-size: 14px; }
.leaflet-popup-content strong { display: block; margin-bottom: 2px; }

/* ========== toernooienlijst, account, inloggen en uitleg ========== */
/* ==========================================================================
   Revamp, agent B: toernooienlijst, account, inloggen, uitleg, wat is nieuw.
   Alleen tokens uit tt.css; gaat voor de merge op in tt.css.
   ========================================================================== */

/* ---------- toernooienlijst ---------- */
.tt-tlist { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); padding: 0 14px; margin-bottom: 12px; }
.tt-tlist__maand { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); padding: 14px 0 4px; }
.tt-tlist__maand + .tt-trow { border-top: 0; }
.tt-tlist__groep > .tt-trow:first-child { border-top: 0; }
.tt-trow { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tt-line); min-height: 64px; }
.tt-tlist > .tt-trow:first-child, .tt-tlist > .tt-tlist__groep:first-child > .tt-trow:first-child { border-top: 0; }
.tt-trow .mid { flex: 1; min-width: 0; }
.tt-trow .naam { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tt-ink); text-decoration: none; overflow-wrap: anywhere; }
/* De hele rij is aan te tikken; knoppen erin liggen erboven */
.tt-trow .naam::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.tt-trow:hover .naam { text-decoration: underline; text-underline-offset: 3px; }
.tt-trow .naam:focus-visible { outline: none; }
.tt-trow .naam:focus-visible::after { outline: 2px solid var(--tt-blue); outline-offset: 2px; }
.tt-trow .sub { display: block; font-size: 13.5px; color: var(--tt-muted); line-height: 1.4; }
.tt-trow .sub .bezig { color: var(--tt-blue); font-weight: 700; }
.tt-trow .pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tt-trow .pills .tt-pill { position: relative; z-index: 1; font-size: 12px; padding: 3px 9px; }
.tt-trow .pijl { color: var(--tt-faint); flex: 0 0 auto; width: 18px; height: 18px; }
.tt-trow.is-voorbij .tt-dtile { background: transparent; box-shadow: inset 0 0 0 1px var(--tt-line); }
.tt-trow.is-voorbij .tt-dtile b { color: var(--tt-ink-2); }

.tt-dtile { width: 52px; flex: 0 0 auto; text-align: center; border-radius: 12px; background: var(--tt-neutral-soft); padding: 6px 2px 5px; line-height: 1; align-self: flex-start; }
.tt-dtile small { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tt-muted); white-space: nowrap; }
.tt-dtile b { display: block; font-family: var(--tt-display); font-size: 21px; font-weight: 800; color: var(--tt-ink); margin: 3px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tt-dtile b.reeks { font-size: 15px; margin: 5px 0 4px; letter-spacing: -.03em; }
.tt-dtile.live { background: var(--tt-blue-soft); }
.tt-dtile.live small, .tt-dtile.live b { color: var(--tt-blue); }

/* Jouw spelers in een toernooi */
.tt-fchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.2; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--tt-neutral-soft); color: var(--tt-ink-2); white-space: nowrap; }
.tt-fchip .ic { width: 12px; height: 12px; color: var(--tt-red); }

/* Filter "met jouw spelers" */
#toernooien-lijst.alleen-jouw [data-jouw="0"] { display: none; }
#toernooien-lijst .tt-alleen-jouw-leeg { display: none; }
#toernooien-lijst.alleen-jouw .tt-alleen-jouw-leeg { display: block; }
/* Na het verbergen is een andere rij de eerste: alleen een lijn tussen zichtbare rijen */
#toernooien-lijst.alleen-jouw .tt-trow[data-jouw="1"] { border-top: 0; }
#toernooien-lijst.alleen-jouw .tt-trow[data-jouw="1"] ~ .tt-trow[data-jouw="1"] { border-top: 1px solid var(--tt-line); }
#toernooien-lijst.alleen-jouw .tt-tlist__maand + .tt-trow { border-top: 0; }
.tt-chip .ic { width: 15px; height: 15px; }
.tt-chip.on .ic { color: var(--tt-red); }
.tt-jaarkop { margin-top: 24px; }

/* ---------- account: profiel en welkom ---------- */
.tt-account { max-width: 640px; }
.tt-account .tt-card { padding: 18px 18px 20px; }
.tt-account__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tt-account__kop .ic { width: 20px; height: 20px; color: var(--tt-muted); flex: 0 0 auto; }
.tt-account__kop h2 { font-family: var(--tt-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.tt-account__uitleg { font-size: 14px; color: var(--tt-muted); margin: 0 0 14px; }
.tt-account .form-label { font-size: 14px; font-weight: 700; color: var(--tt-ink-2); margin-bottom: 6px; }
.tt-account .form-control, .tt-auth .form-control { min-height: 48px; font-size: 16px; border-radius: 12px; }
.tt-account .form-text { font-size: 13px; color: var(--tt-muted); }
.tt-account .btn, .tt-auth .btn { min-height: 46px; border-radius: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tt-account .tt-fout, .tt-auth .tt-fout { font-size: 13.5px; color: var(--tt-danger); margin-top: 6px; }
.tt-account .tt-opgeslagen { font-size: 14px; color: var(--tt-green); font-weight: 700; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; }

/* Schakelaar met uitleg */
.tt-schakel { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--tt-raise); border: 1px solid var(--tt-line); }
.tt-schakel .form-check-input { width: 46px; height: 26px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.tt-schakel .form-check-input:checked { background-color: var(--tt-red); border-color: var(--tt-red); }
.tt-schakel label { font-size: 15.5px; font-weight: 700; color: var(--tt-ink); cursor: pointer; }
.tt-schakel p { font-size: 13.5px; color: var(--tt-muted); margin: 3px 0 0; }

/* Ben jij dit? */
.tt-suggesties { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--tt-raise); border: 1px solid var(--tt-line); }
.tt-suggesties__kop { font-size: 13.5px; font-weight: 700; color: var(--tt-muted); margin-bottom: 8px; }
.tt-suggestie { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; min-height: 48px; border-radius: 12px; border: 1px solid var(--tt-line); background: var(--tt-card); color: var(--tt-ink); margin-bottom: 6px; }
.tt-suggestie:last-child { margin-bottom: 0; }
.tt-suggestie:hover { border-color: var(--tt-line-strong); }
.tt-suggestie b { font-size: 15px; }
.tt-suggestie span { font-size: 13px; color: var(--tt-muted); }
.tt-zoeklijst { margin-top: 8px; }
.tt-zoeklijst .tt-suggestie { margin-bottom: 6px; }
/* Speel je zelf? (aanmelden en welkomstpagina, partials/wie-ben-jij) */
.tt-wie { display: grid; gap: 22px; margin: 22px 0 20px; padding-top: 20px; border-top: 1px solid var(--tt-line); }
.tt-wie__kop { font-size: 17px; font-weight: 800; color: var(--tt-ink); margin: 0 0 4px; padding: 0; float: none; width: auto; }
.tt-wie__uitleg { font-size: 14px; color: var(--tt-muted); margin: 0 0 12px; }
.tt-wie__jij { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 6px 8px 12px; border-radius: 12px; background: var(--tt-green-soft); border: 1px solid var(--tt-line); }
.tt-wie__jij.onbekend { background: var(--tt-raise); }
.tt-wie__jij .ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--tt-green); }
.tt-wie__jij.onbekend .ic { color: var(--tt-muted); }
.tt-wie__jij b { display: block; font-size: 15px; color: var(--tt-ink); }
.tt-wie__jij small { display: block; font-size: 13px; color: var(--tt-ink-2); }
.tt-wie__wis { margin-left: auto; flex: 0 0 auto; border: 0; background: none; color: var(--tt-ink-2); font-size: 13.5px; text-decoration: underline; padding: 6px 8px; min-height: 44px; }
.tt-wie__leeg { font-size: 14px; color: var(--tt-muted); padding: 8px 2px; }
.tt-welkom-wie .tt-wie { margin: 0 0 14px; padding-top: 0; border-top: 0; }
.tt-wie .tt-suggestie b { color: var(--tt-ink); }

/* Thema-keuze op het profiel */
.tt-thema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tt-thema button { min-height: 72px; border-radius: 14px; border: 1px solid var(--tt-line); background: var(--tt-card); color: var(--tt-ink-2); font-weight: 700; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tt-thema button .ic { width: 22px; height: 22px; }
.tt-thema button.active { border-color: var(--tt-ink); box-shadow: inset 0 0 0 1px var(--tt-ink); color: var(--tt-ink); }

/* Gevarenzone */
.tt-gevaar { border-color: color-mix(in srgb, var(--tt-danger) 35%, var(--tt-line)); }
.tt-gevaar .tt-account__kop .ic, .tt-gevaar .tt-account__kop h2 { color: var(--tt-danger); }

/* Welkom: twee stappen */
.tt-stap { display: flex; gap: 14px; align-items: flex-start; }
.tt-stap__nr { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--tt-neutral-soft); color: var(--tt-ink-2); }
.tt-stap__nr.klaar { background: var(--tt-green-soft); color: var(--tt-green); }
.tt-stap__nr .ic { width: 18px; height: 18px; }
.tt-stap h3 { font-size: 16.5px; font-weight: 800; margin: 4px 0 2px; }
.tt-stap p { font-size: 14px; color: var(--tt-muted); margin: 0 0 12px; }
.tt-stap .klaar-tekst { color: var(--tt-green); font-weight: 700; }
.tt-functies { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .tt-functies { grid-template-columns: 1fr 1fr; } }
.tt-functie { display: flex; gap: 12px; align-items: flex-start; }
.tt-functie .ic { width: 20px; height: 20px; color: var(--tt-ink-2); flex: 0 0 auto; margin-top: 2px; }
.tt-functie b { display: block; font-size: 15px; }
.tt-functie span { display: block; font-size: 13.5px; color: var(--tt-muted); }

/* ---------- inloggen en registreren ---------- */
.tt-auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(36px + env(safe-area-inset-top, 0px)) 16px 32px; background: var(--tt-paper); }
.tt-auth__logo { display: inline-flex; align-items: flex-end; gap: 4px; color: var(--tt-ink); text-decoration: none; margin: 8px 0 26px; }
.tt-auth__logo svg { fill: currentColor; --ball: var(--tt-red); }
.tt-auth__logo b { font-family: var(--tt-display); font-weight: 800; font-size: 40px; letter-spacing: -.035em; line-height: .74; }
.tt-auth__logo:hover { color: var(--tt-ink); }
.tt-auth__kaart { width: 100%; max-width: 420px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-xl); padding: 26px 22px 24px; box-shadow: var(--tt-shadow); }
.tt-auth__titel { font-family: var(--tt-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; text-align: center; }
.tt-auth__intro { font-size: 15px; color: var(--tt-muted); text-align: center; margin: 0 0 20px; }
.tt-auth .form-label { font-size: 14px; font-weight: 700; color: var(--tt-ink-2); margin-bottom: 6px; }
.tt-auth .form-check-label { font-size: 14.5px; }
.tt-auth .form-check-input { width: 20px; height: 20px; margin-top: 1px; }
.tt-auth__links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }
.tt-auth__links a, .tt-auth a.tt-link { font-weight: 700; color: var(--tt-red); text-decoration: none; padding: 6px 0; display: inline-block; }
.tt-auth__links a:hover, .tt-auth a.tt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-auth__of { display: flex; align-items: center; gap: 12px; color: var(--tt-faint); font-size: 13px; font-weight: 700; margin: 18px 0; text-transform: uppercase; letter-spacing: .08em; }
.tt-auth__of::before, .tt-auth__of::after { content: ""; flex: 1; height: 1px; background: var(--tt-line); }
.tt-auth .btn-google { background: var(--tt-card); border: 1px solid var(--tt-line-strong); color: var(--tt-ink); }
.tt-auth .btn-google:hover { background: var(--tt-raise); color: var(--tt-ink); }
.tt-auth__melding { font-size: 14.5px; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.tt-auth__melding.goed { background: var(--tt-green-soft); color: var(--tt-green); }
.tt-auth__melding.let-op { background: var(--tt-amber-soft); color: var(--tt-amber); }
.tt-auth__voet { margin-top: 22px; font-size: 13px; color: var(--tt-faint); text-align: center; }
.tt-auth__wacht { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: var(--tt-amber-soft); color: var(--tt-amber); }
.tt-auth__wacht .ic { width: 30px; height: 30px; }

/* ---------- uitleg (help) ---------- */
.tt-help { max-width: 760px; }
.tt-help__inhoud { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-help__inhoud a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; min-height: 36px; border-radius: 999px; background: var(--tt-card); border: 1px solid var(--tt-line); color: var(--tt-ink-2); text-decoration: none; font-size: 14px; font-weight: 700; }
.tt-help__inhoud a:hover { border-color: var(--tt-line-strong); color: var(--tt-ink); }
.tt-help__inhoud .ic { width: 15px; height: 15px; }
.tt-help section { scroll-margin-top: 84px; }
.tt-help .tt-card { padding: 20px 18px; }
.tt-help h2 { font-family: var(--tt-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.tt-help h2 .ic { width: 22px; height: 22px; color: var(--tt-muted); }
.tt-help h3 { font-size: 16px; font-weight: 800; margin: 16px 0 6px; }
.tt-help p, .tt-help li { font-size: 15.5px; line-height: 1.55; color: var(--tt-ink-2); }
.tt-help p { margin-bottom: 10px; }
.tt-help ul { padding-left: 1.2rem; margin-bottom: 10px; }
.tt-help li { margin-bottom: 5px; }
.tt-help strong { color: var(--tt-ink); }
.tt-help .tt-help__klein { font-size: 14px; color: var(--tt-muted); }
.tt-help kbd { font-family: var(--tt-font); font-size: 13px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--tt-neutral-soft); color: var(--tt-ink); }
/* Voorbeelden in de uitleg: echte onderdelen in een kader */
.tt-help__voorbeeld { border: 1px dashed var(--tt-line-strong); border-radius: 16px; padding: 4px 14px; margin: 12px 0; background: var(--tt-paper); }
.tt-help__voorbeeld .tt-pool { margin: 10px 0; }
.tt-help__uitleg { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: uitleg; }
.tt-help__uitleg li { display: flex; gap: 10px; margin-bottom: 8px; }
.tt-help__uitleg li::before { counter-increment: uitleg; content: counter(uitleg); flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--tt-ink); color: var(--tt-paper); font-size: 13px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }

/* ---------- wat is nieuw ---------- */
.tt-wn { max-width: 760px; }
.tt-wn__dag { margin-bottom: 22px; }
.tt-wn__datum { font-family: var(--tt-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.tt-wn__lijst { list-style: none; margin: 0; padding: 4px 16px; background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); }
.tt-wn__item { padding: 14px 0; border-top: 1px solid var(--tt-line); }
.tt-wn__item:first-child { border-top: 0; }
.tt-wn__item .tt-pill { margin-bottom: 6px; }
.tt-wn__item .tekst { font-size: 15.5px; line-height: 1.55; color: var(--tt-ink-2); }
.tt-wn__item .tekst strong { color: var(--tt-ink); }
.tt-wn__item .tekst .kop { display: block; font-size: 16px; margin-bottom: 2px; }
.tt-wn__uitgelicht { background: linear-gradient(135deg, color-mix(in srgb, var(--tt-red) 9%, var(--tt-card)), var(--tt-card) 60%); border: 1px solid var(--tt-line); border-radius: var(--tt-r-xl); padding: 22px 18px; margin-bottom: 14px; }
.tt-wn__uitgelicht h2 { font-family: var(--tt-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; }
.tt-wn__uitgelicht p { font-size: 15.5px; color: var(--tt-ink-2); margin: 0; line-height: 1.55; }

/* ========== meldingen ========== */
/* ---------- meldingen (revamp, voorstel 17) ---------- */

/* Push op dit apparaat */
.tt-push { display: grid; gap: 10px; }
.tt-push__top { display: flex; align-items: center; gap: 12px; }
.tt-push__ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-neutral-soft); color: var(--tt-muted); flex: 0 0 auto; }
.tt-push__ic .ic { width: 20px; height: 20px; }
.tt-push.is-on .tt-push__ic { background: var(--tt-green-soft); color: var(--tt-green); }
.tt-push__top .mid { flex: 1; min-width: 0; }
.tt-push__top .mid > b { display: block; font-size: 16px; line-height: 1.3; }
.tt-push__top .mid > span { font-size: 13.5px; color: var(--tt-muted); }
.tt-push__top .mid > span b[data-on="1"] { color: var(--tt-green); }
.tt-push__top .btn { min-height: 40px; padding-left: 16px; padding-right: 16px; font-weight: 700; flex: 0 0 auto; }
.tt-push__geen { font-size: 13.5px; color: var(--tt-muted); margin: 0; line-height: 1.5; }
.tt-push__test { justify-self: start; border: 0; background: none; padding: 0; color: var(--tt-muted); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Overzicht: "meldingen staan uit" boven de lijst */
.tt-push-hint { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--tt-r-lg); background: var(--tt-amber-soft); color: var(--tt-amber); text-decoration: none; font-size: 14px; font-weight: 600; }
.tt-push-hint .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.tt-push-hint span { flex: 1; min-width: 0; }

/* ---------- app-tip: op je beginscherm, het nieuwe logo, meldingen aan ---------- */
.tt-apptip { margin: 0 0 16px; }
.tt-tip { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px;
  border-radius: var(--tt-r-lg); background: var(--tt-card); border: 1px solid var(--tt-line); box-shadow: var(--tt-shadow); }
.tt-tip__ic { width: 52px; height: 52px; border-radius: 13px; display: block; box-shadow: 0 1px 3px rgba(15,21,34,.16); }
.tt-tip__ic--bel { display: grid; place-items: center; background: var(--tt-blue-soft); color: var(--tt-blue); box-shadow: none; }
.tt-tip__ic--bel .ic { width: 26px; height: 26px; }
.tt-tip .kop { display: block; font-family: var(--tt-display); font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--tt-ink); text-wrap: balance; }
.tt-tip p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--tt-ink-2); }
.tt-tip .tt-tip__klein { font-size: 13.5px; color: var(--tt-muted); }
.tt-tip ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: stap; display: grid; gap: 8px; }
.tt-tip ol li { counter-increment: stap; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--tt-ink); }
.tt-tip ol li::before { content: counter(stap); flex: 0 0 auto; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 800 12.5px var(--tt-font); background: var(--tt-neutral-soft); color: var(--tt-ink-2); }
.tt-tip ol .ic { width: 17px; height: 17px; vertical-align: -3px; color: var(--tt-blue); }
.tt-tip__knoppen { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.tt-tip__knoppen .btn { display: inline-flex; align-items: center; gap: 6px; }
.tt-tip__later { background: none; border: 0; padding: 8px 2px; font: 600 15px var(--tt-font); color: var(--tt-muted); cursor: pointer; }
.tt-tip__later:hover { color: var(--tt-ink); }
/* oud en nieuw icoon over elkaar: het nieuwe ligt erop */
.tt-tip__wissel { position: relative; width: 52px; height: 52px; display: block; }
.tt-tip__wissel img { position: absolute; display: block; }
.tt-tip__wissel .oud { left: 0; top: 0; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px var(--tt-line); }
.tt-tip__wissel .nieuw { right: 0; bottom: 0; width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 0 0 2px var(--tt-card), 0 2px 6px rgba(15,21,34,.2); }
.tt-tip [data-hoe] { display: none; }
.tt-apptip.toon-hoe [data-hoe]:not([hidden]) { display: grid; }
.sheet-link.sheet-link--app { color: var(--tt-red); font-weight: 700; }

/* ---------- verversen door te trekken (alleen als app) ---------- */
html.tt-app, html.tt-app body { overscroll-behavior-y: none; }
.tt-ptr { position: fixed; left: 50%; top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); z-index: 1015; pointer-events: none;
  --trek: 0px; transform: translate(-50%, calc(var(--trek) * 1.15 - 100%)); opacity: 0; transition: transform .32s var(--tt-ease), opacity .2s; }
.tt-ptr.is-trek { opacity: 1; transition: none; }
.tt-ptr.is-laden { opacity: 1; }
.tt-ptr__pil { padding: 4px 10px 6px; border-radius: 22px; background: var(--tt-card); border: 1px solid var(--tt-line); box-shadow: var(--tt-shadow-lg); }
/* tijdens het trekken zet het script de bal; bij het laden stuitert hij verder vanaf de rechterhelft */
.tt-ptr .tt-loader i { animation: none; }
.tt-ptr.is-laden .tt-loader i { animation: tt-rally-x 1.1s linear -.55s infinite, tt-rally-y .55s infinite, tt-rally-stuit .55s infinite; }
.tt-push-hint b { font-weight: 800; white-space: nowrap; }
.tt-push-hint:hover { color: var(--tt-amber); filter: brightness(.97); }

/* De lijst, per dag */
.tt-meldingen { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); overflow: hidden; margin-bottom: 12px; }
.tt-melding { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--tt-line); color: var(--tt-ink); text-decoration: none; }
.tt-melding:first-child { border-top: 0; }
a.tt-melding:hover { background: var(--tt-raise); color: var(--tt-ink); }
.tt-melding__ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-neutral-soft); color: var(--tt-ink-2); flex: 0 0 auto; }
.tt-melding__ic .ic { width: 18px; height: 18px; }
.tt-melding__ic.blue { background: var(--tt-blue-soft); color: var(--tt-blue); }
.tt-melding__ic.green { background: var(--tt-green-soft); color: var(--tt-green); }
.tt-melding__ic.goud { background: linear-gradient(145deg, #F2D27A, #B9851A); color: #fff; }
.tt-melding__ic.zilver { background: linear-gradient(145deg, #E3E7EC, #8D97A3); color: #fff; }
.tt-melding__ic.brons { background: linear-gradient(145deg, #E9B07C, #9C5B23); color: #fff; }
.tt-melding .mid { flex: 1; min-width: 0; }
.tt-melding .mid > b { display: block; font-size: 15.5px; line-height: 1.3; font-weight: 700; }
.tt-melding .mid > span { display: block; font-size: 13.5px; color: var(--tt-muted); line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; }
.tt-melding .tijd { font-size: 12.5px; color: var(--tt-faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; padding-top: 2px; }
.tt-melding__ic { position: relative; }
.tt-melding.is-nieuw .tt-melding__ic::after { content: ""; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--tt-red); border: 2px solid var(--tt-card); }

/* Instellingen */
.tt-voorkeuren { padding-top: 4px; padding-bottom: 4px; }
.tt-instelling { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 0; margin: 0; cursor: pointer; }
.tt-instelling + .tt-instelling, .tt-tijden + .tt-instelling { border-top: 1px solid var(--tt-line); }
.tt-instelling .mid { flex: 1; min-width: 0; }
.tt-instelling .mid > b { display: block; font-size: 15.5px; line-height: 1.3; }
.tt-instelling .mid > span { display: block; font-size: 13.5px; color: var(--tt-muted); line-height: 1.45; }
.tt-instelling .form-switch { padding-left: 0; flex: 0 0 auto; }
.tt-instelling .form-switch .form-check-input { width: 3.1em; height: 1.75em; margin: 0; cursor: pointer; float: none; }
.tt-tijden { display: flex; gap: 12px; padding: 0 0 12px; }
.tt-tijden[hidden] { display: none; }
.tt-tijden label { display: grid; gap: 4px; flex: 1; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tt-muted); }
.tt-tijden .form-control { min-height: 44px; font-size: 16px; font-variant-numeric: tabular-nums; }

.tt-niveaus { padding-top: 2px; padding-bottom: 2px; }
/* Eén regel per speler: naam links, de keuze rechts (ook op de telefoon) */
.tt-niveau-rij { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; margin: 0; border-top: 1px solid var(--tt-line); }
.tt-niveau-rij:first-child { border-top: 0; }
.tt-niveau-rij .tt-av { width: 32px; height: 32px; font-size: 12px; }
.tt-niveau-rij .mid { min-width: 0; }
.tt-niveau-rij .mid > b { display: block; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.tt-niveau-rij .mid > span { display: block; font-size: 13px; color: var(--tt-muted); line-height: 1.35; }
.tt-niveau-rij .tt-segs.sm { padding: 3px; gap: 2px; }
.tt-niveau-rij .tt-segs.sm button { min-height: 38px; padding: 6px 9px; font-size: 13px; }
.tt-niveau-rij.is-alle { grid-template-columns: 32px minmax(0, 1fr); padding: 10px 0 12px; border-bottom: 1px solid var(--tt-line-strong); }
.tt-niveau-rij.is-alle .tt-av { background: var(--tt-neutral-soft); color: var(--tt-ink-2); }
.tt-niveau-rij.is-alle .tt-av .ic { width: 18px; height: 18px; }
.tt-niveau-rij.is-alle .tt-segs.sm { grid-column: 1 / -1; display: flex; width: 100%; }
.tt-niveau-rij.is-alle .tt-segs.sm button { flex: 1 1 0; min-height: 40px; }
.tt-niveau-rij.is-alle + .tt-niveau-rij { border-top: 0; }
@media (min-width: 640px) {
  .tt-niveau-rij { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; }
  .tt-niveau-rij .tt-av { width: 40px; height: 40px; font-size: 14px; }
  .tt-niveau-rij .tt-segs.sm button { padding: 6px 12px; font-size: 13.5px; }
  .tt-niveau-rij.is-alle { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .tt-niveau-rij.is-alle .tt-segs.sm { grid-column: auto; width: auto; display: inline-flex; }
  .tt-niveau-rij.is-alle .tt-segs.sm button { flex: 0 0 auto; }
}
.tt-uitleg { font-size: 14px; color: var(--tt-muted); line-height: 1.55; margin: 4px 2px 16px; max-width: 65ch; }
.tt-uitleg b { color: var(--tt-ink-2); }

/* ========== coachen, kijklink en intro ========== */
/* =========================================================================
   Coachen (voorstel 16), kijklink (18) en intro (2) — agent D.
   Gaat bij de merge op in tt.css.
   ========================================================================= */

/* ---------- coachen: algemeen ---------- */
.coach-intro { font-size: 15px; color: var(--tt-ink-2); margin: 2px 0 6px; max-width: 60ch; }
.coach-label { display: block; font-size: 13px; font-weight: 700; color: var(--tt-ink-2); margin: 14px 2px 6px; }
.coach-lijst { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.coach-lijst > * { min-width: 0; }
.coach-lijst > form { margin: 0; }
.coach-lijst .tt-row { min-height: 60px; }
.coach-lijst .tt-row .mid > span { white-space: normal; }
.coach-lijst button.tt-row { font: inherit; }
.coach-tegen { color: var(--tt-muted); font-weight: 500; }
.coach-zoek { position: relative; }
.coach-zoek > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tt-muted); pointer-events: none; }
.coach-zoek .form-control { padding-left: 42px; min-height: 48px; border-radius: 14px; font-size: 16px; }
.coach-veld { min-height: 48px; border-radius: 14px; font-size: 16px; }
.coach-melding { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--tt-ink-2); background: var(--tt-amber-soft); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.coach-melding .ic { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tt-amber); margin-top: 1px; }
.coach-start { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: #fff; background: var(--tt-red-solid); border-radius: 999px; padding: 8px 14px; min-height: 40px; flex: 0 0 auto; }
.coach-start .ic { width: 14px; height: 14px; }

/* knoppen met een ruim tikvlak (minimaal 44 punt) */
.coach-knop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 14px; border-radius: 14px;
  border: 1px solid var(--tt-line); background: var(--tt-card); color: var(--tt-ink); font-weight: 700; font-size: 14px; }
.coach-knop:hover { border-color: var(--tt-line-strong); background: var(--tt-raise); }
.coach-knop:active { transform: scale(.97); }
.coach-knop .ic { width: 17px; height: 17px; }
.coach-knop--breed { width: 100%; min-height: 50px; font-size: 15px; }
.coach-linkknop { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--tt-muted); font-weight: 700; font-size: 13px; min-height: 44px; padding: 0 6px; }
.coach-linkknop:disabled { opacity: .45; }
.coach-linkknop .ic { width: 15px; height: 15px; }
.coach-linkknop--weg { color: var(--tt-muted); }
.coach-linkknop--weg:hover { color: var(--tt-red); }

/* ---------- coachen: de sessie ---------- */
.coach .side-player, .coach .speler { color: var(--tt-red); }
.coach-sync { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; border-radius: 14px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--tt-blue-soft); color: var(--tt-blue); }
.coach-sync[data-soort="offline"] { background: var(--tt-amber-soft); color: var(--tt-amber); }
.coach-sync[data-soort="fout"] { background: var(--tt-red-soft); color: var(--tt-red); }
.coach-sync__ic { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.coach-sync:not([data-soort="offline"]) .coach-sync__ic { display: none; }

.coach-games { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.coach-games__tally { display: inline-flex; align-items: baseline; gap: 5px; font-size: 14px; color: var(--tt-muted); font-weight: 600; }
.coach-games__tally b { font-family: var(--tt-display); font-size: 22px; color: var(--tt-ink); font-variant-numeric: tabular-nums; }
.coach-games__tally b.speler { color: var(--tt-red); }
.coach-games__tally small { font-size: 13px; }
.coach-games__lijst { display: flex; flex-wrap: wrap; gap: 5px; }
.coach-game { font-size: 13px; font-weight: 800; padding: 5px 9px; border-radius: 9px; background: var(--tt-neutral-soft); color: var(--tt-muted); font-variant-numeric: tabular-nums; }
.coach-game.w { background: var(--tt-green-soft); color: var(--tt-green); }
.coach-game.nu { background: var(--tt-card); color: var(--tt-blue); box-shadow: inset 0 0 0 1.5px var(--tt-blue); }

.coach-winst { display: flex; align-items: center; gap: 10px; background: var(--tt-green-soft); color: var(--tt-green); border-radius: 16px; padding: 10px 12px 10px 14px; margin-bottom: 12px; font-weight: 800; font-size: 15px; }
.coach-winst > .ic { width: 20px; height: 20px; flex: 0 0 auto; }
.coach-winst form { margin: 0; }
.coach-winst .btn { min-height: 40px; border-radius: 12px; font-weight: 800; }

.coach-service { padding: 12px 14px; }
.coach-service__vraag { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.coach-service__vraag .ic { width: 18px; height: 18px; color: var(--tt-amber); }
.coach-service__keus { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coach-service__keus form { margin: 0; }

.coach-acties { padding: 12px 12px 6px; }
.coach-acties__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coach-acties__kant { display: grid; gap: 5px; align-content: start; min-width: 0; }
.coach-acties__kop { text-align: center; font-weight: 800; font-size: 14px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-actie { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 4px; align-items: stretch; }
.coach-actie__naam { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tt-ink-2); padding: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.coach-actie__naam .ic { width: 13px; height: 13px; color: var(--tt-blue); flex: 0 0 auto; }
.coach-actie__knop { min-height: 44px; border-radius: 12px; border: 1px solid var(--tt-line); background: var(--tt-raise); display: grid; place-items: center; padding: 0; color: var(--tt-muted); }
.coach-actie__knop .ic { width: 19px; height: 19px; stroke-width: 2.4; }
.coach-actie__knop.goed { color: var(--tt-green); }
.coach-actie__knop.aan.goed { background: var(--tt-green); border-color: var(--tt-green); color: #fff; }
.coach-actie__knop.aan.fout { background: var(--tt-ink-2); border-color: var(--tt-ink-2); color: var(--tt-paper); }
.coach-actie__knop:active { transform: scale(.94); }
.coach-keuze { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--tt-muted); margin-top: 6px; padding: 0 2px; min-height: 44px; }
.coach-keuze > span { min-width: 0; line-height: 1.35; }

.coach-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 -8px 10px; padding: 8px;
  /* altijd onder je duim: de stand blijft onderin staan terwijl je acties kiest */
  position: sticky; bottom: 12px; z-index: 5; border-radius: 32px;
  background: color-mix(in srgb, var(--tt-paper) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (max-width: 991.98px) { .coach-stand { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
.coach-stand form { margin: 0; }
.coach-tegel { width: 100%; min-height: 136px; border-radius: 24px; border: 1px solid var(--tt-line); background: var(--tt-card); color: var(--tt-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 8px 12px; box-shadow: var(--tt-shadow);
  transition: transform var(--tt-dur-1) var(--tt-ease), box-shadow var(--tt-dur-1) var(--tt-ease); touch-action: manipulation; }
.coach-tegel:active { transform: scale(.97); box-shadow: 0 0 0 4px var(--tt-red-soft); }
.coach-tegel.speler { border-color: color-mix(in srgb, var(--tt-red) 35%, var(--tt-line)); }
.coach-tegel__wie { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-tegel__stand { font-family: var(--tt-display); font-size: 76px; font-weight: 800; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.coach-tegel.speler .coach-tegel__stand { color: var(--tt-red); }
.coach-tegel__tik { font-size: 12.5px; font-weight: 700; color: var(--tt-muted); text-transform: uppercase; letter-spacing: .06em; }
.coach-tegel__stand.stuit { animation: coach-stuit .32s var(--tt-spring) 1; }
@keyframes coach-stuit { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.coach-bal { width: 10px; height: 10px; border-radius: 50%; background: var(--tt-red); box-shadow: 0 0 0 3px var(--tt-red-soft); flex: 0 0 auto; }
.coach-bal[hidden] { display: none; }

.coach-balk { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.coach-balk form { margin: 0; display: flex; }
.coach-balk .coach-knop { width: 100%; }

.coach-eind { padding: 18px; }
.coach-eind__label { font-size: 13px; color: var(--tt-muted); font-weight: 700; }
.coach-eind__stand { font-family: var(--tt-display); font-size: 56px; font-weight: 800; line-height: 1.05; display: flex; justify-content: center; gap: 12px; }
.coach-eind__namen { font-size: 15px; }

.coach-notities { padding: 12px 14px; }
.coach-notities__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; font-size: 15px; margin-bottom: 6px; width: 100%; }
.coach-notities__kop small { font-size: 12.5px; color: var(--tt-muted); font-weight: 600; }
.coach-notities textarea { width: 100%; border: 1px solid var(--tt-line); border-radius: 14px; background: var(--tt-raise); color: var(--tt-ink); padding: 10px 12px; font-size: 16px; line-height: 1.45; resize: vertical; min-height: 88px; }
.coach-notities textarea:focus { outline: 2px solid var(--tt-blue); outline-offset: 1px; }
.coach-notities__tekst { font-size: 15px; color: var(--tt-ink-2); }

/* statistieken */
.coach-tabs { margin-bottom: 10px; }
.coach-tabs button.active { background: var(--tt-ink); color: var(--tt-paper); }
.coach-stats { padding: 12px 14px; }
.coach-leeg { text-align: center; color: var(--tt-muted); font-size: 14px; padding: 14px 6px; }
.coach-totaal { text-align: center; }
.coach-totaal small { display: block; font-size: 12.5px; color: var(--tt-muted); }
.coach-totaal b { display: block; font-family: var(--tt-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.coach-verdeling { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--tt-neutral-soft); margin: 10px 0 4px; }
.coach-verdeling span { background: var(--tt-line-strong); }
.coach-verdeling span.speler { background: var(--tt-red); }
.coach-kopje { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); margin: 14px 0 4px; }
.coach-kopje span { letter-spacing: 0; text-transform: none; font-weight: 600; }
.coach-rij { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--tt-line); }
.coach-rij:last-child { border-bottom: 0; }
.coach-rij--balk { display: block; }
.coach-balkje { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--tt-neutral-soft); }
.coach-balkje .speler { background: var(--tt-red); }
.coach-balkje .ander { background: var(--tt-ink-2); margin-left: auto; }
.coach-goed { color: var(--tt-green); }
.coach-fout { color: var(--tt-muted); }
.coach-verloop { width: 100%; height: 120px; border: 1px solid var(--tt-line); border-radius: 12px; background: var(--tt-raise); }
.coach-legenda { display: flex; gap: 16px; justify-content: center; font-size: 13px; color: var(--tt-muted); margin-top: 4px; }
.coach-legenda .lijn { display: inline-block; width: 16px; vertical-align: middle; margin-right: 6px; border-top: 2.5px solid var(--tt-red); }
.coach-legenda .lijn.ander { border-top: 2px dashed var(--tt-ink-2); }
.coach-tabel { font-size: 13.5px; }
.coach-tabel th { font-size: 12px; }

@media (max-width: 380px) {
  .coach-actie { grid-template-columns: minmax(0, 1fr) 40px 40px; }
  .coach-tegel__stand { font-size: 64px; }
}

/* ---------- kijklink (pagina zonder login) ---------- */
.kijk-body { background: var(--tt-paper); color: var(--tt-ink); font-family: var(--tt-font); margin: 0; }
.kijk { max-width: 640px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(36px + env(safe-area-inset-bottom, 0px)); }
.kijk-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 44px; }
.kijk-kop .tt-lockup { color: var(--tt-ink); }
.kijk-kop .tt-lockup svg { --ball: var(--tt-red); }
.kijk-wie { font-size: 14px; color: var(--tt-muted); margin: 2px 0 14px; }
/* Meekijken is alleen lezen: geen links naar pagina's waarvoor je moet inloggen */
.kijk-inhoud a:not(.kijk-ok) { pointer-events: none; color: inherit; text-decoration: none; }
.kijk-voet { margin-top: 26px; text-align: center; font-size: 13px; color: var(--tt-muted); line-height: 1.6; }
.kijk-voet a { color: var(--tt-ink-2); font-weight: 700; }
.kijk-verlopen { text-align: center; padding: 40px 10px; }
.kijk-verlopen .ic { width: 40px; height: 40px; color: var(--tt-faint); }
.kijk-verlopen h1 { font-family: var(--tt-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 6px; }
.kijk-verlopen p { font-size: 15px; color: var(--tt-ink-2); max-width: 40ch; margin: 0 auto; }
.kijk-deel { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.kijk-uitleg { font-size: 13px; color: var(--tt-muted); margin: 8px 2px 0; }

/* ---------- intro (voorstel 2): de grote bij de start, de korte bij terugkomen; licht en donker ---------- */
.ti-root { --ti-bg: radial-gradient(120% 70% at 50% 38%, #FFFFFF 0%, #F1F3F6 58%, #E1E5EC 100%); position: fixed; inset: 0; z-index: 3000; cursor: pointer; }
[data-theme="dark"] .ti-root { --ti-bg: radial-gradient(120% 70% at 50% 38%, #1b2233 0%, #0b0f18 60%, #07090f 100%); }
.ti { position: absolute; inset: 0; --ti-out: 0; transition: opacity .35s var(--tt-ease); overflow: hidden; }
.ti.ti-hide { opacity: 0; pointer-events: none; }
.ti-bg { position: absolute; inset: 0; background: var(--ti-bg); }
.ti-flood { position: absolute; inset: 0; background: #D8232A; clip-path: circle(0 at 50% 50%); }
.ti-ring { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.ti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ti-lockup { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; transform-origin: 0 0; opacity: 0; will-change: transform;
  color: color-mix(in srgb, #fff calc((1 - var(--ti-out)) * 100%), #0F1522);
  fill: color-mix(in srgb, #fff calc((1 - var(--ti-out)) * 100%), #0F1522);
  --ball: color-mix(in srgb, #fff calc((1 - var(--ti-out)) * 100%), #D8232A); }
[data-theme="dark"] .ti-lockup { color: #fff; fill: #fff; --ball: color-mix(in srgb, #fff calc((1 - var(--ti-out)) * 100%), #D8232A); }
.ti-mono { display: block; flex: 0 0 auto; }
.ti-word { font-family: var(--tt-display); font-weight: 800; letter-spacing: -.035em; line-height: .74; display: block; white-space: nowrap; }
/* Leesbaar op de lichte en de donkere achtergrond en op het rood */
.ti-skip { position: absolute; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); padding: 7px 12px; border-radius: 999px;
  font: 700 13px var(--tt-font); letter-spacing: .02em; color: #fff; background: rgba(15,21,34,.45); pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: ti-skip-weg .3s ease 2.5s forwards; }
@keyframes ti-skip-weg { to { opacity: 0; } }
html.tt-intro-loopt .top-header .header-lockup, html.tt-intro-loopt .top-header .header-mono { visibility: hidden; }
/* de korte versie: de app wordt even mat, de bal stuit over het tafeltje en landt als de stip */
.ti-kort { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--tt-paper) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.ti-kort__logo { position: relative; width: 150px; aspect-ratio: 120 / 84; color: var(--tt-ink); }
.ti-kort__logo svg { display: block; width: 100%; height: 100%; fill: currentColor; --ball: transparent; overflow: visible; }
.ti-kort__logo i { position: absolute; left: 0; top: 0; width: 15%; aspect-ratio: 1; border-radius: 50%; background: var(--tt-red); transform-origin: 50% 100%; will-change: transform; }
/* zonder 3D (minder beweging gevraagd): alleen het logo dat kort oplicht */
.ti-rustig { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: #D8232A; color: #fff; transition: opacity .45s ease; }
.ti-rustig.ti-hide { opacity: 0; pointer-events: none; }
.ti-rustig .tt-lockup { color: #fff; }
.ti-rustig .tt-lockup svg { --ball: #fff; }

/* ========== delen: dagkaart ========== */
/* De kaart "Klaar voor vandaag" in het spelerspaneel en het blad waarin je de deelkaart
   maakt (resources/views/vandaag/deel-klaar en deelblad, public/js/tt-deel.js). */
.tt-deelklaar {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 16px 16px 16px 18px; margin: 0 0 12px; border-radius: var(--tt-r-lg);
  background: linear-gradient(130deg, var(--tt-red-soft) 0%, var(--tt-card) 64%);
  border: 1px solid color-mix(in srgb, var(--tt-red) 24%, var(--tt-line)); box-shadow: var(--tt-shadow);
}
.tt-deelklaar__mini { padding: 0; border: 0; background: none; border-radius: 10px; transform: rotate(-4deg); transition: transform var(--tt-dur-3) var(--tt-spring); }
.tt-deelklaar__mini:hover, .tt-deelklaar__mini:focus-visible { transform: rotate(-1deg) scale(1.04); }
.tt-deelklaar__mini:focus-visible { outline: 2px solid var(--tt-ink); outline-offset: 4px; }
.tt-deelklaar__mini canvas { display: block; width: 92px; aspect-ratio: 1080 / 1350; border-radius: 10px; background: #CC1F26; box-shadow: 0 10px 24px rgba(15,21,34,.24), 0 1px 3px rgba(15,21,34,.18); }
.tt-deelklaar__tekst { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.tt-deelklaar__titel { font-family: var(--tt-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--tt-ink); text-wrap: balance; }
.tt-deelklaar__uitleg { font-size: 14px; line-height: 1.4; color: var(--tt-muted); margin-bottom: 8px; }
.tt-deelklaar .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.kijk-deel > :only-child { grid-column: 1 / -1; }

.tt-deelblad { padding-left: 16px; padding-right: 16px; }
.tt-deelblad__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.tt-deelblad__kop h2 { font-family: var(--tt-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-deelblad__vak { display: grid; place-items: center; padding: 14px; border-radius: 20px; background: var(--tt-raise); border: 1px solid var(--tt-line); }
.tt-deelblad__vak canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: min(38vh, 400px); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,21,34,.26); }
.tt-deelblad__vak canvas.kan-slepen { cursor: grab; touch-action: none; }
.tt-deelblad__vak canvas.kan-slepen:active { cursor: grabbing; }
.tt-deelblad__fotorij { display: flex; align-items: center; gap: 14px; margin: 10px 2px 0; font-size: 13.5px; color: var(--tt-muted); }
.tt-deelblad__fotorij[hidden] { display: none; }
.tt-deelblad__hint { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tt-deelblad__hint .ic { width: 15px; height: 15px; }
.tt-deelblad__zoom { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0; }
.tt-deelblad__zoom input { flex: 1; min-width: 0; accent-color: var(--tt-red); }
.tt-deelblad__fotorij .btn-link { font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--tt-ink); }
.tt-deelblad__keuzes { display: grid; gap: 14px; margin-top: 14px; }
.tt-deelblad__groep { display: grid; gap: 8px; justify-items: start; }
.tt-deelblad__label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); }
.tt-deelblad__stalen { display: flex; gap: 16px; }
.tt-deelstaal { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--tt-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tt-deelstaal .bol { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(15,21,34,.1); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--tt-dur-1) var(--tt-ease); }
.tt-deelstaal .bol .ic { width: 20px; height: 20px; }
.tt-deelstaal.on { color: var(--tt-ink); }
.tt-deelstaal.on .bol, .tt-deelstaal:focus-visible .bol { outline-color: var(--tt-ink); }
.tt-deelstaal:focus-visible { outline: 0; }
.tt-deelstaal.foto .bol { background-color: var(--tt-neutral-soft); color: var(--tt-ink); box-shadow: inset 0 0 0 1.5px var(--tt-line-strong); }
.tt-deelstaal.foto.heeft-foto .bol { box-shadow: inset 0 0 0 1px rgba(15,21,34,.1); }
.tt-deelstaal.foto.heeft-foto .bol .ic { display: none; }
.tt-deelstaal.rood .bol { background-image: linear-gradient(145deg, #E5363C, #A3141B); }
.tt-deelstaal.donker .bol { background-image: radial-gradient(circle at 78% 18%, rgba(216,35,42,.65), transparent 62%), linear-gradient(145deg, #1C2436, #07090E); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.tt-deelstaal.blauw .bol { background-image: linear-gradient(145deg, #3A6EEA, #163A98); box-shadow: inset 0 0 0 4px #2E62E0, inset 0 0 0 6px rgba(255,255,255,.92); }
.tt-deelblad__namen { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding: 11px 14px; border-radius: 14px;
  background: var(--tt-raise); border: 1px solid var(--tt-line); font-size: 15px; font-weight: 700; color: var(--tt-ink); cursor: pointer; }
.tt-deelblad__namen[hidden] { display: none; }
.tt-deelblad__namen small { display: block; font-size: 13px; font-weight: 500; color: var(--tt-muted); }
/* Onderin vast, tegen de rand van het blad (sticky rekent vanaf de binnenrand, vandaar de negatieve waarden) */
.tt-deelblad__voet { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom, 0px)); z-index: 2; margin: 14px -16px calc(-22px - env(safe-area-inset-bottom, 0px)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--tt-card); box-shadow: 0 -12px 20px -16px rgba(15,21,34,.35); }
.tt-deelblad__acties { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.tt-deelblad__acties .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-weight: 700; }
.tt-deelblad__privacy { font-size: 12.5px; color: var(--tt-muted); text-align: center; margin: 8px 0 0; }
@media (min-width: 992px) {
  .tt-deelblad__vak canvas { max-height: min(52vh, 480px); }
}

/* ========== rating verbergen ========== */
/* Keuze op het profiel (profile/partials/rating-form) en de schakelaar in het Meer-blad (App\Support\RatingZicht) */
.tt-keuzes fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.tt-keuze { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tt-line); background: var(--tt-card); cursor: pointer; transition: border-color var(--tt-dur-1) var(--tt-ease); }
.tt-keuze:hover { border-color: var(--tt-line-strong); }
.tt-keuze:has(input:checked) { border-color: var(--tt-ink); box-shadow: inset 0 0 0 1px var(--tt-ink); }
.tt-keuze input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--tt-ink); cursor: pointer; }
.tt-keuze b { display: block; font-size: 15.5px; color: var(--tt-ink); }
.tt-keuze small { display: block; font-size: 13.5px; color: var(--tt-muted); margin-top: 2px; }
.tt-keuzes__nu { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 14px; color: var(--tt-ink-2); }
.tt-keuzes__nu .ic { width: 16px; height: 16px; color: var(--tt-muted); flex: 0 0 auto; }
.tt-keuzes .tt-opgeslagen { margin: 10px 0 0 2px; }
.tt-ratingschakel { cursor: pointer; }
.tt-ratingschakel small { display: block; font-size: 13px; font-weight: 500; color: var(--tt-muted); margin-top: 1px; }
.tt-ratingschakel .form-check-input { width: 44px; height: 24px; margin: 0; cursor: pointer; }
.tt-ratingschakel .form-check-input:checked { background-color: var(--tt-red-solid); border-color: var(--tt-red-solid); }
.tt-pcard__btns > :only-child { grid-column: 1 / -1; }
/* ---------- Toernooien: lijst en toernooipagina (review 12-10) ---------- */
/* "Komt nog" ingeklapt tot vijf; met het filter "met jouw spelers" staan die van jou er altijd */
.tt-tlist .is-extra { display: none; }
.tt-tlist.alles .tt-trow.is-extra { display: flex; }
.tt-tlist.alles .tt-tlist__groep.is-extra { display: block; }
.tt-tlist.alles .tt-plist__meer { display: none; }
#toernooien-lijst.alleen-jouw .tt-trow.is-extra[data-jouw="1"] { display: flex; }
#toernooien-lijst.alleen-jouw .tt-tlist__groep.is-extra[data-jouw="1"] { display: block; }
#toernooien-lijst.alleen-jouw .tt-tlist .tt-plist__meer { display: none; }
/* Vijf korte tabs passen op een telefoon */
.tt-segs--toernooi a { padding-inline: 10px; }
/* Je spelers in het eindklassement */
.tt-podium__rij a.is-jouw .ic { width: 13px; height: 13px; color: var(--tt-red); margin-right: 5px; vertical-align: -1px; }
/* Uitleg naast de kop van een lijst ("Comebacks · gewonnen na een achterstand") */
.tt-plist__uitleg { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tt-faint); margin-left: 4px; }

/* ---------- Seizoen/speler/club: Mijn club en de spelerspagina (review 12-10) ---------- */
.tt-plist .tt-prow.is-me { background: color-mix(in srgb, var(--tt-blue) 7%, transparent); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.tt-clubvolgorde { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.tt-plist__kop span { margin-left: 6px; font-weight: 700; color: var(--tt-faint); letter-spacing: 0; }
.tt-kerncijfers__tik { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--tt-ink-2); }
.tt-kerncijfers__meer { margin-top: 10px; display: grid; gap: 6px; font-size: 13.5px; color: var(--tt-ink-2); }
.tt-kerncijfers__meer p { margin: 0; }
.tt-kerncijfers .tt-kerncijfers__meer p b { display: inline; font-family: inherit; font-size: inherit; letter-spacing: 0; margin: 0 4px 0 0; color: var(--tt-ink); }
/* Open: de vakjes onder elkaar, dan past de tabel met de jaren */
.tt-kerncijfers:has(details[open]) { grid-template-columns: 1fr; }

/* ---------- Vinden/menu/help: Meer in groepen, ranglijst rond jou (review 12-10) ---------- */
.more-kop { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-faint); margin: 16px 4px 6px; }
.more-grid.more-grid--groep { margin: 0 0 4px; }
.more-tile.more-tile--breed { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; justify-items: start; }
.more-tile--breed .ic { width: 26px; height: 26px; flex: 0 0 auto; }
.more-tile--breed span { display: grid; gap: 1px; min-width: 0; font-size: 15.5px; }
.more-tile--breed small { font-size: 13px; font-weight: 600; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-rangnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 10px; }
.tt-rangnav__waar { font-size: 13.5px; font-weight: 700; color: var(--tt-muted); margin-right: auto; font-variant-numeric: tabular-nums; }
.tt-rangmeer { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0 0 10px; border: 1px dashed var(--tt-line-strong); border-radius: var(--tt-r-lg); color: var(--tt-ink-2); font-size: 14px; font-weight: 700; text-decoration: none; }
.tt-rangmeer:hover { color: var(--tt-ink); background: var(--tt-raise); }
.tt-rang .tt-prow#mij { scroll-margin-top: 96px; }
/* Competitie op Vandaag: per teamwedstrijd thuis en uit, de stand, en wie er nu speelt */
.tt-comp { padding-bottom: 6px; }
.tt-comp__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); }
.tt-comp__staat { display: inline-flex; align-items: center; gap: 6px; }
.tt-comp--bezig .tt-comp__staat { color: var(--tt-blue); }
.tt-comp__klasse { font-weight: 600; letter-spacing: 0; text-transform: none; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-comp__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 10px 0 2px; }
.tt-comp__team { font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--tt-ink-2); }
.tt-comp__team--uit { text-align: right; }
.tt-comp__team.is-eigen { color: var(--tt-ink); }
.tt-comp__stand { font-family: var(--tt-display); font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tt-ink); }
.tt-comp__sub { font-size: 13px; color: var(--tt-muted); margin-bottom: 6px; }
.tt-comp__speler { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--tt-line); }
.tt-comp__speler .tt-av { width: 34px; height: 34px; font-size: 13px; }
.tt-comp__speler .mid { flex: 1; min-width: 0; }
.tt-comp__speler .mid b { display: block; font-size: 15.5px; }
.tt-comp__speler .mid > span { display: block; font-size: 13.5px; color: var(--tt-muted); }
.tt-comp__nu { color: var(--tt-blue); font-weight: 700; }
.tt-comp__heel { border-top: 1px solid var(--tt-line); }
.tt-comp__heel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 0 6px; font-size: 14px; font-weight: 700; color: var(--tt-ink-2); }
.tt-comp__heel > summary::-webkit-details-marker { display: none; }
.tt-comp__heel[open] .tt-comp__pijl { transform: rotate(180deg); }
.tt-comp__stat { padding: 0 0 10px; display: grid; gap: 4px; }
.tt-comp__stat h4 { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); }
.tt-comp__stat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tt-comp__stat li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; border-bottom: 1px solid var(--tt-line); }
.tt-comp__stat li b { font-variant-numeric: tabular-nums; }
.tt-comp__stat p { margin: 6px 0 0; font-size: 12px; color: var(--tt-muted); }
.tt-comp__alle { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 4px 0 12px; padding: 10px; font-size: 14px; font-weight: 700; color: var(--tt-ink-2); text-decoration: none; }
.tt-comp__alle:hover { color: var(--tt-ink); }
.tt-comp__alle .ic { width: 16px; height: 16px; }
/* ---------- Teamwedstrijden (17-10) ---------- */
.tc-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.tc-filter__veld { display: grid; gap: 4px; min-width: 0; }
.tc-filter__veld > span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); }
.tc-filter__zoek { grid-column: 1 / -1; }
@media (min-width: 900px) { .tc-filter { grid-template-columns: 1fr 1fr 1.4fr; } .tc-filter__zoek { grid-column: auto; } }
.tc-kaart > summary { list-style: none; cursor: pointer; }
.tc-kaart > summary::-webkit-details-marker { display: none; }
.tc-kaart > summary:focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 4px; border-radius: 12px; }
.tc-kaart__sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tc-kaart__open { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--tt-ink-2); }
.tc-kaart[open] .tt-comp__pijl { transform: rotate(180deg); }
.tc-partijen { border-top: 1px solid var(--tt-line); padding-top: 4px; }
.tc-partijen__leeg, .tc-partijen__voet { font-size: 13px; color: var(--tt-muted); margin: 8px 0 4px; }
.tc-partijen__lijst { list-style: none; margin: 0; padding: 0; }
.tc-partijen__lijst li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--tt-line); }
.tc-partijen__lijst li:last-child { border-bottom: 0; }
.tc-p__nr { font-size: 12px; font-weight: 800; color: var(--tt-muted); text-align: center; font-variant-numeric: tabular-nums; }
.tc-partijen__lijst li.is-dubbel .tc-p__nr { color: var(--tt-ink-2); }
.tc-p__wie { display: grid; gap: 1px; min-width: 0; font-size: 14px; color: var(--tt-ink-2); }
.tc-p__wie > span { overflow-wrap: anywhere; }
.tc-p__wie .is-winst { font-weight: 800; color: var(--tt-ink); }
.tc-p__wie .is-mijn { text-decoration: underline; text-decoration-color: var(--tt-red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tc-p__games { font-size: 13px; color: var(--tt-ink-2); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 7px; max-width: 128px; }
.tc-p__games > span { white-space: nowrap; }
/* Een speler uitklappen: zijn partijen, ook de dubbel, met de games (17-10) */
.tt-comp__uit > summary { list-style: none; cursor: pointer; }
.tt-comp__uit > summary::-webkit-details-marker { display: none; }
.tt-comp__uit > summary:focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 2px; border-radius: 8px; }
.tt-comp__pijl { width: 18px; height: 18px; color: var(--tt-muted); flex: 0 0 auto; transition: transform .15s; }
.tt-comp__uit[open] .tt-comp__pijl { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .tt-comp__pijl { transition: none; } }
.tt-comp__partijen { list-style: none; margin: 0 0 8px 46px; padding: 0; display: grid; gap: 2px; }
.tt-comp__partijen li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0 6px 10px; border-left: 3px solid var(--tt-line); }
.tt-comp__partijen li.is-won { border-left-color: var(--tt-green); }
.tt-comp__partijen li.is-lost { border-left-color: var(--tt-red); }
.tt-comp__partijen li.is-bezig { border-left-color: var(--tt-blue); }
.tt-comp__p-wat { min-width: 0; }
.tt-comp__p-wat b { display: block; font-size: 14px; }
.tt-comp__p-wat span { display: block; font-size: 13px; color: var(--tt-muted); }
.tt-comp__p-games .tt-delta { display: block; margin-top: 2px; }
.tt-comp__p-games { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--tt-ink-2); text-align: right; flex: 0 0 auto; max-width: 48%; }

/* ---------- Meldingen/profiel: in de zaal of op afstand, dagbundels (review 12-10) ---------- */
/* Vandaag in de zaal of op afstand (notifications-zaal) */
.tt-zaal { display: grid; gap: 12px; }
.tt-zaal__vraag { display: flex; align-items: flex-start; gap: 12px; }
.tt-zaal__ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-blue-soft); color: var(--tt-blue); flex: 0 0 auto; }
.tt-zaal__ic .ic { width: 18px; height: 18px; }
.tt-zaal__vraag .mid { flex: 1; min-width: 0; }
.tt-zaal__vraag .mid > b { display: block; font-size: 15.5px; line-height: 1.3; }
.tt-zaal__vraag .mid > span { display: block; font-size: 13.5px; color: var(--tt-muted); line-height: 1.45; margin-top: 2px; }
.tt-zaal__keuze.tt-segs.sm { display: flex; width: 100%; margin: 0; }
.tt-zaal__keuze.tt-segs.sm button { flex: 1 1 0; min-height: 44px; font-size: 14px; }
.tt-zaal__keuze .ic { width: 16px; height: 16px; }

/* Per speler: met "In de zaal" en "Op afstand" past de keuze op de telefoon niet meer naast de naam */
@media (max-width: 559px) {
  .tt-niveau-rij { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; }
  .tt-niveau-rij .tt-segs.sm { grid-column: 1 / -1; display: flex; width: 100%; }
  .tt-niveau-rij .tt-segs.sm button { flex: 1 1 0; min-height: 40px; }
}
.tt-niveau-uitleg { display: grid; gap: 8px; margin: 4px 2px 10px; }
.tt-niveau-uitleg div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; }
.tt-niveau-uitleg dt { font-weight: 800; color: var(--tt-ink); }
.tt-niveau-uitleg dd { margin: 0; color: var(--tt-muted); }

/* Een afgelopen dag, gebundeld: kop met hoe het ging, open voor de details per speler */
.tt-dagbundel { background: var(--tt-card); border: 1px solid var(--tt-line); border-radius: var(--tt-r-lg); margin-bottom: 10px; overflow: hidden; }
.tt-dagbundel > summary { display: flex; align-items: center; gap: 10px; padding: 14px; min-height: 56px; cursor: pointer; list-style: none; }
.tt-dagbundel > summary::-webkit-details-marker { display: none; }
.tt-dagbundel > summary .mid { flex: 1; min-width: 0; }
.tt-dagbundel > summary .mid > b { display: block; font-family: var(--tt-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tt-dagbundel > summary .mid > span { display: block; font-size: 13.5px; color: var(--tt-muted); margin-top: 2px; }
.tt-dagbundel__nieuw { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--tt-red-soft, var(--tt-neutral-soft)); color: var(--tt-red, var(--tt-ink)); white-space: nowrap; }
.tt-dagbundel__chev { width: 18px; height: 18px; color: var(--tt-muted); flex: 0 0 auto; transition: transform var(--tt-dur-1) var(--tt-ease); }
.tt-dagbundel[open] .tt-dagbundel__chev { transform: rotate(180deg); }
.tt-dagbundel > summary:focus-visible { outline: 2px solid var(--tt-ink); outline-offset: -2px; border-radius: var(--tt-r-lg); }
.tt-dagbundel__samen { display: block; margin: 0 14px 12px; padding: 10px 12px; border-radius: 12px; background: var(--tt-raise); color: var(--tt-ink); text-decoration: none; }
.tt-dagbundel__samen b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); }
.tt-dagbundel__samen span { display: block; font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.tt-dagbundel__speler { border-top: 1px solid var(--tt-line); padding: 10px 14px 4px; }
.tt-dagbundel__wie { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.tt-dagbundel__wie .tt-av { width: 28px; height: 28px; font-size: 11px; flex: 0 0 auto; }
.tt-dagbundel__wie b { font-size: 15.5px; }
.tt-dagbundel__wie small { margin-left: auto; font-size: 12.5px; color: var(--tt-muted); white-space: nowrap; }
.tt-dagbundel__medaille.tt-melding__ic { width: 24px; height: 24px; }
.tt-dagbundel__medaille .ic { width: 14px; height: 14px; }
.tt-meldingen--kort { border: 0; border-radius: 0; background: none; margin: 0; }
.tt-meldingen--kort .tt-melding { padding: 9px 0; }
.tt-meldingen--kort .tt-melding__ic { width: 30px; height: 30px; }
.tt-meldingen--kort .tt-melding__ic .ic { width: 15px; height: 15px; }
.tt-meldingen--kort .tt-melding .mid > b { font-size: 14.5px; }

/* ---------- Meldingen/profiel: profiel per situatie, je kind (review 12-10) ---------- */
/* Links naar de onderdelen: één rij die zijwaarts schuift (vaste hoogte, geen verspringen) */
.tt-account__nav { min-height: 40px; margin-bottom: 4px; }
.tt-account__nav .tt-chip { font-size: 13.5px; padding: 6px 12px; }
/* Je kind: per gevolgde jeugdspeler een vinkje, en bij je kind wat erbij hoort */
.tt-kinderen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tt-kind { border: 1px solid var(--tt-line); border-radius: 14px; background: var(--tt-card); overflow: hidden; }
.tt-kind.is-kind { border-color: var(--tt-ink); box-shadow: inset 0 0 0 1px var(--tt-ink); }
.tt-kind__keuze { margin: 0; }
.tt-kind__keuze label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; margin: 0; cursor: pointer; }
.tt-kind__keuze input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--tt-ink); cursor: pointer; }
.tt-kind__keuze .tt-av { width: 32px; height: 32px; font-size: 12px; flex: 0 0 auto; }
.tt-kind__keuze .mid { flex: 1; min-width: 0; }
.tt-kind__keuze .mid b { display: block; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.tt-kind__keuze .mid small { display: block; font-size: 13px; color: var(--tt-muted); }
.tt-kind__label { font-size: 12.5px; font-weight: 800; color: var(--tt-muted); white-space: nowrap; }
.tt-kind.is-kind .tt-kind__label { color: var(--tt-ink); }
.tt-kind__meer { display: grid; gap: 12px; padding: 0 12px 12px; }
.tt-kind__regel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--tt-raise); }
.tt-kind__regel > .ic { width: 18px; height: 18px; color: var(--tt-muted); flex: 0 0 auto; }
.tt-kind__regel .tt-av { width: 32px; height: 32px; font-size: 12px; flex: 0 0 auto; }
.tt-kind__regel .mid { flex: 1; min-width: 0; }
.tt-kind__regel .mid small { display: block; font-size: 13px; color: var(--tt-muted); }
.tt-kind > .tt-kind__regel { background: none; }
.tt-kind__koppel .form-label { font-size: 13.5px; color: var(--tt-muted); }
.tt-kind__coach b { display: block; font-size: 14.5px; }
.tt-kind__coach small { display: block; font-size: 13px; color: var(--tt-muted); margin-bottom: 8px; }
/* Meldingen op het profiel: in één regel wat je krijgt */
.tt-profielmeld { margin: 0 0 12px; }
.tt-profielmeld b { display: block; font-size: 15px; }
.tt-profielmeld span { display: block; font-size: 13.5px; color: var(--tt-muted); }

/* ---------- Vandaag: gewone dag (review 12-10) ---------- */
/* Er wordt nu niet gespeeld: het weekend, nieuwe stempels, wat komt, je club en je week */
.tt-gewoon__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--tt-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--tt-ink); margin-bottom: 4px; }
.tt-gewoon__kop .ic { width: 20px; height: 20px; color: var(--tt-muted); }
.tt-gewoon .tt-row.tt-gewoon__rij { border: 0; border-top: 1px solid var(--tt-line); border-radius: 0; background: none; margin: 0 -16px; padding: 12px 16px; }
.tt-gewoon .tt-row.tt-gewoon__rij:first-of-type { border-top: 0; }
.tt-gewoon__rij .mid > span { white-space: normal; }
.tt-gewoon__stempel { color: var(--tt-green) !important; font-weight: 700; }
a.tt-gewoon { display: block; color: var(--tt-ink); text-decoration: none; }
a.tt-gewoon:hover { border-color: var(--tt-line-strong); }
.tt-gewoon__item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--tt-line); }
.tt-gewoon__item:first-of-type { border-top: 0; }
.tt-gewoon__item b { display: block; font-size: 15.5px; line-height: 1.25; }
.tt-gewoon__item small { display: block; font-size: 13px; color: var(--tt-muted); }
.tt-gewoon--morgen { padding: 0; overflow: hidden; }
.tt-gewoon__morgen { display: grid; gap: 2px; padding: 14px 16px; color: var(--tt-ink); text-decoration: none; }
.tt-gewoon__dag { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-blue); }
.tt-gewoon__morgen b { font-family: var(--tt-display); font-size: 20px; letter-spacing: -.02em; line-height: 1.15; }
.tt-gewoon__morgen > span:last-child { font-size: 14px; color: var(--tt-muted); }
.tt-gewoon__doel { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--tt-line); font-weight: 700; font-size: 14.5px; color: var(--tt-ink); text-decoration: none; min-height: 44px; }
.tt-gewoon__doel .ic { width: 18px; height: 18px; color: var(--tt-blue); }
.tt-gewoon__datum { flex: 0 0 auto; width: 44px; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--tt-muted); line-height: 1.1; }
.tt-gewoon__datum b { display: block; font-family: var(--tt-display); font-size: 22px; color: var(--tt-ink); letter-spacing: -.02em; }
.tt-gewoon__groep .tt-plist__kop { padding-top: 10px; }
.tt-gewoon__week { margin-top: 16px; }
.tt-gewoon__ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-raise); color: var(--tt-ink); flex: 0 0 auto; }
.tt-gewoon__ic .ic { width: 19px; height: 19px; }
/* Zo begin je (nog niemand gevolgd) */
.tt-start__stappen { list-style: none; counter-reset: stap; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.tt-start__stappen li { counter-increment: stap; display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; align-items: start; }
.tt-start__stappen li::before { content: counter(stap); grid-row: span 3; width: 32px; height: 32px; border-radius: 50%; background: var(--tt-ink); color: var(--tt-paper); display: grid; place-items: center; font-family: var(--tt-display); font-weight: 800; }
.tt-start__stappen b { font-size: 16px; }
.tt-start__stappen span { font-size: 14px; color: var(--tt-muted); }
.tt-start__stappen .btn { justify-self: start; margin-top: 6px; }
/* Zo ging vandaag: eerst de medailles, dan in woorden */
.tt-dagsom__medailles--boven { margin: 0 0 10px; }
.tt-dagsom__zin { font-size: 18px; margin: 0; color: var(--tt-ink); }
.tt-dagsom__zin b { font-family: var(--tt-display); font-size: 22px; letter-spacing: -.02em; color: var(--tt-green); }
.tt-dagsom__bij { font-size: 14px; color: var(--tt-muted); margin: 4px 0 0; }
.tt-gewoon__meer > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; margin: 0 -16px -14px; border-top: 1px solid var(--tt-line); font-size: 14px; font-weight: 700; color: var(--tt-ink-2); cursor: pointer; }
.tt-gewoon__meer > summary::-webkit-details-marker { display: none; }
.tt-gewoon__meer[open] > summary { display: none; }
.tt-gewoon__meer[open] .tt-row.tt-gewoon__rij:first-of-type { border-top: 1px solid var(--tt-line); }
.tt-gewoon__datum small { display: block; font-size: 10.5px; }
.tt-gewoon--leeg { display: grid; gap: 4px; }
.tt-gewoon--leeg b { font-family: var(--tt-display); font-size: 18px; letter-spacing: -.02em; }
.tt-gewoon--leeg span { font-size: 14px; color: var(--tt-muted); }
.tt-gewoon--leeg .tt-link { font-size: 14px; font-weight: 700; justify-self: start; }
.tt-gewoon__lijst .tt-row .mid > span { white-space: normal; }
.tt-gewoon__morgen + .tt-gewoon__morgen { border-top: 1px solid var(--tt-line); }
.tt-gewoon__morgen--meer { font-size: 14px; color: var(--tt-muted); padding-top: 10px; padding-bottom: 12px; }
.tc-p__rating { margin-left: 6px; font-size: 12px; }