/* =================================
   Rivalry Tracker - visual refresh, unified inputs, robust table
   ================================= */

:root{
  --bg:#0b0f14;
  --panel:rgba(15,21,32,.72);
  --panel2:rgba(18,26,39,.66);
  --glass:rgba(255,255,255,.06);
  --muted:#9aa4b2;
  --text:#e8edf3;
  --accent:#ff5a00;
  --accentWarm1:#ff6a00;
  --accentWarm2:#ff3b57;
  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --lose:#ff4060;
  --win:#22c55e;
  --border:#1f2a37;

  --edge:20px;
  --name-col:180px;

  --c-date:12ch;
  --c-map:18ch;

  --stickyTop:0px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; background:var(--bg); }
body{
  margin:0; min-height:100%; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", Inter, sans-serif;
  background:transparent; position:relative;
}

/* hero bg */
body::before{
  content:""; position:fixed; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.42)),
    url("/hero-nuke.jpg") center center / cover no-repeat fixed;
  filter: brightness(1.08) saturate(1.06) blur(8px);
  z-index:0; pointer-events:none;
}

/* layout */
.wrap{ max-width:1440px; margin:0 auto; padding:36px; position:relative; z-index:1; }
.hero{ text-align:center; }
.title{ font-size:3.1rem; margin:8px 0 6px; letter-spacing:.01em; text-shadow:0 4px 24px rgba(0,0,0,.55); }
.title a{ color:inherit; text-decoration:none; } .title a:hover{ text-decoration:none; }
.subtitle{
  display:inline-block; margin-top:16px; margin-bottom:16px; padding:10px 14px; background:rgba(11,15,20,.55);
  border:1px solid var(--glass); border-radius:999px; color:#f2f6fb; font-size:1rem; font-weight:700;
}

/* Portrait: Titel bleibt einzeilig und skaliert flüssig herunter */
@media (orientation: portrait){
  .title{
    white-space: nowrap;            /* nie umbrechen */
    word-break: keep-all;           /* keine Not-Trennung */
    hyphens: manual;                /* keine automatische Silbentrennung */

    /* flüssige Typo: wird auf kleinen Screens kleiner,
       oberes Limit bleibt dein bisheriges 3.1rem */
    font-size: clamp(1.8rem, 8.5vw, 3.1rem);

    /* etwas enger, damit mehr Zeichen reinpassen */
    letter-spacing: .02em;
    line-height: 1.05;

    /* optional: wenn der Text absolut nie abgeschnitten werden soll */
    overflow: visible;              /* oder: hidden */
    text-overflow: clip;            /* oder: ellipsis */
  }

   /* Nur im Hochformat: Subtitle kleiner */
  .subtitle{
    font-size: 0.8rem;
  }
  /* etwas Seitenluft, damit die Zeile Platz hat */
  .hero{ padding-inline: 12px; }
}

/* cards */
.card{
  background: linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--glass);
  border-radius:18px;
  padding:16px 18px;
  margin-top:16px;
  box-shadow:0 18px 38px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter: blur(8px) saturate(115%);
  transition: box-shadow .25s ease, outline .2s ease;
}
.card:focus-within{
  outline:2px solid rgba(255,106,0,.5);
  outline-offset:2px;
  box-shadow:0 0 28px rgba(255,106,0,.32), 0 0 46px rgba(255,59,87,.22), 0 18px 38px rgba(0,0,0,.35);
}

/* input card */
.input-card{
  border-color:rgba(255,85,0,.28);
  width:100%;
  margin-inline:0;
  display:flex; flex-direction:column; padding:0; overflow:hidden;
  box-shadow:0 0 18px rgba(0,0,0,.35); border-radius:18px;
  transition: box-shadow .25s ease, outline .2s ease;
}
.input-card:focus-within{
  outline:2px solid rgba(255,106,0,.5); outline-offset:2px;
  box-shadow:0 0 32px rgba(255,106,0,.38), 0 0 52px rgba(255,59,87,.26), 0 18px 38px rgba(0,0,0,.35);
}
.input-card > *{ padding:24px 20px; }
.input-card > * + *{
  border-top:1px solid rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,0)) border-box;
}
.input-card::before,
.input-card::after{ content:""; display:block; height:2px; }
.input-card::before{ background:linear-gradient(90deg, transparent, rgba(255,106,0,.35), transparent); }
.input-card::after{ background:linear-gradient(90deg, transparent, rgba(255,59,87,.3), transparent); }

