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

/* ============================================================================
 * ★ EGEN SIDA: SPELET MÅSTE HA EN RUTA (bugg funnen och fixad 2026-08-19)
 * ============================================================================
 * .snake-game och .lama-game är båda `position:absolute; inset:0`. Det är RÄTT
 * i arkadhubbens iframe (?bare=1) — där ÄR body rutan, och spelet ska fylla
 * den helt. På de egna sidorna (?page=arcade/snake, ?page=arcade/lama) fanns
 * ingen positionerad förälder alls: .arc2-gamepage saknar både position och
 * höjd. Spelen förankrades då mot .pulse-shell och la sig över HELA sidan —
 * topbaren, "Tillbaka till arkaden" och sidfoten hamnade under spelplanen.
 * På lama-sidan syntes sidfotens länkar rakt igenom spelytan, och på
 * snake-sidan låg HUD:en (poäng, HP, liga) utanför skärmens överkant.
 *
 * Buggen syntes ALDRIG i hubben, och hubben är det man testar. Den bet bara
 * den som klickade "öppna i egen flik" — alltså mobilspelaren, som hamnar där
 * via delade länkar.
 *
 * :not(.pulse-bare) är inte kosmetik: utan den krymper vi hubbens iframe.
 * :not(.arcfs-el) heller inte: helskärmsläget sätter position:fixed och ska
 * inte behöva slåss mot en högre specificitet här.
 * ========================================================================= */
body:not(.pulse-bare) .arc2-gamepage{ position:relative; }
body:not(.pulse-bare) .arc2-gamepage .snake-game:not(.arcfs-el),
body:not(.pulse-bare) .arc2-gamepage .lama-game:not(.arcfs-el){
  position:relative; inset:auto;
  height:min(78vh, 780px); min-height:460px;
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:var(--r, 6px);
}
/* overflow bara på snake: lama har egna overflow-regler per brytpunkt
   (mobil = overflow-y:auto) som inte får skrivas över härifrån. */
body:not(.pulse-bare) .arc2-gamepage .snake-game:not(.arcfs-el){ overflow:hidden; }

@media (max-width:700px){
  /* ★ 84 px NEDTILL, INTE 32. Pulse har ett FAST bottendock på mobil (~62 px).
     Med 32 px hamnade snakes styrkors och lamans prestige-knapp BAKOM docken —
     man såg dem, men trycket landade i navigationen och man byttes till en
     annan sida mitt i en runda. Mätt mot docken, inte gissat. */
  body:not(.pulse-bare) .arc2-gamepage{ padding:10px 8px 84px; }
  body:not(.pulse-bare) .arc2-gamepage .snake-game:not(.arcfs-el),
  body:not(.pulse-bare) .arc2-gamepage .lama-game:not(.arcfs-el){
    /* dvh, inte vh: vh räknar med adressfältet framme och ger ~60 px för
       mycket, så spelets nederkant hamnar under skärmkanten på mobil.
       72dvh + rubrik + dock ≈ hela skärmen på en 820 px hög telefon. */
    height:min(72vh, 640px);
    height:min(72dvh, 640px);
    min-height:380px;
  }
}

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

