:root {
    --bg-dark: #2a2a2a;
    --bg-panel: #3d3d3d;
    --bg-header: #ffd700;
    /* Gold/Yellow based on 'Iniciante' hint */
    --text-primary: #ffffff;
    --text-dark: #1a1a1a;
    --accent-color: #ff8c00;
    /* Orange */
    --stop-color: #ff0000;
    --border-color: #555;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
}

body {
    background-color: #000;
    /* Outer background */
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.app-container {
    width: 100%;
    max-width: 1400px;
    min-height: 95vh;
    /* Changed from fixed height */
    height: auto;
    background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: visible;
    /* Allow content to dictate size */
    position: relative;
    /* Essential for absolute overlays */
}

/* Top Bar */
.top-bar {
    background-color: #ffd700;
    /* Yellow bar */
    color: #000;
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
}

.top-bar .divider {
    margin: 0 10px;
    opacity: 0.5;
}

/* Game Header */
.game-header {
    background-color: #000;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
}

.notification-area {
    background-color: #d4ac0d;
    /* Darker yellow/gold */
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    flex: 1;
    margin-right: 20px;
    display: flex;
    align-items: center;
    height: 100%;
    border: 2px solid #b7950b;
    transition: background-color 0.3s, border-color 0.3s;
    position: relative;
    /* Ensure z-index works */
    z-index: 10;
    min-width: 0;
    /* Prevent flex collapse */
}

.notification-area.alert {
    background-color: #e67e22;
    /* Orange for alert */
    border-color: #d35400;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from {
        box-shadow: 0 0 5px rgba(230, 126, 34, 0.5);
    }

    to {
        box-shadow: 0 0 15px rgba(230, 126, 34, 0.8);
    }
}

.notification-area.stop-alert {
    background-color: #ff0000 !important;
    border-color: #ffcccc !important;
    color: white !important;
    animation: blink-stop 0.3s 4 !important;
    /* Blink twice (on-off-on-off) fast */
    z-index: 999;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

@keyframes blink-stop {

    0%,
    100% {
        background-color: #ff0000;
    }

    50% {
        background-color: #800000;
    }
}

.center-controls {
    display: flex;
    gap: 20px;
}

.control-box {
    background: linear-gradient(to bottom, #f0f0f0, #ccc);
    width: 100px;
    height: 80px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: #000;
    box-shadow: 0 4px 0 #888, inset 0 2px 5px rgba(255, 255, 255, 0.5);
    border: 1px solid #999;
}

.timer-box span {
    font-family: monospace;
}

.logo-area h1 {
    font-size: 3.5rem;
    color: var(--stop-color);
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #550000;
    letter-spacing: 2px;
}

/* Game Board */
.game-board {
    flex: 1;
    min-height: 0;
    /* Enable flex scrolling */
    background-color: #4a4a4a;
    padding: 10px;
    overflow-y: auto;
}

.table-header,
.player-row {
    display: grid;
    grid-template-columns: 100px 150px 1fr 1fr 1fr 60px 80px;
    /* Adjust according to cols */
    gap: 1px;
    margin-bottom: 2px;
}

.table-header>div {
    background-color: #e67e22;
    /* Header Orange */
    color: white;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.player-row>div {
    background-color: #fff;
    color: #000;
    display: flex;
    align-items: center;
    padding: 0 5px;
    height: 35px;
    /* Compact rows for small screens */
}

.player-row.opponent>div {
    background-color: #f0f0f0;
    color: #555;
}

.input-cell input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

/* Input color feedback classes - Applied to the CELL */
.input-cell.input-blue input {
    color: #2196f3 !important;
    font-weight: bold;
}

.input-cell.input-orange input {
    color: #ff9800 !important;
    font-weight: bold;
}

.input-cell.input-gray input {
    color: #9e9e9e !important;
    font-weight: bold;
}

.input-cell.input-red input {
    color: #f44336 !important;
    font-weight: bold;
}

/* Clear backgrounds */
.input-cell.input-blue,
.input-cell.input-orange,
.input-cell.input-gray,
.input-cell.input-red {
    background-color: transparent !important;
    border: none;
}

.col-score,
.col-total {
    justify-content: center;
    background-color: #dcdcdc !important;
}

.player-row .badge {
    background-color: #aaa;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.obfuscated {
    letter-spacing: 3px;
    color: #888;
}

/* Revealed Answer Cells */
.revealed-cell {
    padding: 0 !important;
}

.revealed-answer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 4px;
    transition: transform 0.2s;
}

.revealed-answer:hover {
    transform: scale(1.05);
}

.revealed-answer .answer-text {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 3px;
    text-align: center;
}

.revealed-answer .answer-points {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.9;
}

/* Color classes for revealed answers in table */
.revealed-answer.score-blue,
.revealed-answer.score-unique {
    background-color: transparent;
    color: #2196f3;
    border: none;
    font-weight: bold;
}

.revealed-answer.score-orange,
.revealed-answer.score-multiple {
    background-color: transparent;
    color: #ff9800;
    border: none;
    font-weight: bold;
}

.revealed-answer.score-gray,
.revealed-answer.score-identical {
    background-color: transparent;
    color: #9e9e9e;
    border: none;
    font-weight: bold;
}

.revealed-answer.score-invalid,
.revealed-answer.score-red {
    background-color: transparent;
    color: #000000;
    border: none;
    font-weight: bold;
    opacity: 1;
}

/* Bottom Panel */
.bottom-panel {
    height: 200px;
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: #2a2a2a;
    border-top: 4px solid #ffd700;
    flex-shrink: 0;
    /* Prevent shrinking */
    z-index: 10;
}

.panel-column {
    background-color: #000;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid #ffd700;
}

.chat-section {
    flex: 1.5;
}

.stop-section {
    flex: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background-color: #555;
    border: none;
    padding: 10px;
}

/* Score Legend */
.stop-legend {
    background-color: #333;
    padding: 8px;
    border: 1px solid #777;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 130px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.stop-legend h4 {
    color: #fff;
    text-align: center;
    font-size: 0.75rem;
    margin-bottom: 4px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #444;
    padding: 2px 4px;
    border: 1px solid #555;
    border-radius: 3px;
}

.legend-row span {
    font-size: 0.8rem;
    color: #ddd;
    font-weight: 500;
    white-space: nowrap;
}

.color-box {
    width: 20px;
    height: 10px;
    flex-shrink: 0;
}

.color-black {
    background-color: #000;
    border: 1px solid #555;
}

.color-gray {
    background-color: #9e9e9e;
}

.color-orange {
    background-color: #ff9800;
}

.color-blue {
    background-color: #2196f3;
}

.stop-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.players-section {
    flex: 1;
}

.panel-header {
    background-color: #333;
    color: #ffd700;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #444;
}

.chat-messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    font-size: 0.9rem;
}

.msg {
    margin-bottom: 5px;
}

.msg.system {
    color: #aaa;
    font-style: italic;
}

.msg.player {
    color: #fff;
}

.chat-input-area {
    padding: 5px;
    background-color: #fff;
}

.input-label {
    display: none;
}

.chat-input-area input {
    width: 100%;
    border: none;
    padding: 5px;
}

/* Stop Button */
.btn-stop {
    width: 110px;
    height: 110px;
    background-color: #28b463;
    /* Green for idle? Or Red? Typically STOP is Red, button in prompt might be Green to 'call' it? User image shows Green circle in mockup area maybe? */
    /* Looking at description: "Botão STOP". Usually Red. But if it's "Ready" it might be Green. 
       Let's stick to a Red STOP sign style or Green "Go". 
       Wait, the user image description from me previously said "Green circle". 
       Let's use Green based on my visual interpretation capability potential (even if limited). 
       Actually, standard STOP is red. But if the button is to "Validation" or "Done", it might be green.
       Let's use Red for STOP logic usually. But I'll stick to a generic nice button. 
       Re-reading user prompt: "STOP liberado após...". 
       Let's go Red for STOP. */
    background: radial-gradient(circle, #e74c3c 0%, #c0392b 100%);
    border: 3px solid #fff;
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.7);
    transition: transform 0.1s;
}

.btn-stop:hover {
    transform: scale(1.05);
}

.btn-stop:active {
    transform: scale(0.95);
}

.player-list {
    list-style: none;
    padding: 10px;
    color: #ccc;
    font-size: 0.9rem;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--bg-panel);
    border: 2px solid var(--accent-color);
    padding: 30px;
    border-radius: 12px;
    min-width: 350px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-header h3 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1.5em;
}

