/* =========================================================================
   DRAG & SHOT — game landing site
   Mobile-first, vanilla CSS. Design tokens pulled from the title-screen art.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
/* 네오 둥근모(NeoDunggeunmo) 단일 폰트로 통일 (로컬 self-host) */
@font-face {
  font-family: "NeoDunggeunmo";
  src: url("../assets/fonts/neodgm.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Galmuri11 — same font the in-game version badge uses (main_menu_screen.dart) */
@font-face {
  font-family: "Galmuri11";
  src: url("../assets/fonts/Galmuri11.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galmuri11";
  src: url("../assets/fonts/Galmuri11-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ----------------------------------------------------- */
:root {
  --sky-top:    #d8edfb;
  --sky-mid:    #a9d6f5;
  --sky-bottom: #7cb8e8;
  --skyline:    #6aa6da;
  --ball:       #e8742c;
  --ball-dark:  #c75a1e;
  --rim:        #e85d2a;
  --navy:       #1b3a5c;
  --navy-deep:  #122a44;
  --white:      #ffffff;
  --card:       #ffffff;
  --ink:        #20364a;
  --ink-soft:   #51697e;
  --shadow:     #16314d;
  --line:       #cfe0ef;

  /* 네오 둥근모 폰트로 전체 텍스트(픽셀/본문/모노 포함) 통일 */
  --pixel:       "NeoDunggeunmo", monospace;
  --sans:        "NeoDunggeunmo", monospace;
  --sans-body:   "NeoDunggeunmo", monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 64px;
  --maxw: 1160px;
  --hard: 4px 4px 0 var(--shadow);
  --hard-sm: 3px 3px 0 var(--shadow);
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  font-family: var(--sans-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* sticky footer: on short pages / when mobile Safari's toolbar collapses
   and grows the (dvh-tracked) viewport, main absorbs the extra space so
   the navy footer always reaches the true bottom edge instead of leaving
   a gap of body's white background below it */
main { flex: 1 0 auto; }

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

/* crisp scaling for pixel-art sprites pulled from the game */
.px {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--ball);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.pixel { font-family: var(--pixel); line-height: 1.5; letter-spacing: 0; }

/* ---- Section scaffolding ---------------------------------------------- */
.section { padding-block: clamp(56px, 9vw, 104px); }
.section--tint { background: #eef6fd; border-block: 3px solid var(--line); }
/* pull the back-link + content up closer to the title hero */
.section--tight { padding-top: clamp(26px, 4vw, 40px); }

.section-head { text-align: center; margin-bottom: clamp(28px, 5vw, 52px); }
.section-head h2 {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: clamp(20px, 4.5vw, 30px);
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: 0;
  word-spacing: -0.18em;
  line-height: 1.55;
  text-shadow: 2px 2px 0 #b9d6ee;
}
.section-head p {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--ink-soft);
  font-family: var(--sans-body);
  font-size: clamp(14px, 2vw, 16px);
}
#features .section-head { margin-bottom: clamp(42px, 6.5vw, 72px); }
#features .section-head h2 { font-size: clamp(26px, 5.8vw, 40px); margin-bottom: 26px; }
#features .section-head p  { font-size: clamp(15px, 2.2vw, 18px); max-width: 68ch; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  word-spacing: -0.1em;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  border: 3px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--hard);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
  text-align: center;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }

.btn--primary { background: var(--ball); color: #fff; border-color: var(--navy); }

/* ---- Header / navigation ---------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(27, 58, 92, .08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 24px rgba(27, 58, 92, .1);
}
.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* left cluster: version badge + brand wordmark */
.nav__left { display: flex; align-items: center; gap: 7px; }

/* brand (left title) */
.brand { display: flex; align-items: center; gap: 10px; }
.brand__wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* full size on wider screens; on narrow phones the 6.5vw cap takes over so
     the title shrinks and stops shoving the menu button off the right edge
     (iPhone mini/SE, small Androids). The revealed .nav__reveal container
     width below is scaled to match. */
  height: min(calc(var(--header-h) * 4 / 7 * 0.9), 6.5vw);
  white-space: nowrap;
  /* same in-game overlay shadow spec as the hero wordmark: y:2, blur:1, 50% black */
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5));
}
.brand__wordmark img { display: block; height: 100%; width: auto; flex: none; }
/* version button — the title-screen version badge from the game, used as-is
   (the "v X.Y.Z" text is baked into the pixels of title_version_icon.png, so
   bumping the version means shipping a new PNG plus the .header-version__text
   below, which stays for screen readers) */
.header-version {
  --icon-h: 28.8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.header-version__icon {
  display: block;
  height: var(--icon-h);
  aspect-ratio: 26 / 12;
  background-image: url('../assets/game/title_version_icon.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5));
}
/* the number is drawn by the icon above, so the text is visually hidden and
   kept only so the version is announced/indexed rather than lost in an image */
.header-version__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the hero-scoped copy of the version badge is desktop-hidden; on mobile it
   is pinned to the hero's top-left and the nav copy is hidden instead (see
   the mobile media query) */
.hero-version {
  display: none;
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 4;
}

/* the DRAG & SHOT wordmark in the header — hidden until the hero scrolls
   past, then slides in from the left (its reserved width pushes the
   version badge over by the same amount), and on the way back up it
   slides out to the left and fades — never squashing, since the
   wordmark images keep their natural size and are simply clipped by
   the shrinking/sliding window */
.nav__reveal {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 0;
  /* inset padding keeps the wordmark (and its drop-shadow) clear of the
     clipping edges on every side, so nothing gets cut off — at rest or
     mid-slide — and the reveal doesn't graze the version badge */
  padding: 4px 4px 4px 8px;
  box-sizing: content-box;
  opacity: 0;
  transition: width .8s cubic-bezier(.22, 1.12, .4, 1),
              opacity .5s ease;
  pointer-events: none;
}
.nav__reveal .brand__wordmark {
  transform: translateX(-32px);
  transition: transform .8s cubic-bezier(.22, 1.12, .4, 1);
}
.site-header.is-revealed .nav__reveal {
  /* scales down together with the wordmark height cap above so the revealed
     title never overflows into the menu button on narrow phones */
  width: min(246px, 49vw);
  opacity: 1;
  pointer-events: auto;
}
.site-header.is-revealed .nav__reveal .brand__wordmark {
  transform: translateX(0);
}
/* while the mobile menu is open, keep the title revealed no matter the
   scroll position; closing the menu reverts to the scroll-driven state
   above (shown only if scrolled past the hero) */
.nav.is-open .nav__reveal {
  width: min(246px, 49vw);
  opacity: 1;
  pointer-events: auto;
}
.nav.is-open .nav__reveal .brand__wordmark {
  transform: translateX(0);
}

/* right cluster */
.nav__right { display: flex; align-items: center; gap: 8px; }
.nav__links { display: none; }            /* shown on desktop */
.nav__right > .lang-toggle { display: none; } /* moves into the menu on mobile */
.nav__divider { display: none; }          /* shown on desktop, between links and lang toggle */

.nav__links a {
  font-family: var(--pixel);
  font-size: 18px;
  letter-spacing: 0;
  word-spacing: -0.1em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav__links a:hover { color: #2f6fb3; background: #f1f7fd; }

.nav__links a.nav-link--patch {
  padding: 8px 10px;
}

/* language toggle */
.lang-toggle {
  display: inline-flex;
  border: 3px solid var(--navy);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--hard-sm);
  background: var(--white);
}
.lang-toggle button {
  font-family: var(--pixel);
  font-size: 12px;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: var(--navy);
}
.lang-toggle button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* decorative gear (matches title screen) */
/* hamburger */
/* pixel-art menu button (normal + pressed sprites). The old hamburger
   <span> bars are hidden and the button shows the sprite as a background,
   so no HTML change is needed and every page's header picks it up. */
.nav__toggle {
  width: 42px;
  height: 44px;
  padding: 0;
  border: 0;
  background: url("../assets/game/web_menu_button.png") center / contain no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  cursor: pointer;
}
.nav__toggle span { display: none; }
/* pressed sprite only while actively held down */
.nav__toggle:active {
  background-image: url("../assets/game/web_menu_button_pressed.png");
}

/* mobile overlay menu */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--sky-top);
  background-image: linear-gradient(180deg, var(--sky-top), var(--sky-mid));
  border-top: 3px solid var(--navy);
  transform: translateY(-110%);
  transition: transform .3s ease;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 24px 20px calc(40px + env(safe-area-inset-bottom));
  gap: 16px;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); }
/* menu items are full-width pixel web-buttons, stacked (capped so they
   don't stretch into thin bars on wide/landscape phone viewports).
   flex-shrink: 0 stops the column flex layout from squashing them
   below --btn-h when the short landscape viewport can't fit all of
   them — the menu scrolls (overflow-y: auto, above) instead. */
.mobile-menu .web-btn {
  --btn-h: 54px;
  width: 100%;
  max-width: 420px;
  min-height: var(--btn-h);
  flex-shrink: 0;
  margin-inline: auto;
  font-size: 15px;
  letter-spacing: 0;
  word-spacing: -0.1em;
}
.mobile-menu__lang { flex-shrink: 0; margin-top: auto; padding-top: 20px; display: flex; justify-content: center; }

body.menu-open { overflow: hidden; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px clamp(28px, 7vw, 88px) calc(60px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  overflow: hidden;
}
.hero__skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(64px, 11vw, 120px);
  background-image: url('../assets/game/city_skyline.png');
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 1;
}
.hero__inner { position: relative; z-index: 3; max-width: 1000px; text-align: center; }

/* sub text + CTA pinned to the bottom of the hero section */
/* Spans from roughly the title's bottom edge down to the section's
   bottom edge, then splits that band into two equal halves —
   `space-around` centers the sub text within the upper half and the
   download button within the lower half (an even-split approximation
   of "center each one in the band below the previous element"). */

.hero__foot {
  position: absolute;
  top: 58%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 760px;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  z-index: 3;
}
/* hero CTA is a wide, prominent web-button */
.hero__foot .web-btn {
  --btn-h: clamp(50px, 9vw, 64px);
  min-width: clamp(300px, 44vw, 460px);
  font-size: clamp(15px, 2.4vw, 19px);
}

/* pixel-art goal/backboard — pinned to top of hero, no bounce */
.hero__goal {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(320px, 82vw, 575px);
  height: auto;
  filter: drop-shadow(-4px 6px 0 rgba(18, 42, 68, .25));
  z-index: 2;
  pointer-events: none;
}

/* DRAG & SHOT horizontal pixel wordmark image */
.wordmark {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 4px 0 0;
  /* same in-game overlay shadow spec as the CTA button: y:2, blur:1, 50% black */
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5));
}
.wordmark__full { width: clamp(521px, 166vw, 1800px); height: auto; }
/* "BASKETBALL ARCADE" badge, perched above the top-left of DRAG — sized
   and positioned as % of the wrap (== the full lockup's own box) so it
   scales together with the wordmark at every viewport width */
.wordmark__wrap {
  position: relative;
  display: inline-block;
  animation: wordmark-pulse 3.6s ease-in-out infinite;
}
.wordmark__badge {
  position: absolute;
  top: -33%;
  left: 0.8%;
  width: 33.6%;
  height: auto;
}

@keyframes wordmark-pulse {
  0%, 100% { transform: scale(.95); }
  50% { transform: scale(1.05); }
}

/* bird flock canvas — sits behind UFO/jet, above gradient background */
.hero__birds {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* floating pixel decorations (UFO, jet) — positions/visibility controlled by JS */
.hero__flyer {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  height: auto;
  display: none;
}
.hero__flyer--ufo { width: clamp(24px, 4.5vw, 48px); }
.hero__flyer--jet { width: clamp(22px, 4vw, 44px); }
.hero__sub {
  font-family: var(--sans-body);
  color: #fff;
  font-size: clamp(15px, 2.4vw, 18px);
  max-width: 38em;
  margin: 0 auto;
  margin-top: 30px;
  font-weight: 400;
  line-height: 1.6;
  text-shadow: 1px 2px 0 rgba(18, 42, 68, .45);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  transform: translateY(-10px);
}

/* pixel-art web button — 3-slice sprite (web_option UI kit) with white and
   orange colour variants: left + center(tiled) + right. Hover grows to
   1.05× on a smooth ease (and eases back on leave); :active swaps to the
   pressed sprite. Shared by the hero CTA and the mobile menu items. */
.web-btn {
  --btn-h: clamp(48px, 8.5vw, 60px);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 clamp(24px, 6vw, 40px);
  font-family: var(--pixel);
  font-size: clamp(15px, 2.4vw, 19px);
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease;
  /* in-game overlay shadow spec (y:2, blur:1, 50% black); follows the
     sprite's alpha so frame + label share one shadow */
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5));
}
.web-btn:hover { transform: scale(1.05); }
.web-btn:active { transform: scale(1.02) translateY(1px); transition-duration: .06s; }
.web-btn__bg {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
  pointer-events: none;
}
.web-btn__seg {
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.web-btn__seg--left,
.web-btn__seg--right {
  flex: 0 0 auto;
  aspect-ratio: 13 / 16;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.web-btn__seg--center {
  flex: 1 1 auto;
  background-repeat: repeat-x;
  background-size: auto 100%;
}
.web-btn__label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* white variant — dark label */
.web-btn--white { color: var(--navy); }
.web-btn--white .web-btn__seg--left   { background-image: url('../assets/game/button/white/web_option_button_white_left.png'); }
.web-btn--white .web-btn__seg--center { background-image: url('../assets/game/button/white/web_option_button_white_center.png'); }
.web-btn--white .web-btn__seg--right  { background-image: url('../assets/game/button/white/web_option_button_white_right.png'); }
.web-btn--white:active .web-btn__seg--left   { background-image: url('../assets/game/button/white/web_option_button_white_left_pressed.png'); }
.web-btn--white:active .web-btn__seg--center { background-image: url('../assets/game/button/white/web_option_button_white_center_pressed.png'); }
.web-btn--white:active .web-btn__seg--right  { background-image: url('../assets/game/button/white/web_option_button_white_right_pressed.png'); }

/* orange variant — white label with a dark drop. The web_option orange art
   is a muted #e0732d; saturate() nudges it back to the vivid in-game orange
   (~#ff720d) without swapping the sprite. Re-declares the base drop-shadow
   since filter is a single property. */
.web-btn--orange {
  color: #fff;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5)) saturate(1.3);
}
.web-btn--orange .web-btn__label { text-shadow: 1px 2px 0 rgba(0, 0, 0, .35); }
.web-btn--orange .web-btn__seg--left   { background-image: url('../assets/game/button/orange/web_option_button_orange_left.png'); }
.web-btn--orange .web-btn__seg--center { background-image: url('../assets/game/button/orange/web_option_button_orange_center.png'); }
.web-btn--orange .web-btn__seg--right  { background-image: url('../assets/game/button/orange/web_option_button_orange_right.png'); }
.web-btn--orange:active .web-btn__seg--left   { background-image: url('../assets/game/button/orange/web_option_button_orange_left_pressed.png'); }
.web-btn--orange:active .web-btn__seg--center { background-image: url('../assets/game/button/orange/web_option_button_orange_center_pressed.png'); }
.web-btn--orange:active .web-btn__seg--right  { background-image: url('../assets/game/button/orange/web_option_button_orange_right_pressed.png'); }

/* ---- Screenshot gallery (clean, modern swipe carousel) ------------------ */
.shot-carousel {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
}
.shot-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  box-shadow: 0 16px 40px rgba(18, 42, 68, .18);
  touch-action: pan-y;
  outline: none;
}
.shot-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.shot-slide {
  flex: 0 0 100%;
  min-width: 100%;
  aspect-ratio: 2048 / 1430;
}
.shot-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.07) saturate(1.05);
}

