:root{--imposter-color: #FF5252;--civilian-color: #4CAF50;--blank-color: #FF9800;--imposter-bg: #FFEBEE;--civilian-bg: #E8F5E9;--border-radius-pill: 50px}.role-modal{max-width:320px;width:100%;max-height:none;overflow:hidden}.btn-large{padding:16px 32px;font-size:18px;min-width:200px}.completion-actions .btn{min-width:140px}@media (max-width: 480px){.player-buttons-grid{grid-template-columns:1fr}.completion-actions{flex-direction:column}.completion-actions .btn{width:100%}.role-display{padding:1rem}.word-value{font-size:24px}}.back-button-container{margin-bottom:var(--spacing-md)}.setup-section{max-width:400px;margin:0 auto}.setup-card{margin-bottom:var(--spacing-lg)}.setup-card.simple-view .advanced-option{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease}.advanced-option{max-height:1000px;opacity:1;transition:max-height .3s ease,opacity .3s ease}.primary-cta{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md);align-items:stretch}.setup-card .btn-primary.btn-large{width:100%;gap:10px;font-size:18px;font-weight:var(--font-weight-bold);letter-spacing:.3px;background:linear-gradient(135deg,#6f6bfa,#5046e5);box-shadow:0 12px 30px #5e5df059;border:none;transition:background .25s ease,box-shadow .25s ease,transform .2s ease}.setup-card .btn-primary.btn-large:disabled{background:linear-gradient(135deg,#2f3145,#23263a);color:#ffffffb8;box-shadow:none;cursor:not-allowed}.setup-card .btn-primary.btn-large:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 34px #5e5df073;background:linear-gradient(135deg,#7a76ff,#4338ca)}.setup-card .btn-primary.btn-large:focus-visible{outline:3px solid rgba(94,93,240,.45);outline-offset:2px}#generateRolesBtn,#confirmCreateRoomBtn{margin-top:var(--spacing-md)}.primary-cta .text-link{align-self:center;background:transparent;border:none;color:var(--primary-color);font-size:14px;font-weight:var(--font-weight-medium);padding:4px 8px;border-radius:var(--border-radius-sm);text-decoration:none;transition:color .2s ease,background-color .2s ease,text-decoration-color .2s ease}.primary-cta .text-link:before{content:"⚙️";margin-right:6px;font-size:14px;line-height:1;vertical-align:-1px}.primary-cta .text-link:hover,.primary-cta .text-link:focus{color:var(--primary-text);background-color:#5e5df014;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--primary-color);outline:none}.advanced-panel{overflow:hidden;transition:max-height .35s ease,opacity .25s ease}.advanced-panel.collapsed{max-height:0;opacity:0}.advanced-panel.expanded{max-height:2000px;opacity:1}.advanced-card{background-color:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:var(--border-radius-lg);padding:var(--spacing-md);margin-top:var(--spacing-md);box-shadow:0 2px 10px #00000026}.advanced-card-title{font-size:14px;font-weight:var(--font-weight-bold);color:var(--secondary-text);margin:0 0 8px;letter-spacing:.3px}.setup-card>.advanced-option+.advanced-option{border-top:1px solid rgba(94,93,240,.15);margin-top:var(--spacing-md);padding-top:var(--spacing-md)}.advanced-card .advanced-option+.advanced-option{border-top:none;margin-top:var(--spacing-sm);padding-top:0}.setup-card:not(.simple-view) .number-btn{width:40px;height:40px;font-size:20px}.setup-card:not(.simple-view) .number-input{min-height:44px;font-size:18px}.segmented-control{margin-top:6px;margin-bottom:4px}.input-group .input-label{display:block;margin-bottom:6px}.input-hint-inline{font-size:13px;color:var(--secondary-text);margin-top:var(--spacing-xs);line-height:1.4;opacity:.9}.number-input-group{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-xs)}.number-btn{width:48px;height:48px;border:2px solid var(--primary-color);background-color:transparent;color:var(--primary-color);border-radius:var(--border-radius-md);font-size:24px;font-weight:var(--font-weight-bold);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.number-btn:hover:not(:disabled){background-color:var(--primary-color);color:var(--primary-text);transform:scale(1.05);box-shadow:var(--shadow-button)}.number-btn:active:not(:disabled){transform:scale(.95)}.number-btn:disabled{border-color:var(--disabled-bg);color:var(--disabled-text);cursor:not-allowed;opacity:.5}.number-input{flex:1;text-align:center;font-size:20px;font-weight:var(--font-weight-bold);background-color:var(--surface-color);border:2px solid var(--primary-color);border-radius:var(--border-radius-md);color:var(--primary-text);padding:var(--spacing-sm);min-height:48px;cursor:default}.input-hint{font-size:var(--font-size-small);color:var(--secondary-text);margin-top:var(--spacing-xs);text-align:center}.validation-message{padding:var(--spacing-sm);border-radius:var(--border-radius-sm);margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);text-align:center;animation:slideDown .3s ease}.validation-message.error{background-color:#e74c3c26;border:1px solid var(--imposter-color);color:var(--imposter-color)}.validation-message.warning{background-color:#f39c1226;border:1px solid var(--warning-color);color:var(--warning-color);animation:warningPulse 2s ease-in-out infinite}.roles-accordion-panel{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease-in-out,opacity .5s ease-in-out,margin-top .5s ease-in-out;margin-top:0;background-color:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:var(--border-radius-lg);padding:0 var(--spacing-md)}.roles-accordion-panel.expanded{max-height:5000px;opacity:1;margin-top:var(--spacing-xs);padding:var(--spacing-xs);overflow:visible}.player-roles-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.player-role-item{display:flex;flex-direction:column;gap:8px;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface-color);border-radius:var(--border-radius-md);overflow:hidden}.player-row-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.player-row-bottom{display:flex;align-items:center;width:100%}.player-role-item .player-name{font-weight:var(--font-weight-medium);flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;background-color:#ffffff14;padding:4px 8px;border-radius:var(--border-radius-sm)}.player-role-item .role-tag{flex-shrink:0;padding:4px 8px;border-radius:var(--border-radius-sm)}.player-role-item .player-word{font-weight:700;color:var(--primary-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;background-color:#ffffff14;padding:4px 8px;border-radius:var(--border-radius-sm)}.role-tag.role-civilian{background-color:var(--civilian-color);color:#fff}.role-tag.role-imposter{background-color:var(--imposter-color);color:#fff}.role-tag.role-blank{background-color:#ff9800;color:#fff}.player-word{font-size:14px;font-weight:700;color:var(--primary-color)}.section-title{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--spacing-lg);color:var(--primary-text)}.completion-actions{display:flex;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-md)}.completion-actions .btn{flex:1}.completion-utility{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--spacing-md);margin-top:var(--spacing-md)}.btn-utility-link{background:none;border:none;color:var(--secondary-text);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:color .2s ease,background-color .2s ease;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);display:inline-flex;align-items:center;gap:var(--spacing-xs)}.btn-utility-link:hover{color:var(--primary-text);background-color:#ffffff0d}.btn-utility-link .icon{font-size:16px}.word-pair{display:flex;flex-direction:column;gap:var(--spacing-md)}.word-item{padding:var(--spacing-md);border-radius:var(--border-radius-md);background-color:var(--background-color);animation:wordItemReveal .5s ease}.civilian-word{border:2px solid var(--success-color)}.imposter-word{border:2px solid var(--imposter-color)}.civilian-word .word-label{color:var(--success-color)}.imposter-word .word-label{color:var(--imposter-color)}@keyframes wordItemReveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.cta-section{margin:var(--spacing-xl) 0}.cta-card{background:linear-gradient(135deg,var(--primary-color),#4F4ED1);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);text-align:center;color:var(--primary-text);position:relative;overflow:hidden}.cta-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);animation:ctaShimmer 3s ease-in-out infinite}.cta-title{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm);position:relative;z-index:1}.cta-content{font-size:var(--font-size-body);margin-bottom:var(--spacing-lg);opacity:.9;position:relative;z-index:1}.btn-cta{background-color:var(--primary-text);color:var(--primary-color);font-weight:var(--font-weight-bold);position:relative;z-index:1}.btn-cta:hover{background-color:#f0f0f0;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}@keyframes ctaShimmer{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}@media (max-width: 480px){.completion-actions{flex-direction:column}.completion-actions .btn{max-width:none}.word-pair{gap:var(--spacing-sm)}.number-input-group{justify-content:center;gap:var(--spacing-xs)}.number-btn{width:40px;height:40px;font-size:20px}.role-modal{margin:var(--spacing-sm);max-width:none}}.moderator-tips-card{margin-top:32px;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius-lg);padding:24px 20px;text-align:left}.moderator-tips-title{font-size:1.1rem;font-weight:var(--font-weight-bold);color:#f3f4f6;margin-bottom:20px;text-align:center}.tip-list{display:flex;flex-direction:column;gap:16px}.tip-item{display:flex;gap:12px;align-items:flex-start}.tip-icon{font-size:1.2rem;line-height:1.4;flex-shrink:0}.tip-content{font-size:.9rem;line-height:1.5;color:#9ca3af}.tip-content strong{color:#e5e7eb;display:block;margin-bottom:4px}