/* Widget styles. Each widget root is .w.w-<type> and sets --fs (font size in px). */

.w { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: var(--fs, 20px); }
.ap-content.flow { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 2; }
.frame-svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* Editor-only placeholders inside transparent frames */
.cf-placeholder {
  position: absolute;
  top: 12%; right: 12%; bottom: 12%; left: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 1.4em;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.2em;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* ---- socialBar -------------------------------------------------------- */
.w-socialBar .sb-deco {
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 0.55em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  z-index: 3;
  font-size: 0.9em;
}
.w-socialBar .sb-deco .slashes { font-size: 0.5em; }
.w-socialBar .sb-topline { flex: 1; height: 3px; background: var(--gold-grad-h); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%); }
.w-socialBar .sb-panel { position: absolute; left: 0; right: 0; top: 0.45em; bottom: 0; }
.sb-items { display: flex; align-items: center; justify-content: space-around; padding: 0 1.2em; gap: 0.6em; }
.sb-items.grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: start; padding: 0.4em 1.4em; }
.sb-items.column { flex-direction: column; justify-content: center; align-items: flex-start; padding: 0.4em 1.2em; }
.sb-item { display: flex; align-items: center; gap: 0.45em; font-weight: 700; font-style: italic; white-space: nowrap; letter-spacing: 0.02em; }
.sb-item .icon { width: 1.15em; height: 1.15em; color: var(--c2); filter: drop-shadow(0 0 3px rgba(var(--glow-rgb), 0.5)); }
.sb-item.white .icon { color: var(--text); }

/* ---- nameBanner ------------------------------------------------------- */
.w-nameBanner .nb-center { position: absolute; left: 13%; right: 13%; top: 0; bottom: 12%; }
.w-nameBanner .nb-wing { position: absolute; top: 16%; height: 56%; width: 20%; background: var(--gold-grad); overflow: hidden; }
.w-nameBanner .nb-l { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%); }
.w-nameBanner .nb-r { right: 0; clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%); }
.w-nameBanner .nb-wing i { position: absolute; top: -20%; bottom: -20%; width: 7%; background: var(--bg2); transform: skewX(-24deg); }
.w-nameBanner .nb-l i { left: 60%; }
.w-nameBanner .nb-r i { left: 33%; }
.w-nameBanner .nb-wing i + i { width: 3%; opacity: 0.6; }
.w-nameBanner .nb-l i + i { left: 72%; }
.w-nameBanner .nb-r i + i { left: 24%; }
.w-nameBanner .nb-under { position: absolute; bottom: 0; left: 30%; right: 30%; height: 6%; background: var(--gold-grad-h); clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%); }
.w-nameBanner .nb-slashes { position: absolute; right: 15%; bottom: 1%; font-size: 0.16em; }
.w-nameBanner .nb-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.06em; padding: 0 0.3em; }
.w-nameBanner .nb-main { font-weight: 800; font-style: italic; letter-spacing: 0.015em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 calc(12px * var(--glow-k)) rgba(var(--glow-rgb), 0.25); white-space: nowrap; }
.w-nameBanner .nb-sub { font-size: 0.28em; color: var(--c2); letter-spacing: 0.25em; font-weight: 700; font-style: italic; }
.w-nameBanner .nb-sub:empty { display: none; }

/* ---- liveBadge -------------------------------------------------------- */
.w-liveBadge { display: flex; align-items: center; }
.w-liveBadge > div { display: flex; align-items: center; height: 100%; width: 100%; }
.lb-tri { display: block; width: 0.75em; height: 0.85em; background: var(--gold-grad); clip-path: polygon(0 0, 100% 50%, 0 100%); flex: 0 0 auto; filter: drop-shadow(0 0 4px rgba(var(--glow-rgb), 0.6)); }
.lb-tri.dark { background: var(--text-on); filter: none; }
.lb-txt { display: flex; flex-direction: column; justify-content: center; line-height: 0.95; }
.lb-txt b { font-weight: 900; font-style: italic; color: var(--c2); font-size: 1.15em; letter-spacing: 0.02em; }
.lb-txt span { font-weight: 700; font-style: italic; font-size: 0.62em; letter-spacing: 0.22em; color: var(--text); }
.lb-txt span:empty { display: none; }

.lb-tag { gap: 0.35em; }
.lb-tag .waves { font-size: 0.9em; margin-right: 0.1em; }
.lb-tag .lb-box { position: relative; height: 100%; display: flex; align-items: center; }
.lb-tag .lb-box .ap-content { display: flex; align-items: center; padding: 0 0.55em; font-weight: 900; font-style: italic; letter-spacing: 0.04em; white-space: nowrap; }
.lb-tag .lb-box.sub .ap-content { font-size: 0.72em; letter-spacing: 0.18em; }

