/* Arena Teney — Shop S1.4 rarity + pristine selection polish 0218s14r04p3
 * Presentation-only tile states. Canonical ui007 selection/data remain untouched.
 * No HUD/dock/X-lock/modal/economy ownership.
 */

@media (max-width: 960px) {
  /* ui007 internally preselects its first preview owner. Until the player actually taps
   * an item, keep that internal state visually neutral instead of looking chosen. */
  html.shop-s1-rework:not(.shop-s14-explicit-selection) body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].selected.quality-common,
  html.shop-s1-rework:not(.shop-s14-explicit-selection) body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].selected:not([class*="quality-"]) {
    border-width: 1px !important;
    border-color: rgba(175, 139, 83, .46) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(224, 178, 97, .12), transparent 38%),
      radial-gradient(circle at 115% 105%, rgba(116, 72, 30, .10), transparent 44%),
      linear-gradient(158deg, rgba(31, 25, 18, .995), rgba(11, 10, 8, .998) 63%, rgba(7, 7, 6, 1)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 241, 214, .05),
      inset 0 0 0 1px rgba(255, 214, 145, .016),
      inset 0 -24px 34px rgba(0, 0, 0, .15),
      0 8px 22px rgba(0, 0, 0, .23) !important;
  }

  html.shop-s1-rework:not(.shop-s14-explicit-selection) body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].selected.quality-uncommon {
    border-width: 1px !important;
    border-color: rgba(83, 130, 88, .56) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(224, 178, 97, .12), transparent 38%),
      radial-gradient(circle at 115% 105%, rgba(116, 72, 30, .10), transparent 44%),
      linear-gradient(158deg, rgba(31, 25, 18, .995), rgba(11, 10, 8, .998) 63%, rgba(7, 7, 6, 1)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 241, 214, .05),
      inset 0 0 0 1px rgba(83, 130, 88, .06),
      inset 0 -24px 34px rgba(0, 0, 0, .15),
      0 8px 22px rgba(0, 0, 0, .23) !important;
  }

  /* Higher rarity reads from the card edge first: thicker, still restrained. */
  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].quality-rare {
    border-width: 2px !important;
    border-color: rgba(76, 143, 205, .88) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(72, 132, 180, .14), transparent 39%),
      linear-gradient(158deg, rgba(22, 29, 34, .995), rgba(10, 10, 9, .998) 68%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(104, 169, 221, .08),
      inset 0 -24px 34px rgba(0, 0, 0, .14),
      0 8px 22px rgba(0, 0, 0, .24),
      0 0 14px rgba(65, 135, 195, .10) !important;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].quality-epic {
    border-width: 2px !important;
    border-color: rgba(153, 91, 207, .90) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(130, 83, 181, .15), transparent 39%),
      linear-gradient(158deg, rgba(31, 24, 35, .995), rgba(10, 9, 10, .998) 68%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(176, 112, 225, .09),
      inset 0 -24px 34px rgba(0, 0, 0, .14),
      0 8px 22px rgba(0, 0, 0, .24),
      0 0 15px rgba(128, 74, 177, .11) !important;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].quality-legendary {
    border-width: 2px !important;
    border-color: rgba(224, 171, 67, .94) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(224, 168, 69, .19), transparent 40%),
      linear-gradient(158deg, rgba(41, 32, 17, .995), rgba(11, 10, 8, .998) 68%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(236, 190, 94, .10),
      inset 0 -24px 34px rgba(0, 0, 0, .14),
      0 8px 22px rgba(0, 0, 0, .24),
      0 0 15px rgba(198, 140, 43, .12) !important;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].quality-artifact,
  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].quality-artifactic,
  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].quality-relic {
    border-width: 2px !important;
    border-color: rgba(118, 204, 194, .94) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(105, 194, 184, .16), transparent 40%),
      radial-gradient(circle at 115% 100%, rgba(207, 173, 91, .08), transparent 42%),
      linear-gradient(158deg, rgba(20, 34, 33, .995), rgba(9, 11, 10, .998) 68%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(155, 226, 216, .10),
      inset 0 -24px 34px rgba(0, 0, 0, .14),
      0 8px 22px rgba(0, 0, 0, .24),
      0 0 16px rgba(83, 177, 166, .12) !important;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-item[data-ui007-item].quality-cursed {
    border-width: 2px !important;
    border-color: rgba(181, 68, 87, .92) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(166, 61, 82, .16), transparent 40%),
      linear-gradient(158deg, rgba(39, 21, 23, .995), rgba(11, 9, 9, .998) 68%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(207, 91, 108, .09),
      inset 0 -24px 34px rgba(0, 0, 0, .14),
      0 8px 22px rgba(0, 0, 0, .24),
      0 0 15px rgba(145, 49, 67, .12) !important;
  }

  /* Keep long Russian comparison labels elegant inside the detail modal. */
  html.shop-s1-rework .s03f3-modal-content .ui007-deltas span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: pretty;
  }
}