/* ==========================================================================
   ThriveChamp — mini-dashboard.css (CLEAN + ALIGNED)
   Mini dashboard with medal, two rings, and three flags
   ========================================================================== */

/* ============================== LAYOUT =================================== */

/* Nudge medal + rings down a hair so they baseline with the flags */
.card.mini-dash{ --md-nudgeY: 5px; }  /* tweak to taste */

.card.mini-dash .md-medal,
.card.mini-dash .md-rings{
  transform: translateY(var(--md-nudgeY));
}

/* Optional: on tiny phones a slightly smaller nudge looks nicer */
@media (max-width: 370px){
  .card.mini-dash{ --md-nudgeY: 4px; }
}


.card.mini-dash{
  /* knobs */
  --md-colL: 68px;      /* medal column width = medal diameter */
  --md-colR: 70px;      /* flags column */
  --md-gap:   14px;     /* gap between columns */
  --md-pad:    8px;     /* card padding */

  display: grid;
  grid-template-columns: var(--md-colL) 1fr var(--md-colR);
  align-items: center;
  column-gap: var(--md-gap);
  padding: var(--md-pad) var(--md-pad) calc(var(--md-pad) + 5px);
  min-height: calc(68px + var(--md-pad) * 2 + 6px);

  /* tweakable knobs */
  --md-center: #fff9de;  /* center glow */
  --md-edge:   #ffffff;  /* edge color (try peach/mint/etc.) */
  --md-center-y: 180%;    /* move the hotspot up/down (50% = exact middle) */

  background-color: var(--md-edge);
  background: radial-gradient(
    circle farthest-corner at 50% var(--md-center-y),
    var(--md-center) 0%,
    var(--md-center) 20%,
    var(--md-edge)   100%
  );
  background-clip: padding-box;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);

  /* LINEAR GRADIENT */
  /* White at top → color at bottom (tweak --md-bottom) */
  /* 
  --md-bottom: #e6faff;  
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 20%,          
    var(--md-bottom) 100% 
  );
  background-clip: padding-box;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
   */
}


/* date header (unchanged) */
.card.mini-dash .dash-datewrap{
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  padding: 2px 2px 2px;
  position: relative;
}
.card.mini-dash .dash-datewrap time{
  font: 400 14px/1.15 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  letter-spacing: .25px;
  color: #1e3b53;
}
.card.mini-dash .md-sync-status{
  position: absolute;
  left: 10px;
  top: -3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(201, 142, 27, .22);
  background: rgba(255, 247, 224, .96);
  color: #8a5a00;
  font: 600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(198, 141, 32, .12);
}
.card.mini-dash .md-sync-status::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(198, 141, 32, .22);
  border-top-color: #d38b11;
  animation: md-sync-spin .8s linear infinite;
}
.card.mini-dash .md-sync-status.is-error{
  border-color: rgba(185, 28, 28, .22);
  background: rgba(254, 242, 242, .96);
  color: #991b1b;
  box-shadow: 0 4px 10px rgba(185, 28, 28, .10);
}
.card.mini-dash .md-sync-status.is-error::before{
  animation: none;
  border-color: #ef4444;
  background: #ef4444;
}
.card.mini-dash .md-sync-status.is-restored{
  border-color: rgba(22, 163, 74, .22);
  background: rgba(236, 253, 245, .96);
  color: #166534;
}
.card.mini-dash .md-sync-status.is-restored::before{
  animation: none;
  border-color: #22c55e;
  background: #22c55e;
}
.card.mini-dash .md-sync-status.is-visible{
  animation: md-sync-fade-in .18s ease-out;
}
.card.mini-dash .dash-datewrap::after{
  content:"";
  display:block;
  width:98%;
  height:1.85px;
  margin:6px auto 0;
  background: linear-gradient(90deg,
    rgba(252, 224, 163, 0)   0%,
    rgba(253, 195, 71, 0.22) 10%,
    rgba(255, 165, 30, 0.45) 50%,
    rgba(253, 195, 71, 0.22) 90%,
    rgba(252, 224, 163, 0) 100%);
  border-radius:1px;
}

