/* =============================================================================
   «ובניו» the in-game and end screens, on the style spec    src/ui/game.css
   Spec: docs/STYLE_SPEC.md (tokens and recipes: src/ui/tokens.css).
   Brief: research/design/DESIGN_DIRECTION.he.html, section ו rows 11-17.

   Decisions (run 5, the design pass, 2026-11-10):
   - A linked file, like tokens.css: art/pack.py counts index.html's bytes in
     the 3 MB start set and not stylesheets, and the start set had 2,312 B
     left. The CSS these screens used to keep in index.html moved here.
   - "Rubik" and "Karantina" are aliased to the local OFL subsets below, so
     every older rule (the title and lobby keep theirs until item 9 rebuilds
     them) draws from src/ui/fonts once the Google Fonts link is gone.
   - Sizes are calc(N * var(--ub-u)); --ub-u is 1 on a phone and 1.4 above
     1200 x 700 (principle 9: desktop x1.4). index.html's rem scale is left
     to the title and lobby.
   - HUD (row 11): ONE board top-left (day, clock, score; patience under them,
     the combo sticker at its end), the ticket rail top-right (oldest ticket
     on the right, one urgency signal: the bar, green then red at 33 % and a
     swing), the hands and the dock in the right column on the same paper,
     shout / sound / swap bottom-left as glyph buttons. The hint is a toast,
     shown 10 s on day 1, then only for refusals and news.
   - Day end (12): beat 1 is the title alone for 900 ms; beat 2 the receipt
     (right, the chef in it) and the ledger + the one primary (left), bottom
     lines shared; the stamp has its own slot.
   - Draft (16): three cards of one height on the right, the menu on the
     left: a tap selects (lifts, blue ring), «בוחרים» confirms.
   - Run end (13): the share card is the hero (the chef in its centre), one
     record line, «שתפו» primary; the personal report is a folded strip that
     opens as its own sheet.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts ---- */
/* the same four files as tokens.css (one download), under the old family names */
@font-face{font-family:"Rubik";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("fonts/rubik-hebrew.woff2") format("woff2");unicode-range:U+0020,U+00A0,U+05BE,U+05D0-05EA,U+05F3-05F4,U+20AA}
@font-face{font-family:"Rubik";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("fonts/rubik-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00B7,U+00BB,U+00D7,U+2013-2014,U+2018-2019,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2212}
@font-face{font-family:"Karantina";font-style:normal;font-weight:400 900;font-display:block;
  src:url("fonts/karantina-hebrew.woff2") format("woff2");unicode-range:U+0020,U+00A0,U+05BE,U+05D0-05EA,U+05F3-05F4,U+20AA}
@font-face{font-family:"Karantina";font-style:normal;font-weight:400 900;font-display:block;
  src:url("fonts/karantina-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00B7,U+00BB,U+00D7,U+2013-2014,U+2018-2019,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2191,U+2193,U+2212}

/* the held-meat states of the skewer: one tone over the whole picture */
.ub-icon--raw{--ub-ic-m:#F4A396;--ub-ic-hl:rgba(255,255,255,.6)}
.ub-icon--burnt{--ub-ic-m:#3F332C;--ub-ic-hl:rgba(255,255,255,.2)}
#ubProbe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;
  padding:var(--ub-safe-top) var(--ub-safe-x) var(--ub-safe-bottom)}

/* ================================================================ the HUD === */
#hud{position:absolute;inset:0;pointer-events:none;z-index:60;transition:opacity var(--ub-t-mid) var(--ub-ease-out)}
#hud.off{opacity:0;visibility:hidden}

/* ONE board, top-left: three values on one baseline, patience under them */
#topL{position:absolute;left:var(--ub-safe-x);top:var(--ub-safe-top);z-index:3;display:flex;flex-direction:column;
  gap:calc(5 * var(--ub-u));padding:calc(6 * var(--ub-u)) calc(12 * var(--ub-u)) calc(8 * var(--ub-u));min-width:calc(236 * var(--ub-u))}
body.lefty #topL{left:auto;right:var(--ub-safe-x)}
#topR{position:relative;display:flex;align-items:center;gap:calc(16 * var(--ub-u))}
#topR .ub-stat{gap:calc(6 * var(--ub-u))}
#topR .ub-stat--text{gap:calc(4 * var(--ub-u))}
#topR .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}
#topR .score{position:relative}
#topR .ub-num{min-width:1ch;text-align:left}
#clock{min-width:2.4ch}
#score{min-width:2.8ch}
#topR.lo #clock{color:var(--ub-danger-on-dark);animation:ubTick 1s steps(1) infinite}
#topR.lo .clock .ub-icon{animation:ub-shake .5s infinite}
@keyframes ubTick{0%{transform:scale(1.12)}30%,100%{transform:none}}
#score.bump{animation:ub-pop var(--ub-t-fast) var(--ub-ease-pop)}
#patience{position:relative;display:flex;align-items:center;gap:calc(6 * var(--ub-u));min-height:calc(18 * var(--ub-u))}
#patience .lab{font:var(--ub-w-head) var(--ub-fs-5)/1 var(--ub-font-ui);color:var(--ub-chalk-2);white-space:nowrap}
#patBar{position:relative;flex:1;min-width:calc(56 * var(--ub-u));height:calc(10 * var(--ub-u));direction:ltr;overflow:hidden;
  border-radius:var(--ub-r-pill);background:var(--ub-board-2);border:var(--ub-bw) solid var(--ub-ink)}
#patBar i{display:block;height:100%;width:100%;background:var(--ub-go);border-radius:inherit;transition:width .25s linear,background var(--ub-t-mid)}
#patience[data-lv="2"] #patBar i,#patience.warn #patBar i{background:var(--ub-danger)}
#patBar u{position:absolute;top:0;bottom:0;width:var(--ub-bw);background:var(--ub-chalk);opacity:.65}
#patience.warn{animation:ub-shake .45s infinite}
#patience.warn .lab{color:var(--ub-danger-on-dark)}
#mult{display:none;flex:none}
#mult.on{display:inline-flex}
#mult.bump{animation:ubSticker var(--ub-t-mid) var(--ub-ease-pop)}
@keyframes ubSticker{40%{transform:rotate(var(--ub-tilt)) scale(1.2)}}
#topL #netBadge{position:static;transform:none;align-self:stretch;justify-content:center;font-size:var(--ub-fs-5);box-shadow:none}

/* the ticket rail, top-right: oldest ticket first in the DOM = on the right */
#orders{position:absolute;top:var(--ub-safe-top);right:var(--ub-safe-x);z-index:2;width:var(--rw,320px);
  display:flex;flex-direction:row;direction:rtl;align-items:flex-start;gap:calc(8 * var(--ub-u));
  padding:calc(4 * var(--ub-u)) calc(10 * var(--ub-u)) 0}
#orders::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(8 * var(--ub-u));z-index:2;
  background:var(--ub-wood);border:var(--ub-bw) solid var(--ub-ink);border-radius:var(--ub-r-pill);box-shadow:var(--ub-shadow-s)}
body.lefty #orders{right:auto;left:var(--ub-safe-x)}
.ord{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--ub-u));
  min-width:calc(84 * var(--ub-u));padding:calc(15 * var(--ub-u)) calc(6 * var(--ub-u)) calc(7 * var(--ub-u));
  background:var(--ub-receipt);color:var(--ub-ink);border:var(--ub-bw) solid var(--ub-ink);
  border-radius:0 0 var(--ub-r-sm) var(--ub-r-sm);transform-origin:50% 0;transform:rotate(var(--tilt,0deg));
  box-shadow:var(--ub-shadow-s),0 calc(6 * var(--ub-u)) calc(10 * var(--ub-u)) rgba(20,10,4,.32);
  transition:margin var(--ub-t-mid) var(--ub-ease-out)}
