/* ============================================================
   Spielleitung — Ergänzungen zum Grunddesign
   ============================================================ */

.adminpage .view { max-width: 1100px; }
.mt { margin-top: 28px; }

/* ---------- Warnhinweise ---------- */
.warnbox {
  background: #2a1f0b; border: 1px solid #6b4d12; border-radius: 12px;
  padding: 12px 16px; margin: 14px 0; color: #ffd88a; font-size: 14px;
}
.warnbox div { padding: 3px 0; }
.warnbox b { color: var(--warn); }

/* ---------- Einstellungsgruppen ---------- */
.group {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px;
}
.group > h3 { margin: 0 0 12px; font-size: 15px; color: var(--ice);
              text-transform: uppercase; letter-spacing: 1.3px; }

.setting {
  display: grid; grid-template-columns: 1fr 220px; gap: 16px;
  align-items: center; padding: 11px 0; border-top: 1px solid #16253f;
}
.setting:first-of-type { border-top: none; }
.setting .lab { font-weight: 600; font-size: 14.5px; }
.setting .hlp { color: var(--dim); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
.setting .ctl { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.setting input[type=number] {
  width: 84px; background: var(--bg2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; text-align: center; font: inherit;
}
.setting input[type=number]:focus { outline: none; border-color: var(--ice); }
.setting input[type=range] { width: 110px; accent-color: var(--ice); }
.setting .def { color: var(--dim); font-size: 11.5px; min-width: 84px;
                text-align: right; white-space: nowrap; }
.setting.changed .lab::after {
  content: "geändert"; margin-left: 8px; font-size: 10.5px; color: var(--warn);
  font-weight: 400; letter-spacing: .5px;
}

/* Schalter */
.sw { position: relative; width: 50px; height: 28px; flex: none; }
.sw input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw span {
  position: absolute; inset: 0; border-radius: 999px; background: #1d2f4d;
  border: 1px solid var(--line); transition: .18s; pointer-events: none;
}
.sw span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--dim); transition: .18s;
}
.sw input:checked + span { background: #12607f; border-color: var(--ice); }
.sw input:checked + span::after { left: 25px; background: var(--ice); }

/* ---------- Duell-Rechner ---------- */
.duelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.pane { background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 16px 20px; }
.pane h3 { margin: 0 0 12px; font-size: 15px; color: var(--ice); }
.pane label { display: flex; justify-content: space-between; align-items: center;
              gap: 12px; padding: 7px 0; font-size: 14px; }
.pane input, .pane select {
  width: 120px; background: var(--bg2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; font: inherit;
}
.pane input:focus, .pane select:focus { outline: none; border-color: var(--ice); }

.duelout {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; margin-top: 6px; min-height: 90px;
}
/* Das Ergebnis trägt die Betonung selbst — kein farbiger Balken nötig. */
.duelout .verdict { font-size: 26px; font-weight: 800; letter-spacing: 1px;
                    margin-bottom: 10px; }
.duelout .verdict.tor { color: var(--good); }
.duelout .verdict.block { color: var(--bad); }
.duelout div.line { padding: 3px 0; color: var(--dim); font-size: 14px; }
.duelout .pen { color: var(--warn); font-weight: 600; }

/* ---------- Tabellen ---------- */
table.tbl { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
table.tbl th {
  text-align: left; color: var(--dim); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 1px; padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
table.tbl td { padding: 7px 10px; border-bottom: 1px solid #14243f; }
table.tbl tr:hover td { background: #101d33; }
table.tbl input {
  width: 62px; background: var(--bg2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 7px; text-align: center; font: inherit; font-size: 13px;
}
table.tbl input:focus { outline: none; border-color: var(--ice); }
table.tbl td.num { text-align: center; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px;
       font-size: 11px; border: 1px solid; }
.tag.normal  { color: var(--r-normal);  border-color: var(--r-normal); }
.tag.bronze  { color: var(--r-bronze);  border-color: var(--r-bronze); }
.tag.silber  { color: var(--r-silber);  border-color: var(--r-silber); }
.tag.gold    { color: var(--r-gold);    border-color: var(--r-gold); }
.tag.diamant { color: var(--r-diamant); border-color: var(--r-diamant); }

/* ---------- Testlauf ---------- */
.simbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.simbar label { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 14px; }
.simbar label.chk { color: var(--txt); }
.simbar input[type=number], .simbar input[type=text], .simbar input:not([type]), .simbar select {
  background: var(--bg2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 12px; font: inherit;
}
.simbar input:not([type]) { min-width: 260px; }
.simbar input[type=checkbox] { accent-color: var(--ice); width: 16px; height: 16px; }
.simbar input:focus, .simbar select:focus { outline: none; border-color: var(--ice); }

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; min-width: 190px; flex: 1;
}
.stat .k { color: var(--dim); font-size: 12px; text-transform: uppercase;
           letter-spacing: 1px; margin-bottom: 6px; }
.stat .v { font-size: 25px; font-weight: 800; color: var(--ice); }

@media (max-width: 760px) {
  .duelgrid { grid-template-columns: 1fr; }
  .setting { grid-template-columns: 1fr; gap: 8px; }
  .setting .ctl { justify-content: flex-start; }
  table.tbl { display: block; overflow-x: auto; }
}


/* ---------- Päckchen ---------- */
/* Rahmen in der Sortenfarbe, wie die Päckchenkarten im Laden — kein Balken. */
.packzeile {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--pc, var(--ice)) 40%, var(--line));
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px;
}
.packzeile.aus { opacity: .6; }
.packzeile .pkkopf b { color: var(--pc, var(--ice)); }
.pkkopf { display: flex; justify-content: space-between; gap: 18px;
          align-items: flex-start; flex-wrap: wrap; }
.pkkopf b { font-size: 15px; }
.pkctl { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pkctl label.mini { display: flex; flex-direction: column; gap: 4px;
                    color: var(--dim); font-size: 11.5px;
                    text-transform: uppercase; letter-spacing: 1px; }
.pkctl label.chk { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.pkctl input[type=number] { width: 100px; }
.pkctl input[type=checkbox] { accent-color: var(--ice); width: 16px; height: 16px; }

.chancenreihe { display: flex; gap: 10px; align-items: flex-end;
                flex-wrap: wrap; margin: 14px 0 6px; }
.chf { display: flex; flex-direction: column; gap: 5px; }
.chf input { width: 84px; }
.chsumme { color: var(--dim); font-size: 12.5px; padding-bottom: 9px; }
.chsumme.warn { color: #ffc043; }

.pkfuss { display: flex; justify-content: space-between; align-items: center;
          gap: 12px; flex-wrap: wrap; margin-top: 10px;
          border-top: 1px solid #16253f; padding-top: 10px; }

/* Eingabefelder im Päckchenbereich einheitlich wie in der Testlaufleiste */
#view-packs input, #view-packs select {
  background: var(--bg2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 13.5px;
}
#view-packs input:focus, #view-packs select:focus { outline: none; border-color: var(--ice); }
#view-packs input[type=color] { padding: 3px; width: 54px; height: 38px; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px;
        font-size: 11px; letter-spacing: .5px; border: 1px solid var(--line);
        color: var(--dim); margin-left: 6px; vertical-align: middle; }
.pill.warnpill { color: #ffc043; border-color: #6b4d12; }
.pill.z-laeuft { color: #3ddc84; border-color: #1e6b3f; }
.pill.z-kommt  { color: var(--ice); border-color: #1b4a6b; }
.pill.z-vorbei, .pill.z-aus { color: var(--dim); }

/* Formular für ein Saison-Päckchen */
.sform { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
         gap: 14px; align-items: end; }
.sform label { display: flex; flex-direction: column; gap: 5px;
               color: var(--dim); font-size: 11.5px;
               text-transform: uppercase; letter-spacing: 1px; }
.sform label.weit { grid-column: 1 / -1; text-transform: none; letter-spacing: 0;
                    font-size: 12.5px; }
.sform label.chk { flex-direction: row; align-items: center; gap: 8px;
                   text-transform: none; letter-spacing: 0; font-size: 13.5px;
                   color: var(--txt); }
.sform input[type=checkbox] { accent-color: var(--ice); width: 16px; height: 16px; }
/* Felder, die zur gewählten Art nicht passen, sind wirklich weg —
   `display:flex` oben würde `hidden` sonst überstimmen. */
.sform label[hidden] { display: none; }

/* ---------- Herausforderungen ---------- */
.challzeile {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--pc, var(--ice)) 40%, var(--line));
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px;
}
.challzeile.aus { opacity: .6; }
.chkopf { display: flex; justify-content: space-between; gap: 18px;
          align-items: flex-start; flex-wrap: wrap; }
.chkopf b { font-size: 15px; color: var(--pc, var(--ice)); }
.chdaten { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px;
           border-top: 1px solid #16253f; padding-top: 11px; font-size: 13.5px; }
.chdaten span { display: flex; flex-direction: column; gap: 3px; }
.chdaten i { color: var(--dim); font-size: 11px; font-style: normal;
             text-transform: uppercase; letter-spacing: 1px; }
.chlaeuft { margin-top: 10px; font-size: 12.5px; color: var(--ice); }

.izeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
          padding: 8px 0; border-top: 1px solid #16253f; }
.izeile:first-child { border-top: none; }
.izeile .ianz { width: 66px; }
.izeile .imin, .izeile .imax { width: 108px; }
.izeile select:disabled, .izeile input:disabled { opacity: .35; }

@media (max-width: 760px) {
  .pkkopf { flex-direction: column; }
  .izeile > * { flex: 1 1 128px; }
}

/* Fairplay-Listen */
.tabelle { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.treihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
          gap: 10px; padding: 7px 12px; border-radius: 9px; font-size: 13px;
          background: #0c1424cc; border: 1px solid #22344f; }
.treihe.kopf { background: transparent; border: none; color: #8ca4c6;
               text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; }
.treihe .warn { color: #ffc043; font-weight: 400; }


/* ---------- Folienvorschau im Saison-Formular ---------- */
.vorschaufeld { grid-row: span 2; }
.folienvorschau { display: block; margin-top: 4px; }
.folienvorschau .fo { position: relative; display: inline-block; width: 104px; }
.folienvorschau .fo img { width: 100%; display: block; border-radius: 3px;
                          filter: drop-shadow(0 6px 14px #000a); }
.folienvorschau .fo b {
  position: absolute; left: 8%; right: 8%; top: 47%; transform: translateY(-50%);
  font-family: var(--cond); font-weight: 700; font-size: 11px; line-height: 1.1;
  letter-spacing: .3px; text-transform: uppercase; text-align: center; color: #fff;
  text-shadow: 0 1px 3px #000c, 0 0 10px #0009; overflow-wrap: break-word;
}
.folienvorschau .ohnefolie {
  display: inline-grid; place-items: center; width: 104px; aspect-ratio: 3 / 4;
  border-radius: 6px; background: linear-gradient(165deg, var(--pc), #0a1120);
  font-family: var(--cond); font-size: 11px; text-transform: uppercase;
  text-align: center; padding: 8px; color: #fff; text-shadow: 0 1px 3px #000c;
}

/* Poolstand im Überblick — ruhig, solange genug da ist. */
.poolbox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
           padding: 12px 16px; margin: 14px 0; font-size: 14px; color: var(--dim); }
.poolbox b { color: var(--txt); }
.warnbox code, .poolbox code { background: #0a1120; padding: 1px 6px; border-radius: 5px; }

/* Seltenheiten im Eintausch-Formular: mehrere Kreuze nebeneinander,
   nicht als Spalte — sonst wächst das Formular ins Endlose. */
.sform .weit { grid-column: 1 / -1; }
.sform .weit[hidden] { display: none; }
.feldkopf { display: block; font-size: 11.5px; letter-spacing: 1px;
            text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.rarwahl { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rarwahl .chk { display: flex; align-items: center; gap: 7px;
                font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.rarwahl input[type=checkbox] { accent-color: var(--ice); width: 16px; height: 16px; }

/* Päckchen-Belohnung: eine Zeile je Sorte. Die Stückzahl steht direkt
   neben der Sorte — bei einer getrennten Zahlenspalte muss man raten,
   welche Zahl zu welchem Päckchen gehört. */
.packzeilen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.packzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.packzeile select { min-width: 200px; }
.packzeile input[type=number] { width: 74px; }
.packzeile .sub { text-transform: none; letter-spacing: 0; }

/* ---------- Kabinen-Maler ---------- */
.kmalRaeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kmalRaum { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; cursor: pointer;
            background: #0c1424; border: 1px solid #22344f; color: inherit; font: inherit; text-align: left; }
.kmalRaum img { width: 100%; aspect-ratio: 7/3; object-fit: cover; border-radius: 6px; }
.kmalRaum b { font-size: 13px; } .kmalRaum small { font-size: 11px; color: #8ca4c6; }
.kmalRaum.an { border-color: #57d3f5; box-shadow: 0 0 0 1px #57d3f5; }
.kmalLeiste { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.kmalFlaechen { display: flex; gap: 6px; flex-wrap: wrap; }
.kmalFl { padding: 6px 10px; border-radius: 8px; border: 2px solid var(--kf); background: #0c1424; color: #eaf1fb;
          cursor: pointer; font: inherit; font-size: 13px; }
.kmalFl.an { background: var(--kf); color: #04131c; font-weight: 700; }
.kmalBuehne { position: relative; width: 100%; max-width: 1400px; user-select: none; }
.kmalBuehne img { display: block; width: 100%; height: auto; border-radius: 10px; }
.kmalBuehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; border-radius: 10px; }