/* /Components/SeatInsignia.razor.rz.scp.css */
/* Isoliertes CSS der Ordensspange. Die Bewegung steckt vollständig in Keyframes — kein
   JavaScript, damit sie auch dann läuft, wenn der Browser gerade anderes zu tun hat. */

/* Die Spange steht als eigene Spalte neben der Kachel und ist immer da, auch leer: Sonst
   rückte die Kachel beim ersten Vorbehalt zur Seite. 2,15 rem sind das Medaillon plus der
   Abstand zur Kante. */
.rail[b-cviykzlv2g] {
    position: relative;
    flex: none;
    width: 2.15rem;
    align-self: flex-start;
    padding-top: 0.5rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;

    /* Die Medaillons tragen selbst einen Titel und sollen ihn zeigen; alles andere hier
       ist durchlässig. */
    pointer-events: none;
}

/* ---- Das Medaillon ---------------------------------------------------------- */

/* Alle gleich groß, rund, mit eigenem Grund: Sie liegen auf Filz, nicht auf einer Fläche,
   und ein Rand allein trüge sich dort nicht. */
.medal[b-cviykzlv2g] {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(8, 20, 14, 0.9);
    border: 1.5px solid var(--line);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

    font-size: 0.95rem;
    line-height: 1;
    pointer-events: auto;
}

/* Zwei bis drei Zeichen — Re, Ko, 90, ♦♦ — müssen in denselben Kreis wie ein einzelnes. */
.glyph[b-cviykzlv2g] { font-weight: 700; }
.glyph.narrow[b-cviykzlv2g] { font-size: 0.72rem; letter-spacing: 0.02em; }

/* Die Karo-Paare sitzen enger als Buchstaben: Der Zeichenabstand steht sonst als Lücke
   rechts im Kreis und schiebt das Paar aus der Mitte. */
.medal.vorbehalt .glyph.narrow:not(:empty)[b-cviykzlv2g] { letter-spacing: -0.14em; text-indent: -0.14em; }

/* Die Hochzeit: zwei ineinandergehängte Ringe, gezeichnet aus zwei Kreisen. */
.rings[b-cviykzlv2g] { display: flex; align-items: center; }

