:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#023d62;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;background-image:url(/background-image.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{-webkit-text-size-adjust:100%}input,textarea,select{font-size:16px!important;-webkit-text-size-adjust:100%;touch-action:manipulation}.header{background-color:#023d62;color:#fff;box-shadow:0 1px 3px #0000004d;border-bottom:1px solid #dc2626;box-sizing:border-box;position:fixed;top:0;left:0;right:0;z-index:1000;padding-top:env(safe-area-inset-top);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:auto}.header-container{width:100%;padding:0 16px;box-sizing:border-box}.header-content{display:flex;justify-content:space-between;align-items:center;height:64px}.logo-area{flex-shrink:0}.logo-title{font-size:20px;font-weight:700;color:#fff;margin:0}.user-area{display:flex;align-items:center;gap:16px}.user-name{font-size:14px;color:#fff}.logout-button{background-color:#dc2626;color:#fff;padding:4px 12px;border-radius:6px;font-size:14px;border:none;cursor:pointer;transition:background-color .15s ease;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;position:relative;z-index:1001}.logout-button:hover{background-color:#b91c1c}.logout-button:disabled{background-color:#6b7280;cursor:not-allowed}.game-view{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.game-content{width:100%;max-width:800px;height:auto;max-height:calc(100vh - 120px);overflow-y:auto}.game-card{color:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000004d;padding:32px;width:100%;box-sizing:border-box}.question-title{font-size:24px;font-weight:700;margin-bottom:8px;text-align:center;color:#fff}.question-subtitle{text-align:center;color:#d1d5db;margin-bottom:24px}.question-text{font-size:18px;margin-bottom:16px;color:#fff;text-align:center}.form-group{margin-bottom:24px}.form-label{display:block;font-size:14px;font-weight:500;color:#fff;margin-bottom:8px}.form-input{width:100%;padding:8px 12px;border:1px solid white;border-radius:0;box-shadow:0 1px 2px #0003;font-size:20px;background-color:#fff3;color:#fff;box-sizing:border-box;-webkit-text-size-adjust:100%;touch-action:manipulation}.form-input::placeholder{color:#fff}.form-input:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px #dc262633}.form-input:disabled{background-color:#4b5563;color:#9ca3af}.form-textarea{width:100%;padding:8px 12px;border-color:#fff;box-shadow:0 1px 2px #0003;resize:vertical;min-height:96px;background-color:#fff3;color:#fff;text-align:center;font-size:16px;font-family:sans-serif;box-sizing:border-box;-webkit-text-size-adjust:100%;touch-action:manipulation}.form-textarea:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px #dc262633}.form-textarea:disabled{background-color:#4b5563;color:#9ca3af}.form-textarea::placeholder{color:#fff}.btn-primary{width:100%;background-color:#dc2626;color:#fff;padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:16px;font-weight:500;transition:background-color .15s ease}.btn-primary:hover{background-color:#b91c1c}.btn-primary:disabled{background-color:#6b7280;cursor:not-allowed}.btn-secondary{flex:1;background-color:#dc2626;color:#fff;padding:12px 16px;border-radius:6px;border:none;cursor:pointer;font-size:16px;transition:background-color .15s ease}.btn-secondary:hover{background-color:#b91c1c}.btn-secondary:disabled{background-color:#6b7280;cursor:not-allowed}.btn-danger{flex:1;background-color:#dc2626;color:#fff;padding:12px 16px;border-radius:6px;border:none;cursor:pointer;font-size:16px;font-weight:700;transition:background-color .15s ease}.btn-danger:hover{background-color:#b91c1c}.btn-danger:disabled{background-color:#6b7280;cursor:not-allowed}.error-message{margin-bottom:16px;padding:12px;background-color:#dc2626;border:1px solid #b91c1c;color:#fff;border-radius:6px}.loading-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.loading-content{text-align:center}.loading-spinner{width:64px;height:64px;border:2px solid #4b5563;border-top:2px solid #dc2626;border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}.loading-text{margin-top:16px;font-size:18px;color:#fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal-overlay{position:fixed;inset:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:50}.modal-content{color:#fff;border-radius:8px;box-shadow:0 25px 50px -12px #00000080;padding:32px;max-width:448px;width:100%;margin:16px}.modal-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:16px;color:#fff}.modal-text{color:#fff;text-align:center;margin-bottom:24px}.modal-subtext{font-size:14px;color:#d1d5db;text-align:center;margin-bottom:24px}.modal-buttons{display:flex;gap:16px}.app-container{width:100vw;height:100vh;overflow:hidden}.main-content{width:100vw;height:calc(100vh - 64px - env(safe-area-inset-top));margin-top:calc(64px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:center;box-sizing:border-box}@media (max-width: 768px){.header-container{padding:0 12px}.game-view{padding:16px}.game-card{padding:24px}.question-title{font-size:20px}.modal-content{margin:12px;padding:24px}}@media (max-width: 480px){.user-area{gap:8px}.user-name{font-size:12px}.logout-button{padding:3px 8px;font-size:12px}.game-view{padding:12px}.game-card{padding:16px}.question-title{font-size:18px}.modal-buttons{flex-direction:column;gap:12px}}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}#root{width:100%;height:100%}