/* ============================================
   LiftPortier – Schweizer Jass Rechner
   Design: Swiss Neon Light
   Version: 0.4.0
   ============================================ */

/* ---------- Variables ---------- */
:root {
    --bg-dark: #f0f0f5;
    --bg-card: #ffffff;
    --bg-input: #fafafe;
    --bg-hover: #f5f5fa;
    --border: #e8e8ee;
    --text: #2a2a3a;
    --text-muted: #888;
    --text-dim: #bbb;
    --accent: #c62828;
    --accent-hover: #e53935;
    --accent-light: rgba(198, 40, 40, 0.08);
    --green: #16a34a;
    --red: #dc2626;
    --orange: #ca8a04;
    --purple: #7c3aed;
    --radius: 12px;
    --radius-sm: 10px;
    --shadow: 0 2px 10px rgba(0,0,0,.06);
    --shadow-accent: 0 4px 14px rgba(198,40,40,0.2);
    --transition: 0.2s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ---------- Header ---------- */
#app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #c62828, #e53935);
    box-shadow: 0 4px 20px rgba(198,40,40,0.3);
}

#app-header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.header-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
#btn-menu {
    min-width: 80px;
    text-align: right;
}

.header-btn:hover {
    background: rgba(255,255,255,0.25);
}

/* ---------- Header Left ---------- */
.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 80px;
}

/* ---------- Header Center ---------- */
.header-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-center .logo-icon {
    font-size: 1.2rem;
    color: #fff;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

/* ---------- Swiss Flag (Header) ---------- */
.swiss-flag {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ---------- Main / Screens ---------- */
main {
    flex: 1;
    padding: 1.25rem 1rem 2rem;
    width: 100%;
}

/* .screen styles moved to animation section at end of file */

/* ---------- Home Screen ---------- */
#screen-tables,
#screen-home {
    background: url('../jass-symbols.svg') no-repeat center center;
    background-size: 90vh;
    background-attachment: scroll;
}
#screen-tables::before,
#screen-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(240, 240, 245, 0.92);
    z-index: 0;
}
#screen-tables > *,
#screen-home > * {
    position: relative;
    z-index: 1;
}

.home-logo {
    text-align: center;
    padding: 3rem 0 2.5rem;
}

.logo-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 12px rgba(198,40,40,0.3));
}

.logo-jass-symbols {
    width: 90px;
    height: 90px;
    display: block;
    margin: 0 auto 0.5rem;
    opacity: 0.85;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}

.home-logo h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
}

.subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 0.25rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Tisch-Auswahl */
.table-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.table-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}
.table-card:active {
    transform: scale(0.98);
}
.table-card.has-game {
    border-color: #2e7d32;
}
.table-card-icon {
    font-size: 1.5rem;
}
.table-card-info {
    flex: 1;
}
.table-card-name {
    font-weight: 600;
    font-size: 1rem;
}
.table-card-status {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.table-card-action {
    color: var(--text-muted);
    font-size: 1.2rem;
}
.table-card-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.3rem;
    opacity: 0.5;
}
.table-card-delete:active {
    opacity: 1;
}
.table-create {
    max-width: 400px;
    margin: 0 auto;
}
.table-create h3 {
    margin-bottom: 0.25rem;
}
.btn-block {
    display: block;
    width: 100%;
}
.table-no-tables {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem 1rem;
    font-size: 0.9rem;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
}
.table-section {
    max-width: 400px;
    margin: 0 auto;
}

.home-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: 400px;
    margin: 0 auto;
}
.home-menu .btn {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* ---------- Menu Button Icons ---------- */
.btn-icon {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 4px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.25rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #c62828, #e53935);
    color: #fff;
    box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #b71c1c, #c62828);
}

.btn-primary:disabled {
    background: #e0e0e0;
    color: #aaa;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--accent);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
}

.btn-secondary:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.btn-outline:hover {
    background: var(--accent-light);
}

.btn-danger {
    background: var(--red);
    color: #fff;
}

.btn-danger:hover {
    opacity: 0.85;
}

.btn-large {
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
    width: 100%;
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

/* ---------- Forms ---------- */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--transition);
}

