/* ───────── Tu Tiên overlay — nền TRONG SUỐT cho OBS Browser Source ───────── */
:root {
  --gold: #ffd76a;
  --jade: #5ee6b4;
  --ink: rgba(10, 8, 24, 0.62);
  --r-white: #f2f2f2;
  --r-green: #4cd964;
  --r-blue: #4aa3ff;
  --r-purple: #b36bff;
  --r-orange: #ff9f1a;
  --r-red: #ff3b3b;
  --u: min(1vw, 1.78vh); /* đơn vị co giãn theo cả ngang và dọc (16:9 hoặc 9:16) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: transparent !important;
  font-family: "Segoe UI", "Noto Sans", system-ui, sans-serif;
  color: #fff;
}
body.debug { background: repeating-conic-gradient(#2a2a3a 0 25%, #1b1b28 0 50%) 0 0 / 40px 40px !important; }
.hidden { display: none !important; }
#stage { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 0.15em 0.4em rgba(0,0,0,.85); }

/* ───────── Ticker (chữ chạy) ───────── */
#ticker {
  position: absolute; top: 1%; left: 2%; right: 2%; height: calc(var(--u) * 3.4);
  overflow: hidden; border-radius: 99px; background: var(--ink);
  border: 1px solid rgba(255, 215, 106, .45);
  display: flex; align-items: center;
}
#ticker-track { white-space: nowrap; font-size: calc(var(--u) * 1.9); padding-left: 100%; animation: marquee 28s linear infinite; color: var(--gold); }
#ticker-track b { color: #fff; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ───────── Boss ───────── */
#boss-zone { position: absolute; top: 7%; left: 50%; transform: translateX(-50%); width: min(62%, 90vh); text-align: center; }
#boss-head { display: flex; justify-content: space-between; font-size: calc(var(--u) * 2.4); font-weight: 800; letter-spacing: .04em; color: var(--gold); }
#boss-time { font-variant-numeric: tabular-nums; color: #ffb4b4; }
#boss-bar {
  position: relative; height: calc(var(--u) * 3.2); margin-top: .3em; border-radius: 99px;
  background: rgba(0,0,0,.55); border: 2px solid var(--gold); overflow: hidden;
  box-shadow: 0 0 1.2em rgba(255, 180, 60, .45);
}
#boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3d3d, #ff9d2e, #ffe36a); transition: width .5s cubic-bezier(.2,.8,.2,1); }
#boss-text { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: calc(var(--u) * 1.8); }
#boss-top { position: absolute; right: -2%; top: calc(var(--u) * 6.5); transform: translateX(100%); list-style: none; width: max-content; max-width: 28vw;
  font-size: calc(var(--u) * 1.6); background: var(--ink); border-radius: .7em; padding: .5em .9em; text-align: left; }
