*{box-sizing:border-box;margin:0;padding:0}body{background-color:#0f172a;color:#f8fafc;font-family:Inter,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.view{display:none;width:100%;max-width:600px;background-color:#1e293b;border-radius:16px;padding:40px;box-shadow:0 20px 40px #0006}.view.active{display:flex;flex-direction:column;gap:24px;animation:fadeIn .4s ease-out forwards}.playing-view{max-width:800px}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h1{font-size:2rem;font-weight:700;text-align:center;color:#f1f5f9}h2{font-size:1.25rem;font-weight:600;color:#cbd5e1;margin-bottom:12px}.subtitle{text-align:center;color:#94a3b8;margin-top:-16px;font-size:.95rem}.highlight{color:#0ea5e9}.info-text{text-align:center;color:#94a3b8;font-size:.9rem;font-style:italic}.input-group{display:flex;flex-direction:column;gap:8px}label{font-size:.9rem;color:#cbd5e1;font-weight:500}input[type=text]{width:100%;padding:14px 16px;border-radius:10px;border:2px solid #334155;background-color:#0f172a;color:#f8fafc;font-size:1rem;font-family:Inter,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}input[type=text]::placeholder{color:#64748b}input[type=text]:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px #0ea5e933}button{width:100%;padding:14px 24px;border-radius:10px;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s,opacity .2s;font-family:Inter,sans-serif}.primary-btn{background-color:#0ea5e9;color:#fff;box-shadow:0 4px 14px #0ea5e94d}.primary-btn:hover:not(:disabled){background-color:#0284c7;transform:translateY(-2px)}.secondary-btn{background-color:#475569;color:#f8fafc}.secondary-btn:hover:not(:disabled){background-color:#334155;transform:translateY(-2px)}.danger-btn{background-color:#ef4444;color:#fff;width:auto;padding:10px 16px}.danger-btn:hover:not(:disabled){background-color:#dc2626;transform:translateY(-2px)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}.divider{display:flex;align-items:center;text-align:center;color:#64748b;font-size:.85rem;font-weight:600}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid #334155}.divider span{padding:0 16px}.player-list{list-style:none;display:flex;flex-direction:column;gap:8px}.player-list li{background-color:#334155;padding:12px 16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-weight:500}.host-badge{background-color:#0ea5e9;color:#fff;font-size:.75rem;padding:2px 8px;border-radius:12px;margin-left:8px}.game-header{display:flex;justify-content:space-between;align-items:center}.room-info{font-size:1.2rem;font-weight:600}.scoreboard{display:flex;flex-wrap:wrap;gap:12px;padding:16px;background-color:#0f172a;border-radius:12px;border:1px solid #334155}.score-item{display:flex;align-items:center;gap:8px;background-color:#1e293b;padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:600;border:1px solid #475569}.score-item.passed{opacity:.6;border-color:#10b981}.score-item.passed:after{content:"✓";color:#10b981}.word-pool-container{background-color:#0f172a;border-radius:12px;padding:20px;min-height:250px;border:1px solid #334155}.word-pool{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start}.word-chip{padding:8px 16px;border-radius:20px;background-color:#1e293b;color:#38bdf8;border:1px solid #38bdf8;font-weight:500;font-size:.95rem;cursor:default;transition:all .3s cubic-bezier(.4,0,.2,1);transform:scale(1);opacity:1;-webkit-user-select:none;user-select:none}.word-chip:hover{background-color:#38bdf81a;box-shadow:0 0 8px #38bdf866}.word-chip.taken{transform:scale(.6);opacity:0;pointer-events:none}.input-area{display:flex;gap:12px}.input-area input{flex:1}.input-area button{width:auto}.final-scores-container{background-color:#0f172a;padding:20px;border-radius:12px;border:1px solid #334155}.rank-item{display:flex;align-items:center}.rank-1{color:#fbbf24;font-weight:700;font-size:1.1rem}.rank-2{color:#94a3b8}.rank-3{color:#b45309}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.shake{animation:shake .4s ease-in-out;border-color:#ef4444!important;color:#ef4444}@media(max-width:600px){.view{padding:24px 20px}.input-area{flex-direction:column}.input-area button{width:100%}.game-header{flex-direction:column;align-items:flex-start;gap:12px}.danger-btn{width:100%}}