:root{--bg:#f4f3ec;--dot:#c9cbbf;--ink:#4a3f4d;--pink:#edd3df;--paper:#fffdf4;--gold:#ffcf4a;--accent:#d2578f;--muted:color-mix(in srgb,var(--accent) 60%,#6b5b66);--chip:rgba(255,255,255,.82);--W:min(92vw,500px,calc((100vh - 150px)/1.35));box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#3a3140;--dot:#54485a;--ink:#f6ecf1;--chip:rgba(70,55,80,.78)}}
:root[data-theme="dark"]{--bg:#3a3140;--dot:#54485a;--ink:#f6ecf1;--chip:rgba(70,55,80,.78)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle,var(--dot) 4px,transparent 5px) 0 0/80px 80px,radial-gradient(circle,var(--dot) 4px,transparent 5px) 40px 40px/80px 80px,var(--bg);color:var(--ink);font-family:Mali,"Sarabun","Noto Sans Thai",system-ui,sans-serif;overflow-x:hidden}
main[hidden]{display:none}
#nav{display:flex;gap:8px;justify-content:center;padding:12px 10px 4px}
#nav button{border:2px solid #e2b6c9;background:var(--chip);color:var(--ink);border-radius:99px;padding:.45em 1.1em;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
#nav button.on{background:var(--pink);color:#4a3f4d}
#stage{position:relative;width:var(--W);height:calc(var(--W)*1.35);margin:6px auto 0}
#cap{display:none}
#title{position:absolute;left:0;right:0;top:1.5%;text-align:center;z-index:6;pointer-events:none;transition:opacity .4s}#title b{display:block;font-family:"Dancing Script","Brush Script MT",cursive;font-weight:700;font-size:calc(var(--W)*.082);line-height:1.1;color:var(--accent);transform:rotate(-2deg)}#title span{display:block;margin-top:.3em;font-size:calc(var(--W)*.034);font-weight:600;color:var(--muted)}
#env{position:absolute;left:3%;width:94%;top:52%;height:47.4%}
#flipper,.face{position:absolute;inset:0}
.fr{opacity:0}.flipped .bk{opacity:0}.flipped .fr{opacity:1}
.bg{position:absolute;inset:0;background:var(--pink);border-radius:14px;box-shadow:0 12px 30px rgba(120,60,90,.2)}
.flap{position:absolute;left:0;width:100%;top:0;height:55%;transform-origin:50% 0;transform:scaleY(-1);z-index:1;filter:drop-shadow(0 2px 2px rgba(120,60,90,.2))}
.fi,.fo{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.fi{background:repeating-linear-gradient(90deg,#fff7f4 0 14px,#f3d9e3 14px 20px,#fff7f4 20px 30px,#b9b6bf 30px 33px,#fff7f4 33px 44px)}
.fo{background:linear-gradient(color-mix(in srgb,var(--pink) 88%,var(--accent)),color-mix(in srgb,var(--pink) 80%,var(--accent)));opacity:0}
.flap.closing{animation:fcl .9s ease-in-out forwards}
.flap.closing .fi{animation:swo .9s steps(1) forwards}.flap.closing .fo{animation:swi .9s steps(1) forwards}
@keyframes fcl{from{transform:scaleY(-1)}to{transform:scaleY(1)}}
@keyframes swo{0%{opacity:1}50%,100%{opacity:0}}@keyframes swi{0%{opacity:0}50%,100%{opacity:1}}
.paper{position:absolute;left:0;width:100%;top:-73.8%;height:164.6%;z-index:2;transform-origin:50% 0;background:var(--paper);border-radius:14px 14px 18px 18px;box-shadow:0 8px 24px rgba(120,60,90,.22);color:#4a3f4d}
.pp{position:absolute;inset:0;padding:5.5% 7%;display:flex;flex-direction:column;gap:.45em;font-size:calc(var(--W)*.034);line-height:1.35}
.pin{position:absolute;right:7%;top:-4.5%;width:8%;height:auto;transform:rotate(8deg);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(60,40,70,.25))}
#thanks .pin{right:12%;top:-22px;width:34px}
.ds{position:absolute;width:6%;opacity:.85;pointer-events:none}
.lb{font-weight:700;font-size:.82em;color:var(--muted)}
#nm{border:0;border-bottom:2px solid rgba(236,160,184,.55);background:transparent;font:inherit;padding:.2em .1em;color:inherit;outline:0;width:75%}
#stars{display:flex;gap:.2em}
#stars button{border:0;background:none;padding:0;cursor:pointer;width:2.2em}
.st{width:100%;fill:#d9d5de;stroke:#c3bdc8;stroke-width:1.2;transition:fill .15s,transform .15s}
.st.f{fill:var(--gold);stroke:#e0a92e;filter:drop-shadow(0 1px 1px rgba(200,140,20,.4))}
#stars button.pop .st{animation:stp .4s}
@keyframes stp{50%{transform:scale(1.35) rotate(12deg)}}
#slab{font-size:.78em;color:var(--muted);min-height:1.2em}
#msg{flex:1;min-height:3.5em;border:0;resize:none;font:inherit;line-height:1.55em;color:inherit;padding:0 .2em;outline:0;background:repeating-linear-gradient(transparent 0,transparent calc(1.55em - 1px),rgba(236,160,184,.55) calc(1.55em - 1px),rgba(236,160,184,.55) 1.55em);background-attachment:local}
#phs{display:flex;gap:.6em;align-items:center;min-height:3.2em}
.add{width:3em;height:3em;border:2px dashed #e2b6c9;border-radius:10px;background:#fff7fa;color:#c88aa5;font:inherit;font-size:1.4em;cursor:pointer;line-height:1}
.th{position:relative;width:3em;height:3em;background:#fff;padding:.2em;box-shadow:0 2px 5px rgba(0,0,0,.2);transform:rotate(var(--r))}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th b{position:absolute;top:-.6em;right:-.6em;width:1.5em;height:1.5em;border-radius:50%;background:#ee86ae;color:#fff;font-size:.8em;text-align:center;line-height:1.5em;cursor:pointer}
#go{margin-top:.1em;border:0;border-radius:99px;padding:.55em 1em;background:linear-gradient(color-mix(in srgb,var(--accent) 55%,#fff),color-mix(in srgb,var(--accent) 85%,#fff));color:#fff;font:inherit;font-weight:700;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 85%,#000);cursor:pointer}
#go:disabled{background:#e6dde1;box-shadow:none;cursor:not-allowed}
#gh{font-size:.72em;text-align:center;color:var(--muted);min-height:1em}
.pocket{position:absolute;inset:0;z-index:3;background:linear-gradient(color-mix(in srgb,var(--pink) 85%,var(--accent)),color-mix(in srgb,var(--pink) 78%,var(--accent)));border-radius:14px;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);pointer-events:none}
.seal{position:absolute;left:50%;top:55%;width:17%;aspect-ratio:1;margin:-8.5% 0 0 -8.5%;z-index:6;opacity:0;pointer-events:none}
.stamper{position:absolute;left:50%;top:55%;width:calc(var(--W)*.18);margin-left:calc(var(--W)*-.09);height:calc(var(--W)*.22);margin-top:calc(var(--W)*-.22);z-index:8;opacity:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;transform:translateY(-160%)}
.stamper i{display:block}.sh{width:30%;height:55%;background:linear-gradient(90deg,#e8a0bb,#f6c6d8,#e8a0bb);border-radius:14px 14px 4px 4px}.sb{width:100%;height:14%;background:#f0c35a;border-radius:6px}.sf{width:62%;height:31%;background:#d9a441;border-radius:0 0 12px 12px}
.pol{position:absolute;left:50%;top:-60%;width:30%;margin-left:-15%;z-index:2;background:#fff;padding:5% 5% 14%;box-shadow:0 4px 10px rgba(0,0,0,.2);opacity:0}
.pol img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.fbg{position:absolute;inset:0;border-radius:14px;background:var(--pink);box-shadow:0 12px 30px rgba(120,60,90,.2)}
.fbg::after{content:"";position:absolute;inset:3.5%;border:2px dashed rgba(255,255,255,.75);border-radius:10px}
.addr{position:absolute;left:9%;top:34%;width:52%;font-size:calc(var(--W)*.04);line-height:2;color:#7a5a6c}
.addr div{border-bottom:2px solid rgba(180,120,150,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pst{position:absolute;right:7%;top:9%;width:22%;aspect-ratio:3/4;background:#fffdf4;padding:5%;outline:3px dotted #fffdf4;outline-offset:2px;opacity:0;transform:rotate(2deg)}
.pst div{width:100%;height:100%;background:linear-gradient(160deg,#cdb8ff,#ffb8d1);display:flex;align-items:center;justify-content:center}
.pst svg{width:60%}
.pm{position:absolute;right:12%;top:6%;width:42%;opacity:0;transform:rotate(-12deg)}
.stk{position:absolute;left:9%;right:9%;bottom:7%;display:flex;justify-content:center;gap:3%}
.stk svg{width:15%;opacity:0}
.sk{fill:var(--gold);stroke:#fff;stroke-width:3;paint-order:stroke fill;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
#thanks{width:min(92vw,460px);margin:24px auto;text-align:center;background:var(--paper);color:#4a3f4d;border-radius:20px;padding:28px 22px;box-shadow:0 12px 30px rgba(120,60,90,.2);position:relative;animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.96)}}
#thanks h2{margin:.3em 0;font-size:1.7em;color:var(--accent)}
#thanks p{margin:.4em 0 1em;line-height:1.7}
#thanks .row{display:flex;gap:8px;justify-content:center;margin:6px 0}#thanks .row svg{width:34px}
.btn{border:0;border-radius:99px;padding:.6em 1.3em;background:linear-gradient(color-mix(in srgb,var(--accent) 55%,#fff),color-mix(in srgb,var(--accent) 85%,#fff));color:#fff;font:inherit;font-weight:700;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 85%,#000);cursor:pointer;margin:4px}
.btn.alt{background:#fff;color:var(--accent);box-shadow:0 0 0 2px #e2b6c9}
#v-wall{max-width:1000px;margin:0 auto;padding:10px 14px 40px}
#v-wall h1{text-align:center;margin:.4em 0 .1em;font-size:1.9em;color:var(--accent)}
.sum{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;background:var(--paper);color:#4a3f4d;border-radius:18px;padding:16px 20px;margin:12px auto 22px;max-width:560px;box-shadow:0 6px 18px rgba(120,60,90,.15)}
.avg{text-align:center;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:6px 10px;border-radius:14px}.avg:hover,.avg.on{background:#fde6ee}.avg .cnt{font-size:.8em;color:var(--muted)}.avg b{font-size:2.8em;line-height:1;color:var(--accent)}.avg .row{display:flex;justify-content:center;gap:3px;margin-top:4px}.avg svg{width:18px}
.bars{flex:1;min-width:200px}.bar{display:flex;align-items:center;gap:8px;font-size:.85em;cursor:pointer;padding:1px 0;border-radius:6px}.bar.on{background:#fde6ee}
.bar svg{width:14px;height:14px;flex:none}.bar i{flex:1;height:9px;background:#f0e6ea;border-radius:9px;overflow:hidden}.bar i s{display:block;height:100%;background:var(--gold);border-radius:9px;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:44px 28px;align-items:start;padding:14px 8px 0}
.card{min-width:0;margin:0;padding:24px 16px 14px;background:var(--cp);color:#4a3f4d;border-radius:14px;box-shadow:0 6px 16px rgba(120,60,90,.16);transform:rotate(var(--r));position:relative;cursor:pointer;transition:transform .25s,box-shadow .25s}
.card:hover{transform:rotate(0) translateY(-5px);box-shadow:0 12px 24px rgba(120,60,90,.22)}
.card .row{display:flex;gap:2px;margin-bottom:8px}.card .row svg{width:18px}
.card p{margin:0 0 10px;line-height:1.65;font-size:.95em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.who{font-size:.82em;color:var(--muted)}.who em{font-style:normal;background:#f0e9f6;color:#8a78b8;border-radius:6px;padding:0 .5em;margin-left:6px;font-size:.85em}
.tape{position:absolute;top:-11px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(255,214,230,.78);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(120,60,90,.15);pointer-events:none}
.card .pin{width:30px;height:auto;right:16px;top:-24px;transform:rotate(8deg)}
.phr{display:flex;gap:8px;margin:0 0 10px;flex-wrap:wrap}.phr img{width:64px;height:64px;object-fit:cover;background:#fff;padding:4px 4px 10px;box-shadow:0 2px 6px rgba(0,0,0,.2);transform:rotate(var(--q))}
#modal{position:fixed;inset:0;background:rgba(60,40,70,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
#modal.on{display:flex}
#modal .card{width:min(94vw,480px);max-height:88vh;overflow:auto;transform:none;cursor:default;animation:rise .4s both}
#modal .card p{display:block;-webkit-line-clamp:unset;font-size:1.05em}
#modal .phr img{width:min(40vw,150px);height:min(40vw,150px)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:60}
.sp{position:absolute;width:14px;height:14px;background:var(--c);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);transform:translate(-50%,-50%) scale(0);animation:pop 1.1s ease-out forwards}
@keyframes pop{30%{opacity:1;transform:translate(calc(-50% + var(--dx)*.5),calc(-50% + var(--dy)*.5)) scale(1) rotate(90deg)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(220deg)}}
.bg,.flap,.pocket{opacity:0}
#title img{display:block;margin:0 auto;max-width:80%;max-height:calc(var(--W)*.2);object-fit:contain}

.rp{margin:0 0 10px;padding:7px 10px;background:rgba(255,255,255,.65);border-left:3px solid var(--accent);border-radius:8px;font-size:.88em;line-height:1.55}
.rp b{display:block;color:var(--accent);font-size:.9em}
.rp span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
#modal .rp span{display:block;-webkit-line-clamp:unset}

.fbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:-8px auto 18px}
.fbar span{display:inline-flex;align-items:center;gap:4px;background:var(--paper);color:#4a3f4d;border-radius:99px;padding:.3em .9em;box-shadow:0 3px 10px rgba(120,60,90,.12)}
.fbar span svg{width:15px}
.fbar .btn{margin:0;padding:.4em 1.1em}
.empty{grid-column:1/-1;text-align:center}
.bar:focus-visible,.avg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}