/* Layout: a reading column of ink and gold, with the phone prototype breaking out as a lit stage.
   Single dark theme on purpose - the product is a night menu and every film is shot on black. */
:root{
  --ink:#0D100F; --ink-2:#141917; --ink-3:#1B211E; --line:#2A312E; --line-2:#3A443F;
  --cream:#F3EEE6; --cream-dim:rgba(243,238,230,.66); --cream-faint:rgba(243,238,230,.40);
  --gold:#C9A227; --gold-soft:#E0C06A; --oxblood:#9B1B1B; --jade:#2EC4B6;
  --good:#4E9A5B; --warn:#C9A227; --bad:#C4553E;
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* motion tokens (19 Oct, claude/gd-motion-spec-18oct.md): micro 120-200 ms, state 200-300 ms */
  --micro:160ms; --state:220ms; --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}

.tnum{font-variant-numeric:tabular-nums}

/* ---- phone internals: inventory UI over an unveiled film ---- */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--body);color:var(--cream)}
.filmlayer{position:absolute;inset:0;overflow:hidden;background:#000}
.filmlayer video,.filmlayer .filmstill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
/* Most dishes have a photograph and no footage. A still is a film with one frame. */
.filmlayer .filmstill{background-size:cover;background-position:center}
.filmlayer .on{opacity:1}
.stilllayer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .35s ease;pointer-events:none}
.stilllayer.on{opacity:1}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(135% 85% at 50% 42%,transparent 42%,rgba(5,7,6,.60) 100%)}
.pendbadge{position:absolute;z-index:5;top:92px;right:10px;font:600 8px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,238,230,.5);background:rgba(8,10,9,.55);
  border:1px solid rgba(243,238,230,.18);backdrop-filter:blur(8px);padding:4px 6px}
.pendbadge[hidden]{display:none}

.seal{display:block;object-fit:contain}
.sealmount{display:grid;place-items:center;flex:0 0 auto}
.wm{font-family:var(--display);letter-spacing:.05em;line-height:1;font-size:14px}
.wm em{font-style:normal;color:var(--cream)}
.wm b{color:var(--gold-soft);font-weight:600}

/* header carries identity, state and the bag */
.homebtn{flex:1;min-width:0;min-height:38px;display:flex;align-items:center;gap:8px;padding:2px 4px 2px 0;
  background:transparent;border:0;cursor:pointer;color:inherit;text-align:left}
.homebtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mebtn{position:relative;flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.26);color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.mebtn .ico{width:19px;height:19px;color:inherit}
.mebtn .dot{position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.mebtn .ini{font:700 12px/1 var(--mono);color:#17120A}
.mebtn.in{background:var(--gold);border-color:var(--gold)}
.ph-top{position:relative;z-index:5;display:flex;align-items:center;gap:7px;padding:8px 9px 7px;
  background:rgba(6,8,7,.62);backdrop-filter:blur(14px);border-bottom:1px solid rgba(243,238,230,.10)}
.idblock{min-width:0;display:block}
.ph-status{display:block}
.ph-status{margin-top:3px;font:600 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--cream-dim)}
.ph-status b{color:#5FD08A}.ph-status b.shut{color:#E8775F}
.bagchip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;
  background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.26);color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.bagchip .ico{width:15px;height:15px}
.bagchip .bn{font:700 11px/1 var(--mono);min-width:9px;text-align:center}
.bagchip{min-height:38px}
.bagchip .bt{font:700 11.5px/1 var(--mono);letter-spacing:0}
.bagchip.has{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.14)}
.bagchip[disabled]{cursor:default}

/* the icon rail: no labels, learned by shape */
.iconrail{position:relative;z-index:5;display:flex;gap:2px;padding:5px;overflow:hidden;
  background:rgba(6,8,7,.5);backdrop-filter:blur(12px);border-bottom:1px solid rgba(243,238,230,.08)}
.rchip{flex:1 1 0;min-width:0;height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:0 1px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:rgba(243,238,230,.56);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.rchip .ico{width:18px;height:18px;flex:0 0 auto}
.rchip .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;
  font:600 6.3px/1 var(--mono);letter-spacing:0;text-transform:uppercase}
.rchip.on{color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.16)}

