/* =========================================================
   สุขครบสูตร PERMA-V — เวอร์ชันเกม
   A-Dream Studio
   ---------------------------------------------------------
   หลักการ: เต็มจอ 1 หน้าจอ = 1 ฉาก · ไม่มีการ scroll หน้าเว็บ
   เปลี่ยนฉากด้วยปุ่มเท่านั้น · รองรับทั้งจอแนวนอนและแนวตั้ง
   ========================================================= */

:root{
  /* สีประจำตัวอักษร (ชุดเดียวกับ Infographic) */
  --p:#FED251; --p-2:#FFB300; --p-bg1:#FFF6DC; --p-bg2:#FFE49A; --p-ink:#7A5200;
  --e:#4686CA; --e-2:#2C63A0; --e-bg1:#E9F2FB; --e-bg2:#B9D6F1; --e-ink:#17436F;
  --r:#FCA7C4; --r-2:#E3628F; --r-bg1:#FFEFF6; --r-bg2:#FCC7DC; --r-ink:#8E2F56;
  --m:#7262B7; --m-2:#5546A0; --m-bg1:#F0EDFF; --m-bg2:#CFC5F2; --m-ink:#3F3080;
  --a:#FE9236; --a-2:#DE6E12; --a-bg1:#FFF1E1; --a-bg2:#FFCE9C; --a-ink:#8C4507;
  --v:#4F9A50; --v-2:#377A38; --v-bg1:#EBF6E8; --v-bg2:#C2E2BC; --v-ink:#2A6A2B;

  --ink:#2B3160; --ink-2:#4A5379; --muted:#7B82A3;
  --paper:#FFFFFF; --line:#E6E2D6;
  --shadow:0 10px 0 rgba(0,0,0,.10);
  --shadow-soft:0 14px 34px rgba(43,49,96,.16);
  --font:"Noto Sans Thai","Sarabun","Leelawadee UI",Tahoma,system-ui,sans-serif;

  /* ค่าที่ engine เปลี่ยนตามหลักสูตรที่กำลังเล่น */
  --c:var(--p); --c2:var(--p-2); --cb1:var(--p-bg1); --cb2:var(--p-bg2); --ci:var(--p-ink);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100%; overscroll-behavior:none }
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:#1B1F3A;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* ← ห้าม scroll หน้าเว็บ */
  -webkit-tap-highlight-color:transparent;
}
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; cursor:pointer }
[hidden]{ display:none !important }
:focus-visible{ outline:3px solid #2B3160; outline-offset:3px; border-radius:10px }

/* =========================================================
   โครงหลัก
   ========================================================= */
.app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:linear-gradient(170deg,var(--cb1),var(--cb2));
  transition:background .5s ease;
}

/* --- แถบบน --- */
.hud{
  flex:0 0 auto; height:54px;
  display:flex; align-items:center; gap:12px; padding:0 14px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(8px);
  border-bottom:2px solid rgba(255,255,255,.7);
}
.hud__back{
  border:0; background:rgba(255,255,255,.85); border-radius:999px;
  width:38px; height:38px; display:grid; place-items:center; font-size:19px;
  box-shadow:0 3px 0 rgba(0,0,0,.10); flex:0 0 auto;
}
.hud__back:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.10) }
.hud__title{ font-weight:800; font-size:15.5px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hud__title small{ display:block; font-weight:400; font-size:12px; color:var(--muted) }
.hud__dots{ display:flex; gap:5px; flex:0 0 auto }
.hud__dots i{
  width:9px; height:9px; border-radius:50%; background:rgba(43,49,96,.18); display:block;
  transition:background .3s ease, transform .3s ease;
}
.hud__dots i[data-on="true"]{ background:var(--c2); transform:scale(1.25) }
.hud__mute{
  border:0; background:rgba(255,255,255,.85); border-radius:999px;
  width:38px; height:38px; display:grid; place-items:center; font-size:16px;
  box-shadow:0 3px 0 rgba(0,0,0,.10); flex:0 0 auto;
}

/* --- เวที --- */
.stage{ flex:1 1 auto; position:relative; overflow:hidden; min-height:0 }
.scene{
  position:absolute; inset:0;
  display:grid; grid-template-rows:1fr auto;
  padding:16px 16px 0;
  animation:sceneIn .38s cubic-bezier(.2,.8,.3,1);
}
.scene[hidden]{ display:none !important }
@keyframes sceneIn{ from{ opacity:0; transform:translateY(14px) } }

/* --- แถบปุ่มล่าง --- */
.dock{
  flex:0 0 auto; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap;
  background:rgba(255,255,255,.45); border-top:2px solid rgba(255,255,255,.75);
}

/* =========================================================
   ปุ่ม
   ========================================================= */
.btn{
  border:0; border-radius:999px; padding:14px 30px; font-size:17px; font-weight:800;
  background:var(--c2); color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn:hover{ filter:brightness(1.07) }
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.18) }
.btn[disabled]{ opacity:.4; pointer-events:none }
.btn--ghost{ background:rgba(255,255,255,.9); color:var(--ink); box-shadow:0 4px 0 rgba(0,0,0,.10) }
.btn--sm{ padding:10px 20px; font-size:15px }
.btn--big{ padding:18px 44px; font-size:20px }

/* =========================================================
   ฉากแบบ "ตัวละครพูด"
   ========================================================= */
.art{
  position:relative; display:grid; place-items:center; min-height:0;
  padding-bottom:10px;
}
.art__img{ max-height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(43,49,96,.20)) }
.art__stack{ position:relative; display:flex; align-items:flex-end; gap:14px; max-height:100%; }
.art__stack img{ max-height:min(46vh,420px); width:auto; object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(43,49,96,.20)) }
.art__stack .mascot{ max-height:min(28vh,220px) }
.art__stack .mascot--bounce{ animation:bob 2.4s ease-in-out infinite }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ช่องเสียบแอนิเมชันที่ทีมจะทำมาใส่ทีหลัง */
.slot{
  width:min(100%,760px); aspect-ratio:16/10; max-height:100%;
  border-radius:22px; overflow:hidden; position:relative;
  background:rgba(255,255,255,.62);
  border:3px dashed rgba(43,49,96,.22);
  display:grid; place-items:center; text-align:center;
}
.slot img,.slot video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.slot__ph{ padding:22px; color:var(--muted); font-size:15px; line-height:1.7 }
.slot__ph b{ display:block; color:var(--ink); font-size:17px; margin-bottom:4px }
.slot__ph code{
  display:inline-block; margin-top:8px; background:rgba(43,49,96,.08);
  padding:4px 12px; border-radius:8px; font-size:14px; font-family:ui-monospace,monospace;
}
.slot--filled{ border-style:solid; border-color:rgba(255,255,255,.85) }

