/* Brand Book v4 (AVALON Artisan Gallery, Edition 02, 2026): Ocean Blue and Pearl White lead,
   Deep Sea for text, Shell Taupe and Mist Silver as neutrals, accents under 10 percent */
@font-face { font-family: "Nourd"; src: url("assets/fonts/nourd_medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nourd"; src: url("assets/fonts/nourd_semi_bold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ocean: #175D89;       /* Ocean Blue: signature colour, headings, buttons */
  --deep: #102F43;        /* Deep Sea: main text */
  --pearl: #F7F5EF;       /* Pearl White: main surface */
  --taupe: #827568;       /* Shell Taupe */
  --taupe-dark: #6B6056;  /* Shell Taupe one step darker so small text passes 4.5:1 */
  --mist: #C8D2D8;        /* Mist Silver: lines, soft fills */
  --sea-glass: #AED4C8;   /* accent */
  --blush-pearl: #E8BFCE; /* accent */
  --sea-1: #E9EEEE;
  --sea-2: #C8D8DF;
  --sea-3: #5F97B5;

  /* older names still used below */
  --cream: var(--pearl);
  --aqua: var(--sea-2);
  --aqua-2: var(--mist);
  --aqua-deep: var(--ocean);
  --ink: var(--ocean);
  --text: var(--taupe-dark);
  --text-strong: var(--deep);
  --blush: var(--blush-pearl);
  --sand: #EFEDE6;
  /* Nourd for English headlines, Poppins for English content, Noto Sans Thai for Thai
     (Thai headings use Noto Sans Thai 600 until an Opun SemiBold file is supplied) */
  --font-display: "Nourd", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Poppins", "Noto Sans Thai", system-ui, sans-serif;
  --font-cute: var(--font-body);
  --maxw: 560px;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='9' fill='rgba(200,216,223,.45)' stroke='%23175D89' stroke-width='1.6'/%3E%3Ccircle cx='9.5' cy='9.5' r='2.4' fill='white'/%3E%3C/svg%3E") 13 13, auto;
  --cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='11' fill='rgba(232,191,206,.55)' stroke='%23175D89' stroke-width='1.8'/%3E%3Ccircle cx='10.5' cy='10.5' r='2.8' fill='white'/%3E%3Ccircle cx='12' cy='16' r='1.3' fill='%23175D89'/%3E%3Ccircle cx='18' cy='16' r='1.3' fill='%23175D89'/%3E%3Cpath d='M12.5 19.5q2.5 2 5 0' stroke='%23175D89' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 15 15, pointer;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--aqua);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: var(--cursor);
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
button, a, [role="button"] { cursor: var(--cursor-hand); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Ambient layers ---------- */
#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.rays {
  position: absolute; inset: -20% -40%; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(108deg, transparent 0 70px, rgba(255,255,255,.16) 70px 110px, transparent 110px 200px);
  mix-blend-mode: soft-light;
  animation: rays 16s linear infinite;
}
@keyframes rays { from { transform: translateX(-120px); } to { transform: translateX(120px); } }

/* ---------- Full-bleed background ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--aqua); }
.bg .blur {
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; filter: blur(30px) saturate(1.15); opacity: .95;
}
/* depth on tilt (--px/--py run from -1 to 1, set in app.js): the art moves most and the
   opposite way to the text, the bubbles sit in front; scale hides the edges while moving */
.main-wrap { position: absolute; inset: 0; display: block; transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -12px), 0) scale(1.06); will-change: transform; }
.bg .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0) scale(1.06); pointer-events: none; }
.bg.whole .main-wrap { transform: none; }
.screen > .inner, .screen > .gauge, .home-title { translate: calc(var(--px, 0) * 4px) calc(var(--py, 0) * 3px); }
#fx { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); }
.bg .main.swap { opacity: 0; transition: opacity .45s ease; animation: none; }
.bg .main.swap.on { opacity: 1; }
/* portrait screens (phones): the 9:16 art fills the whole screen, no blurred filler */
.bg .main {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  animation: breathe 20s ease-in-out infinite alternate;
  transform-origin: 50% 40%;
}
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.05) translateY(-1%); } }
@media (max-aspect-ratio: 1/1) { .bg .blur { display: none; } }
/* result art has Thai text running almost edge to edge and plain white top and bottom edges,
   so it is shown whole on white: nothing is cropped and there is no blurred filler */
