/* ============================================
   TOUR.CSS - Turnier (js/tour.js)
   Startmenue-Bereich, Punkteleiste oben, Zwischenstand mit Auslosung
   ============================================ */

:root {
    --tour-h: 0px;
}

/* ---- Startmenue ---- */
.tour-games {
    margin-top: 10px;
}

.tour-games .mode-btn:not(.active) {
    opacity: 0.45;
}

.tour-resume {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--separator);
}

/* ---- Punkteleiste: ganz oben, Spiele und Overlays beginnen darunter ---- */
.tour-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 18px;
    padding: 8px 16px;
    border-bottom: 2px solid var(--accent);
    background-color: var(--bg);
    box-shadow: 0 0 14px var(--glow-color);
}

[data-wallpaper="on"] .tour-bar {
    background-color: color-mix(in srgb, var(--bg) 85%, transparent);
}

html[data-tour="on"] .screen:not(#setup-screen),
html[data-tour="on"] .settings-overlay {
    top: var(--tour-h);
}

.tour-bar-info {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.tour-bar-title {
    color: var(--accent);
    font-size: 0.75rem;
    letter-spacing: 2px;
}

.tour-bar-station {
    color: var(--text-dim);
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.tour-bar-players {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tour-p {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 14px;
    border: 2px solid var(--separator);
    background-color: var(--bg);
}

.tour-p-name {
    color: var(--text-dim);
    font-size: 1.7rem;
    line-height: 1;
}

.tour-p-pts {
    min-width: 2ch;
    color: var(--text-bright);
    font-size: 1.4rem;
    font-weight: normal;
    text-align: right;
}

.tour-p.leader {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--glow-color);
}

.tour-p.leader .tour-p-name,
.tour-p.leader .tour-p-pts {
    color: var(--accent);
}

/* frisch vergebene Punkte: kurz aufblinken, +n daneben */
.tour-p-gain {
    color: var(--accent);
    font-size: 1.4rem;
}

.tour-p.bump .tour-p-pts {
    animation: tourBump 0.9s steps(6) 2;
}

@keyframes tourBump {
    50% { color: var(--bg); background-color: var(--accent); }
}

/* ---- Zwischenstand ---- */
.tour-panel {
    max-width: 560px;
    align-items: center;
    text-align: center;
}

.tour-headline {
    color: var(--text-bright);
    font-size: 2.4rem;
    letter-spacing: 2px;
    line-height: 1;
}

.tour-headline.winner {
    color: var(--accent);
    text-shadow: 0 0 12px var(--glow-color-strong);
}

.tour-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

.tour-table th {
    padding: 2px 8px;
    border-bottom: 1px solid var(--separator);
    color: var(--text-dim);
    font-size: 1.05rem;
    font-weight: normal;
    letter-spacing: 1px;
}

.tour-table td {
    padding: 3px 8px;
    color: var(--text);
}

.tour-table .tour-name {
    text-align: left;
}

.tour-table .tour-num {
    text-align: right;
}

.tour-table tr.tour-top td {
    color: var(--bg);
    background-color: var(--accent);
}

.tour-next {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--separator);
}

.tour-next.finale {
    border: 2px solid var(--accent);
    box-shadow: 0 0 16px var(--glow-color), inset 0 0 16px var(--glow-color);
}

.tour-next.finale .tour-next-label {
    color: var(--accent);
}

.tour-next-label,
.tour-next-info {
    color: var(--text-dim);
    font-size: 1.15rem;
    letter-spacing: 2px;
}

.tour-next-game {
    color: var(--text);
    font-size: 2.6rem;
    letter-spacing: 3px;
    line-height: 1.1;
}

.tour-next-game.locked {
    color: var(--accent);
    text-shadow: 0 0 14px var(--glow-color-strong);
    animation: tourLock 0.4s steps(3);
}

@keyframes tourLock {
    from { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .tour-p.bump .tour-p-pts,
    .tour-next-game.locked {
        animation: none;
    }
}