/* Spielspezifische Ergänzungen.
 *
 * Alles Gemeinsame steht in app.css — Palette, Knöpfe, Flächen, Kopfzeile,
 * Würfel, Szene, Historie. Hier liegt nur, was genau ein Spiel braucht, und
 * zwar nach Spiel getrennt, damit ein viertes Spiel nichts anfassen muss.
 */

/* ======================================================================== */
/* Pilota                                                                    */
/* ======================================================================== */

/* Beiseitegelegte Würfel: schmaler Streifen über der aktiven Reihe, damit man
 * den gesicherten Teil des Zuges sieht, ohne ihn mit den liegenden Würfeln zu
 * verwechseln. */
.aside-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.6rem;
    background: var(--ink-900);
    border: 2px solid var(--line-soft);
}

.aside-strip .lbl {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--faint);
    flex: 0 0 auto;
}

.aside-strip .dice-row { margin: 0; justify-content: flex-start; }
.aside-strip .die-btn { width: 30px; height: 30px; box-shadow: none; --px-body: var(--em-600); }

.aside-pts {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--em-300);
}

/* Ein Pilota im Blatt: die Null ist der Punkt, nicht die Strafe. */
table.sheet .pilota { color: var(--danger); font-weight: 700; }
table.sheet .penalty { color: var(--danger-dim); }
table.sheet .push { color: var(--em-400); }

/* ======================================================================== */
/* Kniffel                                                                   */
/* ======================================================================== */

.cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
}

.cat-head .section-label { margin: 0; }

/* Zwei Spalten: dreizehn Kategorien passen so ohne Scrollen aufs Handy. */
.cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    min-height: 44px;
    background: var(--ink-700);
    border: 2px solid var(--line);
    text-align: left;
}

.cat.open {
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink-950);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.cat.open:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink-950); }

/* Eine Kategorie, die nichts bringt, sieht auch so aus — dann ist das
 * Streichen eine bewusste Entscheidung und kein Versehen. */
.cat.open.zero { color: var(--muted); border-color: var(--line-soft); }
.cat.open.zero .cat-val { color: var(--danger-dim); font-size: 0.66rem; }

/* Belegt: nicht antippbar, aber lesbar — man will sein Blatt sehen. */
.cat.taken { opacity: 0.5; background: var(--ink-900); border-color: var(--line-soft); }

.cat.manual { background: var(--ink-800); border-color: var(--em-700); }

.cat-name {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.cat-val {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--em-300);
    flex: 0 0 auto;
}

.cat.taken .cat-val { color: var(--muted); }

/* Gestrichene Kategorie im Blatt. */
table.sheet .struck { color: var(--danger-dim); }

/* ======================================================================== */
/* Schocken                                                                  */
/* ======================================================================== */

/* Der Chipstand ist bei Schocken das, worauf es ankommt — deshalb steht er
 * oben im Bild und nicht in einer Fußzeile. */
.chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.chip-slot {
    flex: 1 1 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.4rem;
    background: var(--ink-800);
    border: 2px solid var(--line);
}

.chip-slot.active { border-color: var(--em-400); background: var(--ink-700); }
.chip-slot.out { opacity: 0.45; }

.chip-name {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chip-count {
    font-family: var(--mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--em-300);
    line-height: 1;
}

.chip-slot.out .chip-count {
    font-size: 0.8rem;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Ergebnis der letzten Runde — wer gewonnen hat, ist bei Schocken schnell
 * vergessen, und der Chipfluss ist die eigentliche Nachricht. */
.last-round .lbl {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--faint);
    margin-bottom: 0.4rem;
}

.lr-line { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.lr-line b { color: var(--text); }

table.sheet .chip-in { color: var(--danger); font-weight: 700; }
table.sheet .chip-out { color: var(--em-400); }