.toast-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px;max-width:400px;pointer-events:none}@media(max-width:768px){.toast-container{inset:auto 20px 20px;max-width:none;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}}.toast{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;pointer-events:auto;animation:toast-slide-in .3s ease-out;min-width:280px;max-width:100%}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(max-width:768px){@keyframes toast-slide-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}.toast__icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;border-radius:50%}.toast__message{flex:1;font-size:14px;line-height:1.4;color:#1a1a1a}.toast__close{flex-shrink:0;width:24px;height:24px;border:none;background:transparent;color:#666;font-size:18px;font-weight:700;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.toast__close:hover{background-color:#0000000d}.toast__close:active{background-color:#0000001a}.toast--success{border-left:4px solid #22c55e}.toast--success .toast__icon{color:#22c55e;background-color:#dcfce7}.toast--error{border-left:4px solid #ef4444}.toast--error .toast__icon{color:#ef4444;background-color:#fee2e2}.toast--warning{border-left:4px solid #f59e0b}.toast--warning .toast__icon{color:#f59e0b;background-color:#fef3c7}.toast--info{border-left:4px solid #3b82f6}.toast--info .toast__icon{color:#3b82f6;background-color:#dbeafe}.enhanced-lobby-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#1a202c,#2d3748);color:#fff}.enhanced-lobby-content{max-width:800px;width:100%}.enhanced-lobby-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:2rem;color:var(--color-brass, #d4af37);text-shadow:2px 2px 4px rgba(0,0,0,.3)}.lobby-panel{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:20px;margin-bottom:20px;transition:all .3s ease}.lobby-panel:hover{border-color:#fff3;background:#00000059}.lobby-panel h2{font-size:1.2rem;font-weight:600;margin:0 0 16px;color:var(--color-brass, #d4af37);display:flex;justify-content:space-between;align-items:center}.genre-panel .settings-form{display:flex;flex-direction:column;gap:12px}.setting-label{display:flex;flex-direction:column;gap:6px}.setting-label>span{font-size:.9rem;font-weight:500;color:#fffc}.lobby-select{padding:10px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.95rem;cursor:pointer;transition:all .2s ease}.lobby-select:hover:not(:disabled){border-color:#ffffff4d;background:#0006}.lobby-select:focus{outline:none;border-color:#60a5fa99;box-shadow:0 0 0 3px #60a5fa1a}.lobby-select:disabled{opacity:.5;cursor:not-allowed}.genre-description{padding:10px;background:#60a5fa1a;border-left:3px solid rgba(96,165,250,.5);border-radius:4px;font-size:.9rem;color:#ffffffe6;font-style:italic}.hook-display{display:flex;flex-direction:column;gap:12px}.hook-text{padding:14px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px;line-height:1.6;font-size:.95rem;color:#fffffff2;min-height:80px}.hook-actions{display:flex;gap:8px}.hook-edit{display:flex;flex-direction:column;gap:12px}.hook-textarea{padding:12px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.95rem;line-height:1.6;font-family:inherit;resize:vertical}.hook-textarea:focus{outline:none;border-color:#60a5fa99;box-shadow:0 0 0 3px #60a5fa1a}.hook-edit-actions{display:flex;gap:8px}.character-regen-btn{margin-left:auto}.character-preview{display:flex;flex-direction:column;gap:10px}.character-field{display:flex;gap:10px;padding:10px;background:#0003;border-left:3px solid rgba(96,165,250,.3);border-radius:4px}.field-label{font-weight:600;color:#60a5fa;min-width:90px}.field-value{color:#ffffffe6;flex:1}.players-list{display:flex;flex-direction:column;gap:10px}.player-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:6px;transition:all .2s ease}.player-item:hover{background:#0000004d;border-color:#fff3}.player-local{border-color:#60a5fa4d;background:#60a5fa0d}.player-info{display:flex;flex-direction:column;gap:4px}.player-name{font-weight:600;color:#fff}.player-status{font-size:.85rem}.player-status.ready{color:#22c55e}.player-status.not-ready{color:#9ca3af}.connection-indicator{width:10px;height:10px;border-radius:50%}.connection-indicator.green{background:#22c55e}.connection-indicator.yellow{background:#eab308}.connection-indicator.red{background:#ef4444}.ready-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ready-checkbox input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:rgba(34,197,94,1)}.ready-label{font-size:.9rem;font-weight:500;color:#ffffffe6}.room-code-panel{background:#60a5fa1a;border-color:#60a5fa4d}.room-code-input-container{display:flex;gap:10px;align-items:center}.room-code-input{flex:1;padding:12px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:1.2rem;font-weight:600;text-align:center;text-transform:uppercase;letter-spacing:.1em}.room-code-input:focus{outline:none;border-color:#60a5fa99;box-shadow:0 0 0 3px #60a5fa1a}.room-code-input::placeholder{color:#fff6;text-transform:none;letter-spacing:normal}.send-link-panel{background:#60a5fa1a;border-color:#60a5fa4d}.btn-share{width:100%;max-width:300px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem}.share-icon{font-size:1.2rem}.btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-sm{padding:6px 12px;font-size:.85rem}.btn-lg{padding:14px 28px;font-size:1.1rem}.btn-primary{background:#60a5fa4d;border-color:#60a5fa80}.btn-primary:hover:not(:disabled){background:#60a5fa66;border-color:#60a5fa99}.btn-ready{background:#22c55e4d;border-color:#22c55e80}.btn-ready:hover:not(:disabled){background:#22c55e66;border-color:#22c55e99}.lobby-actions{margin-top:24px;text-align:center}.start-btn{width:100%;max-width:400px}body.genre-fantasy{--color-brass: #d4af37;--theme-primary: rgba(212, 175, 55, .3)}body.genre-cyberpunk{--color-brass: #00ffff;--theme-primary: rgba(0, 255, 255, .3)}body.genre-gothic{--color-brass: #8b0000;--theme-primary: rgba(139, 0, 0, .3)}body.genre-space{--color-brass: #9333ea;--theme-primary: rgba(147, 51, 234, .3)}body.genre-mystery{--color-brass: #f59e0b;--theme-primary: rgba(245, 158, 11, .3)}@media(max-width:640px){.enhanced-lobby-container{padding:16px}.enhanced-lobby-title{font-size:1.5rem;margin-bottom:1.5rem}.lobby-panel{padding:16px}.lobby-panel h2{font-size:1rem}.hook-actions,.hook-edit-actions{flex-direction:column}.btn,.btn-share{max-width:100%}.room-code-input-container{flex-direction:column}.room-code-input-container .btn{width:100%}.character-field{flex-direction:column;gap:6px}.field-label{min-width:auto}.ready-checkbox{min-width:90px;justify-content:flex-end}}.room-code-display-panel{background:#60a5fa1a;border-color:#60a5fa4d}.room-code-display{display:flex;flex-direction:column;gap:16px;align-items:center}.room-code-value{font-size:2.5rem;font-weight:700;font-family:Courier New,monospace;letter-spacing:.5em;padding:20px 30px;background:#0006;border:2px solid rgba(96,165,250,.5);border-radius:12px;color:var(--color-brass, #d4af37);text-shadow:0 0 10px rgba(212,175,55,.3);-webkit-user-select:all;user-select:all;cursor:text}.room-code-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.room-code-hint{font-size:.9rem;color:#fff9;text-align:center;margin:0}.room-code-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem 0}.room-code-loading .spinner{width:48px;height:48px;border:4px solid rgba(96,165,250,.2);border-top-color:#60a5fa;border-radius:50%;animation:spin 1s linear infinite}.room-code-loading p{margin:.25rem 0;color:#fffc;font-size:1rem}.room-code-loading .room-code-hint{font-size:.875rem;opacity:.7;margin-top:.5rem}@media(max-width:768px){.room-code-value{font-size:1.8rem;padding:15px 20px;letter-spacing:.3em}.room-code-actions{width:100%}.room-code-actions .btn{flex:1;min-width:140px}}.lobby-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#1a202c,#2d3748)}.lobby-content{max-width:600px;width:100%}.lobby-title{font-size:3rem;font-weight:700;text-align:center;margin-bottom:.5rem;color:var(--color-brass, #d4af37);text-shadow:2px 2px 4px rgba(0,0,0,.3)}.lobby-subtitle{text-align:center;font-size:1.1rem;color:#fffc;margin-bottom:3rem;font-style:italic}.lobby-buttons{display:flex;flex-direction:column;gap:15px}.game-btn{display:flex;align-items:center;gap:20px;padding:20px 24px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.game-btn:hover{background:#ffffff1a;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 8px 20px #0000004d}.game-btn:active{transform:translateY(0)}.game-btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.game-btn-primary:hover{background:linear-gradient(135deg,#7c8ff0,#8a5cb5);box-shadow:0 8px 25px #667eea66}.game-btn-icon{font-size:2rem;flex-shrink:0}.game-btn-text{display:flex;flex-direction:column;gap:4px;flex:1}.game-btn-label{font-size:1.2rem;font-weight:600}.game-btn-subtitle{font-size:.9rem;color:#ffffffb3;font-weight:400}.section-divider{margin:10px 0;text-align:center;position:relative}.section-divider:before,.section-divider:after{content:"";position:absolute;top:50%;width:calc(50% - 80px);height:1px;background:#fff3}.section-divider:before{left:0}.section-divider:after{right:0}.section-divider span{padding:0 20px;color:#ffffff80;font-size:.9rem;font-weight:500;text-transform:uppercase;letter-spacing:1px}.lobby-footer{margin-top:3rem;text-align:center;font-size:.85rem;color:#fff6}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#2d3748;border-radius:12px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.modal-header h2{margin:0;color:#fff;font-size:1.5rem}.modal-close{background:none;border:none;color:#fff9;font-size:2rem;cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.modal-close:hover{background:#ffffff1a;color:#fff}.modal-body{padding:24px}.saved-games-list{display:flex;flex-direction:column;gap:12px}.saved-game-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.saved-game-item:hover{background:#ffffff1a;border-color:#ffffff4d;transform:translate(4px)}.saved-game-info{display:flex;flex-direction:column;gap:6px;flex:1}.saved-game-name{font-size:1.1rem;font-weight:600}.saved-game-meta{display:flex;gap:12px;font-size:.9rem;color:#fff9}.saved-game-theme{padding:2px 8px;background:#667eea4d;border-radius:4px;font-size:.85rem}.saved-game-date{font-variant-numeric:tabular-nums}.saved-game-arrow{font-size:1.5rem;color:#fff6;transition:transform .3s ease}.saved-game-item:hover .saved-game-arrow{transform:translate(4px);color:#fffc}@media(max-width:640px){.lobby-title{font-size:2.5rem}.lobby-subtitle{font-size:1rem}.game-btn{padding:16px 20px;gap:15px}.game-btn-icon{font-size:1.75rem}.game-btn-label{font-size:1.1rem}.game-btn-subtitle{font-size:.85rem}.section-divider:before,.section-divider:after{width:calc(50% - 60px)}}.game-log{background:#0000004d;border-radius:6px;padding:var(--space-md, 16px);max-height:400px;overflow-y:auto;margin-bottom:var(--space-lg, 24px);border-left:3px solid var(--color-brass-dim, #a08850);font-size:.95rem;font-family:var(--font-ui, sans-serif)}.game-log::-webkit-scrollbar{width:8px}.game-log::-webkit-scrollbar-track{background:#0003;border-radius:4px}.game-log::-webkit-scrollbar-thumb{background:#4a546780;border-radius:4px}.game-log::-webkit-scrollbar-thumb:hover{background:#4a5467b3}.log-empty{text-align:center;color:var(--color-slate-light, #5f6a7f);font-style:italic;padding:var(--space-lg, 24px)}.log-entry{display:flex;align-items:flex-start;gap:var(--space-md, 16px);padding:var(--space-md, 16px);margin-bottom:var(--space-sm, 8px);border-radius:4px;background:#25253080;line-height:1.6;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.log-entry-narrative{background:#8b5cb61f;border-left:2px solid rgba(167,139,250,.5);font-family:var(--font-narrative, Georgia, serif)}.log-entry-encounter{background:#a844481f;border-left:2px solid var(--color-crimson, #a84448);font-weight:500}.log-entry-card{background:#6b8e5f1f;border-left:2px solid var(--color-green, #6b8e5f)}.log-entry-system{background:#4a54671a;border-left:2px solid var(--color-slate, #4a5467);font-size:.85rem;color:var(--color-slate-light, #5f6a7f)}.log-entry-debug{background:#64646414;border-left:2px solid rgba(150,150,150,.4);font-size:.8rem;color:#969696e6;font-family:Courier New,Courier,monospace}.log-entry-spotlight-in-progress{background:#c9a96126;border-left:2px solid var(--color-brass-dim, #a08850)}.log-entry-card-selection{background:#6b8e5f1a;border-left:2px solid var(--color-green, #6b8e5f)}.log-entry-waiting-in-progress{background:#a088501f;border-left:2px solid var(--color-brass-dim, #a08850)}.log-entry-ai-loading{background:#8b5cb61f;border-left:2px solid rgba(139,92,182,.5)}.log-ai-progress-bar{width:100%;height:6px;background:#0000004d;border-radius:3px;overflow:hidden;margin-top:var(--space-sm, 8px)}.log-ai-progress-fill{height:100%;background:var(--color-brass-dim, #a08850);transition:width .3s ease}.log-entry-placeholder{background:#a0885026;border-left:2px solid var(--color-brass-dim, #a08850);font-style:italic;color:var(--color-off-white-dim, #d4d3cf);animation:gentle-pulse 2s ease-in-out infinite}@keyframes gentle-pulse{0%,to{opacity:.7}50%{opacity:1}}.log-entry-streaming{background:#c9a96126!important;border-left-color:var(--color-brass-dim, #a08850)!important;box-shadow:0 0 12px #c9a9614d;animation:streamPulse 2s ease-in-out infinite}@keyframes streamPulse{0%,to{box-shadow:0 0 12px #c9a9614d}50%{box-shadow:0 0 20px #c9a96180}}.streaming-cursor{display:inline-block;width:8px;height:16px;background:var(--color-brass, #c9a961);margin-left:2px;animation:blink 1s step-end infinite;vertical-align:text-bottom;border-radius:1px}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.log-entry-stream-complete{animation:streamComplete .5s ease-out forwards}@keyframes streamComplete{0%{box-shadow:0 0 20px #6b8e5f80}to{box-shadow:none}}.log-icon{font-size:1.2rem;flex-shrink:0;line-height:1}.log-text{flex:1;color:var(--color-off-white, #f5f4f0)}.log-rich{display:block;width:100%}.log-rich-title{font-weight:700;margin-bottom:8px;color:#cbd5e1}.log-rich-instruction{font-size:.85rem;color:#cbd5e1;margin-bottom:10px}.inline-reveal-btn{width:100%;margin-top:8px;min-height:44px;border-radius:8px}.inline-dismiss-waiting-btn[disabled]{opacity:.6}.inline-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.inline-play-card{min-height:122px;border:2px solid #667eea;border-radius:10px;padding:10px;background:linear-gradient(135deg,#3f4b5e,#253042);color:#e5e7eb;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px}.inline-play-card.is-selected{border-color:#3b82f6;box-shadow:0 0 16px #3b82f666}.inline-play-card.is-faded{opacity:.35}.inline-play-card[disabled]{opacity:.5}.inline-play-card-type{font-size:.68rem;text-transform:uppercase;color:#cbd5e1}.inline-play-card-name{font-size:.9rem;font-weight:700;color:#fde047}.inline-play-card-tags{font-size:.7rem;color:#9ca3af}.log-time{font-size:.75rem;color:#666;flex-shrink:0;align-self:flex-end}.log-entry-npc-dialogue{background:#3b82f614;border-left:3px solid #3b82f6;flex-direction:row;align-items:flex-start;padding:12px}.log-entry-npc-dialogue[data-alignment=right] .npc-dialogue-container{flex-direction:row-reverse}.log-entry-npc-dialogue[data-alignment=right] .npc-dialogue-content{align-items:flex-end}.log-entry-npc-dialogue[data-alignment=right] .npc-dialogue-bubble{background:#22c55e26;border-color:#22c55e}.npc-dialogue-container{display:flex;gap:12px;align-items:flex-start;flex:1}.npc-portrait{font-size:2.5rem;line-height:1;flex-shrink:0}.npc-dialogue-content{display:flex;flex-direction:column;gap:6px;max-width:80%}.npc-name{font-size:.75rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}.npc-dialogue-bubble{background:#3b82f626;border:2px solid rgba(59,130,246,.3);border-radius:12px;padding:12px 16px;color:#e0e0e0;line-height:1.5;box-shadow:0 2px 8px #0003}.log-entry-inn-choices{background:transparent;border-left:none;padding:8px 0}.inn-choices-container{display:flex;flex-direction:column;gap:10px;width:100%}.inn-choice-btn{min-height:50px;background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #8b5cf6;border-radius:10px;color:#fff;font-size:1rem;font-weight:600;padding:12px 20px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #667eea4d}.inn-choice-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66;background:linear-gradient(135deg,#7c8ef7,#8b5ab2)}.inn-choice-btn:active{transform:translateY(0);box-shadow:0 2px 8px #667eea4d}.log-entry-placeholder{background:#4a546714;border-left:2px solid rgba(107,142,95,.3);opacity:.7}.log-text-placeholder{color:var(--color-slate-light, #5f6a7f);font-style:italic}.loading-dots{display:inline-block;font-weight:700;animation:loadingDots 1.5s infinite}.loading-dots span{animation:loadingDotsFade 1.5s infinite}.loading-dots span:nth-child(1){animation-delay:0s}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loadingDotsFade{0%,60%,to{opacity:.3}30%{opacity:1}}.streaming-cursor{display:inline-block;width:2px;height:1em;margin-left:2px;background:var(--color-brass-dim, #a08850);animation:cursorBlink 1s infinite}@keyframes cursorBlink{0%,49%{opacity:1}50%,to{opacity:0}}@media(max-width:768px){.game-log{max-height:300px;font-size:.9rem;padding:12px}.log-entry{padding:8px;margin-bottom:6px}.log-icon{font-size:1rem}.log-time{display:none}}.card{background:var(--color-charcoal-light);border:1px solid var(--color-slate);border-radius:6px;padding:var(--space-md);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden;box-shadow:0 2px 4px #0003}.card:hover:not(.card-disabled){transform:translateY(-3px);box-shadow:0 6px 16px var(--color-shadow-warm);border-color:var(--color-brass-dim)}.card:active:not(.card-disabled){transform:translateY(-1px)}.card-disabled{opacity:.4;cursor:not-allowed;border-color:#4a54674d}.card-type-ability{border-color:#8b7fc6}.card-type-ability:hover:not(.card-disabled){border-color:#a89dd4}.card-type-item{border-color:#6b8e5f}.card-type-item:hover:not(.card-disabled){border-color:#7fa572}.card-type-badge{display:inline-block;background:#4a54674d;padding:3px 8px;border-radius:3px;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-sm);color:var(--color-off-white-dim);font-weight:500}.card-name{font-weight:600;font-size:.95rem;color:var(--color-brass);margin-bottom:var(--space-sm);line-height:1.3}.card-level{color:var(--color-green);font-size:.85rem;margin-left:4px}.card-description{font-size:.85rem;color:var(--color-off-white-dim);line-height:1.5}.card-tags{font-size:.7rem;color:var(--color-slate-light);margin-top:var(--space-sm);font-style:italic}.card-appeal-badge{position:absolute;top:8px;right:8px;font-size:1.1rem;cursor:help;z-index:1;opacity:.8}.card-synergy-badge{position:absolute;top:8px;left:8px;font-size:.7rem;background:var(--color-green);color:var(--color-charcoal);padding:4px 8px;border-radius:10px;font-weight:600;cursor:help;z-index:1;box-shadow:0 2px 6px #6b8e5f4d;letter-spacing:.03em}.card-selected{border-color:var(--color-brass);box-shadow:0 0 16px #c9a96166;transform:translateY(-2px)}.card-locked-in{animation:seal-lock .4s ease-out forwards;border-color:var(--color-brass)}@keyframes seal-lock{0%{transform:scale(1);opacity:1}30%{transform:scale(.95);opacity:.8}to{transform:scale(1);opacity:1;box-shadow:0 0 20px var(--color-spotlight-glow),0 4px 12px var(--color-shadow-warm)}}.card-committed{animation:slide-commit .3s ease-out}@keyframes slide-commit{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.sheet-card{border-radius:6px;border:1px solid rgba(148,163,184,.3);padding:8px;min-height:86px;background:#0f172a99;transition:all var(--transition-fast)}.sheet-card-face-up{border-color:#22c55e80}.sheet-card-face-up:hover{border-color:#22c55eb3;background:#0f172abf}.sheet-card-face-down{border-color:#64748b99;background:#1e293ba6}.sheet-card-name{color:#fde047;font-size:.82rem;font-weight:700;margin-bottom:4px}.sheet-card-type{color:#cbd5e1;text-transform:uppercase;font-size:.65rem;margin-bottom:4px}.sheet-card-tags{color:#94a3b8;font-size:.65rem}@media(max-width:768px){.card{padding:var(--space-sm)}.card-name{font-size:.9rem}.card-description{font-size:.8rem}.sheet-card{min-height:76px;padding:6px}.sheet-card-name{font-size:.75rem}}.cards-section{margin-bottom:var(--space-lg)}.cards-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.cards-header h2{color:var(--color-brass);font-family:var(--font-accent);font-size:1.1rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:.9rem}.cards-count{color:var(--color-off-white-dim);font-size:.85rem}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg);max-height:370px;overflow-x:auto;overflow-y:auto;padding:5px}.sheet-cards-grid{margin-top:var(--space-md);display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--space-sm)}.cards-empty{text-align:center;padding:var(--space-lg);color:var(--color-slate-light);font-style:italic}@media(max-width:768px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-sm);max-height:300px}.sheet-cards-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.cards-header h2{font-size:.85rem}.cards-count{font-size:.75rem}}.character-info{display:block;border:1px solid rgba(74,84,103,.3);border-radius:6px;padding:var(--space-md, 16px);background:#0003;position:relative}.character-info.has-spotlight{border:2px solid rgba(255,215,0,.6);box-shadow:0 0 20px #ffd70066;animation:spotlight-glow 2s ease-in-out infinite}@keyframes spotlight-glow{0%,to{box-shadow:0 0 20px #ffd70066}50%{box-shadow:0 0 30px #ffd700b3}}.character-readonly-indicator{background:#ffc10733;border:1px solid rgba(255,193,7,.5);border-radius:6px;padding:8px 12px;margin-bottom:15px;text-align:center;font-size:.85rem;color:#ffc107}.character-readonly-indicator-icon{margin-right:6px}.character-spotlight-badge{background:linear-gradient(135deg,#ffd70033,#ffa50033);border:1px solid rgba(255,215,0,.5);border-radius:6px;padding:8px 12px;margin-bottom:15px;text-align:center;font-size:.85rem;color:gold;font-weight:600}.character-fields{display:grid;gap:12px}.character-field{display:flex;flex-direction:column;gap:5px}.character-field-label{font-size:.85rem;color:#aaa;text-transform:uppercase;letter-spacing:.5px}.character-field-value{color:#e0e0e0;line-height:1.5}.character-field-name{font-size:1.3rem;font-weight:700;color:gold}.character-attachments{margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.character-attachments-label{font-size:.85rem;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.character-attachments-list{display:flex;flex-wrap:wrap;gap:8px}.attachment-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:.85rem;font-weight:500;cursor:help;transition:all .2s;min-height:44px}.attachment-icon{font-size:1.1rem}.attachment-name{flex:1}.attachment-modifier{font-weight:700;background:#0000004d;padding:2px 6px;border-radius:10px;font-size:.8rem}.attachment-success{background:#22c55e33;border:1px solid rgba(34,197,94,.5);color:#4ade80}.attachment-success:hover{background:#22c55e4d}.attachment-danger{background:#ef444433;border:1px solid rgba(239,68,68,.5);color:#f87171}.attachment-danger:hover{background:#ef44444d}.attachment-warning{background:#fbbf2433;border:1px solid rgba(251,191,36,.5);color:#fbbf24}.attachment-warning:hover{background:#fbbf244d}.attachment-info{background:#3b82f633;border:1px solid rgba(59,130,246,.5);color:#60a5fa}.attachment-info:hover{background:#3b82f64d}.character-hand-info{margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.character-hand-header{font-size:.9rem;color:gold;margin-bottom:8px;font-weight:600}.character-hand-empty{color:#94a3b8;font-size:.8rem;padding:var(--space-md, 16px);text-align:center}.sheet-cards-grid{margin-top:var(--space-md, 16px);display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--space-sm, 8px)}@media(max-width:640px){.character-info{padding:12px}.character-field-name{font-size:1.1rem}.sheet-cards-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.attachment-chip{font-size:.75rem;padding:5px 10px}}.debug-panel{position:fixed;bottom:20px;right:20px;background:#000000e6;border:2px solid #0f0;border-radius:8px;font-family:Courier New,monospace;font-size:12px;color:#0f0;z-index:10000;min-width:280px;box-shadow:0 4px 12px #00ff004d}.debug-panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#00ff001a;border-bottom:1px solid #0f0;cursor:move;-webkit-user-select:none;user-select:none}.debug-panel-title{font-weight:700;text-transform:uppercase;letter-spacing:1px}.debug-panel-toggle{background:none;border:1px solid #0f0;color:#0f0;width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}.debug-panel-toggle:hover{background:#0f03}.debug-panel-toggle:active{background:#00ff004d}.debug-panel-content{padding:12px;max-height:400px;overflow-y:auto}.debug-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(0,255,0,.2)}.debug-row:last-child{border-bottom:none}.debug-label{color:#0a0;margin-right:12px;font-weight:700}.debug-value{color:#0f0;text-align:right;word-break:break-all;max-width:150px}@media(max-width:768px){.debug-panel{bottom:10px;right:10px;left:auto;min-width:240px;font-size:11px}.debug-panel-header{padding:6px 10px}.debug-panel-content{padding:10px;max-height:300px}.debug-row{padding:4px 0}.debug-label{font-size:10px}.debug-value{font-size:10px;max-width:120px}}@media(max-width:480px){.debug-panel{bottom:80px;right:5px;min-width:200px;font-size:10px}.debug-value{max-width:100px}}@supports (padding: env(safe-area-inset-bottom)){.debug-panel{bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right))}@media(max-width:480px){.debug-panel{bottom:calc(80px + env(safe-area-inset-bottom));right:calc(5px + env(safe-area-inset-right))}}}.context-inspector{position:fixed;background:#1e1e28fa;border:2px solid rgba(100,120,200,.4);box-shadow:0 8px 32px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;display:none;flex-direction:column;max-height:90vh;overflow:hidden;bottom:0;left:0;right:0;width:100%;max-width:100vw;border-radius:12px 12px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.context-inspector-inline{position:static!important;display:flex!important;width:100%!important;max-width:none!important;max-height:none!important;overflow:visible!important;transform:none!important;border-radius:12px!important;inset:auto!important}.context-inspector-inline .close-btn{display:none}.context-inspector.open{display:flex;transform:translateY(0)}@media(min-width:768px){.context-inspector{inset:20px 20px 20px auto;width:380px;max-width:400px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;transform:translate(120%)}.context-inspector.open{transform:translate(0)}}.context-inspector .panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(100,120,200,.3);background:#14141e99}.context-inspector .panel-header h3{margin:0;font-size:1.4em;color:#e0e0ff;text-shadow:0 0 10px rgba(100,120,200,.5)}.context-inspector .close-btn{background:#c8505033;border:1px solid rgba(200,80,80,.4);color:#f99;font-size:1.8em;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:all .2s}.context-inspector .close-btn:hover{background:#c8505066;transform:scale(1.1)}.context-inspector .panel-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.context-inspector .context-tabs{display:flex;gap:4px;padding:12px;background:#14141e66;border-bottom:1px solid rgba(100,120,200,.2);overflow-x:auto}.context-inspector .tab{flex:1;min-width:70px;padding:10px 8px;background:#28283c80;border:1px solid rgba(80,100,180,.3);border-radius:8px;color:#b0b0d0;cursor:pointer;font-size:.9em;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px}.context-inspector .tab:hover{background:#3c3c6499;border-color:#6478c880}.context-inspector .tab.active{background:#5064b466;border-color:#788cdc99;color:#e0e0ff;box-shadow:0 0 15px #6478c84d}.context-inspector .tab-label{font-size:.85em}.context-inspector .context-list{flex:1;overflow-y:auto;padding:16px;gap:12px;display:flex;flex-direction:column}.context-inspector .context-list::-webkit-scrollbar{width:8px}.context-inspector .context-list::-webkit-scrollbar-track{background:#14141e4d;border-radius:4px}.context-inspector .context-list::-webkit-scrollbar-thumb{background:#6478c866;border-radius:4px}.context-inspector .context-list::-webkit-scrollbar-thumb:hover{background:#788cdc99}.context-item{background:#28283c99;border:1px solid rgba(80,100,180,.3);border-radius:10px;padding:14px;transition:all .2s;animation:slideIn .2s ease-out}.context-item:hover{background:#323250b3;border-color:#6478c880;box-shadow:0 4px 12px #6478c833}.context-item.visited{border-left:3px solid rgba(100,200,120,.6)}.context-item.unvisited{border-left:3px solid rgba(180,180,200,.4)}.context-item .item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}.context-item h4{margin:0;font-size:1.1em;color:#e0e0ff;flex:1}.context-item .item-badge{background:#6478c84d;border:1px solid rgba(120,140,220,.4);padding:4px 10px;border-radius:12px;font-size:.75em;color:#c0c0e0;text-transform:capitalize;white-space:nowrap}.context-item .item-badge.owned{background:#64c8784d;border-color:#78dc8c66;color:#d0ffd0}.context-item .item-description{margin:8px 0;color:#b0b0d0;font-size:.9em;line-height:1.4}.context-item .item-meta{display:block;margin-top:8px;color:#8080a0;font-size:.8em}.relationship-container{margin:10px 0}.relationship-bar{height:16px;background:#3c3c5080;border:1px solid rgba(80,100,180,.3);border-radius:8px;overflow:hidden;margin-bottom:6px}.relationship-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:7px}.relationship-label{display:block;text-align:center;font-size:.85em;color:#c0c0e0;font-weight:500}.context-item.quest-active{border-left-color:#6496fa99}.context-item.quest-complete{border-left-color:#64c87899;opacity:.8}.context-item.quest-failed{border-left-color:#c8646499;opacity:.7}.objectives-list{list-style:none;padding:0;margin:10px 0}.objectives-list li{padding:6px 0;color:#b0b0d0;font-size:.9em}.objectives-list li.complete{color:#90d090;text-decoration:line-through}.objectives-list li.incomplete{color:#c0c0e0}.empty-state{text-align:center;padding:40px 20px;color:#8080a0}.empty-state p{font-size:1.1em;margin-bottom:8px}.empty-state small{font-size:.9em;color:#707090}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@media(max-width:767px){.context-inspector{max-height:70vh}.context-inspector .tab-label{display:none}.context-inspector .tab{min-width:50px;padding:12px 8px;font-size:1.2em}}@media(hover:none){.context-inspector .tab{padding:14px 10px;min-height:44px}.context-inspector .close-btn{width:44px;height:44px}}.settings-tab{padding:20px;overflow-y:auto;max-height:100%}.dev-mode-banner{background:#eab30833;border:2px solid rgba(234,179,8,.5);border-radius:8px;padding:12px;margin-bottom:20px;text-align:center;font-weight:600;color:#eab308}.settings-section{background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:16px;margin-bottom:16px}.settings-section h3{margin:0 0 16px;font-size:1.1rem;font-weight:600;color:var(--color-brass, #d4af37)}.settings-controls{display:flex;flex-direction:column;gap:8px}.settings-controls .btn{width:100%;padding:12px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.95rem;cursor:pointer;transition:all .2s ease;text-align:left}.settings-controls .btn:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px)}.settings-controls .btn:active:not(:disabled){transform:translateY(0)}.settings-controls .btn:disabled{opacity:.4;cursor:not-allowed}.settings-controls .btn-primary{background:#60a5fa4d;border-color:#60a5fa80}.settings-controls .btn-primary:hover:not(:disabled){background:#60a5fa66;border-color:#60a5fa99}.model-selector{display:flex;flex-direction:column}.settings-select{padding:10px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:.95rem;cursor:pointer;transition:all .2s ease}.settings-select:hover{border-color:#ffffff4d;background:#0006}.settings-select:focus{outline:none;border-color:#60a5fa99;box-shadow:0 0 0 3px #60a5fa1a}.settings-toggles{display:flex;flex-direction:column;gap:12px}.settings-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.settings-toggle input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:rgba(96,165,250,1)}.settings-toggle span{font-size:.95rem;color:#ffffffe6}.settings-sliders{display:flex;flex-direction:column;gap:20px}.settings-slider{display:flex;flex-direction:column;gap:8px}.slider-label{font-size:.9rem;color:#fffc;font-weight:500}.settings-slider input[type=range]{width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none}.settings-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#60a5fa;border-radius:50%;cursor:pointer;transition:all .2s ease}.settings-slider input[type=range]::-webkit-slider-thumb:hover{background:#60a5facc;transform:scale(1.1)}.settings-slider input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#60a5fa;border-radius:50%;border:none;cursor:pointer;transition:all .2s ease}.settings-slider input[type=range]::-moz-range-thumb:hover{background:#60a5facc;transform:scale(1.1)}.slider-value{font-size:.9rem;color:#60a5fa;font-weight:600;text-align:right}@media(max-width:640px){.settings-tab{padding:16px}.settings-section{padding:12px}.settings-section h3{font-size:1rem}}.adventure-description{background:var(--surface-color, #1e293b);border:2px solid var(--border-color, #334155);border-radius:12px;padding:1.5rem;margin:1rem 0;box-shadow:0 2px 8px #0003;transition:all .3s ease}.adventure-description:hover{border-color:var(--primary-color, #60a5fa);box-shadow:0 4px 12px #60a5fa33}.adventure-description.empty{border-style:dashed;opacity:.7}.adventure-placeholder{text-align:center;color:var(--text-muted, #94a3b8);font-style:italic;margin:0;padding:1rem}.adventure-display-mode{position:relative}.adventure-text{color:var(--text-color, #e2e8f0);font-size:1rem;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.adventure-edit-button{position:absolute;top:-.5rem;right:-.5rem;background:var(--primary-color, #60a5fa);color:#fff;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.85rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0003;opacity:0}.adventure-description:hover .adventure-edit-button{opacity:1}.adventure-edit-button:hover{background:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.adventure-edit-button:active{transform:translateY(0)}.adventure-edit-mode{display:flex;flex-direction:column;gap:1rem}.adventure-textarea{width:100%;min-height:150px;padding:1rem;background:#0f172acc;border:2px solid var(--border-color, #334155);border-radius:8px;color:var(--text-color, #e2e8f0);font-size:1rem;line-height:1.6;font-family:inherit;resize:vertical;transition:border-color .2s ease}.adventure-textarea:focus{outline:none;border-color:var(--primary-color, #60a5fa);box-shadow:0 0 0 3px #60a5fa33}.adventure-edit-actions{display:flex;gap:.75rem;justify-content:flex-end}.adventure-btn{padding:.6rem 1.25rem;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.adventure-btn-save{background:var(--success-color, #10b981);color:#fff}.adventure-btn-save:hover{background:#059669;transform:translateY(-2px);box-shadow:0 4px 8px #10b9814d}.adventure-btn-cancel{background:var(--danger-color, #ef4444);color:#fff}.adventure-btn-cancel:hover{background:#dc2626;transform:translateY(-2px);box-shadow:0 4px 8px #ef44444d}.adventure-btn:active{transform:translateY(0)}@media(max-width:768px){.adventure-description{padding:1rem;margin:.75rem 0}.adventure-text{font-size:.95rem}.adventure-edit-button{position:static;opacity:1;margin-top:.75rem;width:100%}.adventure-textarea{min-height:120px;font-size:.95rem}.adventure-edit-actions{flex-direction:column}.adventure-btn{width:100%}}:root{--surface-color: #1e293b;--border-color: #334155;--primary-color: #60a5fa;--text-color: #e2e8f0;--text-muted: #94a3b8;--success-color: #10b981;--danger-color: #ef4444}.spotlight-indicator{background:#1e293bf2;border:2px solid var(--border-color, #334155);border-radius:12px;padding:1rem 1.5rem;margin:1rem 0;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease}.spotlight-indicator.has-spotlight{border-color:var(--highlight-color, #fbbf24);background:linear-gradient(135deg,#fbbf2433,#f59e0b1a);box-shadow:0 4px 20px #fbbf2466,0 0 30px #fbbf2433;animation:pulseGlow 2s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 4px 20px #fbbf2466,0 0 30px #fbbf2433}50%{box-shadow:0 4px 24px #fbbf2499,0 0 40px #fbbf244d}}.spotlight-indicator.other-player{border-color:var(--primary-color, #60a5fa);background:#1e293be6}.spotlight-content{display:flex;align-items:center;gap:1rem}.spotlight-icon{font-size:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.spotlight-indicator.has-spotlight .spotlight-icon{animation:iconPulse 2s ease-in-out infinite}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.spotlight-info{flex:1;display:flex;flex-direction:column;gap:.25rem}.spotlight-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted, #94a3b8)}.spotlight-indicator.has-spotlight .spotlight-label{color:var(--highlight-color, #fbbf24);font-weight:700}.spotlight-name{font-size:1.1rem;font-weight:700;color:var(--text-color, #e2e8f0)}.spotlight-indicator.has-spotlight .spotlight-name{color:var(--highlight-color, #fbbf24)}.spotlight-badge{font-size:1.5rem;animation:badgeBounce 1s ease-in-out infinite}@keyframes badgeBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media(max-width:768px){.spotlight-indicator{padding:.75rem 1rem;margin:.75rem 0}.spotlight-icon{font-size:1.5rem}.spotlight-label{font-size:.7rem}.spotlight-name{font-size:1rem}.spotlight-badge{font-size:1.2rem}}@media(prefers-reduced-motion:reduce){.spotlight-indicator.has-spotlight,.spotlight-indicator.has-spotlight .spotlight-icon,.spotlight-badge{animation:none}}:root{--highlight-color: #fbbf24;--border-color: #334155;--primary-color: #60a5fa;--text-color: #e2e8f0;--text-muted: #94a3b8}.players-tab{padding:20px;overflow-y:auto;max-height:100%}.adventure-panel{background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:16px;margin-bottom:20px}.adventure-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.adventure-title{font-size:1.1rem;font-weight:600;color:var(--color-brass, #d4af37)}.adventure-edit-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:6px 12px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s ease}.adventure-edit-btn:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px)}.adventure-description{color:#ffffffe6;line-height:1.6;font-size:.95rem}.spotlight-status-container{margin-bottom:20px}.character-section-title{font-size:1rem;font-weight:600;color:#fffc;margin:0 0 12px;padding-left:4px}.character-sheet-container{margin-bottom:16px}.remote-characters-container{margin-top:24px}.empty-state{text-align:center;padding:40px 20px;color:#fff9}.empty-state p{margin:0;font-style:italic}@media(max-width:640px){.players-tab{padding:16px}.adventure-panel{padding:12px}.adventure-header{flex-direction:column;align-items:flex-start;gap:8px}.adventure-edit-btn{align-self:flex-end}}.room-code-modal-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem;animation:fadeIn .2s ease-out}.room-code-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #0f3460;border-radius:16px;max-width:500px;width:100%;box-shadow:0 20px 60px #0006;animation:slideUp .3s ease-out;overflow:hidden}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.room-code-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #444;background:#0f34604d}.room-code-header h2{margin:0;font-size:1.5rem;color:#e94560}.room-code-close{background:none;border:none;color:#aaa;font-size:2rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.room-code-close:hover{background:#e945601a;color:#e94560}.room-code-body{padding:2rem 1.5rem}.room-code-instructions{margin:0 0 1.5rem;color:#ccc;font-size:.95rem;text-align:center}.room-code-create{text-align:center}.room-code-display{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.room-code-value{flex:1;background:#0f3460;color:#fff;font-size:2.5rem;font-weight:700;letter-spacing:.2em;text-align:center;padding:1rem;border-radius:8px;font-family:Courier New,monospace;border:2px solid #1a5490}.room-code-copy{background:#e94560;border:none;color:#fff;font-size:1.5rem;width:48px;height:48px;border-radius:8px;cursor:pointer;transition:all .2s;flex-shrink:0}.room-code-copy:hover{background:#ff6b6b;transform:scale(1.05)}.room-code-copy:active{transform:scale(.95)}.room-code-status{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;background:#0f34604d;border-radius:8px;margin-bottom:1.5rem;color:#aaa;font-size:.9rem}.room-code-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;margin-bottom:1.5rem}.room-code-loading p{margin:0;color:#aaa;font-size:.9rem}.room-code-spinner{width:16px;height:16px;border:2px solid rgba(233,69,96,.3);border-top-color:#e94560;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.room-code-join{text-align:center}.room-code-input-wrapper{margin-bottom:.75rem}.room-code-input{width:100%;background:#0f3460;border:2px solid #1a5490;color:#fff;font-size:2.5rem;font-weight:700;letter-spacing:.2em;text-align:center;padding:1rem;border-radius:8px;font-family:Courier New,monospace;transition:border-color .2s}.room-code-input:focus{outline:none;border-color:#e94560}.room-code-input::placeholder{color:#555;letter-spacing:.1em}.room-code-hint{margin:0 0 1.5rem;color:#888;font-size:.85rem}.room-code-btn{width:100%;padding:1rem 1.5rem;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}.room-code-btn-primary{background:linear-gradient(135deg,#e94560,#d63447);color:#fff;box-shadow:0 4px 12px #e945604d}.room-code-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #e9456066}.room-code-btn-primary:active:not(:disabled){transform:translateY(0)}.room-code-btn-secondary{background:#444;color:#fff}.room-code-btn-secondary:hover{background:#555}.room-code-btn:disabled{opacity:.5;cursor:not-allowed}.room-code-footer{padding:1rem 1.5rem;border-top:1px solid #0f3460;background:#0f346033}.room-code-fallback{width:100%;padding:.75rem;background:transparent;border:1px solid #0f3460;color:#aaa;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .2s}.room-code-fallback:hover{background:#0f34604d;border-color:#1a5490;color:#fff}.room-code-inline{width:100%;padding:1rem}.room-code-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #0f3460;border-radius:12px;padding:2rem;box-shadow:0 4px 12px #0000004d}.room-code-card h3{margin:0 0 1.5rem;color:#e94560;font-size:1.5rem;text-align:center}.room-code-fallback-inline{margin-top:1rem;width:100%}@media(max-width:768px){.room-code-card{padding:1.5rem}.room-code-card h3{font-size:1.25rem}}@media(max-width:600px){.room-code-modal{max-width:100%;margin:0;border-radius:0}.room-code-value,.room-code-input{font-size:2rem}.room-code-header h2{font-size:1.25rem}}.connection-status{position:fixed;top:1rem;left:1rem;z-index:1000;background:#1e293bf2;border:2px solid var(--border-color, #334155);border-radius:8px;padding:.75rem 1rem;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease}.connection-status.status-connected{border-color:var(--success-color, #10b981)}.connection-status.status-connecting{border-color:var(--warning-color, #fbbf24)}.connection-status.status-disconnected{border-color:var(--danger-color, #ef4444)}.connection-indicator{display:flex;align-items:center;gap:.75rem}.connection-icon{font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.connection-info{display:flex;flex-direction:column;gap:.15rem}.connection-text{font-size:.9rem;font-weight:600;color:var(--text-color, #e2e8f0)}.connection-role{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted, #94a3b8)}.connection-players{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.1)}.players-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted, #94a3b8);margin-bottom:.35rem}.players-list{display:flex;flex-direction:column;gap:.25rem}.player-name{font-size:.85rem;color:var(--text-color, #e2e8f0);padding:.25rem .5rem;background:#60a5fa1a;border-radius:4px;border-left:3px solid var(--primary-color, #60a5fa)}.connection-status.status-connecting .connection-icon{animation:pulse 1.5s ease-in-out infinite}@media(max-width:768px){.connection-status{top:.5rem;left:.5rem;padding:.6rem .8rem}.connection-icon{font-size:1rem}.connection-text{font-size:.85rem}.connection-role,.players-label{font-size:.7rem}.player-name{font-size:.8rem}}@media(prefers-reduced-motion:reduce){.connection-status.status-connecting .connection-icon{animation:none}}:root{--success-color: #10b981;--warning-color: #fbbf24;--danger-color: #ef4444;--primary-color: #60a5fa;--border-color: #334155;--text-color: #e2e8f0;--text-muted: #94a3b8}.join-gate-indicator{background:linear-gradient(135deg,#1e1e1ef2,#141414f2);border:1px solid rgba(100,100,100,.3);border-radius:12px;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.join-gate-indicator.readonly{padding:.75rem 1rem}.gate-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.gate-header h3{font-size:1rem;font-weight:600;color:var(--text-primary, #e0e0e0);margin:0}.waiting-badge{background:#ef444433;color:#ef4444;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;border:1px solid rgba(239,68,68,.3);animation:pulse 2s ease-in-out infinite}.gate-status-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.gate-status{display:flex;align-items:center;gap:.5rem}.gate-icon{font-size:1.25rem;transition:all .3s ease}.gate-icon.open{filter:drop-shadow(0 0 4px rgba(34,197,94,.5))}.gate-icon.closed{filter:drop-shadow(0 0 4px rgba(239,68,68,.5))}.gate-label{font-size:.95rem;font-weight:500;color:var(--text-primary, #e0e0e0)}.gate-toggle-btn{padding:.5rem 1rem;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.gate-toggle-btn.open{background:#22c55e33;color:#22c55e;border:1px solid rgba(34,197,94,.5)}.gate-toggle-btn.open:hover{background:#22c55e4d;transform:translateY(-1px)}.gate-toggle-btn.close{background:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.5)}.gate-toggle-btn.close:hover{background:#ef44444d;transform:translateY(-1px)}.auto-manage-row{display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem;border-top:1px solid rgba(100,100,100,.2)}.auto-manage-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.auto-manage-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent-color, #7c3aed)}.toggle-label{font-size:.875rem;color:var(--text-primary, #e0e0e0)}.auto-hint{font-size:.75rem;color:var(--text-secondary, #888);font-style:italic;margin-left:1.5rem}.waiting-message{margin-top:.75rem;padding:.75rem;background:#7c3aed1a;border:1px solid rgba(124,58,237,.3);border-radius:8px;font-size:.875rem;color:var(--text-secondary, #b0b0b0)}@media(max-width:768px){.gate-status-row{flex-direction:column;align-items:stretch}.gate-toggle-btn{width:100%}.auto-hint{margin-left:0}}.multiplayer-tab{padding:20px;overflow-y:auto;max-height:100%}.multiplayer-header{margin-bottom:24px}.multiplayer-header h2{font-size:1.5rem;font-weight:600;color:var(--color-brass, #d4af37);margin:0 0 8px}.multiplayer-subtitle{color:#ffffffb3;margin:0;font-size:.95rem}.connection-status-container,.qr-multiplayer-container,.room-code-container{margin-bottom:20px}.multiplayer-instructions{background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:20px}.instruction-section{margin-bottom:24px}.instruction-section:last-of-type{margin-bottom:20px}.instruction-section h3{font-size:1.1rem;font-weight:600;color:#60a5fa;margin:0 0 12px}.instruction-section ol{margin:0;padding-left:24px;color:#ffffffe6}.instruction-section li{margin-bottom:8px;line-height:1.5}.feature-notes{background:#60a5fa1a;border:1px solid rgba(96,165,250,.3);border-radius:6px;padding:16px}.feature-notes h4{font-size:1rem;font-weight:600;color:#60a5fa;margin:0 0 10px}.feature-notes ul{margin:0;padding-left:24px;color:#ffffffe6}.feature-notes li{margin-bottom:6px}@media(max-width:640px){.multiplayer-tab,.multiplayer-instructions{padding:16px}.instruction-section h3{font-size:1rem}}.spotlight-narrative-panel{position:fixed;inset:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;flex-direction:column;padding:2rem;z-index:1000;animation:fadeIn .3s ease-in}.spotlight-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.spotlight-badge{font-size:1.2rem;font-weight:700;padding:.5rem 1rem;background:#fff3;border-radius:20px}.player-name{font-size:1.1rem;opacity:.9}.spotlight-body{flex:1;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:1rem}.narrative-text{font-size:1.5rem;line-height:1.8;max-width:800px;text-align:center;white-space:pre-wrap}.spotlight-footer{margin-top:2rem;text-align:center}.spotlight-continue-btn{font-size:1.2rem;padding:1rem 2rem;background:#ffffffe6;color:#764ba2;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s ease;min-width:200px}.spotlight-continue-btn:hover{background:#fff;transform:scale(1.05)}.spotlight-continue-btn:active{transform:scale(.98)}@media(max-width:768px){.spotlight-narrative-panel{padding:1.5rem}.narrative-text{font-size:1.2rem;line-height:1.6}.spotlight-badge{font-size:1rem;padding:.4rem .8rem}.player-name{font-size:1rem}.spotlight-continue-btn{font-size:1rem;padding:.8rem 1.5rem;min-width:150px}}.waiting-spotlight-view{position:fixed;inset:0;background:#1a1a2e;color:#e0e0e0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;z-index:900}.waiting-message{text-align:center;animation:pulse 2s ease-in-out infinite}.spotlight-icon{font-size:4rem;margin-bottom:1rem}.waiting-message h2{font-size:2rem;margin-bottom:.5rem;font-weight:600}.waiting-hint{font-size:1rem;opacity:.7;margin-top:.5rem}.local-choices-overlay{margin-top:3rem;max-width:90%;opacity:.8;width:100%;max-width:1000px}.choices-hint{background:#ffffff1a;padding:1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem;text-align:center}@media(max-width:768px){.waiting-spotlight-view{padding:1.5rem}.spotlight-icon{font-size:3rem}.waiting-message h2{font-size:1.5rem}.waiting-hint{font-size:.9rem}.local-choices-overlay{margin-top:2rem;max-width:95%}.choices-hint{font-size:.8rem;padding:.8rem}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.ready-button{font-size:1.2rem;padding:1rem 2rem;border:2px solid currentColor;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s ease;min-width:150px;text-align:center;background:transparent}.ready-button.not-ready{color:#667eea;background:#fff;border-color:#667eea}.ready-button.not-ready:hover{background:#667eea;color:#fff;transform:scale(1.05)}.ready-button.ready{color:#22c55e;background:#22c55e1a;border-color:#22c55e;cursor:not-allowed}.ready-button:disabled{opacity:.8;cursor:not-allowed}.ready-button:active:not(:disabled){transform:scale(.98)}@media(max-width:768px){.ready-button{font-size:1rem;padding:.8rem 1.5rem;min-width:120px}}.choice-panel{background:var(--surface-color, #1e293b);border-radius:12px;padding:1.5rem;margin:1rem 0;box-shadow:0 4px 6px #0000004d;animation:slideInUp .3s ease-out}.choice-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--border-color, #334155)}.choice-panel-header h3{margin:0;color:var(--primary-color, #60a5fa);font-size:1.25rem;font-weight:600}.choice-waiting-indicator{color:var(--warning-color, #fbbf24);font-size:.9rem;font-style:italic}.choices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}.choice-card{background:linear-gradient(135deg,#334155,#1e293b);border:2px solid var(--border-color, #475569);border-radius:8px;padding:1.25rem;cursor:pointer;transition:all .2s ease;text-align:center;color:var(--text-color, #e2e8f0);font-family:inherit;width:100%;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.choice-card:hover:not(:disabled){transform:translateY(-4px);border-color:var(--primary-color, #60a5fa);box-shadow:0 8px 16px #60a5fa4d;background:linear-gradient(135deg,#3b4f6b,#2a3f5f)}.choice-card:active:not(:disabled){transform:translateY(-2px)}.choice-card.choice-disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}.choice-card.choice-disabled:hover{transform:none;border-color:var(--border-color, #475569);box-shadow:none}.choice-icon{font-size:2.5rem;margin-bottom:.5rem;line-height:1}.choice-title{font-weight:700;font-size:1.1rem;color:var(--primary-color, #60a5fa);margin-bottom:.5rem}.choice-description{font-size:.9rem;color:var(--text-secondary, #cbd5e1);margin-bottom:.5rem;line-height:1.4}.choice-preview{font-size:.85rem;font-style:italic;color:var(--text-muted, #94a3b8);line-height:1.3}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.choice-panel{padding:1rem;margin:.75rem 0}.choice-panel-header{flex-direction:column;align-items:flex-start;gap:.5rem}.choices-grid{grid-template-columns:1fr;gap:.75rem}.choice-card{min-height:150px;padding:1rem}.choice-icon{font-size:2rem}.choice-title{font-size:1rem}.choice-description{font-size:.85rem}.choice-preview{font-size:.8rem}}@media(prefers-color-scheme:dark){.choice-panel{--surface-color: #1e293b;--border-color: #334155;--primary-color: #60a5fa;--text-color: #e2e8f0;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--warning-color: #fbbf24}}.spotlight-play-view{width:100%;height:100%;position:relative}.spotlight-play-view.pre-ready-state{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem;gap:2rem}.ready-section{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;background:#ffffff0d;border-radius:12px;min-width:300px}.ready-section h2{font-size:1.5rem;margin:0;color:var(--text-primary, #e0e0e0)}.waiting-for-players{font-size:.9rem;color:var(--text-secondary, #a0a0a0);margin:0;animation:pulse 1.5s ease-in-out infinite}.pre-ready-content{width:100%;max-width:1200px}.spotlight-play-view.my-turn{padding:1rem}@media(max-width:768px){.spotlight-play-view.pre-ready-state{padding:1rem;gap:1.5rem}.ready-section{padding:1.5rem;min-width:250px}.ready-section h2{font-size:1.2rem}.spotlight-play-view.my-turn{padding:.5rem}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.game-layout{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#1a202c,#2d3748);color:#fff;overflow:hidden}.game-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.game-header-left{display:flex;align-items:center;gap:16px}.game-title{font-size:1.5rem;font-weight:700;margin:0;color:var(--color-brass, #d4af37)}.character-name-badge{padding:6px 12px;background:#667eea4d;border-radius:6px;font-size:.9rem;font-weight:500}.game-header-right{display:flex;gap:8px}.icon-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.2rem;width:40px;height:40px;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:#fff3;transform:translateY(-2px)}.icon-btn:active{transform:translateY(0)}.tab-nav{display:flex;background:#0003;border-bottom:1px solid rgba(255,255,255,.1);padding:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden}.tab-nav-btn{flex:1;min-width:100px;padding:12px 16px;background:transparent;border:none;border-bottom:3px solid transparent;color:#fff9;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.tab-nav-btn:hover{background:#ffffff0d;color:#ffffffe6}.tab-nav-btn.active{color:var(--color-brass, #d4af37);border-bottom-color:var(--color-brass, #d4af37);background:#d4af371a}.game-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.tab-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.tab-panel{flex:1;overflow-y:auto;overflow-x:hidden}.card-hand-panel{flex-shrink:0;padding:16px;background:#0000004d;border-top:1px solid rgba(255,255,255,.1);max-height:200px;overflow-y:auto}.no-cards-message{text-align:center;padding:40px;color:#fff6;font-style:italic}.debug-panel-container{position:fixed;bottom:20px;right:20px;z-index:100}@media(max-width:1024px){.tab-nav{overflow-x:auto}.tab-nav-btn{flex:0 0 auto;min-width:90px;padding:10px 12px;font-size:.9rem}}@media(max-width:640px){.game-header{padding:8px 12px}.game-title{font-size:1.2rem}.character-name-badge{font-size:.8rem;padding:4px 8px}.icon-btn{width:36px;height:36px;font-size:1rem}.tab-nav-btn{min-width:80px;padding:10px 8px;font-size:.85rem}.card-hand-panel{padding:12px;max-height:180px}}.tab-panel::-webkit-scrollbar,.card-hand-panel::-webkit-scrollbar{width:8px}.tab-panel::-webkit-scrollbar-track,.card-hand-panel::-webkit-scrollbar-track{background:#0003;border-radius:4px}.tab-panel::-webkit-scrollbar-thumb,.card-hand-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.tab-panel::-webkit-scrollbar-thumb:hover,.card-hand-panel::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.onboarding-prompt{display:flex;flex-direction:column;gap:2rem;padding:2rem;max-width:800px;margin:0 auto;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.onboarding-header{text-align:center;margin-bottom:1rem}.onboarding-header h2{font-size:2rem;margin-bottom:.5rem;color:var(--text-primary, #e0e0e0)}.onboarding-subtitle{font-size:1rem;color:var(--text-secondary, #a0a0a0);margin:0}.archetype-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}.archetype-card{background:linear-gradient(135deg,#42424299,#2c2c2c99);border:2px solid rgba(100,100,100,.3);border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .2s ease;text-align:left;display:flex;flex-direction:column;gap:.75rem}.archetype-card:hover{border-color:var(--accent-color, #7c3aed);background:linear-gradient(135deg,#505050b3,#323232b3);transform:translateY(-2px);box-shadow:0 8px 16px #0000004d}.archetype-card:active{transform:translateY(0)}.archetype-label{font-size:1.25rem;font-weight:600;color:var(--text-primary, #fff)}.archetype-description{font-size:.9rem;color:var(--text-secondary, #b0b0b0);line-height:1.4}.archetype-tags{display:flex;gap:.5rem;flex-wrap:wrap}.archetype-tag{background:#7c3aed33;color:var(--accent-color, #a78bfa);padding:.25rem .75rem;border-radius:12px;font-size:.75rem;text-transform:lowercase}.prompt-body{display:flex;flex-direction:column;gap:1.5rem}.input-wrapper{position:relative}.description-input,.name-input{width:100%;padding:1rem;background:#1e1e1ecc;border:2px solid rgba(100,100,100,.3);border-radius:8px;color:var(--text-primary, #e0e0e0);font-size:1rem;font-family:inherit;transition:border-color .2s ease;resize:none}.description-input:focus,.name-input:focus{outline:none;border-color:var(--accent-color, #7c3aed);box-shadow:0 0 0 3px #7c3aed1a}.description-input.over-limit{border-color:var(--error-color, #ef4444)}.char-counter{position:absolute;bottom:.5rem;right:.5rem;font-size:.75rem;color:var(--text-secondary, #888)}.char-counter.over-limit{color:var(--error-color, #ef4444);font-weight:600}.prompt-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-primary{background:var(--accent-color, #7c3aed);color:#fff}.btn-primary:hover{background:var(--accent-hover, #6d28d9);transform:translateY(-1px);box-shadow:0 4px 12px #7c3aed4d}.btn-primary:disabled{background:#7c3aed4d;cursor:not-allowed;transform:none}.btn-secondary{background:#6464644d;color:var(--text-primary, #e0e0e0);border:1px solid rgba(100,100,100,.5)}.btn-secondary:hover{background:#78787866;transform:translateY(-1px)}.skip-hint{text-align:center;font-size:.875rem;color:var(--text-secondary, #a0a0a0);font-style:italic;animation:fadeIn .5s ease-in}@media(max-width:768px){.onboarding-prompt{padding:1rem}.onboarding-header h2{font-size:1.5rem}.archetype-grid{grid-template-columns:1fr}.prompt-actions{flex-direction:column}.btn{width:100%}}.spotlight-indicator{background:linear-gradient(135deg,#1e1e1ef2,#141414f2);border:1px solid rgba(100,100,100,.3);border-radius:12px;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.spotlight-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(100,100,100,.2)}.spotlight-title{font-size:.875rem;font-weight:600;color:var(--text-secondary, #a0a0a0);text-transform:uppercase;letter-spacing:.05em}.player-list{display:flex;flex-direction:column;gap:.75rem}.player-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;background:#28282880;border:1px solid rgba(100,100,100,.2);transition:all .3s ease}.player-item.active{background:#7c3aed26;border-color:#7c3aed80;box-shadow:0 0 12px #7c3aed33}.player-item.active-pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 12px #7c3aed33}50%{box-shadow:0 0 20px #7c3aed66}}.player-item.ready{border-color:#22c55e80}.player-item.pending{opacity:.7}.player-item.waiting{opacity:.5}.player-icon{font-size:1.25rem;min-width:1.5rem;text-align:center}.player-info{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}.player-name{font-size:.95rem;font-weight:500;color:var(--text-primary, #e0e0e0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-archetype{font-size:.75rem;color:var(--text-secondary, #888);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-status-label{font-size:.75rem;color:var(--text-secondary, #888);font-weight:500;white-space:nowrap}.player-item.active .player-status-label{color:var(--accent-color, #a78bfa)}.player-item.ready .player-status-label{color:#22c55e}.spotlight-message{margin-top:1rem;padding:.75rem;background:#7c3aed1a;border:1px solid rgba(124,58,237,.3);border-radius:8px;text-align:center;font-size:.875rem;color:var(--text-secondary, #b0b0b0);font-style:italic}@media(max-width:768px){.spotlight-indicator{padding:.75rem}.player-item{padding:.5rem}.player-name{font-size:.875rem}.player-status-label{display:none}}.onboarding-overlay{position:fixed;inset:0;z-index:1000;background:linear-gradient(135deg,#0a0a0a,#1a1a1a);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-in}.onboarding-content{display:flex;gap:2rem;width:100%;max-width:1400px;height:100%;max-height:900px;padding:2rem}.onboarding-left{flex:1;display:flex;align-items:center;justify-content:center;overflow-y:auto}.onboarding-right{width:320px;display:flex;flex-direction:column;gap:1rem}.waiting-message{text-align:center;color:var(--text-primary, #e0e0e0);animation:fadeIn .5s ease-in}.waiting-icon{font-size:4rem;margin-bottom:1rem;animation:pulse 2s ease-in-out infinite}.waiting-message h2{font-size:1.75rem;margin-bottom:.5rem}.waiting-message p{font-size:1rem;color:var(--text-secondary, #a0a0a0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@media(max-width:1024px){.onboarding-content{flex-direction:column;padding:1rem}.onboarding-right{width:100%;max-width:500px;margin:0 auto}}@media(max-width:768px){.onboarding-content{gap:1rem}.waiting-icon{font-size:3rem}.waiting-message h2{font-size:1.5rem}}:root{--color-charcoal: #1a1a1f;--color-charcoal-light: #252530;--color-off-white: #f5f4f0;--color-off-white-dim: #d4d3cf;--color-brass: #c9a961;--color-brass-dim: #a08850;--color-slate: #4a5467;--color-slate-light: #5f6a7f;--color-crimson: #a84448;--color-green: #6b8e5f;--color-spotlight-glow: rgba(201, 169, 97, .15);--color-spotlight-border: rgba(201, 169, 97, .4);--color-shadow-warm: rgba(0, 0, 0, .3);--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-narrative: "Georgia", "Lora", "Spectral", serif;--font-accent: "Inter", sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-xxl: 48px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-charcoal);color:var(--color-off-white)}#root,.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:#2a2a2a;padding:1rem;border-bottom:2px solid #3a3a3a;text-align:center}.app-header h1{margin-bottom:.5rem}.app-header p{color:#888;font-size:.9rem}.app-header button{margin-top:.5rem;padding:.5rem 1rem;background-color:#444;color:#fff;border:none;border-radius:4px;cursor:pointer}.app-header button:hover{background-color:#555}.app-main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.lobby-placeholder,.game-placeholder{text-align:center;padding:3rem;background-color:#2a2a2a;border-radius:8px;min-width:300px}.lobby-placeholder h2,.game-placeholder h2{margin-bottom:1rem;color:#f0f0f0}.lobby-placeholder button,.game-placeholder button{padding:.75rem 1.5rem;font-size:1rem;background-color:#4a9eff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.lobby-placeholder button:hover,.game-placeholder button:hover{background-color:#3a8eef}.app-footer{background-color:#2a2a2a;padding:1rem;border-top:2px solid #3a3a3a;text-align:center;color:#888;font-size:.85rem}.loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#1a1a1a;color:#f0f0f0}.loading-screen h1{margin-bottom:1rem;font-size:2.5rem}.loading-screen p{color:#888}@media(max-width:768px){.app-header h1{font-size:1.5rem}.app-main{padding:1rem}.lobby-placeholder,.game-placeholder{padding:2rem;min-width:100%}}