/* Adapt the existing components; these rules do not apply to desktop screens. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  html { height: auto; overflow: auto; }
  body { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  /* Saved Discord drag preview otherwise occupies space above the header. */
  body > .drag-previewer { display: none; }
  .rewards-shell {
    position: relative; inset: auto; display: flex; flex-direction: column; width: 100%; min-height: 100dvh;
    overflow: visible; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .rewards-shell .rewards-masthead { height: auto; min-height: 44px; padding: 0 4px; align-items: center; gap: 16px; }
  .rewards-shell > .event-countdown { position: static; transform: none; flex: none; width: fit-content; max-width: 100%; margin: 4px auto; padding: 5px 8px; gap: 6px; text-align: center; color: #f5f3f7; font-family: 'gg sans', sans-serif; }
  .rewards-shell > .event-countdown strong { color: #f5f3f7; font-size: 9px; }
  .rewards-shell > .event-countdown time { color: #f5f3f7; font-size: 13px; }
  .rewards-shell > .event-countdown small { color: #f5e8ed; font-size: 9px; }
  .rewards-shell > .event-countdown > .community-icon { width: 14px; height: 14px; color: #f5f3f7; }
  .withdraw-button { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .rewards-shell > .activity-feed.community-panel { width: 100%; overflow: hidden; }
  .rewards-shell .activity-feed > header { display: flex; margin: 0 4px; }
  .rewards-shell .activity-feed > header .community-icon,
  .rewards-shell .activity-feed > header .demo-badge { display: none; }
  .rewards-shell .activity-feed h2 { font-size: 13px; }
  .rewards-shell .activity-feed .winner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 4px 0 8px; gap: 10px; overflow: clip; }
  .rewards-shell .activity-feed .winner-row { min-width: 0; padding: 12px 8px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .rewards-shell .activity-feed .winner-row:nth-child(n + 3) { display: none; }
  .rewards-shell .activity-feed .winner-avatar { width: 36px; height: 36px; flex: 0 0 36px; }
  .rewards-shell .activity-feed .winner-row strong { font-size: 15px; }
  .rewards-shell .activity-feed .winner-row p,
  .rewards-shell .activity-feed .winner-row > div { font-size: 13px; line-height: 1.5; }
  .rewards-shell .activity-feed .feed-value,
  .rewards-shell .activity-feed .feed-task-count { font-size: 15px; }
  .rewards-shell .activity-feed > .event-countdown { position: static; transform: none; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 9px 12px; text-align: center; }
  .rewards-shell .activity-feed .feed-sample-label { position: static; display: block; margin: 4px 0 0; color: #c4c6d5; }
  .rewards-shell .activity-feed .feed-sample-label::before { content: ''; }
  .rewards-shell > .community-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; width: 100%; max-width: 744px; height: auto; margin: 8px auto 0; gap: 18px; }
  .rewards-shell .community-layout .giveaway-with-footer { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; height: auto; margin: 0; }
  .rewards-shell .community-layout .giveaway-card { flex: none; width: 100%; max-width: none; height: auto; overflow: visible; padding: 22px 16px 18px; margin: 0; }
  .rewards-shell .community-layout .giveaway-card h1 { font-size: 28px; line-height: 1.2; }
  .rewards-shell .community-layout .welcome-subtitle { font-size: 14px; line-height: 1.5; }
  .rewards-shell .community-layout .wheel-panel,
  .rewards-shell .community-layout .giveaway-card .tasks-panel { flex: none; overflow: visible; }
  .rewards-shell #offerwall { grid-template-columns: minmax(0, 1fr); overflow: visible; padding: 3px 0; scrollbar-gutter: auto; gap: 14px; }
  .rewards-shell .offer-card { padding: 18px; }
  .rewards-shell .offer-bottom { flex-wrap: wrap; gap: 12px; }
  .rewards-shell .offer-action { display: inline-flex; align-items: center; min-height: 44px; }
  .rewards-shell #offerwall-retry { min-height: 44px; font-size: 14px; }
  .rewards-shell .community-layout .giveaway-card .event-countdown { position: static; transform: none; margin: 18px auto 0; padding: 9px 12px; }
  .rewards-shell .event-countdown time { font-size: 16px; }
  .rewards-shell > .giveaway-footer { opacity: 1; color: #c5c7d2; font: 12px/1.5 'gg sans', sans-serif; text-align: center; max-width: 744px; margin: auto auto 0; padding: 18px 6px 0; }
  .rewards-shell > .community-layout { flex: none; }
  .rewards-shell .community-layout > .community-panel { grid-column: 1; grid-row: 2; width: 100%; max-height: none; padding: 16px; align-self: stretch; justify-self: stretch; }
  .rewards-shell .community-layout .chat-list { flex: none; height: 260px; max-height: 40dvh; overflow-y: auto; scrollbar-width: thin; }
  .rewards-shell .community-layout .chat-list::-webkit-scrollbar { display: block; width: 6px; }
  .rewards-shell .community-panel h2 { font-size: 16px; }
  .withdraw-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 20px; }
  .withdraw-dialog button { min-height: 44px; }
}