.ord.ub-ticket{width:auto}                /* tokens.css fixes .ub-ticket at 84u: here it grows with its dishes */
.ord + .ord{margin-right:calc(var(--squeeze,0px) * -1)}
/* the clip that holds it on the rail */
.ord::before{content:"";position:absolute;top:calc(-7 * var(--ub-u));left:50%;width:calc(14 * var(--ub-u));height:calc(11 * var(--ub-u));
  margin-left:calc(-7 * var(--ub-u));z-index:3;background:var(--ub-wood-d);border:var(--ub-bw) solid var(--ub-ink);border-radius:calc(3 * var(--ub-u))}
.ord .no{position:absolute;top:calc(2 * var(--ub-u));inset-inline-end:calc(6 * var(--ub-u));
  font:var(--ub-w-head) var(--ub-fs-5)/1 var(--ub-font-ui);color:var(--ub-ink-2);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
/* a ticket grows sideways with its dishes (never taller: the band over the room is the phone's) */
.ord .need{display:flex;align-items:center;justify-content:center;gap:calc(2 * var(--ub-u));min-height:var(--ub-icon-m);flex-wrap:nowrap}
.ord .n{position:relative;display:inline-flex;align-items:center;gap:calc(1 * var(--ub-u));font-size:var(--ub-fs-3);line-height:1}
.ord .n em{font:700 var(--ub-fs-3)/1 var(--ub-font-num);font-style:normal;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
  margin-inline-end:calc(2 * var(--ub-u))}
.ord .bar{align-self:stretch;height:calc(8 * var(--ub-u));border-radius:var(--ub-r-pill);background:var(--ub-paper-2);
  border:var(--ub-bw) solid var(--ub-ink);overflow:hidden;direction:rtl}
.ord .bar i{display:block;height:100%;width:100%;background:var(--ub-go);border-radius:inherit}
.ord.urg .bar i{background:var(--ub-danger)}
.ord.urg{animation:ub-swing 1s var(--ub-ease-out) infinite}
/* a ticket that does not fit full size hangs compact: pictures only, its bar kept */
.ord.cmp{width:auto;min-width:calc(44 * var(--ub-u));padding:calc(12 * var(--ub-u)) calc(4 * var(--ub-u)) calc(6 * var(--ub-u))}
.ord.cmp .no{display:none}
.ord.cmp .need{min-height:var(--ub-icon-s);flex-wrap:wrap;max-width:calc(56 * var(--ub-u))}
.ord.cmp .n .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}
.ord.cmp .n em{font:var(--ub-w-head) var(--ub-fs-5)/1 var(--ub-font-ui)}
.ord.in{animation:ubTicketIn var(--ub-t-mid) var(--ub-ease-pop) both}
@keyframes ubTicketIn{0%{transform:translateY(-70%) rotate(-6deg);opacity:0}100%{transform:rotate(var(--tilt,0deg));opacity:1}}
.ord.out{pointer-events:none;transition:none}
.ord.out.ok{animation:ubServed .34s var(--ub-ease-in) forwards}
.ord.out.bad{animation:ubMissed .4s var(--ub-ease-in) forwards}
.ord.out.ok::after,.ord.out.bad::after{position:absolute;left:50%;top:38%;z-index:4;white-space:nowrap;
  font:var(--ub-w-display) var(--ub-fs-4)/1 var(--ub-font-ui);padding:calc(3 * var(--ub-u)) calc(7 * var(--ub-u));
  border:var(--ub-bw-2) solid currentColor;border-radius:var(--ub-r-sm);background:var(--ub-receipt);transform:translate(-50%,-50%) rotate(var(--ub-stamp-tilt))}
.ord.out.ok::after{content:"יצא!";color:var(--ub-go)}
.ord.out.bad::after{content:"הלך";color:var(--ub-danger)}
.ord.out.caught::after{content:"פויה!"}
@keyframes ubServed{0%{transform:rotate(var(--tilt,0deg))}40%{transform:translateY(calc(-4 * var(--ub-u))) scale(1.06)}100%{transform:translateY(-130%) scale(.9);opacity:0}}
@keyframes ubMissed{0%{transform:rotate(var(--tilt,0deg))}100%{transform:translateY(50%) rotate(16deg);opacity:0}}

/* the right column under the rail: what is in your hands, the cards, the crew */
/* it stands on the dock (the hands within the thumb's reach) and grows up toward the rail;
   what does not fit is cut at the top (the crew first, then the cards).
   Fix round (review: a two-column strip, two thirds blank paper with one item, its bottom corners
   cut square, «לאכול» over the card's border): the hands panel is as wide as what it holds, one
   72u slot per hand (the free hand a paper-2 silhouette slot), hung on the dock's side; the column
   keeps 6u of room under it and 4u at its sides so the radius and the 3u ledge show all round;
   «לאכול» (and «להחביא בחריף») is the slot's label row, a .ub-tag--ink, never over a border. */
#console{position:absolute;left:calc(var(--cx) - 4 * var(--ub-u));width:calc(var(--cw) + 8 * var(--ub-u));
  bottom:calc(100% - var(--dockTop) + 2 * var(--ub-u));max-height:calc(var(--ch) + 6 * var(--ub-u));z-index:3;
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:calc(6 * var(--ub-u));overflow:hidden;
  padding:calc(12 * var(--ub-u)) calc(4 * var(--ub-u)) calc(6 * var(--ub-u))}
body.lefty #console{align-items:flex-end}
#console > #deck,#console > #crew{align-self:stretch}
#hands{position:relative;flex:none;display:flex;align-items:center;gap:calc(6 * var(--ub-u));
  padding:calc(5 * var(--ub-u));background:var(--ub-paper);color:var(--ub-ink);
  border:var(--ub-bw) solid var(--ub-ink);border-radius:var(--ub-r);box-shadow:var(--ub-ledge)}
#hands .k{display:none}
#handSlots{display:flex;align-items:stretch;gap:calc(6 * var(--ub-u));min-width:0}
#handSlots i{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3 * var(--ub-u));
  min-width:calc(72 * var(--ub-u));height:calc(58 * var(--ub-u));padding:0 calc(4 * var(--ub-u));font-style:normal;border-radius:var(--ub-r-sm);background:var(--ub-paper-2)}
#handSlots i.on{background:var(--ub-receipt);box-shadow:inset 0 0 0 var(--ub-bw) var(--ub-ink);animation:ub-pop var(--ub-t-fast) var(--ub-ease-pop)}
#handSlots i b{font:var(--ub-w-head) var(--ub-fs-5)/1 var(--ub-font-ui);white-space:nowrap}
#handSlots i:not(.on) b{color:var(--ub-ink-2)}
#handSlots i:not(.on) .ub-icon{--ub-ic-m:var(--ub-mute);--ub-ic-hl:transparent;--ub-ic-ink:var(--ub-mute-ink);opacity:.8}
#handSlots i .ub-tag{height:calc(18 * var(--ub-u));padding:0 calc(7 * var(--ub-u))}
#handSlots .ub-empty{justify-content:center;min-height:calc(58 * var(--ub-u));padding:0 calc(12 * var(--ub-u))}
#hands.full{box-shadow:0 0 0 var(--ub-bw) var(--ub-ink),var(--ub-ledge)}
/* a short phone with three dock rows: the hands beside the dock, on its bottom line (fit(): handsSide) */
body.handsSide #console{overflow:visible}
body.handsSide #hands{position:fixed;right:var(--hsx);bottom:var(--ub-safe-bottom)}
body.handsSide.lefty #hands{right:auto;left:var(--hsx)}
#deck{flex:none;display:flex;flex-wrap:wrap;gap:calc(4 * var(--ub-u));min-height:0}
#deck:empty{display:none}
#deck span{display:inline-flex;align-items:center;gap:calc(6 * var(--ub-u));max-width:100%;padding:calc(3 * var(--ub-u)) calc(8 * var(--ub-u)) calc(3 * var(--ub-u)) calc(3 * var(--ub-u));
  background:var(--ub-paper);color:var(--ub-ink);border:var(--ub-bw) solid var(--ub-ink);border-radius:var(--ub-r-pill);
  font:var(--ub-w-head) var(--ub-fs-5)/1 var(--ub-font-ui);white-space:nowrap;overflow:hidden}
#deck span img,#deck span svg{flex:none;width:calc(24 * var(--ub-u));height:calc(24 * var(--ub-u));border-radius:50%;object-fit:cover;
  border:var(--ub-bw) solid var(--ub-ink);background:var(--ub-paper-2)}
#deck span.rare img{box-shadow:0 0 0 var(--ub-bw) var(--ub-gold)}
#deck span.legendary img{box-shadow:0 0 0 var(--ub-bw) var(--ub-gold),0 0 0 calc(4 * var(--ub-u)) var(--ub-ink)}
#deck span b{font-weight:inherit;overflow:hidden;text-overflow:ellipsis}
/* the crew roster (co-op): name plates, the apron colour as the dot only */
#crew{flex:none;display:flex;flex-direction:column;gap:calc(4 * var(--ub-u))}
#crew:empty{display:none}
#crew span{display:flex;align-items:center;gap:calc(6 * var(--ub-u));min-width:0;padding:calc(3 * var(--ub-u)) calc(8 * var(--ub-u));
  background:var(--ub-paper);color:var(--ub-ink);border:var(--ub-bw) solid var(--ub-ink);border-radius:var(--ub-r-sm);
  font:var(--ub-w-head) var(--ub-fs-5)/1.1 var(--ub-font-ui);white-space:nowrap;overflow:hidden}
#crew span i{flex:none;width:calc(12 * var(--ub-u));height:calc(12 * var(--ub-u));border-radius:50%;background:var(--cc);border:var(--ub-bw) solid var(--ub-ink)}
#crew span.me{background:var(--ub-ink);color:var(--ub-paper);box-shadow:0 0 0 var(--ub-bw) var(--cc)}
#crew span.off{background:var(--ub-paper-2);color:var(--ub-ink-2)}
#crew span.off i{background:none;border-color:var(--ub-gold);border-top-color:transparent}
#crew span.off em{font-style:normal;font-weight:var(--ub-w-label);color:var(--ub-ink-2)}
#crew span.back{animation:ubBack 1.2s var(--ub-ease-out)}
@keyframes ubBack{0%,40%{box-shadow:0 0 0 var(--ub-bw-2) var(--ub-go)}}
#crew span .cr,#crew span .ub-icon{width:calc(18 * var(--ub-u));height:calc(18 * var(--ub-u))}

