:root {
      --bg: #1a1a1a; --fg: #e8e8e8; --muted: #888;
      --p1: #d96b6b; --p2: #6bd9a5;
      --p3: #c89af0; --p4: #f0c060;
      --p5: #6ad5e0; --p6: #e890c0;
      --p7: #b8e070; --p8: #7882e0;
      --neutral: #888;
      --panel: #252525; --border: #333;
    }
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, Segoe UI, Roboto, sans-serif;
      background: var(--bg); color: var(--fg);
      margin: 0; padding: 1rem;
    }
    h1 { font-weight: 600; margin: 0 0 0.5rem; font-size: 1.4rem; }
    .meta { color: var(--muted); font-size: 0.85em; margin-bottom: 0.5rem; }
    .pill {
      display: inline-block; padding: 0.15em 0.6em;
      border-radius: 999px; font-size: 0.8em;
      background: #4a4; color: #fff;
    }
    .pill.disconnected { background: #a44; }
    .controls {
      margin-bottom: 0.6rem;
      display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap;
      font-size: 1.05rem; /* groessere Default-Schrift fuer die ganze Zeile */
    }
    /* Inline-styles auf Labels/Buttons in der Controls-Bar ueberschreiben,
       damit "Dein Name", Slot-Buttons, "Schicken"-Slider und "Du steuerst …"
       alle einheitlich groesser werden. */
    .controls > label,
    .controls > label > span,
    .controls > .btn,
    .controls > #controllingLabel,
    .controls > span {
      font-size: 1.0rem !important;
    }
    .controls > .btn {
      padding: 0.45em 1.0em;
    }
    .controls input[type="text"] {
      font-size: 1.0rem !important;
      padding: 0.35em 0.7em !important;
      width: 170px !important;
    }
    .controls input[type="range"] {
      width: 150px !important;
    }
    /* Lobby-Panel */
    #lobbyPanel {
      background: linear-gradient(135deg, #2a2535 0%, #1f1c2a 100%);
      border: 1px solid #5a4d6a;
      border-radius: 10px;
      padding: 1.1rem 1.4rem;
      margin-bottom: 0.8rem;
      box-shadow: 0 4px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    #lobbyPanel .lobby-title {
      display: flex; align-items: baseline; gap: 0.6rem;
      margin: 0 0 0.9rem;
    }
    #lobbyPanel .lobby-title h3 {
      margin: 0; color: #d4afff; font-size: 1.25rem; font-weight: 700;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 4px rgba(150,100,200,0.4);
    }
    #lobbyPanel .lobby-title .lobby-sub {
      color: #998; font-size: 0.85em; font-style: italic;
    }
    .lobby-row {
      display: flex; align-items: center; gap: 0.6rem;
      flex-wrap: wrap; margin: 0.5rem 0;
      font-size: 0.92em;
    }
    .lobby-row label { color: #ccc; }
    .lobby-row select, .slot-config-table select {
      background: #1a1822; color: var(--fg);
      border: 1px solid #4a4258; border-radius: 5px;
      padding: 0.35em 0.7em; font-size: 0.95em;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .lobby-row select:hover, .slot-config-table select:hover {
      border-color: #8a7aaa; background: #25212e;
    }
    /* Auffaelliger Start-Button */
    #startMatchBtn {
      margin-left: auto;
      padding: 0.55em 1.4em;
      font-size: 1em; font-weight: 700;
      background: linear-gradient(135deg, #4a8a3a, #6abf48);
      border: 1px solid #88e060;
      color: #fff;
      box-shadow: 0 2px 8px rgba(106,191,72,0.35);
      transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
    }
    #startMatchBtn:hover {
      background: linear-gradient(135deg, #5aa54a, #80d858);
      box-shadow: 0 4px 14px rgba(106,191,72,0.55);
      transform: translateY(-1px);
    }
    #startMatchBtn:active { transform: translateY(0); }
    .slot-config-table {
      width: 100%; border-collapse: separate; border-spacing: 0;
      font-size: 0.92em;
      margin-top: 0.4rem;
    }
    .slot-config-table th, .slot-config-table td {
      padding: 0.55em 0.6em; text-align: left;
      border-bottom: 1px solid #38324a;
    }
    .slot-config-table th {
      color: #aaa; font-weight: 600;
      font-size: 0.8em; letter-spacing: 0.05em; text-transform: uppercase;
      background: rgba(255,255,255,0.02);
    }
    .slot-config-table tr:last-child td { border-bottom: none; }
    .slot-config-table tr.slot-row { transition: background 0.15s; }
    .slot-config-table tr.slot-row:hover { background: rgba(120,100,160,0.10); }
    .slot-config-table tr.slot-row.is-me { background: rgba(150,120,200,0.13); }
    .slot-config-table .leader-cell {
      display: flex; align-items: center; gap: 0.5rem;
    }
    .slot-config-table .leader-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.2em; font-weight: 700;
      box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
    }
    .leader-avatar.p1 { background: radial-gradient(#f0a0a0, #b04848); }
    .leader-avatar.p2 { background: radial-gradient(#a0e0c0, #4a9a72); }
    .leader-avatar.p3 { background: radial-gradient(#e0bcf5, #8a5dbc); }
    .leader-avatar.p4 { background: radial-gradient(#f5d890, #c89030); }
    .leader-avatar.p5 { background: radial-gradient(#a0eaef, #3a98a8); }
    .leader-avatar.p6 { background: radial-gradient(#f5b8d8, #b04580); }
    .leader-avatar.p7 { background: radial-gradient(#daee9a, #6a9830); }
    .leader-avatar.p8 { background: radial-gradient(#a0a8f0, #404880); }
    .slot-config-table .you-tag {
      font-size: 0.75em; color: #fff;
      background: #c89af0; padding: 1px 6px; border-radius: 3px;
      margin-left: 0.4em;
    }
    /* Anfuehrer-Auswahl pro Slot — kompakter Dropdown unter dem Anfuehrer-Namen. */
    .slot-config-table .leader-select {
      margin-top: 4px;
      font-size: 0.82em;
      padding: 2px 4px;
      max-width: 130px;
    }
    /* Anzeige: wer sitzt im Slot? Mensch-Name + Bereit-Status */
    .slot-config-table .human-tag {
      display: inline-block; font-size: 0.78em; font-weight: 600;
      background: #2d6a8a; color: #fff;
      padding: 1px 8px; border-radius: 3px;
      margin-top: 2px;
    }
    .slot-config-table .ready-tag {
      display: inline-block; font-size: 0.78em; font-weight: 700;
      padding: 2px 8px; border-radius: 12px;
      margin-left: 0.4em;
      vertical-align: middle;
    }
    .slot-config-table .ready-tag.is-ready    { background: #4eaa55; color: #fff; }
    .slot-config-table .ready-tag.not-ready   { background: #555;    color: #fff; }
    .slot-config-table .ready-tag.is-ai       { background: #444;    color: #aaa; font-weight: 500; }
    .slot-config-table .ready-toggle {
      margin-left: 0.6em; padding: 4px 12px;
      font-size: 0.85em; font-weight: 700;
      border: 1px solid #4eaa55; border-radius: 4px;
      background: transparent; color: #6ee37a; cursor: pointer;
      transition: background 0.15s, transform 0.1s;
    }
    .slot-config-table .ready-toggle:hover  { background: rgba(78,170,85,0.15); }
    .slot-config-table .ready-toggle.active { background: #4eaa55; color: #fff; }
    .slot-config-table .ready-toggle:active { transform: translateY(1px); }
    /* Status-Zeile unter der Tabelle */
    .ready-status {
      margin-top: 0.5rem; padding: 0.4em 0.7em;
      font-size: 0.92em; font-weight: 600;
      border-radius: 4px;
    }
    .ready-status.all-ready { background: rgba(78,170,85,0.15); color: #80f0a0; border: 1px solid #4eaa55; }
    .ready-status.waiting   { background: rgba(180,140,80,0.15); color: #ffd066; border: 1px solid #b08a3a; }
    #startMatchBtn:disabled {
      background: #333; color: #777; cursor: not-allowed;
      box-shadow: none; transform: none;
    }
    .lobby-help {
      margin-top: 0.6rem; padding: 0.5em 0.7em;
      background: rgba(120,100,160,0.08);
      border-left: 3px solid #8a7aaa;
      border-radius: 3px;
      font-size: 0.8em; color: #aaa; line-height: 1.5;
    }
    .lobby-help b { color: #ccc; }
    .lobby-help .style-aggressive { color: #e69090; }
    .lobby-help .style-balanced   { color: #cccc88; }
    .lobby-help .style-defensive  { color: #88c0e0; }
    .map-info {
      color: #999; font-size: 0.85em; font-style: italic;
      margin-left: 0.4rem;
    }

    /* Pre-Lobby: Server-Browser */
    #serverBrowser {
      position: relative;
      max-width: 1080px; margin: 0.5rem auto 2rem;
      padding: 0;
      overflow: hidden;
    }

    /* Hero-Bereich oben mit animiertem Wellen-Hintergrund */
    .sb-hero {
      position: relative;
      padding: 2.2rem 2rem 1.5rem;
      background:
        radial-gradient(circle at 20% 0%, rgba(150,100,200,0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(80,150,200,0.18) 0%, transparent 55%),
        linear-gradient(135deg, #1a1830 0%, #0e1424 100%);
      border: 1px solid #4a3d6a;
      border-radius: 12px 12px 0 0;
      overflow: hidden;
    }
    .sb-hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        repeating-linear-gradient(45deg,
          rgba(120,180,220,0.04) 0 1px,
          transparent 1px 18px);
      animation: heroShimmer 22s linear infinite;
    }
    @keyframes heroShimmer {
      from { background-position: 0 0; }
      to   { background-position: 200px 200px; }
    }
    .sb-hero-row {
      display: flex; align-items: center; gap: 1rem;
      position: relative;
    }
    .sb-logo {
      width: 64px; height: 64px;
      filter: drop-shadow(0 3px 10px rgba(240,192,96,0.4));
      flex-shrink: 0;
    }
    .sb-hero h2 {
      margin: 0; color: #fff; font-size: 2rem; font-weight: 700;
      letter-spacing: 0.02em;
      background: linear-gradient(90deg, #f0c060 0%, #c89af0 60%, #88a8e8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .sb-hero .sb-tagline {
      margin: 0.2rem 0 0; color: #b0a0c8; font-style: italic; font-size: 1em;
    }
    .sb-hero .sb-pitch {
      margin: 1rem 0 0; color: #998; font-size: 0.88em; line-height: 1.55;
      max-width: 640px;
    }
    .sb-hero-stats {
      display: flex; flex-wrap: wrap; gap: 0.45rem;
      margin-top: 1.1rem; position: relative;
    }
    .sb-stat {
      font-size: 0.78em; color: #c8b8e8;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(200,154,240,0.28);
      border-radius: 999px;
      padding: 0.28em 0.75em;
    }
    .sb-stat b {
      color: #fff; font-weight: 800; margin-right: 0.2em;
    }
    /* Versions-Badge unten rechts in der Hero, dezent. */
    .sb-version {
      position: absolute; right: 1rem; bottom: 0.6rem;
      font-family: Consolas, monospace;
      font-size: 0.72em; color: #776688;
      opacity: 0.75;
      pointer-events: none;
      user-select: none;
    }

    /* Body-Bereich: Match-Erstellung + Liste + Showcase */
    .sb-body {
      background: linear-gradient(180deg, #1f1c2a 0%, #1a1822 100%);
      border: 1px solid #4a3d6a; border-top: none;
      border-radius: 0 0 12px 12px;
      padding: 1.2rem 1.4rem 1.5rem;
    }

    .sb-play-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
      gap: 1rem;
      align-items: start;
    }
    .sb-side {
      display: flex; flex-direction: column; gap: 0.85rem;
    }
    .sb-panel {
      background: rgba(0,0,0,0.18);
      border: 1px solid #3a3348;
      border-radius: 10px;
      padding: 0.95rem 1rem 1.05rem;
    }
    .sb-panel-play {
      background: rgba(0,0,0,0.12);
      min-height: 100%;
    }

    .sb-section-title {
      color: #c89af0; font-size: 0.78em; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      margin: 0 0 0.5rem;
    }
    .sb-section-tight { margin-top: 1.05rem; }
    .sb-section-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.5rem; margin-bottom: 0.55rem;
    }

    .sb-name-row {
      display: flex; flex-direction: column; gap: 0.35rem;
      margin-bottom: 0.15rem;
      font-size: 0.82em; color: #a89ab8;
    }
    .sb-name-row input,
    .sb-create-row input {
      width: 100%; box-sizing: border-box;
      background: #14111c; color: #fff;
      border: 1px solid #4a4258; border-radius: 6px;
      padding: 0.6em 0.9em; font-size: 0.95em;
      transition: border-color 0.15s, background 0.15s;
    }
    .sb-name-row input:focus,
    .sb-create-row input:focus {
      outline: none; border-color: #c89af0;
      background: #1a1626;
      box-shadow: 0 0 0 3px rgba(200,154,240,0.15);
    }

    .sb-create-row {
      display: flex; gap: 0.5rem; margin-bottom: 0.25rem;
    }
    .sb-create-row input { flex: 1; width: auto; }
    .sb-btn {
      padding: 0.6em 1.4em; border-radius: 6px;
      border: 1px solid #88e060;
      background: linear-gradient(135deg, #4a8a3a 0%, #6abf48 100%);
      color: #fff; font-weight: 700; font-size: 0.95em;
      cursor: pointer; white-space: nowrap;
      box-shadow: 0 2px 8px rgba(106,191,72,0.3);
      transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
    }
    .sb-btn:hover {
      background: linear-gradient(135deg, #5aa54a 0%, #80d858 100%);
      box-shadow: 0 4px 14px rgba(106,191,72,0.55);
      transform: translateY(-1px);
    }
    .sb-btn:active { transform: translateY(0); }

    .sb-howto {
      list-style: none; margin: 0 0 0.75rem; padding: 0;
      display: flex; flex-direction: column; gap: 0.55rem;
    }
    .sb-howto li {
      display: flex; gap: 0.65rem; align-items: flex-start;
      color: #c8c0d8; font-size: 0.88em; line-height: 1.4;
    }
    .sb-howto b { color: #f0e8ff; font-weight: 700; }
    .sb-step {
      flex-shrink: 0;
      width: 1.55rem; height: 1.55rem;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.78em; font-weight: 800;
      color: #1a1028;
      background: linear-gradient(135deg, #c89af0, #88d8b0);
      box-shadow: 0 0 10px rgba(200,154,240,0.35);
    }

    .sb-link-btn {
      width: 100%;
      background: rgba(120,100,180,0.12);
      border: 1px solid #5a4a7a;
      color: #d4c0f0;
      border-radius: 7px;
      padding: 0.5em 0.8em;
      font-size: 0.88em; font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .sb-link-btn:hover {
      background: rgba(150,120,220,0.22);
      border-color: #8a6ad4;
      color: #fff;
    }
    .sb-link-btn-sm {
      width: auto;
      padding: 0.25em 0.65em;
      font-size: 0.78em;
      letter-spacing: 0.02em;
    }

    .sb-leaders {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.45rem;
    }
    .sb-leader {
      display: flex; flex-direction: column; align-items: center;
      gap: 0.28rem;
      padding: 0.45rem 0.25rem 0.5rem;
      border-radius: 8px;
      background: rgba(20,16,32,0.55);
      border: 1px solid #3a3348;
      text-align: center;
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .sb-leader:hover {
      border-color: #8a6ad4;
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(120,80,200,0.25);
    }
    .sb-leader .leader-portrait {
      width: 44px; height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #5a4a7a;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
      background: #1a1628;
    }
    .sb-leader-name {
      font-size: 0.72em; font-weight: 700; color: #ece4f8;
      line-height: 1.15;
    }
    .sb-leader-perk {
      font-size: 0.62em; color: #9a8ab0; line-height: 1.25;
      padding: 0 0.15rem;
    }
    .sb-leaders-hint {
      margin: 0.55rem 0 0;
      font-size: 0.75em; color: #776888; font-style: italic;
      line-height: 1.35;
    }

    .sb-epochs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.4rem;
    }
    .sb-epoch {
      display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
      padding: 0.4rem 0.2rem;
      border-radius: 8px;
      background: rgba(20,16,32,0.4);
      border: 1px solid #343048;
    }
    .sb-epoch img {
      width: 36px; height: 36px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
    }
    .sb-epoch span {
      font-size: 0.65em; color: #b0a0c8; font-weight: 600;
      letter-spacing: 0.02em;
    }

    .sb-score-teaser {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 0.35rem;
    }
    .sb-score-teaser li {
      display: grid;
      grid-template-columns: 1.4rem minmax(0, 1fr) auto;
      gap: 0.45rem;
      align-items: center;
      padding: 0.4rem 0.5rem;
      border-radius: 7px;
      background: rgba(20,16,32,0.45);
      border: 1px solid #343048;
      font-size: 0.82em;
    }
    .sb-score-teaser li.podium-1 {
      border-color: rgba(240,192,96,0.45);
      background: linear-gradient(90deg, rgba(240,192,96,0.12), rgba(20,16,32,0.35));
    }
    .sb-score-teaser li.podium-2 {
      border-color: rgba(180,190,210,0.35);
    }
    .sb-score-teaser li.podium-3 {
      border-color: rgba(200,140,90,0.35);
    }
    .sb-score-rank { font-weight: 800; color: #c89af0; text-align: center; }
    .sb-score-who {
      min-width: 0;
      display: flex; align-items: center; gap: 0.4rem;
      color: #e8e0f5; font-weight: 600;
    }
    .sb-score-who .leader-portrait {
      width: 22px; height: 22px; border-radius: 50%;
      object-fit: cover; border: 1px solid #5a4a7a; flex-shrink: 0;
    }
    .sb-score-who span {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sb-score-pts {
      font-weight: 800; color: #f0c060;
      font-variant-numeric: tabular-nums;
    }
    .sb-score-empty {
      display: block !important;
      grid-template-columns: none !important;
      text-align: center;
      color: #888; font-style: italic;
      padding: 0.85rem 0.5rem !important;
    }

    /* Match-Cards */
    .sb-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 0.5rem;
      max-height: min(48vh, 420px); overflow-y: auto;
    }
    .sb-list li.match-card {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.85em 1.1em;
      background: linear-gradient(135deg, #25212e 0%, #1c1a26 100%);
      border: 1px solid #3a3340;
      border-radius: 7px;
      transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    }
    .sb-list li.match-card:hover {
      border-color: #6a8acb;
      transform: translateY(-1px);
      box-shadow: 0 3px 12px rgba(80,120,180,0.25);
    }
    .sb-list li.match-card.live {
      border-left: 3px solid #80d870;
    }
    .sb-list li.match-card.lobby {
      border-left: 3px solid #c89af0;
    }
    .sb-list .match-info { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
    .sb-list .match-name {
      font-weight: 600; color: #e8e0f5; font-size: 1.02em;
    }
    .sb-list .match-meta {
      font-size: 0.82em; color: #888;
      display: flex; gap: 0.6em; align-items: center; flex-wrap: wrap;
    }
    .sb-list .match-status {
      font-size: 0.72em; font-weight: 700;
      padding: 2px 8px; border-radius: 3px;
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .sb-list .match-status.lobby { background: rgba(200,154,240,0.20); color: #d4afff; }
    .sb-list .match-status.live  { background: rgba(106,217,106,0.20); color: #98e070; }
    /* Spieler-Anzeige als kleine Pills */
    .player-dots { display: inline-flex; gap: 3px; }
    .player-dots .dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: #444; border: 1px solid #222;
    }
    .player-dots .dot.taken.p1 { background: #d96b6b; }
    .player-dots .dot.taken.p2 { background: #6bd9a5; }
    .player-dots .dot.taken.p3 { background: #c89af0; }
    .player-dots .dot.taken.p4 { background: #f0c060; }
    .player-dots .dot.taken.p5 { background: #6ad5e0; }
    .player-dots .dot.taken.p6 { background: #e890c0; }
    .player-dots .dot.taken.p7 { background: #b8e070; }
    .player-dots .dot.taken.p8 { background: #7882e0; }

    .sb-join-btn {
      padding: 0.5em 1.1em; border-radius: 5px;
      border: 1px solid #6a8acb;
      background: rgba(80,120,180,0.18);
      color: #b0c8f0; cursor: pointer; font-size: 0.9em; font-weight: 600;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .sb-join-btn:hover {
      background: rgba(80,120,180,0.45);
      color: #fff;
    }
    .sb-empty {
      color: #888; font-style: italic; text-align: center;
      padding: 2.5rem 1rem;
      background: rgba(0,0,0,0.15); border-radius: 6px;
      border: 1px dashed #3a3340;
    }
    .sb-empty .sb-empty-hint {
      display: block; margin-top: 0.5rem; font-size: 0.85em; color: #666;
    }

    @media (max-width: 860px) {
      #serverBrowser { max-width: 640px; }
      .sb-play-grid { grid-template-columns: 1fr; }
      .sb-leaders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .sb-hero-stats { padding-right: 3.5rem; }
    }
    @media (max-width: 520px) {
      .sb-hero { padding: 1.4rem 1.1rem 1.2rem; }
      .sb-body { padding: 1rem; }
      .sb-leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sb-epochs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .sb-create-row { flex-direction: column; }
      .sb-list li.match-card {
        flex-direction: column; align-items: stretch; gap: 0.65rem;
      }
      .sb-join-btn { width: 100%; }
    }

    /* Wenn Server-Browser sichtbar: Spielfeld + Lobby + HUD ausblenden */
    body.in-server-browser .controls,
    body.in-server-browser #ownHud,
    body.in-server-browser #lobbyPanel,
    body.in-server-browser .layout { display: none !important; }
    body.in-server-browser h1 { display: none; } /* Hero ersetzt das h1 */
    body.in-server-browser .meta { opacity: 0.5; }

    /* Match-End-Modal: Sieger + Statistik */
    #matchEndOverlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.82);
      display: none; z-index: 1100;
      align-items: center; justify-content: center;
      padding: 1.5rem;
      backdrop-filter: blur(5px);
    }
    #matchEndOverlay.visible { display: flex; }
    #matchEndModal {
      background: linear-gradient(180deg, #1f1c2a 0%, #0f0d18 100%);
      border: 2px solid #c89af0; border-radius: 14px;
      max-width: 640px; width: 100%;
      max-height: 90vh; overflow-y: auto;
      box-shadow: 0 20px 80px rgba(0,0,0,0.85), 0 0 60px rgba(200,154,240,0.2);
    }
    .me-header {
      padding: 1.5rem 1.5rem 1rem;
      text-align: center;
      background: radial-gradient(circle at 50% 0%, rgba(240,192,96,0.25) 0%, transparent 70%);
    }
    .me-trophy { font-size: 4rem; line-height: 1; margin-bottom: 0.3rem;
      filter: drop-shadow(0 0 20px rgba(240,192,96,0.6)); }
    .me-headline {
      font-size: 1.6rem; font-weight: 800;
      background: linear-gradient(90deg, #f0c060, #c89af0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0.3em 0 0.15em;
    }
    .me-subline { color: #aaa; font-style: italic; margin: 0; font-size: 0.95em; }
    .me-meta {
      color: #888; font-size: 0.82em; margin-top: 0.6em;
      letter-spacing: 0.04em;
    }
    .me-body {
      padding: 0.8rem 1.5rem 1.5rem;
    }
    .me-section-title {
      color: #888; font-size: 0.78em; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      margin: 0.4rem 0 0.5rem;
    }
    .me-standings {
      display: flex; flex-direction: column; gap: 0.4rem;
    }
    .me-row {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      align-items: center; gap: 0.6rem;
      padding: 0.55em 0.8em;
      background: rgba(255,255,255,0.03);
      border-radius: 6px;
      border-left: 3px solid #444;
    }
    .me-row.winner {
      background: linear-gradient(135deg, rgba(240,192,96,0.18), rgba(200,154,240,0.10));
      border-left-color: #f0c060;
      box-shadow: 0 0 12px rgba(240,192,96,0.2);
    }
    .me-row.eliminated { opacity: 0.55; }
    .me-rank {
      font-weight: 800; font-size: 1.1em; color: #aaa; text-align: center;
    }
    .me-row.winner .me-rank { color: #f0c060; }
    .me-player-name { font-weight: 700; }
    .me-player-meta { font-size: 0.82em; color: #888; }
    .me-score-block { text-align: right; }
    .me-score { font-size: 1.2em; font-weight: 800; color: #ffd97a; }
    .me-row.winner .me-score { color: #fff; text-shadow: 0 0 8px rgba(240,192,96,0.7); }
    .me-actions {
      margin-top: 1.2rem; text-align: center;
    }
    .me-actions .sb-btn {
      padding: 0.7em 2em; font-size: 1.05em;
    }

    /* Hilfe-Modal */
    .help-trigger {
      background: rgba(120,160,200,0.15);
      border: 1px solid rgba(120,160,200,0.4);
      color: #b0c8f0; cursor: pointer;
      padding: 0.4em 0.9em; border-radius: 5px;
      font-size: 0.92em; font-weight: 600;
      transition: background 0.15s, color 0.15s;
      /* Verhindert 300ms Touch-Delay auf Mobile-Browsern. */
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(120,160,200,0.4);
    }
    .help-trigger:hover { background: rgba(120,160,200,0.35); color: #fff; }
    .help-trigger:active { background: rgba(120,160,200,0.5); color: #fff; }
    /* Auf Mobile: groessere Touch-Targets + Meta-Bar sticky oben, damit
       die Buttons immer erreichbar bleiben und nichts dauerhaft drueberliegt.
       Gilt fuer .help-trigger UND .meta .btn (Match verlassen). */
    @media (max-width: 1024px) {
      .help-trigger,
      .meta .btn {
        padding: 0.55em 0.85em;
        min-height: 38px;
        font-size: 0.95em;
      }
      .meta {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--bg);
        padding: 0.3rem 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        align-items: center;
      }
      /* Tick + Sekunden-Anzeige oben links auf dem Handy ausblenden — frisst
         Platz, ist im Spiel ohnehin durch HUD-Timer redundant. */
      #tick { display: none; }
    }

    /* Bestenliste-Overlay — gleiches Layout wie Help, eigene Klasse fuer Tabelle. */
    #scoreOverlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(8,6,16,0.85);
      display: none; align-items: center; justify-content: center;
      z-index: 1500;
    }
    #scoreOverlay.visible { display: flex; }
    #scoreModal {
      background: linear-gradient(180deg, #1f1c2a 0%, #1a1822 100%);
      color: #ddd;
      border: 1px solid #4a3d6a;
      border-radius: 12px;
      width: min(900px, 92vw);
      max-height: 86vh;
      display: flex; flex-direction: column;
      box-shadow: 0 12px 40px rgba(0,0,0,0.75);
      overflow: hidden;
    }
    .score-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9em;
    }
    .score-table th, .score-table td {
      padding: 0.45em 0.8em;
      text-align: left;
      border-bottom: 1px solid #2a2435;
    }
    .score-table th {
      background: rgba(255,255,255,0.04);
      color: #aaa;
      font-size: 0.78em;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      position: sticky; top: 0;
    }
    .score-table .rank { text-align: center; width: 3em; font-weight: 700; }
    .score-table .score-col { text-align: right; font-family: Consolas, monospace; font-weight: 700; color: #ffd97a; }
    .score-table tr.winner { background: rgba(78,170,85,0.08); }
    .score-table tr.winner .rank { color: #80f0a0; }
    .score-table tr.podium-1 td { font-weight: 700; }
    .score-table tr.podium-1 .rank { color: #ffd700; font-size: 1.1em; }
    .score-table tr.podium-2 .rank { color: #c0c0c0; }
    .score-table tr.podium-3 .rank { color: #cd7f32; }
    .score-table tbody tr:hover { background: rgba(120,100,160,0.07); }

    #helpOverlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.78);
      display: none; z-index: 1000;
      align-items: center; justify-content: center;
      padding: 1.5rem;
      backdrop-filter: blur(4px);
    }
    #helpOverlay.visible { display: flex; }
    #helpModal {
      background: linear-gradient(180deg, #1f1c2a 0%, #15131e 100%);
      border: 1px solid #5a4d6a; border-radius: 10px;
      max-width: 760px; width: 100%;
      max-height: 90vh; overflow-y: auto;
      box-shadow: 0 12px 50px rgba(0,0,0,0.7);
    }
    #helpModal .help-header, #scoreModal .help-header {
      position: sticky; top: 0; z-index: 1;
      background: linear-gradient(180deg, #2a2535 0%, #1f1c2a 100%);
      border-bottom: 1px solid #4a3d6a;
      padding: 1.2rem 1.6rem;
      display: flex; justify-content: space-between; align-items: center;
    }
    #helpModal h2, #scoreModal h2 {
      margin: 0; color: #d4afff; font-size: 1.4rem;
    }
    #helpModal .close-btn, #scoreModal .close-btn {
      background: none; border: none; color: #aaa;
      font-size: 1.5rem; cursor: pointer; padding: 0.3em 0.6em;
      line-height: 1;
      /* Kein 300ms-Delay auf Mobile. */
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255,255,255,0.15);
      /* Mindestgroesse fuer Touch — sonst trifft man auf dem Handy schwer. */
      min-width: 44px; min-height: 44px;
    }
    #helpModal .close-btn:hover, #scoreModal .close-btn:hover  { color: #fff; }
    #helpModal .close-btn:active, #scoreModal .close-btn:active { color: #fff; background: rgba(255,255,255,0.1); }
    #helpModal .help-body, #scoreModal .help-body {
      padding: 1rem 1.6rem 1.6rem;
      color: #ccc; line-height: 1.55;
      font-size: 0.94em;
    }
    #helpModal h3 {
      color: #c89af0; margin: 1.4em 0 0.5em;
      font-size: 1.05rem; letter-spacing: 0.02em;
      border-bottom: 1px solid #3a3340; padding-bottom: 0.3em;
    }
    #helpModal h3:first-child { margin-top: 0; }
    #helpModal p { margin: 0.6em 0; }
    #helpModal ul { margin: 0.4em 0; padding-left: 1.5em; }
    #helpModal li { margin: 0.3em 0; }
    #helpModal kbd {
      display: inline-block; padding: 1px 7px;
      background: #2a2535; border: 1px solid #5a4d6a;
      border-radius: 3px;
      font-family: Consolas, monospace; font-size: 0.85em;
      color: #e0d4f0;
    }
    #helpModal .help-icon { font-size: 1.1em; }
    #helpModal .help-grid {
      display: grid; grid-template-columns: 36px 1fr;
      gap: 0.4em 0.7em; margin: 0.4em 0;
      align-items: baseline;
    }
    #helpModal .help-grid > .icon { text-align: center; font-size: 1.1em; }
    #helpModal b { color: #e8d8ff; }
    .btn {
      padding: 0.4em 0.9em; background: #333; color: var(--fg);
      border: 1px solid var(--border); border-radius: 4px;
      cursor: pointer; font-size: 0.9em;
      /* Verhindert 300ms Touch-Delay auf Mobile-Browsern. */
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255,255,255,0.15);
    }
    .btn:hover  { background: #444; }
    .btn:active { background: #555; }
    .btn.p1 { border-color: var(--p1); color: var(--p1); }
    .btn.p2 { border-color: var(--p2); color: var(--p2); }
    .btn.p3 { border-color: var(--p3); color: var(--p3); }
    .btn.p4 { border-color: var(--p4); color: var(--p4); }
    .btn.p5 { border-color: var(--p5); color: var(--p5); }
    .btn.p6 { border-color: var(--p6); color: var(--p6); }
    .btn.p7 { border-color: var(--p7); color: var(--p7); }
    .btn.p8 { border-color: var(--p8); color: var(--p8); }
    .btn.active.p1 { background: var(--p1); color: #fff; border-color: var(--p1); }
    .btn.active.p2 { background: var(--p2); color: #000; border-color: var(--p2); }
    .btn.active.p3 { background: var(--p3); color: #000; border-color: var(--p3); }
    .btn.active.p4 { background: var(--p4); color: #000; border-color: var(--p4); }
    .btn.active.p5 { background: var(--p5); color: #000; border-color: var(--p5); }
    .btn.active.p6 { background: var(--p6); color: #000; border-color: var(--p6); }
    .btn.active.p7 { background: var(--p7); color: #000; border-color: var(--p7); }
    .btn.active.p8 { background: var(--p8); color: #000; border-color: var(--p8); }
    /* Status-Zeile fuer ack-Messages: eigene Zeile mit fester Hoehe.
       Damit verschiebt sich das Spielfeld nicht, wenn die Nachricht ein-
       oder ausgeblendet wird. Lange Texte werden mit Ellipsis abgeschnitten. */
    #ackMsg {
      display: block;
      min-height: 1.4em;       /* Reserviert Platz auch wenn leer */
      line-height: 1.4em;
      font-size: 0.85em;
      margin: 0 0 0.4rem 0;
      padding: 0 0.2em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #ackMsg.ok { color: var(--p2); }
    #ackMsg.err { color: var(--p1); }
    .layout {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 1rem;
      height: calc(100vh - 9rem);
    }
    .map-panel, .side-panel {
      background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
      overflow: hidden;
    }
    .map-panel { display: flex; flex-direction: column; }
    svg.map {
      flex: 1; width: 100%;
      /* Globaler 300ms-Delay-Killer auf Touch-Geraeten. Sonst reagieren
         Klicks auf Sektoren auf dem Handy spaeter und manchmal gar nicht,
         weil der Browser auf Double-Tap-Zoom wartet. Im SVG bedeutet
         "manipulation" auch: kein Pinch-Zoom auf der Karte (was wir eh
         nicht brauchen — die SVG hat eigenes viewBox-Layout). */
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    /* Sektor-Gruppen selbst muessen pointer-events explizit erlauben, weil
       innere Texte (.sector-name, .sector-pop) pointer-events:none gesetzt
       haben — das Click-Target ist der Kreis bzw. die Gruppe drum. */
    [data-sid] { cursor: pointer; }
    .side-panel { padding: 1rem; overflow-y: auto; }
    h2 {
      margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .player-card {
      padding: 0.6em 0.6em;
      margin-bottom: 0.4em;
      border-bottom: 1px solid var(--border);
      border-left: 4px solid transparent;
      border-radius: 6px;
      transition: background 0.25s ease;
    }
    .player-card:last-child { border-bottom: none; }
    /* Pro Slot ein leicht eingefaerbter Hintergrund + farbige Akzent-Linie links.
       Sehr dezent (~10% Alpha), damit der Text gut lesbar bleibt. color-mix
       wird von allen modernen Browsern unterstuetzt; fuer Fallback siehe unten. */
    .player-card.p1 { background: color-mix(in srgb, var(--p1) 14%, transparent); border-left-color: var(--p1); }
    .player-card.p2 { background: color-mix(in srgb, var(--p2) 14%, transparent); border-left-color: var(--p2); }
    .player-card.p3 { background: color-mix(in srgb, var(--p3) 14%, transparent); border-left-color: var(--p3); }
    .player-card.p4 { background: color-mix(in srgb, var(--p4) 14%, transparent); border-left-color: var(--p4); }
    .player-card.p5 { background: color-mix(in srgb, var(--p5) 14%, transparent); border-left-color: var(--p5); }
    .player-card.p6 { background: color-mix(in srgb, var(--p6) 14%, transparent); border-left-color: var(--p6); }
    .player-card.p7 { background: color-mix(in srgb, var(--p7) 14%, transparent); border-left-color: var(--p7); }
    .player-card.p8 { background: color-mix(in srgb, var(--p8) 14%, transparent); border-left-color: var(--p8); }
    .player-name { font-weight: 600; font-size: 1.05em; }
    .player-name.p1 { color: var(--p1); }
    .player-name.p2 { color: var(--p2); }
    .player-name.p3 { color: var(--p3); }
    .player-name.p4 { color: var(--p4); }
    .player-name.p5 { color: var(--p5); }
    .player-name.p6 { color: var(--p6); }
    .player-name.p7 { color: var(--p7); }
    .player-name.p8 { color: var(--p8); }
    .player-stats { color: var(--muted); font-size: 0.85em; margin-top: 0.2em; }
    .progress { background: #333; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 4px; }
    .progress-fill { height: 100%; background: var(--fg); transition: width 0.3s; }

    /* ── Resource-Bars ───────────────────────────────────────── */
    .res-row {
      display: grid;
      grid-template-columns: 70px 1fr 80px;
      align-items: center;
      gap: 0.4rem;
      margin: 0.25rem 0;
      font-size: 0.8em;
    }
    .res-row .res-label { color: #bbb; }
    .res-bar { background: #333; height: 8px; border-radius: 4px; overflow: hidden; }
    .res-fill { height: 100%; transition: width 0.4s; }
    .res-fill.material  { background: linear-gradient(90deg, #c8a050, #e6c060); }
    .res-fill.research  { background: linear-gradient(90deg, #6a8acb, #88a8e8); }
    .res-fill.research.starving { background: linear-gradient(90deg, #a44, #c66); }
    .res-fill.research.waiting  { background: linear-gradient(90deg, #c89040, #e6a850); }
    .res-fill.epoch     { background: linear-gradient(90deg, #8b6db8, #b896d8); }
    .res-fill.epoch.full { background: linear-gradient(90deg, #58c060, #80e090); }

    /* Aktuelles Forschungsziel — etwas prominenter als player-stats */
    .research-target {
      margin: 0.15rem 0 0.3rem 74px;
      font-size: 0.92em;
      color: #b0c8f0;
      font-weight: 600;
    }
    .research-target .eta { color: #888; font-weight: 400; margin-left: 0.4em; }
    .res-num { font-family: Consolas, monospace; font-size: 0.85em; color: #ccc; text-align: right; }

    .pop-pills { display: flex; gap: 4px; margin-top: 4px; }
    .pop-pill {
      flex: 1; padding: 3px 6px; border-radius: 3px; font-size: 0.75em;
      text-align: center; font-weight: 600;
    }
    .pop-pill.r { background: #2a3550; color: #88a8e8; }
    .pop-pill.w { background: #503d28; color: #e6c060; }
    .pop-pill.k { background: #50272a; color: #e69090; }
    .starvation-warn {
      color: #e69090;
      font-size: 0.78em;
      margin-top: 3px;
      padding: 2px 6px;
      background: rgba(220,80,80,0.12);
      border-left: 2px solid #c44;
      border-radius: 2px;
      font-weight: 600;
    }
    /* Reservierter Bereich fuer Warnungen — verhindert Layout-Shift,
       wenn Warnungen kommen/gehen. Hoehe deckt eine durchschnittliche Warnung. */
    .warn-slot { min-height: 1.6em; }

    /* HUD-Leiste fuer den eigenen Spieler — kompakte Statuszeile ueber der Karte */
    #ownHud {
      display: flex;
      gap: 0.8rem;
      align-items: center;
      flex-wrap: wrap;
      padding: 0.45rem 0.8rem;
      margin-bottom: 0.5rem;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 0.85em;
    }
    #ownHud .hud-name { font-weight: 600; font-size: 1.05em; }
    #ownHud .hud-block {
      display: flex; align-items: center; gap: 0.3rem;
      padding-left: 0.6rem; border-left: 1px solid #3a3a3a;
    }
    #ownHud .hud-block:first-of-type { border-left: none; padding-left: 0; }
    #ownHud .hud-bar {
      width: 90px; height: 7px; background: #333;
      border-radius: 3.5px; overflow: hidden;
    }
    #ownHud .hud-bar > div { height: 100%; transition: width 0.4s; }
    #ownHud .hud-bar > div.material { background: linear-gradient(90deg, #c8a050, #e6c060); }
    #ownHud .hud-bar > div.research { background: linear-gradient(90deg, #6a8acb, #88a8e8); }
    #ownHud .hud-bar > div.research.starving { background: linear-gradient(90deg, #a44, #c66); }
    #ownHud .hud-bar > div.research.waiting  { background: linear-gradient(90deg, #c89040, #e6a850); }
    #ownHud .hud-bar > div.epoch    { background: linear-gradient(90deg, #8b6db8, #b896d8); }
    #ownHud .hud-bar > div.epoch.full { background: linear-gradient(90deg, #58c060, #80e090); }
    #ownHud .hud-num { font-family: Consolas, monospace; color: #ccc; }
    #ownHud .hud-pill {
      padding: 1px 6px; border-radius: 3px; font-weight: 600; font-size: 0.85em;
    }
    #ownHud .hud-pill.r { background: #2a3550; color: #88a8e8; }
    #ownHud .hud-pill.w { background: #503d28; color: #e6c060; }
    #ownHud .hud-pill.k { background: #50272a; color: #e69090; }
    /* Warns-Zeile (z.B. "wartet auf Material"): IMMER eine eigene Zeile (flex-basis 100%)
       und fixe Mindesthoehe — sonst klappt die HUD beim Erscheinen/Verschwinden des
       Texts auf/zu und das Spielfeld springt nach unten/oben. */
    #ownHud .hud-warns {
      color: #e69090; font-size: 0.95em;
      flex-basis: 100%;
      min-height: 1.4em;
      padding: 0; border: 0;
    }
    #ownHud .hud-warns:empty::before { content: '\00a0'; } /*   als Platzhalter */
    .events { max-height: 260px; overflow-y: auto; font-family: Consolas, monospace; font-size: 0.8em; margin-top: 0.5rem; }
    .event-row { padding: 0.2em 0; color: var(--muted); border-bottom: 1px dashed #2a2a2a; }
    .event-row .tick { display: inline-block; min-width: 3em; color: #555; }

    /* SVG */
    .map-bg { /* statischer Ozean */ }

    /* ── Mobile-Performance-Optimierungen ──────────────────────────────
       Touch-Geraete und kleine Viewports: teure GPU-Effekte abschalten,
       Animationen reduzieren. Spielbarkeit wichtiger als Eye-Candy. */
    @media (max-width: 768px), (pointer: coarse) {
      /* drop-shadow-Filter sind extrem GPU-intensiv auf mobile Chips */
      .sector-circle,
      .movement-arrow,
      .strength-ring,
      .pop-orb {
        filter: none !important;
      }
      /* Ozean-Schiffe statisch (keine Drift-Animation, sparen viel CPU) */
      .ocean-ship {
        animation: none !important;
        opacity: 0.45;
      }
      /* Strength-Ring nicht pulsieren — bleibt sichtbar, aber spart Repaints */
      .strength-ring.strong {
        animation: none !important;
      }
      /* SVG-Map touch-action ist jetzt global gesetzt — siehe svg.map oben. */
      /* Mobile Portrait: Karte oben, Side-Panel (Deine Sektoren / Spieler) darunter. */
      .layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(42vh, 1fr) auto;
        gap: 0.45rem;
        height: auto;
        min-height: calc(100vh - 8rem);
        min-height: calc(100dvh - 8rem);
      }
      .map-panel {
        min-height: 42vh;
        max-height: 58vh;
      }
      .side-panel {
        padding: 0.45rem 0.5rem 0.7rem;
        font-size: 0.82em;
        max-height: none;
        overflow-y: visible;
      }
      .side-panel h2 {
        font-size: 0.72rem;
        margin: 0.45rem 0 0.3rem;
      }
      /* Sektor-Karten kompakter */
      .sector-card {
        padding: 0.4em 0.45em !important;
        margin-bottom: 0.3em !important;
        font-size: 0.92em;
      }
      .sector-card-head { gap: 0.3rem; }
      .sector-card-dot { width: 9px; height: 9px; }
      .role-row { padding: 0.08rem 0.1rem; gap: 0.2rem; }
      .role-btn { min-width: 1.5em; padding: 0.15em 0.35em; font-size: 0.9em; }
      .player-card {
        padding: 0.4em 0.45em !important;
        margin-bottom: 0.3em !important;
        font-size: 0.9em;
      }
      .player-card-head { gap: 0.4rem; }
      .player-card .leader-portrait,
      .player-card-head .leader-portrait {
        width: 32px !important;
        height: 32px !important;
      }
      .events {
        max-height: 9rem;
        font-size: 0.88em;
      }
    }
    /* Sehr schmale Smartphones: noch kompakter */
    @media (max-width: 480px) {
      .layout {
        grid-template-columns: 1fr;
        gap: 0.35rem;
      }
      .map-panel {
        min-height: 40vh;
        max-height: 52vh;
      }
      .side-panel {
        padding: 0.4rem 0.4rem 0.6rem;
        font-size: 0.78em;
      }
      .side-panel h2 { font-size: 0.68rem; }
    }
    /* Landscape-Mobile: Karten-Bereich maximieren — Hinweise und Legenden
       ausblenden, Header/Controls kompakter, dynamische Viewport-Hoehe nutzen. */
    @media (max-width: 1024px) and (orientation: landscape), (max-height: 500px) {
      /* Property-Legend rechts unten + Help-Text unter der Karte: weg.
         Auf Mobile braucht's den Platz fuer die Karte. Wer die Eigenschaften
         braucht, sieht sie als Symbol direkt auf den Sektoren. */
      .property-legend, .help-text {
        display: none !important;
      }
      /* Mehr Karten-Hoehe: kleinerer Header-Reservebereich. Falls Browser dvh
         (dynamic viewport height) unterstuetzt, das nutzen — damit Adressleisten-
         Aufschwingen nicht alles ueberdeckt. */
      /* Landscape-Mobile: Karte links, Panel rechts (mehr Breite nutzen) */
      .layout {
        grid-template-columns: 1fr minmax(160px, 28vw);
        grid-template-rows: 1fr;
        height: calc(100vh - 5rem);
        height: calc(100dvh - 5rem);
      }
      .map-panel {
        min-height: 0;
        max-height: none;
      }
      .side-panel {
        overflow-y: auto;
        max-height: 100%;
        font-size: 0.8em;
        padding: 0.4rem 0.35rem;
      }
      /* Header-Zeilen kompakter zusammenruecken */
      .meta { margin-bottom: 0.3rem; font-size: 0.85em; }
      .controls {
        margin-bottom: 0.3rem; gap: 0.3rem;
        font-size: 0.85em;
      }
      .controls .btn { padding: 0.25em 0.6em; font-size: 0.85em; }
      #ackMsg {
        min-height: 1.2em; line-height: 1.2em;
        margin: 0 0 0.2rem 0; font-size: 0.78em;
      }
      /* HUD oben einreihen, weniger Padding */
      #ownHud { padding: 0.3rem 0.5rem; gap: 0.3rem; font-size: 0.85em; }
      /* Titel-Bereich (h1) auf Mobile weglassen, der frisst Platz */
      h1 { display: none; }
    }

    /* Epochen-Schiffe auf dem Ozean — driften langsam von links nach rechts.
       Jede Bahn (lane) hat eigene Geschwindigkeit + Versatz, damit's nicht
       synchron wirkt. Schiffe sind dezent (opacity~0.55) — Stimmung, nicht Vordergrund. */
    .ocean-ship { opacity: 0.55; pointer-events: none; }
    .ocean-ship.drift-1 { animation: shipDrift1 110s linear infinite; }
    .ocean-ship.drift-2 { animation: shipDrift2 140s linear infinite; }
    .ocean-ship.drift-3 { animation: shipDrift3 170s linear infinite; }
    .ocean-ship.drift-4 { animation: shipDrift4 95s  linear infinite; }
    @keyframes shipDrift1 { from { transform: translateX(-80px);  } to { transform: translateX(1080px); } }
    @keyframes shipDrift2 { from { transform: translateX(1080px); } to { transform: translateX(-80px);  } }
    @keyframes shipDrift3 { from { transform: translateX(-80px);  } to { transform: translateX(1080px); } }
    @keyframes shipDrift4 { from { transform: translateX(1080px); } to { transform: translateX(-80px);  } }
    /* Sanfter Glow-Pulse fuer Zukunfts-Hovercrafts */
    @keyframes shipGlow { from { filter: drop-shadow(0 0 4px #8a9dff); } to { filter: drop-shadow(0 0 14px #aab5ff); } }
    .ocean-ship.future { animation-name: shipDrift1, shipGlow; animation-duration: 110s, 2.2s;
      animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite;
      animation-direction: normal, alternate; }
    /* Rauchfahne fuer Dampfer */
    .ship-smoke { animation: smokeRise 3s ease-out infinite; }
    @keyframes smokeRise {
      0%   { opacity: 0; transform: translate(0, 0) scale(0.7); }
      40%  { opacity: 0.6; }
      100% { opacity: 0; transform: translate(-4px, -18px) scale(1.4); }
    }
    .map-waves { pointer-events: none; }
    .connection {
      stroke: #6a90b8;
      stroke-width: 2.5px;
      stroke-dasharray: 4 7;
      stroke-linecap: round;
      opacity: 0.6;
    }
    /* Epochen-spezifische Verbindungs-Stile:
       Steinzeit  → wie bisher (Trampelpfad, gestrichelt)
       Antike     → einfache Linie (Pflasterweg)
       Mittelalter→ etwas dicker (Strasse)
       Industrie  → kurze Striche (Schienen-Schwellen)
       Moderne    → kraeftige durchgezogene Linie (Highway)
       Zukunft    → pulsierender Energie-Beam (lange Strich-Punkt-Folge, cyan) */
    .connection.conn-StoneAge   { stroke: #6a90b8; stroke-dasharray: 4 7; stroke-width: 2.5px; opacity: 0.55; }
    .connection.conn-Antiquity  { stroke: #b8a070; stroke-dasharray: 0;   stroke-width: 2.5px; opacity: 0.7; }
    .connection.conn-MiddleAges { stroke: #c4a880; stroke-dasharray: 0;   stroke-width: 3px; opacity: 0.75; }
    .connection.conn-Industrial { stroke: #a8a8b8; stroke-dasharray: 3 2; stroke-width: 3px; opacity: 0.75; }
    .connection.conn-Modern     { stroke: #b8c8e8; stroke-dasharray: 0;   stroke-width: 3.2px; opacity: 0.8;  }
    .connection.conn-Future     { stroke: #aac8ff; stroke-dasharray: 10 3 1 3; stroke-width: 2.8px; opacity: 0.85; }
    .sector-circle {
      stroke: #1a1a1a; stroke-width: 2.5px;
      transition: stroke 0.4s, stroke-width 0.4s, opacity 0.2s;
      cursor: pointer;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
    }
    /* Epochen-Pattern-Overlay: liegt UEBER dem Sektor-Kreis, mit dezenter
       Transparenz damit die Spielerfarbe durchscheint. pointer-events: none
       damit Klicks auf den Sektor durchgereicht werden. */
    .sector-pattern {
      fill: none;
      stroke: none;
      pointer-events: none;
      opacity: 0.85;
    }
    /* Mini-Bauwerk: kleines Epochen-Gebaeude im Sektor.
       pointer-events: none damit der Sektor selbst klickbar bleibt.
       Leichter Drop-Shadow fuer Lesbarkeit auf hellen/dunklen Sektor-Farben. */
    .sector-building {
      pointer-events: none;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    }
    @media (max-width: 768px), (pointer: coarse) {
      /* Drop-Shadow auf Mobile aus (siehe Mobile-Perf-Block). */
      .sector-building { filter: none; }
    }
    .sector-circle.battle {
      stroke: #ff5050; stroke-width: 5;
      filter: drop-shadow(0 0 16px #ff6644) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
      animation: pulseStroke 0.5s infinite alternate;
    }
    .sector-circle.selected {
      stroke: #ffffff; stroke-width: 5;
      filter: drop-shadow(0 0 6px #fff);
    }
    .sector-circle.target-hint {
      stroke: #ffe066; stroke-width: 4;
      stroke-dasharray: 6 4;
    }
    /* Multi-Hop-Ziele: dezenter, kleinere Dash-Pattern, weniger sattes Gelb */
    .sector-circle.target-hint-far {
      stroke: #b08a3a; stroke-width: 3;
      stroke-dasharray: 3 5;
      opacity: 0.85;
    }
    /* Sprechblase eines angegriffenen Gegners — ploppt bei manchen Angriffen
       am oberen Karten-Rand auf, bleibt ~5s, fadet wieder weg. */
    .attack-taunt {
      position: absolute; top: 0.8rem; left: 50%;
      transform: translate(-50%, -20px);
      opacity: 0;
      pointer-events: none;
      max-width: 85%;
      padding: 0.8em 1.4em 0.9em;
      background: rgba(25, 22, 35, 0.95);
      border: 2px solid currentColor;
      border-radius: 16px;
      box-shadow: 0 6px 22px rgba(0,0,0,0.6);
      z-index: 8;
      font-size: 1.35em;
      line-height: 1.35;
      text-align: center;
    }
    .attack-taunt.visible {
      animation: tauntAppear 5s ease-in-out forwards;
    }
    @keyframes tauntAppear {
      0%   { opacity: 0; transform: translate(-50%, -20px); }
      6%   { opacity: 1; transform: translate(-50%, 0); }
      94%  { opacity: 1; transform: translate(-50%, 0); }
      100% { opacity: 0; transform: translate(-50%, -10px); }
    }
    .attack-taunt .who {
      display: block;
      font-weight: 800;
      font-size: 0.7em;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 0.3em;
    }
    .attack-taunt .what {
      color: #fff;
      font-style: italic;
      font-weight: 500;
    }
    /* Schwanz: dreieckiges Pfeilchen am unteren Rand */
    .attack-taunt::after {
      content: '';
      position: absolute;
      bottom: -10px; left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 12px solid currentColor;
    }
    .attack-taunt::before {
      content: '';
      position: absolute;
      bottom: -7px; left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid rgba(25, 22, 35, 0.95);
      z-index: 1;
    }

    /* Buendnis-Bereich in der Player-Card (rechte Spalte). */
    .alliance-row {
      margin-top: 0.4rem; padding-top: 0.4rem;
      border-top: 1px dashed rgba(255,255,255,0.12);
      font-size: 0.78em;
      display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
    }
    .alliance-row.allied {
      background: linear-gradient(90deg, rgba(80,200,120,0.13), transparent);
      border-radius: 6px; padding: 0.35rem 0.45rem;
    }
    .alliance-row .badge {
      display: inline-block; padding: 0.1rem 0.45rem;
      border-radius: 999px; font-size: 0.85em; font-weight: 700;
      background: rgba(80,200,120,0.25); color: #b8f0c8;
      border: 1px solid rgba(80,200,120,0.5);
    }
    .alliance-row .badge.pending  { background: rgba(255,220,90,0.18); color: #f5e08a; border-color: rgba(255,220,90,0.5); }
    .alliance-row .badge.incoming { background: rgba(120,180,255,0.18); color: #b8d4ff; border-color: rgba(120,180,255,0.5); animation: incomingPulse 1.6s ease-in-out infinite; }
    @keyframes incomingPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(120,180,255,0.45); }
      50%      { box-shadow: 0 0 0 6px rgba(120,180,255,0); }
    }
    .alliance-btn {
      cursor: pointer; padding: 0.22rem 0.55rem;
      border-radius: 6px; font-size: 0.9em;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
      color: #ddd;
    }
    .alliance-btn:hover { background: rgba(255,255,255,0.16); }
    .alliance-btn.accept { background: rgba(80,200,120,0.22); border-color: rgba(80,200,120,0.55); color: #b8f0c8; }
    .alliance-btn.reject { background: rgba(220,90,90,0.18);  border-color: rgba(220,90,90,0.55);  color: #f0b8b8; }
    .alliance-btn.break  { background: rgba(220,90,90,0.12);  border-color: rgba(220,90,90,0.4);   color: #f0b8b8; }
    .alliance-dur {
      font-size: 0.85em; padding: 0.18rem 0.35rem; border-radius: 5px;
      background: rgba(0,0,0,0.25); color: #cfcfcf; border: 1px solid rgba(255,255,255,0.1);
    }
    /* "Spiel beenden" Banner — sichtbar wenn alle menschlichen Spieler eliminiert
       sind. Mittig auf der Karte, klickbarer Button zum Restart. */
    .spectator-banner {
      position: absolute; top: 36%; left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(135deg, rgba(40,15,15,0.95), rgba(60,20,30,0.97));
      border: 3px solid #c84050; border-radius: 12px;
      padding: 1.4em 2.2em;
      box-shadow: 0 10px 36px rgba(180,40,60,0.5), inset 0 0 20px rgba(255,80,90,0.15);
      z-index: 9; color: #fff;
      text-align: center;
      pointer-events: auto;
      max-width: 88%;
    }
    .spectator-banner .se-title {
      font-size: 1.45em; font-weight: 800; margin-bottom: 0.25em;
      text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    }
    .spectator-banner .se-hint {
      font-size: 0.95em; opacity: 0.85; font-style: italic;
      margin-bottom: 0.9em;
    }
    .spectator-banner .se-btn {
      font-size: 1.05em; padding: 0.55em 1.4em;
      background: linear-gradient(180deg, #d04050, #a02040);
      color: #fff; border-color: #ff6070;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }
    .spectator-banner .se-btn:hover  { background: linear-gradient(180deg, #e05060, #b03050); }
    .spectator-banner .se-btn:active { background: linear-gradient(180deg, #b03040, #802030); }

    /* Vollbild-Einblendung beim Ausscheiden eines Spielers — mittig, kraeftig,
       ~4s sichtbar. Anders als die Status-Toasts oben rechts: prominenter und
       fuer alle anderen Spieler im Match sichtbar. */
    .elimination-banner {
      position: absolute; top: 28%; left: 50%;
      transform: translate(-50%, -50%) scale(0.85);
      opacity: 0;
      pointer-events: none;
      max-width: 80%;
      padding: 1.1em 1.8em;
      background: linear-gradient(135deg, rgba(40,10,20,0.92), rgba(60,15,30,0.96));
      border: 3px solid #cc3344;
      border-radius: 14px;
      box-shadow: 0 10px 40px rgba(180,40,60,0.55), inset 0 0 24px rgba(255,60,80,0.18);
      z-index: 10;
      color: #fff;
      text-align: center;
      animation: eliminationAppear 4.2s ease-in-out forwards;
    }
    .elimination-banner .glyph { font-size: 2.4em; line-height: 1; margin-bottom: 0.2em; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)); }
    .elimination-banner .who   { font-size: 1.45em; font-weight: 800; letter-spacing: 0.03em;
                                 text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
    .elimination-banner .sub   { font-size: 0.95em; opacity: 0.85; margin-top: 0.25em;
                                 font-style: italic; }
    @keyframes eliminationAppear {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
      10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
      18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.00); }
      82%  { opacity: 1; transform: translate(-50%, -50%) scale(1.00); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    }
    /* Status-Toast fuer Buendnis-Outcomes (abgelehnt, geschlossen, gebrochen, ausgelaufen).
       Kurzes Aufploppen oben rechts, automatisches Fade-Out. */
    .alliance-status-toast {
      position: absolute; top: 0.8rem; right: 0.8rem;
      max-width: 320px; padding: 0.6em 1.0em;
      background: rgba(25, 28, 45, 0.95);
      border: 2px solid rgba(255,255,255,0.3);
      border-left-width: 5px;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.55);
      z-index: 9; color: #fff;
      font-size: 0.95em; line-height: 1.35;
      animation: tauntAppear 5s ease-in-out forwards;
    }
    .alliance-status-toast.kind-reject  { border-left-color: #ff7878; }
    .alliance-status-toast.kind-formed  { border-left-color: #76e29a; }
    .alliance-status-toast.kind-broken  { border-left-color: #ff9a40; }
    .alliance-status-toast.kind-expired { border-left-color: #9ab8e8; }
    .alliance-status-toast.kind-timeout { border-left-color: #b0a060; }
    .alliance-status-toast .lead { font-weight: 800; letter-spacing: 0.02em; }
    .alliance-status-toast .sub  { color: rgba(255,255,255,0.78); font-size: 0.88em; margin-top: 0.2em; }

    /* Eingehender Buendnis-Vorschlag — Toast oben rechts. */
    .alliance-toast {
      position: absolute; top: 0.8rem; right: 0.8rem;
      max-width: 320px; padding: 0.8em 1.1em 0.9em;
      background: rgba(25, 28, 45, 0.96);
      border: 2px solid rgba(120,180,255,0.7);
      border-radius: 12px;
      box-shadow: 0 8px 22px rgba(0,0,0,0.65);
      z-index: 9; color: #e8edff;
      animation: tauntAppear 12s ease-in-out forwards;
      font-size: 0.95em;
    }
    .alliance-toast .who { font-weight: 800; letter-spacing: 0.04em; }
    .alliance-toast .msg { margin: 0.4em 0 0.6em; font-style: italic; }
    .alliance-toast .actions { display: flex; gap: 0.4rem; justify-content: flex-end; }

    /* Epoche-Banner oben links auf der Karte. Zeigt aktuelle Epoche dauerhaft an.
       Pro Epoche ein eigenes Farb-Thema, damit man sofort erkennt wo man ist. */
    .epoch-banner {
      /* unter dem Schicken-Regler (send-bar), damit er nicht überlappt */
      position: absolute; top: 3.4rem; left: 0.8rem;
      display: none;
      padding: 0.5rem 0.9rem 0.5rem 0.7rem;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.15);
      box-shadow: 0 4px 14px rgba(0,0,0,0.45);
      z-index: 5;
      pointer-events: none;
      user-select: none;
      min-width: 140px;
      backdrop-filter: blur(2px);
    }
    .epoch-banner.visible { display: flex; align-items: center; gap: 0.55rem; }
    .epoch-banner .glyph { font-size: 1.9em; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
    .epoch-banner .text  { display: flex; flex-direction: column; gap: 1px; }
    .epoch-banner .name  { font-weight: 700; font-size: 1.0em; color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.8); letter-spacing: 0.02em; }
    .epoch-banner .step  { font-size: 0.72em; color: rgba(255,255,255,0.7); }
    /* Per-Epoche Farb-Themen */
    .epoch-banner.ep-StoneAge   { background: linear-gradient(135deg, #6e5036, #3a2818); }
    .epoch-banner.ep-Antiquity  { background: linear-gradient(135deg, #b58a3a, #6a4818); }
    .epoch-banner.ep-MiddleAges { background: linear-gradient(135deg, #4a3a6a, #2a1c45); }
    .epoch-banner.ep-Industrial { background: linear-gradient(135deg, #5a5a6a, #2a2a35); }
    .epoch-banner.ep-Modern     { background: linear-gradient(135deg, #3a5a7a, #1a2a45); }
    .epoch-banner.ep-Future     { background: linear-gradient(135deg, #6a4ad0, #2a1c6a); }

    /* Funkel-Effekt bei Epochen-Aufstieg. Goldene Glitzer-Bursts ueber die ganze Karte. */
    .epoch-sparkle {
      position: absolute;
      width: 12px; height: 12px;
      background: radial-gradient(circle, #fff 0%, #ffe066 35%, #ffd700 60%, transparent 75%);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0);
      animation: sparklePulse 1.3s ease-out 1 forwards;
      filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 16px rgba(255,215,0,0.5));
      z-index: 6;
    }
    @keyframes sparklePulse {
      0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
      20%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
      55%  { transform: translate(-50%, -50%) scale(2.2); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    }
    /* Kurzer Schein-Effekt auf dem Epoche-Banner selbst beim Aufstieg */
    /* Verbuendeten-Panel unter dem Epoch-Banner. Listet aktive Buendnisse
       des Spielers mit Rest-Zeit und Brechen-Button. Auf mobile verstecken
       wir es, weil der Platz dort knapp ist (in der Player-Card erscheint
       der Block sowieso). */
    .ally-panel {
      position: absolute;
      top: 7.6rem;       /* direkt unter dem Epoch-Banner */
      left: 0.8rem;
      max-width: 220px;
      display: none;       /* nur sichtbar wenn mindestens 1 Buendnis aktiv */
      flex-direction: column;
      gap: 0.3rem;
      z-index: 5;
      pointer-events: auto;
      font-size: 0.85em;
    }
    .ally-panel.visible { display: flex; }
    .ally-panel .ally-card {
      background: rgba(25, 32, 40, 0.88);
      /* Default-Border, wird durch per-Slot-Klassen unten ueberschrieben. */
      border: 1px solid rgba(255,255,255,0.25);
      border-left: 4px solid rgba(255,255,255,0.5);
      border-radius: 6px;
      padding: 0.35rem 0.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.45);
      display: flex; flex-direction: column; gap: 0.15rem;
      backdrop-filter: blur(2px);
    }
    /* Per-Slot Faerbung: Verbuendeter wird in seiner Slot-Farbe gerahmt,
       damit man auf einen Blick sieht, mit wem man verbuendet ist. */
    .ally-panel .ally-card.p1 { border-color: color-mix(in srgb, var(--p1) 55%, transparent); border-left-color: var(--p1); background: color-mix(in srgb, var(--p1) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-card.p2 { border-color: color-mix(in srgb, var(--p2) 55%, transparent); border-left-color: var(--p2); background: color-mix(in srgb, var(--p2) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-card.p3 { border-color: color-mix(in srgb, var(--p3) 55%, transparent); border-left-color: var(--p3); background: color-mix(in srgb, var(--p3) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-card.p4 { border-color: color-mix(in srgb, var(--p4) 55%, transparent); border-left-color: var(--p4); background: color-mix(in srgb, var(--p4) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-card.p5 { border-color: color-mix(in srgb, var(--p5) 55%, transparent); border-left-color: var(--p5); background: color-mix(in srgb, var(--p5) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-card.p6 { border-color: color-mix(in srgb, var(--p6) 55%, transparent); border-left-color: var(--p6); background: color-mix(in srgb, var(--p6) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-card.p7 { border-color: color-mix(in srgb, var(--p7) 55%, transparent); border-left-color: var(--p7); background: color-mix(in srgb, var(--p7) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-card.p8 { border-color: color-mix(in srgb, var(--p8) 55%, transparent); border-left-color: var(--p8); background: color-mix(in srgb, var(--p8) 14%, rgba(25,32,40,0.88)); }
    .ally-panel .ally-head {
      display: flex; align-items: center; gap: 0.35rem;
      font-weight: 700; color: #fff;
    }
    .ally-panel .ally-head .who {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; line-height: 1.15;
    }
    .ally-panel .ally-head .who .human {
      font-size: 1.0em; font-weight: 800;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ally-panel .ally-head .who .leader {
      font-size: 0.78em; font-weight: 600;
      color: rgba(255,255,255,0.7);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ally-panel .ally-foot {
      display: flex; align-items: center; gap: 0.4rem;
      color: rgba(255,255,255,0.7); font-size: 0.85em;
    }
    .ally-panel .ally-foot .remain { flex: 1; }
    .ally-panel .break-btn {
      cursor: pointer; padding: 0.15rem 0.5rem;
      border-radius: 4px;
      background: rgba(220,90,90,0.18); border: 1px solid rgba(220,90,90,0.5);
      color: #f0b8b8; font-size: 0.9em;
    }
    .ally-panel .break-btn:hover { background: rgba(220,90,90,0.32); }
    /* Mobile: Panel oben links wuerde das Map ueberdecken — ausblenden. */
    @media (orientation: landscape) and (max-width: 900px) { .ally-panel { display: none !important; } }
    @media (max-width: 600px) { .ally-panel { display: none !important; } }

    .epoch-banner.upgrading {
      animation: epochUpgradePulse 1.6s ease-out 1;
    }
    @keyframes epochUpgradePulse {
      0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0.9), 0 4px 14px rgba(0,0,0,0.45); }
      40%  { box-shadow: 0 0 32px 8px rgba(255,215,0,0.9), 0 4px 14px rgba(0,0,0,0.45); transform: scale(1.06); }
      100% { box-shadow: 0 0 0 0 rgba(255,215,0,0), 0 4px 14px rgba(0,0,0,0.45); transform: scale(1.0); }
    }

    /* Kurzer Aufleucht-Effekt bei Ereignissen, die den eigenen Slot betreffen.
       'good' = gruener Puls (Eroberung, abgewehrter Angriff),
       'bad'  = roter Puls (eigener Angriff fehlgeschlagen, Sektor verloren).
       Animation laeuft 1.4s einmalig und wird per JS wieder entfernt. */
    .sector-circle.flash-good {
      animation: sectorFlashGood 1.4s ease-out 1;
    }
    .sector-circle.flash-bad {
      animation: sectorFlashBad  1.4s ease-out 1;
    }
    @keyframes sectorFlashGood {
      0%   { stroke: #80f0a0; stroke-width: 6;
             filter: drop-shadow(0 0 24px #4eff80) drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
      40%  { stroke: #80f0a0; stroke-width: 7;
             filter: drop-shadow(0 0 32px #4eff80) drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
      100% { stroke-width: 3;
             filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
    }
    @keyframes sectorFlashBad {
      0%   { stroke: #ff8080; stroke-width: 6;
             filter: drop-shadow(0 0 24px #ff5050) drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
      40%  { stroke: #ff8080; stroke-width: 7;
             filter: drop-shadow(0 0 32px #ff5050) drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
      100% { stroke-width: 3;
             filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
    }
    /* Welliger Staerke-Ring um den Sektor-Kreis */
    .strength-ring {
      fill: none;
      stroke-linejoin: round;
      stroke-linecap: round;
      pointer-events: none;
      opacity: 0.85;
      transition: stroke-width 0.4s, opacity 0.4s;
    }
    .strength-ring.strong   { animation: pulseRing 1.6s infinite alternate; }
    /* Negative animation-delays starten die Ringe phasenversetzt — sieht
       lebendiger aus als drei synchron pulsierende Schichten. */
    .strength-ring-2.strong { animation-delay: -0.5s; }
    .strength-ring-3.strong { animation-delay: -1.0s; }
    @keyframes pulseRing {
      from { opacity: 0.55; }
      to   { opacity: 1.0; }
    }
    @keyframes pulseStroke {
      0%   { stroke-width: 4; opacity: 1; }
      100% { stroke-width: 7; opacity: 0.7; }
    }
    .sector-name { fill: #fff; font-size: 13px; font-weight: 600; text-anchor: middle; pointer-events: none; }
    /* Eigentuemer-Name direkt unter dem Sektor-Namen — etwas kleiner und transparent. */
    .sector-owner { fill: rgba(255,255,255,0.78); font-size: 10px; font-weight: 600;
                    text-anchor: middle; pointer-events: none;
                    text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
    .sector-pop  { fill: #ddd; font-size: 11px; text-anchor: middle; pointer-events: none; }
    /* Bevoelkerungs-Indikator-Kugeln: ein Orb pro Rolle (Arbeiter/Forscher),
       Position oben links/rechts vom Sektor. Groesse skaliert mit der Anzahl.
       So kann man auf einen Blick erkennen "viel Wirtschaft" vs "viel Forschung". */
    .pop-orb {
      stroke: rgba(0,0,0,0.45);
      stroke-width: 1;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
      pointer-events: none;
      transition: all 0.4s ease; /* animiert r (Kreisradius); 'all' wegen VS-Validator */
    }
    .pop-orb-w { fill: #e09a4a; }   /* Arbeiter — amber/orange */
    .pop-orb-r { fill: #58c8e0; }   /* Forscher — cyan */
    .pop-orb-label {
      fill: #fff; font-size: 9px; font-weight: 700;
      text-anchor: middle;
      pointer-events: none;
      paint-order: stroke;
      stroke: rgba(0,0,0,0.7); stroke-width: 1.5px; stroke-linejoin: round;
    }
    .sector-prop { fill: #fff; font-size: 22px; text-anchor: middle; pointer-events: none;
      paint-order: stroke; stroke: rgba(0,0,0,0.8); stroke-width: 2.5px; stroke-linejoin: round;
      letter-spacing: 0.15em; }
    .sector-epoch {
      font-size: 22px; text-anchor: middle; pointer-events: none;
      paint-order: stroke;
      stroke: rgba(0,0,0,0.75); stroke-width: 3px; stroke-linejoin: round;
      fill: #fff;
    }
    .sector-strength {
      fill: #fff;
      font-size: 14px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
      paint-order: stroke;
      stroke: rgba(0,0,0,0.7);
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .movement-arrow {
      stroke: #1a1a1a; stroke-width: 1.5px;
      filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
      transition: transform 0.4s linear;
      /* Marsch-Animation: leichtes Pulsieren der Deckkraft, gibt
         "lebende Truppen"-Gefuehl ohne teure CSS-Transform-Aenderungen. */
      animation: arrowMarch 0.55s ease-in-out infinite alternate;
    }
    @keyframes arrowMarch {
      from { opacity: 0.85; }
      to   { opacity: 1.0; }
    }
    @media (max-width: 768px), (pointer: coarse) {
      /* Auf Mobile keine Marsch-Animation — spart Repaints. */
      .movement-arrow { animation: none; opacity: 0.95; }
    }
    .movement-label { fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle; pointer-events: none;
      paint-order: stroke; stroke: rgba(0,0,0,0.7); stroke-width: 2px; stroke-linejoin: round; }

    /* Epoch-spezifische Krieger-Bewegungs-Effekte (Spuren + Glow).
       Trail-Partikel werden im JS pro Tick neu gerendert — die Animation
       startet jeweils frisch und faded leicht. Auf Mobile ist filter:drop-shadow
       teuer, also nur fuer Future-Glow am Desktop. */
    .movement-trail {
      pointer-events: none;
    }
    .trail-dust    { animation: trailFade 0.55s ease-out forwards; }
    .trail-smoke   { animation: trailExpand 0.6s ease-out forwards; }
    .trail-sparkle { animation: trailFade 0.45s ease-out forwards; filter: drop-shadow(0 0 2px rgba(200,210,230,0.6)); }
    .trail-plasma  { animation: trailFade 0.5s ease-out forwards; filter: drop-shadow(0 0 4px #7dd3ff); }
    @keyframes trailFade {
      from { opacity: inherit; }
      to   { opacity: 0; }
    }
    @keyframes trailExpand {
      from { opacity: inherit; transform: scale(1); transform-origin: center; }
      to   { opacity: 0; transform: scale(1.6); transform-origin: center; }
    }
    /* Future: Pfeil hat einen kraeftigen Glow. Auf Mobile ausgeschaltet. */
    .movement-arrow.arrow-glow {
      filter: drop-shadow(0 0 5px #7dd3ff) drop-shadow(0 0 2px #4eaaff);
    }
    @media (max-width: 768px), (pointer: coarse) {
      /* Auf Mobile keine drop-shadow-Filter — spart Repaints. */
      .movement-arrow.arrow-glow,
      .trail-sparkle, .trail-plasma { filter: none; }
      /* Trail-Animation kurzer halten — keep it cheap. */
      .trail-dust, .trail-smoke, .trail-sparkle, .trail-plasma { animation-duration: 0.35s; }
    }

    .pause-banner {
      position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
      background: rgba(255,200,0,0.9); color: #000; padding: 0.6em 2em;
      border-radius: 4px; font-size: 1.4em; font-weight: 700;
      pointer-events: none; display: none;
    }
    .pause-banner.visible { display: block; }

    /* Audio-Einstellungs-Popover, oeffnet sich beim Klick auf den Audio-Button.
       Drei Kanaele: Soundeffekte, Hintergrundgeraeusche (Ambient), Musik. */
    .audio-menu-wrap { position: relative; display: inline-block; }
    .audio-panel {
      position: absolute; top: 110%; right: 0;
      display: none;
      background: #1f1f23; color: #fff;
      border: 1px solid #444; border-radius: 6px;
      padding: 0.7em 0.9em;
      min-width: 320px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.6);
      z-index: 1000;
      font-size: 0.9em;
    }
    .audio-panel.visible { display: block; }
    .audio-panel h4 { margin: 0 0 0.5em 0; font-size: 1em; color: #ffe066; }
    .audio-row {
      display: grid; grid-template-columns: minmax(150px, 1fr) 100px 40px;
      align-items: center; gap: 0.5em; margin-bottom: 0.5em;
    }
    .audio-row label { display: flex; align-items: center; gap: 0.4em; cursor: pointer; user-select: none; }
    .audio-row input[type="checkbox"] { accent-color: #6ee37a; }
    .audio-row input[type="range"] {
      width: 100%;
      /* Bessere Touch-Bedienbarkeit: kein 300ms Delay, kein vertikales Scrollen
         im Slider-Bereich (sonst nimmt Mobile den Drag als Scroll-Versuch wahr). */
      touch-action: none;
      -webkit-appearance: none;
      appearance: none;
      height: 22px;
      background: transparent;
    }
    /* Sichtbare Schiene + groesserer Knopf, vor allem fuer Touch. */
    .audio-row input[type="range"]::-webkit-slider-runnable-track {
      height: 6px; background: #333; border-radius: 3px;
    }
    .audio-row input[type="range"]::-moz-range-track {
      height: 6px; background: #333; border-radius: 3px;
    }
    .audio-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 22px; height: 22px; border-radius: 50%;
      background: #b0c8f0; border: 2px solid #6a8acb;
      cursor: pointer; margin-top: -8px;
    }
    .audio-row input[type="range"]::-moz-range-thumb {
      width: 22px; height: 22px; border-radius: 50%;
      background: #b0c8f0; border: 2px solid #6a8acb;
      cursor: pointer;
    }
    .audio-row input[type="range"]:disabled { opacity: 0.4; }
    .audio-row label:has(input:not(:checked)) ~ input[type="range"] { opacity: 0.4; }
    .audio-value { font-size: 0.85em; color: #aaa; text-align: right; }
    .audio-hint {
      font-size: 0.8em; color: #888;
      border-top: 1px solid #333; padding-top: 0.5em; margin-top: 0.6em;
    }
    .audio-hint code { color: #ffd066; background: #2a2a30; padding: 0 0.3em; border-radius: 2px; }

    /* Schwebender Krieger-Indikator am Mauszeiger waehrend Sektor markiert ist.
       Zeigt: wie viele Krieger gehen los? Verstaerkung oder Angriff?
       Default: ueber dem Cursor (das native Sektor-Tooltip vom Browser sitzt
       UNTER dem Cursor — so kollidieren sie nicht).
       Bei Cursor zu nah am oberen Rand wird per JS auf 'below' umgestellt. */
    .cursor-tooltip {
      position: absolute; pointer-events: none; display: none;
      background: rgba(20, 22, 28, 0.92);
      color: #fff;
      border: 1px solid rgba(255, 224, 102, 0.7);
      border-radius: 4px;
      padding: 0.3em 0.6em;
      font-size: 0.85em;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
      z-index: 10;
      transform: translate(16px, calc(-100% - 14px)); /* oberhalb Cursor */
    }
    .cursor-tooltip.below {
      transform: translate(16px, 22px); /* unterhalb Cursor — Fallback fuer Map-Top */
    }
    .cursor-tooltip.visible { display: block; }
    .cursor-tooltip.reinforce { border-color: #6ee37a; }
    .cursor-tooltip.attack    { border-color: #ff8a8a; }
    .cursor-tooltip.invalid   { border-color: #888; opacity: 0.85; }
    .cursor-tooltip .ct-icon  { margin-right: 0.25em; }
    .cursor-tooltip .ct-line2 { display: block; font-weight: 600; opacity: 0.95;
      font-size: 0.92em; margin-top: 1px; }
    .cursor-tooltip .ct-good { color: #80f0a0; }   /* eigener Angriff ueberlegen */
    .cursor-tooltip .ct-bad  { color: #ff9a9a; }   /* eigener Angriff unterlegen */
    .cursor-tooltip .ct-eq   { color: #ffe066; }   /* aehnlich stark */
    
    .sector-panel { margin-top: 0.6rem; padding: 0.6rem; background: #2d2d2d; border: 1px solid var(--border); border-radius: 4px; display: none; }
    .sector-panel.visible { display: block; }
    .sector-panel-title { font-weight: 600; margin-bottom: 0.4rem; }
    .role-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
    .role-count { font-family: Consolas, monospace; min-width: 2.5em; text-align: right; }
    .role-btn {
      background: #444; color: var(--fg); border: 1px solid var(--border);
      width: 32px; height: 32px; border-radius: 4px; cursor: pointer;
      font-size: 1.05em; line-height: 1;
      /* Kein Touch-Delay, kein Default-Tap-Highlight. */
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255,255,255,0.15);
      user-select: none;
    }
    .role-btn:hover  { background: #555; }
    .role-btn:active { background: #666; }
    /* Auch das Label "Forscher/Arbeiter/Krieger" ist klickbar (Pin) — Touch-Verhalten fixen. */
    .role-label {
      flex: 1;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255,255,255,0.1);
      user-select: none;
    }
    /* Mobile: groessere Tap-Targets fuer Bevoelkerungs-Buttons. */
    @media (max-width: 1024px) {
      .role-btn { width: 38px; height: 38px; font-size: 1.15em; }
      .role-row { gap: 0.5rem; margin-bottom: 0.45rem; }
    }
    .sector-card { padding: 0.5em 0.6em; background: #2d2d2d; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.4rem; transition: background 0.15s, border-color 0.15s; }
    .sector-card.selected {
      background: #353035;
      border-color: #fff;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
    }
    .sector-card-title { font-weight: 600; margin-bottom: 0.3rem; font-size: 0.95em; }
    .role-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .role-row.focused .role-label::after {
      content: ' ★';
      color: #ffcc44;
      font-size: 0.85em;
    }
    .role-row.focused .role-label {
      color: #ffcc44;
      font-weight: 600;
    }

    .help-text {
      position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
      background: rgba(255,255,255,0.06); padding: 0.4em 1em; border-radius: 4px;
      font-size: 0.85em; color: #ccc; pointer-events: none;
    }
    /* Legende fuer Sektor-Eigenschaften — fix unten rechts in der Map */
    .property-legend {
      position: absolute; bottom: 1rem; right: 1rem;
      background: rgba(20,30,40,0.78);
      border: 1px solid rgba(120,160,200,0.3);
      border-radius: 6px;
      padding: 0.5em 0.7em;
      font-size: 0.78em; color: #ddd;
      max-width: 240px;
      backdrop-filter: blur(2px);
      pointer-events: auto;
    }
    .property-legend h4 {
      margin: 0 0 0.3em; font-size: 0.95em; color: #b0c8f0;
      font-weight: 600; letter-spacing: 0.04em;
    }
    .property-legend .legend-row {
      display: grid; grid-template-columns: 22px 1fr;
      align-items: baseline; gap: 0.3em; margin: 0.15em 0;
    }
    .property-legend .legend-row .glyph { text-align: center; font-size: 1.1em; }
    .property-legend .legend-row .effect { color: #aaa; font-size: 0.92em; }
    .property-legend.collapsed .legend-body { display: none; }
    .property-legend .toggle {
      cursor: pointer; float: right; color: #888;
      padding-left: 0.4em; user-select: none;
    }
    .property-legend .toggle:hover { color: #fff; }