/* Flyff Tein: flat 2D parchment artwork and gentle optional motion. */
:root {
  --blue: #795036; --deep: #57351f; --sky: #75b3c5;
  --gold: #e9bd58; --ink: #604b37; --muted: #82715d;
  --line: #e8ddc6; --shadow: 0 14px 38px #7253321a;
}
body { background: #fffaf0; color: var(--ink); }
.sky-backdrop::after { background: linear-gradient(180deg, transparent 34%, #fffaf01a 52%, #fffaf0 95%); }
.nav { border-color: #a27b43; background: linear-gradient(180deg, #947042, #69432a); box-shadow: 0 5px 0 #6f47241a, 0 12px 30px #694a2926, inset 0 1px 0 #ffe5aa80; }
.nav-link strong { color: #fff1cb; text-shadow: 0 1px 1px #482c22; }
.nav-link small { color: #e8d7b4; }
.nav-link:hover, .nav-link.active { background: #50341d38; }
.nav-download { border-color: #fff1bb; border-bottom-color: #a78135; color: #68421f; background: linear-gradient(180deg, #fff6cd, #ebc568); box-shadow: 0 5px 12px #603d2933, inset 0 0 0 3px #fff9da70; }
.hero { position: relative; isolation: isolate; }
.hero-kicker { color: #fff8dc; text-shadow: 0 1px 3px #657a61; }
.hero-logo { filter: drop-shadow(0 7px 8px #74502927); animation: tein-logo-float 6s ease-in-out infinite; animation-play-state: running; }
.hero h1, .hero h1 span { color: #69452c; text-shadow: 0 2px 6px #fffcf2, 0 0 12px #fff9ec; }
.hero-description, .hero-caption { color: #6d583b; text-shadow: 0 1px 5px #fffaf0; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 50px 10% 60px; pointer-events: none; background: radial-gradient(circle at 17% 29%, #fff8b4 0 2px, transparent 5px), radial-gradient(circle at 84% 33%, #fffbe1 0 2px, transparent 5px), radial-gradient(circle at 23% 68%, #ffe7a2 0 2px, transparent 5px), radial-gradient(circle at 74% 75%, #fff8d0 0 2px, transparent 5px); animation: tein-glints 4s ease-in-out infinite; animation-play-state: running; }
body[data-page='home'] .sky-backdrop { animation: tein-sky-drift 18s ease-in-out infinite; animation-play-state: running; }
.motion-toggle { border: 1px solid #b28e594a; background: #fff9e7d9; color: #765a35; border-radius: 18px; padding: 6px 13px; margin-top: 12px; font-size: 9px; min-height: 32px; box-shadow: 0 2px 6px #8363320a; }
.motion-toggle:hover { background: #ffefc7; }
.motion-paused .hero-logo, .motion-paused .sky-backdrop { animation-play-state: paused !important; }
.motion-paused .hero::before { animation-play-state: paused !important; }
.portal-link { border-color: #a6844e; background: linear-gradient(150deg, #967d4e, #6e4c31); color: #fff4d5; box-shadow: 0 5px 15px #77582e20, inset 0 1px 0 #ffefc94d; }
.portal-link small { color: #e7d8b8; }
.portal-icon { background: #63452533; border-color: #d8bc75; color: #ffe8aa; }
.portal-link b { color: #dfc998; }
.btn-gold { color: #63421d; background: linear-gradient(180deg, #fff0b5, #e7bd60); border-color: #c79d42; }
.btn-light, .btn-outline { background: #fffbf0ec; color: #76563a; border-color: #f4e6c8; }
.banner-slide::after { background: linear-gradient(90deg, #624222aa, #5e57301a 85%); }
.banner-slide-second::after { background: linear-gradient(90deg, #4c5936b8, #7c79461a); }
.banner-controls button { background: #6248276e; }
.adventure-banner { background: #78582f; box-shadow: 0 0 0 4px #fffdf1, var(--shadow); }
.section-heading h2 span, .world-copy h2 span { color: #778355; }
.section-description, .news-note, .news-body p, .step p, .faq p { color: #8a7a63; }
.news-filters button { background: #fffdf6; color: #897252; border-color: #e9dec8; }
.news-filters button:hover { background: #f5ecd7; }
.news-filters button.active { background: #795337; border-color: #795337; color: #fff2ce; box-shadow: 0 3px 8px #6d4d2920; }
.news-card, .step, .faq { background: #fffef9; border-color: #eadfc8; }
.news-body h3, .read-more, .step h3, .step a, .faq summary { color: #765234; }
.news-body>small { color: #9a876b; }
.read-more { border-color: #f0e6d3; }
.category-badge, .category-badge.purple, .category-badge.rose { color: #795438; background: #fff4d8; border-color: #e2c58b; }
.world-section { background: linear-gradient(120deg, #f4f1df, #fffaf0 58%, #eef3df); border-color: #e5ddc2; }
.world-copy>p:not(.eyebrow) { color: #8c7c63; }
.world-frame { background: #fffdf4; }
.frame-label { background: #5b623990; border-color: #ffffdf80; }
.journey-card { border-color: #e7d8b8; }
.journey-card::before { background: linear-gradient(90deg, transparent, #fff6e2cb 40%, #fff8e9f2 65%); }
.journey-mage::before { background: linear-gradient(90deg, #f3f4e5f2 20%, #f8f7e3c9 56%, transparent); }
.journey-card p { color: #8b7a5f; }
.faq details+details { border-color: #eee5d3; }
.community-section { background: linear-gradient(120deg, #fff4d9, #f5f4e4); }
.community-section h2 span { color: #768052; }
.community-section p:not(.eyebrow) { color: #8e7b5d; }
.community-channels>span { border-color: #ded3b8; color: #7b6546; background: #fffaf0b3; }
.community-channels small { color: #9a8970; }
.site-footer { background: #f5edda; border-color: #e6d9bc; }
.footer-copy strong { color: #725331; }
.footer-copy p, .footer-copy small, .site-footer nav { color: #98815e; }
body[data-page='register'] .sky-backdrop::after, body[data-page='download'] .sky-backdrop::after { background: linear-gradient(180deg, #fffaf020, #fffaf0 90%); }
.register-logo { filter: drop-shadow(0 5px 7px #79533120); }
.register-intro h1, .register-intro h1 span, .card-head h2, .download-card h1 { color: #765132; }
.register-intro .eyebrow, .lead, .back-link { color: #917856; }
.register-card, .download-card { background: #fffef8f5; border-color: #ddc891; }
.security-list>div { background: #fffdf4e0; }
.security-list>div>span { background: #f8edcf; border-color: #ebd8ac; color: #aa8645; }
.security-list strong { color: #83633f; }
.security-list small { color: #9c8a6c; }
.card-head { border-color: #eee3c9; }
.field label { color: #786345; }
.input-wrap { background: #fffaf0; border-color: #e8ddc3; }
.input-wrap:focus-within { border-color: #bea168; box-shadow: 0 0 0 3px #c6a5661f; }
.input-wrap>span, .peek { color: #a38b61; }
.input-wrap input { color: #65513a; }
.input-wrap input::placeholder, .hint, .checkline, .form-note { color: #968262; }
.peek { border-color: #e7dcc2; }
.strength i { background: #eee4cc; }
.submit-btn { background: #80603b; border-color: #7c5833; color: #fff2d3; box-shadow: 0 4px 12px #79522a20; }
.download-card h1 span { color: #8a945d; }
.download-status { background: #f8f2e2; border-color: #e9dcc0; }
.download-status>span { color: #a68c56; background: #eee2c1; }
.download-status strong { color: #8d734a; }
.download-status p, .download-note { color: #9c8968; }
@keyframes tein-logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tein-sky-drift { 0%, 100% { background-position: 50% 0; } 50% { background-position: 51% -7px; } }
@keyframes tein-glints { 0%, 100% { opacity: .35; transform: translateY(3px); } 50% { opacity: .95; transform: translateY(-6px); } }
@media (max-width: 560px) {
  .site-header { background: linear-gradient(180deg, #9a7a4d, #745033); border-color: #d8bd84; }
  .nav { background: #765337; }
  .nav-toggle { background: #fff5ce18; border-color: #ecd1987a; color: #fff1c5; }
  .sky-backdrop::after { background: linear-gradient(180deg, #fffaf008, #fffaf04a 30%, #fffaf0 96%); }
  .motion-toggle { margin-top: 9px; font-size: 8px; padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo, body[data-page='home'] .sky-backdrop, .hero::before { animation: none !important; }
  .motion-toggle { display: none; }
}