/* Uno's shared look: theme colours, cards, piles and the colour-in-play chip.
   Used by board.html (TV), player.html (phone) and home.html, on top of /shared.css. */

:root {
  --uno-bg: #8e0f1b;
  --uno-bg-dark: #2a040a;
  --uno-red: #e0312f;
  --uno-yellow: #f5c400;
  --uno-green: #2ea44f;
  --uno-blue: #1f6fd6;
  --uno-black: #15171c;
}

.hidden { display: none !important; }

/* colour helpers */
.c-red { --c: var(--uno-red); }
.c-yellow { --c: var(--uno-yellow); }
.c-green { --c: var(--uno-green); }
.c-blue { --c: var(--uno-blue); }
.c-wild { --c: var(--uno-black); }

/* ===================================================================== */
/* Cards                                                                 */
/* Every size inside a card is in em, and a card's font-size is its own  */
/* width, so setting --w scales the whole card.                          */
/* ===================================================================== */
.uno-card {
  --w: 80px;
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(var(--w) * 1.5);
  font-size: var(--w);
  border-radius: 0.12em;
  background: #fff;
  box-shadow: 0 0.03em 0.1em rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.uno-card .face {
  position: absolute;
  top: 0.06em; right: 0.06em; bottom: 0.06em; left: 0.06em;
  border-radius: 0.08em;
  background: var(--c);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uno-card .oval {
  position: absolute;
  width: 0.74em;
  height: 1.16em;
  border-radius: 50%;
  background: #fff;
  transform: rotate(32deg);
}
.uno-card .sym {
  position: relative;
  font-size: 0.5em;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--c);
  text-shadow: 0.03em 0.03em 0 rgba(0, 0, 0, 0.35);
}
.uno-card .corner {
  position: absolute;
  font-size: 0.2em;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: #fff;
  text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.4);
}
.uno-card .corner.tl { top: 0.35em; left: 0.4em; }
.uno-card .corner.br { bottom: 0.35em; right: 0.4em; transform: rotate(180deg); }
/* 6 and 9 look alike upside down — underline them, as the real cards do */
.uno-card.v-6 .sym, .uno-card.v-9 .sym, .uno-card.v-6 .corner, .uno-card.v-9 .corner { text-decoration: underline; }
.uno-card.v-skip .sym, .uno-card.v-reverse .sym { font-style: normal; font-size: 0.46em; }

/* wilds: black card, four-colour oval */
.uno-card.c-wild .oval {
  background: conic-gradient(var(--uno-red) 0 90deg, var(--uno-blue) 0 180deg, var(--uno-yellow) 0 270deg, var(--uno-green) 0);
  box-shadow: 0 0 0 0.03em #fff;
}
.uno-card.c-wild .sym { color: #fff; text-shadow: 0 0 0.06em #000, 0.04em 0.04em 0 #000; }

/* card back */
.uno-card.back .face { background: var(--uno-black); }
.uno-card.back .oval { background: var(--uno-red); }
.uno-card.back .sym {
  color: var(--uno-yellow);
  font-size: 0.3em;
  transform: rotate(-22deg);
  text-shadow: 0.04em 0.04em 0 #000;
  letter-spacing: -0.02em;
}

/* hand states (phone) */
.uno-card.playable {
  cursor: pointer;
  transform: translateY(-0.1em);
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px 4px rgba(242, 193, 78, 0.75);
}
.uno-card.dim { filter: brightness(0.5) saturate(0.7); }
.uno-card.just-drawn { animation: card-glow 1s ease-in-out infinite; }
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 0 8px 2px rgba(242, 193, 78, 0.6); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 22px 8px rgba(242, 193, 78, 0.95); }
}

/* a freshly played card lands on the discard pile */
.uno-card.fresh { animation: card-land 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes card-land {
  0% { transform: translateY(-40%) rotate(-18deg) scale(1.2); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ===================================================================== */
/* Table: draw pile, discard pile, colour in play, direction             */
/* ===================================================================== */
.piles { display: flex; align-items: center; justify-content: center; gap: 6%; }
.pile { position: relative; }
/* a stacked look for the draw pile */
.pile.draw .uno-card { box-shadow: 0.02em 0.02em 0 #ddd, 0.04em 0.04em 0 #bbb, 0.06em 0.06em 0.1em rgba(0, 0, 0, 0.5); }
.pile.draw.can-draw { cursor: pointer; }
.pile.draw.can-draw .uno-card { animation: pile-bob 1.2s ease-in-out infinite; }
@keyframes pile-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
.pile-count {
  position: absolute; left: 50%; bottom: -1.7em; transform: translateX(-50%);
  font-size: 0.85rem; opacity: 0.75; white-space: nowrap;
}
/* the discard pile's outline shows the colour in play (wilds included) */
.pile.discard { padding: 6px; border-radius: 16px; background: var(--c); box-shadow: 0 0 22px 2px var(--c); }

.color-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--c); color: #fff; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.color-chip.c-yellow { color: #3a2c00; text-shadow: none; }
.direction { font-weight: 700; opacity: 0.85; }
.direction .arrow { display: inline-block; font-size: 1.3em; vertical-align: -2px; }
.direction.rev .arrow { transform: scaleX(-1); }

.uno-badge {
  display: inline-block;
  background: var(--uno-yellow); color: var(--uno-red);
  font-weight: 900; font-style: italic; font-size: 0.75rem; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 99px;
  box-shadow: 0 0 0 2px var(--uno-red);
  animation: uno-pop 0.35s ease;
}
@keyframes uno-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }