/* ===== RESET & BASE ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-deep: #0a0e27;
    --bg-mid: #1a1f4e;
    --bg-panel: rgba(26, 31, 78, 0.85);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-accent: rgba(0, 180, 216, 0.3);
    --red: #e63946;
    --yellow: #ffd60a;
    --blue: #00b4d8;
    --green: #2ec4b6;
    --gray: #6c757d;
    --text: #edf2f4;
    --text-dim: #8d99ae;
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font);
    background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-mid) 50%, var(--bg-deep) 100%);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== HEADER ===== */
#app-header {
    text-align: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(10, 14, 39, 0.9);
    position: sticky;
    top: 0;
    z-index: 100;
}

.lang-toggle {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border: 1px solid var(--border-accent);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
    z-index: 101;
}

.lang-toggle:hover {
    background: rgba(0, 180, 216, 0.2);
}

.logo {
    font-size: clamp(1rem, 4.5vw, 1.5rem);
    background: linear-gradient(90deg, var(--yellow), var(--red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 13rem);
    margin-left: auto;
    margin-right: auto;
}
.logo-short { display: none; }
@media (max-width: 480px) {
    .logo-full { display: none; }
    .logo-short { display: inline; letter-spacing: 1px; font-weight: 800; }
    /* Reserve only ~7rem for the compact controls instead of 11rem so the title gets room */
    .logo { max-width: calc(100vw - 7rem); font-size: clamp(0.9rem, 4vw, 1.2rem); }
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: 0.3rem;
}

.breadcrumb span {
    margin: 0 0.3rem;
}

.breadcrumb .bc-active {
    color: var(--yellow);
    font-weight: 600;
}

/* ===== VIEWS ===== */
.view {
    display: none;
    padding: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== PANELS ===== */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn:not(:disabled):active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--red), #c1121f);
    color: white;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border: 1px solid var(--border-subtle);
}

.btn-accent {
    background: linear-gradient(135deg, var(--yellow), #e6b800);
    color: #1a1a2e;
}

.btn-danger {
    background: rgba(230, 57, 70, 0.2);
    color: var(--red);
    border: 1px solid var(--red);
}

.btn-small {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
}

.btn-icon {
    font-size: 1.4em;
}

/* ===== HOME ===== */
.home-container {
    text-align: center;
    padding: 3rem 1rem;
}

.home-container h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* Headline — gradient text + tighter line-height for the new GameSet HK welcome */
.home-container h2.home-headline {
    font-size: clamp(1.6rem, 5.5vw, 2.6rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(120deg, var(--yellow) 0%, var(--red) 55%, var(--accent, #FF7324) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.75rem;
    text-shadow: 0 0 30px rgba(255, 115, 36, 0.15);
}

.subtitle {
    color: var(--text-dim);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.subtitle.home-tagline {
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    opacity: 0.9;
}

.home-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.resume-section {
    margin-top: 1.5rem;
}

.divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 1.5rem auto;
    width: 60%;
}

.resume-section p {
    color: var(--text-dim);
    margin-bottom: 0.8rem;
}

/* ===== BADGE ===== */
.badge {
    background: var(--blue);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}

.info-text {
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* Input hint — appears under an input to describe behavior or preview outcome */
.input-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-dim);
    opacity: 0.85;
}
.input-hint em {
    color: var(--accent, #FF7324);
    font-style: normal;
    font-weight: 600;
}
.input-hint code {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.05em 0.35em;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92em;
}

/* ===== REGISTRATION ===== */
.registration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
    .registration-grid {
        grid-template-columns: 1fr;
    }
}

.reg-input-area label,
.wheel-input-area label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

textarea {
    width: 100%;
    padding: 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 0.8rem;
}

textarea::placeholder {
    color: rgba(141, 153, 174, 0.4);
    font-style: italic;
}

textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
}

.player-list {
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.5rem;
}

.player-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.player-list li:hover {
    background: rgba(255, 255, 255, 0.05);
}

.player-list li .player-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.player-list li .btn-delete {
    background: none;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 0.3rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.player-list li .btn-delete:hover {
    opacity: 1;
}

.reg-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.reg-actions {
    display: flex;
    gap: 0.8rem;
}

.reg-round-control {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.reg-round-control label {
    font-weight: 600;
}
.reg-round-control input[type="number"] {
    padding: 0.35rem 0.5rem;
    font-size: 1rem;
    text-align: center;
}

/* ===== TIMER ===== */
.round-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.timer {
    font-size: 5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    line-height: 1.1;
    margin: 0.5rem 0;
    transition: color 0.3s;
}

.timer.warning {
    color: var(--yellow);
}

.timer.danger {
    color: var(--red);
    animation: flash 0.5s ease infinite alternate;
}

@keyframes flash {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

.timer-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== PAIRINGS ===== */
.pairings-container {
    margin-bottom: 1.5rem;
}

.pairing-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
}

.pairing-row.bye-row {
    grid-template-columns: 50px minmax(0, 1fr);
    opacity: 0.7;
}

.table-number {
    text-align: center;
    font-weight: 700;
    color: var(--blue);
    font-size: 0.85rem;
}

.pairing-player {
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pairing-player:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pairing-player.winner {
    color: var(--green);
}

.pairing-player.loser {
    color: var(--red);
}

.pairing-player.draw {
    color: var(--gray);
}

.result-buttons {
    display: flex;
    gap: 0.3rem;
}

.result-btn {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.15s;
}

.result-btn:hover {
    border-color: var(--blue);
    color: var(--text);
}

.result-btn.selected-win-a {
    background: var(--green);
    color: white;
    border-color: var(--green);
}

.result-btn.selected-draw {
    background: var(--gray);
    color: white;
    border-color: var(--gray);
}

.result-btn.selected-win-b {
    background: var(--green);
    color: white;
    border-color: var(--green);
}

.bye-tag {
    color: var(--yellow);
    font-style: italic;
    font-size: 0.9rem;
}

.round-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* ===== STANDINGS ===== */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.standings-table th {
    background: rgba(0, 0, 0, 0.85);
    padding: 0.7rem 0.75rem;
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    border-bottom: 2px solid var(--border-accent);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.standings-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

/* Right-align numeric tiebreaker columns (4..8) for readability */
.standings-table th:nth-child(n+4),
.standings-table td:nth-child(n+4) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.standings-table tbody tr {
    transition: background 0.15s;
    cursor: pointer;
}

.standings-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.standings-table tbody tr:first-child td {
    color: var(--yellow);
    font-weight: 700;
}

.standings-table tbody tr:nth-child(2) td {
    color: #c0c0c0;
    font-weight: 600;
}

.standings-table tbody tr:nth-child(3) td {
    color: #cd7f32;
    font-weight: 600;
}

.standings-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

#standings-table-wrapper {
    background: var(--bg-deep);
    border-radius: 10px;
    padding: 1rem;
    overflow-x: auto;
}

/* ===== LUCKY WHEEL ===== */
.wheel-layout {
    display: grid;
    grid-template-columns: 250px 1fr 200px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .wheel-layout {
        grid-template-columns: 1fr;
    }
}

.wheel-input-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.wheel-option {
    margin-top: 0.5rem;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.wheel-canvas-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.wheel-pointer {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid var(--yellow);
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    margin-bottom: -5px;
}

#wheel-canvas {
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(0, 180, 216, 0.2), 0 0 60px rgba(0, 0, 0, 0.4);
}

#btn-spin {
    margin-top: 1rem;
}

.wheel-history {
    list-style: decimal;
    padding-left: 1.2rem;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.wheel-history li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.wheel-footer {
    margin-top: 1rem;
    text-align: center;
}

/* ===== MODALS ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.open {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, var(--bg-mid), var(--bg-deep));
    border: 1px solid var(--border-accent);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: modalIn 0.25s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal-close {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.8rem;
    cursor: pointer;
    transition: color 0.15s;
}

.modal-close:hover {
    color: var(--text);
}

/* Trainer Card */
.trainer-card h3 {
    font-size: 1.5rem;
    color: var(--yellow);
    margin-bottom: 1rem;
    text-align: center;
}

.trainer-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.stat-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 0.8rem;
    text-align: center;
}

.stat-box .stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.stat-box .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.trainer-timeline {
    border-left: 2px solid var(--border-accent);
    padding-left: 1rem;
    margin-top: 1rem;
}

.timeline-item {
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}

.timeline-round {
    font-weight: 700;
    color: var(--blue);
}

.timeline-result-win { color: var(--green); }
.timeline-result-loss { color: var(--red); }
.timeline-result-draw { color: var(--gray); }
.timeline-result-bye { color: var(--yellow); }

/* Winner Modal */
.winner-overlay {
    z-index: 1100;
}

.winner-modal {
    text-align: center;
    max-width: 400px;
}

.winner-text {
    margin-bottom: 1.5rem;
}

.winner-label {
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.winner-name {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--yellow);
    text-shadow:
        0 0 10px rgba(255, 214, 10, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 214, 10, 0.2);
    line-height: 1.2;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ===== TOAST ===== */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--blue);
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 180, 216, 0.3);
}

.toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== ACTIVE TOGGLE BUTTON ===== */
.btn-active {
    background: var(--red) !important;
    color: white !important;
    border-color: var(--red) !important;
}

/* ===== PROJECTOR MODE ===== */
body.projector-mode #app-header {
    display: none;
}

body.projector-mode .view {
    max-width: 100%;
    padding: 1rem 2rem;
}

body.projector-mode .round-header {
    margin-bottom: 2rem;
}

body.projector-mode .timer {
    font-size: 8rem;
}

body.projector-mode .pairing-row {
    font-size: 1.3rem;
    padding: 1rem 1.2rem;
    margin-bottom: 0.7rem;
}

body.projector-mode .pairing-player {
    font-size: 1.3rem;
}

body.projector-mode .table-number {
    font-size: 1.1rem;
}

body.projector-mode .result-btn {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

body.projector-mode .round-footer {
    margin-top: 1.5rem;
}

body.projector-mode .timer-controls {
    margin-bottom: 1rem;
}

/* ===== RESPONSIVE ===== */

/* --- Safe area for notch/Dynamic Island (iPhone) --- */
@supports (padding-top: env(safe-area-inset-top)) {
    #app-header {
        padding-top: calc(0.8rem + env(safe-area-inset-top));
    }
    .view {
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
    }
    .toast {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
    .round-footer,
    .standings-footer,
    .wheel-footer,
    .reg-footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* --- iPad Mini 7 (744px) & tablets --- */
@media (max-width: 820px) {
    .wheel-layout {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .wheel-history-area {
        grid-column: 1 / -1;
    }

    .pairing-row {
        gap: 0.6rem;
    }

    .result-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
    }

    .timer {
        font-size: 4.5rem;
    }

    .standings-table th,
    .standings-table td {
        padding: 0.6rem 0.7rem;
    }
}

/* --- iPad Mini 7 portrait / large phones landscape --- */
@media (max-width: 744px) {
    .registration-grid {
        grid-template-columns: 1fr;
    }

    .wheel-layout {
        grid-template-columns: 1fr;
    }

    .wheel-canvas-area {
        order: -1;
    }

    #wheel-canvas {
        width: 340px;
        height: 340px;
    }

    .timer-controls {
        gap: 0.4rem;
    }

    .timer-controls .btn-small {
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
    }

    .round-footer {
        justify-content: center;
    }

    .standings-footer {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* --- iPhone 17 / phones (< 430px viewport) --- */
@media (max-width: 430px) {
    /* Header */
    #app-header {
        padding: 0.6rem 0.5rem;
    }
    .logo {
        font-size: 1.15rem;
    }
    .breadcrumb {
        font-size: 0.75rem;
    }

    /* Views */
    .view {
        padding: 0.8rem;
    }

    /* Home */
    .home-container {
        padding: 2rem 0.5rem;
    }
    .home-container h2 {
        font-size: 1.7rem;
    }
    .subtitle {
        font-size: 0.95rem;
    }
    .home-buttons {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    .home-buttons .btn-large {
        width: 100%;
    }
    .resume-section .btn {
        width: 100%;
        margin-bottom: 0.4rem;
    }

    /* Panel */
    .panel {
        padding: 0.8rem;
        border-radius: 12px;
    }
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Buttons */
    .btn {
        font-size: 0.88rem;
        padding: 0.55rem 1.1rem;
    }
    .btn-large {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    .btn-small {
        padding: 0.3rem 0.65rem;
        font-size: 0.78rem;
    }

    /* Timer */
    .timer {
        font-size: 3.2rem;
        margin: 0.3rem 0;
    }
    .timer-controls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
        max-width: 100%;
    }
    .timer-controls .btn-small {
        width: 100%;
        padding: 0.45rem 0.3rem;
        font-size: 0.75rem;
    }

    /* Pairings — card layout for phone */
    .pairing-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.7rem;
        text-align: center;
    }
    .pairing-row .table-number {
        font-size: 0.75rem;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .pairing-row .pairing-player {
        font-size: 0.95rem;
        padding: 0.4rem;
    }
    .pairing-row .result-buttons {
        justify-content: center;
        gap: 0.25rem;
    }
    .result-btn {
        flex: 1;
        padding: 0.5rem 0.3rem;
        font-size: 0.78rem;
        text-align: center;
        /* Bigger touch targets for mobile */
        min-height: 40px;
    }

    .pairing-row.bye-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .bye-tag {
        display: block;
        font-size: 0.8rem;
    }

    /* Round footer */
    .round-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    .round-footer .btn {
        width: 100%;
    }

    /* Registration */
    .reg-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .reg-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    .reg-actions .btn {
        width: 100%;
    }
    .player-list {
        max-height: 220px;
    }
    textarea {
        font-size: 16px; /* Prevent iOS zoom on focus */
    }

    /* Standings */
    .standings-table th,
    .standings-table td {
        padding: 0.5rem 0.4rem;
        font-size: 0.8rem;
    }
    .standings-table th {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }
    .standings-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    .standings-footer .btn {
        width: 100%;
    }

    /* Wheel */
    #wheel-canvas {
        width: 280px;
        height: 280px;
    }
    .wheel-pointer {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 24px solid var(--yellow);
    }
    .wheel-input-buttons {
        flex-direction: column;
    }
    .wheel-input-buttons .btn {
        width: 100%;
    }
    .wheel-footer {
        margin-top: 0.5rem;
    }

    /* Modal */
    .modal-content {
        width: 95%;
        padding: 1.2rem;
        border-radius: 12px;
        max-height: 85vh;
    }
    .winner-name {
        font-size: 1.8rem;
    }
    .trainer-stats {
        gap: 0.5rem;
    }
    .stat-box {
        padding: 0.6rem;
    }
    .stat-box .stat-value {
        font-size: 1.1rem;
    }

    /* Toast closer to bottom on phone */
    .toast {
        bottom: 1rem;
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
        max-width: 90%;
    }
}

/* --- iPhone 16e (375px viewport, 6.1" OLED, notch) --- */
@media (max-width: 390px) {
    /* Header — compact for notch */
    #app-header {
        padding: 0.5rem 0.4rem;
    }
    .logo {
        font-size: 1.1rem;
    }
    .breadcrumb {
        font-size: 0.72rem;
    }

    /* Home — tighter spacing */
    .home-container {
        padding: 1.5rem 0.3rem;
    }
    .home-container h2 {
        font-size: 1.5rem;
    }
    .subtitle {
        font-size: 0.88rem;
        margin-bottom: 1.5rem;
    }
    .home-buttons {
        gap: 0.8rem;
    }
    .home-buttons .btn-large {
        padding: 0.75rem 1.2rem;
        font-size: 0.95rem;
    }
    .divider {
        width: 80%;
        margin: 1rem auto;
    }

    /* Views */
    .view {
        padding: 0.6rem;
    }

    /* Panel */
    .panel {
        padding: 0.7rem;
        border-radius: 10px;
    }
    .panel-header h2 {
        font-size: 1.15rem;
    }

    /* Timer — optimized for 375px */
    .timer {
        font-size: 3rem;
        letter-spacing: 1px;
    }
    .timer-controls {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3rem;
        padding: 0 0.2rem;
    }
    .timer-controls .btn-small {
        padding: 0.4rem 0.2rem;
        font-size: 0.72rem;
        letter-spacing: 0;
    }

    /* Pairings — tighter card */
    .pairing-row {
        padding: 0.6rem;
        gap: 0.3rem;
        margin-bottom: 0.4rem;
        border-radius: 8px;
    }
    .pairing-row .table-number {
        font-size: 0.7rem;
        padding-bottom: 0.15rem;
    }
    .pairing-row .pairing-player {
        font-size: 0.88rem;
        padding: 0.3rem;
    }
    .result-btn {
        font-size: 0.74rem;
        padding: 0.45rem 0.2rem;
        min-height: 40px;
        border-radius: 5px;
    }
    .bye-tag {
        font-size: 0.75rem;
    }

    /* Round footer */
    .round-footer .btn {
        font-size: 0.82rem;
        padding: 0.5rem 0.8rem;
    }

    /* Registration */
    textarea {
        rows: 6;
        font-size: 16px;
        padding: 0.6rem;
    }
    .player-list {
        max-height: 200px;
    }
    .reg-footer .info-text {
        font-size: 0.8rem;
    }

    /* Standings */
    .standings-table th {
        font-size: 0.65rem;
        padding: 0.45rem 0.3rem;
        letter-spacing: 0.3px;
    }
    .standings-table td {
        padding: 0.45rem 0.3rem;
        font-size: 0.78rem;
    }
    #standings-table-wrapper {
        padding: 0.6rem;
    }

    /* Wheel — fit 375px */
    #wheel-canvas {
        width: 260px;
        height: 260px;
    }
    .wheel-pointer {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 20px solid var(--yellow);
    }
    #btn-spin {
        margin-top: 0.7rem;
    }
    .wheel-history {
        font-size: 0.82rem;
    }

    /* Modal */
    .modal-content {
        width: 96%;
        padding: 1rem;
        border-radius: 10px;
    }
    .trainer-card h3 {
        font-size: 1.2rem;
    }
    .trainer-stats {
        gap: 0.4rem;
    }
    .stat-box {
        padding: 0.5rem;
        border-radius: 8px;
    }
    .stat-box .stat-label {
        font-size: 0.65rem;
    }
    .stat-box .stat-value {
        font-size: 1rem;
    }
    .timeline-item {
        font-size: 0.82rem;
        margin-bottom: 0.6rem;
    }

    /* Winner modal */
    .winner-name {
        font-size: 1.6rem;
    }
    .winner-label {
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    /* Toast */
    .toast {
        bottom: 0.8rem;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    /* Badge */
    .badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
}

/* --- Very small phones (iPhone SE 3 / older, ~320px) --- */
@media (max-width: 340px) {
    .timer {
        font-size: 2.5rem;
    }
    .home-container h2 {
        font-size: 1.3rem;
    }
    #wheel-canvas {
        width: 220px;
        height: 220px;
    }
    .timer-controls {
        grid-template-columns: repeat(2, 1fr);
    }
    .result-btn {
        font-size: 0.68rem;
    }
    .pairing-row .pairing-player {
        font-size: 0.82rem;
    }
    .standings-table th {
        font-size: 0.6rem;
    }
    .standings-table td {
        font-size: 0.72rem;
    }
}

