/* Gestaltung der App. Farben und Masse aus tokens.css. */

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

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

body
{
   margin: 0;
   min-height: 100vh;
   min-height: 100dvh;
   font: var(--fs)/1.45 var(--font);
   background: var(--c-bg);
   color: var(--c-text);
   -webkit-tap-highlight-color: transparent;
   overscroll-behavior-y: none;
}

[hidden]
{
   display: none !important;
}

button,
input,
select,
textarea
{
   font: inherit;
   color: inherit;
}

a
{
   color: var(--c-primary);
}

.sr-only,
.skip:not(:focus)
{
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.skip
{
   position: fixed;
   z-index: 50;
   top: 8px;
   left: 8px;
   background: var(--c-surface);
   padding: 8px 12px;
   border-radius: 8px;
}

:focus-visible
{
   outline: 3px solid var(--c-gold);
   outline-offset: 2px;
}

/* ---------- Kopf ---------- */

.app-header
{
   position: sticky;
   top: 0;
   z-index: 20;
   display: flex;
   align-items: center;
   gap: 4px;
   min-height: calc(var(--header-h) + env(safe-area-inset-top));
   padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
   background: linear-gradient(160deg, var(--c-header-1), var(--c-header-2));
   color: var(--c-header-text);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
   overflow: hidden;
}

.app-header::before
{
   content: "";
   position: absolute;
   inset: 0;
   background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0 25%, transparent 0 50%) 0 0 / 26px 26px;
   -webkit-mask-image: linear-gradient(to right, #000, transparent 70%);
   mask-image: linear-gradient(to right, #000, transparent 70%);
   pointer-events: none;
}

.app-header > *
{
   position: relative;
}

.hdr-logo
{
   display: flex;
   align-items: center;
   flex: 0 1 auto;
   min-width: 0;
   min-height: var(--touch);
   padding: 0 6px;
}

.hdr-logo img
{
   height: auto;
   max-height: 32px;
   width: auto;
   max-width: 100%;
   min-width: 0;
   display: block;
}

.season
{
   font-size: 20px;
   margin-left: 6px;
}

.season-fasching::after { content: "🎭"; }
.season-xmas::after { content: "🎄"; }
.season-advent::after { content: "🕯️"; }
.season-winter::after { content: "❄️"; }
.season-newyear::after { content: "🎆"; }
.season-eastern::after { content: "🐣"; }
.season-aids::after { content: "🎗️"; }

.hdr-title
{
   margin: 0;
   font-size: var(--fs-l);
   font-weight: 650;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
}

.hdr-space
{
   flex: 1;
}

.hdr-btn
{
   position: relative;
   display: grid;
   place-items: center;
   flex: none;
   width: var(--touch);
   height: var(--touch);
   border: 0;
   border-radius: 50%;
   background: none;
   color: inherit;
   cursor: pointer;
}

.hdr-btn svg
{
   width: 24px;
   height: 24px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.hdr-btn .badge
{
   top: 4px;
   right: 2px;
}

/* ---------- Inhalt ---------- */

.app-main:focus
{
   outline: none;
}

.app-main
{
   max-width: 760px;
   margin: 0 auto;
   padding: 12px max(12px, env(safe-area-inset-right)) calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
   outline: none;
}

.is-offline .app-main::before
{
   content: "⚡ offline";
   display: block;
   text-align: center;
   font-size: var(--fs-s);
   color: var(--c-warning);
   margin-bottom: 8px;
}

.hello
{
   margin: 4px 4px 12px;
   font-size: var(--fs-l);
}

.card
{
   background: var(--c-surface);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   margin: 0 0 12px;
   padding: 4px 12px;
   overflow: hidden;
}

.card-accent
{
   border-left: 4px solid var(--c-gold);
}

.card-title,
.section-title
{
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   padding: 10px 0 6px;
   font-size: 16px;
   font-weight: 700;
}

.section-title
{
   padding: 4px 4px 10px;
}

.count
{
   font-style: normal;
   font-size: 12px;
   font-weight: 700;
   min-width: 22px;
   padding: 1px 7px;
   border-radius: 11px;
   text-align: center;
   background: var(--c-primary-tint);
   color: var(--c-primary);
}

.count-gold
{
   background: var(--c-gold);
   color: #1a1300;
}

.pad
{
   padding: 8px 4px;
   margin: 0;
}

.muted
{
   color: var(--c-text-muted);
}

.small
{
   font-size: var(--fs-s);
}

.center
{
   text-align: center;
}

/* ---------- Zeilen ---------- */

.row
{
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 56px;
   padding: 6px 0;
   color: inherit;
   text-decoration: none;
   border-top: 1px solid var(--c-border);
}

.card.row
{
   /* Karte, die selbst eine Zeile ist (Startseite: Nachrichten, Spieler): Innenabstand wie andere Karten */
   padding: 6px 12px;
   border-top: 0;
}

.card > .row:first-child,
.card-title + .row,
.card-title + .challenge .row,
.list > .row:first-child
{
   border-top: 0;
}

a.row:active,
.row-btn:active
{
   background: var(--c-surface-2);
}

.row-btn
{
   width: 100%;
   border: 0;
   border-top: 1px solid var(--c-border);
   background: none;
   text-align: left;
   cursor: pointer;
}

.card > .row-btn:first-child
{
   border-top: 0;
}

.row-btn.danger
{
   color: var(--c-danger);
   font-weight: 600;
}

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

.row-main b
{
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.side
{
   display: inline-block;
   width: 0.7em;
   height: 0.7em;
   margin-right: 0.35em;
   border-radius: 50%;
   border: 1px solid var(--c-text-muted);
   vertical-align: 0.05em;
}

.side-white
{
   background: #fff;
}

.side-black
{
   background: #1b1b1b;
}

.row-main small
{
   color: var(--c-text-muted);
   font-size: var(--fs-s);
   overflow-wrap: anywhere;
}

.row-end
{
   flex: none;
   display: flex;
   align-items: center;
}

.chev::after
{
   content: "›";
   font-size: 24px;
   line-height: 1;
   color: var(--c-text-muted);
}

.ext
{
   color: var(--c-text-muted);
}

.ava
{
   flex: none;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--c-primary-tint);
   color: var(--c-primary);
   font-weight: 700;
   text-transform: uppercase;
}

.ava-trophy
{
   border-radius: 10px;
   font-size: 18px;
   text-transform: none;
}

.mini-board
{
   flex: none;
   width: 48px;
   height: 48px;
   border-radius: 4px;
   box-shadow: 0 0 0 1px var(--c-border);
}

.mini-board .mb-l
{
   fill: var(--board-light);
}

.mini-board .mb-d
{
   fill: var(--board-dark);
}

[data-brett="holz"] .mini-board .mb-l
{
   fill: var(--board-wood-light);
}

[data-brett="holz"] .mini-board .mb-d
{
   fill: var(--board-wood-dark);
}

.chip
{
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   padding: 2px 9px;
   border-radius: 11px;
   background: var(--c-surface-2);
   color: var(--c-text-muted);
   white-space: nowrap;
}

.chip-turn
{
   background: var(--c-gold);
   color: #1a1300;
}

.chip-won
{
   background: color-mix(in srgb, var(--c-success) 10%, transparent);
   color: var(--c-success);
}

.chip-lost
{
   background: color-mix(in srgb, var(--c-danger) 9%, transparent); /* Kontrast >= 4.5:1 fuer die kleine Schrift */
   color: var(--c-danger);
}

.due-soon
{
   color: var(--c-warning);
   font-weight: 600;
}

/* ---------- Knoepfe, Formulare ---------- */

.btn
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   min-height: var(--touch);
   padding: 0 18px;
   border: 0;
   border-radius: 10px;
   background: var(--c-button);
   color: #fff;
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;
   touch-action: manipulation;
}

.btn:active
{
   transform: scale(0.98);
}

.btn[disabled]
{
   opacity: 0.5;
   cursor: default;
}

.btn-secondary
{
   background: var(--c-surface-2);
   color: var(--c-primary);
}

.btn-ghost
{
   background: none;
   color: var(--c-primary);
   padding: 0 10px;
}

.btn-danger
{
   background: var(--c-danger) !important;
}

.btn-danger-text
{
   color: var(--c-danger);
}

.btn-small
{
   min-height: var(--touch);
   padding: 0 14px;
   font-size: 14px;
}

.btn-wide
{
   display: flex;
   width: 100%;
   margin: 4px 0 12px;
}

.link
{
   background: none;
   border: 0;
   padding: 0;
   color: var(--c-primary);
   text-decoration: underline;
   cursor: pointer;
}

.ic
{
   width: 22px;
   height: 22px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.9;
   stroke-linecap: round;
   stroke-linejoin: round;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea
{
   width: 100%;
   min-height: var(--touch);
   padding: 8px 12px;
   border: 1px solid var(--c-border);
   border-radius: 10px;
   background: var(--c-surface);
   font-size: 16px; /* verhindert Zoom auf iOS */
}

input[aria-invalid="true"]
{
   border-color: var(--c-danger);
}

.search
{
   display: flex;
   gap: 8px;
   margin-bottom: 12px;
}

.segment
{
   display: flex;
   gap: 2px;
   padding: 3px;
   margin: 0 0 12px;
   border-radius: 11px;
   background: var(--c-surface-2);
   overflow-x: auto;
   scrollbar-width: none;
}

.segment button
{
   flex: 1 0 auto;
   min-height: var(--touch);
   padding: 0 10px;
   border: 0;
   border-radius: 8px;
   background: none;
   color: var(--c-text-muted);
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   cursor: pointer;
}

.segment button[aria-selected="true"]
{
   background: var(--c-surface);
   color: var(--c-text);
   box-shadow: var(--shadow);
}

.chips-scroll
{
   display: flex;
   gap: 8px;
   overflow-x: auto;
   margin-bottom: 12px;
}

.chip-btn
{
   flex: none;
   display: inline-flex;
   align-items: center;
   min-height: var(--touch);
   padding: 0 16px;
   border-radius: 18px;
   background: var(--c-surface);
   color: var(--c-text);
   text-decoration: none;
   box-shadow: var(--shadow);
}

.chip-btn[aria-selected="true"]
{
   background: var(--c-button);
   color: #fff;
}

/* ---------- Leer, Laden, Fehler, Meldungen ---------- */

.empty
{
   text-align: center;
   padding: 32px 16px;
   color: var(--c-text-muted);
}

.empty-error
{
   color: var(--c-danger);
}

/* Auswege unter einer Fehlermeldung: Erneut anmelden / Erneut versuchen / Zur Startseite */
.empty .buttons
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin-top: 12px;
}

.empty-error .muted
{
   color: var(--c-text-muted);
}

.spinner
{
   width: 32px;
   height: 32px;
   margin: 0 auto 8px;
   border: 3px solid var(--c-border);
   border-top-color: var(--c-primary);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
}

@keyframes spin
{
   to
   {
      transform: rotate(360deg);
   }
}

#toasts
{
   position: fixed;
   z-index: 60;
   left: 12px;
   right: 12px;
   bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   pointer-events: none;
}

.toast
{
   display: flex;
   align-items: center;
   gap: 12px;
   max-width: 520px;
   padding: 12px 16px;
   border-radius: 12px;
   background: #1c2433;
   color: #fff;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
   pointer-events: auto;
   animation: up 0.2s ease-out;
}

.toast-error
{
   background: var(--c-danger);
}

.toast button
{
   border: 0;
   background: none;
   color: var(--c-gold-light);
   font-weight: 700;
   min-height: var(--touch);
   cursor: pointer;
}

@keyframes up
{
   from
   {
      transform: translateY(12px);
      opacity: 0;
   }
}

.dialog
{
   border: 0;
   border-radius: var(--radius);
   padding: 20px;
   max-width: min(92vw, 420px);
   background: var(--c-surface);
   color: var(--c-text);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.dialog::backdrop
{
   background: rgba(10, 20, 40, 0.5);
}

.dialog-buttons
{
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 8px;
}

.dialog-title
{
   margin: 0 0 12px;
   font-size: 18px;
}

.dialog-wide
{
   width: min(92vw, 480px);
   max-width: min(92vw, 480px);
   max-height: 90vh;
   overflow-y: auto;
}

.pay-order dd
{
   overflow-wrap: anywhere;
}

/* deutlicher Hinweis in der Bestellbestaetigung (Abo ersetzt laufende Mitgliedschaft) */
.pay-warn
{
   margin: 0 0 12px;
   padding: 8px 10px;
   border-left: 4px solid var(--c-warning);
   border-radius: 6px;
   background: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface));
}

/* ruhiger Hinweis (Abo beginnt erst zum Ende der laufenden Mitgliedschaft) */
.pay-note
{
   margin: 0 0 12px;
   padding: 8px 10px;
   border-left: 4px solid var(--c-primary);
   border-radius: 6px;
   background: var(--c-primary-tint);
}

.banner
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 10px 12px;
   margin-bottom: 12px;
   border-radius: var(--radius);
   background: color-mix(in srgb, var(--c-gold) 22%, var(--c-surface));
   font-weight: 600;
}

