/* ---------- game ---------- */
#scr-game{padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}
.ios-app #scr-game{padding-top:calc(env(safe-area-inset-top) + 28px)} .ios-bar #scr-game{padding-top:28px} .ios-short #scr-game{padding-bottom:22px}
/* a match never scrolls: everything is sized to fit (layout, fitGame) */
#scr-game{overscroll-behavior:none}
#scr-game.gscroll{overflow-y:auto} /* only when even the smallest cards don't fit (fitGame) */
.hud{display:flex;align-items:center;gap:8px;width:100%;max-width:1240px;height:52px;flex:none;position:relative}
/* the main menu's logo, small */
.wordmark{display:flex;align-items:center;gap:10px;color:var(--text);flex:none;margin-right:auto}
.wordmark .wm-em{width:34px;height:34px;flex:none}
.wordmark .wm-word{height:15px;width:auto}
@media (max-width:319px){.wordmark .wm-word{display:none}} /* a tiny or zoomed-in phone: the emblem alone, so the buttons fit */
/* the turn pill (landscape only), dead centre */
.turn{display:none}
body.land .turn{display:flex;position:absolute;left:50%;transform:translateX(-50%);justify-content:center}
body.land .ttag.on{display:none}
#turnTxt{font:700 15px var(--display);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px}
.timer:not(.off)+#turnTxt{padding-left:0}
.timer{position:relative;width:32px;height:32px;flex:none;--tc:var(--accent)}
.timer.off{display:none}
.timer svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.timer circle{fill:none;stroke-width:4}
.timer .trk{stroke:rgba(var(--tint),.12)}
.timer .prog{stroke:var(--tc);stroke-linecap:round;stroke-dasharray:106.8;stroke-dashoffset:0;transition:stroke .3s}
.timer span{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font:800 12px/1 var(--display);color:var(--text)}
.timer.bank span{font-size:9.5px;letter-spacing:-.02em}
.timer.warn{--tc:var(--warn)}
.timer.crit{--tc:var(--crit);animation:tpulse 1s ease-in-out infinite}
.timer.crit span{color:var(--crit)}
@keyframes tpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (min-width:900px){
  .pill{padding-right:20px} #turnTxt{font-size:16px}
  .timer{width:36px;height:36px}
}
.pill{display:flex;align-items:center;gap:8px;min-height:40px;max-width:100%;padding:4px 16px 4px 4px;border-radius:999px;background:var(--surf2);border:1px solid var(--line2);
  box-shadow:0 6px 16px -8px rgba(var(--sh),calc(.8*var(--shk)))}
