/* Collection rarity looks (playtest 2026-09-29): the Safehouse had one green look for every
   card. Core, starter and common stay plain; rare is a notch up; epic glows; legendary has a
   lit gold ground, a pulse and a sweep of light. Syndicate cards keep their faction frame and
   breathe in its colour. Classes come from safehouse.js buildDeckCardEl (rar-*, syn-*). */

#safehouse .hand-card.rar-rare, #safehouse .hand-card.rar-epic, #safehouse .hand-card.rar-legendary,
#safehouse .hand-card.syn-card { position: relative; isolation: isolate; }
/* The light layers sit at z-index -1 inside the isolated card: above its ground, under its text.
   No overflow clip, so the NEW ribbon that hangs over the top edge stays whole. */

/* The tag sits in the free bottom-left corner (the foot's counts are right-aligned), inside the
   card so the collection's scroll box never clips it. */
#safehouse .sh-rar-tag { position: absolute; bottom: 6px; left: 8px; z-index: 2; padding: 1px 6px 2px;
  font: 700 8px var(--sh-display, 'Chakra Petch', sans-serif); letter-spacing: 0.16em; border-radius: 3px; }

/* RARE — a cyan frame and a cool inner light. */
#safehouse .hand-card.rar-rare { border: 1px solid #37d5f5 !important; border-top-width: 3px !important;
  background: linear-gradient(170deg, rgba(20,78,102,0.95), rgba(6,26,38,0.97) 60%) !important;
  box-shadow: inset 0 0 22px rgba(55,213,245,0.2), 0 0 12px rgba(55,213,245,0.3); }
#safehouse .hand-card.rar-rare .hand-chip-head { color: #bff2ff; }
#safehouse .hand-card.rar-rare .sh-rar-tag { background: #37d5f5; color: #03101a; }

/* EPIC — violet frame, soft glow, a slow light running round the edge. */
#safehouse .hand-card.rar-epic { border: 1px solid #a85cf6 !important;
  background: radial-gradient(ellipse at 50% 30%, rgba(76,30,140,0.55), rgba(14,6,28,0.98) 70%) !important;
  box-shadow: inset 0 0 22px rgba(168,92,246,0.22), 0 0 16px rgba(168,92,246,0.35); }
#safehouse .hand-card.rar-epic .sh-rar-tag { background: #a85cf6; color: #0e0618; }
#safehouse .hand-card.rar-epic::after { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--rar-a, 0deg), transparent 0 80%, rgba(210,170,255,0.55) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; animation: rar-orbit 5s linear infinite; }

/* LEGENDARY — lit gold ground, gold frame, a pulse and a sweep of light across the card. */
#safehouse .hand-card.rar-legendary { border: 1px solid #f5c842 !important;
  background: radial-gradient(ellipse at 50% 35%, rgba(150,100,20,0.75), rgba(60,36,6,0.95) 55%, rgba(18,10,2,0.98) 85%) !important;
  box-shadow: inset 0 0 26px rgba(245,200,66,0.35), 0 0 22px rgba(245,180,40,0.45);
  animation: rar-legend-pulse 2.6s ease-in-out infinite; }
#safehouse .hand-card.rar-legendary .hand-chip-head { color: #ffe39a; }
#safehouse .hand-card.rar-legendary .sh-rar-tag { background: linear-gradient(90deg, #f5c842, #ffe8a0); color: #1a1004; }
#safehouse .hand-card.rar-legendary::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,236,170,0.35) 48%, rgba(255,255,255,0.55) 50%, rgba(255,236,170,0.35) 52%, transparent 70%);
  background-size: 250% 100%; animation: rar-sweep 3.4s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes rar-legend-pulse {
  0%, 100% { box-shadow: inset 0 0 26px rgba(245,200,66,0.35), 0 0 18px rgba(245,180,40,0.35); }
  50% { box-shadow: inset 0 0 34px rgba(245,200,66,0.5), 0 0 30px rgba(245,180,40,0.65); } }
@keyframes rar-sweep { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }

/* SYNDICATE — the faction frame breathes in its colour; the epic ones a little brighter. */
#safehouse .hand-card.syn-card { animation: syn-breathe 3.2s ease-in-out infinite; }
#safehouse .hand-card.syn-card.syn-techno_nomads { --syn-rgb: 0,148,216; }
#safehouse .hand-card.syn-card.syn-street_prolets { --syn-rgb: 245,163,55; }
#safehouse .hand-card.syn-card.syn-neo_yakuza { --syn-rgb: 196,77,255; }
#safehouse .hand-card.syn-card.syn-epic { animation-duration: 2.2s; }
@keyframes syn-breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--syn-rgb, 150,150,150), 0.25); }
  50% { box-shadow: 0 0 20px rgba(var(--syn-rgb, 150,150,150), 0.6), inset 0 0 16px rgba(var(--syn-rgb, 150,150,150), 0.18); } }

/* YOUR KIT bays (.sh-pc): the top edge keeps its role colour; the sides, ground and light say
   the rarity. The ::after strip on a bay card is its RAM gauge, so the sweep uses ::before. */
#safehouse .sh-pc.rar-rare { border-color: #37d5f5; border-top-color: var(--rc);
  background: linear-gradient(170deg, #14506a, #061a26 65%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 18px -6px rgba(0,0,0,0.9), 0 0 12px rgba(55,213,245,0.35); }
#safehouse .sh-pc.rar-rare .pn { color: #bff2ff; }
#safehouse .sh-pc.rar-epic { border-color: #a85cf6; border-top-color: var(--rc);
  background: radial-gradient(ellipse at 50% 30%, #3c1a70, #0e061c 75%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 18px -6px rgba(0,0,0,0.9), 0 0 16px rgba(168,92,246,0.45); }
#safehouse .sh-pc.rar-legendary { border-color: #f5c842; border-top-color: #f5c842;
  background: radial-gradient(ellipse at 50% 35%, #8a5c14, #3a2406 58%, #120a02 90%);
  animation: rar-legend-pulse 2.6s ease-in-out infinite; }
#safehouse .sh-pc.rar-legendary .pn { color: #ffe39a; }
#safehouse .sh-pc.rar-legendary::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,236,170,0.3) 48%, rgba(255,255,255,0.45) 50%, rgba(255,236,170,0.3) 52%, transparent 70%);
  background-size: 250% 100%; animation: rar-sweep 3.4s ease-in-out infinite; mix-blend-mode: screen; }
#safehouse .sh-pc.pc-syn { border-left-width: 3px; animation: syn-breathe 3.2s ease-in-out infinite; }
#safehouse .sh-pc.pc-syn-techno_nomads { --syn-rgb: 0,148,216; border-color: #0094d8; background: linear-gradient(160deg, #0b2a48, #04101c); }
#safehouse .sh-pc.pc-syn-street_prolets { --syn-rgb: 245,163,55; border-color: #f5a337; background: linear-gradient(160deg, #3a2408, #140c02); }
#safehouse .sh-pc.pc-syn-neo_yakuza { --syn-rgb: 196,77,255; border-color: #c44dff; background: linear-gradient(160deg, #2e0e44, #10041a); }
#safehouse .sh-pc.pc-syn { border-top-color: var(--rc); }
#safehouse .sh-pc.pc-syn-epic { animation-duration: 2.2s; }
/* Keep the plug-in pop on a freshly placed card as well. */
#safehouse .sh-pc.fresh.rar-legendary { animation: sh-plug-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), rar-legend-pulse 2.6s ease-in-out infinite; }
#safehouse .sh-pc.fresh.pc-syn { animation: sh-plug-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), syn-breathe 3.2s ease-in-out infinite; }

@property --rar-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rar-orbit { to { --rar-a: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  #safehouse .hand-card.rar-epic::after, #safehouse .hand-card.rar-legendary, #safehouse .hand-card.rar-legendary::before,
  #safehouse .hand-card.syn-card, #safehouse .sh-pc.rar-legendary, #safehouse .sh-pc.rar-legendary::before,
  #safehouse .sh-pc.pc-syn { animation: none; }
}

/* On the Black Market the foot carries the price on the left, so the tag rides above the foot. */
#safehouse #sh-market-scroll .sh-rar-tag { bottom: 30px; }