/* ---------- Startseite ---------- */

.welcome
{
   text-align: center;
   padding: 20px 16px;
}

.welcome img
{
   border-radius: 16px;
}

.welcome h2
{
   margin: 8px 0;
}

.news
{
   border-top: 1px solid var(--c-border);
}

.card-title + .news
{
   border-top: 0;
}

.news-head
{
   display: flex;
   flex-direction: column;
   gap: 2px;
   width: 100%;
   min-height: var(--touch);
   padding: 10px 0;
   border: 0;
   background: none;
   text-align: left;
   cursor: pointer;
}

.news-head small
{
   color: var(--c-text-muted);
}

.news-teaser
{
   color: var(--c-text-muted);
   font-size: 14px;
   /* hoechstens 3 Zeilen, damit mehrere Wochenberichte untereinander ueberschaubar bleiben */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   overflow: hidden;
}

.news-teaser[hidden]
{
   display: none;
}

.news .new
{
   color: var(--c-danger);
}

/* Turnierstart und Ausschreibung: Link in die App, Kennzeichen mit dem Symbol des Ziel-Reiters */
a.news-head
{
   color: inherit;
   text-decoration: none;
}

a.news-head b
{
   color: var(--c-primary);
}

.news-tag
{
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-weight: 600;
   color: var(--c-primary);
}

