/* ---- Tokens ------------------------------------------------------- */
:root {
  --bg: #0a0d13;
  --bg-elevated: #131a24;
  --bg-elevated-2: #1a2330;
  --border: #2a3548;
  --ink: #e9ecf2;
  --ink-soft: #8b93a6;

  --gold: #c59e1f;
  --gold-deep: #e0b93a;

  --blue: #49a5f8;
  --blue-deep: #2f86d6;

  --pink: #d42d73;
  --pink-deep: #b81f5f;

  --correct: #57c278;
  --correct-bg: rgba(87, 194, 120, 0.14);
  --incorrect: #ef5757;
  --incorrect-bg: rgba(239, 87, 87, 0.14);

  --shadow: rgba(0, 0, 0, 0.55);
  --glow: rgba(73, 165, 248, 0.28);

  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 900px 700px at 50% 22%, #1c2740 0%, var(--bg) 60%);
}

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Starfield ------------------------------------------------------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.starfield::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    456px 51px rgba(233,236,242,0.57), 1003px 457px rgba(233,236,242,0.39), 419px 1385px rgba(233,236,242,0.57),
    2233px 178px rgba(233,236,242,0.53), 130px 61px rgba(233,236,242,0.38), 952px 1034px rgba(233,236,242,0.53),
    2298px 407px rgba(233,236,242,0.56), 2232px 859px rgba(233,236,242,0.42), 2413px 569px rgba(233,236,242,0.59),
    26px 1554px rgba(233,236,242,0.59), 1731px 696px rgba(233,236,242,0.43), 881px 1563px rgba(233,236,242,0.45),
    379px 778px rgba(233,236,242,0.38), 1408px 1236px rgba(233,236,242,0.43), 177px 1494px rgba(233,236,242,0.49),
    511px 775px rgba(233,236,242,0.37), 1200px 1698px rgba(233,236,242,0.54), 1481px 1182px rgba(233,236,242,0.41),
    284px 93px rgba(233,236,242,0.55), 1185px 163px rgba(233,236,242,0.61), 413px 778px rgba(233,236,242,0.43),
    1494px 333px rgba(233,236,242,0.46), 858px 1372px rgba(233,236,242,0.43), 292px 1247px rgba(233,236,242,0.54),
    2187px 1493px rgba(233,236,242,0.42), 1893px 777px rgba(233,236,242,0.43), 2281px 449px rgba(233,236,242,0.56),
    229px 469px rgba(233,236,242,0.6), 1292px 821px rgba(233,236,242,0.43), 864px 1161px rgba(233,236,242,0.61),
    1288px 435px rgba(233,236,242,0.55), 1620px 1316px rgba(233,236,242,0.49), 1084px 285px rgba(233,236,242,0.42),
    2299px 1103px rgba(233,236,242,0.43), 2394px 877px rgba(233,236,242,0.62), 1635px 741px rgba(233,236,242,0.42),
    566px 1043px rgba(233,236,242,0.5), 192px 1763px rgba(233,236,242,0.38), 2570px 327px rgba(233,236,242,0.59),
    1729px 1221px rgba(233,236,242,0.37), 1563px 1220px rgba(233,236,242,0.65), 2167px 514px rgba(233,236,242,0.64),
    47px 1393px rgba(233,236,242,0.57), 2199px 1537px rgba(233,236,242,0.43), 1393px 228px rgba(233,236,242,0.44),
    647px 929px rgba(233,236,242,0.35), 1078px 1025px rgba(233,236,242,0.58), 2079px 217px rgba(233,236,242,0.61),
    1222px 1723px rgba(233,236,242,0.54), 2494px 407px rgba(233,236,242,0.4), 661px 1104px rgba(233,236,242,0.64),
    2172px 1px rgba(233,236,242,0.53), 2001px 39px rgba(233,236,242,0.38), 1486px 1799px rgba(233,236,242,0.65),
    1259px 490px rgba(233,236,242,0.37), 2323px 161px rgba(233,236,242,0.38), 1990px 1671px rgba(233,236,242,0.37),
    2181px 1568px rgba(233,236,242,0.39), 1946px 1125px rgba(233,236,242,0.4), 2161px 1786px rgba(233,236,242,0.53),
    867px 1104px rgba(233,236,242,0.58), 823px 1460px rgba(233,236,242,0.44), 1529px 897px rgba(233,236,242,0.62),
    1849px 247px rgba(233,236,242,0.42), 262px 692px rgba(233,236,242,0.36), 2268px 471px rgba(233,236,242,0.53),
    29px 145px rgba(233,236,242,0.56), 241px 468px rgba(233,236,242,0.37), 128px 1760px rgba(233,236,242,0.45),
    2105px 487px rgba(233,236,242,0.43), 1988px 438px rgba(233,236,242,0.51), 2338px 1180px rgba(233,236,242,0.49),
    1937px 1653px rgba(233,236,242,0.47), 386px 198px rgba(233,236,242,0.55), 1451px 867px rgba(233,236,242,0.47),
    221px 1379px rgba(233,236,242,0.55), 403px 124px rgba(233,236,242,0.47), 1389px 1639px rgba(233,236,242,0.61),
    1018px 392px rgba(233,236,242,0.41), 1837px 287px rgba(233,236,242,0.48), 1140px 947px rgba(233,236,242,0.42),
    308px 907px rgba(233,236,242,0.59), 2254px 200px rgba(233,236,242,0.37), 2214px 1712px rgba(233,236,242,0.35),
    382px 1543px rgba(233,236,242,0.6), 681px 832px rgba(233,236,242,0.5), 875px 1770px rgba(233,236,242,0.47),
    240px 337px rgba(233,236,242,0.46), 1599px 543px rgba(233,236,242,0.63), 1863px 584px rgba(233,236,242,0.48),
    2276px 1355px rgba(233,236,242,0.57), 634px 388px rgba(233,236,242,0.44), 239px 1186px rgba(233,236,242,0.57),
    249px 1531px rgba(233,236,242,0.44), 205px 1196px rgba(233,236,242,0.49), 2175px 322px rgba(233,236,242,0.37),
    2080px 164px rgba(233,236,242,0.61), 280px 1218px rgba(233,236,242,0.37), 963px 826px rgba(233,236,242,0.39),
    2333px 504px rgba(233,236,242,0.52), 162px 1268px rgba(233,236,242,0.37), 2390px 1157px rgba(233,236,242,0.51),
    1068px 418px rgba(233,236,242,0.55), 1286px 488px rgba(233,236,242,0.43), 536px 1375px rgba(233,236,242,0.54),
    1872px 647px rgba(233,236,242,0.63), 297px 19px rgba(233,236,242,0.49), 2306px 204px rgba(233,236,242,0.37),
    873px 1036px rgba(233,236,242,0.43), 1429px 140px rgba(233,236,242,0.61), 1513px 583px rgba(233,236,242,0.4),
    2225px 1440px rgba(233,236,242,0.44), 2166px 16px rgba(233,236,242,0.55), 2271px 613px rgba(233,236,242,0.63),
    424px 1798px rgba(233,236,242,0.39), 472px 219px rgba(233,236,242,0.57), 636px 557px rgba(233,236,242,0.43),
    862px 1469px rgba(233,236,242,0.45), 2597px 1746px rgba(233,236,242,0.43), 2001px 514px rgba(233,236,242,0.62),
    208px 189px rgba(233,236,242,0.54), 1133px 90px rgba(233,236,242,0.35), 535px 1304px rgba(233,236,242,0.64),
    661px 1518px rgba(233,236,242,0.48), 1751px 1148px rgba(233,236,242,0.35), 308px 1415px rgba(233,236,242,0.62),
    2234px 73px rgba(233,236,242,0.6), 2385px 1131px rgba(233,236,242,0.39), 522px 85px rgba(233,236,242,0.44),
    163px 732px rgba(233,236,242,0.41), 1022px 1365px rgba(233,236,242,0.38), 2293px 1791px rgba(233,236,242,0.47),
    2542px 1534px rgba(233,236,242,0.4), 969px 1770px rgba(233,236,242,0.4), 725px 844px rgba(233,236,242,0.36),
    1360px 1602px rgba(233,236,242,0.63), 1016px 546px rgba(233,236,242,0.4), 442px 783px rgba(233,236,242,0.61),
    1927px 455px rgba(233,236,242,0.41), 1885px 716px rgba(233,236,242,0.44);
}