/* --- Landscape phone (short height) --- */
@media (max-height: 500px) and (orientation: landscape) {
    .timer {
        font-size: 2.5rem;
        margin: 0.2rem 0;
    }
    .round-header {
        margin-bottom: 0.5rem;
    }
    #app-header {
        padding: 0.4rem;
    }
    .logo {
        font-size: 1rem;
    }
    .home-container {
        padding: 1rem 0.5rem;
    }
    .view {
        padding: 0.5rem;
    }
    .panel {
        padding: 0.6rem;
    }
}

/* --- Touch device optimizations --- */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
    }
    .btn-small {
        min-height: 38px;
    }
    .result-btn {
        min-height: 44px;
    }
    .player-list li {
        padding: 0.7rem 0.8rem;
        min-height: 44px;
    }
    .player-list li .btn-delete {
        font-size: 1.5rem;
        padding: 0 0.5rem;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Disable hover effects on touch */
    .btn:not(:disabled):hover {
        transform: none;
        box-shadow: none;
    }
    .btn:not(:disabled):active {
        transform: scale(0.96);
        opacity: 0.85;
    }
    .pairing-player:hover {
        background: none;
    }
    .pairing-player:active {
        background: rgba(255, 255, 255, 0.08);
    }
    /* Prevent text selection on rapid taps */
    .result-btn,
    .pairing-player,
    .btn {
        -webkit-user-select: none;
        user-select: none;
    }
    /* Scrollable standings on touch */
    #standings-table-wrapper {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== ADVANCED RECOVERY ===== */
.adv-step {
    background: rgba(10, 14, 39, 0.4);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.adv-step-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    color: var(--text);
}

.adv-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--green));
    color: var(--bg-deep);
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.adv-step label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.adv-step textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text);
    padding: 0.6rem;
    font-family: var(--font);
    font-size: 0.95rem;
    resize: vertical;
}

.adv-step textarea:focus {
    outline: none;
    border-color: var(--blue);
}

.adv-row-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.adv-round-block {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.8rem;
    margin-bottom: 0.8rem;
}

.adv-round-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.adv-round-header h4 {
    color: var(--yellow);
    font-size: 1rem;
}

.adv-pairing-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26, 31, 78, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.adv-table-label {
    font-weight: 700;
    color: var(--blue);
    min-width: 2.5rem;
    font-size: 0.85rem;
}

.adv-result-label {
    color: var(--green);
    font-weight: 600;
    font-size: 0.85rem;
}

.adv-player-select {
    flex: 1 1 140px;
    min-width: 120px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    font-family: var(--font);
    font-size: 0.9rem;
}

.adv-player-select:focus {
    outline: none;
    border-color: var(--blue);
}

