:root{--ink:#10141f;--panel:#1a2030;--panel-2:#222a3d;--green:#06c755;--green-deep:#04a346;--rose:#ff7ba9;--gold:#ffc862;--cream:#f4efe6;--muted:#8c94a8;--miss:#ff6b6b;--radius:20px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{height:100%}body{background:var(--ink);background-image:radial-gradient(1200px 600px at 50% -10%, #1c2438 0%, var(--ink) 60%);color:var(--cream);justify-content:center;min-height:100dvh;font-family:IBM Plex Sans Thai,Fredoka,system-ui,sans-serif;display:flex}.phone{flex-direction:column;width:100%;max-width:430px;min-height:100dvh;padding:20px 20px 28px;display:flex;position:relative;overflow:hidden}h1,h2,.btn,.brand{font-family:Fredoka,IBM Plex Sans Thai,sans-serif}.screen{flex-direction:column;flex:1;animation:.45s both rise;display:none}.screen.active{display:flex}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.btn{appearance:none;cursor:pointer;background:var(--green);color:#06301a;letter-spacing:.01em;box-shadow:0 6px 0 var(--green-deep);border:none;border-radius:999px;width:100%;padding:16px 28px;font-size:1.05rem;font-weight:600;transition:transform 80ms,box-shadow 80ms,filter .15s}.btn:active{box-shadow:0 2px 0 var(--green-deep);transform:translateY(4px)}.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.btn.ghost{color:var(--muted);box-shadow:none;background:0 0;padding:12px;font-size:.9rem;font-weight:500}.btn.ghost:active{filter:brightness(1.3);transform:none}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin-bottom:10px;font-family:Fredoka,sans-serif;font-size:.72rem;font-weight:600}#title{text-align:center;justify-content:center}.logo-bubbles{height:120px;margin-bottom:18px;position:relative}.logo-bubbles .lb{border-radius:22px;padding:13px 20px;font-family:Fredoka,sans-serif;font-size:1.02rem;font-weight:600;position:absolute}.lb.he{background:var(--green);color:#06301a;border-bottom-left-radius:6px;animation:3.2s ease-in-out infinite bob;top:6px;left:8%;transform:rotate(-4deg)}.lb.she{background:var(--rose);color:#4a1228;border-bottom-right-radius:6px;animation:3.2s ease-in-out 1.6s infinite bob;bottom:0;right:8%;transform:rotate(3deg)}@keyframes bob{0%,to{translate:0}50%{translate:0 -7px}}#title h1{background:linear-gradient(100deg,var(--green) 20%,var(--gold) 55%,var(--rose) 85%);color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:2.5rem;font-weight:700;line-height:1.06}#title .tag{color:var(--muted);margin-bottom:34px;font-size:1rem;line-height:1.5}#title .tag em{color:var(--cream);border-bottom:2px solid var(--rose);font-style:normal}.name-row{gap:10px;margin-bottom:14px;display:flex}.name-row input{background:var(--panel);min-width:0;color:var(--cream);text-align:center;border:1.5px solid #2c3650;border-radius:14px;flex:1;padding:14px 16px;font-family:inherit;font-size:1rem}.name-row input:focus-visible{border-color:var(--green);outline:none}.name-row input::placeholder{color:#5a6378}#title .hint{color:#5a6378;margin-top:16px;font-size:.78rem}.topbar{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.brand{color:#5a6378;letter-spacing:.04em;font-size:.8rem;font-weight:600}.hearts{gap:5px;display:flex}.hearts span{opacity:.22;font-size:.85rem;transition:opacity .3s,transform .3s}.hearts span.on{opacity:1;transform:scale(1.15)}.asker{color:var(--muted);margin:18px 0 6px;font-size:.95rem;line-height:1.5}.asker b{color:var(--cream)}.chat{flex-direction:column;gap:12px;margin:14px 0 8px;display:flex}.phrase{background:var(--green);color:#052a17;border-radius:22px 22px 22px 6px;align-self:flex-start;max-width:88%;padding:16px 20px;font-size:1.3rem;font-weight:600;line-height:1.4;animation:.35s cubic-bezier(.34,1.56,.64,1) both popIn;box-shadow:0 8px 24px #06c7552e}.phrase small{opacity:.75;margin-top:3px;font-size:.78rem;font-weight:500;display:block}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.prompt-q{color:var(--muted);margin:4px 0 12px;font-size:.9rem}.opts{flex-direction:column;gap:10px;display:flex}.opt{appearance:none;cursor:pointer;text-align:left;background:var(--panel);color:var(--cream);border:1.5px solid #2c3650;border-radius:6px 18px 18px;padding:14px 18px;font-family:inherit;font-size:.98rem;line-height:1.45;transition:border-color .15s,background .15s,transform 80ms;animation:.4s both rise}.opt:nth-child(2){animation-delay:50ms}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}.opt:active{transform:scale(.98)}.opt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.opt.picked{border-color:var(--green);background:#13301f}#share,#join{text-align:center;justify-content:center}.centered-big{margin-bottom:18px;font-size:4rem;animation:2.6s ease-in-out infinite bob}#share h2,#join h2{margin-bottom:12px;font-size:1.7rem}#share .share-sub,#join p{color:var(--muted);margin-bottom:34px;line-height:1.6}#share .share-sub b,#join p b{color:var(--rose)}.link-box{background:var(--panel);color:var(--cream);word-break:break-all;-webkit-user-select:all;user-select:all;border:1.5px solid #2c3650;border-radius:14px;margin-bottom:14px;padding:14px 16px;font-size:.85rem}#share .btn+.btn{margin-top:10px}.waiting-line{color:var(--muted);margin-top:22px;font-size:.85rem;line-height:1.5}.waiting-line .pulse{animation:1.6s ease-in-out infinite bob;display:inline-block}.reveal-card{background:var(--panel);border-radius:var(--radius);border:1.5px solid #2c3650;margin:14px 0;padding:18px;animation:.35s cubic-bezier(.34,1.56,.64,1) both popIn}.reveal-card .said{margin-bottom:14px;font-family:Fredoka,sans-serif;font-size:1.15rem;font-weight:600}.ans{align-items:flex-start;gap:10px;margin-bottom:10px;font-size:.92rem;line-height:1.45;display:flex}.ans .who{letter-spacing:.08em;text-transform:uppercase;border-radius:999px;flex-shrink:0;margin-top:1px;padding:4px 9px;font-family:Fredoka,sans-serif;font-size:.68rem;font-weight:600}.ans.meant .who{color:var(--green);background:#06c7552e}.ans.guess .who{color:var(--rose);background:#ff7ba929}.verdict-line{margin-top:8px;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600}.verdict-line.hit{color:var(--green)}.verdict-line.miss{color:var(--miss)}#results{text-align:center;justify-content:center}.score-ring{background:radial-gradient(closest-side, var(--ink) 79%, transparent 80% 100%), conic-gradient(var(--gold) calc(var(--pct,0)*1%), #2c3650 0);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:168px;height:168px;margin:0 auto 18px;transition:--pct 1s;display:flex;position:relative}.score-ring .num{color:var(--gold);font-family:Fredoka,sans-serif;font-size:2.6rem;font-weight:700;line-height:1}.score-ring .of{color:var(--muted);margin-top:3px;font-size:.8rem}#results h2{margin-bottom:10px;font-size:1.55rem}#results .verdict{color:var(--muted);margin-bottom:26px;padding:0 8px;line-height:1.6}.thaipo{border-radius:var(--radius);text-align:left;background:linear-gradient(135deg,#15251b,#132030);border:1.5px solid #06c75559;margin-bottom:22px;padding:18px 20px}.thaipo .tp-eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:7px;font-family:Fredoka,sans-serif;font-size:.68rem;font-weight:600}.thaipo p{color:var(--cream);font-size:.92rem;line-height:1.55}.thaipo p b{color:var(--green)}.float-heart{pointer-events:none;z-index:5;font-size:1.3rem;animation:2.6s ease-in forwards floatUp;position:absolute;bottom:-30px}@keyframes floatUp{to{opacity:0;transform:translateY(-110vh)rotate(40deg)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}