/* Original raster artwork and social screens. */
#accountHeader {
  gap: 8px;
  padding: 16px 14px 8px;
}
#accountHeader > .portrait {
  width: 58px;
  height: 58px;
}
.account-info > b {
  font-size: 22px;
}
.account-tags {
  flex-wrap: wrap;
  gap: 4px;
}
.account-tags .tag {
  font-size: 10px;
  padding: 3px 6px;
}
.notification-button {
  position: relative;
  width: 40px;
  height: 43px;
  border-radius: 14px;
}
.notification-button .bell-art {
  width: 37px;
  height: 37px;
  object-fit: contain;
  pointer-events: none;
}
.notification-count {
  position: absolute;
  right: -5px;
  top: -7px;
  min-width: 20px;
  height: 20px;
  padding: 2px 4px;
  border-radius: 10px;
  background: #ff816e;
  color: #fff;
  font-size: 11px;
  font-weight: 1000;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  line-height: 14px;
}
.discovery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.discovery-card {
  position: relative;
  min-width: 0;
  padding: 14px 10px 14px 65px;
  min-height: 94px;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  border-radius: 23px;
  text-align: left;
  background:
    radial-gradient(ellipse at 10% 50%, #2182d8a0, transparent 75%),
    linear-gradient(140deg, #274caa, #142866);
  box-shadow:
    inset 0 1px 0 #c6eaff40,
    0 5px 14px #05113b55;
}
.discovery-card .item-art {
  position: absolute;
  left: 4px;
  top: 13px;
  width: 65px;
  height: 65px;
  object-fit: contain;
  filter: drop-shadow(0 4px 9px #071d7a);
}
.discovery-card b {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}
.discovery-card small {
  display: block;
  font-size: 10px;
  line-height: 1.4;
  margin-top: 5px;
  color: #c6ddff;
}
.community-sheet,
.event-sheet {
  padding: 20px 17px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 100% 0, #2c64cd88, transparent 50%),
    linear-gradient(145deg, #152c70, #101b4b);
  box-shadow:
    inset 0 1px 0 #c2ddff44,
    0 25px 80px #01061999;
}
.community-sheet h2,
.event-sheet h2 {
  font-size: 26px;
}
.community-sheet .sheet-head small,
.event-sheet .sheet-head small {
  font-size: 9px;
  letter-spacing: 1.4px;
  display: block;
  margin-bottom: 7px;
}
.community-tabs,
.event-tabs {
  position: sticky;
  top: -20px;
  z-index: 2;
  background: #182f79;
  border-radius: 18px;
  padding: 4px;
  margin-bottom: 20px;
}
.community-tabs button,
.event-tabs button {
  font-size: 12px !important;
  padding: 10px 4px !important;
}
.friend-search {
  display: flex;
  gap: 7px;
  margin: 10px 0;
}
.friend-search input {
  min-width: 0;
  font-size: 14px;
}
.friend-search button {
  font-size: 13px;
  padding: 8px 13px;
}
.friend-search + div {
  font-size: 11px;
  color: #abc8ff;
}
.person-card {
  position: relative;
  padding: 13px;
  margin: 12px 0;
  border-radius: 21px;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  background: linear-gradient(110deg, #29468590, #233d7c77);
}
.person-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.person-avatar-button {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
}
.person-card .portrait {
  width: 47px;
  height: 47px;
}
.person-details {
  flex: 1;
  min-width: 0;
}
.person-details b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}
.person-details small {
  display: block;
  font-size: 11px;
}
.person-actions {
  display: flex;
  gap: 7px;
  margin-top: 13px;
}
.person-actions button {
  flex: 1;
  min-width: 0;
  padding: 8px 7px;
  min-height: 37px;
  font-size: 12px;
  border-radius: 15px;
}
.remove-friend {
  font-size: 10px;
  padding: 9px 0 0;
  color: #a9bee6;
}
.inbox-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  border-radius: 18px;
  margin: 10px 0;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  background: #223e7a88;
}
.inbox-card.unread {
  border-color: #58d7ff;
}
.inbox-card > .item-art,
.inbox-card > .portrait {
  width: 43px;
  height: 43px;
  object-fit: contain;
  flex-shrink: 0;
}
.inbox-card > div {
  flex: 1;
  min-width: 0;
}
.inbox-card b,
.inbox-card small {
  display: block;
  overflow-wrap: anywhere;
}
.inbox-card b {
  font-size: 13px;
}
.inbox-card small {
  font-size: 10px;
  margin-top: 3px;
}
.inbox-card > button {
  font-size: 11px;
  min-height: 35px;
  padding: 8px 9px;
  border-radius: 14px;
}
#chatMessages {
  min-height: 160px;
  max-height: 38dvh;
  overflow: auto;
  padding: 8px 0;
  overscroll-behavior: contain;
}
.chat-bubble {
  width: 88%;
  padding: 12px 14px;
  margin: 9px 0;
  border-radius: 18px 18px 18px 5px;
  background: #28468b;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  font-size: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-bubble.mine {
  margin-left: auto;
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(130deg, #146fa9, #164b97);
  border-color: #51cfff88;
}
.chat-bubble small {
  display: block;
  font-size: 9px;
  text-align: right;
  margin-top: 5px;
}
#privateMessageForm {
  display: flex;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid #5e7ab855;
}
#privateMessageForm input {
  min-width: 0;
  font-size: 14px;
}
#privateMessageForm button {
  font-size: 12px;
  padding: 9px 11px;
}
.gift-catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gift-product {
  padding: 13px 10px;
  border-radius: 22px;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  text-align: center;
  background: radial-gradient(ellipse at 50% 20%, #386bcbb0, transparent 75%), #172e6f;
}
.gift-product .item-art {
  width: 100%;
  height: 145px;
  object-fit: contain;
  filter: drop-shadow(0 7px 11px #04144588);
}
.gift-product h3 {
  font-size: 15px;
  min-height: 38px;
  margin: 8px 0 !important;
}
.gift-product .coral {
  font-size: 13px;
  min-height: 37px;
}
.gift-shelf-hero {
  text-align: center;
  margin: 15px 0;
}
.gift-shelf-hero .item-art {
  width: 140px;
  height: 145px;
  object-fit: contain;
}
.gift-shelf-hero p {
  font-size: 12px;
}
.event-hero {
  text-align: center;
  padding: 10px 5px 18px;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 25%, #2276cc88, transparent 70%);
  margin-bottom: 12px;
}
.event-hero .item-art {
  display: block;
  margin: auto;
  width: 155px;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 0 19px #23c8ff44);
}
.event-hero h2 {
  font-size: 27px;
  line-height: 1.2;
  margin: 8px 0;
}
.event-hero p {
  font-size: 12px !important;
  line-height: 1.6;
}
.event-hero.compact .item-art {
  width: 90px;
  height: 95px;
}
.season-milestone {
  padding: 16px;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  border-radius: 20px;
  margin: 12px 0;
  background: #24417c99;
}
.season-milestone > b {
  font-size: 19px;
}
.season-milestone > small {
  display: block;
  margin: 5px 0 10px;
}
.season-milestone progress {
  width: 100%;
  height: 9px;
  accent-color: #42deff;
}
.season-milestone button {
  min-height: 38px;
  font-size: 14px;
}
.tournament-place {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 12px;
  color: #ffd49e;
}
.tournament-score {
  display: block;
  margin: 8px 0 0 58px;
  font-size: 14px;
  color: #70e5ff;
}
.my-standing {
  padding: 13px 15px;
  border-radius: 16px;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  background: #1c5d9d;
  font-weight: 900;
  text-align: center;
  font-size: 13px !important;
}
.album-fragments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}
.album-fragments > div {
  padding: 7px;
  border-radius: 17px;
  text-align: center;
  background: #1b336c;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
}
.album-fragments .item-art {
  display: block;
  width: 100%;
  height: 75px;
  object-fit: contain;
}
.album-fragments .missing {
  opacity: 0.35;
  filter: saturate(0.3);
}
.album-fragments .collected {
  border-color: #5fe8ff;
  box-shadow: inset 0 0 12px #1cceff33;
}
.album-fragments small {
  font-size: 10px;
}
#rewardsDialog {
  padding: 20px 18px;
  background:
    radial-gradient(ellipse at 50% 20%, #225caf66, transparent 45%),
    linear-gradient(155deg, #1b3475, #101b47);
}
#rewardsDialog > .sheet-head h2 {
  font-size: 26px;
}
#rewardsDialog > .sheet-head {
  margin-bottom: 4px;
}
.chest-stage {
  height: 210px;
  isolation: isolate;
}
.chest-stage::before {
  content: '';
  position: absolute;
  inset: 4% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #52c9ff66, transparent 67%);
  filter: blur(12px);
}
.chest-stage img {
  width: 225px;
  height: 205px;
  max-width: 100%;
  filter: drop-shadow(0 12px 20px #040e3477);
}
#rewardStatus {
  min-height: 29px;
  text-align: center;
  font-size: 15px;
  font-weight: 1000;
  color: #ffe2a1;
  line-height: 1.4;
}
#rewardSchedule {
  text-align: center;
  color: #a6caff;
  font-size: 11px;
  margin: 5px 0 16px;
}
#rewardsDialog > h3 {
  font-size: 18px;
}
#dailyDays {
  gap: 5px;
  margin: 13px 0 15px;
}
.daily-day {
  padding: 10px 0 9px;
  background: linear-gradient(#283f7a, #1a2c5c);
  border-radius: 12px;
  border-color: #6488c166;
}
.daily-day b {
  font-size: 15px;
  margin-top: 6px;
}
.daily-day.active {
  border-color: #ffc893;
  box-shadow: inset 0 0 12px #ffd29822;
}
.daily-day.claimed {
  border-color: #59ddd9;
  background: #14657e;
}
.quest-card {
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  border-radius: 18px;
  padding: 13px 11px;
  margin: 11px 0;
  background: linear-gradient(110deg, #29478099, #1d326b99);
  gap: 9px;
}
.quest-card b {
  font-size: 13px;
  line-height: 1.4;
}
.quest-card small {
  font-size: 10px;
  margin: 5px 0;
}
.quest-card progress {
  height: 7px;
  width: 100%;
  accent-color: #4cddfa;
}
.quest-card > button {
  font-size: 11px;
  min-height: 35px;
  padding: 8px 10px;
  border-radius: 14px;
}
.ad-reward-note {
  margin-top: 20px;
  padding: 16px;
  background: #182f66;
  border-color: #7295cf66;
}
.ad-reward-note p {
  font-size: 12px;
}
.ad-reward-note button {
  font-size: 13px;
  box-shadow: none;
}
#gameMore.has-notification {
  position: relative;
}
#gameMore.has-notification:after {
  content: '';
  position: absolute;
  top: 2px;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff957b;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
}
.sapphire-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #6fe9ff;
}
.sapphire-label img {
  width: 22px;
  height: 25px;
  object-fit: contain;
}
@media (max-width: 370px) {
  #accountHeader > .portrait {
    width: 49px;
    height: 49px;
  }
  .account-info > b {
    font-size: 20px;
  }
  #accountHeader .round {
    width: 35px;
    height: 39px;
  }
  .tag {
    padding: 3px 5px;
  }
  .discovery-card {
    padding-left: 54px;
    padding-right: 7px;
  }
  .discovery-card .item-art {
    width: 53px;
    left: 2px;
  }
  .discovery-card b {
    font-size: 16px;
  }
  .discovery-card small {
    font-size: 9px;
  }
  .community-sheet,
  .event-sheet {
    padding: 18px 13px;
  }
  .gift-product .item-art {
    height: 115px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chest-stage img {
    animation: none !important;
  }
}