/* กล่องข้อความ */
.msg{
  position:relative; background:var(--paper); border-radius:22px 22px 0 0;
  border:3px solid var(--c2); border-bottom:0;
  padding:18px 22px 20px; box-shadow:0 -8px 26px rgba(43,49,96,.10);
  max-width:940px; width:100%; margin:0 auto;
}
.msg__who{
  position:absolute; top:-17px; inset-inline-start:24px;
  background:var(--c2); color:#fff; font-weight:800; font-size:14px;
  padding:5px 18px; border-radius:999px; box-shadow:0 3px 0 rgba(0,0,0,.15);
}
.msg__text{
  margin:6px 0 0; font-size:clamp(17px,2.2vw,21px); line-height:1.65; min-height:2.6em;
}
.msg__text b{ color:var(--ci) }
.msg__next{
  position:absolute; inset-inline-end:18px; bottom:14px;
  font-size:18px; color:var(--c2); animation:blink 1.1s steps(2,start) infinite;
}
@keyframes blink{ 50%{ opacity:.15 } }

/* =========================================================
   ฉากแบบ "การ์ดกลางจอ"
   ========================================================= */
.card{
  align-self:center; justify-self:center;
  background:var(--paper); border-radius:28px; padding:clamp(22px,4vw,38px);
  box-shadow:var(--shadow-soft); border:3px solid rgba(255,255,255,.9);
  max-width:min(100%,780px); max-height:100%; overflow:auto; text-align:center;
}
.card h2{ font-size:clamp(22px,3.4vw,32px); margin:0 0 10px; line-height:1.35 }
.card p{ margin:0 0 12px; font-size:clamp(15.5px,2vw,18px); line-height:1.7; color:var(--ink-2) }
.card p:last-child{ margin-bottom:0 }
.card .lead{ font-size:clamp(17px,2.3vw,20px); color:var(--ink) }

.eyebrow{
  display:inline-block; background:var(--c); color:var(--ci); font-weight:800;
  font-size:13.5px; padding:6px 18px; border-radius:999px; margin-bottom:14px;
}

/* =========================================================
   หน้าเปิด
   ========================================================= */
.home{ text-align:center; place-items:center; display:grid; align-content:center; gap:6px }
.home h1{
  font-size:clamp(26px,5vw,46px); line-height:1.3; margin:0 0 12px; font-weight:800;
  text-wrap:balance;
}
.home p{ font-size:clamp(15px,2.2vw,19px); color:var(--ink-2); max-width:44ch; margin:0 auto 8px }
.home__row{ display:flex; gap:6px; justify-content:center; margin-bottom:14px; flex-wrap:wrap }
.home__row img{ height:clamp(56px,11vh,110px); width:auto; animation:bob 3s ease-in-out infinite }
.home__row img:nth-child(2){ animation-delay:.25s }
.home__row img:nth-child(3){ animation-delay:.5s }
.home__row img:nth-child(4){ animation-delay:.75s }
.home__row img:nth-child(5){ animation-delay:1s }
.home__row img:nth-child(6){ animation-delay:1.25s; height:clamp(72px,14vh,140px) }

/* =========================================================
   หน้าคัดกรอง "ตอนนี้คุณเป็นอย่างไรบ้าง?"
   ========================================================= */
.triage{ display:grid; align-content:center; gap:18px; text-align:center; overflow:auto }
.triage h2{ font-size:clamp(21px,3.6vw,32px); margin:0 }
.triage__grid{
  display:grid; gap:12px; width:min(100%,880px); margin-inline:auto;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:620px){ .triage__grid{ grid-template-columns:repeat(2,1fr); gap:10px } }
.feelbtn{
  border:3px solid transparent; background:var(--paper); border-radius:20px;
  padding:14px 10px 12px; text-align:center; box-shadow:0 5px 0 rgba(0,0,0,.10);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  display:grid; gap:6px; justify-items:center;
}
.feelbtn:hover{ transform:translateY(-4px); border-color:var(--fc) }
.feelbtn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.10) }
.feelbtn__ico{
  width:clamp(48px,9vh,68px); height:clamp(48px,9vh,68px); border-radius:50%;
  display:grid; place-items:center; background:var(--fbg);
}
.feelbtn__ico svg{ width:62%; height:62% }
.feelbtn b{ font-size:clamp(13px,1.8vw,15.5px); font-weight:700; line-height:1.35 }
.feelbtn small{ font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.04em }

/* ปุ่มที่เป็นการ์ดเต็มใบจากอาม — ตัวปุ่มต้องโปร่งสนิท
   ไม่งั้นจะได้พื้นขาวซ้อนพื้นขาว เงาซ้อนเงา ขอบซ้อนขอบ */
.feelbtn--img{
  background:none; border:0; box-shadow:none; padding:0; display:block;
  border-radius:20px; min-height:0;
}
.feelbtn--img img{ display:block; width:100%; height:auto }
.feelbtn--img:hover{ transform:translateY(-4px); border-color:transparent }
.feelbtn--img:active{ transform:translateY(2px); box-shadow:none }

/* =========================================================
   เมนู 6 หลักสูตร
   ========================================================= */
.menu{ display:grid; align-content:center; gap:14px; overflow:auto }
.menu__grid{
  display:grid; gap:12px; width:min(100%,940px); margin-inline:auto;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:700px){ .menu__grid{ grid-template-columns:repeat(2,1fr) } }
.mcard{
  border:0; border-radius:22px; padding:12px 12px 14px; text-align:center;
  background:var(--mbg); box-shadow:0 6px 0 rgba(0,0,0,.10);
  display:grid; justify-items:center; gap:4px;
  transition:transform .15s cubic-bezier(.2,1.2,.4,1);
}
.mcard:hover{ transform:translateY(-6px) }
.mcard:active{ transform:translateY(2px) }
.mcard img{ height:clamp(56px,12vh,104px); width:auto }
.mcard b{ font-size:clamp(14px,2vw,17px) }
.mcard small{ font-size:11.5px; color:var(--muted); font-weight:700 }

/* =========================================================
   วีดีโอเต็มจอ
   ========================================================= */
