:root{--color-bg: #f0f0f0;--color-primary: #2299e9;--color-secondary: #e74c3c;--color-text: #2c3e50;--color-light: #ecf0f1;--color-dark: #34495e;--color-highlight: rgba(151, 151, 151, .9);--subgrid-color: rgba(44, 149, 175, .3);--color: #2c95af}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:sans-serif;background-color:var(--color-bg);color:var(--color-text);overflow:hidden}button[type=reset]{top:auto;bottom:10px;left:10px;background-color:var(--color-secondary)}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;gap:20px;flex-wrap:wrap;counter-reset:score var(--score, 0);width:100%}.app>*{max-width:100%}.app>table{max-width:90vmin;max-height:90vmin;margin-top:40px}@media (min-width: 768px){.app{flex-direction:column;flex-wrap:nowrap}}.app:after{content:"Score: " counter(score);position:fixed;top:10px;right:10px;padding:10px;font-size:1.2em;color:var(--color-light);background-color:var(--color-dark);border-radius:5px}.app>button{position:fixed;top:10px;left:10px;font-size:1.2em;color:var(--color-light);background-color:var(--color-dark);border:none;border-radius:5px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0}.app>button>svg{width:24px;height:24px}.app>.high-score{position:absolute;top:10px;left:50%;transform:translate(-50%);padding:10px 5px;font-size:1.5em;font-weight:700;color:var(--color-light);background-color:var(--color-dark);border-radius:20px;box-shadow:0 2px 5px #0000004d;transition:transform .3s ease-out,opacity .3s ease-out}@keyframes swirl{0%{transform:rotate(0) scale(1);opacity:1}to{transform:rotate(720deg) scale(0);opacity:0}}.swirl{animation:swirl 1s forwards}@keyframes spiralOut{0%{transform:rotate(0) scale(1);opacity:1;filter:hue-rotate(0deg)}to{transform:rotate(1080deg) scale(0);opacity:0;filter:hue-rotate(360deg)}}.colorswirl{animation:spiralOut 1s forwards}.app>.panel{display:flex;flex-direction:column;background-color:var(--color-light);border:1px solid var(--color-dark);padding-top:20px;border-radius:8px;align-items:center;height:calc(min(8vmin,66px)*3 + 40px);width:calc(min(8vmin,66px)*9 + 40px)}.app>.panel>div{display:flex;gap:15px;justify-content:center;align-items:center;flex-wrap:wrap}@keyframes combo-pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}table{border-collapse:collapse;background-color:var(--color-light);table-layout:fixed;border-radius:8px}.main{box-shadow:0 4px 8px #0000001a;display:inline-block}.subgrid{border-collapse:collapse;border-spacing:0;display:inline-table}.subgrid.dark{background-color:var(--subgrid-color)}.selectShape{border:1px solid var(--color-dark);background-color:var(--color);width:min(8vmin,66px);height:min(8vmin,66px)}.selectShape.empty{transition:background-color .3s ease;background:transparent;pointer-events:none;border:0}.boardShape{border:1px solid var(--color-dark);background-color:var(--color);width:min(8vmin,66px);height:min(8vmin,66px)}.boardShape:not(.filled){opacity:0}.boardShape.highlight{position:relative;background:var(--color-highlight);opacity:1!important}.boardShape.match{filter:brightness(1.25)}table.block{transform:translate(calc(var(--dx, 0) * 1px),calc(var(--dy, 0) * 1px));background:transparent}table.block.used{visibility:hidden;pointer-events:none}table.block.disabled{opacity:.5;pointer-events:none}form.score:before{content:"You have scored " counter(score) " points";display:block;text-align:center;margin-bottom:10px;font-size:1.2em}.combo-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3em;color:var(--color-light);background-color:var(--color-dark);padding:20px;border-radius:10px;z-index:100;animation:combo-pop .5s ease-out}dialog{border-radius:10px;width:90%;max-width:500px;border:0;padding:20px;background-color:#ffffffd9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 8px #0003;font-family:sans-serif;max-width:fit-content!important}dialog h1{text-align:center;font-size:1.8em;margin-bottom:20px}dialog h2{margin:10px 0;font-size:1.4em}dialog input[type=color]{visibility:hidden;width:0;position:absolute;opacity:0;pointer-events:none}dialog .setting{display:flex;align-items:center;margin-bottom:15px}dialog .setting label{margin-right:10px}dialog label.color{display:block;height:40px;margin:15px 0;border-radius:8px;outline:2px solid var(--color-dark);cursor:pointer;width:100%;max-width:100px;background-color:var(--color-primary)}dialog select{padding:8px;border:1px solid var(--color-dark);border-radius:4px;background-color:var(--color-light);color:var(--color-text);font-size:1em}dialog input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid var(--color-dark);border-radius:4px;background-color:var(--color-light);cursor:pointer;position:relative}dialog input[type=checkbox]:checked{background-color:var(--color-primary)}dialog input[type=checkbox]:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:6px;height:10px;border-right:2px solid var(--color-light);border-bottom:2px solid var(--color-light)}dialog button{margin:20px auto 10px;display:block;background-color:var(--color-primary);color:var(--color-light);border:1px solid var(--color-dark);border-radius:5px;padding:10px 20px;outline:none!important;font-size:1.1em;cursor:pointer}dialog::backdrop{background:#00000080}footer{position:fixed;bottom:0;left:0;width:100%;padding:5px;text-align:center;font-size:.6em;z-index:100}footer a{color:var(--color-primary)}.explode{animation:explode 1s forwards}.fade-out{animation:fade-out 1s ease-out forwards}.ripple{animation:ripple 1s ease-out forwards}.spin{animation:spin 1s forwards}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes ripple{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.5}to{transform:scale(0);opacity:0}}@keyframes explode{0%{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}@keyframes spin{0%{transform:rotateY(0) scale(1);opacity:1}50%{transform:rotateY(180deg) scale(.7);opacity:.5}to{transform:rotateY(360deg) scale(0);opacity:0}}#resetButton{background-color:#00f!important;margin-left:50px;background-color:red}