/* ================================================================
   S.O.G · Special Operations Group — internes Agenten-Interface
   Agenten-Design, angelehnt an das LIVE:KRIMI-Referenzlayout:
   Anthrazit, Stahlblau/Cyan-Akzent, geboxtes Emblem, Header-Fortschritt,
   uppercase Mono-Labels, Freigabe-Grün / Alarm-Rot.
   (Klassennamen & data-sm-Attribute bleiben kompatibel.)
   ================================================================ */

:root {
  /* Marke / Interaktion */
  --sm-primary: #35c6f0;        /* S.O.G-Cyan (Dienst-Interface) */
  --sm-primary-dark: #1f93bb;
  --sm-primary-soft: rgba(53,198,240,.14);
  --sm-secondary: #1a2230;
  --sm-accent: #35c6f0;

  /* Flächen (Anthrazit mit Blaustich) */
  --sm-bg: #0a0e14;
  --sm-bg-elev: #101620;
  --sm-bg-card: #141b25;
  --sm-bg-input: #1a2230;

  /* Text */
  --sm-text: #e9eff6;
  --sm-text-muted: #7d8b9c;
  --sm-text-faint: #4f5a68;

  /* Linien */
  --sm-border: #242e3b;
  --sm-border-soft: #1b232e;

  /* Status */
  --sm-success: #33d977;        /* Freigabe / OK */
  --sm-success-dark: #17351f;
  --sm-warning: #f0b03c;        /* Warnung */
  --sm-danger: #ff3b46;         /* Alarm */
  --sm-intel: #4aa8ff;

  --sm-radius: 14px;
  --sm-radius-lg: 20px;
  --sm-radius-sm: 9px;
  --sm-shadow: 0 10px 34px rgba(0,0,0,.55);
  --sm-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -10%, #121a26 0%, transparent 60%),
    var(--sm-bg);
  color: var(--sm-text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Layout --- */
.sm-container {
  max-width: 620px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.sm-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  gap: 22px;
}

/* --- Marken-Emblem (geboxtes S.O.G-Logo) --- */
.sm-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sm-brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .06em;
  padding: 10px 18px;
  border: 2px solid var(--sm-text);
  border-radius: 10px;
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sm-text);
  line-height: 1;
}
/* Eckwinkel-Akzente in Cyan */
.sm-brand-mark::before,
.sm-brand-mark::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border: 2px solid var(--sm-primary);
}
.sm-brand-mark::before { top: -5px; left: -5px; border-right: none; border-bottom: none; }
.sm-brand-mark::after  { bottom: -5px; right: -5px; border-left: none; border-top: none; }
.sm-brand-sub {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
  padding-left: .32em;
}

/* --- Überschriften / Branding-Text --- */
.sm-logo {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--sm-primary);
  text-transform: uppercase;
  line-height: 1.05;
}
.sm-logo-sub {
  font-size: .72rem;
  color: var(--sm-text-muted);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.sm-game-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sm-text);
  margin-bottom: 8px;
}
.sm-eyebrow {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
  font-weight: 700;
}

/* --- Header-Topbar (Marke · Fortschritt · Aktionen) --- */
.sm-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--sm-bg-elev);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  margin-bottom: 12px;
}
.sm-topbar-brand {
  display: flex; flex-direction: column; gap: 2px; flex: none;
}
.sm-topbar-brand .sm-tb-mark {
  font-weight: 900; letter-spacing: .12em; font-size: .95rem;
  text-transform: uppercase; color: var(--sm-text);
  border: 1.5px solid var(--sm-text); border-radius: 6px; padding: 3px 7px; line-height: 1;
}
.sm-topbar-brand .sm-tb-sub {
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sm-text-muted);
}

/* --- Fortschrittsbalken --- */
.sm-progress-wrap { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sm-progress-label {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sm-text-muted);
}
.sm-progress {
  height: 7px; background: var(--sm-bg-input);
  border: 1px solid var(--sm-border); border-radius: 20px; overflow: hidden;
}
.sm-progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sm-primary-dark), var(--sm-primary));
  border-radius: 20px; transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* --- Formular --- */
.sm-form {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 12px;
}
.sm-input {
  width: 100%;
  padding: 16px 20px;
  background: var(--sm-bg-input);
  border: 1.5px solid var(--sm-border);
  border-radius: var(--sm-radius);
  color: var(--sm-text);
  font-size: 1.1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  text-align: center;
}
.sm-input:focus {
  border-color: var(--sm-primary);
  box-shadow: 0 0 0 3px var(--sm-primary-soft);
}
.sm-input::placeholder { color: var(--sm-text-faint); }

/* --- Buttons --- */
.sm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px;
  border: none;
  border-radius: var(--sm-radius);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s, background .2s, border-color .2s, box-shadow .2s;
  text-transform: uppercase;
  letter-spacing: .08em;
  width: 100%;
}
.sm-btn:active { transform: translateY(1px) scale(.995); }