.vid{
  width:min(100%,900px); aspect-ratio:16/9; max-height:100%;
  border-radius:22px; overflow:hidden; position:relative;
  background:#151935; border:3px solid rgba(255,255,255,.85);
  display:grid; place-items:center; padding:0;
}
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.vid__play{
  width:88px; height:88px; border-radius:50%; background:var(--c); color:var(--ci);
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .15s ease;
}
.vid:hover .vid__play{ transform:scale(1.08) }
.vid__cap{ position:absolute; bottom:16px; inset-inline:0; color:#fff; font-weight:700; font-size:15px }
.vid--playing .vid__play,.vid--playing .vid__cap{ display:none }

/* =========================================================
   ตัวเลือกแบบปุ่มใหญ่ (ใช้ในหลายฉาก)
   ========================================================= */
.convo .opts{ align-content:center }
.opts{ display:grid; gap:10px; width:min(100%,720px); margin:12px auto 0;
  list-style:none; padding:0 }
/* บางกิจกรรมใช้ <ul><li><button> ตัวปุ่มจึงไม่ใช่ลูกของ grid โดยตรง
   ถ้าไม่ทำ li เป็น grid ด้วย ปุ่มจะกว้างตามข้อความ ยาวไม่เท่ากันทั้งชุด */
.opts > li{ display:grid }
.opt{
  border:3px solid rgba(43,49,96,.10); background:var(--paper); border-radius:18px;
  padding:14px 20px; font-size:clamp(15.5px,2vw,18px); text-align:start; line-height:1.55;
  box-shadow:0 4px 0 rgba(0,0,0,.08);
  display:flex; gap:14px; align-items:center;
  transition:transform .12s ease, border-color .12s ease;
}
.opt:hover{ border-color:var(--c2); transform:translateX(3px) }
.opt:active{ transform:translateY(2px) }
.opt__k{
  flex:0 0 auto; width:32px; height:32px; border-radius:11px; background:var(--cb2);
  display:grid; place-items:center; font-weight:800; font-size:15px; color:var(--ci);
}
.opt[aria-pressed="true"]{ border-color:var(--c2); background:var(--cb1) }

/* =========================================================
   ช่องพิมพ์
   ========================================================= */
.field{
  width:100%; font:inherit; font-size:17px; color:var(--ink);
  padding:14px 18px; border-radius:16px; border:3px solid rgba(43,49,96,.12);
  background:var(--paper);
}
.field:focus{ border-color:var(--c2); outline:none }
.fieldrow{ display:flex; gap:10px; align-items:center; margin-bottom:10px }
.fieldrow .n{
  flex:0 0 auto; width:36px; height:36px; border-radius:12px; background:var(--c);
  color:var(--ci); display:grid; place-items:center; font-weight:800;
}

/* =========================================================
   เวทีกิจกรรม (ฉากที่เป็นเกมจริง)
   ========================================================= */
.play{ display:grid; grid-template-rows:auto 1fr; gap:10px; min-height:0 }
/* กิจกรรมที่เป็นบทสนทนา ไม่ควรยืดเต็มจอกว้าง */
.play--narrow > *{ width:min(100%,880px); margin-inline:auto }
.play__hud{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(255,255,255,.7); border-radius:16px; padding:8px 16px;
  font-weight:800; font-size:15px;
}
.play__hud .big{ font-size:20px; color:var(--ci) }
.play__timer{ flex:1 1 120px; height:12px; border-radius:999px; background:rgba(43,49,96,.12); overflow:hidden }
.play__timer i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--v),var(--p));
  transform-origin:left center; transition:transform .1s linear }
.play__timer.low i{ background:linear-gradient(90deg,#F5A623,#E8503A) }
.play__clock{ font-variant-numeric:tabular-nums; min-width:48px; text-align:end }

/* กล่องที่ใช้วัดพื้นที่ว่างให้เวทีเกม */
.fit{ position:relative; min-height:0; display:grid; place-items:center; overflow:hidden }

/* เวทีเกมต้องเป็นสัดส่วน 16:10 เป๊ะเสมอ
   เพราะตำแหน่งจุดกดคิดเป็น % ของภาพ — ขนาดจริงคำนวณด้วย JS (fitBoard)
   ห้ามใส่ width/height ทับใน CSS */
.board{
  position:relative; border-radius:20px; overflow:hidden;
  border:3px solid rgba(255,255,255,.9); background:#DDD9CE;
}
.board__art{ position:absolute; inset:0 }
.board__art svg{ width:100%; height:100%; display:block }
#sceneBase{
  filter:grayscale(calc(.92 - var(--found,0) * .13)) brightness(calc(.86 + var(--found,0) * .023));
  transition:filter .8s cubic-bezier(.2,.7,.3,1);
}
.board__art [data-item]{ filter:grayscale(.95) brightness(.84); transition:filter .5s cubic-bezier(.2,.7,.3,1) }
.board__art [data-item].on{ filter:none }
.board.done #sceneBase,.board.done .board__art [data-item]{ filter:none }

.hs{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  transform:translate(-50%,-50%); border:0; background:transparent; padding:0; border-radius:14px;
}
.hs::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 3px rgba(255,255,255,0); transition:box-shadow .2s ease, background .2s ease;
}
.hs:hover::before{ box-shadow:0 0 0 3px rgba(255,255,255,.9); background:rgba(255,255,255,.14) }
/* ขยาย "พื้นที่กดได้" ให้ถึง 44px เสมอ โดยไม่ทำให้กรอบไฮไลต์ใหญ่ตาม
   (สำคัญบนจอมือถือ ที่ช่องเล็ก ๆ อาจเหลือแค่ ~33px) */
