:root{
  --cream:#fdfbf7;
  --aqua:#bfe3e8;
  --aqua-2:#9fcfd6;
  --aqua-deep:#5f9faa;
  --ink:#5f8f9a;
  --navy:#1c3f63;
  --text:#6b5d50;
  --text-strong:#3f352c;
  --blush:#f4c6c6;
  --sand:#f6ecdd;
  --gold:#c8a86b;
  --font-cute:"Mali","Sarabun",system-ui,sans-serif;
  --font-body:"Sarabun",system-ui,sans-serif;
  --font-serif:"Lustria",Georgia,serif;
  --maxw:560px;
  --r:22px;
  --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,235,240,.45)' stroke='%235f9faa' 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(255,220,225,.55)' stroke='%235f9faa' 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='%235f9faa'/%3E%3Ccircle cx='18' cy='16' r='1.3' fill='%235f9faa'/%3E%3Cpath d='M12.5 19.5q2.5 2 5 0' stroke='%235f9faa' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 15 15,pointer;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  min-height:100svh;
  font-family:var(--font-body);font-weight:300;color:var(--text);
  background:
    radial-gradient(120% 70% at 50% -10%, #eaf6f7 0%, #cfe9ec 45%, #a9d5dd 100%) fixed,
    var(--aqua);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:var(--cursor);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url("assets/img/bg-top.jpg") center top/cover no-repeat;
  opacity:.38;filter:saturate(1.05)
}
body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:52vh;z-index:-2;
  background:url("assets/img/bg-deep.jpg") center bottom/cover no-repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);
  mask-image:linear-gradient(to bottom,transparent,#000 45%)
}
a{color:var(--aqua-deep)}
button{font:inherit;cursor:var(--cursor-hand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

#bubbles{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(234,246,247,.92),rgba(234,246,247,0));
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-top,0)) ;
  max-width:var(--maxw);margin:0 auto;
}
.brand{height:34px;width:auto;filter:drop-shadow(0 1px 2px rgba(255,255,255,.7))}
.topbar-actions{display:flex;gap:8px;align-items:center}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(95,159,170,.35);background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);font-size:18px;line-height:1;
  display:grid;place-items:center;transition:transform .15s,background .2s
}
.icon-btn:hover{transform:translateY(-1px);background:#fff}
.icon-btn .ico-off{display:none}
.icon-btn[aria-pressed="false"] .ico-on{display:none}
.icon-btn[aria-pressed="false"] .ico-off{display:block}
.badge{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-family:var(--font-cute);font-style:normal;font-size:11px;
  background:var(--navy);color:#fff;border-radius:999px;padding:1px 7px;white-space:nowrap
}

/* ---------- stage ---------- */
.stage{max-width:var(--maxw);margin:0 auto;padding:2px 18px 18px;text-align:center}
.title{margin:2px 0 2px;display:grid;justify-items:center;gap:8px}
.title-img{width:min(252px,62vw);height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(255,255,255,.55))}
.title-tag{
  font-family:var(--font-cute);font-size:13px;color:#fff;max-width:92vw;
  background:linear-gradient(100deg,var(--aqua-deep),var(--navy));
  border-radius:999px;padding:4px 15px;letter-spacing:.04em
}
.lede{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--text-strong)}
.lede b{font-weight:500;color:var(--navy)}

/* ---------- ตู้กาชาปง ---------- */
.machine-wrap{position:relative;margin:2px auto 0;width:min(252px,66vw);aspect-ratio:3/4}
.knob-hint{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  margin:0;font-family:var(--font-cute);font-size:16px;color:var(--navy);white-space:nowrap;
  background:rgba(255,255,255,.82);border-radius:999px;padding:3px 16px;
  box-shadow:0 4px 12px rgba(40,90,110,.14);
  animation:blink 1.8s ease-in-out infinite
}

.machine{position:absolute;inset:0;animation:float 6s ease-in-out infinite}
.machine.shake{animation:shake .5s ease-in-out}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shake{
  0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-4px,1px) rotate(-1.4deg)}
  35%{transform:translate(4px,-1px) rotate(1.4deg)}
  55%{transform:translate(-3px,2px) rotate(-1deg)}
  75%{transform:translate(3px,-2px) rotate(.8deg)}
}

