@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}

/* ------------------------------------------------------------------------------------------------------------
   Tokens

   The interface has three forms, chosen by input and size (never by the user agent), and each form lays the same
   chrome out its own way. The rule that survives rotation: Orders top-left, Book and a More menu top-right, the
   flavors on the left, Pour on the right.
     web     a pointer and room: a dock at the bottom centre, keyboard shortcuts and tooltips, the book is a drawer
     tablet  a touch screen, both sides at least 600 px (iPad): the flavor tray bottom-left under the left thumb and a
             round Pour bottom-right under the right one; the book is a floating sheet beside the table (landscape)
             or rises from the bottom (portrait)
     phone   a touch screen with a short side under 600 px, or any window narrower than that, or an upright window under 700 px
             (iPhone, and a foldable's cover screen and its inner screen held upright: the iPhone Duo's are about 466 and 626 px wide):
             in portrait one capsule at the bottom (the flavors and Pour); in landscape the flavors become a left column and Pour
             a round button on the right, so the table opens up
   --form carries the name to ui.js (UI.form), which lays the table out around the chrome. Keep the media queries here
   in step with nothing else: ui.js reads the form, it never repeats them.

   Two materials: frosted paper (the web) and Liquid Glass (iOS). On iOS 26 the app draws the chrome natively and hides
   this copy (data-native); the CSS glass below is what iOS 15-25 and Safari on an iPad see.
   ------------------------------------------------------------------------------------------------------------ */
:root {
  --form: web;
  --ink: #0d0d0f;
  --soft: #4a4a52;
  --mute: #6b6b75;
  --line: rgba(13, 13, 15, 0.1);
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --st: env(safe-area-inset-top, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);

  /* frosted paper */
  --surf-bg: rgba(255, 255, 255, 0.8);
  --surf-filter: blur(22px) saturate(1.5);
  --surf-border: 1px solid rgba(13, 13, 15, 0.09);
  --surf-shadow: 0 22px 44px -28px rgba(30, 30, 60, 0.4), 0 1px 2px rgba(30, 30, 60, 0.05);
  --sheet-bg: rgba(255, 255, 255, 0.88);
  --sheet-filter: blur(22px) saturate(1.5);
  --rim: 0;
  --ink-bg: var(--ink);
  --ink-shadow: 0 14px 26px -14px rgba(13, 13, 15, 0.75);
  --card-bg: rgba(13, 13, 15, 0.035);
  --card-shadow: none;
  --seg-bg: rgba(13, 13, 15, 0.06);
  --seg-on: #fff;
  --seg-on-shadow: 0 1px 3px rgba(13, 13, 15, 0.14);
  --btn-on-bg: var(--ink);
  --btn-on-ink: #fff;
  --btn-on-shadow: none;
  --btn-hover: rgba(13, 13, 15, 0.07);
  --divider: rgba(13, 13, 15, 0.1);
  --close-bg: rgba(13, 13, 15, 0.06);
  --sub: #6b6b75;
  --body: #4a4a52;
}

/* Liquid Glass, approximated: a cool tint with a bright top-left rim and a faint bottom-right one, saturated blur
   behind it, soft depth under it. (The real material is native in the app: see ios/BouncyJelly/ChromeOverlay.swift.) */
html[data-material="glass"] {
  --surf-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.62), rgba(231, 236, 250, 0.3) 55%, rgba(255, 255, 255, 0.46));
  --surf-filter: blur(16px) saturate(1.9) brightness(1.04);
  --surf-border: 0 solid transparent;
  --surf-shadow: 0 0 0 0.5px rgba(24, 30, 64, 0.16), 0 18px 36px -14px rgba(34, 42, 90, 0.36), 0 3px 10px -3px rgba(34, 42, 90, 0.14),
    inset 0 1.5px 1px -0.5px #fff, inset 0 -2px 3px -1px rgba(64, 76, 140, 0.2), inset 0 0 26px rgba(255, 255, 255, 0.5);
  --sheet-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(240, 243, 252, 0.74));
  --sheet-filter: blur(34px) saturate(1.8);
  --rim: 1;
  --ink-bg: linear-gradient(180deg, rgba(62, 62, 70, 0.94), rgba(13, 13, 15, 0.96));
  --ink-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 18px 30px -10px rgba(13, 13, 15, 0.6), 0 3px 8px rgba(13, 13, 15, 0.22),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.55);
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-shadow: 0 0 0 0.5px rgba(20, 26, 56, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  --seg-bg: rgba(20, 26, 56, 0.07);
  --seg-on-shadow: 0 1px 4px rgba(20, 26, 56, 0.2), inset 0 1px 1px #fff;
  --btn-on-bg: rgba(255, 255, 255, 0.7);
  --btn-on-ink: var(--ink);
  --btn-on-shadow: 0 0 0 0.5px rgba(24, 30, 64, 0.1), 0 2px 6px rgba(34, 42, 90, 0.18), inset 0 1px 1px #fff;
  --btn-hover: rgba(255, 255, 255, 0.5);
  --divider: rgba(20, 26, 56, 0.14);
  --close-bg: rgba(20, 26, 56, 0.07);
  --sub: #5f5f6a;
  --body: #3a3a42;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: #fff; overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; touch-action: manipulation; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tn { font-variant-numeric: tabular-nums; }
.ser { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: none; outline: none; }

/* ------------------------------------------------------------ cursor */
#cursor {
  position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 60;
  opacity: 0; transition: opacity 0.2s;
}
#cursor.show { opacity: 1; }
#cursor i {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 1.5px solid rgba(13, 13, 15, 0.8); background: rgba(13, 13, 15, 0);
  transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s, border-color 0.2s;
}
#cursor.grab i { transform: scale(2.15); background: rgba(13, 13, 15, 0.07); border-color: rgba(13, 13, 15, 0.9); }
#cursor.over-ui i { transform: scale(0.55); }

/* ------------------------------------------------------------ the material every piece of chrome is cut from */
.chrome {
  background: var(--surf-bg); border: var(--surf-border);
  -webkit-backdrop-filter: var(--surf-filter); backdrop-filter: var(--surf-filter);
  box-shadow: var(--surf-shadow);
}
/* the bright rim of glass: light along the top-left and bottom-right edges, nothing between */
.chrome::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: var(--rim);
  background: linear-gradient(140deg, #fff 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0.85) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* a piece that sits inside another surface (or in a group) wears none of its own */
.flat {
  --surf-bg: transparent; --surf-filter: none; --surf-border: 0 solid transparent; --surf-shadow: none; --rim: 0;
}
.chrome.ink {
  background: var(--ink-bg); border: 0; color: #fff; box-shadow: var(--ink-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.chrome.ink::before { opacity: calc(var(--rim) * 0.55); }

/* ------------------------------------------------------------ chrome: the shared pieces (sizes are the web's; the forms below resize them) */
#hud {
  position: fixed; z-index: 35; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 24px calc(24px + var(--sr)) 0 calc(24px + var(--sl));
  pointer-events: none;
}
#hud > *, #dock, #swatches, #pour { pointer-events: auto; }
/* #tools is only a row that holds the buttons: it takes no touch of its own. On a landscape iPad the open book sits under it (the book's Records and
   Stages tabs and its close button are in the same corner as Book, Music and Sound), and a touch on the empty part of the row must reach the book. */
#hud > .tools { pointer-events: none; }
.tools > * { pointer-events: auto; }

/* Orders: the same one-line card in every form */
.order {
  position: relative; display: flex; align-items: center; gap: 14px; flex: 0 1 372px; min-width: 0; height: 68px;
  padding: 0 20px 0 14px; border-radius: 20px;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.4s, opacity 0.25s;
}
.order .otext { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.order .no { font: 600 10.5px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sub); white-space: nowrap; }
.order .txt { font: italic 400 26px/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.1em; }
.order .prog { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--body); white-space: nowrap; }
.order .bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(13, 13, 15, 0.07); overflow: hidden; }
.order .bar b { display: block; height: 100%; width: 0%; background: var(--ink); border-radius: 2px; transition: width 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }
.order.done { transform: scale(1.04); }
.order.done .bar b { background: #e8283a; }
.order.tappable { cursor: pointer; }
.order.tappable .txt { text-decoration: underline dotted; text-underline-offset: 3px; }
.order.tappable:active { transform: scale(0.97); }
.order.swap { animation: swapIn 0.6s cubic-bezier(0.2, 1.2, 0.3, 1); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
/* flavor-dot helper: only on make-a-specific-flavor orders. Painted with the target bear's colors (UI.setOrderAid);
   tapping it pours the cubs needed. The ring around it is the order's progress where the bar is not shown. */
.aidwrap { position: relative; width: 40px; height: 40px; flex: none; display: block; }
.aidwrap[hidden] { display: none; }
.aidwrap .ring { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.aidwrap .ring circle { fill: none; stroke-width: 3; }
.aidwrap .track { stroke: rgba(13, 13, 15, 0.13); }
.aidwrap .arc { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: var(--p, 0) 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }
.order.done .arc { stroke: #e8283a; }
.aid {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border-radius: 50%; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, var(--a, #fff), var(--b, #ccc) 78%);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.65), 0 2px 6px rgba(0, 0, 0, 0.18),
    0 0 0 2px #fff, 0 0 0 3.5px rgba(13, 13, 15, 0.35);
  transition: transform 0.2s cubic-bezier(0.3, 1.7, 0.5, 1);
  animation: aidPulse 1.8s ease-in-out infinite;
}
.aid::before { content: ""; position: absolute; left: 22%; top: 16%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, 0.85); transform: rotate(-30deg); filter: blur(0.4px); }
.aid:hover { transform: translate(-50%, -50%) scale(1.1); }
.aid:active { transform: translate(-50%, -50%) scale(0.9); }
.aid[hidden] { display: none; }
@keyframes aidPulse { 50% { transform: translate(-50%, -50%) scale(1.1); } }
/* an order left standing for a long time can be skipped (no star, no sugar): a small pill under the card (a round icon at the card's end on a phone) */
.skipwrap { position: absolute; left: 12px; top: calc(100% + 10px); z-index: 1; }
.skipwrap[hidden] { display: none; }
.skip {
  padding: 10px 16px; border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--ink); white-space: nowrap;
  background: var(--surf-bg); box-shadow: var(--surf-shadow); border: var(--surf-border); -webkit-backdrop-filter: var(--surf-filter); backdrop-filter: var(--surf-filter);
}
.skip .ic { display: none; }

/* tools: the Book, then music, sound and reset */
.tools { display: flex; align-items: center; gap: 8px; flex: none; }
.tgroup { position: relative; display: flex; align-items: center; gap: 2px; height: 44px; padding: 4px; border-radius: 22px; }
.tb {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-width: 36px; padding: 0 9px; border-radius: 18px;
  color: var(--ink); font: 600 13px/1 var(--sans); white-space: nowrap; transition: background 0.15s, color 0.15s, transform 0.15s;
}
.tb.armed, .tb.armed:hover { background: #e8283a; color: #fff; }
.tb:active { transform: scale(0.94); }
.tb.book { padding: 0 13px 0 11px; }
.tb.book.on, .tb.book[aria-pressed="true"], #stageBtn[aria-pressed="true"] { background: var(--btn-on-bg); color: var(--btn-on-ink); box-shadow: var(--btn-on-shadow); }
.tb[aria-pressed="false"] { color: var(--mute); }
.tb.book[aria-pressed="false"], #stageBtn[aria-pressed="false"] { color: var(--ink); }
.tb.armed { animation: armedPulse 0.9s ease-in-out infinite; }
@keyframes armedPulse { 50% { transform: scale(1.1); } }
@media (hover: hover) { .tb:hover { background: var(--btn-hover); } .tb.armed:hover { background: #e8283a; } }
.tb .lbl, .tb .onsw, .badge, .mdv, .cbtn, .fold, .menu-only { display: none; }
.tb[hidden] { display: none !important; }
/* the number of the music track playing, in the corner of the Music button */
.tb .trk { position: absolute; right: 3px; bottom: 2px; font: 700 9px/1 var(--sans); color: var(--mute); pointer-events: none; }
.tb .trk[hidden] { display: none; }
.tb.off { color: var(--mute); }
.dv { display: none; }
.menu-items { display: contents; }

/* ------------------------------------------------------------ dock: flavors and Pour */
#dock {
  position: fixed; z-index: 6; left: clamp(244px, var(--dock-cx, 50%), calc(100% - 244px));   /* (the dock is about 464 px wide: it stays on the screen beside the drawer) */ transform: translateX(-50%);
  bottom: calc(28px + var(--sb));
  display: flex; align-items: center; gap: 18px; height: 72px; padding: 10px 10px 10px 22px; border-radius: 36px;
  max-width: calc(100vw - 24px - var(--sl) - var(--sr));
  transition: opacity 0.25s;
}
.swatches { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; transition: opacity 0.25s; --s: 36px; }
.sw {
  position: relative; width: var(--s); height: var(--s); border-radius: 50%; border: 0; padding: 0; cursor: pointer; flex: none;
  background: radial-gradient(circle at 34% 28%, var(--a), var(--b) 78%);
  box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.65), 0 3px 7px rgba(0, 0, 0, 0.13);
  transition: transform 0.22s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.sw::before { content: ""; position: absolute; left: 22%; top: 16%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, 0.8); transform: rotate(-30deg); filter: blur(0.4px); }
@media (hover: hover) { .sw:hover { transform: scale(1.1); } }
.sw:active { transform: scale(0.86, 0.8); }
.sw .hit { position: absolute; inset: -8px; border-radius: 50%; }
.sw.on::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--ink); border-radius: 50%; }
.sw.mix { background: conic-gradient(#ff5a63, #ffb04a, #fff176, #9be85a, #ffe9a8, #ff5a63); }
.sw.special { animation: pop 0.6s cubic-bezier(0.3, 1.8, 0.5, 1); }
.swatches.has-special .sw { width: calc(var(--s) * 0.88); height: calc(var(--s) * 0.88); }
.primary {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; flex: none;
  height: 52px; padding: 0 14px 0 26px; border-radius: 26px; font: 600 16px/1 var(--sans); color: #fff;
  transition: transform 0.22s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.2s, opacity 0.25s;
}
.primary .drop { display: none; width: 28px; height: 28px; }
.primary:active { transform: scale(0.95, 0.88); }
.primary:disabled { opacity: 0.42; cursor: not-allowed; }
.kb { font: 600 11px/1 var(--sans); padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.82); }
.kb-dark { background: rgba(255, 255, 255, 0.2); }

/* the tooltip (a pointer only; ui.js places it) */
#tip {
  position: fixed; z-index: 50; left: 0; top: 0; display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 12px; border-radius: 10px;
  background: rgba(13, 13, 15, 0.92); color: #fff; font: 500 12.5px/1 var(--sans); white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(13, 13, 15, 0.5); transform: translate(-50%, 0);
}
#tip[hidden] { display: none; }
#tip .kb { padding: 4px 7px; }
#tip.nokey { padding-right: 12px; }

/* ------------------------------------------------------------ held bear chip */
#held {
  position: fixed; z-index: 25; left: 0; top: 0; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  background: rgba(13, 13, 15, 0.9); color: #fff;
  font: 600 12.5px/1 var(--sans); letter-spacing: 0.01em; white-space: nowrap;
  width: max-content; max-width: min(264px, calc(100vw - 24px));   /* (its own width, so where it stands does not change how its words wrap) */
  opacity: 0; transform: translate(-50%, 0) scale(0.7);
  transition: opacity 0.18s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#held.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* a bear held still gains its flavor text under its name */
.held-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#heldTxt { display: flex; align-items: center; min-height: 20px; }
#heldStory { display: block; font: 500 11.5px/1.3 var(--sans); letter-spacing: 0; white-space: normal; color: rgba(255, 255, 255, 0.74); text-wrap: balance; animation: storyIn 0.22s ease-out; }
#heldStory[hidden] { display: none; }
#held.has-story { align-items: flex-start; border-radius: 20px; padding-bottom: 10px; }
@keyframes storyIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }   /* (ui.js puts it above the finger, and keeps it from the top chrome) */
#held i {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 28%, var(--a, #fff), var(--b, #ccc) 78%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* While a bear is held the chrome steps back to 35%, so the whole table is yours. Opacity goes on each piece, never on a
   parent: a parent's opacity makes it the backdrop root of its children, and their backdrop-filter would see nothing. */
.holding :is(.order, .tgroup, #dock) { opacity: 0.35; }
.covered { visibility: hidden !important; pointer-events: none !important; }
/* the iOS shell draws these natively on iOS 26 (they keep their place, so the table is laid out the same) */
html[data-native] :is(.order, .tgroup, #moreBtn, #dock, #swatches, #pour) { visibility: hidden; }

/* ------------------------------------------------------------ combo meter (ui.js setCombo) */
/* Under the top row of chrome, in the middle: the multiplier in a dark disc, and round it the time left to fuse again, in the
   ink of the last fusion. It starts at ×2 (two fusions in quick succession); a chain that runs out drops away. */
#combo {
  position: fixed; z-index: 22; left: 50%; top: 0; width: 52px; height: 52px; pointer-events: none;
  display: grid; place-items: center; opacity: 0; transform: translate(-50%, 0) scale(0.6);
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#combo.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#combo .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
#combo .ring circle { fill: none; stroke-width: 4; }
#combo .ring .track { fill: rgba(13, 13, 15, 0.9); stroke: rgba(255, 255, 255, 0.18); }
#combo .ring .arc { stroke: var(--c, #fff); stroke-linecap: round; stroke-dasharray: 100 100; transform: rotate(-90deg) scaleX(-1); transform-origin: 50% 50%; }
#combo .cn { position: relative; color: #fff; font: italic 400 25px/1 var(--serif); letter-spacing: -0.02em; margin-top: -2px; }
#combo.pop .cn { animation: comboPop 0.36s cubic-bezier(0.3, 1.8, 0.5, 1); }
#combo.hurry { animation: comboHurry 0.28s ease-in-out infinite alternate; }
#combo.broke { opacity: 0; transform: translate(-50%, 26px) scale(0.85) rotate(-14deg); transition: opacity 0.45s 0.1s, transform 0.55s cubic-bezier(0.5, 0, 0.8, 0.4); }
@keyframes comboPop { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes comboHurry { from { scale: 1; } to { scale: 1.08; } }

/* ------------------------------------------------------------ floaters & toast */
#floaters { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.float {
  position: absolute; transform: translate(-50%, -50%); font: italic 400 38px/1 var(--serif); letter-spacing: -0.02em; color: var(--c, var(--ink));
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9), 0 0 18px rgba(255, 255, 255, 0.9); white-space: nowrap; animation: rise 1.25s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.float small { font: 700 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; display: block; text-align: center; margin-top: 4px; color: var(--soft); text-shadow: none; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
#toast {
  position: fixed; left: var(--dock-cx, 50%); bottom: calc(28px + 72px + 16px + var(--sb)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 40;
  padding: 12px 18px; border-radius: 999px; background: rgba(13, 13, 15, 0.92); color: #fff; font: 500 13.5px/1.2 var(--sans); text-align: center;
  width: max-content; max-width: calc(100vw - 32px - var(--sl) - var(--sr));   /* (left: 50% would leave it half the screen to wrap in: a tall narrow box) */
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* the new-flavor card: a piece of the same material, laid over the table for a few seconds (it never blocks play) */
#reveal {
  position: fixed; right: calc(24px + var(--sr)); top: 84px; z-index: 41; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 22px; pointer-events: none;
  opacity: 0; transform: translateY(-10px) scale(0.9); transform-origin: top right; visibility: hidden;
  max-width: min(388px, calc(100vw - 24px - var(--sl) - var(--sr)));
  transition: opacity 0.35s, transform 0.35s, visibility 0s linear 0.35s;
}
.rv-txt { text-shadow: 0 1px 10px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.9); }
#reveal.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.2s, visibility 0s; animation: revealIn 0.7s cubic-bezier(0.3, 1.7, 0.5, 1); }
@keyframes revealIn { 0% { transform: translateY(-10px) scale(0.6); } 100% { transform: translateY(0) scale(1); } }
.rv-art svg { width: 52px; height: auto; overflow: visible; animation: wiggle 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s; }
@keyframes wiggle { 0% { transform: scale(0.4, 1.4); } 40% { transform: scale(1.25, 0.8); } 70% { transform: scale(0.92, 1.08); } 100% { transform: none; } }
.eyebrow { margin: 0 0 8px; font: 600 10.5px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sub); }
.eyebrow #rvNo { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--ink); }
.rv-txt .eyebrow { margin-bottom: 6px; }
.rv-name { margin: 0; font: italic 400 32px/0.95 var(--serif); letter-spacing: -0.02em; white-space: nowrap; }
.rv-recipe { margin: 6px 0 0; font: 500 13px/1.2 var(--sans); color: #2e2e34; }
.rv-blurb { margin: 4px 0 0; font: 500 12.5px/1.25 var(--sans); color: #4a4a52; max-width: 30ch; }
.rv-blurb[hidden] { display: none; }

/* ------------------------------------------------------------ the Flavor Book (drawer, sheet, or bottom sheet: see the forms) */
.sheet {
  position: fixed; z-index: 30; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  right: calc(24px + var(--sr)); top: 84px; bottom: 24px; width: min(456px, calc(100vw - 48px));
  --surf-bg: var(--sheet-bg); --surf-filter: var(--sheet-filter);
  opacity: 0; pointer-events: none; visibility: hidden; transform: translateX(28px);
  transition: opacity 0.28s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 0.4s;
}
.sheet.open { opacity: 1; pointer-events: auto; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s; }
.sheet .grab { display: none; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(20, 26, 56, 0.22); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 0 24px; flex: none; }
.seg { display: flex; align-items: center; gap: 2px; height: 34px; padding: 3px; border-radius: 17px; background: var(--seg-bg); box-shadow: inset 0 1px 2px rgba(20, 26, 56, 0.06); }
.seg[hidden] { display: none; }
.seg button { display: flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 14px; font: 600 13px/1 var(--sans); color: var(--body); }
.seg button[hidden] { display: none; }
.seg button[aria-selected="true"] { background: var(--seg-on); color: var(--ink); box-shadow: var(--seg-on-shadow); }
.close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--close-bg); margin-left: auto; }
.close .ic { width: 16px; height: 16px; }
.sheet-hd { flex: none; }
.sheet-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 24px 0; flex: none; }
.sheet-title h2 { margin: 0; font-size: 42px; line-height: 1; }
.sheet-title .tn { font: 600 13px/1 var(--sans); color: var(--body); white-space: nowrap; }
.sheet-sub { margin: 8px 24px 0; font: 400 13px/1.4 var(--sans); color: var(--sub); flex: none; text-wrap: pretty; }
.sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
  scrollbar-width: none;
}
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-body [hidden] { display: none; }