/* nav arrows — float in the gutter between the carousel and the screen
   edges (centered in that gap); transparent background, icon casts a
   soft shadow and grows on hover */
.shot-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: transform .15s ease;
}
.shot-nav--prev { left: calc(-1 * (100vw - 100%) / 4); transform: translate(-50%, -50%); }
.shot-nav--next { right: calc(-1 * (100vw - 100%) / 4); transform: translate(50%, -50%); }
.shot-nav img { width: 30px; height: auto; filter: drop-shadow(0 3px 3px rgba(18, 42, 68, .25)); }
.shot-nav--prev:hover { transform: translate(-50%, -50%) scale(1.2); }
.shot-nav--next:hover { transform: translate(50%, -50%) scale(1.2); }
.shot-nav--prev:active { transform: translate(-50%, -50%) scale(.96); }
.shot-nav--next:active { transform: translate(50%, -50%) scale(.96); }

/* narrower screens: the gutter beside the carousel shrinks to nothing,
   so shrink the carousel itself to free up a fixed gap for the arrows */
@media (max-width: 920px) {
  .shot-carousel { max-width: calc(100% - 80px); }
  .shot-nav { width: 44px; height: 44px; }
  .shot-nav img { width: 20px; }
  .shot-nav--prev { left: -36px; }
  .shot-nav--next { right: -36px; }
}

