/* ---------------------------------------------------------------------------
   Panda Box — felted wool.

   The hero is needle-felted plush: warm cream, charcoal wool, embroidered
   patches, gold thread, visible stitching. The UI is built to sit inside that
   world rather than next to it, so everything here is warm, tactile and soft-
   edged. No pure black, no pure white, no hard neon, no glows — those read as
   screen, and this is meant to read as craft.
--------------------------------------------------------------------------- */

:root {
  --bg: #e9dcc7;          /* warm backdrop, the colour of the hero's seamless */
  --panel: #fbf5ea;       /* raw wool */
  --panel-2: #efe4d2;
  --line: #d6c3a5;        /* tan thread */
  --line-soft: #e3d5bd;
  --ink: #3b3128;         /* charcoal wool, never #000 */
  --text: #3b3128;
  --dim: #8b7a64;
  --dimmer: #a8977f;

  --accent: #d2a04a;      /* gold crown thread */
  --accent-ink: #402d0c;
  --accent-soft: #f0dcb4;
  --ember: #e0663a;       /* the panda that's on fire */
  --blush: #e2a2a4;

  /* Rarity, in wool. Still six clearly separable steps, but dyed not lit. */
  --common: #a89880;
  --uncommon: #7ba368;
  --rare: #5d8db0;
  --epic: #9a6fae;
  --legendary: #d2a04a;
  --mythic: #d4587e;

  --shadow: 0 2px 0 #d6c3a5, 0 6px 18px rgba(59, 49, 40, .12);
  --shadow-lift: 0 4px 0 #d6c3a5, 0 14px 30px rgba(59, 49, 40, .2);
}

* { box-sizing: border-box; }

/* .gate and .modal set display:grid, which beats the UA stylesheet's [hidden]
   rule — without this they stay on screen after being hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--text);
  min-height: 100vh;
  font: 15px/1.55 ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
        "Quicksand", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  /* Felt has tooth. A faint fibre noise over everything keeps flat colour from
     looking like plastic. */
  background-image:
    radial-gradient(900px 500px at 50% -10%, #f6ecd9 0%, transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

button, input { font: inherit; color: inherit; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; }

/* Buttons — pressable felt. The 2px hard shadow is the "thickness" of the
   material; pressing squashes it. */
.btn {
  background: var(--panel);
  color: var(--text);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .55rem 1.15rem;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--line);
  transition: transform .08s, box-shadow .08s, background .15s;
}
.btn:hover:not(:disabled) { background: #fff; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: #b9873a;
  box-shadow: 0 2px 0 #b9873a;
}
.btn-primary:hover:not(:disabled) { background: #e0b25c; }
.btn-primary:active:not(:disabled) { box-shadow: 0 0 0 #b9873a; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--dim); box-shadow: none; }
.btn-ghost:hover { background: var(--panel-2); }

input {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: .6rem .8rem;
  outline: none;
}
input:focus { border-color: var(--accent); }
input::placeholder { color: var(--dimmer); }

/* Gate ---------------------------------------------------------------------*/

.gate { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.gate-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 26px;
  padding: 0 2.5rem 2.5rem;
  width: min(460px, 100%);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
/* The hero bleeds to the card edges — it's the first thing anyone sees and it's
   doing the whole job of explaining what this is. */
.gate-hero {
  display: block;
  width: calc(100% + 5rem);
  margin: 0 -2.5rem 1.4rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.gate-card h1 { margin: .2rem 0 .3rem; letter-spacing: .2em; font-size: 1.6rem; }
.gate-sub { color: var(--dim); margin: 0 0 1.8rem; font-size: .92rem; }
#auth-form { display: grid; gap: .7rem; }
.gate-actions { display: flex; gap: .6rem; margin-top: .4rem; }
.gate-actions .btn { flex: 1; }
.err { color: var(--ember); min-height: 1.2em; margin: .3rem 0 0; font-size: .88rem; }

/* Chrome -------------------------------------------------------------------*/

header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .9rem 1.5rem;
  border-bottom: 1.5px solid var(--line);
  background: rgba(251, 245, 234, .9);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}
.brand { font-weight: 900; letter-spacing: .14em; font-size: 1.05rem; }
nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.tab {
  background: none;
  border: 0;
  color: var(--dim);
  padding: .45rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent-soft); color: var(--accent-ink); }
.purse { display: flex; align-items: center; gap: .8rem; font-weight: 800; white-space: nowrap; }

main { padding: 1.75rem 1.5rem 5rem; max-width: 1240px; margin: 0 auto; }
.view-head { margin-bottom: 1.25rem; }
.view-head h2 { margin: 0 0 .3rem; font-size: 1.55rem; }
.hint { color: var(--dim); margin: 0 0 .4rem; font-size: .9rem; max-width: 64ch; }
.hint b { color: var(--text); }
.empty { color: var(--dim); text-align: center; padding: 4rem 0; }

/* Cards — felt swatches, stitched to the page ------------------------------*/

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 1.1rem;
}

.card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card.selectable.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lift);
}

