.meteosat-viewer {
  --mtv-bg: #0e1620;
  --mtv-fg: #e8eef5;
  --mtv-accent: #3fa7ff;
  --mtv-muted: #8fa2b5;
  --mtv-line: rgba(255, 255, 255, .14);
  width: 100%;
  max-width: 100%;
  container-type: inline-size;
  container-name: mtv;
  box-sizing: border-box;
  background: var(--mtv-bg);
  color: var(--mtv-fg);
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.meteosat-viewer.mtv-light {
  --mtv-bg: #f3f6f9;
  --mtv-fg: #17212b;
  --mtv-accent: #0b6cc4;
  --mtv-muted: #55667a;
  --mtv-line: rgba(0, 0, 0, .16);
}
.meteosat-viewer *, .meteosat-viewer *::before, .meteosat-viewer *::after { box-sizing: border-box; }

.mtv-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mtv-tab {
  appearance: none; border: 1px solid var(--mtv-line); background: transparent; color: inherit;
  padding: 4px 10px; border-radius: 999px; font: inherit; cursor: pointer;
}
.mtv-tab:hover { border-color: var(--mtv-accent); }
.mtv-tab.is-active { background: var(--mtv-accent); border-color: var(--mtv-accent); color: #fff; }
.mtv-title { font-weight: 600; margin-bottom: 8px; }

.mtv-stage { position: relative; background: #000; border-radius: 6px; overflow: hidden; }
.mtv-canvas { display: block; width: 100%; height: auto; max-height: 80vh; max-height: 80dvh; margin: 0 auto; object-fit: contain; touch-action: manipulation; }
.mtv-time {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 4px;
  background: rgba(0, 0, 0, .62); color: #fff; font-variant-numeric: tabular-nums; font-size: 13px;
}
.mtv-status {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; text-align: center; padding: 1em;
}
.mtv-status.is-visible { display: flex; }
.mtv-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .15); display: none; }
.mtv-progress.is-visible { display: block; }
.mtv-progress > span { display: block; height: 100%; width: 0; background: var(--mtv-accent); transition: width .15s linear; }

.mtv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mtv-btn {
  appearance: none; border: 1px solid var(--mtv-line); background: transparent; color: inherit;
  min-width: 36px; height: 32px; padding: 0 8px; border-radius: 6px; font: inherit; cursor: pointer;
}
.mtv-btn:hover { border-color: var(--mtv-accent); }
.mtv-play { min-width: 44px; background: var(--mtv-accent); border-color: var(--mtv-accent); color: #fff; }
.mtv-range { flex: 1 1 120px; min-width: 0; width: auto; accent-color: var(--mtv-accent); }
.mtv-speed {
  height: 32px; border: 1px solid var(--mtv-line); border-radius: 6px; background: transparent; color: inherit; font: inherit;
}
.mtv-speed option { color: #000; }
.mtv-credit { margin-top: 6px; font-size: 12px; color: var(--mtv-muted); }
.mtv-credit a { color: inherit; text-decoration: underline; }

.meteosat-viewer:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 16px; border-radius: 0; }
.meteosat-viewer:fullscreen .mtv-canvas { max-height: calc(100vh - 140px); }

.mtv-noscript img { max-width: 100%; height: auto; display: block; border-radius: 6px; }

@media (prefers-color-scheme: light) {
  .meteosat-viewer.mtv-auto {
    --mtv-bg: #f3f6f9; --mtv-fg: #17212b; --mtv-accent: #0b6cc4; --mtv-muted: #55667a; --mtv-line: rgba(0, 0, 0, .16);
  }
}
/* Dispositivi touch: bersagli di almeno 44 px */
@media (pointer: coarse) {
  .mtv-btn, .mtv-speed { min-height: 44px; min-width: 44px; }
  .mtv-tab { min-height: 40px; padding: 6px 14px; }
  .mtv-range { min-height: 44px; }
}

/* Layout in base alla larghezza del riquadro (non dello schermo) */
@container mtv (max-width: 560px) {
  .mtv-tab, .mtv-speed, .mtv-credit, .mtv-title { font-size: 13px; }
  .mtv-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .mtv-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  /* pulsanti sulla prima riga, cursore a tutta larghezza sulla seconda */
  .mtv-range { order: 5; flex: 1 0 100%; }
  .mtv-speed { margin-left: auto; }
  .mtv-time { font-size: 12px; padding: 2px 6px; left: 6px; bottom: 6px; }
}
@container mtv (max-width: 340px) {
  .mtv-btn[aria-label] { min-width: 34px; padding: 0 4px; }
  .mtv-speed { display: none; }
  .mtv-credit { font-size: 11px; }
}
@container mtv (min-width: 900px) {
  .mtv-tab, .mtv-speed, .mtv-title { font-size: 15px; }
  .mtv-controls { margin-top: 12px; }
  .mtv-time { font-size: 15px; padding: 4px 10px; }
}

/* Browser senza container queries: ripiego su media query */
@supports not (container-type: inline-size) {
  @media (max-width: 560px) {
    .mtv-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .mtv-tab { flex: 0 0 auto; white-space: nowrap; }
    .mtv-range { order: 5; flex: 1 0 100%; }
  }
}

/* Schermo intero / orizzontale su telefono */
@media (orientation: landscape) and (max-height: 500px) {
  .mtv-canvas { max-height: 70vh; max-height: 70dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .mtv-progress > span { transition: none; }
}