:root{--primary-color: #808080;--accent-color: #a0a0a0;--accent-color-rgb: 160, 160, 160;--bg-color: #333333;--text-color: #f5f5f5;--primary-color-rgb: 128, 128, 128;--secondary-color: #a0a0a0;--tile-color-1: #f5f5f5;--tile-color-2: #e0e0e0;--tile-color-3: #c0c0c0;--tile-color-4: #a0a0a0;--tile-color-5: #808080;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--bg-color)}h1{font-size:2.2em;line-height:1.1;margin:0 0 1rem;text-align:center;font-weight:300}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:var(--primary-color)}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}}#root{width:100%;height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.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}:root{--primary-color: #808080;--accent-color: #a0a0a0;--accent-color-rgb: 160, 160, 160;--bg-color: #333333;--text-color: #f5f5f5}body{background-color:var(--bg-color);color:var(--text-color)}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;position:relative;width:100%;height:100%;padding:2rem;overflow:hidden;background-color:var(--bg-color)}.game-info{display:flex;justify-content:space-between;width:100%;max-width:min(500px,90vw);margin-bottom:1rem;z-index:2}.score,.moves{font-size:1.2rem;font-weight:300}.board-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:6px;width:min(90vmin,90vh,500px);height:min(90vmin,90vh,500px);aspect-ratio:1/1;background-color:#ffffff0d;border-radius:8px;padding:10px;box-shadow:0 4px 20px #0003;z-index:1;margin:0 auto}.tile{border-radius:4px;cursor:grab;position:relative;transition:transform .15s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;touch-action:none;will-change:transform,opacity;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}.tile:before{content:"";display:block;padding-bottom:100%}.tile-content{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .3s ease}.tile:hover{transform:scale(1.05)}.tile.selected{transform:scale(1.1);box-shadow:0 0 8px 2px var(--primary-color);cursor:grabbing;z-index:5;animation:pulse-subtle 1s ease-in-out infinite}.tile.matched{animation:pulse .3s ease-in-out}.tile.removing{animation:fadeOut .3s ease-in-out forwards}.tile.dropping{animation:dropTile .3s cubic-bezier(.34,1.56,.64,1)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1) rotate(5deg)}to{opacity:0;transform:scale(.8) rotate(10deg)}}@keyframes dropTile{0%{transform:translateY(-100%);opacity:.7}70%{transform:translateY(10%);opacity:1}to{transform:translateY(0);opacity:1}}@keyframes pulse-subtle{0%{box-shadow:0 0 8px 2px var(--primary-color)}50%{box-shadow:0 0 12px 4px var(--primary-color)}to{box-shadow:0 0 8px 2px var(--primary-color)}}.controls{display:flex;gap:1rem;margin-top:1rem;z-index:2}.game-over{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.game-over-content{background-color:var(--bg-color);padding:2rem;border-radius:8px;text-align:center;max-width:400px;width:90%}.game-over h2{font-size:2rem;margin-bottom:1rem}.final-score{font-size:3rem;margin:1.5rem 0}.restart-btn{margin-top:1rem;background-color:var(--accent-color);color:var(--text-color);border:none;padding:.8rem 1.5rem;font-size:1.1rem;border-radius:4px;cursor:pointer;transition:all .2s}.restart-btn:hover{background-color:var(--primary-color);color:var(--bg-color)}.color-selector{position:absolute;top:1rem;left:1rem;right:auto;background-color:#ffffff0d;border-radius:8px;padding:12px;box-shadow:0 4px 12px #0003;z-index:10;width:200px}.color-selector-title{font-size:.9rem;font-weight:500;margin-bottom:8px;text-align:center}.color-schemes{display:flex;flex-direction:column;gap:8px}.scheme-button{display:flex;align-items:center;justify-content:space-between;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:6px 10px;cursor:pointer;transition:all .2s}.scheme-button:hover{background-color:#ffffff1a}.scheme-preview{display:flex;gap:3px}.color-preview{width:12px;height:12px;border-radius:2px}.scheme-name{font-size:.8rem;font-weight:300}@media (max-height: 700px){h1{font-size:1.8rem;margin-bottom:1rem}.game-info{margin-bottom:.5rem}.game-container{gap:1rem}.controls{margin-top:.5rem}}@media (max-width: 600px){.color-selector{width:160px;padding:8px}.scheme-name{font-size:.7rem}.color-preview{width:10px;height:10px}}.tile-drag-indicator{position:absolute;width:100%;height:100%;pointer-events:none}.drag-arrow{position:absolute;width:0;height:0;border-style:solid;opacity:.7;animation:arrow-pulse 1s ease-in-out infinite}.drag-arrow-up{top:-8px;left:50%;transform:translate(-50%);border-width:0 6px 8px 6px;border-color:transparent transparent var(--primary-color) transparent}.drag-arrow-right{top:50%;right:-8px;transform:translateY(-50%);border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--primary-color)}.drag-arrow-down{bottom:-8px;left:50%;transform:translate(-50%);border-width:8px 6px 0 6px;border-color:var(--primary-color) transparent transparent transparent}.drag-arrow-left{top:50%;left:-8px;transform:translateY(-50%);border-width:6px 8px 6px 0;border-color:transparent var(--primary-color) transparent transparent}@keyframes arrow-pulse{0%{opacity:.3}50%{opacity:.8}to{opacity:.3}}.drag-feedback{position:absolute;top:120px;left:50%;transform:translate(-50%);background-color:#000000b3;color:var(--text-color);padding:8px 16px;border-radius:20px;font-size:.9rem;z-index:20;pointer-events:none;animation:fade-in .3s ease-out;white-space:nowrap;text-align:center;box-shadow:0 4px 8px #0000004d;max-width:90%}@keyframes fade-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.drag-feedback.powerup-message{background-color:rgba(var(--primary-color-rgb),.8);font-weight:700;padding:10px 20px;font-size:1rem;animation:powerup-message .5s ease-out;border:2px solid rgba(255,255,255,.3);text-shadow:0 0 5px rgba(0,0,0,.5)}@keyframes powerup-message{0%{transform:translate(-50%) scale(.8);opacity:0}50%{transform:translate(-50%) scale(1.1);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}.drag-feedback.result-message{background-color:rgba(var(--accent-color-rgb),.8);font-weight:500;animation:points-message .5s ease-out}@keyframes points-message{0%{transform:translate(-50%) scale(.9);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}body.dragging{cursor:grabbing}.tile:hover:not(.selected){transform:scale(1.05);box-shadow:0 0 5px 1px #ffffff4d;transition:all .15s ease}body.dragging .tile:not(.selected):hover{transform:scale(1.08);box-shadow:0 0 8px 2px #ffffff80;transition:all .1s ease}@keyframes swap-right{0%{transform:translate(0) scale(1)}50%{transform:translate(50%) scale(1.1)}to{transform:translate(0) scale(1)}}@keyframes swap-left{0%{transform:translate(0) scale(1)}50%{transform:translate(-50%) scale(1.1)}to{transform:translate(0) scale(1)}}@keyframes swap-up{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-50%) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes swap-down{0%{transform:translateY(0) scale(1)}50%{transform:translateY(50%) scale(1.1)}to{transform:translateY(0) scale(1)}}.tile.swap-right{animation:swap-right .25s cubic-bezier(.34,1.56,.64,1);z-index:2}.tile.swap-left{animation:swap-left .25s cubic-bezier(.34,1.56,.64,1);z-index:2}.tile.swap-up{animation:swap-up .25s cubic-bezier(.34,1.56,.64,1);z-index:2}.tile.swap-down{animation:swap-down .25s cubic-bezier(.34,1.56,.64,1);z-index:2}@keyframes deny-animation{0%{transform:translate(0) scale(1)}20%{transform:translate(-10%) scale(1.05)}40%{transform:translate(10%) scale(1.05)}60%{transform:translate(-10%) scale(1.05)}80%{transform:translate(10%) scale(1.05)}to{transform:translate(0) scale(1)}}.tile.deny{animation:deny-animation .4s cubic-bezier(.36,.07,.19,.97);z-index:3}.tile.deny:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#f003;border-radius:4px;opacity:0;animation:deny-flash .4s ease-out;pointer-events:none}@keyframes deny-flash{0%{opacity:0}30%{opacity:.6}to{opacity:0}}.config-panel{position:absolute;top:1rem;right:1rem;background-color:#ffffff0d;border-radius:8px;padding:16px;box-shadow:0 4px 12px #0003;z-index:10;width:250px;color:var(--text-color)}.config-panel h3{font-size:1.2rem;font-weight:500;margin-top:0;margin-bottom:16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}.config-section{margin-bottom:20px}.config-section h4{font-size:1rem;font-weight:400;margin-top:0;margin-bottom:10px}.size-control{display:flex;align-items:center;gap:10px;margin-bottom:8px}.size-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#ffffff1a;border-radius:3px;outline:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary-color);cursor:pointer}.size-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:none}.size-value{font-size:.9rem;font-weight:500;min-width:40px;text-align:center}.size-note{font-size:.8rem;color:#fff9;margin:0;font-style:italic}.high-score,.current-score{display:flex;justify-content:space-between;margin-bottom:8px}.score-label{font-size:.9rem}.score-value{font-size:.9rem;font-weight:500}.new-record{color:var(--accent-color);font-size:.9rem;font-weight:500;text-align:center;margin-top:8px;animation:pulse-record 1.5s infinite}@keyframes pulse-record{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 1200px){.config-panel{position:relative;top:auto;right:auto;width:min(90%,400px);margin-top:1rem}}@media (max-width: 600px){.config-panel{padding:12px}.config-panel h3{font-size:1.1rem}.config-section h4{font-size:.9rem}}.new-record-message{color:var(--accent-color);margin:1rem 0;animation:pulse-record 1.5s infinite}.new-record-message p{margin:.5rem 0}.record-message{margin:1rem 0;color:#fffc}.record-message p{margin:.5rem 0}.drag-feedback.reorganizing{background-color:rgba(var(--accent-color-rgb),.8);font-weight:500;padding:10px 20px;animation:pulse-message 1.5s infinite}@keyframes pulse-message{0%{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.05)}to{transform:translate(-50%) scale(1)}}.fullscreen-control{margin-top:12px}.fullscreen-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem}.fullscreen-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:1px solid rgba(255,255,255,.3);border-radius:3px;background-color:#ffffff0d;cursor:pointer;position:relative}.fullscreen-checkbox:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.fullscreen-checkbox:checked:after{content:"";position:absolute;top:2px;left:5px;width:4px;height:8px;border:solid var(--bg-color);border-width:0 2px 2px 0;transform:rotate(45deg)}.fullscreen-checkbox:focus{outline:2px solid var(--primary-color);outline-offset:1px}.fullscreen-note{font-size:.8rem;color:#fff9;margin:8px 0 0 24px;font-style:italic}.board.fullscreen{width:98vw;height:95vh;max-width:none;max-height:none;gap:4px;padding:10px;transition:all .3s ease-in-out;box-shadow:0 8px 32px #0000004d;z-index:5;margin:0 auto}.board.fullscreen .tile{transition:transform .15s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,box-shadow .2s ease;min-width:0;min-height:0}.board.fullscreen .tile:hover{transform:scale(1.05);box-shadow:0 0 6px 1px #fff6}.board.fullscreen .tile.selected{transform:scale(1.08);box-shadow:0 0 8px 2px var(--primary-color)}.size-slider:disabled{opacity:.5;cursor:not-allowed}.size-slider:disabled::-webkit-slider-thumb{background:#ffffff4d;cursor:not-allowed}.size-slider:disabled::-moz-range-thumb{background:#ffffff4d;cursor:not-allowed}@media (max-width: 768px){.board.fullscreen{width:98vw;height:90vh;gap:3px;padding:6px}.game-container:has(.board.fullscreen) h1{font-size:1.3rem;margin-bottom:.3rem}.game-container:has(.board.fullscreen) .game-info{margin-bottom:.2rem}.game-container:has(.board.fullscreen) .controls{margin-top:.2rem}}.game-container:has(.board.fullscreen){gap:.5rem;padding:1rem}.board.fullscreen .drag-arrow{border-width:4px}.board.fullscreen .drag-arrow-up{top:-6px;border-width:0 4px 6px 4px}.board.fullscreen .drag-arrow-right{right:-6px;border-width:4px 0 4px 6px}.board.fullscreen .drag-arrow-down{bottom:-6px;border-width:6px 4px 0 4px}.board.fullscreen .drag-arrow-left{left:-6px;border-width:4px 6px 4px 0}.mode-selector{width:100%;max-width:800px;margin:0 auto;padding:20px;text-align:center}.mode-selector h2{font-size:1.8rem;margin-bottom:20px;color:#333}.mode-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.mode-card{background-color:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;padding:20px;width:200px;cursor:pointer;transition:all .3s ease;position:relative;box-shadow:0 2px 5px #0000001a}.mode-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a;border-color:silver}.mode-card.selected{border-color:gray;background-color:#e8e8e8;box-shadow:0 0 0 2px gray}.mode-card h3{font-size:1.4rem;margin-bottom:10px;color:#333}.mode-card p{font-size:.9rem;color:#666;margin-bottom:15px}.coming-soon{position:absolute;top:10px;right:10px;background-color:gray;color:#fff;font-size:.7rem;padding:3px 8px;border-radius:10px;opacity:.8}.game-modes-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}.start-game-btn{margin-top:30px;padding:12px 30px;background-color:gray;color:#fff;border:none;border-radius:5px;font-size:1.2rem;cursor:pointer;transition:all .3s ease}.start-game-btn:hover{background-color:#666;transform:scale(1.05)}.back-to-modes{position:absolute;top:20px;left:20px;padding:8px 15px;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.9rem;transition:all .3s ease;z-index:100}.back-to-modes:hover{background-color:#e0e0e0}@media (max-width: 768px){.mode-cards{flex-direction:column;align-items:center}.mode-card{width:80%;max-width:300px}.back-to-modes{top:10px;left:10px;padding:5px 10px;font-size:.8rem}}.powerup-line,.powerup-bomb,.powerup-color{position:absolute;width:60%;height:60%;display:flex;align-items:center;justify-content:center;pointer-events:none;top:20%;left:20%;z-index:1;transition:all .3s ease}.tile-content:has(.powerup-line),.tile-content:has(.powerup-bomb),.tile-content:has(.powerup-color){box-shadow:inset 0 0 10px 2px #ffffff4d;animation:powerup-glow 2s infinite alternate}@keyframes powerup-glow{0%{box-shadow:inset 0 0 10px 2px #ffffff4d}to{box-shadow:inset 0 0 15px 4px #ffffff80}}.powerup-line:before{content:"";position:absolute;background-color:#ffffffb3;border-radius:2px;transition:all .3s ease}.powerup-line.horizontal:before{width:70%;height:20%}.powerup-line.vertical:before{width:20%;height:70%}.powerup-bomb:before{content:"";position:absolute;width:60%;height:60%;background-color:#fff3;border:2px solid rgba(255,255,255,.7);border-radius:50%;transition:all .3s ease}.powerup-bomb:after{content:"";position:absolute;width:30%;height:30%;background-color:#ffffffb3;border-radius:50%;transition:all .3s ease}.powerup-color:before{content:"";position:absolute;width:60%;height:60%;background:radial-gradient(circle,#ffffffb3,#fff0 70%);border-radius:50%;animation:pulse-color 1.5s infinite}@keyframes pulse-color{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.1);opacity:.8}to{transform:scale(.8);opacity:.5}}@keyframes activate-line{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.8;box-shadow:0 0 20px 10px #ffffffb3}to{transform:scale(3);opacity:0}}@keyframes activate-bomb{0%{transform:scale(1);opacity:1}10%{transform:scale(1.2);opacity:.9}50%{transform:scale(1.5);opacity:.8;box-shadow:0 0 20px 10px #ffffffb3}to{transform:scale(3);opacity:0}}@keyframes activate-color{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.8;box-shadow:0 0 20px 10px #ffffffb3}to{transform:scale(3);opacity:0}}@keyframes tile-activate-flash{0%{background-color:#ffffff1a}50%{background-color:#ffffff80}to{background-color:#ffffff1a}}.tile.activating-line .powerup-line:before{animation:activate-line .7s forwards}.tile.activating-bomb .powerup-bomb:before,.tile.activating-bomb .powerup-bomb:after{animation:activate-bomb .7s forwards}.tile.activating-color .powerup-color:before{animation:activate-color .9s forwards}.tile.activating-line,.tile.activating-bomb,.tile.activating-color{position:relative}.tile.activating-line:after,.tile.activating-bomb:after,.tile.activating-color:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;background-color:#ffffff1a;animation:tile-activate-flash .7s ease-in-out;pointer-events:none;z-index:0}.tile.activating-line:before,.tile.activating-bomb:before,.tile.activating-color:before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background-color:#ffffffb3;transform:translate(-50%,-50%);animation:activation-wave .7s ease-out;pointer-events:none;z-index:2}@keyframes activation-wave{0%{width:10px;height:10px;opacity:1}to{width:200px;height:200px;opacity:0}}.tile[data-powerup-tip]:hover:before{content:attr(data-powerup-tip);position:absolute;bottom:120%;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:5px 10px;border-radius:4px;font-size:.7rem;white-space:nowrap;pointer-events:none;opacity:1;z-index:100}.tile-content:has(.powerup-line):after,.tile-content:has(.powerup-bomb):after,.tile-content:has(.powerup-color):after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 60%,rgba(255,255,255,.3) 70%,transparent 80%);opacity:0;transition:opacity .3s ease;pointer-events:none}.tile:hover .tile-content:has(.powerup-line):after,.tile:hover .tile-content:has(.powerup-bomb):after,.tile:hover .tile-content:has(.powerup-color):after{opacity:1;animation:activate-hint 1.5s infinite}@keyframes activate-hint{0%{opacity:.3}50%{opacity:.7}to{opacity:.3}}.powerup-activate-hint{position:absolute;top:-25px;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:3px 6px;border-radius:3px;font-size:.6rem;white-space:nowrap;opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:10}.tile.show-activate-hint .powerup-activate-hint{opacity:1;transform:translate(-50%) translateY(-5px)}@keyframes double-click-hint{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.tile.show-activate-hint .tile-content{animation:double-click-hint .8s infinite}.tile:has(.powerup-line),.tile:has(.powerup-bomb),.tile:has(.powerup-color){cursor:pointer}.tile:has(.powerup-line):hover,.tile:has(.powerup-bomb):hover,.tile:has(.powerup-color):hover{transform:scale(1.08);box-shadow:0 0 12px 3px #fff6;z-index:10}.powerups-control{margin-top:12px}.powerups-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem}.powerups-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:1px solid rgba(255,255,255,.3);border-radius:3px;background-color:#ffffff0d;cursor:pointer;position:relative}.powerups-checkbox:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.powerups-checkbox:checked:after{content:"";position:absolute;top:2px;left:5px;width:4px;height:8px;border:solid var(--bg-color);border-width:0 2px 2px 0;transform:rotate(45deg)}.powerups-checkbox:focus{outline:2px solid var(--primary-color);outline-offset:1px}.powerups-note{font-size:.8rem;color:#fff9;margin:8px 0 0 24px;font-style:italic}