/*
 * Die Tischrunde — ein Gerät in der Mitte (pages/tisch.js, ui/weitergabe.js,
 * ui/sonnenstand.js).
 *
 * Zwei Grundsätze aus der Recherche (TISCH-PLAN.md, Abschnitt 1):
 * Der Nachtschirm ist fast schwarz, damit er niemandem ins Gesicht leuchtet,
 * und der Rollenschirm ist karg — nichts, was ein Nachbar aus dem Augenwinkel
 * deuten könnte.
 */

/* ------------------------------------------------------------- Seite */

.tischseite { padding-bottom: var(--s8); }

.tischseite--nacht {
    background: #05060a;
    border-radius: var(--r-gross);
    min-height: 70vh;
}

/* Die Namen in Sitzreihenfolge (Einrichten und Übersicht). */
.sitzliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.sitzliste__platz {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--grund-erhoben);
    border: 1px solid var(--rand);
    border-radius: var(--r-klein);
}
.sitzliste__nummer {
    width: 1.8rem; height: 1.8rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-rund);
    background: var(--flaeche-hoch);
    color: var(--text-leise);
    font-size: var(--f-klein); font-weight: 700;
}
.sitzliste__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitzliste__knoepfe { display: inline-flex; gap: var(--s1); }
.sitzliste--still .sitzliste__platz { padding: var(--s1) var(--s3); background: transparent; }

.tischhinweise { margin: 0; padding-left: 1.2rem; color: var(--text-leise); font-size: var(--f-klein); }
.tischhinweises li + li { margin-top: var(--s1); }

.tischmenue { margin-top: var(--s4); }
.tischmenue summary { list-style: none; display: inline-block; cursor: pointer; }
.tischmenue summary::-webkit-details-marker { display: none; }
.tischmenue__inhalt { margin-top: var(--s3); }

/* ---------------------------------------------------------- Halten */

.halteknopf {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 12rem; min-height: 3.4rem;
    padding: var(--s3) var(--s5);
    border-radius: var(--r-rund);
    border: 2px solid var(--rand-hell);
    background: var(--eisen);
    color: var(--eisen-schrift);
    font-weight: 700; font-size: var(--f-normal);
    cursor: pointer;
    touch-action: none;
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none;
    --halten: 0;
    overflow: hidden;
}
.halteknopf__ring {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mond) 55%, transparent) calc(var(--halten) * 100%), transparent 0);
    transition: none;
    pointer-events: none;
}
.halteknopf__text { position: relative; z-index: 1; }
.halteknopf--haelt { border-color: var(--mond); }
.halteknopf--offen { opacity: .6; }
.halteknopf--gross { min-height: 4.4rem; font-size: var(--f-gross); width: 100%; }
.halteknopf--nacht { background: #101420; border-color: #2a3350; color: var(--text-leise); }

/* ------------------------------------------------------ Weitergabe */

.weitergabe { min-height: 40vh; display: flex; flex-direction: column; justify-content: center; }
.weitergabe__aufruf, .weitergabe__zu, .weitergabe__laedt {
    display: flex; flex-direction: column; align-items: center; gap: var(--s3);
    text-align: center; padding: var(--s6) var(--s4);
}
.weitergabe__vor { margin: 0; color: var(--text-leise); }
.weitergabe__name { margin: 0; font-family: var(--schrift-display); font-size: var(--f-riesig); font-weight: 700; line-height: 1.1; }
.weitergabe__hinweis, .weitergabe__halten { margin: 0; color: var(--text-still); font-size: var(--f-klein); }
.weitergabe__inhalt { padding: var(--s2) 0; }
.tischkarte { max-width: 28rem; margin: 0 auto; }

/* ----------------------------------------------------------- Nacht */

.tischnacht { color: var(--text-leise); position: relative; overflow: hidden; border-radius: var(--r-gross); min-height: 70vh; }
/* Das Nachtbild unter den Szenen — gedämpft, damit der Text lesbar bleibt
   und der Schirm niemandem ins Gesicht leuchtet. */
.tischnacht__hintergrund { position: absolute; inset: 0; z-index: 0; }
.tischnacht__szene { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .55; display: block; }
.tischnacht__hintergrund::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 10, .15), rgba(5, 6, 10, .75));
}
/* Reihum liegt die eigene Rollenkarte hinter der Handlung: Wer das Gerät in
   der Hand hat, sieht, als wer er greift. Blasser als das Nachtbild und
   höher beschnitten — das Gesicht soll zu sehen sein, ohne den Text zu
   schlucken. */
.tischreihum__buehne { position: relative; overflow: hidden; border-radius: var(--r-gross); }
.tischreihum__karte {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
    opacity: .4; display: block;
}
.tischnacht__mitte, .tischnacht__aktion { position: relative; z-index: 1; }
.tischnacht__mitte, .tischnacht__aktion {
    display: flex; flex-direction: column; align-items: center; gap: var(--s4);
    text-align: center; padding: var(--s6) var(--s4);
}
.tischnacht__aktion { align-items: stretch; text-align: left; }
.tischnacht__aktion .tischnacht__wort, .tischnacht__aktion .tischnacht__text { text-align: center; }
.tischnacht__wort { margin: 0; font-family: var(--schrift-display); font-size: var(--f-titel); font-weight: 700; color: var(--text); }
.tischnacht__text { margin: 0; max-width: 32rem; font-style: italic; color: var(--text-leise); }
.tischnacht__hinweis { margin: 0; color: var(--text-still); font-size: var(--f-klein); }
.tischnacht__karte {
    /* Vollflächig (Wunsch 06.09.): Die Karte ist das Bild der Nacht — so groß,
       wie der Schirm hergibt, im Maß der Dateien (832 × 1216). */
    width: min(100%, 24rem, 62vh * 832 / 1216); aspect-ratio: 832 / 1216; position: relative;
    border-radius: var(--r-mittel); overflow: hidden;
    border: 1px solid #1e2537; opacity: .95;
}
.tischnacht__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.tischnacht__mond {
    width: 5rem; height: 5rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e9e2c8, #7f7a68 70%, #3a3a44);
    box-shadow: 0 0 40px rgba(233, 226, 200, .18);
    opacity: .7;
}
.tischnacht__fenster {
    width: min(100%, 24rem); height: .35rem; border-radius: var(--r-rund);
    background: #161a26; overflow: hidden;
}
.tischnacht__fensterlauf { height: 100%; width: 100%; background: var(--mond-tief); opacity: .7; transition: width 1s linear; }

