/* หน้าแรก v4 (2 ต.ค.) — ใต้ hero: โซนต่อเนื่องแบบเกม · ใช้เฉพาะ body.is-home
   โทนจากข้อกำหนดผู้ใช้: ivory/sand/gold/forest/oasis teal/น้ำตาลอุ่น — ไม่แตะ hero */
.is-home {
  --iv: #FFF9EB; --iv2: #F7EED8; --sand: #E8D3A9; --sand2: #D8B77D; --gold: #E8B64A; --gold2: #D99A28;
  --forest: #28663B; --oasis: #2F7776; --aqua: #5FC0BE; --brown: #4B2D17; --clay: #B9674A;
  --ink: #4B2D17; --ink-soft: #7a6048; --paper-line: #ecdcb6;
  color: var(--ink);
}

/* ── ฐานของโซน ── */
.zone { position: relative; padding: clamp(56px, 8vw, 128px) 0; overflow: hidden; isolation: isolate; }
.zone .wrap { position: relative; z-index: 1; width: min(100% - 32px, 1240px); }
.zone-intro, .zone-treasure, .zone-world { background: var(--iv); }
.zone-cast, .zone-gallery { background: #f3e7cc; }
.zone-bestiary { background: #e2f0ec; }
.zone-path { background: #f6ecd3; }
/* ลวดลายกระเบื้องจาง ๆ */
.zone-intro::before, .zone-treasure::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background:
  radial-gradient(circle at 20px 20px, #e8d3a933 2px, transparent 3px) 0 0 / 40px 40px; }
.zone-cast::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 60% 50% at 25% 60%, #fff4d599, transparent 70%), radial-gradient(ellipse 50% 40% at 85% 20%, #fff9eb99, transparent 70%); }
.zone-bestiary::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .6; background:
  radial-gradient(ellipse 50% 40% at 15% 20%, #cfe7e1, transparent 70%), radial-gradient(ellipse 45% 35% at 90% 85%, #d6ede6, transparent 70%); }

.divider { height: clamp(36px, 6.5vw, 96px); margin: -1px 0; background: var(--from); line-height: 0; position: relative; z-index: 2; }
.divider svg { width: 100%; height: 100%; display: block; } .divider path { fill: var(--to); }

/* ── ของตกแต่ง ── */
.deco { position: absolute; z-index: 0; pointer-events: none; display: block; }
.deco svg { width: 100%; height: 100%; display: block; }
.deco-spark { width: 22px; height: 22px; opacity: .8; } .deco-spark.s1 { top: 8%; left: 15%; } .deco-spark.s2 { top: 30%; right: 9%; width: 16px; height: 16px; } .deco-spark.s3 { bottom: 18%; left: 12%; width: 14px; height: 14px; }
.deco-palm { width: min(300px, 26vw); aspect-ratio: 1; top: -40px; left: -70px; opacity: .1; transform: rotate(18deg); }
.deco-compass { width: 76px; height: 76px; z-index: 3; filter: drop-shadow(0 4px 6px #4b2d1722); } .deco-compass.c1 { top: 6%; right: 5%; opacity: .55; }
.deco-leaf { width: 54px; height: 54px; } .deco-leaf.l1 { top: 10%; left: 4%; opacity: .5; transform: rotate(-20deg); } .deco-leaf.l2 { bottom: 8%; right: 5%; opacity: .45; transform: rotate(150deg); width: 70px; height: 70px; }
.deco-foot { width: 30px; height: 36px; color: #2f777622; } .deco-foot.f1 { top: 20%; left: 3%; transform: rotate(20deg); } .deco-foot.f2 { top: 30%; left: 6%; transform: rotate(10deg); } .deco-foot.f3 { top: 42%; left: 3.5%; transform: rotate(25deg); }
.deco-wave { width: 140px; height: 26px; top: 8%; right: 8%; opacity: .5; } .deco-wave.w1 { top: 12%; left: 6%; right: auto; }

/* ── หัวข้อ ── */
.sh { margin-bottom: clamp(32px, 4vw, 56px); } .sh-center { text-align: center; } .sh-left { text-align: left; }
.sh-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 .82rem/1 var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--gold2); }
.sh-leaf { width: 14px; height: 14px; background: var(--forest); border-radius: 0 100% 0 100%; display: inline-block; }
.sh h2, .zone h2 { margin: 0 0 12px; font: 500 clamp(1.9rem, 4vw, 3.1rem)/1.28 var(--font-head); color: var(--brown); letter-spacing: -.01em; }
.sh-lead { max-width: 640px; margin: 0 auto; font-size: 1.06rem; color: var(--ink-soft); } .sh-left .sh-lead { margin-left: 0; }
.zone-cta { text-align: center; margin: clamp(28px, 4vw, 48px) 0 0; }
.tlink { font: 600 1rem var(--font-head); color: var(--oasis); text-decoration: none; border-bottom: 2px solid #5fc0be66; padding-bottom: 2px; transition: border-color .15s, color .15s; } .tlink:hover { color: var(--forest); border-color: var(--gold); }

/* ── ปุ่ม ── */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; font: 600 1.05rem var(--font-head); text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.gbtn svg { width: 18px; height: 18px; flex: none; }
.gbtn-gold { background: linear-gradient(#f2c460, #e8b64a); color: var(--brown); box-shadow: 0 4px 0 #b9811f, 0 10px 20px #d99a2833; } .gbtn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #b9811f, 0 14px 24px #d99a2840; color: var(--brown); } .gbtn-gold:active { transform: translateY(2px); box-shadow: 0 2px 0 #b9811f; }
.gbtn-ghost { background: #fffaf0cc; color: var(--forest); border: 2px solid #28663b40; } .gbtn-ghost:hover { background: #fff; border-color: var(--forest); color: var(--forest); }
.gbtn:focus-visible, .tlink:focus-visible, .cast-tab:focus-visible, .jp-tab:focus-visible, .travel-tab:focus-visible, .shelf-tab:focus-visible { outline: 3px solid var(--oasis); outline-offset: 3px; }

/* ── การ์ดแบบเกม 4 ชนิด ── */
.fp { position: relative; border-radius: 28px; padding: clamp(22px, 3vw, 36px); }
.fp-label { margin: 0 0 6px; font: 600 .8rem/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); }
.fp h3 { margin: 0 0 8px; font: 500 clamp(1.5rem, 2.6vw, 2.1rem)/1.25 var(--font-head); color: var(--brown); }
.fp-parchment { background: linear-gradient(#fffaf0, #fbf1da); border: 2px solid var(--paper-line); box-shadow: 0 12px 32px #4b2d1718, inset 0 0 0 5px #fffdf6, inset 0 0 40px #e8d3a933; }
.fp-oasis { background: linear-gradient(#f0fbf8, #def2ee); border: 2px solid #bfe3dc; box-shadow: 0 10px 26px #2f777618; border-radius: 28px 28px 28px 80px; } .fp-oasis h3 { color: #1f5051; } .fp-oasis .fp-label { color: var(--oasis); }
.fp-sandstone { background: linear-gradient(#f4e6c4, #ead7ab); border: 3px solid var(--sand2); box-shadow: 0 12px 28px #4b2d1722, inset 0 2px 0 #fff8e2, inset 0 -4px 0 #cfae6f55; border-radius: 22px; }
.fp-collector { background: #fffaf0; border: 2px solid var(--paper-line); border-radius: 20px; box-shadow: 0 8px 22px #4b2d1714; overflow: hidden; padding: 0; }

.gbadges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0; }
.gbadge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; background: #fffaf0; border: 2px solid var(--paper-line); font: 500 .94rem var(--font-head); color: var(--brown); }
.gbadge-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fbe9bd; font-size: 1.05rem; }

/* ── 1 · ต้อนรับ ── */
.intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.intro-text > p { font-size: 1.1rem; line-height: 1.8; color: var(--ink-soft); max-width: 520px; }
.intro-text h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.tally { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 28px; padding: 14px 18px; background: #fffaf0b0; border: 2px dashed var(--sand); border-radius: 20px; width: fit-content; }
.tally div { text-align: center; padding: 0 10px; } .tally dt { font: 600 1.6rem/1.1 var(--font-head); color: var(--oasis); } .tally dd { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.postcard { position: relative; aspect-ratio: 1.12; }
.frame { position: absolute; display: block; border: 8px solid #fffdf6; border-radius: 22px; background: #fffdf6; overflow: hidden; box-shadow: 0 16px 36px #4b2d1730, 0 2px 0 #e8d3a9; transition: transform .25s, box-shadow .25s; line-height: 0; }
.frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform .4s; }
.frame:hover { transform: translateY(-4px) rotate(0deg) !important; box-shadow: 0 22px 44px #4b2d1738; } .frame:hover img { transform: scale(1.04); }
.frame .tape { position: absolute; top: -6px; left: 50%; width: 76px; height: 24px; transform: translateX(-50%) rotate(-3deg); line-height: 0; }
.frame-main { inset: 0 8% 14% 0; transform: rotate(-1.2deg); z-index: 1; }
.frame-a { width: 40%; aspect-ratio: 4/3; right: 0; top: 6%; transform: rotate(3deg); z-index: 2; }
.frame-b { width: 42%; aspect-ratio: 4/3; right: 4%; bottom: 0; transform: rotate(-2.5deg); z-index: 3; }
.postcard .deco-compass { left: -20px; bottom: 8%; } .postcard .deco-leaf { width: 70px; height: 70px; top: -26px; left: 18%; z-index: 4; opacity: .9; transform: rotate(-30deg); }
.postcard-note { position: absolute; left: 0; bottom: -4px; margin: 0; font-size: .82rem; color: var(--ink-soft); }

/* ── 2 · นักผจญภัย ── */
.cast { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cast-tabs { display: flex; flex-direction: column; gap: 10px; }
.cast-tabs[hidden] { display: none; }
.cast-tab { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; background: #fffaf0b8; border: 2px solid var(--paper-line); cursor: pointer; text-align: left; font-family: inherit; color: var(--brown); transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.cast-tab img { width: 46px; height: 46px; border-radius: 14px; background: #fbe9bd; padding: 3px; }
.cast-tab span { display: flex; flex-direction: column; line-height: 1.25; } .cast-tab strong { font: 600 1.02rem var(--font-head); } .cast-tab small { font-size: .8rem; color: var(--ink-soft); }
.cast-tab:hover { transform: translateX(4px); border-color: var(--gold); }
.cast-tab[aria-selected="true"] { background: linear-gradient(#f2c460, #e8b64a); border-color: var(--gold2); box-shadow: 0 4px 0 #b9811f; transform: translateX(10px); } .cast-tab[aria-selected="true"] small { color: #6b4a1b; }
.cast-stage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.cast-stage[hidden] { display: none; }
.cast-art { position: relative; aspect-ratio: 3/4; max-width: 440px; width: 100%; margin: 0 auto; }
.cast-arch { position: absolute; inset: 7% 8% 0; border-radius: 999px 999px 32px 32px; background: linear-gradient(#fff4d6, color-mix(in srgb, var(--ac, #e8b64a) 28%, #f3e0b0)); border: 6px solid #fffaf0; box-shadow: 0 0 0 3px var(--sand), 0 22px 40px #4b2d1722; }
.cast-sun { position: absolute; inset: 10% 10% 4%; border-radius: 999px 999px 24px 24px; background: repeating-conic-gradient(from -8deg at 50% 62%, #ffffff55 0 8deg, transparent 8deg 22deg); opacity: .8; mask: linear-gradient(#000 60%, transparent); }
.cast-ring { position: absolute; width: 74%; aspect-ratio: 1; left: 13%; bottom: 8%; border-radius: 50%; border: 3px dashed #d99a2866; }
.cast-art img { position: absolute; z-index: 2; left: -14%; bottom: -25%; width: 128%; max-width: none; height: auto; filter: drop-shadow(0 14px 14px #4b2d1733); animation: idle 5s ease-in-out infinite; }
.cast-cap { position: absolute; z-index: 3; left: 50%; bottom: -26px; transform: translateX(-50%); font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.cast-info { padding: clamp(22px, 2.6vw, 34px); }
.cast-tag { font: 500 1.15rem/1.5 var(--font-head); color: var(--oasis); margin: 0 0 10px; }
.cast-info p { color: var(--ink-soft); }
.cast-points { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; } .cast-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--brown); } .cast-points svg { width: 16px; height: 16px; flex: none; margin-top: 6px; }
.cast-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.chip-fact { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 16px; background: #fff; border: 2px solid var(--paper-line); } .chip-fact small { display: block; font-size: .72rem; color: var(--ink-soft); line-height: 1.2; } .chip-fact b { font: 600 .95rem var(--font-head); color: var(--brown); }
.chip-weapon img { width: 28px; height: 28px; }
.cast-evo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; font-size: .94rem; } .cast-evo i { font-style: normal; color: var(--gold2); } .cast-evo strong { color: var(--forest); } .cast-evo a { color: var(--oasis); }

/* ── 3 · สมุดสิ่งมีชีวิต ── */
.journal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.journal-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); align-items: center; transform: rotate(-.6deg); }
.journal-card::before { content: ''; position: absolute; inset: 14px; border-radius: 18px; border: 2px dashed #e8d3a999; pointer-events: none; }
.jp-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 24px; background: radial-gradient(circle at 50% 62%, #fff4d6, #efddb2); }
.jp-img { width: 88%; height: 88%; object-fit: contain; animation: idle 5s ease-in-out infinite; filter: drop-shadow(0 10px 8px #4b2d1722); }
.jp-pin { position: absolute; top: -10px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6a58c, var(--clay)); box-shadow: 0 3px 4px #4b2d1744; z-index: 2; }
.jp-note { font: 400 1.05rem/1.6 var(--font-body); color: var(--ink-soft); font-style: italic; }
.jp-chips { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; } .jp-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #e8f5f2; border: 1px solid #bfe3dc; color: #1f5051; font: 500 .85rem var(--font-head); } .jp-chips li.jp-role { background: none; border: 0; padding: 0; }
.jp-habitat { margin: 0 0 12px; font-size: .94rem; color: var(--ink-soft); } .jp-habitat b { color: var(--brown); margin-right: 6px; }
.journal-page[hidden] { display: none; }
.journal-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jp-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 18px; background: #fffaf0; border: 2px solid #cfe5df; cursor: pointer; font-family: inherit; color: var(--brown); transition: transform .15s, border-color .15s, box-shadow .15s; }
.jp-thumb { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; } .jp-tab span { font: 500 .74rem/1.2 var(--font-head); text-align: center; overflow-wrap: anywhere; }
.jp-tab em { position: absolute; top: 4px; right: 6px; color: var(--gold2); font-style: normal; }
.jp-tab:hover { transform: translateY(-3px); border-color: var(--aqua); }
.jp-tab[aria-selected="true"] { border-color: var(--gold2); background: #fff4d6; box-shadow: 0 4px 0 #d99a28; transform: translateY(-3px); }

/* ── 4 · ของสะสม ── */
.treasure { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pedestal { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 20px 28px; border-radius: 36px 36px 28px 28px; text-decoration: none; color: var(--brown); background: linear-gradient(#fff4d6, #f3e0b0); border: 3px solid var(--sand2); box-shadow: 0 18px 38px #4b2d1722, inset 0 0 0 5px #fffdf6; overflow: hidden; transition: transform .2s; }
.pedestal:hover { transform: translateY(-4px); color: var(--brown); }
.pedestal-rays { position: absolute; inset: -30% -30% 20%; background: repeating-conic-gradient(from 0deg at 50% 55%, #ffffff66 0 7deg, transparent 7deg 18deg); opacity: .7; }
.pedestal-tag { position: relative; z-index: 1; padding: 4px 14px; border-radius: 999px; background: var(--gold); font: 600 .78rem var(--font-head); letter-spacing: .08em; }
.pedestal img { position: relative; z-index: 1; width: 62%; margin: 22px 0 -6px; filter: drop-shadow(0 12px 10px #4b2d1733); transition: transform .3s; } .pedestal:hover img { transform: scale(1.06) translateY(-4px); }
.pedestal-base { position: relative; z-index: 1; width: 66%; height: 16px; border-radius: 50%; background: radial-gradient(#b99556aa, transparent 70%); margin-bottom: 14px; }
.pedestal strong { position: relative; z-index: 1; font: 500 1.5rem var(--font-head); } .pedestal-meta { position: relative; z-index: 1; font-size: .9rem; color: var(--ink-soft); }
.shelf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.shelf-tab { padding: 8px 18px; border-radius: 999px; background: #fffaf0; border: 2px solid var(--paper-line); font: 500 .92rem var(--font-head); color: var(--brown); cursor: pointer; transition: background .15s, border-color .15s; } .shelf-tab:hover { border-color: var(--gold); }
.shelf-tab.is-active { background: var(--gold); border-color: var(--gold2); }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.slot[hidden] { display: none; }
.slot a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px 8px 12px; border-radius: 22px; background: #fffaf0; border: 2px solid var(--paper-line); text-decoration: none; color: var(--brown); box-shadow: 0 5px 12px #4b2d170f; transition: transform .18s, border-color .18s, box-shadow .18s; height: 100%; }
.slot a:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 22px #4b2d1720; }
.slot-box { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle at 50% 60%, #fff4d6, #f0dfb6); box-shadow: inset 0 0 0 3px #fffdf6, inset 0 0 0 4px var(--rc, #ecdcb6); }
.slot-box .item-icon { width: 62px; height: 62px; transition: transform .2s; } .slot a:hover .slot-box .item-icon { transform: scale(1.06); }
.slot-gem { position: absolute; right: -6px; bottom: -6px; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font: 600 .78rem var(--font-head); font-style: normal; color: #fff; background: var(--rc, var(--sand2)); box-shadow: 0 2px 0 #0003; }
.slot.rank-C { --rc: #9a8a74; } .slot.rank-B { --rc: #3f8f5a; } .slot.rank-A { --rc: #3f6fb3; } .slot.rank-S { --rc: #d99a28; }
.slot strong { font: 500 .88rem/1.25 var(--font-head); overflow-wrap: anywhere; } .slot small { font-size: .74rem; color: var(--ink-soft); }

/* ── 5 · เส้นทางผจญภัย ── */
.apath { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.5vw, 44px); }
.apath::before { content: ''; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 0; border-left: 4px dotted #d99a2899; transform: translateX(-50%); }
.apath-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.apath-dot { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); border: 4px solid #fffaf0; box-shadow: 0 4px 10px #4b2d1730; font: 600 1.1rem var(--font-head); color: var(--brown); z-index: 2; }
.apath-art { aspect-ratio: 16/9; overflow: hidden; border: 7px solid #fffdf6; box-shadow: 0 14px 30px #4b2d1728; background: #e8d3a9; }
.apath-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .apath-step:hover .apath-art img { transform: scale(1.04); }
.apath-body h3 { margin: 0 0 8px; font: 500 clamp(1.4rem, 2.4vw, 1.9rem) var(--font-head); color: var(--brown); } .apath-body p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; max-width: 440px; }
.apath-step.is-left .apath-art { border-radius: 36px 120px 36px 120px / 36px 90px 36px 90px; }
.apath-step.is-right .apath-art { border-radius: 120px 36px 120px 36px / 90px 36px 90px 36px; order: 2; } .apath-step.is-right .apath-body { order: 1; text-align: right; } .apath-step.is-right .apath-body p { margin-left: auto; }

/* ── 6 · โลก ── */
.travel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.travel-tabs { order: -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.travel-tab { padding: 10px 22px; border-radius: 999px; background: #fffaf0; border: 2px solid var(--sand); font: 500 .98rem var(--font-head); color: var(--brown); cursor: pointer; transition: transform .15s, background .15s; box-shadow: 0 4px 10px #4b2d1710; } .travel-tab:hover { transform: translateY(-2px); }
.travel-tab.is-active { background: var(--oasis); border-color: #1f5051; color: #fff; }
.travel-pane { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
.travel-pane[hidden] { display: none; }
.travel-photo { display: block; line-height: 0; overflow: hidden; border: 8px solid #fffdf6; border-radius: 40px 140px 40px 140px / 40px 100px 40px 100px; box-shadow: 0 18px 40px #4b2d1730; aspect-ratio: 16/10; }
.travel-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .travel-photo:hover img { transform: scale(1.04); }
.travel-info { margin-left: -9%; z-index: 2; position: relative; }
.travel-sub { color: var(--ink-soft); margin: 0 0 8px; } .travel-meta { color: var(--oasis); font: 500 .95rem var(--font-head); margin: 0 0 14px; }
.mini-map { position: absolute; right: 2%; bottom: 74px; width: min(190px, 22%); border-radius: 20px; overflow: hidden; border: 5px solid #fffdf6; box-shadow: 0 10px 22px #4b2d1730; transform: rotate(3deg); display: none; line-height: 0; z-index: 3; }
.mini-map img { width: 100%; } .mini-map span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; background: #fffaf0e6; font: 600 .75rem var(--font-head); color: var(--brown); text-align: center; line-height: 1.2; }
.regions { list-style: none; margin: clamp(32px, 4vw, 56px) 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .regions .fp { height: 100%; } .regions p { color: #2c5a58; margin-bottom: 0; }
.center { text-align: center; }

/* ── 7 · แกลเลอรี ── */
.scrap { position: relative; display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 0; align-items: center; padding-bottom: 20px; }
.scrap .frame { position: relative; inset: auto; }
.scrap-c { z-index: 2; transform: rotate(-.8deg); aspect-ratio: 16/10; } .scrap-l { aspect-ratio: 4/3; transform: rotate(-3deg) translate(14%, 8%); z-index: 1; } .scrap-r { aspect-ratio: 4/3; transform: rotate(2.5deg) translate(-14%, -8%); z-index: 1; }
.scrap .deco-leaf { top: -18px; right: 22%; width: 74px; height: 74px; z-index: 3; opacity: .85; transform: rotate(40deg); }

/* ── 8 · ปิดท้าย ── */
.zone-finale { background: linear-gradient(#f3e7cc, #f7d98f 70%, #f2c460); padding-bottom: 0; text-align: center; }
.finale-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; z-index: -1; mix-blend-mode: multiply; }
.finale-in { padding-bottom: clamp(120px, 16vw, 220px); }
.finale-mascot { width: clamp(110px, 14vw, 170px); height: auto; margin: 0 auto 6px; animation: idle 4.5s ease-in-out infinite; }
.finale-in h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); color: var(--brown); } .finale-in h2 span { color: var(--forest); }
.finale-sub { color: #6b4a1b; font-size: 1.1rem; margin-bottom: 28px; }
.finale-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0; }
.finale-cta .gbtn { min-height: 60px; padding: 0 36px; font-size: 1.15rem; }
.finale-town { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 14vw, 200px); z-index: 0; }
.zone-finale .deco-spark.s1 { top: 18%; left: 14%; } .zone-finale .deco-spark.s2 { top: 26%; right: 16%; } .zone-finale .deco-spark.s3 { top: 48%; left: 8%; }

/* ── เดิมของหน้าแรก ที่ยังอยู่ (ลงทะเบียน/ข่าว/ชุมชน) ให้กลมกลืน ── */
.is-home .prereg, .is-home #news, .is-home #social { background: #fffaf0; }

/* ── การเคลื่อนไหว (น้อย ๆ) ── */
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.rv-on .rv { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.rv-on .rv.in { opacity: 1; transform: none; }
.rv-on .slots .slot, .rv-on .regions li { transition-delay: calc(var(--i, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv { opacity: 1; transform: none; transition: none; }
  .cast-art img, .jp-img, .finale-mascot { animation: none; }
  .frame, .frame img, .slot a, .pedestal, .pedestal img, .jp-tab, .cast-tab, .travel-tab, .gbtn { transition: none; }
}

/* ── จอกลาง/เล็ก ── */
@media (min-width: 1100px) { .mini-map { display: block; } }
@media (max-width: 1024px) {
  .cast { grid-template-columns: 1fr; }
  .cast-tabs { flex-direction: row; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; margin-inline: -16px; padding-inline: 16px; scrollbar-width: thin; }
  .cast-tab { flex: none; scroll-snap-align: start; } .cast-tab[aria-selected="true"], .cast-tab:hover { transform: none; }
  .journal { grid-template-columns: 1fr; }
  .journal-picker { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .treasure { grid-template-columns: 1fr; } .pedestal { max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 820px) {
  .intro-grid { grid-template-columns: 1fr; } .postcard { max-width: 560px; margin: 0 auto; width: 100%; }
  .cast-stage { grid-template-columns: 1fr; } .cast-art { max-width: 340px; margin-bottom: 32px; }
  .journal-card { grid-template-columns: 1fr; transform: none; } .jp-art { max-width: 260px; margin: 0 auto; }
  .travel-pane { grid-template-columns: 1fr; } .travel-info { margin: -40px 12px 0; }
  .travel-photo { border-radius: 28px 70px 28px 70px / 28px 56px 28px 56px; }
  .regions { grid-template-columns: 1fr; }
  .apath::before { left: 23px; transform: none; }
  .apath-step, .apath-step.is-right { grid-template-columns: 1fr; gap: 16px; padding-left: 62px; }
  .apath-dot { left: 23px; top: 24px; margin: 0 0 0 -23px; }
  .apath-step.is-right .apath-art, .apath-step.is-right .apath-body { order: 0; text-align: left; } .apath-step.is-right .apath-body p { margin-left: 0; }
  .apath-step.is-left .apath-art, .apath-step.is-right .apath-art { border-radius: 28px 64px 28px 64px / 28px 52px 28px 52px; }
  .scrap { grid-template-columns: 1fr 1fr; gap: 12px; } .scrap-c { grid-column: 1 / -1; order: -1; } .scrap-l, .scrap-r { transform: none; }
  .deco-palm, .deco-foot, .deco-compass.c1, .deco-wave, .deco-spark { display: none; }
}
@media (max-width: 520px) {
  .tally { width: 100%; justify-content: space-between; } .tally div { padding: 0 4px; }
  .gbtn { width: 100%; } .intro-links .gbtn, .finale-cta .gbtn { width: 100%; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .journal-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .jp-tab span { display: none; }
  .frame-a, .frame-b { width: 46%; } .postcard .deco-compass { display: none; }
}