/*!
 * HUD-Pro — Premium HUD overlay for sbay CNS games.
 * Adds an objective banner with progress bar, score animator,
 * tier medal, and achievement toast system.
 * Activated by `body[data-hud-pro="true"]`. Coexists with floating-shell.
 */
:root{
  --hp-bg: rgba(2,6,19,.72);
  --hp-bd: 1px solid rgba(168,85,247,.42);
  --hp-shadow: 0 12px 40px rgba(124,58,237,.22), 0 0 22px rgba(125,240,255,.08);
  --hp-blur: blur(18px) saturate(140%);
  --hp-accent: #7df0ff;
  --hp-accent-2: #a855f7;
  --hp-text: #e8eefc;
  --hp-muted: #94a3b8;
  --hp-gold: #fbbf24;
  --hp-silver: #cbd5e1;
  --hp-bronze: #d97706;
  --hp-platinum: #67e8f9;
  --hp-diamond: #f0abfc;
  --hp-radius: 16px;
}

/* ──────────────────────── Objective Banner ──────────────────────── */
#hp-objective{
  position:fixed;
  top: calc(var(--fs-top-row, var(--fs-nav-h, 74px) + 14px));
  left:50%; transform:translateX(-50%);
  z-index: 7500;
  display:flex; flex-direction:column; gap:.5rem;
  min-width: min(440px, calc(100vw - 32px));
  max-width: min(540px, calc(100vw - 32px));
  padding: .7rem .95rem .75rem;
  background: var(--hp-bg);
  -webkit-backdrop-filter: var(--hp-blur);
  backdrop-filter: var(--hp-blur);
  border: var(--hp-bd);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
  color: var(--hp-text);
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  pointer-events: auto;
  animation: hpSlideDown .55s cubic-bezier(.2,.9,.3,1.2) both;
}
#hp-objective[hidden]{ display:none !important; }

#hp-objective .hp-row{
  display:flex; align-items:center; gap:.55rem;
  font-size: .85rem; font-weight: 700;
  line-height: 1.25;
}
#hp-objective .hp-icon{
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(125,240,255,.55));
  flex: 0 0 auto;
}
#hp-objective .hp-label{
  flex: 1; min-width:0;
  color: var(--hp-text);
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
#hp-objective .hp-progress-text{
  font-family: ui-monospace, "SF Mono", "Consolas", monospace;
  font-size: .78rem;
  color: var(--hp-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

#hp-objective .hp-bar{
  position: relative;
  height: 7px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.18);
}
#hp-objective .hp-bar-fill{
  position: absolute; inset:0; right:auto;
  width: 0%;
  background: linear-gradient(90deg, var(--hp-accent), var(--hp-accent-2));
  border-radius: 99px;
  transition: width .65s cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 0 14px rgba(125,240,255,.5);
}
#hp-objective .hp-bar-fill::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation: hpShimmer 2.4s linear infinite;
  pointer-events: none;
}

#hp-objective .hp-meta{
  display: flex; align-items: center; gap: .55rem;
  font-size: .72rem;
  color: var(--hp-muted);
}