.m-dome{
  position:absolute;left:4%;right:4%;top:0;height:52%;
  border-radius:50% 50% 16% 16%/62% 62% 12% 12%;
  background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(206,235,238,.6) 55%,rgba(255,255,255,.5));
  border:2px solid rgba(255,255,255,.9);
  box-shadow:inset 0 -10px 24px rgba(95,159,170,.22), 0 12px 26px rgba(40,90,110,.16);
  overflow:hidden
}
.m-glass{position:absolute;inset:0;background:radial-gradient(60% 45% at 30% 22%,rgba(255,255,255,.95),transparent 60%)}
.m-balls{position:absolute;inset:0}
.m-balls i{
  position:absolute;left:var(--x);top:var(--y);width:24%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.98) 0 7%, rgba(255,255,255,.4) 13%, transparent 27%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.6) 0 5%, transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 34%, var(--c1) 62%, var(--c2) 97%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.75), 0 3px 8px rgba(30,70,90,.14);
  transform:translate(-50%,-50%);
  animation:jig 3.6s ease-in-out infinite;animation-delay:var(--d)
}
@keyframes jig{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px)) rotate(10deg)}}
.m-shine{
  position:absolute;left:12%;top:8%;width:26%;height:34%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.95),transparent);transform:rotate(-18deg);filter:blur(1px)
}

.m-body{
  position:absolute;left:0;right:0;top:48%;bottom:7%;
  border-radius:20px 20px 26px 26px;
  background:linear-gradient(180deg,#fdf5ea,#f2e2cd 60%,#e7d2b6);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 14px 30px rgba(40,90,110,.2), inset 0 2px 0 rgba(255,255,255,.8)
}
.m-plate{
  position:absolute;left:50%;top:3%;transform:translateX(-50%);
  display:grid;justify-items:center;gap:2px;width:32%
}
.m-plate img{width:100%;height:auto;display:block}
.m-plate span{font-family:var(--font-serif);font-size:8.5px;letter-spacing:.3em;color:var(--aqua-deep);text-indent:.3em;line-height:1}
.m-knob{
  position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  width:29%;aspect-ratio:1;border-radius:50%;border:none;padding:0;background:transparent
}
.m-knob[disabled]{cursor:default}
.knob-ring{
  position:absolute;inset:-12%;border-radius:50%;border:2px solid rgba(28,63,99,.4);
  animation:ring 2.4s ease-out infinite
}
@keyframes ring{
  0%{transform:scale(.9);opacity:.8}
  70%{transform:scale(1.25);opacity:0}
  100%{opacity:0}
}
.m-knob[disabled] .knob-ring{animation:none;opacity:0}
.knob-face{
  display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#dfe9ec 45%,#a8c3ca);
  box-shadow:0 4px 10px rgba(40,90,110,.28), inset 0 -3px 6px rgba(0,0,0,.1);
  transition:transform .8s cubic-bezier(.3,1.5,.5,1)
}
.knob-face b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62%;height:10%;border-radius:999px;background:var(--navy);opacity:.8
}
.machine.turn .knob-face{transform:rotate(540deg)}
.m-knob:hover .knob-face{filter:brightness(1.05)}
.m-slot{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:56%;height:26%;border-radius:12px;
  background:linear-gradient(180deg,#d9c3a4,#c8ad8a);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.22)
}
.m-slot-hole{position:absolute;inset:14% 10% 10%;border-radius:10px;background:rgba(60,45,30,.55)}
.m-legs{position:absolute;left:12%;right:12%;bottom:0;height:7%;display:flex;justify-content:space-between}
.m-legs i{width:22%;height:100%;border-radius:0 0 10px 10px;background:#d6c0a1}

/* แคปซูลหล่น */
.capsule{
  position:absolute;left:50%;top:44%;width:19%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%
}
.capsule{background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.98) 0 6%, rgba(255,255,255,.45) 12%, transparent 26%),radial-gradient(circle at 72% 74%, rgba(255,255,255,.55) 0 4%, transparent 15%),radial-gradient(circle at 50% 52%, rgba(255,255,255,.3) 0 32%, rgba(168,214,226,.5) 60%, rgba(122,178,196,.62) 88%, rgba(255,255,255,.75) 99%);box-shadow:inset 0 0 14px rgba(255,255,255,.8),0 4px 10px rgba(30,70,90,.18)}
.capsule.drop{animation:drop 1.15s cubic-bezier(.5,.05,.6,1) forwards}
@keyframes drop{
  0%{top:44%;opacity:0;transform:translate(-50%,-50%) scale(.6)}
  18%{opacity:1}
  62%{top:88%;transform:translate(-50%,-50%) scale(1)}
  74%{top:82%}
  86%{top:88%}
  93%{top:85%}
  100%{top:88%;transform:translate(-50%,-50%) scale(1)}
}

