:root{--color-bg: #1a1a2e;--color-surface: #16213e;--color-text: #eee;--color-text-muted: #999;--dot-red: #e74c3c;--dot-blue: #3498db;--dot-green: #2ecc71;--dot-yellow: #f1c40f;--dot-purple: #9b59b6;--grid-size: 6;--dot-gap: 4px;--board-padding: 12px;--dot-size: min(calc((100vw - 2 * var(--board-padding) - (var(--grid-size) - 1) * var(--dot-gap)) / var(--grid-size)), 60px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg);color:var(--color-text);display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:420px;padding:16px}.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:0 var(--board-padding)}.hud-scores{display:flex;gap:24px}.hud-score-block{display:flex;flex-direction:column;align-items:center}.hud-score-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.hud-score-value{font-size:28px;font-weight:700}.shuffle-bar{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;padding:0 var(--board-padding)}.btn{background:var(--color-surface);color:var(--color-text);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer;transition:background .15s;touch-action:manipulation}.btn:active{background:#ffffff1a}.btn-shuffle{grid-column:1}.board{display:grid;grid-template-columns:repeat(var(--grid-size),var(--dot-size));grid-template-rows:repeat(var(--grid-size),var(--dot-size));gap:var(--dot-gap);padding:var(--board-padding);background:var(--color-surface);border-radius:12px;touch-action:none;position:relative;overflow:hidden}.dot{width:var(--dot-size);height:var(--dot-size);border-radius:50%;transition:transform .12s ease,opacity .15s ease;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;touch-action:manipulation}.dot-inner{width:60%;height:60%;border-radius:50%;transition:transform .12s ease,box-shadow .12s ease}.dot[data-color=red] .dot-inner{background:var(--dot-red)}.dot[data-color=blue] .dot-inner{background:var(--dot-blue)}.dot[data-color=green] .dot-inner{background:var(--dot-green)}.dot[data-color=yellow] .dot-inner{background:var(--dot-yellow)}.dot[data-color=purple] .dot-inner{background:var(--dot-purple)}.dot.highlighted .dot-inner{transform:scale(1.08);box-shadow:0 0 12px 2px currentColor}.dot[data-color=red].highlighted .dot-inner{box-shadow:0 0 12px 2px var(--dot-red)}.dot[data-color=blue].highlighted .dot-inner{box-shadow:0 0 12px 2px var(--dot-blue)}.dot[data-color=green].highlighted .dot-inner{box-shadow:0 0 12px 2px var(--dot-green)}.dot[data-color=yellow].highlighted .dot-inner{box-shadow:0 0 12px 2px var(--dot-yellow)}.dot[data-color=purple].highlighted .dot-inner{box-shadow:0 0 12px 2px var(--dot-purple)}.board-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.board-lines line{stroke-width:9;stroke-linecap:round}.dot.clearing{animation:dotClear 80ms ease-out forwards}@keyframes dotClear{to{transform:scale(0);opacity:0}}.dot.dropping{animation:dotDrop calc(var(--drop-rows, 1) * .12s) ease-in-out}@keyframes dotDrop{0%{transform:translateY(calc(-1 * var(--drop-rows, 1) * (var(--dot-size) + var(--dot-gap))))}to{transform:translateY(0)}}.dot.shuffling-out{animation:shuffleOut .12s cubic-bezier(.4,0,1,1) forwards}.dot.shuffling-in{animation:shuffleIn 80ms cubic-bezier(0,0,.2,1)}@keyframes shuffleOut{to{transform:translate(var(--shuffle-x),var(--shuffle-y))}}@keyframes shuffleIn{0%{transform:translate(var(--shuffle-x),var(--shuffle-y))}to{transform:translate(0)}}.install-banner{text-align:center;font-size:13px;color:var(--color-text-muted)}.install-banner .btn{margin-top:8px}.ios-install-card{background:var(--color-surface);border-radius:12px;padding:16px;text-align:center;font-size:13px;line-height:1.5;max-width:300px}.ios-install-card p{margin-bottom:8px}.hidden{display:none!important}