/* MineVault portal – page layouts. */
.page-head { margin-bottom: 26px; }
.page-head.center { text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 12px 4px; font-family: var(--pixel); font-size: 16px; line-height: 1; color: var(--gold-2); text-shadow: var(--text-shadow); background: rgb(var(--shade-rgb) / 0.45); box-shadow: var(--outline), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.1); border-radius: var(--radius-b); }
.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }
.page-head.center .lead { margin-left: auto; margin-right: auto; }
.grad { color: var(--gold-2); }
/* ---------- home: sky scene ---------- */
.home main { padding: 0 0 64px; }
.scene {
  position: relative;
  overflow: hidden;
  padding: 52px 0 0;
  background: linear-gradient(var(--scene-1) 0%, var(--scene-2) 38%, var(--scene-3) 72%, var(--scene-4) 100%);
}
.scene::before { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; opacity: 0.96; }
.scene::before { top: 8px; height: 168px; background: var(--img-clouds) repeat-x 0 0 / 480px 168px; animation: drift 140s linear infinite; }
@keyframes drift-b { to { background-position: -240px 0; } }
.tooltip { display: inline-block; max-width: 56ch; margin: 0 0 22px; padding: 10px 14px; color: #f3ecff; background: rgba(16, 0, 16, 0.86); box-shadow: 0 0 0 2px #2a0a5c, inset 0 0 0 2px #1a0638; border-radius: var(--radius-s); }
.lookup-card { padding: 28px 26px; }
.lookup-card h2 { font-size: 24px; }
/* server list entry */
.server-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; background: rgb(var(--shade-rgb) / 0.72); box-shadow: var(--outline), inset 0 0 0 2px rgb(var(--lite-rgb) / 0.16); max-width: 560px; border-radius: var(--radius); }
.server-icon { width: 72px; height: 72px; object-fit: contain; background: var(--bg-3); box-shadow: var(--outline); image-rendering: auto; border-radius: var(--radius-s); }
.server-status { display: grid; justify-items: end; gap: 6px; text-align: right; min-width: 92px; }
.server-status .players { font-family: var(--pixel); font-size: 16px; color: var(--ink); text-shadow: var(--text-shadow); }
.server-status .state { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.server-status.online .state { color: var(--grass-2); }
.server-status.offline .state { color: var(--bad); }
.ping { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.ping i { display: block; width: 4px; background: rgb(var(--lite-rgb) / 0.22); }
.ping i:nth-child(1) { height: 4px; }
.ping i:nth-child(2) { height: 7px; }
.ping i:nth-child(3) { height: 10px; }
.ping i:nth-child(4) { height: 13px; }
.ping i:nth-child(5) { height: 16px; }
.ping i.on { background: var(--grass-2); }
.ping.low i.on { background: var(--gold); }
.ping.bad i.on { background: var(--redstone); }
@media (max-width: 600px) { .server-card { grid-template-columns: 56px minmax(0, 1fr); } .server-icon { width: 56px; height: 56px; } .server-status { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; justify-items: start; text-align: left; } }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 44px 0 18px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.product { display: flex; flex-direction: column; gap: 8px; }
.product .price { font-family: var(--pixel); font-size: 24px; color: var(--gold-2); text-shadow: var(--text-shadow); }
.product .price s { font-family: var(--font); font-size: 0.95rem; color: var(--ink-3); font-weight: 500; margin-right: 6px; text-shadow: none; }
.product .sale { align-self: flex-start; }
.product p { color: var(--ink-2); font-size: 0.92rem; margin: 0; flex: 1; }
.how { counter-reset: how; padding: 0; margin: 0; }
.how li { list-style: none; position: relative; padding: 0 0 0 54px; min-height: 40px; margin-bottom: 18px; }
.how li::before { counter-increment: how; content: counter(how); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center; font-family: var(--pixel); font-size: 24px; line-height: 1; color: #fff; text-shadow: var(--text-shadow); background: var(--grass); box-shadow: var(--outline), var(--bevel); border-radius: var(--radius-s); }
@media (max-width: 520px) { .scene { padding-top: 32px; } }
/* ---------- case card / appeal ---------- */
.case-card { position: relative; overflow: hidden; }
.case-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ink-3); }
.case-card.ACTIVE::before { background: var(--redstone); }
.case-card.REVOKED::before { background: var(--grass-2); }
.case-card.EXPIRED::before { background: var(--ink-3); }
.case-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.case-top .kind { width: 54px; height: 54px; display: grid; place-items: center; background: var(--c-danger); color: #fff; box-shadow: var(--outline), var(--bevel-hi); border-radius: var(--radius-s); }
.case-card.REVOKED .kind { background: var(--grass); }
.case-card.EXPIRED .kind { background: var(--c-muted-solid); }
.case-top .kind svg { width: 28px; height: 28px; }
.case-code { font-family: var(--pixel); letter-spacing: 0.06em; font-size: 24px; text-shadow: var(--text-shadow); }
.reason-box { padding: 14px 16px; background: var(--field); box-shadow: var(--outline), var(--sunk); margin: 18px 0; overflow-wrap: anywhere; white-space: pre-wrap; border-radius: var(--radius-s); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; }
.kv > div > span { display: block; color: var(--gold-2); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.kv > div > b { font-weight: 600; overflow-wrap: anywhere; }
.appeal-item { padding: 14px 0; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); }
.appeal-item:first-child { border-top: 0; padding-top: 0; }
/* ---------- player area ---------- */
.perks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.perks li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); }
.perks li svg { color: var(--gold-2); margin-top: 3px; }
.perks li b { color: var(--ink); display: block; }
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile-head h1 { font-size: 32px; margin: 0; }
.subnav { margin-bottom: 22px; }
.case-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); }
.case-row:first-child { border-top: 0; padding-top: 4px; }
.case-row .kind { width: 44px; height: 44px; display: grid; place-items: center; background: var(--c-danger); color: #fff; box-shadow: var(--outline), var(--bevel); border-radius: var(--radius-s); }
.case-row .kind.REVOKED { background: var(--grass); }
.case-row .kind.EXPIRED { background: var(--c-muted-solid); }
.case-row .reason { color: var(--ink-2); font-size: 0.93rem; overflow-wrap: anywhere; }
@media (max-width: 600px) { .case-row { grid-template-columns: auto minmax(0, 1fr); } .case-row .go { grid-column: 1 / -1; } }
.link-box { text-align: center; padding: 30px 24px; }
.link-box .cmd { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0; padding: 14px 18px; background: var(--field); box-shadow: var(--outline), var(--sunk), 0 0 0 4px var(--gold-3); font-family: var(--mono); font-size: 1.1rem; max-width: 100%; overflow-wrap: anywhere; border-radius: var(--radius-s); }
.session { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); }
.session:first-child { border-top: 0; }
.session .ua { overflow-wrap: anywhere; font-size: 0.93rem; }
.perm-list { display: flex; flex-wrap: wrap; gap: 6px; }
/* shop summary in the player area */
.rank-list { display: flex; flex-wrap: wrap; gap: 8px; }
.purchase-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); }
.purchase-row:first-child { border-top: 0; padding-top: 0; }
.purchase-row .t { font-weight: 700; }
.purchase-row .s { color: var(--ink-3); font-size: 0.84rem; }
/* ---------- clan ---------- */
.clan-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.clan-tag { display: inline-grid; place-items: center; min-width: 68px; height: 68px; padding: 0 12px; font-family: var(--pixel); font-size: 24px; color: #fff; text-shadow: var(--text-shadow); background: var(--grass); box-shadow: var(--outline), var(--bevel-hi); border-radius: var(--radius-s); }
.member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); }
.member:first-child { border-top: 0; }
.cmd-status { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 0.92rem; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); }
.cmd-status:first-child { border-top: 0; }
.center-row { justify-content: center; }
.card.center { text-align: center; align-items: center; }
.card.center .lead { margin-left: auto; margin-right: auto; }
/* ---------- 6.6: player area – notifications and own reports ---------- */
.notif-list { display: flex; flex-direction: column; }
.notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 6px; color: var(--ink); border-top: 2px solid rgb(var(--shade-rgb) / 0.5); border-radius: var(--radius-s); }
.notif-list .notif:first-child { border-top: 0; }
.notif:hover { text-decoration: none; background: rgb(var(--accent2-rgb) / 0.12); }
.notif.unread { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.notif.plain { grid-template-columns: minmax(0, 1fr) auto; }
.notif .t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.notif .s { display: block; color: var(--ink-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.notif-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: #5b6675; box-shadow: var(--outline); border-radius: var(--radius-s); }
.notif-icon.bad { background: var(--c-danger); }
.notif-icon.ok { background: var(--grass); }
.notif-icon.warn { background: var(--c-warn-deep); }
.notif-icon.info { background: var(--c-info-solid); }
.report-row { display: grid; gap: 8px; padding: 14px 0; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); }
.report-row:first-child { border-top: 0; padding-top: 0; }
.report-row .reason { color: var(--ink-2); overflow-wrap: anywhere; }
.steps-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 2px 0; padding: 0; }
.steps-mini li { padding: 5px 8px 4px; font-size: 0.78rem; font-weight: 700; text-align: center; color: var(--ink-3); background: rgb(var(--shade-rgb) / 0.35); box-shadow: var(--outline); border-radius: var(--radius-s); }
.steps-mini li.on { color: #fff; background: var(--grass); }
@media (max-width: 600px) { .notif { grid-template-columns: auto minmax(0, 1fr); } .notif > .nowrap { grid-column: 2; } }
.tabs.subnav { flex-wrap: wrap; overflow-x: visible; gap: 4px; }
.tabs.subnav .tab { flex: none; padding-left: 11px; padding-right: 11px; font-size: 14px; }
/* 6.21.3: every page of the player area has the same width, so the tabs never jump; forms stay a readable width */
.page-player-profile #app form, .page-player-profile #app .field { max-width: 560px; }
@media (max-width: 760px) {
  .tabs.subnav { flex-wrap: nowrap; overflow-x: auto; }
  .tabs.subnav .tab { flex: none; }
  /* 6.21.3: a soft fade at the right edge shows that the tabs scroll */
  .tabs.subnav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* ---------- 6.7: mail ---------- */
.mail-list { display: flex; flex-direction: column; }
.mail-row { display: grid; gap: 6px; padding: 14px 8px; border-top: 2px solid rgb(var(--shade-rgb) / 0.5); border-radius: var(--radius-s); }
.mail-list .mail-row:first-child { border-top: 0; }
.mail-row.unread { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.mail-body { color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-head { flex-wrap: wrap; }
.mail-head h2 { margin-right: auto; }
/* ---------- imprint and privacy policy (6.12) ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { margin: 18px 0 6px; font-size: 1.3rem; }
.legal h3 { margin: 14px 0 4px; font-size: 1.05rem; }
.legal p, .legal li { line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
/* ---------------------------------------------------------------- server rules (/rules, 6.13) */
.rules-hero { max-width: none; margin: 0 auto 18px; }
.rules-hero .lead p { margin: 0 0 8px; }
.rules-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; max-width: none; margin: 0 auto; align-items: start; }
.rules-layout:not(:has(.rules-toc)) { grid-template-columns: minmax(0, 1fr); }
.rules-toc { position: sticky; top: 84px; padding: 14px 16px; }
.rules-toc ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.rules-toc a { color: var(--ink-2); text-decoration: none; }
.rules-toc a:hover { color: var(--link); text-decoration: underline; }
.rules-toc-group { margin-top: 12px; color: var(--ink-3); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rules-toc .label + .rules-toc-group { margin-top: 8px; }
.rules-group { margin: 10px 0 0; font-size: 1.25rem; color: var(--gold); }
.rules-group:first-child { margin-top: 0; }
.rules-toc-mark { color: var(--gold); font-size: .85em; }
.rule-changed, .rule-new { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.rules-changes { display: grid; gap: 6px; }
.rules-changes ul { padding-left: 20px; display: grid; gap: 4px; }
.rule { scroll-margin-top: 90px; outline: none; transition: box-shadow var(--mv-dur-base) var(--mv-ease-out); }
.rule:target, .rule:focus-visible { box-shadow: 0 0 0 2px var(--gold), 0 8px 30px rgb(var(--shade-rgb) / 0.35); }
.rule-head { display: flex; align-items: center; gap: 12px; }
.rule-no { flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--radius-s); background: var(--glass-3); color: var(--gold); font-weight: 800; }
.rule-text p, .rule-text li { line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.rule-text h3 { margin: 14px 0 4px; font-size: 1.05rem; }
.rule-punish { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.rule-punish .label { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.rp-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.rp-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rp-steps li { padding: 2px 10px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); font-size: .88rem; }
.rules-accept { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; scroll-margin-top: 90px; }
.rules-accept.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.rules-accept.ok > .icon { color: var(--ok); }
a.rules-due { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; margin-bottom: 14px; }
@media (max-width: 760px) {
  .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .rules-toc { position: static; }
}
/* ---------------------------------------------------------------- community pages (6.14) */
.cm-hero { max-width: none; margin: 0 auto 16px; }
.cm-hero .btn { margin-top: 6px; }
#app > .card, #app > .stack, .cm-tiles, .cm-toolbar, #app > .chips { max-width: none; margin-left: auto; margin-right: auto; }
#app > .card + .card, #app > .chips + * { margin-top: 14px; }
.cm-team-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cm-team-head .btn { margin-left: auto; }
.cm-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 2px var(--bg-1); }
.cm-dot.on { background: var(--ok); }
.cm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cm-tile { padding: 14px 16px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line-2); }
.cm-tile .v { font-size: 1.8rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cm-tile .k { color: var(--ink-2); font-weight: 600; }
.cm-tile .s { color: var(--ink-3); font-size: .85rem; }
.cm-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.cm-chart .grid { stroke: var(--line-2); stroke-width: 1; }
.cm-chart .axis { fill: var(--ink-3); font-size: 11px; }
.cm-chart .area { fill: rgb(var(--accent2-rgb) / 0.18); }
.cm-chart .line { fill: none; stroke: rgb(var(--accent2-rgb)); stroke-width: 2; stroke-linejoin: round; }
.cm-chart .cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.cm-chart .dot { fill: rgb(var(--accent2-rgb)); stroke: var(--bg-1); stroke-width: 2; }
.cm-chart .down { fill: var(--bad); }
.cm-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.cm-table th, .cm-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.cm-rank { width: 26px; text-align: center; font-weight: 800; color: var(--ink-3); }
.cm-rank.r1 { color: var(--gold); }
.cm-rank.r2 { color: var(--ink-2); }
.cm-rank.r3 { color: #d08a4c; }
.cm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .cm-grid2 { grid-template-columns: 1fr; } }
.vt-site { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--radius-s); background: var(--glass-2); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.vt-site:hover { background: rgb(var(--accent2-rgb) / 0.18); text-decoration: none; }
.vt-site > .icon:first-child { grid-row: 1 / 3; color: var(--gold); }
.vt-site > .icon:last-child { grid-row: 1 / 3; grid-column: 3; color: var(--ink-3); }
/* start page highlights (6.16) */
#community-section { margin-top: 40px; }
.pf-top { max-width: none; margin: 0 auto 14px; display: flex; justify-content: flex-end; }
.pf-search { position: relative; display: flex; align-items: center; gap: 8px; width: min(100%, 340px); }
.pf-search > .icon { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.pf-search input { padding-left: 34px; width: 100%; }
.pf-results { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px; border-radius: var(--radius-s); background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 10px 24px rgb(var(--shade-rgb) / 0.4); }
.pf-results a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.pf-results a:hover, .pf-results a:focus-visible { background: var(--glass-2); }
.pf-own { max-width: none; margin: 0 auto 14px; display: flex; gap: 10px; align-items: center; }
.pf-hero { display: flex; gap: 20px; align-items: center; border-top: 4px solid var(--rank, var(--gold)); }
.pf-avatar { position: relative; line-height: 0; flex: none; }
.pf-avatar img { width: 112px; height: 112px; image-rendering: pixelated; border-radius: var(--radius-s); }
.pf-avatar .cm-dot { width: 18px; height: 18px; right: -4px; bottom: -4px; }
.pf-id { display: grid; gap: 8px; min-width: 0; }
/* 6.41: the whole skin in 3D next to the name (public/assets/js/skin3d.js) */
.pf-id { flex: 1; }
.pf-skin { flex: none; display: grid; justify-items: center; gap: 4px; margin-left: auto; }
.pf-skin-hint { user-select: none; }
.pf-skin:empty { width: 220px; height: 322px; }   /* 7.3.0: the figure's place is kept while its skin loads – nothing below jumps */
.sk-stage { width: 220px; height: 300px; perspective: 900px; display: grid; place-items: center; cursor: grab; touch-action: none; border-radius: var(--radius-s); outline-offset: 4px; }
.sk-stage.dragging { cursor: grabbing; }
.sk-figure, .sk-part, .sk-limb, .sk-box { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.sk-figure { top: calc(50% - 18px); } /* head top -126px, feet +162px around the body centre */
.sk-face { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; backface-visibility: hidden; }
.sk-swing { animation: sk-swing 2.6s ease-in-out infinite; }
.sk-swing.sk-back { animation-direction: reverse; }
.sk-stage.still .sk-swing { animation: none; }
@keyframes sk-swing { 0%, 100% { transform: rotateX(16deg); } 50% { transform: rotateX(-16deg); } }
@media (prefers-reduced-motion: reduce) { .sk-swing { animation: none; } }
.pf-id h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); overflow-wrap: anywhere; }
.pf-rank { color: var(--ink); background: color-mix(in srgb, var(--rank, var(--gold)) 28%, transparent); }
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-s); background: var(--glass-2); border: 1px solid var(--line-2); }
.ach-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-2); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }
.ach-text { display: grid; gap: 1px; min-width: 0; }
.ach.locked { opacity: .5; }
.ach.locked .ach-icon { background: var(--glass-3); color: var(--ink-3); box-shadow: none; }
.cl-podium { max-width: none; margin: 0 auto 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.cl-step { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line-2); text-align: center; }
.cl-step.p1 { order: 2; padding-top: 26px; border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, transparent), var(--glass)); }
.cl-step.p2 { order: 1; }
.cl-step.p3 { order: 3; }
.cl-place { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--glass-3); font-weight: 800; font-size: 1.2rem; }
.cl-step.p1 .cl-place { color: var(--gold-2); background: color-mix(in srgb, var(--gold) 20%, transparent); }
.cl-step.p3 .cl-place { color: #d08a4c; }
@media (max-width: 560px) {
  .pf-hero { flex-direction: column; text-align: center; }
  .pf-skin { margin-left: 0; }
  .pf-id .row { justify-content: center; }
  .cl-podium { grid-template-columns: 1fr; }
  .cl-step.p1, .cl-step.p2, .cl-step.p3 { order: 0; }
}
.rp-form > summary { cursor: pointer; list-style: none; }
.rp-form > summary::-webkit-details-marker { display: none; }
.rp-form[open] > summary { margin-bottom: 12px; }
.rp-preview { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.rp-preview img { max-width: min(320px, 100%); max-height: 200px; border-radius: var(--radius-s); border: 1px solid var(--line-2); }
/* Quick links on the start page (6.21): one coloured tile per main area; "Apply to the team" is always among them */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 40px; }
/* the tiles take the colours of the design in use: main colour, links, highlight (= the "Apply" button), violet, teal */
.quick-grid > :nth-child(2) { --tile: color-mix(in srgb, var(--diamond) 55%, #0b1a3a); --tile-2: color-mix(in srgb, var(--diamond) 30%, #050b1c); }
.quick-grid > :nth-child(3) { --tile: var(--gold); --tile-2: color-mix(in srgb, var(--gold) 70%, #000); color: var(--gold-ink, #1d1400); }
.quick-grid > :nth-child(3):hover { color: var(--gold-ink, #1d1400); }
.quick-grid > :nth-child(3) b, .quick-grid > :nth-child(3) span { text-shadow: none; }
.quick-grid > :nth-child(4) { --tile: color-mix(in srgb, var(--amethyst, #8b5cf6) 70%, #1a0b3a); --tile-2: color-mix(in srgb, var(--amethyst, #8b5cf6) 40%, #0d0620); }
.quick-grid > :nth-child(5) { --tile: #0f8a72; --tile-2: #075245; }
@media (max-width: 600px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ================================================================== forum (6.23) – laid out like the LeaderOS forum */
.page-forum #app > .card, .page-forum #app > .stack { max-width: none; }
.fm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .9rem; color: var(--ink-3); }
.fm-crumbs a { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.fm-crumbs a:hover { color: var(--link); }
.fm-crumbs [aria-current] { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.fm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.fm-head h1 { margin: 4px 0 6px; }
.fm-thread-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.fm-thread-h .icon { color: var(--ink-3); }
/* categories and their boards */
.fm-cat { padding: 0; overflow: hidden; }
.fm-board, .fm-thread { display: grid; grid-template-columns: auto minmax(0, 1fr) 76px 76px minmax(0, 220px); gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.fm-board:last-child, .fm-thread:last-child { border-bottom: 0; }
.fm-board:hover, .fm-thread:hover { background: rgb(var(--shade-rgb) / .18); }
.fm-board-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-s); background: linear-gradient(135deg, var(--grass), var(--grass-2)); color: #fff; box-shadow: var(--outline); }
.fm-board-icon .icon { width: 22px; height: 22px; }
.fm-board-count { text-align: center; display: grid; line-height: 1.2; }
.fm-board-count b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fm-board-count span { font-size: .75rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.fm-board-last { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (max-width: 760px) {
  .fm-board, .fm-thread { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .fm-board-count { display: none; }
  .fm-board-last { grid-column: 2; }
  .fm-thread .fm-board-last { display: none; }
}
/* thread lists */
.fm-list { padding: 0; overflow: hidden; }
.fm-list > .empty { padding: 28px; }
.fm-thread.pinned { background: rgb(var(--accent2-rgb) / .07); }
.fm-thread.unread .fm-thread-title a { font-weight: 800; }
.fm-thread.unread .fm-thread-title a::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--grass-2); vertical-align: middle; }
.fm-flag { color: var(--ink-3); display: inline-flex; }
.fm-flag .icon { width: 15px; height: 15px; }
.fm-prefix { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--pfx, var(--diamond)); text-shadow: 0 1px 1px rgb(0 0 0 / .3); white-space: nowrap; }
/* sidebar */
.fm-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius-s); background: var(--field, var(--bg-3)); box-shadow: var(--outline); }
.fm-search input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; padding: 11px 0; }
.fm-search .icon { color: var(--ink-3); }
.fm-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fm-latest li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.fm-latest li > div { min-width: 0; }
.fm-latest a { color: var(--ink); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-latest a:hover { color: var(--link); }
/* posts */
.fm-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: 14px; border-radius: var(--radius-s); background: rgb(var(--shade-rgb) / .3); box-shadow: var(--outline); }
.fm-mod .danger { color: var(--bad); }
.fm-post { display: grid; grid-template-columns: 180px minmax(0, 1fr); padding: 0; overflow: hidden; scroll-margin-top: calc(var(--header-h) + 16px); }
.fm-post.fm-target { box-shadow: var(--outline), 0 0 0 2px var(--diamond); }
.fm-post.deleted { opacity: .65; }
.fm-author { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 18px 14px; text-align: center; background: rgb(var(--shade-rgb) / .22); border-right: 1px solid var(--line-2); }
.fm-author img.avatar.xl { width: 104px; height: 104px; border-radius: var(--radius-s); }
.fm-author-id { display: grid; justify-items: center; gap: 6px; }
.fm-author-name { font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.fm-author-facts { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 0; font-size: .8rem; color: var(--ink-3); }
.fm-author-facts dt { text-align: right; }
.fm-author-facts dd { margin: 0; text-align: left; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fm-post-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: 14px 20px; gap: 10px; }
.fm-like.on { color: var(--redstone, #ff5470); }
.fm-like.on .icon { fill: currentColor; }
@media (max-width: 700px) {
  .fm-post { grid-template-columns: minmax(0, 1fr); }
  .fm-author { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; border-right: 0; border-bottom: 1px solid var(--line-2); padding: 12px 14px; }
  .fm-author img.avatar.xl { width: 48px; height: 48px; }
  .fm-author-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
  .fm-author-facts { display: none; }
  .fm-post-main { padding: 12px 14px; }
}
/* post text */
.fm-body { overflow-wrap: anywhere; line-height: 1.65; color: var(--ink); }
.fm-body > :first-child { margin-top: 0; }
.fm-body > :last-child { margin-bottom: 0; }
.fm-body p { margin: 0 0 .8em; }
.fm-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.fm-body a.fm-mention { text-decoration: none; font-weight: 700; }
.fm-body code { padding: 1px 5px; border-radius: 4px; background: rgb(var(--shade-rgb) / .45); font-size: .9em; }
.fm-body .fm-code { margin: 0 0 .8em; padding: 12px 14px; border-radius: var(--radius-s); background: rgb(var(--shade-rgb) / .55); overflow-x: auto; }
.fm-body .fm-code code { padding: 0; background: none; white-space: pre; }
.fm-body .fm-quote { margin: 0 0 .8em; padding: 10px 14px; border-left: 4px solid var(--diamond); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: rgb(var(--shade-rgb) / .3); color: var(--ink-2); }
.fm-quote-head { font-weight: 700; font-size: .85rem; color: var(--ink-3); margin-bottom: 4px; }
.fm-body ul, .fm-body ol { margin: 0 0 .8em; padding-left: 1.4em; }
.fm-body .fm-h { margin: .4em 0 .5em; font-size: 1.1rem; }
.fm-editor-foot { padding: 6px 12px; border-top: 1px solid var(--line-2); gap: 10px; }
.fm-editor-foot .small.faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-title-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fm-title-row .grow { flex: 1 1 260px; }
/* manage */
.fm-manage-board { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-s); background: rgb(var(--shade-rgb) / .22); box-shadow: var(--outline); }
.fm-manage-board .row label { display: inline-flex; align-items: center; gap: 6px; }
/* forum 6.24: lists, solution, polls, images, reported posts */
.fm-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fm-quick .chip-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.fm-quick .chip-btn .badge { margin-left: 2px; }
.fm-quick .chip-btn.hot { box-shadow: inset 0 0 0 2px var(--bad); }
.fm-flag.ok { color: var(--ok); }
.fm-post.solution { box-shadow: var(--outline), 0 0 0 2px var(--ok); }
.fm-post .badge.ok .icon { width: 13px; height: 13px; }
.fm-solution { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: inherit; text-decoration: none; }
.fm-solution .small { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fm-poll-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-s); background: rgb(var(--shade-rgb) / .3); box-shadow: var(--outline); overflow: hidden; cursor: pointer; }
.fm-poll-opt > :not(.fm-poll-bar) { position: relative; z-index: 1; }
.fm-poll-opt.mine { box-shadow: var(--outline), inset 0 0 0 1px color-mix(in srgb, var(--grass-2) 45%, transparent); background-color: color-mix(in srgb, var(--grass-2) 10%, transparent); }
.fm-body .fm-img { display: inline-block; max-width: 100%; margin: 4px 0; }
.fm-body .fm-img img { display: block; max-width: 100%; max-height: 520px; border-radius: var(--radius-s); box-shadow: var(--outline); }
.news-card { display: grid; align-content: start; gap: 8px; color: var(--ink); text-decoration: none; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.news-card:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .news-card, .news-card:hover { transition: none; transform: none; } }
/* 6.25: clan members – the buttons sit in their own line under the name instead of squeezing it */
.member { grid-template-columns: auto minmax(0, 1fr); }
.member > .row { grid-column: 2; flex-wrap: wrap; gap: 6px; }
.member > .row:empty { display: none; }
/* 6.25: long rows of filter chips scroll sideways on phones instead of wrapping over five lines */
@media (max-width: 600px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chips > * { flex: none; }
}
/* ================================================================== start page (6.26) */
.home-sections { display: grid; gap: 56px; padding-top: 28px; padding-bottom: 20px; }
.home-sections > section > .section-head { margin-bottom: 18px; }
.home-live { display: grid; gap: 14px; align-self: center; }
.home-live-head { display: flex; align-items: center; gap: 10px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgb(63 216 132 / .22); }
.home-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-num { display: grid; padding: 12px 14px; border-radius: var(--radius-s); background: rgb(var(--shade-rgb) / .3); box-shadow: var(--outline); color: var(--ink); text-decoration: none; }
a.home-num:hover { background: rgb(var(--accent2-rgb) / .16); text-decoration: none; }
.home-num b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-num span { color: var(--ink-3); font-size: .82rem; }
.home-num:first-child { grid-column: 1 / -1; }
.home-num:first-child b { font-size: 2.2rem; color: var(--ok); }
.home-staff { display: grid; gap: 6px; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.offer-card { display: grid; align-content: start; gap: 8px; padding: 22px; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.offer-card:hover { transform: translateY(-3px); }
.offer-card h3 { margin: 6px 0 0; font-size: 1.15rem; }
.offer-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--tile, var(--grass)), var(--tile-2, var(--grass-2))); box-shadow: 0 10px 24px -12px var(--tile, var(--grass)); }
.offer-icon .icon { width: 24px; height: 24px; }
.offer-grid > :nth-child(6n+1) { --tile: var(--grass); --tile-2: var(--grass-2); }
.offer-grid > :nth-child(6n+2) { --tile: var(--diamond); --tile-2: var(--t-diamond-2); }
.offer-grid > :nth-child(6n+3) { --tile: var(--gold); --tile-2: var(--t-gold-2); }
.offer-grid > :nth-child(6n+4) { --tile: var(--t-amethyst); --tile-2: var(--t-amethyst-2); }
.offer-grid > :nth-child(6n+5) { --tile: var(--t-mint); --tile-2: var(--t-mint-2); }
.offer-grid > :nth-child(6n+6) { --tile: var(--t-pink); --tile-2: var(--t-gold-2); }
.join-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.join-row .mono { font-family: var(--mono, monospace); }
.home-community { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; }
.home-community.only-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.home-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.home-top li { display: flex; align-items: center; gap: 10px; }
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.home-join { display: grid; align-content: start; gap: 10px; color: var(--ink); text-decoration: none; background: radial-gradient(400px 200px at 100% 0%, rgb(var(--accent2-rgb) / .22), transparent 70%), var(--bg-2); }
.home-join:hover { text-decoration: none; }
.home-join .btn { justify-self: start; margin-top: 6px; }
@media (max-width: 900px) {
  .home-community, .home-split { grid-template-columns: minmax(0, 1fr); }
  .join-row { grid-template-columns: minmax(0, 1fr); }
  .home-sections { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .offer-card, .offer-card:hover { transition: none; transform: none; } }
.home-join .eyebrow, .lookup-card .eyebrow { justify-self: start; width: fit-content; }
/* phones: the offers as compact rows – icon beside the title, so all six fit on about one screen */
@media (max-width: 600px) {
  .offer-grid { gap: 10px; }
  .offer-card { grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .offer-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
  .offer-icon .icon { width: 20px; height: 20px; }
  .offer-card h3 { margin: 0; font-size: 1.02rem; }
  .offer-card p { font-size: .9rem; }
  .home-num b { font-size: 1.35rem; }
  .home-num:first-child b { font-size: 1.8rem; }
}
/* 6.26: the author card of a post like on the big Minecraft forums – rank colour, rank banner, online dot, facts */
.avatar.xl { width: 104px; height: 104px; }
img.avatar[src^="/account-pic/"] { image-rendering: auto; }
.fm-post { border-top: 3px solid var(--rank, transparent); }
.fm-post.by-team .fm-author { background: linear-gradient(180deg, rgb(var(--gold-rgb, 255 200 58) / .12), rgb(var(--shade-rgb) / .22) 60%); }
.fm-face { position: relative; display: inline-block; line-height: 0; }
.fm-face.online::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--bg-2); }
.fm-author-name.ranked { color: var(--rank); }
.fm-banner { display: block; width: 100%; min-width: 120px; padding: 3px 10px; border-radius: 6px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-align: center; color: var(--ink-2); background: rgb(var(--shade-rgb) / .45); box-shadow: var(--outline); }
.fm-banner.ranked { color: #fff; background: linear-gradient(135deg, var(--rank), color-mix(in srgb, var(--rank) 60%, #000)); text-shadow: 0 1px 1px rgb(0 0 0 / .4); box-shadow: 0 6px 14px -8px var(--rank); }
.fm-author-facts { display: grid; grid-template-columns: 1fr; gap: 3px; width: 100%; padding-top: 10px; border-top: 1px solid var(--line-2); }
.fm-author-facts > div { display: flex; justify-content: space-between; gap: 10px; }
.fm-author-facts dt { text-align: left; }
.fm-author-facts dd { text-align: right; font-weight: 700; }
.fm-avatar-remove { max-width: 100%; padding: 4px 8px; font-size: .7rem; white-space: normal; }
.fm-react-icons { display: inline-flex; }
.fm-react-icons span { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -6px; border-radius: 50%; background: var(--bg-2); box-shadow: 0 0 0 2px var(--bg-2), var(--outline); font-size: .82rem; }
.fm-react-icons + .small { margin-left: 6px; }
.fm-react-pop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--bg-2); box-shadow: var(--outline), 0 14px 30px -12px rgb(0 0 0 / .5); }
.fm-react-pop[hidden] { display: none; }
.fm-react-pop button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 1.35rem; cursor: pointer; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.fm-react-pop button:hover, .fm-react-pop button:focus-visible { transform: scale(1.25); background: rgb(var(--shade-rgb) / .35); }
.fm-react-pop button.on { background: rgb(var(--accent2-rgb) / .2); }
a.fm-quote-head { display: block; color: inherit; text-decoration: none; }
a.fm-quote-head:hover { color: var(--link); }
/* boards with posts the reader has not seen */
.fm-board.unread .fm-board-icon { box-shadow: var(--outline), 0 0 0 3px rgb(var(--accent2-rgb) / .35); }
.fm-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-filter-chips .chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.fm-member { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 20px 14px 16px; border-top: 3px solid var(--rank, var(--line-2)); color: var(--ink); text-align: center; text-decoration: none; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.fm-member:hover { transform: translateY(-3px); text-decoration: none; }
.fm-member .cm-rank { position: absolute; top: 10px; left: 10px; }
.fm-member .fm-banner { width: auto; }
/* settings: profile picture */
.pic-card { display: flex; gap: 22px; align-items: center; }
.pic-card .avatar.xl { flex: none; border-radius: var(--radius); }
@media (max-width: 560px) { .pic-card { flex-direction: column; align-items: flex-start; } }
@media (max-width: 700px) {
  .fm-author-facts { display: none; }
  .fm-avatar-remove { grid-column: 2; justify-self: start; }
  .fm-banner { width: auto; min-width: 0; }
  .fm-face.online::after { width: 12px; height: 12px; right: -2px; bottom: -2px; }
}
#signature textarea { width: 100%; min-height: 84px; }
.st-open { --st: #3e8eff; }
.st-confirmed { --st: #f08a24; }
.st-in_progress { --st: var(--t-amethyst); }
.st-fixed { --st: #22a55b; }
.st-wont_fix { --st: #7a7f8c; }
.st-duplicate { --st: #9aa0ab; }
.fm-post.pending { box-shadow: var(--outline), 0 0 0 2px rgb(240 138 36 / .55); }
.fm-post .badge.warn .icon { width: 13px; height: 13px; }
.btn.on { color: var(--link); }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted; cursor: pointer; }
.fm-history .fm-quote { margin: 0; }
/* text */
.fm-spoiler { padding: 0 4px; border-radius: 4px; background: var(--ink-3); color: transparent; cursor: pointer; user-select: none; }
.fm-spoiler > span { visibility: hidden; }
.fm-spoiler.open { background: rgb(var(--shade-rgb) / .35); color: inherit; cursor: auto; user-select: auto; }
.fm-spoiler.open > span { visibility: visible; }
.fm-coords { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px; border: 0; border-radius: 999px; font: inherit; font-size: .88em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); background: rgb(var(--accent2-rgb) / .18); box-shadow: var(--outline); cursor: copy; }
.fm-coords.copied { background: rgb(34 165 91 / .35); }
/* bulk + split */
.fm-thread.pickable { grid-template-columns: auto auto minmax(0, 1fr) 76px 76px minmax(0, 220px); }
/* team notes */
.fm-notes { margin-bottom: 14px; padding: 12px 16px; }
.fm-notes summary { cursor: pointer; font-weight: 800; }
.fm-notes[open] summary { margin-bottom: 10px; }
.fm-notes .row { margin-top: 10px; }
.fm-card-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.fm-card-head .row { gap: 4px; margin-top: 4px; }
/* settings */
.fm-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
@media (max-width: 760px) { .fm-thread.pickable { grid-template-columns: auto auto minmax(0, 1fr); } }
.fm-settings-grid { align-items: start; }
.fm-settings-grid .field { margin: 0; }
/* 6.28: messages */
.ms-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.ms-row:last-child { border-bottom: 0; }
.ms-row:hover { background: rgb(var(--shade-rgb) / .18); text-decoration: none; }
.ms-row.unread b { color: var(--link); }
.ms-faces { display: flex; flex: none; }
.ms-faces img + img { margin-left: -14px; box-shadow: 0 0 0 2px var(--bg-2); }
.ms-text { display: grid; min-width: 0; }
.ms-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-meta { display: grid; justify-items: end; gap: 4px; flex: none; }
.ms-people { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ms-people .left { opacity: .5; }
.ms-thread { display: grid; gap: 12px; max-height: 65vh; overflow-y: auto; padding: 4px; }
.ms-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 80%; }
.ms-msg.mine { margin-left: auto; flex-direction: row-reverse; }
.ms-bubble { min-width: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgb(var(--shade-rgb) / .3); box-shadow: var(--outline); }
.ms-msg.mine .ms-bubble { border-radius: 14px 14px 4px 14px; background: rgb(var(--accent2-rgb) / .22); }
.ms-bubble .fm-body p { margin: 4px 0 0; }
.ms-reply textarea { width: 100%; }
.ms-blocked { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ms-blocked li { display: flex; align-items: center; gap: 10px; }
@media (max-width: 600px) { .ms-msg { max-width: 94%; } .ms-meta .small { display: none; } }
.fm-trophy { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--gold); background: rgb(var(--shade-rgb) / .35); box-shadow: var(--outline); }
.fm-trophy .icon { width: 15px; height: 15px; }
.fm-body .fm-video { position: relative; max-width: 640px; aspect-ratio: 16 / 9; margin: 10px 0; border-radius: var(--radius-s); overflow: hidden; background: #000; box-shadow: var(--outline); }
.fm-body .fm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 6.28: profile – actions, places, wall, warnings */
.pf-actions { margin-top: 8px; }
.pf-share { margin-top: 8px; }
.pf-social { margin-top: 6px; }
.pf-places { display: flex; flex-wrap: wrap; gap: 8px; }
/* 7.31.0: activity calendar on the profile – a square per day, weeks as columns */
.ac-scroll { overflow-x: auto; padding-bottom: 4px; }
.ac-grid { display: flex; gap: 3px; width: max-content; padding-top: 16px; }
.ac-week { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; position: relative; }
.ac-month { position: absolute; top: -16px; left: 0; font-size: .7rem; color: var(--ink-3); white-space: nowrap; }
.ac-day { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ac-day.l1 { background: color-mix(in srgb, var(--ok) 30%, var(--glass-2)); }
.ac-day.l2 { background: color-mix(in srgb, var(--ok) 55%, var(--glass-2)); }
.ac-day.l3 { background: color-mix(in srgb, var(--ok) 78%, var(--glass-2)); }
.ac-day.l4 { background: var(--ok); }
.ac-day.future { visibility: hidden; }
.ac-legend { display: inline-flex; align-items: center; gap: 3px; }
.ac-legend .ac-day { width: 10px; height: 10px; }
.pf-place { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(var(--shade-rgb) / .3); box-shadow: var(--outline); color: var(--ink); text-decoration: none; }
.pf-place b { color: var(--gold); }
.pf-place.r1 { box-shadow: inset 0 0 0 2px var(--gold); }
.pf-wall, .pf-warns { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pf-wall li { display: flex; gap: 12px; align-items: flex-start; }
.pf-wall .fm-body p { margin: 4px 0 0; }
.pf-warns li { display: flex; gap: 10px; align-items: center; }
#wall-text { width: 100%; }
/* 6.28: team page */
.tp-motm { display: grid; gap: 14px; align-content: start; border-top: 4px solid var(--gold); }
.tp-motm .eyebrow { width: fit-content; }
.tp-motm-body { display: flex; gap: 18px; align-items: center; }
.tp-motm-body .avatar.xl { border-radius: var(--radius); box-shadow: 0 0 0 3px var(--gold); }
.tp-hist-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--grass); }
.tp-hist-ic.promoted { background: var(--gold); color: var(--gold-ink); }
.lb-card { display: grid; gap: 10px; align-content: start; color: var(--ink); text-decoration: none; transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
.lb-card:hover { transform: translateY(-3px); text-decoration: none; }
.lb-card h2 { font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.lb-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb-top li { display: flex; align-items: center; gap: 10px; }
.lb-top li.r1 b { color: var(--gold); }
/* 6.28: status page */
.st-banner { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; font-size: 1.1rem; }
.st-banner .icon { width: 30px; height: 30px; }
.st-banner.ok { box-shadow: var(--outline), inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); background-color: color-mix(in srgb, var(--ok) 10%, transparent); }
.st-banner.warn { box-shadow: var(--outline), inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); background-color: color-mix(in srgb, var(--warn) 10%, transparent); }
.st-banner.bad { box-shadow: var(--outline), inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); background-color: color-mix(in srgb, var(--bad) 10%, transparent); }
.st-comp { display: flex; align-items: center; gap: 10px; }
.st-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); }
.st-comp.ok .st-dot { background: var(--ok); box-shadow: 0 0 0 4px rgb(34 197 94 / .18); }
.st-comp.bad .st-dot { background: var(--bad); }
.st-bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 34px; }
.st-bars i { border-radius: 3px; background: rgb(var(--shade-rgb) / .4); }
.st-bars i.ok { background: var(--ok); }
.st-bars i.warn { background: var(--warn); }
.st-bars i.bad { background: var(--bad); }
.st-tps { align-items: end; height: 40px; } .st-tps i { height: var(--h, 100%); }
.cr-card { display: grid; justify-items: center; gap: 10px; text-align: center; }
.cr-card .row { justify-content: center; }
.vt-cal-d { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-size: .82rem; background: rgb(var(--shade-rgb) / .25); color: var(--ink-3); }
.vt-cal-d.on { color: #fff; background: var(--grass); }
.vt-cal-d.today { box-shadow: inset 0 0 0 2px var(--diamond); }
.vt-winners { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vt-winners li { display: flex; align-items: center; gap: 12px; }
.vt-winners li.r1 b { color: var(--gold); }
/* 6.28: start page – news covers, countdown, maintenance, Discord, supporters */
.news-card.has-cover { padding: 0; overflow: hidden; }
.news-card.has-cover > :not(.news-cover) { margin-left: 18px; margin-right: 18px; }
.news-card.has-cover > :last-child { margin-bottom: 18px; }
.btn.block { width: 100%; justify-content: center; margin-top: 10px; }
/* ---------------------------------------------------------------- sign-in and registration (6.31.1) */
body.auth-solo #site-header, body.auth-solo #site-footer { display: none; }
body.auth-solo main { flex: 1; display: flex; align-items: flex-start; justify-content: center; }
.auth-solo-wrap { width: min(100%, 500px); margin: 0 auto; padding: 28px 0 40px; }
.auth-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 14px; }
.auth-home { justify-self: start; }
.auth-logo { grid-column: 2; display: block; line-height: 0; }
.auth-logo img { width: 112px; height: 112px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.45)); animation: auth-logo-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes auth-logo-pop { from { transform: scale(0.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.auth-card { padding: 34px 34px 24px; }
.auth-card h1 { text-align: center; margin: 0; font-size: clamp(30px, 7vw, 42px); line-height: 1.1; }
.auth-sub { text-align: center; color: var(--ink-2); font-size: 1.08rem; margin: 8px 0 24px; }
.auth-card .field > label, .auth-card .label-row label { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.82rem; font-weight: 800; color: var(--ink-2); }
.auth-card input { padding-top: 15px; padding-bottom: 15px; }
.auth-card .btn.lg { margin-top: 8px; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.label-row a { font-weight: 800; font-size: 0.9rem; color: var(--redstone); }
.pw-field { position: relative; }
.pw-field input { padding-right: 60px; }
.pw-eye { position: absolute; top: 0; right: 0; bottom: 0; width: 54px; display: grid; place-items: center; background: transparent; border: 0; border-left: 1px solid rgb(var(--shade-rgb) / 0.6); color: var(--ink-2); cursor: pointer; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--ink); background: rgb(var(--lite-rgb) / 0.06); }
.auth-switch { margin: 24px 0 0; padding-top: 20px; border-top: 2px solid rgb(var(--shade-rgb) / 0.45); text-align: center; color: var(--ink-2); font-weight: 600; font-size: 1.05rem; }
.auth-switch a { font-weight: 800; color: var(--redstone); }
.auth-foot { text-align: center; color: var(--ink-3); font-size: 0.9rem; margin: 18px 0 0; }
@media (max-width: 520px) {
  .auth-solo-wrap { padding-top: 16px; }
  .auth-card { padding: 26px 20px 20px; }
  .auth-top { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; }
  .auth-logo { grid-column: 1; }
  .auth-logo img { width: 92px; height: 92px; }
}
/* the "Welcome!" moment after signing in or registering */
.welcome-ov { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: linear-gradient(rgb(20 10 40 / 0.35), rgb(40 20 10 / 0.35)), url(/brand/home-day) center / cover no-repeat, var(--bg-1); animation: welcome-in 0.3s ease-out both; }
.welcome-ov.night { background: linear-gradient(rgb(10 10 30 / 0.4), rgb(10 10 30 / 0.4)), url(/brand/home-night) center / cover no-repeat, var(--bg-1); }
/* 7.3.1: on a phone the picture is drawn about 1600 px wide – the smaller copy is enough */
@media (max-width: 960px) {
  .welcome-ov { background-image: linear-gradient(rgb(20 10 40 / 0.35), rgb(40 20 10 / 0.35)), url(/brand/home-day?w=1600); }
  .welcome-ov.night { background-image: linear-gradient(rgb(10 10 30 / 0.4), rgb(10 10 30 / 0.4)), url(/brand/home-night?w=1600); }
}
.welcome-ov.out { animation: welcome-out 0.4s ease-in both; }
.welcome-mid { display: grid; justify-items: center; gap: 18px; }
.welcome-check { width: min(44vw, 200px); height: auto; filter: drop-shadow(0 8px 24px rgb(0 0 0 / 0.5)); }
.welcome-check .ring, .welcome-check .tick { fill: none; stroke: var(--redstone); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.welcome-check .ring { stroke-dasharray: 327; stroke-dashoffset: 327; animation: welcome-draw 0.6s 0.15s ease-out forwards; }
.welcome-check .tick { stroke-width: 10; stroke-dasharray: 80; stroke-dashoffset: 80; animation: welcome-draw 0.35s 0.65s ease-out forwards; }
.welcome-text { font-family: var(--pixel); font-size: clamp(30px, 8vw, 52px); color: #fff; text-shadow: 0 3px 0 rgb(0 0 0 / 0.45), 0 0 24px rgb(0 0 0 / 0.5); animation: auth-logo-pop 0.6s 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes welcome-draw { to { stroke-dashoffset: 0; } }
@keyframes welcome-in { from { opacity: 0; } }
@keyframes welcome-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .auth-logo img, .welcome-ov, .welcome-text { animation: none; }
  .welcome-check .ring, .welcome-check .tick { animation: none; stroke-dashoffset: 0; }
}
/* ---------------------------------------------------------------- 6.34: live map, patch notes, giveaways, rewards */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.ex-note h2 { font-size: 1.35rem; }
.ex-note .rule-text > :first-child { margin-top: 0; }
.ex-give-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ex-give { position: relative; overflow: hidden; }
.ex-give::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold-3)); }
.ex-give.done::before { background: var(--line-2); }
.ex-give-top { display: flex; gap: 14px; align-items: flex-start; }
.ex-give-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold-2); }
.ex-give-ic svg { width: 22px; height: 22px; }
.ex-prize { color: var(--gold-3); font-weight: 600; }
.ex-winners { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-winner { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 12%, transparent); font-weight: 600; }
.ex-link { color: inherit; text-decoration: none; align-items: center; }
.ex-link:hover { box-shadow: var(--outline), 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.ex-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ex-day { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--radius-s); background: var(--glass-2); border: 1px solid var(--line-2); text-align: center; min-width: 0; }
.ex-day-n { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.ex-day-ic svg { width: 26px; height: 26px; }
.ex-day-l { font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; }
.ex-day.done { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.ex-day.done .ex-day-ic { color: var(--ok); }
.ex-day.next { border-color: var(--gold-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); }
.ex-day.next .ex-day-ic { color: var(--gold-2); animation: ex-bob 1.6s ease-in-out infinite; }
.ex-day.big { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, transparent), color-mix(in srgb, var(--gold) 4%, transparent)); }
@keyframes ex-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ex-day.next .ex-day-ic { animation: none; } }
@media (max-width: 640px) { .ex-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ex-day.big { grid-column: span 2; } }
.ex-friends { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ex-friends li { padding: 8px 10px; border-radius: var(--radius-s); background: var(--glass-2); }
.ex-days-edit { display: grid; gap: 8px; }
.ex-day-edit { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; align-items: center; }
@media (max-width: 640px) { .ex-day-edit { grid-template-columns: minmax(0, 1fr); } }
.ex-rule { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto minmax(0, 1.2fr) auto auto; gap: 8px; align-items: center; }
@media (max-width: 720px) { .ex-rule { grid-template-columns: minmax(0, 1fr); } .ex-rule > svg { display: none; } }
/* 6.34.1: the invite link stays on one line (cut with …) and the copy button goes below it on phones */
.ex-invite code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .ex-invite { flex-wrap: wrap; } .ex-invite code { flex-basis: 100%; } .ex-invite .btn { width: 100%; justify-content: center; } }
/* 6.35: "Today" on the overview of the player area */
.today-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--glass-2); color: inherit; text-decoration: none; }
.today-item + .today-item { margin-top: 8px; }
.today-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgb(var(--accent2-rgb) / .16); }
.today-ic svg { width: 22px; height: 22px; }
.today-ic.done { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.today-ic.gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-3); }
/* 7.1.4: "Get started" – the first steps of a new player, built from the "Today" rows */
.pl-start-count { margin-left: auto; }
.pl-start .progress { height: 10px; margin-bottom: 6px; }
.pl-start-steps { list-style: none; margin: 0; padding: 0; }
.pl-start-steps .today-item.done b { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
@media (max-width: 520px) {
  .pl-start-steps .today-item { flex-wrap: wrap; }
  .pl-start-steps .today-item > .grow { flex: 1 1 calc(100% - 52px); min-width: 0; }   /* icon and text share the line, the button goes below */
  .pl-start-steps .today-item > .btn { margin-left: 52px; }
}
.home-give .ex-prize { font-size: .95rem; }
/* 6.35: the giveaway tile in Player area → Rewards stays one row on phones; the claim button fills the card */
.ex-link { flex-wrap: nowrap; gap: 14px; }
@media (max-width: 560px) { .ex-daily .btn.lg { width: calc(100% - 4px); } }
/* ================================================================== 6.39: the start page as tiles (bento) */
/* Instead of eight sections below each other the content sits side by side in a 12-column grid – about half the
   scrolling. Hidden sections (no news, no shop …) leave no gaps: the grid packs densely and the neighbours of a
   missing section take its place. */
@media (min-width: 1000px) {
  .container.home-bento { max-width: 1320px; }
  .home-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 22px; padding-top: 0; align-items: start; }
  .home-bento > * { grid-column: span 12; min-width: 0; }

  .home-bento > #join-steps, .home-bento > #community-section, .home-bento > .home-split { grid-column: span 5; }
  .home-bento:has(> #offer-section[hidden]) > #join-steps,
  .home-bento:has(> #community-section[hidden]) > #shop-section,
  .home-bento:has(> #shop-section[hidden]) > .home-split { grid-column: span 12; }
  .home-bento > .home-split { grid-template-columns: minmax(0, 1fr); align-self: stretch; }
  .home-bento:has(> #shop-section[hidden]) > .home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* offers: two columns of compact rows (icon beside the title) */
  .home-bento .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-bento .offer-card { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .home-bento .offer-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; }
  .home-bento .offer-icon .icon { width: 22px; height: 22px; }
  .home-bento .offer-card h3 { margin: 0; font-size: 1.02rem; }
  .home-bento .offer-card p { font-size: .9rem; }
  /* the three steps as a list beside the offers */
  .home-bento:has(> #offer-section[hidden]) .join-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the community column: its boxes below each other */
  .home-bento .home-community, .home-bento .home-community.only-side { grid-template-columns: minmax(0, 1fr); }
  .home-bento #shop-section .grid.auto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

}
.home-bento > section > .section-head { margin: 0 0 12px; }
.home-bento > #community-section { margin-top: 0; }
/* the three steps as compact rows (number beside the text) – beside the offers on computers, short on phones */
.home-bento .join-row { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.home-bento .join-row li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 14px 16px; align-items: start; }
.home-bento .join-row li::before { grid-row: span 2; margin: 0; width: 40px; height: 40px; font-size: 22px; }
.home-bento .section-head h2 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.home-bento .eyebrow { margin-bottom: 6px; }
/* the live numbers: one slim bar that overlaps the bottom of the scene */
.home-bento > .home-live { position: relative; z-index: 10; margin-top: -38px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 16px;
  background: linear-gradient(135deg, rgb(var(--accent2-rgb) / .1), transparent 55%), var(--bg-2); box-shadow: var(--outline), 0 18px 40px -18px rgb(0 0 0 / .55); }
.home-bento .home-live-head { flex: none; white-space: nowrap; }
.home-bento .home-numbers { flex: 1 1 520px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.home-bento .home-num { padding: 8px 12px; }
.home-bento .home-num:first-child { grid-column: auto; }
.home-bento .home-num b { font-size: 1.3rem; }
.home-bento .home-num:first-child b { font-size: 1.3rem; }
.home-bento .home-staff { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; }
.home-bento .lookup-card { padding: 20px; }
.home-bento .lookup-card h2, .home-bento .home-join h2 { font-size: 1.2rem; }
@media (max-width: 999px) {
  .home-bento { gap: 32px; padding-top: 0; }
  .home-bento > .home-live { margin-top: -26px; }
}
@media (max-width: 600px) {
  .home-bento { gap: 26px; }
  .home-bento .home-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
  .home-bento .home-num:first-child { grid-column: 1 / -1; }
}
/* 6.39: a calm backdrop behind the start page content – soft light in the colours of the design that fades out
   (7.8.1: without the faint block grid); never over a picture the team set as site background (--bg-image) */
body.home main { position: relative; isolation: isolate; overflow-x: clip; }
body.home .home-bento::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 12% 18%, rgb(var(--accent2-rgb) / .13), transparent 70%),
    radial-gradient(640px 420px at 88% 42%, rgb(139 92 255 / .1), transparent 70%),
    radial-gradient(760px 460px at 30% 82%, rgb(255 176 32 / .08), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 120px, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 120px, #000 75%, transparent); }
body.home .home-bento { position: relative; }
body.home .home-bento::before { left: calc(50% - 50vw); right: calc(50% - 50vw); }

.home-bento > section > .section-head { margin-bottom: 16px; }
/* live: a dashboard strip – number, label, dividers; how full the server is as a bar */
.home-bento > .home-live { padding: 12px 18px; gap: 8px 22px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.home-bento .home-live-head b { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.home-bento .home-numbers { display: flex; flex-wrap: wrap; gap: 6px 0; }
.home-bento .home-num { flex: 1 1 120px; min-width: 0; gap: 2px; padding: 4px 18px; background: none; box-shadow: none; border-radius: var(--radius-s); border-left: 1px solid var(--line-2); transition: background var(--mv-dur-fast) var(--mv-ease-out); }
.home-bento .home-num b, .home-bento .home-num:first-child b { font-size: 1.4rem; line-height: 1.15; }
.home-bento .home-num:first-child b { color: var(--ok); }
.home-bento .home-num span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-bento a.home-num:hover { background: rgb(var(--accent2-rgb) / .1); }
@media (max-width: 600px) {
  .home-bento .home-num { flex: 1 1 40%; border-left: 0; border-top: 1px solid var(--line-2); padding: 8px 6px; }
  .home-bento .home-num:first-child { flex-basis: 100%; border-top: 0; }
}
/* cards: a glow of their own colour in the corner, lift and colour on hover */
.home-bento .offer-card, .home-bento .join-row li, .home-bento .product, .home-bento .home-join, .home-bento .lookup-card { isolation: isolate; }
.home-bento .offer-card { transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; }
.home-bento .offer-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px 140px at 0% 0%, color-mix(in srgb, var(--tile, var(--grass)) 18%, transparent), transparent 70%); transition: opacity var(--mv-dur-base) var(--mv-ease-out); }
.home-bento .offer-card:hover { transform: translateY(-3px); box-shadow: var(--outline), 0 16px 34px -18px color-mix(in srgb, var(--tile, var(--grass)) 85%, transparent); }
.home-bento .offer-icon { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .18), 0 10px 22px -12px var(--tile, var(--grass)); }
.home-bento .offer-card h3 { letter-spacing: .005em; }
.home-bento .offer-card p { line-height: 1.45; }
/* the three steps as a path: a line runs from number to number */
.home-bento .join-row li { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.home-bento .join-row li:hover { transform: translateX(3px); }
.home-bento .join-row li:not(:last-child)::after { content: ""; position: absolute; left: 35px; top: 56px; bottom: -14px; width: 2px; border-radius: 2px; z-index: 1;
  background: linear-gradient(180deg, var(--how-color, var(--grass)), transparent); opacity: .7; }
.home-bento .join-row b { font-size: 1rem; }
/* leaderboard: medal colours and a bar for each player's share */
.home-bento .home-top { gap: 6px; }
.home-bento .home-top li { position: relative; isolation: isolate; padding: 6px 10px; border-radius: var(--radius-s); }
.home-bento .home-top li::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: calc(var(--w, 0) * 1%); border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--accent2-rgb) / .2), rgb(var(--accent2-rgb) / .04)); }
.home-bento .home-top li:first-child::before { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 26%, transparent), color-mix(in srgb, var(--gold) 5%, transparent)); }

/* shop: the price leads, the sale badge sits in the corner */
.home-bento .product { display: grid; align-content: start; gap: 6px; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.home-bento .product:hover { transform: translateY(-3px); }
.home-bento .product .sale { position: absolute; top: 14px; right: 14px; }
.home-bento .product .price { font-size: 1.45rem; font-weight: 800; margin-top: auto; }
.home-bento .product .btn { justify-self: stretch; text-align: center; justify-content: center; }
/* join the team: a soft glow that follows the design */
.home-bento .home-join { overflow: hidden; }
.home-bento .home-join::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--accent2-rgb) / .28), transparent); }
.home-bento .home-join:hover .btn { transform: translateX(3px); }
.home-bento .home-join .btn { transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
@media (prefers-reduced-motion: reduce) {
  .home-bento .offer-card, .home-bento .join-row li, .home-bento .product, .home-bento .home-join .btn { transition: none; }
  .home-bento .offer-card:hover, .home-bento .join-row li:hover, .home-bento .product:hover, .home-bento .home-join:hover .btn { transform: none; }
}
/* ================================================================== 6.45: the maintenance pop-up (maintenance-popup.js) */
html.mm-open { overflow: hidden; }
.mm-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; overflow-y: auto;
  background: radial-gradient(900px 600px at 50% 30%, rgb(20 16 6 / .55), rgb(4 6 12 / .82)); -webkit-backdrop-filter: blur(8px) saturate(.9); backdrop-filter: blur(8px) saturate(.9);
  opacity: 0; transition: opacity var(--mv-dur-base) var(--mv-ease-out); }
.mm-overlay.in { opacity: 1; }
.mm-overlay.out { opacity: 0; }
.mm-card { position: relative; width: min(860px, 100%); border-radius: 18px; overflow: hidden; color: #eef2f7; background: #10131c;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 90px -30px rgb(0 0 0 / .9);
  transform: translateY(14px) scale(.97); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.mm-overlay.in .mm-card { transform: none; }
/* hazard tape along the top edge */
.mm-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; z-index: 3;
  background: repeating-linear-gradient(-45deg, #f5c518 0 14px, #1b1b1f 14px 28px); }
.mm-stage { position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  background: radial-gradient(70% 90% at 50% 100%, rgb(255 190 80 / .28), transparent 70%), linear-gradient(180deg, #1b2547 0%, #3a3463 55%, #6b4a63 100%); }
.mm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
/* the headline in CSS 3D: layered shadows give the letters a block depth – hidden once the live scene runs */
.mm-css3d { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 24px; transition: opacity .4s; }
.mm-stage.live .mm-css3d { opacity: 0; }
.mm-css3d span { font: 400 clamp(2.2rem, 1rem + 6vw, 5rem)/1 var(--pixel, monospace); text-transform: uppercase; letter-spacing: .06em; text-align: center; color: #ffd23f;
  text-shadow: 0 1px 0 #f0b022, 0 2px 0 #e09a1a, 0 3px 0 #c97a14, 0 4px 0 #b06810, 0 5px 0 #8f520c, 0 6px 0 #6e3f09, 0 14px 22px rgb(0 0 0 / .55);
  transform: perspective(600px) rotateX(14deg); animation: mm-drop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes mm-drop { from { transform: perspective(600px) rotateX(14deg) translateY(-60px); opacity: 0; } to { transform: perspective(600px) rotateX(14deg); opacity: 1; } }
.mm-body { display: grid; gap: 10px; padding: 22px 28px 26px; }
.mm-body .eyebrow { justify-self: start; }
.mm-body h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: #fff; }
.mm-text { margin: 0; white-space: pre-line; color: rgb(238 242 247 / .85); font-size: 1.02rem; line-height: 1.55; }
.mm-countdown { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 14px; border-radius: 999px; background: rgb(245 197 24 / .14);
  box-shadow: inset 0 0 0 1px rgb(245 197 24 / .35); color: #ffe48a; font-weight: 700; }
.mm-countdown b { font-variant-numeric: tabular-nums; }
.mm-actions { margin-top: 6px; flex-wrap: wrap; gap: 8px; }
.mm-actions .btn.ghost { color: #eef2f7; }
@media (max-width: 600px) { .mm-stage { aspect-ratio: 4 / 3; } .mm-body { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .mm-overlay, .mm-card { transition: none; } .mm-css3d span { animation: none; } }
/* 6.45: Kraspone beside the pop-up (a transparent layer over the whole overlay; only he takes clicks) */
.mm-side { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.mm-overlay .mm-card { z-index: 0; }
.mm-side-hit { position: fixed; z-index: 2; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 12px; }
.mm-side-hit:focus-visible { outline: 2px solid #ffd27a; outline-offset: 4px; }

/* ================================================================== 6.94 (7.0): the player area with a side bar
   like the wiki and the team area – the own profile card and the pages in groups on the left, the page on the right.
   The side bar spans every row (the last row is 1fr, so a tall side bar never pulls gaps into the content). */
.pl-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.pl-me { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius);
  background: radial-gradient(120% 120% at 0% 0%, rgb(var(--accent2-rgb) / .16), transparent 60%), var(--glass); box-shadow: var(--outline), var(--shadow-s); }
.pl-face { position: relative; line-height: 0; }
.pl-face img { border-radius: var(--radius-s); image-rendering: pixelated; }
.pl-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--bg-2); }
.pl-who { display: grid; gap: 3px; min-width: 0; }
.pl-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.pl-who .rank { font-size: .8rem; }
.pl-public { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-s); color: var(--ink-2); }
.pl-public:hover { color: var(--ink); background: rgb(var(--lite-rgb) / .08); }
.pl-nav { display: grid; gap: 10px; padding: 12px; border-radius: var(--radius); background: var(--glass); box-shadow: var(--outline), var(--shadow-s); }
.pl-group { display: grid; gap: 2px; }
.pl-group h4 { margin: 4px 8px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.pl-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-s); color: var(--ink-2); font-weight: 700; text-decoration: none;
  transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out); }
.pl-link:hover { color: var(--ink); background: rgb(var(--accent2-rgb) / .14); text-decoration: none; }
.pl-link[aria-current="page"] { color: #fff; background: var(--grass); box-shadow: 0 3px 0 var(--grass-3); }
.pl-link .icon { width: 18px; height: 18px; flex: none; }
.pl-link .count { margin-left: auto; }
.pl-team { padding-top: 8px; border-top: 1px solid var(--line-2); }
@media (min-width: 900px) {
  #app:has(> .pl-side) { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: repeat(11, auto) 1fr; column-gap: 24px; row-gap: 0; align-items: start; max-width: 1280px; }
  #app:has(> .pl-side) > .pl-side { grid-column: 1; grid-row: 1 / -1; position: sticky; top: calc(var(--header-h) + 16px); }
  #app:has(> .pl-side) > :not(.pl-side) { grid-column: 2; min-width: 0; }
  #app:has(> .pl-side) > :not(.pl-side) ~ :not(.pl-side):not(.sr-only) { margin-top: 18px; }
}
@media (max-width: 899px) {
  .pl-side { margin-bottom: 18px; }
  .pl-nav { display: flex; gap: 6px; overflow-x: auto; padding: 6px; scrollbar-width: thin; }
  .pl-group { display: contents; }
  .pl-group h4 { display: none; }
  .pl-link { flex: none; white-space: nowrap; padding: 8px 12px; }
  .pl-team { border-top: 0; padding-top: 0; }
}
/* 7.1.6: the community area – the same side bar (shell.js communityNav), placed right after the page's banner: the
   banner stays over the whole width and the side bar starts below it, like the forum (7.1.2); on phones the row of
   tabs follows the banner. */
@media (min-width: 900px) {
  #app:has(> .cm-side) > :is(.page-head, .mv-head):first-child { grid-column: 1 / -1; grid-row: 1; }
  #app:has(> :is(.page-head, .mv-head):first-child) > .cm-side { grid-row: 2 / -1; }
  #app:has(> .cm-side) > .cm-side.pl-side + :not(.sr-only):not(.pl-side) { margin-top: 0; }
  /* cards centred with auto margins (#app > .card) would shrink to their content in the grid – they fill the column */
  #app:has(> .cm-side) > .cm-side ~ * { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .pl-link { transition: none; } }.pl-hero .profile-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.pl-date { color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .72rem; }
.pl-tiles { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pl-tiles .mv-tile .v { font-size: 1.3rem; }
@media (min-width: 600px) { .pl-tiles .mv-tile .v { white-space: nowrap; } }
@media (max-width: 599px) { .pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-tiles .mv-tile { grid-template-columns: minmax(0, 1fr); } .pl-tiles .mv-tile > .icon { grid-row: auto; } }
.mv-tile .v.none { font-size: .95rem; font-weight: 600; color: var(--ink-3); }/* 6.94: the public profile wears the profile card of the player area – the rank colour glows in the corner */
.pf-hero.pl-card { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--rank, var(--grass-2)) 22%, transparent), transparent 60%), var(--bg-2); }
.pf-rank .icon { width: 1em; height: 1em; }
@media (max-width: 600px) { .pf-hero { flex-direction: column; align-items: flex-start; } }
/* 7.18.0: the server achievements on the profile – item pictures instead of the round symbols */
.pf-gach-pic img { width: 28px; height: 28px; image-rendering: pixelated; object-fit: contain; }
.pf-gach-pic.open img { filter: grayscale(0.85); opacity: 0.75; }
.pf-gach-cats .badge { font-weight: 600; }
.pf-gach-prog { height: 8px; margin-top: 4px; }
/* 7.25.0: the showcase on the profile – three tiles, the rare ones with a golden ring */
.pf-show-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pf-show-tile { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; text-align: center; border-radius: var(--radius); background: rgb(var(--lite-rgb) / .04); box-shadow: inset 0 0 0 1px var(--line-2); }
.pf-show-tile.rare { box-shadow: inset 0 0 0 2px var(--gold), 0 0 22px -8px var(--gold); }
.pf-show-pic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgb(var(--lite-rgb) / .07); }
.pf-show-pic img { width: 40px; height: 40px; image-rendering: pixelated; object-fit: contain; }
.pf-show-pick { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }