.daily-login-reward-modal.modal {
  width: min(1040px, calc(100% - .8rem));
}

.daily-login-reward-modal .modal-card {
  height: min(94dvh, 780px);
  max-height: min(94dvh, 780px);
  padding: .72rem .78rem .82rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 35%, rgba(24, 123, 179, .2), transparent 58%),
    linear-gradient(180deg, #0c3c63 0%, #0a3155 52%, #071d35 100%);
  border: 2px solid #c9aa57;
  border-radius: 18px;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .64),
    inset 0 0 0 2px rgba(255, 232, 151, .12),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}

.daily-login-reward-modal .modal-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 58px;
  pointer-events: none;
  border-bottom: 1px solid rgba(121, 189, 226, .2);
  background:
    radial-gradient(circle at 26% -70%, rgba(255, 215, 104, .18), transparent 52%),
    linear-gradient(180deg, #0b263d, #071c30);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
}

.daily-login-reward-modal .modal-card h2 {
  position: relative;
  z-index: 2;
  min-height: 42px;
  display: flex;
  align-items: center;
  margin: 0 18rem .66rem .2rem;
  color: #fffdf4;
  font-family: var(--font-system);
  font-size: 1.36rem;
  font-weight: 1000;
  letter-spacing: .015em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .68), 0 0 10px rgba(255, 255, 255, .08);
}

.daily-login-reward-modal .modal-card #modalBody {
  height: 100%;
  min-height: 0;
  display: grid;
  overflow: hidden;
  padding-right: 0;
}

.daily-login-reward-modal .modal-close {
  z-index: 6;
}

.daily-reward-tabs {
  position: absolute;
  z-index: 5;
  top: .34rem;
  right: 6rem;
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 1.2rem;
}

.daily-reward-tabs button {
  position: relative;
  width: 44px;
  height: 47px;
  display: grid;
  place-items: center;
  padding: .28rem .24rem .42rem;
  border: 2px solid rgba(123, 194, 232, .5);
  border-radius: 9px 9px 15px 15px;
  color: #d9efff;
  background: linear-gradient(180deg, #1f6da4, #0b3c68 76%, #072944);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -4px 0 rgba(0, 0, 0, .18),
    0 5px 10px rgba(0, 0, 0, .28);
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}

.daily-reward-tabs button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 229, 145, .84);
  filter: brightness(1.12);
}

.daily-reward-tabs button.active {
  border-color: #69dff4;
  background: linear-gradient(180deg, #2c92c6, #146094 72%, #0a3c67);
  box-shadow:
    0 0 0 2px rgba(246, 199, 81, .32),
    0 0 14px rgba(74, 207, 238, .34),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -4px 0 rgba(0, 0, 0, .16);
}

.daily-reward-tabs button:focus-visible {
  outline: 3px solid #9ed5ff;
  outline-offset: 2px;
}

.daily-reward-tabs img {
  width: 33px;
  height: 33px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}

.daily-reward-tab-alert {
  position: absolute;
  z-index: 3;
  top: -7px;
  right: -7px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2px solid #ffd4cf;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(#ff5148, #b80e18);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), 0 0 10px rgba(255, 46, 46, .68);
  font-size: .68rem;
  font-weight: 1000;
  line-height: 1;
}

.daily-reward-panel,
.daily-quest-tab-panel,
.seasonal-achievement-tab-panel {
  min-width: 0;
  min-height: 0;
}

.daily-reward-panel {
  display: grid;
  align-content: start;
  padding: .62rem .6rem .48rem;
  border: 1px solid rgba(87, 171, 218, .12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 12%, rgba(36, 143, 195, .18), transparent 55%),
    linear-gradient(180deg, rgba(8, 55, 91, .76), rgba(5, 35, 63, .7));
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .18);
}

.daily-quest-tab-panel {
  height: 100%;
  display: grid;
}

.seasonal-achievement-tab-panel {
  height: 100%;
  display: grid;
  overflow: hidden;
}