/* name plates over the heads (co-op): paper, the apron colour as the dot; mine ink */
#pills .pl{gap:calc(5 * var(--ub-u));padding:calc(3 * var(--ub-u)) calc(9 * var(--ub-u));font:var(--ub-w-head) 13px/1.2 var(--ub-font-ui);
  color:var(--ub-ink);background:var(--ub-paper);border:2px solid var(--ub-ink);border-radius:6px;text-shadow:none;box-shadow:0 2px 0 var(--ub-ink)}
#pills .pl[data-c=gold],#pills .pl[data-c=green]{color:var(--ub-ink);text-shadow:none}
#pills .pl .dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--cc);border:2px solid var(--ub-ink)}
#pills .pl.me{font-size:15px;color:var(--ub-paper);background:var(--ub-ink);box-shadow:0 0 0 3px var(--cc),0 2px 0 var(--ub-ink)}
#pills .pl.me i{font-style:normal;font-weight:900}
#pills .pl.off{background:var(--ub-paper-2);color:var(--ub-ink-2)}

/* the dock: paper buttons, icon over a word, the count in the word's row */
#dock{position:absolute;z-index:70;display:grid;grid-template-columns:repeat(2,var(--ub-dock-w));gap:calc(8 * var(--ub-u));
  left:var(--cx);bottom:var(--ub-safe-bottom);transition:opacity var(--ub-t-mid) var(--ub-ease-out)}
#dock.off,#util.off{visibility:hidden;pointer-events:none;opacity:0}
.dk{-webkit-appearance:none;appearance:none;font-family:var(--ub-font-ui)}
.dk .t{white-space:nowrap}
.dk .s:empty{display:none}
.dk.press{transform:translateY(calc(3 * var(--ub-u)));box-shadow:var(--ub-shadow-press)}
.dk:focus-visible{outline:var(--ub-bw-2) solid var(--ub-info);outline-offset:var(--ub-bw-2)}
/* a skewer is ready: a green ring; one burns: the red ring and the pulse */
.dk.hot{box-shadow:0 0 0 var(--ub-bw-2) var(--ub-go),var(--ub-ledge)}
.dk.hot .ub-icon{animation:ubHop .5s var(--ub-ease-out) infinite alternate}
@keyframes ubHop{to{transform:translateY(calc(-3 * var(--ub-u))) scale(1.06)}}
.dk.warn{border-color:var(--ub-danger);box-shadow:0 0 0 var(--ub-bw) var(--ub-danger),var(--ub-ledge);animation:ub-pulse 500ms var(--ub-ease-out) infinite}
body.kb .dk .ub-dock__key{display:block}

/* shout, sound, swap: three glyph buttons at the left thumb */
#util{position:absolute;z-index:70;display:flex;align-items:flex-end;gap:calc(8 * var(--ub-u));
  left:var(--ub-safe-x);bottom:var(--ub-safe-bottom)}
body.lefty #util{left:auto;right:var(--ub-safe-x)}
#util .ub-btn--icon .ub-icon{width:calc(28 * var(--ub-u));height:calc(28 * var(--ub-u))}
.muteBtn .off{display:none}
body.muted .muteBtn .on{display:none}
body.muted .muteBtn .off{display:block}

/* the hint: a toast, not a strip */
#hint{position:absolute;left:50%;bottom:calc(var(--ub-safe-bottom) + var(--ub-sp-1));z-index:4;pointer-events:none;
  display:block;max-width:min(50vw,calc(440 * var(--ub-u)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translate(-50%,calc(10 * var(--ub-u)));transition:opacity var(--ub-t-fast) var(--ub-ease-in),transform var(--ub-t-fast) var(--ub-ease-in)}
#hint.on{opacity:1;transform:translate(-50%,0);transition:opacity var(--ub-t-mid) var(--ub-ease-out),transform var(--ub-t-mid) var(--ub-ease-pop)}
#hint.bad{--ub-toast-role:var(--ub-danger)}
#hint.good{--ub-toast-role:var(--ub-go)}

/* a word over the room where it happened */
#pop{position:absolute;left:calc(var(--wx) + var(--ww) / 2);top:calc(var(--wy) + var(--wh) * .34);z-index:5;transform:translate(-50%,-50%);
  font:var(--ub-w-display) var(--ub-fs-2)/1 var(--ub-font-ui);color:var(--ub-gold);white-space:nowrap;opacity:0;pointer-events:none;
  -webkit-text-stroke:calc(4 * var(--ub-u)) var(--ub-ink);paint-order:stroke fill;text-shadow:0 calc(3 * var(--ub-u)) 0 var(--ub-ink)}
#pop.bad{color:var(--ub-danger-on-dark)}
#pop.go{animation:ubPopup .9s var(--ub-ease-out) forwards}
@keyframes ubPopup{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
  30%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%)}}

/* the plate on the pass: a paper ticket with the same pictures as the orders (world px) */
#world.gl3d #plate{width:170px;margin:0 0 0 -85px;transform:translateY(-100%);align-items:flex-end}
#plate .pb{position:relative;display:flex;gap:2px;flex-wrap:wrap;justify-content:center;max-width:170px;padding:4px 8px 3px;
  background:var(--ub-receipt);border:3px solid var(--ub-ink);border-radius:9px;box-shadow:0 3px 0 var(--ub-ink),0 7px 9px rgba(0,0,0,.35);
  animation:ub-pop .22s var(--ub-ease-pop)}
#plate .pb::after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-7px;border:7px solid transparent;border-top:8px solid var(--ub-ink);border-bottom:0}
#plate .n{position:relative;display:inline-flex;align-items:center}
#plate .n .ub-icon{width:34px;height:34px}
#plate .n em{font:700 26px/1 var(--ub-font-num);font-style:normal;color:var(--ub-ink);direction:ltr;margin-inline-end:2px}