/* 3:4, not square. The panda is a full-body plush portrait — a square crop cuts its
   legs off. */
.card-art {
  aspect-ratio: 3 / 4;
  background: linear-gradient(170deg, #f6eedd, #eadfca);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1.5px dashed var(--line); /* a seam */
}
.art { width: 100%; height: 100%; object-fit: cover; display: block; }

.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
/* Aura is its own layer so it can bleed past the body instead of being clipped to it. */
.aura { position: absolute; inset: 0; width: 100%; height: 100%; }
.panda { position: relative; width: 100%; height: 100%; display: block; }

.card-body { padding: .7rem .85rem; }
.card-name { font-weight: 800; font-size: .95rem; }
.card-meta { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; flex-wrap: wrap; }
.card-meta.center { justify-content: center; }
.code {
  color: var(--dimmer);
  font-family: ui-monospace, monospace;
  font-size: .76rem;
}

/* Rarity reads as an embroidered tag. */
.pill {
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: #fff;
}
.pill.common { background: var(--common); }
.pill.uncommon { background: var(--uncommon); }
.pill.rare { background: var(--rare); }
.pill.epic { background: var(--epic); }
.pill.legendary { background: var(--legendary); color: var(--accent-ink); }
.pill.mythic { background: var(--mythic); }

.r-epic { border-color: var(--epic); }
.r-legendary { border-color: var(--legendary); }
.r-mythic { border-color: var(--mythic); }

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-top: 1.5px dashed var(--line);
  font-size: .78rem;
  color: var(--dim);
}
.price { color: var(--ember); font-weight: 800; }
.tag { color: var(--ember); font-weight: 700; }
.tag.soul { color: var(--dimmer); font-weight: 600; }
.card-cta { margin: 0 .85rem .85rem; }

/* Sell control, on the card itself. */
.card-sell { display: flex; gap: .4rem; padding: 0 .85rem .85rem; }
.sell-price { flex: 1; min-width: 0; padding: .4rem .55rem; font-size: .85rem; border-radius: 10px; }
.sell-btn { padding: .4rem .85rem; font-size: .85rem; }
.card-sell .btn { flex-shrink: 0; }

/* Breeding bar — the two you've picked, waiting to be sewn together -----------*/

.breed-bar {
  position: sticky;
  top: 68px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--panel);
  border: 1.5px dashed var(--accent);
  border-radius: 16px;
  padding: .75rem .9rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.breed-slots { display: flex; align-items: center; gap: .6rem; flex: 1; flex-wrap: wrap; }
.slot {
  background: var(--panel-2);
  border: 1.5px solid var(--line-soft);
  border-radius: 10px;
  padding: .3rem .65rem;
  font-size: .85rem;
  font-weight: 700;
}
.slot em { color: var(--dimmer); font-style: normal; font-family: ui-monospace, monospace; font-weight: 500; }
.plus { color: var(--accent); font-weight: 900; font-size: 1.1rem; }

.gen, .seller, .describer, .count { color: var(--dimmer); font-weight: 600; }

/* Onboarding ---------------------------------------------------------------*/

