/* ============================================================================
   win-8q3d — NOVA789, the arcade layout in the Brand's own colours.

   Layout is open-6t2n's (INFYPLUS88's arcade page). The finish is not:
   NOVA789's site and banners are crimson and hot pink on near-black with
   white type and white-to-pink numerals, so that is what this sheet paints.
   base.css is still loaded because the registration sheet is shared code
   reading its colours from those tokens, so the tokens are re-pointed here.
   ========================================================================= */

:root {
  --void: #0a0306;
  --red: #e0173f;
  --red-deep: #5a0a1c;
  --gold: #ff5f8a;
  --gold-hi: #ffffff;
  --gold-dim: #ff2d63;
  --gold-tint: rgba(255, 95, 138, .16);
  --ink: #ffffff;
  --ink-2: #ffd6df;
  --ink-3: #d99aa9;

  /* Shared-sheet tokens, re-pointed. */
  --ground: #14040a;
  --raise: #200612;
  --panel: rgba(255, 255, 255, .06);
  --panel-2: rgba(255, 255, 255, .1);
  --hair: rgba(255, 95, 138, .35);
  --ok: #3ddc84;
  --act: var(--gold);
  --r: 12px;
  --r-s: 8px;
}

/* base.css puts 46px of vertical padding on every <section>; this layout
   sizes its own blocks. */
section { padding: 0; }

html, body { margin: 0; overflow-x: clip; }
body {
  min-height: 100svh;
  color: var(--ink);
  font-size: 16px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(224, 23, 63, .8), transparent 60%),
    radial-gradient(70% 40% at 100% 55%, rgba(224, 23, 63, .3), transparent 70%),
    linear-gradient(180deg, #2a0612 0%, var(--void) 55%, #000 100%);
}
/* The light streaks in their creative, drawn once, very faint. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .045) 40%, transparent 42%),
    linear-gradient(115deg, transparent 58%, rgba(255, 255, 255, .03) 60%, transparent 62%);
}

.page {
  position: relative; z-index: 1;
  /* Phone: the page is the screen. PC: it stops at 960px, the same cap the
     other two landers use, and the ground shows below. */
  width: 100%; max-width: 430px; min-height: min(100svh, 960px);
  margin: 0 auto; padding: 10px 14px 8px;
  display: flex; flex-direction: column; gap: 9px;
}

/* --- header ----------------------------------------------------------- */
.head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.head img { width: 132px; height: auto; }
.live {
  justify-self: end; display: inline-grid; grid-auto-flow: column; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(0, 0, 0, .35);
  font-family: var(--body); font-size: 11.5px; font-weight: 700; color: var(--ink-2);
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

/* --- hero ------------------------------------------------------------- */
.hero {
  position: relative; flex: 1 1 auto; min-height: 196px; max-height: 440px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 95, 138, .35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .04);
  background: #2a0612;
}
.hero .art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 30%;
}
/* Left-to-right fade so the type sits on dark and the character stays whole. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 3, 6, .97) 0%, rgba(10, 3, 6, .9) 34%, rgba(10, 3, 6, .45) 56%, rgba(10, 3, 6, .05) 100%),
    linear-gradient(0deg, rgba(10, 3, 6, .85) 0%, transparent 40%);
}
.hero-txt { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 16px; max-width: 74%; }
.kick {
  align-self: flex-start; padding: 3px 9px; border-radius: 6px;
  background: var(--gold); color: #3a0412;
  font-family: var(--display); font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
}
.hero h1 {
  font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.01em;
  font-size: clamp(30px, 8.6vw, 36px); color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .6);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-dim) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}
.sub { font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }

/* --- the six tiles ---------------------------------------------------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile {
  -webkit-appearance: none; appearance: none;
  position: relative; min-height: 62px;
  display: grid; align-content: center; gap: 1px;
  padding: 8px 30px 8px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(255, 95, 138, .3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #3a0a18, #150409);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: inherit; text-align: start; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.tile b {
  font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(180deg, #ffffff, #ffd6df 60%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tile b small { font-size: 12.5px; font-weight: 800; margin-inline-start: 2px; }
.tile span { font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
/* The affordance: a gold ring with "+" that turns to "×" when open. */
.tile::after {
  content: '+'; position: absolute; right: 9px; top: 50%; translate: 0 -50%;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--gold); color: var(--gold);
  font: 800 15px/1 var(--display);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.tile[data-state="open"] { border-color: var(--gold); background: linear-gradient(180deg, #6a0e2a, #2a0612); transform: translateY(-1px); }
.tile[data-state="open"]::after { transform: rotate(45deg); background: var(--gold); color: #3a0412; }
.tile:active { transform: scale(.985); }

/* Fixed-height strip the tiles write into; the reason the page can carry a
   mechanic without growing. */
.detail {
  position: relative; min-height: 44px;
  display: grid; align-items: center;
  padding: 7px 12px 7px 16px;
  border-radius: var(--r-s);
  border: 1px dashed rgba(255, 95, 138, .35);
  background: rgba(0, 0, 0, .35);
  font-family: var(--body); font-size: 12.5px; line-height: 1.4; color: var(--ink-3);
}
.detail::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold); opacity: .5; }
.detail[data-state="open"] { color: #fff; border-style: solid; border-color: var(--gold); background: rgba(255, 95, 138, .1); }
.detail[data-state="open"]::before { opacity: 1; }

/* --- proof ------------------------------------------------------------ */
.proof {
  position: relative; flex: 0 1 auto; height: 92px; min-height: 84px; border-radius: var(--r); overflow: hidden;
  border: 1px solid rgba(255, 95, 138, .3); background: #1e0510;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.proof img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.proof::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 3, 6, .94) 0%, rgba(10, 3, 6, .8) 45%, rgba(10, 3, 6, .1) 100%); }
.proof-txt { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; gap: 1px; padding: 10px 14px; }
.proof-txt span { font-family: var(--body); font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.proof-txt b {
  font-family: var(--display); font-weight: 800; font-size: 25px; line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-dim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-txt small { font-family: var(--body); font-size: 11px; color: var(--ink-3); }

/* --- providers, cta, footer ------------------------------------------- */
.prov { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.prov img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  padding: 4px; border-radius: 8px;
  background: linear-gradient(180deg, #24071a, #0f0308);
  border: 1px solid rgba(255, 95, 138, .18);
}

.act {
  -webkit-appearance: none; appearance: none;
  position: relative; width: 100%; min-height: 60px;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #ffe3ea 100%);
  color: #c8102e;
  font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1.15;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 10px 28px rgba(255, 95, 138, .32), 0 4px 0 #8a0f30;
  cursor: pointer;
}
.act small { display: block; font-family: var(--body); font-size: 11.5px; font-weight: 600; opacity: .85; }
.act:active { transform: translateY(2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 6px 18px rgba(255, 95, 138, .25), 0 2px 0 #8a0f30; }

.rgfoot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.rgfoot .age {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1.5px solid var(--ink-3); border-radius: 999px; color: var(--ink-3);
  font-family: var(--display); font-size: 9.5px; font-weight: 800;
}
.rgfoot p { font-family: var(--body); font-size: 10.5px; line-height: 1.35; color: var(--ink-3); }

/* --- shared registration sheet, on this ground ------------------------ */
input[type="tel"] { background: rgba(255, 255, 255, .06); border-color: var(--hair); color: #fff; }
input[type="tel"]::placeholder { color: var(--ink-3); }
.sheet .handle { background: rgba(255, 255, 255, .25); }
.bar { background: rgba(255, 255, 255, .12); }