.card.mini-dash .md-share-btn{
  position: absolute;
  top: -5px;
  width: 26px;   /* 4px smaller diameter */
  height: 26px;  /* 4px smaller diameter */
  min-width: 26px;
  min-height: 26px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 999px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(136, 98, 33, .34);
  background: linear-gradient(180deg, rgba(251, 231, 181, .58) 0%, rgba(240, 199, 104, .54) 100%);
  color: #5b3b00; /* match high-score medal text color */
  font-size: 0;   /* hide fallback text glyph */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55);
  cursor: pointer;
}

.card.mini-dash .md-share-btn{ right: 10px; }

.card.mini-dash .md-share-btn::before{
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  transform: translateX(-1px);
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8.2' y1='11.2' x2='15.8' y2='6.7' stroke='%235b3b00' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='8.2' y1='12.8' x2='15.8' y2='17.3' stroke='%235b3b00' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='12' r='3.1' fill='%235b3b00'/%3E%3Ccircle cx='18' cy='5' r='3.1' fill='%235b3b00'/%3E%3Ccircle cx='18' cy='19' r='3.1' fill='%235b3b00'/%3E%3C/svg%3E");
}

.card.mini-dash .md-share-btn:active{
  transform: translateY(1px);
}
.card.mini-dash .md-rings-wrapper{ margin-top: 0; }

@keyframes md-sync-spin{
  to { transform: rotate(360deg); }
}

@keyframes md-sync-fade-in{
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================== MEDAL =================================== */
/* BASE medal = BRONZE (applies 0–79) */
.mini-dash .md-medal{
  --md-medal: 68px;
  position: relative;
  width: var(--md-medal);
  height: var(--md-medal);
  border-radius: 50%;
  /* bronze face */
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 35% 30%, #f7e2c8 0%, #e7c08f 40%, #d6a66a 70%, #c08a3e 100%);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.60),
    inset 0 -10px 16px rgba(0,0,0,.07),
    0 4px 14px rgba(0,0,0,.12);
  border: 1px solid #b77b2e;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
.mini-dash .md-medal[role="button"]:focus-visible{
  outline: 2px solid rgba(47, 180, 255, .9);
  outline-offset: 2px;
}
.mini-dash .md-medal::after{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 55%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.70),
    inset 0 8px 12px rgba(0,0,0,.05);
  pointer-events: none;
}

/* SILVER (80–89) — deeper + shinier */
.mini-dash .md-medal.medal--silver {
  /* keep the specular hotspot + a richer metal face */
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.85), rgba(255,255,255,0) 56%),
    radial-gradient(circle at 35% 32%,
      #f9fbff 0%,
      #e6ecf5 36%,
      #d2dae6 60%,
      #b2bdcd 78%,
      #9ea9bb 100%);
  border-color: #9aa5b7;

  /* punchier “metal” contrast */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 10px 18px rgba(0,0,0,.05),
    inset 0 -12px 18px rgba(0,0,0,.06),
    0 6px 16px rgba(0,0,0,.14);
}

/* optional: extra inner ring sheen for silver only */
.mini-dash .md-medal.medal--silver::after{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.82),
    inset 0 10px 14px rgba(0,0,0,.04);
}

/* When the medal is SILVER, make the score number black for contrast */
.mini-dash .md-medal.medal--silver .md-score {
  color: #111;                 /* deep black */
  text-shadow: 0 1px 0 rgba(255,255,255,.5); /* keep a subtle lift */
}

.card.mini-dash.md-perfect{
  background-color: #fff7e3;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><polygon points='18,4 20.4,13.2 30,13.2 22.2,18.6 25,28 18,22.8 11,28 13.8,18.6 6,13.2 15.6,13.2' fill='%23f2c94c' fill-opacity='0.45'/><circle cx='6' cy='28' r='1.2' fill='%23f2c94c' fill-opacity='0.35'/><circle cx='30' cy='6' r='1.2' fill='%23f2c94c' fill-opacity='0.35'/></svg>");
  background-size: auto, 36px 36px;
  background-repeat: no-repeat, repeat;
  background-position: top center, center;
  border-color: rgba(227,179,65,.35);
  box-shadow: 0 6px 18px rgba(227,179,65,.22), 0 2px 8px rgba(0,0,0,.06);
}