.onboard {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.3rem;
  display: grid;
  gap: .8rem;
  background: var(--panel);
  border: 1.5px dashed var(--accent);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.onboard li { display: flex; gap: .8rem; align-items: flex-start; }
.onboard li p { margin: .1rem 0 0; color: var(--dim); font-size: .86rem; }
.onboard li.ob-done { opacity: .45; }
.onboard li.ob-done b { text-decoration: line-through; }
.ob-tick {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 900;
  color: var(--accent-ink);
  margin-top: .1rem;
}
.ob-done .ob-tick { background: var(--accent); border-color: #b9873a; }

.cheat { border-color: var(--ember); color: var(--ember); box-shadow: 0 2px 0 #c2532c; margin-bottom: 1rem; }

/* Drops / coin packs -------------------------------------------------------*/

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.1rem; }
.tier {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  box-shadow: var(--shadow);
}
.tier-daily { border: 1.5px dashed var(--accent); }
.tier-name { font-weight: 900; font-size: 1.08rem; }
.tier-cost { color: var(--ember); font-weight: 800; font-size: .9rem; }
.tier-blurb { color: var(--dim); font-size: .86rem; margin: 0; flex: 1; }

.stub-note {
  background: var(--accent-soft);
  border: 1.5px dashed var(--accent);
  color: var(--accent-ink);
  border-radius: 12px;
  padding: .65rem .95rem;
  font-size: .86rem;
  margin: 0 0 1.1rem;
  font-weight: 600;
}

/* Feed ---------------------------------------------------------------------*/

.feed { list-style: none; padding: 0; margin: 0; }
.feed li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem .3rem;
  border-bottom: 1.5px dashed var(--line-soft);
  color: var(--dim);
}
.feed li b { color: var(--text); font-weight: 800; }
.feed li.hero { color: var(--accent-ink); background: var(--accent-soft); border-radius: 10px; padding: .85rem .8rem; }
.feed li.hero b { color: var(--accent-ink); }
.feed time { color: var(--dimmer); font-size: .8rem; white-space: nowrap; }

/* Modals -------------------------------------------------------------------*/

.modal {
  position: fixed;
  inset: 0;
  background: rgba(59, 49, 40, .55);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 50;
  overflow-y: auto;
}
.modal-card, .reveal-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 26px;
  padding: 1.9rem;
  width: min(460px, 100%);
  position: relative;
  text-align: center;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lift);
}
.modal-close {
  position: absolute;
  top: .9rem;
  right: 1rem;
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 1.1rem;
  cursor: pointer;
}
.modal h3, .reveal-card h3 { margin: 1rem 0 0; font-size: 1.35rem; }

.reveal-art, .detail-art {
  aspect-ratio: 3 / 4;
  width: min(220px, 62%);
  margin: 0 auto;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: linear-gradient(170deg, #f6eedd, #eadfca);
  display: grid;
  place-items: center;
}

.banner {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .72rem;
  padding: .45rem;
  border-radius: 10px;
  margin-bottom: 1.1rem;
  border: 1.5px dashed #b9873a;
}
.roll-note {
  color: var(--dimmer);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: .8rem 0 0;
  font-weight: 700;
}
.mutation { color: var(--mythic); font-weight: 800; font-size: .88rem; margin: .7rem 0 0; }
.first { color: #8a6516; font-size: .88rem; line-height: 1.55; }
.known { color: var(--dim); font-size: .85rem; }

.traits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: 1.2rem 0;
  text-align: left;
}
.trait {
  background: var(--panel-2);
  border: 1.5px solid var(--line-soft);
  border-radius: 12px;
  padding: .5rem .7rem;
  display: flex;
  flex-direction: column;
}
.trait-gene { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dimmer); font-weight: 700; }
.trait-name { font-weight: 800; font-size: .9rem; }
.t-common { color: var(--common); }
.t-uncommon { color: var(--uncommon); }
.t-rare { color: var(--rare); }
.t-mythic { color: var(--mythic); }

.detail-actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: 1rem 0; }
.detail-actions .btn:only-child { grid-column: 1 / -1; }

.prompt-box { text-align: left; margin-top: 1rem; }
.prompt-box summary { color: var(--dim); cursor: pointer; font-size: .85rem; }
.prompt-box code {
  display: block;
  margin-top: .6rem;
  background: var(--panel-2);
  border: 1.5px solid var(--line-soft);
  border-radius: 12px;
  padding: .7rem;
  font-size: .74rem;
  color: var(--dim);
  line-height: 1.5;
  word-break: break-word;
}

/* Combine ceremony ---------------------------------------------------------*/

.splice-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 26px;
  padding: 1.3rem 1.5rem;
  width: min(680px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shadow-lift);
}

/* The whole ceremony has to fit on screen at once — parents, child, all six gene
   rows, and the buttons. If the rows fall below the fold you can't watch the thing
   the animation exists to show you. */
.splice-top {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: center;
  gap: .8rem;
}

.sp-parent { margin: 0; opacity: .55; transition: opacity .3s; }
.sp-parent .scene { aspect-ratio: 1/1.25; max-width: 88px; margin: 0 auto; }
.sp-parent figcaption { font-size: .74rem; color: var(--dim); margin-top: .2rem; font-weight: 600; }

.sp-mid { display: flex; flex-direction: column; align-items: center; gap: .4rem; }

