/* ── title screen + matchmaking queue ────────────────────────
   Five mode cards used to sit in a 2-column grid, which orphaned the fifth
   in the bottom-left. CAPTURE THE FLAG is now the hero — the tagline already
   names it — with the other four in a 2x2 beneath.                        */

#gate,#queue{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);pointer-events:auto;color:var(--cream);--fg:var(--cream);--fg-2:var(--cream-2);--fg-3:var(--cream-3);
  background:var(--scrim);backdrop-filter:var(--scrim-blur);animation:dimIn .25s var(--ease-out) both}
#gate>*,#queue>*{animation:riseIn var(--d-card) var(--ease-out) both}
#gate>*:nth-child(2),#queue>*:nth-child(2){animation-delay:.05s}
#gate>*:nth-child(3),#queue>*:nth-child(3){animation-delay:.1s}
#gate>*:nth-child(4),#queue>*:nth-child(4){animation-delay:.15s}
#gate>*:nth-child(5){animation-delay:.2s}
#gate>*:nth-child(6){animation-delay:.25s}

.logo{font-size:var(--t-logo);letter-spacing:7px;color:var(--yellow);line-height:1;
  text-shadow:0 7px 0 var(--ink),0 12px 0 var(--ink-a35),0 0 40px rgba(255,217,74,.35);
  animation:bob 4.5s ease-in-out infinite}
.tag{margin-top:-10px;font-size:var(--t-body);font-weight:600;color:var(--cream-2)}

.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);width:min(92vw,560px)}
.mode{min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:14px 18px;font-family:inherit;
  background:var(--cream);color:var(--ink);border:var(--bd) solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--sh-card)}
.mode b{display:block;font-size:var(--t-lead);letter-spacing:.5px;line-height:1.2}
.mode i{display:block;font-style:normal;font-size:var(--t-small);font-weight:600;color:var(--ink-2);
  margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode:not(:disabled):hover{background:var(--yellow);transform:translateY(-4px) rotate(-1deg)}
.mode:not(:disabled):active{transform:translateY(1px);box-shadow:var(--sh-press)}
.mode:disabled{cursor:not-allowed;background:var(--paper);color:var(--ink-3);box-shadow:var(--halo);opacity:.75}
.mode:disabled i{color:var(--ink-3)}
/* the hero: full width, bigger type, the one thing a first-time player clicks */
#btnPractice{grid-column:1/-1;padding:18px 22px}
#btnPractice b{font-size:var(--t-h2)}
#btnPractice i{font-size:var(--t-body)}

/* the name only matters for ONLINE, so it sits under the modes, not above them */
#pname{font-family:inherit;font-size:var(--t-body);font-weight:600;text-align:center;
  padding:10px 14px;width:min(92vw,560px);outline:none;
  background:var(--cream);color:var(--ink);border:var(--bd) solid var(--ink);
  border-radius:var(--r-pill);box-shadow:var(--halo)}
#pname::placeholder{color:var(--ink-3)}
#pname:focus{background:var(--white);box-shadow:var(--focus)}

#me{min-height:18px;font-size:var(--t-small);color:var(--cream-2)}
#board:empty{display:none}
#board{min-width:264px;padding:12px 16px;font-size:var(--t-small);font-weight:600}
#board h3{font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);color:var(--ink-3);
  margin-bottom:8px;text-align:center}
.brow{display:flex;justify-content:space-between;padding:3px 0}
.brow b{color:var(--gold)}

/* queue */
#queue h2{font-size:var(--t-h1);letter-spacing:var(--track-head);color:var(--yellow);
  text-shadow:0 5px 0 var(--ink)}
.spin{width:48px;height:48px;border-radius:50%;border:6px solid var(--cream-a22);
  border-top-color:var(--yellow);animation:whirl .8s linear infinite}
#qstat{font-size:var(--t-body);font-weight:600;color:var(--cream-2)}