.lb-play { gap: 0.45em; }
.lb-play .waves { font-size: 0.75em; opacity: 0.9; }

.lb-pill { justify-content: center; gap: 0.4em; border: 2px solid var(--c2); border-radius: 999px; background: var(--panel-grad); padding: 0 0.8em; white-space: nowrap; }
.lb-pill b { font-weight: 900; font-style: italic; color: var(--c2); }
.lb-pill span { font-weight: 700; font-style: italic; font-size: 0.65em; letter-spacing: 0.2em; }
.lb-pill span:empty { display: none; }

.lb-bubble { position: relative; justify-content: center; gap: 0.3em; background: var(--gold-grad); color: var(--text-on); border-radius: 0.3em; font-weight: 900; font-style: italic; padding: 0 0.5em; }
.lb-bubble::after { content: ''; position: absolute; left: 20%; bottom: -0.3em; width: 0.6em; height: 0.6em; background: var(--c3); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.lb-bubble .lb-tri { width: 0.5em; height: 0.6em; background: var(--text-on); filter: none; }

.lb-wave { gap: 0.4em; }
.lb-wave b { font-weight: 900; font-style: italic; color: var(--c2); font-size: 1.15em; }
.lb-wave .eq { font-size: 1.1em; }
.lb-wave span:not(.eq) { font-weight: 700; font-style: italic; font-size: 0.62em; letter-spacing: 0.22em; }

.lb-round { position: relative; justify-content: center; border-radius: 50%; background: var(--gold-grad); width: var(--wg-h, 2.6em); height: 100%; margin: 0 auto; }
.lb-round::before { content: ''; position: absolute; top: -0.2em; right: -0.2em; bottom: -0.2em; left: -0.2em; border-radius: 50%; border: 2px solid var(--c2); opacity: 0; animation: ring calc(1.8s * var(--anim-k)) ease-out infinite; }
.lb-round .lb-tri { width: 0.9em; height: 1em; margin-left: 0.15em; }
.w-liveBadge.v-round { justify-content: center; }
.w-liveBadge.v-round > div { width: auto; }

/* ---- ticker ----------------------------------------------------------- */
.w-ticker { display: flex; align-items: stretch; gap: 0.2em; }
.w-ticker .tk-label { flex: 0 0 auto; display: flex; align-items: center; }
.w-ticker .tk-label .ap-content { display: flex; align-items: center; padding: 0 0.9em 0 0.7em; font-weight: 900; font-style: italic; letter-spacing: 0.08em; white-space: nowrap; }
.w-ticker .tk-track { flex: 1; min-width: 0; }
.w-ticker .tk-view { overflow: hidden; display: flex; align-items: center; }
.w-ticker .tk-scroll { display: flex; white-space: nowrap; will-change: transform; animation: tickerMove var(--dur, 20s) linear infinite; }
.w-ticker .tk-scroll.rtl { animation-direction: reverse; }
.w-ticker .tk-text { font-weight: 700; font-style: italic; letter-spacing: 0.03em; padding-right: 1.5em; }
.w-ticker .tk-text::after { content: var(--sep, '•'); color: var(--c2); margin-left: 1.5em; }
.w-ticker .tk-line { position: absolute; left: 12%; right: 0; bottom: -0.3em; height: 2px; background: linear-gradient(90deg, var(--c2), rgba(var(--c2-rgb), 0)); }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- webcamFrame / contentFrame -------------------------------------- */
.w-webcamFrame .cf-tab, .w-contentFrame .cfr-tab { position: absolute; height: 1.6em; display: flex; align-items: center; z-index: 3; }
.w-webcamFrame .cf-tab .ap-content, .w-contentFrame .cfr-tab .ap-content { display: flex; align-items: center; padding: 0 1em 0 0.7em; font-weight: 800; font-style: italic; letter-spacing: 0.08em; white-space: nowrap; }
.w-webcamFrame .cf-tab-l { left: 6%; bottom: -0.45em; }
.w-webcamFrame .cf-tab-r { right: 6%; bottom: -0.45em; font-size: 0.8em; color: var(--c2); }
.w-webcamFrame .cf-slashes { position: absolute; right: 4%; top: -0.1em; font-size: 0.55em; z-index: 3; }
.w-webcamFrame .cf-dots { position: absolute; left: -0.5em; top: 30%; }
.w-contentFrame .cfr-tab-l { left: 4%; bottom: -0.5em; }
.w-contentFrame .cfr-tab-r { right: 4%; bottom: -0.5em; color: var(--c2); }
.w-contentFrame .cfr-top { position: absolute; left: 50%; top: -0.2em; transform: translateX(-50%); display: flex; gap: 0.4em; align-items: center; z-index: 3; }
.w-contentFrame .cfr-top .slashes { font-size: 0.6em; }
.w-contentFrame .cfr-top .cfr-topbar { width: 5em; height: 3px; background: var(--c2); }

/* ---- buttonGrid ------------------------------------------------------- */
.w-buttonGrid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--gap, 14px); align-content: stretch; }
.bg-btn { position: relative; min-height: 1.6em; }
.bg-btn .bg-acc { position: absolute; left: var(--bw); top: var(--bw); bottom: var(--bw); width: 1em; background: var(--gold-grad); clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%); z-index: 2; }
.bg-btn .bg-acc2 { position: absolute; right: 0.9em; bottom: 4px; width: 28%; height: 2px; background: var(--c2); z-index: 2; opacity: 0.9; }
.bg-btn .bg-acc3 { position: absolute; right: 0.4em; top: 4px; font-size: 0.35em; z-index: 2; }
.bg-btn .bg-label { display: flex; align-items: center; justify-content: center; font-weight: 800; font-style: italic; letter-spacing: 0.06em; padding-left: 0.6em; white-space: nowrap; }
.bg-btn.style-b .bg-acc { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); width: 0.45em; }
.bg-btn.style-b .ap-body { background: var(--gold-grad); }
.bg-btn.style-b .bg-label { color: var(--text-on); }

