:root { --bg: #15171c; --panel: rgba(21, 23, 28, .88); --line: rgba(255, 255, 255, .12); --text: #e8e8ea; --dim: #9a9ca3; --accent: #5fb3ff; --ok: #5bd18b; --bad: #ff7676; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; overflow: hidden; }
#map { position: absolute; inset: 0; background: #000; }
.leaflet-container { background: transparent; font: inherit; }
.leaflet-tile { image-rendering: pixelated; image-rendering: crisp-edges; }
.leaflet-control-zoom a { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; }

#bar { position: absolute; top: 12px; left: 60px; right: 12px; display: flex; gap: 8px; align-items: center; z-index: 1000; pointer-events: none; flex-wrap: wrap; }
#worlds { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; pointer-events: auto; }
#worlds button { border: 0; background: transparent; color: var(--dim); padding: 6px 12px; border-radius: 7px; font: inherit; cursor: pointer; }
#worlds button.on { background: var(--accent); color: #06121f; font-weight: 600; }
#worlds button:disabled { opacity: .45; cursor: not-allowed; }
#status { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: var(--dim); }
#status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--bad); vertical-align: 1px; }
#status.on::before { background: var(--ok); }

#panel { position: absolute; top: 60px; right: 12px; width: 200px; max-height: calc(100% - 120px); z-index: 1000; display: flex; flex-direction: column; }
#toggle { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 7px 10px; font: inherit; text-align: left; cursor: pointer; }
#players { list-style: none; margin: 6px 0 0; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow-y: auto; }
#players:empty { display: none; }
#panel.closed #players { display: none; }
#players li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
#players li:hover { background: rgba(255, 255, 255, .08); }
#players li img { width: 20px; height: 20px; image-rendering: pixelated; border-radius: 3px; }
#players li .w { margin-left: auto; color: var(--dim); font-size: 11px; }

#coords { position: absolute; left: 12px; bottom: 12px; z-index: 1000; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font: 12px ui-monospace, Consolas, monospace; color: var(--dim); }
#coords:empty { display: none; }

.pm { transition: transform .95s linear; }
.zooming .pm { transition: none !important; }
.pm img { width: 24px; height: 24px; display: block; image-rendering: pixelated; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); background: #555; }
.pm span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }

@media (max-width: 600px) {
  #bar { left: 52px; }
  #panel { width: 160px; }
  #panel.closed #players, #panel:not(.open) #players { display: none; }
}

/* ── 왼쪽 사이드 탭 ── */
#side { position: absolute; top: 0; left: 0; bottom: 0; z-index: 1100; display: flex; pointer-events: none; }
#sideToggle { pointer-events: auto; position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 18px; cursor: pointer; z-index: 2; }
#sideBody { pointer-events: auto; width: 230px; height: 100%; padding: 60px 14px 14px; background: var(--panel); border-right: 1px solid var(--line); backdrop-filter: blur(6px); transition: transform .2s ease; }
#side.closed #sideBody { transform: translateX(-100%); }
#sideBody h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--dim); letter-spacing: .02em; }
.opt { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.opt:hover { background: rgba(255, 255, 255, .06); }
.opt input { grid-row: span 2; width: 16px; height: 16px; accent-color: var(--accent); }
.opt small { color: var(--dim); font-size: 11px; }
.opt.disabled { opacity: .5; cursor: not-allowed; }
.opt.disabled:hover { background: transparent; }
#side:not(.closed) ~ #bar { left: 258px; }
@media (max-width: 600px) { #sideBody { width: 200px; } #side:not(.closed) ~ #bar { left: 60px; top: 56px; } }
#side:not(.closed) ~ #coords { left: 242px; }