/* ===== Minigame-Karte (js/minigame-map.js), Candy-Crush-Stil ===== */
.mgmap { position: relative; width: 100%; margin: 4px 0; overflow: hidden; border-radius: 18px; background: #151a24;
  box-shadow: 0 6px 18px rgba(20,20,40,.25); }
/* Hintergrund: Ausschnitt der echten Level-Karte, oben/unten weich überblendet */
.mgmap-band { position: absolute; left: 0; right: 0; background: #1b2130 center / cover no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%); }
.mgmap-band:first-child { -webkit-mask: linear-gradient(180deg, #000 calc(100% - 70px), transparent 100%);
  mask: linear-gradient(180deg, #000 calc(100% - 70px), transparent 100%); }
.mgmap-band.is-dim { filter: grayscale(.6) brightness(.6); }
.mgmap-parallax { display: none; }
.mgmap-road { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.mgmap-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mgmap-road .r-shadow { stroke: rgba(0,0,0,.4); stroke-width: 26px; transform: translateY(5px); }
.mgmap-road .r-base { stroke: #3b3f47; stroke-width: 20px; }
.mgmap-road .r-stripe { stroke: #e9c046; stroke-width: 3px; stroke-dasharray: 10 12; }
.mgmap-road .r-done { stroke: #4a5160; stroke-width: 20px; }
.mgmap-road .r-done-stripe { stroke: #7be38a; stroke-width: 3.5px; stroke-dasharray: 10 12; }

/* Level-Kachel: Vorschaubild mit weißem Rahmen, Knopf (Blender) oben links, Namensschild darunter */
.mgmap-tile { position: absolute; z-index: 4; width: 132px; margin: -74px 0 0 -66px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; justify-items: center; }
.mgmap-card { position: relative; width: 112px; height: 112px; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: #262c38; box-shadow: 0 0 0 3px #fff, 0 10px 18px rgba(0,0,0,.45); transition: transform .12s; }
.mgmap-card img { width: 100%; height: 100%; object-fit: cover; }
.mgmap-card em { font-style: normal; font-size: 46px; font-weight: 900; color: rgba(255,255,255,.7); }
.mgmap-tile:active .mgmap-card { transform: scale(.96); }
.mgmap-lock { position: absolute; right: 7px; bottom: 6px; font-style: normal; font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.mgmap-tile.is-locked .mgmap-card img, .mgmap-tile.is-soon .mgmap-card, .mgmap-tile.is-coming .mgmap-card img { filter: grayscale(.8) brightness(.7); }
.mgmap-tile.is-open .mgmap-card { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #f2c230, 0 10px 18px rgba(0,0,0,.45); }
.mgmap-tile.is-open { animation: mgmap-bob 2.6s ease-in-out infinite; }
@keyframes mgmap-bob { 50% { transform: translateY(-5px); } }
.mgmap-ball { position: absolute; top: -18px; left: -2px; z-index: 2; width: 50px; height: 45px; display: grid; place-items: center;
  background: center / contain no-repeat; color: #fff; font-weight: 900; font-size: 17px; line-height: 1;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.35)); }
.mgmap-ball b { position: relative; top: -5px; -webkit-text-stroke: 4px var(--rim); paint-order: stroke fill; text-shadow: 0 2px 0 var(--rim); }
.mgmap-star { position: absolute; bottom: -6px; right: -6px; width: 20px; height: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.mgmap-name { margin-top: 10px; padding: 4px 10px; border-radius: 9px; color: #fff; font-size: 12px; font-weight: 900; white-space: nowrap;
  background: rgba(14,18,28,.88); border: 1.5px solid rgba(255,255,255,.18); box-shadow: 0 4px 10px rgba(0,0,0,.35);
  display: grid; justify-items: center; line-height: 1.2; }
.mgmap-name small { font-size: 9.5px; font-weight: 800; color: #b9c4d2; }
.mgmap-tile.is-won .mgmap-name { border-color: #5fe08a; }
.mgmap-tile.is-won .mgmap-name small { color: #7be38a; }
.mgmap-tile.is-open .mgmap-name { border-color: #f2c230; }

.mgmap-deco { position: absolute; transform: translate(-50%, -60%); filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.mgmap-flame { position: absolute; width: 26px; height: 36px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 80%, #fff3a0 0 18%, #ffb02e 40%, #ff4a1a 68%, transparent 72%);
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; animation: mgmap-flick .5s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes mgmap-flick { to { transform: translate(-50%, -56%) scale(1.15, .9); filter: brightness(1.25); } }
.mgmap-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.85);
  box-shadow: 0 0 12px 4px rgba(255,255,255,.5); animation: mgmap-twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes mgmap-twinkle { 50% { transform: scale(.4); opacity: .3; } }

.mgmap-you { position: absolute; z-index: 6; display: grid; justify-items: center; width: 80px; margin: -78px 0 0 -40px; pointer-events: none;
  animation: mgmap-float 2.2s ease-in-out infinite; }
.mgmap-you img { height: 64px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.mgmap-you span { margin-top: -4px; padding: 2px 8px; border-radius: 99px; background: #1f8fff; color: #fff; font-size: 9.5px; font-weight: 900; }
.mgmap-more { position: absolute; left: 50%; z-index: 3; transform: translateX(-50%); padding: 8px 14px; border-radius: 14px;
  background: rgba(255,255,255,.9); color: #4b4060; font-size: 11px; text-align: center; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.2); }

.mgmap-sheet { position: absolute; left: 10px; right: 10px; z-index: 10; display: grid; grid-template-columns: 72px 1fr; gap: 10px;
  padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(15,20,40,.4); }
.mgmap-sheet[hidden] { display: none; }
.mgmap-sheet img, .mgmap-sheet > em { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: #2a3039;
  display: grid; place-items: center; font-style: normal; font-size: 32px; font-weight: 900; color: #fff; }
.mgmap-sheet b { display: block; font-size: 15px; color: #2a2140; }
.mgmap-sheet p { margin: 2px 0 4px; font-size: 12px; color: #5d6372; line-height: 1.35; }
.mgmap-sheet small { display: block; font-size: 11px; font-weight: 800; color: #23a650; }
.mgmap-sheet .mgmap-why { color: #b07a00; }
.mgmap-sheet .btn { margin-top: 6px; width: 100%; }
.mgmap-tag { font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #e0517f; }

/* Gesperrte Vorschau */
.mgmap.is-locked .mgmap-tile { animation: none; }
.mgmap-gate { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 12; padding: 12px 14px; border-radius: 16px; text-align: center;
  background: rgba(20,24,32,.92); color: #eef3f8; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.mgmap-gate b { font-size: 15px; }
.mgmap-gate p { margin: 4px 0 8px; font-size: 12px; color: #b9c4d2; }
.mgmap-gate-bar { height: 10px; border-radius: 6px; background: #313a47; overflow: hidden; }
.mgmap-gate-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb36b, #f0631c); }
.mgmap-gate small { font-size: 11px; font-weight: 800; color: #ffb36b; }

/* Einstieg auf der Weltkarte */
.mg-world-btn { white-space: nowrap; position: absolute; z-index: 6; left: 50%; bottom: calc(14px + var(--sab)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 3px solid #fff; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #ff8a3d, #e2412f); color: #fff; font-weight: 900; font-size: 15px; letter-spacing: .05em; text-align: left;
  box-shadow: 0 5px 0 #9c2a1b, 0 10px 22px rgba(0,0,0,.4); animation: mg-world-pulse 1.8s ease-in-out infinite; }
.mg-world-btn img { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.18); }
.mg-world-btn small { display: block; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: 0; opacity: .9; }
.mg-world-btn.is-locked { background: linear-gradient(180deg, #7d8896, #4f5966); box-shadow: 0 5px 0 #353d47, 0 10px 22px rgba(0,0,0,.4); animation: none; }
@keyframes mg-world-pulse { 50% { transform: translateX(-50%) scale(1.05); } }

/* Pumpstoß: schwebende Anzeige und Schneeflocken am Knopf */
.mg-float { white-space: nowrap; position: absolute; z-index: 150; pointer-events: none; font-weight: 900; color: #bff1ff; font-size: 22px;
  text-shadow: 0 2px 0 #0f5f9e, 0 0 10px rgba(120,220,255,.9); animation: mg-float-up .9s ease-out forwards; }
.mg-float.combo { color: #fff; font-size: 26px; }
@keyframes mg-float-up { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.25); opacity: 1; }
  to { transform: translate(-50%, -80px) scale(1); opacity: 0; } }
.mg-flake { position: absolute; z-index: 150; pointer-events: none; font-size: 16px; animation: mg-flake .8s ease-out forwards; }
@keyframes mg-flake { to { transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mgmap-tile, .mgmap-tile.is-open, .mgmap-you, .mg-world-btn { animation: none; } }

/* ===== Minigame-Rennen (js/minigame-ui.js renderRace) ===== */
.mg-race-tabs { margin-bottom: 10px; }
.mg-race-hero { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px;
  min-height: 132px; padding: 12px; border-radius: 18px; overflow: hidden; color: #fff; margin-bottom: 8px;
  background: #1b2333; box-shadow: 0 6px 18px rgba(20,20,40,.25); }
.mg-race-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-race-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,24,.05) 20%, rgba(10,14,24,.85) 100%); }
.mg-race-copy, .mg-race-score { position: relative; z-index: 1; }
.mg-race-kicker { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 900; letter-spacing: .1em; background: #f0b41c; color: #2a1c00; }
.mg-race-kicker.is-live { background: #2fd05a; color: #062a10; animation: mg-race-live 1.4s ease-in-out infinite; }
.mg-race-kicker.is-over { background: #8b96a4; color: #fff; }
@keyframes mg-race-live { 50% { box-shadow: 0 0 0 5px rgba(47,208,90,.25); } }
.mg-race-copy h3 { margin: 6px 0 2px; font-size: 19px; font-weight: 900; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.mg-race-copy p { margin: 0; font-size: 12px; font-weight: 800; color: #d6e6f5; font-variant-numeric: tabular-nums; }
.mg-race-score { display: grid; grid-template-columns: auto; justify-items: center; padding: 6px 10px; border-radius: 12px;
  background: rgba(10,14,24,.6); border: 1.5px solid rgba(255,255,255,.18); }
.mg-race-score b { font-size: 17px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mg-race-score small { font-size: 8.5px; font-weight: 900; letter-spacing: .1em; color: #9fb7d6; margin-bottom: 3px; }
.mg-race-pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.mg-race-pips i { width: 9px; height: 9px; border-radius: 3px; background: #d5dde6; }
.mg-race-pips i.on { background: linear-gradient(180deg, #6fe08a, #2fae4c); }
.mg-race-pips.big i { width: 22px; height: 10px; border-radius: 5px; }
.mg-race-pips.big i.now { box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(80,220,120,.8); }
.mg-win-race { display: grid; justify-items: center; gap: 6px; margin: 4px 0 8px; padding: 8px; border-radius: 12px; background: #eefaf1; }
.mg-win-race b { font-size: 13px; color: #1d7a33; font-variant-numeric: tabular-nums; }
.mg-win-home { margin-top: 8px; border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.mgmap-finish { position: absolute; left: 50%; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 14px; background: rgba(14,18,28,.9); border: 1.5px solid rgba(255,255,255,.2); color: #fff; white-space: nowrap; }
.mgmap-finish img { width: 44px; height: 44px; object-fit: contain; }
.mgmap-finish b { display: block; font-size: 14px; letter-spacing: .08em; color: #f2c230; }
.mgmap-finish small { display: block; font-size: 10.5px; font-weight: 800; color: #c7d0dc; }
.mg-race-count { font-size: 30px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(93,255,176,.45); }
@media (prefers-reduced-motion: reduce) { .mg-race-kicker.is-live { animation: none; } }
.mg-race-lb .mg-race-tabs { background: rgba(255,255,255,.06); }
.mg-race-lb .mg-race-tabs button { color: #9fb3c9; }
.mg-race-lb .mg-race-tabs button.is-active { background: #1d2a3d; color: #fff; box-shadow: none; }
.mg-race-lb .lb-rule { margin: 10px 0; }