:root{--bg: #0f1220;--panel: #1a1f36;--text: #f5f7ff;--muted: #9aa3c7;--accent: #6c8cff;--danger: #ff5c6c;--radius: 12px}*{box-sizing:border-box}html{background:radial-gradient(1200px 800px at 100% -10%,#1b2350 0%,transparent 55%),radial-gradient(1000px 700px at -10% 110%,#241b46 0%,transparent 55%),var(--bg);background-attachment:fixed}html,body{margin:0;padding:0;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%}h1{font-size:1.4rem;margin:0 0 .75rem;letter-spacing:-.01em}.screen{max-width:480px;margin:0 auto;padding:1.25rem;display:flex;flex-direction:column;gap:.9rem}.screen.centered{min-height:100vh;min-height:100dvh;justify-content:center}@keyframes rise-in{0%{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}.screen>*{animation:rise-in .48s cubic-bezier(.22,1,.36,1) both}.screen>*:nth-child(1){animation-delay:40ms}.screen>*:nth-child(2){animation-delay:.11s}.screen>*:nth-child(3){animation-delay:.18s}.screen>*:nth-child(4){animation-delay:.25s}.screen>*:nth-child(5){animation-delay:.32s}.screen>*:nth-child(6){animation-delay:.39s}.screen>*:nth-child(7){animation-delay:.46s}.screen>*:nth-child(n+8){animation-delay:.52s}@media (prefers-reduced-motion: reduce){.screen>*{animation:none}}label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--muted)}input{width:100%;padding:.85rem;font-size:1rem;border-radius:var(--radius);border:1px solid #2b3358;background:rgba(26,31,54,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text);transition:border-color .12s ease,box-shadow .12s ease}input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #6c8cff40}fieldset{border:1px solid #2b3358;border-radius:var(--radius);display:flex;flex-direction:column;gap:.75rem}label.checkbox{flex-direction:row;align-items:center;gap:.5rem;color:var(--text)}label.checkbox input{width:auto;min-height:auto}legend{color:var(--muted);padding:0 .4rem}button{padding:.85rem 1rem;font-size:1rem;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;min-height:44px;box-shadow:0 2px 10px #6c8cff40;transition:background .12s ease,box-shadow .12s ease,transform 90ms ease,filter .12s ease}button:disabled{opacity:.5;cursor:default}button:hover:not(:disabled){filter:brightness(1.08)}button:active:not(:disabled){transform:translateY(1px) scale(.99)}button.danger{background:var(--danger);box-shadow:0 2px 10px #ff5c6c40}.error{color:var(--danger);font-size:.9rem}.alt{color:var(--muted);font-size:.9rem}.footer-link{margin:.5rem 0 0;text-align:center}.footer-link a{color:var(--muted);font-size:.85rem}.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem;background:rgba(20,24,44,.97);border-top:1px solid #2b3358;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.consent-text{margin:0;max-width:640px;font-size:.85rem;color:var(--muted)}.consent-text a{color:var(--accent)}.consent-actions{display:flex;gap:.5rem;flex-shrink:0}.consent-actions button{min-height:auto;padding:.5rem 1rem}.screen.legal{max-width:720px;min-height:100vh}.legal h2{font-size:1.05rem;margin:1.2rem 0 .3rem}.legal p,.legal li{color:var(--muted);line-height:1.55;font-size:.95rem}.legal a{color:var(--accent)}.legal-meta{font-size:.85rem}.back-link{align-self:flex-start;color:var(--muted);font-size:.9rem;text-decoration:none;padding:.25rem 0}.back-link:hover{color:var(--text)}a{color:var(--accent)}.room{max-width:640px;margin:0 auto;padding:1rem 1rem 6rem;min-height:100vh;display:flex;flex-direction:column;gap:.75rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .25rem .75rem;border-bottom:1px solid #2b3358;position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg),rgba(15,18,32,.85));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.topbar-left{display:flex;align-items:center;gap:.55rem;min-width:0;flex:1}.topbar-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.1rem;height:2.1rem;min-height:auto;padding:0;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--accent),#9a6cff);box-shadow:0 2px 10px #6c8cff59}.topbar-title{margin:0;min-width:0;font-size:1.15rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:linear-gradient(90deg,#eaf0ff,#b9c6ff);-webkit-background-clip:text;background-clip:text;color:transparent}.topbar-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.username{color:var(--muted);font-size:.9rem;font-weight:600;max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.people{display:inline-flex;align-items:center;gap:.25rem;color:var(--muted);font-weight:700;font-size:.9rem;flex-shrink:0}.people-icon{display:block;color:var(--muted)}.gear{background:transparent;border:1px solid #2b3358;color:var(--muted);font-size:1rem;padding:.35rem .6rem;min-height:auto;box-shadow:none}.invite{color:var(--muted);font-size:.85rem;display:flex;flex-direction:row;align-items:center;gap:.75rem}.invite-text{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}.invite-code{margin:0}.invite-qr{flex:0 0 auto;width:92px;height:92px;border-radius:8px;background:#fff;padding:4px}.invite-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.invite code{color:var(--text);font-weight:700;letter-spacing:1px}.link-copy{background:transparent;border:1px solid #2b3358;color:var(--muted);font-size:.8rem;padding:.35rem .6rem;min-height:auto;box-shadow:none}.copy-msg{font-size:.8rem;font-weight:600;color:var(--accent)}.settings{background:linear-gradient(180deg,#1d2340 0%,var(--panel) 100%);border:1px solid #2b3358;box-shadow:0 6px 18px #00000040;border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.6rem}.settings-top,.settings-bottom{display:flex;align-items:flex-start;gap:1rem}.settings-top-left,.settings-bottom-left{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;gap:.6rem}.settings-top-right,.settings-bottom-right{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;gap:.5rem}.settings-top-right{align-items:flex-end}@media (max-width: 560px){.settings-top,.settings-bottom{flex-direction:column}.settings-top-left,.settings-top-right,.settings-bottom-left,.settings-bottom-right{flex-basis:auto;width:100%}.settings-top-right{align-items:stretch}}.setting-row{flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.setting-row>span{color:var(--muted);font-size:.9rem}.setting-label{display:flex;flex-direction:column;gap:.05rem}.hint{font-size:.75rem;font-weight:400;opacity:.7}.setting-row input[type=number]{width:5rem;flex:0 0 auto;text-align:right;padding:.45rem .5rem}fieldset input[type=number]{padding:.5rem .6rem}.setting-row.checkbox input[type=checkbox]{width:auto;min-height:auto}.collapsible{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1)}.collapsible.open{grid-template-rows:1fr}.collapsible-inner{overflow:hidden;min-height:0}@media (prefers-reduced-motion: reduce){.collapsible{transition:none}}.advanced{border-top:1px solid #2b3358;padding-top:.4rem}.advanced-header{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:.4rem;background:transparent;border:none;box-shadow:none;padding:.25rem 0;min-height:auto;color:var(--muted);font-weight:700;font-size:.85rem}.advanced-header:hover:not(:disabled){filter:none;color:var(--text)}.advanced-caret{font-size:.7rem;width:.8rem}.advanced-body{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.settings-you{margin:0;color:var(--muted);font-size:.9rem}.settings-actions{display:flex;gap:.5rem}.settings-readonly{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.settings-readonly li{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--muted)}.settings-readonly li strong{color:var(--text);font-weight:700}.ended-banner{background:#2b3358;padding:.6rem .8rem;border-radius:var(--radius);text-align:center}.modal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(6,8,18,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:rise-in .18s ease both}.modal{width:100%;max-width:380px;background:linear-gradient(180deg,#1d2340 0%,var(--panel) 100%);border:1px solid #2b3358;border-radius:var(--radius);box-shadow:0 18px 48px #00000080;padding:1.25rem;display:flex;flex-direction:column;gap:.6rem}.modal-title{margin:0;font-size:1.1rem;font-weight:700}.modal .settings-actions{margin-top:.4rem}button.ghost{background:transparent;border:1px solid #2b3358;color:var(--text);box-shadow:none}.reconnecting-banner{background:#5a4a12;color:#ffe9a6;padding:.6rem .8rem;border-radius:var(--radius);text-align:center;margin:0;animation:reconnect-pulse 1.2s ease-in-out infinite}@keyframes reconnect-pulse{0%,to{opacity:1}50%{opacity:.55}}.feed{display:flex;flex-direction:column;gap:.75rem;flex:1}.messages{position:relative}.messages ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}.message{position:relative;display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.9rem 3.5rem .9rem .9rem;background:linear-gradient(180deg,#1d2340 0%,var(--panel) 100%);border:1px solid #2b3358;border-radius:var(--radius);box-shadow:0 6px 18px #00000040;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.message.active{border-color:var(--accent);box-shadow:0 0 0 2px #6c8cff59,0 10px 26px #00000059;transform:translateY(-1px)}.message.alert{border-color:var(--alert);box-shadow:0 0 0 1px var(--alert),0 0 22px -6px var(--alert)}.message.alert .score-badge{color:var(--alert);border-color:var(--alert)}.message.highlighted{border-color:var(--accent);box-shadow:0 0 0 2px #6c8cff99,0 12px 30px #0006;animation:highlight-flash .6s ease}@keyframes highlight-flash{0%{box-shadow:0 0 0 5px #6c8cffd9}to{box-shadow:0 0 0 2px #6c8cff99,0 12px 30px #0006}}.score-badge{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;border:1px solid #3a4573;border-radius:50%;font-size:1.05rem;font-weight:700;color:var(--muted)}.message.active .score-badge{color:var(--accent);border-color:var(--accent)}@keyframes score-pulse-up{0%{transform:translateY(-50%) scale(1.3)}to{transform:translateY(-50%) scale(1)}}@keyframes score-pulse-down{0%{transform:translateY(-50%) scale(.7)}to{transform:translateY(-50%) scale(1)}}.score-badge.pulse-up{animation:score-pulse-up .3s ease-out}.score-badge.pulse-down{animation:score-pulse-down .3s ease-out}.message .text{margin:0;font-size:1.25rem;line-height:1.35;word-break:break-word;flex:1}.vote-float{position:absolute;right:.5rem;width:2.5rem;height:2.5rem;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;border-radius:50%;background:var(--accent);color:#fff;z-index:10;box-shadow:0 4px 14px #6c8cff80;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity .14s ease,background .12s ease}.vote-float.shown{opacity:1;pointer-events:auto}.vote-float:hover:not(:disabled){background:#85a0ff;filter:none}.vote-float:active:not(:disabled){transform:translateY(-50%) scale(.96)}.vote-float.voting{animation:vote-pop .28s ease}@keyframes vote-pop{0%{transform:translateY(-50%) scale(1)}40%{transform:translateY(-50%) scale(1.4)}to{transform:translateY(-50%) scale(1)}}.message .mod{display:flex;gap:.3rem;flex-shrink:0}.mod-btn{background:#2b3358;color:var(--muted);border:1px solid #3a4573;font-size:.72rem;padding:.3rem .5rem;min-height:auto;box-shadow:none}.mod-btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}.empty{color:var(--muted);text-align:center}.vote-ratio{flex-shrink:0;white-space:nowrap;color:var(--muted);font-size:.85rem;font-weight:700}.vote-ratio.maxed{color:var(--danger)}.composer-wrap{position:fixed;left:50%;transform:translate(-50%);bottom:0;z-index:30;width:100%;max-width:640px;padding:.5rem 1rem .75rem;background:var(--bg);box-shadow:0 -10px 24px #0f1220e6;display:flex;flex-direction:column;gap:.5rem}.composer{display:flex;gap:.5rem}.composer input{flex:1}.clear-btn{background:transparent;border:1px solid #2b3358;color:var(--muted);box-shadow:none}.alert-toggle{flex:0 0 auto;background:transparent;border:1px solid #2b3358;color:var(--muted);box-shadow:none;padding:0 .7rem;font-size:1.05rem}.alert-toggle.on{border-color:var(--alert);color:var(--alert)}.alert-color{flex:0 0 auto;width:2.8rem;padding:2px;background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer}.hidden-color{position:absolute;width:1px;height:1px;padding:0;opacity:0;pointer-events:none}.alert-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.alert-list li{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.alert-swatch{flex:0 0 auto;width:1.1rem;height:1.1rem;border-radius:4px;border:1px solid rgba(255,255,255,.2)}.alert-msg{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alert-del{flex:0 0 auto;background:transparent;border:1px solid #2b3358;color:var(--muted);box-shadow:none;min-height:auto;padding:.2rem .5rem;font-size:.85rem}.alert-add{display:flex;align-items:center;gap:.4rem;margin-top:.5rem}.alert-add input:not(.alert-color){flex:1;min-width:0}.host-alerts{display:flex;flex-direction:column;gap:.4rem}.settings-divider{border:none;border-top:1px solid #2b3358;width:100%;margin:0}.alert-vignette{position:fixed;inset:0;z-index:40;pointer-events:none;box-shadow:inset 0 0 140px 30px var(--vig);animation:vignette-flash 1s ease-in-out infinite}@keyframes vignette-flash{0%,to{opacity:.2}50%{opacity:.85}}@media (prefers-reduced-motion: reduce){.alert-vignette{animation:none;opacity:.55}}.suggestions{list-style:none;margin:0;padding:.25rem;max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;background:#0d1122;border:1px solid #343f6b;border-radius:10px;box-shadow:0 -10px 30px #00000073}.suggestions li{display:flex;align-items:center;gap:.55rem;padding:.45rem .55rem;border-radius:6px;border-left:3px solid transparent;cursor:pointer;transition:background .12s ease,border-color .12s ease}.suggestions li:hover{background:rgba(108,140,255,.1);border-left-color:var(--accent)}.sg-score{flex:0 0 auto;min-width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(108,140,255,.18);color:#b9c6ff;font-size:.72rem;font-weight:700}.sg-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}