/* ================== GAME SCREEN ================== */
#game-screen { padding-bottom: 0; overflow: hidden; }
.game-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; padding-top: var(--safe-top);
    border-bottom: 1px solid var(--border-color);
    gap: 15px; min-height: 10dvh; height: auto; box-sizing: border-box;
    flex-shrink: 0;
}
.header-left { display: flex; flex-direction: row; align-items: center; gap: 15px; flex-shrink: 0; }
#timer-display { font-size: 5dvh; font-weight: 600; min-width: 15dvh; font-variant-numeric: tabular-nums; }
#difficulty-display { font-size: 2.5dvh; opacity: 0.8; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
@media (max-width: 450px) { #difficulty-display { display: none; } }

.game-header .icon-btn svg { width: 5dvh; height: 5dvh; }

.game-content {
    height: auto; min-height: 85dvh; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
    padding: 10px 0; box-sizing: border-box; flex-shrink: 0;
}

/* Ad Container */
.ad-container {
    height: 70dvh; width: 70dvh; max-width: 95vw; max-height: 95vw;
    display: block; position: relative; background: var(--card-bg); border-radius: 12px;
}
.ad-container ins.adsbygoogle { width: 100% !important; height: 100% !important; }
.ad-loading-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5dvh; font-weight: 600; color: var(--text-color); opacity: 0.7; }

/* Hamburger Menu */
.hamburger-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index: 100; display: flex; justify-content: flex-end; }
.hamburger-panel { background: var(--bg-color); width: 80%; max-width: 300px; height: 100%; padding: calc(20px + var(--safe-top)) 20px 20px 20px; box-shadow: -5px 0 20px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.close-btn { align-self: flex-end; margin-bottom: 20px; }
.menu-list { list-style: none; display:flex; flex-direction:column; gap:10px; margin-bottom: 30px;}
.menu-action-btn { width: 100%; padding: 12px; border-radius: 8px; font-weight: 600; }
.menu-action-btn:not(.secondary) { background: var(--primary); color: #fff;}
.menu-action-btn.secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-color); }
.players-list h3 { margin-bottom: 10px; font-weight: 400; opacity: 0.8;}
.players-list ul { list-style: none;}
.players-list li { margin-bottom: 5px; padding: 10px; background: rgba(128,128,128,0.1); border-radius: 8px; font-weight:600; display: flex; justify-content: space-between; align-items: center;}
.friend-btn { background: transparent; border: none; font-size: 1.4rem; cursor: pointer; padding: 0 5px; transition: transform 0.2s, color 0.2s; line-height: 1; }
.friend-btn.is-friend { color: #f1c40f; opacity: 1; filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.5)); }
.friend-btn.not-friend { color: var(--text-color); opacity: 0.3; }
.friend-btn:hover { transform: scale(1.2); opacity: 1; }
.hamburger-panel .menu-section { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 20px; }
.hamburger-panel .menu-section h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; opacity: 0.7; }
.hamburger-panel select { width: 100%; padding: 12px; border-radius: 8px; background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); font-family: inherit; }
select option { background-color: var(--bg-color); color: var(--text-color); }

/* ================== PROGRESS SCOREBOARD ================== */
.scoreboard { flex: 1; padding: 0; border-bottom: none; min-width: 0; }
.scoreboard-inner { display: flex; flex-direction: column; gap: 8px; max-width: 400px; margin: 0 auto; }
.score-row { display: flex; flex-direction: column; gap: 2px; }
.score-row-top { display: flex; align-items: center; gap: 10px; }
.score-row-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

.score-team-name { font-size: 5dvh; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.score-team-time { font-size: 2.5dvh; opacity: 0.8; font-variant-numeric: tabular-nums; white-space: nowrap; }

.progress-container { flex: 1; height: 10px; background: rgba(128,128,128,0.1); border-radius: 5px; overflow: hidden; position: relative; }
.progress-bar { height: 100%; background: var(--primary); border-radius: 5px; transition: width 0.5s ease-out; }
.progress-pct { width: 45px; text-align: right; opacity: 0.8; font-weight: 600; font-size: 2dvh; }

@keyframes leader-pulse { 0% { transform: scale(1); background: rgba(0,0,0,0.05); } 50% { transform: scale(1.03); background: var(--cell-highlight); box-shadow: 0 0 15px var(--primary); } 100% { transform: scale(1); background: rgba(0,0,0,0.05); } }
.leader-pulse { animation: leader-pulse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.crown-icon { margin-right: 4px; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); font-size: 0.8em; }

/* Emoji Reactions */
.reaction-emoji:hover { transform: scale(1.3); }
.floating-emoji-container {
    position: fixed;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 1000;
    animation: float-up 2.5s ease-out forwards;
}
.floating-emoji {
    font-size: 3rem;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.floating-emoji-name {
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 5px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
@keyframes float-up {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    10% { transform: translateY(-20px) scale(1.2); opacity: 1; }
    20% { transform: translateY(-40px) scale(1); opacity: 1; }
    80% { transform: translateY(-150px) scale(1); opacity: 0.8; }
    100% { transform: translateY(-200px) scale(0.8); opacity: 0; }
}

/* Responsive adjustments */
@media (orientation: landscape) {
    .game-content { flex-direction: row; align-items: center; justify-content: center; gap: 20px; }
}