.hs::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:100%; height:100%; min-width:44px; min-height:44px;
}
.hs[data-got="true"]{ pointer-events:none }
.hs[data-got="true"]::before{
  box-shadow:0 0 0 4px var(--v), 0 0 26px 8px rgba(79,154,80,.4);
  background:rgba(255,255,255,.10); animation:pop .45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{ 0%{ transform:scale(.7) } 60%{ transform:scale(1.12) } 100%{ transform:scale(1) } }
.hs__tip{
  position:absolute; left:50%; bottom:calc(100% + 10px); --tx:-50%;
  transform:translateX(var(--tx)) translateY(6px);
  background:var(--paper); color:var(--ink); padding:7px 14px; border-radius:14px;
  width:max-content; max-width:min(52vw,240px); text-align:center; line-height:1.35;
  font-size:14px; font-weight:700; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.hs[data-got="true"] .hs__tip{ opacity:1; transform:translateX(var(--tx)) translateY(0) }
.hs[data-tip="off"] .hs__tip,.board.done .hs__tip{ opacity:0 }
.hs--down .hs__tip{ bottom:auto; top:calc(100% + 10px) }
.hs--L .hs__tip{ left:0; --tx:0 }
.hs--R .hs__tip{ left:auto; right:0; --tx:0 }

.veil{
  position:absolute; inset:0; z-index:10; display:grid; place-items:center; text-align:center;
  background:rgba(28,32,62,.82); color:#fff; padding:22px; backdrop-filter:blur(3px);
}
.veil h3{ color:#fff; margin:0 0 6px; font-size:clamp(20px,3vw,28px) }
.veil p{ color:#D9DDF2; max-width:44ch; margin:0 auto; font-size:clamp(15px,2vw,17px) }
.veil img{ height:clamp(64px,14vh,120px); margin:0 auto 10px; width:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)) }
.veil .big{ font-size:clamp(40px,9vw,72px); font-weight:800; color:var(--p); line-height:1.1 }
.count3{
  position:absolute; inset:0; z-index:12; display:grid; place-items:center;
  background:rgba(28,32,62,.75); color:#fff; font-size:clamp(60px,16vw,140px); font-weight:800;
}

/* =========================================================
   รายการผลลัพธ์
   ========================================================= */
.list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; text-align:start }
.list li{
  display:flex; gap:12px; align-items:center; font-size:15.5px; line-height:1.5;
  background:rgba(255,255,255,.7); border:2px solid rgba(43,49,96,.08);
  border-radius:14px; padding:10px 16px;
}
.list li[data-ok="true"]{ background:var(--v-bg1); border-color:var(--v) }
.list .mk{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:800; background:rgba(43,49,96,.10); color:var(--muted);
}
.list li[data-ok="true"] .mk{ background:var(--v); color:#fff }

/* =========================================================
   คำเตือนความปลอดภัย (ห้ามลบ)
   ========================================================= */
.warn{
  background:#FFF1E2; border:2px solid #F0B27A; border-radius:16px;
  padding:14px 18px; font-size:15px; color:var(--ink-2); text-align:start;
}
.warn b{ color:#A4550D }

/* =========================================================
   จอแนวตั้ง (มือถือ) — บีบให้ทุกอย่างยังอยู่ใน 1 หน้าจอ
   ========================================================= */
@media (orientation:portrait) and (max-width:820px){
  .hud{ height:50px }
  .scene{ padding:10px 10px 0 }
  .art__stack{ flex-direction:column; align-items:center; gap:4px }
  .art__stack img{ max-height:min(34vh,300px) }
  .art__stack .mascot{ max-height:min(16vh,130px); position:absolute; inset-inline-end:0; bottom:0 }
  .msg{ padding:16px 18px 18px; border-radius:20px 20px 0 0 }
  .msg__text{ font-size:16.5px }
  .dock{ padding:10px 12px calc(10px + env(safe-area-inset-bottom)) }
  .btn{ padding:13px 24px; font-size:16px }
  .btn--big{ padding:15px 32px; font-size:18px }
  .card{ padding:20px 18px; border-radius:22px }
  .slot{ aspect-ratio:4/3 }
  .home__row img{ height:clamp(44px,8vh,72px) }
}

/* จอเตี้ยมาก (มือถือแนวนอน) */
@media (orientation:landscape) and (max-height:520px){
  .hud{ height:44px }
  .scene{ padding:8px 12px 0 }
  .art__stack img{ max-height:38vh }
  .msg{ padding:12px 18px 14px }
  .msg__text{ font-size:15.5px; min-height:2.2em }
  .dock{ padding:8px 12px }
  .btn{ padding:10px 22px; font-size:15px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* คำชวนหมุนจอ (ไม่บังคับ) */
.rotate-hint{
  position:absolute; inset-inline:0; bottom:6px; margin-inline:auto;
  width:max-content; max-width:90%;
  background:rgba(43,49,96,.86); color:#fff; border-radius:999px;
  padding:8px 18px; font-size:13.5px; font-weight:700; text-align:center;
  pointer-events:none; animation:hintIn .5s ease .6s both;
}
@keyframes hintIn{ from{ opacity:0; transform:translateY(8px) } }


/* =========================================================
   ตัวละครเลื่อนขึ้นมาพูด (สไตล์เกม)
   ========================================================= */
/* หมายเหตุ: ห้ามใส่ position:relative ให้ .scene--talk
   เพราะ .scene เป็น position:absolute; inset:0 อยู่แล้ว
   ถ้าเปลี่ยนเป็น relative ฉากจะหดตามเนื้อหา แล้วตัวละครจะหลุดจอ */
.scene--talk{ overflow:hidden }
.scene--talk .art{ min-height:0 }

/* พื้นเวทีจาง ๆ หลังตัวละคร — ทำให้พื้นที่ว่างด้านบนดูเป็น "ฉาก" ไม่ใช่ที่ว่าง
   ทีมกราฟิกเปลี่ยนเป็นภาพพื้นหลังจริงได้ภายหลัง โดยแทนที่ background ของ .art::before */
.scene--talk .art::before{
  content:""; position:absolute; left:-16px; right:-16px; bottom:-10px; height:46%;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    linear-gradient(to top, rgba(255,255,255,.42), rgba(255,255,255,0));
  border-radius:50% 50% 0 0 / 22% 22% 0 0;
  pointer-events:none; z-index:1;
}

/* ตัวละครอยู่ใน .art (ช่องบนของฉาก) — height:100% จึงเต็มพื้นที่ว่าง
   เหนือกล่องข้อความพอดีทุกขนาดจอ ไม่เหลือช่องว่างด้านบน */
.actor{
  position:absolute; bottom:-10px; z-index:2;
  height:100%; max-height:560px;
  width:40vw; max-width:520px;
  object-fit:contain; object-position:bottom center;   /* วางชิดพื้น ไม่ยืดภาพ */
  filter:drop-shadow(0 14px 22px rgba(43,49,96,.22));
  animation:actorIn .55s cubic-bezier(.2,1.05,.35,1) both;
  pointer-events:none;
}
@keyframes actorIn{ from{ transform:translateY(28%) scale(.96); opacity:0 } }
.actor--right{ inset-inline-end:4% }
.actor--left{ inset-inline-start:4%; animation-delay:.08s }
.actor--sm{ height:78% }
/* สองตัวพร้อมกัน — ย่อลงเล็กน้อยเพื่อไม่ให้บังกัน */
.scene--duo .actor{ width:34vw; max-width:440px }

/* กล่องข้อความต้องอยู่หน้าตัวละคร ตัวละครจะได้โผล่จากหลังกล่อง */
.scene--talk .msg{ position:relative; z-index:3 }

/* =========================================================
   ฉากพื้นหลังจริง (assets/bg/)
   ---------------------------------------------------------
   วางไว้ที่ .stage ไม่ใช่ที่ .scene — ฉากพื้นหลังจะได้อยู่นิ่ง
   ตอนตัวละครสลับฉาก เหมือนเกม visual novel
   ========================================================= */
.stage--bg{
  /* ตัวภาพใส่มาจาก engine.js เป็น inline style — ที่นี่คุมแค่วิธีวาง */
  background-size:cover;
  background-position:center 60%;   /* เกาะค่อนล่าง จะได้เห็นพื้นห้อง ตัวละครจะได้ไม่ลอย */
  background-repeat:no-repeat;
}
/* มีฉากจริงแล้ว ตัวละครต้องเล็กลงหน่อย ไม่งั้นตัวสูงเท่าห้อง กลายเป็นภาพตัดแปะ */
.stage--bg .actor{ height:84%; max-height:470px }
.stage--bg .actor--sm{ height:68% }
/* ม่านจางที่ก้นจอ — ให้ตัวละครกับกล่องข้อความลอยออกมาจากฉาก อ่านง่ายขึ้น */
.stage--bg::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(255,255,255,.42) 0%, rgba(255,255,255,.13) 26%, rgba(255,255,255,0) 52%);
}
.stage--bg .scene{ z-index:1 }
/* มีฉากจริงแล้ว ไม่ต้องมีพื้นเวทีจาง ๆ ของเดิมซ้อนอีก */
.stage--bg .scene--talk .art::before{ display:none }
.stage--bg .msg{ box-shadow:0 -10px 34px rgba(43,49,96,.24) }
.stage--bg .actor{ filter:drop-shadow(0 14px 26px rgba(43,49,96,.34)) }

/* =========================================================
   ปรับรายตัวละคร
   ---------------------------------------------------------
   ต้นฉบับแต่ละตัวครอปมาไม่เท่ากัน เปรมเป็นภาพครึ่งอก (หัวใหญ่)
   วีครอปมาถึงเอว (หัวเล็กกว่าครึ่งนึง) ถ้าใช้ความสูงเดียวกันหมด
   จะเห็นเป็นคนละสเกลทันที จึงต้องชดเชยเป็นตัว ๆ ไป
   ใช้ selector .actor.actor--x เพื่อให้ชนะ .stage--bg .actor ด้านบน
   ========================================================= */

/* เปรมที่อยู่ฝั่งซ้าย — พลิกให้หันหน้าเข้าหาคู่สนทนา */
.actor--flip{ scale:-1 1 }

/* วี: ครอปมาถึงเอว หัวจึงเล็กกว่าเปรมราว 25% เมื่อวางให้สูงเท่ากัน
   ⚠️ ต้องคุมด้วย "ความกว้าง" ให้สัมพันธ์กับตัวอื่นเสมอ (~80% ของกรอบปกติ)
   ห้ามคุมด้วย height% อย่างเดียว — เพราะตัวอื่นภาพเกือบจัตุรัสจะโดนจำกัดด้วยความกว้าง
   ส่วนวีภาพผอม (0.6:1) ไม่โดน พอเจอจอที่สูงกว่า 16:10 วีจะโตขึ้นตัวเดียวจนหัวใหญ่กว่าเปรม
   ส่วน height ตั้งเผื่อไว้เฉย ๆ ไม่ให้มันไปตัดความกว้าง แล้วปล่อยช่วงเอวจมหลังกล่องข้อความ */
.actor.actor--v-speak{ height:124%; bottom:-24%; max-height:none; width:32vw; max-width:416px }
.scene--duo .actor.actor--v-speak{ width:27vw; max-width:352px }

/* อาร์อาร์: มากันเป็นคู่ ภาพจึงกว้าง 1.6:1 พอ fit ตามความกว้างแล้วเลยเตี้ยกว่าเพื่อน
   ต้องเพิ่มความกว้างของกรอบให้ตัวโตขึ้น */
.actor.actor--r-speak{ width:56vw; max-width:720px }
.scene--duo .actor.actor--r-speak{ width:52vw; max-width:660px }

/* ตอนเปลี่ยนฉาก ให้ตัวละครเลื่อนลงไปก่อน */
.scene--out{ animation:sceneOut .26s ease forwards }
.scene--out .actor{ animation:actorOut .26s ease forwards }
@keyframes sceneOut{ to{ opacity:0 } }
@keyframes actorOut{ to{ transform:translateY(34%); opacity:0 } }

@media (orientation:portrait) and (max-width:820px){
  .stage--bg{ background-position:center 52% }
  .actor{ width:72vw; max-width:none }
  .actor.actor--r-speak{ width:96vw; max-width:none }
  .scene--duo .actor.actor--r-speak{ width:88vw; max-width:none }
  .actor.actor--v-speak{ width:51vw; max-width:none }
  .scene--duo .actor.actor--v-speak{ width:50vw; max-width:none }
  .actor--right{ inset-inline-end:0 }
  .actor--left{ inset-inline-start:0 }
  /* จอแคบ วางสองตัวเหลื่อมกันแบบเกม: ตัวที่พูดอยู่หน้า ตัวที่ฟังอยู่หลังและเล็กกว่า */
  .scene--duo .actor{ max-width:none }
  .scene--duo .actor--right{ width:70vw; height:88%; inset-inline-end:-8%; z-index:2 }
  .scene--duo .actor--left { width:58vw; height:72%; inset-inline-start:-8%; z-index:1 }
}
@media (orientation:landscape) and (max-height:520px){
  .actor{ max-height:none; width:32vw }
  .actor.actor--r-speak{ width:46vw; max-width:none }
  .scene--duo .actor.actor--r-speak{ width:42vw; max-width:none }
  /* จอเตี้ยมาก วีถูกจำกัดด้วยความสูงแทนความกว้าง ต้องลด height ตรง ๆ */
  .actor.actor--v-speak{ height:108%; bottom:-10%; width:26vw; max-width:none }
  .scene--duo .actor.actor--v-speak{ width:22vw; max-width:none }
  .scene--duo .actor{ width:28vw }
}

/* =========================================================
   เวทีกิจกรรมแบบใช้ "ภาพจริง" (ไม่ใช่ SVG)
   ========================================================= */
.board__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(calc(.92 - var(--found,0) * .13)) brightness(calc(.86 + var(--found,0) * .022));
  transition:filter .8s cubic-bezier(.2,.7,.3,1); }
.board.done .board__photo{ filter:none }

/* ช่องสีที่เปิดออกมาเมื่อหาเจอ — ใช้ภาพเดียวกันแต่ไม่ซีด */
.reveal{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  transform:translate(-50%,-50%);
  background-image:var(--scene); background-repeat:no-repeat;
  border-radius:12px; box-shadow:0 0 0 4px var(--v), 0 0 26px 8px rgba(79,154,80,.35);
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);
  pointer-events:none;
}
.board.done .reveal{ box-shadow:0 0 0 3px rgba(255,255,255,.55) }


/* =========================================================
   กิจกรรมของหลักสูตร E · R · M · A · V
   ---------------------------------------------------------
   หลักการเดียวกับ P: ทุกอย่างต้องอยู่ใน 1 หน้าจอ ห้าม scroll
   ========================================================= */

/* --- มิเตอร์ในแถบ play__hud เปลี่ยนสีตามหลักสูตร --- */
.meter--r i{ background:linear-gradient(90deg,var(--r-2),var(--r)) }
.meter--m i{ background:linear-gradient(90deg,var(--m-2),var(--m)) }
.meter--a i{ background:linear-gradient(90deg,var(--a-2),var(--a)) }
.meter--v i{ background:linear-gradient(90deg,var(--v-2),var(--v)) }
.play__hud .target{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap }
.play__hud .target i{ width:16px; height:16px; border-radius:50%; display:inline-block;
  box-shadow:0 0 0 2px rgba(255,255,255,.9) }

/* =========================================================
   E — จับจังหวะ
   ========================================================= */
.board--game{ background:linear-gradient(180deg,#EAF2FB,#D3E4F6) }
.bub{
  position:absolute; top:0; border:0; padding:0; border-radius:50%;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.13), 0 5px 12px rgba(43,49,96,.18);
  cursor:pointer; will-change:transform;
}
.bub::after{ content:""; position:absolute; left:22%; top:16%; width:24%; height:24%;
  border-radius:50%; background:rgba(255,255,255,.55) }
.bub.pop{ animation:bubPop .3s ease forwards }
@keyframes bubPop{ to{ transform:scale(1.5); opacity:0 } }

/* แจ้งเตือนปลอม — กรมอนามัยขอให้เด้งใหญ่กลางจอ (2026-09-16)
   ⚠️ ห้ามใส่ฉากมืดคลุมทั้งกระดาน เพราะกลไกของกิจกรรมคือ "ยังกดฟองได้อยู่
      แต่ต้องแบ่งใจ" ถ้าคลุมจนกดไม่ได้เลย จะกลายเป็นแค่หยุดเกม ไม่ใช่สมาธิตก
   ⚠️ ต้องมีมาสคอต E อยู่ในกล่องเสมอ ไม่ให้คนเข้าใจผิดว่าเป็นโฆษณาจริง */
.fakenotif{
  /* ⚠️ ต้องเป็น fixed ไม่ใช่ absolute — กระดานเกมแคบกว่าหน้าจอมาก
     ถ้าอิงกระดาน กล่องจะกว้างแค่ 200–400px ซึ่งไม่ใช่ "เด้งใหญ่กลางจอ" */
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:18px; z-index:60;
  width:min(90vw,620px); padding:24px 26px; border-radius:26px;
  background:rgba(255,255,255,.98);
  box-shadow:0 26px 60px rgba(43,49,96,.34), 0 0 0 5px rgba(70,134,202,.16);
  animation:notifIn .34s cubic-bezier(.2,1.35,.4,1) both;
}
@keyframes notifIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.72) } }
.fakenotif img{ width:76px; height:76px; flex:0 0 auto }
.fakenotif p{ margin:0; font-size:20px; line-height:1.45; font-weight:700; flex:1 }
.fakenotif p b{ display:block; font-size:14.5px; color:var(--muted); font-weight:800 }
.fakenotif button{ border:0; border-radius:999px; padding:14px 26px; min-height:48px;
  background:var(--e); color:#fff; font-weight:800; font-size:17px;
  box-shadow:0 5px 0 rgba(0,0,0,.16) }
