body{margin:0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;box-sizing: border-box;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
            a{text-decoration: none;}
            .container{text-align: center;color:#555}
            .board{position:fixed;height:calc(100% - 90px);top:0;left:0;width:100%;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);display: flex;justify-content: center;align-items: center;box-sizing:border-box;border-radius: 0 0 20px 20px;box-shadow: 0 8px 32px rgba(0,0,0,0.1);}
            #return{display:none;position: fixed;bottom:100px;right:30px;font-size: 2.3em;cursor:pointer;color:#000;background: rgba(0,0,0,0.2);backdrop-filter: blur(10px);border-radius: 50%;width: 60px;height: 60px;align-items: center;justify-content: center;transition: all 0.3s ease;}
            #return:hover{background: rgba(255,255,255,0.3);transform: scale(1.1);}
            #return[style*="block"]{display: flex !important;}
            #swap{display:none;position: fixed;bottom:100px;left:30px;font-size: 2.3em;cursor:pointer;color:#000;background: rgba(0,0,0,0.2);backdrop-filter: blur(10px);border-radius: 50%;width: 60px;height: 60px;align-items: center;justify-content: center;transition: all 0.3s ease;}
            #swap:hover{background: rgba(255,255,255,0.3);transform: scale(1.1);}
            #swap[style*="block"]{display: flex !important;}
            .board[state="ready"]{height:100%;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);cursor:pointer;font-size:1.5em;animation: pulse 2s infinite;}
            .board[state="ready"] #message{color:#fff;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}

            .board[state="display"]{height:100%;background:#fff;color:#333;}
            .board[state="display"] #message{color:#333;font-size: 5em;width:100%;max-width:100%;padding-left:60px;padding-right:60px;box-sizing:border-box;text-shadow: 0 2px 4px rgba(0,0,0,0.1);position: relative;z-index: 2;}
            
            /* Large background star indicator - only shows when answer is displayed */
            .board[state="display"] .star-background {
                position: absolute;
                top: -20%;
                right: -15%;
                width: 60vw;
                height: 60vw;
                font-size: 50vw;
                background: linear-gradient(135deg, #ffd700 0%, #ffed4e 30%, #ff6b6b 60%, #ee5a52 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                opacity: 0.35;
                animation: starRotate 8s linear infinite, starPulse 2.5s ease-in-out infinite alternate;
                z-index: 1;
                pointer-events: none;
                display: flex;
                align-items: center;
                justify-content: center;
                transform-origin: center;
                filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
            }
            
            @keyframes starPulse {
                0% { opacity: 0.25; transform: scale(1); filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.2)); }
                100% { opacity: 0.45; transform: scale(1.08); filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5)); }
            }
            
            @keyframes starRotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .board[state="display"] #return{color:#333 !important;background: rgba(0,0,0,0.15) !important;backdrop-filter: blur(10px) !important;border: 1px solid rgba(0,0,0,0.2) !important;}
            .board[state="display"] #return:hover{background: rgba(0,0,0,0.25) !important;color:#000 !important;}
            .board[state="display"] #swap{color:#333 !important;background: rgba(0,0,0,0.15) !important;backdrop-filter: blur(10px) !important;border: 1px solid rgba(0,0,0,0.2) !important;}
            .board[state="display"] #swap:hover{background: rgba(0,0,0,0.25) !important;color:#000 !important;}

            .controls{position:fixed;height:90px;bottom:0;left:0;width:100%;background: rgba(255,255,255,0.95);backdrop-filter: blur(10px);display: flex;justify-content: center;align-items: center;padding-left:20px;padding-right: 20px;box-sizing: border-box;gap:15px;border-radius: 20px 20px 0 0;box-shadow: 0 -4px 20px rgba(0,0,0,0.1);}
            .controls[state="ready"]{display: none;}
            .controls input{font-size: 1.5em;width:50%;max-width: 400px; min-width:200px;border:0px;border-bottom: 3px solid #667eea;background: transparent;padding: 10px 0;transition: all 0.3s ease;}
            .controls input:focus{outline: none;border-bottom-color: #764ba2;}

            #message{font-size: 3em;max-width: 80%;margin:auto;font-weight: bold;color:#333;user-select: none;-webkit-user-select:none;text-shadow: 0 2px 4px rgba(0,0,0,0.1);}
            #message small{font-size:0.5em;font-weight: normal;}

            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.02); }
                100% { transform: scale(1); }
            }

            .generic_button{width:160px;height:45px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 25px;border: none;box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);position: relative;color:#fff;display: flex;justify-content: center;align-items: center;box-sizing: border-box;cursor:pointer;user-select: none;-webkit-user-select:none;transition: all 0.3s ease;font-weight: 600;}
            .generic_button:hover{background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);}
            .generic_button:active{transform: translateY(0);box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);}

            #fullscreen{position:absolute;left:30px;font-size:28px;color:#667eea;background: rgba(255,255,255,0.9);backdrop-filter: blur(10px);border-radius: 50%;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}
            #fullscreen:hover{background: rgba(255,255,255,1);transform: scale(1.1);}
            #mobilewarning{display: none;}
            #dontknow{display:none;}
            
            /* Connection Modal */
            #connect-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);backdrop-filter: blur(5px);z-index:10000;justify-content:center;align-items:center;}
            #connect-modal .modal-content{background: #fff;padding:40px;border-radius:20px;text-align:center;max-width:450px;width:90%;box-shadow: 0 20px 40px rgba(0,0,0,0.3);border: 1px solid rgba(255,255,255,0.2);}
            #connect-modal h2{color:#333;margin-bottom:20px;font-size:2em;text-shadow: 0 2px 4px rgba(0,0,0,0.1);}
            #connect-modal p{color:#666;font-size:1.1em;margin-bottom:20px;}
            #connect-modal input{font-size:1.4em;padding:15px;margin:15px 0;width:200px;border:2px solid #667eea;border-radius:15px;text-align:center;background: rgba(255,255,255,0.9);backdrop-filter: blur(10px);transition: all 0.3s ease;}
            #connect-modal input:focus{outline:none;border-color:#764ba2;box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);}
            #connect-modal .modal-buttons{display:flex;gap:15px;justify-content:center;margin-top:25px;}
            #connect-status{margin:15px 0;padding:12px;border-radius:10px;display:none;font-weight:600;}
            #connect-status.connected{background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);color:#155724;border:1px solid #c3e6cb;}
            #connect-status.error{background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);color:#721c24;border:1px solid #f5c6cb;}
            #connect-status.waiting{background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);color:#0c5460;border:1px solid #bee5eb;}
            
            
            @media (max-width:960px) {
                #mobilewarning{display: grid;justify-content: center;align-items: center;position:fixed;width:100%;height:100%;z-index: 9999;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: #fff;padding: 40px;box-sizing: border-box;}
                #mobilewarning span{font-size: 2em;text-align:center;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
                .controls{padding-left:10px;padding-right:10px;height:100px;}
                .controls input{width:50%;max-width: 400px; min-width:150px;border:0px;border-bottom: 3px solid #667eea;}
                .board{height:calc(100% - 100px);}
                .board[state="display"] #message{color:#333;font-size: 2em;}
                .board[state="default"] #message{font-size: 2em;}
                #fullscreen{display:none;}
                #return{bottom:120px;width: 50px;height: 50px;font-size: 1.8em;}
                #swap{bottom:120px;width: 50px;height: 50px;font-size: 1.8em;}
                
                /* Mobile star adjustments */
                .board[state="display"] .star-background {
                    width: 80vw;
                    height: 80vw;
                    font-size: 70vw;
                    top: -25%;
                    right: -20%;
                }
            }

            /* Subtle countdown notification */
            .countdown-notification {
                position: fixed;
                top: 20px;
                right: 20px;
                background: rgba(255, 107, 107, 0.85);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 8px;
                padding: 12px 16px;
                color: white;
                box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
                z-index: 1000;
                display: none;
                font-size: 0.85em;
                min-width: 180px;
                animation: subtleSlideIn 0.3s ease-out;
            }
            
            .countdown-notification.urgent {
                background: rgba(255, 48, 48, 0.9);
                border-color: rgba(255, 255, 255, 0.3);
                animation: subtleUrgent 1s ease-in-out infinite alternate;
            }
            
            .countdown-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }
            
            .countdown-title {
                font-size: 0.9em;
                font-weight: 500;
                opacity: 0.9;
                flex: 1;
            }
            
            .countdown-timer {
                font-size: 1.1em;
                font-weight: 600;
                background: rgba(255,255,255,0.15);
                border-radius: 4px;
                padding: 2px 8px;
                min-width: 24px;
                text-align: center;
            }
            
            .countdown-progress-bar {
                width: 100%;
                height: 2px;
                background: rgba(255,255,255,0.2);
                border-radius: 1px;
                margin-top: 8px;
                overflow: hidden;
            }
            
            .countdown-progress-fill {
                height: 100%;
                background: rgba(255,255,255,0.6);
                border-radius: 1px;
                transition: width 1s linear;
                width: 100%;
            }
            
            @keyframes subtleSlideIn {
                from { 
                    transform: translateX(50px);
                    opacity: 0;
                }
                to { 
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            
            @keyframes subtleUrgent {
                from { 
                    opacity: 0.9;
                    transform: scale(1);
                }
                to { 
                    opacity: 1;
                    transform: scale(1.02);
                }
            }
            
            /* Mobile responsive */
            @media (max-width: 768px) {
                .countdown-notification {
                    top: 10px;
                    right: 10px;
                    left: 10px;
                    min-width: auto;
                    font-size: 0.8em;
                }
            }