/* Web page: gamebox container */
.ct-gamebox {
  position: relative;
  min-height: 560px;
  width: 100%;
  margin-bottom: 56px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 30%, rgba(34, 197, 94, 0.04) 0%, transparent 45%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(30, 58, 138, 0.15) 0%, transparent 65%),
    linear-gradient(180deg, #0c1222 0%, #1e293b 40%, #0f172a 70%, #0c1222 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    inset 0 0 150px rgba(0, 0, 0, 0.25),
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(148, 163, 184, 0.1);
}

/* Shooting Game Overlay Styles (extension: full viewport overlay) */

#shooting-game-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#shooting-game-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

#shooting-game-ui {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
    font-family: Arial, sans-serif !important;
}

/* Phaser canvas styling */
#shooting-game-container canvas {
    display: block !important;
    margin: 0 auto !important;
}

/* Prevent text selection during gameplay */
#shooting-game-overlay * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Difficulty Selection Dialog Styles */
.difficulty-dialog-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 2147483648 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, sans-serif !important;
    animation: fadeIn 0.3s ease-in-out !important;
}

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

.difficulty-dialog {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 3px solid #0f4c75 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    max-width: 600px !important;
    width: 90% !important;
    animation: slideUp 0.4s ease-out !important;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.difficulty-button-container {
    margin: 15px 0 !important;
    transition: transform 0.2s !important;
}

.difficulty-button {
    width: 100% !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    text-align: left !important;
    outline: none !important;
}

.difficulty-button:hover {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
    transform: scale(1.02) !important;
}

.difficulty-button:active {
    transform: scale(0.98) !important;
}