/* =========================================================
   sarana — หน้าสร้างตัวละคร
   ---------------------------------------------------------
   ขนาดทั้งหมดอ้างอิงแบบ Figma "iPad Pro 12.9" (1024 × 1366)
   --u = 1 พิกเซลของแบบ
   • คอม / iPad : ย่อทั้งบัตรให้พอดีจอ (ไม่ต้องเลื่อน)
   • มือถือ     : บัตรเต็มความกว้างจอ ตัวหนังสือใหญ่ขึ้น
   ========================================================= */

/* ---------- ฟอนต์ ---------- */
@font-face { font-family: "LINE Seed Sans TH"; src: url("../assets/fonts/LINESeedSansTH_W_Rg.woff2") format("woff2");  font-weight: 400; font-display: swap; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("../assets/fonts/LINESeedSansTH_W_Bd.woff2") format("woff2");  font-weight: 700; font-display: swap; }
@font-face { font-family: "LINE Seed Sans TH"; src: url("../assets/fonts/LINESeedSansTH_W_XBd.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-Regular.ttf") format("truetype");  font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-Medium.ttf") format("truetype");   font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/IBMPlexSansThai-Bold.ttf") format("truetype");     font-weight: 700; font-display: swap; }

/* ---------- สี ---------- */
:root {
  --u: min(1px, calc(100vw / 1024), calc(100dvh / 1366));

  --pink:       #F8BAD1;
  --paper:      #FFFEFA;
  --cream:      #FCF3E2;
  --gray:       #EFEFEF;
  --ring:       #D9D9D9;
  --brown:      #43301F;
  --brown-soft: #8E6F69;

  --skin: #FFFFFF;   /* สีผิวตัวละคร (JS เปลี่ยนค่านี้) */
  --bg:   #EFEFEF;   /* สีพื้นหลังตัวละคร (JS เปลี่ยนค่านี้) */
  --eye:  #564E42;   /* สีนัยน์ตา (JS เปลี่ยนค่านี้) */

  --font-head: "IBM Plex Sans Thai", sans-serif;
  --font-body: "IBM Plex Sans Thai", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--brown);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* พื้นหลังชมพูลายทาง */
  background-color: var(--pink);
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.2) 0 calc(124.19 * var(--u)),
    transparent calc(124.19 * var(--u)) calc(175.76 * var(--u)));
  background-position: calc(50% - 501 * var(--u)) 0;
  background-attachment: fixed;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a      { color: inherit; text-decoration: none; }
img    { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.scene {
  position: relative;
  z-index: 0;          /* ให้ห่วงด้านหลังบัตรยังมองเห็นได้ */
  display: flex;
  justify-content: center;
  padding: calc(18 * var(--u)) 0 calc(19 * var(--u));
}

/* =========================================================
   บัตร
   ========================================================= */
.card {
  position: relative;
  width: calc(952 * var(--u));
  padding: calc(105 * var(--u)) calc(38 * var(--u)) calc(34 * var(--u));
  background: var(--paper);
  border: max(1px, calc(1.5 * var(--u))) solid var(--brown);
  border-radius: calc(68 * var(--u));
}

/* ---------- ห่วงคล้อง + ช่องร้อยสาย (ซ้อนตามแบบ Figma) ----------
   • ช่อง = รูทะลุบัตร เห็นพื้นหลังชมพูด้านหลัง
   • ห่วงครึ่งซ้าย อยู่ "หน้า" บัตร (ทับขอบบัตรและขอบช่อง)
   • ห่วงครึ่งขวา อยู่ "หลัง" บัตร (โผล่ให้เห็นเหนือบัตรและในช่อง) */
.ring {
  position: absolute;
  left: calc(405 * var(--u));
  top: calc(-71 * var(--u));
  width: calc(139 * var(--u));
  height: calc(139 * var(--u));
  border: calc(16 * var(--u)) solid var(--ring);
  border-radius: 50%;
  pointer-events: none;
}
.ring.back  { z-index: -1; clip-path: inset(0 0 0 50%); }
.ring.front { z-index: 4;  clip-path: inset(0 calc(50% - 1px) 0 0); }

.slot {
  position: absolute;
  z-index: 3;
  left: calc(385 * var(--u));
  top: calc(23 * var(--u));
  width: calc(180 * var(--u));
  height: calc(60 * var(--u));
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-radius: 999px;
  overflow: hidden;
  /* พื้นหลังเดียวกับหน้าเว็บ (ล็อกกับจอ) จึงดูเหมือนรูทะลุ */
  background-color: var(--pink);
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.2) 0 calc(124.19 * var(--u)),
    transparent calc(124.19 * var(--u)) calc(175.76 * var(--u)));
  background-position: calc(50% - 501 * var(--u)) 0;
  background-attachment: fixed;
}
/* ห่วงครึ่งขวาที่มองผ่านช่อง (ตำแหน่งเดียวกับ .ring.back) */
.slot .ring.back {
  z-index: 0;
  left: calc(405 * var(--u) - 385 * var(--u) - max(1px, calc(1 * var(--u))));
  top:  calc(-71 * var(--u) - 23 * var(--u) - max(1px, calc(1 * var(--u))));
}

