/* Caesar - the black pug, the shop's face (O121; the owner approved him on 8 Nov 2026, docs/CAESAR_MASCOT_BRIEF.md).
   ONE component (.caesar) and ONE token set (below): each pose is a token, so swapping a drawing is a one-line change
   here. The cuts live in web/art/mascot (scripts/caesar_cut.py) and he is drawn as a background, so a missing file
   leaves an empty space - never a broken-image box. Existing tokens only; no type of his own.
   His rules, kept by the selectors at the end of this file:
   - one Caesar per screen (the footer's head steps aside when the page has its own);
   - never in a view that holds a money step: the account page (berries checkout), the ledger (the top-up form), the
     pack page (the buy box) and the vault's cards view (postage in dollars, sell back) - and he steps away while any
     dialog is open, since a confirm is often money;
   - never over a card or a price: the reveal shows him only before the card turns over;
   - none on the race (the sheet has no running pose, and a standing one is not faked into it). */
:root{
  --caesar-head:url("/art/mascot/head-128.webp");
  --caesar-empty:url("/art/mascot/stand-480.webp"); /* the front view, standing in for a sitting pose (owner, 8 Nov) */
  --caesar-look:url("/art/mascot/look-640.webp");   /* three-quarter, looking to his right (the viewer's left) */
  --caesar-watch:url("/art/mascot/watch-640.webp"); /* side view, looking to the viewer's right */
}
.caesar{display:block;flex:none;box-sizing:border-box;width:auto;height:var(--caesar-h,120px);aspect-ratio:var(--caesar-ar,1);
  background:var(--caesar-pose,var(--caesar-head)) center bottom/contain no-repeat;pointer-events:none;user-select:none}
.caesar--head{--caesar-pose:var(--caesar-head);--caesar-ar:1}
.caesar--empty{--caesar-pose:var(--caesar-empty);--caesar-ar:300/480}
.caesar--look{--caesar-pose:var(--caesar-look);--caesar-ar:344/640}
.caesar--watch{--caesar-pose:var(--caesar-watch);--caesar-ar:386/640}

/* ---- the footer: head-only, low and small, a brand anchor on the quiet screens ---- */
.caesar--foot{display:none;--caesar-h:26px;margin:-8px 10px -8px 0;vertical-align:middle}
body:is([data-screen="qa"],[data-screen="support"],[data-screen="fair"],[data-screen="market"]) .caesar--foot{display:inline-block}
body:has(main .caesar) .caesar--foot{display:none}

/* ---- empty states: "nothing here yet", softened (the binder; collection.js) ---- */
.ct-empty>.caesar{--caesar-h:128px}
.ct-empty-hero{display:flex;align-items:flex-end;justify-content:center;gap:18px}
.ct-empty-hero>.caesar{--caesar-h:132px}

/* ---- the 404 (screen-missing.html): a dead end, made friendly ---- */
.page-head.missing>div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,3vw,32px);align-items:center}
.page-head.missing>div:first-child>.caesar{grid-row:1/span 3;--caesar-h:clamp(150px,22vw,210px)}
@media(max-width:560px){.page-head.missing>div:first-child>.caesar{--caesar-h:120px}}

/* ---- home: the shop window - three-quarter, at its right edge, looking into the packs. Wide screens only (below
   1100 px the window has no room beside its art); the slides give up the strip he stands in, left of the next-slide
   arrow, so whatever a slide shows - a pack, a fan of cards, a price - is never under him ---- */
.sw-caesar{display:none}
@media(min-width:1100px){
  .shop-window{--caesar-h:calc(clamp(300px,26vw,360px) * .8);--sw-caesar-r:70px}
  .shop-window .sw-caesar{display:block;position:absolute;z-index:3;right:var(--sw-caesar-r);bottom:1px}
  .shop-window .sw-slide{padding-right:calc(var(--sw-caesar-r) + var(--caesar-h) * 344 / 640 + 24px)}
  /* the slide dots centre in the same narrower width, so the pause button stays clear of the pack */
  .shop-window .sw-bar{right:calc(var(--sw-caesar-r) + var(--caesar-h) * 344 / 640 + 24px)}
}

/* ---- the reveal (theatre.html): the waiting beat - side view, left of the pack, watching it from the entrance to
   the last breath; he fades before the card turns over, so the card, its value plate and "Open another" are never
   near him. Inside the floor, so he keeps its size in a run and on every screen; from 900 px only, where the stage
   has room beside the card ---- */
.t-floor>.t-caesar{display:none}
@media(min-width:900px){
  .t-floor>.t-caesar{display:block;position:absolute;z-index:0;right:calc(100% + clamp(20px,3.2vw,52px));bottom:0;--caesar-h:74%;
    opacity:0;transition:opacity .35s var(--ease-out)}
  .theatre:is([data-stage="enter"],[data-stage="anticipation"],[data-stage="tension"],[data-stage="windup"],[data-stage="tear"],[data-stage="rise"],[data-stage="climb"],[data-stage="fakeout"],[data-stage="cock"],[data-stage="breath"]) .t-floor>.t-caesar{opacity:1}
  .theatre:is(.is-settled,.is-board) .t-floor>.t-caesar{opacity:0}
}
/* while the reveal is up, it is the only Caesar on the screen */
body:has(#reveal:not([hidden])) main .caesar{visibility:hidden}

/* ---- rewards (screen-rewards.html): the reward-giver - three-quarter, at the right of the page's head, looking over
   its boxes (the sheet has no pose holding a chest); in the head, so no box, ticket or prize is ever under him ---- */
.rw-head>.rw-caesar{margin-left:auto;--caesar-h:132px}
@media(max-width:560px){.rw-head>.rw-caesar{--caesar-h:96px}}

/* ---- his rules ---- */
body:is([data-screen="account"],[data-screen="ledger"],[data-screen="race"]) .caesar{display:none}
body[data-screen="vault"] #vault .caesar{display:none}
body:has(dialog[open]) .caesar{visibility:hidden}