/* การ์ดขอบคุณ 3 มิติ · Ⱂ173 · ⌂212 · โทนดำ-ทองเดียวกับการ์ดหลัก THE FIRST CHAPTER · RECALL */
:root{--bg:#07050a;--ink:#f6efe6;--mute:#bba99a;--gold:#e4b77d;--gold2:#f6dcb0;--copper:#c98a6b;--rose:#ff3d9a;
  --line:rgba(228,183,125,.34);--glass:rgba(20,12,16,.72);--cw:340px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Anuphan",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45}
body{overflow-x:hidden}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.app{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;padding:0 16px env(safe-area-inset-bottom)}
button{font:inherit;color:inherit}

/* ───── หัวแอป ───── */
.top{display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) 0 10px;max-width:1180px;width:100%;margin:0 auto}
.top .emb{width:44px;height:auto;filter:drop-shadow(0 0 10px rgba(228,183,125,.4))}
.top .tt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.top .tt b{font-weight:600;font-size:18px;color:var(--gold2)}
.top .tt small{font-family:"Cinzel",serif;letter-spacing:.22em;font-size:10.5px;color:var(--gold);opacity:.85}
.top .cur{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:#120b0f;display:block;flex:none}
.top .cur img{width:100%;height:100%;object-fit:cover;display:block}

/* ───── โครงหน้า ───── */
.layout{max-width:1180px;width:100%;margin:0 auto;display:grid;gap:18px;grid-template-columns:1fr;flex:1;padding-bottom:18px}
@media(min-width:960px){
  .layout{grid-template-columns:minmax(0,1fr) minmax(400px,540px);align-items:start;gap:32px}
  .stage{position:sticky;top:12px;order:2;height:calc(100svh - 96px)}
  .form{order:1}
}

/* ───── เวที 3 มิติ ───── */
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.scene{perspective:calc(var(--cw)*3.4);display:flex;justify-content:center;width:100%;padding:8px 0}
.card3d{position:relative;width:var(--cw);height:calc(var(--cw)*1.5);transform-style:preserve-3d;will-change:transform;outline:none;cursor:pointer;
}
.card3d:focus-visible .face{box-shadow:0 0 0 3px var(--gold)}
.face{position:absolute;inset:0;border-radius:calc(var(--cw)*.075);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(165deg,#1b1016 0%,#0c070b 55%,#140b10 100%);
  border:1px solid rgba(228,183,125,.45);transform-style:preserve-3d;
  box-shadow:inset 0 0 calc(var(--cw)*.12) rgba(228,183,125,.07),0 calc(var(--cw)*.06) calc(var(--cw)*.09) rgba(0,0,0,.6)}
.face.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent calc(var(--sx,30%) - 18%),rgba(255,232,196,calc(var(--sheen,.16))) var(--sx,30%),transparent calc(var(--sx,30%) + 18%));mix-blend-mode:screen}
.stagebar{display:flex;gap:10px;margin-top:6px}
.hint{margin:8px 12px 0;text-align:center;color:var(--mute);font-size:12.5px}

/* ───── หน้าการ์ด: ด้านหน้า ───── */
.front{padding:calc(var(--cw)*.045)}
.hero{position:relative;width:100%;aspect-ratio:16/9;border-radius:calc(var(--cw)*.045);overflow:hidden;background:#150b10;
  box-shadow:0 0 0 1px rgba(228,183,125,.35)}
.hero .ly{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;pointer-events:none;will-change:transform}
.hero .ly.sky{filter:brightness(.55) saturate(1.1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(12,7,11,.78));pointer-events:none}
.ftxt{position:absolute;left:calc(var(--cw)*.05);right:calc(var(--cw)*.05);top:calc(var(--cw)*.045 + var(--cw)*.91*.5625 + var(--cw)*.045);bottom:calc(var(--cw)*.085);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform-style:preserve-3d;gap:calc(var(--cw)*.012)}
.kick{font-family:"Cinzel",serif;letter-spacing:.28em;font-size:calc(var(--cw)*.0245);color:var(--gold);transform:translateZ(calc(var(--cw)*.02))}
.tyen{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.14em;font-size:calc(var(--cw)*.078);color:var(--gold2);line-height:1.05;
  text-shadow:0 0 calc(var(--cw)*.04) rgba(228,183,125,.45);transform:translateZ(calc(var(--cw)*.06))}