/* =========================================================
   พื้นที่แสดงตัวละคร
   ========================================================= */
.stage {
  position: relative;
  z-index: 1;
  height: calc(624 * var(--u));
  border-radius: calc(48 * var(--u)) calc(48 * var(--u)) 0 0;
  overflow: hidden;
}
.stage-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(573 * var(--u));
  background: var(--bg);
  border-radius: calc(48 * var(--u));
  overflow: hidden;              /* ตัวละครห้ามเลยกรอบสี */
  transition: background-color .35s ease;
}

/* ---------- ปุ่มเลือกสี (จุดกลม) ใช้ร่วมกันทั้ง พื้นหลัง / สีตา / สีผม ---------- */
.dots { display: flex; gap: calc(10 * var(--u)); }
.dot {
  flex: 0 0 auto;
  width:  var(--d, calc(40 * var(--u)));
  height: var(--d, calc(40 * var(--u)));
  background: var(--c);
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-radius: 50%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dot:hover  { transform: scale(1.12); }
.dot:active { transform: scale(.94); }
.dot.selected {
  box-shadow: 0 0 0 calc(4 * var(--u)) var(--paper), 0 0 0 calc(7 * var(--u)) var(--brown-soft);
}
.dot:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; }
.picker-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  white-space: nowrap;
}