/* ============================================================================
 * VY B — "ETT KABINETT" (2026-08-16, Kentas val). Prefix arcb-.
 * ----------------------------------------------------------------------------
 * ALLT OVANFÖR DEN HÄR RADEN SOM HETER .arc2-* ÄR TVÅ SAKER:
 *
 *   LEVANDE och används fortfarande:
 *     .arc2-lbrow .arc2-lbsep .arc2-note .arc2-retry .arc-plink
 *         → topplisteraderna. Vy B renderar exakt samma markup, med flit, så
 *           radstilen inte behövde skrivas två gånger.
 *     .arc2-gamepage .arc2-back
 *         → snake.php och lama.php använder dem. Rör inte.
 *
 *   LEGACY, dött sedan 2026-08-16, KVAR med flit:
 *     .arc2-hero .arc2-cols .arc2-left .arc2-right .arc2-side .arcm-* .arcme-*
 *     .arc2-grid .arc2-card .arc2-top .arc2-ic .arc2-desc .arc2-play
 *     .arc2-lbp* .arc2-modal*
 *         → den gamla 3-kolumnshubben och modal/iframe-popupen. INGEN vy
 *           renderar dem längre. De ligger kvar därför att husregeln säger att
 *           fungerande kod inte raderas utan Kentas ok — inte för att de
 *           används. Ska de bort: ta bort dem OCH modal-markupen i en egen
 *           städleverans, inte som en sidoeffekt av något annat.
 *     Färgvariablerna --aim/--quicxo/--snake/--lama används inte heller längre.
 *     Vy B kör gråskala + EN accent (husregeln: max två accenter samtidigt,
 *     färg = betydelse). Att åtta spel skulle haft åtta kulörer var hela skälet.
 * ========================================================================= */

/* ★★ [hidden]-GUARD — MÅSTE STÅ FÖRST, RÖR DEN INTE.
   Webbläsarens `[hidden]{display:none}` är en TAGGREGEL med lägst specificitet.
   Varenda klassregel med `display:` slår ut den. Attract-lagret, den nativa
   mounten och spelraden har alla `display:` nedan OCH `hidden` i markupen —
   utan den här raden ligger attract-skärmen kvar ovanpå spelet och man kan
   inte spela. Bet 2026-08-16 på LIVE; testharnesset hade en egen global guard
   i sin inline-CSS och dolde buggen i alla headless-körningar och skärmdumpar.
   Lägger du till ett element som göms med `hidden`: kontrollera att det bor
   inuti .arcade-hub, annars behöver det en egen guard. */
.arcade-hub [hidden]{ display:none !important; }

/* ── Säsongsraden ─────────────────────────────────────────────────────── */
.arcade-hub.arcb{ padding-top:16px; }
.arcb .arcb-ses{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--board-bg); border:1px solid var(--board-line); border-radius:var(--r);
  padding:11px 15px; color:var(--board-ink); margin-bottom:12px;
}
.arcb .arcb-ses-t{ font-size:15px; font-weight:900; letter-spacing:.02em; }
.arcb .arcb-ses-t em{ font-style:normal; color:var(--gold); }
.arcb .arcb-ses-s{ font-size:11.5px; color:var(--board-sub); }
.arcb .arcb-ses-sp{ flex:1 1 auto; }
.arcb .arcb-ses-d{ font-size:11px; color:var(--board-sub); }

/* ── Två kolumner: kabinett + topplista ───────────────────────────────── */
.arcb .arcb-cols{ display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:14px; align-items:start; }
.arcb .arcb-main{ min-width:0; }

/* ── Skärmen ──────────────────────────────────────────────────────────── */
.arcb .arcb-screen{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#05070a; border:1px solid var(--board-line); border-radius:var(--r);
}
/* Nativt mountat spel bestämmer sin egen höjd — annars klipps spelplanen.
   flex-column + order:-1 på raden: markupen har baren SIST (den ligger ovanpå
   iframen som overlay), men i nativt läge ska den stå ÖVERST som en vanlig rad.
   Att flytta den i DOM:en hade brutit overlay-läget för iframe-spelen. */
.arcb .arcb-screen.native{
  aspect-ratio:auto; background:transparent; border-color:transparent; overflow:visible;
  display:flex; flex-direction:column;
}
.arcb .arcb-screen.native .arcb-bar{ order:-1; }
/* Spelets EGEN topplista är en dubblett här — hubben har redan en i högerspalten
   som dessutom följer flikarna Idag/Vecka/Alltid. På egen sida visas den. */
.arcb .arcb-native .tlt-lbbox{ display:none; }
.arcb .arcb-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.arcb .arcb-screen.native::after{ display:none; }