.starfield::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    932px 456px rgba(233,236,242,0.71), 791px 816px rgba(233,236,242,0.8), 284px 1583px rgba(233,236,242,0.78),
    2086px 818px rgba(233,236,242,0.9), 2196px 678px rgba(233,236,242,0.98), 472px 1796px rgba(233,236,242,0.99),
    731px 1189px rgba(233,236,242,0.99), 1087px 78px rgba(233,236,242,0.73), 1779px 707px rgba(233,236,242,0.92),
    1284px 893px rgba(233,236,242,0.88), 2094px 236px rgba(233,236,242,0.82), 2361px 389px rgba(233,236,242,0.78),
    1786px 3px rgba(233,236,242,0.86), 2205px 1406px rgba(233,236,242,0.92), 807px 745px rgba(233,236,242,0.83),
    1352px 1276px rgba(233,236,242,0.79), 510px 1474px rgba(233,236,242,0.97), 2077px 633px rgba(233,236,242,0.9),
    1336px 824px rgba(233,236,242,0.91), 2270px 260px rgba(233,236,242,0.76), 1552px 1387px rgba(233,236,242,0.92),
    712px 1260px rgba(233,236,242,0.87), 1663px 1122px rgba(233,236,242,0.95), 1244px 587px rgba(233,236,242,0.76),
    2375px 1242px rgba(233,236,242,0.9), 1904px 904px rgba(233,236,242,0.83), 875px 1046px rgba(233,236,242,0.84),
    695px 1349px rgba(233,236,242,0.73), 2111px 1359px rgba(233,236,242,0.89), 1372px 191px rgba(233,236,242,0.95),
    962px 1377px rgba(233,236,242,0.79), 815px 301px rgba(233,236,242,0.71), 1002px 973px rgba(233,236,242,0.88),
    298px 932px rgba(233,236,242,0.82), 2579px 1178px rgba(233,236,242,0.76), 1572px 1012px rgba(233,236,242,0.82),
    604px 1343px rgba(233,236,242,0.91), 436px 1594px rgba(233,236,242,0.83), 720px 1646px rgba(233,236,242,0.99),
    2121px 951px rgba(233,236,242,0.72), 1020px 1737px rgba(233,236,242,0.74), 546px 1641px rgba(233,236,242,0.84),
    2175px 1144px rgba(233,236,242,0.88), 1812px 1254px rgba(233,236,242,0.94), 2067px 873px rgba(233,236,242,0.95);
}

