:root {
  --bg: #1b1f3b;
  --card: #262b52;
  --text: #f5f5f5;
  --accent: #ffca28;
  --red: #e53935;
  --green: #43a047;
  --blue: #1e88e5;
  --yellow: #fdd835;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at top, #2d3470, var(--bg));
  color: var(--text);
  min-height: 100vh;
}

h1, h2, h3 { margin: 0 0 .5rem; }

button {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: .7em 1.2em;
  background: var(--accent);
  color: #222;
}
button.ghost { background: transparent; color: var(--text); border: 2px solid #5a64a8; }
button:disabled { opacity: .4; cursor: default; }

input, select {
  font: inherit;
  width: 100%;
  padding: .7em;
  border-radius: 10px;
  border: 2px solid #3b4290;
  background: #1c2146;
  color: var(--text);
}

.center { display: flex; align-items: center; justify-content: center; padding: 1rem; }
.card { background: var(--card); border-radius: 18px; padding: 1.5rem; box-shadow: 0 10px 30px #0006; }
.hidden { display: none !important; }

/* Anmeldung */
.auth { width: min(360px, 100%); display: flex; flex-direction: column; gap: .8rem; }
.auth form { display: flex; flex-direction: column; gap: .8rem; }
.logo { font-size: 3rem; font-weight: 900; letter-spacing: .15em; text-align: center; color: var(--accent); margin: 0; }
.logo.small { font-size: 1.4rem; }
.row { display: flex; gap: .6rem; }
.row > * { flex: 1; }
.msg { min-height: 1.2em; text-align: center; margin: 0; }
.msg.err { color: #ff8a80; }

/* Topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; flex-wrap: wrap; }
.section-title { text-align: center; margin: 1.5rem 0 0; }

/* Lobby */
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; max-width: 1000px; margin: 1rem auto; padding: 1rem; }
.mode { display: flex; flex-direction: column; gap: .8rem; }
.mode p { margin: 0; opacity: .9; }
.mode details ul { padding-left: 1.2rem; margin: .5rem 0 0; }
.mode label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.mode label select { width: auto; }
.mode.soon { opacity: .55; }

/* Spiel */
.game { display: flex; flex-direction: column; min-height: 100vh; }
.game .topbar span { font-weight: 700; }
.opps { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; padding: .5rem; }
.opp { background: var(--card); border-radius: 12px; padding: .5rem 1rem; text-align: center; border: 2px solid transparent; }
.opp.active { border-color: var(--accent); }
.opp span { display: block; font-size: .85rem; opacity: .8; }

.table { display: flex; justify-content: center; gap: 2.5rem; padding: 1rem; align-items: center; }
.pile { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.chip { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; }
.status { text-align: center; min-height: 1.4em; margin: .4rem; font-weight: 600; }
.actions { display: flex; justify-content: center; gap: .6rem; margin-bottom: .6rem; }

.hand {
  display: flex; gap: .4rem; overflow-x: auto; padding: 1rem .6rem 1.4rem;
  justify-content: center; margin-top: auto;
}

/* UNO-Karten */
.uc {
  flex: 0 0 auto;
  width: 64px; height: 96px;
  border-radius: 10px;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.4rem;
  color: #fff; text-shadow: 0 1px 3px #000a;
  cursor: pointer;
  box-shadow: 0 4px 10px #0007;
  padding: 0;
  transition: transform .15s;
}
.uc.red { background: var(--red); }
.uc.green { background: var(--green); }
.uc.blue { background: var(--blue); }
.uc.yellow { background: var(--yellow); color: #333; text-shadow: none; }
.uc.wild { background: conic-gradient(var(--red), var(--yellow), var(--green), var(--blue), var(--red)); }
.uc.back { background: #111; color: var(--accent); font-size: 1rem; width: 80px; height: 120px; }
.uc.dim { opacity: .45; filter: saturate(.6); cursor: default; }
.uc.ok { transform: translateY(-10px); outline: 3px solid var(--accent); }
.hand .uc:hover { transform: translateY(-4px); }
.hand .uc.ok:hover { transform: translateY(-12px); }

/* Overlays */
.overlay { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 10; }
.dialog { width: min(360px, 100%); text-align: center; }
.opts { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.opts button.red { background: var(--red); color: #fff; }
.opts button.green { background: var(--green); color: #fff; }
.opts button.blue { background: var(--blue); color: #fff; }
.opts button.yellow { background: var(--yellow); color: #222; }

@media (max-width: 480px) {
  .uc { width: 54px; height: 82px; font-size: 1.1rem; }
  .table { gap: 1.2rem; }
}