.community-sheet .sheet-head,
.event-sheet .sheet-head {
  flex-shrink: 0;
}
.community-sheet .community-tabs,
.event-sheet .event-tabs {
  position: static;
}
#communityBody,
#eventBody {
  max-height: calc(100dvh - 220px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 2px;
}
#rewardsDialog[open] {
  display: flex;
  flex-direction: column;
}
#rewardsDialog .sheet-head {
  flex-shrink: 0;
}
#rewardsBody {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0 1px 10px;
}
.home-hero {
  max-height: 190px;
}
.home-logo {
  max-height: 82px;
  width: 80%;
}
.discovery-grid {
  margin: 0 0 15px;
}
.discovery-card {
  min-height: 85px;
}
html.native-app #communityBody,
html.native-app #eventBody {
  max-height: calc(100dvh - var(--native-top) - var(--native-bottom) - 220px);
}

/* Compact profile and image-led rewards. */
#accountHeader .notification-button,
#accountHeader .notification-button:hover,
#accountHeader .notification-button:active {
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: none;
}
#accountHeader .notification-button:focus-visible {
  outline: 2px solid #6fe9ff;
  outline-offset: 3px;
}
.inbox-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid #82b8ff28;
  border-radius: 0;
  padding: 12px 2px;
}
.inbox-card.unread {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #61dfff70;
}
#profilePage .page-heading h1 {
  font-size: 32px;
}
.profile-summary {
  padding: 16px;
  border-radius: 24px;
  margin: 12px 0;
}
.profile-summary .profile-hero {
  margin: 0;
  gap: 16px;
  align-items: center;
}
.profile-summary .profile-portrait {
  width: 86px;
  flex: 0 0 86px;
}
.profile-summary .profile-portrait .portrait {
  border-width: 2px;
  box-shadow: 0 0 15px #168bff60;
}
.profile-summary .level-bubble {
  width: 27px;
  height: 27px;
  font-size: 14px;
  right: -2px;
  border-width: 1px;
}
.profile-summary .profile-details h2 {
  font-size: 23px;
  line-height: 1.2;
  margin: 0 0 3px;
}
.profile-summary .profile-details > small {
  font-size: 10px;
  opacity: 0.8;
}
.profile-summary .profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  margin: 12px 0 0;
  gap: 6px;
  background: none;
  border: 0;
  box-shadow: none;
}
.profile-summary .profile-stats > div {
  padding: 0;
  gap: 2px;
  align-items: flex-start;
  border: 0;
  min-width: 0;
}
.profile-summary .profile-stats .art {
  display: none;
}
.profile-summary .profile-stats b {
  font-size: 18px;
  line-height: 1.2;
}
.profile-summary .profile-stats small {
  font-size: 10px;
  color: #b9cefa;
}
.profile-summary .level-card {
  padding: 11px 0 0;
  margin-top: 14px;
  background: none;
  border: 0;
  border-top: 1px solid #a5ccff25;
  border-radius: 0;
  box-shadow: none;
}
.profile-summary .level-card > b {
  font-size: 12px;
}
.profile-summary .level-card em {
  font-size: 14px;
}
.profile-summary .level-card .progress {
  height: 7px;
  margin: 6px 0 4px;
}
.profile-summary .level-card small {
  font-size: 10px;
}
#editProfileButton {
  min-height: 40px;
  font-size: 13px;
  padding: 9px 12px;
}
#accountOpen {
  min-height: 35px;
  font-size: 12px;
}
#playerDialog .public-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin: 12px 0 18px;
}
#playerDialog .public-profile .portrait {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
#playerDialog #playerName {
  font-size: 23px;
  overflow-wrap: anywhere;
}
#playerFacts {
  gap: 6px;
  margin: 0 0 16px;
}
#playerFacts > div {
  padding: 10px 3px;
  border-radius: 13px;
}
#playerFacts b {
  font-size: 20px;
}
#playerFacts small {
  font-size: 10px;
}
.profile-gifts {
  padding: 14px;
  margin: 12px 0;
  border-radius: 23px;
}
.profile-gifts .section-title {
  margin-bottom: 10px;
  gap: 8px;
}
.profile-gifts h2 {
  font-size: 18px;
}
.profile-gifts .section-title > span {
  font-size: 12px;
  color: #72dfff;
}
.profile-gift-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.profile-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 3px 9px;
  min-width: 0;
  border-radius: 15px;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  background: radial-gradient(ellipse at 50% 25%, #2f65c54a, transparent 80%);
  box-shadow: none;
}
.profile-gift .item-art {
  width: 100%;
  height: 80px;
  object-fit: contain;
}
.profile-gift b {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
}
.profile-gift small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  color: #b9d3ff;
  margin-top: 4px;
}
.gift-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}
.gift-empty .item-art {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.gift-empty p {
  font-size: 12px;
  color: #b9d3ff;
  line-height: 1.5;
}
#giftDialog[open] {
  display: flex;
  flex-direction: column;
}
#giftDialog .sheet-head {
  flex-shrink: 0;
}
#giftTo {
  margin: 0 0 12px;
  font-size: 13px;
  color: #b9d3ff;
}
#giftCatalog {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  max-height: 57dvh;
  padding: 2px 3px 8px;
  flex-shrink: 1;
}
.gift-product {
  padding: 10px;
  border-radius: 21px;
}
.gift-product .item-art {
  width: 100%;
  height: 112px;
  object-fit: contain;
}
.gift-product h3 {
  font-size: 13px;
  min-height: 34px;
  margin: 2px 0 5px;
  line-height: 1.3;
}
.gift-product small {
  font-size: 11px;
  margin: 0 0 8px;
}
.gift-product button {
  min-height: 35px;
  font-size: 12px;
  padding: 8px 4px;
}
#giftDialog > .fine {
  font-size: 10px;
  margin-bottom: 0;
}
#dailyDays {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.daily-day {
  position: relative;
  padding: 8px 3px;
  min-height: 105px;
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
  border-radius: 16px;
  background: linear-gradient(150deg, #2a4a9366, #142658);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.daily-day > small {
  font-size: 10px;
  color: #bed7ff;
}
.daily-day .daily-art {
  width: 100%;
  height: 50px;
  object-fit: contain;
}
.daily-day > b {
  font-size: 16px;
  color: #ffe7ac;
}
.daily-day.active {
  border-color: #5be6ff;
  background: radial-gradient(ellipse at 50% 20%, #226cc4, #183779);
  box-shadow: inset 0 0 15px #34b5f52b;
}
.daily-day.claimed {
  border-color: #6ee4c8;
  background: #1b4a6155;
}
.day-state {
  display: block;
  font-size: 8px;
  color: #7cefff;
}
.daily-day:last-child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  padding: 5px 9px;
}
.daily-day:last-child .daily-art {
  grid-column: 1;
  grid-row: 1 / span 3;
  height: 78px;
}
.daily-day:last-child > small,
.daily-day:last-child > b,
.daily-day:last-child > .day-state {
  grid-column: 2;
  text-align: center;
}
.quest-card {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 8px;
  border-radius: 18px;
  background: linear-gradient(125deg, #254b9480, #172958);
  border: 0;
  box-shadow:
    inset 0 1px 0 #c9eaff25,
    0 4px 14px #020a2b35;
}
.quest-art {
  width: 45px;
  height: 55px;
  object-fit: contain;
}
.quest-card > div {
  min-width: 0;
}
.quest-card b {
  font-size: 12px;
  line-height: 1.4;
}
.quest-card small {
  font-size: 10px;
  margin-top: 5px;
}
.quest-card progress {
  margin-top: 7px;
  height: 6px;
}
.quest-card button {
  min-height: 34px;
  font-size: 10px;
  padding: 7px 8px;
}
@media (max-width: 370px) {
  .profile-summary {
    padding: 13px;
  }
  .profile-summary .profile-hero {
    gap: 11px;
  }
  .profile-summary .profile-portrait {
    width: 75px;
    flex-basis: 75px;
  }
  .profile-summary .profile-details h2 {
    font-size: 21px;
  }
  .profile-gifts {
    padding: 11px;
  }
  .profile-gift .item-art {
    height: 68px;
  }
  .quest-card {
    grid-template-columns: 35px minmax(0, 1fr) auto;
    gap: 6px;
  }
  .quest-art {
    width: 35px;
    height: 45px;
  }
}

#toast {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 2px 7px #041139;
}