:root {
  color-scheme: dark;
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif;
  --ink: #05070b;
  --ink-deep: #08111b;
  --ivory: #f8f3e6;
  --muted: #b7c0c6;
  --gold: #d5ae5b;
  --gold-pale: #f7dfa3;
  --cyan: #73dcef;
  background: var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--ink); }
body { overflow-x: hidden; color: var(--ivory); }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }

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

.experience {
  position: relative;
  min-height: 100dvh;
  isolation: isolate;
  overflow: visible;
  background: var(--ink);
}

.arena-backdrop {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2, 6, 10, .6), rgba(2, 5, 9, .92)),
    url("assets/game/stadium-day-v1.png") center / cover no-repeat;
  transform: scale(1.025);
}

.arena-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 18%, rgba(2, 6, 10, .35) 52%, rgba(1, 3, 7, .9) 100%),
    linear-gradient(90deg, rgba(3, 7, 11, .68), transparent 42%, transparent 58%, rgba(3, 7, 11, .68));
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.scene {
  position: relative;
  width: 100%;
  min-height: 100dvh;
}

.scene-lobby {
  position: relative;
  overflow: hidden;
  display: grid;
  padding: 0;
  place-items: center;
  background: transparent;
}

.sound-bar {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 3px;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 999px;
  background: rgb(5 7 11 / .48);
  color: #e0e4e8;
  opacity: .32;
  transition: opacity .2s ease;
}
.sound-bar:hover, .sound-bar:focus-within { opacity: .95; }
.music-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.music-toggle svg { width: 16px; height: 16px; }
.music-toggle .music-pause, .music-toggle[aria-pressed="true"] .music-play { display: none; }
.music-toggle[aria-pressed="true"] .music-pause { display: block; }
.music-speaker { width: 14px; height: 14px; }
#music-volume {
  width: 62px;
  height: 28px;
  margin: 0;
  accent-color: #b8c0c7;
  cursor: pointer;
}
#music-volume:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (pointer: coarse) {
  .music-toggle { width: 36px; height: 36px; }
  #music-volume { height: 36px; }
  .sound-bar { opacity: .48; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-bar { transition: none; }
}

.intro-art {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.intro-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.pack-trigger {
  position: absolute;
  top: 27.7%;
  left: 61.7%;
  display: grid;
  width: 22%;
  height: 58%;
  padding: 0;
  border: 0;
  place-items: center;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%) rotateX(var(--pack-tilt-x, 0deg)) rotateY(var(--pack-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .18s ease;
  will-change: transform;
  touch-action: manipulation;
}

.pack-trigger:hover { background: transparent; }
.pack-trigger:active { transform: translateX(-50%) rotateX(var(--pack-tilt-x, 0deg)) rotateY(var(--pack-tilt-y, 0deg)) scale(.97); }
.pack-trigger:disabled { cursor: wait; }
.pack-trigger::after {
  position: absolute;
  z-index: 1;
  inset: 12% 8%;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--pack-glint-x, 50%) var(--pack-glint-y, 50%), rgba(255, 246, 213, .45), transparent 24%);
  mix-blend-mode: screen;
  transition: opacity .2s ease;
}
.pack-trigger:hover::after, .pack-trigger:focus-visible::after { opacity: 1; }
.pack-trigger > img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pack-float 4.2s ease-in-out infinite;
}

.pack-open-label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 3;
  padding: 8px 14px;
  border: 1px solid rgba(247, 223, 163, .72);
  background: rgba(5, 7, 11, .72);
  color: var(--gold-pale);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.pack-trigger:hover .pack-open-label,
.pack-trigger:focus-visible .pack-open-label {
  background: rgba(213, 174, 91, .2);
  color: #fff6d5;
  transform: translateX(-50%) translateY(-2px);
}
.pack-trigger.is-opening > img { animation: pack-ignite .25s ease-out both; }

@keyframes pack-float {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-9px) rotate(.5deg); }
}

