/* Rock Paper Scissors — active round, 360 × 800 Figma frame. */
html body[data-view="rps"][data-rps-state="playing"],
html body[data-view="rps"][data-rps-state="settled"] {
  overflow-x: hidden !important;
}

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

html body[data-view="rps"][data-rps-state="playing"] #view-rps,
html body[data-view="rps"][data-rps-state="settled"] #view-rps,
html body[data-view="rps"][data-rps-state="playing"] .rps-game,
html body[data-view="rps"][data-rps-state="settled"] .rps-game {
  width: 328px !important;
  min-height: 800px !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-game,
html body[data-view="rps"][data-rps-state="settled"] .rps-game {
  display: flex !important;
  flex-direction: column !important;
  padding: 70px 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

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

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

html body[data-view="rps"][data-rps-state="playing"] .figma-game-balance,
html body[data-view="rps"][data-rps-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="rps"][data-rps-state="playing"] .figma-game-balance::before,
html body[data-view="rps"][data-rps-state="settled"] .figma-game-balance::before {
  top: 3px !important;
  left: 4px !important;
  width: 24px !important;
  height: 24px !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-head,
html body[data-view="rps"][data-rps-state="settled"] .rps-head,
html body[data-view="rps"][data-rps-state="playing"] .rps-room-search,
html body[data-view="rps"][data-rps-state="settled"] .rps-room-search,
html body[data-view="rps"][data-rps-state="playing"] .rps-room-list,
html body[data-view="rps"][data-rps-state="settled"] .rps-room-list,
html body[data-view="rps"][data-rps-state="playing"] .rps-result,
html body[data-view="rps"][data-rps-state="settled"] .rps-result,
html body[data-view="rps"][data-rps-state="playing"] .rps-round-actions,
html body[data-view="rps"][data-rps-state="settled"] .rps-round-actions,
html body[data-view="rps"][data-rps-state="playing"] #rps-invite-panel,
html body[data-view="rps"][data-rps-state="settled"] #rps-invite-panel,
html body[data-view="rps"][data-rps-state="playing"] .rps-controls > :not(#rps-bet):not(.rps-bet-step),
html body[data-view="rps"][data-rps-state="settled"] .rps-controls > :not(#rps-bet):not(.rps-bet-step) {
  display: none !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-arena,
html body[data-view="rps"][data-rps-state="settled"] .rps-arena {
  position: relative !important;
  order: 1 !important;
  display: grid !important;
  width: 328px !important;
  height: 193px !important;
  min-height: 193px !important;
  grid-template-columns: 120px 88px 120px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat {
  display: grid !important;
  width: 120px !important;
  height: 193px !important;
  grid-template-columns: 40px 80px !important;
  grid-template-rows: 20px 20px 16px 120px 17px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat.rival,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat.rival {
  grid-column: 3 !important;
  grid-template-columns: 80px 40px !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat .rps-avatar,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat .rps-avatar {
  width: 40px !important;
  height: 40px !important;
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  overflow: hidden !important;
  border: 2px solid #ffbb00 !important;
  border-radius: 50% !important;
  background-color: #1e2225 !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat.mine .rps-avatar,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat.mine .rps-avatar {
  color: transparent !important;
  background: #1e2225 url("/assets/figma/rps-scissors.svg") center / 22px 22px no-repeat !important;
  filter: grayscale(1) brightness(0.72);
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat.mine .rps-avatar img,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat.mine .rps-avatar img {
  display: none !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat.rival .rps-avatar,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat.rival .rps-avatar {
  grid-column: 2 !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat > span,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat > span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: #f5b041 !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
  text-align: left !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat.rival > span,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat.rival > span {
  grid-column: 1 !important;
  text-align: right !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat > strong,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat > strong {
  grid-column: 2 !important;
  grid-row: 2 !important;
  overflow: hidden !important;
  color: #939ba2 !important;
  font: 400 12px/145% "Open Sans", sans-serif !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat.rival > strong,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat.rival > strong {
  grid-column: 1 !important;
  text-align: right !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-picked,
html body[data-view="rps"][data-rps-state="settled"] .rps-picked {
  width: 120px !important;
  height: 120px !important;
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  border: 0 !important;
  background: url("/assets/figma/rps-question.svg") center / 100px 100px no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-picked[data-choice="rock"],
html body[data-view="rps"][data-rps-state="settled"] .rps-picked[data-choice="rock"] {
  background-image: url("/assets/figma/rps-rock.svg") !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-picked[data-choice="scissors"],
html body[data-view="rps"][data-rps-state="settled"] .rps-picked[data-choice="scissors"] {
  background-image: url("/assets/figma/rps-scissors.svg") !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-picked[data-choice="paper"],
html body[data-view="rps"][data-rps-state="settled"] .rps-picked[data-choice="paper"] {
  background-image: url("/assets/figma/rps-paper.svg") !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-seat > small,
html body[data-view="rps"][data-rps-state="settled"] .rps-seat > small {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  color: #939ba2 !important;
  font: 400 12px/145% "Open Sans", sans-serif !important;
  text-align: center !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-vs,
html body[data-view="rps"][data-rps-state="settled"] .rps-vs {
  grid-column: 2 !important;
  width: 88px !important;
  height: 120px !important;
  margin-top: 56px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-vs strong,
html body[data-view="rps"][data-rps-state="settled"] .rps-vs strong {
  color: #ffbb00 !important;
  font: italic 800 40px/50px Montserrat, "Open Sans", sans-serif !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 18px rgba(245, 176, 65, 0.45) !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-timer,
html body[data-view="rps"][data-rps-state="settled"] .rps-timer {
  display: none !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-controls,
html body[data-view="rps"][data-rps-state="settled"] .rps-controls {
  position: relative !important;
  order: 2 !important;
  width: 328px !important;
  height: 80px !important;
  display: grid !important;
  grid-template-columns: 44px 224px 44px !important;
  gap: 8px !important;
  margin: 32px 0 0 !important;
  padding: 36px 0 0 !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-controls::before,
html body[data-view="rps"][data-rps-state="settled"] .rps-controls::before {
  position: absolute;
  inset: 0 0 auto;
  height: 24px;
  content: "Ваша ставка:";
  color: #d4d9de;
  font: 600 18px/135% "Open Sans", sans-serif;
  text-align: center;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-bet-step,
html body[data-view="rps"][data-rps-state="settled"] .rps-bet-step {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid #f5b041 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #f5b041 !important;
  font: 600 22px/1 "Open Sans", sans-serif !important;
}

html body[data-view="rps"][data-rps-state="playing"] #rps-bet,
html body[data-view="rps"][data-rps-state="settled"] #rps-bet {
  width: 224px !important;
  height: 44px !important;
  padding: 8px 8px 8px 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) url("/assets/figma/coin-gold.webp") 82px center / 20px 20px no-repeat !important;
  color: #f8f9fa !important;
  font: 600 22px/130% Montserrat, "Open Sans", sans-serif !important;
  text-align: center !important;
  appearance: textfield !important;
}

html body[data-view="rps"][data-rps-state="playing"] #rps-bet::-webkit-inner-spin-button,
html body[data-view="rps"][data-rps-state="settled"] #rps-bet::-webkit-inner-spin-button {
  appearance: none !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-choice-grid,
html body[data-view="rps"][data-rps-state="settled"] .rps-choice-grid {
  order: 3 !important;
  width: 328px !important;
  height: 104px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 104px) !important;
  gap: 8px !important;
  margin: 16px 0 0 !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-choice-grid button,
html body[data-view="rps"][data-rps-state="settled"] .rps-choice-grid button {
  width: 104px !important;
  height: 104px !important;
  min-height: 104px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-view="rps"] .rps-choice-grid button.active,
html body[data-view="rps"] .rps-choice-grid button.pending {
  border-color: #f5b041 !important;
}

html body[data-view="rps"] .rps-choice-grid strong {
  display: none !important;
}

html body[data-view="rps"] .rps-choice-icon {
  width: 104px !important;
  height: 104px !important;
  display: block !important;
  background-position: center !important;
  background-size: 104px 104px !important;
  background-repeat: no-repeat !important;
}

html body[data-view="rps"] .rps-choice-icon.icon-rock {
  background-image: url("/assets/figma/rps-rock.svg") !important;
}

html body[data-view="rps"] .rps-choice-icon.icon-scissors {
  background-image: url("/assets/figma/rps-scissors.svg") !important;
}

html body[data-view="rps"] .rps-choice-icon.icon-paper {
  background-image: url("/assets/figma/rps-paper.svg") !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-play-choice,
html body[data-view="rps"][data-rps-state="settled"] .rps-play-choice {
  order: 4 !important;
  width: 328px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 16px 0 0 !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;
  opacity: 1 !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-chat-log,
html body[data-view="rps"][data-rps-state="settled"] .rps-chat-log {
  order: 6 !important;
  width: 328px !important;
  height: 137px !important;
  min-height: 137px !important;
  margin: 32px 0 0 !important;
  padding: 12px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
}

html body[data-view="rps"][data-rps-state="playing"] .rps-chat-form,
html body[data-view="rps"][data-rps-state="settled"] .rps-chat-form {
  order: 7 !important;
  width: 328px !important;
  height: 44px !important;
  display: grid !important;
  grid-template-columns: 274px 44px !important;
  gap: 10px !important;
  margin: 16px 0 0 !important;
}

html body[data-view="rps"] .rps-chat-form input {
  width: 274px !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid #2c3033 !important;
  border-radius: 10px !important;
  background: #080a0b !important;
  color: #f8f9fa !important;
  font: 400 14px/145% "Open Sans", sans-serif !important;
}

html body[data-view="rps"] .rps-chat-form input::placeholder {
  color: #939ba2 !important;
}

html body[data-view="rps"] .rps-chat-form button {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent url("/assets/icons/send.svg") center / 24px 24px no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  opacity: 0.45;
  transform: none !important;
}

/* RPS lobby — Games_SPS, 360 × 800 Figma frame. */
html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) {
  min-height: 800px !important;
  overflow: hidden !important;
  background-color: #080a0b !important;
  background-image:
    linear-gradient(rgba(8, 10, 11, 0.12), rgba(8, 10, 11, 0.12)),
    url("/assets/figma/app-bg.png?v=2") !important;
  background-position: top center !important;
  background-size: 360px 800px !important;
}

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

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

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-topbar {
  position: absolute !important;
  z-index: 20 !important;
  top: 8px !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 328px !important;
  height: 44px !important;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-back-button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  opacity: 1 !important;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-back-button::before {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  border: 1.5px solid #939ba2 !important;
  border-radius: 50% !important;
  color: #939ba2 !important;
  content: "\00D7" !important;
  font: 600 19px/22px "Open Sans", sans-serif !important;
  transform: none !important;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-intro {
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 328px !important;
  height: 503px !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  text-align: center !important;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-intro::before {
  position: absolute;
  z-index: 0;
  top: 113px;
  left: 34px;
  width: 260px;
  height: 260px;
  background:
    radial-gradient(circle at 40.5% 43.5%, rgba(245, 176, 65, 0.4) 0 25%, rgba(245, 176, 65, 0.17) 42%, transparent 66%),
    radial-gradient(circle at 59% 56.5%, rgba(65, 143, 245, 0.4) 0 25%, rgba(65, 143, 245, 0.17) 42%, transparent 66%);
  content: "";
  filter: blur(10px);
  opacity: 0.68;
  pointer-events: none;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-intro img {
  position: absolute !important;
  z-index: 1 !important;
  top: 143px !important;
  left: 64px !important;
  width: 200px !important;
  height: 200px !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-intro h1 {
  position: absolute !important;
  z-index: 1 !important;
  top: 367px !important;
  left: 0 !important;
  display: flex !important;
  width: 328px !important;
  height: 96px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffbb00 !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  background-clip: text !important;
  font: 700 40px/48px "Montserrat", 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="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-intro p {
  position: absolute !important;
  z-index: 1 !important;
  top: 479px !important;
  left: 0 !important;
  width: 328px !important;
  height: 24px !important;
  margin: 0 !important;
  color: #f8f9fa !important;
  font: 600 18px/24px "Montserrat", sans-serif !important;
  text-align: center !important;
}

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

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls.rps-controls {
  position: absolute !important;
  z-index: 10 !important;
  right: 0 !important;
  bottom: 16px !important;
  left: 0 !important;
  display: grid !important;
  width: 328px !important;
  height: 96px !important;
  grid-template-columns: 328px !important;
  grid-template-rows: 44px 44px !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls > :not(#rps-join):not(#rps-intro-invite) {
  display: none !important;
}

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps #rps-join,
html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps #rps-intro-invite {
  display: block !important;
  width: 328px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
  text-align: center !important;
}

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

html body[data-view="rps"]:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps #rps-intro-invite.figma-intro-invite {
  grid-column: 1 !important;
  grid-row: 2 !important;
  border: 1px solid #ffbb00 !important;
  background: transparent !important;
  color: #f5b041 !important;
}

/* RPS round header — Frame 70, 328 × 193. */
html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-arena {
  grid-template-columns: 120px 88px 120px !important;
  grid-template-rows: 193px !important;
  gap: 0 !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat {
  display: grid !important;
  width: 120px !important;
  height: 193px !important;
  grid-template-columns: 40px 80px !important;
  grid-template-rows: 40px 16px 120px 17px !important;
  align-items: center !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.rival {
  grid-template-columns: 80px 40px !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat .rps-avatar {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  grid-row: 1 !important;
  align-self: center !important;
  overflow: hidden !important;
  border: 2px solid #ffbb00 !important;
  border-radius: 50% !important;
  background-color: #1e2225 !important;
  background-position: center !important;
  background-size: cover !important;
  filter: none !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.mine .rps-avatar {
  grid-column: 1 !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.rival .rps-avatar {
  grid-column: 2 !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.mine .rps-avatar.is-empty-avatar {
  background-image: url("/assets/figma/admin-logo.png") !important;
  background-size: 24px 24px !important;
  color: transparent !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.rival .rps-avatar.is-empty-avatar {
  background-image: url("/assets/figma/avatar-placeholder.webp") !important;
  color: transparent !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat .rps-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat > span {
  grid-row: 1 !important;
  align-self: start !important;
  margin: 0 !important;
  color: #f5b041 !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
  text-align: left !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat > strong {
  grid-row: 1 !important;
  align-self: end !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #939ba2 !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.mine > span,
html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.mine > strong {
  grid-column: 2 !important;
  padding-left: 8px !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.rival > span,
html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat.rival > strong {
  grid-column: 1 !important;
  padding-right: 8px !important;
  text-align: right !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked {
  --rps-choice-art: url("/assets/figma/rps-question.svg");
  position: relative !important;
  isolation: isolate !important;
  width: 120px !important;
  height: 120px !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked[data-choice="rock"] {
  --rps-choice-art: url("/assets/figma/rps-rock.svg");
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked[data-choice="scissors"] {
  --rps-choice-art: url("/assets/figma/rps-scissors.svg");
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked[data-choice="paper"] {
  --rps-choice-art: url("/assets/figma/rps-paper.svg");
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked::before {
  position: absolute;
  z-index: -1;
  top: 12px;
  left: 8px;
  width: 104px;
  height: 96px;
  background:
    radial-gradient(circle at 38.5% 41.5%, rgba(245, 176, 65, 0.4) 0 25%, rgba(245, 176, 65, 0.16) 45%, transparent 68%),
    radial-gradient(circle at 61.5% 58.5%, rgba(65, 143, 245, 0.4) 0 25%, rgba(65, 143, 245, 0.16) 45%, transparent 68%);
  content: "";
  filter: blur(5px);
  opacity: 0.8;
  pointer-events: none;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked::after {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background: var(--rps-choice-art) center / contain no-repeat;
  content: "";
  pointer-events: none;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-seat > small {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  align-self: center !important;
  color: #939ba2 !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
  text-align: center !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-vs {
  display: grid !important;
  width: 88px !important;
  height: 120px !important;
  margin-top: 56px !important;
  place-items: center !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-vs > strong {
  display: none !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-timer:not([hidden]) {
  display: block !important;
  width: 88px !important;
  height: 50px !important;
  color: #ffbb00 !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  background-clip: text !important;
  font: italic 800 40px/50px "Montserrat", sans-serif !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Question fades down before the selected artwork grows into place. */
html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked[data-choice] {
  background: none !important;
  background-image: none !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked::after {
  display: none !important;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-choice-layer {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  display: block;
  width: 100px;
  height: 100px;
  background: var(--rps-layer-art) center / contain no-repeat;
  opacity: 1;
  pointer-events: none;
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked.is-choice-transitioning .rps-choice-layer.from {
  animation: rps-choice-out 520ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

html body[data-view="rps"]:is([data-rps-state="playing"], [data-rps-state="settled"]) .rps-picked.is-choice-transitioning .rps-choice-layer.to {
  animation: rps-choice-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 340ms both;
}

@keyframes rps-choice-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.58);
  }
}

@keyframes rps-choice-in {
  from {
    opacity: 0;
    transform: scale(0.42);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-view="rps"] .rps-picked.is-choice-transitioning .rps-choice-layer {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}