/* ============================================================================
 * FORRE.NU · SLIPSTREAM — skalet runt banan. Prefix slp-.
 * Aktivt tema: forre_pulse (LJUST default, var(--r) 6px, var(--shadow)).
 *
 * VAR LIGGER VAD
 *   pulse-slipstream.js   bygger ALL markup här inifrån (template()). Byter du
 *                         en klass här måste du byta den där också.
 *   pulse-arcade.css      hubben. Topplisteraderna (.arc2-lbrow/.arc2-note)
 *                         lånas därifrån och dupliceras INTE här.
 *
 * DESIGNBESLUT
 *   Banan är MÖRK i båda lägena — kabinettet står i ett ljust rum, precis som
 *   TILTED. Skalet runt följer temat.
 *
 * FALLGROP
 *   .slp-cols har DEFINIT höjd. resize() räknar canvasstorleken ur förälderns
 *   box; får föräldern sin höjd av canvasen krymper banan en pixel per bildruta.
 * ========================================================================= */

/* ★★ [hidden]-GUARD — MÅSTE STÅ FÖRST, RÖR DEN INTE.
   `[hidden]{display:none}` är en taggregel med lägst specificitet och slås ut
   av varje klassregel med `display:`. Overlayerna och sköldmärket göms med
   hidden-attributet från JS. Bet 2026-08-16 i arkadhubben: attract-lagret låg
   kvar ovanpå spelet på live medan alla tester var gröna. */
.slp-root [hidden]{ display:none !important; }

.slp-root{ display:block; width:100%; --slp-line:var(--board-line); color:var(--board-ink); }

/* ── HUD ──────────────────────────────────────────────────────────────── */
.slp-root .slp-hud{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:7px 11px; color:var(--ink);
}
.slp-root .slp-tabs{ display:flex; gap:2px; background:var(--inset); border-radius:var(--r); padding:2px; }
.slp-root .slp-tabs button{
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-sm); color:var(--dim); line-height:1.25;
}
.slp-root .slp-tabs button:hover{ color:var(--ink); }
.slp-root .slp-tabs button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.slp-root[data-mode="zb"] .slp-tabs button.on{ color:var(--elite); }
.slp-root .slp-stat{ display:inline-flex; align-items:baseline; gap:6px; }
.slp-root .slp-stat i{
  font-style:normal; font-size:9px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);
}
.slp-root .slp-stat b{ font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; }
.slp-root .slp-shield{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  color:var(--accent-ink); background:var(--accent-wash); border-radius:var(--r-sm); padding:3px 8px;
}
.slp-root .slp-sp{ flex:1 1 auto; }
.slp-root .slp-ic{
  width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--ink2); background:var(--inset); border:1px solid var(--line);
}
.slp-root .slp-ic:hover{ color:var(--ink); }

/* Banprogress — den enda dekorationen som bär information: hur långt kvar. */
.slp-root .slp-progwrap{
  height:4px; margin:8px 0 10px; border-radius:3px; background:var(--inset); overflow:hidden;
}
.slp-root .slp-prog{ display:block; height:100%; width:0; background:var(--gold); transition:width .12s linear; }

/* ── Två kolumner. HÖJDEN ÄR AVSIKTLIG — se filhuvudet. ───────────────── */
.slp-root .slp-cols{
  display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:12px;
  /* ★ LÅG OCH BRED MED FLIT. En sidscrollande runner behöver längd framåt,
     inte höjd: rails ligger på 168 och det högsta guldet på ~320 världsenheter,
     så allt över ~430 är tom himmel. Med 520 px blev spelet inklämt i nedre
     tredjedelen av en halvtom ruta. Ändrar du talet: kontrollera i
     ForreSlipstream._debug() att rails och pads fortfarande syns i bild. */
  height:min(52vh, 420px); align-items:stretch;
}
.slp-root .slp-stage{ display:flex; flex-direction:column; gap:9px; min-height:0; min-width:0; }
.slp-root .slp-canvaswrap{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  background:var(--board-bg); border:1px solid var(--slp-line); border-radius:var(--r);
}
.slp-root .slp-canvas{ display:block; }