.news-tag .ti
{
   width: 16px;
   height: 16px;
}

.news-body
{
   padding: 0 0 12px;
   font-size: 14.5px;
   overflow-wrap: anywhere;
}

.news-body img
{
   max-width: 100%;
   height: auto;
   vertical-align: middle;
}

/* ---------- Partie ---------- */

.game
{
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
}

@media (min-width: 720px)
{
   .app-main:has(.game)
   {
      max-width: 1100px;
   }

   .game
   {
      grid-template-columns: minmax(320px, 560px) 1fr;
      align-items: start;
   }
}

.game-board
{
   margin: 0 -12px;
}

@media (min-width: 560px)
{
   .game-board
   {
      margin: 0;
   }
}

.player
{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 8px;
   min-height: 40px;
   padding: 0 12px;
}

.player .chip
{
   margin-left: auto;
}

.stone
{
   flex: none;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 1.5px solid var(--c-text-muted);
}

.stone-white
{
   background: #fff;
}

.stone-black
{
   background: #222;
}

.status
{
   margin: 0 0 12px;
   font-weight: 600;
}

.status-turn
{
   color: var(--c-turn-text); /* hell und dunkel (auch dunkel per Systemeinstellung) mit ausreichendem Kontrast */
}

@media (prefers-color-scheme: dark)
{
   :root:not([data-theme="light"]) .status-turn
   {
      color: var(--c-gold);
   }
}

.confirm
{
   background: var(--c-surface);
   border: 2px solid var(--c-gold);
   border-radius: var(--radius);
   padding: 12px;
   margin-bottom: 12px;
}

.confirm-q
{
   margin: 0 0 8px;
   font-size: var(--fs-l);
   font-weight: 700;
}

.check
{
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: var(--touch);
}

.check input
{
   width: 22px;
   height: 22px;
   accent-color: var(--c-blue);
}

.msg summary
{
   min-height: var(--touch);
   display: flex;
   align-items: center;
   color: var(--c-primary);
   cursor: pointer;
}

.confirm-buttons
{
   display: flex;
   gap: 8px;
   margin-top: 8px;
}

.confirm-buttons .btn
{
   flex: 1;
}

.move-input
{
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 8px;
}

.move-input input
{
   flex: 1;
   min-width: 0;
}

.input-error
{
   flex-basis: 100%;
   margin: 0;
   font-size: var(--fs-s);
   color: var(--c-danger);
}

.input-error:empty
{
   display: none;
}

.actions
{
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin-bottom: 12px;
}

.actions .btn
{
   font-size: 14px;
}

.replay .btn
{
   min-width: var(--touch);
}

.replay
{
   display: flex;
   color: var(--c-primary);
   justify-content: center;
   gap: 4px;
}

.moves
{
   list-style: none;
   margin: 0;
   padding: 0 0 8px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   max-height: 280px;
   overflow-y: auto;
   font-variant-numeric: tabular-nums;
}

.moves li
{
   display: grid;
   grid-template-columns: 34px 1fr 1fr;
   align-items: center;
}

.mv-no
{
   color: var(--c-text-muted);
   font-size: 13px;
}

.mv
{
   min-height: var(--touch);
   border: 0;
   border-radius: 6px;
   background: none;
   text-align: left;
   padding: 0 6px;
   font-size: 15px;
   cursor: pointer;
}

.mv[disabled]
{
   cursor: default;
   color: inherit;
}

.mv-cur
{
   background: var(--c-primary-tint);
   color: var(--c-primary);
   font-weight: 700;
}

/* ---------- Eventualzuege ---------- */

.ezf-note
{
   margin: 0 0 8px;
   font-size: 14.5px;
}

.ezf-seq
{
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   list-style: none;
   margin: 0 0 8px;
   padding: 0;
   counter-reset: none;
}

.ezf-seq li,
.ezf-moves span
{
   padding: 3px 9px;
   border-radius: 12px;
   font-weight: 600;
}

.ezf-seq .own,
.ezf-moves .own
{
   background: var(--c-primary-tint);
   color: var(--c-primary);
}

.ezf-seq .opp,
.ezf-moves .opp
{
   background: var(--c-surface-2);
   color: var(--c-text-muted);
   font-style: italic;
}

.ezf-next
{
   margin: 0 0 4px;
   font-weight: 700;
   color: var(--c-gold-dark);
}

.ezf-edit .confirm-buttons
{
   flex-wrap: wrap;
}

.ezf-item
{
   padding: 8px 0 12px;
   border-top: 1px solid var(--c-border);
}

.card-title + .ezf-item
{
   border-top: 0;
}

.ezf-moves
{
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   margin: 6px 0 8px;
}