/* dots — simple circular page indicators */
.shot-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.shot-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.shot-dot.on {
  background: var(--navy);
  border-color: var(--navy);
}

/* ---- Stages (maps) ------------------------------------------------------ */
#stages { position: relative; z-index: 0; overflow: hidden; }
#stages .section-head { margin-bottom: clamp(4px, 1vw, 12px); }
#stages .section-head h2 { font-size: clamp(26px, 5.8vw, 40px); margin-bottom: 26px; }
#stages .section-head p  { font-size: clamp(15px, 2.2vw, 18px); max-width: 68ch; }
#stages .section-head p a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }

#faq .section-head h2 { font-size: clamp(26px, 5.8vw, 40px); margin-bottom: 26px; }
#faq .section-head p  { font-size: clamp(15px, 2.2vw, 18px); max-width: 68ch; }

/* falling debris — generated by main.js, confined to the section and
   z-indexed behind every other element in it */
.stages-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.stages-particle {
  position: absolute;
  top: -24px;
  opacity: .8;
  animation: stages-fall linear infinite;
}
@keyframes stages-fall {
  to { transform: translateY(calc(var(--stages-h, 600px) + 48px)); }
}

/* "more maps coming" placeholder — coming-soon badge on a soft white glow */
.stages-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: clamp(12px, 2.5vw, 28px);
}
.stages-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 260px;
  height: 260px;
  background: #fff;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
}
.stages-placeholder__stack {
  position: relative;
  z-index: 1;   /* stay above the glow's blur so the map art reads sharp */
  width: clamp(84px, 36.3vw, 297px);
  aspect-ratio: 1;
  transition: transform .15s ease;
  cursor: pointer;
  isolation: isolate;
}
.stages-placeholder__stack:hover { transform: scale(1.1); }

/* clicking the map button shakes it side to side, like it's refusing
   to open — applied to the wrapper so it doesn't fight the stack's
   own hover-scale transform */
.stages-placeholder.shake {
  animation: stages-shake .5s cubic-bezier(.36, .07, .19, .97);
}
@keyframes stages-shake {
  10%, 90% { transform: translateX(-4px); }
  20%, 80% { transform: translateX(6px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.stages-placeholder__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(18, 42, 68, .45));
  transition: opacity .3s ease;
}
.stages-placeholder__img--locked { opacity: 1; }
.stages-placeholder__img--soon { opacity: 0; }
.stages-placeholder__stack:hover .stages-placeholder__img--locked { opacity: 0; }
.stages-placeholder__stack:hover .stages-placeholder__img--soon { opacity: 1; }

/* pixel-art skyline strip pinned to the section bottom, tiled endlessly;
   height is set to 1/10 of the section's rendered height by main.js */
.stages-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background-image: url('../assets/game/skyline_smalltown.png');
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* ---- FAQ --------------------------------------------------------------- */
.faq-list { max-width: 760px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item {
  background: var(--card);
  border: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: var(--hard-sm);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  text-align: left;
  background: var(--white);
  border: 0;
  padding: 28px 18px;
  font-family: var(--sans-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}
.faq-q__icon {
  flex: none;
  width: 21px;
  height: 18px;
  transition: transform .3s ease;
}
.faq-q[aria-expanded="true"] .faq-q__icon { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  color: var(--ink);
}
.faq-a > div {
  padding: 0 18px 20px;
  font-family: var(--sans-body);
  font-size: 15px;
  line-height: 1.7;
}
.faq-a > div::before {
  content: "";
  display: block;
  margin: 0 8px 14px;
  border-top: 1px solid var(--line);
}
/* ---- OSS license: accordion cell title/subtitle + paging --------------- */
.oss-page > .container {
  display: flex;
  flex-direction: column;
  min-height: 82vh;
}
.oss-page .back-link { align-self: flex-start; }
.oss-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 20px;
  padding: 14px 16px;
  background: #eef6fd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.oss-note__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.oss-pageno {
  margin-top: auto;
  padding-top: clamp(32px, 5vw, 48px);
  text-align: center;
  font-family: var(--pixel);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--navy);
}
.faq-q__text { display: flex; flex-direction: column; gap: 4px; }
.oss-q__title { font-size: 18px; font-weight: 700; color: var(--navy); }
.oss-q__sub { font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.faq-a h4 {
  margin: 16px 0 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
/* ---- Contact ------------------------------------------------------------ */
#contact .section-head { margin-bottom: 0; }
#contact .section-head h2 { font-size: clamp(26px, 5.8vw, 40px); margin-bottom: 26px; }
#contact .section-head p  { font-size: clamp(15px, 2.2vw, 18px); max-width: 100%; white-space: nowrap; }
#contact .section-head p a { color: var(--navy); font-weight: 700; text-decoration: underline; }

/* ---- Download ---------------------------------------------------------- */
.download { text-align: center; }
#download .section-head h2 { font-size: clamp(26px, 5.8vw, 40px); margin-bottom: 26px; }
#download .section-head p  { font-size: clamp(15px, 2.2vw, 18px); max-width: 68ch; }
.store-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
}
.store-link {
  display: inline-flex;
  height: 72px;
  border-radius: var(--radius);
  transition: transform .1s ease;
}
.store-link:hover { transform: translateY(-2px); }
.store-link:active { transform: translateY(1px); }

/* official store badges — keep their native aspect ratio, match the
   button height the custom buttons used to have, and swap KO/EN
   artwork to match the active site language */
.store-badge { display: none; height: 100%; width: auto; }
html[lang="ko"] .store-badge--ko,
html[lang="en"] .store-badge--en { display: block; }

.store-note { text-align: center; margin-top: 40px; font-family: var(--sans-body); color: var(--ink-soft); font-size: 13px; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--navy-deep);
  color: #cfe0ef;
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
  border-top: 4px solid var(--navy);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
}
.footer-copy {
  font-family: var(--sans-body);
  font-size: 13px;
  color: #9fc0dc;
  letter-spacing: 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.footer-links a {
  font-family: var(--sans-body);
  font-size: 13px;
  color: #b9d3ea;
  transition: color .15s ease;
}
.footer-links a:hover { color: #fff; }

/* ---- Legal / patch-note pages ----------------------------------------- */
.page-hero {
  position: relative;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-mid));
  border-bottom: 3px solid var(--navy);
  padding: clamp(56px, 10vw, 104px) 0;
  text-align: center;
  overflow: hidden;
}
/* subtle pixel-grid texture so the flat hero reads as part of the game world */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(27, 58, 92, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 58, 92, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: clamp(20px, 4.8vw, 34px);
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: 0;
  word-spacing: -0.18em;
  line-height: 1.5;
  text-shadow: 2px 2px 0 #b9d6ee;
}
.page-hero p { margin: 0; color: var(--navy-deep); font-weight: 600; font-size: clamp(14px, 2.2vw, 16px); }

/* dark, left-aligned variant — matches the footer's navy background */
.page-hero--dark {
  background: var(--navy-deep);
  border-bottom-color: var(--navy);
  text-align: left;
}
.page-hero--dark::before { display: none; }
.page-hero--dark h1 {
  color: #fff;
  font-size: clamp(32px, 6.6vw, 52px);
  text-shadow: 2px 2px 0 #0c2138;
}
.page-hero--dark p {
  color: #fff;
  font-size: clamp(16px, 2.8vw, 22px);
  font-weight: 400;
}

.doc { max-width: 820px; margin-inline: auto; }
.doc section { margin-bottom: 8px; }
.doc h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 3vw, 27px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--navy);
  margin: 52px 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-family: var(--sans); color: var(--navy); margin: 30px 0 10px; font-size: 17px; font-weight: 700; }
