*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:IBM Plex Sans Thai,Mali,sans-serif;color:var(--slurp-choco);background:var(--slurp-cream)}#scene{position:fixed;inset:0;display:block}#ui{position:fixed;inset:0;pointer-events:none;user-select:none}#ui .interactive,#ui button,#ui input{pointer-events:auto}.font-display{font-family:Mali,IBM Plex Sans Thai,sans-serif}.btn{font-family:Mali,IBM Plex Sans Thai,sans-serif;font-weight:700;font-size:1.05rem;color:var(--slurp-choco);background:var(--slurp-golden);border:3px solid var(--slurp-choco);border-radius:999px;padding:12px 28px;cursor:pointer;box-shadow:0 5px 0 var(--slurp-choco),0 11px #5a382540;transition:transform .08s ease,box-shadow .08s ease;position:relative}.btn:hover{transform:scale(1.04)}.btn:active{transform:translateY(4px) scale(.99);box-shadow:0 1px 0 var(--slurp-choco),0 4px #5a382540}.btn.primary{background:var(--slurp-coral);color:var(--slurp-cream)}.btn.ghost{background:var(--slurp-paper)}.btn.danger{background:var(--state-danger);color:var(--slurp-cream)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn.small{font-size:.9rem;padding:8px 18px;box-shadow:0 4px 0 var(--slurp-choco),0 8px #5a382540}.panel{background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:24px;box-shadow:0 6px #5a382540;padding:26px 30px}.ribbon{display:inline-block;font-family:Mali,sans-serif;font-weight:700;background:var(--slurp-coral);color:var(--slurp-cream);border:3px solid var(--slurp-choco);border-radius:999px;padding:6px 26px;box-shadow:0 4px #5a382540}.input{font-family:inherit;font-size:1.05rem;color:var(--slurp-choco);background:var(--slurp-cream);border:3px solid var(--slurp-choco);border-radius:16px;padding:11px 16px;outline:none;width:100%}.input:focus{background:var(--slurp-paper);box-shadow:0 0 0 3px var(--slurp-golden)}.screen-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:safe center;flex-direction:column;gap:14px;overflow-y:auto;padding:56px 16px 24px}.stack{display:flex;flex-direction:column;gap:14px}.row{display:flex;align-items:center;gap:12px}.checkbox-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500;min-height:44px}.checkbox-row .checkbox{width:22px;height:22px;accent-color:var(--slurp-coral);cursor:pointer;flex-shrink:0}.game-title{font-family:Mali,sans-serif;font-weight:700;font-size:clamp(2.2rem,6vw,3.6rem);color:var(--slurp-coral);text-shadow:3px 3px 0 var(--slurp-choco),6px 6px 0 rgba(90,56,37,.25);text-align:center}.subtitle{font-size:1.05rem;color:var(--slurp-choco);opacity:.85}.avatar-dot{width:38px;height:38px;border-radius:50%;border:3px solid var(--slurp-choco);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--slurp-cream)}.player-row{display:flex;align-items:center;gap:12px;background:var(--slurp-cream);border:3px solid var(--slurp-choco);border-radius:18px;padding:9px 14px;min-width:300px}.player-row .name{font-weight:500;flex:1}.tag{font-size:.78rem;font-weight:700;border:2px solid var(--slurp-choco);border-radius:999px;padding:2px 10px;background:var(--slurp-paper)}.tag.ready{background:var(--card-defense);color:var(--slurp-cream)}.tag.host{background:var(--slurp-golden)}.tag.spectator-badge{background:var(--slurp-sky)}.public-rooms{width:100%}.public-room-row{min-width:0}.public-room-code{font-family:Mali,sans-serif;font-weight:700;letter-spacing:.08em;flex-shrink:0}.hud-top{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px}.turn-pill{font-family:Mali,sans-serif;font-weight:700;font-size:1.1rem;background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:999px;padding:8px 22px;box-shadow:0 4px #5a382540}.turn-pill.mine{background:var(--slurp-golden);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.045)}}.action-dots{display:flex;gap:6px;align-items:center}.action-dot{width:16px;height:16px;border-radius:50%;border:3px solid var(--slurp-choco);background:var(--slurp-paper)}.action-dot.on{background:var(--slurp-coral)}.hud-timer{min-width:58px;text-align:center;font-weight:700;font-family:Mali,sans-serif;background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:999px;padding:8px 12px}.hud-timer.low{background:var(--state-danger);color:var(--slurp-cream)}.hud-piles{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.pile-chip{font-size:.88rem;font-weight:500;background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:14px;padding:5px 12px}.hud-actions{position:absolute;bottom:18px;right:18px;display:flex;gap:10px}.hud-banner{position:absolute;bottom:205px;left:50%;transform:translate(-50%);background:var(--slurp-golden);border:3px solid var(--slurp-choco);border-radius:16px;box-shadow:0 5px #5a382540;padding:10px 22px;font-weight:700;font-family:Mali,sans-serif}.tooltip{position:absolute;background:var(--slurp-choco);color:var(--slurp-cream);font-size:.88rem;border-radius:12px;padding:7px 13px;transform:translate(-50%,-130%);white-space:nowrap;z-index:60}.toast-stack{position:absolute;top:78px;right:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;z-index:50}.toast{background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:14px;box-shadow:0 5px #5a382540;padding:11px 18px;transform:rotate(3deg);font-weight:500;max-width:320px}.toast.danger{background:var(--state-danger);color:var(--slurp-cream)}.reaction-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#5a38254d;z-index:70}.reaction-panel{display:flex;flex-direction:column;align-items:center;gap:9px;max-width:min(560px,92vw);max-height:94vh;overflow-y:auto;background:#fffbf28c;border-radius:24px;padding:14px 20px}.reaction-ring{width:64px;height:64px;border-radius:50%;border:3px solid var(--slurp-choco);display:flex;align-items:center;justify-content:center;font-family:Mali,sans-serif;font-weight:700;font-size:1.5rem;background:conic-gradient(var(--slurp-coral) calc(var(--p, 1) * 360deg),var(--slurp-cream) 0deg);box-shadow:0 4px #5a382540}.reaction-ring span{background:var(--slurp-paper);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--slurp-choco)}.attack-card{width:130px;border-radius:14px;border:3px solid var(--slurp-choco);background:var(--slurp-paper);overflow:hidden;text-align:center;box-shadow:0 6px #5a382540}.attack-card .head{font-family:Mali,sans-serif;font-weight:700;padding:7px 6px;color:var(--slurp-cream);font-size:.95rem}.attack-card .body{font-size:.76rem;padding:8px;min-height:58px}.defense-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.defense-card{cursor:pointer;width:118px;transition:transform .1s ease}.defense-card:hover{transform:translateY(-6px) scale(1.05)}.laststand-banner{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) rotate(-2deg);font-family:Mali,sans-serif;font-weight:700;font-size:clamp(1.6rem,4.5vw,2.6rem);background:var(--state-danger);color:var(--slurp-cream);border:4px solid var(--slurp-choco);border-radius:20px;padding:16px 42px;box-shadow:0 8px #5a382540;z-index:65}.score-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#5a382559;z-index:80}.score-overlay .panel{max-height:92vh;overflow-y:auto}.score-row{display:flex;align-items:center;gap:14px;background:var(--slurp-cream);border:3px solid var(--slurp-choco);border-radius:16px;padding:10px 16px;min-width:340px}.score-row.winner{background:var(--slurp-golden)}.score-row .pts{font-family:Mali,sans-serif;font-weight:700;font-size:1.25rem;margin-left:auto}.corner-tl{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;z-index:90}.audio-controls{display:flex;align-items:center;gap:6px;background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:999px;padding:4px 12px 4px 6px;box-shadow:0 4px #5a382540}.audio-mute-btn{padding:6px 10px;box-shadow:none;border-width:0;font-size:1.05rem;line-height:1}.audio-mute-btn:active{transform:scale(.94);box-shadow:none}.volume-slider{width:76px;accent-color:var(--slurp-coral);cursor:pointer}.room-code{font-family:Mali,sans-serif;font-weight:700;font-size:1.7rem;letter-spacing:.28em;background:var(--slurp-cream);border:3px dashed var(--slurp-choco);border-radius:16px;padding:8px 20px;cursor:pointer}.hint{font-size:.85rem;opacity:.75}.fade-in{animation:fadeIn .35s ease both}@keyframes fadeIn{0%{opacity:0;transform:translateY(14px)}}.card-info{position:fixed;left:14px;bottom:205px;width:min(250px,62vw);background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:20px;box-shadow:0 6px #5a382540;overflow:hidden;pointer-events:none;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .18s ease,transform .18s ease;z-index:40}.card-info.show{opacity:1;transform:translateY(0) scale(1)}.card-info-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;border-bottom:3px solid var(--slurp-choco)}.card-info-name{font-family:Mali,IBM Plex Sans Thai,sans-serif;font-weight:700;font-size:1.05rem;color:var(--slurp-paper);text-shadow:0 1.5px 0 rgba(90,56,37,.55)}.card-info-pts{flex:none;background:var(--slurp-golden);border:2px solid var(--slurp-choco);border-radius:999px;padding:1px 10px;font-family:Mali,sans-serif;font-weight:700;font-size:.9rem;color:var(--slurp-choco)}.card-info-type{padding:6px 14px 0;font-size:.78rem;font-weight:600;opacity:.65}.card-info-text{padding:4px 14px 8px;font-size:.95rem;line-height:1.45}.card-info-how{padding:7px 14px;border-top:2px dashed rgba(90,56,37,.25);font-size:.82rem;opacity:.8}.howto-overlay{position:fixed;inset:0;background:#5a382573;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:60}.howto-panel{width:min(760px,94vw);max-height:86vh;display:flex;flex-direction:column;gap:10px}.howto-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.howto-close{flex:none}.howto-tabs{display:flex;gap:8px;flex-wrap:wrap}.howto-body{overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 10px 2px;display:flex;flex-direction:column;gap:14px}.howto-hero{width:100%;border-radius:18px;border:3px solid var(--slurp-choco);box-shadow:0 6px #5a382540;display:block}.login-hero{max-width:min(420px,88vw);margin-bottom:4px}.howto-section{background:var(--slurp-paper);border:2px solid rgba(90,56,37,.2);border-radius:16px;padding:12px 14px}.howto-section-title{font-family:Mali,IBM Plex Sans Thai,sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:6px}.howto-p{font-size:.92rem;line-height:1.55;margin:4px 0}.howto-step{border-top:2px dashed rgba(90,56,37,.18);padding-top:8px;margin-top:8px}.howto-step:first-of-type{border-top:none;margin-top:0;padding-top:0}.howto-step-name{font-weight:700;color:var(--slurp-coral)}.howto-type-row{display:flex;align-items:flex-start;gap:10px;margin:8px 0}.howto-type-chip{flex:none;color:var(--slurp-paper);font-family:Mali,IBM Plex Sans Thai,sans-serif;font-weight:700;font-size:.85rem;border:2px solid var(--slurp-choco);border-radius:999px;padding:3px 12px;text-shadow:0 1px 0 rgba(90,56,37,.35)}.howto-group-head{display:flex;align-items:center;gap:10px;margin-top:6px}.howto-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}.howto-card{display:flex;gap:10px;background:var(--slurp-paper);border:2px solid rgba(90,56,37,.2);border-radius:14px;padding:10px}.howto-card-img{flex:none;width:72px;aspect-ratio:3 / 4;object-fit:cover;border-radius:10px;border:2px solid var(--slurp-choco);background:var(--slurp-cream)}.howto-card-info{min-width:0}.howto-card-name{font-family:Mali,IBM Plex Sans Thai,sans-serif;font-weight:800;font-size:.98rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.howto-card-pts{background:var(--slurp-golden);color:var(--slurp-choco);border:2px solid var(--slurp-choco);border-radius:999px;font-size:.78rem;padding:0 8px}.howto-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}@media(max-width:640px){.howto-card-grid{grid-template-columns:1fr}.howto-panel{max-height:92vh}}.profile-user{display:flex;align-items:center;gap:10px}.profile-name{font-family:Mali,IBM Plex Sans Thai,sans-serif;font-weight:800;font-size:1.15rem}.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.profile-stat{background:var(--slurp-paper);border:2px solid rgba(90,56,37,.2);border-radius:14px;padding:10px 8px;text-align:center}.profile-stat-value{font-family:Mali,IBM Plex Sans Thai,sans-serif;font-weight:800;font-size:1.3rem;color:var(--slurp-coral)}.profile-stat-label{font-size:.78rem;opacity:.7}.emote-wheel{position:fixed;bottom:18px;left:18px;z-index:55;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px}.emote-toggle{width:50px;height:50px;padding:0;border-radius:50%;font-size:1.5rem;display:flex;align-items:center;justify-content:center}.emote-panel{display:flex;gap:6px;opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.emote-panel.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.emote-btn{width:46px;height:46px;border-radius:50%;border:3px solid var(--slurp-choco);background:var(--slurp-paper);font-size:1.35rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px #5a382540;transition:transform .08s ease}.emote-btn:hover{transform:scale(1.08)}.emote-btn:active{transform:translateY(2px) scale(.95)}.emote-echo{position:absolute;left:4px;bottom:58px;font-size:1.6rem;animation:emoteEchoFloat 1.5s ease-out forwards;pointer-events:none}@keyframes emoteEchoFloat{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-6px) scale(1.15)}75%{opacity:1;transform:translateY(-34px) scale(1)}to{opacity:0;transform:translateY(-52px) scale(.9)}}.rotate-hint{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:#5a38258c}.rotate-hint.show{display:flex}.rotate-hint-card{background:var(--slurp-paper);border:3px solid var(--slurp-choco);border-radius:20px;box-shadow:0 6px #5a382540;padding:22px 26px;max-width:min(300px,82vw);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.rotate-hint-icon{font-size:2.6rem;animation:rotateHintSpin 1.8s ease-in-out infinite}@keyframes rotateHintSpin{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}@media(max-width:768px),(pointer:coarse){.game-title{font-size:clamp(1.7rem,8vw,2.4rem)}.panel{padding:18px 16px;border-radius:18px}.btn{min-height:44px}.btn.small{min-height:44px;padding:8px 16px}.audio-mute-btn{min-width:44px;min-height:44px}.input,.checkbox-row .checkbox{min-height:44px}.checkbox-row .checkbox{width:26px;height:26px}.hud-top{top:8px;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94vw}.turn-pill{font-size:.9rem;padding:6px 14px}.hud-piles{top:8px;right:8px;gap:6px}.pile-chip{font-size:.72rem;padding:4px 9px}.hud-actions{bottom:10px;right:10px;gap:8px}.hud-banner{bottom:145px;padding:8px 16px;font-size:.85rem;max-width:90vw}.corner-tl{top:8px;left:8px;gap:6px;flex-wrap:wrap;max-width:66vw;row-gap:6px}.audio-controls{padding:3px 8px 3px 4px}.volume-slider{width:54px}.toast-stack{top:58px;right:8px}.toast{max-width:78vw;font-size:.85rem}.card-info{left:8px;bottom:160px;width:min(180px,46vw)}.card-info-text{font-size:.85rem}.emote-wheel{left:10px;bottom:10px}.emote-toggle{width:46px;height:46px}.howto-overlay{padding:0}.howto-panel{width:100%;height:100%;max-height:100%;max-width:100%;border-radius:0}.howto-card-img{width:60px}}@media(orientation:landscape)and (max-height:500px){.hud-top{top:6px;gap:6px}.turn-pill{font-size:.82rem;padding:4px 12px}.action-dots{gap:4px}.corner-tl{top:6px;left:6px;gap:5px;max-width:42vw}.volume-slider{display:none}.hud-piles{top:6px;right:6px}.hud-actions{bottom:8px;right:8px}.emote-wheel{bottom:8px;left:8px}.card-info{bottom:78px;width:min(160px,34vw)}.hud-banner{bottom:74px}}