/* ── Transaction briefing row (financial framing for play.html) ── */
#hp-objective .hp-briefing{
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem;
  margin-top: .15rem;
  background: linear-gradient(135deg, rgba(125,240,255,.08), rgba(168,85,247,.10));
  border: 1px solid rgba(125,240,255,.22);
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--hp-text);
  line-height: 1.3;
  flex-wrap: wrap;
}
#hp-objective .hp-briefing[hidden]{ display: none !important; }
#hp-objective .hp-briefing .hp-bf-icon{
  font-size: 1rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(125,240,255,.5));
}
#hp-objective .hp-briefing .hp-bf-text{
  flex: 1; min-width: 0;
  font-family: system-ui, sans-serif;
  display: inline-flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
}
#hp-objective .hp-briefing .hp-bf-pair{
  display: inline-flex; align-items: center; gap: .25rem;
  font-weight: 700;
  color: #fde68a;
}
#hp-objective .hp-briefing .hp-bf-arrow{
  color: var(--hp-accent);
  font-weight: 800;
}
#hp-objective .hp-briefing .hp-bf-amount{
  font-family: ui-monospace, "SF Mono", monospace;
  font-weight: 800;
  color: var(--hp-gold);
  font-variant-numeric: tabular-nums;
  padding: .08rem .4rem;
  border-radius: 6px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.3);
}
#hp-objective .hp-briefing .hp-bf-sla{
  font-family: ui-monospace, "SF Mono", monospace;
  font-weight: 700;
  color: #86efac;
  font-size: .7rem;
}
#hp-objective .hp-briefing .hp-bf-help{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(125,240,255,.25);
  color: var(--hp-accent);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s, transform .15s;
}
#hp-objective .hp-briefing .hp-bf-help:hover{ background: rgba(125,240,255,.18); transform: scale(1.08); }
#hp-objective .hp-briefing .hp-bf-help:focus-visible{ outline: 2px solid var(--hp-accent); outline-offset: 2px; }

/* ── Explainer modal (banking glossary) ── */
#hp-explainer{
  position: fixed; inset: 0;
  z-index: 10500;
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(2,6,19,.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: hpExplainerIn .25s ease both;
}
#hp-explainer[aria-hidden="false"]{ display: flex; }
#hp-explainer .hp-ex-box{
  max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  background: linear-gradient(155deg, rgba(15,20,40,.98), rgba(2,6,19,.98));
  border: 1px solid rgba(125,240,255,.4);
  border-radius: 18px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(168,85,247,.15);
  color: var(--hp-text);
  font-family: system-ui, sans-serif;
  position: relative;
  animation: hpExplainerBoxIn .35s cubic-bezier(.2,.9,.3,1.2) both;
}
#hp-explainer .hp-ex-close{
  position: absolute; top: .65rem; inset-inline-end: .85rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--hp-text);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.1rem; font-weight: 800;
  cursor: pointer;
}
#hp-explainer h2{
  font-size: 1.15rem; font-weight: 900;
  margin: 0 0 .35rem;
  color: var(--hp-accent);
}
#hp-explainer .hp-ex-lede{
  font-size: .85rem; color: var(--hp-muted);
  line-height: 1.65; margin-bottom: 1rem;
}
#hp-explainer .hp-ex-tracks{
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: -.2rem 0 1rem;
}
#hp-explainer .hp-ex-tracks .hp-ex-track{
  font-size: .68rem; font-weight: 800;
  padding: .25rem .55rem;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(125,240,255,.14), rgba(168,85,247,.16));
  border: 1px solid rgba(168,85,247,.4);
  color: var(--hp-text);
}
#hp-explainer table{
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin-bottom: .8rem;
}
#hp-explainer th, #hp-explainer td{
  text-align: start;
  padding: .55rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}
#hp-explainer th{
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hp-accent);
  background: rgba(125,240,255,.04);
}
#hp-explainer td:first-child{
  font-weight: 800;
  color: #fde68a;
  white-space: nowrap;
}
#hp-explainer td:last-child{ color: var(--hp-muted); line-height: 1.5; }
#hp-explainer .hp-ex-footer{
  font-size: .72rem; color: var(--hp-muted);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: .6rem; margin-top: .4rem;
  line-height: 1.55;
}

