/* ==========================================================================
   efantasy.gr — The Black Friday Heist (Black Friday 2026)
   Plain CSS, no build step. Sections follow the page top to bottom.
   Scoped to #black-friday-page. Ambient motion only runs under .fx-on on it (JS sets it unless the visitor
   prefers reduced motion; the FX button in the hero toggles it).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ubuntu, self-hosted from assets/fonts (Ubuntu Font Licence 1.0, see UFL.txt).
   Greek + Latin subsets only. unicode-range lets the browser fetch just the
   files the text on screen needs.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Heist Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Heist Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heist Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu-500-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Heist Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heist Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Heist Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heist Ubuntu";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu-500italic-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Heist Ubuntu";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu-500italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens. Change the campaign's look here; components only use these.
   -------------------------------------------------------------------------- */
#black-friday-page {
  /* Night city */
  --night: #08061a;          /* page */
  --night-2: #0e0b26;        /* sunken panels */
  --asphalt: #141134;        /* raised panels */
  --asphalt-2: #1c1845;      /* hover, inputs */
  --wire: #2f2a63;           /* hairlines, borders */
  --wire-hi: #4b4596;        /* strong borders */
  --moon: #f0edff;           /* text */
  --haze: #b7b1de;           /* secondary text: 9:1 on --night */

  /* Neon. Each colour carries one meaning, everywhere on the page. */
  --ultra: #a970ff;          /* brand violet: identity, locked missions, route ahead */
  --scan: #45e2ff;           /* brand cyan: interface, focus, information */
  --loot: #ffd147;           /* gold: what you get (prices, discounts, the live mission, CTAs) */
  --heat: #ff5672;           /* red: scarcity and urgency only */

  /* Paper (wanted posters) */
  --paper: #f2ecdd;
  --paper-2: #e6decb;
  --ink: #1d1726;
  --ink-soft: #4a4255;       /* 7.6:1 on --paper */
  --heat-ink: #b0102c;       /* red that passes AA on --paper */

  --font: "Heist Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale: major third on 17px, fluid at the top end */
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.4rem, 1.15rem + 1vw, 1.875rem);
  --fs-xl: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  --fs-2xl: clamp(2.6rem, 1.4rem + 4.8vw, 5.4rem);
  --fs-hero: clamp(2.7rem, .6rem + 6.2vw, 6.6rem);

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1360px;
  --section-y: clamp(72px, 10vw, 148px);
  --cut: 14px;               /* chamfer size on digital panels */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-snap: cubic-bezier(.7, 0, .2, 1);

  /* A chamfered rectangle (top-right and bottom-left corners cut). Used as a
     clip-path on pseudo-elements, never on the element that takes focus. */
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
#black-friday-page *,
#black-friday-page *::before,
#black-friday-page *::after { box-sizing: border-box; }

#black-friday-page {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 112px;            /* the pinned shop bar (96px) + air */
  scroll-padding-bottom: 88px;          /* the objective tracker */
}
#black-friday-page.fx-on { scroll-behavior: smooth; }

#black-friday-page {
  margin: 0;
  background: var(--night);
  color: var(--moon);
  font: 400 var(--fs-base)/1.6 var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#black-friday-page img,
#black-friday-page svg,
#black-friday-page canvas { display: block; max-width: 100%; }
#black-friday-page a { color: var(--scan); text-underline-offset: .18em; text-decoration-thickness: 1px; }
#black-friday-page a:hover { text-decoration-thickness: 2px; }
#black-friday-page h1,
#black-friday-page h2,
#black-friday-page h3,
#black-friday-page h4,
#black-friday-page p,
#black-friday-page ul,
#black-friday-page ol,
#black-friday-page dl,
#black-friday-page dd { margin: 0; }
#black-friday-page h1,
#black-friday-page h2,
#black-friday-page h3,
#black-friday-page h4 { font-weight: 700; line-height: 1.12; text-wrap: balance; }
#black-friday-page p { text-wrap: pretty; }
#black-friday-page strong { font-weight: 700; }
#black-friday-page button { font: inherit; color: inherit; }

#black-friday-page :focus-visible { outline: 3px solid var(--scan); outline-offset: 3px; }

#black-friday-page .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
#black-friday-page { overflow-x: clip; }   /* off-screen intro offsets must never widen the page */

#black-friday-page .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#black-friday-page .skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--loot);
  color: var(--night);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
#black-friday-page .skip-link:focus { transform: none; }

/* Icons: drawn as masks, so they take currentColor and no glyph can fall
   back to an emoji (Ubuntu has no arrows). */
#black-friday-page .ico {
  flex: none;
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
#black-friday-page .ico--down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"); }
#black-friday-page .ico--next { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"); }
#black-friday-page .ico--prev { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"); }
#black-friday-page .ico--cal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3.5' y='5' width='17' height='15.5'/%3E%3Cpath d='M3.5 10h17M8 2.5v5M16 2.5v5'/%3E%3C/g%3E%3Cpath d='M7 13h3v3H7z'/%3E%3C/svg%3E"); }
#black-friday-page .ico--share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='18' cy='5.5' r='2.7'/%3E%3Ccircle cx='6' cy='12' r='2.7'/%3E%3Ccircle cx='18' cy='18.5' r='2.7'/%3E%3Cpath d='M8.4 10.7l7.2-3.9M8.4 13.3l7.2 3.9'/%3E%3C/g%3E%3C/svg%3E"); }
#black-friday-page .ico--lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 10.5V7.8a4.5 4.5 0 0 1 9 0v2.7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Crect x='4.5' y='10.5' width='15' height='11'/%3E%3C/svg%3E"); }
#black-friday-page .ico--check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='2.8'/%3E%3C/svg%3E"); }
#black-friday-page .ico--copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='8' y='8' width='12.5' height='12.5'/%3E%3Cpath d='M16 8V3.5H3.5V16H8'/%3E%3C/g%3E%3C/svg%3E"); }
#black-friday-page .ico--bolt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 4 14h6.5L9 22l10-12.5h-6.6z'/%3E%3C/svg%3E"); }
#black-friday-page .ico--box { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/g%3E%3C/svg%3E"); }
#black-friday-page .ico--coin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M12 6.5l1.6 3.6 3.9.4-2.9 2.6.8 3.9L12 15l-3.4 2 .8-3.9-2.9-2.6 3.9-.4z'/%3E%3C/svg%3E"); }
#black-friday-page .ico--truck { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 6h11v10H2zM13 9.5h4.5L21 13v3h-8z'/%3E%3Ccircle cx='6.5' cy='17.5' r='2' fill='%23fff'/%3E%3Ccircle cx='17' cy='17.5' r='2' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); }
#black-friday-page .ico--crew { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3.4'/%3E%3Ccircle cx='17' cy='9' r='2.8'/%3E%3Cpath d='M1.5 20c0-4 2.9-6.5 6.5-6.5s6.5 2.5 6.5 6.5zM15 20c0-2.2-.6-4-1.7-5.3a5 5 0 0 1 9.2 3.3V20z'/%3E%3C/svg%3E"); }
#black-friday-page .ico--vault { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.5' y='3.5' width='19' height='16'/%3E%3Ccircle cx='12' cy='11.5' r='4.2'/%3E%3Cpath d='M12 7.3v1.6M12 14.1v1.6M7.8 11.5h1.6M14.6 11.5h1.6M5 19.5v2M19 19.5v2'/%3E%3C/g%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   Shared components
   -------------------------------------------------------------------------- */

/* Buttons. The chamfered shape lives on ::before/::after, so the focus ring
   on the element itself is never clipped. */
