: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: #555;
    /* Outer background */
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.app-container {
    width: 100%;
    max-width: 1400px;
    height: 95vh;
    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: hidden;
    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;
}

.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);
    }
}

.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;
    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: 40px;
}

.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: #f44336;
    border: none;
    font-weight: bold;
    opacity: 1;
}

/* Bottom Panel */
.bottom-panel {
    height: 250px;
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: #2a2a2a;
    border-top: 4px solid #ffd700;
}

.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;
    align-items: center;
    justify-content: center;
    background-color: #555;
    border: none;
}

.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 {
    background-color: #333;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 5px;
    display: inline-block;
    margin-bottom: 2px;
}

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

/* Stop Button */
#btn-stop {
    width: 120px;
    height: 120px;
    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: 4px solid #fff;
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px 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: 2000;
    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;
}

/* 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;
}

.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%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.4s ease;
}

.screen.active {
    display: flex;
    /* Override hidden */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* LOGIN SCREEN */
#login-screen {
    background: radial-gradient(circle at center, #2c3e50, #000);
}

.login-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    width: 100%;
    max-width: 450px;
}

.logo-title {
    font-size: 3rem;
    margin-bottom: 30px;
    color: #fff;
    letter-spacing: 2px;
}

.logo-title .highlight {
    color: var(--bg-header);
    font-size: 1.5rem;
    display: block;
    letter-spacing: 5px;
}

.auth-box input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 1.1rem;
    transition: 0.3s;
}

.auth-box input:focus {
    border-color: var(--accent-color);
    background: rgba(0, 0, 0, 0.8);
    outline: none;
}

.pushable {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    margin-top: 10px;
    background: var(--accent-color);
    box-shadow: 0 4px 0 #d35400;
    transition: 0.1s;
}

.pushable:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #d35400;
}

.login-footer {
    margin-top: 20px;
    color: #aaa;
    font-size: 0.9rem;
}

/* 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.5;
}

.rooms-section {
    flex: 1;
}

.lobby-section h3 {
    color: var(--bg-header);
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.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;
}

.room-info-l h4 {
    color: white;
}

.room-info-l p {
    font-size: 0.8rem;
    color: #888;
}

.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;
}