/* ============================================================
   stamp-book.css — สมุดตราประทับ 3D page-flip (vanilla JS lib)
   ถอด/ปรับจาก prototype passport_book_v4.html ให้ทำงานเหมือน Flutter book_lab
   ทุก rule scope ใต้ .stampbook (กันชนกับสไตล์เจ้าบ้าน)
   ปรับแต่งผ่าน CSS variables (ดู :where(.stampbook) ด้านล่าง)
   ============================================================ */

.stampbook, .stampbook * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }

.stampbook {
  /* ---- themeable tokens ---- */
  --sb-paper:   #FBF4E4;   /* พื้นกระดาษหน้าใน */
  --sb-paper2:  #F1E6CC;   /* กระดาษเงาโค้ง/หลังแผ่น (เข้มกว่าเล็กน้อย) */
  --sb-accent:  #F4A23C;   /* สีเน้น: progress / scrubber / date chip */
  --sb-ink:     #1E3A38;
  --sb-muted:   #7E948F;
  --sb-sea-deep:#0A5E5E;
  --sb-rare:    #8B5CF6;
  --sb-cover:   linear-gradient(150deg,#13807F,#0A5249);   /* gradient ปกหน้า */
  --sb-back:    linear-gradient(150deg,#0A5249,#08403B);   /* ปกหลัง */
  --sb-bg:      radial-gradient(130% 90% at 50% 0%,#0F7C7C 0%,#0A5249 55%,#08403B 100%);
  --sb-cover-img: none;    /* ตั้งเป็น url(...) เพื่อใส่ภาพปก */
  --sb-back-img:  none;
  --sb-paper-img: none;    /* เท็กซ์เจอร์กระดาษ */

  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  background: var(--sb-bg);
  color: var(--sb-ink);
  font-family: 'Mali', system-ui, 'Noto Sans Thai', sans-serif;
  overflow: hidden; overscroll-behavior: none;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== top bar (optional) ===== */
.stampbook .sb-bar { width: 100%; display: flex; align-items: center; gap: 10px; color: #fff;
  padding: calc(var(--safe-top) + 12px) 14px 8px; flex: none; }
.stampbook .sb-bar .sb-close { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; cursor: pointer; }
.stampbook .sb-bar h2 { flex: 1; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; gap: 7px; }

/* ===== book stage ===== */
.stampbook .sb-wrap { position: relative; flex: 1; width: 100%; display: flex;
  justify-content: flex-start; align-items: center; padding: 6px 0; }
.stampbook .sb-book { position: relative; touch-action: none; user-select: none; -webkit-user-select: none;
  perspective: 1700px; }
.stampbook .sb-book * { touch-action: none; }

/* แผ่นกระดาษ (static ขวา) */
.stampbook .sb-sheet { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; overflow: hidden;
  box-shadow: 0 22px 40px rgba(0,0,0,.4); }

/* หน้าซ้าย = กระดาษเปล่า (ตราปั๊มลงหน้าขวาเท่านั้น) · เลื่อนซ้ายจนขอบขวาชนสัน */
.stampbook .sb-left { position: absolute; left: 0; top: 0; z-index: 1; border-radius: 4px 3px 3px 4px;
  background-color: var(--sb-paper); background-image: var(--sb-paper-img); background-size: cover;
  border: 1px solid rgba(120,90,40,.18);
  box-shadow: 0 22px 40px rgba(0,0,0,.32); }
.stampbook .sb-left::before { content: ""; position: absolute; right: 16px; top: 16px; bottom: 16px; width: 2px;
  border-left: 2px dashed rgba(120,100,60,.16); }

/* สันเล่มกลาง (gutter) — z สูงกว่า flip เพื่อไม่ให้เงาสันหายตอนพลิก */
.stampbook .sb-spine { position: absolute; left: 0; top: 0; width: 26px; height: 100%; z-index: 5; pointer-events: none;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, rgba(28,16,3,.40), rgba(28,16,3,.14) 45%, rgba(28,16,3,0) 100%); }
.stampbook .sb-spine::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  background: rgba(255,255,255,.10); }

/* เงาสันฝั่งหน้าซ้าย (mirror) — z สูง เพื่อคงอยู่ตอนแผ่นพลิกทับมาซ้าย */
.stampbook .sb-gutter-left { position: absolute; left: 0; top: 0; width: 30px; height: 100%; z-index: 5;
  pointer-events: none; transform: translateX(-30px); border-radius: 0 3px 3px 0;
  background: linear-gradient(270deg, rgba(28,16,3,.36), rgba(28,16,3,.12) 45%, rgba(28,16,3,0) 100%); }

/* ===== flip layer (nested-segment curl · preserve-3d) ===== */
.stampbook .sb-flip { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d;
  will-change: transform; z-index: 3; }
/* animation ขับด้วย requestAnimationFrame ใน JS (เรียก setT ทุกเฟรม) ไม่ใช้ CSS transition
   เพราะ transition interpolate เฉพาะปลายทาง → curl หายกลางทาง (แผ่นแข็ง/มุมฉาก) */
.stampbook .sb-seg { position: absolute; left: 0; top: 0; height: 100%; transform-origin: left center; transform-style: preserve-3d; }
.stampbook .sb-slice { position: absolute; left: 0; top: 0; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stampbook .sb-slice.sb-back { background: linear-gradient(90deg, var(--sb-paper2), var(--sb-paper));
  border-left: 1px solid rgba(120,90,40,.12); }
/* เงาความโค้ง: tint สม่ำเสมอต่อแถบ (opacity ไล่ต่อแถบใน JS = per-column ของ Flutter) */
.stampbook .sb-segshade { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; opacity: 0;
  background: rgba(38,24,6,1); }

/* drop shadow ใต้แผ่นที่พลิก ตอนทาบลงฝั่งซ้าย (พอร์ตจาก book_lab · fade ตาม past) */
.stampbook .sb-flip-shadow { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0;
  border-radius: 4px 3px 3px 4px; box-shadow: 0 24px 44px 4px rgba(0,0,0,.45); }

/* ===== page content ===== */
.stampbook .sb-page { width: 100%; height: 100%; background: var(--sb-paper); overflow: hidden; }
.stampbook .sb-leaf { width: 100%; height: 100%; position: relative;
  background-color: var(--sb-paper);
  background-image: var(--sb-paper-img),
    linear-gradient(90deg, rgba(120,90,40,.10), transparent 7%, transparent 93%, rgba(120,90,40,.08));
  background-size: cover;
  border: 1px solid rgba(120,90,40,.22); display: flex; flex-direction: column; }
.stampbook .sb-leaf.sb-right::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px;
  border-left: 2px dashed rgba(120,100,60,.22); }
.stampbook .sb-leaf.sb-left::after { content: ""; position: absolute; right: 0; top: 22px; bottom: 22px; width: 2px;
  border-left: 2px dashed rgba(120,100,60,.22); }

.stampbook .sb-pgnum { position: absolute; bottom: 12px; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700;
  font-size: 12px; color: #B8A57E; }
.stampbook .sb-leaf.sb-right .sb-pgnum { right: 18px; }
.stampbook .sb-leaf.sb-left .sb-pgnum { left: 18px; }
.stampbook .sb-pgtitle { text-align: center; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 15px;
  color: var(--sb-sea-deep); padding: 16px 18px 0; letter-spacing: .3px; }
.stampbook .sb-pgtitle .sb-sub { display: block; font-family: 'Mali', sans-serif; font-weight: 600; font-size: 11px;
  color: var(--sb-muted); margin-top: 1px; }
.stampbook .sb-stamparea { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 14px; }
.stampbook .sb-stamparea svg, .stampbook .sb-stamparea img { width: 76%; max-width: 250px; height: auto;
  filter: drop-shadow(0 6px 10px rgba(90,60,20,.12)); }
.stampbook .sb-stamparea img { border-radius: 8px; object-fit: contain; }
.stampbook .sb-pgfoot { text-align: center; padding: 0 18px 30px; }
.stampbook .sb-datechip { display: inline-flex; align-items: center; gap: 5px; font-family: 'Mali', sans-serif;
  font-weight: 600; font-size: 12px; color: #8a6d2f; background: color-mix(in srgb, var(--sb-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sb-accent) 40%, transparent); padding: 4px 12px; border-radius: 99px; }
.stampbook .sb-placeline { font-family: 'Mali', sans-serif; font-size: 12px; color: var(--sb-muted); margin-top: 7px; }

/* ghost (ยังไม่ปั๊ม) */
.stampbook .sb-ghost { width: 62%; max-width: 210px; aspect-ratio: 1; border-radius: 50%; border: 3px dashed #D6C39A;
  background: #FCF7EC; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: .9; }
.stampbook .sb-ghost .sb-gic { font-size: 40px; filter: grayscale(.3) opacity(.5); }
.stampbook .sb-ghost .sb-gnm { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 14px;
  color: #A88B4E; margin-top: 4px; }
.stampbook .sb-ghost.sb-secret { border-color: #E2A6A6; background: #FBEEEE; }
.stampbook .sb-ghost.sb-secret .sb-gnm { color: #C0473E; }
.stampbook .sb-scanhint { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 12px; color: #9A6510;
  background: #FFF1D6; border: 1px solid #F0D49A; display: inline-flex; gap: 5px; align-items: center;
  padding: 6px 13px; border-radius: 99px; }

/* ===== hard cover ===== */
.stampbook .sb-cover { width: 100%; height: 100%; position: relative; overflow: hidden; color: #fff;
  background-image: var(--sb-cover-img), var(--sb-cover); background-size: cover; background-position: center;
  /* จัด content ช่วงล่าง (ช่องป้ายชื่อ nameplate ที่รูปปกออกแบบไว้ล่าง-กลาง) แทนกลางจอ */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 28px 22px 86px; }
.stampbook .sb-cover.sb-hatch::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px); }
.stampbook .sb-cover::after { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(255,255,255,.35);
  border-radius: 14px; }
.stampbook .sb-cover > * { position: relative; z-index: 2; }
.stampbook .sb-back-cover { background-image: var(--sb-back-img), var(--sb-back); background-size: cover; }
.stampbook .sb-cv-emblem { width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.14);
  border: 2.5px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center;
  font-size: 46px; margin-bottom: 16px; }
.stampbook .sb-cv-k { font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.82); text-transform: uppercase; }
.stampbook .sb-cv-name { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.05; margin-top: 4px; }
.stampbook .sb-cv-th { font-family: 'Mali', sans-serif; font-size: 14px; color: rgba(255,255,255,.85); margin-top: 2px; }
.stampbook .sb-cv-rank { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--sb-accent) 95%, transparent);
  color: #3a2400; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 12.5px; padding: 5px 13px; border-radius: 99px; margin-top: 16px;
  /* ยก badge ขึ้นเหนือกรอบจังหวัดแบบ visual (transform ไม่แตะ flow → k/name/progress/count อยู่ที่เดิม) */
  transform: translateY(-124px); }
.stampbook .sb-cv-prog { width: 70%; height: 8px; background: rgba(255,255,255,.2); border-radius: 99px; margin-top: 16px; overflow: hidden; }
.stampbook .sb-cv-prog i { display: block; height: 100%; background: var(--sb-accent); border-radius: 99px; }
.stampbook .sb-cv-count { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 13px; color: rgba(255,255,255,.9); margin-top: 8px; }
/* ยกกลุ่มล่าง (progress + ปั๊มแล้ว) ขึ้นแบบ visual — ไม่แตะ flow ตัวอื่น */
.stampbook .sb-cv-prog, .stampbook .sb-cv-count { transform: translateY(-20px); }
.stampbook .sb-cv-open { position: absolute; bottom: 26px; font-family: 'Mali', sans-serif; font-size: 12px;
  color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 6px; }

/* dog-ear เฉพาะปก (หน้ากระดาษเอาออกเพื่อไม่บังเลขหน้า) */
.stampbook .sb-cover .sb-dogear { position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; z-index: 6; pointer-events: none; }
.stampbook .sb-cover .sb-dogear::before { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent rgba(255,255,255,.18) transparent; }

/* reward page */
.stampbook .sb-rewardpage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 20px; }
.stampbook .sb-rw-seal { width: 60%; max-width: 210px; }
.stampbook .sb-rw-seal img { width: 100%; height: auto; object-fit: contain; border-radius: 8px;
  filter: drop-shadow(0 6px 10px rgba(90,60,20,.12)); }
.stampbook .sb-rw-lock { width: 60%; max-width: 200px; aspect-ratio: 1; border-radius: 50%; border: 3px dashed #D9C7F5;
  background: #F3ECFF; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5B3D8A; }
.stampbook .sb-rw-lock .sb-g { font-size: 44px; }
.stampbook .sb-rw-t { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 16px; color: var(--sb-rare); margin-top: 14px; }
.stampbook .sb-rw-s { font-family: 'Mali', sans-serif; font-size: 12px; color: var(--sb-muted); margin-top: 4px; max-width: 230px; }

/* ===== scrubber ===== */
.stampbook .sb-scrub { width: 100%; max-width: 460px; margin: 0 auto; padding: 30px 30px 6px; flex: none; }
.stampbook .sb-scrub-track { position: relative; height: 24px; display: flex; align-items: center; touch-action: none; }
.stampbook .sb-scrub-rail { position: absolute; left: 0; right: 0; height: 6px; border-radius: 99px; background: rgba(255,255,255,.22); }
.stampbook .sb-scrub-fill { position: absolute; left: 0; height: 6px; border-radius: 99px; background: var(--sb-accent); pointer-events: none; }
.stampbook .sb-scrub-ticks { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.stampbook .sb-scrub-ticks i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.stampbook .sb-scrub-thumb { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--sb-accent); box-shadow: 0 3px 9px rgba(0,0,0,.45); transform: translate(-50%,-50%); pointer-events: none; transition: left .13s ease; }
.stampbook .sb-scrub-label { position: absolute; bottom: 32px; left: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: #fff; color: var(--sb-ink); font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 13px;
  padding: 5px 12px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.38); transition: left .13s ease; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.stampbook .sb-scrub-label::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff; border-bottom: none; }
.stampbook .sb-scrub-label .sb-mini { font-family: 'Mali', sans-serif; font-weight: 600; font-size: 11px; color: var(--sb-muted); margin-left: 5px; }
.stampbook .sb-hint { font-family: 'Mali', sans-serif; font-size: 12px; color: rgba(255,255,255,.7); flex: none;
  padding-bottom: calc(var(--safe-bottom) + 12px); display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; }