#black-friday-page .btn {
  --btn-bg: var(--loot);
  --btn-fg: #170f00;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  background: none;
  color: var(--btn-fg);
  font: 700 var(--fs-sm)/1.15 var(--font);
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .25s var(--ease-out), color .2s;
}
#black-friday-page .btn::before,
#black-friday-page .btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--chamfer);
  transition: background-color .2s, transform .25s var(--ease-out);
}
#black-friday-page .btn::before { inset: 0; background: var(--btn-bg); }
#black-friday-page .btn:hover { text-decoration: none; }
#black-friday-page .btn:focus-visible { outline-offset: 5px; }
#black-friday-page .btn--loot:hover { filter: drop-shadow(0 0 18px rgba(255, 209, 71, .5)); }
#black-friday-page .btn--loot:hover::before { background: #ffe17d; }
#black-friday-page .btn--loot .ico { transition: transform .25s var(--ease-out); }
#black-friday-page .btn--loot:hover .ico--down { transform: translateY(3px); }
#black-friday-page .btn--loot:hover .ico--next { transform: translateX(3px); }

#black-friday-page .btn--line { --btn-bg: var(--wire-hi); --btn-fg: var(--moon); letter-spacing: .01em; font-weight: 500; }
#black-friday-page .btn--line::after { inset: 1.5px; --cut: 13px; background: var(--night-2); }
#black-friday-page .btn--line:hover::before { background: var(--scan); }
#black-friday-page .btn--line:hover { color: #fff; }
#black-friday-page .btn[hidden] { display: none; }

/* Status chips: always state, never decoration */
#black-friday-page .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid currentColor;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
}
#black-friday-page .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#black-friday-page .chip--live,
#black-friday-page .chip--active { color: var(--loot); }
#black-friday-page .chip--standby,
#black-friday-page .chip--locked { color: var(--ultra); }
#black-friday-page .chip--done,
#black-friday-page .chip--cleared { color: var(--haze); }
#black-friday-page.fx-on .chip--live::before,
#black-friday-page.fx-on .chip--active::before { animation: heist-blink 1.4s steps(2, jump-none) infinite; }

/* Section headings: the English UI title (the client's), the Greek line under it */
#black-friday-page .section-head { margin-bottom: clamp(36px, 5vw, 64px); }
#black-friday-page .section-head--center { text-align: center; }
#black-friday-page .section-head--center .section-lede { margin-inline: auto; }
#black-friday-page .section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
#black-friday-page .section-title { display: flex; flex-direction: column; gap: 12px; }
#black-friday-page .section-head--center .section-title { align-items: center; }
#black-friday-page .section-title > span:first-child {
  font-size: var(--fs-2xl);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
#black-friday-page .section-title__sub { font-size: var(--fs-md); font-weight: 500; line-height: 1.3; color: var(--haze); letter-spacing: 0; }
#black-friday-page .section-lede { max-width: 60ch; margin-top: 20px; color: var(--haze); font-size: var(--fs-md); line-height: 1.55; }
#black-friday-page .section-lede [lang="en"] { display: block; margin-bottom: 4px; color: var(--moon); font-weight: 700; }

/* A panel with a chamfered border: ::before is the border, ::after the fill */
#black-friday-page .panel {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 3vw, 36px);
}
#black-friday-page .panel::before,
#black-friday-page .panel::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); }
#black-friday-page .panel::before { inset: 0; background: var(--panel-line, var(--wire)); }
#black-friday-page .panel::after { inset: 1px; background: var(--panel-fill, var(--asphalt)); }

/* --------------------------------------------------------------------------
   Hero: the title screen
   -------------------------------------------------------------------------- */
#black-friday-page .hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: max(700px, calc(100svh - 96px));
  overflow: hidden;
  background: var(--night);
}
#black-friday-page .hero__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#black-friday-page .hero__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 78% 8%, rgba(169, 112, 255, .32), transparent 70%),
    radial-gradient(55% 45% at 8% 30%, rgba(69, 226, 255, .14), transparent 70%),
    linear-gradient(180deg, #07051a 0%, #0f0a31 40%, #26114e 74%, #3b1755 100%);
}
/* Keeps the copy column readable over the skyline */
#black-friday-page .hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 6, 26, .88) 0%, rgba(8, 6, 26, .55) 38%, rgba(8, 6, 26, 0) 64%),
    linear-gradient(180deg, rgba(8, 6, 26, .5) 0%, rgba(8, 6, 26, 0) 30%);
}
/* 32px of headroom each side for the pointer parallax in heist-motion.js (±23px at most) */
#black-friday-page .skyline { position: absolute; left: -32px; bottom: 0; width: calc(100% + 64px); max-width: none; }
#black-friday-page .skyline--far { height: 64%; opacity: .75; }
#black-friday-page .skyline--mid { height: 48%; }
#black-friday-page .skyline--near { height: 30%; }
#black-friday-page .hero__fog {
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(8, 6, 26, 0), rgba(8, 6, 26, .8) 62%, var(--night));
}

/* Searchlights */
#black-friday-page .beam {
  position: absolute;
  bottom: 22%;
  width: 16vw;
  min-width: 140px;
  height: 115%;
  transform-origin: 50% 100%;
  clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0);
  background: linear-gradient(0deg, rgba(69, 226, 255, .2), rgba(69, 226, 255, 0) 78%);
  mix-blend-mode: screen;
  opacity: .55;
}
#black-friday-page .beam--a { left: 20%; transform: rotate(-20deg); }
#black-friday-page .beam--b { left: 70%; transform: rotate(16deg); background: linear-gradient(0deg, rgba(169, 112, 255, .26), rgba(169, 112, 255, 0) 78%); }
#black-friday-page.fx-on .beam--a { animation: heist-sweep-a 13s ease-in-out infinite alternate; }
#black-friday-page.fx-on .beam--b { animation: heist-sweep-b 17s ease-in-out infinite alternate; }
@keyframes heist-sweep-a { from { transform: rotate(-24deg); } to { transform: rotate(10deg); } }
@keyframes heist-sweep-b { from { transform: rotate(20deg); } to { transform: rotate(-12deg); } }

#black-friday-page .hud {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 18px;
  padding-bottom: clamp(48px, 9vh, 104px);
}
#black-friday-page .hud__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(75, 69, 150, .6);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
}
#black-friday-page .hud__status { display: flex; align-items: center; gap: 14px; }
#black-friday-page .hud__op { color: var(--haze); font-weight: 500; }
#black-friday-page .hud__coords { margin-left: auto; color: var(--haze); font-weight: 500; }

#black-friday-page .fx-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--wire-hi);
  background: rgba(14, 11, 38, .7);
  color: var(--moon);
  font: 700 var(--fs-xs)/1 var(--font);
  letter-spacing: .14em;
  cursor: pointer;
}
#black-friday-page.js .fx-toggle { display: inline-flex; }
#black-friday-page .fx-toggle:hover { border-color: var(--scan); }
#black-friday-page .fx-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--scan); box-shadow: 0 0 8px var(--scan); }
#black-friday-page .fx-toggle[aria-pressed="false"] { color: var(--haze); }
#black-friday-page .fx-toggle[aria-pressed="false"] .fx-toggle__dot { background: var(--wire-hi); box-shadow: none; }
#black-friday-page .fx-toggle__state { min-width: 3ch; text-align: left; }

#black-friday-page .hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(380px, .75fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  padding-top: clamp(20px, 4vh, 56px);
}
#black-friday-page .hero__copy { max-width: 880px; }
#black-friday-page .hero__kicker {
  margin-bottom: 14px;
  color: var(--scan);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .16em;
}
#black-friday-page .hero__brand {
  display: block;
  margin-bottom: 8px;
  color: var(--haze);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: .01em;
}
#black-friday-page .hero__name {
  display: block;
  font-size: var(--fs-hero);
  line-height: .84;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