/* ---------- ฉากเปิดไข่ ---------- */
.reveal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.reveal-sky{
  position:absolute;inset:0;
  background:radial-gradient(70% 50% at 50% 38%,rgba(255,255,255,.96),rgba(191,227,232,.94) 55%,rgba(103,160,175,.96));
  backdrop-filter:blur(3px)
}
.rays{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s;pointer-events:none}
.rays.on{opacity:1}
.rays i{
  position:absolute;left:var(--x);bottom:-18vh;width:var(--s);height:var(--s);border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.4) 15%, transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.22) 0 40%, var(--c,rgba(175,214,226,.4)) 74%, rgba(255,255,255,.5) 99%);
  box-shadow:inset 0 0 10px rgba(255,255,255,.7);
  animation:rise var(--t) linear infinite;animation-delay:var(--d)
}
@keyframes rise{
  0%{transform:translate(0,0) scale(.7);opacity:0}
  12%{opacity:.85}
  50%{transform:translate(var(--sway),-60vh) scale(1)}
  85%{opacity:.7}
  100%{transform:translate(0,-118vh) scale(1.08);opacity:0}
}

.reveal-stage{position:relative;display:grid;place-items:center;width:100%;max-width:400px}

.bubble-big{
  position:relative;width:min(210px,52vw);aspect-ratio:1;border:none;background:transparent;padding:0;
  border-radius:50%;cursor:pointer;animation:bobble 3.2s ease-in-out infinite
}
.bub-skin{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.98) 0 6%, rgba(255,255,255,.45) 12%, transparent 26%),radial-gradient(circle at 72% 74%, rgba(255,255,255,.55) 0 4%, transparent 15%),radial-gradient(circle at 50% 52%, rgba(255,255,255,.3) 0 32%, rgba(168,214,226,.5) 60%, rgba(122,178,196,.62) 88%, rgba(255,255,255,.75) 99%);
  box-shadow:inset 0 0 26px rgba(255,255,255,.85), 0 10px 26px rgba(40,90,110,.18);
  transition:transform .22s cubic-bezier(.3,1.6,.5,1), filter .22s
}
.bubble-big.poke .bub-skin{animation:squish .38s cubic-bezier(.3,1.5,.4,1)}
.bubble-big.p1 .bub-skin{filter:hue-rotate(-14deg) saturate(1.1)}
.bubble-big.p2 .bub-skin{filter:hue-rotate(-26deg) saturate(1.25) brightness(1.04)}
@keyframes squish{
  0%{transform:scale(1,1)}
  28%{transform:scale(1.14,.84)}
  55%{transform:scale(.9,1.12)}
  78%{transform:scale(1.05,.96)}
  100%{transform:scale(1,1)}
}
@keyframes bobble{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.02)}}
.cap-tap{
  position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);
  font-family:var(--font-cute);font-size:15px;color:var(--navy);white-space:nowrap;
  animation:blink 1.4s ease-in-out infinite
}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}
.bubble-big.open{animation:none;pointer-events:none}
.bubble-big.open .bub-skin{animation:popout .34s ease-out forwards}
.bubble-big.open .cap-tap{opacity:0;transition:opacity .16s}
@keyframes popout{
  0%{transform:scale(1);opacity:1}
  45%{transform:scale(1.28);opacity:.75}
  100%{transform:scale(1.6);opacity:0}
}

