/* 꽥꽥 서바이버 — company site. The look follows the game's own UI: night sky, gold-rimmed navy panels,
   chunky glossy capsule buttons, Jua lettering with a dark outline. */
:root {
  --night: #090d1f;
  --night-2: #10183a;
  --navy: #182252;
  --panel-a: rgba(30, 40, 88, .94);
  --panel-b: rgba(13, 18, 44, .96);
  --gold: #f6cd5b;
  --gold-hi: #fff0b8;
  --gold-lo: #b07a22;
  --ember: #ff7a22;
  --ember-lo: #a83e06;
  --green: #79d53a;
  --green-lo: #2f7d12;
  --ink: #3b1504;
  --text: #edf0ff;
  --muted: #a7b0d9;
  --display: 'Jua', 'Pretendard Variable', system-ui, sans-serif;
  --body: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --r: 24px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--text); font: 16px/1.65 var(--body); letter-spacing: -.01em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
}
img { max-width: 100%; display: block; }
main { overflow-x: clip; }
body::before {   /* a faint starfield behind the whole page, drifting slowly */
  content: ''; position: fixed; inset: -50% 0 0; z-index: -10; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 140px 90px, #cfe0ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 260px 170px, #ffe9b0 50%, transparent 51%), radial-gradient(1px 1px at 330px 40px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90px 240px, #fff 50%, transparent 51%);
  background-size: 380px 280px; animation: drift 120s linear infinite;
}
@keyframes drift { to { transform: translateY(50%); } }
a { color: inherit; }
button { font: inherit; color: inherit; }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- lettering ---------- */
.art-title {
  position: relative; display: inline-block; font-family: var(--display); font-weight: 400; line-height: .98; margin: 0;
  letter-spacing: -.02em; color: transparent;
}
.art-title > span { position: relative; z-index: 1; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fffbe0 0%, #ffe35c 38%, #ffb21f 62%, #ff6a12 100%); -webkit-background-clip: text; background-clip: text; animation: shine 5.5s ease-in-out 1.2s infinite; }
@keyframes shine { 0%, 55% { background-position: -150% 0, 0 0; } 100% { background-position: 250% 0, 0 0; } }
.art-title::before {   /* the thick brown outline + drop, painted under the gradient fill */
  content: attr(data-text); position: absolute; inset: 0; z-index: 0; color: var(--ink); white-space: pre-line;
  -webkit-text-stroke: .16em var(--ink); text-shadow: 0 .09em 0 #1c0801, 0 .2em .3em rgba(0, 0, 0, .55);
}
.art-title.sm::before { -webkit-text-stroke: .13em var(--ink); }
.h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.12; margin: 0; letter-spacing: -.01em; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.h2 em { font-style: normal; color: var(--gold); }
.kicker {   /* the small dark capsule label the game uses above titles */
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; font: 14px/1 var(--display);
  background: linear-gradient(180deg, #24306a, #121a40); border: 2px solid rgba(246, 205, 91, .55); color: var(--gold-hi);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.kicker img { width: 26px; height: 26px; }

/* ---------- buttons ---------- */
.btn {
  --a: #ffc04d; --b: #ff8a1c; --c: #ef5f0a; --lo: var(--ember-lo); --rim: #ffe08a;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px;
  border-radius: 999px; border: 3px solid var(--rim); text-decoration: none; cursor: pointer; isolation: isolate;
  font: 22px/1 var(--display); color: #fff; text-shadow: 0 2px 0 var(--lo), 0 0 1px var(--lo);
  background: linear-gradient(180deg, var(--a), var(--b) 52%, var(--c));
  box-shadow: 0 6px 0 var(--lo), 0 14px 26px rgba(0, 0, 0, .4), inset 0 -4px 0 rgba(0, 0, 0, .12);
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.btn::after {   /* glossy top half */
  content: ''; position: absolute; inset: 3px 12px 52% 12px; border-radius: 999px; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .06));
}
.btn:hover { filter: brightness(1.07) saturate(1.08); transform: translateY(-2px); box-shadow: 0 8px 0 var(--lo), 0 18px 30px rgba(0, 0, 0, .45), inset 0 -4px 0 rgba(0, 0, 0, .12); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--lo), 0 6px 14px rgba(0, 0, 0, .4), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.btn-green { --a: #b6f25a; --b: #6fcf2a; --c: #3fa514; --lo: #23620a; --rim: #e2ff9c; }
.btn-navy { --a: #34428c; --b: #222d66; --c: #18204d; --lo: #0a0f2a; --rim: var(--gold); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 17px; border-width: 2px; box-shadow: 0 4px 0 var(--lo), 0 8px 16px rgba(0, 0, 0, .35); }
.btn-sm::after { inset: 2px 10px 52% 10px; }
.btn-sm:hover { box-shadow: 0 5px 0 var(--lo), 0 10px 18px rgba(0, 0, 0, .4); }
.btn-sm:active { box-shadow: 0 1px 0 var(--lo); }

/* ---------- panels ---------- */
.panel {
  position: relative; border-radius: var(--r); background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 3px solid #c99a3e; box-shadow: inset 0 0 0 2px rgba(255, 233, 160, .16), inset 0 2px 0 4px rgba(255, 255, 255, .03), 0 18px 40px rgba(0, 0, 0, .45);
}
.panel::before {   /* corner rivets like the in-game frames */
  content: ''; position: absolute; inset: 9px; border-radius: calc(var(--r) - 9px); pointer-events: none;
  background:
    radial-gradient(circle at 8px 8px, #ffe9a3 0 3px, #8a5d18 3.5px 4.5px, transparent 5px) top left / 16px 16px no-repeat,
    radial-gradient(circle at 8px 8px, #ffe9a3 0 3px, #8a5d18 3.5px 4.5px, transparent 5px) top right / 16px 16px no-repeat,
    radial-gradient(circle at 8px 8px, #ffe9a3 0 3px, #8a5d18 3.5px 4.5px, transparent 5px) bottom left / 16px 16px no-repeat,
    radial-gradient(circle at 8px 8px, #ffe9a3 0 3px, #8a5d18 3.5px 4.5px, transparent 5px) bottom right / 16px 16px no-repeat;
  opacity: .8;
}

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 50; left: 0; right: 0; top: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); pointer-events: none; transition: transform .35s; }
.nav-in {
  pointer-events: auto; display: flex; align-items: center; gap: 18px; height: 62px; padding: 0 10px 0 12px; border-radius: 999px;
  background: rgba(14, 20, 48, .72); border: 2px solid rgba(246, 205, 91, .38); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); width: min(1180px, calc(100% - 24px)); margin: 0 auto;
}
.nav.hide { transform: translateY(-120%); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 21px/1 var(--display); color: var(--gold-hi); white-space: nowrap; }
.brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 0 0 2px var(--gold), 0 3px 0 rgba(0, 0, 0, .4); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { text-decoration: none; font: 17px/1 var(--display); color: #dfe4ff; padding: 10px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.nav-links a:hover, .nav-links a.on { background: rgba(246, 205, 91, .14); color: var(--gold-hi); }
@media (max-width: 880px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } .brand span { font-size: 19px; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding: 120px 0 90px; isolation: isolate; }
.hero-sky { position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(1200px 520px at 75% 108%, rgba(255, 128, 40, .42), transparent 62%),
    radial-gradient(900px 600px at 10% -10%, rgba(112, 92, 255, .32), transparent 60%),
    linear-gradient(180deg, #070a1a 0%, #111a44 55%, #22163c 100%); }
.hero-sky::after {   /* two layers of stars */
  content: ''; position: absolute; inset: 0; opacity: .85;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, #ffe9b0 50%, transparent 51%), radial-gradient(1px 1px at 61% 30%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 38%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 36% 66%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 54% 52%, #ffe9b0 50%, transparent 51%), radial-gradient(1.5px 1.5px at 94% 64%, #fff 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .35; } }
.hero-art-bg { position: absolute; inset: -40px; z-index: -2; background: url(assets/keyart_blur.webp) center 65% / cover; opacity: .32; mix-blend-mode: screen; transform: scale(1.1); }
#embers { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .art-title { font-size: clamp(76px, 11vw, 150px); margin: 18px 0 6px; }
.hero-copy .art-title::before { white-space: pre-line; }
.tagline { font: clamp(22px, 2.6vw, 30px)/1.3 var(--display); margin: 22px 0 12px; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.tagline b { font-weight: 400; color: #ff9a5c; }
.hero-lead { max-width: 30em; color: #ced5f5; margin: 0 0 30px; font-size: 17px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px 14px; }
.hero-note { margin: 18px 0 0; font-size: 14px; color: var(--muted); }

.squad { position: relative; height: min(640px, 72vh); min-height: 460px; }
.squad .ground { position: absolute; left: 6%; right: 2%; bottom: 3%; height: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 70, .55), rgba(255, 110, 30, .18) 60%, transparent); filter: blur(4px); }
.squad .ring { position: absolute; left: 22%; right: 18%; bottom: 7%; height: 13%; border-radius: 50%; border: 2px solid rgba(255, 220, 140, .55);
  box-shadow: 0 0 30px rgba(255, 190, 90, .45), inset 0 0 30px rgba(255, 190, 90, .35); animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); opacity: .6; } }
.squad img { position: absolute; height: auto; will-change: transform; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5)); }
.squad .m-main { width: 42%; left: 30%; bottom: 9%; z-index: 3; }
.squad .m-giant { width: 44%; right: -4%; bottom: 16%; z-index: 1; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5)) brightness(.92); }
.squad .m-rifle { width: 38%; left: -4%; bottom: 12%; z-index: 2; }
.squad .m-apc { width: 34%; right: 4%; bottom: -2%; z-index: 4; }
.moon { position: absolute; right: 8%; top: 12%; width: clamp(140px, 18vw, 260px); aspect-ratio: 1; border-radius: 50%; z-index: -2; background: radial-gradient(circle at 38% 36%, #fffbe8, #ffe6a6 45%, #f2b85a 75%); box-shadow: 0 0 80px 20px rgba(255, 214, 140, .35), 0 0 220px 60px rgba(255, 170, 80, .18); opacity: .9; }
.moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 58%, rgba(190, 120, 40, .35) 0 9%, transparent 10%), radial-gradient(circle at 34% 64%, rgba(190, 120, 40, .25) 0 6%, transparent 7%), radial-gradient(circle at 55% 28%, rgba(190, 120, 40, .22) 0 5%, transparent 6%); }
.bob { animation: bob 3.6s ease-in-out infinite; }
.bob.d1 { animation-delay: -1.2s; } .bob.d2 { animation-delay: -2.1s; } .bob.d3 { animation-delay: -.6s; }
@keyframes bob { 50% { translate: 0 -12px; } }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 30px; height: 48px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .5); font-size: 0; }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: cue 1.8s infinite; }
@keyframes cue { 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 900px) {
  .hero { padding-top: 104px; min-height: auto; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .squad { height: 420px; min-height: 0; margin-top: 10px; }
  .scroll-cue { display: none; }
}
@media (max-width: 480px) { .squad { height: 340px; } .btn { min-height: 54px; padding: 0 24px; font-size: 20px; } }

/* ---------- marquee ribbon ---------- */
.ribbon { position: relative; z-index: 3; margin: -34px 0 0; transform: rotate(-2.2deg); background: linear-gradient(180deg, #ffd25c, #f2a321);
  border-block: 4px solid #6b3a06; box-shadow: 0 10px 0 rgba(0, 0, 0, .25), 0 0 0 2px #ffeaa0 inset; overflow: hidden; }
.ribbon-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ribbon-set { display: flex; align-items: center; gap: 30px; padding: 10px 15px; }
.ribbon-set span { display: inline-flex; align-items: center; gap: 10px; font: 22px/1 var(--display); color: #4a2304; white-space: nowrap; }
.ribbon-set img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #6b3a06; background: #fff3c9; }
.ribbon-set i { width: 10px; height: 10px; transform: rotate(45deg); background: #6b3a06; border-radius: 2px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(64px, 7.5vw, 104px) 0; }
.sec + .sec::before { content: ''; position: absolute; top: 0; left: 50%; width: min(520px, 70%); height: 2px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(246, 205, 91, .45), transparent); }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.sec-head .kicker { margin-bottom: 18px; }
.sec-head p { color: #c4cbec; margin: 16px auto 0; max-width: 36em; font-size: 17px; }

/* trailer */
.trailer-frame { padding: 14px; max-width: 980px; margin: 0 auto; }
.trailer-box { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: #000 url(assets/og.jpg) center / cover; }
.trailer-box iframe, .trailer-box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: radial-gradient(circle, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)); cursor: pointer; }
.trailer-play b { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ffc04d, #ef5f0a);
  border: 4px solid #ffe08a; box-shadow: 0 7px 0 var(--ember-lo), 0 0 0 10px rgba(255, 190, 80, .22); transition: transform .2s; }
.trailer-play:hover b { transform: scale(1.08); }
.trailer-play svg { width: 40px; height: 40px; margin-left: 6px; fill: #fff; filter: drop-shadow(0 2px 0 var(--ember-lo)); }
.trailer-cap { text-align: center; color: var(--muted); margin: 18px 0 0; }

/* story (sticky phone) */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); }
.story-phone { position: sticky; top: 110px; align-self: start; height: min(640px, 76vh); display: grid; place-items: center; }
.phone { position: relative; width: min(320px, 78vw); aspect-ratio: 585 / 1266; max-height: 100%; border-radius: 42px; padding: 12px; background: linear-gradient(160deg, #3a4686, #141a3c);
  border: 3px solid #c99a3e; box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 80px rgba(255, 140, 50, .18); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #000; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter 1s; }
.phone-tag { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; white-space: nowrap; padding: 8px 18px; border-radius: 999px; font: 17px/1 var(--display); color: #fff;
  background: rgba(10, 14, 36, .78); border: 2px solid rgba(246, 205, 91, .6); transition: opacity .4s; }
.story-steps { display: grid; gap: 30vh; padding: 12vh 0 18vh; }
.step { opacity: .28; transform: translateY(20px); transition: opacity .6s, transform .6s; }
.step.on { opacity: 1; transform: none; }
.step .num { font: 18px/1 var(--display); color: var(--ember); margin-bottom: 10px; }
.step h3 { font: clamp(28px, 3.4vw, 40px)/1.15 var(--display); margin: 0 0 14px; font-weight: 400; }
.step p { color: #c4cbec; margin: 0; font-size: 17px; max-width: 26em; }
.step ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.step li { padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #dfe4ff; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story-phone { top: 84px; height: 46vh; z-index: 1; }
  .phone { width: auto; height: 100%; }
  .story-steps { gap: 12vh; padding: 4vh 0 6vh; position: relative; z-index: 2; }
  .step { padding: 22px; border-radius: 20px; background: rgba(12, 17, 42, .9); border: 2px solid rgba(246, 205, 91, .3); backdrop-filter: blur(6px); }
}

/* heroes spotlight */
.sec-heroes { overflow: hidden; --hc: #ff6a2a; transition: --hc .6s; }
.sec-heroes::before { content: ''; position: absolute; inset: 0; z-index: -1; transition: background .8s;
  background: radial-gradient(800px 600px at 30% 50%, color-mix(in srgb, var(--hc) 30%, transparent), transparent 70%), linear-gradient(180deg, var(--night), #0d1430 50%, var(--night)); }
.spot { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; min-height: 600px; }
.spot-art { position: relative; height: 620px; display: grid; place-items: end center; }
.spot-art .watermark { position: absolute; top: 4%; left: 50%; translate: -50% 0; font: clamp(110px, 16vw, 210px)/1 var(--display); white-space: nowrap; color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--hc) 55%, transparent); opacity: .7; pointer-events: none; transition: opacity .4s; }
.spot-art .halo { position: absolute; left: 50%; bottom: 8%; width: 74%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hc) 60%, transparent), transparent); filter: blur(10px); }
.spot-art .disc { position: absolute; left: 50%; bottom: 3%; width: 60%; height: 64px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.spot-art img { position: relative; height: 96%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }
.spot-art img.in { animation: heroIn .7s cubic-bezier(.2, .9, .25, 1.2) both; }
@keyframes heroIn { from { opacity: 0; transform: translateX(60px) scale(.92); filter: blur(6px) drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); } }
.spot-info { padding: 34px 34px 30px; }
.spot-info.in > * { animation: rise .55s both; }
.spot-info.in > *:nth-child(2) { animation-delay: .05s; } .spot-info.in > *:nth-child(3) { animation-delay: .1s; } .spot-info.in > *:nth-child(4) { animation-delay: .15s; }
.spot-info.in > *:nth-child(5) { animation-delay: .2s; } .spot-info.in > *:nth-child(6) { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { padding: 5px 12px; border-radius: 999px; font: 15px/1.2 var(--display); background: rgba(255, 255, 255, .08); color: #e6e9ff; }
.badge.g-전설 { background: linear-gradient(180deg, #ffe07a, #f2a61c); color: #4a2604; box-shadow: 0 2px 0 #8a5208; }
.badge.g-영웅 { background: linear-gradient(180deg, #d9a8ff, #9a5cf0); color: #2a0b52; box-shadow: 0 2px 0 #4c218a; }
.badge.g-희귀 { background: linear-gradient(180deg, #8fd8ff, #3a95f0); color: #08264f; box-shadow: 0 2px 0 #174c8a; }
.badge.g-일반 { background: linear-gradient(180deg, #e8ecf7, #aab3cc); color: #2a3048; box-shadow: 0 2px 0 #5b6380; }
.spot-info h3 { font: clamp(40px, 5vw, 60px)/1.05 var(--display); margin: 14px 0 4px; font-weight: 400; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.spot-title { font: 20px/1.3 var(--display); color: var(--hc); margin: 0 0 14px; filter: brightness(1.25); }
.spot-lore { color: #cfd5f3; margin: 0 0 22px; }
.stats { display: grid; gap: 10px; margin: 0 0 22px; }
.stat { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.stat b { color: #fff; font-weight: 700; text-align: right; }
.bar { height: 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(180deg, #fff2a6, var(--gold) 45%, #e58a12); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.skills { display: grid; gap: 10px; }
.skill { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); }
.skill .k { grid-row: span 2; align-self: center; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 15px/1 var(--display); color: #4a2604;
  background: linear-gradient(180deg, #ffe07a, #f2a61c); box-shadow: 0 2px 0 #8a5208; }
.skill .k.p { background: linear-gradient(180deg, #d9a8ff, #9a5cf0); color: #fff; box-shadow: 0 2px 0 #4c218a; }
.skill b { font: 18px/1.2 var(--display); font-weight: 400; color: #fff; }
.skill span { font-size: 14px; color: #c4cbec; }
.roster { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.medal { position: relative; width: 78px; height: 78px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: none; transition: transform .2s; }
.medal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #1b2350;
  box-shadow: 0 0 0 3px var(--rim, #aab3cc), 0 0 0 6px rgba(0, 0, 0, .45), 0 6px 0 6px rgba(0, 0, 0, .25); filter: saturate(.8) brightness(.85); transition: filter .2s, box-shadow .2s; }
.medal:hover { transform: translateY(-4px); }
.medal:hover img, .medal[aria-selected='true'] img { filter: none; }
.medal[aria-selected='true'] { transform: translateY(-6px) scale(1.08); }
.medal[aria-selected='true'] img { box-shadow: 0 0 0 3px var(--rim), 0 0 0 7px #fff8, 0 0 26px 8px color-mix(in srgb, var(--rim) 60%, transparent); }
.medal:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.spot-nav { display: flex; gap: 10px; margin-top: 22px; }
.round { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(246, 205, 91, .6); background: rgba(10, 14, 36, .6); cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.round:hover { background: rgba(246, 205, 91, .2); }
.round svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .spot { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .spot-art { height: 420px; }
  .spot-info { padding: 26px 22px 22px; margin-top: -40px; }
  .medal { width: 60px; height: 60px; }
  .roster { gap: 12px; }
}

/* codex */
.codex { padding: 26px clamp(16px, 3vw, 34px) 34px; }
.tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 16px; cursor: pointer; font: 19px/1 var(--display);
  border: 2px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .25); color: #c9d0f2; transition: transform .15s, background .2s, color .2s; }
.tab small { font: 13px/1 var(--body); font-weight: 700; padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.tab[aria-selected='true'] { background: linear-gradient(180deg, #ffd25c, #f2a321); color: #4a2304; border-color: #ffeaa0; box-shadow: 0 4px 0 #8a5208; transform: translateY(-2px); }
.tab[aria-selected='true'] small { background: rgba(74, 35, 4, .15); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.card {
  --rc: #8b93ad; position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; border-radius: 18px; overflow: hidden;
  border: 3px solid var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 38%, #141b40), #10163a 70%);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .08); transition: transform .2s, box-shadow .2s; transform-style: preserve-3d;
  opacity: 0; animation: cardIn .45s both; animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; } }
.card:hover { box-shadow: 0 10px 0 rgba(0, 0, 0, .3), 0 0 24px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 0 2px rgba(255, 255, 255, .12); }
.card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.card .art { position: relative; aspect-ratio: 1; display: grid; place-items: end center; overflow: hidden; }
.card .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.card.hero-card .art img { object-fit: contain; object-position: 50% 100%; padding: 8px 6px 0; }
.card:hover .art img { transform: scale(1.06); }
.card .cost { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 17px/1 var(--display); color: #fff;
  background: radial-gradient(circle at 35% 30%, #c9a1ff, #7a3ee6 60%, #4b1aa8); box-shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 0 0 2px #e9d6ff; text-shadow: 0 1px 0 #2a0b52; }
.card .meta { padding: 10px 12px 12px; background: rgba(6, 9, 26, .55); }
.card .meta b { display: block; font: 18px/1.2 var(--display); font-weight: 400; color: #fff; }
.card .meta span { font-size: 13px; color: var(--muted); }
.r-common, .r-일반 { --rc: #8b93ad; } .r-rare, .r-희귀 { --rc: #3a95f0; } .r-epic, .r-영웅 { --rc: #9a5cf0; } .r-legend, .r-전설 { --rc: #f2a61c; }
.boss-card .art { background: radial-gradient(circle at 50% 45%, #fff6e6, #e9dcc4 70%); }
.boss-card .art img { mix-blend-mode: multiply; object-fit: contain; }
.legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 22px 0 0; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--rc); }

/* codex detail */
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(4, 6, 18, .72); backdrop-filter: blur(6px); }
.sheet[hidden] { display: none; }
.sheet-box { width: min(760px, 100%); max-height: calc(100svh - 40px); overflow: auto; display: grid; grid-template-columns: 260px 1fr; gap: 0; padding: 0; animation: pop .35s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(20px); } }
.sheet-art { display: grid; place-items: end center; padding: 20px 10px 0; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc, #f6cd5b) 45%, transparent), transparent 70%); border-radius: 20px 0 0 20px; }
.sheet-art img { max-height: 340px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.sheet-art.boss { background: radial-gradient(circle at 50% 45%, #fff6e6, #e9dcc4 70%); align-items: center; padding: 20px; }
.sheet-art.boss img { mix-blend-mode: multiply; }
.sheet-art.tile img { border-radius: 18px; max-width: 200px; margin-bottom: 30px; filter: none; box-shadow: 0 0 0 3px var(--rc), 0 10px 20px rgba(0, 0, 0, .4); }
.sheet-body { padding: 30px 30px 26px; }
.sheet-body h3 { font: 36px/1.1 var(--display); font-weight: 400; margin: 10px 0 4px; }
.sheet-body .sub { font: 18px/1.3 var(--display); color: var(--gold); margin: 0 0 14px; }
.sheet-body p { color: #cfd5f3; margin: 0 0 16px; }
.sheet-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
@media (max-width: 640px) { .sheet-box { grid-template-columns: 1fr; } .sheet-art { border-radius: 20px 20px 0 0; } .sheet-art img { max-height: 240px; } .sheet-body { padding: 22px; } }

/* modes */
.modes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.mode { position: relative; grid-column: span 2; padding: 28px 26px 26px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: var(--mbg); border: 3px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .15); transition: transform .25s; }
.mode:hover { transform: translateY(-6px) rotate(-.4deg); }
.mode.big { grid-column: span 3; min-height: 300px; }
.mode.wide { grid-column: span 6; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.mode::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(400px 200px at 90% 0%, rgba(255, 255, 255, .22), transparent 60%); }
.mode .ic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), 0 5px 0 rgba(0, 0, 0, .25); margin-bottom: 18px; }
.mode .ic img { width: 62px; height: 62px; }
.mode.wide .ic { margin: 0; }
.mode h3 { font: 28px/1.15 var(--display); font-weight: 400; margin: 0 0 10px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.mode p { margin: 0; color: rgba(255, 255, 255, .86); }
.mode .maps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mode .maps span { padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .25); font: 15px/1.2 var(--display); }
.m-stage { --mbg: linear-gradient(160deg, #2e7d32, #13471b); }
.m-siege { --mbg: linear-gradient(160deg, #b5651d, #5c2a08); }
.m-pvp { --mbg: linear-gradient(160deg, #3a5bd9, #1a2768); }
.m-guild { --mbg: linear-gradient(160deg, #8a3fd1, #3c145f); }
.m-raid { --mbg: linear-gradient(110deg, #b3202a, #4a0910 60%, #2a0610); }
@media (max-width: 900px) {
  .modes { grid-template-columns: 1fr 1fr; }
  .mode, .mode.big { grid-column: span 1; min-height: 0; }
  .mode.wide { grid-column: span 2; grid-template-columns: auto 1fr; }
  .mode.wide .btn { grid-column: span 2; justify-self: start; }
}
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } .mode, .mode.wide { grid-column: span 1; } .mode.wide { grid-template-columns: 1fr; } .mode.wide .btn { grid-column: auto; } }

/* raid */
.sec-raid { background: radial-gradient(900px 500px at 70% 30%, rgba(200, 30, 40, .35), transparent 70%), linear-gradient(180deg, var(--night), #1a0710 50%, var(--night)); overflow: hidden; }
.raid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: stretch; }
.raid-now { padding: 30px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; border-color: #c2303a; box-shadow: inset 0 0 0 2px rgba(255, 140, 140, .15), 0 0 60px rgba(220, 40, 50, .25), 0 18px 40px rgba(0, 0, 0, .45); }
.raid-portrait { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff3e3, #e7d3b8 70%); box-shadow: 0 0 0 5px #c2303a, 0 0 0 9px rgba(0, 0, 0, .4), 0 0 50px rgba(255, 60, 60, .5); overflow: hidden; }
.raid-portrait img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.raid-status { display: inline-flex; align-items: center; gap: 8px; font: 16px/1 var(--display); padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #ffd0d0; }
.raid-status i { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: blink 1.2s infinite; }
.raid-status.wait i { background: #ffc14d; box-shadow: 0 0 10px #ffc14d; }
@keyframes blink { 50% { opacity: .3; } }
.raid-now h3 { font: clamp(28px, 2.8vw, 38px)/1.15 var(--display); font-weight: 400; margin: 14px 0 4px; }
.raid-now .sub { font: 18px/1.3 var(--display); color: #ff9a8a; margin: 0 0 12px; }
.clock { font: clamp(40px, 5vw, 58px)/1 var(--display); color: #fff; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.moves { display: flex; flex-wrap: wrap; gap: 8px; }
.moves span { padding: 6px 12px; border-radius: 10px; background: rgba(255, 80, 80, .14); border: 1px solid rgba(255, 120, 120, .3); font: 15px/1.2 var(--display); color: #ffdede; }
.raid-side { display: grid; gap: 14px; align-content: start; }
.sched { padding: 22px 24px; }
.sched h4, .tiers h4 { font: 20px/1 var(--display); font-weight: 400; margin: 0 0 14px; color: var(--gold-hi); }
.sched ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sched li { display: grid; grid-template-columns: 64px 44px 1fr; align-items: center; gap: 12px; }
.sched li time { font: 20px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.sched li img { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; background: #efe2cb; mix-blend-mode: normal; }
.sched li span { font: 17px/1.2 var(--display); color: #e8ebff; }
.tiers { padding: 22px 24px; }
.tier-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tier { flex: 1; min-width: 70px; text-align: center; padding: 10px 6px; border-radius: 14px; background: rgba(0, 0, 0, .3); }
.tier b { display: block; font: 26px/1 var(--display); font-weight: 400; }
.tier span { font-size: 12px; color: var(--muted); }
.t-B b { color: #c9d0e6; } .t-A b { color: #7fd0ff; } .t-S b { color: #c69cff; } .t-SS b { color: #ffcf5a; } .t-SSS b { background: linear-gradient(180deg, #fff6b0, #ff8a2a); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 960px) { .raid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .raid-now { grid-template-columns: 1fr; text-align: center; } .raid-portrait { width: 200px; margin: 0 auto; } .moves { justify-content: center; } }

/* download */
.dl { position: relative; padding: clamp(30px, 5vw, 56px); display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; overflow: hidden;
  background: radial-gradient(600px 300px at 100% 100%, rgba(255, 140, 40, .3), transparent 70%), linear-gradient(180deg, var(--panel-a), var(--panel-b)); }
.dl p { color: #cfd5f3; max-width: 34em; }
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.store { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: 228px; padding: 12px 20px 12px 16px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(180deg, #111, #000); border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 5px 0 rgba(0, 0, 0, .5); transition: transform .15s, border-color .2s; }
.store:hover { transform: translateY(-3px); border-color: #fff; }
.store svg { width: 30px; height: 30px; fill: #fff; flex: none; }
.store span { display: grid; font: 22px/1.05 var(--display); }
.store small { font: 12px/1.2 var(--body); color: #c8c8c8; letter-spacing: .02em; }
.store .soon { position: absolute; top: -10px; right: -8px; padding: 4px 9px; border-radius: 999px; font: 12px/1 var(--display); font-style: normal; color: #4a2304; background: var(--gold); box-shadow: 0 2px 0 #8a5208; }
.store.soon-off { opacity: .92; cursor: default; }
.store.live .soon { display: none; }
.store-web { background: linear-gradient(180deg, #ffc04d, #ef5f0a); border-color: #ffe08a; box-shadow: 0 5px 0 var(--ember-lo); }
.store-web small { color: #fff3d6; }
.dl-duck { width: clamp(180px, 22vw, 290px); height: auto; animation: bob 3.4s ease-in-out infinite; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .5)); }
.dl-note { font-size: 14px; color: var(--muted) !important; margin: 18px 0 0; }
@media (max-width: 760px) { .dl { grid-template-columns: 1fr; text-align: center; } .dl p { margin-inline: auto; } .stores { justify-content: center; } .dl-duck { order: -1; margin: 0 auto; width: 170px; } }

/* company */
.company { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; }
.company .lead { font: clamp(22px, 2.6vw, 30px)/1.4 var(--display); margin: 18px 0 18px; color: #fff; }
.company p { color: #c4cbec; }
.contact { padding: 30px; }
.contact h3 { font: 24px/1 var(--display); font-weight: 400; margin: 0 0 18px; color: var(--gold-hi); }
.contact dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; margin: 0; }
.contact dt { color: var(--muted); font-size: 14px; padding-top: 2px; }
.contact dd { margin: 0; font-weight: 600; word-break: break-all; }
.contact a { color: var(--gold-hi); }
@media (max-width: 860px) { .company { grid-template-columns: 1fr; } }

/* footer */
.foot { padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .08); background: #070a18; font-size: 14px; color: var(--muted); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: #fff; font: 18px/1 var(--display); }
.foot-brand img { width: 30px; height: 30px; border-radius: 9px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot nav a { text-decoration: none; } .foot nav a:hover { color: #fff; }
.foot .copy { margin: 0 0 0 auto; }
@media (max-width: 700px) { .foot .copy { margin: 0; width: 100%; } }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.rv.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv, .step, .card { opacity: 1; transform: none; }
}

/* phones: two cards per row in the 도감, smaller tabs and spotlight */
@media (max-width: 560px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card .meta b { font-size: 16px; }
  .tab { padding: 10px 14px; font-size: 17px; }
  .spot-art { height: 340px; }
  .squad { height: 300px; margin-top: -10px; }
  .hero { padding-bottom: 70px; }
}