.ezf-item .buttons
{
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

/* ---------- Brett ---------- */

rc-board
{
   position: relative;
   display: block;
   width: 100%;
   max-width: 560px;
   margin: 0 auto;
   aspect-ratio: 1;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
}

rc-board.is-interactive
{
   touch-action: none; /* Ziehen statt Scrollen */
}

.board-grid
{
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-template-rows: repeat(8, 1fr);
   width: 100%;
   height: 100%;
   overflow: hidden;
}

@media (min-width: 560px)
{
   .board-grid
   {
      border-radius: 6px;
   }
}

.sq
{
   position: relative;
}

.sq-l
{
   background: var(--board-light);
}

.sq-d
{
   background: var(--board-dark);
}

[data-brett="holz"] .sq-l
{
   background: var(--board-wood-light);
}

[data-brett="holz"] .sq-d
{
   background: var(--board-wood-dark);
}

.sq-last::before,
.sq-mark::before,
.sq-sel::before,
.sq-over::before,
.sq-check::before
{
   content: "";
   position: absolute;
   inset: 0;
}

.sq-last::before
{
   background: var(--board-last-move);
}

.sq-mark::before
{
   background: var(--board-mark);
   box-shadow: inset 0 0 0 3px var(--board-mark-ring);
}

.sq-sel::before
{
   background: var(--board-select);
}

.sq-over::before
{
   box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.75);
}

.sq-check::before
{
   background: radial-gradient(circle, rgba(220, 40, 40, 0.8) 0, rgba(220, 40, 40, 0.3) 55%, transparent 75%);
}

.sq-dot::after
{
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 30%;
   height: 30%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: rgba(20, 40, 80, 0.35);
}

.sq-cap::after
{
   content: "";
   position: absolute;
   inset: 4%;
   border-radius: 50%;
   box-shadow: inset 0 0 0 4px rgba(20, 40, 80, 0.4);
}

.sq-cursor
{
   outline: 3px solid var(--c-gold);
   outline-offset: -3px;
   z-index: 1;
}

.pc
{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   pointer-events: none;
}

.is-interactive .pc
{
   cursor: grab;
}

.co
{
   position: absolute;
   z-index: 1;
   font-size: 10px;
   font-weight: 700;
   line-height: 1;
   opacity: 0.75;
   pointer-events: none;
}

.sq-l .co
{
   color: var(--board-dark);
}

.sq-d .co
{
   color: var(--board-light);
}

[data-brett="holz"] .sq-l .co
{
   color: var(--board-wood-dark);
}

[data-brett="holz"] .sq-d .co
{
   color: var(--board-wood-light);
}

.co-r
{
   top: 3px;
   left: 3px;
}

.co-f
{
   right: 3px;
   bottom: 3px;
}

.board-ghost
{
   position: absolute;
   left: 0;
   top: 0;
   z-index: 10;
   pointer-events: none;
   filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}

.board-ghost .pc
{
   position: static;
}

.promo
{
   position: absolute;
   inset: 0;
   z-index: 20;
   display: grid;
   place-items: center;
   background: rgba(10, 20, 40, 0.55);
}

