/* ====== Base ====== */
:root{
  --bg-0:#111;        /* Page background */
  --bg-1:#181818;     /* Panels/rows (dark) */
  --bg-2:#232323;     /* Buttons/inputs */
  --bg-3:#2a2a2a;     /* Borders */
  --bg-4:#0f0f0f;     /* Titlebars */
  --txt-0:#eee;       /* Main text */
  --txt-1:#aaa;       /* Muted text */
  --accent:#6ad1ff;   /* Links (maps) */
  --accent-2:#ffe34a; /* Mod version / highlight */

  /* Map overlay image sizing */
  --map-img-max-h: 40vh;
  --map-img-max-w: 80%;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  background-color:var(--bg-0);
  color:var(--txt-0);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  margin:0;
}
h1{ margin:14px 0; }

/* ====== Social Icons ====== */
.header-socials{
  position:absolute; top:22px; right:20px; z-index:55;
  display:flex; gap:12px;
}
.header-socials img{
  width:50px; height:50px;
  filter:grayscale(.45) brightness(1.04);
  opacity:.84; border-radius:6px;
  transition:filter .16s, opacity .16s, transform .16s, box-shadow .16s, background .16s;
  background:var(--bg-1); box-shadow:0 2px 6px #0002;
}
.header-socials img:hover{
  filter:none; opacity:1; transform:scale(1.13) rotate(-4deg);
  box-shadow:0 4px 18px #0006; background:#27272c;
}

/* ====== Header Buttons & Refresh ====== */
.header-links{
  margin:72px 0 18px;           /* Platz für Social-Icons (Desktop) */
  display:flex; gap:13px; flex-wrap:wrap; align-items:center;
  padding-right:360px;          /* Platz rechts für Social-Icons */
}
@media (max-width:700px){
  .header-links{ margin-top:40px; padding-right:90px; }
  .header-socials{ top:12px; right:6px; }
  .header-socials img{ width:27px; height:27px; }
}

.header-btn,.refresh-btn,.compact-btn,.btn{
  background:var(--bg-2);
  color:var(--txt-0);
  border:1.5px solid #444;
  border-radius:7px;
  padding:6px 22px;
  font-size:1em;
  cursor:pointer;
  text-decoration:none;
  margin-bottom:0; margin-right:6px;
  transition:background .13s,color .13s,transform .08s, opacity .15s ease;
  font-weight:700;
}
.header-btn:hover,.refresh-btn:hover,.compact-btn:hover,.btn:hover{
  background:#31313a; color:#fff; transform:translateY(-1px);
}
.refresh-btn[disabled]{ opacity:.67; cursor:not-allowed; }

