/* LOST — clearer hierarchy, quieter surfaces, and comfortable mobile controls. */
:root { --leaf-r: 18px; }
.site-header { background: linear-gradient(180deg, rgba(6, 15, 14, .94), rgba(6, 15, 14, .65)); }
.site-header.is-solid { background: rgba(6, 15, 14, .97); }
.site-header__in { align-items: center; }
.site-header__actions { gap: .65rem; }
.demo-badge { background: #58251e; color: #ffe2d7; letter-spacing: .01em; }
.btn { min-height: 44px; transition: background .2s, box-shadow .2s, transform .2s; }
.btn--primary { background: linear-gradient(135deg, #f1d399, #c59a51); color: #20180b; border-color: #edcf96; box-shadow: inset 0 1px 0 #fff0c8, 0 6px 22px #0004; text-shadow: none; }
.btn--primary:hover { background: linear-gradient(135deg, #ffe5b4, #d9ac63); color: #20180b; box-shadow: inset 0 1px 0 #fff0c8, 0 8px 26px #0006; }
.hero { min-height: max(740px, 94svh); padding-bottom: 40px; }
.hero__inner { padding-top: 60px; }
.hero__inner::before { inset: 0 -4% -7%; background: radial-gradient(ellipse at 50% 62%, #061310b0 0%, #06131065 34%, transparent 70%); }
.hero__eyebrow { display: flex; align-items: center; gap: 1rem; color: #fff1d3; font-size: .86rem; font-weight: 600; text-shadow: 0 2px 8px #000; }
.hero__eyebrow span { width: 28px; height: 1px; background: #e3be79; }
.hero__logo { width: clamp(290px, 42vw, 570px); margin-block: 8px 0; }
.hero__tag { margin-top: .4rem; font-size: clamp(2.5rem, 4.6vw, 4.1rem); }
.hero__sub { margin-top: .8rem; color: #f5ecd8; }
.hero__cta { margin-top: 2rem; gap: .85rem; }
.hero__cta .btn { min-width: 180px; min-height: 56px; font-size: 1.02rem; }
.hero__cta .btn:not(.btn--primary) { background: #0c2525db; border: 1px solid #c2b28a80; }
.world-line { background: #071c19bf; box-shadow: inset 0 0 0 1px #e0c28b40; font-size: .85rem; }
.hero__explore { display: flex; align-items: center; gap: .75rem; margin-top: 1.7rem; color: #eee5d2; font-size: .82rem; padding: .5rem; }
.hero__explore span { color: #efd09c; font-size: 1.35rem; }
.journey-nav { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; z-index: 1; margin-block: -1px 32px; border: 1px solid #d8c09140; border-radius: 16px; background: #0c1b19f2; box-shadow: 0 18px 48px #0005; }
.journey-nav a { display: flex; align-items: center; gap: 1.2rem; padding: 1.55rem 1.8rem; transition: background .2s; }
.journey-nav a + a { border-inline-start: 1px solid #d8c09126; }
.journey-nav a:hover { background: #e4be7710; }
.journey-nav__number { font: 400 1.75rem/1 'Cinzel', serif; color: #c5a56b; }
.journey-nav strong { display: block; font-size: 1.05rem; color: #f1e5cd; }
.journey-nav small { display: block; font-size: .8rem; color: #b3b9a9; margin-top: .15rem; }
.journey-nav .ic { margin-inline-start: auto; color: #c5a56b; width: 24px; height: 24px; }
.section-heading { margin-bottom: 2rem; gap: 1.5rem; }
.section-heading h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-block: .35rem .5rem; }
.section-kicker { color: #d8b77b; font-size: .8rem; }
.section-heading p { max-width: 52ch; line-height: 1.9; }
.class-discovery { padding-block: clamp(48px, 6vw, 90px); }
.class-stage { border: 1px solid #d8c09132; }
.class-stage__content { padding: clamp(1.25rem, 3.5vw, 3rem); }
.class-stage__visual { min-height: 490px; }
.class-choice { min-height: 80px; box-shadow: inset 0 0 0 1px #d8c09132; }
.class-choice[aria-selected="true"] { box-shadow: inset 0 -3px 0 #e2bd79, inset 0 0 0 1px #e2bd7950; }
.kingdom-card { padding: 1.9rem; transition: transform .2s, box-shadow .2s; }
.desk { padding-block: 60px 80px; }
.win { border: 1px solid #ddd0a526; }
.win__bar { padding-block: 1.1rem; border-bottom: 1px solid #ddd0a521; background: #0000001c; }
.win__title { font-size: 1.08rem; }
.win__body { padding: 1.6rem; }
.win__body--flush { padding: 0; }
.rank-row { padding-block: .85rem; }
.rank-row:hover { background: #d8c0910c; }
.kv--sheet th, .kv--sheet td { padding-block: .8rem; }
.quest-card { gap: 2rem; }
.obj { padding-block: 1.1rem; }
.obj__name small { line-height: 1.7; margin-top: .25rem; }
.plate--soft { background: linear-gradient(var(--sheen-angle), var(--sheen), transparent 42%), color-mix(in srgb, var(--glass-solid) 94%, transparent); }
.shop-item { border: 1px solid #ddd0a52b; padding: 1.6rem; }
.shop-item p, .shop-item__cat { color: var(--ink-mute); }
.shop-note { padding: .9rem 1.2rem; color: #d8d3c3; background: #0b1a18ed; border-radius: 8px; }
.fchip:not([aria-pressed="true"]) { background: #0b1a18ed; }
.shop-item__top { min-height: 64px; }
.shop-item__foot { padding-top: 1.2rem; }
.shop-item[data-cat="misc"] { --rar-text: #f4ecd8; }
.faq summary { padding-block: 1.1rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: 8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #e2bd79; outline-offset: 2px; }
.page-hero h1 { line-height: 1.4; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kingdom-card:hover { transform: translateY(-4px); }
  .hero__cta .btn:hover { transform: translateY(-2px); }
}
@media (min-width: 1241px) {
  .site-nav { align-self: center; gap: 5px; }
  .site-nav a { font-size: .9rem; padding-inline: .85rem; }
}
@media (max-width: 980px) {
  .journey-nav a { padding: 1.15rem; gap: .8rem; }
  .journey-nav .ic { display: none; }
  .class-stage__visual { min-height: 320px; }
}
@media (max-width: 640px) {
  .hero { min-height: 760px; min-height: max(710px, 92svh); padding-bottom: 20px; }
  .hero__inner { padding-top: 42px; }
  .hero__logo { width: min(92%, 420px); }
  .hero__tag { font-size: 2.6rem; }
  .hero__cta { gap: .65rem; width: 100%; }
  .hero__cta .btn { flex: 1; min-width: 140px; padding-inline: .8rem; font-size: .94rem; }
  .world-line { border-radius: 12px; font-size: .78rem; gap: .3rem .6rem; }
  .journey-nav { grid-template-columns: 1fr; margin-bottom: 24px; }
  .journey-nav a { padding: 1rem 1.25rem; }
  .journey-nav a + a { border-inline-start: 0; border-top: 1px solid #d8c09126; }
  .journey-nav .ic { display: block; }
  .journey-nav__number { font-size: 1.45rem; }
  .section-heading { align-items: start; flex-wrap: wrap; }
  .class-stage__visual { min-height: 280px; }
  .win__bar { flex-wrap: wrap; gap: .6rem; }
  .win__body { padding: 1.2rem; }
  .win__body--flush { padding: 0; }
  .desk { padding-block: 36px 48px; }
  .obj { flex-wrap: wrap; }
  .obj .btn { margin-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .kingdom-card { transition: none; }
}