#black-friday-page .hero__line { display: block; }
/* The neon sign: HEIST is drawn as a lit tube, not filled type */
#black-friday-page .hero__line--heist {
  margin-top: .06em;
  font-size: 1.42em;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, .2vw, 3px) #d7bfff;
  filter: drop-shadow(0 0 2px rgba(169, 112, 255, .9)) drop-shadow(0 0 16px rgba(169, 112, 255, .7)) drop-shadow(0 0 44px rgba(169, 112, 255, .45));
}
@supports not (-webkit-text-stroke: 1px #000) {
  #black-friday-page .hero__line--heist { color: var(--ultra); }
}
#black-friday-page .hero__tagline {
  display: flex;
  flex-wrap: wrap;
  gap: .2em .55em;
  margin-top: clamp(14px, 2.2vh, 26px);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
}
#black-friday-page .hero__tagline > span { display: inline-block; }
#black-friday-page .hero__score { color: var(--loot); text-shadow: 0 0 22px rgba(255, 209, 71, .35); }
#black-friday-page .hero__lede {
  max-width: 62ch;
  margin-top: 16px;
  color: #d9d4f7;
  font-size: var(--fs-md);
  line-height: 1.55;
  text-shadow: 0 2px 16px rgba(8, 6, 26, .9);
}
#black-friday-page .hero__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 26px; }

/* The countdown: an objective timer */
#black-friday-page .timer {
  position: relative;
  isolation: isolate;
  align-self: center;
  padding: 28px 28px 24px;
  text-align: left;
  container-type: inline-size;   /* the clock scales with the panel, not the viewport */
}
#black-friday-page .timer::before,
#black-friday-page .timer::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); }
#black-friday-page .timer::before { inset: 0; background: linear-gradient(160deg, rgba(69, 226, 255, .55), rgba(75, 69, 150, .55) 40%, rgba(169, 112, 255, .5)); }
#black-friday-page .timer::after { inset: 1px; background: rgba(12, 9, 34, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#black-friday-page .timer__corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--scan); }
#black-friday-page .timer__corner--tl { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
#black-friday-page .timer__corner--br { right: -7px; bottom: -7px; border-left: 0; border-top: 0; }
#black-friday-page .timer__label { color: var(--scan); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; }
/* Digits, colons and gaps are sized in container units (cqi = 1% of the panel's
   content width), so HH:MM:SS and DD:HH:MM:SS both fit with real space between
   the groups at any width. The day count gets smaller digits: it has one more group. */
#black-friday-page .timer__clock {
  --digit: min(4.2rem, 16cqi);
  --gap: clamp(9px, 3.6cqi, 18px);
  display: flex;
  align-items: flex-start;
  column-gap: var(--gap);
  margin-top: 16px;
}
#black-friday-page .timer__clock.has-days { --digit: min(3.6rem, 13cqi); --gap: clamp(8px, 3.2cqi, 16px); }
#black-friday-page .timer__unit { display: flex; flex-direction: column; align-items: center; }
#black-friday-page .timer__unit b {
  font-size: var(--digit);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--moon);
  text-shadow: 0 0 22px rgba(169, 112, 255, .55);
}
#black-friday-page .timer__unit small { margin-top: 8px; color: var(--haze); font-size: .75rem; font-weight: 700; letter-spacing: .18em; }
#black-friday-page .timer__sep {
  font-size: calc(var(--digit) * .8);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ultra);
}
#black-friday-page.fx-on .timer__sep { animation: heist-blink 1s steps(2, jump-none) infinite; }
#black-friday-page .timer__unit--days,
#black-friday-page .timer__sep--days { display: none; }
#black-friday-page .timer__clock.has-days .timer__unit--days,
#black-friday-page .timer__clock.has-days .timer__sep--days { display: flex; }
#black-friday-page .timer__clock.has-days .timer__sep--days { display: block; }
#black-friday-page .timer[data-phase="final"] .timer__label,
#black-friday-page .timer[data-phase="final"] .timer__sep { color: var(--heat); }
#black-friday-page .timer[data-phase="final"] .timer__unit b { text-shadow: 0 0 24px rgba(255, 86, 114, .55); }
#black-friday-page .timer[data-phase="over"] .timer__clock { display: none; }
#black-friday-page .timer__next { margin-top: 18px; color: var(--haze); font-size: var(--fs-sm); line-height: 1.45; }
#black-friday-page .timer__next strong { color: var(--moon); font-weight: 700; }

#black-friday-page .progress {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
#black-friday-page .progress__step {
  height: 8px;
  transform: skewX(-24deg);
  border: 1px solid var(--wire-hi);
  background: transparent;
}
#black-friday-page .progress__step[data-state="cleared"] { background: var(--haze); border-color: var(--haze); }
#black-friday-page .progress__step[data-state="active"] { background: var(--loot); border-color: var(--loot); box-shadow: 0 0 12px rgba(255, 209, 71, .7); }
#black-friday-page.fx-on .progress__step[data-state="active"] { animation: heist-pulse-glow 1.8s ease-in-out infinite; }

@keyframes heist-blink { 50% { opacity: .25; } }
@keyframes heist-pulse-glow { 50% { box-shadow: 0 0 2px rgba(255, 209, 71, .3); } }

/* Held for the intro (see the inline script in <head>) */
#black-friday-page.boot .hud__bar,
#black-friday-page.boot .hero__copy,
#black-friday-page.boot .timer { visibility: hidden; }

/* --------------------------------------------------------------------------
   Mission map
   -------------------------------------------------------------------------- */
#black-friday-page .missions {
  position: relative;
  padding-block: var(--section-y);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(169, 112, 255, .12), transparent 70%),
    var(--night);
}
#black-friday-page .missions::before {   /* scan line at the seam with the hero */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--scan) 30%, var(--ultra) 70%, transparent);
  opacity: .6;
}
#black-friday-page .briefing {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  counter-reset: brief;
}
#black-friday-page .briefing li {
  position: relative;
  padding: 14px 16px 14px 58px;
  border-left: 2px solid var(--wire-hi);
  background: linear-gradient(90deg, rgba(28, 24, 69, .7), rgba(28, 24, 69, 0));
  color: var(--haze);
  line-height: 1.45;
  counter-increment: brief;
}
#black-friday-page .briefing li::before {
  content: counter(brief, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--scan);
  font-weight: 700;
  letter-spacing: .06em;
}
#black-friday-page .briefing strong { color: var(--moon); }

#black-friday-page .missions__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(340px, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

#black-friday-page .map {
  position: relative;
  aspect-ratio: 1200 / 760;
  border: 1px solid var(--wire);
  background: #0c0a24;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .02);
}
#black-friday-page .map::before,
#black-friday-page .map::after {   /* corner brackets */
  content: "";
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: 2px solid var(--scan);
  pointer-events: none;
}
#black-friday-page .map::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
#black-friday-page .map::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
#black-friday-page .map__art,
#black-friday-page .map__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#black-friday-page .map__art { object-fit: cover; }
#black-friday-page .map__overlay { overflow: visible; }
#black-friday-page .map__overlay text { font-family: var(--font); font-weight: 500; }
#black-friday-page .map__grid-refs text { fill: rgba(183, 177, 222, .5); font-size: 14px; text-anchor: middle; }
#black-friday-page .map__places text { fill: rgba(183, 177, 222, .55); font-size: 15px; letter-spacing: .32em; text-anchor: middle; }
#black-friday-page .map__compass circle { fill: rgba(14, 11, 38, .7); stroke: var(--wire-hi); stroke-width: 1.2; }
#black-friday-page .map__compass .map__compass-ring { fill: none; stroke-dasharray: 2 4; }
#black-friday-page .map__compass path { fill: var(--wire-hi); }
#black-friday-page .map__compass .map__compass-n { fill: var(--scan); }
#black-friday-page .map__compass text { fill: var(--scan); font-size: 15px; font-weight: 700; text-anchor: middle; }

#black-friday-page .route-base {
  fill: none;
  stroke: var(--wire-hi);
  stroke-width: 2;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#black-friday-page .route-done {
  fill: none;
  stroke: var(--loot);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(255, 209, 71, .65));
}
#black-friday-page .route-done--past { stroke: var(--haze); filter: none; opacity: .75; }

