/* ==========================================================================
   Heads Up (هدشات) — theme tokens + home showcase.
   Field-ops olive and brass from the game's UI, with the store art's sky,
   lime reticle and red laser seen through a scope.
   ========================================================================== */

@font-face {
  font-family: "Saira Stencil One";
  src: url("../../../fonts/saira-stencil-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("../../../fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

[data-game="heads-up"] {
  --g-bg: #12140e;
  --g-bg-2: #1a1d14;
  --g-panel: #262a1e;
  --g-ink: #ebe2c8;
  --g-ink-2: #c8bfa2;
  --g-ink-3: #8f8c74;
  --g-accent: #dda83f;
  --g-accent-shade: #b57a1e;
  --g-lime: #c4f03f;
  --g-laser: #ff3b30;
  --g-sky: #2aa5f5;
  --g-brick: #c8553a;
  --g-line: rgb(220 211 184 / 0.12);
  --g-stencil: "Saira Stencil One", "Barlow Condensed", Impact, sans-serif;
  --g-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --g-display: var(--g-stencil);
}

:root[lang="fa"] [data-game="heads-up"],
:root[lang="fa"][data-game="heads-up"] {
  --g-display: var(--font-persian);
}

/* Brass button, squared like field kit. */
.btn--hu {
  --btn-ink: #12140e;
  background: linear-gradient(180deg, #f0cc7a 0%, #dda83f 45%, #b57a1e 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgb(255 240 200 / 0.7),
    0 3px 0 #6b4510,
    0 14px 28px -12px rgb(221 168 63 / 0.55);
  font-family: var(--g-cond), var(--font-persian);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:root[lang="fa"] .btn--hu {
  font-family: var(--font-persian);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0;
}

.btn--hu:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 1px 0 rgb(255 240 200 / 0.5), 0 1px 0 #6b4510;
}

.chip--hu {
  border-radius: 4px;
  background: rgb(38 42 30 / 0.7);
  box-shadow: inset 0 0 0 1px var(--g-line);
  color: var(--g-ink-2);
  font-family: var(--g-cond), var(--font-persian);
  letter-spacing: 0.04em;
}

:root[lang="fa"] .chip--hu {
  font-family: var(--font-persian);
  letter-spacing: 0;
}

.chip--hu .chip__dot {
  background: var(--g-lime);
  box-shadow: 0 0 0 3px rgb(196 240 63 / 0.22);
}

/* Field ground: olive, a faint survey grid, corner brackets. */
.hu-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at var(--hu-x, 70%) 50%, rgb(122 140 74 / 0.22), transparent 70%),
    linear-gradient(rgb(220 211 184 / 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgb(220 211 184 / 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(120% 100% at 50% 0%, #1d2116 0%, #12140e 60%, #0b0d08 100%);
}

[dir="rtl"] .hu-field {
  --hu-x: 30%;
}

.hu-corners {
  position: absolute;
  inset: clamp(16px, 3vw, 40px);
  pointer-events: none;
}

.hu-corners::before,
.hu-corners::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgb(220 211 184 / 0.28);
}

.hu-corners::before {
  top: 0;
  inset-inline-start: 0;
  border-inline-end: 0;
  border-bottom: 0;
}

.hu-corners::after {
  bottom: 0;
  inset-inline-end: 0;
  border-inline-start: 0;
  border-top: 0;
}

/* Logo lockup: the big name with two bullet holes, the stencil under it. */
.hu-title {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: start;
}

.hu-title__main {
  position: relative;
  color: var(--g-ink);
  font-family: var(--g-display);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 0 #050604, 0 18px 40px rgb(0 0 0 / 0.6);
}

:root[lang="en"] .hu-title__main {
  font-weight: 400;
  letter-spacing: 0.02em;
}

:root[lang="fa"] .hu-title__main {
  line-height: 1.25;
}

.hu-title__sub {
  color: var(--g-accent);
  font-family: var(--g-stencil);
  font-size: 0.32em;
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1;
}

:root[lang="en"] .hu-title__sub {
  font-family: var(--font-persian);
  font-weight: 800;
  letter-spacing: 0;
  font-size: 0.36em;
}

.hu-hole {
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: radial-gradient(circle, #050604 0 32%, #2a2c22 34% 48%, #6f6a55 50% 56%, transparent 58%);
  pointer-events: none;
}

.hu-hole::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(35deg, transparent 47%, rgb(5 6 4 / 0.8) 48% 52%, transparent 53%),
    linear-gradient(-60deg, transparent 47%, rgb(5 6 4 / 0.7) 48% 51%, transparent 52%),
    linear-gradient(100deg, transparent 47%, rgb(5 6 4 / 0.6) 48% 51%, transparent 52%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}

.hu-hole--a {
  top: 18%;
  inset-inline-start: 22%;
}

.hu-hole--b {
  top: 46%;
  inset-inline-start: 66%;
  width: 0.16em;
  height: 0.16em;
}

/* ---------- The scope (home art and the game page hero) ----------------- */

.hu-scope {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  aspect-ratio: 1;
}

.hu-scope__lens {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  overflow: hidden;
  background: #2aa5f5 url("../../../img/heads-up/sunburst.webp") center / cover;
  box-shadow:
    0 0 0 10px #0b0d08,
    0 0 0 12px #6b4510,
    0 0 0 14px #dda83f,
    0 0 0 22px #0b0d08,
    0 40px 90px -20px rgb(0 0 0 / 0.9);
  cursor: crosshair;
}

.hu-scope__lens img {
  position: absolute;
  inset-inline-start: 50%;
  bottom: -4%;
  width: 96%;
  translate: calc(-50% * var(--dir)) 0;
  transition: transform 1.2s var(--ease-out);
}

/* Glass: inner shadow and a sweep of light. */
.hu-scope__lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgb(255 255 255 / 0.28), transparent 26%),
    radial-gradient(circle, transparent 58%, rgb(0 0 0 / 0.55) 100%);
  pointer-events: none;
}

.hu-reticle {
  position: absolute;
  inset: 7%;
  pointer-events: none;
  transition: transform 600ms var(--ease-out);
}

.hu-reticle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hu-dot {
  /* Sits on the laser dot painted into the key art (physical, the art is not mirrored). */
  position: absolute;
  top: 46%;
  left: 55.8%;
  width: 22px;
  height: 22px;
  translate: -50% -50%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(255 59 48 / 0.7), 0 0 22px 6px rgb(255 59 48 / 0.45);
  pointer-events: none;
  animation: hu-lock 2.6s ease-out infinite;
}

.hu-hud {
  position: absolute;
  color: var(--g-ink-2);
  font-family: var(--g-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: none;
  unicode-bidi: isolate;
  direction: ltr;
}

.hu-hud b {
  color: var(--g-lime);
  font-weight: 600;
}

.hu-hud--tl { top: 2%; left: 0; }
.hu-hud--tr { top: 2%; right: 0; text-align: right; }
.hu-hud--bl { bottom: 2%; left: 0; }
.hu-hud--br { bottom: 2%; right: 0; text-align: right; }

.hu-scope:hover .hu-reticle {
  transform: scale(0.9);
}

.hu-scope:hover .hu-scope__lens img {
  transform: scale(1.04);
}

@keyframes hu-lock {
  0% { box-shadow: 0 0 0 2px rgb(255 59 48 / 0.75), 0 0 22px 6px rgb(255 59 48 / 0.45); }
  60% { box-shadow: 0 0 0 14px rgb(255 59 48 / 0), 0 0 22px 6px rgb(255 59 48 / 0.2); }
  100% { box-shadow: 0 0 0 14px rgb(255 59 48 / 0), 0 0 22px 6px rgb(255 59 48 / 0.45); }
}

.hu-scope:hover .hu-dot {
  animation-duration: 0.9s;
}

/* ---------- Home showcase ------------------------------------------------- */

.showcase--heads-up .showcase__title {
  font-size: clamp(3.25rem, 2.2rem + 4.6vw, 6rem);
}