:root{--region-0: #FF6B6B;--region-1: #4ECDC4;--region-2: #FFE66D;--region-3: #95E1D3;--region-4: #F38181;--region-5: #AA96DA;--region-6: #81C784;--region-7: #64B5F6;--cell-size: min(10vw, 60px);--grid-gap: 1px;--border-radius: 4px;--conflict-color: #ff0000;--text-dark: #333;--bg-color: #1a1a2e}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-color);min-height:100vh;display:flex;justify-content:center;align-items:center}.game-container{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px}.game-header{text-align:center;color:#fff}.game-header h1{margin:0 0 8px;font-size:2rem;font-weight:700;letter-spacing:2px}.game-stats{display:flex;gap:24px;font-size:1.1rem;color:#fffc}.timer,.kings-count{background:#ffffff1a;padding:8px 16px;border-radius:20px;font-weight:600;font-variant-numeric:tabular-nums}.timer{min-width:90px}.grid{display:grid;grid-template-columns:repeat(8,var(--cell-size));grid-template-rows:repeat(8,var(--cell-size));gap:var(--grid-gap);background:#333;padding:var(--grid-gap);border-radius:8px;box-shadow:0 10px 40px #0006}.cell{width:var(--cell-size);height:var(--cell-size);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform .1s ease,filter .15s ease;position:relative;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.cell:hover{filter:brightness(1.1)}.cell:active{transform:scale(.95)}.cell.region-0{background-color:var(--region-0)}.cell.region-1{background-color:var(--region-1)}.cell.region-2{background-color:var(--region-2)}.cell.region-3{background-color:var(--region-3)}.cell.region-4{background-color:var(--region-4)}.cell.region-5{background-color:var(--region-5)}.cell.region-6{background-color:var(--region-6)}.cell.region-7{background-color:var(--region-7)}.cell.conflict{animation:conflict-pulse .5s ease-in-out infinite alternate}@keyframes conflict-pulse{0%{box-shadow:inset 0 0 0 3px var(--conflict-color)}to{box-shadow:inset 0 0 0 5px var(--conflict-color),0 0 10px var(--conflict-color)}}.king{font-size:calc(var(--cell-size) * .6);animation:king-appear .2s ease-out;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.3))}@keyframes king-appear{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.controls{display:flex;gap:12px}.controls button{padding:12px 24px;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:transform .1s ease,box-shadow .15s ease;background:#fff;color:var(--text-dark)}.controls button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.controls button:active{transform:translateY(0)}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:100;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background:#fff;padding:40px;border-radius:16px;text-align:center;animation:modal-pop .3s ease;max-width:90vw}@keyframes modal-pop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.modal h2{margin:0 0 16px;font-size:2rem;color:var(--text-dark)}.modal p{margin:0 0 24px;font-size:1.2rem;color:#666}.modal button{padding:14px 32px;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;background:var(--region-1);color:#fff;transition:transform .1s ease}.modal button:hover{transform:scale(1.05)}.modal-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.modal button.secondary{background:#fff;color:var(--text-dark);border:2px solid #e0e0e0}.modal button.secondary:hover{border-color:var(--region-1)}.score-submitted{font-size:.9rem;color:#666;margin:0 0 20px}.rank-display{font-size:1.3rem;color:var(--region-1);margin:0 0 20px}.rank-display strong{font-size:1.5rem;color:var(--text-dark)}.confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99;overflow:hidden}.confetti-piece{position:absolute;width:10px;height:10px;animation:confetti-fall 3s ease-out forwards}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.auth-card{background:#fff;padding:40px;border-radius:16px;width:100%;max-width:400px;box-shadow:0 10px 40px #0000004d}.auth-title{text-align:center;margin:0 0 8px;font-size:2.5rem;font-weight:700;letter-spacing:3px;color:var(--text-dark)}.auth-subtitle{text-align:center;margin:0 0 32px;color:#666}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.9rem;font-weight:600;color:var(--text-dark)}.form-group input{padding:12px 16px;font-size:1rem;border:2px solid #e0e0e0;border-radius:8px;transition:border-color .2s ease}.form-group input:focus{outline:none;border-color:var(--region-1)}.form-group input:disabled{background:#f5f5f5;color:#666}.auth-error{background:#fee;color:#c00;padding:12px;border-radius:8px;font-size:.9rem}.auth-message{background:#efe;color:#060;padding:12px;border-radius:8px;font-size:.9rem}.auth-button{padding:14px 24px;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;background:var(--region-1);color:#fff;transition:transform .1s ease,opacity .2s ease}.auth-button:hover{transform:translateY(-2px)}.auth-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-switch{text-align:center;margin-top:24px;color:#666}.auth-switch-button{background:none;border:none;color:var(--region-1);font-weight:600;cursor:pointer;font-size:inherit}.auth-switch-button:hover{text-decoration:underline}.profile-button{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:#ffffff1a;cursor:pointer;overflow:hidden;transition:border-color .2s ease}.profile-button:hover{border-color:#fff9}.profile-button img{width:100%;height:100%;object-fit:cover}.profile-button .avatar-placeholder{display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.2rem;font-weight:600;color:#fff}.profile-modal{background:#fff;padding:40px;border-radius:16px;width:100%;max-width:400px;position:relative;animation:modal-pop .3s ease}.profile-modal h2{text-align:center;margin:0 0 24px;color:var(--text-dark)}.profile-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;width:32px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%}.profile-close:hover{background:#f0f0f0}.avatar-section{display:flex;justify-content:center;margin-bottom:24px}.avatar{width:100px;height:100px;border-radius:50%;background:var(--region-1);cursor:pointer;overflow:hidden;position:relative}.avatar img{width:100%;height:100%;object-fit:cover}.avatar .avatar-placeholder{display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:2.5rem;font-weight:600;color:#fff}.avatar-overlay{position:absolute;bottom:0;left:0;right:0;background:#0009;color:#fff;font-size:.75rem;padding:6px;text-align:center;opacity:0;transition:opacity .2s ease}.avatar:hover .avatar-overlay{opacity:1}.profile-form{display:flex;flex-direction:column;gap:16px}.sign-out-button{padding:12px 24px;font-size:1rem;font-weight:600;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;background:#fff;color:#666;transition:border-color .2s ease,color .2s ease}.sign-out-button:hover{border-color:#c00;color:#c00}.puzzle-id{background:#ffffff1a;padding:4px 12px;border-radius:12px;font-size:.85rem;color:#ffffffb3;margin-top:8px}.instructions{margin:12px 0 0;font-size:.85rem;color:#fff9;max-width:320px;line-height:1.4}.leaderboard-button{background:#ffffff1a;border:none;padding:8px 16px;border-radius:20px;color:#fff;font-size:.9rem;cursor:pointer;transition:background .2s ease}.leaderboard-button:hover{background:#fff3}.leaderboard-modal{background:#fff;padding:32px;border-radius:16px;width:100%;max-width:400px;max-height:80vh;overflow-y:auto;position:relative;animation:modal-pop .3s ease}.leaderboard-modal h2{text-align:center;margin:0 0 4px;color:var(--text-dark)}.puzzle-id-label{text-align:center;color:#666;font-size:.9rem;margin:0 0 20px}.leaderboard-loading,.leaderboard-empty{text-align:center;color:#666;padding:40px 20px}.leaderboard-list{display:flex;flex-direction:column;gap:8px}.leaderboard-entry{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#f5f5f5;border-radius:10px;transition:background .2s ease}.leaderboard-entry.current-user{background:#e3f2fd;border:2px solid var(--region-7)}.leaderboard-entry .rank{min-width:32px;font-weight:600;color:#666;font-size:.9rem}.entry-avatar{width:36px;height:36px;border-radius:50%;background:var(--region-1);overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0}.entry-avatar img{width:100%;height:100%;object-fit:cover}.entry-avatar span{color:#fff;font-weight:600;font-size:1rem}.entry-name{flex:1;font-weight:500;color:var(--text-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-time{font-weight:600;color:var(--text-dark);font-variant-numeric:tabular-nums}.user-rank{text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid #eee;color:#666}@media(max-width:480px){:root{--cell-size: 11vw}.game-header h1{font-size:1.5rem}.game-stats{font-size:.9rem;gap:16px}.controls button{padding:10px 18px;font-size:.9rem}}