/* Tree of Savior Atlas – Kartentisch-Optik wie die anderen Roguard-Atlanten. Nur System-Schriften. */
:root {
  color-scheme: dark;
  --ink: #10171a; --panel: #172126; --panel2: #1d2a30; --line: #2c3c43; --text: #e7e2d4; --mute: #94a5a4; --faint: #5f7070;
  --amber: #f2b23a; --amber-soft: rgba(242, 178, 58, .28); --teal: #5cc5b1; --teal-soft: rgba(92, 197, 177, .22); --red: #e5654f;
  --f-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --f-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--ink); color: var(--text); font: 15px/1.45 var(--f-body); margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
:is(a, button, input, .mk):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.app { display: grid; grid-template-rows: auto 1fr; height: 100%; padding-inline: 16px; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 12px 10px; border-bottom: 1px solid var(--line); }
header h1 { font: 700 24px/1 var(--f-display); font-variant: small-caps; letter-spacing: .03em; margin: 0; white-space: nowrap; }
header h1 a { color: inherit; text-decoration: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 700 14px var(--f-display); font-variant: small-caps; letter-spacing: .05em; color: var(--mute); min-width: 0; }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--amber); }
.crumbs > * + *::before { content: "›"; margin-right: 8px; color: var(--faint); }
.crumbs span { color: var(--text); }
.home { margin-left: auto; font-size: 13px; color: var(--mute); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.lang button { background: var(--panel); border: 0; padding: 5px 10px; cursor: pointer; font: 600 12px var(--f-mono); color: var(--mute); letter-spacing: .06em; }
.lang button + button { border-left: 1px solid var(--line); }
.lang button[aria-pressed="true"] { background: var(--amber); color: #1b1407; }

.main { display: grid; grid-template-columns: 270px minmax(0, 1fr) 360px; gap: 14px; min-height: 0; padding-block: 12px; }
aside, .info { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-height: 0; display: flex; flex-direction: column; }
.sect { padding: 12px 12px 8px; }
input[type=search] { width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; color: var(--text); font: inherit; }
.tabs { display: flex; gap: 4px; margin-top: 8px; }
.tab { flex: 1; padding: 5px 6px; border: 1px solid var(--line); background: var(--panel2); border-radius: 6px; cursor: pointer; font-size: 13px; }
.tab[aria-selected="true"] { border-color: var(--amber); color: var(--amber); }
.list { overflow: auto; padding: 4px 8px 12px; flex: 1; }
.grp { font: 700 12px var(--f-display); font-variant: small-caps; letter-spacing: .06em; color: var(--faint); margin: 10px 6px 2px; }
.row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 4px 6px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--text); text-decoration: none; }
.row:hover { background: var(--panel2); text-decoration: none; }
.row[aria-current="true"], .row[aria-pressed="true"] { background: var(--amber-soft); }
.row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { display: block; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .ct { font: 12px var(--f-mono); color: var(--mute); }
.ic { width: 30px; height: 30px; object-fit: contain; }
.ic.gif { width: 40px; height: 40px; margin: -5px; }   /* GIFs haben Rand um das Modell: etwas groesser, gleicher Platz */
.ic.ph { display: inline-grid; place-items: center; border-radius: 6px; background: var(--panel2); font: 700 11px var(--f-mono); color: var(--faint); }
.lv { font: 500 11px var(--f-mono); border-radius: 4px; padding: 0 5px; background: var(--panel2); color: var(--mute); white-space: nowrap; }

/* Karte */
.stage { position: relative; background: #0b1113; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-height: 300px; touch-action: none; cursor: grab; }
.stage.drag { cursor: grabbing; }
.layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; --iz: 1; }
.layer > img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.zoom { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; flex-direction: column; gap: 4px; }
.zoom button { width: 32px; height: 32px; border: 1px solid var(--line); background: rgba(16, 23, 26, .85); border-radius: 6px; cursor: pointer; font: 700 16px var(--f-mono); }
.toggles { position: absolute; left: 10px; top: 10px; z-index: 5; display: flex; gap: 10px; flex-wrap: wrap; background: rgba(16, 23, 26, .88);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.toggles label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.toggles input { accent-color: var(--amber); }
.status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); pointer-events: none; }

/* Marker: Position in Bildpixeln, Groesse gegen den Zoom ausgeglichen */
.mk { position: absolute; transform: translate(-50%, -50%) scale(var(--iz)); cursor: pointer; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 1px solid rgba(0, 0, 0, .6); }
.dot.boss { width: 15px; height: 15px; background: #ff3b3b; box-shadow: 0 0 0 2px rgba(255, 59, 59, .35); }
.dot.npc { background: var(--teal); }
.dot.dim { opacity: .25; }
.dot.hl { width: 14px; height: 14px; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); z-index: 2; opacity: 1; }
.warp { width: 16px; height: 16px; background: var(--amber); border: 2px solid #1b1407; transform: translate(-50%, -50%) scale(var(--iz)) rotate(45deg); }
.warp.dead { background: var(--faint); cursor: default; }
.pin { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 3px 9px 3px 5px; border-radius: 999px; background: rgba(16, 23, 26, .9);
  border: 1px solid var(--amber); font: 600 13px var(--f-body); color: var(--text); transform: translate(-12px, -50%) scale(var(--iz)); transform-origin: 12px 50%; }
.pin::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); flex: none; }
.pin:hover { background: var(--amber); color: #1b1407; text-decoration: none; }
.pin.city::before { background: var(--teal); }
.pin small { font: 500 11px var(--f-mono); color: var(--mute); }
.pin:hover small { color: #1b1407; }
.hide-mob .dot:not(.npc), .hide-npc .dot.npc, .hide-warp .warp { display: none; }

.tip { position: absolute; z-index: 6; pointer-events: none; background: rgba(12, 18, 20, .95); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 9px; font-size: 13px; max-width: 300px; }
.tip small { display: block; color: var(--mute); font-size: 12px; }

/* Infospalte */
.info { overflow: auto; padding: 14px 16px; display: block; }
.info h2 { font: 700 22px/1.15 var(--f-display); font-variant: small-caps; letter-spacing: .03em; margin: 0 0 4px; }
.info h3 { font: 700 15px var(--f-display); font-variant: small-caps; letter-spacing: .06em; color: var(--mute); margin: 18px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.info p { margin: 6px 0; color: var(--mute); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0; font-size: 14px; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; }
.mobhead { display: flex; gap: 14px; align-items: center; }
.mobhead img { width: 96px; height: 96px; object-fit: contain; }
.mobhead img.gif { width: 128px; height: 128px; margin: -12px -8px -12px -16px; }
table.drops { width: 100%; border-collapse: collapse; font-size: 14px; }
table.drops td { padding: 3px 0; border-bottom: 1px solid var(--line); }
table.drops td:last-child { text-align: right; font-family: var(--f-mono); color: var(--mute); white-space: nowrap; padding-left: 10px; }
.more { background: none; border: 0; color: var(--amber); cursor: pointer; padding: 4px 0; font-size: 13px; }
.note { font-size: 12px; color: var(--faint); margin-top: 18px; }

@media (max-width: 1100px) {
  .main { grid-template-columns: 240px minmax(0, 1fr); }
  .info { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 720px) {
  .app { height: auto; }
  .main { grid-template-columns: minmax(0, 1fr); }
  .stage { height: 62vh; order: -1; }
  aside { max-height: 50vh; }
  .home { margin-left: 0; }
}
.dot.statue { width: 13px; height: 13px; border-radius: 3px; background: #f1e28a; transform: translate(-50%, -50%) scale(var(--iz)) rotate(45deg); }