/* Tip effects: layer, banners and the tiered cards in the message list */
#tipfx{position:fixed;inset:0;z-index:5100;pointer-events:none;overflow:hidden}
#tipfx .tipfx-c{position:absolute;inset:0;width:100%;height:100%}
#tipfx .tipfx-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 38%,rgba(255,236,170,.95),rgba(255,190,60,.45) 38%,rgba(255,160,20,0) 70%)}
#tipfx .tipfx-flash.go{animation:tipfx-flash .9s ease-out both}
@keyframes tipfx-flash{0%{opacity:0}12%{opacity:var(--s,.5)}100%{opacity:0}}
#tipfx .tipfx-rays{position:absolute;left:50%;top:36%;width:190vmax;height:190vmax;margin:-95vmax 0 0 -95vmax;opacity:0;transition:opacity .8s ease;
  background-size:100% 100%;will-change:transform;animation:tipfx-spin 24s linear infinite}
#tipfx .tipfx-rays.on{opacity:1}
@keyframes tipfx-spin{to{transform:rotate(360deg)}}
#tipfx .tipfx-aurora{position:absolute;inset:-10%;opacity:0;transition:opacity 1.4s ease;
  background:radial-gradient(40% 36% at 20% 30%,rgba(255,196,60,.45),transparent 70%),radial-gradient(38% 34% at 80% 24%,rgba(255,92,150,.32),transparent 70%),radial-gradient(46% 40% at 50% 80%,rgba(80,200,255,.28),transparent 70%);animation:tipfx-drift 7s ease-in-out infinite alternate}
#tipfx .tipfx-aurora.on{opacity:1}
@keyframes tipfx-drift{to{transform:translate3d(3%,-4%,0) scale(1.08)}}

