/* ============ base ============ */
:root {
  --bg: #0c0b10;
  --bg-alt: rgba(18, 16, 24, 0.45);
  --surface: #191622;
  --line: rgba(255, 255, 255, 0.08);
  --text: #ece9f1;
  --text-dim: #a39fb0;
  --accent: #f5b04c;
  --accent-2: #e2603f;
  --grad: linear-gradient(135deg, #f5b04c, #e2603f);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.pc-only { display: inline; }
@media (max-width: 640px) { .pc-only { display: none; } }

main, .footer, .nav { position: relative; z-index: 1; }

/* ============ 언더다크 스크롤 배경 ============ */
/* 스크롤이 깊어질수록 지상(밤하늘) → 동굴(수정) → 심층(모닥불)로 전환 */
.scroll-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .15s linear; will-change: opacity, transform; }

/* --- 지상: 밤하늘 --- */
.bg-surface {
  background: linear-gradient(180deg, #1c2448 0%, #171b38 45%, #101226 100%);
}
.moon {
  position: absolute; right: 12%; top: 10%;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fdf6e3, #e8ddb8 70%);
  box-shadow: 0 0 60px 24px rgba(253, 246, 227, 0.25), 0 0 140px 60px rgba(253, 246, 227, 0.10);
}
.moon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 68% 30%, rgba(0,0,0,0.10) 0 9px, transparent 10px),
    radial-gradient(circle at 35% 62%, rgba(0,0,0,0.08) 0 13px, transparent 14px),
    radial-gradient(circle at 62% 70%, rgba(0,0,0,0.09) 0 6px, transparent 7px);
}
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #dde5ff; opacity: .8;
  box-shadow: 0 0 6px 1px rgba(205, 214, 255, 0.5);
  animation: star-twinkle 3.5s ease-in-out infinite;
}
.star.lg { width: 5px; height: 5px; box-shadow: 0 0 12px 3px rgba(205, 214, 255, 0.55); }
@keyframes star-twinkle {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}
.hill {
  position: absolute; left: -2%; right: -2%; bottom: -2px; height: 26vh;
}
.hill-back {
  background: #0d1022;
  clip-path: polygon(0 55%, 12% 38%, 25% 52%, 40% 28%, 55% 48%, 70% 22%, 84% 45%, 100% 30%, 100% 100%, 0 100%);
}
.hill-front {
  height: 18vh; background: #080a18;
  clip-path: polygon(0 70%, 15% 45%, 32% 62%, 50% 40%, 68% 60%, 85% 38%, 100% 55%, 100% 100%, 0 100%);
}

