/* 워니픽 — arcade marquee world */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap");

@font-face {
  font-family: "DSEG7";
  src: url("https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2") format("woff2");
  font-display: swap;
}

:root {
  --aisle: #080913;
  --aisle-2: #0d1020;
  --aisle-3: #141833;
  --rule: #12305a;
  --rule-hi: #1b5e86;
  --cyan: #19f0f7;
  --cyan-deep: #0a6f8c;
  --magenta: #ff3fb0;
  --phosphor: #f6ec5a;
  --ivory: #f7f5ea;
  --ivory-dim: #c9d6de;
  --muted: #8d9bb0;

  --display: "Black Han Sans", "Pretendard Variable", sans-serif;
  --sans: "Pretendard Variable", "Pretendard", system-ui, sans-serif;
  --seg: "DSEG7", "Pretendard Variable", monospace;

  /* one comp pixel on the 2688-wide frame */
  --u: calc(min(100vw, 2688px) / 2688);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--aisle); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--aisle);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--aisle); }
:focus-visible { outline: 3px solid var(--phosphor); outline-offset: 4px; border-radius: 4px; }
html { scrollbar-color: var(--cyan-deep) var(--aisle); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--phosphor); color: var(--aisle); padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── header ─────────────────────────────────────────── */
.site-head {
  position: relative;
  z-index: 10;
  height: max(64px, calc(116 * var(--u)));
  border-bottom: max(1px, calc(4 * var(--u))) solid var(--rule-hi);
  display: flex;
  align-items: center;
  padding: 0 calc(86 * var(--u)) 0 calc(110 * var(--u));
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: calc(22 * var(--u));
  text-decoration: none;
  color: var(--ivory);
  flex: 0 0 auto;
}
.logo-kr {
  font-family: var(--display);
  font-size: max(26px, calc(68 * var(--u)));
  line-height: 1;
  display: inline-flex;
  align-items: flex-start;
}
.logo-kr svg { width: .42em; height: .42em; margin-left: .06em; color: var(--cyan); }
.logo-en { font-weight: 600; font-size: max(14px, calc(38 * var(--u))); letter-spacing: .01em; }

.nav {
  position: absolute;
  left: calc(1075 * var(--u));
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(105 * var(--u));
}
.nav a {
  position: relative;
  font-size: max(15px, calc(40 * var(--u)));
  font-weight: 600;
  text-decoration: none;
  color: var(--ivory);
  padding: calc(14 * var(--u)) 0;
  transition: color .2s;
}
.nav a:hover { color: var(--cyan); }
.nav a[aria-current="page"] { color: var(--cyan); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute; left: -8%; right: -8%; bottom: calc(-6 * var(--u));
  height: max(2px, calc(5 * var(--u)));
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(25, 240, 247, .6);
}
.head-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: max(40px, calc(64 * var(--u)));
  padding: 0 calc(46 * var(--u));
  border: max(1.5px, calc(3 * var(--u))) solid var(--cyan);
  border-radius: 999px;
  color: var(--cyan);
  font-weight: 600;
  font-size: max(14px, calc(34 * var(--u)));
  text-decoration: none;
  transition: background .2s, color .2s, box-shadow .2s;
}
.head-cta:hover { background: var(--cyan); color: var(--aisle); box-shadow: 0 4px 24px rgba(25, 240, 247, .35); }
.menu-btn { display: none; }

/* ── hero stage (measured from the approved comp) ───── */
.stage {
  position: relative;
  height: calc(1180 * var(--u)); /* comp: header 0–112, stage 112–1296, score bar 1296–1520 */
  overflow: hidden;
  isolation: isolate;
}
.stage > * { position: absolute; }
.stage picture { display: block; }
.stage picture img { width: 100%; height: 100%; object-fit: inherit; object-position: inherit; }
.stage .art-back {
  left: calc(1950 * var(--u)); top: calc(38 * var(--u));
  width: calc(738 * var(--u)); height: calc(1150 * var(--u));
  object-fit: contain; object-position: 0 100%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.stage .art-main {
  left: calc(1080 * var(--u)); top: calc(28 * var(--u));
  width: calc(1080 * var(--u)); height: calc(1160 * var(--u));
  object-fit: contain; object-position: 50% 100%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 6%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 6%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.kicker {
  left: calc(88 * var(--u)); top: calc(184 * var(--u));
  margin: 0;
  font-size: calc(32 * var(--u));
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--cyan);
  z-index: 2;
}
.headline {
  left: calc(84 * var(--u)); top: calc(236 * var(--u));
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(146 * var(--u));
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ivory);
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  z-index: 2;
}
.headline span { display: block; white-space: nowrap; }
.lede {
  left: calc(88 * var(--u)); top: calc(560 * var(--u));
  width: calc(1000 * var(--u));
  margin: 0;
  font-size: calc(38 * var(--u));
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ivory-dim);
  z-index: 2;
}
.price {
  left: calc(88 * var(--u)); top: calc(700 * var(--u));
  margin: 0;
  font-size: calc(44 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--phosphor);
  white-space: nowrap;
  z-index: 2;
}
.coin {
  left: calc(93 * var(--u)); top: calc(829 * var(--u));
  width: calc(684 * var(--u)); height: calc(108 * var(--u));
  z-index: 2;
}
.more {
  left: calc(848 * var(--u)); top: calc(860 * var(--u));
  z-index: 2;
}

