/* Sobrecarga - Card flights, the action card tooltip, glitch text. */
/* ---------- Flight layer: cards travelling across the table ---------- */
/* Above the table, but below the modals (40) so a ghost can never fly over one. */
#flight{position:fixed;inset:0;z-index:38;pointer-events:none}
.ghost{
  position:fixed;left:0;top:0;transform-origin:0 0;perspective:760px;
  will-change:transform;
}
.ghost .g-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;will-change:transform;
}
.ghost .g-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.ghost .g-face.g-b{transform:rotateY(180deg)}
/* the markup inside a ghost fills it, whatever size the ghost was born at */
.ghost .card{
  --cw:var(--ghost-w);
  width:100%;height:100%;
  box-shadow:0 22px 38px rgba(0,0,0,.7),0 0 0 1px rgba(255,34,51,.18);
  /* Safety net: a flying clone must be visible even if its markup was built
     while the card was flagged as in-flight. */
  visibility:visible!important;
}

/* ---------- Action card tooltip ---------- */
#tip{
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  opacity:0;transform:translateY(5px);transition:opacity .13s ease,transform .13s ease;
  width:max-content;max-width:min(calc(280px * var(--s)),calc(100vw - 24px));
  background:linear-gradient(180deg,#1c1c23,#101014);
  border:1px solid var(--red-dim);border-radius:10px;padding:9px 12px;
  box-shadow:0 16px 36px rgba(0,0,0,.65),0 0 0 1px rgba(255,34,51,.12);
}
#tip.on{opacity:1;transform:none}
#tip .tip-name{
  display:block;font-family:var(--font-mono);font-size:calc(10.5px * var(--s));letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:5px;
}
#tip .tip-desc{display:block;font-size:calc(12.5px * var(--s));line-height:1.5;color:#c6c6cf}
#tip::after{
  content:"";position:absolute;left:var(--tip-arrow,50%);width:8px;height:8px;
  background:#141419;transform:translateX(-50%) rotate(45deg);
}
#tip.above::after{bottom:-5px;border-right:1px solid var(--red-dim);border-bottom:1px solid var(--red-dim)}
#tip.below::after{top:-5px;border-left:1px solid var(--red-dim);border-top:1px solid var(--red-dim)}

/* explosion FX */
#fx{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center;opacity:0}
#fx.on{animation:boom .85s ease-out forwards}
#fx .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,34,51,.5),rgba(255,34,51,0) 62%)}
#fx .word{
  font-family:var(--font-display);font-size:clamp(40px,11vw,124px);letter-spacing:.06em;
  color:#fff;text-transform:uppercase;text-shadow:0 0 30px var(--red);
}
.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}

/* ---------- Glitch text ---------- */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  overflow:hidden;pointer-events:none;
}
.glitch::before{color:var(--cyan);clip-path:inset(0 0 58% 0);animation:gl-a 3.4s infinite steps(2,end)}
.glitch::after{color:var(--red);clip-path:inset(56% 0 0 0);animation:gl-b 2.9s infinite steps(2,end)}
@keyframes gl-a{
  0%,84%,100%{transform:translate(0,0);opacity:0}
  85%{transform:translate(-2px,-1px);opacity:.9}
  90%{transform:translate(2px,1px);opacity:.75}
  95%{transform:translate(-1px,0);opacity:.85}
}
@keyframes gl-b{
  0%,78%,100%{transform:translate(0,0);opacity:0}
  80%{transform:translate(2px,1px);opacity:.85}
  88%{transform:translate(-2px,-1px);opacity:.7}
  93%{transform:translate(1px,0);opacity:.8}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes boom{
  0%{opacity:0;transform:scale(.9)}
  12%{opacity:1;transform:scale(1.04)}
  26%{opacity:.5}
  36%{opacity:1}
  100%{opacity:0;transform:scale(1)}
}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}
@keyframes deal{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.card.fresh{animation:deal .26s ease-out}
/* Long-press on touch shows a card's description; no text selection or callout. */
.card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}