/* ==========================================================================
   Jassistent – gemeinsames Design für alle Seiten
   Wird NACH den seiteneigenen Styles geladen.

   Farbkonzept aus dem Logo – den vier Jassfarben (Tailwind siehe jass-tailwind.js):
     Schellen-Gelb  #FCC00C  Hauptaktion, Bonus, aktueller Spieler
     Eichel-Grün    #248448  Erfolg, positiv, "weiter", Abschnittstitel
     Rosen-Rot      #D82418  Löschen, Fehler, Verlust
     Schilten-Schwarz        Schrift
     Fast-Weiss              Flächen (klar weiss, nicht beige)
     Teppich-Grün            Hintergrund und Kopf (wie die Startseite)
   Jede Akzentfarbe hat genau einen vollen Ton und einen hellen Hintergrund-Ton.
   Auf der dunklen Tafel stehen dieselben Farben als hellere "Kreide".

   Schriftkonzept:
     Bungee         nur Logo und Bildschirm-Titel (h1)
     Kreide/Caveat  ALLES auf der Jasstafel (Zahlen, Namen, Köpfe, Notizen)
     Systemschrift  alles andere, in drei ruhigen Stärken (400/500/600)

   Stil: flach und ruhig – einfarbige Flächen, keine Verläufe, keine
   Schatten auf Buttons und Tasten, keine umrandeten Kacheln.
   ========================================================================== */

:root {
    --felt-800: #12412b;
    --felt-700: #15523a;
    --felt-600: #248448;   /* Eichel-Grün aus dem Logo */

    --gold-700: #8a6a00;   /* Schellen-Gelb als Text auf Weiss */
    --gold-500: #fcc00c;   /* Schellen-Gelb aus dem Logo (Fläche) */
    --gold-100: #fff7dc;   /* heller Gelb-Hintergrund */
    --gold-ink: #141412;   /* Schrift auf Gelb */

    --rose: #d82418;       /* Rosen-Rot aus dem Logo */
    --rose-100: #fbe3e0;

    --wood: #7a5230;       /* nur für den Holzrahmen der Jasstafel */

    /* Flächen: klar weisser statt beige (Namen historisch "cream") */
    --cream-50: #fdfdfb;
    --cream-100: #f8f8f5;
    --cream-200: #f0f0eb;
    --cream-300: #e2e2da;

    --ink-900: #141412;
    --ink-700: #3c3c37;
    --ink-500: #73736c;

    --font-chalk: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
    --slate: #25302b;
    --chalk: #fbf8ef;
    --chalk-dim: rgba(244, 241, 232, 0.62);
    --chalk-line: rgba(244, 241, 232, 0.18);
    --chalk-red: #ff9c8f;
    --chalk-gold: #ffd23f;
    --chalk-green: #9fd8b4;

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --pattern: url('../img/Jass-Hintergrund.png');
}

/* --- Spieltisch: einfarbiges Teppich-Grün mit dezentem Jassmuster -------- */
body {
    color: var(--ink-900);
    background: var(--felt-700);
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--pattern) center / 1600px repeat;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}
body > div {
    position: relative;
    z-index: 1;
}

.title-playful {
    font-family: 'Bungee', 'Arial Black', sans-serif;
    font-weight: normal;
    letter-spacing: 0.01em;
}

/* --- Schriftkonzept: eine ruhige Systemschrift in drei Stärken ------------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.font-light,
.font-thin,
.font-extralight {
    font-weight: 400 !important;
}
.font-bold,
.font-extrabold,
.font-black {
    font-weight: 600 !important;
}
/* Abschnittstitel überall gleich: halbfett, gleiche Grösse */
.glass h2 {
    font-size: 1.125rem !important;
    line-height: 1.4;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--ink-900) !important;
}
.glass h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}
@media (min-width: 640px) {
    .glass h2 {
        font-size: 1.25rem !important;
    }
}
/* Kleine Grossbuchstaben-Labels ruhiger */
.uppercase.tracking-wider {
    letter-spacing: 0.06em;
    font-weight: 500;
}
.tabular-nums,
td,
.chalk {
    font-variant-numeric: tabular-nums;
}

