#root{margin:0;padding:0;width:100%;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;background-color:#f5f5f5}.app-container{margin:0;min-height:100vh;max-width:1000px;width:100%;position:relative;padding-bottom:60px;background:#fff;overflow-y:auto;box-shadow:0 0 10px #0000001a}.tab-bar{position:fixed;bottom:0;width:100%;max-width:1000px;height:60px;background:#fff;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #eee}.auth-form input{padding:12px;border:none;border-radius:8px;font-size:16px;background:#f5f5f5;color:#000}.register-button:focus{outline:none}.register-button:active{color:#0062cc}.admin-button{background:#f5f5f5;color:#000;border:none;padding:8px;border-radius:8px;font-size:12px;width:fit-content;align-self:center;margin-top:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}.admin-button:focus{outline:none}.admin-button:active{background:#e5e5ea}.collected-puzzles-container{padding:20px;color:#000}.collected-puzzles-content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:calc(100vh - 200px)}.collected-puzzles-content h2{margin-bottom:20px}.collected-puzzles-content p{color:#8e8e93}.collected-puzzles-list{width:100%;max-width:600px;display:flex;flex-direction:column;gap:15px}.collected-puzzle-item{display:flex;align-items:center;padding:15px;background:#f5f5f5;border-radius:10px;box-shadow:#8e8e93 1px 1px 10px}.collected-puzzle-item img{width:64px;height:64px;border-radius:8px;object-fit:cover}.puzzle-info{margin-left:15px;flex:1}.puzzle-info h3{margin:0 0 5px;font-size:16px}.puzzle-info .score{margin:0;color:#34c759;font-weight:700}.header{padding:16px 20px;border-bottom:1px solid #eee;text-align:center}.header h1{margin:0;font-size:20px;font-weight:600;color:#000}.leaderboard-container{padding:20px;color:#000}.back-button-container{margin-bottom:20px}.back-button:focus{color:#fff;outline:none}.leaderboard-content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:calc(100vh - 200px)}.leaderboard-content h2{margin-bottom:20px}.leaderboard-content p{color:#8e8e93}.error-message{color:#ff3b30;margin-top:10px}.leaderboard-list{width:100%;max-width:600px}.leaderboard-item{display:flex;justify-content:space-between;align-items:center;padding:15px;margin-bottom:10px;background:#f5f5f5;border-radius:10px;box-shadow:#8e8e93 1px 1px 10px}.leaderboard-item .position{font-weight:700;color:#007aff;min-width:40px}.leaderboard-item .username{flex:1;margin:0 15px}.leaderboard-item .score{font-weight:700;color:#34c759}.profile-container{padding:20px;color:#000}.profile-header{margin-bottom:40px;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:5px 20px;border-bottom:1px solid #eee;border-radius:10px;box-shadow:#8e8e93 1px 1px 10px}.name-container{position:relative;width:100%}.name-row{display:flex;align-items:center;width:100%}.profile-header h2{margin:0;text-align:left;font-size:24px}.profile-avatar img{width:80px;height:80px;border-radius:50%;margin-bottom:10px}.menu-item{margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #eee;border-radius:10px;box-shadow:#8e8e93 1px 1px 10px;color:#000;cursor:pointer;transition:background-color .2s ease}.menu-item:hover{background-color:#f5f5f5}.menu-item-left{display:flex;align-items:center;gap:12px}.menu-item img{width:24px;height:24px}.arrow{color:#8e8e93;font-size:24px;font-weight:700}.progress-container{display:flex;align-items:center;gap:12px}.progress-bar{width:100px;height:6px;background:#e5e5ea;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:#007aff;transition:width .3s ease}.progress-count{color:#8e8e93;font-size:14px;margin-left:auto}.menu-item:last-child .arrow{display:none}.company-signature{color:#888;font-size:12px;margin-top:2px;margin-bottom:5px;text-align:left;display:block;width:100%}.dropdown-container{display:inline-flex;margin-left:10px;align-items:center;position:relative}.dropdown-button{background:none;border:none;color:#8e8e93;font-size:12px;cursor:pointer;padding:6px;margin:0;display:flex;align-items:center;justify-content:center;outline:none;transition:transform .2s ease-out;border-radius:50%;background-color:#f2f2f7;width:24px;height:24px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.dropdown-button.active{color:#007aff;transform:rotate(-90deg);background-color:#e5e5ea}.dropdown-button:focus{outline:none;box-shadow:none}.dropdown-button:active{background-color:#e5e5ea}.logout-button{position:absolute;top:-6px;left:30px;background:#ff3b30;border:none;border-radius:8px;color:#fff;font-size:14px;cursor:pointer;padding:8px 16px;z-index:100;white-space:nowrap;display:flex;align-items:center;justify-content:center;min-height:36px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.logout-button.entering{animation:slideDown .2s ease-out forwards}.menu-item.progress-item{cursor:default}.menu-item.progress-item:hover{background-color:transparent}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;padding:24px;border-radius:16px;text-align:center;max-width:90%;width:320px;box-shadow:0 4px 12px #00000026}.modal-content h2{margin:0 0 16px;color:#000;font-size:24px}.modal-content p{margin:0 0 24px;color:#000;font-size:16px;line-height:1.5}.modal-button{border:none;padding:12px 24px;border-radius:8px;font-size:16px;cursor:pointer;width:100%;transition:background-color .2s ease}.modal-button.success{background:#007aff;color:#fff}.modal-button.success:active{background:#0062cc}.modal-button.failure{background:#ff3b30;color:#fff}.modal-button.failure:active{background:#d63029}html{overflow-y:hidden}.puzzle-game{display:flex;flex-direction:column;height:calc(100vh - 60px);background:#fff}.game-header{text-align:center}.game-header h2{margin:10px 10px 8px;color:#000;font-size:18px}.timer{font-size:32px;color:#007aff;font-weight:700}.puzzle-board{width:90%;max-width:500px;aspect-ratio:1;margin:10px auto;background:#ebedf0;border-radius:24px;position:relative;overflow:hidden}.puzzle-cell{position:absolute;width:16.666%;height:16.666%;display:flex;align-items:center;justify-content:center;left:calc((100% / 6) * (var(--col, 0)));top:calc((100% / 6) * (var(--row, 0)));-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.puzzle-cell img{position:absolute;width:120%;height:120%;top:-10%;left:-10%}.carousel-wrapper{position:relative;display:flex;align-items:center;margin-top:5vh;padding:0 20px;width:100%;box-sizing:border-box}.carousel-button{width:40px;height:100%;background:#ebedf0;border:none;border-radius:12px;font-size:24px;color:#8e8e93;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1}.carousel-button.left{margin-right:8px}.carousel-button.right{margin-left:8px}.pieces-carousel{flex:1;background:#ebedf0;border-radius:24px;padding:12px 0;overflow:hidden}.pieces-container{display:flex;gap:12px;padding:0 12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;width:100%;scroll-padding:0 12px}.pieces-container::-webkit-scrollbar{display:none}.puzzle-piece{flex:0 0 80px;width:80px;height:80px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.puzzle-piece:hover{transform:scale(1.05)}.puzzle-piece img{width:72px;height:72px;object-fit:contain}.ready-button{margin-top:5vh;margin-left:auto;margin-right:auto;width:60%;background:#007aff;color:#fff;border:none;padding:16px;border-radius:12px;font-size:16px}@media (max-width: 750px){.carousel-button{display:none}.pieces-carousel{margin:0}.carousel-wrapper{padding:0 10px}}@media (max-width: 400px){.puzzle-board{width:320px}}.puzzle-piece.selected{transform:scale(.9);box-shadow:inset 0 0 10px #0000004d;background:#e5e5ea;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.puzzle-cell.selectable{cursor:pointer}.puzzle-cell.selectable:hover{background:#e5e5ea80}.puzzle-cell:has(img){cursor:pointer;touch-action:none}.puzzle-cell:has(img):hover{opacity:.8}.puzzle-cell:has(img):active{opacity:.6}.puzzle-cell.touched{opacity:.6;transition:opacity .3s ease}.back-button-container{margin:20px}.back-button{background:#007aff;color:#fff;border:none;padding:8px 16px;font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:8px;transition:background-color .2s ease}.back-button:active,.back-button:hover{color:#fff;background:#0062cc}.puzzle-list{padding:20px;display:flex;flex-direction:column;align-items:center;height:calc(100vh - 120px);overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.puzzle-list::-webkit-scrollbar{display:none}.puzzle-item{margin-bottom:20px;padding:12px;background:#f5f5f5;display:flex;align-items:center;border-radius:12px;box-shadow:#8e8e93 1px 1px 10px;width:95%;max-width:800px}.puzzle-info{flex:1;padding-left:12px}.puzzle-info h3{margin:0 0 8px;font-size:16px;color:#000}.puzzle-item img{width:64px;height:64px;border-radius:8px;object-fit:cover}.collect-button{background:#007aff;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:14px}.collected-label{color:#000;margin-top:8px}.score{color:#34c759;margin-top:4px}.auth-container{padding:20px;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 53px)}.auth-form{width:95%;max-width:400px;display:flex;flex-direction:column;gap:16px;margin-top:40px}.auth-form h2{color:#000;text-align:center;margin-bottom:24px}.auth-form input,.auth-form select{padding:12px;border:none;border-radius:8px;font-size:16px;background:#f5f5f5;color:#000}.auth-form select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}.auth-form select:focus{outline:none;background-color:#e5e5ea}.login-button{background:#007aff;color:#fff;border:none;padding:12px;border-radius:8px;font-size:16px;cursor:pointer}.login-button:focus{outline:none}.login-button:active{background:#0062cc}.auth-button{background:transparent;color:#007aff;border:none;padding:8px;font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}.back-button:focus{outline:none}.back-button:active{color:#0062cc}.error-message{color:#ff3b30;margin-top:10px;text-align:center}.tab-bar{position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #eee;margin:0 auto}.tab-item{display:flex;flex-direction:column;align-items:center;color:#000}.tab-item.active{color:#007aff}.tab-item img{width:24px;height:24px;margin-bottom:4px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;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;padding:0;box-sizing:border-box;display:flex;place-items:center;min-width:320px;min-height:100vh}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}}*{box-sizing:border-box}