/* the party camera's edge chips draw the sprite now */
#edge .eg .ic .ub-icon{width:32px;height:32px;margin-top:-4px}
#edge .eg .held .ub-icon{display:block;width:100%;height:100%}

/* ============================================ the screens over the room ==== */
#dayOvl,#draftOvl,#runOvl{background:var(--ub-scrim);color:var(--ub-chalk);text-align:right;gap:0;
  padding:var(--ub-safe-top) var(--ub-safe-x) var(--ub-safe-bottom);animation:ubFade var(--ub-t-mid) var(--ub-ease-out) both}
#dayOvl > *,#draftOvl > *,#runOvl > *{zoom:normal}
/* fix round (readability): the menu column (left, RTL) of the draft and the run's end sits on a deeper
   scrim, the room still showing on the right; the words there get the chalk's ink ledge and a soft halo */
#draftOvl,#runOvl{background:linear-gradient(90deg,rgba(20,13,24,.8),rgba(20,13,24,.66) 38%,var(--ub-scrim) 58%)}
.dr-side .lede,#pityNote,.re-record{text-shadow:0 calc(2 * var(--ub-u)) 0 var(--ub-ink),0 0 calc(10 * var(--ub-u)) rgba(20,13,24,.9)}
@keyframes ubFade{from{opacity:0}}
.ub-chalk-text{color:var(--ub-chalk);text-shadow:0 calc(3 * var(--ub-u)) 0 var(--ub-ink)}

/* ------------------------------------------------------- day end (row 12) */
#dayTitle{position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-50%);text-align:center;pointer-events:none;
  color:var(--ub-chalk);-webkit-text-stroke:calc(5 * var(--ub-u)) var(--ub-ink);paint-order:stroke fill;text-shadow:0 calc(5 * var(--ub-u)) 0 var(--ub-ink);
  opacity:0;transition:opacity var(--ub-t-fast) var(--ub-ease-in)}
#dayOvl.beat1 #dayTitle{opacity:1;animation:ubTitleIn var(--ub-t-mid) var(--ub-ease-pop) both}
@keyframes ubTitleIn{from{opacity:0;transform:translateY(-50%) scale(1.5)}}
#dayOvl.fail #dayTitle{color:var(--ub-danger-on-dark)}
.dayWrap{display:grid;grid-template-columns:auto auto;align-items:end;justify-content:center;gap:calc(32 * var(--ub-u))}
#dayOvl.beat1 .dayWrap{visibility:hidden}
#dayOvl:not(.beat1) .dayWrap{animation:ub-enter var(--ub-t-mid) var(--ub-ease-pop) both}
.de-rc{width:calc(336 * var(--ub-u))}
.de-rc .ub-receipt__head .ub-logo{font-size:calc(30 * var(--ub-u))}
.de-mid{flex:1 1 auto;min-height:0;display:flex;gap:calc(12 * var(--ub-u));align-items:stretch;padding-top:calc(4 * var(--ub-u));overflow-y:auto;overscroll-behavior:contain}
.de-main{flex:1;min-width:0;display:flex;flex-direction:column}
.de-mid .ub-receipt__body{overflow:visible;padding-top:0}
.de-mid .ub-receipt__row{opacity:0}
.de-rc.rows-in .ub-receipt__row{animation:ub-enter var(--ub-t-mid) var(--ub-ease-pop) both;animation-delay:calc(var(--k,0) * var(--ub-t-stagger))}
.ub-receipt__row .ub-num--fine{color:var(--ub-danger-ink)}
/* the chef: the hero render, crowned when he is the employee of the day */
.de-chef{flex:none;width:calc(104 * var(--ub-u));display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--ub-u));text-align:center;
  padding-inline-end:calc(12 * var(--ub-u));border-inline-end:var(--ub-bw) dashed var(--ub-rule);box-sizing:content-box}
.de-pic{position:relative;width:calc(104 * var(--ub-u));height:calc(104 * var(--ub-u));border-radius:var(--ub-r-sm);overflow:hidden;
  background:radial-gradient(circle at 50% 42%,var(--ub-paper) 0 34%,transparent 35%),repeating-conic-gradient(from 0deg at 50% 46%,var(--ub-paper-2) 0 12deg,var(--ub-paper) 12deg 24deg);
  border:var(--ub-bw) solid var(--ub-ink)}
.de-pic img,.de-pic svg{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity var(--ub-t-fast)}
.de-pic img.in,.de-pic svg.in{opacity:1}
.de-pic .bust{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0}
.de-chef .ub-icon{position:absolute;top:calc(-14 * var(--ub-u));left:50%;width:calc(36 * var(--ub-u));height:calc(36 * var(--ub-u));transform:translateX(-50%) rotate(-8deg);z-index:2}
.de-chef .crownSlot{position:relative;width:100%;height:0}
#emp{display:flex;flex-direction:column;gap:calc(2 * var(--ub-u));line-height:1.2}
#emp.hidden{display:none}
#emp small{font:var(--ub-w-label) var(--ub-fs-5)/1.2 var(--ub-font-ui);color:var(--ub-ink-2)}
#emp b{font:var(--ub-w-head) var(--ub-fs-4)/1.1 var(--ub-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#emp em{font:var(--ub-w-body) var(--ub-fs-5)/1.25 var(--ub-font-ui);font-style:normal;color:var(--ub-ink-2);text-wrap:balance}
#emp.in{animation:ub-enter var(--ub-t-mid) var(--ub-ease-pop) both}
/* fix round (row 1): the stamp, turned -8deg, is 58u tall in a 52u slot; its 3u under the slot made the
   receipt's middle a scroll box that moved 4-5 px under a thumb. Lifted 4u (overflow upward over the dashed
   rule is not scrollable overflow), so the middle's scrollHeight equals its clientHeight (bot/mobile_test.py) */
