/* UNO table — 360 × 800 Figma frame. */
html body[data-view="uno"][data-uno-state="playing"],
html body[data-view="uno"][data-uno-state="settled"] {
  overflow: hidden !important;
}

html body[data-view="uno"][data-uno-state="playing"] .app-shell,
html body[data-view="uno"][data-uno-state="settled"] .app-shell {
  width: 360px !important;
  min-height: 800px !important;
  padding: 0 !important;
}

html body[data-view="uno"][data-uno-state="playing"] #view-uno,
html body[data-view="uno"][data-uno-state="settled"] #view-uno,
html body[data-view="uno"][data-uno-state="playing"] .uno-game,
html body[data-view="uno"][data-uno-state="settled"] .uno-game {
  width: 360px !important;
  height: 800px !important;
  min-height: 800px !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

html body[data-view="uno"][data-uno-state="playing"] .uno-game,
html body[data-view="uno"][data-uno-state="settled"] .uno-game {
  position: relative !important;
  padding: 70px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-view="uno"][data-uno-state="playing"] .figma-game-topbar,
html body[data-view="uno"][data-uno-state="settled"] .figma-game-topbar {
  top: 0 !important;
  left: 16px !important;
  width: 328px !important;
  height: 50px !important;
  grid-template-columns: 44px 1fr 69px !important;
}

html body[data-view="uno"][data-uno-state="playing"] .figma-game-topbar > strong,
html body[data-view="uno"][data-uno-state="settled"] .figma-game-topbar > strong {
  color: #ffbb00 !important;
  font: 600 18px/18px Montserrat, "Open Sans", sans-serif !important;
}

html body[data-view="uno"][data-uno-state="playing"] .figma-game-balance,
html body[data-view="uno"][data-uno-state="settled"] .figma-game-balance {
  width: 69px !important;
  height: 32px !important;
  padding: 4px 4px 4px 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  background: #1e2225 !important;
  font: 600 14px/22px "Open Sans", sans-serif !important;
}

html body[data-view="uno"][data-uno-state="playing"] .figma-game-balance::before,
html body[data-view="uno"][data-uno-state="settled"] .figma-game-balance::before {
  top: 3px !important;
  left: 4px !important;
  width: 24px !important;
  height: 24px !important;
}

html body[data-view="uno"][data-uno-state="playing"] .rps-head,
html body[data-view="uno"][data-uno-state="settled"] .rps-head,
html body[data-view="uno"][data-uno-state="playing"] .uno-controls,
html body[data-view="uno"][data-uno-state="settled"] .uno-controls,
html body[data-view="uno"][data-uno-state="playing"] .uno-room-search,
html body[data-view="uno"][data-uno-state="settled"] .uno-room-search,
html body[data-view="uno"][data-uno-state="playing"] .uno-room-list,
html body[data-view="uno"][data-uno-state="settled"] .uno-room-list,
html body[data-view="uno"][data-uno-state="playing"] #uno-invite-panel,
html body[data-view="uno"][data-uno-state="settled"] #uno-invite-panel,
html body[data-view="uno"][data-uno-state="playing"] #uno-message,
html body[data-view="uno"][data-uno-state="settled"] #uno-message,
html body[data-view="uno"][data-uno-state="playing"] .uno-color-choice,
html body[data-view="uno"][data-uno-state="settled"] .uno-color-choice,
html body[data-view="uno"][data-uno-state="playing"] .uno-current,
html body[data-view="uno"][data-uno-state="settled"] .uno-current {
  display: none !important;
}

html body[data-view="uno"][data-uno-state="playing"] .uno-table,
html body[data-view="uno"][data-uno-state="settled"] .uno-table {
  position: relative !important;
  width: 360px !important;
  height: 730px !important;
  min-height: 730px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-players {
  position: absolute !important;
  top: 0 !important;
  left: 16px !important;
  z-index: 5 !important;
  display: grid !important;
  width: 328px !important;
  height: 145px !important;
  min-height: 145px !important;
  grid-template-columns: repeat(3, 104px) !important;
  gap: 8px !important;
  align-items: start !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player {
  position: relative !important;
  display: grid !important;
  width: 104px !important;
  min-width: 104px !important;
  height: 145px !important;
  justify-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player .seat-avatar {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
  border: 2px solid #939ba2 !important;
  border-radius: 50% !important;
  background: #1e2225 url("/assets/figma/rps-scissors.svg") center / 22px 22px no-repeat !important;
  filter: grayscale(1) brightness(0.68);
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player.turn .seat-avatar {
  border-color: #ffbb00 !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player .seat-avatar img {
  display: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player .seat-copy {
  position: absolute !important;
  top: 48px !important;
  left: 0 !important;
  z-index: 4 !important;
  width: 104px !important;
  height: 20px !important;
  margin-top: 4px !important;
  display: block !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player .seat-name {
  display: block !important;
  width: 104px !important;
  overflow: hidden !important;
  color: #939ba2 !important;
  font: 400 12px/145% "Open Sans", sans-serif !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player.turn .seat-name {
  color: #f5b041 !important;
  font-weight: 600 !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player .seat-meta,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-player .seat-title {
  display: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-opponent-hand {
  position: absolute !important;
  top: 69px !important;
  left: 0 !important;
  display: flex !important;
  width: 104px !important;
  height: 80px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back {
  width: 36px !important;
  height: 56px !important;
  flex: 0 0 36px !important;
  margin-left: -25px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/uno/uno_cards_sorted/action_cards/card_back.svg") center / contain no-repeat !important;
  box-shadow: none !important;
  transform-origin: 50% 50% !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back:first-child {
  margin-left: 0 !important;
  transform: rotate(164deg) translateY(-2px) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back:nth-child(2) {
  transform: rotate(170deg) translateY(-6px) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back:nth-child(3) {
  transform: rotate(176deg) translateY(-9px) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back:nth-child(4) {
  transform: rotate(-178deg) translateY(-10px) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back:nth-child(5) {
  transform: rotate(-172deg) translateY(-9px) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back:nth-child(6) {
  transform: rotate(-166deg) translateY(-6px) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card-back:nth-child(7) {
  transform: rotate(-162deg) translateY(-2px) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center {
  position: absolute !important;
  top: 145px !important;
  left: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  width: 360px !important;
  height: 390px !important;
  min-height: 390px !important;
  grid-template-columns: 100px 160px 100px !important;
  align-items: start !important;
  overflow: visible !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center::before,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center::after {
  position: absolute;
  z-index: 0;
  width: 92px;
  height: 103px;
  background: url("/assets/icons/uno-turn-arrow.svg") center / contain no-repeat;
  content: "";
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center::before {
  top: -42px;
  right: 20px;
  transform: rotate(180deg);
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center::after {
  bottom: 84px;
  left: 20px;
  transform: none;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck {
  position: relative !important;
  z-index: 2 !important;
  width: 88px !important;
  height: 137px !important;
  margin: -24px 0 0 -45px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/uno/uno_cards_sorted/action_cards/card_back.svg") center / contain no-repeat !important;
  box-shadow: none !important;
  transform: rotate(42deg) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck::before,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  content: "";
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck::before {
  transform: translate(4px, 4px);
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck::after {
  transform: translate(7px, 7px);
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck span,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck small {
  display: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center > .uno-card {
  position: relative !important;
  z-index: 3 !important;
  width: 100px !important;
  height: 175px !important;
  margin: 46px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  isolation: isolate !important;
  transform: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-discard::before,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-discard::after {
  display: none !important;
  content: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card::before,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card::after,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card > span,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card > strong,
html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-card > small {
  display: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-discard > .uno-discard-card-layer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 115px !important;
  height: 185px !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--uno-discard-layer-image) center / contain no-repeat !important;
  opacity: 1 !important;
  transform: translate(var(--uno-discard-layer-x, 0), var(--uno-discard-layer-y, 0)) rotate(var(--uno-discard-layer-angle, 0deg)) !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand {
  position: absolute !important;
  right: 16px !important;
  bottom: 44px !important;
  left: 16px !important;
  z-index: 7 !important;
  display: flex !important;
  width: 328px !important;
  height: 200px !important;
  min-height: 200px !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand .uno-card {
  position: relative !important;
  z-index: var(--uno-card-z, 1) !important;
  width: 100px !important;
  height: 156px !important;
  min-width: 100px !important;
  flex: 0 0 100px !important;
  margin: 0 0 0 calc(var(--uno-card-overlap, 70px) * -1) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--uno-card-image) center / contain no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: rotate(var(--uno-card-angle, 0deg)) translateY(var(--uno-card-lift, 0px)) !important;
  transform-origin: 50% 110% !important;
  touch-action: none;
  transition: transform 180ms ease, filter 160ms ease, opacity 160ms ease !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand .uno-card:disabled {
  pointer-events: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand .uno-card:first-child {
  margin-left: 0 !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand.is-crowded {
  justify-content: center !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand.is-crowded .uno-card {
  margin-left: calc(var(--uno-card-overlap, 92px) * -1) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand.is-crowded .uno-card:first-child {
  margin-left: 0 !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand .uno-card.dragging {
  z-index: 999 !important;
  transform: translate(var(--uno-drag-x, 0), var(--uno-drag-y, 0)) rotate(0deg) scale(1.04) !important;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
  transition: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-discard.uno-drop-ready {
  filter: brightness(1.16) drop-shadow(0 0 18px rgba(255, 187, 0, 0.85));
  transform: scale(1.04) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-actions {
  position: absolute !important;
  right: 16px !important;
  bottom: 0 !important;
  left: 16px !important;
  z-index: 10 !important;
  display: grid !important;
  width: 328px !important;
  height: 44px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
  background: #080a0b !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-actions .uno-call-button {
  display: none !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-pass {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 160px !important;
  height: 44px !important;
  border: 1px solid #ffbb00 !important;
  border-radius: 10px !important;
  background: #080a0b !important;
  color: #f5b041 !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
  opacity: 1 !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-draw {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 160px !important;
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  color: #080a0b !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
}

.uno-motion-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
}

.uno-motion-card {
  position: fixed;
  width: 78px;
  height: 122px;
  border-radius: 8px;
  background: var(--uno-motion-image) center / contain no-repeat;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
  will-change: transform, opacity;
}

.uno-motion-card.card-back {
  --uno-motion-image: url("/assets/uno/uno_cards_sorted/action_cards/card_back.svg");
}

html body.uno-motion-lock[data-view="uno"] #view-uno #uno-draw,
html body.uno-motion-lock[data-view="uno"] #view-uno #uno-pass,
html body.uno-motion-lock[data-view="uno"] #view-uno #uno-call {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: #51585c !important;
  color: rgba(248, 249, 250, 0.55) !important;
  opacity: 1 !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .uno-motion-card {
    transition: none !important;
  }

  html body[data-view="uno"] #view-uno .uno-hand,
  html body[data-view="uno"] #view-uno .uno-hand .uno-card {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* UNO INTRO — Figma lobby fix */

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) {
  overflow: hidden !important;
  background-color: #080a0b !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) .app-shell {
  width: 360px !important;
  min-height: 800px !important;
  height: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) .uno-game {
  position: relative !important;
  display: block !important;
  width: 360px !important;
  height: 800px !important;
  min-height: 800px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* затемнение поверх паттерна, как bg opacity 0.5 в Figma */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) .uno-game::before {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  background: #181818 !important;
  content: "" !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* всё содержимое выше затемнения */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) .uno-game > * {
  position: relative !important;
  z-index: 1 !important;
}

/* topbar / крестик */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-topbar {
  position: absolute !important;
  z-index: 10 !important;
  top: 8px !important;
  right: 16px !important;
  left: auto !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-topbar > strong,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-balance {
  display: none !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-back-button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: url("/assets/icons/close-circle.svg") center / 23px 24px no-repeat !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-back-button::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-back-button::after {
  display: none !important;
  content: none !important;
}

/* интро-блок */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro {
  position: absolute !important;
  z-index: 2 !important;
  top: 88px !important;
  left: 16px !important;
  display: flex !important;
  width: 328px !important;
  height: 356px !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* glow за картинкой */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro::after {
  position: absolute !important;
  z-index: -1 !important;
  top: 115px !important;
  width: 165px !important;
  height: 165px !important;
  border-radius: 50% !important;
  content: "" !important;
  filter: blur(40px) !important;
  pointer-events: none !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro::before {
  left: 57px !important;
  background: rgba(245, 176, 65, 0.4) !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro::after {
  left: 106px !important;
  background: rgba(65, 143, 245, 0.4) !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro img {
  display: block !important;
  width: 260px !important;
  height: 260px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro h1 {
  display: flex !important;
  width: 328px !important;
  height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px 0 0 !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  background-clip: text !important;
  color: transparent !important;
  font: 700 40px/120% "Montserrat", "Open Sans", sans-serif !important;
  text-align: center !important;
  text-transform: capitalize !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro p {
  width: 328px !important;
  height: 24px !important;
  margin: 16px 0 0 !important;
  color: #f8f9fa !important;
  font: 600 18px/135% "Montserrat", "Open Sans", sans-serif !important;
  text-align: center !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-intro .figma-online-value {
  color: #f5b041 !important;
}

/* старую шапку игры и лишние блоки в intro/searching скрываем */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .rps-head,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-table,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-room-search,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-room-list,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-message,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-leave {
  display: none !important;
}

/* controls */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-controls {
  position: absolute !important;
  z-index: 3 !important;
  right: 16px !important;
  bottom: 16px !important;
  left: 16px !important;
  display: grid !important;
  width: 328px !important;
  height: auto !important;
  grid-template-columns: 44px 1fr 44px !important;
  grid-template-rows: 17px 44px 17px 44px 44px 44px !important;
  gap: 8px 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* labels */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-control-label {
  display: block !important;
  width: 328px !important;
  height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #d4d9de !important;
  font: 600 12px/145% "Open Sans", sans-serif !important;
  text-align: center !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-bet-label {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-players-label {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

/* placement */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players {
  grid-column: 1 !important;
  grid-row: 4 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-max-players {
  grid-column: 2 !important;
  grid-row: 4 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players {
  grid-column: 3 !important;
  grid-row: 4 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-join {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-intro-invite {
  grid-column: 1 / -1 !important;
  grid-row: 6 !important;
}

/* minus/plus buttons */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-step {
  position: relative !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: rgba(8, 10, 11, 0.48) !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players {
  border: 1px solid #f5b041 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players {
  border: 1px solid #575d62 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players::before {
  width: 12px !important;
  height: 1.5px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  content: "" !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet::after,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players::after {
  position: absolute !important;
  border-radius: 2px !important;
  background: #f5b041 !important;
  content: "" !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players::before {
  width: 12px !important;
  height: 1.5px !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet::after,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players::after {
  width: 1.5px !important;
  height: 12px !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet {
  color: #f5b041 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players {
  color: #575d62 !important;
}

/* fields */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-max-players {
  box-sizing: border-box !important;
  display: block !important;
  width: 232px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #f8f9fa !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  outline: none !important;
  font: 600 22px/130% "Montserrat", "Open Sans", sans-serif !important;
  text-align: center !important;
  appearance: none !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
}

/* coin inside bet field */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet {
  padding: 0 8px 0 34px !important;
  background-image: url("/assets/figma/coin-gold.webp") !important;
  background-repeat: no-repeat !important;
  background-position: calc(50% - 34px) center !important;
  background-size: 20px 20px !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet::-webkit-outer-spin-button,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* select without native ugly arrow */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-max-players {
  padding: 0 !important;
  background-image: none !important;
}

/* bottom buttons */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-join,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-intro-invite {
  display: flex !important;
  box-sizing: border-box !important;
  width: 328px !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-join {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #080a0b !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-intro-invite {
  border: 1px solid #f5b041 !important;
  color: #f5b041 !important;
  background: rgba(8, 10, 11, 0.48) !important;
}

/* UNO FIX: нормальное центрирование + и - */

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-step {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
}

/* общий сброс псевдоэлементов */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-step::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-step::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  content: "" !important;
  text-indent: 0 !important;
  pointer-events: none !important;
}

/* минус */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players::before {
  width: 12px !important;
  height: 1.5px !important;
  background: currentColor !important;
  transform: translate(-50%, -50%) !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet::after,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players::after {
  display: none !important;
  content: none !important;
}

/* плюс: горизонтальная палка */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet::before,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players::before {
  width: 12px !important;
  height: 1.5px !important;
  background: #f5b041 !important;
  transform: translate(-50%, -50%) !important;
}

/* плюс: вертикальная палка */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet::after,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players::after {
  width: 1.5px !important;
  height: 12px !important;
  background: #f5b041 !important;
  transform: translate(-50%, -50%) !important;
}

/* цвета минусов */
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet {
  color: #f5b041 !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players {
  color: #575d62 !important;
}

/* UNO FIX: убрать нативные стрелочки input number */

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
}

html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet::-webkit-outer-spin-button,
html body[data-view="uno"]:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet::-webkit-inner-spin-button {
  display: none !important;
  margin: 0 !important;
  opacity: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}