:root {
  color-scheme: dark;
  --bg: #101114;
  --panel: #1b1d24;
  --line: #343946;
  --text: #f5f7fb;
  --muted: #aeb5c3;
  --accent: #e23c39;
  --gold: #f2c94c;
  --green: #2fb45f;
  --blue: #2f80ed;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101114;
  color: var(--text);
}

button, input, select {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
}

button {
  min-height: 42px;
  padding: 0 14px;
  background: var(--accent);
  color: white;
  border-color: transparent;
  cursor: pointer;
  font-weight: 800;
}

button:disabled { opacity: .42; cursor: not-allowed; }
button.ghost { background: transparent; border-color: var(--line); }
input, select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: #12141a;
  color: var(--text);
}

.app {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #171920;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brand { display: flex; gap: 12px; align-items: center; }
.mark {
  width: 58px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e23c39;
  color: #fff;
  border: 3px solid #f2c94c;
  font-weight: 1000;
  transform: rotate(-8deg);
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; }
h2 { font-size: 28px; }
h3 { font-size: 16px; }
p, label { color: var(--muted); }
label { display: grid; gap: 8px; font-size: 14px; }

.actions { display: grid; gap: 10px; }
.actions.compact { grid-template-columns: repeat(2, minmax(110px, auto)); }
.stage { padding: 28px; overflow-x: hidden; }
.view { max-width: 1180px; margin: 0 auto; }
.hidden { display: none !important; }
.topline, .game-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}

.create { display: grid; grid-template-columns: minmax(180px, 280px) auto; gap: 10px; }
.room-list, .players, .final-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.room, .player, .rulebox, .messages, .hand-panel, .result-hero {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.room, .player, .rulebox, .messages, .hand-panel, .result-hero { padding: 16px; }
.room { display: grid; gap: 12px; }
.room strong, .player strong { font-size: 18px; }
.room small, .player small { color: var(--muted); }
.players { margin-bottom: 18px; }
.player { min-height: 126px; display: grid; gap: 12px; align-content: start; }
.active-player { border-color: var(--gold); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #252936;
  color: var(--muted);
  font-size: 12px;
}
.badge.live, .badge.uno { color: #06140d; background: var(--green); }
.badge.turn { color: #1d1300; background: var(--gold); }

.messages {
  margin-top: 16px;
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.deck-pill {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #171920;
}

.uno-table {
  min-height: 470px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  border: 1px solid #28302e;
  border-radius: 8px;
  padding: 18px;
  background: radial-gradient(circle at center, #24583d 0, #143929 54%, #10281f 100%);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.03);
}

.opponents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.table-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 230px;
}

.pile-wrap {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.pile-button {
  background: #20242e;
  border: 1px solid rgba(255,255,255,.18);
}

.discard-wrap:hover .discard-history,
.discard-wrap:focus-within .discard-history {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.discard-history {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 260px;
  max-height: 320px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11141b;
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .16s ease, transform .16s ease;
}

.history-title {
  font-weight: 900;
  margin-bottom: 8px;
}
.history-list {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.me-panel {
  max-width: 260px;
  width: 100%;
  justify-self: center;
}

.card-backs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.card-backs span {
  width: 24px;
  height: 34px;
  border-radius: 4px;
  background: #232734;
  border: 1px solid #e23c39;
  box-shadow: inset 0 0 0 2px #f2c94c;
}

.hand-panel {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.hand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hand {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.move-panel {
  display: grid;
  grid-template-columns: 130px auto auto;
  gap: 10px;
}

.uno-card {
  width: 118px;
  height: 168px;
  position: relative;
  border: 5px solid #f7f2e8;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 22px rgba(0,0,0,.28);
  overflow: hidden;
}
.uno-card::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 132px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  transform: rotate(-28deg);
}
.uno-card strong {
  z-index: 1;
  font-size: 38px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.uno-card small {
  z-index: 1;
  align-self: end;
  margin-bottom: 20px;
  font-weight: 800;
  color: rgba(255,255,255,.86);
}
.corner {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 9px;
  font-weight: 1000;
}
.chosen {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  color: #fff;
  background: #333;
}
.chosen.red { background: #e23c39; }
.chosen.yellow { background: #d8aa17; color: #17130a; }
.chosen.green { background: #2fb45f; }
.chosen.blue { background: #2f80ed; }

button.uno-card {
  padding: 0;
  cursor: pointer;
}
button.uno-card:hover {
  transform: translateY(-8px);
}
.uno-card.selected {
  outline: 4px solid var(--gold);
  transform: translateY(-8px);
}
.disabled-card {
  filter: grayscale(.65) brightness(.72);
}
.card-red { background: #e23c39; }
.card-yellow { background: #f2c94c; color: #1d1300; }
.card-green { background: #2fb45f; }
.card-blue { background: #2f80ed; }
.card-wild {
  background:
    linear-gradient(135deg, #e23c39 0 25%, #f2c94c 25% 50%, #2fb45f 50% 75%, #2f80ed 75%);
}
.card-yellow strong, .card-yellow small, .card-yellow .corner {
  color: #1d1300;
  text-shadow: none;
}
.back-card {
  background: #181b23;
  border-color: #f2c94c;
}
.back-card::before {
  background: #e23c39;
}
.back-card span {
  z-index: 1;
  font-size: 28px;
  font-weight: 1000;
  transform: rotate(-12deg);
}

.mini-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mini-uno {
  width: 34px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 2px solid #f7f2e8;
  font-size: 11px;
  font-weight: 1000;
  color: #fff;
}

.result-hero {
  min-height: 190px;
  display: grid;
  gap: 14px;
  align-content: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #2b332d, #1b2030);
}

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .topline, .game-head, .hand-head { flex-direction: column; align-items: stretch; }
  .create, .move-panel { grid-template-columns: 1fr; }
  .stage { padding: 18px; }
  .table-center { gap: 16px; }
  .uno-card { width: 96px; height: 138px; }
  .uno-card strong { font-size: 30px; }
}