.jar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* the Records tab: the bests as big tiles, the totals as smaller ones */
.rec-sec { margin: 4px 0 10px; font: italic 400 26px/1 var(--serif); letter-spacing: -0.01em; }
.rec-grid + .rec-sec { margin-top: 22px; }
.rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rec { min-width: 0; padding: 14px 14px 12px; border-radius: 20px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.rec-grid.big .rec { padding: 16px 14px 14px; }
.rec-v { margin: 0; font: italic 400 24px/1.05 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rec-grid.big .rec-v { font-size: 32px; }
.rec.none .rec-v { color: var(--sub); }
.rec-l { margin: 6px 0 0; font: 700 10px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub); }
.fcard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 12px 14px; border: 0; border-radius: 18px;
  background: var(--card-bg); box-shadow: var(--card-shadow); font: inherit; color: inherit; text-align: center; cursor: default; min-width: 0;
}
button.fcard { cursor: pointer; transition: transform 0.22s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.2s, background 0.2s; }
button.fcard:active { transform: scale(0.95); }
@media (hover: hover) { button.fcard:hover { background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 15, 0.1); } }
.fcard.on { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.fcard .art svg { width: 54px; height: auto; overflow: visible; display: block; }
.fcard .nm { margin: 0; font: italic 400 24px/1.05 var(--serif); letter-spacing: -0.01em; white-space: nowrap; padding-right: 0.08em; }
.fcard.locked .nm { color: var(--mute); }
.fcard .how { display: flex; align-items: center; gap: 6px; min-height: 18px; font: 600 12px/1 var(--sans); color: var(--sub); }
.fcard .how .bag { font: 600 10px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.fcard .dot {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: italic 400 13px/1 var(--serif);
  background: radial-gradient(circle at 34% 28%, var(--a), var(--b) 78%); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18);
}
.fcard .dot.unknown { background: none; border: 1.2px dashed #8e8e99; box-shadow: none; color: var(--sub); }
.fcard .dot.any { background: conic-gradient(#ff5a63, #ffb04a, #fff176, #9be85a, #72bfff, #b886ef, #ff5a63); }
.fcard .hint { margin: 0; font: 500 12px/1.3 var(--sans); color: var(--sub); max-width: 20ch; text-wrap: pretty; }
.fcard .blurb { margin: 0; font: 500 12px/1.3 var(--sans); color: var(--sub); max-width: 20ch; text-wrap: pretty; }
/* the sizes of a flavor, five little bears growing: the ones made are inked, the rest pale (the legend above the cards and a card's page say so) */
.sizes { display: flex; align-items: flex-end; gap: 3px; }
.sizes i { display: block; line-height: 0; color: #dfdfe3; }
.sizes i svg { display: block; height: auto; fill: currentColor; }
.sizes i.got { color: var(--ink); }
.sizes i:nth-child(1) svg { width: 6px; }
.sizes i:nth-child(2) svg { width: 8px; }
.sizes i:nth-child(3) svg { width: 10px; }
.sizes i:nth-child(4) svg { width: 12px; }
.sizes i:nth-child(5) svg { width: 14px; }
.fcard .pick { display: none; font: 700 9.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.fcard.on .pick { color: var(--ink); }
.fcard.fresh { animation: pop 0.8s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
/* a card held down: its page, over the sheet (it dims and blurs what is behind) */
.peek { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px 16px; background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); animation: peekIn 0.2s ease-out; }
.peek[hidden] { display: none; }
@keyframes peekIn { from { opacity: 0; } to { opacity: 1; } }
.peek-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 320px); max-height: 100%; overflow-y: auto; padding: 26px 22px 20px; border-radius: 30px; background: #fff; text-align: center; box-shadow: 0 0 0 1px rgba(13, 13, 15, 0.06), 0 24px 60px -18px rgba(20, 26, 56, 0.35); animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.peek-card:focus { outline: none; }
.peek-x { position: absolute; top: 10px; right: 10px; }
.peek-art svg { display: block; width: 84px; height: auto; overflow: visible; }
.peek-card.teased .peek-art svg { filter: brightness(0) drop-shadow(0 0 7px var(--rar)); }
.peek-rar { margin: 4px 0 0; font: 700 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rar, var(--sub)); }
.peek-nm { margin: 0; font: italic 400 36px/1.02 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.peek-story { margin: 2px 0 0; max-width: 26ch; font: 500 15px/1.4 var(--sans); color: #2e2e34; text-wrap: balance; }
.peek-made { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin: 8px 0 0; font: 600 13px/1.2 var(--sans); color: var(--ink); }
.peek-made em { margin-right: 2px; font-style: normal; font-weight: 500; color: var(--sub); }
.peek-made b { font-weight: 600; color: var(--sub); }
.peek-part { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.peek-made .dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: italic 400 13px/1 var(--serif); background: radial-gradient(circle at 34% 28%, var(--a), var(--b) 78%); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18); }
.peek-made .dot.unknown { background: none; border: 1.2px dashed #8e8e99; box-shadow: none; color: var(--sub); }
.peek-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 4px; width: 100%; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.peek-sizes span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; color: var(--sub); }
.peek-sizes i { display: block; line-height: 0; color: #dfdfe3; }
.peek-sizes i svg { display: block; height: auto; fill: currentColor; }
.peek-sizes span:nth-child(1) i svg { width: 11px; }
.peek-sizes span:nth-child(2) i svg { width: 15px; }
.peek-sizes span:nth-child(3) i svg { width: 19px; }
.peek-sizes span:nth-child(4) i svg { width: 23px; }
.peek-sizes span:nth-child(5) i svg { width: 27px; }
.peek-sizes b { font: 600 10.5px/1.1 var(--sans); white-space: nowrap; }
.peek-sizes .got { color: var(--ink); }
.peek-sizes .got i { color: var(--ink); }
.peek-count { margin: 0; font: 600 12px/1.2 var(--sans); color: var(--sub); }
.peek-note { margin: 10px 0 0; font: 700 10px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.peek-pour { width: 100%; margin-top: 10px; padding: 14px 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--sans); text-align: center; cursor: pointer; }
.peek-pour:disabled { opacity: 0.45; cursor: default; }
/* a short sheet (a phone on its side): the page drops its picture and tightens, so Pour stays in view */
@media (max-height: 520px) {
  .peek { padding: 10px 16px; }
  .peek-card { gap: 6px; padding: 18px 20px 16px; }
  .peek-art { display: none; }
  .peek-nm { font-size: 30px; }
  .peek-x { top: 8px; right: 8px; }
  .peek-sizes { margin-top: 6px; padding-top: 12px; }
  .peek-pour { margin-top: 6px; padding: 12px 16px; }
}
/* the blends made so far, under one heading that says how many */
.jar-grid .jar-sec { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; padding: 16px 18px; border-radius: 18px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.jar-sec h3 { margin: 0; font: italic 400 28px/1 var(--serif); letter-spacing: -0.01em; }
.jar-sec .made { display: flex; align-items: center; gap: 12px; font: 600 13px/1 var(--sans); color: var(--body); }
.jar-sec .stack { display: flex; }
.jar-sec .stack i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--a), var(--b) 78%); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18), 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.jar-sec .stack i + i { margin-left: -6px; }
.jar-grid .jar-more { grid-column: 1 / -1; margin: 4px 0 0; font: 500 12px/1 var(--sans); color: var(--sub); text-align: center; }
.jar-foot { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; }
/* rarity: one color per grade, used by the label, the headings and the Specials' frames */
.rar-common { --rar: #8b8b95; }
.rar-uncommon { --rar: #2e9e5b; }
.rar-rare { --rar: #2f7bf0; }
.rar-epic { --rar: #9b4dff; }
.rar-legendary { --rar: #e8920c; }
.fcard .rar { font: 700 9px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rar); }
/* the trial chip */
#trial {
  position: fixed; z-index: 24; left: calc(24px + var(--sl)); top: calc(24px + 68px + 10px + var(--st) + var(--skip-h, 0px));   /* under the Order card, at its left edge (and under "Skip this order", while that is offered) */
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(13, 13, 15, 0.9); color: #fff; font: 600 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(13, 13, 15, 0.18);
}
#trial[hidden] { display: none; }
body.skippable { --skip-h: 44px; }                /* the pill under the Order card (36 tall, 10 below it) and a gap: what sits under the card makes way for it */
html.book-open #trial { display: none; }          /* the Book shows the same minute on the Special's own card */
#trial button { border: 0; border-radius: 999px; padding: 8px 12px; background: #fff; color: var(--ink); font: 700 12px/1 var(--sans); cursor: pointer; }
/* a Special: framed in its grade; one you do not own is its dark silhouette with a glow, and shimmers */
.fcard.special { border-color: color-mix(in srgb, var(--rar) 55%, transparent); background: color-mix(in srgb, var(--rar) 7%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 10%, transparent), 0 6px 22px color-mix(in srgb, var(--rar) 16%, transparent); overflow: hidden; }
.fcard.special.rar-legendary { background: linear-gradient(140deg, color-mix(in srgb, var(--rar) 16%, #fff), #fff 46%, color-mix(in srgb, var(--rar) 12%, #fff)); }
.fcard.special::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%); transform: translateX(-120%); animation: shimmer 5.5s ease-in-out infinite; }
.fcard.special.rar-epic::after { animation-duration: 7s; }
@keyframes shimmer { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.fcard.special.locked .art svg { filter: brightness(0) drop-shadow(0 0 7px var(--rar)); }
/* how a Special is got: sprinkles towards its price, Try it, Unlock */
.fcard .unlock { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin-top: 4px; }
.fcard .meter { display: block; height: 6px; border-radius: 999px; background: rgba(13, 13, 15, 0.1); overflow: hidden; }
.fcard .meter b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--rar) 55%, #fff), var(--rar)); transition: width 0.4s; }
.fcard .have { font: 700 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--rar); }
.fcard .acts { display: flex; flex-direction: column; gap: 5px; }
.fcard .acts button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px; background: #fff; font: 600 12px/1 var(--sans); color: var(--ink); cursor: pointer; }
.fcard .acts button:disabled { opacity: 0.45; cursor: default; }
.fcard .acts .buy:not(:disabled) { background: var(--rar); border-color: var(--rar); color: #fff; }
.fcard .acts .cash { background: var(--ink); border-color: var(--ink); color: #fff; }
.fcard .acts .cash:disabled { opacity: 0.6; }
.fcard .lockline { font: 700 9.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rar, var(--mute)); }
.fcard.special.locked .lockline::before { content: '🔒 '; letter-spacing: 0; }
.fcard.needs .art { opacity: 0.45; filter: grayscale(0.6); }
.fcard.needs .nm { color: var(--mute) !important; }
.fcard.needs .lockline { color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .fcard.special::after { animation: none; display: none; } }
/* the rarity sort's headings: one grade each (they are not the card the "Your inventions" heading is) */
.jar-grid .jar-sec.rarity { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; margin: 20px 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font: italic 400 24px/1 var(--serif); color: var(--rar, var(--ink)); }
.jar-grid .jar-sec.rarity:first-child { margin-top: 2px; }
.jar-grid .jar-sec.rarity small { font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--mute); }
/* the sprinkles beside the count in the book's title */
.sheet-title .jar-spr { margin-left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--card-bg); font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; }
.sheet-title .jar-spr[hidden] { display: none; }
/* Rarity or Recipe: how the flavors are sorted */
.jar-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; }
.jar-key { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11.5px/1.2 var(--sans); color: var(--sub); }
.jar-sort { display: flex; width: fit-content; margin: 0 0 0 auto; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-bg); }
.jar-sort button { border: 0; border-radius: 999px; padding: 7px 12px; background: none; font: 600 12px/1 var(--sans); color: var(--mute); cursor: pointer; }
.jar-sort button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.jar-foot .build { margin-right: auto; align-self: center; opacity: 0.45; font-size: 12px; }
.link { padding: 12px 8px; font: 500 12px/1 var(--sans); color: var(--sub); cursor: pointer; letter-spacing: 0.01em; transition: color 0.15s; }
.link:hover { color: var(--ink); }
.link.danger:hover { color: #e8283a; }

/* the Floors tab: where the bears play today */
.floor-list { display: grid; gap: 10px; }
.floor-card {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 24px; background: var(--card-bg); box-shadow: var(--card-shadow);
}
.floor-card.selected { background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 6px 16px -8px rgba(13, 13, 15, 0.3); }
.floor-art { width: 84px; height: 64px; flex: none; border-radius: 14px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(13, 13, 15, 0.1); background: #fff; }
.floor-art[data-floor="table"] { background: linear-gradient(160deg, #fff 0%, #f1f0ee 100%); }
.floor-art[data-floor="ocean"] {
  background:
    radial-gradient(ellipse 60% 18% at 30% 38%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 50% 14% at 70% 66%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    linear-gradient(170deg, #9fd0ef 0%, #5aa0d6 55%, #3d7fbd 100%);
}
.floor-art[data-floor="ocean"]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(0deg, rgba(240, 220, 170, 0.75), rgba(240, 220, 170, 0)); }
.floor-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.floor-name { margin: 0; font: italic 400 26px/1 var(--serif); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.floor-badge { font: 600 10px/1 var(--sans); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); padding: 4px 7px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(13, 13, 15, 0.14); }
.floor-blurb { margin: 0; font: 400 12px/1.3 var(--sans); color: var(--sub); text-wrap: pretty; }
.floor-note { margin: 0; font: 600 12px/1.3 var(--sans); color: var(--soft); }
.floor-act {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 64px; padding: 0 18px; border-radius: 22px; flex: none;
  font: 600 15px/1 var(--sans); background: var(--ink); color: #fff; cursor: pointer;
}
.floor-act:disabled { opacity: 0.45; cursor: default; }
.floor-act.quiet { background: rgba(13, 13, 15, 0.07); color: var(--sub); }
html[data-material="glass"] .floor-act.quiet { background: rgba(20, 26, 56, 0.07); }
.floor-act.quiet:not(:disabled) { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 15, 0.12); }
.floor-error { margin: 12px 4px 0; font: 600 12.5px/1.3 var(--sans); color: #c8283a; }

/* ============================================================ web: the default form
   (the sheet is the drawer above; the dock is bottom centre; the keys show on the buttons) */
#swatches { --surf-bg: transparent; --surf-filter: none; --surf-border: 0 solid transparent; --surf-shadow: none; --rim: 0; }
#jarBtn, #stageBtn, #musicBtn { --surf-bg: transparent; --surf-filter: none; --surf-border: 0 solid transparent; --surf-shadow: none; --rim: 0; }
.chrome.ink { --surf-border: 0 solid transparent; }
/* the web's Pour wears no glass: just ink */
html[data-material="glass"] #pour::before { opacity: 0; }

/* ============================================================ tablet: iPad, both ways round */
@media (pointer: coarse) and (min-width: 700px) and (min-height: 600px), (pointer: coarse) and (min-width: 600px) and (min-height: 600px) and (orientation: landscape) {
  :root { --form: tablet; --pt: max(32px, calc(var(--st) + 8px)); --px: max(28px, calc(var(--sl) + 8px)); --pxr: max(28px, calc(var(--sr) + 8px)); --pb: max(28px, calc(var(--sb) + 8px)); }
  #hud { padding: var(--pt) var(--pxr) 0 var(--px); gap: 16px; }
  .order { flex: 0 1 412px; height: 76px; padding: 0 26px 0 12px; gap: 14px; border-radius: 38px; }
  .order .otext { gap: 8px; }
  .order .no { font-size: 11px; color: var(--sub); }
  .order .txt { font-size: 29px; }
  .order .prog { font-size: 16px; color: #3a3a42; }
  .order .bar { display: none; }
  .aidwrap { width: 52px; height: 52px; }
  .aidwrap .ring { display: block; }
  .aid { width: 38px; height: 38px; box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.65), 0 3px 7px rgba(0, 0, 0, 0.16); }
  .order.no-aid .bar { display: block; left: 26px; right: 26px; bottom: 8px; }
  .kb { display: none; }

  .tgroup { height: 64px; padding: 8px; border-radius: 32px; gap: 4px; }
  .tb { height: 48px; min-width: 48px; padding: 0 12px; border-radius: 24px; gap: 9px; font-size: 16px; }
  .tb.book { padding: 0 16px 0 14px; }
  .tb.book[aria-pressed="true"] { background: var(--btn-on-bg); color: var(--btn-on-ink); box-shadow: var(--btn-on-shadow); }
  .ic { width: 24px; height: 24px; }
  .dv { display: block; width: 1px; height: 26px; flex: none; background: var(--divider); margin: 0 2px; }

  /* the flavor tray under the left thumb, Pour under the right */
  #dock { display: contents; }
  #swatches {
    position: fixed; z-index: 6; left: var(--px); bottom: var(--pb); height: 88px; padding: 0 26px; gap: 16px; border-radius: 44px; --s: 52px;
    --surf-bg: inherit; --surf-filter: inherit; --surf-border: inherit; --surf-shadow: inherit; --rim: inherit;
  }
  .sw.on::after { inset: -6px; border-width: 2px; }
  .primary { position: fixed; z-index: 6; right: var(--pxr); bottom: var(--pb); width: 112px; height: 112px; padding: 0; border-radius: 50%; flex-direction: column; gap: 8px; font-size: 20px; }
  .primary .drop { display: block; }
  .holding :is(#swatches, #pour) { opacity: 0.35; }

  #toast { left: var(--dock-cx, 50%); bottom: calc(var(--pb) + 112px + 18px); font-size: 15px; padding: 14px 22px; }
  #trial { left: var(--px); top: calc(var(--pt) + 76px + 10px + var(--skip-h, 0px)); font-size: 14px; }
  #reveal { top: calc(var(--pt) + 64px + 20px); right: var(--pxr); width: 388px; max-width: calc(100vw - 56px); padding: 18px 24px 18px 20px; gap: 18px; border-radius: 32px; }
  #reveal .rv-art svg { width: 60px; }
  .rv-name { font-size: 40px; }
  .rv-recipe { font-size: 15px; }
  .rv-blurb { font-size: 14px; }
  #held { font-size: 15px; padding: 8px 16px 8px 9px; max-width: min(300px, calc(100vw - 24px)); }
  #held i { width: 24px; height: 24px; }
  #heldTxt { min-height: 24px; }
  #heldStory { font-size: 13px; }
  #held.has-story { padding-bottom: 11px; }

  /* the Flavor Book: a floating sheet beside the table in landscape ... */
  .sheet { top: 16px; bottom: 16px; right: max(16px, calc(var(--sr) + 4px)); width: clamp(360px, calc(100vw - 510px - var(--sl)), 464px); border-radius: 38px; }   /* leaves the flavor tray (444 px from the left edge) and the Orders card their room on a narrower screen */
  .sheet-head { padding: 22px 22px 0 24px; }
  .seg { height: 40px; border-radius: 20px; padding: 4px; }
  .seg button { height: 32px; padding: 0 18px; border-radius: 16px; font-size: 15px; }
  .close { width: 44px; height: 44px; }
  .close .ic { width: 18px; height: 18px; }
  .sheet-title { padding: 18px 24px 0; }
  .sheet-title h2 { font-size: 46px; }
  .sheet-title .tn { font-size: 14px; }
  .sheet-sub { font-size: 14px; margin: 8px 24px 0; }
  .sheet-body { padding: 18px 22px 32px; }
  .jar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .fcard { border-radius: 24px; padding: 16px 10px 14px; }
  .fcard .art svg { width: 46px; }
  .fcard .nm { font-size: 24px; }
  .fcard .blurb { display: none; }
  .fcard .how .bag { display: none; }
  .jar-grid .jar-sec { border-radius: 22px; padding: 16px 20px; }
  .floor-card { padding: 14px 14px; }
}
/* ... and a sheet raised from the bottom in portrait */
@media (pointer: coarse) and (min-width: 700px) and (min-height: 600px) and (orientation: portrait) {
  #swatches { height: 92px; --s: 54px; bottom: max(32px, calc(var(--sb) + 8px)); }
  .primary { width: 116px; height: 116px; bottom: max(32px, calc(var(--sb) + 8px)); }
  #toast { bottom: calc(max(32px, calc(var(--sb) + 8px)) + 116px + 18px); }
  .sheet { left: 12px; right: 12px; bottom: 12px; top: calc(var(--pt) + 76px + 160px); width: auto; border-radius: 42px; transform: translateY(40px); }
  .sheet .grab { display: block; }
  .sheet-head { padding: 28px 28px 0 30px; }
  .sheet-title { padding: 22px 30px 0; }
  .sheet-title h2 { font-size: 56px; }
  .sheet-title .tn { font-size: 15px; }
  .sheet-sub { margin: 10px 30px 0; font-size: 15px; }
  .sheet-body { padding: 22px 28px 36px; }
  .jar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .fcard .art svg { width: 52px; }
}

/* ============================================================ phone: iPhone, and any window under 600 px wide */
@media (max-width: 599px), (max-width: 699px) and (orientation: portrait), (pointer: coarse) and (max-height: 599px) and (orientation: landscape) {
  :root { --form: phone; --pt: max(14px, calc(var(--st) + 4px)); --px: max(16px, calc(var(--sl) + 9px)); --pxr: max(16px, calc(var(--sr) + 9px)); --pb: max(12px, calc(var(--sb) + 4px)); }
  #hud { padding: var(--pt) var(--pxr) 0 var(--px); gap: 8px; align-items: center; }
  .order { flex: 1 1 auto; height: 54px; padding: 0 14px 0 9px; gap: 10px; border-radius: 27px; max-width: 420px; }
  /* landscape: as wide as its words need (262 px at least), so a long order is not cut short while the row has room to spare */
  @media (orientation: landscape) { .order { flex: 0 1 auto; min-width: min(262px, 100%); } }
  .order .no, .order .bar { display: none; }
  /* where the row runs out of room (a small phone, the Skip icon), the order goes onto a second line rather than ending in "…" */
  .order .txt { font-size: 18px; line-height: 1.05; white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .order .prog { font-size: 13px; color: #3a3a42; }
  .aidwrap { width: 44px; height: 44px; }
  .aidwrap .ring { display: block; }
  .aid { width: 32px; height: 32px; box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.65), 0 3px 7px rgba(0, 0, 0, 0.16); }
  .order.no-aid .bar { display: block; left: 24px; right: 24px; bottom: 5px; }
  /* "Skip this order" is a round icon at the card's end instead of a pill under it: it takes no row of its own, so what sits under the card
     (the trial chip, the toast, the new-flavor card) has no reason to make way for it */
  body.skippable { --skip-h: 0px; }
  body.skippable .order { padding-right: 9px; }
  .skipwrap { position: static; flex: none; animation: skipIn 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
  @keyframes skipIn { from { opacity: 0; transform: scale(0.4); } }
  .skip { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: rgba(13, 13, 15, 0.07); box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background 0.15s, transform 0.15s; }
  .skip:active { background: rgba(13, 13, 15, 0.14); transform: scale(0.92); }
  .skip .skip-t { display: none; }
  .skip .ic { display: block; width: 18px; height: 18px; }
  .kb { display: none; }
  .ic { width: 22px; height: 22px; }
  .holding :is(#jarBtn, #stageBtn, #musicBtn, #moreBtn) { opacity: 0.35; }

  /* Book and More are two round buttons; the group dissolves */
  .tools { gap: 8px; }
  .tgroup { display: contents; }
  #jarBtn, #stageBtn, #musicBtn, #moreBtn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; min-width: 0; padding: 0; border-radius: 50%; flex: none; --surf-bg: inherit; --surf-filter: inherit; --surf-border: inherit; --surf-shadow: inherit; --rim: inherit; }
  #jarBtn[aria-pressed="true"], #stageBtn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.95); color: var(--ink); }
  html:not([data-material="glass"]) :is(#jarBtn, #stageBtn)[aria-pressed="true"] { background: var(--ink); color: #fff; }
  #musicBtn .trk { right: 8px; bottom: 7px; font-size: 10px; }
  #jarBtn #jarCount { display: none; }
  .badge { display: grid; place-items: center; position: absolute; right: -3px; top: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: #fff; font: 700 11px/1 var(--sans); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
  #moreBtn { display: grid; }
  #moreBtn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.95); }
  .dv { display: none; }

  /* More: Music, Sound, the new-flavor pop-up and Reset, in a menu under the button (wide enough for "New flavor pop-up" and its switch) */
  .menu-items {
    display: none; position: fixed; z-index: 35; right: var(--pxr); top: calc(var(--pt) + 54px + 6px); width: 272px; max-width: calc(100vw - var(--px) - var(--pxr)); padding: 6px; border-radius: 28px;
    flex-direction: column; background: var(--sheet-bg); -webkit-backdrop-filter: blur(34px) saturate(1.8); backdrop-filter: blur(34px) saturate(1.8);
    box-shadow: var(--surf-shadow); border: var(--surf-border);
    transform-origin: top right; animation: menuIn 0.28s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .menu-items.open { display: flex; }
  @keyframes menuIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }
  .menu-items .tb { display: flex; width: 100%; height: 46px; padding: 0 14px; gap: 12px; border-radius: 20px; font: 500 16px/1 var(--sans); justify-content: flex-start; }
  .menu-items .tb .lbl { display: block; flex: 1; text-align: left; }
  .menu-items .tb .onsw { display: block; position: relative; width: 46px; height: 28px; border-radius: 14px; background: rgba(20, 26, 56, 0.16); flex: none; transition: background 0.2s; }
  .menu-items .tb .onsw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1); }
  .menu-items .tb[aria-pressed="true"] .onsw, .menu-items .tb[aria-checked="true"] .onsw { background: var(--ink); }
  .menu-items .tb[aria-pressed="true"] .onsw::after, .menu-items .tb[aria-checked="true"] .onsw::after { transform: translateX(18px); }
  .menu-items .tb[aria-pressed="false"], .menu-items .tb[aria-checked="false"] { color: var(--ink); }
  .menu-items .fold { display: none; }
  .menu-items .mdv { display: block; height: 1px; margin: 2px 14px; background: var(--divider); }
  .menu-items .tb.armed, .tb.armed:hover { background: #e8283a; color: #fff; }
  .menu-items .tb.armed { animation: none; }   /* a row of a menu stays in its panel */

  #toast { left: var(--dock-cx, 50%); top: calc(var(--pt) + 54px + 12px + var(--skip-h, 0px)); bottom: auto; transform: translate(-50%, -12px); max-width: calc(100vw - 32px); }
  #trial { left: var(--px); top: calc(var(--pt) + 54px + 8px + var(--skip-h, 0px)); }
  #toast.show { transform: translate(-50%, 0); }
  /* the new-flavor card: as wide as the Orders row, and short. The name leads, with a "NEW" tag at its end, and the flavor's own text is under it
     (two lines at most). What it is made from, and the number of the blend, are in the Flavor Book; the recipe stands in only when there is no text. */
  #reveal { top: calc(var(--pt) + 54px + 12px + var(--skip-h, 0px)); left: var(--px); right: var(--pxr); padding: 9px 14px 9px 12px; gap: 10px; border-radius: 24px; max-width: none; transform-origin: top center; }
  #reveal .rv-art svg { width: 36px; }
  #reveal .rv-txt { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; text-shadow: none; }
  #reveal .rv-name { grid-area: 1 / 1; min-width: 0; font-size: 24px; line-height: 1.15; padding: 0 0.1em 0.06em 0; overflow: hidden; text-overflow: ellipsis; }
  #reveal .rv-blurb { grid-area: 2 / 1 / 3 / -1; max-width: none; margin: 0; font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #reveal .rv-blurb[hidden] { display: none; }
  #reveal .rv-recipe { display: none; grid-area: 2 / 1 / 3 / -1; margin: 0; }
  #reveal:has(.rv-blurb[hidden]) .rv-recipe { display: block; }
  #reveal .eyebrow { display: contents; }
  #reveal .rv-new { grid-area: 1 / 2; justify-self: end; padding: 4px 7px 4px 8px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 9.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
  #reveal .rv-fl, #reveal #rvNo { display: none; }
  @media (max-width: 359px) { #reveal .rv-new { display: none; } #reveal .rv-name { grid-column: 1 / -1; } }   /* the narrowest phones give the name the whole line */
  #held { font-size: 14px; }
  #heldStory { font-size: 12px; }

  /* the book is a bottom sheet at its large detent; the table stays above it */
  .sheet { left: 8px; right: 8px; bottom: 8px; top: calc(var(--pt) + 54px + 28px); width: auto; border-radius: 44px; transform: translateY(40px); }
  .sheet .grab { display: block; top: 9px; width: 36px; margin-left: -18px; }
  .sheet-head { padding: 24px 16px 0 20px; }
  .seg { height: 38px; padding: 3px; border-radius: 19px; }
  .seg button { height: 32px; padding: 0 15px; border-radius: 16px; font-size: 14px; }
  .close { width: 44px; height: 44px; }
  .close .ic { width: 17px; height: 17px; }
  .sheet-title { padding: 14px 22px 0; }
  .sheet-title h2 { font-size: 42px; }
  .sheet-sub { margin: 10px 22px 0; font-size: 14px; line-height: 1.45; }
  .sheet-body { padding: 18px 16px 32px; }
  .jar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  /* three cards across leave a name about 92 px: it wraps (balanced, two lines most of the time) instead of running into its neighbours' */
  .fcard { gap: 6px; padding: 14px 8px 13px; border-radius: 20px; }
  .fcard .art svg { width: 44px; }
  .fcard .nm { display: flex; align-items: center; justify-content: center; min-height: 2.24em; font-size: 18px; line-height: 1.12; white-space: normal; text-wrap: balance; padding-right: 0; }   /* two lines are kept for it, so a row's recipe dots line up whatever the names */
  .fcard .blurb, .fcard .how .bag { display: none; }
  .fcard .hint { font-size: 11.5px; line-height: 1.35; max-width: 15ch; }
  .fcard .dot { width: 15px; height: 15px; font-size: 12px; }
  /* a Special's Try it / Unlock: the buttons reach 4 px past the card's padding, and a label that does not fit wraps with a line of its own height */
  .fcard .unlock { width: calc(100% + 8px); margin: 4px -4px 0; gap: 8px; }
  .fcard .acts { gap: 6px; }
  .fcard .acts button { padding: 9px 4px; font-size: 11.5px; line-height: 1.2; text-wrap: balance; }
  .fcard .acts .buy, .fcard .acts .try { white-space: nowrap; }
  .fcard .acts .cash { text-wrap: wrap; }
  .jar-grid .jar-sec { border-radius: 20px; padding: 14px 16px; margin-top: 14px; }
  .jar-sec h3 { font-size: 24px; }
  .jar-grid .jar-sec.rarity { margin: 26px 0 2px; gap: 12px; }
  .jar-grid .jar-sec.rarity small { font-size: 12.5px; }
  .jar-bar { margin-bottom: 16px; }
  .rec-sec { margin: 6px 0 12px; }
  .rec-grid + .rec-sec { margin-top: 26px; }
  .rec-grid { gap: 12px; }
  .rec-l { line-height: 1.3; }
  /* a stage: the picture and its words in a row, the Unlock button on a row of its own (beside them it left the words 120 px) */
  .floor-card { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .floor-art { width: 72px; height: 56px; }
  .floor-name { font-size: 24px; }
  .floor-text { gap: 5px; }
  .floor-blurb, .floor-note { font-size: 13px; line-height: 1.35; }
  .floor-card .floor-act { height: 40px; padding: 0 16px; font-size: 14px; }
  .floor-card .floor-act:not(.quiet) { flex: 1 0 100%; }
}
/* portrait: one capsule at the bottom holds the flavors and Pour */
@media (max-width: 699px) and (orientation: portrait) {
  body.trialing :is(#toast, #reveal) { top: calc(var(--pt) + 54px + 12px + 44px + var(--skip-h, 0px)); }     /* below the trial chip (40 tall) */
  /* a phone with no room beside the Dynamic Island (a notch, or none) keeps Stage and Music in the More menu */
  #stageBtn, #musicBtn { display: none; }
  .menu-items .fold:not([hidden]) { display: flex; }
  /* a Dynamic Island (ui.js sets data-island): the four buttons sit in the band either side of it, Stage and Music on the left and Book and
     More on the right, and the Orders card has the whole row below. They keep clear of the screen's rounded corners: a 44 px circle centred on the
     island's height is inside a 62 px corner radius, with a little to spare, when it is 26 px from the side. */
  html[data-island] .tools { display: contents; }
  html[data-island] :is(#stageBtn, #musicBtn, #jarBtn, #moreBtn) { position: fixed; display: grid; width: 44px; height: 44px; top: calc((var(--st) - 44px) / 2); }
  html[data-island] #stageBtn { left: calc(26px + var(--sl)); }
  html[data-island] #musicBtn { left: calc(26px + 44px + 6px + var(--sl)); }
  html[data-island] #stageBtn[hidden] + #musicBtn { left: calc(26px + var(--sl)); }
  html[data-island] #jarBtn { right: calc(26px + 44px + 6px + var(--sr)); }
  html[data-island] #moreBtn { right: calc(26px + var(--sr)); }
  html[data-island] .menu-items .fold { display: none; }
  html[data-island] .order { max-width: none; }
  html[data-island] .menu-items { right: calc(26px + var(--sr)); top: calc((var(--st) - 44px) / 2 + 44px + 8px); }
  /* A punch-hole camera that is not in the middle (chrome-layout.js, islandMode: the Android shell reports where it is): when only one side of the top
     band has room, all four buttons go there in a row, in the same order (Stage, Music, Book, More). 'right': packed against the right edge. 'left':
     packed against the left; with no Stage button the rest move up to the edge, and the More menu opens at the left edge under them. */
  html[data-island="right"] #stageBtn { left: auto; right: calc(26px + 3 * (44px + 6px) + var(--sr)); }
  html[data-island="right"] #musicBtn, html[data-island="right"] #stageBtn[hidden] + #musicBtn { left: auto; right: calc(26px + 2 * (44px + 6px) + var(--sr)); }
  html[data-island="left"] #jarBtn { right: auto; left: calc(26px + 2 * (44px + 6px) + var(--sl)); }
  html[data-island="left"] #moreBtn { right: auto; left: calc(26px + 3 * (44px + 6px) + var(--sl)); }
  html[data-island="left"]:has(#stageBtn[hidden]) #jarBtn { left: calc(26px + (44px + 6px) + var(--sl)); }
  html[data-island="left"]:has(#stageBtn[hidden]) #moreBtn { left: calc(26px + 2 * (44px + 6px) + var(--sl)); }
  html[data-island="left"] .menu-items { right: auto; left: calc(26px + var(--sl)); }
  #dock { display: flex; left: var(--px); right: var(--pxr); bottom: var(--pb); transform: none; width: auto; max-width: none; height: 72px; padding: 0 8px 0 18px; gap: 12px; border-radius: 36px; }
  #swatches { flex: 1; justify-content: space-between; gap: 0; --s: 36px; }
  .sw.on::after { inset: -4px; }
  .primary { width: 84px; height: 56px; padding: 0; border-radius: 28px; font-size: 17px; --surf-border: 0 solid transparent; }
  #swatches { --surf-bg: transparent; --surf-filter: none; --surf-border: 0 solid transparent; --surf-shadow: none; --rim: 0; position: relative; height: auto; padding: 0; left: auto; bottom: auto; }
  #pour { position: relative; right: auto; bottom: auto; }
}
/* landscape: the flavors a column on the left, Pour a round button on the right: the table opens up */
@media (max-width: 599px) and (orientation: landscape), (pointer: coarse) and (max-height: 599px) and (orientation: landscape) {
  #dock { display: contents; }
  #swatches {
    position: fixed; z-index: 6; left: var(--px); top: calc(var(--pt) + 54px + 10px); bottom: var(--pb); width: 56px; padding: 12px 0; border-radius: 28px;
    flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; --s: 40px;
    --surf-bg: inherit; --surf-filter: inherit; --surf-border: inherit; --surf-shadow: inherit; --rim: inherit;
  }
  .sw.on::after { inset: -4px; }
  .primary { position: fixed; z-index: 6; right: var(--pxr); bottom: max(12px, calc(var(--sb) + 12px)); width: 88px; height: 88px; padding: 0; border-radius: 50%; flex-direction: column; gap: 6px; font-size: 17px; }
  .primary .drop { display: block; width: 24px; height: 24px; }
  .holding :is(#swatches, #pour) { opacity: 0.35; }
  .menu-items { top: calc(var(--pt) + 46px + 8px); }
  /* Stage and Music have room beside Book and More in the top row */
  #stageBtn, #musicBtn { display: grid; }
  #stageBtn { order: 1; } #musicBtn { order: 2; } #jarBtn { order: 3; } #moreBtn { order: 4; }
  /* the book floats beside the table, to the right of the flavor column */
  .sheet { left: auto; right: max(8px, calc(var(--sr) - 4px)); top: 8px; bottom: 8px; width: min(436px, calc(100vw - var(--px) - 56px - 80px)); border-radius: 34px; transform: translateX(28px); }
  .sheet .grab { display: none; }
  .sheet-head { padding: 16px 14px 0 18px; }
  /* the title and its line share a row; the Flavors tab, which has most to show, goes without the line */
  .sheet-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; padding: 0 22px; }
  .sheet-title { padding: 0; gap: 12px; flex: none; }
  .sheet-title h2 { font-size: 34px; }
  .sheet-sub { margin: 0; font-size: 13px; }
  .sheet[data-tab="flavors"] .sheet-sub { display: none; }
  .sheet-body { padding: 12px 16px 24px; }
  /* the flavor column is under the Order card's left end: what hangs under the card (the trial chip) starts to the right of it */
  #trial { left: calc(var(--px) + 56px + 10px); }
  #toast { top: calc(var(--pt) + 54px + 10px + var(--skip-h, 0px)); }
  body.trialing #toast { top: calc(var(--pt) + 54px + 10px + 44px + var(--skip-h, 0px)); }
  /* the new-flavor card keeps to the right, clear of the flavor column, instead of the whole row */
  #reveal { top: calc(var(--pt) + 54px + 12px + var(--skip-h, 0px)); left: auto; width: min(400px, calc(100vw - var(--px) - var(--pxr) - 56px - 10px)); transform-origin: top right; }
}

@media (prefers-reduced-motion: reduce) {
  .float { animation-duration: 0.01s; }
  #combo, #combo .cn { animation: none !important; transition: opacity 0.2s; }
  .aid, .skipwrap { animation: none; }
  #heldStory, .peek, .peek-card { animation: none; }
}

/* The list of the music, held open from the Music button (ui.js `openMusicList`): the tracks, a rule, Off; the one playing is checked */
#musicBtn, #musicItem { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.music-list {
  position: fixed; z-index: 36; width: 224px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 26px; display: flex; flex-direction: column;
  background: var(--sheet-bg); -webkit-backdrop-filter: blur(34px) saturate(1.8); backdrop-filter: blur(34px) saturate(1.8);
  box-shadow: var(--surf-shadow); border: var(--surf-border);
  transform-origin: top right; animation: listIn 0.28s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.music-list .ml-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 16px; border: 0; border-radius: 20px; background: none; color: var(--ink); font: 500 16px/1 var(--sans); text-align: left; cursor: pointer; }
.music-list .ml-item:hover, .music-list .ml-item:focus-visible { background: rgba(255, 255, 255, 0.62); outline: none; }
.music-list .ml-item[aria-checked="true"]::after { content: ""; flex: none; width: 6px; height: 11px; margin-right: 3px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -2px); }
.music-list .ml-dv { display: block; height: 1px; margin: 2px 14px; background: var(--divider); }
@keyframes listIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }