/* =====================================================================
   PHONE A FRIEND
   The call is a little three-beat performance: dial → pick up → question →
   verdict. Each beat gets its own entrance so the player can follow what the
   caller is doing instead of watching text swap in place.
   ===================================================================== */

/* ---------- the call button ---------- */
.hotline-btn{
  background:linear-gradient(160deg,var(--goldBright),var(--gold));
  border:1px solid color-mix(in srgb,var(--gold) 70%,#000);color:#241b02;font-weight:900;
  display:inline-flex;align-items:center;gap:7px}
.hotline-btn:disabled{background:var(--control);border-color:var(--border);color:var(--muted)}
/* availability is a separate badge so the caller's name never reads as "Emile Ready" */
.ask-state{font-size:.68rem;font-weight:900;letter-spacing:.04em;padding:2px 6px;border-radius:99px;
  background:rgba(0,0,0,.14);line-height:1.1}
.hotline-btn:disabled .ask-state{background:color-mix(in srgb,var(--muted) 22%,transparent)}
.ask-state.go{background:var(--good);color:#fff;font-size:.6rem;padding:3px 7px}
.hotline-btn.hot{animation:hotlinePulse 1.6s ease-in-out infinite}
@keyframes hotlinePulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent)}
  50%{box-shadow:0 0 0 8px transparent}}
/* the handset rocks in its cradle while a call is available */
.hotline-btn.hot .ask-glyph{display:inline-block;animation:handsetRing 1.6s ease-in-out infinite;transform-origin:50% 80%}
@keyframes handsetRing{
  0%,62%,100%{transform:rotate(0)}
  68%{transform:rotate(-18deg)}74%{transform:rotate(15deg)}
  80%{transform:rotate(-11deg)}86%{transform:rotate(7deg)}92%{transform:rotate(-3deg)}}

/* ---------- the call panel ---------- */
.caller-panel{
  position:relative;overflow:hidden;
  border:1.5px solid color-mix(in srgb,var(--gold) 55%,var(--border));
  border-radius:var(--radius-md);padding:var(--sp-3);margin-top:var(--sp-3);
  background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 12%,var(--panel2)),var(--panel2));
  box-shadow:var(--shadow);
  animation:callerIn .34s var(--ease-pop)}
@keyframes callerIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.caller-panel h4{margin:0 0 6px;font-size:.86rem}
.caller-panel .opts{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
/* answer buttons deal themselves in one after another */
.caller-panel .opts .btn{animation:riseIn .26s var(--ease-out) backwards}
.caller-panel .opts .btn:nth-child(1){animation-delay:.05s}
.caller-panel .opts .btn:nth-child(2){animation-delay:.12s}
.caller-panel .opts .btn:nth-child(3){animation-delay:.19s}
.caller-panel .opts .btn:nth-child(4){animation-delay:.26s}

/* ---------- caller identity row ---------- */
.caller-head{display:flex;align-items:center;gap:var(--sp-3)}
.caller-avatar{
  position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-weight:950;font-size:1.05rem;color:#fff;letter-spacing:-.02em;
  background:linear-gradient(150deg,var(--avatarA,#f0ac1f),var(--avatarB,#e95fa8));
  box-shadow:var(--shadow)}
/* expanding rings while the phone is still ringing */
.caller-avatar .caller-waves{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.caller-avatar .caller-waves i{position:absolute;inset:0;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--gold) 80%,transparent);opacity:0}
.caller-avatar.ringing .caller-waves i{animation:ringPing 1.5s ease-out infinite}
.caller-avatar.ringing .caller-waves i:nth-child(2){animation-delay:.5s}
.caller-avatar.ringing .caller-waves i:nth-child(3){animation-delay:1s}
.caller-avatar.ringing{animation:avatarShake 1.5s ease-in-out infinite}
@keyframes avatarShake{
  0%,60%,100%{transform:rotate(0) scale(1)}
  66%{transform:rotate(-9deg) scale(1.05)}72%{transform:rotate(8deg) scale(1.05)}
  78%{transform:rotate(-6deg) scale(1.03)}84%{transform:rotate(4deg) scale(1.02)}}
/* connected: a steady green "on air" dot */
.caller-avatar.connected::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;
  background:var(--good);border:2px solid var(--panel2);animation:softPulse 1.6s ease-in-out infinite}
.caller-meta{display:grid;gap:1px;min-width:0}
.caller-name{font-weight:950;font-size:.95rem;line-height:1.15}
.caller-status{font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.caller-status.live{color:var(--good)}

/* ---------- what the caller says ---------- */
.caller-line{margin:var(--sp-3) 0 0;color:var(--muted);font-size:.85rem;line-height:1.45;
  animation:riseIn .26s var(--ease-out)}
.caller-q{margin:var(--sp-3) 0 4px;font-weight:800;font-size:.92rem;line-height:1.35;
  animation:riseIn .3s var(--ease-out)}
/* "…" typing indicator while the line is connecting */
.caller-dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
.caller-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:dotBounce 1.1s infinite}
.caller-dots i:nth-child(2){animation-delay:.16s}
.caller-dots i:nth-child(3){animation-delay:.32s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ---------- the caller's own question timer ---------- */
.caller-timer{height:7px;border-radius:4px;margin-top:var(--sp-2);
  background:linear-gradient(90deg,var(--goldBright),var(--gold));
  transition:width linear,background var(--t-mid) ease;
}
.caller-timer.urgent{background:linear-gradient(90deg,#ff9d3d,#ff3d5a);
  animation:beatUrgent .4s ease-in-out infinite alternate}

/* ---------- the verdict banner ---------- */
.fx-banner{display:flex;align-items:center;gap:10px;margin:var(--sp-2) 0 0;padding:11px 13px;
  border-radius:var(--radius-md);font-size:.83rem;line-height:1.4;font-weight:700;
  border:1.5px solid var(--border);background:var(--panel2);
  animation:fxBannerIn .38s var(--ease-pop)}
@keyframes fxBannerIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.fx-banner .fx-icon{font-size:1.3rem;flex:none;line-height:1;display:inline-block;
  animation:fxIconIn .5s var(--ease-pop) .1s backwards}
@keyframes fxIconIn{from{transform:scale(0) rotate(-140deg)}to{transform:none}}
.fx-banner .fx-msg{flex:1;min-width:0}
.fx-banner .fx-dismiss{flex:none}
.fx-banner.useful{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--panel2))}
.fx-banner.useless{border-color:var(--muted);background:var(--panel2);opacity:.94}
.fx-banner.chaos{border-color:var(--chaos);background:color-mix(in srgb,var(--chaos) 14%,var(--panel2))}

/* ---------- conference call / truth-liar: two callers side by side ---------- */
.caller-pair{display:flex;gap:var(--sp-3);margin-top:var(--sp-2);flex-wrap:wrap}
.caller-pair .caller-head{flex:1 1 160px;padding:var(--sp-2);border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--panel) 60%,transparent);border:1px solid var(--border);
  animation:riseIn .3s var(--ease-out) backwards}
.caller-pair .caller-head:nth-child(2){animation-delay:.12s}
.caller-pair .caller-avatar{width:34px;height:34px;font-size:.85rem}
.caller-quote{font-size:.76rem;color:var(--muted);line-height:1.35}