:root{--bg:#0b1f2e;--board:#123a4a;--cell:#1b4d5e;--stone:#5b6b73;--text:#e8f4f0;--muted:#9fb8c2;--s1:#b8c4ff;--s2:#7cffb2;--s3:#2ec27e;--s4:#c77dff;--s5:#ff7ac6;--s6:#ffd23f;--s7:#4dd0e1;--anim-slide:.12s;--anim-spawn:.16s;--anim-harvest:.2s;--anim-screen:.24s;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-reduced-motion:reduce){:root{--anim-slide:0s;--anim-spawn:0s;--anim-harvest:0s;--anim-screen:0s}.tile,.tile-inner,.board,.overlay,.screen,.star,.order,.order:after,.order-reward,.goal-intro,.btn,.toast,.play-area{transition:none!important;animation:none!important}.fx,.fx-rain,.float-score{display:none!important}.btn:active:not(:disabled){transform:none}}:focus-visible{outline:3px solid var(--s2);outline-offset:2px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:radial-gradient(120% 80% at 50% 0%, #12344a 0%, var(--bg) 60%) fixed, var(--bg);min-height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}html.framed{scrollbar-width:none}html.framed::-webkit-scrollbar{display:none}html.framed body{min-height:calc(100vh + 1px)}body{-webkit-user-select:none;user-select:none}#app{--pad-top:max(12px, env(safe-area-inset-top));--pad-bottom:max(16px, env(safe-area-inset-bottom));min-width:320px;max-width:560px;padding:var(--pad-top) 12px var(--pad-bottom);margin:0 auto;position:relative}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:0;position:absolute;top:0;left:0;overflow:hidden}.screen{animation:screen-in var(--anim-screen) ease-out}@keyframes screen-in{0%{opacity:0;transform:translateY(6px)}}h2{margin:0;font-size:1.35rem}.muted{color:var(--muted)}.btn{border-radius:var(--radius);border:2px solid var(--cell);background:var(--board);min-width:44px;min-height:48px;color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:1.02rem;font-weight:650;transition:transform 80ms ease-out,background-color .12s;display:inline-flex}.btn:hover:not(:disabled){background:#17485b}.btn:active:not(:disabled){transform:scale(.97)}.btn:focus-visible,.level-card:focus-visible{outline:3px solid var(--s2);outline-offset:2px}.board:focus{outline:none}.board:focus-visible{outline:3px solid var(--s2);outline-offset:3px}.btn-label{white-space:nowrap}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:linear-gradient(90deg, var(--s2), var(--s7));color:#06202b;border-color:#0000}.btn-primary:hover:not(:disabled){background:linear-gradient(90deg,#95ffc3,#6fdcea)}.btn-icon{width:48px;padding:8px}.btn-lang{gap:6px;padding:8px 12px;font-size:.95rem}.btn .icon-globe{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;width:20px;height:20px}.btn-armed{border-color:var(--s6);color:#fff3c4;background:#3a3418}.btn .icon{flex:none;width:24px;height:24px}.btn-sub{opacity:.8;font-size:.8rem;font-weight:500;display:block}.btn .count{background:var(--bg);min-width:22px;height:22px;color:var(--s6);border-radius:11px;padding:0 6px;font-size:.8rem;line-height:22px}.screen-home{flex-direction:column;align-items:center;padding-top:8px;display:flex}.home-top{justify-content:flex-end;align-self:stretch;gap:8px;display:flex}.logo{margin:12px 0 4px;line-height:0}.logo img{width:min(320px,86vw);height:auto}.subtitle{text-align:center;color:var(--muted);margin:6px 0 24px}.menu{flex-direction:column;gap:12px;width:min(340px,100%);display:flex}.menu .btn{flex-direction:column;gap:2px;min-height:56px}.menu .btn:has(.icon){flex-direction:row;gap:8px}.screen-head{grid-template-columns:48px 1fr auto;align-items:center;gap:12px;margin-bottom:16px;display:grid}.screen-head h2{text-align:center}.screen-head .spacer{width:48px}.total-stars{color:var(--s6);text-align:right;min-width:48px;font-weight:700}.level-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;display:grid}.level-card{border:2px solid var(--cell);background:var(--board);min-height:112px;color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation;border-radius:16px;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;display:flex;position:relative}.level-card:hover:not(:disabled){border-color:var(--s7)}.level-card.locked{opacity:.55;cursor:not-allowed}.level-card.in-progress{border-color:var(--s2)}.level-card.btn-armed{border-color:var(--s6)}.level-num{font-size:1.6rem;font-weight:800;line-height:1.1}.level-name{white-space:normal;color:var(--muted);text-align:center;font-size:.82rem}.level-card .lock{width:26px;height:26px}.stars{gap:2px;display:inline-flex}.stars .star{width:20px;height:20px}.badge{background:var(--s2);color:#06202b;border-radius:8px;padding:2px 6px;font-size:.68rem;font-weight:700;position:absolute;top:6px;right:6px}.screen-game{height:calc(100vh - var(--pad-top) - var(--pad-bottom));height:calc(100svh - var(--pad-top) - var(--pad-bottom));flex-direction:column;display:flex;position:relative}.screen-game>.overlay-host{position:absolute}.topbar{grid-template-columns:48px 1fr auto;align-items:center;gap:10px;display:grid}.game-title{text-overflow:ellipsis;white-space:nowrap;font-size:.98rem;font-weight:700;overflow:hidden}.score{background:var(--board);border-radius:12px;flex-direction:column;align-items:flex-end;min-width:72px;padding:4px 12px;display:flex}.score small{color:var(--muted);font-size:.7rem}.score b{font-variant-numeric:tabular-nums;font-size:1.25rem}.status-row{flex-wrap:wrap;gap:6px;min-height:30px;margin:10px 0;display:flex}.chip{background:var(--board);border:1px solid var(--cell);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;padding:4px 10px;font-size:.86rem;display:inline-flex}.chip-goal{gap:5px;font-weight:700}.chip-icon{flex:none;width:16px;height:16px}.chip-star{color:var(--s6);border-color:#ffd23f73}.chip.warn{border-color:var(--s5);color:#ffd0ea}.chip-record{border-color:var(--s6);color:var(--s6);font-weight:700}.play-area{min-height:0;transition:opacity var(--anim-screen), filter var(--anim-screen);flex:0 auto;grid-template-rows:auto minmax(0,min(460px,100vw - 24px)) auto;grid-template-columns:1fr;gap:10px;display:grid}.dimmed .play-area{opacity:.35;filter:blur(1px)}.orders{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.order{border:3px solid var(--s7);background:#123a4a;border-radius:14px;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;min-height:56px;padding:6px 12px;display:grid;position:relative}.order.bump{animation:.26s ease-out bump}@keyframes bump{40%{transform:scale(1.08)}}.order:after{content:"";box-shadow:0 0 0 3px var(--s6), 0 0 12px #ffd23fb3;opacity:0;pointer-events:none;border-radius:11px;position:absolute;inset:0}.orders.hint-glow .order:after{opacity:1;animation:1s ease-in-out infinite alternate glow}@keyframes glow{0%{opacity:.15}}.orders{position:relative}.order-reward{z-index:5;background:var(--s6);color:#2b2100;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;border-radius:999px;align-items:center;padding:1px 7px;font-size:.72rem;font-weight:800;line-height:1;animation:1.4s ease-out forwards reward-in;display:flex;position:absolute;transform:translate(-50%,-60%);box-shadow:0 1px 3px #00000073}.order-reward>span[aria-hidden]{align-items:center;gap:1px;display:inline-flex}.order-reward .icon-rewind{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:.95em;height:.95em}.dimmed .order-reward{display:none}@keyframes reward-in{0%{opacity:0;transform:translate(-50%,-20%)}15%,80%{opacity:1;transform:translate(-50%,-60%)}to{opacity:0;transform:translate(-50%,-60%)}}.order img{grid-row:span 2;width:36px;height:36px}.order-count{font-variant-numeric:tabular-nums;font-weight:800}.order-pts{color:var(--muted);font-size:.72rem}.order.fresh{animation:pop var(--anim-harvest) ease-out}.goal-intro{z-index:6;border:2px solid var(--s2);max-width:calc(100% - 16px);color:var(--text);white-space:nowrap;text-overflow:ellipsis;pointer-events:none;animation:fade-in var(--anim-screen) ease-out;background:#06202beb;border-radius:999px;margin:0;padding:6px 14px;font-size:.92rem;font-weight:700;position:absolute;top:10px;left:50%;overflow:hidden;transform:translate(-50%)}.board-wrap{justify-content:center;align-items:center;min-height:0;display:flex;position:relative;container-type:size}.board{width:min(100%,460px,100svh - 330px);aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background-size:100% 100%;border-radius:6%;width:min(100cqw,100cqh,460px);position:relative}.board:active{cursor:grabbing}.board-layer{position:absolute;inset:0}.tile,.stone{width:17.073%;height:17.073%;transform:translate(calc(var(--c) * 114.286%), calc(var(--r) * 114.286%));will-change:transform;position:absolute;top:2.439%;left:2.439%}.tile{transition:transform var(--anim-slide) cubic-bezier(.2, .9, .3, 1.03);z-index:2}.tile.pop,.tile.spawn{z-index:3}.tile-inner,.stone{border-radius:22%}.tile-inner{background:#0b1f2e59;border-radius:22%;width:100%;height:100%}.tile[data-stage="1"] .tile-inner{box-shadow:inset 0 0 0 2px #b8c4ff59}.tile[data-stage="2"] .tile-inner{box-shadow:inset 0 0 0 2px #7cffb259}.tile[data-stage="3"] .tile-inner{box-shadow:inset 0 0 0 2px #2ec27e73}.tile[data-stage="4"] .tile-inner{box-shadow:inset 0 0 0 2px #c77dff73}.tile[data-stage="5"] .tile-inner{box-shadow:inset 0 0 0 2px #ff7ac680}.tile[data-stage="6"] .tile-inner{box-shadow:inset 0 0 0 2px #ffd23f8c}.tile[data-stage="7"] .tile-inner{box-shadow:inset 0 0 0 2px #4dd0e199,0 0 12px #4dd0e180}.tile img,.stone img{pointer-events:none;width:100%;height:100%;display:block}.tile.pop .tile-inner{animation:.22s cubic-bezier(.3,.7,.4,1) pop}.tile.pop.big .tile-inner{animation:.34s cubic-bezier(.3,.7,.4,1) pop-big}.tile.spawn .tile-inner{animation:.22s cubic-bezier(.34,1.56,.64,1) backwards spawn}.tile.hl .tile-inner{outline-offset:-3px;outline:3px solid #ffffffbf}.fx-layer{z-index:5;pointer-events:none;border-radius:6%;position:absolute;inset:0;overflow:hidden}.fx{pointer-events:none;will-change:transform, opacity;position:absolute}.fx-ring{border:3px solid var(--k);width:17%;height:17%;box-shadow:0 0 10px var(--k), inset 0 0 8px var(--k);border-radius:50%}.fx-p{background:var(--k);width:3.4%;height:3.4%;box-shadow:0 0 5px var(--k);border-radius:50%}.fx-p.fx-leaf{background:var(--s3);width:4.4%;height:2.8%;box-shadow:none;border-radius:0 100%}.fx-fly{z-index:15;filter:drop-shadow(0 0 6px #ffd23fcc);background:50%/contain no-repeat;position:fixed;top:0;left:0}.fx-rain{pointer-events:none;position:absolute;inset:0;overflow:hidden}.fx-petal{background:var(--k);opacity:.9;width:12px;height:9px;animation:fall var(--t) var(--d) cubic-bezier(.35, .1, .6, 1) both;border-radius:60% 0;position:absolute;top:0}.fx-petal.fx-leaf{border-radius:0 100%;width:9px;height:14px}@keyframes fall{0%{transform:translateY(-20px)rotate(0)}to{transform:translate(var(--x), 100vh) rotate(var(--r));opacity:.2}}.tile.harvest{z-index:4;pointer-events:none}.tile[data-match="1"]:after{content:"";background:var(--s7);width:18%;height:18%;box-shadow:0 0 0 2px var(--bg);border-radius:50%;position:absolute;top:6%;right:6%}.float-score{z-index:6;width:17.073%;height:17.073%;transform:translate(calc(var(--c) * 114.286%), calc(var(--r) * 114.286%));color:#fff;text-shadow:0 1px #06202b,0 0 6px #06202be6;pointer-events:none;justify-content:center;align-items:center;font-size:clamp(.85rem,3.6cqmin,1.15rem);font-weight:900;animation:.6s ease-out forwards float-up;display:flex;position:absolute;top:2.439%;left:2.439%}.float-score.float-order{color:var(--s6)}@keyframes float-up{0%{opacity:1;translate:0 10%}70%{opacity:1}to{opacity:0;translate:0 -60%}}.tile.harvest .tile-inner{animation:harvest var(--anim-harvest) ease-in forwards}.board.shake{animation:.18s ease-in-out shake}.board.lose{animation:.42s ease-in-out shake}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes pop-big{0%{transform:scale(1);box-shadow:0 0 #0000}40%{box-shadow:0 0 18px 4px var(--glow,#ffd23fcc);transform:scale(1.25)}to{transform:scale(1)}}.tile[data-stage="5"]{--glow:#ff7ac6cc}.tile[data-stage="7"]{--glow:#4dd0e1d9}@keyframes spawn{0%{opacity:0;transform:scale(.3)}}@keyframes star-in{0%{opacity:0;transform:scale(0)rotate(-40deg)}60%{opacity:1;transform:scale(1.3)rotate(8deg)}}@keyframes harvest{to{opacity:0;transform:translateY(-40%)scale(1.25)}}@keyframes shake{25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.side{justify-content:space-between;align-items:center;gap:10px;display:flex}.queue{background-repeat:no-repeat;background-size:100% 100%;flex-direction:column;align-items:center;gap:2px;min-height:56px;padding:6px 14px;display:flex}.queue .label{white-space:nowrap;color:var(--muted);font-size:.78rem}.queue-slots{align-items:center;gap:6px;display:flex}.queue-item{opacity:.7;width:34px;height:34px}.queue-item.next{opacity:1;width:42px;height:42px}.hint{text-align:center;min-height:1.4em;color:var(--s1);flex:none;margin:10px 0 0;font-size:.95rem;line-height:1.35}.toast{left:50%;bottom:max(20px, env(safe-area-inset-bottom));z-index:30;border:1px solid var(--cell);opacity:0;pointer-events:none;background:#0e2a3a;border-radius:12px;margin:0;padding:8px 14px;transition:opacity .15s,transform .15s;position:fixed;transform:translate(-50%,8px)}.toast.show{opacity:1;transform:translate(-50%)}.overlay{z-index:20;animation:fade-in var(--anim-screen) ease-out;background:#0b1f2eb8;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.panel{background:var(--board);border:2px solid var(--cell);text-align:center;border-radius:20px;flex-direction:column;align-items:stretch;gap:10px;width:min(340px,100%);max-height:100%;padding:20px;display:flex;overflow:auto;box-shadow:0 16px 48px #00000073}.panel h2{margin-bottom:4px}.panel-info,.panel-actions{flex-direction:column;align-items:stretch;gap:10px;min-width:0;display:flex}.panel-row{justify-content:center;gap:8px;display:flex}.stat{margin:0}.stat b{font-variant-numeric:tabular-nums;font-size:1.2rem}.stars-big{justify-content:center;gap:6px;margin:4px 0}.stars-big .star{width:44px;height:44px;animation:.38s cubic-bezier(.3,.7,.4,1) .22s backwards star-in}.stars-big .star.on{filter:drop-shadow(0 0 6px #ffd23fbf)}.stars-big .star:nth-child(2){animation-delay:.48s}.stars-big .star:nth-child(3){animation-delay:.74s}.star-next{color:var(--s6);margin:0;font-size:.92rem;font-weight:650}.goal-gap{font-weight:700}.tip{color:var(--s2);background:#7cffb214;border-radius:10px;margin:0;padding:6px 10px;font-size:.9rem}.badge-record{background:var(--s6);align-self:center;margin:0;font-size:.85rem;position:static}@keyframes fade-in{0%{opacity:0}}.howto-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.howto-item{background:var(--board);border-radius:16px;grid-template-columns:112px 1fr;align-items:center;gap:12px;padding:12px;display:grid}.howto-item h3{margin:0 0 4px;font-size:1rem}.howto-item p{color:var(--muted);margin:0;font-size:.9rem}.art-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;display:flex;position:relative}.art-row .mini{width:34px;height:34px}.art-row.stages .mini{width:26px;height:26px}.art-row .icon-big{width:30px;height:30px}.art-row .arrow{color:var(--s2);font-size:1.4rem}.art-row .gap{width:10px}.order-demo{padding:8px}.order-demo .card-bg{width:100%;height:100%;position:absolute;inset:0}.order-demo>:not(.card-bg){position:relative}.keys{color:var(--muted);text-align:center;margin:16px 0 0;font-size:.85rem}@media (max-width:360px){.howto-item{grid-template-columns:1fr}.order{padding:6px}.order img{width:28px;height:28px}.btn{padding:10px 12px}}@media (min-width:760px){#app{max-width:840px}.screen-home,.screen-levels,.screen-howto{max-width:560px;margin:0 auto}.play-area{grid-template-rows:minmax(0,min(480px,100vw - 344px));grid-template-columns:150px 1fr 150px;align-items:start}.board-wrap{align-self:stretch;align-items:flex-start}.orders{grid-template-columns:1fr}.order{min-height:72px}.side{flex-direction:column;align-items:stretch}.queue{flex-direction:column;padding:12px}.board{width:min(100%,480px,100svh - 220px);width:min(100cqw,100cqh,480px)}}@media (orientation:landscape) and (max-height:540px){#app{--board-side:min(calc(100svh - var(--pad-top) - var(--pad-bottom)), 58vw);max-width:960px;padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right))}.screen-game{grid-template-columns:var(--board-side) minmax(0, 1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"board top""board status""board orders""board side""board hint";align-content:start;gap:8px 16px;display:grid}.play-area{display:contents}.topbar{grid-area:top}.status-row{grid-area:status;margin:0}.orders{grid-area:orders;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0}.order{column-gap:4px;min-width:0;min-height:52px;padding:4px 8px;overflow:hidden}.order:after{border-radius:11px;inset:0}.order img{width:30px;height:30px}.order-count,.order-pts{white-space:nowrap;min-width:0}.topbar,.status-row,.side,.hint{min-width:0}.board-wrap{grid-area:board;align-items:center;height:100%}.side{flex-direction:row;grid-area:side;align-items:center}.queue{padding:6px 14px}.hint{text-align:left;grid-area:hint;margin:0}.dimmed .play-area>*{opacity:.35;filter:blur(1px)}}@media (orientation:landscape) and (max-height:540px) and (max-width:700px){#app{--board-side:min(calc(100svh - var(--pad-top) - var(--pad-bottom)), 54vw)}.screen-game{column-gap:12px}.order{column-gap:3px;padding:4px 5px}.order img{width:26px;height:26px}.order-count{font-size:.9rem}.order-pts{font-size:.66rem}.queue{padding:4px 10px}.hint{font-size:.86rem}}@media (orientation:landscape) and (max-height:540px){.overlay{padding:8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left))}.panel-end{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:16px;width:min(620px,100%);padding:12px 16px;display:grid}.panel-end .panel-info,.panel-end .panel-actions{gap:6px}.panel-end h2{margin-bottom:0;font-size:1.15rem}.panel-end .stars-big{margin:0}.panel-end .stars-big .star{width:34px;height:34px}.panel-end .tip{padding:4px 8px;font-size:.85rem}.panel-end .btn{min-height:44px;padding:6px 12px;font-size:.95rem}}