.slp-root .slp-side{ display:flex; flex-direction:column; gap:9px; min-height:0; }
.slp-root .slp-box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:9px 11px; color:var(--ink);
}
.slp-root .slp-box .h{
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:7px;
}
.slp-root .slp-note{ font-size:11px; color:var(--ink2); line-height:1.5; margin-top:7px; }
.slp-root[data-mode="zb"] .build-only{ display:none; }
.slp-root[data-mode="build"] .zb-only{ display:none; }
.slp-root .slp-bar{ height:6px; border-radius:3px; background:var(--inset); overflow:hidden; }
.slp-root .slp-bar > span{ display:block; height:100%; width:100%; background:var(--accent); }
.slp-root .slp-shocks{ display:flex; align-items:baseline; gap:7px; }
.slp-root .slp-shocks b{ font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--champ); }
.slp-root .slp-shocks span{ font-size:11px; color:var(--dim); }
.slp-root .slp-pb{ font-size:19px; font-weight:900; font-variant-numeric:tabular-nums; }
.slp-root .slp-lbbox{ flex:1 1 auto; min-height:0; overflow:auto; }
.slp-root .slp-lb{ display:flex; flex-direction:column; gap:3px; }
.slp-root .slp-coin{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 6px; text-align:center; }
.slp-root .slp-coin .c{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; font-weight:800;
  letter-spacing:.2em; color:var(--ink2);
}
.slp-root .slp-coin .s{ font-size:10.5px; color:var(--dim); line-height:1.5; }

/* ── Toasts: NEDTILL. Spelaren och hindren bor i övre halvan. ─────────── */
.slp-root .slp-toasts{
  position:absolute; bottom:12px; left:0; right:0; z-index:2;
  display:flex; flex-direction:column-reverse; align-items:center; gap:4px; pointer-events:none;
}
.slp-root .slp-toast{
  font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 10px; border-radius:20px; background:rgba(0,0,0,.55); color:var(--board-sub);
}
.slp-root .slp-toast.gold{ color:var(--gold); }
.slp-root .slp-toast.live{ color:var(--live); }
.slp-root .slp-toast.accent{ color:var(--accent-ink); }

