/* FORRE.NU Arcade Hub — forre_pulse-native (ljust/mörkt via pulse-tokens), responsiv.
   3-kolumnslayout: vänstermeny | spelkort | leaderboards. Klasser prefixade arc2-/arcm-/arcme- (ingen krock). */

.arcade-hub{
  --a-card: var(--card, #14161f);
  --a-ink:  var(--ink, #e9ebf3);
  --a-dim:  var(--dim, #8a94a1);
  --a-line: var(--line, rgba(255,255,255,.12));
  --a-inset:var(--inset, #0e1017);
  --a-accent: var(--accent, #7b5cff);
  --a-gold: var(--gold, #ffce3a);
  --aim:#2ec8ef; --quicxo:#9b6cff; --snake:#8fe01e; --lama:#ffce3a;
  /* BREDD 2026-07-26: hårdkodad 1200 → kanonisk var(--shell-w) (samma värde,
     men nu kopplad till EN källa så den följer med om kanon någonsin ändras). */
  width:100%; max-width:var(--shell-w); margin:0 auto; padding:20px 16px 52px; color:var(--a-ink);
}

/* hero */
.arcade-hub .arc2-hero{ text-align:center; margin:6px 0 24px; }
.arcade-hub .arc2-kick{ font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--a-dim); }
.arcade-hub .arc2-title{ margin:6px 0 8px; font-size:clamp(30px,6vw,52px); font-weight:900; letter-spacing:-.01em; line-height:1; }
.arcade-hub .arc2-title .g{ background:linear-gradient(100deg,var(--aim),var(--quicxo) 55%,var(--snake)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.arcade-hub .arc2-sub{ color:var(--a-dim); font-size:14.5px; max-width:52ch; margin:0 auto; }

/* ── 3 kolumner: meny | kort | topplistor ── */
.arcade-hub .arc2-cols{ display:grid; grid-template-columns:216px minmax(0,1fr) 292px; gap:16px; align-items:start; }
.arcade-hub .arc2-left, .arcade-hub .arc2-right{ position:sticky; top:84px; display:flex; flex-direction:column; gap:14px; }

/* ── Vänstermeny ── */
.arcade-hub .arc2-side{ background:var(--a-card); border:1px solid var(--a-line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.arcade-hub .arc2-side-h{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--a-dim); padding:2px 6px 6px; }
.arcade-hub .arcm-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; border-radius:11px; padding:9px 8px; font-family:inherit; color:var(--a-ink);
  border-left:3px solid var(--c, var(--a-accent)); transition:background .12s, transform .1s; }
.arcade-hub .arcm-item:hover{ background:var(--a-inset); }
.arcade-hub .arcm-item:active{ transform:translateY(1px); }
.arcade-hub .arcm-item.aim{ --c:var(--aim); } .arcade-hub .arcm-item.quicxo{ --c:var(--quicxo); }
.arcade-hub .arcm-item.snake{ --c:var(--snake); } .arcade-hub .arcm-item.lama{ --c:var(--lama); }
.arcade-hub .arcm-ic{ width:34px; height:34px; flex:none; display:grid; place-items:center; font-size:18px;
  border-radius:9px; background:color-mix(in srgb, var(--c) 16%, transparent); }
.arcade-hub .arcm-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.arcade-hub .arcm-n{ font-size:13.5px; font-weight:800; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arcade-hub .arcm-m{ font-size:10.5px; color:var(--a-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arcade-hub .arcm-go{ flex:none; font-size:15px; color:var(--a-dim); opacity:0; transition:opacity .12s, color .12s; }
.arcade-hub .arcm-item:hover .arcm-go{ opacity:1; color:var(--c, var(--a-accent)); }

/* Min dag */
.arcade-hub .arcme-row{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--a-inset); border-radius:9px; padding:7px 10px; font-size:12.5px; }
.arcade-hub .arcme-n{ font-weight:700; color:var(--a-ink); }
.arcade-hub .arcme-v{ font-weight:800; color:var(--a-dim); font-variant-numeric:tabular-nums; }
.arcade-hub .arcme-v.rank{ color:var(--a-gold); }
.arcade-hub .arcme-hint{ font-size:11px; color:var(--a-dim); line-height:1.45; padding:4px 6px 2px; }

/* ── Spelkort ── */
.arcade-hub .arc2-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.arcade-hub .arc2-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px;
  background:var(--a-card); border:1px solid var(--a-line); border-radius:18px; padding:18px;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.arcade-hub .arc2-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--c, var(--a-accent)); opacity:.85; }
.arcade-hub .arc2-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--c, var(--a-accent)) 55%, var(--a-line)); box-shadow:0 16px 34px rgba(0,0,0,.18); }
.arcade-hub .arc2-card.aim{ --c:var(--aim); } .arcade-hub .arc2-card.quicxo{ --c:var(--quicxo); }
.arcade-hub .arc2-card.snake{ --c:var(--snake); } .arcade-hub .arc2-card.lama{ --c:var(--lama); }

.arcade-hub .arc2-top{ display:flex; align-items:center; gap:12px; }
.arcade-hub .arc2-ic{ width:48px; height:48px; flex:none; display:grid; place-items:center; font-size:26px;
  border-radius:13px; background:color-mix(in srgb, var(--c) 18%, transparent); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.arcade-hub .arc2-name{ font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.1; }
.arcade-hub .arc2-meta{ font-size:11px; color:var(--a-dim); margin-top:2px; }
.arcade-hub .arc2-desc{ font-size:12.5px; color:var(--a-dim); line-height:1.5; margin:0; flex:1; }

/* play button */
.arcade-hub .arc2-play{ display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  font-size:14.5px; font-weight:800; letter-spacing:.02em; color:#fff; padding:12px; border-radius:12px;
  background:linear-gradient(180deg, var(--c, var(--a-accent)), color-mix(in srgb, var(--c, var(--a-accent)) 65%, #000));
  box-shadow:0 8px 20px color-mix(in srgb, var(--c, var(--a-accent)) 34%, transparent); transition:filter .12s, transform .1s;
  border:0; cursor:pointer; font-family:inherit; width:100%; }
.arcade-hub .arc2-play:hover{ filter:brightness(1.08); }
.arcade-hub .arc2-play:active{ transform:translateY(1px); }
.arcade-hub .arc2-play.dark{ color:#111; }

/* ── Leaderboards (höger) ── */
.arcade-hub .arc2-lbp{ background:var(--a-card); border:1px solid var(--a-line); border-radius:16px; padding:13px; display:flex; flex-direction:column; gap:9px; }
.arcade-hub .arc2-lbp.aim{ --c:var(--aim); } .arcade-hub .arc2-lbp.quicxo{ --c:var(--quicxo); } .arcade-hub .arc2-lbp.snake{ --c:var(--snake); }
.arcade-hub .arc2-lbp-head{ display:flex; align-items:center; gap:9px; }
.arcade-hub .arc2-lbp-ic{ width:32px; height:32px; flex:none; display:grid; place-items:center; font-size:17px;
  border-radius:9px; background:color-mix(in srgb, var(--c) 16%, transparent); }
.arcade-hub .arc2-lbp-t{ font-size:14px; font-weight:800; line-height:1.1; }
.arcade-hub .arc2-lbp-m{ font-size:10.5px; color:var(--a-dim); }
.arcade-hub .arc2-lbp-tabs{ display:flex; gap:4px; background:var(--a-inset); border-radius:9px; padding:3px; }
.arcade-hub .arc2-lbp-tab{ flex:1; border:0; cursor:pointer; font-family:inherit; font-size:11px; font-weight:800;
  color:var(--a-dim); background:transparent; border-radius:7px; padding:6px 4px; transition:background .12s, color .12s; }
.arcade-hub .arc2-lbp-tab:hover{ color:var(--a-ink); }
.arcade-hub .arc2-lbp-tab.on{ background:var(--a-card); color:var(--a-ink); box-shadow:0 1px 4px rgba(0,0,0,.18); }
.arcade-hub .arc2-lbp-body{ display:flex; flex-direction:column; gap:5px; min-height:96px; }

.arcade-hub .arc2-lbrow{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px; background:var(--a-inset); font-size:12.5px; }
.arcade-hub .arc2-lbrow .r{ font-weight:800; color:var(--a-dim); width:20px; font-variant-numeric:tabular-nums; }
.arcade-hub .arc2-lbrow.top1 .r{ color:var(--a-gold); }
.arcade-hub .arc2-lbrow .n{ flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arcade-hub .arc2-lbrow .s{ font-weight:800; color:var(--c, var(--a-accent)); font-variant-numeric:tabular-nums; }
.arcade-hub .arc2-lbrow.you{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--a-gold) 55%, transparent); }
.arcade-hub .arc2-lbrow.you .n{ color:var(--a-gold); }
.arcade-hub .arc2-lbsep{ text-align:center; font-size:10px; color:var(--a-dim); letter-spacing:.2em; line-height:1; padding:1px 0; }
.arcade-hub .arc2-note{ font-size:11.5px; color:var(--a-dim); padding:4px 2px; line-height:1.5; }
.arcade-hub .arc2-retry{ align-self:flex-start; border:1px solid var(--a-line); background:var(--a-inset); color:var(--a-ink);
  font-family:inherit; font-size:11.5px; font-weight:700; border-radius:8px; padding:6px 12px; cursor:pointer; transition:border-color .12s; }
.arcade-hub .arc2-retry:hover{ border-color:var(--c, var(--a-accent)); }

/* game page shell (snake/lama on their own page) */
.arc2-gamepage{ max-width:900px; margin:0 auto; padding:14px 14px 48px; }
.arc2-gamepage .arc2-back{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:700; font-size:13px;
  color:var(--ink, #e9ebf3); background:var(--card, #14161f); border:1px solid var(--line, rgba(255,255,255,.12));
  padding:8px 14px; border-radius:10px; margin-bottom:14px; transition:border-color .12s; }
.arc2-gamepage .arc2-back:hover{ border-color:var(--accent, #7b5cff); }

/* ── Popup/modal: spela i en ruta, allt runtom mörknar ── */
.arc2-modal{ position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(5,6,12,.74); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.arc2-modal.on{ display:flex; animation:arc2FadeIn .16s ease-out; }
@keyframes arc2FadeIn{ from{ opacity:0; } to{ opacity:1; } }
.arc2-modal-box{ width:min(1040px,96vw); height:min(780px,92vh); display:flex; flex-direction:column; overflow:hidden;
  background:var(--card,#14161f); border:1px solid var(--line,rgba(255,255,255,.16)); border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.arc2-modal-head{ display:flex; align-items:center; gap:8px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--line,rgba(255,255,255,.14)); flex:none; }
.arc2-modal-title{ font-weight:800; font-size:15px; flex:1; color:var(--ink,#e9ebf3); }
.arc2-modal-open, .arc2-modal-x{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; cursor:pointer;
  color:var(--dim,#8a94a1); background:transparent; border:0; text-decoration:none; font-size:16px; transition:background .12s, color .12s; }
.arc2-modal-open:hover, .arc2-modal-x:hover{ color:var(--ink,#e9ebf3); background:var(--inset,#0e1017); }
.arc2-modal-x{ font-size:20px; }
.arc2-modal-frame{ flex:1; width:100%; border:0; background:var(--bg,#0e1019); display:block; }
body.arc2-modal-open-body{ overflow:hidden; }
@media (max-width:560px){ .arc2-modal{ padding:0; } .arc2-modal-box{ width:100vw; height:100dvh; border-radius:0; border:0; } }

/* ── Responsivt ── */
@media (max-width:1020px){
  .arcade-hub .arc2-cols{ grid-template-columns:1fr; }
  .arcade-hub .arc2-left, .arcade-hub .arc2-right{ position:static; }
  /* vänstermenyn blir horisontella chips ovanför korten */
  .arcade-hub .arc2-left{ flex-direction:row; align-items:stretch; }
  .arcade-hub .arc2-side{ flex:1; }
  .arcade-hub .arc2-me{ max-width:280px; }
  /* topplistorna hamnar under korten, sida vid sida */
  .arcade-hub .arc2-right{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; }
}
@media (max-width:760px){
  .arcade-hub .arc2-left{ flex-direction:column; }
  .arcade-hub .arc2-me{ max-width:none; }
}
@media (max-width:560px){
  .arcade-hub{ padding:14px 12px 40px; }
  .arcade-hub .arc2-grid{ grid-template-columns:1fr; }
  .arcade-hub .arc2-right{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .arcade-hub *{ transition:none !important; } .arc2-modal.on{ animation:none; } }

/* Spelarnamn i topplistan är en länk sedan 2026-07-26 (arv från raden så
   layouten är oförändrad — bara understruken vid hover, plus kontaktkort). */
.arc-plink { color: inherit; text-decoration: none; font: inherit; }
.arc-plink:hover { text-decoration: underline; color: var(--accent); }