/* ============================================================
   UNO CLUB — warm saloon UI
   ============================================================ */
:root {
  --ink-950: #140a08;
  --ink-900: #1d0f0c;
  --ink-800: #2a1512;
  --ink-700: #3a1f19;
  --ink-600: #4a2a22;
  --ink-500: #5d362b;

  --cream: #f7efd9;
  --cream-50: #fffaf0;
  --cream-100: #fbf4e3;
  --cream-200: #efe2c4;
  --cream-300: #e3d1ae;
  --cream-400: #d8c39b;

  --brown: #4a2a22;
  --brown-soft: #6b4a36;
  --brown-muted: #8a6a4a;

  --red: #d6473a;
  --red-600: #bf382d;
  --red-700: #93251d;
  --red-900: #6f1b15;

  --gold: #f2d16b;
  --gold-600: #d9ae45;
  --gold-700: #b58624;

  --teal: #3f9d95;
  --teal-dark: #2b7d77;

  --green: #2f9e5b;
  --blue: #2f6fbf;

  --font-ui: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-card: 'Fredoka', 'Nunito', 'Segoe UI', sans-serif;

  --shadow-panel: 0 26px 60px -24px rgba(0, 0, 0, 0.75), 0 8px 20px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scrollbar-gutter: stable; }

body {
  position: relative;
  min-height: 100%;
  font-family: var(--font-ui);
  color: var(--cream);
  background:
    radial-gradient(1100px 760px at 82% -14%, rgba(236, 160, 70, 0.16), transparent 62%),
    radial-gradient(900px 700px at 4% 108%, rgba(63, 157, 149, 0.12), transparent 60%),
    radial-gradient(1500px 1000px at 50% -12%, #4a241c, #24120f 55%, #140a08 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* warm sun haze */
body::before {
  content: '';
  position: fixed;
  z-index: -2;
  left: 50%;
  top: calc(-42vmax + 10vh);
  width: 84vmax;
  height: 84vmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 209, 107, 0.20), rgba(214, 71, 58, 0.10) 42%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}

/* paper grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

#bgfx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#bgfx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 130vmax;
  height: 130vmax;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 12% 6%, rgba(63, 157, 149, 0.10), transparent 42%),
    radial-gradient(circle at 50% 0%, rgba(214, 71, 58, 0.10), transparent 52%),
    radial-gradient(circle at 86% 96%, rgba(63, 157, 149, 0.08), transparent 42%);
}
#bgfx::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(112deg, transparent 0 46px, rgba(247, 239, 217, 0.014) 46px 47px),
    radial-gradient(ellipse at 50% 120%, rgba(214, 71, 58, 0.10), transparent 62%);
}
.bg-card {
  position: absolute;
  width: var(--w, 56px);
  height: calc(var(--w, 56px) * 1.5);
  border-radius: 9px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.16)),
    var(--bc);
  border: 2px solid rgba(247, 239, 217, 0.45);
  opacity: 0.12;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: rotate(var(--rot, 0deg));
  animation: bgFloat var(--dur, 18s) ease-in-out infinite alternate;
  will-change: transform;
}
.bg-card::before {
  content: 'UNO';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-card);
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--w, 56px) * 0.17);
  letter-spacing: -0.04em;
  color: rgba(247, 239, 217, 0.8);
  transform: skewX(-6deg) rotate(-8deg);
}
.b1 { --bc: #d6473a; --w: 58px; --rot: -9deg; left: 5%; top: 24%; --dur: 22s; --dx: 60px; --dy: -42px; }
.b2 { --bc: #2f6fbf; --w: 42px; --rot: 12deg; left: 86%; top: 16%; --dur: 27s; --dx: -70px; --dy: 52px; }
.b3 { --bc: #d99a00; --w: 72px; --rot: 6deg; left: 10%; top: 74%; --dur: 24s; --dx: 82px; --dy: -60px; }
.b4 { --bc: #2f9e5b; --w: 38px; --rot: -14deg; left: 76%; top: 66%; --dur: 30s; --dx: -52px; --dy: -72px; }
.b5 { --bc: #3f9d95; --w: 50px; --rot: 8deg; left: 40%; top: 6%; --dur: 34s; --dx: 92px; --dy: 62px; }
.b6 { --bc: #e25747; --w: 46px; --rot: -5deg; left: 60%; top: 84%; --dur: 26s; --dx: -80px; --dy: -52px; }
@keyframes bgFloat {
  0% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  100% { transform: translate(var(--dx, 40px), var(--dy, -30px)) rotate(var(--rot, 0deg)); }
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ============================================================
   Top bar
   ============================================================ */
#topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(29, 15, 12, 0.97), rgba(29, 15, 12, 0.86));
  border-bottom: 2px solid rgba(242, 209, 107, 0.20);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px) saturate(1.15);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-logo {
  width: 40px;
  height: 54px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fdf7e7, #efe1c2);
  border: 2px solid #fff8ea;
  box-shadow: 0 0 0 1px rgba(58, 32, 26, 0.35), 0 0 0 3px rgba(242, 209, 107, 0.28), 0 8px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-7deg);
  flex: none;
}
.brand-logo b {
  color: var(--red);
  font-family: var(--font-card);
  font-weight: 700;
  font-size: 11px;
  font-style: italic;
  letter-spacing: -0.05em;
  transform: skewX(-6deg);
  line-height: 1;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--cream);
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.brand-name b { color: var(--red); font-weight: 900; }

.conn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.conn input { width: 250px; }

input, select {
  padding: 10px 13px;
  border-radius: 12px;
  border: 2px solid rgba(247, 239, 217, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
input::placeholder { color: rgba(247, 239, 217, 0.38); }
input:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 209, 107, 0.18);
}
select { cursor: pointer; }
#topbar input { background: rgba(0, 0, 0, 0.36); border-color: rgba(247, 239, 217, 0.20); }
#topbar input:focus { border-color: var(--gold); }

button {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #fff6e4;
  background: linear-gradient(180deg, #e25747, #c0392f);
  border: 2px solid #f7efd9;
  border-radius: 12px;
  padding: 9px 15px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7f251e, 0 8px 18px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.15s;
  white-space: nowrap;
}
button:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #7f251e, 0 12px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #7f251e, 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.35);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

#reconnectBtn, #settingsBtn, #fullscreenBtn {
  background: linear-gradient(180deg, #5b352b, #3a1f19);
  border-color: rgba(247, 239, 217, 0.55);
  box-shadow: 0 4px 0 #1a0c09, 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#reconnectBtn:hover:not(:disabled), #settingsBtn:hover:not(:disabled), #fullscreenBtn:hover:not(:disabled) {
  box-shadow: 0 6px 0 #1a0c09, 0 12px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#settingsBtn::before { content: '\2699'; margin-right: 6px; font-size: 13px; }
.icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: none;
  font-size: 0;
}
#fullscreenBtn {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 0;
}
#fullscreenBtn::before {
  content: '';
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) left top / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 6px 2px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 2px 6px no-repeat;
}
#fullscreenBtn.active {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 4px 0 #1a0c09, 0 0 16px rgba(242, 209, 107, 0.25);
}
#leaveBtn {
  background: linear-gradient(180deg, #4a2a22, #2a1512);
  border-color: rgba(214, 71, 58, 0.7);
  color: #ffd9cf;
  box-shadow: 0 4px 0 #140a08, 0 8px 18px rgba(0, 0, 0, 0.35);
}

.dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.30);
  border: 1.5px solid rgba(247, 239, 217, 0.16);
  color: rgba(247, 239, 217, 0.78);
  white-space: nowrap;
}
.dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8d8172;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}
.dot.online { color: #bfe8d9; border-color: rgba(63, 157, 149, 0.45); }
.dot.online::before { background: #46c990; box-shadow: 0 0 10px rgba(70, 201, 144, 0.8); }
.dot.connecting { color: #ffeaa6; border-color: rgba(242, 209, 107, 0.4); }
.dot.connecting::before { background: var(--gold); box-shadow: 0 0 8px rgba(242, 209, 107, 0.7); }
.dot.offline { color: #ffc2b7; border-color: rgba(214, 71, 58, 0.4); }
.dot.offline::before { background: #e25747; box-shadow: 0 0 8px rgba(226, 87, 71, 0.7); }

/* ============================================================
   Lobby
   ============================================================ */
#lobby {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(280px, 380px);
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 26px clamp(18px, 2.4vw, 44px) 44px;
}

.lobby-hero {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 8px 4px 2px;
}
.lobby-hero::before {
  content: '';
  position: absolute;
  right: 4%;
  top: -90px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 209, 107, 0.20), rgba(214, 71, 58, 0.10) 46%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}
.hero-copy, .hero-chips { position: relative; z-index: 1; }
.hero-copy { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.eyebrow {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(242, 209, 107, 0.32);
  background: rgba(242, 209, 107, 0.07);
}
.lobby-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.7vw, 48px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.lobby-hero h1 span { color: var(--gold); }
.lobby-hero p {
  color: rgba(247, 239, 217, 0.66);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  max-width: 620px;
}
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--cream);
  background: rgba(29, 15, 12, 0.55);
  border: 1.5px solid rgba(247, 239, 217, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero-chip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hero-chip.uno i { background: var(--red); box-shadow: 0 0 9px rgba(214, 71, 58, 0.8); }
.hero-chip.time i { background: var(--gold); box-shadow: 0 0 9px rgba(242, 209, 107, 0.8); }

/* ============================================================
   Parchment panels
   ============================================================ */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fcf6e7 0%, #f1e4c8 100%);
  color: var(--ink-700);
  border: 3px solid #fffaf0;
  box-shadow: 0 0 0 2px rgba(120, 60, 30, 0.35), var(--shadow-panel), inset 0 1px 0 #fff;
  animation: panelIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.12) both;
}
.panel::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 17px;
  border: 1.5px solid rgba(180, 140, 80, 0.30);
  pointer-events: none;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.lobby-hero + .panel { animation-delay: 0.05s; }
.lobby-hero + .panel + .panel { animation-delay: 0.11s; }
.lobby-hero + .panel + .panel + .panel { animation-delay: 0.17s; }

.panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-600);
}
.panel h2::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(214, 71, 58, 0.35), rgba(242, 209, 107, 0.12));
}
#roomCount { color: var(--brown-muted); font-size: 11px; letter-spacing: 0.04em; }

.grow { flex: 1 1 380px; min-width: 0; }
.rules { font-size: 13px; line-height: 1.65; color: var(--brown-soft); font-weight: 600; max-width: 340px; }

.panel input, .panel select {
  background: var(--cream-50);
  border-color: var(--cream-400);
  color: var(--ink-700);
}
.panel input::placeholder { color: #b39a76; }
.panel input:focus, .panel select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 71, 58, 0.13);
}

/* profile */
.profile-row { display: flex; align-items: center; gap: 14px; }
.avatar-edit {
  position: relative;
  width: 68px;
  height: 68px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fffaf0;
  background: radial-gradient(circle at 34% 28%, #e8875a, #b33a2e 60%, #6f1e18);
  box-shadow: 0 0 0 2px var(--gold-600), 0 6px 16px rgba(90, 40, 20, 0.28);
  color: #fff6e4;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 25px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  overflow: visible;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.avatar-edit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--gold-600), 0 10px 22px rgba(90, 40, 20, 0.32);
  filter: brightness(1.04);
}
.avatar-edit #avatarInitial { position: relative; z-index: 0; line-height: 1; }
.avatar-edit.has-img #avatarInitial { opacity: 0; }
.avatar-edit .avatar-img { border-radius: 50%; z-index: 1; }
.avatar-edit-badge {
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 3;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream-50);
  color: var(--red-600);
  border: 2px solid var(--gold-600);
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.profile-field { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.profile-field input { width: 100%; }
.profile-field button { width: 100%; }
.profile-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.profile-likes { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--brown-soft); }
.profile-likes .ah-glyph { color: var(--red); font-size: 12px; }
.profile-likes b { color: var(--red-600); font-size: 12px; }
.profile-hint { margin-top: -4px; font-size: 10.5px; line-height: 1.45; font-weight: 600; color: var(--brown-muted); }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  color: var(--red-600);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: none;
  cursor: pointer;
}
.link-btn:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  filter: none;
  color: var(--red-700);
}

/* room list */
.room-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 2px; }
.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--cream-50);
  border: 2px solid #e7d6b6;
  box-shadow: 0 3px 0 rgba(120, 80, 40, 0.12);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.room-row:hover {
  transform: translateY(-2px);
  border-color: var(--gold-600);
  box-shadow: 0 8px 18px rgba(90, 50, 20, 0.16), 0 2px 0 rgba(120, 80, 40, 0.1);
}
.rinfo { flex: 1; min-width: 0; }
.rname {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--ink-700);
  min-width: 0;
}
.rnametext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsub { font-size: 11.5px; font-weight: 700; color: var(--brown-muted); margin-top: 3px; }
.room-row button { min-width: 82px; padding: 8px 12px; font-size: 12.5px; }

.rtype {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 7px;
  color: #fff6e4;
}
.rtype::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.rtype[data-t="uno"] { background: var(--red); }

.create-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.create-row input { flex: 1 1 120px; min-width: 0; }
.create-row select { flex: 0 0 auto; }
.create-row button { flex: 0 0 auto; }
#createBtn {
  background: linear-gradient(180deg, #f7dd8b, #e3b94f);
  border-color: #fff6dc;
  color: #3a201a;
  text-shadow: none;
  box-shadow: 0 4px 0 #9a6f17, 0 8px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: ctaPulse 2.8s ease-in-out infinite;
}
#createBtn:hover:not(:disabled) {
  box-shadow: 0 6px 0 #9a6f17, 0 12px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 0 #9a6f17, 0 8px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(242, 209, 107, 0.35); }
  50% { box-shadow: 0 4px 0 #9a6f17, 0 8px 18px rgba(0, 0, 0, 0.25), 0 0 0 9px rgba(242, 209, 107, 0); }
}

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 14px;
  border-radius: 14px;
  border: 2px dashed rgba(160, 120, 70, 0.35);
  color: var(--brown-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
}

/* stats */
.stats-list { display: flex; flex-direction: column; gap: 7px; font-size: 13px; min-width: 0; }
.stats-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 250, 240, 0.55);
  border: 1.5px solid rgba(220, 200, 160, 0.55);
  color: var(--ink-700);
  transition: background 0.15s, border-color 0.15s;
}
.stats-row:hover { background: var(--cream-50); border-color: var(--cream-400); }
.stats-row.me {
  background: #fff3d6;
  border-color: var(--gold-600);
  box-shadow: inset 0 0 0 1px rgba(242, 209, 107, 0.4);
}
.stats-rank { width: 22px; flex: none; text-align: center; font-family: var(--font-display); font-weight: 900; color: var(--brown-muted); }
.stats-row:nth-child(1) .stats-rank { color: #c9971e; }
.stats-row:nth-child(2) .stats-rank { color: #8d8a86; }
.stats-row:nth-child(3) .stats-rank { color: #a9653c; }
.stats-name { flex: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-win { flex: none; color: var(--red-600); font-weight: 900; font-size: 12px; }
.stats-sub { flex: none; color: var(--brown-muted); font-size: 11px; font-weight: 700; }
.stats-foot {
  padding-top: 7px;
  margin-top: 3px;
  border-top: 1.5px solid rgba(180, 140, 80, 0.3);
  color: var(--brown-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.hidden { display: none !important; }

/* ============================================================
   UNO table
   ============================================================ */
#unoGame {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: calc(100vh - 84px);
  padding: 14px clamp(10px, 1.6vw, 26px) 26px;
}

#unoTable {
  --card-w: 92px;
  --card-h: calc(var(--card-w) * 1.5);
  --opp-card-w: 60px;
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 20px 26px 18px;
  border: 14px solid #cf3f33;
  border-radius: 48px;
  background:
    radial-gradient(120% 82% at 50% 0%, rgba(255, 224, 170, 0.10), transparent 55%),
    radial-gradient(85% 62% at 50% 55%, rgba(125, 66, 50, 0.45), transparent 72%),
    radial-gradient(circle at 50% 44%, #5a3027 0%, #47251e 55%, #361b16 100%);
  box-shadow:
    0 0 0 3px #f7efd9,
    0 0 0 7px #e8c15c,
    0 0 0 9px rgba(40, 15, 10, 0.55),
    0 38px 90px rgba(0, 0, 0, 0.66),
    inset 0 0 0 2px rgba(247, 239, 217, 0.20),
    inset 0 0 90px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: filter 0.4s;
}
#unoTable.multi { --opp-card-w: 44px; }
#unoTable::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 34px;
  border: 1px solid rgba(247, 239, 217, 0.24);
  pointer-events: none;
  z-index: 1;
}
#unoTable.my-turn { animation: tableGlow 2.4s ease-in-out infinite; }
#unoTable.opp-turn { animation: tableOppGlow 2.8s ease-in-out infinite; }
@keyframes tableGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(242, 209, 107, 0.14)); }
  50% { filter: drop-shadow(0 0 32px rgba(242, 209, 107, 0.45)); }
}
@keyframes tableOppGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(214, 71, 58, 0.12)); }
  50% { filter: drop-shadow(0 0 30px rgba(214, 71, 58, 0.38)); }
}

.uno-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-card);
  font-weight: 700;
  font-size: clamp(110px, 22vw, 250px);
  letter-spacing: -0.05em;
  color: rgba(247, 239, 217, 0.035);
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

#unoTop, #unoOpponents, #unoCenter, .uno-me, #unoHand { position: relative; z-index: 2; }

