/**
 * embed-styles-200.css - SonicMaps Embed 2.0 (MapLibre).
 *
 * Sections copied verbatim from player/player-styles-410.css (Player 4.1.10) so the embed looks and
 * behaves like the Player: fonts/tokens/base, the map, what sits over it (play button, progress
 * rings, intro skip, video), the POI strip, the zone card and the notices (#modalWindow).
 * Keep them in step with the Player's sheet. The embed's own rules are at the end.
 */

/* ---------- Fonts ---------- */

/* Manrope, the UI face (--smp-sans), self-hosted for the reason Marcellus and Roboto are (see
   /assets/fonts/fonts.css): the service worker can precache our own woff2 files, but never the
   fonts.gstatic.com ones a Google stylesheet points at, so offline the Player fell back to the
   system font. Here and not in fonts.css because index.php shares that file (?v=1, and it is in
   sw-400.js's precache list).
   One variable file per subset, covering every weight from 400 to 800, which is what the page
   uses. Only latin and latin-ext, as in fonts.css: enough for the four UI languages. A title in
   Cyrillic or Greek falls back to the system font, as it does with Marcellus.
   Source, pinned by the version in each filename: Manrope v20, from
   https://fonts.googleapis.com/css2?family=Manrope:wght@400..800 (15/10/2026); unicode-range
   copied verbatim from that stylesheet. The latin file is preloaded by beta.php. */
@font-face{
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/assets/fonts/manrope-v20-latin-var.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/assets/fonts/manrope-v20-latin-ext-var.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root{
    --smp-bg-950: #141619;  /* bars */
    --smp-bg-900: #1A1D21;  /* screens, and a field inside a card */
    --smp-bg-800: #24282E;  /* cards and fields */
    --smp-bg-700: #2F343B;  /* secondary button */
    --smp-hair:   #262B31;  /* separator inside a surface */
    --smp-line:   #363C44;  /* border of a card or a field, always 1px */
    --smp-line-2: #434A54;  /* border of a notice or a secondary button */
    --smp-ink:    #F4F6F8;
    --smp-ink-2:  #DDE1E6;
    --smp-body:   #C9CFD6;  /* descriptions */
    --smp-muted:  #A4ABB4;  /* author, distance, country */
    --smp-accent:      #4f8ed9;  /* switch on */
    --smp-accent-fill: #3d79d0;  /* filled button: white on it gives 4.8:1 */
    --smp-accent-ink:  #8fbdf5;  /* blue text and outlines on dark */
    --smp-gold-ink:    #F0BC6B;  /* warnings only */
    --smp-danger:      #DC9191;
    --smp-green:       #9CC04A;  /* "Player" in the wordmark and the logo, the active menu row */
    --smp-focus:  rgba(143, 180, 245, 0.55);
    --smp-scrim:  rgba(8, 9, 10, 0.66);
    --smp-sans:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* The menu's width. The 768px at which it becomes a sidebar is not a token - a custom property
       cannot be used in a media query - and is repeated in beta.php's menu script (matchMedia):
       keep the two in step. The script measures the panel rather than reading this. */
    --sm-menu-w: 260px;

    /* How long the menu takes to open and close, and everything that moves with it. The panel
       carries it, and two scripts read it back off the panel: slidebars.js, which copies it onto
       the page ([canvas]) as an inline transition-duration below 768px, and beta.php's menu
       script, which eases the map's camera with it. From 768px what moves aside uses it too. */
    --sm-slide: 350ms;
}

/* ---------- Base ---------- */

*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body,html{
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--smp-bg-900);
    touch-action: manipulation;
}
a{ color: inherit; text-decoration: none; }
input{ -webkit-user-select: text; user-select: text; }   /* the * rule above would make typed text unselectable */
[class*=js-]{ cursor: pointer; }

/* Lists only come from authors now (project descriptions keep UL/OL/LI, see sanitizeHTML in
   js2/smp-utils.js): the menu's own lists restate all of this. */
ul{ padding-left: 1em; }
ul li{
    list-style: none;
    font-size: 1.05em;
    border-bottom: 1px solid #2f3c471a;
}

.icon{ width: 21px; height: 21px; }
.icon:hover{ cursor: pointer; }

