/* The start overlay: brand, then one of several screens (home, single
   player, online, login, setup, avatar — see client/lobby.js). It covers the canvas
   until the game starts, and gets .busy while a world is being generated. */

#start {
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center;
  background:radial-gradient(120% 90% at 50% 30%, #2c4a3a 0%, #16212b 70%);
  z-index:10; padding:24px;
}

#brand { display:flex; align-items:center; gap:14px; }
#brand img { width:clamp(34px,7vw,54px); height:auto; display:block; }
#start h1 { font-size:clamp(26px,6vw,46px); font-weight:650; letter-spacing:-.02em; }
#start p { max-width:34ch; opacity:.75; font-size:14px; line-height:1.6; }
#start p.keys { font-size:12px; opacity:.5; max-width:40ch; }
#start p.keys b { font-weight:600; opacity:.9; }

/* Who you are, top right. Hidden altogether when there is no server. */
#topbar {
  position:absolute; top:max(14px, env(safe-area-inset-top)); right:18px;
  display:flex; align-items:center; gap:10px; font-size:13px;
}
#topbar[hidden] { display:none; }
#who { opacity:.85; }

/* One screen at a time */
.screen { display:flex; flex-direction:column; align-items:center; gap:16px; width:min(360px,92vw); }
.screen[hidden] { display:none; }
.row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.row[hidden] { display:none; }

/* Avatar picker */
#pickLabel { font-size:11px; text-transform:uppercase; letter-spacing:.14em; opacity:.5; }
#picker { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:min(330px,92vw); }
.card {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px 7px; border-radius:12px; cursor:pointer;
  border:2px solid transparent; background:rgba(255,255,255,.05);
  transition:background .12s, border-color .12s, transform .12s;
}
.card:hover { background:rgba(255,255,255,.10); }
.card.sel { border-color:#8fd6a8; background:rgba(143,214,168,.16); transform:translateY(-2px); }
.card canvas { display:block; width:60px; height:70px; }
.card span { font-size:11px; font-weight:600; opacity:.65; }
.card.sel span { opacity:1; color:#8fd6a8; }

/* Buttons */
#start button {
  font:inherit; font-size:16px; font-weight:600; padding:12px 30px; border-radius:999px;
  border:none; background:#8fd6a8; color:#12251b; cursor:pointer;
}
#start button:active { transform:translateY(1px); }
#start button:disabled { opacity:.35; cursor:not-allowed; }
#start button:disabled:active { transform:none; }
/* The quiet kind: login/logout, back, forgot */
#start button.link {
  background:none; border:0; padding:0; font-size:13px; font-weight:500;
  color:inherit; opacity:.6; text-decoration:underline; border-radius:0;
}
#start button.link:hover { opacity:1; }
#start button.link:active { transform:none; }
.back { margin-top:4px; }

/* Inputs */
#start input {
  padding:9px 11px; border-radius:8px; border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.28); color:inherit; font:inherit; width:100%;
}
#start input::placeholder { color:rgba(255,255,255,.42); }
#start input:focus { outline:none; border-color:#8fd6a8; }
.field { display:flex; flex-direction:column; gap:6px; width:min(280px,92vw); text-align:left; }
.field span { font-size:11px; text-transform:uppercase; letter-spacing:.14em; opacity:.5; }

/* The games list */
.games { list-style:none; width:100%; max-height:min(40vh,320px); overflow-y:auto; }
.games:empty { display:none; }
.games li {
  display:flex; align-items:center; gap:10px; padding:8px 6px 8px 12px;
  border-radius:10px; background:rgba(255,255,255,.05); margin-bottom:6px;
  text-align:left;
}
.games .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:14px; }
.games .meta { font-size:11px; opacity:.5; white-space:nowrap; }
.games .key {
  font-family:ui-monospace, Menlo, Consolas, monospace; letter-spacing:.04em;
  /* The body forbids selection game-wide; the share key is the one thing a
     player needs to copy out. */
  -webkit-user-select:text; user-select:text; cursor:text;
}
#start .games button { font-size:13px; padding:7px 16px; }
/* The bin: quiet until pointed at, so a slip of the finger is not a lost
   island (there is a confirm behind it too). */
#start .games button.del {
  background:none; color:inherit; opacity:.4; padding:7px 8px; display:flex; align-items:center;
}
#start .games button.del:hover { opacity:1; color:#ffb4a8; }
#start p.empty { font-size:13px; opacity:.55; }
#start p.empty.bad { color:#ffb4a8; opacity:1; }

/* Login: two tabs over one form */
.tabs { display:flex; gap:4px; background:rgba(255,255,255,.06); border-radius:999px; padding:3px; }
#start .tabs button {
  background:none; color:inherit; opacity:.6; font-size:13px; padding:6px 18px;
}
#start .tabs button.on { background:#8fd6a8; color:#12251b; opacity:1; }
#accountForm { display:flex; flex-direction:column; gap:8px; align-items:stretch; width:min(280px,92vw); }
#accMsg, #setupMsg, #avatarMsg { margin:0; font-size:12px; }
#accMsg.bad, #setupMsg.bad, #avatarMsg.bad { color:#ffb4a8; }

/* While a world is generating */
#genning { font-size:12px; opacity:0; letter-spacing:.06em; transition:opacity .1s; }
#start.busy #genning { opacity:.7; }
#start.busy button { pointer-events:none; opacity:.3; }

/* Narrow screens: the home screen's two primary buttons stack instead of
   sitting side by side, at a shared pill width rather than edge to edge.
   Only the home row — the picker and the two-button rows elsewhere are
   already short enough. */
@media (max-width: 480px) {
  #scrHome .row { flex-direction:column; align-items:center; width:100%; }
  #scrHome .row button { width:min(220px,100%); white-space:normal; padding-left:18px; padding-right:18px; }
}