:root { color-scheme: dark; font-family: Inter, 'Segoe UI', Arial, sans-serif; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; padding:0; background:transparent !important; overflow:hidden; }
.stage { position:absolute; inset:0; display:flex; pointer-events:none; padding:0 93px 91px; }
.stage.bottom-left {justify-content:flex-start;align-items:flex-end;}
.stage.bottom-center {justify-content:center;align-items:flex-end;}
.stage.bottom-right {justify-content:flex-end;align-items:flex-end;}
.stage.top-left {justify-content:flex-start;align-items:flex-start;padding-top:90px;}
.stage.top-center {justify-content:center;align-items:flex-start;padding-top:90px;}
.stage.top-right {justify-content:flex-end;align-items:flex-start;padding-top:90px;}
.notice-scale {zoom:1; width:970px; flex-shrink:0;}
.notice {width:970px;height:245px; position:relative; opacity:0; visibility:hidden; transform:translate3d(-110px,30px,0) scale(.92); filter:blur(12px); will-change:transform,opacity,filter;}
.notice.show {visibility:visible;animation:popup-in .78s cubic-bezier(.17,.75,.18,1.08) both;}
.notice.leave {visibility:visible;animation:popup-out .55s cubic-bezier(.6,0,.95,.4) both;}
@keyframes popup-in{0%{opacity:0;transform:translate3d(-110px,30px,0) scale(.92);filter:blur(12px)}55%{opacity:1;filter:blur(0)}75%{transform:translate3d(9px,-3px,0) scale(1.014)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes popup-out{0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}35%{opacity:1;transform:translate3d(14px,0,0)}100%{opacity:0;transform:translate3d(108px,-7px,0) scale(.95);filter:blur(9px)}}
.back-plate {position:absolute; inset:17px 6px 3px 23px; border-radius:27px; transform:rotate(-1.3deg); background:linear-gradient(115deg,rgba(18,128,255,.65),rgba(32,87,223,.09) 57%,rgba(23,186,255,.45)); box-shadow:0 0 34px rgba(19,144,255,.17)}
.panel {position:absolute;inset:0 0 10px;overflow:hidden;border-radius:25px; background:linear-gradient(118deg,rgba(8,31,69,.98) 0%,rgba(4,15,39,.97) 57%,rgba(11,41,85,.95) 100%);border:1px solid rgba(121,209,255,.48);box-shadow:0 18px 55px rgba(0,9,30,.47),inset 0 1px 0 rgba(220,246,255,.19),0 0 0 1px rgba(7,85,171,.18)}
.panel::before {content:"";position:absolute;z-index:3;top:0;left:26px;right:27px;height:2px;background:linear-gradient(90deg,transparent,rgba(98,220,255,.98),rgba(72,133,255,.85),transparent); opacity:.9}
.ambient-glow {position:absolute; width:360px;height:285px;left:-100px;top:-100px;background:radial-gradient(circle,rgba(34,142,255,.29),transparent 73%)}
.subtle-grid {position:absolute;inset:0;background:linear-gradient(rgba(94,173,255,.044) 1px,transparent 1px),linear-gradient(90deg,rgba(94,173,255,.043) 1px,transparent 1px);background-size:28px 28px; mask-image:linear-gradient(90deg,transparent,black 65%);opacity:.8}
.beam {position:absolute;top:-120px;left:-190px;width:88px;height:450px;background:linear-gradient(90deg,transparent,rgba(136,227,255,.0),rgba(141,211,255,.14),transparent);transform:rotate(24deg);pointer-events:none}
.show .beam {animation:beam-pass 2.6s .2s ease-out both}
@keyframes beam-pass{0%{left:-200px;opacity:0}16%{opacity:1}100%{left:1050px;opacity:0}}
.head {position:relative;z-index:2; height:61px;display:flex;align-items:center;justify-content:space-between;padding:0 31px 0 34px;border-bottom:1px solid rgba(95,160,249,.13)}
.head-left {display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:2px;color:#a0cdfb;}
.pulse-dot {width:9px;height:9px;border-radius:50%;background:#46e7ff;box-shadow:0 0 0 4px rgba(41,186,252,.10),0 0 14px rgba(77,223,255,.8)}
.show .pulse-dot{animation:pulse 1.85s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(46,192,255,0),0 0 17px rgba(77,223,255,.7)}}
.mini-stars{font-size:20px;font-weight:400;line-height:1;color:#57d6ff}
.origin-pill {display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:34px;border:1px solid rgba(110,181,244,.25);background:rgba(33,91,150,.22);border-radius:999px;padding:4px 12px 4px 9px;max-width:510px;}
.origin-pill svg {width:20px;height:20px;flex-shrink:0}
.origin-small{color:#9dd6ff;font-size:11px;font-weight:800;letter-spacing:1.12px;}
.origin-sep{color:#5c87b9;padding:0 1px}
.origin-pill b{color:#fff;font-size:12px;font-weight:800;letter-spacing:.6px;overflow:hidden;text-overflow:ellipsis;}
.content {position:relative;z-index:2;display:flex;align-items:center;gap:27px;height:132px;padding:11px 40px 11px 37px;}
.avatar-wrap {width:92px;height:92px;position:relative;flex-shrink:0;display:grid;place-items:center;}
.avatar-halo{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 10deg,#40dfff,#3d75f8,#0b2a65,#3b95ff,#78efff);box-shadow:0 0 24px rgba(33,173,255,.23);}
.show .avatar-halo {animation:rotating-ring 8s linear infinite}
@keyframes rotating-ring{to{transform:rotate(360deg)}}
.avatar-back {position:absolute;inset:5px;background:#102b5c;border-radius:50%;overflow:hidden;border:3px solid #09152c;}
.avatar-back img{width:100%;height:100%;display:none;object-fit:cover;}
.avatar-initial {position:absolute;z-index:1;font-size:40px;font-weight:850;color:white;text-shadow:0 2px 8px rgba(0,0,0,.3);}
.avatar-wrap.has-photo .avatar-back img{display:block}
.avatar-wrap.has-photo .avatar-initial{display:none}
.avatar-corner {position:absolute;z-index:2;bottom:-3px;right:-3px;display:grid;place-items:center;width:31px;height:31px;color:#fff;border-radius:50%;background:linear-gradient(135deg,#2c91ff,#1651d3);border:3px solid #0c2047;box-shadow:0 2px 10px rgba(7,111,236,.4)}
.avatar-corner svg{width:17px;height:17px}
.words {min-width:0;flex:1;align-self:center;}
.identity {display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.author {max-width:100%;font-size:26px;line-height:1.18;font-weight:850;letter-spacing:-.35px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 12px rgba(31,112,244,.12);}
.noticed-spark {width:23px;height:23px;background:#2b8bff;border-radius:50%;display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 14px rgba(52,145,255,.3)}
.noticed-spark span{font-size:13px;font-weight:800;line-height:1;color:white;}
.message{font-size:28px;line-height:1.30;letter-spacing:-.45px;font-weight:650;max-width:100%;color:#d4edff;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:break-word;}
.notice.long .message {font-size:24px;letter-spacing:-.25px}
.notice.extra-long .message {font-size:20px;line-height:1.26;-webkit-line-clamp:3}
.bottom-row {position:relative;z-index:2;display:flex;align-items:center;gap:12px;height:40px;padding:0 36px 4px 37px;}
.spark-bar{height:3px;width:36px;border-radius:2px;background:linear-gradient(90deg,#42e8ff,#3a7bfd);box-shadow:0 0 13px rgba(71,223,255,.5)}
.notice-label{font-size:11px;font-weight:850;letter-spacing:1.4px;color:#7ec4fa;}
.notice-asterisk{color:#54e5ff;margin-right:4px;font-size:14px}
.rule{height:1px;background:linear-gradient(90deg,rgba(119,202,255,.17),transparent);flex:1}
.live-label{font-size:10px;letter-spacing:2px;font-weight:800;color:#7398ca;}
.timer-track{position:absolute;bottom:0;left:0;width:100%;height:3px;background:rgba(47,111,190,.16);}
.timer-fill{height:100%;width:100%;transform-origin:left center;background:linear-gradient(90deg,#2a85fc,#62efff);box-shadow:0 0 13px rgba(48,186,255,.7)}
.streak{position:absolute;z-index:5;top:99px;left:-160px;width:155px;height:4px;border-radius:100px;background:linear-gradient(90deg,transparent,#52ecff 80%,#e4ffff);box-shadow:0 0 17px #53dfff,0 0 35px rgba(64,172,255,.55);opacity:0}
.show .streak {animation:streak-run .75s ease-out both}
@keyframes streak-run{0%{left:-170px;opacity:0}25%{opacity:.94}100%{left:950px;opacity:0}}
@media(max-width:1150px){.stage{padding-left:4%;padding-right:4%;}}
@media(prefers-reduced-motion:reduce){.show .pulse-dot,.show .avatar-halo,.show .beam,.show .streak{animation:none}}