.twinkle-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
  animation: twinkle 4.5s ease-in-out infinite;
}

.twinkle-star:nth-child(1) { top: 9%; left: 12%; animation-delay: 0s; }
.twinkle-star:nth-child(2) { top: 18%; left: 82%; animation-delay: 0.7s; }
.twinkle-star:nth-child(3) { top: 34%; left: 6%; animation-delay: 1.4s; }
.twinkle-star:nth-child(4) { top: 42%; left: 92%; animation-delay: 2.1s; }
.twinkle-star:nth-child(5) { top: 63%; left: 16%; animation-delay: 2.8s; }
.twinkle-star:nth-child(6) { top: 71%; left: 88%; animation-delay: 3.5s; }
.twinkle-star:nth-child(7) { top: 88%; left: 45%; animation-delay: 1.9s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .twinkle-star {
    animation: none;
    opacity: 0.6;
  }
}

/* ---- Ad slots ------------------------------------------------------ */
.ad-slot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  margin: 0.75rem auto;
  max-width: 728px;
  width: calc(100% - 2rem);
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--bg-elevated);
}

.ad-slot--footer {
  margin-bottom: 5.5rem;
}

.ad-slot__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .ad-slot { min-height: 56px; }
}

/* ---- Shell / header -------------------------------------------------- */
.app-shell {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 1rem;
  border-bottom: 2px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand__logo {
  height: 40px;
  width: auto;
  display: block;
}

.brand__tagline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mode-tabs {
  display: flex;
  gap: 0.5rem;
}

.mode-tab {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--border);
  border-radius: 4px 4px 0 0;
  background: var(--bg-elevated);
  color: var(--ink);
  cursor: pointer;
}