.tbar{width:100%;max-width:1240px;height:3px;border-radius:2px;background:rgba(var(--tint),.07);overflow:hidden;flex:none;margin:3px 0 4px;transition:opacity .25s}
.tbar.off{opacity:0}
.tbar i{display:block;height:100%;width:100%;transform-origin:left center;background:var(--accent);will-change:transform}
.tbar.warn i{background:var(--warn)}
.tbar.crit i{background:var(--crit);animation:tblink .5s ease-in-out infinite alternate}
@keyframes tblink{to{opacity:.5}}
.rulebar{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;flex:none;min-height:20px;max-width:1240px}
.rulebar span{font:500 11.5px/18px var(--body);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:0 7px}
.rulebar span.sd{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 50%,transparent)}
.hand.chaos .card:not(.forced){opacity:.45;filter:saturate(.5)}
.card.forced{box-shadow:0 0 0 2px var(--hot),0 0 22px var(--accent-glow)}
.rulebar span.ser{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.arena{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:4px}
.side{display:flex;flex-direction:column;align-items:center;gap:6px}
.pname{display:flex;align-items:center;gap:10px;height:40px;width:min(100%,calc(var(--hc)*5 + 24px));padding:0 4px}
.av{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:800 15px var(--display);color:#fff;flex:none;transition:box-shadow .25s}
.side.me .av{background:linear-gradient(160deg,var(--me1,var(--blue1)),var(--me2,var(--blue2)))}
.side.opp .av{background:linear-gradient(160deg,var(--red1),var(--red2))}
.av.art{font:400 19px/1 var(--body)}
.pname .who{flex:1;min-width:0;font:600 14px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.pname .sc{font:900 28px/1 var(--display);min-width:1.1em;text-align:right;text-shadow:0 0 .45em currentColor} /* the same glow as the big landscape scores */
.side.me .sc{color:var(--me-ink,var(--blue-ink))} .side.opp .sc{color:var(--red-ink)}
.side.active .av{box-shadow:0 0 0 2px var(--bg1),0 0 0 4px var(--hot)}
.side.crit .av{box-shadow:0 0 0 2px var(--bg1),0 0 0 4px var(--crit)}
.side.crit .who{color:var(--crit)}
.pname .tag{font:700 9.5px/1 var(--body);letter-spacing:.06em;color:var(--accent-ink);border:1px solid var(--line2);border-radius:4px;padding:3px 5px;margin-left:6px;vertical-align:2px}
.hand{display:flex;gap:5px;justify-content:center;align-items:center;min-height:calc(var(--hc)*1.2 + 6px);min-width:calc(var(--hc)*5)}
.hand .card{font-size:calc(var(--hc)/5);transition:transform .28s var(--spring),box-shadow .2s}
.hand .card.play{cursor:grab;touch-action:none}
.hand .card.sel{box-shadow:inset 0 0 0 .05em rgba(255,255,255,.35),0 0 0 .1em var(--hot),0 .5em 1.2em -.3em var(--hot-glow)}
.side.me .hand .card.sel{transform:translateY(-16%)}
.side.opp .hand .card.sel{transform:translateY(16%)}
@media (hover:hover){.side.me .hand .card.play:not(.sel):hover{transform:translateY(-7%)}}
.hand .card.dragging{opacity:.25}
body.nohn .hand .nm{display:none}
body.nobn .board .nm{display:none}

.board{display:grid;grid-template-columns:repeat(3,var(--cell));gap:5px;padding:7px;border-radius:20px;flex:none;
  background:var(--board);border:1px solid var(--line2);
  box-shadow:0 24px 60px -16px rgba(var(--sh),calc(.9*var(--shk))),inset 0 1px 0 rgba(var(--tint),.05);transition:border-color .3s,box-shadow .3s}
.board.crit{border-color:var(--crit);box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 25%,transparent),0 24px 60px -16px rgba(var(--sh),calc(.9*var(--shk)))}
.cell{width:var(--cell);height:calc(var(--cell)*1.2);border-radius:12px;position:relative;background:var(--cell-bg);
  box-shadow:inset 0 2px 10px rgba(var(--sh),calc(.85*var(--shk)));border:1px solid var(--line);transition:box-shadow .2s,border-color .2s}
.cell .card{font-size:calc(var(--cell)/5);position:absolute;left:-1px;top:-1px}
.cell .eicon{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:calc(var(--cell)*.32);opacity:.5}
.cell.hot{border-color:color-mix(in srgb,var(--hot) 55%,transparent);box-shadow:inset 0 0 16px color-mix(in srgb,var(--hot) 22%,transparent);cursor:pointer}
.cell.over{border-color:var(--hot);box-shadow:inset 0 0 24px color-mix(in srgb,var(--hot) 40%,transparent)}
.ghost{position:fixed;z-index:var(--z-ghost);pointer-events:none;transform:translate(-50%,-55%) scale(1.06) rotate(-4deg);box-shadow:0 1.2em 2.4em rgba(var(--sh),calc(.8*var(--shk)+.2))!important}
/* a card flying between places (helpers.js fly): above popups, so a card can fly out of one */
.flyer{position:fixed;z-index:calc(var(--z-modal) + 1);margin:0;pointer-events:none;will-change:transform;transform-origin:50% 50%}
.flyer.lifted{box-shadow:0 1.2em 2em -.6em rgba(0,0,0,.7)}
.card.hold{visibility:hidden}

body.land .arena{flex-direction:row;justify-content:center;gap:max(16px,calc(3.2vw / var(--ui)))}
/* each column is as tall as the board (3 cells, the gaps, padding and border): the name row stays pinned
   level with the board's bottom edge while the cards, centred in the room above it, get fewer */
body.land .side{justify-content:center;align-self:center;min-height:calc(var(--cell) * 3.6 + 26px)}
body.land .side .hand{flex:1;justify-content:center}
/* landscape: each player's name row sits under their cards, with a big score that faces the board */
body.land .side.opp{flex-direction:column-reverse}
body.land .pname{width:auto;min-width:170px;max-width:240px;height:auto;min-height:84px}
body.land .pname .sc{font-size:81px;min-width:.7em;text-shadow:0 0 28px currentColor}
body.land .side.me .pname .sc{order:-1;margin:0 auto 0 0;text-align:left}
/* a short screen (a small phone in its browser, or one held sideways): a slimmer hud and name rows, a smaller big score
   (layout in game.js counts on these sizes) */
body.gshort .hud{height:44px}
body.gshort:not(.land) .pname{height:32px}
body.gshort.land .pname{min-height:50px}
body.gshort.land .pname .sc{font-size:44px;text-shadow:0 0 16px currentColor}
body.land .hand{flex-direction:column;gap:0;min-width:calc(var(--hc) + 20px);min-height:0;padding:calc(var(--hc)*.16) 0}
body.land .hand .card+.card{margin-top:calc(var(--hc) * -0.62)}
/* the picked card slides out and the stack opens around it: the cards above it (and it) move up, the ones
   below move down. It stays under the next card, so that one is still easy to tap. The hand's padding
   keeps room for this, so nothing moves into the name row */
body.land .side.me .hand .card,body.land .side.opp .hand .card{transform:translate(var(--dx,0),var(--dy,0))}
body.land .side.me .hand .card.sel{--dx:-22%}
body.land .side.opp .hand .card.sel{--dx:22%}
/* (two rules: a browser without :has() drops a whole rule that uses it, and the picked card must still move) */
body.land .hand .card.sel{--dy:calc(var(--hc) * -.16)}
body.land .hand .card:has(~ .card.sel){--dy:calc(var(--hc) * -.16)}
body.land .hand .card.sel ~ .card{--dy:calc(var(--hc) * .16)}
@media (hover:hover){body.land .side.me .hand .card.play:not(.sel):hover{--dx:-9%;transform:translate(var(--dx),var(--dy,0))}}
/* PC (a wide window with a mouse, layout in game.js): like 4-player chess. The board in the middle, each hand
   touching its edge and as wide as the board, and each player in the corner on their own right: the top player's
   is top-left, yours bottom-right. A corner has the big score by the cards, the name and avatar, and the clock */
body.pc .turn{display:flex;position:absolute;left:50%;transform:translateX(-50%);justify-content:center}
body.pc .pill .timer,body.pc .ttag.on{display:none}
body.pc .timer:not(.off)+#turnTxt{padding-left:12px}
body.pc .arena{display:grid;grid-template-columns:minmax(var(--t),1fr) auto minmax(var(--t),1fr);grid-template-rows:var(--t) auto var(--t);align-content:center;gap:8px 12px}
body.pc .side{display:contents}
body.pc #handTop{grid-area:1/2}
body.pc #board{grid-area:2/2}
body.pc #handBot{grid-area:3/2}
body.pc .hand{width:calc(var(--cell) * 3 + 26px);min-width:0}
/* a corner fits in its hand row's height (--t, game.js layout), never reaching past the board's edge:
   three rows (score, name and avatar, clock), the score at the end of the player's own cards */
body.pc .pname{display:grid;width:auto;height:var(--t);box-sizing:border-box;min-width:0;gap:3px 8px;padding:0;align-items:center;align-content:space-between}
body.pc #sideTop .pname{grid-area:1/1;justify-self:end;justify-items:end;grid-template-areas:"sc sc" "who av" "tm tm"}
body.pc #sideBot .pname{grid-area:3/3;justify-self:start;justify-items:start;grid-template-areas:"tm tm tm" "av who emb" "sc sc sc"}
body.pc .pname .av{grid-area:av;width:calc(var(--t) * .27);height:calc(var(--t) * .27);border-radius:7px;font-size:calc(var(--t) * .14)}
body.pc .pname .av.art{font-size:calc(var(--t) * .18)}
body.pc .pname .who{grid-area:who;max-width:180px;font-size:13.5px}
body.pc #btnEmote{grid-area:emb;width:calc(var(--t) * .27);height:calc(var(--t) * .27);border-radius:7px}
body.pc #btnEmote svg{width:60%;height:60%}
body.pc .pname .sc{grid-area:sc;margin:0;min-width:0;font-size:calc(var(--t) * .36);line-height:.9;text-shadow:0 0 18px currentColor}
body.pc .side.active .av,body.pc .side.crit .av{box-shadow:0 0 0 2px var(--bg1),0 0 0 3px var(--hot)}
body.pc .ptm{grid-area:tm}
/* the clock, like chess.com's: the player whose turn it is counts down, the other shows a full turn, faded */
.ptm{display:none}
body.pc .ptm:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:110px;box-sizing:border-box;padding:3px 10px;border-radius:7px;
  color:#fff;font:800 calc(var(--t) * .17)/1.15 var(--display);font-variant-numeric:tabular-nums;transition:opacity .25s,background .25s}
.ptm svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.side.me .ptm{background:linear-gradient(160deg,var(--me1,var(--blue1)),var(--me2,var(--blue2)))}
.side.opp .ptm{background:linear-gradient(160deg,var(--red1),var(--red2))}
.ptm.idle{opacity:.4}
/* a clock that never runs (the CPU's, or with no turn timer): just the box */
.ptm.none svg{visibility:hidden}
.side.crit .ptm{background:var(--crit)}
/* a score that changes gives a little pop */
.pname .sc.pop{animation:scPop .45s var(--spring)}
@keyframes scPop{40%{transform:scale(1.3)}}
/* ---------- banners ---------- */
#banners{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:var(--z-banner);display:grid;place-items:center}
.banner{grid-area:1/1;display:grid;place-items:center}
.banner span{font:900 clamp(52px,16vw,136px)/1 var(--display);font-stretch:110%;font-style:italic;text-transform:uppercase;letter-spacing:.01em;padding:0 .14em;
  /* too wide for a phone ("Sudden Death!", a long name): wrap to two lines; the gradient repeats every line (1em tall) */
  max-width:calc(100vw - 16px);text-align:center;text-wrap:balance;overflow-wrap:anywhere;background-size:100% 1em;
  background-image:linear-gradient(180deg,#fff 0%,#EDE6FF 34%,#B894FF 62%,#6A2BAE 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #1a0c3a) drop-shadow(0 0 18px rgba(0,0,0,.6));animation:pop 1.05s ease-out forwards}
.banner.small span{font-size:clamp(28px,8vw,56px)}
.banner.sd span{background-image:linear-gradient(180deg,#fff 0%,#ffb0b0 40%,#d23b3b 70%,#5a0c0c 100%);-webkit-background-clip:text;background-clip:text}
@keyframes pop{0%{transform:scale(.2) rotate(-6deg);opacity:0}18%{transform:scale(1.16) rotate(1deg);opacity:1}32%{transform:scale(1) rotate(0)}78%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.1)}}

/* ---------- dialogs ---------- */
#modal,#how,#away{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(var(--sh),var(--dim));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#modal{z-index:var(--z-modal)} #how{z-index:var(--z-how)} #away{z-index:var(--z-away)}
#modal.on,#how.on,#away.on{display:flex}
.mbox,.hbox{background:linear-gradient(170deg,var(--surf2),var(--surf) 62%);border:1px solid var(--line2);border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px rgba(var(--sh),calc(.8*var(--shk)));animation:mIn .34s var(--spring)}
.mbox{width:100%;max-width:460px;max-height:100%;max-height:calc(100dvh / var(--ui) - 32px);overflow-y:auto;padding:24px 20px 20px;text-align:center}
@keyframes mIn{from{transform:translateY(12px) scale(.95);opacity:0}}
.mbox .kick{font:600 12.5px var(--body);color:var(--accent-ink)}
.mbox h2{margin:2px 0 6px;font:900 36px/1.05 var(--display);font-stretch:112%;text-transform:uppercase;text-wrap:balance;padding:0 .1em;
  background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mbox h2.nm2{font:800 24px/1.15 var(--display);font-style:normal;font-stretch:100%;text-transform:none;background:none;color:var(--text)}
.mbox p{margin:6px auto;color:var(--muted);max-width:40ch}
.mbox .setlist{margin-top:12px;text-align:left}
.mbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.mbtns .btn{flex:1 1 130px}
.bigscore{font:900 40px var(--display);margin:4px 0}
.bigscore .b{color:var(--me-ink,var(--blue-ink))} .bigscore .r{color:var(--red-ink)}
.serscore{font:700 15px var(--display)} .serscore .b{color:var(--me-ink,var(--blue-ink))} .serscore .r{color:var(--red-ink)}
.serlog{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 8px}
.serlog span{font:600 12px/22px var(--body);font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:6px;padding:0 8px;color:var(--muted)}
.serlog .b{color:var(--me-ink,var(--blue-ink));border-color:color-mix(in srgb,var(--me-ink,var(--blue-ink)) 45%,transparent)} .serlog .r{color:var(--red-ink);border-color:color-mix(in srgb,var(--red-ink) 45%,transparent)}
.cardrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0;font-size:13px}
.cardrow .pk{position:relative;cursor:pointer;border-radius:10px;padding:3px;border:2px solid transparent;transition:transform .2s var(--spring),border-color .15s}
/* Diff: a card the winner didn't flip can't be taken */
.cardrow .pk.off{cursor:default;opacity:.35;filter:saturate(.4)}
/* NEW tag on cards you've never found (same look as in packs) */
.cr-it{position:relative}
.cr-new{position:absolute;top:-.5em;left:50%;transform:translateX(-50%);z-index:5;font:900 10px/1 var(--display);font-style:normal;letter-spacing:.06em;padding:.3em .55em;border-radius:99px;background:var(--cta);color:var(--on-cta);white-space:nowrap;pointer-events:none}
.cardrow .pk.on{border-color:var(--hot);transform:translateY(-5px);box-shadow:0 10px 20px -8px var(--hot-glow)}
.bigcard{font-size:30px;display:flex;justify-content:center;margin:6px 0 10px}
.stats{display:grid;grid-template-columns:auto auto;gap:4px 16px;justify-content:center;text-align:left;font-size:14px;color:var(--muted)}
.stats b{color:var(--text);font-weight:600}

/* ---------- sound panel: hangs under the speaker in the top bar, the music and sound effects rows from Settings ---------- */
#btnSnd.on{background:rgba(var(--tint),.1);border-color:var(--line2)}
.sndpop{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:min(340px,calc(100vw - 20px));box-sizing:border-box;background:var(--surf);border:1px solid var(--line2);
  border-radius:18px;padding:4px;box-shadow:0 20px 50px rgba(var(--sh),calc(.7*var(--shk)));transform-origin:calc(100% - 22px) 0;animation:sndIn .24s var(--spring)}
@keyframes sndIn{from{transform:scale(.8) translateY(-8px);opacity:0}}
.sndpop .setlist{border:0;background:none;border-radius:14px}
.sndpop .setrow{gap:10px;padding:10px 8px 10px 12px}
.sndpop .setrow .rt{flex:0 0 auto;width:6.6em}
.sndpop .setrow small{display:none}
.sndpop .setrow .rng{flex:1 1 0}

/* ---------- quick emotes ---------- */
.side .pname{position:relative}
/* the button sits right after your name, so both scores stay on the right edge, one above the other */
/* emote button, avatar, name, then the turn tag; the score stays on the right edge */
.pname .who{flex:0 1 auto}
.ttag{display:none;flex:none;font:800 10.5px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;padding:5px 8px;border-radius:99px;
  border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.ttag.on{display:block;animation:emPop .3s var(--spring)}
.side.me .ttag{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.pname .sc{margin-left:auto}
.emb{position:relative;width:36px;height:36px;flex:none;border-radius:11px;border:1px solid var(--line2);background:var(--surf2);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer}
.emb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.emb.on{background:var(--accent);color:var(--on-accent);border-color:transparent}
.emb.cool{opacity:.55}
.emb.cool::after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:13px;border:2px solid var(--accent);animation:emCool 4s linear forwards}
@keyframes emCool{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.etray{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:max(100%,280px);box-sizing:border-box;background:var(--surf);border:1px solid var(--line2);border-radius:20px;padding:10px;
  box-shadow:0 20px 50px rgba(var(--sh),calc(.7*var(--shk)));transform-origin:20% 100%;animation:emPop .26s var(--spring)}
/* in landscape your cards are the right-hand column, and on PC your corner is bottom-right: the tray grows leftwards and stays on screen */
body.land .etray,body.pc .etray{left:auto;right:0;transform-origin:90% 100%}
@keyframes emPop{from{transform:scale(.6) translateY(16px);opacity:0}}
.egrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.em{border:1px solid var(--line);background:rgba(var(--tint),.04);border-radius:14px;padding:6px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--text);font:600 11px var(--body);white-space:nowrap}
.em b{font-size:26px;line-height:1.15;font-weight:400}
@media (hover:hover){.em:hover{border-color:var(--accent)}}
.em:active{transform:scale(.94)}
.efoot{display:flex;justify-content:flex-end;margin-top:8px}
.emute{border:1px solid var(--line2);background:none;color:var(--muted);border-radius:99px;padding:5px 12px;font:600 11.5px var(--body);cursor:pointer}
.emute[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent)}
/* the bubble: pops from the player's avatar, below the name at the top, above it at the bottom */
.ebub{position:absolute;left:0;z-index:25;display:flex;align-items:center;gap:6px;background:#fff;color:#1a1238;border:1px solid var(--line2);border-radius:16px;
  padding:6px 13px 6px 9px;font:800 15px var(--display);white-space:nowrap;pointer-events:none;box-shadow:0 8px 24px rgba(var(--sh),calc(.5*var(--shk)));
  animation:emPop .34s var(--spring);transition:opacity .3s,transform .3s}
.ebub b{font-size:24px;line-height:1;font-weight:400;animation:emWig .5s .2s 2}
.ebub.out{opacity:0;transform:scale(.8)}
.ebub::before{content:"";position:absolute;left:10px;border:7px solid transparent}
.side.me .ebub{bottom:calc(100% + 6px);transform-origin:12% 100%}
/* portrait: the emote button hangs off the left of your row, so the two avatars stay one above the other.
   When the cards fill the screen there's no room out there, so both rows start a little further in (--pin, set in layout) */
body:not(.land):not(.pc) #scr-game.emo .pname{padding-left:calc(4px + var(--pin,0px))}
body:not(.land):not(.pc) .side{align-self:stretch} /* both rows measure from the full width, not from how many cards are left in the hand */
body:not(.land):not(.pc) #btnEmote{position:absolute;left:calc(var(--pin,0px) - 46px);top:2px}
body:not(.land):not(.pc) #sideBot .ebub{left:var(--pin,0px)} /* your bubble points at your avatar */
body:not(.land):not(.pc) .etray{left:calc(var(--pin,0px) - 46px)}
/* landscape: the button is first in your row, so your bubble starts past it to point at your avatar */
body.land #sideBot .ebub{left:46px}
.side.me .ebub::before{bottom:-7px;border-bottom:0;border-top-color:#fff}
/* in portrait the CPU's name is at the top, so its bubble drops down */
.side.opp .ebub{top:calc(100% + 6px);bottom:auto;transform-origin:12% 0}
.side.opp .ebub::before{top:-7px;bottom:auto;border:7px solid transparent;border-top:0;border-bottom-color:#fff}
/* in landscape both names are under the cards, so both bubbles pop up */
body.land .side .ebub{top:auto;bottom:calc(100% + 6px);transform-origin:12% 100%}
body.land .side .ebub::before{top:auto;bottom:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}
@keyframes emWig{50%{transform:rotate(-12deg) scale(1.12)}}
/* spares (spare.js): the spared line, and the progress to a free pack */
.mbox .spared{font-size:16px;line-height:1.45} .mbox .spared small{color:var(--muted);font-size:13px}
.spare-bar{margin:12px auto 4px;max-width:280px;text-align:left}
.spare-bar>div:first-child{display:flex;justify-content:space-between;font-size:13px}
.spare-bar span{color:var(--muted)} .spare-bar span b{color:var(--accent-ink)}
.spare-bar .bar{height:7px}
.spare-bar small{display:block;margin-top:8px;text-align:center;color:var(--muted);font-size:12.5px}