/* .far/.fas are matched alongside .fa because Font Awesome 5 splits the icons into per-face
   prefixes and an element can carry only one of them: in all.min.css `.far{font-weight:400}` is
   declared BEFORE `.fa,.fas{font-weight:900}`, so keeping `fa` on a regular-face icon as a styling
   hook would silently render it solid. */
.fa,.far,.fas{font-size:18px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-pulse{ font-size: clamp(80px, 15vw, 150px); }   /* the loading spinners */


/* ---------- Map ---------- */

/* MapLibre documents touch-action:none on the map container as the way to stop the browser
   claiming pan/zoom gestures (v3.4 cancelled every touchmove over #map instead, which would fight
   MapLibre's own gesture handling). The background shows until the first tiles draw. */
#map{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #191a1a;
    touch-action: none;
}

/* The map canvas must never paint over the app chrome. Every overlay inside #map (#menubar
   3000, #projectbar 9100, #playpause 9001) already outranks this, but stating it removes any
   dependence on DOM order between MapLibre's canvas container and those siblings. */
.maplibregl-canvas-container{ z-index: 0; }

/* Hides every scrollbar in the page, not only the map's: the POI strip, the descriptions and the
   screens all scroll without one. */
::-webkit-scrollbar{ -webkit-appearance: none; display: none; }

/* OSM/ODbL requires the attribution to stay visible and legible, so this only tones it down to
   match the dark UI - it is never hidden outright. MapLibre renders it collapsed behind an (i)
   button on narrow screens (compact: true in map-init.js), which keeps it out of the way of
   the map without removing it. The background's !important is older than this file and does not
   seem needed: maplibre-gl.css sets it at the same specificity, and that file loads first. */
.maplibregl-ctrl-attrib{
    position: fixed;
    bottom: 0;
    z-index: 700;
    color: #7b7b7b;
    opacity: 0.8;
}
.maplibregl-map .maplibregl-ctrl-attrib{ background: rgb(43 43 43 / 70%) !important; }
.maplibregl-ctrl-attrib a{ color: #9aa0a6; }
.maplibregl-ctrl-attrib-button{ background-color: rgb(43 43 43 / 70%); }

/* The remote-listening avatar: an <i class="fa fa-male"> inside the marker (smplayer-410.js,
   getUserMarker). MapLibre puts our class on the marker element itself, so the class alone is the
   selector - v3.4's `.leaflet-marker-icon.myListenIcon` matches nothing here. */
.myListenIcon{
    z-index: 5000 !important;
    text-align: center;
    text-shadow: 2px 2px 3px #363636;
    cursor: grab;
}
.myListenIcon:active{ cursor: grabbing; }
/* Invisible hit-area padding so the icon is easier to grab, especially on touch. A pseudo-
   element with negative inset extends the clickable region without growing .myListenIcon's
   own border box - growing that box directly would throw off MapLibre's percentage-based
   anchor transform (translate(-50%,-100%)) and make the icon float away from its real
   lng/lat. Clicks on generated content target the host element, so the marker's existing
   drag listeners keep working here with no JS changes. */
.myListenIcon::before{
    content: '';
    position: absolute;
    inset: -18px;
}
.fa-male{ font-size: 50px; line-height: 50px; }

/* ---------- Over the map: banners, play button, out-of-area bubble ---------- */

/* #topUItext: one line with an ellipsis (weak GPS, unlock, category messages). #mapnotice: the
   basemap-unavailable notice (js2/map-init.js, showMapNotice), centred on the map, well clear of
   #topUItext; unlike it, it wraps, because the translated sentences are longer than a phone is
   wide. pointer-events:none keeps the map draggable through it; z-index matches #menubar, so the
   project bar, the video window and the modal all stay on top.
   Manrope is wider than Marcellus, so #topUItext runs a little smaller than it did. */
#topUItext, #mapnotice{
    display: none;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: rgba(20, 22, 25, 0.82);
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-weight: 600;
    text-align: center;
}
#topUItext{
    position: absolute;
    top: 70px;
    z-index: 10000;
    width: 60%;
    height: 50px;
    margin-left: 20%;
    padding: 0 15px;
    font-size: calc(15px + 0.3vw);
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mapnotice{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3000;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 10px 18px;
    font-size: calc(12px + 0.4vw);
    line-height: 1.35;
    pointer-events: none;
}

/* The play button. smplayer-410.js moves `bottom` and swaps the border's opacity inline (36 idle,
   ba playing); the border here is only the starting state. */
#playpause{
    display: none;
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    z-index: 9001;
    width: 50px;
    height: 50px;
    margin: auto;
    border: 4px solid #ffffff36;
    border-radius: 100%;
    color: white;
    text-align: center;
    line-height: 54px;
    opacity: 0.9;
}
#pause_btn{ padding: 15px; cursor: pointer; }

/* The progress rings, scoped to #playpause: MapLibre's map IS a <canvas>, so a bare `canvas`
   selector (harmless in v3.4, whose map was SVG) would offset the whole map by -35px and make it
   uninteractive. The offsets centre each 120x120 ring on the ~50px button; SMPProgressBar draws
   them at increasing radii so up to four simultaneously-playing zones each get their own ring. */
#playpause canvas{
    display: block;
    position: absolute;
    top: -35px;
    left: -35px;
    z-index: 3000;
    pointer-events: none;
}

#rewind_btn, #forward_btn{
    display: none;
    position: absolute;
    top: calc(50% - 3px);
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.6));
    cursor: pointer;
}
#rewind_btn{ left: calc(50% - 110px); }
#forward_btn{ right: calc(50% - 110px); }

/* Intro Audio skip pill. startIntro() sets `bottom` to sit just above #playpause. */
#skipintro-btn{
    display: none;
    position: absolute;
    bottom: 167px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9001;
    padding: 7px 16px;
    border: 2px solid var(--smp-accent-ink);
    border-radius: 20px;
    background-color: rgba(20, 22, 25, 0.86);
    color: #fff;
    font-family: var(--smp-sans);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* The video window of a video zone (js2/vimeo-player.js), over the project bar. */
#vimeoplayer{
    display: none;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 500;
    box-sizing: border-box;
    width: 100%;
    max-width: 60vh;
    /* Also the side bands of a portrait video, capped at 50vh tall by fitVimeoRatio(). */
    background-color: #000000a6;
    box-shadow: 0 -1vw 1vw #0000004d;
}

/* ---------- POI strip ---------- */

/* EMBED: the Player's #projectbar rules are left out - the embed has no project bar. The strip's
   hairline is a box-shadow so it adds no height (smembed-200.js lifts the play button by 46px). */
#poi-list{
    display: none;
    position: fixed;
    bottom: 50px;
    z-index: 9010;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 5px;
    overflow-x: scroll;
    background-color: var(--smp-bg-700);
    box-shadow: 0 -1px 0 var(--smp-hair);
}
.poi-item{
    display: flex;
    align-items: center;
    margin: 0 5px;
    border-radius: 20px;
    background-color: var(--smp-bg-800);
    box-shadow: inset 0 0 0 1px var(--smp-line);
    cursor: pointer;
}
.poi-item:active{ background-color: var(--smp-line); }
/* The number in the strip. On the map the numbers are baked into the marker image (map-init.js,
   bakePoiIcon), so they survive the satellite style; this is only the strip's copy. */
.poi-num{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: #609cd7;
    color: #fff;
    font-family: var(--smp-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
}
.poi-label{
    padding: 0 15px 0 10px;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}


/* ---------- Zone card (#cardContainer, over the map) ---------- */

#cardContainer{
    display: none;
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 9010;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 33px 7px 5px;
    background: var(--smp-scrim);
}
/* max-width: a card with a photo takes the photo's width up to its 400px, which is more than a
   390px phone has between the container's paddings, so it ran off both sides. The title stays in
   Marcellus; the text is in Manrope. */
