/* === Roboto Condensed (latin only) === */
@font-face {
  font-family: 'RobotoCondensed';
  src: url('/fonts/roboto-condensed-v25-latin-regular.eot');
  src: url('/fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'),
       url('/fonts/roboto-condensed-v25-latin-regular.woff') format('woff'),
       url('/fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'),
       url('/fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Roboto Condensed (full language support) === */
@font-face {
  font-family: 'RobotoCondensedFull';
  src: url('/fonts/roboto-condensed-v25-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
  src: url('/fonts/roboto-condensed-v25-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/roboto-condensed-v25-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
       url('/fonts/roboto-condensed-v25-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),
       url('/fonts/roboto-condensed-v25-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),
       url('/fonts/roboto-condensed-v25-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#RobotoCondensedFull') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Roboto (latin only) === */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-v30-latin-regular.eot');
  src: url('/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'),
       url('/fonts/roboto-v30-latin-regular.woff') format('woff'),
       url('/fonts/roboto-v30-latin-regular.ttf') format('truetype'),
       url('/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Roboto (full language support) === */
@font-face {
  font-family: 'RobotoFull';
  src: url('/fonts/roboto-v30-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
  src: url('/fonts/roboto-v30-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/roboto-v30-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
       url('/fonts/roboto-v30-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),
       url('/fonts/roboto-v30-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),
       url('/fonts/roboto-v30-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#RobotoFull') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    display: inline-flex;
    border-radius: 20px;
    padding: 5px;
    gap: 1px;
    user-select: none;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 12px;
    cursor: pointer;
    z-index: 1000;
}

.mode-toggle input {
    display: none;
}

.mode-toggle label {
    padding: 5px 10px;
    border-radius: 20px;
    transition: background 0.3s;
}

.mode-toggle input#dark:checked ~ label[for="dark"],
.mode-toggle input#light:checked ~ label[for="light"] {
    background: #fff;
    color: #000;
}

.player-cell {
    position: relative;
}

.timestamp {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 10px;
}

th .crown {
    position: absolute;
    top: -15px;
    left: 10px;
    width: 30px;
    transform: rotate(-20deg);
    pointer-events: none;
}

th .cat {
    position: absolute;
    top: -15px;
    left: 5px;
    width: 30px;
    transform: rotate(-0deg);
    pointer-events: none;
}

.bockheader img {
    width: 30px;
    height: 30px;
    pointer-events: none;
}
.bockheader span {
    display:none;
}

.addbockheader img {
    width: 30px;
    height: 30px;
    pointer-events: none;
}
.addbockheader span {
    display:none;
}

body {
    font-family: 'Roboto', system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 250px;
    margin-bottom: 1rem;
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 1rem;
}

input[type="text"] {
    font-size: 20px;
    padding: 0.3rem;
    margin: 0.2rem;
    border-radius: 6px;
    width: 350px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
}

input[type="number"] {
    padding: 0.3rem;
    margin: 0.2rem;
    border-radius: 6px;
    width: 70px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
    /* Firefox */
    -moz-appearance: textfield;
}
    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Players Inpout List (funktioniert nicht in allen Browsern) */
/*input::-webkit-calendar-picker-indicator {
    display: none;
}
*/
input[list] {
    appearance: none;
    -webkit-appearance: none;
}
/* Alternative über CustomList mittels ul li */
.suggestions {
  position: absolute;
  border: 1px solid #ccc;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
  display: none;
  z-index: 9999;
  width: 200px;
}

.suggestions li {
  padding: 5px 10px;
  cursor: pointer;
}

select {
    padding: 0.3rem;
    margin: 0.2rem;
    border-radius: 6px;
    width: 150px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
    appearance: none;
    appearance: none;            /* Standard */
    -webkit-appearance: none;    /* Für Chrome/Safari */
    -moz-appearance: none;       /* Für Firefox */
}

input[type="checkbox"] {
    transform: scale(1.2);
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
}

button {
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
}

#copyGameIDBtn {
    border: 1px solid #444;
    padding: 0.1rem 1rem;
    margin: 0.1rem 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 0.7rem;
}

#refreshButton {
    border: 0px solid #444;
    background-color: transparent;
    padding: 0.1rem 0.4rem;
    margin: 0.1rem 0;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.0rem;
}

#resetButton {
    background-color: #821717;
    color: #fff;
    border: 1px solid #444;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
}

#resetButton:hover {
    background-color: #BD2121;
}

#InstructionsButton, #privacyButton {
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: normal;
    font-style: normal;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* border-collapse: separate; */
    border-spacing: 0;
}

th, td {
    padding: 0.5rem;
    text-align: center;
}

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}

td .score {
    display: block;
    margin-top: 0.3rem;
}

td[data-player] {
    min-width: 80px;
}

td[data-player] select {
    width: 90%;
}

tr td {
    transition: background-color 0.3s;
}

tr td[data-player].winner {
    background-color: rgba(0, 255, 0, 0.3);
}

tr td[data-player].loser {
    background-color: rgba(255, 0, 0, 0.3);
}

/* tr:nth-child(n) {
   td {
      background-color: transparent;
   }
}*/

tbody tr:last-child td:first-of-type {
  border-bottom-left-radius: 10px;
}
tbody tr:last-child td:last-of-type {
  border-bottom-right-radius: 10px;
}

.privacy {
   display: block;
   text-align: left;
   border: 0px;
}

/* Grundstruktur Navigationsleiste*/
.main-nav {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.main-nav .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5em 1em;
    display: flex;
    align-items: center;
    justify-content: center; /* Alles horizontal zentrieren */
    position: relative; /* Für Hamburger-Button Positionierung */
}

.main-nav .nav-links {
    list-style: none;
    display: flex;
    gap: 1.5em;
    margin: 0;
    padding: 0;
}

.main-nav .nav-links li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    align-items: center;
    display: flex;
    gap: 0.3em;
    transition: color 0.3s;
    /* NEU: grüne Umrandung & Schlagschatten */
    border: 0px solid green; /* grüne Umrandung */
    border-radius: 10px; /* optional für runde Ecken */
    padding: 0.6em 1.0em; /* etwas Innenabstand für mehr Platz */
}

.main-nav .nav-links li a:hover {
    color: green;
}

/* .main-nav .nav-links li a:hover {
    color: var(--accent-color);
}*/

.main-nav .nav-icon {
    width: 18px;
    height: 18px;
}

.nav-links {
    display: none; /* default: verstecken */
}

/* Hamburger Button */
.nav-toggle {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    display: none;
    color: var(--text-color);
    position: absolute;
    right: 0.1em; /* Rechts außen platzieren */
    top: -2.8em;
}

/* Icon-Spalte */
th.icon-col, td.icon-col {
  width: 20px;
  max-width: 20px;
  padding: 0 4px;
  text-align: center;
}

/* Bild in Icon-Spalte */
.leader-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

#tableEfficiency tbody tr td .leader-icon {
  padding-left: 9em;
  padding-top: -1.5em;
  pointer-events: none;
}

#tableWinStreaks tbody tr td .leader-icon {
  padding-left: 15em;
  padding-top: -1.5em;
  pointer-events: none;
}

#tableLoseStreaks tbody tr td .leader-icon {
  padding-left: 15em;
  padding-top: -1.5em;
  pointer-events: none;
}

#tableMaxRoundGain tbody tr td .leader-icon {
  padding-left: 6em;
  padding-top: -1.5em;
  pointer-events: none;
}

