/* RO Friends site styles (built into site/dist by tools/build_site.py).
   Look: RO client windows, white + sky blue, bright pink brand, deep raspberry browser bar.
   Shape rule: buttons, chips and tabs are pills; panels 14px; inputs 10px; images 12px.
   Brand site: light only (no prefers-color-scheme), motion respects prefers-reduced-motion. */

:root {
  color-scheme: light;
  --rasp: #b8145b;          /* header, footer, html/body, theme-color (L* about 40: Safari tints with it) */
  --rasp-700: #96104a;
  --pink: #ff4fa3;          /* bubblegum accent, decoration only */
  --pink-300: #ff9cc8;
  --pink-100: #ffe1ef;
  --pink-50: #fff3f8;
  --sky-50: #f0f8fe;
  --sky-100: #dff1fc;
  --sky-200: #c3e4f8;
  --sky-300: #9dd3f3;
  --navy: #1c2a4d;
  --ink: #1c2a4d;
  --ink-2: #4b5877;
  --ink-3: #66728d;
  --line: #d6e5f1;          /* hairline between surfaces */
  --border: #7790ab;        /* edge of things you can press (3:1 on white) */
  --white: #fff;
  --shadow: 0 1px 2px rgba(28, 42, 77, .06), 0 8px 24px rgba(28, 42, 77, .08);
  --shadow-lg: 0 2px 4px rgba(28, 42, 77, .06), 0 18px 40px rgba(28, 42, 77, .12);
  --r: 14px;
  --r-in: 10px;
  --pill: 999px;
  --font-h: 'Mitr', 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
  --font-b: 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
  --font-d: 'Chonburi', 'Mitr', serif;          /* storybook display: page and section titles */
  --font-n: 'Mali', 'IBM Plex Sans Thai Looped', sans-serif;  /* handwritten notes */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--rasp); -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--rasp); color: var(--ink); font: 400 16px/1.7 var(--font-b); }
