/* TikPlayz overlay visuals — glossy black blocks, gold accents. Shared by OBS + previews. */
.tpo-av{width:2.4em;height:2.4em;flex:none;border-radius:50%;padding:2px;background:linear-gradient(145deg,#fff2c9,#f4c66f 45%,#6b4a1c);box-shadow:0 3px 10px #000a}
.tpo-av img,.tpo-ini{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;object-fit:cover;background:radial-gradient(circle at 35% 30%,#3a3326,#0d0d10);color:#f4c66f;font-weight:900;font-size:.8em}
.tpo-gicon{display:inline-grid;width:1.15em;height:1.15em;flex:none}.tpo-gicon svg{width:100%;height:100%}
.tpo-gloss{position:relative}
/* rankings */
.tpo-rank{--acc:#f4c66f;position:relative;font-family:Inter,'Segoe UI',Arial,sans-serif;color:#fff;border-radius:14px;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);background:linear-gradient(165deg,#2a241b 0%,#121113 48%,#070708 100%);box-shadow:0 10px 30px #000a,inset 0 1px #ffffff22;overflow:hidden}
.tpo-rank:before,.tpo-goal-bar .tpo-bar:before,.tpo-last-tile:before,.tpo-alert:before,.tpo-feed-item:before{content:'';position:absolute;inset:0 0 auto 0;height:50%;background:linear-gradient(180deg,#ffffff1c,#ffffff05 70%,transparent);pointer-events:none;border-radius:inherit}
.tpo-rank-card{width:18em;padding:.85em 1em 1em}
.tpo-rank-head{display:flex;justify-content:space-between;align-items:center;font-size:.72em;font-weight:900;letter-spacing:.06em}
.tpo-rank-title{color:var(--acc);font-weight:900;letter-spacing:.06em;font-size:.72em;text-transform:uppercase}
.tpo-rank-head .tpo-rank-title{font-size:1em}
.tpo-rank-cd{color:#efe6d3;font-variant-numeric:tabular-nums;font-weight:800;font-size:.72em}
.tpo-rank-head .tpo-rank-cd{font-size:1em}
.tpo-rank-who{display:flex;align-items:center;gap:.6em;margin:.8em 0}
.tpo-rank-info{display:grid;min-width:0;line-height:1.2}.tpo-rank-info strong{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tpo-rank-info span,.tpo-rank-info small{font-size:.72em;font-weight:800;color:#e6dccb}
.tpo-rank-num{margin-left:auto;font-size:2.1em;font-weight:900;letter-spacing:-.02em;background:linear-gradient(180deg,#fffbe9,var(--acc) 55%,#a8752c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #0008)}
.tpo-rank-foot{display:grid;gap:.15em}.tpo-rank-foot small{font-size:.62em;font-weight:900;letter-spacing:.08em;color:#a59d8e}.tpo-rank-foot span{font-size:.85em;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpo-rank-banner{display:flex;align-items:center;gap:.8em;padding:.5em 1em .5em .6em;border-radius:999px;width:max-content;max-width:100%}
.tpo-rank-banner .tpo-rank-num{margin:0;font-size:1.6em}.tpo-rank-banner .tpo-rank-title{padding:.45em .8em;border-radius:999px;background:#0008;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);font-size:.62em}
.tpo-rank-banner .tpo-rank-foot{max-width:14em}
/* goals */
.tpo-goal{--fill:#f4c66f;font-family:Inter,'Segoe UI',Arial,sans-serif;color:#fff}
.tpo-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1em;height:2.6em;padding:0 1em;border-radius:.7em;background:linear-gradient(180deg,#1c1a17,#08080a);border:1px solid #f4c66f66;box-shadow:0 0 18px color-mix(in srgb,var(--fill) 35%,transparent),0 8px 24px #000a,inset 0 1px #ffffff1c;overflow:hidden;min-width:18em}
.tpo-bar-fill{position:absolute;inset:0 auto 0 0;width:var(--pct);background:linear-gradient(180deg,color-mix(in srgb,var(--fill) 70%,#fff),var(--fill) 45%,color-mix(in srgb,var(--fill) 70%,#000));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.tpo-bar-label,.tpo-bar-val{position:relative;display:flex;align-items:center;gap:.45em;font-weight:900;text-shadow:0 1px 2px #000,0 0 6px #0009;white-space:nowrap}
.tpo-bar-val small{font-size:.7em;opacity:.9}
.tpo-goal-gauge{position:relative;width:14em;text-align:center}
.tpo-gauge{width:100%;display:block;filter:drop-shadow(0 6px 14px #000a)}
.tpo-gauge path{fill:none;stroke-width:18;stroke-linecap:round}.tpo-gauge-bg{stroke:#1b1916}.tpo-gauge-fill{stroke:var(--fill);transition:stroke-dashoffset .8s}
.tpo-gauge-mid{position:absolute;left:0;right:0;top:38%;display:grid;justify-items:center;line-height:1.1}
.tpo-gauge-mid strong{font-size:1.5em;font-weight:900;text-shadow:0 2px 4px #000}.tpo-gauge-mid small{font-size:.65em;font-weight:800;color:#e6dccb}
.tpo-gauge-label{margin-top:-.3em;font-weight:900;color:var(--fill);text-shadow:0 2px 3px #000}
.tpo-goal-text{display:flex;align-items:center;gap:.45em;font-weight:900;font-size:1.2em;text-shadow:0 2px 3px #000,0 0 8px #000a;white-space:nowrap}
.tpo-goal-text strong{color:var(--fill)}.tpo-goal-text small{font-size:.7em;opacity:.85}
/* feed */
.tpo-feed{font-family:Inter,'Segoe UI',Arial,sans-serif;width:22em;display:flex;flex-direction:column;gap:.6em}
.tpo-feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em;justify-content:flex-end}
.tpo-feed-item{position:relative;display:flex;align-items:center;gap:.7em;padding:.6em .8em;border-radius:.8em;animation:tpo-in .4s both;overflow:hidden}
.tpo-feed-body{display:grid;min-width:0;line-height:1.2;flex:1}.tpo-feed-body strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tpo-feed-body span{font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpo-feed-icon{width:1.5em;height:1.5em;flex:none;display:inline-grid}.tpo-feed-icon svg{width:100%;height:100%}
.tpo-theme-gold .tpo-feed-item{color:#fff;background:linear-gradient(165deg,#2a241b,#0c0c0e 70%);border:1px solid #f4c66f55;box-shadow:0 6px 18px #0009}
.tpo-theme-gold .tpo-feed-body span{color:#f3dfb4}
.tpo-theme-dark .tpo-feed-item{color:#fff;background:#111;border:1px solid #ffffff12}.tpo-theme-dark .tpo-feed-body span{color:#d8d8d8}
.tpo-theme-light .tpo-feed-item{color:#16130f;background:#fbf7ef;border:1px solid #e8d7b4}.tpo-theme-light .tpo-feed-body span{color:#5b4a2c}
.tpo-dock{width:auto;min-height:100%;background:#0b0b0d;padding:.6em;border-radius:.6em}
.tpo-dock-head{display:grid;gap:.5em;padding:.5em .4em .7em;border-bottom:1px solid #f4c66f33}
.tpo-dock-head>strong{font-weight:900;letter-spacing:.08em;background:linear-gradient(180deg,#fffbe9,#f4c66f 55%,#a8752c);-webkit-background-clip:text;background-clip:text;color:transparent}
.tpo-dock-stats{display:flex;flex-wrap:wrap;gap:.9em;font-size:.85em;color:#fff}.tpo-stat{display:inline-flex;align-items:center;gap:.3em}
/* last events */
.tpo-last{--bg:#16130f;--acc:#f4c66f;--fg:#fff;font-family:Inter,'Segoe UI',Arial,sans-serif;color:var(--fg)}
.tpo-last-tile{position:relative;display:flex;align-items:center;gap:.6em;padding:.6em 1em .6em .6em;border-radius:.9em;background:linear-gradient(165deg,color-mix(in srgb,var(--bg) 80%,#fff 8%),var(--bg) 55%,#050506);border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 8px 24px #000a,inset 0 1px #ffffff1f;min-width:10em;max-width:20em;overflow:hidden;animation:tpo-in .4s both}
.tpo-last-body{display:grid;line-height:1.15;min-width:0}.tpo-last-body small{font-size:.58em;font-weight:900;letter-spacing:.1em;color:var(--acc)}.tpo-last-body strong{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tpo-last-sub{font-size:.7em;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpo-last-bar{display:flex;gap:.5em;padding:.5em;border-radius:1.1em;background:#000a;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);width:max-content}
.tpo-last-bar .tpo-last-tile{flex-direction:column;text-align:center;gap:.35em;padding:.6em .8em;min-width:7.5em;max-width:9em;background:linear-gradient(165deg,color-mix(in srgb,var(--bg) 85%,#fff 6%),var(--bg));box-shadow:none}
.tpo-last-bar .tpo-av{width:2em;height:2em}
/* alerts */
.tpo-alert{position:relative;display:flex;align-items:center;gap:.9em;padding:.8em 1.6em .8em .8em;border-radius:1.2em;font-family:Inter,'Segoe UI',Arial,sans-serif;width:max-content;max-width:90vw;overflow:hidden;animation:tpo-pop .55s cubic-bezier(.2,1.4,.4,1) both}
.tpo-alert.tpo-leave{animation:tpo-out .4s ease-in both}
.tpo-alert.tpo-theme-gold{color:#fff;background:linear-gradient(165deg,#2e261b,#0b0b0d 70%);border:1px solid #f4c66f;box-shadow:0 0 30px #f4c66f44,0 14px 40px #000c,inset 0 1px #fff3}
.tpo-alert.tpo-theme-dark{color:#fff;background:#0b0b0d;border:1px solid #ffffff22}.tpo-alert.tpo-theme-light{color:#16130f;background:#fbf7ef;border:1px solid #e8d7b4}
.tpo-alert-av{width:3em;height:3em}.tpo-alert-gift{width:3em;height:3em;object-fit:contain}
.tpo-alert-text{font-size:1.35em;font-weight:900;text-shadow:0 2px 3px #0008}
.tpo-alert:after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#fff3,transparent);animation:tpo-shine 1.4s .3s ease-out}
@keyframes tpo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tpo-pop{from{opacity:0;transform:scale(.7) translateY(14px)}to{opacity:1;transform:none}}
@keyframes tpo-out{to{opacity:0;transform:scale(.9) translateY(-10px)}}
@keyframes tpo-shine{to{left:130%}}
@media(prefers-reduced-motion:reduce){.tpo-feed-item,.tpo-last-tile,.tpo-alert,.tpo-alert:after{animation:none}}
/* announcements */
.tpo-ann{position:relative;padding:.7em 1.4em;border-radius:1em;font-family:Inter,'Segoe UI',Arial,sans-serif;width:max-content;max-width:90vw;text-align:center;overflow:hidden;animation:tpo-pop .5s both}
.tpo-ann strong{font-weight:900;font-size:1.25em;line-height:1.25}
.tpo-ann-small strong{font-size:.9em}.tpo-ann-medium strong{font-size:1.05em}
.tpo-ann.tpo-theme-gold{color:#fff;background:linear-gradient(165deg,#2e261b,#0b0b0d 70%);border:1px solid #f4c66f;box-shadow:0 0 26px #f4c66f33,0 12px 34px #000b,inset 0 1px #fff3}
.tpo-ann.tpo-theme-dark{color:#fff;background:#0b0b0d;border:1px solid #ffffff22}.tpo-ann.tpo-theme-light{color:#16130f;background:#fbf7ef;border:1px solid #e8d7b4}
.tpo-ann:before,.tpo-stat-tile:before,.tpo-timer:before,.tpo-social:before,.tpo-chat:before{content:'';position:absolute;inset:0 0 auto 0;height:50%;background:linear-gradient(180deg,#ffffff1c,#ffffff05 70%,transparent);pointer-events:none;border-radius:inherit}
/* stats */
.tpo-stats{--acc:#f4c66f;font-family:Inter,'Segoe UI',Arial,sans-serif;color:#fff;display:flex;gap:.6em;width:max-content}
.tpo-stat-tile{position:relative;display:flex;align-items:center;gap:.6em;padding:.55em 1em .55em .7em;border-radius:.8em;background:linear-gradient(165deg,#2a241b,#0b0b0d 70%);border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 8px 22px #000a,inset 0 1px #ffffff1c;animation:tpo-in .4s both}
.tpo-stat-icon{width:1.9em;height:1.9em}.tpo-stat-body{display:grid;line-height:1.1}.tpo-stat-body small{font-size:.62em;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}.tpo-stat-body strong{font-size:1.35em;font-weight:900}
.tpo-stats-bar{padding:.35em;border-radius:1em;background:#000a;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.tpo-stats-bar .tpo-stat-tile{padding:.35em .7em .35em .45em;background:none;border:0;box-shadow:none}.tpo-stats-bar .tpo-stat-icon{width:1.3em;height:1.3em}.tpo-stats-bar .tpo-stat-body strong{font-size:.95em}
/* timer */
.tpo-timer{--acc:#f4c66f;position:relative;display:inline-grid;place-items:center;padding:.2em .55em;border-radius:.3em;font-family:'Segoe UI',Inter,Arial,sans-serif;overflow:hidden}
.tpo-timer-digits{font-size:3.6em;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.1}
.tpo-timer.tpo-theme-gold{background:linear-gradient(170deg,#2a241b,#0b0b0d 65%);border:2px solid var(--acc);box-shadow:0 0 28px color-mix(in srgb,var(--acc) 30%,transparent),0 12px 30px #000c,inset 0 1px #fff3}
.tpo-timer.tpo-theme-gold .tpo-timer-digits{background:linear-gradient(180deg,#fffbe9,var(--acc) 60%,#a8752c);-webkit-background-clip:text;background-clip:text;color:transparent}
.tpo-timer.tpo-theme-dark{background:#111;border:2px solid #ffffff22;color:#fff}.tpo-timer.tpo-theme-light{background:#fbf7ef;border:2px solid #e8d7b4;color:#16130f}
.tpo-timer-done .tpo-timer-digits{font-size:2.4em;animation:tpo-pulse 1s infinite alternate}
@keyframes tpo-pulse{to{transform:scale(1.06)}}
/* social */
.tpo-social{position:relative;display:flex;align-items:center;gap:.7em;padding:.55em .6em .55em 1em;border-radius:1em;font-family:Inter,'Segoe UI',Arial,sans-serif;width:max-content;overflow:hidden;animation:tpo-pop .5s both}
.tpo-social.tpo-theme-gold{color:#fff;background:linear-gradient(165deg,#2e261b,#0b0b0d 70%);border:2px solid #f4c66f;box-shadow:0 0 24px #f4c66f33,0 12px 30px #000b,inset 0 1px #fff3}
.tpo-social.tpo-theme-dark{color:#fff;background:#0b0b0d;border:2px solid #ffffff22}.tpo-social.tpo-theme-light{color:#16130f;background:#fbf7ef;border:2px solid #e8d7b4}
.tpo-social-icon{width:1.8em;height:1.8em;display:inline-grid}.tpo-social-icon svg{width:100%;height:100%}.tpo-theme-light .tpo-social-icon svg path[fill="#fff"]{fill:#16130f}
.tpo-social strong{font-size:1.4em;font-weight:900}
.tpo-social-follow{padding:.45em .9em;border-radius:.6em;font-weight:900;color:#1a1410;background:linear-gradient(120deg,#b9873c,#f7d58d 52%,#c79443);box-shadow:inset 0 1px #fff8}.tpo-social-follow b{margin-right:.2em}
.tpo-empty-note{color:#a59d8e;font:700 14px Inter,Arial}
/* fountains */
.tpo-fountain{position:relative;overflow:hidden}
.tpo-heart,.tpo-fly-av{position:absolute;bottom:-60px;width:calc(2.2em*var(--s,1));height:calc(2.2em*var(--s,1));transform:translateX(-50%);animation:tpo-rise var(--dur,3s) cubic-bezier(.3,.6,.4,1) forwards;filter:drop-shadow(0 0 8px #0006);pointer-events:none}
.tpo-heart svg{width:100%;height:100%}
.tpo-fly-av{width:calc(2.6em*var(--s,1));height:calc(2.6em*var(--s,1))}
@keyframes tpo-rise{0%{opacity:0;transform:translate(-50%,0) scale(.4)}12%{opacity:1;transform:translate(-50%,-10vh) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-105vh) scale(.9)}}
.tpo-chat{position:absolute;display:flex;align-items:center;gap:.5em;max-width:22em;padding:.45em .9em .45em .45em;border-radius:1.2em;font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:calc(1em*var(--s,1));overflow:hidden;pointer-events:none}
.tpo-chat .tpo-av{width:2em;height:2em}.tpo-chat-body{display:grid;line-height:1.2;min-width:0}.tpo-chat-body strong{font-size:.75em;color:#f4c66f}.tpo-chat-body span{font-weight:700}
.tpo-chat.tpo-theme-gold{color:#fff;background:linear-gradient(165deg,#2e261bee,#0b0b0dee 70%);border:1px solid #f4c66f88;box-shadow:0 8px 20px #0009}
.tpo-chat.tpo-theme-dark{color:#fff;background:#0b0b0de6;border:1px solid #ffffff22}.tpo-chat.tpo-theme-light{color:#16130f;background:#fbf7efee;border:1px solid #e8d7b4}.tpo-theme-light .tpo-chat-body strong{color:#8a5d1f}
.tpo-chat-up{bottom:-3em;animation:tpo-chat-up var(--dur,7s) linear forwards}
.tpo-chat-across{left:100%;animation:tpo-chat-across var(--dur,7s) linear forwards}
@keyframes tpo-chat-up{0%{opacity:0;transform:translateY(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-105vh)}}
@keyframes tpo-chat-across{0%{transform:translateX(0)}100%{transform:translateX(calc(-100vw - 100%))}}
@media(prefers-reduced-motion:reduce){.tpo-ann,.tpo-social,.tpo-stat-tile{animation:none}}