.sm-btn-primary {
  background: var(--sm-primary);
  color: #05131a;
  box-shadow: 0 6px 20px rgba(53,198,240,.20);
}
.sm-btn-primary:hover { background: #52d4fa; transform: translateY(-1px); }

.sm-btn-secondary {
  background: var(--sm-bg-input);
  color: var(--sm-text);
  border: 1.5px solid var(--sm-border);
}
.sm-btn-secondary:hover { border-color: var(--sm-primary); color: var(--sm-primary); }

.sm-btn-success {
  background: var(--sm-success);
  color: #04120a;
  box-shadow: 0 6px 20px rgba(51,217,119,.20);
}
.sm-btn-success:hover { background: #46e685; transform: translateY(-1px); }

.sm-btn-danger {
  background: var(--sm-danger);
  color: #fff;
}

.sm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Bottom-Navigation (Referenz: ZURÜCK · Team · WEITER) --- */
.sm-bottombar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: var(--sm-bg-elev);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  margin-top: 12px;
}
.sm-bottombar .sm-bb-team {
  flex: 1; text-align: center;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sm-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sm-navbtn {
  flex: none; width: auto; padding: 11px 20px; font-size: .82rem;
}

/* --- Fehlermeldung --- */
.sm-error {
  color: var(--sm-danger);
  font-size: .85rem; font-weight: 700;
  display: none;
  padding: 9px 12px;
  background: rgba(255,59,70,.1);
  border: 1px solid rgba(255,59,70,.3);
  border-radius: 8px;
}

/* --- HUD (Timer / Team / Punkte) --- */
.sm-hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: var(--sm-bg-elev);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  margin-bottom: 16px;
  position: sticky; top: 10px; z-index: 100;
  backdrop-filter: blur(10px);
}
.sm-hud-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sm-hud-label {
  font-size: .6rem; color: var(--sm-text-muted);
  text-transform: uppercase; letter-spacing: .18em;
}
.sm-hud-value {
  font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums;
  font-family: var(--sm-mono); color: var(--sm-text);
}
.sm-timer-warning { color: var(--sm-warning) !important; }
.sm-timer-critical { color: var(--sm-danger) !important; animation: sm-pulse .5s ease-in-out infinite alternate; }
@keyframes sm-pulse { from { opacity: 1; } to { opacity: .45; } }

/* --- Scoreboard --- */
.sm-scoreboard { width: 100%; }
.sm-scoreboard-title {
  font-size: .95rem; font-weight: 800; margin-bottom: 12px;
  color: var(--sm-primary); text-transform: uppercase; letter-spacing: .18em;
}
.sm-score-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-sm);
  margin-bottom: 8px;
  transition: all .3s;
}
.sm-score-highlight { border-color: var(--sm-primary); background: var(--sm-primary-soft); }
.sm-score-rank {
  font-size: 1rem; font-weight: 800; color: var(--sm-primary);
  min-width: 36px; font-family: var(--sm-mono);
}
.sm-score-team { flex: 1; font-weight: 700; font-size: 1rem; }
.sm-score-points { font-weight: 800; color: var(--sm-success); font-variant-numeric: tabular-nums; font-family: var(--sm-mono); }
.sm-score-time { font-size: .82rem; color: var(--sm-text-muted); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; font-family: var(--sm-mono); }

/* --- Ergebnis-Screen --- */
.sm-result-item { display: flex; justify-content: space-between; padding: 10px 0; font-size: 1.05rem; }
.sm-result-label { color: var(--sm-text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; align-self: center; }
.sm-result-value { font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--sm-mono); }
.sm-result-divider { height: 1px; background: var(--sm-border); margin: 4px 0; }
.sm-result-total .sm-result-value { font-size: 1.5rem; color: var(--sm-primary); }

/* --- Ready-Screen: Team-Badge --- */
.sm-team-badge {
  display: inline-block; padding: 8px 22px;
  background: var(--sm-primary-soft);
  border: 1.5px solid var(--sm-primary);
  border-radius: 50px;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .05em;
  color: var(--sm-primary);
}

/* --- Spielinhalt / Cards --- */
.sm-game-content { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.sm-card {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 20px;
}
.sm-card-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; }

/* Panel-Varianten mit Statusrahmen */
.sm-panel-terminal { border-color: var(--sm-success); }
.sm-panel-alarm { border-color: var(--sm-danger); }
.sm-panel-intel { border-color: var(--sm-intel); }

/* --- Standalone-Scoreboard (Projektion) --- */
.sm-scoreboard-fullscreen { max-width: 960px; margin: 0 auto; padding: 40px; }
.sm-scoreboard-fullscreen .sm-score-row { padding: 16px 24px; font-size: 1.25rem; }
.sm-scoreboard-fullscreen .sm-score-rank { font-size: 1.5rem; }
.sm-scoreboard-fullscreen .sm-score-team { font-size: 1.25rem; }
.sm-scoreboard-fullscreen .sm-score-points { font-size: 1.25rem; }

/* --- Responsive --- */
@media (max-width: 480px) {
  .sm-container { padding: 12px; }
  .sm-hud-value { font-size: 1.2rem; }
  .sm-logo { font-size: 1.5rem; }
  .sm-brand-mark { font-size: 1.4rem; }
  .sm-topbar { gap: 10px; }
}