@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Space+Mono:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Space Mono,monospace;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;padding:clamp(1rem,3vw,2rem);position:relative}.app:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.05) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.05) 0%,transparent 50%);animation:float 20s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes float{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.header{text-align:center;margin-bottom:clamp(2rem,5vw,3rem);position:relative;z-index:1}.main-title{font-family:Fredoka,sans-serif;font-size:clamp(2.5rem,8vw,5rem);font-weight:700;color:#fff;text-shadow:4px 4px 0px rgba(0,0,0,.2),8px 8px 0px rgba(0,0,0,.1);letter-spacing:-.02em;margin-bottom:.5rem;animation:slideDown .6s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.subtitle{font-size:clamp(.9rem,3vw,1.1rem);color:#ffffffe6;font-weight:600;animation:fadeIn .8s ease-out .2s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:clamp(1.5rem,4vw,2rem);max-width:1400px;margin:0 auto;position:relative;z-index:1}@media(max-width:768px){.games-grid{grid-template-columns:1fr}}.game-card{position:relative;cursor:pointer;animation:cardEnter .5s ease-out both;-webkit-tap-highlight-color:transparent;height:100%}.game-card:nth-child(1){animation-delay:.1s}.game-card:nth-child(2){animation-delay:.2s}.game-card:nth-child(3){animation-delay:.3s}.game-card:nth-child(4){animation-delay:.4s}@keyframes cardEnter{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.card-inner{background:#fffffff2;border-radius:20px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 30px #0003;display:flex;flex-direction:row;align-items:stretch;min-height:160px;height:100%}.card-inner.hovered{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #0000004d,0 0 0 4px var(--card-color)}.card-glow{position:absolute;top:-100%;left:-100%;width:300%;height:300%;background:radial-gradient(circle,var(--card-color) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.card-inner.hovered .card-glow{opacity:.08}.card-content{flex:1;padding:clamp(1.25rem,3.5vw,1.75rem);display:flex;flex-direction:column;position:relative;z-index:1}.card-preview{width:clamp(130px,28%,200px);flex-shrink:0;overflow:hidden;border-radius:0 16px 16px 0;position:relative;background:var(--card-color);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 42%);mask-image:linear-gradient(to right,transparent 0%,black 42%)}.card-preview img{width:100%;height:100%;object-fit:contain;object-position:right center;display:block;transition:transform .3s ease}.card-inner.hovered .card-preview img{transform:scale(1.04)}.game-title{font-family:Fredoka,sans-serif;font-size:clamp(1.4rem,4.5vw,1.9rem);font-weight:700;color:#2d3748;margin-bottom:.5rem}.game-description{color:#4a5568;line-height:1.5;margin-bottom:clamp(.75rem,2.5vw,1.25rem);font-size:clamp(.82rem,2.2vw,.92rem);flex:1}.game-meta{display:flex;align-items:center}.player-count{background:var(--card-color);color:#fff;padding:clamp(.3rem,1.5vw,.4rem) clamp(.7rem,2vw,.9rem);border-radius:20px;font-size:clamp(.75rem,2.2vw,.85rem);font-weight:700;letter-spacing:.02em}.play-arrow{position:absolute;bottom:1rem;right:1rem;width:32px;height:32px;border-radius:50%;background:#ffffffd9;color:var(--card-color);display:flex;align-items:center;justify-content:center;font-size:.8rem;opacity:0;transform:translate(-8px);transition:all .3s ease;z-index:2}.card-inner.hovered .play-arrow{opacity:1;transform:translate(0)}@media(max-width:480px){.card-preview{width:110px}}.title-letter{display:inline-block;color:var(--letter-pastel);text-shadow:3px 4px 0px var(--letter-color);transition:color .2s ease,transform .2s ease;cursor:default}.title-letter:hover{color:var(--letter-color);transform:scale(1.2) translateY(-3px)}.name-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto clamp(1.5rem,4vw,2rem);padding:10px 16px;background:#fffffff2;border-radius:50px;box-shadow:0 4px 15px #0000001a;max-width:fit-content;min-width:200px}.name-label{color:#6b7280;font-size:.9rem;font-family:Fredoka,sans-serif;white-space:nowrap}.name-display{font-weight:600;color:#1f2937;font-size:1rem;font-family:Fredoka,sans-serif;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name-input-inline{font-weight:600;color:#1f2937;font-size:1rem;font-family:Fredoka,sans-serif;border:none;outline:none;background:transparent;width:120px;padding:2px 4px;border-bottom:2px solid #667eea}.name-edit-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:#f9a8a8;border-radius:4px;transition:color .2s,background .2s}.name-edit-btn:hover{color:#ef4444;background:#ef444414}.name-edit-btn:active{transform:scale(.95)}.join-room-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto clamp(1rem,3vw,1.5rem);flex-wrap:wrap}.join-code-input{padding:10px 16px;font-size:1rem;font-family:Space Mono,monospace;font-weight:600;text-transform:uppercase;letter-spacing:.15em;border:2px solid #e5e7eb;border-radius:50px;outline:none;width:160px;text-align:center;transition:border-color .2s,box-shadow .2s;background:#fffffff2}.join-code-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.join-code-input::placeholder{text-transform:none;letter-spacing:normal;font-family:Fredoka,sans-serif;font-weight:400;font-size:.85rem;color:#9ca3af}.join-code-input:disabled{opacity:.6}.join-room-btn{padding:10px 20px;font-size:1rem;font-family:Fredoka,sans-serif;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;cursor:pointer;transition:transform .2s,box-shadow .2s}.join-room-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 15px #667eea66}.join-room-btn:active:not(:disabled){transform:scale(.98)}.join-room-btn:disabled{opacity:.5;cursor:not-allowed}.join-error{width:100%;text-align:center;color:#ef4444;font-size:.85rem;font-family:Fredoka,sans-serif;margin-top:4px}.divider-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto clamp(1.5rem,4vw,2rem);max-width:300px;padding:0 1rem}.divider-line{flex:1;height:1px;background:#ffffff4d}.divider-text{color:#ffffffe6;font-size:clamp(.9rem,3vw,1.1rem);font-family:Fredoka,sans-serif;font-weight:600;white-space:nowrap}@media(max-width:480px){.name-row{padding:8px 14px;gap:6px}.name-label{font-size:.85rem}.name-display{font-size:.95rem;max-width:120px}.name-input-inline{font-size:.95rem;width:100px}.join-code-input{width:140px;padding:8px 14px;font-size:.95rem}.join-code-input::placeholder{font-size:.75rem}.join-room-btn{padding:8px 16px;font-size:.95rem}.divider-row{max-width:260px}.divider-text{font-size:.8rem}}.disconnect-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.disconnect-card{background:#fff;border-radius:20px;padding:clamp(1.5rem,5vw,2.5rem);text-align:center;max-width:380px;width:100%;box-shadow:0 20px 60px #0000004d}.disconnect-icon{color:#ef4444;margin-bottom:1rem}.disconnect-title{font-family:Fredoka,sans-serif;font-size:clamp(1.4rem,5vw,1.8rem);font-weight:700;color:#2d3748;margin-bottom:.5rem}.disconnect-message{font-family:Fredoka,sans-serif;font-size:clamp(.9rem,3vw,1rem);color:#666;margin-bottom:1.5rem;line-height:1.5}.disconnect-error{display:block;margin-top:.25rem;font-size:.85rem;color:#ef4444}.disconnect-actions{display:flex;gap:.75rem;justify-content:center}.disconnect-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.4rem;border:none;border-radius:10px;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s;min-height:44px;-webkit-tap-highlight-color:transparent}.disconnect-btn:hover{opacity:.9;transform:translateY(-1px)}.disconnect-btn:active{transform:translateY(0)}.disconnect-btn.retry{background:#3b82f6;color:#fff}.disconnect-btn.home{background:#f3f4f6;color:#2d3748}.disconnect-spinner{display:flex;justify-content:center;color:#3b82f6}.spinning{animation:spin 1.2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}