.arcb .arcb-native{ display:block; }
.arcb .arcb-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--bg); }

.arcb .arcb-attract{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:20px; text-align:center; }
.arcb .arcb-att-in{ position:relative; z-index:2; }
.arcb .arcb-att-k{ font-size:10px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--board-sub); }
.arcb .arcb-att-t{
  font-size:clamp(30px,6vw,58px); font-weight:900; letter-spacing:.06em; line-height:1; color:#fff; margin:8px 0 10px;
  animation:arcbGlitch 4.2s steps(1) infinite;
}
.arcb .arcb-att-d{ font-size:12.5px; color:var(--board-sub); max-width:46ch; margin:0 auto; line-height:1.55; }
.arcb .arcb-play{
  margin-top:18px; background:var(--live); color:#04140a;
  font-size:11.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 22px; border-radius:var(--r);
}
.arcb .arcb-play:hover{ filter:brightness(1.07); }
.arcb .arcb-att-lock{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; color:var(--board-sub);
  border:1px dashed var(--board-line); border-radius:var(--r); padding:9px 16px;
}
.arcb .arcb-att-lock b{ color:#fff; }

/* Attract-regn: åtta block som faller bakom titeln. Ren CSS — noll JS-kostnad
   och stannar automatiskt för den som bett om mindre rörelse. */
.arcb .arcb-rain{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.arcb .arcb-rain > i{
  position:absolute; top:-16%; width:34px; height:34px; border-radius:2px;
  background:rgba(255,255,255,.09); box-shadow:inset 0 4px 0 rgba(255,255,255,.07);
  animation:arcbFall linear infinite;
}
.arcb .arcb-rain > i:nth-child(1){ left:6%;  animation-duration:7s;   animation-delay:-1.4s; }
.arcb .arcb-rain > i:nth-child(2){ left:18%; animation-duration:9s;   animation-delay:1.2s; background:rgba(224,167,42,.16); }
.arcb .arcb-rain > i:nth-child(3){ left:31%; animation-duration:6.2s; animation-delay:-3.4s; }
.arcb .arcb-rain > i:nth-child(4){ left:44%; animation-duration:10s;  animation-delay:-6.6s; }
.arcb .arcb-rain > i:nth-child(5){ left:58%; animation-duration:7.6s; animation-delay:3.1s; background:rgba(224,167,42,.16); }
.arcb .arcb-rain > i:nth-child(6){ left:71%; animation-duration:8.4s; animation-delay:-4.8s; }
.arcb .arcb-rain > i:nth-child(7){ left:83%; animation-duration:6.8s; animation-delay:-2.2s; }
.arcb .arcb-rain > i:nth-child(8){ left:93%; animation-duration:9.4s; animation-delay:2.9s; }
@keyframes arcbFall{ to{ transform:translateY(130vh) rotate(90deg); } }
@keyframes arcbGlitch{
  0%,93%{ opacity:1; transform:none; }
  94%{ opacity:.6; transform:translateX(-2px); }
  96%{ opacity:1; transform:translateX(2px); }
  98%{ opacity:.8; transform:none; }
}

/* Raden överst i skärmen när ett spel körs. */
.arcb .arcb-bar{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; gap:6px; height:34px; padding:0 8px 0 12px;
  background:linear-gradient(180deg, rgba(5,7,10,.92), rgba(5,7,10,0));
}
.arcb .arcb-screen.native .arcb-bar{
  position:static; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:9px; box-shadow:var(--shadow);
}
.arcb .arcb-bar-t{ flex:1; font-size:12.5px; font-weight:800; color:#fff; }
.arcb .arcb-screen.native .arcb-bar-t{ color:var(--ink); }
.arcb .arcb-bar-a, .arcb .arcb-bar-x{
  display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-sm);
  color:var(--board-sub); font-size:13px;
}
.arcb .arcb-screen.native .arcb-bar-a, .arcb .arcb-screen.native .arcb-bar-x{ color:var(--dim); }
.arcb .arcb-bar-a:hover, .arcb .arcb-bar-x:hover{ color:#fff; background:rgba(255,255,255,.12); }
.arcb .arcb-screen.native .arcb-bar-a:hover, .arcb .arcb-screen.native .arcb-bar-x:hover{ color:var(--ink); background:var(--inset); }

/* ── Spelremsan ───────────────────────────────────────────────────────── */
.arcb .arcb-striphd{ display:flex; align-items:baseline; gap:9px; margin:14px 0 7px; }
.arcb .arcb-striphd b{ font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.arcb .arcb-striphd small{ font-size:11px; color:var(--dim); }
.arcb .arcb-strip{ display:flex; gap:6px; }
.arcb .arcb-chip{
  flex:1 1 0; min-width:0; display:flex; align-items:center; gap:8px; height:56px; padding:0 10px;
  text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); color:var(--ink);
}
.arcb .arcb-chip:hover{ border-color:var(--line2); }
.arcb .arcb-chip.on{ border-color:var(--accent); background:var(--accent-wash); }
.arcb .arcb-chip > i{ font-size:15px; color:var(--dim); flex:0 0 auto; }
.arcb .arcb-chip.on > i{ color:var(--accent-ink); }
.arcb .arcb-chip .tx{ min-width:0; }
.arcb .arcb-chip b{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.arcb .arcb-chip small{ display:block; font-size:10px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arcb .arcb-chip .lk{ margin-left:auto; font-size:11px; color:var(--faint); flex:0 0 auto; }
/* Öga i stället för hänglås = "låst för alla, men DU får titta". Bara stab
   före släppdatum; se previewGate() i ArcadeController. */
.arcb .arcb-chip .lk.prev{ color:var(--champ); }
.arcb .arcb-chip.las b{ color:var(--dim); }

/* ── Topplistan ───────────────────────────────────────────────────────── */
.arcb .arcb-side{
  position:sticky; top:84px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column; gap:9px;
}
.arcb .arcb-lbhd{ display:flex; flex-direction:column; gap:8px; }
.arcb .arcb-lbhd-t{ font-size:12.5px; font-weight:600; color:var(--dim); }
.arcb .arcb-lbtabs{ display:flex; gap:3px; background:var(--inset); border-radius:var(--r); padding:3px; }
.arcb .arcb-lbtabs button{
  flex:1; font-size:11px; font-weight:800; color:var(--dim); border-radius:var(--r-sm); padding:5px 4px;
}
.arcb .arcb-lbtabs button:hover{ color:var(--ink); }
.arcb .arcb-lbtabs button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.arcb .arcb-lb{ display:flex; flex-direction:column; gap:4px; min-height:120px; }
.arcb .arcb-coin{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 8px; text-align:center; }
.arcb .arcb-coin .c{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:800;
  letter-spacing:.22em; color:var(--ink2);
}
.arcb .arcb-coin .s{ font-size:11.5px; color:var(--dim); max-width:30ch; line-height:1.5; }
.arcb .arcb-gate{ font-size:11px; color:var(--dim); line-height:1.5; border-top:1px solid var(--line); padding-top:9px; }
.arcb .arcb-gate a{ color:var(--accent-ink); font-weight:700; }

/* ── Responsivt ───────────────────────────────────────────────────────── */
@media (max-width:1020px){
  .arcb .arcb-cols{ grid-template-columns:1fr; }
  .arcb .arcb-side{ position:static; }
  .arcb .arcb-strip{ overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
  .arcb .arcb-chip{ flex:0 0 152px; }
}
@media (max-width:560px){
  .arcb .arcb-screen{ aspect-ratio:4/3; }
  .arcb .arcb-ses-d{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .arcb .arcb-rain{ display:none; }
  .arcb .arcb-att-t{ animation:none; }
}