@keyframes pack-ignite {
  0% { transform: scale(1); opacity: 1; }
  64% { transform: scale(1.09); opacity: 1; }
  100% { transform: scale(1.17); opacity: 0; }
}

.white-flash {
  position: fixed;
  z-index: 20;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}

.white-flash.is-bursting { visibility: visible; animation: white-burst .72s cubic-bezier(.08, .72, .12, 1) both; }

@keyframes white-burst {
  0% { opacity: 0; }
  8%, 38% { opacity: 1; }
  100% { opacity: 0; }
}

.scene-tunnel {
  display: grid;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: #05090d;
}

#tunnel-canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; background: #05090d; }

.hint-card {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(640px, 82vw);
  min-height: 0;
  padding: 10px 18px;
  place-items: center;
  border: 0;
  background: radial-gradient(ellipse, rgba(3, 8, 18, .72), transparent 72%);
  color: var(--ivory);
  text-align: center;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .95), 0 0 32px rgba(120, 195, 255, .48);
}

.hint-card strong {
  font-size: clamp(2.25rem, 6vw, 5.4rem);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.06em;
  word-break: keep-all;
}

.hint-card.is-entering { animation: hint-arrive .38s cubic-bezier(.16, .8, .24, 1) both; }

.skip-button,
.reveal-back,
.collection-back {
  position: absolute;
  z-index: 5;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(248, 243, 230, .38);
  color: var(--ivory);
  background: transparent;
  font-size: .83rem;
  font-weight: 800;
  cursor: pointer;
}

.skip-button { right: clamp(20px, 5vw, 76px); bottom: 28px; color: rgba(248, 243, 230, .74); }
.skip-button:hover, .reveal-back:hover, .collection-back:hover { border-color: var(--gold-pale); color: var(--gold-pale); }

@keyframes hint-arrive {
  0% { opacity: 0; transform: translateY(6px) scale(1.32); filter: blur(7px); }
  55% { opacity: 1; transform: translateY(0) scale(.98); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.scene-reveal {
  display: grid;
  padding: clamp(24px, 4vh, 52px) 20px 28px;
  place-items: center;
  background: rgba(2, 6, 10, .04);
}

.scene-reveal::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 52%, rgba(255, 234, 166, .2), transparent 31%);
}

.reveal-back { top: 20px; left: clamp(20px, 4vw, 54px); }

.reveal-composition {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(94vw, 760px);
  place-items: center;
}

.reveal-card-slot { display: grid; width: 100%; min-width: 0; place-items: center; }

.member-card {
  display: grid;
  width: min(100%, 510px);
  max-height: 67dvh;
  place-items: center;
  transform-origin: 50% 72%;
}

.member-card img {
  display: block;
  width: 100%;
  max-height: 67dvh;
  object-fit: contain;
}

.scene-reveal.is-arriving .member-card { animation: card-arrive .78s cubic-bezier(.14, .86, .22, 1) both; }

.gold-burst { position: absolute; z-index: 2; top: 50%; left: 50%; width: 1px; height: 1px; pointer-events: none; }
.gold-burst i { position: absolute; top: 0; left: 0; width: 5px; height: 5px; opacity: 0; background: var(--gold-pale); box-shadow: 0 0 12px var(--gold-pale); }
.scene-reveal.is-arriving .gold-burst i { animation: spark-burst .82s ease-out both; }
.gold-burst i:nth-child(1) { --x: -260px; --y: -210px; animation-delay: .02s; }
.gold-burst i:nth-child(2) { --x: -130px; --y: -310px; animation-delay: .08s; }
.gold-burst i:nth-child(3) { --x: 20px; --y: -350px; animation-delay: .04s; }
.gold-burst i:nth-child(4) { --x: 180px; --y: -290px; animation-delay: .11s; }
.gold-burst i:nth-child(5) { --x: 290px; --y: -155px; animation-delay: .07s; }
.gold-burst i:nth-child(6) { --x: 330px; --y: 40px; animation-delay: .15s; }
.gold-burst i:nth-child(7) { --x: 215px; --y: 205px; animation-delay: .05s; }
.gold-burst i:nth-child(8) { --x: 55px; --y: 290px; animation-delay: .13s; }
.gold-burst i:nth-child(9) { --x: -95px; --y: 245px; animation-delay: .1s; }
.gold-burst i:nth-child(10) { --x: -245px; --y: 200px; animation-delay: .16s; }
.gold-burst i:nth-child(11) { --x: -330px; --y: 40px; animation-delay: .06s; }
.gold-burst i:nth-child(12) { --x: -295px; --y: -125px; animation-delay: .14s; }

