/* General Styles */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1a1a1a;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

canvas {
    display: block;
    background-color: #222;
}

#ui-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

/* UI Overlays */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.blur-overlay {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.dark-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.pause-overlay {
    z-index: 150;
    backdrop-filter: blur(10px);
}

.login-overlay {
    background: #000;
    z-index: 200;
}

/* Content Boxes */
.content-box {
    padding: 40px;
    border-radius: 15px;
    color: white;
    position: relative;
    box-sizing: border-box;
}

.inventory-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 2px solid #fb0;
    width: 740px;
    padding: 40px 40px 25px 40px;
    box-shadow: 0 0 30px rgba(251, 176, 0, 0.2);
}

.shop-content {
    background: #111;
    border: 2px solid #0af;
    width: 550px;
    padding: 25px;
    box-shadow: 0 0 35px rgba(0, 170, 255, 0.15);
}

.shop-welcome-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #aaa;
    margin-bottom: 20px;
    border-bottom: 1px dashed #222;
    padding: 10px 0;
}

/* NPC Dialog / Queue menus */
.npc-dialog-container {
    text-align: center;
    padding: 10px 20px 20px 20px;
}

.npc-dialog-text {
    font-size: 14.5px;
    color: #ccc;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.5;
}

.npc-dialog-btn {
    border: none;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.purple-btn {
    background: #e0f;
    color: white;
}

.purple-btn:hover {
    background: #f2f;
}

.green-btn {
    background: #4ce14c;
    color: #000;
}

.green-btn:hover {
    background: #62eb62;
}

.yellow-btn {
    background: #fb0;
    color: #000;
}

.yellow-btn:hover {
    background: #fd0;
}

/* Shop Layout, Cards and Tier Badges */
.shop-items-container {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
    margin-top: 15px;
    box-sizing: border-box;
}

.shop-items-container::-webkit-scrollbar {
    width: 6px;
}

.shop-items-container::-webkit-scrollbar-track {
    background: #050505;
    border-radius: 3px;
}

.shop-items-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

.shop-items-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.shop-section {
    margin-bottom: 25px;
}

.shop-section-title {
    font-size: 15px;
    font-weight: bold;
    color: #0af;
    border-bottom: 1px solid #222;
    padding-bottom: 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.shop-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #161616;
    border: 1px solid #222;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.shop-item-card:hover {
    border-color: #444;
    background: #1d1d1d;
}

.shop-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-item-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shop-item-name {
    font-weight: 600;
    font-size: 13.5px;
    color: #eee;
}

.shop-item-stats {
    font-size: 11px;
    color: #777;
}

.weapon-stars {
    margin-left: 6px;
    letter-spacing: 1px;
}

.tier-1 {
    color: #aaa;
}

.tier-2 {
    color: #0af;
}

.tier-3 {
    color: #f80;
}

.buy-btn {
    background: #0af;
    color: #000;
    border: none;
    padding: 6px 16px;
    font-weight: bold;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.buy-btn:hover:not(:disabled) {
    background: #0cf;
}

.buy-btn:disabled {
    background: #252525;
    color: #555;
    cursor: not-allowed;
}

.pause-content {
    background: #111;
    border: 2px solid #0af;
    width: 500px;
    box-shadow: 0 0 50px rgba(0, 170, 255, 0.1);
}

.login-content {
    background: #111;
    border: 2px solid #fb0;
    width: 350px;
    text-align: center;
}

/* Headers */
.ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.ui-title {
    margin: 0;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 20px;
}

.yellow-text {
    color: #fb0;
}

.blue-text {
    color: #0af;
}

.green-text {
    color: #4ce14c;
}

/* Buttons */
.close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
    line-height: 1;
    padding: 0;
}

.primary-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.yellow-btn {
    background: #fb0;
    color: #000;
}

.blue-btn {
    background: #0af;
    color: #000;
}

/* HUD */
#hud-hotbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 50;
}

.hotbar-slot {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #444;
}

.hotbar-slot.active {
    background: rgba(251, 176, 0, 0.2);
    border-color: #fb0;
}

.hotbar-key {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 10px;
    color: #fb0;
    font-weight: bold;
}

/* Grid & Stats */
.ui-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
}

.stat-box {
    background: #000;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
    line-height: 1.6;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, 80px);
    gap: 15px;
    margin-top: 10px;
}

.backpack-grid {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(3, 80px);
    gap: 15px;
    background: #000;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #333;
    width: max-content;
}

.inventory-slot {
    aspect-ratio: 1/1;
    background: #111;
    border: 2px solid #222;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s;
    user-select: none;
}

