/* หน้าเลือกเป้าหมาย (จาก goal-select) */
#p-goal{container-type:size;background:radial-gradient(70% 30% at 0% 8%,rgba(178,232,222,.75) 0%,transparent 70%),radial-gradient(70% 35% at 100% 92%,rgba(170,226,218,.8) 0%,transparent 70%),radial-gradient(80% 30% at 0% 85%,rgba(190,236,226,.7) 0%,transparent 70%),linear-gradient(180deg,#FAF6EA 0%,#FBF5E6 40%,#EEF6EE 75%,#DDF1EC 100%) !important;font-family:'Kanit',sans-serif;color:#111}
#p-goal .gbub{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 28%,#fff 0%,rgba(255,255,255,.5) 18%,rgba(190,230,235,.25) 55%,rgba(220,200,255,.25) 100%);box-shadow:inset 0 0 18px rgba(255,255,255,.8);animation:g-float 8s ease-in-out infinite}
#p-goal .gbub.pink{background:radial-gradient(circle at 30% 28%,#fff 0%,rgba(255,235,240,.7) 20%,rgba(250,200,215,.6) 70%)}
@keyframes g-float{50%{transform:translateY(-16px)}}
.zoom,.actions,.hand,.thumbup,.sparkle,.backdrop{font-family:'Kanit',sans-serif}
.actions button{cursor:pointer}


  #p-goal .wrap{position:relative;z-index:1;width:94cqw;margin:0 auto;padding:2.6cqh 0 2cqh;display:flex;flex-direction:column;align-items:center}
  #p-goal .header{width:44cqw;display:block;margin-bottom:1.4cqh;filter:drop-shadow(0 6px 14px rgba(255,255,255,.6))}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqw;width:100%}
  .card{
    container-type:inline-size;position:relative;aspect-ratio:456/717;cursor:pointer;
    transition:transform .25s;
  }
  .grid .card{animation:g-idle 4s ease-in-out infinite}
  .grid .card:nth-child(2){animation-delay:-.7s}.grid .card:nth-child(3){animation-delay:-1.4s}
  .grid .card:nth-child(4){animation-delay:-2.1s}.grid .card:nth-child(5){animation-delay:-2.8s}.grid .card:nth-child(6){animation-delay:-3.5s}
  @keyframes g-idle{50%{transform:translateY(-4px)}}
  .grid .card:hover .cin{box-shadow:0 12px 26px rgba(40,110,100,.18)}
  .card.ghost{visibility:hidden}
  .card.selected .cin{outline-color:#1FBFA8}
  .cin{position:absolute;inset:0;padding:7cqw 7cqw 0;display:flex;flex-direction:column;border-radius:9cqw;background:#fff;box-shadow:0 6px 18px rgba(40,110,100,.10);outline:4px solid transparent;outline-offset:-2px;transition:outline-color .25s,box-shadow .25s}
  .card .check{z-index:2;position:absolute;top:-6cqw;right:-6cqw;width:26cqw;height:26cqw;border-radius:50%;background:#1FBFA8;color:#fff;
    display:none;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.18);border:3px solid #fff}
  .card.selected .check{display:flex;animation:g-pop .45s cubic-bezier(.2,1.8,.4,1)}
  .card .check svg{width:60%;height:60%}
  @keyframes g-pop{from{transform:scale(0)}}
  .art{position:relative;flex-shrink:0;width:100%;aspect-ratio:392/523;border-radius:5cqw;overflow:hidden;background:#eef7f5}
  .art .mv{position:absolute;inset:0}
  .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
  .fx{position:absolute;inset:0;pointer-events:none;opacity:0}
  .glbl{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;line-height:1.08;padding-bottom:3cqw}
  .glbl b{font-weight:800;font-size:12.2cqw;letter-spacing:-.2px;white-space:nowrap}
  .glbl span{font-weight:500;font-size:9.4cqw;white-space:nowrap}

  .go{
    margin-top:2.6cqh;border:0;border-radius:60px;background:#fff;color:#111;cursor:pointer;
    font:700 6.2cqw 'Kanit',sans-serif;padding:2.4cqw 8cqw;display:flex;align-items:center;gap:14px;
    box-shadow:0 8px 24px rgba(40,110,100,.14);transition:transform .15s, background .3s, color .3s;
  }
  .go svg{width:1.2em;height:1.2em}
  .go:active{transform:scale(.96)}
  .go.ready{background:linear-gradient(180deg,#2AD0B8,#16AE97);color:#fff;animation:g-glow 1.6s ease-in-out infinite}
  @keyframes g-glow{50%{box-shadow:0 8px 30px rgba(31,191,168,.55),0 0 0 8px rgba(31,191,168,.12)}}
  .go.nope{animation:g-no .4s}
  @keyframes g-no{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
  .hint{margin-top:1.6cqw;font-size:3.6cqw;color:#5f817b;min-height:20px;text-align:center}

  /* ===== Zoom layer ===== */
  .backdrop{position:fixed;inset:0;z-index:20;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.25),rgba(20,70,64,.55));
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .4s}
  .backdrop.on{opacity:1;pointer-events:auto}
  .zoom{position:fixed;left:0;top:0;z-index:30;transform-origin:0 0;will-change:transform}
  .zoom .zin{width:100%;height:100%;transform-origin:50% 100%}
  .zoom .card{width:100%;height:100%;animation:none}
  .zoom .cin{box-shadow:0 20px 60px rgba(0,0,0,.25)}
  .zoom .glowring{position:absolute;inset:-6%;border-radius:14cqw;opacity:0;pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));z-index:-1}
  .zoom.arrived .glowring{animation:g-ring 1.4s ease-out}
  @keyframes g-ring{0%{opacity:0;transform:scale(.8)}25%{opacity:1}100%{opacity:0;transform:scale(1.35)}}

  .actions{position:fixed;left:0;right:0;bottom:3.5vh;z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;
    opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity .35s, transform .35s}
  .actions.on{opacity:1;transform:none;pointer-events:auto}
  .actions .pick{border:0;border-radius:40px;padding:13px 0;width:min(80vw,360px);font:700 clamp(18px,5vw,22px) 'Kanit',sans-serif;color:#fff;cursor:pointer;
    background:linear-gradient(180deg,#2AD0B8,#16AE97);box-shadow:0 5px 0 #0E8D7B,0 10px 24px rgba(0,0,0,.2)}
  .actions .pick:active{transform:translateY(3px);box-shadow:0 2px 0 #0E8D7B}
  .actions .back{border:0;background:rgba(255,255,255,.85);border-radius:30px;padding:9px 26px;font:500 16px 'Kanit',sans-serif;color:#24534c;cursor:pointer}

  /* ===== Hand ===== */
  .hand{position:fixed;left:0;top:0;width:0;height:0;z-index:31;pointer-events:none;opacity:0;will-change:transform;transform-origin:0 0}
  .hand img{position:absolute;display:block;filter:drop-shadow(0 10px 12px rgba(20,70,64,.25));transition:opacity .12s}
  .hand .hopen{left:-48px;top:-38px;width:215px;transform-origin:75px 215px}
  .hand .hpinch{left:-58px;top:-26px;width:157px;opacity:0;transform-origin:85px 205px}
  .hand.pinch .hopen{opacity:0}
  .hand.pinch .hpinch{opacity:1;animation:g-squish .3s cubic-bezier(.3,1.6,.5,1)}
  @keyframes g-squish{0%{transform:scale(1.12,.9)}100%{transform:none}}
  .thumbup{position:fixed;left:0;top:0;width:150px;z-index:45;pointer-events:none;opacity:0;filter:drop-shadow(0 10px 14px rgba(20,70,64,.25))}
  .sparkle{position:fixed;z-index:36;pointer-events:none;width:22px;height:22px;color:#F7D36A}

  /* ===== กิจกรรมของการ์ดแต่ละใบ (เล่นเมื่อการ์ดถูกยกขึ้นมา) ===== */
  .live .fx{opacity:1;transition:opacity .6s}
  /* 0 นอนเต็มอิ่ม: หายใจ + Zzz + ดาวกระพริบ */
  .live[data-a="sleep"] .mv{animation:g-breathe 3.2s ease-in-out infinite;transform-origin:40% 100%}
  @keyframes g-breathe{50%{transform:scale(1.035) translateY(-.6%)}}
  .z{position:absolute;font:800 13cqw 'Kanit',sans-serif;color:#7A6BC9;opacity:0;text-shadow:0 2px 0 #fff}
  .live .z{animation:g-zz 3s ease-in infinite}
  .z:nth-child(2){animation-delay:1s!important;font-size:10cqw}.z:nth-child(3){animation-delay:2s!important;font-size:8cqw}
  @keyframes g-zz{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(14cqw,-26cqw) scale(1.1) rotate(12deg)}}
  .tw{position:absolute;width:6cqw;height:6cqw;color:#FFF6C8;filter:drop-shadow(0 0 4px #fff)}
  .live .tw{animation:g-tw 1.8s ease-in-out infinite}
  .tw:nth-of-type(2n){animation-delay:-.9s!important}
  @keyframes g-tw{50%{transform:scale(.3);opacity:.3}}
  /* 1 ยืดเหยียด: โยกตัว + เส้นลม */
  .live[data-a="stretch"] .mv{animation:g-sway 2.6s ease-in-out infinite;transform-origin:50% 85%}
  @keyframes g-sway{0%,100%{transform:rotate(-2.2deg) translateX(-1%)}50%{transform:rotate(2.2deg) translateX(1%)}}
  .swoosh path{fill:none;stroke:#7CE0CF;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:60 200;stroke-dashoffset:60;opacity:.9}
  .live .swoosh path{animation:g-sw 2.2s ease-in-out infinite}
  .swoosh path:nth-child(2){animation-delay:.5s!important}.swoosh path:nth-child(3){animation-delay:1s!important}
  @keyframes g-sw{to{stroke-dashoffset:-200}}
  /* 2 สุขภาพสตรอง: เบ่งกล้าม + โล่เรืองแสง + หัวใจ */
  .live[data-a="strong"] .mv{animation:g-flex 1.3s ease-in-out infinite;transform-origin:50% 100%}
  @keyframes g-flex{0%,100%{transform:scale(1)}35%{transform:scale(1.045) translateY(-1%)}55%{transform:scale(1.02)}}
  .shield{position:absolute;inset:0;background:radial-gradient(45% 40% at 50% 38%,rgba(255,255,255,.75),rgba(150,240,225,0) 70%);mix-blend-mode:screen}
  .live .shield{animation:g-sh 1.3s ease-in-out infinite}
  @keyframes g-sh{0%,100%{opacity:.2}35%{opacity:1}}
  .ht{position:absolute;width:9cqw;height:9cqw;color:#5FD4C2;opacity:0}
  .live .ht{animation:g-hu 2.6s ease-out infinite}
  .ht:nth-of-type(2){animation-delay:.9s!important;color:#F59BB7}.ht:nth-of-type(3){animation-delay:1.7s!important}
  @keyframes g-hu{0%{opacity:0;transform:translateY(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translateY(-40cqw) scale(1.1)}}
  /* 3 บุคลิกเป๊ะ: เดินมั่นใจ + ประกายวิ้ง */
  .live[data-a="walk"] .mv{animation:g-walk .9s ease-in-out infinite;transform-origin:50% 100%}
  @keyframes g-walk{0%,100%{transform:translateY(0) rotate(-1deg)}25%{transform:translateY(-1.8%) rotate(0)}50%{transform:translateY(0) rotate(1deg)}75%{transform:translateY(-1.8%) rotate(0)}}
  /* 4 อยากไปไหน: ภาพเลื่อนเหมือนกำลังเดินป่า + เมฆลอย */
  .live[data-a="hike"] .mv{animation:g-walk 1s ease-in-out infinite;transform-origin:50% 100%}
  .live[data-a="hike"] img{animation:g-pan 7s ease-in-out infinite alternate}
  @keyframes g-pan{from{transform:scale(1.14) translateX(-3.5%)}to{transform:scale(1.14) translateX(3.5%)}}
  .cloud{position:absolute;width:34cqw;height:10cqw;border-radius:10cqw;background:#fff;opacity:.85;filter:blur(.4px)}
  .cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
  .cloud::before{width:14cqw;height:14cqw;left:6cqw;top:-7cqw}.cloud::after{width:18cqw;height:18cqw;left:13cqw;top:-10cqw}
  .live .cloud{animation:g-drift 12s linear infinite}
  .cloud:nth-of-type(2){animation-duration:17s!important;animation-delay:-8s!important;transform:scale(.7)}
  @keyframes g-drift{from{left:-40%}to{left:110%}}
  .bird{position:absolute;width:8cqw;color:#5d7c8a}
  .live .bird{animation:g-fly 6s linear infinite}
  @keyframes g-fly{0%{transform:translate(0,0)}50%{transform:translate(-20cqw,-6cqw)}100%{transform:translate(-40cqw,0)}}
  /* 5 หุ่นจึ้ง: โพสท่า + ประกายบนกระจก */
  .live[data-a="pose"] .mv{animation:g-pose 2.2s ease-in-out infinite;transform-origin:35% 100%}
  @keyframes g-pose{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-1.6deg) scale(1.02)}60%{transform:rotate(1.2deg) scale(1.01)}}
  .shine{position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-15deg);left:-40%}
  .live .shine{animation:g-shine 2.8s ease-in-out infinite}
  @keyframes g-shine{0%,40%{left:-40%}100%{left:120%}}