:root{--color-primary: #1976d2;--color-primary-hover: #1565c0;--color-primary-light: #e3f2fd;--color-danger: #d32f2f;--color-danger-hover: #c62828;--color-bg: #f5f7fa;--color-surface: #ffffff;--color-border: #e0e0e0;--color-text: #212121;--color-text-secondary: #757575}@media(prefers-color-scheme:dark){:root{--color-primary: #64b5f6;--color-primary-hover: #42a5f5;--color-primary-light: #1a2332;--color-danger: #ef5350;--color-danger-hover: #e53935;--color-bg: #121212;--color-surface: #1e1e1e;--color-border: #333333;--color-text: #e0e0e0;--color-text-secondary: #9e9e9e}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5;min-height:100vh}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}input,select,textarea{padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:6px;font-size:.9rem;background:var(--color-surface);color:var(--color-text);width:100%;transition:border-color .2s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border:1px solid transparent;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s,color .2s,opacity .2s;gap:.4rem}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-bg)}.btn-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.btn-danger:hover:not(:disabled){background:var(--color-danger-hover)}.btn-small{padding:.3rem .6rem;font-size:.8rem}.navbar{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}.navbar-brand{font-size:1.2rem;font-weight:700;color:var(--color-primary);display:flex;align-items:center;gap:.5rem;cursor:pointer}.navbar-user{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.navbar-user input{width:auto}.navbar-user input.id-input{width:60px}.navbar-user input.username-input{width:140px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.error-page{text-align:center;padding:3rem;color:var(--color-danger);font-size:1.2rem}.error-banner{background:#ffebee;color:#c62828;padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}.loading{text-align:center;padding:3rem;color:var(--color-text-secondary);font-size:1.1rem}.session-list-page{max-width:1100px;margin:0 auto;padding:1.5rem}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.page-header h1{margin:0}.header-actions{display:flex;gap:.5rem}.join-by-code{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.join-by-code input{flex:1;min-width:120px}.filters{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.session-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.session-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1rem;transition:box-shadow .2s}.session-card:hover{box-shadow:0 4px 16px #00000026}.session-card.status-waiting{border-left:4px solid #4caf50}.session-card.status-active{border-left:4px solid #ff9800}.session-card.status-completed{border-left:4px solid #9e9e9e}.session-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.session-card-header h3{margin:0;font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-badge{font-size:.75rem;padding:2px 8px;border-radius:12px;font-weight:600;text-transform:uppercase}.status-badge.waiting{background:#e8f5e9;color:#2e7d32}.status-badge.active{background:#fff3e0;color:#e65100}.status-badge.completed{background:#f5f5f5;color:#616161}.session-info{display:flex;gap:1rem;font-size:.9rem;color:var(--color-text-secondary);flex-wrap:wrap}.tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.5rem}.tag{font-size:.75rem;background:var(--color-primary-light);color:var(--color-primary);padding:2px 6px;border-radius:4px}.session-card-time{font-size:.8rem;color:var(--color-text-secondary);margin-top:.5rem}.session-card-actions{display:flex;gap:.5rem;margin-top:.75rem;justify-content:flex-end}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.5rem}.empty-state,.loading{text-align:center;padding:3rem;color:var(--color-text-secondary);font-size:1.1rem}.error-banner{background:#ffebee;color:#c62828;padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem}.guest-hint{font-size:.8rem;color:var(--muted, #888);font-style:italic}.create-session-page{max-width:600px;margin:0 auto;padding:1.5rem}.create-session-page .page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.create-session-page .page-header h1{margin:0}.create-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.3rem;font-weight:500;font-size:.9rem}.form-checkbox label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.form-checkbox input[type=checkbox]{width:auto}.btn-large{width:100%;padding:.75rem;font-size:1.1rem;margin-top:.5rem}.session-detail-page{max-width:1200px;margin:0 auto;padding:1.5rem}.detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.detail-title{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.detail-title h1{margin:0}.hub-badge{font-size:.8rem;padding:2px 8px;border-radius:12px}.hub-badge.connected{background:#e8f5e9;color:#2e7d32}.hub-badge.disconnected{background:#ffebee;color:#c62828}.detail-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1rem}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1rem}.panel h2{margin:0 0 .75rem;font-size:1.1rem;border-bottom:1px solid var(--color-border);padding-bottom:.5rem}.info-panel{grid-column:1;grid-row:1}.info-list{display:flex;flex-direction:column;gap:.4rem}.info-item{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;padding:.2rem 0}.info-label{color:var(--color-text-secondary);font-weight:500}.info-value{text-align:right}.info-value.mono{font-family:Courier New,monospace;font-size:.8rem;word-break:break-all}.invite-code{font-size:1.2rem;font-weight:700;color:var(--color-primary);letter-spacing:2px;font-family:Courier New,monospace}.rating-card{background:var(--color-bg);border-radius:6px;padding:.75rem;margin-top:.75rem}.rating-card h3{margin:0 0 .4rem;font-size:.9rem}.rating-stats{display:flex;gap:1rem;font-size:.85rem;flex-wrap:wrap}.action-buttons{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}.players-panel{grid-column:2;grid-row:1}.players-list{display:flex;flex-direction:column;gap:.3rem;max-height:300px;overflow-y:auto}.player-item{display:flex;justify-content:space-between;align-items:center;padding:.4rem .5rem;border-radius:4px;font-size:.9rem}.player-item:hover{background:var(--color-bg)}.player-info{display:flex;align-items:center;gap:.5rem}.player-status-dot{width:8px;height:8px;border-radius:50%}.player-status-dot.online{background:#4caf50}.player-status-dot.offline{background:#9e9e9e}.host-badge{font-size:.7rem;background:#fff3e0;color:#e65100;padding:1px 5px;border-radius:3px;margin-left:.3rem;font-weight:700}.spectator-badge{margin-left:.3rem}.player-actions{display:flex;gap:.3rem}.btn-tiny{padding:2px 6px;font-size:.75rem;border-radius:3px}.chat-panel{grid-column:1;grid-row:2}.chat-messages{height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem;padding:.5rem;background:var(--color-bg);border-radius:6px;margin-bottom:.5rem}.empty-chat{text-align:center;color:var(--color-text-secondary);padding:2rem;font-size:.9rem}.chat-msg{display:flex;gap:.5rem;align-items:baseline;font-size:.85rem}.chat-msg.own .chat-author{color:var(--color-primary)}.chat-author{font-weight:600;flex-shrink:0}.chat-text{flex:1;word-break:break-word}.chat-time{font-size:.75rem;color:var(--color-text-secondary);flex-shrink:0}.chat-input{display:flex;gap:.5rem}.chat-input input{flex:1}.event-panel{grid-column:2;grid-row:2}.game-actions-panel{grid-column:1 / -1;grid-row:3}.game-actions-form{display:flex;flex-direction:column;gap:.5rem}.game-actions-label{color:var(--color-text-secondary);font-size:.85rem;font-weight:600}.game-actions-panel select,.game-actions-panel textarea{width:100%;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);padding:.55rem .65rem}.game-actions-panel textarea{resize:vertical;min-height:120px;font-family:Courier New,monospace}.game-actions-buttons{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}.action-helper{font-size:.85rem;color:var(--color-text-secondary)}.event-log{height:250px;overflow-y:auto;padding:.5rem;background:var(--color-bg);border-radius:6px;font-family:Courier New,monospace;font-size:.8rem}.event-item{padding:.15rem 0;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}.error-banner button{margin-left:1rem;background:transparent;border:none;color:#c62828;cursor:pointer;font-size:1rem}@media(max-width:768px){.detail-grid{grid-template-columns:1fr}.info-panel,.players-panel,.chat-panel,.event-panel,.game-actions-panel{grid-column:1;grid-row:auto}}.auth-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);padding:2rem}.auth-card{background:var(--card-bg, #1e1e2e);border:1px solid var(--border, #333);border-radius:12px;padding:2.5rem;width:100%;max-width:440px;box-shadow:0 8px 32px #0000004d}.auth-card h1{margin:0 0 .25rem;font-size:1.75rem;text-align:center}.auth-subtitle{text-align:center;color:var(--muted, #999);margin:0 0 1.5rem;font-size:.9rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-form .form-group{display:flex;flex-direction:column;gap:.35rem}.auth-form .form-group label{font-size:.85rem;font-weight:500;color:var(--muted, #999)}.auth-form .form-group input{padding:.65rem .75rem;background:var(--input-bg, #2a2a3e);border:1px solid var(--border, #444);border-radius:6px;color:var(--text, #eee);font-size:.95rem;transition:border-color .2s}.auth-form .form-group input:focus{outline:none;border-color:var(--primary, #7c3aed)}.auth-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.auth-form .btn-large{margin-top:.5rem;padding:.75rem;font-size:1rem}.auth-footer{margin-top:1.5rem;text-align:center;font-size:.9rem;color:var(--muted, #999)}.auth-footer a{color:var(--primary, #7c3aed);text-decoration:none;font-weight:500}.auth-footer a:hover{text-decoration:underline}@media(max-width:480px){.auth-card{padding:1.5rem}.auth-form .form-row{grid-template-columns:1fr}}