/* Spider Groove tip popup: gold coin button (middle right, every page but the Tip Jar page) + tip dialog. Timing uses golden-ratio steps (0.618, 1.618, 2.618, 4.236, 6.854s). */
.sgt *,.sgt *::before,.sgt *::after{box-sizing:border-box}
.sgt-fab,.sgt{--t-ink:#0e0c12;--t-ink2:#16131b;--t-line:rgba(255,255,255,.09);--t-text:#f4efe8;--t-muted:#b4aab8;--t-gold:#FFB23F;--t-grad:linear-gradient(100deg,#FFB23F 0%,#FF6A1A 35%,#FF2E4D 65%,#E0218A 100%);--t-ease:cubic-bezier(.22,1,.36,1);--t-head:var(--sg-head,"Saira Condensed","Arial Narrow",sans-serif);--t-body:"Manrope",system-ui,sans-serif;--t-mono:"JetBrains Mono",ui-monospace,monospace}

/* ---------- coin button ---------- */
.sgt-fab{position:fixed;right:20px;top:50%;z-index:99989;width:58px;height:58px;margin-top:-29px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2230,#0b090e 70%);box-shadow:0 14px 34px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,178,63,.28),0 0 26px -6px rgba(255,178,63,.55);cursor:pointer;display:grid;place-items:center;transition:transform .618s var(--t-ease),box-shadow .618s var(--t-ease),opacity .382s;-webkit-tap-highlight-color:transparent;perspective:200px}
.sgt-fab:hover,.sgt-fab:focus-visible{transform:translate(-3px,-3px) scale(1.06);box-shadow:0 18px 40px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,178,63,.5),0 0 40px -4px rgba(255,178,63,.8)}
.sgt-fab:focus-visible{outline:2px solid var(--t-gold);outline-offset:4px}
/* two soft rings breathing out, drifting slightly up and right */
.sgt-fab__pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,178,63,.6);opacity:0;pointer-events:none;animation:sgtPulse 4.236s var(--t-ease) infinite}
.sgt-fab__pulse--b{animation-delay:1.618s;border-color:rgba(255,106,26,.45)}
@keyframes sgtPulse{0%{transform:translate(0,0) scale(1);opacity:.75}100%{transform:translate(4px,-4px) scale(1.85);opacity:0}}
.sgt-fab__coin{position:relative;width:34px;height:34px;transform-style:preserve-3d;animation:sgtFlip 6.854s var(--t-ease) infinite}
.sgt-fab__coin svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(255,140,40,.45))}
.sgt-fab__coin text{font:800 22px/1 var(--t-head);fill:#7a3e08}
.sgt-fab__glint{opacity:.6;stroke-dasharray:16 40;animation:sgtGlint 4.236s ease-in-out infinite}
@keyframes sgtFlip{0%,76%,100%{transform:rotateY(0)}88%{transform:rotateY(360deg)}}
@keyframes sgtGlint{0%,100%{stroke-dashoffset:16;opacity:0}40%{opacity:.7}60%{stroke-dashoffset:-30;opacity:0}}
.sgt-fab:hover .sgt-fab__coin{animation:none;transform:rotate(-10deg) translateY(-1px)}
.sgt-fab.is-calm .sgt-fab__pulse{display:none}
.sgt-fab.is-calm .sgt-fab__coin{animation-duration:11.09s}
.sgt-fab__tip{position:absolute;right:calc(100% + 14px);top:50%;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:12px;background:rgba(14,12,18,.92);border:1px solid var(--t-line);box-shadow:0 12px 30px -10px rgba(0,0,0,.8);white-space:nowrap;text-align:left;font:500 12px/1.2 var(--t-body);color:var(--t-muted);opacity:0;transform:translate(10px,-50%);pointer-events:none;transition:opacity .382s var(--t-ease),transform .618s var(--t-ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sgt-fab__tip b{font:700 15px/1 var(--t-head);letter-spacing:.04em;text-transform:uppercase;background:var(--t-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sgt-fab:hover .sgt-fab__tip,.sgt-fab:focus-visible .sgt-fab__tip{opacity:1;transform:translate(0,-50%)}
html.sgt-open .sgt-fab,html.sgh-open .sgt-fab{transform:scale(.6);opacity:0;pointer-events:none}

/* ---------- dialog ---------- */
.sgt{box-sizing:border-box;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--t-text);overflow:hidden auto;overscroll-behavior:contain}
.sgt[open]{display:grid;place-items:center}
.sgt::backdrop{background:rgba(5,4,7,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sgt__box{position:relative;width:min(520px,100%);padding:40px 40px 30px;border-radius:26px;text-align:center;background:radial-gradient(420px 260px at 85% 0%,rgba(255,178,63,.14),transparent 65%),radial-gradient(380px 260px at 0% 100%,rgba(224,33,138,.1),transparent 65%),var(--t-ink);border:1px solid var(--t-line);box-shadow:0 40px 120px -30px rgba(0,0,0,.9);font:400 15px/1.55 var(--t-body)}
.sgt__box::before{content:"";position:absolute;left:40px;right:40px;top:0;height:1px;background:var(--t-grad);opacity:.7}
.sgt[open] .sgt__box{animation:sgtIn .618s var(--t-ease) both}
.sgt.is-closing .sgt__box{animation:sgtOut .382s var(--t-ease) both}
.sgt.is-closing::backdrop{opacity:0;transition:opacity .382s}
@keyframes sgtIn{from{opacity:0;transform:translate(-10px,26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sgtOut{to{opacity:0;transform:translate(8px,-14px) scale(.98)}}
.sgt__view.is-in{animation:sgtView .618s var(--t-ease) both}
@keyframes sgtView{from{opacity:0;transform:translateY(12px)}}
.sgt__x{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid var(--t-line);background:rgba(255,255,255,.03);color:var(--t-text);display:grid;place-items:center;cursor:pointer;transition:transform .618s var(--t-ease),background .382s,border-color .382s}
.sgt__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sgt__x:hover,.sgt__x:focus-visible{transform:rotate(90deg);background:rgba(255,74,46,.14);border-color:rgba(255,106,26,.5)}
.sgt__jar{width:96px;margin:-6px auto 6px}
.sgt__jar svg{display:block;width:100%;height:auto;overflow:visible;animation:sgtFloat 6.854s ease-in-out infinite alternate}
@keyframes sgtFloat{to{transform:translate(2px,-5px) rotate(1deg)}}
.sgt__drop{animation:sgtDrop 4.236s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sgtDrop{0%,30%{opacity:0;transform:translate(60px,-4px)}38%{opacity:1}70%{opacity:1;transform:translate(60px,78px)}78%,100%{opacity:0;transform:translate(60px,86px)}}
.sgt__eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 10px;font:600 12px/1 var(--t-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--t-gold)}
.sgt__eyebrow i{width:8px;height:8px;border-radius:50%;background:#FF4A2E;box-shadow:0 0 10px #FF4A2E;animation:sgtDot 2.618s ease-in-out infinite}
@keyframes sgtDot{50%{opacity:.35}}
.sgt .sgt__title{margin:0;padding:0;font:800 clamp(34px,5vw,48px)/.95 var(--t-head);text-transform:uppercase;letter-spacing:.01em;color:var(--t-text)}
.sgt__title em{font-style:normal;background:var(--t-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sgtShift 6.854s ease-in-out infinite alternate}
@keyframes sgtShift{to{background-position:100% 0}}
.sgt .sgt__lead{margin:14px auto 20px;max-width:400px;color:var(--t-muted);font-size:16px;line-height:1.6}
.sgt__menu{margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sgt__menu button{margin:0;padding:12px 6px;border-radius:14px;border:1px solid var(--t-line);background:rgba(255,255,255,.03);font:500 12.5px/1.3 var(--t-body);color:var(--t-muted);cursor:pointer;transition:transform .618s var(--t-ease),border-color .382s,background .618s var(--t-ease),box-shadow .618s var(--t-ease),color .382s}
.sgt__menu button:hover{transform:translate(2px,-3px);border-color:rgba(255,178,63,.4);color:var(--t-text)}
.sgt__menu button:focus-visible{outline:2px solid var(--t-gold);outline-offset:3px}
.sgt__menu button[aria-pressed=true]{transform:translate(2px,-3px);border-color:transparent;color:var(--t-text);background:linear-gradient(150deg,rgba(255,178,63,.2),rgba(224,33,138,.12));box-shadow:0 0 0 1.5px var(--t-gold),0 18px 34px -16px rgba(255,90,40,.7)}
.sgt__menu b{display:block;margin-bottom:4px;font:800 22px/1 var(--t-head);white-space:nowrap;background:linear-gradient(90deg,#FFB23F,#FF3D2E);-webkit-background-clip:text;background-clip:text;color:transparent}
.sgt .sgt__go.is-pop{animation:sgtBtn 6.854s ease-in-out infinite alternate,sgtPop .618s var(--t-ease)}
@keyframes sgtPop{40%{transform:translate(2px,-3px) scale(1.03)}}
.sgt .sgt__go{position:relative;display:block;padding:18px 24px;border-radius:999px;background:var(--t-grad);background-size:160% 100%;color:#140a08 !important;font:800 17px/1 var(--t-head);letter-spacing:.08em;text-transform:uppercase;text-decoration:none !important;box-shadow:0 22px 50px -18px rgba(255,80,40,.8);transition:transform .618s var(--t-ease),box-shadow .618s var(--t-ease);animation:sgtBtn 6.854s ease-in-out infinite alternate}
.sgt .sgt__go:hover,.sgt .sgt__go:focus-visible{transform:translate(2px,-3px);box-shadow:0 30px 60px -20px rgba(255,80,40,.95)}
.sgt .sgt__go:focus-visible{outline:2px solid var(--t-gold);outline-offset:3px}
@keyframes sgtBtn{to{background-position:100% 0}}
.sgt__later{display:inline-block;margin:14px 0 0;padding:6px 10px;border:0;background:none;color:var(--t-muted);font:500 13.5px/1.2 var(--t-body);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(180,170,184,.35);text-underline-offset:4px;transition:color .382s,text-decoration-color .382s}
.sgt__later:hover,.sgt__later:focus-visible{color:var(--t-text);text-decoration-color:var(--t-gold)}
html.sgt-open,html.sgt-open body{overflow:hidden}

@media (max-width:640px){
	.sgt-fab{right:12px;width:48px;height:48px;margin-top:-24px}
	.sgt-fab__coin{width:28px;height:28px}
	.sgt-fab__tip{display:none}
	.sgt{padding:12px}
	.sgt__box{padding:34px 20px 22px;border-radius:20px}
	.sgt__box::before{left:20px;right:20px}
	.sgt__x{top:10px;right:10px}
	.sgt__menu{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
	.sgt-fab__pulse{display:none}
	.sgt-fab__coin,.sgt-fab__glint,.sgt__jar svg,.sgt__drop,.sgt__eyebrow i,.sgt__title em,.sgt .sgt__go{animation:none}
	.sgt[open] .sgt__box,.sgt.is-closing .sgt__box,.sgt__view.is-in{animation:none}
	.sgt-fab,.sgt__x,.sgt__menu button,.sgt .sgt__go{transition:none}
	.sgt .sgt__go.is-pop{animation:none}
}