@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap");
/* Fredoka — a chunky, rounded display face for Uno's playful identity. */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap");

:root {
  --red: #d3322f;
  --yellow: #f5b912;
  --green: #2f9e44;
  --blue: #1c7ed6;
  --wild: #1a1a1f;
}

html,
body {
  color: #fff;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  /* A dark card-table: warm spotlight in the middle, the four Uno colors
     bleeding in faintly from the corners. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 32%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(circle at 0% 0%, rgba(211, 50, 47, 0.16), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(245, 185, 18, 0.14), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(28, 126, 214, 0.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(47, 158, 68, 0.16), transparent 34%),
    #0c0c11;
  background-attachment: fixed;
}

.uno-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 1rem 1rem;
}

h1,
h2,
.uno-logo,
.btn,
.seg button,
.oname,
.badge-uno {
  font-family: "Fredoka", "Inter", sans-serif;
}

/* Pinned to the true top-left corner, matching the other games. */
.back-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999;
  font: 700 13px/1 "Fredoka", "Inter", sans-serif;
  color: #fff;
  background: #17171f;
  border: 1px solid #33333f;
  border-radius: 10px;
  padding: 9px 13px;
  -webkit-tap-highlight-color: transparent;
}
.back-link:hover {
  color: #fff;
  background: #20202a;
}

/* ---------- Uno logo header ---------- */
.uno-header {
  text-align: center;
  margin-bottom: 0.7rem;
}
.uno-logo {
  display: inline-block;
  position: relative;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-style: italic;
  font-size: 1.85rem;
  letter-spacing: 1px;
  line-height: 1;
  padding: 0.3rem 1.1rem 0.38rem;
  border: 4px solid #fff;
  border-radius: 50% / 50%;
  transform: rotate(-7deg);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.55);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.18);
  text-shadow: 2px 2px 0 var(--yellow);
}
h1.title {
  font-size: 2rem;
  margin: 0 0 0.25rem;
}

.subtitle {
  color: #9aa0ad;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.uno-header .subtitle {
  text-align: center;
  max-width: none;
  white-space: nowrap;
  font-size: 0.85rem;
  margin: 0.45rem auto 0;
}
@media (max-width: 560px) {
  .uno-header .subtitle { white-space: normal; }
}

/* ---------- generic buttons ---------- */
/* Chunky, pill-ish, with a hard drop-shadow that "presses" on click — like
   a physical game piece. The primary action is Uno red. */
.btn {
  cursor: pointer;
  font-family: "Fredoka", "Inter", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 999px;
  padding: 0.62rem 1.35rem;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.32);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease,
    opacity 0.15s;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn.secondary {
  background: #2f6fb0;
}
.btn.warn {
  background: #2a2a33;
}
.btn.uno {
  background: var(--yellow);
  color: #1a1a1f;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 22px rgba(245, 185, 18, 0.5);
  animation: pulse 0.8s infinite alternate;
}
@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
/* a freshly-landed card on the discard pile gives a little pop */
@keyframes landpop {
  from {
    transform: scale(1.18);
  }
  to {
    transform: scale(1);
  }
}
.flying-card {
  position: fixed;
  margin: 0 !important;
  z-index: 70;
  pointer-events: none;
  will-change: transform;
}
/* CPU plays: a face-down mini-card flips face-up and grows to full size. */
.flip-wrap {
  perspective: 800px;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.46s cubic-bezier(0.2, 0.75, 0.3, 1);
}
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.flip-face .card {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.flip-front {
  transform: rotateY(180deg);
}

/* ---------- setup screen ---------- */
/* Panels read as felt cards: a four-colour Uno stripe caps each one. */
.panel {
  position: relative;
  background: linear-gradient(180deg, #181820, #121218);
  border: 1px solid #2a2a36;
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--red) 0 25%,
    var(--yellow) 0 50%,
    var(--green) 0 75%,
    var(--blue) 0 100%
  );
}
.panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1.3rem;
  font-weight: 600;
}
.field {
  margin-bottom: 1rem;
}
.field label {
  display: block;
  font-size: 0.85rem;
  color: #9aa0ad;
  margin-bottom: 0.4rem;
}
.seg {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.seg button {
  cursor: pointer;
  font-family: "Fredoka", "Inter", sans-serif;
  font-weight: 600;
  background: #1c1c24;
  color: #cfd3db;
  border: 2px solid #30303d;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  transition: 0.15s;
}
.seg button.active {
  background: var(--red);
  color: #fff;
  border-color: #fff;
}
.field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  background: #0e0e13;
  border: 1px solid #2c2c38;
  color: #fff;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
}
.hint {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 0.35rem;
}

/* ---------- table ---------- */
#game {
  display: none;
}
.opponents {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.opp {
  box-sizing: border-box;
  width: 164px; /* fixed — never resizes with card count, so all CPUs match */
  background: linear-gradient(180deg, #1a1a22, #131319);
  border: 2px solid #2a2a36;
  border-radius: 14px;
  padding: 0.65rem 0.6rem;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.opp.active {
  border-color: var(--yellow);
  box-shadow: 0 0 20px rgba(245, 185, 18, 0.45);
  transform: translateY(-3px);
}
.opp .oname {
  font-weight: 600;
  font-size: 0.98rem;
}
.opp .ocount {
  font-size: 0.78rem;
  color: #9aa0ad;
  margin-top: 0.15rem;
}
.mini-backs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 0.4rem;
  height: 26px;
}
.mini-back {
  width: 16px;
  height: 24px;
  border-radius: 3px;
  background: linear-gradient(135deg, #2a2a33, #3a3a46);
  border: 1px solid #4a4a58;
}
.badge-uno {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1a1a1f;
  background: var(--yellow);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- center: piles ---------- */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.pile {
  text-align: center;
}
.pile .plabel {
  font-size: 0.72rem;
  color: #9aa0ad;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.color-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #cfd3db;
}
.color-dot .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff3;
}
.dir {
  font-size: 0.85rem;
  color: #9aa0ad;
  text-align: center;
  margin-bottom: 0.35rem;
}

/* ---------- cards ---------- */
.card {
  position: relative;
  width: 74px;
  height: 108px;
  border-radius: 11px;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px #0008;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  user-select: none;
  flex: 0 0 auto;
  touch-action: manipulation;
}
/* Decorative bits must never swallow a tap meant for the card. */
.card .oval,
.card .corner,
.card .big {
  pointer-events: none;
}
.card.sm {
  width: 60px;
  height: 88px;
  border-width: 2.5px;
}
.card.red {
  background: var(--red);
}
.card.yellow {
  background: var(--yellow);
  color: #1a1a1f;
}
.card.green {
  background: var(--green);
}
.card.blue {
  background: var(--blue);
}
.card.wild {
  background: conic-gradient(
    var(--red) 0 25%,
    var(--blue) 0 50%,
    var(--green) 0 75%,
    var(--yellow) 0 100%
  );
}
.card .big {
  font-family: "Fredoka", "Inter", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  text-shadow: 0 2px 2px #0005;
}
.card.sm .big {
  font-size: 1.55rem;
}
.card .corner {
  position: absolute;
  font-family: "Fredoka", "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}
.card .corner.tl {
  top: 4px;
  left: 6px;
}
.card .corner.br {
  bottom: 4px;
  right: 6px;
  transform: rotate(180deg);
}
.card.wild .big,
.card.wild .corner {
  color: #fff;
  text-shadow: 0 1px 3px #000a;
}
.card .oval {
  position: absolute;
  inset: 14px 8px;
  border-radius: 50%;
  background: #ffffff22;
  transform: rotate(-30deg);
}
.card.back {
  background: radial-gradient(circle at 30% 25%, #23232e, #0f0f15);
  border-color: #3a3a48;
}
.card.back::after {
  content: "UNO";
  font-family: "Fredoka", "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  background: var(--red);
  padding: 2px 8px 3px;
  border: 2px solid #fff;
  border-radius: 50% / 50%;
  transform: rotate(-20deg);
  letter-spacing: 0.5px;
}

.deck-stack {
  position: relative;
  cursor: pointer;
}
.deck-stack.disabled {
  cursor: default;
  opacity: 0.65;
}

/* ---------- hand ---------- */
.hand-wrap {
  margin-top: 0.55rem;
}
.hand-label {
  text-align: center;
  font-size: 0.78rem;
  color: #9aa0ad;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hand {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.hand .card {
  cursor: default;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.hand .card.playable {
  cursor: pointer;
  box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255, 255, 255, 0.55),
    0 4px 10px #0008;
}
/* Lift only on devices that truly hover (mouse). On touch, a :hover lift
   would "stick" on first tap and swallow the tap that should play. */
@media (hover: hover) and (pointer: fine) {
  .hand .card.playable:hover {
    transform: translateY(-12px);
  }
}
.hand .card.dim {
  filter: brightness(0.5) saturate(0.7);
}

.controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  min-height: 44px;
}

.log {
  margin-top: 1.1rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  background: #0e0e13;
  border: 1px solid #1e1e27;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  color: #cfd3db;
  height: 84px;
  overflow-y: auto;
  line-height: 1.45;
}
.log div {
  opacity: 0.55;
}
.log div:last-child {
  opacity: 1;
  font-weight: 600;
}

/* On wide screens, pin the log as a sidebar on the right so it's always in view.
   The game stays CENTERED (margin auto) but its width is capped to leave equal
   space on both sides, so the log (in the right reserve) never overlaps it. */
@media (min-width: 1120px) {
  .uno-wrapper {
    max-width: min(1000px, calc(100vw - 500px));
    margin: 0 auto;
  }
  .log {
    position: fixed;
    top: 70px;
    right: 12px;
    width: 196px;
    height: auto;
    min-height: 120px;
    max-height: calc(100vh - 92px);
    margin: 0;
    max-width: none;
    z-index: 5;
  }
}

/* ---------- overlay ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: #000a;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}
.overlay.show {
  display: flex;
}
.modal {
  position: relative;
  background: linear-gradient(180deg, #1a1a22, #131319);
  border: 1px solid #2c2c38;
  border-radius: 20px;
  padding: 1.6rem 1.5rem 1.5rem;
  max-width: 440px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--red) 0 25%,
    var(--yellow) 0 50%,
    var(--green) 0 75%,
    var(--blue) 0 100%
  );
}
.modal h3 {
  margin: 0 0 0.4rem;
  font-family: "Fredoka", "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.45rem;
}
.modal p {
  color: #b6bcc8;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.color-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.color-choices button {
  cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  height: 64px;
  font-family: "Fredoka", "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s;
}
.color-choices button:hover {
  transform: scale(1.04);
}
.reveal-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 0.5rem 0 1rem;
}
.modal-btns {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- toast ---------- */
#toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  opacity: 0;
  visibility: hidden;
  background: #17171f;
  color: #fff;
  font-family: "Fredoka", "Inter", sans-serif;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border: 2px solid var(--yellow);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 60;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  font-size: 0.95rem;
  text-align: center;
  max-width: 90vw;
}
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.scoreboard {
  max-width: 560px;
  margin: 0 auto 1rem;
  font-size: 0.85rem;
  color: #cfd3db;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.scoreboard span b {
  color: var(--yellow);
}