:root {
  color-scheme: dark;
  --ink: #eef2ff;
  --muted: #94a3b8;
  --panel: rgba(15, 23, 42, .92);
  --line: rgba(148, 163, 184, .22);
  --accent: #67e8f9;
  --accent-2: #a78bfa;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #060b16; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 50% -20%, #243456 0, #0b1325 42%, #060b16 78%); }
button, input, select { font: inherit; }
.hidden { display: none !important; }
/* One screen, no scrolling. The game box is the only flexible row, so the
   chat bar and the footer are always on screen: at 1280x720 the page used to
   run to 904px and put the microphone and the message input below the fold. */
.shell { width: min(1460px, 100%); min-height: 100dvh; margin: 0 auto; padding: 18px;
         display: flex; flex-direction: column; }
.topbar { height: 54px; display: flex; align-items: center; gap: 18px; padding: 0 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .16em; font-size: 15px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #06111d; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 28px rgba(103,232,249,.25); }
.room-pill { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 11px/1 ui-monospace, monospace; letter-spacing: .1em; }
.room-pill strong { color: var(--accent); }
.status { margin-left: auto; color: var(--muted); font-size: 13px; }
.game-wrap { position: relative; aspect-ratio: 16/9; width: auto; max-width: 100%; max-height: calc(100dvh - 210px); margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #0b1222; box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04); }
#game { width: 100%; height: 100%; }
#game canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.lobby-card, .win-card { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 32px)); padding: 34px;
  /* Scroll inside the card rather than spilling out of the game box and over
     the touch controls, which is what a small screen used to do. */
  max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.55); backdrop-filter: blur(18px); }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
h1, h2 { margin: 10px 0 8px; font-size: clamp(30px, 5vw, 48px); line-height: .98; letter-spacing: -.045em; }
.lede { margin: 0 0 26px; color: var(--muted); line-height: 1.5; }
.join-form { display: grid; grid-template-columns: 1fr 1fr .55fr; gap: 12px; }
.join-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
input, select { width: 100%; min-width: 0; padding: 12px 13px; color: var(--ink); background: rgba(2,6,23,.7); border: 1px solid var(--line); border-radius: 10px; outline: none; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(103,232,249,.12); }
.primary { grid-column: 1 / -1; padding: 13px 18px; border: 0; border-radius: 11px; font-weight: 900; color: #06111d; background: linear-gradient(135deg, var(--accent), #a5f3fc); cursor: pointer; box-shadow: 0 10px 30px rgba(103,232,249,.16); }
.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.waiting { margin-top: 22px; }
.share-row { display: flex; gap: 8px; }
.share-row code { flex: 1; overflow: hidden; padding: 11px; border-radius: 9px; color: #c4b5fd; background: rgba(2,6,23,.72); white-space: nowrap; text-overflow: ellipsis; }
.share-row button { border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: rgba(255,255,255,.06); cursor: pointer; }
.roster { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.player-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #dbeafe; font-size: 12px; }
.player-chip i { width: 9px; height: 9px; border-radius: 3px; }
.player-chip em { color: var(--muted); font-style: normal; }
.waiting-note { margin: 13px 0 0; color: var(--muted); font-size: 12px; }
/* Join failures used to be written into .status, in the opposite corner of
   the page from the form — and .status is hidden entirely on mobile, so on a
   phone a rejected join looked like nothing happening at all. */
/* Arriving from the setup page, the room and the team size are already
   decided. Asking for them again is a second form for choices you have made,
   and one of them (team size) a later joiner cannot change anyway. Only the
   name is still an open question. */
.lobby-card.invited #room-field,
.lobby-card.invited #team-field,
.lobby-card.invited .setup-link { display: none; }

.agents-help { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.agents-help summary { cursor: pointer; color: #67e8f9; }
.agents-help p { margin: 10px 0; }
.cmd-row { display: flex; gap: 8px; align-items: stretch; }
.cmd-row code { flex: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #080e1b; font-size: 11px; line-height: 1.5; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cmd-row button { padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }

.setup-link { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.setup-link a { color: #67e8f9; }
.lobby-card.joined .setup-link { display: none; }

.form-error { margin-top: 14px; padding: 10px 12px; border: 1px solid #7f1d1d; border-radius: 10px;
              background: rgba(127,29,29,.22); color: #fecaca; font-size: 13px; }
.form-error:empty { display: none; }

.controls-note { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; color: var(--muted); font-size: 12px; }
.controls-note b { display: inline-block; min-width: 25px; padding: 3px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; color: var(--ink); text-align: center; }
.win-card { width: min(460px, calc(100% - 32px)); text-align: center; }
.win-card p { color: var(--muted); }
.touch-controls { display: none; position: absolute; z-index: 4; inset: auto 16px 16px; pointer-events: none; }
.touch-controls button { width: 60px; height: 60px; margin-right: 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; color: white; background: rgba(15,23,42,.74); font-size: 26px; pointer-events: auto; touch-action: none; }
.touch-controls .jump { float: right; margin: 0; background: rgba(103,232,249,.23); }
.level-banner { position: absolute; z-index: 5; top: 26px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chat-bar { display: grid; gap: 10px; padding: 14px 4px 0; }
.intent-board { display: grid; gap: 4px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2,6,23,.45); }
.intent-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--muted); }
.intent-row i { flex: none; width: 9px; height: 9px; border-radius: 3px; }
.intent-row b { flex: none; font-weight: 700; }
.intent-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-log { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.chat-line { align-self: flex-start; max-width: min(560px, 100%); padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(2,6,23,.6); color: #dbeafe; font-size: 13px; animation: chat-fade 9s forwards; }
.chat-line i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 3px; }
.chat-line b { color: var(--ink); font-weight: 700; }
.chat-line em { color: var(--muted); font-style: normal; }
@keyframes chat-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.chat-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.chat-form .primary { grid-column: auto; padding: 11px 16px; }
.chat-form .mic { padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: rgba(255,255,255,.06); font-size: 16px; cursor: pointer; }
.chat-form .mic.listening { border-color: var(--accent); background: rgba(103,232,249,.22); box-shadow: 0 0 0 3px rgba(103,232,249,.12); }
/* The headline sells the game to somebody who has not joined. After joining,
   the share link and the roster are what matter, and the pitch only pushes
   them down — badly on a phone, where the card then overflows. */
.lobby-card.joined .eyebrow, .lobby-card.joined h1, .lobby-card.joined .lede { display: none; }

.footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; padding: 16px; color: #64748b; font-size: 11px; letter-spacing: .03em; }

@media (max-width: 760px) {
  .shell { padding: 8px; }
  .status { display: none; }
  /* A 16:9 box is 211px tall on a 375px-wide phone, which leaves the lobby
     card scrolling to reach its own Start button and the rest of the screen
     empty. In portrait the box takes the space instead and the canvas
     letterboxes inside it. */
  .game-wrap { border-radius: 16px; aspect-ratio: auto; width: 100%;
               max-height: none; flex: 1 1 auto; min-height: 0; }
  .lobby-card { padding: 20px; }
  .lobby-card .waiting { gap: 12px; }
  /* Nothing here has a keyboard, and the hints wrapped over three lines. */
  .controls-note { display: none; }
  .join-form { grid-template-columns: 1fr 1fr; }
  .join-form label:first-child { grid-column: 1 / -1; }
  .touch-controls { display: block; }
  .footer { display: none; }
}