.btn-primary{ background:#7289da; border-color:#5a6ec3; color:#fff; }
.btn-primary:hover{ background:#4752c4; }
.btn-secondary{ background:#2c2c2c; border-color:#444; color:#eee; }

/* Refreshbar + timestamp */
#refreshbar{ display:flex; align-items:center; gap:16px; margin-bottom:8px; }
#last-update{ color:var(--txt-1); font-size:.98em; user-select:none; }

/* ====== Filter Box ====== */
#filter-box{
  border:1.5px solid #333; background:var(--bg-1);
  border-radius:13px; padding:14px 20px 11px; margin-bottom:14px;
  float:right; min-width:355px; box-shadow:0 2px 10px #0002;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:9px 13px;
}
#filter-title{
  font-weight:600; font-size:1.11em; color:#e2e2e2; margin-bottom:2px; width:100%;
  text-align:right; letter-spacing:.7px;
}
.filter-btn{
  cursor:pointer; padding:4px 10px; background-color:#222; border:1px solid #444; color:var(--txt-0);
  margin:5px 4px 5px 0;
}
.flag-icon{ width:20px; height:15px; vertical-align:middle; }

/* DataTables inputs */
.dataTables_length select,.dataTables_filter input{
  background-color:var(--bg-1)!important; color:var(--txt-0)!important; border:1px solid #444!important;
}
.dataTables_length select option{ background:var(--bg-1)!important; color:var(--txt-0)!important; }

/* ====== Table ====== */
table.dataTable tbody tr.odd  { background-color:#19191e; }
table.dataTable tbody tr.even { background-color:#24242a; }
table.dataTable tbody tr.shown{ background-color:#202026!important; }

/* Favorites */
.fav-star{ color:#aaa; cursor:pointer; font-size:1.24em; margin-right:3px; user-select:none; vertical-align:middle; transition:color .13s; }
.fav-star.fav{ color:gold; text-shadow:0 0 6px #fd0a; }

/* Truncation Cells */
.server-name-cell,.mod-cell{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:380px; display:inline-block; vertical-align:middle;
}
.mod-cell{ max-width:153px; }

/* Modname + Version bündig */
.mod-cell, .mod-version{ display:inline-block; vertical-align:middle; line-height:1.2; }
.mod-version{ color:var(--accent-2); }

/* Details-Button (ohne Inline-Styles) */
button.toggle-details{
  background:#222; color:#eee; border:1px solid #444;
  border-radius:6px; padding:3px 12px; cursor:pointer;
}

/* Mod link style */
.mod-link{ color:#fff!important; text-decoration:underline!important; cursor:pointer; }
.mod-link:hover{ color:var(--accent-2)!important; }

/* Copy IP */
.copy-ip{ margin-left:6px; color:#bbb; font-size:1em; cursor:pointer; vertical-align:middle; display:inline-block; position:relative; }
.copy-ip.copied{ color:#58fd7b; font-weight:bold; }
.copy-tooltip{
  display:none; position:absolute; left:36px; top:0; background:var(--bg-1); color:#c5ffc5;
  border-radius:6px; padding:4px 14px; font-size:.97em; z-index:99; border:1px solid #444; pointer-events:none; white-space:nowrap;
}
.show-tooltip .copy-tooltip{ display:block; }

/* Connect button + tooltip */
.connect-btn{
  text-decoration:none; padding:3px 8px; border-radius:5px; background:#2c2c2c; color:var(--txt-0);
  border:1px solid #444; font-size:1.2em; margin-left:2px; display:inline-block; vertical-align:middle; position:relative; z-index:30;
}
.connect-tooltip{
  display:none; position:fixed; background:#222; color:var(--txt-0);
  border:1px solid #444; border-radius:7px; padding:8px 16px; font-size:1.02em; white-space:nowrap; z-index:5000;
  pointer-events:none; min-width:185px; max-width:85vw; left:0; top:0;
}

/* Map name (table) */
.map-tooltip{
  cursor:pointer; color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px;
  display:inline-block; vertical-align:bottom;
}

/* ====== Details (Row Expand) ====== */
.details-row{
  background-color:var(--bg-1); padding:12px 6px 6px; border-radius:0 0 12px 12px; margin-top:-2px;
  border-top:2px solid #232323; display:flex; gap:18px; flex-wrap:wrap; font-size:.92em;
}
.details-left{ width:208px; min-width:150px; }
.details-middle{ flex:1; min-width:200px; }
.details-right{ width:320px; min-width:150px; max-width:360px; overflow-x:auto; }

/* Map thumb inside details */
.mapimg{
  display:block; margin:10px auto 0;
  max-width:208px; max-height:170px;
  border-radius:8px; border:1px solid #444;
}

.details-left .map-history { margin-top:10px; }
.map-history .mh-title { font-weight:600; margin-bottom:6px; color:#ddd; }
.map-history .mh-list { display:flex; flex-direction:column; gap:4px; max-height:200px; overflow:auto; }
.map-history .mh-item { display:flex; justify-content:space-between; font-size:.92em; color:#bdbdbd; }
.map-history .mh-map .map-tooltip {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-history .mh-time { opacity:.8; }

/* Info table */
.info-table{ width:100%; border-collapse:collapse; font-size:.93em; margin-bottom:13px; }
.info-table td{ padding:2px 7px; border-bottom:1px solid #232323; }
.info-table tr:last-child td{ border-bottom:none; }

/* Spieler-Tabellen: feste Spaltenbreiten & kleine, konsistente Zahlen */
.details-teams-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:10px;
  table-layout:fixed;
  background:#1b1b1f;       /* durchgängig dunkel -> keine weißen Streifen */
}
.details-teams-table col.name  { width:60%; }
.details-teams-table col.score { width:20%; }
.details-teams-table col.ping  { width:20%; }

/* Team-Kopfstreifen über die volle Breite, Label liegt IN dem Streifen */
.team-head{
  padding:6px 10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#fff;
  border-bottom:1px solid #2a2a2a;
}
.team-head.axis{    background:#b71c1c; } /* rot */
.team-head.allies{  background:#1565c0; } /* blau */
.team-head.spec{    background:#5f6368; } /* grau */

/* Spalten-Header (Name/Score/Ping) */
.details-teams-table thead tr.cols th{
  background:#24242a;
  color:#dcdcdc;
  padding:5px 7px;
  border-bottom:1px solid #2e2e2e;
  font-size:.78em;
}

/* Datenzeilen */
.details-teams-table td{
  padding:4px 7px;
  border-bottom:1px solid #2a2a2a;
  font-size:.70em;                 /* kompakt wie gewünscht */
  word-break:break-word;
}
.details-teams-table tbody tr:last-child td{ border-bottom:none; }
.details-teams-table tbody td:nth-child(2),
.details-teams-table tbody td:nth-child(3),
.details-teams-table thead tr.cols th:nth-child(2),
.details-teams-table thead tr.cols th:nth-child(3){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Responsive details */
@media (max-width:650px){
  .details-row{ flex-direction:column; }
  .details-left,.details-middle,.details-right{ width:100%!important; min-width:0!important; }
  .mod-cell,.server-name-cell{ max-width:99vw!important; }
}

/* ====== Overlays: viewport-fixiert, mobil vollflächig ====== */
/* Seite beim offenen Overlay fixieren, ohne Sprung */
body.modal-open{
  position: fixed;   /* verhindert Scrollen */
  width: 100%;
  overflow: hidden;  /* Sicherheitsnetz */
  touch-action: none;
}


/* Basestate: immer display:flex, via .show aktivieren (verhindert jQuery-Display-Bugs auf Mobile) */
.overlay{
  position:fixed; inset:0;
  display:flex;
  align-items:center; justify-content:center;
  background:rgba(15,16,18,0.93);
  z-index:30000;
  opacity:0; pointer-events:none;
  transition:opacity .14s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.overlay .panel{
  position:relative;
  width:min(1400px, 96vw);
  max-height:94dvh;              /* respektiert Mobile-URL-Bar */
  background:var(--bg-1); color:var(--txt-0);
  border:1px solid var(--bg-3); border-radius:12px;
  box-shadow:0 10px 36px #0009;
  display:flex; flex-direction:column; overflow:hidden;
}

/* Titlebar & Abstand rechts, damit der ✕ nicht überlappt */
.overlay .titlebar{
  padding:10px 18px;
  padding-right:64px;            /* Platz für X */
  background:var(--bg-4);
  border-bottom:1px solid #222;
  font-weight:800;
}

/* Globales Close-X */
.overlay .close{
  position:absolute; top:8px; right:10px;
  width:38px; height:38px; border-radius:10px;
  background:#1c1c1c; color:#ddd; border:1px solid var(--bg-3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; cursor:pointer; z-index:5;
}
.overlay .close:hover{ background:#232323; }

/* Iframes in Overlays */
.overlay iframe{ flex:1; width:100%; height:100%; border:0; background:#0b0c10; }

/* Map Overlay */
#map-overlay .panel{ width:min(980px,95vw); }
.map-head{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px 18px;
  padding-right:64px;            /* Platz für X */
  border-bottom:1px solid #262626;
}
.map-body{
  flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:14px 18px 10px;
}
#overlay-img{
  max-width:var(--map-img-max-w);
  max-height:var(--map-img-max-h);
  width:auto; height:auto;
  object-fit:contain;
  border-radius:10px; border:1px solid #333; display:block;
}
#objdata-wrap{
  padding:0 18px 18px;
  border-top:1px solid #262626;
  background:#141417;
}
#objdata-title{ font-weight:800; margin:8px 0 6px; }
#objdata{
  margin:0; padding:10px 12px;
  background:#0f0f13; border:1px solid #30303a; border-radius:8px;
  max-height:28vh; overflow:auto; white-space:pre-wrap; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.88em; line-height:1.35;
}

/* Große inhaltliche Overlays – Breite/Höhe */
#filebase-modal .panel,
#mapsdir-modal  .panel,
#etmanual-modal .panel{ width:min(1400px,97vw); height:min(94dvh,1000px); }

#etmonitor-modal .panel{ width:min(1100px,95vw); height:min(94dvh,900px); }
#nickgen-modal   .panel{ width:min(900px,95vw);  height:min(92dvh,820px);  }
#etkey-modal     .panel{ width:min(520px,95vw);  padding:1.6rem 1.8rem; }

/* Mobile: vollflächige Overlays */
@media (max-width:700px){
  .overlay .panel{
    width:100vw; height:100dvh; max-height:100dvh; border-radius:0;
  }
  .overlay .titlebar{ position:sticky; top:0; z-index:2; }
  /* X stets sichtbar und NICHT mit Buttons kollidierend */
  .overlay .close{ position:fixed; top:10px; right:10px; z-index:3; }
}

/* Help Overlay (einfacher Inhalt) */
#help-overlay{
  background:rgba(10,10,12,0.96);
}
#help-content{
  position:relative; background:#202022; border-radius:1.2rem;
  padding:2.3rem 2.5rem; color:#eee; box-shadow:0 8px 38px #000c;
  max-width:430px; margin:auto; font-size:1.08em;
}
#help-content .close{
  position:absolute; top:10px; right:17px; font-size:1.8em; color:#eee;
  background:transparent; border:none; cursor:pointer;
}

/* Links */
a.download{ color:#66eaff; text-decoration:underline; }

.map-meta{ margin-top:14px; display:grid; gap:12px; grid-template-columns:1fr; }
.map-meta-title{ font-weight:700; letter-spacing:.3px; color:#ddd; margin-bottom:4px; }
.map-meta-pre{
  background:#101114; border:1px solid #2a2a2a; border-radius:8px;
  padding:10px 12px; max-height:120px; overflow:auto; white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.88em; line-height:1.35; color:#dfe6f7;
}

/* ARENA: hübsche Info-Box */
/* ----- Map metadata / content boxes ----- */
.map-meta{ margin-top:14px; }
.map-meta-scroll{
  max-height:300px;              /* gewünschte Scrollhöhe */
  overflow:auto;
  border:1px solid #333;
  border-radius:10px;
  background:#1a1a1a;
  padding:12px;
}

/* Arena & Objdata – Typo */
.arena-title, .objdata-title{
  font-weight:800;
  font-size:1.08rem;
  margin:.2rem 0 .4rem;
}
.arena-sub{ color:#bbb; margin-top:-2px; margin-bottom:.5rem; }

.kv-grid{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:6px 12px;
  margin:.3rem 0 .5rem;
}
.kv-label{ color:#ccc; }
.kv-val{ color:#eee; }

.arena-section, .obj-section{ margin:.6rem 0 .8rem; }
.arena-para, .obj-para{ line-height:1.5; margin:.25rem 0; }
.arena-muted{ color:#aaa; font-style:italic; }

.obj-list{ margin:.3rem 0 .4rem 1.2rem; line-height:1.5; }
.obj-list li{ margin:.15rem 0; }

.map-history{ margin-top:10px; }
.mh-title{ font-weight:800; margin:6px 0 4px; }
.mh-list{ max-height:220px; overflow:auto; border-top:1px solid #232; }
.mh-item{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed #2a2a2a; }
.mh-map{ color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:65%; }
.mh-time{ color:var(--txt-1); white-space:nowrap; }

/* Visually hidden (sr-only) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.server-link{ text-decoration:none }
.server-link:hover{ text-decoration:underline }
.server-page-link{ color:#6ad1ff; opacity:.9 }
.server-page-link:hover{ opacity:1 }

/* ==== Home hardening / no autosize, no wraps (sicherheitsnetz) ==== */

/* Browser-Autosizing ausschalten (keine DPI/Text-Vergrößerung) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Home-Boxen: nie umbrechen, Ellipsis erzwingen, Grid-Kinder schrumpfbar */
.home .box .headrow > div,
.home .box .row > div,
.home .sublist .mini > div,
.home .legend-row > div {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  padding: 0 6px;
}

/* Canvas nicht via CSS stretchen (Größe kommt 1:1 aus JS) */
.home #countryPie {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  display: block;
}