#black-friday-page .map__pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 2; }
#black-friday-page .pin {
  --dot: 46px;
  position: absolute;
  left: calc(var(--x) / 1200 * 100%);
  top: calc(var(--y) / 760 * 100%);
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
}
#black-friday-page .pin--hq { --dot: 56px; }
/* Marker positions, in the map's viewBox units (1200x760). Kept here, not in style=""
   attributes, because the CSP forbids inline styles. JS reads them for the route. */
#black-friday-page .pin:nth-child(1) { --x: 216; --y: 170; }
#black-friday-page .pin:nth-child(2) { --x: 170; --y: 520; }
#black-friday-page .pin:nth-child(3) { --x: 520; --y: 320; }
#black-friday-page .pin:nth-child(4) { --x: 790; --y: 150; }
#black-friday-page .pin:nth-child(5) { --x: 1040; --y: 300; }
#black-friday-page .pin:nth-child(6) { --x: 860; --y: 500; }
#black-friday-page .pin:nth-child(7) { --x: 600; --y: 540; }
#black-friday-page .marker {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--moon);
  text-decoration: none;
  outline-offset: 6px;
}
#black-friday-page .marker__dot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
#black-friday-page .marker__dot::before {   /* the diamond */
  content: "";
  position: absolute;
  inset: 14%;
  transform: rotate(45deg);
  border: 2px solid var(--ultra);
  background: #120f33;
  box-shadow: 0 0 0 4px rgba(8, 6, 26, .6);
  transition: transform .3s var(--ease-out), background-color .2s, border-color .2s;
}
#black-friday-page .marker__num { position: relative; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: #cdb4ff; }
#black-friday-page .marker__label {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 9px;
  background: rgba(8, 6, 26, .78);
  border: 1px solid var(--wire);
  color: var(--haze);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
/* Labels that would run into a neighbour: Forge Yards sits left of its marker,
   eFantasy HQ underneath it (between Dice Docks and Night Market). */
#black-friday-page .pin:nth-child(5) .marker__label { left: auto; right: calc(100% + 6px); }
#black-friday-page .pin:nth-child(7) .marker__label { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); }

#black-friday-page .marker:hover .marker__dot::before,
#black-friday-page .marker[aria-selected="true"] .marker__dot::before { transform: rotate(45deg) scale(1.12); }
#black-friday-page .marker:hover .marker__label,
#black-friday-page .marker[aria-selected="true"] .marker__label { color: var(--moon); border-color: var(--scan); }
#black-friday-page .marker[aria-selected="true"] .marker__dot::after {   /* lock-on ring */
  content: "";
  position: absolute;
  inset: -8px;
  border: 1.5px solid var(--scan);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(69, 226, 255, .55);
}

#black-friday-page .pin[data-state="active"] .marker__dot::before {
  background: var(--loot);
  border-color: #fff1bf;
  box-shadow: 0 0 0 4px rgba(8, 6, 26, .6), 0 0 26px rgba(255, 209, 71, .85);
}
#black-friday-page .pin[data-state="active"] .marker__num { color: #1a1100; }
#black-friday-page .pin[data-state="active"] .marker__label { color: var(--loot); border-color: rgba(255, 209, 71, .6); }
#black-friday-page .pin[data-state="cleared"] .marker__dot::before { background: #2a2650; border-color: var(--haze); }
#black-friday-page .pin[data-state="cleared"] .marker__num { color: var(--moon); }
/* Radar ping around the live target */
#black-friday-page .pin[data-state="active"]::before,
#black-friday-page .pin[data-state="active"]::after {
  content: "";
  position: absolute;
  inset: -10%;
  border: 2px solid var(--loot);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
#black-friday-page.fx-on .pin[data-state="active"]::before { animation: heist-ping 2.4s var(--ease-out) infinite; }
#black-friday-page.fx-on .pin[data-state="active"]::after { animation: heist-ping 2.4s var(--ease-out) 1.2s infinite; }
@keyframes heist-ping { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

/* Dossiers. Without JS they are a plain list; with JS, tab panels. */
#black-friday-page .dossiers { display: grid; gap: 20px; }
#black-friday-page .dossier {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 2.6vw, 34px);
}
#black-friday-page .dossier::before,
#black-friday-page .dossier::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); --cut: 22px; }
#black-friday-page .dossier::before { inset: 0; background: var(--wire-hi); }
#black-friday-page .dossier::after {
  inset: 1px;
  --cut: 21.5px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #19153f, #110e2e 60%);
}
#black-friday-page .dossier[data-state="active"]::before { background: linear-gradient(160deg, var(--loot), var(--wire-hi) 45%); }
#black-friday-page .dossier[hidden] { display: none; }
#black-friday-page .dossier__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#black-friday-page .dossier__no { color: var(--scan); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; }
#black-friday-page .dossier__of { color: var(--haze); font-weight: 500; }
#black-friday-page .dossier__title {
  margin-top: 14px;
  font-size: var(--fs-xl);
  line-height: .95;
  letter-spacing: -.025em;
}
#black-friday-page .dossier[data-state="active"] .dossier__title { color: var(--loot); }

#black-friday-page .stamp {
  flex: none;
  padding: 5px 11px 4px;
  border: 2.5px solid currentColor;
  color: var(--ultra);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  transform: rotate(-7deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='120' height='40' filter='url(%23n)'/%3E%3C/svg%3E");
}
#black-friday-page .dossier[data-state="active"] .stamp { color: var(--loot); }
#black-friday-page .dossier[data-state="cleared"] .stamp { color: var(--haze); }

#black-friday-page .facts { margin-top: 22px; }
#black-friday-page .facts > div {
  display: grid;
  grid-template-columns: 6.8em minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--wire);
}
#black-friday-page .facts dt { color: var(--haze); font-size: var(--fs-sm); }
#black-friday-page .facts dd { font-weight: 500; line-height: 1.45; }
#black-friday-page .facts a { color: var(--moon); text-decoration-color: var(--scan); }
#black-friday-page .facts a:hover { color: var(--scan); }
#black-friday-page [data-offer] { color: var(--haze); }
#black-friday-page .dossier[data-state="active"] [data-offer],
#black-friday-page .dossier[data-state="cleared"] [data-offer] { color: var(--moon); }
#black-friday-page .redact {
  display: inline-block;
  width: 6.5em;
  height: .95em;
  margin-right: 10px;
  vertical-align: -.1em;
  background: repeating-linear-gradient(90deg, var(--moon) 0 92%, transparent 92% 100%);
  background-size: 1.6em 100%;
  opacity: .8;
}
#black-friday-page .dossier__intel { margin-top: 18px; color: var(--haze); line-height: 1.6; }
#black-friday-page .dossier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
#black-friday-page .dossier__actions:empty { display: none; }
#black-friday-page .dossier__note { color: var(--haze); font-size: var(--fs-sm); }

#black-friday-page .steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
#black-friday-page .steps[hidden] { display: none; }
#black-friday-page .steps__count { min-width: 13ch; text-align: center; color: var(--haze); font-size: var(--fs-sm); font-weight: 500; }
#black-friday-page .steps__btn,
#black-friday-page .loot__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--wire-hi);
  background: var(--night-2);
  color: var(--moon);
  font-size: 1.25rem;
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
#black-friday-page .steps__btn:hover,
#black-friday-page .loot__btn:hover { border-color: var(--scan); color: var(--scan); }
#black-friday-page .steps__btn:disabled,
#black-friday-page .loot__btn:disabled { opacity: .35; cursor: default; border-color: var(--wire); color: var(--haze); }

/* --------------------------------------------------------------------------
   Today's mission
   -------------------------------------------------------------------------- */
#black-friday-page .today {
  position: relative;
  padding-block: var(--section-y);
  background:
    linear-gradient(180deg, var(--night), #0b0823 40%, var(--night));
}
#black-friday-page .today:focus { outline: none; }
#black-friday-page .today__fallback { display: grid; justify-items: start; gap: 22px; max-width: 60ch; color: var(--haze); font-size: var(--fs-md); }

