/* ENTHEON — cinematic artwork, editorial paper, character showcase. */
:root {
  color-scheme: dark;
  --night: #111c28;
  --ink: #252b30;
  --paper: #eeeae1;
  --gold: #c7a769;
  --serif: 'Noto Serif KR', Georgia, serif;
  --roman: Cinzel, Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--night); color: #f4f0e7; font-family: 'IBM Plex Sans KR', sans-serif; line-height: 1.8; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, h4, figure { margin: 0; }
p, h1, h2, h3, h4 { word-break: keep-all; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
::selection { background: #c7a769; color: #18222c; }
.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: fixed; top: -90px; left: 16px; padding: 12px 18px; background: var(--gold); color: var(--ink); z-index: 30; }
.skip:focus { top: 10px; }
.navigation { height: 76px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #101923; border-bottom: 1px solid #ffffff12; position: sticky; top: 0; z-index: 20; }
.brand { font-family: var(--roman); font-size: 25px; font-weight: 600; letter-spacing: .09em; }
.nav-links { display: flex; gap: 38px; font-size: 12px; color: #d6d8d9; }
.nav-links a:hover { color: var(--gold); }
.nav-cta { font-size: 12px; font-weight: 600; padding: 9px 30px; color: #1f2830; background: #d0b47c; }
.nav-cta:hover, .button:hover { background: #e1c791; }
/* Hero: artwork belongs to the whole viewport, type belongs to its quiet center. */
.hero { height: min(830px, calc(100svh - 76px)); min-height: 650px; position: relative; isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 39%; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg,#101c2c 0%,#101c2c1a 30%,transparent 80%), radial-gradient(ellipse 33% 55% at 50% 47%,#111b2cbc,transparent); }
.hero-copy { text-align: center; margin: auto; padding-top: clamp(90px,13vh,158px); width: min(610px, 60%); text-shadow: 0 2px 24px #0a172ee6; }
.hero-overline { font-family: var(--serif); font-size: 13px; letter-spacing: .35em; color: #e7d8b8; }
.hero-logo { font-family: var(--roman); font-size: clamp(64px,7.2vw,105px); letter-spacing: .025em; font-weight: 600; line-height: 1.35; color: #f4e8c6; }
.hero-ko { display: block; font-size: 11px; letter-spacing: .65em; margin-top: -3px; padding-left: .65em; color: #e3d6b7; }
.hero-rule { width: 170px; margin: 22px auto 19px; color: var(--gold); display: flex; align-items: center; gap: 12px; }
.hero-rule:before, .hero-rule:after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-rule:after { transform: rotate(180deg); }
.hero-rule span { font-size: 6px; }
h1 { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -.045em; line-height: 1.65; }
.button { display: inline-flex; justify-content: center; align-items: center; min-width: 198px; min-height: 55px; padding: 14px 30px; margin-top: 28px; background: #c9a966; color: #18222b; font-size: 14px; font-weight: 600; border: 1px solid #ebd6a4; box-shadow: 0 0 0 4px #111c2933, 0 0 0 5px #d9c39766; text-shadow: none; transition: background .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.hero-note { font-size: 10px; color: #ced3dc; margin-top: 20px; }
.scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #c3cad2; text-align: center; letter-spacing: .12em; }
.scroll-cue span { display: block; width: 1px; height: 30px; background: #c7a76990; margin: 0 auto 9px; }
/* The warm paper surface gives artwork and dark scenes contrast. */
.paper { color-scheme: light; background-color: var(--paper); color: var(--ink); background-image: radial-gradient(ellipse at 50% 0%, #ffffff70, transparent 65%); }
section { padding: 100px 0; }
.section-title { text-align: center; padding-inline: 24px; max-width: 860px; margin: 0 auto 57px; }
.eyebrow { font-size: 11px; letter-spacing: .18em; color: #ae8d50; font-weight: 500; }
h2 { font-family: var(--serif); font-size: clamp(32px,3.25vw,46px); font-weight: 600; line-height: 1.5; letter-spacing: -.045em; }
.section-title h2 { margin-top: 14px; }
h2 em { color: #8c7141; font-style: normal; }
.section-title>p:last-child { font-size: 13px; color: #697075; margin-top: 20px; line-height: 1.9; }
.intro-layout { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 65px; }
.game-frame { position: relative; }
.game-frame:before { content: ''; position: absolute; inset: -9px 12px 21px -9px; border: 1px solid #b0a086; pointer-events: none; }
.game-frame img { width: 100%; box-shadow: 0 15px 35px #3433231c; }
.game-frame figcaption { font-size: 9px; color: #757970; padding-top: 12px; text-align: right; }
.small-rule { display: block; height: 2px; width: 40px; background: #a88951; margin-bottom: 26px; }
.intro-copy h3 { font-family: var(--serif); font-size: 29px; line-height: 1.6; font-weight: 600; letter-spacing: -.04em; }
.intro-copy>p { color: #697075; font-size: 13px; line-height: 1.9; margin-top: 20px; }
.inline-link { display: inline-flex; align-items: center; gap: 23px; font-size: 11px; font-weight: 600; margin-top: 28px; color: #887046; padding-bottom: 6px; border-bottom: 1px solid #ab94744d; }
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 72px; text-align: center; }
.pillars article { padding: 0 12px; position: relative; }
.pillars article+article:before { content: ''; position: absolute; left: -20px; top: 23px; bottom: 8px; width: 1px; background: #b4aa934d; }
.pillar-icon { font-family: var(--roman); color: #a88b53; font-size: 25px; }
.pillars h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 10px 0; }
.pillars p { font-size: 12px; color: #6e7575; line-height: 1.9; }
/* Champion selection: one complete story at a time, with actual game card art. */
.champions { background: radial-gradient(ellipse at 50% 50%, #243243, #131c28 75%); padding-bottom: 95px; }
.champions .section-title { margin-bottom: 36px; }
.champions .section-title>p:last-child { color: #abb2bd; }
.champions h2 { font-size: 38px; }
.mobile-break { display: none; }
.champion-picker { display: flex; align-items: flex-start; justify-content: center; gap: 27px; margin-bottom: 45px; }
.champion-picker button { border: 0; color: #abb4c0; background: none; padding: 0; font-size: 11px; display: grid; justify-items: center; gap: 10px; }
.portrait { width: 64px; height: 70px; display: block; overflow: hidden; border: 1px solid #76838f; background: #1b2531; transition: border-color .2s, transform .2s; }
.portrait img { width: 115px; max-width: none; height: 155px; object-fit: cover; margin-left: -26px; margin-top: -22px; }
.champion-picker button[aria-pressed=true] { color: #ead6ad; }
.champion-picker button[aria-pressed=true] .portrait { border-color: #e9c786; box-shadow: 0 0 0 3px #1a2634, 0 0 0 4px #b99a61; transform: translateY(-3px); }
.champion-picker button:hover .portrait { border-color: #ead6ad; }
.showcase { border: 1px solid #76808a66; padding: 8px; position: relative; }
.showcase:after { content: ''; position: absolute; inset: -8px 8px; border-block: 1px solid #a9905c80; pointer-events: none; }
.champion-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; min-height: 530px; position: relative; isolation: isolate; overflow: hidden; padding: 55px 7%; align-items: center; background: #172638; }
.champion-backdrop { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.olympus .champion-backdrop { background-image: url('assets/olympus.webp'); }
.asgard .champion-backdrop { background-image: url('assets/asgard.webp'); }
.champion-backdrop:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #102236f5, #102236d9 35%, #14233438), linear-gradient(0deg, #111d2bbd, transparent); }
.champion-region { color: #d9c69f; font-size: 10px; letter-spacing: .18em; }
.champion-region span { margin-inline: 13px; }
.champion-copy h3 { font-family: var(--serif); font-size: 57px; line-height: 1.5; font-weight: 500; letter-spacing: -.055em; margin: 8px 0 4px; }
.champion-title { font-family: var(--serif); color: #e7d4ad; font-size: 19px; }
.champion-story { font-size: 12px; color: #c0c9d3; line-height: 1.95; margin-top: 20px; }
.ability { border-top: 1px solid #aab4bc40; padding-top: 20px; margin-top: 25px; max-width: 365px; }
.ability>span { color: #b4bec8; font-size: 9px; }
.ability h4 { font-weight: 500; color: #e5d0a8; font-size: 15px; margin: 2px 0 6px; }
.ability p { color: #b6c3d0; font-size: 11px; }
.showcase-card { width: min(100%,305px); justify-self: center; transform: rotate(5deg); }
.showcase-card img { width: 100%; filter: drop-shadow(0 24px 25px #030b16a6); }
.showcase-card>span { display: block; text-align: center; font-size: 8px; color: #bcc5cf; margin-top: 16px; transform: rotate(-5deg); }
/* Regions are full-width places, not information cards. */
.worlds { padding-bottom: 0; }
.world-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #d7caa9; }
.world { position: relative; min-height: 420px; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 40px 30px; color: #f5f2e8; }
.world img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.world:after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg,#0b1c30eb,transparent 80%); }
.world:hover img { transform: scale(1.035); }
.world span { font-family: var(--roman); font-size: 10px; letter-spacing: .2em; color: #e4d5af; }
.world h3 { font-family: var(--serif); font-size: 39px; font-weight: 500; margin: 3px 0 7px; }
.world p { font-size: 12px; color: #c6cfda; }
/* One calm signup destination. */
.registration { position: relative; isolation: isolate; overflow: hidden; padding: 100px 24px 95px; }
.registration-art { position: absolute; inset: 0; z-index: -2; background: linear-gradient(#111d2be8,#111d2bef),url('assets/keyart-v2.webp') center/cover; }
.registration-inner { max-width: 570px; margin: auto; text-align: center; }
.registration h2 { font-size: 43px; margin-top: 16px; }
.signup-description { color: #b9c2ce; font-size: 12px; margin-top: 23px; }
.signup-panel { margin: 32px auto 0; max-width: 500px; text-align: left; }
.form { margin: 0; }
.email-label { display: block; font-size: 10px; color: #c4ced8; margin-bottom: 8px; }
.row { display: flex; gap: 8px; }
input[type=email] { flex: 1; min-width: 0; border: 1px solid #697b8d; background: #101a27; color: #f4f0e7; border-radius: 0; padding: 13px 16px; min-height: 50px; font-size: 14px; }
input::placeholder { color: #9baaba; }
button[type=submit] { background: #c9a966; border: 1px solid #dbc391; color: #1c2733; border-radius: 0; padding: 12px 23px; min-height: 50px; font-size: 12px; font-weight: 600; white-space: nowrap; }
button[type=submit] span { display: none; }
button[type=submit]:hover { background: #e1c791; }
button[type=submit]:disabled { opacity: .6; cursor: wait; }
.consent { display: flex; gap: 8px; margin-top: 14px; font-size: 10px; color: #b7c2cf; line-height: 1.9; }
.consent input { width: 15px; height: 15px; flex: none; margin: 2px 0 0; accent-color: #c9a966; }
.consent label { cursor: pointer; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.promise { font-size: 9px; color: #a7b2c0; margin-top: 15px; text-align: center; }
.formmsg { display: none; font-size: 12px; color: #ffc2af; margin-top: 12px; }
.formmsg.on { display: block; }
input.err { border-color: #ffc2af; }
.consent.err { color: #ffc2af; }
.form.off, .done { display: none; }
.done.on { display: block; text-align: center; }
.done h2 { font-size: 30px; color: #e5cca0; }
.done p { color: #c0cad6; font-size: 13px; }
.success-mark { color: #e5cca0; font-size: 24px; }
noscript p { font-size: 12px; color: #f0c28e; margin-top: 14px; }
.faq { padding-block: 65px; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.65fr; gap: 70px; }
.faq h2 { font-size: 28px; }
.faq details { padding: 18px 0; border-bottom: 1px solid #b4aa9366; }
.faq details:first-child { padding-top: 0; }
.faq summary { display: flex; justify-content: space-between; gap: 20px; list-style: none; font-size: 13px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: #967d4d; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { color: #656f72; font-size: 12px; margin-top: 14px; }
footer { text-align: center; padding: 46px 24px 28px; background: #0c131d; color: #a2adb9; }
footer .brand { color: #d8c394; font-size: 29px; }
footer p { font-size: 10px; margin-top: 5px; }
footer>div { display: flex; justify-content: center; gap: 26px; margin-top: 25px; font-size: 10px; }
footer small { display: block; font-size: 9px; margin-top: 25px; color: #8794a3; }
@media(min-width:1600px) { .hero-copy { padding-top: 140px; } .hero-art { object-position: center 45%; } }
@media(max-width:1000px) {
  .wrap { width: calc(100% - 64px); }
  .navigation { padding-inline: 28px; }
  .nav-links { gap: 22px; }
  .hero { min-height: 610px; }
  .hero-logo { font-size: 70px; }
  .hero-copy { padding-top: 120px; }
  .intro-layout { gap: 35px; grid-template-columns: 1.4fr 1fr; }
  .intro-copy h3 { font-size: 25px; }
  .champion-panel { padding: 42px 5%; gap: 25px; }
  .champion-copy h3 { font-size: 47px; }
  .champion-title { font-size: 17px; }
  .champion-story br { display: none; }
  .world { min-height: 350px; }
}
@media(max-width:700px) {
  html { scroll-padding-top: 64px; }
  .wrap { width: calc(100% - 40px); }
  .navigation { height: 64px; padding: 0 20px; gap: 14px; }
  .brand { font-size: 20px; }
  .nav-links { display: none; }
  .nav-cta { padding: 7px 18px; font-size: 11px; }
  .hero { height: 720px; min-height: 0; }
  .hero-art { object-fit: cover; width: 100%; left: 0; height: 100%; object-position: center top; }
  .hero-shade { background: linear-gradient(0deg,#101c2c 0%,#101c2c33 45%,transparent 75%); }
  .hero-copy { width: calc(100% - 30px); padding-top: 319px; }
  .hero-overline { font-size: 10px; letter-spacing: .25em; }
  .hero-logo { font-size: clamp(43px,12vw,65px); line-height: 1.45; }
  .hero-ko { font-size: 9px; }
  .hero-rule { margin: 15px auto 13px; width: 130px; }
  h1 { font-size: 24px; line-height: 1.6; }
  .button { margin-top: 23px; min-height: 49px; min-width: 180px; font-size: 13px; padding: 10px 24px; }
  .hero-note { font-size: 9px; margin-top: 15px; }
  .scroll-cue { bottom: 17px; font-size: 8px; }
  .scroll-cue span { height: 16px; margin-bottom: 5px; }
  section { padding-block: 64px; }
  .section-title { margin-bottom: 35px; padding-inline: 20px; }
  .eyebrow { font-size: 9px; letter-spacing: .12em; }
  h2 { font-size: 30px; line-height: 1.55; }
  .section-title h2 { margin-top: 12px; }
  .section-title>p:last-child { font-size: 11px; margin-top: 18px; }
  .intro-layout { grid-template-columns: 1fr; gap: 31px; }
  .game-frame:before { inset: -6px 8px 22px -6px; }
  .game-frame figcaption { font-size: 8px; }
  .intro-copy { text-align: center; }
  .small-rule { width: 32px; margin: 0 auto 18px; }
  .intro-copy h3 { font-size: 25px; }
  .intro-copy>p { font-size: 12px; margin-top: 15px; }
  .inline-link { font-size: 10px; margin-top: 19px; }
  .pillars { grid-template-columns: 1fr; gap: 25px; margin-top: 38px; }
  .pillars article { border-top: 1px solid #b4aa934d; padding-top: 17px; }
  .pillars article+article:before { display: none; }
  .pillar-icon { font-size: 20px; }
  .pillars h3 { font-size: 19px; margin: 6px 0 8px; }
  .pillars p { font-size: 11px; }
  .champions { padding-bottom: 58px; }
  .champions h2 { font-size: 29px; }
  .mobile-break { display: block; }
  .champions .section-title { margin-bottom: 30px; }
  .champion-picker { gap: 18px; margin-bottom: 31px; }
  .portrait { width: 49px; height: 55px; }
  .portrait img { width: 91px; height: 123px; margin-left: -21px; margin-top: -17px; }
  .champion-picker button { font-size: 10px; gap: 9px; }
  .showcase { padding: 5px; }
  .champion-panel { grid-template-columns: 1fr; padding: 30px 23px; gap: 22px; min-height: 0; }
  .champion-backdrop:after { background: linear-gradient(0deg,#102236e8,#102236b3); }
  .champion-copy { text-align: center; }
  .champion-region { font-size: 8px; }
  .champion-copy h3 { font-size: 38px; margin-top: 7px; }
  .champion-title { font-size: 15px; }
  .champion-story { font-size: 11px; margin-top: 14px; }
  .ability { margin: 18px auto 0; padding-top: 15px; }
  .ability h4 { font-size: 14px; }
  .ability p { font-size: 10px; }
  .showcase-card { max-width: 200px; transform: rotate(3deg); }
  .showcase-card>span { font-size: 8px; margin-top: 12px; transform: rotate(-3deg); }
  .world-grid { grid-template-columns: 1fr; }
  .world { min-height: 320px; padding: 28px 20px; }
  .world span { font-size: 9px; }
  .world h3 { font-size: 32px; }
  .world p { font-size: 11px; }
  .registration { padding: 64px 22px; }
  .registration h2 { font-size: 30px; }
  .signup-description { font-size: 11px; }
  .signup-panel { margin-top: 25px; }
  .row { flex-direction: column; gap: 10px; }
  input[type=email] { font-size: 16px; padding: 11px 14px; }
  button[type=submit] { font-size: 13px; }
  .consent { font-size: 10px; }
  .promise { font-size: 9px; margin-top: 13px; }
  .faq { padding-block: 45px; }
  .faq-layout { grid-template-columns: 1fr; gap: 25px; }
  .faq h2 { font-size: 24px; }
  .faq summary { font-size: 12px; }
  .faq details p { font-size: 11px; }
  footer { padding-top: 37px; }
  footer>div { gap: 17px; font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *:before, *:after { transition: none !important; animation: none !important; } }