/* 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); }