.btn-close {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.btn-close:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: rotate(90deg);
}

.modal-body {
    color: var(--text-primary);
}

/* Intermission Overlay */
.intermission-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Covers everything initially */
    background: rgba(18, 18, 20, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 90;
    /* High but below bottom panel if we lift bottom panel */
}

/* Lift Bottom Panel above overlay */
.bottom-panel {
    position: relative;
    z-index: 95;
    /* Higher than intermission */
    background: var(--bg-secondary);
    /* Ensure opaque background */
}

.intermission-content {
    text-align: center;
    color: var(--text-primary);
    animation: zoomIn 0.5s ease;
    transform: translateY(-50px);
    /* Move up to prevent cutoff */
}

.intermission-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.countdown-big {
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    margin: 20px 0;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes modalPop {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Bottom Mode for Intermission (Post-Round 1) */
.intermission-overlay.bottom-mode {
    top: auto;
    bottom: 0;
    height: 260px;
    /* Covers bottom panel (250px) + border */
    background: rgba(18, 18, 20, 0.98);
    border-top: 4px solid #ffd700;
    align-items: center;
    /* Center content vertically */
    padding-top: 0;
    z-index: 100;
    /* Above bottom-panel (95) */
}

.intermission-overlay.bottom-mode .intermission-content {
    flex-direction: row;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.intermission-overlay.bottom-mode h2 {
    font-size: 1.5rem;
    margin: 0;
}

.intermission-overlay.bottom-mode .countdown-big {
    font-size: 4rem;
    margin: 0;
}

.modal-content h3 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.modal-content p {
    color: #ddd;
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-primary:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
}

/* SCREENS */
.screen {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    animation: fadeIn 0.4s ease;
}

.screen.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   LOGIN SCREEN (NOVA CENTRAL PORTAL LAYOUT)
   ========================================================================== */
#login-screen {
    background: #000;
    min-height: 100vh;
    height: auto;
    width: 100%;
    color: #fff;
    font-family: 'Ubuntu', 'Outfit', sans-serif;
    position: relative;
}

#login-screen * {
    box-sizing: border-box;
}

/* Navbar Desktop */
#login-screen .desk {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 30px;
    background: #000;
}

#login-screen .logo {
    width: 110px;
    height: auto;
    display: block;
}

