.header{background-color:var(--bg);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.header__controls{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.header__dropdown,.header__theme{flex-shrink:0}@media (width<=639px){.header__subtitle{flex-basis:100%}}.header__subtitle{color:var(--muted-fg);font-size:.75rem}.header__button{border:1px solid var(--border);background-color:var(--surface);color:var(--fg);border-radius:var(--radius-sm);padding:.375rem .75rem;font-size:.75rem;font-weight:400;transition:background-color .15s}.header__button:hover{background-color:var(--surface-hover)}.header__dropdown{position:relative}.header__menu{z-index:50;background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;min-width:10rem;display:flex;position:absolute;top:calc(100% + 4px);left:0;overflow:hidden;box-shadow:0 8px 24px #00000040}.header__menu-item{color:var(--fg);text-align:left;background-color:#0000;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem .75rem;font-size:.75rem;display:flex}.header__menu-item:hover{background-color:var(--surface-hover)}.header__menu-label{font-weight:400}.header__menu-desc{color:var(--muted-fg)}.header__theme{border:1px solid var(--border);border-radius:var(--radius-sm);display:inline-flex;overflow:hidden}.header__theme-btn{background-color:var(--surface);color:var(--muted-fg);padding:.375rem .625rem;font-size:.75rem;font-weight:400;transition:background-color .15s,color .15s}.header__theme-btn+.header__theme-btn{border-left:1px solid var(--border)}.header__theme-btn:hover{background-color:var(--surface-hover)}.header__theme-btn--active{background-color:var(--primary);color:var(--primary-fg)}.header__theme-btn--active:hover{background-color:var(--primary)}.board{flex:1;width:100%;min-height:0;padding:1.5rem 1rem}.board__tiles{flex-direction:column;gap:.375rem;height:100%;display:flex}.board__row{flex-wrap:nowrap;gap:.375rem;min-width:0;display:flex}.board__row>.tile{white-space:nowrap;flex-shrink:0}.tile{background-color:var(--surface);color:var(--fg);-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;padding:.375rem .625rem;font-size:.8125rem;font-weight:400;transition:transform .15s,background-color .15s,box-shadow .15s,opacity .15s;display:inline-flex}@media (width>=640px){.tile{font-size:.875rem}}.tile:hover{background-color:var(--surface-hover)}.tile--group{background-color:oklch(var(--group-bg-l) var(--group-bg-c) var(--group-hue,0));min-width:0;max-width:20rem;color:oklch(var(--group-fg-l) var(--group-fg-c) var(--group-hue,0))}.tile--group:hover{background-color:oklch(calc(var(--group-bg-l) - .06) var(--group-bg-c) var(--group-hue,0))}.tile--group.tile--complete{max-width:none}.tile--complete,.tile--group.tile--complete{color:#fff;box-shadow:none;background-color:oklch(42% .15 150)}.tile--complete:hover,.tile--group.tile--complete:hover{background-color:oklch(48% .16 150)}.tile__words{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}[data-theme=light] .tile--complete,[data-theme=light] .tile--group.tile--complete{color:#fff;background-color:oklch(42% .15 150)}[data-theme=light] .tile--complete:hover,[data-theme=light] .tile--group.tile--complete:hover{background-color:oklch(48% .16 150)}.tile__name{font-weight:700}.tile__sep{opacity:.7;margin-left:.25rem}.tile--selected,.tile--drag-over{outline:2px solid var(--ring);outline-offset:1px;transform:scale(.95)}.tile--merged{z-index:2;animation:.55s cubic-bezier(.34,1.56,.64,1) tile-pop}.tile--dragging{opacity:.5}.tile--shake{animation:.4s tile-shake}.tile__badge{text-transform:uppercase;background-color:#0003;border-radius:.25rem;margin-right:.375rem;padding:0 .25rem;font-size:.625rem;display:inline-block}.tile__progress{border-radius:.25rem;margin-left:.375rem;padding:0 .25rem;font-size:.625rem;font-weight:700;display:inline-block}@keyframes tile-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes tile-pop{0%{transform:scale(1);box-shadow:0 0 oklch(78% .2 150/.6)}35%{transform:scale(1.25)rotate(-2deg);box-shadow:0 0 0 10px oklch(78% .2 150/.35)}65%{transform:scale(1.15)rotate(1.5deg);box-shadow:0 0 0 18px oklch(78% .2 150/0)}to{transform:scale(1);box-shadow:0 0 oklch(78% .2 150/0)}}.completion-banner{color:var(--fg);margin:0 1rem;font-size:.8125rem;font-weight:400;line-height:1.5}.completion-banner p{margin:0}.completion-banner p+p{margin-top:.5rem}.progress-bar{background-color:var(--muted);z-index:100;height:6px;position:fixed;top:0;left:0;right:0}.progress-bar__fill{background-color:oklch(72% .18 150);height:100%;transition:width .4s}.game{background-color:var(--bg);flex-direction:column;height:100dvh;min-height:100dvh;display:flex;overflow:visible hidden}.game__status{color:var(--fg);justify-content:center;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;display:flex}.game__status--error{color:oklch(60% .2 25)}.game__status button{color:inherit;cursor:pointer;font:inherit;background:0 0;border:1px solid;border-radius:999px;padding:.25rem .75rem}*,:before,:after{box-sizing:border-box}*{margin:0}html,body,#root{height:100%}:root{--bg:oklch(16% .025 150);--surface:oklch(28% .045 150);--surface-hover:oklch(34% .05 150);--fg:oklch(96% .02 150);--muted:oklch(24% .03 150);--muted-fg:oklch(70% .03 150);--border:oklch(32% .04 150);--ring:oklch(96% .02 150);--primary:#6366f1;--primary-fg:#fff;--radius:.5rem;--radius-sm:.375rem;--font-sans:"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--group-bg-l:.38;--group-bg-c:.13;--group-fg-l:.96;--group-fg-c:.02}[data-theme=light]{--bg:oklch(99% .01 150);--surface:oklch(93% .02 150);--surface-hover:oklch(88% .045 150);--fg:oklch(20% .04 150);--muted:oklch(94% .02 150);--muted-fg:oklch(45% .04 150);--border:oklch(82% .04 150);--ring:oklch(20% .04 150);--group-bg-l:.92;--group-bg-c:.07;--group-fg-l:.28;--group-fg-c:.1}body{background-color:var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.4}h1,h2,h3,h4,h5,h6,b,strong{font-weight:400}button{cursor:pointer;color:inherit;background:0 0;border:0;font-family:inherit}input{color:inherit;font-family:inherit}a{color:inherit}
