/* ============================================================================
 * FORRE.NU · ARKADENS MOBILLAGER — helskärm + touchytor. Prefix arc-/arcfs-.
 * Delad av alla arkadspel. Ingen speldesign bor här, bara skalet.
 * ============================================================================
 *
 * VAR LIGGER VAD
 *   pulse-arcade-mobile.js   ★ växlar klasserna här. .arcfs-el sätts på spelets
 *                            rot i BÅDA helskärmslägena (riktig + iOS-fallback),
 *                            så den här filen behöver EN regeluppsättning.
 *   pulse-tilted.css m.fl.   spelens egna helskärmslayouter. De ärver ytan
 *                            härifrån och bestämmer själva hur de fyller den.
 *
 * DESIGNBESLUT
 *   Helskärmen är MÖRK i alla spel, oavsett tema. Ett arkadkabinett som står i
 *   ett ljust rum ska bli svart när man kliver in i det — och en vit yta bakom
 *   ett mörkt bräde på en telefon i mörker är rent bländande.
 *
 * FALLGROPAR
 *   - 100vh LJUGER på mobil: den räknar med adressfältet framme och ger en yta
 *     som är ~60 px för hög, så knappraden hamnar under skärmkanten. 100dvh är
 *     rätt värde; vh-raden står kvar först som fallback för äldre webbläsare.
 *   - env(safe-area-inset-*) är 0 om inte viewport-fit=cover står i metataggen.
 *     JS:en sätter den TILLFÄLLIGT vid helskärm — se filhuvudet i JS:en.
 *   - touch-action MÅSTE stå här, inte bara i JS. Webbläsaren beslutar om
 *     scroll redan vid touchstart och läser CSS först.
 *   - :fullscreen får INTE stå i samma väljarlista som .arcfs-el. En webbläsare
 *     som inte känner igen pseudoklassen kastar HELA regeln, inklusive
 *     fallbacken — och då blir iOS-läget ostylat. Därför klassen i JS.
 * ========================================================================= */

/* ── Sidan bakom helskärmen ───────────────────────────────────────────── */
html.arcfs-noscroll,
body.arcfs-noscroll{
  overflow:hidden !important;
  overscroll-behavior:none;
}

/* ── Helskärmsytan (riktig helskärm OCH iOS-fallback) ─────────────────── */
.arcfs-el{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  height:100vh !important;
  height:100dvh !important;
  background:#05070a !important;
  color:var(--board-ink, #fff);
  overflow:hidden !important;
  overscroll-behavior:none;
  display:flex !important;
  flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}
/* Ingen ram, ingen skugga, inga rundade hörn i helskärm — kabinettet ÄR rummet. */
.arcfs-el,
.arcfs-el > *{ border-radius:0; }

/* Backdropen bakom en riktig helskärm är vit i vissa webbläsare. */
.arcfs-el::backdrop{ background:#05070a; }

/* ── Helskärmsknappen ─────────────────────────────────────────────────── */
.arc-fsbtn{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:var(--r-sm, 4px);
  display:grid; place-items:center;
  color:var(--ink2); background:var(--inset); border:1px solid var(--line);
  font-size:13px; line-height:1;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.arc-fsbtn:hover{ color:var(--ink); }
.arc-fsbtn.on{ color:#fff; background:var(--accent); border-color:var(--accent); }
/* Inne i helskärmen ligger knappen på mörk botten och måste byta ton. */
.arcfs-el .arc-fsbtn{
  color:#cfd8e4; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14);
}
.arcfs-el .arc-fsbtn.on{ color:#fff; background:var(--accent); border-color:var(--accent); }

/* ★ PÅ PEKSKÄRM FÅR KNAPPEN EN ETIKETT.
   En ensam ikon i ett HUD fullt av ikoner är osynlig, och helskärmen är det
   enskilt viktigaste på en telefon: utan den ligger kontrollerna under
   vikningen. Etiketten kostar 60 px bredd på en yta där HUD:en ändå har
   utrymme, och den byter text i helskärm så knappen berättar vad NÄSTA tryck
   gör — inte vilket läge man är i.
   Scopad till .tlt-hud/.slp-hud med flit: snakes HUD-rad är redan full och
   lama har knappen i en trång statrad. */
@media (pointer:coarse){
  .tlt-root .tlt-hud .arc-fsbtn,
  .slp-root .slp-hud .arc-fsbtn{
    width:auto; height:34px; padding:0 11px;
    display:inline-flex; align-items:center; gap:6px;
  }
  .tlt-root .tlt-hud .arc-fsbtn::after,
  .slp-root .slp-hud .arc-fsbtn::after{
    content:'Helskärm';
    font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  }
  .tlt-root.arcfs-el .tlt-hud .arc-fsbtn::after,
  .slp-root.arcfs-el .slp-hud .arc-fsbtn::after{ content:'Stäng'; }
}

/* ── Touchytor: gemensamma regler för ALLA spels kontroller ───────────── */
/* touch-action:none på knappen, inte på hela spelet: overlayerna (bussen,
   game over, topplistan) måste fortfarande gå att scrolla med fingret. */
.arc-tpad button,
.tlt-touch button,
.slp-touch button{
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* .is-held sätts av holdRepeat() vid nedtryck och tas bort vid släpp.
   :active räcker inte: den släpps av webbläsaren så fort fingret glider
   utanför knappen, och då ser en knapp som fortfarande repeterar osläppt ut. */
.arc-tpad button.is-held,
.tlt-touch button.is-held,
.slp-touch button.is-held{
  transform:translateY(1px);
  filter:brightness(1.25);
}

/* Spelplanen får aldrig scrolla sidan under fingret. */
.arc-nopan{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* ── Hjälpremsa: "svep för att styra" ─────────────────────────────────── */
/* Visas EN gång per spelare och enhet. En hjälptext som ligger kvar för alltid
   blir dekoration som ögat slutar se — och den täcker brädet. */
.arc-hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:4; pointer-events:none;
  display:flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:20px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(3px);
  color:#e8edf4; font-size:11.5px; font-weight:600; line-height:1.3;
  white-space:nowrap;
  animation:arcHint 5.2s ease forwards;
}
.arc-hint i{ font-size:13px; color:var(--gold, #e0a72a); }
@keyframes arcHint{
  0%{ opacity:0; transform:translate(-50%, 8px); }
  10%{ opacity:1; transform:translate(-50%, 0); }
  78%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%, -6px); }
}
@media (prefers-reduced-motion:reduce){
  .arc-hint{ animation:none; opacity:1; }
}