/* LOCUS GRID – undersidor (Matchmaking, Ranking, Premium, Partners, Profil, Stötta oss).
   Bygger på färger och komponenter i world.css. */
/* vanlig scroll: häv 3D-vyns spärr (overflow/overscroll) från world.css */
html, body { height: auto; overscroll-behavior: auto; }
html { overflow-y: auto; }
body { overflow: visible; overflow-x: clip; }  /* ingen vågrät scrollist när sidan flyger i sidled vid sidbyte */
/* hela gränssnittet lite mindre så att mer får plats */
html { zoom: .85; }
@media (max-width: 760px) { html { zoom: 1; } }
body { background: radial-gradient(90% 60% at 50% 0%, #121418 0%, var(--bg) 70%) fixed; min-height: 100vh; }
/* stor LG-logga som vattenstämpel i bakgrunden */
body::before { content: ""; position: fixed; left: 50%; top: 54%; width: min(78vh, 760px); aspect-ratio: 1; translate: -50% -50%; background: url(https://www.locus-grid.se/lg.png) center / contain no-repeat; opacity: .045; filter: grayscale(1) brightness(1.8); pointer-events: none; z-index: 0; }
.top { position: sticky; }
.wrap { width: min(1360px, 100% - 48px); margin: 0 auto; position: relative; z-index: 1; padding-bottom: 80px; }
/* menyn till vänster, vänlistan fast till höger när man är inloggad – bara innehållet flyttas */
@media (min-width: 761px) { main.wrap { width: auto; max-width: 1520px; margin-left: max(214px, calc((100% - 1520px) / 2)); margin-right: max(214px, calc((100% - 1520px) / 2)); } }
@media (min-width: 1180px) {
  body.logged-in.friends-open main.wrap { margin-left: max(214px, calc((100% - 1520px) / 2)); margin-right: max(364px, calc((100% - 1520px) / 2)); }
  /* vänlistan går från topp till botten längs högerkanten */
  body.logged-in .friends { top: 0; bottom: 0; right: 0; border-left: 1px solid var(--line); box-shadow: -30px 0 60px -30px rgba(0,0,0,.8); }
  body.logged-in .chats { right: 356px; }
}

/* sidrubrik i affischstil */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 24px 0 28px; }
.page-head h1 { font-size: 84px; }
.page-head .sub { font-size: 22px; }
.page-head .intro { color: var(--ink-2); font-size: 21px; line-height: 1.55; max-width: 56ch; margin: 18px 0 0; }
.page-head .intro b, .page-head .intro em { color: var(--cyan); font-style: normal; }

.box { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 28px; }
.box.corner::before { content: ""; position: absolute; left: -1px; top: -1px; width: 70px; height: 70px; background: linear-gradient(135deg, var(--cyan) 0 30%, transparent 30% 38%, var(--cyan) 38% 42%, transparent 42%); pointer-events: none; }
.box-h { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.box-h h2, .box-h h3 { font-size: 26px; }
.box-h .spaced { font-size: 11px; color: var(--ink-3); }
.k { display: block; font: 700 10.5px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.big-n { font: 900 42px/1 var(--cond); }
.check { color: var(--cyan); font-weight: 800; }
.nil { color: var(--ink-3); }

/* gäst: inloggning krävs */
.gate { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.gate .box { padding: 60px 56px; max-width: 560px; }
.gate h2 { font-size: 60px; }
.gate p { color: var(--ink-2); margin: 18px 0 28px; }

/* ---------- MATCHMAKING ---------- */
.mm-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(330px, 1fr); gap: 18px; }
.mm-main, .mm-side { display: grid; gap: 18px; align-content: start; }
.party { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.slot { position: relative; aspect-ratio: 3 / 4.1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 18px 12px 16px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.07)); border: 1px solid var(--line); overflow: hidden; text-align: center; }
.slot.is-me { border-color: rgba(0,225,255,.45); }
.slot.is-me::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 56px; background: linear-gradient(135deg, var(--cyan) 0 34%, transparent 34%); }
.slot .pc-av { width: 46%; aspect-ratio: 1; display: grid; place-items: center; margin: 18% 0 auto; background: var(--ink); color: var(--on-ink); font: 900 clamp(34px, 3.4vw, 60px)/1 var(--cond); }
.slot.is-me .pc-av { background: var(--cyan); }
.slot .pc-name { font: 900 clamp(20px, 1.9vw, 30px)/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; margin: 16px 0 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .pc-meta { display: flex; align-items: center; gap: 8px; font: 800 16px var(--cond); letter-spacing: .06em; color: var(--ink-2); }
.slot .pc-meta .lvl { width: 28px; height: 28px; font-size: 15px; }
.slot .kick { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .2s; }
.slot:hover .kick { opacity: 1; }
.slot .kick:hover { color: var(--red); border-color: var(--red); }
.slot.empty { justify-content: center; gap: 10px; cursor: pointer; border-style: dashed; background: transparent; color: var(--ink-3); font: 900 18px var(--cond); letter-spacing: .2em; text-transform: uppercase; transition: color .2s, border-color .2s, background .2s; }
.slot.empty b { font: 300 64px/1 var(--cond); }
.slot.empty:hover { color: var(--ink); border-color: var(--ink); background: rgba(255,255,255,.05); }
.slot.pending { justify-content: center; color: var(--ink-2); font: 800 15px var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.slot.pending .pc-av { margin: 0 0 14px; opacity: .5; width: 40%; }
.slot.joining { animation: join .5s var(--ease); }
@keyframes join { from { transform: translateY(16px); opacity: 0; } }
.invite-pop { position: fixed; z-index: 50; width: 300px; max-height: 360px; overflow-y: auto; background: var(--surface); box-shadow: var(--shadow); padding: 10px; display: none; }
.invite-pop.on { display: block; animation: join .25s var(--ease); }
.invite-pop .f-row { cursor: default; }
.invite-pop button.inv { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 800 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.invite-pop button.inv:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.invite-pop button.inv:disabled { opacity: .35; cursor: default; background: transparent; color: var(--ink-3); border-color: var(--line); }
.mm-row2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
.region-line { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.region-line b { font: 900 22px var(--cond); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.region-line .ping { margin-left: auto; font: 900 26px var(--cond); color: var(--ink-3); white-space: nowrap; }
.region-line .flags { gap: 6px; height: auto; }
.region-line .flags img { height: 18px; }
.maps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.map { position: relative; height: 72px; padding: 12px 14px; display: flex; align-items: flex-end; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--ink); overflow: hidden; }
.map b { font: 900 22px/1 var(--cond); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.queue { text-align: center; padding: 32px 28px 28px; overflow: hidden; }
.queue .mm-state { justify-content: center; font-size: 20px; }
.queue .days-line { font: 700 13px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); margin: 10px 0 4px; }
.queue .q-big { font: 900 58px/.9 var(--cond); text-transform: uppercase; margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.queue[data-state="searching"] .q-big { color: var(--cyan); }
.queue .go { width: 100%; height: 64px; margin-top: 20px; font-size: 24px; letter-spacing: .18em; }
.queue .go:disabled { background: var(--soft); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; transform: none; }
.queue .demo-link { margin-top: 12px; background: none; border: 0; color: var(--cyan); font: 700 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.queue .scan { height: 3px; margin-top: 18px; background: var(--soft); position: relative; overflow: hidden; visibility: hidden; }
.queue .scan i { position: absolute; top: 0; bottom: 0; width: 34%; background: var(--cyan); animation: scan 1.4s var(--ease) infinite; }
@keyframes scan { from { left: -34%; } to { left: 100%; } }
.queue[data-state="searching"] .scan { visibility: visible; }
.live-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 18px; font: 700 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.live-line b { color: var(--ink); }
.terms-line { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.terms-line a { color: var(--cyan); }
.srv { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font: 900 21px var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.srv:first-of-type { border-top: 2px solid var(--ink); }
.srv img { height: 18px; }
.rank-box { display: flex; align-items: center; gap: 18px; }
.rank-box .lvl { width: 64px; height: 64px; font-size: 32px; }
.rank-box .lvl.none { background: var(--soft); color: var(--ink-3); }
.session { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); margin-top: 18px; }
.session div { padding: 14px 0 0; }
.session div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.session b { font: 900 34px/1 var(--cond); display: block; margin-top: 6px; }
.lchat { display: flex; flex-direction: column; height: 340px; padding: 0; }
.lchat .box-h { padding: 22px 24px 0; }
.lchat .msgs { background: transparent; padding: 6px 24px 12px; }
.lchat .msg { background: rgba(255,255,255,.06); color: var(--ink); box-shadow: none; }
.lchat .msg.me { background: rgba(255,255,255,.12); color: var(--ink); }
.lchat .msg .who { display: flex; align-items: baseline; gap: 8px; font: 800 13px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.lchat .msg .who time { font: 500 11px var(--sans); letter-spacing: .04em; text-transform: none; color: var(--ink-3); }
.lchat .sys { align-self: center; font: 700 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.lchat form { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.lchat input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--ink); font: 14.5px var(--sans); outline: 0; }
.lchat input:focus { border-color: var(--cyan); }
.lchat form button { width: 42px; height: 42px; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-size: 15px; transition: background .2s, color .2s; }
.lchat form button:hover { background: var(--ink); color: var(--on-ink); }
.lchat .locked { flex: 1; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; padding: 20px; text-align: center; }
/* match hittad */
.mf { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.mf.on { opacity: 1; pointer-events: auto; }
.mf-card { position: relative; width: min(620px, 100%); padding: 56px 50px 44px; text-align: center; background: var(--surface); border: 1px solid rgba(0,225,255,.4); box-shadow: 0 0 120px -20px rgba(0,225,255,.35); transform: scale(.94); transition: transform .4s var(--ease); }
.mf.on .mf-card { transform: none; }
.mf-card::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 120px; background: linear-gradient(135deg, var(--cyan) 0 30%, transparent 30% 38%, var(--cyan) 38% 42%, transparent 42%); }
.mf-card h2 { font-size: 72px; }
.mf-card .spaced { color: var(--ink-2); margin-top: 12px; display: block; }
.mf-count { font: 900 64px/1 var(--cond); color: var(--cyan); margin: 22px 0 6px; }
.mf-time { height: 6px; background: var(--soft); margin: 10px 0 24px; position: relative; overflow: hidden; }
.mf-time i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--cyan); transition: width 1s linear; }
.mf .accept { width: 100%; height: 78px; font-size: 32px; letter-spacing: .24em; }
.mf .accept.done { background: var(--green); border-color: var(--green); color: var(--on-ink); pointer-events: none; }
.mf-wait { margin-top: 18px; font: 700 13px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.mf-acc { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.mf-acc span { width: 24px; height: 24px; border: 2px solid var(--ink-3); transition: background .2s, border-color .2s; }
.mf-acc span.ok { background: var(--green); border-color: var(--green); }

/* ---------- RANKING ---------- */
.psearch { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 56px; border: 1px solid var(--line); background: rgba(14,15,18,.7); }
.psearch input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: 17px var(--sans); }
.psearch:focus-within { border-color: var(--cyan); }
.lvls { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin: 18px 0 40px; }
.lvls a { text-decoration: none; padding: 14px 0 12px; text-align: center; border: 1px solid var(--line); background: rgba(14,15,18,.6); transition: border-color .2s, transform .2s; }
.lvls a:hover { border-color: var(--lv); transform: translateY(-2px); }
.lvls a.on { border-color: var(--lv); background: rgba(255,255,255,.05); }
.lvls .n { font: 700 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.lvls .b { font: 900 36px/1 var(--cond); color: var(--lv); margin-top: 4px; }
.sec-h { display: flex; justify-content: space-between; align-items: flex-end; margin: 10px 0 16px; }
.sec-h h2 { font-size: 50px; }
.sec-h h2 em { font-style: normal; color: var(--cyan); }
.tabs a, .tabs span { display: inline-block; padding: 8px 16px; font: 800 15px var(--cond); letter-spacing: .16em; text-decoration: none; border: 1px solid var(--line); }
.tabs .on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: rgba(14,15,18,.7); }
table.lt { width: 100%; border-collapse: collapse; min-width: 820px; }
.lt th { text-align: left; padding: 14px 16px; font: 700 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
.lt td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.lt .r { text-align: right; }
.lt tr:hover td { background: rgba(255,255,255,.03); }
.lt .pos { font: 900 26px var(--cond); color: var(--ink-3); }
.lt tr.top3 .pos { color: var(--ink); }
.lt tr:first-child .pos { color: var(--cyan); }
.lt .pl { font: 900 22px var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.lt .pl a { text-decoration: none; }
.lt .pl a:hover { color: var(--cyan); }
.lt .elo { font: 900 22px var(--cond); }
.lt .lvl { width: 32px; height: 32px; font-size: 17px; }
.lt img.flag { height: 14px; vertical-align: middle; }
.lt tr.you td { background: rgba(0,225,255,.06); }
.lt .unr { font: 700 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.placing { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.placing i { display: flex; gap: 3px; }
.placing i span { width: 14px; height: 6px; background: var(--soft); }
.placing i span.on { background: var(--cyan); }
.more { display: block; margin: 16px auto 0; }
.split2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }

/* ---------- PREMIUM ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step .n { font: 900 56px/1 var(--cond); color: var(--cyan); }
.step h3 { font-size: 28px; margin: 6px 0 12px; }
.step p { color: var(--ink-2); margin: 0; font-size: 17.5px; line-height: 1.6; }
.lobby-rule { margin-top: 18px; display: flex; gap: 18px; align-items: center; }
.lobby-rule p { margin: 0; color: var(--ink-2); font-size: 18px; }
.lobby-rule b { color: var(--ink); }
.my-trust { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.my-trust .big { font: 900 54px/.9 var(--cond); }
.my-trust .big small { font-size: 22px; color: var(--ink-3); }
.tbar { position: relative; height: 18px; border: 2px solid var(--ink); background: var(--soft); }
.tbar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, var(--cyan) 0 10px, #33E8FF 10px 20px); }
.tbar .m { position: absolute; top: -12px; bottom: -12px; width: 3px; background: var(--ink); }
.tbar .m span { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; font: 900 18px var(--cond); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tbar .m.e span { color: var(--cyan); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier { display: flex; flex-direction: column; }
.tier h3 { font-size: 40px; }
.tier .req { font: 900 30px var(--cond); color: var(--cyan); margin: 6px 0 2px; }
.tier .req small { font: 700 11px var(--sans); letter-spacing: .24em; color: var(--ink-3); margin-left: 6px; }
.tier ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; border-top: 2px solid var(--ink); padding-top: 16px; }
.tier li { color: var(--ink-2); font-size: 16.5px; padding-left: 18px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--cyan); }
.tier.elite { border-color: rgba(0,225,255,.5); }
.cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; }
.cmp td:first-child { font-weight: 600; }
.how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.how h3 { font-size: 26px; margin-bottom: 14px; }
.how ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.how li { color: var(--ink-2); font-size: 17px; line-height: 1.55; padding-left: 18px; position: relative; }
.how li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--cyan); }
.how li b { color: var(--ink); display: block; }
.how .down li::before { background: var(--red); }
.motto { text-align: center; padding: 50px 0 10px; font: 900 24px var(--cond); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- PARTNERS ---------- */
.partner-card { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: center; text-decoration: none; color: inherit; transition: border-color .2s, transform .3s var(--ease); --cyan-ink: #E2001A; }
.partner-card .logo-wrap { aspect-ratio: 1; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.partner-card .logo-wrap img { width: 70%; }
.partner-card h2 { font-size: 72px; }
.partner-card .sub { color: #E2001A; }
.partner-card p { color: var(--ink-2); font-size: 20px; line-height: 1.6; }

/* ---------- PROFIL ---------- */
.pf-top { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.pf-top .avatar { width: 120px; height: 120px; display: grid; place-items: center; background: var(--cyan); color: var(--on-ink); font: 900 70px/1 var(--cond); }
.pf-top h1 { font-size: 72px; }
.pf-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pf-tags span { padding: 6px 12px; border: 1px solid var(--line); font: 800 14px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pf-tags .admin { border-color: var(--cyan); color: var(--cyan); }
.pf-facts { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); margin-top: 26px; }
.pf-facts div { padding: 16px 16px 0 0; }
.pf-facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.pf-facts b { font: 900 30px/1.1 var(--cond); display: block; margin-top: 6px; }
.pf-facts .ok { color: var(--green); }
.pf-stats2 { display: grid; grid-template-columns: 1.1fr 2fr; gap: 18px; }
.winrate { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.winrate .ring { width: 190px; height: 190px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; }
.winrate .ring::before { content: ""; grid-area: 1 / 1; width: 190px; height: 190px; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--p) * 1%), var(--soft) 0); -webkit-mask: radial-gradient(circle, transparent 74px, #000 75px); mask: radial-gradient(circle, transparent 74px, #000 75px); }
.winrate .ring b { grid-area: 1 / 1; font: 900 56px/1 var(--cond); position: relative; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.stat-grid div { padding: 20px 22px; margin: -1px 0 0 -1px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.stat-grid b { display: block; font: 900 38px/1 var(--cond); margin-top: 8px; }
.res-w { color: var(--green); font: 900 18px var(--cond); letter-spacing: .14em; }
.res-l { color: var(--red); font: 900 18px var(--cond); letter-spacing: .14em; }
.lt .vs { color: var(--ink); margin: 0 8px; font-size: 13px; }
.lt .team { font-weight: 600; }
.lt .team.me { color: var(--cyan); }
.lt .score { font: 900 22px var(--cond); }
.lt .mapn { font: 900 18px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.lt .d-p { color: var(--green); font: 900 20px var(--cond); }
.lt .d-m { color: var(--red); font: 900 20px var(--cond); }

/* ---------- STÖTTA OSS ---------- */
.give { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.give .where { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.give .where li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 900 20px var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.give .where li i { font: 900 18px var(--cond); color: var(--cyan); font-style: normal; width: 32px; }
.badge-box { display: flex; gap: 20px; align-items: center; margin-top: 18px; }
.badge-box .star { width: 70px; height: 70px; display: grid; place-items: center; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 30px; flex: none; transition: background .2s, color .2s, transform .2s var(--ease); }
.badge-box .star:hover, .badge-box:hover .star { background: var(--ink); color: var(--on-ink); transform: translateY(-2px); }
.badge-box p { margin: 6px 0 0; color: var(--ink-2); }
.paypal { margin: 18px 0 20px; }
.fine { font-size: 13px; color: var(--ink-3); }
.donations .empty { padding: 30px 0; text-align: center; color: var(--ink-3); border-top: 2px solid var(--ink); }

/* responsivt */
@media (max-width: 1180px) {
  .maps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-layout, .split2, .give, .pf-stats2 { grid-template-columns: 1fr; }
  .mm-row2 { grid-template-columns: 1fr; }
  .steps, .tiers { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 72px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 24px); }
  .page-head { flex-direction: column; align-items: flex-start; padding-top: 20px; }
  .page-head h1 { font-size: 58px; }
  .party { grid-template-columns: repeat(5, 150px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .slot { scroll-snap-align: start; }
  .maps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lvls { grid-template-columns: repeat(5, 1fr); }
  .how { grid-template-columns: 1fr; }
  .partner-card { grid-template-columns: 1fr; }
  .partner-card h2 { font-size: 70px; }
  .pf-top { grid-template-columns: auto 1fr; }
  .pf-top .avatar { width: 96px; height: 96px; font-size: 60px; }
  .pf-top h1 { font-size: 64px; }
  .pf-facts { grid-template-columns: 1fr 1fr; }
  .pf-facts div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .mf-card { padding: 44px 24px 30px; }
  .mf-card h2 { font-size: 64px; }
  .sec-h h2 { font-size: 52px; }
}

/* ---------- STARTSIDAN som vanlig sida (paneler i flöde i stället för 3D) ---------- */
.home .wrap { padding-top: 10px; }
.home .wrap > .panel { width: auto; margin: 0 0 18px; padding: 60px 64px; }
.home .wrap > .panel.dash { padding: 64px 64px 52px; }
.home .wrap > .panel h2 { font-size: 72px; }
.home .wrap > .panel.foot { padding: 50px 40px; }
@media (max-width: 1180px) {
  .home .dash { grid-template-columns: 1fr; }
  .home .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .home .feat:nth-child(odd) { border-left: 0; }
  .home .feat:nth-child(even) { border-left: 1px solid var(--line); }
  .home .split { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .home .wrap > .panel, .home .wrap > .panel.dash { padding: 40px 22px; }
  .home .dash-hero h1 { font-size: 96px; }
  .home .wrap > .panel h2 { font-size: 72px; }
  .home .dash-mm { grid-template-columns: 1fr; }
  .home .stats { grid-template-columns: 1fr 1fr; }
  .home .stats > div:nth-child(3) { border-left: 0; }
  .home .feat-grid { grid-template-columns: 1fr; }
  .home .feat { border-left: 0 !important; }
  .home .lrow { grid-template-columns: 50px 40px 1fr auto; }
  .home .partner-logo { max-width: 260px; }
}

/* ---------- 3D-flygtur mellan sidor (bakgrunden står alltid still) ---------- */
main.wrap { transform-origin: 50% 35vh; }
body.page-enter main.wrap { animation: fly-in 1.45s cubic-bezier(.2, .7, .2, 1) both; }
body.page-leave main.wrap { animation: fly-out .9s cubic-bezier(.6, 0, .4, 1) both; }
body.page-swap main.wrap { opacity: 0; animation: none; }
@keyframes fly-in {
  from { opacity: 0; transform: perspective(1400px) translate3d(calc(var(--dir, 1) * 260px), 60px, var(--dz-in, -1700px)) rotateY(calc(var(--dir, 1) * -9deg)) rotateX(6deg); filter: blur(6px); }
  55% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes fly-out {
  to { opacity: 0; transform: perspective(1400px) translate3d(calc(var(--dir, 1) * -220px), -30px, var(--dz-out, 1000px)) rotateY(calc(var(--dir, 1) * 8deg)); filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce) { body.page-enter main.wrap { animation-duration: .6s; } }

.foot-links { color: var(--ink-2); margin: 10px 0 0; }
.partner-card:hover { transform: none; }

/* inga hörnmarkeringar på några kort */
.panel::before, .panel::after, .box.corner::before, .dash-card::before, .slot.is-me::before,
.mf-card::before, .friends::before, .login-sheet::before, .pf-banner::before { content: none; display: none; }

/* region och ping, som på nuvarande matchmaking-sida */
.region .spaced { font-size: 11.5px; color: var(--ink-2); }
.region .pings { display: flex; gap: 34px; margin-top: 14px; }
.region .pings span { display: inline-flex; align-items: center; gap: 12px; }
.region .pings img { height: 15px; width: auto; }
.region .pings b { font: italic 600 15px var(--sans); color: var(--ink-2); }

/* warmup-servrar som dropdown */
.warmup { padding: 0; }
.warmup summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 28px; cursor: pointer; user-select: none; }
.warmup summary::-webkit-details-marker { display: none; }
.warmup summary h3 { font-size: 26px; }
.warmup summary i { width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
.warmup[open] summary i { transform: rotate(-135deg) translate(-2px, -2px); }
.warmup summary:hover h3, .warmup summary:hover i { color: var(--ink); border-color: var(--ink); }
.warmup .srv { margin: 0 28px; }
.warmup .srv:last-child { margin-bottom: 22px; }
.warmup[open] .srv { animation: join .3s var(--ease) both; }

/* inga streck efter etiketter som "Counter-Strike 2 · Competitive" */
.rule::before, .rule::after { display: none; }

/* mobil: ingen sidmeny, bara scroll – och ingen matchmaking */
@media (max-width: 760px) {
  .rail { display: none !important; }
  .home .dash-mm { display: none; }
  .wrap { padding-bottom: 40px; }
  /* ingen vänlista eller chatt på mobil */
  .friends, .friends-tab, .chats, .top [data-friends] { display: none !important; }
  /* inget konto/inloggning på mobil */
  .top [data-me], .top .top-right { display: none !important; }
  /* startsidan får plats på smal skärm */
  .home .wrap > .panel, .home .wrap > .panel.dash { padding: 30px 20px; }
  .home .dash-hero h1 { font-size: 64px; }
  .home .dash-hero .sub { font-size: 20px; letter-spacing: .24em; }
  .home .rule { letter-spacing: .16em; font-size: 11px; }
  .home .lead { font-size: 18px; max-width: 100%; }
  .home .dash > * { min-width: 0; }
  .home .dash-card { padding: 24px 20px; }
  .home .dash-card h3 { font-size: 32px; }
  .home .dash-card p { font-size: 16px; }
  .home .wrap > .panel h2 { font-size: 48px; }
  .home .stats b { font-size: 34px; }
  .home .lrow .nm { font-size: 17px; }
  .home .lrow .el { font-size: 22px; }
  .page-head h1 { font-size: 48px; }
}

/* rubriken på stödkortet i gult, som på riktiga sajten */
.dash-card h3.gold { color: #FFCF4D; }
.dash-card h3.cyan { color: var(--cyan); }
/* sidmenyn mittemellan kortets överkant och mitten av skärmen */
@media (min-width: 761px) { .rail { top: calc(36px + 25%); translate: 0 -25%; } }
/* sidmenyn utan streck, större text och rutor */
.rail a::after { display: none; }
.rail a { font-size: 17px; padding: 4px 0; }
.rail a span { padding: 8px 15px; }
/* lodrät linje längs menyn med en kort tagg till aktuell sida */
.rail { padding-left: 16px; }
.rail::before { content: ""; position: absolute; left: 0; top: -20px; bottom: -20px; width: 1.5px; background: var(--ink); }
.rail a { position: relative; }
.rail a.on::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; height: 1.5px; background: var(--ink); }