/* ===============================================
   ARCADE BOARD – full, ren fil
   =============================================== */

/* === GRID === */
.arcade-wrap {
  --gap: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
  padding: 20px;
  background:
    radial-gradient(circle at 30% -20%, rgba(0,255,200,.14), transparent 60%),
    radial-gradient(circle at 95% 15%, rgba(255,0,255,.10), transparent 65%),
    #0a0f14;
}

/* === FILTER === */
.arcade-filter{
  display:flex; gap:10px; justify-content:center;
  padding:12px 0; position:sticky; top:0; z-index:100;
  background:rgba(0,0,0,.6); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.filter-btn{
  appearance:none; cursor:pointer;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); color:#fff;
  padding:6px 14px; border-radius:999px;
  font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-transform:uppercase; letter-spacing:.5px;
  transition:all .15s ease;
}
.filter-btn.is-active{ border-color:rgba(0,255,200,.4); }

/* === CABINET === */
.cabinet{
  position:relative; overflow:hidden; border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    #0f1220;
  box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  transform: perspective(900px)
             rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
             translate(var(--tx,0), var(--ty,0));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}

/* === MARQUEE === */
.cabinet__marquee{
  height:48px; display:grid; place-items:center;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(0,0,0,.7), rgba(255,255,255,.06) 55%, rgba(0,0,0,.55)),
    linear-gradient(90deg,#7c3aed 0%, #06b6d4 50%, #f472b6 100%);
}
.marquee__title{
  color:#eaf6ff; font-weight:900; letter-spacing:1.2px; font-size:18px;
  text-shadow:0 0 8px rgba(255,255,255,.5);
}

/* === SCREEN === */
.cabinet__screen{
  position:relative; margin: 10px 12px; min-height: 220px;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:#000;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.7),
              inset 0 18px 30px rgba(0,0,0,.6),
              inset 0 -12px 24px rgba(0,0,0,.55);
}
.cabinet__screen img{ width:100%; height:100%; object-fit:cover; display:block; }

/* CRT – alltid rörlig (ursprung) */
.cabinet__screen::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:screen; opacity:.94;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.2) 0 2px, rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,60,120,0.08) 0 1px, rgba(0,255,180,0.08) 1px 2px, rgba(120,200,255,0.06) 2px 3px, transparent 3px 4px),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0));
  background-size: 100% 4px, 4px 100%, 100% 230%;
  background-position: 0 0, 0 0, 0 -140%;
  will-change: background-position, opacity;
  animation: crtRoll 5.8s linear infinite, crtFlicker 1.6s steps(2,end) infinite;
}
@keyframes crtRoll   { 0%{background-position:0 0,0 0,0 -140%} 100%{background-position:0 0,0 0,0 140%} }
@keyframes crtFlicker{ 0%,100%{opacity:.94} 50%{opacity:.88} }

/* INSERT COIN */
.screen-prompt{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:inline-block; white-space:nowrap;
  padding:8px 14px; border-radius:999px; z-index:4;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-weight:800; letter-spacing:1.4px;
  text-shadow:0 0 8px rgba(0,255,200,.6);
  animation: coinBlink 1.6s steps(2,end) infinite;
}
.cabinet.has-played .screen-prompt{ display:none; }
@keyframes coinBlink{0%,49%{opacity:1}50%,100%{opacity:.45}}