#black-friday-page .op {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
#black-friday-page .op__panel {
  position: relative;
  isolation: isolate;
  padding: clamp(26px, 4vw, 56px);
  overflow: hidden;
}
#black-friday-page .op__panel::before,
#black-friday-page .op__panel::after { content: ""; position: absolute; z-index: -2; clip-path: var(--chamfer); --cut: 28px; }
#black-friday-page .op__panel::before { inset: 0; background: linear-gradient(135deg, var(--loot), rgba(255, 209, 71, .15) 30%, var(--wire-hi) 60%, var(--ultra)); }
#black-friday-page .op__panel::after {
  inset: 1.5px;
  --cut: 27px;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(169, 112, 255, .22), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(255, 209, 71, .1), transparent 60%),
    #120e30;
}
/* The mission number, as a giant outline behind the panel */
#black-friday-page .op__panel[data-no]::marker { content: none; }
#black-friday-page .op__ghost {
  position: absolute;
  z-index: -1;
  right: -.04em;
  bottom: -.2em;
  font-size: clamp(9rem, 22vw, 20rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(169, 112, 255, .22);
  pointer-events: none;
  user-select: none;
}
#black-friday-page .op__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
#black-friday-page .op__no { color: var(--scan); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; }
#black-friday-page .op__of { color: var(--haze); font-weight: 500; }
#black-friday-page .op__clock { margin-left: auto; color: var(--haze); font-size: var(--fs-sm); }
#black-friday-page .op__time { color: var(--moon); font-weight: 700; font-size: var(--fs-md); letter-spacing: .02em; }
#black-friday-page .op[data-phase="pre"] .op__time { color: var(--ultra); }
#black-friday-page .op__title {
  margin-top: clamp(18px, 3vw, 30px);
  font-size: clamp(2.6rem, 1.2rem + 6vw, 6.4rem);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
#black-friday-page .op__offer {
  margin-top: 22px;
  color: var(--loot);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-shadow: 0 0 30px rgba(255, 209, 71, .28);
}
#black-friday-page .op__offer-el { margin-top: 10px; color: var(--moon); font-size: var(--fs-md); font-weight: 500; }
#black-friday-page .op__objective { max-width: 62ch; margin-top: 18px; color: var(--haze); line-height: 1.6; }
#black-friday-page .op__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
#black-friday-page .op[data-phase="pre"] .op__offer,
#black-friday-page .op[data-phase="over"] .op__offer { color: var(--ultra); text-shadow: none; }



/* Loot: grid on desktop, swipeable track on phones */
#black-friday-page .loot { margin-top: clamp(40px, 5vw, 64px); }
#black-friday-page .loot__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
#black-friday-page .loot__title { font-size: var(--fs-md); letter-spacing: .14em; }
#black-friday-page .loot__count { color: var(--haze); font-weight: 500; letter-spacing: .04em; }
#black-friday-page .loot__nav { display: none; gap: 10px; }
#black-friday-page .loot__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
#black-friday-page .loot__track:focus-visible { outline-offset: 6px; }

#black-friday-page .item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wire);
  background: linear-gradient(180deg, #16123a, #100d2a);
  transition: border-color .25s, transform .35s var(--ease-out), box-shadow .35s;
}
#black-friday-page .item::before {   /* cut corner, drawn over the border */
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg, var(--night) 50%, var(--wire) 50%, var(--wire) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}
#black-friday-page .item:hover,
#black-friday-page .item:focus-within { border-color: var(--scan); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(69, 226, 255, .25); }
#black-friday-page .item:hover::before,
#black-friday-page .item:focus-within::before { background: linear-gradient(225deg, var(--night) 50%, var(--scan) 50%, var(--scan) calc(50% + 1px), transparent calc(50% + 1px)); }
#black-friday-page .item:focus-within { outline: 3px solid var(--scan); outline-offset: 3px; }
#black-friday-page .item__scan {
  position: relative;
  margin: 10px;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    linear-gradient(var(--ultra), var(--ultra)) top left / 16px 2px,
    linear-gradient(var(--ultra), var(--ultra)) top left / 2px 16px,
    linear-gradient(var(--ultra), var(--ultra)) bottom right / 16px 2px,
    linear-gradient(var(--ultra), var(--ultra)) bottom right / 2px 16px,
    #efedf8;
  background-repeat: no-repeat;
}
#black-friday-page .item__img {
  width: 100%;
  height: 100%;
  padding: 9%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .5s var(--ease-out);
}
#black-friday-page .item:hover .item__img { transform: scale(1.05); }
#black-friday-page .item__scan::after {   /* scan line, on hover */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(180deg, rgba(69, 226, 255, 0), rgba(69, 226, 255, .32) 80%, rgba(69, 226, 255, .9) 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}
#black-friday-page.fx-on .item:hover .item__scan::after { animation: heist-scan .9s var(--ease-out); }
@keyframes heist-scan { 0% { top: -30%; opacity: 1; } 100% { top: 100%; opacity: .2; } }
#black-friday-page .item__off {
  position: absolute;
  top: 0; left: 0;
  padding: 7px 10px 6px;
  background: var(--loot);
  color: #170f00;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
}
#black-friday-page .item__stock {
  position: absolute;
  right: 0; bottom: 0;
  padding: 6px 9px 5px;
  background: var(--heat-ink);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
}
#black-friday-page .item[data-soldout] .item__img { opacity: .35; filter: grayscale(1); }
#black-friday-page .item[data-soldout] .item__stock { left: 0; right: 0; text-align: center; background: var(--ink); }
#black-friday-page .item__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 6px 18px 18px; }
#black-friday-page .item__brand { color: var(--scan); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#black-friday-page .item__name { font-size: var(--fs-base); font-weight: 500; line-height: 1.35; }
#black-friday-page .item__link { color: var(--moon); text-decoration: none; }
#black-friday-page .item__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }   /* the whole card is the link */
#black-friday-page .item__link:focus-visible { outline: none; }
#black-friday-page .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 10px; }
#black-friday-page .price__now { color: var(--loot); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
#black-friday-page .price__was { color: var(--haze); font-size: var(--fs-sm); }
#black-friday-page .item__legal { color: var(--haze); font-size: .75rem; }
#black-friday-page .item__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--moon);
  font-size: var(--fs-sm);
  font-weight: 700;
}
#black-friday-page .item__cta::after { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E"); transition: transform .25s var(--ease-out); }
#black-friday-page .item:hover .item__cta { color: var(--scan); }
#black-friday-page .item:hover .item__cta::after { transform: translateX(4px); }

/* Locked placeholders, before the heist starts */
#black-friday-page .item--classified .item__scan { background: repeating-linear-gradient(-45deg, #1a1642 0 12px, #15123a 12px 24px); }
#black-friday-page .item--classified .item__scan::before {
  content: "CLASSIFIED";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ultra);
  font-weight: 700;
  letter-spacing: .2em;
}
#black-friday-page .item--classified .item__body p,
#black-friday-page .item--classified .item__name { color: var(--haze); }
#black-friday-page .item--classified:hover { transform: none; }

/* --------------------------------------------------------------------------
   Most wanted: posters on a wall
   -------------------------------------------------------------------------- */
