/* the 60-second start: the whole screen, black glass, one button */
.gm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; opacity: 0; transition: opacity .3s ease; }
.gm.is-in { opacity: 1; }
.gm-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .88); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.gm.is-late .gm-bg { background: radial-gradient(120% 80% at 50% 45%, rgba(120, 10, 10, .55), rgba(0, 0, 0, .92) 70%); }
.gm-core { position: relative; width: min(88vw, 380px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; color: #fff; transform: translateY(14px); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.gm.is-in .gm-core { transform: none; }
.gm-faces { display: flex; align-items: center; min-height: 34px; }
.gm-faces .g-avatar { width: 34px !important; height: 34px !important; margin-left: -8px; box-shadow: 0 0 0 2px #000; font-size: 13px; }
.gm-faces .g-avatar:first-child { margin-left: 0; }
.gm-watch { margin-left: 10px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.gm-ring { position: relative; width: 200px; height: 200px; margin: 6px 0 2px; }
.gm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gm-ring circle { fill: none; stroke-width: 6; }
.gm-ring-bg { stroke: rgba(255, 255, 255, .12); }
.gm-ring-fg { stroke: #fff; stroke-linecap: round; }
.gm.is-late .gm-ring-fg { stroke: #ff453a; }
.gm-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.gm.is-late .gm-n { color: #ff453a; }
.gm-n.is-beat { animation: gmBeat .45s ease; }
@keyframes gmBeat { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.gm-title { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.gm-line { margin: 0; font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.gm-go { margin-top: 10px; width: 100%; height: 58px; border: 0; border-radius: 29px; background: #fff; color: #000; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; }
.gm-go:active { transform: scale(.97); }
.gm-later { border: 0; background: none; color: rgba(255, 255, 255, .5); font: inherit; font-size: 14.5px; padding: 8px 14px; cursor: pointer; }
.gm.is-missed .gm-bg { background: rgba(40, 0, 0, .9); }
.gm-gone { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #ff453a; position: relative; margin-bottom: 4px; }
.gm-gone::before, .gm-gone::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 3px; background: #ff453a; border-radius: 2px; }
.gm-gone::before { transform: translate(-50%, -50%) rotate(45deg); }
.gm-gone::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* on the card, for everyone */
.gcard-moment { font-weight: 700; }
.gcard-moment.is-missed { background: rgba(255, 69, 58, .18) !important; color: #ff6b61 !important; box-shadow: inset 0 0 0 1px rgba(255, 69, 58, .45); }
.gcard-moment.is-started { color: #7ee2a8 !important; }
@media (prefers-reduced-motion: reduce) { .gm-n.is-beat { animation: none; } }

/* the stage: you on camera behind it, the crowd that's been called above */
.gm-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; transition: opacity .6s ease; }
.gm.has-cam .gm-cam { opacity: 1; }
.gm.has-cam .gm-bg { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.8)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gm.has-cam.is-late .gm-bg { background: linear-gradient(180deg, rgba(90,0,0,.6), rgba(60,0,0,.35) 40%, rgba(40,0,0,.85)); }
.gm-top { position: absolute; top: calc(18px + var(--safe-t, 0px)); left: 0; right: 0; display: flex; justify-content: center; z-index: 2; }
.gm-onair { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.gm-onair i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: gmBlink 1s steps(2, start) infinite; }
@keyframes gmBlink { to { visibility: hidden; } }
.gm-faces { flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 340px; min-height: 54px; }
.gm-faces .g-avatar { width: 54px !important; height: 54px !important; margin-left: 0 !important; font-size: 20px; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.5); opacity: 0; transform: translateY(10px) scale(.8); animation: gmIn .45s cubic-bezier(.2,.9,.3,1.3) forwards; }
.gm.is-late .gm-faces .g-avatar { box-shadow: 0 0 0 2px #ff453a, 0 6px 18px rgba(0,0,0,.5); }
.gm-more { align-self: center; font-weight: 800; color: rgba(255,255,255,.8); }
@keyframes gmIn { to { opacity: 1; transform: none; } }
.gcard-moment.is-counting { background: #ff3b30 !important; color: #fff !important; }

/* busy: pick when it comes back */
.gm-when { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2px; }
.gm-chip { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 14px; border-radius: 999px; cursor: pointer; }
.gm-chip:active { transform: scale(.96); background: rgba(255,255,255,.18); }
.gm-again { margin: -6px 0 0; font-size: 14px; font-weight: 700; color: #ff9f0a; }

/* ---------- Treatly calls you: an incoming call, your face behind it ---------- */
.gm--call { display: block; }
.gm--call .gm-bg { background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.25) 38%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.85)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gm--call:not(.has-cam) .gm-bg { background: radial-gradient(120% 70% at 50% 30%, #1d1d22, #000 75%); }
.gm-caller { position: absolute; top: calc(64px + var(--safe-t, 0px)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; }
.gm-caller-mark { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 0 rgba(255,255,255,.4); animation: gmCall 1.6s ease-out infinite; }
@keyframes gmCall { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 100% { box-shadow: 0 0 0 26px rgba(255,255,255,0); } }
.gm-caller-name { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.gm-caller-state { font-size: 17px; color: rgba(255,255,255,.75); }
.gm-say { position: absolute; left: 24px; right: 24px; top: 46%; transform: translateY(-50%); text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gm--call .gm-title { font-size: 30px; line-height: 1.15; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.gm--call .gm-line { color: rgba(255,255,255,.85); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.gm--call .gm-faces { gap: 0; min-height: 34px; }
.gm--call .gm-faces .g-avatar { width: 34px !important; height: 34px !important; margin-left: -8px !important; font-size: 13px; box-shadow: 0 0 0 2px #000; }
.gm--call .gm-faces .g-avatar:first-child { margin-left: 0 !important; }
.gm-btns { position: absolute; left: 0; right: 0; bottom: calc(64px + var(--safe-b, 0px)); display: flex; justify-content: space-around; padding: 0 40px; }
.gm-btns[hidden] { display: none; }
.gm-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-size: 15px; }
.gm-btn button { width: 78px; height: 78px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; }
.gm-btn button:active { transform: scale(.93); }
.gm--call .gm-go { margin: 0; height: 78px; width: 78px; background: #30d158; color: #fff; font-size: 0; animation: gmNudge 1.2s ease-in-out infinite; }
.gm--call .gm-later { padding: 0; background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@keyframes gmNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.gm--call .gm-when { position: absolute; left: 20px; right: 20px; bottom: calc(40px + var(--safe-b, 0px)); padding: 18px; border-radius: 26px; background: rgba(20,20,22,.88); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }
.gm--call .gm-when[hidden] { display: none; }
.gm--call .gm-when p { margin: 0; font-weight: 700; font-size: 16px; }
.gm-when-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gm-when-x { border: 0; background: none; color: rgba(255,255,255,.6); font: inherit; font-size: 14px; padding: 6px 12px; cursor: pointer; }
.gm--call.is-missed .gm-caller-state { color: #ff453a; font-weight: 700; }
.gm--call.is-missed .gm-caller-mark { animation: none; background: rgba(255,69,58,.25); }
.gm-now { margin: -4px 0 0; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.gm--call.is-ready .gm-now, .gm--call.is-missed .gm-now { display: none; }