/* My Snow Life — "Postar foto ou vídeo" (msl-post.js), o mesmo no Mapa 2D e no 3D. 31/10/2026.
   Celular: folha que sobe de baixo. Computador: cartão no meio. Cores da marca (BRAND.md). */
.msp-ov { --msp-bg: #0C1A2A; --msp-card: #16293D; --msp-line: #3A5068; --msp-text: #F4F7FA; --msp-muted: #8FA3B8; --msp-orange: #FF5B2E; --msp-blue: #3FA9F5;
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: flex-end;
  padding: calc(var(--msl-bar-h, 0px) + 16px) 16px 16px;
  background: linear-gradient(90deg, rgba(6, 13, 22, 0) 30%, rgba(6, 13, 22, .55)); opacity: 0; transition: opacity .2s ease-out;   /* o mapa (e o pin) continua à vista */
  font: 400 15px/1.5 'DM Sans', 'Archivo', system-ui, sans-serif; color: var(--msp-text); }
.msp-ov[hidden] { display: none; }
.msp-ov.on { opacity: 1; }
.msp { width: min(440px, 100%); max-height: calc(100dvh - var(--msl-bar-h, 0px) - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--msp-bg); border: 1px solid var(--msp-line); border-radius: 20px; padding: 18px 18px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); transform: translateY(12px); transition: transform .2s ease-out; }
.msp-ov.on .msp { transform: none; }
.msp * { box-sizing: border-box; }
.msp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.msp-head h2 { flex: 1; margin: 0; font: 800 20px/1.2 'Archivo', sans-serif; font-stretch: 110%; color: var(--msp-text); }
.msp-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .07); color: var(--msp-text); font-size: 22px; line-height: 1; cursor: pointer; }
.msp-x:hover { background: rgba(255, 255, 255, .14); }
.msp-kind { display: flex; gap: 6px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.msp-kind[hidden] { display: none; }
.msp-kind button { flex: 1; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--msp-muted); font: 700 14px 'Archivo', sans-serif; cursor: pointer; }
.msp-kind button[hidden] { display: none; }
.msp-kind button[aria-selected="true"] { background: var(--msp-card); color: var(--msp-text); }
.msp [hidden] { display: none !important; }
.msp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border: 1.5px dashed var(--msp-line); border-radius: 16px;
  background: rgba(63, 169, 245, .05); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.msp-drop:hover { border-color: var(--msp-blue); background: rgba(63, 169, 245, .1); }