#black-friday-page .wanted {
  position: relative;
  padding-block: var(--section-y);
  background:
    radial-gradient(50% 40% at 50% 30%, rgba(255, 86, 114, .1), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 80px),
    #0a0820;
}
#black-friday-page .board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(26px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
#black-friday-page .board__empty { grid-column: 1 / -1; max-width: 60ch; margin-inline: auto; color: var(--haze); text-align: center; font-size: var(--fs-md); }
#black-friday-page .poster { --tilt: -1.6deg; position: relative; }
#black-friday-page .poster:nth-child(4n+2) { --tilt: 1.4deg; }
#black-friday-page .poster:nth-child(4n+3) { --tilt: -.8deg; }
#black-friday-page .poster:nth-child(4n+4) { --tilt: 2deg; }
#black-friday-page .poster__paper {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 20px 22px;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(150, 120, 80, .16), transparent 70%),
    var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--paper-2), 0 24px 40px rgba(0, 0, 0, .55);
  transform: rotate(var(--tilt));
  transition: transform .45s var(--ease-out), box-shadow .45s;
}
#black-friday-page .poster__paper::before {   /* tape */
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  background: rgba(236, 226, 196, .72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transform: rotate(calc(var(--tilt) * -2));
}
#black-friday-page .poster:hover .poster__paper,
#black-friday-page .poster:focus-within .poster__paper { transform: rotate(0) translateY(-6px); box-shadow: 0 2px 0 var(--paper-2), 0 34px 60px rgba(0, 0, 0, .6); }
#black-friday-page .poster:focus-within .poster__paper { outline: 3px solid var(--scan); outline-offset: 5px; }
#black-friday-page .poster__head {
  text-align: center;
  /* Sized from the poster's own width (container query units), so the word always
     fits. Letter-spacing also adds space after the last letter; the equal left
     padding balances it, so WANTED sits on the poster's exact centre. */
  font-size: min(3.1rem, 13.5cqi);
  font-weight: 700;
  line-height: .9;
  letter-spacing: .16em;
  padding-left: .16em;
  white-space: nowrap;
  color: var(--ink);
}
#black-friday-page .poster__photo {
  position: relative;
  margin-top: 14px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(10% - 1px), rgba(29, 23, 38, .16) calc(10% - 1px) 10%),
    #fbf8f0;
}
#black-friday-page .poster__img { width: 100%; height: 100%; padding: 8%; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.04) saturate(.92); }
#black-friday-page .poster__captured {
  position: absolute;
  top: 50%; left: 50%;
  padding: 8px 14px 6px;
  border: 4px solid var(--heat-ink);
  color: var(--heat-ink);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: .14em;
  background: rgba(242, 236, 221, .5);
  transform: translate(-50%, -50%) rotate(-14deg);
}
#black-friday-page .poster[data-soldout] .poster__img { filter: grayscale(1); opacity: .45; }
#black-friday-page .poster__case { margin-top: 12px; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; }
#black-friday-page .poster__brand { margin-top: 8px; color: var(--heat-ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#black-friday-page .poster__brand:empty { display: none; }
#black-friday-page .poster__name { margin-top: 4px; font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
#black-friday-page .poster__link { color: var(--ink); text-decoration: none; }
#black-friday-page .poster__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
#black-friday-page .poster__link:focus-visible { outline: none; }
#black-friday-page .poster__reward {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .16em;
}
#black-friday-page .poster__reward strong { color: var(--heat-ink); font-size: var(--fs-xl); letter-spacing: -.02em; line-height: 1; }
#black-friday-page .price--paper { margin-top: 6px; padding-top: 0; }
#black-friday-page .price--paper .price__now { color: var(--ink); }
#black-friday-page .price--paper .price__was { color: var(--ink-soft); }
#black-friday-page .poster__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; min-height: 30px; }
#black-friday-page .heat { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; }
#black-friday-page .heat[hidden] { display: none; }
#black-friday-page .heat__bars { display: flex; gap: 3px; }
#black-friday-page .heat__bars i { width: 9px; height: 14px; border: 1.5px solid var(--ink); transform: skewX(-20deg); }
#black-friday-page .heat[data-level="1"] i:nth-child(-n+1),
#black-friday-page .heat[data-level="2"] i:nth-child(-n+2),
#black-friday-page .heat[data-level="3"] i:nth-child(-n+3),
#black-friday-page .heat[data-level="4"] i:nth-child(-n+4),
#black-friday-page .heat[data-level="5"] i:nth-child(-n+5) { background: var(--heat-ink); border-color: var(--heat-ink); }
#black-friday-page .poster__left {
  padding: 4px 8px 3px;
  border: 2px solid var(--heat-ink);
  color: var(--heat-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  transform: rotate(-3deg);
}
#black-friday-page .poster__left[hidden] { display: none; }
#black-friday-page .poster__cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 16px;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
#black-friday-page .poster:hover .poster__cta { color: var(--heat-ink); }

/* Before the heist: identities withheld */
#black-friday-page .poster--classified .poster__photo { background: repeating-linear-gradient(-45deg, #e3dac5 0 12px, #ebe3cf 12px 24px); }
#black-friday-page .poster--classified .poster__photo::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(29, 23, 38, .35);
  font-size: 6rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Intel (FAQ)
   -------------------------------------------------------------------------- */
#black-friday-page .intel { padding-block: var(--section-y); background: var(--night); border-top: 1px solid var(--wire); }
#black-friday-page .intel__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
#black-friday-page .intel .section-head { position: sticky; top: 132px; }
#black-friday-page .faq { border-bottom: 1px solid var(--wire); }
#black-friday-page .faq__item { border-top: 1px solid var(--wire); }
#black-friday-page .faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 52px 22px 0;
  cursor: pointer;
  list-style: none;
}
#black-friday-page .faq__item summary::-webkit-details-marker { display: none; }
#black-friday-page .faq__item summary h3 { font-size: var(--fs-md); font-weight: 500; line-height: 1.35; text-wrap: pretty; }
#black-friday-page .faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background:
    linear-gradient(var(--scan), var(--scan)) center / 100% 2px no-repeat,
    linear-gradient(var(--scan), var(--scan)) center / 2px 100% no-repeat;
  transition: transform .3s var(--ease-out);
}
#black-friday-page .faq__item[open] summary::after { transform: rotate(45deg); }
#black-friday-page .faq__item summary:hover h3 { color: var(--scan); }
#black-friday-page .faq__item[open] summary h3 { color: var(--moon); font-weight: 700; }
#black-friday-page .faq__a { padding: 0 52px 26px 0; color: var(--haze); line-height: 1.65; }
#black-friday-page .faq__a p + p { margin-top: 12px; }
#black-friday-page .faq__a strong { color: var(--moon); }
#black-friday-page .faq__schedule { display: grid; gap: 8px; padding: 0; list-style: none; }
#black-friday-page .faq__schedule li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#black-friday-page .credits {
  padding-block: clamp(56px, 8vw, 104px) 40px;
  background: linear-gradient(180deg, #0c0927, #060414);
  border-top: 1px solid var(--wire);
  color: var(--haze);
}
#black-friday-page .credits .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); }
#black-friday-page .credits__crew { display: grid; justify-items: start; gap: 16px; }
#black-friday-page .credits__title { color: var(--moon); font-size: var(--fs-xl); letter-spacing: -.02em; }
#black-friday-page .credits__status { min-height: 1.6em; color: var(--scan); font-size: var(--fs-sm); }
#black-friday-page .credits__sub { color: var(--moon); font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
#black-friday-page .credits__stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: 1.6; }
#black-friday-page .credits__stores strong { color: var(--moon); }
#black-friday-page .credits__legal { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 28px; border-top: 1px solid var(--wire); font-size: var(--fs-xs); line-height: 1.6; }
#black-friday-page .credits a { color: var(--moon); }
#black-friday-page .credits a:hover { color: var(--scan); }

/* --------------------------------------------------------------------------
   Objective tracker (fixed HUD)
   -------------------------------------------------------------------------- */