main { display: block; }
h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 500; line-height: 1.35; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(28px, 5vw, 44px); }
h2 { font-size: clamp(24px, 3.6vw, 34px); }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }
a { color: var(--rasp); text-underline-offset: 3px; }
a:hover { color: var(--rasp-700); }
img { max-width: 100%; height: auto; }
code { font: 500 .92em/1.4 ui-monospace, 'SFMono-Regular', Menlo, monospace; background: var(--sky-100); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
small { font-size: .85em; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 28px; } }
.nb { display: inline-block; }
.muted { color: var(--ink-3); }
.px { image-rendering: pixelated; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--rasp); padding: 8px 14px; border-radius: var(--pill); z-index: 50; }
.skip:focus { left: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ header */
.top { position: sticky; top: 0; z-index: 30; background: var(--rasp); color: #fff; }
.top-in { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 42px; width: auto; }
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a { color: #fff; text-decoration: none; font: 500 15px/1 var(--font-h); padding: 11px 16px; border-radius: var(--pill); white-space: nowrap; }
.nav a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.nav a[aria-current] { background: #fff; color: var(--rasp); font-weight: 600; }
.nav a.nav-cta { background: #ffe27a; color: #6e0d39; font-weight: 600; }
.nav a.nav-cta:hover { background: #fff0b3; color: #6e0d39; }
.nav a.nav-cta[aria-current] { background: #fff; color: var(--rasp); }
.nav-btn { display: none; margin-left: auto; align-items: center; gap: 10px; background: rgba(255, 255, 255, .16); color: #fff;
  border: 0; border-radius: var(--pill); padding: 0 16px; min-height: 42px; font: 500 15px/1 var(--font-h); cursor: pointer; }
.nav-btn i { display: grid; gap: 4px; }
.nav-btn i b { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }
@media (max-width: 1023px) {
  .nav-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--rasp); flex-direction: column;
    padding: 8px 16px 18px; box-shadow: 0 14px 24px rgba(28, 42, 77, .22); }
  .top.open .nav { display: flex; }
  .nav a { padding: 14px 16px; font-size: 17px; }
}

/* ------------------------------------------------------------------ buttons, chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: var(--pill); font: 500 16px/1 var(--font-h); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-main { background: var(--rasp); color: #fff; box-shadow: 0 6px 18px rgba(184, 20, 91, .28); }
.btn-main:hover { background: var(--rasp-700); color: #fff; }
.btn-soft { background: #fff; color: var(--ink); border-color: var(--border); }
.btn-soft:hover { background: var(--sky-50); color: var(--ink); }
.btn img { width: 24px; height: 24px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.more { font: 500 15px/1.4 var(--font-h); text-decoration: none; }
.more:hover { text-decoration: underline; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--pill); font: 500 13px/1.5 var(--font-b);
  background: var(--sky-100); color: var(--ink); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-lv { background: var(--navy); color: #fff; }
.chip-boss { background: var(--rasp); color: #fff; }
.chip-mvp { background: var(--pink); color: #fff; }
.chip-agg { background: #ffe3d6; color: #8a2d06; }
.chip-pink { background: var(--pink-100); color: var(--rasp-700); }
.el-neutral { background: #e9ecf1; color: #3e475a; }
.el-water { background: #d4ebff; color: #134a7c; }
.el-earth { background: #efdfc8; color: #5f3d12; }
.el-fire { background: #ffd8cc; color: #8f2410; }
.el-wind { background: #d6f3da; color: #1d5d2a; }
.el-poison { background: #eadbf7; color: #5a2a85; }
.el-holy { background: #fff1bf; color: #6b5300; }
.el-dark { background: #3a3557; color: #fff; }
.el-ghost { background: #e4e1f7; color: #3f3890; }
.el-undead { background: #ddd6cf; color: #4a3b30; }

/* rarity: colour on the number */
.r-com { color: var(--ink-2); }
.r-unc { color: #1b6aa5; }
.r-rare { color: var(--rasp); }
.r-ultra { display: inline-block; color: #fff; background: var(--rasp); padding: 1px 8px; border-radius: var(--pill); margin-bottom: 3px; }

/* ------------------------------------------------------------------ bands */
.band { padding: 56px 0; }
@media (min-width: 1024px) { .band { padding: 84px 0; } }
.band-sky { background: var(--sky-50); }
.band-pink { background: var(--pink-50); }
.band-navy { background: var(--navy); color: #e8eefb; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-tight { padding: 32px 0 56px; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 62ch; }
.sec-h { margin-bottom: 28px; }
.sec-h p { color: var(--ink-2); max-width: 62ch; margin: 0; }
.band-navy .sec-h p { color: #c9d5ee; }

/* ================================================================== storybook layer (owner pick: mockup c)
   Drawn art (book, parchment, ribbon, night page, vignettes, ornaments, mascot) lives in /assets/brand.
   Game parts are real: sprites, item icons, minimaps. Game WINDOWS use the .ro-win component below. */

/* ---------- RO UI skin hook points: the client bitmaps (data\texture\유저인터페이스\basic_interface)
   replace these `none` values with url() paths under /assets/ro-ui/ (title bar slices, buttons). Until then the
   plain fallback skin under each `none` is what shows. Keep every RO window in .ro-win markup only. */
:root {
  --ro-bar-l: none;          /* title bar, left cap   (3-slice) */
  --ro-bar-m: none;          /* title bar, middle     (repeat-x) */
  --ro-bar-r: none;          /* title bar, right cap */
  --ro-bar-h: 24px;          /* title bar height = bitmap height */
  --ro-body: none;           /* window body texture */
  --ro-frame: none;          /* body frame, used as border-image source */
  --ro-frame-slice: 4;       /* border-image slice of --ro-frame */
  --ro-frame-w: 1px;         /* drawn frame width */
  --ro-btn-close: none;      /* title bar buttons (13x13 in the client) */
  --ro-btn-min: none;
  --ro-btn-size: 13px;
  --ro-npc-next: none;       /* NPC dialog "next" / "close" buttons */
  --ro-worldmap: none;       /* the client's world map bitmap (home + world page) */
  --ro-glyph-x: "\00d7";     /* drawn glyphs on the placeholder buttons: set to "" once the bitmaps are in */
  --ro-glyph-m: "-";
}

main { --sky-h: 56.25vw;
  background: linear-gradient(180deg, rgba(234, 245, 253, 0) calc(var(--sky-h) - 40%), #eaf5fd var(--sky-h)) 0 0 / 100% var(--sky-h) no-repeat,
    url(/assets/brand/sky-bg-m.webp) 50% 0 / 100% auto no-repeat, linear-gradient(180deg, #eaf5fd 0, #e1f1fd 100%); }
@media (min-width: 900px) { main { --sky-h: max(900px, 56.25vw);
  background: linear-gradient(180deg, rgba(234, 245, 253, 0) calc(var(--sky-h) - 280px), #eaf5fd var(--sky-h)) 0 0 / 100% var(--sky-h) no-repeat,
    url(/assets/brand/sky-bg.webp) 50% 0 / max(1600px, 100%) auto no-repeat, linear-gradient(180deg, #eaf5fd 0, #e1f1fd 100%); } }
h1, h2 { font-family: var(--font-d); font-weight: 400; letter-spacing: 0; }

/* ---------- parchment page: one illustrated surface (deckled edge + paper), never a box per section */
.sheet-sec { padding: 10px 8px 56px; }
@media (min-width: 768px) { .sheet-sec { padding: 14px 20px 72px; } }
.page { position: relative; border: 22px solid transparent; border-image: url(/assets/brand/sheet.webp) 60 / 22px / 0 round;
  background: url(/assets/brand/paper.webp) 0 0 / 480px auto repeat; background-clip: padding-box; padding: 14px 12px 18px; color: var(--ink); }
@media (min-width: 768px) { .page { border-width: 34px; border-image-width: 34px; padding: 18px 28px 26px; } }
.wrap.page { max-width: 1240px; }
.lift { filter: drop-shadow(0 12px 16px rgba(28, 42, 77, .16)); }
.page .hint, .page .muted { color: #5d6478; }
.page-night { background: #1f2a55 url(/assets/brand/night-m.webp) 50% 0 / cover no-repeat; background-clip: padding-box; color: #eef2ff; }
@media (min-width: 900px) { .page-night { background-image: url(/assets/brand/night.webp); } }
.page-night h2, .page-night h3 { color: #fff; }

/* ---------- ribbon heading (9-slice of the drawn ribbon; the middle stretches with the text) */
.ribbon { display: inline-block; max-width: 100%; border-style: solid; border-color: transparent; border-width: 10px 62px 10px;
  border-image: url(/assets/brand/ribbon.webp) 30 215 29 215 fill / 10px 62px 10px; padding: 2px 2px 4px;
  font: 400 clamp(16px, 2.4vw, 26px)/1.5 var(--font-d); color: #6e0d39; margin: 0 0 16px; text-align: center; white-space: nowrap; }
.ribbon .nb { display: inline; }
@media (max-width: 599px) { .ribbon { border-width: 8px 46px 8px; border-image-width: 8px 46px 8px; } }
@media (min-width: 1000px) { .spread .ribbon { font-size: clamp(18px, 1.75vw, 24px); } }
.ribbon-wrap { text-align: center; }
.note { font: 500 16px/1.55 var(--font-n); color: #6b4a2b; }
.page-night .note { color: #ffe9b8; }

/* ---------- RO window component */
.ro-win { position: relative; display: flex; flex-direction: column; background: #fff; border: var(--ro-frame-w) solid #7fa8cf;
  border-image: var(--ro-frame) var(--ro-frame-slice) / var(--ro-frame-w) stretch; border-radius: 5px; overflow: hidden;
  box-shadow: 0 8px 18px rgba(28, 42, 77, .18), 0 1px 0 rgba(255, 255, 255, .7) inset; min-width: 0; }
.ro-win-bar { display: flex; align-items: center; gap: 6px; height: var(--ro-bar-h); padding: 0 5px 0 8px; flex: none;
  background: var(--ro-bar-l) left top / auto 100% no-repeat, var(--ro-bar-r) right top / auto 100% no-repeat,
    var(--ro-bar-m) left top / auto 100% repeat-x, linear-gradient(180deg, #f3f9fe 0%, #cfe5f7 55%, #b5d6f1 100%); }
.ro-win-title { font: 600 12px/1 var(--font-b); color: #1d3b5c; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-win-btns { margin-left: auto; display: flex; gap: 3px; }
.ro-win-btns i { display: grid; place-items: center; width: var(--ro-btn-size); height: var(--ro-btn-size); border: 1px solid #6d93b8; border-radius: 2px;
  font: 700 10px/1 var(--font-b); font-style: normal; color: #2f557c; background: linear-gradient(#ffffff, #d6e8f7); }
.ro-win-btns .x::before { content: var(--ro-glyph-x); }
.ro-win-btns .m::before { content: var(--ro-glyph-m); }
.ro-win-btns .x { background: var(--ro-btn-close) center / 100% 100% no-repeat, linear-gradient(#ffffff, #d6e8f7); }
.ro-win-btns .m { background: var(--ro-btn-min) center / 100% 100% no-repeat, linear-gradient(#ffffff, #d6e8f7); }
.ro-win-body { padding: 12px 14px; background: var(--ro-body) 0 0 repeat, #fff; flex: 1; min-width: 0; }
.ro-win-foot { padding: 6px 10px; background: linear-gradient(#f3f9fe, #dcecf9); font-size: 13px; display: flex; justify-content: flex-end; gap: 6px; }
/* status-window rows (label left, value right) */
.ro-stat { margin: 0; display: grid; gap: 2px; }
.ro-stat div { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 5px 2px; }
.ro-stat div:nth-child(odd) { background: #f1f7fd; }
.ro-stat dt { font: 500 14px/1.3 var(--font-b); color: #36506e; }
.ro-stat dd { margin: 0; font: 700 15px/1.3 var(--font-b); color: var(--rasp); text-align: right; }
.ro-stat dd small { display: block; font: 400 12px/1.3 var(--font-b); color: #66728d; }
/* inventory window grid */
.ro-inv { display: grid; grid-template-columns: repeat(6, 40px); gap: 4px; justify-content: start; }
.ro-inv a { display: grid; place-items: center; width: 40px; height: 40px; background: #eef5fc; border: 1px solid #c9dcee; border-radius: 3px; }
.ro-inv a:hover { background: #fff1f7; border-color: var(--pink-300); }
.ro-inv img { width: 24px; height: 24px; image-rendering: pixelated; }
/* NPC dialog variant */
.ro-npc .ro-win-body { font-size: 15px; }
.item-win { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; }
.item-win img { width: 48px; height: 48px; image-rendering: pixelated; background: #eef5fc; border: 1px solid #c9dcee; border-radius: 3px; padding: 4px; }
.ro-chat .ro-win-body { background: var(--ro-body) 0 0 repeat, #fbfdff; }
.ro-chat .cmd:last-child { margin-bottom: 0; }
.ro-npc .who { display: block; font: 700 14px/1.4 var(--font-b); color: #1d3b5c; margin-bottom: 4px; }
.ro-btn { display: inline-grid; place-items: center; min-width: 64px; height: 24px; padding: 0 10px; border: 1px solid #6d93b8; border-radius: 3px;
  background: var(--ro-npc-next) center / 100% 100% no-repeat, linear-gradient(#ffffff, #d6e8f7); font: 600 12px/1 var(--font-b); color: #1d3b5c; text-decoration: none; }
.ro-btn:hover { color: var(--rasp); }

/* ---------- home: hero book */
.hb { position: relative; padding-top: 18px; padding-bottom: 6px; overflow-x: clip; }
.book { position: relative; }
.book-art { display: none; }
.book-l { position: relative; }
.book-l .hero-logo { margin: 0 0 12px; line-height: 0; }
.book-l .hero-logo img { width: min(460px, 100%); filter: drop-shadow(0 4px 8px rgba(28, 42, 77, .16)); }
.hero-lead { font: 500 clamp(17px, 2vw, 20px)/1.65 var(--font-n); color: #5a3a20; margin: 0 0 22px; max-width: 30ch; }
.book-r { position: relative; display: grid; justify-items: center; margin-top: 4px; }
.book-r .mascot { width: min(78vw, 360px); filter: drop-shadow(0 16px 18px rgba(28, 42, 77, .22)); }
.orn { position: absolute; pointer-events: none; height: auto; }
.hb .airship { width: 120px; right: 4%; top: 0; }
.hb .stars { width: 54px; left: 2%; top: -4px; }
@media (max-width: 899px) { .book { border: 22px solid transparent; border-image: url(/assets/brand/sheet.webp) 60 / 22px / 0 round;
  background: url(/assets/brand/paper.webp) 0 0 / 480px auto repeat; background-clip: padding-box; padding: 16px 12px 6px; }
  .hb .airship { width: 84px; top: -6px; right: 2%; } }
@media (min-width: 900px) {
  .hb { padding-top: 26px; }
  .book { aspect-ratio: 1521 / 819; max-width: 1180px; margin: 0 auto; }
  .book-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(28, 42, 77, .2)); }
  .book-l { position: absolute; left: 9%; top: 12%; width: 37%; }
  .book-r { position: absolute; right: 4%; bottom: 10%; width: 44%; margin: 0; }
  .book-r .mascot { width: 100%; max-width: 440px; margin-bottom: -6%; }
  .hb .airship { width: 150px; right: 1%; top: -8px; }
  .hb .stars { left: 7%; top: 6%; width: 62px; }
}

/* ---------- home: spread (two pages side by side) */
.spread { display: grid; gap: 18px; }
@media (min-width: 1000px) { .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; } .spread .page { height: 100%; } }
.facts { display: grid; gap: 16px; align-items: start; }
@media (min-width: 560px) { .facts { grid-template-columns: 150px minmax(0, 1fr); } }
.facts .wink { width: 150px; justify-self: center; }
.facts .note { text-align: center; margin: 4px 0 0; }
.rules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px 22px; }
@media (min-width: 560px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules b { display: block; font: 700 15px/1.4 var(--font-b); color: #6e0d39; }
.rules span { color: var(--ink-2); font-size: 14.5px; }
.quill { width: 64px; right: 6px; bottom: 4px; opacity: .95; }
@media (max-width: 999px) { .quill { display: none; } }

/* mini world map made of the real minimaps (until --ro-worldmap arrives) */
.ro-worldmap { position: relative; margin: 0; }
.spread > .page { min-width: 0; }
.wmap { --mt: min(34px, calc((100vw - 124px) / 11 - 2px)); position: relative; display: grid; gap: 2px; padding: 6px; background: #8fc6e8; border-radius: 3px; width: max-content; max-width: 100%; overflow: hidden; }
.wmap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wmap .t { position: relative; width: var(--mt, 34px); height: var(--mt, 34px); }
.wmap .t.town::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(255, 79, 163, .9); border-radius: 2px; }
.wmap .lbl { position: absolute; z-index: 2; transform: translate(-50%, -115%); white-space: nowrap; font: 700 11px/1 var(--font-b); color: #5a3a20;
  background: #fff8e8; padding: 3px 6px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); pointer-events: none; }
.wmap .mob { position: absolute; z-index: 1; transform: translate(-50%, -80%); image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.ro-worldmap[data-real] .wmap { background: var(--ro-worldmap) center / cover no-repeat; }
.gamedata { display: grid; gap: 16px; align-items: start; }
.gamedata .ro-win { justify-self: start; }
.compass { width: 74px; right: 4px; top: -6px; }
.datalinks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px 18px; }
@media (min-width: 560px) { .datalinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.datalinks a { font: 700 15px/1.35 var(--font-b); text-decoration: none; color: var(--rasp); }
.datalinks a:hover { text-decoration: underline; }
.datalinks small { display: block; font: 400 13.5px/1.4 var(--font-b); color: var(--ink-2); }

/* ---------- home: travel path (4 steps) */
.trip { display: grid; gap: 18px; align-items: center; }
@media (min-width: 1000px) { .trip { grid-template-columns: 220px minmax(0, 1fr); } }
.trip .guide-m { width: 200px; justify-self: center; }
.path { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.path li { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.path .vig { position: relative; width: 84px; }
.path .vig img { width: 84px; height: 84px; display: block; }
.path .vig b { position: absolute; left: -4px; top: -4px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--rasp); color: #fff; font: 700 14px/1 var(--font-b); box-shadow: 0 0 0 3px #fff8e8; }
.path strong { display: block; font: 700 16px/1.35 var(--font-b); color: #6e0d39; }
.path span { color: var(--ink-2); font-size: 14.5px; }
@media (min-width: 1000px) {
  .path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 8px;
    background: radial-gradient(circle, #b08356 2px, transparent 2.6px) 0 64px / 14px 14px repeat-x; }
  .path li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .path .vig, .path .vig img { width: 128px; height: 128px; }
}
.trip-cta { margin-top: 20px; }

/* ---------- home: MVP cards on the night page */
.slide { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: thin; }
.slide > * { scroll-snap-align: start; }
@media (max-width: 599px) { .slide { grid-auto-columns: 44%; } }
.mvp { display: grid; grid-template-rows: 140px auto; gap: 8px; padding: 12px; border-radius: 8px; text-decoration: none; color: #3b2a1e;
  background: url(/assets/brand/paper.webp) 0 0 / 300px auto; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.mvp:hover { transform: translateY(-3px); color: #3b2a1e; }
.mvp .pic { display: grid; place-items: end center; }
.mvp img { image-rendering: pixelated; max-height: 140px; width: auto; }
.mvp b { display: block; font: 700 15px/1.3 var(--font-b); color: #6e0d39; }
.mvp small { color: #6b5a48; font-size: 12.5px; }

/* ---------- home: jobs */
.jobs-h { font: 700 15px/1.4 var(--font-b); color: #6b4a2b; margin: 18px 0 10px; }
.jobpills { display: flex; flex-wrap: wrap; gap: 8px; }
.jobpill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 9px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .72); border: 1.5px solid #b89671; color: var(--ink); text-decoration: none; font: 600 14.5px/1.2 var(--font-b); }
.jobpill:hover { background: #fff; color: var(--rasp); }
.jobpill img { width: 26px; height: 26px; image-rendering: pixelated; }
.jobpill small { color: #7a6a5a; font: 400 12.5px/1 var(--font-b); }
.sign { width: 84px; right: 14px; top: 6px; }
@media (max-width: 999px) { .sign { display: none; } }
.pg-gap { height: 18px; }
@media (max-width: 899px) { .book-r .mascot { width: min(60vw, 250px); } }
@media (max-width: 559px) {
  .facts > div:first-child { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .facts .wink { width: 104px; } .facts .note { text-align: left; margin: 0; }
  .compass { display: none; }
}
@media (max-width: 999px) { .trip .guide-m { width: 140px; } }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--rasp); color: #ffe3ef; padding: 44px 0 32px; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; color: #fff; }
.foot-in { display: grid; gap: 28px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .foot-in { grid-template-columns: 1.3fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }
.foot-brand { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.foot-brand img { width: 64px; height: 64px; }
.foot-brand p { margin: 0; font-size: 14px; }
.foot h4 { color: #fff; font-size: 16px; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.foot-note { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: 13px; color: #ffd0e3; }

/* ------------------------------------------------------------------ page head (sub pages) */
.phead { position: relative; background: var(--sky-100) url(/assets/brand/sky-bg-m.webp) 50% 30% / cover no-repeat; overflow: hidden; }
@media (min-width: 900px) { .phead { background-image: url(/assets/brand/sky-bg.webp); } }
.phead-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, .25) 100%); }
.phead-in { position: relative; display: grid; gap: 12px; padding-top: 28px; padding-bottom: 22px; }
@media (min-width: 768px) { .phead-in { grid-template-columns: 1fr auto; align-items: end; min-height: 210px; padding-top: 36px; } }
.phead h1 { margin: 0 0 6px; }
.phead h1 small { font-size: .55em; color: var(--ink-2); font-weight: 400; }
.phead p { color: var(--ink-2); margin: 0; max-width: 64ch; }
.crumbs { font: 400 14px/1.4 var(--font-b); color: var(--ink-3); margin: 0 0 8px; }
.crumbs a { color: var(--ink-2); }
.phead-art { line-height: 0; justify-self: start; }
@media (min-width: 768px) { .phead-art { justify-self: end; } }
.phead-art img { max-height: 210px; width: auto; filter: drop-shadow(0 10px 14px rgba(28, 42, 77, .18)); }
.phead-art.mascot img { max-height: 190px; margin-bottom: -26px; }
@media (max-width: 767px) { .phead-art.mascot { display: none; } .phead-art img { max-height: 150px; } }
@media (max-width: 767px) { .phead-art.disc { width: 92px !important; height: 92px !important; } .phead-art.disc img { width: 48px !important; height: 48px !important; } }
.phead-art.disc { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 255, 255, .86); box-shadow: var(--shadow); }
.phead-art.disc img { width: 72px; height: 72px; image-rendering: pixelated; filter: none; }
.phead-art.mapimg img { width: 170px; height: 170px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-lg); filter: none; }
.idline { font: 400 14px/1.4 var(--font-b); color: var(--ink-3); margin: 0 0 10px; }

/* tab strip (sub navigation): solid fill for the current one */
.strip-box { position: relative; }
.strip { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-behavior: smooth; }
.strip::-webkit-scrollbar { display: none; }
.strip a, .strip button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .92); color: var(--ink); text-decoration: none; font: 500 15px/1.2 var(--font-h); border: 1.5px solid var(--border); cursor: pointer; white-space: nowrap; }
.strip a:hover, .strip button:hover { background: var(--sky-50); color: var(--ink); }
.strip [aria-current], .strip [aria-selected="true"] { background: var(--rasp); color: #fff; border-color: var(--rasp); font-weight: 600; }
.strip [aria-current]:hover, .strip [aria-selected="true"]:hover { background: var(--rasp-700); color: #fff; }
.strip img { width: 24px; height: 24px; image-rendering: pixelated; }
.strip small { font: 500 12px/1 var(--font-b); background: var(--pink-100); color: var(--rasp-700); padding: 3px 7px; border-radius: var(--pill); }
.strip-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--navy); color: #fff; font: 600 18px/1 var(--font-h); cursor: pointer; box-shadow: var(--shadow); z-index: 2; }
.strip-arrow.l { left: -6px; } .strip-arrow.r { right: -6px; }
.strip-arrow[hidden] { display: none; }
.subnav { padding-bottom: 18px; position: relative; }

/* ------------------------------------------------------------------ panels (data pages) */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; min-width: 0; }
.panel > h2, .panel > h3 { font-size: 20px; margin-bottom: 14px; }
.panel h3 small, .panel h2 small { font: 400 14px/1 var(--font-b); color: var(--ink-3); margin-left: 6px; }
.grid2 { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.hint { font-size: 14px; color: var(--ink-3); margin: 12px 0 0; }

/* status window: big numbers, no boxes */
.statwin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin: 0; }
@media (min-width: 700px) { .statwin { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.statwin div { min-width: 0; }
.statwin dt { font: 400 13px/1.4 var(--font-b); color: var(--ink-3); }
.statwin dd { margin: 2px 0 0; font: 500 22px/1.25 var(--font-h); color: var(--ink); overflow-wrap: anywhere; }
.statwin dd em { font-style: normal; font-size: 14px; color: var(--ink-3); font-family: var(--font-b); }
.statwin dd .x2 { display: block; font: 500 13px/1.4 var(--font-b); color: var(--rasp); }
.statwin .gold dd { color: var(--rasp); }
.statwin .wide { grid-column: span 2; }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; font: 500 14px/1 var(--font-h); }
.bars i { display: block; height: 12px; }
.bars s { display: block; height: 12px; min-width: 3px; border-radius: var(--pill); background: linear-gradient(90deg, var(--pink-300), var(--pink)); }
.bars b { text-align: right; font-weight: 500; }

.attr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
@media (min-width: 560px) { .attr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.attr li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.attr b { font: 500 16px/1 var(--font-h); color: var(--ink-2); }
.attr .up b { color: var(--rasp); font-weight: 600; }
.attr .down b, .attr .zero b { color: var(--ink-3); }

/* list rows with a sprite */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rows a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-in);
  text-decoration: none; color: var(--ink); }
.rows a:hover { background: var(--sky-50); color: var(--ink); }
.rows .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--sky-50); overflow: hidden; }
.rows .ico img { image-rendering: pixelated; max-width: 44px; max-height: 44px; width: auto; height: auto; }
.rows .ico.map img { width: 44px; height: 44px; object-fit: cover; image-rendering: auto; }
.rows .nm { min-width: 0; }
.rows .nm b { display: block; font: 500 15px/1.35 var(--font-h); }
.rows .nm small { display: block; color: var(--ink-3); font-size: 13px; }
.rows .rate { text-align: right; font: 500 15px/1.3 var(--font-h); white-space: nowrap; }
.rows .rate small { display: block; font: 400 12px/1.3 var(--font-b); color: var(--ink-3); }
.rows .amt { font: 500 16px/1 var(--font-h); color: var(--ink-2); }
.rows .tag { font: 600 11px/1 var(--font-b); background: var(--rasp); color: #fff; border-radius: var(--pill); padding: 3px 7px; margin-left: 6px; vertical-align: 2px; }
.sub-h { font: 500 16px/1.4 var(--font-h); color: var(--rasp); margin: 18px 0 8px; }
.desc { white-space: normal; color: var(--ink-2); margin: 0; }

/* ------------------------------------------------------------------ tables + filters */
.tools { display: grid; gap: 12px; margin-bottom: 16px; }
.tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.tools > .field:first-child, .tools > .checks { grid-column: 1 / -1; }
.checks { display: flex; flex-wrap: wrap; gap: 0 20px; align-self: end; }
@media (min-width: 760px) { .tools { grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
  .tools > .field:first-child, .tools > .checks { grid-column: auto; } }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font: 500 14px/1.3 var(--font-h); color: var(--ink-2); }
.input, select.input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--r-in); border: 1.5px solid var(--border); background: #fff;
  color: var(--ink); font: 400 16px/1.2 var(--font-b); }
.input::placeholder { color: #6e7a93; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; font: 500 15px/1.2 var(--font-h); color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--rasp); }
.count { font: 400 15px/1.4 var(--font-b); color: var(--ink-2); margin: 0 0 12px; }
.count b { color: var(--ink); font-weight: 600; }
.tbl-wrap { overflow-x: auto; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.tbl { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font: 500 13px/1.3 var(--font-h); color: var(--ink-2); background: var(--sky-100); padding: 11px 12px; white-space: nowrap; position: sticky; top: 0; }
.tbl td { padding: 8px 12px; vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:nth-child(even) td { background: #f6fbff; }
.tbl tbody tr:hover td { background: var(--pink-50); }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .id { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tbl .thumb { width: 56px; text-align: center; }
.tbl .thumb img { image-rendering: pixelated; max-height: 44px; max-width: 48px; width: auto; vertical-align: middle; }
.tbl .thumb.map img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; image-rendering: auto; }
.tbl .nm a { font: 500 15px/1.3 var(--font-h); text-decoration: none; color: var(--ink); }
.tbl .nm a:hover { color: var(--rasp); text-decoration: underline; }
.tbl .nm small { display: block; color: var(--ink-3); font: 400 12px/1.3 var(--font-b); }
.th-sort { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.th-sort:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 4px; }
.th-sort i { font-style: normal; font-size: 10px; color: var(--ink-3); }
th[aria-sort] .th-sort i { color: var(--rasp); }
.tbl tr[hidden] { display: none; }
@media (max-width: 899px) { .tbl .lo { display: none; } }
.empty { padding: 28px; text-align: center; color: var(--ink-3); }
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.pager a, .pager span { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: var(--pill);
  background: #fff; border: 1.5px solid var(--border); text-decoration: none; color: var(--ink); font: 500 15px/1 var(--font-h); }
.pager [aria-current] { background: var(--rasp); border-color: var(--rasp); color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ guides (content from the old pages) */
.guide-body { display: grid; gap: 18px; }
.guide-body > *, .strip-box, .grid2 > * { min-width: 0; }
.guide-body .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; min-width: 0; }
.guide-body h2 { font-size: 24px; margin: 18px 0 10px; }
.guide-body ul, .guide-body ol { padding-left: 1.3em; margin: 0 0 1em; }
.guide-body li { margin: 4px 0; }
.guide-body .danger { color: #8f1238; font-weight: 500; }
.guide-body table { font-size: 15px; }
.prose { max-width: 75ch; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 6px 0; }

/* jobs hub */
.jobhub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .jobhub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .jobhub { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.jobcard { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; padding: 16px; border-radius: var(--r); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.jobcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--ink); }
.jobcard img { grid-row: span 2; width: 40px; height: 40px; image-rendering: pixelated; }
.jobcard b { font: 500 17px/1.2 var(--font-h); }
.jobcard small { color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.jobcard .meta { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.jobcard .meta em { font-style: normal; background: var(--pink-100); color: var(--rasp-700); border-radius: var(--pill); padding: 2px 8px; margin-left: 4px; white-space: nowrap; }
.tier { font: 500 18px/1.3 var(--font-h); margin: 26px 0 12px; }
.tier:first-child { margin-top: 0; }

/* job page */
.js .jobpanel { display: none; }
.js .jobpanel.on { display: block; }
.jobpanel + .jobpanel { margin-top: 18px; }
.js .jobpanel + .jobpanel { margin-top: 0; }
.jobpanel h3 { margin-top: 6px; }
.jg-steps { counter-reset: js; list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.jg-steps li { counter-increment: js; position: relative; padding-left: 46px; min-height: 32px; margin: 0 !important; }
.jg-steps li::before { content: counter(js); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pink-100); color: var(--rasp-700); font: 600 15px/1 var(--font-h); }
.jg-req li { margin: 6px 0; }
.jobpanel-maps { display: grid; gap: 18px; }
@media (min-width: 860px) { .jobpanel-maps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mm { margin: 0 0 12px; }
.mm-img { position: relative; line-height: 0; border-radius: 12px; overflow: hidden; max-width: 420px; }
.mm-img img { width: 100%; }
.mm .pin { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--rasp); color: #fff;
  font: 600 13px/24px var(--font-h); text-align: center; box-shadow: 0 0 0 2px #fff; }
.mm figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.jg-pins { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.jg-pins li { position: relative; padding-left: 36px; min-height: 26px; }
.jg-pins b { position: absolute; left: 0; top: 2px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rasp); color: #fff; font: 600 13px/1 var(--font-h); }
.jg-pins small, .jg-more small { display: block; color: var(--ink-3); }
.jobquiz-find { max-width: 420px; margin: 4px 0 16px; }
.jobquiz-stage { margin-top: 18px; }
.jobquiz-rule { color: var(--ink-2); }
.jobquiz-set summary { cursor: pointer; font: 500 16px/1.4 var(--font-h); padding: 6px 0; }
.jobquiz-q { margin: 14px 0 !important; }
.jobquiz-q p { margin: 0 0 6px; font-weight: 500; }
.jobquiz-q ul { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.jobquiz-q ul li { margin: 0 !important; padding: 3px 12px; border-radius: var(--pill); background: var(--sky-50); color: var(--ink-2); font-size: 15px; }
.jobquiz-q ul li.ok { background: var(--rasp); color: #fff; font-weight: 600; }
.jobquiz-q ul li.ok::after { content: " (คำตอบ)"; font-weight: 400; font-size: 13px; }

/* refine + skills guide */
.rf-item { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.rf-item img { width: 24px; height: 24px; image-rendering: pixelated; }
.rf-safe { display: inline-block; background: var(--sky-100); padding: 1px 10px; border-radius: var(--pill); font-weight: 600; }
.rf-rate { display: inline-block; min-width: 56px; text-align: center; padding: 2px 8px; border-radius: var(--pill); font: 500 14px/1.5 var(--font-h); background: var(--pink-50); color: var(--rasp-700); }
.rf-rate.safe { background: #dcf3e1; color: #1d5d2a; }
.rf-rate.r100 { background: #dcf3e1; color: #1d5d2a; }
.rf-rate.r60 { background: #fff1bf; color: #6b5300; }
.rf-rate.r40 { background: #ffe3d6; color: #8a2d06; }
.rf-rate.r20, .rf-rate.r10 { background: var(--rasp); color: #fff; }
.rf-chain, .rf-chain-demo { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.rf-chain-demo { display: inline-block; background: var(--sky-100); color: var(--ink); padding: 2px 10px; border-radius: var(--pill); font-size: 13px; margin: 0; }
.rf-explain { display: grid; gap: 14px; margin-bottom: 16px; }
.rf-ex-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
.rf-lv { font: 600 15px/1 var(--font-h); }
.rf-h { margin-top: 12px; }
.rf-list { list-style: none; padding: 0 !important; }
.qs-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .qs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.qs-head { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.qs-head img { width: 36px; height: 36px; image-rendering: pixelated; }
.qs-head h3 { margin: 0; }
.qs-req { font-size: 14px; color: var(--ink-2); }
.qs-sec { font: 500 15px/1.3 var(--font-h); color: var(--rasp); margin: 14px 0 6px; }
.qs-items { list-style: none; padding: 0 !important; display: grid; gap: 6px; }
.qs-items li { display: flex; justify-content: space-between; gap: 10px; }
.qs-desc summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.qs-note { font-size: 14px; color: #8f1238; margin-top: 10px; }
.qs-job { margin-top: 26px !important; }
.guide-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-jump a { display: inline-flex; gap: 6px; padding: 8px 16px; border-radius: var(--pill); background: #fff; border: 1.5px solid var(--border); text-decoration: none; color: var(--ink); font: 500 15px/1.2 var(--font-h); }
.guide-jump a:hover { background: var(--pink-50); }

/* systems guide (our own) */
.sys { display: block; }
.sys-sec h2 { font-size: 24px; }
.factlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.factlist li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
@media (max-width: 599px) { .factlist li { grid-template-columns: 1fr; gap: 2px; } }
.factlist b { font: 500 17px/1.4 var(--font-h); color: var(--rasp); }
.cmd { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; margin: 0 0 12px; }
.cmd code { font-size: 16px; padding: 4px 12px; }
.notice { background: var(--pink-100); border-radius: var(--r); padding: 22px; display: grid; gap: 14px; align-items: center; }
@media (min-width: 700px) { .notice { grid-template-columns: 120px 1fr; } }
.notice img { width: 120px; }
.notice h2 { font-size: 22px; margin: 0 0 6px; }
.notice p { margin: 0; color: var(--ink-2); }

/* faq */
.faq { display: grid; gap: 10px; }
@media (min-width: 900px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; font: 500 16px/1.5 var(--font-h); }
.faq details p { margin: 10px 0 0; color: var(--ink-2); }

/* ------------------------------------------------------------------ world map */
.wg { --wt: 64px; position: relative; }
.wg-bar { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 900px) { .wg-bar { grid-template-columns: minmax(240px, 2fr) 1fr auto auto; align-items: end; } }
.wg-zoom { display: inline-flex; gap: 6px; }
.wg-zoom button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; font: 600 20px/1 var(--font-h); color: var(--ink); cursor: pointer; }
.wg-scroll { overflow: auto; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px; }
.wg-scroll.main { max-height: 72vh; background: #e7f4fd; }
.wg-grid { display: grid; gap: 3px; width: max-content; }
.wg-tile { position: relative; width: var(--wt); height: var(--wt); padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; background: #cfe3f2; font: inherit; color: inherit; }
.wg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-tile.is-town { background: var(--pink-100); }
.wg-tile .wg-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 3px; font: 500 10px/1.15 var(--font-b); color: #fff; background: rgba(28, 42, 77, .72); text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wg-tile .wg-badge { position: absolute; left: 3px; top: 3px; font: 600 9px/1 var(--font-b); font-style: normal; background: rgba(255, 255, 255, .9); color: var(--ink); padding: 2px 4px; border-radius: 4px; }
.wg-tile .wg-boss { position: absolute; right: 3px; top: 3px; font: 600 9px/1 var(--font-b); font-style: normal; background: var(--rasp); color: #fff; padding: 2px 4px; border-radius: 4px; }
.wg-tile.is-town .wg-name { background: rgba(184, 20, 91, .86); }
.wg-tile.dim { opacity: .22; }
.wg-tile.hit, .wg-tile.on { box-shadow: 0 0 0 3px var(--pink), 0 0 0 5px #fff; z-index: 1; }
.wg-h { font-size: 20px; margin: 30px 0 4px; }
.wg-h small { display: block; font: 400 14px/1.4 var(--font-b); color: var(--ink-3); }
.wg-islands { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.wg-islands .wg-scroll { padding: 6px; }
.wg-under { display: grid; gap: 14px; margin-top: 12px; }
@media (min-width: 900px) { .wg-under { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wg-under section { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); }
.wg-under h4 { font-size: 15px; margin-bottom: 8px; color: var(--ink-2); }
.wg-list { display: flex; flex-wrap: wrap; gap: 4px; }
.wg-drawer { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; max-height: 72vh; overflow: auto; background: #fff; border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(28, 42, 77, .28); padding: 0 18px 22px; }
@media (min-width: 900px) { .wg-drawer { left: auto; top: 80px; bottom: 16px; right: 16px; width: 400px; max-height: none; border-radius: var(--r); } }
.wg-drawer[hidden] { display: none; }
.wg-drawer header { position: sticky; top: 0; background: #fff; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 0 10px; z-index: 1; }
.wg-drawer header b { display: block; font: 500 19px/1.3 var(--font-h); }
.wg-drawer header code { font-size: 13px; }
.wg-close { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; font: 500 15px/1 var(--font-h); cursor: pointer; color: var(--ink); flex: none; }
.wg-pic-map { width: 100%; max-width: 260px; border-radius: 12px; display: block; margin: 0 0 12px; }
.wg-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wg-sum small { display: block; color: var(--ink-3); font-size: 12px; }
.wg-sum b { font: 500 18px/1.2 var(--font-h); }
.wg-rows .hit a { background: var(--pink-50); }

/* ------------------------------------------------------------------ 404 */
.lost { display: grid; gap: 20px; align-items: center; justify-items: start; }
@media (min-width: 768px) { .lost { grid-template-columns: 280px 1fr; } }
.lost img { width: 240px; }


/* ================================================================== inner pages on parchment */
.band-sky, .band-pink { background: transparent; }
.phead, .phead:is(*) { background: none; }
.phead-veil { background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 88%); }
.phead h1 { color: #3a1830; }
.page .panel { background: transparent; border: 0; box-shadow: none; padding: 4px 0; border-radius: 0; }
.page .grid2 { gap: 26px 34px; }
.page .tbl-wrap { background: rgba(255, 255, 255, .66); border: 1px solid rgba(122, 86, 50, .26); box-shadow: none; }
.page .tbl tbody tr:nth-child(even) td { background: rgba(255, 248, 232, .7); }
.page .tbl tbody tr:hover td { background: #fff1f7; }
.page .guide-body .card, .guide-body.page .card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.page .rows a:hover { background: rgba(255, 255, 255, .7); }
.page .rows .ico { background: rgba(255, 255, 255, .75); }
.page .faq details { background: rgba(255, 255, 255, .62); border: 1px solid rgba(122, 86, 50, .26); box-shadow: none; }
.page .jobcard { background: rgba(255, 255, 255, .72); border: 1px solid rgba(122, 86, 50, .24); box-shadow: none; }
.page .jobcard:hover { box-shadow: 0 6px 14px rgba(91, 61, 34, .18); }
.page .tier, .page h2.tier { font-family: var(--font-d); font-weight: 400; color: #6e0d39; }
.page h2 { color: #3a1830; }
.page .input, .page select.input { background: rgba(255, 255, 255, .9); }
.page code { background: rgba(255, 255, 255, .8); }
.page .chip { box-shadow: 0 0 0 1px rgba(122, 86, 50, .12); }
.page .wg-under section { background: transparent; border: 0; box-shadow: none; padding: 0; }
.page .wg-islands .wg-scroll { box-shadow: none; }
.page .ro-win + .grid2, .page .ro-win + h2 { margin-top: 26px; }
.sec + .sec { margin-top: 34px; }
.sec h2 { font-size: clamp(22px, 3vw, 28px); }
.ro-win-btns button { display: grid; place-items: center; width: calc(var(--ro-btn-size) + 4px); height: calc(var(--ro-btn-size) + 4px); padding: 0; border: 1px solid #6d93b8;
  border-radius: 2px; font: 700 11px/1 var(--font-b); color: #2f557c; cursor: pointer; background: var(--ro-btn-close) center / 100% 100% no-repeat, linear-gradient(#ffffff, #d6e8f7); }
.wg-drawer.ro-win { padding: 0; position: fixed; }
.wg-drawer .ro-win-bar { position: sticky; top: 0; z-index: 1; height: 34px; }
.wg-drawer .ro-win-title { font-size: 14px; }
.wg-drawer code { font-size: 11px; background: rgba(255, 255, 255, .7); }
.wg-drawer .ro-win-btns button { width: 28px; height: 22px; font-size: 13px; }
.ro-win > .wg-scroll.main { border: 0; border-radius: 0; box-shadow: none; max-height: 70vh; }
.notice-npc { display: grid; gap: 16px; align-items: center; margin-bottom: 34px; }
@media (min-width: 700px) { .notice-npc { grid-template-columns: 130px minmax(0, 1fr); } }
.notice-npc > img { width: 130px; justify-self: center; }


/* ---------- /register/: the sign-up form lives in one RO window (.ro-login) */
.reg-wrap { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .reg-wrap { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 36px; } }
.ro-login { max-width: 560px; width: 100%; }
.ro-login .ro-win-body { padding: 18px 18px 20px; }
.reg { display: grid; gap: 16px; }
.reg fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.reg legend { padding: 0; margin-bottom: 6px; }
.reg .field label, .reg .lbl { color: #1d3b5c; }
.fhint { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #4e5b78; }
.radios { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.radios .check { min-height: 40px; }
.dob { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 8px; }
.dob select.input { padding: 0 4px 0 10px; }
@media (max-width: 599px) { .dob { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr) minmax(0, 1.1fr); gap: 6px; } .dob select.input { font-size: 15px; padding: 0 2px 0 8px; } }
.err { margin: 4px 0 0; font: 600 14px/1.45 var(--font-b); color: #a3123f; }
.reg .input[aria-invalid="true"], .reg select.input[aria-invalid="true"] { border-color: #c0123e; background: #fff6f8; }
.form-err { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--pink-100); color: #8f1238; font: 600 14.5px/1.5 var(--font-b); }
.reg-actions { display: flex; justify-content: flex-end; }
.reg-actions .btn[disabled] { opacity: .65; cursor: wait; }
.reg-done { display: grid; gap: 14px; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.reg-done img { width: 96px; }
.reg-done:focus { outline: none; }
.reg-done .who { display: block; font: 700 14px/1.4 var(--font-b); color: #1d3b5c; margin-bottom: 4px; }
.reg-done b { color: var(--rasp); }
.reg-done .btns { margin-top: 12px; }
.reg-side { display: grid; gap: 10px; justify-items: center; text-align: center; }
.reg-side img { width: 190px; }
.reg-side .rules { text-align: left; width: 100%; max-width: 380px; }
@media (max-width: 899px) { .reg-side img { width: 120px; } }

/* ------------------------------------------------------------------ motion (only when the visitor allows it) */
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: hop .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
  .hero-copy { animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
  .js .rv.in { opacity: 1; transform: none; }
  @keyframes hop { 0% { opacity: 0; transform: translateY(40px) scale(.96); } 60% { opacity: 1; transform: translateY(-8px); } 100% { transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}