.form-control:focus {
    border-color: var(--accent);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* ---------- Emoji Picker ---------- */
.emoji-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.emoji-preview {
    font-size: 2.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    border-radius: 12px;
    border: 2px solid var(--border);
}
.emoji-preview.has-emoji {
    border-color: var(--accent);
}
.btn-icon {
    font-size: 1.5rem;
    padding: 0.5rem 0.75rem;
    min-width: auto;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.25rem;
}
.emoji-option {
    font-size: 1.4rem;
    padding: 0.35rem;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}
.emoji-option:hover,
.emoji-option.selected {
    background: var(--accent);
}

/* ---------- Chip Group (Tap-Select) ---------- */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    flex: 1;
    min-width: 0;
}
.chip.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.chip-sub {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 2px;
}
.chip.selected .chip-sub {
    opacity: 0.9;
}
.dealer-chip {
    flex-direction: row;
    gap: 0.4rem;
    flex: 0 1 auto;
}
.dealer-chip .dealer-emoji {
    font-size: 1.2rem;
}

/* ---------- Steps ---------- */
.step {
    display: none;
}

.step.active {
    display: block;
}

.step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.step-actions .btn-primary {
    flex: 1;
}

.btn-back-inline {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---------- Badge ---------- */
.badge {
    display: inline-block;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
}

/* ---------- Cards ---------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1rem;
    box-shadow: var(--shadow);
}

/* ---------- Player Select List ---------- */
.player-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.player-select-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow);
}

.player-select-item:hover {
    border-color: var(--accent);
}

.player-select-item.selected {
    border-color: var(--accent);
    background: var(--accent-light);
}

.player-select-item .player-emoji {
    font-size: 1.5rem;
}

.player-select-item .player-name {
    flex: 1;
    font-weight: 500;
}

.player-select-item .check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all var(--transition);
}

.player-select-item.selected .check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- Seat Order ---------- */
/* ---------- Top-Down Table ---------- */
.table-top-wrapper {
    margin: 1.5rem auto 4rem;
    display: flex;
    justify-content: center;
}

.table-top-scene {
    position: relative;
    width: 300px;
    height: 400px;
}

/* Tischplatte (hochkant/Portrait, Holz, Draufsicht) */
.table-top-surface {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 22px,
            rgba(0,0,0,0.03) 22px,
            rgba(0,0,0,0.03) 23px
        ),
        linear-gradient(90deg, #d4a76a 0%, #c49a5c 30%, #b8894e 60%, #c49a5c 100%);
    border: 4px solid #8b6335;
    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.12),
        0 2px 12px rgba(0,0,0,0.2);
    /* size set by JS – now portrait: W < H */
    width: 120px;
    height: 200px;
}

.table-top-surface::after {
    content: 'Liftlä';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Georgia', serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(80, 45, 15, 0.25);
    text-shadow:
        0 0 1px rgba(60, 30, 5, 0.15),
        0 1px 0 rgba(255, 220, 160, 0.1);
}

/* ---------- Schreiber-Auswahl ---------- */
.scriber-selection {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(198,40,40,0.1);
}

.scriber-selection.hidden {
    display: none;
}

.scriber-selection h3 {
    font-size: 1rem;
    margin: 0 0 0.25rem;
    color: var(--accent);
}

.scriber-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5rem;
}

.scriber-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}

.scriber-chip:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.scriber-chip.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.scriber-chip .scriber-emoji {
    font-size: 1.1rem;
}

