/* Toonda official website — design tokens + layout · แยกจาก HUD ในเกม (client/style.css) โดยสิ้นเชิง */
:root {
  --teal: #2f6f73; --teal-deep: #245a5d; --teal-soft: #dfeeee;
  --gold: #e8b64a; --gold-deep: #c8952c; --gold-soft: #fbefd2;
  --cream: #f3e6c8; --cream-2: #faf3e2; --paper: #fffaf0; --earth: #c9a26a; --earth-soft: #eadcc0;
  --text: #342c26; --muted: #706254; --line: #e6d9bd;
  --grass: #86c55e; --danger: #b33b3b;
  --font-head: 'Mitr', 'Anuphan', system-ui, sans-serif; --font-body: 'Anuphan', 'Mitr', system-ui, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 20px; --radius-sm: 12px; --shadow: 0 6px 20px rgba(52, 44, 38, .08); --shadow-lg: 0 14px 40px rgba(52, 44, 38, .14);
  --wrap: 1180px; --header-h: 76px;
}
@font-face { font-family: 'Anuphan'; font-weight: 100 700; font-display: swap; src: url('/assets/fonts/anuphan-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Anuphan'; font-weight: 100 700; font-display: swap; src: url('/assets/fonts/anuphan-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Mitr'; font-weight: 500; font-display: swap; src: url('/assets/fonts/mitr-500-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Mitr'; font-weight: 500; font-display: swap; src: url('/assets/fonts/mitr-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Mitr'; font-weight: 600; font-display: swap; src: url('/assets/fonts/mitr-600-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Mitr'; font-weight: 600; font-display: swap; src: url('/assets/fonts/mitr-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--header-h) + 24px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--cream-2); }
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.4; margin: 0 0 var(--s3); color: var(--text); letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } h3 { font-size: 1.2rem; } h4 { font-size: 1.05rem; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.3em; }
.wrap { min-width: 0; width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.center { text-align: center; } .muted { color: var(--muted); } .small { font-size: .92rem; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lead { font-size: 1.15rem; color: #4d433b; max-width: 62ch; } .lead-sm { font-size: 1.05rem; max-width: 70ch; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--text); padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.meta { color: var(--muted); font-size: .9rem; margin-bottom: var(--s1); }
.el { vertical-align: -3px; display: inline; }

/* ปุ่ม */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 1rem; padding: 10px 22px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; min-height: 46px; white-space: normal; text-align: center; line-height: 1.45; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, #f5ca6a, var(--gold)); color: #3a2a10; box-shadow: 0 3px 0 var(--gold-deep), var(--shadow); }
.btn-gold:hover { color: #2a1d08; box-shadow: 0 4px 0 var(--gold-deep), var(--shadow-lg); }
.btn-teal { background: var(--teal); color: #fff; } .btn-teal:hover { background: var(--teal-deep); color: #fff; }
.btn-ghost { background: rgba(255, 250, 240, .75); color: var(--teal-deep); border-color: var(--teal); } .btn-ghost:hover { background: #fff; }
.btn-lg { font-size: 1.15rem; padding: 14px 34px; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.center .cta-row, .cta-band .cta-row, .cta-row.center { justify-content: center; }

/* header */
.site-header { border-bottom: 1px solid rgba(255,255,255,.12); position: sticky; top: 0; z-index: 50; background: #24595b; color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); }
.header-row { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }
.brand img { width: 150px; height: auto; } .brand { flex-shrink: 0; display: block; line-height: 0; }
.main-nav { flex: 1; display: none; } .nav { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; color: #eaf3f3; font-family: var(--font-head); font-weight: 500; font-size: .98rem; text-decoration: none; border-radius: 8px; background: none; border: 0; cursor: pointer; }
.nav-link:hover, .nav-link[aria-current], .nav-link[aria-expanded="true"] { background: rgba(255, 255, 255, .13); color: #fff; }
.nav-link .caret { font-size: .75em; opacity: .8; }
.sub { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--paper); color: var(--text); list-style: none; margin: 6px 0 0; padding: 8px; border-radius: 12px; box-shadow: var(--shadow-lg); display: none; }
.has-sub.open .sub { display: block; }
.sub a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--text); text-decoration: none; border-radius: 8px; font-family: var(--font-head); font-weight: 500; }
.sub a:hover { background: var(--teal-soft); color: var(--teal-deep); }
.ico { width: 1.4em; text-align: center; }
.header-cta { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.btn-play { padding: 9px 20px; }
.online-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; white-space: nowrap; }
.online-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grass); box-shadow: 0 0 0 3px rgba(134, 197, 94, .3); }
.menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 9px; background: rgba(255, 255, 255, .12); border: 0; border-radius: 10px; cursor: pointer; }
.menu-btn span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { background: var(--teal-deep); border-top: 1px solid rgba(255, 255, 255, .12); max-height: calc(100dvh - var(--header-h)); overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); overflow: auto; }
.mobile-menu ul { list-style: none; margin: 0; padding: 8px 16px 16px; }
.mobile-menu a { display: block; padding: 11px 8px; color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mobile-menu .sub-item a { padding-left: 28px; font-weight: 400; color: #d9ecec; font-size: .95rem; }
@media (min-width: 1181px) { .main-nav { display: block; } .menu-btn { display: none; } }
@media (max-width: 1360px) { .header-cta .online-pill { display: none; } }
@media (max-width: 600px) { .brand img { width: 118px; } .btn-play { padding: 8px 14px; font-size: .95rem; } }

/* sticky play บนมือถือ — โผล่หลังเลื่อนผ่าน hero */
.mobile-play { display: none; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 40; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; padding: 13px; border-radius: 999px; background: linear-gradient(180deg, #f5ca6a, var(--gold)); color: #3a2a10; text-decoration: none; box-shadow: 0 3px 0 var(--gold-deep), var(--shadow-lg); transform: translateY(120%); transition: transform .25s; }
@media (max-width: 600px) { .mobile-play { display: block; } body.show-sticky .mobile-play { transform: none; } body.show-sticky { padding-bottom: 70px; } }

/* section / cards */
.section { padding: var(--s8) 0; } .section + .section { padding-top: 0; }
.section-head { margin-bottom: var(--s5); } .section-head .lead { margin-bottom: 0; }
.section-cta { margin: var(--s5) 0 0; text-align: center; }
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4, .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .grid-2, .features, .systems, .steps, .hub { grid-template-columns: 1fr; } }
.card { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.card.pad { padding: var(--s5); } .card.pad h2, .card.pad h3 { margin-top: 0; } .card p:last-child { margin-bottom: 0; }
.card-media { display: block; background: var(--earth-soft); line-height: 0; }
.card-media img { width: 100%; object-fit: cover; }
.card-body { overflow-wrap: anywhere; padding: var(--s4); } .card-body h3 { font-size: 1.1rem; margin-bottom: 6px; } .card-body h3 a { color: var(--text); text-decoration: none; } .card-body h3 a:hover { color: var(--teal); }
.card-body p:last-child { margin-bottom: 0; }
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; background: radial-gradient(ellipse at top, #f9efd6, #e7d8b6); color: #6f5f4b; text-align: center; padding: 12px; line-height: 1.3; font-size: .95rem; }
.ph small { font-size: .72rem; opacity: .7; font-family: var(--font-body); word-break: break-all; }
.chips { list-style: none; padding: 0; margin: 0 0 var(--s4); display: flex; flex-wrap: wrap; gap: 8px; } .chips.center { justify-content: center; }
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-family: var(--font-head); font-weight: 500; font-size: .92rem; text-decoration: none; }
a.chip:hover { background: var(--teal); color: #fff; }
.chip-soft { background: rgba(255, 250, 240, .8); color: var(--text); }
.checks, .crosses, .plain-list { list-style: none; padding: 0; } .checks li, .crosses li, .plain-list li { padding: 6px 0 6px 28px; position: relative; }
.checks li::before { content: '✓'; position: absolute; left: 0; color: var(--grass); font-weight: 700; } .crosses li::before { content: '!'; position: absolute; left: 4px; color: var(--danger); font-weight: 700; } .plain-list li::before { content: '•'; position: absolute; left: 8px; color: var(--gold-deep); }
.group-title { margin: var(--s6) 0 var(--s4); padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.group-title:first-of-type { margin-top: var(--s4); }
.cta-band { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; padding: var(--s8) 0; text-align: center; margin-top: var(--s5); }
.cta-band h2 { color: #fff; } .cta-band p { color: #d9ecec; } .cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.notice { background: var(--gold-soft); border-left: 4px solid var(--gold); padding: 10px 14px; border-radius: 6px; }

/* ภาพโปรโมตมีพื้นที่ข้อความของตัวเอง บนมือถือแยกภาพออกจากเนื้อหา */
.hero { position: relative; color: #fff; min-height: 650px; display: flex; align-items: center; overflow: hidden; background: #183e40; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,44,46,.96), rgba(16,44,46,.85) 24%, rgba(16,44,46,.32) 52%, transparent 74%); }
.hero-inner { position: relative; z-index: 1; padding-block: 72px; }
.eyebrow { color: var(--teal); font-weight: 700; font-size: .78rem; letter-spacing: .12em; margin-bottom: 16px; }
.hero .eyebrow { color: #f4d386; }
.hero h1 { color: #fffaf0; font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1.38; max-width: 560px; margin-bottom: 20px; }
.hero h1 span { color: #f5c768; }
.hero-sub { color: #e3ece7; max-width: 440px; font-size: 1.08rem; margin-bottom: 26px; }
.hero .cta-row { max-width: 560px; gap: 12px; }
.hero .btn-lg { font-size: 1rem; padding: 14px 24px; }
.hero .btn-ghost { background: rgba(17,48,50,.45); border-color: #9bb8b3; color: #fff; }
.hero .btn-ghost:hover { background: #24595b; }
.hero-note { color: #d0ded6; font-size: .85rem; max-width: 460px; }
.hero .online-pill { background: rgba(0,0,0,.3); }
.art-credit { position: absolute; z-index: 1; bottom: 14px; right: 20px; border-radius: 6px; padding: 3px 8px; background: rgba(25,43,38,.68); color: #fff; font-size: .7rem; }
.launch-strip { background: #f2e7cc; border-bottom: 1px solid #decbaa; }
.launch-row { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 22px; }
.launch-label { font-size: .8rem; color: var(--teal); font-weight: 700; }
.launch-row p { margin: 3px 0 0; font-family: var(--font-head); font-weight: 500; }
.launch-row time { display: inline-block; }
.text-link { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.gameplay-preview { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.gameplay-shot { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.gameplay-shot img { width: 100%; }
.image-action { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 14px; background: #fffaf0; color: var(--teal-deep); border-radius: 100px; padding: 9px 16px; font-size: .85rem; font-weight: 700; box-shadow: var(--shadow); }
.gameplay-copy h3 { font-size: 1.9rem; }
.shot-caption { color: var(--muted); font-size: .8rem; margin-top: 16px; }
@media (max-width: 900px) { .gameplay-preview { grid-template-columns: 1fr; gap: 24px; } .hero { min-height: 620px; } .hero::after { background: linear-gradient(90deg, rgba(16,44,46,.96), rgba(16,44,46,.7) 44%, rgba(16,44,46,.05)); } }
@media (max-width: 700px) {
  .hero { display: block; min-height: 0; }
  .hero-bg { position: relative; display: block; aspect-ratio: 16/9; }
  .hero-bg img { object-position: center; }
  .hero::after { display: none; }
  .hero-inner { padding-block: 30px 36px; }
  .hero h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .hero-sub { font-size: 1rem; }
  .hero .eyebrow { font-size: .7rem; }
  .hero .cta-row { align-items: stretch; }
  .hero .btn { flex: 1 1 200px; }
  .hero-note { margin-bottom: 0; }
  .hero .online-pill { margin-top: 16px; }
  .art-credit { top: 8px; right: 8px; bottom: auto; }
  .launch-row { display: block; padding-block: 18px; }
  .launch-row .text-link { margin-top: 4px; }
}

.video-frame { max-width: 900px; margin: 0 auto var(--s5); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.yt { position: relative; aspect-ratio: 16/9; } .yt img { width: 100%; height: 100%; object-fit: cover; } .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--gold); color: #3a2a10; font-size: 2rem; cursor: pointer; box-shadow: var(--shadow-lg); }
.feature .card-media { position: relative; flex: none; aspect-ratio: 4/3; } .feature h3 { margin: var(--s4) var(--s4) 4px; } .feature p { margin: 0 var(--s4) var(--s4); font-size: .97rem; }
.class-card { --accent: var(--teal); } .class-icon { display: flex; align-items: center; justify-content: center; padding: var(--s5); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--cream-2)), var(--earth-soft)); }
.class-icon img.badge { width: 96px; height: 96px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
/* แสดงตัวละครเต็มตัวในกรอบ 4:3 · ไอคอนอาชีพย่อไว้ที่มุม */
.class-icon.has-portrait { position: relative; aspect-ratio: 4/3; padding: 0; overflow: hidden; }
.class-icon.has-portrait img.portrait { width: 100%; height: 100%; object-fit: contain; object-position: center 60%; }
.class-icon.has-portrait img.badge { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; }
.world-preview { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.world-art { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.world-facts { display: grid; gap: var(--s3); } .region-card { padding: var(--s4); } .region-card h3 { margin-bottom: 2px; } .region-card p { font-size: .95rem; }
@media (max-width: 1024px) { .world-preview { grid-template-columns: 1fr; } }
.world-full { border-radius: var(--radius); box-shadow: var(--shadow-lg); margin: 0 auto var(--s4); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s6); align-items: center; }
.split-media { border-radius: var(--radius); overflow: hidden; }
@media (max-width: 1024px) { .split { grid-template-columns: 1fr; gap: var(--s5); } }
.news-card .card-media { aspect-ratio: 16/9; }

/* มอนสเตอร์ / ไอเทม */
.mon-card .card-media { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 60%, #f6ecd2, var(--earth-soft)); }
.mon-card .mon-art { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.mon-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 55%, #fff) 0, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 100%); color: rgba(255, 255, 255, .85); font-family: var(--font-head); font-size: 3rem; font-weight: 600; }
.mon-ph span { width: 42%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 40% 40% 45% 45%; background: var(--a); color: var(--c); text-shadow: none; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.mon-hero { aspect-ratio: 1; max-width: 420px; background: radial-gradient(circle at 50% 60%, #f6ecd2, var(--earth-soft)); } .mon-art.big { width: 100%; height: 100%; }
.tier-boss .card-body .meta, .tier-mvp .card-body .meta { color: var(--danger); font-weight: 500; }
.item-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 60%, #f6ecd2, var(--earth-soft)); }
.item-media .item-icon:not(.item-render) { width: min(45%, 112px); height: auto; aspect-ratio: 1; object-fit: contain; }
.item-icon { width: 72px; height: 72px; object-fit: contain; }
.item-media .item-render { width: 100%; height: 100%; object-fit: contain; }
.item-render-big { width: 100%; height: 100%; object-fit: contain; }
.item-ph { display: inline-block; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.item-hero { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; max-width: 360px; background: radial-gradient(circle at 50% 60%, #f6ecd2, var(--earth-soft)); } .item-hero .item-icon { width: 160px; height: 160px; } .item-hero .item-ph { width: 120px; height: 120px; border-radius: 28px; }
.drop-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.drop-list li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; }
.drop-list a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--font-head); font-weight: 500; } .drop-list a:hover { color: var(--teal); }
.drop-list .item-icon { width: 40px; height: 40px; } .drop-list .item-ph { width: 32px; height: 32px; border-radius: 8px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; margin: var(--s4) 0; }
.stats div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; } .stats dt { font-size: .8rem; color: var(--muted); } .stats dd { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.detail-head { background: linear-gradient(180deg, var(--cream), var(--cream-2)); padding-top: var(--s6); }
.detail-head h1 { margin-bottom: var(--s2); }
.class-hero { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 25%, var(--cream-2)), var(--earth-soft)); }
.class-hero > img.badge { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2)); }
.class-hero.has-portrait { overflow: hidden; } .class-hero.has-portrait > img.portrait { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: center 70%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .22)); }
.class-hero.has-portrait > img.badge { left: auto; top: auto; right: 14px; bottom: 14px; transform: none; width: 72px; }
.class-hero .ph { position: relative; background: transparent; } .class-hero .ph span, .class-hero .ph small { position: absolute; bottom: 10px; left: 0; right: 0; } .class-hero .ph span { bottom: 28px; }
.skill-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.skill-row { display: flex; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; } .skill-row img, .skill-ph { width: 48px; height: 48px; flex: none; border-radius: 10px; }
.skill-ph { background: var(--c); } .skill-row h4 { margin-bottom: 2px; } .skill-row h4 .meta { display: block; font-weight: 400; font-family: var(--font-body); } .skill-row p { margin: 0; font-size: .97rem; }
.compact .skill-row { padding: 8px 12px; } .compact .skill-row img, .compact .skill-ph { width: 36px; height: 36px; }
.map-card.town .card-body .meta { color: var(--teal); font-weight: 500; }
.hub-card { text-decoration: none; color: var(--text); padding: var(--s5); align-items: center; text-align: center; transition: transform .12s; } .hub-card:hover { transform: translateY(-3px); color: var(--teal); } .hub-ico { font-size: 2.4rem; margin-bottom: var(--s2); }

/* ตัวกรอง */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--s4); padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; }
.filters input, .filters select { max-width: 100%; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); min-height: 46px; }
.f-search { flex: 1; min-width: min(200px, 100%); } .f-search input { width: 100%; } .f-count { color: var(--muted); font-size: .9rem; white-space: nowrap; }
@media (max-width: 600px) { .filters { position: static; } .filters label:not(.f-search) { flex: 1 1 45%; } .filters select { width: 100%; } }
.is-hidden { display: none !important; }

/* บทความ */
.page-head { padding-bottom: var(--s4); }
.article-grid { max-width: 780px; } .article-cover { border-radius: var(--radius); margin-top: var(--s4); }
.toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); margin: var(--s5) 0; } .toc h2 { font-size: 1rem; margin-bottom: 6px; } .toc ol { margin: 0; }
.prose h2 { margin-top: var(--s6); } .prose h3 { margin-top: var(--s5); } .prose img { border-radius: var(--radius); margin: var(--s4) 0; } .prose code { background: var(--earth-soft); padding: 1px 6px; border-radius: 4px; font-size: .9em; } .prose pre { background: #2b2622; color: #f3e6c8; padding: 14px; border-radius: var(--radius-sm); overflow: auto; }
.prose blockquote { margin: 0 0 var(--s4); padding: 8px 16px; border-left: 4px solid var(--gold); background: var(--gold-soft); border-radius: 6px; }
.prose.narrow { max-width: 760px; }
.table-wrap { overflow: auto; margin-bottom: var(--s4); } table { border-collapse: collapse; width: 100%; font-size: .97rem; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-family: var(--font-head); font-weight: 500; color: var(--teal-deep); background: var(--teal-soft); }
.article-list { list-style: none; padding: 0; display: grid; gap: 8px; } .article-list a { display: block; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .article-list a:hover { border-color: var(--teal); } .article-list strong { display: block; font-family: var(--font-head); font-weight: 500; } .article-list .small { color: var(--muted); }
.related { margin-top: var(--s6); }
.faq { margin: 0; } .faq div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 10px; } .faq dt { font-family: var(--font-head); font-weight: 600; margin-bottom: 4px; } .faq dd { margin: 0; }
.steps .step { position: relative; padding-top: var(--s6); } .step-n { position: absolute; top: 14px; left: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #3a2a10; font-family: var(--font-head); font-weight: 600; display: flex; align-items: center; justify-content: center; } .step h3 { margin-top: 10px; }
.steps-ol { max-width: 720px; } .steps-ol li { margin-bottom: 10px; }
.packs .pack { position: relative; text-align: center; } .pack .card-media { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: linear-gradient(180deg, var(--teal-soft), var(--paper)); } .pack .card-media img { width: 70%; object-fit: contain; }
.pack .gems { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--teal-deep); margin-bottom: 2px; } .pack .bonus { color: var(--danger); font-size: .9rem; } .pack .price { font-size: 1.05rem; margin: 0; }
.pack .tag { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--gold); color: #3a2a10; font-size: .8rem; padding: 2px 10px; border-radius: 999px; font-family: var(--font-head); }
.gallery .card-media { aspect-ratio: 16/9; }
.crumbs { padding: var(--s3) 0 0; font-size: .9rem; } .crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; color: var(--muted); } .crumbs li + li::before { content: '›'; margin-right: 4px; } .crumbs a { color: var(--teal); text-decoration: none; }
.crumbs + .section, .crumbs + .detail-head, .crumbs + .article { padding-top: var(--s5); }

/* footer */
.site-footer { background: #2b2622; color: #d8ccb8; margin-top: var(--s8); padding: var(--s7) 0 var(--s5); }
body:has(main > .cta-band:last-child) .site-footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.footer-title { color: var(--gold); font-size: 1rem; margin-bottom: var(--s3); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 6px; } .site-footer a { color: #f0e6d2; text-decoration: none; } .site-footer a:hover { color: var(--gold); }
.footer-brand img { margin-bottom: var(--s3); } .footer-brand p { font-size: .95rem; }
.footer-legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; color: #a89a86; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* Native dialog: focus containment, Escape and a scroll-safe image viewer. */
.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: max(64px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); border: 0; background: rgba(14,28,28,.96); color: white; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(14,28,28,.9); }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 100%; min-width: 0; }
.lightbox img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 200px); object-fit: contain; border-radius: 10px; }
.lightbox figcaption { text-align: center; font-size: .95rem; }
.lightbox-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }
.lightbox button { min-width: 46px; min-height: 46px; padding: 8px 14px; border: 1px solid #79938d; border-radius: 50px; color: #fff; background: #24595b; font: inherit; cursor: pointer; }
.lightbox button:hover { background: #36767a; }
.lightbox .lightbox-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
body.media-open, body.menu-open { overflow: hidden; }
body.menu-open .mobile-play { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Shared details across landing, catalog, article and support pages. */
button, input, select { font-family: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.sub a[aria-current], .mobile-menu a[aria-current] { background: var(--teal-soft); color: var(--teal-deep); }
.feature { position: relative; }
.feature .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-fashion .card-media { background: radial-gradient(ellipse at center, #e4efe4, #c8d8c8); }
.feature-fashion .card-media img { object-fit: contain; padding: 10px; }
.feature-number { position: absolute; top: 12px; left: 12px; border-radius: 100px; width: 32px; height: 32px; display: grid; place-items: center; background: var(--paper); color: var(--teal-deep); font-weight: 700; font-size: .78rem; }
.feature h3 { font-size: 1.05rem; }
.feature p { color: #655648; }
.news-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
.news-card:only-child .card-body { padding: 32px; }
.news-card:only-child h3 { font-size: 1.6rem; }
.news-card:only-child .card-media { height: 100%; }
.news-card .card-media img { height: 100%; object-fit: cover; }
.filter-reset { background: var(--teal-soft); color: var(--teal-deep); border: 0; border-radius: 100px; padding: 9px 14px; min-height: 44px; font: inherit; cursor: pointer; }
.filter-reset:hover { background: #cce2df; }
.filter-empty { text-align: center; padding: 48px 20px; background: var(--paper); border: 1px dashed var(--earth); border-radius: var(--radius); }
.filter-empty h3 { color: var(--teal-deep); }
.filter-empty p { margin: 0; }
.filters label { min-width: 0; }
.prose, .split-text, .stats dd, .drop-list li { overflow-wrap: anywhere; min-width: 0; }
.skill-row > div { min-width: 0; overflow-wrap: anywhere; }
.crumbs li { overflow-wrap: anywhere; }
.site-footer .btn-gold { color: #3a2a10; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-legal { color: #c5b8a4; }
.media-intro { margin-bottom: 28px; }
.gallery a { position: relative; }
.gallery a::after { content: '↗'; position: absolute; right: 10px; bottom: 10px; background: var(--paper); color: var(--teal); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; }
.promo-art { max-width: 100%; border-radius: var(--radius); overflow: hidden; display: block; }
@media (max-width: 1024px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  :root { --s8: 44px; }
  .header-row { gap: 10px; }
  .header-cta { gap: 8px; }
  .section-head { margin-bottom: 20px; }
  .lead { font-size: 1.02rem; }
  .card-body { padding: 12px; }
  .card-body h3 { font-size: 1rem; }
  .card-body .small, .card-body .meta { font-size: .8rem; }
  .class-card .card-body > p:not(.meta) { font-size: .88rem; }
  .class-icon.has-portrait img.badge { width: 32px; height: 32px; right: 5px; bottom: 5px; }
  .features { grid-template-columns: 1fr; }
  .feature { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0; }
  .feature .card-media { grid-row: 1 / 3; height: 100%; aspect-ratio: auto; min-height: 158px; }
  .feature-number { display: none; }
  .feature h3 { margin: 16px 14px 6px; }
  .feature p { margin: 0 14px 16px; font-size: .88rem; }
  .feature-fashion .card-media img { padding: 0; }
  .news-card:only-child { grid-template-columns: 1fr; }
  .news-card:only-child .card-body { padding: 20px; }
  .news-card:only-child h3 { font-size: 1.3rem; }
  .filters .f-search { flex-basis: 100%; }
  .filters label:not(.f-search) { flex-basis: 100%; }
  .filters input, .filters select { border-radius: 12px; }
  .filters .f-count { flex: 1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer li a { min-height: 44px; }
  .mobile-play { bottom: max(14px, env(safe-area-inset-bottom)); }
  body, body.show-sticky { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .lightbox { padding-inline: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 440px; }
  .hero-inner { padding-block: 36px; }
  .hero h1 { font-size: 2.4rem; }
  .filters { position: static; }
  .lightbox img { max-height: calc(100dvh - 160px); }
}

/* The single starter class is an introduction, rather than a sparse three-column row. */
.filter-list > .class-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, .6fr) minmax(0, 1fr); align-items: center; }
.filter-list > .class-card:only-child .class-icon { height: 230px; aspect-ratio: auto; }
.filter-list > .class-card:only-child .card-body { padding: 28px; }
@media (max-width: 600px) {
  .filter-list > .class-card:only-child { grid-template-columns: 112px minmax(0, 1fr); }
  .filter-list > .class-card:only-child .class-icon { height: 100%; min-height: 180px; }
  .filter-list > .class-card:only-child .card-body { padding: 16px; }
}

/* ── หน้าแรกรอบภาพโปรโมตใหม่ (28 ก.ย.) — ภาพ Astra: ท้องฟ้าโล่งด้านซ้ายไว้วางหัวข้อ ── */
.is-home .hero { background: #bfe3f2; color: var(--ink, #3b2a1d); min-height: 700px; }
.is-home .hero-bg img { object-position: 70% center; }
.is-home .hero::after { background: radial-gradient(ellipse 46% 52% at 22% 46%, rgba(255,248,232,.95), rgba(255,248,232,.8) 55%, rgba(255,248,232,0) 100%); }   /* วงรีรอบหัวข้อ — แคคตัส/นกกระทามุมล่างซ้ายยังชัด */
.is-home .hero .eyebrow { color: #2f6f73; }
.is-home .hero h1 { color: #5a3a1e; text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.is-home .hero h1 span { color: #3f7f3a; }
.is-home .hero-sub { color: #5c4a38; }
.is-home .hero-note { color: #6b5a47; }
.is-home .hero .btn-ghost { background: rgba(255,255,255,.7); border-color: #c9a26a; color: #5a3a1e; }
.is-home .hero .btn-ghost:hover { background: #fff; }
.is-home .hero .online-pill { background: rgba(255,255,255,.75); color: #3b2a1d; }

@media (max-width: 900px) { .is-home .hero::after { background: linear-gradient(90deg, rgba(255,248,232,.95), rgba(255,248,232,.8) 45%, rgba(255,248,232,.1)); } }
@media (max-width: 700px) {
  .is-home .hero-bg { aspect-ratio: 4/5; max-height: 72vh; }
  .is-home .hero-bg img { object-position: center 70%; }
  .is-home .hero { background: #fff8e8; }
  .is-home .hero-inner { background: linear-gradient(180deg, #fff8e8, #fbf0d9); }
}
/* แกลเลอรีภาพเกม 2×2 ข้างข้อความ */
.gameplay-preview .shot-strip { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gameplay-preview .shot-strip .gameplay-shot { box-shadow: var(--shadow); }
.gameplay-preview .shot-strip .image-action { font-size: .75rem; }
/* ปิดท้าย: Sandport กลางคืน */
.finale { position: relative; overflow: hidden; color: #fff; text-align: center; margin-top: var(--s5); min-height: 520px; display: flex; align-items: center; }
.finale-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.finale::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,34,74,.25), rgba(20,34,74,.55) 55%, rgba(20,34,74,.8)); }
.finale-inner { position: relative; z-index: 1; padding-block: 80px; width: 100%; }
.finale h2 { color: #fffaf0; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.45; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.finale h2 span { color: #f5c768; }
.finale p { color: #e6ecf7; }
.finale .cta-row { justify-content: center; }
.finale .btn-ghost { background: rgba(0,0,0,.25); color: #fff; border-color: rgba(255,255,255,.6); }
.finale .art-credit { z-index: 1; }
body:has(main > .finale:last-child) .site-footer { margin-top: 0; }
@media (max-width: 600px) { .finale { min-height: 440px; } .finale-inner { padding-block: 56px; } }
.countdown { display: inline-block; margin-left: 8px; padding: 2px 12px; border-radius: 100px; background: var(--teal, #2f6f73); color: #fff; font-size: .85rem; font-weight: 700; vertical-align: 2px; }
/* ใบไม้ประดับข้างปุ่มหลักใน hero (ตาม prompt หน้าแรก — ใช้ SVG ในตัว ไม่มีไฟล์เพิ่ม) */
.is-home .hero .cta-row { position: relative; }
.is-home .hero .cta-row::before { content: ''; position: absolute; left: -34px; top: 50%; width: 30px; height: 44px; transform: translateY(-50%) rotate(-18deg);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 44'%3E%3Cpath d='M15 42C15 30 15 18 15 4' stroke='%233f7f3a' stroke-width='2' fill='none'/%3E%3Cpath d='M15 30C5 28 2 20 4 14c7 2 11 8 11 16zM15 22c9-2 12-9 11-15-7 2-11 8-11 15z' fill='%2386c55e'/%3E%3C/svg%3E"); }
@media (max-width: 700px) { .is-home .hero .cta-row::before { display: none; } }
/* ลงทะเบียนล่วงหน้า (หน้าแรก) */
.prereg { padding: var(--s6, 40px) 0 0; }
.prereg-card { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: center; background: linear-gradient(135deg, #fff8e8, #f6e7c4); border: 2px solid #e8c77a; border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.prereg-art img { width: 100%; border-radius: 16px; aspect-ratio: 4/5; object-fit: cover; }
.prereg-body h2 { margin: 4px 0 10px; color: #5a3a1e; }
.prereg-body .eyebrow { color: #2f6f73; }
.prereg-rewards { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.prereg-rewards li { display: flex; gap: 10px; align-items: center; background: #fffdf6; border: 1px solid #ecdcb8; border-radius: 12px; padding: 10px 14px; }
.prereg-rewards .tag { flex: none; background: #2f6f73; color: #fff; border-radius: 100px; padding: 2px 10px; font-size: .8rem; font-weight: 700; }
.prereg-rewards li.done { border-color: #86c55e; background: #f0f8e6; }
.prereg-rewards li.done .tag { background: #3f7f3a; }
.prereg-meter .bar { height: 12px; border-radius: 100px; background: #eadbb8; overflow: hidden; }
.prereg-meter .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e8b64a, #f5c768); transition: width .8s; }
.prereg-meter p { margin: 6px 0 0; font-weight: 700; color: #5a3a1e; }
@media (max-width: 800px) { .prereg-card { grid-template-columns: 1fr; } .prereg-art { display: none; } }
/* หัวข้อส่วน — ผู้ใช้: "section header ไม่เห็นสวยเลย" (28 ก.ย.) · คำเล็กทอง + หัวข้อ + เส้นประดับใบไม้ทอง · กึ่งกลาง */
.section-head { margin-bottom: var(--s6, 40px); }
.is-home .section-head { text-align: center; }   /* หน้าแรกกึ่งกลาง · หน้าข้างในชิดซ้ายตามเนื้อหา */
.section-head h1, .section-head h2 { margin: 0; color: #5a3a1e; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: .01em; }
.section-eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #b8862a; }
.section-orn { display: block; width: 190px; height: 18px; margin: 12px 0 0; background-position: left center !important;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 18'%3E%3Cpath d='M4 9h66M120 9h66' stroke='%23e0b454' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='76' cy='9' r='2.2' fill='%23e0b454'/%3E%3Ccircle cx='114' cy='9' r='2.2' fill='%23e0b454'/%3E%3Cpath d='M95 16c-7-1-11-6-11-12 6 0 10 4 11 9 1-5 5-9 11-9 0 6-4 11-11 12z' fill='%2386c55e'/%3E%3Cpath d='M95 16V6' stroke='%233f7f3a' stroke-width='1.4'/%3E%3C/svg%3E"); }
.section-head .lead { margin: 14px 0 0; }
.is-home .section-orn { margin: 12px auto 0; background-position: center !important; }
.is-home .section-head .lead { margin: 14px auto 0; }
.is-home .section-cta { text-align: center; }
@media (max-width: 600px) { .section-head { margin-bottom: 24px; } .section-orn { width: 150px; } }