/* สีพื้นหลัง: แถบแนวตั้งชิดขวาของกล่องตัวละคร */
.bg-picker {
  position: absolute;
  z-index: 2;
  top: calc(84 * var(--u));
  right: calc(22 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(11 * var(--u)) calc(16 * var(--u));
  background: rgba(255, 254, 250, .85);
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
  border-radius: 999px;
}
.bg-picker .picker-label { font-size: calc(17 * var(--u)); }
.bg-picker .dots { --d: calc(30 * var(--u)); flex-direction: column; gap: calc(9 * var(--u)); }
.bg-picker .dot.selected { box-shadow: 0 0 0 calc(3 * var(--u)) var(--paper), 0 0 0 calc(6 * var(--u)) var(--brown-soft); }

.character {
  position: absolute;
  left: calc(50% - 644.5 * var(--u));
  top: calc(-67.4 * var(--u));
  width: calc(1272.8 * var(--u));
  height: calc(871 * var(--u));
  pointer-events: none;
}
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* นัยน์ตา: สีทึบที่ตัดตามภาพมาสก์ (ขอบตายังเป็นสีเดิมจากไฟล์ตา) */
.pupil {
  display: block;
  background: var(--eye);
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
          mask: var(--m) center / 100% 100% no-repeat;
  transition: background-color .25s ease;
}
.layer.pop { animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop {
  from { transform: scale(.96) translateY(calc(6 * var(--u))); opacity: .4; }
}

/* หัวข้อแบบสติกเกอร์ (ขอบขาว + เส้นน้ำตาลบาง) */
.title {
  position: absolute;
  top: calc(44 * var(--u));
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(40 * var(--u));
  line-height: 1.4;
  color: var(--brown);
  -webkit-text-stroke: calc(8 * var(--u)) #fff;
  paint-order: stroke fill;
  filter:
    drop-shadow(max(1px, calc(1.2 * var(--u))) 0 0 var(--brown))
    drop-shadow(calc(-1 * max(1px, calc(1.2 * var(--u)))) 0 0 var(--brown))
    drop-shadow(0 max(1px, calc(1.2 * var(--u))) 0 var(--brown))
    drop-shadow(0 calc(-1 * max(1px, calc(1.2 * var(--u)))) 0 var(--brown));
  pointer-events: none;
}

/* ช่องกรอกชื่อ */
.name-bar {
  position: absolute;
  left: calc(41 * var(--u));
  right: calc(39 * var(--u));
  top: calc(470 * var(--u));
  height: calc(70 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(5 * var(--u));
  background: var(--paper);
  border-radius: 999px;
  cursor: text;
  transition: box-shadow .2s ease;
}
.name-bar:focus-within { box-shadow: 0 0 0 calc(4 * var(--u)) var(--brown-soft); }
.name-bar.shake { animation: shake .45s ease; box-shadow: 0 0 0 calc(4 * var(--u)) #E0796B; }
@keyframes shake {
  20%, 60% { transform: translateX(calc(-10 * var(--u))); }
  40%, 80% { transform: translateX(calc(10 * var(--u))); }
}

.name-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(20 * var(--u));
  background: var(--brown);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(29 * var(--u));
  white-space: nowrap;
}
.name-label img { width: calc(33 * var(--u)); height: calc(33 * var(--u)); }

.name-bar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 calc(20 * var(--u)) 0 calc(6 * var(--u));
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--brown);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(28 * var(--u));
}
.name-bar input::placeholder { color: #C9BFB2; font-weight: 400; }

/* =========================================================
   เครื่องมือ
   ========================================================= */
.tools {
  position: relative;
  z-index: 2;
  /* ชิดขอบบัตรด้านซ้าย/ขวา/ล่าง (ไม่มีขอบขาวรอบกล่องน้ำตาล) */
  margin: calc(-30 * var(--u)) calc(-38 * var(--u) - max(1px, calc(1.5 * var(--u)))) calc(-34 * var(--u) - max(1px, calc(1.5 * var(--u))));
  padding: calc(29 * var(--u)) calc(40.5 * var(--u)) calc(36 * var(--u));
  background: var(--brown);
  border-radius: calc(48 * var(--u)) calc(48 * var(--u)) calc(68 * var(--u)) calc(68 * var(--u));
}

/* แท็บหมวด */
.tabs {
  display: flex;
  gap: calc(11 * var(--u));
}
.tab {
  flex: 1;
  height: calc(66 * var(--u));
  background: var(--cream);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(31 * var(--u));
  transition: background .2s ease, transform .2s ease;
}
.tab:hover       { transform: translateY(calc(-2 * var(--u))); }
.tab.active      { background: var(--paper); box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--brown-soft); }

/* กล่องตัวเลือก */
.panel {
  position: relative;
  height: calc(341 * var(--u));
  margin-top: calc(22 * var(--u));
  background: var(--paper);
  border-radius: calc(37 * var(--u));
  overflow: hidden;
}
.pane { display: none; height: 100%; }
.pane.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }

.grid {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
}