.sitzwahl { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.sitzwahl__knopf { min-width: 7rem; }

.erkenntnis { align-items: center; text-align: center; }
.erkenntnis__bild { width: 10rem; aspect-ratio: 1; position: relative; border-radius: var(--r-mittel); overflow: hidden; margin: 0 auto; }

/* ------------------------------------------------------------- Tag */

.tischtag { align-items: center; }
.tischtag__uhr { margin-top: calc(var(--s3) * -1); }
.sonnenstand__rahmen { width: min(100%, 22rem); margin: 0 auto; }
.sonnenstand { width: 100%; height: auto; display: block; }
.sonnenstand__bogen { fill: none; stroke: var(--rand-hell); stroke-width: 2; stroke-dasharray: 4 6; }
.sonnenstand__horizont { stroke: var(--rand); stroke-width: 2; }
.sonnenstand__sonne { fill: var(--mond); filter: drop-shadow(0 0 8px rgba(240, 163, 92, .7)); transition: cx 1s linear, cy 1s linear; }
.sonnenstand--abend .sonnenstand__sonne { fill: var(--blut-schrift); }
.sonnenstand--nacht .sonnenstand__sonne { opacity: .25; }

.haende { display: flex; flex-direction: column; gap: var(--s2); }
.haende__zeile {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s3); border: 1px solid var(--rand); border-radius: var(--r-klein);
    background: var(--grund-erhoben);
}
.haende__name { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.haende__name .sinnbild-traeger { width: 1.6rem; height: 1.6rem; }
.haende__knoepfe { display: inline-flex; align-items: center; gap: var(--s2); }
.haende__zahl { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--f-gross); }

.endliste { display: flex; flex-direction: column; gap: var(--s1); }
.endliste__zeile { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0; border-bottom: 1px solid var(--rand); }
.endliste__zeile--tot { color: var(--text-still); text-decoration: line-through; }
.endliste__rolle { color: var(--text-leise); }

/* ------------------------------------------- Karten groß, vollflächig */

/* Die Rollenkarte der Weitergabe: das ganze Bild statt des Querstreifens,
   die Figur mittig. Das Banner behält Scrim und Namen. */
/* Waagerecht mittig (10.09.2026): Durch `max-height` wird das Banner
   schmaler als die Karte, und die negativen Ränder aus game.css zogen es
   dabei an die linke Kante — rechts blieb ein Streifen Kartenfläche stehen.
   Links und rechts deshalb automatische Ränder statt der negativen; der
   negative Rand nach oben bleibt, damit das Bild oben bündig sitzt. */
.tischkarte .rollenbanner {
    aspect-ratio: 832 / 1216;
    max-height: 62vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--r-gross);
}
.tischkarte .rollenbanner__bild { object-position: 50% 50%; }
.tischkarte .rollenbanner__scrim {
    background: linear-gradient(180deg, transparent 70%,
        color-mix(in srgb, var(--flaeche) 92%, transparent) 100%);
}
/* Die Erkenntnis der Seherin und die Karten des Diebs — ebenso groß. */
.tischnacht__aktion .erkenntnis__bild { width: min(100%, 20rem, 50vh * 832 / 1216); aspect-ratio: 832 / 1216; }
.tischnacht__aktion .restkarte .erkenntnis__bild { width: min(40vw, 12rem); }

/* ------------------------------------------------------- QR-Code */

/* Weiß hinterlegt und mit Ruhezone — ein Scanner will Kontrast, kein Thema.
   Groß genug, dass man ihn über den Tisch hinweg abfotografieren kann. */
.qr__rahmen { display: flex; justify-content: center; }
.qr { width: min(70vw, 16rem); height: auto; border-radius: var(--r-klein); background: #fff; }

/* --------------------------------------------------- Überspringen */

/* Schwebt unten rechts, nur solange der Erzähler spricht. Dezent: Er soll
   erreichbar sein, nicht auffordern. */
.tischskip {
    position: fixed; right: var(--s4); bottom: var(--s4); z-index: 60;
    /* Dezent (Wunsch 06.09.): kleine Schrift, halb durchsichtig, kein Eisen,
       kein Schatten — ein Hinweis am Rand, kein Knopf, der ruft. Beim
       Berühren wird er deutlich. */
    padding: var(--s1) var(--s3);
    font-size: var(--f-klein);
    font-weight: 500;
    background: rgba(13, 15, 22, .55);
    background-image: none;
    border: 1px solid color-mix(in srgb, var(--rand-hell) 60%, transparent);
    color: var(--text-still);
    box-shadow: none;
    opacity: .6;
    transition: opacity var(--zeit-kurz), color var(--zeit-kurz);
}
.tischskip:hover, .tischskip:focus-visible, .tischskip:active {
    opacity: 1;
    color: var(--text);
}