:root{--backdrop-a:#fdf6e3;--backdrop-b:#e8f5d8;--tile-face:#fffdf7;--tile-edge:#d8c9a3;--tile-shade:#efe7d2;--accent:#3f8f4a;--accent-ink:#fff;--ink:#2f3b2c;--surface-ink:#2f3b2c;--celebrate-1:#f5c242;--celebrate-2:#7bc96f;--celebrate-3:#f08a8a;--hint:#e8a317;--tile-w:52px;--tile-h:calc(var(--tile-w) * 1.3);--tile-depth:calc(var(--tile-w) * .16);--tile-radius:calc(var(--tile-w) * .16);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--control-min:44px;--radius:14px;--shadow:0 2px 6px #00000024;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:linear-gradient(180deg, var(--backdrop-a) 0%, var(--backdrop-b) 100%);-webkit-text-size-adjust:100%;overscroll-behavior:none;background-attachment:fixed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1rem;line-height:1.45}#app{flex-direction:column;min-height:100%;display:flex}.boot{opacity:.7;margin:auto}button{font:inherit;color:inherit;cursor:pointer}.btn{min-height:var(--control-min);min-width:var(--control-min);border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);border:2px solid #0000;padding:.6em 1.1em;font-weight:600;transition:transform 90ms ease-out,box-shadow 90ms ease-out,filter 90ms ease-out}.btn:active{filter:brightness(.96);transform:translateY(2px)scale(.985);box-shadow:0 1px 3px #00000029}.btn--quiet{background:var(--tile-face);color:var(--surface-ink);border-color:var(--tile-edge)}.btn--big{width:100%;padding:.85em 1.4em;font-size:1.15rem}.btn--home-primary{min-height:64px;font-size:1.25rem;font-weight:750;box-shadow:0 4px 10px #0000002e}.btn--subtle{min-height:52px;color:var(--ink);box-shadow:none;background:0 0;border-color:#0000}.btn:not([disabled]):active{transform:translateY(1px);box-shadow:0 1px 3px #00000029}.btn[disabled]{opacity:.45;cursor:default}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.screen{padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);flex-direction:column;flex:1;gap:16px;display:flex}.screen--menu{justify-content:center;width:100%;max-width:460px;margin:0 auto}.screen--home{padding-top:calc(var(--safe-top) + clamp(18px, 5vh, 48px));padding-bottom:calc(var(--safe-bottom) + 20px);justify-content:flex-start;gap:clamp(12px,2.2vh,20px);overflow-y:auto}.menu-intro{flex-direction:column;align-items:center;gap:6px;display:flex}.title{text-align:center;letter-spacing:-.025em;margin:0;font-size:clamp(1.8rem,7vw,2.4rem)}.subtitle{text-align:center;opacity:.75;margin:0}.menu-stack{flex-direction:column;gap:12px;display:flex}.menu-stack--home .btn--quiet{min-height:56px}.menu-hero{aspect-ratio:2;background:radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--accent) 10%, transparent) 0 34%, transparent 66%), linear-gradient(180deg, color-mix(in srgb, var(--tile-face) 72%, transparent), transparent);border:1px solid color-mix(in srgb, var(--tile-edge) 66%, transparent);pointer-events:none;border-radius:28px;place-items:center;width:min(100%,360px);margin:-4px auto -8px;display:grid;overflow:hidden}.menu-hero picture{animation:6s ease-in-out infinite hero-float}@keyframes hero-float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-5px)scale(1.012)}}.menu-hero--demo,.menu-hero--vessel{aspect-ratio:auto;pointer-events:auto;height:clamp(190px,27vh,250px);position:relative}.menu-hero--demo .board-viewport{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.menu-hero__lid{cursor:pointer;border-radius:inherit;background:0 0;border:0;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}.menu-hero__lid:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.menu-hero--vessel{place-items:center;display:grid}.menu-hero--vessel .vessel{width:clamp(130px,19vh,175px);height:clamp(130px,19vh,175px)}.menu-hero picture,.menu-hero img{width:100%;height:100%;display:block}.menu-hero img{object-fit:contain}.menu-status{font-size:.9rem}@media (max-height:699px) and (orientation:portrait){.screen--home{padding-top:calc(var(--safe-top) + 12px);gap:10px}.menu-intro{gap:2px}.menu-hero{width:min(100%,260px);margin-block-start:-6px;margin-block-end:0}.menu-stack--home{gap:8px}}@media (orientation:landscape) and (max-height:560px){.screen--home{max-width:900px;padding:calc(var(--safe-top) + 10px) calc(var(--safe-right) + 18px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 18px);grid-template-columns:minmax(240px,.9fr) minmax(280px,1fr);align-items:center;gap:18px 28px;display:grid}.screen--home .menu-intro{min-width:0}.screen--home .menu-hero{width:min(100%,320px)}.screen--home .notice,.screen--home .menu-status{grid-column:1/-1}}.game{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);flex-direction:column;flex:1;min-height:0;display:flex}.game__bar{flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.game__count{font-weight:700}.game__progress{flex-direction:column;align-items:center;gap:2px;margin:0 auto;display:flex}.game__progress .game__count{font-size:.85rem;font-weight:650}.game__tools{padding:8px 12px calc(8px + var(--safe-bottom));flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.game__tools .btn{flex:1 1 0;min-width:88px}.game__tools--camera .btn{white-space:nowrap;min-width:0;padding:.6em .3em;font-size:.92rem}.game__controls{flex-direction:column;display:flex}@media (orientation:landscape) and (max-height:560px){.game{grid-template:"bar bar""board controls"1fr/1fr auto;min-height:0;display:grid}.game__bar{grid-area:bar;padding-block-start:4px;padding-block-end:4px}.game__progress{flex-direction:row;align-items:center;gap:8px}.board-viewport{grid-area:board;min-height:0}.game__controls{padding-right:calc(var(--safe-right) + 10px);padding-bottom:var(--safe-bottom);grid-area:controls;justify-content:center;gap:6px}.game__tools{flex-direction:column;gap:6px;padding:0}.game__tools .btn{min-width:92px;padding-block-start:.45em;padding-block-end:.45em}}.board-viewport{touch-action:none;flex:1;min-height:0;position:relative;overflow:hidden}.game .board-viewport:before{content:"";border:5px solid color-mix(in srgb, var(--tile-edge) 76%, var(--accent) 24%);background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--tile-face) 52%, transparent) 0%, color-mix(in srgb, var(--tile-face) 20%, transparent) 44%, transparent 72%), repeating-linear-gradient(112deg, transparent 0 9px, color-mix(in srgb, var(--tile-edge) 7%, transparent) 9px 10px), linear-gradient(180deg, color-mix(in srgb, var(--backdrop-a) 68%, var(--tile-face) 32%), color-mix(in srgb, var(--backdrop-b) 80%, var(--tile-edge) 20%));box-shadow:inset 0 0 0 1px #ffffffc7, inset 0 0 0 5px color-mix(in srgb, var(--tile-edge) 12%, transparent), inset 0 -14px 24px color-mix(in srgb, var(--tile-edge) 14%, transparent), 0 8px 19px #2e3d231a;pointer-events:none;border-radius:28px;position:absolute;top:7px;bottom:8px;left:8px;right:8px}.board{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.game .board{z-index:1;filter:drop-shadow(0 13px 10px #392f1e2e)}.tile{width:var(--tile-w);height:var(--tile-h);border:2px solid var(--tile-edge);border-radius:var(--tile-radius);background:var(--tile-face);color:var(--surface-ink);place-items:center;padding:0;transition:transform .1s ease-out,box-shadow .1s ease-out;display:grid;position:absolute;box-shadow:1px 2px #0000002e}.tile[hidden]{display:none}.tile svg{pointer-events:none;width:88%;height:88%;display:block}.tile[data-layer="1"]{box-shadow:2px 3px #0003}.tile[data-layer="2"]{box-shadow:3px 4px #00000038}.tile[data-layer="3"]{box-shadow:4px 5px #0000003d}.tile[data-layer="4"]{box-shadow:5px 6px #00000042}.tile--blocked:after{content:"";border-radius:inherit;pointer-events:none;background:#0000001f;position:absolute;top:0;bottom:0;left:0;right:0}.tile--selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent), 2px 6px 8px #00000038;border-width:3px;transform:translateY(-4px);z-index:99000!important}.tile--hinted{border-color:var(--hint);animation:.9s ease-in-out 3 hint-pulse;z-index:98000!important}.tile--hinted:before{content:"";border-radius:inherit;background:var(--hint);opacity:.2;pointer-events:none;animation:.9s ease-in-out 3 hint-wash;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes hint-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--hint) 0%, transparent), 1px 2px 0 #0000002e;transform:scale(1)}50%{box-shadow:0 0 0 5px var(--hint), 0 0 14px 2px color-mix(in srgb, var(--hint) 55%, transparent), 1px 2px 0 #0000002e;transform:scale(1.06)}}@keyframes hint-wash{0%,to{opacity:.08}50%{opacity:.3}}.pop{pointer-events:none;z-index:96000;place-items:center;animation:.34s cubic-bezier(.4,0,.4,1) forwards pop-out;display:grid;position:absolute}@keyframes pop-out{0%{opacity:1;transform:translate(0)scale(1)}28%{transform:translate(calc(var(--pop-dx,0px) * .12), calc(var(--pop-dy,0px) * .12 - 12px)) scale(1.12);opacity:1}to{transform:translate(var(--pop-dx,0px), var(--pop-dy,0px)) scale(.3);opacity:0}}.tile--refused{animation:.32s ease-in-out refuse-shake;z-index:97000!important}@keyframes refuse-shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}45%{transform:translate(3px)}70%{transform:translate(-2px)}90%{transform:translate(1px)}}.sparkle{pointer-events:none;z-index:96001;border-radius:50%;width:7px;height:7px;animation:.32s ease-out forwards sparkle-fly;position:absolute}@keyframes sparkle-fly{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--dx), var(--dy)) scale(.2);opacity:0}}@media (prefers-reduced-motion:reduce){:root{--motion:0}}[data-reduced-motion=true] .tile,[data-reduced-motion=true] .pop,[data-reduced-motion=true] .sparkle,[data-reduced-motion=true] .tile--hinted,[data-reduced-motion=true] .tile--dealing,[data-reduced-motion=true] .tile--refused,[data-reduced-motion=true] .vessel__flow,[data-reduced-motion=true] .vessel__glass,[data-reduced-motion=true] .vessel--splash .vessel__liquid,[data-reduced-motion=true] .blob__inner,[data-reduced-motion=true] .menu-hero picture,[data-reduced-motion=true] .screen--home .title,[data-reduced-motion=true] .screen--home .subtitle,[data-reduced-motion=true] .screen--home .menu-hero,[data-reduced-motion=true] .menu-stack--home .btn,[data-reduced-motion=true] .btn--home-primary,[data-reduced-motion=true] .sheet,[data-reduced-motion=true] .sheet__panel,[data-reduced-motion=true] .confetti__piece{transition-duration:1ms!important;animation:none!important}[data-reduced-motion=true] .btn:active{filter:brightness(.94);transform:none}[data-reduced-motion=true] .tile--selected{transform:none}[data-reduced-motion=true] .pop{animation:.16s linear forwards fade-out!important}[data-reduced-motion=true] .sparkle{display:none}[data-reduced-motion=true] .tile--hinted{outline:4px solid var(--hint);outline-offset:2px;transform:none}[data-reduced-motion=true] .tile--hinted:before{opacity:.22;animation:none!important}@keyframes fade-out{to{opacity:0}}.screen--home .title{animation:.42s ease-out backwards rise-in}.screen--home .menu-hero{animation:.5s ease-out 60ms backwards rise-in}.screen--home .subtitle{animation:.42s ease-out .15s backwards rise-in}.menu-stack--home .btn{animation:.38s ease-out backwards rise-in}.menu-stack--home .btn:first-child{animation-delay:.2s}.menu-stack--home .btn:nth-child(2){animation-delay:.26s}.menu-stack--home .btn:nth-child(3){animation-delay:.32s}.menu-stack--home .btn:nth-child(4){animation-delay:.38s}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.btn--home-primary{animation:.38s ease-out .2s backwards rise-in,2.6s ease-in-out 1.2s 3 primary-glow}@keyframes primary-glow{0%,to{box-shadow:0 4px 10px #0000002e}50%{box-shadow:0 4px 10px #0000002e, 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}}.tile--dealing{animation:.3s cubic-bezier(.2,.9,.3,1.3) backwards deal-in;animation-delay:var(--deal-delay,0s)}@keyframes deal-in{0%{opacity:0;transform:translateY(-16px)scale(.86)}to{opacity:1;transform:translateY(0)scale(1)}}.vessel{filter:drop-shadow(0 2px 3px #0000002e);flex:none;width:56px;height:56px;position:relative}@media (orientation:landscape) and (max-height:560px){.vessel{width:34px;height:34px}}.vessel:before{content:"";background:color-mix(in srgb, var(--tile-edge) 26%, var(--tile-face));border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.vessel__clip{border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.vessel__liquid{width:100%;position:absolute;top:0;left:0}.vessel__flow{height:100%;width:calc(var(--tile-w,90px) * 2);background-repeat:repeat-x;background-size:var(--tile-w,90px) 100%;filter:saturate(1.5);animation:16s linear infinite liquid-flow;position:absolute;top:0;left:0}@keyframes liquid-flow{0%{transform:translate(0)}to{transform:translateX(calc(var(--tile-w,90px) * -1))}}.vessel__round{pointer-events:none;background:radial-gradient(circle at 34% 28%,#ffffff29 0 18%,#0000 52%),linear-gradient(90deg,#00000038 0%,#0000 28% 72%,#00000038 100%);border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.vessel__glass{pointer-events:none;opacity:.72;background-image:url(/vessel/glass.webp);background-size:100% 100%;position:absolute;top:0;bottom:0;left:0;right:0}.vessel--splash .vessel__liquid{animation:.56s ease-out vessel-splash}@keyframes vessel-splash{0%{transform-origin:50% 100%}30%{scale:1.06 .94}60%{scale:.97 1.03}to{scale:1}}.vessel--burst{animation:.32s ease-in forwards vessel-burst}@keyframes vessel-burst{0%{filter:brightness();transform:scale(1)}45%{filter:brightness(1.5);transform:scale(1.35)}to{opacity:0;filter:brightness(2);transform:scale(1.9)}}.vessel--full .vessel__glass{box-shadow:inset 0 0 0 2px var(--hint);border-radius:50%;animation:1.4s ease-in-out infinite vessel-full}@keyframes vessel-full{0%,to{opacity:1}50%{opacity:.72}}.blob{pointer-events:none;z-index:9800;width:0;height:0;position:fixed;top:0;left:0}.blob__inner{border:2px solid #00000038;border-radius:50%;width:26px;height:26px;position:absolute;transform:translate(-50%,-50%);box-shadow:inset -3px -3px 7px #ffffff8c,inset 2px 3px 5px #00000029,0 3px 8px #00000047}.confetti{pointer-events:none;z-index:10001;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.confetti__piece{opacity:0;width:9px;height:14px;animation-name:confetti-fall;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;top:-24px}.confetti__piece--burst{animation-name:confetti-burst;animation-timing-function:cubic-bezier(.15,.6,.5,1)}@keyframes confetti-burst{0%{opacity:0;transform:translate(0)rotate(0)}6%{opacity:1}30%{transform:translate(var(--burst-x), var(--burst-y)) rotate(calc(var(--spin) * .3))}80%{opacity:1}to{opacity:0;transform:translate(calc(var(--burst-x) * 1.5), 100vh) rotate(var(--spin))}}@keyframes confetti-fall{0%{opacity:0;transform:translate(0)rotate(0)}8%{opacity:1}85%{opacity:1}to{opacity:0;transform:translate(var(--drift), 102vh) rotate(var(--spin))}}.sheet{padding:calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px);z-index:10000;background:#00000073;place-items:center;animation:.16s ease-out fade-in;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sheet__panel{background:var(--tile-face);color:var(--surface-ink);border-radius:20px;flex-direction:column;gap:14px;width:min(420px,100%);max-height:100%;padding:20px;animation:.24s cubic-bezier(.2,.9,.3,1.15) sheet-in;display:flex;overflow:auto;box-shadow:0 10px 40px #0000004d}@keyframes sheet-in{0%{opacity:0;transform:translateY(18px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.sheet__panel h2{margin:0;font-size:1.3rem}.sheet__panel p{margin:0}.sheet__actions{flex-direction:column;gap:10px;display:flex}.field{min-height:var(--control-min);justify-content:space-between;align-items:center;gap:12px;display:flex}.field label{font-weight:600}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;display:grid}.theme-card{border:2px solid var(--tile-edge);border-radius:var(--radius);background:var(--tile-face);color:var(--surface-ink);min-height:var(--control-min);text-align:left;flex-direction:column;gap:6px;padding:8px;display:flex}.theme-card[aria-pressed=true]{border-color:var(--accent);border-width:3px}.theme-card[disabled]{opacity:.55}.theme-card__swatch{border:1px solid #0000001f;border-radius:8px;height:34px}.theme-card__name{font-size:.85rem;font-weight:600}.theme-card--new{box-shadow:0 0 0 4px var(--celebrate-1)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.notice{border-radius:var(--radius);background:var(--tile-shade);color:var(--surface-ink);border:1px solid var(--tile-edge);padding:10px 12px}
