/* ============================================================
   ATM PRODUCTION$ — Media Platform Design System
   Deep cinema dark + neon cyan/violet/magenta brand
   ============================================================ */

@import url('/assets/fonts/fonts.css');

:root {
  --cyan:       #00CFFF;
  --violet:     #9B3FE8;
  --magenta:    #FF4FD8;
  --bg-0:       #010108;
  --bg-1:       #06060f;
  --bg-2:       #0a0a1c;
  --panel:      rgba(10, 10, 28, 0.82);
  --panel-edge: rgba(255, 255, 255, 0.08);
  --text:       #EAF2FF;
  --text-dim:   #7a8ab0;
  --text-mid:   #a8b4d0;
  --good:       #2EE6A8;
  --warn:       #FFC24D;
  --bad:        #FF5470;
  --live:       #FF2D55;
  --grad:       linear-gradient(100deg, var(--cyan) 0%, var(--violet) 55%, var(--magenta) 100%);
  --grad-soft:  linear-gradient(100deg, rgba(0,207,255,.3), rgba(155,63,232,.3), rgba(255,79,216,.3));
  --radius:     12px;
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- starfield ---- */
#starfield {
  position: fixed; top:0;right:0;bottom:0;left:0; z-index: 0; pointer-events: none;
}

/* ---- vignette edge darkening ---- */
.vignette::before {
  content: ''; position: fixed; top:0;right:0;bottom:0;left:0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 110% at 50% 50%, transparent 40%, rgba(1,1,8,.7) 100%);
}

/* ---- typography ---- */
.display  { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.neon-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 14px rgba(0,207,255,.4)) drop-shadow(0 0 28px rgba(255,79,216,.2));
}
.eyebrow {
  font-family: var(--font-display); font-size: 10px; letter-spacing: .46em;
  text-transform: uppercase; color: var(--text-dim);
}

/* ---- ATM live logo ---- */
.atmlogo {
  position: relative; width: var(--s); height: var(--s);
  perspective: 900px; flex: none; isolation: isolate;
}
.atmlogo-float {
  position: absolute; top:0;right:0;bottom:0;left:0; transform-style: preserve-3d;
  animation: atm-bob 7s ease-in-out infinite, atm-ignite 1.5s cubic-bezier(.2,.8,.2,1) both;
}
.atmlogo-tilt {
  position: absolute; top:0;right:0;bottom:0;left:0; transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2,.7,.2,1); will-change: transform;
}
.atmlogo-layer { position: absolute; top:0;right:0;bottom:0;left:0; background: var(--logo-soft) center/contain no-repeat; }
.atmlogo-halo {
  filter: blur(calc(var(--s) * .11)) saturate(1.6) brightness(1.35);
  transform: translateZ(-70px) scale(1.18); opacity: .5;
  animation: atm-halo 5.6s ease-in-out infinite;
}
.atmlogo-glow {
  filter: blur(calc(var(--s) * .035)) saturate(1.5) brightness(1.25);
  transform: translateZ(-32px) scale(1.05); opacity: .8;
  animation: atm-breathe 4.4s ease-in-out infinite;
}
.atmlogo-base {
  width: 100%; height: 100%; object-fit: contain; position: absolute; top:0;right:0;bottom:0;left:0;
  transform: translateZ(0);
  filter: drop-shadow(0 calc(var(--s)*.012) calc(var(--s)*.03) rgba(0,0,0,.55));
}
.atmlogo-sweep {
  -webkit-mask: var(--logo-soft) center/contain no-repeat; mask: var(--logo-soft) center/contain no-repeat;
  background: linear-gradient(115deg,
    transparent 38%, rgba(180,235,255,.0) 44%,
    rgba(220,245,255,.9) 50%, rgba(255,255,255,.95) 51%,
    rgba(220,245,255,.0) 58%, transparent 64%);
  background-size: 260% 260%; background-position: 200% 0;
  mix-blend-mode: screen; transform: translateZ(18px); opacity: 0;
  animation: atm-sweep 7.5s ease-in-out infinite;
}
.atmlogo-spark { position: absolute; top:-8%;right:-8%;bottom:-8%;left:-8%; z-index: 1; pointer-events: none; transform: translateZ(8px); }