/* ปุ่มตัวเลือกทั่วไป */
.opt {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: calc(20 * var(--u));
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.opt:hover  { transform: translateY(calc(-3 * var(--u))); }
.opt:active { transform: scale(.96); }
.opt img    { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.opt.selected {
  background: var(--cream);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--brown-soft);
}

/* สีผิว */
.swatches {
  grid-template-columns: repeat(4, calc(144 * var(--u)));
  grid-auto-rows: calc(137 * var(--u));
  gap: calc(23 * var(--u)) calc(15 * var(--u));
}
.swatch {
  border-radius: calc(14.5 * var(--u));
  border: max(1px, calc(1 * var(--u))) solid var(--brown);
}
.swatch.selected {
  background: var(--c);
  box-shadow: 0 0 0 calc(5 * var(--u)) var(--paper), 0 0 0 calc(9 * var(--u)) var(--brown-soft);
}

/* แถวบนของแท็บ ตา / ทรงผม (ปุ่มย่อย + สี) */
.pane-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--u));
  height: calc(76 * var(--u));
  padding: calc(16 * var(--u)) calc(24 * var(--u)) 0;
}
.color-row { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.pane[data-pane="hair"] .pane-top { justify-content: space-between; padding-inline: calc(26 * var(--u)); }
.pane[data-pane="hair"] .dots { --d: calc(36 * var(--u)); gap: calc(9 * var(--u)); }
.pane-top + .grid { height: calc(100% - 76 * var(--u)); }

/* ตา / ปาก / ตกแต่ง */
.thumbs.eyes  { grid-template-columns: repeat(4, calc(170 * var(--u))); grid-auto-rows: calc(118 * var(--u)); gap: calc(12 * var(--u)) calc(12 * var(--u)); }
.thumbs.eyes .opt  { padding: calc(8 * var(--u)); }
.opt .pupil {
  position: absolute;
  inset: calc(8 * var(--u));
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
}
.thumbs.mouth { grid-template-columns: repeat(3, calc(200 * var(--u))); grid-auto-rows: calc(130 * var(--u)); gap: calc(18 * var(--u)) calc(24 * var(--u)); }
.thumbs.mouth .opt { padding: calc(26 * var(--u)) calc(40 * var(--u)); }
.thumbs.acc   { grid-template-columns: repeat(3, calc(220 * var(--u))); grid-auto-rows: calc(220 * var(--u)); gap: calc(24 * var(--u)); }
.thumbs.acc .opt   { padding: calc(30 * var(--u)); }

/* ทรงผม */
.subtabs {
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--u));
}
.subtab {
  flex: 0 0 auto;
  white-space: nowrap;
  height: calc(56 * var(--u));
  padding: 0 calc(26 * var(--u));
  border-radius: 999px;
  background: var(--cream);
  border: max(1px, calc(1 * var(--u))) solid transparent;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(27 * var(--u));
  transition: background .2s ease;
}
.subtab.active { background: var(--paper); border-color: var(--brown); }

.hair-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(341 * var(--u) - 76 * var(--u));
  padding: 0 calc(20 * var(--u));
}
.hair-list {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: calc(40 * var(--u));
}
.hair-list .opt {
  width: calc(255 * var(--u));
  height: calc(232 * var(--u));
  padding: calc(14 * var(--u));
}

.arrow {
  flex: 0 0 auto;
  width: calc(44 * var(--u));
  height: calc(48 * var(--u));
  background: var(--brown-soft);
  clip-path: polygon(20% 50%, 100% 8%, 100% 92%);
  border-radius: calc(4 * var(--u));
  transition: transform .2s ease, opacity .2s ease;
}
.arrow.next { clip-path: polygon(80% 50%, 0 8%, 0 92%); }
.arrow:hover    { transform: scale(1.12); }
.arrow:disabled { opacity: .25; cursor: default; transform: none; }

/* ปุ่มล่าง */
.nav {
  display: flex;
  gap: calc(12 * var(--u));
  margin-top: calc(21 * var(--u));
}
.nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(70 * var(--u));
  padding: 0 calc(25 * var(--u));
  background: var(--brown-soft);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(34 * var(--u));
  transition: transform .2s ease, filter .2s ease;
}
.nav-btn:hover  { filter: brightness(1.08); }
.nav-btn:active { transform: scale(.98); }
.tri {
  width: calc(36 * var(--u));
  height: calc(40 * var(--u));
  background: var(--paper);
  clip-path: polygon(8% 50%, 100% 4%, 100% 96%);
}
.tri.right { clip-path: polygon(92% 50%, 0 4%, 0 96%); }