.scriber-chip .scriber-badge {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Unplatzierte Spieler (oben) */
.unplaced-players {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    margin-bottom: 0.75rem;
    min-height: 60px;
    background: var(--bg-input);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
}

.unplaced-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.unplaced-chip:hover {
    transform: scale(1.1);
}

.unplaced-chip.active {
    transform: scale(1.15);
}

.unplaced-chip.active .unplaced-avatar {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(198,40,40,0.5);
}

.unplaced-avatar {
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 2.5px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.unplaced-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.unplaced-empty {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.5rem;
}

/* Sitzplätze (Draufsicht) */
.seat-slots-top {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.seat-slot {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.2s;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.seat-slot:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.seat-slot.selected {
    transform: translate(-50%, -50%) scale(1.12);
}

.seat-slot.empty-seat .seat-chair {
    background: #b8a080;
    border-color: #9a8060;
    border-style: dashed;
}

.seat-slot.empty-seat .seat-avatar {
    background: var(--bg-input);
    border: 2.5px dashed var(--border);
    color: var(--text-muted);
    font-size: 1rem;
}

.seat-slot.highlight-seat .seat-chair {
    background: var(--accent);
    border-color: #a01c1c;
    box-shadow: 0 0 10px rgba(198,40,40,0.35);
}

.seat-slot.highlight-seat .seat-avatar {
    border-color: var(--accent);
    border-style: dashed;
    box-shadow: 0 0 10px rgba(198,40,40,0.3);
}

.seat-slot.occupied .seat-avatar {
    border-color: #6b4d28;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Stuhl (Rechteck, Draufsicht) */
.seat-chair {
    width: 36px;
    height: 30px;
    background: #8b6335;
    border: 2px solid #6b4d28;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Stuhl-Lehne (oben dicker Rand) */
.seat-chair::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 3px;
    right: 3px;
    height: 5px;
    background: #6b4d28;
    border-radius: 3px 3px 0 0;
}

/* Avatar auf dem Stuhl */
.seat-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 2.5px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.seat-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
    max-width: 60px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255,255,255,0.9);
    padding: 1px 5px;
    border-radius: 3px;
}

.seat-number-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Legacy */
.drag-handle {
    color: var(--text-dim);
    font-size: 1.1rem;
    margin-left: auto;
    cursor: grab;
}

/* ---------- Round Header ---------- */
/* Round Header (full, before trump selection) */
.round-header-full {
    margin-bottom: 1rem;
}

.round-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.round-info {
    text-align: center;
}

.round-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.round-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
}

.round-sublabel {
    display: inline;
    font-size: 1.6rem;
    color: var(--text-muted);
    font-weight: 500;
}

.round-divider-cards {
    display: flex;
    align-items: center;
    opacity: 0.7;
}

.trump-group-full {
    gap: 0.5rem;
}

.trump-icon {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.trump-icon-sm {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.trump-chip-full {
    font-size: 1.6rem;
    padding: 0.5rem 0;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trump-chip-full.suit-red {
    color: #c62828;
}

.trump-chip-full.selected {
    border-color: #2e7d32;
    background: #2e7d32;
    color: #fff;
}

.trump-chip-full.selected .trump-icon,
.trump-bar-btn.selected .trump-icon-sm {
    filter: brightness(0) invert(1);
}

.trump-chip-full.suit-red.selected {
    color: #fff;
}

/* Round Bar (compact) */
.round-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-wrap: wrap;
}

.round-bar-info {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.round-bar-info strong {
    color: var(--accent);
    font-size: 1rem;
}

.round-bar-divider {
    color: var(--border);
    font-size: 1rem;
}

/* Trump mini buttons in bar */
.trump-bar-group {
    display: flex;
    gap: 0.25rem;
}

.trump-bar-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trump-bar-btn.suit-red {
    color: #c62828;
}

.trump-bar-btn.selected {
    border-color: #2e7d32;
    background: #2e7d32;
    color: #fff;
}

.trump-bar-btn.suit-red.selected {
    color: #fff;
}

/* ---------- Bid / Tricks List ---------- */

/* Dealer group disabled */
#dealer-group.disabled-group {
    opacity: 0.35;
    pointer-events: none;
}

.bid-list,
.tricks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.bid-row,
.trick-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 2px solid var(--border);
    transition: all var(--transition);
}

.bid-row.bid-inactive {
    opacity: 0.35;
    pointer-events: none;
}

.bid-row.bid-active {
    border-color: var(--accent);
    opacity: 1;
}

.bid-row.bid-done {
    border-color: #2e7d32;
    opacity: 1;
}

.bid-row .player-emoji,
.trick-row .player-emoji {
    font-size: 1.3rem;
}

.bid-row .player-name,
.trick-row .player-name {
    flex: 1;
    font-weight: 500;
}

.bid-row .bid-info {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Tap Counter */
.bid-tap-area {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.bid-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 2rem;
    text-align: center;
}

/* Bid Row Wrapper */
.bid-row-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bid-row-wrapper .bid-row {
    flex: 1;
    min-width: 0;
}
.bid-clear-outside {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bid-clear-outside:active {
    opacity: 0.8;
}
.bid-clear-outside:disabled,
.bid-clear-outside[disabled] {
    opacity: 0.2;
    pointer-events: none;
}
.bid-clear-placeholder {
    width: 36px;
    flex-shrink: 0;
}

/* Trick Row Wrapper */
.trick-row-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.trick-row-wrapper .trick-row {
    flex: 1;
    min-width: 0;
}
.trick-clear-outside {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trick-clear-outside:active {
    opacity: 0.8;
}
.trick-clear-outside:disabled,
.trick-clear-outside[disabled] {
    opacity: 0.2;
    pointer-events: none;
}
.trick-clear-placeholder {
    width: 36px;
    flex-shrink: 0;
}

/* Trick action flash feedback */
.trick-flash-green {
    animation: flashGreen 0.4s ease;
}
.trick-flash-blue {
    animation: flashBlue 0.4s ease;
}
@keyframes flashGreen {
    0% { box-shadow: inset 0 0 0 2px #2e7d32; background: #e8f5e9; }
    100% { box-shadow: none; }
}
@keyframes flashBlue {
    0% { box-shadow: inset 0 0 0 2px #1565c0; background: #e3f2fd; }
    100% { box-shadow: none; }
}

/* Trick Row Layout */
.trick-player-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 80px;
}
.trick-player-info .player-name {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}
/* Trick Score X/X Display */
.trick-score-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.trick-score-big {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
}
.trick-score-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* DEV: Runden-Sprung (temporär) */
.dev-jump-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #fff3cd;
    border: 2px dashed #ffc107;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}
.dev-jump-bar select {
    flex: 1;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.8rem;
}

.trick-detail {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.2;
}
/* Trick button area */
.trick-btn-area {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}
/* Inline split button */
.btn-split-inline {
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    min-height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.btn-split-inline:active:not(:disabled) {
    background: var(--bg-input);
    transform: scale(0.95);
}
.btn-split-inline:disabled,
.trick-btn-area .bid-tap-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.bid-zero-btn {
    height: 44px;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--text-muted);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}
.bid-zero-btn:active {
    background: var(--text-muted);
    color: #fff;
}

.bid-tap-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.bid-tap-btn:active {
    background: var(--accent);
    color: #fff;
}

.bid-clear-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bid-clear-btn:hover,
.bid-clear-active-btn:hover {
    color: var(--accent);
}

.bid-clear-active-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bid-clear-active-btn:disabled,
.bid-clear-active-btn[disabled] {
    opacity: 0.2;
    pointer-events: none;
}

.bid-confirm-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #2e7d32;
    background: #2e7d32;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bid-confirm-btn:active {
    transform: scale(0.95);
}
.bid-confirm-btn:disabled,
.bid-confirm-btn[disabled] {
    opacity: 0.2;
    pointer-events: none;
}

.bid-tap-btn {
    padding: 0.7rem 0;
    border-radius: var(--radius-sm);
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    min-height: 48px;
    min-width: 100px;
    text-align: center;
}

.bid-tap-btn:active {
    transform: scale(0.95);
    opacity: 0.85;
}

.bid-tap-btn.disabled,
.bid-tap-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Trick result colors */
.trick-row.trick-hit {
    border-color: #2e7d32;
    background: #e8f5e9;
}
.trick-row.trick-zero-ok {
    border-color: #2e7d32;
    background: #e8f5e9;
}
.trick-row.trick-miss {
    border-color: #c62828;
    background: #ffebee;
}

.trick-bid-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Number Stepper */
.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    overflow: hidden;
}

.stepper button {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition);
}

.stepper button:hover {
    background: var(--accent-light);
}

.stepper button:disabled {
    color: var(--text-dim);
    cursor: not-allowed;
}

.stepper .stepper-value {
    width: 38px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
}

/* Bid Total */
.bid-total {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-muted);
    box-shadow: var(--shadow);
}

.bid-total strong {
    color: var(--accent);
}

.bid-diff {
    margin-top: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
}
.bid-diff.diff-over { color: #c62828; }
.bid-diff.diff-under { color: #e65100; }
.bid-diff.diff-exact { color: #2e7d32; }

/* ---------- Scoreboard ---------- */
.scoreboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.round-badge {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--accent-light);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.scoreboard-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.scoreboard-actions-secondary {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.scoreboard-actions-secondary .btn {
    flex: 1;
}
.btn-outline-muted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: #bbb;
    color: #333;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}
.btn-outline-muted:active {
    background: #999;
}
.btn-bett {
    background: #e99a1a;
    color: #333;
}
.btn-bett:active {
    background: #cc8515;
}
.btn-danger-subtle {
    background: linear-gradient(135deg, #c62828, #e53935);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-accent);
    margin-top: 0.5rem;
    font-size: 0.95rem;
    padding: 0.85rem 1.25rem;
}

.scoreboard-table-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1rem;
    padding: 0 1rem;
    max-height: 70vh;
}

.scoreboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.scoreboard-table th,
.scoreboard-table td {
    padding: 0.5rem 0.65rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.scoreboard-table th {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    background: var(--bg-input);
    z-index: 2;
}

.scoreboard-table th:first-child {
    z-index: 3;
}

.scoreboard-table th:first-child,
.scoreboard-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 1;
}

.scoreboard-table th:first-child {
    background: var(--bg-input);
}

.scoreboard-table tfoot td {
    font-weight: 700;
    color: var(--accent);
    border-top: 2px solid var(--accent);
    border-bottom: none;
    background: #fdf5f5;
}

.score-positive { color: var(--green); }
.score-negative { color: var(--red); }
.score-zero { color: var(--text-dim); }

/* ---------- Result Screen ---------- */
.result-trophy {
    text-align: center;
    font-size: 4rem;
    padding: 1.5rem 0 0.5rem;
}

.result-ranking {
    margin: 1.5rem 0;
}

.result-rank {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow);
}

.result-rank:first-child {
    border-color: var(--orange);
    background: #fefce8;
}

.rank-position {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.result-rank:first-child .rank-position {
    background: var(--orange);
    color: #fff;
}

.rank-name {
    flex: 1;
    font-weight: 600;
}

.rank-score {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--accent);
}

/* ---------- Manage Players ---------- */
.manage-player-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.manage-player-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.manage-player-item .player-emoji {
    font-size: 1.5rem;
}

.manage-player-item .player-name {
    flex: 1;
    font-weight: 500;
}

.manage-player-item .player-actions {
    display: flex;
    gap: 0.25rem;
}

/* ---------- Tabs ---------- */
.tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}

.tab {
    flex: 1;
    padding: 0.55rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition);
}

.tab.active {
    background: var(--accent);
    color: #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ---------- Settings ---------- */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    box-shadow: var(--shadow);
}

.setting-value {
    color: var(--text-muted);
}

.setting-item.danger {
    border-color: rgba(220, 38, 38, 0.3);
}

.app-info {
    text-align: center;
    margin-top: 2rem;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.app-info p + p {
    margin-top: 0.15rem;
}

/* ---------- Footer ---------- */
footer {
    text-align: center;
    padding: 1rem;
    color: var(--text-dim);
    font-size: 0.8rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

.modal h3 {
    margin-bottom: 0.5rem;
}

.modal p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ---------- Rules Screen ---------- */
.rules-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.rules-section h3 {
    color: var(--accent);
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

.rules-step {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rules-step:last-child {
    margin-bottom: 0;
}

.rules-step-number {
    min-width: 32px;
    height: 32px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}

.rules-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.rules-suit {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    text-align: center;
}

.rules-suit .suit-icon {
    font-size: 2rem;
}

.rules-suit .suit-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}

.rules-score-box {
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    margin-bottom: 0.5rem;
}

.rules-score-box.positive {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.rules-score-box.special {
    background: #fefce8;
    border: 1px solid #fde68a;
}

.rules-score-box.negative {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.card-values {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.card-value {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.card-value.highlight,
.card-value-high {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ---------- Rules: Suit colors ---------- */
.suit-symbol { font-size: 2.2rem; }
.suit-name { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
.suit-red { color: var(--accent); }

.card-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0.75rem 0 0.5rem;
}

/* ---------- Rules: Lift Chart ---------- */
.lift-chart {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    text-align: center;
    margin: 0.75rem 0;
}

.lift-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 80px;
}

.lift-bar {
    width: 16px;
    background: linear-gradient(to top, #c62828, #e53935);
    border-radius: 3px 3px 0 0;
}

.lift-bar-peak {
    background: linear-gradient(to top, #c62828, #ff5252);
}

.lift-bar-pause {
    background: linear-gradient(to top, #1565c0, #42a5f5);
    width: 6px !important;
    opacity: 0.7;
}

.lift-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    font-family: monospace;
}

/* ---------- Resume Bar ---------- */
.resume-bar {
    margin: 0 auto 1.25rem;
    max-width: 400px;
    width: 100%;
}

.home-rules-link {
    max-width: 400px;
    margin: 1.5rem auto 1rem;
}

.btn-rules-home {
    width: 100%;
    justify-content: center;
}

.btn-rules-home .btn-icon {
    display: inline;
    margin-bottom: 0;
}

.resume-bar.hidden {
    display: none;
}

.btn-resume {
    width: 100%;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #2e7d32, #43a047);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(46,125,50,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.btn-resume .btn-icon {
    display: inline;
    margin-bottom: 0;
}

.btn-resume:hover {
    background: linear-gradient(135deg, #43a047, #66bb6a);
}

.btn.disabled-game {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------- Side Menu ---------- */
.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    transition: opacity 0.25s;
}

.side-menu-overlay.hidden {
    display: none;
}

.side-menu {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: var(--bg-card);
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 201;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
}

.side-menu.open {
    right: 0;
}

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #c62828, #e53935);
}

.side-menu-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

.side-menu-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.side-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.side-menu-item:hover {
    background: var(--accent-light);
    color: var(--accent);
}

/* ---------- Rules: Score Boxes (named) ---------- */
.rules-score-box.score-hit {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.rules-score-box.score-zero {
    background: #fefce8;
    border: 1px solid #fde68a;
}

.rules-score-box.score-miss {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* ---------- App Footer ---------- */
.app-footer {
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

/* ---------- Empty State ---------- */
.empty-state {
    text-align: center;
    color: var(--text-dim);
    padding: 2.5rem 1rem;
    font-size: 0.9rem;
}

/* ---------- Hint ---------- */
.hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

/* ---------- Utilities ---------- */
.hidden {
    display: none !important;
}

h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text);
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ---------- Responsive: Kleine Screens ---------- */
@media (max-width: 400px) {
    /* Bid-Row: Buttons auf neue Zeile */
    .bid-row.bid-active {
        flex-wrap: wrap;
    }
    .bid-row.bid-active .bid-tap-area {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
        padding-top: 0.3rem;
    }

    /* Bid-Row Wrapper: Confirm/Delete Buttons in die Row */
    .bid-row-wrapper {
        flex-wrap: wrap;
    }
    .bid-row-wrapper .bid-row {
        flex-basis: 100%;
    }
    .bid-row-wrapper .bid-confirm-btn,
    .bid-row-wrapper .bid-clear-outside {
        margin-left: auto;
    }

    /* Trick-Row: Buttons auf neue Zeile */
    .trick-row {
        flex-wrap: wrap;
    }
    .trick-row .trick-btn-area {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
        padding-top: 0.3rem;
    }

    .trick-row-wrapper {
        flex-wrap: wrap;
    }
    .trick-row-wrapper .trick-row {
        flex-basis: 100%;
    }
    .trick-row-wrapper .trick-clear-outside {
        margin-left: auto;
    }
}

/* ---------- Responsive: Tablet ---------- */
@media (min-width: 600px) {
    .table-create,
    .table-section,
    .home-menu,
    .resume-bar,
    .home-rules-link {
        max-width: 560px;
    }
}

/* ---------- Responsive: Desktop ---------- */
@media (min-width: 768px) {
    main {
        padding: 2rem 1.5rem 3rem;
    }

    .home-logo {
        padding: 4rem 0 3rem;
    }

    .table-create,
    .table-section,
    .home-menu,
    .resume-bar,
    .home-rules-link {
        max-width: 640px;
    }
}

@media (min-width: 1024px) {
    .table-create,
    .table-section,
    .home-menu,
    .resume-bar,
    .home-rules-link {
        max-width: 720px;
    }
}

/* ============ ANIMATIONS (v0.6.0) ============ */

/* Trumpf Flip Animation */
.trump-chip-full,
.trump-bar-btn {
    transition: transform 0.3s ease, border-color 0.2s, background 0.2s;
    transform-style: preserve-3d;
}

.trump-chip-full.selected,
.trump-bar-btn.selected {
    animation: trumpFlip 0.5s ease;
}

@keyframes trumpFlip {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(90deg) scale(1.1); }
    100% { transform: rotateY(0deg) scale(1); }
}

/* Trumpf-Silhouette im Hintergrund (SVG) */
.trump-bg-svg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

.trump-bg-svg.visible {
    display: block;
    opacity: 0.06;
}

/* Side Menu Logo */
.side-menu-logo {
    width: 36px;
    height: 36px;
    margin-right: 0.5rem;
}

/* Screen Transitions - replace existing fadeIn */
.screen {
    display: none;
    opacity: 0;
    transform: translateX(20px);
    position: relative;
}

.screen.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
    animation: screenSlideIn 0.3s ease forwards;
}

.screen.exit {
    display: block;
    opacity: 1;
    animation: screenSlideOut 0.2s ease forwards;
}

@keyframes screenSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes screenSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-20px); }
}

/* Button Feedback */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary:active {
    box-shadow: 0 2px 8px rgba(198,40,40,0.3);
}

/* Ripple Effect */
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleEffect {
    to { transform: scale(4); opacity: 0; }
}

/* Erfolgs-Pulse bei korrekter Ansage */
.bid-row.bid-done {
    animation: successPulse 0.4s ease;
}

@keyframes successPulse {
    0% { box-shadow: 0 0 0 0 rgba(46,125,50,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(46,125,50,0.2); }
    100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
}

.trick-row.trick-hit {
    animation: successPulse 0.4s ease;
}

.trick-row.trick-zero-ok {
    animation: specialPulse 0.4s ease;
}

@keyframes specialPulse {
    0% { box-shadow: 0 0 0 0 rgba(230,81,0,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(230,81,0,0.2); }
    100% { box-shadow: 0 0 0 0 rgba(230,81,0,0); }
}

/* Shake bei Fehler */
.shake {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

.trick-row.trick-miss {
    animation: errorShake 0.4s ease;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Undo Button */
.btn-undo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-undo:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.btn-undo:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Player Options Modal */
.player-options-modal {
    max-width: 320px;
}

.player-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.player-option-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition);
}

.player-option-btn:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.player-option-btn .option-icon {
    font-size: 1.5rem;
}

.player-option-btn .option-text {
    display: flex;
    flex-direction: column;
}

.player-option-btn .option-text strong {
    font-size: 0.95rem;
}

.player-option-btn .option-text small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Paused Player Row */
.bid-row.player-paused,
.trick-row.player-paused {
    opacity: 0.5;
    background: var(--bg-input);
    border-style: dashed;
}

/* Left Player Row */
.bid-row.player-left,
.trick-row.player-left {
    opacity: 0.3;
    background: #fef2f2;
    border-color: #fecaca;
}

/* 3-Dot Player Menu Button */
.btn-player-menu {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-player-menu:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* End Game Modal */
.end-game-modal {
    max-width: 360px;
}

.end-game-status {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin: 1rem 0;
}

.end-game-progress {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.end-game-progress strong {
    color: var(--accent);
}

.end-game-standings {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.end-game-player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.end-game-player .player-emoji {
    font-size: 1.1rem;
}

.end-game-player .player-name {
    flex: 1;
}

.end-game-player .player-score {
    font-weight: 700;
    color: var(--accent);
}

.end-game-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #991b1b;
}

.end-game-warning .warning-icon {
    font-size: 1.2rem;
}

.end-game-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.end-game-actions .btn {
    width: 100%;
    justify-content: center;
}

.end-game-actions .btn-danger {
    background: transparent;
    color: var(--red);
    border: 2px solid var(--red);
}

.end-game-actions .btn-danger:hover {
    background: #fef2f2;
}

/* --- Print Container (unsichtbar am Screen) --- */
.print-container {
    display: none;
}

/* --- Print Styles --- */
@media print {
    /* Alles ausblenden ausser Print-Container */
    body > *:not(.print-container) {
        display: none !important;
    }
    .print-container {
        display: block !important;
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: #000;
    }
    .print-container h1 {
        font-size: 22px;
        margin-bottom: 4px;
    }
    .print-container h2 {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 8px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
    }
    .print-container .print-date {
        color: #666;
        font-size: 13px;
        margin-bottom: 16px;
    }
    .print-container .print-rank {
        font-size: 14px;
        padding: 4px 0;
    }
    .print-container .print-rank:first-child {
        font-weight: bold;
        font-size: 16px;
    }
    .print-container table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        margin-top: 8px;
    }
    .print-container th,
    .print-container td {
        border: 1px solid #ccc;
        padding: 4px 8px;
        text-align: center;
    }
    .print-container th {
        background: #f0f0f0;
        font-weight: 600;
    }
    .print-container td.pos { color: #16a34a; }
    .print-container td.neg { color: #dc2626; }
    .print-container .total-row td {
        border-top: 2px solid #333;
        background: #f9f9f9;
    }
    .print-container .print-footer {
        margin-top: 24px;
        font-size: 11px;
        color: #999;
        text-align: center;
    }
}

/* ---------- Pause Screen ---------- */
.pause-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.pause-emoji {
    font-size: 5rem;
    animation: pause-bounce 2s ease-in-out infinite;
}

.pause-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    margin-top: 0.25rem;
}

.pause-timer-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.pause-timer {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.pause-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: pause-spin 1s linear infinite;
}

@keyframes pause-spin {
    to { transform: rotate(360deg); }
}

@keyframes pause-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ============================================
   ACCOUNT SELECT & AUTH SCREENS
   ============================================ */
.account-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.btn-account {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--card-bg, #fff);
    border: 2px solid var(--border, #e0e0e0);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-size: 1rem;
}

.btn-account:hover, .btn-account:active {
    border-color: var(--accent, #c62828);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.account-emoji {
    font-size: 1.8rem;
}

.account-name {
    font-weight: 700;
    font-size: 1.1rem;
}

/* PIN Modal */
#pin-modal, #create-account-modal, #migration-modal {
    display: none;
}
#pin-modal.active, #create-account-modal.active, #migration-modal.active {
    display: flex;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
}
.modal-actions .btn {
    flex: 1;
}