/* Original WPAS material on the same Framework7 components and shared layouts.
   Colours are the existing arcade palette; table appearance remains unchanged. */
:root.f7-wpas[data-app-theme="current"],
.f7-wpas[data-app-theme="current"] body.wg {
  --wg-panel-radius: 12px;
  --wg-control-radius: 8px;
  --f7-card-border-radius: 12px;
  --f7-card-expandable-border-radius: 12px;
  --f7-card-expandable-tablet-border-radius: 12px;
  --f7-button-border-radius: 8px;
  --wg-blur: none;
  --wg-surface: linear-gradient(145deg, #163655, #0a192f);
  --wg-secondary: linear-gradient(
    #5e6c83 0,
    #36455e 6%,
    #213653 20%,
    #10233d 55%,
    #0b1626 100%
  );
  --wg-primary: linear-gradient(
    #45d9ff 0,
    #0e9ee2 7%,
    #076bc2 19%,
    #064995 55%,
    #092858 100%
  );
  --wg-primary-border: #53dfff;
  --wg-primary-ink: #fff;
  --wg-primary-shadow:
    inset 0 1px 0 #c2f5ff, inset 0 -2px 0 #14c5ff, 0 0 5px #00baff45;
  --wg-shadow:
    inset 0 1px 0 #afbdcf77, inset 0 -1px 0 #53688588, 0 3px 8px #0006;
  --wg-rim: linear-gradient(#acc9e5, #38577c);
}
.f7-wpas[data-app-theme="current"] body {
  background: radial-gradient(
    ellipse at 40% 25%,
    #102f5b 0,
    #071426 48%,
    #04060d 100%
  );
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar] {
  background-image: url("/assets/mobile/original-avatars-v1.webp");
  background-size: 400% 200% !important;
  background-position: var(--original-avatar) !important;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="0"] {
  --original-avatar: 0% 0%;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="1"] {
  --original-avatar: 33.333333% 0%;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="2"] {
  --original-avatar: 66.666667% 0%;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="3"] {
  --original-avatar: 100% 0%;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="4"] {
  --original-avatar: 0% 100%;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="5"] {
  --original-avatar: 33.333333% 100%;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="6"] {
  --original-avatar: 66.666667% 100%;
}
.f7-wpas[data-app-theme="current"] .avatar-art[data-avatar="7"] {
  --original-avatar: 100% 100%;
}
.f7-wpas[data-app-theme="current"] .button.wg-frame {
  border-radius: 8px;
  background: var(--wg-secondary);
  color: #eff6ff;
  border-color: #718baa;
  box-shadow: var(--wg-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.f7-wpas[data-app-theme="current"] .button.button-fill {
  background: var(--wg-primary);
  border-color: #53dfff;
  color: #fff;
  box-shadow: var(--wg-primary-shadow);
}
.f7-wpas[data-app-theme="current"] .button.color-orange {
  background: linear-gradient(#d2a866, #986c31 15%, #573617 100%);
  border-color: #dcba7c;
}
.f7-wpas[data-app-theme="current"] .f7-nav-pane {
  border-radius: 12px;
  background: linear-gradient(
    #62616f 0,
    #363642 5%,
    #1b1c27 20%,
    #0b0c13 55%,
    #07080d 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.f7-wpas[data-app-theme="current"] .f7-nav-pane .tab-link-highlight {
  border-radius: 8px;
  background: var(--wg-primary);
  box-shadow: var(--wg-primary-shadow);
}
.f7-wpas[data-app-theme="current"] .card.wg-frame,
.f7-wpas[data-app-theme="current"] .lobby-player > .card-content {
  border-radius: 12px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.f7-wpas[data-app-theme="current"] .lobby-player > .card-content {
  background: radial-gradient(
    ellipse at 25% 20%,
    #124e94,
    #0c2c61 38%,
    #071833 68%,
    #050d1c
  );
}
.f7-wpas[data-app-theme="current"] .f7-task-tabs .button {
  border-radius: 8px;
  background: var(--wg-secondary);
}
.f7-wpas[data-app-theme="current"] .f7-task-tabs .tab-link-active {
  background: var(--wg-primary);
  color: #fff;
}
.f7-wpas[data-app-theme="current"] .f7-form-field .item-input-wrap {
  background: #050f20;
  border-radius: 8px;
  border: 1px solid #42678b;
}
.f7-wpas[data-app-theme="current"] .region-art::after {
  background: linear-gradient(transparent 30%, #05285d9e 70%, #06132ff5);
}
.f7-wpas[data-app-theme="current"] .region-detail-hero {
  border-radius: 12px;
}

.f7-wpas[data-app-theme="current"] .f7-profile-popup.popup {
  background: linear-gradient(145deg, #163655, #0a192f);
  border-radius: 12px;
}
@media (max-width: 800px), (max-height: 620px) {
  .f7-wpas[data-app-theme="current"] .f7-profile-popup.popup {
    border-radius: 0;
  }
}