@keyframes hpExplainerIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes hpExplainerBoxIn{
  from{ opacity: 0; transform: translateY(20px) scale(.96); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px){
  #hp-objective .hp-briefing{ font-size: .68rem; gap: .35rem; padding: .4rem .5rem; }
  #hp-objective .hp-briefing .hp-bf-icon{ font-size: .9rem; }
  #hp-explainer .hp-ex-box{ padding: 1rem; max-height: 92vh; border-radius: 14px; }
  #hp-explainer h2{ font-size: 1rem; }
  #hp-explainer table{ font-size: .76rem; }
}
#hp-objective .hp-tier{
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 99px;
  font-weight: 800; font-size: .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid currentColor;
  letter-spacing: .02em;
  transition: color .35s ease, text-shadow .35s ease;
}
#hp-objective .hp-tier[data-tier="bronze"]{ color: var(--hp-bronze); }
#hp-objective .hp-tier[data-tier="silver"]{ color: var(--hp-silver); }
#hp-objective .hp-tier[data-tier="gold"]{ color: var(--hp-gold); text-shadow: 0 0 8px rgba(251,191,36,.45); }
#hp-objective .hp-tier[data-tier="platinum"]{ color: var(--hp-platinum); text-shadow: 0 0 10px rgba(103,232,249,.55); }
#hp-objective .hp-tier[data-tier="diamond"]{ color: var(--hp-diamond); text-shadow: 0 0 12px rgba(240,171,252,.65); animation: hpDiamond 2.4s ease-in-out infinite; }

#hp-objective .hp-score{
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: ui-monospace, "SF Mono", "Consolas", monospace;
  font-weight: 800;
  font-size: .8rem;
  color: var(--hp-accent);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
#hp-objective .hp-score::before{ content: '✦'; font-size: .85rem; opacity: .85; }

/* ──────────────────────── Toast Stack ──────────────────────── */
#hp-toast-stack{
  position: fixed;
  top: calc(var(--fs-top-row, var(--fs-nav-h, 74px) + 14px) + 86px);
  inset-inline-end: 16px;
  z-index: 9500;
  display: flex; flex-direction: column;
  gap: .5rem;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}