#boss-top li { padding: .1em 0; white-space: nowrap; }
#boss-top li span { color: var(--gold); margin-left: .6em; }
#boss-body { position: relative; height: calc(var(--u) * 22); display: grid; place-items: center; }
#boss-icon { font-size: calc(var(--u) * 15); filter: drop-shadow(0 0 1.2em rgba(255,120,40,.8)); animation: bossIdle 3s ease-in-out infinite; }
#boss-zone.hit #boss-icon { animation: bossHit .25s ease-out; }
@keyframes bossIdle { 50% { transform: translateY(-4%) scale(1.04); } }
@keyframes bossHit { 30% { transform: translateX(-4%) scale(.96); filter: brightness(2) drop-shadow(0 0 1em #fff); } 60% { transform: translateX(3%); } }
#floaters { position: absolute; inset: 0; overflow: visible; }
.dmg { position: absolute; font-weight: 900; font-size: calc(var(--u) * 2.6); color: #fff; animation: floatUp 1.3s ease-out forwards; white-space: nowrap; }
.dmg.crit { color: #ff4d4d; font-size: calc(var(--u) * 3.8); }
.dmg.gift { color: var(--gold); }
.dmg small { font-size: .55em; opacity: .85; margin-right: .3em; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-10%) scale(1.15); } 100% { transform: translateY(-190%) scale(1); opacity: 0; } }

/* ───────── Thiên kiếp ───────── */
#trib-zone { position: absolute; top: 38%; left: 50%; transform: translateX(-50%); width: min(50%, 80vh); text-align: center;
  background: rgba(30, 10, 60, .6); border: 2px solid #b890ff; border-radius: 1em; padding: .7em 1em; box-shadow: 0 0 2em #8a5bff; }
#trib-title { font-size: calc(var(--u) * 2.4); font-weight: 800; color: #e0ccff; }
#trib-bar { height: calc(var(--u) * 1.8); margin: .4em 0; border-radius: 99px; background: rgba(0,0,0,.55); overflow: hidden; }
#trib-fill { height: 100%; width: 0; background: linear-gradient(90deg, #7a5cff, #5ee6ff, #fff); transition: width .4s; }
#trib-sub { font-size: calc(var(--u) * 1.5); color: #cbb8ff; }
#fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #fff, #9fd0ff 40%, transparent 70%); opacity: 0; }
#fx-flash.go { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: .85; } 20% { opacity: .1; } 35% { opacity: .6; } 100% { opacity: 0; } }

/* ───────── Hiệu ứng toàn màn hình (quà lớn) ───────── */
#fx-big { position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle, rgba(255, 215, 106, .35), rgba(255, 80, 160, .18) 50%, transparent 75%); animation: bigIn .5s ease-out; }
#fx-big .t1 { font-size: calc(var(--u) * 6); font-weight: 900; color: var(--gold); text-shadow: 0 0 .6em #ff9d00, 0 0 1.4em #ff5ea8; animation: pulse 1s ease-in-out infinite; }
#fx-big .t2 { font-size: calc(var(--u) * 3); margin-top: .2em; }
@keyframes bigIn { from { opacity: 0; transform: scale(1.4); } }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ───────── Loot / toast ───────── */
#loot { position: absolute; right: 1.5%; top: 14%; width: min(30%, 40vh); display: flex; flex-direction: column; gap: .5em; align-items: stretch; }
.loot-card { background: var(--ink); border-left: .5em solid var(--c, #fff); border-radius: .6em; padding: .45em .8em; font-size: calc(var(--u) * 1.7);
  animation: slideIn .5s cubic-bezier(.2,.9,.3,1.3), fadeOut .6s ease-in 6.4s forwards; }
.loot-card b { color: var(--c, #fff); }
.loot-card .who { opacity: .9; font-size: .85em; }
.loot-card.r-white { --c: var(--r-white); } .loot-card.r-green { --c: var(--r-green); } .loot-card.r-blue { --c: var(--r-blue); }
.loot-card.r-purple { --c: var(--r-purple); } .loot-card.r-orange { --c: var(--r-orange); box-shadow: 0 0 1em var(--r-orange); }
.loot-card.r-red { --c: var(--r-red); box-shadow: 0 0 1.2em var(--r-red); }
.loot-card.r-hongmong { --c: #ff2d6f; box-shadow: 0 0 1.6em #ff2d6f; background: linear-gradient(100deg, rgba(120,0,30,.85), rgba(255,45,111,.35), rgba(120,0,30,.85)); background-size: 200% 100%; animation: slideIn .5s, hm 2s linear infinite, fadeOut .6s ease-in 6.4s forwards; }
.loot-card.r-hongmong b { background: linear-gradient(90deg, #ff2d6f, #ffd76a, #ff2d6f); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hm 1.5s linear infinite; }
@keyframes hm { to { background-position: 200% 0; } }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-20%); } }

#toast { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4em; align-items: center; }
.toast { background: var(--ink); border: 1px solid var(--tc, var(--gold)); color: var(--tc, var(--gold)); border-radius: 99px; padding: .3em 1.1em; font-size: calc(var(--u) * 2); font-weight: 700;
  animation: toastIn .4s ease-out, fadeOut .5s ease-in 3.5s forwards; }
.toast.realm { font-size: calc(var(--u) * 2.8); border-width: 2px; color: #fff; box-shadow: 0 0 1.2em var(--gold); }
@keyframes toastIn { from { transform: translateY(40%) scale(.8); opacity: 0; } }

/* ───────── Roster (đài hoa sen) ───────── */
#roster { position: absolute; left: 1%; right: 1%; bottom: 5.5%; display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 1.2); flex-wrap: wrap-reverse; }
.seat { position: relative; width: calc(var(--u) * 11); text-align: center; transition: transform .5s, opacity .5s; animation: seatIn .6s ease-out; }
.avatar { position: relative; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--u) * 3.2); font-weight: 800;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--fc, #888); border: .25em solid rgba(255,255,255,.85);
  box-shadow: 0 0 1em var(--fc, #888), 0 0 calc(var(--u) * (.4 + var(--tier, 0) * .9)) var(--gold); animation: float 3.2s ease-in-out infinite; }
.avatar::after { content: ""; position: absolute; inset: -.55em; border-radius: 50%; border: 2px solid rgba(255, 215, 106, calc(.15 + var(--tier, 0) * .15)); animation: spin 8s linear infinite; border-top-color: transparent; }
.lotus { font-size: calc(var(--u) * 4.4); line-height: .5; margin-top: -.15em; filter: drop-shadow(0 0 .4em #c07bff); }
.seat .nm { font-size: calc(var(--u) * 1.5); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--ink); border-radius: .5em; padding: 0 .4em; margin-top: .25em; }
.seat .rl { font-size: calc(var(--u) * 1.25); color: var(--gold); white-space: nowrap; }
.seat .xpb { height: .45em; margin: .15em .4em 0; border-radius: 9px; background: rgba(0,0,0,.55); overflow: hidden; }
.seat .xpb i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--jade), var(--gold)); transition: width .6s; }
.seat.trib .avatar { animation: shake .15s linear infinite; box-shadow: 0 0 2em #9d7bff, 0 0 4em #5ee6ff; }
@keyframes seatIn { from { transform: translateY(40%) scale(.5); opacity: 0; } }
@keyframes float { 50% { transform: translateY(-6%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 25% { transform: translate(2px, -1px); } 75% { transform: translate(-2px, 1px); } }

/* ───────── Bubble hội thoại ───────── */
.bubble { position: absolute; bottom: calc(100% - .2em); left: 50%; transform: translateX(-50%); width: calc(var(--u) * 22); max-width: 46vw; z-index: 5;
  background: #fffdf2; color: #3a2a12; border: 2px solid #c9a24a; border-radius: .9em; padding: .4em .7em; font-size: calc(var(--u) * 1.55); line-height: 1.25; text-shadow: none;
  box-shadow: 0 .3em 1em rgba(0,0,0,.45); animation: bubbleIn .35s cubic-bezier(.2,1.4,.4,1), bubbleOut .4s ease-in 4.6s forwards; }
.bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -.5em; border: .5em solid transparent; border-top-color: #c9a24a; }
.bubble.loot_rare, .bubble.gift_big, .bubble.breakthrough_success, .bubble.boss_kill { background: #fff0b8; border-color: #ff9d00; font-weight: 700; }
.bubble.breakthrough_fail { background: #e8e0ff; border-color: #7a5cff; }
@keyframes bubbleIn { from { transform: translateX(-50%) scale(.3); opacity: 0; } }
@keyframes bubbleOut { to { transform: translateX(-50%) translateY(-30%); opacity: 0; } }

/* Bubble của người ngoài roster */
#guests { position: absolute; left: 1.5%; top: 14%; width: min(30%, 40vh); display: flex; flex-direction: column; gap: .5em; }
.guest { background: #fffdf2; color: #3a2a12; border: 2px solid #c9a24a; border-radius: .9em; padding: .35em .7em; font-size: calc(var(--u) * 1.5); text-shadow: none;
  animation: slideInL .4s ease-out, fadeOut .5s ease-in 4.5s forwards; }
.guest b { color: #a0561a; }
@keyframes slideInL { from { transform: translateX(-120%); opacity: 0; } }

#help { position: absolute; bottom: 1%; left: 0; right: 0; text-align: center; font-size: calc(var(--u) * 1.5); color: #fff; opacity: .85; }
#conn { position: absolute; right: 1%; bottom: 1%; font-size: calc(var(--u) * 1.1); opacity: .7; }
#conn.ok { display: none; }