#zonecard{
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 280px;
    max-width: min(400px, 100%);
    max-height: min(100%, 900px);
    background-color: var(--smp-bg-800);
    border: 1px solid var(--smp-line);
    border-radius: 20px;
    box-shadow: 0 0 20px #000;
    font-family: Marcellus, serif;
}
/* Equal side padding keeps the title centred beside the close button. */
#cardtitle{
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: calc(100vw - 14px);
    padding: 15px 40px;
    color: var(--smp-ink);
    font-size: 19px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
}
#cardclose{
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 5px;
    border: 2px solid var(--smp-line-2);
    border-radius: 0px 15px 0px 10px;
    box-shadow: -2px 2px 3px #00000075;
    color: #ffffffb5;
    font-size: 19px;
    font-weight: bold;
    cursor: pointer;
}
#cardphoto{ overflow: hidden; }
#cardphoto img{
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 7px;
}
#cardtext{
    flex-shrink: 3;
    max-width: calc(100vw - 40px);
    margin: 10px 15px 15px;
    overflow: auto;
    color: var(--smp-ink-2);
    font-family: var(--smp-sans);
    font-size: 14.5px;
    line-height: 1.5;
    pointer-events: auto;
}
/* One dot per zone playing at once, above the card. */
#dots{
    position: absolute;
    top: -23px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    line-height: 7px;
    text-align: center;
}
.dot{
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 3px;
    border-radius: 8px;
    background-color: var(--smp-line-2);
}


/* ---------- Notices (#modalWindow) ---------- */

/* A veil over everything. The scripts write a sentence, a download counter, a question with
   buttons or the pre-flight notice into #modalmessage; the message itself stays in Marcellus. */
#modalWindow{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 9, 10, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: Marcellus, serif;
    font-size: 21px;
    text-align: center;
}

/* slidebars.css gives [canvas] -webkit-backface-visibility: hidden, an old WebKit trick against
   flicker while the page slides. Firefox honours the alias, and with it set on the page container
   the veil's backdrop-filter blurs nothing: everything behind #modalWindow turns black. The page
   only ever moves with a flat translate, so it has no back face to hide. */
[canvas=container]{
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
/* The message was a card at one point: its background, border and shadow are left commented out,
   and the :has() rule after it is what took the card away from a lone spinner. */
#modalmessage{
    box-sizing: border-box;
    width: calc(100% - 52px);
    max-width: 400px;
    padding: 30px 24px 24px;
    /*background-color: var(--smp-bg-800);*/
    /*border: 1px solid var(--smp-line-2);*/
    border-radius: 20px;
    /*box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);*/
    color: var(--smp-ink);
    line-height: 1.25;
}
#modalmessage:has(> .fa-spinner:only-child){
    background: none;
    border-color: transparent;
    box-shadow: none;
}
/* "Project loaded! Ready to go?" */
#modalmessage > span:first-child:has(~ #miboton){ font-size: 21px; line-height: 1.2; }
/* The scripts put a <br> before a button, which is a block here: it would be an empty line. */
#modalmessage > br:has(+ #miok),
#modalmessage > br:has(+ #miboton),
#modalmessage > br:has(+ .optionbtn){ display: none; }

/* What the scripts write often carries its own sizes and colours in style attributes: every
   !important from here to the end of the section answers one of them. */

/* Download counters: "12 / 340" under the phase name. */
#modalmessage > br + span[style*="0.7em"]{
    display: inline-block;
    margin-top: 8px;
    font-family: var(--smp-sans);
    font-size: 15px !important;
    font-variant-numeric: tabular-nums;
    color: var(--smp-body);
}
#modalmessage [style*="color:red"],
#modalmessage [style*="color: red"]{ color: var(--smp-danger) !important; }

#miboton, #miok, .optionbtn{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    margin: 22px 0 0;
    padding: 0 16px;
    background-color: var(--smp-bg-700);
    border: 1px solid var(--smp-line-2);
    border-radius: 12px;
    color: var(--smp-ink);
    font-family: var(--smp-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.optionbtn + .optionbtn,
.optionbtn + #miok{ margin-top: 10px; }
/* Go, and Exit in "Do you wish to exit this project?": the scripts mark the main action with the
   old blue in a style attribute. */
#miboton,
.optionbtn[style*="4e92c3"]{
    background: var(--smp-accent-fill) !important;
    border-color: transparent;
    color: #fff;
}
#miboton{ height: 52px; font-size: 17px; }
@media (hover: hover){
    #miboton:hover{ filter: brightness(1.1); }
}
#miboton:active{ filter: brightness(0.92); }

.disclaimer{
    max-width: none;
    margin: 18px 0 0;
    color: var(--smp-muted);
    font-family: var(--smp-sans);
    font-size: 13px;
    line-height: 1.5;
}
/* The silent-mode reminder, in the site's gold. */
.disclaimer[style*="ffb835"]{
    margin-top: 12px !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.45;
    color: var(--smp-gold-ink) !important;
}

/* "An auto-saved session was found": every size and colour is in a style attribute. */
#autosave-prompt{ margin-top: 18px !important; font-family: var(--smp-sans); }
#autosave-prompt > div{ font-size: 16px !important; font-weight: 600; line-height: 1.4; }
#autosave-prompt > div > div{
    font-size: 13px !important;
    font-weight: 500;
    color: var(--smp-muted);
    opacity: 1 !important;
}
#recover-autosave, #discard-autosave{
    display: inline-flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700;
}
#recover-autosave{ background: var(--smp-accent-fill) !important; }
#discard-autosave{
    background: var(--smp-bg-700) !important;
    box-shadow: inset 0 0 0 1px var(--smp-line-2);
}