.doc p, .doc li { font-family: var(--sans-body); color: var(--ink); font-size: 17px; line-height: 1.95; }
.doc strong { color: var(--navy); }
.doc ul { list-style: none; padding-left: 24px; margin: 12px 0 16px; display: grid; gap: 8px; }
.doc li { position: relative; }
.doc ul li::before { content: "\2022"; position: absolute; left: -20px; color: var(--ink); }
.doc li li::before { content: "\25E6"; }
.doc li ul { margin-top: 8px; }
.doc .updated {
  display: inline-block;
  color: var(--ink-soft);
  font-size: 13px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #eef6fd;
  border: 2px solid var(--line);
  border-radius: 999px;
}
.doc .table-wrap { overflow-x: auto; margin: 14px 0; }
.doc .table-wrap table { margin: 0; min-width: 520px; }
.doc table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  border: 3px solid var(--navy);
}
.doc th, .doc td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 15px; }
.doc th { background: #eef6fd; font-family: var(--pixel); font-size: 11px; color: var(--navy); }

/* ---- Patch notes: card grid (list view) ------------------------------- */
.patch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 920px) { .patch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .patch-grid { grid-template-columns: 1fr; } }

.patch-status {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--muted, #6b7280);
  font-size: 15px;
}

.patch-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.patch-grid .patch-card:hover,
.patch-grid .patch-card:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 0 26px rgba(27, 58, 92, .24);
  z-index: 2;
  outline: none;
}
/* releases without a `thumb:` in their frontmatter fall back to this grey
   panel with the PATCH NOTES wordmark centred on it, which keeps the card's
   16:9 block in place. The wordmark is 90x11 pixel art, pinned to an exact
   2x so it never lands on half pixels; a release that does declare a thumb
   covers all of this with its own <img>. */
