.uno-game{display:grid;gap:18px}
.uno-toolbar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fff;border:3px solid var(--line);border-radius:22px;box-shadow:5px 5px 0 var(--line);padding:14px}
.uno-settings{display:flex;gap:12px;flex-wrap:wrap}
.uno-settings label{display:grid;gap:6px;font-weight:900}
.uno-settings select{border:2px solid var(--line);border-radius:12px;padding:9px 10px;font-weight:900;background:#fff}
.uno-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.uno-actions button,.uno-friend-row button,.uno-draw{background:#ff4757;color:#fff;border:3px solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--line);padding:10px 14px;font-weight:900;cursor:pointer}
.uno-actions button:nth-child(2){background:#2ed573;color:#111}
.uno-status{display:flex;gap:12px;flex-wrap:wrap}
.uno-status div{background:#fff8e7;border:3px solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--line);padding:10px 14px}
.uno-status span{display:block;font-weight:900;color:#555}
.uno-status strong{display:block;font-size:1.2rem;font-weight:900}
.uno-table{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.uno-message{background:#fffa85;border:3px solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--line);padding:12px;font-weight:900}
.uno-hand-wrap{background:#fff;border:3px solid var(--line);border-radius:22px;box-shadow:5px 5px 0 var(--line);padding:14px}
.uno-hand-wrap h2{margin-top:0}
.uno-hand{display:flex;gap:10px;flex-wrap:wrap}
.uno-card{width:82px;height:122px;border:4px solid var(--line);border-radius:18px;box-shadow:5px 5px 0 var(--line);display:grid;place-items:center;font-size:1.6rem;font-weight:900;color:#fff;cursor:pointer;position:relative}
.uno-card small{position:absolute;top:8px;left:10px;font-size:.75rem}
.uno-card.red{background:#ff4757}
.uno-card.yellow{background:#ffd32a;color:#111}
.uno-card.green{background:#2ed573;color:#111}
.uno-card.blue{background:#1e90ff}
.uno-card.black{background:#111}
.uno-card:disabled{opacity:.45;cursor:default;filter:grayscale(.25)}
.uno-discard{min-width:82px;min-height:122px}
.uno-friend-panel{width:100%;display:none;background:#fff;border:3px solid var(--line);border-radius:18px;box-shadow:5px 5px 0 var(--line);padding:12px;gap:10px}
.uno-friend-panel.open{display:grid}
.uno-friend-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff8e7;border:2px solid var(--line);border-radius:12px;padding:10px;font-weight:900}
@media(max-width:640px){.uno-toolbar,.uno-settings,.uno-actions{display:grid;width:100%}.uno-card{width:64px;height:96px;font-size:1.15rem;border-radius:14px}}

.uno-call,
.uno-counter{
  color:#111;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}

.uno-call{
  background:#ffd32a;
}

.uno-counter{
  background:#a29bfe;
}

/* UNO cards 3D upgrade */
.uno-card{
  isolation:isolate;
  overflow:hidden;
  transform-style:preserve-3d;
  transform:perspective(700px) rotateX(0deg) rotateY(0deg) translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
  border:4px solid #111 !important;
  box-shadow:
    6px 7px 0 #111,
    inset 0 0 0 5px rgba(255,255,255,.92),
    inset -10px -12px 0 rgba(0,0,0,.12),
    inset 8px 8px 0 rgba(255,255,255,.22) !important;
  text-shadow:2px 2px 0 rgba(0,0,0,.28);
}

.uno-card::before{
  content:"";
  position:absolute;
  inset:16px 11px;
  z-index:-1;
  background:rgba(255,255,255,.9);
  border:3px solid rgba(17,17,17,.85);
  border-radius:50%;
  transform:rotate(-18deg);
  box-shadow:
    inset -5px -7px 0 rgba(0,0,0,.12),
    inset 5px 5px 0 rgba(255,255,255,.7);
}

.uno-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(135deg, rgba(255,255,255,.45), transparent 28%),
    linear-gradient(315deg, rgba(0,0,0,.2), transparent 34%);
  pointer-events:none;
}

.uno-card:not(:disabled):hover{
  transform:perspective(700px) rotateX(7deg) rotateY(-7deg) translateY(-8px);
  box-shadow:
    9px 13px 0 #111,
    inset 0 0 0 5px rgba(255,255,255,.95),
    inset -10px -12px 0 rgba(0,0,0,.12),
    inset 8px 8px 0 rgba(255,255,255,.22) !important;
  filter:saturate(1.12);
}

.uno-card:not(:disabled):active{
  transform:perspective(700px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
  box-shadow:
    4px 5px 0 #111,
    inset 0 0 0 5px rgba(255,255,255,.95),
    inset -10px -12px 0 rgba(0,0,0,.12) !important;
}

.uno-card small{
  z-index:2;
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#111;
  border:2px solid #111;
  border-radius:999px;
  box-shadow:2px 2px 0 #111;
  padding:2px 5px;
  font-size:.62rem !important;
  line-height:1;
  text-transform:uppercase;
}

.uno-card.red{
  background:
    radial-gradient(circle at 28% 22%, #ff8c8c, transparent 24%),
    linear-gradient(145deg, #ff4757, #c91628) !important;
}

.uno-card.yellow{
  background:
    radial-gradient(circle at 28% 22%, #fff7a8, transparent 24%),
    linear-gradient(145deg, #ffd32a, #d7a900) !important;
  color:#111 !important;
  text-shadow:1px 1px 0 rgba(255,255,255,.55);
}

.uno-card.green{
  background:
    radial-gradient(circle at 28% 22%, #9cffbd, transparent 24%),
    linear-gradient(145deg, #2ed573, #139d4c) !important;
  color:#111 !important;
  text-shadow:1px 1px 0 rgba(255,255,255,.45);
}

.uno-card.blue{
  background:
    radial-gradient(circle at 28% 22%, #8ec8ff, transparent 24%),
    linear-gradient(145deg, #1e90ff, #0057b8) !important;
}

.uno-card.black{
  background:
    conic-gradient(from 45deg, #ff4757, #ffd32a, #2ed573, #1e90ff, #ff4757) !important;
  color:#fff !important;
}

.uno-card.black::before{
  background:#111;
  border-color:#fff;
  box-shadow:
    inset -5px -7px 0 rgba(0,0,0,.35),
    inset 5px 5px 0 rgba(255,255,255,.18);
}

.uno-card.black small{
  background:#111;
  color:#fff;
  border-color:#fff;
  box-shadow:2px 2px 0 #111;
}

.uno-discard .uno-card,
#unoDiscard .uno-card,
#unoRoomDiscard .uno-card{
  transform:perspective(700px) rotateZ(-4deg);
}

.uno-discard .uno-card:hover,
#unoDiscard .uno-card:hover,
#unoRoomDiscard .uno-card:hover{
  transform:perspective(700px) rotateZ(-4deg);
}

@media(max-width:640px){
  .uno-card{
    box-shadow:
      4px 5px 0 #111,
      inset 0 0 0 4px rgba(255,255,255,.92),
      inset -7px -8px 0 rgba(0,0,0,.12) !important;
  }

  .uno-card::before{
    inset:12px 8px;
  }

  .uno-card small{
    min-width:18px;
    height:18px;
    font-size:.52rem !important;
  }
}