/* ================================================================
   SAZEC Tracker – sazec-tracker.css  (v2.0.0)
   Design: dark-mode · glassmorphism · micro-animações
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --szt-accent:      #00e5a0;
  --szt-accent-dark: #00b87c;
  --szt-danger:      #ff4d6a;
  --szt-warning:     #ffa840;
  --szt-info:        #4daaff;
  --szt-bg:          #0d1117;
  --szt-surface:     rgba(255,255,255,.05);
  --szt-surface-hov: rgba(255,255,255,.09);
  --szt-border:      rgba(255,255,255,.10);
  --szt-text:        #e6edf3;
  --szt-muted:       #7d8590;
  --szt-radius:      1rem;
  --szt-radius-sm:   .5rem;
  --szt-shadow:      0 8px 32px rgba(0,0,0,.45);
  --szt-font:        'Inter', sans-serif;
  --szt-mono:        'JetBrains Mono', monospace;
  --szt-t:           .2s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
.szt-app *, .szt-historico *, .szt-ranking *,
.szt-app *::before, .szt-app *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   APP CONTAINER (compartilhado por todos os shortcodes)
   ═══════════════════════════════════════════════════════════ */
.szt-app,
.szt-historico,
.szt-ranking {
  font-family: var(--szt-font);
  background:  var(--szt-bg);
  color:       var(--szt-text);
  max-width:   480px;
  margin:      2rem auto;
  border-radius: var(--szt-radius);
  border:       1px solid var(--szt-border);
  box-shadow:   var(--szt-shadow);
  overflow:     hidden;
  transition:   box-shadow var(--szt-t);
}

.szt-app[data-status="running"] {
  box-shadow: 0 0 0 2px var(--szt-accent), var(--szt-shadow);
  animation:  szt-pulse-border 2s ease-in-out infinite;
}

@keyframes szt-pulse-border {
  0%,100% { box-shadow: 0 0 0 2px var(--szt-accent), var(--szt-shadow); }
  50%     { box-shadow: 0 0 0 5px rgba(0,229,160,.25), var(--szt-shadow); }
}