.msp-drop-ic { font-size: 28px; }
.msp-drop b { font: 700 16px 'Archivo', sans-serif; color: var(--msp-text); }
.msp-drop small { color: var(--msp-muted); font-size: 12.5px; }
.msp-prev { border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--msp-line); }
.msp-prev img, .msp-prev video { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #000; }
.msp-noimg { display: grid; place-items: center; height: 120px; font-size: 40px; background: var(--msp-card); }
.msp-prev-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--msp-card); font-size: 13px; color: var(--msp-muted); }
.msp-prev-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msp-in { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--msp-line); background: var(--msp-card); color: var(--msp-text); font: inherit; }
.msp-in:focus { outline: none; border-color: var(--msp-blue); }
textarea.msp-in { resize: vertical; min-height: 70px; }
.msp-lbl { display: block; margin: 0 0 6px; font: 500 11.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--msp-muted); }
.msp-where, .msp-field { display: block; margin-top: 14px; }
.msp-where-body { padding: 12px; border-radius: 14px; background: var(--msp-card); border: 1px solid var(--msp-line); }
.msp-hint { margin: 0 0 8px; color: var(--msp-muted); font-size: 14px; }
.msp-hint:last-child { margin: 0; }
.msp-spot { display: flex; align-items: center; gap: 10px; }
.msp-spot > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msp-spot b { font-weight: 700; font-size: 14px; color: var(--msp-text); }
.msp-spot small { color: var(--msp-muted); font: 400 12px 'IBM Plex Mono', monospace; }
.msp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--msp-blue); box-shadow: 0 0 0 4px rgba(63, 169, 245, .22); flex: none; }
.msp-dot.gps { background: #2BC48A; box-shadow: 0 0 0 4px rgba(43, 196, 138, .22); }
.msp-taken { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); color: var(--msp-muted); font-size: 13.5px; }
.msp-vis { display: flex; gap: 8px; margin-top: 14px; }
.msp-vis label { flex: 1; cursor: pointer; }
.msp-vis input { position: absolute; opacity: 0; pointer-events: none; }
.msp-vis span { display: block; padding: 10px; border-radius: 12px; border: 1px solid var(--msp-line); text-align: center; font-weight: 700; color: var(--msp-muted); }
.msp-vis input:checked + span { border-color: var(--msp-blue); background: rgba(63, 169, 245, .12); color: var(--msp-text); }
.msp-vis input:focus-visible + span { outline: 2px solid var(--msp-blue); outline-offset: 2px; }
.msp-note { margin: 8px 0 0; color: var(--msp-muted); font-size: 12.5px; }
.msp-btns { display: flex; gap: 10px; margin-top: 16px; }
.msp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font: 700 15px 'Archivo', sans-serif; font-stretch: 105%; cursor: pointer; white-space: nowrap; }
.msp-btns .msp-btn { flex: 1; }
.msp-btn.primary { background: var(--msp-orange); color: #fff; }
.msp-btn.primary:hover { background: #ff7048; }
.msp-btn.primary:disabled { opacity: .6; cursor: wait; }
.msp-btn.ghost { background: transparent; border-color: var(--msp-line); color: var(--msp-text); }
.msp-btn.small { height: 34px; padding: 0 12px; font-size: 13px; background: rgba(63, 169, 245, .14); color: var(--msp-blue); }
.msp-btn.small.ghost { background: transparent; color: var(--msp-muted); }
/* faixa "toque no local" (enquanto o modal sai do caminho) */
.msp-banner { position: fixed; left: 50%; top: calc(var(--msl-bar-h, 0px) + 14px); transform: translateX(-50%); z-index: 10040;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; border-radius: 999px;
  background: rgba(12, 26, 42, .94); border: 1px solid #3A5068; color: #F4F7FA; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  font: 600 14px/1.3 'DM Sans', 'Archivo', system-ui, sans-serif; }
.msp-banner[hidden] { display: none; }
.msp-banner button { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #3A5068; background: transparent; color: #F4F7FA; font: 700 13px 'Archivo', sans-serif; cursor: pointer; }
.msp-pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FF5B2E; animation: msp-pulse 1.2s ease-out infinite; }
@keyframes msp-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 46, .6); } 100% { box-shadow: 0 0 0 10px rgba(255, 91, 46, 0); } }
@media (max-width: 640px) {
  .msp-ov { align-items: flex-end; padding: 0; background: linear-gradient(180deg, rgba(6, 13, 22, 0) 20%, rgba(6, 13, 22, .55)); }
  .msp { width: 100%; max-height: 66dvh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(40px); }
  .msp-banner { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .msp-ov, .msp { transition: none; } .msp-pulse { animation: none; } }
/* Mapa 2D (media-post-2d.js): pin provisório e cursor de mira enquanto escolhe o local */
.msp-pin2d span { display: block; width: 26px; height: 26px; border-radius: 50%; background: #FF5B2E; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(255, 91, 46, .3), 0 4px 12px rgba(0, 0, 0, .4); }
body.msp-picking .leaflet-container { cursor: crosshair; }
/* 3D (engine/user-content.js): botão 📷 na barra de cima (igual ao do Mapa 2D) e pin provisório na montanha */
.msl-post-btn { flex: none; width: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); color: #F0F2FF; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.msl-post-btn[hidden] { display: none; }
.msl-post-btn svg { width: 18px; height: 18px; fill: currentColor; }
.msl-post-btn:hover { background: rgba(63, 169, 245, .2); border-color: #3FA9F5; color: #3FA9F5; }
.pin.msp-pin3d .ic { width: 26px; height: 26px; border-radius: 50%; background: #FF5B2E; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(255, 91, 46, .3), 0 4px 12px rgba(0, 0, 0, .4); }