.hp-toast{
  pointer-events: auto;
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem;
  background: var(--hp-bg);
  -webkit-backdrop-filter: var(--hp-blur);
  backdrop-filter: var(--hp-blur);
  border: var(--hp-bd);
  border-radius: 14px;
  box-shadow: var(--hp-shadow);
  color: var(--hp-text);
  font-family: system-ui, sans-serif;
  font-size: .8rem; font-weight: 600;
  animation: hpToastIn .5s cubic-bezier(.2,.9,.3,1.2) both;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.hp-toast.is-leaving{
  animation: hpToastOut .4s cubic-bezier(.4,.0,.2,1) forwards;
}
.hp-toast::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hp-accent), var(--hp-accent-2));
  transform-origin: left center;
  animation: hpToastBar var(--hp-toast-dur, 4.8s) linear forwards;
}
[dir="rtl"] .hp-toast::after{ transform-origin: right center; }
.hp-toast .hp-toast-icon{
  font-size: 1.45rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 8px rgba(125,240,255,.55));
}
.hp-toast .hp-toast-body{
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0; flex: 1;
}
.hp-toast .hp-toast-title{
  font-weight: 800; font-size: .82rem;
  color: var(--hp-accent);
  letter-spacing: .01em;
  line-height: 1.2;
}
.hp-toast .hp-toast-msg{
  font-size: .74rem; color: var(--hp-muted);
  line-height: 1.3;
}
.hp-toast[data-kind="achievement"]{ border-color: rgba(251,191,36,.55); }
.hp-toast[data-kind="achievement"] .hp-toast-title{ color: var(--hp-gold); text-shadow: 0 0 8px rgba(251,191,36,.4); }
.hp-toast[data-kind="achievement"]::after{ background: linear-gradient(90deg, var(--hp-gold), #fde68a); }
.hp-toast[data-kind="warn"] .hp-toast-title{ color: #fb7185; }
.hp-toast[data-kind="info"] .hp-toast-title{ color: var(--hp-accent); }
.hp-toast[data-kind="success"] .hp-toast-title{ color: #86efac; }
.hp-toast[data-kind="success"]::after{ background: linear-gradient(90deg, #86efac, #34d399); }

/* ──────────────────────── Score-pop ──────────────────────── */
.hp-score-pop{
  position: fixed; pointer-events: none;
  z-index: 9700;
  font: 800 1.5rem/1 system-ui, sans-serif;
  color: var(--hp-gold);
  text-shadow: 0 0 14px rgba(251,191,36,.75);
  transform: translate(-50%, -50%);
  animation: hpScorePop 1.2s cubic-bezier(.2,.9,.3,1) forwards;
}
.hp-score-pop.is-negative{ color: #fb7185; text-shadow: 0 0 14px rgba(251,113,133,.7); }

/* ──────────────────────── Animations ──────────────────────── */
@keyframes hpSlideDown{
  0%{ opacity: 0; transform: translateX(-50%) translateY(-20px); }
  100%{ opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes hpToastIn{
  0%{ opacity: 0; transform: translateX(40px) scale(.95); }
  100%{ opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hpToastOut{
  0%{ opacity: 1; transform: translateX(0) scale(1); }
  100%{ opacity: 0; transform: translateX(40px) scale(.92); }
}
@keyframes hpToastBar{
  from{ transform: scaleX(1); }
  to{ transform: scaleX(0); }
}
@keyframes hpShimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}
@keyframes hpDiamond{
  0%, 100%{ filter: brightness(1); }
  50%{ filter: brightness(1.35); }
}
@keyframes hpScorePop{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  20%{ opacity: 1; transform: translate(-50%, -75%) scale(1.15); }
  100%{ opacity: 0; transform: translate(-50%, -150%) scale(.95); }
}

/* RTL toast direction reversal */
[dir="rtl"] .hp-toast{ animation-name: hpToastInRtl; }
[dir="rtl"] .hp-toast.is-leaving{ animation-name: hpToastOutRtl; }
@keyframes hpToastInRtl{
  0%{ opacity: 0; transform: translateX(-40px) scale(.95); }
  100%{ opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hpToastOutRtl{
  0%{ opacity: 1; transform: translateX(0) scale(1); }
  100%{ opacity: 0; transform: translateX(-40px) scale(.92); }
}

/* ──────────────────────── Mobile ──────────────────────── */
@media (max-width: 700px){
  #hp-objective{
    top: calc(var(--fs-top-row, var(--fs-nav-h, 74px) + 10px) - 4px);
    padding: .55rem .7rem .6rem;
    min-width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    border-radius: 12px;
    gap: .4rem;
  }
  #hp-objective .hp-row{ font-size: .78rem; gap: .45rem; }
  #hp-objective .hp-bar{ height: 6px; }
  #hp-objective .hp-meta{ font-size: .68rem; }
  #hp-objective .hp-tier{ font-size: .65rem; padding: .15rem .45rem; }
  #hp-objective .hp-score{ font-size: .76rem; }
  #hp-toast-stack{
    top: calc(var(--fs-top-row, var(--fs-nav-h, 74px) + 10px) + 92px);
    inset-inline-end: 8px;
    width: calc(100vw - 16px);
  }
  .hp-toast{ padding: .55rem .7rem; font-size: .76rem; }
  .hp-toast .hp-toast-icon{ font-size: 1.25rem; }
  .hp-toast .hp-toast-title{ font-size: .78rem; }
  .hp-toast .hp-toast-msg{ font-size: .7rem; }
}

/* Hide HUD-pro overlay while in fullscreen if requested */
body.hp-immersive #hp-objective{ opacity: .25; transition: opacity .3s; }
body.hp-immersive #hp-objective:hover, body.hp-immersive #hp-objective:focus-within{ opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #hp-objective, .hp-toast, .hp-score-pop{ animation-duration: .01ms !important; }
  #hp-objective .hp-bar-fill::after{ animation: none !important; }
  #hp-objective .hp-tier[data-tier="diamond"]{ animation: none !important; }
}