/* Background + theme switching */
body{
  margin:24px;
  max-width:1050px;
  font-family:system-ui, Arial, sans-serif;

  background-color:#0b0f1a;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;

  transition: background-image 1200ms ease-in-out, background-color 1200ms ease-in-out;
}

body.theme-day{ color:#0b1220; }
body.theme-night{ color:#eef2ff; }

/* Readability overlay + blur */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-day::before{
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05));
}
body.theme-night::before{
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
}

/* Nav */
nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:14px;
}
nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: inherit;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-day nav a{
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.06);
}
nav a:hover{ transform: translateY(-1px); transition: transform 150ms ease; }

/* Headline */
h1{ margin: 8px 0 2px; }
h2{ margin: 10px 0 8px; }
#timeBadge{ margin-top:6px; }
.muted{ opacity: 0.8; }

/* Glass cards */
.card{
  border-radius:16px;
  padding:14px 16px;
  margin:14px 0;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.theme-day .card{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Tables */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table{ width:100%; border-collapse:collapse; }
th,td{
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}
body.theme-day th, body.theme-day td{
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Badges */
.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.20);
}
body.theme-day .badge{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.06);
}
.ok{ background: rgba(46,204,113,0.22); }
.warn{ background: rgba(241,196,15,0.22); }
.err{ background: rgba(231,76,60,0.22); }

/* Inputs */
input[type=text], input[type=password], input[type=number], select{
  padding:10px 12px;
  border-radius:12px;
  width:100%;
  max-width:520px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: inherit;
  outline:none;
  box-sizing:border-box;
}
body.theme-day input[type=text], body.theme-day input[type=password], body.theme-day input[type=number], body.theme-day select{
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.08);
}
button{
  padding:10px 14px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.14);
  color: inherit;
  font-weight:900;
  cursor:pointer;
}
body.theme-day button{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
}
button:disabled, input:disabled{ opacity:0.55; cursor:not-allowed; }
small{ color: rgba(255,255,255,0.78); }
body.theme-day small{ color: rgba(0,0,0,0.65); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

/* Avatars (rund) */
.avatar{
  width:34px; height:34px;
  border-radius:999px;
  object-fit:cover;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  vertical-align:middle;
}
.avatar.big{
  width:92px; height:92px;
  border-radius:999px;
}

/* Result UI */
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.row > *{ flex: 1 1 auto; }

.podium{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.podium-card{ text-align:center; }
.podium-rank{ font-size: 28px; font-weight: 900; }
.big-score{
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  margin: 6px 0;
}
.bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
body.theme-day .bar{
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}
.bar > div{
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.65);
}
body.theme-day .bar > div{
  background: rgba(0,0,0,0.35);
}
details{ border-radius: 14px; }
summary{
  cursor: pointer;
  font-weight: 800;
  padding: 8px 0;
}

/* ---------- Mobile Optimierung ---------- */
@media (max-width: 720px){
  body{
    margin: 14px;
    max-width: 100%;
  }
  nav{ gap: 8px; }
  nav a{ padding: 10px 12px; font-size: 13px; }
  .card{ padding: 12px 12px; border-radius: 14px; }
  h1{ font-size: 22px; }
  h2{ font-size: 18px; }
  table{ min-width: 620px; }

  input[type=text], input[type=password], input[type=number], select, button{
    max-width: 100%;
    width: 100%;
    font-size: 16px;
  }
  .vote-row{ display: grid; gap: 8px; }
  .podium{ grid-template-columns: 1fr; }
}