/* --- Hauptfläche: einfarbiges Creme-Blatt auf dem Teppich ------------------ */
.glass {
    position: relative;
    background: var(--cream-50);
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: jassEnter 0.5s var(--ease-out) backwards;
}

/* Keine Schatten, keine Kacheln: innere Flächen sind offen und werden durch
   Abstand, Typografie und Trennlinien gegliedert. */
.shadow-apple,
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.hover\:shadow-md:hover,
.hover\:shadow-lg:hover {
    box-shadow: none !important;
}
.bg-gradient-to-r,
.bg-gradient-to-br {
    background-image: none !important;
}
.card-jass {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* --- Startseite ----------------------------------------------------------- */
.game-image,
.game-image:hover {
    box-shadow: none !important;
}
.game-image::before {
    display: none;
}

/* --- Jasstafel: Schiefer im Holzrahmen, Punkte in Kreide ------------------ */
.jasstafel {
    position: relative;
    font-family: var(--font-chalk);
    line-height: 1.15;
    color: var(--chalk);
    background: var(--slate);
    border: 7px solid var(--wood);
    border-radius: 0.9rem;
    padding: 0.7rem 1rem;
}
.jasstafel-list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 2.5rem;
}
@media (min-width: 640px) {
    .jasstafel-list {
        grid-template-columns: 1fr 1fr;
    }
}
.jasstafel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.2rem;
    border-bottom: 1px dashed rgba(244, 241, 232, 0.18);
}
.jasstafel-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(244, 241, 232, 0.92);
}
.chalk {
    font-family: var(--font-chalk);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--chalk);
    font-variant-numeric: tabular-nums;
}
.chalk-lg {
    font-size: 2.6rem;
}
.chalk-note {
    font-family: var(--font-chalk);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--chalk-dim);
}
.chalk-red,
.chalk-note.chalk-red {
    color: var(--chalk-red);
}
.chalk-gold,
.chalk-note.chalk-gold {
    color: var(--chalk-gold);
}
.chalk-green,
.chalk-note.chalk-green {
    color: var(--chalk-green);
}
.chalk-dim {
    color: var(--chalk-dim);
}

/* --- Tafel-Tabelle (Spielverlauf, Abrechnung) ------------------------------ */
.tafel-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.25rem;
}
.tafel-table {
    width: 100%;
    border-collapse: collapse;
}
.tafel-table th {
    font-family: var(--font-chalk);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--chalk-dim);
    text-align: center;
    padding: 0.35rem 0.3rem 0.45rem;
    border-bottom: 1px solid var(--chalk-line);
    /* Lange Namen dürfen umbrechen, damit die Tafel auf dem Handy nicht zu breit wird */
    line-height: 1.1;
    max-width: 5.5rem;
    /* Umbruch nur zwischen Wörtern, nie mitten im Wort */
    overflow-wrap: normal;
    word-break: keep-all;
}
.tafel-table td {
    text-align: center;
    padding: 0.4rem 0.3rem;
    border-bottom: 1px dashed var(--chalk-line);
    vertical-align: middle;
    color: var(--chalk);
}
.tafel-table tr:last-child td {
    border-bottom: 0;
}
.tafel-table .tafel-left {
    text-align: left;
}
.tafel-table .tafel-right {
    text-align: right;
}
/* Erste Spalte bleibt beim seitlichen Scrollen stehen */
.tafel-table .tafel-sticky {
    position: sticky;
    left: 0;
    background: var(--slate);
    z-index: 1;
}
.tafel-table tfoot td {
    border-top: 2px solid var(--chalk-line);
    border-bottom: 0;
}
.tafel-sub {
    display: block;
    font-family: var(--font-chalk);
    font-size: 0.95rem;
    line-height: 1.1;
    color: var(--chalk-dim);
    white-space: nowrap;
    margin-top: 0.1rem;
}
/* Bonus-Spieler der Runde: kleiner Holz-Punkt mit "B" */
.tafel-bonus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.2rem;
    border-radius: 999px;
    background: var(--gold-500);
    color: var(--gold-ink);
    font-family: var(--font-chalk);
    font-size: 0.85rem;
    font-weight: 700;
    vertical-align: 0.35em;
}
.tafel-footnote {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--chalk-line);
    font-family: var(--font-chalk);
    font-size: 1.05rem;
    color: var(--chalk-dim);
}
.tafel-footnote-ok {
    color: var(--chalk-green);
}
.tafel-footnote-error {
    color: var(--chalk-red);
}
/* Zwei Spalten mit Kreidestrich dazwischen (Coiffeur: Team gegen Team) */
.jasstafel-duel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}
.jasstafel-duel > * + * {
    border-left: 1px dashed rgba(244, 241, 232, 0.25);
}