@keyframes atm-bob     { 0%,100% { transform: translateY(0) } 50% { transform: translateY(calc(var(--s) * -.028)) } }
@keyframes atm-halo    { 0%,100% { opacity: .38; transform: translateZ(-70px) scale(1.14) } 50% { opacity: .62; transform: translateZ(-70px) scale(1.22) } }
@keyframes atm-breathe { 0%,100% { opacity: .6; transform: translateZ(-32px) scale(1.03) } 50% { opacity: .95; transform: translateZ(-32px) scale(1.08) } }
@keyframes atm-sweep {
  0%  { background-position: 200% 0; opacity: 0 }
  6%  { opacity: .95 }
  22% { background-position: -60% 0; opacity: .95 }
  30%, 100% { background-position: -60% 0; opacity: 0 }
}
@keyframes atm-ignite {
  0%   { opacity: 0; filter: brightness(2.6) saturate(.2) }
  7%   { opacity: 1 }
  11%  { opacity: .15 }
  16%  { opacity: 1 }
  21%  { opacity: .45 }
  27%  { opacity: 1; filter: brightness(1.7) saturate(1.1) }
  100% { opacity: 1; filter: brightness(1) saturate(1) }
}
@media (prefers-reduced-motion: reduce) {
  .atmlogo-float, .atmlogo-halo, .atmlogo-glow, .atmlogo-sweep { animation: none !important; }
  .atmlogo-sweep { opacity: 0; } .atmlogo-halo { opacity: .45; }
}