.patch-card__thumb {
  aspect-ratio: 16 / 9;
  background-color: #0C446C;
  background-image: url('../assets/game/wordmark_patch_notes.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 180px auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  overflow: hidden;
}
.patch-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.patch-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 18px;
}
.patch-card__title {
  margin: 0;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patch-card__summary {
  margin: -2px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patch-card__date {
  align-self: flex-end;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---- Patch notes: pagination ------------------------------------------ */
.patch-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(32px, 5vw, 56px);
}
.patch-page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--pixel);
  font-size: 15px;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 10px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.patch-page-btn:hover { background: #f1f7fd; border-color: #bcd6ee; }
.patch-page-btn[aria-current="page"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.patch-page-btn:disabled { opacity: .4; cursor: default; }
.patch-page-btn:disabled:hover { background: var(--white); border-color: var(--line); }

/* ---- Patch notes: detail view (full release) -------------------------- */
.patch-article { max-width: 680px; margin: 6px auto 0; }
.patch-article__thumb {
  aspect-ratio: 16 / 9;
  margin-bottom: 36px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #cfe0ef;
}
.patch-article__thumb img { width: 100%; height: 100%; object-fit: cover; }
.patch-article__title {
  font-family: var(--sans);
  font-size: clamp(32px, 5.4vw, 46px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 10px;
}
.patch-article__date {
  margin: 0 0 36px;
  font-family: var(--sans);
  font-size: 21px;
  color: var(--ink-soft);
}
.patch-article__rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 24px;
}
.patch-article__section-title {
  margin: 8px 0 2px;
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 700;
  color: var(--navy);
}
.patch-article__divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 0 8px;
}

.release__intro { margin: 0 0 18px; color: var(--ink); font-weight: 400; font-size: 17px; line-height: 1.9; letter-spacing: 0.2px; }
.release__intro:first-of-type { font-weight: 600; font-size: 18px; }
.release__intro:last-of-type { margin-bottom: 28px; }
.release__outro {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.9;
}
.release__outro:first-of-type { margin-top: 18px; }
.changelog { display: grid; gap: 34px; }
.change-group h4 {
  margin: 0 0 16px; color: var(--navy); font-size: 21px; font-weight: 700;
}
.change-group ul { list-style: none; padding-left: 24px; display: grid; gap: 14px; }
.change-group li { position: relative; color: var(--ink); font-size: 17px; line-height: 1.85; letter-spacing: 0.2px; }
.change-group li::before {
  content: "\2022"; position: absolute; left: -20px; color: var(--ink);
  font-family: Arial, "Helvetica Neue", sans-serif; font-size: 20px; line-height: 1;
}
.change-group li ul { margin-top: 11px; }
.change-group li li::before { content: "\25E6"; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pixel); font-size: 17px; font-weight: 700; color: var(--navy);
  margin-bottom: 28px;
  padding: 8px 12px;
  margin-left: -12px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.back-link:hover { color: #2f6fb3; background: #f1f7fd; }

/* ---- Scroll reveal ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Animations -------------------------------------------------------- */
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(18px, -10px); }
}

/* ===== Responsive ======================================================= */
/* desktop nav */
@media (min-width: 860px) {
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }
  .nav__right { gap: 18px; }
  .nav__links { display: flex; align-items: center; gap: 4px; }
  .nav__right > .lang-toggle { display: inline-flex; }
  .nav__divider {
    display: block;
    width: 2px;
    height: 26px;
    /* the preceding nav link already has 10px of right padding, so add the
       same amount on this side to balance the gap before/after the divider */
    margin-right: 10px;
    background: var(--line);
    border-radius: 1px;
  }
}

/* mobile nav: only the title + menu button live in the top bar; the version
   badge moves down to the hero's top-left corner instead */
@media (max-width: 859px) {
  .site-header .header-version { display: none; }
  .hero-version { display: inline-flex; }
  /* solid white, no blur — the translucent/blurred look is desktop-only;
     on mobile it also let the menu content bleed through when open */
  .site-header {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  }
}

/* small phones */
@media (max-width: 600px) {
  /* the desktop hero reserves 720px; on phones that leaves big vertical
     gaps around the title, so shrink it to ~2/3 (480px) */
  .hero { padding-top: 28px; min-height: 480px; }
  #contact .section-head p { white-space: normal; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}