:root{--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .4);--transition: .2s ease;--hover-lift: translateY(-2px);--color-primary: #0088ff;--color-primary-dark: #0066cc;--color-primary-light: #33a0ff;--color-primary-hover: #0077e6;--color-piece: #646cff;--color-piece-dark: #535bf2;--color-piece-light: #747bff;--color-piece-hover: #8388ff;--color-piece-anchor: #8b93ff;--color-gold: #FFD700;--color-gold-dark: #cc9900;--color-gold-border: #FFA500;--color-gold-accent: #ffbb00;--color-amber: #fbbf24;--color-amber-dark: #f59e0b;--color-amber-darker: #d97706;--color-amber-light: #fcd34d;--color-success: #22c55e;--color-success-dark: #16a34a;--color-success-completed: #2aa04d;--color-success-hover: #33cc66;--color-success-alt: #28a745;--color-success-teal: #20c997;--color-purple: #a855f7;--color-purple-dark: #9333ea;--color-purple-light: #c084fc;--color-purple-bright: #9933ff;--color-purple-glow: #bb55ff;--color-invalid: #FF6464;--color-streak: #ff6b35;--color-bg-body: #242424;--color-bg-dark: #1a1a1a;--color-bg-card: #1e1e1e;--color-bg-cell: #2a2a2a;--color-bg-darker: rgba(20, 20, 20, .6);--color-bg-overlay: rgba(0, 0, 0, .85);--color-border-dark: #333;--color-border: #444;--color-border-light: #555;--color-border-lighter: #666;--color-text: #ffffff;--color-text-light: rgba(255, 255, 255, .87);--color-text-secondary: #ccc;--color-text-muted: #aaa;--color-text-dim: #888;--color-gray-button: #6c757d;--color-gray-button-light: #7d858d;--color-gray-button-dark: #5a6268;--color-gray-button-hover-light: #8e959d;--color-lightning: #77aacc;--color-lightning-bright: #99bbdd;--color-lightning-flash: #aaccee;--color-disabled: #9ca3af;--color-disabled-dark: #6b7280}.back-button{padding:var(--spacing-3) var(--spacing-4);min-height:48px;min-width:48px;background:linear-gradient(135deg,var(--color-gray-button-light) 0%,var(--color-gray-button) 100%);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}.back-button svg{display:block;width:18px;height:18px}.back-button:hover{background:linear-gradient(135deg,var(--color-gray-button-hover-light) 0%,var(--color-gray-button-dark) 100%);transform:var(--hover-lift);box-shadow:var(--shadow-lg)}.header-info{display:flex;flex-direction:column;align-items:center;flex:1}.header-spacer{width:55px}.pagination-controls{display:flex;justify-content:center;align-items:center;gap:var(--spacing-3);margin-top:var(--spacing-3);padding:var(--spacing-2)}.page-button{padding:var(--spacing-3) var(--spacing-5);min-height:48px;font-size:14px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);font-weight:600;box-shadow:0 4px 6px #0066cc4d}.page-button:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary-hover) 100%);transform:var(--hover-lift);box-shadow:0 6px 12px #06c6}.page-button:disabled{background:linear-gradient(135deg,var(--color-border-light) 0%,var(--color-border) 100%);cursor:not-allowed;opacity:.5}.page-indicator{font-size:12px;color:var(--color-text-muted);font-weight:500;min-width:80px;text-align:center}.card-base{position:relative;background:#1e1e1ecc;border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-2);cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);box-sizing:border-box}.card-base:hover{transform:var(--hover-lift);box-shadow:var(--shadow-md);border-color:var(--color-primary)}.card-base.completed{background:#2843;border-color:var(--color-success-completed)}.card-base.completed:hover{border-color:var(--color-success-hover)}.card-base.locked{background:var(--color-bg-darker);border-color:var(--color-border-dark);cursor:not-allowed;opacity:.5}.card-base.locked:hover{transform:none;box-shadow:var(--shadow-sm)}@container root (min-width: 769px){.header-spacer{width:80px}.back-button{padding:var(--spacing-3) var(--spacing-5);min-height:44px;min-width:44px}.back-button svg{width:20px;height:20px}.pagination-controls{gap:15px;margin-top:var(--spacing-4);padding:var(--spacing-3)}.page-button{padding:var(--spacing-3) var(--spacing-6);min-height:44px;font-size:15px}.page-indicator{font-size:14px;min-width:100px}}@container root (aspect-ratio > 1.2) and (max-height: 600px){.header-spacer{width:40px}.back-button{padding:var(--spacing-2);min-height:44px;min-width:44px}.back-button svg{width:20px;height:20px}.pagination-controls{gap:var(--spacing-3);margin-top:var(--spacing-2);padding:var(--spacing-1)}.page-button{padding:6px 14px;min-height:44px;font-size:12px}.page-indicator{font-size:10px;min-width:60px}}:root{font-family:Russo One,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-text-light);background-color:var(--color-bg-body);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-piece);text-decoration:inherit}a:hover{color:var(--color-piece-dark)}html{height:100%}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100%;height:100%}@media(max-width:768px)and (orientation:landscape){html,body{height:100%;max-height:100%;width:100%;overflow-x:hidden;overflow-y:hidden;max-width:100%}body{display:flex;align-items:center;justify-content:center;margin:0;padding:0}#root{overflow-y:auto;overflow-x:hidden;width:100%;height:100%;max-height:100%}}@media(max-width:768px){html,body{height:100%;max-height:100%;width:100%;overflow-x:hidden;max-width:100vw}body{display:flex;align-items:center;justify-content:center;margin:0;padding:0}#root{overflow-y:auto;overflow-x:hidden;width:100%}}h1{font-size:3.2em;line-height:1.1;letter-spacing:.02em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-bg-dark);cursor:pointer;transition:border-color .25s;letter-spacing:.02em}button:hover{border-color:var(--color-piece)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{max-width:1280px;max-height:100%;margin:0 auto;padding:6px;text-align:center;width:100%;height:100%;box-sizing:border-box;overflow:auto;container-type:size;container-name:root}.app{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;min-height:100%;box-sizing:border-box;--piece-cell-size: 9px;--grid-cell-size: 40px;--grid-gap: 3px}.game-container{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:space-around;flex-wrap:wrap;width:100%;min-height:0;flex-shrink:1;flex:1}.game-play-area{display:flex;flex-direction:column-reverse;align-items:center;gap:.5rem;order:0}h1{font-size:1.1rem;margin:0;line-height:1.1;flex-shrink:0;letter-spacing:.02em}.instructions{font-size:.7rem;color:var(--color-text-dim);max-width:500px;margin:0;line-height:1.2;flex-shrink:0}.game-info-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.5rem}.win-message{color:var(--color-success);font-size:1.2rem;margin:0;font-weight:700;text-shadow:0 0 10px rgba(0,0,0,.8),0 0 20px rgba(0,0,0,.6);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.board{display:flex;flex-direction:column;gap:var(--grid-gap);padding:8px;background-color:var(--color-bg-dark);border-radius:10px;box-shadow:0 4px 6px #0000004d;flex-shrink:1;position:relative}.row{display:flex;gap:var(--grid-gap)}.cell{width:var(--grid-cell-size);height:var(--grid-cell-size);border:2px solid var(--color-border);border-radius:4px;transition:all .3s ease;background-color:var(--color-bg-cell)}.cell.on{background-color:var(--color-gold);box-shadow:0 0 20px #ffd70099;border-color:var(--color-gold-border)}.cell.off{background-color:var(--color-bg-cell);box-shadow:none}.cell.extended{background-color:var(--color-bg-dark);border-color:var(--color-border-dark);opacity:.5;box-shadow:none}.cell.preview-valid{background-color:#7ac6!important;border-color:var(--color-lightning);box-shadow:0 0 15px #77aacc80}.cell.preview-valid.preview-anchor{background-color:#77aaccb3!important;border-color:var(--color-lightning);box-shadow:0 0 20px #7acc}.cell.preview-invalid{background-color:#ff646466!important;border-color:var(--color-invalid);box-shadow:0 0 15px #ff646480}.cell.preview-invalid.preview-anchor{background-color:#ff6464b3!important;border-color:var(--color-invalid);box-shadow:0 0 20px #ff6464cc}.piece-bank{background-color:var(--color-bg-dark);padding:6px;border-radius:10px;box-shadow:0 4px 6px #0000004d;width:auto;max-width:100%;flex-shrink:0}.piece-bank h3{margin:0 0 .25rem;font-size:.7rem;color:var(--color-text-dim);text-align:center;letter-spacing:.02em}.pieces-grid{display:flex;flex-direction:row;gap:.3rem;align-items:center;justify-content:center}.piece-preview{cursor:grab;transition:all .3s ease;display:flex;justify-content:center;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;padding:2px}.piece-preview:not(.used):hover{transform:scale(1.15)}.piece-preview.used{opacity:.3;cursor:not-allowed}.piece-preview:active:not(.used){cursor:grabbing}.piece-cells{display:grid;gap:1px;position:relative;-webkit-user-drag:none}.piece-cell{background-color:var(--color-piece);border-radius:2px;box-shadow:0 0 3px #646cff80;width:var(--piece-cell-size);height:var(--piece-cell-size);position:relative;-webkit-user-drag:none}.button-container{display:flex;flex-direction:row;gap:.4rem;margin:0 0 1.5rem;padding-bottom:0;flex-shrink:0;order:1;justify-content:center}.reset-button,.undo-button{padding:12px 20px;min-height:48px;font-size:.95rem;font-weight:700;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.reset-button{background:linear-gradient(135deg,var(--color-piece-light) 0%,var(--color-piece) 100%);box-shadow:0 4px 6px #646cff4d}.reset-button:hover{background:linear-gradient(135deg,var(--color-piece-hover) 0%,var(--color-piece-dark) 100%);transform:translateY(-2px);box-shadow:0 6px 12px #646cff66}.reset-button:active{transform:translateY(0)}.undo-button{background:linear-gradient(135deg,var(--color-amber) 0%,var(--color-amber-dark) 100%);box-shadow:0 4px 6px #f59e0b4d}.undo-button:hover:not(:disabled){background:linear-gradient(135deg,var(--color-amber-light) 0%,var(--color-amber-darker) 100%);transform:translateY(-2px);box-shadow:0 6px 12px #f59e0b66}.undo-button:active:not(:disabled){transform:translateY(0)}.undo-button:disabled{background:linear-gradient(135deg,var(--color-disabled) 0%,var(--color-disabled-dark) 100%);cursor:not-allowed;opacity:.5}.next-button{padding:12px 20px;min-height:48px;font-size:.95rem;font-weight:700;background:linear-gradient(135deg,var(--color-success-alt) 0%,var(--color-success-teal) 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s;box-shadow:0 4px 6px #28a7454d}.next-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #28a74566}.complete-button{padding:12px 20px;min-height:48px;font-size:.95rem;font-weight:700;background:linear-gradient(135deg,var(--color-amber) 0%,var(--color-gold-border) 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s;box-shadow:0 4px 6px #ffc1074d;animation:pulse 2s infinite}.complete-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #ffc10766}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:800px;margin:0 auto 5px;padding:0;gap:10px;box-sizing:border-box}.game-title{flex:1;text-align:center;margin:0;font-size:1rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-button,.levels-button,.archive-button{padding:12px 16px;min-height:48px;font-size:18px;font-weight:600;background:linear-gradient(135deg,var(--color-gray-button-light) 0%,var(--color-gray-button) 100%);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;min-width:48px;flex-shrink:0;margin:0;box-shadow:0 4px 6px #6c757d4d}.menu-button svg,.levels-button svg,.archive-button svg{display:block;width:18px;height:18px}.menu-button:hover,.levels-button:hover,.archive-button:hover{background:linear-gradient(135deg,var(--color-gray-button-hover-light) 0%,var(--color-gray-button-dark) 100%);transform:translateY(-2px);box-shadow:0 6px 12px #6c757d66}.campaign-info{max-width:600px;margin:0 auto 10px}.campaign-info h2{font-size:1.1rem;margin:0 0 4px;color:var(--color-primary);letter-spacing:.02em}.level-hint{font-size:.8rem;color:var(--color-border-lighter);font-style:italic;margin:0}.ghost-piece{position:fixed;pointer-events:none;z-index:1000;left:var(--ghost-x);top:var(--ghost-y);transform:translate(calc(-1 * var(--com-x)),calc(-1 * var(--com-y)));opacity:0;animation:ghostAppear .15s ease-out forwards;-webkit-user-drag:none}.ghost-piece.snapping-back{animation:snapBack .2s ease-out forwards;transition:left .2s ease-out,top .2s ease-out;opacity:.8}@keyframes snapBack{0%{transform:translate(calc(-1 * var(--com-x)),calc(-1 * var(--com-y))) scale(1)}to{transform:translate(calc(-1 * var(--com-x)),calc(-1 * var(--com-y))) scale(var(--bank-scale))}}@keyframes ghostAppear{0%{opacity:0;transform:translate(calc(var(--start-x) - var(--ghost-x) - var(--com-x)),calc(var(--start-y) - var(--ghost-y) - var(--com-y))) scale(var(--bank-scale))}70%{opacity:.9;transform:translate(calc(-1 * var(--com-x)),calc(-1 * var(--com-y))) scale(1.1)}to{opacity:.8;transform:translate(calc(-1 * var(--com-x)),calc(-1 * var(--com-y))) scale(1)}}.ghost-piece-cells{display:grid;-webkit-user-drag:none}.ghost-piece-cell{background-color:var(--color-piece);border-radius:3px;box-shadow:0 0 10px #646cffcc;opacity:.7;-webkit-user-drag:none}.ghost-piece-cell.ghost-anchor{background-color:var(--color-piece-anchor);box-shadow:0 0 15px #8b93ff;opacity:.9}@container root (min-width: 768px){#root{padding:2rem}.app{gap:1.5rem}h1{font-size:2.5rem;margin-bottom:0;margin-top:0}.instructions{font-size:1.1rem}.game-container{gap:2rem;flex-direction:row;flex-wrap:wrap;justify-content:center}.board{padding:20px;gap:8px}.row{gap:8px}.cell{border-radius:8px}.piece-bank{padding:15px}.piece-bank h3{margin:0 0 .75rem;font-size:1rem}.pieces-grid{flex-direction:row;gap:.75rem}.piece-preview{padding:4px}.piece-cells{gap:2px}.button-container{flex-direction:column;gap:1rem;margin:1rem 0 2rem}.reset-button,.undo-button{padding:14px 32px;min-height:48px;font-size:1.1rem}.game-header{margin-bottom:10px;padding:0 30px;gap:15px}.game-title{font-size:1.5rem;margin-bottom:.5em}.menu-button,.levels-button,.archive-button{padding:12px 20px;min-height:44px;font-size:20px;min-width:44px;margin:0}.menu-button svg,.levels-button svg,.archive-button svg{width:20px;height:20px}.campaign-info h2{font-size:1.5rem;margin:0 0 8px}.level-hint{font-size:1rem}.next-button,.complete-button{padding:14px 32px;min-height:48px;font-size:1.1rem}.app{--piece-cell-size: 15px;--grid-cell-size: 55px;--grid-gap: 8px}}@container root (min-width: 1440px){#root{max-width:1600px;padding:3rem}.app{gap:2rem}.game-container{gap:3rem}}@container root (aspect-ratio > 1.2) and (max-height: 600px){#root{padding:.05rem .2rem}.app{gap:.05rem;--piece-cell-size: 8px;--grid-cell-size: 28px;--grid-gap: 2px}h1{font-size:.5rem;line-height:.9}.instructions{font-size:.38rem;line-height:.9}.game-container{flex-direction:row;gap:0;justify-content:space-evenly}.game-play-area{flex-direction:row;order:0;gap:1rem}.piece-bank{padding:6px}.piece-bank h3{margin:0 0 .4rem;font-size:.7rem}.pieces-grid{flex-direction:column;gap:.4rem}.piece-preview{padding:3px}.piece-cells{gap:2px}.board{padding:6px;gap:3px}.row{gap:3px}.cell{border-width:1px;border-radius:3px}.button-container{order:1;gap:.5rem;margin:0;padding-right:0;flex-direction:column;justify-content:center}.reset-button,.undo-button,.next-button,.complete-button{padding:8px 16px;min-height:44px;font-size:.8rem;min-width:100px}.game-header{margin-bottom:2px;padding:0 20px;gap:8px}.game-title{font-size:.75rem}.menu-button,.levels-button,.archive-button{padding:8px;min-height:44px;min-width:44px;font-size:.5rem}.menu-button svg,.levels-button svg,.archive-button svg{width:20px;height:20px}.campaign-info{margin-bottom:.5px}.campaign-info h2{font-size:.5rem;margin-bottom:.5px;margin-top:0;line-height:.9}.level-hint{font-size:.38rem;line-height:.9}}@container root (aspect-ratio > 1.2) and (min-height: 400px) and (max-height: 500px){.app{--grid-cell-size: 35px;--piece-cell-size: 10px}}@container root (aspect-ratio > 1.2) and (min-height: 500px) and (max-height: 600px){.app{--grid-cell-size: 42px;--piece-cell-size: 12px}}.lightning-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.lightning-svg{width:100%;height:100%}.lightning-path{fill:none;stroke:var(--color-lightning);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:draw-lightning forwards,flicker-lightning .3s ease-in-out infinite alternate,fade-out .3s 1.5s forwards}@keyframes draw-lightning{0%{stroke-dashoffset:var(--dash-length, 100);opacity:0}5%{opacity:1}to{stroke-dashoffset:0;opacity:1}}@keyframes flicker-lightning{0%{stroke:var(--color-lightning-bright);stroke-width:2.5}50%{stroke:var(--color-lightning-flash);stroke-width:3}to{stroke:var(--color-lightning-bright);stroke-width:2.5}}.lightning-flash{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(170,220,255,.4) 0%,rgba(150,200,255,.2) 40%,transparent 70%);animation:flash-screen 1.2s linear forwards;pointer-events:none}@keyframes flash-screen{0%{opacity:0}20%{opacity:.3}40%{opacity:.35}70%{opacity:.1}to{opacity:0}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.mode-select{width:100%;max-width:900px;margin:0 auto;padding:0;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;justify-content:flex-start}.mode-select-header{margin-bottom:12px;flex-shrink:0}.mode-select-header h1{font-size:22px;margin:0 0 4px;color:var(--color-text);font-weight:700}.tetris-t{display:inline-block;height:1.4em;width:auto;vertical-align:-.15em;margin-right:.1em;filter:drop-shadow(0 0 8px rgba(100,108,255,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.5))}.tetris-l{color:var(--color-amber);text-shadow:0 0 10px rgba(251,191,36,.5),0 2px 4px rgba(0,0,0,.5);display:inline-block;padding:2px 4px;background:linear-gradient(135deg,#fbbf2433,#f59e0b1a);border-radius:4px}.tagline{font-size:11px;color:var(--color-text-muted);margin:0}.mode-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px;width:100%;max-width:800px;margin-left:auto;margin-right:auto;box-sizing:border-box;flex-shrink:0}.mode-card{background:#1e1e1ecc;border:2px solid var(--color-border);border-radius:12px;padding:14px 12px;cursor:pointer;transition:all .3s ease;position:relative;box-shadow:0 2px 8px #0006;box-sizing:border-box;min-height:auto;display:flex;flex-direction:column;justify-content:center}.mode-card:hover{transform:var(--hover-lift);box-shadow:var(--shadow-lg)}.mode-card.campaign{border-color:var(--color-primary-dark)}.mode-card.campaign:hover{border-color:var(--color-primary);background:#0066cc26}.mode-card.random{border-color:var(--color-success-dark)}.mode-card.random:hover{border-color:var(--color-success-completed);background:#22884426}.mode-card.daily{border-color:var(--color-gold-dark);display:flex;flex-direction:column;padding:0}.mode-card.daily:hover{border-color:var(--color-gold-accent);background:#cc990026}.daily-main{padding:14px 12px 12px;cursor:pointer;flex:1}.archive-link{padding:12px;min-height:48px;background:#ffbb001a;border:none;border-top:1px solid rgba(255,187,0,.2);color:var(--color-gold-accent);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease;border-radius:0 0 10px 10px}.archive-link:hover{background:#fb03;color:var(--color-gold)}.mode-card h2{font-size:22px;margin:0 0 8px;color:var(--color-text);font-weight:700;letter-spacing:-.5px}.mode-card p{font-size:12px;color:var(--color-text-muted);line-height:1.4;margin:0}.progress-info{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.progress-bar{width:100%;height:5px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin-bottom:5px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);transition:width .3s ease;border-radius:3px}.progress-text{font-size:12px;color:#bbb;font-weight:600}.new-badge{margin-top:10px;padding:6px 12px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;border-radius:12px;font-size:12px;font-weight:600;display:inline-block}.daily-puzzle-preview{background:#1e1e1ecc;border:3px solid var(--color-gold-dark);border-radius:16px;padding:20px 16px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #00000080;margin-bottom:20px;flex-shrink:0;text-align:center}.daily-puzzle-preview:hover{transform:var(--hover-lift);box-shadow:var(--shadow-lg);border-color:var(--color-gold-accent);background:#cc990026}.daily-header{position:relative;display:flex;justify-content:center;align-items:center}.daily-puzzle-preview h2{font-size:24px;margin:0;color:var(--color-text);font-weight:700}.completion-badge{position:absolute;right:0;background:linear-gradient(135deg,var(--color-success) 0%,var(--color-success-dark) 100%);color:#fff;font-size:18px;font-weight:900;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px #22c55e99,inset 0 0 8px #ffffff4d}.completion-badge.star{background:linear-gradient(135deg,var(--color-gold-accent) 0%,var(--color-gold-dark) 100%);box-shadow:0 0 12px #fb09,inset 0 0 8px #ffffff4d}.completion-badge.check{background:linear-gradient(135deg,var(--color-purple) 0%,var(--color-purple-dark) 100%);box-shadow:0 0 12px #a855f799,inset 0 0 8px #ffffff4d}.daily-date{font-size:12px;color:var(--color-gold-accent);margin:0 0 8px;font-weight:600}.daily-streak{font-size:11px;color:var(--color-streak);margin:0 0 16px;font-weight:600}.daily-board-preview{display:inline-block;background:#0000004d;padding:8px;border-radius:8px;border:2px solid rgba(255,187,0,.3)}.preview-row{display:flex;gap:3px}.preview-row:not(:last-child){margin-bottom:3px}.preview-cell{width:24px;height:24px;border-radius:4px;transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}.preview-cell.on{background:linear-gradient(135deg,var(--color-gold) 0%,var(--color-gold-accent) 100%);box-shadow:0 0 10px #ffd70066,inset 0 0 8px #ffffff4d;border-color:#ffd70080}.preview-cell.off{background:linear-gradient(135deg,var(--color-bg-dark) 0%,var(--color-bg-cell) 100%);box-shadow:inset 0 0 4px #00000080;border-color:#ffffff0d}.play-prompt{margin:12px 0 0;font-size:14px;color:var(--color-gold-accent);font-weight:600}.secondary-nav{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;flex-shrink:0}.nav-button{flex:1;background:#1e1e1ecc;border:2px solid var(--color-border);border-radius:10px;padding:14px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #0000004d;text-align:center;display:flex;flex-direction:column}.nav-button:hover{transform:translateY(-2px);box-shadow:0 4px 10px #0006}.campaign-button{border-color:var(--color-primary-dark)}.campaign-button:hover{border-color:var(--color-primary);background:#0066cc26}.campaign-content{display:flex;flex-direction:column;gap:6px;width:100%}.campaign-progress-bar{width:100%;height:6px;background:#06c3;border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 3px #0000004d}.campaign-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);transition:width .5s ease;border-radius:4px;box-shadow:0 0 8px #08f9,inset 0 0 4px #ffffff4d}.button-label{font-size:20px;font-weight:700;color:var(--color-text);display:block}.button-detail{font-size:13px;color:var(--color-text-muted);display:block}.instructions-footer{background:#1e1e1e99;border:2px solid var(--color-border);border-radius:10px;padding:10px;margin-top:auto;flex-shrink:0}.instructions-footer h3{margin:0 0 4px;color:var(--color-text);font-size:12px}.instructions-footer p{margin:0;color:var(--color-text-muted);line-height:1.4;font-size:10px}.kofi-link{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:var(--color-text-muted)}.kofi-link a{color:var(--color-gold-accent);text-decoration:none;font-weight:600;transition:all .2s ease}.kofi-link a:hover{color:var(--color-gold);text-shadow:0 0 8px rgba(255,187,0,.4)}.install-link{margin-top:6px;font-size:10px}.install-link-button{background:none;border:none;color:var(--color-text-dim);cursor:pointer;padding:0;font-size:10px;text-decoration:underline;text-decoration-style:dotted;transition:all .2s ease}.install-link-button:hover{color:#bbb;text-shadow:0 0 4px rgba(255,255,255,.2)}@container root (min-width: 769px){.mode-select{padding:0;min-height:100%;justify-content:center}.mode-select-header{margin-bottom:15px}.mode-select-header h1{font-size:36px;margin-bottom:8px}.tagline{font-size:14px}.mode-grid{grid-template-columns:repeat(3,1fr);gap:24px}.mode-card{padding:28px 20px;min-height:180px}.mode-card h2{font-size:28px;margin-bottom:10px}.mode-card p{font-size:13px}.daily-puzzle-preview{padding:20px;margin-bottom:15px}.daily-puzzle-preview h2{font-size:28px}.completion-badge{width:36px;height:36px;font-size:20px}.preview-cell{width:32px;height:32px}.preview-row{gap:4px}.preview-row:not(:last-child){margin-bottom:4px}.daily-board-preview{padding:12px}.daily-date{font-size:14px}.daily-streak{font-size:13px}.play-prompt{font-size:16px}.secondary-nav{flex-direction:row;gap:12px;margin-bottom:15px}.nav-button{padding:16px}.campaign-content{gap:8px}.campaign-progress-bar{height:8px}.button-label{font-size:24px}.button-detail{font-size:14px}.instructions-footer{padding:12px 15px}.instructions-footer h3{font-size:16px;margin-bottom:8px}.instructions-footer p{font-size:12px;line-height:1.5}.kofi-link{font-size:13px;margin-top:12px;padding-top:12px}.install-link{font-size:12px;margin-top:8px}.install-link-button{font-size:12px}}@container root (aspect-ratio > 1.2) and (max-height: 600px){.mode-select{padding:0;min-height:100%;justify-content:flex-start;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:6px 8px}.mode-select-header{grid-column:1 / -1;grid-row:1;margin-bottom:4px}.mode-select-header h1{font-size:16px;margin-bottom:0}.tagline{font-size:9px}.daily-puzzle-preview{grid-column:1;grid-row:2;padding:8px;margin-bottom:0;display:flex;flex-direction:column;align-items:center;gap:4px}.daily-puzzle-preview h2{font-size:12px}.completion-badge{width:20px;height:20px;font-size:12px;position:static;margin-left:6px}.daily-date{font-size:10px;margin:0;display:none}.daily-streak{font-size:9px;margin:0}.daily-board-preview{padding:3px}.preview-cell{width:12px;height:12px}.preview-row{gap:2px}.preview-row:not(:last-child){margin-bottom:2px}.play-prompt{font-size:10px;margin:0}.secondary-nav{grid-column:2;grid-row:2;margin-bottom:0;flex-direction:column;gap:6px}.nav-button{padding:6px 10px}.campaign-content{gap:4px}.campaign-progress-bar{height:4px}.button-label{font-size:14px}.button-detail{font-size:10px}.instructions-footer{grid-column:1 / -1;grid-row:3;align-self:end;padding:6px 8px;margin-top:6px}.instructions-footer h3{font-size:10px;margin-bottom:2px}.instructions-footer p{font-size:8px;line-height:1.3}.kofi-link{font-size:9px;margin-top:4px;padding-top:4px}.install-link{font-size:8px;margin-top:3px}.install-link-button{font-size:8px}}.world-select{width:100%;max-width:1200px;margin:0 auto;padding:0;box-sizing:border-box;display:flex;flex-direction:column;height:100%}.world-select-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:15px;flex-shrink:0}.world-select-header h1{margin:0;color:var(--color-text);font-size:18px}.level-progress{font-size:12px;color:var(--color-primary);font-weight:600;margin-top:2px}.world-grid-container{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%}.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:4px 0 0;width:100%;box-sizing:border-box}.world-card{position:relative;background:#1e1e1ecc;border:3px solid var(--color-border);border-radius:12px;padding:12px;cursor:pointer;transition:all .3s ease;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 10px #0006;box-sizing:border-box}.world-card.unlocked:hover{transform:var(--hover-lift);box-shadow:var(--shadow-lg);border-color:var(--color-primary);z-index:1}.world-card.completed{background:#2843;border-color:var(--color-success-completed)}.world-card.completed:hover{border-color:var(--color-success-hover)}.world-card.locked{background:var(--color-bg-darker);border-color:var(--color-border-dark);cursor:not-allowed;opacity:.5}.world-card.locked:hover{transform:none;box-shadow:0 3px 10px #0006}.world-name{font-size:18px;font-weight:700;color:var(--color-text);margin-bottom:8px;text-align:center}.world-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:4px;gap:4px}.unlock-hint{font-size:10px;color:var(--color-primary);font-weight:500;line-height:1.2;max-width:140px;margin-top:2px}.world-progress-info{width:100%;margin-top:12px}.world-progress-bar{width:100%;height:6px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:6px}.world-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary));transition:width .3s ease}.world-card.completed .world-progress-fill{background:linear-gradient(90deg,var(--color-success-completed),var(--color-success-hover))}.world-progress-text{text-align:center;font-size:11px;color:var(--color-text-muted);font-weight:500}.world-checkmark{position:absolute;top:8px;right:8px;background:var(--color-success-completed);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}@container root (min-width: 769px){.world-select{padding:0}.world-select-header{margin-bottom:20px}.world-select-header h1{font-size:24px}.level-progress{font-size:14px}.world-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.world-card{padding:16px;min-height:150px}.world-name{font-size:24px;margin-bottom:12px}.unlock-hint{font-size:11px;max-width:180px;line-height:1.3}.world-progress-bar{height:8px}.world-progress-text{font-size:13px}.world-checkmark{width:32px;height:32px;font-size:18px;top:12px;right:12px}}@container root (aspect-ratio > 1.2) and (max-height: 650px){.world-select{padding:0}.world-select-header{margin-bottom:6px;gap:8px}.world-select-header h1{font-size:14px}.level-progress{font-size:10px;margin-top:0}.world-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}.world-card{padding:6px;min-height:80px}.world-name{font-size:13px;margin-bottom:4px}.unlock-hint{font-size:8px;max-width:85px;line-height:1.1;margin-top:0}.world-locked{gap:3px;margin-top:3px}.world-progress-info{margin-top:6px}.world-progress-bar{height:4px;margin-bottom:3px}.world-progress-text{font-size:9px}.world-checkmark{width:18px;height:18px;font-size:12px;top:4px;right:4px}}.lock-icon-svg{display:inline-block;vertical-align:middle;opacity:.8}.lock-body{fill:var(--color-bg-dark);stroke:var(--color-primary);stroke-width:1.5}.lock-shackle{fill:none;stroke:var(--color-primary)}.lock-keyhole{fill:var(--color-primary)}.world-card:hover .lock-icon-svg,.level-button:hover .lock-icon-svg{opacity:1}@keyframes lock-pulse{0%,to{opacity:.8}50%{opacity:.6}}.world-locked .lock-icon-svg,.level-locked .lock-icon-svg{animation:lock-pulse 2s ease-in-out infinite}.level-select{width:100%;max-width:1200px;margin:0 auto;padding:0;box-sizing:border-box}.level-select-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:15px}.level-select-header h1{margin:0;color:var(--color-text);font-size:16px}.level-progress{font-size:11px;color:var(--color-primary);font-weight:600;margin-top:2px}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0;width:100%;box-sizing:border-box;margin-bottom:15px}.level-card{position:relative;background:#1e1e1ecc;border:2px solid var(--color-border);border-radius:10px;padding:8px;cursor:pointer;transition:all .3s ease;min-height:100px;display:flex;flex-direction:column;box-shadow:0 2px 6px #0006;box-sizing:border-box}.level-card.unlocked:hover{transform:var(--hover-lift);box-shadow:var(--shadow-md);border-color:var(--color-primary)}.level-card.completed{background:#2843;border-color:var(--color-success-completed)}.level-card.completed:hover{border-color:var(--color-success-hover)}.level-card.locked{background:var(--color-bg-darker);border-color:var(--color-border-dark);cursor:not-allowed;opacity:.5}.level-card.locked:hover{transform:none;box-shadow:0 2px 6px #0006}.level-number{position:absolute;top:5px;right:5px;background:var(--color-primary-dark);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px}.level-card.completed .level-number{background:var(--color-success-completed)}.level-card.locked .level-number{background:var(--color-border-light)}.level-title{font-size:11px;font-weight:700;margin-bottom:3px;color:var(--color-text);padding-right:28px}.level-description{font-size:9px;color:var(--color-text-muted);margin-bottom:6px;flex-grow:1;line-height:1.2}.level-locked{display:flex;align-items:center;justify-content:center;margin-top:8px}.level-completed{margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.stars{display:flex;justify-content:center;gap:1px;margin-bottom:4px}.star{font-size:12px;color:var(--color-border)}.star.filled{color:var(--color-gold-accent)}.best-moves{text-align:center;font-size:9px;color:var(--color-text-muted);font-weight:500}.level-info{margin-top:auto;padding-top:6px;display:flex;justify-content:center;align-items:center}.piece-count{font-size:9px;color:var(--color-text-muted);background:#ffffff0d;padding:2px 6px;border-radius:10px;font-weight:500}.checkmark{color:var(--color-success-completed);font-size:18px;font-weight:700}@container root (min-width: 769px){.level-select{padding:0}.level-select-header{margin-bottom:15px}.level-select-header h1{font-size:24px}.level-progress{font-size:14px}.level-grid{grid-template-columns:repeat(4,1fr);gap:12px}.level-card{padding:12px;min-height:140px}.level-number{width:28px;height:28px;font-size:13px;top:8px;right:8px}.level-title{font-size:15px;margin-bottom:6px;padding-right:36px}.level-description{font-size:12px;line-height:1.3;margin-bottom:8px}.stars{gap:3px}.star{font-size:16px}.best-moves{font-size:11px}.piece-count{font-size:11px;padding:3px 10px}}@container root (aspect-ratio > 1.2) and (max-height: 600px){.level-select{padding:0}.level-select-header{margin-bottom:4px;gap:8px}.level-select-header h1{font-size:14px}.level-progress{font-size:10px;margin-top:0}.level-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:6px;margin-bottom:6px}.level-card{padding:5px;min-height:70px}.level-title{font-size:10px;margin-bottom:2px;padding-right:22px}.level-description{font-size:8px;line-height:1.1;margin-bottom:4px}.level-number{width:16px;height:16px;font-size:8px;top:3px;right:3px}.level-locked{margin-top:4px}.level-completed{padding-top:4px}.stars{gap:1px;margin-bottom:2px}.star{font-size:10px}.best-moves{font-size:7px}.level-info{padding-top:3px}.piece-count{font-size:7px;padding:2px 5px}.checkmark{font-size:14px}}.daily-archive{width:100%;max-width:1200px;margin:0 auto;padding:0;box-sizing:border-box;display:flex;flex-direction:column;height:100%}.archive-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:15px}.archive-header h1{margin:0;color:var(--color-text);font-size:24px}.archive-stats{display:flex;gap:15px;align-items:center;margin-top:2px}.archive-progress{font-size:14px;color:var(--color-gold-accent);font-weight:600}.streak-display{font-size:14px;color:var(--color-streak);font-weight:600}.dates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;width:100%;box-sizing:border-box;margin-bottom:15px;flex:1;align-content:start}.date-card{position:relative;background:#1e1e1ecc;border:2px solid var(--color-border);border-radius:10px;padding:14px;cursor:pointer;transition:all .3s ease;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 6px #0006;box-sizing:border-box}.date-card:hover{transform:var(--hover-lift);box-shadow:var(--shadow-md);border-color:var(--color-gold-accent)}.date-card.completed{background:#c903;border-color:var(--color-gold-accent)}.date-card.completed:hover{border-color:var(--color-gold)}.date-card.same-day{background:#c903;border-color:var(--color-gold-accent)}.date-card.same-day:hover{border-color:var(--color-gold)}.date-card.solved-later{background:#a855f71a;border-color:var(--color-purple)}.date-card.solved-later:hover{border-color:var(--color-purple-light)}.date-day{font-size:11px;color:var(--color-text-dim);text-transform:uppercase;font-weight:600;margin-bottom:6px}.date-display{font-size:14px;color:var(--color-text);font-weight:600;text-align:center}.completed-check{position:absolute;top:8px;right:8px}.completed-check .checkmark{font-size:16px;font-weight:700}.completed-check .checkmark.star{color:var(--color-gold-accent)}.completed-check .checkmark.check{color:var(--color-purple)}@container root (max-width: 768px){.daily-archive{padding:0;max-width:100%;height:100%}.archive-header{margin-bottom:8px}.archive-header h1{font-size:16px}.archive-stats{gap:10px}.archive-progress,.streak-display{font-size:11px}.dates-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:8px}.date-card{padding:10px;min-height:70px}.date-day{font-size:9px;margin-bottom:4px}.date-display{font-size:11px}.completed-check .checkmark,.completed-check .checkmark.star,.completed-check .checkmark.check{font-size:14px}}@container root (max-width: 480px){.daily-archive{padding:0;height:100%}.archive-header{gap:8px;margin-bottom:6px}.archive-header h1{font-size:14px}.archive-stats{gap:8px}.archive-progress,.streak-display{font-size:10px}.dates-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}.date-card{padding:8px;min-height:65px}.date-day{font-size:8px}.date-display{font-size:10px}.completed-check .checkmark,.completed-check .checkmark.star,.completed-check .checkmark.check{font-size:12px}}@container root (aspect-ratio > 1.2) and (max-height: 600px){.daily-archive{padding:0}.archive-header{margin-bottom:4px;gap:8px}.archive-header h1{font-size:14px}.archive-stats{gap:8px;margin-top:0}.archive-progress,.streak-display{font-size:10px}.dates-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin-bottom:6px}.date-card{padding:6px;min-height:50px}.date-day{font-size:8px;margin-bottom:2px}.date-display{font-size:10px}.completed-check{top:4px;right:4px}.completed-check .checkmark,.completed-check .checkmark.star,.completed-check .checkmark.check{font-size:10px}}.world-unlock-overlay{position:fixed;inset:0;background:var(--color-bg-overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.world-unlock-modal{background:linear-gradient(135deg,#1e1e1ef2,#141414f2);border:3px solid var(--color-primary);border-radius:16px;padding:32px;max-width:500px;width:100%;box-shadow:0 8px 32px #0088ff4d,0 0 80px #08f3;animation:slideUp .3s ease;text-align:center}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.unlock-header h2{font-size:32px;margin:0 0 20px;color:var(--color-text);font-weight:700;text-shadow:0 2px 8px rgba(0,136,255,.5)}.unlock-content{margin-bottom:24px}.unlock-message{font-size:15px;color:var(--color-text-secondary);margin:0 0 16px;text-align:center}.unlock-links{display:flex;justify-content:center;align-items:center;gap:20px}.unlock-link{display:inline-flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:var(--color-text);text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;transition:all .2s ease;cursor:pointer}.unlock-link:hover{background:#ffffff1a;border-color:#ffffff40;transform:translateY(-2px)}.close-button{width:100%;background:#08f3;border:2px solid var(--color-primary);border-radius:8px;color:var(--color-text);font-size:16px;font-weight:600;padding:14px;cursor:pointer;transition:all .3s ease}.close-button:hover{background:#0088ff4d;transform:translateY(-2px);box-shadow:0 4px 12px #08f6}@media(max-width:768px){.world-unlock-modal{padding:24px}.unlock-header h2{font-size:26px}.unlock-message{font-size:14px;margin-bottom:14px}.unlock-links{gap:16px}.unlock-link{font-size:13px;padding:7px 12px}.close-button{font-size:14px;padding:12px}}@media(max-width:480px){.world-unlock-overlay{padding:12px}.world-unlock-modal{padding:20px}.unlock-header h2{font-size:22px;margin-bottom:16px}.unlock-message{font-size:13px;margin-bottom:12px}.unlock-links{gap:12px}.unlock-link{font-size:12px;padding:6px 10px}}.editor-page{position:fixed;inset:0;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;color:#fff;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:9999}.editor-header{position:sticky;top:0;max-width:1400px;margin:0 auto 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);z-index:100;padding:10px 0}.editor-header h1{margin:0;font-size:2rem}.editor-controls{display:flex;gap:10px;align-items:center}.world-name-input{padding:8px 12px;border-radius:8px;border:2px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;font-size:1rem;min-width:200px}.world-name-input::placeholder{color:#fff9}.editor-content{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 400px;gap:20px;flex:1;min-height:0}.editor-left,.editor-right{display:flex;flex-direction:column;gap:20px}.editor-section{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:20px;border:2px solid rgba(255,255,255,.2)}.editor-section h2{margin:0 0 15px;font-size:1.3rem;font-weight:600}.editor-board{display:inline-flex;flex-direction:column;gap:4px;background:#0000004d;padding:10px;border-radius:8px}.editor-board-row{display:flex;gap:4px}.editor-board-cell{width:50px;height:50px;border-radius:8px;cursor:pointer;transition:all .2s;border:2px solid rgba(255,255,255,.2)}.editor-board-cell.on{background:gold;box-shadow:0 0 15px #ffd70080}.editor-board-cell.off{background:#ffffff1a}.editor-board-cell.clickable{cursor:pointer}.editor-board-cell.clickable:hover{transform:scale(1.05);border-color:#ffffff80}.pieces-inventory{display:flex;flex-wrap:wrap;gap:10px;min-height:100px;background:#0003;padding:15px;border-radius:8px}.inventory-piece{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px;background:#ffffff1a;border-radius:8px;border:2px solid rgba(255,255,255,.2)}.inventory-piece.clickable{cursor:pointer;transition:all .2s}.inventory-piece.clickable:hover{background:#ff64644d;border-color:#ff646499;transform:scale(1.05)}.empty-message{color:#ffffff80;font-style:italic;margin:auto}.editor-piece-bank{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px;max-height:600px;overflow-y:auto;-webkit-overflow-scrolling:touch}.editor-piece-bank-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;background:#ffffff1a;border-radius:8px;cursor:pointer;transition:all .2s;border:2px solid rgba(255,255,255,.2)}.editor-piece-bank-item:hover{background:#fff3;transform:scale(1.05);border-color:#fff6}.editor-piece-bank-item.selected{background:#4caf504d;border-color:#4caf50cc;box-shadow:0 0 10px #4caf5080}.piece-label{font-size:.9rem;font-weight:700;color:#fffc}.piece-preview{display:flex;flex-direction:column;gap:2px}.piece-preview-row{display:flex;gap:2px}.piece-preview-cell{width:12px;height:12px;border-radius:2px}.piece-preview-cell.filled{background:#4caf50;box-shadow:0 0 5px #4caf5080}.piece-preview-cell.empty{background:transparent}.action-buttons{display:flex;flex-wrap:wrap;gap:10px}.btn-primary,.btn-secondary{padding:10px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:2px solid rgba(255,255,255,.3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}.btn-secondary{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3)}.btn-secondary:hover:not(:disabled){background:#ffffff4d;transform:translateY(-2px)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.level-info{margin-top:10px;padding:10px;background:#0003;border-radius:8px}.level-info p{margin:5px 0;font-size:.9rem}.world-buttons{display:flex;flex-wrap:wrap;gap:8px}.world-buttons .btn-secondary{padding:8px 16px;font-size:.9rem}@media(max-width:1200px){.editor-content{grid-template-columns:1fr}.editor-right{order:-1}}@media(max-width:768px){.editor-page{padding:10px}.editor-header{flex-direction:column;align-items:stretch;position:sticky;top:0;background:linear-gradient(135deg,#667eea,#764ba2);z-index:10;padding-bottom:10px}.editor-controls{flex-direction:column}.world-name-input{width:100%}.editor-content{display:flex;flex-direction:column;gap:20px}.editor-board-cell{width:40px;height:40px}.editor-piece-bank{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));max-height:400px}}.editor-piece-bank::-webkit-scrollbar{width:8px}.editor-piece-bank::-webkit-scrollbar-track{background:#0003;border-radius:4px}.editor-piece-bank::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.editor-piece-bank::-webkit-scrollbar-thumb:hover{background:#fff6}.install-page{width:100%;max-width:500px;margin:0 auto;padding:20px 16px;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;justify-content:flex-start}.install-header{margin-bottom:24px;flex-shrink:0}.install-header h1{font-size:28px;margin:0 0 8px;color:var(--color-text);font-weight:700}.install-header .tetris-t{display:inline-block;height:1.4em;width:auto;vertical-align:-.15em;margin-right:.1em;filter:drop-shadow(0 0 8px rgba(100,108,255,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.5))}.install-header .tagline{font-size:12px;color:var(--color-text-muted);margin:0}.install-content{flex:1;display:flex;flex-direction:column;justify-content:center}.install-status{background:#1e1e1ecc;border:2px solid var(--color-border);border-radius:16px;padding:24px 20px;box-shadow:0 4px 12px #00000080}.install-status.success{border-color:var(--color-success)}.install-status.ready{border-color:var(--color-primary)}.install-status.ios{border-color:var(--color-purple)}.install-status.unsupported{border-color:var(--color-border-lighter)}.status-icon{font-size:48px;color:var(--color-success);margin-bottom:12px}.install-status h2{font-size:22px;margin:0 0 12px;color:var(--color-text);font-weight:700}.install-status p{font-size:14px;color:var(--color-text-muted);line-height:1.5;margin:0 0 16px}.install-status .tip{font-size:12px;color:var(--color-text-muted);font-style:italic}.app-icon-large{margin-bottom:16px}.app-icon-large img{width:96px;height:96px;border-radius:20px;box-shadow:0 4px 16px #0006,0 0 0 2px #ffffff1a}.benefits-list{list-style:none;padding:0;margin:0 0 20px;text-align:left}.benefits-list li{font-size:14px;color:var(--color-text-secondary);padding:8px 0 8px 28px;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}.benefits-list li:last-child{border-bottom:none}.benefits-list li:before{content:"✓";position:absolute;left:0;color:var(--color-success);font-weight:700;font-size:16px}.ios-steps{list-style:none;padding:0;margin:0 0 20px;text-align:left;counter-reset:step}.ios-steps li{font-size:14px;color:var(--color-text-secondary);padding:12px 0 12px 36px;position:relative;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;flex-wrap:wrap;gap:4px}.ios-steps li:last-child{border-bottom:none}.ios-steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;width:24px;height:24px;background:linear-gradient(135deg,var(--color-purple) 0%,var(--color-purple-dark) 100%);border-radius:50%;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}.ios-steps .step-icon{display:none}.share-icon{display:inline-block;margin-left:4px;font-size:16px;color:var(--color-primary)}.primary-button{width:100%;padding:16px 24px;font-size:18px;font-weight:700;color:var(--color-text);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #06c6;margin-bottom:12px}.primary-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #0066cc80}.primary-button:active:not(:disabled){transform:translateY(0)}.primary-button:disabled{opacity:.7;cursor:not-allowed}.primary-button.install-button{background:linear-gradient(135deg,var(--color-success-alt) 0%,var(--color-success-teal) 100%);box-shadow:0 4px 12px #28a7454d}.primary-button.install-button:hover:not(:disabled){box-shadow:0 6px 16px #28a74566}.secondary-button{width:100%;padding:12px 20px;font-size:14px;font-weight:600;color:var(--color-text-muted);background:transparent;border:2px solid var(--color-border);border-radius:10px;cursor:pointer;transition:all .3s ease}.secondary-button:hover{border-color:var(--color-border-lighter);color:var(--color-text-secondary);background:#ffffff0d}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.install-footer{margin-top:24px;flex-shrink:0}.back-link{background:none;border:none;color:var(--color-text-dim);font-size:14px;cursor:pointer;padding:8px 16px;transition:color .2s ease}.back-link:hover{color:var(--color-text-secondary)}@media(min-width:769px){.install-page{padding:40px 20px;justify-content:center}.install-header{margin-bottom:32px}.install-header h1{font-size:36px}.install-header .tagline{font-size:14px}.install-status{padding:32px}.install-status h2{font-size:28px}.install-status p{font-size:16px}.app-icon-large img{width:128px;height:128px;border-radius:28px}.benefits-list li,.ios-steps li{font-size:16px}.primary-button{font-size:20px;padding:18px 28px}.secondary-button{font-size:16px;padding:14px 24px}}