/* avatar + hearts */
.avatar-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
}
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
  display: block;
}
.uno-opp-dot, .uno-me-dot { overflow: hidden; }
.uno-opp-dot.has-img, .uno-me-dot.has-img { color: transparent; text-shadow: none; }

.avatar-heart {
  position: absolute;
  right: -7px;
  bottom: -6px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: var(--cream-50);
  color: var(--red);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 2px 0 rgba(120, 60, 20, 0.35), 0 4px 9px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s;
}
.ah-glyph { font-size: 11px; line-height: 1; }
button.avatar-heart:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.06);
  background: #fff;
  box-shadow: 0 4px 0 rgba(120, 60, 20, 0.22), 0 8px 16px rgba(0, 0, 0, 0.3);
}
button.avatar-heart:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 1px 0 rgba(120, 60, 20, 0.3), 0 3px 8px rgba(0, 0, 0, 0.25);
}
.avatar-heart.static { cursor: default; }
.avatar-heart .ah-count { font-size: 10px; color: var(--ink-700); }
.avatar-heart.liked {
  background: var(--red);
  border-color: var(--cream);
  color: #fff6e4;
  box-shadow: 0 2px 0 var(--red-700), 0 4px 10px rgba(0, 0, 0, 0.3);
}
.avatar-heart.liked .ah-count { color: #fff6e4; }
.avatar-heart.liked .ah-glyph { color: #fff6e4; }
.avatar-heart:disabled {
  opacity: 1;
  filter: none;
  cursor: default;
  box-shadow: 0 2px 0 rgba(120, 60, 20, 0.3), 0 4px 9px rgba(0, 0, 0, 0.28);
}
.avatar-heart.received { animation: likePop 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.3); }
@keyframes likePop {
  0% { transform: scale(1); }
  38% { transform: scale(1.35) rotate(-5deg); }
  100% { transform: scale(1); }
}

/* swap fx */
.uno-swap-fx {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--cream-50);
  border: 3px solid var(--gold);
  color: var(--ink-700);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(214, 71, 58, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.7) rotate(-4deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.12em;
}
.uno-swap-fx .usf-icon { font-size: 24px; color: var(--red); line-height: 1; }
.uno-swap-fx.show { animation: swapFx 1.15s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes swapFx {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  32% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.92) rotate(0deg); }
}

/* hearts + toast */
.float-heart {
  position: fixed;
  z-index: 310;
  left: 0;
  top: 0;
  color: #ff5b7a;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: floatHeart 1.4s ease-out forwards;
}
@keyframes floatHeart {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  18% { opacity: 1; transform: translate(-50%, -70%) scale(1.05) rotate(var(--hr, -8deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx, 0px)), calc(-50% - 110px)) scale(0.7) rotate(var(--hr, 8deg)); }
}
.float-joy {
  position: fixed;
  z-index: 315;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: floatJoy 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes floatJoy {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  18% { opacity: 1; transform: translate(-50%, -65%) scale(1.05) rotate(var(--hr, 20deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx, 20px)), calc(-50% + var(--hy, -110px))) scale(0.8) rotate(var(--hr, 20deg)); }
}
.emote-bubble {
  position: fixed;
  z-index: 316;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffaf0, #f2e3c6);
  border: 3px solid #fffaf0;
  box-shadow: 0 0 0 2px rgba(214, 71, 58, 0.45), 0 10px 24px rgba(0, 0, 0, 0.35);
  font-size: 27px;
  line-height: 1;
  color: var(--red);
  pointer-events: none;
  animation: emoteBubble 1.05s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards;
}
.emote-bubble.joy {
  box-shadow: 0 0 0 2px rgba(242, 209, 107, 0.55), 0 10px 24px rgba(0, 0, 0, 0.35);
}
@keyframes emoteBubble {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
  20% { opacity: 1; transform: translate(-50%, -58%) scale(1.12) rotate(3deg); }
  55% { opacity: 1; transform: translate(-50%, -75%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -115%) scale(0.9) rotate(4deg); }
}
.uno-toast {
  position: fixed;
  left: 50%;
  top: 15%;
  z-index: 320;
  max-width: min(90vw, 560px);
  text-align: center;
  line-height: 1.35;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cream-50);
  color: var(--ink-700);
  border: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(214, 71, 58, 0.12);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  pointer-events: none;
  animation: toastIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both, toastOut 0.35s 1.9s ease forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -10px) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translate(-50%, -8px) scale(0.95); }
}

/* top: opponents + status */
#unoTop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.uno-opponents {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}
#unoOpponents .uno-opp-slot {
  width: min(270px, 72%);
  flex: 0 1 270px;
}
.uno-sides {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 3;
}
.uno-sides .uno-opp-slot {
  position: absolute;
  top: 50%;
  width: 178px;
  min-width: 0;
  flex: none;
  transform: translateY(-50%);
  pointer-events: auto;
}
.uno-sides .uno-opp-slot.side-left { left: 4%; }
.uno-sides .uno-opp-slot.side-right { right: 4%; }
.uno-sides .uno-opp-name { max-width: 100px; }
.uno-opp-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(230px, 31%);
  min-width: 148px;
  flex: 0 1 230px;
}
.uno-pick-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 6;
  display: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff9e8, #eed9a6);
  border: 2px solid #fff6e4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  color: #3a201a;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: pickPulse 1.2s ease-in-out infinite;
}
.uno-opp-slot.picking .uno-pick-badge { display: block; }
@keyframes pickPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}
.uno-opp-slot.their-turn .uno-opp {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 209, 107, 0.14), 0 0 26px rgba(242, 209, 107, 0.24), 0 8px 20px rgba(0, 0, 0, 0.35);
}
.uno-opp-slot.their-turn .uno-opp-dot { animation: avatarTurn 1.3s ease-in-out infinite; }

.uno-opp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74, 42, 34, 0.94), rgba(42, 22, 18, 0.96));
  border: 2px solid rgba(247, 239, 217, 0.24);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.uno-opp.their-turn {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 209, 107, 0.14), 0 0 26px rgba(242, 209, 107, 0.24), 0 8px 20px rgba(0, 0, 0, 0.35);
}
.uno-opp-dot, .uno-me-dot {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  color: #fff6e4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background:
    radial-gradient(circle at 34% 28%, hsl(var(--av-h, 8) 68% 62%), hsl(var(--av-h, 8) 62% 42%) 62%, hsl(var(--av-h, 8) 55% 28%) 100%);
  border: 3px solid var(--gold);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), inset 0 2px 6px rgba(255, 255, 255, 0.28);
}
.uno-opp.their-turn .uno-opp-dot { animation: avatarTurn 1.3s ease-in-out infinite; }
@keyframes avatarTurn {
  0%, 100% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), inset 0 2px 6px rgba(255, 255, 255, 0.28), 0 0 8px rgba(242, 209, 107, 0.25); }
  50% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), inset 0 2px 6px rgba(255, 255, 255, 0.28), 0 0 22px rgba(242, 209, 107, 0.8); }
}
.uno-opp-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uno-opp-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  max-width: 150px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uno-opp-count-row { display: flex; align-items: center; gap: 8px; }
.uno-opp-cards {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--cream);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: #fff6e4;
  line-height: 1;
  box-shadow: 0 2px 0 var(--red-700), 0 4px 9px rgba(0, 0, 0, 0.3);
}
.uno-opp-count-label { font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247, 239, 217, 0.55); }
.uno-opp-cards.bump, .uno-deck-label.bump { animation: bump 0.4s; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.uno-opp.their-turn::after, .uno-me.my-turn::after {
  content: 'ХОД';
  position: absolute;
  top: -11px;
  right: -7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.10em;
  color: var(--ink-800);
  background: var(--gold);
  border: 2px solid var(--cream);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  animation: badgePop 1.3s ease-in-out infinite;
}
.uno-me.my-turn::after { background: #46c990; }
@keyframes badgePop {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(1deg); }
}

/* me profile */
.uno-me {
  align-self: center;
  margin-top: auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74, 42, 34, 0.94), rgba(42, 22, 18, 0.96));
  border: 2px solid rgba(247, 239, 217, 0.24);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.uno-me-dot { width: 40px; height: 40px; font-size: 17px; background: radial-gradient(circle at 34% 28%, hsl(var(--av-h, 165) 55% 62%), hsl(var(--av-h, 165) 55% 42%) 62%, hsl(var(--av-h, 165) 50% 26%) 100%); }
