/* ===== Welt-Erweiterung: Standort 6-14 (js/ui.js openWorldMap / openExpansionPreview) ===== */

/* ---------- Weltkarte: Schilder der neuen Inseln ---------- */
.dc-world-island > span {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px;
  align-items: center; width: max-content; padding: 7px 14px 7px 8px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 34, 52, .96), rgba(6, 20, 32, .96));
  border: 2px solid rgba(160, 230, 255, .55); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  color: #fff; text-align: left;
}
.dc-world-island img { grid-row: 1 / 3; width: 30px; height: 30px; object-fit: contain; }
.dc-world-island b { font-size: 14px; letter-spacing: 1.5px; line-height: 1.1; }
.dc-world-island small { font-size: 9px; font-weight: 800; letter-spacing: .8px; color: #a9d8ea; }
.dc-world-island.is-harbor > span { border-color: #7fd3ff; }
.dc-world-island.is-ember > span { border-color: #ff9a4a; background: linear-gradient(180deg, rgba(58, 24, 12, .96), rgba(32, 12, 8, .96)); }
.dc-world-island.is-ember small { color: #ffc89a; }
.dc-world-island.is-frost > span { border-color: #9ff5d4; background: linear-gradient(180deg, rgba(16, 38, 58, .96), rgba(10, 24, 40, .96)); }
.dc-world-island.is-frost small { color: #b4f5df; }
.dc-world-island.is-mirage > span { border-color: #ffd27a; background: linear-gradient(180deg, rgba(74, 44, 18, .96), rgba(46, 26, 10, .96)); }
.dc-world-island.is-mirage small { color: #ffe2a8; }
.dc-world-new {
  position: absolute; right: -10px; top: -10px; padding: 3px 7px; border-radius: 999px;
  background: linear-gradient(180deg, #ffd23f, #f59e0b); color: #3b2300;
  font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: 1px;
  animation: xp-new-bounce 1.6s ease-in-out infinite;
}
@keyframes xp-new-bounce { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
.dc-world-node.is-expansion.locked { filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); opacity: 1; }
.dc-world-node.is-expansion.locked .dc-world-pin { background: #34506a; border-color: #9fd8ff; }
.dc-world-node.is-expansion.locked .dc-world-label small { color: #9fe4ff; }
@media (max-height: 520px), (max-width: 760px) {
  .dc-world-island > span { padding: 5px 10px 5px 6px; border-radius: 10px; column-gap: 6px; }
  .dc-world-island img { width: 22px; height: 22px; }
  .dc-world-island b { font-size: 10px; }
  .dc-world-island small { font-size: 7px; }
}

/* ---------- Vorschau-Fenster einer neuen Karte ---------- */
.xp-hero { background: #0b1a28; }
.xp-hero img { display: block; width: 100%; height: 230px; object-fit: cover; }
@media (orientation: landscape) and (max-height: 560px) { .xp-hero img { height: 160px; } }
.xp-stages { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; padding: 0; }
.xp-stages li {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 9px 8px;
  border: 2px solid #dbe3ee; border-radius: 12px; background: #fff; cursor: pointer;
}
.xp-stages li.is-current { border-color: #1688bd; background: #eef8ff; cursor: default; }
.xp-stages li i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #56616a; color: #fff; font-style: normal; font-weight: 900; font-size: 11px;
}
.xp-stages li.is-open i { background: #168d43; }
.xp-stages li.is-current i { background: #1688bd; }
.xp-stages li b { font-size: 11.5px; color: var(--text); line-height: 1.15; }
.xp-stages li small { font-size: 10px; color: var(--text-dim); }
.xp-stages li em { position: absolute; right: 8px; top: 9px; font-style: normal; font-size: 10px; font-weight: 900; color: #3b5673; }
.xp-actions { display: flex; gap: 8px; }
.xp-actions .btn { flex: 1; padding: 13px 0; font-size: 14px; letter-spacing: .5px; }
.xp-peek { background: linear-gradient(180deg, #2fb8ff, #1478c8); }

/* ---------- Ankuendigung (einmalig fuer alle) ---------- */
.xp-intro h2 { margin: 6px 0 4px; font-size: 21px; color: var(--text); }
.xp-intro > p { margin: 0 0 12px; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.xp-maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.xp-map {
  position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: #0b1a28; aspect-ratio: 3 / 4; box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  animation: xp-map-in .5s ease both;
}
.xp-map:nth-child(2) { animation-delay: .12s; }
.xp-map:nth-child(3) { animation-delay: .24s; }
@keyframes xp-map-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.xp-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.xp-map:hover img { transform: scale(1.06); }
.xp-map span {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 24px 8px 8px; background: linear-gradient(180deg, transparent, rgba(4, 12, 20, .92));
  color: #fff; text-align: left;
}
.xp-map b { font-size: 13px; }
.xp-map small { font-size: 9px; font-weight: 800; letter-spacing: .8px; color: #bfe6f7; }
.xp-map em {
  position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 999px;
  background: rgba(6, 14, 26, .78); color: #9fe4ff; font-size: 8.5px; font-style: normal; font-weight: 900; letter-spacing: .6px;
}
.xp-map.is-ember small { color: #ffc89a; }
.xp-map.is-frost small { color: #b4f5df; }
.xp-map.is-mirage small { color: #ffe2a8; }
.xp-unlocked {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #e9f9ef; border: 1px solid #a8e6bf;
  color: #1c5b34; font-size: 12.5px;
}
.xp-weekly {
  display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px;
  background: linear-gradient(135deg, #1d2c57, #3a5b9a); color: #fff; margin-bottom: 4px;
}
.xp-weekly img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.xp-weekly div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.xp-weekly b { font-size: 14px; }
.xp-weekly small { font-size: 11px; line-height: 1.35; color: #d5e2ff; }
.xp-weekly .ev-kicker { color: #ffd23f; }

/* ---------- Tour durch einen gesperrten Standort ---------- */
#game-root.is-sneak-peek #player-visit-skins,
#game-root.is-sneak-peek #player-visit-bar p { display: none; }
#game-root.is-sneak-peek #player-visit-bar small { color: #ffd23f; }

/* ===== Wochen-Minigames (js/minigame-ui.js, js/minigame-map.js) ===== */
.mgmap-tile.is-coming .mgmap-card img { filter: saturate(.75) brightness(.85); }
.mgmap-tile.is-coming .mgmap-ball { --c1: #ffe68a; --c2: #f0b41c; --c3: #a87806; }
.mgmap-tile.is-coming .mgmap-name { background: linear-gradient(180deg, #5f7fc8, #34508f); box-shadow: 0 3px 0 #233a6b, 0 6px 10px rgba(0,0,0,.25); }
.mgmap-reward { display: block; margin: 2px 0 6px; color: #8a5a00; font-weight: 800; }
.mg-week-reward { margin-bottom: 12px; }
.mg-week-reward.is-pending { cursor: pointer; box-shadow: 0 0 0 3px #ffd23f; animation: xp-pending 1.6s ease-in-out infinite; }
@keyframes xp-pending { 0%, 100% { box-shadow: 0 0 0 3px #ffd23f; } 50% { box-shadow: 0 0 0 6px rgba(255, 210, 63, .35); } }
.dc-world-island.is-soon > span { opacity: .92; border-style: dashed; }
.dc-world-island.is-soon small { color: #ffd23f; }