/* การ์ด */
.card{
  position:relative;width:min(340px,86vw);cursor:pointer;
  animation:cardIn .7s cubic-bezier(.2,1.5,.4,1) both
}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(30px) scale(.7) rotate(-6deg)}
  100%{opacity:1;transform:none}
}
.card-inner{
  position:relative;border-radius:26px;padding:16px 18px 14px;
  background:linear-gradient(180deg,#fffdfa, var(--tint,#eef7f8) 100%);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 18px 40px rgba(30,70,90,.25), 0 0 0 6px var(--aura,rgba(159,207,214,.35));
  overflow:hidden
}
.card-inner::before{
  content:"";position:absolute;inset:-40% -60%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  animation:sheen 3.4s ease-in-out infinite
}
@keyframes sheen{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.lang{
  display:flex;gap:2px;align-self:center;
  background:rgba(255,255,255,.78);border:1px solid rgba(95,159,170,.35);
  border-radius:999px;padding:2px;backdrop-filter:blur(6px)
}
.lang-btn{
  border:none;background:transparent;color:var(--ink);
  font-family:var(--font-cute);font-size:12.5px;line-height:1;
  padding:7px 11px;border-radius:999px;transition:background .18s,color .18s
}
.lang-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
.lang-btn:not([aria-pressed="true"]):hover{background:rgba(28,63,99,.08)}

.card-art{position:relative;height:var(--artH,148px);margin-bottom:6px;display:flex;align-items:center;justify-content:center}
.card-art::after{
  content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:62%;height:14px;border-radius:50%;background:rgba(95,159,170,.22);filter:blur(6px)
}
.card-art img{
  max-width:72%;max-height:var(--artH,148px);object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(40,90,110,.22));
  animation:breathe 4.5s ease-in-out infinite
}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.card-text{position:relative;text-align:center}
.card-name{margin:2px 0 0;font-family:var(--font-cute);font-size:15px;color:var(--aqua-deep);letter-spacing:.01em}
.card.is-en .card-name{font-family:var(--font-body);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.card-role{margin:0 0 6px;font-family:var(--font-cute);font-weight:400;font-size:30px;line-height:1.25;color:var(--text-strong)}
.card.is-en .card-role{font-family:var(--font-serif);font-weight:600;font-size:34px;letter-spacing:.03em;text-transform:uppercase;color:var(--navy)}
.card-trait{
  margin:0 auto 8px;display:inline-block;font-size:12.5px;color:var(--navy);
  background:rgba(255,255,255,.8);border:1px solid rgba(28,63,99,.15);border-radius:14px;padding:4px 12px;line-height:1.5
}
.card-desc{margin:4px 2px 6px;font-size:13.5px;line-height:1.75;text-align:left;color:var(--text)}
.card-fact{margin:0 0 4px;font-size:12.5px;line-height:1.6;color:var(--ink)}
.card-foot{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;padding-top:8px;border-top:1px dashed rgba(95,159,170,.35);
  font-size:11px;color:var(--ink)
}
.card-foot.solo{justify-content:center}
.card-brand{font-family:var(--font-serif);letter-spacing:.08em}
.dupe{
  margin:10px auto 0;display:table;font-family:var(--font-cute);font-size:14px;color:#fff;
  background:rgba(28,63,99,.82);border-radius:999px;padding:5px 16px
}

.reveal-actions{
  position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0));
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 16px
}
.btn{
  border:1px solid rgba(28,63,99,.25);background:rgba(255,255,255,.9);color:var(--navy);
  border-radius:999px;padding:9px 18px;font-family:var(--font-cute);font-size:15px;
  transition:transform .15s,background .2s
}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn.primary{background:linear-gradient(100deg,#2b5c82,var(--navy));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(28,63,99,.3)}
.btn.ghost{background:transparent;border-color:rgba(28,63,99,.25)}

/* ---------- แผ่นสไลด์ (สมุดสะสม / โมดัล) ---------- */
.sheet{position:fixed;inset:0;z-index:70;display:grid;place-items:end center;background:rgba(30,70,90,.38);backdrop-filter:blur(4px);padding:0}
.sheet-panel{
  position:relative;width:100%;max-width:var(--maxw);max-height:92svh;overflow:auto;
  background:var(--cream);border-radius:26px 26px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom,0));
  box-shadow:0 -12px 40px rgba(30,70,90,.28);
  animation:up .32s cubic-bezier(.2,1,.3,1) both
}
.sheet-panel.small{border-radius:26px;margin:auto;max-height:88svh}
.sheet{place-items:center}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-x{
  position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(95,159,170,.3);background:#fff;font-size:20px;line-height:1;color:var(--ink)
}
.sheet-panel h2{margin:0 0 4px;text-align:center;font-family:var(--font-cute);font-weight:400;font-size:21px;color:var(--navy)}
.sheet-sub{margin:0 0 16px;text-align:center;font-size:13px;color:var(--ink)}

