:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--font-game:"Baloo 2 Variable", "Baloo 2", system-ui, sans-serif;--gutter:16px;--gap:clamp(6px, 1.2vmin, 14px);--radius-card:18px;--radius-panel:20px;--radius-button:22px;--radius-tile:18%;--bg-sky:#2f9bf0;--bg-lake:#3cb6e8;--bg-floor:#b8724a;--hud-level-top:#fff;--hud-level-bottom:#dfe8f6;--hud-level-border:#8fadd6;--hud-level-value:#13306b;--hud-level-icon:#d93025;--hud-shuffle-top:#fff;--hud-shuffle-bottom:#dfe8f6;--hud-shuffle-border:#8fadd6;--hud-shuffle-value:#13306b;--hud-shuffle-icon:#1f6fe0;--hud-score-top:#fff;--hud-score-bottom:#dfe8f6;--hud-score-border:#8fadd6;--hud-score-value:#13306b;--hud-score-icon:#f2a900;--hud-best-top:#fff;--hud-best-bottom:#dfe8f6;--hud-best-border:#8fadd6;--hud-best-value:#13306b;--hud-best-icon:#e08e00;--hud-rank-top:#fff;--hud-rank-bottom:#dfe8f6;--hud-rank-border:#8fadd6;--hud-rank-value:#13306b;--hud-rank-icon:#e08e00;--hud-label:#244c9a;--timebar-track:#fff;--timebar-border:#7f9db9;--timebar-fill-from:#8ee26b;--timebar-fill-to:#2f9e2a;--timebar-warn:#ffb020;--timebar-danger:#ff4d5e;--board-bg:#0e2b5c;--board-border:#0a3a8c;--board-shadow:inset 0 2px 6px #00000073;--tile-face-top:#fff7e6;--tile-face-bottom:#f4e3c3;--tile-edge:#d6b98a;--tile-outline:#e8d3aa;--tile-selected:#ffa51f;--tile-selected-glow:#ffb020bf;--tile-selected-top:#ffe9b8;--tile-selected-bottom:#ffc867;--tile-selected-edge:#e09a2c;--tile-selected-tint:#ffc44059;--tile-shadow:#00000059;--tile-hint:#6fe3ff;--tile-hint-glow:#6fe3ffcc;--path-color:#ffd34d;--mahjong-red:#c62828;--mahjong-green:#1b8a3a;--mahjong-blue:#1f4fa8;--mahjong-ink:#1d2433;--tile-back-top:#4b8fd6;--tile-back-bottom:#2f6fb6;--tile-back-mark:#ffffff59;--bomb-bg:#2b2f3a;--bomb-text:#fff;--bomb-danger:#e53935;--board-message-bg:#0a1a2ec7;--btn-blue-top:#45adff;--btn-blue-bottom:#1f6fe0;--btn-blue-edge:#1450a6;--btn-purple-top:#a46bff;--btn-purple-bottom:#6d35e0;--btn-purple-edge:#4a20a6;--btn-orange-top:#ffd23a;--btn-orange-bottom:#ff9a1a;--btn-orange-edge:#c96a08;--btn-cyan-top:#3fd2f5;--btn-cyan-bottom:#1596d8;--btn-cyan-edge:#0d6aa3;--btn-red-top:#ff6474;--btn-red-bottom:#e02e4a;--btn-red-edge:#a51a33;--badge-bg:#e8303c;--overlay-backdrop:#0a285a59;--screen-top:#f4f8fe;--screen-bottom:#e3ecf8;--screen-border:#0b4fd0;--screen-text-muted:#3d5677;--screen-shadow:0 12px 30px #040e1e73;--choice-bg:#fff;--choice-border:#8fadd6;--ribbon-top:#ffd23a;--ribbon-bottom:#ff9a1a;--ribbon-text:#5a2a00;--focus-ring:#316ac5;--text-light:#fff;--text-shadow-strong:0 2px 0 #00000059;--accent-blue:#2f80ed;--accent-blue-soft:#e4effd;--accent-green:#23a055;--accent-green-soft:#e2f5e8;--accent-orange:#f07d0c;--accent-orange-soft:#fff0dc;--accent-purple:#7c4dff;--accent-purple-soft:#eee7ff;--card-bg:#fff;--card-border:#7aa7e8;--card-shadow:0 2px 4px #001e5033;--device-frame:#253a52;--device-frame-edge:#9fb1c6;--dialog-bg-bottom:#123a63;--dialog-border:#4f93d1;--dialog-shadow:0 18px 50px #00000080;--home-bg:#fffaf0f7;--home-shadow:0 20px 60px #06142859;--ink:#1d3557;--ink-muted:#52637a;--link:#1d6fe0;--link-hover:#1450a8;--measure:70ch;--nav-active-bg:#2f80ed;--nav-hover-bg:#ffffff24;--radius-input:12px;--site-header-bg:#0e2c4cdb;--site-header-h:64px;--site-logo-h:42px;--surface:#fff;--surface-alt:#eef5ff;--surface-border:#d5e3f5;--tile-selected-face-bottom:#ffc867;--tile-selected-face-top:#ffe9b8;--xp-title-top:#3d95ff;--xp-title-mid:#0a5ce0;--xp-title-bottom:#0546c4;--xp-frame:#0b4fd0;--xp-frame-light:#7aa7e8;--xp-window-bg:#eef3fb;--xp-status-bg:#e4ebf6;--xp-btn-top:#fff;--xp-btn-bottom:#d9e4f5;--xp-btn-border:#4a6fae;--xp-btn-hover:#fff4cf;--xp-select:#316ac5;--xp-text:#13306b;--xp-green-top:#8ee26b;--xp-green-mid:#45b83a;--xp-green-bottom:#2b8a22;--xp-green-edge:#1d6416;--xp-close-top:#f39a7a;--xp-close-bottom:#c8401c;--xp-taskbar-top:#3f8cf3;--xp-taskbar-bottom:#1f55c8;--xp-tray:#0f8ff5;--xp-footer-top:#2c6fe6;--xp-footer-bottom:#1847b5;--xp-yellow:#ffd23a;--xp-daily-top:#fffaf0;--xp-daily-bottom:#ffeec2;--xp-pane-top:#7ba2e7;--xp-pane-bottom:#6375d6;--xp-pane-head-top:#fff;--xp-pane-head-bottom:#c6d3f7;--xp-pane-body:#d6dff7;--xp-pane-text:#215dc6;--xp-folder-top:#ffe9a6;--xp-folder-bottom:#f5c443;--xp-folder-edge:#c99a22;--wall-sky-top:#1b6fdc;--wall-sky-mid:#4ea3f5;--wall-sky-low:#a9dcff;--wall-hill-far:#7fcf4f;--wall-hill-mid:#57b33a;--wall-hill-near:#3f9a2b}*{box-sizing:border-box}html{height:100%}body{background:var(--bg-floor);min-height:100%;color:var(--text-light);font-family:var(--font-game);-webkit-tap-highlight-color:transparent;margin:0}#app{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;position:relative}button{font:inherit}[hidden]{display:none!important}#app svg{width:100%;height:100%;display:block}.scene{z-index:-1;background:url(/assets/lake-landscape-BBaOzyW_.webp) center bottom / cover no-repeat, linear-gradient(180deg, var(--bg-sky) 0%, var(--bg-lake) 65%, var(--bg-floor) 82%);position:fixed;inset:0}@media (orientation:portrait){.scene{background-image:url(/assets/lake-portrait-CqVQ1eVw.webp), linear-gradient(180deg, var(--bg-sky) 0%, var(--bg-lake) 70%, var(--bg-floor) 85%)}}#app{flex-direction:column;display:flex}#app>.shell{flex:1;width:100%;min-height:0}.menubar{padding:4px max(var(--gutter), env(safe-area-inset-right)) 4px max(var(--gutter), env(safe-area-inset-left));color:var(--xp-text);background:var(--xp-status-bg);border-bottom:1px solid var(--xp-frame-light);flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:14px;display:flex}.menubar__item{align-items:center;gap:6px;display:flex}.menubar__label{font-weight:700}.menubar__select{max-width:100%;color:var(--xp-text);font:inherit;background:var(--choice-bg);border:1px solid var(--choice-border);cursor:pointer;border-radius:3px;padding:2px 4px;font-weight:600}.menubar__select:hover{background:var(--xp-btn-hover)}.menubar__select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.menubar__daily{font-weight:800}.menubar__hint{min-width:0;color:var(--screen-text-muted);text-align:right;white-space:nowrap;text-overflow:ellipsis;flex:200px;overflow:hidden}.shell{--chrome-width:min(100%, max(var(--board-width,100%), 640px));gap:var(--gap);max-width:1440px;height:100%;padding:8px max(var(--gutter), env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));flex-direction:column;margin:0 auto;display:flex;overflow:clip}.hud,.timebar,.toolbar{width:var(--chrome-width);margin-inline:auto}.hud{--hud-label:clamp(10px, .9vmin + 6px, 18px);--hud-value:clamp(20px, 4.4vmin, 46px);gap:var(--gap);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid}.stat{--top:var(--hud-level-top);--bottom:var(--hud-level-bottom);--border:var(--hud-level-border);--value:var(--hud-level-value);--icon:var(--hud-level-icon);min-width:0;padding:.3em .6em .35em calc(var(--hud-value) * .95 + .9em);color:var(--hud-label);background:linear-gradient(180deg, var(--top), var(--bottom));border:1px solid var(--border);border-radius:6px;flex-direction:column;justify-content:center;align-items:flex-start;display:flex;position:relative;box-shadow:inset 0 1px #ffffffe6,0 1px 2px #0a285a40}.stat--shuffle{--top:var(--hud-shuffle-top);--bottom:var(--hud-shuffle-bottom);--border:var(--hud-shuffle-border);--value:var(--hud-shuffle-value);--icon:var(--hud-shuffle-icon)}.stat--score{--top:var(--hud-score-top);--bottom:var(--hud-score-bottom);--border:var(--hud-score-border);--value:var(--hud-score-value);--icon:var(--hud-score-icon)}.stat--best{--top:var(--hud-best-top);--bottom:var(--hud-best-bottom);--border:var(--hud-best-border);--value:var(--hud-best-value);--icon:var(--hud-best-icon)}.stat--rank{--top:var(--hud-rank-top);--bottom:var(--hud-rank-bottom);--border:var(--hud-rank-border);--value:var(--hud-rank-value);--icon:var(--hud-rank-icon);cursor:pointer;transition:transform .1s}.stat--rank:hover{transform:translateY(-2px)}.stat__label{font-size:var(--hud-label);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-weight:800;line-height:1.1}.stat--rank .stat__label{color:var(--value)}.stat__value{font-size:var(--hud-value);color:var(--value);font-variant-numeric:tabular-nums;font-weight:800;line-height:1}.stat__icon{width:calc(var(--hud-value) * .95);height:calc(var(--hud-value) * .95);color:var(--icon);position:absolute;top:50%;left:.55em;transform:translateY(-50%)}.stat__trophy{width:calc(var(--hud-value) * .95);height:calc(var(--hud-value) * .95);color:var(--icon)}.timebar{--progress:1;--size:clamp(30px, 3.8vmin, 40px);width:calc(var(--chrome-width) * .82);align-items:center;display:flex}.timebar__clock{z-index:1;width:var(--size);height:var(--size);margin-right:calc(var(--size) * -.35);color:var(--xp-select);background:var(--timebar-track);border:1px solid var(--timebar-border);border-radius:50%;flex:none;padding:3px;position:relative;box-shadow:0 1px 2px #0a285a4d}.timebar__track{height:calc(var(--size) * .7);padding:3px 4px 3px calc(var(--size) * .45);background:var(--timebar-track);border:1px solid var(--timebar-border);border-radius:4px;flex:1;box-shadow:inset 0 1px 3px #0a285a4d}.timebar__fill{width:calc(var(--progress) * 100%);background:repeating-linear-gradient(90deg, transparent 0 calc(var(--size) * .42), var(--timebar-track) calc(var(--size) * .42) calc(var(--size) * .48)), linear-gradient(180deg, var(--timebar-fill-from), var(--timebar-fill-to));border-radius:2px;height:100%;transition:width .25s linear}.timebar[data-level=warn] .timebar__fill{background:var(--timebar-warn)}.timebar[data-level=danger] .timebar__fill{background:var(--timebar-danger)}.board-area{flex:1;place-items:center;min-height:0;display:grid;container-type:size}.board-frame{--pad:clamp(6px, 1.2vmin, 14px);--frame-extra:calc(2 * var(--pad) + 6px);--tile-w:min((100cqw - var(--frame-extra)) / var(--cols,16), (100cqh - var(--frame-extra)) / var(--rows,9) * var(--tile-aspect,1));--tile-h:calc(var(--tile-w) / var(--tile-aspect,1));padding:var(--pad);background:var(--board-bg);border:2px solid var(--board-border);box-shadow:var(--board-shadow), inset 0 2px 0 #ffffff14;border-radius:6px}.board{width:calc(var(--tile-w) * var(--cols,16));height:calc(var(--tile-h) * var(--rows,9));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;position:relative}.board__canvas{left:calc(var(--tile-w) * -1);top:calc(var(--tile-h) * -1);width:calc(100% + 2 * var(--tile-w));height:calc(100% + 2 * var(--tile-h));pointer-events:none;position:absolute}.toolbar{--btn-h:clamp(44px, 7.5vmin, 68px);gap:var(--gap);grid-template-columns:repeat(4,1fr);padding-bottom:6px;display:grid;container-type:inline-size}.toolbar .btn{padding-inline:.5em}.btn{--top:var(--btn-blue-top);--bottom:var(--btn-blue-bottom);--edge:var(--btn-blue-edge);min-width:0;height:var(--btn-h);color:var(--xp-text);font-size:calc(var(--btn-h) * .29);background:linear-gradient(180deg, var(--xp-btn-top), var(--xp-btn-bottom));border:1px solid var(--xp-btn-border);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:.45em;padding:0 .9em;font-weight:700;transition:transform 80ms,box-shadow 80ms,filter .15s;display:flex;position:relative;box-shadow:inset 0 1px #fffffff2,inset 0 -2px #0a285a1f,0 2px 3px #0a285a4d}.btn:hover{border-color:var(--xp-btn-hover);box-shadow:inset 0 0 0 2px var(--xp-btn-hover), 0 2px 3px #0a285a4d}.btn:active{background:linear-gradient(180deg, var(--xp-btn-bottom), var(--xp-btn-top));transform:translateY(1px);box-shadow:inset 0 2px 3px #0a285a40}.btn:focus-visible,.stat--rank:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}.btn:disabled{filter:grayscale(.8)brightness(.85);cursor:not-allowed}.btn--purple{--top:var(--btn-purple-top);--bottom:var(--btn-purple-bottom);--edge:var(--btn-purple-edge)}.btn--orange{--top:var(--btn-orange-top);--bottom:var(--btn-orange-bottom);--edge:var(--btn-orange-edge)}.btn--cyan{--top:var(--btn-cyan-top);--bottom:var(--btn-cyan-bottom);--edge:var(--btn-cyan-edge)}.btn--red{--top:var(--btn-red-top);--bottom:var(--btn-red-bottom);--edge:var(--btn-red-edge)}.btn__icon{width:1.5em;height:1.5em;color:var(--bottom);flex:none}.screen .btn--orange{color:var(--text-light);background:linear-gradient(180deg, var(--xp-green-top), var(--xp-green-mid) 55%, var(--xp-green-bottom));border-color:var(--xp-green-edge);text-shadow:0 1px 0 var(--xp-green-edge)}.screen .btn--orange .btn__icon{color:var(--text-light)}.btn__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.badge{min-width:26px;height:26px;text-shadow:none;background:var(--badge-bg);border:2px solid var(--text-light);color:var(--text-light);border-radius:999px;place-items:center;padding:0 6px;font-size:15px;display:grid;position:absolute;top:-10px;right:-6px;box-shadow:0 2px 4px #00000059}.overlay{z-index:10;padding:var(--gutter);background:var(--overlay-backdrop);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);grid-template-columns:minmax(0,460px);place-content:safe center;animation:.18s ease-out overlay-in;display:grid;position:absolute;inset:0;overflow-y:auto}.screen{--btn-h:clamp(46px, 7vmin, 60px);width:100%;color:var(--xp-text);text-align:center;background:linear-gradient(180deg, var(--screen-top), var(--screen-bottom));border:3px solid var(--screen-border);box-shadow:var(--screen-shadow);border-radius:10px 10px 6px 6px;flex-direction:column;align-items:center;gap:clamp(10px,2vmin,18px);padding:0 clamp(16px,4vmin,28px) clamp(16px,3vmin,24px);animation:.22s cubic-bezier(.2,.9,.3,1.2) screen-in;display:flex}.screen__title{color:var(--text-light);text-align:left;text-shadow:1px 1px #00000059;background:linear-gradient(180deg, var(--xp-title-top), var(--xp-title-mid) 45%, var(--xp-title-bottom));border-radius:6px 6px 0 0;align-self:stretch;margin:0 calc(-1*clamp(16px,4vmin,28px)) 4px;padding:6px 14px;font-size:clamp(18px,3.4vmin,24px);font-weight:800;line-height:1.2}.screen__text{color:var(--screen-text-muted);margin:0;font-size:clamp(15px,2.2vmin,18px);line-height:1.45}.screen__text b{color:var(--xp-text)}.screen__link{color:var(--xp-select);text-underline-offset:3px;font-weight:700;text-decoration:underline}.screen__stats{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;width:100%;display:grid}.screen__stat{--top:var(--hud-level-top);--bottom:var(--hud-level-bottom);--border:var(--hud-level-border);--value:var(--hud-level-value);background:linear-gradient(180deg, var(--top), var(--bottom));border:1px solid var(--border);border-radius:6px;flex-direction:column;align-items:center;padding:.5em .4em;display:flex}.screen__stat--shuffle{--top:var(--hud-shuffle-top);--bottom:var(--hud-shuffle-bottom);--border:var(--hud-shuffle-border);--value:var(--hud-shuffle-value)}.screen__stat--score{--top:var(--hud-score-top);--bottom:var(--hud-score-bottom);--border:var(--hud-score-border);--value:var(--hud-score-value)}.screen__stat--best{--top:var(--hud-best-top);--bottom:var(--hud-best-bottom);--border:var(--hud-best-border);--value:var(--hud-best-value)}.screen__stat-label{white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:800}.screen__stat-value{color:var(--value);font-variant-numeric:tabular-nums;font-size:clamp(24px,4.5vmin,34px);font-weight:800;line-height:1.1}.screen__ribbon{color:var(--ribbon-text);background:linear-gradient(180deg, var(--ribbon-top), var(--ribbon-bottom));border-radius:999px;padding:.2em 1.2em;font-size:clamp(16px,2.6vmin,20px);font-weight:800;animation:.6s ease-in-out infinite alternate ribbon-pop}.screen__actions{flex-wrap:wrap;justify-content:center;gap:12px 14px;width:100%;margin-top:6px;padding-bottom:6px;display:flex}.screen__actions .btn{flex:150px}@keyframes overlay-in{0%{opacity:0}}@keyframes screen-in{0%{opacity:0;transform:scale(.9)translateY(12px)}}@keyframes ribbon-pop{to{transform:scale(1.06)}}@container (width<=520px){.toolbar .btn{padding:0}.toolbar .btn__label{display:none}.toolbar .btn__icon{width:1.9em;height:1.9em}}@media (width<=760px){:root{--gutter:10px;--radius-card:14px;--radius-button:18px}.shell{--chrome-width:100%}.menubar{flex-wrap:nowrap;gap:6px;font-size:13px}.menubar__item,.menubar__daily{flex:1 1 0;min-width:0}.menubar__select{width:100%}.menubar__label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.menubar__hint{display:none}.stat{padding:.35em .5em .4em}.stat__icon,.stat--rank .stat__label{display:none}.btn{padding:0}.btn__label{display:none}.screen .btn{padding:0 .9em}.screen .btn__label{display:inline}.screen .btn__icon{width:1.5em;height:1.5em}.btn__icon{width:1.9em;height:1.9em}}@media (orientation:landscape) and (height<=520px){.menubar{padding-block:2px;font-size:12px}.menubar__hint{display:none}.shell{padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(8px, env(safe-area-inset-bottom));grid-template-rows:auto minmax(0,1fr);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.hud,.timebar,.toolbar{width:auto;margin:0}.hud{--hud-value:clamp(18px, 6vh, 28px);grid-area:1/1/3;grid-auto-flow:row;align-content:center;width:clamp(72px,11vw,112px)}.stat{border-width:2px;padding:.3em .2em}.stat__icon{display:none}.timebar{grid-area:1/2}.board-area{grid-area:2/2}.toolbar{--btn-h:clamp(40px, 12vh, 56px);grid-area:1/3/3;grid-template-columns:var(--btn-h);align-content:center;gap:clamp(8px,2.4vh,14px)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}