.inventory-slot.slot-hover {
    border-color: #fb0;
    background: rgba(251, 176, 0, 0.1);
    box-shadow: 0 0 15px rgba(251, 176, 0, 0.2);
}

.inventory-slot:hover {
    border-color: #555;
    background: #1a1a1a;
}

.inventory-slot.equipped {
    border-color: #fb0;
    background: rgba(251, 176, 0, 0.05);
}

.inventory-slot.dragging {
    opacity: 0.5;
    border-style: dashed;
}

.slot-count {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    color: #fff;
    font-weight: bold;
}

.slot-label {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 9px;
    color: #444;
    text-transform: uppercase;
}

.inventory-slot:empty::before {
    content: '';
    opacity: 0.1;
    font-size: 24px;
}

.progress-bar-bg {
    background: #222;
    height: 6px;
    width: 100%;
    border-radius: 3px;
    margin-top: 5px;
}

.progress-bar-fill {
    background: #fb0;
    height: 100%;
    border-radius: 3px;
}

/* Misc */
#audio-prompt {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #0af;
    padding: 10px;
    border-radius: 5px;
    font-family: Segoe UI;
    pointer-events: none;
}

#alert-container {
    position: fixed;
    top: 100px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
    pointer-events: none;
}

.ui-alert {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    border-left: 5px solid #fb0;
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    animation: slideInRight 0.3s ease-out forwards;
    transition: all 0.5s ease;
}

.ui-alert.error { border-left-color: #f44; }
.ui-alert.success { border-left-color: #0f0; }
.ui-alert.info { border-left-color: #0af; }

.ui-alert.fade-out {
    opacity: 0;
    transform: translateX(50px);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

#login-name {
    width: 100%;
    padding: 12px;
    background: #222;
    border: 1px solid #444;
    color: white;
    border-radius: 5px;
    margin-bottom: 10px;
    outline: none;
    text-align: center;
}

#login-error {
    color: #f55;
    font-size: 12px;
    height: 15px;
    margin: 5px 0 20px 0;
}

.section-title {
    border-left: 3px solid #0af;
    padding-left: 10px;
    margin-bottom: 15px;
}
#action-bar-container {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    text-align: center;
    pointer-events: none;
}

#action-label {
    color: white;
    font-size: 14px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

#action-bar-bg {
    background: rgba(0,0,0,0.8);
    height: 8px;
    border-radius: 4px;
    border: 1px solid #444;
    overflow: hidden;
}

#action-bar-fill {
    background: linear-gradient(90deg, #fb0, #f80);
    height: 100%;
    width: 0%;
}

/* Lobby UI */
.lobby-content {
    background: linear-gradient(135deg, #111 0%, #000 100%);
    border: 2px solid #0af;
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.2);
    min-width: 320px;
    transition: all 0.3s ease;
}

.lobby-content:has(.arena-layout) {
    min-width: 760px;
    border-color: #8b5cf6; /* Arena hybrid purple border */
    box-shadow: 0 0 35px rgba(139, 92, 246, 0.25);
}

.lobby-member-row {
    transition: background 0.2s;
}

.lobby-member-row:hover {
    background: rgba(0, 170, 255, 0.05);
}

#lobby-start-btn.green-btn:not(:disabled):hover {
    box-shadow: 0 0 15px rgba(76, 225, 76, 0.4);
}

#lobby-start-btn.danger-btn:not(:disabled):hover {
    background: #f87171;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

#lobby-leave-btn:hover {
    background: #555 !important;
}

/* ========================================
   Refactored Classes (from inline styles)
   ======================================== */

/* Pause Menu */
.menu-section {
    margin-bottom: 30px;
}

.menu-panel {
    background: #000;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #222;
}

.menu-desc {
    font-size: 11px;
    color: #aaa;
    margin-top: 0;
    margin-bottom: 10px;
}

.danger-btn {
    background: #f44;
    color: white;
}

.danger-btn:hover {
    background: #f66;
}

.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 14px;
    background: #000;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #222;
}

.font-bold {
    font-weight: bold;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.volume-slider {
    width: 100%;
    cursor: pointer;
    accent-color: #0af;
}

/* Lobby */
.lobby-members-box {
    margin: 20px 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #333;
}

/* Arena side-by-side columns */
.arena-layout {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
}

.arena-columns {
    display: flex;
    gap: 20px;
    width: 100%;
}

.arena-column {
    flex: 1;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #222;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.red-column {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.05);
}

.blue-column {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.05);
}