.fakenotif button:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.16) }
@media (max-width:820px){
  .fakenotif{ gap:12px; padding:18px; border-radius:22px; width:min(92vw,520px) }
  .fakenotif img{ width:52px; height:52px }
  .fakenotif p{ font-size:16.5px }
  .fakenotif button{ padding:11px 20px; min-height:44px; font-size:15.5px }
}
@media (max-height:520px){
  .fakenotif{ gap:12px; padding:14px 18px }
  .fakenotif img{ width:48px; height:48px }
  .fakenotif p{ font-size:16px }
  .fakenotif button{ padding:10px 18px; min-height:42px; font-size:15px }
}

.chartbox{ width:min(100%,560px); margin:10px auto 4px }
.chartbox svg{ width:100%; height:auto; display:block; border-radius:12px; background:#fff }
.veil__row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px }

/* =========================================================
   R — บทสนทนา
   ========================================================= */
/* เดิมเป็น grid 2 แถว แต่มีลูก 3 ตัว (who / opts / react)
   พอซ่อน opts แล้ว react ตกไปแถว 1fr เลยยืดเต็มความสูงจนกล่องโหว่ทั้งจอ
   เปลี่ยนเป็น flex คอลัมน์ แล้วให้ตัวที่กำลังแสดงลอยกลางด้วย margin-block:auto */
