/* ============================================================================
 * FORRE.NU · TILTED — skalet runt spelplanen. Prefix tlt-.
 * Aktivt tema: forre_pulse (LJUST default, var(--r) 6px, var(--shadow)).
 *
 * VAR LIGGER VAD
 *   pulse-tilted.js   bygger all markup här inifrån (template()). Ändrar du en
 *                     klass här måste du ändra den där också — det finns ingen
 *                     PHP-vy som renderar spelytan.
 *   pulse-arcade.css  hubben. Topplisteraderna (.arc2-lbrow/.arc2-note) lånas
 *                     därifrån och ska INTE dupliceras här.
 *
 * DESIGNBESLUT
 *   Spelplanen är MÖRK i båda lägena — den är ett arkadkabinett som står i ett
 *   ljust rum. Därför var(--board-*), samma signaturton som scoreboarden.
 *   Skalet runt (sidoboxar, knappar) följer temat och byter med det.
 *
 * FALLGROP
 *   .tlt-cols har DEFINIT höjd med flit. resize() i JS räknar cellstorleken ur
 *   canvasens förälder — får den sin höjd av canvasen uppstår en loop där
 *   brädet krymper en pixel per frame. Rör inte height-raden utan att läsa
 *   resize() först.
 * ========================================================================= */

/* ★★ [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:`. `.tlt-slow` (inline-flex) och overlayerna göms
   med `hidden`-attributet från JS. Bet 2026-08-16: samma klass av bugg sänkte
   arkadhubben på live medan alla headless-tester var gröna, för testsidan hade
   en egen global guard som produktionen saknade. */
.tlt-root [hidden]{ display:none !important; }

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

/* ── HUD-rad ───────────────────────────────────────────────────────────── */
.tlt-root .tlt-hud{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:7px 11px; margin-bottom:10px; color:var(--ink);
}
.tlt-root .tlt-tabs{ display:flex; gap:2px; background:var(--inset); border-radius:var(--r); padding:2px; }
.tlt-root .tlt-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;
}
.tlt-root .tlt-tabs button:hover{ color:var(--ink); }
.tlt-root .tlt-tabs button.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.tlt-root[data-mode="zb"] .tlt-tabs button.on{ color:var(--elite); }
.tlt-root .tlt-zone{ font-size:11.5px; color:var(--dim); }
.tlt-root .tlt-zone b{ color:var(--gold); font-variant-numeric:tabular-nums; }
.tlt-root .tlt-slow{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  color:var(--live); background:var(--live-wash); border-radius:var(--r-sm); padding:3px 8px;
}
.tlt-root .tlt-sp{ flex:1 1 auto; }
.tlt-root .tlt-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);
}
.tlt-root .tlt-ic:hover{ color:var(--ink); }

/* ── Tre kolumner. HÖJDEN ÄR AVSIKTLIG — se filhuvudet. ───────────────── */
.tlt-root .tlt-cols{
  display:grid; grid-template-columns:186px minmax(0,1fr) 220px; gap:12px;
  height:min(72vh, 660px); align-items:stretch;
}
.tlt-root .tlt-side{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.tlt-root .tlt-box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:9px 11px; color:var(--ink);
}
.tlt-root .tlt-box .h{
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:7px;
}
.tlt-root .tlt-box p{ font-size:11.5px; color:var(--ink2); line-height:1.5; }

/* Build/Zero Build byter vilka boxar som finns — inte bara hur de ser ut. */
.tlt-root[data-mode="zb"] .tlt-build{ display:none; }
.tlt-root[data-mode="build"] .tlt-zbnote{ display:none; }