/* ── Header ──────────────────────────────────────────────── */
.szt-header {
  background:   linear-gradient(135deg, #161b22 0%, #0d1117 100%);
  padding:      1.1rem 1.4rem;
  border-bottom:1px solid var(--szt-border);
}

.szt-logo {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  color:       var(--szt-accent);
  font-size:   1rem;
  font-weight: 700;
  letter-spacing: .4px;
}

.szt-badge {
  font-size:    .6rem;
  font-weight:  600;
  background:   rgba(0,229,160,.12);
  border:       1px solid rgba(0,229,160,.3);
  border-radius:.25rem;
  padding:      .1rem .4rem;
  color:        var(--szt-accent);
  letter-spacing:.5px;
  margin-left:  auto;
}

/* ── Painel pré-início ───────────────────────────────────── */
.szt-prestart {
  padding:        .9rem 1rem;
  background:     rgba(0,0,0,.15);
  border-bottom:  1px solid var(--szt-border);
  transition:     opacity var(--szt-t), max-height .35s ease;
  max-height:     200px;
  overflow:       hidden;
}

.szt-prestart.is-hidden {
  opacity:    0;
  max-height: 0;
  padding:    0;
}

.szt-prestart__row {
  display: flex;
  gap:     .75rem;
}

.szt-prestart__field {
  flex:        1;
  display:     flex;
  flex-direction: column;
  gap:         .3rem;
}

.szt-prestart__field label {
  font-size:   .65rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:       var(--szt-muted);
}

.szt-input {
  background:  rgba(255,255,255,.06);
  border:      1px solid var(--szt-border);
  border-radius: var(--szt-radius-sm);
  color:       var(--szt-text);
  font-family: var(--szt-mono);
  font-size:   .95rem;
  padding:     .45rem .65rem;
  outline:     none;
  transition:  border-color var(--szt-t), box-shadow var(--szt-t);
  width:       100%;
}

.szt-input:focus {
  border-color: var(--szt-accent);
  box-shadow:   0 0 0 3px rgba(0,229,160,.15);
}

/* ── Métricas ────────────────────────────────────────────── */
.szt-metrics {
  display: grid;
  gap:     .6rem;
  padding: 1rem;
}

.szt-metrics--primary {
  grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg, #0d1117 0%, #0a0f14 100%);
}

.szt-metrics--secondary {
  grid-template-columns: repeat(3, 1fr);
  padding-top: 0;
  background: #0a0f14;
  border-bottom: 1px solid var(--szt-border);
}

.szt-metric-card {
  background:    var(--szt-surface);
  border:        1px solid var(--szt-border);
  border-radius: var(--szt-radius-sm);
  padding:       .8rem .4rem;
  text-align:    center;
  transition:    background var(--szt-t), transform var(--szt-t);
  backdrop-filter: blur(8px);
}

.szt-metric-card:hover { background: var(--szt-surface-hov); transform: translateY(-2px); }

.szt-metric-label {
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color:          var(--szt-muted);
  margin-bottom:  .35rem;
}

.szt-metric-value {
  font-family:       var(--szt-mono);
  font-size:         1.4rem;
  font-weight:       600;
  color:             var(--szt-accent);
  line-height:       1;
  font-variant-numeric: tabular-nums;
}

.szt-metric--main .szt-metric-value { font-size: 1.75rem; }

.szt-metrics--secondary .szt-metric-value { font-size: 1.15rem; }

.szt-metric-unit { font-size: .6rem; color: var(--szt-muted); margin-top: .3rem; }

/* ── Barra de meta ─────────────────────────────────────────── */
.szt-goal-bar {
  padding:       .5rem 1rem .6rem;
  background:    rgba(0,0,0,.2);
  border-bottom: 1px solid var(--szt-border);
}

.szt-goal-bar__track {
  height:        6px;
  background:    rgba(255,255,255,.08);
  border-radius: 3px;
  overflow:      hidden;
  margin-bottom: .3rem;
}

.szt-goal-bar__fill {
  height:           100%;
  background:       linear-gradient(90deg, var(--szt-accent-dark), var(--szt-accent));
  border-radius:    3px;
  transition:       width .5s ease;
}

.szt-goal-bar.is-complete .szt-goal-bar__fill { background: linear-gradient(90deg, #ffa840,#ffd040); }

.szt-goal-bar__labels {
  display:     flex;
  justify-content: space-between;
  font-size:   .7rem;
  font-family: var(--szt-mono);
  color:       var(--szt-muted);
}

/* ── Sparkline ─────────────────────────────────────────────── */
.szt-sparkline-wrap {
  background:    rgba(0,0,0,.25);
  border-bottom: 1px solid var(--szt-border);
}

.szt-sparkline-wrap canvas {
  display: block;
  width:   100%;
}

/* ── GPS status ──────────────────────────────────────────── */
.szt-gps-status {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  padding:       .55rem 1rem;
  font-size:     .75rem;
  color:         var(--szt-muted);
  border-bottom: 1px solid var(--szt-border);
  background:    rgba(0,0,0,.2);
}

.szt-gps-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--szt-muted);
  flex-shrink:   0;
  transition:    background var(--szt-t);
}

.szt-gps-dot[data-status="ok"] {
  background:  var(--szt-accent);
  box-shadow:  0 0 0 3px rgba(0,229,160,.25);
  animation:   szt-blink 1.5s ease-in-out infinite;
}

.szt-gps-dot[data-status="buscando"] { background: var(--szt-warning); animation: szt-spin-dot 1s linear infinite; }
.szt-gps-dot[data-status="erro"]    { background: var(--szt-danger); }
.szt-gps-dot[data-status="paused"]  { background: var(--szt-warning); }

.szt-wakelock-icon { margin-left: auto; font-size: .75rem; }

@keyframes szt-blink {
  0%,100%{ opacity:1; } 50%{ opacity:.35; }
}

@keyframes szt-spin-dot {
  0%  { transform:scale(1);   opacity:1; }
  50% { transform:scale(1.6); opacity:.6; }
  100%{ transform:scale(1);   opacity:1; }
}

/* ── Mapa ────────────────────────────────────────────────── */
.szt-map-wrap {
  position:      relative;
  border-bottom: 1px solid var(--szt-border);
}

#szt-map { width:100%; height:280px; background:#0d1117; }

#szt-map .leaflet-tile { filter: brightness(.85) saturate(.9) invert(1) hue-rotate(180deg); }
#szt-map .leaflet-control-zoom a { background:#161b22; color:var(--szt-text); border-color:var(--szt-border); }
#szt-map .leaflet-control-attribution { background:rgba(13,17,23,.75); color:var(--szt-muted); font-size:.55rem; }
#szt-map .leaflet-control-attribution a { color:var(--szt-accent); }

/* Botões de overlay no mapa */
.szt-btn-follow,
.szt-btn-layer {
  position:      absolute;
  right:         .75rem;
  z-index:       1000;
  width:         2.4rem;
  height:        2.4rem;
  border-radius: 50%;
  border:        none;
  background:    #161b22;
  color:         var(--szt-muted);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 2px 8px rgba(0,0,0,.5);
  transition:    background var(--szt-t), color var(--szt-t), transform var(--szt-t);
}

.szt-btn-follow { bottom: 3.1rem; }
.szt-btn-layer  { bottom: .75rem; }

.szt-btn-follow:hover, .szt-btn-layer:hover { background:#1c2330; color:var(--szt-text); transform:scale(1.08); }

.szt-btn-follow.is-active {
  background: var(--szt-accent);
  color:      #0d1117;
  box-shadow: 0 0 0 3px rgba(0,229,160,.30), 0 2px 8px rgba(0,0,0,.5);
}

.szt-btn-layer.is-active { background:#ffa840; color:#0d1117; }

/* ── Marcadores customizados ─────────────────────────────── */
.szt-marker-atual {
  width:        18px; height:18px;
  border-radius:50%;
  background:   var(--szt-accent);
  border:       3px solid #fff;
  box-shadow:   0 0 0 4px rgba(0,229,160,.35);
  animation:    szt-ping 1.8s ease-out infinite;
}

@keyframes szt-ping {
  0%  { box-shadow:0 0 0  4px rgba(0,229,160,.35); }
  70% { box-shadow:0 0 0 12px rgba(0,229,160,.0);  }
  100%{ box-shadow:0 0 0  4px rgba(0,229,160,.0);  }
}

.szt-marker-inicio {
  width:28px; height:28px;
  border-radius: 50% 50% 50% 0;
  transform:     rotate(-45deg);
  background:    linear-gradient(135deg,#3cc74e,#1a8c2a);
  border:        2px solid #fff;
  box-shadow:    0 2px 6px rgba(0,0,0,.4);
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.szt-marker-inicio span {
  display:  block;
  transform:rotate(45deg);
  font-size:.65rem;
  font-weight:800;
  color:#fff;
}

/* ── Auto-pause banner ───────────────────────────────────── */
.szt-autopause-notice {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           .75rem;
  padding:       .7rem 1rem;
  background:    rgba(255,168,64,.1);
  border-top:    2px solid var(--szt-warning);
  border-bottom: 1px solid var(--szt-border);
  font-size:     .82rem;
  color:         var(--szt-warning);
}

/* ── Feedback ─────────────────────────────────────────────── */
.szt-feedback {
  display:       none;
  margin:        .6rem 1rem 0;
  padding:       .65rem 1rem;
  border-radius: var(--szt-radius-sm);
  font-size:     .84rem;
  font-weight:   500;
  border-left:   3px solid currentColor;
}

.szt-feedback[data-tipo="success"] { background:rgba(0,229,160,.10);  color:var(--szt-accent); }
.szt-feedback[data-tipo="error"]   { background:rgba(255,77,106,.10); color:var(--szt-danger); }
.szt-feedback[data-tipo="warning"] { background:rgba(255,168,64,.10); color:var(--szt-warning); }
.szt-feedback[data-tipo="info"]    { background:rgba(77,170,255,.10); color:var(--szt-info); }

/* ── Controles ────────────────────────────────────────────── */
.szt-controls {
  display:         flex;
  gap:             .65rem;
  padding:         1rem;
  justify-content: center;
}

/* ── Botões ───────────────────────────────────────────────── */
.szt-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .4rem;
  font-family:     var(--szt-font);
  font-size:       .84rem;
  font-weight:     600;
  border:          none;
  border-radius:   var(--szt-radius-sm);
  padding:         .65rem 1rem;
  cursor:          pointer;
  transition:      background var(--szt-t), transform var(--szt-t), box-shadow var(--szt-t), opacity var(--szt-t);
  white-space:     nowrap;
  letter-spacing:  .3px;
  min-width:       6.5rem;
}

.szt-btn:active:not(:disabled) { transform: scale(.95); }
.szt-btn:disabled { opacity:.35; cursor:not-allowed; }

.szt-btn--primary {
  background: linear-gradient(135deg, var(--szt-accent) 0%, var(--szt-accent-dark) 100%);
  color:      #0d1117;
  box-shadow: 0 4px 14px rgba(0,229,160,.30);
}
.szt-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg,#17ffc0 0%, var(--szt-accent) 100%);
  box-shadow: 0 6px 20px rgba(0,229,160,.45);
  transform:  translateY(-1px);
}

.szt-btn--secondary {
  background: var(--szt-surface);
  color:      var(--szt-text);
  border:     1px solid var(--szt-border);
}
.szt-btn--secondary:hover:not(:disabled) {
  background:   var(--szt-surface-hov);
  border-color: rgba(255,255,255,.25);
  transform:    translateY(-1px);
}

.szt-btn--danger {
  background: linear-gradient(135deg, var(--szt-danger) 0%, #c73254 100%);
  color:      #fff;
  box-shadow: 0 4px 14px rgba(255,77,106,.25);
}
.szt-btn--danger:hover:not(:disabled) {
  background: linear-gradient(135deg,#ff6b84 0%, var(--szt-danger) 100%);
  box-shadow: 0 6px 20px rgba(255,77,106,.40);
  transform:  translateY(-1px);
}

.szt-btn--small { min-width:auto; padding:.4rem .75rem; font-size:.78rem; }

.szt-btn--micro {
  min-width:   auto;
  padding:     .3rem .6rem;
  font-size:   .72rem;
  border-radius:.35rem;
  gap:         .3rem;
}

/* ── Resumo pós-caminhada ─────────────────────────────────── */
.szt-summary {
  margin:    0 1rem 1.25rem;
  background:var(--szt-surface);
  border:    1px solid var(--szt-border);
  border-radius: var(--szt-radius-sm);
  padding:   1.25rem;
  animation: szt-slide-in .4s cubic-bezier(.22,1,.36,1);
}

@keyframes szt-slide-in {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

.szt-summary__title {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--szt-accent);
  margin-bottom:.9rem;
  text-align:  center;
}

.szt-summary__table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   1.1rem;
  font-size:       .85rem;
}

.szt-summary__table th,
.szt-summary__table td {
  padding:      .45rem .4rem;
  border-bottom:1px solid var(--szt-border);
}

.szt-summary__table th { color:var(--szt-muted); font-weight:500; text-align:left; }
.szt-summary__table td { font-family:var(--szt-mono); font-weight:600; text-align:right; }
.szt-summary__table tr:last-child th,
.szt-summary__table tr:last-child td { border-bottom:none; }

.szt-summary__actions {
  display:   flex;
  gap:       .5rem;
}

.szt-summary__actions .szt-btn { flex:1; justify-content:center; }

/* ═══════════════════════════════════════════════════════════
   HISTÓRICO
   ═══════════════════════════════════════════════════════════ */
.szt-histo-stats {
  display:       grid;
  grid-template-columns: repeat(4,1fr);
  gap:           .4rem;
  padding:       .9rem;
  background:    linear-gradient(180deg,#0d1117 0%,#0a0f14 100%);
  border-bottom: 1px solid var(--szt-border);
}

.szt-histo-stat {
  background:    var(--szt-surface);
  border:        1px solid var(--szt-border);
  border-radius: var(--szt-radius-sm);
  padding:       .7rem .4rem;
  text-align:    center;
}

.szt-histo-stat--accent { border-color:rgba(0,229,160,.25); background:rgba(0,229,160,.06); }

.szt-histo-stat__label {
  font-size:      .58rem;
  font-weight:    600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:          var(--szt-muted);
  margin-bottom:  .3rem;
}

.szt-histo-stat__value {
  font-family: var(--szt-mono);
  font-size:   1rem;
  font-weight: 600;
  color:       var(--szt-accent);
}

/* Tabs */
.szt-histo-tabs {
  display:    flex;
  border-bottom: 1px solid var(--szt-border);
  background: rgba(0,0,0,.2);
}

.szt-histo-tab {
  flex:        1;
  padding:     .65rem;
  background:  none;
  border:      none;
  color:       var(--szt-muted);
  font-family: var(--szt-font);
  font-size:   .8rem;
  font-weight: 600;
  cursor:      pointer;
  border-bottom:2px solid transparent;
  transition:  color var(--szt-t), border-color var(--szt-t);
}

.szt-histo-tab:hover  { color:var(--szt-text); }
.szt-histo-tab.active { color:var(--szt-accent); border-bottom-color:var(--szt-accent); }

/* Lista de caminhadas */
.szt-histo-list {
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 120px;
}

.szt-walk-card {
  display:       flex;
  gap:           .75rem;
  background:    var(--szt-surface);
  border:        1px solid var(--szt-border);
  border-radius: var(--szt-radius-sm);
  padding:       .85rem;
  transition:    background var(--szt-t);
}

.szt-walk-card:hover { background:var(--szt-surface-hov); }

.szt-walk-card__pos {
  font-family: var(--szt-mono);
  font-size:   .7rem;
  color:       var(--szt-muted);
  min-width:   1.5rem;
  padding-top: .15rem;
}

.szt-walk-card__body { flex:1; }

.szt-walk-card__top {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   .35rem;
}

.szt-walk-dist {
  font-family: var(--szt-mono);
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--szt-accent);
}

.szt-walk-date { font-size:.72rem; color:var(--szt-muted); }

.szt-walk-card__mid {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem;
  font-size:   .73rem;
  color:       var(--szt-muted);
  margin-bottom:.35rem;
}

.szt-walk-meta {
  display:       block;
  font-size:     .68rem;
  color:         var(--szt-warning);
  margin-bottom: .35rem;
}

.szt-walk-card__actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* Loading / empty */
.szt-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .6rem;
  padding:         2rem;
  color:           var(--szt-muted);
  font-size:       .85rem;
}

.szt-spinner {
  width:        20px; height:20px;
  border:       2px solid var(--szt-border);
  border-top-color: var(--szt-accent);
  border-radius:50%;
  animation:    szt-spin .7s linear infinite;
}

@keyframes szt-spin { to { transform:rotate(360deg); } }

.szt-empty {
  text-align:  center;
  padding:     2rem;
  color:       var(--szt-muted);
  font-size:   .85rem;
}

.szt-error { color:var(--szt-danger); }

/* ── Modal de replay ─────────────────────────────────────── */
.szt-replay-modal {
  position: fixed;
  inset:    0;
  z-index:  9999;
  display:  flex;
  align-items: center;
  justify-content: center;
}

.szt-replay-modal__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(3px);
}

.szt-replay-modal__inner {
  position:      relative;
  z-index:       1;
  background:    #0d1117;
  border:        1px solid var(--szt-border);
  border-radius: var(--szt-radius);
  width:         min(92vw, 480px);
  overflow:      hidden;
  box-shadow:    0 24px 64px rgba(0,0,0,.7);
  animation:     szt-slide-in .35s ease;
}

.szt-replay-map { width:100%; height:300px; background:#0d1117; }

.szt-replay-map .leaflet-tile { filter: brightness(.85) saturate(.9) invert(1) hue-rotate(180deg); }

.szt-replay-close {
  position:    absolute;
  top:         .6rem;
  right:       .6rem;
  z-index:     10;
  width:       2.2rem; height:2.2rem;
  border-radius:50%;
  background:  rgba(13,17,23,.85);
  border:      1px solid var(--szt-border);
  color:       var(--szt-text);
  font-size:   1rem;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background var(--szt-t);
}
.szt-replay-close:hover { background:var(--szt-danger); }

.szt-replay-info {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .6rem 1rem;
  padding:     .75rem 1rem;
  font-size:   .8rem;
  color:       var(--szt-muted);
  border-bottom:1px solid var(--szt-border);
  background:  rgba(0,0,0,.2);
}

.szt-replay-controls {
  display:   flex;
  gap:       .5rem;
  padding:   .75rem 1rem;
}

.szt-replay-controls .szt-btn { flex:1; justify-content:center; }

/* ═══════════════════════════════════════════════════════════
   RANKING
   ═══════════════════════════════════════════════════════════ */
.szt-ranking-list {
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 120px;
}

.szt-ranking-row {
  display:       flex;
  align-items:   center;
  gap:           .65rem;
  background:    var(--szt-surface);
  border:        1px solid var(--szt-border);
  border-radius: var(--szt-radius-sm);
  padding:       .7rem .85rem;
  transition:    background var(--szt-t);
}

.szt-ranking-row--me {
  border-color: rgba(0,229,160,.4);
  background:   rgba(0,229,160,.07);
}

.szt-rank-medal { font-size:1.35rem; min-width:2rem; text-align:center; }
.szt-rank-num   { font-family:var(--szt-mono); font-size:.95rem; color:var(--szt-muted); }

.szt-rank-avatar {
  width:         36px; height:36px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--szt-border);
  flex-shrink:   0;
}

.szt-rank-info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            .15rem;
  min-width:      0;
}

.szt-rank-name {
  font-size:   .88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.szt-rank-name em { font-size:.75rem; color:var(--szt-accent); font-style:normal; }

.szt-rank-meta { font-size:.68rem; color:var(--szt-muted); }

.szt-rank-dist {
  font-family: var(--szt-mono);
  font-weight: 700;
  color:       var(--szt-accent);
  font-size:   .95rem;
  white-space: nowrap;
}

.szt-notice { padding:1.5rem; text-align:center; color:var(--szt-muted); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .szt-metric-value        { font-size:1.25rem; }
  .szt-metric--main .szt-metric-value { font-size:1.5rem; }
  .szt-controls            { flex-direction:column; }
  .szt-btn                 { width:100%; }
  #szt-map                 { height:220px; }
  .szt-histo-stats         { grid-template-columns:repeat(2,1fr); }
  .szt-replay-map          { height:220px; }
  .szt-summary__actions    { flex-direction:column; }
}