/* Join screen */
  #join {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    /* `safe center` keeps the content vertically centered when it fits, but
       falls back to top-aligned when it overflows — otherwise plain `center`
       clips the top of a tall page and you can't scroll up to it. */
    align-items: center; justify-content: safe center; gap: 28px; padding: 24px;
    overflow-y: auto;
    background: radial-gradient(1200px 600px at 50% -10%, #16233f, #0a0f1a);
  }
  .hero { text-align: center; max-width: 560px; }
  .hero h1 { margin: 0 0 10px; font-size: 40px; letter-spacing: -1px; }
  .hero p { margin: 0; color: #9fb0d0; line-height: 1.55; }
  .hero b { color: #cfe0ff; }

  .panels {
    display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap;
    justify-content: center; width: 100%; max-width: 840px;
  }
  .card {
    background: rgba(16,26,46,0.72); border: 1px solid #223255; border-radius: 16px;
    padding: 22px; backdrop-filter: blur(6px); flex: 1 1 360px; min-width: 290px;
  }
  .card h2 { margin: 0 0 16px; font-size: 16px; display: flex; align-items: center; gap: 8px; }

  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .field span { font-size: 13px; color: #9fb0d0; }
  .field input {
    padding: 11px 13px; border-radius: 10px; border: 1px solid #2a3a5e;
    background: #0e1726; color: #fff; font-size: 15px; width: 100%;
  }
  .field input:focus { outline: none; border-color: #5aa6ff; }

  .check {
    display: flex; align-items: center; gap: 9px; font-size: 14px;
    color: #c3d2ee; margin-bottom: 18px; cursor: pointer;
  }
  .check input { width: 16px; height: 16px; accent-color: #5aa6ff; }

  .actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .primary {
    padding: 12px 20px; border-radius: 10px; border: 0; cursor: pointer;
    background: #5aa6ff; color: #06122a; font-weight: 700; font-size: 15px;
  }
  .primary:hover:not(:disabled) { background: #79b8ff; }
  .primary:disabled { background: #2a3a5e; color: #6b7aa0; cursor: not-allowed; }
  /* Fields that are pointless until you sign in (enforced-auth guest state). */
  .field input:disabled, .check input:disabled, .ghost:disabled { opacity: .45; cursor: not-allowed; }
  .check:has(input:disabled) { color: #6b7aa0; cursor: not-allowed; }
  .ghost {
    padding: 12px 16px; border-radius: 10px; cursor: pointer; font-size: 14px;
    font-weight: 600; background: #11203a; color: #dce7fb; border: 1px solid #2a3a5e;
  }
  .ghost:hover { background: #1a2c4d; }
  .muted { margin: 16px 0 0; font-size: 12.5px; color: #6b7aa0; line-height: 1.5; }

  .pill {
    font-size: 12px; font-weight: 700; color: #06122a; background: #5aa6ff;
    border-radius: 999px; padding: 1px 8px; min-width: 18px; text-align: center;
  }
  .pill:empty { display: none; }

  /* Avatar builder */
  .avatar-build { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
  #avatarPreview {
    width: 76px; height: 76px; flex: none; border-radius: 14px; background: #0e1726;
    border: 1px solid #2a3a5e;
  }
  .opts { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .opt-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .opt-row > .lbl { font-size: 11px; color: #6b7aa0; width: 64px; flex: none; white-space: nowrap; }
  .sw {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 0;
  }
  .sw.sel { border-color: #fff; }
  .chip {
    min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px; cursor: pointer;
    border: 1px solid #2a3a5e; background: #0e1726; font-size: 15px; line-height: 1;
  }
  .chip.sel { border-color: #5aa6ff; background: #16233f; }

  #roomList { display: flex; flex-direction: column; gap: 8px; }
  .room-row { display: flex; gap: 6px; }
  .room-item {
    flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-radius: 10px; cursor: pointer;
    background: #0e1726; border: 1px solid #223255; color: #e8eefc;
    font-size: 14px; text-align: left; font-family: inherit; min-width: 0;
  }
  .room-item:hover { background: #15233d; border-color: #2f4673; }
  .room-item .rname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .room-item .rcount { color: #9fb0d0; font-size: 13px; white-space: nowrap; }
  .room-del {
    flex: none; width: 40px; border-radius: 10px; cursor: pointer; font-size: 15px;
    background: #2a1420; border: 1px solid #5e2a36; color: #ffd7df;
  }
  .room-del:hover { background: #3a1622; }
  #roomList .empty { color: #6b7aa0; font-size: 13px; text-align: center; padding: 18px 4px; }

  /* Official rooms directory: team rows with their squads collapsed underneath. */
  #officialRoomsList { display: flex; flex-direction: column; gap: 8px; }
  .squad-group { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .squad-group[hidden] { display: none; }
  #officialRoomsList .squad-row { margin-left: 18px; }
  #officialRoomsList .squad-row .room-item { font-size: 13px; padding: 9px 12px; background: #0c1320; }
  .badge-official { color: #5aa6ff; margin-right: 7px; font-size: 11px; vertical-align: middle; }
  /* Caret toggle that expands/collapses a team's squads. */
  .room-toggle {
    flex: none; display: flex; align-items: center; gap: 5px; padding: 0 11px;
    border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
    background: #11203a; color: #9fb0d0; border: 1px solid #223255;
  }
  .room-toggle:hover { background: #1a2c4d; color: #cfe0ff; }
  .room-toggle .caret { display: inline-block; transition: transform .12s ease; font-size: 11px; }
  .room-toggle.open .caret { transform: rotate(90deg); }

  /* ---- Google sign-in row (optional identity layer) ---- */
  #authRow { margin: 2px 0 4px; }
  /* Persistent "sign-in required" notice on the join card (enforced auth). */
  .auth-notice {
    margin: 0 0 12px; padding: 10px 13px; border-radius: 10px; font-size: 13.5px;
    line-height: 1.5; color: #cfe0ff; background: #14233f; border: 1px solid #2f4673;
  }
  /* Dismissible sign-in failure (?auth=denied / ?auth=error). */
  .auth-error {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 12px; padding: 10px 13px; border-radius: 10px; font-size: 13.5px;
    line-height: 1.5; color: #ffd7df; background: #2a1420; border: 1px solid #5e2a36;
  }
  .auth-error[hidden] { display: none; }
  .auth-error .dismiss {
    flex: none; margin-left: auto; padding: 0 6px; border: 0; background: none;
    color: #ffd7df; cursor: pointer; font-size: 15px; line-height: 1.4;
  }
  /* Attention pulse on the sign-in card when a guest tries to enter (room
     click / Enter key) while sign-in is required. */
  .auth-flash { animation: authFlash 1.2s ease; }
  @keyframes authFlash {
    0%, 100% { box-shadow: none; }
    25%, 60% { box-shadow: 0 0 0 3px #5aa6ff; }
  }
  .auth-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px; font-size: 14px;
    border: 1px solid #223255; background: #0e1726; color: #e8eefc;
    text-decoration: none; box-sizing: border-box;
  }
  .auth-google { cursor: pointer; justify-content: center; font-weight: 600; }
  .auth-google:hover { background: #15233d; border-color: #2f4673; }
  .auth-google .g {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    background: #fff; color: #4285f4; font-weight: 800; font-size: 14px;
  }
  .auth-in { justify-content: space-between; }
  .auth-who { color: #7ee0a8; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth-btn { flex: none; padding: 6px 12px; font-size: 13px; }