/* Intro overlay (public_intro.js). Same tokens as public_ui.css: page #0e1116 / panel #161b22 / line #2a313c / text #d7dde5 /
   dim #8b95a3 / accent #3ddc97. Every piece is a class or data attribute so a theme can restyle it without JS changes. */
.gws-intro { position: fixed; inset: 0; z-index: 70; background: rgba(6, 8, 11, .58); color: #d7dde5; cursor: pointer;
             font: 15px/1.4 -apple-system, Inter, "Segoe UI", Roboto, sans-serif; opacity: 1; transition: opacity .25s ease; }
.gws-intro.is-out { opacity: 0; pointer-events: none; }
.gws-intro .beat { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.gws-intro .beat.is-active { opacity: 1; transform: none; }
.gws-intro .gws-callout .box { position: absolute; box-sizing: border-box; border: 1px solid #3ddc97; border-radius: 12px;
             box-shadow: 0 0 0 3px rgba(61, 220, 151, .14), 0 0 26px rgba(61, 220, 151, .28); background: rgba(61, 220, 151, .04); }
.gws-intro .gws-callout .lbl { position: absolute; white-space: nowrap; padding: 8px 16px; border-radius: 12px; background: #161b22;
             border: 1px solid #3ddc97; color: #d7dde5; font: 600 clamp(15px, 1.5vw, 22px)/1.25 -apple-system, Inter, "Segoe UI", Roboto, sans-serif;
             box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.gws-intro svg.arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gws-intro svg.arrows path { stroke: #3ddc97; stroke-width: 2; fill: none; }
.gws-intro svg.arrows marker path { fill: #3ddc97; stroke: none; }
.gws-intro .gws-intro-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: min(640px, 88vw);
             background: #161b22; border: 1px solid #3ddc97; border-radius: 16px; padding: 22px 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, .55); }
.gws-intro .gws-intro-card b { display: block; font-size: clamp(22px, 3vw, 40px); font-weight: 650; line-height: 1.15; }
.gws-intro .gws-intro-card p { margin: 8px 0 0; color: #8b95a3; font-size: clamp(14px, 1.4vw, 19px); }
.gws-intro .beat[data-step=go] .gws-intro-card b { color: #3ddc97; }
.gws-intro .foot { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 12px; align-items: center; }
.gws-intro .dots { display: flex; gap: 6px; }
.gws-intro .dots i { width: 7px; height: 7px; border-radius: 50%; background: #2a313c; }
.gws-intro .dots i.is-on { background: #3ddc97; }
.gws-intro .skip { background: #161b22; color: #d7dde5; border: 1px solid #2a313c; border-radius: 999px; padding: 6px 14px; font: 600 13px inherit; cursor: pointer; }
.gws-intro .skip:hover { border-color: #3ddc97; }
/* reduced motion: every box at once, no transitions; the welcome card is dropped, the "go" card sits at the bottom */
.gws-intro[data-motion=reduced], .gws-intro[data-motion=reduced] .beat { transition: none; transform: none; }
.gws-intro[data-motion=reduced] .beat[data-step=welcome] { display: none; }
.gws-intro[data-motion=reduced] .beat[data-step=go] .gws-intro-card { top: auto; bottom: 56px; transform: translateX(-50%); padding: 12px 22px; }
/* narrow (< 820 px): a 3-line text card */
.gws-intro[data-layout=text] { display: flex; align-items: center; justify-content: center; }
.gws-intro[data-layout=text] .gws-intro-card { position: static; transform: none; padding: clamp(8px, 3vh, 20px) clamp(12px, 4vw, 24px); max-width: 92vw; }
.gws-intro[data-layout=text] .gws-intro-card b { font-size: clamp(12px, 2.4vw + 6px, 20px); }
.gws-intro[data-layout=text] .gws-intro-card p { font-size: clamp(10px, 1.6vw + 5px, 15px); margin-top: clamp(2px, 1vh, 8px); }
.gws-intro[data-layout=text] .foot { right: 8px; bottom: 6px; }
.gws-intro[data-layout=text] .skip { padding: 2px 10px; font-size: 11px; }
/* the session controls the intro points at stay visible while a queued visitor (spectator view) watches the intro */
body.gws-intro-on.gws-spectate #gws_top #gws_reset, body.gws-intro-on.gws-spectate #gws_top #gws_new, body.gws-intro-on.gws-spectate #gws_top #gws_end { display: inline-block !important; }
body.gws-intro-on.gws-spectate #gws_top .left { display: inline !important; }
body.gws-intro-on.gws-spectate #gws_ov .btns { display: flex !important; }
body.gws-intro-on.gws-spectate #gws_ov .btns #th_engage { display: none !important; }