@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root { /* Variablen definieren */
    --Red: #ff0000;
    --Green: #006221;
    --Blue: #0000ff;
    --background-color: #fff20015;
    --body-margin: 8px;
    --startpage-items-gap: .5rem;
    --gamepad-items-gap: .3rem;
    --border-width: 3px;
    --border-radius: 5px;
}
* { /* globale Styles */
    font-family: "Roboto", serif;
    font-size: clamp(18px, 2.8vw, 25px);
}

/* Normalisieren */

ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}
li {
  display: list-item;
  margin-left: 2rem;
}
h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.3rem;
}

/* Styles */

body {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    margin: var(--body-margin);
    min-height: calc(100vh - 2*var(--body-margin));
}
header h1 {
    margin-top: 0;
}
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
@media (min-width: 35rem) {
    main:has(.gamepad) {
        flex-direction: row;
    }
}
main:has(.gamepad) {
    gap: .5rem;
}
footer p {
    margin-bottom: 0;
}

/* Startseite */

form {
    display: flex;
    flex-direction: column;
    gap: var(--startpage-items-gap);
}

.groups {
    display: flex;
    flex-direction: column;
    gap: var(--startpage-items-gap);
}
@media (min-width: 35rem) {
    .groups {
        flex-direction: row;
        min-width: calc(100vw - 2*var(--body-margin));
    }
}

.group {
    border-width: var(--border-width);
    border-style: solid;
    border-radius: var(--border-radius);
    margin: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
}
.group:has(option[value="red"]:checked) {
    border-color: var(--Red);
    background-color: color-mix(in srgb, var(--Red) 20%, white 80%);
}
.group:has(option[value="green"]:checked) {
    border-color: var(--Green);
    background-color: color-mix(in srgb, var(--Green) 20%, white 80%);
}
.group:has(option[value="blue"]:checked) {
    border-color: var(--Blue);
    background-color: color-mix(in srgb, var(--Blue) 20%, white 80%);
}
.group p {
    margin: 0;
}
.group input,
.group select,
.group button {
    font-size: 1rem;
}
.group select {
    min-width: 4rem;
}

.groupmembers {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.groupmembers p,
.groupmembers input {
    margin: 0;
    padding: 0;
}

#start-game-btn {
    font-size: 1rem;
}

/* Spiel */

.gamepad {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gamepad-items-gap);
    padding: .3rem;
    border-width: var(--border-width);
    border-style: solid;
    border-radius: var(--border-radius);
}
.gamepad[data-color="red"] {
    background-color: color-mix(in srgb, var(--Red) 60%, white 40%);
    border-color: color-mix(in srgb, var(--Red) 70%, black 30%);
}
.gamepad[data-color="blue"] {
    background-color: color-mix(in srgb, var(--Blue) 60%, white 40%);
    border-color: color-mix(in srgb, var(--Blue) 70%, black 30%);
}
.gamepad[data-color="green"] {
    background-color: color-mix(in srgb, var(--Green) 60%, white 40%);
    border-color: color-mix(in srgb, var(--Green) 70%, black 30%);
}
.gamepad .group-name {
    font-weight: bold;
}
.gamepad p {
    margin: 0;
}
.gamepad .nxt-player {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gamepad-items-gap);
}
.gamepad .flw-player {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gamepad-items-gap);
}

.gamepad .throws-counter {
    font-size: .8rem;
}
.gamepad .next-player-name {
    flex-grow: 1;
    border-radius: var(--border-radius);
}
.gamepad .next-player-name p {
    font-size: 1.7rem;
}
.gamepad .flw-player-name {
    flex-grow: 1;
    border-radius: var(--border-radius);
}
.gamepad[data-color="red"] .next-player-name,
.gamepad[data-color="red"] .flw-player-name {
    background-color: color-mix(in srgb, var(--Red) 50%, white 50%);
}
.gamepad[data-color="blue"] .next-player-name,
.gamepad[data-color="blue"] .flw-player-name {
    background-color: color-mix(in srgb, var(--Blue) 50%, white 50%);
}
.gamepad[data-color="green"] .next-player-name,
.gamepad[data-color="green"] .flw-player-name {
    background-color: color-mix(in srgb, var(--Green) 50%, white 50%);
}
.gamepad .next-player-name,
.gamepad .flw-player-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 1.7rem;
}