.app{width:100%;max-width:460px;padding:1.5rem 1rem 3rem}header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}h1{margin:0;font-size:2.6rem;letter-spacing:-1px;color:var(--text)}.mode{font-weight:700;color:var(--text-muted)}.modes{display:flex;flex-wrap:wrap;gap:.5rem;margin:.85rem 0 .25rem}.mode-btn{background:var(--btn-inactive);color:var(--text-muted);padding:.45rem .9rem;font-size:.9rem}.mode-btn.active{background:var(--btn-active);color:var(--text)}.sizes{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .25rem}.sizes-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:700}.size-btn{background:var(--btn-inactive);color:var(--text-muted);padding:.4rem .75rem;font-size:.9rem}.size-btn.active{background:var(--btn-active);color:var(--text)}.hud{display:flex;align-items:center;justify-content:space-between;margin:1rem 0 .25rem}.score{display:flex;flex-direction:column;background:var(--panel);color:var(--text-muted);padding:.4rem 1.1rem;border-radius:6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}.score strong{font-size:1.5rem;color:var(--text)}button{cursor:pointer;border:0;border-radius:6px;background:var(--btn);color:var(--text);padding:.6rem 1.1rem;font-weight:700;font-size:1rem;transition:background .15s ease}button:hover{background:var(--btn-hover)}.rule-blurb{margin:.4rem 0 1rem;color:var(--text-muted)}.board-wrap{position:relative;width:max-content;margin:0 auto}.board{--size: 4;--gap: 10px;--board: min(92vw, 460px);--cell: calc((var(--board) - (var(--size) + 1) * var(--gap)) / var(--size));--slide: .12s;--ease: ease-in-out;--pop: 1.18;position:relative;width:var(--board);display:grid;grid-template-columns:repeat(var(--size),var(--cell));grid-template-rows:repeat(var(--size),var(--cell));gap:var(--gap);padding:var(--gap);background:var(--board-bg);border-radius:8px;touch-action:none}.cell-bg{background:var(--cell-bg);border-radius:6px}.tile{position:absolute;top:var(--gap);left:var(--gap);width:var(--cell);height:var(--cell);transform:translate(calc(var(--col) * (var(--cell) + var(--gap))),calc(var(--row) * (var(--cell) + var(--gap))));transition:transform var(--slide) var(--ease)}.tile-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:800;border:1px solid rgba(255,255,255,.05)}.tile-inner.is-new{animation:appear .15s ease}.tile-inner.is-merged{animation:pop .16s ease}@keyframes appear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(var(--pop))}to{transform:scale(1)}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.overlay-text{font-size:1.9rem;font-weight:800;color:var(--text)}.hint{margin:1.25rem 0 .5rem;color:var(--text-muted);font-size:.9rem;text-align:center}.dpad{display:flex;flex-direction:column;align-items:center;gap:.4rem}.dpad-row{display:flex;gap:.4rem}.dpad button{width:3.25rem;height:3.25rem;font-size:1.3rem;padding:0}.credit{margin-top:2rem;text-align:center;font-size:.78rem;line-height:1.5;color:var(--text-muted);opacity:.75}.credit a{color:var(--text-muted);text-decoration:underline}.paint{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.paint-btn{width:42px;height:42px;border-radius:50%;padding:0;background:var(--accent, hsl(207 45% 55%));border:2px solid rgba(255,255,255,.3);opacity:.6;transition:opacity .15s ease,transform .15s ease}.paint-btn:hover{opacity:1;transform:scale(1.07)}.paint-panel{width:220px;padding:14px;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 10px 30px #00000059;display:flex;flex-direction:column;gap:13px}.paint-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.swatch{aspect-ratio:1 / 1;padding:0;border-radius:8px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:transform .12s ease}.swatch:hover{transform:scale(1.08)}.swatch.active{outline:2px solid var(--text);outline-offset:1px}.swatch-dot{width:42%;height:42%;border-radius:50%;border:1px solid rgba(0,0,0,.15)}.paint-row{display:flex;flex-direction:column;gap:7px}.paint-row>label{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text-muted)}.paint-row input[type=range]{width:100%}.hue-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;border-radius:5px;background:linear-gradient(to right,#dd3c3c,#dddd3c,#3cdd3c,#3cdddd,#3c3cdd,#dd3cdd,#dd3c3c)}.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.35);cursor:pointer}.hue-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.35);cursor:pointer}.seg{display:flex;gap:6px}.seg button{flex:1;padding:.4rem;font-size:.85rem;background:var(--btn-inactive);color:var(--text-muted)}.seg button.on{background:var(--btn-active);color:var(--text)}.paint-reset{padding:.4rem;font-size:.8rem;font-weight:400;background:transparent;color:var(--text-muted);border:1px solid var(--btn-inactive)}:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--tile-hue: 207;--tile-sat: 45%;--accent: hsl(207 45% 55%);--bg: #1e242b;--board-bg: #2c343d;--cell-bg: rgba(147, 188, 217, .08);--text: #e8eef4;--text-muted: #8ea7bd;--panel: #283039;--btn: #38485a;--btn-hover: #44586d;--btn-active: #4f7796;--btn-inactive: #313c48;--overlay: rgba(20, 25, 31, .86);color:var(--text)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);display:flex;justify-content:center}