:root{--background: #120b2d;--surface: #1c1242;--surface-alt: #261856;--border: #5b3db8;--text: #fff8ff;--text-muted: #b7a9d9;--pink: #ff3eb5;--cyan: #18e0ff;--yellow: #ffe66d;--pink-glow: rgba(255, 62, 181, .7);--cyan-glow: rgba(24, 224, 255, .65);--yellow-glow: rgba(255, 230, 109, .6)}*{box-sizing:border-box}body{min-height:100vh;margin:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 18% 12%,rgba(255,62,181,.24),transparent 30%),radial-gradient(circle at 86% 20%,rgba(24,224,255,.18),transparent 28%),linear-gradient(160deg,#120b2d,#1a1044 48%,#09051c);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}main{width:min(100%,460px)}.card{position:relative;overflow:hidden;padding:28px;border:2px solid var(--border);border-radius:28px;background:linear-gradient(180deg,#261856f5,#1c1242fa);box-shadow:0 0 28px #8460ff52,0 0 36px #18e0ff2e}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 34px #ff3eb52e}.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}h1,h2,p{margin:0}h1{font-size:clamp(32px,8vw,42px);line-height:1.08;letter-spacing:0}h2{margin-bottom:16px;color:var(--cyan);font-size:22px;line-height:1.2;text-shadow:0 0 18px var(--cyan-glow)}.star-chip,.host-chip{flex:0 0 auto;padding:8px 12px;border:1px solid var(--yellow);border-radius:999px;color:var(--yellow);font-size:12px;font-weight:800;text-transform:uppercase;box-shadow:0 0 18px var(--yellow-glow)}.host-chip{margin-left:8px;padding:3px 8px;font-size:10px}.room-card,.lobby-card{margin:18px 0;padding:18px;border:1px solid var(--cyan);border-radius:18px;background:var(--surface-alt);box-shadow:0 0 22px #18e0ff38}.lobby-card{border-color:var(--border);box-shadow:0 0 20px #8460ff3d}.label,.field-label{display:block;margin-bottom:8px;color:var(--text-muted);font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}.room-code{overflow-wrap:anywhere;color:var(--yellow);font-size:clamp(34px,12vw,52px);font-weight:900;line-height:1;letter-spacing:0;text-shadow:0 0 18px var(--yellow-glow)}.instruction,.muted{color:var(--text-muted);font-size:16px;font-weight:600;line-height:1.5}.center{text-align:center}.join-form{margin-top:18px}input{width:100%;min-height:54px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt);color:var(--text);font:inherit;font-size:17px;font-weight:700;padding:0 16px}input::placeholder{color:var(--text-muted)}input:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button{width:100%;min-height:52px;margin-top:22px;border:1px solid var(--pink);border-radius:999px;background:var(--pink);color:var(--text);cursor:pointer;font:inherit;font-size:16px;font-weight:900;box-shadow:0 0 22px var(--pink-glow)}button:disabled,input:disabled{cursor:wait;opacity:.72}.error-text{margin-top:10px;color:#ff9bad;font-size:14px;font-weight:800;line-height:1.4}.error-box{margin:18px 0;padding:14px;border:1px solid #ff4f6d;border-radius:14px;background:#ff4f6d1f;color:#ffd6de;font-weight:800;line-height:1.45}.player-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}.player-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-weight:800}.stars{flex:0 0 auto;color:var(--yellow);text-shadow:0 0 12px var(--yellow-glow)}@media (max-width: 420px){body{padding:16px}.card{padding:22px;border-radius:24px}.brand-row{align-items:flex-start;flex-direction:column}}