/* little living touches on the map and in the close-ups: speech bubbles, season and sound settings */

.speech { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; translate: -50% calc(-100% - 12px);
  max-width: 220px; padding: 7px 12px 8px; border-radius: 14px; white-space: nowrap;
  font: 400 17px/1.15 'Kalam', 'Comic Sans MS', cursive; color: #2a1d10; background: #f4ead2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(120, 90, 40, .25);
  opacity: 0; scale: .6; transform-origin: 50% 100%; transition: opacity .18s ease, scale .32s cubic-bezier(.3, 1.6, .5, 1); }
.speech::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: inherit; rotate: 45deg; border-radius: 0 0 3px 0; box-shadow: inset -1px -1px 0 rgba(120, 90, 40, .2); }
.speech.in { opacity: 1; scale: 1; }
.speech.out { opacity: 0; scale: .85; transition-duration: .25s; }
.speech.elvish { font: italic 500 17px/1.2 'Cormorant', serif; color: #1f2a3a; background: #eef1f4; }
.speech.dark { font: italic 500 16px/1.2 'IM Fell English', serif; color: #ffb48a; background: #160a07; box-shadow: 0 0 22px rgba(255, 70, 20, .45), inset 0 0 0 1px rgba(255, 90, 30, .35); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .speech { transition: opacity .2s; scale: 1; } }

/* season picker and volume in the display settings */
.settings-pop .season { display: block; cursor: default; }
.settings-pop .season-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.settings-pop .season-row button { flex: 1 0 auto; padding: 6px 8px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--text-2); font: 500 12px/1 var(--label, inherit); letter-spacing: .06em; cursor: pointer; }
.settings-pop .season-row button.on { border-color: var(--gold); color: var(--gold-hi, #f0d58a); background: rgba(201, 163, 91, .12); }
.settings-pop .vol { display: block; }
.settings-pop .vol input { width: 100%; margin-top: 8px; }
.settings-pop .season { padding: 12px 0 10px; border-top: 1px solid var(--hair); }
.settings-pop .season strong { display: block; font: 500 18px/1.2 var(--display); color: var(--text); }
.settings-pop .season em { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--text-3); font-style: normal; }
.settings-pop input[type=range] { accent-color: var(--gold); }