@import url('./vendor/leaflet.css');
#s4map, .s4map { position: relative; min-height: 400px; width: 100%; border-radius: 10px; background: #12151a; }
.view-tabs { display: flex; gap: 6px; margin: 8px 0; }
.view-tabs button { background: #1b1e24; color: #ddd; border: 1px solid #3a404a; border-radius: 8px; padding: 6px 12px; font: 600 12px system-ui,sans-serif; cursor: pointer; }
.view-tabs button.on { background: #2a1a10; border-color: #c9a227; color: #f0d27a; }
.profile-wrap[hidden], #playerProf[hidden], #s4map[hidden], #playerWx[hidden] { display: none !important; }
#s4map:not([hidden]), .s4map:not([hidden]) { display: block !important; min-height: 420px; }
#playerWx:not([hidden]) { display: block !important; }
#playerWx { padding: 8px 4px; font: 13px/1.45 system-ui,sans-serif; color: #ddd; min-height: 200px; }
#playerWx .row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #2a2e36; }
#playerWx .meta { color: #8ab4d4; }
.s4wx { display:flex; align-items:center; gap:6px; background:#12151acc; border:1px solid #3a404a; border-radius:8px; padding:3px 7px 3px 5px; color:#eee; font:700 11px/1.1 system-ui,sans-serif; }
.s4wx span { font-weight:500; color:#9aa3ad; margin-left:3px; }
.s4-map-bases {
  position: absolute; top: 8px; right: 8px; z-index: 1100;
  display: flex; align-items: stretch; gap: 0;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(18, 21, 26, .55);
  font: 700 11px/1 system-ui, sans-serif;
  pointer-events: auto;
}
.s4-map-bases button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: #9aa3ad; padding: 5px 8px; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: .02em; border-radius: 0;
}
.s4-map-bases button + button { box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
.s4-map-bases button.on { color: #c8102e; border-bottom-color: #c8102e; }
.s4-mark { background:none; border:none; }
.s4-mark-plate { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 12px/1 system-ui,sans-serif; box-shadow:0 1px 4px #0008; }
.s4m-kom .s4-mark-plate { background:#c8102e; color:#fff; border:2px solid #fff; }
.s4m-sp .s4-mark-plate { background:#1f8a4c; color:#fff; border:2px solid #fff; }
.s4m-fin .s4-mark-plate { background:#111; border:2px solid #fff; border-radius:4px; width:28px; height:28px; }
.s4m-start .s4-mark-plate { background:#1f8a4c; border:2px solid #fff; border-radius:4px; width:28px; height:28px; }
.s4m-hot .s4-mark-plate { background:#c9a227; color:#111; border:2px solid #fff; }
.s4m-tt .s4-mark-plate { background:#e3b341; color:#3a2a00; border:2px solid #fff; }