.adv-result-buttons {
    display: flex;
    gap: 0.3rem;
}

.adv-result-buttons .result-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
}

.adv-round-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.adv-preview-area {
    margin-top: 0.8rem;
    max-height: 360px;
    overflow-y: auto;
}

.adv-validation-messages {
    margin-bottom: 0.8rem;
}

.adv-errors,
.adv-warnings,
.adv-ok {
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
}

.adv-errors {
    background: rgba(230, 57, 70, 0.15);
    border: 1px solid var(--red);
    color: #ffb3b9;
}

.adv-warnings {
    background: rgba(255, 214, 10, 0.12);
    border: 1px solid var(--yellow);
    color: #ffe78a;
}

.adv-ok {
    background: rgba(46, 196, 182, 0.12);
    border: 1px solid var(--green);
    color: #9bebdf;
}

.adv-errors ul,
.adv-warnings ul {
    margin-top: 0.3rem;
    padding-left: 1.2rem;
}

.adv-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 700px) {
    .adv-pairing-row {
        gap: 0.4rem;
    }
    .adv-player-select {
        flex: 1 1 100%;
    }
    .adv-result-buttons {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

/* ===== WHEEL PICKER MODAL ===== */
.wheel-pick-modal {
    max-width: 480px;
    width: 95%;
}

.wheel-pick-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.8rem 0;
}

.wheel-pick-list {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.2);
}

.wheel-pick-row {
    display: grid;
    grid-template-columns: auto 3rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.wheel-pick-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.wheel-pick-cb {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--blue);
}

.wheel-pick-rank {
    color: var(--yellow);
    font-weight: 600;
    font-size: 0.85rem;
}

.wheel-pick-name {
    color: var(--text);
}

.wheel-pick-record {
    color: var(--text-dim);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.wheel-pick-footer {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ===== COMPACT MODE — small timer, 2-column pairings for 16 tables on screen ===== */
.compact-mode .round-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    text-align: left;
}

.compact-mode #round-title {
    font-size: 1.2rem;
    margin: 0;
}

.compact-mode .timer {
    font-size: 1.6rem;
    margin: 0;
    letter-spacing: 1px;
}

.compact-mode .timer-controls {
    justify-content: flex-end;
    gap: 0.3rem;
}

.compact-mode .timer-controls .btn-small {
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
}

.compact-mode .pairings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.8rem;
    margin-bottom: 0.8rem;
}

.compact-mode .pairing-row {
    grid-template-columns: 36px minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.compact-mode .pairing-row.bye-row {
    grid-template-columns: 36px 1fr;
}

.compact-mode .pairing-player {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-mode .table-number {
    font-size: 0.9rem;
}

.compact-mode .result-btn {
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
}

.compact-mode .result-buttons {
    gap: 0.2rem;
}

/* On narrow screens (mobile) compact mode falls back to a single column */
@media (max-width: 720px) {
    .compact-mode .pairings-container {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   UI POLISH LAYER v2 — Deep Purple (default :root cascade)
   Dark purple-toned neutrals, deep purple accent, soft pink highlight.
   Palette:
     --color-bg-header  #151121
     --color-bg-base    #1B172B
     --color-bg-surface #251F3A
     --color-border     #352D4F
     --color-primary    #6E32A8  (hover #5D2A8D)
     --color-accent-subtle #FF9ED3
     --color-text       #FFFFFF / #A3A3A3
   ===================================================================== */

:root {
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --color-bg-header: #151121;
    --color-bg-base: #1B172B;
    --color-bg-surface: #251F3A;
    --color-bg-surface-2: #2A243F;
    --color-border: #352D4F;
    --color-border-soft: #2A243F;

    --color-primary: #6E32A8;
    --color-primary-hover: #5D2A8D;
    --color-primary-rgb: 110, 50, 168;
    --color-primary-soft: rgba(var(--color-primary-rgb), 0.12);

    --color-accent-subtle: #FF9ED3;

    --color-text: #FFFFFF;
    --color-text-secondary: #A3A3A3;
    --color-text-muted: #6e6e6e;

    --color-win: #2ec4b6;
    --color-draw: #E8D9A8;
    --color-loss: #e63946;

    --gold: #ffd700;
    --silver: #c0c9d4;
    --bronze: #cd7f32;

    --ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

html, body {
    background: var(--color-bg-base);
    color: var(--color-text);
    font-feature-settings: 'cv11', 'ss01';
}

body {
    background-attachment: fixed;
}

/* ----- Header ----- */
#app-header {
    background: var(--color-bg-header);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.9rem 1rem;
}

.logo {
    font-family: var(--font);
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.5px;
    background: none;
    -webkit-text-fill-color: var(--color-text);
    color: var(--color-text);
    filter: none;
    text-transform: uppercase;
}

.breadcrumb {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
.breadcrumb .bc-link {
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.12s;
}
.breadcrumb .bc-link:hover { color: var(--color-primary); }
.breadcrumb .bc-active { color: var(--color-primary); font-weight: 600; }

.lang-toggle {
    background: var(--color-bg-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-weight: 600;
}
.lang-toggle:hover {
    background: var(--color-bg-surface-2);
    border-color: var(--color-primary);
    box-shadow: none;
}

.header-controls {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: flex;
    gap: 0.4rem;
    z-index: 101;
}
.header-controls .lang-toggle {
    position: static;
    top: auto;
    right: auto;
}

.theme-dropdown {
    position: relative;
    display: inline-block;
}
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}
.theme-toggle .theme-chevron {
    font-size: 0.7rem;
    opacity: 0.75;
    transition: transform 0.15s ease;
}
.theme-toggle[aria-expanded="true"] .theme-chevron {
    transform: rotate(180deg);
}
/* Phone — compact header controls so the GAMESET HK title isn't clipped */
@media (max-width: 480px) {
    .header-controls { gap: 0.3rem; top: 0.6rem; right: 0.6rem; }
    .header-controls .lang-toggle { padding: 0.3rem 0.5rem; font-size: 0.78rem; }
    .theme-toggle { padding: 0.3rem 0.5rem; }
    /* Hide the long theme name on phone (e.g. "Original" / "Deep Purple"); keep just the chevron */
    .theme-toggle #theme-toggle-label { display: none; }
}
.theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.7);
    z-index: 200;
}
.theme-menu[hidden] { display: none; }
.theme-menu li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.12s ease;
}
.theme-menu li:hover {
    background: var(--color-bg-surface-2);
}
.theme-menu li.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}
.theme-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* ----- Panels (flat cards on surface) ----- */
.panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: none;
    backdrop-filter: none;
}
.panel::before { content: none; }

.panel-header h2,
.panel h2,
.view h2 {
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* ----- Buttons ----- */
.btn {
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0.2px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.12s, border-color 0.12s, transform 0.08s, box-shadow 0.12s;
    border: 1px solid transparent;
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}
.btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: none;
    filter: none;
}
.btn:not(:disabled):active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: none;
}
.btn-primary:not(:disabled):hover {
    background: var(--color-primary-hover);
    box-shadow: none;
}

.btn-accent {
    background: var(--color-primary);
    color: #fff;
    box-shadow: none;
}
.btn-accent:not(:disabled):hover { background: var(--color-primary-hover); }

.btn-secondary {
    background: var(--color-bg-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.btn-secondary:not(:disabled):hover {
    background: #363636;
    border-color: #444;
}

.btn-danger {
    background: transparent;
    border: 1px solid var(--color-loss);
    color: var(--color-loss);
}
.btn-danger:not(:disabled):hover {
    background: rgba(230, 57, 70, 0.12);
}

.btn-large {
    padding: 1rem 1.8rem;
    font-size: 1rem;
    border-radius: 10px;
}

.btn-small {
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    border-radius: 6px;
}

/* ----- Home hero ----- */
.home-container {
    padding: 4rem 1rem 3rem;
    position: relative;
}
.home-container::before { content: none; }

.home-container h2 {
    font-size: 3rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.5px;
    background: none;
    -webkit-text-fill-color: var(--color-text);
    color: var(--color-text);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 0.6rem;
}

.subtitle {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.5rem;
    letter-spacing: 0.3px;
}

/* ===== Home tiles: balanced 2×2 glass grid ===== */
.home-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    max-width: 720px;
    margin: 0 auto;
}

@media (max-width: 560px) {
    .home-buttons { grid-template-columns: 1fr; gap: 0.85rem; }
}

.home-buttons .home-tile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.8rem 1.1rem 1.6rem;
    min-height: 170px;
    border-radius: 14px;
    font: 700 0.95rem/1.1 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: linear-gradient(155deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%), var(--color-surface);
    color: #e8e8e8;
    transition: transform 0.16s ease, border-color 0.18s, box-shadow 0.18s, color 0.18s;
    box-shadow: 0 10px 24px -14px rgba(0,0,0,0.7);
}
.home-buttons .home-tile::after { content: none; }
.home-buttons .home-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.35;
    transition: opacity 0.18s, height 0.18s;
}
.home-buttons .home-tile-glow {
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 140%;
    background: radial-gradient(circle at 50% 0%, var(--color-primary-soft), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: -1;
}
.home-buttons .home-tile:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 18px 38px -16px rgba(var(--color-primary-rgb),0.45), 0 8px 20px -10px rgba(0,0,0,0.7);
}
.home-buttons .home-tile:hover::before { opacity: 1; height: 3px; }
.home-buttons .home-tile:hover .home-tile-glow { opacity: 1; }
.home-buttons .home-tile:active { transform: translateY(-1px); }

/* Primary tiles (Swiss + Knockout) — orange filled */
.home-buttons .home-tile.home-tile-primary {
    background: linear-gradient(160deg, var(--color-primary) 0%, #d95a1a 100%);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 14px 30px -16px rgba(var(--color-primary-rgb),0.55), 0 6px 16px -8px rgba(0,0,0,0.7);
}
.home-buttons .home-tile.home-tile-primary::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    opacity: 0.55;
}
.home-buttons .home-tile.home-tile-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -14px rgba(var(--color-primary-rgb),0.7), 0 8px 18px -8px rgba(0,0,0,0.7);
    color: #fff;
}
.home-buttons .home-tile.home-tile-primary .home-tile-glow {
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
}

/* Secondary tiles (Wheel + Advanced) — dark glass */
.home-buttons .home-tile.home-tile-secondary {
    background: linear-gradient(155deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 60%), #1f1f1f;
}

/* Spin-battle primary tiles — distinct cyan/violet gradient so they don't blend with TCG orange */
.home-buttons .home-tile.home-tile-spin {
    background: linear-gradient(160deg, #22D3EE 0%, #6E32A8 100%);
    border-color: #22D3EE;
    box-shadow: 0 14px 30px -16px rgba(34,211,238,0.55), 0 6px 16px -8px rgba(0,0,0,0.7);
}
.home-buttons .home-tile.home-tile-spin:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -14px rgba(34,211,238,0.7), 0 8px 18px -8px rgba(0,0,0,0.7);
}
.home-buttons .home-tile.home-tile-spin .btn-icon {
    color: #fff;
}

