/* V1.58. A compact catalog on phones; desktop cards and all purchase rules stay unchanged. */
.shop-mobile-details, .shop-mobile-level { display:none; }
@media (max-width:720px) {
  #rewardsView #shopGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #rewardsView #shopGrid > .shop-card { min-width:0; position:relative; border-radius:16px; display:flex; flex-direction:column; }
  #rewardsView #shopGrid > .shop-card:hover { transform:none; }
  #rewardsView #shopGrid .shop-preview { height:88px; min-height:88px; flex:none; }
  #rewardsView #shopGrid .material-board-preview { padding:10px 8px; }
  #rewardsView #shopGrid .cosmetic-board-mini { padding:4px; border-radius:7px; }
  #rewardsView #shopGrid .mini-felt { border-radius:3px; }
  #rewardsView #shopGrid .mini-quarter { padding:0 1px; gap:0; }
  #rewardsView #shopGrid .collection-checker { width:54px; height:54px; }
  #rewardsView #shopGrid .collection-checker.rear { left:calc(50% - 48px); top:calc(50% - 31px); }
  #rewardsView #shopGrid .collection-checker.front { left:calc(50% - 5px); top:calc(50% - 21px); }
  #rewardsView #shopGrid .dice-preview-pair { gap:9px; padding-top:0; }
  #rewardsView #shopGrid .dice-preview-pair .game-die { width:40px; height:40px; padding:7px; border-radius:9px; }
  #rewardsView #shopGrid .dice-preview-pair .die-pip { width:5px; height:5px; }
  /* The repeated decorative slogans and material tags are not controls. */
  #rewardsView #shopGrid .dice-preview-caption, #rewardsView #shopGrid .dice-material-tag { display:none; }
  #rewardsView #shopGrid .badge-profile-preview .badge-preview { width:66px; height:66px; border-radius:20px; padding:3px; }
  #rewardsView #shopGrid .shop-copy { padding:8px; gap:4px; flex:1; min-width:0; display:flex; flex-direction:column; }
  #rewardsView #shopGrid .shop-copy-top { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
  #rewardsView #shopGrid .shop-copy-top h3 { flex:none; margin:0; width:100%; min-height:34px; font-size:13px; line-height:17px; letter-spacing:0; overflow-wrap:anywhere; }
  /* Keep the shared rarity palette and sizing, not a mobile-only recolor. */
  #rewardsView #shopGrid .shop-rarity { max-width:100%; }
  #rewardsView #shopGrid .shop-description, #rewardsView #shopGrid .dice-unlock-meta,
  #rewardsView #shopGrid .badge-level { display:none; }
  #rewardsView #shopGrid .shop-mobile-level { display:block; margin:0; color:var(--muted); font-size:11px; line-height:16px; }
  #rewardsView #shopGrid .shop-action { min-width:0; min-height:44px; padding:5px 4px; font-size:11px; line-height:16px; margin-top:auto; flex-shrink:0; }
  #rewardsView #shopGrid .shop-mobile-details { display:block; }
  #rewardsView #shopGrid .shop-mobile-details > summary { position:absolute; top:0; right:0; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; list-style:none; z-index:2; border-radius:12px; color:var(--text); -webkit-tap-highlight-color:transparent; }
  #rewardsView #shopGrid .shop-mobile-details > summary::-webkit-details-marker { display:none; }
  #rewardsView #shopGrid .shop-mobile-details > summary span { display:grid; place-items:center; width:21px; height:21px; border:1px solid #b4c2d188; border-radius:50%; background:#101720ed; font-family:inherit; font-weight:700; font-size:12px; line-height:1; }
  #rewardsView #shopGrid .shop-mobile-details[open] > summary span { color:var(--lime); border-color:var(--lime); }
  #rewardsView #shopGrid .shop-mobile-details > summary:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
  #rewardsView #shopGrid .shop-mobile-details p { margin:4px 0; min-height:0; color:var(--muted); font-size:12px; line-height:18px; overflow-wrap:anywhere; }
  /* Daily and weekly identifiers stay on every card, so the mobile catalog can
     flow continuously without leaving an empty fourth cell after three dailies. */
  #rewardsView #shopGrid.coin-challenge-grid > .cv-section-heading { display:none; }
  #rewardsView #shopGrid .cv-card-top { display:none; }
  #rewardsView #shopGrid .cv-icon { display:none; }
  #rewardsView #shopGrid .cv-status { font-size:10px; line-height:14px; padding:2px 6px; }
  #rewardsView #shopGrid .cv-card-copy { padding:4px 8px 6px; flex:1; display:flex; flex-direction:column; }
  #rewardsView #shopGrid .cv-period { font-size:9px; line-height:12px; letter-spacing:.04em; }
  #rewardsView #shopGrid .cv-card-copy h3 { font-size:13px; line-height:18px; margin:3px 0; letter-spacing:0; overflow-wrap:anywhere; outline:none; }
  #rewardsView #shopGrid .cv-goal { font-size:11px; line-height:15px; min-height:30px; margin:0; }
  #rewardsView #shopGrid .cv-economy { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; padding:3px 0; margin-top:5px; }
  #rewardsView #shopGrid .cv-arrow { display:none; }
  #rewardsView #shopGrid .cv-economy small { font-size:10px; line-height:13px; min-height:26px; margin-bottom:2px; }
  #rewardsView #shopGrid .cv-economy strong { font-size:17px; line-height:20px; }
  #rewardsView #shopGrid .cv-economy strong span { font-size:10px; }
  #rewardsView #shopGrid .cv-gain { padding:4px 5px; font-size:10px; line-height:13px; gap:3px; align-items:center; }
  #rewardsView #shopGrid .cv-gain > span { flex:1; }
  #rewardsView #shopGrid .cv-progress-copy { margin:6px 0 3px; gap:4px; font-size:10px; line-height:14px; }
  #rewardsView #shopGrid .cv-progress { height:4px; flex-shrink:0; }
  #rewardsView #shopGrid .cv-timing { font-size:10px; line-height:14px; min-height:28px; margin:4px 0; }
  #rewardsView #shopGrid .cv-action { margin-top:auto; }
  #rewardsView #shopGrid .cv-rules { margin-top:8px; }
}
/* Short windows keep readable buttons and ordinary scrolling, not clipped cards. */
@media (max-width:720px) and (max-height:700px) {
  #rewardsView #shopGrid .shop-preview { height:76px; min-height:76px; }
}