/* =====================================================================================
   EMBED 2.0 - rules of its own (not in the Player's sheet)
   ===================================================================================== */

body{ overflow: hidden; }

/* Until the listener first drags the figure the map ignores gestures (smembed-200.js disables
   MapLibre's handlers), so the page around the iframe keeps scrolling over it on touch. The figure
   itself always takes the touch, or it could never be dragged. */
#map.sm-locked{ touch-action: pan-x pan-y; }
.myListenIcon{ touch-action: none; }

/* The embed has no top bar: the card starts at the top. */
#cardContainer{ top: 0; }

/* Basemap style and full screen, top right. */
#topright-btns{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9050;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.embed-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: rgba(20, 22, 25, 0.82);
    box-shadow: 0 0 0 1px var(--smp-line), 0 2px 6px rgba(0, 0, 0, 0.4);
    color: var(--smp-ink-2);
    cursor: pointer;
}
.embed-btn .icon{ fill: var(--smp-ink-2); }
.embed-btn .fa, .embed-btn .fas{ font-size: 17px; }
@media (hover: hover){
    .embed-btn:hover{ background-color: rgba(36, 40, 46, 0.95); }
}

/* No bottom bar, as in the old embed: what the Player places 50px up (above its project bar) sits
   on the bottom edge here. smembed-200.js does the same for the inline offsets it writes (play
   button, video, intro skip). */
#cardContainer{ bottom: 0; }
#poi-list{ bottom: 0; }

/* Project icon, title and author, top left: the old embed's box (index-151.html), kept clear of
   the buttons on the right. Above the welcome veil, as it was above #modalWindow2. */
#info{
    display: none;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8500;
    box-sizing: border-box;
    min-width: 18vw;
    max-width: calc(100% - 72px);
    margin: 5px 67px 5px 5px;
    padding: 8px 20px 8px 8px;
    background-color: rgba(0, 0, 0, 0.55);
    font-family: Marcellus, serif;
}
#foto{
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 5%;
    background: #ddd url(images/SonicMapsIcon.png) no-repeat center / 100% 100%;
}
#info .details{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-width: 0;
    margin-left: 10px;
}
#titulo, #creator{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#titulo{ color: #fff; font-size: 18px; }
#creator{ color: #8dd0ff; font-size: 16px; }
/* "powered by / SonicMaps", two lines in the bottom-right corner: the old embed's #powered.
   Shown by renderEmbedInfo(); lifted above the POI strip once that is showing. */
#powered{
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 8500;
    margin-bottom: 10px;
    padding: 10px;
    color: #fff;
    font-family: Marcellus, serif;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 0 10px #000;
}
#powered .pw-by{ margin-bottom: -3px; font-size: 10px; opacity: 0.7; }
body.has-poi #powered{ bottom: 46px; }

/* Welcome veil: the old embed's #modalWindow2 gradient, from transparent at the bottom-left
   corner, where the figure waits, to black at the top right. The figure sits under the veil (it is
   a map marker), so the corner must stay fully transparent for it to read clearly; the folded
   attribution (i) in that same corner is hidden instead while the veil is up (body.sm-welcome,
   set by smembed-200.js). It never takes pointer events, so the figure can be dragged straight
   away. */
