/* General Styles */
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        #game-container {
            background-color: #fff;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            max-width: 900px;
            width: 100%;
        }

        .hidden {
            display: none !important;
        }

        /* Start Screen */
        #start-screen {
            text-align: center;
        }

        #start-screen h1 {
            color: #ff6b35;
            font-size: 3em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .basketball-icon {
            font-size: 5em;
            margin: 20px 0;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-20px);
            }

            60% {
                transform: translateY(-10px);
            }
        }

        #start-button {
            font-size: 1.5em;
            padding: 15px 30px;
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            color: #fff;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
        }

        #start-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
        }

        /* Settings Form */
        #settings-form {
            max-width: 700px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .stepper {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            flex: 1;
        }

        .step::before {
            content: '';
            position: absolute;
            top: 15px;
            left: -50%;
            width: 100%;
            height: 3px;
            background-color: #ddd;
            z-index: 1;
            transition: background-color 0.3s ease;
        }

        .step:first-child::before {
            display: none;
        }

        .step-number {
            width: 35px;
            height: 35px;
            background-color: #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .step.active .step-number {
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            color: #fff;
        }

        .step.active::before {
            background: linear-gradient(45deg, #ff6b35, #f7931e);
        }

        .step-title {
            margin-top: 8px;
            font-size: 12px;
            text-align: center;
            font-weight: 500;
        }

        .form-step {
            display: none;
            opacity: 0;
            transform: translateX(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .form-step.active {
            display: block;
            opacity: 1;
            transform: translateX(0);
        }

        .form-step h2 {
            color: #ff6b35;
            margin-bottom: 20px;
        }

        .form-step label {
            display: block;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .form-step input[type="checkbox"] {
            margin-right: 8px;
            transform: scale(1.2);
        }

        .form-step input[type="number"],
        .form-step input[type="text"],
        .form-step select {
            width: 100%;
            padding: 8px 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            margin-top: 5px;
            transition: border-color 0.3s ease;
        }

        .form-step input[type="number"]:focus,
        .form-step input[type="text"]:focus,
        .form-step select:focus {
            outline: none;
            border-color: #ff6b35;
        }

        .operation-setting {
            margin-bottom: 20px;
            padding: 15px;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            background-color: #fff;
        }

        .operation-setting h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #ff6b35;
        }

        .operation-setting>div {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
        }

        .operation-setting>div label {
            margin-bottom: 0;
            white-space: nowrap;
        }

        .form-navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

        button {
            padding: 12px 24px;
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
        }

        button:disabled {
            background: #ddd;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Team Images */
        .team-images-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }

        .team-image-upload {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .vs {
            font-size: 24px;
            font-weight: bold;
            color: #ff6b35;
        }

        #team1-image-preview,
        #team2-image-preview {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid #ff6b35;
            background-size: cover;
            background-position: center;
            box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
            margin-top: 10px;
            background-color: #f8f9fa;
        }

        /* Game Screen */
        #score-display {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            border-radius: 10px;
            color: white;
        }

        .team-score {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .team-name {
            font-weight: bold;
            font-size: 1.1em;
            margin-bottom: 5px;
        }

        .score {
            font-size: 2em;
            font-weight: bold;
        }

        #game-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        #quarter {
            font-size: 1.2em;
            font-weight: bold;
        }

        #game-clock {
            font-size: 1.5em;
            font-weight: bold;
        }

        /* Basketball Court */
        #basketball-court {
            position: relative;
            height: 400px;
            background: linear-gradient(90deg, #1E3A8A 0%, #2563EB 50%, #1E3A8A 100%);
            border: 3px solid #8b4513;
            border-radius: 10px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        /* Court markings */
        #basketball-court::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: #fff;
            transform: translateX(-50%);
        }

        #basketball-court::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 120px;
            height: 120px;
            border: 3px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        /* Three-point arcs */
        .three-point-arc {
            position: absolute;
            width: 280px;
            height: 280px;
            border: 3px solid #fff;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
        }

        .three-point-arc.left {
            left: -140px;
            clip-path: inset(0 0 0 50%);
        }

        .three-point-arc.right {
            right: -140px;
            clip-path: inset(0 50% 0 0);
        }

        /* Paint areas (key) */
        .paint-area {
            position: absolute;
            width: 95px;
            height: 90px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 3px solid #fff;
            top: 50%;
            transform: translateY(-50%);
        }

        .paint-area.left {
            left: 0;
        }

        .paint-area.right {
            right: 0;
        }

        /* Free throw circles */
        .free-throw-circle {
            position: absolute;
            width: 50px;
            height: 50px;
            border: 3px solid #fff;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent;
            overflow: hidden;
        }

        /* Use clip-path to show only the inner half of the circle */
        .free-throw-circle.left {
            left: 70px;
            /* Half inside paint area (95px width), half outside */
            clip-path: inset(0 0 0 50%);
            /* Hide left half (outside paint area) */
        }

        .free-throw-circle.right {
            right: 70px;
            /* Half inside paint area (95px width), half outside */
            clip-path: inset(0 50% 0 0);
            /* Hide right half (outside paint area) */
        }


        /* Hoops - Top-down view */
        .hoop {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            width: 50px;
            height: 50px;
        }

        .left-hoop {
            left: 5px;
        }

        .right-hoop {
            right: 5px;
        }

        /* Backboard - Top view shows as a line with glass effect */
        .backboard {
            position: absolute;
            width: 6px;
            height: 45px;
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.1) 0%,
                    rgba(255, 255, 255, 0.3) 20%,
                    #e0e0e0 40%,
                    #d0d0d0 60%,
                    rgba(255, 255, 255, 0.3) 80%,
                    rgba(255, 255, 255, 0.1) 100%);
            top: 3px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow:
                0 0 8px rgba(0, 0, 0, 0.4),
                inset 0 0 2px rgba(255, 255, 255, 0.6);
        }

        .left-hoop .backboard {
            left: -1px;
            border-radius: 0 2px 2px 0;
        }

        .right-hoop .backboard {
            right: -1px;
            border-radius: 2px 0 0 2px;
        }

        /* Backboard support/bracket */
        .backboard::before {
            content: '';
            position: absolute;
            width: 12px;
            height: 3px;
            background: #666;
            top: 50%;
            transform: translateY(-50%);
        }

        .left-hoop .backboard::before {
            left: -8px;
        }

        .right-hoop .backboard::before {
            right: -8px;
        }

        /* Backboard center marking */
        .backboard::after {
            content: '';
            position: absolute;
            width: 2px;
            height: 15px;
            background: rgba(255, 107, 53, 0.6);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Rim - Circular from top view */
        .rim {
            position: absolute;
            width: 35px;
            height: 35px;
            border: 4px solid #ff6b35;
            border-radius: 50%;
            background-color: transparent;
            top: 10px;
            box-shadow:
                0 0 4px rgba(0, 0, 0, 0.3),
                inset 0 0 3px rgba(0, 0, 0, 0.2);
        }

        .left-hoop .rim {
            left: 4px;
        }

        .right-hoop .rim {
            right: 4px;
        }

        /* Inner rim circle for depth */
        .rim::before {
            content: '';
            position: absolute;
            width: 80%;
            height: 80%;
            border: 2px solid rgba(255, 107, 53, 0.5);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Net - Smaller circle visible from top */
        .net {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: radial-gradient(circle at center,
                    transparent 40%,
                    rgba(255, 255, 255, 0.3) 45%,
                    rgba(255, 255, 255, 0.5) 50%,
                    rgba(255, 255, 255, 0.3) 55%,
                    transparent 60%);
            top: 15px;
        }

        .left-hoop .net {
            left: 9px;
        }

        .right-hoop .net {
            right: 9px;
        }

        /* Net pattern */
        .net::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image:
                repeating-conic-gradient(from 0deg at 50% 50%,
                    transparent 0deg,
                    transparent 30deg,
                    rgba(255, 255, 255, 0.4) 30deg,
                    rgba(255, 255, 255, 0.4) 33deg);
            border-radius: 50%;
        }

        /* Net swish animation */
        @keyframes net-swish {
            0% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }

            20% {
                transform: scale(1.15) translateY(1px);
                opacity: 0.9;
            }

            40% {
                transform: scale(0.9) translateY(3px);
                opacity: 0.8;
            }

            60% {
                transform: scale(1.1) translateY(2px);
                opacity: 0.85;
            }

            80% {
                transform: scale(0.95) translateY(1px);
                opacity: 0.9;
            }

            100% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        .net.swish {
            animation: net-swish 0.8s ease-out;
        }

        /* Ball scoring animation helpers */
        #basketball {
            transition: all 0.3s ease;
        }

        /* Players */
        .player {
            position: absolute;
            font-size: 28px;
            transition: all 0.4s ease;
            z-index: 10;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        /* Team 1 players (blue shirts, facing right) */
        .team-1 {
            /* Blue shirt is already blue, no filter needed */
        }

        /* Team 2 players (pink/red shirts, facing left) */
        .player.team-2 {
            /* Pink shirt is already pink, just flip orientation */
            transform: scaleX(-1);
        }

        /* Team 1 positions - Offensive (attacking right side) */
        .team-1.point-guard {
            left: 65%;
            top: 25%;
        }

        .team-1.shooting-guard {
            left: 60%;
            top: 65%;
        }

        .team-1.power-forward {
            left: 82%;
            top: 50%;
        }

        /* Team 1 positions - Defensive (around left three-point arc) */
        .team-1.point-guard.defense {
            left: 15%;
            top: 20%;
        }

        .team-1.shooting-guard.defense {
            left: 10%;
            top: 50%;
        }

        .team-1.power-forward.defense {
            left: 15%;
            top: 80%;
        }

        /* Team 2 positions - Offensive (attacking left side) */
        .team-2.point-guard {
            right: 65%;
            top: 25%;
            transform: scaleX(-1);
        }

        .team-2.shooting-guard {
            right: 60%;
            top: 65%;
            transform: scaleX(-1);
        }

        .team-2.power-forward {
            right: 82%;
            top: 50%;
            transform: scaleX(-1);
        }

        /* Team 2 positions - Defensive (around right three-point arc) */
        .team-2.point-guard.defense {
            right: 15%;
            top: 20%;
            transform: scaleX(-1);
        }

        .team-2.shooting-guard.defense {
            right: 10%;
            top: 50%;
            transform: scaleX(-1);
        }

        .team-2.power-forward.defense {
            right: 15%;
            top: 80%;
            transform: scaleX(-1);
        }

        /* Basketball */
        #basketball {
            position: absolute;
            font-size: 20px;
            transform: translate(-50%, -50%);
            z-index: 15;
            transition: all 0.3s ease;
            animation: dribble 1s infinite ease-in-out;
        }

        #basketball.no-dribble {
            animation: none;
        }

        @keyframes dribble {

            0%,
            100% {
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
            }

            50% {
                transform: translate(-50%, -60%) scale(1.1) rotate(180deg);
            }
        }

        /* Basketball rotation animations */
        @keyframes ballRotate {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes ballRotateFast {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(720deg);
            }
        }

        @keyframes ballRotateReverse {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(-360deg);
            }
        }

        /* Basketball movement states */
        #basketball.rotating {
            animation: ballRotate 1s linear infinite;
        }

        #basketball.rotating-fast {
            animation: ballRotateFast 1s linear infinite;
        }

        #basketball.rotating-reverse {
            animation: ballRotateReverse 1s linear infinite;
        }

        #basketball.shooting {
            animation: ballRotateFast 0.8s linear infinite;
        }

        /* Question and Options Container */
        #question-options-container {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 40px;
            margin-bottom: 20px;
            padding: 0 20px;
            min-height: 120px;
        }

        /* Left Options (Team 1) */
        .left-options {
            width: 200px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 10px;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        /* Right Options (Team 2) */
        .right-options {
            width: 200px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 10px;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        /* Show options based on team turn */
        #question-options-container.team-1-turn .left-options {
            opacity: 1;
            visibility: visible;
        }

        #question-options-container.team-2-turn .right-options {
            opacity: 1;
            visibility: visible;
        }

        /* Question Section */
        #question-section {
            text-align: center;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 10px;
            width: 400px;
            min-width: 400px;
            max-width: 400px;
            flex-shrink: 0;
            position: relative;
        }

        #question {
            font-size: 1.4em;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        #shot-type {
            font-size: 1.1em;
            color: #ff6b35;
            font-weight: bold;
        }

        /* Circular Timer */
        .timer-container {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 60px;
            height: 60px;
        }

        .timer-svg {
            transform: rotate(-90deg);
        }

        .timer-circle-bg {
            fill: none;
            stroke: #e0e0e0;
            stroke-width: 4;
        }

        .timer-circle {
            fill: none;
            stroke: #4caf50;
            stroke-width: 4;
            stroke-dasharray: 176;
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
            stroke-linecap: round;
        }

        .timer-circle.warning {
            stroke: #ff9800;
        }

        .timer-circle.danger {
            stroke: #f44336;
        }

        .timer-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.2em;
            font-weight: bold;
            color: #333;
        }

        /* Floating Score Pop-ups */
        #floating-scores {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 25;
        }

        .floating-score {
            position: absolute;
            font-size: 48px;
            font-weight: bold;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            animation: floatUp 2s ease-out forwards;
            z-index: 30;
        }

        .floating-score.team-1 {
            color: #4caf50;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(76, 175, 80, 0.6);
        }

        .floating-score.team-2 {
            color: #ff6b35;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 107, 53, 0.6);
        }

        .floating-score.three-point {
            font-size: 56px;
            animation: floatUpBig 2.5s ease-out forwards;
        }

        @keyframes floatUp {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0.5);
            }

            20% {
                opacity: 1;
                transform: translateY(-20px) scale(1.2);
            }

            100% {
                opacity: 0;
                transform: translateY(-100px) scale(1);
            }
        }

        @keyframes floatUpBig {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0.3) rotate(-10deg);
            }

            15% {
                opacity: 1;
                transform: translateY(-30px) scale(1.4) rotate(5deg);
            }

            30% {
                transform: translateY(-50px) scale(1.2) rotate(-2deg);
            }

            100% {
                opacity: 0;
                transform: translateY(-120px) scale(1) rotate(0deg);
            }
        }

        /* Options */
        .options {
            justify-content: center;
        }

        /* Court Center Feedback */
        .court-feedback {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            pointer-events: none;
        }

        .feedback-emoji {
            font-size: 80px;
            display: inline-block;
            opacity: 0;
            transform: scale(0);
            animation: none;
        }

        .court-feedback.show-correct .feedback-emoji {
            animation: emojiPop 0.8s ease-out forwards;
        }

        .court-feedback.show-correct .feedback-emoji::before {
            content: '😊';
        }

        .court-feedback.show-correct-3point .feedback-emoji {
            animation: emojiPop 0.8s ease-out forwards;
        }

        .court-feedback.show-correct-3point .feedback-emoji::before {
            content: '😍';
        }

        .court-feedback.show-incorrect .feedback-emoji {
            animation: emojiShake 0.8s ease-out forwards;
        }

        .court-feedback.show-incorrect .feedback-emoji::before {
            content: '😢';
        }

        @keyframes emojiPop {
            0% {
                opacity: 0;
                transform: scale(0) rotate(-180deg);
            }

            50% {
                opacity: 1;
                transform: scale(1.3) rotate(10deg);
            }

            70% {
                transform: scale(0.9) rotate(-5deg);
            }

            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }

        @keyframes emojiShake {
            0% {
                opacity: 0;
                transform: scale(0);
            }

            20% {
                opacity: 1;
                transform: scale(1.2) rotate(-10deg);
            }

            30% {
                transform: scale(1) rotate(10deg);
            }

            40% {
                transform: scale(1) rotate(-10deg);
            }

            50% {
                transform: scale(1) rotate(10deg);
            }

            60% {
                transform: scale(1) rotate(-10deg);
            }

            70% {
                transform: scale(1) rotate(10deg);
            }

            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }



        .options button {
            padding: 12px 20px;
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            color: #fff;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
        }

        .options button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
        }

        /* Winner Popup */
        #winner-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .winner-content {
            background-color: #fff;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            max-width: 90%;
            width: 400px;
            animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        @keyframes popIn {
            0% {
                transform: scale(0.5);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .winner-title {
            font-size: 3em;
            color: #ff6b35;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .trophy-icon {
            font-size: 5em;
            margin-bottom: 20px;
            animation: trophy-bounce 1s infinite alternate;
        }

        @keyframes trophy-bounce {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-10px);
            }
        }

        .winner-message {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
        }

        #winner-image {
            width: 200px;
            height: 200px;
            margin: 0 auto 20px;
            border-radius: 50%;
            border: 5px solid #ff6b35;
            background-size: cover;
            background-position: center;
            box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
        }

        .restart-button {
            font-size: 1.2em;
            padding: 15px 30px;
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            color: #fff;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
        }

        /* Confetti */
        .confetti-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #ff6b35;
            animation: confetti-fall 3s linear infinite;
        }

        .confetti:nth-child(2n) {
            background-color: #f7931e;
        }

        .confetti:nth-child(3n) {
            background-color: #ffc107;
        }

        .confetti:nth-child(4n) {
            background-color: #28a745;
        }

        @keyframes confetti-fall {
            0% {
                transform: translateY(-100%) rotate(0deg);
            }

            100% {
                transform: translateY(100vh) rotate(360deg);
            }
        }

        .confetti:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
        }

        .confetti:nth-child(2) {
            left: 20%;
            animation-delay: 0.5s;
        }

        .confetti:nth-child(3) {
            left: 30%;
            animation-delay: 1s;
        }

        .confetti:nth-child(4) {
            left: 40%;
            animation-delay: 1.5s;
        }

        .confetti:nth-child(5) {
            left: 50%;
            animation-delay: 2s;
        }

        .confetti:nth-child(6) {
            left: 60%;
            animation-delay: 2.5s;
        }

        .confetti:nth-child(7) {
            left: 70%;
            animation-delay: 3s;
        }

        .confetti:nth-child(8) {
            left: 80%;
            animation-delay: 3.5s;
        }

        .confetti:nth-child(9) {
            left: 90%;
            animation-delay: 4s;
        }

        .confetti:nth-child(10) {
            left: 100%;
            animation-delay: 4.5s;
        }

        /* Celebration Overlay */
        #celebration-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4em;
            color: #fff;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* Quarter End Popup */
        .quarter-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1001;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .quarter-popup-content {
            background: linear-gradient(145deg, #ffffff, #f5f5f5);
            border-radius: 25px;
            padding: 50px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 60px rgba(255, 107, 53, 0.2);
            position: relative;
            overflow: hidden;
            max-width: 90%;
            width: 500px;
            animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes slideUp {
            from {
                transform: translateY(100px) scale(0.9);
                opacity: 0;
            }

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

        .quarter-emoji-container {
            margin-bottom: 30px;
        }

        .quarter-emoji {
            font-size: 100px;
            display: inline-block;
        }

        .animated-bounce {
            animation: quarterBounce 2s infinite;
        }

        @keyframes quarterBounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            40% {
                transform: translateY(-30px) rotate(10deg);
            }

            60% {
                transform: translateY(-15px) rotate(-10deg);
            }
        }

        .quarter-title {
            font-size: 2.5em;
            color: #ff6b35;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            font-weight: bold;
        }

        .quarter-scores {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            margin-bottom: 40px;
            font-size: 1.8em;
        }

        .team-result {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .team-label {
            font-size: 0.7em;
            color: #666;
            font-weight: normal;
        }

        .team-score-result {
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
            background: rgba(255, 107, 53, 0.1);
            padding: 10px 20px;
            border-radius: 15px;
            min-width: 80px;
        }

        .score-separator {
            font-size: 1.2em;
            color: #999;
            font-weight: bold;
        }

        .start-quarter-btn {
            font-size: 1.3em;
            padding: 18px 40px;
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            color: #fff;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(255, 107, 53, 0.4);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .start-quarter-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
            background: linear-gradient(45deg, #ff7b45, #f8a31e);
        }

        .start-quarter-btn:active {
            transform: translateY(-1px);
            box-shadow: 0 3px 15px rgba(255, 107, 53, 0.4);
        }

        /* Game Controls */
        #game-controls {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
            z-index: 1000;
        }

        .icon-button {
            background: linear-gradient(45deg, #ff6b35, #f7931e);
            border: none;
            color: #fff;
            padding: 12px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2em;
            transition: all 0.3s ease;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
        }

        .icon-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
        }

        /* Animations */
        @keyframes jump {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-15px);
            }
        }

        @keyframes celebrate {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-10deg);
            }

            75% {
                transform: rotate(10deg);
            }
        }

        @keyframes shoot {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-25px) scale(1.2);
            }
        }

        .player.dribbling {
            animation: jump 0.5s ease;
        }

        .player.shooting {
            animation: shoot 0.7s ease;
        }

        .player.celebrating {
            animation: celebrate 0.5s ease infinite;
        }

        /* Maintain transform for team 2 animations */
        .team-2.dribbling,
        .team-2.shooting,
        .team-2.celebrating {
            transform: scaleX(-1);
        }

        .team-name.active {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 5px 10px;
            border-radius: 5px;
        }

        /* Additional player animations */
        .player.wind-up {
            animation: wind-up 0.3s ease-in-out;
        }

        .player.alert {
            animation: alert 0.5s ease-in-out;
        }

        .team-2.wind-up {
            animation: wind-up 0.3s ease-in-out;
            transform: scaleX(-1);
        }

        .team-2.alert {
            animation: alert 0.5s ease-in-out;
            transform: scaleX(-1);
        }

        /* Wind-up animation for preparing to shoot */
        @keyframes wind-up {
            0% {
                transform: scale(1) rotate(0deg);
            }

            50% {
                transform: scale(0.9) rotate(-5deg);
            }

            100% {
                transform: scale(1.1) rotate(0deg);
            }
        }

        /* Alert animation for defensive reaction */
        @keyframes alert {
            0% {
                transform: scale(1);
                filter: brightness(1);
            }

            25% {
                transform: scale(1.05);
                filter: brightness(1.2);
            }

            50% {
                transform: scale(1.1);
                filter: brightness(1.3);
            }

            75% {
                transform: scale(1.05);
                filter: brightness(1.2);
            }

            100% {
                transform: scale(1);
                filter: brightness(1);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            #game-container {
                padding: 15px;
                margin: 10px;
            }

            #basketball-court {
                height: 300px;
            }

            #question-options-container {
                flex-direction: column !important;
                align-items: center !important;
                gap: 20px !important;
            }

            .left-options,
            .right-options {
                width: 100% !important;
                order: 2 !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
            }

            #question-section {
                width: 100% !important;
                min-width: auto !important;
                max-width: none !important;
                order: 1 !important;
            }

            .team-images-container {
                flex-direction: column;
                gap: 20px;
            }

            .vs {
                margin: 10px 0;
            }

            #score-display {
                font-size: 0.9em;
            }

            .score {
                font-size: 1.5em !important;
            }

            /* Timer adjustments for mobile */
            .timer-container {
                width: 50px;
                height: 50px;
                top: 5px;
                right: 5px;
            }

            .timer-svg {
                width: 50px;
                height: 50px;
            }

            .timer-text {
                font-size: 1em;
            }

            /* Court feedback adjustments for mobile */
            .feedback-emoji {
                font-size: 60px;
            }

            /* Floating score adjustments for mobile */
            .floating-score {
                font-size: 36px;
            }

            .floating-score.three-point {
                font-size: 42px;
            }
        }