@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-800.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fig-bg: #080a0b;
  --fig-surface: #121212;
  --fig-card: #1e2225;
  --fig-card-soft: #181818;
  --fig-line: #2c3033;
  --fig-gold: #f5b041;
  --fig-gold-strong: #ffbc00;
  --fig-gold-dark: #9d6d00;
  --fig-text: #f8f9fa;
  --fig-muted: #939ba2;
  --fig-muted-2: #575d62;
  --fig-blue: #418ff5;
  --fig-green: #20c979;
  --fig-red: #f55252;
  --fig-radius: 10px;
  --fig-page-width: 360px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  min-height: 100%;
  background: var(--fig-bg);
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--fig-text);
  background-color: var(--fig-bg) !important;
  background-image: url("/assets/figma/app-bg.png?v=2") !important;
  background-repeat: repeat-y !important;
  background-position: top center !important;
  background-size: var(--fig-page-width) 800px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.figma-loading-screen {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  width: min(100%, 360px);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0c0d0d;
  background-image: url("/assets/figma/app-bg.png?v=2");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 360px 800px;
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 280ms ease;
  isolation: isolate;
}

.figma-loading-mark {
  position: relative;
  display: block;
  width: 182px;
  height: 182px;
  flex: 0 0 182px;
  border-radius: 50%;
  animation: figma-loading-mark-enter 220ms ease-out both;
}

.figma-loading-mark img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 182px;
  height: 182px;
  border-radius: 50%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.figma-loading-progress {
  position: absolute;
  z-index: 2;
  inset: -1px;
  display: block;
  width: 184px;
  height: 184px;
  overflow: visible;
  transform: rotate(-90deg);
}