.bg.whole { background: #fff; }
.bg.whole .main { object-fit: contain; }
.bg.whole .blur { display: none; }
/* wide screens (computers) keep the whole 9:16 picture in view with the blurred filler at the sides */
@media (min-aspect-ratio: 1/1) { .bg .main { object-fit: contain; } }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  /* with the 16:9 set in place the art covers the window and the blurred filler is not needed */
  html[data-wide-art] .bg .main { object-fit: cover; }
  html[data-wide-art] .bg .blur { display: none; }
}

/* ---------- Screens ---------- */
#app { position: relative; z-index: 3; }
.screen { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.inner { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* Wave curtain between pages */
.curtain { position: fixed; inset: 0; z-index: 55; pointer-events: none; transform: translateY(105%); }
.curtain svg { position: absolute; top: -78px; left: 0; width: 100%; height: 80px; fill: var(--sea-1); }
.curtain .fill { position: absolute; inset: 0; background: linear-gradient(var(--sea-1), var(--sea-3)); }
.curtain.in { animation: curtainIn .42s cubic-bezier(.4,0,.2,1) forwards; }
.curtain.out { animation: curtainOut .5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes curtainIn { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes curtainOut { from { transform: translateY(0); } to { transform: translateY(-115%); } }

.enter { animation: enter .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 10px 28px;
  border: 2px solid #fff; border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--ink);
  font-family: var(--font-cute); font-size: 17px; line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(16,47,67,.18), inset 0 -3px 0 rgba(23,93,137,.1);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .18s;
}
.pill:hover { transform: translateY(-3px) rotate(-1deg); background: #fff; box-shadow: 0 10px 24px rgba(16,47,67,.24), inset 0 -3px 0 rgba(23,93,137,.1); }
.pill:active { transform: translateY(0) scale(.96); }
.pill:focus-visible, .choice:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.pill.xl { min-height: 60px; font-size: 20px; padding: 12px 40px; }
.pill.serif { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: .01em; }
/* main call to action: filled Ocean Blue so it stands apart from the white buttons */
.pill.primary { background: var(--ocean); border-color: var(--ocean); color: var(--pearl); box-shadow: 0 8px 20px rgba(23,93,137,.32), inset 0 -3px 0 rgba(16,47,67,.25); }
.pill.primary:hover { background: #1B6C9E; box-shadow: 0 12px 26px rgba(23,93,137,.38), inset 0 -3px 0 rgba(16,47,67,.25); }
.pill.primary:focus-visible { outline-color: var(--deep); }
.pill.bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pill.bob:hover { animation-play-state: paused; }
.pill .ic { width: 26px; height: 26px; }
/* brand soul icons are full-colour images with transparent backgrounds */
img.ic, img.marker, img.diver { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }

/* ---------- Depth gauge (progress) ---------- */
.gauge {
  position: sticky; top: 0; z-index: 5;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 10px 16px 6px;
  display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center;
}
.gauge-main { min-width: 0; }
/* back: 44px round target, top left where people look for it */
.back-btn {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid #fff; background: rgba(255,255,255,.92); color: var(--aqua-deep);
  box-shadow: 0 4px 12px rgba(16,47,67,.18);
  cursor: var(--cursor-hand);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s;
}
.back-btn svg { width: 22px; height: 22px; }
.back-btn:hover { background: #fff; transform: translateX(-2px); }
.back-btn:active { transform: scale(.92); }
.back-btn:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.gauge-track { position: relative; height: 34px; }
.gauge-track svg.wave { position: absolute; left: 0; right: 0; top: 12px; width: 100%; height: 12px; overflow: visible; }
.gauge-track .track { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 3; stroke-linecap: round; }
.gauge-track .fill { fill: none; stroke: var(--aqua-deep); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dasharray .7s ease; }
.gauge-track .marker {
  position: absolute; top: 0; width: 34px; height: 34px; margin-left: -17px;
  color: var(--aqua-deep);
  filter: drop-shadow(0 1px 2px rgba(255,255,255,.9));
  transition: left .7s cubic-bezier(.34,1.3,.64,1);
  animation: swim 1.2s ease-in-out infinite alternate;
}
@keyframes swim { from { transform: translateY(-2px) rotate(-6deg); } to { transform: translateY(2px) rotate(6deg); } }
.gauge-label {
  display: block; text-align: center; margin-top: 2px;
  font-family: var(--font-cute); font-size: 13px; color: var(--text-strong);
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255,255,255,.9);
}

/* ---------- Home ---------- */
.home .inner { margin-top: auto; padding-bottom: max(40px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tagline {
  margin: 0; padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  font-family: var(--font-cute); font-size: 15px; color: var(--ink);
}

/* title sits in the open water at the top of the cover art (the new art has no text painted in) */
.home-title {
  position: relative; z-index: 3; margin: 37svh auto 0; padding: 0 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 11vw, 56px); line-height: 1.02; letter-spacing: -.01em;
  color: var(--ocean);
  text-shadow: 0 0 18px rgba(247,245,239,.95), 0 0 4px rgba(247,245,239,.9);
}
.home-title span:first-child { font-size: .62em; font-weight: 500; letter-spacing: .04em; color: var(--sea-3); }
.home-logo { display: block; width: min(64vw, 300px); height: auto; margin-top: 6px; filter: drop-shadow(0 0 12px rgba(247,245,239,.95)); }

/* language: two round flags, top right of the cover and the result page.
   The current language is full colour with an Ocean Blue ring, the other one is faded. */
.corner-lang { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 6; }
.screen.result, .screen.home { position: relative; }
/* collapsed to the current flag; tap it and the other flag slides out to its left */
.lang-switch { display: inline-flex; flex-direction: row-reverse; align-items: center; }
.lang-switch button {
  width: 30px; height: 30px; padding: 2px; border: 0; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.8); cursor: var(--cursor-hand);
  box-shadow: 0 2px 6px rgba(16,47,67,.18);
  transition: width .3s cubic-bezier(.3,.8,.3,1), margin .3s, opacity .25s, transform .3s;
}
.lang-switch button svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.lang-switch button[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--ocean), 0 2px 6px rgba(16,47,67,.18); position: relative; }
/* a larger invisible touch area around the small flag */
.lang-switch button[aria-pressed="true"]::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.lang-switch button[aria-pressed="false"] { width: 0; padding: 0; margin-right: 0; opacity: 0; transform: translateX(14px) scale(.6); pointer-events: none; }
.lang-switch.open button[aria-pressed="false"] { width: 30px; padding: 2px; margin-right: 8px; opacity: 1; transform: none; pointer-events: auto; }
.lang-switch button:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }

/* ---------- Story page ---------- */
.story .inner { margin-top: auto; padding-bottom: max(36px, env(safe-area-inset-bottom)); }
/* no box behind the story text: a soft pearl wash rises from the bottom of the art and the
   words sit in it, with a faint glow so they stay readable over busy watercolour */
.story::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 46svh; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,245,239,0) 0%, rgba(247,245,239,.72) 45%, rgba(247,245,239,.94) 100%);
}
.story.panel-top::after { top: 0; bottom: auto; background: linear-gradient(0deg, rgba(247,245,239,0) 0%, rgba(247,245,239,.72) 45%, rgba(247,245,239,.94) 100%); }
.story-panel {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 8px 8px 4px; background: none; border: 0; box-shadow: none;
}
.story-title { font-weight: 500; text-shadow: 0 0 14px rgba(247,245,239,1), 0 0 4px rgba(247,245,239,1); }
.story-title { margin: 0; text-align: center; font-size: 17px; line-height: 1.8; white-space: pre-line; text-wrap: balance; color: var(--text-strong); }
/* English caption for the Thai line painted into the story art */
.story-title.caption { font-size: 16px; line-height: 1.6; text-wrap: balance; }
.story-panel.has-caption { gap: 10px; padding: 14px 18px 16px; }
.story-title[lang="en"], .q-title:lang(en), .choice:lang(en) { letter-spacing: 0; }

/* compact panel at the top, for art whose subject stands in the lower half (last page: the child on the path) */
.story.panel-top .inner { margin-top: 0; padding-top: 4px; padding-bottom: 0; }
.story.panel-top .story-panel { gap: 10px; padding: 8px 8px 4px; }
.story.panel-top .story-title { font-size: 15px; line-height: 1.65; }
.story.panel-top .pill { min-height: 44px; padding: 8px 22px; font-size: 16px; }

/* ---------- swimming page change ---------- */
#app { position: relative; }
.swim-out-down, .swim-out-up { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; pointer-events: none; }
.swim-in-down, .swim-in-up { position: relative; z-index: 2; }
.swim-out-down { animation: swimOutDown 1.2s cubic-bezier(.45,0,.25,1) forwards; }
.swim-in-down  { animation: swimInDown  1.2s cubic-bezier(.25,.8,.3,1) both; }
.swim-out-up   { animation: swimOutUp   1.2s cubic-bezier(.45,0,.25,1) forwards; }
.swim-in-up    { animation: swimInUp    1.2s cubic-bezier(.25,.8,.3,1) both; }
@keyframes swimOutDown { to { transform: translateY(-28%) scale(1.04); opacity: 0; filter: blur(6px); } }
@keyframes swimInDown  { from { transform: translateY(32%) scale(.98); opacity: 0; filter: blur(6px); } }
@keyframes swimOutUp   { to { transform: translateY(28%) scale(.98); opacity: 0; filter: blur(6px); } }
@keyframes swimInUp    { from { transform: translateY(-32%) scale(1.04); opacity: 0; filter: blur(6px); } }
/* a question asks for an answer before moving on */
.choices.nudge { animation: nudge .45s ease; }
@keyframes nudge { 0%,100% { transform: none; } 30% { transform: translateY(-6px); } 60% { transform: translateY(3px); } }

/* ---------- Question page ---------- */
.question .inner { padding-top: 8px; padding-bottom: max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: flex-end; flex: 1; }
/* no card: the question and answers sit low on the art over the same pearl wash as the story
   pages, so the top half of the picture stays clear */
.question::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 68svh; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,245,239,0) 0%, rgba(247,245,239,.70) 32%, rgba(247,245,239,.93) 100%);
}
.q-card { position: relative; padding: 0 2px; background: none; border: 0; box-shadow: none; }
.q-card .q-badge { display: none; }
.q-card::before { content: none; }
.q-badge {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 50%; color: var(--ink);
  background: #fff; border: 2px solid var(--aqua-2); padding: 8px;
  animation: bob 3s ease-in-out infinite;
}
.q-badge .ic { width: 100%; height: 100%; }
.q-title {
  margin: 0 0 16px; text-align: center;
  font-size: 16.5px; font-weight: 500; line-height: 1.7;
  text-shadow: 0 0 14px rgba(247,245,239,1), 0 0 4px rgba(247,245,239,1);
  color: var(--text-strong); white-space: pre-line; text-wrap: balance;
}
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 12px 16px 12px 14px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 22px;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text-strong);
  font-family: var(--font-body); font-weight: 400; font-size: 15.5px; line-height: 1.5; text-align: left;
  box-shadow: 0 4px 12px rgba(16,47,67,.08);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, box-shadow .2s;
}
/* pearl marker in front of each answer (no creatures on question pages, so nothing hints at a result) */
.choice .pearl {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--mist); background: radial-gradient(circle at 35% 35%, #fff 0 30%, var(--pearl) 31% 100%);
  transition: transform .3s, border-color .2s, background .2s;
}
.choice:hover { transform: translateX(6px) rotate(-.6deg); border-color: var(--aqua-2); box-shadow: 0 8px 20px rgba(16,47,67,.16); }
.choice:hover .pearl { transform: scale(1.12); border-color: var(--sea-3); }
.choice.selected { background: var(--aqua); border-color: var(--aqua-deep); animation: pop .4s cubic-bezier(.34,1.56,.64,1); }
.choice.selected .pearl { border-color: var(--ocean); background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--sea-3) 19% 55%, var(--ocean) 56% 100%); transform: scale(1.15); }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---------- Loading ---------- */
.loading { align-items: center; justify-content: center; text-align: center; background: linear-gradient(var(--sea-2), var(--ocean)); }
.loading .inner { display: flex; flex-direction: column; align-items: center; }
.diver { width: 120px; height: 120px; color: #fff; animation: dive 1.8s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(16,47,67,.25)); }
@keyframes dive { 0%,100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(14px); } }
.loading p { margin: 18px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 18px; color: #fff; text-shadow: 0 1px 8px rgba(16,47,67,.4); }
.dots span { display: inline-block; animation: blink 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; } .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }

