/* Academy on TV (SPEC-academy-cast) — screens/academy*.js. Values from the canvas frames
 * agents/cto/design/academy-tv/project/*.dc.html (1920 × 1080), tokens from ds2 academy. No confetti: the
 * celebrations use the badge, a spotlight, rings, rays and the board's beds. */

.ac {
  --ac-body: 'Outfit', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ac-gold: #ffc93c;
  --ac-green: #2fd47a;
  --ac-red: #fb6161;
  --ac-blue: #014cfd;
  --ac-grey: #8e98a0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--ac-body);
  text-transform: none;
  letter-spacing: 0;
  color: #d1d5d8;
}
.ac * { box-sizing: border-box; }
.ac-disp { font-family: var(--dh-font-display); font-weight: 400; }
.ac-eye { font-family: var(--dh-font-display); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--ac-grey); }
.ac-gold { color: var(--ac-gold); }
.ac-fill { flex: 1; }
.ac-ico { width: 30px; height: 30px; flex: none; }

/* Backgrounds */
.ac-bg { position: absolute; inset: 0; }
.ac-bg--lobby { background: radial-gradient(ellipse 70% 62% at 50% 38%, #0b2a6e 0%, #03123a 50%, #00091f 100%); }
.ac-bg--intro { background: radial-gradient(ellipse 60% 70% at 24% 40%, color-mix(in srgb, var(--tc) 22%, #03123a) 0%, #03123a 52%, #00091f 100%); }
.ac-bg--play { background: radial-gradient(ellipse 70% 62% at 60% 45%, #0b2a6e 0%, #03123a 50%, #00091f 100%); }
.ac-bg--go { background: radial-gradient(ellipse 55% 60% at 50% 46%, color-mix(in srgb, var(--tc) 28%, #03123a) 0%, #03123a 50%, #00091f 100%); }
.ac-bg--won { background: radial-gradient(ellipse 50% 60% at 24% 46%, #3a2c0a 0%, #03123a 55%, #00091f 100%); }
.ac-bg--lost { background: radial-gradient(ellipse 60% 62% at 30% 45%, #0b2a6e 0%, #03123a 52%, #00091f 100%); }
.ac-bg--mastered { background: #00091f; }
.ac-bg--moment { background: radial-gradient(ellipse 60% 70% at 50% 50%, #12195e 0%, #070d38 55%, #00091f 100%); }

/* Pills */
.ac-pill { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; background: rgba(11, 13, 17, .44); border: 1px solid rgba(66, 155, 252, .3); font-family: var(--dh-font-display); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.ac-pill__face { width: 40px; height: 40px; border-radius: 50%; margin: -6px 0 -6px -10px; object-fit: cover; flex: none; }
.ac-pill__face--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--ac-blue); font-size: 15px; }
.ac-pill--track { border-color: color-mix(in srgb, var(--tc) 55%, transparent); }
.ac-pill--track .ac-dot { background: var(--tc); }
.ac-pill--live { border-color: rgba(47, 212, 122, .45); }
.ac-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.ac-dot--live { background: var(--ac-green); box-shadow: 0 0 0 5px rgba(47, 212, 122, .18); }

/* Headers + footer */
.ac-head { position: absolute; left: 64px; right: 64px; top: 40px; height: 88px; display: flex; align-items: center; gap: 24px; }
.ac-logo { width: 56px; height: 56px; flex: none; }
.ac-head__eye { font-size: 22px; }
.ac-head__stack { display: flex; flex-direction: column; gap: 8px; }
.ac-head__big { font-size: 44px; line-height: 1; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.ac-head--drill .ac-head__titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-head__name { font-size: 44px; line-height: 1; color: #fff; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ac-head__badge { width: 88px; height: 88px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px #00091f, 0 0 0 6px var(--tc, #429bfc); }
.ac-badge { display: block; border-radius: 50%; object-fit: cover; flex: none; }
.ac-badge--none { background: radial-gradient(circle, #0b2a6e, #03123a); border: 3px solid rgba(209, 213, 216, .2); }
.ac-foot { position: absolute; left: 64px; right: 64px; bottom: 40px; display: flex; align-items: center; gap: 16px; min-height: 34px; }
.ac-foot__text { font-size: 26px; color: #d1d5d8; }
.ac-foot__url { font-size: 16px; }

/* ── Lobby (Main) ─────────────────────────────────────────────────────────── */
.ac-today { position: absolute; left: 64px; top: 176px; width: 800px; height: 780px; border-radius: 32px; background: #014cfd; border: 1px solid rgba(255, 255, 255, .16); padding: 44px 48px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
.ac-today__cap { color: rgba(255, 255, 255, .8); display: flex; align-items: center; gap: 12px; }
.ac-today__cap .ac-ico { width: 24px; height: 24px; }
.ac-today__title { margin: 0; font-size: 68px; line-height: 1; color: #fff; }
.ac-today__title--big { font-size: 84px; }
.ac-today__why { margin: 0; font-size: 28px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.ac-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ac-row { display: flex; align-items: center; gap: 22px; padding: 16px 22px; border-radius: 22px; background: rgba(0, 9, 31, .3); }
.ac-row .ac-badge { width: 80px; height: 80px; }
.ac-row__text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ac-row__name { font-size: 30px; color: #fff; }
.ac-row__sub { font-size: 23px; color: rgba(255, 255, 255, .75); }
.ac-row__xp { font-size: 28px; color: var(--ac-gold); white-space: nowrap; }
.ac-row .ac-ico { width: 34px; height: 34px; }
.ac-streak { display: flex; align-items: center; gap: 14px; font-size: 26px; color: #fff; }
.ac-streak .ac-ico { width: 34px; height: 34px; }
.ac-streak b { font-weight: 600; }
.ac-streak__rest { color: rgba(255, 255, 255, .8); }
.ac-today--session { width: 860px; background: #0a47d9; }
.ac-today--session .ac-today__cap { color: rgba(255, 255, 255, .85); }

.ac-tracks { position: absolute; left: 912px; right: 64px; top: 176px; height: 780px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ac-track { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ac-track__head { display: flex; align-items: center; gap: 12px; padding: 0 6px 6px; }
.ac-track__head .ac-dot { width: 14px; height: 14px; background: var(--tc); }
.ac-track__name { font-size: 24px; letter-spacing: .08em; color: var(--tc); text-transform: uppercase; }
.ac-track__count { margin-left: auto; font-size: 22px; color: var(--ac-grey); white-space: nowrap; }
.ac-game { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 18px; border-radius: 22px; background: rgba(209, 213, 216, .07); border: 1px solid rgba(209, 213, 216, .1); min-height: 0; }
.ac-game--mastered { border-color: rgba(255, 201, 60, .5); background: rgba(255, 201, 60, .08); }
.ac-game__top { display: flex; align-items: center; gap: 18px; }
.ac-game .ac-badge { width: 92px; height: 92px; }
.ac-game--new .ac-badge { opacity: .6; }
.ac-game__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ac-game__name { font-size: 24px; line-height: 1.15; color: #fff; }
.ac-game__lv { font-size: 21px; color: var(--ac-grey); display: inline-flex; align-items: center; gap: 8px; }
.ac-game--mastered .ac-game__lv { color: var(--ac-gold); }
.ac-game__lock .ac-ico { width: 20px; height: 20px; }
.ac-pips { display: flex; gap: 4px; }
.ac-pips b { flex: 1; height: 8px; border-radius: 3px; background: rgba(209, 213, 216, .14); }
.ac-pips b.on { background: var(--pc, var(--ac-green)); }

/* ── Intro (TV-Intro) ─────────────────────────────────────────────────────── */
.ac-intro__left { position: absolute; left: 64px; top: 170px; width: 620px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ac-intro__medal { position: relative; width: 420px; height: 420px; }
.ac-intro__medal .ac-badge { position: relative; width: 420px; height: 420px; }
.ac-intro__glow { position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 28%, transparent), transparent 66%); }
.ac-intro__name { margin: 0; font-size: 84px; line-height: 1; color: #fff; letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.ac-intro__right { position: absolute; left: 760px; right: 64px; top: 176px; display: flex; flex-direction: column; gap: 34px; }
.ac-intro__level { display: flex; align-items: baseline; gap: 28px; }
.ac-intro__lv { font-size: 72px; line-height: 1; color: var(--ac-gold); text-transform: uppercase; }
.ac-intro__ask { font-size: 44px; color: #fff; }
.ac-intro__lock { color: var(--ac-grey); align-self: center; }
.ac-intro__line { margin: 0; font-size: 30px; line-height: 1.35; }
.ac-rules { display: flex; flex-direction: column; gap: 22px; }
.ac-rule { display: flex; align-items: flex-start; gap: 24px; }
.ac-rule b { flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(47, 212, 122, .16); border: 2px solid var(--ac-green); display: flex; align-items: center; justify-content: center; font-family: var(--dh-font-display); font-weight: 400; font-size: 24px; color: var(--ac-green); }
.ac-rule span { font-size: 30px; line-height: 1.35; color: #d1d5d8; padding-top: 6px; }
.ac-chips { display: flex; gap: 18px; }
.ac-chip { display: flex; flex-direction: column; gap: 8px; padding: 20px 26px; border-radius: 22px; background: rgba(209, 213, 216, .07); border: 1px solid rgba(209, 213, 216, .12); flex: 1; min-width: 0; }
.ac-chip .ac-eye { font-size: 16px; }
.ac-chip__v { font-size: 40px; color: #fff; white-space: nowrap; }
.ac-chip__v--word { font-size: 32px; line-height: 1.25; }
.ac-path { position: absolute; left: 64px; right: 64px; top: 790px; border-radius: 28px; background: rgba(209, 213, 216, .07); border: 1px solid rgba(209, 213, 216, .1); padding: 22px 28px 20px; display: flex; flex-direction: column; gap: 12px; }
.ac-path__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px; }
.ac-path__title { font-size: 18px; color: #d1d5d8; }
.ac-path__sub { font-size: 22px; color: var(--ac-grey); }
.ac-path__nodes { position: relative; display: flex; align-items: flex-start; }
.ac-path__rail, .ac-path__fill { position: absolute; left: 5%; top: 33px; height: 6px; border-radius: 3px; }
.ac-path__rail { right: 5%; background: rgba(209, 213, 216, .16); }
.ac-path__fill { background: var(--ac-green); }
.ac-nd { flex: 1; width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.ac-nd__slot { height: 72px; display: flex; align-items: center; }
.ac-nd__dot { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(209, 213, 216, .28); background: #0a1a44; display: flex; align-items: center; justify-content: center; font-family: var(--dh-font-display); font-size: 22px; color: var(--ac-grey); }
.ac-nd__dot svg { width: 26px; height: 26px; }
.ac-nd__label { font-size: 24px; color: var(--ac-grey); white-space: nowrap; }
.ac-nd--done .ac-nd__dot { background: var(--ac-green); border-color: var(--ac-green); color: #03261a; }
.ac-nd--done .ac-nd__label { color: var(--ac-green); }
.ac-nd--cur .ac-nd__dot { width: 72px; height: 72px; background: var(--ac-blue); border-color: #fff; color: #fff; box-shadow: 0 0 0 9px rgba(1, 76, 253, .35); }
.ac-nd--cur .ac-nd__label { color: var(--ac-gold); }
.ac-nd--crown .ac-nd__dot { width: 66px; height: 66px; border-color: var(--ac-gold); box-shadow: 0 0 0 9px rgba(255, 201, 60, .16); }
.ac-nd--crown .ac-nd__label { color: var(--ac-gold); }

/* ── GAME ON (TV-GameOn): one 3 s run ─────────────────────────────────────── */
.ac--gameOn > * { animation-iteration-count: 1; }
.ac-go__band { position: absolute; left: 0; right: 0; top: 570px; height: 150px; background: var(--ac-blue); transform: skewY(-4deg); box-shadow: 0 30px 80px rgba(1, 76, 253, .45); overflow: hidden; transform-origin: 0 50%; animation: ac-band 3s cubic-bezier(.2, .8, .2, 1) both; }
.ac-go__shine { position: absolute; top: 0; bottom: 0; width: 260px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); animation: ac-shine 3s ease-in-out both; }
.ac-go__edge { position: absolute; left: 0; right: 0; top: 560px; height: 4px; transform: skewY(-4deg); transform-origin: 100% 50%; animation: ac-edge 3s cubic-bezier(.2, .8, .2, 1) both; }
.ac-go__pop { position: absolute; left: 0; right: 0; top: 90px; display: flex; flex-direction: column; align-items: center; gap: 22px; animation: ac-pop 3s cubic-bezier(.2, 1.6, .4, 1) both; }
.ac-go__medal { position: relative; width: 280px; height: 280px; }
.ac-go__medal .ac-badge { position: relative; width: 280px; height: 280px; box-shadow: 0 0 0 6px #00091f, 0 0 0 12px var(--tc); }
.ac-go__glow { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 35%, transparent), transparent 66%); }
.ac-go__lv { font-size: 26px; }
.ac-go__word { position: absolute; left: 0; right: 0; top: 570px; margin: 0; height: 150px; display: flex; align-items: center; justify-content: center; font-size: 132px; line-height: 1; color: #fff; letter-spacing: .06em; text-transform: uppercase; transform: skewY(-4deg); animation: ac-go 3s cubic-bezier(.2, 1.4, .4, 1) both; }
.ac-go__rise { position: absolute; left: 0; right: 0; top: 820px; display: flex; align-items: center; justify-content: center; gap: 28px; animation: ac-rise-go 3s cubic-bezier(.2, .8, .2, 1) both; }
.ac-go__first { font-size: 22px; }
.ac-go__bed { font-size: 96px; line-height: 1; color: var(--ac-gold); }
.ac-go__pips { display: flex; gap: 12px; }
.ac-go__pips i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .6); animation: ac-pipin 3s ease-out both; }
.ac-go__line { position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; font-size: 18px; }
@keyframes ac-pop { 0% { transform: scale(.55); opacity: 0 } 12% { transform: scale(1); opacity: 1 } 90% { transform: scale(1); opacity: 1 } 100% { transform: scale(1.04); opacity: 0 } }
@keyframes ac-band { 0%, 8% { transform: skewY(-4deg) scaleX(0) } 24% { transform: skewY(-4deg) scaleX(1) } 90% { transform: skewY(-4deg) scaleX(1); opacity: 1 } 100% { transform: skewY(-4deg) scaleX(1); opacity: 0 } }
@keyframes ac-edge { 0%, 12% { transform: skewY(-4deg) scaleX(0) } 28% { transform: skewY(-4deg) scaleX(1) } 90% { transform: skewY(-4deg) scaleX(1); opacity: 1 } 100% { transform: skewY(-4deg) scaleX(1); opacity: 0 } }
@keyframes ac-shine { 0%, 34% { left: -320px } 62%, 100% { left: 2160px } }
@keyframes ac-go { 0%, 18% { transform: skewY(-4deg) scale(1.9); opacity: 0; letter-spacing: .32em; filter: blur(8px) } 32% { transform: skewY(-4deg) scale(1); opacity: 1; letter-spacing: .06em; filter: blur(0) } 40% { transform: skewY(-4deg) scale(1.06) } 48%, 90% { transform: skewY(-4deg) scale(1); opacity: 1 } 100% { transform: skewY(-4deg) scale(1.03); opacity: 0 } }
@keyframes ac-rise-go { 0%, 40% { transform: translateY(40px); opacity: 0 } 54%, 90% { transform: translateY(0); opacity: 1 } 100% { opacity: 0 } }
@keyframes ac-pipin { 0%, 52% { border-color: rgba(255, 255, 255, .1) } 62%, 100% { border-color: rgba(255, 255, 255, .6) } }

/* ── Gameplay (Play-*) ────────────────────────────────────────────────────── */
.ac-hero { position: absolute; left: 64px; top: 180px; width: 1040px; height: 776px; border-radius: 32px; background: #014cfd; border: 1px solid rgba(255, 255, 255, .16); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; }
.ac-hero__cap { color: rgba(255, 255, 255, .82); font-size: 22px; }
.ac-hero__main { display: flex; align-items: flex-end; gap: 44px; }
.ac-hero__right { margin-left: auto; display: flex; gap: 44px; align-items: flex-end; }
.ac-side { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; min-width: 0; }
.ac-side > span:first-child { font-family: var(--dh-font-display); font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.ac-side > b { font-family: var(--dh-font-display); font-weight: 400; font-size: 84px; line-height: 1; color: #fff; white-space: nowrap; display: inline-flex; align-items: center; gap: 22px; }
.ac-side > b small { font-size: 44px; color: rgba(255, 255, 255, .6); }
.ac-side--end { text-align: right; align-items: flex-end; }
.ac-side--end > b { font-size: 72px; }
.ac-side--big { padding-bottom: 0; }
.ac-side__sub { font-size: 24px; }
.ac-side > b.ac-big { font-family: var(--dh-font-display); font-weight: 400; line-height: .82; color: var(--ac-gold); white-space: nowrap; }
.ac-side--lives > b { font-size: 120px; }
/* The big value and the score alone in the row (Chinese Madhouse's "Score
 * 36 / 1.500", Bob's 27, Sorcerer, Wizard): the score has the room, so it
 * reads at a size meant for the sofa, not as a footnote (owner QA 799 #12).
 * The size is set on the value (academy-play.js endSize: as large as the row
 * allows); a row with a middle figure keeps the smaller size it fits. */
.ac-side--solo > span:first-child { font-size: 24px; }
.ac-side--solo > b small { font-size: .53em; }
.ac-pace { display: flex; flex-direction: column; gap: 16px; }
.ac-pace__line { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 28px; color: rgba(255, 255, 255, .85); }
.ac-bar { position: relative; height: 16px; border-radius: 8px; background: rgba(0, 9, 31, .35); }
.ac-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: #fff; transition: width 400ms var(--dh-ease-out); }
.ac-bar u { position: absolute; top: -8px; bottom: -8px; width: 5px; margin-left: -2px; border-radius: 2px; background: var(--ac-gold); }
.ac-sh-row { display: inline-flex; align-items: center; gap: 14px; }
.ac-sh { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; font-family: var(--dh-font-display); font-size: 24px; background: rgba(255, 201, 60, .22); border: 2px dashed var(--ac-gold); color: var(--ac-gold); }
.ac-sh--done { background: rgba(47, 212, 122, .45); border: 2px solid transparent; color: #fff; }
.ac-hero__strip { display: flex; flex-direction: column; gap: 12px; }
.ac-hero__strip:empty { display: none; }
.ac-strip { display: flex; align-items: center; gap: 16px; }
.ac-strip--col { flex-direction: column; align-items: stretch; gap: 12px; }
.ac-strip__lead { color: rgba(255, 255, 255, .75); font-size: 16px; width: 96px; flex: none; }
.ac-cells { display: flex; gap: 7px; flex: 1; min-width: 0; }
.ac-cells--many { gap: 5px; }
.ac-cell { position: relative; flex: 1; min-width: 0; height: 54px; border-radius: 12px; background: rgba(0, 9, 31, .3); font-family: var(--dh-font-display); font-size: 19px; color: rgba(255, 255, 255, .55); display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: visible; }
.ac-cells--many .ac-cell { font-size: 16px; height: 46px; border-radius: 10px; }
.ac-cell.h { background: rgba(47, 212, 122, .45); color: #fff; }
.ac-cell.m { background: rgba(251, 97, 97, .38); color: #fff; }
.ac-cell.b { background: rgba(127, 188, 255, .45); color: #fff; }
.ac-cell.p { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); }
.ac-cell.c { background: var(--ac-gold); color: #241a00; }
.ac-cell.g { background: rgba(209, 213, 216, .55); color: #0b1430; }
/* Combo ladder: climb (each step lights in turn, the new one lands with a gold ring) and drop (the lit steps drain red
   right to left, ×1 lands) — the app's AcdCombo at TV size. */
.ac-combo--climb .ac-cell.g:not(.lit) { animation: ac-cstep 360ms both; }
.ac-combo--climb .ac-cell:nth-child(1) { animation-delay: 150ms } .ac-combo--climb .ac-cell:nth-child(2) { animation-delay: 300ms }
.ac-combo--climb .ac-cell:nth-child(3) { animation-delay: 450ms } .ac-combo--climb .ac-cell:nth-child(4) { animation-delay: 600ms }
.ac-combo--climb .ac-cell:nth-child(5) { animation-delay: 750ms } .ac-combo--climb .ac-cell:nth-child(6) { animation-delay: 900ms }
.ac-combo--climb .ac-cell.c { animation: ac-cland 560ms both; animation-delay: inherit; }
.ac-combo--climb .ac-cell.c::after { content: ""; position: absolute; inset: -6px; border-radius: 16px; border: 3px solid var(--ac-gold); opacity: 0; animation: ac-cring 700ms forwards; animation-delay: inherit; }
.ac-combo--drop .ac-cell.was { animation: ac-cdrain 520ms both; }
.ac-combo--drop .ac-cell:nth-child(6) { animation-delay: 300ms } .ac-combo--drop .ac-cell:nth-child(5) { animation-delay: 380ms }
.ac-combo--drop .ac-cell:nth-child(4) { animation-delay: 460ms } .ac-combo--drop .ac-cell:nth-child(3) { animation-delay: 540ms }
.ac-combo--drop .ac-cell:nth-child(2) { animation-delay: 620ms }
.ac-combo--drop .ac-cell.c { animation: ac-cland 560ms 900ms both; }
@keyframes ac-cstep { 0% { background: rgba(0, 9, 31, .3); color: rgba(255, 255, 255, .55) } 45% { background: #ffc93c; color: #241a00; transform: translateY(-6px) } 100% { transform: none } }
@keyframes ac-cland { 0% { background: rgba(0, 9, 31, .3); color: rgba(255, 255, 255, .55); transform: scale(1) } 40% { background: #ffc93c; color: #241a00; transform: scale(1.35) } 70% { transform: scale(.94) } 100% { transform: none } }
@keyframes ac-cring { 0% { opacity: .9; transform: scale(.9) } 100% { opacity: 0; transform: scale(1.7) } }
@keyframes ac-cdrain { 0% { background: #ffc93c; color: #241a00 } 35% { background: #fb6161; color: #fff; transform: translateY(4px) } 100% { background: rgba(0, 9, 31, .3); color: rgba(255, 255, 255, .55); transform: none } }
/* The big value flipping in place (AcdFlip): up = gold bang + ring, down = shake red, fall away, the new one bangs in. */
.ac-flip { position: relative; display: inline-grid; font-style: normal; }
.ac-flip > em { grid-area: 1 / 1; font-style: normal; }
.ac-flip .ring { position: absolute; left: 50%; top: 50%; width: 1.6em; height: 1.6em; margin: -.8em 0 0 -.8em; border-radius: 50%; border: 4px solid var(--ac-gold); opacity: 0; pointer-events: none; }
.ac-flip--up .now { animation: ac-fbang 520ms 750ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-flip--up .ring { animation: ac-cring 900ms 820ms forwards; }
.ac-flip--down .was { animation: ac-ffall 620ms 200ms both; color: var(--ac-red); }
.ac-flip--down .now { animation: ac-fbang 520ms 900ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-flip--down .ring { display: none; }
@keyframes ac-fbang { 0% { opacity: 0; transform: scale(1.6) } 70% { opacity: 1; transform: scale(.96) } 100% { opacity: 1; transform: none } }
@keyframes ac-ffall { 0% { opacity: 1; transform: none } 25% { transform: translateX(-5px); color: #fb6161 } 45% { transform: translateX(4px) } 100% { opacity: 0; transform: translateY(.5em) scale(.7) } }
/* Lives: the heart beats; a life lost shakes it red, −1 floats off (AcdHeart). */
.ac-heart { position: relative; display: inline-flex; width: .8em; height: .8em; color: var(--ac-red); font-style: normal; line-height: 1; }
.ac-heart svg { display: block; width: 100%; height: 100%; }
.ac-heart.beat { animation: ac-beat 1200ms ease-in-out infinite; }
.ac-heart.hit { animation: ac-hit 500ms 150ms both, ac-beat 1200ms 1500ms ease-in-out infinite; }
.ac-heart .minus { position: absolute; left: 50%; bottom: 70%; font-style: normal; font-family: var(--dh-font-display); font-size: .5em; color: var(--ac-red); white-space: nowrap; opacity: 0; transform: translateX(-50%); animation: ac-minus 900ms 200ms ease-out both; }
@keyframes ac-beat { 0%, 40%, 100% { transform: scale(1) } 12% { transform: scale(1.16) } 24% { transform: scale(1.04) } 30% { transform: scale(1.12) } }
@keyframes ac-hit { 0% { transform: none; filter: none } 20% { transform: translateX(-3px) scale(1.3); filter: drop-shadow(0 0 6px #fb6161) drop-shadow(0 0 14px #fb6161) brightness(1.35) } 40% { transform: translateX(3px) scale(.9) } 60% { transform: translateX(-2px) } 80% { transform: translateX(1px) } 100% { transform: none; filter: none } }
@keyframes ac-minus { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.8) } 20% { opacity: 1; transform: translate(-50%, -2px) scale(1.15) } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1) } }
/* Counts (Catch 40, Wizard: points 0–3; Bob's 27: doubles hit per round, 0 red → 3 full green). */
.ac-cnts { display: grid; gap: 5px; }
.ac-cnt { height: 54px; border-radius: 12px; font-family: var(--dh-font-display); font-size: 19px; display: flex; align-items: center; justify-content: center; background: rgba(0, 9, 31, .22); color: rgba(255, 255, 255, .45); }
.ac-cnts--two .ac-cnt { height: 40px; border-radius: 8px; font-size: 14px; }
.ac-cnt.cur { background: rgba(255, 201, 60, .2); color: #fff; box-shadow: inset 0 0 0 3px var(--ac-gold); }
.ac-cnt.hits.k0 { background: rgba(251, 97, 97, .38); color: #fff; }
.ac-cnt.hits.k1 { background: rgba(47, 212, 122, .35); color: #fff; }
.ac-cnt.hits.k2 { background: rgba(47, 212, 122, .6); color: #fff; }
.ac-cnt.hits.k3 { background: #2fd47a; color: #03261a; }
.ac-cnt.pts.k3, .ac-key i.k3 { background: #ffc93c; color: #241a00; }
.ac-cnt.pts.k2, .ac-key i.k2 { background: #2fd47a; color: #03261a; }
.ac-cnt.pts.k1, .ac-key i.k1 { background: #7fbcff; color: #00163f; }
.ac-cnt.pts.k0, .ac-key i.k0 { background: rgba(0, 9, 31, .45); color: rgba(255, 255, 255, .5); }
.ac-key { display: flex; gap: 26px; font-size: 20px; color: rgba(255, 255, 255, .8); }
.ac-key span { display: flex; align-items: center; gap: 8px; }
.ac-key i { width: 16px; height: 16px; border-radius: 4px; }
/* Visit slots */
.ac-slots { display: flex; gap: 16px; }
.ac-slot { position: relative; flex: 1; height: 104px; border-radius: 20px; background: rgba(0, 9, 31, .3); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; min-width: 0; animation: ac-slotin 260ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-slot b { font-family: var(--dh-font-display); font-weight: 400; font-size: 44px; color: #fff; white-space: nowrap; }
.ac-slot > span { font-size: 24px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.ac-slot--miss b { color: #ffb3b3; }
.ac-slot--pend { background: rgba(0, 9, 31, .16); justify-content: center; animation: none; }
.ac-slot--pend .n { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-family: var(--dh-font-display); font-size: 22px; color: rgba(255, 255, 255, .5); }
.ac-slot--pend .dt-dart { width: 44px; height: 44px; color: rgba(255, 255, 255, .26); }
.ac-slot--aim b { color: var(--ac-gold); opacity: .7; }
.ac-slot--next { background: linear-gradient(180deg, #014cfd, #0140d4); animation: ac-slotthrow 1.2s ease-in-out infinite; }
.ac-slot--next .n { color: rgba(255, 255, 255, .8); }
.ac-slot--next .dt-dart { width: 56px; height: 56px; color: #fff; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .55)); animation: ac-dart 1.2s ease-in-out infinite; }
.ac-slot--next.ac-slot--aim b { opacity: 1; }
@keyframes ac-slotin { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: none } }
@keyframes ac-slotthrow { 0%, 100% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 0 20px rgba(1, 76, 253, .35) } 50% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), 0 0 40px rgba(1, 76, 253, .7) } }
@keyframes ac-dart { 0%, 100% { transform: scale(.9) rotate(0deg); opacity: .8 } 50% { transform: scale(1.12) rotate(-8deg); opacity: 1 } }
/* Board */
.ac-board { position: absolute; left: 1156px; top: 180px; width: 700px; height: 700px; }
.ac-board__base { position: absolute; inset: 0; }
.ac-board__base svg { display: block; }
/* The real board, cropped round (the phone's ML view; frames Play-*): dimmed by the frames' veil, the blue rim round it. */
.ac-board__photo { display: block; width: 700px; height: 700px; border-radius: 50%; user-select: none; }
.ac-board__dim { position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 9, 31, .38); box-shadow: 0 0 0 3px rgba(66, 155, 252, .55), 0 0 90px rgba(1, 76, 253, .45); pointer-events: none; }
.ac-board--tactical .ac-board__dim { box-shadow: 0 0 0 3px rgba(176, 124, 255, .55), 0 0 90px rgba(120, 60, 253, .4); }
.ac-board__lay { position: absolute; inset: 0; overflow: visible; }
.ac-lit--on { animation: ac-litin 420ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-lit-glow { animation: ac-breath 2.4s ease-in-out infinite alternate; }
@keyframes ac-litin { from { opacity: 0 } to { opacity: 1 } }
@keyframes ac-breath { from { opacity: .35 } to { opacity: .7 } }
.ac-step { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--ac-gold); color: #241a00; font-family: var(--dh-font-display); font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #00091f; }
.ac-step--later { opacity: .75; }
.ac-dm { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; border: 5px solid #00091f; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); animation: ac-dmin 360ms cubic-bezier(.34, 1.56, .5, 1) both; }
@keyframes ac-dmin { from { transform: scale(2.2); opacity: 0 } to { transform: none; opacity: 1 } }
.ac-dl { position: absolute; height: 46px; border-radius: 12px; padding: 0 16px; display: flex; align-items: center; font-family: var(--dh-font-display); font-size: 22px; white-space: nowrap; margin-top: -76px; background: rgba(0, 9, 31, .9); color: #fff; }
.ac-dl--r { margin-left: 26px; }
.ac-dl--l { transform: translateX(-100%); margin-left: -26px; }
.ac-dl--ok { background: #2fd47a; color: #03261a; }
.ac-dl--miss { background: #fb6161; color: #2a0505; }
.ac-tag { position: absolute; padding: 8px 16px; border-radius: 12px; font-family: var(--dh-font-display); font-size: 21px; white-space: nowrap; transform: translate(-50%, -50%); }
.ac-tag--gold { background: var(--ac-gold); color: #241a00; }
.ac-tag--dark { background: rgba(0, 9, 31, .9); color: #fff; }
.ac-tag--r { transform: translate(18px, -50%); }
.ac-tag--l { transform: translate(calc(-100% - 18px), -50%); }
.ac-pill--aim { position: absolute; left: 1506px; top: 904px; transform: translateX(-50%); font-family: var(--ac-body); font-size: 24px; letter-spacing: 0; text-transform: none; }
.ac-pill--aim .ac-ico { width: 26px; height: 26px; }

/* ── Post (Post-Cleared / -Failed / -Mastered / -SessionDone) ─────────────── */
.ac-panel { border-radius: 28px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(66, 155, 252, .2); }
.ac-rise { animation: ac-rise 420ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ac-rise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
.ac-spot { position: absolute; left: 274px; top: -60px; width: 400px; height: 820px; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 233, 170, .24), transparent 70%); clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); animation: ac-fade 600ms both; }
.ac-spot--centre { left: 560px; top: -80px; width: 800px; height: 900px; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
@keyframes ac-fade { from { opacity: 0 } to { opacity: 1 } }
.ac-post__left { position: absolute; left: 64px; top: 140px; width: 820px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.ac-post__left--failed { top: 170px; gap: 30px; }
.ac-post__medal { position: relative; width: 380px; height: 380px; margin-top: 10px; }
.ac-post__medal .ac-badge { position: relative; width: 380px; height: 380px; }
.ac-post__medal--won .ac-badge { box-shadow: 0 0 0 6px #00091f, 0 0 0 12px var(--ac-gold); }
.ac-post__glow { position: absolute; inset: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 60, .4), transparent 65%); animation: ac-fade 800ms 200ms both; }
.ac-ripple { position: absolute; inset: -20px; border-radius: 50%; border: 4px solid rgba(255, 201, 60, .8); opacity: 0; animation: ac-ripple 1100ms 400ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-ripple--2 { border-width: 2px; animation-delay: 580ms; }
@keyframes ac-ripple { 0% { opacity: 0; transform: scale(.6) } 15% { opacity: .9 } 100% { opacity: 0; transform: scale(1.6) } }
.ac-medal-in { animation: ac-medal 700ms cubic-bezier(.34, 1.56, .5, 1) both; }
@keyframes ac-medal { 0% { opacity: 0; transform: scale(.55) translateY(30px); filter: brightness(.4) } 100% { opacity: 1; transform: none; filter: none } }
.ac-post__medal--lost { margin-top: 20px; }
.ac-post__dash { position: absolute; inset: -24px; border-radius: 50%; border: 4px dashed rgba(142, 152, 160, .5); }
.ac-medal-grey { filter: grayscale(.75) brightness(.7); }
.ac-post__title { margin: 8px 0 0; font-size: 86px; line-height: 1; letter-spacing: .03em; color: #fff; text-transform: uppercase; text-align: center; }
.ac-post__title--failed { margin-top: 20px; font-size: 96px; }
.ac-sheen { background-image: linear-gradient(100deg, #fff 0%, #fff 40%, #ffe9b0 50%, #fff 60%, #fff 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ac-titlein 500ms 450ms cubic-bezier(.2, .8, .2, 1) both, ac-sheen 900ms 1000ms ease-in-out both; }
@keyframes ac-titlein { 0% { opacity: 0; transform: scale(1.6); letter-spacing: .2em } 100% { opacity: 1; transform: none; letter-spacing: .03em } }
@keyframes ac-sheen { from { background-position: 100% 0 } to { background-position: 0 0 } }
.ac-post__line { font-size: 32px; color: #d1d5d8; text-align: center; }
.ac-post__line strong { color: #fff; font-weight: 600; }
.ac-pips--post { gap: 8px; width: 560px; }
.ac-pips--post b { height: 12px; border-radius: 4px; }
.ac-pips--post b.new { animation: ac-pip 800ms 300ms both; }
.ac-pips--post b.next { animation: ac-unlock 700ms 1300ms both; }
@keyframes ac-pip { 0% { background: rgba(209, 213, 216, .14); transform: scaleY(1) } 35% { background: #2fd47a; transform: scaleY(2.2); box-shadow: 0 0 22px #2fd47a } 100% { background: #2fd47a; transform: none; box-shadow: none } }
@keyframes ac-unlock { 0% { background: rgba(209, 213, 216, .14) } 40% { background: #ffc93c; transform: scaleY(2); box-shadow: 0 0 24px #ffc93c } 100% { background: rgba(255, 201, 60, .45); transform: none; box-shadow: inset 0 0 0 2px #ffc93c } }
.ac-lockpill { display: inline-flex; align-items: center; gap: 14px; padding: 12px 24px; border-radius: 999px; font-family: var(--dh-font-display); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(1, 76, 253, .9); box-shadow: 0 0 0 3px #ffc93c, 0 0 40px rgba(255, 201, 60, .4); animation: ac-pillin 600ms 1300ms cubic-bezier(.34, 1.56, .5, 1) both; }
.ac-lk { position: relative; width: 30px; height: 30px; color: #fff; }
.ac-lk > span { position: absolute; inset: 0; }
.ac-lk .shut { animation: ac-shut 1600ms both; }
.ac-lk .open { animation: ac-open 1600ms both; }
@keyframes ac-pillin { 0% { opacity: 0; transform: scale(.6) translateY(16px) } 100% { opacity: 1; transform: none } }
@keyframes ac-shut { 0%, 85% { opacity: 1; transform: none } 88% { transform: rotate(-12deg) } 92% { transform: rotate(10deg) } 96%, 100% { opacity: 0 } }
@keyframes ac-open { 0%, 92% { opacity: 0; transform: scale(.6) } 100% { opacity: 1; transform: none } }
.ac-post__right { position: absolute; left: 964px; right: 64px; top: 170px; display: flex; flex-direction: column; gap: 24px; }
.ac-post__right--failed { top: 190px; gap: 26px; }
.ac-rounds { padding: 30px 34px; display: flex; flex-direction: column; gap: 18px; }
.ac-rounds .ac-eye { font-size: 18px; }
.ac-dbls { display: flex; gap: 6px; }
.ac-dbl { flex: 1; height: 58px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--dh-font-display); font-size: 16px; min-width: 0; }
.ac-dbl.ok { background: rgba(47, 212, 122, .7); color: #03261a; }
.ac-dbl.no { background: rgba(251, 97, 97, .28); color: #ffc4c4; }
.ac-rounds__sum { font-size: 24px; color: #d1d5d8; }
.ac-xp { padding: 30px 34px; display: flex; flex-direction: column; gap: 14px; }
.ac-xrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 28px; color: #d1d5d8; }
.ac-xrow b { font-family: var(--dh-font-display); font-weight: 400; font-size: 30px; color: var(--ac-gold); }
.ac-xrow--total { border-top: 1px solid rgba(209, 213, 216, .14); padding-top: 16px; margin-top: 4px; }
.ac-xrow--total .ac-disp { font-size: 26px; color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.ac-xrow--total b { font-size: 44px; }
@property --ac-n { syntax: '<integer>'; initial-value: 0; inherits: false; }
.ac-count { counter-reset: acn var(--ac-n); animation: ac-count 900ms 1100ms cubic-bezier(.2, .7, .3, 1) both; --ac-n: var(--to); }
.ac-count::before { content: attr(data-pre) counter(acn) attr(data-post); }
@keyframes ac-count { from { --ac-n: 0 } to { --ac-n: var(--to) } }
.ac-wait { display: flex; align-items: center; gap: 12px; font-size: 24px; color: var(--ac-grey); margin-top: 6px; }
.ac-wait .ac-ico { width: 26px; height: 26px; }
.ac-navs { display: flex; gap: 24px; }
.ac-navs > * { flex: 1; }
.ac-lvup { padding: 24px 28px; display: flex; align-items: center; gap: 22px; background: rgba(255, 201, 60, .1); border-color: rgba(255, 201, 60, .45); animation: ac-fbang 500ms 2200ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-lvup__ring { width: 76px; height: 76px; border-radius: 50%; border: 5px solid var(--ac-gold); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; flex: none; }
.ac-lvup__t { font-size: 24px; color: var(--ac-gold); letter-spacing: .06em; text-transform: uppercase; }
.ac-nav { padding: 24px 28px; display: flex; align-items: center; gap: 20px; }
.ac-nav .ac-badge { width: 72px; height: 72px; }
.ac-nav__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-nav__cap { font-size: 15px; }
.ac-nav__t { font-size: 24px; color: #fff; }
.ac-nav__sub { font-size: 22px; color: #d1d5d8; }
.ac-fbar { width: 600px; display: flex; flex-direction: column; gap: 12px; }
.ac-fbar__track { position: relative; height: 18px; border-radius: 9px; background: rgba(209, 213, 216, .12); }
.ac-fbar__track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: #429bfc; }
.ac-fbar__track u { position: absolute; top: -10px; bottom: -10px; width: 5px; margin-left: -3px; border-radius: 2px; background: var(--ac-gold); }
.ac-fbar__labels { display: flex; justify-content: space-between; font-size: 22px; color: var(--ac-grey); }
.ac-where { padding: 32px 36px; display: flex; flex-direction: column; gap: 22px; }
.ac-where .ac-eye { font-size: 18px; }
.ac-where__chips { display: flex; flex-wrap: wrap; gap: 14px; }
.ac-wchip { display: inline-flex; align-items: baseline; gap: 12px; padding: 14px 22px; border-radius: 16px; background: rgba(209, 213, 216, .07); border: 1px solid rgba(209, 213, 216, .14); }
.ac-wchip b { font-family: var(--dh-font-display); font-weight: 400; font-size: 28px; color: #fff; }
.ac-wchip span { font-size: 24px; }
.ac-wchip .good { color: var(--ac-green); }
.ac-wchip .bad { color: #ff8a8a; }
.ac-why { display: flex; align-items: center; gap: 14px; font-size: 26px; color: #d1d5d8; }
/* Mastered: 0 spotlight · 300 tenth node · 800 medal lights · 1100 crown drops · 1550 impact (flash, rays, rings) ·
   1900 MASTERED slams · 2200 +XP · 2400 line · 2500+ tiles. */
.ac-rays { position: absolute; left: 210px; top: -360px; width: 1500px; height: 1500px; background: repeating-conic-gradient(from 0deg, rgba(255, 201, 60, .3) 0deg 3deg, rgba(0, 0, 0, 0) 3deg 15deg); -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0) 18%, #000 34%, rgba(0, 0, 0, 0) 62%); mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0) 18%, #000 34%, rgba(0, 0, 0, 0) 62%); animation: ac-rays 900ms 1550ms both, ac-spin 24s linear infinite; }
.ac-rings { position: absolute; left: 410px; top: -150px; animation: ac-fade 800ms 1550ms both, ac-spin 60s linear infinite; }
@keyframes ac-rays { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }
@keyframes ac-spin { to { transform: rotate(360deg) } }
.ac-mripple { position: absolute; left: 960px; top: 416px; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; border: 6px solid rgba(255, 201, 60, .85); box-shadow: 0 0 40px rgba(255, 201, 60, .45); opacity: 0; animation: ac-mrip 1200ms 1550ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-mripple--2 { border-width: 4px; animation-delay: 1730ms; }
.ac-mripple--3 { border-width: 2px; animation-delay: 1910ms; }
@keyframes ac-mrip { 0% { opacity: 0; transform: scale(.7) } 12% { opacity: 1 } 100% { opacity: 0; transform: scale(2.4) } }
.ac-mflash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(255, 233, 170, .85), rgba(255, 201, 60, .35) 30%, rgba(0, 9, 31, 0) 62%); opacity: 0; animation: ac-flash 700ms 1550ms both; pointer-events: none; }
@keyframes ac-flash { 0% { opacity: 0 } 14% { opacity: 1 } 100% { opacity: 0 } }
.ac-mst { position: absolute; left: 0; right: 0; top: 130px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ac-mst__crown { width: 96px; height: 96px; filter: drop-shadow(0 0 20px rgba(255, 201, 60, .7)); animation: ac-crown 425ms 1100ms cubic-bezier(.55, 0, .9, .4) both, ac-squash 300ms 1525ms ease-out both; }
.ac-mst__crown svg { width: 100%; height: 100%; display: block; }
.ac-mst__medal { position: relative; width: 340px; height: 340px; }
.ac-mst__badge { width: 340px; height: 340px; box-shadow: 0 0 0 8px #00091f, 0 0 0 16px #ffc93c, 0 0 120px rgba(255, 201, 60, .55); animation: ac-lightup 500ms 800ms cubic-bezier(.2, .8, .2, 1) both, ac-thump 420ms 1550ms cubic-bezier(.34, 1.56, .5, 1) both; }
.ac-mst__xp { position: absolute; right: -70px; bottom: 20px; padding: 14px 22px; border-radius: 18px; background: var(--ac-gold); color: #241a00; font-size: 34px; white-space: nowrap; box-shadow: 0 0 0 6px #00091f, 0 0 40px rgba(255, 201, 60, .6); animation: ac-xpbang 500ms 2200ms cubic-bezier(.2, .8, .2, 1) both; }
.ac-mst__title { margin: 16px 0 0; font-size: 124px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; background-image: linear-gradient(100deg, #ffc93c 0%, #ffc93c 40%, #fff6d6 50%, #ffc93c 60%, #ffc93c 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 40px rgba(255, 201, 60, .45)); animation: ac-slam 350ms 1900ms cubic-bezier(.2, .8, .2, 1) both, ac-sheen 900ms 2450ms ease-in-out both; }
.ac-mnodes { display: flex; align-items: center; }
.ac-mnode { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffc93c; color: #241a00; }
.ac-mnode svg { width: 22px; height: 22px; }
.ac-mnode.last { animation: ac-node 600ms 300ms both; }
.ac-mnode__gap { width: 22px; height: 5px; background: #ffc93c; opacity: .7; }
.ac-tiles { position: absolute; left: 0; right: 0; top: 884px; display: flex; justify-content: center; gap: 24px; }
.ac-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 34px; border-radius: 22px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(255, 201, 60, .3); min-width: 220px; }
.ac-tile b { font-family: var(--dh-font-display); font-weight: 400; font-size: 46px; color: #fff; line-height: 1; white-space: nowrap; }
.ac-tile span { font-size: 22px; color: var(--ac-grey); }
.ac-tile--gold { background: rgba(255, 201, 60, .12); border-color: rgba(255, 201, 60, .6); }
.ac-tile--gold b { color: var(--ac-gold); }
.ac-tile--gold span { color: #d1d5d8; }
.ac--result .ac-foot { z-index: 1; }
@keyframes ac-lightup { 0% { filter: brightness(.3) grayscale(.6); transform: translateY(60px) scale(.9) } 100% { filter: none; transform: none } }
@keyframes ac-thump { 0% { transform: scale(1) } 35% { transform: scale(1.12) } 100% { transform: scale(1) } }
@keyframes ac-crown { 0% { opacity: 0; transform: translateY(-420px) rotate(-14deg) } 20% { opacity: 1 } 100% { opacity: 1; transform: translateY(0) rotate(0) } }
@keyframes ac-squash { 0% { transform: scale(1.25, .7) } 60% { transform: scale(.92, 1.12) } 100% { transform: none } }
@keyframes ac-slam { 0% { opacity: 0; transform: scale(2.6) } 70% { opacity: 1; transform: scale(.96) } 100% { opacity: 1; transform: none } }
@keyframes ac-xpbang { 0% { opacity: 0; transform: scale(1.8) rotate(-8deg) } 70% { opacity: 1; transform: scale(.95) rotate(-8deg) } 100% { opacity: 1; transform: rotate(-8deg) } }
@keyframes ac-node { 0% { background: rgba(209, 213, 216, .14); color: transparent; transform: scale(1) } 50% { background: #ffc93c; transform: scale(1.5); box-shadow: 0 0 0 10px rgba(255, 201, 60, .25), 0 0 50px #ffc93c } 100% { background: #ffc93c; color: #241a00; transform: none; box-shadow: 0 0 0 6px rgba(255, 201, 60, .2) } }
/* Session done */
.ac-session__right { position: absolute; left: 972px; right: 64px; top: 176px; height: 780px; display: flex; flex-direction: column; gap: 24px; }
.ac-stats { display: flex; gap: 24px; }
.ac-stat { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; }
.ac-stat b { font-family: var(--dh-font-display); font-weight: 400; font-size: 56px; line-height: 1; color: #fff; }
.ac-stat b.ac-gold { color: var(--ac-gold); }
.ac-stat span { font-size: 24px; color: var(--ac-grey); }
.ac-stat--row { flex: none; flex-direction: row; align-items: center; gap: 22px; }
.ac-stat--row .ac-ico { width: 60px; height: 60px; }
.ac-stat__col { display: flex; flex-direction: column; gap: 8px; }
.ac-ytracks { flex: 1; padding: 30px 34px; display: flex; flex-direction: column; justify-content: space-between; }
.ac-ytracks .ac-eye { font-size: 18px; }
.ac-ytrack { display: flex; align-items: center; gap: 20px; }
.ac-ytrack__name { width: 170px; font-size: 22px; letter-spacing: .08em; color: var(--tc); text-transform: uppercase; }
.ac-ytrack__bar { flex: 1; height: 12px; border-radius: 6px; background: rgba(209, 213, 216, .1); overflow: hidden; }
.ac-ytrack__bar i { display: block; height: 100%; border-radius: 6px; background: var(--tc); }
.ac-ytrack__n { width: 150px; text-align: right; font-size: 24px; color: #d1d5d8; }

/* ── Shanghai moment stage + locked ───────────────────────────────────────── */
.ac-mboard { position: absolute; left: 470px; top: 50px; width: 980px; height: 980px; opacity: .35; }
.ac-mhead { position: absolute; left: 58px; top: 34px; display: flex; align-items: center; gap: 14px; }
.ac-mhead .ac-badge { width: 76px; height: 76px; box-shadow: 0 0 0 3px #00091f, 0 0 0 6px var(--tc); }
.ac-mhead .ac-eye { font-size: 22px; color: #d1d5d8; }
.ac-lock { position: absolute; left: 50%; top: 520px; transform: translate(-50%, -50%); width: 1100px; padding: 64px 72px; border-radius: 32px; background: rgba(8, 22, 58, .85); border: 1px solid rgba(255, 201, 60, .35); display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.ac-lock__icon { width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 201, 60, .14); color: var(--ac-gold); display: flex; align-items: center; justify-content: center; }
.ac-lock__icon .ac-ico { width: 52px; height: 52px; }
.ac-lock__title { margin: 0; font-size: 54px; line-height: 1.1; color: #fff; }
.ac-lock__sub { margin: 0; font-size: 30px; line-height: 1.4; color: #d1d5d8; }

@media (prefers-reduced-motion: reduce) {
  .ac *, .ac *::before, .ac *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
}