#black-friday-page .tracker {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 80;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  max-width: calc(100vw - 32px);
  padding: 0 18px;
  color: var(--moon);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .4s var(--ease-out), opacity .3s;
}
#black-friday-page .tracker::before,
#black-friday-page .tracker::after { content: ""; position: absolute; z-index: -1; clip-path: var(--chamfer); --cut: 10px; }
#black-friday-page .tracker::before { inset: 0; background: var(--loot); }
#black-friday-page .tracker::after { inset: 1.5px; --cut: 9.5px; background: rgba(12, 9, 34, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#black-friday-page .tracker[hidden] { display: none; }
#black-friday-page .tracker.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
#black-friday-page .tracker__label { color: var(--loot); }
#black-friday-page .tracker__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#black-friday-page .tracker__time { color: var(--haze); font-weight: 500; letter-spacing: .04em; }
#black-friday-page .tracker:hover .tracker__name { color: var(--loot); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  #black-friday-page .missions__grid { grid-template-columns: 1fr; }
  #black-friday-page .dossiers { max-width: 760px; }
  #black-friday-page .section-head--split { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 1000px) {
  #black-friday-page .op { grid-template-columns: 1fr; }
  #black-friday-page .intel__grid { grid-template-columns: 1fr; }
  #black-friday-page .intel .section-head { position: static; }
  #black-friday-page .credits .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  #black-friday-page .hero { min-height: 0; }
  /* One column: the copy's children join the grid so the countdown can sit
     right under the tagline, inside the first screen on a phone. */
  #black-friday-page .hero__grid { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  #black-friday-page .hero__copy { display: contents; }
  #black-friday-page .hero__kicker { order: 1; }
  #black-friday-page .hero__title { order: 2; }
  #black-friday-page .hero__tagline { order: 3; }
  #black-friday-page .timer { order: 4; width: min(100%, 460px); margin-top: 26px; }
  #black-friday-page .hero__lede { order: 5; margin-top: 26px; }
  #black-friday-page .hero__actions { order: 6; width: 100%; }
  #black-friday-page .hero__scene::after { background: linear-gradient(180deg, rgba(8, 6, 26, .7) 0%, rgba(8, 6, 26, .35) 50%, rgba(8, 6, 26, .2) 100%); }
  #black-friday-page .skyline--far { height: 46%; }
  #black-friday-page .skyline--mid { height: 34%; }
  #black-friday-page .skyline--near { height: 20%; }
  #black-friday-page .hud__coords { display: none; }
  #black-friday-page .hud__status { margin-right: auto; }
}
@media (max-width: 719px) {
  #black-friday-page { scroll-padding-top: 152px; }
  #black-friday-page .hero__line--heist { font-size: 1.5em; }
  #black-friday-page .hero__actions .btn { width: 100%; }
  #black-friday-page .pin { --dot: 34px; }
  #black-friday-page .pin--hq { --dot: 40px; }
  #black-friday-page .marker__num { font-size: .75rem; }
  #black-friday-page .marker__label {   /* visible on the map is too cramped; kept in the accessible name */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    padding: 0; border: 0;
    white-space: nowrap;
  }
  #black-friday-page .marker[aria-selected="true"] .marker__dot::after { inset: -6px; }
  #black-friday-page .facts > div { grid-template-columns: 1fr; gap: 2px; }
  #black-friday-page .op__clock { margin-left: 0; width: 100%; }
  #black-friday-page .op__ghost { font-size: 11rem; }

  /* Loot becomes a swipeable track with buttons */
  #black-friday-page .loot__nav { display: flex; }
  #black-friday-page .loot__track {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  #black-friday-page .loot__track::-webkit-scrollbar { display: none; }
  #black-friday-page .item { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
  #black-friday-page .item:hover,
#black-friday-page .item:focus-within { transform: none; }
  #black-friday-page .faq__schedule li { grid-template-columns: 1fr; gap: 0; }
  #black-friday-page .faq__a,
#black-friday-page .faq__item summary { padding-right: 40px; }
  #black-friday-page .tracker { right: 16px; }

  

  

  
  #black-friday-page .hero__kicker { font-size: var(--fs-xs); letter-spacing: .12em; }
}
@media (max-width: 420px) {
  #black-friday-page .timer { padding: 22px 18px 20px; }
  #black-friday-page .board { grid-template-columns: 1fr; }
  #black-friday-page .tracker__time { display: none; }
}

@media (forced-colors: active) {
  #black-friday-page .btn,
#black-friday-page .chip,
#black-friday-page .stamp,
#black-friday-page .marker__dot::before,
#black-friday-page .item,
#black-friday-page .poster__paper { border: 1px solid CanvasText; }
  #black-friday-page .hero__line--heist { color: CanvasText; -webkit-text-stroke: 0; filter: none; }
}

@media print {
  #black-friday-page .hero__scene,
#black-friday-page .tracker,
#black-friday-page .fx-toggle,
#black-friday-page .loot__nav,
#black-friday-page .steps { display: none !important; }
  #black-friday-page { background: #fff; color: #000; }
}

/* A product photo that failed to load: keep the card, drop the broken icon */
#black-friday-page .item__img.is-broken { visibility: hidden; }

/* "MISSION 04 UNLOCKED", shown by heist-motion.js when midnight passes with the page open */
#black-friday-page .unlock-toast {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 120;
  margin: 0;
  padding: 14px 26px 12px;
  background: var(--loot);
  color: #170f00;
  font-weight: 700;
  letter-spacing: .16em;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
}

#black-friday-page a[href^="tel:"] { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Sound: HUD button (next to FX), mixer panel, first-visit pop-up (heist-audio.js)
   -------------------------------------------------------------------------- */
#black-friday-page .hud__bar { position: relative; z-index: 5; }   /* the mixer hangs over the hero below */
#black-friday-page .hud__sound { position: static; }   /* the mixer anchors to the whole HUD bar, so it lines up with its right edge */
#black-friday-page .sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--wire-hi);
  background: rgba(14, 11, 38, .7);
  color: var(--moon);
  font: 700 var(--fs-xs)/1 var(--font);
  letter-spacing: .14em;
  cursor: pointer;
}
#black-friday-page .sound-toggle[hidden] { display: none; }
#black-friday-page .sound-toggle:hover,
#black-friday-page .sound-toggle[aria-expanded="true"] { border-color: var(--scan); }
#black-friday-page .sound-toggle__state { min-width: 3ch; text-align: left; }
#black-friday-page .sound-toggle[data-muted="true"] { color: var(--haze); }
/* A four-bar equaliser: dancing while sound plays, flat when it's off */
#black-friday-page .sound-toggle__eq { display: flex; align-items: flex-end; gap: 2px; width: 16px; height: 13px; }
#black-friday-page .sound-toggle__eq i { flex: 1; height: 100%; background: var(--scan); transform-origin: 50% 100%; transform: scaleY(.55); }
#black-friday-page .sound-toggle__eq i:nth-child(2) { transform: scaleY(.9); background: var(--ultra); }
#black-friday-page .sound-toggle__eq i:nth-child(3) { transform: scaleY(.4); }
#black-friday-page .sound-toggle__eq i:nth-child(4) { transform: scaleY(.75); background: var(--loot); }
/* Off: the bars rest low and grey, still readable as an equaliser */
#black-friday-page .sound-toggle[data-muted="true"] .sound-toggle__eq i { background: var(--haze); opacity: .6; transform: scaleY(.3); }
#black-friday-page .sound-toggle[data-muted="true"] .sound-toggle__eq i:nth-child(2) { transform: scaleY(.45); }
#black-friday-page .sound-toggle[data-muted="true"] .sound-toggle__eq i:nth-child(4) { transform: scaleY(.38); }
/* In the narrow HUD bar the buttons keep their size; the status chip gives way first */
#black-friday-page .hud__sound,
#black-friday-page .sound-toggle,
#black-friday-page .fx-toggle,
#black-friday-page .fx-toggle__dot,
#black-friday-page .sound-toggle__eq { flex: none; }
#black-friday-page.fx-on .sound-toggle[data-muted="false"] .sound-toggle__eq i { animation: heist-eq-bar .8s ease-in-out infinite alternate; }
#black-friday-page.fx-on .sound-toggle[data-muted="false"] .sound-toggle__eq i:nth-child(2) { animation-duration: .55s; animation-delay: -.2s; }
#black-friday-page.fx-on .sound-toggle[data-muted="false"] .sound-toggle__eq i:nth-child(3) { animation-duration: .7s; animation-delay: -.4s; }
#black-friday-page.fx-on .sound-toggle[data-muted="false"] .sound-toggle__eq i:nth-child(4) { animation-duration: .62s; animation-delay: -.1s; }
@keyframes heist-eq-bar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

