/* Dropped connections in online matches (client.mjs: oppAwaySync, connBar, socialToast; markup in screens/online.mjs). */

/* The opponent is away: their side of the board goes grey and says so. Nothing loops here (phones stay cool). */
.arena .hand--opp,.arena .legend-block--opp,.arena .slab--opp,.arena .mana-pills--opp,.arena .lane-cell .uc[data-side="opp"]{transition:filter .5s ease}
.arena.is-opp-away .hand--opp,.arena.is-opp-away .legend-block--opp,.arena.is-opp-away .slab--opp,.arena.is-opp-away .mana-pills--opp,
.arena.is-opp-away .lane-cell .uc[data-side="opp"]{filter:grayscale(1) brightness(.5)}

/* The tag sits on their bench row's spot in the board grid (every layout names it slabo), outside the grey. */
.away-tag{grid-area:slabo;align-self:center;justify-self:center;position:relative;z-index:12;display:flex;align-items:center;gap:10px;max-width:calc(100% - 16px);padding:9px 18px 9px 14px;
  border-radius:999px;border:2px solid transparent;pointer-events:none;white-space:nowrap;
  background:linear-gradient(180deg,#1c2227,#0a0d10) padding-box,linear-gradient(160deg,#c9c3b4,#6c6a63 50%,#b9b3a4) border-box;
  box-shadow:0 10px 26px rgba(0,0,0,.65);animation:awayIn .35s cubic-bezier(.2,1.3,.4,1) both}
.away-tag svg{width:24px;height:24px;flex:none;color:#ff8a70}
.away-tag b{display:block;font:700 clamp(14px,1.8vh,18px)/1.1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:#f1ece0}
.away-tag small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;font:600 12px/1.2 var(--cond);letter-spacing:.06em;color:var(--muted)}
@keyframes awayIn{from{opacity:0;scale:.85}to{opacity:1;scale:1}}

/* Your own connection is down: a bar over the board with Reconnect (it also retries by itself). */
#conn-bar{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);translate:-50% 0;z-index:9750;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:calc(100vw - 24px);padding:9px 10px 9px 14px;border-radius:12px;background:rgba(22,12,10,.95);border:1px solid rgba(255,138,112,.6);
  box-shadow:0 12px 30px rgba(0,0,0,.6);color:#f5ecd6;animation:awayIn .3s ease both}
#conn-bar svg{width:22px;height:22px;flex:none;color:#ff8a70}
#conn-bar b{display:block;font:700 15px/1.1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
#conn-bar small{display:block;font:600 12px/1.2 "Segoe UI",system-ui;color:var(--muted)}
#conn-bar .gbtn{flex:none;min-width:0;min-height:0;width:auto;padding:9px 14px;font-size:14px}

/* Rejoin: shares the invite toast's frame (style.css .invite-toast). */
.rejoin-toast .fr-av{font-size:18px}
.rejoin-toast .fr-who b{white-space:normal} /* "Your match is still on" whole on phones */
@media (prefers-reduced-motion:reduce){.away-tag,#conn-bar{animation:none}}
body.no-motion .away-tag,body.no-motion #conn-bar{animation:none}