*{box-sizing:border-box;margin:0;padding:0}:root{--bg-base: #0c0a0f;--bg-elevated: #14111a;--bg-card: #1a1622;--bg-card-hover: #221d2b;--accent: #a855f7;--accent-light: #c084fc;--accent-glow: rgba(168, 85, 247, .5);--accent-subtle: rgba(168, 85, 247, .12);--hot: #8b5cf6;--hot-glow: rgba(139, 92, 246, .5);--text-primary: #fafafa;--text-secondary: #a8a3b3;--text-muted: #6b6578;--border: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .12);--success: #4ade80;--success-glow: rgba(74, 222, 128, .4);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}html,body,#root{height:100%;width:100%}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-base);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.screen{min-height:100vh;min-height:100dvh;padding:24px 20px;display:flex;flex-direction:column;max-width:440px;margin:0 auto}h1{font-family:Space Mono,monospace;font-size:2.5rem;font-weight:700;letter-spacing:-.02em;text-align:center;margin-bottom:.25rem}h2{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}h3{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:12px}.subtitle{text-align:center;color:var(--text-secondary);font-size:1rem;margin-bottom:2.5rem}.btn{display:flex;align-items:center;justify-content:center;width:100%;padding:16px 24px;font-family:inherit;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);touch-action:manipulation;gap:8px}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 20px var(--accent-glow)}.btn-primary:hover:not(:disabled){background:var(--accent-light);box-shadow:0 0 30px var(--accent-glow)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border-light)}.btn-small{width:auto;padding:10px 16px;font-size:.875rem;font-weight:500}.btn-back{background:none;border:none;color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;padding:8px 0;margin-bottom:24px;text-align:left;display:flex;align-items:center;gap:6px;transition:color .2s}.btn-back:hover{color:var(--text-primary)}.button-group{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px}.input-group{margin-bottom:20px}.input-group label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px}.input-group input{width:100%;padding:14px 16px;font-family:inherit;font-size:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);outline:none;transition:all .2s}.input-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}.input-group input::placeholder{color:var(--text-muted)}.code-input{text-transform:uppercase;letter-spacing:.2em;text-align:center;font-family:Space Mono,monospace;font-weight:700;font-size:1.25rem}.error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:12px 16px;border-radius:var(--radius-md);margin-bottom:16px;font-size:.875rem}.home{justify-content:center;text-align:center;padding-top:15vh;padding-bottom:10vh}.home h1{font-size:4rem;background:linear-gradient(90deg,#a855f7 0% 25%,#f44 40%,#ff8c00,#f44 60%,#a855f7 75% 100%);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;margin-bottom:12px;letter-spacing:-.02em;word-spacing:-.15em;filter:drop-shadow(0 0 30px rgba(168,85,247,.3));animation:titleEntry .8s ease-out,heatSweep 3s ease-in-out infinite 1s}.home .subtitle{font-size:1.1rem;margin-bottom:48px;animation:fadeUp .6s ease-out .2s both}.home .how-to-play{animation:fadeUp .6s ease-out .4s both}.home .button-group{animation:fadeUp .6s ease-out .6s both;padding-top:0;margin-top:0}.how-to-play{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:40px}.how-to-play ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0}.how-to-play li{color:var(--text-secondary);font-size:.9rem;line-height:1.6;padding-left:24px;position:relative;text-align:left}.how-to-play li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px var(--accent-glow);animation:bulletPulse 2s ease-in-out infinite}.how-to-play li:nth-child(2):before{animation-delay:.2s}.how-to-play li:nth-child(3):before{animation-delay:.4s}.how-to-play li:nth-child(4):before{animation-delay:.6s}@keyframes titleEntry{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes heatSweep{0%{background-position:100% 0}to{background-position:0% 0}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bulletPulse{0%,to{box-shadow:0 0 8px var(--accent-glow);transform:scale(1)}50%{box-shadow:0 0 16px var(--accent-glow);transform:scale(1.1)}}.room-code-display{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;text-align:center;margin-bottom:20px}.room-code-display .label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px}.room-code-display .code{display:block;font-family:Space Mono,monospace;font-size:2.5rem;font-weight:700;letter-spacing:.15em;color:var(--accent);text-shadow:0 0 30px var(--accent-glow)}.players-list{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}.players-list ul{list-style:none}.players-list li{padding:12px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-weight:500}.players-list li:last-child{border-bottom:none;padding-bottom:0}.players-list li:first-child{padding-top:0}.host-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--hot);color:#fff;padding:3px 8px;border-radius:4px}.mode-toggle-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;text-align:center}.mode-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:12px}.mode-toggle{display:inline-flex;background:var(--bg-base);border-radius:var(--radius-sm);padding:4px;gap:4px}.mode-btn{background:transparent;border:none;color:var(--text-secondary);padding:10px 24px;border-radius:6px;font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.mode-btn.active{background:var(--hot);color:#fff;box-shadow:0 0 15px var(--hot-glow)}.mode-value{display:block;font-weight:600;color:var(--text-primary)}.mode-description{font-size:.8rem;color:var(--text-muted);margin-top:12px;margin-bottom:0}.host-controls{margin-top:auto}.category-buttons{display:flex;gap:8px;margin-top:12px}.category-buttons .btn-small{flex:1;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary)}.category-buttons .btn-small:hover{background:var(--bg-card-hover)}.category-buttons .btn-random{background:linear-gradient(135deg,var(--hot) 0%,var(--accent) 100%);border:none;color:#fff;box-shadow:0 0 15px var(--hot-glow)}.category-picker{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:20px;max-height:45vh;display:flex;flex-direction:column}.group-toggles{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}.toggles-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.toggle-chip{background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:6px 14px;border-radius:20px;font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.toggle-chip.active{background:var(--hot);border-color:var(--hot);color:#fff}.toggle-chip.nsfw{border-color:#ef444466;color:#fca5a5}.toggle-chip.nsfw.active{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:transparent;color:#fff}.group-tabs{display:flex;gap:4px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}.tab{background:transparent;border:none;color:var(--text-secondary);padding:8px 14px;font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);transition:all .2s}.tab:hover{color:var(--text-primary)}.tab.active{background:var(--bg-card);color:var(--text-primary)}.tab.nsfw{color:#fca5a5}.tab.nsfw.active{background:#ef444426}.category-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:6px}.category-item{background:transparent;border:1px solid var(--border);color:var(--text-primary);padding:14px 16px;border-radius:var(--radius-md);font-family:inherit;font-size:.875rem;cursor:pointer;text-align:left;transition:all .2s;line-height:1.4}.category-item:hover{border-color:var(--accent);background:var(--accent-subtle)}.waiting-state{text-align:center;color:var(--text-secondary);margin-top:auto;padding:24px}.category-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}.category-preview .label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px}.category-preview .value{font-size:1.1rem;font-weight:600;line-height:1.5}.number-reveal{justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;background:radial-gradient(ellipse at center,var(--hot-glow) 0%,transparent 60%)}.category-reminder{font-size:.9rem;color:var(--text-secondary);text-align:center;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);line-height:1.5}.number-display{display:flex;justify-content:center;align-items:center;flex:1}.number-display .number{font-family:Space Mono,monospace;font-size:10rem;font-weight:700;color:var(--text-primary);text-shadow:0 0 60px var(--hot-glow),0 0 120px var(--hot-glow);line-height:1}.hint{text-align:center;color:var(--text-muted);font-size:.875rem}.hidden-screen{justify-content:space-between}.player-name-header{text-align:center;color:var(--accent);margin-bottom:12px}.hidden-display{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;margin:24px 0}.pattern{width:180px;height:180px;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;transition:all .2s}.pattern:after{content:"?";font-family:Space Mono,monospace;font-size:4rem;font-weight:700;color:var(--text-muted)}.hidden-display:hover .pattern{border-color:var(--hot);box-shadow:0 0 30px var(--hot-glow)}.hidden-display:hover .pattern:after{color:var(--hot)}.peek-hint{color:var(--text-muted);margin-top:16px;font-size:.875rem}.confirmed-status{text-align:center;padding:24px}.confirmed-status p:first-child{color:var(--success);font-weight:600;font-size:1.1rem}.waiting{color:var(--text-muted);font-size:.875rem;margin-top:8px}.reveal-screen{text-align:center}.reveal-screen h1{margin-bottom:8px;color:var(--success);text-shadow:0 0 30px var(--success-glow)}.category-display{color:var(--text-secondary);font-size:.9rem;margin-bottom:24px}.results-list{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:24px;text-align:left}.results-list h3{text-align:center;margin-bottom:16px}.results-list ol{list-style:none}.result-item{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}.result-item:last-child{border-bottom:none;padding-bottom:0}.result-item:first-child{padding-top:0}.result-item .position{width:32px;color:var(--text-muted);font-weight:600;font-size:.875rem}.result-item .name{flex:1;font-weight:500}.result-item .number{font-family:Space Mono,monospace;font-weight:700;color:var(--accent);font-size:1.25rem}.game-board-screen{min-height:100vh;min-height:100dvh;padding:24px 16px;display:flex;flex-direction:column;max-width:600px;margin:0 auto}.board-labels{display:flex;justify-content:space-between;padding:0 8px;margin-bottom:10px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.game-board{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px;margin-bottom:16px}.board-track{display:flex;gap:8px;min-height:130px;align-items:stretch}.board-slot{flex:1;min-width:65px;background:var(--bg-base);border:2px dashed var(--border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer}.board-slot.empty:hover{border-color:var(--accent);background:var(--accent-subtle)}.board-slot.my-slot{border-color:var(--accent);border-style:solid;box-shadow:0 0 20px var(--accent-glow)}.slot-placeholder{color:var(--text-muted);font-family:Space Mono,monospace;font-size:1.25rem;font-weight:700;opacity:.3}.player-card{width:100%;height:100%;min-height:110px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 8px;cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none}.player-card:active{cursor:grabbing}.player-card.mine{background:linear-gradient(135deg,var(--accent) 0%,#7c3aed 100%);border:none;box-shadow:0 4px 20px var(--accent-glow)}.player-card.confirmed{opacity:.7;cursor:default}.player-card.dragging{opacity:.5;transform:scale(.95)}.player-card.unplaced{width:75px;min-height:95px;flex-shrink:0}.card-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.card-number{font-family:Space Mono,monospace;font-size:1.75rem;font-weight:700;color:#fff;line-height:1}.card-number.revealed{font-size:2rem}.card-hidden{font-family:Space Mono,monospace;font-size:2rem;font-weight:700;color:var(--text-muted)}.player-card.mine .card-hidden{color:#fff9}.card-name{font-size:.7rem;font-weight:600;color:var(--text-secondary);margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card.mine .card-name{color:#ffffffe6}.card-hint{font-size:.6rem;color:#ffffff80;margin-top:4px}.card-locked{font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;background:#ffffff1a;padding:3px 8px;border-radius:4px;margin-top:6px;color:var(--text-muted)}.unplaced-area{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px;min-height:50px}.unplaced-area:empty{display:none}.board-actions{text-align:center;margin-top:auto;padding-top:16px}.board-hint{color:var(--text-muted);font-size:.875rem}.revealed-actions h2{font-size:1.5rem;margin-bottom:20px;color:var(--success);text-shadow:0 0 20px var(--success-glow)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.screen{animation:fadeIn .3s ease-out}.room-code-display .code{animation:pulse 2s ease-in-out infinite}@media(min-width:481px){.screen{padding:40px 24px}h1{font-size:3rem}.home h1{font-size:4rem}.number-display .number{font-size:12rem}.board-track{min-height:150px}.player-card{min-height:130px}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}