#black-friday-page .sound-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 40;
  width: min(370px, calc(100vw - 2 * var(--gutter)));
  padding: 20px 20px 16px;
  border: 1px solid var(--wire-hi);
  background: rgba(12, 9, 34, .97);
  color: var(--moon);
  font-family: var(--font);
  letter-spacing: 0;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
#black-friday-page .sound-panel[hidden] { display: none; }
#black-friday-page .sound-panel::before {   /* scan line along the top edge */
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: linear-gradient(90deg, var(--scan), var(--ultra));
}
#black-friday-page .sound-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#black-friday-page .sound-panel__title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; }
#black-friday-page .sound-panel__sub { display: block; margin-top: 3px; color: var(--haze); font-weight: 400; letter-spacing: 0; }

#black-friday-page .sound-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--moon);
  font: 700 var(--fs-xs)/1 var(--font);
  cursor: pointer;
}
#black-friday-page .sound-switch__track { position: relative; width: 46px; height: 26px; border: 1px solid var(--wire-hi); border-radius: 13px; background: var(--night-2); transition: background-color .2s, border-color .2s; }
#black-friday-page .sound-switch__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--haze); transition: transform .25s var(--ease-out), background-color .2s; }
#black-friday-page .sound-switch[aria-checked="true"] .sound-switch__track { background: var(--scan); border-color: var(--scan); }
#black-friday-page .sound-switch[aria-checked="true"] .sound-switch__knob { transform: translateX(20px); background: var(--night); }

#black-friday-page .mixer { display: grid; gap: 14px; margin-top: 14px; transition: opacity .2s; }
#black-friday-page .mixer.is-off { opacity: .55; }
#black-friday-page .mixer__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 4.6em; align-items: center; gap: 6px 12px; }
#black-friday-page .mixer__label { grid-column: 1 / -1; font-size: var(--fs-sm); font-weight: 700; }
#black-friday-page .mixer__label small { margin-left: 6px; color: var(--haze); font-size: .75rem; font-weight: 400; }
#black-friday-page .mixer__mute {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--wire-hi);
  background: var(--night-2);
  color: var(--moon);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
#black-friday-page .mixer__mute::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8.5h4.5l6-5.5v18l-6-5.5H2z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M19 5.5a9.5 9.5 0 0 1 0 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
#black-friday-page .mixer__mute:hover { border-color: var(--scan); }
#black-friday-page .mixer__mute[aria-pressed="true"] { border-color: var(--heat); color: var(--heat); }
#black-friday-page .mixer__mute[aria-pressed="true"]::before { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8.5h4.5l6-5.5v18l-6-5.5H2z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
#black-friday-page .mixer__value { color: var(--haze); font-size: var(--fs-xs); font-weight: 700; text-align: right; white-space: nowrap; }

#black-friday-page .mixer__range {
  --fill: 50%;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
#black-friday-page .mixer__range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--scan) var(--fill), var(--wire) var(--fill)); }
#black-friday-page .mixer__range::-moz-range-track { height: 6px; background: var(--wire); }
#black-friday-page .mixer__range::-moz-range-progress { height: 6px; background: var(--scan); }
#black-friday-page .mixer__range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 3px solid var(--scan);
  background: var(--moon);
  transform: rotate(45deg);
  -webkit-appearance: none;
          appearance: none;
}
#black-friday-page .mixer__range::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--scan); border-radius: 0; background: var(--moon); transform: rotate(45deg); }
#black-friday-page .mixer__range:focus-visible { outline-offset: 4px; }

/* The first-visit pop-up: a small non-modal window under the header's right end,
   its pointer aimed at the "Ήχος" button. heist-audio.js sets --intro-top,
   --intro-right and --arrow-right from the header and button positions. */
#black-friday-page .sound-intro {
  --cut: 18px;
  position: fixed;
  inset: auto;
  top: var(--intro-top, 150px);
  right: var(--intro-right, 16px);
  z-index: 120;
  width: min(380px, calc(100vw - 24px));
  max-width: none;
  margin: 0;
  padding: 24px 24px 22px;
  border: 0;
  background: transparent;
  color: var(--moon);
  font-family: var(--font);
  overflow: visible;
  isolation: isolate;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .55));
}
/* Corners cut top-left and bottom-right, so the top-right edge stays clean for the pointer */
#black-friday-page .sound-intro::before,
#black-friday-page .sound-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
#black-friday-page .sound-intro::before { inset: 0; background: linear-gradient(210deg, var(--scan), var(--wire-hi) 50%, var(--ultra)); }
#black-friday-page .sound-intro::after { inset: 1.5px; --cut: 17.5px; background: radial-gradient(90% 70% at 0% 0%, rgba(169, 112, 255, .16), transparent 60%), #0e0b28; }
#black-friday-page .sound-intro__arrow {
  position: absolute;
  top: -8px;
  right: var(--arrow-right, 40px);
  width: 16px;
  height: 16px;
  border-top: 1.5px solid var(--scan);
  border-left: 1.5px solid var(--scan);
  background: #0e0b28;
  transform: rotate(45deg);
}
#black-friday-page .sound-intro__arrow[hidden] { display: none; }
#black-friday-page.fx-on .sound-intro[open] { animation: heist-intro-in .45s var(--ease-out); transform-origin: calc(100% - var(--arrow-right, 40px)) 0; }
@keyframes heist-intro-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
#black-friday-page .sound-intro__eq { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
#black-friday-page .sound-intro__eq i { width: 5px; height: 45%; background: var(--scan); box-shadow: 0 0 8px rgba(69, 226, 255, .6); transform-origin: 50% 100%; }
#black-friday-page .sound-intro__eq i:nth-child(2) { height: 80%; }
#black-friday-page .sound-intro__eq i:nth-child(3) { height: 60%; background: var(--ultra); box-shadow: 0 0 8px rgba(169, 112, 255, .6); }
#black-friday-page .sound-intro__eq i:nth-child(4) { height: 100%; }
#black-friday-page .sound-intro__eq i:nth-child(5) { height: 35%; background: var(--loot); box-shadow: 0 0 8px rgba(255, 209, 71, .6); }
#black-friday-page.fx-on .sound-intro__eq i { animation: heist-eq .9s ease-in-out infinite alternate; }
#black-friday-page.fx-on .sound-intro__eq i:nth-child(2) { animation-delay: -.3s; }
#black-friday-page.fx-on .sound-intro__eq i:nth-child(3) { animation-delay: -.6s; }
#black-friday-page.fx-on .sound-intro__eq i:nth-child(4) { animation-delay: -.15s; }
#black-friday-page.fx-on .sound-intro__eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes heist-eq { from { transform: scaleY(.3); } }
#black-friday-page .sound-intro__title { margin-top: 14px; font-size: 1.375rem; line-height: 1.2; }
#black-friday-page .sound-intro__text { margin-top: 10px; color: var(--haze); font-size: var(--fs-sm); line-height: 1.55; }
#black-friday-page .sound-intro__text strong { color: var(--moon); }
#black-friday-page .sound-intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
#black-friday-page .sound-intro__actions .btn { flex: 1 1 auto; min-height: 46px; }

@media (max-width: 480px) {
  #black-friday-page .hud__op { display: none; }   /* room for SOUND and FX next to the status chip */
  #black-friday-page .hud__bar { gap: 10px; }
  #black-friday-page .sound-toggle,
#black-friday-page .fx-toggle { padding: 0 10px; }
}
@media (max-width: 359px) {
  #black-friday-page .sound-toggle__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}