.de-rc .ub-receipt__stamp .ub-stamp{opacity:0;position:relative;top:calc(-4 * var(--ub-u))}
.de-rc .ub-receipt__stamp .ub-stamp.is-in{opacity:.95}
/* the ledger and the one button, on the receipt's bottom line */
.de-left{display:flex;flex-direction:column;gap:calc(12 * var(--ub-u));align-items:stretch}
.de-ledger{width:calc(318 * var(--ub-u));padding:calc(12 * var(--ub-u)) calc(14 * var(--ub-u))}
.de-ledger .ub-paper__head{margin-bottom:calc(10 * var(--ub-u))}
.de-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(6 * var(--ub-u))}
.de-slot{height:calc(52 * var(--ub-u));border-radius:var(--ub-r-sm);background:var(--ub-paper-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3 * var(--ub-u))}
.de-slot b{font:var(--ub-w-head) var(--ub-fs-5)/1 var(--ub-font-ui);color:var(--ub-ink-2)}
.de-slot .ub-small{line-height:1}
.de-slot.done{background:var(--ub-receipt);box-shadow:inset 0 0 0 var(--ub-bw) var(--ub-ink)}
.de-slot.fell{background:var(--ub-receipt);box-shadow:inset 0 0 0 var(--ub-bw) var(--ub-danger)}
.de-slot.fell .ub-num{color:var(--ub-danger-ink)}
.de-slot.now{box-shadow:inset 0 0 0 var(--ub-bw) var(--ub-ink),0 0 0 var(--ub-bw-2) var(--ub-info);animation:ub-pop var(--ub-t-mid) .9s var(--ub-ease-pop) both}
.de-bank{display:flex;align-items:center;gap:calc(8 * var(--ub-u));margin-top:calc(10 * var(--ub-u));padding-top:calc(8 * var(--ub-u));border-top:var(--ub-bw-2) solid var(--ub-ink)}
.de-note{margin:calc(8 * var(--ub-u)) 0 0;font:var(--ub-w-body) var(--ub-fs-5)/1.3 var(--ub-font-ui);color:var(--ub-ink-2)}
#dayBtn .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}

/* ------------------------------------------------------------ draft (row 16) */
.dr{display:flex;align-items:center;justify-content:center;gap:calc(32 * var(--ub-u));width:100%;height:100%}
#draftRow{display:flex;gap:calc(16 * var(--ub-u));align-items:stretch;flex:none}
.card{position:relative;flex:none;width:calc(152 * var(--ub-u));height:calc(282 * var(--ub-u));max-height:var(--ub-panel-max-h);cursor:pointer;outline:none;
  pointer-events:auto;animation:ub-enter var(--ub-t-mid) var(--ub-ease-pop) both;animation-delay:calc(var(--i,0) * var(--ub-t-stagger));
  transition:transform var(--ub-t-fast) var(--ub-ease-pop)}
.card .face{position:absolute;inset:0;display:flex;flex-direction:column;gap:calc(5 * var(--ub-u));padding:calc(8 * var(--ub-u));
  background:var(--ub-paper);color:var(--ub-ink);border:var(--ub-bw) solid var(--ub-ink);border-radius:var(--ub-r);box-shadow:var(--ub-shadow);
  text-align:center;overflow:hidden;transition:box-shadow var(--ub-t-fast)}
.card .art{position:relative;flex:none;aspect-ratio:1/1;border-radius:var(--ub-r-sm);border:var(--ub-bw) solid var(--ub-ink);overflow:hidden;
  background:var(--ub-paper-2);display:grid;place-items:center}
.card .art .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .art .ub-icon{width:var(--ub-icon-l);height:var(--ub-icon-l)}
.card .rar{position:absolute;top:calc(14 * var(--ub-u));inset-inline-start:calc(14 * var(--ub-u));z-index:2}   /* §8 tag: no outline */
.card .cn{font:var(--ub-w-head) var(--ub-fs-3)/1.1 var(--ub-font-ui);margin-top:calc(2 * var(--ub-u))}
.card .ct{font:var(--ub-w-body) var(--ub-fs-4)/1.3 var(--ub-font-ui);color:var(--ub-ink-2)}
.card .cf{margin-top:auto;padding-top:calc(5 * var(--ub-u));border-top:var(--ub-bw) dashed var(--ub-rule);
  font:var(--ub-w-label) var(--ub-fs-5)/1.3 var(--ub-font-ui);color:var(--ub-ink-2);text-wrap:balance}
.card .cf b{color:var(--ub-ink);font-weight:var(--ub-w-display)}
.card.legendary .face{box-shadow:inset 0 0 0 calc(4 * var(--ub-u)) var(--ub-gold),var(--ub-shadow)}
.card:hover:not(.is-sel){transform:translateY(calc(-4 * var(--ub-u)))}
.card.is-sel{transform:translateY(calc(-12 * var(--ub-u))) scale(1.04);z-index:2}
.card.is-sel .face{box-shadow:0 0 0 var(--ub-bw-2) var(--ub-info),var(--ub-shadow)}
.card.is-sel.legendary .face{box-shadow:inset 0 0 0 calc(4 * var(--ub-u)) var(--ub-gold),0 0 0 var(--ub-bw-2) var(--ub-info),var(--ub-shadow)}
.card .chk{position:absolute;top:calc(-10 * var(--ub-u));inset-inline-end:calc(-10 * var(--ub-u));z-index:3;display:none;
  width:calc(32 * var(--ub-u));height:calc(32 * var(--ub-u));border-radius:50%;place-items:center;
  background:var(--ub-info);color:var(--ub-on-info);border:var(--ub-bw) solid var(--ub-ink)}
