/* 3.1 Footie Manager and The Traitors. Colours come from the community's own style (--a, --a2, --grad). */

/* ------------------------------------------------------------ Footie Manager */
.fm-hero { position: relative; overflow: hidden; }
.fm-ball { position: absolute; right: -14px; top: -14px; font-size: 92px; opacity: .14; transform: rotate(-18deg); pointer-events: none; }
.fm-how { display: grid; gap: 8px; }
.fm-how > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--mfg); }
.fm-how b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 12px; }
.fm-club .fm-name { font: 800 22px/1.15 var(--display); margin: 2px 0 4px; }
.fm-cash { text-align: right; flex: none; }
.fm-cash b { display: block; font: 800 20px/1.1 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fm-stats { margin-top: 14px; }
.fm-tabs { margin: 4px 0 2px; }
.fm-pos { flex: none; display: inline-grid; place-items: center; min-width: 38px; height: 22px; padding: 0 6px; border-radius: 7px; font: 800 10.5px/1 var(--body); letter-spacing: .04em; color: #fff; }
.fm-pos.p-gk { background: #f59e0b; } .fm-pos.p-def { background: #3b82f6; } .fm-pos.p-mid { background: #10b981; } .fm-pos.p-fwd { background: #ef4444; }
.fm-rate { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 800 14px/1 var(--display); border: 1px solid var(--line-2); background: rgba(var(--tint),.05); }
.fm-rate.r-gold { background: linear-gradient(160deg, #fde68a, #d97706); color: #3b2300; border-color: transparent; }
.fm-rate.r-silver { background: linear-gradient(160deg, #f1f5f9, #94a3b8); color: #1e293b; border-color: transparent; }
.fm-rate.r-bronze { background: linear-gradient(160deg, #fed7aa, #b45309); color: #2c1400; border-color: transparent; }
.fm-pl { gap: 10px; }
.fm-act { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fm-price { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fm-offer summary { list-style: none; cursor: pointer; } .fm-offer summary::-webkit-details-marker { display: none; }
.fm-offer[open] form { margin-top: 6px; } .fm-offer input { width: 110px; padding: 7px 10px; font-size: 13px; }
.fm-filter .row select { flex: 1 1 140px; min-width: 0; }
.fm-pitch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: var(--r-lg);
  background: repeating-linear-gradient(0deg, rgba(34,197,94,.10) 0 28px, rgba(34,197,94,.04) 28px 56px), rgba(var(--tint),.02); border: 1px solid color-mix(in oklab, #22c55e 30%, var(--line)); }
.fm-slot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fm-slot.s-gk { grid-column: 1 / -1; }
.fm-slot select { flex: 1; min-width: 0; padding: 8px 32px 8px 10px; font-size: 12.5px; background-position: right 8px center; }
.fm-slot.off select { border-color: color-mix(in oklab, var(--warn) 60%, transparent); }
.fm-slab { flex: none; width: 34px; font: 800 10px/1 var(--body); color: var(--mfg); letter-spacing: .05em; }
.fm-k { flex: none; font: 700 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: 7px; background: rgba(var(--tint),.06); color: var(--mfg); }
.fm-k.k-league { background: var(--a-20); color: var(--fg); } .fm-k.k-wager { background: color-mix(in oklab, var(--warn) 22%, transparent); color: var(--fg); }
.fm-res .fm-teams { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.fm-sc { flex: none; font: 800 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.fm-sc i { font-style: normal; opacity: .4; margin: 0 4px; }
.fm-live .dotl { animation: fmBlink 1s steps(2) infinite; }
@keyframes fmBlink { 50% { opacity: .2; } }
.fm-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.fm-tr { display: flex; align-items: center; gap: 4px; padding: 9px 10px; font-size: 13px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.fm-tr:first-child { border-top: 0; }
.fm-tr > span, .fm-tr > b { width: 28px; text-align: center; flex: none; }
.fm-tr > .grow { width: auto; text-align: left; flex: 1; min-width: 0; }
.fm-tr.th { font-size: 11px; color: var(--mfg); font-weight: 700; background: rgba(var(--tint),.04); }
.fm-tr.top > span:first-child { color: color-mix(in oklab, var(--a) 70%, var(--hi)); font-weight: 800; }
.fm-tr.me { background: var(--a-12); }
.fm-gb { flex: none; width: 26px; text-align: center; color: var(--mfg); }
.fm-medal { font-size: 22px; }
.fm-ledger .item { padding: 9px 12px; font-size: 13px; }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); }
.fm-seg { margin-top: 0; grid-template-columns: 1fr 1fr; }
.fm-seg label { display: grid; } .fm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fm-seg span { text-align: center; padding: 9px; border-radius: 12px; font-weight: 600; font-size: 13.5px; color: var(--mfg); cursor: pointer; }
.fm-seg input:checked + span { background: var(--grad); color: #fff; }
/* the live match */
.fm-board { text-align: center; }
.fm-sb { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.fm-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; }
.fm-big { font: 800 44px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fm-big i { font-style: normal; opacity: .35; margin: 0 6px; }
.fm-board.goal .fm-big { animation: fmGoal .9s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fmGoal { 0% { transform: scale(1); } 30% { transform: scale(1.35); color: var(--a); } 100% { transform: scale(1); } }
.fm-clock { margin: 12px 0 10px; }
.fm-bar { height: 6px; border-radius: 99px; background: rgba(var(--tint),.08); overflow: hidden; }
.fm-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--grad); transition: width 1.8s linear; }
.fm-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.fm-feed li { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: var(--r-md); background: rgba(var(--tint),.03); border: 1px solid var(--line); font-size: 13.5px; }
.fm-feed li b { flex: none; width: 30px; color: var(--mfg); font-variant-numeric: tabular-nums; }
.fm-feed li.ev-goal { background: var(--a-12); border-color: var(--a-45); font-weight: 600; }
.fm-feed li.ev-card span::before { content: "🟨 "; } .fm-feed li.ev-goal span::before { content: "⚽ "; } .fm-feed li.ev-save span::before { content: "🧤 "; }
.fm-feed li.ev-ht, .fm-feed li.ev-ft { justify-content: center; font-weight: 700; background: rgba(var(--tint),.06); }
.fm-feed li.new { animation: fmIn .5s ease-out; }
@keyframes fmIn { from { opacity: 0; transform: translateY(-6px); } }
.fm-xis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fm-xis ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fm-xis li { display: flex; gap: 6px; align-items: center; font-size: 12.5px; min-width: 0; }
.fm-xis li i { margin-left: auto; font-style: normal; color: var(--mfg); }
.fm-xis .fm-pos { min-width: 32px; height: 18px; font-size: 9.5px; }

/* ------------------------------------------------------------ The Traitors */
.tr-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, #7f1d1d 40%, transparent), transparent 60%), var(--glass, transparent); }
.tr-emblem { position: absolute; right: -6px; top: -10px; font-size: 96px; opacity: .14; transform: rotate(18deg); pointer-events: none; }
.tr-status .tr-phase { font: 800 22px/1.15 var(--display); margin-top: 2px; }
.tr-phase.ph-night { color: #a5b4fc; } .tr-phase.ph-vote, .tr-phase.ph-reveal { color: #fca5a5; }
.tr-clock { text-align: right; flex: none; }
.tr-clock b { display: block; font: 800 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.tr-pot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: linear-gradient(90deg, color-mix(in oklab, #d97706 18%, transparent), transparent); border: 1px solid color-mix(in oklab, #d97706 35%, var(--line)); font-size: 13.5px; }
.tr-pot b { font: 800 18px/1 var(--display); color: #fbbf24; }
.tr-role { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2); }
.tr-role b { display: block; font: 800 22px/1.2 var(--display); }
.tr-role.r-traitor { background: linear-gradient(135deg, color-mix(in oklab, #991b1b 55%, transparent), color-mix(in oklab, #450a0a 50%, transparent)); border-color: #b91c1c; }
.tr-role.r-faithful { background: linear-gradient(135deg, color-mix(in oklab, #1d4ed8 35%, transparent), transparent); border-color: color-mix(in oklab, #3b82f6 50%, transparent); }
.tr-role.out { filter: grayscale(.7); opacity: .85; }
.tr-role-ic { font-size: 36px; flex: none; }
.tr-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tr-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(var(--tint),.03); cursor: pointer; font-size: 13px; text-align: center; min-width: 0; }
.tr-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tr-pick:has(input:checked) { border-color: var(--a); background: var(--a-12); box-shadow: 0 0 0 3px var(--a-20); }
.tr-night .tr-pick:has(input:checked) { border-color: #dc2626; background: color-mix(in oklab, #dc2626 16%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 25%, transparent); }
.tr-pick span { max-width: 100%; }
.tr-av { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--grad); color: #fff; font-weight: 800; flex: none; }
.tr-av img { width: 100%; height: 100%; object-fit: cover; }
.tr-tp { margin: 0; padding-left: 18px; font-size: 13px; color: var(--mfg); }
.tr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-opts .btn { white-space: normal; min-height: 48px; }
.tr-sleep { display: flex; gap: 14px; align-items: center; }
.tr-sleep > span { font-size: 34px; flex: none; }
.tr-end { text-align: center; }
.tr-end-ic { font-size: 52px; display: block; }
.tr-end.w-traitors { background: linear-gradient(160deg, color-mix(in oklab, #991b1b 40%, transparent), transparent); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tr-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--tint),.03); font-size: 12.5px; text-align: center; min-width: 0; }
.tr-p b { max-width: 100%; }
.tr-p.me { border-color: var(--a-45); }
.tr-p.rt { border-color: #b91c1c; background: color-mix(in oklab, #991b1b 14%, transparent); }
.tr-p.dead { opacity: .5; } .tr-p.dead .tr-av { filter: grayscale(1); }
.tr-tag { font-size: 11px; color: var(--mfg); }
.tr-out { position: absolute; top: 6px; right: 6px; font: 700 9px/1 var(--body); text-transform: uppercase; letter-spacing: .05em; padding: 3px 5px; border-radius: 5px; background: rgba(var(--tint),.1); }
.tr-room { display: flex; flex-direction: column; gap: 14px; }
.tr-room [data-tr-panel] { display: flex; flex-direction: column; gap: 14px; }
.tr-chat { list-style: none; margin: 0; padding: 4px 2px; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; min-height: 140px; overflow: auto; }
.tr-chat li { max-width: 88%; padding: 8px 12px; border-radius: 16px; background: rgba(var(--tint),.05); border: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; }
.tr-chat li b { display: block; font-size: 11.5px; color: color-mix(in oklab, var(--a) 60%, var(--hi)); margin-bottom: 2px; }
.tr-chat li.mine { align-self: flex-end; background: var(--a-12); border-color: var(--a-45); }
.tr-chat li.sys { max-width: 100%; align-self: stretch; text-align: center; background: transparent; border-style: dashed; color: var(--mfg); font-size: 12.5px; }
.tr-chat li.r-traitors { border-color: #b91c1c; background: color-mix(in oklab, #991b1b 14%, transparent); }
.tr-chat li.r-traitors.sys { color: #fca5a5; }
.tr-say input { min-width: 0; }

/* 3.1.1 game names (the owner also sees the real username) */
.fm-mgr { display: block; font-size: 11px; color: var(--mfg); }
.fm-real, .tr-real { color: var(--owner); font-size: 11px; }
.tr-real { max-width: 100%; }
.fm-gn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fm-gn span { flex: 1 1 100%; }
.fm-gn input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; }
.tr-gn { align-items: center; } .tr-gn input { min-width: 0; padding: 7px 10px; font-size: 13px; }
.fm-cur { border-color: var(--a-45); background: var(--a-12); }
.fm-lvl { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(var(--tint),.07); font-weight: 800; }
.fm-stars { flex: none; color: #fbbf24; letter-spacing: -1px; min-width: 64px; }

/* 3.1.5: "Update announcements" group in the announcements picker */
.ann-more > summary { list-style: none; cursor: pointer; }
.ann-more > summary::-webkit-details-marker { display: none; }
.ann-more > summary > .i:last-child { transition: transform .2s; opacity: .7; }
.ann-more[open] > summary > .i:last-child { transform: rotate(180deg); }
.ann-more .item.sub { margin-left: 14px; }

/* 3.1.6: Chats / Games switch at the top of the Chat & Games sheet */
button.item.sheet-switch { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: color-mix(in srgb, var(--accent, #8c6cff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #8c6cff) 45%, transparent); }
button.item.sheet-switch .glyph { flex: none; }

/* 3.1.10 private member chats */
.dmbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 6px 4px 0; }
.dmbar form { margin: 0; }
.composer .dmpriv { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); padding: 2px 6px 6px; }

/* 3.1.10 FAQ & Info visual editor */
.docedit { gap: 10px; }
.docedit .dbar { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 14px; }
.docedit .dbar .btn { min-width: 34px; justify-content: center; }
.dblocks { display: flex; flex-direction: column; gap: 10px; }
.dblock { border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; background: rgba(255,255,255,.03); overflow: hidden; }
.dblock:focus-within { border-color: var(--a); }
.dblocks > .dtextblock:only-child .dtext { min-height: 14em; }
.dtext { min-height: 6em; padding: 14px 16px; outline: none; font-size: 16px; }
.dtext:empty::before { content: attr(data-ph); color: var(--dim); }
.dtext h2:first-child, .dtext h3:first-child, .dtext p:first-child { margin-top: 0; }
.dimg { padding: 10px; display: flex; justify-content: center; }
.dimg img { max-width: 100%; max-height: 360px; border-radius: 10px; display: block; }
.dimgblock.loading .dimg { min-height: 120px; align-items: center; }
.dimgblock.loading .dimg::after { content: "Uploading…"; color: var(--dim); font-size: 13px; }
.dimgblock.loading img { display: none; }
.dtools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px 6px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.dtools .grow { flex: 1; }
.dadd { align-items: center; }
.dtools .iconbtn.sm { width: 32px; height: 32px; border-radius: 10px; }
.dblock { border-color: var(--line); }

/* 3.1.10 shop: products under their category name */
.shopgroup + .shopgroup { margin-top: 18px; }
.shopcat { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 4px 2px 10px; }
.shopcat .hint { font-size: 12px; font-weight: 600; }

/* 3.1.14 Store: All Features plan */
.storecard.planc { border-color: var(--a-45); box-shadow: 0 0 0 1px var(--a-45), 0 10px 40px -18px var(--a); }
.planpill { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; background: var(--a-6); color: var(--a); border-color: var(--a-45); }

/* 3.1.16 member messages: several conversations */
.sect-h { font-size: 15px; margin: 14px 4px 8px; color: var(--dim); font-weight: 700; }

/* 3.1.20: full-size photo viewer with swipe */
.lbox { position: fixed; inset: 0; z-index: 9999; background: rgba(4, 3, 10, .985); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; flex-direction: column; }
.lbox[hidden] { display: none; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: 56px 8px 24px; box-sizing: border-box; }
.lb-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(rgba(0,0,0,.55), transparent); color: #fff; }
.lb-bar .grow { flex: 1; }
.lb-count { font-weight: 700; font-size: 15px; padding-left: 4px; }
.lb-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-nav:disabled, .lbox.single .lb-nav { display: none; }
@media (hover: none) { .lb-nav { display: none; } }

/* 3.1.21 Live stage */
.stage-glyph { background: linear-gradient(135deg, #ff3b6b, var(--a)); color: #fff; }
.livepill { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 59, 107, .16); color: #ff5c85; border-color: rgba(255, 59, 107, .45); font-weight: 800; letter-spacing: .04em; }
.livepill .dotl { background: #ff3b6b; animation: stagepulse 1.2s ease-in-out infinite; }
.livetxt { color: #ff5c85; font-weight: 800; }
@keyframes stagepulse { 50% { opacity: .3; } }
.stage-entry.live, .stage-item.live { border-color: rgba(255, 59, 107, .45); }
.stage-bar { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--panel), .45); color: var(--fg); text-decoration: none; font-size: 14px; }
.stage-bar.live { border-color: rgba(255, 59, 107, .5); background: rgba(255, 59, 107, .08); }
.stage-bar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage { padding: 6px 2px 0; }
.stage-desc { margin: 4px 4px 10px; }
.stage-speakers { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 12px 4px; min-height: 92px; align-items: center; }
.spk { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; text-align: center; }
.spk b { font-size: 13px; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spk-av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 800; font-size: 22px; background: linear-gradient(135deg, var(--a), var(--a2, var(--a))); color: #fff; box-shadow: 0 0 0 3px rgba(var(--tint), .12); transition: box-shadow .15s; }
.spk.talking .spk-av { box-shadow: 0 0 0 3px #3ddc84, 0 0 18px rgba(61, 220, 132, .55); }
.spk.muted .spk-av { filter: grayscale(.6); opacity: .7; }
.spk-st { font-size: 11px; color: var(--dim); }
.spk.talking .spk-st { color: #3ddc84; font-weight: 700; }
.stage-ctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.stage-listen.on { background: rgba(var(--tint), .1); color: var(--fg); }
.stage-ctl .btn.on { border-color: #ff5c85; color: #ff5c85; }
.stage-note { text-align: center; margin: 2px 8px 8px; }
.stage-chat { flex: 1; }
.stage-chat .msgs { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 10px; }
.smsg { position: relative; padding: 7px 30px 7px 11px; border-radius: 14px; background: rgba(var(--tint), .05); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.smsg b { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; font-size: 13px; color: var(--a); }
.smsg.team { border-color: var(--a-45); background: var(--a-6); }
.smsg.mine b { color: var(--fg); }
.smsg.gone { color: var(--dim); font-style: italic; }
.smsg-del { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--dim); font-size: 16px; cursor: pointer; }
.stage-time { justify-content: center; margin: 8px 0; }
/* 3.1.22 stage moderation */
.stage-people, .stage-voice { margin-top: 8px; }
.ppl { gap: 8px; }
.ppl-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.spk-mute { margin-top: 2px; padding: 2px 8px; }
.stage-removed { margin: 16px 4px; text-align: center; }

/* 3.1.23: compact stage panel above the stage's own chat */
.chattop .stage { display: block; width: 100%; box-sizing: border-box; align-self: stretch; margin: 6px 0 2px; padding: 8px 10px; border-radius: 16px; }
.chattop .stage-speakers { min-height: 0; padding: 2px 0 6px; gap: 10px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
.chattop .stage-speakers::-webkit-scrollbar { display: none; }
.chattop .stage-none { padding: 4px 2px; }
.chattop .spk { width: 62px; flex: none; gap: 2px; }
.chattop .spk-av { width: 40px; height: 40px; font-size: 16px; }
.chattop .spk b { font-size: 12px; max-width: 62px; }
.chattop .spk-st { font-size: 10px; }
.chattop .stage-ctl { justify-content: flex-start; margin: 2px 0; gap: 6px; }
.chattop .stage-note { text-align: left; margin: 4px 2px 0; font-size: 12px; }
@media (max-height: 700px) { .chattop .stage-note { display: none; } }

/* 3.1.25 Gamers Hub */
.gm-hero { background: linear-gradient(160deg, #0b1036 0%, var(--solid) 55%, color-mix(in oklab, #28e0ff 22%, var(--solid)) 100%); }
.gm-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: url("/static/img/tile-gaming.svg") right center / cover no-repeat; mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); }
.gm-glyph { background: linear-gradient(135deg, #28e0ff, #7c3aed) !important; color: #fff; font-size: 20px; }
.gm-grid { display: flex; flex-direction: column; gap: 14px; }
.gm-qcard { display: block; text-decoration: none; color: var(--fg); }
.gm-bars { display: grid; gap: 5px; margin-top: 10px; }
.qbar { display: block; height: 8px; border-radius: 99px; background: rgba(var(--tint), .1); overflow: hidden; }
.qbar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .4s; }
.qbar.hp i { background: linear-gradient(90deg, #ff3b6b, #ff7a59); }
.qbar.en i { background: linear-gradient(90deg, #ffd23f, #ffb020); }
.qbar.xp i { background: linear-gradient(90deg, #7c3aed, #28e0ff); }
.qbar.boss i { background: linear-gradient(90deg, #ff2d55, #a10035); }
.gm-boss-mini { display: block; margin-top: 10px; font-size: 13px; text-decoration: none; color: var(--fg); }
.gm-boss-mini .qbar { margin-top: 6px; }
.gm-streams { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gm-stream-wrap { display: flex; flex-direction: column; gap: 4px; }
.gm-stream { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--fg); }
.gm-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #14082f, #0b6e8f); display: grid; place-items: center; }
.gm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gm-live { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-size: 11px; letter-spacing: .08em; }
.gm-play { position: absolute; inset: auto 8px 8px auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; }
.gm-pin { position: absolute; top: 6px; left: 6px; }
.gm-st { display: flex; flex-direction: column; padding: 8px 10px; gap: 2px; }
.gm-sacts { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.gm-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.gm-game { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--fg); }
.gm-note { font-size: 13px; margin: 2px 0; }
.gm-squad.full { opacity: .7; }
.gm-player { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; margin: 6px 0 2px; }
.gm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gm-chnote { margin: 2px 4px; font-size: 12px; }
.gm-classes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gm-class { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px; border-radius: 16px; cursor: pointer; border: 2px solid transparent; }
.gm-class input { position: absolute; opacity: 0; pointer-events: none; }
.gm-class:has(input:checked) { border-color: var(--a); background: var(--a-6); }
.gm-cemoji { font-size: 32px; }
.gm-herocard .row { align-items: center; gap: 10px; }
.gm-avatar { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: linear-gradient(135deg, #14082f, #2a0f66); box-shadow: 0 0 0 2px #28e0ff55; }
.gm-hname { font-size: 18px; }
.gm-stats { display: grid; gap: 6px; margin-top: 12px; font-size: 12px; }
.gm-stats span { display: block; margin-bottom: 2px; color: var(--dim); }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 12px; }
.gm-chips span { padding: 3px 8px; border-radius: 99px; background: rgba(var(--tint), .07); }
.gm-away { margin-top: 10px; }
.gm-daily { animation: stagepulse 1.6s ease-in-out infinite; }
.gm-result { margin-top: 10px; border-left: 4px solid #3ddc84; }
.gm-result.lose { border-left-color: #ff3b6b; }
.gm-fight { margin: 6px 0 0 18px; font-size: 12px; color: var(--dim); }
.gm-qtabs { margin-top: 10px; overflow-x: auto; flex-wrap: nowrap; }
.gm-equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm-slot { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 14px; font-size: 13px; }
.gm-iem { font-size: 22px; width: 32px; text-align: center; }
.gm-zones { display: grid; gap: 8px; }
.gm-zone { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; }
.gm-zone.locked { opacity: .55; }
.gm-zemoji { font-size: 26px; }
.gm-boss { text-align: center; }
.gm-bemoji { font-size: 64px; line-height: 1; animation: stagepulse 2.4s ease-in-out infinite; }
.gm-rank { width: 26px; text-align: center; color: var(--a); }

/* ---------------- 3.1.26 Gamers Hub extras */
.sg-tabs.gm-tabs { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sg-tabs.gm-tabs::-webkit-scrollbar { display: none; }
.sg-tabs.gm-tabs a { flex: 0 0 64px; scroll-snap-align: center; }
.gm-locked { padding: 32px 16px; }
.gm-game.locked { opacity: .65; }
.gm-cupstate.signup { background: var(--a-6); color: var(--a); }
.gm-cupstate.live { background: rgba(239, 68, 68, .16); color: #ef4444; }
.gm-cupstate.done { background: rgba(var(--tint), .08); }
.gm-champ { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(250, 204, 21, .18), rgba(250, 204, 21, .04)); }
.gm-rules { white-space: pre-wrap; font-size: 13px; margin: 6px 0 0; }
.gm-bracket { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.gm-round { flex: 0 0 min(220px, 72vw); display: flex; flex-direction: column; justify-content: space-around; gap: 8px; scroll-snap-align: start; }
.gm-round h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin: 0 0 2px; }
.gm-match { border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; }
.gm-match.mine { border-color: var(--a); }
.gm-side { padding: 6px 8px; border-radius: 9px; background: rgba(var(--tint), .05); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-side.won { background: var(--a-6); font-weight: 700; }
.gm-side.won::after { content: " ✓"; color: var(--a); }
.gm-side.lost { opacity: .5; text-decoration: line-through; }
.gm-mres { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.gm-mres select { flex: 1 1 100%; font-size: 13px; padding: 4px 6px; }
.gm-clips { display: grid; gap: 12px; }
.gm-clip { border-radius: 16px; overflow: hidden; }
.gm-clip .gm-thumb { width: 100%; border: 0; padding: 0; cursor: pointer; color: inherit; }
.gm-clipframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #000; }
.gm-clipbar { padding: 8px 10px; gap: 8px; }
.gm-vote[aria-pressed="true"], .gm-hype[aria-pressed="true"] { background: var(--grad); color: #fff; }
.gm-day { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; border-radius: 12px; background: var(--a-6); line-height: 1.05; }
.gm-day b { font-size: 17px; }
.gm-day span { font-size: 10.5px; text-transform: uppercase; opacity: .75; }
.gm-rel.out .gm-day { background: rgba(34, 197, 94, .18); }
.gm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gm-tag { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: rgba(var(--tint), .06); min-width: 0; }
.gm-tag b { cursor: copy; word-break: break-all; }
.gm-tag b.copied::after { content: "  Copied"; font-weight: 400; font-size: 11px; color: var(--a); }
.gm-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.gm-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px; border-radius: 14px; }
.gm-badge > span { font-size: 26px; }
.gm-badge b { font-size: 12.5px; }
.gm-badge small { font-size: 10.5px; line-height: 1.25; }
.gm-badge.off { opacity: .45; filter: grayscale(1); }
.gm-emblems { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-emblem input { position: absolute; opacity: 0; pointer-events: none; }
.gm-emblem span { display: grid; place-items: center; width: 40px; height: 40px; font-size: 21px; border-radius: 12px; background: rgba(var(--tint), .06); border: 2px solid transparent; cursor: pointer; }
.gm-emblem:has(input:checked) span { border-color: var(--a); background: var(--a-6); }
/* 3.1.28 release calendar pictures and search */
.gm-relsearch { margin-bottom: 8px; gap: 6px; }
.gm-relpic { position: relative; flex: 0 0 74px; height: 50px; border-radius: 10px; overflow: hidden; background: var(--a-6); }
.gm-relpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-relday { position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font: 700 10.5px var(--body); }
.gm-rel b a { color: inherit; text-decoration: none; }
/* 3.1.28: the "pick your game name" box under a stream (it replaces the typing box) */
.readonly.gm-needname { flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; gap: 8px; padding: 14px 16px; color: var(--fg); }
.gm-needname b { font-size: 15px; }
.gm-needname .hint { font-size: 12.5px; line-height: 1.4; }
.gm-needname .row { display: flex; gap: 8px; align-items: center; width: 100%; }
.gm-needname input[name=gname] { flex: 1 1 auto; min-width: 0; width: auto; font-size: 16px; padding: 11px 14px; border-radius: 14px; }
.gm-needname .btn { flex: none; }
/* 3.1.32 YouTube channels: offline card, channel bar, latest videos */
.gm-chav { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.gm-player.off { background: linear-gradient(135deg, #14082f, #0b3a55); }
.gm-offair { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; text-align: center; color: #fff; }
.gm-offair img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.gm-offair b { font-size: 15px; }
.gm-offair span { font-size: 12.5px; opacity: .8; max-width: 300px; }
.gm-ytbar { gap: 8px; margin: 4px 2px; align-items: center; }
.gm-latest { margin: 2px 2px 8px; }
.gm-latest summary { cursor: pointer; padding: 4px 0; }
.gm-latest-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.gm-lv { flex: 0 0 150px; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; cursor: pointer; font-size: 12px; }
.gm-lv img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; }
.gm-ytbar, .gm-latest { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; align-self: stretch; }
.gm-latest-row { width: 100%; max-width: 100%; }
.gm-lv span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.gm-lv img { background: rgba(var(--tint), .06); }
.gm-tryplayer { margin-top: 6px; }
.gm-chav.lg { width: 54px; height: 54px; }
/* 3.1.35: make it obvious a channel is live */
.gm-livebadge { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  border-radius: 99px; background: #e11d2e; color: #fff; font: 800 11.5px/1 var(--body); letter-spacing: .06em; box-shadow: 0 2px 10px rgba(225, 29, 46, .55); }
.gm-livebadge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: gmlive 1.2s ease-in-out infinite; }
.gm-livebadge.inline { position: static; vertical-align: middle; margin-right: 4px; }
@keyframes gmlive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .gm-livebadge i { animation: none; } }
.gm-stream.is-live { box-shadow: 0 0 0 2px #e11d2e, 0 6px 22px -6px rgba(225, 29, 46, .6); }
.gm-livetxt { color: #ff4d5e; font-weight: 800; }

/* ---------------- 3.1.38 Realm Quest: animated fights, chest, boss hits, tips */
.gm-tip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--fg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 18%, transparent), rgba(var(--tint), .04)); border: 1px solid color-mix(in oklab, var(--a) 35%, transparent); font-size: 13px; line-height: 1.35; }
.gm-tip-i { font-size: 22px; flex: none; animation: qbob 2.4s ease-in-out infinite; }
.gm-guide summary { cursor: pointer; list-style: none; gap: 10px; }
.gm-guide summary::-webkit-details-marker { display: none; }
.gm-steps { margin: 10px 0 6px; padding-left: 22px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.gm-steps a { color: var(--a); }
.gm-howto { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-howto span { padding: 5px 10px; border-radius: 99px; background: rgba(var(--tint), .07); font-size: 12.5px; }
@keyframes qbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.qb { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; min-height: 190px; margin: -4px -4px 12px;
  padding: 44px 12px 14px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 110%, rgba(124, 58, 237, .55), transparent 60%), linear-gradient(180deg, #0b1026, #1d1240 60%, #2a1650); }
.qb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); z-index: -1; }
.qb-sky { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff6, transparent), radial-gradient(1px 1px at 45% 12%, #fff8, transparent), radial-gradient(1px 1px at 85% 40%, #fff5, transparent); }
.qb-zone { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 18px; opacity: .8; }
.qb-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #fff; min-width: 0; }
.qb-side b { font-size: 12.5px; max-width: 100%; }
.qb-side small { opacity: .7; font-weight: 600; }
.qb-who { font-size: 56px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition: transform .15s, opacity .4s, filter .4s; }
.qb-side.foe .qb-who { transform: scaleX(-1); }
.qb-hp { width: 100%; max-width: 120px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.qb-hp i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #a3e635); transition: width .35s ease-out; }
.qb-hp.low i { background: linear-gradient(90deg, #ef4444, #f97316); }
.qb-vs { align-self: center; font: 900 18px var(--display, inherit); color: #facc15; text-shadow: 0 0 12px rgba(250, 204, 21, .7); padding-bottom: 30px; }
.qb-side.me.lunge .qb-who { animation: qlungeR .32s ease-out; }
.qb-side.foe.lunge .qb-who { animation: qlungeL .32s ease-out; }
@keyframes qlungeR { 40% { transform: translateX(26px) rotate(8deg) scale(1.08); } }
@keyframes qlungeL { 40% { transform: scaleX(-1) translateX(26px) rotate(8deg) scale(1.08); } }
.qb-side.hit .qb-who { animation: qhit .35s; }
@keyframes qhit { 0%, 100% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); } 30% { filter: brightness(2.2) sepia(1) hue-rotate(-40deg) saturate(6); } 50% { translate: -5px 0; } 70% { translate: 5px 0; } }
.qb-side.dodge .qb-who { translate: 0 -14px; opacity: .6; }
.qb-side.down .qb-who { opacity: .35; filter: grayscale(1); transform: rotate(-80deg) translateY(10px); }
.qb-side.foe.down .qb-who { transform: scaleX(-1) rotate(-80deg) translateY(10px); }
.qb.shake { animation: qshake .35s; }
@keyframes qshake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, -1px); } }
.qb-pop { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font: 900 18px var(--body); color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.6);
  pointer-events: none; animation: qpop 1.05s ease-out forwards; white-space: nowrap; z-index: 3; }
.qb-pop.crit { color: #facc15; font-size: 22px; }
.qb-pop.miss { color: #93c5fd; font-size: 15px; }
.qb-pop.big { font-size: 30px; }
@keyframes qpop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.qb-banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font: 900 34px var(--display, inherit); letter-spacing: .06em; z-index: 4;
  animation: qbanner .6s cubic-bezier(.2, 1.6, .4, 1) both; text-shadow: 0 4px 0 rgba(0,0,0,.4); }
.qb-banner.win { color: #facc15; text-shadow: 0 0 22px rgba(250, 204, 21, .8), 0 4px 0 #7c2d12; }
.qb-banner.lose { color: #f87171; text-shadow: 0 0 18px rgba(248, 113, 113, .7), 0 4px 0 #450a0a; }
@keyframes qbanner { from { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
.qb-skip { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 99px; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 700 11.5px var(--body); cursor: pointer; }
.qb-conf { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; z-index: 5; animation: qconf 2.2s ease-in forwards; }
@keyframes qconf { to { transform: translate(var(--dx), 260px) rotate(var(--rot)); opacity: 0; } }
.qb-rewards { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.qb-rw { padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: 13.5px; background: rgba(var(--tint), .08); animation: qin .5s ease-out both; }
.qb-rw:nth-child(2) { animation-delay: .12s; } .qb-rw:nth-child(3) { animation-delay: .24s; } .qb-rw:nth-child(4) { animation-delay: .36s; }
.qb-rw.gold { background: rgba(250, 204, 21, .16); color: #fde047; }
.qb-rw.xp { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
.qb-rw.loot { background: linear-gradient(90deg, rgba(250, 204, 21, .3), rgba(244, 114, 182, .3)); color: #fff; box-shadow: 0 0 14px rgba(250, 204, 21, .4); }
.qb-rw.lose { background: rgba(248, 113, 113, .14); color: #fca5a5; }
@keyframes qin { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.qb-lvl { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 10px; padding: 14px; border-radius: 14px;
  background: radial-gradient(circle at 50% 0, rgba(250, 204, 21, .45), transparent 70%), linear-gradient(135deg, #7c3aed, #db2777); color: #fff; animation: qin .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.qb-lvl b { font: 900 24px var(--display, inherit); letter-spacing: .08em; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.gm-result.playing > b, .gm-result.playing > details { opacity: 0; }
.gm-result > b, .gm-result > details { transition: opacity .4s; }

.qfx-chest { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center;
  background: rgba(5, 3, 18, .78); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; overflow: hidden; }
.qfx-chest.show { opacity: 1; }
.qfx-chest.gone { opacity: 0; }
.qfx-box { font-size: 96px; animation: qwobble .8s ease-in-out 1; filter: drop-shadow(0 10px 30px rgba(250, 204, 21, .5)); }
.qfx-chest.open .qfx-box { animation: qburst .5s ease-out forwards; }
.qfx-text, .qfx-lvl, .qfx-chest .btn { opacity: 0; transform: translateY(10px); transition: opacity .4s .25s, transform .4s .25s; }
.qfx-chest.open .qfx-text, .qfx-chest.open .qfx-lvl, .qfx-chest.open .btn { opacity: 1; transform: none; }
.qfx-text { color: #fff; font-weight: 700; font-size: 16px; max-width: 320px; }
.qfx-lvl { color: #facc15; font: 900 22px var(--display, inherit); }
@keyframes qwobble { 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }
@keyframes qburst { 50% { transform: scale(1.4); } 100% { transform: scale(1.1); } }
.gm-boss { position: relative; }
.gm-boss .gm-bemoji { position: relative; display: inline-block; animation: qbob 3s ease-in-out infinite; }
.gm-boss.qboss-hit .gm-bemoji { animation: qhit .45s 2; }
.gm-boss.qboss-down .gm-bemoji { animation: none; filter: grayscale(1); transform: rotate(-90deg); transition: transform .8s; }
.gm-zone:not(.locked) { transition: transform .15s; }
.gm-zone:not(.locked):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .qb *, .qfx-chest *, .gm-tip-i, .gm-boss .gm-bemoji { animation: none !important; transition: none !important; }
}
/* 3.1.39 releases: spotlight, nicer rows, a page for each game */
.gm-spot { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.gm-spot::-webkit-scrollbar { display: none; }
.gm-spotcard { position: relative; flex: 0 0 min(72%, 260px); aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; scroll-snap-align: start; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--a), #1e1b4b); box-shadow: 0 8px 24px -10px rgba(0,0,0,.6); }
.gm-spotcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-spotcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85)); }
.gm-spott { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; gap: 1px; }
.gm-spott b { font-size: 16px; }
.gm-spott small { opacity: .85; font-size: 11.5px; }
.gm-countdown { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 9px; border-radius: 99px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  color: #fff; font: 800 10.5px var(--body); letter-spacing: .06em; }
.gm-countdown.out { background: #16a34a; }
.gm-countdown.big { font-size: 12px; padding: 6px 12px; }
.gm-relinit { position: absolute; inset: 0; display: grid; place-items: center; font: 900 54px var(--display, inherit); color: rgba(255,255,255,.85); text-shadow: 0 4px 18px rgba(0,0,0,.35); }
.gm-relinit.sm { font-size: 24px; }
.gm-relpic.noimg { background: linear-gradient(135deg, var(--a), #312e81); }
a.gm-relpic { text-decoration: none; }
.gm-rellink { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--fg); }
.gm-relpage { padding: 0; overflow: hidden; }
.gm-relpage > :not(.gm-relhero) { margin-left: 16px; margin-right: 16px; }
.gm-relhero { position: relative; aspect-ratio: 16/9; background: #000; }
.gm-relhero img { width: 100%; height: 100%; object-fit: cover; }
.gm-relhero.noimg { background: linear-gradient(135deg, var(--a), #1e1b4b); }
.gm-relhero.noimg .gm-relinit { font-size: 96px; }
.gm-reltitle { font-size: 24px; margin: 14px 16px 4px; line-height: 1.15; }
.gm-relmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.gm-pills { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.gm-plat { padding: 3px 9px; border-radius: 99px; font: 700 11.5px var(--body); background: rgba(var(--tint), .1); }
.gm-plat.p-playstation { background: #1d4ed8; color: #fff; } .gm-plat.p-xbox { background: #15803d; color: #fff; }
.gm-plat.p-switch { background: #dc2626; color: #fff; } .gm-plat.p-pc { background: #334155; color: #fff; } .gm-plat.p-mobile { background: #7c3aed; color: #fff; }
.gm-about { font-size: 14.5px; line-height: 1.55; margin-top: 12px; }
.gm-credits { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.gm-credits span { display: flex; flex-direction: column; font-weight: 700; font-size: 13.5px; }
.gm-credits small { font-weight: 500; opacity: .65; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.gm-hyperow { margin-top: 14px; }
.gm-hype.big { font-size: 15px; padding: 10px 18px; }
.gm-relpage > p:last-child { margin-bottom: 16px; }

/* 3.1.40: a game with no picture gets a cover of its own: its name on a colour picked from the name */
.gm-relcover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px;
  background: radial-gradient(120% 90% at 100% 0%, hsl(var(--h) 90% 62% / .55), transparent 60%), linear-gradient(150deg, hsl(var(--h) 70% 34%), hsl(calc(var(--h) + 50) 65% 16%));
  color: #fff; overflow: hidden; text-align: left; }
.gm-relcover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px); }
.gm-relcover i { position: absolute; right: -6%; top: -10%; font-style: normal; font-size: 74px; opacity: .22; transform: rotate(-14deg); }
.gm-relcover b { position: relative; font: 800 20px/1.1 var(--display, inherit); text-shadow: 0 2px 10px rgba(0,0,0,.4);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gm-relhero .gm-relcover b { font-size: 30px; }
.gm-relcover.sm { padding: 6px 7px 26px; }
.gm-relcover.sm b { font-size: 11.5px; -webkit-line-clamp: 3; }
.gm-relcover.sm i { font-size: 40px; }
.gm-relcover.hue-0 { --h: 265; } .gm-relcover.hue-1 { --h: 320; } .gm-relcover.hue-2 { --h: 350; } .gm-relcover.hue-3 { --h: 18; }
.gm-relcover.hue-4 { --h: 38; } .gm-relcover.hue-5 { --h: 150; } .gm-relcover.hue-6 { --h: 172; } .gm-relcover.hue-7 { --h: 195; }
.gm-relcover.hue-8 { --h: 215; } .gm-relcover.hue-9 { --h: 235; } .gm-relcover.hue-10 { --h: 285; } .gm-relcover.hue-11 { --h: 5; }
.gm-spotcard .gm-relcover b { display: none; }
.gm-spotcard .gm-relcover i { right: auto; left: 50%; top: 30%; transform: translate(-50%, -50%) rotate(-10deg); font-size: 64px; opacity: .35; }

/* ================= 3.1.40 Realm Quest: turn-by-turn fights, discoveries, bounties, bestiary ================= */
.qx { display: grid; gap: 10px; scroll-margin-top: 12px; }
.qx-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13.5px; }
.qx-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; padding: 30px 10px 14px; border-radius: 16px;
  overflow: hidden; isolation: isolate; color: #fff; min-height: 210px;
  background: radial-gradient(120% 70% at 50% 115%, rgba(34,197,94,.45), transparent 60%), linear-gradient(180deg, #0f1f3a, #1b3350 55%, #22433a); }
.qx-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background-image: radial-gradient(1.5px 1.5px at 20% 22%, #fff8, transparent), radial-gradient(1.5px 1.5px at 72% 16%, #fff6, transparent), radial-gradient(1px 1px at 46% 10%, #fff8, transparent), radial-gradient(1px 1px at 88% 34%, #fff5, transparent); }
.qx-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: -1; background: linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.qx-stage.zone-caves { background: radial-gradient(90% 60% at 50% 110%, rgba(234,179,8,.35), transparent 60%), linear-gradient(180deg, #120d08, #2a1e12 60%, #3a2a16); }
.qx-stage.zone-ruins { background: radial-gradient(90% 60% at 50% 110%, rgba(129,140,248,.4), transparent 60%), linear-gradient(180deg, #0c0b1a, #1e1b3a 60%, #2b2547); }
.qx-stage.zone-swamp { background: radial-gradient(90% 60% at 50% 110%, rgba(132,204,22,.4), transparent 60%), linear-gradient(180deg, #0b140d, #1a2a17 60%, #2a3b1a); }
.qx-stage.zone-peaks { background: radial-gradient(90% 60% at 50% 110%, rgba(186,230,253,.45), transparent 60%), linear-gradient(180deg, #0d1b2e, #23405e 60%, #6b8fb0); }
.qx-stage.zone-volcano { background: radial-gradient(90% 60% at 50% 110%, rgba(249,115,22,.6), transparent 60%), linear-gradient(180deg, #1a0606, #3a0e0a 60%, #5a1a0c); }
.qx-stage.zone-abyss { background: radial-gradient(90% 60% at 50% 110%, rgba(168,85,247,.5), transparent 60%), linear-gradient(180deg, #050208, #140a24 60%, #23103d); }
.qx-stage.zone-crystal { background: radial-gradient(90% 60% at 50% 110%, rgba(45,212,191,.45), transparent 60%), linear-gradient(180deg, #071a24, #0f3443 60%, #1d5960); }
.qx-stage.zone-celestial { background: radial-gradient(90% 60% at 50% 110%, rgba(250,204,21,.45), transparent 60%), linear-gradient(180deg, #0b0a26, #262066 60%, #4a3a8a); }
.qx-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; }
.qx-side b { font-size: 13px; max-width: 100%; }
.qx-side small { color: rgba(255,255,255,.7); font-size: 11px; }
.qx-who { font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); animation: qx-idle 2.6s ease-in-out infinite; }
.qx-who.big { font-size: 66px; }
.qx-side.foe .qx-who { animation-delay: -1.3s; }
.rank-2 .qx-who { filter: drop-shadow(0 0 14px rgba(250,204,21,.8)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.rank-1 .qx-who { filter: drop-shadow(0 0 10px rgba(248,113,113,.7)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
@keyframes qx-idle { 50% { translate: 0 -4px; } }
.qx-side.lunge .qx-who { animation: qx-lungeR .3s ease-out; }
.qx-side.foe.lunge .qx-who { animation: qx-lungeL .3s ease-out; }
@keyframes qx-lungeR { 40% { transform: translateX(24px) rotate(8deg) scale(1.08); } }
@keyframes qx-lungeL { 40% { transform: translateX(-24px) rotate(-8deg) scale(1.08); } }
.qx-side.hit .qx-who { animation: qhit .35s; }
.qx-side.dodge .qx-who { animation: qx-dodge .35s; }
@keyframes qx-dodge { 50% { translate: 0 -16px; opacity: .55; } }
.qx.shake .qx-stage { animation: qshake .35s; }
.qx-hp { width: 100%; max-width: 130px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); margin-top: 4px; }
.qx-hp i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #a3e635); transition: width .35s ease-out; }
.qx-hp.foe i { background: linear-gradient(90deg, #ef4444, #fb923c); }
.qx-hp.low i { animation: qx-low 1s ease-in-out infinite; }
@keyframes qx-low { 50% { opacity: .55; } }
.qx-hpn { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); }
.qx-vs { align-self: center; font: 900 17px var(--display, inherit); color: #facc15; text-shadow: 0 0 12px rgba(250,204,21,.7); padding-bottom: 40px; }
.qx-rank { position: absolute; top: -22px; padding: 2px 8px; border-radius: 99px; font: 800 10px var(--body); letter-spacing: .08em; }
.qx-rank.champ { background: linear-gradient(90deg, #facc15, #f59e0b); color: #3b2300; box-shadow: 0 0 14px rgba(250,204,21,.6); }
.qx-rank.elite { background: #ef4444; color: #fff; }
.qx-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 18px; }
.qx-chip { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; }
.qx-chip.bad { background: rgba(239,68,68,.35); }
.qx-chip.good { background: rgba(34,197,94,.35); }
.qb-pop.heal { color: #4ade80; }
.qb-pop.block { color: #93c5fd; }
.qb-pop.poison { color: #a3e635; }
.qx-intent { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; font-weight: 600;
  background: rgba(var(--tint), .05); border: 1px solid var(--line-2); }
.qx-intent .qx-ie { font-size: 22px; flex: none; }
.qx-intent.intent-heavy, .qx-intent.intent-spell { border-color: #f97316; background: rgba(249,115,22,.14); animation: qx-warn 1.2s ease-in-out infinite; }
.qx-intent.intent-guard { border-color: #60a5fa; background: rgba(96,165,250,.12); }
.qx-intent.intent-stunned { border-color: #facc15; background: rgba(250,204,21,.12); }
.qx-intent.fresh { animation: qin .35s ease-out; }
.qx-intent.fresh.intent-heavy, .qx-intent.fresh.intent-spell { animation: qin .35s ease-out, qx-warn 1.2s ease-in-out .35s infinite; }
@keyframes qx-warn { 50% { box-shadow: 0 0 0 3px rgba(249,115,22,.25); } }
.qx-log { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 3px; font-size: 12.5px; color: var(--mfg); }
.qx-log li:first-child { color: var(--fg); font-weight: 600; }
.qx-log li:nth-child(n+3) { opacity: .7; }
.qx-acts, .qx-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qx-btn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 10px 12px;
  border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--tint), .05); color: var(--fg); font: inherit; cursor: pointer; transition: transform .1s, border-color .15s; min-height: 58px; }
.qx-btn > span { grid-row: span 2; font-size: 24px; }
.qx-btn b { font-size: 14px; }
.qx-btn small { font-size: 11px; color: var(--mfg); line-height: 1.25; }
.qx-btn:active:not([disabled]) { transform: scale(.97); }
.qx-btn[disabled] { opacity: .45; cursor: default; }
.qx-btn.atk { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.1); }
.qx-btn.sk { border-color: var(--a-45); background: var(--a-12); }
.qx-btn.sk.ready, .qx-btn.sk:not([disabled]) { box-shadow: 0 0 0 1px var(--a-45), 0 0 18px -6px var(--a); }
.qx-btn.df { border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.1); }
.qx-btn.pt { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.09); }
.qx-more { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; }
.qx.busy .qx-acts { opacity: .75; }
.qx-help { margin: 0; font-size: 12px; }
.qx-evhead { display: flex; gap: 12px; align-items: center; }
.qx-eve { font-size: 54px; line-height: 1; animation: qx-idle 2.4s ease-in-out infinite; }
.qx-evt { font-size: 17px; }
.qx-evhead p { margin: 2px 0 0; }
.qx-offer { margin: 0; font-size: 14px; }
.qx-bounties { display: grid; gap: 10px; }
.qx-bounty { display: flex; gap: 10px; align-items: center; }
.qx-bounty .qbar { display: block; margin: 5px 0 2px; }
.qx-bounty.done b::after { content: " ✓"; color: #4ade80; }
.qx-bounty.claimed { opacity: .55; }
.qx-zmons { font-size: 15px; letter-spacing: 2px; margin-top: 2px; }
.qx-best { display: grid; gap: 10px; }
.qx-best.locked { opacity: .55; }
.qx-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.qx-mon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px dashed var(--line-2); min-width: 0; }
.qx-mon.seen { border-style: solid; background: rgba(var(--tint), .04); }
.qx-mon.champ { border-color: rgba(250,204,21,.5); }
.qx-mon.champ.seen { background: rgba(250,204,21,.08); }
.qx-me { font-size: 32px; line-height: 1.1; }
.qx-mon:not(.seen) .qx-me { filter: grayscale(1); opacity: .5; }
.qx-mon b { font-size: 12px; max-width: 100%; }
.qx-mon small { font-size: 10.5px; }
.qx-line { color: var(--mfg); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .qx-who, .qx-eve, .qx-intent { animation: none !important; } }
.pz-edit { flex-basis: 100%; margin-top: 6px; }
.pz-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.pz-picrow { align-items: center; gap: 10px; }
/* 3.1.41: Prize Room payments, step by step */
.pz-paynow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: rgba(var(--tint), .04); border: 1px solid var(--line-2); font-size: 13.5px; }
.pz-paynow b { margin-right: 4px; }
.pz-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(var(--tint), .02); }
.pz-stepn { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--grad); }
.pz-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pz-toggle input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--a); flex: none; }
.pz-toggle b { display: block; font-size: 15px; }
.pz-toggle .hint { display: block; }
.pz-sub { display: grid; gap: 10px; padding-left: 2px; }
.pz-sub p { margin: 0; }
.pz-netwarn { font-size: 12.5px; }
.pz-group { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mfg); }
.pz-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pz-coin { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(var(--tint), .03); }
.pz-coin.set { border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.06); }
.pz-coin.bad { border-color: rgba(239,68,68,.6); }
.pz-coinhead { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pz-coinhead b { font-size: 13.5px; }
.pz-net { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--a-12); color: var(--fg); border: 1px solid var(--a-30); white-space: nowrap; }
.pz-coin input, .pz-sub input.mono { font-size: 12.5px; }
.pz-check { font-size: 12px; font-weight: 600; min-height: 0; }
.pz-check.ok { color: #4ade80; }
.pz-check.bad { color: #f87171; }
.pz-faq p { margin: 0; font-size: 13.5px; }
.pz-cancel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }