/* Karte: Bild im Hochformat, so breit wie der Bildschirm, mit Scrollen nach oben. Größen in cqw = Prozent der Kartenbreite. */
.map-holder { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.zones { display: flex; gap: 6px; padding: 10px 12px 10px; flex: none; overflow-x: auto; justify-content: center; }
.zone { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--panel-edge); font-weight: 900; white-space: nowrap; } .zone.on { background: var(--gold-grad); color: var(--accent-ink); border-color: transparent; box-shadow: 0 3px 0 #8a5410; } .zone.lock { opacity: .7; }
.map-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: #000; }
.map-stage { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; container-type: inline-size; overflow: hidden; }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.map-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.theme-wueste .map-fx { mix-blend-mode: normal; }
.cloud-shadow { position: absolute; inset: -20% -60%; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: radial-gradient(40% 12% at 20% 25%, #00142080, transparent 70%), radial-gradient(34% 10% at 60% 55%, #00142070, transparent 70%), radial-gradient(44% 12% at 35% 85%, #00142070, transparent 70%);
  animation: clouds 70s linear infinite; }
@keyframes clouds { from { transform: translateX(-12%); } to { transform: translateX(22%); } }

.node { position: absolute; transform: translate(-50%, -50%); width: clamp(36px, 8cqw, 66px); aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; background: radial-gradient(circle at 30% 25%, #6c8f99, #2c4650); color: #fff; font-weight: 900; font-size: clamp(14px, 3.4cqw, 26px); box-shadow: 0 4px 0 #0007, 0 6px 14px #0007; z-index: 3; }
.node-n { line-height: 1; text-shadow: 0 2px 0 #0007; }
.node .stars { position: absolute; bottom: -6px; filter: drop-shadow(0 1px 1px #000); } .node .stars .star { font-size: clamp(9px, 2cqw, 15px); } .node .stars .star:not(.on) { color: #1a2a30; }
.node-lock { position: absolute; bottom: -2px; font-size: clamp(10px, 2.4cqw, 16px); }
.node.open { background: radial-gradient(circle at 30% 25%, #ffd986, #e09a1f); border-color: #fff; color: #3a2606; }
.node.done { background: radial-gradient(circle at 30% 25%, #8de8b7, #1f9d62); border-color: #fff; }
.node.locked { filter: grayscale(.9) brightness(.7); }
.node.boss { width: clamp(48px, 12cqw, 92px); border-color: #ffd54a; background: radial-gradient(circle at 30% 25%, #ff9a8a, #b8332a); font-size: clamp(20px, 6cqw, 40px); }
.node.boss.locked { filter: grayscale(.8) brightness(.7); } .node.boss.done { background: radial-gradient(circle at 30% 25%, #ffe08a, #c98a10); }
.node.cur { animation: pulse 1.4s ease-in-out infinite; z-index: 5; }
@keyframes pulse { 0%, 100% { box-shadow: 0 4px 0 #0007, 0 0 0 0 #ffd54acc; } 50% { box-shadow: 0 4px 0 #0007, 0 0 0 clamp(8px, 2.4cqw, 16px) #ffd54a00; } }
.node.static { container-type: normal; font-size: 22px; width: 100%; }
.node-friends { position: absolute; transform: translate(40%, -150%); display: flex; z-index: 4; pointer-events: none; } .node-friends .avatar { margin-inline-end: -8px; } .node-friends .more { font-style: normal; font-size: 12px; font-weight: 800; background: #000a; border-radius: 10px; padding: 1px 5px; margin-inline-start: 10px; align-self: center; }
.walker { position: absolute; transform: translate(-50%, -135%); transition: left 1.3s ease-in-out, top 1.3s ease-in-out; z-index: 6; pointer-events: none; filter: drop-shadow(0 4px 3px #0008); }
.walker .avatar { animation: hop 1s ease-in-out infinite; border-color: #fff; } @keyframes hop { 50% { transform: translateY(-7px); } }

.lvl-sheet { display: flex; flex-direction: column; gap: 14px; } .lvl-head { display: flex; align-items: center; gap: 14px; } .lvl-head b { font-size: 1.3rem; display: block; }
.lvl-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 900; background: radial-gradient(circle at 30% 25%, #ffd986, #e09a1f); color: #3a2606; border: 3px solid #fff8; flex: none; } .lvl-head.boss .lvl-badge { background: radial-gradient(circle at 30% 25%, #ff9a8a, #b8332a); color: #fff; }
.facts { margin: 0; display: flex; flex-direction: column; gap: 8px; } .facts > div { display: flex; justify-content: space-between; align-items: center; } .facts dt { color: var(--muted); } .facts dd { margin: 0; font-weight: 800; }
.friend-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .friend-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: var(--surf2); border-radius: 999px; }