/* ---- nameTag ---------------------------------------------------------- */
.w-nameTag { display: flex; flex-direction: column; }
.w-nameTag .nt-top { display: flex; align-items: center; gap: 0.5em; height: 1.1em; padding-left: 0.6em; font-size: 0.55em; color: var(--c2); font-weight: 700; font-style: italic; letter-spacing: 0.2em; }
.w-nameTag .nt-top.empty { display: none; }
.w-nameTag .nt-top .slashes { font-size: 0.8em; }
.w-nameTag .nt-main { flex: 1; min-height: 1.3em; }
.w-nameTag .nt-text { display: flex; align-items: center; padding: 0 1.2em 0 0.9em; font-weight: 900; font-style: italic; letter-spacing: 0.04em; white-space: nowrap; }
.w-nameTag.v-a .nt-main .ap-shine::after { opacity: 0.9; }
.w-nameTag.v-b .nt-strip { position: absolute; left: 8%; right: 20%; bottom: -0.28em; height: 0.28em; background: var(--gold-grad-h); clip-path: polygon(0 0, 100% 0, calc(100% - 0.3em) 100%, 0.3em 100%); z-index: 3; }
.w-nameTag.v-b .nt-main { overflow: visible; }
.w-nameTag .nt-text .icon { width: 1.1em; height: 1.1em; margin-right: 0.4em; }

/* ---- chatPanel -------------------------------------------------------- */
.w-chatPanel .cp { display: flex; flex-direction: column; padding: 0.55em 0.75em 0.6em; }
.w-chatPanel .cp-head { display: flex; align-items: center; justify-content: center; gap: 0.6em; font-size: 1.05em; font-weight: 900; font-style: italic; letter-spacing: 0.12em; color: var(--c2); padding-bottom: 0.35em; border-bottom: 2px solid rgba(var(--c2-rgb), 0.55); margin-bottom: 0.45em; }
.w-chatPanel .cp-head.hidden { display: none; }
.w-chatPanel .cp-head .slashes { font-size: 0.6em; }
.w-chatPanel .cp-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35em; overflow: hidden; }
.w-chatPanel .cp-msg { text-transform: none; line-height: 1.2; animation: enterSlideUp calc(0.4s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1) both; word-wrap: break-word; overflow-wrap: anywhere; }
.w-chatPanel .cp-user { color: var(--c2); font-weight: 800; font-style: italic; text-transform: uppercase; margin-right: 0.3em; }
.w-chatPanel .cp-user::after { content: ':'; }
.w-chatPanel .cp-text { color: var(--text); font-weight: 500; }
.w-chatPanel .cp-avatar { width: 1.3em; height: 1.3em; border-radius: 50%; vertical-align: -0.3em; margin-right: 0.3em; border: 1px solid var(--c2); object-fit: cover; }
.w-chatPanel .cp-badge { display: inline-block; font-size: 0.6em; padding: 0.1em 0.35em; background: var(--c2); color: var(--text-on); font-weight: 800; margin-right: 0.4em; vertical-align: 0.15em; clip-path: polygon(0 0, 100% 0, calc(100% - 0.3em) 100%, 0 100%); }
.w-chatPanel .cp-empty { color: rgba(255, 255, 255, 0.3); font-weight: 600; font-style: italic; text-transform: none; font-size: 0.85em; }