#unoMeName {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  max-width: 240px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uno-emotes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  flex: none;
}
.uno-emote-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #5a3228, #3a1d17);
  border: 2px solid rgba(247, 239, 217, 0.5);
  box-shadow: 0 3px 0 #22100c, 0 6px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ffd8de;
  font-size: 15px;
  line-height: 1;
  text-shadow: none;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.uno-emote-btn.heart { color: #ff7d94; }
.uno-emote-btn.joy { color: #ffd76a; }
.uno-emote-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.1);
  box-shadow: 0 5px 0 #22100c, 0 10px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.uno-emote-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 0 #22100c;
}
.uno-emote-btn:disabled {
  opacity: 0.35;
  filter: grayscale(0.5);
  cursor: default;
}
.uno-me.my-turn {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 209, 107, 0.14), 0 0 26px rgba(242, 209, 107, 0.24), 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* opponent fan */
.uno-opp-fan {
  --ov: -14px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  min-height: calc(var(--opp-card-w, 44px) * 1.5 + 10px);
  padding: 4px 4px 0;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.34), transparent 72%);
  transition: box-shadow 0.3s;
}
.uno-opp-slot.their-turn .uno-opp-fan { animation: fanSway 3.8s ease-in-out infinite; }
@keyframes fanSway {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* status plaque */
.uno-status-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.uno-status-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.uno-mode-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
  color: #2a160f;
  background: linear-gradient(180deg, #ffe489, #e8b53a);
  border: 2px solid #fff6e4;
  box-shadow: 0 3px 0 rgba(120, 80, 40, 0.35);
}
.uno-status {
  position: relative;
  overflow: hidden;
  min-width: 238px;
  max-width: 100%;
  padding: 11px 22px 13px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--cream);
  background: linear-gradient(180deg, #4a2a22, #341a15);
  border: 2px solid rgba(247, 239, 217, 0.35);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.uno-status::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(242, 209, 107, 0.7);
  vertical-align: 1px;
}
.uno-status.my-turn {
  background: linear-gradient(180deg, #e25747, #c0392f);
  border-color: var(--cream);
  box-shadow: 0 4px 0 #7f251e, 0 0 22px rgba(214, 71, 58, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: statusPulse 1.6s ease-in-out infinite;
}
.uno-status.my-turn::before { background: var(--cream); box-shadow: 0 0 8px #fff; }
.uno-status.win {
  background: linear-gradient(180deg, #f7dd8b, #e3b94f);
  border-color: #fff6dc;
  color: var(--ink-800);
  box-shadow: 0 4px 0 #9a6f17, 0 0 24px rgba(242, 209, 107, 0.45);
}
.uno-status.win::before { background: var(--red); box-shadow: 0 0 8px rgba(214, 71, 58, 0.6); }
.uno-status.auto-pass {
  background: linear-gradient(180deg, #5b352b, #3a1f19);
  border-color: rgba(242, 209, 107, 0.6);
  color: #ffe9a8;
  animation: statusPulse 0.9s ease-in-out infinite;
}
.uno-status.auto-pass::before { background: var(--gold); }
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
.uno-status.timer::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--red));
  transform: scaleX(var(--tl, 1));
  transform-origin: left center;
  transition: transform 0.3s linear;
}
.uno-status.timer { color: #fff6e4; }
.uno-status.win.timer::after { background: linear-gradient(90deg, var(--red), var(--gold)); }

/* ============================================================
   Center tray
   ============================================================ */
#unoCenter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 18px 30px 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(124, 41, 33, 0.97), rgba(87, 26, 22, 0.97));
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 3px rgba(242, 209, 107, 0.55), 0 16px 34px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
#unoCenter::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 21px;
  border: 1px solid rgba(247, 239, 217, 0.22);
  pointer-events: none;
}

/* active color */
#unoActiveColor { --ac: var(--gold); display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
#unoActiveColor.ac-red { --ac: var(--red); }
#unoActiveColor.ac-yellow { --ac: var(--gold); }
#unoActiveColor.ac-green { --ac: var(--green); }
#unoActiveColor.ac-blue { --ac: var(--blue); }
.uno-act-visual {
  position: relative;
  width: 72px;
  height: 72px;
  flex: none;
}
.uno-act-ring {
  width: 72px;
  height: 72px;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #d6473a, #edb821, #2f9e5b, #2f6fbf, #d6473a);
  animation: ringSpin 7s linear infinite;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 22px var(--ac);
  filter: drop-shadow(0 0 10px var(--ac));
}
.uno-act-visual.reverse .uno-act-ring { animation-name: ringSpinReverse; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes ringSpinReverse { to { transform: rotate(-360deg); } }
.uno-dir-svg {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  color: #fff6e4;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.55));
  animation: dirSpin 6s linear infinite;
}
.uno-act-visual.reverse .uno-dir-svg { animation-name: dirSpinReverse; }
.uno-dir-arrow {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.uno-act-visual.reverse .uno-dir-arrow { transform: scaleX(-1); }
@keyframes dirSpin { to { transform: rotate(360deg); } }
@keyframes dirSpinReverse { to { transform: rotate(-360deg); } }
.uno-dir-track-under {
  fill: none;
  stroke: #2a160f;
  stroke-width: 7;
  stroke-linecap: round;
}
.uno-dir-track {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}
.uno-dir-head-under {
  fill: #2a160f;
  stroke: #2a160f;
  stroke-width: 5;
  stroke-linejoin: round;
}
.uno-dir-head {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.uno-act-chip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), inset 0 2px 6px rgba(255, 255, 255, 0.5), inset 0 -6px 10px rgba(0, 0, 0, 0.25);
}
.uno-act-chip.red { background: radial-gradient(circle at 35% 30%, #f0796b, #d6473a 58%, #a52920); }
.uno-act-chip.yellow { background: radial-gradient(circle at 35% 30%, #ffe27a, #edb821 58%, #b5820a); }
.uno-act-chip.green { background: radial-gradient(circle at 35% 30%, #73d99d, #2f9e5b 58%, #1a6b3b); }
.uno-act-chip.blue { background: radial-gradient(circle at 35% 30%, #7bb3ff, #2f6fbf 58%, #1b4585); }
.uno-act-label { font-size: 9px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 239, 217, 0.60); }
.uno-act-name { font-family: var(--font-display); font-size: 14px; font-weight: 900; color: var(--cream); letter-spacing: 0.01em; }
.uno-act-chip.chip-in { animation: chipPulse 1.8s ease-in-out infinite; }
@keyframes chipPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), inset 0 2px 6px rgba(255, 255, 255, 0.5), inset 0 -6px 10px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), inset 0 2px 6px rgba(255, 255, 255, 0.5), inset 0 -6px 10px rgba(0, 0, 0, 0.25), 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* deck */
#unoDeck { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; flex: none; flex-wrap: wrap; }
.uno-deck-main { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.uno-deck-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.uno-deck-stack {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
}
.uno-deck-stack::before, .uno-deck-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--card-w) * 0.16);
  background: linear-gradient(160deg, #4a2a22, #24120f);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1px rgba(30, 12, 8, 0.5), 0 5px 12px rgba(0, 0, 0, 0.3);
}
.uno-deck-stack::before { transform: translate(-4px, 5px) rotate(-3deg); }
.uno-deck-stack::after { transform: translate(3px, 2px) rotate(2deg); }
.uno-deck-stack .uno-card { position: relative; z-index: 3; animation: deckFloat 4.2s ease-in-out infinite; }
@keyframes deckFloat {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50% { transform: translateY(-3px) rotate(-1.6deg); }
}
.uno-deck-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 239, 217, 0.62);
  text-align: center;
}
.uno-deck-label b { color: var(--gold); font-size: 12px; }
#unoDeckBtn {
  padding: 10px 18px;
  font-size: 13px;
  color: #3a201a;
  background: linear-gradient(180deg, #f7dd8b, #e3b94f);
  border-color: #fff6dc;
  text-shadow: none;
  box-shadow: 0 4px 0 #9a6f17, 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
#unoDeckBtn:hover:not(:disabled) {
  box-shadow: 0 6px 0 #9a6f17, 0 12px 22px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* discard */
#unoDiscard { position: relative; width: var(--card-w); height: var(--card-h); flex: none; }
#unoDiscard::before, #unoDiscard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--card-w) * 0.16);
  background: linear-gradient(160deg, #f4e8cd, #e3d1ae);
  border: 3px solid #d8c39b;
  box-shadow: 0 0 0 1px rgba(30, 12, 8, 0.3), 0 5px 12px rgba(0, 0, 0, 0.25);
}
#unoDiscard::before { transform: rotate(-7deg); }
#unoDiscard::after { transform: rotate(5deg); }
#unoDiscard .uno-card { position: relative; z-index: 2; }

/* ============================================================
   Cards
   ============================================================ */
.uno-card {
  --cw: var(--card-w, 92px);
  --face: #d6473a;
  --ink: #c93a2e;
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.5);
  border-radius: calc(var(--cw) * 0.16);
  border: calc(var(--cw) * 0.032) solid #fff8ea;
  background:
    radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, 0.55), transparent 46%),
    repeating-linear-gradient(112deg, rgba(120, 70, 30, 0.028) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #fdf7e7 0%, #f6ecd4 56%, #efe1c2 100%);
  box-shadow:
    0 0 0 1px rgba(58, 32, 26, 0.30),
    0 calc(var(--cw) * 0.09) calc(var(--cw) * 0.18) rgba(30, 10, 8, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  font-family: var(--font-card);
  font-size: calc(var(--cw) / 10);
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg));
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1.35), box-shadow 0.16s, filter 0.16s;
}
.uno-card.red { --face: #d6473a; --ink: #c93a2e; }
.uno-card.yellow { --face: #edb821; --ink: #b57f00; }
.uno-card.green { --face: #2f9e5b; --ink: #26864d; }
.uno-card.blue { --face: #2f6fbf; --ink: #2a63ad; }

.uno-card-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.10)),
    var(--face);
  clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%);
}

.uno-corner {
  position: absolute;
  z-index: 4;
  font-family: var(--font-card);
  font-weight: 600;
  font-size: 2.2em;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.uno-corner.tl { top: 0.55em; left: 0.62em; }
.uno-corner.br {
  bottom: 0.58em;
  right: 0.66em;
  transform: rotate(180deg);
  color: #fff7e6;
  text-shadow: 0 1px 0 rgba(60, 20, 15, 0.3), 0 2px 4px rgba(60, 20, 15, 0.22);
}
.uno-card.yellow .uno-corner.br { text-shadow: 0 1px 0 rgba(60, 30, 0, 0.55), 0 2px 4px rgba(60, 30, 0, 0.35); }

.uno-card-pip {
  position: absolute;
  z-index: 3;
  top: 3.35em;
  left: 0.92em;
  width: 1.25em;
  height: 1.65em;
  border-radius: 50%;
  background: var(--face);
  box-shadow: 0 0 0 0.18em #fff8ea, 0 0 0 0.30em rgba(58, 32, 26, 0.16);
}

.uno-card-main {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding: 0.2em 0 1.2em;
  pointer-events: none;
}
.uno-card-symbol {
  font-family: var(--font-card);
  font-weight: 700;
  font-size: 5.1em;
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--ink);
  transform: rotate(-6deg);
  text-shadow: 0 0.02em 0 rgba(255, 255, 255, 0.35);
}
.uno-card[data-value="plus2"] .uno-card-symbol { font-size: 4.25em; }
.uno-card-sub {
  font-family: var(--font-display);
  font-size: 0.86em;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.78;
  margin-top: 0.15em;
}
.uno-card-icon {
  width: 4.15em;
  height: 4.15em;
  color: var(--ink);
  transform: rotate(-4deg);
  filter: drop-shadow(0 0.02em 0 rgba(255, 255, 255, 0.4));
}

/* wild */
.uno-card.wild {
  --face: #3a211c;
  --ink: var(--cream);
  background:
    radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, 0.10), transparent 46%),
    linear-gradient(160deg, #4a2a22 0%, #2c1712 62%, #1c0e0b 100%);
  border-color: #fff8ea;
}
.uno-card.wild .uno-corner { color: var(--cream); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.uno-card.wild .uno-corner.br { color: var(--cream); }
.uno-wild-wheel {
  width: 4.55em;
  height: 5.85em;
  border-radius: 50%;
  background: conic-gradient(from 45deg, #d6473a 0 25%, #edb821 0 50%, #2f9e5b 0 75%, #2f6fbf 0 100%);
  box-shadow: 0 0 0 0.28em #fff8ea, 0 0 0 0.42em rgba(20, 8, 5, 0.38), inset 0 0 0 0.12em rgba(255, 255, 255, 0.4);
  transform: rotate(-8deg);
}
.uno-card.wild .uno-card-main { padding: 1.4em 0 0.6em; }
.uno-card.wild .uno-card-sub { color: var(--cream); opacity: 0.7; letter-spacing: 0.2em; }

/* card back */
.uno-card.back {
  --face: #3a211c;
  background: linear-gradient(160deg, #4a2a22 0%, #2c1712 62%, #1c0e0b 100%);
  border-color: #fff8ea;
}
.uno-back-band { position: absolute; left: 0; right: 0; z-index: 1; }
.uno-back-band.top {
  top: 0;
  height: 25%;
  background: linear-gradient(180deg, #e25747, #c0392f);
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 100%);
}
.uno-back-band.bottom {
  bottom: 0;
  height: 23%;
  background: linear-gradient(180deg, #4aa8a0, #2f7d78);
  clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%);
}
.uno-back-ring {
  position: absolute;
  z-index: 2;
  inset: 17% 13%;
  border-radius: 50%;
  border: 1px solid rgba(247, 239, 217, 0.28);
  transform: rotate(-10deg);
}
.uno-logo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-10deg) skewX(-6deg);
  font-family: var(--font-card);
  font-weight: 700;
  font-size: 3.15em;
  letter-spacing: -0.05em;
  color: #fff5df;
  text-shadow: 0 0.09em 0 #b93228, 0 0.14em 0.22em rgba(0, 0, 0, 0.5);
}

/* mini cards (opponent hand / flights) */
.uno-mini {
  --cw: 60px;
  border-radius: calc(var(--cw) * 0.16);
  margin-left: var(--ov, -16px);
  transform: translateY(var(--fy, 0px)) rotate(var(--fr, 0deg));
  box-shadow: 0 0 0 1px rgba(38, 15, 10, 0.35), 0 5px 12px rgba(0, 0, 0, 0.38);
}
.uno-mini:first-child { margin-left: 0; }
.uno-mini.its-card { animation: miniIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.3); }
@keyframes miniIn {
  from { opacity: 0; transform: translateY(calc(var(--fy, 0px) - 16px)) rotate(var(--fr, 0deg)) scale(0.55); }
  to { opacity: 1; transform: translateY(var(--fy, 0px)) rotate(var(--fr, 0deg)) scale(1); }
}
.uno-mini .uno-logo { font-size: 3.15em; }
.uno-mini .uno-card-sub { display: none; }
.uno-mini .uno-card-pip { display: none; }

/* flying clones */
.fly-clone {
  position: fixed;
  margin: 0;
  z-index: 300;
  pointer-events: none;
  transform: none;
  animation: none;
}
#fxLayer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 55; }

/* ============================================================
   Hand
   ============================================================ */
#unoHand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0;
  min-height: calc(var(--card-h) + 38px);
  padding: 34px 12px 12px;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 68%, rgba(0, 0, 0, 0.34), transparent 70%);
  transition: background 0.3s;
}
#unoHand::before {
  content: 'ВАША РУКА';
  position: absolute;
  top: 10px;
  left: 18px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 239, 217, 0.42);
  pointer-events: none;
}
#unoHand.my-turn { background: radial-gradient(ellipse at 50% 72%, rgba(242, 209, 107, 0.12), transparent 68%); }
#unoHand.my-turn::before { color: rgba(242, 209, 107, 0.75); }
.uno-hand-card {
  margin-left: 0;
  z-index: 1;
  cursor: default;
}
.uno-hand-card.playable { cursor: pointer; }
.uno-hand-card.playable::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 49%, transparent 66%);
  background-size: 240% 100%;
  animation: cardShine 2.8s linear infinite;
}
@keyframes cardShine {
  0% { background-position: 210% 0; }
  100% { background-position: -60% 0; }
}
.uno-hand-card.playable {
  box-shadow:
    0 0 0 3px rgba(242, 209, 107, 0.85),
    0 calc(var(--cw) * 0.09) calc(var(--cw) * 0.18) rgba(30, 10, 8, 0.4),
    0 0 26px rgba(242, 209, 107, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.uno-hand-card.playable:hover {
  z-index: 50;
  transform: translateY(calc(var(--y, 0px) - 22px)) rotate(calc(var(--r, 0deg) * 0.5)) scale(1.055);
  filter: brightness(1.04);
  box-shadow:
    0 0 0 3px rgba(242, 209, 107, 1),
    0 22px 36px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(242, 209, 107, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.uno-hand-card.dim {
  opacity: 1;
  filter: grayscale(0.5) brightness(0.5) contrast(0.95);
}

/* entries */
.uno-card.card-in { animation: cardIn 0.32s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
#unoDiscard .uno-card.discard-in { animation: discardIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.35); }
#unoGame.zoom #unoDiscard .uno-card.discard-in { animation-duration: 0.15s; }
#unoGame.zoom .uno-swap-fx.show { animation-duration: 0.38s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.6) rotate(var(--r, 0deg)); }
  to { opacity: 1; transform: translateY(var(--y, 0px)) scale(1) rotate(var(--r, 0deg)); }
}
@keyframes discardIn {
  0% { opacity: 0; transform: translateY(56px) scale(1.18) rotate(-9deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* actions */
#unoPassBtn {
  background: linear-gradient(180deg, #5b352b, #3a1f19);
  border-color: rgba(247, 239, 217, 0.5);
  box-shadow: 0 4px 0 #1a0c09, 0 8px 18px rgba(0, 0, 0, 0.35);
  animation: passPulse 2.8s ease-in-out infinite;
}
@keyframes passPulse {
  0%, 100% { box-shadow: 0 4px 0 #1a0c09, 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(242, 209, 107, 0.28); }
  50% { box-shadow: 0 4px 0 #1a0c09, 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(242, 209, 107, 0); }
}

/* ============================================================
   Color picker
   ============================================================ */
#unoColorPicker {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 7, 6, 0.26);
  backdrop-filter: blur(2px) saturate(1.05);
  animation: fadeIn 0.15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ucp-box {
  position: relative;
  width: calc(100% - 8px);
  max-width: 540px;
  padding: 26px 30px 22px;
  border-radius: 28px;
  text-align: center;
  color: var(--ink-700);
  background: linear-gradient(180deg, #fcf6e7, #efdfbf);
  border: 3px solid #fffaf0;
  box-shadow: 0 0 0 3px rgba(214, 71, 58, 0.45), 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  animation: popIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}
@keyframes popIn {
  from { transform: scale(0.82) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.ucp-kicker { font-family: var(--font-display); font-size: 10px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-600); }
.ucp-title { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--ink-700); margin: 4px 0 18px; letter-spacing: -0.01em; }
.ucp-colors { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ucp-c {
  position: relative;
  width: 94px;
  height: 126px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 16px;
  background: var(--cream-50);
  border: 3px solid var(--cream-300);
  color: var(--ink-700);
  box-shadow: 0 4px 0 rgba(120, 80, 40, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  text-shadow: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ucp-c:hover:not(:disabled) {
  transform: translateY(-6px) rotate(-1.5deg);
  border-color: var(--gold-600);
  box-shadow: 0 10px 0 rgba(120, 80, 40, 0.10), 0 18px 28px rgba(0, 0, 0, 0.28), inset 0 0 0 1px #fff;
}
.ucp-swatch {
  width: 48px;
  height: 60px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, 0 5px 12px rgba(0, 0, 0, 0.22);
}
.ucp-c.red .ucp-swatch { background: radial-gradient(circle at 35% 30%, #f0796b, #d6473a 58%, #a52920); }
.ucp-c.yellow .ucp-swatch { background: radial-gradient(circle at 35% 30%, #ffe27a, #edb821 58%, #b5820a); }
.ucp-c.green .ucp-swatch { background: radial-gradient(circle at 35% 30%, #73d99d, #2f9e5b 58%, #1a6b3b); }
.ucp-c.blue .ucp-swatch { background: radial-gradient(circle at 35% 30%, #7bb3ff, #2f6fbf 58%, #1b4585); }
.ucp-n { font-family: var(--font-display); font-size: 11px; font-weight: 900; color: var(--ink-700); }
.ucp-key { position: absolute; top: 5px; right: 8px; font-size: 9px; font-weight: 900; color: var(--brown-muted); opacity: 0.7; }
.ucp-hint { margin-top: 16px; font-size: 11.5px; font-weight: 700; line-height: 1.45; color: var(--brown-muted); }

/* ============================================================
   Mode picker
   ============================================================ */
#modeModal {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 7, 6, 0.74);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.15s;
}
.mode-box {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: 26px 30px 20px;
  border-radius: 28px;
  text-align: center;
  color: var(--ink-700);
  background: linear-gradient(180deg, #fcf6e7, #efdfbf);
  border: 3px solid #fffaf0;
  box-shadow: 0 0 0 3px rgba(214, 71, 58, 0.45), 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  animation: popIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}
.mode-kicker {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-600);
}
.mode-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink-700);
  margin: 4px 0 4px;
  letter-spacing: -0.01em;
}
.mode-room {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 12px;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  color: var(--ink-700);
  background: #fffdf7;
  border: 2px solid #c9b185;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(74, 42, 34, .1);
  min-height: 16px;
}
.mode-room::placeholder { color: #b0977a; font-weight: 700; }
.mode-room:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(214, 71, 58, .18); }
.mode-room b { color: var(--red-600); }
.mode-players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.mode-players-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown-muted);
}
.mode-sizes { display: flex; gap: 6px; }
.mode-size {
  width: 40px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  background: var(--cream-50);
  border: 2px solid var(--cream-300);
  color: var(--ink-700);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(120, 80, 40, 0.14);
  text-shadow: none;
}
.mode-size:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--gold-600);
  box-shadow: 0 5px 0 rgba(120, 80, 40, 0.10);
}
.mode-size.active {
  background: linear-gradient(180deg, #e25747, #c0392f);
  border-color: #fff6e4;
  color: #fff6e4;
  box-shadow: 0 3px 0 #7f251e;
}
.mode-note {
  font-size: 11px;
  font-weight: 700;
  color: var(--brown-muted);
  margin-bottom: 12px;
  min-height: 15px;
}
.mode-options {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mode-card {
  position: relative;
  width: 290px;
  min-height: 176px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border-radius: 18px;
  background: var(--cream-50);
  border: 3px solid var(--cream-300);
  color: var(--ink-700);
  box-shadow: 0 5px 0 rgba(120, 80, 40, 0.14), 0 14px 26px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  text-shadow: none;
  white-space: normal;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mode-card:hover:not(:disabled) {
  transform: translateY(-6px) rotate(-0.8deg);
  border-color: var(--gold-600);
  box-shadow: 0 11px 0 rgba(120, 80, 40, 0.10), 0 20px 32px rgba(0, 0, 0, 0.24), inset 0 0 0 1px #fff;
}
.mode-card .mode-emoji {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 1px;
}
.mode-card b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}
.mode-card .mode-desc {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--brown-muted);
  max-width: 240px;
}
.mode-card .mode-key {
  position: absolute;
  top: 8px;
  right: 11px;
  font-size: 9px;
  font-weight: 900;
  color: var(--brown-muted);
  opacity: 0.65;
}
.mode-card.zoom {
  border-color: var(--gold-600);
  background: linear-gradient(165deg, #fff9e7, #f3e1ae);
}
.mode-card.zoom .mode-emoji { filter: drop-shadow(0 2px 0 rgba(120, 80, 40, 0.2)); }
.mode-cancel {
  background: transparent;
  border: 2px solid transparent;
  box-shadow: none;
  color: var(--brown-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  text-shadow: none;
  padding: 8px 16px;
}
.mode-cancel:hover:not(:disabled) {
  color: var(--red-600);
  background: rgba(214, 71, 58, 0.07);
  box-shadow: none;
  transform: none;
}

@media (max-width: 620px) {
  .mode-box { padding: 22px 18px 16px; }
  .mode-title { font-size: 24px; }
  .mode-options { flex-direction: column; align-items: stretch; }
  .mode-card { width: 100%; min-height: 0; }
  .mode-card .mode-desc { max-width: none; }
}

/* ============================================================
   Settings
   ============================================================ */
#settingsBtn { background: linear-gradient(180deg, #5b352b, #3a1f19); }
#settingsModal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 7, 6, 0.70);
  backdrop-filter: blur(9px);
  animation: fadeIn 0.15s;
}
.set-box {
  position: relative;
  width: 100%;
  max-width: 370px;
  padding: 24px 28px 22px;
  border-radius: 28px;
  color: var(--ink-700);
  background: linear-gradient(180deg, #fcf6e7, #efdfbf);
  border: 3px solid #fffaf0;
  box-shadow: 0 0 0 3px rgba(214, 71, 58, 0.45), 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  animation: popIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}
.set-kicker { font-family: var(--font-display); font-size: 10px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-600); text-align: center; }
.set-title { font-family: var(--font-display); font-size: 25px; font-weight: 900; letter-spacing: -0.01em; text-align: center; color: var(--ink-700); margin: 3px 0 22px; }
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-600);
  margin-bottom: 20px;
  cursor: pointer;
}
.set-note { font-size: 11px; font-weight: 700; color: var(--brown-muted); text-align: center; margin: 2px 0 16px; }
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw-slider {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: var(--cream-300);
  border: 2px solid #c9b185;
  transition: background 0.2s, border-color 0.2s;
}
.sw-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream-50);
  border: 1.5px solid #c9b185;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background 0.2s;
}
.switch input:checked + .sw-slider { background: var(--red); border-color: var(--red-700); }
.switch input:checked + .sw-slider::before { transform: translateX(20px); background: #fff6e4; border-color: #fff6e4; }
#settingsClose {
  width: 100%;
  padding: 11px 16px;
  background: linear-gradient(180deg, #e25747, #c0392f);
}

.vol-wrap { display: flex; align-items: center; gap: 10px; }
.vol-wrap input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--cream-300);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  outline: none;
  cursor: pointer;
}
.vol-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff6e4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.vol-wrap input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff6e4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#volumeVal { width: 42px; text-align: right; flex: none; font-size: 12.5px; font-weight: 800; color: var(--brown-muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   Scrollbars
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.20); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: rgba(242, 209, 107, 0.32); border-radius: 8px; border: 2px solid rgba(0, 0, 0, 0.18); }
::-webkit-scrollbar-thumb:hover { background: rgba(242, 209, 107, 0.55); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1160px) {
  #lobby { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lobby-hero { grid-column: 1 / -1; }
  #lobby > .panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  #unoSides {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: auto;
  }
  #unoSides .uno-opp-slot {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 150px;
    flex: 0 1 150px;
  }
}
@media (max-width: 880px) {
  #unoTable { --card-w: 82px; padding: 18px 20px 16px; border-width: 12px; border-radius: 42px; }
  #unoCenter { gap: 24px; padding: 16px 22px 18px; }
  .uno-act-visual { width: 60px; height: 60px; }
  .uno-act-ring { width: 60px; height: 60px; }
  .uno-status { min-width: 210px; font-size: 13px; }
  .uno-opp { padding-right: 13px; }
}
@media (max-width: 760px) {
  #topbar { padding: 10px 14px; gap: 10px; }
  .conn { width: 100%; justify-content: flex-start; }
  .conn input { flex: 1 1 190px; width: auto; min-width: 0; }
  #lobby { grid-template-columns: 1fr; padding: 20px 14px 36px; gap: 14px; }
  #lobby > .panel:last-child { grid-column: auto; }
  .lobby-hero { align-items: flex-start; gap: 14px; }
  .hero-chips { padding-bottom: 0; }
  #unoGame { padding: 16px 10px 26px; }
  #unoTable { --card-w: 72px; padding: 14px 14px 14px; border-width: 10px; border-radius: 34px; gap: 11px; }
  #unoTable::before { border-radius: 24px; inset: 5px; }
  #unoTop { gap: 8px; }
  .uno-opponents { gap: 6px; }
  .uno-opp-slot { min-width: 120px; flex-basis: 150px; }
  .uno-opp { padding: 7px 10px 7px 7px; gap: 8px; }
  .uno-opp-dot { width: 36px; height: 36px; font-size: 15px; }
  .uno-opp-name { font-size: 13.5px; max-width: 110px; }
  .uno-status { min-width: 0; padding: 9px 16px 11px; font-size: 12.5px; }
  #unoCenter { width: 100%; gap: 18px; padding: 14px 16px 16px; }
  .uno-act-visual { width: 54px; height: 54px; }
  .uno-act-ring { width: 54px; height: 54px; }
  .uno-act-name { font-size: 12.5px; }
  #unoHand { padding: 30px 8px 8px; min-height: calc(var(--card-h) + 30px); }
  #unoHand::before { left: 12px; top: 8px; }
  .uno-me { padding: 6px 14px 6px 7px; gap: 9px; }
  .uno-me-dot { width: 34px; height: 34px; font-size: 15px; }
  #unoMeName { font-size: 13.5px; max-width: 180px; }
  .uno-emotes { gap: 5px; margin-left: 0; }
  .uno-emote-btn { width: 30px; height: 30px; font-size: 14px; }
  .ucp-box { padding: 22px 18px 18px; }
  .ucp-title { font-size: 22px; }
  .ucp-c { width: 76px; height: 106px; }
  .ucp-swatch { width: 40px; height: 50px; }
  .ucp-colors { gap: 9px; }
  .set-box { padding: 22px 20px 18px; }
  .vol-wrap input[type="range"] { width: 120px; }
}
@media (max-width: 480px) {
  .brand-name { font-size: 15px; }
  .brand-logo { width: 34px; height: 46px; }
  .brand-logo b { font-size: 9px; }
  .conn button { padding: 8px 11px; font-size: 12.5px; }
  #settingsBtn::before { display: none; }
  .lobby-hero h1 { font-size: 28px; }
  #unoTable { --card-w: 64px; }
  .uno-opp-count-label { display: none; }
  .uno-status::before { display: none; }
  .uno-deck-label { font-size: 9px; letter-spacing: 0.1em; }
  #unoDeckBtn { padding: 9px 13px; font-size: 12px; }
  .ucp-c { width: 66px; height: 96px; }
  .ucp-swatch { width: 34px; height: 44px; }
  .ucp-n { font-size: 10px; }
}

@media (min-width: 1500px) and (min-height: 900px) {
  #unoTable { --card-w: 108px; --opp-card-w: 72px; }
  #unoCenter { gap: 44px; }
}
@media (min-width: 1800px) and (min-height: 1000px) {
  #unoTable { --card-w: 124px; --opp-card-w: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- счёт побед в комнате ---------- */
.uno-opp-wins{display:inline-block;margin-left:6px;font-family:var(--font-display);font-size:11.5px;font-weight:900;color:#ffe08a;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.uno-me-wins{margin-left:8px;font-family:var(--font-display);font-size:12px;font-weight:900;color:#ffe08a;text-shadow:0 1px 0 rgba(0,0,0,.5)}

/* ---------- игроки в списке комнат и название комнаты ---------- */
.rplayers{margin-top:3px;font-size:12px;font-weight:800;color:var(--brown-soft,#6b4a36);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rplayers.empty{color:var(--brown-muted,#8a6a4a);opacity:.75;font-style:italic;font-weight:700}
.uno-room-name{
  position:absolute;top:10px;left:18px;z-index:9;max-width:60%;
  padding:3px 10px;border-radius:999px;
  background:rgba(26,13,9,.55);backdrop-filter:blur(2px);
  font-family:var(--font-display);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,239,217,.62);text-shadow:0 1px 0 rgba(0,0,0,.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
}


/* ---------- GG CLUB: выбор игры и бильярд ---------- */
.mode-game{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mode-games{display:flex;gap:6px;background:var(--cream-300);padding:4px;border-radius:12px}
.mode-gbtn{border:none;background:none;padding:8px 14px;border-radius:9px;font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--brown-soft);cursor:pointer}
.mode-gbtn.active{background:linear-gradient(180deg,#e25747,#c0392f);color:#fff6e4;box-shadow:0 3px 0 #7f251e}
.mode-gbtn:hover:not(.active){color:var(--ink-700)}

#poolGame{display:flex;flex-direction:column;gap:12px;padding:16px clamp(10px,2vw,26px) 26px;max-width:1200px;margin:0 auto;width:100%}
.pool-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pool-leave{background:linear-gradient(180deg,#5b352b,#3a1f19);border:2px solid rgba(247,239,217,.5);color:#f7efd9;border-radius:10px;padding:8px 14px;font-weight:800;cursor:pointer;font-family:var(--font-display)}
.pool-players{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.pool-player{padding:6px 14px;border-radius:999px;background:rgba(74,42,34,.85);border:2px solid rgba(247,239,217,.25);font-family:var(--font-display);font-weight:900;font-size:13px;color:#f7efd9}
.pool-player.active{border-color:#ffd166;box-shadow:0 0 12px rgba(255,209,102,.5);color:#ffe9b8}
.pool-status{font-family:var(--font-display);font-weight:800;font-size:13px;color:#ffe9b8;min-width:180px;text-align:center}
.pool-board{position:relative;background:linear-gradient(180deg,#2a1611,#1c0e0a);border-radius:22px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
#poolCanvas{display:block;width:100%;height:auto;border-radius:16px;touch-action:none;cursor:crosshair}
.pool-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--font-display);font-weight:800;font-size:12.5px;color:#ffe9b8;background:rgba(20,10,8,.6);padding:4px 12px;border-radius:999px;pointer-events:none}
.pool-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:#cfe6d4;font-size:12.5px}
.pool-power{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800}
.pool-power-bar{width:180px;height:10px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.pool-power-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7ce38b,#ffd166,#f2695b);transition:width .06s}
.pool-tip{opacity:.75}




/* ---------- список комнат: аккуратная раскладка ---------- */
.room-row{display:flex;align-items:center;gap:12px;padding:12px 14px;flex-wrap:nowrap}
.room-row .rinfo{flex:1 1 auto;min-width:0}
.room-row > button{flex:0 0 auto;min-width:96px}
.rline1{display:flex;align-items:center;gap:8px;min-width:0}
.rname,.rtype,.rnametext{min-width:0}
.rtype{flex:0 0 auto;font-size:10.5px;font-weight:900;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:#f2e3c8;color:#8a5b2a;white-space:nowrap}
.rtype.pool{background:#e2efe0;color:#2f6b3f}
.rnametext{font-family:var(--font-display);font-weight:900;font-size:15px;color:#3a1f19;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsub{font-size:11.5px;font-weight:700;color:#8a6a4a;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rplayers{font-size:12px;font-weight:800;color:#5d3a24;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rplayers.empty{color:#a08a72;font-weight:700;font-style:italic}

/* ---------- бросок торта ---------- */
.uno-opp-dot, .uno-me-dot { position: relative; }
.uno-pie-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:8px;padding:2px 7px;border-radius:999px;cursor:pointer;
  font-size:12px;line-height:1.5;
  background:linear-gradient(180deg,#f9cfdc,#ec9bb0);
  border:1.5px solid rgba(255,255,255,.7);
  box-shadow:0 2px 0 rgba(120,60,80,.45);
  transition:transform .1s, filter .1s;
}
.uno-pie-btn:hover{filter:brightness(1.08)}
.uno-pie-btn:active{transform:translateY(2px);box-shadow:none}
.uno-pie-fly{
  position:fixed;z-index:9999;font-size:34px;line-height:1;pointer-events:none;
  will-change:transform;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));
}
.uno-pie-splat{
  position:fixed;z-index:9999;transform:translate(-50%,-50%);
  font-size:46px;pointer-events:none;animation:pieSplat .9s ease-out forwards;
}
@keyframes pieSplat{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-20deg)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(6deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(0)}
}
.uno-opp.caked .uno-opp-dot::after, .uno-me.caked .uno-me-dot::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #fffdf5 0%, #ffe6c7 48%, rgba(255,255,255,0) 72%);
  animation:pieFace 2.4s ease-out forwards;pointer-events:none;
}
@keyframes pieFace{
  0%{opacity:0;transform:scale(.6)}
  12%{opacity:1;transform:scale(1.05)}
  75%{opacity:.85}
  100%{opacity:0;transform:scale(1.1)}
}

.uno-pie-btn:disabled{opacity:.45;cursor:default;filter:grayscale(.3)}
.uno-pie-bit{
  position:fixed;z-index:9999;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%, #fffdf5, #ffe6c7 60%, #f6d3a6 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}

/* ---------- обмен руками (3-4 игрока) ---------- */
.uno-swap-fly{
  position:fixed;z-index:9998;width:26px;height:38px;border-radius:6px;pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.22) 0 6px, transparent 7px),
    linear-gradient(160deg,#c0392f,#8e241d 55%,#5c1512);
  border:2px solid #fff6e4;
  box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.18);
}
.uno-swap-fly::before{
  content:'UNO';position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:8px;
  color:rgba(255,246,228,.9);transform:rotate(-18deg);
}

.uno-pie-fly{font-size:38px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.uno-pie-blob{
  position:fixed;z-index:9998;width:80px;height:80px;margin:-40px 0 0 -40px;
  border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 42% 38%, #fffdf7 0 20%, #ffeccd 44%, #f7d9ae 60%, rgba(247,217,174,0) 72%),
    radial-gradient(circle at 72% 68%, #ffe3bd 0 16%, rgba(255,227,189,0) 28%);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
  animation:pieBlob .95s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes pieBlob{
  0%{opacity:0;transform:scale(.3) rotate(-8deg)}
  18%{opacity:1;transform:scale(1.15) rotate(3deg)}
  55%{opacity:.95;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(1.4) rotate(0)}
}

/* ---------- смена направления ---------- */
.uno-reverse-fx{
  position:absolute;inset:0;display:grid;place-items:center;z-index:30;pointer-events:none;
  animation:urfFade 1.5s ease-out forwards;
}
.uno-reverse-fx .urf-ring{
  position:absolute;width:220px;height:220px;border-radius:50%;
  border:3px solid rgba(255,209,102,.75);
  box-shadow:0 0 40px rgba(255,209,102,.45), inset 0 0 30px rgba(255,209,102,.25);
  animation:urfRing 1.2s cubic-bezier(.2,.7,.3,1) forwards;
}
.uno-reverse-fx .urf-arrow{
  font-family:var(--font-display);font-weight:900;font-size:120px;line-height:1;
  color:#ffd166;text-shadow:0 0 26px rgba(255,209,102,.85), 0 8px 18px rgba(0,0,0,.45);
  animation:urfSpin 1.1s cubic-bezier(.2,.8,.3,1) forwards;
}
.uno-reverse-fx .urf-text{
  position:absolute;bottom:22%;
  font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:.2em;
  color:#fff6e4;text-shadow:0 3px 10px rgba(0,0,0,.65);
  animation:urfText 1.4s ease-out forwards;
}
@keyframes urfFade{0%{opacity:0}10%{opacity:1}78%{opacity:1}100%{opacity:0}}
@keyframes urfSpin{
  0%{transform:scale(.4) rotate(-140deg);opacity:0}
  35%{transform:scale(1.18) rotate(160deg);opacity:1}
  70%{transform:scale(1) rotate(330deg)}
  100%{transform:scale(1.06) rotate(400deg);opacity:.9}
}
@keyframes urfRing{
  0%{transform:scale(.25);opacity:0}
  25%{opacity:.95}
  100%{transform:scale(1.7);opacity:0}
}
@keyframes urfText{
  0%{opacity:0;transform:translateY(12px)}
  22%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-8px)}
}
.uno-swap-fly{width:30px;height:44px}

/* направление: по часовой / против */
.uno-reverse-fx.dir-cw .urf-arrow { animation-name: urfSpinCw; }
.uno-reverse-fx.dir-ccw .urf-arrow { animation-name: urfSpinCcw; }
.uno-reverse-fx.dir-ccw .urf-ring { border-color: rgba(255,209,102,.75); }
@keyframes urfSpinCw {
  0%{transform:scale(.4) rotate(-140deg);opacity:0}
  35%{transform:scale(1.18) rotate(150deg);opacity:1}
  70%{transform:scale(1) rotate(320deg)}
  100%{transform:scale(1.06) rotate(400deg);opacity:.9}
}
@keyframes urfSpinCcw {
  0%{transform:scale(.4) rotate(140deg);opacity:0}
  35%{transform:scale(1.18) rotate(-150deg);opacity:1}
  70%{transform:scale(1) rotate(-320deg)}
  100%{transform:scale(1.06) rotate(-400deg);opacity:.9}
}

.uno-opp-slot.done .uno-opp{opacity:.62;filter:grayscale(.35)}
.uno-opp-slot.done .uno-opp-count-label{color:#ffd166}
.uno-opp-slot.done .uno-opp-name::after{content:' 🏁';font-size:12px}

.js-err{position:fixed;left:12px;bottom:12px;z-index:99999;max-width:60vw;background:#7d1f1a;color:#fff6e4;
  padding:8px 12px;border-radius:10px;font:12px/1.45 Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.5)}

/* ---------- бильярд: табло шаров ---------- */
.pool-racks{display:flex;flex-direction:column;gap:4px;margin:8px 0 0}
.rack-row{display:flex;align-items:center;gap:4px;min-height:18px;flex-wrap:wrap}
.rack-label{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#c9b79c;min-width:70px}
.rack-ball{
  display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--c,#ccc);color:#fff;font-size:9.5px;font-weight:900;font-style:normal;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
  transition:opacity .2s, filter .2s;
}
.rack-ball.eight{background:#1b1b1b}
.rack-ball.potted{opacity:.22;filter:grayscale(.8)}

.pool-head{flex-wrap:wrap}
.pool-racks{flex:1 1 100%;width:100%;margin-top:6px}

.pool-racks{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.rack-row{flex:0 1 auto;gap:5px}
#poolRack1{justify-content:flex-end}
.rack-label{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#e7d8bd;min-width:auto;margin-right:4px}
.rack-none{font-size:11px;font-weight:700;font-style:italic;color:#a08a72}
.rack-ball{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--c,#ccc)}
.rack-ball.stripe{background:linear-gradient(#f9f6ee 0 21%, var(--c) 21% 79%, #f9f6ee 79% 100%)}
.rack-ball.eight{background:#1b1b1b}
.rack-ball b{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#fffdf7;color:#1b1b1b;font-size:9.5px;font-weight:900;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.rack-ball.potted{opacity:.22;filter:grayscale(.9)}

.pool-racks{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;flex:1 1 100%;gap:14px}
#poolRack0{justify-content:flex-start}
#poolRack1{justify-content:flex-end;margin-left:auto}
.rack-row{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.pool-board{touch-action:none}
#poolGame{touch-action:none}

.pool-racks{display:flex;justify-content:space-between;align-items:center;width:100%;gap:14px;margin:8px 0 4px}
#poolRack0{justify-content:flex-start;margin-right:auto}
#poolRack1{justify-content:flex-end;margin-left:auto}

.stats-tabs{display:flex;gap:8px;margin:0 0 10px}
.stats-tab{
  flex:1;padding:7px 10px;border-radius:10px;cursor:pointer;font-family:var(--font-display);
  font-weight:900;font-size:12.5px;letter-spacing:.02em;
  background:#f6ead2;border:2px solid rgba(122,75,49,.25);color:#7a5a3a;
  transition:transform .08s, background .15s, color .15s;
}
.stats-tab:hover{background:#f9f0dd}
.stats-tab.active{background:linear-gradient(180deg,#f0b429,#d98e0b);border-color:#b8730a;color:#3a1f19;box-shadow:0 3px 0 rgba(120,60,20,.35)}
.stats-tab:active{transform:translateY(1px)}