/* --- Buttons: einfarbig, ohne Schatten, ohne Verlauf ---------------------- */
.btn-gold,
.btn-felt,
.btn-rose,
.btn-cream,
.button-primary,
.button-next-game,
.button-end-game,
.apple-button {
    border: 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
    -webkit-user-select: none;
    user-select: none;
}
.btn-gold,
.button-primary {
    background: var(--gold-500);
    color: var(--gold-ink) !important;
    font-weight: 600;
}
.btn-felt,
.button-next-game {
    background: var(--felt-600);
    color: #fff !important;
}
.btn-rose,
.button-end-game {
    background: var(--rose);
    color: #fff !important;
}
.btn-cream,
.apple-button {
    background: var(--cream-200);
    color: var(--ink-700) !important;
}
@media (hover: hover) {
    .btn-gold:hover, .button-primary:hover,
    .btn-felt:hover, .button-next-game:hover,
    .btn-rose:hover, .button-end-game:hover {
        filter: brightness(0.94);
    }
    .btn-cream:hover, .apple-button:hover { background: var(--cream-300); }
}
.btn-gold:active, .button-primary:active,
.btn-felt:active, .button-next-game:active,
.btn-rose:active, .button-end-game:active,
.btn-cream:active, .apple-button:active {
    transform: scale(0.98);
}
button:disabled.button-primary,
button:disabled.btn-gold {
    opacity: 0.45;
}

/* --- Eingaben ------------------------------------------------------------- */
.mobile-input {
    background-color: #fff;
    border-color: var(--cream-300);
    color: var(--ink-900);
    transition: border-color 0.15s ease;
}
/* Fokus bleibt deutlich sichtbar (Barrierefreiheit), aber flach */
.mobile-input:focus {
    outline: 2px solid var(--gold-500);
    outline-offset: -1px;
    border-color: var(--gold-500);
    box-shadow: none;
}
input:checked + .slider {
    background-color: var(--felt-600);
}
.range-input,
.range-input:hover {
    background: var(--cream-300);
}
.range-input::-webkit-slider-thumb,
.range-input::-webkit-slider-thumb:hover,
.range-input::-webkit-slider-thumb:active {
    background: var(--gold-500);
    border: 0;
    box-shadow: none;
    transform: none;
}
.range-input::-moz-range-thumb {
    background: var(--gold-500);
    border: 0;
    box-shadow: none;
}

/* --- Coiffeur: Rang, Jassarten ----------------------------------------- */
.rank-indicator {
    background: var(--gold-500);
    color: var(--gold-ink);
    text-shadow: none;
    box-shadow: none;
}
.jass-type-card,
.jass-type-card:hover {
    background: var(--cream-100);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}
.draggable:hover,
.drag-over {
    box-shadow: none;
}
.drop-zone {
    border-color: var(--cream-300);
}

/* --- Differenzler: Kennzahlen, Speichern-Hinweis ------------------------- */
.status-card,
.status-card-announced,
.status-card-open,
.status-card-achieved-valid,
.status-card-achieved-invalid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.status-card + .status-card {
    border-left: 1px solid var(--cream-300) !important;
}
.status-card:hover {
    transform: none;
}
.save-indicator {
    background: var(--felt-600);
    box-shadow: none;
    border: 0;
}