/* ---- statusCard ------------------------------------------------------- */
.w-statusCard .sc-panel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.w-statusCard .sc { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.08em; padding: 0.1em 1.2em; }
.w-statusCard .sc-ribbon { align-self: flex-start; margin-left: 5%; background: var(--gold-grad); color: var(--text-on); padding: 0.18em 1em 0.18em 0.6em; font-size: 0.3em; font-weight: 800; font-style: italic; letter-spacing: 0.12em; clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 100%, 0 100%); white-space: nowrap; }
.w-statusCard .sc-ribbon:empty { display: none; }
.w-statusCard .sc-main { font-weight: 900; font-style: italic; letter-spacing: 0.01em; white-space: nowrap; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 calc(16px * var(--glow-k)) rgba(var(--glow-rgb), 0.35); }
.w-statusCard .sc-cd { font-size: 0.48em; color: var(--c2); font-weight: 800; font-style: italic; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.w-statusCard .sc-cd.hidden { display: none; }
.w-statusCard .sc-bar { position: absolute; width: 0.22em; height: 42%; top: 29%; background: var(--gold-grad); z-index: 2; }
.w-statusCard .sc-bar-l { left: 2.2%; clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%); }
.w-statusCard .sc-bar-r { right: 2.2%; clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); }
.w-statusCard .sc-bar-l::after, .w-statusCard .sc-bar-r::after { content: ''; position: absolute; left: 0; right: 0; top: 45%; height: 10%; background: var(--bg2); }
.w-statusCard .sc-corner { position: absolute; width: 1.1em; height: 1.1em; z-index: 3; }
.w-statusCard .sc-corner.tr { right: 0.35em; top: 0.3em; border-top: 3px solid var(--c2); border-right: 3px solid var(--c2); }
.w-statusCard .sc-corner.bl { left: 0.35em; bottom: 0.3em; border-bottom: 3px solid var(--c2); border-left: 3px solid var(--c2); }
.w-statusCard .sc-slashes { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.25em; font-size: 0.16em; z-index: 3; }
.w-statusCard.v-compact .sc { gap: 0.1em; padding: 0.2em 0.6em; }
.w-statusCard.v-compact .sc-ribbon { align-self: center; margin-left: 0; clip-path: polygon(0.6em 0, calc(100% - 0.6em) 0, 100% 100%, 0 100%); padding: 0.18em 1em; }
.w-statusCard.v-compact .sc-bar { height: 30%; top: 35%; }
.w-statusCard.v-compact .sc-main { font-size: 0.9em; }