.sp-child {
  width: 100%;
  max-width: 146px;
  aspect-ratio: 1/1.25;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: linear-gradient(170deg, #f6eedd, #eadfca);
  transition: filter .45s, transform .2s, box-shadow .45s, border-color .45s;
}
/* Undecided genes render as a plain panda — desaturating it makes clear that what
   you're looking at isn't real yet. */
.sp-child.ghost { filter: grayscale(1) contrast(.85) opacity(.7); }
.sp-child.pop { transform: scale(1.06); }
.sp-child.born { filter: none; transform: scale(1.04); box-shadow: var(--shadow-lift); }

.sp-rows { display: grid; gap: .18rem; margin: .7rem 0 .5rem; }

.sp-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  padding: .22rem .6rem;
  border-radius: 12px;
  opacity: .35;
  transition: opacity .25s, background .25s;
}
.sp-row.live { opacity: 1; background: var(--panel-2); }
.sp-row.done { opacity: 1; }

.sp-gene {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dimmer);
  font-weight: 800;
  min-width: 84px;
}
.sp-gene b { display: block; color: var(--mythic); font-size: .82rem; letter-spacing: 0; }
.mut-tag { display: block; color: var(--mythic); font-weight: 900; font-size: .58rem; }

/* Trait cards. */
.sp-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .28rem .6rem .28rem .28rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--dim);
  font-size: .84rem;
  font-weight: 700;
  transition: transform .16s, border-color .16s, box-shadow .16s, opacity .16s, background .16s;
}
.chip-art {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--panel-2);
  display: grid;
  place-items: center;
}
.chip-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-glyph { font-size: 1rem; font-weight: 900; }
.chip-name { white-space: nowrap; }

.sp-left { justify-self: end; }
.sp-right { justify-self: start; flex-direction: row-reverse; padding: .28rem .28rem .28rem .6rem; }

/* The wobble as the coin settles. */
.sp-chip.peek { border-color: var(--accent); color: var(--text); transform: scale(1.04); }
.sp-chip.won {
  border-color: #b9873a;
  background: var(--accent-soft);
  color: var(--accent-ink);
  transform: scale(1.07);
  box-shadow: 0 2px 0 #b9873a;
}
.sp-chip.lost { opacity: .28; transform: scale(.93); }

/* The winning trait, in flight to the child. */
.sp-flyer {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(59, 49, 40, .35);
}
.sp-flyer img { width: 100%; height: 100%; object-fit: cover; }

/* Rarity climbing in real time. Six separate coin-flips become one rising stake. */
.sp-meter { width: 100%; max-width: 146px; }
.mtr-track { height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line-soft); }
.mtr-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--common);
  transition: width .45s cubic-bezier(.4,0,.2,1), background .45s;
}
.mtr-label {
  display: block;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dimmer);
  margin-top: .3rem;
  font-weight: 800;
}
.m-uncommon  .mtr-fill { background: var(--uncommon); }
.m-rare      .mtr-fill { background: var(--rare); }
.m-epic      .mtr-fill { background: var(--epic); }
.m-legendary .mtr-fill { background: var(--legendary); }
.m-mythic    .mtr-fill { background: var(--mythic); }

.sp-row.mutated { background: color-mix(in srgb, var(--mythic) 14%, transparent); }
.sp-row.mutated .sp-gene { min-width: 120px; }

/* A mutation is the one thing that can surprise you here — it gets a jolt. */
body.flash::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--mythic);
  opacity: .14;
  pointer-events: none;
  z-index: 999;
}
body.shake { animation: shake .26s; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 1px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 2px); }
}

.sp-verdict { min-height: 2.2rem; }
.sp-verdict .banner { margin: .5rem 0 .4rem; }
.sp-verdict p { margin: .4rem 0 0; }
.sp-title { font-size: 1.25rem; font-weight: 900; margin-top: .25rem; }

/* The verdict grows the card, which was pushing "Heck yeah!" below the fold. Pin
   the actions to the bottom so the way out is always reachable. */
.sp-actions {
  position: sticky;
  bottom: -1.3rem;
  display: flex;
  justify-content: center;
  gap: .6rem;
  padding: .8rem 0;
  margin: 0 -1.5rem -1.3rem;
  background: linear-gradient(transparent, var(--panel) 35%);
}

/* Toast --------------------------------------------------------------------*/

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--panel);
  border-radius: 999px;
  padding: .7rem 1.3rem;
  z-index: 90;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(59, 49, 40, .35);
}
.toast.bad { background: var(--ember); color: #fff; }

@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  header { gap: .8rem; padding: .8rem 1rem; }
  main { padding: 1.25rem 1rem 4rem; }
  .splice-top { grid-template-columns: 1fr 1.3fr 1fr; gap: .4rem; }
  .sp-chip { font-size: .72rem; padding: .25rem .45rem; }
  .chip-art { width: 22px; height: 22px; }
  .sp-gene { min-width: 58px; font-size: .56rem; }
}