/* Toonda landing refresh — atmosphere, character selection and first-visit navigation. */

/* Shared navigation: a warm floating frame keeps the game artwork visible. */
.site-header {
  top: 12px; width: min(1320px, calc(100% - 40px)); margin: 12px auto;
  border: 1px solid #e8ddc7; border-radius: 22px;
  background: rgba(255, 251, 241, .97); color: var(--text);
  box-shadow: 0 8px 28px #59462812; backdrop-filter: blur(16px);
}
.header-row { width: calc(100% - 36px); min-height: 72px; gap: 14px; }
.brand img { width: 140px; }
.nav { gap: 3px; }
.nav-link { color: #675342; font-size: 14px; padding: 10px 13px; border-radius: 12px; }
.nav-link:hover, .nav-link[aria-current], .nav-link[aria-expanded="true"] { color: var(--teal-deep); background: #e7eee5; }
.nav-link[aria-current="page"]::before { content: ''; width: 5px; height: 5px; background: #458475; border-radius: 50%; }
.nav-link.nav-topup { margin-left: 8px; padding: 7px 14px 7px 10px; gap: 6px; background: linear-gradient(135deg, #e2f5ed, #d5edef); border: 1px solid #9cc7c0; color: #235e62; box-shadow: 0 3px 0 #afcec5; }
.nav-link.nav-topup img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 2px #247c7428); }
.nav-link.nav-topup:hover, .nav-link.nav-topup[aria-current] { background: #c8e9e3; border-color: #639e95; color: #18494d; }
.header-cta { gap: 10px; }
.header-gems { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #ddf0e9; border: 1px solid #a4ccc0; box-shadow: 0 2px 0 #bfd7cd; }.header-gems img { width: 30px; height: 30px; object-fit: contain; }.header-gems:hover { background: #c6e8de; }
.header-cta .online-pill { display: none; }
.btn-play { border-radius: 13px; font-size: 14px; padding: 10px 22px; box-shadow: 0 3px 0 #ca9839; white-space: nowrap; }
.sub { border: 1px solid var(--line); padding: 10px; margin-top: 16px; box-shadow: 0 12px 32px #44332220; }
.sub a { min-height: 44px; font-size: 15px; }
.menu-btn { background: #e6eee5; border: 1px solid #d5e1d4; border-radius: 12px; }
.menu-btn span { background: var(--teal-deep); }
.mobile-menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 14px 32px #59462820; max-height: calc(100dvh - 112px); }
.mobile-menu a { color: #514534; border-color: #ede3cf; border-radius: 8px; }
.mobile-menu .sub-item a { color: #53695d; }
.mobile-menu > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }
.mobile-primary a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; gap: 8px; padding: 12px; background: #f2eee0; border: 0; font-size: 15px; }
.mobile-primary a span { color: #928365; font-size: 13px; }
.mobile-topup { grid-column: 1 / -1; }.mobile-topup a { justify-content: flex-start; gap: 10px; color: #245e60; background: linear-gradient(110deg, #e0f2e8, #d6eeed); border: 1px solid #a1c8ba; box-shadow: 0 3px 0 #bdd7ca; }.mobile-topup a > span { margin-left: auto; color: #39796e; }.mobile-topup img { flex: none; width: 32px; height: 32px; object-fit: contain; }
.mobile-group { grid-column: 1 / -1; border-top: 1px solid #e8dfca; padding-top: 5px; }
.mobile-group summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; min-height: 52px; padding: 10px 12px; list-style: none; color: #456b5c; font-family: var(--font-head); font-size: 16px; }
.mobile-group summary::-webkit-details-marker { display: none; }
.mobile-group summary span { font: 24px var(--font-body); transition: transform .2s; }.mobile-group details[open] summary span { transform: rotate(45deg); }
.mobile-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 4px 8px; }
.mobile-group a { padding: 10px; min-height: 44px; font-size: 14px; border: 0; color: #72634f; }.mobile-group a:hover { background: #e7eee5; }
.mobile-group li:first-child { grid-column: 1 / -1; }

/* Clear rhythm between scenes; every block gets enough space to breathe. */
.is-home { background: #fcf8ef; }
.is-home .section { padding-block: 88px; }
.is-home .section-head { margin-bottom: 40px; }
.is-home .section-head h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 500; color: #443625; }
.is-home .section-head .lead { font-size: 16px; color: #796b5a; max-width: 620px; }
.is-home .section-eyebrow { font-size: 13px; letter-spacing: .22em; color: #857245; }
.is-home .section-orn { display: none; }
.is-home .btn { border-radius: 14px; }
.is-home .btn-teal { box-shadow: 0 3px 0 #1f5051; }
.is-home .section-cta .btn { background: transparent; border: 1px solid #c7d5c8; box-shadow: none; color: var(--teal-deep); }
.is-home .section-cta .btn:hover { background: #e7eee5; }
.is-home .eyebrow, .is-home .shot-caption, .is-home .art-credit { font-size: 13px; }

/* Let the original artwork lead: lettering in the sky, body copy below the image. */
.is-home .site-header { margin-bottom: -86px; }
.is-home .hero { display: block; min-height: 0; background: #fcf8ef; }
.is-home .hero-art { position: relative; }
.is-home .hero-bg { position: relative; inset: auto; display: block; aspect-ratio: 16/9; }
.is-home .hero-bg img { width: 100%; height: auto; object-fit: contain; object-position: center; }
.is-home .hero::after { display: none; background: none; }
.is-home .hero-title { position: absolute; top: clamp(120px, 10.5vw, 190px); left: max(32px, calc((100% - 1180px) / 2)); width: 46%; max-width: 580px; }
.is-home .hero h1 { font-size: clamp(32px, 3.2vw, 54px); font-weight: 500; line-height: 1.45; max-width: none; margin: 0; color: #294f4b; -webkit-text-stroke: 3px #fff7e2; paint-order: stroke fill; text-shadow: 0 2px 2px #fff7e2, 0 3px 10px #38667228; }
.is-home .hero h1 span { color: #294f4b; }
.is-home .hero .eyebrow { display: inline-block; color: #235453; letter-spacing: .12em; margin-bottom: 14px; padding: 5px 10px; border: 1px solid #fff9e8; border-radius: 8px; background: #fff9e8e6; }
.is-home .hero-caption { background: #fffaf0; border-bottom: 1px solid #e6dcc6; }
.is-home .hero-inner { padding-block: 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
.is-home .hero-sub { max-width: 560px; color: #5d513f; font-size: 16px; line-height: 1.9; margin: 0; }
.is-home .hero-actions { min-width: 0; }
.is-home .hero .cta-row { margin: 0; max-width: none; }
.is-home .hero .cta-row::before { display: none; }
.is-home .hero .btn-ghost { border-width: 1px; background: #fffdf6; border-color: #cbbfa8; }
.is-home .hero-note { margin: 12px 0 0; font-size: 13px; text-align: right; color: #776953; }
.is-home .hero .online-pill { margin-top: 10px; background: #e4eee3; color: #2e5c4f; }
.is-home .hero .art-credit { top: auto; right: 16px; bottom: 12px; background: #fffaf0df; color: #665943; }
.launch-strip { position: relative; background: #fcf8ef; border: 0; }
.launch-row { padding-block: 22px; border-bottom: 1px solid #e8dfcc; }
.launch-row p { font-size: 15px; font-family: var(--font-body); }
.launch-label { font-size: 13px; }
.countdown { font-size: 13px; background: #e3eee6; color: #285b51; padding: 4px 12px; }

/* A large actual game scene, followed by smaller places to explore. */
.world-window { border-radius: 28px; overflow: hidden; background: #f0e8d7; border: 1px solid #e4d8bf; box-shadow: 0 16px 45px #66553812; }
.world-main-shot { border-radius: 0; box-shadow: none; }
.world-main-shot > img { aspect-ratio: 2.15; object-fit: cover; }
.world-main-shot::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #263d37b8); pointer-events: none; }
.location-note { position: absolute; left: 32px; bottom: 28px; color: #fffaf0; z-index: 1; }
.location-note small { display: block; font-size: 14px; letter-spacing: .04em; }
.location-note strong { display: block; font-family: var(--font-head); font-weight: 500; font-size: 32px; }
.world-main-shot .image-action { z-index: 1; right: 28px; bottom: 28px; border-radius: 12px; font-size: 14px; }
.world-window-bottom { padding: 24px 28px; display: grid; grid-template-columns: .85fr 1.6fr; gap: 28px; align-items: center; }
.world-window-bottom > p { font-size: 15px; color: #796d5b; margin: 0; line-height: 1.9; }
.world-window-bottom > p strong { color: #524535; font-weight: 600; }
.world-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.world-thumbs a { overflow: hidden; border-radius: 12px; background: #fffaf0; text-decoration: none; color: #4d5e4b; }
.world-thumbs img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform .25s; }
.world-thumbs a:hover img { transform: scale(1.04); }
.world-thumbs span { display: flex; justify-content: space-between; padding: 9px 10px; font-size: 13px; }
.world-thumbs b { font-weight: 400; }
.world-footnote { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.world-footnote p { margin: 0; }
.world-footnote .text-link { font-size: 14px; }

/* Class browser: actual six starting branches, with keyboard navigation. */
.is-home #classes { background: #f1f0e3; border-block: 1px solid #e6e5d7; }
.class-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.class-tab { display: flex; min-width: 0; align-items: center; gap: 10px; text-align: left; padding: 12px; background: #faf9f0; border: 1px solid #dedfcd; border-radius: 16px; color: #766c58; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.class-tab img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.class-tab strong { display: block; font-size: 14px; font-weight: 700; }
.class-tab small { display: block; font-size: 13px; }
.class-tab:hover { background: #fffdf5; transform: translateY(-2px); }
.class-tab[aria-selected="true"] { background: #2f6f68; color: #fffdf0; border-color: #2f6f68; box-shadow: 0 5px 0 #245850, 0 8px 18px #2f6f681c; }
.class-tab:focus-visible { outline: 3px solid #a5731a; outline-offset: 4px; }
.class-stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; min-height: 510px; border-radius: 26px; padding: 24px 48px 24px 20px; background: #fffdf5; border: 1px solid #e5dfcc; }
.class-stage + .class-stage { margin-top: 24px; }
.class-select.is-ready .class-stage { margin-top: 0; }
.class-illustration { position: relative; display: grid; place-items: center; min-width: 0; height: 480px; isolation: isolate; }
.class-illustration > img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 12px #73613c24); }
.class-orbit { position: absolute; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #f3f2d9, color-mix(in srgb, var(--class-color) 20%, #efe9d6)); border: 1px solid #d9d8c0; z-index: -1; }
.class-orbit::after { content: ''; position: absolute; inset: 18px; border: 1px dashed #98895345; border-radius: inherit; }
.class-spark { position: absolute; color: #c19c4c; z-index: 1; font-size: 36px; }
.spark-one { left: 8%; top: 17%; }.spark-two { right: 9%; bottom: 19%; font-size: 24px; }
.class-art-caption { position: absolute; bottom: 0; margin: 0; font-size: 13px; color: #897b64; }
.class-intro { min-width: 0; }
.class-intro .eyebrow { letter-spacing: .08em; margin-bottom: 6px; }
.class-intro h3 { font-size: clamp(32px, 3.3vw, 48px); font-weight: 500; color: #3c584b; margin-bottom: 8px; }
.class-tagline { font-size: 21px; color: #625038; margin-bottom: 10px; }
.class-description { color: #796b59; font-size: 15px; max-width: 45ch; }
.class-strengths { list-style: none; padding: 0; display: grid; gap: 5px; font-size: 15px; margin-block: 20px; }
.class-strengths li { display: flex; gap: 10px; align-items: baseline; }.class-strengths span { color: #b9923e; }
.class-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: #7b6e5e; padding-bottom: 16px; border-bottom: 1px solid #ece4d4; }
.class-facts strong { color: #4c6455; margin-left: 5px; font-weight: 600; }
.class-evolution { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-block: 12px 20px; font-size: 13px; color: #827861; }
.class-evolution b { color: #ae995f; font-weight: 400; }.class-evolution a { display: inline-flex; align-items: center; min-height: 44px; }.class-evolution strong { color: #506c59; }
.class-intro > .btn { font-size: 15px; }

/* Feature illustrations have their own space, even on small screens. */
.is-home .features { gap: 20px; }
.is-home .feature { border: 0; box-shadow: none; background: none; border-radius: 0; overflow: visible; }
.is-home .feature .card-media { border-radius: 20px; overflow: hidden; border: 1px solid #eadfc7; }
.is-home .feature-number { display: none; }
.is-home .feature h3 { margin: 20px 0 8px; font-size: 19px; font-weight: 500; color: #4c5e4b; }
.is-home .feature p { margin: 0; font-size: 15px; line-height: 1.85; color: #7a6c59; }

/* Creatures shown together in a landscape, plus a distinct boss encounter. */
.is-home #monsters { background: #edf0e5; }
.bestiary-showcase { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; }
.monster-discovery { position: relative; isolation: isolate; overflow: hidden; background: #f9f6e9; border: 1px solid #dbe0cb; border-radius: 26px; padding: 32px; }
.monster-discovery::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .12; background: linear-gradient(#fff9e4 18%, transparent 80%), url('/assets/site/maps/greenvale.webp') center / cover; }
.encounter-title .eyebrow { color: #758659; margin-bottom: 7px; }
.encounter-title h3 { font-size: 24px; font-weight: 500; color: #4c6048; }
.encounter-title > p:last-child { font-size: 15px; color: #7a765d; }
.creature-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 18px; }
.creature-link { display: flex; flex-direction: column; align-items: center; color: #526242; text-decoration: none; text-align: center; min-width: 0; }
.creature-art { position: relative; isolation: isolate; width: 100%; }
.creature-art::after { content: ''; position: absolute; z-index: -1; bottom: 8%; left: 10%; right: 10%; height: 15%; border-radius: 50%; background: #b9bc9366; }
.creature-art .mon-art { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transform: scale(1.2); transition: transform .2s; }
.creature-link:hover img { transform: translateY(-7px) rotate(-3deg) scale(1.2); }
.creature-link strong { font-size: 16px; margin-top: 12px; }.creature-link > span:last-child { font-size: 13px; color: #77765d; margin-top: 3px; }
.monster-discovery > .text-link { font-size: 14px; }
.boss-encounter { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border-radius: 26px; text-decoration: none; color: #fff6d6; background: radial-gradient(ellipse at 55% 44%, #6d8d75, #365c51 75%); border: 1px solid #658474; overflow: hidden; }
.boss-label { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .12em; color: #f2d79a; }
.boss-art { width: 100%; height: 260px; object-fit: contain; transform: scale(1.35); filter: drop-shadow(0 20px 18px #12271e40); transition: transform .25s; }
.boss-encounter:hover .boss-art { transform: scale(1.4) rotate(2deg); }
.boss-encounter:hover { color: #fff6d6; }
.boss-encounter p { color: #d2dfcb; font-size: 14px; margin-bottom: 4px; }.boss-encounter h3 { display: flex; justify-content: space-between; color: #fff2c8; font-size: 30px; font-weight: 500; margin-bottom: 8px; }
.boss-encounter > div > span { font-size: 13px; color: #d9dfc8; }

/* Registration: invitation artwork and a readable reward trail. */
.is-home .prereg { padding: 72px 0; background: #f0e8d4; border-block: 1px solid #e3d7bc; }
.is-home .prereg-card { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; padding: 0; border: 1px solid #dacda8; background: #fffaf0; border-radius: 28px; box-shadow: 0 18px 48px #5b482219; overflow: hidden; }
.prereg-invitation { position: relative; display: flex; align-items: flex-end; min-width: 0; min-height: 610px; isolation: isolate; }
.prereg-scene { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; z-index: -2; }
.prereg-invitation::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #263f3dfa 2%, #263f3de8 35%, #263f3d40 75%, transparent); z-index: -1; }
.prereg-invitation .prereg-body { padding: 44px; color: #e8edda; }
.prereg-invitation .eyebrow { color: #f0ce88; letter-spacing: .13em; }
.prereg-invitation h2 { color: #fff6d7; font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1.5; margin-block: 10px 16px; }
.prereg-invitation .prereg-body > p:not(.eyebrow) { font-size: 16px; line-height: 1.9; }
.prereg-invitation .prereg-body .prereg-signin { margin: 22px 0 0; font-size: 13px; color: #d4dfcf; }
.prereg-art-note { display: block; font-size: 13px; color: #b7c6b6; margin-top: 22px; }
.prereg-gifts { padding: 42px; min-width: 0; }
.prereg-gifts > .eyebrow { color: #9a804b; margin-bottom: 8px; }
.prereg-gifts > h3 { font-size: 25px; font-weight: 500; color: #5c4b32; }
.welcome-gift { display: flex; gap: 18px; align-items: center; margin-block: 28px; padding-bottom: 24px; border-bottom: 1px solid #e5d8ba; }
.gift-symbol { flex: none; width: 80px; height: 80px; display: grid; place-items: center; background: #f7edcf; border: 1px solid #ebd8a4; border-radius: 20px; transform: rotate(-5deg); }
.gift-symbol svg { width: 60px; height: 60px; }
.reward-label { display: block; font-size: 13px; color: #587c68; margin-bottom: 4px; }
.welcome-gift strong { display: block; font-size: 18px; color: #615034; }.welcome-gift p { font-size: 13px; color: #887b65; margin: 7px 0 0; }
.prereg-gifts h4 { font-size: 16px; font-weight: 500; color: #67583f; }
.prereg-gifts .prereg-rewards { gap: 0; margin-block: 14px 22px; }
.prereg-gifts .prereg-rewards li { background: transparent; border: 0; border-radius: 0; padding: 13px 0; gap: 14px; position: relative; }
.milestone-step { width: 36px; height: 36px; flex: none; border: 1px solid #d9c99f; background: #fcf5df; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #967d44; }
.prereg-rewards li:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: calc(50% + 18px); bottom: -13px; border-left: 1px solid #ded1ae; }
.prereg-gifts .prereg-rewards .tag { background: none; padding: 0; color: #8b7448; font-size: 13px; }
.prereg-gifts .prereg-rewards li.done .tag { background: none; color: #397454; }
.prereg-rewards li p { margin: 3px 0 0; color: #574d3c; font-size: 15px; }
.milestone-check { display: none; color: #39785c; margin-left: auto; }.prereg-rewards li.done .milestone-check { display: block; }.prereg-rewards li.done .milestone-step { background: #dfefdc; color: #356446; border-color: #97b393; }
.prereg-gifts .prereg-terms { font-size: 13px; color: #81735e; margin-bottom: 5px; }
.prereg-gifts .text-link { font-size: 14px; }.prereg-meter { margin-bottom: 16px; }.prereg-meter p { font-size: 13px; }
.is-home #news .news-card { box-shadow: none; border-color: #e5deca; border-radius: 22px; }
.is-home #news .card-body h3 { font-weight: 500; }
.is-home #items { background: #f4f0e6; }
.is-home #items .card { box-shadow: none; }
.is-home #world .region-card { background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid #e0d5bc; border-radius: 0; }
.is-home #social .split-media { border-radius: 26px; overflow: hidden; }
.is-home .finale { margin-top: 0; min-height: 600px; }
.is-home .finale-inner { width: min(100% - 40px, 1000px); }

@media (max-width: 1180px) {
  .header-gems { display: inline-flex; }
  .class-tabs { gap: 8px; }.class-tab { flex-direction: column; text-align: center; padding: 12px 6px; gap: 6px; }
  .class-stage { gap: 20px; padding-right: 30px; }.class-illustration { height: 460px; }
}
@media (max-width: 900px) {
  .is-home .hero-title { top: 110px; left: 28px; width: 53%; }.is-home .hero h1 { font-size: 30px; }
  .is-home .hero-inner { gap: 20px; }.is-home .hero-sub { font-size: 15px; }.is-home .hero .btn-lg { padding-inline: 16px; font-size: 14px; }
  .world-window-bottom { grid-template-columns: 1fr; gap: 18px; }.world-window-bottom > p br { display: none; }
  .class-stage { grid-template-columns: .9fr 1fr; padding: 24px; }.class-illustration { height: 420px; }.class-intro h3 { font-size: 32px; }.class-tagline { font-size: 18px; }
  .bestiary-showcase { grid-template-columns: 1.5fr 1fr; gap: 16px; }.monster-discovery, .boss-encounter { padding: 22px; }.boss-art { height: 240px; }
  .prereg-invitation .prereg-body, .prereg-gifts { padding: 28px; }.welcome-gift { gap: 12px; }.gift-symbol { width: 60px; height: 60px; }.gift-symbol svg { width: 48px; height: 48px; }
}
@media (max-width: 700px) {
  .site-header { top: 8px; margin: 8px auto; width: calc(100% - 24px); border-radius: 17px; }
  .header-row { width: calc(100% - 20px); min-height: 64px; gap: 8px; }.brand img { width: 112px; }.header-cta { gap: 7px; }.btn-play { padding: 9px 14px; font-size: 14px; }.menu-btn { width: 44px; height: 44px; }
  .is-home .site-header { margin-bottom: -74px; }
  .is-home .hero-bg { width: 100%; aspect-ratio: 4/5; max-height: none; }
  .is-home .hero-title { top: max(94px, 18vw); left: 20px; right: 20px; width: auto; max-width: none; text-align: center; }
  .is-home .hero h1 { font-size: clamp(28px, 6.4vw, 42px); line-height: 1.4; margin: 0; -webkit-text-stroke-width: 2px; }
  .is-home .hero .eyebrow { font-size: 13px; letter-spacing: .04em; margin-bottom: 10px; padding: 4px 8px; }
  .is-home .hero-inner { width: calc(100% - 40px); padding-block: 24px 28px; grid-template-columns: 1fr; gap: 20px; background: none; }
  .is-home .hero-sub { font-size: 15px; margin: 0; }
  .is-home .hero .cta-row { gap: 10px; }.is-home .hero .btn { flex-basis: 100%; font-size: 15px; padding: 13px; }
  .is-home .hero .art-credit { right: 12px; bottom: 10px; font-size: 13px; }
  .is-home .hero-note { font-size: 13px; text-align: center; }
  .launch-row { padding-block: 18px; }.launch-row p { font-size: 14px; }.launch-row .text-link { font-size: 14px; }.countdown { margin: 7px 6px 0 0; }
  .is-home .section { padding-block: 54px; }.is-home .section-head { margin-bottom: 28px; }.is-home .section-head h2 { font-size: 28px; }.is-home .section-head .lead { font-size: 15px; }
  .world-window { border-radius: 20px; }.world-main-shot > img { aspect-ratio: 1.3; }.location-note { left: 18px; bottom: 18px; }.location-note strong { font-size: 26px; }.location-note small { font-size: 13px; }
  .world-main-shot .image-action { right: 14px; bottom: 18px; font-size: 13px; padding: 8px 10px; }
  .world-window-bottom { padding: 20px 16px; }.world-window-bottom > p { font-size: 14px; }.world-thumbs { gap: 8px; }.world-thumbs span { font-size: 13px; padding: 8px; }.world-thumbs b { display: none; }
  .world-thumbs img { aspect-ratio: 1.2; }.world-footnote { flex-wrap: wrap; gap: 0; }.world-footnote p { flex-basis: 100%; margin-top: 10px; }
  .class-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }.class-tab { padding: 10px 4px; }.class-tab strong { font-size: 13px; }.class-tab small { font-size: 13px; }.class-tab img { width: 36px; height: 36px; }
  .class-tab small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .class-stage { grid-template-columns: 1fr; gap: 8px; padding: 16px 22px 28px; border-radius: 22px; }.class-illustration { height: 320px; max-width: 390px; width: 100%; margin-inline: auto; }.class-orbit { width: 78%; max-height: 290px; }
  .class-intro { padding-top: 14px; }.class-intro h3 { font-size: 34px; }.class-tagline { font-size: 19px; }.class-description { font-size: 15px; }.class-strengths { font-size: 15px; }.class-intro > .btn { width: 100%; }
  .is-home .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }.is-home .feature { display: flex; }.is-home .feature .card-media { aspect-ratio: 4/3; min-height: 0; height: auto; width: 100%; border-radius: 15px; }.is-home .feature h3 { font-size: 17px; margin: 14px 0 7px; }.is-home .feature p { font-size: 14px; }
  .bestiary-showcase { grid-template-columns: 1fr; }.monster-discovery { padding: 26px 18px; }.encounter-title h3 { font-size: 23px; }.encounter-title > p:last-child { font-size: 14px; }.creature-lineup { gap: 8px; margin-block: 20px; }.creature-link strong { font-size: 14px; }
  .boss-encounter { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: center; padding: 24px; }.boss-label { grid-column: 1 / -1; }.boss-art { height: 200px; }.boss-encounter h3 { font-size: 25px; }.boss-encounter h3 span { display: none; }
  .is-home .prereg { padding: 48px 0; }.is-home .prereg-card { grid-template-columns: 1fr; border-radius: 22px; }.prereg-invitation { min-height: 510px; }.prereg-scene { object-position: center; }.prereg-invitation .prereg-body { padding: 28px; padding-top: 150px; }.prereg-invitation h2 { font-size: 32px; }.prereg-invitation .btn { font-size: 16px; padding: 14px 20px; }.prereg-gifts { padding: 30px 24px; }.prereg-gifts > h3 { font-size: 24px; }.welcome-gift strong { font-size: 17px; }
  .is-home .finale { min-height: 520px; }.is-home .finale h2 { font-size: 26px; }.is-home .finale .cta-row { flex-direction: column; }.is-home .finale .btn { width: 100%; max-width: 340px; font-size: 16px; }
}
@media (max-width: 360px) {
  .is-home .hero-title { top: 90px; left: 12px; right: 12px; }.is-home .hero h1 { font-size: 26px; }
  .brand img { width: 84px; }.btn-play { padding-inline: 9px; font-size: 13px; }.header-row { gap: 5px; }.header-cta { gap: 5px; }
  .class-stage { padding-inline: 16px; }.class-illustration { height: 280px; }.class-tabs { gap: 7px; }
  .is-home .features { grid-template-columns: 1fr; }.is-home .feature .card-media { aspect-ratio: 1.6; }.is-home .feature h3 { font-size: 19px; }
  .boss-encounter { padding: 20px; }.boss-art { height: 160px; }.boss-encounter h3 { font-size: 21px; }
  .prereg-invitation .prereg-body { padding-inline: 22px; }.prereg-invitation h2 { font-size: 28px; }.prereg-gifts { padding-inline: 20px; }.welcome-gift { gap: 10px; }.gift-symbol { width: 50px; height: 56px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .site-header { top: 6px; }.header-row { min-height: 60px; }.is-home .site-header { margin-bottom: -74px; }
  .is-home .hero-title { top: 96px; }.mobile-menu { max-height: calc(100dvh - 90px); }
}

/* ภาพอาชีพล้นกรอบ (716px ในกล่อง 480 — แถวกริดยืดตามภาพ ทับปุ่มข้างล่าง) → ล็อกแถวกริดกับภาพให้เท่ากล่อง */
.class-illustration { grid-template-rows: 100%; overflow: hidden; }
.class-illustration > img { max-height: 100%; min-height: 0; object-position: center 60%; }

/* ══ Hero v3 (28 ก.ย. · ตาม brief ผู้ใช้) — ภาพคือพระเอก: ไม่มีการ์ด · หมอกอุ่นจาง ๆ หลังตัวอักษร · หัวข้อใหญ่ · ปุ่มเดียวเด่น ══ */
.is-home .hero.hero-v3 { position: relative; display: block; min-height: 0; overflow: hidden; background: #fbf4e4; color: #4a3220; }
.is-home .hero.hero-v3 .hero-bg { position: relative; display: block; inset: auto; }
.is-home .hero.hero-v3 .hero-bg img { display: block; width: 100%; height: clamp(640px, 56.25vw, 1080px); object-fit: cover; object-position: 68% 40%; }   /* ไม่ครอป 16:9 จนถึง 1920 — องค์ประกอบเท่าเดิมทุกจอ */
.is-home .hero.hero-v3::after { display: none; }
/* หมอก: วงรีครีมเกือบมองไม่เห็นรอบตัวอักษร + ไล่ขอบล่างเข้ากับพื้นหน้า */
.is-home .hero.hero-v3 .hero-haze { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 58% at 23% 44%, rgba(255, 248, 232, .88) 0%, rgba(255, 248, 232, .62) 42%, rgba(255, 248, 232, 0) 78%),
    linear-gradient(180deg, rgba(251, 244, 228, 0) 82%, #fbf4e4 100%); }
.is-home .hero.hero-v3 .hero-copy { position: absolute; z-index: 1; top: clamp(112px, 8.6vw, 170px);
  left: max(40px, calc((100% - min(1320px, 100% - 40px)) / 2 + 22px)); width: min(760px, 46%); }   /* ตรงขอบซ้ายโลโก้ใน nav */
.is-home .hero.hero-v3 h1 .l1, .is-home .hero.hero-v3 h1 .l2 { white-space: nowrap; }
.is-home .hero.hero-v3 .hero-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .24em; color: #a47a2c; }
.is-home .hero.hero-v3 .hero-eyebrow .leaf { width: 22px; height: 16px; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2 14C6 4 14 1 20 2 18 9 11 14 2 14z' fill='%2386c55e'/%3E%3Cpath d='M3 13C8 9 13 6 18 4' stroke='%233f7f3a' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); }
.is-home .hero.hero-v3 h1 { margin: 0; font-family: var(--font-head); font-weight: 600; line-height: 1.22; letter-spacing: -.005em;
  font-size: clamp(50px, 4.6vw, 86px); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(255, 250, 236, .9), 0 6px 26px rgba(255, 244, 220, .85); }
.is-home .hero.hero-v3 h1 span { display: block; }
.is-home .hero.hero-v3 h1 .l1 { color: #4a2e18; }
.is-home .hero.hero-v3 h1 .l2 { color: #2f6b34; }
.is-home .hero.hero-v3 .hero-sub { margin: 14px 0 0; max-width: 520px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; color: #5b4632; text-shadow: 0 1px 10px rgba(255, 246, 226, .9); }
.is-home .hero.hero-v3 .hero-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 22px 0 0; padding: 7px 16px 7px 12px;
  border-radius: 999px; background: rgba(255, 250, 238, .72); border: 1px solid rgba(214, 186, 128, .45); font-size: 13.5px; color: #5b4632; backdrop-filter: blur(4px); }
.is-home .hero.hero-v3 .hero-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #4a9a55; box-shadow: 0 0 0 4px rgba(74, 154, 85, .18); }
.is-home .hero.hero-v3 .hero-status strong { letter-spacing: .12em; font-size: 12px; color: #2f6b34; }
.is-home .hero.hero-v3 .hero-status .countdown { margin: 0; padding: 0 0 0 10px; border-left: 1px solid rgba(160, 130, 80, .35); border-radius: 0; background: none; color: #8a6420; font-weight: 700; font-size: 13px; }
.is-home .hero.hero-v3 .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 18px; }
.is-home .hero.hero-v3 .btn-hero { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 250px; padding: 18px 34px;
  border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 19px; color: #3d2608; text-decoration: none;
  background: linear-gradient(180deg, #ffd978 0%, #f2b845 55%, #e2a032 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 0 #b97f22, 0 14px 30px rgba(184, 128, 36, .32); transition: transform .15s, box-shadow .15s; }
.is-home .hero.hero-v3 .btn-hero span { font-size: 18px; transition: transform .15s; }
.is-home .hero.hero-v3 .btn-hero:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 0 #b97f22, 0 18px 36px rgba(184, 128, 36, .38); }
.is-home .hero.hero-v3 .btn-hero:hover span { transform: translateX(3px); }
.is-home .hero.hero-v3 .btn-hero:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #b97f22, 0 8px 18px rgba(184, 128, 36, .3); }
.is-home .hero.hero-v3 .hero-link { font-family: var(--font-head); font-weight: 500; font-size: 16px; color: #4a2e18; text-decoration: none; border-bottom: 1.5px solid rgba(74, 46, 24, .35); padding-bottom: 2px; }
.is-home .hero.hero-v3 .hero-link span { font-size: 11px; margin-left: 4px; color: #2f6b34; }
.is-home .hero.hero-v3 .hero-link:hover { border-color: #4a2e18; }
.is-home .hero.hero-v3 .hero-fine { margin: 14px 0 0; font-size: 13px; color: #7a6450; }
.is-home .hero.hero-v3 .online-pill { margin-top: 10px; background: rgba(255, 250, 238, .7); color: #2e5c4f; }
.is-home .hero.hero-v3 .art-credit { top: auto; bottom: 18px; right: 18px; background: rgba(255, 250, 238, .75); color: #6b5a44; font-size: 11px; }

@media (min-width: 901px) { .is-home .hero.hero-v3 .hero-fine { display: none; } }   /* ทับแคคตัส — ข้อความเดียวกันอยู่ในส่วนลงทะเบียน */
/* แถบนำทาง: เงียบกว่า hero — ครีมโปร่ง · ตัวอักษรเล็กสะอาด · หน้าปัจจุบัน = ขีดเขียวสั้นใต้คำ (ไม่ใช่กล่องทึบ) */
@media (min-width: 901px) {
  .site-header { top: 24px; margin-top: 24px; background: rgba(255, 250, 240, .9); border-color: rgba(226, 210, 176, .6); box-shadow: 0 6px 24px rgba(89, 70, 40, .08); }
  .is-home .site-header { position: absolute; left: 0; right: 0; margin-top: 0; }
  .header-row { min-height: 66px; }
  .nav-link { position: relative; background: none !important; font-size: 14.5px; color: #5d4a38; padding: 10px 12px; }
  .nav-link[aria-current="page"]::before { display: none; }
  .nav-link:hover { color: #2f6b34; }
  .nav-link[aria-current="page"], .nav-link[aria-current="true"] { color: #2f6b34; }
  .nav-link[aria-current="page"]::after, .nav-link[aria-current="true"]::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: #4a9a55; }
  .nav-link.nav-topup { background: none !important; border: 0; box-shadow: none; padding: 8px 10px; color: #2a6468; }
  .nav-link.nav-topup img { width: 22px; height: 22px; }
}

/* แท็บเล็ต/มือถือ: ภาพแนวตั้ง แล้วตัวอักษรต่อข้างล่างบนพื้นครีมที่ไล่ต่อจากภาพ — ไม่มีการ์ด ไม่บังตัวละคร */
@media (max-width: 900px) {
  .is-home .hero.hero-v3 .hero-bg img { height: auto; aspect-ratio: 16/10; object-position: 70% 50%; }
  .is-home .hero.hero-v3 .hero-haze { background: linear-gradient(180deg, rgba(251, 244, 228, 0) 70%, #fbf4e4 100%); }
  .is-home .hero.hero-v3 .hero-copy { position: relative; top: auto; left: auto; transform: none; width: auto; margin: -36px 20px 0; padding-bottom: 36px; text-align: center; }
  .is-home .hero.hero-v3 .hero-eyebrow, .is-home .hero.hero-v3 .hero-cta { justify-content: center; }
  .is-home .hero.hero-v3 .hero-sub { margin-inline: auto; }
  .is-home .hero.hero-v3 h1 { font-size: clamp(38px, 7vw, 56px); }
}
@media (max-width: 760px) {
  .is-home .hero.hero-v3 .hero-bg img { aspect-ratio: 4/5; max-height: 78vh; object-position: center 62%; }
  .is-home .hero.hero-v3 .hero-copy { margin-top: 14px; }
  .is-home .hero.hero-v3 .hero-status { justify-content: center; font-size: 13px; padding: 6px 14px; }
  .is-home .hero.hero-v3 .hero-status .countdown { flex-basis: 100%; border-left: 0; padding: 0; text-align: center; }
  .is-home .hero.hero-v3 .hero-haze { background: linear-gradient(180deg, rgba(251, 244, 228, 0) 84%, #fbf4e4 100%); }
  .is-home .hero.hero-v3 h1 { font-size: clamp(34px, 9.4vw, 44px); }
  .is-home .hero.hero-v3 .hero-sub { font-size: 15.5px; }
  .is-home .hero.hero-v3 .hero-sub br { display: none; }
  .is-home .hero.hero-v3 .hero-eyebrow { font-size: 11.5px; letter-spacing: .16em; }
  .is-home .hero.hero-v3 .btn-hero { width: 100%; min-width: 0; }
  .is-home .hero.hero-v3 .hero-cta { gap: 14px; }
  .is-home .hero.hero-v3 .art-credit { top: 86px; bottom: auto; right: 12px; }
}

/* ── สลับภาษา TH | EN (lib/html.mjs langSwitch) ── */
.lang-switch { display: inline-flex; flex: none; border: 1px solid #a4ccc0; border-radius: 999px; overflow: hidden; background: #f3f8f4; font: 600 12.5px/1 system-ui, sans-serif; letter-spacing: .04em; }
.lang-switch > * { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; color: #2e5c4f; text-decoration: none; }
.lang-switch [aria-current] { background: var(--teal); color: #fff; }
.lang-switch a:hover { background: #ddf0e9; color: var(--teal-deep); }
.mobile-lang { display: flex; justify-content: center; padding: 14px 0 6px; list-style: none; }
.mobile-lang .lang-switch > * { min-height: 40px; padding: 0 18px; font-size: 14px; }
/* จอแคบ: หัวเว็บเต็มแล้ว (โลโก้ · เพชร · เล่นเลย · เมนู) — ปุ่มภาษาย้ายไปอยู่ท้ายเมนูมือถือ */
@media (max-width: 700px) { .header-cta .lang-switch { display: none; } }