/* === CONTROL PANEL (joystick + 3 röda knappar) === */
.cabinet__tagline{
  position:relative; display:block;
  margin: 10px 12px 16px; padding: 18px 18px 16px 76px; /* plats för joystick */
  border-radius:16px; color:#e6f5ff; font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(160% 100% at 50% -40%, rgba(0,0,0,.35), transparent 60%),
    #131a27;
  box-shadow:
    inset 0 8px 18px rgba(0,0,0,.45),
    inset 0 -8px 18px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.35);

  /* Tre röda knappar (färg + highlight + yttre glöd) */
  background-image:
    radial-gradient(circle at calc(100% - 110px) 22px, #ff4757 0 14px, #8f0d19 14px 16px, transparent 16px),
    radial-gradient(22px 14px at calc(100% - 110px) 14px, rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    radial-gradient(circle at calc(100% - 110px) 22px, rgba(255,71,87,.35) 0 18px, transparent 18px),

    radial-gradient(circle at calc(100% - 66px) 22px,  #ff4757 0 14px, #8f0d19 14px 16px, transparent 16px),
    radial-gradient(22px 14px at calc(100% - 66px) 14px,  rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    radial-gradient(circle at calc(100% - 66px) 22px,  rgba(255,71,87,.35) 0 18px, transparent 18px),

    radial-gradient(circle at calc(100% - 22px) 22px,  #ff4757 0 14px, #8f0d19 14px 16px, transparent 16px),
    radial-gradient(22px 14px at calc(100% - 22px) 14px,  rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    radial-gradient(circle at calc(100% - 22px) 22px,  rgba(255,71,87,.35) 0 18px, transparent 18px);
  background-repeat:no-repeat;
  background-size:
    34px 34px, 28px 18px, 38px 38px,
    34px 34px, 28px 18px, 38px 38px,
    34px 34px, 28px 18px, 38px 38px;
  background-position:
    calc(100% - 122px) 8px, calc(100% - 122px) 12px, calc(100% - 122px) 6px,
    calc(100% - 74px)  8px, calc(100% - 74px)  12px, calc(100% - 74px)  6px,
    calc(100% - 26px)  8px, calc(100% - 26px)  12px, calc(100% - 26px)  6px;
  box-shadow:
    inset 0 8px 18px rgba(0,0,0,.45),
    inset 0 -8px 18px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.35),
    0 0 18px rgba(255,71,87,.22);
}

/* Joystick */
.cabinet__tagline::before{
  content:""; position:absolute; left:24px; top:-6px;
  width:34px; height:34px; border-radius:50%;
  background:
    radial-gradient(32px 20px at 35% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 60% 65%, #ff305f, #a1022b 65%);
  box-shadow: 0 12px 18px rgba(0,0,0,.6), 0 0 14px rgba(255,48,95,.35);
  z-index:2;
}
.cabinet__tagline::after{
  content:""; position:absolute; left:38px; top:18px;
  width:10px; height:38px; border-radius:7px;
  background: linear-gradient(180deg,#3a3a3a,#151515);
  box-shadow: inset 0 -2px 2px rgba(255,255,255,.2), inset 0 2px 2px rgba(0,0,0,.6);
}

/* Modal (överst) */
.arcade-modal { display:none; }
.arcade-modal[aria-hidden="false"]{ display:block; }
.arcade-modal__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter: blur(8px);
  z-index:2147483000;
}
.arcade-modal__panel{
  position:fixed; left:50%; top:10%; transform:translateX(-50%);
  width:min(820px,92vw); max-height:80vh; overflow:auto;
  background:rgba(17,24,39,.95); color:#fff; border-radius:16px;
  padding:24px 64px 24px 24px; /* extra höger-padding så X får plats */
  z-index:2147483001;
}
.arcade-modal__close{
  position:absolute; right:12px; top:12px; font-size:28px; line-height:1;
  background:none; color:#fff; border:0; cursor:pointer;
  z-index:10; /* säkra att X ligger över progress */
}

/* Respons */
@media (max-width:480px){
  .cabinet__screen{ min-height: 180px; }
  .cabinet__tagline{ padding-left:64px; }
  .cabinet__tagline::after{ left:32px; height:34px; top:16px; }
  .cabinet__tagline::before{ left:20px; width:30px; height:30px; top:-4px; }
}

/* === CRT: softer RGB triad + keep animation === */
.arcade-wrap .cabinet .cabinet__screen::after{
  opacity: .88 !important;
  mix-blend-mode: screen !important;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.20) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg,
      rgba(255,60,120,0.035) 0 1px,
      rgba(0,255,180,0.035) 1px 2px,
      rgba(120,200,255,0.03)  2px 3px,
      transparent 3px 6px),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0)) !important;
  background-size: 100% 4px, 6px 100%, 100% 230% !important;
  background-position: 0 0, 0 0, 0 -140% !important;
  animation: crtRoll 5.8s linear infinite, crtFlicker 1.6s steps(2,end) infinite !important;
  will-change: background-position, opacity !important;
}

/* --- Disable old ::after roll to avoid double overlays --- */
.cabinet__screen::after { content: none !important; }

/* --- New CRT layers (element-based) --- */
.cabinet__screen { position: relative; }

/* statiska linjer + RGB-triad */
.cabinet__screen .crt-lines{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen;
  opacity: var(--crt-opacity, .55);
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg,
      rgba(255,60,120,0.030) 0 1px,
      rgba(0,255,180,0.030) 1px 2px,
      rgba(120,200,255,0.026) 2px 3px,
      transparent 3px 6px);
  background-size: 100% 4px, 6px 100%;
}