.reveal-actions { position: absolute; z-index: 4; bottom: clamp(20px, 4vh, 42px); left: 50%; transform: translateX(-50%); }

.primary-action {
  min-width: min(74vw, 230px);
  padding: 14px 22px;
  border: 1px solid rgba(255, 245, 210, .72);
  color: #211808;
  background: linear-gradient(105deg, #f7e7b6, #d6ad55);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.primary-action:hover { background: #f7e7b6; transform: translateY(-2px); }
.primary-action:active { transform: translateY(1px) scale(.99); }

@keyframes card-arrive {
  from { opacity: 0; transform: perspective(900px) translateY(110px) scale(.72) rotateX(20deg); }
  70% { opacity: 1; transform: perspective(900px) translateY(-8px) scale(1.025) rotateX(0); }
  to { opacity: 1; transform: perspective(900px) translateY(0) scale(1) rotateX(0); }
}

@keyframes spark-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.5); }
}

.scene-collection {
  display: grid;
  padding: 92px clamp(18px, 4vw, 64px) 38px;
  place-items: center;
}

.collection-back { top: 24px; left: clamp(20px, 4vw, 54px); }

.collection-cards {
  display: grid;
  width: min(1180px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
}

.collection-card { display: grid; min-width: 0; place-items: center; }
.collection-card .member-card { width: 100%; max-height: 72dvh; }
.collection-card .member-card img { max-height: 72dvh; }

.scene-home {
  min-height: 100dvh;
  padding: clamp(30px, 4vw, 54px) clamp(18px, 5vw, 80px) clamp(96px, 12vh, 160px);
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(5, 14, 17, .94), rgba(5, 14, 17, .7) 48%, rgba(5, 14, 17, .94)),
    url("assets/game/stadium-tunnel-v1.png") center / cover no-repeat;
}

.scene-home::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(219, 179, 91, .12), transparent 34%),
    linear-gradient(180deg, transparent 0 52%, rgba(3, 9, 12, .7));
}

.home-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1320px, 100%);
  min-height: calc(100dvh - clamp(56px, 8vw, 92px));
  margin: 0 auto;
  grid-template-rows: auto;
  align-content: start;
  gap: clamp(34px, 5vw, 72px);
}

.home-header {
  display: flex;
  justify-content: flex-end;
}

.home-restart {
  flex: 0 0 auto;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid rgba(248, 243, 230, .5);
  color: var(--ivory);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}
.home-restart:hover { border-color: var(--gold-pale); color: var(--gold-pale); }

.kanban-showcase {
  display: grid;
  grid-template-columns: minmax(150px, .28fr) minmax(0, 1.72fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(38px, 6vw, 88px);
  border-top: 1px solid rgba(226, 239, 234, .24);
}

.kanban-copy { max-width: 240px; }
.kanban-copy h2 { margin: 0 0 22px; color: #f7f3e7; font-size: clamp(1.45rem, 2.4vw, 2.45rem); line-height: 1.05; letter-spacing: -.07em; text-wrap: balance; }
.kanban-link { color: var(--gold-pale); font-size: .82rem; font-weight: 900; text-underline-offset: 5px; }

.kanban-preview {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 223, 163, .48);
  background: #060b0f;
  box-shadow: 0 28px 64px rgba(1, 5, 8, .36);
  color: var(--ivory);
  text-decoration: none;
  transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
.kanban-preview::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(2, 7, 10, .7)); }
.kanban-preview img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.kanban-preview:hover { border-color: rgba(247, 223, 163, .9); box-shadow: 0 34px 76px rgba(1, 5, 8, .5); transform: translateY(-3px); }
.kanban-preview:hover img { transform: scale(1.015); }
.kanban-link:focus-visible, .kanban-preview:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }

.collab-proof {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.collab-proof-item {
  display: grid;
  gap: 7px;
  padding: 18px 20px;
  border: 1px solid rgba(226, 239, 234, .2);
  background: rgba(3, 10, 15, .5);
  color: var(--ivory);
  text-decoration: none;
  transition: border-color .24s ease, background .24s ease, transform .24s ease;
}
.collab-proof-item strong { color: var(--gold-pale); font-size: .9rem; }
.collab-proof-item span { color: #cbd5d3; font-size: .8rem; }
.collab-proof-item:hover { border-color: rgba(247, 223, 163, .72); background: rgba(8, 20, 27, .72); transform: translateY(-2px); }
.collab-proof-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }

.home-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 22px; align-self: end; padding-top: 22px; border-top: 1px solid rgba(226, 239, 234, .24); }
.home-links a { color: #d1dad8; font-size: .82rem; font-weight: 800; text-underline-offset: 5px; }
.home-links a:hover { color: #9dd8d1; }
.site-qr { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 5px 9px 5px 5px; border: 1px solid rgba(226, 239, 234, .22); color: #d1dad8 !important; text-decoration: none; }
.site-qr img { display: block; width: 50px; height: 50px; padding: 3px; background: #fff; image-rendering: pixelated; }
.site-qr span { font-size: .72rem; white-space: nowrap; }
.site-qr:hover { border-color: rgba(247, 223, 163, .72); background: rgba(8, 20, 27, .72); }
.site-qr:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }

@media (min-width: 901px) and (max-height: 800px) {
  .scene-home { padding-top: 22px; padding-bottom: 14px; }
  .home-shell { min-height: calc(100dvh - 36px); gap: 28px; }
  .home-links { gap: 16px; padding-top: 10px; }
  .home-links a { font-size: .74rem; }
}

@media (max-width: 900px) {
  .scene-home {
    min-height: 100dvh;
    padding: 42px 24px 80px;
    overflow: visible;
  }

  .home-shell {
    display: grid;
    width: min(680px, 100%);
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 34px;
    align-items: start;
  }

  .home-header, .kanban-showcase, .home-links { grid-column: 1; grid-row: auto; }
  .kanban-showcase { grid-template-columns: 1fr; gap: 24px; }
  .kanban-copy { max-width: 38rem; }
  .home-links { margin-top: 0; align-self: auto; }
}

@media (max-width: 760px) {
  .intro-art {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
  .intro-art > img { object-position: 62% center; }
  .pack-trigger {
    top: 27.7%;
    left: 61.7%;
    width: 82%;
    height: 58%;
  }
  .hint-card { width: 88vw; }
  .hint-card strong { font-size: clamp(2rem, 9vw, 3.3rem); }
  .scene-reveal { align-content: start; overflow-y: auto; padding: 74px 18px 100px; }
  .reveal-composition { width: min(96vw, 760px); margin: auto 0; }
  .scene-reveal .member-card { max-height: 52dvh; }
  .scene-reveal .member-card img { max-height: 52dvh; }
  .collection-card .member-card { max-height: 58dvh; }
  .collection-card .member-card img { max-height: 58dvh; }
  .collection-cards { grid-template-columns: 1fr; max-width: 400px; }
  .collection-card .member-card, .collection-card .member-card img { max-height: none; }
  .scene-home { padding: 42px 20px 80px; }
  .home-shell { display: block; min-height: 0; }
  .home-header { display: flex; margin-bottom: 42px; }
  .kanban-showcase { display: block; }
  .kanban-copy { max-width: 32rem; margin-bottom: 22px; }
  .collab-proof { grid-template-columns: 1fr; margin-top: 34px; }
  .home-links { margin-top: 42px; }
  .site-qr { margin-left: 0; }
}

@media (max-width: 560px) {
  .home-header { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}