/* ---- recentBand ------------------------------------------------------- */
.w-recentBand .rb { display: flex; align-items: center; justify-content: space-around; padding: 0 1em; gap: 0.5em; }
.w-recentBand .rb-item { display: flex; flex-direction: column; align-items: center; gap: 0.12em; min-width: 0; }
.w-recentBand .rb-label { font-size: 0.6em; color: var(--c2); letter-spacing: 0.18em; font-weight: 700; font-style: italic; white-space: nowrap; }
.w-recentBand .rb-value { font-weight: 800; font-style: italic; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.w-recentBand .rb-value b { color: var(--c1); margin-left: 0.35em; }
.w-recentBand .rb-sep { width: 0.32em; height: 1.5em; background: var(--c2); transform: skewX(-25deg); opacity: 0.75; flex: 0 0 auto; }
.w-recentBand.inline .rb-item { flex-direction: row; gap: 0.5em; }

/* ---- alertBox --------------------------------------------------------- */
.w-alertBox { opacity: 0; pointer-events: none; }
.w-alertBox.show, .w-alertBox.editor, .w-alertBox.hide { opacity: 1; }
.w-alertBox .ab-persp { position: absolute; top: 0; right: 0; bottom: 0; left: 0; perspective: 1100px; perspective-origin: 50% 50%; }
.w-alertBox .ab-card { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-style: preserve-3d; }
.w-alertBox .ab-float { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-style: preserve-3d; }
.w-alertBox.float3d.show .ab-float { animation: abFloat calc(4.5s * var(--anim-k)) ease-in-out infinite; }
@keyframes abFloat {
  0%, 100% { transform: rotateX(2deg) rotateY(-3deg) translateZ(0); }
  50% { transform: rotateX(-3deg) rotateY(3deg) translateZ(16px); }
}

/* entrances / exits (on .ab-card, so they compose with the idle float on .ab-float) */
.w-alertBox.show.fx-flip3d .ab-card { animation: abFlipIn calc(0.95s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.w-alertBox.show.fx-cube3d .ab-card { transform-origin: 50% 0; animation: abCubeIn calc(0.9s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.w-alertBox.show.fx-slam3d .ab-card { animation: abSlamIn calc(0.75s * var(--anim-k)) cubic-bezier(0.15, 0.9, 0.3, 1) both; }
.w-alertBox.show.fx-swing3d .ab-card { transform-origin: 50% -60%; animation: abSwingIn calc(1.2s * var(--anim-k)) ease-out both; }
.w-alertBox.show.fx-glitch .ab-card { animation: abIn calc(0.75s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.w-alertBox.hide .ab-card { animation: abOut3d calc(0.6s * var(--anim-k)) ease-in both; }
.w-alertBox.hide.fx-glitch .ab-card { animation: abOut calc(0.5s * var(--anim-k)) ease-in both; }
@keyframes abFlipIn {
  0% { opacity: 0; transform: rotateY(-100deg) translateZ(-160px); }
  55% { opacity: 1; transform: rotateY(14deg) translateZ(20px); }
  78% { transform: rotateY(-6deg); }
  100% { transform: none; }
}
@keyframes abCubeIn {
  0% { opacity: 0; transform: rotateX(-105deg) translateY(-30px); }
  60% { opacity: 1; transform: rotateX(12deg); }
  80% { transform: rotateX(-5deg); }
  100% { transform: none; }
}
@keyframes abSlamIn {
  0% { opacity: 0; transform: translateZ(600px) rotateX(40deg); }
  60% { opacity: 1; transform: translateZ(-30px) rotateX(-6deg); }
  100% { transform: none; }
}
@keyframes abSwingIn {
  0% { opacity: 0; transform: rotateX(-110deg); }
  40% { opacity: 1; transform: rotateX(22deg); }
  60% { transform: rotateX(-12deg); }
  80% { transform: rotateX(6deg); }
  100% { transform: none; }
}
@keyframes abOut3d {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: rotateX(75deg) translateY(50px) translateZ(-250px); }
}
@keyframes abIn {
  0% { opacity: 0; transform: translateY(-40px) scale(0.9); clip-path: inset(0 0 100% 0); }
  35% { opacity: 1; transform: translateY(4px) scale(1.02); clip-path: inset(0 0 0 0); }
  48% { transform: translate(-6px, 0) skewX(6deg); }
  58% { transform: translate(5px, 0) skewX(-4deg); }
  70% { transform: translate(-2px, 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes abOut {
  0% { opacity: 1; transform: none; }
  30% { transform: translate(4px, 0) skewX(-5deg); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.95); }
}

/* simple cyber variants (a / b) */
.w-alertBox .ab-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.w-alertBox .ab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.08em; padding: 0.2em 0.8em; }
.w-alertBox .ab-title { display: flex; align-items: center; gap: 0.5em; font-size: 0.52em; color: var(--c2); letter-spacing: 0.16em; font-weight: 800; font-style: italic; white-space: nowrap; }
.w-alertBox .ab-title .slashes { font-size: 0.7em; }
.w-alertBox .ab-msg { font-weight: 900; font-style: italic; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 calc(14px * var(--glow-k)) rgba(var(--glow-rgb), 0.45); }
.w-alertBox .ab-sub { font-size: 0.5em; text-transform: none; color: var(--c1); font-weight: 700; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.w-alertBox .ab-sub:empty { display: none; }
.w-alertBox.v-b .ab { padding-top: 0.75em; }
.w-alertBox.v-b .ab-title { position: absolute; top: var(--bw); left: var(--bw); right: var(--bw); justify-content: center; background: var(--gold-grad); color: var(--text-on); padding: 0.22em 0; }
.w-alertBox.v-b .ab-title .slashes i { background: var(--text-on); }

/* card / glass / neon: avatar + pill + gift object, on separate 3D layers */
.w-alertBox .ab-av { position: absolute; left: 0; top: 50%; width: calc(var(--wg-h, 170px) * 0.88); height: calc(var(--wg-h, 170px) * 0.88); transform: translateY(-50%) translateZ(55px); z-index: 3; }
.w-alertBox .ab-av-ring { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: conic-gradient(var(--c1), var(--c2), var(--c3), var(--c1)); animation: abRing calc(3s * var(--anim-k)) linear infinite; filter: drop-shadow(0 0 calc(8px * var(--glow-k)) rgba(var(--glow-rgb), 0.7)); }
@keyframes abRing { to { transform: rotate(360deg); } }
.w-alertBox .ab-av-img { position: absolute; top: 5%; right: 5%; bottom: 5%; left: 5%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--bg), var(--bg2)); display: flex; align-items: center; justify-content: center; color: var(--c2); }
.w-alertBox .ab-av-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-alertBox .ab-av-img svg { width: 72%; height: 72%; }
.w-alertBox .ab-pill { position: absolute; left: calc(var(--wg-h, 170px) * 0.5); right: 0; top: 9%; bottom: 9%; transform: translateZ(0); }
.w-alertBox.no-av .ab-pill { left: 0; }
.w-alertBox .ab-txt { display: flex; flex-direction: column; justify-content: center; gap: 0.04em; padding-left: calc(var(--wg-h, 170px) * 0.46 + 0.4em); padding-right: calc(var(--wg-h, 170px) * 0.8 + 0.5em); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.w-alertBox.no-av .ab-txt { padding-left: 0.9em; }
.w-alertBox.no-obj .ab-txt { padding-right: 0.9em; }
.w-alertBox .ab-lbl { font-size: 0.4em; letter-spacing: 0.26em; color: var(--c2); font-weight: 700; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-alertBox .ab-name { font-size: 1em; line-height: 1.05; font-weight: 900; font-style: italic; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 calc(14px * var(--glow-k)) rgba(var(--glow-rgb), 0.45); }
.w-alertBox .ab-det { font-size: 0.5em; text-transform: none; color: var(--c1); font-weight: 600; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-alertBox .ab-det:empty { display: none; }
.w-alertBox .ab-right { position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%) translateZ(75px); display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 4; transform-style: preserve-3d; }
.w-alertBox .ab-obj { width: calc(var(--wg-h, 170px) * 0.6); height: calc(var(--wg-h, 170px) * 0.6); display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.w-alertBox.spin.show .ab-obj { animation: abCoin calc(2.8s * var(--anim-k)) linear infinite; }
@keyframes abCoin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.w-alertBox .ab-gift { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
.w-alertBox .ab-ico { width: 78%; height: 78%; display: flex; color: var(--c2); filter: drop-shadow(0 0 calc(10px * var(--glow-k)) rgba(var(--glow-rgb), 0.75)); }
.w-alertBox .ab-ico .icon { width: 100%; height: 100%; }
.w-alertBox .ab-count { font-size: 0.78em; font-weight: 900; font-style: italic; line-height: 1; color: var(--text); text-shadow: 0 0 calc(14px * var(--glow-k)) rgba(var(--glow-rgb), 0.85), 0 3px 0 rgba(0, 0, 0, 0.35); margin-top: -0.1em; }
.w-alertBox .ab-count.hidden { display: none; }

/* glass pill (StreamWorld-like) */
.w-alertBox .ab-round { border-radius: 999px; }
.w-alertBox.v-glass .ab-round { background: linear-gradient(180deg, rgba(64, 72, 92, 0.93) 0%, rgba(24, 29, 40, 0.95) 55%, rgba(14, 18, 26, 0.97) 100%); border: 2px solid rgba(var(--c2-rgb), 0.6); box-shadow: 0 0 calc(24px * var(--glow-k)) rgba(var(--glow-rgb), 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -14px 34px rgba(0, 0, 0, 0.45); }
.w-alertBox.v-glass .ab-hl { position: absolute; left: 22%; right: 8%; top: 4px; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--c2-rgb), 0.95), transparent); }
/* neon pill */
.w-alertBox.v-neon .ab-round { background: linear-gradient(180deg, rgba(var(--c2-rgb), 0.38) 0%, rgba(var(--c2-rgb), 0.1) 50%, rgba(0, 0, 0, 0.88) 100%); border: 3px solid var(--c2); box-shadow: 0 0 calc(16px * var(--glow-k)) var(--c2), 0 0 calc(44px * var(--glow-k)) rgba(var(--c2-rgb), 0.55), inset 0 0 30px rgba(var(--c2-rgb), 0.45); animation: abNeon calc(1.8s * var(--anim-k)) ease-in-out infinite; }
.w-alertBox.v-neon .ab-hl { position: absolute; left: 12%; top: -8px; width: 32%; height: 8px; background: var(--c2); clip-path: polygon(0 100%, 6% 0, 100% 0, 104% 100%); filter: drop-shadow(0 0 8px var(--c2)); }
@keyframes abNeon { 0%, 100% { box-shadow: 0 0 calc(16px * var(--glow-k)) var(--c2), 0 0 calc(44px * var(--glow-k)) rgba(var(--c2-rgb), 0.55), inset 0 0 30px rgba(var(--c2-rgb), 0.45); } 50% { box-shadow: 0 0 calc(6px * var(--glow-k)) var(--c2), 0 0 calc(20px * var(--glow-k)) rgba(var(--c2-rgb), 0.35), inset 0 0 16px rgba(var(--c2-rgb), 0.3); } }

/* ---- mediaAlert ------------------------------------------------------- */
.w-mediaAlert { pointer-events: none; }
.w-mediaAlert .ma-dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0; transition: opacity 0.25s ease; }
.w-mediaAlert.on .ma-dim { opacity: var(--dim-o, 0); }
.w-mediaAlert.out .ma-dim { opacity: 0; }
.w-mediaAlert .ma-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; perspective: 1200px; }
.w-mediaAlert .ma-stage[data-align="top"] { align-items: flex-start; padding-top: 3%; }
.w-mediaAlert .ma-stage[data-align="bottom"] { align-items: flex-end; padding-bottom: 3%; }
.w-mediaAlert .ma-stage[data-align="left"] { justify-content: flex-start; padding-left: 3%; }
.w-mediaAlert .ma-stage[data-align="right"] { justify-content: flex-end; padding-right: 3%; }
.w-mediaAlert .ma-media { display: block; width: var(--ma-size, 60%); height: var(--ma-size, 60%); object-fit: contain; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.w-mediaAlert.on .ma-media { opacity: 1; }
.w-mediaAlert.on.fx-pop .ma-media { animation: maPop calc(0.45s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.w-mediaAlert.on.fx-zoom .ma-media { animation: maZoom calc(0.5s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.w-mediaAlert.on.fx-slam .ma-media { animation: maSlam calc(0.55s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.w-mediaAlert.on.fx-flip3d .ma-media { animation: maFlip calc(0.8s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.w-mediaAlert.on.fx-spin3d .ma-media { animation: maSpin calc(0.9s * var(--anim-k)) cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.w-mediaAlert.on.fx-fade .ma-media { animation: enterFade calc(0.45s * var(--anim-k)) ease both; }
.w-mediaAlert.out .ma-media { animation: maOut calc(0.4s * var(--anim-k)) ease-in both; }
@keyframes maPop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes maZoom { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: none; } }
@keyframes maSlam { 0% { opacity: 0; transform: scale(1.9); } 70% { opacity: 1; transform: scale(0.96); } 100% { opacity: 1; transform: none; } }
@keyframes maFlip { 0% { opacity: 0; transform: rotateY(-95deg) translateZ(-200px); } 60% { opacity: 1; transform: rotateY(12deg); } 100% { opacity: 1; transform: none; } }
@keyframes maSpin { 0% { opacity: 0; transform: rotateY(-540deg) scale(0.3); } 100% { opacity: 1; transform: none; } }
@keyframes maOut { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.85) translateY(20px); } }
.w-mediaAlert .ma-placeholder { position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4em; border: 3px dashed rgba(25, 211, 255, 0.35); color: rgba(255, 255, 255, 0.4); text-transform: none; text-align: center; font-size: 34px; }
.w-mediaAlert .ma-placeholder b { font-size: 1.6em; letter-spacing: 0.08em; font-style: italic; }
.w-mediaAlert .ma-placeholder span { font-size: 0.8em; max-width: 70%; }
.w-mediaAlert.on .ma-placeholder { display: none; }

/* ---- textPanel -------------------------------------------------------- */
.w-textPanel .tp-inner { position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; background: rgba(var(--c2-rgb), 0.85); clip-path: var(--poly); z-index: 1; --cut-tl: 12px; --cut-br: 12px; --cut-tr: 0px; --cut-bl: 0px; --bw: 1.5px; }
.w-textPanel .tp-inner::after { content: ''; position: absolute; top: 1.5px; right: 1.5px; bottom: 1.5px; left: 1.5px; background: var(--panel-grad); clip-path: var(--poly-in); }
.w-textPanel .tp-dots { position: absolute; left: 0.45em; top: 50%; transform: translateY(-50%); z-index: 2; }
.w-textPanel .tp-dots.right { left: auto; right: 0.45em; }
.w-textPanel .tp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1em; padding: 0.2em 1.4em; text-align: center; }
.w-textPanel .tp.left { align-items: flex-start; text-align: left; }
.w-textPanel .tp.right { align-items: flex-end; text-align: right; }
.w-textPanel .tp-text { font-weight: 800; font-style: italic; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.w-textPanel .tp-sub { font-size: 0.5em; color: var(--c2); letter-spacing: 0.15em; font-weight: 700; font-style: italic; }
.w-textPanel .tp-sub:empty { display: none; }
.w-textPanel .tp-tick { position: absolute; width: 0.9em; height: 2px; background: var(--c2); z-index: 2; top: 50%; }
.w-textPanel .tp-tick.l { left: -0.25em; } .w-textPanel .tp-tick.r { right: -0.25em; }
.w-textPanel.v-single .tp-inner { display: none; }

/* ---- goalBar ---------------------------------------------------------- */
.w-goalBar { display: flex; flex-direction: column; }
.w-goalBar .gb-top { display: flex; justify-content: space-between; align-items: flex-end; height: 1.15em; flex: 0 0 auto; }
.w-goalBar .gb-label { height: 1.1em; display: flex; align-items: center; margin-left: 0.3em; }
.w-goalBar .gb-label .ap-content { display: flex; align-items: center; padding: 0 0.9em 0 0.5em; font-size: 0.72em; font-weight: 800; font-style: italic; letter-spacing: 0.12em; white-space: nowrap; }
.w-goalBar .gb-nums { font-weight: 800; font-style: italic; font-size: 0.8em; padding-right: 0.5em; padding-bottom: 0.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-goalBar .gb-nums .gb-sep { color: var(--c2); margin: 0 0.25em; }
.w-goalBar .gb-nums .gb-tgt { color: var(--c1); }
.w-goalBar .gb-nums.hidden { visibility: hidden; }
.w-goalBar .gb-track { flex: 1; min-height: 10px; }
.w-goalBar .gb-view { padding: 3px; }
.w-goalBar .gb-fill { position: relative; height: 100%; min-width: 1.5%; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); overflow: hidden; }
.w-goalBar .gb-tip { position: absolute; right: 2px; top: 0; bottom: 0; width: 4px; background: #fff; opacity: 0.85; }
.w-goalBar .gb-pct { position: absolute; right: 0.6em; top: 50%; transform: translateY(-50%); font-size: 0.7em; font-weight: 800; font-style: italic; color: var(--text); text-shadow: 0 1px 2px #000; z-index: 3; }
.w-goalBar.done .gb-fill .stripes::before { background: repeating-linear-gradient(-45deg, #fff 0 10px, var(--c1) 10px 20px); }

/* ---- image ------------------------------------------------------------ */
.w-image { overflow: visible; }
.w-image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
.w-image.framed .ap-content { overflow: hidden; clip-path: var(--poly-in); top: var(--bw); right: var(--bw); bottom: var(--bw); left: var(--bw); }
.w-image.round { border-radius: 50%; overflow: hidden; border: 3px solid var(--c2); }
.w-image.round img { border-radius: 50%; }
.w-image .img-empty { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.3); font-size: 1em; font-weight: 700; font-style: italic; border: 1px dashed rgba(255, 255, 255, 0.2); }

/* ---- text ------------------------------------------------------------- */
.w-text { display: flex; align-items: center; justify-content: center; padding: 0 0.1em; }
.w-text.left { justify-content: flex-start; } .w-text.right { justify-content: flex-end; }
.w-text .tx { font-style: italic; letter-spacing: 0.03em; white-space: pre-wrap; line-height: 1.05; text-align: inherit; }
.w-text.left .tx { text-align: left; } .w-text.right .tx { text-align: right; } .w-text.center .tx { text-align: center; }
.w-text .tx.normal { text-transform: none; }
.w-text .tx.upright { font-style: normal; }

/* ---- particles -------------------------------------------------------- */
.w-particles canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }

/* ---- counter ---------------------------------------------------------- */
.w-counter .ct { display: flex; align-items: center; justify-content: space-around; padding: 0 0.8em; gap: 0.5em; }
.w-counter .ct-item { display: flex; align-items: center; gap: 0.35em; font-weight: 800; font-style: italic; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-counter .ct-item .icon { color: var(--c2); width: 1em; height: 1em; }
.w-counter .ct-item .ct-lbl { font-size: 0.55em; color: var(--c2); letter-spacing: 0.15em; }
.w-counter .ct-sep { width: 0.28em; height: 1.3em; background: var(--c2); transform: skewX(-25deg); opacity: 0.6; }

/* ---- decor ------------------------------------------------------------ */
.w-decor { display: flex; align-items: center; }
.w-decor .slashes { height: 100%; }
.w-decor .slashes i { height: 100%; }
.w-decor .dc-lineH { width: 100%; height: var(--th, 3px); }
.w-decor .dc-lineH.flip::after { right: auto; left: -5px; }
.w-decor .dc-lineV { width: var(--th, 3px); height: 100%; background: var(--c2); position: relative; margin: 0 auto; }
.w-decor .dc-lineV::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: var(--c2); transform: rotate(45deg); }
.w-decor .dc-dots { display: flex; gap: 0.6em; width: 100%; justify-content: space-between; }
.w-decor .dc-dots i { width: var(--th, 3px); height: var(--th, 3px); background: var(--c2); display: block; transform: scale(2); }
.w-decor .dc-hatch { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, var(--c2) 0 var(--th, 3px), transparent var(--th, 3px) calc(var(--th, 3px) * 3)); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); opacity: 0.9; }
.w-decor .dc-bracket { width: 100%; height: 100%; }