.team-header {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
}

.red-team-text {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.blue-team-text {
    color: #3b82f6;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.team-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.team-list::-webkit-scrollbar {
    width: 4px;
}

.team-list::-webkit-scrollbar-track {
    background: transparent;
}

.team-list::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

.team-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.empty-team-placeholder {
    color: #444;
    font-style: italic;
    text-align: center;
    margin: auto;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* Highlight Me Row */
.lobby-member-row.me-row {
    background: rgba(251, 176, 0, 0.12) !important;
    border: 1px solid rgba(251, 176, 0, 0.4);
    box-shadow: 0 0 8px rgba(251, 176, 0, 0.1);
}


.lobby-countdown-banner {
    background: linear-gradient(90deg, rgba(251, 176, 0, 0.05) 0%, rgba(251, 176, 0, 0.15) 50%, rgba(251, 176, 0, 0.05) 100%);
    border-top: 1px dashed rgba(251, 176, 0, 0.5);
    border-bottom: 1px dashed rgba(251, 176, 0, 0.5);
    color: #fff;
    padding: 0 8px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    margin: 10px 0;
    letter-spacing: 1px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(251, 176, 0, 0.05);
    height: 36px;
    line-height: 36px;
}

.lobby-countdown-banner.counting {
    animation: pulseGlow 1.5s infinite ease-in-out;
}

.countdown-seconds {
    color: #fb0;
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(251, 176, 0, 0.5);
    display: inline-block;
    vertical-align: middle;
    line-height: 36px;
    animation: scaleNumber 1s infinite alternate;
}

@keyframes pulseGlow {
    0% { opacity: 0.8; box-shadow: 0 0 5px rgba(251, 176, 0, 0.05); }
    50% { opacity: 1; box-shadow: 0 0 15px rgba(251, 176, 0, 0.2); }
    100% { opacity: 0.8; box-shadow: 0 0 5px rgba(251, 176, 0, 0.05); }
}

@keyframes scaleNumber {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.lobby-controls-row {
    display: flex;
    gap: 10px;
    justify-content: center;
}

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

.lobby-member-row {
    padding: 8px;
    border-bottom: 1px solid #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lobby-member-row > span {
    display: inline-flex;
    align-items: center;
}

.lobby-host-tag {
    color: #fb0;
    font-size: 11px;
    font-weight: bold;
}


/* Button enhancements */
.purple-btn {
    background: #8b5cf6;
    color: white;
}

.purple-btn:hover:not(:disabled) {
    background: #a78bfa;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.danger-btn {
    background: #ef4444;
    color: white;
}

.danger-btn:hover:not(:disabled) {
    background: #f87171;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

/* Inventory */
.inventory-section-title {
    margin-bottom: 15px;
    font-size: 15px;
}

.mt-25 {
    margin-top: 25px;
}

.inventory-lvl-text {
    margin: 5px 0;
    color: #fb0;
    font-weight: bold;
}

.inventory-bal-text {
    margin: 5px 0;
    color: #0f0;
    font-weight: bold;
}

.inventory-divider {
    border: 0;
    border-top: 1px solid #333;
    margin: 10px 0;
}

.inventory-stat-line {
    margin: 5px 0;
}

.inventory-xp-text {
    margin: 5px 0;
    font-size: 11px;
    color: #aaa;
}

.equipment-slot {
    width: 80px;
    height: 80px;
}

.slot-label-small {
    font-size: 8px;
}

.slot-weapon-name {
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    padding: 5px;
}

.weapon-mag-count {
    color: #0af;
}

.backpack-item-icon {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.backpack-item-icon.weapon-icon {
    font-size: 10px;
}

.backpack-item-icon.general-icon {
    font-size: 20px;
}

/* HUD Hotbar Variants */
.hotbar-slot.weapon-slot {
    width: 100px;
}

.hotbar-slot.item-slot {
    width: 80px;
}

.hotbar-slot.empty-slot {
    color: #666;
    opacity: 0.5;
}

.hotbar-slot.has-item {
    color: white;
    opacity: 1;
}

.hotbar-slot-content {
    text-align: center;
    padding: 5px;
    width: 100%;
}

.hotbar-slot-content.weapon-text {
    font-size: 11px;
}

.hotbar-slot-content.item-text {
    font-size: 24px;
}

.hotbar-ammo-display {
    font-size: 10px;
    color: #0af;
    margin-top: 5px;
}

/* Shop Header */
.shop-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.shop-close-btn {
    font-size: 20px;
}

/* Login */
.login-title {
    margin-top: 0;
}

.login-subtitle {
    color: #aaa;
    margin-bottom: 25px;
}

/* Custom Item Assets Styling */
.item-img-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.hotbar-item-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.shop-item-icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 2px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.hotbar-slot .weapon-ammo-badge {
    color: #0af;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(0, 170, 255, 0.15);
}

/* Global Hover Overlay for Slots and Hotbar */
#global-hover-overlay {
    position: fixed;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.15s ease;
    padding: 6px;
    box-sizing: border-box;
    z-index: 10000;
}

#global-hover-overlay.visible {
    opacity: 1;
}

#global-hover-overlay.inventory-theme {
    color: #fff;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#global-hover-overlay.hotbar-theme {
    color: #fb0; /* Use HUD accent color */
    border-radius: 8px;
    border: 1px solid rgba(251, 176, 0, 0.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Expanded Shop Trade Layout */
.expanded-shop {
    width: 930px !important;
}

.shop-trade-container {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-top: 15px;
}

#shop-left-col {
    flex: 1;
    min-width: 0;
}

#shop-right-col {
    width: 320px;
    flex-shrink: 0;
    padding-top: 15px;
}

/* Sell and Destroy Drop Areas */
.shop-sell-drop-area {
    border: 2px dashed rgba(0, 170, 255, 0.4);
    background: rgba(0, 170, 255, 0.03);
    border-radius: 12px;
    height: 390px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #0af;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 25px rgba(0, 170, 255, 0.03);
    box-sizing: border-box;
}

.shop-sell-drop-area.drag-over {
    border-color: #0af;
    background: rgba(0, 170, 255, 0.12);
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.2), inset 0 0 35px rgba(0, 170, 255, 0.08);
    transform: scale(0.99);
}

.destroy-drop-area {
    margin-top: 15px;
    width: 100%;
    height: 42px;
    border: 2px dashed rgba(255, 68, 68, 0.4);
    background: rgba(255, 68, 68, 0.03);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f44;
    font-size: 13px;
    font-weight: bold;
    box-sizing: border-box;
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.destroy-drop-area.visible {
    opacity: 1;
    pointer-events: auto;
}

.destroy-drop-area.drag-over {
    border-color: #f44;
    background: rgba(255, 68, 68, 0.12);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.2);
}

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

.dialog-content {
    background: linear-gradient(135deg, #111 0%, #1c1c1c 100%);
    border: 2px solid #fb0;
    border-radius: 12px;
    width: 420px;
    padding: 30px;
    box-shadow: 0 0 40px rgba(251, 176, 0, 0.2);
    text-align: center;
    box-sizing: border-box;
}

.dialog-title {
    margin-top: 0;
    font-size: 20px;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.dialog-text {
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.dialog-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.dialog-btn {
    width: 120px;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

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

.dialog-btn:active {
    transform: translateY(0);
}
/* Crate Overlay & UI */
.crate-content {
    background: linear-gradient(135deg, #121212 0%, #1d1d1d 100%);
    border: 2px solid #fb0;
    width: 650px;
    padding: 30px;
    box-shadow: 0 0 35px rgba(251, 176, 0, 0.15);
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.crate-content.tier-low {
    border-color: #8b5a2b;
    box-shadow: 0 0 30px rgba(139, 90, 43, 0.25);
}

.crate-content.tier-mid {
    border-color: #2e8b57;
    box-shadow: 0 0 30px rgba(46, 139, 87, 0.25);
}

.crate-content.tier-high {
    border-color: #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.35);
}

.crate-trade-container {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-top: 15px;
}

#crate-left-col {
    width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#crate-right-col {
    width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.crate-grid {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(2, 80px);
    gap: 15px;
    background: #000;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #333;
    width: max-content;
}

.crate-section-title {
    font-size: 15px;
    font-weight: bold;
    color: #fb0;
    border-bottom: 1px solid #222;
    padding-bottom: 6px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    text-align: left;
}

.crate-content.tier-low .crate-section-title {
    color: #a06d3b;
}

.crate-content.tier-mid .crate-section-title {
    color: #3cb371;
}

.crate-content.tier-high .crate-section-title {
    color: #ffd700;
}

.crate-content.tier-stash {
    border-color: #64748b;
    box-shadow: 0 0 35px rgba(100, 116, 139, 0.25);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* slate/carbon palette */
}

.crate-content.tier-stash .crate-section-title {
    color: #cbd5e1;
}

.crate-grid.stash-grid {
    grid-template-rows: repeat(3, 80px);
}

/* Arena Countdown Timer */
.arena-timer-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    pointer-events: none;
}

.arena-timer-box {
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(251, 176, 0, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(251, 176, 0, 0.1);
}

.arena-timer-label {
    font-size: 9px;
    font-weight: 800;
    color: #aaa;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.arena-timer-value {
    font-size: 20px;
    font-weight: 800;
    font-family: monospace;
    color: #fb0;
    text-shadow: 0 0 10px rgba(251, 176, 0, 0.4);
}

.arena-timer-value.danger-blink {
    color: #ef4444;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
    animation: dangerBlink 1s infinite alternate;
}

@keyframes dangerBlink {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Arena Match Result Screen */
.match-result-content {
    background: linear-gradient(135deg, #151515 0%, #050505 100%);
    border: 2px solid #555;
    width: 720px;
    padding: 35px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
    text-align: center;
    border-radius: 12px;
    box-sizing: border-box;
    animation: matchResultEntry 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes matchResultEntry {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.match-result-content.win-red {
    border-color: #ef4444;
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.15);
}

.match-result-content.win-blue {
    border-color: #3b82f6;
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.15);
}

.match-result-title {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 4px;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.match-result-title.win-red-text {
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
}

.match-result-title.win-blue-text {
    color: #3b82f6;
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.match-result-title.draw-text {
    color: #aaa;
    text-shadow: 0 0 15px rgba(170, 170, 170, 0.4);
}

.match-result-subtitle {
    font-size: 12px;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.result-columns {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.result-column {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #222;
    box-sizing: border-box;
}

.result-column.red-border {
    border-color: rgba(239, 68, 68, 0.2);
}

.result-column.blue-border {
    border-color: rgba(59, 130, 246, 0.2);
}

.result-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.result-table th {
    text-align: left;
    color: #666;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 0;
    border-bottom: 1px solid #222;
}

.result-table td {
    padding: 8px 0;
    border-bottom: 1px solid #151515;
}

.result-table tr:last-child td {
    border-bottom: none;
}

.result-player-name {
    font-weight: 600;
    color: #ddd;
    text-align: left;
}

.result-player-name.is-me {
    color: #fb0;
    font-weight: 700;
}

.num-col {
    text-align: right;
    width: 60px;
    font-family: monospace;
    font-size: 14px;
}

.result-table th.num-col {
    text-align: right;
}

.reward-section {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #222;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: left;
}

.reward-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fb0;
    margin-bottom: 15px;
    border-bottom: 1px solid #222;
    padding-bottom: 8px;
}

.reward-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.reward-label {
    color: #aaa;
}

.reward-value {
    font-weight: bold;
    font-family: monospace;
    color: #2f2;
}

.reward-value.bonus {
    color: #fb0;
    text-shadow: 0 0 5px rgba(251, 176, 0, 0.2);
}

.reward-value.penalty {
    color: #f44;
}

.reward-value.zero {
    color: #555;
}

.reward-divider {
    border-top: 1px solid #222;
    margin: 5px 0;
}

.reward-total-label {
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reward-total-value {
    font-size: 20px;
    font-weight: 900;
    color: #2f2;
    font-family: monospace;
    text-shadow: 0 0 10px rgba(47, 255, 34, 0.3);
}

.match-end-btn {
    width: 200px;
    margin: 0 auto;
    display: block;
    padding: 12px;
    font-size: 14px;
    letter-spacing: 1.5px;
    font-weight: bold;
}

.result-total-row td {
    border-top: 1px dashed #444 !important;
    font-weight: bold;
    color: #fff;
    padding-top: 10px !important;
}

.result-total-row .total-label {
    color: #aaa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.result-total-row .total-val {
    color: #fb0;
}

/* Scrollable container for the team results table */
.table-scroll-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Custom scrollbar for the table container */
.table-scroll-container::-webkit-scrollbar {
    width: 4px;
}

.table-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Make result table headers sticky when scrolling */
.result-table thead th {
    position: sticky;
    top: 0;
    background: #0d0d0d;
    z-index: 10;
}

/* Spectator Bar UI */
#spectator-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid #444;
    border-radius: 8px;
    z-index: 100;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

#spectator-label {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    min-width: 180px;
    text-align: center;
    letter-spacing: 0.5px;
}

.spectator-btn {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.spectator-btn:hover:not(:disabled) {
    background: #fb0;
    color: #000;
    border-color: #fb0;
    box-shadow: 0 0 10px rgba(251, 176, 0, 0.3);
}

.spectator-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #111;
    color: #555;
    border-color: #222;
}

/* Killed By Overlay Message */
#killed-by-overlay {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(17, 17, 17, 0.9);
    color: #f44;
    border: 2px solid #f44;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1.5px;
    z-index: 200;
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.4);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#killed-by-overlay.fade-out {
    opacity: 0;
    transform: translate(-50%, -60%);
}

/* Retro Jukebox Modal Styles */
.jukebox-content {
    background: linear-gradient(180deg, #5c2a18 0%, #290f02 100%);
    border: 5px solid #d97706;
    outline: 3px solid #1a0a05;
    border-radius: 120px 120px 20px 20px; /* Rounded top dome! */
    width: 380px;
    padding: 50px 25px 25px 25px; /* Adjust padding for top dome spacing */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), inset 0 0 25px rgba(0, 0, 0, 0.75), 0 0 15px rgba(217, 119, 6, 0.2);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    position: relative;
    transition: all 0.5s ease;
    box-sizing: border-box;
}

/* Color cycling neon glow around dome casing when playing */
@keyframes jukeboxGlow {
    0% {
        box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(239, 68, 68, 0.6), inset 0 0 25px rgba(239, 68, 68, 0.3);
        border-color: #ef4444;
    }
    20% {
        box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(249, 115, 22, 0.6), inset 0 0 25px rgba(249, 115, 22, 0.3);
        border-color: #f97316;
    }
    40% {
        box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(234, 179, 8, 0.6), inset 0 0 25px rgba(234, 179, 8, 0.3);
        border-color: #eab308;
    }
    60% {
        box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(34, 197, 94, 0.6), inset 0 0 25px rgba(34, 197, 94, 0.3);
        border-color: #22c55e;
    }
    80% {
        box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(59, 130, 246, 0.6), inset 0 0 25px rgba(59, 130, 246, 0.3);
        border-color: #3b82f6;
    }
    100% {
        box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(239, 68, 68, 0.6), inset 0 0 25px rgba(239, 68, 68, 0.3);
        border-color: #ef4444;
    }
}

.jukebox-content.playing {
    animation: jukeboxGlow 8s infinite linear;
}

.jukebox-header {
    border-bottom: 2px solid #78350f;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.jukebox-title {
    letter-spacing: 1.5px;
    color: #fef08a; /* Warm golden light */
    text-shadow: 0 0 8px rgba(254, 240, 138, 0.4);
}

/* Retro LCD Screen */
.jukebox-lcd-screen {
    background-color: #0b1311; /* Deep matrix green/black */
    border: 2px dashed #0f766e;
    border-radius: 6px;
    padding: 10px 15px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lcd-label {
    font-size: 8px;
    color: #14b8a6;
    opacity: 0.6;
    margin-bottom: 4px;
    letter-spacing: 2px;
}

@keyframes lcdPulse {
    from { text-shadow: 0 0 4px rgba(45, 212, 191, 0.4); }
    to { text-shadow: 0 0 10px rgba(45, 212, 191, 0.8), 0 0 16px rgba(45, 212, 191, 0.3); }
}

.lcd-text {
    font-size: 15px;
    color: #2dd4bf; /* Bright teal */
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(45, 212, 191, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 22px;
    animation: lcdPulse 1.5s infinite alternate ease-in-out;
}

/* Jukebox Deck Panel & Vinyl Turntable */
.jukebox-deck-panel {
    background-color: #100a06; /* Rich dark brown panel */
    border: 2px solid #5c2a18;
    border-radius: 8px;
    height: 120px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.9);
}

.vinyl-container {
    position: relative;
    width: 100px;
    height: 100px;
    background: #090d16;
    border: 3px solid #d97706;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 4px 8px rgba(0, 0, 0, 0.6);
    overflow: visible;
}

.vinyl-record {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, #2d3748 0%, #1a202c 30%, #0d0f12 70%, #000000 100%);
    border: 1px solid #111;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(0,0,0,0.8);
    transition: transform 0.1s linear;
}

.vinyl-record::before {
    content: '';
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.04);
}

.vinyl-record::after {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.vinyl-label {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
    border: 2px solid #000;
    z-index: 2;
    position: relative;
}

.vinyl-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f3f4f6;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.vinyl-record.rotating {
    animation: spinVinyl 3.5s linear infinite;
}

@keyframes spinVinyl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pivoting Tonearm */
.tonearm {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 6px;
    background: linear-gradient(90deg, #d1d5db 0%, #9ca3af 100%);
    border-radius: 2px;
    transform-origin: 30px 3px;
    transform: rotate(0deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.4);
}

.tonearm::before {
    content: '';
    position: absolute;
    left: -6px;
    top: -3px;
    width: 8px;
    height: 12px;
    background: #374151;
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.tonearm.playing {
    transform: rotate(-25deg);
}

/* LED Indicator group */
.jukebox-led-group {
    position: absolute;
    right: 15px;
    top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.led-label {
    font-size: 8px;
    color: #8c7e75;
    letter-spacing: 0.5px;
}

.led-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #000;
    transition: all 0.2s ease;
}

.led-playing {
    background-color: #10b981;
    box-shadow: 0 0 10px #10b981, 0 0 20px rgba(16, 185, 129, 0.5);
}

.led-stopped {
    background-color: #ef4444;
    box-shadow: 0 0 10px #ef4444, 0 0 20px rgba(239, 68, 68, 0.5);
}

.led-off {
    background-color: #374151;
}

/* Physical selector chunky keys */
.jukebox-controls-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.bb-ctrl-btn {
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    color: #e5e7eb;
    border: 2px solid #4b5563;
    border-radius: 8px;
    width: 65px;
    height: 38px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #111827, 0 6px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.08s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px #000;
}

.bb-ctrl-btn:hover {
    background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
    color: #ffffff;
    border-color: #6b7280;
}

.bb-ctrl-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #111827, 0 2px 4px rgba(0, 0, 0, 0.6);
}

.play-pause-btn {
    background: linear-gradient(180deg, #10b981 0%, #065f46 100%);
    color: #fff;
    border-color: #34d399;
    box-shadow: 0 4px 0 #022c22, 0 6px 10px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
}

.play-pause-btn:hover {
    background: linear-gradient(180deg, #34d399 0%, #047857 100%);
    border-color: #6ee7b7;
}

.play-pause-btn.playing {
    background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
    color: #fff;
    border-color: #f59e0b;
    box-shadow: 0 4px 0 #451a03, 0 6px 10px rgba(0, 0, 0, 0.5);
}

.play-pause-btn.playing:hover {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
    border-color: #fbbf24;
}

/* Volume Panel */
.jukebox-volume-panel {
    background-color: rgba(16, 10, 6, 0.6);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 12px;
}

.volume-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #d97706; /* Gold text */
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-weight: bold;
}

/* Physical Speaker Grill details */
.jukebox-speaker-grill {
    margin-top: 20px;
    height: 40px;
    background: #111;
    border: 2px solid #5c2a18;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5px 0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9);
    transition: background 0.4s ease;
}

.grill-slat {
    height: 3px;
    background: linear-gradient(90deg, #78350f 0%, #d97706 50%, #78350f 100%);
    width: 90%;
    margin: 0 auto;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.jukebox-content.playing .jukebox-speaker-grill {
    background: radial-gradient(circle at center, rgba(217, 119, 6, 0.35) 0%, #111 80%);
    animation: grillPulse 2s infinite alternate ease-in-out;
}

@keyframes grillPulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; filter: brightness(1.25); }
}

/* Lobby Difficulty Selector */
.lobby-difficulty-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #222;
}

.difficulty-label {
    font-size: 12px;
    font-weight: bold;
    color: #aaa;
    letter-spacing: 1px;
    margin-right: 5px;
}

.diff-btn {
    border: 1px solid #444;
    background: #111;
    color: #999;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

.diff-btn:hover:not(:disabled) {
    color: #fff;
    border-color: #666;
}

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

/* Easy active state (Green theme) */
.diff-btn.easy-btn.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

/* Medium active state (Orange theme) */
.diff-btn.medium-btn.active {
    background: rgba(249, 115, 22, 0.15);
    border-color: #f97316;
    color: #f97316;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
}

/* Hard active state (Red theme) */
.diff-btn.hard-btn.active {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Performance Stats Container */
.performance-stats {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    z-index: 1001;
    pointer-events: none;
}

/* FPS and Ping Counter */
.fps-counter, .ping-counter {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(6, 182, 212, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    color: #0cf;
    font-family: monospace;
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 0 5px rgba(0, 170, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 170, 255, 0.1);
    display: none;
    align-items: center;
    gap: 8px;
}

.fps-counter.visible, .ping-counter.visible {
    display: flex;
}

.fps-dot, .ping-dot {
    width: 6px;
    height: 6px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #22c55e;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Timer Counter */
.timer-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(244, 63, 94, 0.3); /* Rose/red tint border */
    border-radius: 8px;
    padding: 6px 12px;
    color: #f43f5e; /* Rose/red tint text color */
    font-family: monospace;
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 0 5px rgba(244, 63, 94, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(244, 63, 94, 0.1);
    z-index: 1001;
    pointer-events: none;
    display: none;
    align-items: center;
    gap: 8px;
    transition: border-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease, box-shadow 0.3s ease;
}

.timer-counter.visible {
    display: flex;
}

.timer-dot {
    width: 8px;
    height: 8px;
    background-color: #ef4444; /* Default red */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #ef4444;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Timer state updates */
.timer-counter.running {
    color: #eab308; /* Yellow */
    border-color: rgba(234, 179, 8, 0.3);
    text-shadow: 0 0 5px rgba(234, 179, 8, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(234, 179, 8, 0.1);
}
.timer-counter.running .timer-dot {
    background-color: #eab308;
    box-shadow: 0 0 8px #eab308;
}

.timer-counter.stopped {
    color: #22c55e; /* Green */
    border-color: rgba(34, 197, 94, 0.3);
    text-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(34, 197, 94, 0.1);
}
.timer-counter.stopped .timer-dot {
    background-color: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

/* Time Penalty Indicators */
.timer-penalty-indicator {
    color: #ef4444; /* Bright Red */
    margin-left: 6px;
    font-size: inherit;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
    display: inline;
    animation: penalty-pop 0.3s ease-out;
}

.timer-counter.penalty-flash {
    animation: timer-shake-red 0.7s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes penalty-pop {
    0% {
        text-shadow: 0 0 10px rgba(239, 68, 68, 1.0);
        filter: brightness(1.6);
    }
    100% {
        text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
        filter: brightness(1.0);
    }
}

@keyframes timer-shake-red {
    0% {
        transform: translateX(0);
        color: #ef4444;
        border-color: rgba(239, 68, 68, 1.0);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.9);
        text-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    }
    10%, 90% {
        transform: translateX(-6px);
    }
    20%, 80% {
        transform: translateX(6px);
    }
    30%, 50%, 70% {
        transform: translateX(-4px);
    }
    40%, 60% {
        transform: translateX(4px);
    }
    50% {
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.8);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(239, 68, 68, 0.7);
        text-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
    }
    100% {
        transform: translateX(0);
    }
}

/* ========================================
   Sgt. Graves Leaderboard & Dialogue Styles
   ======================================== */

.drill-sergeant-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.drill-sergeant-container .training-btn {
    width: 200px;
}

.npc-dialog-btn-small {
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    width: 160px;
    text-align: center;
}

/* Leaderboard Overlay Styles */
.leaderboard-content {
    background: #111;
    border: 2px solid #fb0;
    width: 500px;
    padding: 30px;
    box-shadow: 0 0 35px rgba(251, 176, 0, 0.15);
    border-radius: 12px;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.leaderboard-section {
    background: #080808;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.leaderboard-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #666;
    margin: 0 0 12px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #131313;
    border: 1px solid #1c1c1c;
    border-radius: 6px;
    font-size: 14px;
}

.leaderboard-player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leaderboard-rank-badge {
    font-size: 18px;
    width: 24px;
    display: inline-block;
    text-align: center;
}

.leaderboard-player-name {
    font-weight: 700;
    color: #eee;
}

.leaderboard-time {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 15px;
    color: #0af;
}

/* Rank highlight borders */
.leaderboard-row.rank-gold {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.04) 0%, rgba(255, 215, 0, 0) 100%);
}
.leaderboard-row.rank-gold .leaderboard-player-name {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.leaderboard-row.rank-silver {
    border-color: rgba(192, 192, 192, 0.4);
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.04) 0%, rgba(192, 192, 192, 0) 100%);
}
.leaderboard-row.rank-silver .leaderboard-player-name {
    color: #e2e8f0;
}

.leaderboard-row.rank-bronze {
    border-color: rgba(205, 127, 50, 0.4);
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.04) 0%, rgba(205, 127, 50, 0) 100%);
}
.leaderboard-row.rank-bronze .leaderboard-player-name {
    color: #d97706;
}

.leaderboard-empty {
    text-align: center;
    color: #555;
    font-style: italic;
    padding: 15px;
    font-size: 13px;
}

/* Stats Cards */
.leaderboard-stats-row {
    display: flex;
    gap: 15px;
}

.leaderboard-stat-card {
    flex: 1;
    background: #080808;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    text-align: center;
}

.stat-card-label {
    font-size: 9px;
    font-weight: 800;
    color: #666;
    letter-spacing: 1.5px;
}

.stat-card-value {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}