/* แจ้งเตือน */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  padding: 10px 22px;
  background: var(--brown);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   📱 มือถือ
   ========================================================= */
@media (max-width: 640px) {
  :root { --u: calc((100vw - 16px) / 640); }

  .scene { padding: 12px 8px 20px; }
  .card  { width: 100%; padding: calc(105 * var(--u)) 12px 16px; border-radius: 28px; }

  .ring  { left: calc(50% - 69.5 * var(--u)); }
  .slot  { left: calc(50% - 90 * var(--u)); }
  .slot .ring.back { left: calc(20.5 * var(--u) - 1px); }

  /* สีพื้นหลัง: 2 คอลัมน์ ให้กดง่ายบนมือถือ */
  .bg-picker { top: calc(112 * var(--u)); right: 8px; gap: 6px; padding: 8px 7px 10px; border-radius: 18px; }
  .bg-picker .picker-label { font-size: 11px; }
  .bg-picker .dots { display: grid; grid-template-columns: repeat(2, 22px); gap: 7px; }
  .bg-picker .dot  { --d: 22px; }
  /* มือถือ: ย่อเหลือจุดสีที่เลือก กด "พื้นหลัง" เพื่อเปิดดูทั้งหมด */
  .bg-picker:not(.open) .dots { grid-template-columns: 22px; }
  .bg-picker:not(.open) .dot:not(.selected) { display: none; }
  .bg-picker .picker-label::after { content: " ▾"; font-size: 9px; }
  .bg-picker.open .picker-label::after { content: " ▴"; }

  .dots       { gap: 8px; }
  .dot        { --d: 26px; }
  .dot.selected { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brown-soft); }
  .picker-label { font-size: 14px; }
  .pane-top   { height: auto; flex-wrap: wrap; gap: 10px; padding: 14px 10px 0; }
  .pane-top + .grid { height: auto; }
  .subtab     { height: 34px; padding: 0 14px; font-size: 14px; }
  .pane[data-pane="hair"] .pane-top { justify-content: center; padding-inline: 10px; }
  .pane[data-pane="hair"] .dots { --d: 26px; gap: 8px; }

  .name-bar   { left: 10px; right: 10px; }
  .name-label { padding: 0 calc(20 * var(--u)) 0 calc(14 * var(--u)); }

  .tools  { margin: calc(-30 * var(--u)) -13px -17px; padding: 14px 10px 14px; border-radius: 22px 22px 28px 28px; }
  .tabs   { gap: 5px; }
  .tab    { font-size: calc(26 * var(--u)); }
  .panel  { height: auto; min-height: calc(390 * var(--u)); margin-top: 12px; border-radius: 18px; }
  .pane   { min-height: inherit; }
  .grid   { padding: 14px 10px; min-height: inherit; }

  .swatches     { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 10px; width: 100%; }
  .swatch       { aspect-ratio: 144 / 137; }
  .thumbs.eyes  { grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc(110 * var(--u)); gap: 8px; width: 100%; }
  .thumbs.mouth { grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc(130 * var(--u)); gap: 8px; width: 100%; }
  .thumbs.acc   { grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc(200 * var(--u)); gap: 8px; width: 100%; }
  .thumbs.mouth .opt { padding: calc(26 * var(--u)) calc(30 * var(--u)); }

  .pane.active { display: flex; flex-direction: column; }
  .pane.active > .grid { flex: 1; }
  .hair-row   { flex: 1; height: auto; padding: 10px 6px 14px; }   /* ยืดเต็มกล่อง ไม่เหลือที่ว่างด้านล่าง */
  .hair-list  { gap: 8px; }
  .hair-list .opt { width: calc(230 * var(--u)); height: calc(250 * var(--u)); }

  .nav     { gap: 8px; margin-top: 12px; }
  .nav-btn { height: calc(76 * var(--u)); padding: 0 calc(22 * var(--u)); font-size: calc(32 * var(--u)); }
}

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