#login-screen .uk-navbar-container:not(.uk-navbar-transparent) {
    background-color: #000;
}

#login-screen .uk-navbar-nav {
    gap: 60px;
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#login-screen .uk-navbar-nav > li > a {
    color: #fff !important;
    font-size: 16px;
    text-transform: none;
    transition: color 0.2s;
    text-decoration: none;
}

#login-screen .uk-navbar-nav > li > a:hover {
    color: #99cc00 !important;
}

#login-screen .uk-navbar-dropdown {
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 4px;
}

#login-screen .uk-navbar-dropdown-nav > li > a {
    color: #fff !important;
    font-size: 14px;
}

#login-screen .uk-navbar-dropdown-nav > li > a:hover {
    color: #99cc00 !important;
}

#login-screen .uk-navbar-center {
    gap: 55px;
}

/* Navbar Mobile */
#login-screen .mobile {
    display: none;
    background-color: #000;
}

#login-screen .nav-mobile {
    width: 85px;
    height: auto;
}

#login-screen .uk-offcanvas-bar {
    background-color: #000;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#login-screen .uk-nav-default a {
    color: #fff !important;
    font-size: 16px;
}

/* Banner Anuncio */
#login-screen .banner-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
}

#login-screen .anuncio {
    font-size: 25px;
    width: 100% !important;
    max-width: 900px;
    border: none !important;
    background: #ccc !important;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

#login-screen .anuncio-text {
    font-size: 30px !important;
    color: #333 !important;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* Section Title */
#login-screen .sobre {
    padding-top: 25px;
    padding-bottom: 25px;
    background: #000;
    text-align: center;
}

#login-screen .sobre h3 {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
}

/* Jogos Section & Side-by-Side Grid */
#login-screen .jogos {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px;
}

#login-screen .portal-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

#login-screen .portal-col-game {
    flex: 1 1 450px;
    max-width: 450px;
    display: flex;
    justify-content: flex-end;
}

#login-screen .portal-col-login {
    flex: 0 0 280px;
    max-width: 280px;
    display: flex;
    justify-content: flex-start;
}

#login-screen .stop-game-card {
    background: transparent;
    width: 100%;
    height: 185px;
    display: flex;
    flex-direction: column;
}

#login-screen .uk-card-header {
    border: 2.5px solid #99cc00;
    color: #fff;
    background: #000;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom: 1px solid #000 !important;
    padding: 8px 16px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    height: 42px;
    box-sizing: border-box;
}

#login-screen .stop-game-card .uk-card-body {
    border: 2.5px solid #99cc00;
    color: #fff;
    background: #000;
    padding: 12px 16px 8px 16px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 143px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

#login-screen .stop-content-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex: 1;
}

#login-screen .stop-desc-col {
    flex: 1;
}

#login-screen .stop-game-card .uk-card-body p {
    font-size: 13.5px;
    color: #fff;
    text-align: left;
    margin: 0;
    line-height: 1.4;
}

#login-screen .image-game {
    flex: 0 0 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#login-screen .image-game img {
    max-width: 125px;
    max-height: 85px;
    border: 1px solid #333;
    border-radius: 3px;
}

#login-screen .stop-more-row {
    text-align: right;
    margin-top: 2px;
}

#login-screen .stop-game-card .uk-button-text {
    color: #fff !important;
    background: transparent;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    text-transform: none;
}

#login-screen .stop-game-card .uk-button-text:hover {
    color: #99cc00 !important;
    text-decoration: underline;
}

/* Login Card */
#login-screen .login-card {
    background: #99cc00;
    border: 2px solid #fff;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0px;
    width: 100%;
    height: 185px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#login-screen .login-card form {
    width: 100%;
    text-align: center;
}

#login-screen .login-card .uk-margin {
    margin-bottom: 8px !important;
}

#login-screen .login-card .uk-inline {
    width: 100%;
    position: relative;
    display: inline-block;
}

#login-screen .login-card .uk-form-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #666;
    pointer-events: none;
}

#login-screen .login-card input {
    height: 30px;
    width: 100%;
    padding-left: 32px !important;
    padding-right: 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    color: #000;
    font-size: 13px;
    box-sizing: border-box;
}

#login-screen .login-card input:focus {
    outline: none;
    border-color: #333;
    background: #fff;
}

#login-screen .login-card button {
    background: #ff9933;
    color: #000;
    border: 1px solid #d35400;
    border-radius: 15px;
    width: 42px;
    height: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
    margin: 4px auto 2px auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, background-color 0.2s;
}

#login-screen .login-card button:hover {
    background: #ffaa55;
    transform: scale(1.05);
}

#login-screen .login-card button:active {
    transform: scale(0.95);
}

#login-screen .login-card a {
    background: none;
    text-align: center !important;
    font-size: 12px;
    color: #000 !important;
    text-decoration: underline;
    display: inline-block;
    margin-top: 2px;
    cursor: pointer;
}

#login-screen .login-card a:hover {
    color: #222 !important;
}

/* Footer */
#login-screen .portal-footer {
    padding: 25px 20px;
    background: #ccc;
    color: #000;
    width: 100%;
    margin-top: auto;
}

#login-screen .portal-footer .alsite {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    text-align: center;
    flex-wrap: wrap;
}

#login-screen .portal-footer .alsite img {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