/* ── Loadout ──────────────────────────────────────────────────────────── */
.tlt-root .tlt-slots{ display:flex; flex-direction:column; gap:5px; }
.tlt-root .tlt-slot{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:6px 7px; border-radius:var(--r-sm); background:var(--inset);
  border:1px solid transparent; color:var(--ink);
}
.tlt-root .tlt-slot:not(.tom):hover{ border-color:var(--accent); }
.tlt-root .tlt-slot .k{
  width:15px; height:15px; flex:0 0 auto; display:grid; place-items:center; border-radius:2px;
  font-size:8.5px; font-weight:800; background:var(--line2); color:var(--ink2);
}
.tlt-root .tlt-slot i{ font-size:13px; color:var(--ink2); width:15px; text-align:center; }
.tlt-root .tlt-slot b{ font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tlt-root .tlt-slot.tom{ opacity:.42; }
.tlt-root .tlt-slot.tom b{ font-weight:500; color:var(--dim); }

/* ── Nästa-bitar ──────────────────────────────────────────────────────── */
.tlt-root .tlt-next{ display:flex; gap:6px; }
.tlt-root .tlt-pc{
  flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px;
  padding:5px; border-radius:var(--r-sm); background:var(--inset); aspect-ratio:1;
}
.tlt-root .tlt-pc > i{ aspect-ratio:1; border-radius:1px; background:transparent; }
.tlt-root .tlt-pc > i.f{ background:var(--dim); }

/* ── Spelplan ─────────────────────────────────────────────────────────── */
.tlt-root .tlt-stage{ display:flex; flex-direction:column; gap:9px; min-height:0; min-width:0; }
/* max-width är INTE kosmetik: utan den blir kabinettets ram 400 px bred på var
   sida om ett 330 px brädet, och spelplanen ser bortglömd ut mitt i en tom yta.
   Bredden får INTE komma från innehållet (se filhuvudet) — därför max-width +
   width:100%, aldrig fit-content. */
.tlt-root .tlt-canvaswrap{
  position:relative; flex:1 1 auto; min-height:0;
  width:100%; max-width:430px; margin:0 auto;
  display:grid; place-items:center;
  background:var(--board-bg); border:1px solid var(--tlt-line); border-radius:var(--r);
  overflow:hidden;
}
/* box-shadow, inte border: en border hade ändrat elementets box och därmed
   cellstorleken som resize() räknar fram ur föräldern. */
.tlt-root .tlt-canvas{ display:block; border-radius:var(--r-sm); box-shadow:0 0 0 1px var(--tlt-line); }

/* NEDTILL, inte upptill. Bitarna spawnar i de två översta raderna — en toast
   där döljer exakt det man behöver se mest. Längst ner ligger den redan lagda
   stacken, som inte är tidskritisk att läsa. */
.tlt-root .tlt-toasts{
  position:absolute; bottom:10px; left:0; right:0; z-index:2;
  display:flex; flex-direction:column-reverse; align-items:center; gap:4px; pointer-events:none;
}
.tlt-root .tlt-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);
  backdrop-filter:blur(2px);
}
.tlt-root .tlt-toast.gold{ color:var(--gold); }
.tlt-root .tlt-toast.live{ color:var(--live); }
.tlt-root .tlt-toast.champ{ color:var(--champ); }
.tlt-root .tlt-toast.accent{ color:var(--accent-ink); }