/* TESTING badge — diagonal sticker on the corner of in-progress feature tiles */
.home-buttons .home-tile-testing {
    position: relative;
}
.home-buttons .home-tile-testing .testing-badge {
    position: absolute;
    top: 12px;
    right: -28px;
    background: #FFD700;
    color: #000;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 0.18rem 2rem;
    transform: rotate(35deg);
    transform-origin: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 2;
    pointer-events: none;
    text-shadow: none;
}

.home-buttons .home-tile .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: var(--color-primary);
    transition: background 0.18s, color 0.18s, transform 0.18s;
}
.home-buttons .home-tile.home-tile-primary .btn-icon {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.home-buttons .home-tile:hover .btn-icon {
    transform: scale(1.06);
    background: rgba(255,255,255,0.14);
    color: var(--color-primary);
}
.home-buttons .home-tile.home-tile-primary:hover .btn-icon {
    background: rgba(255,255,255,0.28);
    color: #fff;
}
.home-tile-label { display: inline-block; }

/* Override the old .btn-icon font-size targeted at unicode glyphs */
.home-buttons .home-tile .btn-icon svg { display: block; }

@media (max-width: 560px) {
    .home-buttons .home-tile { min-height: 140px; padding: 1.4rem 0.9rem; font-size: 0.88rem; }
    .home-buttons .home-tile .btn-icon { width: 38px; height: 38px; }
    .home-buttons .home-tile .btn-icon svg { width: 28px; height: 28px; }
}

.resume-section {
    margin-top: 2rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}
.resume-section .divider { display: none; }
.resume-section p { color: var(--color-text-secondary); margin: 0; }

/* ----- Badges ----- */
.badge {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid rgba(var(--color-primary-rgb), 0.35);
    box-shadow: none;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.info-text {
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}

/* ----- Textareas / Inputs ----- */
textarea,
input[type="text"],
select {
    border-radius: 8px;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: border-color 0.12s, box-shadow 0.12s;
}

textarea::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

textarea:focus,
input[type="text"]:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring);
}

.player-list {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.player-list li {
    border-bottom: 1px solid var(--color-border-soft);
}
.player-list li:last-child { border-bottom: none; }
.player-list li:hover { background: #212121; }

/* ----- Round view / timer ----- */
.timer {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-text);
    text-shadow: none;
}
.timer.warning { color: var(--color-draw); text-shadow: none; }
.timer.danger  { color: var(--color-loss); text-shadow: none; }

/* ----- Pairing rows (flat card list) ----- */
.pairings-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pairing-row {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    box-shadow: none;
    transition: border-color 0.12s, background 0.12s;
}

.pairing-row:hover {
    border-color: #444;
    background: #1e1e1e;
    box-shadow: none;
}

.pairing-row .table-number {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.82rem;
}

.pairing-row.bye-row {
    background: var(--color-bg-base);
    border-color: rgba(var(--color-primary-rgb), 0.35);
    border-left: 3px solid var(--color-primary);
}

.result-btn {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-secondary);
    font-weight: 600;
    transition: all 0.12s;
}
.result-btn:hover {
    background: var(--color-bg-surface-2);
    color: var(--color-text);
    border-color: #444;
}

.result-btn.selected-win-a,
.result-btn.selected-win-b {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: none;
}

.result-btn.selected-draw {
    background: rgba(255, 214, 10, 0.14);
    border-color: var(--color-draw);
    color: var(--color-draw);
    box-shadow: none;
}

.pairing-player.winner {
    color: var(--color-primary);
    text-shadow: none;
    font-weight: 700;
}
.pairing-player.loser { color: var(--color-text-muted); opacity: 0.8; }
.pairing-player.draw { color: var(--color-draw); }

/* ----- Standings ----- */
.standings-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.standings-table thead th {
    background: var(--color-bg-header);
    color: var(--color-text-secondary);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.72rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.standings-table tbody tr {
    transition: background 0.12s;
}
.standings-table tbody tr:hover { background: #212121; }

.standings-table tbody td {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--color-border-soft);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.standings-table tbody tr:nth-child(1) td:first-child,
.standings-table tbody tr:nth-child(2) td:first-child,
.standings-table tbody tr:nth-child(3) td:first-child {
    font-weight: 800;
    position: relative;
    padding-left: 2.6rem;
}

.standings-table tbody tr:nth-child(1) td:first-child::before,
.standings-table tbody tr:nth-child(2) td:first-child::before,
.standings-table tbody tr:nth-child(3) td:first-child::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
}

.standings-table tbody tr:nth-child(1) td:first-child { color: var(--gold); }
.standings-table tbody tr:nth-child(1) td:first-child::before {
    background: radial-gradient(circle at 30% 30%, #fff6b3, #ffd700 70%, #b8860b);
}
.standings-table tbody tr:nth-child(2) td:first-child { color: var(--silver); }
.standings-table tbody tr:nth-child(2) td:first-child::before {
    background: radial-gradient(circle at 30% 30%, #ffffff, #d9e0e8 70%, #8d99ae);
}
.standings-table tbody tr:nth-child(3) td:first-child { color: var(--bronze); }
.standings-table tbody tr:nth-child(3) td:first-child::before {
    background: radial-gradient(circle at 30% 30%, #ffd4a3, #cd7f32 70%, #804020);
}

/* ----- Trainer card modal ----- */
.modal-content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.stat-box {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.stat-label {
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
}

.stat-value {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-primary);
}

/* ----- Wheel picker ----- */
.wheel-pick-modal {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}
.wheel-pick-list {
    background: var(--color-bg-base);
    border-color: var(--color-border);
}
.wheel-pick-row:hover {
    background: #212121;
}
.wheel-pick-rank { color: var(--color-primary); }
.wheel-pick-cb { accent-color: var(--color-primary); }

/* ----- Toast ----- */
.toast {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    font-weight: 600;
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #2f2f2f;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ----- Round header layout ----- */
.round-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
}
.round-header #round-title {
    text-align: left;
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.round-header .timer { justify-self: center; font-size: 3.2rem; }
.round-header .timer-controls { justify-self: end; }

@media (max-width: 720px) {
    .round-header { grid-template-columns: 1fr; text-align: center; }
    .round-header #round-title, .round-header .timer, .round-header .timer-controls { justify-self: center; text-align: center; }
}

/* ----- Compact mode retains the flat aesthetic ----- */
.compact-mode .pairing-row { background: var(--color-bg-base); }
.compact-mode .round-header { border-bottom: none; padding-bottom: 0; margin-bottom: 0.8rem; }

/* ----- Section titles ----- */
.adv-step-title,
.reg-list-area h3,
.wheel-history-area h3 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 0.95rem;
}

.adv-step-num {
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin-right: 0.5rem;
}

/* ----- Projector mode still inherits the flat look ----- */
body.projector-mode {
    background: var(--color-bg-base);
}

/* ----- Elevated card polish: top-edge highlight + deep shadow ----- */
.panel,
.pairing-row,
.stat-box,
.home-buttons .btn-large,
.resume-section,
.player-list,
.modal-content,
.wheel-pick-modal,
.standings-table,
.adv-step,
.adv-round-block {
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.8);
}

.home-buttons .btn-large.btn-primary,
.home-buttons .btn-large.btn-accent {
    border-top-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.8);
}

.pairing-row:hover {
    box-shadow: 0 16px 28px -8px rgba(0, 0, 0, 0.9);
}

.modal-content {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.85);
}

/* ===== STATIC PAGES (landing / about / faq / privacy / terms) ===== */
.static-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.5rem;
    font-size: 0.88rem;
}
.static-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.static-nav a:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.static-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    line-height: 1.7;
    color: var(--color-text);
}

.static-page h1 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 0.5rem;
    font-style: italic;
    text-transform: uppercase;
}

.static-page h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-top: 2.2rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-transform: uppercase;
}

.static-page p,
.static-page li {
    color: #cfcfcf;
}

.static-page ul {
    padding-left: 1.3rem;
    margin: 0.6rem 0 1rem;
}

.static-page li {
    margin-bottom: 0.4rem;
}

.static-page a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted rgba(var(--color-primary-rgb), 0.5);
}
.static-page a:hover {
    border-bottom-color: var(--color-primary);
}

/* Anchor-styled buttons on static pages must keep their button look */
.static-page a.btn {
    border-bottom: none;
    color: inherit;
}
.static-page a.btn.btn-primary,
.static-page a.btn.btn-accent {
    color: #fff;
}
.static-page a.btn.btn-secondary {
    color: var(--color-text);
}
.static-page a.btn.btn-danger {
    color: var(--color-loss);
}

.static-page code {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--color-primary);
}

.doc-meta {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* ===== LANDING HERO ===== */
.static-page .hero {
    text-align: center;
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2.5rem;
}

.hero .badge {
    display: inline-block;
    margin-bottom: 1.2rem;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.05;
    margin: 0 0 1rem;
}
.hero-title em {
    color: var(--color-primary);
    font-style: italic;
}

.hero-sub {
    max-width: 640px;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
    color: var(--color-text-secondary);
}

.hero-cta {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta .btn {
    text-decoration: none;
    border-bottom: none;
}

/* ===== LANDING FEATURE GRID ===== */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}
@media (max-width: 860px) {
    .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .features { grid-template-columns: 1fr; }
}

.feature-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.4rem 1.2rem;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.8);
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.8rem 0 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.feature-card p {
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.feature-icon {
    font-size: 1.8rem;
    color: var(--color-primary);
    line-height: 1;
}

/* ===== CTA section ===== */
.cta-section {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.8);
}

.cta-section h2 {
    font-size: 1.6rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    border-bottom: none;
    padding-bottom: 0;
}

.cta-section p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.cta-section .btn {
    text-decoration: none;
}

/* ===== SITE FOOTER ===== */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 1.8rem 1rem 2.2rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    margin-top: 3rem;
}

.footer-links {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.footer-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
}
.footer-links a:hover {
    color: var(--color-primary);
}

.footer-note {
    margin: 0;
    line-height: 1.5;
}
.footer-disclaimer {
    max-width: 720px;
    margin: 0 auto 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    opacity: 0.85;
}

