canvas#c{cursor:grab}canvas#c:active{cursor:grabbing}.bar{position:fixed;left:0;right:0;bottom:0;z-index:2;padding:0 40px calc(28px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;pointer-events:none}.side{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:8px;pointer-events:auto}.flavor{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.where{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.where .seg button{height:40px;min-width:0;padding:0 14px;border-radius:10px;font-size:13px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.where .seg svg{width:16px;height:16px;flex:none}.controls{display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto}.row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.row .pill{gap:10px;white-space:nowrap;height:40px;padding:0 16px;font-size:14px}.row .pill svg{width:16px;height:16px}.seg button{height:40px;min-width:64px;padding:0 14px;border-radius:10px;font-size:13px}.controls .hint{text-align:center;max-width:52ch;line-height:1.45}.scorebox{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;padding-bottom:6px;pointer-events:auto}.scoreline{display:flex;align-items:baseline;gap:14px}.score{font-family:var(--serif);font-size:48px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;min-width:1ch;display:inline-block;transform-origin:70% 80%}.score.bump{animation:bump .32s ease}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}to{transform:scale(1)}}.event{margin:0;min-height:1.2em;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.2;color:var(--plum);opacity:0;transition:opacity .35s ease}.event.show{opacity:1}.best{margin:0;font-size:11px;letter-spacing:.08em;color:var(--mauve)}.toast{position:fixed;top:calc(24px + env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:6;margin:0;padding:10px 20px;border-radius:999px;pointer-events:none;background:#ffffffdb;border:1.5px solid var(--line);box-shadow:0 10px 30px #3c142824;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.2;color:var(--plum);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;animation:toast-in .45s cubic-bezier(.2,.9,.3,1.2) both;transition:opacity .35s,transform .35s}.toast.hide{opacity:0;transform:translate(-50%,-8px)}.toast[hidden]{display:none}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.toast{animation:none;transition:none}.event{transition:none}.score.bump{animation:none}}@media(max-width:1100px){.controls .hint{max-width:40ch}.score{font-size:40px}}@media(max-width:760px){.bar{grid-template-columns:1fr;padding:24px 16px calc(14px + env(safe-area-inset-bottom));gap:10px;background:linear-gradient(180deg,#f4eef200,#f4eef2eb 30%)}.side{justify-self:stretch;width:100%;gap:10px;padding-bottom:0}.flavor{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:10px}.flavor .label{flex:none}.where{width:100%;gap:0}.where .label{display:none}.where .seg{width:100%;gap:8px}.where .seg button{flex:1;height:44px;min-height:44px;justify-content:center;padding:0 10px}.swatches{gap:4px}.swatch{width:24px;height:24px}.controls{width:100%;gap:8px}#more{width:100%;justify-content:space-between;min-height:46px}.row{width:100%;gap:8px}.row .pill{flex:1 1 40%;justify-content:center;min-height:44px;height:44px;padding:0 12px}.row .seg{flex:1 1 100%;gap:6px}.seg button{flex:1;height:44px;min-width:0}.hint{display:none}.scorebox{justify-self:stretch;width:100%;flex-direction:row;align-items:center;gap:12px;text-align:left;padding-bottom:0}.scoreline{gap:10px;align-items:center}.scoreline .event{order:1}.score{font-size:32px}.event{font-size:15px}.best{margin-left:auto;white-space:nowrap}.toast{top:calc(30px + 1.72*clamp(34px,10vw,56px) + env(safe-area-inset-top));font-size:16px;padding:9px 16px}}@media(max-width:359px){.swatches{gap:3px;flex-wrap:wrap;justify-content:flex-end}.swatch{width:22px;height:22px}}@media(max-height:520px)and (orientation:landscape){.bar{grid-template-columns:auto 1fr auto;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;background:linear-gradient(180deg,#f4eef200,#f4eef2e6 40%)}.side{justify-self:start;width:auto;flex-direction:row;align-items:center;gap:8px;padding-bottom:0}.flavor{width:auto;flex-direction:row}.flavor .label{display:none}.where{width:auto;gap:0}.where .label{display:none}.where .seg{width:auto;gap:4px}.where .seg button{flex:none;width:44px;height:44px;min-height:0;padding:0;justify-content:center}.where .seg button span{display:none}.swatches{width:124px;flex-wrap:wrap;gap:4px}.swatch{width:24px;height:24px}.controls{width:auto;flex-direction:row;justify-content:center;gap:8px}#more{width:auto;height:44px;min-height:0;padding:0 16px;justify-content:center;gap:10px}.row{width:auto;flex-wrap:nowrap;gap:8px}.row .pill{flex:none;width:44px;height:44px;min-height:0;padding:0;justify-content:center}.row .pill span{display:none}.row .seg{flex:none;gap:4px}.seg button{flex:none;height:44px;min-width:0;padding:0 10px}.hint{display:none}.scorebox{justify-self:end;width:auto;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}.scoreline{gap:8px;align-items:baseline}.scoreline .event{order:0}.score{font-size:30px}.event{font-size:13px}.best{margin-left:0;font-size:10px}.toast{top:calc(12px + env(safe-area-inset-top));font-size:15px;padding:8px 14px;max-width:min(300px,calc(100vw - 32px))}}@media(max-height:520px)and (orientation:landscape)and (max-width:700px){.event{display:none}#more{width:44px;padding:0;gap:0}#more span,#more svg:last-child{display:none}.seg button{padding:0 8px}.where .seg button{padding:0}}