/* ---------- Result ---------- */
.result-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 96px; }
.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink); font-family: var(--font-cute); font-size: 14px; text-decoration: none;
  background: rgba(255,255,255,.7); padding: 6px 16px; border-radius: 999px; backdrop-filter: blur(6px);
  animation: bob 1.8s ease-in-out infinite;
}
.result-sheet {
  position: relative; z-index: 3;
  background: var(--cream);
  border-radius: 36px 36px 0 0;
  margin-top: -10px;
  padding: 0 0 40px;
  box-shadow: 0 -12px 40px rgba(16,47,67,.18);
}
.result-sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24C20 0 40 0 60 24S100 0 120 24z' fill='%23F7F5EF'/%3E%3C/svg%3E") repeat-x;
  background-size: 120px 24px;
}
.result-sheet .inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 10px; }
.badge {
  width: 112px; height: 112px; margin-top: -66px;
  border-radius: 50%; background: #fff; padding: 20px; color: var(--aqua-deep);
  border: 4px solid var(--aqua); box-shadow: 0 10px 30px rgba(16,47,67,.2);
  animation: badgeIn .8s cubic-bezier(.34,1.56,.64,1) both, bob 3s ease-in-out 1s infinite;
}
.badge .ic { width: 100%; height: 100%; }
@keyframes badgeIn { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.result-kicker { margin: 0; font-family: var(--font-cute); font-size: 15px; color: var(--ink); }
.result-name { margin: -14px 0 0; font-family: var(--font-display); font-size: 38px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--ocean); letter-spacing: 0; }
/* English result card (the result art has Thai text painted in) */
.result-about {
  width: 100%; padding: 18px 18px 16px; border-radius: 22px;
  background: rgba(255,255,255,.8); border: 2px solid var(--aqua);
  text-align: center; color: var(--text-strong);
}
.result-about p { margin: 0; }
.about-type { font-family: var(--font-cute); font-size: 15px; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.about-type span + span { color: var(--text); font-size: 14px; }
.about-text { margin-top: 8px !important; font-size: 15.5px; line-height: 1.65; }
.about-fact { margin-top: 10px !important; font-size: 14px; line-height: 1.6; color: var(--text); }
.about-fact strong { font-weight: 500; color: var(--ink); }
.download-card { width: 100%; padding: 0; border: 0; background: none; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(16,47,67,.15); transition: transform .2s; }
.download-card:hover { transform: scale(1.01) rotate(-.4deg); }
.result-content { text-align: center; font-size: 15px; line-height: 1.75; color: var(--text-strong); }
.result-content p { margin: 0 0 6px; }
.result-content strong { font-weight: 500; }
.btn-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* one continuous strip: the three images sit edge to edge inside one rounded frame */
.gallery { display: flex; flex-direction: column; gap: 0; width: 100%; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(16,47,67,.12); background: #1C5A8E; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; margin: 0; }
/* soft seams (all three images are 1200 square, so percentages are of one image):
   2nd image fades in from the blue of the 1st image's bottom band (its top 64px is plain texture),
   3rd image slides 100px over the 2nd and fades in, so the white wave lines melt into the plain blue */
.gallery img:nth-child(2) {
  margin-top: -0.8%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5.3%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5.3%);
}
.gallery img:nth-child(3) {
  margin-top: -8.3%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8.3%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8.3%);
}
.divider { display: flex; align-items: center; gap: 10px; color: var(--aqua-2); width: 100%; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 2px dashed var(--aqua); }
.divider .ic { width: 28px; height: 28px; }
footer.credit { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; font-size: 13px; opacity: .8; font-family: var(--font-cute); }

/* ---------- Music toggle ---------- */
.music-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(255,255,255,.9); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(16,47,67,.2);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.music-toggle:hover { transform: scale(1.1) rotate(-8deg); }
.music-toggle[hidden] { display: none; }
.music-toggle .icon-off { display: none; }
.music-toggle.muted .icon-on { display: none; }
.music-toggle.muted .icon-off { display: block; }

/* ---------- Share sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(16,47,67,.4); }
.sheet-panel {
  position: relative; width: 100%; max-width: var(--maxw);
  background: #fff; border-radius: 28px 28px 0 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  animation: enter .3s ease both;
}
.sheet-panel h2 { margin: 0 0 16px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.share-grid a, .share-grid button {
  display: flex; align-items: center; justify-content: center; min-height: 50px;
  border: 2px solid var(--aqua); border-radius: 16px; background: #fff;
  color: var(--text-strong); text-decoration: none; font-size: 14px;
  transition: transform .15s, background .15s;
}
.share-grid a:hover, .share-grid button:hover { background: var(--aqua); transform: translateY(-2px); }
.sheet-close { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--text); padding: 8px 16px; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--text-strong); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; z-index: 60; animation: enter .2s ease both;
}

@media (max-width: 400px) {
  .q-title { font-size: 16px; }
  .choice { font-size: 14.5px; }
  .result-name { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rays { display: none; }
}

/* ---------- ฟอร์มฝากข้อมูลแบบสมัครใจ (PDPA) ---------- */
.lead {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 20px 18px; border-radius: 24px;
  background: rgba(255,255,255,.75); border: 2px dashed var(--aqua-2);
}
.lead-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); text-align: center; }
.lead-note { margin: 0; font-size: 13px; color: var(--text); text-align: center; line-height: 1.6; }
.lead-input {
  width: 100%; min-height: 46px; padding: 10px 16px;
  border: 2px solid var(--aqua); border-radius: 999px; background: #fff;
  font-family: var(--font-body); font-size: 15px; color: var(--text-strong);
}
.lead-input:focus { outline: none; border-color: var(--aqua-deep); }
.lead-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.lead-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--aqua-deep); flex: 0 0 auto; }
.lead .pill { align-self: center; }
.lead-msg { margin: 0; text-align: center; font-size: 13px; color: var(--ink); min-height: 18px; }

/* ---------- scroll hint at the foot of each page ---------- */
.scroll-hint {
  margin: 10px 0 0; display: flex; flex-direction: column; align-items: center; gap: 0;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--ink); opacity: .78; text-align: center; pointer-events: none;
  text-shadow: 0 0 10px rgba(247,245,239,1), 0 0 3px rgba(247,245,239,1);
}
.scroll-hint .chev { display: block; height: 9px; margin-top: 3px; filter: drop-shadow(0 0 3px rgba(247,245,239,1)); animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }
.home .scroll-hint { margin-top: 4px; }
.story .inner, .question .inner { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
/* last page: the text sits at the top, so the hint drops to the foot of the screen */
.story.panel-top > .scroll-hint { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .scroll-hint .chev { animation: none; } }