.reward-hud-btn {
  --acc: #55d98b;
  position: absolute;
  z-index: 52;
  left: 8px;
  top: calc(var(--hudbtn-top) + var(--hudbtn-step));
  width: 108px !important;
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 5px 7px !important;
  cursor: pointer;
}
.reward-hud-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.reward-hud-label { color: #c2d2ca !important; font-size: 10px !important; }
.reward-hud-amount {
  max-width: 74px;
  overflow: hidden;
  color: #8ef0b4;
  font-family: var(--font);
  font-size: 10px;
  font-weight: normal;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reward-hud-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd740;
  box-shadow: 0 0 7px rgba(255, 215, 64, .9);
}
.reward-hud-dot.hidden { display: none; }
.reward-hud-btn.has-claim {
  border-color: rgba(85, 217, 139, .75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px #07060d,
    0 0 12px rgba(85,217,139,.38), 0 2px 0 rgba(0,0,0,.55);
}

.reward-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 4, 10, .88);
  backdrop-filter: blur(3px);
}
.reward-modal.hidden { display: none; }
.reward-modal-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 680px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid #4d6f5c;
  border-radius: 6px;
  background: #111522;
  box-shadow: var(--bevel), 0 18px 60px rgba(0,0,0,.72), 0 0 26px rgba(85,217,139,.12);
}
.reward-modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  padding: 11px 13px 11px 16px;
  border-bottom: 1px solid #354a3e;
  background:
    linear-gradient(90deg, rgba(85,217,139,.12), transparent 58%),
    #171c2a;
}
.reward-modal-kicker { display: block; margin-bottom: 4px; color: #779286; font-size: 10px; }
.reward-modal-title {
  display: block;
  color: #e3f3e9;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
}
.reward-modal-actions { display: flex; align-items: center; gap: 8px; }
.reward-modal-lang { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #34445a; border-radius: 4px; overflow: hidden; }
.reward-modal-lang button {
  min-width: 38px;
  min-height: 36px;
  padding: 7px;
  border: 0;
  background: #111725;
  color: #8f9db0;
  font: normal 11px var(--font);
}
.reward-modal-lang button.active { background: #243828; color: #83ebb0; box-shadow: inset 0 -2px #55d98b; }
.reward-modal-close {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #4b5669;
  border-radius: 4px;
  background: #202638;
  color: #d3dce9;
  font: normal 16px var(--font);
}
.reward-modal-close:active { background: #30384e; transform: translateY(1px); }
.reward-modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px calc(22px + env(safe-area-inset-bottom));
  scrollbar-color: #466957 #111522;
  scrollbar-width: thin;
}
.reward-modal-body::-webkit-scrollbar { width: 5px; }
.reward-modal-body::-webkit-scrollbar-thumb { background: #466957; }

.reward-pool {
  width: min(100%, 640px);
  margin: 0 auto;
  padding-bottom: 28px;
  color: #e8eef7;
  font-size: 13px;
  line-height: 1.45;
}
.reward-loading,
.reward-empty {
  padding: 28px 14px;
  color: #a4b3c8;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.reward-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid #3a8f61;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(68, 217, 136, .14), transparent 52%),
    linear-gradient(180deg, #17251f, #101920);
  box-shadow: var(--bevel), inset 0 0 26px rgba(52,211,153,.05), 0 3px 0 rgba(0,0,0,.42);
}
.reward-hero::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -34px;
  width: 92px;
  height: 92px;
  border: 2px solid rgba(92,231,157,.12);
  transform: rotate(45deg);
  pointer-events: none;
}
.reward-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c2cfdd;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.2;
}
.reward-eyebrow b {
  margin-left: auto;
  padding: 4px 6px;
  color: #8ef0b4;
  border: 1px solid rgba(85,217,139,.3);
  border-radius: 2px;
  background: rgba(27, 87, 54, .28);
  font-family: var(--font);
  font-size: 10px;
  font-weight: normal;
  white-space: nowrap;
}
.reward-live-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: #55d98b;
  box-shadow: 0 0 8px #55d98b;
}
.reward-total-label {
  margin-top: 18px;
  color: #9fafc1;
  font-size: 11px;
}
.reward-total {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 2px;
  color: #82edaf;
  font-size: clamp(28px, 9vw, 42px);
  font-weight: normal;
  line-height: 1;
  text-shadow: 0 0 14px rgba(85,217,139,.25), 0 2px 0 #07100b;
}
.reward-total img { width: 30px; height: 30px; image-rendering: pixelated; }
.reward-total small { align-self: flex-end; margin-bottom: 4px; color: #b9cbbc; font-size: 12px; }
.reward-ton { margin-left: 39px; color: #95a99f; font-size: 11px; }
.reward-pools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.reward-pools > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(102,216,153,.22);
  border-radius: 4px;
  background: rgba(3,10,15,.46);
  box-shadow: var(--bevel-in);
}
.reward-pools span { display: block; color: #a8b8b0; font-size: 10px; line-height: 1.3; }
.reward-pools b { display: block; margin-top: 6px; color: #d8f8e4; font-size: 16px; font-weight: normal; }
.reward-pools b small { color: #9fb3a8; font-size: 10px; }
.reward-timer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(99,211,149,.16);
  color: #aebdcd;
  font-size: 12px;
}
.reward-timer b { color: #f5c542; font-weight: normal; }
.reward-live-note {
  margin-top: 7px;
  color: #88a096;
  font-size: 10px;
  text-align: right;
}
.reward-pool.is-refreshing .reward-live-dot { animation: reward-live-pulse .9s steps(2, end) infinite; }

.reward-source,
.reward-my-card,
.reward-clan-card,
.reward-board {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #35445a;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(28,37,52,.96), rgba(16,23,34,.96));
  box-shadow: var(--bevel), 0 3px 0 rgba(0,0,0,.28);
}
.reward-card-title,
.reward-board-title {
  margin-bottom: 11px;
  color: #d4deeb;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
}
.reward-source-intro { margin-bottom: 8px; color: #bdc9d8; font-size: 12px; }
.reward-source-row {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  gap: 11px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #2a3749;
  color: #d3dce8;
  font-size: 13px;
}
.reward-source-row b {
  color: #75e4a5;
  font-size: 14px;
  font-weight: normal;
  white-space: nowrap;
}
.reward-source-note {
  margin-top: 4px;
  padding: 10px;
  border-left: 3px solid #66758a;
  background: rgba(8, 13, 21, .42);
  color: #aebccd;
  font-size: 12px;
  line-height: 1.5;
}
.reward-source-note + .reward-source-note { margin-top: 7px; }
.reward-clan-split,
.reward-my-clan-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 9px 0 4px;
}
.reward-clan-split > div,
.reward-my-clan-split > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(245,197,66,.25);
  border-radius: 4px;
  background: rgba(31,25,12,.34);
}
.reward-clan-split span,
.reward-my-clan-split span { display: block; color: #f5c542; font-size: 12px; }
.reward-clan-split b,
.reward-my-clan-split b { display: block; margin-top: 4px; color: #e5e9f0; font-size: 11px; font-weight: normal; line-height: 1.35; }
.reward-clan-split small { display: block; margin-top: 6px; color: #8fe6b2; font-size: 11px; }
.reward-my-clan-split { margin-top: 10px; }
.reward-my-clan-split b { color: #8fe6b2; font-size: 12px; }

.reward-my-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reward-my-main > div {
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid #35445b;
  border-radius: 4px;
  background: #111a28;
  box-shadow: var(--bevel-in);
}
.reward-my-main > div:last-child { grid-column: 1 / -1; }
.reward-my-main span { display: block; color: #a8b5c7; font-size: 10px; line-height: 1.3; }
.reward-my-main b { display: block; margin-top: 5px; color: #f0f4fa; font-size: 18px; font-weight: normal; }
.reward-my-main > div:last-child b { color: #73e4a4; font-size: 20px; }
.reward-rating-help {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid #4f4664;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(143,111,212,.12), rgba(17,26,40,.7));
}
.reward-rating-help b { color: #e2d8f7; font-size: 13px; font-weight: normal; }
.reward-rating-help span { color: #c2cddd; font-size: 11px; line-height: 1.45; }
.reward-rating-help small { color: #9daabd; font-size: 11px; }
.reward-rank-gram em { display: block; margin-top: 3px; color: #93a69c; font-size: 9px; font-style: normal; }
.reward-qualified,
.reward-claimed { margin-top: 11px; color: #75e4a5; font-size: 12px; }
.reward-requirements { display: grid; gap: 7px; margin-top: 11px; }
.reward-requirements-title { color: #d1ae66 !important; font-size: 10px !important; }
.reward-requirements > div { color: #e3bf72; font-size: 12px; line-height: 1.4; }
.reward-requirements span { display: inline-block; width: 19px; color: #b18b48; }
.reward-claim {
  width: 100%;
  min-height: 46px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid #8df3ba;
  border-radius: 4px;
  background: linear-gradient(180deg, #2aa862, #17643b);
  color: #f0fff6;
  font: normal 14px var(--font);
  box-shadow: var(--bevel), 0 0 15px rgba(60,220,132,.18), 0 3px 0 #092516;
}
.reward-claim:disabled { opacity: .55; }
.reward-claim-season { margin-top: 8px; color: #9daabd; font-size: 11px; text-align: center; }

.reward-clan-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reward-clan-main > div { min-width: 0; }
.reward-clan-main b {
  display: block;
  overflow: hidden;
  color: #dae3ef;
  font-size: 14px;
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reward-clan-main small { display: block; margin-top: 5px; color: #9eacbd; font-size: 10px; }
.reward-clan-main > span { flex: 0 0 auto; color: #75e4a5; font-size: 13px; text-align: right; }
.reward-clan-main > span small { margin-top: 0; margin-bottom: 4px; }

.reward-board { padding: 0; overflow: hidden; }
.reward-board-title { margin: 0; padding: 14px 14px 12px; border-bottom: 1px solid #35445a; }
.reward-board-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #35445a; }
.reward-board-tabs button {
  min-height: 44px;
  padding: 11px;
  border: 0;
  background: #111925;
  color: #a5b2c4;
  font: normal 12px var(--font);
}
.reward-board-tabs button.active { color: #7ae5a8; background: #17271f; box-shadow: inset 0 -3px #55d98b; }
.reward-rank-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 9px 12px;
  border-bottom: 1px solid #263244;
}
.reward-rank-row:last-child { border-bottom: 0; }
.reward-rank-row.is-me { background: rgba(85,217,139,.1); box-shadow: inset 3px 0 #55d98b; }
.reward-place { color: #e5c75d; font-size: 13px; }
.reward-rank-name {
  min-width: 0;
  overflow: hidden;
  color: #d9e1ec;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reward-rank-name small,
.reward-rank-gram small { display: block; margin-top: 4px; color: #95a5ba; font-size: 10px; }
.reward-rank-gram { color: #75e4a5; font-size: 13px; text-align: right; }

@keyframes reward-live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .reward-pool.is-refreshing .reward-live-dot { animation: none; } }

@media (max-width: 430px) {
  .reward-modal { padding: 0; background: #0b0a12; backdrop-filter: none; }
  .reward-modal-dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .reward-modal-header { min-height: calc(64px + env(safe-area-inset-top)); padding-top: calc(9px + env(safe-area-inset-top)); }
  .reward-modal-title { font-size: 18px; }
  .reward-modal-body { padding: 10px 10px calc(20px + env(safe-area-inset-bottom)); }
  .reward-hero,
  .reward-source,
  .reward-my-card,
  .reward-clan-card { padding: 13px 12px; }
  .reward-eyebrow { font-size: 12px; }
  .reward-total { font-size: clamp(28px, 9vw, 36px); }
  .reward-pools span { min-height: 27px; }
  .reward-source-row { grid-template-columns: 80px 1fr; gap: 9px; }
  .reward-clan-main { align-items: flex-start; flex-direction: column; }
  .reward-clan-main > span { width: 100%; padding-top: 9px; border-top: 1px solid #2a3749; text-align: left; }
  .reward-rank-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 7px; padding-right: 9px; padding-left: 9px; }
}

@media (max-width: 350px) {
  .reward-pools { grid-template-columns: 1fr; }
  .reward-pools span { min-height: 0; }
  .reward-source-row { grid-template-columns: 1fr; gap: 3px; }
}