/* --- 중층: 동굴 벽과 수정 --- */
.bg-cave {
  background:
    radial-gradient(60vw 40vh at 0% 50%, rgba(106, 92, 255, 0.14), transparent 65%),
    radial-gradient(60vw 40vh at 100% 40%, rgba(140, 110, 255, 0.12), transparent 65%),
    linear-gradient(180deg, #221741 0%, #190f30 55%, #120a22 100%);
}
.stalactites {
  position: absolute; top: 0; left: 0; right: 0; height: 16vh;
  background: #0d0820;
  clip-path: polygon(0 0, 100% 0, 100% 32%, 94% 78%, 90% 30%, 84% 58%, 79% 26%, 73% 92%, 68% 30%, 61% 55%, 56% 24%, 50% 100%, 45% 28%, 38% 62%, 33% 22%, 27% 80%, 22% 30%, 15% 52%, 10% 24%, 5% 66%, 2% 28%, 0 40%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
.rock {
  position: absolute; top: -5%; bottom: -5%; width: 30vw;
  background: linear-gradient(90deg, #0b0620, #120b2c);
}
.rock-l {
  left: 0;
  clip-path: polygon(0 0, 40% 0, 22% 12%, 44% 25%, 18% 38%, 34% 52%, 14% 66%, 30% 80%, 16% 92%, 26% 100%, 0 100%);
}
.rock-r {
  right: 0; background: linear-gradient(270deg, #0b0620, #120b2c);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 70% 100%, 84% 88%, 64% 74%, 80% 60%, 62% 45%, 78% 32%, 58% 18%, 74% 8%);
}
.crystal {
  position: absolute; width: 22px; height: 34px;
  background: linear-gradient(160deg, #b8c8ff, #7a5cff 70%, #5a3cf0);
  clip-path: polygon(50% 0, 100% 35%, 78% 100%, 22% 100%, 0 35%);
  animation: crystal-glow 4s ease-in-out infinite;
}
.c1 { left: 5%;  top: 24%; }
.c2 { left: 10%; top: 56%; width: 15px; height: 24px; animation-delay: -1.3s; }
.c3 { right: 6%; top: 32%; width: 30px; height: 46px; animation-delay: -2.2s; }
.c4 { right: 11%; top: 68%; animation-delay: -3s; }
.c5 { left: 7%;  top: 82%; width: 14px; height: 22px; animation-delay: -.7s; }
.c6 { right: 4%; top: 52%; width: 12px; height: 19px; animation-delay: -1.8s; }
.c7 { left: 3%;  top: 40%; width: 17px; height: 27px; animation-delay: -2.6s; }
@keyframes crystal-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(140, 130, 255, 0.5)); opacity: .7; }
  50%      { filter: drop-shadow(0 0 20px rgba(160, 145, 255, 1)); opacity: 1; }
}
.mote {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #af9dff; opacity: .5;
  box-shadow: 0 0 8px 2px rgba(150, 130, 255, 0.4);
  animation: mote-float 7s ease-in-out infinite;
}
@keyframes mote-float {
  0%, 100% { transform: translate(0, 0); opacity: .25; }
  50%      { transform: translate(14px, -22px); opacity: .8; }
}

/* --- 심층: 모닥불과 불씨 --- */
.bg-deep {
  background:
    radial-gradient(80vw 50vh at 50% 108%, rgba(226, 96, 63, 0.22), transparent 70%),
    linear-gradient(180deg, #14090e 0%, #1c0d0c 55%, #2a1206 100%);
}
.fire-glow {
  position: absolute; left: 50%; bottom: -20vh; transform: translateX(-50%);
  width: 140vw; height: 70vh; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(245, 176, 76, 0.45) 0%, rgba(226, 96, 63, 0.24) 40%, transparent 70%);
  animation: fire-flicker 3s ease-in-out infinite;
}
@keyframes fire-flicker {
  0%, 100% { opacity: .8; transform: translateX(-50%) scaleY(1); }
  35%      { opacity: 1;  transform: translateX(-50%) scaleY(1.07); }
  70%      { opacity: .88; transform: translateX(-50%) scaleY(.96); }
}
.cave-floor {
  position: absolute; left: -2%; right: -2%; bottom: -2px; height: 12vh;
  background: #120704;
  clip-path: polygon(0 60%, 10% 42%, 24% 58%, 38% 40%, 50% 55%, 63% 38%, 77% 56%, 90% 42%, 100% 52%, 100% 100%, 0 100%);
}
.campfire {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  width: 120px; height: 110px;
}
.log {
  position: absolute; bottom: 0; left: 50%;
  width: 92px; height: 16px; border-radius: 8px;
  background: linear-gradient(180deg, #5c3a22, #3a2213);
}
.log-l { transform: translateX(-50%) rotate(16deg); }
.log-r { transform: translateX(-50%) rotate(-16deg); }
.flame {
  position: absolute; left: 50%; bottom: 10px;
  border-radius: 50% 50% 42% 42% / 68% 68% 32% 32%;
  transform-origin: 50% 100%;
  animation: flame-dance 1.6s ease-in-out infinite;
}
.f-outer {
  width: 54px; height: 84px; margin-left: -27px;
  background: linear-gradient(180deg, rgba(226, 96, 63, 0.9), rgba(226, 96, 63, 0.25));
  filter: blur(3px);
}
.f-inner {
  width: 36px; height: 60px; margin-left: -18px;
  background: linear-gradient(180deg, #f5b04c, rgba(245, 176, 76, 0.35));
  animation-delay: -.5s; filter: blur(1px);
}
.f-core {
  width: 18px; height: 34px; margin-left: -9px;
  background: linear-gradient(180deg, #fde9b8, rgba(253, 233, 184, 0.5));
  animation-delay: -1s;
}
@keyframes flame-dance {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(-2deg); }
  30%      { transform: scaleY(1.12) scaleX(.94) rotate(2deg); }
  60%      { transform: scaleY(.92) scaleX(1.06) rotate(-1deg); }
  80%      { transform: scaleY(1.06) scaleX(.97) rotate(1.5deg); }
}
.ember {
  position: absolute; bottom: -12px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: 0;
  box-shadow: 0 0 8px 2px rgba(245, 176, 76, 0.5);
  animation: ember-rise 9s linear infinite;
}
.ember.sm { width: 4px; height: 4px; background: var(--accent-2); box-shadow: 0 0 6px 1px rgba(226, 96, 63, 0.5); }
@keyframes ember-rise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: .9; }
  100% { transform: translateY(-92vh) translateX(38px) scale(.2); opacity: 0; }
}

/* ============ nav ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s, box-shadow .3s;
}
.nav.scrolled {
  background: rgba(12, 11, 16, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.logo { display: inline-flex; align-items: center; font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.logo em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav-links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--text-dim); transition: color .2s; position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--grad); border-radius: 2px; transition: right .25s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { right: 0; }
@media (max-width: 640px) { .nav-links { gap: 16px; font-size: 13px; } }

/* ============ hero ============ */
.hero { position: relative; padding: 180px 0 110px; }
.hero-inner { position: relative; z-index: 1; }

.hero-kicker { font-size: 13px; letter-spacing: .3em; color: var(--accent); font-weight: 700; margin-bottom: 18px; }

.hero h1 { font-size: clamp(38px, 6.5vw, 64px); font-weight: 900; line-height: 1.25; letter-spacing: -.03em; }
.hero h1 .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero-sub { margin-top: 22px; font-size: 17px; color: var(--text-dim); }

.hero-cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  font-weight: 700; font-size: 15px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--grad); color: #1a1108; box-shadow: 0 8px 24px rgba(226, 96, 63, 0.35); }
.btn-primary:hover { box-shadow: 0 14px 32px rgba(226, 96, 63, 0.5); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.btn-ghost:hover { border-color: rgba(245, 176, 76, 0.5); background: rgba(255, 255, 255, 0.06); }
.btn-lg { padding: 16px 34px; font-size: 17px; }

.hero-stats { display: flex; gap: 48px; margin-top: 56px; list-style: none; flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 32px; font-weight: 900; letter-spacing: -.02em; }
.hero-stats strong i { font-style: normal; font-size: 20px; color: var(--accent); }
.hero-stats span { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.hero-scroll-hint {
  margin-top: 64px; font-size: 13px; color: var(--text-dim); opacity: .8;
  animation: hint-bob 2.4s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ============ sections ============ */
.section { padding: 96px 0; position: relative; }
.section-alt { background: var(--bg-alt); }

.section-kicker { font-size: 12px; letter-spacing: .3em; color: var(--accent); font-weight: 700; margin-bottom: 12px; }
.section-title { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.02em; margin-bottom: 16px; }
.section-desc { color: var(--text-dim); max-width: 640px; margin-bottom: 48px; }

/* ============ games ============ */
.games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .games-grid { grid-template-columns: 1fr; } }

.game-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s, box-shadow .25s, transform .5s, border-color .2s;
  will-change: transform;
}
.game-card.in { opacity: 1; transform: none; transition: opacity .5s, box-shadow .25s, transform .12s ease-out, border-color .2s; }
.game-card:hover { box-shadow: var(--shadow-hover); border-color: rgba(245, 176, 76, 0.35); }

.game-card.featured { grid-column: span 2; }
@media (max-width: 600px) { .game-card.featured { grid-column: span 1; } }

.game-art {
  position: relative; height: 170px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 130%, rgba(245, 176, 76, 0.16), transparent 60%), linear-gradient(160deg, #221d30, #141019);
  overflow: hidden;
}
.game-card.featured .game-art { height: 210px; }
.game-art img {
  width: 108px; height: 108px; border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.game-card.featured .game-art img { width: 132px; height: 132px; border-radius: 30px; }
.game-card:hover .game-art img { transform: scale(1.08) rotate(-2deg); }

.badge-featured {
  position: absolute; top: 14px; left: 14px;
  background: var(--grad); color: #1a1108;
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(226, 96, 63, 0.4);
}

.game-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.game-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.game-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.rating { color: var(--accent); font-size: 14px; font-weight: 700; white-space: nowrap; }
.game-genre { font-size: 13px; color: var(--accent); margin: 2px 0 10px; font-weight: 700; }
.game-desc { font-size: 14px; color: var(--text-dim); flex: 1; }

.store-links { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.store-links a {
  font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text);
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.store-links a:hover {
  background: var(--grad); border-color: transparent; color: #1a1108;
  transform: translateY(-2px);
}

.dev-links { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.dev-links a { color: var(--text-dim); font-size: 14px; font-weight: 500; transition: color .2s; }
.dev-links a:hover { color: var(--accent); }

/* ============ about ============ */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }

.about-text { color: var(--text-dim); margin-bottom: 18px; }
.about-text strong { color: var(--text); font-weight: 700; }

.timeline { list-style: none; border-left: 2px solid var(--line); padding-left: 24px; margin-top: 8px; }
.timeline li {
  position: relative; padding-bottom: 26px;
  opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s;
}
.timeline li.in { opacity: 1; transform: none; }
.timeline li::before {
  content: ''; position: absolute; left: -30px; top: 8px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--grad);
  box-shadow: 0 0 0 4px rgba(226, 96, 63, 0.18);
}
.tl-year { display: block; font-weight: 900; color: var(--accent); font-size: 15px; }
.tl-what { display: block; color: var(--text-dim); font-size: 14px; margin-top: 2px; }

/* ============ values ============ */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .values-grid { grid-template-columns: 1fr; } }

.value-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s, transform .5s, box-shadow .25s, border-color .2s;
  will-change: transform;
}
.value-card.in { opacity: 1; transform: none; transition: opacity .5s, box-shadow .25s, transform .12s ease-out, border-color .2s; }
.value-card:hover { box-shadow: var(--shadow-hover); border-color: rgba(245, 176, 76, 0.3); }
.value-icon { font-size: 30px; margin-bottom: 14px; transition: transform .3s ease; }
.value-card:hover .value-icon { transform: translateY(-2px) scale(1.06); }
.value-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.value-card p { font-size: 14px; color: var(--text-dim); }

/* ============ contact ============ */
.contact-inner { text-align: center; }
.contact-inner .section-desc { margin: 0 auto 36px; }

/* ============ footer ============ */
.footer { border-top: 1px solid var(--line); padding: 48px 0 32px; background: rgba(12, 11, 16, 0.75); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.footer-brand .logo { font-size: 18px; }
.footer-brand p { color: var(--text-dim); font-size: 13px; margin-top: 8px; }
.footer-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: #6f6a7d; font-size: 12px; }

/* ============ motion preferences ============ */
@media (prefers-reduced-motion: reduce) {
  .star, .crystal, .ember, .fire-glow, .mote, .flame, .hero-scroll-hint { animation: none; }
  html { scroll-behavior: auto; }
}