:root {
  color-scheme: light;
  --bg: #efe6d4;
  --panel: #fffdf7;
  --text: #1f1f1f;
  --accent: #cf4f22;
  --border: #1f1f1f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #fff7e5 0%, var(--bg) 60%, #e7dcc7 100%);
}

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  margin-top: 0;
}

.screen {
  width: 100%;
}

.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.game-panel {
  padding-bottom: 20px;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

button {
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border-color: #6b2f12;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hidden {
  display: none;
}

.table-area {
  position: relative;
  min-height: 420px;
  margin: 14px 0 18px;
  padding-right: 100px;
  border: 3px solid #2e1605;
  border-radius: 220px;
  background:
    radial-gradient(circle at 30% 20%, #2f8a4f 0%, #1f6b3a 45%, #12502b 100%);
  box-shadow: inset 0 0 0 6px #4f2a11;
}

.table-center {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.pile-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deck-stack {
  width: 78px;
  height: 112px;
  border-radius: 10px;
  border: 2px solid #0e0e0e;
  color: #fff;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: repeating-linear-gradient(
    135deg,
    #222,
    #222 8px,
    #393939 8px,
    #393939 16px
  );
}

.table-card-slot {
  width: 78px;
  height: 112px;
}

#currentColorLabel {
  margin: 8px 0 0;
  color: #f7f7f7;
  font-weight: 700;
}

.seat {
  position: absolute;
  min-width: 140px;
  text-align: center;
  color: #f6f6f6;
  font-weight: 700;
  padding: 8px;
  border-radius: 10px;
}

.seat-top {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.seat-left {
  left: 18px;
  top: 52%;
  transform: translateY(-50%);
}

.seat-right {
  right: 18px;
  top: 52%;
  transform: translateY(-50%);
}

.seat-bottom {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.draw-side-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.seat-name {
  font-size: 0.92rem;
}

.seat-count {
  font-size: 0.8rem;
  opacity: 0.95;
  margin-top: 2px;
}

.current-turn {
  outline: 2px solid #ffe174;
  background: rgba(255, 225, 116, 0.14);
}

.card-back-fan {
  position: relative;
  height: 44px;
  margin: 8px auto 0;
}

.mini-card-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #101010;
  background: linear-gradient(135deg, #cb2f2f, #1f62bf 50%, #d7bb2c);
}

#hand {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card {
  width: 78px;
  height: 112px;
  border: 2px solid #111;
  border-radius: 12px;
  background: #fff;
  position: relative;
  padding: 0;
  display: block;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

button.card {
  cursor: pointer;
}

button.card:hover {
  transform: translateY(-2px);
}

.card-corner {
  position: absolute;
  top: 6px;
  left: 7px;
  font-size: 0.85rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.card-corner-bottom {
  top: auto;
  left: auto;
  right: 7px;
  bottom: 6px;
  transform: rotate(180deg);
}

.card-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
}

.color-red {
  background: radial-gradient(circle at 35% 25%, #f17474 0%, #d13a3a 55%, #9d1f1f 100%);
}

.color-yellow {
  background: radial-gradient(circle at 35% 25%, #ffe78e 0%, #dfbf2a 55%, #aa8e19 100%);
  color: #1f1f1f;
}

.color-green {
  background: radial-gradient(circle at 35% 25%, #75d99d 0%, #2a9c5b 55%, #1d6f40 100%);
}

.color-blue {
  background: radial-gradient(circle at 35% 25%, #7db8ff 0%, #2c74d4 55%, #1c4f97 100%);
}

.color-wild {
  background: conic-gradient(
    from 35deg,
    #d73d3d 0deg 90deg,
    #e2c52f 90deg 180deg,
    #2e9c5e 180deg 270deg,
    #2d70c7 270deg 360deg
  );
}

.error {
  color: #b00020;
  font-weight: 700;
}

.wild-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.wild-modal.hidden {
  display: none;
}

.wild-modal-card {
  width: min(360px, 92vw);
  background: #fff;
  color: #222;
  border: 2px solid #111;
  border-radius: 12px;
  padding: 14px;
}

.wild-color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.wild-color-btn {
  border: 2px solid #111;
  font-weight: 700;
}

.wild-red {
  background: #cf3131;
}

.wild-yellow {
  background: #dabd2c;
  color: #222;
}

.wild-green {
  background: #2f955d;
}

.wild-blue {
  background: #2d70c6;
}

.endgame-modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 24, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.endgame-modal.hidden {
  display: none;
}

.endgame-card {
  width: min(430px, 92vw);
  border-radius: 18px;
  border: 2px solid #111;
  padding: 18px;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(145deg, #1f3f96 0%, #226fbe 45%, #17a26b 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.4),
    inset 0 0 0 3px rgba(255, 255, 255, 0.18);
  animation: endPop 220ms ease-out;
}

.endgame-title {
  margin: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

.endgame-winner {
  margin: 8px 0 8px;
  font-size: 2rem;
  font-weight: 900;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.endgame-subtext {
  margin: 0 0 14px;
  opacity: 0.96;
}

@keyframes endPop {
  from {
    transform: scale(0.94) translateY(8px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .page {
    padding: 10px;
  }

  .table-area {
    min-height: 380px;
    padding-right: 12px;
    padding-bottom: 56px;
    border-radius: 170px;
  }

  .seat {
    min-width: 110px;
  }

  .card {
    width: 70px;
    height: 102px;
  }

  .deck-stack,
  .table-card-slot {
    width: 70px;
    height: 102px;
  }

  .draw-side-btn {
    top: auto;
    right: 12px;
    bottom: 10px;
    transform: none;
  }
}