:root { color-scheme: dark; font-family: Inter, ui-rounded, "Segoe UI", Arial, sans-serif; --cyan: #7dd3fc; --cyan-line: #38bdf8; --ink: #f8fafc; --muted: #9fb1d1; --glass: #07112ad6; --glass-edge: #7dd3fc40; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #03060f; }
body { display: grid; place-items: center; }
/* Mọi cỡ chữ/khoảng cách tính theo cqw (1% bề ngang khung) để giao diện giống nhau ở 450px lẫn 1080px (OBS). */
#stage { position: relative; container-type: inline-size; width: min(100vw, calc(100vh * 9 / 16)); height: min(100vh, calc(100vw * 16 / 9)); overflow: hidden; background: #060b1f; box-shadow: 0 0 80px #000; }
#world { width: 100%; height: 100%; display: block; }

.topbar { position: absolute; top: 2.4cqw; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 0; padding: .7cqw 1.2cqw; border-radius: 99cqw; background: linear-gradient(180deg, #0a1736e6, #060d24e6); border: .35cqw solid var(--glass-edge); box-shadow: 0 1cqw 3cqw #0008, inset 0 0 2cqw #38bdf81a; pointer-events: none; }
.stat { display: flex; align-items: center; gap: 1.2cqw; min-width: 17cqw; padding: .9cqw 2.4cqw; justify-content: center; color: var(--ink); }
.stat + .stat { border-left: .25cqw solid #ffffff1c; }
.stat b { font-size: 3.5cqw; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 .3cqw .8cqw #0009; }
.ico { width: 4cqw; height: 4cqw; flex: 0 0 auto; color: var(--cyan); filter: drop-shadow(0 0 .8cqw #38bdf877); }
.stat.heart .ico { color: #fb7185; filter: drop-shadow(0 0 .8cqw #fb718577); }
.stat.diamond .ico { color: #67e8f9; }

.cards { position: absolute; top: 13cqw; left: 2.4cqw; width: 36cqw; display: grid; gap: 1.4cqw; pointer-events: none; }
.side { position: absolute; top: 13cqw; right: 2.4cqw; width: 48cqw; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; gap: 1.4cqw; pointer-events: none; }
.side .card { justify-self: stretch; }
.card { border-radius: 2cqw; background: linear-gradient(135deg, #0a1736e8, #070e26d2); border: .35cqw solid var(--glass-edge); box-shadow: 0 1cqw 3cqw #0007, inset 0 0 2cqw #38bdf814; }
.card[hidden] { display: none; }
.brand-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.6cqw; row-gap: 1cqw; padding: 1.8cqw 2cqw; }
.brand-text { min-width: 0; }
.brand-text b { display: block; font-size: 2.8cqw; line-height: 1.1; letter-spacing: .04em; font-weight: 900; white-space: nowrap; }
.brand-text small { display: block; margin-top: .4cqw; color: var(--cyan); font-weight: 800; font-size: 1.5cqw; letter-spacing: .14em; white-space: nowrap; }
.live-dot { width: 2cqw; height: 2cqw; border-radius: 50%; background: #ff315a; box-shadow: 0 0 0 .8cqw #ff315a2c, 0 0 2.6cqw #ff315a; animation: pulse 1.4s infinite; }
.connection { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2cqw; padding-top: 1cqw; border-top: .25cqw solid #ffffff1a; font-size: 2.1cqw; font-weight: 700; color: var(--muted); min-width: 0; }
.connection span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection i { flex: 0 0 auto; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 1.8cqw #fbbf24; }
.connection.connected i { background: #34d399; box-shadow: 0 0 1.8cqw #34d399; }
.connection.connected { color: #d1fae5; }
.connection.error i { background: #fb7185; box-shadow: 0 0 1.8cqw #fb7185; }
.gift-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.6cqw; padding: 1.5cqw 2cqw; border-color: #fde68a55; background: linear-gradient(135deg, #2a1a0ae6, #170f08d2); box-shadow: 0 1cqw 3cqw #0007, inset 0 0 2cqw #fbbf2418; animation: pop .45s cubic-bezier(.2,1.3,.3,1); }
.gift-ico { width: 5.6cqw; height: 5.6cqw; color: #fb7185; filter: drop-shadow(0 0 1cqw #fb718588); }
.gift-text { min-width: 0; display: grid; }
.gift-text small { color: #fcd34d; font-weight: 900; font-size: 1.5cqw; letter-spacing: .16em; }
.gift-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.6cqw; line-height: 1.25; }
.gift-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fde68a; font-size: 2cqw; font-weight: 700; }

.event-feed { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; }
.feed-item { max-width: 100%; display: flex; align-items: center; gap: 1.4cqw; padding: 1.1cqw 2.2cqw 1.1cqw 1.2cqw; border-radius: 99cqw; color: var(--ink); background: linear-gradient(90deg, #0a1736e6, #070e26cf); border: .3cqw solid var(--glass-edge); box-shadow: 0 1cqw 2.6cqw #0006; animation: feed-in .35s cubic-bezier(.2,.8,.2,1); }
.feed-item i { flex: 0 0 auto; padding: .7cqw 1.4cqw; border-radius: 99cqw; background: #38bdf826; color: var(--cyan); font-size: 1.5cqw; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.feed-item div { display: flex; align-items: baseline; min-width: 0; gap: 1.2cqw; }
.feed-item b { flex: 0 0 auto; max-width: 24cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.4cqw; }
.feed-item small { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--muted); font-size: 2cqw; text-overflow: ellipsis; white-space: nowrap; }

.giftbar { position: absolute; left: 2.4cqw; right: 2.4cqw; bottom: 2.2cqw; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .8cqw; border-radius: 3cqw; background: linear-gradient(180deg, #0a1736ee, #050b1eee); border: .4cqw solid var(--glass-edge); box-shadow: 0 1.4cqw 4cqw #000a, inset 0 0 2.4cqw #38bdf81f; pointer-events: none; }
.gift-slot { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; min-width: 0; padding: 1.1cqw .8cqw; }
.gift-slot + .gift-slot { border-left: .25cqw solid #ffffff18; }
.gift-slot svg { flex: 0 0 auto; width: 5.6cqw; height: 5.6cqw; padding: 1cqw; border-radius: 50%; color: #0b1226; background: var(--tier, #7dd3fc); box-shadow: 0 0 1.8cqw var(--tier, #7dd3fc); }
.gift-slot b { display: block; font-size: 2.4cqw; line-height: 1.15; white-space: nowrap; }
.gift-slot small { display: block; margin-top: .2cqw; color: var(--muted); font-size: 1.6cqw; line-height: 1.2; white-space: nowrap; }
.gift-slot.small { --tier: #7dd3fc; }
.gift-slot.medium { --tier: #fcd34d; }
.gift-slot.large { --tier: #fb923c; }
.gift-slot.mega { --tier: #e879f9; }

.mega-gift { position: absolute; inset: 36% 50% auto auto; translate: 50% -50%; width: min(80%, 62cqw); padding: 3.4cqw 5cqw; border-radius: 3.6cqw; text-align: center; opacity: 0; scale: .7; pointer-events: none; background: radial-gradient(circle at 50% 0%, #fff7, transparent 46%), linear-gradient(135deg, #6d28d9ee, #be185dee 55%, #ea580cee); border: .45cqw solid #fff8; box-shadow: 0 0 9cqw #d946ef88, 0 3cqw 8cqw #0009; transition: opacity .25s, scale .35s cubic-bezier(.2,1.4,.3,1); }
.mega-gift.show { opacity: 1; scale: 1; }
.mega-gift b { display: block; font-size: 6cqw; text-shadow: 0 .5cqw 1.4cqw #0007; }
.mega-gift span { display: block; margin-top: 1cqw; font-size: 3cqw; font-weight: 800; }
.reconnect { position: absolute; left: 50%; bottom: 15cqw; translate: -50% 0; padding: 1.6cqw 3.4cqw; border-radius: 99cqw; background: #ef4444e8; font-weight: 800; font-size: 2.6cqw; opacity: 0; transition: opacity .2s; }
.reconnect.show { opacity: 1; }
@keyframes pulse { 50% { opacity: .45; scale: .82; } }
@keyframes feed-in { from { opacity: 0; translate: 5cqw 0; } }
@keyframes pop { from { opacity: 0; scale: .85; } }