@import url('/lobby.css');
@import url('/game/game.css');
@import url('/deploy.css');
:root { --bg:#05070f; --panel:rgba(14,20,38,.88); --line:#24314f; --text:#dfe7ff; --muted:#8a96b5; --accent:#4fc3f7; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; overflow:hidden; }
.hidden { display:none !important; }
.screen { position:fixed; inset:0; }
#connect { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background: radial-gradient(ellipse at 50% 40%, #13204a 0%, #05070f 70%); }
#connect h1 { letter-spacing:.35em; font-weight:800; font-size:clamp(28px,6vw,56px); margin:0; color:#fff; text-shadow:0 0 24px #4fc3f7aa; }
#connect form { display:flex; gap:8px; }
#connect-form { width:min(420px, calc(100vw - 32px)); }
#connect-form input { flex:1; min-width:0; }
/* the one-click path: the biggest thing on the screen */
#play-now { width:min(420px, calc(100vw - 32px)); padding:14px 18px; font-size:18px; font-weight:700; letter-spacing:.04em; color:#04101c;
  background:linear-gradient(180deg, #7fdcff, #3aa8e8); border-color:#9be4ff; box-shadow:0 0 28px #4fc3f755; }
#play-now:hover:not(:disabled) { background:linear-gradient(180deg, #98e4ff, #4fb6f2); }
#play-now:disabled { opacity:.6; }
input, select, button { font:inherit; color:var(--text); background:#0e1630; border:1px solid var(--line); border-radius:6px; padding:8px 12px; }
button { cursor:pointer; background:#1b3a6b; border-color:#2f5da0; }
button:hover:not(:disabled) { background:#24508f; }
button:disabled { opacity:.45; cursor:default; }
#connect-status { color:var(--muted); min-height:1.4em; max-width:min(520px, 90vw); text-align:center; }
#room-line { margin:0; color:var(--muted); }
#room-line b { color:var(--accent); letter-spacing:.2em; }
#room-input { width:9em; text-transform:uppercase; letter-spacing:.15em; }
.loading { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 18, .82); }
.loading-box { text-align: center; padding: 24px 28px; border: 1px solid var(--line); border-radius: 12px; background: #0b1226; min-width: 260px; max-width: 90vw; }
.loading-box p { margin: 0 0 6px; font-size: 16px; }
.loading-box .loading-sub { font-size: 13px; opacity: .75; }
.loading-box button { margin-top: 12px; cursor: pointer; }