/* --- Snabb, sömlös CRT-roll --- */
.arcade-wrap { 
  --crt-opacity: .65;          /* styrka (0.35–0.75 brukar funka bra) */
  --crt-speed:   3.5s;         /* hastighet på rullning – kortare = snabbare */
  --crt-band:    68%;          /* tjocklek på den ljusa "svep"-baren */
}

.cabinet__screen .crt-roll,
.cabinet__screen .crt-roll2{
  position:absolute; left:0; right:0; height:100%;
  pointer-events:none; mix-blend-mode:screen;
  opacity: var(--crt-opacity);
  background: linear-gradient(180deg,
    transparent calc((100% - var(--crt-band)) / 2),
    rgba(255,255,255,0.28) 50%,
    transparent calc(50% + var(--crt-band) / 2)
  );
  will-change: transform;
  animation: crt-roll-move var(--crt-speed) linear infinite;
}
.cabinet__screen .crt-roll  { top:-100%; }
.cabinet__screen .crt-roll2 { top:   0%; }

@keyframes crt-roll-move {
  to { transform: translateY(100%); }
}

/* === Två diagonala röda knappar (om du använder dessa) === */
body .arcade-wrap .cabinet .cabinet__tagline{
  padding-right: 110px;
  position: relative;
}

/* Nya “fysiska” knappar (om de injiceras i JS) */
.cabinet__tagline .arc-btn{
  position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 10px 18px rgba(0,0,0,.45),
    0 0 14px rgba(255,71,87,.25),
    inset 0 2px 4px rgba(255,255,255,.15),
    inset 0 -4px 8px rgba(0,0,0,.45);
  background:
    radial-gradient(20px 12px at 38% 32%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 60% 65%, #ff4757 0 70%, #8f0d19 72% 100%);
}
.cabinet__tagline .arc-btn.btn-1{ right: 26px; top: 10px; }
.cabinet__tagline .arc-btn.btn-2{ right: 50px; top: 34px; }
@media (max-width: 480px){
  .cabinet__tagline{ padding-right: 96px; }
  .cabinet__tagline .arc-btn{ width:20px; height:20px; }
  .cabinet__tagline .arc-btn.btn-1{ right: 22px; top: 10px; }
  .cabinet__tagline .arc-btn.btn-2{ right: 56px; top: 32px; }
}

/* === Stegvis visning – UI === */
.arcade-modal__content { position: relative; padding-bottom: 68px; }
.arcade-step { display: none; }
.arcade-progress{
  position: sticky; top: 0;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 8px 12px;
  margin: -24px -64px 16px -24px; /* full bredd i panelen (matchar panelpadding) */
  font-weight: 700; letter-spacing: .5px;
  z-index: 1; /* under X */
}
.arcade-nav{
  position: sticky; bottom: 0;
  display: flex; justify-content: space-between; gap: 10px;
  background: rgba(17,24,39,0.92);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 12px;
  margin: 24px -64px -24px -24px;
  backdrop-filter: blur(6px);
}
.arcade-nav .arc-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: #eaf6ff;
  font-weight: 800; letter-spacing: .6px;
  border-radius: 10px; padding: 10px 14px;
  cursor: pointer;
}
.arcade-nav .arc-btn[disabled]{ opacity: .45; cursor: not-allowed; }
/* Nollställ ALLA gamla knapp-lager på panelen (tvinga bort blobben) */
body .arcade-wrap .cabinet .cabinet__tagline{
  background-image: none !important;      /* radera ev. nedärvd stack */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(160% 100% at 50% -40%, rgba(0,0,0,.35), transparent 60%),
    #131a27 !important;                    /* endast panelens bakgrund */
  padding-right: 110px !important;
  position: relative;
}
/* ===== Marquee LEDs (failsafe) + sweep ===== */
.cabinet__marquee{
  position: relative !important;
  overflow: hidden !important;
}