/* Aktionsleiste unten auf dem Handy */
@media (max-width: 639px) {
    .mobile-sticky-actions {
        background: var(--cream-100);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-top-color: var(--cream-300);
    }
}

/* --- Dialoge: auf dem Handy gleiten sie von unten herein ------------------ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(12, 46, 30, 0.6);
    animation: fadeIn 0.2s ease both;
}
.modal-content {
    position: relative;
    width: 100%;
    max-width: 24rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: var(--cream-50);
    border: 0;
    box-shadow: none;
    animation: modalIn 0.28s var(--ease-out) both;
}
@media (max-width: 639px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .modal-content {
        max-width: none;
        border-radius: 1.25rem 1.25rem 0 0;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        animation: sheetUp 0.32s var(--ease-out) both;
    }
}

/* --- Ziffernblock: einfarbig, Jassmuster dezent wie auf dem Teppich ------- */
.number-pad::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pattern) center / 300px repeat;
    opacity: 0.07;
    pointer-events: none;
}
.number-pad > * {
    position: relative;
}

/* --- Animationen ---------------------------------------------------------- */
@keyframes jassEnter {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: none; }
}
/* Zahl hat sich geändert: kurzes "Aufpoppen" */
.num-pop {
    display: inline-block;
    animation: numPop 0.35s var(--ease-out);
}
@keyframes numPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); color: var(--gold-500); }
    100% { transform: scale(1); }
}
/* Listen-Einträge erscheinen nacheinander */
.stagger-in > * {
    animation: jassEnter 0.4s var(--ease-out) backwards;
}
.stagger-in > *:nth-child(2) { animation-delay: 0.04s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.08s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.12s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.16s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.24s; }
.stagger-in > *:nth-child(n+8) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
    .glass,
    .modal-overlay,
    .modal-content,
    .num-pop,
    .stagger-in > * {
        animation: none !important;
    }
    .btn-gold, .btn-felt, .btn-rose, .btn-cream,
    .button-primary, .button-next-game, .button-end-game, .apple-button {
        transition: none;
    }
}

/* Kleinere Kreide-Zahlen in Tabellen */
.chalk-sm {
    font-size: 1.35rem;
}

/* Abschnittstitel als Text (z. B. in Aufklapp-Buttons) – gleich wie h2 */
.section-title {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}
@media (min-width: 640px) {
    .section-title {
        font-size: 1.25rem;
    }
}

/* --- Browser-Elemente im Farbkonzept (sonst Systemblau) -------------------- */
:root {
    accent-color: var(--gold-500);
}
input,
select,
textarea {
    accent-color: var(--gold-500);
}
/* Alle Fokus-Ringe einheitlich in Gold (Tailwind-Ringe waren rot/blau) */
.focus\:ring-2:focus,
.focus\:ring-red-500:focus,
.focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(212, 160, 23, 0.55) !important;
}
select:focus,
input:focus {
    border-color: var(--gold-500);
}
:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* --- Kopf jeder Ansicht: Teppich-Grün mit dem Jassmuster der Startseite ---- */
.app-header {
    position: relative;
    overflow: hidden;
    background: var(--felt-700);
    color: var(--chalk);
    border-radius: 1.1rem;
    padding: 0.85rem 1rem;
}
.app-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pattern) center / 360px repeat;
    opacity: 0.1;
    pointer-events: none;
}
.app-header > * {
    position: relative;
}
.app-header h1,
.app-header .text-gray-900 {
    color: var(--chalk) !important;
}
.app-header p,
.app-header .text-gray-500,
.app-header .text-gray-600 {
    color: var(--chalk-dim) !important;
}
.app-header img {
    box-shadow: none !important;
}
/* Buttons im Kopf: halbtransparent auf dem Grün */
.app-header .btn-cream {
    background: rgba(255, 255, 255, 0.14);
    color: var(--chalk) !important;
}
@media (hover: hover) {
    .app-header .btn-cream:hover {
        background: rgba(255, 255, 255, 0.22);
    }
}
/* Abschnittstitel in Teppich-Grün – dezenter Farbakzent auf Creme */
.glass h2,
.section-title {
    color: var(--felt-600) !important;
}