/* HGM — Lose Your Mind — loud.hgm.gg
   Colours: acid #C6FF1F / ink #0B0B0B / tone #B8ED1C. Nothing else. */

@font-face {
  font-family: "Archivo Black";
  src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --acid: #C6FF1F;
  --ink: #0B0B0B;
  --tone: #B8ED1C;
  --gap: 16px;
  --radius: 0px;
  --shadow-hard: 12px 12px 0 0 var(--ink);
  --shadow-soft: 6px 6px 0 0 var(--ink);
  --btn-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--acid);
  color: var(--ink);
}

body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: relative;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- background ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--tone);
}

.bg::before {
  /* flat tone rings motif behind the video, no gradient — just the supplied SVG */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220vmax;
  height: 220vmax;
  transform: translate(-50%, -50%);
  background: url("brand/rings_motif.svg") center center no-repeat;
  background-size: contain;
  opacity: 0.5;
}

.bg__video,
.bg__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.bg__poster { display: none; }

body.no-video .bg__video { display: none; }
body.no-video .bg__poster { display: block; }

.bg__grain {
  position: absolute;
  inset: 0;
  background-image: url("brand/grain_tile_512.png");
  background-repeat: repeat;
  background-size: 512px 512px;
  opacity: 1;
  pointer-events: none;
}

/* ---------- layout ---------- */

.stage {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content:center matters on wide/short viewports (desktop) where
     the content column is shorter than 100vh — without it the flex column
     sits flush at the top, leaving a huge gap below, and the .bg::before
     rings motif (centered on the full viewport) end up looking offset
     from the content instead of framing it. On mobile the content is
     usually taller than the viewport anyway so this is a no-op there. */
  justify-content: center;
  min-height: 100vh;
  gap: 18px;
}

.logo {
  width: 120px;
  height: auto;
  margin-bottom: 4px;
}

/* ---------- type ---------- */

.slabby,
.status,
.countdown__num,
.countdown__lbl,
.btn,
.footer-title {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.skew {
  display: inline-block;
  transform: skewX(-10deg);
}

/* ---------- cover ---------- */

.cover-wrap {
  width: 100%;
  max-width: 320px;
  /* box-shadow is offset +12px/+12px (right/down), so the room for it
     needs to be on the right+bottom, not top+right (was backwards). */
  padding: 0 12px 12px 0;
}

.cover {
  width: 100%;
  /* the img has width/height="1200" attributes for CLS-safe intrinsic
     sizing before load; without an explicit `height` here the browser's
     presentational hint from that attribute wins as a literal 1200px,
     overriding aspect-ratio entirely (this is what broke it — 308x1200
     instead of square). height: auto lets aspect-ratio do the sizing. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--ink);
  animation: pulse 0.3617s ease-in-out infinite;
  animation-play-state: paused;
}

body.playing-preview .cover,
body.pulse-on .cover {
  animation-play-state: running;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ---------- status + countdown ---------- */

.status {
  font-size: 15px;
  text-align: center;
  margin: 4px 0 0;
}

.countdown {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: -4px;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  background: var(--ink);
  color: var(--acid);
  padding: 8px 4px 6px;
  border: 3px solid var(--ink);
}

.countdown__num {
  font-size: 26px;
  transform: skewX(-10deg);
}

.countdown__lbl {
  font-size: 10px;
  opacity: 0.8;
  margin-top: 2px;
}

/* ---------- buttons ---------- */

.btn {
  width: 100%;
  min-height: var(--btn-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.06s ease;
}

.btn--primary {
  background: var(--ink);
  color: var(--acid);
  box-shadow: var(--shadow-soft);
  font-size: 24px;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--acid);
  color: var(--ink);
}

.btn--secondary {
  background: var(--acid);
  color: var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
  font-size: 15px;
  flex: 1;
}

.btn--secondary:hover,
.btn--secondary:focus-visible,
.btn--secondary[aria-pressed="true"] {
  background: var(--ink);
  color: var(--acid);
}

.btn:active { transform: translate(2px, 2px); }

.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* ---------- platforms ---------- */

.platforms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.platforms .btn--secondary { flex: none; }

/* ---------- socials ---------- */

.socials {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.socials__link {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  background: var(--acid);
  color: var(--ink);
}

.socials__link:hover,
.socials__link:focus-visible {
  background: var(--ink);
  color: var(--acid);
}

.socials__link svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  padding: 18px 0 28px;
  color: var(--ink);
  opacity: 0.75;
}

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[hidden] { display: none; }

.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.92;
}

.modal__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

.modal__video {
  width: 100%;
  border: 4px solid var(--acid);
  box-shadow: 12px 12px 0 0 var(--acid);
  background: var(--ink);
}

.modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 40px;
  height: 40px;
  min-height: 40px;
  background: var(--acid);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__close:hover,
.modal__close:focus-visible {
  background: var(--ink);
  color: var(--acid);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cover { animation: none !important; }
  .btn, .socials__link { transition: none; }
}

/* ---------- small screens ---------- */

@media (max-width: 360px) {
  .btn-row { flex-direction: column; }
  .countdown__unit { min-width: 48px; }
}

/* ---------- wider screens: keep the column, let the bg breathe ---------- */

@media (min-width: 640px) {
  .stage { padding-top: 48px; }
  .cover-wrap { max-width: 360px; }
}