/* Live Rewards podium composition; scoped away from the leaderboard and shop. */
.main-menu-web__reward-briefing {
  --reward-cut: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  border: 3px solid #176da6;
  box-shadow: inset 0 0 0 3px #061018, inset 0 0 0 5px #214b63;
  background: linear-gradient(90deg, #152d3c33 1px, transparent 1px) 0 0/28px 28px, linear-gradient(#152d3c33 1px, transparent 1px) 0 0/28px 28px, #06121c;
  padding: clamp(14px, 1.4vw, 24px);
  gap: 20px;
}
.main-menu-web__reward-header { flex-wrap: nowrap; gap: 12px; }
.main-menu-web__reward-header .main-menu-web__panel-icon { width: 54px; height: 64px; flex-basis: 54px; }
.main-menu-web__reward-header h2 { font-size: clamp(21px, 2vw, 32px); }
.main-menu-web__reward-header p { font-size: clamp(11px, 1.05vw, 16px); }
.main-menu-web__reward-clock { margin-left: auto; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px 10px; min-width: 156px; padding: 12px; border: 2px solid #386d89; clip-path: var(--reward-cut); background: #060e16; }
.main-menu-web__reward-clock span { display: block; color: #a7d5f3; font: 12px/1.25 'Battle Cities UI',sans-serif; }
.main-menu-web__reward-clock .main-menu-web__reward-countdown { display: block; border: 0; padding: 3px 0 0; margin: 0; max-width: none; color: #ffcd16; font: 700 clamp(20px,2vw,30px)/1.1 'Battle Cities UI',sans-serif; text-align: left; }
.main-menu-web__clock-icon { display: block; width: 30px; height: 30px; border: 3px solid #ffc619; border-radius: 50%; position: relative; }
.main-menu-web__clock-icon::before { content: ''; position: absolute; left: 11px; top: 4px; width: 3px; height: 10px; background: #ffc619; }
.main-menu-web__clock-icon::after { content: ''; position: absolute; left: 12px; top: 11px; width: 9px; height: 3px; background: #ffc619; transform: rotate(35deg); transform-origin: left; }
.main-menu-web__reward-clock progress { grid-column: 1/-1; appearance: none; border: 0; width: 100%; height: 9px; background: #132331; accent-color: #ffbd0a; }
.main-menu-web__reward-clock progress::-webkit-progress-bar { background: #132331; }
.main-menu-web__reward-clock progress::-webkit-progress-value { background: #ffbd0a; box-shadow: inset 0 2px #ffdf76; }
.main-menu-web__reward-clock progress::-moz-progress-bar { background: #ffbd0a; }
.main-menu-web__reward-tiers { align-items: end; grid-template-columns: 1fr 1.18fr 1fr 1.2fr; gap: 10px; padding: 12px 0 0; }
.main-menu-web__reward-tier { display: flex; flex-direction: column; justify-content: end; gap: 0; background: none; border: 0; padding: 0; box-shadow: none; }
.main-menu-web__reward-tier .main-menu-web__chest { width: min(100%,132px); height: auto; max-height: none; aspect-ratio: 3/4; margin: 0 auto -18px; position: relative; z-index: 1; }
.main-menu-web__reward-tier--1 .main-menu-web__chest { width: min(100%,158px); filter: drop-shadow(0 0 10px #ffba0044); }
.main-menu-web__podium { width: 100%; min-height: 98px; padding: 22px 4px 12px; display: grid; align-content: center; gap: 9px; background: linear-gradient(#102638,#06131d); border: 2px solid #286080; clip-path: var(--reward-cut); }
.main-menu-web__reward-tier--1 .main-menu-web__podium { min-height: 122px; border-color: #f7b520; background: linear-gradient(#453208,#191203); box-shadow: inset 0 0 16px #ffbe0022; }
.main-menu-web__reward-tier--3 .main-menu-web__podium { border-color: #9d592f; background: linear-gradient(#342015,#130d08); }
.main-menu-web__podium strong { font-size: clamp(20px,2vw,30px); text-transform: none; }
.main-menu-web__podium span { font-size: clamp(13px,1.4vw,21px); color: #d7ecff; }
.main-menu-web__reward-tier--1 .main-menu-web__podium span { color: #ffd221; }
.main-menu-web__reward-tier--4 { position: relative; align-self: stretch; justify-content: center; border: 2px solid #28566e; clip-path: var(--reward-cut); background: #06121d; padding: 42px 8px 14px; margin-left: 6px; }
.main-menu-web__reward-tier--4 .main-menu-web__chest { width: min(75%,84px); margin-bottom: 0; }
.main-menu-web__reward-tier--4 .main-menu-web__podium { border: 0; background: none; clip-path: none; min-height: 0; padding: 0; gap: 8px; }
.main-menu-web__reward-tier--4 strong { position: absolute; inset: 18px 0 auto; font-size: clamp(15px,1.4vw,21px); color: #a7d5f3; }
.main-menu-web__podium small { color: #a7d5f3; font: 13px/1.2 'Battle Cities UI',sans-serif; }
.main-menu-web__how-it-works { background: #070e15; border: 1px solid #526474; clip-path: var(--reward-cut); padding: 14px; margin: 0; }
.main-menu-web__how-it-works h3 { font-size: 18px; }
.main-menu-web__how-it-works ol { gap: 14px; }
.main-menu-web__how-it-works li { font-size: 13px; line-height: 1.4; }
.main-menu-web__how-it-works b { border: 2px solid #ffc619; border-radius: 50%; height: 38px; flex-basis: 38px; font-size: 22px; background: #171304; }
@media (max-width: 600px), (min-width: 860px) and (max-width: 1099px) {
  .main-menu-web__reward-header { flex-wrap: wrap; }
  .main-menu-web__reward-clock { grid-template-columns: 30px 1fr; min-width: 0; width: 100%; }
  .main-menu-web__reward-clock .main-menu-web__reward-countdown { font-size: 25px; }
  .main-menu-web__reward-tiers { gap: 6px; grid-template-columns: 1fr 1.15fr 1fr; }
  .main-menu-web__reward-tier--4 { grid-column: 1/-1; margin: 8px 0 0; padding: 12px; flex-direction: row; align-items: center; gap: 12px; }
  .main-menu-web__reward-tier--4 .main-menu-web__chest { width: 48px; flex: 0 0 48px; margin: 0; }
  .main-menu-web__reward-tier--4 .main-menu-web__podium { width: auto; }
  .main-menu-web__reward-tier--4 strong { position: static; }
  .main-menu-web__reward-tier .main-menu-web__chest { max-width: 104px; }
  .main-menu-web__reward-tier--1 .main-menu-web__chest { max-width: 122px; }
  .main-menu-web__podium strong { font-size: 23px; }
  .main-menu-web__podium span { font-size: 14px; }
  .main-menu-web__how-it-works ol { grid-template-columns: 1fr; }
}