.subbar{position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:7px 10px 2px;min-height:14px}
.backbtn{display:flex;align-items:center;gap:4px;flex:0 0 auto;max-width:112px;height:32px;padding:0 9px 0 7px;
  cursor:pointer;color:var(--cream);background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(8px);overflow:hidden;white-space:nowrap;min-height:32px;
  font:700 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.backbtn .ar{font-size:13px;line-height:1;letter-spacing:0}
.backbtn[hidden]{display:none}
/* the crumb gets its own frosted chip rather than floating on the film: a dragon's whisker
   running behind 9px type was making it unreadable, and the answer is a surface, not a scrim */
.crumb{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:9px 8px;background:rgba(8,10,9,.5);border:1px solid rgba(201,162,39,.34);backdrop-filter:blur(8px);
  font:700 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.crumb:empty{display:none}
.sbgap{flex:1;min-width:4px}
/* the crumb always holds its place so the controls stay right-aligned */

.ph-stage{position:relative;z-index:4;flex:1;overflow-y:auto;scrollbar-width:none;
  display:flex;flex-direction:column;gap:8px;padding:6px 10px 10px}
.ph-stage::-webkit-scrollbar{display:none}
.ph-stage > *:first-child{margin-top:auto}
/* a column flexbox shrinks its children when the content is taller than the box, which was
   silently crushing the checkout rows. Nothing in the stage flexes. */
.ph-stage > *{flex:0 0 auto}
.ph-foot{position:relative;z-index:5;padding:0 10px}
.ph-foot:empty{display:none}

/* one surface language */
.panel,.cat,.cell,.gtab,.addchip,.qline{background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--cream)}
.cat,.cell,.gtab,.addchip{cursor:pointer;transition:border-color .12s,background .12s}
.cat:focus-visible,.cell:focus-visible,.gtab:focus-visible,.add:focus-visible,.rchip:focus-visible,
.open:focus-visible,.quick:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.off{opacity:.34;cursor:default}
.ico{width:24px;height:24px;color:var(--gold-soft)}
.cut{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

.lockup{display:flex;align-items:center;gap:12px;padding:11px 12px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.lockup .wm{font-size:22px}
.lockup .sm{display:block;margin-top:4px;font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}

.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.cat{min-height:58px;padding:9px 8px;display:flex;align-items:center;gap:9px;text-align:left;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.cat .ct{flex:1;min-width:0}
.cat b{display:block;font-size:12px;font-weight:600;line-height:1.2}
.cat .subs{display:block;margin-top:2px;font:500 7.5px/1.4 var(--mono);letter-spacing:.01em;
  text-transform:uppercase;color:var(--gold-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat .ico{width:23px;height:23px;flex:0 0 23px}
.cat:hover{border-color:var(--gold)}

/* the sub-category switch: one joined control, full width, impossible to read as decoration */
.segnav{position:sticky;top:-6px;z-index:6;display:flex;margin:-2px 0 0;
  background:rgba(8,10,9,.74);border:1px solid rgba(201,162,39,.55);backdrop-filter:blur(12px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.segb{flex:1 1 0;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 4px;cursor:pointer;background:transparent;border:0;border-left:1px solid rgba(201,162,39,.32);
  color:var(--cream-dim)}
.segb:first-child{border-left:0}
.segb b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 10.5px/1.1 var(--body);letter-spacing:.01em}
.segb i{font-style:normal;font:600 7.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-faint)}
.segb.on{background:var(--gold);color:#17120A}
.segb.on i{color:rgba(23,18,10,.72)}
.segb.on + .segb{border-left-color:transparent}
.lockmsg{margin:0;font:600 9.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#E8775F;text-shadow:0 1px 6px rgba(0,0,0,.95)}

/* compact horizontal cells: the icon and two lines need no more room than this */
.itemgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-content:start}
.cell{position:relative;min-height:56px;padding:7px 8px;display:flex;align-items:center;gap:8px;text-align:left;
  overflow:hidden;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.cell .ic{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.cell .ic .ico{width:20px;height:20px}
.cell .mid{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.cell .nm{font-size:11px;font-weight:600;line-height:1.2}
.cell .pr{font:700 11.5px/1 var(--mono);color:var(--gold-soft)}
.cell .pr em{font-style:normal;font-size:8px;color:var(--cream-faint);text-transform:uppercase}
.cell .tag{position:absolute;top:0;left:0;font:700 7.5px/1 var(--mono);color:#17120A;background:var(--gold);padding:2px 4px}
.cell.t1{border-color:rgba(201,162,39,.75)}
.cell.t2{border-color:rgba(201,162,39,.4)}
.cell.got{background:rgba(201,162,39,.14)}
@media (hover:hover){.cell:hover{border-color:var(--gold)}}
.cell .open{position:absolute;inset:0;background:transparent;border:0;cursor:pointer;z-index:1}
/* quick-add was 28x28 sitting inside a 290x52 target that does something else.
   It is the most-repeated control in the menu, so it gets the biggest box the cell can give it. */
.cell .quick{position:absolute;right:0;top:0;bottom:0;z-index:2;width:46px;display:grid;place-items:center;
  cursor:pointer;background:rgba(201,162,39,.14);border:0;border-left:1px solid rgba(201,162,39,.4);
  color:var(--gold-soft)}
.cell .quick .ico{width:19px;height:19px}
.cell .quick.on{background:var(--gold);color:#17120A}
.cell .quick b{font:700 13px/1 var(--mono)}
/* The + is absolutely placed over the cell's right edge and comes after the text in the markup, so
   a "~" rule never reached the text and long names ran under it (18 Oct, owner's screenshot).
   Reserve its width (46px) plus a gap from the text itself; the same for the quantity badge. */
.cell:has(.quick) .mid{padding-right:50px}
.cell:has(.qtyb) .mid{padding-right:26px}
.cell .nm{overflow-wrap:anywhere} /* only a word too long for its line breaks; it never runs under the + */
/* swipe (18 Oct): the stage leaves vertical scrolling to the browser and sideways to the menu. The
   pager under a section or a dish says where you are; its labels are buttons. */
@media (max-width:1023px){ .gd-stage{touch-action:pan-y} }
.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin:2px 0 4px}
.pager .pgn{flex:1 1 0;min-width:0;min-height:30px;padding:0 2px;background:none;border:0;cursor:pointer;
  color:var(--cream-faint);font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pager .pgn.pv{text-align:left}
.pager .pgn.nx{text-align:right}
.pager .pgd{flex:0 0 auto;display:flex;align-items:center;gap:4px;font:500 9px/1 var(--mono);color:var(--cream-faint)}
.pager .pgd i{width:5px;height:5px;border-radius:50%;background:rgba(243,238,230,.32);transition:width .2s,background .2s}
.pager .pgd i.on{width:14px;border-radius:3px;background:var(--gold)}
.swpeek{position:fixed;z-index:15;pointer-events:none;opacity:0;transition:opacity .15s;padding:6px 10px;max-width:60vw;
  background:rgba(8,10,9,.84);border:1px solid rgba(201,162,39,.55);color:var(--gold-soft);
  font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swpeek.r{right:8px;top:34%}
.swpeek.l{left:8px;top:34%}
.swpeek.t{left:50%;top:24%;transform:translateX(-50%)}
@media (min-width:1024px){ .pager,.swpeek{display:none} }
/* On a phone the cell is ~170px wide: a smaller dish icon and a slightly narrower + give the name
   the room the reserve takes (the + stays a 40px-wide, full-height target). */
@media (max-width:440px){
  .cell{padding:7px 6px;gap:6px}
  .cell .ic{width:24px;height:24px;flex:0 0 24px}
  .cell .ic .ico{width:16px;height:16px}
  .cell .quick{width:40px}
  .cell:has(.quick) .mid{padding-right:44px}
  .cell:has(.quick) .open{right:40px}
}
.cell:has(.quick) .open{right:46px}
.cell .qtyb{position:absolute;right:6px;top:6px;z-index:2;min-width:22px;height:22px;display:grid;place-items:center;
  border-radius:999px;background:var(--gold);color:#17120A;font:700 10px/1 var(--mono)}
.corner{position:absolute;width:6px;height:6px;border:1.4px solid var(--gold);opacity:0;transition:opacity .12s;z-index:2}
.corner.tl{top:3px;left:3px;border-right:0;border-bottom:0}
.corner.tr{top:3px;right:3px;border-left:0;border-bottom:0}
.corner.bl{bottom:3px;left:3px;border-right:0;border-top:0}
.corner.br{bottom:3px;right:3px;border-left:0;border-top:0}
.cell.on .corner{opacity:1}
/* a finger leaves :hover behind on a phone, so the spot just tapped showed the next screen's
   first option as picked while the button still said pick one (16 Oct) */
@media (hover:hover){.cell:hover .corner{opacity:1}}
.cell.on{border-color:var(--gold);background:rgba(201,162,39,.20)}

/* detail screen */
.media{position:relative;border:1px solid rgba(243,238,230,.26);overflow:hidden;aspect-ratio:16/9;flex:0 0 auto;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.mtrack{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mtrack::-webkit-scrollbar{display:none}
.mpane{flex:0 0 100%;scroll-snap-align:start;background-size:cover;background-position:center;position:relative}
.mpane video{width:100%;height:100%;object-fit:cover;display:block}
.mdots{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.mdots i{width:5px;height:5px;border-radius:50%;background:rgba(243,238,230,.4)}
.mdots i.on{background:var(--gold)}
.mhint{position:absolute;bottom:6px;right:8px;font:600 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-dim);background:rgba(6,8,7,.6);padding:4px 6px}
.mhint[hidden]{display:none}

.dhead{padding:10px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.dtop{display:flex;align-items:baseline;gap:10px}
.dhead h5{font-family:var(--display);margin:0;font-size:22px;font-weight:600;flex:1;min-width:0}
.dpr{font:700 17px/1 var(--mono);color:var(--gold-soft)}
.dhead p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--cream-dim)}
.dhead .dsub{display:block;margin-top:5px;font:500 9px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint)}

.qline{display:flex;align-items:center;gap:8px;padding:7px 11px;font:600 10px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream);background:rgba(8,10,9,.72);border:0;border-left:2px solid var(--gold);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qline span{flex:1}
.qline .req{font-style:normal;color:var(--cream-dim);font-size:8.5px}
.qline .ok{font-style:normal;color:#5FD08A}

.addonrow{display:flex;gap:6px;flex-wrap:wrap}
.addchip{display:flex;align-items:center;gap:6px;padding:7px 9px;font-size:11px;font-weight:600;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.addchip .ico{width:15px;height:15px}
.addchip .p{font:700 10.5px/1 var(--mono);color:var(--gold-soft)}
.addchip.on{border-color:var(--gold);background:rgba(201,162,39,.2)}

.dfoot{display:flex;gap:7px;align-items:stretch;padding:8px 0 10px}
.qstep{display:flex;align-items:center;gap:2px;background:rgba(8,10,9,.55);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(10px);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.qstep .qb{width:32px;height:48px;background:transparent;border:0;color:var(--cream);font-size:16px;cursor:pointer}
.qstep b{min-width:18px;text-align:center;font:700 13px/1 var(--mono)}
.add{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.02em;
  background:var(--gold);color:#17120A;border:1px solid var(--gold);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.add.off{background:rgba(8,10,9,.52);color:var(--cream-dim);border-color:rgba(243,238,230,.26);
  backdrop-filter:blur(10px);font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}

.mk{font-style:normal;font-size:9px;margin-left:4px}
.mk.hot{color:#E8775F}.mk.veg{color:#5FD08A}.mk.nut{color:#D9A463}
.flydot{position:fixed;z-index:9999;width:14px;height:14px;border-radius:50%;background:var(--gold);
  pointer-events:none;margin:-7px 0 0 -7px}

/* ============ tiers: the sales rank does the triage the grid used to refuse to do ============
   The rank number is always printed, so identity is never carried by colour alone.
   Gold 1-5, jade 6-10, blue 11-20 — the owner's own three bands.
   Separation computed in OKLab, not eyeballed: worst normal pair dE 19.3, worst CVD pair 12.5,
   lowest contrast against the ink surface 5.5:1. */
:root{--t1:#C9A227;--t2:#2EC4B6;--t3:#5C86E8}
.cell .rank{position:absolute;top:0;left:0;z-index:2;min-width:15px;padding:2px 3px;text-align:center;
  font:700 7.5px/1 var(--mono);color:#17120A;background:rgba(243,238,230,.7)}
.cell.g1 .rank{background:var(--t1)}
.cell.g2 .rank{background:var(--t2)}
.cell.g3 .rank{background:var(--t3);color:#0B0F1A}
.cell.g1{border-color:rgba(201,162,39,.78);box-shadow:inset 0 0 0 1px rgba(201,162,39,.16)}
.cell.g2{border-color:rgba(46,196,182,.66)}
.cell.g3{border-color:rgba(92,134,232,.58)}
.cell .mid{padding-left:1px}
.cell .pr .cl{display:block;font:500 7.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-faint);font-style:normal;margin-top:2px}
.sold{display:block;margin-top:7px;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-faint)}
.sold.g1{color:var(--t1)}.sold.g2{color:var(--t2)}.sold.g3{color:var(--t3)}

/* ---- delivery-minimum meter, directly under the header ---- */
.meter{position:relative;z-index:5;height:16px;display:flex;align-items:center;
  background:rgba(6,8,7,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(243,238,230,.08);overflow:hidden}
.meter[hidden]{display:none}
/* .gd-meter is the live header meter (the prototype called it .meter). Until 19 Oct it had no
   rules for its fill or its words, so the fill never showed and the words were body text. */
.meter i,.gd-meter i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,162,39,.42),rgba(201,162,39,.16));
  transform-origin:left center;transition:transform .4s var(--ease)}
.meter span,.gd-meter span{position:relative;z-index:1;padding-left:10px;font:700 8px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-soft)}

/* ---- subbar additions: points, sound, search ---- */
.iconbtn{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;cursor:pointer;
  background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.22);color:var(--cream-dim);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.iconbtn .ico{width:17px;height:17px;color:inherit}
.iconbtn.on{border-color:var(--gold);color:var(--gold-soft)}
.iconbtn[hidden]{display:none}
.ptschip{margin-left:auto;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 7px;font:700 9.5px/1 var(--mono);
  color:var(--gold-soft);background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.45);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.ptschip .ico{width:13px;height:13px}
.ptschip[hidden]{display:none}
.srch{flex:1;display:flex;align-items:center;gap:4px;min-width:0;background:rgba(8,10,9,.62);
  border:1px solid var(--gold);backdrop-filter:blur(10px);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.srch[hidden]{display:none}
.srch input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--cream);
  font:500 12px/1 var(--body);padding:7px 2px 7px 9px}
.srch input::placeholder{color:var(--cream-faint)}
.srch input::-webkit-search-cancel-button{display:none}
.srchx{width:26px;height:26px;background:transparent;border:0;color:var(--cream-dim);font-size:14px;cursor:pointer}
/* 13 Nov (owner: the search box must take typing on the first tap): on a phone or tablet the box is 44px tall and its
   text 16px (no iOS zoom on focus), the clear button a 44px target, and the bar shows a text cursor. */
@media (max-width:1023px){
  .srch{min-height:44px;cursor:text}
  .srch input{font-size:16px;align-self:stretch}
  .srchx{width:44px;height:44px}
}
.subhead2{font:700 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  padding:4px 2px 0;text-shadow:0 1px 6px rgba(0,0,0,.95)}

/* ---- the rail teaches its own glyphs, then gets out of the way ---- */

/* ---- first screen: closed state and the one-tap reorder ---- */
.closedban{padding:9px 12px;border-color:rgba(232,119,95,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.closedban b{display:block;font-size:12px;color:#E8775F;margin-bottom:2px}
.closedban span{font-size:11px;line-height:1.45;color:var(--cream-dim)}
.again{padding:9px 10px 10px;border-color:rgba(201,162,39,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.again .at{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.again .lab{flex:1;font:700 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.again .tot{font:700 13px/1 var(--mono);color:var(--gold-soft)}
.again .lines{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.again .ln{display:flex;align-items:center;gap:4px;padding:3px 6px;font-size:9.5px;font-weight:600;
  color:var(--cream-dim);border:1px solid rgba(243,238,230,.18)}
.again .ln .ico{width:13px;height:13px}
.again .go{width:100%;min-height:38px;display:flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;font:700 12.5px/1 var(--body);background:var(--gold);color:#17120A;border:1px solid var(--gold);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.again .go .ico{width:16px;height:16px;color:#17120A}
.again .go.off{background:rgba(8,10,9,.5);color:var(--cream-dim);border-color:rgba(243,238,230,.26)}
.srchhint{padding:10px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.srchhint b{display:block;font-size:13px;margin-bottom:3px}
.srchhint span{font-size:11.5px;line-height:1.5;color:var(--cream-dim)}

/* ---- media box: capped so the first question stays above the fold ---- */
.media{aspect-ratio:16/9;max-height:168px}
.mtag{position:absolute;top:6px;left:7px;font:700 7.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-dim);background:rgba(6,8,7,.66);padding:4px 6px}
.mtag.on{color:var(--gold-soft);border:1px solid rgba(201,162,39,.4)}
.mdots{bottom:7px;gap:6px}
.mdots{bottom:2px;padding:6px}
.mdots .dot{width:24px;height:24px;padding:0;border:0;cursor:pointer;background:transparent;position:relative}
.mdots .dot::after{content:'';position:absolute;inset:9px;border-radius:50%;background:rgba(243,238,230,.45)}
.mdots .dot.on::after{background:var(--gold)}
.mnudge{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;
  place-items:center;cursor:pointer;border-radius:50%;background:rgba(6,8,7,.6);border:1px solid rgba(201,162,39,.55);
  color:var(--gold-soft);animation:nudge 1.9s ease-in-out 3}
.mnudge .ico{width:14px;height:14px}
.mnudge[hidden]{display:none}
@keyframes nudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(3px)}}
@media(prefers-reduced-motion:reduce){.mnudge{animation:none}}
.qline.done{border-left-color:#5FD08A}
.qline .ok .ico{width:12px;height:12px;color:#5FD08A}

/* ---- the bag: the screen that was missing ---- */
.baglines{display:flex;flex-direction:column;gap:5px}
.bagline{position:relative;display:flex;align-items:center;gap:8px;padding:7px 8px;
  background:rgba(8,10,9,.56);border:1px solid rgba(243,238,230,.24);backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.bagline .ic{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.bagline .ic .ico{width:18px;height:18px}
.bl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bl-nm{font-size:11.5px;font-weight:600;line-height:1.2}
.bl-op{font:500 9.5px/1.3 var(--mono);color:var(--gold-soft)}
.bl-ed{font:700 7.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-faint);margin-top:2px}
.bl-pr{font:700 11.5px/1 var(--mono);color:var(--cream)}
.bl-alt{display:block;margin-top:3px;font-style:normal;font-weight:500;font-size:10px;color:var(--cream-faint);text-align:right}
.bl-hit{position:absolute;inset:0 128px 0 0;background:transparent;border:0;cursor:pointer;z-index:1}
.bl-qty{position:relative;z-index:2;display:flex;align-items:center;gap:1px;flex:0 0 auto}
.blq{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;
  background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.22);color:var(--cream)}
.blq .ico{width:15px;height:15px;color:#E8775F}
.bl-qty b{min-width:18px;text-align:center;font:700 12px/1 var(--mono)}
.bagline:hover{border-color:rgba(201,162,39,.6)}

.seg{display:flex;gap:6px}
.sgb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;cursor:pointer;
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);color:var(--cream-dim);
  font:600 10.5px/1 var(--body);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.sgb .ico{width:18px;height:18px}
.sgb i{font-style:normal;font:500 8px/1 var(--mono);letter-spacing:.06em;color:var(--cream-faint)}
.sgb.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.16)}
.sgb.on i{color:var(--gold-soft)}

.minban{padding:9px 10px 10px;border-color:rgba(201,162,39,.55);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.minban .mt b{display:block;font:700 13px/1 var(--mono);color:var(--gold-soft);margin-bottom:2px}
.minban .mt span{font-size:10.5px;line-height:1.4;color:var(--cream-dim)}
.mbar{height:5px;margin:8px 0;background:rgba(243,238,230,.14);overflow:hidden}
.mbar i{display:block;width:100%;height:100%;background:var(--gold);transform-origin:left center;transition:transform .4s var(--ease)}
.minacts{display:flex;gap:6px}
.mina{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px;cursor:pointer;
  font:600 10px/1 var(--body);background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5);color:var(--gold-soft)}
.mina .ico{width:14px;height:14px}

.sums{padding:8px 11px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.sumrow{display:flex;align-items:baseline;gap:10px;padding:3px 0;font-size:11px;color:var(--cream-dim)}
.sumrow span{flex:1}
.sumrow b{font:700 11.5px/1 var(--mono);color:var(--cream)}
.sumrow.good b{color:#5FD08A}
.sumrow.tot{margin-top:4px;padding-top:6px;border-top:1px solid rgba(243,238,230,.18)}
.sumrow.tot span{font-weight:700;color:var(--cream);font-size:12px}
.sumrow.tot b{font-size:16px;color:var(--gold-soft)}
.sumrow.pts b{color:var(--gold-soft);font-size:10.5px}
.sumrow.pts b i{font-style:normal;color:var(--cream-faint)}

.foot2{display:flex;gap:7px;align-items:stretch;padding:8px 0 10px}
.alt{flex:0 0 auto;min-height:48px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;font:600 11px/1 var(--body);background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.28);
  color:var(--cream);backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.alt .ico{width:15px;height:15px}
.foot2 .add{flex:1}

/* ---- checkout ---- */
.cohead{padding:9px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.cot b{display:block;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.cot span{font-size:11px;line-height:1.4;color:var(--cream-dim)}
.slotrow{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.slotrow::-webkit-scrollbar{display:none}
.slot{flex:0 0 auto;min-width:72px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 9px;
  cursor:pointer;background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  color:var(--cream-dim);font:700 11px/1 var(--mono);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.slot .ico{width:16px;height:16px}
.slot b{font:700 10.5px/1.2 var(--body);text-align:center}
.slot i{font-style:normal;font:500 8px/1 var(--mono);color:var(--cream-faint)}
.slot.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.16)}
.slot.on i{color:var(--gold-soft)}
.slotrow.pay .slot{flex:1}
.profile{display:flex;align-items:center;gap:10px;padding:9px 11px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.profile .pic{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.profile .pm{min-width:0}
.profile .pm b{display:block;font-size:11.5px}
.profile .pm span{display:block;font:500 10px/1.3 var(--mono);color:var(--gold-soft);margin-top:2px}
.profile .pm i{display:block;font-style:normal;font-size:9.5px;line-height:1.35;color:var(--cream-faint);margin-top:3px}
.rewardrow{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.rewardrow::-webkit-scrollbar{display:none}
.reward{flex:0 0 auto;min-width:78px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 8px;
  cursor:pointer;background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.reward .ico{width:17px;height:17px}
.reward b{font:600 10px/1.2 var(--body);text-align:center}
.reward i{font-style:normal;font:700 8.5px/1 var(--mono);color:var(--gold-soft)}
.reward.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.18)}
.rewnote{font-size:10.5px;line-height:1.45;color:var(--cream-faint);padding:2px 2px 0}

/* ---- confirmation: the beat the flow never had ---- */
.donecard{padding:16px 14px;text-align:center;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.donecard .tick{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 10px;border-radius:50%;
  background:rgba(95,208,138,.16);border:1px solid #5FD08A}
.donecard .tick .ico{width:26px;height:26px;color:#5FD08A}
.donecard b{display:block;font-family:var(--display);font-size:21px;font-weight:600}
.donecard .sub{display:block;margin-top:5px;font:700 10px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-soft)}
.donecard .sub2{display:block;margin-top:7px;font-size:11px;color:var(--cream-dim)}
.ptscard{padding:10px 12px;border-color:rgba(201,162,39,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ptscard .pt{display:flex;align-items:center;gap:8px}
.ptscard .lab{flex:1;display:flex;align-items:center;gap:6px;font:700 9px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.ptscard .lab .ico{width:16px;height:16px}
.ptscard .pt b{font:700 17px/1 var(--mono);color:var(--gold-soft)}
.pbar{height:5px;margin:8px 0 7px;background:rgba(243,238,230,.14);overflow:hidden}
.pbar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform-origin:left center;transition:transform .6s var(--ease)}
.pnote{display:block;font-size:10.5px;line-height:1.45;color:var(--cream-dim)}
.pnote b{color:var(--gold-soft)}
.pmul{display:block;margin-top:4px;font:700 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}

/* ============ sub-groups as chips, join offer, accounts ============ */
.cat .subs{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.cat .sg{font-style:normal;font:600 7.5px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;
  padding:3px 5px;color:var(--gold-soft);background:rgba(201,162,39,.16);border:1px solid rgba(201,162,39,.34)}
.cat .sg.lim{color:var(--t2);background:rgba(46,196,182,.14);border-color:rgba(46,196,182,.36)}

.joinban{display:flex;align-items:center;gap:9px;padding:9px 10px;border-color:rgba(201,162,39,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.joinban .gi{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:rgba(201,162,39,.18)}
.joinban .gi .ico{width:18px;height:18px}
.jm{flex:1;min-width:0}
.jm b{display:block;font-size:12px}
.jm span{display:block;margin-top:2px;font-size:10px;line-height:1.4;color:var(--cream-dim)}
.jgo{flex:0 0 auto;min-height:42px;padding:8px 14px;cursor:pointer;font:700 11px/1 var(--body);
  background:var(--gold);color:#17120A;border:1px solid var(--gold);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.jgo.wide{width:100%;margin-top:9px;min-height:40px;display:flex;align-items:center;justify-content:center;gap:7px}
.jgo .ico{width:15px;height:15px;color:#17120A}

.joincard{padding:16px 14px;text-align:center;border-color:rgba(201,162,39,.5);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.joincard .gi.big{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;border-radius:50%;
  background:rgba(201,162,39,.18);border:1px solid rgba(201,162,39,.5)}
.joincard .gi.big .ico{width:26px;height:26px}
.joincard b{display:block;font-family:var(--display);font-size:21px;font-weight:600}
.joincard .sub{display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--cream-dim)}

.ways{display:flex;flex-direction:column;gap:5px}
.way{display:flex;align-items:center;gap:10px;padding:10px 11px;cursor:pointer;text-align:left;
  background:rgba(8,10,9,.56);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);color:var(--cream);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.way > .ico:first-child{width:19px;height:19px;flex:0 0 19px}
.way > .ico:last-child{width:13px;height:13px;flex:0 0 13px;color:var(--cream-faint)}
.wm2{flex:1;min-width:0}
.wm2 b{display:block;font-size:12.5px;font-weight:600}
.wm2 i{display:block;margin-top:2px;font-style:normal;font-size:10px;color:var(--cream-faint)}
.way:hover{border-color:var(--gold)}
.finesmall{margin:0;font-size:9.5px;line-height:1.45;color:var(--cream-faint);padding:0 2px}

.benefits{display:flex;flex-direction:column;gap:5px}
.ben{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;
  background:rgba(8,10,9,.46);border:1px solid rgba(243,238,230,.18);backdrop-filter:blur(8px)}
.ben .bi{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.22),transparent 70%)}
.ben .bi .ico{width:15px;height:15px}
.bm b{display:block;font-size:11.5px}
.bm span{display:block;margin-top:2px;font-size:10px;line-height:1.45;color:var(--cream-dim)}

.profile.big{padding:12px}
.profile .pedit{margin-left:auto;flex:0 0 auto;min-height:40px;padding:7px 12px;cursor:pointer;font:700 9px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid rgba(243,238,230,.3);
  color:var(--cream-dim)}

.formcard{padding:10px 11px;display:flex;flex-direction:column;gap:9px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.fld{display:block}
.fld > span{display:block;margin-bottom:4px;font:700 8.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.fld input{width:100%;padding:9px 10px;background:rgba(6,8,7,.6);color:var(--cream);
  border:1px solid rgba(243,238,230,.26);font:500 12.5px/1.2 var(--body);outline:0}
.fld input:focus{border-color:var(--gold)}
.fld input::placeholder{color:var(--cream-faint)}

/* website sign-in (22 Oct): the email and code card, who is signed in at checkout */
.signedas{display:flex;align-items:center;gap:9px;padding:8px 11px;background:rgba(8,10,9,.5);
  border:1px solid rgba(201,162,39,.45);backdrop-filter:blur(10px)}
.signedas .pic{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  border:1px solid rgba(201,162,39,.6);color:var(--gold-soft)}
.signedas .pic .ico{width:14px;height:14px}
.signedas .sm{flex:1;min-width:0;font-size:11px;line-height:1.35;color:var(--cream-dim);overflow-wrap:anywhere}
.signedas .sm b{color:var(--cream);font-weight:600}
.authcard .fld input{font-size:16px;padding:11px 10px}
.authcard .fld input.codein{font:700 24px/1 var(--mono);letter-spacing:.32em;text-align:center}
.authsent{margin:0;font-size:12px;line-height:1.5;color:var(--cream)}
.authsent span{display:block;margin-top:4px;font-size:11px;color:var(--cream-dim);overflow-wrap:anywhere}
.authsent b{color:var(--gold-soft);font-weight:600}
.authlinks{display:flex;flex-wrap:wrap;gap:6px}
.autherr{margin:0;padding:7px 9px;font-size:11px;line-height:1.45;color:#FFB4A8;
  background:rgba(214,69,55,.14);border:1px solid rgba(214,69,55,.5)}
.savebtn{align-self:flex-start}
/* Google sign-in (22 Oct): Google draws the button; this only places it */
.gbtn{display:flex;justify-content:center;min-height:44px}
.gbtn:empty{display:none}
/* 13 Nov (phone checks): Google draws its own button and, under it, an iframe that replaces it once Google answers. On an
   iPhone the two showed stacked, so the box is one button high and clips the second. The page is color-scheme:dark and
   Google's iframe is light; a mismatch paints the iframe opaque, the white box round the dark button on Android, so the
   box takes Google's scheme and stays transparent. */
.gbtn{height:44px;max-height:44px;overflow:hidden;align-items:center;color-scheme:light;background:transparent}
.gbtn iframe{color-scheme:light;background:transparent}
.ordiv{display:flex;align-items:center;gap:10px;margin:2px 0;font:700 8.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream-faint)}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:rgba(243,238,230,.18)}
.hist{display:flex;flex-direction:column;gap:5px}
.hrow{display:flex;align-items:center;gap:9px;padding:9px 10px;
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.24);backdrop-filter:blur(10px)}
.hn{flex:1;min-width:0;font:700 11.5px/1.2 var(--mono)}
.hn i{display:block;margin-top:2px;font-style:normal;font:500 9px/1 var(--mono);color:var(--cream-faint)}
.ht{font-size:10.5px;color:var(--cream-dim)}
.hgo{flex:0 0 auto;min-height:40px;display:flex;align-items:center;gap:5px;padding:7px 11px;cursor:pointer;
  font:700 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5);color:var(--gold-soft)}
.hgo .ico{width:12px;height:12px}
.hgo.off{opacity:.34}

.ptscard.guest{border-color:rgba(243,238,230,.26)}
.ptscard .pt b.miss{color:var(--cream-faint);text-decoration:line-through;text-decoration-thickness:2px}
.ptscard.guest .lab{color:var(--cream-dim)}

/* order tracker on the confirmation */
.track{display:flex;gap:4px}
.tstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;
  background:rgba(8,10,9,.46);border:1px solid rgba(243,238,230,.16);color:var(--cream-faint)}
.tstep .ico{width:16px;height:16px}
.tstep i{font-style:normal;font:600 8px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tstep.on{color:#5FD08A;border-color:rgba(95,208,138,.5);background:rgba(95,208,138,.1)}
/* the link to the tracking page under the steps (15 Oct) */
.trackopen{display:block;margin-top:8px;text-align:center;font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#E0C06A;text-decoration:underline}

/* dietary filters in search */
.dietrow{display:flex;gap:5px;flex-wrap:wrap}
.dchip{display:flex;align-items:center;gap:5px;min-height:36px;padding:6px 11px;cursor:pointer;font:600 10px/1 var(--body);
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);color:var(--cream-dim);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.dchip .ico{width:13px;height:13px}
.dchip.on{border-color:#5FD08A;color:#5FD08A;background:rgba(95,208,138,.14)}

/* sound control, now beside the film it unmutes */
.msound{position:absolute;top:6px;right:6px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;background:rgba(6,8,7,.62);border:1px solid rgba(243,238,230,.3);color:var(--cream-dim)}
.msound .ico{width:14px;height:14px;color:inherit}
.msound.on{border-color:var(--gold);color:var(--gold-soft)}

/* an unanswered question, pointed at */
.qline.flash{background:rgba(201,162,39,.2);border-left-color:var(--gold-soft)}

/* toast */
.toast{position:absolute;z-index:40;left:50%;bottom:74px;transform:translateX(-50%);max-width:84%;
  display:flex;align-items:center;gap:7px;padding:9px 13px;font-size:11.5px;line-height:1.4;
  background:rgba(6,8,7,.88);border:1px solid var(--gold);color:var(--cream);backdrop-filter:blur(14px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.toast .ico{width:16px;height:16px;flex:0 0 16px;color:var(--gold-soft)}
.toast b{color:var(--gold-soft)}

/* ============ search bar, light add-ons, flat options, upsells, notes, allergens ============ */
.srchbar{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:0 12px;cursor:pointer;
  background:rgba(8,10,9,.56);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  color:var(--cream-dim);font:500 12.5px/1 var(--body);text-align:left;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.srchbar .ico{width:17px;height:17px;flex:0 0 17px}
.srchbar span{flex:1}
.srchbar:hover{border-color:var(--gold)}

/* a £1 can does not get a hero film, a display face and a best-seller rank */
.litehead{display:flex;align-items:center;gap:11px;padding:12px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.litehead .lic{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(201,162,39,.24),transparent 70%)}
.litehead .lic .ico{width:24px;height:24px}
.lm{flex:1;min-width:0}
.lm b{display:block;font-size:15px;font-weight:600}
.lm span{display:block;margin-top:3px;font:500 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream-faint)}

/* when every option costs the same and draws the same glyph, drop both */
.flatopts{display:flex;flex-wrap:wrap;gap:6px}
.fopt{flex:1 1 30%;min-width:88px;min-height:46px;padding:8px 10px;cursor:pointer;
  font:600 12px/1.2 var(--body);background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.26);
  backdrop-filter:blur(10px);color:var(--cream);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.fopt.on{border-color:var(--gold);background:rgba(201,162,39,.2);color:var(--gold-soft)}
@media (hover:hover){.fopt:hover{border-color:var(--gold)}}
.qline .opt{font-style:normal;color:var(--cream-dim);font-size:8.5px}

/* the question the counter always asks */
.upsrow{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.upsrow::-webkit-scrollbar{display:none}
.ups{flex:1 0 auto;min-width:80px;min-height:62px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;cursor:pointer;padding:8px 10px;
  background:rgba(8,10,9,.52);border:1px solid rgba(201,162,39,.4);backdrop-filter:blur(10px);color:var(--cream);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.ups .ico{width:18px;height:18px}
.ups b{font:600 10.5px/1.1 var(--body);text-align:center}
.ups i{font-style:normal;font:700 10px/1 var(--mono);color:var(--gold-soft)}
.ups:hover{border-color:var(--gold);background:rgba(201,162,39,.14)}

.sidecard{padding:10px 11px;display:flex;flex-direction:column;gap:9px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.fhelp{display:block;margin-top:4px;font-style:normal;font-size:9.5px;line-height:1.4;color:var(--cream-faint)}
.cutrow{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:8px 10px;cursor:pointer;
  background:rgba(8,10,9,.4);border:1px solid rgba(243,238,230,.22);color:var(--cream-dim);text-align:left}
.cutrow .ico{width:17px;height:17px;flex:0 0 17px}
.cutrow b{flex:1;font-size:11.5px;font-weight:600}
.cutrow i{font-style:normal;font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-faint)}
.cutrow.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(201,162,39,.12)}
.cutrow.on i{color:var(--gold-soft)}

/* the total never scrolls away */
.foottot{display:flex;align-items:baseline;gap:10px;padding:9px 11px 8px;margin-bottom:-2px;
  background:rgba(6,8,7,.78);border:1px solid rgba(243,238,230,.2);border-bottom:0;backdrop-filter:blur(14px);
  clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}
.foottot span{flex:1;font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}
.foottot b{font:700 18px/1 var(--mono);color:var(--gold-soft)}

/* both paths out of checkout are buttons, and the guest one comes first */
.fork{display:flex;gap:6px}
.fguest,.fjoin{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:62px;padding:9px 8px;cursor:pointer;text-align:center;backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.fguest{background:rgba(243,238,230,.1);border:1px solid rgba(243,238,230,.5);color:var(--cream)}
.fguest .ico{width:18px;height:18px;flex:0 0 18px}
.fguest b,.fjoin b{font-size:11.5px;font-weight:700;line-height:1.2}
.fguest i,.fjoin i{font-style:normal;font:600 9px/1.2 var(--mono)}
.fguest i{color:var(--cream-faint)}
.fjoin{background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.55);color:var(--gold-soft)}
.fjoin .ico{width:18px;height:18px;flex:0 0 18px}
.fguest:hover{border-color:var(--cream)}
.fjoin:hover{border-color:var(--gold)}
.guestok{display:flex;align-items:center;gap:9px;padding:9px 11px;
  background:rgba(95,208,138,.1);border:1px solid rgba(95,208,138,.45);backdrop-filter:blur(10px);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.guestok > .ico{width:18px;height:18px;flex:0 0 18px;color:#5FD08A}
.guestok b{display:block;font-size:12px;color:#5FD08A}
.guestok span{display:block;margin-top:2px;font-size:10px;color:var(--cream-dim)}
.guestok > span{flex:1;min-width:0}
.undo{flex:0 0 auto;min-height:40px;padding:7px 11px;cursor:pointer;font:700 9px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid rgba(201,162,39,.5);
  color:var(--gold-soft)}

.allergy{display:flex;gap:8px;padding:9px 10px;background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.2);
  backdrop-filter:blur(10px)}
.allergy .ico{width:15px;height:15px;flex:0 0 15px;color:var(--cream-dim)}
.allergy span{font-size:10px;line-height:1.5;color:var(--cream-dim)}
.allergy b{color:var(--gold-soft);white-space:nowrap}

.donecard .sub3{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;
  font-size:10.5px;line-height:1.4;color:var(--cream-dim)}
.donecard .sub3 .ico{width:14px;height:14px;flex:0 0 14px;color:var(--gold-soft)}
.donecard .sub3 b{display:inline;font-family:var(--mono);font-size:10.5px;color:var(--gold-soft)}

.whereline{display:flex;align-items:center;gap:7px;margin:0;padding:0 2px;
  font-size:10.5px;line-height:1.4;color:var(--cream-dim);text-shadow:0 1px 6px rgba(0,0,0,.95)}
.whereline .ico{width:15px;height:15px;flex:0 0 15px;color:var(--gold-soft)}

/* ============================== DESKTOP ==============================
   Not the phone stretched. Three panes: sections down the left where there is room for
   whole words, dishes in the middle, and the order docked on the right where it never
   leaves the screen — which is the one thing a wide window actually buys you. */

  margin-top:4px;overflow:hidden}

  border:1px solid var(--line-2);border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.ph.desk{font-size:16px}

.d-top{position:relative;z-index:6;display:flex;align-items:center;gap:16px;padding:12px 18px;
  background:rgba(6,8,7,.66);backdrop-filter:blur(16px);border-bottom:1px solid rgba(243,238,230,.10)}
.desk .homebtn{flex:0 0 auto;min-width:0;gap:11px}
.desk .wm{font-size:19px}
.desk .ph-status{font-size:9.5px;margin-top:4px}
.d-search{flex:1;max-width:520px;display:flex;align-items:center;gap:9px;padding:0 13px;
  background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.26);backdrop-filter:blur(10px);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.d-search .ico{width:17px;height:17px;flex:0 0 17px;color:var(--cream-faint)}
.d-search input{flex:1;min-width:0;height:42px;background:transparent;border:0;outline:0;color:var(--cream);
  font:500 14px/1 var(--body)}
.d-search input::placeholder{color:var(--cream-faint)}
.d-search input::-webkit-search-cancel-button{display:none}
.d-search:focus-within{border-color:var(--gold)}
.desk .ptschip{margin-left:auto;padding:7px 11px;font-size:11px}
.desk .ptschip .ico{width:15px;height:15px}
.desk .mebtn{flex:0 0 42px;width:42px;height:42px}
.desk .mebtn .ico{width:21px;height:21px}
.desk .mebtn .ini{font-size:15px}

.d-body{position:relative;z-index:5;flex:1;min-height:0;display:grid;
  grid-template-columns:238px minmax(0,1fr) 340px}
.d-rail{display:flex;flex-direction:column;gap:3px;padding:14px 10px;overflow-y:auto;scrollbar-width:none;
  background:rgba(6,8,7,.46);backdrop-filter:blur(12px);border-right:1px solid rgba(243,238,230,.08)}
.d-rail::-webkit-scrollbar{display:none}
.rrow{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:8px 11px;cursor:pointer;
  text-align:left;background:transparent;border:1px solid transparent;color:var(--cream-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.rrow .ico{width:21px;height:21px;flex:0 0 21px}
.rrow .rm{flex:1;min-width:0}
.rrow .rm b{display:block;font-size:13.5px;font-weight:600;line-height:1.15}
.rrow .rm i{display:block;margin-top:2px;font-style:normal;font:500 8.5px/1.3 var(--mono);
  letter-spacing:.02em;text-transform:uppercase;color:var(--cream-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .rn{flex:0 0 auto;font:700 10px/1 var(--mono);color:var(--cream-faint)}
.rrow:hover{background:rgba(243,238,230,.06);border-color:rgba(243,238,230,.18)}
.rrow.on{color:var(--gold);border-color:var(--gold);background:rgba(201,162,39,.14)}
.rrow.on .rm i,.rrow.on .rn{color:var(--gold-soft)}

.d-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column}
/* grid and flex children default to min-height:auto, which let the menu column grow to its
   content instead of scrolling — the desktop menu was clipped at one screenful. */
.d-sub{padding:12px 18px 2px}
.desk .ph-stage{padding:8px 18px 16px;gap:10px}
.desk .ph-stage > *:first-child{margin-top:0}
.desk .ph-foot{padding:0 18px 14px}
.desk .itemgrid{grid-template-columns:repeat(3,1fr);gap:8px}
.desk .cell{min-height:62px}
.desk .cell .nm{font-size:12px}
.desk .cell .pr{font-size:12.5px}
.desk .segnav{top:0}
.desk .segb b{font-size:12px}
.desk .joinban,.desk .again{max-width:none}
.desk .subhead2{font-size:10px}

/* the order, always on screen */
.d-side{display:flex;flex-direction:column;min-height:0;
  background:rgba(6,8,7,.6);backdrop-filter:blur(14px);border-left:1px solid rgba(243,238,230,.1)}
.sidehead{display:flex;align-items:center;gap:9px;padding:14px 16px 10px;
  border-bottom:1px solid rgba(243,238,230,.1)}
.sidehead .sh{flex:1;display:flex;align-items:center;gap:8px;font:700 10px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sidehead .sh .ico{width:17px;height:17px}
.sidehead b{font:700 11px/1 var(--mono);color:var(--cream-dim)}
.sidebody{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px;
  padding:12px 14px}
.sidebody::-webkit-scrollbar{display:none}
.sidebody > *{flex:0 0 auto}
.sidefoot{padding:0 14px 14px}
.d-side .upsrow{flex-wrap:wrap}
.d-side .ups{flex:1 1 44%;min-width:0}
.d-side .seg{flex-direction:column}
.d-side .sgb{flex-direction:row;justify-content:flex-start;gap:8px;min-height:44px;padding:8px 11px}
.d-side .sgb i{margin-left:auto}
.d-side .foot2{flex-direction:column;padding:8px 0 0}
.d-side .alt,.d-side .add{width:100%}
.d-side .bagline{padding:8px}
.d-side .bl-hit{inset:0 108px 0 0}
.d-side .minacts{flex-direction:column}

/* a dish opens over the grid instead of replacing it, so you never lose your place */
.d-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:28px;
  background:rgba(4,6,5,.62);backdrop-filter:blur(3px)}
.d-overlay[hidden]{display:none}
.ovlcard{position:relative;width:min(680px,100%);max-height:100%;display:flex;flex-direction:column;
  background:rgba(10,13,12,.94);border:1px solid rgba(201,162,39,.4);box-shadow:0 30px 80px rgba(0,0,0,.7);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.ovlbody{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:10px;
  padding:18px 18px 4px}
.ovlbody::-webkit-scrollbar{display:none}
.ovlbody > *{flex:0 0 auto}
.ovlfoot{padding:6px 18px 16px}
.ovlx{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:grid;place-items:center;
  cursor:pointer;font-size:15px;line-height:1;background:rgba(8,10,9,.7);border:1px solid rgba(243,238,230,.3);
  color:var(--cream)}
.ovlx:hover{border-color:var(--gold);color:var(--gold-soft)}
.ovlcard .media{max-height:300px}
.ovlcard .itemgrid.opts{grid-template-columns:repeat(3,1fr)}
.ovlcard .dhead h5{font-size:28px}
.ovlcard .dpr{font-size:21px}
.ovlcard .dhead p{font-size:13.5px}

/* hover is free on a desktop and worth using */
.desk .cell:hover{border-color:var(--gold);background:rgba(201,162,39,.08)}
.desk .cell:hover .corner{opacity:1}
.desk .ups:hover,.desk .fopt:hover{border-color:var(--gold)}

/* continuous menu: section and group headers instead of tabs, because on one scroll
   a header is a landmark and a tab is a thing you have to find */
.dsec{display:flex;flex-direction:column;gap:8px}
.dsech{position:sticky;top:-8px;z-index:4;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;
  background:rgba(6,8,7,.82);backdrop-filter:blur(14px);border-left:2px solid var(--gold);
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)}
.dsech .ico{width:18px;height:18px}
.dsech b{font-weight:700}
.dgrph{display:flex;align-items:center;gap:10px;padding:2px 2px 0;
  font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.dgrph span{flex:0 0 auto}
.dgrph i{font-style:normal;font-size:8.5px;color:var(--t2);padding:3px 6px;
  border:1px solid rgba(46,196,182,.4);background:rgba(46,196,182,.12)}
.dgrph em{margin-left:auto;font-style:normal;color:var(--cream-faint)}
.desk .ph-stage{scroll-behavior:smooth}

@media(max-width:520px){.media{max-height:146px}}


/* ---- production aliases: the prototype's selectors, under production names ----
   Renaming 509 rules would have been a day of risk for no gain. These eight lines make
   .gd-stage behave as .ph-stage, .gd-rail as .iconrail on a phone and .d-rail on a desktop,
   and so on, so the prototype sheet and the live site cannot drift apart. */
.gd-stage{position:relative;z-index:4;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 10px 10px}
.gd-stage > *:first-child{margin-top:auto}
.gd-stage > *{flex:0 0 auto}
.gd-foot{position:relative;z-index:5;padding:0 10px}
.gd-foot:empty{display:none}
.gd-rail{position:relative;z-index:5;display:flex;gap:2px;padding:5px;overflow:hidden;
  background:rgba(6,8,7,.5);backdrop-filter:blur(12px);border-bottom:1px solid rgba(243,238,230,.08)}
.gd-meter{position:relative;z-index:5;height:16px;display:flex;align-items:center;overflow:hidden;
  background:rgba(6,8,7,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(243,238,230,.08)}
.gd-meter[hidden]{display:none}
@media (min-width:1024px){
  .gd-stage{padding:8px 18px 16px;gap:10px;scroll-behavior:smooth}
  .gd-stage > *:first-child{margin-top:0}
  .gd-foot{padding:0 18px 14px}
  .gd-rail{flex-direction:column;gap:3px;padding:14px 10px;overflow-y:auto;border-bottom:0;
    background:rgba(6,8,7,.46);border-right:1px solid rgba(243,238,230,.08)}
}

/* Golden Dragon — production shell.
   One DOM, two layouts. The phone layout is the default; the desktop layout takes over at
   1024px through grid-template-areas alone, so there is no second markup tree to keep in step
   and nothing remounts when a window crosses the breakpoint.
   The main column is display:contents on a phone — its three parts drop into the outer grid —
   and becomes a real flex column on a desktop. No JavaScript re-parenting anywhere. */
html{height:100%}
body.gd{margin:0;height:100%;background:var(--ink);color:var(--cream);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;overflow:hidden}

.gd-app{position:fixed;inset:0;height:100dvh;display:grid;overflow:hidden;background:#000;
  grid-template-columns:100%;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"top" "rail" "meter" "stage" "foot"}
.gd-app > .filmlayer,.gd-app > .vig,.gd-app > .gd-ovl{grid-column:1/-1;grid-row:1/-1}
.gd-app > .filmlayer{z-index:0}
.gd-app > .vig{z-index:1}
.gd-app > .gd-ovl{z-index:20}
.gd-app > .ph-top{grid-area:top}
.gd-app > .gd-rail{grid-area:rail}
.gd-app > .gd-meter{grid-area:meter}
.gd-app > .gd-side{display:none}
.gd-main{display:contents}
.gd-main > .subbar{grid-area:stage;align-self:start;z-index:5}
.gd-main > .gd-stage{grid-area:stage;min-height:0;padding-top:40px}
.gd-main > .gd-foot{grid-area:foot}

/* a phone's home indicator must never sit on top of Add to bag */
.gd-app > .ph-top{padding-top:calc(8px + env(safe-area-inset-top))}
.gd-main > .gd-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}

@media (min-width:1024px){
  .gd-app{
    grid-template-columns:238px minmax(0,1fr) 340px;
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "top   top   top"
      "meter meter meter"
      "rail  main  side"}
  .gd-app > .gd-side{grid-area:side;display:flex}
  .gd-main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
  .gd-main > .subbar{align-self:auto;padding:12px 18px 2px}
  .gd-main > .gd-stage{flex:1;min-height:0;padding-top:8px}
  .gd-main > .gd-foot{padding-bottom:14px}
}

/* a page that is only a menu needs no page chrome */
.gd-app ::-webkit-scrollbar{display:none}
.gd-app *{scrollbar-width:none}

/* live region: announced, never seen */
.gd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* the two states where the menu cannot be shown at all */
.gd-down,.gd-noscript{position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  margin:0;padding:32px;text-align:center;background:var(--ink);color:var(--cream);
  font:500 15px/1.6 var(--body)}
.gd-down a,.gd-noscript a{color:var(--gold-soft)}

@media (min-width:1024px){
  /* the docked order replaces the cart chip; two of them would be two sources of truth */
  .gd-app > .ph-top .bagchip{display:none}
  .gd-app > .ph-top .homebtn{flex:0 0 auto}
  .gd-app > .ph-top{gap:16px}
  .gd-app > .ph-top .mebtn{margin-left:auto;width:42px;height:42px;flex:0 0 42px}
  .gd-main > .subbar .srch{max-width:420px}
}

/* ---------- the card sheet ----------
   Its own layer, above everything, so a repaint of the app cannot pull Stripe's iframe
   out from under someone halfway through a card number. The fields themselves sit on a
   light panel: Stripe's own look is built for that ground, and fighting it inside an
   iframe is how a card form ends up unreadable on somebody's phone. */
.paysheet{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(4,6,5,.78);backdrop-filter:blur(4px);overflow-y:auto}
html.paying,html.paying body{overflow:hidden}
.paycard{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px - env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:12px;
  padding:20px 18px 16px;background:rgba(10,13,12,.97);border:1px solid rgba(201,162,39,.45);
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.payhead{display:flex;flex-direction:column;gap:2px;padding-right:40px}
.payhead b{font-family:var(--display,inherit);font-size:24px;letter-spacing:.01em;color:var(--gold-soft)}
.payhead i{font-style:normal;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#9A9389}
/* Stripe decides how tall its own form is, and with Link's sign-up switched on it is
   taller than a phone. So the fields scroll and the Pay button does not: whatever Stripe
   puts in there, the thing you came to press is already under your thumb. */
.payfields{flex:1 1 auto;min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#FBF8F2;border:1px solid rgba(201,162,39,.35);border-radius:10px;padding:14px 12px}
.payhead,.payerr,.payfoot,.paynote{flex:0 0 auto}
.payerr{margin:0;min-height:18px;font-size:13.5px;line-height:1.35;color:#F0B4B4}
.payfoot .add{width:100%}
.paynote{margin:0;font-size:11.5px;letter-spacing:.04em;color:#7E7870;text-align:center}
@media (max-width:420px){
  .paycard{width:100%;padding:18px 14px 14px}
  .payhead b{font-size:21px}
}

/* ---------- checkout on a phone (16 Oct, owner: "the checkout screen shouldnt need the top
   menu bar. everything should fit on the screen without needing to scroll") ----------
   render() sets html.gd-co only on a phone's checkout. The brand bar and the section rail go
   (the back button still returns to the bag, so the footer's Bag button goes too), the help
   lines under the fields go (the labels say it), and every block is tighter, so the form and
   Place order fit a 360x640 phone, delivery included. Anything taller scrolls, never clips. */
html.gd-co .gd-app > .ph-top,html.gd-co .gd-app > .gd-rail,html.gd-co .gd-app > .gd-meter{display:none}
html.gd-co .subbar .iconbtn,html.gd-co .subbar .ptschip,html.gd-co .foot2 .alt{display:none}
html.gd-co .gd-main > .subbar{padding-top:calc(7px + env(safe-area-inset-top))}
html.gd-co .gd-main > .gd-stage{padding-top:calc(44px + env(safe-area-inset-top));gap:7px}
html.gd-co .sgb{flex-direction:row;justify-content:center;gap:7px;padding:9px 6px}
html.gd-co .subhead2{padding-top:3px}
html.gd-co .slot{padding:7px 8px;min-width:66px}
html.gd-co .slotrow:not(.pay) .slot .ico{display:none}
html.gd-co .slotrow.pay .slot{flex-direction:row;justify-content:center;gap:7px;padding:9px 8px}
html.gd-co .formcard{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:8px;padding:9px 10px}
html.gd-co .fld input{padding:8px 9px}
html.gd-co .fhelp{display:none}
html.gd-co .fguest,html.gd-co .fjoin{flex-direction:row;flex-wrap:wrap;column-gap:6px;row-gap:2px;min-height:0;padding:8px 6px}
html.gd-co .fguest i{display:none}
html.gd-co .allergy{padding:7px 9px}
html.gd-co .allergy span{font-size:9.5px;line-height:1.4}
html.gd-co .foot2{padding:6px 0 8px}
/* phone dish screen over the section's film (16 Oct): no picture box, so the stage itself
   darkens from a third of the way down and the options sit on near-solid ground */
html.gd-dish .gd-stage{background:linear-gradient(180deg,rgba(5,7,6,0) 0%,rgba(5,7,6,.62) 34%,rgba(5,7,6,.80) 100%)}
/* 17 Oct. #53's dish-screen band named the prototype's .ph-stage; the live stage is .gd-stage
   (fixed on the line above). The rest: */
/* bag: the points line under the totals */
.ptsnote{margin:0;padding:7px 11px;font:500 11.5px/1.4 var(--body);color:var(--cream-dim);
  background:rgba(8,10,9,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(243,238,230,.12)}
.ptsnote b{font:700 11px/1 var(--mono);color:var(--gold-soft)}
.ptsnote i{font-style:normal;color:var(--cream-faint)}
/* tablets and small laptops under the desktop layout: the phone layout stays, but reads as a
   centred column over the full-width film instead of stretching edge to edge */
@media (min-width:640px) and (max-width:1023px){
  .gd-main > .gd-stage,.gd-main > .gd-foot,.gd-main > .subbar,.gd-app > .gd-rail,.gd-app > .gd-meter{
    padding-left:max(10px,calc((100% - 640px) / 2));padding-right:max(10px,calc((100% - 640px) / 2))}
}
/* wide desktops: three dishes a row instead of two very long ones */
@media (min-width:1600px){
  .gd-stage .itemgrid:not(.opts){grid-template-columns:repeat(3,1fr)}
}

/* ---- motion, part 1 (19 Oct; agreed with Grok, spec in claude/gd-motion-spec-18oct.md) ----
   Motion means one of five things: working, alive, new, done, problem. Only opacity and
   transform move. A busy button keeps its size: the idle and working labels share one grid
   cell, so the button is always as wide as the longer of the two. The arc appears only after
   300 ms (a quick answer never flickers a spinner) and is never the seal. */
.gd-lbls{display:inline-grid;align-items:center;justify-items:center;max-width:100%}
.gd-l{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.gd-idle{visibility:hidden}
.gd-arc{width:16px;height:16px;flex:none;display:inline-block;opacity:0;
  animation:gd-show 1ms linear var(--gd-wait,300ms) forwards}
.gd-arc svg{display:block;width:100%;height:100%;animation:gd-spin .9s linear infinite}
.gd-arc circle{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.gd-arc .t{opacity:.22}
.gd-arc .h{stroke-dasharray:22 100}
@keyframes gd-spin{to{transform:rotate(360deg)}}
@keyframes gd-show{to{opacity:1}}
.add.busy{cursor:progress}
.add.busy:disabled{opacity:1}

/* Pay declined: one red pulse (400 ms) on the card sheet, then a steady red border beside the
   words, until the next try. The pulse is a static border whose opacity moves. */
.paycard::after{content:"";position:absolute;inset:0;border:2px solid var(--bad);opacity:0;pointer-events:none}
.paycard.declined{border-color:var(--bad)}
.paycard.declined.gd-pulse::after{animation:gd-pulse 400ms ease-out}
@keyframes gd-pulse{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ---- motion, part 2 (19 Oct): the customer's own changes ---- */
/* stepper roll, 160 ms; tabular figures so nothing beside the number moves */
.qstep b,.bl-qty b{font-variant-numeric:tabular-nums}
.gd-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1}
.gd-roll .o{position:absolute;left:0;right:0;top:0;animation:gd-roll-out 160ms var(--ease) forwards}
.gd-roll .n{display:block;animation:gd-roll-in 160ms var(--ease) backwards}
.gd-roll .o.dn{animation-name:gd-roll-out-dn}
.gd-roll .n.dn{animation-name:gd-roll-in-dn}
@keyframes gd-roll-out{to{transform:translateY(-100%);opacity:0}}
@keyframes gd-roll-in{from{transform:translateY(100%);opacity:0}}
@keyframes gd-roll-out-dn{to{transform:translateY(100%);opacity:0}}
@keyframes gd-roll-in-dn{from{transform:translateY(-100%);opacity:0}}
/* a bag line on its way out fades first; the FLIP that follows is set inline */
.bagline.gd-going{opacity:0;transition:opacity 150ms var(--ease);pointer-events:none}
/* postcode check: arc while checking, a jade tick drawn once, one red pulse on "no" */
.whereline{position:relative}
.whereline .gd-arc{color:var(--gold-soft);width:15px;height:15px}
.gd-tick{width:15px;height:15px;flex:0 0 15px}
.gd-tick path{fill:none;stroke:var(--jade);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.gd-tick.go path{stroke-dasharray:30;stroke-dashoffset:30;animation:gd-draw 220ms var(--ease) forwards}
@keyframes gd-draw{to{stroke-dashoffset:0}}
.whereline::after{content:"";position:absolute;inset:-4px -6px;border:1px solid var(--bad);opacity:0;pointer-events:none}
.whereline.gd-fail::after{animation:gd-pulse 400ms ease-out}
/* reward taken: the free line slides in and glows gold once (a static glow, opacity only) */
.sumrow.gd-new{position:relative;animation:gd-slide 200ms var(--ease) backwards}
.sumrow.gd-new::after{content:"";position:absolute;inset:-2px -6px;pointer-events:none;
  background:rgba(201,162,39,.18);box-shadow:0 0 12px rgba(201,162,39,.35);opacity:0;animation:gd-glow 1.5s ease-out}
@keyframes gd-slide{from{transform:translateY(-6px);opacity:0}}
@keyframes gd-glow{0%{opacity:1}100%{opacity:0}}
/* the shop opens while the page is open: the closed banner slides away, OPEN flashes once */
.closedban.gd-leaving{transform:translateY(-10px);opacity:0;transition:transform 220ms var(--ease),opacity 220ms var(--ease)}
.ph-status b.gd-flash{animation:gd-flash 600ms ease-out}
@keyframes gd-flash{0%{opacity:.25}30%{opacity:1}55%{opacity:.55}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .meter i,.gd-meter i,.mbar i,.pbar i{transition:none}
  .gd-roll .o,.gd-roll .n,.gd-tick.go path,.whereline.gd-fail::after,.sumrow.gd-new,.sumrow.gd-new::after,.ph-status b.gd-flash{animation:none}
  .gd-tick.go path{stroke-dashoffset:0}
  .bagline.gd-going,.closedban.gd-leaving{transition:none}
  .gd-arc svg{animation:none}   /* still after 300 ms: the wait is not motion */
  .paycard.declined.gd-pulse::after{animation:none}
}

/* ============ where are you? the first screen (21 Oct) ============
   Owner: the first thing a customer does is check the delivery zone. The card sits over the
   menu, which keeps playing its film behind it; nothing else can be reached until a postcode
   is checked or collection is chosen. */
html.gd-gated,html.gd-gated body{overflow:hidden}
.gdgate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(6,8,7,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gate-card{width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow:auto;padding:22px 20px 18px;
  background:rgba(8,10,9,.88);border:1px solid rgba(201,162,39,.55);color:var(--cream);text-align:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.gate-card .seal{display:block;margin:0 auto 10px}
.gate-card h2{font:600 26px/1.15 var(--display);letter-spacing:.01em;margin:0 0 8px;color:var(--cream)}
.gate-sub{font:500 13.5px/1.45 var(--body);color:var(--cream-dim);margin:0 0 16px}
.gate-form{display:flex;flex-direction:column;gap:10px;text-align:left}
.gate-form .fld span{display:block;font:700 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.gate-form .fld input{font:600 18px/1.2 var(--body);padding:12px;text-transform:uppercase;letter-spacing:.06em}
.gate-form .fld input::placeholder{text-transform:none;letter-spacing:0;font-weight:500}
.gate-res:empty{display:none}
.gate-res .gr-line{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;font:500 13.5px/1.4 var(--body);
  color:var(--cream-dim);border:1px solid rgba(243,238,230,.22);background:rgba(6,8,7,.5)}
.gate-res .gr-line b{color:var(--cream)}
.gate-res .gr-line.ok{border-color:rgba(46,196,182,.6)}
.gate-res .gr-line.no{border-color:rgba(196,85,62,.75)}
.gate-res .acts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.gate-res .acts .alt{width:100%}
.gate-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font:700 9px/1 var(--mono);letter-spacing:.16em;
  color:var(--cream-faint);text-transform:uppercase}
.gate-or::before,.gate-or::after{content:'';flex:1;height:1px;background:rgba(243,238,230,.18)}
.gate-col{width:100%;font-size:12px}
.gate-foot{margin:12px 0 0;font:500 11.5px/1.4 var(--body);color:var(--cream-faint)}
.gdgate .ico{width:16px;height:16px;flex:0 0 16px}
.gdgate .gr-line .gd-arc,.gdgate .gr-line .gd-tick{flex:0 0 16px;width:16px;height:16px;margin-top:1px}
.gate-shake{animation:gd-gate-shake .3s}
@keyframes gd-gate-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.wherebar{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;font:500 12px/1.3 var(--body);color:var(--cream-dim);
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wherebar b{color:var(--cream)}
.wherebar .ico{width:15px;height:15px;flex:0 0 15px;color:var(--gold)}
.wherebar span{flex:1;min-width:0}
.wherebar .wb-chg{flex:none;min-height:32px;padding:0 11px;font:600 11px/1 var(--body);color:var(--gold-soft);
  background:none;border:1px solid rgba(201,162,39,.5);cursor:pointer}
@media (prefers-reduced-motion:reduce){.gate-shake{animation:none}}

/* ============ pictures on the category bar and the home tiles; gold dust (21 Oct) ============ */
.rchip{height:54px;gap:3px}
.rchip .pic,.cat .pic{display:block;flex:0 0 auto;background-size:cover;background-position:center 55%;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  box-shadow:inset 0 0 0 1px rgba(243,238,230,.22)}
.rchip .pic{width:30px;height:30px;opacity:.78}
.rchip.on .pic{opacity:1;box-shadow:inset 0 0 0 1px var(--gold)}
.cat .pic{width:44px;height:44px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.gd-rail{position:relative}
.gddust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* ============ the live chip and the data-saver note (21 Oct) ============ */
.rchip .pic{position:relative;overflow:hidden}
.rchip .pic .livepic{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .2s}
.rchip .pic .livepic.on{opacity:1}
.savenote{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 8px 7px 10px;font:500 12px/1.3 var(--body);color:var(--cream-dim);
  background:rgba(8,10,9,.52);border:1px solid rgba(243,238,230,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.savenote .ico{width:15px;height:15px;flex:0 0 15px;color:var(--gold)}
.savenote span{flex:1;min-width:0}
.savenote .mina{flex:none;padding:8px 10px}

/* ============ scrub-to-select on the category bar (21 Oct) ============ */
.gd-rail{touch-action:pan-y}
.rchip .pic .livepic{pointer-events:none}   /* the finger's target must outlive the chip it is on: the canvas comes and goes */
.rchip{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.rchip.lift{transform:scale(1.06)}
.gd-rail.scrub .rchip{transition:transform .18s cubic-bezier(.2,.7,.3,1),background-color .18s}
@media (prefers-reduced-motion:reduce){ .rchip{transition:none} .rchip.lift{transform:none} }

/* ============ drag to bag (23 Oct) ============
   Owner: "drag item in to the basket ... animation of item selected going in to basket, when basket is too full",
   "too much items requires another basket", "subtle animations when box touched and press and duration".
   Touched: the dish presses in and its edge warms to gold. Held: a gold line fills along its foot for exactly the
   hold (the script sets the duration), then it lifts. While up, a dock of bags rises; six slots a bag, a full bag
   bulges, the next one slides in. All of it stops under reduced motion, except the dish following the finger. */
.cell{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1),border-color .2s ease,background-color .2s ease,opacity .16s ease}
.cell.gd-press{transform:scale(.975);border-color:rgba(201,162,39,.6);background-color:var(--ink-3);
  transition:transform .12s ease,border-color .12s ease,background-color .12s ease,opacity .16s ease}
.cell.gd-src{opacity:.32;transform:scale(.96);border-style:dashed}
.cell .gd-hold{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:var(--gold);pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:transform .18s ease,opacity .18s ease}
.cell.gd-holding .gd-hold{transform:scaleX(1);opacity:1;transition-property:transform;transition-timing-function:linear}
.cell .quick{transition:transform .14s ease,background-color .14s ease}
.cell .quick:active{transform:scale(.9);background-color:rgba(201,162,39,.18)}
html.gd-dragging,html.gd-dragging *{cursor:grabbing !important;-webkit-user-select:none;user-select:none}

/* the dish under the finger */
.gd-ghost{position:fixed;z-index:9990;width:140px;display:flex;align-items:center;gap:8px;padding:9px 10px;
  pointer-events:none;background:var(--ink-3);border:1px solid var(--gold);color:var(--cream);font-family:var(--body);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow:0 18px 40px rgba(0,0,0,.6);transform:rotate(-3deg) scale(1.04);
  transition:transform .16s ease;animation:gd-lift .22s cubic-bezier(.3,1.6,.5,1) both}
.gd-ghost .ic{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;color:var(--gold)}
.gd-ghost .ic .ico{width:20px;height:20px}
.gd-ghost .gm{min-width:0;display:flex;flex-direction:column;gap:3px}
.gd-ghost .gn{font-size:12.5px;font-weight:600;line-height:1.15;overflow-wrap:anywhere}
.gd-ghost .gp{font:700 11px/1 var(--mono);color:var(--gold-soft)}
.gd-ghost.gd-over{transform:rotate(0deg) scale(.9)}
.gd-ghost.gd-ret{opacity:0;transition:left .4s cubic-bezier(.3,1.55,.5,1),top .4s cubic-bezier(.3,1.55,.5,1),opacity .4s ease}
@keyframes gd-lift{from{transform:rotate(0deg) scale(.86)}to{transform:rotate(-3deg) scale(1.04)}}

/* a dish on its way into a bag: across and down ease differently, so it travels in an arc */
.gd-fly{position:fixed;z-index:9991;width:34px;height:34px;margin:-17px 0 0 -17px;display:grid;place-items:center;
  pointer-events:none;background:var(--gold);color:#17120A;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:left .52s cubic-bezier(.45,0,.75,1),top .52s cubic-bezier(.15,.85,.35,1),transform .52s ease,opacity .52s ease}
.gd-fly .ico{width:20px;height:20px}
.gd-fly.go{transform:scale(.45) rotate(18deg);opacity:.35}

/* the dock: the drop target, only there while a dish is up */
.gd-dock{position:fixed;z-index:9980;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;
  display:flex;flex-direction:column;gap:8px;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));
  background:rgba(6,8,7,.985);border-top:1px solid var(--gold);color:var(--cream);font-family:var(--body);
  transform:translateY(105%);transition:transform .26s cubic-bezier(.2,.8,.3,1),background-color .18s ease,box-shadow .18s ease}
.gd-dock.gd-up{transform:none}
.gd-dock.gd-hot{background:rgba(28,24,12,.97);box-shadow:inset 0 0 0 2px var(--gold),0 -16px 40px rgba(201,162,39,.25)}
.gd-dtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gd-dline{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim)}
.gd-dtag{font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft)}
.gd-bags{display:flex;align-items:flex-end;gap:12px;min-height:84px;padding:6px 2px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.gd-bags::-webkit-scrollbar{display:none}
.gd-bag{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px}
.gd-bag.gd-new{animation:gd-bagin .45s cubic-bezier(.2,.9,.3,1.25) both}
.gd-handle{width:34px;height:12px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.gd-bagbody{display:grid;grid-template-columns:repeat(2,13px);gap:3px;padding:6px;margin-top:-2px;
  background:var(--ink-2);border:1.5px solid var(--gold);transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1),border-color .2s ease}
.gd-slot{display:block;width:13px;height:11px;background:rgba(243,238,230,.08);transform:scale(.8);
  transition:background-color .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1)}
.gd-slot.on{background:var(--gold);transform:none}
.gd-blab{font:700 9px/1 var(--mono);color:var(--cream-dim)}
.gd-bag.full .gd-bagbody{transform:scale(1.08,1.04);border-color:var(--gold-soft)}
.gd-dock.gd-hot .gd-bag:last-child .gd-bagbody{transform:translateY(-3px) scale(1.04)}
.gd-bag.gd-b0 .gd-bagbody{animation:gd-bumpa .42s ease}
.gd-bag.gd-b1 .gd-bagbody{animation:gd-bumpb .42s ease}
.gd-bag.full.gd-b0 .gd-bagbody{animation:gd-fulla .5s ease}
.gd-bag.full.gd-b1 .gd-bagbody{animation:gd-fullb .5s ease}
@keyframes gd-bagin{from{transform:translateX(40px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes gd-bumpa{0%{transform:none}35%{transform:scale(1.14,.9)}70%{transform:scale(.96,1.05)}100%{transform:none}}
@keyframes gd-bumpb{0%{transform:none}35%{transform:scale(1.14,.9)}70%{transform:scale(.96,1.05)}100%{transform:none}}
@keyframes gd-fulla{0%{transform:scale(1.08,1.04)}35%{transform:scale(1.2,.94) rotate(-3deg)}70%{transform:scale(1.04,1.08) rotate(2deg)}100%{transform:scale(1.08,1.04)}}
@keyframes gd-fullb{0%{transform:scale(1.08,1.04)}35%{transform:scale(1.2,.94) rotate(3deg)}70%{transform:scale(1.04,1.08) rotate(-2deg)}100%{transform:scale(1.08,1.04)}}

/* a refusal reads as one, and the toast sits above the dock while it is up */
.toast.gd-no{background:var(--oxblood);color:var(--cream)}
.toast.gd-no b{color:var(--cream)}
.toast.gd-above{position:fixed;z-index:9995;bottom:calc(150px + env(safe-area-inset-bottom,0px))}
/* more than one bag: the chip says how many, as one more item in its row (the chip clips its corners) */
.bagchip.gd-more::after{content:attr(data-bags);flex:0 0 auto;padding:3px 4px;font:700 9px/1 var(--mono);color:#17120A;background:var(--gold-soft)}

@media (prefers-reduced-motion:reduce){
  .cell,.cell.gd-press,.cell .quick,.cell .gd-hold,.gd-ghost,.gd-fly,.gd-dock,.gd-bagbody,.gd-slot{transition:none}
  .cell.gd-press{transform:none}
  .cell.gd-holding .gd-hold{transition:none}
  .gd-ghost,.gd-bag.gd-new,.gd-bag .gd-bagbody{animation:none}
  .gd-ghost,.gd-ghost.gd-over{transform:none}
}

/* ============ collection or delivery, made obvious (23 Oct) ============
   Owner: "the button should be more obvious as thats how they react". A heading asks; two full-size buttons answer.
   Not chosen: a clear cream outline on ink. Chosen: solid gold, dark ink, a tick. Phone checkout keeps them on one
   row each side by side so the form still fits a 360x640 screen. */
.fulhead{margin-top:2px}
.seg.fulfil{gap:8px}
.seg.fulfil .sgb{position:relative;min-height:60px;justify-content:center;gap:5px;padding:9px 8px;
  font:700 14px/1.1 var(--body);color:var(--cream);background:rgba(8,10,9,.78);border:1.5px solid rgba(243,238,230,.5);
  transition:transform .12s ease,background-color .16s ease,border-color .16s ease,color .16s ease}
.seg.fulfil .sgb:active{transform:scale(.97)}
.seg.fulfil .sgb .ico{width:22px;height:22px;flex:0 0 22px}
.seg.fulfil .sgb .fl{display:flex;flex-direction:column;align-items:center;gap:4px}
.seg.fulfil .sgb i{font:500 9.5px/1 var(--mono);letter-spacing:.04em;color:var(--cream-dim)}
.seg.fulfil .sgb.on{background:var(--gold);border-color:var(--gold);color:#17120A;box-shadow:0 0 0 3px rgba(201,162,39,.22)}
.seg.fulfil .sgb.on i{color:rgba(23,18,10,.78)}
.seg.fulfil .sgb.on .ico{color:#17120A;stroke:#17120A;opacity:1}
.seg.fulfil .sgb .tick{position:absolute;top:6px;right:8px;width:16px;height:16px;stroke-width:2.4}
html.gd-co .seg.fulfil .sgb{flex-direction:row;min-height:48px;gap:8px;padding:7px 10px}
html.gd-co .seg.fulfil .sgb .fl{align-items:flex-start}
.d-side .seg.fulfil .sgb .fl{flex-direction:row;align-items:baseline;gap:8px;flex:1}
.d-side .seg.fulfil .sgb .fl i{margin-left:auto}
@media (prefers-reduced-motion:reduce){ .seg.fulfil .sgb{transition:none} .seg.fulfil .sgb:active{transform:none} }

/* ============ drag to bag, made obvious (23 Oct) ============
   Owner, on a phone: "its not working", then "review the ui for drag and drop". The hold now fills the whole dish,
   so a customer can see it is about to lift; the dock is a big drop zone with a bag and words that the dish never
   covers; the bag chip at the top glows while a dish is up and lights when the dish is over it. */
.cell .gd-hold{top:0;height:auto;background:linear-gradient(90deg,rgba(201,162,39,.05),rgba(201,162,39,.24));
  box-shadow:inset 0 -3px 0 var(--gold)}
.cell.gd-holding{transform:scale(.96);border-color:var(--gold)}
.gd-dock{border-top-width:2px;box-shadow:0 -14px 34px rgba(0,0,0,.55)}
.gd-drow{display:flex;align-items:stretch;gap:12px;min-width:0}
.gd-dz{flex:1 1 auto;min-width:0;min-height:86px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;
  border:2px dashed rgba(201,162,39,.75);color:var(--gold-soft);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .2s cubic-bezier(.3,1.5,.5,1)}
.gd-dz .ico{width:30px;height:30px;flex:0 0 30px}
.gd-dz .gd-dtag{font:700 14px/1.2 var(--body);letter-spacing:.01em;text-transform:none;color:inherit}
.gd-dock.gd-hot .gd-dz{border-style:solid;border-color:var(--gold);background:rgba(201,162,39,.18);color:var(--cream);transform:scale(1.02)}
.gd-drow .gd-bags{flex:0 1 auto;max-width:46%;min-height:86px}
.bagchip.gd-target{border-color:var(--gold);color:var(--gold-soft);animation:gd-chipglow 1.1s ease-in-out infinite}
.bagchip.gd-target-hot{background:var(--gold);color:#17120A;animation:none}
@keyframes gd-chipglow{0%,100%{background-color:rgba(201,162,39,.08)}50%{background-color:rgba(201,162,39,.3)}}
@media (prefers-reduced-motion:reduce){
  .cell.gd-holding{transform:none}
  .gd-dz,.gd-dock.gd-hot .gd-dz{transition:none;transform:none}
  .bagchip.gd-target{animation:none}
}

/* ============ the bag bar (23 Oct) ============
   Owner: "swiping up should open the cart". On a phone, under the menu's own screens, while the bag has something
   in it: a slim gold bar with a grab line, what is in the bag and its total. Swipe it up, or tap it, for the bag.
   Past the end of a list a swipe up opens the bag too; the peek says so from the foot of the screen. */
.bagbar{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:48px;margin:2px 0 0;padding:13px 12px 9px;
  background:linear-gradient(180deg,rgba(201,162,39,.24),rgba(201,162,39,.1));border:1px solid var(--gold);color:var(--cream);
  font:600 13px/1 var(--body);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:transform .18s ease}
.bagbar .grab{position:absolute;left:50%;top:4px;width:34px;height:3px;margin-left:-17px;border-radius:2px;background:rgba(243,238,230,.5)}
.bagbar .ico{width:18px;height:18px;flex:0 0 18px;color:var(--gold-soft)}
.bagbar .bbn{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim)}
.bagbar .bbt{font:700 14px/1 var(--mono);color:var(--gold-soft)}
.bagbar .bbgo{margin-left:auto;display:flex;align-items:center;gap:6px;font:700 11px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-soft)}
.bagbar .up{display:inline-block;font-size:15px;line-height:1;transform:translateY(3px)}
html.gd-hasbar .toast{bottom:128px}
.swpeek.b{left:50%;top:auto;bottom:22%;transform:translateX(-50%)}
@media (min-width:1024px){ .bagbar{display:none} }
@media (prefers-reduced-motion:no-preference){ .bagbar .up{animation:gd-barup 2.2s ease-in-out .8s 2} }
@keyframes gd-barup{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}

/* ============ the bag says how it opens and closes (23 Oct) ============
   Owner: "i cant see how to drag up to show the cart and drag down to close cart when its open". On a phone the bag
   opens with a grab line and "Swipe down to close" pinned at its top (a tap closes it too); the bar says "Swipe up". */
.baghandle{position:sticky;top:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;min-height:44px;margin:0 0 8px;padding:7px 10px 8px;cursor:pointer;
  background:rgba(6,8,7,.9);border:0;border-bottom:1px solid rgba(201,162,39,.45);color:var(--gold-soft);
  font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(10px)}
.baghandle .grab{display:block;width:44px;height:4px;border-radius:2px;background:rgba(243,238,230,.6)}
@media (prefers-reduced-motion:no-preference){ .baghandle .grab{animation:gd-grabdown 1.6s ease-in-out .5s 2} }
@keyframes gd-grabdown{0%,100%{transform:none}50%{transform:translateY(4px)}}
@media (min-width:1024px){ .baghandle{display:none} }

/* ============ the bag, full screen on a phone (5 Nov) ============
   Owner: "when opening the item bag it should be full screen. the user shouldn't be able to see the top bars just the
   bag". html.gd-bagfull (render(), phone and view 'bag' only): no brand bar, rail, meter or the bar above the stage;
   the bag takes the whole screen on a dark ground, its own top bar (grab line, Your bag, Back to menu) pinned under
   the notch, the Checkout bar pinned over the home bar. Swipe down still closes it (the stage's swipe). */
.bagtop{position:sticky;top:0;z-index:4;margin:0 -10px 8px;background:rgba(6,8,7,.94);
  border-bottom:1px solid rgba(201,162,39,.45);backdrop-filter:blur(10px)}
.bagtop .baghandle{position:static;margin:0;border-bottom:0;background:transparent;backdrop-filter:none;min-height:30px;padding:6px 10px 2px}
.bagtitle{display:flex;align-items:center;gap:8px;padding:2px 10px 8px}
.bagtitle b{font:700 15px/1.2 var(--display,inherit);color:var(--cream)}
.bagtitle i{flex:1;font-style:normal;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-faint)}
.bagback{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid rgba(201,162,39,.6);
  background:rgba(201,162,39,.1);color:var(--gold-soft);font:600 13px/1 var(--body);cursor:pointer}
@media (min-width:1024px){ .bagtop{display:none} }
html.gd-bagfull .gd-app > .ph-top,html.gd-bagfull .gd-app > .gd-rail,html.gd-bagfull .gd-app > .gd-meter,
html.gd-bagfull .gd-main > .subbar{display:none}
html.gd-bagfull .gd-main > .gd-stage{padding-top:0;background:rgba(5,7,6,.9)}
html.gd-bagfull .gd-stage > .bagtop{margin-top:0;padding-top:env(safe-area-inset-top)}
html.gd-bagfull .gd-main > .gd-foot{background:rgba(5,7,6,.96)}

/* Apple Pay / Google Pay on the checkout screen (2 Nov): folded away, not display:none (Stripe must be able to load
   and say which wallets this device has), and opened only when it has one and the details are complete. */
.walletco{max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .2s var(--ease),opacity .2s var(--ease)}
.walletco.on{max-height:240px;opacity:1;pointer-events:auto}
.walletco .payor{margin:8px 0 2px;text-align:center;font:500 12px/1.3 var(--body);color:var(--cream-dim)}
/* 13 Nov (owner: "the apple pay and google pay buttons should always be visible"): Stripe's buttons from the first paint of
   checkout, or, where a browser cannot show them, one plain line saying both are accepted and where they work (.wallacc,
   words only; .wamarks is where the official acceptance marks go). What a wallet tap is waiting for is lit (.gd-need). */
.walletbtns{min-height:50px}
.walletco .wallacc{display:flex;align-items:center;gap:8px;margin:2px 0;padding:8px 10px;font:500 11.5px/1.35 var(--body);
  color:var(--cream-dim);background:rgba(8,10,9,.66);border:1px solid rgba(243,238,230,.18)}
.walletco .wallacc[hidden],.walletco .payor[hidden],.walletbtns[hidden]{display:none}
.wamarks:empty{display:none}
.fld.gd-need input,.slotrow.gd-need{outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 6px rgba(201,162,39,.22)}

/* No zoom on an iPhone (2 Nov, owner: "the screen resolution keeps zooming in"). iOS Safari zooms the page into any
   field it focuses that is under 16px, and ours were 12 to 14px. On a phone-sized screen every field is 16px or more,
   with the padding trimmed so each box keeps its height. Zoom itself stays allowed (no maximum-scale). */
@media (max-width:768px){
  .srch input{font-size:16px;padding-top:5px;padding-bottom:5px}
  .d-search input{font-size:16px}
  .fld input{font-size:16px;padding-top:7px;padding-bottom:7px}
  html.gd-co .fld input{padding-top:6px;padding-bottom:6px}
}

/* Dragon Points dishes (30 Oct, owner: "these can have a special colour and animation to let the customer know its
   useable for the points"). A jade edge and a gold badge with its price in points; the badge catches the light once
   every few seconds. Nothing moves under Reduce Motion. Only where the server lists rewards (Golden Dragon). */
.cell.ptsok{border-color:rgba(46,196,182,.55);box-shadow:inset 3px 0 0 var(--jade)}
.ptsbadge{position:relative;overflow:hidden;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:3px;
  padding:3px 7px 3px 5px;border:1px solid rgba(201,162,39,.7);border-radius:999px;background:rgba(201,162,39,.12);
  color:var(--gold-soft);font:700 9.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ptsbadge svg{width:11px;height:11px;flex:none}
.ptsbadge.can{border-color:var(--jade);background:rgba(46,196,182,.16);color:#bff3ee}
.ptsbadge.short{opacity:.85}
.ptsbadge::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,190,.55),transparent);animation:gd-pts-shine 4.5s ease-in-out infinite}
@keyframes gd-pts-shine{0%,72%{left:-60%}88%,100%{left:130%}}
.bagline.ptsok{box-shadow:inset 3px 0 0 var(--jade)}
.bagline.paid .bl-pr{color:#bff3ee}
.bl-pts{display:block;font:700 9.5px/1.3 var(--mono);color:var(--jade);letter-spacing:.04em;text-transform:uppercase}
.bl-ptsrow{display:flex;justify-content:flex-end;margin:-2px 0 6px}
.ptspay,.ptsgo,.ptsjoin{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--jade);border-radius:8px;
  background:rgba(46,196,182,.1);color:var(--cream);font:600 12px/1.2 var(--body);cursor:pointer}
.ptspay svg,.ptsgo svg,.ptsjoin svg{width:15px;height:15px;color:var(--jade);flex:none}
.ptspay i,.ptsgo i,.ptsjoin i{font-style:normal;font-size:11px;color:var(--cream-dim)}
.ptspay.on{background:var(--jade);color:var(--ink)}
.ptspay.on svg,.ptspay.on i{color:var(--ink)}
.ptspay.off,.ptsgo.off,.ptsjoin[disabled]{opacity:.55;cursor:default}
.ptsjoin{border-color:rgba(201,162,39,.7);background:rgba(201,162,39,.1)}
.ptsjoin svg{color:var(--gold-soft)}
.ptsuse{display:flex;padding:8px 0 0}
.ptsuse .ptsgo,.ptsuse .ptsjoin{width:100%;justify-content:flex-start}
.ptsmore{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1.35 var(--body);color:var(--cream-dim)}
.ptsmore svg{width:13px;height:13px;color:var(--gold-soft);flex:none}
.ptsmore b{font:700 11px/1 var(--mono);color:var(--gold-soft)}
@media (prefers-reduced-motion:reduce){.ptsbadge::after{animation:none;display:none}}

/* ============ Bags (13-14 Nov, owner): my bags, liked bags, top 12, "Try bag" =====
   Every bag card reads like a playlist: a cover (four of its dishes' stills, else the seal), its name, what it is, and
   its dishes as a numbered track list. The leaderboard's ranks are Bodoni gold, #1 a little larger under the seal. */
/* the bag screens start at the top: a short list would otherwise sit at the foot of the stage under the film */
.gd-stage > .bc-tabs:first-child,.gd-stage > .bc-tophead:first-child{margin-top:6px}
.bc-entry{display:flex;gap:8px}
.bc-entry.slim{margin:2px 0 4px}
.bc-entrybtn{flex:1;display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;cursor:pointer;text-align:left;
  color:var(--cream);background:rgba(8,10,9,.66);border:1px solid rgba(201,162,39,.55);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.bc-entrybtn.wide{width:100%}
.bc-entrybtn .ico{width:20px;height:20px;flex:0 0 20px;color:var(--gold-soft)}
.bc-entrybtn span{display:flex;flex-direction:column;gap:3px;min-width:0}
.bc-entrybtn b{font:700 13px/1.1 var(--body)}
.bc-entrybtn i{font:500 10px/1.2 var(--mono);color:var(--cream-dim);font-style:normal}
.bc-entrybtn .tnum,.bc-toplink .tnum{font:600 22px/1 var(--display);color:var(--gold-soft);flex:0 0 auto}
.bc-tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bc-tab,.bc-toplink{min-height:44px;padding:0 14px;cursor:pointer;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-dim);background:rgba(8,10,9,.66);border:1px solid rgba(243,238,230,.26);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.bc-tab.on{color:#17120A;background:var(--gold);border-color:var(--gold)}
.bc-toplink{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--gold-soft);border-color:rgba(201,162,39,.55)}
.bc-toplink.back{margin-left:0;align-self:flex-start}
.bc-tophead{display:flex;flex-direction:column;gap:5px;padding:12px 12px 10px;background:rgba(8,10,9,.66)}
.bc-tophead b{font:600 26px/1 var(--display);color:var(--gold-soft)}
.bc-tophead span{font:500 12px/1.4 var(--body);color:var(--cream-dim)}
.bc-list{display:flex;flex-direction:column;gap:10px}
.bagcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:11px 11px 10px;background:rgba(8,10,9,.74);
  border:1px solid rgba(243,238,230,.22);-webkit-user-select:none;user-select:none;touch-action:manipulation;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.bagcard.top{border-color:rgba(201,162,39,.45)}
.bagcard.first{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,162,39,.35)}
.bc-head{display:flex;align-items:center;gap:10px}
.bc-rank{position:relative;flex:0 0 34px;display:flex;flex-direction:column;align-items:center;gap:1px}
.bc-rank b{font:600 30px/1 var(--display);color:var(--gold);font-variant-numeric:lining-nums}
.bagcard.first .bc-rank b{font-size:38px;color:var(--gold-soft)}
.bc-rank .crown{display:block;line-height:0}
.bc-cover{flex:0 0 62px;width:62px;height:62px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;overflow:hidden;
  background:#0a0c0b;border:1px solid rgba(201,162,39,.4)}
.bc-cover i{background-size:cover;background-position:center}
.bc-cover.seal{display:grid;place-items:center;grid-template-columns:1fr}
.bc-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bc-title{font:600 17px/1.15 var(--display);color:var(--cream);overflow-wrap:anywhere}
.bc-sub{font:500 10.5px/1.35 var(--mono);color:var(--cream-dim)}
.bc-auto{font:500 10.5px/1.3 var(--body);color:var(--cream-faint)}
.bc-heart{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;font-size:22px;line-height:1;
  color:var(--cream-dim);background:transparent;border:1px solid rgba(243,238,230,.22);border-radius:50%}
.bc-heart.on{color:#E8775F;border-color:rgba(232,119,95,.6)}
.bc-tracks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;counter-reset:none}
.bc-tracks li{display:flex;gap:8px;padding:5px 2px;border-top:1px solid rgba(243,238,230,.08);font:500 13px/1.3 var(--body);color:var(--cream)}
.bc-tracks .tn{flex:0 0 20px;font:600 13px/1.3 var(--display);color:var(--gold-soft);text-align:right}
.bc-tracks em{font:700 11px/1 var(--mono);font-style:normal;color:var(--gold-soft)}
.bc-tracks i{color:var(--cream-dim);font-style:normal}
.bc-off{margin:0;font:500 11px/1.35 var(--body);color:#E8A08F}
.bc-acts{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.bc-pen,.bc-again,.bc-save,.bc-cancel{min-height:44px;display:flex;align-items:center;gap:6px;padding:0 13px;cursor:pointer;
  font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);background:rgba(8,10,9,.6);
  border:1px solid rgba(243,238,230,.26)}
.bc-again{color:#17120A;background:var(--gold);border-color:var(--gold)}
.bc-pen .ico,.bc-again .ico{width:15px;height:15px}
.bc-rename{display:flex;gap:6px;align-items:center;-webkit-user-select:text;user-select:text}
.bc-rename input{flex:1;min-width:0;min-height:44px;padding:8px 10px;font:500 16px/1.2 var(--body);color:var(--cream);
  background:rgba(0,0,0,.55);border:1px solid var(--gold);outline:0}
/* Try bag: gold, with a soft glow every few seconds and a bag with a play mark */
.trybag{position:relative;min-height:46px;display:flex;align-items:center;gap:8px;padding:0 16px;cursor:pointer;
  font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#17120A;background:var(--gold);border:0;
  overflow:hidden;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
/* the glow is a shine that sweeps across every few seconds and a small pulse of the bag: transform only. An animated
   filter (drop-shadow) on a clip-path button crashed WebKit's page here, every time (14 Nov), so none is used. */
.trybag::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,244,214,.6) 50%,transparent 70%);animation:bc-shine 3.6s ease-in-out infinite}
.trybag .tb-ic{animation:bc-beat 3.6s ease-in-out infinite}
.trybag .tb-ic{position:relative;display:grid;place-items:center;width:20px;height:20px}
.trybag .tb-ic .ico{width:20px;height:20px;color:#17120A}
.trybag .tb-ic i{position:absolute;right:-5px;bottom:-4px;width:13px;height:13px;display:grid;place-items:center;font-size:7px;line-height:1;
  font-style:normal;color:var(--gold-soft);background:#17120A;border-radius:50%}
.trybag.off{opacity:.4}
.trybag.off::after,.trybag.off .tb-ic{animation:none}
@keyframes bc-shine{0%,62%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
@keyframes bc-beat{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.18)}86%{transform:scale(1)}}
.bc-pop{position:absolute;left:50%;top:50%;z-index:3;font-size:64px;line-height:1;color:#E8775F;pointer-events:none;
  text-shadow:0 0 18px rgba(232,119,95,.6)}
.bc-fly{position:fixed;z-index:200;max-width:60vw;padding:5px 9px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:700 12px/1 var(--body);color:#17120A;background:var(--gold-soft);box-shadow:0 0 14px rgba(224,192,106,.7)}
.bc-ask{position:fixed;inset:0;z-index:150;display:grid;place-items:end center;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.6)}
.bc-askbox{width:100%;max-width:420px;display:flex;flex-direction:column;gap:9px;padding:16px;background:#111513;border:1px solid var(--gold)}
.bc-askbox b{font:600 20px/1.15 var(--display);color:var(--gold-soft)}
.bc-askbox span{font:500 13px/1.4 var(--body);color:var(--cream-dim)}
.bc-askbox .add,.bc-askbox .alt{min-height:46px}
.bc-toast{cursor:pointer}
.bc-more{align-self:center;min-height:44px}
@media (min-width:1024px){ .bc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .trybag::after,.trybag .tb-ic{animation:none} .trybag::after{display:none} }
/* ============ customer phone checks (13 Nov: Pixel 7 / Galaxy S24 in Chromium, iPhone 15 / 15 Pro Max in WebKit) ============ */
/* 7. Checkout starts at the top on a phone. Every screen's content sits at the foot of the stage (margin-top:auto on its
   first child) so the film shows above a short page; on checkout that left ~400px of artwork before the first question. */
html.gd-co .gd-stage > *:first-child{margin-top:0}
html.gd-co .gd-main > .gd-stage{padding-top:calc(58px + env(safe-area-inset-top))}   /* under the 44px back button (8.) */
/* 8. Every tap target on a phone is at least 44x44. These buttons are cut with clip-path, which also clips anything drawn
   outside them, so the button itself is the size. */
@media (max-width:1023px){
  .mebtn{flex:0 0 44px;width:44px;height:44px}
  .iconbtn{flex:0 0 44px;width:44px;height:44px}
  .bagchip{min-height:44px}
  .backbtn{height:44px;min-height:44px}
  .pager .pgn{min-height:44px}
}
@media (max-width:440px){
  .cell .quick{width:44px}
  .cell:has(.quick) .mid{padding-right:48px}
  .cell:has(.quick) .open{right:44px}
}
/* 9. Words over the films get a panel behind them: section headings, the where line, the "or use your email" divider. */
.subhead2{align-self:flex-start;padding:5px 8px;background:rgba(8,10,9,.66);text-shadow:none}
.whereline{align-self:flex-start;padding:6px 9px;background:rgba(8,10,9,.66);text-shadow:none}
.ordiv span{padding:5px 8px;background:rgba(8,10,9,.72);color:var(--cream-dim)}
/* 13. After a refused postcode the answer's own collect button is the only one: the standing "or / I will collect" hide. */
.gate-or[hidden],.gate-col[hidden]{display:none}

/* ---- Members portal (14 Nov, owner; claude/gd-members-page-design-14nov.md) ----
   The member card (ring, tier, points, next reward, streak), the section tabs (a sticky row on a phone, a side list on a
   desktop), and each section. Dark and gold, Bodoni numerals, cut corners. Motion is transform and opacity only (a
   filter animated on a clip-path crashed WebKit in the Bags PR), and none of it under reduced motion or "Less motion". */
.me-hero{position:relative;display:flex;flex-direction:column;gap:13px;padding:14px;margin-bottom:0;
  background:linear-gradient(160deg,rgba(32,27,14,.92) 0%,rgba(13,16,15,.9) 58%,rgba(10,26,21,.9) 100%);
  border:1px solid rgba(201,162,39,.55);box-shadow:inset 0 0 0 1px rgba(201,162,39,.12);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.me-id{display:flex;align-items:center;gap:13px}
.me-ring{position:relative;flex:0 0 72px;width:72px;height:72px}
.me-ring svg{width:72px;height:72px;display:block}
.me-ring circle{fill:none;stroke-width:5}
.me-ring .trk{fill:#0b0d0c;stroke:rgba(201,162,39,.2)}
.me-ring .arc{stroke:var(--gold-soft);stroke-linecap:round}
.me-ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 30px/1 var(--display);color:var(--gold-soft)}
.me-who{min-width:0;display:flex;flex-direction:column;gap:3px}
.me-tier{font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}
.me-name{font:600 26px/1.05 var(--display);color:var(--cream);overflow-wrap:anywhere}
.me-mail{font:500 11px/1.3 var(--mono);color:var(--gold-soft);overflow-wrap:anywhere}
.me-who i{font:500 12px/1.35 var(--body);font-style:normal;color:var(--cream-dim)}
.me-pts{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:12px;
  border-top:1px solid rgba(201,162,39,.28)}
.me-pts .lab,.me-streak .lab{display:block;font:700 10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.me-pts .sub{display:block;margin-top:4px;font:500 12px/1.3 var(--body);color:var(--cream-dim)}
.me-pts b{font:700 46px/.9 var(--display);color:var(--gold-soft);font-variant-numeric:lining-nums tabular-nums}
.me-next,.me-streak{display:flex;flex-direction:column;gap:7px}
.me-next .row,.me-streak .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:500 12.5px/1.3 var(--body);color:var(--cream-dim)}
.me-next .row b{color:var(--cream);font-weight:600}
.me-next em{font:700 11px/1 var(--mono);font-style:normal;color:var(--gold-soft);white-space:nowrap}
.me-streak .lab.dim{color:var(--cream-dim);letter-spacing:.08em}
.me-hero .bar,.me-shelf .bar,.me-quests .bar{position:relative;display:block;height:9px;overflow:hidden;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.35)}
.me-hero .bar i,.me-shelf .bar i,.me-quests .bar i{position:relative;display:block;height:100%;overflow:hidden;background:linear-gradient(90deg,#a07a1e,var(--gold-soft))}
.me-hero .bar i::after,.me-quests .bar i::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgba(255,240,190,.5) 50%,transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .me-hero .bar i::after,.me-quests .bar i::after{animation:me-sweep 4.8s ease-in-out 1s infinite}
  .me-trophy.on .medal{animation:me-glint 5s ease-in-out infinite}
}
@keyframes me-sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes me-glint{0%,88%,100%{transform:scale(1)}94%{transform:scale(1.06)}}
.me-streak .pips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.me-streak .pip{display:flex;flex-direction:column;align-items:center;gap:4px}
.me-streak .pip i{display:block;width:100%;height:10px;background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.32)}
.me-streak .pip.on i{background:linear-gradient(90deg,#c99d2e,var(--gold-soft));border-color:var(--gold-soft);box-shadow:0 0 8px rgba(224,192,106,.45)}
.me-streak .pip em{min-height:9px;font:700 9px/1 var(--mono);font-style:normal;color:var(--jade)}
.me-streak .say{font:500 12.5px/1.35 var(--body);color:var(--jade)}

.me-wrap{display:flex;flex-direction:column;gap:12px}
.me-nav{position:sticky;top:0;z-index:4;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px;
  background:#0a0c0b;border-top:1px solid rgba(201,162,39,.22);border-bottom:1px solid rgba(201,162,39,.22)}
.me-nav::-webkit-scrollbar{display:none}
.me-tab{flex:1 0 auto;min-width:54px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:7px 5px;cursor:pointer;font:700 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim);
  background:transparent;border:0;border-bottom:2px solid transparent}
.me-tab .ico{width:19px;height:19px}
.me-tab.on{color:var(--gold-soft);border-bottom-color:var(--gold)}
.me-body{min-width:0;display:flex;flex-direction:column;gap:10px}
.me-wrap.desk{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.me-wrap.desk .me-nav{position:static;flex:1 1 150px;max-width:190px;flex-direction:column;overflow:visible;border:0;border-right:1px solid rgba(201,162,39,.22);margin:0;padding:0 6px 0 0;background:transparent}
.me-wrap.desk .me-tab{flex-direction:row;justify-content:flex-start;gap:10px;min-height:46px;padding:0 10px;border-bottom:0;border-left:2px solid transparent}
.me-wrap.desk .me-tab.on{border-left-color:var(--gold);background:rgba(201,162,39,.08)}
.me-wrap.desk .me-body{flex:1 1 auto}
.me-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.me-head>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.me-head b{font:600 24px/1.05 var(--display);color:var(--gold-soft)}
.me-head i{font:500 12px/1.35 var(--body);font-style:normal;color:var(--cream-dim)}
.me-head .add{flex:0 0 auto}
.me-count{font:700 12px/1 var(--mono);color:var(--gold-soft)}
.me-note{margin:0;font:500 12px/1.45 var(--body);color:var(--cream-dim)}
.me-note b{color:var(--jade)}
.bc-hint{display:flex;align-items:center;gap:7px;margin:0;font:500 11.5px/1.35 var(--body);color:var(--cream-faint)}
.bc-hint .ico{width:14px;height:14px;flex:0 0 14px;color:var(--gold)}
.bc-madeby{color:var(--jade)}
.bagcard.made{border-color:rgba(46,196,182,.4)}
.bc-rm.sure{color:#17120A;background:#E8A08F;border-color:#E8A08F}

/* make a bag */
.me-build{display:flex;flex-direction:column;gap:12px;padding:13px;border-color:rgba(201,162,39,.55)}
.me-bhead{display:flex;align-items:center;justify-content:space-between}
.me-bhead b{font:700 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.me-x{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;font:400 24px/1 var(--body);color:var(--cream-dim);background:transparent;border:1px solid rgba(243,238,230,.22)}
.me-fld{display:flex;flex-direction:column;gap:6px}
.me-build .lab,.me-step .lab{font:700 9.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.me-fld input{min-height:48px;padding:0 12px;font:500 16px/1.2 var(--body);color:var(--cream);background:rgba(0,0,0,.5);
  border:1px solid rgba(201,162,39,.45);border-radius:0;outline:0;-webkit-appearance:none;appearance:none}
.me-fld input:focus{border-color:var(--gold-soft);box-shadow:0 0 0 1px var(--gold-soft)}
.me-fld .help{display:flex;justify-content:space-between;gap:10px;font:500 11.5px/1.35 var(--body);color:var(--cream-faint)}
.me-fld .cnt{font:600 10px/1.35 var(--mono);color:var(--cream-faint)}
.me-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.me-pick{min-height:54px;display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;text-align:left;color:var(--cream);
  background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.18)}
.me-pick .nm{flex:1;min-width:0;font:500 13px/1.25 var(--body)}
.me-pick .pr{font:600 10px/1 var(--mono);color:var(--cream-dim);white-space:nowrap}
.me-pick .ico{width:16px;height:16px;flex:0 0 16px;color:var(--gold-soft)}
.me-pick.open{border-color:var(--gold)}
.me-pick.open .ico{transform:rotate(90deg)}
.me-choose{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding:10px;background:rgba(201,162,39,.06);border:1px solid rgba(201,162,39,.35)}
.me-step{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.me-step .lab{flex:1 0 100%}
.me-chip{min-height:44px;padding:0 12px;cursor:pointer;font:500 13px/1 var(--body);color:var(--cream);background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.22)}
.me-chip i{font:600 10px/1 var(--mono);font-style:normal;color:var(--cream-dim)}
.me-chip.on{color:#17120A;background:var(--gold);border-color:var(--gold)}
.me-chip.on i{color:#17120A}
.me-empty{margin:0;padding:14px;text-align:center;font:500 12.5px/1.35 var(--body);color:var(--cream-faint);border:1px dashed rgba(201,162,39,.35)}
.me-tracks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.me-tracks li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid rgba(243,238,230,.08)}
.me-tracks .tn{flex:0 0 22px;font:600 13px/1 var(--display);color:var(--gold)}
.me-tracks .tt{flex:1;min-width:0;font:500 13px/1.3 var(--body);color:var(--cream)}
.me-tracks .tt i{font-style:normal;color:var(--cream-dim)}
.me-tracks .pr{font:600 11px/1 var(--mono);color:var(--cream-dim)}
.me-qty{display:flex;align-items:center;gap:2px}
.me-qty b{min-width:18px;text-align:center;font:700 12px/1 var(--mono);color:var(--gold-soft)}
.me-bfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 12.5px/1.3 var(--body);color:var(--cream-dim)}
.me-bfoot .add{flex:0 0 auto;padding:0 16px}

/* points */
.me-ladder,.me-shelf,.me-quests,.me-cabinet,.me-woks{margin:0;padding:0;list-style:none}
.me-ladder{display:flex;flex-direction:column;gap:6px}
.me-rung{display:flex;align-items:center;gap:12px;padding:11px 12px;background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.16);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.me-rung .x{flex:0 0 58px;font:700 26px/1 var(--display);color:rgba(201,162,39,.7)}
.me-rung span{flex:1;display:flex;flex-direction:column;gap:3px}
.me-rung span b{font:600 17px/1.1 var(--display);color:var(--cream)}
.me-rung span i{font:500 12px/1.3 var(--body);font-style:normal;color:var(--cream-dim)}
.me-rung em{font:700 9.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;padding:5px 7px;color:#06201b;background:var(--jade)}
.me-rung.on{border-color:var(--jade);background:linear-gradient(120deg,rgba(14,40,33,.85),rgba(8,10,9,.7) 70%)}
.me-rung.on .x{color:var(--jade)}
.me-shelf{display:flex;flex-direction:column;gap:6px}
.me-rw{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.16)}
.me-rw .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.me-rw .nm b{font:500 14px/1.25 var(--body);color:var(--cream)}
.me-rw .nm i{font:700 10px/1 var(--mono);font-style:normal;color:var(--gold)}
.me-rw .bar{height:4px;margin-top:4px}
.me-rw em{font:700 10px/1 var(--mono);font-style:normal;color:var(--cream-dim);white-space:nowrap}
.me-rw.ok{border-color:rgba(201,162,39,.55)}
.me-rw.ok em{color:#17120A;background:var(--gold);padding:6px 8px}
.me-earn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.me-tile{display:flex;flex-direction:column;gap:4px;padding:11px 12px;background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.16)}
.me-tile b{font:700 24px/1 var(--display);color:var(--gold-soft)}
.me-tile.jade b{color:var(--jade)}
.me-tile span{font:500 12px/1.3 var(--body);color:var(--cream-dim)}

/* quests */
.me-cabinet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.me-trophy{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px 10px;text-align:center;
  background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.12)}
.me-trophy .medal{position:relative;width:50px;height:50px;opacity:.38}
.me-trophy .medal svg{width:50px;height:50px;display:block}
.me-trophy .medal path{fill:#1d190e;stroke:var(--gold);stroke-width:1.6}
.me-trophy .medal circle{fill:none;stroke:rgba(201,162,39,.55)}
.me-trophy .medal b{position:absolute;inset:0;display:grid;place-items:center;font:700 14px/1 var(--display);color:var(--gold-soft)}
.me-trophy .nm{font:600 11.5px/1.2 var(--body);color:var(--cream-dim)}
.me-trophy .st{font:700 9px/1.2 var(--mono);letter-spacing:.06em;color:var(--cream-faint)}
.me-trophy .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.me-trophy.on{border-color:rgba(201,162,39,.55)}
.me-trophy.on .medal{opacity:1}
.me-trophy.on .nm{color:var(--cream)}
.me-trophy.on .st{color:var(--jade)}
.me-quests{display:flex;flex-direction:column;gap:6px}
.me-quests li{display:flex;align-items:center;gap:12px;padding:11px 12px;background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.16)}
.me-quests .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.me-quests .nm b{font:500 14px/1.25 var(--body);color:var(--cream)}
.me-quests .nm i{font:500 11.5px/1.3 var(--body);font-style:normal;color:var(--cream-dim)}
.me-quests .bar{height:6px;margin-top:5px}
.me-go{min-height:44px}

/* invites and settings */
.me-link{display:flex;flex-direction:column;gap:10px;padding:13px;border-color:rgba(201,162,39,.55)}
.me-link .url{padding:12px;font:600 13px/1.3 var(--mono);color:var(--gold-soft);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;
  background:rgba(0,0,0,.45);border:1px dashed rgba(201,162,39,.5)}
.me-linkbtns{display:flex;gap:8px}
.me-woks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.me-woks li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;text-align:center;background:rgba(8,10,9,.6);border:1px solid rgba(243,238,230,.12)}
.me-woks b{font:700 28px/1 var(--display);color:rgba(201,162,39,.55)}
.me-woks span{font:500 11.5px/1.2 var(--body);color:var(--cream-dim)}
.me-woks i{font:700 9px/1 var(--mono);font-style:normal;letter-spacing:.08em;color:var(--cream-faint)}
.me-woks li.on{border-color:rgba(201,162,39,.6)}
.me-woks li.on b{color:var(--gold-soft)}
.me-woks li.on i{color:var(--jade)}
.me-switch{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;cursor:pointer}
.me-switch span{flex:1;display:flex;flex-direction:column;gap:3px}
.me-switch b{font:600 14px/1.2 var(--body);color:var(--cream)}
.me-switch i{font:500 12px/1.35 var(--body);font-style:normal;color:var(--cream-dim)}
.me-switch input{width:24px;height:24px;flex:0 0 24px;accent-color:var(--gold)}
.me-links{display:flex;gap:16px;flex-wrap:wrap}
.me-links a{min-height:44px;display:inline-flex;align-items:center;font:500 13px/1 var(--body);color:var(--gold-soft)}
.me-signout{align-self:flex-start}

/* "Less motion" (14 Nov): the member's own switch, on this phone; the same as the phone's Reduce Motion */
html.gd-calm *,html.gd-calm *::before,html.gd-calm *::after{animation:none !important;transition:none !important}

/* ---- Members portal, round 2 (14 Nov, owner's brief, reviewed with Grok) ----
   A colour per section, used only for that section's tab, headings and selection; gold stays the brand (header, card,
   primary buttons). All 4.5:1 or better on #0A0C0B. The tabs are a grid, so every tab is always on screen: one row, or
   two rows of three on a small phone. Motion is short (<=160ms), transform and opacity only, none under less motion. */
:root{--acc-profile:#EDE3CC;--acc-points:#E0C06A;--acc-bags:#E85A4F;--acc-quests:#2EC4B6;--acc-invites:#F4A261;--acc-settings:#A8A29E}
.me-wrap{--acc:var(--gold-soft)}
.me-wrap.s-profile,.me-tab.k-profile{--acc:var(--acc-profile)}
.me-wrap.s-points,.me-tab.k-points{--acc:var(--acc-points)}
.me-wrap.s-bags,.me-tab.k-bags{--acc:var(--acc-bags)}
.me-wrap.s-quests,.me-tab.k-quests{--acc:var(--acc-quests)}
.me-wrap.s-invites,.me-tab.k-invites{--acc:var(--acc-invites)}
.me-wrap.s-settings,.me-tab.k-settings{--acc:var(--acc-settings)}
.me-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}
.me-nav.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.me-nav.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.me-nav.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:340px){.me-nav,.me-nav.n5,.me-nav.n4{grid-template-columns:repeat(3,minmax(0,1fr))}}
.me-nav .me-tab{position:relative;min-width:0;width:100%;padding:7px 2px;border-bottom:0}
.me-nav .me-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.me-nav .me-tab .ico{color:var(--acc);opacity:.62}
.me-nav .me-tab.on{color:var(--acc);background:linear-gradient(180deg,transparent 30%,rgba(255,255,255,.035))}
.me-nav .me-tab.on .ico{opacity:1}
.me-nav .me-tab::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:50% 50%}
.me-nav .me-tab.on::after{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .me-nav .me-tab.on::after{animation:me-bar .14s ease-out}
  .me-body.in{animation:me-in .14s ease-out}
  .me-tracks li.new{animation:me-grow .12s ease-out}
}
@keyframes me-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes me-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes me-grow{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.me-wrap.desk .me-nav{display:flex}
/* desktop: the side list sits on its own solid panel, readable over any section film or photo (UAT J3, 14 Nov) */
.me-wrap.desk .me-nav{position:sticky;top:0;align-self:flex-start;padding:6px;background:rgba(10,12,11,.92);border:1px solid rgba(201,162,39,.28)}
.me-wrap.desk .me-tab{color:var(--cream)}
.me-wrap.desk .me-tab.on{color:var(--acc);background:rgba(255,255,255,.05)}
.me-wrap.desk .me-tab::after{left:0;right:auto;top:8px;bottom:8px;width:3px;height:auto}
.me-wrap.desk .me-tab.on{border-left-color:transparent}
/* the section has room for its tabs to reach the top, however short it is */
.me-body{min-height:72vh}
.me-wrap.desk .me-body{min-height:0}
.me-main{min-width:0;display:flex;flex-direction:column;gap:12px}
.me-wrap.desk .me-main{flex:999 1 360px}
.me-wrap > .me-nav{margin-bottom:0}
/* a small phone: a tighter member card, so the section shows sooner under the two rows of tabs (Grok, round 2) */
@media (max-width:340px){
  .me-hero{gap:10px;padding:11px}
  .me-ring,.me-ring svg{flex-basis:58px;width:58px;height:58px}
  .me-ring b{font-size:24px}
  .me-name{font-size:22px}
  .me-mail{display:none}
  .me-pts{padding-top:9px}
  .me-pts b{font-size:38px}
}
/* headings and selection take the section's colour */
.me-wrap .subhead2{color:var(--acc);display:flex;align-items:center;gap:8px}
.me-wrap .subhead2::before{content:"";flex:0 0 14px;height:2px;background:var(--acc)}
.me-wrap .me-head b{color:var(--acc)}
.me-wrap .bc-tab.on{background:var(--acc);border-color:var(--acc);color:#17120A}
.me-wrap .me-chip.on{background:var(--acc);border-color:var(--acc)}
/* once the member card has scrolled away, the strip above the tabs is solid: nothing shows through it */
html.gd-mestuck .gd-main > .subbar{background:#0A0C0B;box-shadow:0 1px 0 rgba(201,162,39,.4)}
/* dish pictures (the same stills as the bag covers) */
.me-thumb{flex:0 0 44px;width:44px;height:44px;display:block;background-size:cover;background-position:center;background-color:#14120b;
  border:1px solid rgba(201,162,39,.4);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.me-thumb.sm{flex-basis:34px;width:34px;height:34px}
/* film stills are tall frames with the food low in them: crop a little below the middle (the square dish photos are unchanged) */
.me-thumb,.bc-cover i{background-position:50% 62%}
.me-thumb.seal{display:grid;place-items:center}
.me-pick{gap:9px;padding:6px 8px 6px 6px}
.me-pick .nm{display:flex;flex-direction:column;gap:3px}
.me-pick .nm .pr{font:600 10px/1 var(--mono);color:var(--cream-dim)}
.me-rw{gap:10px}
/* Make a bag: three numbered steps */
.me-bhead{flex-wrap:wrap;gap:8px}
.me-steps{display:flex;gap:4px;margin:0;padding:0;list-style:none;flex:1 1 100%;order:3}
.me-steps li{flex:1;display:flex;align-items:center;gap:6px;padding:6px 7px;font:700 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream-faint);background:rgba(8,10,9,.5);border:1px solid rgba(243,238,230,.14)}
.me-steps li i{font-style:normal;display:grid;place-items:center;width:17px;height:17px;flex:0 0 17px;border:1px solid currentColor}
.me-steps li.on{color:var(--acc);border-color:var(--acc)}
.me-steps li.done{color:var(--cream-dim)}
.me-steps li.done i{background:var(--cream-dim);color:#0A0C0B;border-color:var(--cream-dim)}
/* a tip that stays until it is put away */
.me-tipbox{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;font:500 12.5px/1.4 var(--body);color:var(--cream);
  background:rgba(8,10,9,.72);border:1px solid var(--acc)}
.me-tipbox span{flex:1}
.me-tipbox b{color:var(--acc)}
.me-tipx{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;font:400 22px/1 var(--body);color:var(--cream-dim);background:transparent;border:0}
.me-linkbtns .add.done{background:var(--jade);border-color:var(--jade)}



/* ---- the members area, round 3 (owner, 14 Nov): a home screen with the member card and a tile for every area; the whole
   phone screen is the members area (no brand bar, food menu bar or strip above: html.gd-mefull, set by render() on a phone);
   its own bar at the top, the areas in a bar at the foot, a swipe left or right to the next area. Each area is laid out
   to fit one screen as far as it can. Desktop keeps the side list. ---- */
:root{--acc-home:#F7E9C0}
.me-wrap.s-home,.me-tab.k-home,.me-tile2.k-home{--acc:var(--acc-home)}
.me-tile2.k-profile{--acc:var(--acc-profile)}
.me-tile2.k-points{--acc:var(--acc-points)}
.me-tile2.k-bags{--acc:var(--acc-bags)}
.me-tile2.k-quests{--acc:var(--acc-quests)}
.me-tile2.k-invites{--acc:var(--acc-invites)}
html.gd-mefull .gd-app > .ph-top,html.gd-mefull .gd-app > .gd-rail,html.gd-mefull .gd-app > .gd-meter,
html.gd-mefull .gd-main > .subbar{display:none}
html.gd-mefull .gd-main > .gd-stage{padding-top:0;background:rgba(5,7,6,.88)}
html.gd-mefull .gd-main > .gd-foot{padding:0 0 env(safe-area-inset-bottom);background:#0A0C0B;border-top:1px solid rgba(201,162,39,.35)}
html.gd-mefull .gd-stage > .me-wrap:first-child{margin-top:0}
.me-wrap.full{gap:10px;padding-bottom:8px}
.me-wrap.full .me-body{min-height:0}
/* the top bar: back to the menu, the house mark and the area, your bag */
.me-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px;margin:0 -10px;padding:calc(6px + env(safe-area-inset-top)) 10px 6px;
  background:#0A0C0B;border-bottom:1px solid rgba(201,162,39,.3)}
.me-back,.me-bagbtn{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;cursor:pointer;
  font:600 13px/1 var(--body);color:var(--cream);background:rgba(255,255,255,.04);border:1px solid rgba(243,238,230,.18)}
.me-back .ar{font-size:16px;color:var(--gold-soft)}
.me-bagbtn .ico{width:18px;height:18px;color:var(--gold-soft)}
.me-bagbtn b{font:700 13px/1 var(--mono);color:var(--gold-soft)}
.me-brand{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px}
.me-brand > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.me-brand b{font:600 15px/1 var(--display);color:var(--gold-soft);white-space:nowrap}
.me-brand i{font:700 9.5px/1.1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:350px){ .me-brand b{font-size:13px} .me-back,.me-bagbtn{padding:0 8px} }
/* Home: a tile for every area, its live numbers in the area's colour */
.me-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.me-tile2{position:relative;display:flex;align-items:center;gap:9px;min-height:62px;padding:9px 8px 9px 11px;text-align:left;cursor:pointer;
  color:var(--cream);background:rgba(8,10,9,.7);border:1px solid rgba(243,238,230,.14);border-left:3px solid var(--acc)}
.me-tile2 > .ico:first-child{flex:0 0 22px;width:22px;height:22px;color:var(--acc)}
.me-tile2 > span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.me-tile2 b{font:600 15px/1.1 var(--display);color:var(--acc)}
.me-tile2 i{font:500 11.5px/1.25 var(--body);font-style:normal;color:var(--cream-dim);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.me-tile2 > .ico:last-child{flex:0 0 14px;width:14px;height:14px;color:var(--cream-faint)}
.me-tile2.make{border-style:dashed;border-left-style:solid}
.me-tile2:active{background:rgba(255,255,255,.06)}
.me-wrap.full .me-hero{gap:10px;padding:12px}
.me-wrap.full .me-ring,.me-wrap.full .me-ring svg{flex-basis:62px;width:62px;height:62px}
.me-wrap.full .me-ring b{font-size:26px}
.me-wrap.full .me-pts{padding-top:9px}
.me-wrap.full .me-pts b{font-size:38px}
/* the areas, in a bar at the foot of the screen: always there, the one you are on lit in its colour */
.gd-foot > .me-nav{position:static;margin:0;padding:0;border:0;background:transparent}
.gd-foot > .me-nav .me-tab{min-height:56px;padding:6px 1px 5px;gap:4px;font-size:10.5px;color:var(--cream-dim)}
.gd-foot > .me-nav .me-tab .ico{width:20px;height:20px}
.gd-foot > .me-nav .me-tab.on{color:var(--acc)}
.gd-foot > .me-nav .me-tab::after{top:0;bottom:auto}
/* Bags: a card shows its cover of dish photos and its line, not every dish (one screen holds three or four) */
.me-wrap.full .bagcard .bc-tracks{display:none}
.me-wrap.full .bagcard{gap:7px;padding:9px 10px 8px}
.me-wrap.full .me-head b{font-size:21px}
/* making a bag: Save stays at the foot of the screen however long the list grows */
.me-wrap.full .me-bfoot{position:sticky;bottom:0;z-index:3;margin:0 -13px -13px;padding:10px 13px;background:#0A0C0B;border-top:1px solid rgba(201,162,39,.4)}
/* Points: the three boosts side by side, the rewards as a grid of dish photos */
.me-wrap.full .me-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.me-wrap.full .me-rung{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 8px 9px}
.me-wrap.full .me-rung .x{flex:0 0 auto;font-size:21px}
.me-wrap.full .me-rung span b{font-size:13.5px}
.me-wrap.full .me-rung span i{font-size:10.5px}
.me-wrap.full .me-rung em{position:absolute;top:6px;right:6px;padding:3px 5px;font-size:8.5px}
.me-wrap.full .me-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.me-wrap.full .me-rw{flex-direction:column;align-items:stretch;gap:5px;padding:6px}
.me-wrap.full .me-rw .me-thumb{flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/3}
.me-wrap.full .me-rw .nm b{font-size:12px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.me-wrap.full .me-rw em{align-self:flex-start;font-size:9px}
.me-wrap.full .me-earn{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.me-wrap.full .me-earn .me-tile{padding:8px 6px}
.me-wrap.full .me-earn .me-tile b{font-size:18px}
.me-wrap.full .me-earn .me-tile span{font-size:10.5px}
.me-wrap.full .me-note{font-size:11.5px}
.me-wrap.full .subhead2{margin:2px 0 -2px}
/* Quests and Invites: tighter cabinets and ladders */
.me-wrap.full .me-trophy{padding:9px 3px 8px}
.me-wrap.full .me-woks{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.me-wrap.full .me-woks li{padding:8px 2px}
.me-wrap.full .me-woks b{font-size:21px}
.me-wrap.full .me-woks span{font-size:9.5px}
/* the Undo in the note after a bag is removed */
.toast .tundo{flex:0 0 auto;min-height:36px;margin:-5px -6px -5px 6px;padding:0 12px;cursor:pointer;
  font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#17120A;background:var(--gold);border:0}
html.gd-mefull .toast{bottom:84px}
/* the swipe hint on Home, and the peek label of the area coming in, in its own colour */
.me-wrap.full .me-tipbox{margin-top:2px}



/* round 3, one screen each: the Home card without the address or the repeated streak line; smaller action buttons on a
   bag card; a tighter trophy cabinet; the rewards shelf in short photos and the small print once */
.me-tile2 > .gc-lamps{flex:0 0 auto;display:inline-flex;flex-direction:row;gap:3px}
.me-wrap.full.s-home .me-mail,.me-wrap.full.s-home .me-streak .say{display:none}
.me-wrap.full.s-home .me-hero{gap:8px;padding:11px 12px}
.me-wrap.full.s-home .me-name{font-size:26px}
.me-wrap.full .bc-acts .bc-again,.me-wrap.full .bc-acts .trybag,.me-wrap.full .bc-acts .bc-pen{min-height:44px;padding:0 12px}
.me-wrap.full .me-trophy{gap:3px;padding:7px 3px 6px}
.me-wrap.full .me-trophy .medal,.me-wrap.full .me-trophy .medal svg{width:36px;height:36px}
.me-wrap.full .me-trophy .medal b{font-size:11px}
.me-wrap.full .me-rw .me-thumb{aspect-ratio:16/9}
.me-wrap.full.s-points .me-note{display:none}
.me-wrap.full.s-points .me-ladder + .me-note,.me-wrap.full.s-points .me-shelf + .me-note{display:block}

/* a small phone (iPhone SE, 320 x 568): seven names whole in the bar; Home without the streak row (Points shows the
   ladder); the dragon a little smaller so the line and the hint stay above the bar */
@media (max-width:360px){
  .gd-foot > .me-nav .me-tab,.gd-foot > .me-nav.n7 .me-tab{font-size:8.6px;letter-spacing:.02em}
  .gd-foot > .me-nav .me-tab span{display:block;overflow:visible;text-overflow:clip}
}
@media (max-height:640px){
  .me-wrap.full.s-home .me-streak,.me-wrap.full.s-home .me-boost{display:none}
  .me-wrap.full.s-home .me-hero{gap:6px;padding:9px 10px}
  .me-wrap.full.s-home .me-ring,.me-wrap.full.s-home .me-ring svg{flex-basis:50px;width:50px;height:50px}
  .me-wrap.full.s-home .me-ring b{font-size:21px}
  .me-wrap.full.s-home .me-name{font-size:22px}
  .me-wrap.full.s-home .me-pts{padding-top:6px}
  .me-wrap.full.s-home .me-pts b{font-size:30px}
  /* the area tiles three to a row, their names only (the numbers are inside each area) */
  .me-wrap.full .me-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .me-wrap.full .me-tile2:not(.wide){flex-direction:column;justify-content:center;gap:4px;min-height:52px;padding:6px 4px;text-align:center;border-left-width:1px;border-top:3px solid var(--acc)}
  .me-wrap.full .me-tile2:not(.wide) i,.me-wrap.full .me-tile2:not(.wide) > .ico:last-child{display:none}
  .me-wrap.full .me-tile2:not(.wide) b{font-size:13px}
  .me-wrap.full .me-tile2.wide{min-height:52px;padding-top:6px;padding-bottom:6px}
  .gc-scene .gc-story{font-size:11.5px;line-height:1.4}
  .gc-scene .gc-text{gap:5px}
  .gc-scene .gc-text h2{font-size:20px}
}

/* ---- Daily Charge (owner, 14 Nov): the Golden Dragon coiled around the kitchen's pearl. Hold the pearl three seconds
   (the whole screen charges: the body fills with fire from the tail, embers spiral in, the pearl heats); once a day a
   scale lights; six in a row wake the dragon (x1.2 while the pearl stays lit). Less motion: no embers, shake or flash;
   the fill still shows, as it is the answer to "am I still holding". ---- */
:root{--acc-charge:#FFB547}
.me-wrap.s-charge,.me-tab.k-charge,.me-tile2.k-charge{--acc:var(--acc-charge)}
.me-nav.n7{grid-template-columns:repeat(7,minmax(0,1fr))}
.gd-foot > .me-nav.n7 .me-tab{font-size:9.5px}
.gc-scene{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gc-text{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:420px}
.gc-text h2{margin:0;font:600 23px/1.05 var(--display);color:var(--gold-soft)}
.gc-story{margin:0;font:500 12.5px/1.45 var(--body);color:var(--cream-dim)}
.gc-days{display:flex;align-items:center;gap:9px;font:700 12px/1 var(--mono);color:var(--acc-charge)}
.gc-lamps{display:inline-flex;gap:4px}
.gc-lamps i{width:13px;height:17px;background:#2A2419;clip-path:path('M6.5 0C10 5 13 8.5 13 11.5A6.5 6.5 0 0 1 0 11.5C0 8.5 3 5 6.5 0Z')}
.gc-lamps i.on{background:linear-gradient(180deg,#FFE7A0,#FFB547 55%,#C2530F)}
.gc-days .gc-lamps i{width:17px;height:22px;clip-path:path('M8.5 0C13 6.5 17 11 17 15A8.5 8.5 0 0 1 0 15C0 11 4 6.5 8.5 0Z')}
.gc-line{margin:0;font:500 13px/1.45 var(--body);color:var(--cream)}
.gc-line b{color:var(--acc-charge)}
.gc-hint{margin:0;display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-charge)}
.gc-hint .ico{width:14px;height:14px}
.gc-small{margin:0;font:500 11.5px/1.4 var(--body);color:var(--cream-dim)}
/* the full-screen charge: above everything, the menu bars included */
.gc-over{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;
  background:radial-gradient(circle at 50% 42%,rgba(150,38,20,calc(.18 + var(--p,0)*.55)) 0,rgba(90,22,10,calc(.1 + var(--p,0)*.3)) 40%,rgba(0,0,0,0) 76%),#060403;
  pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;outline:0}
.gc-over.end{pointer-events:auto;cursor:pointer}
.gc-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gc-otext{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:340px;text-align:center}
.gc-count{font:700 56px/1 var(--display);color:#FFD978;min-height:56px}
.gc-say{display:flex;flex-direction:column;align-items:center;gap:8px;font:500 14px/1.4 var(--body);color:var(--cream)}
.gc-big{font:600 27px/1.1 var(--display);color:#FFD978}
.gc-tap{margin-top:6px;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim)}
.gc-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,#FFF6D8 0,rgba(242,199,92,.65) 26%,rgba(242,199,92,0) 64%)}
.gc-over.end .gc-count{display:none}
html.gd-charging,html.gd-charging body{overflow:hidden}
/* Home: the charge tile spans the row, lamps and all; lit while today's spark is still to give */
.me-tile2.wide{grid-column:1/-1}
.me-tile2.wide .gc-lamps{flex:0 0 auto}
.me-tile2.due{border-color:rgba(255,181,71,.6);background:linear-gradient(100deg,rgba(90,30,8,.55),rgba(8,10,9,.7) 60%)}
.me-awake{color:var(--acc-charge);font-weight:700}
.me-chargerow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;background:rgba(40,16,6,.55);border:1px solid rgba(255,181,71,.45)}
.me-chargerow > span{display:flex;gap:9px;align-items:flex-start;min-width:0}
.me-chargerow .ico{flex:0 0 18px;width:18px;height:18px;color:var(--acc-charge)}
.me-chargerow b{display:block;font:600 14px/1.2 var(--display);color:var(--acc-charge)}
.me-chargerow i{font:500 11.5px/1.35 var(--body);font-style:normal;color:var(--cream-dim)}
.me-chargerow .alt{flex:0 0 auto;min-height:40px}
@media (prefers-reduced-motion:no-preference){
  .gc-over.caught .gc-flash{animation:gc-flash 1s ease-out}
  .me-tile2.due .gc-lamps i:not(.on):first-of-type,.me-tile2.due .gc-lamps i.on + i:not(.on){animation:gc-call 2.4s ease-in-out infinite}
}
@keyframes gc-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes gc-pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
@keyframes gc-call{0%,100%{opacity:.5}50%{opacity:1}}
html.gd-calm .gc-over{background:radial-gradient(circle at 50% 42%,rgba(150,38,20,.5) 0,rgba(0,0,0,0) 78%),#060403}



.me-boost{display:block;margin-top:2px;font:600 11px/1.3 var(--body);color:var(--acc-charge)}
.gc-alt{min-height:44px;padding:0 14px;cursor:pointer;font:600 12px/1 var(--body);color:var(--cream-dim);background:transparent;border:1px dashed rgba(255,181,71,.45)}
.gc-alt.sure{color:#17120A;background:var(--acc-charge);border-style:solid}

/* ---- Daily Charge, round 4 (owner, 14 Nov): the whole page is the charge. A sky of clouds and smoke fills the screen
   behind the dragon (canvas .gc-sky); holding anywhere on it lights the screen with gold dust in 2.7 s. The full-screen
   charge draws its clouds and gold light behind the dragon (.gc-clouds) and the gold dust in front (.gc-embers). ---- */
.me-wrap.full.s-charge{min-height:100%}
.me-wrap.full.s-charge .me-main,.me-wrap.full.s-charge .me-body{flex:1 1 auto}
.gc-scene{position:relative;flex:1 1 auto;justify-content:center;outline:0;cursor:pointer;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.me-wrap.full .gc-scene{margin:0 -10px;padding:0 10px 6px}
.gc-scene:focus-visible{box-shadow:inset 0 0 0 2px #FFD978}
.gc-sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.me-wrap.desk .gc-scene{overflow:hidden;min-height:560px;padding:14px}
.me-wrap.desk .gc-sky{position:absolute}
.gc-scene > :not(.gc-sky){position:relative;z-index:1}
.gc-scene .gc-text{text-shadow:0 1px 8px rgba(0,0,0,.85)}
.gc-over{background:#070504}
.gc-clouds,.gc-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gc-clouds{z-index:0}
.gc-embers{z-index:2}
.gc-over .gc-otext{z-index:3;padding:12px 18px 14px;background:rgba(14,9,5,.86);border:1px solid rgba(255,206,110,.55);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.gc-flash{z-index:4}

/* ---- Daily Charge, round 5 (owner, 14 Nov): "filling up the screen by holding pressure", the story of wok hei. The
   page: steam over a low glow of gold at the foot (as deep as the streak), the wok's flame in the middle with its heat.
   Holding anywhere: the gold rises from the bottom to the top of the screen in 2.7 s, the percentage counting up. ---- */
.gc-emblem{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px auto 2px;--h:0}
.gc-emblem .ico{width:96px;height:96px;color:rgb(calc(140 + var(--h)*115),calc(90 + var(--h)*110),calc(40 + var(--h)*30))}
.gc-heat{font:700 34px/1 var(--display);color:#FFD978}
.gc-heatlab{font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim)}
.gc-scene.full .gc-emblem .ico{color:#FFD978}
.gc-scene:not(.lit) .gc-emblem .ico{animation:gc-call 2.4s ease-in-out infinite}
.gc-over .gc-otext{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(86vw,340px)}
.gc-over.caught .gc-otext,.gc-over.end .gc-otext{transform:translate(-50%,-50%)}
.gc-over .gc-count{font-size:64px;min-height:64px}
.gc-over.end .gc-count{display:none}
.gc-lamps.big{gap:6px;margin:4px 0}
.gc-lamps.big i{width:20px;height:26px;clip-path:path('M10 0C15 7.5 20 13 20 18A10 10 0 0 1 0 18C0 13 5 7.5 10 0Z')}
@media (prefers-reduced-motion:no-preference){
  .gc-lamps i.new{animation:gc-grow .6s cubic-bezier(.2,.9,.3,1.4)}
}
@keyframes gc-grow{0%{transform:scale(.2)}100%{transform:none}}
@media (max-height:640px){ .gc-emblem .ico{width:64px;height:64px} .gc-heat{font-size:26px} }

/* ---- round 6 (14 Nov evening) ---- */
/* the rewards shelf: square photo cards, the dish in the middle of each, its points and its state on the picture */
.me-shelf .me-rw{position:relative;display:block;padding:0;overflow:hidden;aspect-ratio:1;background:#14120b}
.me-shelf .me-rw .me-thumb.sq,.me-wrap.full .me-shelf .me-rw .me-thumb.sq{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border:0;clip-path:none;background-position:50% 50%}
.me-shelf .me-rw .me-thumb.sq.seal{background:radial-gradient(circle at 50% 42%,rgba(201,162,39,.22),rgba(8,10,9,.9) 70%)}
.me-shelf .me-rw .me-thumb.sq.seal svg{width:38%;height:auto;opacity:.85}
.me-shelf .me-rw::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,10,9,.55) 0,rgba(8,10,9,0) 32%,rgba(8,10,9,0) 48%,rgba(8,10,9,.92) 100%)}
.me-shelf .me-rw .pt,.me-shelf .me-rw em{position:absolute;z-index:1;top:6px;font:700 9.5px/1 var(--mono);font-style:normal;padding:4px 5px;white-space:nowrap}
.me-shelf .me-rw .pt{left:6px;color:var(--gold-soft);background:rgba(8,10,9,.72);border:1px solid rgba(201,162,39,.45)}
.me-shelf .me-rw em,.me-wrap.full .me-shelf .me-rw em{right:6px;left:auto;color:var(--cream-dim);background:rgba(8,10,9,.72);font-size:9px}
.me-shelf .me-rw.ok em{color:#17120A;background:var(--gold)}
.me-shelf .me-rw .nm{position:absolute;z-index:1;left:7px;right:7px;bottom:12px;display:block}
.me-shelf .me-rw .nm b,.me-wrap.full .me-shelf .me-rw .nm b{font:600 12.5px/1.2 var(--body);color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.8);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.me-shelf .me-rw .bar,.me-wrap.full .me-shelf .me-rw .bar{position:absolute;z-index:1;left:7px;right:7px;bottom:5px;height:3px;margin:0;border:0}
.me-shelf .me-rw.ok{box-shadow:inset 0 0 0 1px rgba(201,162,39,.75)}
.me-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.me-wrap.full .me-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.me-wrap.full .me-shelf .me-rw{padding:0;gap:0;display:block}

/* the story quest card, first in Quests */
.qs-story{position:relative;display:flex;align-items:center;gap:11px;padding:9px;overflow:hidden;background:rgba(8,10,9,.7);border:1px solid rgba(201,162,39,.55)}
.qs-story::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 0 50%,rgba(201,162,39,.16),transparent 60%)}
.qs-cover{position:relative;flex:0 0 76px;width:76px;height:76px;background-size:cover;background-position:22% 30%;border:1px solid rgba(201,162,39,.5)}
.qs-cover::after{content:"";position:absolute;left:17%;top:16%;width:16px;height:16px;margin:-8px;border-radius:50%;background:radial-gradient(circle,#ffe7a0,rgba(255,190,80,.4) 45%,transparent 70%);
  animation:qsLamp 2.6s ease-in-out infinite}
@keyframes qsLamp{50%{transform:scale(1.5);opacity:.6}}
.qs-txt{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.qs-kick{font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--jade)}
.qs-txt b{font:600 17px/1.15 var(--display);color:var(--cream)}
.qs-sp{display:flex;align-items:center;gap:7px;font:700 10px/1 var(--mono);color:var(--gold-soft)}
.qs-dots{display:inline-flex;gap:3px}
.qs-dots i{width:8px;height:8px;transform:rotate(45deg);border:1px solid rgba(201,162,39,.6)}
.qs-dots i.on{background:var(--gold);box-shadow:0 0 6px rgba(255,200,90,.8)}
.qs-go{position:relative;flex:0 0 auto;min-height:44px;padding:0 12px;font-size:11px}
.qs-story.done{border-color:rgba(46,196,182,.55)}
.qs-story + *{margin-top:2px}
@media (max-width:360px){ .qs-cover{flex-basis:60px;width:60px;height:60px} .qs-go{padding:0 9px} }
html.gd-calm .qs-cover::after{animation:none}

/* the story reader: full screen over the members area */
.sb-over{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;background:#060807;color:var(--cream);overflow:hidden;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);animation:sbIn .26s var(--ease)}
.sb-over:focus{outline:none}
@keyframes sbIn{from{opacity:0;transform:scale(1.02)}}
.sb-over.calm{animation:none}
.sb-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 4px;border-bottom:1px solid rgba(201,162,39,.3)}
.sb-x{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;background:none;border:0;color:var(--cream);font-size:28px;line-height:1;cursor:pointer}
.sb-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sb-title b{font:600 15px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-title i{font:700 9.5px/1 var(--mono);font-style:normal;color:var(--gold-soft);letter-spacing:.06em}
.sb-pg{font:700 11px/1 var(--mono);color:var(--cream-dim)}
.sb-track{flex:1;min-height:0;display:flex;transition:transform .42s var(--ease);touch-action:pan-y}
.sb-page{flex:0 0 100%;width:100%;min-height:0;display:flex;flex-direction:column}
.sb-scene{position:relative;flex:1 1 auto;min-height:38%;width:100%;overflow:hidden;container-type:size;background:#0a0c0b}
.sb-stage{--W:max(100cqw,calc(100cqh * 16 / 9));position:absolute;top:50%;width:var(--W);aspect-ratio:16/9;transform:translateY(-50%);
  left:clamp(calc(100cqw - var(--W)),calc(50cqw - var(--W) * var(--fx,.5)),0px);container-type:inline-size}
.sb-img{z-index:0}
.sb-hot,.sb-ticket{z-index:2}
.sb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter .6s,opacity .9s}
.sb-page:not(.lit) .sb-img{filter:brightness(.62) saturate(.8)}
.sb-awake{opacity:0}
.sb-page.lit .sb-awake{opacity:1}
.sb-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55))}
.sb-glow,.sb-coin,.sb-mark,.sb-hot,.sb-zz,.sb-steam,.sb-embers,.sb-mean{position:absolute;transform:translate(-50%,-50%)}
.sb-glow{aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .8s;
  background:radial-gradient(circle,rgba(255,214,120,.95),rgba(255,160,60,.45) 32%,rgba(255,120,40,0) 68%)}
.sb-page.lit .sb-glow{opacity:.9;animation:sbFlick 2.8s ease-in-out infinite}
@keyframes sbFlick{50%{opacity:.65;transform:translate(-50%,-50%) scale(1.06)}}
.sb-hot{border:0;padding:0;cursor:pointer;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.35),rgba(255,200,90,0) 68%);
  box-shadow:0 0 0 2px rgba(255,214,120,.55);animation:sbPing 1.8s ease-out infinite}
.sb-hot::after{content:"";position:absolute;inset:-14%;border-radius:inherit;border:1.5px solid rgba(255,214,120,.6);animation:sbRing 1.8s ease-out infinite}
@keyframes sbPing{50%{box-shadow:0 0 0 2px rgba(255,214,120,.95),0 0 18px rgba(255,190,80,.6)}}
@keyframes sbRing{from{transform:scale(.8);opacity:1}to{transform:scale(1.3);opacity:0}}
.sb-hot.used{box-shadow:none;background:none;animation:none}
.sb-hot.used::after{display:none}
.sb-coin{aspect-ratio:1;pointer-events:none;opacity:0;transition:opacity .8s,filter .8s;filter:drop-shadow(0 0 4px rgba(255,200,90,.7))}
.sb-page.lit .sb-coin{opacity:1;filter:drop-shadow(0 0 10px rgba(255,210,110,.95))}
.sb-page[data-k="3"] .sb-coin{opacity:.55}
.sb-page[data-k="3"].lit .sb-coin{opacity:1;animation:sbCoin 3s ease-in-out infinite}
@keyframes sbCoin{50%{filter:drop-shadow(0 0 18px rgba(255,220,130,1))}}
.sb-mark{aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 0 16px rgba(255,200,90,.7));animation:sbMark 4s ease-in-out infinite}
@keyframes sbMark{50%{filter:drop-shadow(0 0 30px rgba(255,214,120,1))}}
.sb-zz{pointer-events:none;display:flex;gap:2px;font:700 3.4cqw/1 var(--display);color:rgba(220,240,230,.85);transition:opacity .5s}
.sb-zz i{font-style:normal;animation:sbZ 2.4s ease-in-out infinite}
.sb-zz i:nth-child(2){animation-delay:.4s;font-size:.8em}
.sb-zz i:nth-child(3){animation-delay:.8s;font-size:.65em}
@keyframes sbZ{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-1.2cqw);opacity:1}}
.sb-page.lit .sb-zz{opacity:0}
.sb-steam{width:6cqw;height:14cqw;pointer-events:none;border-radius:50%;opacity:0;filter:blur(1.4cqw);background:rgba(240,236,226,.5);animation:sbSteam 3.2s ease-out infinite}
.sb-page.lit .sb-steam{opacity:1}
@keyframes sbSteam{0%{transform:translate(-50%,-10%) scaleY(.5);opacity:0}30%{opacity:.6}100%{transform:translate(-50%,-90%) scaleY(1.2);opacity:0}}
.sb-mean{pointer-events:none;font:italic 500 3.2cqw/1 var(--display);color:#ffe3a0;opacity:0;transition:opacity .8s .3s;text-shadow:0 0 8px rgba(0,0,0,.9)}
.sb-page.lit .sb-mean{opacity:1}
.sb-embers{width:1px;height:1px;pointer-events:none;opacity:0}
.sb-page.lit .sb-embers{opacity:1}
.sb-embers i{position:absolute;width:.9cqw;height:.9cqw;border-radius:50%;background:#ffcf6a;box-shadow:0 0 1.4cqw #ff9d3a;animation:sbEmber 2.6s ease-out infinite}
.sb-embers i:nth-child(2){left:3cqw;animation-delay:.5s}.sb-embers i:nth-child(3){left:-3cqw;animation-delay:1s}
.sb-embers i:nth-child(4){left:1.5cqw;animation-delay:1.5s}.sb-embers i:nth-child(5){left:-1.5cqw;animation-delay:2s}
@keyframes sbEmber{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-16cqw) translateX(2cqw);opacity:0}}
.sb-page.flash .sb-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,224,150,.7),transparent 70%);animation:sbFlash .7s ease-out forwards}
@keyframes sbFlash{from{opacity:1}to{opacity:0}}
.sb-wok{position:absolute;left:18%;top:52%;width:66%;height:48%;pointer-events:none;border-radius:50%;transition:box-shadow .6s}
.sb-page.lit .sb-wok{box-shadow:inset 0 0 8cqw rgba(255,170,60,.55)}
.sb-ticket{position:absolute;left:56%;top:5%;z-index:2;width:21cqw;min-width:120px;padding:1.4cqw 1.7cqw;text-align:left;cursor:grab;touch-action:none;
  font:500 max(10px,1.8cqw)/1.35 var(--mono);color:#2a1d0c;background:#f4ead3;border:0;box-shadow:0 1cqw 3cqw rgba(0,0,0,.6);transform:rotate(3deg);transition:opacity .5s}
.sb-ticket b{display:block;margin-bottom:.8cqw;font-weight:700;letter-spacing:.06em;border-bottom:1px dashed #8a6a3a}
.sb-ticket:not(.used){animation:sbTk 2.2s ease-in-out infinite}
@keyframes sbTk{50%{box-shadow:0 1cqw 3cqw rgba(0,0,0,.6),0 0 0 .6cqw rgba(255,214,120,.65)}}
.sb-ticket.used{opacity:0;pointer-events:none}
.sb-words{flex:0 1 auto;max-height:62%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px 10px}
.sb-chap{display:block;font:700 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}
.sb-words h2{margin:7px 0 10px;font:600 23px/1.15 var(--display);color:var(--cream)}
.sb-words p{margin:0 0 10px;font:400 15.5px/1.55 var(--body);color:rgba(243,238,230,.9)}
.sb-kw{display:inline;padding:0 1px;-webkit-tap-highlight-color:transparent;font:inherit;color:var(--gold-soft);background:none;border:0;border-bottom:1px dashed rgba(224,192,106,.8);cursor:pointer}
.sb-kw.seen{border-bottom-style:solid}
.sb-hint{display:flex;align-items:center;gap:8px;font:700 10.5px/1.3 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-soft)!important}
.sb-hint .ico,.sb-hint svg{width:18px;height:18px;flex:0 0 18px;color:var(--gold)}
.sb-page.lit .sb-hint{opacity:.45}
.sb-end{margin-top:6px;padding:11px 12px;display:flex;flex-direction:column;gap:4px;border:1px solid rgba(201,162,39,.55);background:rgba(201,162,39,.08)}
.sb-end b{font:600 15px/1.2 var(--display);color:var(--gold-soft)}
.sb-end span{font:400 13px/1.4 var(--body);color:var(--cream-dim)}
.sb-tip{position:absolute;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:3;padding:12px 14px;
  font:500 14px/1.4 var(--body);color:var(--cream);background:#1b211e;border:1px solid rgba(201,162,39,.6);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.sb-nav{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px 10px;border-top:1px solid rgba(201,162,39,.3)}
.sb-nav button{min-height:48px;padding:0 16px}
.sb-nav .sb-next{flex:1}
.sb-nav button:disabled{opacity:.35}
.sb-dots{display:flex;gap:5px}
.sb-dots i{width:6px;height:6px;border-radius:50%;background:rgba(243,238,230,.3);transition:background .2s,transform .2s}
.sb-dots i.on{background:var(--gold);transform:scale(1.35)}
.sb-spark{position:fixed;z-index:4;width:5px;height:5px;margin:-2.5px;border-radius:50%;pointer-events:none;background:#ffe08a;box-shadow:0 0 8px #ffb347;
  animation:sbSpark .85s ease-out forwards}
@keyframes sbSpark{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
/* a landscape phone or a wide screen: the picture beside the words */
@media (min-aspect-ratio:4/3){
  .sb-page{flex-direction:row}
  .sb-scene{flex:1 1 auto;width:auto;height:100%;min-height:0}
  .sb-words{flex:0 0 min(40%,440px);max-height:none;padding:16px 20px}
}
.sb-over.calm *,.sb-over.calm *::before,.sb-over.calm *::after{animation:none!important;transition:none!important}

/* Invites: the whole screen. The ring of the Wok ladder, your link, the steps */
.iv{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.iv-head h2{margin:0;font:600 24px/1.1 var(--display);color:var(--cream)}
.iv-head p{margin:5px 0 0;font:400 13px/1.4 var(--body);color:var(--cream-dim)}
.iv-head p b{color:var(--gold-soft);font-weight:600}
.iv-main{display:flex;flex-direction:column;gap:10px}
/* the desktop account panel sits over the food photo (UAT, 14 Nov): Invites on its own dark card, so it reads */
.me-wrap:not(.full) .iv{padding:14px;background:rgba(8,10,9,.9);border:1px solid rgba(201,162,39,.35)}
.iv-ringbox{position:relative;align-self:center;flex:0 0 auto;width:min(100%,300px);aspect-ratio:1;container-type:inline-size}
.iv.side .iv-main{flex-direction:row;align-items:center;gap:8px}
.iv.side .iv-perk{flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:7px;padding:10px}
.iv.side .iv-perk em{align-self:flex-start}
.iv-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.iv-trk,.iv-arc{fill:none;stroke-width:9;stroke-linecap:round}
.iv-trk{stroke:rgba(201,162,39,.16)}
.iv-arc{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(255,200,90,.6))}
.iv-orbit{transform-origin:150px 150px;animation:ivSpin 18s linear infinite;fill:#ffe08a;opacity:.7}
@keyframes ivSpin{to{transform:rotate(360deg)}}
.iv-mid{position:absolute;inset:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.16),rgba(8,10,9,0) 70%)}
.iv-mid b{font:600 22cqw/1 var(--display);color:var(--gold-soft);text-shadow:0 0 18px rgba(255,200,90,.45)}
.iv-mid span{font:600 max(8.5px,3.7cqw)/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim)}
.iv-mid i{margin-top:2px;max-width:100%;font:500 max(10px,4.2cqw)/1.2 var(--body);font-style:normal;color:var(--jade)}
.iv-node{position:absolute;width:clamp(30px,14cqw,44px);height:clamp(30px,14cqw,44px);transform:translate(-50%,-50%);padding:0;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:#0d100f;border:2px solid rgba(201,162,39,.45);color:var(--cream-dim);transition:transform .2s var(--ease),background .2s}
.iv-node b{font:700 clamp(12px,5cqw,16px)/1 var(--display)}
.iv-node::before{content:"";position:absolute;inset:-7px}
.iv-node.on{background:var(--gold);border-color:var(--gold-soft);color:#17120A;box-shadow:0 0 14px rgba(255,200,90,.55)}
.iv-node.next{animation:ivNext 1.8s ease-in-out infinite}
@keyframes ivNext{50%{box-shadow:0 0 0 6px rgba(201,162,39,.18)}}
.iv-node.sel{transform:translate(-50%,-50%) scale(1.16);border-color:var(--cream)}
.iv-node:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
.iv-perk{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(8,10,9,.7);border:1px solid rgba(201,162,39,.45);animation:ivPop .28s var(--ease)}
@keyframes ivPop{from{opacity:0;transform:translateY(4px)}}
.iv-perk .iv-badge{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(201,162,39,.16);color:var(--gold-soft)}
.iv-perk .iv-badge svg{width:18px;height:18px}
.iv-perk > span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.iv-perk b{font:600 15px/1.2 var(--display);color:var(--cream)}
.iv-perk i{font:500 12px/1.35 var(--body);font-style:normal;color:var(--cream-dim)}
.iv-perk em{font:700 10px/1 var(--mono);font-style:normal;padding:6px 7px;color:var(--cream-dim);border:1px solid rgba(243,238,230,.2);white-space:nowrap}
.iv-perk.got{border-color:rgba(46,196,182,.6)}
.iv-perk.got em{color:#06231f;background:var(--jade);border-color:var(--jade)}
.iv-perk.got .iv-badge{background:rgba(46,196,182,.18);color:var(--jade)}
.iv-link{display:flex;flex-direction:column;gap:8px;padding:10px;background:linear-gradient(135deg,rgba(201,162,39,.14),rgba(8,10,9,.7));border:1px solid rgba(201,162,39,.6)}
.iv-url{padding:9px 10px;font:600 12.5px/1.3 var(--mono);color:var(--gold-soft);background:rgba(0,0,0,.35);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.iv-btns{display:flex;gap:6px}
.iv-btns > *{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
@media (max-width:360px){ .iv-btns > *{font-size:13px} .iv-btns > .alt{padding:0 9px} }
.iv-btns > .add{flex:1}
.iv-btns > .alt{flex:0 0 auto;padding:0 12px}
.iv-btns .add.done{background:var(--jade);border-color:var(--jade)}
.iv-wa{text-decoration:none}
.iv-qri{width:16px;height:16px;background:conic-gradient(currentColor 25%,transparent 0 50%,currentColor 0 75%,transparent 0) 0 0/8px 8px;opacity:.85}
.iv-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.iv-steps li{display:flex;align-items:center;gap:6px;padding:7px 6px;background:rgba(8,10,9,.55);border:1px solid rgba(243,238,230,.12)}
.iv-steps i{flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font:700 11px/1 var(--mono);font-style:normal;color:#17120A;background:var(--gold)}
.iv-steps span{font:400 11px/1.2 var(--body);color:var(--cream-dim)}
.iv-steps b{display:block;color:var(--cream);font-weight:600}
.iv-badges{display:flex;flex-wrap:wrap;gap:5px}
.iv-badges span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;font:600 11px/1 var(--mono);color:var(--gold-soft);border:1px solid rgba(201,162,39,.45)}
.iv-badges svg{width:12px;height:12px}
.iv-note{margin:0;font:400 11.5px/1.35 var(--body);color:var(--cream-faint);text-align:center}
.iv-qr{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;background:rgba(4,5,5,.88);animation:sbIn .2s}
.iv-qrcard{width:min(100%,340px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;background:#0d100f;border:1px solid rgba(201,162,39,.6);text-align:center}
.iv-qrcard b{font:600 18px/1.2 var(--display);color:var(--cream)}
.iv-qrimg{width:100%;aspect-ratio:1;padding:10px;background:#fff;overflow-wrap:anywhere;color:#111;font:600 12px/1.3 var(--mono)}
.iv-qrimg svg{width:100%;height:100%;display:block}
.iv-qrcard span{font:700 14px/1 var(--mono);letter-spacing:.14em;color:var(--gold-soft)}
.iv-qrcard i{font:400 12.5px/1.3 var(--body);font-style:normal;color:var(--cream-dim)}
.iv-qrcard .add{width:100%;min-height:48px}
.iv.side .iv-note,.iv.tight .iv-steps,.iv.tight .iv-badges,.iv.tighter .iv-head p{display:none}
@media (max-height:700px){ .iv{gap:7px} .iv-head h2{font-size:21px} .iv-head p{font-size:12px} .iv-main{gap:7px} .iv-btns > *{min-height:44px} }
html.gd-calm .iv-orbit,html.gd-calm .iv-node.next,html.gd-calm .iv-perk{animation:none}
@media (max-height:700px){ .sb-words{padding:10px 14px 8px} .sb-words h2{margin:5px 0 7px;font-size:19px} .sb-words p{font-size:14px;line-height:1.5;margin-bottom:8px} .sb-nav button{min-height:44px} }

/* Invites: share to socials (14 Nov evening) */
.iv-soc{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.iv-sochead{font:700 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.iv-sochead i{font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--jade)}
.iv-sochint{margin:0;font:400 11.5px/1.35 var(--body);color:var(--cream-dim)}
.iv-sochint b{color:var(--cream);font-weight:600}
.iv.tighter .iv-sochint{display:none}
.iv-socrow{display:flex;gap:6px}
.iv-sb{position:relative;flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 2px;cursor:pointer;
  text-decoration:none;color:var(--cream);background:rgba(8,10,9,.55);border:1px solid rgba(243,238,230,.16);font:inherit;transition:transform var(--micro),border-color var(--micro)}
.iv-sb:active{transform:scale(.96)}
.iv-sb:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.iv-sbi{display:grid;place-items:center;width:28px;height:28px;border-radius:9px}
.iv-sbi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iv-sbi svg .f{fill:currentColor;stroke:none}
.iv-sbl{font:600 10.5px/1 var(--body);white-space:nowrap}
.iv-sb em{position:absolute;top:-6px;right:-3px;padding:2px 4px;font:700 9px/1 var(--mono);font-style:normal;color:#06231f;background:var(--jade)}
.iv-sb em.wait{color:var(--gold-soft);background:#1b211e;border:1px solid rgba(201,162,39,.6)}
.iv-sb em.ok{padding:1px 2px;line-height:0}
.iv-sb em.ok svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3}
.iv-shpay{margin:-2px 0 0;text-align:center;font:500 12px/1.3 var(--body);color:var(--jade)}
.iv-shpay b{color:var(--cream)}
.k-instagram .iv-sbi,.iv-sbi.k-instagram{color:#fff;background:linear-gradient(45deg,#f9a03f,#d6246e 55%,#7a3fd0)}
.k-facebook .iv-sbi,.iv-sbi.k-facebook{color:#fff;background:#1877f2}
.k-whatsapp .iv-sbi{color:#fff;background:#25d366}
.k-more .iv-sbi{color:var(--gold-soft);background:rgba(201,162,39,.16)}
.iv-link2{display:flex;gap:6px}
.iv-link2 a{flex:1;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 12px/1 var(--body);text-decoration:none}
.iv-link2 a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.iv-link2 b{color:var(--jade)}
.iv-sheet{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,5,5,.82);animation:sbIn .2s}
.iv-sheet.calm{animation:none}
.iv-shbox{width:min(100%,460px);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  background:#0d100f;border-top:1px solid rgba(201,162,39,.6);animation:ivUp .28s var(--ease)}
.iv-sheet.calm .iv-shbox{animation:none}
@keyframes ivUp{from{transform:translateY(40px);opacity:.4}}
.iv-shtop{display:flex;align-items:center;gap:10px}
.iv-shtop b{flex:1;font:600 18px/1.2 var(--display);color:var(--cream)}
.iv-shx{width:44px;height:44px;margin:-6px -8px -6px 0;display:grid;place-items:center;font-size:28px;line-height:1;color:var(--cream);background:none;border:0;cursor:pointer}
.iv-seg{display:flex;padding:3px;gap:3px;background:rgba(243,238,230,.06);border:1px solid rgba(243,238,230,.12)}
.iv-seg button{flex:1;min-height:38px;font:600 13px/1 var(--body);color:var(--cream-dim);background:none;border:0;cursor:pointer}
.iv-seg button.on{color:#17120A;background:var(--gold)}
.iv-seg button i{font:700 10px/1 var(--mono);font-style:normal;color:var(--jade)}
.iv-seg button.on i{color:#06231f}
.iv-shpic{align-self:center;display:grid;place-items:center;background:#060807;border:1px solid rgba(201,162,39,.35)}
.iv-shpic.story{height:min(46vh,420px);aspect-ratio:9/16}
.iv-shpic.post{height:min(38vh,320px);aspect-ratio:1}
.iv-shpic img{width:100%;height:100%;object-fit:contain;display:block;-webkit-touch-callout:default}
.iv-shpic img:not([src]){visibility:hidden}
.iv-shpic:has(img:not([src]))::after{content:"Drawing your picture…";font:600 11px/1 var(--mono);color:var(--cream-faint)}
.iv-shsteps{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:4px;font:400 13px/1.4 var(--body);color:var(--cream-dim)}
.iv-shsteps b{color:var(--cream);font-weight:600}
.iv-shbtns{display:flex;gap:6px}
.iv-shbtns button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.iv-shbtns .add{flex:1}
.iv-shbtns .add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iv-shbtns .add:disabled{opacity:.5}
.iv-shbtns .alt{padding:0 14px}
.iv-shalt{align-self:center;font:600 12.5px/1.3 var(--body);color:var(--gold-soft)}
.iv-shnote{margin:0;text-align:center;font:400 11.5px/1.3 var(--body);color:var(--cream-faint)}
@media (max-height:700px){ .iv-sb{min-height:50px} .iv-sbi{width:24px;height:24px} .iv-sbi svg{width:17px;height:17px} }

/* ---- a shop with photos and no films (26 Oct, owner: "the screen resolution is weird on mobile and desktop";
   Grok's review of qqq.1212.is). The film-first, full-bleed layout was made for footage; a shop's product photos
   are ~1000px, often on white, and do not stretch to a screen. Only html.gd-stills, set by the page on a shop with
   photos and no films: Golden Dragon never has it, so none of this reaches it. ---- */
/* 1. no product photo full-bleed behind the page: near-black, at most a heavy blurred dark wash of it */
html.gd-stills .gd-app,html.gd-stills .filmlayer{background:#0a0a0a}
html.gd-stills .stilllayer{inset:-80px;filter:blur(40px) brightness(.15)}
html.gd-stills .stilllayer.on{opacity:.35}
html.gd-stills .vig{display:none}
/* the list starts at the top, not at the bottom under a film; the bar never covers the last card */
html.gd-stills .gd-stage > *:first-child{margin-top:0}
html.gd-stills .gd-main > .gd-stage{padding-bottom:20px}
html.gd-stills.gd-hasbar .gd-main > .gd-stage{padding-bottom:calc(68px + 20px)}
html.gd-stills .gd-main > .gd-foot{background:#0a0a0a;border-top:1px solid rgba(243,238,230,.08)}
html.gd-stills.gd-dish .gd-stage{background:none}
/* 2. rows: a square photo, contained on dark, then the name (two lines at most), the second name, the price */
html.gd-stills .cell{min-height:84px;padding:8px;gap:12px}
html.gd-stills .cell .ic.thumb{width:68px;height:68px;flex:0 0 68px;border-radius:6px;background:#111 center/contain no-repeat}
html.gd-stills .cell .nm{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:normal;word-break:normal}
html.gd-stills .cell .mid > .na{font-size:12px!important;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.gd-stills .cell .pr{font-size:14px;line-height:1.25;white-space:nowrap}
html.gd-stills .cell:has(.quick) .mid{padding-right:52px}
@media (max-width:639px){
  html.gd-stills .itemgrid:not(.opts){grid-template-columns:1fr}
  html.gd-stills .cell{padding:8px 6px;gap:12px}
  html.gd-stills .cell .ic.thumb{width:68px;height:68px;flex:0 0 68px}
}
/* 5. the second currency under the first, smaller: rows, the item and the bag */
html.gd-stills .p2{display:block;margin-top:3px;font-style:normal;font-size:.85rem;font-weight:500;opacity:.75;white-space:nowrap}
html.gd-stills .cell .pr .p2{font-size:12px}
html.gd-stills .dpr{white-space:nowrap;text-align:right;line-height:1.15}
html.gd-stills .bl-pr{white-space:nowrap;text-align:right}
html.gd-stills .bl-alt{font-size:.85em;opacity:.75;color:inherit}
/* 3. the item: its photo contained under 42% of the screen, the gallery under it, then the name, price and choices */
html.gd-stills .dphoto{padding:0;overflow:hidden;background:#111}
html.gd-stills .dphoto .dpbig{display:block;width:100%;height:42vh;max-height:42vh;object-fit:contain;background:#111}
html.gd-stills .dpthumbs{display:flex;gap:6px;padding:8px;overflow-x:auto}
html.gd-stills .dpt{flex:0 0 52px;width:52px;height:52px;padding:0;cursor:pointer;border-radius:6px;border:2px solid transparent;
  background:#1a1a1a center/contain no-repeat}
html.gd-stills .dhead{padding:10px 12px}
html.gd-stills .dhead h5{font-size:21px;line-height:1.2}
html.gd-stills .dhead h5 .na{font-size:15px!important}
html.gd-stills .ddesc p{margin:0;font-size:13.5px;line-height:1.55;color:var(--cream-dim)}
html.gd-stills .ddesc{padding:10px 12px}
@media (max-width:1023px){
  /* 26 Oct (Grok, #106): on 390x844 the name, price, size and the qty/Add row all show without scrolling. The photo
     under 36vh, the gallery one row of 48px, and no prev/next strip between the details and Add (a swipe still
     moves to the next item); the stage clears the action row by 16px. */
  html.gd-stills.gd-dish .gd-main > .gd-stage{padding-bottom:16px}
  html.gd-stills .dphoto .dpbig{height:auto;max-height:36vh;aspect-ratio:1/1}
  html.gd-stills .dpthumbs{padding:6px;gap:6px;flex-wrap:nowrap}
  html.gd-stills .dpt{flex:0 0 48px;width:48px;height:48px}
  html.gd-stills.gd-dish .gd-foot .pager{display:none}
  html.gd-stills.gd-dish .dhead{padding:8px 12px}
  html.gd-stills.gd-dish .gd-stage{gap:6px}
  /* two or more choices (colour and size): a smaller photo, and the choices as compact chips */
  html.gd-stills .dphoto.many .dpbig{max-height:27vh}
  html.gd-stills .flatopts .fopt{flex:0 1 auto;min-width:64px;min-height:38px;padding:6px 12px}
  html.gd-stills .itemgrid.opts .cell{min-height:48px;padding:6px 10px}
  html.gd-stills .itemgrid.opts .cell .ic{display:none}
  html.gd-stills .itemgrid.opts .cell .pr{font-size:13px}
}
/* 4. the desktop item: a centred card over the whole window, photo left, details right, scrolling inside */
@media (min-width:1024px){
  html.gd-stills .d-overlay{position:fixed;z-index:60;padding:0;place-items:center}
  html.gd-stills .ovlcard.ovl2{width:min(1100px,92vw);max-height:90vh;height:auto;display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  html.gd-stills .ovl2 > .ovlpic{grid-column:1;grid-row:1/3;min-height:0;display:flex;align-items:center;justify-content:center;
    background:#111;overflow:hidden}
  html.gd-stills .ovl2 > .ovlpic .dphoto{width:100%;height:100%;display:flex;flex-direction:column;border:0;clip-path:none}
  html.gd-stills .ovl2 > .ovlpic .dpbig{flex:1;height:auto;min-height:0;max-height:calc(90vh - 72px);aspect-ratio:auto}
  html.gd-stills .ovl2 > .ovlbody{grid-column:2;grid-row:1;min-height:0;padding-top:52px}
  html.gd-stills .ovl2 > .ovlfoot{grid-column:2;grid-row:2}
  html.gd-stills .ovlcard .dhead h5{font-size:26px}
  /* 7. a photo a row can see */
  html.gd-stills .cell .ic.thumb{width:60px;height:60px;flex:0 0 60px}
}
/* the bag: the price under the name, so a long name has the line's width (Grok: a word a line beside the price) */
html.gd-stills .bagline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:3px;
  grid-template-areas:"ic mid qty" "ic pr qty";align-items:center}
html.gd-stills .bagline > .ic{grid-area:ic}
html.gd-stills .bagline > .bl-mid{grid-area:mid}
html.gd-stills .bagline > .bl-pr{grid-area:pr;text-align:left}
html.gd-stills .bagline > .bl-qty{grid-area:qty}
html.gd-stills .bagline .bl-nm{font-size:13px}
html.gd-stills .bagline .bl-alt{display:block;margin:2px 0 0;text-align:left}