.biomodes-surprise-btn{
  --bsm-ground:#eef2f2; --bsm-panel:#e4ecec; --bsm-ink:#16231f; --bsm-ink-dim:#4c5c58;
  --bsm-rule:rgba(22,35,31,.14); --bsm-accent:#2d96bd;
  display:inline-flex; align-items:center; gap:.4rem;
  font:inherit; font-size:.92rem; font-weight:600;
  padding:.55rem 1.1rem; border-radius:999px; border:1px solid var(--bsm-rule);
  background:var(--bsm-panel); color:var(--bsm-ink); cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}
[theme=dark] .biomodes-surprise-btn{ --bsm-ground:#0f1a1c; --bsm-panel:#132123; --bsm-ink:#dce8e6; --bsm-ink-dim:#8fa5a1; --bsm-rule:rgba(220,232,230,.14); --bsm-accent:#5fb8d9; }
[theme=black] .biomodes-surprise-btn{ --bsm-ground:#000; --bsm-panel:#0a0a0a; --bsm-ink:#d9d9d9; --bsm-ink-dim:#8a8a8a; --bsm-rule:rgba(255,255,255,.14); --bsm-accent:#5fb8d9; }
.biomodes-surprise-btn:hover{ border-color:var(--bsm-accent); transform:translateY(-1px); }
.biomodes-surprise-btn .dice{ display:inline-block; transition:transform .4s ease; }
.biomodes-surprise-btn:hover .dice{ transform:rotate(18deg); }

.bsm-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,14,13,.55);
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.bsm-overlay.show{ opacity:1; pointer-events:auto; }

.bsm-card{
  --bsm-ground:#eef2f2; --bsm-panel:#e4ecec; --bsm-ink:#16231f; --bsm-ink-dim:#4c5c58;
  --bsm-rule:rgba(22,35,31,.14); --bsm-accent:#2d96bd;
  width:100%; max-width:440px;
  background:var(--bsm-panel); color:var(--bsm-ink);
  border:1px solid var(--bsm-rule); border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  padding:1.4rem 1.5rem 1.3rem;
  transform:translateY(8px) scale(.98); transition:transform .18s ease;
}
[theme=dark] .bsm-card{ --bsm-ground:#0f1a1c; --bsm-panel:#132123; --bsm-ink:#dce8e6; --bsm-ink-dim:#8fa5a1; --bsm-rule:rgba(220,232,230,.14); --bsm-accent:#5fb8d9; }
[theme=black] .bsm-card{ --bsm-ground:#000; --bsm-panel:#0a0a0a; --bsm-ink:#d9d9d9; --bsm-ink-dim:#8a8a8a; --bsm-rule:rgba(255,255,255,.14); --bsm-accent:#5fb8d9; }
.bsm-overlay.show .bsm-card{ transform:translateY(0) scale(1); }

.bsm-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; }
.bsm-cat{ display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bsm-ink-dim); font-weight:600; }
.bsm-cat-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.bsm-close{ background:none; border:none; color:var(--bsm-ink-dim); font-size:1.15rem; line-height:1; cursor:pointer; padding:.1rem .3rem; border-radius:4px; }
.bsm-close:hover{ color:var(--bsm-ink); background:var(--bsm-rule); }

.bsm-name{ font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-size:1.5rem; font-weight:600; margin:0 0 .25rem; text-wrap:balance; }
.bsm-year{ font-size:.72rem; color:var(--bsm-ink-dim); font-variant-numeric:tabular-nums; margin-bottom:.7rem; display:block; }
.bsm-desc{ font-size:.88rem; line-height:1.55; color:var(--bsm-ink-dim); margin:0 0 .9rem; max-height:9.5rem; overflow-y:auto; }
.bsm-tags{ display:flex; flex-wrap:wrap; gap:.32rem; margin-bottom:1.1rem; }
.bsm-tag{ font-size:.68rem; padding:.14rem .5rem; border-radius:9px; background:var(--bsm-rule); color:var(--bsm-ink-dim); }

.bsm-actions{ display:flex; gap:.6rem; }
.bsm-btn{ flex:1; text-align:center; font:inherit; font-size:.85rem; font-weight:600; padding:.6rem .8rem; border-radius:8px; cursor:pointer; text-decoration:none; }
.bsm-btn-primary{ background:var(--bsm-accent); color:#fff; border:1px solid var(--bsm-accent); }
.bsm-btn-primary:hover{ opacity:.9; }
.bsm-btn-secondary{ background:none; color:var(--bsm-ink); border:1px solid var(--bsm-rule); }
.bsm-btn-secondary:hover{ border-color:var(--bsm-accent); color:var(--bsm-accent); }

.bsm-loading{ font-size:.85rem; color:var(--bsm-ink-dim); text-align:center; padding:1rem 0; }

@media (prefers-reduced-motion: reduce){ .biomodes-surprise-btn, .biomodes-surprise-btn .dice, .bsm-overlay, .bsm-card{ transition:none !important; } }