.convo{
  min-height:0; display:flex; flex-direction:column; gap:10px; overflow:hidden;
  width:min(100%,880px); margin-inline:auto;      /* จอกว้างมาก ๆ ห้ามให้ยืดจนอ่านยาก */
}
.convo__who{ display:flex; align-items:flex-end; gap:12px; min-height:0; flex:0 0 auto }
.convo .opts{ flex:0 0 auto; margin-block:auto }
.convo > .react{ flex:0 0 auto; margin-block:auto; align-self:stretch }
/* เปรมในกิจกรรมอยู่ฝั่งซ้ายของกล่องคำพูด ต้องหันหน้าเข้าหาข้อความ */
.convo__face{ scale:-1 1 }
.convo__face{ height:min(26vh,190px); width:auto; flex:0 0 auto; object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(43,49,96,.20)) }
.convo__line{ flex:1; background:#fff; border-radius:20px 20px 20px 6px;
  padding:14px 18px; box-shadow:var(--shadow-soft); align-self:center }
.convo__quote{ font-size:17px; line-height:1.6; font-weight:600 }
.convo__quote::before{ content:"“" } .convo__quote::after{ content:"”" }

.react{ background:#fff; border-radius:20px; padding:14px 18px; box-shadow:var(--shadow-soft);
  border-inline-start:6px solid var(--muted); overflow:auto; min-height:0 }