.tyth{font-family:"Noto Serif Thai",serif;font-weight:400;font-size:calc(var(--cw)*.052);color:var(--gold2);line-height:1.2;transform:translateZ(calc(var(--cw)*.045))}
.nm{font-family:"Anuphan",sans-serif;font-weight:600;color:var(--ink);line-height:1.18;max-width:100%;margin:calc(var(--cw)*.012) 0 0;
  text-wrap:balance;overflow-wrap:anywhere;transform:translateZ(calc(var(--cw)*.08));text-shadow:0 calc(var(--cw)*.01) calc(var(--cw)*.03) rgba(0,0,0,.6)}
.nm.ph{opacity:.4;font-weight:400}
.orn{width:calc(var(--cw)*.36);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:calc(var(--cw)*.008) 0;transform:translateZ(calc(var(--cw)*.03))}
.sub{font-size:calc(var(--cw)*.03);color:var(--mute);line-height:1.35;transform:translateZ(calc(var(--cw)*.03))}
.qt{font-family:"Noto Serif Thai",serif;font-style:italic;font-size:calc(var(--cw)*.031);color:var(--gold2);opacity:.92;line-height:1.4;max-width:92%;margin-top:calc(var(--cw)*.012);transform:translateZ(calc(var(--cw)*.025))}
.pkpill{margin-top:calc(var(--cw)*.018);padding:calc(var(--cw)*.012) calc(var(--cw)*.04);border-radius:99px;border:1px solid var(--line);background:rgba(228,183,125,.1);
  font-family:"Cinzel",serif;letter-spacing:.12em;font-size:calc(var(--cw)*.026);color:var(--gold2);transform:translateZ(calc(var(--cw)*.05))}
.flip-hint{position:absolute;left:0;right:0;bottom:calc(var(--cw)*.036);text-align:center;font-size:calc(var(--cw)*.022);color:var(--mute);letter-spacing:.06em}

/* ───── หน้าการ์ด: ด้านหลัง ───── */
.back{padding:calc(var(--cw)*.055) calc(var(--cw)*.055) calc(var(--cw)*.08);display:flex;flex-direction:column;gap:calc(var(--cw)*.016)}
.bk-h{text-align:center}
.bk-h .kick{display:block}
.bk-h h3{margin:calc(var(--cw)*.01) 0 0;font-family:"Noto Serif Thai",serif;font-weight:400;font-size:calc(var(--cw)*.05);color:var(--gold2);line-height:1.25}
.bk-pk{text-align:center;font-family:"Cinzel",serif;letter-spacing:.1em;font-size:calc(var(--cw)*.034);color:var(--ink)}
.bk-pk small{display:block;font-family:"Anuphan",sans-serif;letter-spacing:.02em;font-size:calc(var(--cw)*.025);color:var(--mute);margin-top:2px}
.tiles{--n:3;--g:calc(var(--cw)*.022);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);transform-style:preserve-3d}
.tiles>.tile{flex:0 0 calc((100% - var(--g)*(var(--n) - 1))/var(--n))}
.tiles.c2{--n:2}
.tiles.c4{--n:4}
.tile{border:1px solid var(--line);border-radius:calc(var(--cw)*.035);background:linear-gradient(160deg,rgba(255,236,200,.09),rgba(255,236,200,.025));
  padding:calc(var(--cw)*.018) calc(var(--cw)*.014) calc(var(--cw)*.02);display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw)*.01);
  transform:translateZ(calc(var(--cw)*.03));min-width:0}
.tile .im{width:100%;aspect-ratio:1/.68;display:flex;align-items:center;justify-content:center}
.tile img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 calc(var(--cw)*.01) calc(var(--cw)*.015) rgba(0,0,0,.55))}
.tile span{font-size:calc(var(--cw)*.0235);line-height:1.3;text-align:center;color:var(--ink);overflow-wrap:anywhere}
.tiles.c4 .tile span{font-size:calc(var(--cw)*.02)}
.pills{display:flex;flex-wrap:wrap;gap:calc(var(--cw)*.014);justify-content:center;transform:translateZ(calc(var(--cw)*.02))}
.pills span{padding:calc(var(--cw)*.008) calc(var(--cw)*.026);border-radius:99px;border:1px solid var(--line);background:rgba(228,183,125,.09);
  font-size:calc(var(--cw)*.0235);color:var(--gold2);line-height:1.3}