/* ── Overlays ─────────────────────────────────────────────────────────── */
.slp-root .slp-ov{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:rgba(5,7,10,.86); padding:16px; text-align:center;
  /* 'safe center' — se samma kommentar i pulse-tilted.css. Game over-rutan är
     högre än en liggande telefon och ett vanligt center kapar toppen. */
  align-content:safe center;
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.slp-root .slp-ov-in{ width:100%; max-width:460px; }
.slp-root .slp-ov-k{
  font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--board-sub);
}
.slp-root .slp-ov-t{ font-size:24px; font-weight:900; letter-spacing:-.01em; margin:6px 0; color:#fff; }
.slp-root .slp-ov-t.win{ color:var(--gold); letter-spacing:.04em; }
.slp-root .slp-ov-s{ font-size:12.5px; color:var(--board-sub); line-height:1.55; margin:0 0 4px; }
.slp-root .slp-ov-s.gold{ color:var(--gold); font-weight:700; }
.slp-root .slp-ov-s.err{ color:var(--danger); }
.slp-root .slp-ov-s a{ color:#fff; text-decoration:underline; }
.slp-root .slp-final{
  font-size:40px; font-weight:900; line-height:1.05; color:#fff;
  font-variant-numeric:tabular-nums; margin:4px 0 6px;
}
.slp-root .slp-ov-row{
  display:flex; justify-content:center; gap:16px; font-size:11.5px; color:var(--board-sub); margin-bottom:10px;
}
.slp-root .slp-keys2{ list-style:none; margin:12px auto 4px; max-width:330px; text-align:left; }
.slp-root .slp-keys2 li{ font-size:11.5px; color:var(--board-sub); line-height:1.75; }
.slp-root .slp-keys2 b{ color:#fff; }
.slp-root .slp-cta{
  margin-top:12px; background:var(--accent); color:#fff; font-weight:800; font-size:13px;
  padding:10px 24px; border-radius:var(--r);
}
.slp-root .slp-cta:hover{ background:var(--accent-ink); }

/* ============================================================================
 * TOUCH — omgjord 2026-08-19 tillsammans med TILTED. Samma motiv:
 * `click` på knappraden gav ett hopp per tryck utan hopphöjd, och banan
 * scrollade under fingret. Nu går knapparna via holdRepeat() (nedtryck OCH
 * släpp) och banan har ett gestlager där tryck uppe = hopp, tryck nere = glid.
 *
 * ★ HOPPET ÄR DUBBELT SÅ BRETT som de andra två. Det är inte kosmetik: hoppet
 *   trycks hundratals gånger per runda, glid ett tiotal, shockwave tre. Lika
 *   stora knappar hade gett lika stor felmarginal åt den man aldrig använder.
 * ========================================================================= */
.slp-root .slp-gest{ position:absolute; inset:0; z-index:1; background:transparent; }

.slp-root .slp-touch{ display:none; gap:8px; }
.slp-root .slp-touch button{
  flex:1 1 0; height:60px; border-radius:var(--r); background:var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink2); font-size:23px;
  display:grid; place-items:center; line-height:1;
  transition:filter .06s, transform .06s;
}
.slp-root .slp-touch button.jp{ flex:2 1 0; color:var(--accent-ink); border-color:var(--accent); }
.slp-root .slp-touch button.sh{ flex:0 0 74px; color:var(--champ); }
.slp-root .slp-touch button:active{ background:var(--inset); }

.slp-root .slp-keys{ margin-top:9px; font-size:11px; color:var(--faint); text-align:center; }
.slp-root .slp-keys b{ color:var(--dim); font-weight:700; }
.slp-root .slp-tkeys{ display:none; margin-top:8px; font-size:11px; color:var(--faint); text-align:center; }

@media (pointer:coarse){
  .slp-root .slp-touch{ display:flex; }
  .slp-root .slp-keys{ display:none; }
  .slp-root .slp-tkeys{ display:block; }
}

@media (max-width:900px){
  .slp-root .slp-cols{ grid-template-columns:minmax(0,1fr); height:auto; }
  /* Banan först. Sidoboxarna står före stage i DOM:en och tryckte ner spelet
     under vikningen — samma bug som TILTED hade. */
  .slp-root .slp-stage{ order:1; }
  .slp-root .slp-side{ order:2; flex-direction:row; flex-wrap:wrap; }
  /* Se motsvarande kommentar i pulse-tilted.css: mätt mot var knappraden
     hamnar, inte satt på höft. Runnern behöver mindre höjd än stackaren —
     banan är bred, inte hög. */
  .slp-root .slp-canvaswrap{
    min-height:0;
    height:min(40vh, 380px);
    height:min(40dvh, 380px);
  }
  .slp-root .slp-side > .slp-box{ flex:1 1 150px; }
  .slp-root .slp-lbbox{ flex-basis:100%; max-height:220px; }
  .slp-root .slp-hud{ gap:8px; padding:6px 9px; }
}

@media (max-width:420px){
  /* HUD:en har fyra stat-rutor. På en smal telefon radbryter de till tre rader
     och äter banan. Farten och guldet räcker under rundan; tiden och avståndet
     till stormen står ändå i game over-rutan. */
  .slp-root .slp-hud .slp-stat:nth-of-type(3){ display:none; }
  .slp-root .slp-touch button{ height:54px; font-size:21px; }
  .slp-root .slp-touch button.sh{ flex:0 0 62px; }
}

/* ============================================================================
 * ★ HELSKÄRM. .arcfs-el sätts av pulse-arcade-mobile.js i båda lägena.
 *   Banan tar allt som blir över; sidoboxarna och topplistan är läsning.
 * ========================================================================= */
.slp-root.arcfs-el{ padding:0; }
.slp-root.arcfs-el .slp-hud{
  flex:0 0 auto; margin:0; border-radius:0; border-width:0 0 1px;
  background:#0e131a; border-color:rgba(255,255,255,.10); color:#eef1f5;
  padding:7px 10px;
}
.slp-root.arcfs-el .slp-hud .slp-tabs{ background:rgba(255,255,255,.07); }
.slp-root.arcfs-el .slp-hud .slp-tabs button{ color:#9fb0c4; }
.slp-root.arcfs-el .slp-hud .slp-tabs button.on{ background:rgba(255,255,255,.14); color:#fff; box-shadow:none; }
.slp-root.arcfs-el .slp-hud .slp-ic{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#cfd8e4; }
.slp-root.arcfs-el .slp-stat i{ color:#8fa0b4; }
.slp-root.arcfs-el .slp-stat b{ color:#fff; }
.slp-root.arcfs-el .slp-progwrap{ flex:0 0 auto; margin:0; }

.slp-root.arcfs-el .slp-cols{
  flex:1 1 auto; min-height:0; height:auto;
  grid-template-columns:minmax(0,1fr); gap:0;
}
.slp-root.arcfs-el .slp-side,
.slp-root.arcfs-el .slp-keys,
.slp-root.arcfs-el .slp-tkeys{ display:none !important; }
.slp-root.arcfs-el .slp-stage{
  flex:1 1 auto; min-height:0; gap:8px; padding:8px;
}
.slp-root.arcfs-el .slp-canvaswrap{
  flex:1 1 auto; min-height:0; max-width:none; border-radius:0;
  border-color:rgba(255,255,255,.10);
}
.slp-root.arcfs-el .slp-touch{ flex:0 0 auto; }
.slp-root.arcfs-el .slp-touch button{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13);
  color:#e3e9f1; box-shadow:none;
}
.slp-root.arcfs-el .slp-touch button.jp{ color:#7cc4ff; border-color:rgba(124,196,255,.45); }
.slp-root.arcfs-el .slp-touch button.sh{ color:#c79cff; }
.slp-root.arcfs-el .slp-touch button:active,
.slp-root.arcfs-el .slp-touch button.is-held{ background:rgba(255,255,255,.16); }

/* Desktop-helskärm: mus och tangentbord finns, knappraden hör inte hemma där. */
@media (pointer:fine){
  .slp-root.arcfs-el .slp-touch{ display:none; }
}
@media (pointer:coarse) and (orientation:landscape){
  .slp-root.arcfs-el .slp-touch button{ height:48px; }
}

/* Egen sida (hubben har sin egen ram) */
.slp-page{ width:100%; max-width:var(--shell-w); margin:0 auto; padding:16px 16px 46px; }
@media (max-width:700px){
  .slp-page{ padding:10px 10px 84px; }
  .slp-page .slp-back{ margin-bottom:7px; font-size:12px; }
  .slp-page .slp-head{ margin-bottom:8px; gap:8px; }
  .slp-page .slp-head h1{ font-size:20px; }
  .slp-page .slp-head .sub{ display:none; }
  .slp-page .slp-head .ses{ margin-left:auto; font-size:9px; padding:2px 7px; }
}
.slp-page .slp-back{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--dim); margin-bottom:12px;
}
.slp-page .slp-back:hover{ color:var(--accent-ink); }
.slp-page .slp-head{ display:flex; align-items:baseline; gap:11px; margin-bottom:12px; flex-wrap:wrap; }
.slp-page .slp-head h1{ font-size:26px; font-weight:900; letter-spacing:.02em; }
.slp-page .slp-head .sub{ font-size:12.5px; color:var(--dim); }
.slp-page .slp-head .ses{
  margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); background:color-mix(in srgb, var(--gold) 14%, transparent);
  border-radius:var(--r-sm); padding:3px 9px;
}
/* Förhandsbandet — syns bara för stab före släppdatum. */
.slp-page .slp-preview{
  display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:9px 13px;
  border-radius:var(--r); border:1px dashed color-mix(in srgb, var(--champ) 45%, var(--line));
  background:color-mix(in srgb, var(--champ) 8%, var(--card)); color:var(--ink2); font-size:12px;
}
.slp-page .slp-preview b{ color:var(--ink); }
.slp-page .slp-preview i{ color:var(--champ); }