/* ---- panels / glass ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.panel-glow { position: relative; }
.panel-glow::before {
  content: ''; position: absolute; top:-1px;right:-1px;bottom:-1px;left:-1px; border-radius: inherit; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .45; pointer-events: none;
}

/* ---- buttons ---- */
.btn {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--panel-edge); border-radius: 10px;
  background: rgba(255,255,255,.05); color: var(--text);
  padding: 12px 22px; cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  user-select: none; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.btn:hover  { transform: translateY(-1px); background: rgba(255,255,255,.1); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary {
  background: var(--grad); border: none; color: #040418;
  box-shadow: 0 6px 30px rgba(155,63,232,.4), 0 0 16px rgba(0,207,255,.3);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 40px rgba(155,63,232,.45); }
.btn-ghost { background: rgba(255,255,255,.0); border-color: rgba(142,155,192,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-sm { padding: 8px 16px; font-size: 11px; border-radius: 8px; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 999; opacity: 0; pointer-events: none; transition: all .3s ease;
  background: rgba(10,10,32,.95); border: 1px solid var(--panel-edge); border-radius: 12px;
  padding: 13px 22px; font-size: 14px; backdrop-filter: blur(12px);
  box-shadow: 0 14px 44px rgba(0,0,0,.7);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ============================================================
   TV REMOTE / D-PAD FOCUS RING  (tvnav.js)
   High-visibility brand cyan/violet ring, couch-readable.
   tvnav.js adds .tv-focused to the focused element and mirrors the
   hover-only reveals (overlay/title/play glyph) on focus.
   ============================================================ */

html.tv-nav-active .tv-focused {
  outline: none !important;
  position: relative;
  z-index: 41;                              /* above the hover-preview panel (z40) */
  border-radius: 12px;
  box-shadow:
    0 0 0 4px var(--bg-0),                  /* dark gap so ring reads on any art */
    0 0 0 8px var(--cyan),                  /* primary brand ring */
    0 0 22px 8px rgba(0, 207, 255, 0.55),   /* cyan glow */
    0 0 46px 14px rgba(155, 63, 232, 0.45); /* violet halo */
  transition: box-shadow .12s ease, transform .15s cubic-bezier(.2,.7,.2,1);
}

/* leave room for the fixed/sticky 64px nav when scrolling focus into view */
html.tv-nav-active .card,
html.tv-nav-active .m-card,
html.tv-nav-active .s-card,
html.tv-nav-active .ch-card,
html.tv-nav-active .live-card,
html.tv-nav-active .game-card,
html.tv-nav-active .nav-links a,
html.tv-nav-active .cat-pill { scroll-margin-top: 84px; scroll-margin-bottom: 28px; }

/* lift content cards so the ring + scale read from a couch */
html.tv-nav-active .card.tv-focused,
html.tv-nav-active .m-card.tv-focused,
html.tv-nav-active .s-card.tv-focused,
html.tv-nav-active .ch-card.tv-focused,
html.tv-nav-active .live-card.tv-focused { transform: scale(1.06); }

/* force the hover-only play glyphs visible on FOCUS */
html.tv-nav-active .card.tv-focused .card-play,
html.tv-nav-active .m-card.tv-focused .m-card-play,
html.tv-nav-active .s-card.tv-focused .s-card-play {
  opacity: 1 !important;
  transform: translate(-50%, -55%) scale(1);
}
/* and the gradient title/overlays (these are not translate-positioned) */
html.tv-nav-active .card.tv-focused .card-overlay,
html.tv-nav-active .m-card.tv-focused .m-card-overlay,
html.tv-nav-active .s-card.tv-focused .s-card-overlay { opacity: 1 !important; }

/* nav links / pills / see-all / gear: brand-tinted focus pill */
html.tv-nav-active .nav-links a.tv-focused,
html.tv-nav-active .row-see-all.tv-focused,
html.tv-nav-active .cat-pill.tv-focused,
html.tv-nav-active .atm-tab.tv-focused,
html.tv-nav-active .nav-brand.tv-focused {
  color: var(--text) !important;
  background: rgba(0, 207, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--cyan), 0 0 18px 4px rgba(0, 207, 255, 0.5);
  outline: none !important;
}

html.tv-nav-active .set-gear.tv-focused {
  color: var(--text) !important;
  background: rgba(255,255,255,.12);
  transform: rotate(40deg);
  box-shadow: 0 0 0 3px var(--cyan), 0 0 18px 4px rgba(0,207,255,.5);
  outline: none !important;
}

html.tv-nav-active button.tv-focused,
html.tv-nav-active .btn.tv-focused,
html.tv-nav-active .set-btn.tv-focused,
html.tv-nav-active .set-close.tv-focused,
html.tv-nav-active .scroll-btn.tv-focused {
  outline: none !important;
  box-shadow:
    0 0 0 3px var(--cyan),
    0 0 20px 6px rgba(0, 207, 255, 0.5),
    0 0 40px 10px rgba(255, 79, 216, 0.35);
}

html.tv-nav-active input.tv-focused,
html.tv-nav-active select.tv-focused {
  outline: none !important;
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 0 3px rgba(0, 207, 255, 0.55),
    0 0 18px 4px rgba(0, 207, 255, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.tv-nav-active .tv-focused { transition: none !important; }
  html.tv-nav-active .card.tv-focused,
  html.tv-nav-active .m-card.tv-focused,
  html.tv-nav-active .s-card.tv-focused,
  html.tv-nav-active .ch-card.tv-focused,
  html.tv-nav-active .live-card.tv-focused { transform: none; }
}

/* ============================================================
   LITE MODE — old Fire OS / weak GPUs (brand.js sets html.lite via
   ?lite=1, localStorage atm_lite=1, or deviceMemory<=1.5GB). Strips the
   GPU-expensive layers; keeps the layout, real logos, and brand identity.
   ============================================================ */
html.lite #starfield,
html.lite #atmosphere,
html.lite #preview { display: none !important; }
html.lite .vignette::before { display: none; }
html.lite .media-nav,
html.lite .panel,
html.lite .toast,
html.lite .nav-search-wrap input { backdrop-filter: none !important; }
html.lite .media-nav { background: rgba(6,6,16,.97); }
html.lite .neon-text { filter: none; }                 /* drop-shadow stack is costly */
html.lite .atmlogo-halo,
html.lite .atmlogo-glow,
html.lite .atmlogo-sweep,
html.lite .atmlogo-spark { display: none !important; } /* blur / particle layers */
html.lite .atmlogo-float { animation: none !important; }
html.lite .skel { animation: none !important; background: var(--bg-2); }
html.lite .card,
html.lite .live-card,
html.lite .s-card,
html.lite .ch-card,
html.lite .m-card { transition: none !important; }
html.lite .card:hover,
html.lite .live-card:hover,
html.lite .s-card:hover { transform: none !important; box-shadow: none !important; }

/* ---- ATM TICKET (first tab): subtle glowing gold ---- */
:root { --ticket-gold: #E8C56A; }
.nav-links a.nav-ticket {
  color: var(--ticket-gold);
  text-shadow: 0 0 6px rgba(232,197,106,.45), 0 0 16px rgba(232,197,106,.22);
  animation: ticket-glow 3.2s ease-in-out infinite alternate;
}
.nav-links a.nav-ticket:hover, .nav-links a.nav-ticket.active { color: #F5DC8F; font-weight: 600; }
@keyframes ticket-glow {
  from { text-shadow: 0 0 5px rgba(232,197,106,.35), 0 0 14px rgba(232,197,106,.16); }
  to   { text-shadow: 0 0 9px rgba(232,197,106,.6),  0 0 24px rgba(232,197,106,.3); }
}
html.lite .nav-links a.nav-ticket { animation: none; text-shadow: none; }