#welcome{
    display: none;
    position: absolute;
    inset: 0;
    z-index: 8000;
    pointer-events: none;
    background: #000;
    background: radial-gradient(circle at bottom left, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 100%) 100%);
}
body.sm-welcome .maplibregl-ctrl-attrib{ visibility: hidden; }
/* "Drag me to set your listening location": the old embed's bubble (index-151.html .bubble) - grey
   pill, a lighter top fading out, an inset highlight, a slanted tail pointing at the figure, and
   its Neucha face - with a small hop so it is the first thing seen. Its
   gradient was written as linear-gradient(top, ...), which only the -webkit- form honoured;
   "to bottom" is the same in standard syntax. Chosen 06/11/2026: radius 14px, one line.
   max-content keeps it on one line and hugs the text; in an iframe too narrow for that it wraps
   inside max-width rather than running off the map. */
#burbuja{
    position: absolute;
    bottom: 87px;
    left: 10px;
    width: max-content;
    max-width: calc(100% - 20px);
    padding: 10px 16px;
    border-radius: 14px;
    background-color: #646a6b;
    background-image: linear-gradient(to bottom, hsla(0, 0%, 65%, .5), hsla(0, 0%, 100%, 0));
    box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .5), 3px 3px 0 hsla(0, 0%, 0%, .1);
    opacity: .9;
    color: #fff;
    /* Neucha, as in the old embed (Google Fonts, linked in index.html). It has a single weight, so
       no font-weight: a bold would be synthesised. Its glyphs run small, hence 16px (the old size). */
    font-family: 'Neucha', var(--smp-sans);
    font-size: 16px;
    line-height: 1.3;
    animation: burbuja-hop 2.2s ease-in-out infinite;
}
#burbuja:after{
    content: '';
    position: absolute;
    bottom: -22px;
    left: 32px;
    border-bottom: 23px solid transparent;
    border-left: 22px solid #646a6b;
}
/* A light glow in the figure's own shape, while the welcome veil is up: drop-shadow follows the
   glyph's outline, and its blur grows while it fades, so the figure seems to send out a pulse of
   light. (An outlined copy of the glyph scaling outwards was tried first and read as a second,
   hollow figure.) Same 2.2s beat as the bubble's hop. It stops as soon as the figure is touched
   (.sm-grabbed, set on pointerdown/dragstart by smembed-200.js) and for good with body.sm-welcome. */
/* The marker's own dark text-shadow (2px 2px, bottom right) is swapped for the same shadow as the
   LAST filter: a drop-shadow is computed from everything already drawn, so with the text-shadow in
   place the glow wrapped figure + shadow and leaked out to the right. Two white layers (a tight
   core and a wide halo) so it reads clearly on the dark map. Every keyframe lists the same three
   functions, or the filter would not interpolate. */
body.sm-welcome .myListenIcon:not(.sm-grabbed) i{
    text-shadow: none;
    animation: figure-glow 2.2s ease-out infinite;
}
@keyframes figure-glow{
    0%       { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8))  drop-shadow(0 0 2px rgba(255, 255, 255, 0.6))  drop-shadow(2px 2px 3px #363636); }
    35%      { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7))  drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(2px 2px 3px #363636); }
    80%, 100%{ filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0))    drop-shadow(0 0 18px rgba(255, 255, 255, 0))  drop-shadow(2px 2px 3px #363636); }
}

/* The pulse is a small hop (4px up and back), not a scale(): scaling rasterises the bubble and
   scales the bitmap, which blurred the text for the whole animation. A translate keeps it sharp. */
@keyframes burbuja-hop{
    0%, 50%, 100%{ transform: translateY(0); }
    25%{ transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){
    #burbuja{ animation: none; }
    body.sm-welcome .myListenIcon:not(.sm-grabbed) i{ animation: none; filter: drop-shadow(2px 2px 3px #363636); }
}

/* The folded attribution: just a faint (i), no dark pill. White on the dark and satellite maps,
   black on the light one (data-basemap is set by smembed-200.js). Opened, it keeps the Player's
   look from the Map section above. */
#map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show){
    background: transparent !important;
    box-shadow: none;
}
#map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button{
    background-color: transparent;
    filter: invert(1);
    opacity: 0.45;
}
#map[data-basemap="light"] .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button{
    filter: none;
    opacity: 0.3;
}
@media (hover: hover){
    #map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button:hover{ opacity: 0.8; }
}

/* "Unavailable" and load errors: smaller than the Player's 21px sentences. */
#modalmessage .embed-msg{ font-size: 18px; }