/* inputs */
.input-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:end; margin:0; }
@media (max-width:820px){ .input-grid{ grid-template-columns:1fr; } }
label{ font-size:.92rem; color:var(--muted); display:block; margin-bottom:8px; font-weight:600; }
input{
  width:100%; padding:14px; border-radius:14px; border:1px solid var(--border);
  background:#0d1421; color:#e9eef6; outline:none; box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
input:focus{
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(255,106,0,.3), 0 0 0 6px rgba(255,59,87,.18);
}
input::placeholder{ color:#7a8696; }
.form-actions{ grid-column:1 / -1; margin:0; padding-top:8px; }

/* textarea – wie input stylen (verhindert iOS-Autozoom i.V.m. iOS-Block unten) */
textarea{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#0d1421;
  color:#e9eef6;
  outline:none;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  font: inherit;           /* gleiche Schrift wie body */
  resize: vertical;        /* nur vertikal */
  min-height: 6.5rem;
}
textarea:focus{
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(255,106,0,.3), 0 0 0 6px rgba(255,59,87,.18);
}
textarea::placeholder{ color:#7a8696; }

/* CTA */
.cta{
  width:100%; padding:14px; border:none; border-radius:14px; font-weight:900; font-size:1rem;
  cursor:pointer; text-transform:uppercase; letter-spacing:.04em;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--accentWarm1), var(--accentWarm2) 45%, var(--accentWarm1));
  background-size: 300% 300%; color:#fff;
  box-shadow:none;   /* Schatten entfernt */
  transition: transform .15s ease, outline .2s ease;
  animation: gradientShift 6s ease infinite;  /* Farbwechsel bleibt */
}
.cta:hover,
.cta:active,
.cta:focus{
  box-shadow:none;
  transform:none;
  outline:2px solid rgba(255,106,0,.55);
  outline-offset:3px;
}
@keyframes shine{ 100% { left:125%; } }
@keyframes gradientShift{ 0%{ background-position:0 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* generischer Button fuer Load more */
.btn{
  appearance:none; border:1px solid var(--glass); color:#fff; background:rgba(12,18,29,.9);
  padding:12px 16px; border-radius:12px; font-weight:800; letter-spacing:.02em; cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  transition: transform .12s ease, box-shadow .12s ease, outline .2s ease;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset; }
.btn:active{ transform: translateY(0); box-shadow:0 8px 16px rgba(0,0,0,.35) inset; }
.btn:focus{ outline:2px solid rgba(255,106,0,.5); outline-offset:3px; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.7; cursor:not-allowed; }

.btn-row{
  display:flex; justify-content:center; align-items:center; gap:12px;
  padding:16px 0 8px; margin-top:8px;
}

/* status, links */
.status{
  min-height:44px; margin:0; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding-top:16px; padding-bottom:16px;
}
.pill{ display:inline-block; padding:7px 12px; border-radius:999px; border:1px solid var(--glass); background:rgba(12,18,29,.85); font-size:.86rem; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.ok{ color:var(--ok); } .warn{ color:var(--warn); } .err{ color:var(--err); }
.link{ color:#ffc39c; text-decoration:none; font-weight:800; }
.link:hover{ text-decoration:underline; }

/* custom summary badges */
.pill-team{
  border-color:#1f2a37;
  background:rgba(12,18,29,.9);
  color:#2aa2ff;
  font-weight:800;
}
.pill.teammate-count{
  border-color:#1f2a37;
  background:rgba(12,18,29,.9);
  color:#2aa2ff;
  font-weight:800;
}
.pill.opponent-count{
  border-color:#1f2a37;
  background:rgba(12,18,29,.9);
  color:#ff4a4a;
  font-weight:800;
}
.pill-opp{
  border-color:#1f2a37;
  background:rgba(12,18,29,.9);
  color:#ff4a4a;
  font-weight:800;
}

/* visually hidden */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px) !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.hp-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.grid-span-full { grid-column: 1 / -1; }

/* compare banner – Baseline */
.compare-banner{ margin-top:12px; text-align:center; }
.compare-line{ display:inline-flex; align-items:center; justify-content:center; gap:14px; }
.compare-line .side{ display:inline-flex; align-items:center; gap:10px; }
.side .name{ font-size:1.4rem; font-weight:900; letter-spacing:.01em; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badges-inline{ display:flex; align-items:center; gap:8px; }
.vs-dot{ display:inline-block; margin:0 .35rem; opacity:.95; color:#ffffff; }
.compare-banner .name .player-link{
  color: #ffc39c;
  text-decoration: none;
}
.compare-banner .name .player-link:hover{
  color: #ff9c60;
  text-decoration: underline;
}

@media (min-width:981px){
  .compare-line .side:first-child .badges-inline{ order:1; flex-direction: row; }
  .compare-line .side:first-child .name{ order:2; }
  .compare-line .side:last-child .name{ order:1; }
  .compare-line .side:last-child .badges-inline{ order:2; flex-direction: row-reverse; }
}

/* level badge */
.level-badge{
  --pct: 180deg; --lev-color: var(--accent);
  position:relative; display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  color:#111; font-weight:800; vertical-align:middle;
  box-shadow:0 0 22px rgba(255,106,0,.35), 0 0 46px rgba(255,59,87,.25);
}
.level-badge.lv-1  { --lev-color:#9aa4b2; --pct:36deg;  }
.level-badge.lv-2  { --lev-color:#34d399; --pct:72deg;  }
.level-badge.lv-3  { --lev-color:#22c55e; --pct:108deg; }
.level-badge.lv-4  { --lev-color:#fbbf24; --pct:144deg; }
.level-badge.lv-5  { --lev-color:#ffd54f; --pct:180deg; }
.level-badge.lv-6  { --lev-color:#ffc107; --pct:216deg; }
.level-badge.lv-7  { --lev-color:#ffb300; --pct:252deg; }
.level-badge.lv-8  { --lev-color:#ff7a1a; --pct:288deg; }
.level-badge.lv-9  { --lev-color:#ff6a00; --pct:324deg; }
.level-badge.lv-10 { --lev-color:#ff3b57; --pct:360deg; }
.level-badge .level-ring{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(var(--lev-color) 0 var(--pct), rgba(255,255,255,.12) var(--pct) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
          mask: radial-gradient(circle, transparent 62%, #000 63%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
}
.level-badge .level-num{
  position:relative; z-index:1; color:#ffe8db;
  text-shadow:0 1px 3px rgba(0,0,0,.55); font-size:1.05rem; line-height:1;
}

/* elo badge */
.elo-badge{
  display:inline-flex; align-items:center; padding:6px 10px;
  border-radius:999px; background:rgba(12,18,29,.9);
  border:1px solid var(--glass); color:#dfe6ee;
  font-variant-numeric: tabular-nums; font-weight:800;
}
.elo-badge .elo-val{ letter-spacing:.01em; }

/* header above each table */
.card-head { margin-bottom:12px; padding-left:var(--edge); padding-right:var(--edge); }
.head-grid { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
.card-head .player-name { font-weight:900; font-size:1.18rem; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-head .badges { display:flex; align-items:center; gap:10px; margin-left:8px; }

/* Ban-Chip */
.card-head .pill.err {
  background:
    linear-gradient(180deg, rgba(255,84,84,.24), rgba(255,46,64,.18)),
    rgba(24,10,14,.96);
  border-color: rgba(255,96,96,.6);
  color:#ffe9ec;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:.9rem;
  padding:2px 8px;
  line-height:1.2;
  box-shadow:0 0 0 1px rgba(255,120,120,.25) inset,
             0 6px 18px rgba(255,64,96,.28),
             0 0 28px rgba(255,64,96,.22);
  backdrop-filter: blur(2px) saturate(110%);
  align-self:center;
}
.card-head .pill.err::before {
  content:"";
  width:1.05em; height:1.05em; margin-right:.55ch;
  display:inline-block; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 3.87-2.69 7.19-6.5 8.06-.33.08-.67.08-1 0C7.69 19.19 5 15.87 5 12V6l7-4zM9.88 8.46c.3-.3.79-.3 1.09 0L12 9.39l1.03-1.03a.77.77 0 011.09 1.09L13.09 10.5l1.03 1.03a.77.77 0 01-1.09 1.09L12 11.59l-1.03 1.03a.77.77 0 01-1.09-1.09l1.03-1.03-1.03-1.03a.77.77 0 010-1.09z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l7 4v6c0 3.87-2.69 7.19-6.5 8.06-.33.08-.67.08-1 0C7.69 19.19 5 15.87 5 12V6l7-4zM9.88 8.46c.3-.3.79-.3 1.09 0L12 9.39l1.03-1.03a.77.77 0 011.09 1.09L13.09 10.5l1.03 1.03a.77.77 0 01-1.09 1.09L12 11.59l-1.03 1.03a.77.77 0 01-1.09-1.09l1.03-1.03-1.03-1.03a.77.77 0 010-1.09z'/></svg>") no-repeat center / contain;
}

@media (max-width:980px) and (orientation:portrait){
  .card-head .head-grid{ column-gap: 10px; row-gap: 8px;
  }

  .card-head .pill.err{
    display:inline-block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-align: left;
    line-height: 1.2;
    max-width: min(60vw, 280px);
  }

  .card-head .pill.err::before{
    display:inline-block;
    vertical-align: text-top;
    margin-right:.55ch;
  }
}

/* Pill-Text kleiner, damit er nicht umbricht */
@media (max-width: 980px) and (orientation: portrait) {
  .pill.err {
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .pill.warn {
    text-align: center;
    display: inline-block;
    white-space: normal;
  }
}

/* responsive header */
@media (max-width:980px){
  .head-grid{ flex-wrap:wrap; }
}

/* table wrapper */
.table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  padding-left:var(--edge);
  padding-right:var(--edge);
  scrollbar-gutter:stable both-edges;
}
.table-wrap:focus{ outline:2px solid rgba(255,106,0,.48); outline-offset:3px; border-radius:12px; }

/* table */
table.stats{
  width:100%; margin-inline:0; border-collapse:separate; border-spacing:0; table-layout:auto;
  font-size:.95rem; background:rgba(0,0,0,.22); border-radius:12px; overflow:hidden;
}

/* sticky table header */
table.stats thead th{
  position:sticky;
  top:var(--stickyTop);
  z-index:10;
  background:
    linear-gradient(180deg, rgba(255,106,0,.22), rgba(255,59,87,.16)),
    rgba(16,22,32,.96);
  color:#f6f9fe; backdrop-filter: blur(2px);
  font-weight:800; border-bottom:1px solid rgba(255,255,255,.06);
}
table.stats thead th:first-child{
  left:0;
  z-index:12;
  box-shadow:2px 0 0 rgba(255,255,255,.05);
}
table.stats thead th:nth-child(2){
  left:var(--c-date);
  z-index:11;
  box-shadow:2px 0 0 rgba(255,255,255,.05);
}

/* zebra */
table.stats tbody tr:nth-child(odd) td{ background:rgba(255,140,0,.045); }
table.stats tbody tr:nth-child(even) td{ background:rgba(255,99,71,.03); }
table.stats tbody tr:hover td{ background:rgba(255,255,255,.05); }

/* cells */
table.stats th, table.stats td{
  padding:13px 12px; border-bottom:1px solid rgba(255,255,255,.06);
  white-space:nowrap; font-variant-numeric: tabular-nums;
}

/* header alignment */
table.stats th{ text-align:right; }
table.stats th:nth-child(1),
table.stats th:nth-child(2),
table.stats th:last-child{ text-align:left; }

/* >>> Centering der engen Kopfspalten 2k, 3k, 4k, 5k, MVPs */
table.stats thead th:nth-child(13),
table.stats thead th:nth-child(14),
table.stats thead th:nth-child(15),
table.stats thead th:nth-child(16),
table.stats thead th:nth-child(17){
  text-align:center;
}

/* sticky left columns */
table.stats tbody td:first-child{
  position:sticky; left:0; z-index:4;
  background:linear-gradient(180deg, rgba(14,19,28,.98), rgba(18,26,39,.94));
  box-shadow:2px 0 0 rgba(255,255,255,.05);
}
table.stats tbody td:nth-child(2){
  position:sticky; left:var(--c-date); z-index:3;
  background:linear-gradient(180deg, rgba(14,19,28,.98), rgba(18,26,39,.94));
  box-shadow:2px 0 0 rgba(255,255,255,.05);
}

/* last column compact */
table.stats td:last-child{ white-space:nowrap; width:1%; }

/* numeric coloring + alignment */
.num{ text-align:right; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1, "lnum" 1; }
.td-pos{ color:var(--win); font-weight:800; }
.td-neg{ color:var(--lose); font-weight:800; }
.td-tie{ color:var(--warn); font-weight:800; }

/* >>> Body: enge Spalten 2k–5k + MVPs zentrieren und enger paddings */
table.stats tbody td.num:nth-child(13),
table.stats tbody td.num:nth-child(14),
table.stats tbody td.num:nth-child(15),
table.stats tbody td.num:nth-child(16),
table.stats tbody td.num:nth-child(17){
  text-align:center;
  padding-left:6px;
  padding-right:6px;
}

/* Map / Score */
td.map-score{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px; white-space:nowrap;
}
td.map-score .score-badge{
  font-weight:900; padding:2px 8px; line-height:1.2; border-radius:8px; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  justify-self:end; min-width:6.5ch; text-align:center;
}
td.map-score .score-badge.win  { color: var(--win); }
td.map-score .score-badge.lose { color: var(--lose); }
td.map-score .score-badge.draw { color: var(--warn); }

/* loader */
.loader{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:rgba(12,18,29,.94); border:1px solid var(--glass); box-shadow:0 10px 28px rgba(0,0,0,.45); }
.loader-label{ color:#f0f6fb; font-weight:900; letter-spacing:.01em; font-size:.9rem; }
.spinner{ width:22px; height:22px; border-radius:50%; background: conic-gradient(from 180deg, var(--accentWarm1) 0 25%, transparent 25%), conic-gradient(from 180deg, transparent 0 60%, rgba(255,255,255,.12) 60% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/*  Footer */
.footer.footer--cols {
  background: transparent;
  padding: 12px 0;
  color: #cfd6df;
}

.footer--cols .footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px 40px;
  align-items: center;
}

.footer-logo {
  font-size: 1.25rem;
  font-weight: 900;
  color: #f2f6fb;
  text-decoration: none;
}

.f-list {
  list-style: none;
  margin: 0; padding: 0;
}
.f-list--row {
  display: flex;
  gap: 20px;
  align-items: center;
}
.f-list--row li {
  position: relative;
}
.f-list--row li:not(:last-child)::after {
  content: "|";
  margin-left: 18px;
  opacity: .45;
  color: #888;
}

.footer-link {
  color: #ffc39c;
  font-weight: 800;
  text-decoration: none;
  transition: color .25s ease;
}
.footer-link:hover {
  color: #ff9c60;
  text-decoration: underline;
}

.f-bottom {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .85rem;
  text-align: center;
  color: #9aa4b2;
}

/* Mobile Footer */
@media (max-width: 780px) {
  .footer--cols .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
  .f-list--row {
    justify-content: center;
    flex-wrap: wrap;
  }
  .f-list--row li:not(:last-child)::after {
    margin-left: 12px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta{ animation: none; transition:none; }
  .spinner{ animation-duration: 1.8s; }
  body::before{ filter: brightness(1.05) saturate(1.04) blur(6px); }
}

/* responsive */
@media (max-width:980px){
  .wrap{ padding:24px; }
  table.stats th, table.stats td{ padding:10px 8px; }
  .badges{ justify-content:flex-start; }
  .compare-line{ gap:10px; }
  .side .name{ font-size:1.18rem; }
  .head-grid{ flex-wrap:wrap; }
}

/* CSP-sichere Spaltenbreiten */
col.c-date { width: var(--c-date); }
col.c-map  { width: var(--c-map); }
col.c-w5   { width: 5ch; }
col.c-w6   { width: 6ch; }
col.c-w7   { width: 7ch; }
col.c-w8   { width:  8ch; }
col.c-w14  { width: 14ch; }

/* =========================================================
   MOBILE CARDS – Vollständige Stats 2-spaltig + Matchroom-Link
   ========================================================= */

/* Default: Mobile-Cards aus */
.mobile-cards { display: none; }

/* Mobile: Cards an, Tabelle aus – großzügiger Breakpoint */
@media (max-width: 768px), (orientation: landscape) and (max-width: 980px){
  .card.has-mobile-cards .table-wrap { display: none !important; }
  .card.has-mobile-cards .mobile-cards {
    display: grid !important;
    gap: 10px;
    padding: 0 var(--edge);
  }

  .match-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    column-gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--glass);
    background: linear-gradient(180deg,var(--panel),var(--panel2));
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
  }

  .mc-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
  }
  .mc-date { font-weight: 800; color:#f2f6fb; letter-spacing:.01em; font-size:.98rem; }
  .mc-score {
    font-weight: 900; padding: 2px 8px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    font-size:.95rem;
  }
  .mc-score.win  { color: var(--win); }
  .mc-score.lose { color: var(--lose); }
  .mc-score.draw { color: var(--warn); }

  .mc-map { color:#dfe6ee; opacity:.95; font-size:.95rem; }
  .mc-link {
    justify-self: end;
    position: relative; z-index: 2;
  }
  .mc-link a {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:10px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none; color:#ffc39c; font-weight:900; font-size:.9rem;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-touch-callout: default;
    -webkit-tap-highlight-color: rgba(255,255,255,.12);
    min-height: 36px; line-height: 1.05;
  }
  .mc-link a:hover { text-decoration:underline; }

  .mc-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }
  .mc-stat {
    display:flex; justify-content:space-between; gap:8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px; padding: 6px 8px;
    font-variant-numeric: tabular-nums; font-size:.92rem;
  }
  .mc-label { color: var(--muted); font-weight: 700; }
  .mc-value { color: #f6f9fe; font-weight: 900; }

  .mc-stat.pos .mc-value { color: var(--win); }
  .mc-stat.neg .mc-value { color: var(--lose); }
  .mc-stat.tie .mc-value { color: var(--warn); }

  .match-card.win  { box-shadow: 0 0 0 1px rgba(34,197,94,.18) inset, 0 10px 24px rgba(0,0,0,.32); }
  .match-card.lose { box-shadow: 0 0 0 1px rgba(255,64,96,.18) inset, 0 10px 24px rgba(0,0,0,.32); }
  .match-card.draw { box-shadow: 0 0 0 1px rgba(245,158,11,.18) inset, 0 10px 24px rgba(0,0,0,.32); }

  .mobile-cards [class*="overlay"],
  .mobile-cards [data-overlay],
  .mobile-cards ::before,
  .mobile-cards ::after {
    pointer-events: none;
  }
  .mc-link::before, .mc-link::after { pointer-events: auto; }
}

/* iOS-Safety: falls das Media-Query wegen dynamischer URL-Bar nicht greift */
@supports (-webkit-touch-callout: none){
  @media (max-width: 768px){
    .card.has-mobile-cards .table-wrap{ display: none !important; }
    .card.has-mobile-cards .mobile-cards{ display: grid !important; }
  }
}

/* =========================================================
   iOS Input Fix – kein Auto-Zoom, sauberer Cursor, kleiner Placeholder
   ========================================================= */
@supports (-webkit-touch-callout: none){
  /* keine automatische Textvergroesserung */
  html, body { -webkit-text-size-adjust: 100%; }

  /* Karte ohne Backdrop-Filter rendern – vermeidet Fokusverlust beim ersten Tap */
  .input-card{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: linear-gradient(180deg, rgba(15,21,32,.90), rgba(18,26,39,.86)) !important;
  }

  /* Inputs selbst klar rendern */
  .input-card input[type="text"],
  .input-card input[type="url"]{
    font-size: 16px !important;
    line-height: 1.35;
    padding: 12px 14px;
    -webkit-appearance: none;
    caret-color: #f6f9fe;
    transform: translateZ(0);
    will-change: transform;
  }

  /* iOS: textarea nicht zoomen lassen – >=16px */
  .input-card textarea{
    font-size: 16px !important;
    line-height: 1.35;
    padding: 12px 14px;
    -webkit-appearance: none;
    caret-color:#f6f9fe;
    transform: translateZ(0);
    will-change: transform;
  }

  /* Placeholder kleiner halten */
  .input-card input::placeholder,
  .input-card textarea::placeholder{
    font-size: .9em;
    line-height: 1.25;
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Sicherheitsnetz: der CTA soll keine Events ueberlagern */
  .input-card{ position: relative; }
  .input-card .input-grid input,
  .input-card label{ position: relative; z-index: 2; }
  .input-card .form-actions{ position: relative; z-index: 1; }
  .cta::before{ pointer-events: none; }
}

/* 404: Actions – einheitliches Layout */
.nf-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 14px auto 0;
}

/* Buttons in der 404-Aktionsleiste */
.nf-actions .cta,
.nf-actions .btn{
  width: auto;
  flex: 0 0 auto;
  min-height: 48px;
  text-decoration: none;
}
.nf-actions .btn.nf-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 900;
  color: #f6f9fe;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(17,24,39,.95), rgba(11,15,20,.92));
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
}
.nf-actions .btn.nf-secondary:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
.nf-actions .btn.nf-secondary:active{
  transform: translateY(0);
}

/* Mobile ≤560px: Buttons volle Breite, untereinander */
@media (max-width:560px){
  .nf-actions{
    width: 100%;
    margin: 14px 0 0;
  }
  .nf-actions .cta,
  .nf-actions .btn{
    width: 100%;
  }
}

/* Mobile Portrait: zusaetzlicher vertikaler Abstand – Fallback, falls gap zickt */
@media (max-width:560px) and (orientation: portrait){
  .nf-actions > * + *{ margin-top: 12px; }
  @supports (gap: 12px){
    .nf-actions > * + *{ margin-top: 0; }
  }
}

/* =========================================================
   Compare-Banner – Mobile Portrait
   - Player A: Level links, Elo rechts
   - Player B: Elo links, Level rechts
   - „vs.“ mittig über beide Zeilen
   ========================================================= */
@media (max-width:980px) and (orientation:portrait){
  .compare-banner{ overflow:hidden; }

  .compare-banner .compare-line{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items:center;
    column-gap:10px;
    row-gap:4px;
    width:100%;
    padding-left:12px;
    padding-right:12px;
  }

  /* .side entkernen – Kinder landen direkt im Grid */
  .compare-banner .compare-line .side{ display:contents; }

  /* VS mittig über beide Zeilen */
  .compare-banner .vs-dot{
    grid-column:2;
    grid-row:1 / span 2;
    justify-self:center;
    align-self:center;
  }

  /* Linke Seite: Name oben, Badges unten – Level links, Elo rechts */
  .compare-banner .side:first-child .name{
    grid-column:1; grid-row:1;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-align:left; font-weight:900; font-size:1.06rem;
  }
  .compare-banner .side:first-child .badges-inline{
    grid-column:1; grid-row:2;
    justify-self:start; display:flex; gap:6px;
  }
  .compare-banner .side:first-child .level-badge{ order:1; }
  .compare-banner .side:first-child .elo-badge{ order:2; }

  /* Rechte Seite: Name oben, Badges unten – Elo links, Level rechts */
  .compare-banner .side:last-child .name{
    grid-column:3; grid-row:1;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-align:right; font-weight:900; font-size:1.06rem;
  }
  .compare-banner .side:last-child .badges-inline{
    grid-column:3; grid-row:2;
    justify-self:end; display:flex; gap:6px;
  }
  .compare-banner .side:last-child .elo-badge{ order:1; }
  .compare-banner .side:last-child .level-badge{ order:2; }
}

/* Compare-Banner – Mobile Landscape wie Desktop */
@media (max-width:980px) and (orientation:landscape){
  /* einzeilig wie Desktop */
  .compare-banner .compare-line{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    /* optional: Absicherung gegen Zeilenumbruch */
    flex-wrap:nowrap;
  }
  .compare-banner .compare-line .side{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }

  /* Reihenfolge wie Desktop: */
  .compare-line .side:first-child .badges-inline{ order:1; flex-direction:row; }
  .compare-line .side:first-child .name{ order:2; }

  .compare-line .side:last-child .name{ order:1; }
  .compare-line .side:last-child .badges-inline{ order:2; flex-direction:row-reverse; }
}

/* nur das Message-Feld auf Contact-Seite kleiner */
#contactForm textarea {
  min-height: 4rem;
}

/* FAQ Sektion */
.card.faq {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--glass);
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter: blur(8px) saturate(115%);
  padding: 16px 18px;
  --faq-x: 1rem;
  --faq-b: 1px;
}

.faq-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
  padding-left: 0.4rem;
  margin-left: 0;
}

.card.faq .faq-item {
  background: #0d1421;
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  border-radius: 14px;
  margin-bottom: .8rem;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.card.faq .faq-item:has(.faq-q:focus-visible),
.card.faq .faq-item[open] {
  border-color: transparent;
  box-shadow:
    0 0 0 3px rgba(255,106,0,.30),
    0 0 0 6px rgba(255,59,87,.18),
    0 1px 0 rgba(255,255,255,.04) inset;
}

.card.faq .faq-q {
  padding: .9rem var(--faq-x);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.card.faq .faq-q::-webkit-details-marker { display: none; }

.card.faq .faq-q::after {
  content: "";
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  transition: transform .2s ease;
  opacity: .9;
}
.card.faq .faq-item[open] .faq-q::after { transform: rotate(-135deg); }

.card.faq .faq-a {
  max-height: 0;
  overflow: hidden;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  padding: 0 var(--faq-x);
  border-top: 1px solid rgba(255,255,255,.06);
  transition: max-height .25s ease, padding .25s ease, border-color .2s ease;
}
.card.faq .faq-item[open] .faq-a {
  max-height: 500px;
  padding: 0 var(--faq-x) 1rem;
}

.card.faq .faq-cta {
  margin-top: 1rem;
  font-weight: 600;
  color: #fff;
}

.card.faq .faq-q:focus-visible {
  outline: 2px solid rgba(255,106,0,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (min-width: 900px) {
  .card.faq { padding: 1.5rem; }
  .card.faq .faq-item { margin-bottom: 1rem; }
}

@media (max-width: 780px) {
  .faq-title {
    font-size: clamp(1.05rem, 3.9vw, 1.2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 560px) and (orientation: portrait) {
  .faq-title {
    font-size: clamp(.98rem, 4.9vw, 1.1rem);
    padding-left: 0.3rem; /* etwas schmaler für ganz kleine Screens */
  }
}

/* Intro-Card im Stil der Input-Card */
.card.intro-card {
  margin-top: 1rem;
}

.intro-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

/* Einheitliche Typo-Vererbung für Controls und interaktive Elemente */
input, textarea, select, button,
summary, details,
.cta, .btn, .pill, .pill-team, .pill.opponent-count, .pill.teammate-count,
.elo-badge, .level-badge,
.link {
  font: inherit;                /* Familie, Größe, Gewicht, Zeilenhöhe */
}

/* Feinheiten – glattere Schrift auf Desktop */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sicherstellen: numerische Badges nutzen die gleiche Familie */
.level-badge .level-num,
.elo-badge,
.num {
  font-family: inherit;
}

/* Einheitliche Zeilenhöhe für Inputs – ohne Layout zu sprengen */
input, textarea, select, button { line-height: 1.35; }

/* FAQ-Titel – dein mobiles Tuning bleibt, nur Klarheit der Vererbung */
.faq-title { font-family: inherit; }

/* iOS-Block bleibt – hier ergänzen wir nur die Familien-Vererbung explizit */
@supports (-webkit-touch-callout: none){
  .input-card input[type="text"],
  .input-card input[type="url"],
  .input-card textarea{
    font-family: inherit !important;
  }
}