/* ===== CLOUD: view-mode banner, share modal, view-only hiding ===== */
.view-mode-banner {
    background: linear-gradient(90deg, var(--color-primary), #ff9555);
    color: #1a1a1a;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 200;
}
.view-mode-banner .view-mode-text {
    text-transform: none;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.82rem;
    letter-spacing: 0;
}
.view-mode-banner .live-dot {
    width: 8px;
    height: 8px;
    background: #b00020;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(176, 0, 32, 0.6);
    animation: live-pulse 1.4s infinite;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(176, 0, 32, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(176, 0, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(176, 0, 32, 0); }
}

/* Hide all editing affordances for viewers */
body.view-only #btn-publish,
body.view-only .btn-delete,
body.view-only .reg-input-area,
body.view-only .reg-actions,
body.view-only .round-footer,
body.view-only .panel-header > button:not(.view-safe),
body.view-only .timer-controls,
body.view-only #timer-display,
body.view-only #breadcrumb,
body.view-only .site-footer,
body.view-only #view-mode-banner,
body.view-only #view-standings .standings-footer {
    display: none !important;
}
body.view-only .result-buttons,
body.view-only .bo3-games,
body.view-only .spin-controls,
body.view-only .spin-penalty-block,
body.view-only .spin-hint,
body.view-only .deck-btn {
    pointer-events: none;
    opacity: 0.45;
}
/* In view mode, the spin-side cards still exist (so viewers see the score) but can't open the cross popup */
body.view-only .spin-side {
    pointer-events: none;
    cursor: default;
}
/* Re-enable just the info "i" button so viewers can still open a player card */
body.view-only .spin-side .spin-info-btn {
    pointer-events: auto;
}
/* Cross popup, bey picker, and any open popups should never appear in view mode */
body.view-only .spin-cross,
body.view-only .spin-bey-picker {
    display: none !important;
}
body.view-only .pairing-row,
body.view-only .player-list li,
body.view-only .standings-table tbody tr {
    cursor: default;
}
body.view-only .home-buttons .btn-large[onclick*="registration"],
body.view-only .home-buttons .btn-large[onclick*="advanced"] {
    display: none;
}

/* Publish button "active" state */
.btn.btn-active {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

/* Inline share panel (replaces share modal) */
.share-panel {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.8);
}

.share-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    transition: background 0.12s;
}
.share-panel-header:hover {
    background: rgba(var(--color-primary-rgb), 0.06);
}
.share-panel-live {
    color: var(--color-primary);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.share-panel-id {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}
.share-panel-id strong {
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 3px;
    margin-left: 0.3rem;
}
.share-panel-chevron {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.share-panel.expanded .share-panel-chevron {
    transform: rotate(180deg);
}

.share-panel-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.share-panel.expanded .share-panel-body {
    max-height: 520px;
}

.share-panel-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    padding: 0.5rem 1rem 1.1rem;
    border-top: 1px solid var(--color-border);
    align-items: start;
}
@media (max-width: 640px) {
    .share-panel-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

.share-qr-wrap {
    background: #ffffff;
    border-radius: 10px;
    padding: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
}
.share-qr-wrap img {
    display: block;
    width: 220px;
    height: 220px;
    border-radius: 6px;
}

.share-panel-info {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

.share-link-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.share-link-row input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.share-link-row input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring);
}

.share-panel-info > .btn-danger {
    align-self: flex-start;
}

/* Hide the share panel entirely for viewers */
body.view-only #share-panel { display: none !important; }

/* ===== Viewer status (connecting / not found / error) ===== */
.viewer-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-base);
    z-index: 150;
    padding: 2rem;
}
.viewer-status-box {
    text-align: center;
    max-width: 420px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 2.2rem 1.6rem;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.8);
}
.viewer-status-box p {
    margin: 0.6rem 0;
    font-size: 1rem;
}
.viewer-status-dot {
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: viewer-dot 1.2s infinite ease-in-out;
}
@keyframes viewer-dot {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50%      { transform: scale(1.2); opacity: 1;   }
}
.viewer-status-id {
    margin-top: 1rem !important;
    font-family: var(--font-mono);
    letter-spacing: 2px;
}
.viewer-status-id strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* Viewer pin: lets a player pin their own pairing to the top in view-only mode */
.viewer-pin { display: none; }
body.view-only .viewer-pin {
    display: block;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin: 0.75rem 0 1rem;
}
.viewer-pin-search {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.viewer-pin-search input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
}
.viewer-pin-search input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.viewer-pin-result:not(:empty) { margin-top: 0.75rem; }
.viewer-pin-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.viewer-pin-result .pairing-row.pinned {
    background: rgba(var(--color-primary-rgb), 0.06);
    border: 1px solid rgba(var(--color-primary-rgb), 0.35);
}
.viewer-pin-empty {
    color: var(--color-text-muted, #888);
    font-size: 0.9rem;
}

/* Ad slot: shown in both admin and player mode. Replace inner content with an ad unit. */
.viewer-ad-slot {
    display: block;
    max-width: 1200px;
    margin: 1rem auto;
    padding: 0 1rem;
}
.viewer-ad-slot .ad-slot-inner {
    min-height: 250px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #777);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Viewer share button: small square icon button at the right of round title (player mode only) */
.viewer-share-btn { display: none; }
body.view-only .viewer-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: auto;
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
body.view-only .viewer-share-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
body.view-only .viewer-share-btn svg { display: block; }

/* In view-only mode, round-header collapses to title (left) + share button (right) on one row.
   Force this layout at all viewport sizes so the mobile media query below doesn't re-center the title. */
body.view-only .round-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    grid-template-columns: none !important;
    text-align: left !important;
    flex-wrap: nowrap;
}
body.view-only .round-header #round-title {
    text-align: left !important;
    justify-self: start !important;
    flex: 0 1 auto;          /* don't hog all the space — leave room for buttons */
    min-width: 0;            /* allow shrinking */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.view-only .round-header #btn-viewer-share {
    flex: 0 0 auto;
}
@media (max-width: 480px) {
    body.view-only .round-header { gap: 0.4rem; }
    body.view-only .round-header #round-title { font-size: 1.05rem; }
}

/* ----- Viewer tabs — flip between live round + standings while watching ----- */
.viewer-tabs {
    display: none;        /* hidden by default; only viewers see it */
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    justify-content: center;
}
body.view-only .viewer-tabs {
    display: flex;
}
.viewer-tab {
    flex: 1 1 0;
    max-width: 220px;
    padding: 0.55rem 0.9rem;
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.viewer-tab:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-text);
}
.viewer-tab-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.viewer-tab-active:hover {
    background: var(--color-primary);
    color: #fff;
}
@media (max-width: 480px) {
    .viewer-tabs { padding: 0.45rem 0.6rem; }
    .viewer-tab { padding: 0.5rem 0.6rem; font-size: 0.82rem; }
}

/* Viewer share QR modal */
.viewer-share-modal {
    text-align: center;
    max-width: 360px;
}
.viewer-share-qr-wrap {
    background: #fff;
    padding: 0.75rem;
    border-radius: 6px;
    display: inline-block;
    margin: 0.75rem 0 1rem;
}
.viewer-share-qr-wrap img {
    display: block;
}
.viewer-share-modal .share-link-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.viewer-share-modal .share-link-row input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
}

/* Tournament meta inputs (name + date) on registration view */
.reg-meta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.reg-meta-field { display: flex; flex-direction: column; gap: 0.3rem; }
.reg-meta-field label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-muted, #888);
    font-weight: 600;
}
.reg-meta-field input {
    padding: 0.55rem 0.75rem;
    background: var(--color-surface);
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
}
.reg-meta-field input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.reg-meta-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
@media (max-width: 720px) {
    .reg-meta { grid-template-columns: 1fr; }
}

