#call-controls {
  display: none; position: fixed; top: 16px; left: 16px; z-index: 31;
  max-width: min(520px, calc(100vw - 230px)); pointer-events: none;
}
body.playing #call-controls { display: grid; justify-items: start; gap: 8px; }
#identity-control, #guest-notice { box-sizing: border-box; max-width: 100%; padding: 8px 10px; border-radius: 8px; background: #151a1eed; color: #ddd; font: 11px/1.5 var(--ocr, monospace); overflow-wrap: anywhere; }
#identity-control { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
#identity-control button { flex-shrink: 0; padding: 6px 8px; border: 1px solid #ffffff45; border-radius: 5px; background: transparent; color: #fff; cursor: pointer; font: inherit; }
#identity-control button:focus-visible, #identity-lobby :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#guest-notice { color: #efd6a6; border: 1px solid #d0a76866; }
#guest-notice[hidden], #lobby #identity-lobby [hidden], #identity-error[hidden], #identity-badge[hidden] { display: none; }
#lobby .call-sign-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; min-height:19px; }
#lobby .call-sign-heading .field-label { margin:0; }
#identity-badge { color:#a5c7a8; border:1px solid #a5c7a82e; padding:2px 6px; font:9px/1.5 var(--ocr,monospace); white-space:nowrap; }
#lobby #name { margin-bottom:8px; }
#lobby #identity-lobby { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; margin-bottom:18px; text-align:left; font:10px/1.5 var(--ocr,monospace); }
#identity-account { flex:1 1 205px; color:#777; overflow-wrap:anywhere; }
#lobby #identity-lobby button, #lobby #identity-lobby a { width:auto; background:transparent; padding:5px 0; border:0; font:10px/1.5 var(--ocr,monospace); color:#aaa; text-decoration:none; text-transform:none; white-space:nowrap; }
#lobby #identity-lobby button:hover, #lobby #identity-lobby a:hover { color:#fff; }
#lobby #identity-error { margin: 12px 0 0; font-size: 11px; line-height: 1.5; text-align: left; }
#map-grid { position:relative; margin:0 0 24px; min-height:172px; }
.map-card { position:relative; border:1px solid #ffffff26; background:#070908; outline:none; }
.map-card:focus-visible { outline:1px solid #b1b9b0; outline-offset:3px; }
.map-card-canvas { width:100%; height:144px; cursor:grab; touch-action:pan-y; }
.map-card-canvas.dragging { cursor:grabbing; }
.map-card-label { position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-top:1px solid #ffffff14; font:10px/1.4 var(--ocr,monospace); color:#ccc; }
.map-card-hint { color:#727d74; font-size:9px; text-transform:none; }
#lobby { overflow-y: auto; padding: 24px 0; box-sizing: border-box; align-items: flex-start; }
#lobby .card { flex-shrink: 0; margin: auto; }
#lobby .privacy-details { margin-top: 16px; text-align: left; color: #999; font: 11px/1.5 var(--ocr, monospace); }
#lobby .privacy-details summary { cursor: pointer; }
@media (max-width: 640px) { #identity-control { display: grid; gap: 4px; } #identity-control button { justify-self: start; } }
#call-controls #roster { position: static; max-width: 100%; box-sizing: border-box; }
#ash-status { max-width: 220px; padding: 7px 10px; border-radius: 8px; background: #18221fe6; color: #e9c994; font: 11px/1.45 var(--ocr, monospace); }
#ash-status[hidden] { display: none; }
.call-toggle, #weather-dialog button {
  color: #eee; font: inherit; cursor: pointer;
  border: 1px solid #ffffff38; background: #151a1ee8; border-radius: 8px;
}
.call-toggle {
  pointer-events: auto; padding: 9px 12px; text-align: left; max-width: 100%;
  font: 12px var(--ocr, monospace); min-height: 48px;
}
.call-toggle > span { display: flex; gap: 14px; justify-content: space-between; }
.call-toggle kbd { color: #b9c1c8; font: inherit; }
.call-toggle small { display: block; font-size: 10px; color: #c3c9ce; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#spatial-audio-toggle[aria-checked="false"] { border-color: #f15640; }
#weather-dialog {
  box-sizing: border-box; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 20px; color: #eee; background: #101518;
  border: 1px solid #ffffff38; border-radius: 14px; overflow: auto;
  font: 13px/1.5 var(--ocr, monospace); cursor: auto;
  box-shadow: 0 20px 80px #0009;
  color-scheme: dark; scrollbar-width: thin; scrollbar-color: #58616a #101518;
}
#weather-dialog::backdrop { background: #05090db3; cursor: auto; }
#weather-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#weather-dialog h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
#weather-dialog .weather-close { width: 44px; height: 44px; font-size: 26px; line-height: 1; }
#weather-description { color: #b4bec5; margin: 12px 0 20px; }
.weather-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#weather-dialog .weather-presets button {
  padding: 10px; text-align: left; font-size: 11px; position: relative;
}
#weather-dialog .weather-presets button[aria-pressed="true"] { border-color: #f15640; background: #472b25; }
#weather-dialog .weather-presets button[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: 12px; right: 14px; color: white; text-shadow: 0 1px 4px black;
}
#weather-dialog button:disabled { opacity: 0.65; cursor: default; }
#weather-dialog button:hover:enabled, .call-toggle:hover { border-color: #ffffff80; }
#weather-dialog button:focus-visible, .call-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.weather-swatch { display: block; height: 28px; margin-bottom: 7px; border-radius: 4px; background: linear-gradient(#507b9d, #c6d3d6); }
[data-preset="golden"] .weather-swatch { background: linear-gradient(#728a9c, #e9bb7d, #d08b4c); }
[data-preset="clear"] .weather-swatch { background: linear-gradient(#386b9e, #b9d5e2); }
[data-preset="partly-cloudy"] .weather-swatch { background: linear-gradient(165deg, #b0bdc6, #6898b9 45%, #dce0df); }
[data-preset="overcast"] .weather-swatch { background: linear-gradient(#89969e, #d0d3d3); }
[data-preset="light-rain"] .weather-swatch { background: repeating-linear-gradient(110deg, transparent 0 12px, #cddbe033 13px 14px), linear-gradient(#61717d, #a6b4bb); }
[data-preset="heavy-rain"] .weather-swatch { background: repeating-linear-gradient(110deg, transparent 0 8px, #cddbe055 9px 10px), linear-gradient(#384958, #778d9d); }
[data-preset="dusk"] .weather-swatch { background: linear-gradient(#253758, #61758c, #d5ad9c); }
[data-preset="white-night"] .weather-swatch { background: linear-gradient(#677b9b, #adb8c9, #d4bec0); }
[data-preset="aurora"] .weather-swatch { background: linear-gradient(140deg, #0d1f32 15%, #3a9d78 48%, #265e69 57%, #142c42 80%); }
#weather-dialog .weather-status { color: #b4bec5; font-size: 11px; min-height: 33px; margin: 16px 0; overflow-wrap: anywhere; }
#weather-dialog .weather-done { width: 100%; padding: 12px; }
@media (max-width: 640px), (pointer: coarse) {
  #call-controls { top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); max-width: calc(100vw - 216px); }
  .call-toggle kbd { display: none; }
  #weather-dialog { padding: 18px; }
}