.dex{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dex-cell{
  position:relative;border-radius:18px;padding:8px 6px 10px;text-align:center;
  background:#fff;border:1px solid rgba(95,159,170,.18);
  box-shadow:0 4px 12px rgba(40,90,110,.08);
  display:grid;gap:2px;justify-items:center
}
.dex-cell img{width:100%;height:74px;object-fit:contain}
.dex-cell.locked img{filter:grayscale(1) brightness(1.7) opacity(.34)}
.dex-cell.locked .dex-th{color:#b9b0a5}
.dex-th{font-family:var(--font-cute);font-size:12.5px;line-height:1.25;color:var(--text-strong)}
.dex-en{font-family:var(--font-serif);font-size:11px;letter-spacing:.04em;color:var(--ink)}
.dex-cnt{
  position:absolute;right:6px;top:6px;font-family:var(--font-cute);font-size:10.5px;
  background:var(--navy);color:#fff;border-radius:999px;padding:1px 7px
}

.complete{
  margin-top:16px;padding:16px;border-radius:18px;text-align:center;
  background:linear-gradient(120deg,#fdf3e2,#eaf6f7);border:1px solid var(--gold)
}
.complete b{font-family:var(--font-cute);font-size:19px;color:var(--navy)}
.complete p{margin:6px 0 12px;font-size:13px;line-height:1.7}
.sheet-foot{margin-top:18px;text-align:center}

.modal-hero{display:grid;place-items:center;gap:2px;text-align:center}
.modal-hero img{width:180px;height:180px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(40,90,110,.2))}
.modal-hero h3{margin:2px 0 0;font-family:var(--font-cute);font-weight:400;font-size:26px;color:var(--text-strong)}
.modal-hero .en{margin:0;font-family:var(--font-serif);font-size:18px;letter-spacing:.06em;color:var(--navy)}
.modal-hero .role{margin:4px 0 0;font-family:var(--font-cute);font-size:14px;color:var(--aqua-deep)}
.modal-hero .desc{margin:10px 2px 0;font-size:13.5px;line-height:1.8;text-align:left;color:var(--text)}
.modal-hero .sea{margin:8px 0 0;font-size:12.5px;color:var(--ink)}
.pick-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  background:rgba(28,63,99,.92);color:#fff;border-radius:999px;padding:9px 20px;
  font-family:var(--font-cute);font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.2);
  animation:up .25s both
}

/* ---------- จอกว้าง ---------- */
@media (min-width:720px){
  .stage{max-width:620px}
  .machine-wrap{width:320px}
  .title-lg{font-size:54px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #bubbles{display:none}
}


/* ---------- QR ช่องทางติดต่อ (อยู่กลางหน้า ไม่ลอย) ---------- */
.qr-block{
  display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;margin:10px auto 0;
  background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
  border:1px solid rgba(28,63,99,.16);border-radius:999px;padding:8px 20px;
  box-shadow:0 6px 16px rgba(40,90,110,.14);
  color:var(--navy);font-family:var(--font-cute);font-size:12.5px;line-height:1.2;
  transition:transform .18s,box-shadow .22s
}
.qr-block:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(40,90,110,.2)}

/* ---------- การ์ดพลิกได้ ---------- */
.flip{position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.9,.3,1)}
.card.flipped .flip{transform:rotateY(180deg)}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{
  position:absolute;inset:0;transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:auto
}
.face.back::before{display:none}
.card-foot{justify-content:center;gap:10px}
.flip-hint{margin:auto 0 0;padding-top:10px;font-family:var(--font-cute);font-size:13px;color:var(--aqua-deep);opacity:1;text-align:center;transition:opacity .3s}
.card.flipped .flip-hint{opacity:0}
.jewel-art{height:148px;display:flex;align-items:center;justify-content:center;margin-top:6px}
.jewel-art img{max-width:148px;max-height:148px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(40,90,110,.2))}
.jewel-name{margin:8px 0 0;font-family:var(--font-serif);font-size:23px;letter-spacing:.03em;color:var(--navy)}
.jewel-for{margin:1px 0 0;font-family:var(--font-cute);font-size:14px;color:var(--text-strong)}
.jewel-note{margin:10px 6px 0;font-size:13px;line-height:1.66;color:var(--text)}
.jewel-foot{margin-top:auto;padding-top:8px;gap:7px;flex-wrap:wrap}
.btn.tiny{padding:6px 15px;font-size:13.5px}

/* ---------- ช่องทางติดต่อ ---------- */
.contact{text-align:center}
.contact h2{margin:0 0 4px}
.qr-wrap{display:block;width:158px;margin:10px auto 8px;padding:8px;background:#fff;border-radius:16px;
  border:1px solid rgba(28,63,99,.14);box-shadow:0 8px 20px rgba(40,90,110,.14)}
.qr-wrap img{width:100%;display:block;border-radius:10px}
.contact-links{display:grid;gap:8px;margin-top:8px}
.contact-links .btn{width:100%;text-align:center;text-decoration:none;padding:10px 16px}
.contact-links .btn.ghost{font-size:13px;line-height:1.5;font-family:var(--font-body)}

/* ---------- ยืนยันการล้างข้อมูล ---------- */
.confirm{display:flex;gap:8px;justify-content:center;margin-top:10px}
.btn.danger{background:#b4553f;border-color:transparent;color:#fff}