#sound-toggle{padding:8px;display:flex;align-items:center;justify-content:center;min-width:40px}#sound-toggle .sound-icon{width:20px;height:20px}#sound-toggle .sound-icon.hidden{display:none}.sort-puzzle #game-container{display:flex;justify-content:center;align-items:flex-start;padding:0;min-height:60vh;width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.sort-puzzle.immersive-mode #game-container{min-height:calc(100vh - 180px)}#sort-puzzle-container{width:100%;max-width:100%;margin:0 auto;padding:20px}.containers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,80px));gap:16px;padding:0;justify-content:center;width:fit-content;margin:0 auto;max-width:none;min-width:min-content}.puzzle-container{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;position:relative}.puzzle-container.hovering{transform:translateY(-4px)}.puzzle-container.hovering .container-tube{border-color:#94a3b8;box-shadow:0 4px 16px #94a3b84d}.puzzle-container.selected{transform:translateY(-8px) scale(1.05)}.puzzle-container.valid-target{transform:translateY(-4px)}.puzzle-container.valid-target .container-tube{border-color:#10b981;box-shadow:0 4px 16px #10b98166;animation:validPulse 1s ease-in-out infinite}@keyframes validPulse{0%,to{box-shadow:0 4px 16px #10b98166}50%{box-shadow:0 6px 24px #10b98199}}.puzzle-container.invalid-target{transform:translateY(-2px)}.puzzle-container.invalid-target .container-tube{border-color:#ef4444;box-shadow:0 4px 16px #ef44444d;animation:shake .4s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.container-tube{width:80px;height:200px;background:#1e293bf2;border:3px solid #475569;border-radius:8px 8px 12px 12px;display:flex;flex-direction:column-reverse;padding:4px;gap:2px;box-shadow:0 4px 12px #0000001a,inset 0 2px 8px #fffc;position:relative;overflow:hidden}.puzzle-container.selected .container-tube{border-color:#3b82f6;box-shadow:0 6px 20px #3b82f64d,inset 0 2px 8px #fffc;animation:pulse .5s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.color-segment{width:100%;height:44px;border-radius:6px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:inset 0 2px 6px #ffffff80,inset 0 -2px 6px #0003,0 3px 6px #00000026}.color-segment.empty{background:transparent;box-shadow:none}.color-segment:not(.empty){animation:fillUp .3s ease-out}.color-segment:not(.empty):before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 40%,transparent 50%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.25) 100%);pointer-events:none}.color-segment.pattern-striped{background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,.2) 3px,rgba(255,255,255,.2) 6px)}.color-segment.pattern-dotted{background-image:radial-gradient(circle,rgba(255,255,255,.3) 1.5px,transparent 1.5px);background-size:8px 8px}.color-segment.pattern-gradient:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:6px;background:linear-gradient(to bottom,rgba(255,255,255,.25) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.15) 100%);pointer-events:none}@keyframes fillUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.completion-stats{padding:20px 0;margin:20px 0}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(203,213,224,.5)}.stat-row:last-child{border-bottom:none}.stat-row .stat-label{font-weight:500;color:#374151}.stat-row .stat-value{font-weight:700;color:#000;font-size:1.25rem}.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}.modal-actions button{flex:1;max-width:200px}@media (max-width: 768px){.containers-grid{grid-template-columns:repeat(auto-fit,minmax(70px,70px));gap:12px;max-width:none;justify-content:flex-start}#sort-puzzle-container{padding:16px;width:auto;min-width:100%}.container-tube{width:70px;height:180px}.color-segment{height:40px}.sort-puzzle #game-container{min-height:50vh;justify-content:flex-start;padding:0 8px}}@media (max-width: 480px){.containers-grid{grid-template-columns:repeat(auto-fit,minmax(60px,60px));gap:10px;max-width:none;justify-content:flex-start}#sort-puzzle-container{padding:12px;width:auto;min-width:100%}.container-tube{width:60px;height:160px}.color-segment{height:36px}.stat-row .stat-value{font-size:1.1rem}.sort-puzzle #game-container{justify-content:flex-start;padding:0 4px}}@keyframes celebrate{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.1) rotate(-5deg)}75%{transform:scale(1.1) rotate(5deg)}}.puzzle-container.complete .container-tube{animation:celebrate .6s ease-in-out;border-color:#10b981;box-shadow:0 6px 20px #10b98166}.puzzle-container.loading .container-tube{opacity:.6;pointer-events:none}.floating-next-level{position:fixed;bottom:100px;left:50%;transform:translate(-50%);z-index:9999;font-size:1.2rem;padding:16px 32px;box-shadow:0 8px 32px #3b82f666;animation:floatIn .5s ease-out,pulse 2s ease-in-out infinite}@keyframes floatIn{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes pulse{0%,to{box-shadow:0 8px 32px #3b82f666}50%{box-shadow:0 8px 40px #3b82f699}}.level-selector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;max-width:600px;margin:0 auto;max-height:400px;overflow-y:auto;padding:10px}.level-tile{position:relative;width:60px;height:60px;border:2px solid #cbd5e0;border-radius:8px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease;font-weight:600}.level-tile:hover:not(.level-tile-locked){transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#3b82f6}.level-tile-number{font-size:1.25rem;color:#1f2937}.level-tile-completed{background:#10b981;border-color:#059669;color:#fff}.level-tile-completed .level-tile-number{color:#fff}.level-tile-completed .level-tile-check{position:absolute;top:2px;right:2px;font-size:.875rem;color:#fff}.level-tile-current{border-color:#3b82f6;border-width:3px;box-shadow:0 0 0 2px #3b82f633}.level-tile-locked{background:#f3f4f6;border-color:#e5e7eb;cursor:not-allowed;opacity:.5}.level-tile-locked .level-tile-number{color:#9ca3af}.level-tile-locked .level-tile-lock{position:absolute;font-size:1rem}.level-tile-continue,.level-tile-start{grid-column:span 2;width:auto;height:70px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff}.level-tile-start{background:linear-gradient(135deg,#f093fb,#f5576c)}.level-tile-continue:hover,.level-tile-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.level-tile-icon{font-size:1.5rem;margin-bottom:4px}.level-tile-label{font-size:.875rem;font-weight:700}.level-tile-sublabel{font-size:.75rem;opacity:.9}@media (prefers-color-scheme: dark){.level-tile{background:#1f2937;border-color:#374151}.level-tile-number{color:#f3f4f6}.level-tile-locked{background:#111827}}