.rings i[b-cviykzlv2g] {
    display: block;
    width: 0.66rem;
    height: 0.66rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.rings i + i[b-cviykzlv2g] { margin-left: -0.24rem; }

/* ---- Farbcode: nie allein tragend, es gibt immer Titel und Namensfahne ------- */

.medal.vorbehalt[b-cviykzlv2g] { border-color: var(--accent); color: var(--accent); }
.medal.solo[b-cviykzlv2g] { border-color: var(--danger); color: #f0a49b; }
.medal.re[b-cviykzlv2g] { border-color: var(--re); color: var(--re-ink); }
.medal.kontra[b-cviykzlv2g] { border-color: var(--kontra); color: var(--kontra-ink); }
.medal.absage[b-cviykzlv2g] { border-color: var(--text-faint); color: var(--text); font-size: 0.72rem; }

/* Gefüllt heißt: laut. Eine angesagte Partei — jemand hat sich selbst offenbart — und das
   Superschwein gegenüber dem Schweinchen. */
.medal.re.filled[b-cviykzlv2g] { background: var(--re); color: #fff; }
.medal.kontra.filled[b-cviykzlv2g] { background: var(--kontra); color: #fff; }
.medal.vorbehalt.filled[b-cviykzlv2g] { background: var(--accent); color: var(--accent-ink); }
.medal.absage.filled[b-cviykzlv2g] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- Der Aufschlag ---------------------------------------------------------- */

/* Nur das neue Zeichen schlägt auf. Die übrigen sind beim Neuzeichnen dieselben Elemente
   und behalten ihren Zustand — deshalb genügt die Klasse, es braucht keinen Schlüssel
   gegen Wiederholungen. */
.medal.new[b-cviykzlv2g] {
    animation:
        medal-in-b-cviykzlv2g 0.5s cubic-bezier(0.2, 1, 0.3, 1) both,
        medal-ring-b-cviykzlv2g 0.9s ease-out both;
}

/* Von außen zu groß und schief herein, kurz unter die Endgröße, dann zur Ruhe — ein
   Aufsetzen, kein Einblenden. */
@keyframes medal-in-b-cviykzlv2g {
    0% { opacity: 0; transform: scale(1.9) rotate(-14deg); }
    55% { opacity: 1; transform: scale(0.88) rotate(3deg); }
    75% { transform: scale(1.06) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Ein einzelner Ring, der nach außen läuft und verschwindet. Er holt den Blick auch dann,
   wenn man gerade auf die eigene Hand sieht. */
@keyframes medal-ring-b-cviykzlv2g {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

/* ---- Die Namensfahne -------------------------------------------------------- */

/* Sie fährt zur Tischmitte hin aus, hält gut anderthalb Sekunden und geht zurück. Das
   Zeichen allein wäre beim ersten Mal nicht zu lernen; danach genügt es. */
.flag[b-cviykzlv2g] {
    position: absolute;
    top: 50%;
    z-index: 5;

    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--shadow);
    pointer-events: none;
}

.medal.solo .flag[b-cviykzlv2g] { background: var(--danger); color: #fff; }
.medal.re .flag[b-cviykzlv2g] { background: var(--re); color: #fff; }
.medal.kontra .flag[b-cviykzlv2g] { background: var(--kontra); color: #fff; }

/* Wohin sie ausfährt, hängt am Platz: immer zur Tischmitte, nie über den Fensterrand
   hinaus. Links am Tisch heißt das nach rechts, rechts nach links; oben und unten liegt
   die Spange rechts der Kachel, die Fahne also links. */
.rail[data-side="west"] .flag[b-cviykzlv2g] {
    left: 100%;
    margin-left: 0.35rem;
    transform-origin: left center;
    animation: flag-right-b-cviykzlv2g 2.6s ease-in-out both;
}

.rail[data-side="east"] .flag[b-cviykzlv2g],
.rail[data-side="north"] .flag[b-cviykzlv2g],
.rail[data-side="south"] .flag[b-cviykzlv2g] {
    right: 100%;
    margin-right: 0.35rem;
    transform-origin: right center;
    animation: flag-left-b-cviykzlv2g 2.6s ease-in-out both;
}

@keyframes flag-right-b-cviykzlv2g {
    0% { opacity: 0; transform: translate(-6px, -50%) scaleX(0.6); }
    10%, 65% { opacity: 1; transform: translate(0, -50%) scaleX(1); }
    100% { opacity: 0; transform: translate(-6px, -50%) scaleX(0.6); }
}

@keyframes flag-left-b-cviykzlv2g {
    0% { opacity: 0; transform: translate(6px, -50%) scaleX(0.6); }
    10%, 65% { opacity: 1; transform: translate(0, -50%) scaleX(1); }
    100% { opacity: 0; transform: translate(6px, -50%) scaleX(0.6); }
}

/* ---- Vorlesehilfe ----------------------------------------------------------- */

.sr-only[b-cviykzlv2g] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Wer keine Bewegung möchte ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* Der Aufschlag entfällt, die Fahne bleibt: Sie trägt die Auskunft, nicht die
       Bewegung. Sie erscheint und verschwindet ohne Fahrt. */
    .medal.new[b-cviykzlv2g] { animation: none; }

    .rail[data-side] .flag[b-cviykzlv2g] {
        animation: none;
        opacity: 1;
    }

    .rail[data-side="west"] .flag[b-cviykzlv2g] { transform: translateY(-50%); }
    .rail[data-side="east"] .flag[b-cviykzlv2g],
    .rail[data-side="north"] .flag[b-cviykzlv2g],
    .rail[data-side="south"] .flag[b-cviykzlv2g] { transform: translateY(-50%); }
}
/* /Components/SeatPortrait.razor.rz.scp.css */
/* Isoliertes CSS des Sitzbildes. */

/* Der Grund ist der Tisch selbst, von oben gesehen: heller Filz am oberen Rand, zum
   unteren hin abfallend. Dadurch sitzt der Platz optisch am Tisch und nicht in einem
   Kasten. */
.portrait[b-ecthxleejv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(85% 115% at 50% 8%, var(--felt-center) 0%, var(--felt-edge) 55%, #14301f 100%);
}

/* ---- Die Medaille ----------------------------------------------------------- */

/* Etwas über der Mitte, damit das Blatt darunter Platz hat, ohne sie zu überschneiden.
   Der Verlauf und die helle Oberkante machen aus der Scheibe eine geprägte Fläche — flach
   gefüllt sah sie aus wie ein Zustandspunkt. */
.medal[b-ecthxleejv] {
    position: relative;
    z-index: 1;
    margin-bottom: 12%;

    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.14),
        0 10px 22px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);

    transition: box-shadow 0.4s;
}

/* Die vier Platzfarben, aufgehellt zur Kante hin. Dieselben Marken wie im Punktestand —
   wer dort „KH“ in Violett liest, findet ihn am Tisch wieder. */
.medal.seat-0[b-ecthxleejv] { background: linear-gradient(155deg, #f0b955, #a8720f); }
.medal.seat-1[b-ecthxleejv] { background: linear-gradient(155deg, #8d6ed6, #4a3480); }
.medal.seat-2[b-ecthxleejv] { background: linear-gradient(155deg, #2aa5a5, #12595c); }
.medal.seat-3[b-ecthxleejv] { background: linear-gradient(155deg, #3fa16f, #1c6040); }

/* Am Zug: Der Ring wechselt auf Bernstein — dieselbe Farbe wie der Kachelrahmen, nur
   näher am Namen. */
.portrait.acting .medal[b-ecthxleejv] {
    box-shadow:
        0 0 0 2px var(--accent),
        0 10px 22px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---- Das Blatt -------------------------------------------------------------- */

/* Es liegt am unteren Rand und ragt zum Teil hinaus: So sieht es aus wie eine Hand, die
   über der Tischkante gehalten wird, und nicht wie ein Symbol in einem Kasten. */
.fan[b-ecthxleejv] {
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.back[b-ecthxleejv] {
    display: block;
    width: 1.6rem;
    height: 2.3rem;
    margin-right: -0.68rem;
    border: 1.5px solid rgba(244, 242, 236, 0.9);
    border-radius: 3px;

    /* Der Kartenrücken in denselben Rot wie das Deck. */
    background: repeating-linear-gradient(45deg, var(--card-back) 0 3px, var(--card-back-dark) 3px 6px);

    /* --turn kommt aus dem Markup: die Stelle im Fächer, von der Mitte aus gezählt. */
    transform: rotate(calc(var(--turn) * 9deg));
    transform-origin: 50% 140%;
    transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.back:last-child[b-ecthxleejv] { margin-right: 0; }

/* Am Zug fährt das ganze Blatt hoch und die mittlere Karte löst sich heraus — die, die
   gleich fällt. */
.portrait.acting .fan[b-ecthxleejv] { transform: translateX(-50%) translateY(-16px); }

.portrait.acting .back.middle[b-ecthxleejv] { transform: rotate(calc(var(--turn) * 9deg)) translateY(-16px); }

/* ---- Wer keine Bewegung möchte ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    /* Die Karte steht dann sofort oben statt zu fahren. Die Auskunft bleibt, nur der Weg
       dorthin entfällt. */
    .fan[b-ecthxleejv], .back[b-ecthxleejv] { transition: none; }
}