.card .chk .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}
.card.is-sel .chk{display:grid;animation:ub-pop var(--ub-t-fast) var(--ub-ease-pop)}
.card:focus-visible .face{outline:var(--ub-bw-2) solid var(--ub-info);outline-offset:var(--ub-bw-2)}
.dr-side{flex:none;display:flex;flex-direction:column;gap:calc(12 * var(--ub-u));width:calc(220 * var(--ub-u));align-items:stretch}
.dr-side .ub-heading,.dr-side .lede{margin:0}
.dr-side .lede{color:var(--ub-chalk-2)}
.dr-more{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--ub-u))}
.dr-more .ub-btn--secondary{padding:0 var(--ub-sp-3)}
.dr-more .ub-btn--text{color:var(--ub-chalk)}
#rerollN{min-width:1ch}
#pityNote{margin:0;color:var(--ub-chalk-2)}
#pickBtn .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}

/* --------------------------------------------------- run end + share (row 13) */
.re{display:flex;align-items:center;justify-content:center;gap:calc(32 * var(--ub-u));width:100%;height:100%}
/* the share card: what «שתפו» sends, drawn the same in the page */
.re-card{position:relative;flex:none;height:min(var(--ub-panel-max-h),calc(430 * var(--ub-u)));aspect-ratio:3/4;
  display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--ub-u));padding:calc(12 * var(--ub-u)) calc(14 * var(--ub-u)) calc(12 * var(--ub-u));
  background:repeating-conic-gradient(from 0deg at 50% 52%,var(--ub-paper) 0 10deg,#FBEBCB 10deg 20deg);color:var(--ub-ink);
  border:var(--ub-bw) solid var(--ub-ink);border-radius:var(--ub-r);box-shadow:var(--ub-shadow);overflow:hidden;
  animation:ubCardIn 380ms var(--ub-ease-pop) both}