.figma-loading-progress-track,
.figma-loading-progress-value {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.figma-loading-progress-track {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 2;
}

.figma-loading-progress-value {
  stroke: #f4b400;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 2px rgba(244, 180, 0, 0.2));
  animation: figma-loading-progress 2400ms cubic-bezier(0.18, 0.76, 0.22, 1) 120ms both;
}

.figma-loading-screen.completing .figma-loading-progress-value {
  animation: none;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 260ms ease-out;
}

.figma-loading-screen.finished {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@keyframes figma-loading-mark-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes figma-loading-progress {
  0% { stroke-dashoffset: 100; }
  12% { stroke-dashoffset: 98; }
  50% { stroke-dashoffset: 75; }
  82% { stroke-dashoffset: 25; }
  100% { stroke-dashoffset: 8; }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  letter-spacing: 0;
}

h1,
h2,
h3,
strong,
.brand-glitch {
  font-family: "Montserrat", "Open Sans", sans-serif;
  letter-spacing: 0;
}

.photo-backdrop {
  display: none !important;
}

.app-shell {
  position: relative !important;
  width: min(100%, var(--fig-page-width)) !important;
  min-height: 800px;
  margin: 0 auto !important;
  padding: 50px 16px 82px !important;
  overflow: visible !important;
  background: transparent !important;
}

.hero-head {
  position: absolute !important;
  z-index: 80;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 360px !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(8, 10, 11, 0.92) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

.brand-glitch {
  display: none !important;
}

.compact-wallet {
  position: absolute !important;
  top: 9px !important;
  left: 166px !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 69px !important;
  min-width: 69px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.compact-wallet .wallet-main {
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  align-items: center !important;
  width: 69px !important;
  height: 32px !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 0 !important;
  background: transparent !important;
}

.compact-wallet .wallet-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat !important;
  box-shadow: none !important;
}

body[data-mode="stars"] .compact-wallet .wallet-icon {
  background-image: url("/assets/figma/coin-standard.webp") !important;
}

.compact-wallet .wallet-main > div {
  display: flex !important;
  align-items: center !important;
  min-width: 0;
  height: 24px !important;
}

.compact-wallet #balance-label {
  display: none !important;
}

.compact-wallet #balance {
  max-width: 39px;
  overflow: hidden;
  color: var(--fig-text) !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-wallet .topup-button {
  display: none !important;
}

.compact-wallet .mode-switch {
  position: absolute !important;
  top: 4px !important;
  left: 93px !important;
  display: grid !important;
  grid-template-columns: 44px 41px !important;
  width: 85px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.compact-wallet .mode-chip {
  position: relative;
  width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 12px !important;
  color: transparent !important;
  background: #333 !important;
  box-shadow: none !important;
}

.compact-wallet .mode-chip::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform 180ms ease;
}

.compact-wallet .mode-chip[data-mode="stars"] {
  position: absolute;
  left: 48px;
  display: block !important;
  width: 37px !important;
  color: transparent !important;
  font: 700 12px/24px "Open Sans", sans-serif !important;
  text-align: left;
  text-transform: uppercase;
  background: transparent !important;
}

.compact-wallet .mode-chip[data-mode="stars"]::after {
  display: none;
}

.compact-wallet .mode-chip[data-mode="stars"]::before {
  color: var(--fig-text);
  content: "DEMO";
  font: 700 11px/24px "Open Sans", sans-serif;
}

body[data-mode="stars"] .compact-wallet .mode-chip[data-mode="stars"]::before {
  content: "STANDARD";
  font-size: 9px;
}

body[data-mode="stars"] .compact-wallet .mode-chip[data-mode="demo"]::after {
  transform: translateX(20px);
}

.level-pill,
.plus-pill {
  position: absolute !important;
  z-index: 90;
  top: 9px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 5px !important;
  color: var(--fig-text) !important;
  background: #1e2225 !important;
  box-shadow: none !important;
}

.plus-pill {
  left: 16px !important;
  width: 71px !important;
  font: 700 0/1 "Open Sans", sans-serif !important;
}

.plus-pill::before {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #418ff5;
  content: "✦";
  font-size: 13px;
}

.plus-pill span {
  color: var(--fig-text) !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
  text-transform: none !important;
}

.level-pill {
  left: 111px !important;
  display: flex !important;
  width: 47px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-color: #b98424 !important;
  background: var(--fig-gold) !important;
}

.level-pill span {
  display: none !important;
}

.level-pill strong {
  color: #fff !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
}

.level-pill strong::before {
  content: "Lvl ";
}

.view {
  position: relative;
  z-index: 1;
  display: none !important;
  width: 328px !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  overflow: visible !important;
}

.view.active {
  display: block !important;
}

body[data-view="home"] .app-shell { min-height: 1096px; }
body[data-view="shop"] .app-shell { min-height: 894px; }
body[data-view="balance"] .app-shell { min-height: 1192px; }
body[data-view="community"] .app-shell { min-height: 806px; }
body[data-view="profile"] .app-shell { min-height: 1566px; }
body[data-view="levels"] .app-shell { min-height: 904px; }
body[data-view="plus"] .app-shell,
body[data-view="earn"] .app-shell,
body[data-view="game"] .app-shell,
body[data-view="more"] .app-shell { min-height: 800px; }

.home-logo-lockup {
  display: none !important;
}

.home-panel,
.shop-card,
.earn-card,
.balance-page,
.community-card,
.leaderboard-card,
.friends-card,
.profile-card,
.profile-game-card,
.promo-card,
.settings-card,
.cosmetics-card,
.referral-card,
.history-wrap,
.levels-card,
.plus-card,
.figma-more-menu {
  width: 328px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--fig-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.leaderboard-head {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.leaderboard-head h2,
.quest-head strong,
.shop-card h2,
.earn-card h2,
.history-wrap h2,
.levels-card h2 {
  margin: 0 !important;
  color: var(--fig-text) !important;
  font: 700 22px/29px "Montserrat", sans-serif !important;
}

.leaderboard-head span,
.muted,
.eyebrow {
  color: var(--fig-muted) !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
}

.gold-button,
.roll-button,
.secondary-button,
.glass-button,
.icon-button,
.quick-bets button,
.rating-tab,
.shop-tab,
.community-tab,
.profile-game-tab {
  min-height: 44px !important;
  /*border-radius: 8px !important;*/
  border: none;
  font: 600 14px/20px "Open Sans", sans-serif !important;
  box-shadow: none !important;
}

.gold-button,
.roll-button {
  border: 0 !important;
  color: #121212 !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important
}

.gold-button:active,
.roll-button:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}

.secondary-button,
.glass-button,
.icon-button,
.quick-bets button,
.rating-tab,
.shop-tab,
.community-tab,
.profile-game-tab {
  /*border: 1px solid var(--fig-line) !important;*/
  color: var(--fig-text) !important;
  /*background: rgba(30, 34, 37, 0.92) !important;*/
}

input,
select,
textarea {
  min-height: 44px;
  border: 1px solid var(--fig-line) !important;
  border-radius: 8px !important;
  color: var(--fig-text) !important;
  background: #121212 !important;
  outline: none !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--fig-gold) !important;
}

/* Home / tasks */

.home-simple {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.quest-board {
  order: 1;
  width: 328px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.quest-head {
  display: flex !important;
  min-height: 29px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.quest-head span {
  color: var(--fig-muted) !important;
  font-size: 12px !important;
}

.quest-tabs,
.community-switch,
.rating-tabs,
.shop-tabs,
.cosmetic-tabs,
.profile-game-tabs {
  display: grid !important;
  min-height: 40px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px !important;
  margin: 0 0 16px !important;
  padding: 4px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 8px !important;
  background: #121212 !important;
}

.quest-tab,
.community-tab,
.rating-tab,
.shop-tab,
.profile-game-tab {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--fig-muted) !important;
  background: transparent !important;
}

.quest-tab.active,
.community-tab.active,
.rating-tab.active,
.shop-tab.active,
.profile-game-tab.active {
  color: #121212 !important;
  background: var(--fig-gold) !important;
}

.quest-list {
  display: grid !important;
  gap: 8px !important;
}

.quest-item,
.home-action {
  position: relative;
  width: 328px !important;
  min-height: 150px !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  color: var(--fig-text) !important;
  background: linear-gradient(145deg, #202429, #181b1e) !important;
  box-shadow: none !important;
}

.home-actions {
  order: 2;
  margin-top: 0 !important;
}

.home-action {
  display: grid !important;
  min-height: 142px !important;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 16px !important;
  text-align: left !important;
}

.home-action-icon {
  width: 80px !important;
  height: 80px !important;
  grid-row: 1 / 3;
  border-radius: 50%;
  background: url("/assets/figma/empty-bird.webp") center / contain no-repeat !important;
}

.home-action > span:nth-child(2) {
  align-self: end;
  font: 700 18px/24px "Montserrat", sans-serif;
}

.home-action strong {
  align-self: start;
  color: var(--fig-gold) !important;
}

/* Games hub */

.game-hub {
  display: grid !important;
  grid-template-columns: repeat(2, 156px) !important;
  align-items: start;
  gap: 8px !important;
  width: 328px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.game-card {
  display: block !important;
  width: 156px !important;
  min-width: 156px !important;
  height: 214px !important;
  min-height: 214px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--fig-text) !important;
  background: linear-gradient(145deg, #2c3033, #171a1c) !important;
  box-shadow: none !important;
}

.game-card-icon {
  display: block !important;
  width: 156px !important;
  height: 156px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 120px 120px !important;
}

.figma-dice-art { background-image: url("/assets/figma/dice.webp") !important; }
.figma-rps-art { background-image: url("/assets/figma/rps.webp") !important; }
.figma-uno-art { background-image: url("/assets/figma/uno.webp") !important; }

.game-card > div {
  display: block !important;
  width: 156px;
  height: 58px;
  padding: 0 8px 8px;
  text-align: center;
}

.game-card strong {
  display: block;
  overflow: hidden;
  color: var(--fig-text) !important;
  font: 700 17px/24px "Montserrat", sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-card small {
  display: block;
  overflow: hidden;
  color: var(--fig-muted) !important;
  font: 400 12px/20px "Open Sans", sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Store */

.shop-list {
  display: grid !important;
  gap: 8px !important;
}

.shop-item {
  position: relative;
  width: 328px !important;
  min-height: 224px !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  color: var(--fig-text) !important;
  background: linear-gradient(145deg, #242a36, #171922) !important;
  box-shadow: none !important;
}

.shop-item::after {
  position: absolute;
  top: -112px;
  right: -112px;
  width: 224px;
  height: 224px;
  border: 20px solid rgba(65, 143, 245, 0.12);
  border-radius: 50%;
  content: "";
}

.shop-item-head,
.shop-item-foot {
  position: relative;
  z-index: 1;
}

.shop-item-head {
  display: flex !important;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  color: var(--fig-muted);
}

.shop-item-head b {
  padding: 5px 10px;
  border-radius: 14px;
  color: #121212;
  background: #ffe4a0;
  font-size: 11px;
}

.shop-pack-label {
  display: none !important;
}

.shop-item > strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 18px;
  font: 700 18px/24px "Montserrat", sans-serif !important;
}

.shop-item p {
  position: relative;
  z-index: 1;
  color: var(--fig-muted) !important;
  display: -webkit-box;
  max-height: 40px;
  margin: 6px 0 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shop-item-foot {
  position: absolute !important;
  right: 12px;
  bottom: 12px;
  left: 12px;
}

.shop-item-foot > span {
  display: block;
  max-width: 184px;
  overflow: hidden;
  color: var(--fig-text) !important;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-item-foot .shop-buy {
  width: 88px !important;
  min-width: 88px !important;
}

/* Income */

.earn-card {
  min-height: 691px !important;
  text-align: left !important;
}

.earn-card > div:first-child {
  width: 328px;
  min-height: 77px;
}

.earn-card .eyebrow {
  display: none;
}

.earn-card h2 {
  margin: 0 0 4px !important;
}

.earn-button {
  position: relative !important;
  display: grid !important;
  width: 280px !important;
  height: 280px !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(245, 176, 65, 0.08) 0 28%, transparent 29%),
    radial-gradient(circle, transparent 0 38%, rgba(245, 176, 65, 0.13) 39% 40%, transparent 41% 55%, rgba(245, 176, 65, 0.09) 56% 57%, transparent 58%) !important;
  box-shadow: none !important;
}

.earn-button .poker-chip {
  width: 162px !important;
  height: 162px !important;
  border: 0 !important;
  border-radius: 50%;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat !important;
  box-shadow: 0 18px 42px rgba(245, 176, 65, 0.22) !important;
}

.earn-button:active .poker-chip {
  animation: figma-coin-tap 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.earn-meta {
  display: flex !important;
  width: max-content;
  margin: 12px auto 0 !important;
  align-items: center;
  gap: 6px;
  color: var(--fig-muted);
}

.earn-meta strong {
  color: var(--fig-text);
}

@keyframes figma-coin-tap {
  0% { transform: scale(1) rotate(0); }
  45% { transform: scale(0.86) rotate(-8deg); }
  72% { transform: scale(1.08) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Balance */

.wallet-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 160px) !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}

.wallet-grid article {
  position: relative;
  display: block !important;
  width: 160px !important;
  min-height: 120px !important;
  padding: 12px !important;
  overflow: hidden;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
}

.wallet-grid article::after {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 82px;
  height: 82px;
  opacity: 0.18;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat;
  content: "";
}

.wallet-grid article:nth-child(2)::after {
  background-image: url("/assets/figma/coin-standard.webp");
}

.wallet-grid article strong {
  display: block;
  margin-top: 4px;
  color: var(--fig-text) !important;
  display: -webkit-box;
  max-height: 48px;
  overflow: hidden;
  font-size: 18px !important;
  line-height: 24px !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wallet-grid article small {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  color: var(--fig-muted) !important;
}

.balance-actions {
  margin: 16px 0 32px !important;
}

.balance-actions .gold-button {
  width: 328px !important;
}

.withdraw-card,
.payments-card {
  width: 328px !important;
  margin: 0 0 32px !important;
  padding: 12px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
}

.withdraw-card-head {
  display: block !important;
  margin-bottom: 16px;
}

.withdraw-card-head span {
  color: var(--fig-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.withdraw-card-head strong {
  display: block;
  margin: 4px 0;
  font-size: 18px;
}

.withdraw-fields {
  display: grid !important;
  gap: 12px !important;
}

.withdraw-fields label {
  display: grid;
  gap: 4px;
  color: var(--fig-muted);
}

.withdraw-quote {
  margin: 12px 0 !important;
  padding: 10px !important;
  border-radius: 8px;
  background: #121212 !important;
}

.withdraw-card .gold-button {
  width: 100%;
}

/* Community */

.community-card {
  margin-bottom: 16px !important;
}

.community-panel {
  display: none !important;
}

.community-panel.active {
  display: block !important;
}

.friend-search {
  display: grid !important;
  grid-template-columns: 1fr 92px !important;
  gap: 8px !important;
  margin-bottom: 16px;
}

.friend-columns {
  display: grid !important;
  gap: 32px !important;
}

.friend-columns > section > strong {
  display: block;
  margin-bottom: 16px;
  font: 700 18px/24px "Montserrat", sans-serif;
}

.friend-list,
.friend-results {
  display: grid !important;
  gap: 8px !important;
}

.friend-item,
.friend-list > *,
.leaderboard li {
  min-height: 44px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 8px !important;
  background: #1e2225 !important;
}

.leaderboard {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
}

.leaderboard li {
  min-height: 85px !important;
}

/* Profile */

.profile-card {
  min-height: 440px !important;
}

.profile-head {
  min-height: 60px !important;
  margin-bottom: 16px !important;
}

.avatar {
  width: 60px !important;
  height: 60px !important;
  border: 1px solid var(--fig-gold) !important;
  border-radius: 50% !important;
  background: #1e2225 url("/assets/figma/avatar-placeholder.webp") center / cover no-repeat !important;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.profile-head .eyebrow {
  color: var(--fig-text) !important;
  font: 700 22px/29px "Montserrat", sans-serif !important;
}

.profile-head h2 {
  margin: 2px 0 0 !important;
  color: var(--fig-muted) !important;
  font: 400 14px/20px "Open Sans", sans-serif !important;
}

.profile-edit-form {
  display: grid !important;
  grid-template-columns: 1fr 88px !important;
  gap: 8px !important;
  margin-bottom: 16px;
}

.profile-edit-form #profile-save {
  grid-column: 1 / -1;
}

.stats,
.profile-game-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.stats > div,
.profile-game-stats > div {
  min-width: 0;
  min-height: 73px !important;
  padding: 8px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 8px !important;
  background: #1e2225 !important;
  text-align: center;
}

.stats span,
.profile-game-stats span {
  color: var(--fig-muted) !important;
  font-size: 11px !important;
}

.stats strong,
.profile-game-stats strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--fig-text) !important;
  font-size: 16px !important;
  text-overflow: ellipsis;
}

.profile-game-card,
.promo-card,
.settings-card,
.profile-cosmetics-button,
.cosmetics-card,
.referral-card,
.history-wrap {
  margin-top: 32px !important;
}

.promo-card,
.referral-card,
.settings-card,
.cosmetics-card,
.history-wrap {
  padding: 12px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
}

.promo-form {
  display: grid !important;
  gap: 8px !important;
}

.settings-card {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.settings-actions {
  display: flex !important;
  gap: 8px !important;
}

.profile-cosmetics-button {
  width: 328px !important;
}

/* Plus / level / more */

#view-plus,
#view-levels {
  padding-top: 0 !important;
}

.plus-card {
  min-height: 734px !important;
  padding: 202px 0 60px !important;
}

.plus-card::before {
  position: absolute;
  top: 0;
  left: -16px;
  width: 360px;
  height: 329px;
  background:
    linear-gradient(180deg, transparent 58%, #080a0b 100%),
    url("/assets/figma/plus-hero.webp") top center / 360px 360px no-repeat;
  content: "";
  pointer-events: none;
}

.plus-card > * {
  position: relative;
  z-index: 1;
}

.plus-card .leaderboard-head h2 {
  font-size: 40px !important;
  line-height: 50px !important;
}

.plus-price {
  margin: 16px 0 !important;
}

.plus-perks {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
}

.plus-perks li {
  min-height: 74px !important;
  padding: 12px 12px 12px 48px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  background: rgba(30, 34, 37, 0.9) !important;
}

.plus-card #plus-buy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 328px;
}

.levels-card {
  min-height: 808px !important;
  padding-top: 16px !important;
}

.level-summary {
  padding: 16px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
}

.level-rewards {
  display: grid !important;
  gap: 8px !important;
  margin-top: 16px;
}

.level-reward {
  min-height: 84px !important;
  padding: 8px 12px 8px 92px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
}

.figma-more-menu {
  display: grid;
  gap: 8px;
}

.figma-more-menu > button {
  display: grid;
  grid-template-columns: 44px 1fr;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--fig-line);
  border-radius: 10px;
  color: var(--fig-text);
  background: #1e2225;
  text-align: left;
}

.figma-more-menu > button .nav-icon {
  grid-row: 1 / 3;
}

.figma-more-menu > button strong {
  align-self: end;
}

.figma-more-menu > button small {
  align-self: start;
  color: var(--fig-muted);
}

/* Global navigation */

.bottom-nav {
  position: fixed !important;
  z-index: 200;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: grid !important;
  width: min(100%, 360px) !important;
  height: calc(59px + env(safe-area-inset-bottom)) !important;
  min-height: 59px !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  margin: 0 auto !important;
  padding: 6px 10px env(safe-area-inset-bottom) !important;
  border: 0 !important;
  border-top: 1px solid rgba(245, 176, 65, 0.16) !important;
  border-radius: 0 !important;
  background: rgba(24, 24, 24, 0.96) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}

.nav-item {
  position: relative;
  display: grid !important;
  width: auto !important;
  min-width: 0 !important;
  height: 45px !important;
  min-height: 45px !important;
  grid-template-rows: 24px 17px;
  justify-items: center;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--fig-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-item::after {
  position: absolute;
  right: 15px;
  bottom: -6px;
  left: 15px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  content: "";
}

.nav-item.active {
  color: var(--fig-gold) !important;
}

.nav-item.active::after {
  background: var(--fig-gold);
}

.nav-item span:not(.nav-icon) {
  display: block !important;
  max-width: 54px;
  overflow: hidden;
  color: inherit !important;
  font: 600 11px/17px "Open Sans", sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-icon {
  position: relative;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  color: currentColor;
  background: none !important;
}

.nav-icon::before,
.nav-icon::after {
  position: absolute;
  content: "";
}

.nav-home::before {
  inset: 5px 4px 3px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 2px;
}

.nav-home::after {
  top: 2px;
  left: 6px;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.nav-game::before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 5px;
  transform: rotate(8deg);
}

.nav-game::after {
  top: 7px;
  left: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 7px 3px 0 currentColor, 3px 8px 0 currentColor;
}

.nav-shop::before {
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.nav-shop::after {
  top: 2px;
  left: 8px;
  width: 8px;
  height: 6px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.nav-earn::before {
  inset: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-earn::after {
  top: 5px;
  left: 10px;
  width: 2px;
  height: 14px;
  background: currentColor;
  box-shadow: -3px 3px 0 -0.5px currentColor, 3px -3px 0 -0.5px currentColor;
}

.nav-balance::before {
  inset: 4px 2px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.nav-balance::after {
  top: 9px;
  right: 2px;
  width: 8px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 3px 0 0 3px;
}

.nav-more::before {
  top: 10px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 7px 0 currentColor, 14px 0 currentColor;
}

.nav-community::before {
  top: 3px;
  left: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-community::after {
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 8px 8px 3px 3px;
}

.nav-profile::before {
  top: 2px;
  left: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-profile::after {
  right: 4px;
  bottom: 1px;
  left: 4px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 9px 9px 3px 3px;
}

.nav-plus::before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.nav-plus::after {
  top: 6px;
  left: 11px;
  width: 2px;
  height: 12px;
  background: currentColor;
  box-shadow: 0 0 0 currentColor;
}

.nav-levels::before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.nav-levels::after {
  top: 7px;
  left: 7px;
  width: 10px;
  height: 8px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

/* Game layouts */

body[data-view="dice"] .hero-head,
body[data-view="rps"] .hero-head,
body[data-view="uno"] .hero-head,
body[data-view="dice"] > .bottom-nav,
body[data-view="rps"] > .bottom-nav,
body[data-view="uno"] > .bottom-nav,
body[data-view="dice"] .level-pill,
body[data-view="rps"] .level-pill,
body[data-view="uno"] .level-pill,
body[data-view="dice"] .plus-pill,
body[data-view="rps"] .plus-pill,
body[data-view="uno"] .plus-pill,
body[data-view="dice"] #online-card,
body[data-view="rps"] #online-card,
body[data-view="uno"] #online-card {
  display: none !important;
}

body[data-view="dice"] .app-shell,
body[data-view="rps"] .app-shell,
body[data-view="uno"] .app-shell {
  min-height: 800px !important;
  padding: 0 16px 16px !important;
}

#view-dice,
#view-rps,
#view-uno {
  width: 328px !important;
  min-height: 800px !important;
  padding: 0 !important;
}

.game-table,
.rps-game,
.uno-game {
  position: relative !important;
  width: 328px !important;
  min-height: 800px !important;
  margin: 0 !important;
  padding: 70px 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.figma-game-topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  width: 328px;
  height: 50px;
  grid-template-columns: 44px 1fr 72px;
  align-items: center;
}

.figma-game-topbar > strong {
  overflow: hidden;
  color: var(--fig-gold);
  font: 700 12px/18px "Montserrat", sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-back-button {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.figma-back-button::before {
  position: absolute;
  top: 13px;
  left: 14px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid var(--fig-text);
  border-left: 2px solid var(--fig-text);
  content: "";
  transform: rotate(45deg);
}

.figma-game-balance {
  position: relative;
  justify-self: end;
  width: 74px;
  height: 36px;
  padding: 0 8px 0 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(30, 34, 37, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--fig-text);
  font: 700 14px/34px "Open Sans", sans-serif;
  text-align: left;
}

.figma-game-balance::before {
  position: absolute;
  top: 5px;
  left: 7px;
  width: 24px;
  height: 24px;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat;
  content: "";
}

body[data-mode="stars"] .figma-game-balance::before {
  background-image: url("/assets/figma/coin-standard.webp");
}

.figma-game-intro {
  display: grid;
  min-height: 602px;
  place-items: center;
  align-content: start;
  text-align: center;
}

.figma-game-intro img {
  width: 260px;
  height: 260px;
  margin-top: 43px;
  object-fit: contain;
}

.figma-game-intro h1 {
  width: 328px;
  margin: -17px 0 0;
  color: var(--fig-gold);
  font: 700 40px/48px "Montserrat", sans-serif;
}

.rps-intro h1 {
  max-width: 328px;
  font-size: 40px;
  line-height: 40px;
  text-transform: lowercase;
}

.figma-game-intro p {
  margin: 8px 0 0;
  color: var(--fig-muted);
  font: 400 14px/24px "Open Sans", sans-serif;
}

body[data-dice-state="playing"] .dice-intro,
body[data-dice-state="settled"] .dice-intro,
body[data-rps-state="playing"] .rps-intro,
body[data-rps-state="settled"] .rps-intro,
body[data-uno-state="playing"] .uno-intro,
body[data-uno-state="settled"] .uno-intro {
  display: none !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .dice-stage,
body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .chat-card,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-head,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-arena,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-choice-grid,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-result,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-chat-log,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-chat-form,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .rps-head,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-table,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-message {
  display: none !important;
}

.rps-head {
  display: none !important;
}

.mini-bet-row {
  display: grid !important;
  width: 328px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

body[data-rps-state="intro"] .rps-controls,
body[data-rps-state="searching"] .rps-controls,
body[data-uno-state="intro"] .uno-controls,
body[data-uno-state="searching"] .uno-controls {
  position: absolute !important;
  right: 0;
  bottom: 16px;
  left: 0;
}

body[data-rps-state="intro"] .rps-controls input,
body[data-rps-state="intro"] .rps-controls #rps-bot,
body[data-rps-state="intro"] .rps-controls #rps-leave,
body[data-rps-state="searching"] .rps-controls input,
body[data-uno-state="intro"] .uno-controls input,
body[data-uno-state="intro"] .uno-controls select,
body[data-uno-state="intro"] .uno-controls #uno-leave,
body[data-uno-state="searching"] .uno-controls input,
body[data-uno-state="searching"] .uno-controls select {
  display: none !important;
}

body[data-rps-state="intro"] .rps-controls #rps-join,
body[data-rps-state="searching"] .rps-controls #rps-join,
body[data-uno-state="intro"] .uno-controls #uno-join,
body[data-uno-state="searching"] .uno-controls #uno-join {
  grid-column: 1 / -1;
  width: 328px;
}

.card-room-search,
.card-room-list {
  border: 0 !important;
  background: transparent !important;
}

body[data-rps-state="intro"] .rps-room-search,
body[data-rps-state="intro"] .rps-room-list,
body[data-uno-state="intro"] .uno-room-search,
body[data-uno-state="intro"] .uno-room-list,
body[data-dice-state="intro"] .dice-room-search,
body[data-dice-state="intro"] .dice-room-list {
  display: none !important;
}

.dice-stage {
  display: grid !important;
  width: 328px !important;
  min-height: 193px !important;
  grid-template-columns: 120px 88px 120px !important;
  gap: 0 !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.player-panel {
  display: grid !important;
  width: 120px !important;
  min-width: 120px !important;
  grid-template-columns: 40px 1fr;
  grid-template-rows: 20px 17px 92px 17px;
  align-items: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.player-panel .side-kicker {
  align-self: end;
  color: var(--fig-gold) !important;
  font: 700 12px/20px "Open Sans", sans-serif;
}

.player-panel .dice-avatar {
  width: 40px !important;
  height: 40px !important;
  grid-row: 1 / 3;
  border: 1px solid var(--fig-gold) !important;
  border-radius: 50% !important;
  background: #1e2225 url("/assets/figma/avatar-placeholder.webp") center / cover no-repeat;
}

.player-panel > strong {
  align-self: start;
  overflow: hidden;
  color: var(--fig-muted) !important;
  font: 400 11px/17px "Open Sans", sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-panel .die {
  display: block !important;
  width: 92px !important;
  height: 92px !important;
  min-height: 92px !important;
  grid-column: 1 / -1;
  justify-self: center;
  margin: 8px 0 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.player-panel .die::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/figma/dice.webp") center / contain no-repeat;
  content: "";
}

.player-panel .die > * {
  position: relative;
  z-index: 1;
}

.player-panel .die .die-ready-face {
  position: absolute !important;
  inset: 5px !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  padding: 13px !important;
  border: 1px solid rgba(205, 155, 40, 0.24) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fffef8, #e8dfd0) !important;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.9), 0 9px 18px rgba(0, 0, 0, 0.2) !important;
  transform: rotate(7deg);
}

.player-panel .die .ready-pip {
  position: static !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  align-self: center;
  justify-self: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 38% 30%, #ffe58a, #d28c0e 70%, #8a5900) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(78, 45, 0, 0.35) !important;
}

.player-panel .die .ready-pip-1 { grid-area: 1 / 1; }
.player-panel .die .ready-pip-2 { grid-area: 1 / 2; }
.player-panel .die .ready-pip-3 { grid-area: 1 / 3; }
.player-panel .die .ready-pip-4 { grid-area: 2 / 1; }
.player-panel .die .ready-pip-5 { grid-area: 2 / 2; }
.player-panel .die .ready-pip-6 { grid-area: 2 / 3; }
.player-panel .die .ready-pip-7 { grid-area: 3 / 1; }
.player-panel .die .ready-pip-8 { grid-area: 3 / 2; }
.player-panel .die .ready-pip-9 { grid-area: 3 / 3; }

.player-panel .die .telegram-dice-emoji,
.player-panel .die .die-roll-clip {
  display: none !important;
}

.player-panel .die.dice-viewport-active .die-ready-face {
  display: none !important;
}

.player-panel .die .dice-webgl-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 92px !important;
  height: 92px !important;
}

.player-panel > small {
  grid-column: 1 / -1;
  color: var(--fig-muted) !important;
  font-size: 11px !important;
  text-align: center;
}

.versus {
  display: grid !important;
  width: 88px !important;
  align-content: center;
  justify-items: center;
  color: var(--fig-gold) !important;
}

.versus > span {
  font: 800 38px/50px "Montserrat", sans-serif !important;
}

.versus #dice-score {
  color: var(--fig-text) !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
}

.controls {
  width: 328px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-dice-state="intro"] .controls {
  position: absolute !important;
  right: 0;
  bottom: 16px;
  left: 0;
}

body[data-dice-state="intro"] .controls > :not(#roll):not(#invite) {
  display: none !important;
}

body[data-dice-state="intro"] #roll,
body[data-dice-state="intro"] #invite {
  display: block !important;
  width: 328px !important;
  margin: 8px 0 0 !important;
}

.bet-head {
  margin-bottom: 8px !important;
}

.bet-row {
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important;
  gap: 8px !important;
}

.quick-bets {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin: 8px 0 !important;
}

.roll-button,
.secondary-button {
  width: 328px !important;
  margin: 8px 0 0 !important;
}

.chat-card {
  width: 328px !important;
  min-height: 197px !important;
  margin: 32px 0 0 !important;
  padding: 12px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
}

.chat-log,
.rps-chat-log {
  min-height: 112px !important;
  border: 0 !important;
  background: #121212 !important;
}

.chat-form,
.rps-chat-form {
  display: grid !important;
  grid-template-columns: 1fr 88px !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* RPS active */

.rps-arena {
  display: grid !important;
  width: 328px !important;
  grid-template-columns: 120px 88px 120px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.rps-seat {
  display: grid !important;
  width: 120px !important;
  min-width: 120px !important;
  justify-items: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.rps-seat .rps-avatar {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--fig-gold) !important;
  border-radius: 50% !important;
  background: #1e2225 url("/assets/figma/avatar-placeholder.webp") center / cover no-repeat;
}

.rps-seat > span,
.rps-seat > strong {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rps-picked {
  display: grid !important;
  width: 104px !important;
  height: 104px !important;
  margin-top: 8px;
  place-items: center;
  border: 0 !important;
  color: #d9deff !important;
  background: transparent !important;
  font: 800 80px/104px "Montserrat", sans-serif !important;
}

.rps-vs {
  display: grid !important;
  align-content: center;
  justify-items: center;
  color: var(--fig-gold);
}

.rps-vs strong {
  font-size: 38px;
}

.rps-timer {
  font: 700 26px/32px "Montserrat", sans-serif !important;
}

.rps-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 104px) !important;
  gap: 8px !important;
  margin: 8px 0 !important;
}

.rps-choice-grid button {
  display: grid !important;
  width: 104px !important;
  height: 104px !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 8px !important;
  color: transparent !important;
  background: #121212 !important;
}

.rps-choice-grid button:focus,
.rps-choice-grid button.selected {
  border-color: var(--fig-gold) !important;
}

.rps-choice-icon {
  width: 92px !important;
  height: 92px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.icon-rock { background-image: url("/assets/figma/rock.webp") !important; }
.icon-scissors { background-image: url("/assets/figma/scissors.webp") !important; }
.icon-paper { background-image: url("/assets/figma/paper.webp") !important; }

.rps-choice-grid strong {
  display: none !important;
}

.rps-result {
  min-height: 56px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  color: var(--fig-muted) !important;
  background: #1e2225 !important;
}

/* UNO active */

.uno-table {
  position: relative !important;
  width: 328px !important;
  min-height: 630px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

.uno-players {
  position: relative !important;
  display: flex !important;
  width: 328px !important;
  min-height: 84px !important;
  align-items: start;
  justify-content: space-around;
  gap: 8px !important;
}

.uno-player {
  width: 72px !important;
  min-width: 72px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
}

.uno-player .avatar,
.uno-player-avatar {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 2px !important;
}

.uno-center {
  display: grid !important;
  min-height: 250px !important;
  grid-template-columns: 80px 160px 80px !important;
  align-items: center;
  justify-content: center;
  gap: 4px !important;
}

.uno-deck {
  width: 80px !important;
  height: 125px !important;
  border-radius: 8px !important;
  background: #1e2225 !important;
}

.uno-card {
  width: 160px !important;
  height: 250px !important;
  border-radius: 12px !important;
}

.uno-current {
  width: 80px !important;
}

.uno-hand {
  display: flex !important;
  min-height: 250px !important;
  align-items: end;
  justify-content: center;
  margin-top: 20px;
  padding: 0 8px 24px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border: 0 !important;
  background: transparent !important;
  scrollbar-width: none;
}

.uno-hand::-webkit-scrollbar {
  display: none;
}

.uno-hand .uno-card {
  flex: 0 0 80px !important;
  width: 80px !important;
  height: 125px !important;
  margin-left: -28px !important;
  transform-origin: center bottom;
}

.uno-hand .uno-card:first-child {
  margin-left: 0 !important;
}

.uno-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end;
}

.uno-color-choice {
  margin: 8px 0 !important;
}

/* Transient UI */

.status {
  position: fixed !important;
  z-index: 300;
  right: 12px;
  bottom: calc(71px + env(safe-area-inset-bottom));
  left: 12px;
  max-width: 336px;
  min-height: 44px;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  border: 1px solid var(--fig-line) !important;
  border-radius: 8px !important;
  color: var(--fig-text) !important;
  background: rgba(30, 34, 37, 0.96) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.38) !important;
}

.result-toast {
  top: calc(12px + env(safe-area-inset-top)) !important;
  right: 10px !important;
  left: 10px !important;
  width: min(340px, calc(100% - 20px)) !important;
  min-height: 82px !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  transform: none !important;
  animation: figma-result-pop 180ms ease-out both !important;
}

@keyframes figma-result-pop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.topup-sheet .sheet-panel {
  width: min(360px, 100%) !important;
  border-radius: 16px 16px 0 0 !important;
  background: #181818 !important;
}

body.light-theme {
  --fig-bg: #f8f9fa;
  --fig-surface: #fff;
  --fig-card: #fff;
  --fig-card-soft: #f2f3f4;
  --fig-line: #d4d9de;
  --fig-text: #1e2225;
  --fig-muted: #687078;
  color-scheme: light;
  background-color: #f8f9fa !important;
  background-image:
    linear-gradient(rgba(248, 249, 250, 0.94), rgba(248, 249, 250, 0.94)),
    url("/assets/figma/app-bg.png?v=2") !important;
}

body.light-theme .hero-head,
body.light-theme .bottom-nav {
  background: rgba(255, 255, 255, 0.96) !important;
}

body.light-theme .home-action,
body.light-theme .quest-item,
body.light-theme .shop-item,
body.light-theme .wallet-grid article,
body.light-theme .withdraw-card,
body.light-theme .payments-card,
body.light-theme .friend-item,
body.light-theme .friend-list > *,
body.light-theme .leaderboard li,
body.light-theme .stats > div,
body.light-theme .profile-game-stats > div,
body.light-theme .promo-card,
body.light-theme .referral-card,
body.light-theme .settings-card,
body.light-theme .cosmetics-card,
body.light-theme .history-wrap,
body.light-theme .figma-more-menu > button,
body.light-theme .chat-card,
body.light-theme .rps-result {
  background: rgba(255, 255, 255, 0.96) !important;
}

/* Final Figma home composition: logo, balance, referral only. */
body[data-view="home"] .app-shell {
  min-height: 1096px !important;
  padding: 28px 16px 108px !important;
}

body[data-view="home"] .hero-head {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 328px !important;
  height: auto !important;
  min-height: 268px !important;
  margin: 0 0 18px !important;
  overflow: visible !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body[data-view="home"] .brand-glitch {
  display: block !important;
  margin: 34px 0 22px !important;
  color: transparent !important;
  background: linear-gradient(90deg, #f5b041 0%, #fff2ad 38%, #d49318 68%, #fff5be 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  font: 800 58px/64px "Montserrat", sans-serif !important;
  text-align: center;
  text-transform: lowercase;
  text-shadow: 0 0 28px rgba(245, 176, 65, 0.22);
  animation: figma-logo-shine 3.4s linear infinite;
}

@keyframes figma-logo-shine {
  0% { background-position: 0 50%; }
  100% { background-position: 220% 50%; }
}

body[data-view="home"] .compact-wallet {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: 328px !important;
  min-width: 328px !important;
  height: auto !important;
  min-height: 164px !important;
  padding: 20px 20px 16px !important;
  border: 1px solid rgba(245, 176, 65, 0.28) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(245, 176, 65, 0.14), rgba(255, 255, 255, 0.02)),
    rgba(30, 34, 37, 0.74) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 20px 48px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(10px);
}

body[data-view="home"] .compact-wallet .wallet-main {
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  grid-template-columns: 74px 1fr !important;
  gap: 18px !important;
  padding: 0 !important;
}

body[data-view="home"] .compact-wallet .wallet-icon {
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
}

body[data-view="home"] .compact-wallet .wallet-main > div {
  display: grid !important;
  align-content: center;
  height: 74px !important;
}

body[data-view="home"] .compact-wallet #balance-label {
  display: block !important;
  color: var(--fig-muted) !important;
  font: 700 13px/18px "Open Sans", sans-serif !important;
}

body[data-view="home"] .compact-wallet #balance {
  display: block;
  max-width: 190px !important;
  color: #ffe9a3 !important;
  font: 800 32px/38px "Montserrat", sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="home"] .compact-wallet .mode-switch {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 18px 0 0 !important;
  padding: 4px !important;
  border: 1px solid rgba(245, 176, 65, 0.24) !important;
  border-radius: 8px !important;
  background: rgba(8, 10, 11, 0.62) !important;
}

body[data-view="home"] .compact-wallet .mode-chip,
body[data-view="home"] .compact-wallet .mode-chip[data-mode="stars"] {
  position: relative !important;
  left: auto !important;
  display: grid !important;
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  place-items: center;
  border-radius: 6px !important;
  color: var(--fig-muted) !important;
  background: transparent !important;
  font: 700 13px/18px "Open Sans", sans-serif !important;
}

body[data-view="home"] .compact-wallet .mode-chip::before,
body[data-view="home"] .compact-wallet .mode-chip::after {
  display: none !important;
  content: none !important;
}

body[data-view="home"] .compact-wallet .mode-chip.active {
  color: #151515 !important;
  background: linear-gradient(180deg, #ffe38a, #f5b041) !important;
}

body[data-view="home"] .level-pill,
body[data-view="home"] .plus-pill,
body[data-view="home"] .quest-board,
body[data-view="home"] .home-logo-lockup {
  display: none !important;
}

body[data-view="home"] #view-home {
  padding: 0 !important;
}

body[data-view="home"] .home-simple {
  display: block !important;
}

body[data-view="home"] .home-actions {
  display: block !important;
  margin: 0 !important;
}

body[data-view="home"] .home-action {
  min-height: 110px !important;
  grid-template-columns: 72px 1fr !important;
  padding: 18px !important;
  border-color: rgba(245, 176, 65, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(245, 176, 65, 0.1), rgba(255, 255, 255, 0.015)),
    rgba(30, 34, 37, 0.72) !important;
}

body[data-view="home"] .home-action-icon {
  width: 64px !important;
  height: 64px !important;
}

body[data-view="home"] .home-action > span:nth-child(2) {
  font: 800 18px/24px "Montserrat", sans-serif !important;
}

body[data-view="home"] .home-action strong {
  font: 700 15px/22px "Open Sans", sans-serif !important;
}

body[data-view="home"] .status:not(.loss),
body[data-view="game"] .status:not(.loss),
body[data-view="shop"] .status:not(.loss),
body[data-view="earn"] .status:not(.loss),
body[data-view="balance"] .status:not(.loss),
body[data-view="community"] .status:not(.loss),
body[data-view="profile"] .status:not(.loss),
body[data-view="more"] .status:not(.loss),
body[data-view="plus"] .status:not(.loss),
body[data-view="levels"] .status:not(.loss),
body[data-view="dice"] .status:not(.loss),
body[data-view="rps"] .status:not(.loss),
body[data-view="uno"] .status:not(.loss) {
  display: none !important;
}

body:not([data-view="home"]):not([data-view="game"]):not([data-view="shop"]):not([data-view="earn"]) .compact-wallet {
  display: none !important;
}

/* v4: restore the designer's actual Figma page structure. */
body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .hero-head {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 360px !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .brand-glitch {
  display: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet {
  position: absolute !important;
  top: 9px !important;
  left: 166px !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 69px !important;
  min-width: 69px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-main {
  display: grid !important;
  width: 69px !important;
  height: 32px !important;
  grid-template-columns: 24px 1fr !important;
  gap: 4px !important;
  padding: 4px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-main > div {
  display: flex !important;
  align-items: center !important;
  height: 24px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet #balance-label {
  display: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet #balance {
  max-width: 39px !important;
  color: var(--fig-text) !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-switch {
  position: absolute !important;
  top: 4px !important;
  left: 93px !important;
  display: grid !important;
  grid-template-columns: 44px 41px !important;
  width: 85px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip {
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  color: transparent !important;
  background: #333 !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip::after {
  display: block !important;
  content: "" !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"] {
  position: absolute !important;
  left: 48px !important;
  width: 37px !important;
  background: transparent !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"]::after {
  display: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"]::before {
  display: block !important;
  color: var(--fig-text);
  content: "DEMO";
  font: 700 11px/24px "Open Sans", sans-serif;
}

body[data-mode="stars"]:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"]::before {
  content: "STANDARD";
  font-size: 9px;
}

body[data-view="home"] .app-shell {
  min-height: 1096px !important;
  padding: 50px 16px 118px !important;
}

body[data-view="home"] #view-home {
  padding: 16px 0 !important;
}

body[data-view="home"] .home-simple {
  display: block !important;
}

body[data-view="home"] .home-logo-lockup,
body[data-view="home"] .home-actions {
  display: none !important;
}

body[data-view="home"] .quest-board {
  display: block !important;
  width: 328px !important;
}

body[data-view="home"] .quest-head {
  min-height: 29px !important;
  margin-bottom: 8px !important;
}

body[data-view="home"] .quest-list {
  gap: 8px !important;
}

.game-hub {
  grid-template-columns: repeat(2, 160px) !important;
  width: 328px !important;
}

.game-card {
  width: 160px !important;
  min-width: 160px !important;
  height: 214px !important;
}

.game-card-icon {
  width: 160px !important;
  height: 160px !important;
}

.game-card > div {
  width: 160px !important;
  height: 54px !important;
}

.game-card strong {
  font-size: 18px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill {
  display: inline-flex !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill {
  display: flex !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet.session-wallet {
  display: block !important;
}

@media (min-width: 361px) {
  body {
    background-size: 360px 800px !important;
  }

  .app-shell,
  .bottom-nav {
    box-shadow: 0 0 0 1px rgba(245, 176, 65, 0.06), 0 20px 80px rgba(0, 0, 0, 0.38) !important;
  }
}

@media (max-width: 359px) {
  :root {
    --fig-scale: calc(100vw / 360);
  }

  .app-shell,
  .bottom-nav {
    width: 100% !important;
  }

  .hero-head {
    width: 100% !important;
  }

  .view,
  .home-panel,
  .shop-card,
  .earn-card,
  .balance-page,
  .community-card,
  .leaderboard-card,
  .friends-card,
  .profile-card,
  .profile-game-card,
  .promo-card,
  .settings-card,
  .cosmetics-card,
  .referral-card,
  .history-wrap,
  .levels-card,
  .plus-card,
  .figma-more-menu,
  .game-hub,
  .game-table,
  .rps-game,
  .uno-game {
    max-width: calc(100vw - 32px) !important;
  }
}

/* Exact navbar from supplied CSS and SVG assets */

.bottom-nav {
  display: flex !important;
  width: min(100%, 360px) !important;
  height: calc(59px + env(safe-area-inset-bottom)) !important;
  min-height: 59px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px 8px !important;
  border: 0 !important;
  border-top: 1px solid #2c3033 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #1e2225 0%, #42310b 100%) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}

.bottom-nav .nav-item {
  position: relative !important;
  display: flex !important;
  width: 49.67px !important;
  min-width: 0 !important;
  height: 45px !important;
  min-height: 45px !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #d4d9de !important;
}

.bottom-nav .nav-item.active {
  color: #f5b041 !important;
}

.bottom-nav .nav-item .nav-icon,
body.more-open .figma-more-menu > button .nav-icon {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  color: inherit !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: 24px 24px !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: 24px 24px !important;
}

.bottom-nav .nav-icon::before,
.bottom-nav .nav-icon::after,
body.more-open .figma-more-menu .nav-icon::before,
body.more-open .figma-more-menu .nav-icon::after {
  display: none !important;
  content: none !important;
}

.nav-home {
  -webkit-mask-image: url("/assets/icons/home.svg") !important;
  mask-image: url("/assets/icons/home.svg") !important;
}

.nav-game {
  -webkit-mask-image: url("/assets/icons/game-cube.svg") !important;
  mask-image: url("/assets/icons/game-cube.svg") !important;
}

.nav-shop {
  -webkit-mask-image: url("/assets/icons/shopping-cart.svg") !important;
  mask-image: url("/assets/icons/shopping-cart.svg") !important;
}

.nav-earn {
  -webkit-mask-image: url("/assets/icons/dollar-circle.svg") !important;
  mask-image: url("/assets/icons/dollar-circle.svg") !important;
}

.nav-balance {
  -webkit-mask-image: url("/assets/icons/wallet.svg") !important;
  mask-image: url("/assets/icons/wallet.svg") !important;
}

.nav-more {
  -webkit-mask-image: url("/assets/icons/more.svg") !important;
  mask-image: url("/assets/icons/more.svg") !important;
}

.nav-community {
  -webkit-mask-image: url("/assets/icons/profile-2user.svg") !important;
  mask-image: url("/assets/icons/profile-2user.svg") !important;
}

.nav-profile {
  -webkit-mask-image: url("/assets/icons/setting.svg") !important;
  mask-image: url("/assets/icons/setting.svg") !important;
}

.bottom-nav .nav-item span:last-child {
  display: flex !important;
  width: auto !important;
  max-width: 52px !important;
  height: 17px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: inherit !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.bottom-nav .nav-item.active::after {
  position: absolute !important;
  right: auto !important;
  bottom: -8px !important;
  left: 50% !important;
  width: 30px !important;
  height: 3px !important;
  border-radius: 2px 2px 0 0 !important;
  background: #f5b041 !important;
  box-shadow: none !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}

body.more-open .bottom-nav {
  gap: 6px !important;
  padding: 6px 6px 8px !important;
  border: 1px solid #2c3033 !important;
  border-radius: 10px !important;
}

body.more-open .figma-more-menu {
  right: 0 !important;
  bottom: 63px !important;
  display: flex !important;
  width: 138px !important;
  max-width: 138px !important;
  height: 88px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  border: 1px solid #2c3033 !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
  box-shadow: none !important;
}

body.more-open .figma-more-menu > button {
  display: flex !important;
  width: 106px !important;
  min-height: 24px !important;
  height: 24px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #d4d9de !important;
  background: transparent !important;
}

body.more-open .figma-more-menu > button strong {
  align-self: center !important;
  color: inherit !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
  white-space: nowrap !important;
}

body.more-open .figma-more-menu > button small {
  display: none !important;
}

/* Supplied header spec. */
body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .hero-head {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: min(100%, 360px) !important;
  height: 50px !important;
  min-height: 50px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: translateX(-50%) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(16px, calc(50% - 164px)) !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 71px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill::before {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/icons/plus-diamond.svg") center / 24px 24px no-repeat !important;
  clip-path: none !important;
  content: "" !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill span {
  display: block !important;
  width: 35px !important;
  height: 20px !important;
  color: #f8f9fa !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
  text-transform: uppercase !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill span::before {
  display: none !important;
  content: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(111px, calc(50% - 69px)) !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 47px !important;
  height: 32px !important;
  min-height: 32px !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  color: #f8f9fa !important;
  background: #1e2225 !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill span,
body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill strong {
  color: #f8f9fa !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet.session-wallet {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(166px, calc(50% - 14px)) !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 69px !important;
  min-width: 69px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-main {
  display: grid !important;
  box-sizing: border-box !important;
  width: 69px !important;
  height: 32px !important;
  grid-template-columns: 24px 33px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  background: #1e2225 !important;
  box-shadow: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet #balance {
  max-width: 33px !important;
  color: #f8f9fa !important;
  font: 600 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-switch {
  position: absolute !important;
  top: 4px !important;
  left: 93px !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 85px !important;
  height: 24px !important;
  min-height: 24px !important;
  grid-template-columns: 44px 37px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="demo"] {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 100px !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="demo"]::after {
  top: 1px !important;
  left: 21px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 100px !important;
  background: #f8f9fa !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"] {
  position: static !important;
  width: 37px !important;
  height: 17px !important;
  min-height: 17px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"]::before {
  color: #f8f9fa !important;
  content: "DEMO" !important;
  font: 600 12px/17px "Open Sans", sans-serif !important;
}

@media (max-width: 359px) {
  .bottom-nav {
    gap: 2px !important;
    padding-inline: 8px !important;
  }

  .bottom-nav .nav-item span:last-child {
    font: 400 10px/15px "Open Sans", sans-serif !important;
  }
}

/* v5: single Figma surface. This block deliberately wins over the legacy skin. */
body {
  --fig-header-height: 50px;
  --fig-nav-height: 59px;
  --fig-panel: rgba(24, 25, 25, 0.82);
  --fig-panel-strong: rgba(30, 34, 37, 0.94);
  --fig-border: rgba(255, 222, 128, 0.26);
  --fig-stroke: rgba(255, 255, 255, 0.08);
  background: #070808 url("/assets/figma/app-bg.png?v=2") top center / 360px 800px repeat-y !important;
}

.app-shell {
  width: min(100%, 360px) !important;
  padding: 50px 16px 92px !important;
  background: transparent !important;
}

.view {
  width: 328px !important;
  padding: 16px 0 !important;
}

#online-card {
  display: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .hero-head {
  z-index: 80 !important;
  width: 360px !important;
  height: 50px !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill {
  top: 9px !important;
  left: 16px !important;
  display: inline-flex !important;
  width: 71px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px solid rgba(44, 48, 51, 1) !important;
  border-radius: 5px !important;
  background: #1e2225 !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill::before {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: transparent url("/assets/figma/plus-gem.png") center / contain no-repeat !important;
  content: "" !important;
  clip-path: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill span {
  color: #fff !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
  text-transform: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill span {
  font-size: 0 !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill span::before {
  content: "PLUS" !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill {
  top: 9px !important;
  left: 111px !important;
  display: flex !important;
  width: 47px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #f5b041 !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill strong {
  color: #f8f9fa !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet.session-wallet {
  top: 9px !important;
  left: 166px !important;
  display: block !important;
  width: 69px !important;
  height: 32px !important;
  overflow: visible !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-main {
  width: 69px !important;
  height: 32px !important;
  grid-template-columns: 24px 39px !important;
  padding: 4px !important;
  border: 1px solid #454a4e !important;
  border-radius: 5px !important;
  background: #1e2225 !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-icon {
  width: 24px !important;
  height: 24px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet #balance {
  max-width: 39px !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-switch {
  top: 4px !important;
  left: 93px !important;
  width: 85px !important;
  height: 24px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="demo"] {
  width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #f7c64a, #c89415) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="demo"]::after {
  top: 2px !important;
  left: 22px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"]::before {
  color: #f8f9fa !important;
  content: "DEMO" !important;
  font: 700 11px/24px "Open Sans", sans-serif !important;
}

body[data-mode="stars"]:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-chip[data-mode="stars"]::before {
  content: "STANDARD" !important;
  font-size: 9px !important;
}

body[data-view="home"] .compact-wallet {
  position: absolute !important;
  top: 9px !important;
  left: 166px !important;
  width: 69px !important;
  min-width: 69px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-view="home"] .compact-wallet .wallet-main {
  width: 69px !important;
  height: 32px !important;
  grid-template-columns: 24px 39px !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid #454a4e !important;
  border-radius: 5px !important;
  background: #1e2225 !important;
}

body[data-view="home"] .compact-wallet .wallet-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

body[data-view="home"] .compact-wallet .wallet-main > div {
  display: flex !important;
  height: 24px !important;
  align-items: center !important;
}

body[data-view="home"] .compact-wallet #balance-label {
  display: none !important;
}

body[data-view="home"] .compact-wallet #balance {
  max-width: 39px !important;
  color: #f8f9fa !important;
  font: 700 14px/20px "Open Sans", sans-serif !important;
}

body[data-view="home"] .compact-wallet .mode-switch {
  position: absolute !important;
  top: 4px !important;
  left: 93px !important;
  grid-template-columns: 44px 41px !important;
  width: 85px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="home"] .compact-wallet .mode-switch::after {
  position: absolute !important;
  top: 0 !important;
  left: 48px !important;
  display: block !important;
  width: 37px !important;
  height: 24px !important;
  color: #f8f9fa !important;
  content: "DEMO" !important;
  font: 700 11px/24px "Open Sans", sans-serif !important;
  text-align: left !important;
}

body[data-view="home"][data-mode="stars"] .compact-wallet .mode-switch::after {
  content: "STANDARD" !important;
  font-size: 9px !important;
}

body[data-view="home"] .compact-wallet .mode-chip,
body[data-view="home"] .compact-wallet .mode-chip[data-mode="stars"] {
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  min-height: 24px !important;
  color: transparent !important;
  font-size: 0 !important;
  background: transparent !important;
}

body[data-view="home"] .compact-wallet .mode-chip[data-mode="demo"] {
  background: linear-gradient(180deg, #f7c64a, #c89415) !important;
}

body[data-view="home"] .compact-wallet .mode-chip[data-mode="demo"]::after {
  display: block !important;
  top: 2px !important;
  left: 22px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  content: "" !important;
}

body[data-view="home"] .compact-wallet .mode-chip[data-mode="stars"] {
  position: absolute !important;
  left: 48px !important;
  width: 37px !important;
}

body[data-view="home"] .compact-wallet .mode-chip[data-mode="stars"]::before {
  display: none !important;
  content: none !important;
}

body[data-view="home"][data-mode="stars"] .compact-wallet .mode-chip[data-mode="stars"]::before {
  content: "STANDARD" !important;
  font-size: 9px !important;
}

body[data-view="home"] .app-shell {
  min-height: 1096px !important;
}

body[data-view="home"] #view-home {
  padding-top: 16px !important;
}

body[data-view="home"] .home-logo-lockup,
body[data-view="home"] .home-actions,
body[data-view="home"] #online-card {
  display: none !important;
}

body[data-view="home"] .quest-board {
  display: block !important;
  width: 328px !important;
}

.quest-head {
  display: block !important;
  margin: 0 0 12px !important;
}

.quest-head strong {
  display: block !important;
  color: #f8f9fa !important;
  font: 800 22px/29px "Montserrat", sans-serif !important;
  text-align: center !important;
}

.quest-head span {
  display: none !important;
}

.quest-tabs {
  position: relative !important;
  display: flex !important;
  height: 45px !important;
  min-height: 45px !important;
  align-items: end !important;
  justify-content: center !important;
  gap: 64px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.quest-tabs::after {
  position: absolute;
  right: 13px;
  bottom: 0;
  left: 13px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  content: "";
}

.quest-tab {
  position: relative !important;
  z-index: 1;
  width: auto !important;
  min-height: 32px !important;
  padding: 0 0 11px !important;
  color: #c2c4c6 !important;
  background: transparent !important;
  font: 600 12px/17px "Open Sans", sans-serif !important;
}

.quest-tab.active {
  color: #f3c64b !important;
  background: transparent !important;
}

.quest-tab.active::after {
  position: absolute;
  right: -24px;
  bottom: 0;
  left: -24px;
  height: 2px;
  border-radius: 2px;
  background: #f3c64b;
  content: "";
}

.quest-list {
  display: grid !important;
  gap: 8px !important;
}

.quest-item {
  position: relative !important;
  display: grid !important;
  width: 328px !important;
  min-height: 120px !important;
  grid-template-columns: 92px 1fr !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 6px 12px !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--fig-border) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(31, 34, 36, 0.96), rgba(19, 21, 22, 0.94)) !important;
}

.quest-item.figma-referral-task {
  min-height: 120px !important;
}

.quest-art {
  grid-row: 1 / 5 !important;
  display: grid !important;
  width: 80px !important;
  height: 80px !important;
  place-items: center !important;
  align-self: center !important;
}

.quest-art img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 18px rgba(73, 119, 255, 0.16)) !important;
}

.figma-referral-task .quest-art img {
  width: 92px !important;
  height: 92px !important;
}

.quest-topline {
  display: flex !important;
  min-height: 22px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.quest-status {
  display: inline-flex !important;
  height: 22px !important;
  align-items: center !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  color: #111 !important;
  background: #7cff65 !important;
  font: 700 11px/22px "Open Sans", sans-serif !important;
}

.quest-status.active {
  color: #fff !important;
  background: #4a7fdc !important;
}

.quest-status.idle {
  color: #f8f9fa !important;
  background: #293037 !important;
}

.quest-timer {
  color: #d8d9d9 !important;
  font: 600 11px/16px "Open Sans", sans-serif !important;
  white-space: nowrap !important;
}

.quest-copy {
  display: block !important;
}

.quest-copy strong {
  display: block !important;
  color: #f8f9fa !important;
  font: 800 16px/22px "Montserrat", sans-serif !important;
}

.quest-copy span {
  color: #aeb4b8 !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
}

.quest-copy b {
  color: #f8d05a !important;
  font-weight: 800 !important;
}

.quest-progress {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 10px !important;
  overflow: hidden !important;
  border-radius: 2px !important;
  background: #050606 !important;
}

.quest-progress span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #f7c64a, #d69a16) !important;
}

.quest-progress-text {
  color: #f8d05a !important;
  font: 700 11px/14px "Open Sans", sans-serif !important;
  text-align: center !important;
}

.quest-play {
  width: 100% !important;
  min-height: 34px !important;
  border-radius: 5px !important;
  font: 700 12px/16px "Open Sans", sans-serif !important;
}

.figma-referral-task .quest-play {
  grid-column: 2 !important;
}

.figma-referral-task .quest-copy {
  align-self: center !important;
}

/* Games list */
body[data-view="game"] .app-shell {
  min-height: 800px !important;
}

.game-hub {
  display: grid !important;
  grid-template-columns: repeat(2, 160px) !important;
  gap: 8px !important;
  width: 328px !important;
}

.game-card {
  position: relative !important;
  display: block !important;
  width: 160px !important;
  min-width: 160px !important;
  height: 214px !important;
  min-height: 214px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(34, 37, 40, 0.96), rgba(18, 20, 22, 0.96)) !important;
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.03), 0 18px 36px rgba(0, 0, 0, 0.28) !important;
}

.game-card::before {
  position: absolute;
  inset: 22px 18px 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 218, 95, 0.24), transparent 64%);
  content: "";
}

.game-card-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 160px !important;
  height: 160px !important;
  background-size: 138px 138px !important;
}

.game-card > div {
  position: relative !important;
  z-index: 2 !important;
  width: 160px !important;
  height: 54px !important;
  padding: 0 8px 8px !important;
  text-align: center !important;
}

.game-card strong {
  color: #f3c64b !important;
  font: 800 18px/24px "Montserrat", sans-serif !important;
}

.game-card small {
  color: #e7e6e1 !important;
  font: 400 14px/20px "Open Sans", sans-serif !important;
}

/* Store */
body[data-view="shop"] .app-shell {
  min-height: 894px !important;
}

.shop-card .leaderboard-head,
.balance-page .leaderboard-head,
.community-card .leaderboard-head,
.profile-card .leaderboard-head {
  text-align: center !important;
}

.shop-card .leaderboard-head h2,
.balance-page .leaderboard-head h2,
.community-card .leaderboard-head h2 {
  font: 800 22px/29px "Montserrat", sans-serif !important;
}

.shop-card .leaderboard-head span,
.shop-tabs {
  display: none !important;
}

.shop-list {
  gap: 8px !important;
}

.shop-item {
  min-height: 183px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
}

.shop-item.quality-rare,
.shop-item.quality-common {
  background: radial-gradient(circle at 92% -16%, rgba(111, 75, 255, 0.3), transparent 52%), linear-gradient(145deg, #191b46, #251081) !important;
}

.shop-item.quality-epic,
.shop-item.quality-premium {
  background: radial-gradient(circle at 92% -16%, rgba(255, 210, 47, 0.18), transparent 52%), linear-gradient(145deg, #342f0b, #5c510b) !important;
}

.shop-item.quality-legendary {
  background: radial-gradient(circle at 92% -16%, rgba(255, 24, 220, 0.34), transparent 52%), linear-gradient(145deg, #390045, #76008d) !important;
}

.shop-item-head {
  min-height: 22px !important;
}

.shop-item-head span {
  display: none !important;
}

.shop-item-head b {
  min-height: 22px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: #6148ff !important;
  font: 700 10px/14px "Open Sans", sans-serif !important;
}

.quality-epic .shop-item-head b,
.quality-premium .shop-item-head b {
  color: #101010 !important;
  background: #e7b82f !important;
}

.quality-legendary .shop-item-head b {
  background: #bd1cf1 !important;
}

.shop-item > strong {
  margin-top: 12px !important;
  color: #fff !important;
  font: 800 18px/24px "Montserrat", sans-serif !important;
}

.shop-item p {
  max-height: 39px !important;
  margin-top: 6px !important;
  color: #d1d5d8 !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
}

.shop-item-foot {
  right: 12px !important;
  bottom: 12px !important;
  left: 12px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.shop-item-foot > span {
  color: #f8f9fa !important;
  font: 800 14px/20px "Open Sans", sans-serif !important;
}

.shop-item-foot .shop-buy {
  width: 100% !important;
  min-height: 36px !important;
  border-radius: 5px !important;
}

/* Income */
body[data-view="earn"] .app-shell {
  min-height: 800px !important;
}

.earn-card {
  position: relative !important;
  min-height: 691px !important;
  padding: 0 !important;
  text-align: center !important;
}

.earn-card > div:first-child {
  min-height: 100px !important;
}

.earn-card h2 {
  margin: 0 !important;
  text-align: center !important;
  font: 800 18px/24px "Montserrat", sans-serif !important;
}

.earn-card .muted {
  width: 260px !important;
  margin: 4px auto 0 !important;
  color: #d5d7d8 !important;
  font: 400 11px/15px "Open Sans", sans-serif !important;
}

.earn-card > div:first-child::after {
  display: block;
  margin-top: 14px;
  color: #f8f9fa;
  content: "50";
  font: 800 18px/24px "Montserrat", sans-serif;
}

.earn-button {
  width: 280px !important;
  height: 280px !important;
  margin: 10px auto 0 !important;
  background:
    radial-gradient(circle, rgba(67, 74, 81, 0.86) 0 28%, transparent 29%),
    radial-gradient(circle, transparent 0 38%, rgba(70, 77, 84, 0.62) 39% 48%, transparent 49% 62%, rgba(70, 77, 84, 0.46) 63% 72%, transparent 73%) !important;
}

.earn-button .poker-chip {
  width: 116px !important;
  height: 116px !important;
}

.earn-meta {
  display: none !important;
}

/* Balance */
body[data-view="balance"] .app-shell {
  min-height: 1192px !important;
}

.wallet-grid {
  grid-template-columns: repeat(2, 160px) !important;
  gap: 8px !important;
  margin: 16px 0 12px !important;
}

.wallet-grid article {
  min-height: 120px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.wallet-grid article:first-child {
  background: linear-gradient(145deg, rgba(88, 75, 16, 0.88), rgba(47, 45, 22, 0.92)) !important;
}

.wallet-grid article:nth-child(2) {
  background: linear-gradient(145deg, rgba(82, 7, 103, 0.9), rgba(46, 22, 62, 0.94)) !important;
}

.wallet-grid article span {
  color: #fff !important;
  font: 700 12px/17px "Open Sans", sans-serif !important;
}

.wallet-grid article strong {
  margin-top: 12px !important;
  color: #fff7c0 !important;
  font: 800 20px/28px "Montserrat", sans-serif !important;
}

.wallet-grid article small {
  color: #d5d7d8 !important;
}

.balance-actions .gold-button {
  width: 328px !important;
  min-height: 44px !important;
  margin-bottom: 22px !important;
}

.withdraw-card,
.payments-card {
  width: 328px !important;
  padding: 12px !important;
  border: 1px solid var(--fig-border) !important;
  border-radius: 8px !important;
  background: rgba(12, 13, 13, 0.76) !important;
}

.withdraw-card-head {
  display: block !important;
}

.withdraw-card-head span {
  color: #727a80 !important;
  text-transform: uppercase !important;
}

.withdraw-card-head strong {
  font: 800 14px/20px "Montserrat", sans-serif !important;
}

.withdraw-card-head small {
  display: block !important;
  margin-top: 6px !important;
  color: #d0d3d5 !important;
  font: 400 11px/15px "Open Sans", sans-serif !important;
}

.withdraw-fields {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.withdraw-fields label span {
  display: none !important;
}

.withdraw-fields input {
  width: 100% !important;
  min-height: 36px !important;
}

.withdraw-quote {
  margin: 8px 0 !important;
}

.payments-card {
  margin-top: 22px !important;
  border: 0 !important;
  background: transparent !important;
}

.payments-card h2 {
  margin: 0 0 10px !important;
  text-align: center !important;
  font: 800 22px/29px "Montserrat", sans-serif !important;
}

.history li,
.payments-card li {
  min-height: 48px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

/* Community */
body[data-view="community"] .app-shell {
  min-height: 806px !important;
}

.community-card .leaderboard-head span,
.friends-card .leaderboard-head,
.leaderboard-card .leaderboard-head span,
.community-card {
  margin-bottom: 0 !important;
}

.community-switch,
.rating-tabs {
  display: flex !important;
  height: 45px !important;
  min-height: 45px !important;
  align-items: end !important;
  justify-content: center !important;
  gap: 72px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.community-tab,
.rating-tab {
  min-height: 32px !important;
  padding: 0 0 11px !important;
  color: #c2c4c6 !important;
  background: transparent !important;
  font: 600 12px/17px "Open Sans", sans-serif !important;
}

.community-tab.active,
.rating-tab.active {
  color: #f3c64b !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 #f3c64b !important;
}

.friend-search {
  display: grid !important;
  grid-template-columns: 1fr 54px !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
}

.friend-search input {
  min-height: 44px !important;
  border-radius: 6px !important;
}

.friend-search .gold-button {
  min-width: 54px !important;
  width: 54px !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: transparent !important;
}

.friend-search .gold-button::before {
  display: block;
  color: #101010;
  content: "⌕";
  font: 800 26px/42px "Open Sans", sans-serif;
}

.friend-columns {
  display: grid !important;
  gap: 16px !important;
}

.friend-columns > section > strong {
  display: block !important;
  margin-bottom: 8px !important;
  font: 800 16px/22px "Montserrat", sans-serif !important;
}

.friend-list {
  display: grid !important;
  gap: 6px !important;
}

.friend-list > *,
.leaderboard li {
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(30, 34, 37, 0.92) !important;
}

.leaderboard {
  display: grid !important;
  gap: 6px !important;
  padding: 0 !important;
}

.leaderboard li {
  min-height: 72px !important;
  padding: 10px 12px !important;
}

/* Profile */
body[data-view="profile"] .app-shell {
  min-height: 1566px !important;
}

.profile-card {
  padding: 0 !important;
}

.profile-head {
  display: grid !important;
  grid-template-columns: 60px 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.profile-head .avatar {
  width: 60px !important;
  height: 60px !important;
}

.profile-head .eyebrow {
  color: #f8f9fa !important;
  font: 800 18px/24px "Montserrat", sans-serif !important;
  text-transform: none !important;
}

.profile-head .eyebrow::before {
  content: "Мой аккаунт";
}

.profile-head .eyebrow {
  font-size: 0 !important;
}

.profile-head .eyebrow::before {
  font-size: 18px !important;
  text-transform: none !important;
}

.profile-head h2 {
  margin: 2px 0 0 !important;
  color: #aeb4b8 !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
}

.profile-edit-form {
  grid-template-columns: 1fr 88px !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.profile-edit-form #profile-save {
  grid-column: 1 / -1 !important;
}

.stats,
.profile-game-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 160px) !important;
  gap: 8px !important;
}

.stats > div,
.profile-game-stats > div {
  min-height: 73px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.stats span,
.profile-game-stats span {
  color: #aeb4b8 !important;
  font: 600 11px/15px "Open Sans", sans-serif !important;
}

.stats strong,
.profile-game-stats strong {
  margin-top: 4px !important;
  color: #f8d05a !important;
  font: 800 22px/29px "Montserrat", sans-serif !important;
}

.profile-game-card,
.promo-card,
.settings-card,
.referral-card,
.history-wrap {
  margin-top: 16px !important;
}

.promo-card,
.referral-card,
.settings-card,
.history-wrap,
.profile-game-card,
.cosmetics-card {
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(12, 13, 13, 0.58) !important;
}

.profile-cosmetics-button {
  width: 328px !important;
  margin-top: 16px !important;
}

/* Bottom navigation */
.bottom-nav {
  position: fixed !important;
  z-index: 120 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: grid !important;
  width: min(100%, 360px) !important;
  height: 59px !important;
  min-height: 59px !important;
  grid-template-columns: repeat(6, 53px) !important;
  column-gap: 6px !important;
  margin: 0 auto !important;
  padding: 0 6px !important;
  border-top: 1px solid rgba(255, 224, 126, 0.16) !important;
  background: linear-gradient(180deg, rgba(28, 25, 16, 0.78), rgba(8, 8, 8, 0.98)) !important;
  backdrop-filter: blur(18px) !important;
}

.nav-item {
  position: relative !important;
  display: grid !important;
  width: 53px !important;
  height: 45px !important;
  grid-template-rows: 24px 14px !important;
  place-items: center !important;
  row-gap: 4px !important;
  margin-top: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f8f9fa !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-item.active {
  color: #f3c64b !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-item.active::after {
  position: absolute;
  right: 11.5px;
  bottom: -7px;
  left: 11.5px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #f3c64b;
  content: "";
}

.nav-item .nav-icon {
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
}

.nav-item span:last-child {
  overflow: hidden !important;
  color: currentColor !important;
  font: 600 10px/14px "Open Sans", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* v6: coordinates from the designer's Figma frames, not inferred layout. */
body[data-view="home"] .app-shell { min-height: 1096px !important; }
body[data-view="shop"] .app-shell { min-height: 894px !important; }
body[data-view="balance"] .app-shell { min-height: 1192px !important; }
body[data-view="community"] .app-shell { min-height: 806px !important; }
body[data-view="profile"] .app-shell { min-height: 1566px !important; }
body[data-view="earn"] .app-shell,
body[data-view="game"] .app-shell,
body[data-view="dice"] .app-shell,
body[data-view="rps"] .app-shell,
body[data-view="uno"] .app-shell { min-height: 800px !important; }

body[data-view="home"] .view,
body[data-view="shop"] .view,
body[data-view="balance"] .view,
body[data-view="community"] .view,
body[data-view="profile"] .view,
body[data-view="earn"] .view,
body[data-view="game"] .view {
  padding: 16px 0 0 !important;
}

/* Figma Home frame 30:2298 */
body[data-view="home"] .quest-head {
  width: 328px !important;
  height: 77px !important;
  margin: 0 0 16px !important;
}

body[data-view="home"] .quest-head strong {
  height: 29px !important;
}

body[data-view="home"] .quest-tabs {
  height: 40px !important;
  min-height: 40px !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

body[data-view="home"] .quest-list {
  gap: 8px !important;
}

body[data-view="home"] .quest-item:nth-child(1) {
  min-height: 166px !important;
  height: 166px !important;
}

body[data-view="home"] .quest-item:nth-child(2) {
  min-height: 150px !important;
  height: 150px !important;
}

body[data-view="home"] .quest-item:nth-child(3) {
  min-height: 272px !important;
  height: 272px !important;
  align-content: start !important;
}

body[data-view="home"] .quest-item:nth-child(4) {
  min-height: 250px !important;
  height: 250px !important;
  align-content: start !important;
}

body[data-view="home"] .quest-item {
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #2c3033 !important;
}

body[data-view="home"] .quest-copy strong {
  font: 800 16px/22px "Montserrat", sans-serif !important;
}

body[data-view="home"] .quest-art img {
  width: 86px !important;
  height: 86px !important;
}

body[data-view="home"] .figma-referral-task .quest-art img {
  width: 104px !important;
  height: 104px !important;
}

/* Figma Store frame 30:2309 */
body[data-view="shop"] .shop-card .leaderboard-head {
  height: 29px !important;
  margin: 0 0 16px !important;
}

body[data-view="shop"] .shop-list {
  gap: 8px !important;
}

body[data-view="shop"] .shop-item {
  width: 328px !important;
  min-height: 224px !important;
  height: 224px !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

body[data-view="shop"] .shop-item:nth-child(3n) {
  min-height: 244px !important;
  height: 244px !important;
}

body[data-view="shop"] .shop-item > strong {
  margin-top: 24px !important;
}

body[data-view="shop"] .shop-item-foot {
  bottom: 12px !important;
}

body[data-view="shop"] .shop-item-foot .shop-buy {
  min-height: 44px !important;
  height: 44px !important;
}

/* Figma Balance frame 30:2320 */
body[data-view="balance"] .balance-page .leaderboard-head {
  height: 29px !important;
  margin: 0 0 16px !important;
}

body[data-view="balance"] .wallet-grid {
  height: 120px !important;
  margin: 16px 0 !important;
}

body[data-view="balance"] .wallet-grid article {
  width: 160px !important;
  height: 120px !important;
  min-height: 120px !important;
  border-radius: 10px !important;
}

body[data-view="balance"] .balance-actions {
  height: 44px !important;
  margin: 0 0 48px !important;
}

body[data-view="balance"] .balance-actions .gold-button {
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
}

body[data-view="balance"] .withdraw-card {
  min-height: 279px !important;
  margin: 0 0 32px !important;
  padding: 12px !important;
}

body[data-view="balance"] .withdraw-fields {
  margin-top: 16px !important;
}

body[data-view="balance"] .withdraw-card .gold-button {
  height: 44px !important;
  min-height: 44px !important;
}

body[data-view="balance"] #withdraw-amount {
  padding-right: 46px !important;
  background-image: url("/assets/figma/coin-demo.webp") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 12px) center !important;
  background-size: 24px 24px !important;
}

body[data-view="balance"] .payments-card {
  min-height: 438px !important;
  padding: 0 !important;
}

body[data-view="balance"] .payments-card h2 {
  height: 29px !important;
  margin: 0 0 8px !important;
}

.balance-history-tabs {
  position: relative !important;
  display: grid !important;
  width: 328px !important;
  height: 40px !important;
  grid-template-columns: 1fr 1fr !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.balance-history-tabs span {
  display: grid !important;
  place-items: center !important;
  color: #c2c4c6 !important;
  font: 600 12px/17px "Open Sans", sans-serif !important;
}

.balance-history-tabs span.active {
  color: #f3c64b !important;
  box-shadow: inset 0 -2px 0 #f3c64b !important;
}

body[data-view="balance"] .payments-card .history li {
  height: 57px !important;
  min-height: 57px !important;
}

/* Figma Games frame 30:2480 */
body[data-view="game"] .game-hub {
  grid-template-columns: repeat(2, 160px) !important;
  gap: 8px !important;
}

body[data-view="game"] .game-card {
  width: 160px !important;
  height: 214px !important;
  min-height: 214px !important;
  border-radius: 10px !important;
}

body[data-view="game"] .game-card:nth-child(3) {
  height: 234px !important;
  min-height: 234px !important;
}

body[data-view="game"] .game-card-icon {
  width: 160px !important;
  height: 160px !important;
  background-size: 148px 148px !important;
}

body[data-view="game"] .game-card > div {
  width: 160px !important;
  height: 54px !important;
}

/* Figma Income frame 30:2468 */
body[data-view="earn"] .earn-card {
  min-height: 691px !important;
}

body[data-view="earn"] .earn-card > div:first-child {
  width: 328px !important;
  height: 77px !important;
  min-height: 77px !important;
}

body[data-view="earn"] .earn-card > div:first-child::after {
  margin-top: 14px !important;
}

body[data-view="earn"] .earn-button {
  width: 268px !important;
  height: 268px !important;
  margin-top: 8px !important;
}

body[data-view="earn"] .earn-button .poker-chip {
  width: 142px !important;
  height: 142px !important;
}

/* Figma Account frame 30:2399 */
body[data-view="profile"] .profile-card {
  position: relative !important;
  min-height: 440px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="profile"] .profile-head {
  height: 60px !important;
  margin: 0 0 16px !important;
}

body[data-view="profile"] .profile-edit-form {
  display: none !important;
}

body[data-view="profile"] .stats {
  margin-top: 64px !important;
}

body[data-view="profile"] .stats > div {
  width: 160px !important;
  height: 73px !important;
  min-height: 73px !important;
}

body[data-view="profile"] .profile-game-card {
  position: absolute !important;
  top: 76px !important;
  left: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 328px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="profile"] .profile-game-card .leaderboard-head,
body[data-view="profile"] .profile-game-card .profile-game-stats {
  display: none !important;
}

body[data-view="profile"] .profile-game-tabs {
  display: grid !important;
  width: 382px !important;
  height: 32px !important;
  min-height: 32px !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="profile"] .profile-game-tab {
  min-width: 60px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  color: #c2c4c6 !important;
  background: rgba(30, 34, 37, 0.68) !important;
  font: 700 12px/17px "Open Sans", sans-serif !important;
}

body[data-view="profile"] .profile-game-tab.active {
  color: #101010 !important;
  background: linear-gradient(180deg, #f7c64a, #d69a16) !important;
}

body[data-view="profile"] .promo-card {
  min-height: 263px !important;
  margin-top: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="profile"] .promo-card .leaderboard-head {
  height: 29px !important;
  margin-bottom: 16px !important;
  text-align: center !important;
}

body[data-view="profile"] .promo-card .leaderboard-head span {
  display: none !important;
}

body[data-view="profile"] .promo-form,
body[data-view="profile"] .promo-card #promo-status {
  width: 328px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #202428, #121314) !important;
}

body[data-view="profile"] .promo-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  min-height: 162px !important;
}

body[data-view="profile"] .promo-card #promo-status {
  display: none !important;
}

body[data-view="profile"] .settings-card,
body[data-view="profile"] .profile-cosmetics-button,
body[data-view="profile"] .cosmetics-card {
  display: none !important;
}

body[data-view="profile"] .referral-card {
  min-height: 236px !important;
  margin-top: 0px !important;
  /*padding: 0 !important;*/
  border: 0 !important;
  background: transparent !important;
}

body[data-view="profile"] .referral-card > div:first-child {
  min-height: 118px !important;
  padding: 12px !important;
  border-radius: 10px 10px 0 0 !important;
  background: linear-gradient(180deg, #202428, #121314) !important;
}

body[data-view="profile"] .referral-meta {
  min-height: 29px !important;
  padding: 0 12px 8px !important;
  background: #121314 !important;
}

body[data-view="profile"] .referral-card .gold-button {
  width: 304px !important;
  height: 44px !important;
  min-height: 44px !important;
  /*margin: 0 12px 12px !important;*/
}

body[data-view="profile"] .history-wrap {
  min-height: 390px !important;
  margin-top: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="profile"] .history-wrap h2 {
  height: 29px !important;
  margin-bottom: 16px !important;
  text-align: center !important;
}

body[data-view="profile"] .history-wrap .history li {
  /*height: 57px !important;*/
  /*min-height: 57px !important;*/
  /*border: 1px solid rgba(255, 255, 255, 0.04) !important;*/
  /*border-radius: 0 !important;*/
  /*background: rgba(3, 4, 4, 0.42) !important;*/
}

/* Figma game intro frames 155:4687 / 155:7993 / 180:4301 */
body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-topbar,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-topbar,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-topbar {
  display: block !important;
  height: 52px !important;
  background: transparent !important;
}

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

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-back-button,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-back-button,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-back-button {
  opacity: 0 !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  top: 113px !important;
  left: 0 !important;
  width: 328px !important;
  height: 390px !important;
  margin: 0 auto !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro img,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro img,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro img {
  width: 260px !important;
  height: 260px !important;
  margin: 0 auto !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro h1,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro h1,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro h1 {
  margin-top: 16px !important;
  color: #f5b041 !important;
  font: 800 40px/48px "Montserrat", sans-serif !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro p,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro p,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro p {
  margin-top: 12px !important;
  font: 400 16px/24px "Open Sans", sans-serif !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .controls,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-controls {
  position: absolute !important;
  right: 0 !important;
  bottom: 16px !important;
  left: 0 !important;
  width: 328px !important;
  margin: 0 auto !important;
}

/* Dice in-round screen: PDF page 39 layout. */
body[data-view="dice"][data-dice-state="playing"] .dice-stage,
body[data-view="dice"][data-dice-state="settled"] .dice-stage {
  width: 328px !important;
  min-height: 230px !important;
  grid-template-columns: 130px 68px 130px !important;
  margin: 12px 0 24px !important;
  align-items: start !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel,
body[data-view="dice"][data-dice-state="settled"] .player-panel {
  width: 130px !important;
  height: 230px !important;
  min-width: 130px !important;
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  grid-template-rows: 22px 22px 124px 24px !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel.rival,
body[data-view="dice"][data-dice-state="settled"] .player-panel.rival {
  grid-template-columns: 1fr 44px !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .dice-avatar,
body[data-view="dice"][data-dice-state="settled"] .player-panel .dice-avatar {
  width: 44px !important;
  height: 44px !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  border: 2px solid #f5b041 !important;
  background-color: #1e2225 !important;
}

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

body[data-view="dice"][data-dice-state="playing"] .player-panel .side-kicker,
body[data-view="dice"][data-dice-state="settled"] .player-panel .side-kicker {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  color: #f5b041 !important;
  font: 800 17px/22px "Montserrat", sans-serif !important;
  text-align: left !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel.rival .side-kicker,
body[data-view="dice"][data-dice-state="settled"] .player-panel.rival .side-kicker {
  grid-column: 1 !important;
  text-align: right !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel > strong,
body[data-view="dice"][data-dice-state="settled"] .player-panel > strong {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  color: #939ba2 !important;
  font: 400 13px/18px "Open Sans", sans-serif !important;
  text-align: left !important;
}

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

body[data-view="dice"][data-dice-state="playing"] .player-panel .die,
body[data-view="dice"][data-dice-state="settled"] .player-panel .die {
  width: 124px !important;
  height: 124px !important;
  min-height: 124px !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: center !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel > small,
body[data-view="dice"][data-dice-state="settled"] .player-panel > small {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  align-self: end !important;
  color: #939ba2 !important;
  font: 400 13px/20px "Open Sans", sans-serif !important;
  text-align: center !important;
}

body[data-view="dice"][data-dice-state="playing"] .versus,
body[data-view="dice"][data-dice-state="settled"] .versus {
  width: 68px !important;
  height: 176px !important;
  padding-top: 86px !important;
  align-content: start !important;
}

body[data-view="dice"][data-dice-state="playing"] .versus > span,
body[data-view="dice"][data-dice-state="settled"] .versus > span {
  font: 900 42px/42px "Montserrat", sans-serif !important;
  text-shadow: 0 0 24px rgba(245, 176, 65, 0.35) !important;
}

body[data-view="dice"][data-dice-state="playing"] .versus #dice-score,
body[data-view="dice"][data-dice-state="settled"] .versus #dice-score {
  margin-top: 8px !important;
  color: #f8f9fa !important;
  font: 800 14px/20px "Open Sans", sans-serif !important;
}

body[data-view="dice"][data-dice-state="playing"] .css-dice-scene,
body[data-view="dice"][data-dice-state="settled"] .css-dice-scene {
  width: 88px !important;
  height: 88px !important;
}

body[data-view="dice"][data-dice-state="playing"] .css-dice-cube,
body[data-view="dice"][data-dice-state="settled"] .css-dice-cube {
  --dice-size: 88px;
  --dice-half: 44px;
}

body[data-view="dice"][data-dice-state="playing"] .css-dice-pip,
body[data-view="dice"][data-dice-state="settled"] .css-dice-pip {
  width: 15px !important;
  height: 15px !important;
}

body[data-view="dice"][data-dice-state="playing"] .bet-head,
body[data-view="dice"][data-dice-state="settled"] .bet-head {
  justify-content: center !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}

body[data-view="dice"][data-dice-state="playing"] .bet-head label,
body[data-view="dice"][data-dice-state="settled"] .bet-head label {
  width: 100% !important;
  color: #f8f9fa !important;
  font: 800 20px/28px "Montserrat", sans-serif !important;
}

body[data-view="dice"][data-dice-state="playing"] #mode-note,
body[data-view="dice"][data-dice-state="settled"] #mode-note,
body[data-view="dice"][data-dice-state="playing"] .bet-warning,
body[data-view="dice"][data-dice-state="settled"] .bet-warning,
body[data-view="dice"][data-dice-state="playing"] .dice-room-search,
body[data-view="dice"][data-dice-state="settled"] .dice-room-search,
body[data-view="dice"][data-dice-state="playing"] .dice-room-list,
body[data-view="dice"][data-dice-state="settled"] .dice-room-list {
  display: none !important;
}

body[data-view="dice"][data-dice-state="playing"] .chat-card,
body[data-view="dice"][data-dice-state="settled"] .chat-card {
  margin-top: 36px !important;
}

body[data-view="dice"][data-dice-state="playing"] .chat-head,
body[data-view="dice"][data-dice-state="settled"] .chat-head {
  display: none !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .die,
body[data-view="dice"][data-dice-state="settled"] .player-panel .die {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .die::before,
body[data-view="dice"][data-dice-state="settled"] .player-panel .die::before {
  display: none !important;
  content: none !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .side-kicker,
body[data-view="dice"][data-dice-state="settled"] .player-panel .side-kicker {
  overflow: visible !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

body[data-view="balance"] .withdraw-quote {
  display: none !important;
}

/* Dice reference: lightweight CSS cube, matching the white/gold Figma sheet. */
.player-panel .die {
  position: relative !important;
  display: grid !important;
  width: 102px !important;
  height: 102px !important;
  min-height: 102px !important;
  place-items: center !important;
  contain: layout paint style !important;
  perspective: 520px !important;
}

.player-panel .die::after,
.player-panel .die .die-ready-face,
.player-panel .die .telegram-dice-emoji,
.player-panel .die .die-roll-clip,
.player-panel .die .dice-webgl-canvas {
  display: none !important;
}

body[data-view="dice"] .player-panel .die > .css-dice-scene,
.css-dice-scene {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 74px !important;
  height: 74px !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  transform: translateY(4px) rotateX(-12deg) rotateY(24deg) !important;
}

.css-dice-cube {
  --dice-size: 74px;
  --dice-half: 37px;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: var(--dice-size) !important;
  height: var(--dice-size) !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  transform: rotateX(-12deg) rotateY(24deg) rotateZ(-2deg) !important;
  transition: transform 220ms ease-out !important;
  will-change: transform !important;
}

.css-dice-cube[data-face="1"] { transform: rotateX(-12deg) rotateY(24deg) rotateZ(-2deg) !important; }
.css-dice-cube[data-face="2"] { transform: rotateX(-12deg) rotateY(24deg) rotateZ(1deg) !important; }
.css-dice-cube[data-face="3"] { transform: rotateX(-10deg) rotateY(22deg) rotateZ(-1deg) !important; }
.css-dice-cube[data-face="4"] { transform: rotateX(-13deg) rotateY(26deg) rotateZ(2deg) !important; }
.css-dice-cube[data-face="5"] { transform: rotateX(-11deg) rotateY(23deg) rotateZ(-2deg) !important; }
.css-dice-cube[data-face="6"] { transform: rotateX(-12deg) rotateY(25deg) rotateZ(1deg) !important; }

.css-dice-face {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  width: var(--dice-size) !important;
  height: var(--dice-size) !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  padding: 14px !important;
  border: 1px solid rgba(215, 202, 175, 0.9) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 28%),
    linear-gradient(145deg, #fffdf8 0%, #f9f5eb 52%, #e6dccd 100%) !important;
  box-shadow:
    inset 0 1px 8px rgba(255, 255, 255, 0.95),
    inset 0 -10px 18px rgba(173, 143, 92, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.24) !important;
  backface-visibility: hidden !important;
}

.css-dice-face-1 { transform: rotateY(0deg) translateZ(var(--dice-half)) !important; }
.css-dice-face-6 { transform: rotateY(180deg) translateZ(var(--dice-half)) !important; }
.css-dice-face-3 { transform: rotateY(-90deg) translateZ(var(--dice-half)) !important; }
.css-dice-face-4 { transform: rotateY(90deg) translateZ(var(--dice-half)) !important; }
.css-dice-face-2 { transform: rotateX(90deg) translateZ(var(--dice-half)) !important; }
.css-dice-face-5 { transform: rotateX(-90deg) translateZ(var(--dice-half)) !important; }

.css-dice-pip {
  position: relative !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 40% 35%, #fff1a5 0 14%, #ffc33f 35%, #b47405 66%, #6d3d00 100%) !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.72),
    inset 0 -2px 4px rgba(75, 36, 0, 0.45),
    0 0 0 2px rgba(141, 85, 0, 0.32),
    0 0 11px rgba(255, 186, 46, 0.35) !important;
}

.css-dice-pip::before {
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(177, 126, 34, 0.28), transparent 66%);
  content: "";
}

.css-dice-pip-1 { grid-area: 1 / 1; }
.css-dice-pip-2 { grid-area: 1 / 2; }
.css-dice-pip-3 { grid-area: 1 / 3; }
.css-dice-pip-4 { grid-area: 2 / 1; }
.css-dice-pip-5 { grid-area: 2 / 2; }
.css-dice-pip-6 { grid-area: 2 / 3; }
.css-dice-pip-7 { grid-area: 3 / 1; }
.css-dice-pip-8 { grid-area: 3 / 2; }
.css-dice-pip-9 { grid-area: 3 / 3; }

body[data-view="dice"] .player-panel .die > .css-dice-shadow,
.css-dice-shadow {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  right: 12px !important;
  bottom: 0 !important;
  left: 12px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0) 72%) !important;
  filter: blur(2px) !important;
  transform: translateY(6px) !important;
}

.die.rolling .css-dice-scene {
  animation: figma-dice-drop 2100ms cubic-bezier(0.22, 0.78, 0.22, 1) both !important;
}

.die.rolling .css-dice-cube {
  animation: figma-dice-spin 2100ms cubic-bezier(0.18, 0.82, 0.25, 1) both !important;
}

.die.rolling .css-dice-shadow {
  animation: figma-dice-shadow 2100ms ease-out both !important;
}

.die.settled .css-dice-scene {
  animation: figma-dice-settle 260ms ease-out both !important;
}

@keyframes figma-dice-drop {
  0% { transform: translateY(-34px) scale(0.9) rotateX(-26deg) rotateY(-18deg); filter: blur(0.6px); }
  10% { transform: translateY(-18px) scale(0.94) rotateX(-16deg) rotateY(28deg); }
  57% { transform: translateY(6px) scale(1) rotateX(-10deg) rotateY(18deg); filter: blur(0); }
  79% { transform: translateY(-5px) scale(0.99) rotateX(-15deg) rotateY(22deg); }
  88% { transform: translateY(3px) scale(1) rotateX(-12deg) rotateY(24deg); }
  100% { transform: translateY(4px) scale(1) rotateX(-12deg) rotateY(24deg); }
}

@keyframes figma-dice-spin {
  0% { transform: rotateX(-520deg) rotateY(330deg) rotateZ(-90deg); }
  28% { transform: rotateX(-760deg) rotateY(610deg) rotateZ(120deg); }
  58% { transform: rotateX(-960deg) rotateY(780deg) rotateZ(260deg); }
  80% { transform: rotateX(-1040deg) rotateY(850deg) rotateZ(312deg); }
}

@keyframes figma-dice-shadow {
  0% { opacity: 0.08; transform: translateY(10px) scale(0.56); filter: blur(5px); }
  52% { opacity: 0.5; transform: translateY(6px) scale(1); filter: blur(2px); }
  76% { opacity: 0.28; transform: translateY(8px) scale(0.82); }
  100% { opacity: 0.44; transform: translateY(6px) scale(0.92); }
}

@keyframes figma-dice-settle {
  0% { transform: translateY(4px) scale(1.02) rotateX(-12deg) rotateY(24deg); }
  100% { transform: translateY(4px) scale(1) rotateX(-12deg) rotateY(24deg); }
}

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

/* v10: screen-by-screen parity with the designer PDF. */

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .plus-pill {
  border: 0 !important;
  color: #111 !important;
  background: linear-gradient(180deg, #ffc42f, #dfa008) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .level-pill {
  border: 1px solid #454a4e !important;
  background: #1e2225 !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .level-pill strong {
  color: #f8f9fa !important;
}

/* Home tasks */
body[data-view="home"] .quest-item {
  grid-template-columns: 92px 1fr !important;
  grid-template-rows: 22px minmax(70px, auto) 12px 44px !important;
  align-content: start !important;
  gap: 8px 10px !important;
  padding: 12px !important;
  background: linear-gradient(145deg, rgba(18, 20, 21, 0.96), rgba(10, 11, 12, 0.98)) !important;
}

body[data-view="home"] .quest-item .quest-topline {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

body[data-view="home"] .quest-item .quest-art {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 86px !important;
  height: 86px !important;
}

body[data-view="home"] .quest-item .quest-copy {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
}

body[data-view="home"] .quest-item .quest-progress {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  height: 12px !important;
}

body[data-view="home"] .quest-item .quest-progress-text {
  z-index: 2 !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: center !important;
  color: #f8f9fa !important;
  font-size: 10px !important;
  line-height: 12px !important;
  text-align: center !important;
}

body[data-view="home"] .quest-item .quest-play {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  height: 44px !important;
  min-height: 44px !important;
}

body[data-view="home"] .quest-item.complete .quest-progress,
body[data-view="home"] .quest-item.complete .quest-progress-text,
body[data-view="home"] .quest-item.complete .quest-play,
body[data-view="home"] .quest-item.claimed .quest-progress,
body[data-view="home"] .quest-item.claimed .quest-progress-text,
body[data-view="home"] .quest-item.claimed .quest-play {
  display: none !important;
}

body[data-view="home"] .quest-item.complete,
body[data-view="home"] .quest-item.claimed {
  grid-template-rows: 22px 92px !important;
}

body[data-view="home"] .figma-referral-task {
  grid-template-rows: 92px 44px !important;
}

body[data-view="home"] .figma-referral-task .quest-art {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 94px !important;
  height: 94px !important;
}

body[data-view="home"] .figma-referral-task .quest-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body[data-view="home"] .figma-referral-task .quest-play {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body[data-view="home"] .quest-item:nth-child(3),
body[data-view="home"] .quest-item:nth-child(4) {
  height: auto !important;
  min-height: 196px !important;
}

body[data-view="home"] .app-shell {
  min-height: 1010px !important;
}

/* Store */
body[data-view="shop"] .shop-item {
  height: 224px !important;
  min-height: 224px !important;
}

body[data-view="shop"] .shop-list .shop-item:nth-child(1) {
  background:
    radial-gradient(190px 190px at 105% 0%, rgba(54, 44, 155, 0.48), transparent 62%),
    linear-gradient(135deg, rgba(36, 21, 151, 0.96), rgba(19, 20, 84, 0.9)) !important;
}

body[data-view="shop"] .shop-list .shop-item:nth-child(2) {
  background:
    radial-gradient(190px 190px at 105% 0%, rgba(164, 136, 34, 0.32), transparent 62%),
    linear-gradient(135deg, rgba(83, 67, 0, 0.96), rgba(57, 47, 0, 0.9)) !important;
}

body[data-view="shop"] .shop-list .shop-item:nth-child(3) {
  background:
    radial-gradient(190px 190px at 105% 0%, rgba(188, 35, 208, 0.35), transparent 62%),
    linear-gradient(135deg, rgba(94, 7, 106, 0.96), rgba(63, 7, 81, 0.92)) !important;
}

body[data-view="shop"] .shop-item > strong {
  display: block !important;
  margin-top: 12px !important;
}

body[data-view="shop"] .shop-item p {
  display: block !important;
  max-height: 42px !important;
  overflow: hidden !important;
  margin: 8px 0 0 !important;
  color: #f4f1e4 !important;
  font: 400 14px/20px "Open Sans", sans-serif !important;
  opacity: 0.86 !important;
}

/* Balance */
.withdraw-section-title {
  margin: 0 0 16px !important;
  color: #f8f9fa !important;
  font: 800 22px/29px "Montserrat", sans-serif !important;
  text-align: center !important;
}

.history-more-button {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 16px;
  border: 1px solid #e9ad16;
  border-radius: 8px;
  color: #e9ad16;
  background: transparent;
  font: 700 13px/18px "Open Sans", sans-serif;
}

body[data-view="balance"] .payments-card .history:has(li:only-child) + .history-more-button {
  display: none;
}

/* Community */
body[data-view="community"] .community-card .leaderboard-head span,
body[data-view="community"] .friends-card .leaderboard-head,
body[data-view="community"] .leaderboard-card .leaderboard-head {
  display: none !important;
}

body[data-view="community"] .community-card,
body[data-view="community"] .friends-card,
body[data-view="community"] .leaderboard-card {
  width: 328px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="community"] .community-card .leaderboard-head {
  display: block !important;
  margin: 0 0 8px !important;
}

body[data-view="community"] .community-card .leaderboard-head h2 {
  margin: 0 !important;
  text-align: center !important;
}

body[data-view="community"] .friend-search .gold-button {
  position: relative !important;
  border-radius: 8px !important;
}

body[data-view="community"] .friend-search .gold-button::before {
  width: 18px;
  height: 18px;
  margin: auto;
  border: 2px solid #111;
  border-radius: 50%;
  content: "" !important;
}

body[data-view="community"] .friend-search .gold-button::after {
  position: absolute;
  top: 29px;
  left: 34px;
  width: 9px;
  height: 2px;
  background: #111;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}

body[data-view="community"] .friend-list > .muted {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 13px 0 !important;
  color: #7e858a !important;
  background: transparent !important;
  text-align: left !important;
}

body[data-view="community"] .friend-card {
  min-height: 48px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.friend-empty-state {
  display: grid;
  width: 328px;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.friend-empty-state p {
  margin: 0;
  color: #8f969b;
  line-height: 20px;
}

.friend-empty-state img {
  width: 220px;
  height: 260px;
  object-fit: contain;
}

.friend-empty-state strong {
  max-width: 300px;
  font: 700 14px/20px "Open Sans", sans-serif;
}

.friend-empty-state .gold-button {
  width: 304px;
  height: 44px;
}

body[data-view="community"] .rating-tabs {
  gap: 64px !important;
  margin-bottom: 16px !important;
}

body[data-view="community"] .leaderboard {
  gap: 8px !important;
}

body[data-view="community"] .leaderboard .rating-row {
  display: grid !important;
  min-height: 86px !important;
  grid-template-columns: 28px 1fr 116px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(35, 38, 40, 0.94) !important;
}

body[data-view="community"] .leaderboard .rating-rank-1 {
  background: linear-gradient(105deg, rgba(106, 82, 19, 0.9), rgba(38, 42, 44, 0.96)) !important;
}

body[data-view="community"] .leaderboard .rating-rank-2 {
  background: linear-gradient(105deg, rgba(76, 77, 76, 0.9), rgba(38, 42, 44, 0.96)) !important;
}

body[data-view="community"] .leaderboard .rating-rank-3 {
  background: linear-gradient(105deg, rgba(113, 57, 25, 0.9), rgba(38, 42, 44, 0.96)) !important;
}

.rating-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #f2bd25;
  font: 800 13px/18px "Montserrat", sans-serif;
}

.rating-player,
.rating-metrics {
  display: grid;
  gap: 6px;
}

.rating-player > b,
.rating-metrics > b,
.rating-metrics > small {
  color: #f8f9fa !important;
  font: 600 13px/18px "Open Sans", sans-serif !important;
}

.rating-player > strong {
  color: #f8f9fa !important;
  font: 800 21px/26px "Montserrat", sans-serif !important;
}

.rating-player > strong::before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: -4px;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat;
  content: "";
}

/* Profile */
body[data-view="profile"] .profile-head {
  grid-template-columns: 60px minmax(0, 1fr) 76px !important;
}

.profile-avatar-wrap {
  position: relative;
  width: 60px;
  height: 60px;
}

.profile-avatar-add {
  position: absolute;
  right: -3px;
  bottom: -2px;
  z-index: 2;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 4px;
  color: #111;
  background: #f1af08;
  font: 700 18px/20px "Open Sans", sans-serif;
}

.profile-language-button {
  display: grid;
  width: 76px;
  height: 32px;
  grid-template-columns: 24px 24px 12px;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  color: #f8f9fa;
  background: transparent;
}

.profile-language-button strong {
  font: 700 13px/18px "Open Sans", sans-serif;
}

.language-flag {
  display: block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;
}

.language-flag-ru {
  background: linear-gradient(#fff 0 33%, #1f5cff 33% 66%, #e33 66%);
}

.language-flag-en {
  position: relative;
  background:
    linear-gradient(33deg, transparent 42%, #fff 43% 57%, transparent 58%),
    linear-gradient(-33deg, transparent 42%, #fff 43% 57%, transparent 58%),
    linear-gradient(90deg, transparent 38%, #fff 39% 61%, transparent 62%),
    linear-gradient(transparent 38%, #fff 39% 61%, transparent 62%),
    #2447a8;
}

.language-chevron {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

body[data-view="profile"] .promo-card {
  display: grid !important;
  min-height: 252px !important;
}

body[data-view="profile"] .promo-card #promo-status {
  display: block !important;
  width: 328px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 12px 12px 0 !important;
  border-radius: 10px 10px 0 0 !important;
  color: #f8f9fa !important;
  background: linear-gradient(180deg, #202428, #17191b) !important;
  font: 700 15px/21px "Open Sans", sans-serif !important;
}

body[data-view="profile"] .promo-card #promo-status::after {
  display: block;
  margin-top: 5px;
  color: #aeb4b8;
  content: "PLUS, Demo, Анимации никнейма";
  font: 400 12px/17px "Open Sans", sans-serif;
}

body[data-view="profile"] .promo-form {
  min-height: 116px !important;
  padding-top: 8px !important;
  border-radius: 0 0 10px 10px !important;
}

body[data-view="profile"] .history-wrap .history-more-button {
  margin-top: 16px;
}

/* Language selector */
.language-sheet[hidden] {
  display: none !important;
}

.language-sheet {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: min(100%, 360px);
  margin: 0 auto;
}

.language-sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.76);
}

.language-sheet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: 174px;
  gap: 4px;
  padding: 18px;
  border-radius: 16px 16px 0 0;
  background: #202428;
}

.language-sheet-panel h2 {
  margin: 0 0 6px;
  font: 800 20px/26px "Montserrat", sans-serif;
  text-align: center;
}

.language-option {
  display: grid;
  height: 40px;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: #f8f9fa;
  background: transparent;
  text-align: left;
}

.language-option strong {
  font: 600 14px/20px "Open Sans", sans-serif;
}

.language-selected {
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid #20d978;
  border-radius: 50%;
  color: #20d978;
  font-size: 12px;
}

.language-option.active .language-selected {
  display: grid;
}

/* More popup */
#view-more {
  display: none !important;
}

body.more-open #view-more.active {
  position: fixed !important;
  z-index: 500 !important;
  inset: 0 !important;
  display: block !important;
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  height: 100dvh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  pointer-events: none !important;
}

body.more-open .figma-more-menu {
  position: absolute;
  right: 0;
  bottom: 59px;
  display: grid;
  width: 145px;
  gap: 0;
  padding: 6px;
  border: 1px solid #34383b;
  border-radius: 8px 8px 0 0;
  background: #202428;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
}

body.more-open .figma-more-menu .leaderboard-head {
  display: none !important;
}

body.more-open .figma-more-menu > button {
  display: grid;
  min-height: 48px;
  grid-template-columns: 34px 1fr;
  align-items: center;
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

body.more-open .figma-more-menu > button .nav-icon {
  grid-row: auto;
  width: 24px !important;
  height: 24px !important;
}

body.more-open .figma-more-menu > button strong {
  align-self: center;
  font: 600 13px/18px "Open Sans", sans-serif;
}

body.more-open .figma-more-menu > button small {
  display: none;
}

/* PLUS */
body[data-view="plus"] {
  background-color: #070808 !important;
}

body[data-view="plus"][data-view="plus"] .hero-head,
body[data-view="plus"][data-view="plus"] .level-pill,
body[data-view="plus"][data-view="plus"] .plus-pill,
body[data-view="plus"][data-view="plus"] .bottom-nav {
  display: none !important;
}

body[data-view="plus"] .app-shell {
  width: min(100%, 360px) !important;
  min-height: 800px !important;
  padding: 0 16px 18px !important;
}

body[data-view="plus"] #view-plus {
  width: 360px !important;
  margin-left: -16px !important;
  padding: 0 16px !important;
}

body[data-view="plus"] .plus-card {
  position: relative !important;
  width: 328px !important;
  min-height: 800px !important;
  padding: 0 0 68px !important;
  overflow: visible !important;
  background: transparent !important;
}

body[data-view="plus"] .plus-card::before {
  display: none !important;
}

.plus-hero {
  position: relative;
  width: 360px;
  height: 310px;
  margin-left: -16px;
  overflow: hidden;
}

.plus-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(7, 8, 8, 0.24) 64%, #070808 100%);
  content: "";
}

.plus-hero img {
  display: block;
  width: 360px;
  height: 310px;
  object-fit: cover;
  object-position: center 20%;
}

.plus-hero h2,
.plus-hero > strong {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  margin: 0;
  text-align: center;
}

.plus-hero h2 {
  bottom: 48px;
  color: #e8a900;
  font: 900 38px/44px "Montserrat", sans-serif;
}

.plus-hero > strong {
  bottom: 12px;
  color: #b8b8b8;
  font: 800 26px/32px "Montserrat", sans-serif;
}

.plus-close,
.levels-close {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 1px solid #9ca3a8;
  border-radius: 50%;
  color: #d7dadd;
  background: rgba(8, 9, 9, 0.55);
  font: 500 18px/20px "Open Sans", sans-serif;
}

.plus-status {
  display: none;
}

body[data-view="plus"] .plus-perks {
  gap: 8px !important;
  margin: 8px 0 16px !important;
}

body[data-view="plus"] .plus-perks li {
  position: relative;
  display: grid !important;
  min-height: 74px !important;
  align-content: center;
  gap: 4px;
  padding: 10px 12px 10px 52px !important;
  background: rgba(22, 24, 25, 0.82) !important;
}

body[data-view="plus"] .plus-perks li::before {
  position: absolute;
  top: 16px;
  left: 8px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 3px solid #e9ab00;
  border-radius: 50%;
  color: #e9ab00;
  content: "✓";
  font: 800 18px/22px "Open Sans", sans-serif;
}

body[data-view="plus"] .plus-perks strong {
  font: 700 14px/20px "Open Sans", sans-serif;
}

body[data-view="plus"] .plus-perks small {
  color: #c1c5c7;
  font: 400 11px/16px "Open Sans", sans-serif;
}

body[data-view="plus"] .plus-card #plus-buy {
  border-radius: 10px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 44px;
}

html body[data-view="plus"] main.app-shell > header.hero-head.hero-head,
html body[data-view="plus"] main.app-shell > header.hero-head.hero-head .plus-pill,
html body[data-view="plus"] main.app-shell > header.hero-head.hero-head .level-pill,
html body[data-view="plus"] main.app-shell > header.hero-head.hero-head .compact-wallet,
html body[data-view="plus"] main.app-shell > .plus-pill.plus-pill,
html body[data-view="plus"] main.app-shell > .level-pill.level-pill,
html body[data-view="plus"] > nav.bottom-nav.bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Levels modal */
/* LEVELS MODAL — Figma bottomsheet fix */

html body.levels-open #view-levels.active {
  position: fixed !important;
  z-index: 900 !important;
  inset: 0 !important;
  display: block !important;
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  height: 100dvh !important;
  margin: 0 auto !important;
  padding: 96px 0 0 !important;
  overflow: hidden !important;
  background: rgba(8, 10, 11, 0.8) !important;
}

html body.levels-open #view-levels.active::before {
  position: absolute !important;
  top: 96px !important;
  left: 50% !important;
  z-index: 2 !important;
  width: 50px !important;
  height: 4px !important;
  border-radius: 100px !important;
  background: #939ba2 !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}

html body.levels-open .levels-card {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 360px !important;
  height: calc(100dvh - 108px) !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 12px 0 0 !important;
  padding: 16px 16px 32px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: #1e2225 !important;
  box-shadow: none !important;
}

html body.levels-open .levels-close {
  display: none !important;
}

html body.levels-open .levels-card .leaderboard-head {
  display: flex !important;
  width: 328px !important;
  height: 58px !important;
  min-height: 58px !important;
  flex: 0 0 58px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

html body.levels-open .levels-card .leaderboard-head h2,
html body.levels-open .levels-card .leaderboard-head span {
  display: block !important;
  width: 328px !important;
  height: 29px !important;
  margin: 0 !important;
  font-family: "Montserrat", "Open Sans", sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 130% !important;
  text-align: center !important;
}

html body.levels-open .levels-card .leaderboard-head h2 {
  color: #f8f9fa !important;
}

html body.levels-open .levels-card .leaderboard-head span {
  color: #f5b041 !important;
}

html body.levels-open .level-summary {
  display: grid !important;
  box-sizing: border-box !important;
  width: 328px !important;
  height: 20px !important;
  min-height: 20px !important;
  grid-template-columns: 39px minmax(0, 1fr) 39px !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.levels-open .level-summary > strong {
  display: block !important;
  width: 39px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #f8f9fa !important;
  background: transparent !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
  text-align: left !important;
}

html body.levels-open .level-summary > strong::before {
  content: "Lvl " !important;
}

html body.levels-open .level-summary > strong:last-child {
  color: #f5b041 !important;
  text-align: right !important;
}

html body.levels-open .level-summary > div {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 20px !important;
}

html body.levels-open .level-progress {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 20px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #080a0b !important;
}

html body.levels-open #level-progress-bar {
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 20px !important;
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background:
          repeating-linear-gradient(
                  120deg,
                  transparent 0 16px,
                  rgba(255, 255, 255, 0.08) 16px 27px,
                  transparent 27px 34px
          ),
          linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
}

html body.levels-open #level-progress-text {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: flex !important;
  width: 100% !important;
  height: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #f5b041 !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
  text-align: center !important;
  pointer-events: none !important;
}

html body.levels-open .level-rewards {
  display: flex !important;
  box-sizing: border-box !important;
  width: 328px !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.levels-open .level-reward {
  position: relative !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 328px !important;
  height: 86px !important;
  min-height: 86px !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  grid-template-rows: 17px 24px 20px !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

html body.levels-open .level-reward.unlocked {
  background: linear-gradient(90deg, rgba(13, 154, 0, 0.3) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
}

html body.levels-open .level-reward.unlocked::after {
  position: absolute !important;
  right: 8px !important;
  top: 13px !important;
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 4px solid #0d9a00 !important;
  border-radius: 50% !important;
  color: #0d9a00 !important;
  content: "✓" !important;
  font: 800 38px/1 "Open Sans", sans-serif !important;
  opacity: 0.2 !important;
  pointer-events: none !important;
}

html body.levels-open .level-reward img {
  position: static !important;
  grid-row: 1 / 4 !important;
  grid-column: 1 !important;
  width: 70px !important;
  height: 70px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

html body.levels-open .level-reward span,
html body.levels-open .level-reward strong,
html body.levels-open .level-reward small {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.levels-open .level-reward span {
  height: 17px !important;
  color: #d4d9de !important;
  font: 600 12px/145% "Open Sans", sans-serif !important;
  text-transform: none !important;
}

html body.levels-open .level-reward strong {
  height: 24px !important;
  overflow: hidden !important;
  color: #f8f9fa !important;
  font: 600 18px/135% "Montserrat", "Open Sans", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.levels-open .level-reward small {
  display: flex !important;
  height: 20px !important;
  align-items: center !important;
  gap: 6px !important;
  color: #f5b041 !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
}

html body.levels-open .level-reward small::before {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin: 0 !important;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat !important;
  content: "" !important;
}

/* Game intro screens */
body[data-view="dice"] .app-shell,
body[data-view="rps"] .app-shell,
body[data-view="uno"] .app-shell {
  padding-top: 0 !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-topbar,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-topbar,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-topbar {
  position: absolute !important;
  top: 18px !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 20 !important;
  height: 28px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-back-button,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-back-button,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-back-button {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  border: 1px solid #9ca3a8 !important;
  border-radius: 50% !important;
  opacity: 1 !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-back-button::before,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-back-button::before,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-back-button::before {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  content: "×" !important;
  transform: none !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  top: 80px !important;
  height: 390px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro img {
  width: 190px !important;
  height: 190px !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro img,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro img {
  width: 220px !important;
  height: 220px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro h1,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro h1,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro h1 {
  margin-top: 10px !important;
  font-size: 38px !important;
  line-height: 44px !important;
  text-transform: none !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro p,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro p,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro p {
  color: #f8f9fa !important;
  font-weight: 700 !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro p::first-letter,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro p::first-letter,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro p::first-letter {
  color: #f5b041;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .dice-stage,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-head,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-arena,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-choice-grid,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-result,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .rps-head,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-table,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-message,
body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .dice-room-search,
body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .dice-room-list,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-room-search,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-room-list,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-room-search,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-room-list {
  display: none !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

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

body[data-view="dice"]:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #online-card {
  position: absolute !important;
  right: 16px !important;
  bottom: 76px !important;
  left: 16px !important;
  z-index: 10 !important;
  display: block !important;
  width: 328px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="dice"]:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #online-card > div:first-child,
body[data-view="dice"]:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #online-card #online-leave {
  display: none !important;
}

body[data-view="dice"]:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #online-card .online-actions,
body[data-view="dice"]:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #online-search {
  display: block !important;
  width: 328px !important;
  height: 44px !important;
}

body[data-view="dice"]:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #online-search {
  color: transparent !important;
}

body[data-view="dice"]:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #online-search::after {
  color: #111;
  content: "Найти соперника";
  font: 700 14px/20px "Open Sans", sans-serif;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice #invite {
  display: block !important;
  height: 44px !important;
  border: 1px solid #e9ad16 !important;
  color: #e9ad16 !important;
  background: transparent !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

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

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps #rps-join {
  width: 328px !important;
  height: 44px !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  top: 60px !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-controls {
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important;
  grid-template-rows: 44px 44px 44px !important;
  gap: 8px 4px !important;
}

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

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

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

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-leave {
  display: none !important;
}

/* Figma game intro parity */
body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  top: 118px !important;
  height: 400px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro img,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro img,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro img {
  width: 230px !important;
  height: 230px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro h1,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro h1,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro h1 {
  margin-top: 18px !important;
}

/* v12: tighten the final pass against the designer's exported frames. */
body {
  background-size: 360px 800px !important;
}

.app-shell {
  padding-bottom: 110px !important;
}

body[data-view="home"] .app-shell,
body[data-view="shop"] .app-shell,
body[data-view="balance"] .app-shell,
body[data-view="community"] .app-shell,
body[data-view="profile"] .app-shell,
body[data-view="earn"] .app-shell,
body[data-view="game"] .app-shell {
  padding-top: 58px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .plus-pill,
body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .level-pill,
body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .compact-wallet {
  top: 12px !important;
  height: 30px !important;
  min-height: 30px !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]):not([data-view="plus"]) .compact-wallet .wallet-main {
  height: 30px !important;
}

.bottom-nav {
  height: 65px !important;
  min-height: 65px !important;
  padding: 0 6px env(safe-area-inset-bottom) !important;
}

.nav-item {
  margin-top: 8px !important;
}

.nav-item span:last-child {
  max-width: 56px !important;
  font: 600 11px/14px "Open Sans", sans-serif !important;
}

body[data-view="home"] .quest-item,
body[data-view="shop"] .shop-item,
body[data-view="balance"] .withdraw-card,
body[data-view="balance"] .wallet-grid article,
body[data-view="community"] .leaderboard .rating-row,
body[data-view="profile"] .stats > div,
body[data-view="profile"] .promo-form,
body[data-view="profile"] .referral-card > div:first-child {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

body[data-view="game"] .game-card {
  background:
    radial-gradient(130px 130px at 50% 42%, rgba(143, 177, 255, 0.12), transparent 65%),
    linear-gradient(145deg, rgba(34, 37, 40, 0.98), rgba(18, 20, 22, 0.98)) !important;
}

body[data-view="game"] .game-card strong {
  color: #f5b041 !important;
  font: 800 20px/26px "Montserrat", sans-serif !important;
}

body[data-view="game"] .game-card small {
  color: #e7e6e1 !important;
  font: 400 15px/21px "Open Sans", sans-serif !important;
}

body[data-view="game"] .game-card:nth-child(2) strong {
  font-size: 18px !important;
}

body[data-view="game"] .uno-preview-card strong {
  margin-top: 14px !important;
}

body[data-view="dice"] .app-shell,
body[data-view="rps"] .app-shell,
body[data-view="uno"] .app-shell {
  padding: 0 16px 16px !important;
}

.game-table,
.rps-game,
.uno-game {
  padding-top: 70px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  display: grid !important;
  width: 328px !important;
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  justify-items: center !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro {
  transform: translateY(38px) !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro {
  transform: translateY(72px) !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  transform: translateY(72px) !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro img {
  width: 230px !important;
  height: 230px !important;
  margin: 0 auto !important;
  transform: none !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro img,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro img {
  width: 220px !important;
  height: 220px !important;
  margin: 0 auto !important;
  transform: none !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro h1,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro h1,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro h1 {
  margin: 16px 0 0 !important;
  color: #f5b041 !important;
  font: 800 40px/48px "Montserrat", sans-serif !important;
  text-align: center !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro h1 {
  max-width: 328px !important;
  line-height: 42px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro p,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro p,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro p {
  margin: 8px 0 0 !important;
  color: #f8f9fa !important;
  font: 800 20px/28px "Open Sans", sans-serif !important;
}

.figma-online-value {
  color: #f5b041 !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .controls,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-controls {
  bottom: 18px !important;
}

body[data-view="dice"][data-dice-state="playing"] .dice-stage,
body[data-view="dice"][data-dice-state="settled"] .dice-stage {
  height: 230px !important;
  min-height: 230px !important;
  margin: 12px 0 24px !important;
  grid-template-columns: 130px 68px 130px !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel,
body[data-view="dice"][data-dice-state="settled"] .player-panel {
  height: 230px !important;
  min-height: 230px !important;
  grid-template-rows: 22px 22px 136px 24px !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .die,
body[data-view="dice"][data-dice-state="settled"] .player-panel .die {
  width: 124px !important;
  height: 126px !important;
  min-height: 126px !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .css-dice-scene,
body[data-view="dice"][data-dice-state="settled"] .player-panel .css-dice-scene,
body[data-view="dice"][data-dice-state="playing"] .player-panel .css-dice-shadow,
body[data-view="dice"][data-dice-state="settled"] .player-panel .css-dice-shadow {
  scale: 0.86 !important;
}

body[data-view="dice"][data-dice-state="playing"] .versus,
body[data-view="dice"][data-dice-state="settled"] .versus {
  height: 176px !important;
  padding-top: 88px !important;
}

body[data-view="dice"][data-dice-state="playing"] .bet-head,
body[data-view="dice"][data-dice-state="settled"] .bet-head {
  margin-bottom: 14px !important;
}

body[data-view="dice"][data-dice-state="playing"] .chat-card,
body[data-view="dice"][data-dice-state="settled"] .chat-card {
  min-height: 286px !important;
  margin-top: 36px !important;
}

body[data-view="dice"][data-dice-state="playing"] .chat-log,
body[data-view="dice"][data-dice-state="settled"] .chat-log {
  height: 214px !important;
  min-height: 214px !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-seat,
body[data-view="rps"][data-rps-state="settled"] .rps-seat,
body[data-view="rps"][data-rps-state="playing"] .rps-picked,
body[data-view="rps"][data-rps-state="settled"] .rps-picked {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rps-avatar.is-empty-avatar,
.dice-avatar.is-empty-avatar,
.seat-avatar.is-empty-avatar {
  color: transparent !important;
  text-indent: -999px !important;
  overflow: hidden !important;
  background:
    rgba(30, 34, 37, 0.84)
    url("/assets/figma/avatar-placeholder.webp")
    center / 76% 76%
    no-repeat !important;
}

body[data-view="dice"] .dice-avatar,
body[data-view="rps"] .rps-seat .rps-avatar {
  box-shadow: 0 0 16px rgba(245, 176, 65, 0.22) !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-vs,
body[data-view="rps"][data-rps-state="settled"] .rps-vs {
  height: 176px !important;
  align-content: center !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-controls,
body[data-view="rps"][data-rps-state="settled"] .rps-controls {
  margin-top: 24px !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-choice-grid button,
body[data-view="rps"][data-rps-state="settled"] .rps-choice-grid button {
  height: 116px !important;
  min-height: 116px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-choice-icon,
body[data-view="rps"][data-rps-state="settled"] .rps-choice-icon {
  width: 86px !important;
  height: 86px !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-control-label {
  font: 700 12px/18px "Open Sans", sans-serif !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-max-players,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-step {
  border-color: #e7a900 !important;
  border-radius: 8px !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-table,
body[data-view="uno"][data-uno-state="settled"] .uno-table {
  width: 328px !important;
  min-height: 738px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Designer 404 state. */
body[data-view="not-found"] .app-shell {
  min-height: 800px !important;
}

body[data-view="not-found"] #view-not-found {
  padding: 0 !important;
}

body[data-view="not-found"] .status {
  display: none !important;
}

.not-found-card {
  position: relative;
  display: grid;
  width: 328px;
  min-height: 690px;
  justify-items: center;
  align-content: start;
  padding-top: 150px;
  text-align: center;
}

.not-found-code {
  position: absolute;
  z-index: 0;
  top: 150px;
  color: transparent;
  background: linear-gradient(180deg, #e4a700 0%, #725200 88%);
  background-clip: text;
  -webkit-background-clip: text;
  font: 900 140px/150px "Montserrat", sans-serif;
  letter-spacing: 0;
}

.not-found-card img {
  position: relative;
  z-index: 1;
  width: 220px;
  height: 250px;
  object-fit: contain;
}

.not-found-card h2 {
  position: relative;
  z-index: 1;
  margin: 18px 0 18px;
  color: #f8f9fa;
  font: 800 18px/24px "Montserrat", sans-serif;
}

.not-found-card .gold-button {
  width: 304px;
  height: 44px;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice #invite::before {
  content: none !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-controls {
  bottom: 16px !important;
}

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

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps #rps-join,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps #rps-intro-invite {
  display: block !important;
  width: 328px !important;
  height: 44px !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps #rps-intro-invite,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-intro-invite {
  border: 1px solid #e9ad16 !important;
  color: #e9ad16 !important;
  background: transparent !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-bet,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-max-players {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
}

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

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-intro-invite {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  display: block !important;
  width: 328px !important;
  height: 44px !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-controls {
  grid-template-rows: 44px 44px 44px 44px !important;
}

html body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls.rps-controls {
  height: 96px !important;
  grid-template-rows: 44px 44px !important;
}

html body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-controls.rps-controls > #rps-intro-invite.figma-intro-invite {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: block !important;
  width: 328px !important;
  height: 44px !important;
}

html body[data-view="shop"] .shop-item.shop-item {
  position: relative !important;
  padding: 28px 12px 78px !important;
}

html body[data-view="shop"] .shop-item.shop-item > strong {
  margin-top: 4px !important;
}

html body[data-view="shop"] .shop-item.shop-item p {
  max-height: 36px !important;
  margin-top: 8px !important;
}

html body[data-view="shop"] .shop-item.shop-item .shop-item-foot {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  left: 12px !important;
}

/* v11: final measurements and embedded artwork from the designer PDF. */
body[data-view="home"] .quest-head {
  height: 54px !important;
  margin-bottom: 16px !important;
}

body[data-view="home"] .quest-tabs {
  margin-top: 0 !important;
}

body[data-view="home"] .figma-referral-task .quest-art img {
  width: 94px !important;
  height: 94px !important;
  object-fit: contain !important;
}

body[data-view="shop"] .shop-card {
  padding-bottom: 84px !important;
}

body[data-view="shop"] .shop-item.shop-item,
body[data-view="shop"] .shop-item.shop-item:nth-child(3n) {
  height: 250px !important;
  min-height: 250px !important;
}

html body[data-view="shop"] .shop-item.shop-item > strong {
  margin-top: 20px !important;
}

body[data-view="balance"] .wallet-grid {
  height: 132px !important;
}

body[data-view="balance"] .wallet-grid article {
  height: 132px !important;
  min-height: 132px !important;
}

body[data-view="balance"] .balance-actions {
  margin-bottom: 38px !important;
}

body[data-view="community"] .friend-search .gold-button {
  font-size: 0 !important;
}

body[data-view="community"] .friend-search .gold-button::before {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 16px !important;
  height: 16px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

body[data-view="community"] .friend-search .gold-button::after {
  top: 27px !important;
  left: 29px !important;
  width: 6px !important;
}

body.levels-open .level-summary {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: end !important;
  gap: 8px !important;
  padding: 12px 0 16px !important;
}

body.levels-open .level-summary > strong {
  display: block !important;
  width: auto !important;
  height: 20px !important;
  min-width: 0 !important;
  place-items: initial !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f8f9fa !important;
  background: transparent !important;
  font: 600 12px/20px "Open Sans", sans-serif !important;
}

body.levels-open .level-summary > strong::before {
  content: "Lvl ";
}

body.levels-open .level-summary > strong:last-child {
  color: #f1ae18 !important;
  text-align: right !important;
}

body.levels-open .level-summary > div {
  position: relative !important;
  min-width: 0 !important;
}

body.levels-open #level-progress-text {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #f8f9fa !important;
  font: 700 11px/20px "Open Sans", sans-serif !important;
}

body.levels-open .level-progress {
  width: 100% !important;
  height: 20px !important;
  margin: 0 !important;
}

body.levels-open .level-reward small::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat;
  content: "";
  vertical-align: -3px;
}

body.more-open .figma-more-menu {
  right: 0 !important;
  left: auto !important;
  width: 145px !important;
  max-width: 145px !important;
  padding: 6px !important;
  border: 1px solid #34383b !important;
  border-radius: 8px 8px 0 0 !important;
  background: #202428 !important;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.38) !important;
}

body.more-open .figma-more-menu > button {
  width: 131px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-back-button::before,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-back-button::before,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-back-button::before {
  display: block !important;
  color: #d7dadd !important;
  content: "\00D7" !important;
  font: 500 17px/20px "Open Sans", sans-serif !important;
}

/* Dice round: scaled from the 400px designer frame to Telegram's 360px viewport. */
body[data-view="dice"][data-dice-state="playing"] .dice-stage,
body[data-view="dice"][data-dice-state="settled"] .dice-stage {
  min-height: 206px !important;
  height: 206px !important;
  margin: 12px 0 10px !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel,
body[data-view="dice"][data-dice-state="settled"] .player-panel {
  height: 206px !important;
  min-height: 206px !important;
  grid-template-rows: 22px 22px 128px 24px !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .die,
body[data-view="dice"][data-dice-state="settled"] .player-panel .die {
  width: 124px !important;
  height: 112px !important;
  min-height: 112px !important;
}

body[data-view="dice"][data-dice-state="playing"] .player-panel .css-dice-scene,
body[data-view="dice"][data-dice-state="settled"] .player-panel .css-dice-scene,
body[data-view="dice"][data-dice-state="playing"] .player-panel .css-dice-shadow,
body[data-view="dice"][data-dice-state="settled"] .player-panel .css-dice-shadow {
  scale: 0.78 !important;
}

body[data-view="dice"][data-dice-state="playing"] .versus,
body[data-view="dice"][data-dice-state="settled"] .versus {
  height: 156px !important;
  padding-top: 78px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-view="dice"][data-dice-state="playing"] .controls,
body[data-view="dice"][data-dice-state="settled"] .controls {
  gap: 8px !important;
}

body[data-view="dice"][data-dice-state="playing"] .controls #invite,
body[data-view="dice"][data-dice-state="settled"] .controls #invite {
  display: none !important;
}

body[data-view="dice"][data-dice-state="playing"] .bet-row .icon-button,
body[data-view="dice"][data-dice-state="settled"] .bet-row .icon-button,
body[data-view="dice"][data-dice-state="playing"] .quick-bets button,
body[data-view="dice"][data-dice-state="settled"] .quick-bets button {
  border: 1px solid #e7a900 !important;
  color: #f4b71e !important;
  background: rgba(10, 11, 12, 0.72) !important;
}

body[data-view="dice"][data-dice-state="playing"] .bet-row input,
body[data-view="dice"][data-dice-state="settled"] .bet-row input {
  border: 1px solid #34383b !important;
  background: rgba(31, 34, 36, 0.82) !important;
}

body[data-view="dice"][data-dice-state="playing"] .chat-card,
body[data-view="dice"][data-dice-state="settled"] .chat-card {
  min-height: 280px !important;
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid #34383b !important;
  border-radius: 10px !important;
  background: #202428 !important;
}

body[data-view="dice"][data-dice-state="playing"] .chat-log,
body[data-view="dice"][data-dice-state="settled"] .chat-log {
  height: 200px !important;
  min-height: 200px !important;
  border-radius: 8px !important;
  background: rgba(8, 9, 9, 0.76) !important;
}

body[data-view="dice"][data-dice-state="playing"] .chat-form,
body[data-view="dice"][data-dice-state="settled"] .chat-form {
  margin-top: 12px !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .rps-play-choice {
  display: none !important;
}

/* RPS round: PDF pages 45-46. */
body[data-view="rps"][data-rps-state="playing"] .rps-game,
body[data-view="rps"][data-rps-state="settled"] .rps-game {
  display: flex !important;
  min-height: 800px !important;
  flex-direction: column !important;
  padding-top: 62px !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-arena,
body[data-view="rps"][data-rps-state="settled"] .rps-arena {
  order: 1 !important;
  display: grid !important;
  width: 328px !important;
  height: 220px !important;
  min-height: 220px !important;
  grid-template-columns: 130px 68px 130px !important;
  gap: 0 !important;
  margin: 0 !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-seat,
body[data-view="rps"][data-rps-state="settled"] .rps-seat {
  display: grid !important;
  width: 130px !important;
  height: 220px !important;
  grid-template-columns: 44px 1fr !important;
  grid-template-rows: 22px 22px 132px 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-seat.rival,
body[data-view="rps"][data-rps-state="settled"] .rps-seat.rival {
  grid-template-columns: 1fr 44px !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-seat .rps-avatar,
body[data-view="rps"][data-rps-state="settled"] .rps-seat .rps-avatar {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 44px !important;
  height: 44px !important;
  border: 2px solid #e8aa0e !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-seat > span,
body[data-view="rps"][data-rps-state="settled"] .rps-seat > span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: #f5b041 !important;
  font: 800 17px/22px "Montserrat", sans-serif !important;
  text-align: left !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-seat > strong,
body[data-view="rps"][data-rps-state="settled"] .rps-seat > strong {
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: #92999e !important;
  font: 400 13px/18px "Open Sans", sans-serif !important;
  text-align: left !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-picked,
body[data-view="rps"][data-rps-state="settled"] .rps-picked {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  width: 110px !important;
  height: 124px !important;
  place-self: center !important;
  border: 0 !important;
  color: #d9d7ff !important;
  background: transparent !important;
  font: 900 82px/110px "Montserrat", sans-serif !important;
  text-shadow: 0 0 20px rgba(126, 156, 255, 0.55) !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-vs,
body[data-view="rps"][data-rps-state="settled"] .rps-vs {
  display: grid !important;
  width: 68px !important;
  height: 170px !important;
  align-content: center !important;
  justify-items: center !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-vs strong,
body[data-view="rps"][data-rps-state="settled"] .rps-vs strong,
body[data-view="rps"][data-rps-state="playing"] .rps-timer,
body[data-view="rps"][data-rps-state="settled"] .rps-timer {
  color: #f5b041 !important;
  font: 900 42px/48px "Montserrat", sans-serif !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-controls,
body[data-view="rps"][data-rps-state="settled"] .rps-controls {
  order: 2 !important;
  position: relative !important;
  display: grid !important;
  width: 328px !important;
  grid-template-columns: 48px 1fr 48px !important;
  gap: 8px !important;
  margin: 36px 0 16px !important;
  padding-top: 42px !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-controls::before,
body[data-view="rps"][data-rps-state="settled"] .rps-controls::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  content: "Ваша ставка:";
  color: #f8f9fa;
  font: 800 20px/28px "Montserrat", sans-serif;
  text-align: center;
}

body[data-view="rps"][data-rps-state="playing"] .rps-bet-step,
body[data-view="rps"][data-rps-state="settled"] .rps-bet-step,
body[data-view="rps"][data-rps-state="playing"] #rps-bet,
body[data-view="rps"][data-rps-state="settled"] #rps-bet {
  display: block !important;
  height: 44px !important;
  border: 1px solid #e7a900 !important;
  color: #f4b71e !important;
  background: rgba(10, 11, 12, 0.72) !important;
}

body[data-view="rps"][data-rps-state="playing"] #rps-bet,
body[data-view="rps"][data-rps-state="settled"] #rps-bet {
  color: #f8f9fa !important;
  background: rgba(31, 34, 36, 0.82) !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-choice-grid button,
body[data-view="rps"][data-rps-state="settled"] .rps-choice-grid button {
  width: 104px !important;
  height: 116px !important;
  border: 1px solid #34383b !important;
  border-radius: 8px !important;
  background: rgba(14, 15, 16, 0.72) !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-choice-grid button.active,
body[data-view="rps"][data-rps-state="playing"] .rps-choice-grid button.pending,
body[data-view="rps"][data-rps-state="settled"] .rps-choice-grid button.active {
  border-color: #e7a900 !important;
  box-shadow: 0 0 18px rgba(231, 169, 0, 0.18) !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-play-choice,
body[data-view="rps"][data-rps-state="settled"] .rps-play-choice {
  order: 4 !important;
  display: block !important;
  width: 328px !important;
  height: 48px !important;
  margin-bottom: 36px !important;
}

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

body[data-view="rps"][data-rps-state="playing"] .rps-chat-log,
body[data-view="rps"][data-rps-state="settled"] .rps-chat-log {
  order: 6 !important;
  width: 328px !important;
  height: 150px !important;
  min-height: 150px !important;
  margin: 0 0 16px !important;
  border: 1px solid #34383b !important;
  border-radius: 8px !important;
  background: #202428 !important;
}

body[data-view="rps"][data-rps-state="playing"] .rps-chat-form,
body[data-view="rps"][data-rps-state="settled"] .rps-chat-form {
  order: 7 !important;
}

/* UNO intro controls: PDF pages 58-59. */
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-controls {
  height: 252px !important;
  grid-template-columns: 48px 1fr 48px !important;
  grid-template-rows: 18px 44px 18px 44px 44px 44px !important;
  gap: 8px 4px !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-control-label {
  display: block !important;
  grid-column: 1 / -1 !important;
  color: #f8f9fa !important;
  font: 600 12px/18px "Open Sans", sans-serif !important;
  text-align: center !important;
}

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

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

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

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

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-bet,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-minus-players {
  display: block !important;
  grid-column: 1 !important;
}

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

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-bet,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno #uno-plus-players {
  display: block !important;
  grid-column: 3 !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .uno-step {
  width: 48px !important;
  height: 44px !important;
  border: 1px solid #e7a900 !important;
  color: #f4b71e !important;
  background: rgba(10, 11, 12, 0.72) !important;
}

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

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

/* UNO table: remove lobby UI after the match starts. */
body[data-view="uno"][data-uno-state="playing"] .uno-game,
body[data-view="uno"][data-uno-state="settled"] .uno-game {
  min-height: 800px !important;
  padding-top: 62px !important;
}

body[data-view="uno"][data-uno-state="playing"] .rps-head,
body[data-view="uno"][data-uno-state="settled"] .rps-head,
body[data-view="uno"][data-uno-state="playing"] .uno-controls,
body[data-view="uno"][data-uno-state="settled"] .uno-controls,
body[data-view="uno"][data-uno-state="playing"] .uno-room-search,
body[data-view="uno"][data-uno-state="settled"] .uno-room-search,
body[data-view="uno"][data-uno-state="playing"] .uno-room-list,
body[data-view="uno"][data-uno-state="settled"] .uno-room-list {
  display: none !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-table,
body[data-view="uno"][data-uno-state="settled"] .uno-table {
  min-height: 738px !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-player,
body[data-view="uno"][data-uno-state="settled"] .uno-player {
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  min-height: 112px !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-player .seat-copy,
body[data-view="uno"][data-uno-state="settled"] .uno-player .seat-copy {
  display: grid !important;
  width: 78px !important;
  justify-items: center !important;
  gap: 0 !important;
  text-align: center !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-player .seat-name,
body[data-view="uno"][data-uno-state="playing"] .uno-player .seat-meta,
body[data-view="uno"][data-uno-state="settled"] .uno-player .seat-name,
body[data-view="uno"][data-uno-state="settled"] .uno-player .seat-meta {
  display: block !important;
  width: 78px !important;
  max-width: 78px !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-player .seat-name,
body[data-view="uno"][data-uno-state="settled"] .uno-player .seat-name {
  color: #f8f9fa !important;
  font: 800 12px/16px "Montserrat", sans-serif !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-player .seat-meta,
body[data-view="uno"][data-uno-state="settled"] .uno-player .seat-meta {
  color: #c9ced2 !important;
  font: 700 10px/14px "Open Sans", sans-serif !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-opponent-hand,
body[data-view="uno"][data-uno-state="settled"] .uno-opponent-hand {
  display: flex !important;
  justify-content: center !important;
  width: 88px !important;
  height: 38px !important;
  margin-top: 2px !important;
}

.uno-card-back {
  position: relative;
  display: block;
  width: 28px;
  height: 42px;
  margin-left: -17px;
  border: 2px solid #ffffff;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 50%, #f3bf2f 0 13%, transparent 14%),
    linear-gradient(135deg, #151515 0 20%, #d71b18 21% 79%, #151515 80% 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42);
  transform: rotate(-8deg);
}

.uno-card-back:first-child {
  margin-left: 0;
}

.uno-card-back:nth-child(2n) {
  transform: rotate(7deg) translateY(1px);
}

.uno-card-back:nth-child(3n) {
  transform: rotate(-14deg) translateY(3px);
}

.uno-card {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 4px solid #ffffff !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: var(--uno-card-bg, #737373) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42) !important;
}

.uno-card::before {
  position: absolute;
  inset: 12% 16%;
  border: 5px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  content: "";
  transform: rotate(-24deg) scaleX(0.7);
}

.uno-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 38%, rgba(0, 0, 0, 0.12));
  content: "";
  pointer-events: none;
}

.uno-card.color-yellow { --uno-card-bg: #f4d51f; color: #151515 !important; }
.uno-card.color-green { --uno-card-bg: #4c9a2c; }
.uno-card.color-blue { --uno-card-bg: #2d5fc9; }
.uno-card.color-red { --uno-card-bg: #c8201d; }
.uno-card.color-wild,
.uno-card.color-wild4 {
  --uno-card-bg: conic-gradient(from 20deg, #d82020, #f0d31c, #319540, #285ac3, #d82020);
}

.uno-card.empty {
  color: #59616a !important;
  background: rgba(12, 13, 14, 0.72) !important;
}

.uno-card.empty::before,
.uno-card.empty::after {
  display: none;
}

.uno-card span,
.uno-card small,
.uno-card strong {
  position: relative;
  z-index: 1;
}

.uno-card span,
.uno-card small {
  position: absolute;
  color: inherit;
  font: 800 13px/16px "Montserrat", sans-serif;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.uno-card span {
  top: 8px;
  left: 8px;
  max-width: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uno-card small {
  right: 8px;
  bottom: 8px;
  transform: rotate(180deg);
}

.uno-card strong {
  color: inherit;
  font: 900 72px/1 "Montserrat", sans-serif;
  letter-spacing: 0;
  text-shadow:
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 2px 0 #ffffff,
    0 4px 8px rgba(0, 0, 0, 0.35);
}

.uno-card.color-yellow strong {
  text-shadow:
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 2px 0 #ffffff,
    0 4px 8px rgba(0, 0, 0, 0.25);
}

.uno-hand .uno-card strong {
  font-size: 44px;
}

.uno-hand .uno-card span,
.uno-hand .uno-card small {
  font-size: 9px;
  line-height: 11px;
}

.uno-hand .uno-card:nth-child(1) { transform: rotate(-17deg) translateY(18px) !important; }
.uno-hand .uno-card:nth-child(2) { transform: rotate(-9deg) translateY(8px) !important; }
.uno-hand .uno-card:nth-child(3) { transform: rotate(-2deg) translateY(3px) !important; }
.uno-hand .uno-card:nth-child(4) { transform: rotate(6deg) translateY(7px) !important; }
.uno-hand .uno-card:nth-child(5) { transform: rotate(15deg) translateY(17px) !important; }
.uno-hand .uno-card:nth-child(n+6) { transform: rotate(20deg) translateY(22px) !important; }

/* Game covers: exact 400px Figma frame proportions scaled to 360px. */
body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro {
  top: 170px !important;
  height: auto !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  top: 152px !important;
  height: auto !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro {
  transform: translateY(100px) !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro {
  transform: translateY(96px) !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro {
  transform: translateY(75px) !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro img {
  width: 170px !important;
  height: 170px !important;
  transform: translateY(-22px) !important;
}

body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro img {
  width: 185px !important;
  height: 185px !important;
  transform: translateY(-22px) !important;
}

body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro img {
  width: 195px !important;
  height: 195px !important;
}

body:not([data-dice-state="playing"]):not([data-dice-state="settled"]) #view-dice .figma-game-intro h1,
body:not([data-rps-state="playing"]):not([data-rps-state="settled"]) #view-rps .figma-game-intro h1,
body:not([data-uno-state="playing"]):not([data-uno-state="settled"]) #view-uno .figma-game-intro h1 {
  margin-top: 18px !important;
}

/* Figma final audit: keep this block at EOF. */
body[data-view="balance"] .wallet-grid {
  height: 120px !important;
}

body[data-view="balance"] .wallet-grid article {
  box-sizing: border-box !important;
  height: 120px !important;
  min-height: 120px !important;
}

body[data-view="balance"] .balance-actions {
  margin-bottom: 18px !important;
}

body[data-view="earn"] .earn-button {
  width: 240px !important;
  height: 240px !important;
  margin-top: 0 !important;
  margin-bottom: -235px !important;
  transform: translateY(-235px) !important;
}

body[data-view="earn"] .earn-button .poker-chip {
  width: 132px !important;
  height: 132px !important;
}

body[data-view="game"] .game-card:nth-child(3) {
  height: 254px !important;
  min-height: 254px !important;
}

body[data-view="game"] .game-card:nth-child(3) > div {
  height: 86px !important;
  padding-bottom: 12px !important;
}

body[data-view="game"] .game-card small {
  display: -webkit-box !important;
  overflow: hidden !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="community"] .community-switch {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-view="community"] .community-tab {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-view="community"] .community-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  opacity: 0;
  background: #e4a900;
  content: "";
}

body[data-view="community"] .community-tab.active::after {
  opacity: 1;
}

body[data-view="community"] .rating-tabs {
  display: none !important;
}

body[data-view="community"] .friend-search {
  grid-template-columns: 1fr 48px !important;
  gap: 8px !important;
}

body[data-view="community"] .friend-search input {
  height: 44px !important;
  padding: 0 12px !important;
  text-align: left !important;
}

body[data-view="community"] .friend-search .gold-button {
  width: 48px !important;
  min-width: 48px !important;
  height: 44px !important;
  border-radius: 8px !important;
}

body[data-view="community"] .leaderboard .rating-row {
  display: grid !important;
  min-height: 85px !important;
  grid-template-columns: 32px 1fr 102px !important;
  align-items: center !important;
  padding: 10px 12px !important;
}

body[data-view="community"] .leaderboard .rating-player {
  display: grid !important;
  gap: 4px !important;
}

body[data-view="community"] .leaderboard .rating-player strong {
  position: relative !important;
  padding-left: 26px !important;
  color: #fff7c0 !important;
  font: 800 22px/30px "Montserrat", sans-serif !important;
}

body[data-view="community"] .leaderboard .rating-player strong::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("/assets/figma/coin-demo.webp") center / contain no-repeat;
  content: "";
}

body[data-view="community"] .leaderboard .rating-metrics {
  display: grid !important;
  justify-items: start !important;
  gap: 6px !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-center,
body[data-view="uno"][data-uno-state="settled"] .uno-center {
  min-height: 340px !important;
  margin-top: 60px !important;
  grid-template-columns: 72px 140px 76px !important;
  overflow: visible !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-deck,
body[data-view="uno"][data-uno-state="settled"] .uno-deck {
  width: 94px !important;
  height: 138px !important;
  margin-left: -44px !important;
  transform: rotate(-24deg) translateY(18px) !important;
}

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

body[data-view="uno"][data-uno-state="playing"] .uno-center > .uno-card,
body[data-view="uno"][data-uno-state="settled"] .uno-center > .uno-card {
  width: 126px !important;
  height: 188px !important;
  margin-top: 36px !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-actions,
body[data-view="uno"][data-uno-state="settled"] .uno-actions {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 8 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

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

body[data-view="uno"][data-uno-state="playing"] .uno-actions button,
body[data-view="uno"][data-uno-state="settled"] .uno-actions button {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
}

body[data-view="uno"][data-uno-state="playing"] .uno-hand,
body[data-view="uno"][data-uno-state="settled"] .uno-hand {
  min-height: 250px !important;
  margin-top: -42px !important;
  padding-bottom: 70px !important;
}

/* Figma navigation + alert parity */

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .hero-head {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  width: min(100%, 360px) !important;
  height: 50px !important;
  min-height: 50px !important;
  border: 0 !important;
  background: rgba(5, 6, 7, 0.96) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  transform: translateX(-50%) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(12px, calc(50% - 168px)) !important;
  width: 72px !important;
  height: 32px !important;
  border: 1px solid #e6ae2e !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #f8c64a 0%, #c68f14 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(103px, calc(50% - 77px)) !important;
  width: 48px !important;
  height: 32px !important;
  border: 1px solid #454a4e !important;
  border-radius: 5px !important;
  background: #1e2225 !important;
  box-shadow: none !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill strong {
  color: #f8f9fa !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet.session-wallet {
  position: fixed !important;
  z-index: 82 !important;
  top: 9px !important;
  left: max(163px, calc(50% - 17px)) !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .wallet-main {
  border-color: #454a4e !important;
  background: #1e2225 !important;
}

body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-switch {
  left: 87px !important;
  width: 96px !important;
}

.bottom-nav {
  z-index: 200 !important;
  width: min(100%, 360px) !important;
  height: calc(59px + env(safe-area-inset-bottom)) !important;
  min-height: 59px !important;
  grid-template-columns: repeat(6, 1fr) !important;
  column-gap: 0 !important;
  padding: 0 4px env(safe-area-inset-bottom) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 224, 126, 0.12) !important;
  background:
    radial-gradient(90% 58px at 50% 0, rgba(165, 121, 30, 0.18), transparent 72%),
    rgba(20, 20, 18, 0.97) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(18px) !important;
}

.bottom-nav .nav-item {
  width: auto !important;
  height: 51px !important;
  min-height: 51px !important;
  grid-template-rows: 24px 14px !important;
  row-gap: 3px !important;
  margin-top: 5px !important;
  color: #e0e2e3 !important;
}

.bottom-nav .nav-item.active {
  color: #e5ae2e !important;
}

.bottom-nav .nav-item.active::after {
  right: 14px !important;
  bottom: -3px !important;
  left: 14px !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: #f0c356 !important;
  box-shadow: 0 0 8px rgba(240, 195, 86, 0.35) !important;
}

.bottom-nav .nav-item .nav-icon {
  width: 22px !important;
  height: 22px !important;
}

.bottom-nav .nav-item span:last-child {
  max-width: 55px !important;
  font: 400 10px/14px "Open Sans", sans-serif !important;
}

.status {
  position: fixed !important;
  z-index: 300 !important;
  right: 0 !important;
  bottom: calc(75px + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  box-sizing: border-box !important;
  width: min(308px, calc(100% - 32px)) !important;
  max-width: 308px !important;
  min-height: 40px !important;
  margin: 0 auto !important;
  padding: 10px 12px 10px 43px !important;
  overflow: hidden !important;
  border: 1px solid #3d4246 !important;
  border-radius: 5px !important;
  color: #e7e9ea !important;
  background: #202428 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  font: 400 13px/18px "Open Sans", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.status::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #4a9bd8;
  content: "";
}

.status::after {
  position: absolute;
  top: 9px;
  left: 12px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1.5px solid #4a9bd8;
  border-radius: 50%;
  color: #4a9bd8;
  content: "i";
  font: 700 12px/18px "Open Sans", sans-serif;
}

.status.win::before {
  background: #50bd7a;
}

.status.win::after {
  border-color: #50bd7a;
  color: #50bd7a;
  content: "✓";
}

.status.loss::before {
  background: #d45a54;
}

.status.loss::after {
  border-color: #d45a54;
  color: #d45a54;
  content: "×";
  font-size: 17px;
  font-weight: 400;
}

.status.warn::before {
  background: #e4a72b;
}

.status.warn {
  color: #e7e9ea !important;
}

.status.warn::after {
  border-color: #e4a72b;
  border-radius: 5px;
  color: #e4a72b;
  content: "!";
}

.result-toast {
  position: fixed !important;
  z-index: 320 !important;
  top: calc(62px + env(safe-area-inset-top)) !important;
  right: 0 !important;
  left: 0 !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: min(308px, calc(100% - 32px)) !important;
  height: 66px !important;
  min-height: 66px !important;
  grid-template-columns: 54px 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 6px 14px 6px 8px !important;
  overflow: hidden !important;
  border: 1px solid #42474b !important;
  border-radius: 5px !important;
  color: #f8f9fa !important;
  background: #202428 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42) !important;
  transform: none !important;
  animation: figma-result-pop 180ms ease-out both !important;
}

.result-toast[hidden] {
  display: none !important;
}

.result-toast::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #4a9bd8;
  content: "";
}

.result-toast.win {
  border-color: #42474b !important;
}

.result-toast.win::before {
  background: #50bd7a;
}

.result-toast.loss {
  border-color: #42474b !important;
}

.result-toast.loss::before {
  background: #d45a54;
}

.result-toast.draw {
  border-color: #42474b !important;
}

.result-toast.draw::before {
  background: #4a9bd8;
}

.result-art {
  display: block;
  width: 54px;
  height: 54px;
  background: url("/assets/figma/community-empty.png") center / contain no-repeat;
}

.result-toast.win .result-art {
  background-image: url("/assets/figma/invite-bird.png");
}

.result-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  justify-items: start;
}

.result-copy strong {
  overflow: hidden;
  color: #f8f9fa;
  font: 700 18px/24px "Open Sans", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f8f9fa;
  font: 400 14px/18px "Open Sans", sans-serif;
}

.result-coin {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat;
}

@media (max-width: 359px) {
  body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .plus-pill {
    left: 8px !important;
    width: 68px !important;
  }

  body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .level-pill {
    left: 84px !important;
  }

  body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet.session-wallet {
    left: 140px !important;
  }

  body:not([data-view="dice"]):not([data-view="rps"]):not([data-view="uno"]) .compact-wallet .mode-switch {
    left: 77px !important;
  }

  .bottom-nav .nav-item span:last-child {
    font-size: 9px !important;
  }
}

/* Supplied navbar spec: keep this last so legacy theme rules cannot override it. */
.bottom-nav {
  display: flex !important;
  box-sizing: border-box !important;
  width: min(100%, 360px) !important;
  height: calc(59px + env(safe-area-inset-bottom)) !important;
  min-height: 59px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px calc(8px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid #2c3033 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #1e2225 0%, #42310b 100%) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.bottom-nav .nav-item {
  position: relative !important;
  display: flex !important;
  width: 49.67px !important;
  min-width: 0 !important;
  height: 45px !important;
  min-height: 45px !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #d4d9de !important;
}

.bottom-nav .nav-item.active {
  color: #f5b041 !important;
}

.bottom-nav .nav-item .nav-icon {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  color: inherit !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: 24px 24px !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: 24px 24px !important;
}

.bottom-nav .nav-item span:last-child {
  display: flex !important;
  width: auto !important;
  max-width: 52px !important;
  height: 17px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: inherit !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.bottom-nav .nav-item.active::after {
  position: absolute !important;
  right: auto !important;
  bottom: -8px !important;
  left: 50% !important;
  width: 30px !important;
  height: 3px !important;
  border-radius: 2px 2px 0 0 !important;
  background: #f5b041 !important;
  box-shadow: none !important;
  content: "" !important;
  transform: translateX(-50%) !important;
}

body.more-open .bottom-nav {
  gap: 6px !important;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom)) !important;
  border: 1px solid #2c3033 !important;
  border-radius: 10px !important;
}

body.more-open .figma-more-menu {
  right: 0 !important;
  bottom: 63px !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 138px !important;
  max-width: 138px !important;
  height: 88px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  border: 1px solid #2c3033 !important;
  border-radius: 10px !important;
  background: #1e2225 !important;
  box-shadow: none !important;
}

body.more-open .figma-more-menu > button {
  display: flex !important;
  width: 106px !important;
  min-height: 24px !important;
  height: 24px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #d4d9de !important;
  background: transparent !important;
}

body.more-open .figma-more-menu > button .nav-icon {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  color: inherit !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: 24px 24px !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: 24px 24px !important;
}

body.more-open .figma-more-menu > button strong {
  align-self: center !important;
  color: inherit !important;
  font: 400 12px/17px "Open Sans", sans-serif !important;
  white-space: nowrap !important;
}

body.more-open .figma-more-menu > button small {
  display: none !important;
}

/* FIX: при открытии "Другое" нижний navbar не должен менять форму */
/* FINAL FIX: при открытии "Другое" navbar должен остаться 1-в-1 как в обычном состоянии */
html body.more-open .bottom-nav.bottom-nav {
  display: flex !important;
  box-sizing: border-box !important;
  width: min(100%, 360px) !important;
  height: calc(59px + env(safe-area-inset-bottom)) !important;
  min-height: 59px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px calc(8px + env(safe-area-inset-bottom)) !important;

  border: 0 !important;
  border-top: 1px solid #2c3033 !important;
  border-radius: 0 !important;

  background: linear-gradient(180deg, #1e2225 0%, #42310b 100%) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* TOPUP SHEET — нормальная модалка пополнения */

html .topup-sheet {
  position: fixed !important;
  z-index: 950 !important;
  inset: 0 !important;
  display: block !important;
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  height: 100dvh !important;
  margin: 0 auto !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
}

html .topup-sheet.open {
  pointer-events: auto !important;
  opacity: 1 !important;
}

html .topup-sheet .sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(8, 10, 11, 0.8) !important;
  backdrop-filter: blur(2px) !important;
}

html .topup-sheet .sheet-panel {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;

  display: flex !important;
  box-sizing: border-box !important;
  width: 360px !important;
  max-width: 100% !important;
  flex-direction: column !important;
  gap: 16px !important;

  margin: 0 !important;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom)) !important;

  border: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: #1e2225 !important;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.45) !important;

  transform: translateY(18px) !important;
  transition: transform 180ms ease !important;
}

html .topup-sheet.open .sheet-panel {
  transform: translateY(0) !important;
}

/* маленькая ручка сверху */
html .topup-sheet .sheet-panel::before {
  display: block !important;
  width: 50px !important;
  height: 4px !important;
  flex: 0 0 4px !important;
  align-self: center !important;
  margin: 0 0 4px !important;
  border-radius: 100px !important;
  background: #939ba2 !important;
  content: "" !important;
}

/* шапка */
html .topup-sheet .sheet-head {
  display: flex !important;
  width: 328px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html .topup-sheet .sheet-head > div {
  display: flex !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 4px !important;
}

html .topup-sheet .sheet-head .eyebrow {
  margin: 0 !important;
  color: #f5b041 !important;
  font: 600 12px/145% "Open Sans", sans-serif !important;
}

html .topup-sheet .sheet-head h2 {
  margin: 0 !important;
  color: #f8f9fa !important;
  font: 600 22px/130% "Montserrat", "Open Sans", sans-serif !important;
}

/* кнопка закрытия */
html .topup-sheet .sheet-head .glass-button {
  position: relative !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: transparent !important;
  box-shadow: none !important;
}

html .topup-sheet .sheet-head .glass-button::before {
  position: absolute !important;
  inset: 0 !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #d4d9de !important;
  content: "×" !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* сетка быстрых сумм */
html .topup-sheet .topup-grid {
  display: grid !important;
  width: 328px !important;
  grid-template-columns: repeat(2, 160px) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html .topup-sheet .topup-grid button {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 160px !important;
  height: 64px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #f8f9fa !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;

  font: 600 18px/135% "Montserrat", "Open Sans", sans-serif !important;
}

html .topup-sheet .topup-grid button::before {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  background: url("/assets/figma/coin-gold.webp") center / contain no-repeat !important;
  content: "" !important;
}

html .topup-sheet .topup-grid button:active {
  transform: translateY(1px) !important;
  filter: brightness(0.92) !important;
}

/* кастомная сумма */
html .topup-sheet .custom-topup {
  display: grid !important;
  width: 328px !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html .topup-sheet .custom-topup input {
  box-sizing: border-box !important;
  width: 328px !important;
  height: 44px !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding: 0 12px !important;

  border: 1px solid #2c3033 !important;
  border-radius: 10px !important;
  color: #f8f9fa !important;
  background: #080a0b !important;
  outline: none !important;
  box-shadow: none !important;

  font: 400 14px/145% "Open Sans", sans-serif !important;
}

html .topup-sheet .custom-topup input::placeholder {
  color: #939ba2 !important;
}

html .topup-sheet .custom-topup input:focus {
  border-color: #f5b041 !important;
}

html .topup-sheet .custom-topup .gold-button {
  display: flex !important;
  width: 328px !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 10px !important;
  color: #080a0b !important;
  background: linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;
  box-shadow: none !important;

  font: 600 14px/145% "Open Sans", sans-serif !important;
}

/* TOPUP INPUT — Figma text field */

html .topup-sheet .custom-topup {
  position: relative !important;
  display: flex !important;
  width: 328px !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html .topup-sheet .custom-topup input#custom-stars {
  box-sizing: border-box !important;
  width: 328px !important;
  height: 44px !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding: 0 48px !important;

  border: 1px solid #2c3033 !important;
  border-radius: 10px !important;
  color: #f8f9fa !important;
  background-color: #080a0b !important;

  background-image:
          url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23D4D9DE' stroke-width='1.8'/%3E%3Cpath d='M12 6.5V17.5' stroke='%23D4D9DE' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M15.2 8.7C14.5 8.1 13.5 7.8 12.4 7.8C10.8 7.8 9.7 8.55 9.7 9.75C9.7 12.1 15.1 10.85 15.1 14.05C15.1 15.35 13.9 16.2 12.25 16.2C11 16.2 9.85 15.8 9 15' stroke='%23D4D9DE' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23F5B041' stroke-width='1.8'/%3E%3Cpath d='M12 6.5V17.5' stroke='%23F5B041' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M15.2 8.7C14.5 8.1 13.5 7.8 12.4 7.8C10.8 7.8 9.7 8.55 9.7 9.75C9.7 12.1 15.1 10.85 15.1 14.05C15.1 15.35 13.9 16.2 12.25 16.2C11 16.2 9.85 15.8 9 15' stroke='%23F5B041' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat, no-repeat !important;
  background-position: 12px center, calc(100% - 12px) center !important;
  background-size: 24px 24px, 24px 24px !important;

  outline: none !important;
  box-shadow: none !important;

  font: 400 14px/145% "Open Sans", sans-serif !important;
}

html .topup-sheet .custom-topup input#custom-stars::placeholder {
  color: #939ba2 !important;
}

html .topup-sheet .custom-topup input#custom-stars:focus {
  border-color: #f5b041 !important;
}

html .topup-sheet .custom-topup input#custom-stars:focus::placeholder {
  color: transparent !important;
}

html .topup-sheet .custom-topup .topup-hint {
  display: flex !important;
  width: 328px !important;
  height: 17px !important;
  align-items: center !important;
  margin: 0 !important;
  color: #939ba2 !important;
  font: 600 12px/145% "Open Sans", sans-serif !important;
}

html .topup-sheet .custom-topup.is-error input#custom-stars {
  border-color: #e74c3c !important;
}

html .topup-sheet .custom-topup.is-error .topup-hint {
  color: #e74c3c !important;
}

html .topup-sheet .custom-topup .gold-button {
  margin-top: 12px !important;
}

/* LEVEL MODAL FIX: progress bar как в Figma */

html body.levels-open .level-summary > div {
  position: relative !important;
  min-width: 0 !important;
  height: 20px !important;
}

/* тёмная дорожка */
html body.levels-open .level-progress {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 20px !important;
  margin: 0 !important;
  overflow: hidden !important;

  border: 0 !important;
  border-radius: 4px !important;
  background: #080a0b !important;
  box-shadow: none !important;
}

/* золотая заполненная часть */
html body.levels-open #level-progress-bar {
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  left: 0 !important;

  display: block !important;
  height: 20px !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 2px !important;

  background:
          repeating-linear-gradient(
                  120deg,
                  transparent 0 20px,
                  rgba(255, 255, 255, 0.08) 20px 31px,
                  transparent 31px 48px
          ),
          linear-gradient(180deg, #ffbb00 0%, #c57e00 100%) !important;

  box-shadow: none !important;
}

/* текст поверх всего бара */
html body.levels-open #level-progress-text {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;

  display: flex !important;
  width: 100% !important;
  height: 20px !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #f5b041 !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
  text-align: center !important;
  pointer-events: none !important;
}

/* STATUS TOAST ICONS — replace text icons with SVG */

html .status {
  padding-left: 48px !important;
}

/* левая цветная полоска */
html .status::before {
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: #3498db !important;
  content: "" !important;
}

/* сама иконка */
html .status::after {
  position: absolute !important;
  top: 7px !important;
  left: 12px !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;

  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("/assets/icons/status/info-circle.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;

  color: transparent !important;
  content: "" !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* success */
html .status.win::before {
  background: #2ecc71 !important;
}

html .status.win::after {
  background-image: url("/assets/icons/status/tick-circle.svg") !important;
}

/* error */
html .status.loss::before {
  background: #e74c3c !important;
}

html .status.loss::after {
  background-image: url("/assets/icons/status/group.svg") !important;
}

/* warning */
html .status.warn::before {
  background: #f39c12 !important;
}

html .status.warn::after {
  background-image: url("/assets/icons/status/danger.svg") !important;
}

/* info / draw / default */
html .status.draw::before,
html .status:not(.win):not(.loss):not(.warn)::before {
  background: #3498db !important;
}

html .status.draw::after,
html .status:not(.win):not(.loss):not(.warn)::after {
  background-image: url("/assets/icons/status/info-circle.svg") !important;
}

/* LEVEL MODAL FIX: split colors for progress text */

html body.levels-open #level-progress-text {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;

  display: flex !important;
  width: 100% !important;
  height: 20px !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: unset !important;
  font: 600 14px/145% "Open Sans", sans-serif !important;
  text-align: center !important;
  pointer-events: none !important;
}

html body.levels-open #level-progress-text .xp-current,
html body.levels-open #level-progress-text .xp-total {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
}

/* 0–49%: 41 жёлтый, /164 XP белый */
html body.levels-open #level-progress-text[data-progress-state="low"] .xp-current {
  color: #f5b041 !important;
}

html body.levels-open #level-progress-text[data-progress-state="low"] .xp-total {
  color: #f8f9fa !important;
}

/* 50–97%: 41 чёрный, /164 XP белый */
html body.levels-open #level-progress-text[data-progress-state="mid"] .xp-current {
  color: #080a0b !important;
}

html body.levels-open #level-progress-text[data-progress-state="mid"] .xp-total {
  color: #f8f9fa !important;
}

/* 98–100%: всё чёрное */
html body.levels-open #level-progress-text[data-progress-state="full"] .xp-current,
html body.levels-open #level-progress-text[data-progress-state="full"] .xp-total {
  color: #080a0b !important;
}

/* LEVEL PROGRESS TEXT — correct Figma color logic */

/* low: до 50%, например 41/164 или 68/164 */
html body.levels-open #level-progress-text[data-progress-state="low"] .xp-current {
  color: #f5b041 !important;
}

html body.levels-open #level-progress-text[data-progress-state="low"] .xp-total {
  color: #f8f9fa !important;
}

/* mid/full: с 50% весь текст чёрный */
html body.levels-open #level-progress-text[data-progress-state="mid"] .xp-current,
html body.levels-open #level-progress-text[data-progress-state="mid"] .xp-total,
html body.levels-open #level-progress-text[data-progress-state="full"] .xp-current,
html body.levels-open #level-progress-text[data-progress-state="full"] .xp-total {
  color: #080a0b !important;
}

/* LANGUAGE MODAL: replace check mark with tick-circle.svg */

html .language-selected {
  display: none !important;
}

html .language-option.active .language-selected {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/icons/tick-circle.svg") center / 32px 32px no-repeat !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

html .language-option.active .language-selected::before,
html .language-option.active .language-selected::after {
  display: none !important;
  content: none !important;
}

/* RESULT TOAST: correct birds for win / loss / draw */

html .result-toast.draw .result-art {
  background-image: url("/assets/figma/community-empty.png") !important;
}

html .result-toast.win .result-art {
  background-image: url("/assets/figma/invite-bird.png") !important;
}

html .result-toast.loss .result-art {
  background-image: url("/assets/figma/sdbirdmimimi.png") !important;
}

/* PLUS PAGE: replace perk checkmarks with check.svg */

html body[data-view="plus"] .plus-perks li::before {
    position: absolute !important;
    top: 16px !important;
    left: 8px !important;

    display: block !important;
    width: 32px !important;
    height: 32px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: url("/assets/icons/check.svg") center / 32px 32px no-repeat !important;

    color: transparent !important;
    content: "" !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;
}