:root {
    /* Mapped to themes.css standards */
    --bg-main: #0d0d0d;
    --bg-panel: #1a1a1a;
    --text-main: #ffffff;
    --text-muted: #888888;
    --accent: #f1c40f;
    --border: #333333;
    
    /* Extra vars for buttons */
    --primary: #d4af37;
    --success: #28a745;
    /* Added for merged admin controls */
    --danger: #dc3545;
    --purple: #8e44ad;
    --gold: #f1c40f;
}

* { box-sizing: border-box; }

/* Player title / flag badge (colors applied inline per-player) */
.player-title-badge {
    display: inline-block;
    padding: 0 7px;
    border-radius: 9px;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.6;
    vertical-align: middle;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* BASE LAYOUT */
html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: var(--bg-main); 
}

body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: var(--bg-main);
    color: var(--text-main); 
    font-family: 'Roboto', sans-serif; 
    display: grid; 
    grid-template-rows: auto 1fr; 
    transition: grid-template-rows 0.3s ease, background-color 0.3s ease, color 0.3s ease; 
}

/* FULLSCREEN MODE */
body.fullscreen-active {
    grid-template-rows: 1fr; /* Hides top nav */
}
body.fullscreen-active .nav-row {
    display: none; 
}

/* NAVIGATION */
.nav-row { 
    background: var(--bg-main);
    border-bottom: 2px solid var(--border); 
    padding: 0 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 50px; 
    flex-shrink: 0; 
    overflow: hidden; 
    transition: background-color 0.3s ease;
}

.nav-items { 
    display: flex; 
    gap: 2px; 
    height: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none;
    flex: 1; 
    min-width: 0; 
}
.nav-items::-webkit-scrollbar { display: none; }

