:root{--bg:#f3e6cf;--paper:#fff9eef0;--paper-solid:#fbf3e4;--edge:#8a6a4a47;--ink:#2b3a42;--dim:#6d6458;--teal:#2f8f8a;--teal-deep:#1f6e6a;--coral:#e2725b;--drift:#8a6a4a;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--serif:"Iowan Old Style", "Palatino", Georgia, serif;--round:ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--ink);overscroll-behavior:none;margin:0}body{font:17px/1.4 var(--round);-webkit-user-select:none;user-select:none;touch-action:manipulation}html.ios-short,html.ios-short body{height:100lvh}#app{display:flex;position:fixed;inset:0}.screen{min-width:0;min-height:0;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);flex-direction:column;flex:1;display:flex;position:relative}h1,h2,h3{font-family:var(--serif);margin:0;font-weight:700}h2{font-size:26px}h3{margin:18px 0 8px;font-size:18px}.dim{color:var(--dim);margin:0}.small{font-size:14px}.tiny{font-size:12px}.center{text-align:center}a{color:var(--teal-deep)}button{font:inherit;color:inherit;border:1px solid var(--edge);cursor:pointer;background:#ffffffb3;border-radius:14px;min-height:46px;padding:10px 18px}button:disabled{opacity:.4;cursor:default}button:active:not(:disabled){transform:translateY(1px)}button.primary{background:linear-gradient(#36a19b, var(--teal-deep));color:#fffaf0;border:0;font-weight:700;box-shadow:0 3px #155552,0 6px 14px #1f6e6a4d}button.wide{width:100%}button.text{color:var(--teal-deep);background:0 0;border:0;min-height:40px;font-weight:600}button.icon{background:var(--paper);border-radius:50%;place-items:center;width:46px;height:46px;padding:0;display:grid}.ic{flex:none;width:22px;height:22px;display:inline-grid}.ic svg{width:100%;height:100%}.title .art{background:url(/art/title.jpg) 50% 30%/cover no-repeat;position:absolute;inset:0}.title .art:after{content:"";background:linear-gradient(#fff0 55%,#f3e6cf99 75%,#f3e6cff2);position:absolute;inset:0}.title .gear{top:calc(var(--safe-t) + 10px);right:calc(var(--safe-r) + 12px);z-index:2;position:absolute}.logo-wrap{text-align:center;margin-top:max(5vh,28px);position:relative}.logo{letter-spacing:.01em;color:#fffaf0;text-shadow:0 2px #2b3a4259,0 6px 22px #2b3a4273;font-size:clamp(46px,14vw,72px);font-style:italic}.tagline{color:#fffaf0;text-shadow:0 1px 8px #2b3a428c;margin:2px 0 0;font-weight:600}.panel{background:var(--paper);border-radius:22px;flex-direction:column;align-self:center;gap:12px;width:calc(100% - 28px);max-width:520px;margin:auto 14px 14px;padding:16px;display:flex;position:relative;box-shadow:0 10px 30px #3c281440}button.big{justify-content:center;align-items:center;gap:10px;min-height:58px;font-size:20px;display:flex}.tiles{grid-template-columns:1fr 1fr;gap:10px;display:grid}.tile{text-align:left;background:#ffffffbf;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:10px 12px;display:grid}.tile .ic{color:var(--teal-deep);grid-row:span 2;width:26px;height:26px}.tile b{font-size:16px;line-height:1.15}.tile span{color:var(--dim);font-size:13px;line-height:1.2}.tile.fresh .ic{color:var(--coral)}.tile.done .ic{color:#c99a2e}.tile.locked{opacity:.85}.stats{text-align:center;color:var(--dim);margin:0;font-size:14px}.unlock{align-self:center}.bar{z-index:2;align-items:center;gap:10px;padding:8px 12px;display:flex;position:relative}.bar .where{flex-direction:column;flex:1;min-width:0;line-height:1.15;display:flex}.bar .where b{font-family:var(--serif);font-size:20px}.bar .where span{color:var(--dim);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}.bar .pours{color:var(--ink);background:var(--paper);white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}.bar .pours:empty{display:none}.play{background:url(/art/play.jpg) 50%/cover no-repeat}.play:before{content:"";pointer-events:none;background:linear-gradient(#f3e6cf8c,#f3e6cf2e 35%,#f3e6cf1a 70%,#f3e6cf8c);position:absolute;inset:0}.play .bar .where{background:var(--paper);border-radius:14px;flex:0 auto;margin-right:auto;padding:6px 12px}.tip{z-index:2;background:var(--paper);text-align:center;border-radius:12px;max-height:0;margin:0 16px;padding:0 14px;font-size:14px;transition:max-height .3s,padding .3s;position:relative;overflow:hidden}.tip.show{max-height:80px;padding:8px 14px}.stage{flex:1;min-height:0;position:relative}canvas.board{touch-action:none;width:100%;height:100%;position:absolute;inset:0}.tools{z-index:2;justify-content:center;gap:14px;padding:8px 16px 12px;display:flex;position:relative}.tool{background:var(--paper);border-radius:18px;flex-direction:column;align-items:center;gap:2px;min-width:84px;padding:8px 10px;font-size:13px;font-weight:600;display:flex;box-shadow:0 3px 10px #3c281426}.tool .ic{width:24px;height:24px;color:var(--teal-deep)}.hand{pointer-events:none;opacity:0;z-index:3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fffaf0' stroke='%232b3a42' stroke-width='1.3' stroke-linejoin='round' d='M9 11V4.5a1.5 1.5 0 0 1 3 0V10l.6-.2a1.5 1.5 0 0 1 2 1l.1.3.4-.1a1.5 1.5 0 0 1 1.9 1l.2.6.3-.1a1.5 1.5 0 0 1 1.9 1.1l.6 3c.3 1.6-.2 3.2-1.4 4.3L17.5 22h-6.8l-4-5.3a1.6 1.6 0 0 1 .3-2.2 1.6 1.6 0 0 1 2 .1Z'/%3E%3C/svg%3E") 50%/contain no-repeat;width:44px;height:44px;margin:-6px 0 0 -10px;transition:transform .45s,opacity .3s;position:absolute;top:0;left:0}.hand.show{opacity:1;animation:1.1s ease-in-out infinite tap}@keyframes tap{0%,to{margin-top:-6px}50%{margin-top:6px}}.sheet{z-index:10;background:#2b201400;justify-content:center;align-items:flex-end;transition:background .2s;display:flex;position:fixed;inset:0}.sheet.show{background:#2b20146b}.sheet .card{width:min(100%,520px);max-height:calc(100% - var(--safe-t) - 12px);background:var(--paper-solid);padding:20px 20px calc(18px + var(--safe-b));border-radius:24px 24px 0 0;transition:transform .22s ease-out;overflow:auto;transform:translateY(100%);box-shadow:0 -8px 30px #2b201440}.sheet.show .card{transform:none}.row{justify-content:space-between;align-items:center;gap:12px;min-height:48px;display:flex}.row .grow{flex-direction:column;display:flex}.row small{font-size:13px}.row input{width:22px;height:22px;accent-color:var(--teal)}.row select{max-width:60%;min-height:40px;font:inherit;color:var(--ink);border:1px solid var(--edge);appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231f6e6a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 11px center / 12px 8px no-repeat;border-radius:12px;padding:6px 30px 6px 12px;font-size:16px}.settings{flex-direction:column;gap:8px;display:flex}.solved{text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}.shells{gap:10px;display:flex}.shells .ic{color:#8a6a4a40;width:44px;height:44px}.shells .ic.on{color:#e9a86b;filter:drop-shadow(0 2px 2px #8a501e59)}.gift{background:#2f8f8a1f;border-radius:12px;align-items:center;gap:8px;margin:4px 0;padding:8px 12px;font-size:15px;display:flex}.gift .ic{color:var(--coral)}.actions{flex-direction:column;gap:10px;width:100%;margin-top:8px;display:flex}.row2{gap:10px;display:flex}.row2 button{flex:1}.zen{flex-direction:column;gap:10px;display:flex}.zen-size{text-align:left;flex-direction:column;align-items:flex-start;display:flex}.pw{flex-direction:column;gap:10px;display:flex}.pw-art{background:url(/art/stall-wide.jpg) 50%/cover;border-radius:24px 24px 0 0;height:110px;margin:-20px -20px 4px}.pw-list{flex-direction:column;gap:6px;margin:0;padding:0;font-size:15px;list-style:none;display:flex}.pw-list li{align-items:flex-start;gap:8px;display:flex}.pw-list .ic{color:var(--teal);width:20px;height:20px;margin-top:1px}.pw-action{flex-direction:column;gap:6px;margin-top:4px;display:flex}.pw-action button{justify-content:center;align-items:center;gap:8px;min-height:54px;font-size:18px;display:flex}.pw-soon{text-align:center;background:#2f8f8a1f;border-radius:12px;margin:0;padding:10px;font-size:15px}.pw-status{text-align:center;min-height:0;margin:0}.pw-status.bad{color:#b3412e}.pw-row{justify-content:center;gap:16px;display:flex}.pw-foot{text-align:center;color:var(--dim);margin:0}.badge{background:#ffe9a8;border-radius:999px;align-self:center;margin:0;padding:3px 10px;font-size:12px}.spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.coast,.shelf{background:linear-gradient(#cfe9ee, var(--bg) 40%)}.beaches{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:12px;padding:4px 14px 20px;display:flex;overflow:auto}.beach{background:var(--paper);border-left:6px solid var(--accent);border-radius:18px;padding:12px;box-shadow:0 3px 10px #3c28141a}.beach header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.beach header b{font-family:var(--serif);font-size:18px}.beach.locked{opacity:.7;cursor:pointer}.levels{grid-template-columns:repeat(10,1fr);gap:5px;display:grid}.lvl{background:#ffffffb3;border-radius:9px;min-height:30px;padding:0;font-size:12px;font-weight:700}.lvl.done{background:color-mix(in srgb, var(--accent) 30%, white);border-color:#0000}.lvl.next{background:var(--teal);color:#fff;border-color:#0000}.lvl.show{box-shadow:inset 0 0 0 2px #e9a86b}.shelf .scroll{flex:1;padding:0 16px 24px;overflow:auto}.styles{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.style{flex-direction:column;align-items:center;gap:2px;min-height:0;padding:6px 2px;font-size:12px;display:flex;position:relative}.style.on{border:2px solid var(--teal);background:#2f8f8a1f}.style .lock{width:16px;height:16px;color:var(--drift);position:absolute;top:4px;right:4px}canvas.piece{width:64px;height:110px;display:block}canvas.piece.small{width:44px;height:70px}.slots{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;display:grid}.slot{background:#ffffff8c;border-bottom:6px solid #a57c52;border-radius:14px;flex-direction:column;align-items:center;margin:0;padding:8px 2px 6px;display:flex}.slot .ghost{border:2px dashed #8a6a4a59;border-radius:10px 10px 12px 12px;width:34px;height:92px;margin:9px 0}.slot figcaption{text-align:center;color:var(--dim);min-height:26px;font-size:11px;line-height:1.15}.slot.got figcaption{color:var(--ink);font-weight:600}.notices{top:calc(var(--safe-t) + 8px);pointer-events:none;z-index:20;justify-content:center;display:flex;position:fixed;left:0;right:0}.notice{pointer-events:auto;color:#fffaf0;opacity:0;background:#2b3a42f0;border:0;border-radius:999px;max-width:min(92vw,520px);min-height:0;padding:10px 18px;transition:opacity .2s,transform .2s;transform:translateY(-12px)}.notice.show{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.hand.show{animation:none}.sheet .card{transition:none}}@media (min-width:700px) and (min-height:700px){.bar,.tip,.tools,.panel,.sheet .card,.beaches,.shelf .scroll,.notices,.logo-wrap,.title .gear{zoom:1.4}.beaches,.shelf .scroll{width:100%;max-width:620px;margin:0 auto}}