/* WhatsApp Floating Button & Aura */
.bag-whatsapp-alert {
    z-index: 1020;
    position: fixed;
    bottom: 127px;
    padding: 5px 9px;
    right: 156px;
    background: #616161;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    width: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.bag-whatsapp-alert-arrow {
    position: fixed;
    bottom: 130px;
    padding: 4px 7px;
    right: 152px;
    background: #616161;
    display: none;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    z-index: 31;
}

.bloco-wthats {
    position: fixed;
    right: 46px;
    bottom: 89px;
    z-index: 100;
    width: 100px;
    height: 100px;
}

.bloco-wthats .aura,
.bloco-wthats .link-whats {
    position: absolute;
    display: block;
    top: 50%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bloco-wthats .link-whats {
    z-index: 1;
    background-color: #44bb6e;
    background-image: url(./assets/img/whatsapp-new.svg) !important;
    background-size: 35px !important;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    box-shadow: 6px 6px 25px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.bloco-wthats .link-whats:hover {
    background-color: #16b84f;
    transform: translate(-50%, -50%) scale(1.05);
}

.bloco-wthats .aura {
    background-color: #44bb6e;
    opacity: 1;
    transition: width 1.5s, height 1.5s, opacity 2.5s;
    animation: aura 2s infinite;
}

@keyframes aura {
    0% {
        opacity: 1;
        width: 70px;
        height: 70px;
    }
    100% {
        opacity: 0;
        width: 150px;
        height: 150px;
    }
}

/* Responsive Media Queries */
@media screen and (max-width: 768px) {
    #login-screen .desk {
        display: none;
    }

    #login-screen .mobile {
        display: block;
    }

    #login-screen .portal-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    #login-screen .portal-col-game,
    #login-screen .portal-col-login {
        max-width: 90% !important;
        width: 90% !important;
        flex: auto;
        justify-content: center;
    }

    #login-screen .stop-game-card {
        height: auto;
        min-height: 185px;
    }

    #login-screen .stop-game-card .uk-card-body {
        height: auto;
        min-height: 140px;
    }

    #login-screen .login-card {
        height: auto;
        min-height: 185px;
        padding: 15px;
    }

    #login-screen .anuncio {
        width: 90% !important;
    }

    .bloco-wthats {
        right: 20px;
        bottom: 70px;
    }

    .bag-whatsapp-alert {
        right: 110px;
        bottom: 105px;
    }
}

@media screen and (min-width: 769px) {
    #login-screen .mobile {
        display: none;
    }
}

/* LOBBY SCREEN */
#lobby-screen {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    justify-content: flex-start;
    padding: 20px;
}

