/* ============================================================
   RETRO FX — site-wide arcade/CRT visual layer
   Lightweight effects layered on top of the base theme. Each
   effect is opt-in via a body class (set in JS from passport
   prefs) so users can tune their experience without breaking
   the layout for default visitors.

   Body classes:
     .rm-scanlines   — subtle horizontal CRT scan-line overlay
     .rm-no-fx       — disables every effect in this file
   ============================================================ */

/* ------------------------------------------------------------
   Scanlines overlay — non-interactive, full viewport
   ------------------------------------------------------------ */
.rm-scanlines::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--rm-z-toast, 170);
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.10) 0,
    rgba(0, 0, 0, 0.10) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* Subtle vignette pairs nicely with scanlines, only on dark bg sections */
.rm-scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--rm-z-toast, 170);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .rm-scanlines::before,
  .rm-scanlines::after {
    display: none;
  }
}

.rm-no-fx.rm-scanlines::before,
.rm-no-fx.rm-scanlines::after {
  display: none !important;
}

/* ------------------------------------------------------------
   Pixel cursor on key interactive elements
   16×16 SVG arrow with hard pixel edges. Falls back to default
   pointer if browser refuses the cursor URL.
   ------------------------------------------------------------ */
:root {
  --rm-pixel-cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M1 1h2v2H1zM3 3h2v2H3zM5 5h2v2H5zM7 7h2v2H7zM9 9h2v2H9zM11 11h2v2h-2zM3 1h1v1H3zM5 3h1v1H5zM7 5h1v1H7zM9 7h1v1H9zM11 9h1v1h-1zM2 2h1v1H2zM4 4h1v1H4zM6 6h1v1H6zM8 8h1v1H8zM10 10h1v1h-1zM4 2h1v1H4zM6 4h1v1H6zM8 6h1v1H8zM10 8h1v1h-1zM12 10h1v1h-1z' fill='%23ffffff' stroke='%23000000' stroke-width='0.6'/></svg>") 1 1, pointer;
}

body:not(.rm-no-fx) .rm-btn,
body:not(.rm-no-fx) [data-rm-affiliate],
body:not(.rm-no-fx) .rm-buy-strip__card,
body:not(.rm-no-fx) .rm-sticky-bar__cta,
body:not(.rm-no-fx) .rm-platform-tile,
body:not(.rm-no-fx) .rm-game-card,
body:not(.rm-no-fx) .rm-cf-card__buy {
  cursor: var(--rm-pixel-cursor);
}

@media (max-width: 768px) {
  /* Touch devices — pixel cursor is wasted, drop it */
  body .rm-btn,
  body [data-rm-affiliate],
  body .rm-buy-strip__card,
  body .rm-sticky-bar__cta,
  body .rm-platform-tile,
  body .rm-game-card,
  body .rm-cf-card__buy {
    cursor: pointer;
  }
}

/* ------------------------------------------------------------
   CRT glow tint — applies to console / product images for the
   "old arcade screen" feel. Used by adding the class
   .rm-crt-img to any img wrapper.
   ------------------------------------------------------------ */
.rm-crt-img {
  position: relative;
  isolation: isolate;
  border-radius: 6px;
  overflow: hidden;
}

.rm-crt-img::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 55%
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: overlay;
  z-index: 2;
}

.rm-no-fx .rm-crt-img::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .rm-crt-img::after {
    display: none;
  }
}

/* ------------------------------------------------------------
   Boot sequence overlay — first visit only
   Pure visual — content lives underneath and is fully usable
   the moment JS removes [hidden]. Skipped for bots/reduced-motion.
   ------------------------------------------------------------ */
.rm-boot {
  position: fixed;
  inset: 0;
  z-index: 9000; /* below skip-link, above everything else */
  background: #06070d;
  color: #00ff7f; /* monochrome green CRT */
  font-family: 'Press Start 2P', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 0 clamp(20px, 6vw, 80px);
  opacity: 1;
  transition: opacity 0.32s ease;
  pointer-events: none; /* never block clicks */
  text-shadow: 0 0 6px rgba(0, 255, 127, 0.55);
}

.rm-boot[hidden] { display: none !important; }

.rm-boot.is-fading { opacity: 0; }

.rm-boot__line {
  white-space: nowrap;
  overflow: hidden;
}

.rm-boot__cursor {
  display: inline-block;
  width: 0.6em;
  background: currentColor;
  animation: rm-boot-blink 0.6s steps(2) infinite;
}

@keyframes rm-boot-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-boot, .rm-boot__cursor { display: none !important; }
}

/* ------------------------------------------------------------
   Tape-loading skeleton — replacement for "Loading..." text
   ------------------------------------------------------------ */
.rm-tape-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border: 2px solid var(--rm-border, #d8dbe6);
  border-radius: 8px;
  background: #fff;
  font-family: 'JetBrains Mono', 'Press Start 2P', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #1a1d2e;
  text-transform: uppercase;
}

.rm-tape-loader__bar {
  width: 200px;
  height: 8px;
  background: #f1f3f8;
  border: 1px solid #c8ccd9;
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.rm-tape-loader__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  background: repeating-linear-gradient(
    90deg,
    #f47e1e 0,
    #f47e1e 6px,
    #2a4a9e 6px,
    #2a4a9e 12px
  );
  animation: rm-tape-roll 1.4s linear infinite;
}

@keyframes rm-tape-roll {
  from { transform: translateX(-100%); }
  to   { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
  .rm-tape-loader__bar::before {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }
}

/* ------------------------------------------------------------
   GAME OVER — 404 page
   ------------------------------------------------------------ */
.rm-gameover {
  background: radial-gradient(ellipse at center, #1a1d2e 0%, #06070d 100%);
  color: #fff;
  padding: 80px 20px 60px;
  text-align: center;
  border-radius: 14px;
  border: 3px solid #0d0f1a;
  box-shadow: 0 0 0 2px #f47e1e inset, 8px 8px 0 rgba(13, 15, 26, 0.4);
  position: relative;
  overflow: hidden;
}

.rm-gameover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03) 0,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.rm-gameover__title {
  margin: 0 0 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  letter-spacing: 0.12em;
  color: #ff0040;
  text-shadow:
    0 0 12px rgba(255, 0, 64, 0.45),
    4px 4px 0 #06070d;
  animation: rm-gameover-flicker 2.4s ease-in-out infinite;
}

@keyframes rm-gameover-flicker {
  0%, 100%   { opacity: 1; }
  47%        { opacity: 1; }
  48%        { opacity: 0.82; }
  49%        { opacity: 1; }
  78%        { opacity: 1; }
  79%        { opacity: 0.65; }
  80%        { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-gameover__title { animation: none; }
}

.rm-gameover__code {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: rgba(255, 0, 64, 0.12);
  border: 1px solid rgba(255, 0, 64, 0.45);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #ff647e;
  border-radius: 3px;
}

.rm-gameover__lead {
  margin: 0 auto 28px;
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.rm-gameover__continue {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 26px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.82rem;
  color: #f47e1e;
  letter-spacing: 0.1em;
}

.rm-gameover__continue-num {
  color: #fff;
  animation: rm-coin-blink 1s steps(2) infinite;
}

@keyframes rm-coin-blink {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-gameover__continue-num { animation: none; }
}

.rm-gameover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.rm-gameover__search {
  margin: 26px auto 0;
  max-width: 460px;
}

.rm-gameover__search .rm-search-form__input {
  width: 100%;
}