*{margin:0;padding:0;box-sizing:border-box}html{overscroll-behavior:none}body{font-family:system-ui,-apple-system,sans-serif;background:url(/assets/background.png) center center / cover no-repeat fixed;color:#eee;min-height:100vh;overscroll-behavior:none}.page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:2vh 2rem;gap:1.2vh;position:relative;z-index:2;overflow:visible}.page .title{width:840px;max-width:80vw;max-height:18vh;margin-top:-1vh;object-fit:contain}.page .title-mobile{width:240px;max-width:70vw;object-fit:contain}.lobby-content{display:flex;flex-direction:column;align-items:center;gap:.8vh;flex-shrink:1;min-height:0}.player-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.player-list-item{padding:.3vh 1rem;background:#16213e;border:1px solid #4ade80;border-radius:20px;font-size:clamp(.7rem,1vh,.9rem);color:#4ade80}.start-button{padding:.8vh 3rem;font-size:clamp(1rem,1.5vh,1.3rem);font-weight:700;border:none;border-radius:10px;background:#4ade80;color:#1a1a2e;cursor:pointer;margin-top:.5vh}.start-button:disabled{opacity:.3;cursor:not-allowed}.skip-button{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);z-index:20;padding:.8rem 2.5rem;font-size:1.2rem;font-weight:700;border:none;border-radius:10px;background:#4ade80;color:#1a1a2e;cursor:pointer}.qr-container{background:#fff;padding:1rem;border-radius:12px;position:relative;z-index:10;flex-shrink:1}.category-area{display:flex;flex-direction:column;align-items:center;gap:.6vh;width:100%;max-width:900px;flex-shrink:1;min-height:0}.category-strip{display:flex;gap:.6rem;overflow-x:auto;width:100%;padding:.5vh 0;scrollbar-width:none;background:#fffffff2;border-radius:12px}.category-strip::-webkit-scrollbar{display:none}.category-chip{flex-shrink:0;padding:.4vh 1.25rem;font-size:clamp(.75rem,1.1vh,.95rem);font-weight:600;border:2px solid transparent;border-radius:8px;background:#e2e5ea;color:#16213e;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}.category-chip:hover{background:#d0d4db;color:#0f1629}.category-chip-selected{border-color:#16213e;color:#16213e;background:#cdd1d8}.custom-game-btn{padding:.5vh 2.5rem;font-size:clamp(.8rem,1.2vh,1rem);font-weight:700;border:none;border-radius:10px;background:#0f1629;color:#fff;cursor:pointer;transition:background .15s,color .15s;margin-top:.2vh}.custom-game-btn:hover{background:#141d33;color:#abd}.rotating-phrase{font-size:.95rem;font-weight:500;color:#6b7fa3;font-style:italic;line-height:1.4}.room-code{font-size:clamp(1rem,1.6vh,1.4rem);font-weight:700;letter-spacing:.15em;color:#fff;padding:.2vh 1.2rem}.saved-games-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.saved-game-chip{display:flex;align-items:center;gap:.4rem;padding:.45rem 1.1rem;font-size:.9rem;font-weight:600;border:2px solid transparent;border-radius:8px;background:#e2e5ea;color:#0f1629;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}.saved-game-chip:hover{background:#d0d4db}.saved-game-chip.saved-game-selected{border-color:#6b7280;background:#cdd1d8}.saved-game-delete{font-size:1rem;line-height:1;color:#0f162959;cursor:pointer;margin-left:.1rem}.saved-game-delete:hover{color:#ef4444}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#1a1a2e;border:1px solid #2a2a4a;border-radius:16px;padding:2rem;width:90%;max-width:600px;max-height:85vh;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.modal h2{font-size:1.5rem;font-weight:700;color:#eee}.modal-desc{font-size:.9rem;color:#aaa;line-height:1.5}.modal-sample{background:#0f1629;border-radius:10px;overflow:hidden}.modal-sample-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:#16213e;font-size:.85rem;color:#89b}.modal-copy-btn{padding:.3rem .8rem;font-size:.8rem;font-weight:600;border:1px solid #4a5568;border-radius:6px;background:transparent;color:#abd;cursor:pointer}.modal-copy-btn:hover{background:#1c2a4a}.modal-pre{padding:1rem;font-size:.8rem;color:#aaa;overflow-x:auto;white-space:pre;margin:0;font-family:monospace;max-height:180px;overflow-y:auto}.modal-title-input{width:100%;padding:.6rem 1rem;font-size:.95rem;border:2px solid #2a2a4a;border-radius:10px;background:#0f1629;color:#eee;outline:none}.modal-title-input:focus{border-color:#3b82f6}.modal-textarea{width:100%;padding:.75rem 1rem;font-size:.9rem;font-family:monospace;border:2px solid #2a2a4a;border-radius:10px;background:#0f1629;color:#eee;resize:vertical;outline:none}.modal-textarea:focus{border-color:#3b82f6}.modal-error{color:#ef4444;font-size:.85rem;font-weight:600}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.modal-cancel-btn{padding:.6rem 1.5rem;font-size:.95rem;font-weight:600;border:1px solid #4a5568;border-radius:8px;background:transparent;color:#aaa;cursor:pointer}.modal-cancel-btn:hover{background:#16213e}.modal-submit-btn{padding:.6rem 1.5rem;font-size:.95rem;font-weight:700;border:none;border-radius:8px;background:#3b82f6;color:#fff;cursor:pointer}.modal-submit-btn:hover{background:#2563eb}.privacy-link{position:fixed;bottom:.75rem;left:50%;transform:translate(-50%);font-size:.7rem;color:#ffffff1f;cursor:pointer;z-index:10}.privacy-body{display:flex;flex-direction:column;gap:.6rem;font-size:.9rem;color:#bbb;line-height:1.6}.privacy-body h3{font-size:1rem;font-weight:700;color:#eee;margin-top:.4rem}.qr-container.qr-fixed{position:fixed;bottom:1.5rem;right:1.5rem;transform:scale(.5);transform-origin:bottom right}.game-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1}.status{font-size:.9rem;opacity:.7}.status.connected{color:#4ade80;opacity:1}.mobile-name-page{justify-content:flex-start;padding-top:3rem}.name-form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:400px}.name-input-large{padding:1.25rem 1.5rem;font-size:1.5rem}.name-input{width:100%;padding:.75rem 1rem;font-size:1.1rem;border:2px solid #333;border-radius:8px;background:#16213e;color:#eee;text-align:center;outline:none}.name-input:focus{border-color:#4ade80}.join-button{padding:.75rem 2rem;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;background:#4ade80;color:#1a1a2e;cursor:pointer;width:100%}.name-display{font-size:1.4rem;font-weight:700;padding:.5rem 1.5rem;background:#16213e;border:2px solid #4ade80;border-radius:8px;color:#4ade80}.mobile-game{justify-content:flex-start;padding-top:2rem;gap:2rem}.status-bottom{position:fixed;bottom:1rem;left:0;right:0;text-align:center}.controls-bar{position:fixed;bottom:calc(2rem + 20px);left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:4rem}.action-buttons{display:flex;flex-direction:column;gap:.75rem}.action-btn{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}.action-btn-yellow{background:#b8a038;box-shadow:0 0 12px #b8a03866}.action-btn-yellow:active{background:#9a862e}.action-btn-blue{background:#3b82f6;box-shadow:0 0 12px #3b82f666}.action-btn-blue:active{background:#2563eb}.joystick-area{touch-action:none}.joystick-outer{width:140px;height:140px;border-radius:50%;background:#2a2a4a99;border:2px solid rgba(74,222,128,.3);display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}.joystick-inner{width:56px;height:56px;border-radius:50%;background:#4ade80b3;pointer-events:none;will-change:transform}.trivia-answers{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:400px;padding:0 1rem}.trivia-answer-btn{padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;border:2px solid #4a5568;border-radius:12px;background:#16213e;color:#eee;cursor:pointer;transition:opacity .4s ease,transform .3s ease,border-color .3s ease,background .3s ease;touch-action:manipulation;user-select:none;-webkit-user-select:none}.trivia-answer-btn:active:not(:disabled){transform:scale(.97)}.trivia-answer-btn.selected{border-color:#3b82f6;background:#1e3a5f}.trivia-answer-btn.hidden{opacity:0;pointer-events:none}.trivia-answer-btn.correct{border-color:#4ade80;background:#166534;color:#4ade80}.trivia-answer-btn.wrong{border-color:#ef4444;background:#7f1d1d;color:#ef4444}