:root{--tangelo: #EE7526;--mustard: #FBD652;--vermilion: #D74820;--plum: #77161C;--rich-black: #030519;--slate: #353747;--charcoal: #333333;--cream: #F5EEE5;--beige: #EFEDE9;--off-white: #F5F5F5;--light-grey: #F0F0F0;--pastel-grey: #5C5C5C;--bg: #FFFFFF;--bg-elev: var(--off-white);--panel: var(--off-white);--panel-2: #FFFFFF;--panel-warm: var(--cream);--panel-warm2: var(--beige);--border: var(--plum);--border-2: var(--plum);--fg: var(--pastel-grey);--fg-strong: var(--rich-black);--fg-muted: #8A8A8A;--fg-faint: #BFBFBF;--accent: var(--tangelo);--accent-hover: var(--vermilion);--highlight: var(--mustard);--highlight-fg: var(--rich-black);--danger: var(--plum);--grid-gap: 10px;--radius: 12px;--radius-sm: 8px;--shadow: 0 6px 20px rgba(3, 5, 25, .06), 0 1px 2px rgba(3, 5, 25, .04);--shadow-strong: 0 12px 32px rgba(3, 5, 25, .12);--slide-ms: 175ms;--merge-ms: .24s;--spawn-ms: .22s;--slide-ease: cubic-bezier(.16, 1, .3, 1);--pop-ease: cubic-bezier(.34, 1.56, .64, 1)}:root[data-theme=dark]{--bg: var(--rich-black);--bg-elev: #0a0c1f;--panel: #14161f;--panel-2: #1c1e2a;--panel-warm: var(--charcoal);--panel-warm2: var(--slate);--border: var(--plum);--border-2: var(--plum);--fg: var(--cream);--fg-strong: var(--cream);--fg-muted: #A8A59C;--fg-faint: #6B6961;--shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);--shadow-strong: 0 12px 32px rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{background:radial-gradient(1100px 500px at 20% -150px,rgba(238,117,38,.06) 0%,transparent 60%),radial-gradient(900px 500px at 110% 0%,rgba(251,214,82,.08) 0%,transparent 60%),var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation;min-height:100dvh}:root[data-theme=dark] body{background:radial-gradient(1200px 600px at 30% -200px,#0e1130 0%,transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(238,117,38,.1) 0%,transparent 60%),var(--bg)}#app{max-width:520px;margin:0 auto;padding:18px 14px 80px;display:flex;flex-direction:column;gap:14px}.header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.title{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--fg-strong)}.title .accent{color:var(--accent)}.title .accent-2{color:var(--vermilion)}.subtitle{color:var(--fg-faint);font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase}.tabs{display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:1 0 auto;background:transparent;color:var(--fg-muted);border:none;border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease}.tab:hover{color:var(--fg-strong)}.tab.active{background:var(--accent);color:#fff}.toolbar{display:flex;gap:8px;align-items:stretch}.toolbar select,.toolbar button,.btn{background:var(--panel-2);color:var(--fg-strong);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;font-family:inherit;transition:background .12s ease,border-color .12s ease,color .12s ease,transform 80ms ease}.toolbar select{flex:1 1 auto}.toolbar select:focus,.toolbar button:focus,.btn:focus{outline:2px solid var(--accent);outline-offset:1px}.toolbar button:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}.toolbar button:active,.btn:active{transform:translateY(1px)}.toolbar .icon-btn{flex:0 0 auto;min-width:44px;padding:10px 12px}.btn-primary{background:var(--accent);color:#fff;border-color:transparent}.btn-primary:hover{background:var(--accent-hover);color:#fff;border-color:transparent}.btn-ghost{background:transparent;border-color:var(--border);color:var(--fg-muted)}.btn-ghost:hover{color:var(--fg-strong);border-color:var(--border-2)}.btn-danger{background:var(--danger);color:var(--cream);border-color:transparent}.scores{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.score-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}.score-card .label{color:var(--fg-faint);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.score-card .value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg-strong);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.score-card .value.accent{color:var(--accent)}.score-card .value.highlight{color:var(--accent-hover)}:root[data-theme=dark] .score-card .value.highlight{color:var(--highlight)}.board-wrap{position:relative}.board{position:relative;background:var(--beige);border:1px solid var(--plum);border-radius:var(--radius);padding:var(--grid-gap);aspect-ratio:1 / 1;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:var(--shadow);overflow:hidden}:root[data-theme=dark] .board{background:var(--charcoal)}.board-bg{position:absolute;inset:var(--grid-gap);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--grid-gap)}.cell-bg{background:var(--off-white);border:1px solid var(--plum);border-radius:var(--radius-sm)}:root[data-theme=dark] .cell-bg{background:#f5eee50f}.tile-layer{position:absolute;inset:var(--grid-gap);pointer-events:none}.tile{position:absolute;width:var(--tile-size, 64px);height:var(--tile-size, 64px);transform:translate(calc(var(--col, 0) * (var(--tile-size, 64px) + var(--grid-gap))),calc(var(--row, 0) * (var(--tile-size, 64px) + var(--grid-gap))));transition:transform var(--slide-ms) var(--slide-ease);will-change:transform}.tile.ghost{z-index:1}.tile.ghost .tile-inner{transition:opacity calc(var(--slide-ms) * .7) ease-out var(--slide-ms);opacity:0}.tile-inner{width:100%;height:100%;display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--plum);border-radius:var(--radius-sm);box-shadow:inset 0 1px #fff3,0 2px 6px #77161c2e;transition:background-color .2s ease-out,color .2s ease-out;will-change:transform}:root[data-theme=dark] .tile-inner{box-shadow:inset 0 1px #ffffff1a,0 4px 10px #0006}.tile.spawn .tile-inner{animation:tile-spawn var(--spawn-ms) var(--pop-ease)}@keyframes tile-spawn{0%{transform:scale(.35);opacity:0}55%{opacity:1}to{transform:scale(1);opacity:1}}.tile.merged .tile-inner{animation:tile-merge var(--merge-ms) var(--pop-ease);z-index:2}@keyframes tile-merge{0%{transform:scale(1);box-shadow:0 2px 6px #03051914}45%{transform:scale(1.16);box-shadow:0 6px 22px #ee752666,0 0 0 4px #ee75262e}to{transform:scale(1);box-shadow:0 2px 6px #03051914}}:root[data-theme=dark] .tile.merged .tile-inner{animation-name:tile-merge-dark}@keyframes tile-merge-dark{0%{transform:scale(1);box-shadow:0 2px 8px #0000004d}45%{transform:scale(1.16);box-shadow:0 8px 28px #fbd65273,0 0 0 4px #fbd65233}to{transform:scale(1);box-shadow:0 2px 8px #0000004d}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,#ffffffd9,#f5eee5f2);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:var(--radius);padding:24px;text-align:center;z-index:5}:root[data-theme=dark] .overlay{background:linear-gradient(180deg,#030519c7,#030519eb)}.overlay.show{display:flex}.overlay h2{margin:0;font-size:28px;letter-spacing:-.02em;color:var(--fg-strong)}.overlay h2.win{color:var(--accent)}.overlay h2.over{color:var(--danger)}.overlay p{margin:0;color:var(--fg-muted);font-size:14px}.overlay .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.overlay button{padding:10px 16px;font-size:14px}.modeline{color:var(--fg-faint);font-size:11px;text-align:center;line-height:1.5}.modeline kbd{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fg-strong)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}.panel h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--fg-strong)}.panel h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-faint)}.panel .muted{color:var(--fg-muted);font-size:13px}.panel .row{display:flex;gap:8px;align-items:center}.panel input[type=text],.panel input[type=email],.panel input[type=password],.panel select{flex:1;background:var(--panel-2);color:var(--fg-strong);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;font-family:inherit}.panel input:focus,.panel select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.panel-error{background:#d7482014;border:1px solid rgba(215,72,32,.3);color:var(--vermilion);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px}.panel-ok{background:#ee752614;border:1px solid rgba(238,117,38,.3);color:var(--accent);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px}.lb{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.lb li{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;color:var(--fg-strong)}.lb li.me{outline:1px solid var(--accent);outline-offset:-1px;background:#ee75260a}.lb .rank{color:var(--fg-faint);font-weight:700;font-variant-numeric:tabular-nums}.lb .who{color:var(--fg-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb .score{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}.lb .tile{color:var(--rich-black);font-size:11px;padding:2px 6px;background:var(--mustard);border-radius:4px;font-weight:600}.vs-bar{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px}.vs-side{display:flex;flex-direction:column;gap:2px;min-width:0}.vs-side.me{text-align:left}.vs-side.them{text-align:right}.vs-side .name{color:var(--fg-strong);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-side .points{color:var(--accent);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}.vs-vs{color:var(--fg-faint);font-size:11px;letter-spacing:.15em}.friend-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm)}.friend-row .name{color:var(--fg-strong);font-weight:500}.friend-row .meta{color:var(--fg-faint);font-size:11px}.friend-row .actions{display:flex;gap:4px}.friend-row .actions button{padding:6px 10px;font-size:12px}.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.chip-muted{background:var(--off-white);color:var(--fg-muted);border:1px solid var(--border)}.chip-ok{background:#ee75261a;color:var(--accent);border:1px solid rgba(238,117,38,.3)}.chip-warn{background:#fbd65233;color:#8a6a00;border:1px solid rgba(251,214,82,.5)}.chip-bad{background:#77161c1a;color:var(--plum);border:1px solid rgba(119,22,28,.3)}:root[data-theme=dark] .chip-warn{color:var(--mustard);border-color:#fbd65266}:root[data-theme=dark] .chip-muted{background:var(--panel-2)}.foot{margin-top:4px;color:var(--fg-faint);font-size:11px;text-align:center}.foot a{color:var(--fg-muted)}.foot .dot{margin:0 6px}.toast-wrap{position:fixed;left:50%;bottom:24px;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:50;pointer-events:none}.toast{background:var(--panel);border:1px solid var(--border-2);border-left:3px solid var(--accent);color:var(--fg-strong);padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;box-shadow:var(--shadow-strong);animation:toast-in .2s ease-out}.toast.danger{border-left-color:var(--vermilion)}.toast.win{border-left-color:var(--accent);background:#ee75260f}@keyframes toast-in{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.hidden{display:none!important}@media (prefers-reduced-motion: reduce){.tile{transition:none}.tile.spawn .tile-inner,.tile.merged .tile-inner,.toast{animation:none}}