body{color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--page);margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}*{box-sizing:border-box;margin:0;padding:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root,.App{width:100%;min-height:100vh}.geometric-assembly-container{justify-content:center;align-items:center;display:flex;position:relative}.geometric-assembly-loading{background:radial-gradient(#0000000d 0%,#0000 70%);border-radius:20px;width:200px;height:150px;animation:1.5s ease-in-out infinite loading-pulse}@keyframes loading-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.geometric-assembly-stage{position:relative;overflow:visible}.geometric-shape-wrapper{will-change:transform, opacity}.geometric-shape{will-change:transform, filter;cursor:pointer;transition:filter .2s}.geometric-shape:hover{filter:drop-shadow(0 0 20px #0006)}.assembly-completion-glow{pointer-events:none;z-index:-1;background:radial-gradient(circle,var(--lightningcss-light,#00000026)var(--lightningcss-dark,#ffffff1a) 0%,#0000 70%)}.geometric-shape-bar{will-change:transform, box-shadow;cursor:pointer;background:var(--lightningcss-light,#000)var(--lightningcss-dark,#f2f2f2);transition:box-shadow .3s,transform .2s;box-shadow:0 4px 15px #0003}.geometric-shape-bar:hover{transform:translateY(-1px);box-shadow:0 6px 25px #0006}@media (width<=768px){.geometric-assembly-loading{width:160px;height:120px}}@media (width<=480px){.geometric-assembly-loading{width:120px;height:90px}}.spinner-container{background:linear-gradient(135deg,var(--lightningcss-light,#f8f9fa)var(--lightningcss-dark,#171717) 0%,var(--lightningcss-light,#e9ecef)var(--lightningcss-dark,#0f0f0f) 50%,var(--lightningcss-light,#f1f3f4)var(--lightningcss-dark,#141414) 100%);flex-direction:column;justify-content:center;align-items:center;height:100vh;display:flex;position:relative;overflow:hidden}.spinner-container:before{content:"";background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");animation:20s linear infinite background-drift;position:absolute;inset:0}@keyframes background-drift{0%{transform:translate(0)translateY(0)}to{transform:translate(-60px)translateY(-60px)}}.spinner-wrapper{justify-content:center;align-items:center;margin-bottom:30px;display:flex;position:relative}.spinner-image{z-index:2;filter:drop-shadow(0 0 20px #ffffff4d);border-radius:50%;width:100px;height:100px;position:relative;box-shadow:0 8px 32px #0000004d}.spinner-glow{z-index:1;background:radial-gradient(circle,#00000014 0%,#0000000a 50%,#0000 70%);border-radius:50%;width:140px;height:140px;animation:2s ease-in-out infinite pulse-glow;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse-glow{0%,to{opacity:.7;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}}.spinner-text-wrapper{text-align:center;color:var(--lightningcss-light,#343a40)var(--lightningcss-dark,#dee2e6)}.spinner-title{-webkit-text-fill-color:transparent;text-shadow:none;letter-spacing:1px;background:linear-gradient(45deg,var(--lightningcss-light,#343a40)var(--lightningcss-dark,#f1f3f5),var(--lightningcss-light,#495057)var(--lightningcss-dark,#ced4da));-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-size:2.5rem;font-weight:700}.spinner-text{opacity:.8;color:var(--lightningcss-light,#6c757d)var(--lightningcss-dark,#adb5bd);text-shadow:none;margin:0 0 15px;font-size:1.2rem;font-weight:400}.loading-dots{justify-content:center;align-items:center;gap:8px;display:flex}.loading-dots span{color:var(--lightningcss-light,#6c757d)var(--lightningcss-dark,#adb5bd);font-size:2rem;display:inline-block}@media (width<=768px){.spinner-image{width:80px;height:80px}.spinner-glow{width:120px;height:120px}.spinner-title{font-size:2rem}.spinner-text{font-size:1rem}}@media (width<=480px){.spinner-image{width:70px;height:70px}.spinner-glow{width:100px;height:100px}.spinner-title{font-size:1.8rem}.spinner-text{font-size:.9rem}.loading-dots span{font-size:1.5rem}}.spinner-container{animation:.5s ease-out fade-in}@keyframes fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--page:var(--lightningcss-light,#f5f5f5)var(--lightningcss-dark,#121212);--surface:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1c1c1c);--surface-hover:var(--lightningcss-light,#fafafa)var(--lightningcss-dark,#232323);--raised:var(--lightningcss-light,#fff)var(--lightningcss-dark,#3a3a3a);--ink:var(--lightningcss-light,#333)var(--lightningcss-dark,#e3e3e3);--ink-strong:var(--lightningcss-light,#222)var(--lightningcss-dark,#f2f2f2);--ink-hover:var(--lightningcss-light,#1f1f1f)var(--lightningcss-dark,#fff);--on-ink:var(--lightningcss-light,#fff)var(--lightningcss-dark,#161616);--muted:var(--lightningcss-light,#666)var(--lightningcss-dark,#a3a3a3);--faint:var(--lightningcss-light,#767676)var(--lightningcss-dark,#8a8a8a);--hairline:var(--lightningcss-light,#e2e2e2)var(--lightningcss-dark,#2e2e2e);--line:var(--lightningcss-light,#d6d6d6)var(--lightningcss-dark,#3d3d3d);--line-strong:var(--lightningcss-light,#bdbdbd)var(--lightningcss-dark,#5c5c5c);--recess:var(--lightningcss-light,#ebebeb)var(--lightningcss-dark,#262626);--recess-strong:var(--lightningcss-light,#dedede)var(--lightningcss-dark,#333);--scrim:var(--lightningcss-light,#1c1c1c73)var(--lightningcss-dark,#0009);--slot:var(--lightningcss-light,#d9d9d9)var(--lightningcss-dark,#0b0b0b);--slot-line:var(--lightningcss-light,#9e9e9e)var(--lightningcss-dark,#4d4d4d);--tile:var(--lightningcss-light,#fff)var(--lightningcss-dark,#ccc);--tile-edge:var(--lightningcss-light,#e4e4e4)var(--lightningcss-dark,#b4b4b4);--tile-edge-strong:var(--lightningcss-light,#d4d4d4)var(--lightningcss-dark,#a8a8a8);--tile-edge-hover:var(--lightningcss-light,#9a9a9a)var(--lightningcss-dark,#777);--tile-ink:#333;--blank:var(--lightningcss-light,#f3f3f3)var(--lightningcss-dark,#c2c2c2);--green:#1e7d3f;--on-green:#fff;--green-text:var(--lightningcss-light,#1e7d3f)var(--lightningcss-dark,#6fcf8e);--green-tint:var(--lightningcss-light,#e8f3ec)var(--lightningcss-dark,#14281b);--green-line:var(--lightningcss-light,#9fcbad)var(--lightningcss-dark,#3f8a59);--r-tile:6px;--r-ctl:10px;--r-card:16px;--display:"Russo One", system-ui, sans-serif;--ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--board-size:min(568px, max(360px, calc(100vh - 212px)))}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.app{min-height:100vh;font-family:var(--ui);color:var(--ink)}:where(.app) button{font:inherit;color:inherit}.num{font-variant-numeric:tabular-nums}.icon{flex:none}.label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:600}.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card)}.btn{border-radius:var(--r-ctl);white-space:nowrap;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:8px;height:40px;padding:0 14px;font-size:14px;font-weight:500;transition:background-color .15s,box-shadow .15s,opacity .15s;display:inline-flex}.btn:disabled{cursor:not-allowed;opacity:.45}.btn-quiet{color:var(--ink)}.btn-quiet:hover:not(:disabled),.btn-quiet.is-active{background:var(--recess)}.app .btn-primary{background:var(--ink);color:var(--on-ink);padding:0 18px;font-weight:600;box-shadow:0 1px 2px #00000026}.app .btn-primary:hover:not(:disabled){background:var(--ink-hover)}.btn-secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}.btn-secondary:hover:not(:disabled){background:var(--surface-hover);box-shadow:inset 0 0 0 1px var(--line-strong)}.btn-block{width:100%;height:50px;font-size:16px}.icon-btn{width:44px;height:44px;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:22px;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{background:var(--recess)}.icon-btn.close{background:var(--recess);width:36px;height:36px;margin:4px}.icon-btn.close:hover{background:var(--recess-strong)}.app :focus-visible{outline:2px solid var(--ink);outline-offset:2px}.seg{border-radius:var(--r-ctl);background:var(--recess);gap:2px;padding:3px;display:inline-flex}.seg button{height:34px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:0 16px;font-size:14px;font-weight:500}.seg button:hover:not(:disabled):not([aria-checked=true]){color:var(--ink)}.seg button[aria-checked=true]{background:var(--raised);color:var(--ink-strong);font-weight:600;box-shadow:0 1px 2px #0000001a,0 0 0 .5px #0000000a}.seg button:disabled{cursor:not-allowed;opacity:.6}.seg-full{width:100%;display:flex}.seg-full button{flex:1;height:40px;padding:0}.pips{gap:4px;display:flex}.pips i{background:var(--recess-strong);border-radius:3px;flex:1;height:6px}.pips i.on{background:var(--green)}.bar{background:var(--recess-strong);border-radius:3px;height:6px;overflow:hidden}.bar>i{background:var(--ink);border-radius:3px;height:100%;transition:width .4s;display:block}.tag{background:var(--recess);height:24px;color:var(--ink);text-transform:capitalize;border-radius:12px;align-items:center;padding:0 10px;font-size:12px;font-weight:500;display:inline-flex}.swatch{border-radius:4px;flex:none;width:14px;height:14px}.swatch-correct{background:var(--tile);box-shadow:inset 0 0 0 1.5px var(--green-line);position:relative}.swatch-correct:after{content:"";background:var(--green);width:8px;height:8px;box-shadow:0 0 0 1.5px var(--surface);border-radius:50%;position:absolute;top:-3px;right:-3px}.swatch-empty{background:var(--slot);border:1.5px dashed var(--slot-line)}.swatch-blank{background:var(--blank);box-shadow:inset 0 0 0 1px var(--tile-edge-strong)}.swatch-pattern{background:var(--tile);box-shadow:inset 0 0 0 2px var(--green)}.picker-thumb img,.picker-option-thumb img,.symbol-thumb img,.up-next-thumb img,.collection-thumbs img,.win-symbol img{mix-blend-mode:multiply}.logo{color:var(--ink-strong);font-family:var(--display);letter-spacing:.01em;white-space:nowrap;align-items:center;gap:10px;font-size:20px;display:flex}.logo-mark{width:32px;height:32px;color:var(--ink);flex:none;display:block}.logo-mark path{fill:var(--on-ink)}.learned{color:var(--muted);white-space:nowrap;align-items:center;gap:10px;font-size:13px;display:flex}.learned strong{color:var(--ink-strong);font-weight:600}.learned .bar{width:72px}.pill{background:var(--recess);height:28px;color:var(--ink);border-radius:14px;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:500;display:inline-flex}.pill .bar{width:28px;height:4px}.wrap{width:min(1048px,100% - 48px);margin:0 auto}.topbar{border-bottom:1px solid var(--hairline);background:color-mix(in srgb, var(--surface) 60%, transparent);height:72px}.topbar-inner{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:100%;display:grid}.topbar-right{justify-content:flex-end;align-items:center;gap:16px;display:flex}.topbar-right .btn{padding:0 10px}.topbar-right .icon-btn{border-radius:var(--r-ctl);width:40px;height:40px}.divider{background:var(--hairline);width:1px;height:24px}.game-layout{grid-template-columns:var(--board-size) 1fr;gap:40px;padding:28px 0 24px;display:grid}.play{flex-direction:column;gap:16px;min-width:0;display:flex}.toolbar{justify-content:space-between;align-items:center;gap:12px;height:44px;display:flex;container-type:inline-size}.toolbar-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}@container (width<=540px){.toolbar-actions .btn-quiet{width:40px;padding:0}.toolbar-actions .btn-quiet .btn-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.toolbar-actions .btn-primary{margin-left:8px}.panel{flex-direction:column;gap:16px;min-width:0;display:flex}.board-area{flex-direction:column;gap:16px;display:flex}.board-frame{position:relative}.board{--gap:6px;--pad:8px;grid-template-columns:repeat(var(--n,4), 1fr);gap:var(--gap);width:var(--board-size);max-width:100%;padding:var(--pad);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);-webkit-user-select:none;user-select:none;display:grid;box-shadow:0 1px 2px #0000000a,0 8px 24px #0000000d}.board-status{aspect-ratio:1;color:var(--muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:15px;display:flex}.board-status p{margin:0}.tile{aspect-ratio:1;border-radius:var(--r-tile);background-color:var(--tile);background-blend-mode:multiply;box-shadow:inset 0 0 0 1px var(--tile-edge);touch-action:none;background-repeat:no-repeat;transition:transform .15s,box-shadow .15s,filter .2s,opacity .2s;position:relative}.tile.is-blank{background-color:var(--blank);box-shadow:inset 0 0 0 1px var(--tile-edge), 0 1px 2px #0000000d}.tile.is-movable{cursor:pointer;box-shadow:inset 0 0 0 1px var(--tile-edge-strong), 0 1px 1px #0000000f, 0 2px 6px #00000012}.tile.is-blank.is-movable{box-shadow:inset 0 0 0 1px var(--tile-edge-strong), 0 1px 1px #0000000f, 0 2px 6px #00000012}@media (hover:hover){.tile.is-movable:hover{box-shadow:inset 0 0 0 1.5px var(--tile-edge-hover), 0 2px 4px #00000014, 0 6px 14px #00000014;transform:translateY(-1px)}}.tile.is-movable.is-pressed{transform:scale(.98)}.tile.is-dragging{box-shadow:inset 0 0 0 1.5px var(--tile-ink), 0 6px 14px #0000001f}.tile.is-empty{border:2px dashed var(--slot-line);background:var(--slot);box-shadow:inset 0 3px 8px #00000024}.tile.is-empty:after{content:"";aspect-ratio:1;border:2px solid var(--slot-line);border-radius:50%;width:22%;max-width:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tile.is-correct{box-shadow:inset 0 0 0 1.5px var(--green-line)}.tile.is-correct.is-movable{box-shadow:inset 0 0 0 1.5px var(--green-line), 0 1px 1px #0000000f, 0 2px 6px #00000012}.tile.is-correct .tile-mark{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;width:18px;height:18px;box-shadow:0 0 0 2px var(--tile);border-radius:50%;position:absolute;top:6px;right:6px}.board[style*="--n: 5"] .tile.is-correct .tile-mark,.board[style*="--n: 6"] .tile.is-correct .tile-mark{background-size:9px;width:14px;height:14px;top:4px;right:4px}.board.is-paused .tile{filter:blur(3px);opacity:.5}.pause-overlay{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pause-card{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:24px 28px;display:flex;box-shadow:0 12px 32px #0000001f}.pause-card h3{color:var(--ink-strong);font-family:var(--display);margin:0;font-size:20px;font-weight:400}.pause-card p{color:var(--muted);margin:0 0 10px;font-size:14px}.legend{color:var(--muted);justify-content:space-between;align-items:center;gap:16px;font-size:13px;display:flex}.legend-items{gap:18px;display:flex}.legend-items span,.legend-keys{white-space:nowrap;align-items:center;gap:7px;display:inline-flex}.legend-keys{gap:4px}.legend-keys kbd:first-of-type{margin-left:4px}kbd{border:1px solid var(--line);background:var(--raised);color:var(--muted);font-family:var(--ui);border-bottom-width:2px;border-radius:4px;padding:0 5px;font-size:11px;font-weight:500;line-height:16px}.loading-spinner{border:4px solid var(--recess-strong);border-top-color:var(--ink);border-radius:50%;width:50px;height:50px;animation:.9s linear infinite spin}.loading-spinner.small{border-width:3px;width:30px;height:30px}@keyframes spin{to{transform:rotate(360deg)}}.picker{min-width:0;position:relative}.picker-trigger{border:1px solid var(--hairline);border-radius:var(--r-ctl);background:var(--surface);text-align:left;cursor:pointer;align-items:center;gap:10px;max-width:100%;height:44px;padding:0 12px 0 4px;transition:border-color .15s;display:flex}.picker-trigger:hover:not(:disabled){border-color:var(--line-strong)}.picker-trigger:disabled{cursor:not-allowed;opacity:.6}.picker-thumb{border:1px solid var(--hairline);background:var(--tile);border-radius:7px;flex-shrink:0;width:34px;height:34px;overflow:hidden}.picker-thumb img{object-fit:contain;width:100%;height:100%;display:block}.picker-text{flex-direction:column;min-width:0;line-height:1.25;display:flex}.picker-text strong{color:var(--ink-strong);letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;overflow:hidden}.picker-text small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.picker-chevron{color:var(--muted);flex-shrink:0;margin-left:6px}.picker-chip .picker-trigger{border-radius:12px;width:100%;height:52px;padding:0 12px 0 6px}.picker-chip .picker-thumb{border-radius:8px;width:38px;height:38px}.picker-chip .picker-text{flex:1}.picker-chip .picker-text strong{font-size:15px}.picker-change{color:var(--muted);align-items:center;gap:4px;font-size:13px;font-weight:500;display:flex}.picker-menu{z-index:50;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);flex-direction:column;gap:12px;width:400px;max-height:min(520px,100vh - 140px);padding:16px;display:flex;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 16px 40px #00000024}.picker-chip .picker-menu{width:auto;max-height:calc(100vh - 200px);right:0}.picker-menu-head{color:var(--muted);justify-content:space-between;align-items:baseline;font-size:13px;display:flex}.picker-menu-head strong{color:var(--ink-strong);font-size:14px;font-weight:600}.picker-options{grid-template-columns:repeat(4,1fr);gap:10px 8px;padding:6px 4px 2px;display:grid;overflow-y:auto}.picker-option{cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:0;display:flex}.picker-option-thumb{aspect-ratio:1;border:1px solid var(--hairline);background:var(--tile);border-radius:10px;width:100%;padding:6px;transition:border-color .15s,box-shadow .15s;position:relative}.picker-option-thumb img{object-fit:contain;width:100%;height:100%}.picker-option:hover .picker-option-thumb{border-color:var(--line-strong)}.picker-option[aria-selected=true] .picker-option-thumb{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.picker-option-learned{background:var(--green);width:18px;height:18px;box-shadow:0 0 0 2px var(--surface);color:var(--on-green);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:-5px;right:-5px}.picker-option-learned .icon{stroke-width:3.5px}.picker-option-name{max-width:100%;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500;overflow:hidden}.picker-empty{color:var(--muted);margin:0;font-size:14px}.stats{grid-template-columns:1fr 1fr 1.4fr;padding:18px 20px;display:grid}.stat+.stat{border-left:1px solid var(--hairline);padding-left:20px}.stat-value{color:var(--ink-strong);letter-spacing:-.01em;margin-top:4px;font-size:26px;font-weight:600;line-height:1.15}.stat-value small{color:var(--muted);font-size:15px;font-weight:500}.stat .pips{margin-top:8px}.symbol-card{flex-direction:column;flex:1;gap:16px;padding:20px;display:flex}.symbol-card-head{align-items:center;gap:16px;display:flex}.symbol-thumb{border:1px solid var(--hairline);background:var(--tile);border-radius:12px;flex:none;width:84px;height:84px;padding:6px}.symbol-thumb img{object-fit:contain;width:100%;height:100%}.symbol-name{color:var(--ink-strong);font-family:var(--display);letter-spacing:.01em;margin:4px 0;font-size:24px;font-weight:400}.symbol-desc{color:var(--muted);margin:0;font-size:14px;line-height:1.45}.meaning{border-top:1px solid var(--hairline);padding-top:16px}.meaning p{color:var(--ink-strong);margin:6px 0 0;font-size:17px;line-height:1.5}.up-next{background:var(--page);border-radius:12px;align-items:center;gap:12px;margin-top:auto;padding:12px;display:flex}.up-next-thumb{border:1px solid var(--hairline);background:var(--tile);opacity:.5;border-radius:8px;flex:none;width:40px;height:40px;padding:3px}.up-next-thumb img{object-fit:contain;width:100%;height:100%;display:block}.up-next .label{font-size:11px}.up-next strong{color:var(--ink-strong);letter-spacing:.02em;margin-top:2px;font-size:14px;font-weight:600;display:block}.collection{padding:18px 20px 20px}.collection-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.collection-head strong{color:var(--ink-strong);font-size:14px;font-weight:600}.collection-head span{color:var(--muted);font-size:13px}.collection-thumbs{grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:6px;margin:14px 0 16px;display:grid}.collection-thumbs button{aspect-ratio:1;border:1px solid var(--hairline);background:var(--tile);cursor:pointer;border-radius:6px;padding:2px}.collection-thumbs button:disabled{cursor:not-allowed}.collection-thumbs img{object-fit:contain;width:100%;height:100%;display:block}.collection-thumbs .is-todo img{opacity:.18}.collection-thumbs .is-todo:hover:not(:disabled) img{opacity:.45}.collection-thumbs .is-current{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.collection-levels{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.collection-level{color:var(--muted);font-size:12px}.collection-level b{color:var(--ink);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.collection-level .bar{margin-bottom:6px}.app-footer{color:var(--faint);text-align:center;padding:8px 0 24px;font-size:12px}.layout-mobile{min-height:100vh}.m-topbar{justify-content:space-between;align-items:center;height:52px;padding:0 8px 0 16px;display:flex}.m-topbar .logo{gap:8px;font-size:17px}.m-topbar .logo-mark{width:26px;height:26px}.m-topbar-right{align-items:center;gap:2px;display:flex}.m-body{padding:4px 16px calc(96px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex}.m-stats{height:36px;color:var(--muted);grid-template-columns:auto auto 1fr;align-items:center;font-size:13px;display:grid}.m-stats>div{align-items:baseline;gap:6px;padding:0 14px;display:flex}.m-stats>div:first-child{padding-left:4px}.m-stats>div+div{border-left:1px solid var(--hairline)}.m-stats b{color:var(--ink-strong);font-size:16px;font-weight:600}.m-stats .m-stats-progress{align-items:center;padding-right:4px}.m-stats .pips{flex:1}.m-stats .pips i{height:5px}.layout-mobile .board-area{gap:10px}.layout-mobile .board{--gap:5px;--pad:6px;border-radius:14px;width:100%}.layout-mobile .tile.is-correct .tile-mark{background-size:10px;width:16px;height:16px;top:4px;right:4px}.layout-mobile .legend{justify-content:center}.m-meaning{border:1px solid var(--hairline);background:var(--surface);border-radius:12px;gap:12px;padding:12px 14px;display:flex}.m-meaning .icon{margin-top:2px}.m-meaning p{color:var(--ink-strong);margin:2px 0 0;font-size:14px;line-height:1.45}.m-actionbar{z-index:40;padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--hairline);background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(12px);grid-template-columns:1fr 1fr 1.5fr;gap:8px;display:grid;position:fixed;bottom:0;left:0;right:0}.m-actionbar .btn{height:48px;font-size:15px}.m-actionbar .btn-quiet{flex-direction:column;gap:2px;padding:0;font-size:12px}.m-actionbar .btn-quiet .icon{width:20px;height:20px}.layout-mobile .app-footer{padding:4px 0 0}.overlay{z-index:1000;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.scrim{background:var(--scrim);position:absolute;inset:0}.dialog{background:var(--surface);flex-direction:column;display:flex;position:relative;box-shadow:0 20px 50px #00000040}.modal{border-radius:20px;width:min(560px,100%);max-height:calc(100vh - 64px)}.sheet{border-radius:22px 22px 0 0;max-height:calc(100% - 48px);position:absolute;bottom:0;left:0;right:0;box-shadow:0 -8px 30px #00000026}.grab{background:var(--line);border-radius:3px;flex:none;width:36px;height:5px;margin:8px auto 0}.dialog-head{flex:none;justify-content:space-between;align-items:center;padding:8px 8px 4px 20px;display:flex}.dialog-head h3{color:var(--ink-strong);font-family:var(--display);margin:0;font-size:20px;font-weight:400}.dialog-body{flex-direction:column;gap:16px;padding:4px 20px 16px;display:flex;overflow-y:auto}.dialog-foot{padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--hairline);flex:none}.hint-preview{flex-direction:column;align-items:center;gap:14px;display:flex}.modal .hint-preview{flex-direction:row;align-items:center;gap:24px}.board.board-preview{--gap:4px;--pad:6px;width:232px;box-shadow:none;border-radius:12px;flex:none}.board-preview .tile{border-radius:4px}.board-preview .tile.is-pattern{box-shadow:inset 0 0 0 2px var(--green)}.board-preview .tile.is-blank,.board-preview .tile.is-empty{background-color:var(--blank);box-shadow:none;border:0}.board-preview .tile.is-empty:after{display:none}.hint-legend{width:100%;color:var(--muted);grid-template-columns:1fr 1fr;gap:12px;font-size:13px;line-height:1.4;display:grid}.modal .hint-legend{grid-template-columns:1fr}.hint-legend>div{gap:10px;display:flex}.hint-legend strong{color:var(--ink-strong);font-size:14px;font-weight:600;display:block}.hint-legend .swatch{margin-top:3px}.tip{background:var(--page);color:var(--muted);border-radius:12px;align-items:flex-start;gap:10px;padding:12px 14px;font-size:13px;line-height:1.45;display:flex}.tip .icon{color:var(--ink);margin-top:1px}.hint-symbol{border-top:1px solid var(--hairline);padding-top:16px}.hint-symbol .symbol-name{margin:6px 0 2px;font-size:22px}.hint-symbol .meaning{border:0;padding-top:14px}.hint-symbol .meaning p{font-size:16px}.win-card{text-align:center;border-radius:22px;width:min(400px,100%);max-height:calc(100vh - 32px);padding:26px 22px 20px;overflow-y:auto}.win-close{margin:0;position:absolute;top:10px;right:10px}.win-badge{background:var(--green-tint);height:28px;color:var(--green-text);border-radius:14px;align-self:center;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:600;display:inline-flex}.win-badge .icon{stroke-width:3px}.win-card h3{color:var(--ink-strong);font-family:var(--display);margin:12px 0 18px;font-size:28px;font-weight:400}.win-symbol{border:1px solid var(--hairline);background:var(--tile);border-radius:16px;width:132px;height:132px;margin:0 auto 14px;padding:10px}.win-symbol img{object-fit:contain;width:100%;height:100%}.win-card .symbol-name{margin:0;font-size:22px}.win-card .symbol-desc{margin-top:2px}.win-meaning{background:var(--page);color:var(--ink-strong);border-radius:12px;margin:16px 0 0;padding:14px 16px;font-size:16px;line-height:1.5}.win-stats{grid-template-columns:repeat(3,1fr);margin-top:18px;display:grid}.win-stats>div{color:var(--muted);flex-direction:column;gap:2px;font-size:12px;display:flex}.win-stats>div+div{border-left:1px solid var(--hairline)}.win-stats b{color:var(--ink-strong);font-size:18px;font-weight:600}.learned-win{border-top:1px solid var(--hairline);gap:12px;margin-top:18px;padding-top:16px}.learned-win .bar{flex:1;width:auto}.win-actions{flex-direction:column;gap:8px;margin-top:18px;display:flex}@media (width<=1099px){:root{--board-size:min(568px, 100%)}.game-layout{grid-template-columns:minmax(0,568px);justify-content:center;gap:24px}.board{width:100%}}@media (width<=899px){.topbar .learned .bar,.topbar .divider{display:none}}@media (prefers-reduced-motion:reduce){.tile,.btn,.bar>i{transition:none}.loading-spinner{animation-duration:2.5s}}.gesture-layer{--gap:6px;--pad:8px;z-index:3;grid-template-columns:repeat(var(--n), 1fr);grid-template-rows:repeat(var(--n), 1fr);gap:var(--gap);padding:calc(var(--pad) + 1px);pointer-events:none;display:grid;position:absolute;inset:0}.layout-mobile .gesture-layer{--gap:5px;--pad:6px}.gesture{position:relative}.gesture-track{position:absolute;inset:0}.gesture-pointer{transform-origin:0 0;position:absolute;top:50%;left:50%}.gesture-touch .gesture-pointer{width:clamp(30px,46%,58px)}.gesture-mouse .gesture-pointer{width:clamp(22px,28%,32px)}.gesture-pointer svg{filter:drop-shadow(0 2px 3px #00000040);width:100%;height:auto;display:block}.gesture-hand{transform:translate(-33%,-8%)}.gesture-cursor{transform:translate(-17%,-17%)}.gesture-key{aspect-ratio:1;border:1px solid var(--line-strong);background:var(--raised);width:clamp(28px,34%,42px);color:var(--ink-strong);border-bottom-width:3px;border-radius:8px;justify-content:center;align-items:center;padding:0;font-size:20px;font-weight:700;line-height:1;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 12px #0000002e}.gesture-ripple{aspect-ratio:1;opacity:0;background:#22222224;border-radius:50%;width:44%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.3);box-shadow:0 0 0 2px #ffffffe6}.gesture-arrow{top:calc(50% + var(--dy) * 50%);left:calc(50% + var(--dx) * 50%);background:var(--tile-ink);width:28px;height:28px;box-shadow:0 0 0 2px var(--tile);color:var(--tile);border-radius:50%;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:none;position:absolute;transform:translate(-50%,-50%)}.gesture-touch .gesture-track{animation:2.8s ease-in-out infinite gesture-track-drag}.gesture-touch .gesture-pointer{animation:2.8s ease-in-out infinite gesture-pointer-touch}.gesture-mouse .gesture-pointer{animation:2.8s ease-in-out infinite gesture-pointer-mouse}.gesture-keyboard .gesture-key{animation:2.8s ease-in-out infinite gesture-key-press}.gesture-touch .gesture-ripple,.gesture-mouse .gesture-ripple{animation:2.8s ease-out infinite gesture-ripple}.board .tile.is-hinted{z-index:2;box-shadow:inset 0 0 0 2px var(--tile-ink), 0 4px 12px #0000001f}.tile.is-hinted.hint-touch{animation:2.8s ease-in-out infinite tile-nudge-drag}.tile.is-hinted.hint-mouse,.tile.is-hinted.hint-keyboard{animation:2.8s ease-in-out infinite tile-nudge-tap}.tile.is-shaking{animation:.35s tile-shake}@keyframes gesture-track-drag{0%,22%{transform:translate(0)}50%,74%{transform:translate(calc(var(--dx) * 58%), calc(var(--dy) * 58%))}75%,to{transform:translate(0)}}@keyframes gesture-pointer-touch{0%{opacity:0;transform:translate(14px,18px)scale(1)}12%{opacity:1;transform:translate(0)scale(1)}22%,56%{opacity:1;transform:translate(0)scale(.86)}64%{opacity:1;transform:translate(0)scale(1)}74%,to{opacity:0;transform:translate(0)scale(1)}}@keyframes gesture-pointer-mouse{0%{opacity:0;transform:translate(26px,30px)scale(1)}16%{opacity:1;transform:translate(0)scale(1)}24%{opacity:1;transform:translate(0)scale(.82)}30%,62%{opacity:1;transform:translate(0)scale(1)}74%,to{opacity:0;transform:translate(0)scale(1)}}@keyframes gesture-key-press{0%,14%,to{border-bottom-width:3px;transform:translate(-50%,-50%)scale(1)}22%{border-bottom-width:1px;transform:translate(-50%,-50%)scale(.9)}32%{border-bottom-width:3px;transform:translate(-50%,-50%)scale(1)}}@keyframes gesture-ripple{0%,20%{opacity:0;transform:translate(-50%,-50%)scale(.3)}24%{opacity:1;transform:translate(-50%,-50%)scale(.45)}44%,to{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}@keyframes tile-nudge-drag{0%,22%{transform:translate(0)}50%,56%{transform:translate(calc(var(--dx) * 40%), calc(var(--dy) * 40%))}68%,to{transform:translate(0)}}@keyframes tile-nudge-tap{0%,24%{transform:translate(0)}40%,46%{transform:translate(calc(var(--dx) * 30%), calc(var(--dy) * 30%))}58%,to{transform:translate(0)}}@keyframes tile-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.legend,.coach-caption{min-height:30px}.coach-caption{text-align:center;border:1px solid var(--hairline);background:var(--surface);color:var(--ink-strong);border-radius:15px;align-self:center;align-items:center;gap:8px;margin:0;padding:6px 14px;font-size:14px;font-weight:500;display:flex;box-shadow:0 1px 2px #0000000d}.modal.how-to-play{width:min(480px,100%)}.how-to-play-intro{color:var(--muted);margin:0;font-size:15px;line-height:1.5}.how-to-play-rules{flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;display:flex}.how-to-play-rules li{color:var(--muted);align-items:flex-start;gap:14px;font-size:14px;line-height:1.45;display:flex}.how-to-play-rules strong{color:var(--ink-strong);margin-bottom:2px;font-size:15px;font-weight:600;display:block}.how-to-play-icon{background:var(--page);width:36px;height:36px;color:var(--ink);border-radius:10px;flex:none;justify-content:center;align-items:center;display:flex}.dialog-foot-split{grid-template-columns:1fr 1fr;gap:10px;display:grid}.dialog-foot-split .btn-block{height:48px;font-size:15px}@media (prefers-reduced-motion:reduce){.gesture-track,.gesture-pointer,.gesture-key,.gesture-ripple,.tile.is-hinted,.tile.is-shaking{animation:none!important}.gesture-pointer{opacity:1}.gesture-arrow{display:flex}}.coach-caption .coach-text{align-items:center;gap:8px;display:inline-flex}.coach-caption.is-guide{text-align:center;border-radius:12px;flex-direction:column;gap:2px;min-height:0;padding:7px 16px}.coach-step{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:600}.coach-caption.is-success{border-color:var(--green-line);background:var(--green-tint);color:var(--green-text)}.how-to-play-demo{border-radius:var(--r-card);background:var(--page);flex-direction:column;align-items:center;gap:10px;margin:0;padding:16px;display:flex}.how-to-play-demo figcaption{max-width:300px;color:var(--muted);text-align:center;font-size:13px;line-height:1.45}.move-demo{border:1px solid var(--hairline);background:var(--surface);border-radius:14px;width:168px;padding:6px;box-shadow:0 1px 2px #0000000a,0 6px 18px #0000000f}.move-demo-board{aspect-ratio:1;position:relative}.move-demo-slot,.move-demo-tile{width:33.3333%;height:33.3333%;padding:2px;position:absolute}.move-demo-slot:before{content:"";border:1.5px dashed var(--slot-line);background:var(--slot);border-radius:4px;width:100%;height:100%;display:block;box-shadow:inset 0 2px 5px #0000001f}.move-demo-tile{transition:left .35s ease-in-out,top .35s ease-in-out}.move-demo-face{background-color:var(--tile);background-blend-mode:multiply;width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--tile-edge), 0 1px 2px #0000000f;background-repeat:no-repeat;border-radius:4px;display:block}.move-demo-tile.is-solved .move-demo-face{box-shadow:inset 0 0 0 1.5px var(--green-line)}.move-demo-pointer{z-index:2;opacity:0;width:0;height:0;transition:left .38s ease-in-out,top .38s ease-in-out,opacity .25s;position:absolute}.move-demo-pointer.is-visible{opacity:1}.move-demo-icon{transform-origin:0 0;transition:transform .18s;display:block;position:absolute}.move-demo-icon svg{filter:drop-shadow(0 2px 3px #00000040);width:100%;height:auto;display:block}.move-demo-hand{width:34px}.move-demo-cursor{width:22px}.move-demo-pointer.is-pressed .move-demo-icon{transform:scale(.85)}.move-demo-key{border:1px solid var(--line-strong);background:var(--raised);width:28px;height:28px;color:var(--ink-strong);border-bottom-width:3px;border-radius:7px;justify-content:center;align-items:center;padding:0;font-size:16px;font-weight:700;transition:transform .15s,border-bottom-width .15s;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 3px 10px #0000002e}.move-demo-pointer.is-pressed .move-demo-key{border-bottom-width:1px;transform:translate(-50%,-50%)scale(.9)}.move-demo-solved{z-index:3;background:var(--green);height:24px;color:var(--on-green);white-space:nowrap;box-shadow:0 0 0 2px var(--surface);border-radius:12px;align-items:center;gap:4px;padding:0 10px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}.move-demo-solved .icon{stroke-width:3px}@media (prefers-reduced-motion:reduce){.move-demo-tile,.move-demo-pointer,.move-demo-icon,.move-demo-key{transition:none}}.App{flex-direction:column;width:100%;min-height:100vh;display:flex}.loading-screen{z-index:9999;background:linear-gradient(135deg,var(--lightningcss-light,#f8f9fa)var(--lightningcss-dark,#171717) 0%,var(--lightningcss-light,#e9ecef)var(--lightningcss-dark,#0f0f0f) 50%,var(--lightningcss-light,#f1f3f4)var(--lightningcss-dark,#141414) 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.main-content{width:100%;min-height:100vh}.loading-progress{text-align:center;position:absolute;bottom:80px;left:50%;transform:translate(-50%)}.loading-status{color:var(--lightningcss-light,#6c757d)var(--lightningcss-dark,#adb5bd);opacity:.8;margin:0;font-size:.9rem}.hint-message{margin-bottom:16px}@media (width<=768px){.loading-progress{bottom:60px}}