/* GOLD (90–99) */
.mini-dash .md-medal.medal--gold {
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 35% 30%, #fff4c7 0%, #f7de7f 40%, #f0cb54 70%, #e3b341 100%);
  border-color: #d7a425;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.60),
    inset 0 -10px 16px rgba(0,0,0,.07),
    0 4px 14px rgba(227,179,65,.35);
}

.mini-dash .md-medal::after{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 55%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.70),
    inset 0 8px 12px rgba(0,0,0,.05);
  pointer-events: none;
}
.mini-dash .md-score{
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: #5b3b00;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* ============================== RINGS ==================================== */
/* Rings match medal size exactly */
.mini-dash .md-rings{
  --md-ring-size: 68px;      /* diameter */
  --md-ring-thickness: 8px;  /* donut stroke width (default) */
  --md-ring-gap: 14px;

  display: grid;
  grid-template-columns: repeat(2, var(--md-ring-size));
  justify-content: center;
  align-items: center;
  gap: var(--md-ring-gap);
  min-height: var(--md-ring-size);
}

/* Empty container (drives BOTH strokes) */
.mini-dash .md-rings .ring{
  --ring-stroke: 0.5px;                 /* ← control stroke width here */
  position: relative;
  width: var(--md-ring-size);
  height: var(--md-ring-size);
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.06));
  --pct: 0;
  --overfill: 0;
  --segments: 0;
  --ring-color: #6aa9ff;
  --ring-track: #e9eef6;
  --ring-over: #0b74d6;
  background: none !important;
  -webkit-mask: none !important;
          mask: none !important;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;

  /* OUTER stroke */
  border: var(--ring-stroke) solid var(--ring-color);
}