.lobby-header {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar-circle {
    width: 60px;
    height: 60px;
    background: var(--bg-header);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #000;
}

.user-details h2 {
    color: var(--bg-header);
    font-size: 1.5rem;
}

.stats-mini {
    color: #ccc;
    font-size: 1rem;
}

.btn-secondary {
    background: transparent;
    border: 1px solid #666;
    color: #ccc;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #333;
    color: white;
}

.lobby-content {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    height: 70vh;
}

.lobby-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.ranking-section {
    flex: 1;
    /* Reduce ranking priority */
}

.rooms-section {
    flex: 1.5;
    /* Give more space to rooms */
    min-height: 0;
    /* Allow flex shrink correctly if needed, but we want grow */
    overflow: hidden;
    /* Container clips, inner scrolls */
}

.room-group-block {
    grid-column: 1 / -1;
    background-color: #3d3d3d;
    border: 2px solid #ffd700;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: visible;
    /* DON'T CLIP CONTENT */
    height: auto;
    width: 100%;
}

.room-group-header {
    background-color: #ffd700;
    color: #000;
    padding: 10px 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.room-group-list {
    display: flex;
    /* Vertical Stack */
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    height: auto;
}

.ranking-tabs {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.tab {
    background: transparent;
    border: none;
    color: #888;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: bold;
}

.tab.active {
    color: white;
    border-bottom: 2px solid var(--accent-color);
}

.ranking-list {
    flex: 1;
    overflow-y: auto;
}

.rank-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #333;
    align-items: center;
}

.rank-row:nth-child(1) {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid gold;
}

.rank-row:nth-child(2) {
    background: rgba(192, 192, 192, 0.05);
}

.rank-row:nth-child(3) {
    background: rgba(205, 127, 50, 0.05);
}

.rank-pos {
    width: 30px;
    font-weight: bold;
    color: #888;
}

.rank-row:nth-child(1) .rank-pos {
    color: gold;
}

.rank-name {
    flex: 1;
    text-align: left;
    padding-left: 10px;
}

.rank-score {
    font-weight: bold;
    color: var(--accent-color);
}

.rooms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.room-card {
    background: #333;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--bg-header);
    transition: 0.2s;
}

.room-card:hover {
    transform: translateX(5px);
    background: #3d3d3d;
}

/* New Room Card Layout */
.room-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
}

.room-details h3 {
    margin: 0;
    font-size: 1.25rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.room-meta {
    display: flex;
    gap: 8px;
    font-size: 0.9rem;
    color: #aaa;
    align-items: center;
}

.meta-divider {
    color: #555;
}

.status-badge {
    font-size: 0.7rem;
    background: #e74c3c;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.btn-join {
    background: var(--bg-header);
    color: black;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

/* Scoring Overlay */
.scoring-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    animation: fadeIn 0.3s ease;
}

.scoring-breakdown {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border: 3px solid var(--bg-header);
    border-radius: 20px;
    padding: 40px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: modalPop 0.4s ease;
}

.scoring-breakdown h2 {
    color: var(--bg-header);
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scoring-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.scoring-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 20px;
}

.scoring-header-row,
.scoring-data-row,
.scoring-total-row {
    display: grid;
    gap: 2px;
}

.scoring-header-row {
    background: var(--accent-color);
    border-radius: 8px 8px 0 0;
}

.scoring-cell {
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60px;
}

.category-header,
.player-header {
    background: var(--accent-color);
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}

.category-name {
    background: #444;
    color: var(--bg-header);
    font-weight: bold;
    font-size: 1rem;
}

.answer-cell {
    background: #fff;
    color: #000;
    border-radius: 6px;
    transition: transform 0.2s;
}

.answer-cell:hover {
    transform: scale(1.05);
    z-index: 10;
}

.answer-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.answer-points {
    font-size: 0.9rem;
    font-weight: bold;
    opacity: 0.8;
}

/* Score Type Colors */
/* Score Type Colors - Updated to Text Only */
.score-blue,
.score-unique {
    background-color: transparent !important;
    color: #2196f3 !important;
    border: none !important;
}

.score-orange,
.score-multiple {
    background-color: transparent !important;
    color: #ff9800 !important;
    border: none !important;
}

.score-gray,
.score-identical {
    background-color: transparent !important;
    color: #9e9e9e !important;
    border: none !important;
}

.score-red,
.score-invalid {
    background-color: transparent !important;
    color: #f44336 !important;
    border: none !important;
    opacity: 1 !important;
}

.scoring-total-row {
    background: var(--bg-header);
    border-radius: 0 0 8px 8px;
    margin-top: 10px;
}

.total-label {
    background: var(--bg-header);
    color: #000;
    font-weight: 900;
    font-size: 1.2rem;
}

.total-score {
    background: var(--bg-header);
    color: #000;
    font-weight: 900;
    font-size: 1.5rem;
}

.scoring-footer {
    text-align: center;
    color: #aaa;
    font-size: 1.1rem;
    margin-top: 20px;
    font-style: italic;
}

/* ==========================================================================
   MULTI-ROOM GRID LAYOUT
   ========================================================================== */
.rooms-grid {
    display: grid;
    width: 100%;
    height: 100vh;
    /* Full viewport height */
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #222;
}

/* Ensure rooms in grid don't inherit app-container max-width */
.rooms-grid .room-instance {
    max-width: none;
}

/* 1 Room: Full screen */
/* 1 Room: Full screen */
.rooms-grid.grid-1 {
    display: flex;
    /* Use flex for single item to ensure full coverage */
    width: 100%;
    height: 100%;
    padding: 0;
    /* Remove padding for immersive feel */
}

.rooms-grid.grid-1 .room-instance {
    border: none;
    /* Remove border for single room to look like native app */
    border-radius: 0;
    flex: 1;
    /* Ensure it grows to fill the container */
    width: 100%;
    /* Force width */
}

/* 2 Rooms: Side by Side */
.rooms-grid.grid-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 3 or 4 Rooms: 2x2 Grid */
.rooms-grid.grid-4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    padding: 2px !important;
    margin: 0 !important;
    gap: 4px !important;
    /* Small gap for visual separation */
    box-sizing: border-box !important;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 9999;
    /* Force top */
    background: #111;
}

/* Fix specific overflow issues in 2x2 mode */
.rooms-grid.grid-4 .room-instance {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Allow player rows to shrink in grid mode */
.rooms-grid.grid-4 .player-row {
    min-height: 0 !important;
    /* Override the 250px global min-height */
    margin-bottom: 5px !important;
}

/* Compact headers in grid mode */
.rooms-grid.grid-4 .panel-header {
    padding: 2px 5px !important;
    font-size: 0.7rem !important;
}

/* Room Instance Card */
.room-instance {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* Allow scroll within room */
    border: 2px solid #444;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    /* Reset margins/shadows from default app-container if needed */
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Adjustments for Grid View */
.rooms-grid.grid-4 .room-instance {
    font-size: 0.8rem;
    /* Scale down text slightly */
}

/* Ensure bottom panel is compact in grid */
.rooms-grid.grid-4 .bottom-panel {
    flex-direction: row;
    /* Try to keep side-by-side if possible, or force col */
    padding: 2px;
    height: auto;
    min-height: 80px;
    gap: 5px;
}

/* COMPACT GRID OVERRIDES */
/* Target both grid-4 (3+ rooms) and grid-2 (2 rooms) for consistency if needed, 
   but primarily grid-4 needs the most space saving. */

.rooms-grid.grid-4 .top-bar {
    padding: 2px 5px;
    font-size: 0.7rem;
    min-height: 25px;
}

.rooms-grid.grid-4 .game-header {
    height: 50px;
    padding: 2px 10px;
}

.rooms-grid.grid-4 .logo-area {
    display: none;
    /* Hide big logo to save space */
}

.rooms-grid.grid-4 .control-box {
    width: 60px;
    height: 40px;
    font-size: 1.5rem;
}

.rooms-grid.grid-4 .notification-area {
    padding: 5px;
    font-size: 0.8rem;
    height: 40px;
}

.rooms-grid.grid-4 .game-board {
    overflow-x: auto;
    /* Enable horizontal scroll */
    padding: 5px;
}

.rooms-grid.grid-4 .table-header,
.rooms-grid.grid-4 .player-row {
    /* We will enforce min-width in JS, but this ensures the container handles it */
    min-width: 100%;
    width: max-content;
    /* Allow growing beyond container width */
}

.rooms-grid.grid-4 .chat-section {
    display: none;
    /* Hide chat in 4-grid to prioritize game? Or maybe just minimise it */
    /* Let's try to keep it but very small, or maybe hide it? 
       User said "fields do not appear". Hiding chat might be too aggressive. 
       Let's just compact the bottom panel elements. */
    display: flex;
    flex: 1;
}

.rooms-grid.grid-4 .stop-section {
    padding: 2px;
    flex: 1;
}

.rooms-grid.grid-4 .btn-stop {
    width: 60px;
    height: 60px;
    font-size: 0.8rem;
    border-width: 2px;
}

.rooms-grid.grid-4 .stop-legend {
    display: none;
    /* Hide legend in grid mode */
}

.rooms-grid.grid-4 .players-section {
    display: none;
    /* Hide player list in grid mode, they are already on board */
}

/* Fix inputs in grid mode */
.rooms-grid.grid-4 .input-cell input {
    font-size: 0.9rem;
    padding: 2px;
}

/* Adjust row height */
.rooms-grid.grid-4 .player-row>div {
    height: 30px;
    font-size: 0.85rem;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (Max-Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    body {
        background-color: #000;
        height: 100%;
        overflow-y: auto;
    }

    .app-container {
        width: 100%;
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    /* --- LOGIN SCREEN --- */
    .login-container {
        padding: 30px 20px;
        width: 90%;
        max-width: 100%;
    }

    .logo-title {
        font-size: 2.5rem;
    }

    /* --- LOBBY SCREEN --- */
    #lobby-screen {
        padding: 10px;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        display: block;
    }

    .lobby-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px;
    }

    .user-profile {
        flex-direction: column;
    }

    .lobby-content {
        flex-direction: column;
        height: auto;
        gap: 20px;
        padding-bottom: 20px;
    }

    .lobby-section {
        height: 400px;
        flex: none;
    }

    /* --- GAME SCREEN --- */
    .top-bar {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .game-header {
        height: auto;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }

    .notification-area {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
        font-size: 0.9rem;
        padding: 8px;
        text-align: center;
        justify-content: center;
    }

    .center-controls {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .control-box {
        width: 70px;
        height: 60px;
        font-size: 1.8rem;
    }

    .logo-area {
        display: none;
    }

    /* Game Board - Card View */
    .game-board {
        padding: 10px;
        background-color: #333;
    }

    .table-header {
        display: none !important;
    }

    .player-row {
        display: flex;
        flex-direction: column;
        background: #2a2a2a;
        margin-bottom: 20px;
        border-radius: 8px;
        border: 1px solid #444;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        height: auto !important;
    }

    .player-row[style] {
        display: flex !important;
    }

    .player-row.active-player {
        border: 2px solid var(--accent-color);
        background: #3a2a2a;
    }

    .col-player {
        background-color: transparent;
        color: white;
        font-size: 1.2rem;
        padding: 5px;
        border-bottom: 1px solid #555;
        margin-bottom: 10px;
        justify-content: space-between;
        width: 100%;
    }

    .col-category {
        display: flex;
        flex-direction: column;
        background: transparent;
        padding: 5px 0;
        width: 100%;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .col-category::before {
        content: attr(data-label);
        font-size: 0.85rem;
        color: #aaa;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 3px;
        display: block;
    }

    .input-cell input {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid #555;
        padding: 10px;
        border-radius: 6px;
        color: white;
        font-size: 1.1rem;
    }

    .input-cell input:focus {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: var(--accent-color);
    }

    .col-score,
    .col-total {
        display: flex;
        justify-content: space-between;
        width: 100%;
        background-color: transparent !important;
        padding: 5px 0;
        border-top: 1px dashed #444;
        color: #fff;
        font-size: 1rem;
    }

    .col-score::before {
        content: "Pontos da Rodada:";
        color: #ccc;
        margin-right: 10px;
    }

    .col-total::before {
        content: "Pontuação Total:";
        color: #ffd700;
        margin-right: 10px;
        font-weight: bold;
    }

    /* Bottom Panel */
    .bottom-panel {
        height: auto;
        flex-direction: column;
        padding: 10px;
        border-top: 2px solid #ffd700;
    }

    .panel-column {
        width: 100%;
        margin-bottom: 10px;
    }

    .chat-section {
        height: 150px;
        order: 2;
        flex: none;
    }

    .players-section {
        display: none;
    }

    .stop-section {
        order: 1;
        background: transparent;
        padding: 5px;
        border: none;
        margin-bottom: 5px;
        flex: none;
    }

    .btn-stop {
        width: 100%;
        height: 70px;
        border-radius: 8px;
        font-size: 1.5rem;
        background: radial-gradient(circle, #e74c3c 0%, #c0392b 100%);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }
}

/* --- Room Management Group Styles --- */
.room-group-block {
    grid-column: 1 / -1;
    /* Reset to span full width if in grid */
    background-color: #3d3d3d;
    /* Match panel bg */
    border: 2px solid #ffd700;
    /* Gold border for Beginner */
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
}

.room-group-header {
    background-color: #ffd700;
    color: #000;
    padding: 10px 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.room-group-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    padding: 10px;
}

.room-list-item {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #555;
    transition: background-color 0.2s;
}

.room-list-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #777;
}

.room-item-info {
    display: flex;
    flex-direction: column;
}

.room-item-name {
    font-weight: bold;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 2px;
}

.room-item-meta {
    font-size: 0.8rem;
    color: #aaa;
}

.btn-join-small {
    background-color: #28b463;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s;
}

.btn-join-small:hover {
    background-color: #2ecc71;
    transform: scale(1.05);
}

.btn-join-small:active {
    transform: scale(0.95);
}

/* --- Refined Room List Styles --- */

.room-group-block {
    background: linear-gradient(135deg, rgba(61, 61, 61, 0.9) 0%, rgba(40, 40, 40, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    /* Subtle gold border */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    overflow: visible;
    /* Fix truncation */
    margin-bottom: 25px;
    animation: fadeIn 0.5s ease;
    height: auto;
}

.room-group-header {
    background: linear-gradient(90deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a1a;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.room-group-header h3 {
    margin: 0;
}

.room-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    height: auto;
}

.room-list-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.room-list-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.5);
    /* Gold glow on hover */
}

/* Status Indicator */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

.status-dot.free {
    background-color: #2ecc71;
    box-shadow: 0 0 5px #2ecc71;
}

.status-dot.busy {
    background-color: #e74c3c;
    box-shadow: 0 0 5px #e74c3c;
}

.room-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.room-item-name {
    font-weight: 700;
    color: #f0f0f0;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}

.room-status-row {
    display: flex;
    align-items: center;
}

.room-item-meta {
    font-size: 0.85rem;
    color: #bbb;
    font-weight: 500;
}

.btn-join-small {
    background: #28b463;
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    /* Pill shape */
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.4);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-join-small:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(46, 204, 113, 0.6);
    filter: brightness(1.1);
}

.btn-join-small:active {
    transform: scale(0.95);
}

/* Empty State Polish */
.empty-state {
    color: #aaa;
    font-style: italic;
    padding: 40px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* --- Compact & Visible Fixes --- */

/* Fix Header Visibility */
.room-group-header {
    background: #ffd700 !important;
    /* Force solid gold */
    color: #000 !important;
    padding: 8px 15px;
    /* Slightly tighter */
    border-bottom: 2px solid #b7950b;
    display: flex;
    /* Ensure it takes space */
    width: 100%;
}

.room-group-header h3 {
    font-size: 1.2rem;
    /* Ensure readable size */
    margin: 0;
    text-transform: uppercase;
    font-weight: 900;
}

/* Make List Items Compact */
.room-group-list {
    display: grid;
    /* Reduce min width to allow more items per row, or list style */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    /* Tighter gap */
    padding: 10px;
}

.room-list-item {
    padding: 8px 12px;
    /* Reduced padding */
    min-height: 50px;
    /* Reduced height */
}

.room-item-name {
    font-size: 0.95rem;
    /* Smaller font */
    letter-spacing: 0;
}

.room-item-meta {
    font-size: 0.75rem;
    /* Smaller meta */
}

.btn-join-small {
    padding: 4px 12px;
    /* Smaller button */
    font-size: 0.75rem;
    height: auto;
}

.room-status-row {
    margin-top: 2px;
}

/* --- Single Line Layout Fixes --- */

.room-group-header {
    background: #FFD700 !important;
    color: #000 !important;
    min-height: 40px;
    /* Ensure height */
    display: flex;
    align-items: center;
}

.room-group-header h3 {
    color: #000 !important;
    /* Force Black */
    opacity: 1 !important;
    z-index: 10;
}

.room-list-item {
    flex-direction: row;
    /* Horizontal */
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    /* Slim padding */
    height: 45px;
    /* Fixed Slim Height */
    background: rgba(255, 255, 255, 0.05);
}

.room-item-info {
    flex-direction: row !important;
    /* Force row */
    align-items: center;
    gap: 10px;
}

.room-item-name {
    margin: 0;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Hide status row separate line, make it inline */
.room-status-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.room-item-meta {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Add separator dash via CSS if needed, or assume gap is enough */
.room-item-name::after {
    content: '-';
    margin-left: 10px;
    color: #555;
}

/* Make button tiny and vertically centered */
.btn-join-small {
    padding: 2px 10px;
    font-size: 0.75rem;
    height: 26px;
    display: flex;
    align-items: center;
}

/* --- Force Vertical Stack & Scroll --- */

.room-group-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    max-height: none !important;
    /* Allow growing */
}

.room-list-item {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

/* Ensure lobby list scrolls */
#rooms-list-container {
    display: block !important;
    overflow-y: auto !important;
    max-height: none !important;
    flex: 1;
    padding-bottom: 40px;
}

/* Fix specific overflow in group block if any */
.room-group-block {
    height: auto !important;
    max-height: none !important;
}

/* Ensure buttons are visible */
.btn-join-small {
    min-width: 80px;
    justify-content: center;
}

/* Ranking Dropdowns */
.ranking-dropdown {
    position: relative;
    display: inline-block;
}

.tab-toggle {
    background-color: #444;
    color: #ccc;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    font-weight: 600;
}

.tab-toggle:hover {
    background-color: #555;
    color: white;
}

.ranking-submenu {
    position: absolute;
    top: 110%;
    left: 0;
    background-color: #333;
    border: 1px solid #555;
    padding: 5px;
    border-radius: 8px;
    z-index: 100;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease;
}

.ranking-submenu .tab {
    width: 100%;
    text-align: left;
    border-radius: 4px;
    background: transparent;
}

.ranking-submenu .tab:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Rooms Grid List - Fix for Grouped Layout */
.rooms-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    width: 100%;
}

/* Room Grouping */
.room-group {
    margin-bottom: 30px;
    width: 100%;
}

.group-title {
    font-size: 1.2rem;
    color: #ffd700;
    border-bottom: 2px solid #555;
    padding-bottom: 5px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* COMPACT LIST LAYOUT (User Preference) */
.room-group-container {
    width: 100%;
    margin-bottom: 10px;
    /* Reduced from 25px */
    border: 1px solid #444;
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05);
}

.group-header {
    padding: 6px 15px;
    /* Reduced from 10px 20px */
    background-color: #444;
    border-bottom: 1px solid #555;
}

/* Specific Header Colors */
.group-beginner .group-header {
    background-color: #ffd700;
    /* Yellow */
}

.group-beginner .group-header h3 {
    color: #000;
}

.group-intermediate .group-header {
    background-color: #3498db;
    /* Blue */
}

.group-intermediate .group-header h3 {
    color: #fff;
}

.group-header h3 {
    margin: 0;
    font-size: 0.9rem;
    /* Reduced from 1.1rem */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.group-list {
    display: flex;
    flex-direction: column;
}

.room-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    /* Reduced from 15px 20px */
    border-bottom: 1px solid #444;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
    height: 40px;
    /* Fixed small height */
    cursor: pointer;
    /* Interaction indication */
}

.room-list-row:last-child {
    border-bottom: none;
}

.room-list-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.room-col-name {
    flex: 2;
    font-weight: 700;
    font-size: 0.8rem;
    /* Reduced */
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-col-status {
    flex: 2;
    display: flex;
    align-items: center;
    color: #aaa;
    font-size: 0.7rem;
    /* Reduced */
}

.status-dot {
    width: 6px;
    /* Smaller dot */
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

.separator {
    margin: 0 8px;
    opacity: 0.5;
}

.room-col-action {
    flex: 1;
    text-align: right;
}

.btn-join-row {
    background-color: #2ecc71;
    color: white;
    border: none;
    padding: 4px 12px;
    /* Very compact */
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.7rem;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(46, 204, 113, 0.3);
    transition: all 0.2s;
}

.btn-join-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    background-color: #27ae60;
}

/* Quick Join Modal Grid */
.quick-join-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    width: 100%;
}

.quick-join-card {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.quick-join-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #ffd700;
    transform: translateY(-2px);
}

.quick-join-card h4 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}

.quick-join-card .meta {
    font-size: 0.75rem;
    color: #ccc;
    display: flex;
    gap: 5px;
    align-items: center;
}

.quick-join-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Rank Icons */
.rank-icon {
    vertical-align: middle;
    margin-right: 5px;
    display: inline-block;
}

/* Rank Guide Modal */
.rank-guide-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
}

.rank-guide-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: transform 0.2s;
}

.rank-guide-row:hover {
    transform: translateY(-2px);
    background: rgba(255, 215, 0, 0.1);
}

.rank-guide-row img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.rank-desc {
    display: flex;
    flex-direction: column;
}

.rank-desc strong {
    color: #ffd700;
    font-size: 1rem;
}

.rank-desc span {
    font-size: 0.85rem;
    color: #ccc;
}

/* User select fix */
.user-select-none {
    user-select: none;
}

/* Waiting Screen Layout - Compact 2-Column for ALL screen sizes */
.waiting-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.waiting-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.waiting-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
}

.waiting-title {
    font-size: 1.1rem;
    /* Significantly reduced */
    margin-bottom: 5px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.waiting-icon {
    font-size: 2rem;
    /* Reduced size */
    margin: 5px 0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.waiting-actions {
    display: flex;
    flex-direction: column;
    /* Stack buttons to save width in the column */
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

.waiting-actions button {
    width: 100%;
    font-size: 0.9rem !important;
    padding: 8px !important;
}

/* Ensure overlay scrolls if needed */
.intermission-content {
    max-height: 90vh;
    overflow-y: auto;
    padding: 15px;
    width: 95%;
    /* Use almost full width on mobile */
    max-width: 500px;
}

/* Adjustments for Tiny Screens */
@media (max-width: 350px) {
    .waiting-title {
        font-size: 0.9rem;
    }

    .waiting-icon {
        font-size: 1.5rem;
    }
}

/* Shift waiting screen up */
.waiting-content {
    /* Align items to start (top) instead of center for the grid items themselves if needed, 
       but the main issue is likely the container position */
    align-items: start;
    margin-top: -50px;
    /* Pull it up specifically */
}

/* Override the default centering of intermission overlay for the waiting screen specific content */
.intermission-overlay .intermission-content {
    /* The default has transform: translateY(-50px). 
       Let's increase that negative margin to pull it up further. */
    margin-top: -20vh;
    /* Move up by 20% of viewport height */
}

/* Fix cutoff issue by adjusting vertical alignment */
.intermission-overlay {
    align-items: flex-start;
    /* Align content to top instead of center */
    padding-top: 10vh;
    /* Add top padding to position it nicely, avoiding cutoff */
    overflow-y: auto;
    /* Ensure scrolling if screen is too small */
}

.intermission-overlay .intermission-content {
    margin-top: 0;
    /*  Reset negative margin */
    transform: none;
    /* Remove transform that might cause clipping */
    max-height: none;
    /* Allow it to grow if needed, since overlay handles scroll */
}

/* Ensure the waiting content specific adjustment is safe */
.waiting-content {
    margin-top: 0;
    /* Reset specific negative margin */
}