.seasonal-achievement-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: .48rem;
  overflow: hidden;
  padding: .58rem;
  border: 1px solid rgba(211, 161, 63, .34);
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 0%, rgba(232, 187, 76, .13), transparent 32%),
    linear-gradient(180deg, rgba(13, 46, 70, .9), rgba(4, 19, 32, .94));
  box-shadow: inset 0 1px 0 rgba(255, 243, 194, .06);
}

.seasonal-achievement-hero {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .72rem;
  padding: .5rem .65rem;
  border: 1px solid rgba(234, 190, 88, .28);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(61, 39, 20, .54), rgba(8, 40, 64, .72));
}

.seasonal-achievement-hero > div:first-child > span,
.seasonal-achievement-row-copy > span,
.seasonal-achievement-reward > span {
  color: #8ecdf1;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.seasonal-achievement-hero h3 {
  margin: .05rem 0;
  color: #ffe29a;
  font-size: 1.05rem;
}

.seasonal-achievement-hero p,
.seasonal-achievement-row p,
.seasonal-achievement-error {
  margin: 0;
  color: #bdd4e2;
  font-size: .64rem;
}

.seasonal-achievement-totals {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: baseline;
  gap: .04rem .42rem;
  text-align: right;
}

.seasonal-achievement-totals strong { color: #fff2bd; font-size: .82rem; white-space: nowrap; }
.seasonal-achievement-totals span { color: #8ecdf1; font-size: .52rem; font-weight: 850; text-transform: uppercase; }

.seasonal-achievement-filters {
  display: flex;
  gap: .26rem;
  overflow-x: auto;
  padding: .05rem 0 .16rem;
  scrollbar-width: thin;
}

.seasonal-achievement-filters button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: .2rem .52rem;
  border: 1px solid rgba(125, 188, 226, .32);
  border-radius: 999px;
  color: #cce8f7;
  background: rgba(4, 27, 45, .72);
  font-size: .58rem;
  font-weight: 900;
}

.seasonal-achievement-filters button.active {
  border-color: #e9be5a;
  color: #2b1a02;
  background: linear-gradient(#ffe58f, #d59a28);
}

.seasonal-achievement-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: .34rem;
  overflow-y: auto;
  padding: 0 .12rem .18rem 0;
  overscroll-behavior: contain;
  scroll-padding-bottom: .18rem;
  scrollbar-width: thin;
}

.seasonal-achievement-row {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(118px, .42fr);
  align-items: center;
  gap: .48rem;
  padding: .42rem .5rem;
  border: 1px solid rgba(114, 181, 218, .2);
  border-radius: 9px;
  background: rgba(3, 17, 29, .68);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.seasonal-achievement-row.complete { border-color: rgba(224, 184, 77, .5); background: rgba(50, 42, 20, .52); }
.seasonal-achievement-row.claimed { border-color: rgba(91, 160, 73, .4); opacity: .72; }
.seasonal-achievement-row:hover,
.seasonal-achievement-row.expanded { border-color: rgba(238, 198, 96, .62); }
.seasonal-achievement-row:focus-visible { outline: 2px solid #f2c768; outline-offset: 1px; }

.seasonal-achievement-row-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 198, 96, .42);
  border-radius: 50%;
  color: #ffe49a;
  background: radial-gradient(circle, rgba(202, 145, 35, .3), rgba(7, 32, 50, .92));
  font-size: 1rem;
}

.seasonal-achievement-row-copy { min-width: 0; display: grid; gap: .08rem; }
.seasonal-achievement-row-copy strong { color: #fff4d2; font-size: .72rem; }
.seasonal-achievement-row-copy small { color: #c3d9e5; font-size: .57rem; font-weight: 800; }

.seasonal-achievement-progress { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, .55); }
.seasonal-achievement-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #347fa8, #efbd52); }
.seasonal-achievement-row.complete .seasonal-achievement-progress span { background: linear-gradient(90deg, #5c8f45, #b9e66b); }

.seasonal-achievement-reward { min-width: 0; display: grid; justify-items: end; gap: .12rem; text-align: right; }
.seasonal-achievement-reward strong { color: #f2c768; font-size: .62rem; }
.seasonal-achievement-reward small { color: #aac7d8; font-size: .55rem; }
.seasonal-achievement-reward b { color: #9ed77c; font-size: .56rem; }

.seasonal-achievement-details {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .08rem .42rem;
  padding: .34rem .18rem 0;
  border-top: 1px solid rgba(142, 205, 241, .18);
}

.seasonal-achievement-details[hidden] { display: none; }
.seasonal-achievement-details > span { color: #8ecdf1; font-size: .55rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.seasonal-achievement-details > strong { color: #fff4d2; font-size: .63rem; }
.seasonal-achievement-details > small { grid-column: 2; color: #bcd2df; font-size: .56rem; line-height: 1.25; }

.seasonal-achievement-reward button,
.seasonal-achievement-panel .daily-mission-empty button {
  min-width: 72px;
  min-height: 29px;
  padding: .24rem .5rem;
  border: 1px solid #fff0ad;
  border-radius: 7px;
  color: #251600;
  background: linear-gradient(#ffe785, #d9931f);
  font-size: .61rem;
  font-weight: 1000;
}

.seasonal-achievement-error { padding: .32rem .48rem; border-radius: 7px; color: #ffd1cb; background: rgba(129, 26, 25, .35); }

.daily-reward-grid {
  width: min(100%, 920px);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: clamp(70px, 10.5dvh, 96px);
  gap: clamp(.36rem, .9vw, .65rem);
  margin-inline: auto;
  overflow: hidden;
}

.daily-reward-card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 0;
  padding: clamp(.22rem, .55vw, .36rem) clamp(.16rem, .4vw, .3rem) .86rem;
  overflow: hidden;
  border: 2px solid rgba(39, 128, 139, .55);
  border-radius: clamp(7px, 1vw, 10px);
  color: inherit;
  background:
    radial-gradient(circle at 50% 38%, rgba(30, 102, 130, .18), transparent 53%),
    linear-gradient(180deg, rgba(5, 20, 29, .98), rgba(2, 10, 17, .99));
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 4px 8px rgba(0, 0, 0, .26);
  font: inherit;
  text-align: center;
}

.daily-reward-card.claimed {
  border-color: rgba(81, 157, 57, .94);
  background:
    radial-gradient(circle at 50% 36%, rgba(107, 175, 67, .18), transparent 52%),
    linear-gradient(180deg, rgba(10, 31, 19, .98), rgba(3, 14, 10, .99));
  box-shadow:
    inset 0 0 0 2px rgba(19, 68, 23, .5),
    0 0 9px rgba(101, 185, 64, .1);
}

.daily-reward-card.claimed .daily-reward-card-icon {
  opacity: .7;
  filter: saturate(.78) drop-shadow(0 5px 7px rgba(0, 0, 0, .42));
}

.daily-reward-card.claimed::after {
  content: "✓";
  position: absolute;
  z-index: 4;
  top: 46%;
  left: 50%;
  width: clamp(24px, 3.2vw, 36px);
  height: clamp(24px, 3.2vw, 36px);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(-5deg);
  color: #c7ed29;
  border: 2px solid rgba(39, 78, 11, .72);
  border-radius: 50%;
  background: rgba(36, 71, 12, .34);
  box-shadow: 0 3px 0 rgba(24, 47, 8, .78), 0 0 9px rgba(191, 236, 42, .2);
  font-size: clamp(1.08rem, 2.4vw, 1.7rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 #355707, 0 0 5px rgba(212, 246, 85, .42);
}

.daily-reward-card.available {
  border-color: #63e2ef;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 207, 72, .26), transparent 56%),
    linear-gradient(180deg, rgba(24, 61, 65, .98), rgba(6, 24, 31, .99));
  box-shadow:
    0 0 0 2px rgba(240, 173, 39, .34),
    0 0 17px rgba(76, 221, 238, .4),
    inset 0 0 0 1px rgba(224, 251, 255, .28);
  animation: dailyRewardClaimPulse 1.9s ease-in-out infinite;
}

.daily-reward-card.queued {
  border-color: rgba(67, 203, 218, .82);
  background: linear-gradient(180deg, rgba(11, 57, 71, .96), rgba(4, 22, 34, .99));
  box-shadow: inset 0 0 0 1px rgba(139, 238, 245, .18), 0 0 10px rgba(61, 208, 224, .14);
}

.daily-reward-card.item:not(.claimed) {
  border-color: rgba(190, 72, 230, .74);
  background:
    radial-gradient(circle at 50% 35%, rgba(177, 104, 255, .2), transparent 52%),
    linear-gradient(180deg, rgba(52, 41, 85, .96), rgba(20, 16, 42, .99));
}

.daily-reward-card.item.available {
  border-color: #63e2ef;
  box-shadow:
    0 0 0 2px rgba(240, 173, 39, .34),
    0 0 17px rgba(76, 221, 238, .4),
    inset 0 0 0 1px rgba(224, 251, 255, .28);
}

.daily-reward-card.next {
  border-color: rgba(36, 151, 179, .64);
  box-shadow: inset 0 0 0 1px rgba(96, 209, 226, .12);
}

.daily-reward-card.locked {
  opacity: .72;
  filter: saturate(.82);
}

button.daily-reward-card.available {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

button.daily-reward-card.available:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #fff2a2;
  filter: brightness(1.1);
}

button.daily-reward-card.available:active:not(:disabled) {
  transform: translateY(0);
}

button.daily-reward-card.available:focus-visible {
  outline: 3px solid #9ed5ff;
  outline-offset: 2px;
}

button.daily-reward-card.available:disabled {
  cursor: wait;
  opacity: .76;
}

.daily-reward-card-icon {
  position: relative;
  z-index: 2;
  width: clamp(36px, 5.2vw, 62px);
  height: clamp(36px, 5.2vw, 62px);
  min-height: 0;
  place-self: center;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .42));
}

.daily-reward-card-amount {
  position: absolute;
  z-index: 3;
  inset: auto .16rem .18rem;
  min-width: 0;
  overflow: hidden;
  padding-top: .16rem;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .58));
  font-family: var(--font-system);
  font-size: clamp(.58rem, 1.18vw, .76rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .92), 0 0 4px rgba(0, 0, 0, .72);
  white-space: nowrap;
}

.daily-reward-loading,
.daily-reward-error {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: .65rem;
  padding: 1rem;
  text-align: center;
}

.daily-reward-error button {
  min-height: 38px;
  padding: .42rem .72rem;
  border: 1px solid #fff0ad;
  border-radius: 9px;
  color: #201300;
  background: linear-gradient(#ffe785, #d9931f);
  box-shadow: inset 0 -4px 0 rgba(92, 50, 5, .2), 0 8px 18px rgba(0, 0, 0, .24);
  font-weight: 1000;
}

@keyframes dailyRewardClaimPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

@media (max-width: 700px) {
  .daily-login-reward-modal.modal {
    width: calc(100% - .4rem);
  }

  .daily-login-reward-modal .modal-card {
    padding: .54rem .56rem .62rem;
  }

  .daily-login-reward-modal .modal-card::before {
    height: 52px;
  }

  .daily-login-reward-modal .modal-card h2 {
    min-height: 39px;
    margin: 0 15rem .56rem .12rem;
    font-size: 1.05rem;
  }

  .daily-reward-tabs {
    top: .3rem;
    right: 5rem;
    grid-template-columns: repeat(3, 38px);
    gap: .9rem;
  }

  .daily-reward-tabs button {
    width: 38px;
    height: 41px;
    padding: .2rem .18rem .34rem;
    border-radius: 8px 8px 13px 13px;
  }

  .daily-reward-tabs img {
    width: 29px;
    height: 29px;
  }

  .daily-reward-panel {
    padding: .42rem .3rem .34rem;
  }

  .daily-reward-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: clamp(48px, 6.5dvh, 62px);
    gap: clamp(.2rem, .9vw, .3rem);
  }

  .daily-reward-card-icon {
    width: clamp(28px, 8.5vw, 40px);
    height: clamp(28px, 8.5vw, 40px);
  }

  .daily-reward-card-amount {
    font-size: clamp(.5rem, 2.35vw, .63rem);
  }

  .seasonal-achievement-panel { padding: .38rem; gap: .32rem; }
  .seasonal-achievement-hero { padding: .38rem .45rem; }
  .seasonal-achievement-row { grid-template-columns: 32px minmax(0, 1fr) 91px; gap: .32rem; padding: .34rem; }
  .seasonal-achievement-row-icon { width: 30px; height: 30px; font-size: .84rem; }
  .seasonal-achievement-row-copy p { display: none; }
  .seasonal-achievement-reward strong { font-size: .54rem; }
  .seasonal-achievement-details { padding-top: .28rem; }
}

@media (max-width: 360px) {
  .daily-login-reward-modal .modal-card h2 {
    margin-right: 12.5rem;
    font-size: .72rem;
    white-space: nowrap;
  }

  .daily-reward-tabs {
    right: 2.5rem;
    grid-template-columns: repeat(3, 32px);
    gap: .55rem;
  }

  .daily-reward-tabs button {
    width: 32px;
    height: 37px;
  }

  .daily-reward-tabs img {
    width: 25px;
    height: 25px;
  }
}

@media (max-height: 640px) and (orientation: landscape) {
  .daily-login-reward-modal .modal-card {
    height: calc(100dvh - .3rem);
    max-height: calc(100dvh - .3rem);
    padding: .4rem .44rem .46rem;
  }

  .daily-login-reward-modal .modal-card::before {
    height: 44px;
  }

  .daily-login-reward-modal .modal-card h2 {
    min-height: 31px;
    margin: 0 13.5rem .35rem .12rem;
    font-size: .98rem;
  }

  .daily-reward-tabs {
    top: .18rem;
    right: 5rem;
    grid-template-columns: repeat(3, 34px);
    gap: .75rem;
  }

  .daily-reward-tabs button {
    width: 34px;
    height: 36px;
    padding: .18rem .16rem .3rem;
    border-radius: 7px 7px 11px 11px;
  }

  .daily-reward-tabs img {
    width: 26px;
    height: 26px;
  }

  .daily-reward-panel {
    padding: .28rem .26rem .24rem;
  }

  .daily-reward-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: clamp(47px, 16.5dvh, 62px);
    gap: .25rem;
  }

  .daily-reward-card {
    padding: .14rem .18rem;
  }

  .daily-reward-card-icon {
    width: clamp(28px, 8.5dvh, 38px);
    height: clamp(28px, 8.5dvh, 38px);
  }

  .daily-reward-card-amount {
    font-size: .5rem;
  }

  .seasonal-achievement-panel { padding: .28rem; gap: .25rem; }
  .seasonal-achievement-hero { padding: .25rem .38rem; }
  .seasonal-achievement-hero h3 { font-size: .82rem; }
  .seasonal-achievement-hero p { display: none; }
  .seasonal-achievement-filters button { min-height: 23px; padding: .14rem .42rem; }
  .seasonal-achievement-row { grid-template-columns: 28px minmax(0, 1fr) 100px; gap: .28rem; padding: .23rem .32rem; }
  .seasonal-achievement-row-icon { width: 27px; height: 27px; font-size: .76rem; }
  .seasonal-achievement-row p { display: none; }
  .seasonal-achievement-details { grid-template-columns: 1fr; gap: .08rem; }
  .seasonal-achievement-details > small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-reward-card.available {
    animation: none;
  }
}
