/* Fluid layout and restrained motion. */
:root{--ease:cubic-bezier(.22,1,.36,1);--duration:320ms}
html{min-height:100%;scroll-behavior:smooth}
body{min-height:100dvh}
#app{min-height:100dvh;display:flex;flex-direction:column;isolation:isolate}
header{flex-shrink:0}
.shell{flex:1;min-height:0}
.sidebar{transition:width 420ms var(--ease),padding 420ms var(--ease);min-height:0}
.content{padding:20px clamp(24px,2.8vw,56px);min-width:0}
.home{width:100%;max-width:none;margin:0}
.hero{height:auto;aspect-ratio:1088/392}
.hero-bg{object-fit:fill;transition:opacity 650ms var(--ease)}
.home-bottom{grid-template-columns:minmax(300px,32.2%) minmax(0,1fr);isolation:isolate}
.about{z-index:1}
.timeline{min-width:0}
.tabs{justify-content:flex-start;gap:clamp(8px,1.3vw,28px)}
.streamer{background:rgba(17,21,32,.3);border:1px solid transparent;padding:12px;min-height:134px}
.streamers{align-content:start}
.streamer-copy p{max-width:100%;line-height:1.55}
/* Keep the warm light behind the cards rather than rotating it outside the clip. */
.lower-glow{inset:-80px -150px -110px 15%;width:auto;height:auto;transform:none;opacity:.85;z-index:-1;overflow:visible;background:radial-gradient(ellipse at 86% 38%,rgba(193,136,52,.52) 0%,rgba(144,98,41,.25) 27%,rgba(89,60,27,.1) 46%,transparent 68%)}
.lower-glow .glow1{left:auto;right:-320px;top:-100px;transform:rotate(-12deg);opacity:.5}
.lower-glow .glow2{left:auto;right:-180px;top:0;transform:rotate(20deg);opacity:.2}
.lower-glow .glow3{left:auto;right:-160px;top:-140px;transform:rotate(12deg);opacity:.2}
footer{margin-top:auto;flex-shrink:0;min-height:64px;display:flex;align-items:center;justify-content:center}
.feedback{min-height:100%;padding:50px 0}
body[data-page="live"] #app{height:100dvh;min-height:0}
body[data-page="live"] .shell{overflow:hidden}
body[data-page="live"] .content{display:flex;min-height:0;padding-bottom:12px}
.live-layout{flex:1;min-width:0;min-height:0;grid-template-columns:minmax(0,1fr) clamp(310px,23vw,420px);gap:12px}
.live-layout>section:first-child{display:flex;flex-direction:column;min-height:0;min-width:0}
.player{flex:1;min-height:0;height:auto;aspect-ratio:auto}
.player-picture{object-fit:cover;object-position:center}
.player-info{flex-shrink:0;min-height:88px}
.player-info>div{min-width:0}
.player-info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat{height:auto;min-height:0}
.chat-head,.chat-form{flex-shrink:0}
.messages{scrollbar-width:thin;scrollbar-color:#555 transparent;scroll-behavior:smooth}
.message{animation:message-in 340ms var(--ease) both}
.message:nth-child(n+2){animation-delay:30ms}
button,a,.language{transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease),border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease),filter var(--duration) var(--ease),transform var(--duration) var(--ease),opacity var(--duration) var(--ease)}
button:hover,a:hover{filter:none}
.nav-icon,.socials img,.about button img{transition:transform var(--duration) var(--ease),opacity var(--duration) var(--ease)}
.dot{transition:width 450ms var(--ease),background-color 320ms ease,transform 320ms var(--ease)}
.auth-field,.chat-input,.feedback input,.feedback textarea{transition:background-color 280ms ease,box-shadow 280ms ease}
.auth-field:focus-within,.chat-input:focus-within{background:#29292b;box-shadow:0 0 0 1px #a8b7d14d,0 0 20px #89b5ff0b}
.feedback input:focus,.feedback textarea:focus{background:#29292b}
.modal-backdrop{animation:backdrop-in 240ms ease both}
.auth,.info-dialog{animation:dialog-in 420ms var(--ease) both;max-height:calc(100dvh - 40px);overflow-y:auto}
.modal-backdrop.closing{animation:backdrop-out 180ms ease both;pointer-events:none}
.modal-backdrop.closing .auth,.modal-backdrop.closing .info-dialog{animation:dialog-out 180ms ease both}
.content.page-enter{animation:page-in 480ms var(--ease) both}
.emoji-panel{animation:dialog-in 240ms var(--ease) both}
.streamers.changing{animation:cards-in 360ms var(--ease) both}
@media(hover:hover) and (pointer:fine){
 .nav-item:hover{background-color:#ffffff0d}.nav-item:hover .nav-icon{transform:translateX(2px)}
 .nav-item.active:hover{background-color:#ffffff20}
 .pill:hover,.send:hover{transform:translateY(-2px);box-shadow:0 7px 24px #fc5c7726;filter:brightness(1.07)}
 .streamer:hover{transform:translateY(-4px);background-color:#ffffff0b;border-color:#e7bd6730;box-shadow:0 14px 32px #0003}
 .tab:not(.active):hover{background:#ffffff0b;color:white;transform:translateY(-1px)}
 .tab.active:hover{box-shadow:0 5px 16px #fc5c771f}
 .arrow:hover{background-color:#a3afca45;transform:translateY(-2px);box-shadow:0 5px 18px #0003}
 .dot:hover{background-color:#e2e5ffcc;transform:scaleY(1.2)}
 .socials a:hover{transform:translateY(-3px);opacity:.85}
 .language:hover,.secondary:hover{background-color:#ffffff15;box-shadow:0 5px 20px #0002}
 .white-button:hover{background-color:#e8edfa;transform:translateY(-2px);box-shadow:0 7px 24px #b6caff18}
 .about button:hover{color:#a9ccff}.about button:hover img{transform:translateX(4px)}
 .side-links a:hover,.side-links button:hover,.auth .sub button:hover{color:white}
 .player-controls button:hover{background:#404046cc;transform:scale(1.08)}
 .close:hover{transform:rotate(90deg);opacity:.8}
 .emoji-panel button:hover{transform:scale(1.18);background:#ffffff0d;border-radius:8px}
}
button:active,.pill:active,.white-button:active,.streamer:active{transform:translateY(0) scale(.98);transition-duration:100ms}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cards-in{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{to{opacity:0}}
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dialog-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
@media(min-width:1800px){.about{height:auto;min-height:392px;padding-top:clamp(246px,18vw,350px)}.about-art{object-fit:cover}.streamers{gap:20px}.streamer{min-height:155px;padding:18px}.streamer h3{font-size:20px}.streamer p{font-size:14px}.badges{margin-top:18px}.timeline h2{font-size:20px}.tabs{margin:20px 0}}
@media(max-width:1250px){.home-bottom{grid-template-columns:30% minmax(0,1fr)}.tabs{gap:2px;justify-content:space-between}.streamer{padding:8px;min-height:134px}.content{padding:20px 24px}}
@media(max-width:1000px){.home-bottom{grid-template-columns:1fr}.about{max-width:none}.tabs{justify-content:space-between;gap:8px}.live-layout{grid-template-columns:minmax(0,1fr) 290px}.chat-head{padding:14px}.messages{padding:16px 12px}.message{grid-template-columns:26px auto 1fr;gap:8px;font-size:12px}.message img{width:26px;height:26px}.player-info .badge{display:none}.content{padding:16px}.home-bottom .lower-glow{inset:180px -120px -60px -80px}}
@media(max-width:760px){body[data-page="live"] #app{height:auto;min-height:100dvh}body[data-page="live"] .shell{overflow:visible}.live-layout{display:flex;flex-direction:column;gap:12px}.live-layout>section:first-child{flex-shrink:0}.player{flex:none;height:auto;aspect-ratio:16/10}.chat{height:clamp(400px,60dvh,650px);flex:none}.player-info{min-height:84px}.content{padding:12px}.tabs{overflow:auto;justify-content:flex-start}.feedback{padding:40px 0}.about{height:300px}.lower-glow{opacity:.75}}
@media(max-width:600px){.streamer{padding:12px}.content{padding:12px}.home-bottom{gap:24px}.sidebar{gap:24px}.shell{min-height:0}footer{min-height:56px}.home-bottom .lower-glow{inset:260px -120px -60px -100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#app{overflow:clip}.hero{min-height:0}@media(max-width:760px){.hero{aspect-ratio:1088/392;flex-shrink:0}.home{min-height:0}}
#app{position:relative}
.language-picker{position:relative;z-index:20}
.language-picker .language{min-width:144px;height:64px;padding:16px 20px;gap:10px;justify-content:center;border:1px solid transparent;font-size:18px;font-weight:600}
.language-picker .language[aria-expanded="true"]{background:#242427;border-color:#ffffff14}
.language-flag{font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif;font-size:22px;line-height:1;display:grid;place-items:center;width:24px;flex-shrink:0}
.language-chevron{width:7px;height:7px;border-right:1.5px solid #a5a9b5;border-bottom:1.5px solid #a5a9b5;transform:rotate(45deg);margin-left:4px;margin-top:-4px;transition:transform 300ms var(--ease)}
[aria-expanded="true"] .language-chevron{transform:rotate(225deg);margin-top:3px}
.language-menu{position:absolute;right:0;top:calc(100% + 10px);width:202px;padding:7px;background:#1c1c1ff5;border:1px solid #ffffff12;border-radius:18px;box-shadow:0 18px 50px #0006;backdrop-filter:blur(20px);animation:dialog-in 240ms var(--ease) both;transform-origin:top right}
.language-menu[hidden]{display:none}
.language-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;min-height:48px;border-radius:12px;font-size:15px;color:#c8c9d1;text-align:left}
.language-menu button:hover,.language-menu button:focus-visible{background:#ffffff0a;color:white;transform:none;outline-offset:-2px}
.language-menu button[aria-checked="true"]{background:linear-gradient(110deg,#ffbd4719,#fc5c7710);color:#fff}
.language-check{margin-left:auto;color:#ffb25f;font-size:15px;opacity:0}
[aria-checked="true"] .language-check{opacity:1}
.account-profile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 10px 22px;min-height:48px}
.account-identity{display:flex;align-items:center;gap:21px;font-size:16px;font-weight:bold;padding:0;min-width:0}
.account-identity>img{border-radius:50%;object-fit:cover;flex-shrink:0}
.account-logout{display:flex;align-items:center;gap:4px;background:#460000;color:#ff5a6a;border-radius:50px;padding:4px 8px;font-size:12px;white-space:nowrap}
.account-logout:hover{background:#6a111a;box-shadow:0 3px 16px #ff5a6a13}
.account-identity:hover{opacity:.8}
.collapsed .account-profile{padding:10px 0;flex-direction:column;gap:14px}
.collapsed .account-identity{justify-content:center}.collapsed .account-identity span,.collapsed .account-logout span{display:none}
.collapsed .account-logout{padding:7px}
.demo-login-hint{display:grid;gap:5px;width:100%;padding:12px 15px;background:#ffffff04;border:1px solid #ffffff0a;border-radius:14px;text-align:center;color:#a3a3ad;font-size:12px}
.demo-login-hint code{font:12px ui-monospace,Consolas,monospace;color:#e7e7ed;user-select:all}.demo-login-hint small{font-size:11px;margin-top:3px;color:#81818c}
#auth-status:empty{display:none}#auth-status{color:#ff8b96;min-height:0}
html[lang="en"] .tabs,html[lang="vi"] .tabs{gap:4px;justify-content:space-between}
html[lang="vi"] .tab{padding:8px 10px}
@media(max-width:1000px){.account-profile{padding:10px 0;flex-direction:column;gap:14px}.account-identity{justify-content:center}.account-identity span,.account-logout span{display:none}.account-logout{padding:7px}}
@media(max-width:600px){.language-picker .language{height:44px;min-width:104px;padding:10px 12px;font-size:14px;gap:7px}.language-flag{font-size:19px;width:20px}.language-menu{width:184px;top:calc(100% + 8px)}.language-menu button{padding:12px 10px;font-size:14px}html[lang="en"] .tabs,html[lang="vi"] .tabs{justify-content:flex-start}.account-profile{gap:12px}}
.language-flag{font-family:Arial,"Microsoft YaHei",sans-serif;font-size:10px;font-weight:600;width:24px;height:24px;border-radius:50%;background:#ffffff09;border:1px solid #ffffff0b;color:#c7c8d0}.language-picker .language>.language-flag{background:linear-gradient(135deg,#ffbd4722,#fc5c7722);color:#ffc17b;border-color:#ffbd471c}@media(max-width:600px){.language-flag{font-size:9px;width:22px;height:22px}}
/* Ambient light belongs to the page backdrop, below every content surface.
   A fully transparent perimeter avoids the old rectangular SVG crop. */
.home{position:relative;isolation:isolate}
.home:before{content:"";position:absolute;pointer-events:none;z-index:-1;left:24%;right:-180px;bottom:-140px;height:680px;background:radial-gradient(ellipse 68% 44% at 78% 43%,rgba(185,139,66,.32) 0%,rgba(156,112,53,.23) 23%,rgba(113,78,35,.12) 45%,rgba(77,52,24,.04) 64%,transparent 85%)}
.hero{z-index:1;isolation:isolate;background:#0f0f0f}
.home-bottom{isolation:auto;z-index:0}
@media(min-width:1800px){.home:before{height:800px;bottom:-160px;right:-220px}}
@media(max-width:1000px){.home:before{left:-80px;right:-100px;bottom:-100px;height:720px;background:radial-gradient(ellipse 75% 44% at 78% 46%,rgba(185,139,66,.27),rgba(156,112,53,.15) 30%,rgba(113,78,35,.05) 57%,transparent 85%)}}
@media(max-width:600px){.home:before{height:900px;bottom:-80px;left:-90px;right:-120px}}
.home:before{background:radial-gradient(ellipse 72% 46% at 82% 43%,rgba(195,143,66,.62) 0%,rgba(168,114,52,.44) 24%,rgba(122,81,35,.24) 46%,rgba(77,52,24,.075) 66%,transparent 87%)}
.timeline{display:flex;flex-direction:column;min-height:392px}.timeline>h2,.timeline>.tabs{flex-shrink:0}.timeline>.streamers{flex:1}.streamers:has(.empty-state){display:flex;align-items:stretch}
.empty-state{flex:1;min-width:0;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:30px 12px;text-align:center}
.empty-state>img{display:block;width:50px;height:46px;flex-shrink:0}.empty-state-title{font-size:18px;line-height:1.5;color:#fff;font-weight:400}.empty-state-description{font-size:18px;line-height:1.5;color:#6c6c6c;font-weight:400}
@media(max-width:1000px){.home:before{background:radial-gradient(ellipse 75% 45% at 82% 46%,rgba(195,143,66,.55),rgba(168,114,52,.36) 27%,rgba(122,81,35,.16) 50%,transparent 86%)}}
@media(max-width:600px){.empty-state-description{font-size:15px}.empty-state{min-height:260px}}
/* Preserve the Figma card's 350 × 392 proportions at every width. */
@media(min-width:1001px){.home-bottom{grid-template-columns:clamp(280px,32.2%,420px) minmax(0,1fr)}}
.about{height:auto;min-height:0;aspect-ratio:350/392.378;align-self:start;padding:0;container-type:inline-size}
.about-art{width:108.3%;height:100%;left:-4.15%;top:-6.25%;object-fit:fill;object-position:center}
.about-copy{position:absolute;left:5.405%;right:5.405%;bottom:6.116%;display:flex;flex-direction:column;align-items:center;gap:8px;gap:2.28cqw}
.about h2{font-size:24px;font-size:6.857cqw;line-height:1.3}
.about p{font-size:14px;font-size:4cqw;line-height:1.5;letter-spacing:-.03em;margin:0;width:100%}
.about button{font-size:14px;font-size:4cqw;padding:12px 24px;padding:3.428cqw 6.857cqw;line-height:1.2}
@media(max-width:1000px){.about{width:100%;max-width:420px;justify-self:center;aspect-ratio:350/392.378;height:auto;min-height:0;padding:0}}
/* Chat composer: fixed equal dimensions prevent flex stretching the circle. */
.chat-form{align-items:center;gap:8px;padding:10px}
.chat-input{height:48px;padding:0 12px;gap:8px}
.chat-input>#emojis{width:24px;height:24px;flex:0 0 24px;padding:0;display:grid;place-items:center;line-height:0}
.chat-input>#emojis img{display:block}
.send{width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;max-height:48px;flex:0 0 48px;aspect-ratio:1;border-radius:50%;padding:0;display:grid;place-items:center;align-self:center;line-height:0}
.send img{display:block;width:22px;height:22px;pointer-events:none}
.chat.picker-open .chat-input{background:#414141}
.chat-picker{height:250px;max-height:42dvh;min-height:130px;flex:0 0 auto;display:flex;flex-direction:column;padding:4px 16px 0;gap:12px;overflow:hidden;animation:picker-open 320ms var(--ease) both}
.picker-tabs{display:flex;flex-shrink:0;background:#171717;padding:4px;border-radius:8px;gap:4px}
.picker-tabs button{flex:1;min-width:0;height:26px;border-radius:4px;padding:3px 8px;color:#e4e4e4;font-size:14px;line-height:20px}
.picker-tabs button.active{background:#414141;box-shadow:0 1px 4px #0002}
.picker-tabs button:hover{background:#303030}
.picker-tabs button.active:hover{background:#494949}
.picker-scroll{overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#444 transparent;overscroll-behavior:contain;padding:0 0 18px;mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 24px),transparent 100%)}
.picker-grid{display:grid;gap:8px 5px;align-content:start;padding:1px 0 8px}
.picker-emojis{grid-template-columns:repeat(12,minmax(0,1fr))}
.picker-item{display:grid;place-items:center;min-width:0;padding:0;border-radius:5px;transition:background-color 220ms ease,transform 220ms var(--ease)}
.picker-emojis .picker-item{height:auto;min-height:20.411px;aspect-ratio:1}
.picker-emojis img{display:block;max-width:100%;object-fit:contain}
.picker-stickers{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 0}
.picker-stickers .picker-item{aspect-ratio:1;padding:7px}
.picker-stickers img{display:block;max-width:100%;height:auto;object-fit:contain}
.picker-item:hover{background:#ffffff0a;transform:scale(1.08)}
.picker-item:active{transform:scale(.96)}
.message-sticker{grid-template-columns:30px minmax(0,1fr);align-items:start}
.message-sticker .user{padding-top:5px}
.message-sticker .sent-sticker{grid-column:2;width:96px;height:96px;object-fit:contain;border-radius:0;display:block}
@keyframes picker-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1800px){.chat-picker{height:290px}.picker-tabs button{height:30px}.picker-grid{row-gap:10px}.picker-emojis img{width:24px;height:24px}.picker-stickers img{width:76px;height:76px}}
@media(max-width:1000px) and (min-width:761px){.chat-picker{padding-left:12px;padding-right:12px}.picker-grid{gap:7px 3px}.picker-emojis{grid-template-columns:repeat(10,minmax(0,1fr))}}
@media(max-width:760px){.chat.picker-open{height:clamp(580px,80dvh,780px)}.chat-picker{height:240px;max-height:36dvh}.picker-emojis{grid-template-columns:repeat(10,minmax(0,1fr))}.chat-input{padding:0 10px}.send{width:44px;height:44px;min-width:44px;max-width:44px;min-height:44px;max-height:44px;flex-basis:44px}.chat-input{height:44px}}
@media(prefers-reduced-motion:reduce){.chat-picker{animation:none}}