.mode-tab[aria-selected="true"] {
  background: var(--blue);
  border-color: var(--blue-deep);
  color: var(--bg);
}

/* ---- Stage / views ---------------------------------------------------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0 5.5rem;
}

.loading-state, .error-state {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  text-align: center;
  margin-top: 3rem;
}

.error-state { color: var(--incorrect); }

.view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view[hidden] {
  display: none;
}

/* ---- Flashcard -------------------------------------------------------- */
.card-scene {
  perspective: 1400px;
  width: 100%;
  max-width: 420px;
}

.flashcard {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
}

.ring-holes {
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  z-index: 2;
  pointer-events: none;
}

.ring-holes span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 1px 3px var(--shadow);
  border: 1px solid var(--border);
}

.flashcard__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.flashcard.is-flipped .flashcard__inner {
  transform: rotateY(180deg);
}

.flashcard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 2rem 1.5rem 2.5rem;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 12px 30px -10px var(--shadow), 0 0 40px -14px var(--glow);
  text-align: center;
}

.flashcard__face--back {
  transform: rotateY(180deg);
  background: var(--bg-elevated-2);
}

.flashcard__pos {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.flashcard__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--ink);
}

.flashcard__hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.flashcard__definition {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
}

.flashcard__example {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
}

.deck-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.deck-progress {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-width: 5.5rem;
  text-align: center;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 6px;
  padding: 0.65rem 1.3rem;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn--ghost {
  background: transparent;
  border-color: var(--blue-deep);
  color: var(--ink);
}

.btn--ghost:hover { background: var(--bg-elevated); }

.btn--ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--blue);
  color: var(--bg);
  margin-top: 1.75rem;
}

.btn--primary:hover { background: var(--blue-deep); }

.btn--pink {
  background: var(--pink-deep);
  color: var(--ink);
  margin-top: 1.75rem;
}

.btn--pink:hover { background: var(--pink); }

.btn--link {
  background: none;
  border: none;
  color: var(--blue);
  text-decoration: underline;
  font-size: 0.85rem;
  margin-top: 1rem;
  padding: 0.4rem;
}

/* ---- Test mode / scantron bubbles ---------------------------------------- */
.test-header {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.test-progress {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.scantron-track {
  display: flex;
  gap: 4px;
  width: 100%;
}

.scantron-track span {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.scantron-track span.is-answered { background: var(--blue); border-color: var(--blue-deep); }
.scantron-track span.is-current { border-color: var(--pink); }

.test-word {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  margin: 1.5rem 0 0.25rem;
  text-align: center;
  color: var(--ink);
}

.test-instruction {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin: 0 0 1.5rem;
}

.bubble-options {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bubble-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.4;
}

.bubble-option:disabled { cursor: default; }

.bubble-option__mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.bubble-option__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--ink) 70%);
  transform: scale(0);
  transition: transform 0.18s ease-out;
}

.bubble-option.is-selected .bubble-option__mark::after { transform: scale(1); }
.bubble-option.is-selected .bubble-option__mark { color: transparent; }

.bubble-option.is-correct {
  border-color: var(--correct);
  background: var(--correct-bg);
}

.bubble-option.is-incorrect {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
}

/* ---- Summary / score card ------------------------------------------------ */
.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.score-card__label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.score-card__score {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--incorrect);
  border: 4px solid var(--incorrect);
  border-radius: 50%;
  width: 11rem;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.corrections {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.correction {
  border: 1px solid var(--border);
  border-left: 4px solid var(--incorrect);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  background: var(--bg-elevated);
}

.correction__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

.correction__chosen {
  color: var(--incorrect);
  text-decoration: line-through;
  font-size: 0.9rem;
}

.correction__correct {
  color: var(--correct);
  font-size: 0.9rem;
}

.corrections-empty {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  text-align: center;
}

.summary-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0 1.5rem;
  text-align: center;
}

.privacy-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---- Buy Me a Coffee floating button -------------------------------------- */
.bmc-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pink-deep);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px -4px rgba(212, 45, 115, 0.5);
}

.bmc-float:hover { background: var(--pink); }

.bmc-float__icon { font-size: 1.05rem; }

@media (max-width: 480px) {
  .bmc-float {
    padding: 0.6rem 0.9rem;
    font-size: 0.78rem;
  }
}