/* MAPA PRZYGÓD FunRoom — styl komponentu (granat, złoto, fioletowy portal Lechicka, niebieski portal Malta). */
.mp { --mp-granat: #0a0d22; --mp-zloto: #e9b44c; --mp-zloto-jasne: #ffe2a0; --mp-tekst: #f6efe2; --mp-szary: #cfc3a6;
  --mp-fiolet: #b65cff; --mp-niebieski: #3fd6ff; max-width: 1320px; margin: 10px auto 26px; color: var(--mp-tekst); }
.mp-tytul-ukryty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mp-przel { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.mp-przel--fiolet { border-color: color-mix(in srgb, var(--mp-fiolet) 70%, transparent) !important; } .mp-przel--niebieski { border-color: color-mix(in srgb, var(--mp-niebieski) 70%, transparent) !important; }
.mp-przel button { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid rgba(233,180,76,.7); background: rgba(10,13,34,.85);
  color: var(--mp-tekst); font: inherit; font-weight: 700; cursor: pointer; transition: background .2s, box-shadow .2s, color .2s; }
.mp-przel button:hover { border-color: var(--mp-zloto); }
.mp-przel button[aria-pressed="true"] { background: var(--mp-zloto); color: #1b1203; box-shadow: 0 0 16px rgba(233,180,76,.55); }
.mp-przel .mp-przel--fiolet[aria-pressed="true"] { background: var(--mp-fiolet); border-color: var(--mp-fiolet); color: #15110c; box-shadow: 0 0 18px rgba(182,92,255,.6); }
.mp-przel .mp-przel--niebieski[aria-pressed="true"] { background: var(--mp-niebieski); border-color: var(--mp-niebieski); color: #021a24; box-shadow: 0 0 18px rgba(63,214,255,.6); }
.mp button:focus-visible, .mp a:focus-visible, .mp-okno:focus-visible, .mp-karta h4:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mp-uklad { position: relative; }
.mp-ramka { border-radius: 22px; padding: 10px; background: linear-gradient(135deg, #7a5424, #3b230e 40%, #b8863f 62%, #3b230e);
  box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,214,140,.35); }
.mp-okno { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 2; width: 100%; background: var(--mp-granat);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: default; }
.mp--zoom .mp-okno { cursor: grab; }
.mp--zoom .mp-okno:active { cursor: grabbing; }
.mp-scena { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.mp-tlo { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Portale FunRoom — prawdziwe przyciski na narysowanych łukach; delikatna poświata. */
.mp-portal { position: absolute; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 40% 40% 10% 10%;
  background: transparent; cursor: pointer; --g: var(--mp-zloto); transition: transform .25s ease, opacity .25s ease; }
.mp-portal--fiolet { --g: var(--mp-fiolet); } .mp-portal--niebieski { --g: var(--mp-niebieski); }
.mp-portal-blask { position: absolute; inset: -18%; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--g) 55%, transparent), transparent 70%);
  opacity: .55; animation: mp-oddech 3s ease-in-out infinite; }
@keyframes mp-oddech { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
.mp-portal:hover .mp-portal-blask, .mp-portal:focus-visible .mp-portal-blask, .mp-portal.on .mp-portal-blask { opacity: 1; animation: none;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--g) 80%, transparent), transparent 72%); filter: blur(2px); }
.mp-portal:hover, .mp-portal.on { transform: translate(-50%, -50%) scale(1.06); }
.mp-portal.przygas { opacity: .55; }
/* Zabytki — mniejsze punkty (obszar dotyku 44 px), bez dodatkowych podpisów na ilustracji. */
.mp-zabytek { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; }
.mp-zabytek-kropka { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--mp-zloto-jasne); box-shadow: 0 0 0 3px rgba(233,180,76,.35), 0 0 12px rgba(255,214,120,.9); transition: transform .2s ease; }
.mp-zabytek:hover .mp-zabytek-kropka, .mp-zabytek:focus-visible .mp-zabytek-kropka { transform: translate(-50%, -50%) scale(1.5); }
.mp-zabytek { scale: calc(1 / var(--mp-s, 1)); }   /* obszar dotyku zostaje 44 px na ekranie przy każdym zoomie */
.mp-dymek { position: absolute; z-index: 6; transform: translate(-50%, -100%); width: max-content; max-width: min(260px, 80%);
  padding: 9px 13px; border-radius: 10px; background: rgba(10,9,22,.95); border: 1px solid rgba(233,180,76,.7); color: var(--mp-tekst);
  font-size: .84rem; line-height: 1.35; pointer-events: none; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.mp-dymek--dol { transform: translate(-50%, 0); }
.mp-dymek strong { display: block; color: var(--mp-zloto-jasne); margin-bottom: 2px; font-size: .95rem; }
.mp-sterowanie { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.mp-sterowanie button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(233,180,76,.7); background: rgba(10,13,34,.88); color: var(--mp-zloto-jasne);
  font: 700 1.35rem/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; }
.mp-sterowanie button:hover { background: rgba(40,30,10,.95); }
.mp-sterowanie svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Karta lokalizacji: na komputerze nad mapą z prawej, na telefonie pod mapą. */
.mp-karta { position: absolute; z-index: 7; top: 26px; right: 26px; width: min(340px, 42%); padding: 20px 22px 18px; border-radius: 16px;
  background: rgba(10,9,24,.96); border: 1.5px solid var(--k, var(--mp-zloto)); box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 26px color-mix(in srgb, var(--k, #e9b44c) 35%, transparent);
  animation: mp-wjazd .3s ease; }
.mp-karta--fiolet { --k: var(--mp-fiolet); } .mp-karta--niebieski { --k: var(--mp-niebieski); }
@keyframes mp-wjazd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mp-karta h4 { margin: 0 34px 4px 0; font-family: var(--font-display, Georgia, serif); font-size: 1.45rem; color: #fff; }
.mp-karta-adres { margin: 0 0 12px; color: var(--mp-szary); }
.mp-karta-gry { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; }
.mp-karta-gry li { padding: 5px 11px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: #120c04; background: var(--k, var(--mp-zloto)); }
.mp-karta--fiolet .mp-karta-gry li { color: #15110c; }
.mp-karta-akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-karta-akcje a { min-height: 44px; display: inline-flex; align-items: center; }
.mp-karta-zamknij { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  color: var(--mp-tekst); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.mp-karta-zamknij:hover { background: rgba(255,255,255,.08); }
.mp-bez-js { text-align: center; }
.mp-bez-js a { color: var(--mp-zloto-jasne); }
@media (max-width: 760px) {
  .mp-karta { position: relative; top: auto; right: auto; width: auto; margin-top: 14px; animation: none; }
  .mp-sterowanie { right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-portal-blask { animation: none; }
  .mp-karta { animation: none; }
  .mp-portal, .mp-zabytek-kropka, .mp-przel button { transition: none; }
}
@media (max-width: 560px) { .mp-zabytek-kropka { width: 7px; height: 7px; } }

/* ===== MAPA POZNANIA (prawdziwa mapa w stylu ilustracji) — mapa-poznan.js ===== */
.mpz .mpz-okno { aspect-ratio: 3 / 2; touch-action: auto; user-select: auto; background: #0b1024; }
.mpz .mpz-okno .mpz-mapa.maplibregl-map { position: absolute; inset: 0; }
.mpz-okno::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  box-shadow: inset 0 0 90px 20px rgba(6,6,20,.85); }                                     /* winieta jak na ilustracji */
.mpz-tytul { position: absolute; z-index: 3; left: 1.5%; top: 1.5%; width: min(30%, 410px); height: auto; pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.mpz-roza { position: absolute; z-index: 3; right: 84px; bottom: 14px; width: min(11%, 118px); height: auto; pointer-events: none; opacity: .95; }
.mpz .mp-sterowanie { z-index: 4; }
/* Rama cieńsza niż przy ilustracji — uwaga ma iść na portale, nie na złoto. */
.mpz .mp-ramka { padding: 4px; border-radius: 18px; background: linear-gradient(135deg, #6b4a22, #2c1a0b 45%, #8a6531 70%, #2c1a0b);
  box-shadow: 0 14px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,214,140,.25); }
.mpz .mpz-okno { border-radius: 14px; }
/* Wskazówka nad mapą: od razu wiadomo, że portale się klika. */
.mpz-wskazowka { position: absolute; z-index: 3; left: 50%; top: 16px; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 10px;
  max-width: 34%; padding: 9px 16px; border-radius: 999px; background: rgba(10,9,24,.88); border: 1px solid rgba(255,226,160,.35);
  color: #fff3d6; font-weight: 700; font-size: .92rem; line-height: 1.25; text-align: center; pointer-events: none; transition: opacity .3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.mpz-wskazowka-kropki { display: inline-flex; gap: 4px; flex: none; }
.mpz-wskazowka-kropki i { width: 10px; height: 10px; border-radius: 50%; background: var(--mp-fiolet); box-shadow: 0 0 8px var(--mp-fiolet); }
.mpz-wskazowka-kropki i + i { background: var(--mp-niebieski); box-shadow: 0 0 8px var(--mp-niebieski); }
.mpz--wybrano .mpz-wskazowka { opacity: 0; }
.mpz--bez-mapy .mpz-mapa { background: url(/assets/mapa-przygod/poznan-mapa.webp?v=1) center / cover; }
.mpz-zapas { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mpz--bez-mapy .mpz-zapas { position: static; width: auto; height: auto; clip: auto; margin-top: 10px; }
/* złota tabliczka z nazwą — jak podpisy na ilustracji */
.mpz-tabliczka { display: inline-block; padding: 4px 12px 5px; border-radius: 8px; white-space: nowrap; text-align: center;
  background: linear-gradient(#2a1c0a, #140c04); border: 1.5px solid #d9a648; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.55);
  color: #ffe2a0; font: 700 .86rem/1.15 "Cinzel", Georgia, serif; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
.mpz-tabliczka small { display: block; font: 600 .7rem/1.2 system-ui, sans-serif; color: #e8d3a6; letter-spacing: 0; }
/* portale FunRoom (rysunki z ilustracji) */
.mpz-portal { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none;
  cursor: pointer; --g: var(--mp-zloto); transition: opacity .25s ease; }
.mpz-portal--fiolet { --g: var(--mp-fiolet); } .mpz-portal--niebieski { --g: var(--mp-niebieski); }
.mpz-portal img { width: 92px; height: auto; display: block; position: relative; z-index: 1; transition: transform .25s ease;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--g) 70%, transparent)); }
.mpz-portal .mpz-portal-blask { position: absolute; left: 50%; top: 34px; width: 170px; height: 140px; transform: translate(-50%, -30%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 65%, transparent), transparent); animation: mp-oddech 3s ease-in-out infinite; pointer-events: none; }
.mpz-portal .mpz-tabliczka { border-color: var(--g); position: relative; z-index: 1; font-size: .98rem; padding: 5px 14px 6px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 18px color-mix(in srgb, var(--g) 55%, transparent), 0 4px 12px rgba(0,0,0,.55); }
.mpz-portal { z-index: 2; }
.mpz-portal:hover img, .mpz-portal:focus-visible img, .mpz-portal.on img { transform: scale(1.12); }
.mpz-portal.on .mpz-portal-blask { animation: none; opacity: 1; }
.mpz-portal.przygas { opacity: .5; }
.mpz-portal:focus-visible, .mpz-zabytek:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 10px; }
/* zabytki: rysunek z ilustracji albo sama tabliczka, opis w dymku po najechaniu/fokusie */
.mpz-zabytek { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: help; min-height: 44px; }
.mpz-zabytek img { height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.mpz-zabytek .mpz-tabliczka { font-size: .78rem; padding: 3px 10px 4px; }
.mpz-zabytek--rys .mpz-tabliczka { margin-top: -6px; }
.mpz-dymek { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 230px;
  padding: 8px 12px; border-radius: 10px; background: rgba(10,9,22,.96); border: 1px solid rgba(233,180,76,.7); color: var(--mp-tekst);
  font: .82rem/1.35 system-ui, sans-serif; white-space: normal; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s; }
.mpz-zabytek:hover .mpz-dymek, .mpz-zabytek:focus-visible .mpz-dymek { opacity: 1; }
.mpz .maplibregl-ctrl-attrib { background: rgba(10,9,22,.75); color: #cdbb94; font-size: 10px; }
.mpz .maplibregl-ctrl-attrib a { color: #e9c983; }
@media (max-width: 760px) {
  .mpz .mpz-okno { aspect-ratio: 4 / 5; }
  .mpz-tytul { width: 46%; }
  .mpz-roza { display: none; }
  .mpz-zabytek:not(.mpz-zabytek--rys) { display: none; }      /* na telefonie tylko rysunki zabytków, bez samych tabliczek */
  .mpz-portal img { width: 60px; }
  .mpz-portal .mpz-portal-blask { width: 120px; height: 100px; top: 24px; }
  .mpz-wskazowka { top: auto; bottom: 10px; left: 12px; right: 64px; transform: none; max-width: none; font-size: .82rem; padding: 7px 12px; }
  .mpz-zabytek img { max-width: 48px; }
  .mpz-zabytek .mpz-tabliczka { display: none; }              /* nazwa zabytku w dymku po dotknięciu */
  .mpz-zabytek:focus .mpz-dymek { opacity: 1; }
  .mpz-zabytek--rys[aria-label^="Nowe Zoo"] img { max-width: 100px; }
  .mpz-tabliczka { font-size: .74rem; padding: 3px 8px 4px; }
  .mpz-tabliczka small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mpz-portal .mpz-portal-blask { animation: none; } .mpz-portal img { transition: none; } }

/* ===== Ta sama mapa jako WYBÓR MIEJSCA (urodziny, szkoły, eventy) — views/partials/mapa_poznan_wybor.php ===== */
.mpz--wybor { --mp-zloto: #e9b44c; --mp-zloto-jasne: #ffe2a0; --mp-tekst: #f6efe2; --mp-fiolet: #b65cff; --mp-niebieski: #3fd6ff;
  position: relative; min-height: 460px; padding: 0; overflow: hidden; border-radius: 16px; background: #0b1024; }
.mpz--wybor .mpz-okno { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 16px; }
.mpz--wybor .mpz-tytul { display: none; }               /* nagłówek ma strona; tytuł zasłaniałby Lechicką */
.mpz--wybor .mpz-zabytek:not(.mpz-zabytek--rys) { display: none; }
.mpz--wybor .mpz-zabytek .mpz-tabliczka { display: none; }   /* przy mniejszej mapie same rysunki zabytków, nazwy w dymku */
.mpz--wybor .mpz-zabytek img { max-width: 56px; }
.mpz--wybor .mpz-zabytek[aria-label="Nowe Zoo"] img { max-width: 104px; }
.mpz--wybor .mpz-zabytek:focus .mpz-dymek { opacity: 1; }
.mpz--wybor .mpz-wskazowka { top: auto; bottom: 12px; left: 12px; right: 64px; transform: none; max-width: none; justify-content: center; font-size: .86rem; }
.mpz--wybor .mpz-portal img { width: 70px; }
.mpz--wybor .mpz-portal .mpz-portal-blask { width: 140px; height: 120px; top: 26px; }
.mpz--wybor .mpz-portal .mpz-tabliczka { font-size: .86rem; padding: 4px 11px 5px; }
.mpz--wybor button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 820px) { .mpz--wybor { min-height: 440px; } }
@media (max-width: 760px) { .mpz--wybor .mpz-portal img { width: 56px; } .mpz--wybor .mpz-zabytek img { max-width: 44px; } }

/* ===== Jedno miejsce (strona gry, „Adres i dojazd”) — views/partials/mapa_poznan_miejsce.php ===== */
.mpz--miejsce { min-height: 0; aspect-ratio: 16 / 10; border: 1px solid rgba(255,255,255,.12); }
.mpz--miejsce .mpz-wskazowka { right: 64px; }
@media (max-width: 760px) { .mpz--miejsce { aspect-ratio: 4 / 3.4; } .mpz--miejsce .mpz-wskazowka { display: none; } }