/* golive.css — A Girl & Her Futures™ · AGHF Live from the browser (admin-go-live.html, and the player on live.html) */
.gl-stage{position:relative;border-radius:16px;overflow:hidden;background:var(--bg-131722,#131722);aspect-ratio:16/9}
.gl-stage video.gl-screen{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--bg-131722,#131722)}
.gl-stage .gl-cam{position:absolute;left:12px;bottom:12px;width:min(14%,130px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:3px solid var(--ln-ffffff,#FFFFFF);background:var(--bg-2c1810,#2C1810);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.gl-stage .gl-cam video{width:100%;height:100%;object-fit:cover;display:block}
.gl-stage .gl-cam.off{display:none}
.gl-stage .gl-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--fg-ffffff,#FFFFFF);font:500 15px/1.5 var(--font-body);padding:20px;opacity:.85}
.gl-stage .gl-cc{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:52%;background:rgba(20,12,10,.82);color:var(--fg-ffffff,#FFFFFF);border-radius:10px;padding:6px 12px;font:600 16px/1.4 var(--font-body);text-align:center}
.gl-stage .gl-cc[hidden]{display:none}
.gl-stage .gl-song{position:absolute;right:8px;bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(20,12,10,.66);color:var(--fg-ffffff,#FFFFFF);border-radius:999px;padding:1px 7px;font:600 8.5px/1.4 var(--font-body);max-width:min(30%,200px)}
@media (max-width:560px){.gl-stage .gl-song{right:5px;bottom:5px;padding:1px 5px;font-size:7.5px;max-width:36%}}
/* Captions sit above the song when both show */
.gl-stage:has(.gl-song:not([hidden])) .gl-cc{bottom:32px}
.gl-stage .gl-song[hidden]{display:none}
.gl-stage .gl-float{position:absolute;bottom:40px;font-size:18px;animation:glFloat 2.4s ease-out forwards;pointer-events:none}
@keyframes glFloat{to{transform:translate(var(--dx,0),-220px);opacity:0}}

.gl-back{display:inline-block;margin-bottom:8px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none}
.gl-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.gl-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.gl-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.gl-btn{border:1.5px solid var(--border);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:9px 16px;font:700 14px var(--font-body);color:var(--dark);cursor:pointer}
.gl-btn:disabled{opacity:.45;cursor:default}
.gl-btn.live{border:0;background:var(--bg-e5484d,#E5484D);color:var(--fg-ffffff,#FFFFFF)}
.gl-btn.on{background:var(--bg-e3f6f3,#E3F6F3);border-color:var(--ln-7ecec4,#7ECEC4);color:var(--fg-2f8f84,#2F8F84)}
.gl-btn.off{background:var(--bg-fef1e1,#FEF1E1);border-color:var(--ln-f9cd8a,#F9CD8A);color:var(--fg-b86e1e,#B86E1E)}
.gl-btn.go{border:0;color:var(--fg-ffffff,#FFFFFF);background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857))}
.gl-btn.big{padding:13px 26px;font-size:16px}
.gl-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap;background:var(--bg-f3e8ea,#F3E8EA);color:var(--fg-7a5c55,#7A5C55)}
.gl-tag.live{background:var(--bg-e5484d,#E5484D);color:var(--fg-ffffff,#FFFFFF)}
.gl-tag.live i{width:7px;height:7px;border-radius:50%;background:var(--bg-ffffff,#FFFFFF);animation:glBlink 1.2s infinite}
.gl-tag.rec{background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-c2456a,#C2456A)}
.gl-tag.rec i{width:8px;height:8px;border-radius:50%;background:var(--bg-e5484d,#E5484D);animation:glBlink 1.2s infinite}
@keyframes glBlink{50%{opacity:.3}}
.gl-timer{font:900 1.2rem var(--font-display);color:var(--dark);font-variant-numeric:tabular-nums}

.gl-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.gl-src{border:1.5px solid var(--border);background:var(--bg-fdf8f5,#FDF8F5);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.gl-src b{color:var(--dark)}
.gl-src small{color:var(--muted);font-size:12.5px}
.gl-src.ready{border-color:var(--ln-7ecec4,#7ECEC4);background:var(--bg-e3f6f3,#E3F6F3)}
.gl-src select,.gl-f input,.gl-f select{width:100%;min-width:0;border:1.5px solid var(--border);border-radius:12px;padding:8px 10px;font:500 14px var(--font-body);background:var(--bg-ffffff,#FFFFFF);color:var(--dark)}
.gl-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.gl-f label{font-size:12px;font-weight:700;color:var(--muted)}
.gl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.gl-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--dark);font-weight:700}
.gl-f input[type=range]{padding:0;border:0;background:none;accent-color:var(--fg-f4829a,#F4829A)}
.gl-check input{width:20px;height:20px;accent-color:var(--fg-f4829a,#F4829A);margin-top:1px;flex:none}
.gl-check small{display:block;font-weight:500;color:var(--muted)}
.gl-note{font-size:13px;color:var(--muted);margin:8px 0 0}
.gl-ok{color:var(--fg-2f8f84,#2F8F84);font-weight:700}
.gl-warn{color:var(--fg-b86e1e,#B86E1E);font-weight:700}
.gl-err{background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-c2456a,#C2456A);border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;margin-bottom:12px}
.gl-progress{height:12px;border-radius:999px;background:var(--bg-f3e8ea,#F3E8EA);overflow:hidden;margin:12px 0 6px}
.gl-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857));transition:width .3s}

.gl-now{margin:8px 0 0;font-size:14px;color:var(--muted)}
.gl-now b{color:var(--dark)}
.gl-ctl{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.gl-songs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}
.gl-songs li{display:flex;align-items:center;gap:6px;border-radius:10px;background:var(--bg-fdf8f5,#FDF8F5)}
.gl-songs li.on{background:var(--bg-fde8ed,#FDE8ED)}
.gl-song-name{flex:1;min-width:0;text-align:left;border:0;background:none;padding:7px 10px;font:600 13.5px var(--font-body);color:var(--dark);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-x{border:0;background:none;color:var(--muted);font-size:18px;padding:4px 10px;cursor:pointer}
.gl-chat{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto}
.gl-chat-under{max-height:240px}
.gl-msg{font-size:14px;line-height:1.45;background:var(--bg-fdf8f5,#FDF8F5);border-radius:12px;padding:7px 10px}
.gl-msg b{color:var(--dark);font-size:13px}
.gl-msg.q{background:var(--bg-fef1e1,#FEF1E1)}
.gl-msg.host-msg{background:var(--bg-e3f6f3,#E3F6F3)}
.gl-say{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.gl-say input[type=text]{flex:1 1 180px;min-width:0;border:1.5px solid var(--border);border-radius:999px;padding:9px 13px;font:500 14px var(--font-body);background:var(--bg-ffffff,#FFFFFF);color:var(--dark)}
/* Member chat on live.html: messages fill the box, the box to send sits at the bottom */
.lv-chat .gl-chat{flex:1;min-height:0;max-height:none;padding:12px 14px}
.lv-chat .gl-say{margin:0;padding:10px 12px 12px;border-top:1px solid var(--border)}
.gl-say .gl-q{flex-basis:100%}
.gl-q{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.gl-q input{accent-color:var(--fg-f5a857,#F5A857)}
.gl-qs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gl-qs li{background:var(--bg-fef1e1,#FEF1E1);border-radius:12px;padding:8px 10px;font-size:14px}
.gl-qs li small{display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--muted);margin-top:4px}
.gl-reacts{display:flex;gap:6px;margin-top:10px}
.gl-reacts button{border:1.5px solid var(--border);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:5px 11px;font-size:18px;cursor:pointer}
.gl-listen{display:flex;gap:10px;align-items:center;background:var(--bg-e3f6f3,#E3F6F3);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--fg-2f8f84,#2F8F84);margin-top:10px}
.gl-listen button{margin-left:auto}

@media (max-width:900px){.gl-grid{grid-template-columns:1fr}.gl-setup{grid-template-columns:1fr}}
@media (max-width:560px){.gl-row{grid-template-columns:1fr}.gl-stage .gl-cam{width:17%;left:8px;bottom:8px;border-width:2px;border-radius:10px}}
@media (prefers-reduced-motion:reduce){.gl-tag i{animation:none}.gl-stage .gl-float{animation:glFade 2.4s ease-out forwards}}
@keyframes glFade{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

/* Scenes: Starting soon, Not financial advice, Ending (shared/live-scenes.js) */
.gl-stage .gl-scene{position:absolute;inset:0;z-index:2;overflow:hidden;background:var(--bg-2c1810,#2C1810)}
.gl-stage .gl-scene[hidden]{display:none}
.gl-scene-img{width:100%;height:100%;object-fit:cover;display:block}
.gl-scene-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:6% 10%;background:linear-gradient(135deg,var(--bg-2c1810,#2C1810),var(--bg-5c2438,#5C2438));color:var(--fg-ffffff,#FFFFFF)}
.gl-scene-eye{font:800 clamp(9px,1.4vw,14px) var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-f4829a,#F4829A)}
.gl-scene-card h2{margin:0;font:900 clamp(20px,5vw,54px)/1.05 var(--font-display);color:var(--fg-ffffff,#FFFFFF)}
.gl-scene-card h2 em{color:var(--fg-f4829a,#F4829A)}
.gl-scene-card p{margin:0;max-width:640px;font:500 clamp(10px,1.6vw,17px)/1.45 var(--font-body);color:var(--fg-f3e8ea,#F3E8EA)}
.gl-scene-brand{margin-top:6px;font:900 clamp(10px,1.3vw,14px) var(--font-display);color:var(--fg-f5a857,#F5A857)}
.gl-stage .gl-cc,.gl-stage .gl-song,.lv-badges{z-index:3}
/* LIVE and the timer sit in the top corner of the real player (the example page leaves room for a chart bar) */
.gl-stage .lv-badges{top:8px;left:8px;gap:5px}
.gl-stage .lv-badges .lv-live,.gl-stage .lv-badges .lv-time{padding:2px 7px;font-size:10.5px;border-radius:6px;gap:4px}
.gl-stage .lv-badges .lv-live i{width:6px;height:6px}
@media (max-width:560px){.gl-stage .lv-badges{top:6px;left:6px;gap:4px}.gl-stage .lv-badges .lv-live,.gl-stage .lv-badges .lv-time{padding:1px 6px;font-size:9.5px}.gl-stage .lv-badges .lv-live i{width:5px;height:5px}}
.gl-scenes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.gl-scenes .gl-btn.on{background:var(--bg-2c1810,#2C1810);border-color:var(--ln-2c1810,#2C1810);color:var(--fg-ffffff,#FFFFFF)}
.gl-scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.gl-scene-pick{display:flex;flex-direction:column;gap:6px;min-width:0}
.gl-scene-pick .gl-stage{border-radius:10px}
.gl-scene-pick small{font-size:12px;font-weight:700;color:var(--dark)}
.gl-scene-pick .gl-btn{padding:6px 10px;font-size:12px;justify-content:center}
@media (max-width:560px){.gl-scene-grid{grid-template-columns:1fr 1fr}.gl-stage .gl-scene-card .gl-scene-eye{display:none}.gl-stage .gl-scene-card{padding:46px 7% 10px;gap:4px}}

/* Apex code under the live (live.html) */
.gl-apex{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 14px;border-radius:16px;background:linear-gradient(135deg,var(--bg-fff6ec,#FFF6EC),var(--bg-fde8ed,#FDE8ED));border:1.5px solid var(--ln-f9cd8a,#F9CD8A)}
.gl-apex-logo{padding:2px 8px;border-radius:6px;background:var(--bg-2c1810,#2C1810);color:var(--fg-ffffff,#FFFFFF);font:900 11px/1.5 var(--font-body);letter-spacing:.2em}
.gl-apex b{font:900 15px var(--font-display);color:var(--dark)}
.gl-apex-copy{border:1.5px dashed var(--ln-f4829a,#F4829A);background:var(--bg-ffffff,#FFFFFF);color:var(--fg-7a5c50,#7A5C50);border-radius:999px;padding:5px 12px;font:600 13px var(--font-body);cursor:pointer}
.gl-apex-copy strong{color:var(--fg-e0607c,#E0607C);letter-spacing:.06em}
.gl-apex a{margin-left:auto;font:800 13px var(--font-body);color:var(--fg-a8651a,#A8651A);text-decoration:none}

/* Full screen for members (live.html): ⛶ or a tap on a phone; "Back to chat" to type again */
.gl-fs{position:absolute;right:10px;top:10px;z-index:4;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:rgba(20,12,10,.6);color:var(--fg-ffffff,#FFFFFF);font-size:18px;cursor:pointer}
.gl-fs-x{display:none}
.gl-stage.fs,.gl-stage:fullscreen{position:fixed;inset:0;z-index:1000;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:var(--bg-000000,#000000)}
.gl-stage.fs .gl-fs{display:none}
.gl-stage.fs .gl-fs-x{display:inline-flex;align-items:center;position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:5;border:0;border-radius:999px;padding:9px 15px;background:rgba(20,12,10,.72);color:var(--fg-ffffff,#FFFFFF);font:800 14px var(--font-body);cursor:pointer}
.gl-stage.fs .lv-badges{top:calc(12px + env(safe-area-inset-top))}
/* Keep the camera in the chart's corner when the screen is taller or wider than 16:9 */
.gl-stage.fs .gl-cam{bottom:max(12px,calc((100vh - 56.25vw) / 2 + 12px));left:max(12px,calc((100vw - 177.78vh) / 2 + 12px))}
body.gl-fs-on{overflow:hidden}
body.gl-fs-on .main{z-index:1000}
body.gl-fs-on .mb-bar{display:none}

/* Under the member's player (live.html): title, status and reactions centred; small reactions */
.lv-real .lv-below{flex-direction:column;justify-content:center;text-align:center;gap:8px}
.lv-real .lv-below #glSub{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px}
.lv-real .lv-react{justify-content:center;gap:5px}
.lv-real .lv-react button{padding:3px 9px;font-size:.88rem;line-height:1.4}
.lv-real .lv-react button.sent{animation:glSent .35s ease-out}
@keyframes glSent{40%{transform:scale(1.25)}}
/* "You're listening" runs the full width under the player */
.lv-real .lv-watch #glListen{flex:1 1 100%}
.lv-real .gl-listen{width:100%;box-sizing:border-box;justify-content:center;text-align:center;border-radius:12px;margin-top:0}
.lv-real .gl-listen button{margin-left:6px}
@media (max-width:560px){.gl-stage .gl-float{font-size:15px;bottom:28px}}

/* Recordings to save: backups the browser kept from earlier lives (shared/live-backup.js). */
.gl-backup{border:2px solid var(--ln-f4829a,#F4829A);background:var(--bg-fdf3ef,#FDF3EF);margin-bottom:16px}
.gl-bk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--ln-f3e6e0,#F3E6E0);margin-top:10px}
.gl-bk > span:first-child{flex:1 1 220px;min-width:0}
.gl-bk b{display:block;font-size:15px}
.gl-bk small{display:block;font-size:12.5px;color:var(--muted)}
.gl-bk-acts{display:flex;gap:6px;flex-wrap:wrap}