@keyframes ubCardIn{from{opacity:0;transform:translateY(calc(16 * var(--ub-u))) rotate(-2deg) scale(.96)}}
.re-card.fell{background:repeating-conic-gradient(from 0deg at 50% 52%,#EFE6D8 0 10deg,#E2D6C3 10deg 20deg)}
.re-card .ub-logo{font-size:calc(40 * var(--ub-u));margin-top:calc(4 * var(--ub-u))}
.re-card .re-slogan{margin-top:calc(-2 * var(--ub-u))}
.re-pic{position:relative;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
.re-pic img{max-height:100%;max-width:100%;object-fit:contain;opacity:0;transition:opacity var(--ub-t-mid)}
.re-pic img.in{opacity:1}
.re-pic .bust{width:auto;height:70%;aspect-ratio:1;border-radius:50%}
.re-pic::after{content:"";position:absolute;left:18%;right:18%;bottom:-2%;height:9%;border-radius:50%;background:rgba(58,35,23,.22);z-index:-1}
.re-total{display:flex;align-items:baseline;gap:calc(6 * var(--ub-u))}
.re-total .ub-num--xl{line-height:.9}
.re-days{display:flex;gap:calc(4 * var(--ub-u))}
.re-days i{width:calc(22 * var(--ub-u));height:calc(10 * var(--ub-u));border-radius:var(--ub-r-pill);background:var(--ub-paper-2);border:var(--ub-bw) solid var(--ub-mute-ink)}
.re-days i.done{background:var(--ub-go);border-color:var(--ub-ink)}
.re-days i.fell{background:var(--ub-danger);border-color:var(--ub-ink)}
.re-days i.best{background:var(--ub-gold);border-color:var(--ub-ink)}
.re-foot{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:calc(6 * var(--ub-u))}
.re-side{flex:none;display:flex;flex-direction:column;gap:calc(12 * var(--ub-u));width:calc(300 * var(--ub-u));max-height:var(--ub-panel-max-h);align-items:stretch}
#runTitle{margin:0}
.re-record{display:flex;align-items:baseline;flex-wrap:wrap;gap:calc(6 * var(--ub-u));margin:0;color:var(--ub-chalk)}
.re-record .ub-icon{align-self:center}
.re-record .ub-num{color:var(--ub-gold)}
.re-more{display:flex;gap:calc(8 * var(--ub-u))}
.re-more .ub-btn{flex:1;padding:0 var(--ub-sp-3)}
#shareCardBtn .ub-icon,#runBtn .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}

/* the personal report: a folded strip on the run screen that opens as a sheet */
.blame{position:relative;display:flex;flex-direction:column;gap:calc(8 * var(--ub-u));text-align:right;padding:0;cursor:pointer;
  background:var(--ub-paper);color:var(--ub-ink);border:var(--ub-bw) solid var(--ub-ink);border-radius:var(--ub-r);box-shadow:var(--ub-ledge)}
.blame .bh{display:flex;align-items:center;gap:calc(8 * var(--ub-u));min-height:var(--ub-hit);padding:calc(6 * var(--ub-u)) calc(10 * var(--ub-u));
  border:0;background:none;width:100%;font:inherit;color:inherit;text-align:right;cursor:pointer}
.blame .bh > .ub-icon{flex:none}
.blame .bh .tt{display:flex;flex-direction:column;min-width:0;flex:1;gap:calc(2 * var(--ub-u))}
.blame .bh .tt b{font:var(--ub-w-head) var(--ub-fs-4)/1.1 var(--ub-font-ui)}
.blame .bh .tt span{font:var(--ub-w-label) var(--ub-fs-5)/1.2 var(--ub-font-ui);color:var(--ub-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blame .bh .go{flex:none;width:var(--ub-icon-s);height:var(--ub-icon-s)}
.blame .bh .x{display:none}
.blame .crewRow,.blame .aw,.blame .hl,.blame .bf{display:none}
/* fix round (review: a fifth button recipe on the run's end): folded, the report is a .ub-btn--secondary,
   brown with chalk words, the clipboard, its title and the next glyph; its subtitle lives in the sheet */
.blame:not(.is-open){background:var(--ub-secondary);color:var(--ub-chalk)}
.blame:not(.is-open) .bh .tt span{display:none}
.blame:not(.is-open) .bh .tt b{font:var(--ub-w-head) var(--ub-fs-4)/1 var(--ub-font-ui)}
/* open: a paper sheet over the scrim */
.blame.is-open{position:fixed;z-index:var(--ub-z-modal);left:50%;top:50%;translate:-50% -50%;cursor:default;
  width:min(calc(100vw - 2 * var(--ub-safe-x)),calc(440 * var(--ub-u)));max-height:var(--ub-panel-max-h);padding-bottom:calc(10 * var(--ub-u));
  box-shadow:0 0 0 100vmax var(--ub-scrim),var(--ub-shadow);animation:ub-enter var(--ub-t-mid) var(--ub-ease-pop) both}
.blame.is-open .bh{border-bottom:var(--ub-bw) solid var(--ub-ink);cursor:default}
.blame.is-open .bh .go{display:none}
.blame.is-open .bh .x{display:inline-flex;flex:none}
.blame.is-open .crewRow{display:flex}
.blame.is-open .hl{display:block}
.blame.is-open .aw{display:flex}
.blame.is-open .bf{display:flex}
.blame .crewRow{justify-content:center;gap:calc(12 * var(--ub-u));padding:calc(6 * var(--ub-u)) calc(10 * var(--ub-u)) 0}
.blame .crewRow:empty{display:none}
.blame .cm{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(3 * var(--ub-u));width:calc(64 * var(--ub-u))}
.blame .cm b{max-width:100%;font:var(--ub-w-head) var(--ub-fs-5)/1.1 var(--ub-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blame .cm .crn{position:absolute;top:calc(-12 * var(--ub-u));left:50%;transform:translateX(-50%) rotate(-8deg);z-index:2}
.blame .hl{padding:0 calc(12 * var(--ub-u));font:var(--ub-w-head) var(--ub-fs-3)/1.15 var(--ub-font-ui);text-align:center}
.blame .hl:empty{display:none}
.blame .aw{flex-direction:column;gap:calc(4 * var(--ub-u));padding:0 calc(10 * var(--ub-u));overflow-y:auto;min-height:0;overscroll-behavior:contain}
.blame .ar{position:relative;display:flex;align-items:center;gap:calc(8 * var(--ub-u));padding:calc(5 * var(--ub-u)) calc(10 * var(--ub-u));
  background:var(--ub-paper-2);border-radius:var(--ub-r-sm);animation:ub-enter var(--ub-t-mid) var(--ub-ease-pop) both;
  animation-delay:calc(var(--k,0) * var(--ub-t-stagger))}
.blame .ar > .ub-icon,.blame .ar .ic{flex:none;width:var(--ub-icon-m);height:var(--ub-icon-m);display:grid;place-items:center}
.blame .ar .ic .mi,.blame .ar .ic svg{width:100%;height:100%}
.blame .ar .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(1 * var(--ub-u))}
.blame .ar .nm b{font:var(--ub-w-head) var(--ub-fs-4)/1.15 var(--ub-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blame .ar .nm b bdi{color:var(--ub-ink-2)}
.blame .ar .nm small{font:var(--ub-w-label) var(--ub-fs-5)/1.2 var(--ub-font-ui);color:var(--ub-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blame .ar .tie{margin-inline-start:calc(4 * var(--ub-u))}
.blame .ar .who{display:flex;flex:none}
.blame .ar .who .ub-avatar{--ub-avatar:calc(28 * var(--ub-u))}
.blame .ar .who .ub-avatar + .ub-avatar{margin-inline-start:calc(-8 * var(--ub-u))}
.blame .ar .n{flex:none;font-size:var(--ub-fs-3)}
.blame .ar .stampSlot{flex:none;width:calc(76 * var(--ub-u));display:grid;place-items:center}
.blame .ar .stampSlot .ub-stamp{font-size:var(--ub-fs-4);padding:calc(3 * var(--ub-u)) calc(8 * var(--ub-u))}
.blame .none{font:var(--ub-w-label) var(--ub-fs-4)/1.3 var(--ub-font-ui);color:var(--ub-ink-2);text-align:center;padding:calc(10 * var(--ub-u)) 0}
.blame .bf{justify-content:flex-start;padding:calc(4 * var(--ub-u)) calc(10 * var(--ub-u)) 0}
.blame .ub-btn--secondary,.blame .ub-btn--icon{background:var(--ub-paper-2);color:var(--ub-ink)}
.blame .bf .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}
.blame.many .ar .nm small{display:none}

/* ================================================== phone held sideways ==== */
/* three dock rows (day 4 on): 48u buttons with 24u pictures, so the hands and the cards
   still fit above and the act row over the dock stays in the thumb's reach (iPad mini) */
#dock.rows3 .dk{height:max(44px,calc(48 * var(--ub-u)));padding-top:calc(3 * var(--ub-u));padding-bottom:calc(3 * var(--ub-u))}
#dock.rows3 .dk > .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}
#dock.rows3{gap:calc(6 * var(--ub-u))}
@media (max-height:470px){
  #hands{padding:calc(4 * var(--ub-u))}
  #handSlots i{height:calc(52 * var(--ub-u))}
  #handSlots i .ub-icon{width:var(--ub-icon-s);height:var(--ub-icon-s)}
  #handSlots .ub-empty{min-height:calc(52 * var(--ub-u))}
  #console #crew{display:none}            /* the name plates over the heads say who is who on a phone */
  #deck span{padding:0;border-radius:50%;border:0;background:none}
  #deck span b{display:none}
  #deck{flex-wrap:nowrap}
  #deck span + span{margin-inline-start:calc(-10 * var(--ub-u))}
  .card{height:min(calc(282 * var(--ub-u)),var(--ub-panel-max-h))}
}
/* narrow phones (iPhone SE): the menu column and the cards get narrower, never the type */
@media (max-width:760px){
  .dr,.re,.dayWrap{gap:calc(16 * var(--ub-u))}
  .dr-side{width:calc(168 * var(--ub-u))}
  .card{width:calc(124 * var(--ub-u))}
  .de-rc{width:calc(300 * var(--ub-u))}
  .de-ledger{width:calc(250 * var(--ub-u))}
  .re-side{width:calc(240 * var(--ub-u))}
  #draftOvl,#dayOvl,#runOvl{overflow-y:auto;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  #dayOvl.beat1 .dayWrap{visibility:visible}
  .de-mid .ub-receipt__row{opacity:1}
}