.bk-msg{text-align:center;font-size:calc(var(--cw)*.026);color:var(--mute);margin-top:auto}
.bk-ev{text-align:center;font-size:calc(var(--cw)*.0235);color:var(--mute);line-height:1.4;border-top:1px solid var(--line);padding-top:calc(var(--cw)*.018)}
.bk-ev b{display:block;color:var(--gold2);font-weight:500}
.cplate{position:absolute;left:0;right:0;bottom:calc(var(--cw)*.022);text-align:center;font-size:calc(var(--cw)*.0185);letter-spacing:.12em;color:var(--gold);opacity:.7;font-family:"Cinzel",serif}

/* ───── ฟอร์ม ───── */
.form{display:flex;flex-direction:column;gap:14px;min-width:0}
.step{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:16px 16px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.step h2{margin:0 0 12px;font-weight:600;font-size:17px;color:var(--gold2);display:flex;align-items:center;gap:10px}
.step h2 i{font-style:normal;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:13px;color:#1a0f15;
  background:linear-gradient(140deg,var(--gold2),var(--gold))}
.fld{display:block;margin-top:10px}
.fld>span,.lab{display:block;font-size:13px;color:var(--mute);margin-bottom:6px}
.inp{display:flex;align-items:stretch;gap:8px}
.inp input,.inp textarea{flex:1;min-width:0;background:rgba(8,5,8,.75);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font:inherit;font-size:16px;outline:none;resize:none}
.inp input:focus,.inp textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(228,183,125,.18)}
.inp input::placeholder,.inp textarea::placeholder{color:rgba(187,169,154,.55)}
.mic,.plus{flex:none;width:46px;border-radius:14px;border:1px solid var(--line);background:rgba(228,183,125,.1);cursor:pointer;display:grid;place-items:center;color:var(--gold2);font-size:22px}
.mic::before{content:"";width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-3.08A7 7 0 0 0 19 12h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-3.08A7 7 0 0 0 19 12h-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.mic.on{background:var(--rose);color:#fff;border-color:var(--rose);animation:pulse 1.1s infinite}
.mic:disabled{opacity:.35;cursor:not-allowed}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,61,154,.22)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.pk{margin-top:10px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(8,5,8,.6);font-size:14px;line-height:1.3;color:var(--ink);
  transition:background .2s,border-color .2s,transform .15s}
.chip:hover{border-color:var(--gold)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:linear-gradient(140deg,rgba(246,220,176,.28),rgba(228,183,125,.16));border-color:var(--gold);color:var(--gold2);font-weight:500}
.chip:focus-visible,.pill:focus-visible,.seg button:focus-visible,.mic:focus-visible,.plus:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.chip small{display:block;color:var(--mute);font-size:12px}
.note{margin:10px 2px 0;font-size:13px;color:var(--mute)}
.items{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.item{display:flex;align-items:center;gap:10px}
.item .chip{flex:1;border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.item .chip::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--gold);flex:none}
.item .chip[aria-pressed="true"]::before{background:radial-gradient(circle,var(--gold2) 0 45%,transparent 50%)}
.item .del{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--mute);flex:none}
.item .del:hover{color:var(--rose);border-color:var(--rose)}
.choice{border:1px dashed var(--line);border-radius:14px;padding:10px 12px}
.choice .cl{font-size:13px;color:var(--mute);margin-bottom:8px}
.fld.add{margin-top:14px}
.plus{font-size:26px;line-height:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.seg{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:rgba(8,5,8,.6)}
.seg button{all:unset;flex:1;text-align:center;padding:10px 6px;cursor:pointer;font-size:14px;color:var(--mute);transition:background .2s}
.seg button[aria-pressed="true"]{background:linear-gradient(140deg,rgba(246,220,176,.3),rgba(228,183,125,.18));color:var(--gold2);font-weight:500}
.pill{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 20px;border-radius:99px;border:1px solid var(--line);background:rgba(14,9,12,.72);
  color:var(--gold2);font-size:15px;text-align:center;transition:transform .15s,border-color .2s,box-shadow .2s;backdrop-filter:blur(6px)}
.pill:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(228,183,125,.3)}
.pill:active{transform:scale(.97)}
.pill.gold{background:linear-gradient(140deg,var(--gold2),var(--gold));color:#1a0f15;font-weight:600;border-color:transparent}
.pill.ghost{color:var(--mute)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acts.sv{margin-top:12px}
.acts .pill.gold{grid-column:1/-1}
.ok{min-height:1.4em;margin:10px 2px 0;font-size:13.5px;color:#9fe0b4}
.saved{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.saved:empty{display:none}
.saved h4{margin:6px 0 0;font-weight:500;font-size:13px;color:var(--mute)}
.srow{display:flex;gap:8px;align-items:center}
.srow .chip{flex:1;border-radius:12px;padding:9px 12px;font-size:14px}
.srow .chip small{display:inline;margin-left:6px}

/* ───── โหมดผู้รับ / เต็มจอ ───── */
.viewbar{display:none}
body.view .top,body.view .form,body.view .stagebar,body.view .hint,body.full .top,body.full .form,body.full .stagebar,body.full .hint{display:none}
body.view .layout,body.full .layout{display:flex;justify-content:center;align-items:center;flex:1}
body.view .stage,body.full .stage{position:static;height:auto;width:100%}
body.view .viewbar,body.full .viewbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:6px 0 10px}
body.view .app,body.full .app{padding-top:max(10px,env(safe-area-inset-top))}
body.full #vbPng{display:none}
body.view #vbBack{display:none}
.plate{max-width:1180px;width:100%;margin:0 auto;padding:6px 0 14px;text-align:center;font-size:12px;letter-spacing:.14em;color:var(--gold);opacity:.75;font-family:"Cinzel",serif}

@media(max-width:520px){
  .acts{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  .top .tt b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.mic.on{animation:none}.chip,.pill{transition:none}}

/* ───── จำนวนเงินสนับสนุน ───── */
.amtline{display:flex;flex-direction:column;align-items:center;line-height:1.1;margin-top:calc(var(--cw)*.012);transform:translateZ(calc(var(--cw)*.05))}
.amtline small{font-size:calc(var(--cw)*.022);color:var(--mute)}
.amtline b{font-family:"Cinzel",serif;font-weight:700;font-size:calc(var(--cw)*.056);color:var(--gold2);text-shadow:0 0 calc(var(--cw)*.03) rgba(228,183,125,.4)}
.bk-amt{display:flex;flex-direction:column;align-items:center;line-height:1.1;gap:calc(var(--cw)*.004);transform:translateZ(calc(var(--cw)*.03))}
.bk-amt small{font-size:calc(var(--cw)*.024);color:var(--mute)}
.bk-amt b{font-family:"Cinzel",serif;font-weight:700;font-size:calc(var(--cw)*.06);color:var(--gold2);text-shadow:0 0 calc(var(--cw)*.03) rgba(228,183,125,.4)}
.bk-amt em{font-style:normal;font-family:"Cinzel",serif;letter-spacing:.2em;font-size:calc(var(--cw)*.02);color:var(--gold)}

/* ลูกของแต่ละหน้าที่ลอยตามแกน Z ต้องซ่อนด้านหลังเองด้วย ไม่งั้นทะลุมาเห็นตอนพลิก */
.face *{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* ───── โหมดป้ายซุ้ม F&B + ม็อคอัปบูธ ───── */
[hidden]{display:none!important}
.modebar{max-width:1180px;width:100%;margin:0 auto 12px}
.modebar .seg{max-width:560px}
.cardform,.signform{display:flex;flex-direction:column;gap:14px}
.signscene{width:100%;display:flex;justify-content:center;perspective:1700px;padding:8px 0}
.signwrap{transform-style:preserve-3d;will-change:transform;line-height:0;border-radius:12px;box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 0 1px rgba(228,183,125,.35)}
#sgCv{display:block;width:100%;max-width:100%;height:auto;border-radius:12px;background:#0a0508}
#btnToSign{margin-top:10px}
body.m-sign .stage{justify-content:center}
body.view .modebar,body.full .modebar{display:none}