/* Banners */
#tipfx .tipfx-banners{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top)) 12px 0}
.tipfx-b{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:min(560px,calc(100vw - 24px));color:#fff;animation:tipfx-in .55s cubic-bezier(.2,1.3,.35,1) both}
.tipfx-b.is-out{animation:tipfx-out .55s ease-in both}
@keyframes tipfx-in{0%{opacity:0;transform:translateY(-26px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes tipfx-out{to{opacity:0;transform:translateY(-18px) scale(.94)}}
.tipfx-tier{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffd35a}
.tipfx-prev{margin:2px 0;padding:1px 9px;border-radius:99px;background:rgba(255,255,255,.16);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e4e4e7;text-shadow:none}
.tipfx-line{font-size:14px;color:#e4e4e7;line-height:1.35}
.tipfx-line b{color:#fff}
.tipfx-amount{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;font-weight:900;color:#ffd35a}
.tipfx-amount small{font-size:12px;font-weight:700;color:#d4a72c;letter-spacing:.04em}
.tipfx-coin{align-self:center;display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff6c4 0 12%,#fcd34d 30%,#f59e0b 70%,#b45309 100%);box-shadow:inset 0 0 0 1.5px rgba(120,53,15,.45)}
.tipfx-num{font-size:26px;line-height:1}
.tipfx-note{max-width:420px;font-size:13px;font-style:italic;color:#d4d4d8}

/* Small tips: a quiet pill at the top */
.tipfx-b.t0,.tipfx-b.t1{flex-direction:row;gap:12px;flex-wrap:wrap;justify-content:center;padding:9px 16px;border-radius:99px;background:rgba(18,16,10,.9);border:1px solid rgba(251,191,36,.45);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tipfx-b.t0 .tipfx-tier,.tipfx-b.t1 .tipfx-tier,.tipfx-b.t0 .tipfx-note,.tipfx-b.t1 .tipfx-note{display:none}
.tipfx-b.t0 .tipfx-num,.tipfx-b.t1 .tipfx-num{font-size:18px}
.tipfx-b.t0 .tipfx-line,.tipfx-b.t1 .tipfx-line{font-size:13px}

/* Bigger tips: a card with a glowing edge */
.tipfx-b.t2{gap:3px;margin-top:6vh;padding:16px 28px 18px;border-radius:20px;background:linear-gradient(180deg,rgba(40,30,8,.94),rgba(16,12,4,.95));border:1px solid rgba(251,191,36,.6);box-shadow:0 0 0 1px rgba(255,214,90,.15),0 0 60px rgba(255,190,40,.35),0 20px 50px rgba(0,0,0,.55)}
.tipfx-b.t2 .tipfx-num{font-size:34px}

/* Huge and up: the title takes over the screen */
.tipfx-b.t3,.tipfx-b.t4,.tipfx-b.t5,.tipfx-b.t6{margin-top:11vh;gap:4px;padding:6px 14px;text-shadow:0 3px 0 rgba(90,50,0,.65),0 0 34px rgba(255,190,40,.7)}
.tipfx-crown{font-size:44px!important;color:#ffd35a;filter:drop-shadow(0 0 16px rgba(255,190,40,.9));animation:tipfx-bob 1.6s ease-in-out infinite alternate}
@keyframes tipfx-bob{to{transform:translateY(-6px) rotate(-4deg)}}
.tipfx-b.t3 .tipfx-tier,.tipfx-b.t4 .tipfx-tier,.tipfx-b.t5 .tipfx-tier,.tipfx-b.t6 .tipfx-tier{font-size:clamp(24px,5.2vw,44px);font-weight:900;letter-spacing:.06em;font-style:italic;transform:skewX(-8deg);
  background:linear-gradient(180deg,#fffbe0 0,#ffe27a 38%,#f7a915 62%,#ffd35a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(120,60,0,.55);text-shadow:none;filter:drop-shadow(0 4px 0 rgba(110,55,0,.7)) drop-shadow(0 0 22px rgba(255,190,40,.8))}
.tipfx-b.t3 .tipfx-num,.tipfx-b.t4 .tipfx-num,.tipfx-b.t5 .tipfx-num,.tipfx-b.t6 .tipfx-num{font-size:clamp(40px,9vw,76px);color:#fff7cc}
.tipfx-b.t3 .tipfx-coin,.tipfx-b.t4 .tipfx-coin,.tipfx-b.t5 .tipfx-coin,.tipfx-b.t6 .tipfx-coin{width:clamp(26px,5vw,44px);height:clamp(26px,5vw,44px)}
.tipfx-b.t3 .tipfx-line,.tipfx-b.t4 .tipfx-line,.tipfx-b.t5 .tipfx-line,.tipfx-b.t6 .tipfx-line{font-size:clamp(15px,2.4vw,20px);color:#fff}
.tipfx-b.t4 .tipfx-tier{font-size:clamp(28px,6.4vw,56px)}
.tipfx-b.t5 .tipfx-tier{font-size:clamp(26px,5.4vw,54px)}
.tipfx-b.t6 .tipfx-tier{font-size:clamp(28px,6vw,62px);animation:tipfx-hue 2.4s ease-in-out infinite}
@keyframes tipfx-hue{0%,100%{filter:drop-shadow(0 4px 0 rgba(110,55,0,.7)) drop-shadow(0 0 22px rgba(255,190,40,.8))}50%{filter:drop-shadow(0 4px 0 rgba(110,55,0,.7)) drop-shadow(0 0 34px rgba(255,120,200,.95))}}
.tipfx-b.t6 .tipfx-crown,.tipfx-b.t5 .tipfx-crown{font-size:58px!important}

/* Screen shake on the app shell */
#app.tipfx-shake-1{animation:tipfx-s1 .55s ease-out}
#app.tipfx-shake-2{animation:tipfx-s2 .75s ease-out}
#app.tipfx-shake-3{animation:tipfx-s3 .95s ease-out}
#app.tipfx-shake-4{animation:tipfx-s4 1.2s ease-out}
@keyframes tipfx-s1{0%,100%{transform:none}20%{transform:translate(-2px,2px)}40%{transform:translate(2px,-2px)}60%{transform:translate(-1px,1px)}80%{transform:translate(1px,0)}}
@keyframes tipfx-s2{0%,100%{transform:none}10%{transform:translate(-5px,3px)}25%{transform:translate(5px,-4px)}40%{transform:translate(-4px,-2px)}55%{transform:translate(3px,3px)}70%{transform:translate(-2px,1px)}85%{transform:translate(1px,-1px)}}
@keyframes tipfx-s3{0%,100%{transform:none}8%{transform:translate(-9px,5px) rotate(-.3deg)}20%{transform:translate(9px,-6px) rotate(.3deg)}32%{transform:translate(-7px,-4px)}44%{transform:translate(6px,6px) rotate(.2deg)}58%{transform:translate(-4px,2px)}72%{transform:translate(3px,-3px)}86%{transform:translate(-1px,1px)}}
@keyframes tipfx-s4{0%,100%{transform:none}6%{transform:translate(-14px,8px) rotate(-.5deg)}16%{transform:translate(14px,-9px) rotate(.5deg)}26%{transform:translate(-11px,-6px) rotate(-.3deg)}38%{transform:translate(10px,9px) rotate(.3deg)}50%{transform:translate(-7px,4px)}64%{transform:translate(5px,-5px)}80%{transform:translate(-2px,2px)}}

/* Tip cards in the message list get fancier as the amount grows */
.gift-tip{position:relative;overflow:hidden}
.gift-tier{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1c1302;background:linear-gradient(145deg,#fde68a,#f59e0b);vertical-align:1px}
.gift-replay{position:absolute;right:8px;bottom:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 5px;border:0;border-radius:99px;background:rgba(255,255,255,.07);color:#a1a1aa;font:600 11px/1.5 inherit;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}
.gift-replay .material-icons-round{font-size:14px}
.gift-tip:hover .gift-replay,.gift-replay:focus-visible{opacity:1}
.gift-replay:hover{background:rgba(251,191,36,.18);color:#fbbf24}
@media (hover:none){.gift-replay{opacity:.75}}
.gift-tip.gift-t2{border-color:rgba(251,191,36,.5);background:linear-gradient(90deg,rgba(251,191,36,.14),rgba(251,191,36,.05));box-shadow:0 0 0 1px rgba(251,191,36,.08),0 0 24px rgba(251,191,36,.12)}
.gift-tip.gift-t3,.gift-tip.gift-t4,.gift-tip.gift-t5,.gift-tip.gift-t6{padding:14px 16px;border-color:rgba(255,214,90,.7);background:linear-gradient(100deg,rgba(255,196,60,.22),rgba(255,160,20,.07) 60%,rgba(255,196,60,.18));box-shadow:0 0 0 1px rgba(255,214,90,.2),0 0 34px rgba(255,190,40,.22)}
.gift-tip.gift-t3::after,.gift-tip.gift-t4::after,.gift-tip.gift-t5::after,.gift-tip.gift-t6::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,244,200,.2) 50%,transparent 65%);transform:translateX(-120%);animation:tipfx-sheen 4.2s ease-in-out infinite}
@keyframes tipfx-sheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.gift-tip.gift-t3 .gift-amt,.gift-tip.gift-t4 .gift-amt,.gift-tip.gift-t5 .gift-amt,.gift-tip.gift-t6 .gift-amt{font-size:16px}
.gift-tip.gift-t4 .gift-amt,.gift-tip.gift-t5 .gift-amt,.gift-tip.gift-t6 .gift-amt{font-size:19px}
.gift-tip.gift-t5,.gift-tip.gift-t6{border-image:linear-gradient(100deg,#ffd35a,#ff8bd0,#7ad7ff,#ffd35a) 1;border-radius:0}
.gift-tip.gift-t6{animation:tipfx-pulse 2.4s ease-in-out infinite}
@keyframes tipfx-pulse{50%{box-shadow:0 0 0 1px rgba(255,214,90,.3),0 0 54px rgba(255,190,40,.4)}}

/* Preview line under the tip amount */
.gift-fxhint{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:-2px 0 10px;padding:8px 10px;border-radius:10px;background:rgba(251,191,36,.07);font-size:12px;color:#d4d4d8}
.gift-fxhint b{color:#fbbf24}
.gift-fxrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gift-fxhint .gift-fxmode{margin-top:0}
.gift-fxhint button{border:0;border-radius:8px;padding:5px 10px;background:rgba(251,191,36,.16);color:#fbbf24;font:700 12px/1 inherit;cursor:pointer}
.gift-fxhint button:hover{background:rgba(251,191,36,.28)}
.gift-fxmode{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12px;color:#a1a1aa}
.gift-fxmode select{background:#18181b;color:#e4e4e7;border:1px solid #3f3f46;border-radius:8px;padding:5px 8px;font:inherit}

.tpro-3d{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5095}
#tipfx-pro{position:fixed;inset:0;z-index:5090;pointer-events:none;overflow:hidden}
#tipfx-pro .tpro-fw,#tipfx-pro .tpro-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#tipfx-pro .tpro-fw canvas{width:100%!important;height:100%!important;pointer-events:none!important}

@media (prefers-reduced-motion:reduce){#tipfx-pro{display:none}#tipfx .tipfx-rays,#tipfx .tipfx-aurora,.tipfx-crown,.gift-tip::after,.tipfx-b.t6 .tipfx-tier{animation:none}.tipfx-b{animation-duration:.01s}}

/* ── Scene layer: lighting changes + world events (tip-fx-scene.js) ── */
#tipfx-scene{position:fixed;inset:0;z-index:5085;pointer-events:none;overflow:hidden}
#tipfx-scene>*{position:absolute;pointer-events:none}
#tipfx-scene .sc-c{inset:0}
.sc-dark{inset:0;opacity:0;transition:opacity .7s ease;background:radial-gradient(ellipse 62% 56% at 50% 38%,rgba(0,0,0,0) 0,rgba(3,4,14,.7) 68%,rgba(0,0,8,.9) 100%)}
.sc-dark.deep{background:radial-gradient(circle at 50% 36%,rgba(0,0,0,0) 0 8vmin,rgba(0,0,10,.9) 36vmin)}
.sc-dark.on{opacity:1}
.sc-hour{inset:0;opacity:0;transition:opacity 1.8s ease;background:linear-gradient(to top,rgba(255,120,20,.55),rgba(255,70,120,.32) 42%,rgba(110,60,210,.26) 82%)}
.sc-hour::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 80% at 50% 105%,rgba(255,170,60,.34),rgba(255,90,40,.12) 55%,transparent 75%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(40,0,30,.4))}
.sc-hour.on{opacity:1}
.sc-sun{left:50%;bottom:0;width:78vmin;height:78vmin;margin-left:-39vmin;border-radius:50%;opacity:0;will-change:transform,opacity;transform:translateY(70vmin) scale(.55);
  background:radial-gradient(circle,#fff 0,#fff1ae 16%,#ffbe4a 36%,rgba(255,140,30,.55) 54%,rgba(255,90,20,0) 72%);transition:transform 4.2s cubic-bezier(.2,.75,.25,1),opacity 1.6s ease}
.sc-sun.on{opacity:1;transform:translateY(22vmin) scale(1.3)}
.sc-rays{left:50%;top:100%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;opacity:0;transition:opacity 2.4s ease;
  background-size:100% 100%;will-change:transform;animation:sc-spin 50s linear infinite}
.sc-rays.on{opacity:1}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-beams{inset:0;opacity:0;transition:opacity .5s ease}
.sc-beams.on{opacity:1}
.sc-beam{display:block;position:absolute;left:var(--x);top:-6vh;width:34vmin;height:125vh;margin-left:-17vmin;transform-origin:50% 0;opacity:.42;will-change:transform;
  background:linear-gradient(to bottom,var(--c),transparent 88%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);animation:sc-sweep var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes sc-sweep{from{transform:rotate(-34deg)}to{transform:rotate(34deg)}}
.sc-wash{inset:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at 15% 85%,rgba(255,0,170,.32),transparent 55%),radial-gradient(circle at 85% 15%,rgba(0,200,255,.32),transparent 55%)}
.sc-wash.on{opacity:1}
.sc-white{inset:0;background:#fff;opacity:0}
.sc-white.go{animation:sc-white .55s ease-out both}
@keyframes sc-white{0%{opacity:var(--a,.5)}100%{opacity:0}}
.sc-nova{left:50%;top:38%;width:22vmin;height:22vmin;margin:-11vmin 0 0 -11vmin;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff 0,#fff0b8 28%,rgba(255,190,60,.75) 52%,rgba(255,140,20,0) 72%)}
.sc-nova.go{animation:sc-nova 1.7s cubic-bezier(.12,.8,.2,1) both}
@keyframes sc-nova{0%{opacity:1;transform:scale(.15)}55%{opacity:.85}100%{opacity:0;transform:scale(16)}}
.sc-bar{left:0;right:0;height:0;background:#000;transition:height .8s cubic-bezier(.2,.8,.2,1)}
.sc-bar.t{top:0}.sc-bar.b{bottom:0}
#tipfx-scene.cine .sc-bar{height:9vh}
@media (prefers-reduced-motion:reduce){#tipfx-scene{display:none}}