/* ── Overlays (bussen, paus, picker, game over) ───────────────────────── */
.tlt-root .tlt-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' och inte bara 'center'. En liggande telefon i helskärm ger
     ~380 px höjd; bussens fyra droppzoner är högre än så och ett vanligt
     center KAPAR TOPPEN utan scrollmöjlighet — rubriken och första zonen
     hamnar ovanför boxens överkant och går inte att nå. 'safe' faller
     tillbaka på start när innehållet inte får plats. */
  align-content:safe center;
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.tlt-root .tlt-ov[hidden]{ display:none !important; }
.tlt-root .tlt-ov-in{ width:100%; max-width:440px; }
.tlt-root .tlt-ov-k{
  font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--board-sub);
}
.tlt-root .tlt-ov-t{ font-size:24px; font-weight:900; letter-spacing:-.01em; margin:6px 0 6px; color:#fff; }
.tlt-root .tlt-ov-t.win{ color:var(--gold); letter-spacing:.04em; }
.tlt-root .tlt-ov-s{ font-size:12.5px; color:var(--board-sub); line-height:1.55; margin:0 0 4px; }
.tlt-root .tlt-ov-s.gold{ color:var(--gold); font-weight:700; }
.tlt-root .tlt-ov-s.err{ color:var(--danger); }
.tlt-root .tlt-ov-s a{ color:#fff; text-decoration:underline; }
.tlt-root .tlt-final{
  font-size:44px; font-weight:900; line-height:1.05; color:#fff;
  font-variant-numeric:tabular-nums; margin:4px 0 6px;
}
.tlt-root .tlt-ov-row{
  display:flex; justify-content:center; gap:16px; font-size:11.5px; color:var(--board-sub); margin-bottom:12px;
}
.tlt-root .tlt-cta{
  margin-top:12px; background:var(--accent); color:#fff; font-weight:800; font-size:13px;
  padding:10px 22px; border-radius:var(--r);
}
.tlt-root .tlt-cta:hover{ background:var(--accent-ink); }

.tlt-root .tlt-bus{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:14px; }
.tlt-root .tlt-drop{
  position:relative; text-align:left; padding:9px 11px; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid var(--tlt-line); color:#fff;
}
.tlt-root .tlt-drop:hover{ border-color:var(--gold); background:rgba(224,167,42,.12); }
.tlt-root .tlt-drop .x{ float:right; font-size:11.5px; font-weight:900; color:var(--gold); }
.tlt-root .tlt-drop b{ display:block; font-size:12px; font-weight:800; }
.tlt-root .tlt-drop small{ display:block; font-size:10.5px; color:var(--board-sub); line-height:1.4; margin-top:2px; }

.tlt-root .tlt-pick{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; }
.tlt-root .tlt-pick button{ padding:0; border-radius:var(--r-sm); border:1px solid var(--tlt-line); }
.tlt-root .tlt-pick button:hover{ border-color:var(--accent); }
.tlt-root .tlt-pick .tlt-pc{ background:rgba(255,255,255,.05); }
.tlt-root .tlt-pick .tlt-pc > i.f{ background:var(--board-sub); }

/* ── Höger kolumn ─────────────────────────────────────────────────────── */
.tlt-root .tlt-stat{ text-align:right; }
.tlt-root .tlt-stat .l,
.tlt-root .tlt-3 .l{
  font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.tlt-root .tlt-stat .v{ font-size:27px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; }
.tlt-root .tlt-stat .v.sm,
.tlt-root .tlt-3 .v{ font-size:17px; font-weight:900; line-height:1.2; font-variant-numeric:tabular-nums; }
.tlt-root .tlt-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; }
.tlt-root .tlt-lbbox{ flex:1 1 auto; min-height:0; overflow:auto; }
.tlt-root .tlt-lb{ display:flex; flex-direction:column; gap:3px; }
.tlt-root .tlt-coin{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:18px 6px; text-align:center; }
.tlt-root .tlt-coin .c{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:800;
  letter-spacing:.2em; color:var(--ink2);
}
.tlt-root .tlt-coin .s{ font-size:11px; color:var(--dim); line-height:1.5; }

/* ============================================================================
 * TOUCH — omgjord 2026-08-19. Läs det här innan du "förenklar" något nedan.
 * ============================================================================
 * FÖRE: fem lika stora knappar på en rad, ordningen ← ↻ ↓ ⇊ →, kopplade på
 *       `click`. Tummen som siktade på → träffade ↻, ett tryck gav exakt ett
 *       steg (ingen repetition) och sidan scrollade under fingret. Det gick
 *       knappt att spela — Kentas ord, och han hade rätt.
 * EFTER: två kluster. Styrkors till VÄNSTER (← ↓ →), handling till HÖGER
 *       (rotera, släpp) — samma uppdelning som varje handkontroll. Knapparna
 *       går via holdRepeat() i pulse-arcade-mobile.js: nedtryck ger direkt
 *       utslag och HÅLL repeterar. Gester på brädet är det primära; knapparna
 *       finns för den som hellre trycker.
 *
 * ★ 46px VAR FÖR LITET. Apples och Googles golv för en träffyta är 44px, och
 *   det är ett GOLV för en länk man trycker på en gång — inte för en knapp man
 *   håller inne under en tävlingsrunda med tummen i rörelse. 56px är mätt mot
 *   en tumme, inte mot en riktlinje. Sänk den inte för att vinna 20 px höjd.
 * ========================================================================= */

/* Gestlagret: genomskinligt, ligger MELLAN canvasen och overlayerna.
   z-index 1 är hela poängen — toasts (2) och overlays (3) måste ligga över,
   annars äter gestlagret trycken på "Spela igen". */
.tlt-root .tlt-gest{ position:absolute; inset:0; z-index:1; background:transparent; }

.tlt-root .tlt-touch{ display:none; gap:10px; align-items:stretch; }
.tlt-root .tlt-tpad{ display:flex; gap:8px; flex:1 1 auto; }
.tlt-root .tlt-tpad.rt{ flex:0 0 auto; }
.tlt-root .tlt-touch button{
  flex:1 1 0; min-width:56px; height:56px;
  border-radius:var(--r); background:var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow);
  color:var(--ink2); font-size:22px; line-height:1;
  display:grid; place-items:center;
  transition:filter .06s, transform .06s;
}
.tlt-root .tlt-tpad.rt button{ width:64px; flex:0 0 64px; }
/* Släpp-knappen är den enda som är oåterkallelig — den ska synas som det. */
.tlt-root .tlt-touch button.dr{ color:var(--accent-ink); border-color:var(--accent); }
.tlt-root .tlt-touch button:active{ background:var(--inset); }

/* Kompakt loadout under brädet. Samma markup som sidoboxen (paintItems()
   fyller båda), men horisontell och ikondriven — namnet får inte plats och
   behövs inte när siffran 1-5 redan står på knappen. */
.tlt-root .tlt-mitems{ display:none; gap:6px; }
.tlt-root .tlt-mitems .tlt-slot{
  flex:1 1 0; flex-direction:column; gap:2px; text-align:center;
  padding:7px 3px; min-height:52px; justify-content:center;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.tlt-root .tlt-mitems .tlt-slot i{ font-size:17px; width:auto; }
.tlt-root .tlt-mitems .tlt-slot b{ font-size:8.5px; letter-spacing:.02em; max-width:100%; }
.tlt-root .tlt-mitems .tlt-slot .k{ display:none; }
.tlt-root[data-mode="zb"] .tlt-mitems{ display:none !important; }   /* ZB har inga items. Punkt. */

/* Poängen i HUD:en — bara där högerspalten inte finns. */
.tlt-root .tlt-mscore{
  display:none; font-size:17px; font-weight:900; font-variant-numeric:tabular-nums;
  color:var(--ink); letter-spacing:-.01em;
}

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

/* Pekskärm: knappar och gest-text in, tangentbordstexten ut. */
@media (pointer:coarse){
  .tlt-root .tlt-keys{ display:none; }
  .tlt-root .tlt-tkeys{ display:block; }
  .tlt-root .tlt-touch{ display:flex; }
  .tlt-root[data-mode="build"] .tlt-mitems{ display:flex; }
}

/* ── Mobil / smala ytor ───────────────────────────────────────────────── */
@media (max-width:900px){
  .tlt-root .tlt-cols{ grid-template-columns:minmax(0,1fr); height:auto; }
  /* ★ ORDNINGEN. Sidoboxarna står först i DOM:en (aside före stage) och
     tryckte ner brädet under vikningen på en telefon — man fick scrolla för
     att se det man kom för. Brädet först, resten under. */
  .tlt-root .tlt-stage{ order:1; }
  .tlt-root .tlt-side{ order:2; flex-direction:row; flex-wrap:wrap; }
  .tlt-root .tlt-side.tlt-right{ order:3; }
  /* ★ MÄTT, INTE GISSAT. 52vh lät rimligt och var fel: på en 820 px hög
     telefon blir det 426 px bräde, och då hamnar knappraden UNDER vikningen
     bakom mobilens bottendock — spelaren såg spelet men inte kontrollerna och
     trodde att de saknades. Räknat baklänges på en 820 px-skärm:
       topbar+shoutbar 82 · rubrik 94 · HUD 44 · loadout 52 · knappar 56
       · gest-text 16 · dock 62 · luft 24  ⇒ 430 px kvar till brädet.
     46dvh = 377 px och lämnar marginal även när shoutbaren har två rader.
     Höjer du den här siffran: mät var knappradens underkant hamnar. */
  .tlt-root .tlt-canvaswrap{
    min-height:0; max-width:none;
    height:min(46vh, 430px);
    height:min(46dvh, 430px);
  }
  .tlt-root .tlt-side > .tlt-box{ flex:1 1 150px; }
  .tlt-root .tlt-lbbox{ flex-basis:100%; max-height:230px; }
  .tlt-root .tlt-stat{ text-align:left; }
  .tlt-root .tlt-slots{ flex-direction:row; }
  .tlt-root .tlt-slot{ flex:1; flex-direction:column; gap:3px; text-align:center; padding:6px 4px; }
  .tlt-root .tlt-slot b{ font-size:9.5px; }
  /* Loadout-sidoboxen är dubbelt arbete på mobil — .tlt-mitems sitter redan
     under brädet där tummen är. Nästa-boxen får vara kvar; den läses, inte trycks. */
  .tlt-root .tlt-build{ display:none; }
  .tlt-root .tlt-hud{ gap:8px; padding:6px 9px; }
  .tlt-root .tlt-mscore{ display:inline-block; }
  .tlt-root .tlt-zone{ font-size:11px; }
}

/* Riktigt smala telefoner: HUD:en får inte radbryta till tre rader. */
@media (max-width:420px){
  .tlt-root .tlt-tabs button{ padding:5px 8px; font-size:10.5px; }
  .tlt-root .tlt-zone{ display:none; }          /* zonklockan syns ändå som toast på brädet */
  .tlt-root .tlt-touch button{ min-width:48px; font-size:20px; }
  .tlt-root .tlt-tpad.rt button{ width:56px; flex:0 0 56px; }
}

/* ============================================================================
 * ★ HELSKÄRM. .arcfs-el sätts av pulse-arcade-mobile.js i BÅDA lägena
 *   (riktig helskärm och iOS-fallback) — se pulse-arcade-mobile.css.
 *   Här bestämmer TILTED bara hur den fyller ytan den fått.
 *
 *   Regeln är enkel: brädet tar allt som blir över. HUD:en och kontrollerna
 *   har fast höjd, allt annat försvinner. Sidoboxarna och topplistan är
 *   läsning — och man läser inte topplistan mitt i en runda.
 * ========================================================================= */
.tlt-root.arcfs-el{ padding:0; gap:0; }
.tlt-root.arcfs-el .tlt-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;
}
.tlt-root.arcfs-el .tlt-hud .tlt-tabs{ background:rgba(255,255,255,.07); }
.tlt-root.arcfs-el .tlt-hud .tlt-tabs button{ color:#9fb0c4; }
.tlt-root.arcfs-el .tlt-hud .tlt-tabs button.on{ background:rgba(255,255,255,.14); color:#fff; box-shadow:none; }
.tlt-root.arcfs-el .tlt-hud .tlt-ic{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#cfd8e4;
}
.tlt-root.arcfs-el .tlt-mscore{ display:inline-block; color:#fff; }
.tlt-root.arcfs-el .tlt-zone{ color:#9fb0c4; }

.tlt-root.arcfs-el .tlt-cols{
  flex:1 1 auto; min-height:0; height:auto;
  grid-template-columns:minmax(0,1fr); gap:0; padding:0;
}
/* Läsytorna bort. De finns kvar i DOM:en och kommer tillbaka vid avslut. */
.tlt-root.arcfs-el .tlt-side,
.tlt-root.arcfs-el .tlt-keys,
.tlt-root.arcfs-el .tlt-tkeys{ display:none !important; }

.tlt-root.arcfs-el .tlt-stage{
  flex:1 1 auto; min-height:0; gap:8px; padding:8px;
}
.tlt-root.arcfs-el .tlt-canvaswrap{
  flex:1 1 auto; min-height:0; max-width:none; border-radius:0;
  border-color:rgba(255,255,255,.10);
}
.tlt-root.arcfs-el .tlt-touch{ flex:0 0 auto; }
.tlt-root.arcfs-el .tlt-mitems{ flex:0 0 auto; }
/* Kontrollerna på mörk botten. Ett vitt kort mot svart bräde bländar i mörker. */
.tlt-root.arcfs-el .tlt-touch button,
.tlt-root.arcfs-el .tlt-mitems .tlt-slot{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13);
  color:#e3e9f1; box-shadow:none;
}
.tlt-root.arcfs-el .tlt-touch button.dr{ color:#7cc4ff; border-color:rgba(124,196,255,.45); }
.tlt-root.arcfs-el .tlt-touch button:active,
.tlt-root.arcfs-el .tlt-touch button.is-held{ background:rgba(255,255,255,.16); }
.tlt-root.arcfs-el .tlt-mitems .tlt-slot.tom{ opacity:.3; }

/* ★ HELSKÄRM PÅ DESKTOP är inte samma problem som på mobil. Där finns mus och
   tangentbord, och en 56px knapprad mitt på en 27-tumsskärm ser ut som ett
   misstag. Kontrollerna hör till pekskärmen — inget annat ändras. */
@media (pointer:fine){
  .tlt-root.arcfs-el .tlt-touch,
  .tlt-root.arcfs-el .tlt-mitems{ display:none; }
  .tlt-root.arcfs-el .tlt-canvaswrap{ max-width:min(46vh, 560px); }
}

/* Liggande telefon: brädet är HÖGT och smalt, kontrollerna hör till sidorna. */
@media (pointer:coarse) and (orientation:landscape){
  .tlt-root.arcfs-el .tlt-stage{ gap:6px; }
  .tlt-root.arcfs-el .tlt-touch{ gap:8px; }
  .tlt-root.arcfs-el .tlt-touch button{ height:46px; }
  .tlt-root.arcfs-el .tlt-mitems .tlt-slot{ min-height:40px; padding:4px 3px; }
  .tlt-root.arcfs-el .tlt-mitems .tlt-slot b{ display:none; }
  .tlt-root.arcfs-el .tlt-mitems .tlt-slot i{ font-size:15px; }
}

/* Sidan runt spelet (bara egen sida — hubben har sin egen ram) */
.tlt-page{ width:100%; max-width:var(--shell-w); margin:0 auto; padding:16px 16px 46px; }
.tlt-page .tlt-back{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--dim); margin-bottom:12px;
}
.tlt-page .tlt-back:hover{ color:var(--accent-ink); }
.tlt-page .tlt-head{ display:flex; align-items:baseline; gap:11px; margin-bottom:12px; flex-wrap:wrap; }
.tlt-page .tlt-head h1{ font-size:26px; font-weight:900; letter-spacing:.02em; }
.tlt-page .tlt-head .sub{ font-size:12.5px; color:var(--dim); }
.tlt-page .tlt-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;
}

/* ★ SIDHUVUDET PÅ MOBIL. Tillbaka-länk + 26px-rubrik + säljtext + säsongsband
   åt 150 px av 820 — en femtedel av skärmen till text man läser en gång.
   Rubriken finns kvar (man ska veta vilket spel man är i), säljtexten inte.
   Bottenmarginalen är plats för mobilens fasta dock; utan den ligger
   gest-texten under den. */
@media (max-width:700px){
  .tlt-page{ padding:10px 10px 84px; }
  .tlt-page .tlt-back{ margin-bottom:7px; font-size:12px; }
  .tlt-page .tlt-head{ margin-bottom:8px; gap:8px; }
  .tlt-page .tlt-head h1{ font-size:20px; }
  .tlt-page .tlt-head .sub{ display:none; }
  .tlt-page .tlt-head .ses{ margin-left:auto; font-size:9px; padding:2px 7px; }
}