/* The Genome page. Your Oglet at size, then the catalogue it was drawn from.
   Nothing here is under 12px, and nothing says anything the screen has already said. */

#genome{padding:22px 16px calc(48px + env(safe-area-inset-bottom));max-width:820px;margin:0 auto}

/* ── the orb ────────────────────────────────────────────
   Every Oglet on this page sits in a circle. `ui/thumbs.js#PORTRAIT_SCALE` is picked so the
   creature's far corner lands at 43% of the canvas: whichever way it looks, leans or squashes,
   it never touches the rim. */
.orb{position:relative;border-radius:50%;background:var(--well);
     border:1px solid var(--hair);display:grid;place-items:center;line-height:0;
     overflow:hidden;flex:0 0 auto}
.orb canvas{display:block;border-radius:50%;background:transparent}
.orb-lg{border-color:var(--hair-2)}

/* ── your Oglet ─────────────────────────────────────────── */
.mine{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.mine-stage{width:176px;height:176px}
.mine-body{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
/* The name is editable, and looks like the heading it replaced until you put a caret in it. A
   field that announces itself with a border and a button would make renaming the loudest thing on
   a page that is about the creature. */
.mine-rename{display:block;width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mine-name{font:inherit;font-size:30px;letter-spacing:.1em;line-height:1.15;color:var(--txt);
           width:100%;max-width:100%;background:none;border:0;border-bottom:1px solid transparent;
           padding:0 0 2px;transition:border-color .18s}
.mine-name:hover{border-bottom-color:var(--hair)}
.mine-name:focus{outline:none;border-bottom-color:var(--hair-2)}

.verdict-head{margin:0;font-size:17px;letter-spacing:.12em;text-transform:uppercase;
              display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.verdict-head .stars{font-size:15px}
.verdict-line{margin:0;font-size:13px;letter-spacing:.08em;color:var(--txt-2)}

.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.tag{display:inline-flex;align-items:baseline;gap:7px;font-size:12px;letter-spacing:.06em;
     border:1px solid var(--hair);border-radius:999px;padding:6px 11px;background:rgb(var(--pearl) / .03)}
.tag em{font-style:normal;color:var(--txt-3);font-size:12px}

.idblock{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
         border-top:1px solid var(--hair);padding-top:14px;width:100%}
.idblock .kicker{flex:0 0 100%}
.idcode{font-size:13px;letter-spacing:.14em;color:var(--txt);word-break:break-all;line-height:1.7}
.since{margin:0;font-size:12px;color:var(--txt-3);letter-spacing:.06em}

.dexline{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin:0 0 24px}

/* ── the catalogue ──────────────────────────────────────── */
.gene-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:30px 0 8px}
.gene-title{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt)}
.gene-note{font-size:12px;color:var(--txt-3);letter-spacing:.04em}
.gene-count{font-size:12px;color:var(--txt-3);letter-spacing:.08em;margin-left:auto}
.gene-bar{height:2px;background:var(--hair);border-radius:2px;overflow:hidden;margin-bottom:14px}
.gene-bar span{display:block;height:100%;width:0;background:var(--txt-2);
               transition:width .5s var(--ease)}

/* 150px puts two cards on a phone and four on a laptop, and lays a four-mutation gene out as a
   tidy 2×2 rather than a row of three and an orphan. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

.card{position:relative;font:inherit;color:inherit;text-align:center;cursor:pointer;
      border:1px solid var(--hair);border-radius:4px;background:var(--well);
      padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;
      transition:border-color .2s,transform .2s var(--ease),background-color .2s}
.card:hover{border-color:var(--hair-2);transform:translateY(-2px)}
.card:focus-visible{outline:1px solid var(--hair-2);outline-offset:2px}
.card-stage{width:104px;height:104px;margin-bottom:10px}
.card-meta{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.card .nm{font-size:13px;letter-spacing:.05em;color:var(--txt);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card .rr{font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.card .rr.dim{color:var(--txt-3)}
.card .pc{font-size:12px;color:var(--txt-3);letter-spacing:.05em}

/* yours — a light in the corner, not a label taking up a line */
.card.yours{border-color:rgb(var(--pearl) / .34)}
.card.yours::after{content:"";position:absolute;top:10px;right:10px;width:9px;height:9px;
                   border-radius:50%;background:var(--txt);
                   box-shadow:0 0 0 3px rgb(var(--pearl) / .16), 0 0 16px 4px rgb(var(--pearl) / .5)}

/* unmet — the dex */
/* SEALED — a Soulless nobody holds. It looks locked, but unlike `.locked` there is nothing behind
   it to tap: it is a div, so it takes no focus, and it must not lift under the cursor either or the
   card promises an interaction it does not have. See `soulless()` in ui/genome-page.js. */
.card.sealed{border-style:dashed;background:transparent;cursor:default}
.card.sealed:hover{border-color:var(--hair);transform:none}
.card.sealed .nm{color:var(--txt-3)}

.card.locked{border-style:dashed;background:transparent}
.card.locked .card-stage{background:rgb(var(--pearl) / .035);border-style:dashed}
.lock{font-size:30px;color:rgb(var(--pearl) / .42);line-height:1}

.note{color:var(--txt-3);font-size:12px;line-height:1.9;letter-spacing:.03em;
      margin-top:34px;border-top:1px solid var(--hair);padding-top:18px}

/* ── one mutation, opened ───────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgb(4 4 5 / .8);animation:fade .22s ease}
.sheet-card{position:relative;width:min(380px,100%);text-align:center;
            display:flex;flex-direction:column;align-items:center;gap:0;
            border:1px solid var(--hair-2);border-radius:6px;background:var(--ink);
            padding:28px 24px 26px;animation:rise .28s var(--ease)}
.sheet-close{position:absolute;top:6px;right:10px;font:inherit;font-size:24px;line-height:1;
             background:none;border:0;color:var(--txt-3);cursor:pointer;padding:6px 8px}
.sheet-close:hover{color:var(--txt)}
.sheet-stage{width:208px;height:208px;margin-bottom:18px}
.sheet-gene{margin:0 0 4px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}
.sheet-name{font-size:24px;letter-spacing:.1em;margin-bottom:12px}
.sheet-rarity{margin:0 0 16px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
              display:flex;flex-direction:column;gap:5px;align-items:center}
.sheet-pct{color:var(--txt-3);font-size:12px;letter-spacing:.08em}
.sheet-lore{margin:0 0 12px;font-size:13px;line-height:1.9;color:var(--txt-2);max-width:32ch}
.sheet-mech{margin:0;font-size:12px;line-height:1.7;color:var(--txt-3);letter-spacing:.03em}

/* The egg sheet reuses `.sheet-card` but names its own inner parts — `eggSheet()` in
   ui/genome-page.js. */
.egg-stage-lg{width:200px;height:200px;margin-bottom:14px}
.egg-name{font-size:24px;letter-spacing:.1em;margin-bottom:6px}
.egg-kind{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.egg-lore{margin:0;font-size:13px;line-height:1.9;color:var(--txt-2);max-width:32ch}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .sheet-scrim,.sheet-card{animation:none}
  .card:hover{transform:none}
}

@media (max-width:420px){
  .mine{gap:16px}
  .mine-name{font-size:26px}
  .sheet-stage{width:184px;height:184px}
}