:root{--ink:#fff;--mut:#d9d2ff;--glass:#ffffff12;--line:#ffffff2e;--tile-ink:#1b1740;--lv-1:#fff;--lv-2:#f4eaff;--lv-3:#e3d3ff;--lv-4:#cfc0ff;--lv-5:#b7c4ff;--lv-6:#9dd6ff;--lv-7:#8ff0e4;--lv-8:#b6f5a8;--lv-9:#fff08a;--lv-10:#ffc98a;--lv-11:#ff9fb5;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Sora,system-ui,sans-serif}.app[data-set=travel]{--lv-1:#e0f7f4;--lv-2:#b8ede6;--lv-3:#8fe3d8;--lv-4:#7cd0f0;--lv-5:#a9c7ff;--lv-6:#c9b8ff;--lv-7:#f2b8e6;--lv-8:#ffb8b8;--lv-9:#ffd0a0;--lv-10:#ffe58a;--lv-11:#fff3b0}.app[data-set=travel] .board{background-image:radial-gradient(#ffffff29 1px,#0000 1.3px);background-size:14px 14px}.app[data-set=travel] .tile:not(.static){outline-offset:-9px;border:4px solid #fffdf7;outline:2px dashed #1b174047;gap:3px}.app[data-set=travel] .tile .num{font-size:calc(var(--cell) * .26)}.app[data-set=travel] .tile[data-digits="4"] .num{font-size:calc(var(--cell) * .22)}.app[data-set=travel] .tile .flag{margin-bottom:0}.board[data-size="6"] .tile .name{display:none}.app[data-set=foods]{--lv-1:#fff1d6;--lv-2:#ffe3a8;--lv-3:#ffd27a;--lv-4:#ffc46b;--lv-5:#ffb38a;--lv-6:#ffa3a3;--lv-7:#ff9fb5;--lv-8:#f5a9d0;--lv-9:#ddb0f0;--lv-10:#bfb8ff;--lv-11:#ffe27a}.app[data-set=foods] .board{background-image:conic-gradient(#ffffff17 25%, transparent 0 50%, #ffffff17 0 75%, transparent 0);background-size:28px 28px}.app[data-set=foods] .cell{border-radius:50%}.app[data-set=foods] .tile:not(.static){border:5px solid #fffdf7;border-radius:50%;box-shadow:inset 0 0 0 3px #1b174014,0 0 14px #ffd69659}.app[data-set=foods] .tile .num{font-size:calc(var(--cell) * .2)}.app[data-set=foods] .tile[data-digits="4"] .num{font-size:calc(var(--cell) * .17)}.emoji{font-size:calc(var(--cell) * .34);font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif;line-height:1.05}.app[data-set=animals]{--lv-1:#e6f4d7;--lv-2:#d2edb5;--lv-3:#bde58f;--lv-4:#a8dc7c;--lv-5:#f5e27a;--lv-6:#ffc857;--lv-7:#ffa94d;--lv-8:#ff8a5b;--lv-9:#f29c8f;--lv-10:#8ad6d6;--lv-11:#c7b3f0}.app[data-set=animals] .board{background-image:radial-gradient(circle at 25% 30%,#ffffff24 2.5px,#0000 3px),radial-gradient(circle at 75% 65%,#ffffff24 2.5px,#0000 3px);background-size:36px 36px}.app[data-set=animals] .tile:not(.static){border:4px solid #fffdf7;border-radius:30%;gap:2px;box-shadow:0 4px 10px #0a081e59}.app[data-set=animals] .tile .num{padding:2px calc(var(--cell) * .08);background:#ffffffc7;border-radius:999px}.app[data-set=animals] .emoji{font-size:calc(var(--cell) * .38)}.app[data-set=animals] .tile .num{font-size:calc(var(--cell) * .19)}.app[data-set=animals] .tile[data-digits="4"] .num{font-size:calc(var(--cell) * .16)}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:linear-gradient(135deg,#14123a,#2b1b6b 55%,#5b1f6e) fixed;margin:0}p,h1,h2{margin:0}button{font:inherit;cursor:pointer}button:focus-visible,.board:focus-visible{outline-offset:3px;outline:3px solid #fff}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{flex-direction:column;min-height:100vh;display:flex}.header{border-bottom:1px solid #ffffff1f;justify-content:space-between;align-items:center;height:88px;padding:0 clamp(20px,4vw,48px);display:flex}.wordmark{letter-spacing:-1.5px;background:linear-gradient(90deg,#b7c4ff,#ff9fb5);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:40px;font-weight:800}.row{align-items:center;gap:10px;display:flex}.main{flex:1;justify-content:center;align-items:center;gap:70px;padding:24px;display:flex}.panel{flex-direction:column;gap:28px;width:420px;display:flex}.label{letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-size:11px;font-weight:700}.hero-score{letter-spacing:-6px;font-variant-numeric:tabular-nums;font-size:112px;font-weight:800;line-height:.95}.stats{align-items:center;gap:20px;display:flex}.boxes{flex-direction:column;flex:1;gap:12px;display:flex}.box{background:#ffffff14;border:1px solid #fff3;border-radius:16px;padding:10px 18px}.box p:last-child{font-size:22px;font-weight:800}.hint{color:var(--mut);font-size:14px;font-weight:500}.hint-touch{display:none}@media (pointer:coarse){.hint-keys{display:none}.hint-touch{display:inline}}.btn{border:0;border-radius:16px;height:44px;padding:0 22px;font-size:15px;font-weight:700}.btn.primary{color:#1b1250;background:#fff}.btn.ghost{color:#fff;background:#ffffff1f;border:1px solid #ffffff40}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.wide{width:100%}.ring{flex:none;width:170px;height:170px;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{transition:stroke .2s}.ring-label{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ring-label strong{font-size:38px;font-weight:800;line-height:1}.ring-label span{color:var(--mut);margin-top:4px;font-size:12px;font-weight:700}.board{--bw:530px;--gap:10px;--cell:calc((var(--bw) - var(--gap) * (var(--n) + 1)) / var(--n));--radius:calc(var(--cell) * .17);width:var(--bw);height:var(--bw);background:var(--glass);border:1px solid var(--line);border-radius:calc(var(--radius) * 1.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);touch-action:none;-webkit-user-select:none;user-select:none;flex:none;position:relative}.board[data-size="5"]{--gap:9px}.board[data-size="6"]{--gap:8px}.cells{padding:var(--gap);grid-template-columns:repeat(var(--n), 1fr);gap:var(--gap);display:grid;position:absolute;inset:0}.cell{border-radius:var(--radius);background:#ffffff14}.tiles{pointer-events:none;position:absolute;inset:0}.tile{--step:calc(var(--cell) + var(--gap));width:var(--cell);height:var(--cell);transform:translate(calc(var(--c) * var(--step) + var(--gap)), calc(var(--r) * var(--step) + var(--gap)));border-radius:var(--radius);color:var(--tile-ink);z-index:2;background:var(--tile);box-shadow:0 0 18px color-mix(in srgb, var(--tile) 40%, transparent);flex-direction:column;justify-content:center;align-items:center;font-weight:700;transition:transform .12s ease-out;display:flex;position:absolute;top:0;left:0}.tile .num{font-size:calc(var(--cell) * .4);font-variant-numeric:tabular-nums;line-height:1}.tile[data-digits="3"] .num{font-size:calc(var(--cell) * .32)}.tile[data-digits="4"] .num{font-size:calc(var(--cell) * .26)}.tile[data-named] .num{font-size:calc(var(--cell) * .3)}.tile .name{font-size:max(10px, calc(var(--cell) * .1));white-space:nowrap;font-weight:700}.flag{width:calc(var(--cell) * .3);height:calc(var(--cell) * .2);border-radius:3px;margin-bottom:3px;display:block;overflow:hidden;box-shadow:0 0 0 1px #1b17404d}.flag svg{width:100%;height:100%;display:block}.tile .glyph{position:absolute;top:8px;left:9px}.tile.static{--cell:54px;--radius:14px;width:54px;height:54px;position:relative;transform:none}.tile.ghost{z-index:1;animation:80ms .12s forwards fade}.tile.merged{z-index:3;animation:.2s .12s backwards bump}.tile.new{animation:.18s .12s backwards pop}@keyframes pop{0%{opacity:0;scale:.2}}@keyframes bump{0%{opacity:0;scale:.7}60%{scale:1.12}}@keyframes fade{to{opacity:0}}.app[data-reduce-motion=true] .tile{transition:none;animation:none}.app[data-reduce-motion=true] .tile.ghost{display:none}.app[data-reduce-motion=true] .ring circle{transition:none}.lv-1{--tile:var(--lv-1)}.lv-2{--tile:var(--lv-2)}.lv-3{--tile:var(--lv-3)}.lv-4{--tile:var(--lv-4)}.lv-5{--tile:var(--lv-5)}.lv-6{--tile:var(--lv-6)}.lv-7{--tile:var(--lv-7)}.lv-8{--tile:var(--lv-8)}.lv-9{--tile:var(--lv-9)}.lv-10{--tile:var(--lv-10)}.lv-11{--tile:var(--lv-11)}.overlay{z-index:10;border-radius:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;background:#14123acc;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.overlay h2{letter-spacing:-1px;font-size:40px;font-weight:800;line-height:1.1}.overlay p{color:var(--mut);font-size:16px;font-weight:500}.sheet{border:1px solid var(--line);width:min(390px,100vw - 24px);max-height:calc(100vh - 24px);color:var(--ink);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#1f1654eb;border-radius:28px;padding:24px;overflow:auto}.sheet::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a081e99}.sheet[open]{flex-direction:column;gap:14px;display:flex}.sheet h2{letter-spacing:-1px;font-size:32px;font-weight:800}.seg{gap:6px;display:flex}.seg button{color:#fff;background:#ffffff1f;border:1px solid #ffffff40;border-radius:12px;flex:1;height:44px;font-weight:700}.seg button[aria-pressed=true]{color:#1b1250;background:#fff;border-color:#fff}.card{background:var(--glass);border:1px solid var(--line);border-radius:22px;flex-direction:column;gap:18px;padding:18px;display:flex}.card.step{gap:10px}.card.step p:nth-child(2){font-size:17px;font-weight:600;line-height:1.35}.card.step b{font-size:22px}.switch-wrap{flex-direction:column;gap:6px;display:flex}.note{color:var(--mut);font-size:13px;line-height:1.4}.note.warn{color:#ffc98a;font-weight:600}.lead{color:var(--mut);font-size:16px;font-weight:500;line-height:1.45}.switch:disabled{opacity:.4;cursor:not-allowed}.switch-row{justify-content:space-between;align-items:center;gap:12px;font-weight:600;display:flex}.switch{background:#ffffff40;border:0;border-radius:16px;justify-content:flex-start;width:56px;height:32px;padding:4px;display:flex}.switch i{background:#fff;border-radius:12px;width:24px;height:24px;transition:transform .15s}.switch[aria-checked=true]{background:#9dd6ff}.switch[aria-checked=true] i{background:#14123a;transform:translate(24px)}@media (width<=960px){.header{height:64px}.wordmark{font-size:30px}.header .btn{height:40px;padding:0 14px}.main{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:16px;padding:20px 19px}.panel{grid-template-columns:1fr auto;align-items:center;gap:16px;width:auto;display:grid}.stats{display:contents}.ring{grid-area:1/2;width:96px;height:96px}.ring-label strong{font-size:26px}.ring-label span{font-size:10px}.hero-score{letter-spacing:-3px;font-size:60px}.boxes{flex-direction:row;grid-area:2/1/auto/-1}.box{flex:1;padding:8px 14px}.box p:last-child{font-size:18px}.panel>.btn.wide{grid-area:3/1/auto/-1;height:48px}.panel>.hint{text-align:center;grid-column:1/-1}.board{--bw:min(530px, calc(100vw - 38px));align-self:center}.overlay h2{font-size:30px}.board:not([data-size="3"]) .tile .name{display:none}}
