:root{--bg-dark:#080b14;--bg-indigo:#141a2e;--card-bg:#161d31;--primary:#35c6d9;--primary-ink:#04222a;--accent:#36d399;--gold:#e8c36a;--gold-dim:#b8945a;--chaos:#e5565b;--phantom:#a779e6;--light:#e8c36a;--glass-fill:#ffffff14;--glass-border:#fff3;--text-primary:#f4f6fb;--text-secondary:#ffffffb3;--text-muted:#ffffff80;--action-primary:#7c5aff;--action-primary-ink:#fff;--action-secondary-fill:#ffffff14;--action-secondary-ink:#e8e4d8;--action-ghost-ink:#8f8fae;--action-danger-ink:#e77;--radius-button:16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{min-height:100%}body{color:var(--text-primary);background-color:#0000;background-image:radial-gradient(120% 360px at 50% 0,#a779e638,#0000 70%),radial-gradient(120% 320px at 50% 100%,#e8c36a1a,#0000 70%),linear-gradient(#0b0f1c 0%,#080b14 55%,#0e1322 100%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;font-family:Noto Sans JP,system-ui,sans-serif}#root{min-height:100dvh}.shell{max-width:480px;padding:20px 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:16px;min-height:100dvh;margin:0 auto;display:flex}.shell.center{text-align:center;justify-content:center;align-items:center}.screen{flex-direction:column;flex:1;gap:16px;display:flex}.brand{text-align:center;margin-bottom:8px}.brand-title{letter-spacing:6px;background:linear-gradient(135deg, #f3d690, var(--gold), #c79a4b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:800}.brand-sub{color:var(--text-secondary);margin-top:4px;font-size:13px}.screen-header{align-items:center;gap:8px;display:flex}.header-menu,.header-spacer{flex:0 0 40px;width:40px;position:relative}.phase-label{text-align:center;letter-spacing:1px;flex:1;font-size:20px;font-weight:800}.menu-button{width:40px;height:40px;color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;padding:0;display:flex}.menu-button:active{background:var(--glass-fill)}.menu-icon,.menu-icon:before,.menu-icon:after{background:currentColor;border-radius:1px;width:18px;height:2px;display:block}.menu-icon{position:relative}.menu-icon:before,.menu-icon:after{content:"";position:absolute;left:0}.menu-icon:before{top:-6px}.menu-icon:after{top:6px}.menu-popup{z-index:50;background:var(--card-bg);border:1px solid var(--glass-border);border-radius:12px;min-width:180px;padding:6px;position:absolute;top:44px;left:0;box-shadow:0 16px 32px #00000080}.menu-room{color:var(--text-secondary);white-space:nowrap;padding:10px 12px;font-size:13px}.menu-item{width:100%;color:var(--text-primary);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px;display:block}.menu-item:active{background:var(--glass-fill)}.room-code{color:var(--gold);letter-spacing:2px;font-weight:700}.card{background:var(--glass-fill);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(8px);border-radius:16px;padding:20px;box-shadow:0 12px 24px #0006}.card-title{color:var(--text-secondary);letter-spacing:1px;margin-bottom:12px;font-size:14px;font-weight:700}.join-card{flex-direction:column;gap:8px;width:100%;display:flex}.field-label{color:var(--text-secondary);text-align:left;margin-top:8px;font-size:13px}.input{border:1px solid var(--glass-border);width:100%;color:var(--text-primary);background:#0000004d;border-radius:12px;outline:none;padding:14px 16px;font-family:inherit;font-size:16px}.input:focus{border-color:var(--primary)}.input-code{letter-spacing:16px;text-align:center;color:var(--gold);font-size:32px;font-weight:700}.btn{border-radius:var(--radius-button);letter-spacing:.2px;cursor:pointer;background:0 0;border:none;width:100%;margin-top:8px;padding:17px;font-family:inherit;font-size:16px;font-weight:700;transition:opacity .15s,transform .1s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--action-primary);color:var(--action-primary-ink)}.btn-secondary{background:var(--action-secondary-fill);color:var(--action-secondary-ink)}.btn-ghost{color:var(--action-ghost-ink);padding:10px;font-size:14px;font-weight:600}.btn-danger{color:var(--action-danger-ink);padding:10px;font-size:14px;font-weight:600}.topic-change-request{flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding-top:20px;display:flex}.topic-change-button{width:auto;margin-top:0;padding:10px 16px;font-size:13px}.player-list{flex-direction:column;gap:4px;list-style:none;display:flex}.player-row{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:10px 4px;display:flex}.player-row:last-child{border-bottom:none}.player-name{align-items:center;gap:8px;font-size:15px;display:flex}.tag{border:1px solid var(--glass-border);color:var(--text-secondary);white-space:nowrap;border-radius:999px;padding:2px 10px;font-size:11px}.tag-host{color:var(--gold);border-color:var(--gold-dim)}.tag-me{color:var(--primary);border-color:var(--primary)}.dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.dot-on{background:var(--accent);box-shadow:0 0 8px var(--accent)}.dot-off{background:#fff3}.role-card{text-align:center;cursor:pointer;width:100%;color:var(--text-primary);border-width:1.5px;flex-direction:column;align-items:center;gap:12px;font-family:inherit;display:flex}.role-card-hidden{border-style:dashed;justify-content:center;min-height:220px}.role-card-mask{color:var(--text-secondary);flex-direction:column;align-items:center;gap:8px;font-size:15px;display:flex}.role-faction{letter-spacing:2px;font-size:13px;font-weight:700}.role-image-frame{aspect-ratio:1;border:1.5px solid var(--glass-border);background:#0003;border-radius:12px;width:min(72vw,240px);overflow:hidden}.role-image{object-fit:contain;width:100%;height:100%;display:block}.role-name{letter-spacing:2px;font-size:32px;font-weight:800}.role-description{color:var(--text-secondary);text-align:left;font-size:13px;line-height:1.7}.role-ability{color:var(--accent);font-size:13px;font-weight:700}.secret-box{background:var(--glass-fill);border:1px solid var(--glass-border);border-radius:12px;width:100%;padding:12px}.secret-label{color:var(--text-muted);margin-bottom:4px;font-size:11px}.secret-value{color:var(--text-primary);letter-spacing:1px;font-size:22px;font-weight:800}.vote-grid{flex-direction:column;gap:10px;display:flex}.vote-target{border:1px solid var(--glass-border);background:var(--glass-fill);width:100%;color:var(--text-secondary);text-align:left;cursor:pointer;border-radius:14px;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;font-family:inherit;font-size:15px;font-weight:600;transition:border-color .15s,background .15s;display:flex}.vote-target .player-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;display:block;overflow:hidden}.vote-target-selected{border-color:var(--action-primary);color:var(--text-primary);background:#7c5aff2e}.result-banner{text-align:center;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;display:flex}.result-faction-image{object-fit:cover;border-radius:14px;width:96px;height:96px;margin-bottom:10px}.result-me{letter-spacing:1px;color:var(--text-primary);font-size:32px;font-weight:800}.result-faction{letter-spacing:.5px;font-size:14px;font-weight:600}.result-facts{border-top:1px solid var(--glass-border);flex-direction:column;gap:6px;width:100%;margin-top:14px;padding-top:16px;display:flex}.result-fact{justify-content:center;align-items:baseline;gap:6px;min-width:0;display:flex}.result-fact-label{color:var(--text-secondary);font-size:14px}.result-fact-value{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;overflow:hidden}.result-vote-round+.result-vote-round{border-top:1px solid #ffffff14;margin-top:20px;padding-top:20px}.result-vote-title{color:var(--gold);margin-bottom:8px;font-size:14px}.result-vote-route{color:var(--text-secondary);line-height:1.5}.result-vote-weight{color:var(--text-primary);flex-shrink:0;margin-left:12px;font-weight:700}.result-vote-summary-title{color:var(--text-muted);margin-top:12px;font-size:12px}.result-vote-summary{color:var(--gold);flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:13px;font-weight:700;display:flex}.banner{text-align:center;border-radius:12px;padding:12px 16px;font-weight:700}.banner-warning{border:1px solid var(--chaos);color:#ff9a9e;background:#e5565b26;animation:1.2s ease-in-out infinite pulse}.banner-reconnect{border:1px solid var(--gold-dim);color:var(--gold);background:#e8c36a1f;font-size:13px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.phase-note{color:var(--text-secondary);font-size:14px;line-height:1.6}.waiting{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:32px 0;display:flex}.spinner{border:3px solid var(--glass-border);border-top-color:var(--primary);border-radius:50%;width:32px;height:32px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.muted{color:var(--text-muted);font-size:14px}.small{font-size:12px}.center-text{text-align:center}.error-text{color:#ff9a9e;padding:8px 0;font-size:13px}.viewing-notice{color:var(--text-secondary);text-align:left;background:#9b7aff1a;border:1px solid #9b7aff59;border-radius:10px;align-items:flex-start;gap:8px;margin:12px 0 4px;padding:10px 12px;font-size:13px;line-height:1.5;display:flex}.players-bar{flex-wrap:wrap;gap:6px;display:flex}.player-chip{color:var(--text-secondary);border:1px solid var(--glass-border);background:var(--glass-fill);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;display:inline-flex}.player-chip-me{color:var(--gold);border-color:var(--gold-dim);font-weight:700}.player-chip-me-label{color:var(--gold-dim);font-size:10px}.banner-timeover{border:1.5px solid var(--chaos);color:#ff9a9e;background:#e5565b40;font-size:18px}.modal-backdrop{z-index:100;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:16px;flex-direction:column;width:100%;max-width:440px;max-height:80vh;display:flex;box-shadow:0 24px 48px #0009}.confirm-modal{max-width:360px}.confirm-title{color:var(--text-primary);font-size:17px;font-weight:700}.confirm-message{color:var(--text-secondary);margin-top:8px;font-size:14px;line-height:1.6}.confirm-actions{gap:10px;padding:0 20px 20px;display:flex}.confirm-actions .btn{margin-top:0;padding:14px}.modal-header{justify-content:space-between;align-items:center;padding:16px 20px 8px;display:flex}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:18px}.modal-body{flex-direction:column;gap:10px;padding:8px 20px 20px;display:flex;overflow-y:auto}.role-info-row{border-left:3px solid var(--glass-border);background:#0003;border-radius:0 10px 10px 0;padding:8px 12px}.role-info-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.role-info-name{font-size:15px;font-weight:700}.role-info-count{font-size:13px}.role-info-ability{color:var(--accent);margin-top:4px;font-size:12px}.role-info-desc{color:var(--text-secondary);margin-top:4px;font-size:12px;line-height:1.6}