/* Donut (masked) */
.mini-dash .md-rings .ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:0;
  background:
    /* overfill (darker arc for >100% mind points) */
    conic-gradient(var(--ring-over) calc(var(--overfill) * 1%), transparent 0),
    /* INNER stroke (same width as outer) */
    radial-gradient(
      farthest-side,
      transparent calc(100% - var(--md-ring-thickness) + 0px),
      var(--ring-color) calc(100% - var(--md-ring-thickness) + 0px),
      var(--ring-color) calc(100% - var(--md-ring-thickness) + var(--ring-stroke)),
      transparent      calc(100% - var(--md-ring-thickness) + var(--ring-stroke))
    ),
    /* progress fill */
    conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ring-track) 0),
    /* ticks */
    repeating-conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent calc(360deg / max(var(--segments,1)) - 1deg),
      rgba(0,0,0,.06) calc(360deg / max(var(--segments,1)) - 1deg),
      rgba(0,0,0,.06) calc(360deg / max(var(--segments,1)))
    );
  background-blend-mode: normal, normal, multiply;

  -webkit-mask: radial-gradient(farthest-side,
                transparent calc(100% - var(--md-ring-thickness)),
                #000 0);
          mask: radial-gradient(farthest-side,
                transparent calc(100% - var(--md-ring-thickness)),
                #000 0);

  box-shadow:none;
  /* ✗ remove this — it can't render under the mask:
     border: 0.5px solid var(--ring-color); */
}

/* Default (most desktops ≈ 1x DPR): use crisp 1px */
.mini-dash .md-rings .ring{ --ring-stroke: 1px; }

/* High-DPI phones/tablets/laptops (Retina etc.): switch to 0.5px hairline */
@media (min-resolution: 2dppx),                 /* modern */
       (-webkit-min-device-pixel-ratio: 2),     /* Safari/iOS */
       (min-resolution: 192dpi) {               /* older syntax */
  .mini-dash .md-rings .ring{ --ring-stroke: .5px; }
}

/* Optional: super-dense displays only (keep hairline just on ≥3x) */
/*
@media (min-resolution: 3dppx) {
  .mini-dash .md-rings .ring{ --ring-stroke: .5px; }
}
*/



/* Per-kind */
.mini-dash .md-rings .ring[data-kind="games"]{ --ring-color: #2fb4ff; }
.mini-dash .md-rings .ring[data-kind="games"]{ --ring-track: #ebf8ff; }
.mini-dash .md-rings .ring[data-kind="games"]{ --ring-over: #0a5fb5; }
.mini-dash .md-rings .ring[data-kind="games"]::after{
  filter: saturate(1.6) brightness(0.85) contrast(1.1);
}
.mini-dash .md-rings .ring[data-kind="meals"]{ --ring-color: #34d17b; }
.mini-dash .md-rings .ring[data-kind="meals"]{ --ring-track: #e8fff2; }
.mini-dash .md-rings .ring[data-kind="meals"]{ --ring-over: transparent; }
.mini-dash .md-rings .ring[data-kind="games"]::after{ content: "🧠" !important; }
.mini-dash .md-rings .ring[data-kind="meals"]::after{ content: "🍽️" !important; }

/* Hide optional calories ring if present */
.mini-dash .md-rings .ring[data-kind="calories"]{ display:none !important; }

/* Tiny phones: nudge icon size down a hair */
@media (max-width: 370px){
  .mini-dash .md-rings .ring::after{ font-size: 20px; }
}

/* =============================== FLAGS =================================== */
/* One source of truth for flags layout + size */
.mini-dash{ --badge: 32px; --badge-gap: 4px; }        /* badge size knobs */

.mini-dash .md-flags{
  display: grid;
  grid-template-columns: repeat(2, var(--badge));
  grid-auto-rows: var(--badge);
  gap: var(--badge-gap);
  justify-content: center; /* center the block within the right column */
  justify-items: center;
  align-content: center;     /* center vertically inside the column */
  min-height: var(--md-ring-size); /* match medal/rings height for alignment */
  /* Adds 5px margin to the flags container */

  margin-top: 10px; /* Pushes all flags down by 5px */
  
  /* OR, if you only want to target the workout and soul flags specifically: 
  .mini-dash .md-flags .flag[data-kind="workout"],
  .mini-dash .md-flags .flag[data-kind="inspiration"] { 
    margin-top: 5px;  /* Adds space specifically to the workout and soul flags 
  }  */
}

.mini-dash .md-flags .flag{
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);                /* ← thicker neutral */
  background: #f4f7fb;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.65);
  position: relative;

  /* iOS/Safari ensures true circle (keep) */
  -webkit-appearance: none;
  appearance: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-clip: padding-box;
  -webkit-mask-image: radial-gradient(circle, #fff 98%, transparent 99%);
          mask-image: radial-gradient(circle, #fff 98%, transparent 99%);
}


.mini-dash .md-flags .flag::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--badge) * 0.72);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* Icons */
.mini-dash .md-flags .flag[data-kind="workout"]::before     { content: "💪"; }
.mini-dash .md-flags .flag[data-kind="inspiration"]::before { content: "🪷"; }
.mini-dash .md-flags .flag[data-kind="interests"]::before   { content: "📰"; }

/* Place Interests centered on its own row */
.mini-dash .md-flags .flag[data-kind="interests"]{
  grid-column: 1 / -1;
  justify-self: center;
}

/* “On” state (mirrored) */
.mini-dash .md-flags .flag[aria-pressed="true"],
.mini-dash .md-flags .flag.on{
  background: #ddf8e8;
  border: 3px solid #34d17b;                           /* ← thicker green */
  box-shadow: 0 0 0 3px rgba(52,209,123,.25),          /* soft halo */
              0 1px 2px rgba(0,0,0,.06);
}


/* Small screens */
@media (max-width:370px){
  .mini-dash{ --badge:24px; --badge-gap:6px; }
  .card.mini-dash{ --md-colR:68px; }
}

/* === Emoji contrast boost (rings + flags) ====================== */
/* Rings center emoji (position + style) */
.mini-dash .md-rings .ring::after{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  pointer-events: none;
  z-index: 1;

  /* your existing styling */
  font-size: 22px;
  text-shadow:
    0 0 2px rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.28),
    0 -1px 0 rgba(255,255,255,.35);
}


/* Flags emoji */
.mini-dash .md-flags .flag::before{
  /* base size is calc(var(--badge)*0.72); keep that but add shadow */
  text-shadow:
    0 0 2px rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.28),
    0 -1px 0 rgba(255,255,255,.35);
}

.card.mini-dash{ box-shadow: 0 12px 30px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06); }
.card.mini-dash::before{ opacity: .45; }


/* ───────────────────────────────────────────────────────────────────────────
   Medal color tiers (0–69 gray, 70–79 bronze, 80–89 silver, 90–99 gold)
   Keep the current shape/shadow; just tint the face & ring subtly.
   ─────────────────────────────────────────────────────────────────────────── */
.md-medal {
  transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease, filter 160ms ease;
}

.mini-dash .md-gauntlet-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  z-index: 3;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events: none;
}
.mini-dash .md-gauntlet-badge.tier-gold{
  background:#fff2bf;
  border-color:#e0b84f;
  box-shadow: 0 2px 8px rgba(184, 134, 11, .26);
}
.mini-dash .md-gauntlet-badge.tier-silver{
  background:#eef2f7;
  border-color:#b8c2d1;
  box-shadow: 0 2px 8px rgba(120, 134, 156, .26);
}
.mini-dash .md-gauntlet-badge.tier-bronze{
  background:#f5ddcd;
  border-color:#c79a72;
  box-shadow: 0 2px 8px rgba(160, 106, 64, .24);
}
.mini-dash .md-gauntlet-badge.tier-highfive{
  background:#e4f4ff;
  border-color:#7fb2d6;
  box-shadow: 0 2px 8px rgba(62, 128, 176, .24);
}

@media (max-width: 370px){
  .mini-dash .md-gauntlet-badge{
    width: 20px;
    height: 20px;
    top: -5px;
    right: -5px;
    font-size: 13px;
  }
}

/* 0–69 */
.md-medal.medal--gray {
  background: radial-gradient( circle at 35% 30%, #f2f4f7 0%, #e5e9f0 40%, #d6dbe5 70%, #c5ccd8 100% );
  border-color: #b7bfcc;
  box-shadow:
    inset 0 0 0 3px #cdd4df,
    inset 0 8px 18px rgba(255,255,255,.6),
    0 6px 14px rgba(0,0,0,.12);
}

/* 70–79 */
.md-medal.medal--bronze {
  background: radial-gradient( circle at 35% 30%, #f7e2c8 0%, #e7c08f 40%, #d6a66a 70%, #c08a3e 100% );
  border-color: #b77b2e;
  box-shadow:
    inset 0 0 0 3px #e8caa0,
    inset 0 8px 18px rgba(255,255,255,.55),
    0 6px 14px rgba(192,138,62,.35);
}

/* 80–89 */
.md-medal.medal--silver {
  background: radial-gradient( circle at 35% 30%, #fbfdff 0%, #e9eef5 40%, #d7dee8 70%, #b7c0cf 100% );
  border-color: #aab3c2;
  box-shadow:
    inset 0 0 0 3px #dfe6ef,
    inset 0 8px 18px rgba(255,255,255,.6),
    0 6px 14px rgba(170,179,194,.35);
}

/* 90–99 (100 → special “star” later) */
.md-medal.medal--gold {
  background: radial-gradient( circle at 35% 30%, #fff4c7 0%, #f7de7f 40%, #f0cb54 70%, #e3b341 100% );
  border-color: #d7a425;
  box-shadow:
    inset 0 0 0 3px #f6e29d,
    inset 0 8px 18px rgba(255,255,255,.55),
    0 6px 14px rgba(227,179,65,.35);
}



/*
.card.mini-dash{
  box-shadow: 0 12px 30px rgba(0,0,0,.13), 0 3px 8px rgba(0,0,0,.065);
}
.card.mini-dash::before{
  opacity: .45;  
}
*/