/* Spin Battle — per-match pairing card */
.pairing-row.pairing-row-spin {
    display: block;
    background: linear-gradient(160deg, rgba(34,211,238,0.08), rgba(110,50,168,0.05));
    border: 1px solid rgba(34,211,238,0.35);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    gap: 0;
}
.spin-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.spin-row-header .table-number {
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}
.spin-row-status {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.spin-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.spin-side {
    position: relative;          /* anchor for cross popup */
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
    min-width: 0;
    user-select: none;
    text-align: center;          /* both A and B centered for consistency */
}
.spin-side:not(.spin-side-locked):hover { background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.45); }
.spin-side:not(.spin-side-locked):active { transform: scale(0.98); }
.spin-side.is-open { background: rgba(34,211,238,0.20); border-color: var(--cyan, #22D3EE); box-shadow: 0 0 0 4px rgba(34,211,238,0.15); }
.spin-side.winner { border-color: var(--green, #2ec4b6); background: rgba(46,196,182,0.12); }
.spin-side.spin-side-locked { cursor: pointer; }   /* still tappable to open trainer card after lock */

/* Small info badge on each player card → opens trainer-card popup (history, OWP, BattlePts) */
.spin-info-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: rgba(255,255,255,0.08);
    color: var(--text-dim);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, transform 0.12s;
    z-index: 5;
}
.spin-info-btn:hover  { background: rgba(255,255,255,0.18); color: #fff; transform: scale(1.1); }
.spin-info-btn:active { transform: scale(0.95); }
.spin-name {
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spin-points {
    margin-top: 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}
.spin-points-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-primary, #FF7324);
}
.spin-points-target {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin-left: 0.15rem;
}
.spin-vs {
    color: var(--text-dim);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    align-self: center;
}
/* Cross popup — opens when an enabled .spin-side is tapped. The container fills the player
 * card exactly (inset:0); each button is positioned JUST OUTSIDE the card edge so the score
 * stays fully visible and the button placement adapts to the card's actual size.
 */
.spin-cross {
    position: absolute;
    inset: 0;                     /* matches the player card's bounding box */
    pointer-events: none;         /* only buttons are interactive */
    z-index: 50;
    animation: spinCrossIn 180ms cubic-bezier(0.2, 1.4, 0.5, 1);
}
@keyframes spinCrossIn {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes spinCrossBtnIn {
    0%   { opacity: 0; transform: var(--rest-tx, translate(0,0)) scale(0.6); }
    60%  { opacity: 1; transform: var(--rest-tx, translate(0,0)) scale(1.08); }
    100% { opacity: 1; transform: var(--rest-tx, translate(0,0)) scale(1); }
}
.spin-cross-btn {
    position: absolute;
    pointer-events: auto;
    padding: 0.65rem 1rem;
    min-width: 4.5rem;
    background: linear-gradient(155deg, #2a2a3a, #1a1a26);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 8px 22px -6px rgba(0,0,0,0.85), 0 0 0 5px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform 0.1s, filter 0.12s;
    white-space: nowrap;
    animation: spinCrossBtnIn 240ms cubic-bezier(0.2, 1.4, 0.5, 1) backwards;
}
.spin-cross-btn:hover  { filter: brightness(1.18); }
.spin-cross-btn:active { transform: var(--rest-tx, translate(0,0)) scale(0.94); }

/* Edge-anchored: each arm sits just OUTSIDE the corresponding edge of the player card */
.spin-cross-top {
    bottom: calc(100% + 6px); left: 50%;
    --rest-tx: translateX(-50%);
    transform: translateX(-50%);
    border-color: #ef4444;
    background: linear-gradient(165deg, #ef4444 0%, #b81b1b 100%);
    box-shadow: 0 8px 22px -6px rgba(239,68,68,0.55), 0 0 0 5px rgba(0,0,0,0.55);
    animation-delay: 0ms;
}
.spin-cross-right {
    left: calc(100% + 6px); top: 50%;
    --rest-tx: translateY(-50%);
    transform: translateY(-50%);
    border-color: #06b6d4;
    background: linear-gradient(165deg, #06b6d4 0%, #0e7490 100%);
    box-shadow: 0 8px 22px -6px rgba(6,182,212,0.55), 0 0 0 5px rgba(0,0,0,0.55);
    animation-delay: 40ms;
}
.spin-cross-bottom {
    top: calc(100% + 6px); left: 50%;
    --rest-tx: translateX(-50%);
    transform: translateX(-50%);
    border-color: #94a3b8;
    background: linear-gradient(165deg, #64748b 0%, #334155 100%);
    box-shadow: 0 8px 22px -6px rgba(100,116,139,0.55), 0 0 0 5px rgba(0,0,0,0.55);
    animation-delay: 80ms;
}
.spin-cross-left {
    right: calc(100% + 6px); top: 50%;
    --rest-tx: translateY(-50%);
    transform: translateY(-50%);
    border-color: #f59e0b;
    background: linear-gradient(165deg, #f59e0b 0%, #b45309 100%);
    box-shadow: 0 8px 22px -6px rgba(245,158,11,0.55), 0 0 0 5px rgba(0,0,0,0.55);
    animation-delay: 120ms;
}
/* Optional 5th finish: appears between the bottom (Survivor) button and the bey log when Stadium Out is enabled */
.spin-cross-extra {
    top: calc(100% + 60px); left: 50%;
    --rest-tx: translateX(-50%);
    transform: translateX(-50%);
    border-color: #a855f7;
    background: linear-gradient(165deg, #a855f7 0%, #6b21a8 100%);
    box-shadow: 0 8px 22px -6px rgba(168,85,247,0.55), 0 0 0 5px rgba(0,0,0,0.55);
    animation-delay: 160ms;
    font-size: 0.78rem;
}

/* Hint underneath the scoreboard when no popup is open and match isn't locked */
.spin-hint {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: -0.2rem 0 0.55rem;
    opacity: 0.85;
    animation: spinHintPulse 2.4s ease-in-out infinite;
}
@keyframes spinHintPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}

@media (max-width: 480px) {
    .spin-cross-btn { font-size: 0.85rem; min-width: 4rem; padding: 0.55rem 0.75rem; }
}

/* ===== PRINT — clean standings page for shop walls ===== */
@media print {
    /* hard reset to white-on-black-free for paper */
    html, body {
        background: #fff !important;
        color: #000 !important;
    }
    /* hide everything except the standings panel */
    #app-header,
    #breadcrumb,
    #view-mode-banner,
    .home-buttons,
    .reg-actions,
    .round-actions,
    .standings-footer,
    #share-panel,
    #viewer-pin,
    #viewer-ad-slot,
    .viewer-ad-slot,
    #updates-panel,
    .site-footer,
    .footer,
    .ad-slot-inner,
    button,
    .lang-toggle,
    .theme-dropdown,
    .header-controls {
        display: none !important;
    }
    /* show the standings table cleanly */
    #view-standings { display: block !important; }
    .view:not(#view-standings) { display: none !important; }
    .panel {
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    #standings-title {
        color: #000 !important;
        margin: 0 0 0.6cm !important;
        font-size: 18pt !important;
    }
    #standings-table-wrapper {
        background: #fff !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .standings-table {
        font-size: 10pt !important;
    }
    .standings-table th {
        background: #eee !important;
        color: #333 !important;
        position: static !important;       /* sticky breaks paged layout */
        backdrop-filter: none !important;
        border-bottom: 2px solid #666 !important;
    }
    .standings-table td {
        color: #000 !important;
        border-bottom: 1px solid #ccc !important;
    }
    .standings-table tbody tr:first-child td,
    .standings-table tbody tr:nth-child(2) td,
    .standings-table tbody tr:nth-child(3) td {
        color: #000 !important;
        font-weight: 700 !important;
    }
    /* watermark / footer */
    body::after {
        content: 'gameset-hk.com';
        display: block;
        position: fixed;
        bottom: 0.6cm;
        left: 0;
        right: 0;
        text-align: center;
        color: #888;
        font-size: 8pt;
        font-family: 'JetBrains Mono', monospace;
    }
    /* avoid splitting the table awkwardly across pages */
    .standings-table { page-break-inside: auto; }
    .standings-table tr { page-break-inside: avoid; page-break-after: auto; }
    .standings-table thead { display: table-header-group; }
}

/* Hide the timer when running a Spin Battle tournament — Beyblade matches are point-target, not time-bound */
body.gametype-spin #timer-display,
body.gametype-spin .timer-controls {
    display: none !important;
}

/* 3-on-3 Bey picker — replaces the cross popup after a finish is selected */
.spin-cross.spin-bey-picker {
    inset: auto;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 0.6rem 0.7rem;
    background: linear-gradient(155deg, #1a1a2e, #0f0f1f);
    border: 2px solid var(--cyan, #22D3EE);
    border-radius: 12px;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.85), 0 0 0 5px rgba(0,0,0,0.55);
    pointer-events: auto;
    width: max-content;
    height: auto;
    animation: spinCrossIn 180ms cubic-bezier(0.2, 1.4, 0.5, 1);
}
.spin-bey-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cyan, #22D3EE);
    text-align: center;
    margin-bottom: 0.45rem;
    white-space: nowrap;
}
.spin-bey-row {
    display: flex;
    gap: 0.45rem;
}
.spin-bey-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    background: linear-gradient(155deg, #2a2a3a, #1a1a26);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s, filter 0.12s, border-color 0.12s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.spin-bey-btn:hover  { filter: brightness(1.18); border-color: var(--cyan, #22D3EE); }
.spin-bey-btn:active { transform: scale(0.94); }
.spin-bey-num {
    font-size: 1.4rem;
    line-height: 1;
}

/* Bey tag in the battle log */
.spin-log-bey {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    margin-right: 0.15rem;
    background: rgba(34,211,238,0.18);
    color: var(--cyan, #22D3EE);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Trainer card — per-battle / per-game sub-list under each match */
.timeline-sub {
    margin-top: 0.3rem;
    padding-left: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.55rem;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.timeline-sub-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    white-space: nowrap;
}
.timeline-sub-win  { color: var(--green, #2ec4b6); border: 1px solid rgba(46,196,182,0.25); }
.timeline-sub-loss { color: #ef4444; border: 1px solid rgba(239,68,68,0.22); }
.timeline-sub-draw { color: #f59e0b; border: 1px solid rgba(245,158,11,0.22); }
.timeline-sub-bey {
    display: inline-block;
    padding: 0 0.25rem;
    background: rgba(34,211,238,0.18);
    color: var(--cyan, #22D3EE);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
}

.stat-box-wide { grid-column: span 2; }
.stat-box-finishes .stat-finish-breakdown {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 1rem;
    line-height: 1.2;
}
.stat-finish-breakdown span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.stat-finish-breakdown b { font-size: 1.1rem; color: var(--color-primary, #FF7324); }
.stat-finish-breakdown em { font-style: normal; font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-finish-breakdown .finish-penalty b { color: #f59e0b; }

/* DECK REGISTRATION — modal editor + player-list deck button */
.deck-btn {
    margin-right: 0.4rem;
    padding: 0.2rem 0.55rem;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.deck-btn:hover { background: rgba(255,255,255,0.12); }
.deck-btn-ok    { color: var(--green, #2ec4b6); border-color: rgba(46,196,182,0.4); }
.deck-btn-warn  { color: #f59e0b; border-color: rgba(245,158,11,0.4); }

.modal-content.deck-editor {
    max-width: 560px;
    width: 92vw;
}
.deck-rules-hint { margin: 0 0 0.7rem; font-size: 0.85rem; }
.deck-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}
.deck-bey-header {
    display: grid;
    grid-template-columns: 4rem 1fr 1fr 1fr;
    gap: 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    padding: 0 0.2rem;
}
.deck-bey-header span:first-child { width: 4rem; }
.deck-bey-row {
    display: grid;
    grid-template-columns: 4rem 1fr 1fr 1fr;
    gap: 0.4rem;
    align-items: center;
}
.deck-bey-num {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--cyan, #22D3EE);
    text-align: center;
    background: rgba(34,211,238,0.1);
    border-radius: 4px;
    padding: 0.4rem 0;
}
.deck-bey-row input {
    padding: 0.45rem 0.6rem;
    background: var(--color-surface, rgba(255,255,255,0.05));
    color: inherit;
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 6px;
    font-size: 0.88rem;
    min-width: 0;
}
.deck-bey-row input:focus { outline: none; border-color: var(--cyan, #22D3EE); }

.deck-status {
    margin: 0.6rem 0;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.deck-status-ok    { background: rgba(46,196,182,0.15); color: var(--green, #2ec4b6); border: 1px solid rgba(46,196,182,0.4); }
.deck-status-warn  { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.35); }
.deck-status-error { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }

.deck-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

/* QR / scan / paste panel inside the Beys editor */
.deck-qr-panel {
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: rgba(34,211,238,0.05);
    border: 1px dashed rgba(34,211,238,0.35);
    border-radius: 8px;
}
.deck-qr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.deck-qr-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.deck-qr-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.deck-qr-svg {
    background: #fff;
    padding: 6px;
    border-radius: 6px;
    width: 100%;
    max-width: 180px;
    align-self: flex-start;
}
.deck-qr-svg svg { display: block; width: 100%; height: auto; }
.deck-qr-code-text {
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: rgba(0,0,0,0.4);
    color: var(--cyan, #22D3EE);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    cursor: text;
}
.deck-scan-video {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    background: #000;
    border-radius: 6px;
    display: block;
}
.deck-scan-video:not([srcobject]):not([src]) { display: none; }
.deck-paste-input {
    width: 100%;
    padding: 0.4rem 0.55rem;
    background: var(--color-surface, rgba(255,255,255,0.05));
    color: inherit;
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    resize: vertical;
}
#deck-qr-note { margin: 0.5rem 0 0; font-size: 0.82rem; }
#deck-qr-note.deck-qr-note-error { color: #ef4444; }
#deck-qr-note.deck-qr-note-ok    { color: var(--green, #2ec4b6); }
@media (max-width: 480px) {
    .deck-qr-row { grid-template-columns: 1fr; }
}

/* Trainer card — registered deck stat box */
.stat-box-deck .stat-deck-list {
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
}
.stat-deck-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.15rem 0;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.stat-deck-row:last-child { border-bottom: none; }
.stat-deck-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--cyan, #22D3EE);
    font-size: 0.78rem;
    min-width: 1.7rem;
}
.stat-deck-row em { font-style: normal; color: var(--text-dim); font-size: 0.78rem; }

/* Missing-Beys warning badge in the round view spin scoreboard */
.spin-name-warn {
    display: inline-block;
    margin-right: 0.3rem;
    color: #f59e0b;
    cursor: help;
    font-size: 0.95em;
}

/* Spin Bey picker — show real Blade name when registered */
.spin-bey-btn-named {
    width: auto;
    height: auto;
    padding: 0.4rem 0.65rem;
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 4.5rem;
}
.spin-bey-btn-named .spin-bey-num { font-size: 0.78rem; color: var(--cyan, #22D3EE); }
.spin-bey-btn-named .spin-bey-name {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .deck-bey-header,
    .deck-bey-row {
        grid-template-columns: 3.2rem 1fr 1fr 1fr;
        gap: 0.3rem;
    }
    .deck-bey-row input { font-size: 0.78rem; padding: 0.4rem 0.45rem; }
}

/* Knockout bracket overview — collapsible details panel above the round pairings */
.bracket-wrap { margin-bottom: 1rem; }
.bracket-details {
    background: var(--color-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
}
.bracket-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0;
}
.bracket-summary::-webkit-details-marker { display: none; }
.bracket-summary-chev { font-size: 0.85rem; color: var(--text-dim); transition: transform 0.2s; }
.bracket-details[open] .bracket-summary-chev { transform: rotate(180deg); }

.bracket-scroll {
    margin-top: 0.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
}
.bracket-grid {
    display: flex;
    align-items: stretch;
    gap: 1.4rem;
    min-width: max-content;
    padding: 0.4rem 0.2rem;
}
.bracket-col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 120px;
}
.bracket-col-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
    text-align: center;
}
.bracket-col-matches {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0.3rem;
}
.bracket-match {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.2;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bracket-match-pending {
    padding: 0.5rem 0.6rem;
    color: var(--text-dim);
    font-style: italic;
    text-align: center;
    background: transparent;
    border-style: dashed;
}
.bracket-match-current {
    border-color: var(--color-primary, #FF7324);
    box-shadow: 0 0 0 2px rgba(255,115,36,0.2), 0 6px 16px -8px rgba(255,115,36,0.4);
}
.bracket-row {
    padding: 0.35rem 0.55rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.bracket-row:last-child { border-bottom: none; }
.bracket-row:hover { background: rgba(255,255,255,0.05); }
.bracket-row.bracket-winner {
    background: rgba(46,196,182,0.15);
    color: var(--green, #2ec4b6);
    font-weight: 700;
}
.bracket-row.bracket-loser {
    color: var(--text-dim);
    text-decoration: line-through;
    opacity: 0.6;
}
.bracket-row.bracket-bye-row {
    color: var(--text-dim);
    font-style: italic;
}

@media (max-width: 480px) {
    .bracket-col { min-width: 100px; }
    .bracket-row { padding: 0.3rem 0.45rem; font-size: 0.72rem; }
}

/* TCG Best-of-3 — per-match game tracker */
.pairing-row.pairing-row-bo3 {
    display: block;
    background: rgba(255, 115, 36, 0.04);
    border: 1px solid rgba(255, 115, 36, 0.2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    gap: 0;
}
.bo3-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.bo3-status {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bo3-status.bo3-locked { color: var(--green, #2ec4b6); font-weight: 700; }
.bo3-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}
.bo3-vs {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.1rem;
}
.bo3-score-a { color: var(--blue, #6db3f2); }
.bo3-score-b { color: var(--color-primary, #FF7324); }
.bo3-games {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bo3-game-row {
    display: grid;
    grid-template-columns: 4rem 1fr 1fr 1fr;
    gap: 0.35rem;
    align-items: center;
}
.bo3-game-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bo3-btn {
    padding: 0.4rem 0.5rem;
    background: rgba(255,255,255,0.05);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.bo3-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.bo3-btn:active:not(:disabled) { transform: translateY(1px); }
.bo3-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.bo3-btn.selected-win-a { background: rgba(109, 179, 242, 0.25); border-color: var(--blue, #6db3f2); color: #fff; }
.bo3-btn.selected-win-b { background: rgba(255, 115, 36, 0.25); border-color: var(--color-primary, #FF7324); color: #fff; }
.bo3-btn.selected-draw  { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); color: #fff; }

@media (max-width: 480px) {
    .bo3-game-row { grid-template-columns: 3rem 1fr 1fr 1fr; gap: 0.25rem; }
    .bo3-btn { font-size: 0.75rem; padding: 0.4rem 0.3rem; }
}

/* Penalty / malfunction panel inside a spin pairing card */
.spin-penalty-block { margin: 0.4rem 0 0.6rem; }
.spin-penalty-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.7rem;
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    cursor: pointer;
    transition: background 0.12s;
}
.spin-penalty-toggle:hover { background: rgba(255,255,255,0.08); }
.spin-penalty-block.is-open .spin-penalty-toggle { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.4); color: #f59e0b; }
.spin-pen-summary-active { color: #f59e0b; font-weight: 700; }
.spin-penalty-chev { font-size: 0.85rem; }
.spin-penalty-grid {
    margin-top: 0.4rem;
    padding: 0.6rem 0.7rem;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.spin-penalty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.spin-penalty-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    flex: 1;
    cursor: help;
}
.spin-penalty-counters {
    display: flex;
    gap: 0.3rem;
}
.spin-penalty-counters button {
    padding: 0.3rem 0.55rem;
    background: rgba(255,255,255,0.06);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.spin-penalty-counters button:hover {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.5);
}
.spin-penalty-counters button strong { color: #f59e0b; margin: 0 0.2rem; }

/* Registration spin-deck toggle */
.reg-spin-deck {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.spin-log {
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.5;
    max-height: 6rem;
    overflow-y: auto;
}
.spin-log-row { display: block; }
.spin-log-num { font-family: 'JetBrains Mono', monospace; color: var(--color-primary); margin-right: 0.3rem; }

.spin-controls {
    display: flex;
    justify-content: flex-end;
}
/* When match auto-locks, make the undo CTA full-width and prominent so re-edit is one tap */
.spin-controls.spin-controls-locked {
    justify-content: stretch;
}
.spin-controls.spin-controls-locked .btn {
    flex: 1;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
}
.spin-undo-prominent {
    animation: spinUndoPulse 1.8s ease-in-out infinite;
}
@keyframes spinUndoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb), 0); }
}
/* "Match locked — undo to re-edit" hint variant */
.spin-hint.spin-hint-locked {
    color: var(--color-primary);
    text-transform: none;
    letter-spacing: 0.5px;
    font-size: 0.82rem;
    margin-top: 0.4rem;
    margin-bottom: 0.55rem;
    opacity: 1;
    animation: none;
}

@media (max-width: 480px) {
    .spin-scoreboard { gap: 0.4rem; }
    .spin-points-num { font-size: 1.3rem; }
    .spin-finish-btn { font-size: 0.75rem; padding: 0.4rem 0.4rem; min-width: 4.5rem; }
}

/* Spin Battle (TESTING) banner on the registration page */
.reg-spin-banner {
    margin: 0.2rem 0 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(155deg, rgba(34,211,238,0.12) 0%, rgba(110,50,168,0.10) 100%);
    border: 1px solid rgba(34,211,238,0.45);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.reg-spin-banner-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.reg-spin-badge {
    display: inline-block;
    background: #FFD700;
    color: #000;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 0.18rem 0.6rem;
    border-radius: 4px;
}
.reg-spin-target {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.reg-spin-target input[type="number"] {
    width: 4.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--color-surface);
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
}

/* Scoring-mode toggle on registration view */
.reg-scoring {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: -0.4rem 0 1rem;
    padding: 0.7rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.reg-scoring-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-weight: 600;
    color: #e6e6e6;
    user-select: none;
}
.reg-scoring-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.reg-scoring-toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.reg-scoring-toggle input[type="checkbox"]:disabled + span {
    opacity: 0.6;
}
.reg-scoring-hint {
    margin-left: 1.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

/* noAds toggle in footer (right of Terms link) */
.no-ads-btn {
    margin-left: 0.5rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    background: transparent;
    color: var(--color-text-muted, #888);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.no-ads-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.no-ads-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
body.no-ads .viewer-ad-slot { display: none !important; }

/* ===== Mobile overflow hardening (added) =====
   Prevent long player names / text from pushing content off-screen. */
@media (max-width: 720px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .view { overflow-x: hidden; }
    .pairing-player,
    .player-name,
    .adv-pairing-row,
    .viewer-pin-result,
    .standings-table td {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .adv-player-select { max-width: 100%; }
    .standings-table { table-layout: fixed; width: 100%; }
    .standings-table td:first-child,
    .standings-table th:first-child { width: 40%; }
    .panel, .view, .modal-content { box-sizing: border-box; }
}

/* ===== Raise pairing-row card layout breakpoint to 600px =====
   Below 600px (all phones portrait), stack the 4-column pairing grid
   into a single-column card so long names can't overflow sideways. */
@media (max-width: 600px) {
    .pairing-row,
    .pairing-row.bye-row {
        grid-template-columns: 1fr !important;
        gap: 0.4rem;
        text-align: center;
    }
    .pairing-row .table-number {
        border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
        padding-bottom: 0.25rem;
    }
    .pairing-row .pairing-player {
        text-align: center !important;
        padding: 0.4rem;
    }
    .pairing-row .result-buttons {
        justify-content: center;
    }
    .pairing-row .result-btn {
        flex: 1;
        min-height: 40px;
    }
    /* Force any remaining overflow to wrap */
    .pairing-player,
    .player-name,
    .viewer-pin-result,
    .viewer-pin-label {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        min-width: 0;
        max-width: 100%;
    }
}

/* ===== A / B side colors — A=blue, B=brand primary ===== */
:root {
    --side-a: #60A5FA;
    --side-a-rgb: 96, 165, 250;
    --side-a-bg: rgba(var(--side-a-rgb), 0.16);
    --side-a-border: rgba(var(--side-a-rgb), 0.45);
    --side-b: #6E32A8;
    --side-b-bg: rgba(var(--color-primary-rgb), 0.16);
    --side-b-border: rgba(var(--color-primary-rgb), 0.45);
}

/* ===== Theme: Ninja Coral (coral on deep navy) ===== */
.theme-coral {
    --color-bg-header: #080E1C;
    --color-bg-base: #0B1123;
    --color-bg-surface: #151E31;
    --color-bg-surface-2: #1C2640;
    --color-border: #2C3E5F;
    --color-border-soft: #1F2D4A;

    --color-primary: #FF7F50;
    --color-primary-hover: #E67347;
    --color-primary-rgb: 255, 127, 80;

    --color-text: #F8FAFC;
    --color-text-secondary: #A1A7B1;
    --color-text-muted: #6B7280;

    --color-win: #4ADE80;
    --color-draw: #FDE047;
    --color-loss: #EF4444;

    --side-a: #0EA5E9;
    --side-a-rgb: 14, 165, 233;
    --side-b: #FF7F50;
}

/* ===== Theme: Electric Yellow (gold on deep slate) ===== */
.theme-yellow {
    --color-bg-header: #090C10;
    --color-bg-base: #0D1117;
    --color-bg-surface: #161B22;
    --color-bg-surface-2: #1C222C;
    --color-border: #30363D;
    --color-border-soft: #21262D;

    --color-primary: #FFD700;
    --color-primary-hover: #E6C200;
    --color-primary-rgb: 255, 215, 0;

    --color-text: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;

    --color-win: #4ADE80;
    --color-draw: #FDE047;
    --color-loss: #EF4444;

    --side-a: #3B82F6;
    --side-a-rgb: 59, 130, 246;
    --side-b: #FFD700;
}

/* ===== Theme: Psychedelic Cyan (cyan on deep purple-black) ===== */
.theme-cyan {
    --color-bg-header: #06050E;
    --color-bg-base: #0B0A1A;
    --color-bg-surface: #15132B;
    --color-bg-surface-2: #1E1B3A;
    --color-border: #352E58;
    --color-border-soft: #23203F;

    --color-primary: #22D3EE;
    --color-primary-hover: #06B6D4;
    --color-primary-rgb: 34, 211, 238;

    --color-text: #EDF2F4;
    --color-text-secondary: #9CA3AF;
    --color-text-muted: #6B7280;

    --color-win: #4ADE80;
    --color-draw: #FDE68A;
    --color-loss: #EF4444;

    --side-a: #0EA5E9;
    --side-a-rgb: 14, 165, 233;
    --side-b: #22D3EE;
}

/* ===== Theme: Ethereal Magenta (magenta on blue-grey) ===== */
.theme-magenta {
    --color-bg-header: #121421;
    --color-bg-base: #1A1D2D;
    --color-bg-surface: #262B40;
    --color-bg-surface-2: #2F3450;
    --color-border: #3B4468;
    --color-border-soft: #262B40;

    --color-primary: #FF52D9;
    --color-primary-hover: #E549C4;
    --color-primary-rgb: 255, 82, 217;

    --color-text: #EDF2F4;
    --color-text-secondary: #A0A9BF;
    --color-text-muted: #6C757D;

    --color-win: #4ADE80;
    --color-draw: #FBBF24;
    --color-loss: #EF4444;

    --side-a: #0EA5E9;
    --side-a-rgb: 14, 165, 233;
    --side-b: #FF52D9;
}

/* ===== Theme: Original (orange / dark-neutral) ===== */
.theme-original {
    --color-bg-header: #141414;
    --color-bg-base: #1A1A1A;
    --color-bg-surface: #262626;
    --color-bg-surface-2: #2f2f2f;
    --color-border: #333333;
    --color-border-soft: #2a2a2a;

    --color-primary: #FF7324;
    --color-primary-hover: #E56720;
    --color-primary-rgb: 255, 115, 36;

    --color-win: #2ec4b6;
    --color-draw: #ffd60a;
    --color-loss: #e63946;

    --side-a: #3B82F6;
    --side-a-rgb: 59, 130, 246;
    --side-b: #FF7324;
}

.pairing-player.side-a,
.pairing-player.side-b {
    border: 1.5px solid;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.pairing-player.side-a {
    border-color: var(--side-a-border);
    background: var(--side-a-bg);
}
.pairing-player.side-b {
    border-color: var(--side-b-border);
    background: var(--side-b-bg);
}
.pairing-player.side-a.winner {
    color: var(--side-a);
    border-color: var(--side-a);
    background: rgba(var(--side-a-rgb), 0.22);
}
.pairing-player.side-b.winner {
    color: var(--side-b);
    border-color: var(--side-b);
    background: rgba(var(--color-primary-rgb), 0.22);
}
.pairing-player.loser { opacity: 0.55; }

/* ===== Color the A / B Win buttons to match their side ===== */
.result-buttons .result-btn:first-child {
    background: var(--side-a-bg);
    border-color: var(--side-a-border);
    color: var(--side-a);
}
.result-buttons .result-btn:last-child {
    background: var(--side-b-bg);
    border-color: var(--side-b-border);
    color: var(--side-b);
}
.result-buttons .result-btn:first-child:hover {
    background: rgba(var(--side-a-rgb), 0.28);
    border-color: var(--side-a);
    color: #fff;
}
.result-buttons .result-btn:last-child:hover {
    background: rgba(var(--color-primary-rgb), 0.28);
    border-color: var(--side-b);
    color: #fff;
}
.result-btn.selected-win-a {
    background: var(--side-a) !important;
    border-color: var(--side-a) !important;
    color: #fff !important;
}
.result-btn.selected-win-b {
    background: var(--side-b) !important;
    border-color: var(--side-b) !important;
    color: #fff !important;
}

/* ===== Drop player ===== */
.trainer-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
    display: flex;
    justify-content: center;
}
.btn-danger {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.5);
    color: #f87171;
}
.btn-danger:hover {
    background: rgba(220, 38, 38, 0.3);
    color: #fff;
    border-color: #dc2626;
}
.standings-table tr.player-dropped { opacity: 0.45; }
.standings-table tr.player-dropped td { text-decoration: line-through; }
.standings-table tr.player-dropped .dropped-tag { text-decoration: none; }
.dropped-tag {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1em 0.5em;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(220, 38, 38, 0.18);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.4);
    vertical-align: middle;
}

/* ===== Standings table — mobile readability fix ===== */
#standings-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.standings-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.standings-table th,
.standings-table td {
    white-space: nowrap;
    vertical-align: middle;
}
.standings-table th + th,
.standings-table td + td {
    padding-left: 0.6rem;
}
/* Numeric columns: monospace + nowrap so 3-0-0 / 47.2% don't wrap */
.standings-table th:nth-child(3),
.standings-table th:nth-child(4),
.standings-table th:nth-child(5),
.standings-table td:nth-child(3),
.standings-table td:nth-child(4),
.standings-table td:nth-child(5) {
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-align: right;
}
.standings-table th:first-child,
.standings-table td:first-child {
    text-align: center;
    width: 2.5rem;
}
/* Only the player-name column may wrap if needed */
.standings-table th:nth-child(2),
.standings-table td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 6rem;
    max-width: 12rem;
}

@media (max-width: 600px) {
    .standings-table {
        font-size: 0.85rem;
    }
    .standings-table th,
    .standings-table td {
        padding: 0.5rem 0.35rem;
    }
    .standings-table th + th,
    .standings-table td + td {
        padding-left: 0.45rem;
    }
    .standings-table th:nth-child(2),
    .standings-table td:nth-child(2) {
        max-width: 8rem;
    }
}

/* ===== Round-page action toolbar (top of round panel) ===== */
.round-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.round-actions-left,
.round-actions-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.round-actions-right { justify-content: flex-end; margin-left: auto; }
.btn-action.btn-action-danger {
    background: transparent;
    color: #ff5b5b;
    border-color: rgba(255, 91, 91, 0.45);
}
.btn-action.btn-action-danger:hover {
    background: rgba(255, 91, 91, 0.12);
    color: #ff5b5b;
    border-color: #ff5b5b;
}
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    font: 600 0.88rem/1 'Inter', system-ui, sans-serif;
    letter-spacing: 0.3px;
    background: var(--color-surface);
    color: #e6e6e6;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.05s;
}
.btn-action:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-action:active { transform: translateY(1px); }
.btn-action:disabled { opacity: 0.6; cursor: default; transform: none; }
.btn-action .action-icon { display: block; flex-shrink: 0; }
/* On narrow screens collapse the round action buttons to icon-only so they all fit in one row */
@media (max-width: 560px) {
    .round-actions { gap: 0.4rem; }
    .round-actions-left, .round-actions-right { gap: 0.4rem; }
    .btn-action { padding: 0.5rem 0.6rem; }
    .btn-action .btn-label { display: none; }
    .btn-action[id="btn-end"] .btn-label { display: inline; }  /* keep text on the most-important destructive button */
}

.btn-action.btn-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-action.btn-active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}
.btn-action.btn-action-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-action.btn-action-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}
.btn-action.btn-action-primary.btn-active {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-action.btn-action-primary.btn-active:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
body.view-only .round-actions { display: none; }
body.compact-mode .round-actions { margin-bottom: 0.4rem; }
body.projector-mode .round-actions { display: none; }
body.projector-mode .projector-exit-float { display: flex; }

.projector-exit-float {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0.4;
    transition: opacity 0.2s;
}
.projector-exit-float:hover {
    opacity: 1;
}

@media (max-width: 600px) {
    .round-actions { gap: 0.4rem; }
    .btn-action { padding: 0.45rem 0.65rem; font-size: 0.82rem; gap: 0.4rem; }
    .btn-action .action-icon { width: 16px; height: 16px; }
}

/* ===== Updates panel (home view) ===== */
.updates-panel {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 10px;
    padding: 0.85rem 1rem 1.4rem;
    margin: 0 auto 1.5rem;
    max-width: 720px;
    text-align: left;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
}
.updates-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.updates-panel-header h3 {
    margin: 0;
    font: 700 0.95rem/1 'Inter', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-primary);
}
.updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.updates-item {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.55rem 0.2rem;
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.updates-item:first-child { border-top: none; }
.updates-item:hover {
    background: var(--color-primary-soft);
}
.updates-date {
    flex: 0 0 auto;
    font: 600 0.75rem/1 'JetBrains Mono', monospace;
    color: var(--color-primary);
    letter-spacing: 0.3px;
    padding-top: 1px;
}
.updates-title {
    flex: 1 1 auto;
    color: #e6e6e6;
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.35;
}
.updates-item:hover .updates-title { color: var(--color-primary); }
.updates-more {
    position: absolute;
    right: 0.6rem;
    bottom: 0.4rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 0.1rem 0.65rem;
    font: 700 1rem/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.updates-more:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* All-updates modal: just inherits .modal-content; widen + scroll */
.updates-list-modal { max-width: 600px; }
.updates-list-modal .updates-list { margin-top: 0.5rem; }
.updates-list-full { max-height: 60vh; overflow-y: auto; padding-right: 0.25rem; }

/* Detail modal */
.updates-detail-modal { max-width: 560px; }
.updates-detail-date {
    font: 600 0.75rem/1 'JetBrains Mono', monospace;
    color: var(--color-primary);
    letter-spacing: 0.4px;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}
.updates-detail-modal h3 {
    margin: 0 0 0.85rem;
    font: 700 1.15rem/1.3 'Inter', system-ui, sans-serif;
    color: #fff;
}
.updates-detail-body {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

@media (max-width: 600px) {
    .updates-panel { padding: 0.7rem 0.85rem 1.3rem; }
    .updates-item { flex-wrap: wrap; gap: 0.35rem; }
    .updates-date { font-size: 0.7rem; }
    .updates-title { font-size: 0.88rem; }
}

/* ===== Pairing-rules help button (round panel top-right) ===== */
.pairing-help-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 0.25rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    font: 700 1rem/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.05s;
}
.pairing-help-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.pairing-help-btn:active { transform: translateY(1px); }
body.projector-mode .pairing-help-btn { display: none; }
.pairing-help-modal { max-width: 620px; }

/* Pairing-help badge inside home tiles (top-right corner) */
.home-buttons .home-tile .home-tile-help {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    z-index: 2;
}
.home-buttons .home-tile .home-tile-help:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
}
.home-buttons .home-tile.home-tile-secondary .home-tile-help {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-primary);
    border-color: var(--color-border);
}
.home-buttons .home-tile.home-tile-secondary .home-tile-help:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Trainer ID tag */
.trainer-id-tag {
    font-size: 0.75em;
    color: var(--accent);
    margin-left: 6px;
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.7;
}