/* Base Styles & Mobile First Reset derived from template rules */
        * { 
            box-sizing: border-box; 
            margin: 0; 
            padding: 0; 
        }
        body { 
            background-color: #0b0c10; 
            min-height: 100vh; 
            width: 100%; 
            max-width: 1500px; 
            margin: 0 auto;
             background-image:url('images/dealornodeal4.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: left;
   background-size: 100% 100%;
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center;
            color: white; 
            overflow: hidden;
            font-family: sans-serif;
        }

        #cas {
            margin-top: 10px;
        }

        #big { 
            font-size: 2.5rem; 
            width: 100%; 
            background-color: rgb(181, 228, 106); 
            color: black; 
            font-weight: bold; 
            text-align: center;
            margin-bottom: 15px; 
            padding: 5px 0; 
            border-radius: 5px; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            text-transform: uppercase; 
            letter-spacing: 2px; 
        }

        /* Interactive Mode Selection Menu Overlay */
        #setup-menu { 
            background-color: rgba(0, 0, 0, 0.9); 
            border: 4px solid rgb(33, 150, 243); 
            border-radius: 20px; 
            padding: 25px; 
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8); 
        }
        .menu-title { 
            font-size: 1.2rem; 
            color: rgb(181, 228, 106); 
            margin-bottom: 15px; 
            font-weight: bold; 
            letter-spacing: 1px; 
            text-align: center;
        }
        .menu-btn { 
            background-color: rgba(33, 150, 243, 0.15); 
            border: 2px solid rgb(33, 150, 243); 
            color: white; 
            font-size: 1rem; 
            font-weight: bold; 
            padding: 12px 10px; 
            margin-bottom: 15px; 
            border-radius: 10px; 
            cursor: pointer; 
            width: 100%; 
            transition: all 0.3s ease; 
            text-transform: uppercase; 
            height:fit-content;
        }
        .menu-btn:hover:not(:disabled) { 
            background-color: rgb(33, 150, 243); 
            color: black; 
            box-shadow: 0 0 15px rgba(33, 150, 243, 0.6); 
            transform: translateY(-2px); 
        }

        /* Universal Live Draw Arena Stages */
        #global-draw-arena { 
            display: none; 
            background-color: rgba(0, 0, 0, 0.85); 
            border: 4px solid rgb(33, 150, 243); 
            border-radius: 20px; 
            padding: 2px; 
            margin-top: 5px; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.6); 
            text-align: center;
        }
        .status-bar { 
            font-family: monospace; 
            font-size: 1.1rem; 
            color: rgb(33, 150, 243); 
            margin-bottom: 8px; 
            font-weight: bold; 
        }
        .timer-banner { 
            font-family: monospace; 
            color: #ef5350; 
            font-size: 1.3rem; 
            font-weight: bold; 
        }

        /* Flight Stage Viewport Box (Shiny Blue Graphic Panel) */
        #lotto { 
            display: none; 
            height: 320px; 
            background: linear-gradient(135deg, rgba(18, 125, 187, 0.25) 0%, rgba(0, 15, 90, 0.4) 100%); 
            border: 4px solid rgb(33, 150, 243); 
            border-radius: 15px; 
            position: relative; 
            overflow: hidden; 
            margin-top: 10px; 
            margin-bottom: 10px; 
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(33,150,243,0.4); 
        }

        /* Live Multiplier Large Text Display */
        #multiplier-display { 
            position: absolute; 
            top: 20px; 
            width: 100%; 
            text-align: center; 
            font-size: 38px; 
            font-family: monospace; 
            font-weight: bold; 
            color: rgb(175, 255, 27); 
            text-shadow: 0 0 10px rgba(175, 255, 27, 0.6); 
            z-index: 10; 
        }

        /* High Fidelity Realistic SVG Flying Bird Wrapper */
        #bird-avatar { 
            position: absolute; 
            bottom: 20px; 
            left: 30px; 
            width: 60px; 
            height: 50px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            z-index: 5;
            transform-origin: center center;
        }

        .realistic-bird-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        /* Flapping structural animation frames for bird wing path */
        .wing-animated {
            animation: flapWingsEngine 0.18s ease-in-out infinite alternate;
            transform-origin: 30px 25px;
        }

        @keyframes flapWingsEngine {
            0% { transform: scaleY(0.3) rotate(-15deg); }
            100% { transform: scaleY(1.1) rotate(25deg); }
        }

        /* Core Graph Flight Path Line Layer */
        #flight-curve-svg { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            pointer-events: none; 
        }
        #flight-path-line { 
            stroke: rgb(181, 228, 106); 
            stroke-width: 4; 
            fill: none; 
            stroke-dasharray: 4 6; 
        }

        /* Sub-controls Action Blocks */
        #buttonsdiv { 
            display: none; 
            grid-template-columns: 1fr 1fr; 
            gap: 15px; 
            margin-top: 10px; 
        }
        .action-btn { 
            background-color: rgb(181, 228, 106); 
            color: black; 
            height: 45px; 
            font-size: 18px; 
            font-weight: bold; 
            border-radius: 10px; 
            border: 2px solid #000; 
            cursor: pointer; 
            transition: all 0.2s ease; 
            text-transform: uppercase; 
        }
        .action-btn.quit-btn { 
            background-color: #ef5350; 
            color: white; 
        }
        .action-btn:disabled { 
            background-color: #444; 
            color: #777; 
            cursor: not-allowed; 
            border-color: #222;
        }
        .action-btn:hover:not(:disabled) { 
            opacity: 0.9; 
            transform: scale(1.02); 
        }

        /* Layout base width targeting configuration */
        #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { 
            width: 500px; 
        }

        /* ==========================================================================
           Adaptive Responsive Breakpoint Arrays
           ========================================================================== */
        
        @media screen and (max-width: 320px) {
            #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { width: 280px; }
            #big { font-size: 1.5rem; }
            #lotto { height: 200px; }
            #multiplier-display { font-size: 24px; }
            .menu-btn, .action-btn { font-size: 13px; }
        }

        @media screen and (min-width: 321px) and (max-width: 365px) {
            #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { width: 310px; }
            #big { font-size: 1.7rem; }
            #lotto { height: 220px; }
            #multiplier-display { font-size: 28px; }
            .menu-btn, .action-btn { font-size: 14px; }
        }

        @media screen and (min-width: 366px) and (max-width: 375px) {
            #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { width: 340px; }
            #big { font-size: 1.9rem; }
            #lotto { height: 240px; }
        }

        @media screen and (min-width: 376px) and (max-width: 400px) {
            #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { width: 365px; }
            #big { font-size: 2.1rem; }
        }

        @media screen and (min-width: 401px) and (max-width: 600px) {
            #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { width: 395px; }
        }

        @media screen and (min-width: 601px) and (max-width: 1200px) {
            #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { width: 550px; }
            #lotto { height: 340px; }
        }

        @media screen and (min-width: 1201px) and (max-width: 1500px) {
            #cas, #lotto, #buttonsdiv, #setup-menu, #global-draw-arena { width: 680px; }
            #lotto { height: 380px; }
            #big { font-size: 3rem; }
            .menu-btn, .action-btn { height: 48px; font-size: 20px; }
        }