.promo-box
{
   background: var(--c-surface);
   border-radius: var(--radius);
   padding: 12px;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.promo-box p
{
   margin: 0 0 8px;
   font-weight: 700;
}

.promo-pieces
{
   display: flex;
   gap: 6px;
   margin-bottom: 8px;
}

.promo-pieces button
{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 68px;
   padding: 6px 2px;
   border: 2px solid var(--c-border);
   border-radius: 10px;
   background: var(--board-light);
   color: #1c2433;
   font-size: 11px;
   cursor: pointer;
}

.promo-pieces button:focus-visible,
.promo-pieces button:hover
{
   border-color: var(--c-gold);
}

.promo-pc
{
   width: 52px;
   height: 52px;
}

/* ---------- Turniere ---------- */

.tour-head h2
{
   margin: 8px 0 4px;
   font-size: 18px;
}

.winners
{
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 0 0 8px;
   font-weight: 600;
}

.medal
{
   display: inline-grid;
   place-items: center;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   font-style: normal;
   font-size: 12px;
   font-weight: 800;
   color: #3a2a00;
   background: #e9e9e9;
   vertical-align: -4px;
}

.medal-1
{
   background: linear-gradient(160deg, #fff1a8, #e9a91c);
}

.medal-2
{
   background: linear-gradient(160deg, #f4f6f9, #aeb6c2);
}

.medal-3
{
   background: linear-gradient(160deg, #f6d2b0, #b97c4a);
}

.progress
{
   width: 44px;
   height: 6px;
   border-radius: 3px;
   background: linear-gradient(to right, var(--c-gold) var(--p), var(--c-surface-2) var(--p));
}

.table-card
{
   padding: 0;
   overflow-x: auto; /* bei grossem Zoom scrollt die Tabelle in der Karte, nicht die Seite */
}

.table-card > .st,
.table-card > .st-detail
{
   min-width: 300px;
}

.st
{
   display: grid;
   grid-template-columns: 34px 1fr 48px 62px 40px;
   align-items: center;
   gap: 4px;
   width: 100%;
   min-height: 46px;
   padding: 0 12px;
   border: 0;
   border-top: 1px solid var(--c-border);
   background: none;
   text-align: left;
   font-variant-numeric: tabular-nums;
   cursor: pointer;
}

.st-head
{
   min-height: 36px;
   border-top: 0;
   font-size: 12px;
   font-weight: 700;
   color: var(--c-text-muted);
   cursor: default;
}

.st-name
{
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.st small
{
   color: var(--c-text-muted);
}

.st-detail
{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 4px;
   padding: 4px 12px 12px 46px;
   background: var(--c-surface-2);
}

.res
{
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: var(--touch);
   color: inherit;
   text-decoration: none;
}

.res b
{
   margin-left: auto;
   padding-right: 8px;
}

.res .fresh
{
   color: var(--c-gold-dark);
}

/* ---------- Spielen ---------- */

.challenge
{
   border-top: 1px solid var(--c-border);
   padding-bottom: 10px;
}

.card-title + .challenge
{
   border-top: 0;
}

.challenge .row
{
   border-top: 0;
}

.quote
{
   font-style: italic;
   font-size: 14px;
   margin: 2px 0;
}

.challenge .buttons
{
   display: flex;
   gap: 8px;
   padding-left: 50px;
}

/* ---------- Einstellungen ---------- */

.settings fieldset
{
   min-width: 0; /* fieldset ist sonst mindestens so breit wie sein Inhalt */
   border: 0;
   padding: 4px 12px;
}

.settings legend
{
   float: left;
   width: 100%;
   padding: 12px 0 4px;
   font-weight: 700;
}

.opt
{
   clear: both;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   min-height: 50px;
   border-top: 1px solid var(--c-border);
   cursor: pointer;
}

legend + .opt
{
   border-top: 0;
}

.opt input[type="radio"],
.opt input[type="checkbox"]
{
   width: 22px;
   height: 22px;
   accent-color: var(--c-blue);
   flex: none;
}

/* ---------- Formulare ---------- */

.field
{
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 10px 0;
   border-top: 1px solid var(--c-border);
}

.card > .field:first-child,
.card > .opt:first-child
{
   border-top: 0;
}

.field > label,
.field > .label
{
   font-weight: 600;
   font-size: 14px;
}

.field select,
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.elo-row select
{
   min-height: var(--touch);
   padding: 8px 12px;
   border: 1px solid var(--c-border);
   border-radius: 10px;
   background: var(--c-surface);
   font-size: 16px;
}

.pair
{
   display: flex;
   align-items: center;
   gap: 8px;
}

.pair > .field
{
   flex: 1;
   min-width: 0;
   border-top: 0;
}

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

.radios
{
   display: flex;
   flex-wrap: wrap;
   gap: 4px 16px;
}

.radios label
{
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: var(--touch);
}

.radios input
{
   width: 22px;
   height: 22px;
   accent-color: var(--c-blue);
}

.form .input-error
{
   margin: 0 4px 8px;
   font-weight: 600;
}

.facts
{
   display: grid;
   grid-template-columns: fit-content(45%) 1fr; /* lange Bezeichnungen umbrechen statt den Wert zu quetschen */
   gap: 4px 12px;
   margin: 8px 0;
   font-size: 14.5px;
}

.facts dt
{
   color: var(--c-text-muted);
}

.facts dd
{
   margin: 0;
   font-weight: 600;
   min-width: 0;
   overflow-wrap: break-word;
   hyphens: auto;
}

@media (max-width: 300px)
{
   .facts
   {
      grid-template-columns: minmax(0, 1fr);
   }
}

.reg
{
   padding: 12px;
}

.reg .ok
{
   color: var(--c-success);
   font-weight: 700;
   margin: 0 0 8px;
}

.reasons
{
   margin: 4px 0 8px;
   padding-left: 20px;
   font-size: 14.5px;
}

.quota
{
   font-weight: 700;
   color: var(--c-primary);
}

/* ---------- Nachrichten ---------- */

.msg-tools
{
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 12px;
}

.msg-tools .btn
{
   flex: 1;
}

.msg-item
{
   border-top: 1px solid var(--c-border);
}

.list > .msg-item:first-child
{
   border-top: 0;
}

.msg-item .row
{
   border-top: 0;
}

.msg-item.unread b
{
   font-weight: 800;
}

.msg-item:not(.unread) b
{
   font-weight: 500;
}

.dot
{
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--c-gold);
}

.msg-body
{
   padding: 0 0 12px 50px;
}

.msg-text
{
   margin: 0 0 10px;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
}

.msg-body .buttons
{
   display: flex;
   gap: 8px;
}

/* ---------- Tabbar ---------- */

.tabbar
{
   position: fixed;
   z-index: 20;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   justify-content: center;
   padding: 2px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
   background: var(--c-tabbar);
   border-top: 1px solid var(--c-border);
}

.tab
{
   position: relative;
   flex: 1;
   max-width: 120px;
   min-width: 0;
   min-height: var(--tabbar-h);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
   color: var(--c-tab);
   font-size: 11px;
   font-weight: 500;
   text-decoration: none;
}

.tab span
{
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.tab[aria-current]
{
   color: var(--c-tab-active);
   font-weight: 700;
}

.badge,
.tab .badge
{
   position: absolute;
   font-style: normal;
   font-size: 11px;
   font-weight: 700;
   line-height: 17px;
   min-width: 17px;
   padding: 0 4px;
   border-radius: 9px;
   background: var(--c-gold);
   color: #1a1300;
   text-align: center;
}

.tab .badge
{
   top: 4px;
   left: calc(50% + 5px);
}

.ti
{
   width: 26px;
   height: 26px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.ti .f
{
   fill: currentColor;
   fill-opacity: 0;
}

.ti .k,
.ti .e
{
   fill: currentColor;
   stroke: none;
}

.ti .g
{
   fill: none;
}

.tab[aria-current] .ti-linie .f,
.tab[aria-current] .ti-weich .f
{
   fill-opacity: 0.2;
}

.tab[aria-current] .ti-figuren .f
{
   fill-opacity: 1;
}

.tab[aria-current] .ti-figuren .e
{
   fill: var(--c-tabbar);
}

.tab[aria-current] .ti-weich .g
{
   fill: var(--c-gold);
   stroke: var(--c-gold);
}

@media (prefers-reduced-motion: reduce)
{
   *
   {
      animation: none !important;
      transition: none !important;
   }
}

/* fremde Links im Inhalt: oeffnen den Browser (Hinweis fuer Screenreader im Link selbst) */
.news-body a.ext-link::after
{
   content: " ↗";
   content: " ↗" / "";
}

/* Registrierung */
.reg-more
{
   margin: 8px 0;
}

.reg-more > summary
{
   list-style: none;
   display: flex;
   align-items: center;
   min-height: var(--touch);
   font-weight: 600;
   cursor: pointer;
}

.reg-terms
{
   align-items: flex-start;
   margin-top: 12px;
}

.reg-terms input
{
   flex: none;
   margin-top: 2px;
}

.turnstile
{
   min-height: 65px;
   margin: 12px 0 4px;
}

/* Rechtstexte */
.legal
{
   padding: 4px 16px 12px;
}

.legal h2,
.legal h3
{
   font-size: var(--fs-l, 1.1rem);
   margin: 18px 0 6px;
}

[data-nick-state].ok
{
   color: var(--c-success);
}

[data-nick-state]:empty
{
   display: none;
}

.reg-more > summary::before
{
   content: "";
   width: 8px;
   height: 8px;
   margin: 0 12px 0 4px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(-45deg);
   transition: transform 0.15s;
}

.reg-more[open] > summary::before
{
   transform: rotate(45deg);
}

.reg-more > summary::-webkit-details-marker
{
   display: none;
}

/* Mein Konto */
.card-text
{
   padding: 4px 16px 16px;
}

.card-subtitle
{
   margin: 14px 0 2px;
   font-size: 15px;
}

a.row.danger .row-main
{
   color: var(--c-danger);
}

/* Hilfe */
.help-item
{
   border-top: 1px solid var(--c-border);
}

.help-item > summary
{
   display: flex;
   align-items: center;
   min-height: var(--touch);
   padding: 6px 0;
   font-weight: 600;
   cursor: pointer;
   list-style: none;
}

.help-item > summary::-webkit-details-marker
{
   display: none;
}

.help-item > summary::after
{
   content: "";
   flex: none;
   width: 8px;
   height: 8px;
   margin: 0 6px 0 auto;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.15s;
}

.help-item[open] > summary::after
{
   transform: rotate(-135deg);
}

.help-body
{
   padding: 0 0 10px;
}

.help-body p
{
   margin: 0 0 8px;
}

/* Spielerseite */
.ava-big,
.ava-photo
{
   width: 56px;
   height: 56px;
   font-size: 24px;
   object-fit: cover;
}

.player-head .actions
{
   padding: 4px 0 12px;
}

.stat-row
{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
   gap: 8px;
   padding: 4px 0 10px;
}

.stat
{
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
}

.stat-label,
.stat small
{
   font-size: var(--fs-s);
   color: var(--c-text-muted);
}

.stat-value
{
   font-size: 22px;
   font-variant-numeric: tabular-nums;
}

.res-won
{
   color: var(--c-success);
}

.res-lost
{
   color: var(--c-danger);
}

.pad-x
{
   padding: 0 0 10px;
}

.player-desc
{
   white-space: pre-line;
   overflow-wrap: anywhere;
}

.chips
{
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.chart-controls
{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 6px;
   margin: 4px 0 8px;
}

.chip-small
{
   min-height: 36px;
   padding: 0 12px;
   border: 0;
   font: inherit;
   font-size: var(--fs-s);
   box-shadow: none;
   background: var(--c-bg);
}

/* Trefferflaeche 44 px trotz kleiner Optik */
.chip-small
{
   position: relative;
}

.chip-small::after
{
   content: "";
   position: absolute;
   inset: -4px 0;
}

.chip-small[aria-pressed="true"]
{
   background: var(--c-button);
   color: #fff;
}

.elo-chart
{
   margin: 0 0 10px;
}

.elo-chart svg
{
   display: block;
   overflow: visible;
}

.elo-chart .grid
{
   stroke: var(--c-border);
   stroke-width: 1;
}

.elo-chart .axis
{
   fill: var(--c-text-muted);
   font-size: 10px;
}

.elo-chart .line
{
   fill: none;
   stroke: var(--c-primary);
   stroke-width: 2;
   stroke-linejoin: round;
}

.elo-chart .dot
{
   fill: var(--c-primary);
}

.elo-chart figcaption
{
   margin-top: 4px;
}

a.player-link
{
   color: inherit;
   text-decoration: underline;
   text-decoration-color: var(--c-border);
   text-underline-offset: 3px;
   /* groessere Trefferflaeche ohne das Layout zu veraendern */
   display: inline-block;
   padding: 12px 0;
   margin: -12px 0;
}

.res-profile span
{
   color: var(--c-primary);
}

/* Spieler: Rangliste und Suche */
.pad-y
{
   padding: 4px 0 10px;
}

.rank-no
{
   flex: none;
   min-width: 36px;
   text-align: right;
   font-variant-numeric: tabular-nums;
   color: var(--c-text-muted);
   font-weight: 600;
}

.rank-end
{
   flex-direction: column;
   align-items: flex-end;
   gap: 0;
   flex: none;
}

.row-end .elo
{
   font-variant-numeric: tabular-nums;
}

.row-end small
{
   display: block;
   text-align: right;
}

.ptitle
{
   display: inline-block;
   padding: 0 4px;
   border-radius: 4px;
   background: var(--c-gold);
   color: #1a1a1a; /* Kontrast > 7:1 auf Gold, hell wie dunkel */
   font-size: 12px;
   vertical-align: 1px;
}

.row-me
{
   background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}

.search-form input
{
   width: 100%;
}

/* Testbrett: deutlich anders als die Partie (Banner, Brettfarben, Rahmen) */
.ana-banner
{
   display: flex;
   gap: 10px;
   align-items: flex-start;
   margin: 0 0 10px;
   padding: 10px 12px;
   border-radius: var(--radius);
   background: var(--c-ana-bg);
   color: var(--c-ana-text);
   border: 2px dashed var(--c-ana-border);
}

.ana-banner .ic
{
   flex: none;
   width: 22px;
   height: 22px;
}

.ana-board
{
   --board-light: #e6eedc;
   --board-dark: #7a9a6a;
   --board-wood-light: #e6eedc; /* auch beim Holzbrett gruen: Testbrett soll nie wie die Partie aussehen */
   --board-wood-dark: #7a9a6a;
   outline: 3px dashed var(--c-ana-border);
   outline-offset: 3px;
   border-radius: 4px;
}

.ana-line
{
   margin: 4px 0;
   padding-left: calc(var(--depth, 0) * 14px);
   line-height: 2.2;
}

.ana-no
{
   color: var(--c-text-muted);
   font-size: var(--fs-s);
   margin-right: 2px;
}

.mv-path
{
   text-decoration: underline;
   text-underline-offset: 3px;
}

/* RS-Titel als Medaille */
.medal
{
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 4px;
   border-radius: 50%;
   vertical-align: -1px;
   box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}

.medal-gold { background: #e3b11d; }
.medal-silber { background: #b9bec6; }
.medal-bronze { background: #b87333; }

.claim-note
{
   flex-basis: 100%;
   margin: 4px 0 0;
}

/* Bedenkzeit in den Spielerleisten und als Karte */
.clock-line
{
   display: flex;
   flex-wrap: wrap;
   gap: 4px 8px;
   flex-basis: 100%;
   font-size: var(--fs-s);
}

.clock
{
   color: var(--c-text-muted);
}

.clock-low
{
   color: var(--c-text);
   font-weight: 600;
}

.clock-over
{
   color: var(--c-danger);
   font-weight: 700;
}

.time-card > summary
{
   list-style: none;
   cursor: pointer;
   min-height: var(--touch);
}

.time-card > summary::-webkit-details-marker
{
   display: none;
}

.time-card > summary::after
{
   content: "";
   width: 8px;
   height: 8px;
   margin: 0 6px 0 auto;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
}

.time-card[open] > summary::after
{
   transform: rotate(-135deg);
}

/* Eroeffnungsbibliothek */
.eco
{
   flex: none;
   min-width: 34px;
   padding: 2px 6px;
   border-radius: 6px;
   background: var(--c-surface-2);
   color: var(--c-text);
   font-size: 12px;
   font-weight: 700;
   text-align: center;
}

.sort-field
{
   max-width: 260px;
}

/* Private Partie in Listen: kein Brett, kein Link */
.mini-private
{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 4px;
   background: var(--c-surface-2);
   font-size: 20px;
}

.ic-inline
{
   width: 16px;
   height: 16px;
   vertical-align: -3px;
}

.watchers
{
   white-space: nowrap;
}

/* Stellungen und Partien suchen */
.exp-line
{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 2px 4px;
   padding: 6px 0;
}

.exp-next
{
   width: 100%;
   border-collapse: collapse;
   margin: 4px 0 10px;
   font-variant-numeric: tabular-nums;
}

.exp-next th
{
   text-align: left;
   font-size: var(--fs-s);
   color: var(--c-text-muted);
   font-weight: 600;
   padding: 4px 6px 4px 0;
}

.exp-next td
{
   padding: 2px 6px 2px 0;
   border-top: 1px solid var(--c-border);
}

.exp-next td:last-child
{
   width: 45%;
}

.exp-total
{
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin: 4px 0 10px;
}

.wdl
{
   display: flex;
   width: 100%;
   height: 12px;
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid var(--c-border);
}

.wdl-w { background: #f4f4f4; }
.wdl-d { background: #9aa3b0; }
.wdl-b { background: #2b2f36; }

/* RS-Elo-Rechner */
.elo-rows
{
   list-style: none;
   margin: 0;
   padding: 0;
}

.elo-row
{
   display: grid;
   grid-template-columns: 22px 1fr 1fr 60px 44px;
   gap: 4px;
   align-items: center;
   padding: 4px 0;
}

.elo-row input,
.elo-row select
{
   min-width: 0;
   width: 100%;
   color: var(--c-text);
}

.elo-row select
{
   padding: 8px 4px;
}

/* vierstellige Elo muss bei 320 px ganz sichtbar sein */
.elo-row input
{
   padding: 8px 6px;
   text-align: center;
   font-variant-numeric: tabular-nums;
}

.elo-row .input-error
{
   grid-column: 2 / -1;
}

.elo-no
{
   color: var(--c-text-muted);
   font-size: var(--fs-s);
   text-align: right;
}

.elo-new
{
   font-size: 20px;
}

.elo-change.up { color: var(--c-success); font-weight: 700; }
.elo-change.down { color: var(--c-danger); font-weight: 700; }

/* Erfolgsquoten */
.rate-row .row-main
{
   gap: 4px;
}

.elo-steps > summary
{
   min-height: var(--touch);
   display: flex;
   align-items: center;
   cursor: pointer;
   color: var(--c-primary);
}

/* Schach lernen */
.learn-list
{
   list-style: none;
   margin: 0;
   padding: 0;
}

.learn-no
{
   flex: 0 0 auto;
   min-width: 2em;
   font-weight: 700;
   color: var(--c-muted);
   text-align: center;
}

.learn-board
{
   max-width: 360px;
   margin: var(--space-3) auto 0;
}

.learn-feedback:empty
{
   display: none;
}

.learn-feedback
{
   margin: var(--space-3) 0 0;
   font-weight: 600;
}

.learn-feedback.ok
{
   color: var(--c-success);
}

.learn-feedback.wrong
{
   color: var(--c-danger);
}

.learn-nav
{
   display: flex;
   justify-content: space-between;
   gap: var(--space-2);
   flex-wrap: wrap;
}

/* Paarungstabellen */
.pt-stage.is-return
{
   border-left: 4px solid var(--c-primary);
}

.pt-round
{
   margin: var(--space-3) 0 var(--space-1);
   font-size: 0.95rem;
}

.pt-cells
{
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
   gap: var(--space-1);
}

.pt-cell
{
   padding: var(--space-1) var(--space-2);
   border-radius: 6px;
   background: var(--c-surface-2);
   font-variant-numeric: tabular-nums;
}

.pt-cell.is-hl
{
   background: var(--c-primary-tint);
   box-shadow: inset 0 0 0 2px var(--c-primary);
}

.pt-board
{
   display: block;
   font-size: 0.75rem;
   color: var(--c-text-muted);
}

.pt-bye
{
   color: var(--c-text-muted);
}

/* RS-Elo-Verteilung: zwei Stufen eines Blaus (gesichert dunkel, vorlaeufig hell), geprueft fuer hell und dunkel */
.dist-chart
{
   margin: 0;
   --dist-est: #1c5cab;
   --dist-prov: #86b6ef;
}

@media (prefers-color-scheme: dark)
{
   :root:not([data-theme="light"]) .dist-chart
   {
      --dist-est: #9ec5f4;
      --dist-prov: #256abf;
   }
}

:root[data-theme="dark"] .dist-chart
{
   --dist-est: #9ec5f4;
   --dist-prov: #256abf;
}

.dist-chart svg
{
   display: block;
   width: 100%;
   height: auto;
   touch-action: pan-y;
}

.dist-chart .est
{
   fill: var(--dist-est);
}

.dist-chart .prov
{
   fill: var(--dist-prov);
}

.dist-chart .hit
{
   fill: transparent;
}

.dist-chart .dist-bar.on .hit
{
   fill: var(--c-primary-tint);
}

.dist-chart .grid
{
   stroke: var(--c-border);
   stroke-width: 1;
}

.dist-chart .base
{
   stroke: var(--c-text-muted);
   stroke-width: 1;
}

.dist-chart .ax
{
   fill: var(--c-text-muted);
   font-size: 10px;
}

.dist-legend
{
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 0 0 var(--space-2);
   font-size: 0.85rem;
}

.dist-legend .sw
{
   display: inline-block;
   width: 12px;
   height: 12px;
   border-radius: 3px;
   margin-left: 6px;
}

.dist-legend .sw.est
{
   background: var(--dist-est);
}

.dist-legend .sw.prov
{
   background: var(--dist-prov);
}

.dist-info
{
   min-height: 1.4em;
   margin: var(--space-1) 0 0;
}

.dist-table table
{
   width: 100%;
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
}

.dist-table th,
.dist-table td
{
   padding: 4px 6px;
   border-bottom: 1px solid var(--c-border);
   text-align: right;
}

.dist-table th[scope="row"],
.dist-table thead th:first-child
{
   text-align: left;
}

.dist-table th[scope="row"]
{
   font-weight: 400;
}

/* Fruehere Umfragen */
.poll-answers
{
   list-style: none;
   margin: 0;
   padding: 0;
}

.poll-answer
{
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 2px var(--space-2);
   padding: var(--space-2) 0;
   border-bottom: 1px solid var(--c-border);
}

.poll-text
{
   grid-column: 1 / -1;
}

.poll-answer.is-top .poll-text
{
   font-weight: 700;
}

.poll-bar
{
   align-self: center;
   height: 8px;
   border-radius: 4px;
   background: var(--c-surface-2);
   overflow: hidden;
}

.poll-bar span
{
   display: block;
   height: 100%;
   border-radius: 0 4px 4px 0;
   background: var(--c-primary);
}

.poll-pct
{
   min-width: 4.5em;
   text-align: right;
   font-variant-numeric: tabular-nums;
}

/* Zeilenumbrueche der Umfragetexte (<br> der Webseite kommt als \n, a8 71481be) */
.poll-q,
.poll-text,
.poll-list-q
{
   white-space: pre-line;
}

/* Ueberschrift einer Liste als Link zur ganzen Liste (Spielerseite) */
.title-link
{
   display: flex;
   align-items: center;
   gap: 6px;
   color: inherit;
   text-decoration: none;
   min-height: 32px;
   flex: 1;
}

.title-link .chev
{
   margin-left: auto;
}

.title-link:focus-visible
{
   outline: 2px solid var(--c-focus, var(--c-primary));
   outline-offset: 2px;
}

.row-more .row-main
{
   color: var(--c-primary);
   font-weight: 600;
}

/* Testbrett: Zuege der Partie fett, eigene Versuche normal */
.ana-line .mv-game
{
   font-weight: 700;
}

/* Echter Name hinter dem Nick (nur fuer Angemeldete, von der API) */
.real-name
{
   font-size: 0.85em;
   font-weight: 400;
   color: var(--c-text-muted);
}

/* Bedenkzeitprotokoll */
.table-scroll
{
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.tlog
{
   width: 100%;
   border-collapse: collapse;
   font-size: var(--fs-s);
   font-variant-numeric: tabular-nums;
}

.tlog th,
.tlog td
{
   padding: 6px 4px;
   text-align: left;
   vertical-align: top;
   border-bottom: 1px solid var(--c-border, rgba(127, 127, 127, 0.25));
   white-space: nowrap;
}

.tlog thead th
{
   color: var(--c-text-muted);
   font-weight: 600;
}

.tlog tbody th
{
   font-weight: 600;
}

.tlog .tlog-sep td
{
   white-space: normal;
   background: var(--c-primary-tint);
}

.tlog-pending th,
.tlog-pending td,
.tlog-end th,
.tlog-end td
{
   font-style: italic;
}

.tlog-mismatch,
.tlog-over
{
   color: var(--c-danger);
   font-weight: 600;
}

.tlog-flag
{
   font-size: 0.8em;
   color: var(--c-text-muted);
   text-decoration: none;
}

.tlog-claims
{
   margin: 0;
   padding-left: 18px;
}

/* Mitgliedschaft und Zahlung */
.pay-choice
{
   margin: 4px 0 0;
   padding: 0;
   border: 0;
}

.pay-choice legend
{
   margin-bottom: 6px;
   font-weight: 700;
}

/* Auswahl als ganze Zeile anklickbar, Preis rechts */
.pay-radio
{
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: var(--touch);
   padding: 8px 12px;
   margin-bottom: 6px;
   border: 1px solid var(--c-border);
   border-radius: 10px;
   cursor: pointer;
}

.pay-radio:has(input:checked)
{
   border-color: var(--c-primary);
   background: var(--c-primary-tint);
}

.pay-radio input
{
   flex: none;
   width: 20px;
   height: 20px;
   margin: 0;
   accent-color: var(--c-primary);
}

.pay-radio-text
{
   flex: 1;
   font-weight: 600;
}

.pay-radio-price
{
   white-space: nowrap;
}

.pay-step
{
   margin-top: 6px;
}

/* Zahlwege gleichrangig: gleicher Stil, gleiche Groesse, feste Reihenfolge (Betreiber 2026-11-12) */
.pay-methods
{
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
}

.btn.pay-method
{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   width: 100%;
   min-height: 56px;
   text-align: left;
}

.btn.pay-method[aria-pressed="true"]
{
   box-shadow: inset 0 0 0 2px var(--c-primary);
}

.pay-method-name
{
   font-weight: 700;
}

.pay-method-sub
{
   font-size: var(--fs-s);
   font-weight: 400;
}

/* zugeklappte Abschnitte (Lizenzpakete, Gutschein) */
.pay-more > summary
{
   display: flex;
   align-items: center;
   min-height: var(--touch);
   list-style: none;
   cursor: pointer;
}

.pay-more > summary::-webkit-details-marker
{
   display: none;
}

.pay-more > summary::before
{
   content: "";
   flex: none;
   width: 8px;
   height: 8px;
   margin: 0 12px 0 4px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(-45deg);
   transition: transform 0.15s;
}

.pay-more[open] > summary::before
{
   transform: rotate(45deg);
}

.pay-more > summary .card-title
{
   margin: 0;
}

.pay-sub
{
   margin: 14px 0 2px;
   font-size: 15px;
   font-weight: 700;
}

.pay-transfer
{
   margin-top: 8px;
   padding: 10px 12px;
   border-radius: 10px;
   background: var(--c-primary-tint);
}

.pay-transfer dd
{
   overflow-wrap: anywhere;
}

.pay-ref
{
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-weight: 700;
}

/* nur angezeigt, nicht aenderbar (E-Mail vom Anmeldeanbieter beim Konto-Anlegen) */
.field input[readonly]
{
   background: var(--c-bg);
   border-style: dashed;
}