/* se till att titeln ligger över effekterna */
.cabinet__marquee .marquee__title{
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 0 8px rgba(255,255,255,.55) !important;
}

/* LED-rader som rullar – transform-baserad (sömlös) */
.cabinet__marquee::before{
  content: "" !important;
  position: absolute !important;
  top: 0; left: -34px;           /* börja lite utanför för sömlös loop */
  width: calc(100% + 68px);      /* extra bredd så det aldrig blinkar i kanten */
  height: 100%;
  z-index: 1 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: .9 !important;

  /* två LED-rader som upprepas horisontellt */
  background:
    radial-gradient(6px 6px at 10% 50%, #00ffc8, transparent 60%) repeat-x,
    radial-gradient(6px 6px at 20% 50%, #ff00ff, transparent 60%) repeat-x !important;
  background-size: 34px 12px, 34px 12px !important;
  background-position: 0 8px, 17px 30px !important;

  will-change: transform;
  animation: marquee-leds-move 2.2s linear infinite !important;
}

/* transform: flytta hela pseudo-elementet exakt ett LED-steg */
@keyframes marquee-leds-move {
  to { transform: translateX(-34px); }
}


/* mjuk “sweep”-glans över panelen */
.cabinet__marquee::after{
  content: "" !important;
  position: absolute !important;
  inset: -40% -10% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.18), rgba(255,255,255,0) 25%) !important;
  mix-blend-mode: screen !important;
  filter: blur(10px) !important;
  opacity: .35 !important;
  animation: marquee-sweep 6s linear infinite !important;
}

@keyframes marquee-leds {
  to { background-position: 34px 8px, 51px 30px; }
}
@keyframes marquee-sweep { to { transform: rotate(360deg); } }
/* ==== Svepbar filterrad på mobil ==== */
@media (max-width: 560px){
  .arcade-filter{
    /* horisontell scroll istället för radbrytning */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 10px 12px;
    scrollbar-width: none;             /* Firefox – göm scrollbar */
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
  .arcade-filter::-webkit-scrollbar{ display: none; } /* WebKit – göm scrollbar */

  .filter-btn{
    flex: 0 0 auto;      /* knapparna håller sin storlek */
    white-space: nowrap; /* inga radbrytningar i knappar */
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Valfritt: “edge fade”-skimmer som antyder att det går att svepa */
  .arcade-filter::before,
  .arcade-filter::after{
    content:"";
    position: sticky;
    top: 0;
    width: 16px;
    pointer-events: none;
    z-index: 1;
  }
  .arcade-filter::before{
    left: 0;
    align-self: stretch;
    background: linear-gradient(to right, rgba(10,15,20,1), rgba(10,15,20,0));
  }
  .arcade-filter::after{
    left: auto; right: 0;
    align-self: stretch;
    background: linear-gradient(to left, rgba(10,15,20,1), rgba(10,15,20,0));
  }

  /* (valfritt) “snäpp” när man sveper mellan knappar */
  .arcade-filter{ scroll-snap-type: x proximity; }
  .filter-btn{ scroll-snap-align: start; }
}