/* The gear in the lower left corner, the short menu that unfolds above it,
   and the settings sheet. Nothing here is on screen until the game is. */

#gear {
  position:fixed; left:max(12px, env(safe-area-inset-left));
  bottom:max(12px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  z-index:2;                        /* over the touch pad, like #tileMenu */
}
body:not(.playing) #gear { display:none; }

#gearBtn {
  width:36px; height:36px; display:grid; place-items:center; padding:0;
  border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:rgba(12,20,28,.55); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#eef3f7; cursor:pointer; opacity:.7; transition:opacity .15s, transform .25s;
}
#gearBtn:hover, #gearBtn[aria-expanded="true"] { opacity:1; }
#gearBtn[aria-expanded="true"] { transform:rotate(60deg); }
#gearBtn i {
  width:18px; height:18px; display:block; background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
          mask:var(--icon) center/contain no-repeat;
  --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm7.4 3.5c0-.5 0-.9-.1-1.4l2.1-1.6-2-3.5-2.5 1a7.6 7.6 0 0 0-2.4-1.4L14 2.5h-4l-.5 2.6a7.6 7.6 0 0 0-2.4 1.4l-2.5-1-2 3.5 2.1 1.6a8 8 0 0 0 0 2.8L2.6 15l2 3.5 2.5-1a7.6 7.6 0 0 0 2.4 1.4l.5 2.6h4l.5-2.6a7.6 7.6 0 0 0 2.4-1.4l2.5 1 2-3.5-2.1-1.6c.1-.5.1-.9.1-1.4z'/%3E%3C/svg%3E");
}

/* Unfolds over whatever is stacked above the button (the inspect panel)
   rather than pushing it up: taken out of the column and pinned just above
   the gear. */
#gearMenu {
  position:absolute; left:0; bottom:44px; z-index:1;   /* button height + gap */
  display:flex; flex-direction:column; gap:4px; padding:5px;
  border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(12,20,28,.78); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  animation:gearPop .14s ease-out both;
}
#gearMenu[hidden] { display:none; }
#gearMenu button {
  font:inherit; font-size:13px; font-weight:500; text-align:left;
  padding:8px 14px; border-radius:8px; border:0; background:none;
  color:#eef3f7; cursor:pointer; white-space:nowrap;
}
#gearMenu button:hover { background:rgba(255,255,255,.10); }
#gearMenu button:active { background:rgba(255,255,255,.18); }
#gearQuit { color:#d68f8f; }

@keyframes gearPop {
  from { opacity:0; transform:translateY(6px) scale(.92); }
  to   { opacity:1; transform:none; }
}

/* ── Settings, and the team sheet ─────────────────────────────── */
#settings, #teamPick, .stop {
  position:fixed; inset:0; z-index:8; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(8,12,18,.55);
}
/* The stops — connection lost, island elsewhere, share — sit over everything,
   the gear included: there is nothing else to do until they are answered. */
.stop { z-index:12; background:rgba(8,12,18,.7); }
#settings[hidden], #teamPick[hidden], .stop[hidden] { display:none; }
#settings .sheet, #teamPick .sheet, .stop .sheet {
  width:min(340px,92vw); display:flex; flex-direction:column; gap:16px;
  padding:20px 22px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:rgba(22,33,43,.96); box-shadow:0 12px 32px rgba(0,0,0,.45);
}
#settings h2, #teamPick h2, .stop h2 { font-size:16px; font-weight:650; }
.stop .hint { font-size:13px; opacity:.75; margin:-8px 0 0; line-height:1.45; }
.stop .row { display:flex; justify-content:flex-end; align-items:center; gap:14px; }
.stop .link { font:inherit; font-size:13px; background:none; border:0; color:#eef3f7; opacity:.6; cursor:pointer; }
.stop .link:hover { opacity:1; }
#shareMsg { font-size:13px; color:#e9b46b; margin:-6px 0 0; }
#shareMsg[hidden] { display:none; }
#inviteKey {
  font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:22px;
  letter-spacing:.12em; text-align:center; padding:12px; border-radius:10px;
  background:rgba(255,255,255,.07); user-select:all; margin:0;
}
#inviteMsg { margin:-8px 0 0; }
.toggle { display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:14px; }
.toggle input { margin-top:3px; accent-color:#8fd6a8; width:16px; height:16px; }
.toggle small { display:block; font-size:12px; opacity:.55; }
.range { display:flex; align-items:center; gap:12px; font-size:14px; }
.range span { width:64px; }
.range input { flex:1; accent-color:#8fd6a8; }
#settingsClose, #teamGo, #lostBtn, #elsewhereTake, #shareGo, #inviteClose {
  align-self:flex-end; font:inherit; font-size:14px; font-weight:600;
  padding:8px 22px; border-radius:999px; border:0;
  background:#8fd6a8; color:#12251b; cursor:pointer;
}
#settingsClose:active, #teamGo:active, #lostBtn:active, #elsewhereTake:active, #shareGo:active, #inviteClose:active { transform:translateY(1px); }
#teamGo:disabled, #elsewhereTake:disabled, #shareGo:disabled { opacity:.5; cursor:default; }

/* ── Picking a side (client/teams.js) ─────────────────────────── */
#teamPick .hint { font-size:13px; opacity:.65; margin:-8px 0 0; line-height:1.4; }
#teamList { display:flex; flex-direction:column; gap:2px; }
#teamPick .side {
  display:flex; gap:10px; align-items:center; cursor:pointer; font-size:14px;
  padding:6px 8px; border-radius:8px;
}
#teamPick .side:hover { background:rgba(255,255,255,.06); }
#teamPick .side input[type="radio"] { accent-color:#8fd6a8; width:16px; height:16px; margin:0; }
#teamPick .side i {
  width:14px; height:14px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.18);
}
#teamPick .side i.none { box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
#teamPick .side.new { margin-top:4px; border-top:1px solid rgba(255,255,255,.08); border-radius:0 0 8px 8px; padding-top:10px; }
#teamMsg { font-size:13px; color:#e9b46b; margin:-6px 0 0; }
#teamMsg[hidden] { display:none; }
#teamPick .row { display:flex; justify-content:flex-end; align-items:center; gap:14px; }
#teamLater { font:inherit; font-size:13px; background:none; border:0; color:#eef3f7; opacity:.6; cursor:pointer; }
#teamLater:hover { opacity:1; }
#teamLater[hidden] { display:none; }