/* Generated Drafti icon system — compressed transparent WebP assets. */
.premium-ui-icon {
  display: inline-block;
  width: 1.55em;
  height: 1.55em;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .42));
}

.premium-icon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .62em;
}

.premium-icon-label > .premium-ui-icon { width: 1.65em; height: 1.65em; }

.game-title::before {
  content: '';
  top: -12px;
  width: 38px;
  height: 27px;
  background: url('../images/ui-icons/gameplay-crown.webp?v=20260714-3') center / contain no-repeat;
  filter: drop-shadow(0 2px 5px rgba(241, 194, 64, .35));
}

#status-bar::before {
  content: '';
  background-color: #09271b;
  background-image: url('../images/ui-icons/gameplay-crown.webp?v=20260714-3');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72% auto;
  color: transparent;
  font-size: 0;
}

.avatar-btn[data-premium-avatar],
.lb-avatar[data-premium-avatar] {
  background-image: var(--premium-avatar-image) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: calc(100% - 3px) !important;
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
}
.avatar-btn[data-premium-avatar] {
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 12px rgba(0,0,0,.22);
}
.avatar-btn[data-premium-avatar].selected {
  box-shadow: 0 0 0 2px rgba(243,198,73,.2), 0 0 18px rgba(243,198,73,.22);
}
[data-premium-avatar="globe"] { --premium-avatar-image: url('../images/ui-icons/avatar-globe.webp?v=20260714-2'); }
[data-premium-avatar="lion"] { --premium-avatar-image: url('../images/ui-icons/avatar-lion.webp?v=20260714-2'); }
[data-premium-avatar="eagle"] { --premium-avatar-image: url('../images/ui-icons/avatar-eagle.webp?v=20260714-2'); }
[data-premium-avatar="giraffe"] { --premium-avatar-image: url('../images/ui-icons/avatar-giraffe.webp?v=20260714-2'); }
[data-premium-avatar="crown"] { --premium-avatar-image: url('../images/ui-icons/avatar-crown.webp?v=20260714-2'); }
[data-premium-avatar="flag-tanzania"] { --premium-avatar-image: url('../images/ui-icons/avatar-flag-tanzania.webp?v=20260714-2'); }
[data-premium-avatar="fire"] { --premium-avatar-image: url('../images/ui-icons/avatar-fire.webp?v=20260714-2'); }
[data-premium-avatar="rhino"] { --premium-avatar-image: url('../images/ui-icons/avatar-rhino.webp?v=20260714-2'); }
[data-premium-avatar="ninja"] { --premium-avatar-image: url('../images/ui-icons/avatar-ninja.webp?v=20260714-2'); }
[data-premium-avatar="trophy"] { --premium-avatar-image: url('../images/ui-icons/avatar-trophy.webp?v=20260714-2'); }

.lobby-mode-icon { width: 54px; height: 54px; line-height: 0; }
.lobby-mode-icon .premium-ui-icon { width: 100%; height: 100%; }
.lobby-mode-btn.selected .premium-ui-icon { filter: drop-shadow(0 0 9px rgba(240, 199, 78, .32)); }

.pwa-banner-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  line-height: 0;
}
.pwa-banner-icon .premium-ui-icon { width: 46px; height: 46px; }
.badge-toast-icon .premium-ui-icon { width: 48px; height: 48px; }

#overlay-pause .pause-icon-wrap { overflow: visible; }
#overlay-pause .pause-icon-wrap svg { display: none; }
#overlay-pause .pause-icon-wrap .premium-ui-icon {
  width: 94px;
  height: 94px;
  max-width: none;
  filter: drop-shadow(0 7px 13px rgba(0, 0, 0, .48));
}

#overlay-assign-confirmed .assign-confirmed-icon {
  display: grid;
  width: 86px;
  height: 72px;
  margin-inline: auto;
  place-items: center;
  line-height: 0;
}
#overlay-assign-confirmed .assign-confirmed-icon .premium-ui-icon { width: 86px; height: 72px; }
#overlay-assign-confirmed .acb-icon { display: inline-grid; place-items: center; }
#overlay-assign-confirmed .acb-icon .premium-ui-icon { width: 32px; height: 32px; }

#go-title.premium-icon-label,
#lb-title.premium-icon-label { gap: .38em; }
#go-title .premium-ui-icon,
#lb-title .premium-ui-icon { width: 1.35em; height: 1.35em; }

@media (max-width: 520px) {
  .game-title::before { top: -9px; width: 28px; height: 20px; }
  .lobby-mode-icon { width: 44px; height: 44px; }
  .premium-icon-label > .premium-ui-icon { width: 1.45em; height: 1.45em; }
  #overlay-pause .pause-icon-wrap .premium-ui-icon { width: 72px; height: 72px; }
}