.react[data-tone="up"]{ border-inline-start-color:var(--v) }
.react[data-tone="down"]{ border-inline-start-color:#E8503A }
.react[data-tone="flat"]{ border-inline-start-color:#C9C6B8 }
.react__say{ margin:0 0 8px; font-weight:800; font-size:16.5px }
.react__why{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-2) }
.react__go{ margin:14px 0 0; text-align:center }
.card .react{ text-align:start }

.endcard{ background:rgba(43,49,96,.92); color:#fff; border-radius:24px;
  padding:22px 24px; text-align:center; max-width:640px; margin:auto;
  box-shadow:var(--shadow-soft); overflow:auto; max-height:100% }
.endcard--wide{ max-width:720px }
.endcard img{ height:min(20vh,140px); width:auto; margin:0 auto 10px }
.endcard h3{ margin:0 0 10px; font-size:21px; line-height:1.4 }
.endcard p{ margin:0 0 6px; font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.9) }
.endcard .list{ text-align:start; margin:12px 0 0 }
.endcard .list li{ background:rgba(255,255,255,.1); color:#fff }
.endcard .list li[data-ok="true"]{ background:rgba(255,255,255,.18) }
.endcard__go{ margin-top:16px }
.swapnote{ margin-top:12px !important }

/* =========================================================
   M — ซูมออก
   ========================================================= */
.qbox{ background:#fff; border-radius:24px; padding:22px 24px; box-shadow:var(--shadow-soft);
  max-width:640px; margin:auto; width:100%; overflow:auto; max-height:100% }
.qbox h3{ margin:0 0 6px; font-size:21px; line-height:1.45 }
.qbox__sub{ margin:0 0 14px; color:var(--muted); font-size:14.5px }
.qbox__go{ margin:16px 0 0; text-align:center }
.chain{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px;
  font-size:14.5px; color:var(--ink-2) }
.chain b{ background:var(--cb1); border-radius:999px; padding:4px 12px; color:var(--ci) }
.chain span{ color:var(--muted) }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.chip{ border:2px solid var(--line); background:#fff; border-radius:999px;
  padding:8px 14px; min-height:40px; font-size:14.5px; font-weight:600; color:var(--ink-2) }
.chip:hover{ border-color:var(--c) }
.chip[aria-pressed="true"]{ background:var(--cb1); border-color:var(--c); color:var(--ci) }

.netwrap{ position:relative; width:100%; height:100%; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-soft) }
.netwrap canvas{ width:100%; height:100%; display:block }
.netcap{ position:absolute; inset:auto 0 0 0; padding:18px 20px 20px;
  background:linear-gradient(to top,rgba(43,49,96,.94),rgba(43,49,96,0));
  color:#fff; text-align:center }
.netcap p{ margin:0; font-size:15.5px; line-height:1.6 }
.netcap b{ color:#FFD84D }
.netcap__go{ margin-top:14px !important }

/* =========================================================
   A — ฟีดโซเชียล + โหล Ta-Da
   ========================================================= */
/* ภาพโพสต์ของอามเป็นโพสต์เต็มใบอยู่แล้ว — แสดงภาพเปล่า ๆ ไม่เติมกรอบซ้อน
   .post สูงเต็มช่อง .fit เพื่อให้ height:100% ของ .slot คำนวณได้ */
.post{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  animation:postIn .35s cubic-bezier(.2,1.1,.4,1) both }
@keyframes postIn{ from{ opacity:0; transform:translateY(18px) } }
.post .slot{ width:100%; height:100%; max-width:520px; max-height:100%; aspect-ratio:auto;
  border-radius:22px }
/* ภาพโพสต์เต็มใบอยู่แล้ว จึงไม่ต้องมีกรอบซ้อน — เอากรอบออกเมื่อไฟล์มาแล้ว */
.post .slot--filled{ background:transparent; border:0; box-shadow:none }
.post .slot img{ object-fit:contain }
.post__go{ margin:12px 0 0; text-align:center }

.bars{ margin:14px 0; display:grid; gap:10px }
.bars__row{ display:grid; grid-template-columns:minmax(96px,auto) 1fr auto; gap:10px;
  align-items:center; font-size:14px; text-align:start }
.bars__track{ height:16px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden }
.bars__track b{ display:block; height:100%; width:0; border-radius:999px;
  transition:width .9s cubic-bezier(.2,.7,.3,1), background .4s ease }
.bars__side{ white-space:nowrap; font-weight:700 }

.jarwrap{ min-height:0; display:grid; grid-template-columns:auto 1fr; gap:16px; overflow:hidden }
.jarwrap__jar{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0 }
.jarwrap__jar img{ height:min(46vh,340px); width:auto; object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(43,49,96,.18)) }
.jarwrap__cap{ margin:8px 0 0; text-align:center; font-weight:800; font-size:15px }
.jarwrap__cap small{ display:block; font-weight:600; color:var(--muted); font-size:13px }
.jarwrap__go{ margin:12px 0 0; text-align:center }

.wins{ list-style:none; margin:0; padding:2px; display:flex; flex-wrap:wrap;
  gap:8px; align-content:center; justify-content:center; overflow:auto; min-height:0;
  scrollbar-width:thin }
.wincard{ border:0; border-radius:14px; padding:10px 14px; min-height:44px;
  font-size:14.5px; font-weight:600; text-align:start; color:#3A3320;
  box-shadow:0 4px 0 rgba(0,0,0,.10); transform:rotate(var(--rot,0deg)); max-width:100% }
.wincard:hover{ transform:rotate(0) translateY(-2px) }
.wincard[data-used="true"]{ opacity:.28; pointer-events:none }
.wincard--own{ display:flex; gap:6px; align-items:center; background:#fff;
  box-shadow:inset 0 0 0 2px var(--line); padding:6px 6px 6px 12px }
.wincard--own input{ border:0; outline:0; font:inherit; width:150px; background:transparent }
.wincard--own button{ border:0; border-radius:10px; width:36px; height:36px;
  background:var(--a); color:#fff; font-size:20px; font-weight:800; line-height:1 }
.ghost{ pointer-events:none }

/* =========================================================
   V — หายใจ + จัดสรร 24 ชั่วโมง
   ========================================================= */
.breath{ position:relative; display:grid; place-items:center; width:100%; height:100%;
  cursor:pointer; touch-action:none; user-select:none }
/* ลูกโป่ง — วาดเป็น SVG ข้างใน ความกว้างตั้งโดย sizeBall() ใน act-breathe.js
   ⚠️ ตัวลูกโป่งไม่ได้อยู่กลาง element (ช่วงล่างเป็นจุกกับเชือก)
      ตัวลูกอยู่ครึ่งบน จุกกับเชือกอยู่ครึ่งล่าง
      viewBox จึงเผื่อที่ว่างโปร่งไว้ด้านบนเท่ากับความยาวเชือกด้านล่าง
      เพื่อให้ "ศูนย์กลางลูกโป่ง = ศูนย์กลาง element" พอดี
      ⚠️ ห้ามแก้ด้วยการ translate + ขยับ transform-origin
         เคยพลาด: จุดหมุนไม่อยู่กลาง element แล้วตอนพอง 2 เท่า
         ครึ่งล่างจะยืดลงไกลกว่าครึ่งบน ลูกโป่งทะลุกรอบทุกขนาดจอ */
.breath__ball{ position:absolute; aspect-ratio:100/182;
  filter:drop-shadow(0 12px 22px rgba(79,154,80,.30));
  transition:transform .08s linear, filter .3s ease }
.breath__ball svg{ display:block; width:100%; height:100% }
.breath.is-held .breath__ball{ filter:drop-shadow(0 0 10px rgba(79,154,80,.55)) drop-shadow(0 12px 22px rgba(79,154,80,.38)) }
/* เชือกแกว่งเบา ๆ ให้ดูมีลมพัด */
.breath__string{ transform-origin:50px 148px; animation:sway 3.4s ease-in-out infinite }
@keyframes sway{ 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }
@media (prefers-reduced-motion:reduce){ .breath__string{ animation:none } }

/* บรรทัด "หายใจเข้าท้องป่อง / หายใจออกท้องแฟ่บ" ใต้คำอธิบายวิธีทำ */
.breath__belly{ margin:6px 0 0; text-align:center; font-size:14.5px; font-weight:800; color:var(--v-ink);
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.breath__belly span{ background:var(--v-bg1); border-radius:999px; padding:4px 14px }
.breath__mid{ position:relative; z-index:2; text-align:center; color:#173F18 }
.breath__mid b{ display:block; font-size:19px }
.breath__n{ font-size:30px; font-weight:800; line-height:1.1 }
.breath__hint{ margin:8px 0 0; text-align:center; font-size:14.5px; color:var(--ink-2) }
.breath__note{ margin:4px 0 0; text-align:center; font-size:13.5px; color:var(--muted) }
.breath__go{ margin:10px 0 0; text-align:center }
.pacepick{ display:flex; gap:6px }
.pacepick .btn[aria-pressed="true"]{ background:var(--v); color:#fff }

.day{ min-height:0; display:grid; grid-template-columns:auto 1fr; gap:16px; overflow:hidden }
.day__who{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0 }
.day__who img{ height:min(40vh,300px); width:auto; object-fit:contain; scale:-1 1;
  filter:drop-shadow(0 10px 16px rgba(43,49,96,.18)) }
.day__mood{ margin:8px 0 0; text-align:center; font-weight:700; font-size:14.5px; max-width:200px }
.day__mood small{ display:block; font-weight:600; color:var(--muted); font-size:13px }
.day__go{ margin:12px 0 0; text-align:center }

.alloc{ list-style:none; margin:0; padding:2px; display:grid; gap:8px;
  align-content:center; overflow:auto; min-height:0 }
.alloc li{ background:#fff; border-radius:16px; padding:10px 14px; box-shadow:var(--shadow-soft);
  display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center }
.alloc__name{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px }
.alloc__name i{ width:12px; height:12px; border-radius:4px; flex:0 0 auto }
.alloc__ctrl{ display:flex; align-items:center; gap:6px }
.alloc__ctrl button{ border:0; width:44px; height:44px; border-radius:12px;
  background:var(--cb1); color:var(--ci); font-size:22px; font-weight:800; line-height:1 }
.alloc__ctrl button:disabled{ opacity:.32 }
.alloc__val{ min-width:66px; text-align:center; font-weight:800; font-size:15px }
.alloc__val small{ font-weight:600; color:var(--muted); font-size:12px }
.alloc__track{ grid-column:1 / -1; height:8px; border-radius:999px; background:#EDEAE0; overflow:hidden }
.alloc__track b{ display:block; height:100%; width:0; border-radius:999px;
  transition:width .3s cubic-bezier(.2,.7,.3,1) }

/* =========================================================
   จอแคบ / จอเตี้ย
   ========================================================= */
@media (max-width:720px){
  .jarwrap, .day{ grid-template-columns:1fr; grid-template-rows:auto 1fr }
  .jarwrap__jar, .day__who{ flex-direction:row; gap:12px; justify-content:center; align-items:center }
  .jarwrap__jar img{ height:min(18vh,130px) }
  .day__who img{ height:min(16vh,120px) }
  .jarwrap__cap, .day__mood{ margin:0; text-align:start }
  .convo__face{ height:min(18vh,130px) }
  .convo__quote{ font-size:15.5px }
  .qbox{ padding:18px 18px }
  .qbox h3{ font-size:18.5px }
  .endcard{ padding:18px 18px }
  .endcard h3{ font-size:18.5px }
  .wincard--own input{ width:120px }
  .bars__row{ grid-template-columns:1fr; gap:4px }
  .bars__side{ text-align:end; margin-top:-22px }
}
@media (orientation:landscape) and (max-height:520px){
  /* จอแนวนอนเตี้ยมีที่แนวตั้งน้อยมาก — ดันคำอธิบายกับบรรทัดท้องป่อง/ท้องแฟ่บ
     ให้อยู่บรรทัดเดียวกัน ไม่งั้นพื้นที่ลูกโป่งเหลือไม่ถึงครึ่ง แล้วลูกโป่งโดนตัด */
  .breath__note{ display:none }
  .breath__hint, .breath__belly{
    display:inline-flex; vertical-align:middle; margin:3px 5px 0; font-size:12px }
  .breath__belly{ gap:5px }
  .breath__belly span{ padding:2px 9px }
  .breath__go{ margin-top:5px }
  .breath__mid b{ font-size:16px }
  .breath__n{ font-size:22px }
  .convo__face{ height:min(30vh,150px) }
  .jarwrap__jar img, .day__who img{ height:min(30vh,150px) }
  .endcard{ padding:14px 18px }
  .endcard img{ height:min(18vh,90px) }
}