.nav-btn { 
    background: transparent; 
    color: var(--text-muted); 
    border: none; 
    padding: 0 15px; 
    cursor: pointer; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 0.9rem;
    border-bottom: 3px solid transparent; 
    height: 100%; 
    transition: all 0.2s; 
    white-space: nowrap;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.nav-btn:hover { color: white; background: rgba(255,255,255,0.05); }
.nav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.nav-btn.hidden { display: none !important; }

.nav-icon { display: none; font-size: 1.2rem; }
.nav-text { display: block; }

.action-icon { display: none; }
.action-text { display: inline; }

.nav-actions { 
    display: flex; 
    gap: 15px; 
    align-items: center; 
    margin-left: 10px;
    flex-shrink: 0; 
}

.action-link { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.action-link:hover { color: white; }

/* Mobile hamburger toggle (hidden on desktop) */
.nav-hamburger {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 12px 0 0;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/* TAB CONTENT AREAS */
.tab-content { display: none; height: 100%; overflow-y: auto; position: relative; }
.tab-content.active { display: block; }

/* MAIN GRID LAYOUT */
.clock-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60% 40%;
    grid-template-areas: 
        "top"
        "bottom";
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;
    transition: all 0.3s ease;
}

/* SIDEBAR ACTIVE MODE - 5 COLUMN ALIGNMENT FIX */
.clock-container.sidebar-active {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 60% 40%;
    grid-template-areas: none; /* Explicit placement used instead of areas */
}

/* Flatten the grid hierarchy for perfect alignment */
.clock-container.sidebar-active .top-section,
.clock-container.sidebar-active .bottom-section {
    display: contents;
}

/* Explicit Placement */
.clock-container.sidebar-active .main-panel {
    grid-column: 1 / span 3;
    grid-row: 1;
}

.clock-container.sidebar-active .info-panel {
    grid-column: 4;
    grid-row: 1;
}

.clock-container.sidebar-active .side-panel {
    display: flex; 
    grid-column: 5;
    grid-row: 1 / span 2;
}

/* Force bottom cells into the second row */
.clock-container.sidebar-active .bottom-cell {
    grid-row: 2;
}

.top-section {
    grid-area: top;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
    height: 100%; 
}

.bottom-section {
    grid-area: bottom;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    height: 100%; 
}

.bottom-cell.tall-cell {
    grid-row: span 2; 
    display: flex;
    flex-direction: column;
}

/* SIDEBAR STYLING */
.side-panel {
    grid-area: sidebar;
    display: none; 
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.side-header {
    background: var(--bg-main);
    padding: 8px;
    text-align: center;
    font-weight: bold;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    font-size: 1.2rem;
}

/* Sidebar Collapse/Expand Toggle */
.sidebar-collapse-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1rem;
    z-index: 10;
    padding: 4px 2px;
    opacity: 0.6;
    transition: opacity 0.2s;
    line-height: 1;
}
.sidebar-collapse-btn:hover {
    opacity: 1;
    color: var(--accent);
}
.side-panel.collapsed .side-header,
.side-panel.collapsed .side-content {
    display: none !important;
}
.side-panel.collapsed {
    background: transparent;
    border-color: transparent;
    min-width: 0;
    width: auto;
    overflow: visible;
}

/* When sidebar is collapsed, shrink its column and give space back */
.clock-container.sidebar-collapsed {
    grid-template-columns: repeat(4, 1fr) 24px;
}

/* Sidebar Content Container */
.side-content {
    flex: 1;
    overflow-y: auto;
    padding: 5px;  /* Reduced padding to save space */
    font-size: 1.0em;
    -ms-overflow-style: none; 
    scrollbar-width: none;
    
    /* NEW: Use Flexbox to wrap tables */
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Space between tables */
    align-content: flex-start;
}
.side-content::-webkit-scrollbar { display: none; }

/* Force tables to be 1 per row in sidebar */
.side-content .table-card { 
    width: 100% !important;
    margin-bottom: 0 !important; 
    padding: 4px !important; /* Thinner internal padding */
    overflow: hidden;
}

/* NEW: Compact text inside sidebar tables */
.side-content .table-title { 
    font-size: 1.05rem; 
    padding-bottom: 2px; 
    margin-bottom: 2px; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-content .seat-row { 
    font-size: 1.0rem !important; /* Increased size */
    padding: 2px 0 !important;      /* Slightly more breathing room */
    overflow: hidden;
}
.side-content .seat-row > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* TOP LEFT: Main Clock & Blinds */
.main-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative !important; 
    overflow: hidden !important; 
    transition: background-color 0.3s ease;
    padding-bottom: 12%;
}

/* Background Image Layer */
#customBackgroundLayer {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    padding: 20px; 
    box-sizing: border-box;
    background-origin: content-box; 
    background-size: contain;    
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.2; 
    pointer-events: none;
    transition: background-image 0.5s ease-in-out;
}

/* Fullscreen Button */
.fs-btn {
    position: absolute !important;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 25; /* Top Layer */
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}
.fs-btn:hover { color: white; background: rgba(255,255,255,0.05); border-radius: 4px; }

/* Unmute Button */
.unmute-btn-center {
    position: absolute !important;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(180, 60, 60, 0.65);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(180, 60, 60, 0.8);
    border-radius: 4px;
    padding: 6px 15px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    animation: pulse-red-soft 3s infinite;
    z-index: 30; /* Top Layer */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
}
.unmute-btn-center:hover { 
    background-color: rgba(200, 70, 70, 0.9); 
    color: white;
}

@keyframes pulse-red-soft {
    0% { box-shadow: 0 0 0 0 rgba(180, 60, 60, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(180, 60, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(180, 60, 60, 0); }
}

/* Flow Content (Z-Index adjustments) */
.game-title, 
.clock-display, 
.current-blinds, 
.current-ante,
.break-text, 
.winner-text,
.logo-area {
    position: relative;
    z-index: 2; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.game-title {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 25px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clock-display {
    font-size: 10vw;
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.8;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clock-display.running { color: var(--accent); opacity: 1; }
.clock-display.blinds-mode { color: white; font-size: 8vw; }
.clock-display.blinds-mode.running { color: white; opacity: 1; }

.level-label {
    font-size: 2vw;
    color: var(--text-muted);
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 4px;
}

.active-timer {
    font-size: 4vw;
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    font-weight: bold;
}

.current-blinds {
    font-size: 4vw;
    font-weight: bold;
    color: white;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    max-width: 90%;
    overflow: hidden;
}
.current-ante { font-size: 2vw; color: var(--text-muted); margin-top: 5px; max-width: 90%; overflow: hidden; }

/* Timer Infos — fonts scale with viewport width so they shrink on smaller
   screens; sit above the admin controls (but click-through) so the play
   buttons can never visually cover the elapsed/level/next-break info. */
.timer-info-left { position: absolute !important; bottom: 15px; left: 20px; text-align: left; font-size: clamp(0.75rem, 1.5vw, 1.5rem); color: var(--text-muted); z-index: 6; pointer-events: none; max-width: 30%; overflow: hidden; }
.timer-info-center { position: absolute !important; bottom: 15px; left: 50%; transform: translateX(-50%); text-align: center; font-size: clamp(0.75rem, 1.5vw, 1.5rem); color: var(--text-muted); z-index: 6; pointer-events: none; overflow: hidden; white-space: nowrap; }
.timer-info-center .center-level { color: var(--text-muted); font-family: 'Orbitron', sans-serif; font-size: clamp(0.9rem, 1.7vw, 1.6rem); font-weight: bold; }
.timer-info-center .center-timer { color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: clamp(1.6rem, 3.4vw, 3.2rem); font-weight: bold; display: block; }
.timer-info-right { position: absolute !important; bottom: 15px; right: 20px; text-align: right; font-size: clamp(0.75rem, 1.5vw, 1.5rem); color: var(--text-muted); z-index: 6; pointer-events: none; max-width: 30%; overflow: hidden; }
.timer-val { color: white; font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: clamp(1rem, 2vw, 1.9rem); display: block; overflow: hidden; text-overflow: ellipsis; }

/* TOP RIGHT: Info Panel */
.info-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    padding: 10px;
    overflow: hidden; 
    width: 100%;
    transition: background-color 0.3s ease;
}

.logo-area { 
    font-size: 4rem; 
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0; 
    padding: 4px; 
}

/* UPDATED LOGO SIZE: Constrain max width and max height */
.logo-img-small {
    max-width: 90%;
    max-height: 150px;
    object-fit: contain;
}

#statsContainer {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.stat-box { text-align: center; overflow: hidden; }
.stat-label { color: var(--text-muted); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-value { font-size: 2rem; font-weight: bold; color: white; font-family: 'Orbitron', sans-serif; overflow: hidden; text-overflow: ellipsis; }

/* BOTTOM ROW CELLS */
.bottom-cell { 
    background: var(--bg-panel); 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    position: relative; 
    transition: background-color 0.3s ease;
    min-width: 0;
}
.cell-header { 
    background: var(--bg-main); 
    padding: 8px; 
    text-align: center; 
    font-weight: bold; 
    color: var(--accent); 
    border-bottom: 1px solid var(--border); 
    font-size: 1.2rem; 
    text-transform: uppercase; 
    transition: background-color 0.3s ease;
}
.cell-content { flex: 1; overflow-y: hidden; overflow-x: hidden; padding: 10px; text-align: center; }
#elimList, #payoutsList, #sidebarSeating { overflow-y: hidden !important; position: relative; }
#elimList::-webkit-scrollbar, #payoutsList::-webkit-scrollbar, #sidebarSeating::-webkit-scrollbar { display: none; }

.elim-row { display: flex; justify-content: flex-start; gap: 10px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 1.8rem; max-width: 100%; overflow: hidden; }
.elim-row-stacked { flex-direction: column; align-items: stretch; gap: 2px; }
.elim-row-stacked .elim-line-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.elim-row-stacked .elim-line-bottom { display: flex; align-items: baseline; gap: 6px; padding-left: 45px; font-size: 0.7em; }
.elim-row-stacked .elim-prize { margin-left: auto; }
.elim-pos { color: #dc3545; font-weight: bold; min-width: 35px; text-align: left; flex-shrink: 0; }
.elim-name { color: var(--text-muted); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 60px; }
.elim-prize { color: var(--success); font-weight: bold; margin-left: auto; font-size: 0.65em !important; flex-shrink: 0; white-space: nowrap; }

#nextBlindsList { display: flex; flex-direction: column; gap: 0; overflow: hidden; height: 100%; }

/* UPDATED FONT SIZE: Increased to 1.8rem for visibility */
.blind-row { display: flex; justify-content: center; gap: 15px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 1.4rem; font-weight: bold; max-width: 100%; overflow: hidden; white-space: nowrap; flex-shrink: 0; }

.payout-row { display: flex; justify-content: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 1.8rem; max-width: 100%; overflow: hidden; }
.pay-place { color: white; margin-right: 15px; font-weight: bold; flex-shrink: 0; }
.pay-amt { color: var(--success); font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.moves-container { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.move-box { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; border-bottom: 1px solid var(--border); overflow: hidden; min-height: 0; }
.move-box:last-child { border-bottom: none; }
.move-label { color: #ccc; font-size: 1.1rem; text-transform: uppercase; margin-bottom: 5px; font-weight: bold; letter-spacing: 0.5px; }
.move-text { color: white; font-size: 2.2rem; font-weight: bold; text-align: center; line-height: 1.3; max-width: 100%; overflow: hidden; padding: 0 5px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
.move-box.merged {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    background: rgba(0,0,0,0.4); 
}

.group-info-content { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: #333; }
.group-info-name { font-size: 2rem; font-weight: bold; color: white; margin-bottom: 10px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; }
.group-info-code { font-size: 1.2rem; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; background: rgba(255,255,255,0.05); padding: 5px 15px; border-radius: 20px; }

/* BREAK & WINNER STATES */
.break-active .clock-display,
.break-active #blindsData,
.break-active #timerInfoCenter { display: none; }

.break-text { font-size: 8vw; color: var(--success); font-family: 'Orbitron', sans-serif; display: none; animation: pulse 2s infinite; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-active .break-text { display: block; }
.break-header { color: var(--accent); font-weight: bold; font-size: 1.3rem; margin-bottom: 8px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; text-align: center; padding-bottom: 5px; }
.break-list { overflow: hidden; width: 100%; text-align: center; font-size: 1.3rem; line-height: 1.8; color: #ddd; flex: 1; min-height: 0; }
.break-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.winner-text {
    display: none;
    font-size: 8vw; 
    color: var(--accent);
    font-family: 'Orbitron', sans-serif; 
    text-align: center;
    line-height: 1.2;
    animation: pulse 2s infinite;
    max-width: 90%;
    padding: 0 5%;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.winner-text #winnerName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    min-width: 0;
}

.winner-active .clock-display,
.winner-active #blindsData,
.winner-active .break-text,
.winner-active .current-blinds,
.winner-active .current-ante,
.winner-active #timerInfoCenter { display: none !important; }
.winner-active .winner-text { display: flex; }

@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

/* TABLE STYLES */
.data-table { width: 100%; max-width: 600px; margin: 20px auto; border-collapse: collapse; background: var(--bg-panel); }
.data-table th { text-align: center; padding: 12px; background: var(--bg-main); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: center; }
.current-level-row { background-color: rgba(40, 167, 69, 0.2); border-left: 3px solid var(--success); }

/* SEATING CHART / ROSTER */
.seating-grid { display: flex; flex-wrap: wrap; gap: 15px; padding: 20px; max-width: 1200px; margin: 0 auto; justify-content: center; }
.table-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px; width: 220px; overflow: hidden; }
.table-title { color: var(--accent); font-weight: bold; border-bottom: 1px solid var(--border); margin-bottom: 5px; padding-bottom: 5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; overflow: hidden; }
.seat-row > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.roster-container { 
    margin-top: 40px;
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap; 
    gap: 40px; 
    justify-content: center;
    align-items: flex-start;
}
.roster-column { min-width: 300px; flex: 0 1 auto; }

.stats-mini-row { display: flex; justify-content: center; gap: 20px; color: var(--text-muted); margin-top: 10px; font-size: 0.9rem; }
.stats-mini-row b { color: white; }

/* MODALS */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 999; display: none; justify-content: center; align-items: center; }
.modal-box { background: var(--bg-panel); border: 1px solid var(--border); width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; border-radius: 8px; padding: 20px; }
.modal-header { font-size: 1.5rem; color: var(--accent); margin-bottom: 15px; display: flex; justify-content: space-between; }
.modal-body { overflow-y: auto; flex: 1; font-family: monospace; color: #ccc; line-height: 1.5; }
.close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }

#broadcastOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; display: none; justify-content: center; align-items: center; }
#broadcastMsg { font-size: 6vw; color: var(--accent); font-family: 'Orbitron', sans-serif; text-align: center; padding: 40px; border: 2px solid var(--accent); }

/* =====================================================================
   MOBILE BOTTOM NAV + MENU SHEET (hidden on desktop)
   ===================================================================== */
.mobile-nav { display: none; }
.mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
    background: transparent; border: none; color: var(--text-muted);
    font-family: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2px;
    cursor: pointer; padding: 6px 0; text-decoration: none;
}
.mobile-nav-item.active { color: var(--accent); }
.mnav-ico { font-size: 1.35rem; line-height: 1; }
.mnav-menu-btn .mnav-ico {
    background: var(--primary); color: #000; width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-top: -22px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
.mnav-menu-btn { color: var(--text-main); }
.mnav-menu-btn .mnav-ico-close,
.mnav-menu-btn .mnav-lbl-close { display: none; }
body.mobile-menu-open .mnav-menu-btn .mnav-ico-open,
body.mobile-menu-open .mnav-menu-btn .mnav-lbl-open { display: none; }
body.mobile-menu-open .mnav-menu-btn .mnav-ico-close { display: block; }
body.mobile-menu-open .mnav-menu-btn .mnav-lbl-close { display: inline; }

/* Menu sheet sits below the bottom nav so its left/right buttons stay
   visible & tappable; the sheet floats above the nav via margin-bottom. */
.mobile-menu-overlay { align-items: flex-end; z-index: 980; }
.mobile-menu-sheet {
    background: var(--bg-panel); border-top: 1px solid var(--accent);
    border-radius: 20px 20px 0 0; width: 100%; box-sizing: border-box;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    margin-bottom: calc(76px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 8px; max-height: 78vh; overflow-y: auto;
}
.mobile-menu-handle {
    width: 42px; height: 4px; border-radius: 2px;
    background: var(--border); margin: 4px auto 12px;
}
.mm-item {
    display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
    padding: 14px 12px; border-radius: 10px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); color: var(--text-main); font-family: inherit;
    font-size: 1rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.mm-item:hover { background: rgba(255,255,255,0.08); }
.mm-item.hidden { display: none !important; }
.mm-item .nav-ico { font-size: 1.15rem; width: 24px; text-align: center; flex-shrink: 0; }
.mm-lang { padding: 8px 4px; }

/* Bottom row sharing the Log button (left) and language switcher (right) */
.mm-actions-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 4px;
}
.mm-mini-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    color: var(--text-main); font-family: inherit; font-weight: 600;
    font-size: 0.95rem; cursor: pointer;
}
.mm-mini-btn:hover { background: rgba(255,255,255,0.08); }
.mm-mini-btn .nav-ico { font-size: 1.1rem; }
/* Enlarge the language button so it matches the Log button in this row */
.mm-actions-row .csp-lang-btn { padding: 9px 16px; border-radius: 8px; font-size: 0.95rem; }
.mm-actions-row .csp-lang-code { font-size: 0.95rem; }
.mm-actions-row .csp-lang-globe { font-size: 1.1rem; }

/* MOBILE / RESPONSIVE */
@media (max-width: 900px) {
    /* Replace the top nav bar with a bottom nav + menu sheet on mobile. */
    .nav-hamburger { display: none; }
    .nav-row { display: none !important; }

    /* Content fills the top, the bottom nav takes an auto row underneath. */
    body { grid-template-rows: 1fr auto; }
    body.fullscreen-active { grid-template-rows: 1fr; }

    .mobile-nav {
        display: flex; justify-content: space-around; align-items: flex-start;
        background: var(--bg-panel); border-top: 1px solid var(--border);
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        z-index: 990;
    }
    body.fullscreen-active .mobile-nav { display: none; }
}

@media (max-width: 768px) {
    html, body { height: 100dvh; margin: 0; padding: 0; }
    .tab-content.active { display: flex; flex-direction: column; height: 100%; }

    .clock-container { 
        display: flex; 
        flex-direction: column; 
        height: 100%; 
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        gap: 5px;
        flex: 1; 
    }

    .top-section { 
        display: flex; 
        flex-direction: column; 
        flex: 1;
        min-height: 0;
        width: 100%;
        gap: 5px;
        height: auto;
    }
    
    /* CHANGED: Main Panel (Clock) to 60% */
    .main-panel { flex: 3; min-width: 0; min-height: 0; width: 100%; }
    
    /* CHANGED: Info Panel (Details) to 40% — logo on the RIGHT, player count
       & avg stack BESIDE it on the left (mobile portrait). */
    .info-panel { 
        flex: 2; 
        min-width: 0;
        min-height: 0;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0;
        max-width: none !important; 
    }

    .bottom-section { display: none !important; }

    /* Split the row into two equal halves; each centers its own content. */
    .logo-area { order: 2; max-height: 16vh; min-height: 0; flex: 1 1 50%; width: 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; overflow: visible; padding: 2px; }
    /* Constrain the logo image so it can't grow too big and never clips. */
    .logo-area .logo-img-small { max-height: 14vh; max-width: 100%; object-fit: contain; }
    #statsContainer { order: 1; flex: 1 1 50%; width: 50%; max-width: 50%; justify-content: center; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 0; }
    /* The admin settings button wraps to its own full-width line below. */
    #adminInfoConfig { order: 3; flex: 0 0 100%; width: 100%; }
    .stat-value { font-size: 1.5rem !important; }

    .clock-display { font-size: 12vh; } 
    .clock-display.blinds-mode { font-size: 10vh; }
    /* CHANGED: Reduced from 6vh to 4vh to prevent overlap */
    .current-blinds { font-size: 4vh; }
    .timer-info-center .center-level { font-size: 1.2rem; }
    .timer-info-center .center-timer { font-size: 2.4rem; }

    .side-panel { display: none !important; }
    .clock-container.sidebar-active {
        grid-template-columns: 1fr !important;
        grid-template-areas: "top" "bottom" !important;
    }
    
    .seating-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; 
        gap: 6px !important;
    }
    .table-card {
        width: 100% !important;
        box-sizing: border-box;
        padding: 5px !important; 
        font-size: 0.85rem !important;
    }
    .seat-row { padding: 2px 0 !important; }
    .view-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }

    /* Stack waitlist and roster/player-reg columns vertically on mobile */
    .roster-split-row { flex-direction: column; align-items: stretch; }

    /* Structure editor (blinds tab): keep the table locked to the container
       width so editing a row can't blow the whole table past the screen edges.
       Fixed layout means all columns keep their width regardless of the inputs
       inside an editing row, so only the edited row grows (taller), not wider. */
    #structureTable { table-layout: fixed; width: 100%; }
    #structureTable th, #structureTable td { padding: 8px 4px; overflow: hidden; }
    #structureTable .struct-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 5px 2px; }
    /* Break edit form fields must be allowed to shrink below their flex-basis. */
    #structureTable .break-edit-form .bef-field { min-width: 0; }
    #structureTable .break-edit-form .bef-pos { flex: 2 1 120px; }
}


/* MOBILE LANDSCAPE: keep the two clock cells, but side by side */
@media (orientation: landscape) and (max-height: 500px) {
    html, body { height: 100dvh; margin: 0; padding: 0; }
    .tab-content.active { display: flex; flex-direction: column; height: 100%; }

    /* Force a simple 2-cell row layout, overriding the desktop grid */
    .clock-container,
    .clock-container.sidebar-active,
    .clock-container.sidebar-collapsed {
        display: flex !important;
        flex-direction: row !important;
        height: 100%;
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        gap: 5px;
        flex: 1;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
    }

    /* Cells sit next to each other instead of stacking */
    .top-section {
        display: flex !important;
        flex-direction: row !important;
        flex: 1;
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        gap: 5px;
    }

    /* Left cell: clock (wider) */
    .main-panel {
        flex: 3;
        min-width: 0;
        min-height: 0;
        height: 100%;
        justify-content: center;
        /* Reserve room at the bottom for the absolutely-positioned timers */
        padding-bottom: 42px;
    }

    /* Right cell: details (narrower) */
    .info-panel {
        flex: 2;
        min-width: 0;
        min-height: 0;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: none !important;
    }

    /* Hide the extra desktop rows/sidebar so only the two cells remain */
    .bottom-section { display: none !important; }
    .side-panel { display: none !important; }

    /* Compact the clock cell so text doesn't squish/overlap */
    .game-title { font-size: 1rem; margin-top: 4px; margin-bottom: 2px; }
    .clock-display { font-size: 16vh; margin-bottom: 4px; }
    .clock-display.blinds-mode { font-size: 12vh; }
    .current-blinds { font-size: 5vh; }
    .current-ante { font-size: 2.4vh; }
    #mainClock.long-text { font-size: 13vh !important; }
    .countdown-until-label { font-size: 0.8rem; padding: 2px 0; }

    /* Shrink and lower the bottom timer row so it clears the clock content */
    .timer-info-left,
    .timer-info-right,
    .timer-info-center { font-size: 0.7rem; bottom: 6px; }
    .timer-val { font-size: 0.95rem; }
    .timer-info-center .center-level { font-size: 0.85rem; }
    .timer-info-center .center-timer { font-size: 1.4rem; }

    .logo-area { max-height: 40vh; min-height: 0; flex: 0 1 auto; width: 100%; overflow: visible; padding: 2px; }
    .logo-area .logo-img-small { max-height: 34vh; max-width: 80%; object-fit: contain; }
    .stat-value { font-size: 1.4rem !important; }
}

/* ICM Calculator Styles (Global) */
.icm-toolbar { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
    margin-bottom: 15px; 
}

.btn-icm {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icm:hover { filter: brightness(1.2); }

.icm-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9rem;
}

.icm-table th {
    text-align: left;
    color: var(--text-muted);
    padding: 5px;
    border-bottom: 1px solid var(--border);
}

.icm-table td {
    padding: 8px 5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.icm-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    color: white;
    padding: 5px;
    width: 100px;
    text-align: right;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
}

.icm-input:focus {
    border-color: var(--accent);
    outline: none;
}

.icm-result { color: var(--success); font-weight: bold; text-align: right; }
.icm-total-row { background: rgba(255,255,255,0.05); font-weight: bold; }

/* --- COUNTDOWN & MOBILE FIXES --- */

/* 1. Prevent wrapping globally on the main clock */
#mainClock {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1; /* Tighten vertical spacing */
}

/* 2. Specific style for long countdown text (Days/Hours) */
#mainClock.long-text {
    /* Auto-scale: Minimum 3rem, Preferred 12vw, Maximum 8rem */
    font-size: clamp(3rem, 12vw, 8rem) !important;
    color: #f1c40f; /* Gold color for countdown distinction */
}

/* 3. Mobile Layout Adjustments */
@media (max-width: 768px) {
    /* If text is long on mobile, shrink it further to avoid edge clipping */
    #mainClock.long-text {
        font-size: 11vw !important; 
    }
    
    /* Ensure timer infos don't get covered by a massive clock */
    .timer-info-left, .timer-info-right {
        font-size: 1rem;
        bottom: 10px;
    }
}

/* 4. COUNTDOWN "UNTIL THE GAME STARTS" LABEL */
.countdown-until-label {
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
}

@media (max-width: 768px) {
    .countdown-until-label { font-size: 1rem; }
}

/* =====================================================================
   MERGED ADMIN CONTROLS (admin.html merged into game page)
   ===================================================================== */

/* Event-name row with inline rename pencil (admin-only). For viewers the
   pencil is hidden, so the row renders identically to the old title. */
.game-title-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; width: 100%; }
/* Inline tournament-name editor (replaces the rename prompt). */
.game-title-edit {
    font-family: inherit; font-size: 1.4rem; font-weight: bold; text-transform: uppercase;
    letter-spacing: 1px; text-align: center; background: #1a1a2e; color: #fff;
    border: 1px solid var(--accent); border-radius: 6px; padding: 2px 10px;
    max-width: 80vw; width: auto;
}
.edit-icon { cursor: pointer; color: var(--accent); font-size: 1.05rem; opacity: 0.85; transition: opacity 0.2s; user-select: none; }
.edit-icon:hover { opacity: 1; }

/* Admin clock controls — sit inline just below the clock (admins only).
   Full-width scrub bar on top, then a Back / Play-Pause / Next button row. */
.admin-clock-controls {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; margin: 8px auto 14px; width: 90%; max-width: 520px;
    position: relative; z-index: 4;
}
.admin-clock-controls .acb-slider,
.acb-slider-wide { width: 100%; }
.acb-btn-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.acb-btn {
    background: var(--bg-panel); color: #fff; border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 12px; font-size: 1rem; cursor: pointer;
    font-weight: bold; line-height: 1; white-space: nowrap;
}
.acb-btn:hover { background: rgba(255,255,255,0.08); }
.acb-btn.acb-primary { background: var(--success, #10b981); border-color: var(--success, #10b981); color: #062318; min-width: 46px; }
.acb-btn.acb-small { padding: 6px 9px; font-size: 0.85rem; }
.acb-label { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.acb-time-val { color: var(--accent); font-family: 'Orbitron', sans-serif; font-weight: bold; min-width: 56px; text-align: center; }
.acb-slider { position: relative; width: 130px; height: 22px; display: flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.acb-slider-track { position: absolute; left: 0; right: 0; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; }
.acb-slider-fill { position: absolute; left: 0; height: 6px; width: 0%; background: var(--accent); border-radius: 3px; }
.acb-slider-thumb { position: absolute; left: 0%; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: #fff; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.acb-select, .acb-input {
    background: #1a1a2e; color: #fff; border: 1px solid #555; border-radius: 6px;
    padding: 7px 9px; font-size: 0.9rem;
}

/* Admin config (league / date / broadcast) inside the logo cell. */
.admin-info-config { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; position: relative; z-index: 4; }
.admin-info-config .aic-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.admin-info-config .aic-row .acb-label { flex: 0 0 auto; }
.admin-info-config .aic-row .acb-select,
.admin-info-config .aic-row .acb-input { flex: 1 1 auto; min-width: 0; }
/* Let the logo cell scroll for admins if the extra config makes it overflow. */
body.is-admin .info-panel { overflow-y: auto; }

/* Hide EVERY admin control while the clock is in fullscreen. The extra
   class selectors raise specificity above the .admin-only reveal rules
   (body.is-admin .admin-only.admin-flex, etc.) so this always wins. */
body.fullscreen-active.is-admin .admin-only,
body.fullscreen-active.is-admin .admin-only.admin-flex,
body.fullscreen-active.is-admin .admin-only.admin-inline,
body.fullscreen-active.is-admin .admin-only.admin-block { display: none !important; }

/* On desktop the 2-line clock controls need vertical room, or the big
   countdown gets clipped. Shrink the clock a touch for admins and reclaim
   some panel padding. In fullscreen the controls are hidden, so restore
   the full-size clock. (Mobile already fits and is left untouched.) */
@media (min-width: 769px) {
    body.is-admin .clock-display { font-size: 8vw; }
    body.is-admin .clock-display.blinds-mode { font-size: 6.5vw; }
    body.is-admin .main-panel { padding-bottom: 8%; }
    body.is-admin .game-title { margin-top: 14px; }
    body.fullscreen-active.is-admin .clock-display { font-size: 10vw; }
    body.fullscreen-active.is-admin .clock-display.blinds-mode { font-size: 8vw; }
    body.fullscreen-active.is-admin .main-panel { padding-bottom: 12%; }
    body.fullscreen-active.is-admin .game-title { margin-top: 25px; }
}

/* Unified admin "cell" width so the config panels and tables line up
   across the players, payouts and blinds tabs. Full width on smaller
   screens (max-width caps it; margins keep it centered). */
.acfg-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Hide the floating support bubble (and its open panel) while in
   fullscreen clock mode so it doesn't overlay the display. */
body.fullscreen-active #support-chat-btn,
body.fullscreen-active #support-chat-panel { display: none !important; }

@media (max-width: 900px) {
    .admin-clock-controls { gap: 8px; margin-top: 4px; width: 96%; }
    .acb-btn-row .acb-btn { padding: 8px 14px; }
    .admin-info-config { margin-top: 8px; }
    /* The floating support bubble is redundant on mobile (Support is in the
       menu) and would otherwise cover the bottom-right nav button. Hide it;
       the menu item still opens the chat via .click(). */
    #support-chat-btn { display: none !important; }
}

/* =====================================================================
   Merged from admin-merged.css
   Admin control styles for the merged game+admin page. Contains ONLY the
   control/utility classes used by the admin UI injected into game.html.
   Layout selectors that collide with the game layout above are omitted.
   ===================================================================== */

/* --- CONFIG GROUPS / LABELS --- */
.config-group { display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end; }
.config-item { flex: 1; min-width: 100px; }
.config-item .btn { margin-top: 0; height: 42px; }
.config-label { color: var(--text-muted); font-size: 0.8rem; display: block; margin-bottom: 5px; text-transform: uppercase; font-weight: bold; }
.btn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- PANELS / CONTAINERS --- */
.panel { background: var(--bg-panel); padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border); }
.panel-full { width: 100%; }
.centered-table-container { max-width: 800px; margin: 0 auto; width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1025px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* --- BUTTONS --- */
.btn { padding: 10px 15px; cursor: pointer; border: none; font-weight: bold; border-radius: 4px; color: white; font-size: 0.9rem; transition: opacity 0.2s; white-space: nowrap; text-decoration: none; display: inline-block; text-align: center; }
.btn:hover { opacity: 0.9; }
.btn-green { background: var(--success); color: white; }
.btn-red { background: var(--danger); color: white; }
.btn-blue { background: #007bff; color: white; }
.btn-gold { background: var(--primary); color: #000; }
.btn-grey { background: #6c757d; color: white; }
.btn-orange { background: #fd7e14; color: white; }
.btn-purple { background-color: #8e44ad; color: white; }
.btn-purple:hover { background-color: #9b59b6; }
.btn-icon { padding: 5px 10px; font-size: 1rem; margin-left: 2px; }
.btn-small { padding: 4px 10px; font-size: 0.8rem; }

/* --- INPUTS --- */
.input-dark { background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); padding: 10px; border-radius: 4px; width: 100%; margin-bottom: 10px; font-size: 0.95rem; box-sizing: border-box; }
.input-dark:focus { outline: none; border-color: var(--accent); }
select.input-dark { appearance: auto; }

.toggle-row { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid var(--border); }
.struct-input { background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); padding: 5px; width: 70px; text-align: center; border-radius: 3px; }
.payout-input { background: var(--bg-main); color: var(--text-main); border: 1px solid var(--border); width: 80px; padding: 5px; }

/* --- INLINE EDITING --- */
.edit-save { color: var(--success); }
.edit-save:hover { color: #2ecc71; }
.name-edit-input { background: var(--bg-main); border: 1px solid var(--accent); color: var(--text-main); padding: 2px 5px; border-radius: 3px; font-size: 0.9rem; width: 140px; }
.chip-input-container { display: inline-block; margin-left: 10px; }
.chip-input { background: var(--bg-main); border: 1px solid var(--border); color: var(--accent); padding: 2px 5px; border-radius: 4px; width: 80px; font-size: 0.9rem; font-weight: bold; }
.chip-input:focus { outline: none; border-color: var(--accent); }

/* --- RADIO --- */
.radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px; }
.radio-option { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.radio-option input[type="radio"] { accent-color: var(--accent); transform: scale(1.2); }

/* --- ADMIN TABLE --- */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.95rem; background: var(--bg-panel); border: 1px solid var(--border); }
.admin-table th { text-align: left; background: var(--bg-main); padding: 12px; border-bottom: 2px solid var(--border); color: var(--text-muted); text-transform: uppercase; font-size: 0.8rem; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:hover { background: rgba(255,255,255,0.05); }
.break-row td { background: rgba(241, 196, 15, 0.1); color: var(--accent); font-weight: bold; font-style: italic; }

/* --- BREAK EDIT FORM --- */
.break-edit-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; font-style: normal; }
.break-edit-form .bef-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.break-edit-form .bef-cap { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); font-weight: 700; font-style: normal; }
.break-edit-form .input-dark { margin-bottom: 0; width: 100%; }
.break-edit-form .bef-label { flex: 1 1 100%; }
.break-edit-form .bef-pos { flex: 2 1 200px; }
.break-edit-form .bef-dur { flex: 1 1 90px; }
.break-edit-form .bef-actions { display: flex; gap: 6px; align-items: flex-end; margin-left: auto; }

/* --- PLAYER ROSTER (admin) --- */
.roster-top-section { width: 100%; max-width: 800px; margin: 0 auto 20px; display: none; border: 1px solid var(--success); border-radius: 8px; padding: 15px; background: var(--bg-panel); }
.roster-split-row { display: flex; gap: 20px; justify-content: center; align-items: flex-start; max-width: 800px; margin: 0 auto; width: 100%; }
.roster-col { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 15px; flex: 1; min-width: 250px; }
.roster-col-constrained { width: 100%; }
.roster-header { text-align: center; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; font-weight: bold; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
.roster-action-bar { display: flex; gap: 10px; justify-content: space-between; align-items: center; background: var(--bg-main); padding: 8px 10px; border-radius: 4px; margin-bottom: 15px; border: 1px solid var(--border); flex-wrap: nowrap; width: 100%; }
.roster-action-bar .btn { flex: 1; min-width: 0; white-space: normal; text-align: center; line-height: 1.1; padding: 8px 5px; height: auto; display: flex; align-items: center; justify-content: center; }
.player-row { display: flex; justify-content: space-between; padding: 12px 10px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 1rem; align-items: center; border-radius: 4px; transition: background 0.2s; }
.player-row:hover { background: rgba(255,255,255,0.05); }
.player-row.eliminated { opacity: 0.5; color: var(--danger); }
.eliminated-section { border-top: 1px solid var(--border); padding-top: 15px; margin-top: 15px; display: none; }
.eliminated-label { color: var(--danger); font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; font-weight: bold; }

/* --- SEATING (admin) --- */
.tables-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.table-box { border: 1px solid var(--border); padding: 10px; border-radius: 8px; background: var(--bg-panel); width: 200px; flex: 0 0 auto; }
.table-header { margin: 0 0 5px 0; color: var(--success); font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; }
.seat-item { padding: 6px; margin: 4px 0; background: var(--bg-main); border: 1px solid var(--border); cursor: pointer; display: flex; justify-content: space-between; font-size: 0.85rem; border-radius: 3px; }
.seat-item:hover { background: #333; }
.seat-item.empty { color: var(--text-muted); font-style: italic; }
.seat-item.blocked { border-color: var(--danger); color: var(--danger); background: rgba(220, 53, 69, 0.1); }
.seat-item.move-target { border-color: var(--success); box-shadow: 0 0 8px rgba(40, 167, 69, 0.4); background: rgba(40, 167, 69, 0.1); }
.moving-mode .table-box { border-color: var(--success); box-shadow: 0 0 10px rgba(40,167,69,0.2); }
.move-instruction { display: none; background: var(--success); color: white; padding: 10px; text-align: center; margin-bottom: 15px; border-radius: 4px; font-weight: bold; }
.move-cancel-btn { color: black; border: none; border-radius: 3px; padding: 5px 10px; margin-left: 10px; cursor: pointer; }

/* --- STATS & PAYOUTS (admin) --- */
.stat-card { background: var(--bg-main); padding: 15px; text-align: center; border-radius: 6px; border: 1px solid var(--border); }
.stat-val { font-size: 1.5rem; font-weight: bold; color: var(--success); }
.stat-sub-row { display: flex; justify-content: center; gap: 15px; margin-top: 10px; color: var(--text-muted); font-size: 0.9rem; flex-wrap: wrap; }
.stat-sub-val { color: var(--text-main); font-weight: bold; }
.payout-manager-container { background: var(--bg-main); padding: 15px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 20px; width: 100%; box-sizing: border-box; }
.payout-control-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
#manualDeltaDisplay { font-size: 1.2rem; font-weight: bold; margin-left: 10px; }
.delta-pos { color: var(--success); } .delta-neg { color: var(--danger); } .delta-neutral { color: var(--text-muted); }
.payout-switch { display: flex; background: #333; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; }
.payout-option { padding: 8px 16px; font-weight: bold; color: var(--text-muted); transition: all 0.2s; }
.payout-option.selected { background: #2563eb; color: white; }

/* --- MODAL INTERNALS (reuses game's .modal-overlay/.modal-box base) --- */
.modal-box h3 { margin-top: 0; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-subtext { color: var(--text-muted); font-size: 0.9rem; margin-top: -10px; margin-bottom: 15px; }

/* --- CHIP / TAG LISTS --- */
.chip-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); padding: 4px 10px; border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.chip-tag:hover { background: rgba(231,76,60,0.15); border-color: #e74c3c; color: #e74c3c; }
.template-actions { border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 15px; }
.template-list-content { max-height: 300px; overflow-y: auto; display: grid; gap: 10px; }
.template-item { background: var(--bg-main); padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); }

/* --- FREQ PLAYER LIST --- */
.freq-list-container { max-height: 300px; overflow-y: auto; border-top: 1px solid var(--border); padding-top: 10px; min-height: 100px; }
.freq-item { display: flex; justify-content: space-between; align-items: center; background: var(--bg-main); padding: 8px 10px; border-bottom: 1px solid var(--border); border-radius: 4px; margin-bottom: 5px; }
.freq-item:hover { background: rgba(255,255,255,0.05); }
.freq-name { cursor: pointer; flex-grow: 1; font-weight: bold; color: var(--text-muted); }
.freq-name:hover { color: var(--text-main); }
.freq-add-icon { color: var(--success); margin-right: 10px; font-size: 1.1rem; }

/* --- KILLER LIST (bounty) --- */
.killer-list-container { max-height: 300px; overflow-y: auto; border: 1px solid #333; border-radius: 4px; background: #111; margin-top: 10px; }
.killer-item { padding: 12px; border-bottom: 1px solid #333; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.killer-item:hover { background: #222; }
.killer-item:last-child { border-bottom: none; }

/* --- FLEX / SPACING UTILITIES --- */
.flex-row { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end { display: flex; justify-content: flex-end; }
.flex-col-end { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.flex-wrap { flex-wrap: wrap; }
.w-100 { width: 100%; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* --- TYPOGRAPHY UTILS --- */
.text-muted { color: var(--text-muted); font-size: 0.9rem; }
.text-small { font-size: 0.8rem; }
.text-gold { color: var(--accent); }
.text-white { color: var(--text-main); }
.text-bold { font-weight: bold; }

/* --- MISC COMPONENTS --- */
.clock-level-info { text-align: center; margin-bottom: 10px; }
.level-display { font-size: 1.5rem; font-weight: bold; color: var(--accent); }
.clock-display-large { font-size: 4rem; font-family: monospace; text-align: center; color: var(--text-main); margin: 0; line-height: 1; }
.broadcast-container { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 15px; }
.game-name-display { font-weight: bold; color: var(--text-main); }
.date-picker-trigger { background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); padding: 10px; border-radius: 4px; cursor: pointer; min-width: 150px; text-align: right; position: relative; }
.date-picker-input { opacity: 0; width: 0; height: 0; border: 0; padding: 0; position: absolute; }
.date-display-text { pointer-events: none; }
.log-container { height: 200px; overflow-y: auto; font-family: monospace; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; }
.section-header-gold { margin-top: 0; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; }
.section-actions { text-align: center; border-top: 1px solid var(--border); padding-top: 15px; }
.structure-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.vertical-divider { width: 1px; height: 20px; background: var(--border); margin: 0 5px; }
.manual-stats-area { display: none; margin-top: 15px; border-top: 1px solid var(--border); padding-top: 15px; }

/* --- TOOLTIPS --- */
.tooltip-container { display: inline-block; position: relative; margin-left: 5px; vertical-align: middle; cursor: help; }
.tooltip-icon { display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; background: var(--text-muted); color: var(--bg-panel); border-radius: 50%; font-size: 11px; font-weight: bold; }
.tooltip-text { display: none; width: 220px; max-width: calc(100vw - 60px); background-color: #222; color: #fff; text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 2500; bottom: 135%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.85rem; font-weight: normal; text-transform: none; box-shadow: 0 4px 15px rgba(0,0,0,0.8); border: 1px solid var(--border); white-space: normal; line-height: 1.4; pointer-events: none; }
.tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #222 transparent transparent transparent; }
.tooltip-container:hover .tooltip-text, .tooltip-container:active .tooltip-text { display: block; visibility: visible; opacity: 1; }
.tooltip-container.smart-left .tooltip-text { left: auto; right: -10px; transform: none; }
.tooltip-container.smart-left .tooltip-text::after { left: auto; right: 18px; margin-left: 0; }
.tooltip-container.smart-right .tooltip-text { left: -10px; right: auto; transform: none; }
.tooltip-container.smart-right .tooltip-text::after { left: 18px; right: auto; margin-left: 0; }

/* Admin modal boxes can be tall (templates, warnings) — allow scroll. */
.modal-box.admin-modal { max-width: 480px; overflow-y: auto; }