@media screen and (min-width: 769px) {
    .nav-links {
        display: flex; /* Desktop Ansicht */
    }
}

/* Spezielle Styles für Smartphones */
@media screen and (max-width: 768px) {
    header {
       height: 100px;
    }
    body {
        font-size: 18px;
    }
    .InfoText {
        font-size: 10px;
    }
    input[type="text"] {
       font-size: 20px;
       padding: 0.3rem;
       margin: 0.2rem;
       border-radius: 4px;
       width: 300px;
       display: inline-flex;
       font-family: 'Roboto', system-ui, sans-serif;
       font-weight: normal;
       font-style: normal;
    }
    input[type="checkbox"] {
       transform: scale(0.8);
       padding: 0.1rem;
       margin: 0.1rem;
       font-family: 'Roboto', system-ui, sans-serif;
       font-weight: normal;
       font-style: normal;
    }
    input[type="number"] {
       padding: 0.1rem;
       margin: 0.1rem;
       border-radius: 4px;
       width: 20px;
       font-family: 'Roboto', system-ui, sans-serif;
       font-weight: normal;
       font-style: normal;
       /* Firefox */
       -moz-appearance: textfield;
    }
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
    }
    .groupselect {
       width: 100px;
    }

    select {
       padding: 0.1rem;
       margin: 0.1rem;
       border-radius: 4px;
       width: 55px;
       appearance: none;
       font-family: 'Roboto', system-ui, sans-serif;
       font-weight: normal;
       font-style: normal;
    }

    table {
       /* -moz-border-radius: 5px !important; */
       border-collapse: collapse !important;
       border: none !important;
    }
    th .crown {
       position: absolute;
       top: -10px;
       left: 10px;
       width: 20px;
       transform: rotate(-20deg);
       pointer-events: none;
    }

    th .cat {
       position: absolute;
       top: -10px;
       left: 10px;
       width: 20px;
       transform: rotate(-0deg);
       pointer-events: none;
    }

    th {
       font-size: 10px;
       padding: 0.2rem;
       position: sticky;
       top: 0;
       background-color: #000; /* wichtig, sonst "durchscheinend" beim Scrollen */
       z-index: 2; /* optional für Sicherheit */
    }
    tr, td {
       font-size: 10px;
       padding: 0.2rem;
    }
    td[data-player] {
       min-width: 21px;
    }
    td[data-player] select {
       width: 98%;
       appearance: none;
    }

    .mode-toggle {
       position: absolute;
       top: 10px;
       right: 10px;
       display: inline-flex;
       border-radius: 20px;
       padding: 3px;
       gap: 1px;
       user-select: none;
       font-family: 'Roboto', system-ui, sans-serif;
       font-size: 10px;
       font-weight: normal;
       font-style: normal;
       cursor: pointer;
       z-index: 1000;
    }

    .mode-toggle input {
       display: none;
    }

    .mode-toggle label {
       padding: 2px 5px;
       border-radius: 20px;
       transition: background 0.3s;
    }

    .mode-toggle input#dark:checked ~ label[for="dark"],
    .mode-toggle input#light:checked ~ label[for="light"] {
       background: #fff;
       color: #000;
    }
    .nav-toggle {
        display: block;
        right: 0.5em;
        top: -3.1em;
    }

    .nav-links {
        position: absolute;
        background-color: var(--bg-color);
        flex-direction: column;
        width: 140px;
        padding: 1.5em 1.5em;
        gap: 1em;
        display: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        right: 0.5em; /* Rechts außen platzieren */
        top: -2.1em;
        border-radius: 10px; /* kannst du anpassen, z. B. 12px für mehr Rundung */
        font-size: 0.9rem;   /* kleiner als Standard, evtl. 0.85rem für noch kleiner */
        align-items: flex-start;
    }
    .nav-links.show {
        display: flex;
    }
    .nav-icon {
        width: 18px;
        height: 18px;
    }
    .main-nav .nav-links {
        display: none;
        padding: 1.0em 1.0em;
    }

    .main-nav .nav-links.show {
        display: flex;
    }

    /* Container: sicherstellen, dass die Flex-Items (li) strecken können */
    .main-nav .nav-links {
      box-sizing: border-box;   /* damit width + padding konsistent sind */
      align-items: stretch;     /* WICHTIG: li dehnen sich auf volle Breite */
    }

    /* jedes li belegt die volle Breite des UL-Containers */
    .main-nav .nav-links li {
      width: 100%;
    }

    .main-nav .nav-links li a {
        box-shadow: none;
        padding: 0em 0em;
        font-weight: normal;
        display: block;
        width: 100%;
    }

    /* Hover-Fokus */
    .main-nav .nav-links li a:hover,
    .main-nav .nav-links li a:focus {
        font-color: green;
    }

    #tableEfficiency tbody tr td .leader-icon {
      padding-left: 0em;
      pointer-events: none;
    }

    #tableWinStreaks tbody tr td .leader-icon {
      padding-left: 0em;
      pointer-events: none;
    }

    #tableLoseStreaks tbody tr td .leader-icon {
      padding-left: 0em;
      pointer-events: none;
    }

    #tableMaxRoundGain tbody tr td .leader-icon {
      padding-left: 0em;
      pointer-events: none;
    }
    .bockheader img {
        width: 20px;
        height: 20px;
    }
    .addbockheader img {
        width: 20px;
        height: 20px;
    }
}