:root{--primary-color: #b0f4ff;--secondary-color: #97e5f3;--highlight-color: #ff6f77;--white: #ffffff;--gray-100: #f3f4f6;--gray-300: #d1d5db;--gray-500: #6b7280;--gray-800: #1f2937;--black: #000000;--shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius: 1rem;--font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}body{margin:0;font-family:var(--font-family);background-color:var(--primary-color);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:1rem;box-sizing:border-box}.app-container{width:100%;max-width:550px;margin:0 auto}.card{background-color:var(--white);padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;position:relative;min-height:500px}h2{color:var(--highlight-color);margin:0 0 1rem;font-size:1.5rem;font-weight:700;text-align:center}.text-highlight{color:var(--highlight-color)}.text-dark{color:var(--gray-800)}.text-muted{color:var(--gray-500)}.text-center{text-align:center}.font-bold{font-weight:700}.font-xl{font-size:1.25rem}.btn-secondary{width:100%;background-color:var(--secondary-color);color:var(--black);font-weight:700;padding:1rem;border:none;border-radius:.5rem;font-size:1.1rem;cursor:pointer;transition:filter .2s,transform .1s;box-shadow:0 4px 6px #0000001a}.btn-secondary:hover{filter:brightness(.95)}.btn-secondary:active{transform:scale(.98)}.btn-secondary:disabled{opacity:.7;cursor:not-allowed}input{width:100%;padding:1rem;font-size:1.125rem;border-radius:.5rem;border:1px solid var(--gray-300);background-color:var(--gray-100);margin-bottom:1rem;box-sizing:border-box}input:focus{outline:2px solid var(--secondary-color)}.back-btn{background:none;border:none;color:var(--gray-500);cursor:pointer;margin-bottom:1rem;font-size:.9rem}.back-btn:hover{color:var(--gray-800)}.logo{width:250px;position:relative;top:-80px;margin-bottom:-60px}.footer-logo{width:50px;margin-top:2rem}.loader{border:4px solid #e5e7eb;border-top:4px solid #000000;border-radius:50%;width:32px;height:32px;animation:spin 1s linear infinite;margin:1rem auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.game-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.score-badge{background-color:var(--secondary-color);padding:.5rem 1rem;border-radius:.5rem;border:none;cursor:pointer;text-align:right}.canvas-container{width:100%;aspect-ratio:1 / 1;background-color:var(--white);border-radius:1rem;box-shadow:var(--shadow);overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:1.5rem;padding:1rem;box-sizing:border-box}canvas{width:100%;height:100%;image-rendering:pixelated;transform:scaleY(-1)}.guess-form{display:flex;gap:.75rem;width:100%}.guess-form input{margin-bottom:0;flex:1}.guess-form button{width:auto;padding:0 1.5rem}.last-guess{background-color:var(--white);padding:1rem;border-radius:.5rem;box-shadow:0 2px 5px #0000001a;text-align:center;margin-bottom:1rem;color:var(--gray-800)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-content{background:var(--white);width:100%;max-width:400px;padding:1.5rem;border-radius:1rem;box-shadow:var(--shadow);transform:scale(.95);transition:transform .2s ease}.modal-overlay.open .modal-content{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--gray-500)}.player-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.player-row{display:flex;justify-content:space-between;padding:.75rem;border-radius:.5rem;background-color:var(--gray-100)}.player-row.is-me{background-color:#e0f2fe}.player-row.is-me span{color:#0369a1}.hidden{display:none}.error-msg{color:#ef4444;margin-top:.5rem;text-align:center}.button-stack{display:flex;flex-direction:column;gap:1rem;width:100%}.img-hidden{width:100%;max-width:200px;margin-bottom:1rem}canvas{width:100%;height:auto;aspect-ratio:1/1;image-rendering:pixelated;background:#fff}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}