:root{
  --col-wealth:#FFD75B; --col-love:#FFB6E6; --col-creativity:#84E2D9;
  --col-energy:#82A1FF; --col-chicard:#C89BFF; --col-wellness:#78E6A1;
}

/* Base category glow + border color */
.card[data-cat="Wealth"]     { border-color: var(--col-wealth) !important; box-shadow: 0 0 18px #ffd75b44; }
.card[data-cat="Love"]       { border-color: var(--col-love) !important; box-shadow: 0 0 18px #ffb6e644; }
.card[data-cat="Creativity"] { border-color: var(--col-creativity) !important; box-shadow: 0 0 18px #84e2d944; }
.card[data-cat="Energy"]     { border-color: var(--col-energy) !important; box-shadow: 0 0 18px #82a1ff44; }
.card[data-cat="Chi Card"]   { border-color: var(--col-chicard) !important; box-shadow: 0 0 18px #c89bff44; }
.card[data-cat="Wellness"]   { border-color: var(--col-wellness) !important; box-shadow: 0 0 18px #78e6a144; }

/* Radionic rate chips and HUD badges */
.card .rateTag{
  position:absolute; top:6px; left:8px; font-size:12px; padding:4px 8px;
  border:1px solid #43307f; border-radius:10px; background:rgba(10,6,30,.65); color:#fff;
  box-shadow:0 0 12px #c89bff55,0 0 24px #c89bff33; pointer-events:none;
}
.card .rateBadge{
  position:absolute; top:6px; right:8px; font-size:12px; padding:4px 8px;
  border:1px solid #43307f; border-radius:10px; background:rgba(10,6,30,.65); color:#fff; pointer-events:none;
}

/* --- Mobile rendering fixes (iOS Safari & other phones) --- */

/* 1) Ensure cards are their own layer and ring draws even on translucent boards */
.card{ position:relative; z-index:1; }
.card::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
  border:2px solid currentColor; opacity:0.7; /* uses the same category color via currentColor */
}

/* 2) On mobile, keep a solid-ish backdrop to prevent shadow flattening */
@media (max-width: 800px){
  .board{ isolation:isolate; } /* forces its own stacking context */
  .card{
    background-color: rgba(20,12,44,0.90);
    will-change: transform; /* hint: keep shadows crisp while dragging */
    /* slightly stronger shadow for OLED compression */
    box-shadow: 0 0 18px currentColor, 0 0 28px currentColor;
  }
}

/* 3) iOS-specific glow boost (targets Safari) */
@supports (-webkit-touch-callout: none){
  .card[data-cat="Wealth"]     { box-shadow: 0 0 22px #FFD75Baa, 0 0 34px #FFD75B66; }
  .card[data-cat="Love"]       { box-shadow: 0 0 22px #FFB6E6aa, 0 0 34px #FFB6E666; }
  .card[data-cat="Creativity"] { box-shadow: 0 0 22px #84E2D9aa, 0 0 34px #84E2D966; }
  .card[data-cat="Energy"]     { box-shadow: 0 0 22px #82A1FFaa, 0 0 34px #82A1FF66; }
  .card[data-cat="Chi Card"]   { box-shadow: 0 0 22px #C89BFFaa, 0 0 34px #C89BFF66; }
  .card[data-cat="Wellness"]   { box-shadow: 0 0 22px #78E6A1aa, 0 0 34px #78E6A166; }
}