/* INSERT COIN — beveled marquee button */
.coin-btn {
  --bev: calc(26 * var(--u));
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(28 * var(--u));
  width: 100%; height: 100%;
  color: var(--cyan);
  text-decoration: none;
  font-weight: 700;
  font-size: calc(31 * var(--u));
  letter-spacing: .02em;
  white-space: nowrap;
  filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(25, 240, 247, .55));
  transition: filter .25s var(--ease-out), transform .25s var(--ease-out);
}
.coin-btn::before, .coin-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(var(--bev) 0, calc(100% - var(--bev)) 0, 100% var(--bev), 100% calc(100% - var(--bev)), calc(100% - var(--bev)) 100%, var(--bev) 100%, 0 calc(100% - var(--bev)), 0 var(--bev));
}
.coin-btn::before { background: var(--cyan); }
.coin-btn::after { inset: max(2px, calc(6 * var(--u))); background: linear-gradient(180deg, #0a2447, #06142b); }
.coin-btn:hover { filter: drop-shadow(0 0 calc(26 * var(--u)) rgba(25, 240, 247, .8)); transform: translateY(-2px); }
.coin-btn:active { transform: translateY(1px); }
.coin-btn .invader { width: 1.6em; height: auto; margin-right: calc(10 * var(--u)); }
.coin-btn .chev { width: 1.05em; height: 1.05em; }
.coin-btn .line {
  position: absolute; inset: calc(13 * var(--u)); z-index: -1;
  --bev: calc(18 * var(--u));
  background: rgba(25, 240, 247, .55);
  clip-path: polygon(var(--bev) 0, calc(100% - var(--bev)) 0, 100% var(--bev), 100% calc(100% - var(--bev)), calc(100% - var(--bev)) 100%, var(--bev) 100%, 0 calc(100% - var(--bev)), 0 var(--bev));
}
.coin-btn .line::after {
  content: ""; position: absolute; inset: max(1px, calc(2 * var(--u)));
  background: #081a36;
  clip-path: inherit;
}
.coin-btn .coin-en { font-family: var(--sans); font-weight: 800; letter-spacing: .06em; }

.text-link {
  font-size: calc(32 * var(--u));
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: max(1px, calc(3 * var(--u)));
  text-decoration-color: var(--ivory-dim);
  transition: color .2s, text-decoration-color .2s;
}
.text-link:hover { color: var(--cyan); text-decoration-color: var(--cyan); }

/* score bar */
.scorebar {
  position: relative;
  z-index: 3;
  height: calc(224 * var(--u));
  border-top: max(1px, calc(3 * var(--u))) solid var(--rule);
  background: var(--aisle);
  display: grid;
  grid-template-columns: calc(829 * var(--u)) calc(860 * var(--u)) 1fr;
  align-items: center;
  padding: 0 0 calc(30 * var(--u));
  margin: 0;
}
.score {
  display: flex; align-items: center; gap: calc(36 * var(--u));
  justify-content: center;
  margin: 0;
  height: calc(110 * var(--u));
}
.score:first-child { justify-content: flex-start; padding-left: calc(180 * var(--u)); }
.score:last-child { padding-right: calc(128 * var(--u)); }
.score + .score { border-left: max(1px, calc(3 * var(--u))) solid var(--rule); }
.score dt { display: flex; align-items: center; gap: calc(36 * var(--u)); font-size: calc(40 * var(--u)); color: #cfeef4; font-weight: 500; }
.score dt svg { width: calc(76 * var(--u)); height: calc(76 * var(--u)); color: var(--cyan); margin-right: calc(40 * var(--u)); }
.score dd { margin: 0; display: flex; align-items: baseline; gap: calc(10 * var(--u)); color: var(--cyan); font-size: calc(52 * var(--u)); font-weight: 700; }
.seg {
  font-family: var(--seg);
  font-size: calc(62 * var(--u));
  line-height: 1;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 calc(18 * var(--u)) rgba(25, 240, 247, .55);
  font-variant-numeric: tabular-nums;
}
.score dd .unit { color: var(--cyan); }
.score dd .sep { color: var(--cyan); padding: 0 .15em; }