*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e8f4e8;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#0a1628;min-height:100svh;font-family:Segoe UI,system-ui,sans-serif;overflow-x:hidden}#root{flex-direction:column;min-height:100svh;display:flex}.page{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100svh;padding:24px 20px;display:flex}.page h2{color:#4ade80;margin-bottom:8px;font-size:1.8rem;font-weight:700}.page input{color:#e8f4e8;background:#0f1f3a;border:2px solid #1e3a5f;border-radius:12px;outline:none;width:100%;max-width:320px;padding:14px 16px;font-size:1rem;transition:border-color .2s}.page input:focus{border-color:#4ade80}.page input::placeholder{color:#4a6080}.btn{cursor:pointer;letter-spacing:.5px;border:none;border-radius:12px;width:100%;max-width:320px;padding:15px;font-size:1.05rem;font-weight:700;transition:all .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{color:#0a1628;background:linear-gradient(135deg,#16a34a,#4ade80)}.btn-secondary{color:#4ade80;background:0 0;border:2px solid #4ade80}.btn-ghost{color:#64748b;background:0 0;font-size:.9rem}.room-code{letter-spacing:8px;color:#4ade80;background:#0f1f3a;border:2px dashed #1e3a5f;border-radius:12px;padding:16px 24px;font-family:monospace;font-size:2.5rem;font-weight:900}.error-msg{color:#f87171;font-size:.9rem}.landscape-prompt{z-index:9999;color:#4ade80;text-align:center;background:#0a1628;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;font-size:1.1rem;display:none;position:fixed;inset:0}@media (orientation:portrait){.landscape-prompt{display:flex}}