:root{--night:#0f1d16;--grove:#16261e;--grove-raised:#1e3328;--grove-border:#e0b15c38;--gold:#dcae5c;--gold-bright:#f3cd85;--cream:#f2ead6;--cream-dim:#a9bfab;--jade:#6fbf95;--jade-bright:#9be0bb;--coral:#e2734f;--coral-dim:#e2734f29;--font-body:"IBM Plex Sans Thai", sans-serif}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{min-height:100vh;font-family:var(--font-body);color:var(--cream);background:radial-gradient(ellipse 90% 60% at 18% -10%, #dcae5c1a, transparent 55%), radial-gradient(ellipse 80% 60% at 100% 110%, #6fbf951f, transparent 55%), repeating-linear-gradient(115deg, #ffffff04 0 2px, transparent 2px 6px), var(--night);background-attachment:fixed;margin:0}#app{justify-content:center;align-items:center;min-height:100vh;padding:48px 20px;display:flex}.lobby{flex-direction:column;gap:28px;width:100%;max-width:480px;display:flex}.lobby-header{text-align:center}.lobby-kicker{letter-spacing:.28em;text-transform:uppercase;color:var(--jade-bright);opacity:0;margin:0 0 10px;font-size:.78rem;font-weight:600;animation:.6s forwards rise}.lobby-title{letter-spacing:-.01em;color:var(--cream);opacity:0;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:0 0 12px;font-size:clamp(2.1rem,7vw,2.9rem);font-weight:700;animation:.6s 80ms forwards rise;display:flex}.live-badge{color:var(--jade-bright);background:#6fbf951f;border:1px solid #6fbf9559;border-radius:999px;align-items:center;gap:6px;padding:4px 12px 4px 8px;font-size:.9rem;font-weight:600;display:inline-flex}.live-dot{background:var(--jade-bright);border-radius:50%;width:8px;height:8px;animation:1.8s ease-in-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #9be0bb8c}70%{box-shadow:0 0 0 8px #9be0bb00}to{box-shadow:0 0 #9be0bb00}}.lobby-subtitle{color:var(--cream-dim);opacity:0;margin:0;font-size:.98rem;line-height:1.6;animation:.6s .16s forwards rise}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.lobby-card{background:linear-gradient(180deg, var(--grove-raised), var(--grove));border:1px solid var(--grove-border);opacity:0;border-radius:20px;flex-direction:column;gap:20px;padding:28px 26px 26px;animation:.6s .24s forwards rise;display:flex;box-shadow:0 24px 60px -20px #0000008c,inset 0 1px #ffffff08}.lobby-card-heading{color:var(--gold-bright);margin:0;font-size:1.15rem;font-weight:600}.field{flex-direction:column;gap:8px;display:flex}.field-label,.field label{color:var(--cream-dim);letter-spacing:.02em;font-size:.85rem;font-weight:600}.field input[type=text]{font:inherit;color:var(--cream);border:1px solid var(--grove-border);background:#00000038;border-radius:10px;outline:none;padding:12px 14px;font-size:1rem;transition:border-color .15s,box-shadow .15s}.field input[type=text]::placeholder{color:#f2ead659}.field input[type=text]:focus{border-color:var(--jade);box-shadow:0 0 0 3px #6fbf952e}.field input[readonly]{color:var(--cream-dim);cursor:default}.form-picker{grid-template-columns:1fr;gap:10px;display:grid}.form-tile{border:1px solid var(--grove-border);cursor:pointer;background:#00000026;border-radius:12px;flex-direction:column;gap:2px;padding:12px 36px 12px 14px;transition:border-color .15s,background .15s,transform .1s;display:flex;position:relative}.form-tile:hover{border-color:#dcae5c80;transform:translateY(-1px)}.form-tile input{opacity:0;pointer-events:none;position:absolute}.form-tile-name{color:var(--cream);font-size:1rem;font-weight:700}.form-tile-hint{color:var(--cream-dim);font-size:.82rem}.form-tile:has(input:checked){border-color:var(--gold);background:#dcae5c1a;box-shadow:inset 0 0 0 1px #dcae5c4d}.form-tile:has(input:checked):after{content:"✓";color:var(--gold-bright);font-weight:700;position:absolute;top:12px;right:14px}.form-tile:has(input:checked) .form-tile-name{color:var(--gold-bright)}.lobby-submit{appearance:none;font:inherit;color:var(--night);background:linear-gradient(135deg, var(--gold-bright), var(--gold));cursor:pointer;border:none;border-radius:12px;padding:13px 20px;font-size:1.02rem;font-weight:700;transition:transform .12s,box-shadow .12s,opacity .12s;box-shadow:0 10px 24px -10px #dcae5c8c}.lobby-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 30px -10px #dcae5ca6}.lobby-submit:active:not(:disabled){transform:translateY(0)}.lobby-submit:disabled{opacity:.6;cursor:progress}.lobby-error{border-left:3px solid var(--coral);background:var(--coral-dim);color:var(--cream);border-radius:10px;margin:0;padding:10px 12px;font-size:.9rem;line-height:1.5}.lobby-error[hidden]{display:none}.room{flex-direction:column;gap:20px;width:100%;max-width:620px;display:flex}.room-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.room-turn{color:var(--gold-bright);margin:0;font-size:1.2rem;font-weight:700}.room-host-controls{gap:10px;display:flex}.room-host-btn{appearance:none;border:1px solid var(--grove-border);font:inherit;color:var(--cream);cursor:pointer;background:#0003;border-radius:10px;padding:8px 14px;font-size:.88rem;font-weight:600;transition:border-color .15s,background .15s}.room-host-btn:hover{border-color:#dcae5c80}.room-end-btn{color:var(--coral);border-color:#e2734f59}.room-host-btn[hidden]{display:none}.room-poem{background:linear-gradient(180deg, var(--grove-raised), var(--grove));border:1px solid var(--grove-border);border-radius:16px;flex-direction:column;gap:16px;max-height:46vh;padding:20px 22px;display:flex;overflow-y:auto}.room-poem-empty{color:var(--cream-dim);text-align:center;margin:0;font-size:.95rem}.room-bot{flex-direction:column;gap:6px;display:flex}.room-bot-label{letter-spacing:.12em;text-transform:uppercase;color:var(--jade-bright);margin:0;font-size:.75rem;font-weight:700}.room-line{justify-content:space-between;align-items:baseline;gap:12px;margin:0;line-height:1.6;display:flex}.room-line-text{color:var(--cream);font-size:1.02rem}.room-line-author{color:var(--cream-dim);flex-shrink:0;font-size:.78rem}.room-export{flex-wrap:wrap;gap:10px;display:flex}.room-players{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.room-player{color:var(--cream-dim);border:1px solid var(--grove-border);background:#0000002e;border-radius:999px;padding:5px 12px;font-size:.82rem}.room-player.is-present{color:var(--cream);border-color:#6fbf9566}.room-player.is-host:before{content:"★ ";color:var(--gold-bright)}.room-player.is-turn{color:var(--night);background:var(--gold-bright);border-color:var(--gold-bright);font-weight:700}.room-draft{background:linear-gradient(180deg, var(--grove-raised), var(--grove));border:1px solid var(--grove-border);border-radius:16px;flex-direction:column;gap:12px;padding:20px;display:flex}.room-textarea{font:inherit;color:var(--cream);border:1px solid var(--grove-border);resize:vertical;background:#00000038;border-radius:10px;outline:none;padding:12px 14px;font-size:1rem;transition:border-color .15s,box-shadow .15s}.room-textarea:focus{border-color:var(--jade);box-shadow:0 0 0 3px #6fbf952e}.room-textarea:disabled{opacity:.5;cursor:not-allowed}.room-feedback{flex-direction:column;gap:8px;display:flex}.room-diag-turn{color:var(--cream-dim);margin:0;font-size:.85rem}.room-diag-chips{flex-wrap:wrap;gap:8px;display:flex}.room-diag-chip{border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600}.room-diag-chip.is-good{color:var(--jade-bright);background:#6fbf9524}.room-diag-chip.is-bad{color:var(--coral);background:var(--coral-dim)}.room-diag-list{flex-direction:column;gap:4px;margin:0;padding-left:18px;font-size:.85rem;line-height:1.5;display:flex}.room-diag-list.is-blocking{color:var(--coral)}.room-diag-list.is-hint{color:var(--jade-bright);padding-left:0;list-style:none}.room-submit-error{border-left:3px solid var(--coral);background:var(--coral-dim);color:var(--cream);border-radius:10px;margin:0;padding:10px 12px;font-size:.9rem}.room-submit-error[hidden]{display:none}.room-submit-btn{appearance:none;font:inherit;color:var(--night);background:linear-gradient(135deg, var(--gold-bright), var(--gold));cursor:pointer;border:none;border-radius:12px;align-self:flex-end;padding:11px 22px;font-weight:700;transition:transform .12s,opacity .12s}.room-submit-btn:hover:not(:disabled){transform:translateY(-1px)}.room-submit-btn:disabled{opacity:.5;cursor:not-allowed}