/* Lock and Lay — field-notebook UI. Tokens from Open Props (sizes, easings, shadows, radii). */
:root {
  --paper: #f3eee4; --paper-2: #e9e2d4; --paper-3: #ddd4c2; --ink: #1e1a15; --ink-2: #5d564c; --ink-3: #8d8578;
  --rule: #cfc6b3; --rule-2: #b9ae98;
  --moss: #2f5d3a; --moss-2: #3e7a4c; --brick: #8b3a2b; --amber: #b8731f; --sky: #3a6d8c;
  /* every animal thumbnail sits on this: a mid-tone warm grey, lighter where the animal lies, so a white snake reads
     light-on-mid and a black one dark-on-mid (#608). The phone painter reads the three stops for its own canvas. */
  --thumb-hi: #aaa398; --thumb-mid: #8a8479; --thumb-lo: #736d64;
  --thumb-bg: radial-gradient(ellipse at 50% 58%, var(--thumb-hi) 0%, var(--thumb-mid) 62%, var(--thumb-lo) 100%);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  font-family: var(--sans); font-size: 14px; color: var(--ink);
}
:root[data-theme="dark"] {
  --paper: #1f1d1a; --paper-2: #27241f; --paper-3: #34302a; --ink: #ece5d6; --ink-2: #b3a996; --ink-3: #7f766a;
  --rule: #3a352e; --rule-2: #4d463d;
  --moss: #4e8f5f; --moss-2: #5fa572; --brick: #c9614e; --amber: #d59a3f; --sky: #6ca0c2;
  --thumb-hi: #9a9489; --thumb-mid: #7a756b; --thumb-lo: #645f57;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #15130f; color: var(--ink); border-color: var(--rule-2); }
/* native menus follow the theme (#1079): iOS drew a dark-theme <select>'s list white with the theme's pale text */
:root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] option, :root[data-theme="dark"] optgroup { background: #15130f; color: var(--ink); }
:root[data-theme="dark"] .specimen, :root[data-theme="dark"] .gene, :root[data-theme="dark"] .tag { background: #15130f; }
:root[data-theme="dark"] .specimen { box-shadow: 2px 2px 0 #0e0d0b; }
:root[data-theme="dark"] .egg.open { background: #15130f; }
/* the computer's hover: a phone keeps :hover on whatever it last tapped, and this turned a tapped tab into a pale box with pale text (#842). :where keeps its weight as it was */
:root[data-theme="dark"] :where(body:not(.mobile)) button:hover { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .toast { background: #2a2722; }
:root[data-theme="dark"] #phone { background: #0a0a0a; box-shadow: var(--shadow-6), inset 0 0 0 2px #333; }
:root[data-theme="dark"] .phone-notch { background: #0a0a0a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #14120f; overflow: hidden; }
#view { position: fixed; inset: 0; background: #14120f; } /* the canvas is see-through where a Wall TV is playing */
#view canvas { display: block; }
.hidden { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.num, .price { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl, .small-caps { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.rule { flex: 1; height: 1px; background: var(--rule); }
.paper { background: var(--paper); background-image: var(--grain); }

button { font: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--radius-1); padding: 6px 12px; transition: background .12s var(--ease-2), color .12s var(--ease-2); }
button:hover { background: var(--ink); color: var(--paper); }
button.primary { background: var(--moss); border-color: var(--moss); color: #fff; }
button.primary:hover { background: var(--moss-2); border-color: var(--moss-2); }
button.danger { color: var(--brick); border-color: var(--brick); } button.danger:hover { background: var(--brick); color: #fff; }
button.quiet { border-color: transparent; color: var(--ink-2); } button.quiet:hover { background: var(--paper-2); color: var(--ink); }
button.small { padding: 3px 8px; font-size: 12px; }
button.wide { width: 100%; padding: 10px; }
button:disabled { opacity: .4; cursor: not-allowed; }
button.icon { border: 0; background: transparent; font-size: 22px; line-height: 1; padding: 0 6px; } button.icon:hover { background: transparent; color: var(--brick); }
/* links: never the browser's blue. Ink with a soft moss underline; components style their own on top */
a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--moss) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: inherit; }
a:hover { color: var(--moss); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; border-radius: 2px; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: var(--radius-1); background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--moss); outline-offset: 1px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 6px 6px; border-bottom: 1px solid var(--ink); }
td { padding: 8px 6px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tr.row:hover td { background: rgba(47, 93, 58, .06); cursor: pointer; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable.on { color: var(--moss); }
.meta { font-size: 12px; color: var(--ink-2); }
.loc { font-size: 13px; } .loc b { color: var(--moss); }
.sex { font-weight: 700; } .sex.M { color: var(--sky); } .sex.F { color: #a03f6a; }
.section { margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.section::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); margin-right: 4px; background: #fff; }
.tag.warn { border-color: var(--amber); color: var(--amber); } .tag.bad { border-color: var(--brick); color: var(--brick); } .tag.good { border-color: var(--moss); color: var(--moss); } .tag.info { border-color: var(--sky); color: var(--sky); }
.empty { color: var(--ink-3); font-family: var(--serif); font-style: italic; font-size: 15px; padding: 28px 0; text-align: center; }
.bar { height: 5px; background: var(--paper-3); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--moss); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* overlay + auth */
.overlay { position: fixed; inset: 0; background: rgba(12, 10, 8, .7); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(3px); }
.auth-card { background: var(--paper); background-image: var(--grain); width: 460px; padding: 34px 40px 28px; box-shadow: var(--shadow-6); display: flex; flex-direction: column; gap: 14px; border-top: 6px solid var(--moss); }
.masthead { display: flex; align-items: center; gap: 14px; }
.brand { font-family: var(--serif); font-size: 30px; letter-spacing: .03em; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.lede { font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--ink); }
.auth-tabs button { border: 0; border-radius: 0; padding: 8px 14px; color: var(--ink-3); background: transparent; }
.auth-tabs button:hover { background: transparent; color: var(--ink); }
.auth-tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.auth-err { color: var(--brick); font-size: 13px; min-height: 18px; }
.forgot-link { justify-self: start; align-self: flex-start; background: none; border: 0; padding: 0; margin: -4px 0 4px; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* (#1357) */
.oauth-retry { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.oauth-retry a { color: inherit; font-weight: 600; text-decoration: underline; }
.agree { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-2); flex-direction: row; }
.agree input { margin-right: 6px; }
.agree a, .fine a { color: var(--moss); }
.oauth-row { display: flex; flex-direction: column; gap: 10px; }
.or { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.or i { flex: 1; height: 1px; background: var(--rule); }
.oauth-btns { display: flex; gap: 8px; }
.oauth-btns a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 1px solid var(--rule-2); background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; }
.oauth-btns a:hover { border-color: var(--ink); }
:root[data-theme="dark"] .oauth-btns a { background: #15130f; }
.oauth-btns svg { width: 18px; height: 18px; }
.fine { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin: 0; }

/* hud */
#hud { position: fixed; top: 0; left: 0; right: 0; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; background: var(--paper); background-image: var(--grain); border-bottom: 1px solid var(--ink); z-index: 20; }
.ledger { display: flex; }
.cell { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; border-right: 1px solid var(--rule); line-height: 1.15; font-size: 14px; white-space: nowrap; }
.brand-cell .brand { font-size: 25px; text-transform: none; letter-spacing: -.015em; line-height: 1; font-variation-settings: "opsz" 144; }
.brand-cell .brand i { font-style: italic; font-weight: 400; color: #8fc79c; margin: 0 .06em 0 .02em; }
.hud-nav { display: flex; align-items: stretch; }
.navbtn { border: 0; border-radius: 0; background: transparent; padding: 0 14px; color: var(--ink-2); font-weight: 500; position: relative; }
.navbtn { display: inline-flex; align-items: center; gap: 7px; }
.navbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; flex: none; }
.navbtn.active svg { opacity: 1; stroke: var(--moss); }
@media (max-width: 1180px) { .navbtn > span:not(.badge) { display: none; } .navbtn { padding: 0 10px; } .navbtn svg { width: 18px; height: 18px; } }
.navbtn:hover { background: var(--paper-2); color: var(--ink); }
.navbtn.active { color: var(--ink); box-shadow: inset 0 -3px 0 var(--moss); background: transparent; }
.badge { position: absolute; top: -7px; right: -7px; background: var(--brick); color: #fff; font-size: 10px; line-height: 1.5; min-width: 17px; text-align: center; border-radius: 10px; padding: 1px 5px; font-family: var(--mono); box-shadow: 0 0 0 2px var(--paper); }
.navbtn .badge { top: 4px; right: 6px; }
.hud-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 14px; }
.hud-right button { white-space: nowrap; }
.tool { position: relative; border-color: var(--rule-2); } .tool.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.who { font-family: var(--serif); font-size: 15px; margin-left: 8px; }

#hint { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 8px 16px; font-size: 13px; z-index: 19; max-width: 680px; text-align: center; box-shadow: var(--shadow-3); }
#hint b { color: #f2c98a; font-weight: 500; }
.hint-x { border: 0; background: transparent; color: var(--paper); opacity: .6; font-size: 16px; padding: 0 4px; margin-left: 6px; line-height: 1; }
.hint-x:hover { opacity: 1; background: transparent; color: #f2c98a; }

/* left binder panel */
#panel { position: fixed; top: 56px; left: 0; bottom: 0; width: 640px; background: var(--paper); background-image: var(--grain); border-right: 1px solid var(--ink); z-index: 18; display: flex; flex-direction: column; box-shadow: var(--shadow-5); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 24px 12px; border-bottom: 1px solid var(--ink); }
.panel-head h2 { font-size: 26px; }
.panel-body { overflow: auto; padding: 16px 24px 30px; flex: 1; --ph-pside: 24px; }
.tabs { display: flex; border-bottom: 1px solid var(--rule-2); margin-bottom: 14px; }
.tabs button { border: 0; border-radius: 0; padding: 8px 12px; color: var(--ink-3); background: transparent; }
.tabs button:hover { color: var(--ink); background: transparent; }
.tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* specimen cards */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.specimen { background: #fff; border: 1px solid var(--rule-2); display: flex; flex-direction: column; box-shadow: 2px 2px 0 var(--paper-3); }
.specimen canvas { width: 100%; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border-bottom: 1px solid var(--rule); }
.specimen .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.specimen h4 { font-size: 16px; line-height: 1.2; }
.specimen dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.specimen dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; align-self: center; }
.specimen dd { margin: 0; font-family: var(--mono); }
.specimen .foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--rule); padding-top: 8px; margin-top: 2px; }
.specimen .price { font-size: 15px; }
.specimen .blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
/* shop: what another copy of a functional prop would do, or why it would do nothing */
.specimen .buyverdict { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--moss); }
.specimen .buyverdict.no { color: var(--ink-2); background: rgba(201, 138, 43, .1); border-left: 3px solid var(--amber); padding: 6px 8px; border-radius: 3px; }
.specimen .buyverdict .tag { flex: none; }
.specimen.nohelp canvas { opacity: .55; filter: grayscale(.5); }
.gear-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12px; line-height: 1.35; } /* how a functional prop stacks (#771) */
.gear-lines .gear-rule { color: var(--ink-2); font-weight: 600; }
.gear-lines .gear-now { color: var(--ink-3); font-family: var(--mono); }
.gear-lines .gear-now.full { color: var(--moss); }
.gear-lines .gear-why { color: var(--ink-2); }
.gear-lines .gear-hint { color: var(--amber); }
.rod-row.nohelp canvas { opacity: .55; filter: grayscale(.5); }
.row-card.nohelp .body > .t, .row-card.nohelp .body > .m { opacity: .65; }
.specimen .brandline { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.specimen .brandline .size-tag { margin: 0 0 0 auto; flex: none; letter-spacing: .02em; text-transform: none; }
.stats-line { font-size: 11px; color: var(--ink-2); font-family: var(--mono); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
/* room shop preview (#449): a corner of your room, pinned while you scroll; hovering an option tries it */
.rv { position: relative; margin: 6px 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule-2); background: #1b1a17; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.rv canvas { display: block; width: 100%; aspect-ratio: 26 / 15; max-height: 205px; object-fit: cover; }
/* (#455) the dock is what's pinned, just under the shop's own search and tabs. Small: a corner card floating over the
   options (the dock takes no room); large: the full-width strip */
.rv-dock { position: sticky; top: calc(var(--ph-h, 102px) - var(--ph-ptop, 18px)); z-index: 4; } /* right under the sticky shop header (#581) */
.rv-dock.small { height: 0; } .rv-dock.small .rv { position: absolute; right: 0; top: 6px; width: 250px; margin: 0; }
.rv-dock.small .rv canvas { max-height: none; } .rv-dock.small #rvHint { display: none; }
.rv-dock.small .rv-cap { padding: 6px 10px; } .rv-dock.small .rv-cap b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-dock.hid { height: 0; } .rv-dock.hid .rv { display: none; }
.rv-show { display: none; position: absolute; right: 0; top: 6px; z-index: 1; align-items: center; gap: 6px; height: 30px; min-height: 0; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--rule-2); background: #1b1a17; color: #f4efe3; font-size: 12.5px; cursor: pointer; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.rv-dock.hid .rv-show { display: inline-flex; } .rv-show:hover { background: #2a2824; }
.rv-show svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-size, .rv-eye { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(20, 18, 15, .55); color: #f4efe3; cursor: pointer; }
.rv-size svg, .rv-eye svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rv-size:hover, .rv-eye:hover { background: rgba(20, 18, 15, .8); }
.rv-eye { right: 42px; }
.rv-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; background: var(--paper); border-top: 1px solid var(--rule); }
.rv-cap b { font: 600 14px var(--serif); } .rv-cap span { font-size: 12px; color: var(--ink-3); }
.rv.trying { border-color: var(--moss-2); } .rv.trying .rv-cap b { color: var(--moss-2); }
.rv-floors .specimen { overflow: hidden; } .rv-floors canvas { display: block; width: 100%; aspect-ratio: 2 / 1; border-bottom: 1px solid var(--rule); }
.rv-floors .specimen.on { border-color: var(--moss-2); }
.rv-opt { cursor: default; transition: border-color .12s; } .rv-opt:hover { border-color: var(--rule-2); }
.rv-light { float: right; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--f), var(--c) 60%, rgba(0,0,0,.15)); box-shadow: 0 0 0 1px var(--rule), 0 0 14px var(--c); }
.swatch { width: 54px; height: 54px; border: 1px solid var(--rule-2); cursor: pointer; display: flex; align-items: flex-end; padding: 3px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: rgba(0,0,0,.6); }
.swatch.on { outline: 2px solid var(--ink); outline-offset: 2px; }

/* odds */
.odds { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; font-size: 13px; align-items: center; }
.odds .pct { font-family: var(--mono); font-size: 12px; }

/* detail card */
#detail { position: fixed; top: 64px; right: 12px; width: 372px; max-height: calc(100vh - 76px); overflow: auto; background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); z-index: 18; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-5); }
#detail .name { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
#detail .morph { color: var(--ink-2); font-size: 13px; }
#detail canvas { width: 100%; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border: 1px solid var(--rule); }
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stats div { background: var(--paper); padding: 6px 8px; }
.stats b { display: block; font-size: 14px; font-weight: 500; font-family: var(--mono); }
.genes { display: flex; flex-wrap: wrap; gap: 4px; }
.gene { font-size: 11px; padding: 2px 7px; border: 1px solid var(--rule-2); background: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.pill { display: inline-block; font-size: 10px; line-height: 1.5; padding: 0 6px; border-radius: 9px; border: 1px solid; font-style: normal; white-space: nowrap; }
.pill.codom { background: #fff3d6; border-color: #d9a441; color: #7a5410; }
.pill.dom { background: #e3edfa; border-color: #6c8fbf; color: #244a7a; }
.pill.rec { background: #efe4f7; border-color: #9a6db5; color: #4f2d6b; }
.pill.rec.het { background: transparent; border-style: dashed; color: #6a4d80; }
.pill.rec.het.unlikely, .gene.rec.het.unlikely { opacity: .55; border-color: var(--rule-2); color: var(--ink-3); }
.pill.paradox { background: #fff; border-color: #c99b3f; color: #8a6a1a; }
.pill.rare { background: #c99b3f; border-color: #a87a22; color: #fff; font-weight: 700; } /* rare hatches (#1012) */
.pill.more { border-color: var(--rule-2); color: var(--ink-3); }
.pill[class*="tag-"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill.tag-holdback { background: var(--moss); border-color: var(--moss); color: #fff; }
.pill.tag-sell { background: var(--brick); border-color: var(--brick); color: #fff; }
:root[data-theme="dark"] .pill.codom { background: #3a2e12; color: #f2cd7a; } :root[data-theme="dark"] .pill.dom { background: #172a40; color: #a9c6ea; } :root[data-theme="dark"] .pill.rec { background: #2b1d38; color: #d3b5ea; } :root[data-theme="dark"] .pill.rec.het { background: transparent; color: #b99ad0; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Breeding toolbar controls (Pair and Season tabs): one height, one pill shape, ink = on. A caption sits before each group. */
.breed-listed { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.ctl { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ctl-cap { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.ctl-seg { display: inline-flex; height: 30px; border: 1px solid var(--rule-2); border-radius: 15px; overflow: hidden; }
.ctl-seg > button, .ctl-seg > label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 100%; min-height: 0; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font-size: 12.5px; letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; }
.ctl-seg > * + * { border-left: 1px solid var(--rule-2); }
.ctl-seg > button:hover, .ctl-seg > label:hover, :root[data-theme="dark"] .ctl-seg > button:hover { background: var(--paper-2); color: var(--ink); }
.ctl-seg > button.on, .ctl-seg > button.on:hover, :root[data-theme="dark"] .ctl-seg > button.on:hover { background: var(--ink); color: var(--paper); }
.ctl-seg > button:focus-visible, .ctl-chk:focus-within { outline: 2px solid var(--moss); outline-offset: -2px; }
.ctl-chk { padding: 0 10px 0 9px; }
.ctl-chk input[type=checkbox] { flex: none; width: 14px; height: 14px; min-height: 0; margin: 0; padding: 0; accent-color: var(--ink); cursor: pointer; }
.ctl-chk input:focus { outline: none; }
.ctl-sym { font-size: 14px; font-weight: 700; line-height: 1; }
.ctl-chk:first-child .ctl-sym { color: #b5457a; } .ctl-chk:last-child .ctl-sym { color: #2f6f9f; }
:root[data-theme="dark"] .ctl-chk:first-child .ctl-sym { color: #e08ab2; } :root[data-theme="dark"] .ctl-chk:last-child .ctl-sym { color: #7fb3dc; }
.chip { border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); border-radius: 14px; padding: 3px 10px; font-size: 12px; }
.chip span { margin-left: 5px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .chip.on span { color: var(--paper-3); }
.chip:hover { background: var(--paper-2); color: var(--ink); } .chip.on:hover { background: var(--ink); color: var(--paper); }
.tagrow { display: flex; flex-wrap: wrap; gap: 5px; }
.gene.codom { border-color: #c99b3f; } .gene.dom { border-color: #6c8fbf; } .gene.rec { border-color: #9a6db5; } .gene.het { border-style: dashed; color: var(--ink-2); }

/* design + hold bars */
#designbar, #holdbar, #visitbar, #walkbar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); padding: 8px 12px; display: flex; align-items: center; gap: 8px; z-index: 22; box-shadow: var(--shadow-4); font-size: 13px; }
.db-hint { color: var(--ink-2); padding: 0 8px; border-left: 1px solid var(--rule-2); margin-left: 4px; max-width: 360px; }
.db-hint.bad { color: var(--brick); }
#dbSnap.on, #dbMulti.on, .db-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.db-select { display: flex; align-items: center; gap: 4px; color: var(--ink-2); white-space: nowrap; }
.db-chip { padding: 4px 9px; }
.db-chip::before { content: '○ '; } .db-chip.on::before { content: '● '; }
.sel-box { position: fixed; z-index: 21; pointer-events: none; border: 2px dashed #2e8b4f; background: rgba(76, 175, 80, 0.16); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }
#holdText, #visitText { font-family: var(--serif); font-size: 16px; }

/* phone */
#phone { position: fixed; right: 18px; bottom: 14px; width: 344px; height: 704px; max-height: calc(100vh - 80px); background: #141414; border-radius: 40px; padding: 10px; box-shadow: var(--shadow-6), inset 0 0 0 2px #2c2c2c, inset 0 0 0 4px #0a0a0a; z-index: 25; display: flex; flex-direction: column; }
.phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; background: #0a0a0a; border-radius: 14px; z-index: 3; }
.phone-screen { flex: 1; background: var(--paper); border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.phone-status { display: flex; justify-content: space-between; padding: 14px 24px 4px; font-size: 12px; font-family: var(--mono); font-weight: 500; }
.phone-body { flex: 1; overflow: auto; padding: 0; }
.phone-body.home { background: radial-gradient(120% 70% at 30% 0%, rgba(47, 93, 58, .18), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(184, 115, 31, .14), transparent 60%); }
.phone-body.enter { animation: appin .22s ease; }
@keyframes appin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.phone-dock { display: flex; justify-content: center; padding: 6px 0 8px; }
.home-btn { width: 110px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .55; border: 0; padding: 0; min-height: 0; }
.home-btn:hover { opacity: 1; background: var(--ink); }
.widget { margin: 12px 14px 4px; padding: 12px 14px; background: rgba(255, 255, 255, .5); border-radius: 16px; border: 1px solid rgba(255, 255, 255, .6); }
:root[data-theme="dark"] .widget { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .06); }
.widget.small { cursor: pointer; }
.widget .w-date { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.widget .w-cash { font-family: var(--mono); font-size: 30px; font-weight: 500; line-height: 1.1; margin: 2px 0; }
.w-post { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.w-post canvas { width: 92px; height: 53px; flex: none; border-radius: 6px; background: var(--thumb-bg); }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; padding: 16px 12px 8px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; padding: 0; font-size: 11px; color: var(--ink); background: transparent; min-height: 0; }
.app:hover { background: transparent; color: var(--ink); } .app:hover .ico { transform: scale(1.06); }
:root .apps .app:hover, :root .apps .app:focus { background: transparent; color: var(--ink); box-shadow: none; } /* the dark theme fills hovered buttons; app icons only lift */
.app .ico { width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .12s; }
.app .ico svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app .ico .badge { position: absolute; top: -6px; right: -6px; }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px 8px 4px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.app-bar .app-title { font-family: var(--serif); font-size: 19px; font-weight: 600; flex: 1; }
.app-back { border: 0; font-size: 26px; line-height: 1; padding: 0 8px; color: var(--moss); min-height: 0; }
.app-back:hover { background: transparent; color: var(--moss-2); }
.app-body { padding: 8px 12px 12px; }
.app-body.chat { display: flex; flex-direction: column; min-height: calc(100% - 44px); }
.search { width: 100%; margin: 4px 0 8px; border-radius: 10px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; max-height: 196px; overflow: auto; }
.pickc { border: 1px solid var(--rule); padding: 3px; display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; line-height: 1.2; text-align: left; border-radius: 6px; min-height: 0; min-width: 0; overflow: hidden; }
.pickc canvas { max-width: 100%; height: auto; }

/* ---- Hatch, the social app ---- */
.ig { display: flex; flex-direction: column; min-height: 100%; }
.ig-body { flex: 1; padding-bottom: 6px; }
.ig-top { display: flex; align-items: center; gap: 4px; padding: 4px 8px 6px 2px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.ig-logo { flex: 1; font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.01em; font-style: italic; }
.ig-logo.plain { font-style: normal; font-size: 18px; }
.ig-right { position: relative; } .ig-right .badge { top: -2px; right: -2px; }
.ig-right button, .ig-tabs button { border: 0; background: transparent; padding: 4px 6px; min-height: 0; position: relative; }
.ig-right button:hover, .ig-tabs button:hover { background: transparent; color: var(--ink); }
.ig svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig-tabs { display: flex; justify-content: space-around; position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); padding: 6px 0 2px; z-index: 2; }
.ig-tabs button { color: var(--ink-3); } .ig-tabs button.on { color: var(--ink); } .ig-tabs button.on svg { stroke-width: 2.4; }
.ig-tabs .badge { top: -2px; right: 0; }
.ig-av { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-family: var(--serif); font-size: 15px; font-weight: 600; flex: none; }
.ig-av.sm { width: 24px; height: 24px; font-size: 12px; } .ig-av.lg { width: 76px; height: 76px; font-size: 34px; }
.ig-stories { display: flex; gap: 10px; padding: 10px 10px 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.ig-stories::-webkit-scrollbar { display: none; }
.ig-story { border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-2); min-height: 0; flex: none; width: 60px; }
.ig-story:hover { background: transparent; color: var(--ink); }
.ig-story .ring { padding: 3px; border-radius: 50%; border: 2px solid var(--rule-2); } .ig-story .ring .ig-av { width: 44px; height: 44px; font-size: 20px; }
.ig-story.fresh .ring { border-color: transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7) border-box; }
.ig-story > span:last-child { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-feedmode { display: flex; gap: 14px; padding: 8px 12px 2px; }
.ig-feedmode button { border: 0; background: transparent; padding: 2px 0; font-size: 13px; color: var(--ink-3); min-height: 0; border-radius: 0; }
.ig-feedmode button.on { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--ink); }
.ig-feedmode button:hover { background: transparent; color: var(--ink); }
.igp { padding: 8px 0 10px; border-bottom: 1px solid var(--rule); }
.igp header { display: flex; align-items: center; justify-content: space-between; padding: 2px 12px 8px; }
.igp header .author { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ig-img { position: relative; overflow: hidden; background: var(--thumb-bg); }
.ig-img canvas { width: 100%; aspect-ratio: 52 / 30; display: block; }
.ig-img.big { border-radius: 12px; border: 1px solid var(--rule); }
.ig-tag { position: absolute; left: 8px; bottom: 8px; font-size: 11px; padding: 2px 8px; background: rgba(20, 18, 15, .55); color: #fff; border-radius: 10px; backdrop-filter: blur(4px); }
.ig-bigheart { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
.ig-bigheart svg { width: 90px; height: 90px; fill: #fff; stroke: #fff; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.ig-img.pop .ig-bigheart { animation: bigheart .9s ease; }
@keyframes bigheart { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.ig-actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px 2px; }
.ig-actions button { border: 0; background: transparent; padding: 4px; min-height: 0; color: var(--ink); }
.ig-actions button:hover { background: transparent; color: var(--ink-2); }
.ig-actions button.liked svg { fill: #ed4956; stroke: #ed4956; }
.ig-actions .right { margin-left: auto; padding-right: 6px; font-size: 11.5px; }
.ig-likes { padding: 2px 12px; font-size: 13px; }
.ig-cap { padding: 2px 12px; font-size: 13.5px; line-height: 1.4; } .ig-cap .author { cursor: pointer; }
.ig-more { border: 0; background: transparent; color: var(--ink-3); font-size: 12.5px; padding: 2px 12px; min-height: 0; }
.ig-more:hover { background: transparent; color: var(--ink); }
.ig-cmts { padding: 2px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.ig-cform { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; }
.ig-cform input { flex: 1; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 5px 2px; font-size: 13px; background: transparent; }
.ig-cform button { border: 0; color: var(--sky); font-weight: 500; padding: 4px 6px; min-height: 0; } .ig-cform button:hover { background: transparent; }
.ig-search { padding: 8px 10px; } .ig-search input { width: 100%; border-radius: 10px; }
.ig-people { display: flex; flex-direction: column; }
.ig-person { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 7px 12px; text-align: left; min-height: 0; border-radius: 0; }
.ig-person:hover { background: var(--paper-2); color: var(--ink); }
.ig-person > span:not(.ig-av) { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; } .ig-person small { color: var(--ink-3); font-size: 11.5px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px 0; }
.ig-cell { border: 0; padding: 0; background: var(--paper-2); position: relative; aspect-ratio: 1; overflow: hidden; min-height: 0; border-radius: 0; }
.ig-cell canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-cell span { position: absolute; right: 4px; bottom: 4px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); display: flex; align-items: center; gap: 2px; }
.ig-cell span svg { width: 12px; height: 12px; fill: #fff; stroke: #fff; }
.ig-new { padding: 10px 12px; } .ig-new textarea { width: 100%; margin: 8px 0; }
.ig-empty { text-align: center; padding: 40px 20px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ig-empty b { color: var(--ink); font-family: var(--serif); font-size: 18px; }
.ig-activity { display: flex; flex-direction: column; }
.ig-act { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px 12px; text-align: left; min-height: 0; border-radius: 0; font-size: 13px; }
.ig-act.unread { background: rgba(58, 109, 140, .08); } .ig-act:hover { background: var(--paper-2); color: var(--ink); }
.ig-act > span:not(.ig-av) { flex: 1; display: flex; flex-direction: column; } .ig-act small { color: var(--ink-3); }
.ig-phead { display: flex; align-items: center; gap: 18px; padding: 14px 16px 8px; }
.ig-pstats { flex: 1; display: flex; justify-content: space-around; text-align: center; }
.ig-pstats b { display: block; font-size: 17px; } .ig-pstats span { font-size: 11px; color: var(--ink-3); }
.ig-pbio { padding: 0 16px 8px; font-size: 13.5px; line-height: 1.4; }
.ig-pbtns { display: flex; gap: 6px; padding: 0 16px 10px; flex-wrap: wrap; }
.ig-best { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.ig-best div { flex: none; width: 120px; font-size: 11px; color: var(--ink-2); } .ig-best canvas { width: 120px; height: 69px; border-radius: 6px; display: block; background: var(--paper-2); }
.ig-ach { padding: 0 12px 10px; display: flex; flex-wrap: wrap; gap: 4px; }
/* Hatch, closer to Instagram: rings, flat tab bar with filled active icons, borderless comment line, highlights */
.ig { --ig-blue: #0095f6; --ig-grad: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.ig-body { container-type: inline-size; }
.ig-top { padding: 6px 8px 6px 2px; border-bottom: 0; }
.ig-logo { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.ig-logo.plain { font-family: var(--sans, Roboto, Arial, sans-serif); font-style: normal; font-weight: 700; font-size: 16px; letter-spacing: 0; }
.ig-right { display: flex; gap: 2px; }
.ig-dot { position: absolute; top: 3px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ff3040; box-shadow: 0 0 0 2px var(--paper); }
.ig .ig-tabs { padding: 8px 0 6px; box-shadow: none; border-top: 1px solid var(--rule); }
.ig .ig-tabs button, .ig .ig-tabs button:hover, .ig .ig-tabs button:focus, .ig .ig-tabs button:focus-visible, .ig .ig-tabs button.on { background: transparent; box-shadow: none; outline: none; }
.ig .ig-tabs button { color: var(--ink); opacity: .9; }
.ig .ig-tabs button.on { opacity: 1; }
.ig .ig-tabs button.on.t-home svg, .ig .ig-tabs button.on.t-activity svg { fill: currentColor; }
.ig .ig-tabs button.on.t-explore svg, .ig .ig-tabs button.on.t-new svg { stroke-width: 2.6; }
.ig-me { display: inline-flex; border-radius: 50%; padding: 1.5px; border: 1.5px solid transparent; }
.ig-me .ig-av.sm { width: 24px; height: 24px; min-width: 24px; font-size: 11px; }
.ig-tabs button.on .ig-me { border-color: var(--ink); }
.ig-tabs .ig-dot { top: 2px; right: 10px; }
/* rings round avatars: colored for something new, grey once seen */
.ig-ring { display: inline-flex; border-radius: 50%; padding: 2px; flex: none; position: relative; }
.ig-ring.fresh { background: var(--ig-grad); }
.ig-ring.seen { background: var(--rule-2); }
.ig-ring.fresh > .ig-av, .ig-ring.seen > .ig-av { box-shadow: 0 0 0 2px var(--paper); }
.ig-stories { gap: 12px; padding: 10px 10px 10px; border-bottom: 1px solid var(--rule); }
.ig-story { width: 64px; gap: 5px; font-size: 11px; color: var(--ink); }
.ig-story .ig-ring { padding: 2.5px; }
.ig-story .ig-ring .ig-av { width: 56px; height: 56px; min-width: 56px; font-size: 24px; }
.ig-story .ig-ring:not(.fresh):not(.seen) { padding: 2.5px; }
.ig-add { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ig-blue); color: #fff; font-style: normal; font-weight: 700; font-size: 15px; line-height: 17px; text-align: center; border: 2px solid var(--paper); }
.ig-feedmode { padding: 10px 12px 4px; }
/* a post */
.igp { border-bottom: 0; padding-bottom: 14px; }
.igp header { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 10px; }
.igp-who { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; min-height: 0; color: var(--ink); }
.igp-who:hover { background: transparent; color: var(--ink); }
.igp-who .ig-av.sm { width: 32px; height: 32px; min-width: 32px; font-size: 14px; }
.igp-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.igp-names > span { display: flex; align-items: center; gap: 4px; font-size: 13.5px; }
.igp-names i { font-style: normal; color: var(--ink-3); }
.igp-names em { font-style: normal; color: var(--ink-3); font-size: 13px; }
.igp-names small { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.igp-dots { color: var(--ink); display: inline-flex; padding: 4px; }
.igp-dots svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.ig-img { border-radius: 0; }
.ig-actions { gap: 6px; padding: 8px 8px 4px 6px; }
.ig-actions button { padding: 4px; }
.ig-actions button svg { width: 25px; height: 25px; transition: transform .15s ease; }
.ig-actions button:active svg { transform: scale(.85); }
.ig-actions button.liked svg { animation: likepop .35s ease; }
@keyframes likepop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ig-actions .save { margin-left: auto; }
.ig-actions .save.on svg { fill: currentColor; }
.ig-likes { padding: 0 12px 2px; font-size: 13.5px; }
.ig-cap { padding: 2px 12px 0; font-size: 13.5px; }
.ig-cap.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-more { padding: 3px 12px 0; font-size: 13.5px; color: var(--ink-3); display: block; }
.ig-hatched { padding: 2px 12px 0; font-size: 12px; color: var(--ink-3); }
.ig-cmts { padding: 3px 12px 0; font-size: 13.5px; gap: 3px; }
.ig-cmts .author { cursor: pointer; }
.ig-cmt { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.ig-cmt > span { cursor: pointer; flex: none; }
.ig-cmt .ig-av.sm { width: 30px; height: 30px; min-width: 30px; font-size: 13px; }
.ig-cmt small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 3px; }
.igp.full .ig-cmts { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 4px; }
.ig-when { padding: 5px 12px 0; font-size: 10.5px; letter-spacing: .02em; color: var(--ink-3); text-transform: uppercase; }
.ig-cform { padding: 8px 12px 0; gap: 10px; }
.ig .ig-cform input, .ig .ig-cform input:focus { border: 0; background: transparent; box-shadow: none; padding: 4px 0; font-size: 13.5px; outline: none; }
.ig .ig-cform button { color: var(--ig-blue); font-weight: 600; background: transparent; }
.ig .ig-cform button:disabled { opacity: .35; cursor: default; }
/* buttons, Instagram style */
.ig-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 8px; background: var(--paper-2); color: var(--ink); font: 600 13px/1 var(--sans, Roboto, Arial, sans-serif); padding: 8px 14px; min-height: 0; font-style: normal; white-space: nowrap; }
.ig-btn:hover { background: var(--rule); color: var(--ink); }
.ig-btn.blue { background: var(--ig-blue); color: #fff; }
.ig-btn.blue:hover { background: #1877f2; color: #fff; }
.ig-btn.icon { padding: 6px 9px; }
.ig-btn.on { background: var(--rule-2); }
.ig-btn.off { color: var(--ink-3); }
.ig-btn svg { width: 16px; height: 16px; }
.ig-btn.icon svg { fill: currentColor; stroke: none; }
/* suggested for you */
.ig-sugg { padding: 10px 0 14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 4px 0 12px; }
.ig-sugg-h { padding: 0 12px 8px; font-size: 13.5px; }
.ig-sugg-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
.ig-sugg-row::-webkit-scrollbar { display: none; }
.ig-sugg-card { flex: none; width: 136px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 10px; border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; text-align: center; }
.ig-sugg-card .ig-av.lg { width: 64px; height: 64px; min-width: 64px; font-size: 28px; margin-bottom: 4px; }
.ig-sugg-card b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.ig-sugg-card > small { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; } /* its own line only, not a star's number (#1503) */
.ig-sugg-card .ig-btn { width: 100%; }
/* explore */
.ig-search { display: flex; align-items: center; gap: 8px; margin: 6px 10px 8px; padding: 0 12px; border-radius: 10px; background: var(--paper-2); }
.ig-search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.ig .ig-search input, .ig .ig-search input:focus { border: 0; background: transparent; box-shadow: none; padding: 9px 0; width: 100%; outline: none; border-radius: 0; }
.ig-sec { padding: 12px 12px 6px; font-weight: 700; font-size: 14px; }
.ig-person .ig-btn { padding: 7px 12px; }
.ig-grid { gap: 2px; }
.ig-grid.mosaic { grid-auto-rows: calc((100cqw - 4px) / 3); grid-auto-flow: dense; }
.ig-grid.mosaic .ig-cell { aspect-ratio: auto; }
.ig-grid.mosaic .ig-cell.tall { grid-row: span 2; grid-column: 3; }
.ig-grid.mosaic .ig-cell.tall.left { grid-column: 1; }
.ig-cell canvas { object-fit: cover; }
.ig-cell-stats { display: flex; align-items: center; gap: 3px; font-weight: 600; }
.ig-cell-stats svg { width: 12px; height: 12px; margin-left: 4px; }
.ig-cell .ig-cell-pin { left: 4px; top: 4px; right: auto; bottom: auto; } /* a pinned post (#963) */
.ig-cell:hover::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.ig-disc { padding: 0 0 8px; }
.ig-disc summary { padding: 10px 12px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.ig-disc summary::-webkit-details-marker { display: none; }
.ig-disc summary::after { content: ' ›'; color: var(--ink-3); }
.ig-disc[open] summary::after { content: ' ⌄'; }
/* notifications */
.ig .ig-act { padding: 9px 12px; cursor: pointer; }
.ig .ig-act.unread { background: transparent; }
.ig .ig-act .ig-av { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
.ig .ig-act > span:not(.ig-av) { display: block; font-size: 13.5px; line-height: 1.35; }
.ig .ig-act small { font-size: 13px; }
.ig .ig-act .ig-btn { flex: none; }
.ig-empty-ic { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; margin-bottom: 6px; color: var(--ink); }
.ig-empty-ic svg { width: 34px; height: 34px; }
.ig .ig-empty b { font-family: var(--sans, Roboto, Arial, sans-serif); font-weight: 800; font-size: 20px; }
/* profile */
.ig-phead { gap: 16px; padding: 12px 14px 10px; }
.ig-phead .ig-ring { padding: 3px; }
.ig-phead .ig-av.lg { width: 80px; height: 80px; min-width: 80px; font-size: 34px; }
.ig-pside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ig-pname { font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } /* the chips wrap under a long name, the name itself never breaks (#1025) */
.ig-pstats { justify-content: space-between; text-align: left; }
.ig-pstats > div { display: flex; flex-direction: column; }
.ig-pstats b { font-size: 16px; }
.ig-pstats span { font-size: 12.5px; color: var(--ink); }
.ig-pbio { padding: 0 14px 10px; font-size: 13.5px; }
.ig-pcat { color: var(--ink-3); font-size: 12.5px; }
.ig-pbiotext { margin-top: 3px; white-space: pre-wrap; }
.ig-pbtns { gap: 6px; padding: 0 14px 12px; flex-wrap: nowrap; }
.ig-pbtns .ig-btn:not(.icon) { flex: 1; }
.ig-pmore { display: flex; gap: 6px; padding: 0 14px 12px; flex-wrap: wrap; }
.ig-pmore.hidden { display: none; }
.ig-pmore .ig-btn { flex: 1; }
.ig-hl { display: flex; gap: 14px; padding: 2px 14px 14px; overflow-x: auto; scrollbar-width: none; }
.ig-hl::-webkit-scrollbar { display: none; }
.ig-hl-i { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ig-hl-c { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--rule-2); padding: 3px; display: grid; place-items: center; overflow: hidden; background-clip: content-box; }
.ig-hl-c canvas { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; display: block; background: var(--paper-2); }
.ig-hl-c.ach { background: var(--paper-2); background-clip: content-box; color: #c9a227; }
.ig-hl-c.ach svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ig-hl-i small { font-size: 11px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-ptabs { display: flex; border-top: 1px solid var(--rule); }
.ig-ptabs button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 10px 0 8px; min-height: 0; color: var(--ink-3); box-shadow: inset 0 -1px 0 transparent; }
.ig-ptabs button:hover { background: transparent; color: var(--ink); }
.ig-ptabs button.on { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); }
.ig-ptabs button svg { width: 22px; height: 22px; }
.ig-ptabs button.on[data-ptab="saved"] svg { fill: currentColor; }
/* the dark theme fills any hovered button; Hatch keeps its flat, icon-only controls */
:root .ig .ig-tabs button:hover, :root .ig .ig-right button:hover, :root .ig .ig-feedmode button:hover, :root .ig .ig-actions button:hover, :root .ig .ig-ptabs button:hover, :root .ig .ig-story:hover, :root .ig .igp-who:hover, :root .ig .ig-more:hover, :root .ig .ig-cform button:hover, :root .ig .ig-person:hover, :root .ig .app-back:hover { background: transparent; color: var(--ink); }
:root .ig .ig-feedmode button, :root .ig .ig-feedmode button:focus { background: transparent; }
:root .ig .ig-btn:hover { background: var(--rule); color: var(--ink); } :root .ig .ig-btn.blue:hover { background: #1877f2; color: #fff; }
:root .ig .ig-cform button:hover { color: var(--ig-blue); }
:root .ig button.igp-dots { border: 0; background: transparent; min-height: 0; padding: 4px; color: var(--ink); cursor: pointer; }
html body .igp header .igp-del { border: 0; background: transparent; box-shadow: none; color: #ed4956; font-size: 12px; font-weight: 500; padding: 0 0 0 8px; min-height: 0; height: auto; width: auto; }
.del-confirm { padding: 6px 4px 10px; } .del-confirm .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* the phone site: the morph sits under the name, not over the photo */
.igp header > .author { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.igp header > .author .igp-names b { font-size: 13.5px; }
/* avatars keep their shape: an older rule gives .ig-av a fixed flex size, which stretched them in column layouts */
.ig .ig-av { flex: none; }
.ig-sugg-card .ig-av.lg { width: 64px; height: 64px; min-width: 64px; min-height: 64px; flex: none; }
.ig-story .ig-ring .ig-av, .igp-who .ig-av.sm, .ig-cmt .ig-av.sm, .ig-phead .ig-av.lg, .ig .ig-act .ig-av { flex: none; aspect-ratio: 1; }
/* sideways rows: drag or use the arrows */
.hs-wrap { position: relative; }
.ig-sugg-row, .ig-stories, .ig-hl { cursor: grab; user-select: none; }
.ig-sugg-row.dragging, .ig-stories.dragging, .ig-hl.dragging { cursor: grabbing; scroll-behavior: auto; }
.ig-sugg-row.dragging *, .ig-stories.dragging *, .ig-hl.dragging * { pointer-events: none; }
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: rgba(250, 248, 243, .94); color: #1e1a15; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); display: grid; place-items: center; cursor: pointer; transition: opacity .15s; }
.hs-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hs-arrow.prev { left: 6px; } .hs-arrow.next { right: 6px; }
.hs-arrow.off { opacity: 0; pointer-events: none; }
:root .hs-arrow:hover { background: #fff; color: #1e1a15; }
.ig-stories + .hs-arrow, .hs-wrap:has(.ig-stories) .hs-arrow { top: 42px; }
.hs-wrap:has(.ig-hl) .hs-arrow { top: 34px; }
/* the genetics card from hovering a post's subtitle */
.igp-gen { cursor: help; }
.igp-names small.igp-gen:hover { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 2px; }
.igp-names small.igp-gen.open { white-space: normal; overflow: visible; }
/* Hatch visual pass (#1401) */
/* the back chevron: plain ink, no bubble behind it, lined up with the title */
:root .ig .ig-top .app-back, :root .ig .ig-top .app-back:hover, :root .ig .ig-top .app-back:focus { display: inline-grid; place-items: center; width: 30px; height: 32px; padding: 0 0 3px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: 30px; line-height: 1; }
:root .ig .ig-top .app-back:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 1px; border-radius: 6px; }
/* icon buttons keep no box once clicked; the keyboard still gets a ring */
:root .ig :is(.ig-actions, .ig-right, .ig-tabs, .ig-ptabs) button:focus:not(:focus-visible) { background: transparent; box-shadow: none; outline: none; }
:root .ig :is(.ig-actions, .ig-right, .igp header) button:focus-visible { background: transparent; outline: 2px solid var(--ink-3); outline-offset: 0; border-radius: 8px; }
/* sideways rows: the arrows show while the pointer is over the row, so they never sit on a face */
@media (hover: hover) { .hs-wrap:not(:hover) .hs-arrow { opacity: 0; pointer-events: none; } }
.hs-arrow { width: 26px; height: 26px; }
/* profile highlights and story names: two short lines rather than one cut-off line */
.ig-hl-i small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-align: center; line-height: 1.2; max-width: 68px; overflow-wrap: anywhere; }
/* activity: a pair of faces for a folded line, the post's picture on the right */
.ig .ig-act > span:not(.ig-av):not(.ig-act-faces) b { font-weight: 700; }
.ig .ig-act > .ig-act-faces { position: relative; display: block; flex: none; width: 44px; height: 44px; }
.ig .ig-act .ig-act-faces .ig-av { position: absolute; width: 32px; height: 32px; min-width: 32px; font-size: 14px; box-shadow: 0 0 0 2px var(--paper); }
.ig .ig-act .ig-act-faces .ig-av:first-child { left: 0; top: 0; } .ig .ig-act .ig-act-faces .ig-av:last-child { right: 0; bottom: 0; }
.ig-act-pic { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; display: block; background: var(--thumb-bg); }
.ig .ig-act.unread { background: color-mix(in srgb, var(--ig-blue) 7%, transparent); }
/* hovering them changes the icon, never adds a box (the id beats the theme's button hover) */
#phone .ig :is(.ig-actions, .ig-right, .ig-tabs) button:hover, body.mobile #view .ig :is(.ig-actions, .ig-right, .ig-tabs) button:hover { background: transparent; box-shadow: none; border-color: transparent; }
#phone .ig .ig-actions button:hover svg { opacity: .65; }
/* Post stays faint until there's something to post */
.ig .ig-cform:has(input:placeholder-shown) button { opacity: .35; }
/* the composer's labels read as one line, one size */
.pc-lbl .meta { font: inherit; font-weight: 400; letter-spacing: inherit; text-transform: inherit; color: var(--ink-3); opacity: .8; }
.gen-tip { position: fixed; z-index: 90; max-width: 340px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); padding: 10px 12px; pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .12s, transform .12s; }
.gen-tip.on { opacity: 1; transform: none; }
.gen-tip .gt-row + .gt-row { border-top: 1px dashed var(--rule-2); margin-top: 8px; padding-top: 8px; }
.gen-tip .gt-name { font-size: 13.5px; }
.gen-tip .gt-morph { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.gen-tip .gt-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* supporter badge */
.sup-mark { display: inline-flex; vertical-align: -2px; margin-left: 3px; flex: none; }
.sup-mark svg { width: 15px; height: 15px; stroke: none; }
.sup-mark .egg { fill: #fff8e7; }
.sup-mark.big svg { width: 18px; height: 18px; }
/* the supporter membership (#452): the card (Settings → Support, the rosette), the one quiet nudge */
.sup-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--rule-2); border-radius: 14px; background: linear-gradient(180deg, rgba(62, 122, 76, .08), transparent 60%), var(--paper); }
.sup-card.on { border-color: var(--moss-2); }
.sup-hero { display: flex; gap: 16px; align-items: center; } .sup-ros { flex: none; width: 76px; height: 76px; }
.sup-hero h3 { margin: 0 0 4px; font: 600 20px/1.2 var(--serif); } .sup-hero p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.sup-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sup-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); } .sup-perks b { color: var(--ink); }
.sup-perks svg { flex: none; width: 18px; height: 18px; } .sup-dot { flex: none; width: 8px; height: 8px; margin: 6px 5px 0; border-radius: 50%; background: var(--moss-2); }
.sup-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.sup-price { flex: 1; font-size: 13px; color: var(--ink-3); } .sup-price b { font: 700 18px var(--mono, monospace); color: var(--ink); }
.sup-foot a.btn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.sup-foot a.btn.primary { background: var(--moss-2); border-color: var(--moss-2); color: #fff; } .sup-foot a.btn:hover { filter: brightness(1.08); }
.sup-small { flex-basis: 100%; font-size: 12px; color: var(--ink-3); }
#modalBox2:has(.sup-card) { width: min(540px, 94vw); }
.sup-mark { cursor: pointer; }
.linkish { min-height: 0; height: auto; padding: 0; border: 0; background: none; color: var(--moss-2); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sup-nudge { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; gap: 12px; width: min(360px, calc(100vw - 36px)); padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--paper); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.sup-nudge.in { opacity: 1; transform: none; } .sup-nudge > svg { flex: none; width: 40px; height: 40px; }
.sup-nudge b { display: block; font: 600 15px var(--serif); margin-bottom: 3px; } .sup-nudge span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.sup-nudge-acts { display: flex; gap: 6px; margin-top: 10px; }
.sup-ros, .sup-perks svg, .sup-nudge > svg { fill: #4f9a62; } .sup-ros .egg, .sup-perks svg .egg, .sup-nudge > svg .egg { fill: #fff8e7; } /* the old seal takes its colour from here; the rosette brings its own */
/* the header badge (#452): an empty badge slot until you're a supporter. A dashed socket with the rosette as a faint
   silhouette, a soft light sweeping across it now and then; hover slides it open ("Get the rosette"), colours the
   rosette in and sways its ribbon tails. A supporter's is solid and in colour. No motion for reduced-motion users. */
#hud .sup-hud { position: relative; display: inline-flex; align-items: center; gap: 0; height: 36px; min-height: 0; padding: 0 6px; border: 1px dashed var(--rule-2); border-radius: 11px; background: radial-gradient(circle at 18px 50%, rgba(79, 154, 98, .10), transparent 26px), var(--paper-2); cursor: pointer; flex: none; overflow: hidden; color: var(--ink-2); transition: border-color .2s, background .2s, padding .25s; }
#hud .sup-hud .sh-ico { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
#hud .sup-hud svg { width: 22px; height: 22px; fill: #4f9a62; filter: grayscale(1) contrast(.9); opacity: .38; transform-origin: 50% 40%; transition: filter .25s, opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
#hud .sup-hud svg .egg { fill: #fff8e7; }
#hud .sup-hud .sh-lbl { max-width: 0; overflow: hidden; white-space: nowrap; font: 600 12.5px/1 var(--sans, inherit); letter-spacing: .01em; opacity: 0; transition: max-width .3s ease, opacity .2s ease, margin .3s ease; }
#hud .sup-hud::after { content: ''; position: absolute; inset: -40% auto -40% -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); pointer-events: none; animation: sh-sweep 11s ease-in-out 4s infinite; }
@keyframes sh-sweep { 0%, 86% { left: -60%; } 100% { left: 130%; } }
#hud .sup-hud:hover, #hud .sup-hud:focus-visible { border-style: solid; border-color: #4f9a62; padding-right: 11px; background: radial-gradient(circle at 18px 50%, rgba(79, 154, 98, .22), transparent 30px), var(--paper-2); }
#hud .sup-hud:hover svg, #hud .sup-hud:focus-visible svg { filter: none; opacity: 1; transform: rotate(-8deg) scale(1.08); animation: sh-sway 1.4s ease-in-out .35s infinite; }
@keyframes sh-sway { 0%, 100% { transform: rotate(-8deg) scale(1.08); } 50% { transform: rotate(7deg) scale(1.08); } }
#hud .sup-hud:hover .sh-lbl, #hud .sup-hud:focus-visible .sh-lbl { max-width: 120px; opacity: 1; margin-left: 7px; }
#hud .sup-hud.on { border-style: solid; border-color: rgba(79, 154, 98, .6); background: radial-gradient(circle at 18px 50%, rgba(79, 154, 98, .2), transparent 28px), var(--paper-2); color: var(--ink); }
#hud .sup-hud.on svg { filter: none; opacity: 1; }
#hud .sup-hud.on::after { animation-duration: 24s; }
@media (prefers-reduced-motion: reduce) { #hud .sup-hud::after { animation: none; display: none; } #hud .sup-hud:hover svg, #hud .sup-hud:focus-visible svg { animation: none; transform: none; } #hud .sup-hud .sh-lbl { transition: none; } }
/* the supporter card (#452): shows what you'd get. On its own as the pop-up (an × in its corner), inline in Settings. */
#modalBox2.spc-host { width: min(620px, 94vw); max-height: 92vh; overflow: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.spc { position: relative; display: flex; flex-direction: column; border: 1px solid var(--rule-2); border-radius: 16px; overflow: clip; background: var(--paper); } /* clip, not hidden: the buy bar sticks to the pop-up's scroll */
.spc-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(20, 18, 15, .35); color: #f4efe3; font-size: 20px; line-height: 1; cursor: pointer; }
.spc-x:hover { background: rgba(20, 18, 15, .65); }
.spc-hero { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: radial-gradient(120% 140% at 0% 0%, #4f8a58, #2f5d3a 60%, #24472d); color: #f4efe3; }
.spc.pop .spc-hero { padding-right: 56px; }
.spc-ros { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .spc-ros svg { width: 54px; height: 54px; transform: rotate(-6deg); }
.spc-hero h3 { margin: 6px 0 4px; font: 600 22px/1.15 var(--serif); }
.spc-hero p { margin: 0; font-size: 13px; line-height: 1.45; opacity: .88; }
.spc-season { position: relative; margin: 16px 20px 0; border-radius: 12px 12px 0 0; overflow: hidden; border: 1px solid rgba(224, 123, 36, .45); border-bottom: 0; background: #160c1c; }
.spc-season canvas { display: block; width: 100%; height: auto; aspect-ratio: 560 / 260; }
.spc-season-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; background: linear-gradient(180deg, rgba(10, 6, 14, 0), rgba(10, 6, 14, .86) 50%); color: #f4ecdf; }
.spc-season-t b { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.1; margin: 6px 0 2px; } .spc-season-t p { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(244, 236, 223, .88); }
.spc-decor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 20px; border: 1px solid rgba(224, 123, 36, .45); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; background: rgba(224, 123, 36, .25); }
.spc-decor figure { margin: 0; background: radial-gradient(ellipse at 50% 35%, #2c2033, #160c1c 80%); } .spc-decor canvas { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; }
.spc-decor figcaption { padding: 0 6px 7px; font-size: 11px; color: rgba(244, 236, 223, .8); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spc-season:not(:has(+ .spc-decor)) { border-bottom: 1px solid rgba(224, 123, 36, .45); border-radius: 12px; } /* out of stock: no decor strip under it */
.spc-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 20px 0; }
.spc-perk.pk-gems { grid-column: 1 / -1; border-color: rgba(86, 156, 235, .55); } .spc-perk.pk-gems .spc-pi { background: rgba(86, 156, 235, .16); color: #5aa2ee; } /* the weekly Gems, across the grid (#909) */
.spc-perk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper-2, var(--paper)); min-width: 0; }
.spc-perk b { display: block; font-size: 13.5px; } .spc-perk small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.spc-me { display: inline-flex; align-items: center; gap: 4px; } .spc-me svg { width: 15px; height: 15px; }
.spc-crowd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 20px 16px; font-size: 13px; color: var(--ink-2); } .spc-crowd small { flex-basis: 100%; font-size: 12px; color: var(--ink-3); }
.spc-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 20px; border-top: 1px solid var(--rule); background: var(--paper); box-shadow: 0 -10px 24px rgba(0, 0, 0, .18); }
.spc-foot .spc-price { margin-right: auto; }
.spc-foot a.btn, .spc-foot button.btn { display: inline-flex; align-items: center; min-height: 0; height: auto; padding: 11px 22px; border-radius: 10px; border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; cursor: pointer; }
.spc-foot .btn.primary { background: #3e7a4c; border-color: #3e7a4c; color: #fff; box-shadow: 0 6px 16px rgba(62, 122, 76, .35); } .spc-foot .btn:hover { filter: brightness(1.1); }
.spc-small { flex-basis: 100%; font-size: 12px; color: var(--ink-3); text-align: right; }
.spc-foot button.spc-small { min-height: 0; height: auto; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .spc-foot button.spc-small:hover { color: var(--ink); } /* redeem a free pass (#595) */
@media (max-width: 560px) { .spc-pgrid { grid-template-columns: 1fr; } .spc-decor { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spc-hero h3 { font-size: 19px; } .spc-ros { width: 52px; height: 52px; } .spc-ros svg { width: 44px; height: 44px; } }
.spc.pop { box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.spc.on { border-color: rgba(79, 154, 98, .6); }
.spc-hero-txt { flex: 1; min-width: 0; }
.spc-kicker { font: 600 10.5px/1 var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.spc-lbl { font: 600 10.5px/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.spc-avs { display: inline-flex; } .spc-avs span { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--paper); background: #3e7a4c; color: #fff; font-size: 11px; font-weight: 700; } .spc-avs span:first-child { margin-left: 0; }
.spc-price { display: flex; align-items: center; gap: 8px; } .spc-price b { font: 700 30px/1 var(--mono, monospace); } .spc-price span { font-size: 11.5px; line-height: 1.3; color: var(--ink-3); }
/* buying and managing on the site (#460) */
.spc-manage { padding: 14px 20px 4px; }
.spc-mrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; }
.spc-mrow b { display: block; font: 700 16px var(--mono, monospace); } .spc-mrow span { font-size: 12.5px; color: var(--ink-3); }
.spc-mstate { font-size: 13px; font-weight: 600; color: var(--moss-2); } .spc-mstate.ending { color: var(--amber); }
.spc-macts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.spc-macts .btn { padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 13.5px; }
.spc-confirm { margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(201, 97, 78, .5); border-radius: 12px; background: rgba(201, 97, 78, .07); } .spc-confirm p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.spc-merr { margin-top: 8px; font-size: 12.5px; color: var(--brick); }
.spc-pay { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 18px; }
.spc-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-3); } .spc-pay-head b { color: var(--ink); font: 700 15px var(--mono, monospace); }
.spc-checkout { min-height: 260px; border-radius: 12px; overflow: hidden; background: #fff; }
.spc-wait { display: grid; place-items: center; min-height: 260px; color: #5d564c; font-size: 14px; } .spc-wait.err { color: #8b3a2b; padding: 0 20px; text-align: center; }
.spc-secure { margin: 0; font-size: 12px; color: var(--ink-3); text-align: center; }
/* gifting a membership (#597) */
.spc-gift { gap: 12px; } .spc-gift h3 { margin: 4px 0 0; font: 600 20px/1.2 var(--serif); } .spc-gift > .meta { margin: 0; font-size: 13px; line-height: 1.45; }
.spc-gl { display: flex; flex-direction: column; gap: 6px; font: 600 10.5px/1 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.spc-gl input[name=to] { font: 15px var(--sans, inherit); letter-spacing: 0; text-transform: none; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper-2, var(--paper)); color: var(--ink); }
.spc-glens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spc-glens label { cursor: pointer; } .spc-glens input { position: absolute; opacity: 0; pointer-events: none; }
.spc-glens span { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; text-transform: none; letter-spacing: 0; }
.spc-glens b { font: 600 14px var(--sans, inherit); color: var(--ink); } .spc-glens small { font: 700 15px var(--mono, monospace); color: var(--ink-2); }
.spc-glens input:checked + span { border-color: #3e7a4c; box-shadow: inset 0 0 0 1px #3e7a4c; background: rgba(62, 122, 76, .12); }
.spc-glens input:focus-visible + span { outline: 2px solid #3e7a4c; outline-offset: 2px; }
.spc-gerr { font-size: 13px; color: var(--brick); }
.spc-gift .btn.primary { align-self: flex-end; display: inline-flex; padding: 11px 22px; border-radius: 10px; border: 1px solid #3e7a4c; background: #3e7a4c; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; min-height: 0; height: auto; }
.spc-done { padding: 18px 6px; text-align: center; } .spc-done h3 { margin: 0 0 6px; font: 600 24px var(--serif); color: var(--moss-2); } .spc-done p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.pickc:hover, :root[data-theme="dark"] .pickc:hover { background: var(--paper-2); color: var(--ink); }
.pickc.on { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); }
.pickc canvas { width: 100%; aspect-ratio: 52 / 30; border-radius: 4px; background: var(--thumb-bg); }
.pickc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot canvas { width: 100%; aspect-ratio: 52 / 30; display: block; border-radius: 10px; border: 1px solid var(--rule); background: var(--thumb-bg); }
.shot-cap { font-size: 12.5px; margin: 6px 0 8px; }
.chatlog .msg { max-width: 84%; padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: var(--paper-2); align-self: flex-start; }
.chatlog .msg b { display: block; font-size: 11px; }
.chatlog .msg.me { background: var(--moss); color: #fff; align-self: flex-end; border-radius: 14px 14px 4px 14px; }
.chatlog .msg.me b { color: rgba(255, 255, 255, .75); }
.board .brow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.brow.me { background: rgba(47, 93, 58, .07); }
.brow .rank { width: 20px; font-family: var(--mono); color: var(--ink-3); text-align: right; }
.brow .who { flex: 1; }
.avatar.sm { width: 30px; height: 30px; font-size: 15px; }
.bank-hero { padding: 14px 0 10px; }
.bank-cash { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1.1; }
.post { border-bottom: 1px solid var(--rule); padding: 10px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.post .head { display: flex; justify-content: space-between; align-items: baseline; }
.post .author { font-weight: 500; }
.post canvas { width: 100%; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border: 1px solid var(--rule); }
.post .caption { font-size: 13px; line-height: 1.4; }
.post .caption b { font-family: var(--serif); font-weight: 600; }
.post .react { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-2); }
.post .react button { border: 0; padding: 2px 6px; color: var(--ink-2); } .post .react button:hover { background: transparent; color: var(--brick); } .post .react button.liked { color: var(--brick); }
.post .comments { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.post .comments b { font-weight: 500; }
.post form { display: flex; gap: 4px; } .post form input { flex: 1; padding: 5px 8px; font-size: 12px; }
.chatlog { display: flex; flex-direction: column; gap: 5px; font-size: 13px; padding-bottom: 8px; }
.chatlog .sys { color: var(--ink-3); font-style: italic; font-size: 12px; }
.chatlog b { color: var(--moss); font-weight: 500; }
.chatform { display: flex; gap: 4px; position: sticky; bottom: 0; background: var(--paper); padding-top: 6px; }
.chatform input { flex: 1; }
.phone h3 { font-size: 20px; margin: 6px 0 8px; }
.feed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.seg { display: flex; border: 1px solid var(--rule-2); }
.seg button { border: 0; border-radius: 0; padding: 4px 9px; font-size: 11px; color: var(--ink-3); }
.seg button.on { background: var(--ink); color: var(--paper); }
.author { cursor: pointer; } .author:hover { text-decoration: underline; }
.alert { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 13px; align-items: flex-start; }
.alert.unread { background: rgba(78, 143, 95, .08); }
.alert .kind { width: 22px; height: 22px; border: 1px solid var(--rule-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.prof-head { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--moss); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; flex: none; }
.prof-bio { font-size: 13px; line-height: 1.45; margin: 4px 0 8px; }
.prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 10px 0; }
.prof-stats div { background: var(--paper); padding: 6px 8px; text-align: center; }
.prof-stats b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.prof-stats span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prof-cell canvas { width: 100%; aspect-ratio: 26 / 15; display: block; background: var(--thumb-bg); border: 1px solid var(--rule); }

/* toasts */
#toasts { position: fixed; left: 12px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 30; width: 340px; pointer-events: none; }
.toast { background: var(--paper); color: var(--ink); padding: 9px 12px; font-size: 13px; line-height: 1.35; border: 1px solid var(--ink); border-left: 5px solid var(--ink-3); animation: pop .2s var(--ease-out-3); pointer-events: auto; box-shadow: var(--shadow-3); }
.toast.breed { border-left-color: #a03f6a; } .toast.hatch { border-left-color: var(--amber); } .toast.warn { border-left-color: var(--brick); } .toast.death { border-left-color: #000; } .toast.buy, .toast.sell, .toast.ok { border-left-color: var(--moss); } .toast.ach { border-left-color: #c99b3f; background: #fff7df; } .toast.news { border-left-color: var(--sky); opacity: .9; } .toast.social { border-left-color: #6c8fbf; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* modal */
.modal { background: var(--paper); background-image: var(--grain); padding: 26px 30px; width: min(900px, 94vw); max-height: 90vh; overflow: auto; border: 1px solid var(--ink); box-shadow: var(--shadow-6); }
.modal h2 { font-size: 26px; margin-bottom: 4px; }
.modal.narrow { width: min(460px, 94vw); }
.dialog { display: flex; flex-direction: column; gap: 12px; }
.dlg-body { margin: 0; line-height: 1.5; color: var(--ink-2); font-size: 14px; }
.dlg-body b { color: var(--ink); font-family: var(--mono); }
.eggs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.hatch-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .hatch-sort .lbl { margin: 0 4px 0 0; }
.egg { background: linear-gradient(#cdbfa3, #b8a889); height: 160px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; border: 1px solid #9c8f74; }
.egg .shell { width: 78px; height: 96px; background: radial-gradient(circle at 35% 30%, #fffdf6, #e9e2cf 70%, #d6cdb5); border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; box-shadow: inset -6px -8px 14px rgba(120, 100, 70, .25), 0 6px 10px rgba(0, 0, 0, .2); transition: transform .2s; }
.egg:hover .shell { transform: scale(1.05) rotate(-3deg); }
.egg.slug .shell { background: radial-gradient(circle at 35% 30%, #f3e6b3, #d9c26a 70%, #b59a3e); transform: scale(.8); opacity: .8; }
.egg.dead .shell { background: radial-gradient(circle at 35% 30%, #b8ad98, #8e836b 70%, #6c634f); }
.egg.open { background: #fff; cursor: default; flex-direction: column; gap: 4px; padding: 6px; }
.egg.open canvas { width: 100%; aspect-ratio: 52 / 30; background: var(--thumb-bg); }
.egg.open .n { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.2; }
.egg.open .v { font-size: 11px; color: var(--ink-2); font-family: var(--mono); }
.egg.open .egg-from { max-width: 100%; font-size: 10.5px; color: var(--ink-3); text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* which pairing, when several clutches are cut together (#487) */
.egg.open .keep { display: inline-flex; align-items: center; gap: 3px; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink-2); cursor: pointer; }
.tubpick { display: grid; gap: 4px; margin: 6px 0 14px; }
.tubpick button { padding: 6px; font-size: 12px; border-color: var(--rule-2); }
.tubpick button.occ { background: var(--paper-2); color: var(--ink-2); }
.tubpick button.here { outline: 2px solid var(--moss); }
.help p { line-height: 1.55; font-size: 14px; }
.help h3 { margin: 16px 0 4px; font-size: 17px; }
.news { font-size: 12.5px; color: var(--ink-2); padding: 5px 0; border-bottom: 1px dotted var(--rule-2); }


/* trades + lots */
.presets { display: flex; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; }
#modal2 { z-index: 60; }
.callout { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--amber); border-left-width: 5px; background: rgba(213, 154, 63, .08); font-size: 13px; line-height: 1.4; }
.callout button { flex: none; }
.selbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; border: 1px dashed var(--rule-2); }
.selbar .rule { flex: 1; }
.selcell { width: 30px; }
.specimen.lot { position: relative; }
.lotbadge { position: absolute; top: 8px; left: 8px; background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; }
.lotlist { font-size: 13px; line-height: 1.5; max-height: 110px; overflow: auto; }
.trade .thead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.tcols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.tcols.builder { grid-template-columns: 1fr 1fr; }
.tcols .arrow { font-size: 22px; color: var(--ink-3); padding-top: 26px; }
.tside { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted var(--rule); font-size: 13px; }
.tside canvas { width: 64px; height: 37px; border: 1px solid var(--rule); background: var(--thumb-bg); flex: none; }
.tside.cash { font-family: var(--mono); color: var(--moss); }
.tb-head { margin-bottom: 8px; }
.tpicks { max-height: 300px; overflow: auto; border: 1px solid var(--rule); padding: 4px 8px; margin-bottom: 8px; }
.tpick { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--rule); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); cursor: pointer; }
.tpick.on { background: rgba(63, 141, 92, .08); }
.tpick canvas { width: 64px; height: 37px; border: 1px solid var(--rule); background: var(--thumb-bg); flex: none; }
.tb-q { margin: 2px 0 6px; } .tb-q .bsearch { margin: 0; } /* the trade builder's search per side (#795) */
.tb-hid { margin: -2px 2px 6px; font-size: 12px; } .tb-hid .linkish { color: var(--moss-2); }
.tb-none { padding: 10px 2px; }

/* ===================== readability + custom controls pass ===================== */
:root { font-size: 15px; }
body { line-height: 1.45; }
button { font-size: 14px; min-height: 34px; padding: 6px 14px; border-radius: 4px; }
button.small { min-height: 28px; padding: 3px 10px; font-size: 13px; }
button.icon { min-height: 0; }
button:focus-visible, input:focus-visible, textarea:focus-visible, .csel-btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
input, textarea { font-size: 15px; padding: 9px 12px; border-radius: 4px; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea { resize: vertical; min-height: 72px; }
label { font-size: 11.5px; gap: 5px; }

/* checkboxes */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--rule-2); border-radius: 3px; background: #fff; display: inline-grid; place-content: center; padding: 0; margin: 0 6px 0 0; vertical-align: -3px; cursor: pointer; }
input[type=checkbox]::before { content: ""; width: 9px; height: 9px; background: var(--moss); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform .1s var(--ease-out-2); }
input[type=checkbox]:checked { border-color: var(--moss); }
input[type=checkbox]:checked::before { transform: scale(1); }
:root[data-theme="dark"] input[type=checkbox] { background: #15130f; }

/* custom select */
.csel { position: relative; display: inline-block; width: 100%; }
.csel select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.csel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: #fff; border: 1px solid var(--rule-2); padding: 8px 12px; font-size: 15px; color: var(--ink); }
.csel-btn:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.csel-btn .chev { width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); flex: none; }
.csel.open .csel-btn { border-color: var(--ink); }
.csel-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--shadow-4); z-index: 60; }
.csel.open .csel-menu { display: block; }
.csel-opt { padding: 8px 12px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--rule); }
.csel-opt:last-child { border-bottom: 0; }
.csel-opt:hover { background: var(--paper-2); }
.csel-opt.on { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .csel-btn { background: #15130f; }
:root[data-theme="dark"] .csel-btn:hover { background: #15130f; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--rule-2); border: 3px solid var(--paper); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* panels */
#panel { width: var(--panel-w, 720px); } /* --panel-w: the width dragged to on the grip (ui.js applyPanelWidth) */
.panel-head { padding: 20px 26px 14px; align-items: flex-start; }
.panel-head h2 { font-size: 28px; line-height: 1.1; }
.panel-head h2 small { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--ink-2); margin-top: 4px; letter-spacing: 0; }
.panel-body { padding: 18px 26px 40px; --ph-pside: 26px; }
.section { margin: 22px 0 10px; font-size: 11px; }
.tabs button { padding: 9px 14px; font-size: 14px; min-height: 0; }
table { font-size: 14px; }
th { font-size: 11px; padding: 8px 8px; position: sticky; top: -18px; background: var(--paper); z-index: 1; }
td { padding: 10px 8px; }
tr.row td:first-child b { font-size: 15px; }
.meta { font-size: 13px; }
.tag { font-size: 11.5px; padding: 2px 8px; }
.pill { font-size: 10.5px; line-height: 1.6; }
.specimen h4 { font-size: 17px; }
.specimen dl { font-size: 13px; }
.specimen .blurb { font-size: 13px; }
.specimen .body { padding: 12px 14px 14px; gap: 7px; }
.empty { font-size: 16px; padding: 36px 0; }

/* detail card */
#detail { width: 400px; padding: 16px 18px 18px; gap: 12px; }
#detail .name { font-size: 26px; }
#detail .morph { font-size: 14px; }
.stats b { font-size: 15px; }
.stats div { padding: 8px 10px; }
.actions { gap: 8px; }
#detail .actions button { flex: 1 1 45%; }

/* hud */
#hud { height: 60px; }
.cell { font-size: 15px; }
.navbtn { font-size: 15px; }
#hint { font-size: 14px; padding: 10px 18px; }

/* design / hold / visit bars */
#designbar, #holdbar, #visitbar, #walkbar { padding: 10px 14px; font-size: 14px; gap: 10px; }

/* toasts */
.toast { font-size: 14px; padding: 11px 14px; }

/* phone */
.phone-body { font-size: 14px; }
.phone h3 { font-size: 22px; }
.post .caption { font-size: 14px; }


/* dialog */
.dialog label { margin-top: 4px; }
.dlg-body { font-size: 15px; }
.eggs { gap: 14px; }
.egg { height: 170px; }
.egg.open .n { font-size: 13px; }

/* tip bar lives at the bottom, out of the way of panel headers */
#hint { top: auto; bottom: 18px; max-width: 720px; z-index: 17; }
body.bottombar #hint { display: none !important; }

/* collection thumbnails */
.thumbcell { width: 92px; padding-right: 2px; }
.thumbcell canvas { width: 88px; height: 51px; display: block; border: 1px solid var(--rule); background: var(--thumb-bg); border-radius: 3px; }
/* Collection: one toolbar row of filters that combine, a summary strip, compact or comfortable rows */
.coll-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.coll-tools #collFilter { flex: 1 1 auto; min-width: 0; width: auto; height: 32px; padding: 4px 10px; font-size: 13px; }
.coll-seg { flex: none; border-radius: 4px; overflow: hidden; }
.coll-seg button, .coll-density button { min-height: 30px; padding: 0 9px; font-size: 12.5px; color: var(--ink-2); background: transparent; white-space: nowrap; }
.coll-seg button + button, .coll-density button + button { border-left: 1px solid var(--rule-2); }
.coll-seg button.on, .coll-density button.on { background: var(--ink); color: var(--paper); }
.coll-seg button:hover:not(.on), .coll-density button:hover:not(.on) { background: var(--paper-2); color: var(--ink); }
.coll-tools .csel { width: auto; flex: none; }
.coll-tools .csel-btn { min-height: 32px; padding: 0 10px; gap: 8px; font-size: 12.5px; white-space: nowrap; }
.coll-tools .csel-menu { right: auto; min-width: 100%; }
.coll-more { position: relative; flex: none; }
.coll-morebtn { min-height: 32px; padding: 0 10px; font-size: 12.5px; border-color: var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.coll-morebtn.on { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.coll-menu { min-width: 230px; }
.coll-x { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.coll-x .chk { width: 12px; font-style: normal; color: var(--moss); }
.coll-x span { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.coll-x:hover .chk, .coll-x:hover span { color: var(--paper); }
.coll-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin-bottom: 6px; font-size: 12px; color: var(--ink-2); }
.coll-strip button { min-height: 0; font-size: 12px; background: transparent; border: 0; }
.cs-count { margin-right: 4px; }
.cs-count b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.cs-link { padding: 0 2px; color: var(--moss); text-decoration: underline; }
.cs-link:hover { background: transparent; color: var(--ink); }
.cs-item { padding: 3px 6px; border-radius: 3px; color: var(--ink-2); }
.cs-item:hover { background: var(--paper-2); color: var(--ink); }
.cs-item.warn { color: var(--amber); font-weight: 500; }
.cs-item.on, .cs-item.on:hover { background: var(--ink); color: var(--paper); }
.cs-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.coll-density { display: inline-flex; vertical-align: middle; flex: none; border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden; }
.coll-density button { width: 26px; min-height: 26px; padding: 0; display: grid; place-items: center; color: var(--ink-3); }
.coll-density button svg { width: 15px; height: 15px; }
.coll-density button.on { color: var(--paper); }
.coll-strip #selStart { border: 1px solid var(--ink); min-height: 26px; padding: 0 10px; }
table.coll { table-layout: fixed; }
table.coll th { padding: 6px 5px; }
table.coll td { padding: 6px 5px; }
table.coll .selcell { width: 30px; }
table.coll .thumbcell { width: 96px; }
table.coll th.num:nth-last-child(1) { width: 72px; }
table.coll .num { text-align: right; white-space: nowrap; }
table.coll th.num { text-align: right; }
table.coll th[data-sort="weight"] { width: 60px; }
table.coll .stage { width: 92px; }
table.coll .locc { width: 104px; }
table.coll .status { width: 172px; }
table.coll td.roles { white-space: nowrap; }
table.coll.dense td { height: 44px; padding-top: 3px; padding-bottom: 3px; }
table.coll.dense .thumbcell { width: 60px; }
table.coll.dense { font-size: 13px; }
table.coll.dense th[data-sort="weight"] { width: 54px; }
table.coll.dense .stage { width: 84px; }
table.coll.dense td.locc { white-space: nowrap; }
.an-line .sex { font-size: 11px; min-width: 16px; padding: 0 3px; margin-left: 0; }
.an-line b { font-size: 13.5px; }
table.coll.dense .thumbcell canvas { width: 54px; height: 31px; border-radius: 2px; }
table.coll.dense .locc { width: 54px; }
table.coll.dense td.stage { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
table.coll.dense td.num { font-size: 13px; }
table.coll.dense td.status { white-space: nowrap; overflow: hidden; }
.coll-sel { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
.coll-sel button.small { white-space: nowrap; min-height: 26px; padding: 2px 7px; font-size: 12px; }
.coll-sel .rule { display: none; }
.coll-sel #selDone { margin-left: auto; }
.coll-sel .meta { white-space: nowrap; }
table.coll.comfy { table-layout: auto; }
table.coll.comfy .stage, table.coll.comfy .locc, table.coll.comfy .status { width: auto; }
table.coll.comfy td.status { min-width: 120px; }
table.coll.comfy td.status .tag, table.coll.comfy td.status .st-info, table.coll.comfy td.status .st-ready { margin-bottom: 3px; }
.an-line { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; min-width: 0; }
.an-line b { flex: 0 0 auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.an-line .sex { flex: none; }
.an-line .pills { flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; margin: 0 0 0 3px; min-width: 0; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
table.coll td.status .tag { font-size: 11px; padding: 1px 5px; margin-right: 3px; }
.tag.more { border-style: dashed; }
.tag.plain { border-color: var(--rule-2); color: var(--ink-2); background: transparent; }
.st-ready, .st-info { display: inline-block; font-size: 12px; margin-right: 6px; }
.st-ready { color: var(--moss); font-weight: 500; }
.st-ready::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--moss); margin-right: 4px; vertical-align: 1px; }
.st-info { color: var(--ink-3); }
.role { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 2px; color: var(--ink-3); vertical-align: middle; }
.role.r-listed { color: var(--sky); } .role.r-plan { color: #a03f6a; } .role.r-boarding, .role.r-loan { color: var(--amber); }
/* Collection roles (#428): one colour per role, shared by the chips, the row badge and the animal card's control */
.rc-undecided, .rb-undecided { --rc: var(--ink-3); } .rc-breeder, .rb-breeder { --rc: #a03f6a; } .rc-growout, .rb-growout { --rc: var(--moss); }
.rc-sell, .rb-sell { --rc: var(--sky); } .rc-wholesale, .rb-wholesale { --rc: var(--amber); } .rc-proving, .rb-proving { --rc: #6b4fa0; } /* Proving (#775) */
/* Boarded (#662): someone else's animal, no role of yours. Quiet: grey, dotted, at the end of the row */
.rc-boarded, .rb-boarded { --rc: var(--ink-3); }
.coll-roles { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; font-size: 12.5px; color: var(--ink-2); background: transparent; border: 1px solid var(--rule-2); border-left: 3px solid var(--rc); border-radius: 4px; white-space: nowrap; }
.rchip span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.rchip:hover:not(.on) { background: var(--paper-2); color: var(--ink); }
.rchip.on { background: var(--rc); border-color: var(--rc); color: var(--paper); }
.rchip.on span { color: var(--paper); }
.rchip.rc-undecided { border-left-style: dashed; }
.rchip.rc-boarded { margin-left: 6px; border-left-width: 1px; border-left-style: dotted; color: var(--ink-3); }
.coll-whole { margin-left: auto; min-height: 26px; padding: 0 10px; font-size: 12px; }
.cs-item.cs-undecided { color: var(--ink); font-weight: 500; }
.rbadge { display: inline-block; margin-right: 4px; padding: 0 5px; font-size: 10.5px; line-height: 16px; border: 1px solid var(--rc); border-radius: 3px; color: var(--rc); vertical-align: middle; white-space: nowrap; }
.rbadge.rb-undecided { border-style: dashed; }
.rbadge.rb-boarded { border-style: dotted; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rbadge.due { background: var(--rc); color: var(--paper); }
table.coll .roles { width: 112px; }
.role-seg { display: flex; border-radius: 4px; overflow: hidden; }
.role-seg button { flex: 1 1 0; min-height: 30px; padding: 0 4px; font-size: 12px; color: var(--ink-2); background: transparent; white-space: nowrap; }
.role-seg button + button { border-left: 1px solid var(--rule-2); }
.role-seg button.on { background: var(--rc); color: var(--paper); }
.role-seg button:hover:not(.on):not(:disabled) { background: var(--paper-2); color: var(--ink); }
.role-seg button:disabled { opacity: .45; }
.role-seg .rs-undecided { --rc: var(--ink-3); } .role-seg .rs-breeder { --rc: #a03f6a; } .role-seg .rs-growout { --rc: var(--moss); } .role-seg .rs-sell { --rc: var(--sky); } .role-seg .rs-wholesale { --rc: var(--amber); } .role-seg .rs-proving { --rc: #6b4fa0; }
.dt-decide { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.dt-decide.due { color: var(--moss); }
.coll-help { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; border: 1px solid var(--rule-2); border-radius: 50%; font-size: 9.5px; line-height: 1; letter-spacing: 0; color: var(--ink-3); cursor: help; vertical-align: 1px; }
.coll-help:hover, .coll-help:focus { color: var(--ink); border-color: var(--ink); outline: none; }
.coll-legend { display: none; position: absolute; top: calc(100% + 6px); left: -8px; z-index: 5; gap: 5px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--shadow-3); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.coll-help:hover .coll-legend, .coll-help:focus .coll-legend { display: flex; }

.csel-btn, .csel-opt { text-transform: none; letter-spacing: 0; font-family: var(--sans); }

/* sex badges: bold and unmissable */
.sex { display: inline-block; font-weight: 800; font-size: 0.95em; line-height: 1.35; min-width: 1.5em; text-align: center; padding: 0 5px; border-radius: 10px; margin-left: 3px; vertical-align: 1px; }
.sex.M { color: #fff; background: #2f6f9f; } .sex.F { color: #fff; background: #b5457a; }
.egg.open .n .sex, .specimen h4 .sex, #detail .name .sex { font-size: 0.8em; }

.tpick { flex-direction: row; align-items: center; }
.tpick input[type=checkbox] { flex: none; }

/* header settings menu + name clamp */
#hud { grid-template-columns: auto auto 1fr; }
.hud-right { min-width: 0; }
.who { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-wrap { position: relative; }
#settingsBtn, #pauseBtn, #walkBtn { display: inline-flex; align-items: center; gap: 6px; }
#settingsBtn svg, #pauseBtn svg, #walkBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#pauseBtn svg { stroke-width: 2.4; } #pauseBtn.on svg { fill: currentColor; stroke-width: 1.4; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); box-shadow: var(--shadow-4); z-index: 40; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.menu-item { border: 0; border-radius: 3px; text-align: left; background: transparent; color: var(--ink); padding: 8px 10px; min-height: 0; }
.menu-item:hover { background: var(--ink); color: var(--paper); }
.menu-sep { height: 1px; background: var(--rule); margin: 4px 0; }
@media (max-width: 1280px) { #settingsBtn span, .who { display: none; } .ledger .cell { padding: 0 10px; } }

/* egg cards: labeled keep/list toggles */
.egg { height: auto; min-height: 170px; }
.egg.open { justify-content: flex-start; }
.eggacts { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.chip.tiny.share { border-color: var(--sky); color: var(--sky); } .chip.tiny.share:hover { background: var(--sky); color: #fff; }
.app-bar .chip.tiny { margin-right: 6px; }
.chip.tiny.on[data-act="growout"] { background: var(--moss); border-color: var(--moss); color: #fff; } /* the reveal's choices take their role's colour (#430) */
.chip.tiny.on[data-act="sell"] { background: var(--sky); border-color: var(--sky); color: #fff; }
.chip.tiny.on[data-act="wholesale"] { background: var(--amber); border-color: var(--amber); color: #1a1815; }
.chip.tiny:disabled { cursor: default; }
.hatch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
/* a Grow-out parent's one question (#428): keep as a breeder, or later */
.hatch-keep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px; background: var(--paper-2); border-left: 3px solid var(--moss); font-size: 14px; }
.hatch-keep > span { margin-right: auto; }
/* what the clutch showed about its Grow-out parents (#683): the bar for one, a collapsed digest for several */
.gd-ev { display: inline-block; margin: 2px 6px 0 0; padding: 1px 7px; border-radius: 9px; font-size: 12.5px; }
.gd-ev.proved { background: color-mix(in srgb, var(--moss) 18%, transparent); color: var(--moss); font-weight: 600; }
.gd-ev.failed { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--ink); font-weight: 600; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); }
.gd-ev.none { color: var(--ink-3); padding-left: 0; }
.gd-proj { display: inline-block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); } .gd-proj.lost { color: var(--brick); }
.gd-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gd-acts button.on[data-gdpick="breeder"] { background: var(--moss); border-color: var(--moss); color: #fff; }
.gd-acts button.on[data-gdpick="sell"] { background: var(--sky); border-color: var(--sky); color: #fff; }
.gd-acts button.on[data-gdpick="wholesale"] { background: var(--amber); border-color: var(--amber); color: #1a1815; }
.gd-acts button.on[data-gdpick="later"] { background: var(--paper-3); border-color: var(--ink-3); }
.gd-acts button.on[data-gdpick="proving"] { background: #6b4fa0; border-color: #6b4fa0; color: #fff; } :root[data-theme="dark"] .gd-acts button.on[data-gdpick="proving"] { background: #a995d8; border-color: #a995d8; color: #1a1815; } /* Proving reads selected like the rest (#991) */
.gd-acts .gd-off { opacity: .38; cursor: default; } /* Proving on a row with no possible het left: kept as a dimmed slot so the columns line up (#991) */
.gd-stamp { font-size: 12.5px; font-weight: 600; color: var(--moss); } .gd-stamp.later { color: var(--ink-3); } .gd-stamp.wholesale, .gd-stamp.sold { color: var(--amber); }
.gd-why { flex-basis: 100%; font-size: 12px; color: var(--brick); }
.hatch-keep.gd-one { border-left-color: var(--rule-2); } .hatch-keep.gd-one.k-proved { border-left-color: var(--moss); } .hatch-keep.gd-one.k-failed { border-left-color: var(--amber); }
.hatch-keep.gd-one .gd-txt { flex: 1 1 260px; }
.gdigest { margin-top: 10px; background: var(--paper-2); border-left: 3px solid var(--moss); }
.gd-head { display: flex; width: 100%; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: none; border: 0; text-align: left; font-size: 14px; cursor: pointer; min-height: 0; }
.gd-head .gd-line { font-weight: 600; margin-right: auto; } .gd-head .gd-dec { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.gd-body { padding: 0 12px 10px; }
.gd-bulk { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 8px; }
.gd-rows { max-height: 46vh; overflow: auto; }
.gd-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px dotted var(--rule); }
.gd-row canvas { width: 72px; height: 42px; border-radius: 4px; background: var(--thumb-bg); }
.gd-row.k-proved { background: color-mix(in srgb, var(--moss) 7%, transparent); } .gd-row.k-failed { background: color-mix(in srgb, var(--amber) 8%, transparent); }
.gd-row.done { opacity: .72; }
@supports (grid-template-columns: subgrid) { /* desktop digest: every row's answers share the list's columns, whatever their labels (#991) */
  .gdigest:not(.phone) .gd-rows { display: grid; grid-template-columns: 72px minmax(0, 1fr) repeat(5, max-content); column-gap: 6px; }
  .gdigest:not(.phone) .gd-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .gdigest:not(.phone) .gd-row .gd-txt { padding: 0 4px; }
  .gdigest:not(.phone) .gd-acts { grid-column: 3 / -1; display: grid; grid-template-columns: subgrid; row-gap: 4px; }
  .gdigest:not(.phone) .gd-acts > .gd-why, .gdigest:not(.phone) .gd-acts > .gd-stamp { grid-column: 1 / -1; }
}
.gd-row:focus-visible, .hatch-keep.gd-one:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.dt-evidence { margin: 6px 0 0; padding: 0 0 0 16px; font-size: 12.5px; color: var(--ink-2); } .dt-evidence li { margin: 2px 0; }
/* the phone: the digest's rows open as a sheet over the cutting screen */
.gd-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 78vh; display: flex; flex-direction: column; padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--gp, var(--paper)); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
.gd-sheet .gd-rows { max-height: none; flex: 1; overflow: auto; }
.gd-sheet-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; } .gd-sheet-head b { font-size: 17px; }
.gdigest.phone .gd-row { grid-template-columns: 64px minmax(0, 1fr); } .gdigest.phone .gd-row canvas { width: 64px; height: 38px; }
.gdigest.phone .gd-row .gd-acts { grid-column: 1 / -1; } .gdigest.phone .gd-acts button { flex: 1 1 0; min-width: 0; }
.hatch-bulk { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; margin: 4px 0 8px; background: var(--paper-2); border: 1px dashed var(--rule-2); }
.bulk-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bulk-title b { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.bulk-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-btns button:disabled { opacity: .4; cursor: default; }
.hatch-price { display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.hatch-price input { width: 64px; padding: 3px 6px; font-family: var(--mono); }
.hatch-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; z-index: 3; bottom: -26px; margin: 0 -30px -26px; padding: 12px 30px 16px; background: var(--paper); background-image: var(--grain); border-top: 1px solid var(--ink); }
.hatch-foot .meta { font-size: 13px; line-height: 1.4; } .hatch-foot .meta b { color: var(--ink); font-family: var(--mono); }
.hatch-foot .actions { margin: 0; flex: none; }
.eggs.tray .egg { isolation: isolate; } /* a card's badges (×N, ♂·♀, the by-hand pin, Best of clutch) stack inside it, under the sticky footer (#990) */
.egg.open .stamp { position: absolute; top: 8px; right: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 6px; border: 1.5px solid currentColor; transform: rotate(-8deg); background: rgba(255, 255, 255, .7); }
:root[data-theme="dark"] .egg.open .stamp { background: rgba(0, 0, 0, .4); }
.stamp.kept { color: var(--moss); } .stamp.listed { color: var(--sky); } .stamp.sold { color: var(--brick); }
.stamp.queued { color: var(--sky); } .stamp.wholesale { color: var(--amber); }
/* a card set by hand (#811): the bulk buttons leave it as it is */
.egg.open .hand-pin { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 0 6px; font-family: var(--mono); font-size: 9.5px; line-height: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-3); border-radius: 8px; pointer-events: none; }
/* hatch triage rules (#430): the rule that pre-sorted a card, the project line, the rules editor */
.egg.open .egg-rule { display: flex; gap: 4px; justify-content: center; align-items: center; flex-wrap: wrap; }
.rule-chip { --rc: var(--ink-3); display: inline-block; padding: 0 6px; font-family: var(--mono); font-size: 10px; line-height: 16px; letter-spacing: .02em; color: var(--rc); border: 1px solid var(--rc); border-radius: 8px; background: color-mix(in srgb, var(--rc) 9%, transparent); white-space: nowrap; }
.rule-chip.rc-growout { --rc: var(--moss); } .rule-chip.rc-sell { --rc: var(--sky); } .rule-chip.rc-wholesale { --rc: var(--amber); }
.rule-chip.overridden { opacity: .45; text-decoration: line-through; }
.rule-chip.set-before { --rc: var(--ink-2); }
.proj-line { font-size: 10px; color: var(--ink-3); font-style: italic; }
.proj-lines { display: flex; flex-direction: column; align-items: center; flex-basis: 100%; min-width: 0; }
.proj-lines .proj-line { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hatch-bulk { position: relative; }
.hatch-rules-pop { position: absolute; z-index: 5; right: 10px; bottom: 48px; width: min(380px, calc(100% - 20px)); max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.hatch-rules-pop .actions { justify-content: flex-end; margin: 0; }
.tri-fields { display: flex; flex-direction: column; gap: 10px; }
.tri-f { display: flex; flex-direction: column; gap: 3px; font-size: 13px; text-transform: none; letter-spacing: normal; font-family: var(--sans); color: var(--ink); }
.tri-f span { font-weight: 500; } .tri-f small { color: var(--ink-3); font-size: 11.5px; line-height: 1.35; text-transform: none; letter-spacing: normal; }
.tri-f input { width: 140px; font-family: var(--mono); }
.tri-err { color: var(--brick); font-size: 12px; min-height: 0; } .tri-err:empty { display: none; }
.set-card .tri-fields { padding: 12px 2px 4px; }
.tri-save { display: flex; align-items: center; gap: 10px; padding: 8px 2px 4px; }
.stamp.planned { color: var(--moss); } .stamp.busy { color: var(--ink-2); } .stamp.traded, .stamp.pick, .stamp.gone { color: var(--ink-2); }
.egg.open.gone { opacity: .6; justify-content: center; } /* left the room since the first cut (#342) */
.egg.open.gone .stamp { position: static; align-self: center; margin-top: 6px; }
.egg.open.decided canvas { opacity: .55; }
body.mobile .hatch-foot { margin: 0 -18px calc(-20px - env(safe-area-inset-bottom)); padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); bottom: calc(-20px - env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; }
body.mobile .hatch-foot .actions { display: flex; } body.mobile .hatch-foot .actions button { flex: 1; }
body.mobile .hatch-price { margin-left: 0; }
.chip.tiny { padding: 2px 9px; font-size: 11px; min-height: 0; }
.chip.tiny.on[data-keep] { background: var(--moss); border-color: var(--moss); color: #fff; }
.chip.tiny.on[data-list] { background: var(--sky); border-color: var(--sky); color: #fff; }
.chip.tiny:disabled { opacity: .7; }

/* toasts live bottom-right, out of the way of the panel; slide left when the phone is open */
#toasts { left: auto; right: 12px; bottom: 14px; width: 320px; }
body.phone-open #toasts { right: 362px; }
body.detail-open #toasts { right: 424px; }
.toast { cursor: pointer; }

.roomname { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.roomname .meta { align-self: center; }
#dbAgain { border-color: var(--moss); color: var(--moss); }

/* ---- proving popup on the cutting screen ---- */
/* a long list scrolls inside the card and the button stays in reach (#938) */
.proof-pop { display: flex; flex-direction: column; align-items: flex-start; max-height: min(80%, 76vh); position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.85) rotate(-3deg); opacity: 0; width: min(440px, 88%); background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); box-shadow: var(--shadow-6); padding: 18px 22px 16px; z-index: 5; transition: transform .35s cubic-bezier(.2, .9, .3, 1.25), opacity .25s; }
.proof-pop.in { transform: translate(-50%, -50%) scale(1) rotate(-1.5deg); opacity: 1; }
.proof-pop .stamp-big { display: inline-block; font-family: var(--mono); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; padding: 4px 12px; border: 2.5px solid var(--moss); color: var(--moss); transform: rotate(-4deg); margin-bottom: 10px; }
.proof-pop.cleared .stamp-big, .proof-pop.unlikely .stamp-big { border-color: var(--brick); color: var(--brick); }
.proof-pop.mutation .stamp-big, .proof-pop.paradox .stamp-big { border-color: var(--amber); color: var(--amber); }
.proof-pop .stamp-big, .proof-pop > button { flex: none; }
.proof-pop ul { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.proof-pop li.proven { color: var(--moss); font-weight: 500; } .proof-pop li.cleared { color: var(--brick); } .proof-pop li.mutation, .proof-pop li.paradox { color: var(--amber); font-weight: 500; }
#modalBox { position: relative; }
body.mobile .proof-pop { position: fixed; top: 48%; width: 90vw; max-height: 82vh; max-height: 82dvh; }

/* ---- breeding board ---- */
.pair-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.pair-board .cross { align-self: center; }
.pcard { border: 1px solid var(--rule); padding: 10px; display: flex; flex-direction: column; gap: 5px; background: var(--paper-2); min-width: 0; }
.pcard canvas { width: 100%; aspect-ratio: 52 / 30; display: block; border: 1px solid var(--rule); background: var(--thumb-bg); cursor: pointer; }
.pcard .nm { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.15; }
.pcard.empty { align-items: center; justify-content: center; text-align: center; border-style: dashed; min-height: 240px; cursor: pointer; gap: 8px; }
.pcard.empty:hover { border-color: var(--ink); }
.pc-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.ev { display: flex; gap: 24px; margin: 12px 0 8px; flex-wrap: wrap; }
.ev > div { display: flex; flex-direction: column; } .ev b { font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1.1; margin: 2px 0; }
.oddstrip { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.oddchip { position: relative; overflow: hidden; border: 1px solid var(--rule-2); padding: 5px 9px 7px; font-size: 12px; display: flex; flex-direction: column; gap: 1px; min-width: 120px; max-width: 200px; }
.oddchip b { font-family: var(--mono); font-size: 14px; } .oddchip span { line-height: 1.25; }
.oddchip i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--moss); }
.pairing { display: grid; grid-template-columns: 96px 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.pairing canvas { width: 96px; height: 55px; border: 1px solid var(--rule); background: var(--thumb-bg); cursor: pointer; }
.pairing-blank { width: 96px; height: 55px; border: 1px dashed var(--rule-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.section #bIntroAll { order: 2; }
/* Standing plans (#1042): a card a male, a row a female. Names take at most two lines (an unnamed animal's morph without
   its het tail, cut with an ellipsis: the end of a long morph is what tells two animals apart); her status is a chip (the grams she still needs fill it as a bar); a card folds. */
.sp-sec { display: flex; align-items: center; gap: 8px; } .sp-sec .sp-all { margin-left: auto; font: 500 12px var(--sans, system-ui); letter-spacing: 0; text-transform: none; }
.sp-list { display: grid; gap: 10px; }
.sp-card { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; }
.sp-card:not(.shut) .sp-head { border-bottom: 1px solid var(--rule); }
.sp-who, body.mobile button.sp-who { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
.sp-who:hover .sp-name { text-decoration: underline; text-underline-offset: 3px; }
.sp-pic { flex: none; width: 52px; height: 30px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sp-pic.big { width: 76px; height: 44px; border-radius: 8px; } .sp-pic canvas { display: block; width: 100%; height: 100%; }
.sp-name { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 600; line-height: 1.28; color: var(--ink); }
.sp-head .sp-name { font-family: var(--serif); font-size: 15.5px; line-height: 1.22; }
.sp-who .sex { flex: none; }
.sp-htxt { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sp-hname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font: 400 12.5px/1.2 var(--sans, system-ui); color: var(--ink-2); }
.sp-pips { display: inline-flex; gap: 3px; } .sp-pips i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); } .sp-pips i.on { background: #6aa7e8; }
.sp-count b { font-family: var(--mono); font-weight: 600; color: var(--ink); } .sp-his { color: var(--amber); }
.sp-ready { padding: 4px 10px; border-radius: 999px; background: var(--moss); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sp-fold, body.mobile button.sp-fold { display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 8px; background: none; box-shadow: none; color: var(--ink-2); cursor: pointer; }
.sp-fold:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sp-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; } .sp-card:not(.shut) .sp-chev { transform: rotate(180deg); }
.sp-rows { background: var(--paper); } .sp-rows[hidden] { display: none; }
.sp-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 104px auto; align-items: center; gap: 12px; min-height: 48px; padding: 7px 8px 7px 10px; }
.sp-row + .sp-row { border-top: 1px dashed var(--rule); } .sp-row.ready { box-shadow: inset 3px 0 0 var(--moss); background: color-mix(in srgb, var(--moss) 7%, transparent); }
.sp-cell { display: flex; align-items: center; gap: 6px; min-width: 0; } .sp-cell .sp-who { flex: 0 1 auto; } .sp-cell .tag { flex: none; }
.sp-chip { position: relative; justify-self: start; display: inline-flex; align-items: center; max-width: 100%; min-height: 24px; padding: 3px 10px; border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sp-chip.ready { background: var(--moss); color: #fff; font-weight: 600; } .sp-chip.wait { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); } .sp-chip.turn { font-style: italic; }
.sp-chip.grow { width: 100%; max-width: 150px; justify-content: center; color: var(--ink); } .sp-chip.grow i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, #6aa7e8 42%, transparent); } .sp-chip.grow span { position: relative; }
.sp-ev { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .sp-ev b { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--moss); } .sp-ev small { font-size: 10.5px; color: var(--ink-3); }
.sp-x, body.mobile button.sp-x { min-height: 0; margin: 0; padding: 4px 8px; border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--ink-3); font: 500 12px var(--sans, system-ui); cursor: pointer; } .sp-x:hover { color: var(--brick); background: color-mix(in srgb, var(--brick) 10%, transparent); }
body.mobile .sp-head { padding: 10px; gap: 8px; } body.mobile .sp-pic.big { width: 64px; height: 37px; align-self: flex-start; } body.mobile .sp-head .sp-name { font-size: 15px; } body.mobile .sp-ready { align-self: start; margin-top: 2px; } body.mobile .sp-fold { align-self: start; }
body.mobile .sp-sec button.sp-all { min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.mobile .sp-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "who who x" "chip ev ev"; gap: 6px 10px; padding: 9px 10px; } body.mobile .sp-row .sp-cell { grid-area: who; } body.mobile .sp-row .sp-x { grid-area: x; padding: 6px 8px; }
body.mobile .sp-row .sp-chip { grid-area: chip; } body.mobile .sp-row .sp-ev { grid-area: ev; flex-direction: row; align-items: baseline; gap: 5px; justify-self: end; } body.mobile .sp-chip.grow { max-width: 180px; }
.steps { display: flex; gap: 4px; align-items: center; font-size: 11.5px; margin: 5px 0 3px; flex-wrap: wrap; }
.steps i { color: var(--ink-3); font-style: normal; }
.step { padding: 2px 9px; border: 1px solid var(--rule-2); border-radius: 12px; color: var(--ink-3); white-space: nowrap; }
.step.on { background: var(--moss); border-color: var(--moss); color: #fff; } .step.done { border-color: var(--moss); color: var(--moss); }
/* Season board (#17) */
.sb-tools { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.sb-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 0; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 15px; background: transparent; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.sb-chip span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sb-chip:hover, :root[data-theme="dark"] .sb-chip:hover { background: var(--paper-2); color: var(--ink); }
.sb-chip.on, .sb-chip.on:hover, :root[data-theme="dark"] .sb-chip.on:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .sb-chip.on span { color: var(--paper-3); }
:root[data-theme="dark"] .sb-chip.on span { color: var(--ink-3); }
/* the Earn panel's alert switches (#1289), on both clients */
.earn-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; } .earn-alerts > .meta { margin-right: 4px; }
.earn-hint { margin: -4px 0 10px; }
.sb-chip:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; }
.sb-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-height: 30px; }
.sb-count { font-size: 12.5px; color: var(--ink-2); }
.sb-ctls { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
/* Clear all plans keeps its place with no plans (#1406): assigning the first plan no longer wraps the bar and moves the list */
.sb-bar .sb-noplans { visibility: hidden; }
.sb-list { border-top: 1px solid var(--ink); container-type: inline-size; }
.sb-head, .sb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(130px, 190px) 96px; gap: 12px; align-items: center; }
.sb-head { padding: 6px 8px; border-bottom: 1px solid var(--rule); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .sb-head span:last-child { text-align: right; }
.sb-head-pics { width: 193px; }
.sb-row { padding: 8px; border-bottom: 1px solid var(--rule); cursor: pointer; } .sb-row:hover { background: var(--paper-2); }
/* 300 rows (#20): rows far off screen skip layout and paint until scrolled near; `auto` remembers each row's real height */
.sb-row { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.sb-pics { display: flex; align-items: center; gap: 4px; }
.sb-pics canvas, .sb-slot { flex: none; width: 88px; height: 52px; border-radius: 3px; }
.sb-pics canvas { border: 1px solid var(--rule); background: var(--thumb-bg); }
.sb-pics canvas[data-sbopen]:hover { border-color: var(--ink-3); }
.sb-pics i { width: 9px; text-align: center; font-style: normal; font-size: 12px; color: var(--ink-3); }
.sb-slot { border: 1px dashed var(--rule); }
/* the Once tag under her male stays a small pill: the column would stretch it full width, like a text box (#1406) */
.sb-m-name > .tag { align-self: flex-start; }
.sb-who { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; } .sb-male, .sb-end { min-width: 0; }
.sb-name, .sb-m-name { min-width: 0; max-width: 100%; display: flex; flex-direction: column; } .sb-name > *, .sb-m-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-name b { font-size: 14px; font-weight: 600; } .sb-name .meta, .sb-m-name .meta { font-size: 11.5px; }
.sb-state { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .sb-state .tag { margin: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } /* a long chip wraps inside the Female column instead of running under the Male one */ .sb-state .meta { font-size: 11.5px; }
.sb-male { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .sb-male > button { align-self: flex-start; }
.sb-male .sb-assign { border-color: var(--moss); color: var(--moss); font-weight: 600; padding: 6px 12px; }
.sb-male .sb-assign:hover, :root[data-theme="dark"] .sb-male .sb-assign:hover { background: var(--moss); color: #fff; }
.sb-male .sb-change { padding: 0; min-height: 0; font-size: 12px; }
.sb-end { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .sb-end .evtag { font-size: 14px; }
/* narrow panel: smaller pictures, then the male and the value drop under her */
@container (max-width: 600px) {
  .sb-pics canvas, .sb-slot { width: 64px; height: 38px; } .sb-head-pics { width: 145px; }
  .sb-head, .sb-row { grid-template-columns: auto minmax(0, 1fr) minmax(110px, 150px) 84px; gap: 10px; }
}
@container (max-width: 460px) {
  .sb-head { display: none; }
  .sb-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pics who who" "pics male end"; row-gap: 6px; }
  .sb-pics { grid-area: pics; align-self: start; } .sb-who { grid-area: who; } .sb-male { grid-area: male; } .sb-end { grid-area: end; }
}
.mp-tools { display: flex; gap: 8px; align-items: center; } .mp-tools .bsearch { flex: 1; min-width: 0; margin: 0; } .mp-tools .chip { flex: none; }
.mp-list { display: flex; flex-direction: column; max-height: 62vh; overflow: auto; margin-top: 10px; border-top: 1px solid var(--rule); }
/* rows never shrink to fit the list (they used to crush together and overlap), and hover stays readable in both themes */
.mp-row, :root[data-theme="dark"] .mp-row { flex: none; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 9px 10px; min-height: 0; background: transparent; color: var(--ink); font-weight: 400; }
.mp-row:hover:not(:disabled), :root[data-theme="dark"] .mp-row:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.mp-row.on { box-shadow: inset 3px 0 0 var(--moss); cursor: default; } .mp-row.on:hover, :root[data-theme="dark"] .mp-row.on:hover { background: transparent; }
.mp-row:disabled { opacity: .45; } .mp-row:disabled:hover, :root[data-theme="dark"] .mp-row:disabled:hover { background: transparent; color: var(--ink); }
.mp-row .mp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-row .mp-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; line-height: 1.3; } .mp-row .mp-l1 b { font-weight: 600; }
.mp-row .mp-l1 .tag { margin: 0; font-size: 10.5px; padding: 1px 6px; white-space: nowrap; }
.mp-row .mp-l2 { font-size: 11.5px; }
.mp-load.warn { color: var(--amber); font-weight: 600; } /* near the plan cap (#804) */
.mp-row .evtag { flex: none; min-width: 76px; text-align: right; font-size: 14px; }
/* Pair now on a ready male's card (#1418): the card makes him her plan, the button pairs them now. It sits inside the
   card under the male's text (a sibling over it: a button can't hold a button), styled in breeding.css like the board's pills. */
.mp-item { position: relative; flex: none; }
.mp-item.can-pair > .mp-row, :root[data-theme="dark"] .mp-item.can-pair > .mp-row { padding-bottom: 46px; }
.mp-item > .mp-pairnow { position: absolute; left: 120px; bottom: 9px; } /* under the text: the value keeps its x on every row (#1418) */
.sb-end .sb-pbest { white-space: nowrap; } .sb-pairing { white-space: nowrap; }
.mp-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.coming { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 2fr auto; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 13px; }
.coming .prog { display: flex; align-items: center; gap: 8px; font-size: 12px; } .coming .prog .bar { flex: 1; margin: 0; } .coming .prog .num { min-width: 52px; text-align: right; }
.coming .why { white-space: nowrap; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: 62vh; overflow: auto; margin-top: 10px; padding: 2px; }
.pick-item { border: 1px solid var(--rule); padding: 6px; text-align: left; display: flex; flex-direction: column; gap: 3px; min-height: 0; background: var(--paper-2); }
.pick-item:hover, :root[data-theme="dark"] .pick-item:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); } .pick-item.on { box-shadow: inset 0 0 0 2px var(--moss); }
.pick-item canvas { width: 100%; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); }
.pick-item .genes { margin-top: 2px; } .evtag { color: var(--moss); font-family: var(--mono); font-weight: 500; }

.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: default; }
.menu-row:hover { background: transparent; }
.menu-row .seg button { padding: 3px 9px; font-size: 12px; }

.disc { display: flex; flex-direction: column; }
.disc-row { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.disc-row > b { font-family: var(--serif); font-size: 15px; color: var(--amber); }
.disc-row span { color: var(--ink-2); font-size: 12.5px; }
.disc-row.unknown > b { color: var(--ink-3); font-family: var(--sans); font-size: 13px; }

/* ---- pause ---- */
#pausedBar { position: fixed; left: 0; right: 0; z-index: 17; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 6px 14px; font-size: 13px; background: var(--sky); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
#pausedBar button { border-color: #fff; color: #fff; } #pausedBar button:hover { background: #fff; color: var(--sky); }
#siteBtn.on { background: var(--amber); border-color: var(--amber); color: #fff; }
#pauseBtn.on { background: var(--sky); border-color: var(--sky); color: #fff; }
.rodstat { margin: 10px 0 4px; } .rodstat .bar { margin: 4px 0; } .rodstat .bar i.good { background: var(--moss); } .rodstat .bar i.warn { background: var(--amber); } .rodstat .bar i.bad { background: var(--brick); }
.specimen.trade.past { opacity: .85; } .specimen.trade.past.declined { opacity: .6; }
.specimen.hired { box-shadow: inset 0 0 0 2px var(--moss); }
.bsearch { width: 100%; margin: 4px 0 6px; }

/* ---- cash warning bar ---- */
#cashWarn { position: fixed; left: 0; right: 0; z-index: 17; text-align: center; padding: 7px 14px; font-size: 13px; font-weight: 500; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
#cashWarn.amber { background: var(--amber); }
#cashWarn.red { background: var(--brick); animation: cashpulse 1.6s ease-in-out infinite; }
@keyframes cashpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
#cashWarn:hover { filter: brightness(1.1); }

/* ---- loading card ---- */
#loader { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); box-shadow: var(--shadow-6); z-index: 46; font-family: var(--serif); font-size: 17px; }
#loader .spin { width: 20px; height: 20px; border: 2.5px solid var(--rule-2); border-top-color: var(--moss); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- push banner ---- */
#push { position: fixed; top: 68px; left: 50%; transform: translate(-50%, -140%); width: min(420px, 92vw); display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow-6); z-index: 40; cursor: pointer; transition: transform .35s cubic-bezier(.2, .9, .3, 1.1), opacity .3s; opacity: 0; }
#push.in { transform: translate(-50%, 0); opacity: 1; }
#push.out { transform: translate(-50%, -140%); opacity: 0; }
#push .push-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--moss); display: flex; align-items: center; justify-content: center; flex: none; }
#push .push-ico svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#push .push-text { flex: 1; font-size: 13px; line-height: 1.35; min-width: 0; }
#push .push-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
#push canvas { width: 92px; height: 53px; flex: none; border-radius: 8px; border: 1px solid var(--rule); background: var(--thumb-bg); }
#phoneBtn.buzz { animation: buzz .6s ease; }
@keyframes buzz { 0%, 100% { transform: none; } 15% { transform: translateX(-3px) rotate(-3deg); } 30% { transform: translateX(3px) rotate(3deg); } 45% { transform: translateX(-3px) rotate(-2deg); } 60% { transform: translateX(3px) rotate(2deg); } 75% { transform: translateX(-2px); } }

/* ---- sales ledger ---- */
.inq .quote { font-family: var(--serif); font-style: italic; color: var(--ink-2); margin: 6px 0 2px; line-height: 1.4; }
.specimen.wide { grid-column: 1 / -1; }
.specimen.inq.wide + .specimen.inq.wide { margin-top: 14px; } /* wanted ads stack outside a grid, so they need their own gap */
.orow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.srow { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--rule); }
.srow.players { background: rgba(47, 93, 58, .08); border-left: 4px solid var(--moss); }
.srow.wholesale { opacity: .8; }
.srow canvas { width: 104px; height: 60px; border: 1px solid var(--rule); background: var(--thumb-bg); }
.srow .body { min-width: 0; }
.srow .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .m { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .sbuyer { text-align: right; white-space: nowrap; }
.srow .sbuyer .num { font-size: 16px; }
.ledger { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font: 500 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--ink); }
.ledger td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; font-size: 13.5px; }
.ledger th.num, .ledger td.num { text-align: right; }
.lrow { display: flex; gap: 10px; align-items: center; }
.lrow canvas { width: 104px; height: 60px; flex: none; border: 1px solid var(--rule); background: var(--thumb-bg); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { border-top: 2px solid var(--ink); padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.stat b { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cols3 table { width: 100%; border-collapse: collapse; } .cols3 td { padding: 5px 4px; border-bottom: 1px solid var(--rule); font-size: 13px; }

/* ---- front page ---------------------------------------------------------- */
#auth.landing { position: fixed; inset: 0; overflow-y: auto; background: var(--paper); background-image: var(--grain); z-index: 50; color: var(--ink); scrollbar-gutter: stable; }
.land { max-width: 1240px; margin: 0 auto; padding: 22px 48px 64px 56px; position: relative; }
.land::before { content: ''; position: absolute; top: 0; bottom: 0; left: 34px; width: 1px; background: rgba(139, 58, 43, .35); }
.land-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.brandline { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brandline .rule { width: 40px; height: 1px; background: var(--ink); flex: none; }
.land-links { display: flex; gap: 18px; font-size: 13px; flex: none; }
.land-links a, .land-foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.land-links a:hover, .land-foot a:hover { color: var(--ink); border-color: var(--ink); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; padding: 40px 0 28px; align-items: start; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 18px; font-variation-settings: "opsz" 144; }
.hero h1 em { font-style: italic; color: var(--moss); }
.hero .lede { font-size: 17px; max-width: 60ch; }
.live { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.live .lbl { flex: none; }
.live .lbl::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); margin-right: 7px; vertical-align: 1px; animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#fresh { margin-top: 14px; } /* the sign-in page strip only: a bare .fresh also caught Hatch story rings (#286) */
.fresh .fresh-row { display: flex; gap: 14px; margin-top: 6px; }
.fresh figure { margin: 0; width: 150px; }
.fresh canvas, .parent canvas, .degg.open canvas { width: 100%; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border: 1px solid var(--rule); }
.fresh figcaption { font-size: 12.5px; line-height: 1.3; margin-top: 5px; }
.fresh figcaption .meta { display: block; }

.demo { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--ink); }
.demo-head { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.parents { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.parent { margin: 0; }
.parent figcaption { margin-top: 7px; font-size: 14px; line-height: 1.3; }
.parent .pval { font-family: var(--mono); font-size: 11.5px; margin-top: 2px; }
.parent .chip { margin-top: 8px; }
.cross { font-family: var(--serif); font-size: 36px; color: var(--ink-3); font-style: italic; }
.dodds { margin: 14px 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.dodds b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.demo-act { display: flex; align-items: center; gap: 12px; }
.clutch { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.clutch .dcount { width: 100%; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px; }
.degg { width: 132px; min-height: 118px; background: linear-gradient(#cdbfa3, #b8a889); border: 1px solid #9c8f74; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; overflow: hidden; animation: drop .4s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.degg .shell { width: 54px; height: 68px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: radial-gradient(circle at 35% 30%, #fffdf6, #e9e2cf 70%, #d6cdb5); box-shadow: inset -5px -7px 12px rgba(120, 100, 70, .25), 0 5px 8px rgba(0, 0, 0, .2); animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.degg.slug .shell { transform: scale(.75); background: radial-gradient(circle at 35% 30%, #f3e6b3, #d9c26a 70%, #b59a3e); animation: none; opacity: .85; }
.degg.open { background: #fff; padding: 5px; gap: 3px; justify-content: flex-start; }
:root[data-theme="dark"] .degg.open { background: #15130f; }
.degg .n { font-size: 11px; font-weight: 500; text-align: center; line-height: 1.2; }
.degg .v { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.degg.jackpot { box-shadow: inset 0 0 0 3px var(--amber); }

.landing .auth-card { position: sticky; top: 24px; width: auto; padding: 26px 30px 22px; box-shadow: none; border: 1px solid var(--ink); border-top: 6px solid var(--moss); background: var(--paper-2); }
.landing .auth-card h3 { font-size: 24px; font-weight: 500; }
.landing .auth-card > .meta { margin: -6px 0 2px; line-height: 1.45; }

.season { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ink); }
.season-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.season h2 { font-size: 32px; font-weight: 400; }
.panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.panel { cursor: pointer; opacity: .5; transition: opacity .5s; }
.panel.on { opacity: 1; }
.panel svg { width: 100%; aspect-ratio: 240 / 170; display: block; color: var(--ink); overflow: visible; }
.panel svg :is(path, rect, ellipse, circle, line, polyline) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.panel.on svg :is(path, rect, ellipse, circle, line, polyline) { animation: ink 1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(var(--i, 0) * .14s); }
@keyframes ink { to { stroke-dashoffset: 0; } }
.panel svg text { opacity: 0; font: 500 11px var(--mono); fill: currentColor; }
.panel.on svg text { animation: fadein .5s forwards; animation-delay: calc(var(--i, 0) * .14s + .9s); }
@keyframes fadein { to { opacity: 1; } }
.panel .pull { transform: translateX(0); }
.panel.on .pull { animation: pull 1s 1.4s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes pull { to { transform: translateX(44px); } }
.panel .tag { opacity: 0; }
.panel.on .tag { animation: fadein .5s forwards; animation-delay: calc(var(--i, 0) * .5s + 1.8s); }
.panel .cap { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.panel .cap b { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink); display: block; margin-bottom: 3px; }
.panel .num { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); margin-right: 6px; float: left; line-height: 1.55; }
.panel.now .cap b { text-decoration: underline; text-decoration-color: var(--moss); text-underline-offset: 4px; }

.land-faq { margin-top: 56px; max-width: 760px; }
.land-faq h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0 0 12px; }
.land-faq details { border-top: 1px solid var(--rule); }
.land-faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.land-faq summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; font-size: 16px; font-weight: 500; position: relative; }
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 20px; color: var(--ink-3); transition: transform .2s; }
.land-faq details[open] summary::after { transform: rotate(45deg); }
.land-faq details p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; font-size: 15px; max-width: 680px; }
.land-foot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.land-foot p { margin: 0; }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .landing .auth-card { position: static; }
  .panels { grid-template-columns: 1fr 1fr; }
  .land { padding: 18px 22px 40px; }
  .land::before { display: none; }
  .land-foot { grid-template-columns: 1fr; }
  .land-top { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel svg :is(path, rect, ellipse, circle, line, polyline) { stroke-dashoffset: 0; animation: none !important; }
  .panel svg text, .panel .tag { opacity: 1; animation: none !important; }
  .degg .shell, .live .lbl::before { animation: none; }
}

#postCaption { width: 100%; }

/* ---- title screen (over the live showroom) ---- */
#auth.landing { background: transparent; }
#auth.landing.nogl { background: var(--paper); background-image: var(--grain); }
.title-screen { min-height: 100vh; display: flex; flex-direction: column; padding: 22px 48px 20px; color: #f3eee4; --ink: #f3eee4; --ink-2: #d8d0c0; --ink-3: #a89f8f; --rule: rgba(243, 238, 228, .22); --rule-2: rgba(243, 238, 228, .4); background: linear-gradient(to bottom, rgba(20, 18, 15, .62), rgba(20, 18, 15, .18) 45%, rgba(20, 18, 15, .78)); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.nogl .title-screen { background: linear-gradient(to bottom, #2b2723, #1c1a16); }
.ts-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ts-logo { display: flex; flex-direction: column; gap: 6px; }
.ts-brand { font-family: var(--serif); font-size: clamp(54px, 7.2vw, 104px); line-height: .92; letter-spacing: -.035em; font-weight: 600; font-variation-settings: "opsz" 144; }
.ts-brand i { font-style: italic; font-weight: 400; color: #8fc79c; }
.ts-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.title-screen .land-links a { color: var(--ink-2); border-color: var(--rule-2); text-shadow: none; }
.title-screen .land-links a:hover { color: #fff; border-color: #fff; }
.ts-mid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; padding: 30px 0 20px; }
.ts-tag { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--rule-2); border-radius: 3px; margin-bottom: 14px; background: rgba(20, 18, 15, .35); }
.ts-h1 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.2; max-width: 24ch; margin: 0 0 22px; }
.ts-board { max-width: 440px; padding: 12px 16px 6px; background: rgba(20, 18, 15, .45); border: 1px solid var(--rule); border-radius: 4px; backdrop-filter: blur(6px); text-shadow: none; }
.ts-board .lbl { margin-bottom: 6px; display: block; }
.ts-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.ts-row .rank { font-family: var(--mono); color: var(--ink-3); }
.ts-row .who { font-weight: 500; }
.ts-row .num { font-family: var(--mono); }
.ts-row .meta { grid-column: 2 / -1; font-size: 12px; }
.title-screen .fresh { margin-top: 18px; }
.title-screen .fresh figcaption { text-shadow: none; }
.title-screen .auth-card { position: static; background: #f3eee4; --paper: #f3eee4; --paper-2: #e9e2d4; --paper-3: #ddd4c2; --ink: #1e1a15; --ink-2: #5d564c; --ink-3: #8d8578; --rule: #cfc6b3; --rule-2: #b9ae98; color: var(--ink); text-shadow: none; border-color: #1e1a15; box-shadow: var(--shadow-6); }
.title-screen .auth-card input { background: #fff; color: #1e1a15; border-color: #b9ae98; }
.title-screen .auth-card .oauth-btns a { background: #fff; color: #1e1a15; }
.title-screen .auth-card .auth-tabs button { color: #8d8578; } .title-screen .auth-card .auth-tabs button.on { color: #1e1a15; box-shadow: inset 0 -2px 0 #1e1a15; }
.title-screen .auth-card button { color: #1e1a15; border-color: #1e1a15; } .title-screen .auth-card button.primary { color: #fff; }
.ts-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.title-screen .live { margin: 0; padding: 0; border: 0; }
.scroll-hint { color: var(--ink); text-decoration: none; font-family: var(--serif); font-style: italic; font-size: 16px; white-space: nowrap; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.land.below { background: var(--paper); background-image: var(--grain); max-width: none; padding: 40px max(48px, calc((100vw - 1240px) / 2 + 48px)) 64px; position: relative; }
.land.below::before { display: none; }
.land.below .demo { margin-top: 0; padding-top: 0; border-top: 0; }
.demo-head h2 { font-size: 32px; font-weight: 400; }
.demo-head { align-items: baseline; flex-wrap: wrap; }
button.big { font-size: 15px; padding: 10px 22px; }
@media (max-width: 1040px) {
  .title-screen { padding: 18px 22px; }
  .ts-mid { grid-template-columns: 1fr; gap: 28px; }
  .ts-bottom { flex-direction: column; align-items: flex-start; }
  .land.below { padding: 30px 22px 40px; }
}

#designbar { flex-wrap: nowrap; }
#designbar button { white-space: nowrap; }
.db-hint { max-width: 360px; white-space: normal; line-height: 1.3; }

.ig-tabs { bottom: 0; margin-top: auto; box-shadow: 0 -1px 0 var(--rule); }
.phone-body.home { padding-bottom: 8px; }

.ig-person { cursor: pointer; }
.ig-av { width: 32px; min-width: 32px; height: 32px; flex: 0 0 32px; }
.ig-av.sm { width: 24px; min-width: 24px; height: 24px; flex-basis: 24px; }
.ig-av.lg { width: 76px; min-width: 76px; height: 76px; flex-basis: 76px; }
.ig-person .tag { flex: none; }

.pair-cta { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 18px; margin: 12px 0 4px; font-size: 17px; box-shadow: 0 3px 0 rgba(0, 0, 0, .22); }
.pair-cta b { font-size: 18px; } .pair-cta span { font-size: 12.5px; font-weight: 400; opacity: .85; }
/* the pair ticket: sire and dam on two rows with their pictures, and a green "Pair them" stub */
/* Pair them while it is being paired (#1038): the ticket becomes a loading panel in the Pair button's green. The two
   animals float side by side on a soft glow, joined by the breeding rings; "Pairing...", the sire and the dam; and a
   gold loading bar that fills in a second and then shimmers until the server has answered. The page is redrawn while it shows,
   so every animation starts where it had got to (--pt-at). Only transforms and opacity move. */
.pair-ticket.pairing { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; min-height: 178px; padding: 20px 26px 20px 24px; border-color: var(--moss); background: linear-gradient(120deg, color-mix(in srgb, var(--moss) 72%, #0d1a10) 0%, var(--moss) 60%, color-mix(in srgb, var(--moss) 82%, #f2d27a) 100%); color: #fff; cursor: progress; isolation: isolate; }
.ptl-glow { position: absolute; left: 0; top: 50%; z-index: -1; width: 300px; height: 300px; margin: -150px 0 0 -40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 190, .5), rgba(255, 240, 190, .12) 55%, transparent 72%); animation: ptl-pulse 1.5s ease-in-out var(--pt-at, 0s) infinite; }
@keyframes ptl-pulse { 0%, 100% { opacity: .5; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.05); } }
.ptl-pics { display: flex; align-items: center; animation: ptl-float 1.8s ease-in-out var(--pt-at, 0s) infinite; }
@keyframes ptl-float { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
.ptl-pic { width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: var(--paper); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.ptl-pic canvas { display: block; width: 100%; height: 100%; }
.ptl-pic.m { animation: ptl-in-m .6s cubic-bezier(.2, .8, .3, 1.2) var(--pt-at, 0s) both; } .ptl-pic.f { animation: ptl-in-f .6s cubic-bezier(.2, .8, .3, 1.2) var(--pt-at, 0s) both; }
@keyframes ptl-in-m { from { transform: translateX(-16px); } to { transform: translateX(10px); } } @keyframes ptl-in-f { from { transform: translateX(16px); } to { transform: translateX(-10px); } }
.ptl-rings { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 -18px; flex: none; border-radius: 50%; background: #fff; color: var(--moss); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); animation: ptl-pop .45s cubic-bezier(.2, .9, .3, 1.5) calc(.35s + var(--pt-at, 0s)) both; }
.ptl-rings svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ptl-pop { from { transform: scale(0); } to { transform: scale(1); } }
.ptl-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ptl-txt b { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.ptl-txt b i { font-style: normal; } .ptl-txt b u { text-decoration: none; animation: ptl-dot 1.2s var(--pt-at, 0s) infinite both; } .ptl-txt b u:nth-child(2) { animation-delay: calc(.2s + var(--pt-at, 0s)); } .ptl-txt b u:nth-child(3) { animation-delay: calc(.4s + var(--pt-at, 0s)); }
@keyframes ptl-dot { 0%, 20% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }
.ptl-who { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 14.5px; font-weight: 600; }
.ptl-who em { flex: none; width: 32px; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.ptl-who > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ptl-bar { position: relative; display: block; height: 14px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .18); }
.ptl-bar i { position: absolute; inset: 0; border-radius: 999px; transform-origin: 0 50%; background: linear-gradient(180deg, #fff3c4 0%, #f7d35a 45%, #e0a92c 100%); animation: ptl-fill 1s cubic-bezier(.3, .1, .2, 1) var(--pt-at, 0s) both; }
.ptl-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); animation: ptl-run 1.1s ease-in-out var(--pt-at, 0s) infinite; }
@keyframes ptl-fill { from { transform: scaleX(.02); } to { transform: scaleX(1); } } @keyframes ptl-run { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
body.mobile .pair-ticket.pairing { gap: 14px; min-height: 190px; padding: 18px 16px; } body.mobile .ptl-glow { width: 240px; height: 240px; margin: -120px 0 0 -50px; } body.mobile .ptl-pic { width: 62px; height: 62px; } body.mobile .ptl-pic.m { animation-name: ptl-in-m-s; } body.mobile .ptl-pic.f { animation-name: ptl-in-f-s; } body.mobile .ptl-rings { width: 30px; height: 30px; margin: 0 -15px; } body.mobile .ptl-rings svg { width: 17px; height: 17px; }
@keyframes ptl-in-m-s { from { transform: translateX(-12px); } to { transform: translateX(8px); } } @keyframes ptl-in-f-s { from { transform: translateX(12px); } to { transform: translateX(-8px); } }
body.mobile .ptl-txt b { font-size: 23px; } body.mobile .ptl-who { gap: 8px; font-size: 13.5px; } body.mobile .ptl-who em { width: 28px; font-size: 9.5px; }
@media (prefers-reduced-motion: reduce) { .ptl-glow, .ptl-pics, .ptl-pic, .ptl-rings, .ptl-txt b u, .ptl-bar i, .ptl-bar::after { animation: none !important; } .ptl-txt b u { opacity: 1; } .ptl-pic.m { transform: translateX(10px); } .ptl-pic.f { transform: translateX(-10px); } }
.pair-ticket { display: flex; align-items: stretch; margin: 12px 0 4px; border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden; background: var(--paper-2); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.pt-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-row { display: grid; grid-template-columns: 42px 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 14px; min-width: 0; }
.pt-row + .pt-row { border-top: 1px dashed var(--rule-2); }
.pt-row canvas { width: 42px; height: 42px; border-radius: 50%; background: #e9e2d4; object-fit: cover; display: block; }
.pt-row small { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pt-row b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
button.pt-go { flex: none; width: 116px; min-height: 0; border: 0; border-radius: 0; border-left: 2px dashed rgba(255, 255, 255, .38); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 10px; line-height: 1.05; }
button.pt-go b { font-size: 23px; font-weight: 700; }
button.pt-go span { font-size: 13px; font-weight: 400; opacity: .9; }
body.mobile button.pt-go { width: 92px; } body.mobile .pt-row { grid-template-columns: 38px 34px minmax(0, 1fr); padding: 9px 12px; } body.mobile .pt-row canvas { width: 38px; height: 38px; }
/* standing plan (#16) as the ticket's third row */
.pt-plan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px dashed var(--rule-2); min-width: 0; }
.pt-plan > small { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pt-plan-ctl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-plan-ctl .small { min-height: 0; }
.pair-cta.blocked .pt-plan { border-top-color: rgba(184, 115, 31, .35); margin-top: 8px; padding: 8px 0 0; justify-content: center; }
body.mobile .pt-plan { padding: 8px 12px; }
.pair-cta.blocked { border: 1px dashed var(--amber); color: var(--ink-2); background: rgba(184, 115, 31, .08); box-shadow: none; }
.pair-cta.blocked b { color: var(--amber); }

/* ---- discoveries app ---- */
.disc-hero { display: flex; gap: 14px; align-items: center; padding: 12px 2px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.disc-hero > b { font-family: var(--serif); font-size: 44px; line-height: 1; font-weight: 600; color: var(--amber); } .disc-hero small { font-size: 18px; color: var(--ink-3); }
.disc-card { padding: 10px 4px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.disc-card.mine { background: rgba(184, 115, 31, .08); border-left: 4px solid var(--amber); padding-left: 10px; }
.disc-gene { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--amber); }
.disc-who { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .disc-who .author { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.disc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 0; }
.disc-lock { aspect-ratio: 1; border: 1px dashed var(--rule-2); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-3); }
.disc-lock span { font-family: var(--serif); font-size: 26px; } .disc-lock small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

/* ---- gene book ---- */
.gene-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--rule); }
.gene-row.own { background: rgba(47, 93, 58, .07); }
.gene-row canvas { width: 92px; height: 53px; border-radius: 6px; border: 1px solid var(--rule); background: var(--thumb-bg); }
.gene-name { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gene-lock { width: 92px; height: 53px; border: 1px dashed var(--rule-2); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; color: var(--ink-3); }
.gene-row.locked .gene-name { color: var(--ink-3); }
.disc-by b { color: var(--amber); }
.tag.codom { border-color: var(--amber); color: var(--amber); } .tag.dom { border-color: var(--sky); color: var(--sky); } .tag.rec { border-color: #8b5fbf; color: #8b5fbf; }

/* ---- Field Guide (#603): the Gene Book's entries grown up, plus the Terms tab ---- */
.guide .g-tabs { margin: 2px 0 8px; }
.g-entry { align-items: start; }
.g-pics { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.g-super-pic { margin: 0; } .g-super-pic figcaption { font-size: 10px; color: var(--ink-3); text-align: center; line-height: 1.2; margin-top: 1px; }
.g-super { font-size: 11px; padding: 2px 4px; width: 92px; border: 1px solid var(--rule-2); border-radius: 6px; background: transparent; color: var(--ink-2); }
.g-super:hover { border-color: var(--ink-3); color: var(--ink); }
/* Morph Studio's way in from the Field Guide (#1337) */
.g-studio { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
.g-studio span { font-size: 12px; color: var(--ink-3); } .g-studio:hover { border-color: var(--ink-3); }
.g-hetnote { font-size: 10px; color: var(--ink-3); text-align: center; line-height: 1.25; width: 92px; }
.g-inherit { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.g-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; }
.g-cx { font-size: 11px; padding: 1px 8px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; color: var(--ink-2); }
.g-cx:hover { border-color: var(--ink-3); color: var(--ink); }
.g-census { font-size: 11px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: baseline; }
.g-tick { font-size: 10px; }
.g-focus { box-shadow: inset 3px 0 0 var(--amber); background: rgba(184, 115, 31, .08); }
.g-entry, .g-term { scroll-margin-top: 56px; }
.g-link { border: 0; background: none; padding: 0; font: inherit; color: var(--moss); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.g-link:hover { background: none; color: var(--ink); }
.g-intro { margin: 2px 0 8px; }
.g-index { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.g-index .chip { font-size: 11px; padding: 2px 8px; }
.g-term { border-top: 1px solid var(--rule); padding: 10px 8px 12px; }
.g-term h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.g-term p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.g-ex { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; background: rgba(0, 0, 0, .025); }
.g-ex-pair { font-size: 12px; margin-bottom: 6px; } .g-ex-pair b { font-weight: 600; } .g-ex-pair span { color: var(--ink-3); margin: 0 3px; }
.g-odds { display: grid; gap: 3px; margin-bottom: 6px; }
.g-odd { display: grid; grid-template-columns: 44px 60px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; }
.g-odd b { font-family: var(--mono); font-weight: 500; text-align: right; }
.g-bar { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; } .g-bar i { display: block; height: 100%; background: var(--amber); }
.g-see { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.g-complexes { border-top: 1px solid var(--rule); padding: 10px 2px; }
.g-complexes h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.g-cxrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; font-size: 12px; padding: 3px 0; } .g-cxrow span { color: var(--ink-2); }
.genes [data-gene], .genes [data-term] { cursor: pointer; }
.genes [data-gene]:hover, .genes [data-term]:hover { border-color: var(--ink-3); }
.hint-guide { border: 0; background: transparent; color: #f2c98a; text-decoration: underline; padding: 0 2px; font: inherit; }
.hint-guide:hover { background: transparent; color: var(--paper); }
:root[data-theme="dark"] .g-ex { background: rgba(255, 255, 255, .03); }

/* design bar: the hint keeps a readable width even with the "Another …" button showing */
#designbar { max-width: min(96vw, 1100px); }
.db-hint { flex: 1 1 220px; min-width: 200px; max-width: 420px; }

/* ---- online indicator ---- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); vertical-align: middle; }
.dot.on { background: #3ba55d; box-shadow: 0 0 0 2px rgba(59, 165, 93, .22); }
.online-cell { position: relative; padding: 0 12px; }
.online-chip { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; border-radius: 3px; }
.online-chip:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.online-pop { position: absolute; top: calc(100% - 4px); left: 8px; min-width: 220px; background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); box-shadow: var(--shadow-4); padding: 8px 10px 10px; z-index: 30; font-size: 13px; }
.online-pop .orow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.online-pop .orow b { font-weight: 500; }
.online-pop .orow .meta { margin-left: auto; }
.brow.online .author::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ba55d; margin-left: 6px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(59, 165, 93, .22); }
.brow .dot.on { display: none; }
.ig-pbio .dot.on, .prof-head .dot.on { margin-left: 2px; }
@media (max-width: 1100px) { .online-cell { display: none; } }

/* ---- captcha ---- */
.captcha { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: end; padding: 10px 0 2px; }
.captcha .cap-img { grid-row: 1 / 3; border: 1px solid var(--ink); background: #f4efe6; line-height: 0; }
.captcha .cap-img img { display: block; width: 220px; height: 68px; }
.captcha label { margin: 0; }
.captcha input { text-transform: uppercase; letter-spacing: 0.25em; font-family: var(--mono); }
.captcha button { justify-self: start; }
@media (max-width: 520px) { .captcha { grid-template-columns: 1fr; } .captcha .cap-img { grid-row: auto; } .captcha .cap-img img { width: 100%; height: auto; } }
.captcha { grid-template-columns: auto minmax(0, 1fr); }
.captcha input { width: 100%; min-width: 0; box-sizing: border-box; }

/* ================= left navigation rail: a game toolbar ================= */
#rail { position: fixed; top: 56px; left: 0; bottom: 0; width: 88px; display: flex; flex-direction: column; align-items: stretch; background: var(--paper); background-image: var(--grain); border-right: 1px solid var(--ink); z-index: 19; padding: 8px 0 8px; box-shadow: var(--shadow-3); overflow: visible; }
#rail .tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px; margin: 2px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); min-height: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; line-height: 1; transition: transform .12s ease, background .12s ease; }
#rail .tile .tico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tc); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 1px 0 rgba(0, 0, 0, .15); transition: transform .12s ease, box-shadow .12s ease; }
#rail .tile .tico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#rail .tile .tlabel { display: inline; }
#rail .tile kbd { position: absolute; top: 2px; right: 6px; font-family: var(--mono); font-size: 9px; color: var(--ink-3); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; padding: 0 3px; line-height: 1.3; opacity: 0; transition: opacity .12s; }
#rail .tile:hover kbd, #rail:hover .tile kbd { opacity: .9; }
#rail .tile:hover { background: var(--paper-2); color: var(--ink); transform: translateX(2px); }
#rail .tile:hover .tico { transform: translateY(-2px) scale(1.06); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 5px 10px rgba(0, 0, 0, .22); }
#rail .tile.pressed .tico, #rail .tile:active .tico { transform: translateY(1px) scale(.96); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .22); }
#rail .tile.active, #rail .tile.on { color: var(--ink); box-shadow: none; } /* the ring around the icon marks the open panel; no box or notch around the tile */
#rail .tile.active .tico, #rail .tile.on .tico { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 3px var(--paper), 0 0 0 4.5px var(--tc); }
#rail .tile .badge { top: 0; right: 4px; animation: badgepop .5s ease; }
#rail .badge.soft { background: var(--moss); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
@keyframes badgepop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
#rail .rail-gap { flex: 1; }
#rail .tile.pulse .tico { animation: railpulse 1.3s ease-in-out infinite; }
@keyframes railpulse { 0%, 100% { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 0 rgba(47, 93, 58, .0); } 50% { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 7px rgba(47, 93, 58, .35); } }
#rail .tile::before { content: attr(aria-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: var(--ink); color: var(--paper); padding: 5px 9px; font-size: 12px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 5; }
#rail .tile:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }
#rail .tile.active:hover::before { opacity: 0; }
#hud { grid-template-columns: 1fr auto; }
#hud .hud-nav { display: none; }
#panel { left: 88px; }
#designbar, #holdbar, #visitbar, #walkbar { left: calc(50% + 44px); }
#cashWarn { left: 88px; }
#pausedBar { left: 88px; } #pausedBar > span { flex: 0 1 auto; min-width: 0; line-height: 1.35; } #pausedBar > button { flex: none; } /* it starts at the left bar's edge like the cash warning, and its words wrap inside the bar instead of sliding under the left bar (#1096) */
@media (max-height: 720px) { #rail .tile { padding: 4px 4px 4px; margin: 1px 8px; } #rail .tile .tico { width: 34px; height: 34px; border-radius: 10px; } #rail .tile .tico svg { width: 19px; height: 19px; } #rail .rc-av { width: 28px; height: 28px; font-size: 15px; } }
@media (max-height: 600px) { #rail .tile .tlabel { display: none; } }

/* ================= market: browse grid ================= */
.mk-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mk-bar .mk-q { flex: 1 1 200px; min-width: 160px; }
.mk-bar select { min-height: 32px; }
.mk-genes { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
/* the Genes filter (#1370) */
.mk-gcap { display: inline-flex; align-items: stretch; flex-wrap: wrap; } .mk-gcap-hint { margin: 6px 0 0; font-size: 12px; } /* Number of genes, in Filters (#1405) */
.mk-count { margin: 0 0 8px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } /* three across at the default width, more as the panel is dragged wider */
.mk-card { background: #fff; border: 1px solid var(--rule-2); display: flex; flex-direction: column; box-shadow: 1px 1px 0 var(--paper-3); min-width: 0; transition: transform .12s ease, box-shadow .12s ease; }
.mk-card:hover { transform: translateY(-1px); box-shadow: 2px 3px 0 var(--paper-3); }
:root[data-theme="dark"] .mk-card { background: var(--paper-2); box-shadow: 1px 1px 0 #0e0d0b; }
.mk-img { position: relative; }
.mk-img canvas { width: 100%; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border-bottom: 1px solid var(--rule); }
.mk-tag { position: absolute; top: 6px; left: 6px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; background: var(--ink); color: var(--paper); }
.mk-tag.deal { background: var(--moss); } .mk-tag.high { background: var(--amber); color: var(--ink); } .mk-tag.new { left: auto; right: 6px; background: var(--sky); color: #fff; }
.mk-body { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-title { font-weight: 500; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-morph { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-meta { font-size: 11px; color: var(--ink-3); }
.mk-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 3px; }
.mk-price { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.mk-seller { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-actions { display: flex; gap: 6px; margin-top: 4px; }
.mk-actions button { flex: 1; min-height: 26px; padding: 2px 6px; font-size: 12px; }
.mk-bar.m { margin: 6px 0 10px; } .mk-bar.m input { flex: 1 1 120px; min-width: 0; }

/* ================= shop restock ================= */
.restock { border: 1px solid var(--rule-2); background: var(--paper-2); padding: 10px 12px 10px; margin-bottom: 12px; }
.restock .rs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.restock .rs-top b { font-family: var(--serif); font-size: 16px; }
.restock .rs-bar { height: 6px; background: var(--rule); position: relative; overflow: hidden; }
.restock .rs-bar i { display: block; height: 100%; background: var(--moss); transition: width .4s ease; }
.restock.fresh { border-color: var(--moss); }
.restock.fresh .rs-top b { color: var(--moss); }
.specimen.fresh { position: relative; }
.lotbadge.new { background: var(--sky); }

/* ================= welcome tour ================= */
.tour { display: grid; grid-template-columns: 300px 1fr; gap: 0 26px; align-items: center; }
.tour-pic canvas { width: 100%; height: auto; display: block; background: var(--thumb-bg); border: 1px solid var(--rule-2); }
.tour-body h2 { font-size: 30px; margin: 4px 0 8px; }
.tour-body p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tour-body p b { color: var(--ink); }
.tour-dots { display: flex; gap: 6px; margin: 14px 0 6px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); } .tour-dots i.on { background: var(--moss); }
.tour .actions { justify-content: flex-end; margin-top: 12px; }
.tour .actions .quiet { margin-right: auto; }
.tour.m { display: block; } .tour.m h2 { font-size: 24px; } .tour.m p { font-size: 14px; }
@media (max-width: 760px) { .tour { grid-template-columns: 1fr; } }

.ghost { display: none !important; }
/* market bar: one tidy row */
.mk-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.mk-bar .mk-q { min-width: 0; }
.mk-bar .seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden; }
.mk-bar .seg button { border: 0; border-radius: 0; min-height: 30px; padding: 0 10px; font-size: 13px; background: transparent; color: var(--ink-2); }
.mk-bar .seg button + button { border-left: 1px solid var(--rule-2); }
.mk-bar .seg button.on { background: var(--ink); color: var(--paper); }
.mk-bar select { min-height: 32px; max-width: 190px; }
.mk-bar .chip { min-height: 30px; }

.callout.tut { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.callout.tut > div { flex: 1; }
.callout.tut button { white-space: nowrap; }

/* tour: icon instead of a picture */
.tour { grid-template-columns: 150px 1fr; }
.tour-pic { display: grid; place-items: center; min-height: 150px; }
.tour-pic .tico { width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; background: var(--tc); color: #fff; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .22), 0 8px 18px rgba(0, 0, 0, .25); }
.tour-pic .tico svg { width: 50px; height: 50px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tour-brand { font-family: var(--serif); font-size: 30px; line-height: 1; text-align: center; }
.tour-brand i { color: var(--moss); font-style: italic; }
.modal.tour-modal { width: min(680px, 94vw); }

/* ================= settings window ================= */
.settings-modal { position: relative; display: grid; grid-template-columns: 190px 1fr; padding: 0; width: min(820px, 94vw); max-height: 86vh; overflow: hidden; }
.set-nav { background: var(--paper-2); border-right: 1px solid var(--rule-2); padding: 22px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.set-nav h2 { font-size: 24px; margin: 0 8px 12px; }
.set-nav button { border: 0; border-radius: 6px; text-align: left; background: transparent; color: var(--ink-2); padding: 9px 12px; font-size: 14px; font-weight: 500; min-height: 0; }
.set-nav button:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.set-nav button.on { background: var(--ink); color: var(--paper); }
.set-nav .set-foot { margin-top: auto; padding: 8px 12px 0; }
.set-body { padding: 26px 30px 30px; overflow: auto; }
.set-body h3 { font-size: 22px; margin: 0 0 8px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.set-row:last-child { border-bottom: 0; }
.set-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-text b { font-weight: 500; font-size: 14.5px; }
.set-text span { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.set-ctl { flex: none; display: flex; align-items: center; gap: 8px; }
.set-row.danger b { color: var(--brick); }
.set-close { position: absolute; top: 10px; right: 12px; }
.set-seg button { padding: 5px 12px; font-size: 12.5px; min-height: 0; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: var(--rule-2); border-radius: 24px; transition: background .15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch input:checked + i { background: var(--moss); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (max-width: 700px) { .settings-modal { grid-template-columns: 1fr; } .set-nav { flex-direction: row; flex-wrap: wrap; padding: 14px 10px 8px; } .set-nav h2 { width: 100%; } .set-nav .set-foot { display: none; } }

/* ================= animal window (market + shop) ================= */
.modal.am-modal { width: min(920px, 94vw); padding: 0; }
.am-wrap { display: flex; flex-direction: column; }
.am-card { padding: 0 0 8px; }
.am-card + .am-card { border-top: 1px solid var(--rule-2); margin-top: 6px; }
.am-canvas { display: block; width: 100%; aspect-ratio: 1040 / 480; background: var(--thumb-bg); border-bottom: 1px solid var(--rule); }
.am-head { padding: 16px 26px 4px; }
.am-head h2 { font-size: 28px; margin: 0; }
.am-stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 26px 0; }
.am-stats > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--rule); min-width: 92px; background: var(--paper-2); }
.am-stats b { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.am-stats span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.am-card .section { margin: 16px 26px 8px; }
.genetbl { width: calc(100% - 52px); margin: 0 26px; border-collapse: collapse; font-size: 13px; }
.genetbl th { text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--rule-2); }
.genetbl td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.genetbl .num { text-align: right; font-family: var(--mono); }
.genetbl tr.unlikely td { color: var(--ink-3); }
.genetbl .tag.good { font-size: 9px; padding: 1px 5px; vertical-align: middle; }
.am-buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px 20px; border-top: 1px solid var(--ink); background: var(--paper-2); margin-top: 8px; flex-wrap: wrap; }
.am-price { font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1.1; }
.am-buy .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-card[data-open] { cursor: pointer; }
.specimen.open { cursor: pointer; }
.am-wrap.m .am-card { padding: 0; } .am-wrap.m canvas { width: 100%; display: block; border: 1px solid var(--rule); background: var(--thumb-bg); }
.am-wrap.m h2 { font-size: 22px; margin: 10px 0 0; } .am-wrap.m .am-stats { padding: 8px 0 0; } .am-wrap.m .am-card .section { margin: 14px 0 6px; } .am-wrap.m .genetbl { width: 100%; margin: 0; font-size: 12px; } .am-wrap.m .am-buy { padding: 12px 0 0; margin-top: 10px; background: transparent; border-top: 1px solid var(--rule-2); }
.am-canvas { aspect-ratio: auto; height: 300px; object-fit: cover; }
.am-canvas { height: 340px; object-fit: cover; background: var(--thumb-bg); }

/* ================= events ================= */
.ev-now { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--ink); background: var(--paper-2); margin-bottom: 10px; }
.ev-now h3 { font-size: 24px; margin: 2px 0 4px; }
.ev-ico { font-size: 40px; line-height: 1; flex: none; } .ev-ico.sm { font-size: 20px; }
.ev-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.ev-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--rule); font-size: 11.5px; text-align: center; background: var(--paper); }
.ev-day b { font-weight: 500; }
.expo-card { border: 1px solid var(--rule-2); padding: 12px 14px; background: var(--paper); }
.expo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.expo-head h3 { font-size: 22px; margin: 0; }
.expo-mine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.expo-entry { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.expo-entry canvas { width: 100%; aspect-ratio: 26 / 15; border: 1px solid var(--rule); background: var(--thumb-bg); }
.expo-result { padding: 8px 0 10px; border-bottom: 1px solid var(--rule); }
.podium { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.podium canvas { width: 96px; height: 55px; border: 1px solid var(--rule); background: var(--thumb-bg); flex: none; }
.podium .medal { font-size: 22px; width: 28px; text-align: center; }
.ribbons { display: flex; flex-direction: column; gap: 4px; }
.ribbon { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--rule); font-size: 13px; }
.ribbon.r1 { border-color: #c9a227; background: rgba(201, 162, 39, .08); }
.expo-tabs { margin-bottom: 0; }
.tpick.off { opacity: .55; cursor: default; }
.podium-ghost { width: 96px; height: 55px; border: 1px dashed var(--rule); flex: none; }
/* novice-class ribbons reuse the open medals with a small N */
.nov-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: -12px; margin-top: 14px; border-radius: 50%; background: var(--moss, #2f5d3a); color: #fff; font: 700 10px/1 var(--mono); flex: none; }
.stud-row, .sold-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.stud-row canvas, .sold-row canvas { width: 78px; height: 45px; border: 1px solid var(--rule); background: var(--thumb-bg); flex: none; }
.stud-row .body, .sold-row .body { flex: 1; min-width: 0; }
.sold-row .num { font-family: var(--mono); }
.tpicks.tall { max-height: 380px; }
.callout.on { border-color: var(--moss); background: rgba(47, 93, 58, .08); }

/* drawn event icons and medals */
.evi { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; color: var(--amber); }
.evi.sm { width: 20px; height: 20px; stroke-width: 1.8; color: var(--ink-2); }
.evi.inline { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; color: var(--amber); }
.ev-day .evi.sm { color: var(--amber); }
.medal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--mono); font-weight: 700; font-size: 13px; color: #2b2313; flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 1px 0 rgba(0, 0, 0, .15); }
.medal.m1 { background: linear-gradient(#f4d773, #c9a227); }
.medal.m2 { background: linear-gradient(#e6e6e6, #a9adb3); }
.medal.m3 { background: linear-gradient(#e2a877, #a8653a); }
.medal.m0 { background: linear-gradient(#f4d773, #c9a227); }
.medal.m0 svg { width: 16px; height: 16px; fill: none; stroke: #2b2313; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rib-tally { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; cursor: default; }
.rib-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; }
.rib-chip b { font-weight: 600; }
.rib-chip .medal.sm { width: 18px; height: 18px; font-size: 10px; }
.rib-chip .medal.m0 svg { width: 12px; height: 12px; }
.medal.sm { width: 20px; height: 20px; font-size: 11px; vertical-align: middle; }
.podium .medal { margin-right: 2px; }
.row-card .t .evi.sm { display: inline-block; vertical-align: -4px; margin-right: 2px; }

/* ================= title screen on small screens ================= */
@media (max-width: 760px) {
  .title-screen { padding: 14px 16px 18px; min-height: 100svh; }
  .ts-top { flex-direction: column; gap: 10px; }
  .ts-brand { font-size: 48px; }
  .ts-sub { font-size: 10.5px; letter-spacing: .1em; }
  .title-screen .land-links { display: flex; gap: 8px; flex-wrap: wrap; }
  .title-screen .land-links .phone-link { background: #8fc79c; color: #1e1a15; border-color: #8fc79c; font-weight: 500; }
  .ts-mid { display: flex; flex-direction: column-reverse; gap: 18px; padding: 14px 0 10px; }
  .ts-left { display: contents; }
  .ts-h1 { font-size: 20px; max-width: none; order: 2; }
  .ts-tag { order: 1; }
  .ts-board, .title-screen .fresh { display: none; }
  .title-screen .auth-card { width: 100%; padding: 22px 18px 20px; }
  .ts-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ts-bottom .scroll-hint { display: none; }
  .land.below { padding: 24px 16px 40px; }
  .demo .parents { grid-template-columns: 1fr; }
}

/* ================= market: full screen + sidebar ================= */
.panel-tools { display: flex; align-items: center; gap: 8px; }
#panel.full { width: auto; right: 0; box-shadow: none; }
#panel.full .panel-body { padding: 14px 22px 30px; --ph-pside: 22px; }
/* the drag handle on the panel's right edge */
.panel-grip { position: absolute; top: 0; bottom: 0; right: -6px; width: 12px; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 16l7-6.5V13h12V9.5L29 16l-7 6.5V19H10v3.5z' fill='%23f4efe3' stroke='%231f1d1a' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 13v6M18 13v6' stroke='%23b8893f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, col-resize; z-index: 3; touch-action: none; outline: none; }
.panel-grip::before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: var(--moss); opacity: 0; transition: opacity .12s; }
/* the tab (#332): a small drawn handle with slide arrows, faint until you reach for it */
.grip-tab { position: absolute; top: 50%; left: -1px; width: 14px; height: 44px; margin-top: -22px; display: grid; place-items: center; border-radius: 7px; background: var(--paper-2); border: 1px solid var(--rule-2); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); color: var(--ink-3); opacity: .55; transition: opacity .15s, color .15s, border-color .15s, transform .15s, background .15s; pointer-events: none; }
.grip-tab svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.grip-tab .dots { stroke-width: 2.2; }
.panel-grip:hover .grip-tab, .panel-grip:focus-visible .grip-tab, body.panel-resizing .grip-tab { opacity: 1; color: #f4efe3; border-color: var(--amber); background: #3a3228; transform: scaleY(1.12); }
.panel-grip:hover::before, .panel-grip:focus-visible::before, body.panel-resizing .panel-grip::before { opacity: 1; }
.panel-grip::before { background: var(--amber); }
#panel.full .panel-grip { display: none; }
body.panel-resizing, body.panel-resizing * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 16l7-6.5V13h12V9.5L29 16l-7 6.5V19H10v3.5z' fill='%23f4efe3' stroke='%231f1d1a' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 13v6M18 13v6' stroke='%23b8893f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, col-resize !important; user-select: none; }
.mk-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.mk-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; padding: 12px 14px 14px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.mk-f { display: flex; flex-direction: column; gap: 6px; }
.mk-f .seg { display: flex; flex-wrap: wrap; border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden; }
.mk-f .seg button { flex: 1; border: 0; border-radius: 0; min-height: 30px; padding: 0 8px; font-size: 12.5px; background: transparent; color: var(--ink-2); }
.mk-f .seg button + button { border-left: 1px solid var(--rule-2); }
.mk-f .seg button.on { background: var(--ink); color: var(--paper); }
.mk-range { display: flex; align-items: center; gap: 6px; } .mk-range input { width: 100%; min-width: 0; } .mk-range span { font-size: 12px; color: var(--ink-3); }
.mk-genelist { max-height: 300px; overflow: auto; border: 1px solid var(--rule); background: var(--paper); padding: 2px 8px; }
.mk-gene { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 13px; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 400; }
.mk-gene:last-child { border-bottom: 0; } .mk-gene.on { color: var(--moss); font-weight: 500; }
.mk-gene span { flex: 1; } .mk-gene i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.mk-gene input { margin: 0; accent-color: var(--moss); }
.mk-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); }
.mk-sort { display: flex; align-items: center; gap: 8px; } .mk-sort select { min-height: 32px; }
#panel.full .mk-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.mk-card .mk-price { font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.mk-card .mk-was { font-style: normal; font-family: var(--sans); font-weight: 400; font-size: 11px; color: var(--moss); }
.mk-card .mk-title { font-size: 13px; font-weight: 600; white-space: normal; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
.mk-card .mk-morph { font-style: italic; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; } .mk-chips .gene { font-size: 10px; padding: 1px 5px; }
.mk-sexbadge { position: absolute; bottom: 6px; left: 6px; font-size: 10px; padding: 2px 7px; border-radius: 10px; background: rgba(255, 255, 255, .85); color: var(--ink); font-weight: 500; }
.mk-sexbadge.M { color: var(--sky); } .mk-sexbadge.F { color: #b04a7a; }
.mk-av { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; margin-right: 5px; vertical-align: middle; }
.mk-seller { display: inline-flex; align-items: center; font-size: 12px; color: var(--ink-2); }
.mk-foot { margin-top: 4px; }
@media (max-width: 1100px) { .mk-layout { grid-template-columns: 1fr; } .mk-side { position: static; } }
.mk-gene { flex-direction: row; align-items: center; }
.mk-side .lbl { margin-bottom: 2px; }

/* ================= breeder loan builder ================= */
.loan-intro { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--rule-2); background: var(--paper-2); margin-bottom: 10px; font-size: 13px; }
.loan-intro > div { flex: 1; } .loan-intro button { flex: none; }
.ln h2 { font-size: 24px; margin: 0 0 4px; }
.ln-steps { display: flex; gap: 8px; margin-bottom: 16px; }
.ln-step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--rule); background: var(--paper-2); font-size: 13px; opacity: .6; }
.ln-step.on { opacity: 1; border-color: var(--ink); } .ln-step.done { opacity: .9; }
.ln-step i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--rule-2); color: var(--ink); font-style: normal; font-family: var(--mono); font-size: 12px; flex: none; }
.ln-step.on i { background: var(--ink); color: var(--paper); } .ln-step.done i { background: var(--moss); color: #fff; }
.ln-step div { display: flex; flex-direction: column; min-width: 0; } .ln-step span { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 52vh; overflow: auto; padding: 2px; }
.ln-grid.people { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ln-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 8px; border: 1.5px solid var(--rule-2); background: var(--paper); border-radius: 6px; color: var(--ink); }
.ln-card:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
/* Lend → Which male? search (#1412): the cards it filters out hide */
.ln-search { margin: 6px 0 10px; } .ln-search input { width: 100%; } .ln [data-pickmale][hidden], .ln-none[hidden] { display: none; }
.ln-card.on { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); }
.ln-card canvas { width: 100%; aspect-ratio: 26 / 15; border-radius: 4px; background: var(--thumb-bg); }
.ln-card b { font-weight: 500; } .ln-card .genes { display: flex; flex-wrap: wrap; gap: 3px; }
.ln-card.person { flex-direction: row; align-items: center; gap: 10px; } .ln-card.person > b { display: flex; align-items: center; gap: 6px; } .ln-card.person .meta { display: block; }
.ln-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.ln-more { margin-top: 10px; font-size: 13px; } .ln-more summary { cursor: pointer; color: var(--ink-3); }
.ln-terms { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.ln-block { padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper-2); }
.ln-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.ln-custom { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; margin-left: 6px; } .ln-custom input { width: 90px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 14px; cursor: pointer; }
.switch-row > span { display: flex; flex-direction: column; gap: 2px; } .switch-row .meta { font-size: 12.5px; }
.ln-summary { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--moss); background: rgba(47, 93, 58, .08); display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.ln-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .ln-foot span { flex: 1; }
.switch-row { flex-direction: row; }
.ln-block > input, .ln-block #lnNote { width: 100%; }

/* ================= tub space ================= */
.space-cell { position: relative; cursor: pointer; }
.h-space { font-family: var(--sans); font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.h-space.low { color: var(--amber); }
.space-pop { min-width: 260px; cursor: default; }
.space-tbl { width: 100%; border-collapse: collapse; margin: 4px 0 6px; font-size: 13px; }
.space-tbl td { padding: 5px 0; border-bottom: 1px solid var(--rule); } .space-tbl td.num { text-align: right; padding-left: 10px; white-space: nowrap; }
.space-tbl tr.full b { color: var(--brick); }
.space-pop .warn { color: var(--amber); }
.space-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.space-strip .lbl { margin-right: 2px; }
.sp-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule-2); font-size: 12.5px; }
.sp-chip b { font-family: var(--mono); font-size: 14px; color: var(--moss); } .sp-chip i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.sp-chip.full b { color: var(--brick); } .sp-chip.none { opacity: .55; } .sp-chip.none b { color: var(--ink-3); }
.sp-warn { font-size: 12px; color: var(--amber); margin-left: auto; }

/* incubators */
/* incubator panel */
.incx-head { display: flex; align-items: center; gap: 16px; padding: 4px 0 16px; border-bottom: 1px solid var(--rule); }
.incx-unit { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.incx-unit b { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.incx-unit > span { color: var(--ink-3); font-size: 13px; }
.incx-slots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.incx-slots i { width: 14px; height: 18px; border-radius: 7px 7px 6px 6px; border: 1px solid var(--rule-2); }
.incx-slots i.on { background: #d9c9a3; border-color: #b9a67a; }
.incx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font: 500 13px/1 var(--sans, Roboto, Arial, sans-serif); padding: 10px 16px; min-height: 0; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
:root .incx-btn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
.incx-btn.go { background: var(--moss); border-color: var(--moss); color: #fff; }
:root .incx-btn.go:hover { background: #3f6a48; border-color: #3f6a48; color: #fff; }
.incx-btn.warn { color: #c0563f; border-color: rgba(192, 86, 63, .45); }
:root .incx-btn.warn:hover { background: rgba(192, 86, 63, .1); color: #c0563f; border-color: #c0563f; }
.incx-sec { margin-top: 20px; }
.incx-sec h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.incx-sec h3 small { font-size: 11px; margin-left: 4px; color: var(--ink-2); }
.incx-card { border: 1px solid var(--rule); background: var(--paper); padding: 14px 16px; margin-bottom: 12px; }
.incx-card.ready { border-color: var(--moss); box-shadow: inset 3px 0 0 var(--moss); }
.incx-card.sorted { opacity: .8; }
.incx-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.incx-parent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.incx-parent canvas, .incx-noimg { width: 64px; height: 37px; flex: none; border-radius: 4px; background: var(--paper-2); object-fit: cover; }
.incx-noimg { display: grid; place-items: center; color: var(--ink-3); font-size: 16px; }
.incx-parent > div { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.incx-parent b { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.incx-parent small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incx-parent small.incx-hets { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.incx-sex { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.incx-sex.f { color: #c0708a; } .incx-sex.m { color: #5b87a8; }
.incx-x { font-family: var(--serif); font-size: 20px; color: var(--ink-3); }
.incx-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--ink-3); font-size: 12.5px; flex-wrap: wrap; }
.incx-eggs { display: inline-flex; gap: 3px; }
.incx-eggs i { width: 9px; height: 12px; border-radius: 50% 50% 45% 45% / 58% 58% 42% 42%; background: #efe4c8; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.incx-eggs i.slug { background: #b7a98a; opacity: .55; }
.incx-prog { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.incx-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.incx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d9c9a3, var(--moss)); border-radius: 3px; }
.incx-bar.thin { height: 4px; margin-top: 8px; max-width: 220px; }
.incx-ready { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.incx-babies { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin-top: 14px; }
.incx-baby { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--paper); }
.incx-baby.kept { border-color: var(--moss); box-shadow: 0 0 0 1px var(--moss); }
.incx-baby.listed, .incx-baby.busy { opacity: .72; }
.incx-bimg { border: 0; padding: 0; background: var(--paper-2); min-height: 0; border-radius: 0; cursor: pointer; display: block; }
.incx-bimg canvas { width: 100%; aspect-ratio: 26 / 15; display: block; }
.incx-binfo { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px 4px; min-width: 0; }
.incx-binfo b { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incx-binfo span { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.incx-binfo .incx-bhets { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incx-binfo .rbadge { align-self: flex-start; margin: 3px 0 0; font-family: inherit; } /* Sell or Wholesale already (#665) */
.incx-keep, .incx-st { margin: 4px 9px 9px; border-radius: 999px; font: 500 12px/1 var(--sans, Roboto, Arial, sans-serif); padding: 7px 0; text-align: center; min-height: 0; }
.incx-keep { border: 1px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer; }
:root .incx-keep:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
.incx-keep.on { background: var(--moss); border-color: var(--moss); color: #fff; }
:root .incx-keep.on:hover { background: #3f6a48; border-color: #3f6a48; color: #fff; }
.incx-st { border: 1px dashed var(--rule-2); color: var(--ink-3); }
.incx-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.incx-sum { flex: 1; min-width: 180px; font-size: 13px; color: var(--ink-2); }
.incx-sum b { color: var(--ink); }
.incx-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.incx-hint { width: 100%; font-size: 12px; color: var(--ink-3); }
.incx-foot.done { border-top: 0; margin-top: 10px; padding-top: 0; }
.incx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--ink-3); }
.incx-empty b { font-family: var(--serif); font-size: 20px; color: var(--ink); }
@media (max-width: 640px) { .incx-pair { grid-template-columns: 1fr; } .incx-x { display: none; } .incx-head { flex-wrap: wrap; } }
.inc-own { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.inc-own .lbl { width: 100%; } .inc-own .meta { width: 100%; margin-top: 2px; }
.inc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--paper); font-size: 12.5px; }
.inc-chip i { font-style: normal; font-family: var(--mono); color: var(--moss); } .inc-chip b { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.inc-foot { flex-wrap: wrap; gap: 6px; } .inc-foot > span:last-child { display: flex; gap: 6px; flex-wrap: wrap; }

/* Hatch composer: what, where, and the look */
.pc-lbl { margin: 10px 0 5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pc-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 8px; padding: 3px; background: var(--paper-2); border-radius: 10px; }
.pc-modes button { border: 0; background: transparent; padding: 7px 4px; border-radius: 8px; font-weight: 600; font-size: 12px; color: var(--ink-2); min-height: 0; }
.pc-modes button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.pc-scenes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.pc-scenes button { flex: 0 0 auto; width: 70px; padding: 3px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; display: flex; flex-direction: column; gap: 3px; font-size: 10px; line-height: 1.15; color: var(--ink-2); min-height: 0; }
.pc-scenes button canvas { width: 100%; aspect-ratio: 84 / 52; border-radius: 5px; display: block; }
.pc-scenes button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-scenes button.on { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); color: var(--ink); }
.pc-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.pc-filters button { border: 1px solid var(--rule); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: 12px; min-height: 0; color: var(--ink-2); }
.pc-filters button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pc-clutches { display: grid; gap: 6px; }
.pc-clutch { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; background: transparent; min-height: 0; }
.pc-clutch span { font-size: 11.5px; color: var(--ink-3); }
.pc-clutch.on { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); }
.pickc { position: relative; }
.pickc .pc-n { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--moss); color: #fff; font: 700 11px/18px system-ui, sans-serif; text-align: center; font-style: normal; }

/* wanted ads: a compact card per ad (header, recommended pick, footer), rows only when opened */
.wtools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.wtools .lbl { margin-right: 2px; }
.wtools .wfill { margin-left: auto; }
.wad { border: 1px solid var(--rule); background: var(--paper); padding: 8px 12px 6px; }
.wad + .wad { margin-top: 8px; }
:root[data-theme="dark"] .wad { background: #15130f; }
.whead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 13.5px; }
.whead .sep { color: var(--ink-3); }
.whead .wbud { font-family: var(--mono); font-size: 12.5px; }
.wurg { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.wurg.warn, .wurg.bad { color: #fff; border-radius: 10px; padding: 1px 8px; font-weight: 600; }
.wurg.warn { background: var(--amber); } .wurg.bad { background: var(--brick); }
.wpick { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 5px 8px; background: rgba(63, 141, 92, .07); border-left: 3px solid var(--moss); font-size: 13.5px; }
.wpick .wpn { flex: 1; min-width: 0; }
.wpick.none { background: transparent; border-left-color: var(--rule); }
.wpick .pay, .wrow .wp { color: var(--moss); font-family: var(--mono); font-weight: 600; }
.wpick .gain, .wrow .wgain { color: var(--moss); font-family: var(--mono); font-size: 12px; }
.wfoot { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; }
.wfoot [data-qdecline] { margin-left: auto; }
.wprot, .wlock { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; }
svg.lock { flex: none; vertical-align: -1px; }
.wrows { margin-top: 4px; border-top: 1px dotted var(--rule); }
.wrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) 64px 64px 56px auto; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px dotted var(--rule); font-size: 13px; }
.wrow canvas { width: 48px; height: 28px; border: 1px solid var(--rule); background: var(--thumb-bg); }
.wrow .wg { color: var(--ink-2); font-family: var(--mono); font-size: 12px; text-align: right; }
.wrow .wp, .wrow .wgain { text-align: right; }
.wrow.bad { opacity: .55; }
.wrow.bad .wp, .wrow.bad .wgain { color: var(--ink-2); }
.dlg-line { display: block; font-size: 13px; line-height: 1.5; }
.dlg-line.meta { margin-top: 4px; }

/* rarity: how many of this look exist across the game */
.rar { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--font-sans, system-ui), sans-serif; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.rar.big { font-size: 12px; padding: 4px 9px; margin-top: 4px; }
.rar.r-unique { background: linear-gradient(90deg, #f6d27a, #e9a93b); color: #3b2604; border-color: #c98a1e; }
.rar.r-ultra { background: #6b3fa0; color: #fff; }
.rar.r-rare { background: #2f6fa8; color: #fff; }
.rar.r-uncommon { background: #3e7a4c; color: #fff; }
.rar.r-common { background: var(--paper-3); color: var(--ink-2); border-color: var(--rule); }
.mk-body .rar { margin: 2px 0 3px; }
/* census */
.census { padding: 4px 2px 12px; }
.cz-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 8px; }
.cz-head > div { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cz-head b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cz-head span { font-size: 11.5px; color: var(--ink-3); }
.cz-note { margin: 0 0 10px; }
.cz-genes { display: grid; gap: 4px; }
.cz-row { display: grid; grid-template-columns: minmax(96px, 1.2fr) 2fr auto 76px; gap: 10px; align-items: center; font-size: 12.5px; }
.cz-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-bar { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.cz-bar i { display: block; height: 100%; background: var(--moss); border-radius: 4px; }
.cz-n { font-variant-numeric: tabular-nums; text-align: right; }
.cz-n small { color: var(--ink-3); margin-left: 3px; }
.cz-eff { font-size: 11px; font-weight: 600; text-align: right; }
.cz-eff.cut { color: var(--brick); }
.cz-eff.full { color: var(--ink-3); font-weight: 500; }
.cz-looks { display: grid; gap: 5px; }
.cz-look { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 520px) { .cz-row { grid-template-columns: minmax(80px, 1fr) 1fr auto; } .cz-row .cz-eff { grid-column: 1 / -1; text-align: left; margin-top: -3px; } .cz-head b { font-size: 18px; } }

/* wall finishes */
.fins { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.fins.small { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.fin { display: flex; flex-direction: column; gap: 3px; padding: 4px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; text-align: left; min-height: 0; color: var(--ink); }
.fin canvas { width: 100%; aspect-ratio: 4 / 3; border-radius: 5px; display: block; }
.fin b { font-size: 11.5px; line-height: 1.15; }
.fin span { font-size: 11px; color: var(--ink-3); }
.fin.on { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); }
.fin.on span { color: var(--moss); font-weight: 600; }
.fin:disabled { opacity: .5; }
.fins.small .fin b { font-size: 10.5px; }
body.mobile .fin { min-height: 0; padding: 4px; box-shadow: 0 2px 0 var(--gp3); }
body.mobile .fin.on { box-shadow: 0 0 0 3px var(--moss-2); }

/* levels and prestige */
.pstar { display: inline-flex; align-items: baseline; gap: 1px; margin-left: 4px; color: #e0a52f; font-weight: 700; text-shadow: 0 0 6px rgba(224,165,47,.45); }
.pstar small { font-size: .72em; }
.lv-ring { --p: 0; --r: 0; --rest: #6f93b8; position: relative; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: conic-gradient(var(--moss-2, #3e7a4c) calc(var(--p) * 1%), var(--rest) 0 calc(var(--r) * 1%), var(--paper-3) 0); flex: none; }
/* rested (#232): the double-XP pool drawn past your progress in a quiet blue, and a small moon ×2 tag */
.lv-rtag { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 5px; height: 15px; border-radius: 999px; background: rgba(111, 147, 184, .16); color: #6f93b8; font: 700 9.5px/1 var(--mono); letter-spacing: 0; vertical-align: 1px; }
.lv-moon { width: 10px; height: 10px; fill: currentColor; }
.lv-xpbar { position: relative; display: flex; } .lv-xpbar s { display: block; height: 100%; background: repeating-linear-gradient(135deg, rgba(111, 147, 184, .55) 0 5px, rgba(111, 147, 184, .32) 5px 10px); text-decoration: none; }
.lv-rested { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.lv-rested .lv-moon { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: var(--ink-3); } .lv-rested.on { border-color: rgba(111, 147, 184, .45); background: rgba(111, 147, 184, .08); color: var(--ink-2); } .lv-rested.on .lv-moon { fill: #6f93b8; }
.lv-ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--paper); }
.lv-ring b { position: relative; font: 700 11px/1 system-ui, sans-serif; font-variant-numeric: proportional-nums; text-box: trim-both cap alphabetic; } /* centre the digits' ink, not their line box: it sat low and off to one side */
.lv-ring.big { width: 64px; height: 64px; } .lv-ring.big::before { inset: 6px; } .lv-ring.big b { font-size: 24px; }
.level-chip { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px 3px 3px; min-height: 0; color: var(--ink); cursor: pointer; }
.level-chip .lv-txt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.level-chip.ready, .lvl-pill.ready { border-color: #e0a52f; box-shadow: 0 0 0 2px rgba(224,165,47,.35); animation: lvglow 2.4s ease-in-out infinite; }
@keyframes lvglow { 50% { box-shadow: 0 0 0 4px rgba(224,165,47,.15); } }
.lvl-pill { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; min-height: 0; }
.lvl-pill .lv-txt { display: none; }
body.mobile .lvl-pill { min-height: 0; padding: 2px; box-shadow: none; background: transparent; }
.lvl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lvl-head { display: flex; gap: 14px; align-items: center; }
.lvl-head h2 { margin: 0 0 2px; }
.lvl-bar { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-top: 6px; min-width: 220px; }
.lvl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--moss), var(--moss-2)); }
.lvl-rules, .lvl-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.lvl-rules > div, .lvl-perks > div { border: 1px solid var(--rule); border-radius: 8px; padding: 7px 9px; display: grid; gap: 1px; }
.lvl-rules span, .lvl-perks span { font-size: 12px; color: var(--ink-2); }
.lvl-rules b, .lvl-perks b { font-size: 15px; }
.lvl-rules small, .lvl-perks small { font-size: 11px; color: var(--ink-3); }
.lvl-genes { display: flex; flex-wrap: wrap; gap: 6px; }
.lvl-genes button { border: 1px solid var(--rule); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; min-height: 0; color: var(--ink); }
.lvl-genes button.on { background: #e0a52f; border-color: #c98a1e; color: #2b1c02; font-weight: 700; }
body.mobile .lvl-genes button { min-height: 32px; box-shadow: 0 2px 0 var(--gp3); }
body.mobile .lvl-genes button.on { background: #e0a52f; color: #2b1c02; }
.price s.was { color: var(--ink-3); font-weight: 400; font-size: .85em; margin-right: 3px; }
.mk-more { margin: 12px 0 4px; }

/* my listings: stale pile and multi-select */
.mk-tag.stale { background: #7a5a2a; color: #fff; }
.mk-card .mk-img .mk-tag.stale { top: auto; bottom: 8px; left: 8px; }
.mk-check { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--paper); border-radius: 6px; padding: 3px 5px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mk-check input { width: 16px; height: 16px; margin: 0; }
.mk-card.picked { box-shadow: 0 0 0 2px var(--moss); }
.stale-pile { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.stale-pile .row { display: flex; gap: 6px; }
.dialog textarea { width: 100%; resize: vertical; min-height: 110px; font: inherit; margin-top: 4px; }

/* launch notices, admin dashboard */
.notice h2 { margin: 0 0 8px; }
/* the launch notices (#898): an icon header; the usage-stats choice as two lists, its facts and an even Yes / No */
.nt-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.nt-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--nc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 4px 12px color-mix(in srgb, var(--nc) 35%, transparent); }
.nt-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nt-head h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.nt-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.notice .nt-changes { margin: 0 0 10px; padding: 0; list-style: none; }
.notice .nt-changes li { position: relative; margin: 0; padding: 7px 0 7px 18px; border-top: 1px solid var(--rule); line-height: 1.45; }
.notice .nt-changes li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--moss); }
.nt-privacy .consent-box { margin-top: 0; padding: 16px; border-radius: 12px; }
.nt-privacy .nt-links + .consent-box { margin-top: 12px; }
.nt-q { display: block; font-size: 15px; } .nt-why { margin: 2px 0 12px !important; color: var(--ink-2); }
.nt-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.nt-col-h { display: block; margin-bottom: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.notice .nt-list { margin: 0; padding: 0; list-style: none; }
.notice .nt-list li { display: flex; align-items: center; gap: 9px; margin: 0; padding: 4px 0; font-size: 13.5px; line-height: 1.35; }
.nt-list i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 700; }
.nt-list li.yes i { background: color-mix(in srgb, var(--moss) 20%, transparent); color: var(--moss-2); }
.nt-list li.no i { background: color-mix(in srgb, var(--brick) 18%, transparent); color: var(--brick); }
.nt-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.nt-facts span { padding: 4px 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); font-size: 12px; color: var(--ink-2); }
.consent-box .nt-age { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.notice-actions.nt-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.nt-choice button { min-height: 42px; font-size: 14px; font-weight: 600; border-radius: 9px; } /* the same weight for both: the choice is theirs */
@media (max-width: 520px) { .nt-cols, .notice-actions.nt-choice { grid-template-columns: 1fr; } }
.notice ul { margin: 6px 0 10px 18px; padding: 0; } .notice li { margin: 4px 0; line-height: 1.45; }
.consent-box { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin-top: 12px; background: var(--paper-2); }
.consent-box p { margin: 6px 0; line-height: 1.45; }
.notice-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.notice-actions button, .notice-actions .button-link { flex: 0 1 auto; }
.button-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; color: inherit; border: 1px solid var(--rule-2); }
.button-link:hover { color: inherit; border-color: var(--ink-2); }
.button-link.primary:hover { color: #fff; }
.button-link.primary { background: var(--moss); color: #fff; border-color: var(--moss); }
.small-link { font-size: 13px; color: var(--moss); }
.wide-modal { max-width: 980px !important; width: min(980px, 94vw) !important; }
.adm-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.adm-t th, .adm-t td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--rule); } .adm-t th:first-child, .adm-t td:first-child { text-align: left; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.adm-li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--rule); }
.adm-li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm .cz-head { grid-template-columns: repeat(4, 1fr); }
.notice a, .consent-box a { color: var(--moss-2); text-decoration: underline; }

/* the 3D model announcement (#691) */
#modalBox:has(.model-news) { width: min(760px, 94vw); max-width: min(760px, 94vw); padding: 22px 26px 18px; }
.model-news { position: relative; }
.model-news .mn-top { position: relative; text-align: center; padding: 4px 8px 0; }
.model-news .mn-stamp { display: inline-block; font: 600 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; padding: 4px 12px; border: 2.5px solid var(--brick); color: var(--brick); border-radius: 4px; transform: rotate(-3deg); animation: mn-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both .15s; }
.model-news h2 { font: 600 34px/1.1 var(--serif); margin: 12px 0 6px; letter-spacing: -.01em; }
.model-news .mn-lede { margin: 0 auto 12px; max-width: 540px; color: var(--ink-2); line-height: 1.5; }
.model-news .mn-stage { position: relative; aspect-ratio: 1040 / 600; max-height: 44vh; width: 100%; border: 1px solid var(--rule-2); border-radius: 12px; overflow: hidden; background: var(--thumb-bg); box-shadow: inset 0 0 0 4px var(--paper), 0 10px 26px rgba(0, 0, 0, .18); }
.model-news .mn-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease, transform 3.2s ease-out; transform: scale(1.04); }
.model-news .mn-stage.ready .mn-hero.on { opacity: 1; transform: scale(1); }
.model-news .mn-name { position: absolute; left: 14px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(20, 17, 13, .72); color: #f3eee4; font: 600 14px var(--sans); opacity: 0; transition: opacity .3s; }
.model-news .mn-stage.ready .mn-name { opacity: 1; }
.model-news .mn-wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: #f3eee4; font: 500 15px var(--sans); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.model-news .mn-wait::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); background-size: 250% 100%; animation: mn-shine 1.6s linear infinite; }
.model-news .mn-stage.ready .mn-wait { display: none; }
.model-news .mn-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0 4px; }
.model-news .mn-pick { display: flex; flex-direction: column; gap: 4px; padding: 0 0 6px; border: 1px solid var(--rule); border-radius: 9px; background: var(--paper-2); cursor: pointer; overflow: hidden; color: var(--ink); font: 500 11.5px/1.25 var(--sans); transition: transform .15s, border-color .15s, box-shadow .15s; }
.model-news .mn-pick canvas { width: 100%; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); }
.model-news .mn-pick span { padding: 0 6px; min-height: 2.5em; display: flex; align-items: center; justify-content: center; text-align: center; }
.model-news .mn-pick:hover, .model-news .mn-pick:focus-visible { transform: translateY(-2px); border-color: var(--ink-3); background: var(--paper-2); color: var(--ink); }
.model-news .mn-pick.sel, .model-news .mn-pick.sel:hover { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); background: var(--paper-2); color: var(--ink); }
.model-news .mn-facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.model-news .mn-facts li { margin: 0; padding-left: 18px; position: relative; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.model-news .mn-facts li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.model-news .mn-facts b { color: var(--ink); }
.model-news .mn-back { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--rule-2); border-radius: 10px; background: var(--paper-2); font-size: 13.5px; line-height: 1.4; }
.model-news .mn-back-text { flex: 1; }
.model-news .mn-back button { flex: none; }
.model-news .mn-back.done { border-style: solid; border-color: var(--moss); }
.model-news .notice-actions .primary { font-size: 15px; padding: 10px 20px; }
.model-news .mn-confetti { position: absolute; inset: -22px -26px -18px; overflow: hidden; pointer-events: none; z-index: 2; border-radius: 16px; } /* the whole popup, clipped to it: never a scrollbar */
.model-news .mn-confetti i { position: absolute; left: var(--x); top: -14px; width: 8px; height: 13px; background: var(--c); border-radius: 2px; opacity: 0; transform: rotate(var(--r)); }
.model-news .mn-confetti.go i { animation: mn-fall 2.4s cubic-bezier(.25, .6, .45, 1) var(--d) both; } /* when the snakes appear */
.model-news .mn-confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
@keyframes mn-stamp { from { transform: rotate(-3deg) scale(2.2); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
@keyframes mn-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes mn-fall { 0% { opacity: 0; transform: translateY(-10px) rotate(var(--r)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(560px) rotate(calc(var(--r) + 540deg)); } }
@media (max-height: 820px) { .model-news .mn-stage { max-height: 34vh; } .model-news h2 { font-size: 28px; margin-top: 8px; } .model-news .mn-lede { margin-bottom: 8px; font-size: 13.5px; } .model-news .mn-back { margin-top: 10px; } }
@media (max-width: 640px) { .model-news .mn-strip { grid-template-columns: repeat(3, 1fr); } .model-news .mn-facts { grid-template-columns: 1fr; } .model-news .mn-back { flex-direction: column; align-items: stretch; } .model-news h2 { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .model-news .mn-confetti { display: none; } .model-news .mn-stamp, .model-news .mn-wait::before { animation: none; } .model-news .mn-hero { transition: none; transform: none; } }

/* the sales rep's auto-accept */
.dlg-hint { margin: -2px 0 6px; font-size: 12px; line-height: 1.4; }
.dialog input:disabled, .dialog select:disabled { opacity: .55; cursor: not-allowed; }
.callout.autosell { border-color: var(--rule-2); background: transparent; justify-content: space-between; }
.callout.autosell.on { border-color: var(--moss); background: rgba(90, 122, 70, .07); }
.callout.autosell > div { flex: 1; }
.callout.autosell .tag { margin-right: 4px; }
.as-tag { margin: 0 0 0 6px; font-size: 10px; font-family: var(--sans); vertical-align: middle; white-space: nowrap; }
.csel-btn:disabled { opacity: .55; cursor: not-allowed; }
.lvl-unlocks > div.on { border-color: var(--moss); }
.lvl-unlocks > div.on b { color: var(--moss); }

/* ---- phone: Breeders app ---- */
.br-app { padding-top: 10px; }
.br-mine { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); overflow: hidden; margin-bottom: 10px; }
.br-mine.on { border-color: rgba(47, 93, 58, .45); background: linear-gradient(0deg, rgba(47, 93, 58, .07), rgba(47, 93, 58, .07)), var(--paper-2); }
.br-mine-top { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px; }
.br-door { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--paper-3); color: var(--ink-2); }
.br-mine.on .br-door { background: var(--moss); color: #fff; }
.br-door svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.br-mine-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-mine-txt b { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.br-mine-txt span { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.br-mine-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 7px 10px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
.br-here { color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.br-search { width: 100%; box-sizing: border-box; margin: 2px 0 8px; }
.br-seg { display: flex; gap: 4px; margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.br-seg button { flex: none; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); font-size: 12px; cursor: pointer; }
.br-seg button small { margin-left: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.br-seg button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.br-seg button.on small { color: var(--paper-3); }
.br-list { margin-bottom: 6px; }
.br { display: flex; align-items: flex-start; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.br:hover { background: rgba(0, 0, 0, .025); }
.br.me { background: rgba(47, 93, 58, .07); margin: 0 -6px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.br-rank { width: 16px; flex: none; padding-top: 9px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.br-av { position: relative; flex: none; }
.br-av .ig-av { width: 32px; height: 32px; font-size: 14px; }
.br-online { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #3ba55d; box-shadow: 0 0 0 2px var(--paper); }
.br-main { flex: 1; min-width: 0; }
.br-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-meta { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.br-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--rule-2); color: var(--ink-2); }
.br-tag.open { border-color: rgba(47, 93, 58, .5); color: var(--moss); }
.br-tag.live { border-color: rgba(184, 115, 31, .5); color: var(--amber); }
.br-act { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 2px; }
.br-act .small { min-width: 58px; }
.br-closed, .br-you { font-size: 11.5px; color: var(--ink-3); padding: 5px 2px; }
.br-note { font-size: 10.5px; color: var(--moss); }
.br-link { background: none; border: 0; padding: 0; font-size: 11px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.br-link:hover { color: var(--ink); }
#boardNewsMore { margin: 6px 0 2px; }

/* ---- Wall TV menu: a centred remote. A screen at the top, the big round play button in the middle ---- */
.modal.tv-modal { width: min(460px, 94vw); padding: 22px 22px 18px; }
.tvm { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.tvm-close { position: absolute; top: -8px; right: -8px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); font-size: 16px; }
.tvm-close:hover { background: var(--paper-2); color: var(--ink); }

/* the screen */
.tvm-screen { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 18px 18px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 40%, #27414b, #0e171b 75%); color: #f1f4f2; border: 6px solid #111; box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .25); }
.tvm-screen.off { background: radial-gradient(ellipse at 50% 40%, #1d2a30, #0b1113 75%); }
.tvm-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--mono); letter-spacing: .16em; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); }
.tvm-badge i { width: 7px; height: 7px; border-radius: 50%; background: #e0413a; box-shadow: 0 0 0 3px rgba(224, 65, 58, .3); animation: tvmPulse 1.4s ease-in-out infinite; }
@keyframes tvmPulse { 50% { opacity: .35; } }
.tvm-screen.playing .tvm-badge { background: rgba(224, 65, 58, .18); color: #ffd9d6; }
.tvm-chan { margin-top: 6px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #e0a52f; }
.tvm-title { font: 600 18px/1.25 var(--serif); max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tvm-by { font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* the remote */
.tvm-remote { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tvm-btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); transition: transform .08s ease, background .15s; }
.tvm-btn:hover:not(:disabled) { background: var(--paper-2); transform: translateY(-1px); }
.tvm-btn:active:not(:disabled) { transform: scale(.94); }
.tvm-btn:disabled { opacity: .35; }
.tvm-btn.sm { width: 38px; height: 38px; font-size: 15px; color: var(--ink-2); }
.tvm .tvm-btn.play { width: 72px; height: 72px; font-size: 26px; background: var(--moss); color: #fff; border-color: var(--moss); box-shadow: 0 6px 16px rgba(47, 93, 58, .35); }
.tvm .tvm-btn.play:hover:not(:disabled), .tvm .tvm-btn.play:focus { background: var(--moss-2); color: #fff; border-color: var(--moss-2); }
.tvm-btn.power:hover:not(:disabled) { color: var(--brick); border-color: var(--brick); }

/* volume */
.tvm-vol { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 340px; font-size: 16px; }
:root .tvm .tvm-vol input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--moss) var(--v, 50%), var(--rule) var(--v, 50%)); cursor: pointer; }
.tvm-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--moss); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.tvm-vol input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--moss); }
.tvm-vol b { min-width: 28px; font: 500 12.5px var(--mono); color: var(--ink-2); }

/* quick toggles */
.tvm-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tvm-chip { border-radius: 999px; padding: 6px 14px; font-size: 12.5px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-3); }
.tvm-chip.on { background: rgba(47, 93, 58, .12); border-color: color-mix(in srgb, var(--moss) 60%, transparent); color: var(--moss); }
.tvm-chip.on::before { content: '✓ '; }

/* channels and the list */
.tvm-tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--paper-2); }
.tvm-tabs button { border: 0; border-radius: 999px; padding: 7px 16px; font-size: 13px; background: transparent; color: var(--ink-2); }
.tvm-tabs button.on { background: var(--ink); color: var(--paper); }
.tvm-tabs button:disabled { opacity: .45; }
.tvm-tabs small { margin-left: 5px; font-family: var(--mono); opacity: .7; }
.tvm-list { list-style: none; margin: 0; padding: 0; width: 100%; max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.tvm-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--paper-2); }
.tvm-item.on { background: rgba(47, 93, 58, .14); }
.tvm-play { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 11px; background: var(--paper); }
.tvm-item.on .tvm-play { background: var(--moss); color: #fff; border-color: var(--moss); }
.tvm-t { flex: 1; min-width: 0; }
.tvm-t b { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvm-t small { display: block; font-size: 11.5px; color: var(--ink-3); }
.tvm-x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); }
.tvm-x:hover { color: var(--brick); background: var(--paper); }
.tvm-add { display: flex; gap: 8px; width: 100%; }
.tvm-add input { flex: 1; min-width: 0; border-radius: 999px; padding-left: 16px; }
.tvm-add button { border-radius: 999px; padding: 0 18px; }
.tvm-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); max-width: 360px; text-align: center; }
/* remote icons */
.tvm-btn svg { width: 20px; height: 20px; display: block; }
.tvm-btn.sm svg { width: 17px; height: 17px; }
.tvm .tvm-btn.play svg { width: 30px; height: 30px; }
.tvm-play svg { width: 13px; height: 13px; display: block; margin: 0 auto; }
.tvm-ic { display: grid; place-items: center; color: var(--ink-3); }
.tvm-ic svg { width: 20px; height: 20px; }

/* ---- Messages (phone app and the phone site) ---- */
.msgs { display: flex; flex-direction: column; min-height: 100%; }
.msgs.thread { height: 100%; }
.msgs-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.msgs-title { flex: 1; font: 600 19px var(--serif); }
.msgs-back { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; color: var(--ink-2); }
.msgs-back:hover { background: var(--paper-2); }
.msgs-mini { flex: none; font-size: 12px; padding: 5px 12px; border-radius: 999px; }
.msgs-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 0; text-align: left; color: inherit; }
.msgs-who b { display: block; font-size: 14px; }
.msgs-who small { display: block; font-size: 11px; color: var(--ink-3); }
.msgs-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 15px var(--sans); }
.msgs-av.everyone { background: var(--ink); color: var(--paper); }
.msgs-av.everyone svg { width: 20px; height: 20px; }
.msgs-on { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ba55d; margin: 0 4px 1px 2px; vertical-align: middle; }
.msgs-list { display: flex; flex-direction: column; padding: 4px 6px 10px; }
.msgs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: inherit; }
.msgs-row:hover { background: var(--paper-2); }
.msgs-row.pinned { background: var(--paper-2); margin-bottom: 6px; }
.msgs-r { flex: 1; min-width: 0; }
.msgs-r b { display: block; font-size: 14px; font-weight: 600; }
.msgs-r small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgs-row.unread .msgs-r small { color: var(--ink); font-weight: 500; }
.msgs-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msgs-meta small { font-size: 10.5px; color: var(--ink-3); }
.msgs-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--moss); color: #fff; font: 600 10.5px/18px var(--sans); font-style: normal; text-align: center; }
.msgs-empty { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.msgs-show { margin: 4px auto 12px; font-size: 12.5px; border-radius: 999px; }
.msgs-search { margin: 8px 10px 2px; border-radius: 999px; padding-left: 14px; }
.msgs-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 6px; }
.msgs-day { align-self: center; margin: 8px 0 4px; font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.msgs-b { max-width: 82%; align-self: flex-start; padding: 7px 11px 5px; border-radius: 16px 16px 16px 5px; background: var(--paper-2); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.msgs-b.me { align-self: flex-end; background: var(--moss); color: #fff; border-radius: 16px 16px 5px 16px; }
.msgs-b small { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; font-size: 10px; opacity: .6; }
.msgs-name { display: block; padding: 0; border: 0; background: transparent; font: 600 11.5px var(--sans); color: var(--moss); cursor: pointer; }
.msgs-name:hover { text-decoration: underline; }
.msgs-flag { width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: inherit; opacity: 0; cursor: pointer; }
.msgs-b:hover .msgs-flag, .msgs-flag:focus { opacity: 1; }
.msgs-flag svg { width: 12px; height: 12px; }
.msgs-form { position: sticky; bottom: 0; display: flex; gap: 6px; padding: 8px 8px 10px; background: var(--paper); border-top: 1px solid var(--rule); }
.msgs-form input { flex: 1; min-width: 0; border-radius: 999px; padding-left: 14px; }
.msgs-form button { border-radius: 999px; padding: 0 16px; }
.msgs-note { margin: 8px; padding: 10px; border-radius: 10px; background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); text-align: center; }
#phBody .msgs.thread { height: 100%; }
/* an offer on a Hatch post, under its message (#500) */
.msgs-offer { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px 4px; }
.msgs-offer.me { align-self: flex-end; margin: 0 4px 6px 0; }
.msgs-offer button.small { border-radius: 999px; }
.msgs-olink { padding: 0 4px; border: 0; background: transparent; font: 600 12px var(--sans); color: var(--moss); cursor: pointer; }
.msgs-olink:hover { text-decoration: underline; }
.msgs-ostate { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--ink-3); }
.msgs-ostate.accepted { color: var(--moss); }

/* ---- Everyone chat in the corner of the room ---- */
.rc { position: fixed; left: 104px; bottom: 16px; z-index: 30; width: min(400px, calc(100vw - 140px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.rc-log { display: flex; flex-direction: column; gap: 3px; max-height: 34vh; overflow-y: hidden; scrollbar-width: thin; }
.rc-line { align-self: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 10px; background: rgba(20, 18, 15, .62); color: #f3eee4; font-size: 13px; line-height: 1.35; text-shadow: 0 1px 1px rgba(0, 0, 0, .4); backdrop-filter: blur(4px); transition: opacity .8s ease; overflow-wrap: anywhere; pointer-events: auto; }
.rc-line b, .rc-name { font: 600 12.5px var(--sans); color: #9fd4ad; margin-right: 6px; }
.rc-name { padding: 0; border: 0; background: transparent; cursor: pointer; }
.rc-name:hover { text-decoration: underline; }
.rc-line.sys { color: rgba(243, 238, 228, .7); font-style: italic; font-size: 12px; }
.rc-line.old { opacity: 0; pointer-events: none; }
.rc:hover .rc-line.old, .rc.open .rc-line.old { opacity: 1; pointer-events: auto; }
.rc.open .rc-log { overflow-y: auto; pointer-events: auto; background: rgba(20, 18, 15, .35); border-radius: 12px; padding: 6px; }
.rc-form { display: none; align-items: center; gap: 8px; pointer-events: auto; }
.rc.open .rc-form { display: flex; }
.rc-form input { flex: 1; min-width: 0; border-radius: 999px; padding: 8px 14px; background: rgba(20, 18, 15, .85); color: #f3eee4; border: 1px solid rgba(243, 238, 228, .25); }
.rc-keys { font: 500 10.5px var(--mono); color: rgba(243, 238, 228, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); white-space: nowrap; }
.rc-hint { align-self: flex-start; pointer-events: auto; padding: 4px 10px; border-radius: 999px; border: 0; background: rgba(20, 18, 15, .5); color: rgba(243, 238, 228, .8); font-size: 11.5px; }
.rc-hint:hover { background: rgba(20, 18, 15, .75); color: #fff; }
.rc-hint kbd { font: 600 10.5px var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.rc.open .rc-hint { display: none; }
body.bottombar .rc { bottom: 84px; } /* above the visit / design bars */
/* the phone site already titles the tab, so the inbox skips its own heading there */
.msgs-m .msgs:not(.thread) > .msgs-top .msgs-title { visibility: hidden; }
.msgs-m .msgs.thread { min-height: calc(100dvh - 250px); }
.msgs-m .msgs-form { bottom: 54px; z-index: 3; } /* sits just above the Social tab bar */

/* ---- staff announcements (from Discord /announce) ---- */
.ann { position: fixed; left: 50%; z-index: 60; width: min(620px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 14px;
  border-radius: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-2); border-left: 5px solid var(--amber); box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transform: translate(-50%, -14px); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.ann.in { transform: translate(-50%, 0); opacity: 1; }
.ann-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #fff; }
.ann-ic svg { width: 19px; height: 19px; }
.ann-body { flex: 1; min-width: 0; }
.ann-lbl { display: block; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 3px; }
.ann-body p { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ann-x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); }
.ann-x:hover { background: var(--paper-2); color: var(--ink); }

/* the first-visit notice on the front pages */
/* the first-visit notice (#1086): a card with a crossed-out cookie, the three facts as rows, and the front page's green button */
.ll-notice { position: fixed; left: 16px; bottom: 16px; z-index: 60; box-sizing: border-box; width: min(404px, calc(100vw - 32px)); padding: 18px 18px 16px; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 18px; box-shadow: 0 22px 50px rgba(0, 0, 0, .42), 0 3px 0 rgba(0, 0, 0, .22); font-size: 13.5px; line-height: 1.45; animation: llnotice .5s cubic-bezier(.2, .9, .3, 1.15) both; }
.ll-notice::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #3f9257, #8fe0a3 55%, #3f9257); }
.ll-notice.out { animation: llnotice-out .22s ease-in forwards; }
.ll-n-top { display: flex; align-items: center; gap: 13px; margin: 2px 0 13px; }
.ll-n-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, #8bdb9f, #3d9456); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .4); animation: llnotice-ico .7s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
.ll-n-ico svg { width: 28px; height: 28px; fill: none; stroke: #0a3317; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ll-n-ico svg .f { fill: #0a3317; stroke: none; } .ll-n-ico svg .no { stroke: #fff8e7; stroke-width: 2.6; filter: drop-shadow(0 0 1.2px #0a3317) drop-shadow(0 0 1.2px #0a3317); }
.ll-notice b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -.005em; }
.ll-notice ul { list-style: none; margin: 0 0 15px; padding: 0; border: 1px solid var(--rule); border-radius: 13px; background: var(--paper-2); }
.ll-notice li { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 10px 13px; color: var(--ink-2); }
.ll-notice li + li { border-top: 1px solid var(--rule); }
.ll-notice li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--moss-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ll-notice li svg .f { fill: var(--moss-2); stroke: none; }
.ll-notice .row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.ll-notice a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--moss); font-size: 13px; font-weight: 500; }
.ll-notice a:hover { color: var(--moss-2); }
.ll-notice button, body.mobile .ll-notice button { min-height: 0; padding: 11px 26px; border: 0; border-radius: 10px; background: #4f9a62; color: #fff; font: 700 14.5px/1 var(--sans, Roboto, Arial, sans-serif); box-shadow: 0 4px 0 #2f6d41; cursor: pointer; transition: transform .08s, box-shadow .08s, background .12s; }
:root .ll-notice button:hover { background: #5aab6f; color: #fff; }
:root .ll-notice button:active { transform: translateY(3px); box-shadow: 0 1px 0 #2f6d41; }
@keyframes llnotice { from { transform: translateY(26px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes llnotice-out { to { transform: translateY(18px); opacity: 0; } }
@keyframes llnotice-ico { from { transform: scale(.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) { .ll-notice { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 16px 15px 15px; } .ll-notice button, body.mobile .ll-notice button { padding: 12px 28px; } }
@media (prefers-reduced-motion: reduce) { .ll-notice, .ll-notice.out, .ll-n-ico { animation: none; } }

/* ---- profile pictures ---- */
.ig-av.has-img, .msgs-av.has-img { background: var(--paper-2) !important; overflow: hidden; padding: 0; }
.ig-av .av-img, .msgs-av .av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; pointer-events: none; }
.ig-btn.warn { color: #c0563f; }
.av-pick { padding-bottom: 16px; }
.av-now { display: flex; align-items: center; gap: 14px; padding: 14px 14px 6px; }
.av-now > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 13px; }
.av-now span { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.av-now .ig-av.lg { width: 72px; height: 72px; min-width: 72px; font-size: 30px; flex: none; }
.av-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 0 12px; }
.av-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; min-height: 0; cursor: pointer; color: var(--ink); }
:root .ig .av-opt:hover { background: transparent; color: var(--ink); }
.av-c { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--paper-2); border: 2px solid transparent; transition: border-color .15s, transform .15s; display: block; }
.av-opt:hover .av-c { border-color: var(--ig-blue, #0095f6); transform: scale(1.04); }
.av-opt.busy { opacity: .5; pointer-events: none; }
.av-c canvas, .av-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-c { background: #e9e2d4; }
.av-opt small { font-size: 11px; max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.av-grid.photos .av-c { border-radius: 10px; width: 92px; height: 76px; }
.av-cam { padding: 14px 12px 0; }
.av-cam .ig-btn { width: 100%; }
.av-pad { padding: 0 14px; }

/* ---- camera ---- */
body.cam-mode > *:not(#view):not(#camView):not(#modal):not(#modal2):not(#toasts):not(script):not(#loader) { visibility: hidden !important; }
.cam-view { position: fixed; inset: 0; z-index: 55; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-bottom: 20px; }
.cam-frame { position: relative; box-shadow: 0 0 0 100vmax rgba(10, 9, 7, .55); border-radius: 4px; }
.cam-frame i { position: absolute; width: 26px; height: 26px; border: 0 solid #fff; }
.cam-frame .tl { left: -2px; top: -2px; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: 6px; }
.cam-frame .tr { right: -2px; top: -2px; border-right-width: 3px; border-top-width: 3px; border-top-right-radius: 6px; }
.cam-frame .bl { left: -2px; bottom: -2px; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 6px; }
.cam-frame .br { right: -2px; bottom: -2px; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 6px; }
.cam-thirds { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .22) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .22) 66.66%, transparent calc(66.66% + .5px)), linear-gradient(transparent calc(33.33% - .5px), rgba(255, 255, 255, .22) 33.33%, transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .22) 66.66%, transparent calc(66.66% + .5px)); }
.cam-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; pointer-events: auto; width: min(640px, 92vw); }
.cam-shutter { width: 68px; height: 68px; min-height: 0; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 4px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.cam-shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .12s; }
:root .cam-shutter:hover { background: transparent; border-color: #fff; } .cam-shutter:active i { transform: scale(.86); }
.cam-x { position: absolute; left: 0; width: 44px; height: 44px; min-height: 0; border-radius: 50%; border: 0; background: rgba(20, 18, 15, .7); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
:root .cam-x:hover { background: rgba(20, 18, 15, .9); color: #fff; }
.cam-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cam-tip { position: absolute; top: calc(100% + 10px); left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.cam-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.on { animation: camflash .45s ease-out; }
@keyframes camflash { 0% { opacity: .9; } 100% { opacity: 0; } }
#modalBox.cam-modal { width: min(760px, 94vw); padding: 18px 20px 16px; }
.cam-prev-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cam-prev-top b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.cam-img { width: 100%; aspect-ratio: 52 / 30; object-fit: cover; display: block; border-radius: 6px; background: #15130f; }
.cam-post { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; }
.cam-post textarea { flex: 1; resize: none; font-size: 14px; }
.cam-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cam-note { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; }
.cam-app { padding-top: 6px; }
.cam-open { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); padding: 14px; min-height: 0; cursor: pointer; color: var(--ink); }
:root .cam-open:hover { background: var(--paper-2); color: var(--ink); }
.cam-open > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.cam-open b { font-size: 14.5px; } .cam-open small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.cam-lens { width: 52px; height: 52px; border-radius: 14px; background: #26231e; display: grid; place-items: center; flex: none; }
.cam-lens i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7fa3c4, #1f3446 60%, #0c1419); box-shadow: 0 0 0 3px #3a362f; }
.cam-roll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.cam-roll button { border: 0; padding: 0; min-height: 0; border-radius: 0; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); cursor: pointer; }
.cam-roll img { width: 100%; height: 100%; object-fit: cover; display: block; }
#modal:not(.hidden) ~ #camView { visibility: hidden; }
.cam-view { inset: auto; }
.ig-btn.icon.line svg { fill: none; stroke: currentColor; stroke-width: 2; }

/* ---- Sales › Numbers ---- */
.nb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); margin: 14px 0 16px; }
.nb-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; min-width: 0; }
.nb-tile + .nb-tile { border-left: 1px solid var(--rule); }
.nb-tile.lead { background: rgba(79, 154, 98, .07); box-shadow: inset 0 3px 0 var(--moss); }
.nb-lbl, .st-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.nb-tile b { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.nb-tile.neg b { color: var(--brick, #c0563f); }
.nb-foot { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.nb-chg.up { color: var(--moss); font-weight: 600; } .nb-chg.down { color: var(--brick, #c0563f); font-weight: 600; }
.nb-card { border: 1px solid var(--rule); padding: 14px 16px; min-width: 0; background: var(--paper); }
.nb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.nb-head h4 { font-family: var(--serif); font-size: 16px; font-weight: 600; margin: 0; }
.nb-mid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.nb-chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.nb-chart line { stroke: var(--rule-2); stroke-width: 1; }
.nb-chart rect.e { fill: var(--moss); } .nb-chart rect.s { fill: #b98a55; opacity: .75; }
.nb-chart g:hover rect { opacity: 1; filter: brightness(1.15); }
.nb-chart text { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); text-anchor: middle; }
.nb-key { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.nb-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 8px; } .nb-key i.e { background: var(--moss); } .nb-key i.s { background: #b98a55; }
.nb-best { display: flex; flex-direction: column; gap: 10px; }
.nb-best canvas { width: 100%; aspect-ratio: 26 / 15; border-radius: 6px; background: var(--paper-2); display: block; }
.nb-big { display: block; font-family: var(--mono); font-size: 26px; font-weight: 600; margin: 4px 0 2px; }
.nb-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.nb-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nb-row + .nb-row { margin-top: 11px; }
.nb-rt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.nb-rl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-rt b { font-family: var(--mono); font-weight: 600; font-size: 13px; flex: none; }
.nb-bar { height: 5px; background: var(--paper-2); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.nb-bar > i { display: block; height: 100%; background: var(--moss); border-radius: 3px; }
.nb-rn { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.nb-note { font-size: 12px; color: var(--ink-3); margin: 14px 0 0; }
.nb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 20px; text-align: center; color: var(--ink-3); }
.nb-empty b { font-family: var(--serif); font-size: 20px; color: var(--ink); }
@media (max-width: 900px) { .nb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-tile:nth-child(3) { border-left: 0; } .nb-tile:nth-child(n+3) { border-top: 1px solid var(--rule); } .nb-mid, .nb-lists { grid-template-columns: 1fr; } }

/* ---- Shop › Decor › Room look: the name field ---- */
.rn-field { border: 1px solid var(--rule); background: var(--paper); padding: 14px 16px 12px; margin-bottom: 8px; }
.rn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.rn-top label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.rn-help { font-size: 12.5px; color: var(--ink-3); }
.rn-group { display: flex; align-items: stretch; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; background: var(--paper-2); transition: border-color .15s, box-shadow .15s; }
.rn-group:focus-within { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(79, 154, 98, .18); }
:root .rn-group input, :root .rn-group input:focus { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; padding: 11px 14px; font-size: 15px; }
.rn-group button { border: 0; border-left: 1px solid var(--rule-2); border-radius: 0; min-height: 0; padding: 0 22px; background: var(--moss); color: #fff; font-weight: 600; font-size: 13.5px; cursor: pointer; }
:root .rn-group button:hover { background: #3f6a48; color: #fff; }
.rn-group button:disabled { background: transparent; color: var(--ink-3); cursor: default; }
:root .rn-group button:disabled:hover { background: transparent; color: var(--ink-3); }
.rn-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.rn-state.dirty { color: #c99a3a; }
.rn-count { font-family: var(--mono); }

/* ---- Shop › Facility (#832): one status card per part of the operation, each with its one action ---- */
.fac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 4px 0 18px; }
.fac-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper); }
.fac-card > b { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.15; }
.fac-card p { margin: 0; flex: 1; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.fac-card .fac-act { margin-top: 6px; }
/* Shop › Equipment: the sub-chips read as the tab's own row, a step stronger than the filter chips under them */
.equip-chips { margin: 0; }
.equip-chips .chip { font-weight: 600; }
.rod-strip .linkish { font-size: inherit; }

/* ---- Shop › Facility › Staff & rodent room ---- */
.incx-btn.sm { padding: 7px 14px; font-size: 12.5px; }
.incx-btn:disabled { opacity: .45; cursor: default; }
.st-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); margin: 6px 0 18px; }
.st-sum.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-sum.one { grid-template-columns: minmax(0, 1fr); max-width: 320px; } /* staff and the rodent facility each have their own now (#326) */
.st-sum > div { display: flex; flex-direction: column; gap: 5px; padding: 13px 16px; min-width: 0; }
.st-sum > div + div { border-left: 1px solid var(--rule); }
.st-sum b { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.1; }
.st-sum b small { font-family: var(--sans, Roboto, Arial, sans-serif); font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.st-foot { font-size: 12px; color: var(--ink-3); } .st-foot.good { color: var(--moss); } .st-foot.bad { color: var(--brick, #c0563f); }
.st-intro { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; line-height: 1.5; }
.st-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.st-role { display: flex; gap: 14px; border: 1px solid var(--rule); padding: 14px 16px; background: var(--paper); }
.st-role.on { border-color: rgba(79, 154, 98, .6); box-shadow: inset 3px 0 0 var(--moss); }
.st-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; flex: none; color: var(--ink-2); }
.st-role.on .st-ic { background: rgba(79, 154, 98, .16); color: var(--moss); }
.st-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-rb, .st-ib { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-rh { display: flex; align-items: center; gap: 8px; }
.st-rh h4 { font-family: var(--serif); font-size: 16.5px; font-weight: 600; margin: 0; }
.st-pill { font-size: 11px; font-weight: 600; color: var(--moss); background: rgba(79, 154, 98, .14); border-radius: 999px; padding: 2px 9px; }
.st-rb p, .st-ib p { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin: 5px 0 12px; flex: 1; }
.st-rf { display: flex; align-items: center; gap: 10px; border-top: 1px dashed var(--rule-2); padding-top: 10px; }
.st-wage { font-family: var(--mono); font-size: 16px; font-weight: 600; margin-right: auto; }
.st-wage small { font-family: var(--sans, Roboto, Arial, sans-serif); font-size: 11.5px; font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.st-since { font-size: 11.5px; color: var(--ink-3); }
.st-fac { border: 1px solid var(--rule); background: var(--paper); padding: 16px 18px; margin-bottom: 6px; }
.st-fh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.st-fh h4 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.st-fh p { font-size: 13px; color: var(--ink-2); margin: 0; max-width: 560px; line-height: 1.45; }
.st-track { display: flex; margin: 16px 0 18px; }
.st-track span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.st-track span::before { content: ""; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--rule-2); }
.st-track span:first-child::before { display: none; }
.st-track span.done::before { background: var(--moss); }
.st-track i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule-2); background: var(--paper); position: relative; z-index: 1; }
.st-track span.done i { background: var(--moss); border-color: var(--moss); }
.st-track span.cur i { box-shadow: 0 0 0 4px rgba(79, 154, 98, .22); }
.st-track small { font-size: 11px; color: var(--ink-3); } .st-track span.cur small { color: var(--ink); font-weight: 600; }
.st-fb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.st-meter + .st-mnote { margin-top: 5px; }
.st-mnote { font-size: 12px; color: var(--ink-3); margin-bottom: 14px; }
.st-mt { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); }
.st-mt b { font-family: var(--mono); } .st-mt b.good { color: var(--moss); } .st-mt b.warn { color: #c99a3a; } .st-mt b.bad { color: var(--brick, #c0563f); }
.st-mbar { height: 7px; border-radius: 4px; background: var(--paper-2); margin-top: 6px; overflow: hidden; }
.st-mbar > i { display: block; height: 100%; border-radius: 4px; background: var(--moss); } .st-mbar > i.warn { background: #c99a3a; } .st-mbar > i.bad { background: var(--brick, #c0563f); }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ledger { border-left: 1px solid var(--rule); padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.st-ledger > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.st-ledger b { font-family: var(--mono); color: var(--ink); } .st-ledger b.good { color: var(--moss); } .st-ledger b.bad { color: var(--brick, #c0563f); }
.st-net { border-top: 1px solid var(--rule-2); padding-top: 8px; margin-top: 2px; }
.st-net span { font-weight: 600; color: var(--ink); } .st-net b { font-size: 15px; }
.st-next { margin-top: 16px; border-top: 1px dashed var(--rule-2); padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; }
.st-next .st-lbl { grid-column: 1 / -1; }
.st-next p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.45; }
.st-next dl { display: flex; gap: 14px; margin: 0; font-size: 12px; } .st-next dt { color: var(--ink-3); } .st-next dd { margin: 0 0 0 -8px; font-family: var(--mono); }
.st-nf { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.st-fac.none .st-next { border-top: 0; padding-top: 0; }
.st-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 6px; }
.st-item { border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; overflow: hidden; }
.st-item canvas { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--paper-2); }
.st-ib { padding: 12px 14px; }
.st-spec { display: flex; gap: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin: -4px 0 10px; }
.st-coop { display: flex; align-items: center; gap: 18px; border: 1px solid var(--rule); background: var(--paper); padding: 14px 16px; }
.st-coop.on { border-color: rgba(79, 154, 98, .6); box-shadow: inset 3px 0 0 var(--moss); }
.st-coop > div { flex: 1; min-width: 0; } .st-coop p { font-size: 13px; color: var(--ink-2); margin: 4px 0 6px; line-height: 1.45; }
@media (max-width: 900px) { .st-roles, .st-fb { grid-template-columns: 1fr; } .st-ledger { border-left: 0; padding-left: 0; } .st-sum { grid-template-columns: 1fr; } .st-sum > div + div { border-left: 0; border-top: 1px solid var(--rule); } }

/* ---- Collection: the select-all box ---- */
.coll th.selcell input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--moss); }

/* ---------------- Sales panel: offers, wanted ads, the Sold/Bought ledger ---------------- */
.sl-empty { color: var(--ink-3); font-size: 13px; padding: 10px 0 4px; }
.sl-name { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-hets { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-who { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.sl-who b { color: var(--ink); font-weight: 600; }
.sl-note { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-main { min-width: 0; }
.sl-money { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; min-width: 0; }
.sl-price { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.sl-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.sl-offer canvas, .sl-row canvas, .sl-pick canvas { display: block; border-radius: 4px; background: var(--paper-3); }

/* offers on your listings: one decision per row */
.sl-offers { border-top: 1px solid var(--rule); }
.sl-offer { display: grid; grid-template-columns: 112px minmax(0, 1fr) 132px 116px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sl-offer canvas { width: 112px; height: 65px; }
.sl-pct { width: 104px; height: 4px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.sl-pct i { display: block; height: 100%; background: var(--amber); }
.sl-pct.good i { background: var(--moss); } .sl-pct.low i { background: var(--brick); }
.sl-act { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.sl-act .wurg { margin: 0 0 1px; align-self: flex-end; }

/* wanted ads */
.sl-fill { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--moss); background: rgba(79, 154, 98, .08); margin: 2px 0 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.sl-fill b { color: var(--ink); }
.sl-fill button { margin-left: auto; flex: none; }
.sl-ad { border: 1px solid var(--rule); background: var(--paper-2); padding: 11px 13px 10px; }
.sl-ad + .sl-ad { margin-top: 8px; }
.sl-ad header { display: flex; align-items: center; gap: 10px; }
.sl-ad .sl-buyer { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.sl-ad .sl-buyer b { font-family: var(--serif); font-size: 15px; font-weight: 600; white-space: nowrap; }
.sl-ad .sl-note { margin: 0; min-width: 0; }
.sl-ad header .wurg { margin-left: 0; }
.sl-want { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.sl-chip { font-size: 12px; line-height: 1.5; padding: 1px 9px; border: 1px solid var(--rule-2); border-radius: 12px; color: var(--ink-2); white-space: nowrap; }
.sl-chip.gene { color: var(--ink); border-color: var(--ink-3); font-weight: 500; }
.sl-chip i { font-style: normal; color: var(--ink-3); font-size: 11px; }
.sl-bud { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sl-bud b { font-family: var(--mono); color: var(--ink); font-size: 13.5px; font-weight: 600; }
.sl-pick { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; margin-top: 10px; padding: 7px 10px 7px 8px; background: rgba(79, 154, 98, .09); border-left: 3px solid var(--moss); }
.sl-pick canvas { width: 84px; height: 49px; }
.sl-plbl { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); margin-bottom: 2px; }
.sl-pname { font-weight: 600; font-size: 13.5px; }
.sl-pmain { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-pmoney { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.sl-pmoney b { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--moss); line-height: 1; }
.sl-pmoney span { font-size: 11px; color: var(--moss); font-family: var(--mono); white-space: nowrap; }
.sl-nopick { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); padding: 6px 10px; border-left: 3px solid var(--rule-2); }
.sl-fillnote { margin-top: 5px; padding-left: 13px; font-size: 12px; color: var(--ink-3); } /* Fill all sends another animal here (#1364) */
.sl-adfoot { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.sl-sub-h { margin: 16px 0 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sl-nofit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); }
.sl-nofit-row > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-nofit-row b { color: var(--ink); }
.sl-nofit-row .sl-bud { margin: 0; }
.sl-nofit-row .wurg { margin: 0; }
.sl-out { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.sl-out .sl-price { font-size: 15px; margin-right: 4px; color: var(--ink); }
.sl-out .wurg { margin: 0; }

/* Sold / Bought ledger */
.sl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); margin: 2px 0 12px; }
.sl-stats > div { padding: 10px 14px 11px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-stats > div + div { border-left: 1px solid var(--rule); }
.sl-stats b { font-family: var(--mono); font-size: 19px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sl-stats small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sl-bar input { flex: 1; min-width: 180px; margin-left: 4px; }
.sl-month { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0 6px; border-bottom: 1px solid var(--rule-2); font-family: var(--serif); font-size: 14px; font-weight: 600; }
.sl-month span { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-3); }
.sl-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 150px) 104px; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.sl-row canvas { width: 84px; height: 49px; }
.sl-row .sl-name { font-size: 14px; }
.sl-row .sl-who { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-row .sl-price { font-size: 16px; }
.sl-row.players .sl-price { color: var(--moss); }
.sl-row.wholesale .sl-price { color: var(--ink-2); }
.sl-more { display: block; margin: 14px auto 0; }

.lb-line { margin: -2px 0 8px; } /* lowball offers declined today (#954) */

/* ---------------- dialogs: summary table and option-card checkbox ---------------- */
.dlg-sum { display: flex; flex-direction: column; border-top: 1px solid var(--rule); margin: 2px 0 10px; }
.dlg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink); }
.dlg-row b { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.dlg-row.muted { color: var(--ink-2); }
.dlg-row.muted b { font-family: inherit; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.dlg-note { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.dlg-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px; margin: 2px 0 0; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--paper-2); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink); transition: border-color .12s, background .12s; }
.dlg-check:hover { border-color: var(--ink-3); }
.dlg-check input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--ink-3); border-radius: 5px; background: var(--paper); cursor: pointer; }
.dlg-check input[type=checkbox]::before { width: 11px; height: 11px; background: #fff; }
.dlg-check input[type=checkbox]:checked { background: var(--moss); border-color: var(--moss); }
.dlg-check input[type=checkbox]:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.dlg-check:has(input:checked) { border-color: var(--moss); background: rgba(79, 154, 98, .1); }
.dlg-check.risky input[type=checkbox]:checked { background: var(--brick); border-color: var(--brick); }
.dlg-check.risky:has(input:checked) { border-color: var(--brick); background: rgba(201, 97, 78, .1); }
.dlg-ct { display: flex; flex-direction: column; gap: 3px; }
.dlg-ct b { font-size: 14px; font-weight: 600; }
.dlg-ct small { font-size: 12px; color: var(--ink-3); }
.dialog button[type=submit]:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- Sales › Wanted ads, read top to bottom ---------------- */
.sl-wtools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 2px 0 10px; }
.sl-seg { display: inline-flex; align-items: center; border: 1px solid var(--rule-2); border-radius: 16px; overflow: hidden; }
.sl-seg span { padding: 0 8px 0 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sl-seg button { border: 0; border-left: 1px solid var(--rule-2); border-radius: 0; background: transparent; color: var(--ink-2); padding: 5px 12px; font-size: 12.5px; min-height: 0; }
.sl-seg button.on { background: var(--ink); color: var(--paper); }
.sl-inc { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.sl-ad .sl-adh { display: flex; align-items: flex-start; gap: 12px; }
.sl-adwho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-adwho b { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.sl-adwho .sl-note { margin: 0; }
.sl-adh .wurg { margin: 2px 0 0; }
.sl-terms { display: flex; align-items: flex-end; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.sl-tw { flex: 1; min-width: 0; }
.sl-k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.sl-terms .sl-want { margin: 0; }
.sl-tp { text-align: right; flex: none; }
.sl-tp b { font-family: var(--mono); font-size: 19px; font-weight: 600; line-height: 1; }
.sl-nopick { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 9px 11px; border-left: 3px solid var(--rule-2); background: var(--paper); font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.sl-nopick b { color: var(--ink-2); font-weight: 600; }
.sl-nopick .lock { flex: none; margin-top: 2px; color: var(--amber); }
.sl-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--amber); }
.sl-adfoot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.sl-adfoot .sl-pass { margin-left: auto; }
/* what the ads are matched against (#664), the Undecided fold, and each fit's role badge and project chip */
.sl-wscope { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); }
.wrow .wn .rbadge { margin: 0 0 0 4px; padding-top: 0; padding-bottom: 0; font-size: 11px; }
.wrow .wn .wproj, .sl-pmain .wproj { margin: 0 0 0 4px; }
.wrow .wacts { display: flex; gap: 6px; }
.wund-rows { border-top-style: dashed; }
.sl-nofit-row > span:first-child b { font-family: var(--serif); font-size: 13.5px; }
.dlg-check input[type=checkbox]:focus { box-shadow: none; outline: none; }
.dlg-check input[type=checkbox]:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* ---------------- Breeding › Hide for-sale: two toggle buttons ---------------- */
.hl-seg .ctl-chk { position: relative; gap: 7px; padding: 0 12px 0 10px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s; }
.hl-seg .ctl-chk input[type=checkbox] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.hl-tick { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: grid; place-items: center; }
.hl-tick::after { content: ""; width: 6px; height: 3px; border: solid currentColor; border-width: 0 0 1.8px 1.8px; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.hl-word { font-weight: 500; }
.hl-n { font-family: var(--mono); font-size: 10.5px; line-height: 16px; min-width: 16px; padding: 0 5px; border-radius: 8px; background: var(--paper-3); color: var(--ink-2); text-align: center; }
.hl-seg .ctl-chk:has(input:checked), .hl-seg .ctl-chk:has(input:checked):hover { background: var(--ink); color: var(--paper); }
.hl-seg .ctl-chk:has(input:checked) .hl-tick { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.hl-seg .ctl-chk:has(input:checked) .hl-tick::after { opacity: 1; }
.hl-seg .ctl-chk:has(input:checked) .hl-n { background: var(--ink-2); color: var(--paper); }
:root[data-theme="dark"] .hl-seg .hl-f:has(input:checked) .ctl-sym { color: #b5457a; }
:root[data-theme="dark"] .hl-seg .hl-m:has(input:checked) .ctl-sym { color: #2f6f9f; }
.hl-seg .ctl-chk:has(input:focus-visible) { outline: 2px solid var(--moss); outline-offset: -2px; }

/* ---------------- ♀ / ♂ icons (client/js/sexicons.js) ---------------- */
svg.sx { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* svg only: a page still running an old salesauto.js gave its row div this class and collapsed it to 1em (#1061) */
.sex { display: inline-grid; place-items: center; vertical-align: -0.15em; }
.sex .sx { width: 0.92em; height: 0.92em; stroke-width: 3; vertical-align: 0; }
.ctl-sym .sx { width: 14px; height: 14px; stroke-width: 2.8; }
.coll-seg .sx, .mk-sex .sx { width: 14px; height: 14px; stroke-width: 2.6; }
.coll-seg [data-csex="F"]:not(.on) .sx, .mk-sex [data-sex="F"]:not(.on) .sx { color: #c05a8a; }
.coll-seg [data-csex="M"]:not(.on) .sx, .mk-sex [data-sex="M"]:not(.on) .sx { color: #4a86b4; }
.sl-chip .sx { width: 12px; height: 12px; stroke-width: 2.8; margin-right: 1px; }
.incx-noimg .sx { width: 18px; height: 18px; }
.sexbadge .sx { width: 12px; height: 12px; stroke-width: 2.8; margin-right: 2px; }

/* ---------------- Level page: hero, the road to prestige, XP sources, perks ---------------- */
.lv-ring.huge { flex: none; width: 104px; height: 104px; } .lv-ring.huge::before { inset: 9px; }
.lv-ring.huge b { font-family: var(--serif); font-size: 42px; font-weight: 700; }
.lv-rank { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.lv-xpbar { height: 12px; border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.lv-xpbar i { display: block; height: 100%; border-radius: 6px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 6px, transparent 6px 12px), linear-gradient(90deg, var(--moss), var(--moss-2)); }
.lv-xpline { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.lv-xpline b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.lv-next { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.lv-next b { color: var(--ink); }
.lv-next .lv-ico { color: var(--amber); }
.lv-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the trail */
.lv-trail { display: block; width: 100%; height: auto; margin: 2px 0; overflow: visible; }
.lt-dot { fill: var(--rule-2); }
.lt-dot.on { fill: rgba(243, 236, 221, .7); }
.lt-ms circle { fill: var(--paper-2); stroke: var(--rule-2); stroke-width: 2.5; }
.lt-ms.unlock circle { stroke: var(--amber); }
.lt-ms.on circle { fill: var(--moss); stroke: var(--moss-2); }
.lt-ms.unlock.on circle { fill: var(--amber); stroke: var(--amber); }
.lt-ms text, .lt-cur text { text-anchor: middle; font: 700 11px var(--mono); fill: var(--ink-2); }
.lt-ms.on text { fill: #fff; }
.lt-cur circle { fill: var(--paper); stroke: var(--moss); stroke-width: 4; }
.lt-cur text { font-size: 14px; fill: var(--ink); }
.lt-lbl { text-anchor: middle; font: 600 11.5px Roboto, system-ui, sans-serif; fill: var(--ink-3); }
.lt-lbl.on { fill: var(--ink-2); }
.lt-lbl.unlock { fill: var(--amber); }
.lt-lbl.you { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; fill: var(--moss); }
.lt-lead { fill: none; stroke: var(--ink-3); stroke-width: 1; opacity: .7; } /* a label that had to step away from its bead (#1054) */
@media (max-width: 560px) { .lt-lbl:not(.you), .lt-lead { display: none; } }
/* milestones under it */
.lv-ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 20px; margin-top: 4px; }
.lv-m { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.lv-mlv { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--rule-2); font: 700 12px var(--mono); color: var(--ink-3); }
.lv-m.unlock .lv-mlv { border-color: var(--amber); color: var(--amber); }
.lv-m.on .lv-mlv { background: var(--moss); border-color: var(--moss); color: #fff; }
.lv-m.unlock.on .lv-mlv { background: var(--amber); border-color: var(--amber); }
.lv-m b { font-size: 13.5px; }
.lv-m small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.lv-mst { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.lv-m.on .lv-mst { color: var(--moss); }
.lv-mst .lv-ico { width: 14px; height: 14px; stroke-width: 2.4; }
/* XP sources */
.lv-src { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.lv-s { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); }
.lv-sico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--paper); color: var(--moss); }
.lv-sico .lv-ico { width: 22px; height: 22px; }
.lv-sname { font-size: 13px; font-weight: 600; }
.lv-sbar { height: 5px; margin: 6px 0 4px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.lv-sbar i { display: block; height: 100%; border-radius: 3px; background: var(--moss); }
.lv-ssub { font-size: 11.5px; color: var(--ink-3); }
.lv-ssub b { font-family: var(--mono); color: var(--ink-2); }
.lv-sxp { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--moss); }
/* the notes, and the keep / lose / start lines of the start section (the perks, ranks and hero are prestige.css's) */
.lv-note { margin: -2px 0 10px; }
.lv-pk { margin: 6px 0 0; } /* the keep / lose / start lines in the prestige callout (#783) */

/* ---------------- the guided tutorial (client/js/coach.js) ---------------- */
.coach { position: fixed; z-index: 45; width: 350px; max-width: calc(100vw - 20px); padding: 13px 16px 12px; background: var(--paper); background-image: var(--grain); border: 1px solid var(--ink); border-left: 4px solid #e0a52f; border-radius: 8px; box-shadow: 0 18px 44px rgba(0, 0, 0, .38); color: var(--ink); transition: border-color .2s; }
.coach-at-corner { top: 70px; right: 22px; }
.coach-at-bottom { left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; }
.coach.ok { border-left-color: var(--moss); }
.coach-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.coach-end { min-height: 0; padding: 2px 4px; border: 0; background: transparent; color: var(--ink-3); font-size: 11.5px; text-decoration: underline; }
.coach-end:hover { color: var(--ink); background: transparent; }
.coach-bar { height: 4px; margin: 8px 0 10px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.coach-bar i { display: block; height: 100%; background: #e0a52f; transition: width .3s; }
.coach.ok .coach-bar i { background: var(--moss); }
.coach h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; }
.coach-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.coach-body p { margin: 8px 0 0; }
.coach-body b { color: var(--ink); }
.coach-check { display: flex; gap: 14px; margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.coach-check span { display: inline-flex; align-items: center; gap: 5px; }
.coach-check span.on { color: var(--moss); }
.coach-wait { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.coach-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a52f; animation: coachBlink 1.2s ease-in-out infinite; }
.coach.ok .coach-wait { color: var(--moss); } .coach.ok .coach-dot { background: var(--moss); animation: none; }
.coach-act { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.coach-sp { flex: 1; }
.coach-ring { position: fixed; z-index: 46; border: 3px solid #e0a52f; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 4px rgba(224, 165, 47, .22), 0 0 24px rgba(224, 165, 47, .55); animation: coachPulse 1.4s ease-in-out infinite; transition: left .18s, top .18s, width .18s, height .18s; }
.coach-ring.hidden { display: none; }
@keyframes coachPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(224, 165, 47, .22), 0 0 18px rgba(224, 165, 47, .45); } 50% { box-shadow: 0 0 0 9px rgba(224, 165, 47, .1), 0 0 30px rgba(224, 165, 47, .7); } }
@keyframes coachBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coach-ring, .coach-dot { animation: none; } }
.coach-first { margin: 0 0 8px !important; color: var(--ink); }
/* step aside for the animal card and the phone */
body:has(#detail:not(.hidden)) .coach-at-corner { right: 428px; }
body:has(#phone:not(.hidden)) .coach-at-corner { right: 384px; }
/* ---------------- Settings › Join our Discord ---------------- */
.discord-logo { flex: none; width: 18px; height: 18px; }
.more-discord { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #5865f2; color: #fff; text-decoration: none; font-weight: 700; }
.more-discord .discord-logo { grid-row: span 2; width: 26px; height: 26px; }
.more-discord small { font-weight: 400; font-size: 12px; opacity: .85; }
.set-discord { display: flex; align-items: center; gap: 11px; margin: 14px 0 4px; padding: 11px 12px; border-radius: 8px; background: #5865f2; color: #fff; text-decoration: none; }
.set-discord.hidden { display: none; }
.set-discord:hover { background: #4752c4; color: #fff; }
.set-discord .discord-logo { width: 24px; height: 24px; }
.set-discord span { display: flex; flex-direction: column; line-height: 1.25; }
.set-discord b { font-size: 13.5px; }
.set-discord small { font-size: 11.5px; opacity: .85; }

/* ---------------- Hatch: For sale strip on posts; Breeders › Most liked ---------------- */
.ig-sale { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: rgba(79, 154, 98, .08); font-size: 13px; }
.ig-stag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--moss); padding: 2px 7px; border-radius: 3px; }
.ig-sname { flex: 1; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-sprice { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.ig-sale button { flex: none; }
.ig-smine { flex: none; font-size: 11.5px; color: var(--ink-3); }
.br-likes { color: #d0506f; font-weight: 600; }

/* supporter items in the shop: a green seal tag; locked cards dim their picture */
.tag.sup-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(79,154,98,0.14); color: #3f8753; border: 1px solid rgba(79,154,98,0.45); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; padding: 2px 8px 2px 5px; }
.tag.sup-tag svg { width: 14px; height: 14px; fill: #4f9a62; }
.tag.sup-tag svg .egg { fill: #fff8e7; }
.specimen.sup-locked canvas { filter: saturate(0.55) brightness(0.92); }
.specimen.sup-locked .foot button[disabled] { opacity: 1; border-style: dashed; color: var(--muted, #8a8272); }

/* the buy sheet (client/js/buyconfirm.js) */
.bc { width: 100%; display: grid; gap: 14px; }
.modal.narrow:has(.bc) { width: min(560px, 94vw); }
.bc-top .lbl { display: block; margin-bottom: 2px; }
.bc-top h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.bc-ani { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; }
.bc-ani canvas { width: 170px; height: 99px; border-radius: 10px; background: rgba(0,0,0,0.25); display: block; }
.bc-meta { display: grid; gap: 4px; min-width: 0; }
.bc-meta b { font-size: 15px; line-height: 1.3; }
.bc-morph { font-size: 12.5px; color: var(--ink-3, #a79f90); }
.bc-facts { font-family: var(--mono, monospace); font-size: 12.5px; color: var(--ink-2, #d8d0c0); }
.bc-lot { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.bc-lotrow { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; }
.bc-lotrow canvas { width: 80px; height: 47px; border-radius: 6px; background: rgba(0,0,0,0.25); }
.bc-lotrow span { display: grid; } .bc-lotrow small { color: var(--ink-3, #a79f90); }
.bc-money { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--rule-2, rgba(255,255,255,0.1)); border: 1px solid var(--rule-2, rgba(255,255,255,0.1)); border-radius: 10px; overflow: hidden; }
.bc-money > div { background: var(--paper-2, #25221e); padding: 10px 12px; display: grid; gap: 3px; align-content: start; }
.bc-money b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-money .bc-price { font-size: 22px; color: #e9d9a8; }
.bc-neg { color: #f07a68; }
.bc-deal { font-size: 11.5px; font-weight: 600; }
.bc-deal.good { color: #7cc48c; } .bc-deal.high { color: #e0a24a; } .bc-deal.even { color: var(--ink-3, #a79f90); font-weight: 500; }
.bc-tub { font-size: 12.5px; line-height: 1.4; padding: 8px 11px; border-radius: 8px; background: rgba(79,154,98,0.12); border-left: 3px solid #4f9a62; }
.bc-tub.warn { background: rgba(224,162,74,0.12); border-left-color: #e0a24a; }
.bc-acts { display: flex; align-items: center; gap: 8px; }
.bc-final { flex: 1; font-size: 11.5px; color: var(--ink-3, #a79f90); }
@media (max-width: 480px) { .bc-ani { grid-template-columns: 1fr; } .bc-ani canvas { width: 100%; height: auto; aspect-ratio: 12 / 7; } .bc-money { grid-template-columns: 1fr 1fr; } .bc-money > div:first-child { grid-column: 1 / -1; } .bc-final { flex-basis: 100%; } .bc-acts { flex-wrap: wrap; } .bc-acts button { flex: 1; } }
/* dying animals: the warning bar goes deeper red, and the card says why and what to do */
#cashWarn.dying { background: #9e2a1f; font-weight: 600; padding: 9px 16px; }
.dying-note { display: grid; gap: 3px; margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: rgba(190,52,38,0.14); border: 1px solid rgba(214,76,58,0.6); border-left-width: 4px; animation: dyingpulse 1.8s ease-in-out infinite; }
.dying-note b { color: #f07a68; font-size: 13.5px; }
.dying-note span { font-size: 12.5px; line-height: 1.4; }
.stats .hp-bad b { color: #f07a68; }
@keyframes dyingpulse { 50% { border-color: rgba(214,76,58,0.25); } }
@media (prefers-reduced-motion: reduce) { .dying-note { animation: none; } }
.toast.danger { border-left-color: #c0392b; background: #fbe4df; color: #5a1a12; font-weight: 600; }
.tcard.dying { background: #9e2a1f; color: #fff; animation: cashpulse 1.6s ease-in-out infinite; }
.tcard.dying span { color: #ffd9d2; }
/* Hatch post options (a switch and what it does) and their strips */
.pc-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--rule-2, rgba(255,255,255,0.12)); border-radius: 10px; padding: 10px 12px; margin: 10px 0; cursor: pointer; }
.pc-opt input { margin-top: 2px; width: 18px; height: 18px; accent-color: #4f9a62; flex: none; }
.pc-opt-t { display: grid; gap: 2px; }
.pc-opt-t b { font-size: 13px; }
.pc-opt-t small { font-size: 12px; color: var(--ink-3, #a79f90); line-height: 1.35; }
#camShop .pc-opt { margin: 8px 0 0; }
.ig-sale.offers .ig-stag { background: #4f9a62; color: #fff; }
.ig-sale.shop .ig-stag { background: #2f5d7a; color: #fff; }
.mk-shop { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; margin: 0 0 10px; border-radius: 10px; background: rgba(47,93,122,0.18); border-left: 3px solid #2f5d7a; font-size: 13px; }

/* daily goals and the Morph Book (client/js/goalsui.js) */
.dg { display: grid; gap: 10px; }
.dg-head { display: flex; gap: 14px; align-items: center; padding: 4px 0 6px; }
.dg-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#4f9a62 calc(var(--p) * 1%), rgba(255,255,255,0.1) 0); position: relative; }
.dg-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--paper, #1f1d1a); }
.dg-ring b { position: relative; font-size: 20px; } .dg-ring small { font-size: 12px; opacity: .6; }
.dg-sub { font-size: 13px; margin: 2px 0; }
.dg-goal { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule-2, rgba(255,255,255,0.12)); border-radius: 10px; }
.dg-goal.done { border-color: rgba(79,154,98,0.55); background: rgba(79,154,98,0.08); }
.dg-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule-2, rgba(255,255,255,0.25)); display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px; }
.dg-goal.done .dg-check { background: #4f9a62; border-color: #4f9a62; }
.dg-main { display: grid; gap: 4px; min-width: 0; } .dg-main b { font-size: 13.5px; } .dg-main small { font-size: 11.5px; color: var(--ink-3, #a79f90); }
.dg-kind { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #a79f90); }
.dg-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; } .dg-bar i { display: block; height: 100%; background: #4f9a62; border-radius: 3px; }
.dg-side { display: grid; gap: 6px; justify-items: end; } .dg-xp { font-weight: 700; font-size: 12.5px; color: #d9a441; white-space: nowrap; }
.dg-goal.done .dg-xp { color: #7cc48c; }
.dg-note { margin-top: 4px; }
.mb { display: grid; gap: 10px; }
.mb-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-2, rgba(255,255,255,0.1)); border-radius: 10px; overflow: hidden; }
.mb-head > div { background: var(--paper-2, #25221e); padding: 10px; display: grid; justify-items: center; }
.mb-head b { font-size: 20px; } .mb-head small { font-size: 12px; opacity: .6; } .mb-head span { font-size: 11px; color: var(--ink-3, #a79f90); text-transform: uppercase; letter-spacing: .05em; }
.mb-tabs { display: flex; gap: 6px; } .mb-tabs button { flex: 1; } .mb-tabs button.on { background: var(--ink, #eee); color: var(--paper, #1f1d1a); }
.mb-set { border: 1px solid var(--rule-2, rgba(255,255,255,0.12)); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.mb-set.done { border-color: rgba(79,154,98,0.55); }
.mb-set-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .mb-set-h > div { display: grid; } .mb-set-h small { font-size: 12px; color: var(--ink-3, #a79f90); }
.mb-xp { font-weight: 700; font-size: 12.5px; color: #d9a441; white-space: nowrap; } .mb-set.done .mb-xp { color: #7cc48c; }
.mb-entries { display: flex; flex-wrap: wrap; gap: 5px; }
.mb-e { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--rule-2, rgba(255,255,255,0.22)); color: var(--ink-3, #a79f90); }
.mb-e.on { border: 1px solid rgba(79,154,98,0.6); background: rgba(79,154,98,0.14); color: var(--ink, #eee); }
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.mb-look { display: grid; gap: 2px; } .mb-look canvas { width: 100%; height: auto; aspect-ratio: 26 / 15; border-radius: 8px; background: rgba(0,0,0,0.2); }
.mb-look b { font-size: 12.5px; line-height: 1.25; } .mb-look small { font-size: 11px; color: var(--ink-3, #a79f90); }
/* walk mode: its bar sits above the visit bar when both show; the room hint and chat make way for it */
#walkbar kbd { font: 600 10.5px var(--mono); padding: 0 4px; margin-left: 2px; border: 1px solid currentColor; border-radius: 3px; opacity: .8; }
#walkMenuBtn kbd { font: 600 10px var(--mono); padding: 0 4px; margin-left: 6px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-3); }
#visitbar:not(.hidden) ~ #walkbar { bottom: 72px; }
body.walking #hint { display: none !important; }
body.walking .rc { bottom: 84px; }
/* ---- the shop: sticky search + categories, sort/view tools, compact rows ---- */
.shop-head { margin: -4px -4px 12px; padding: 8px 4px 10px; background: var(--paper); background-image: var(--grain); border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
/* sticky through stickyPanelHeader (#581): flush with the scroll edge in either panel size, as #322 wanted */
.shop-head.ph-stick { z-index: 6; margin-top: calc(-4px - var(--ph-ptop, 18px)); padding-top: calc(8px + var(--ph-ptop, 18px)); }
.shop-head .shop-bar { margin: 0; }
.shop-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule-2, var(--rule)); border-radius: 10px; padding: 0 10px; background: var(--paper-2, rgba(0,0,0,.15)); }
.shop-search:focus-within { border-color: var(--ink-2); }
.shop-search svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3, #a79f90); stroke-width: 2; flex: none; }
.shop-search input { flex: 1; border: 0; background: transparent; padding: 10px 0; font-size: 14px; color: var(--ink); outline: none; min-width: 0; }
.shop-search input::-webkit-search-cancel-button { display: none; }
.shop-search kbd { font-size: 11px; border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; color: var(--ink-3, #a79f90); }
.shop-qx { border: 0; background: transparent; font-size: 20px; line-height: 1; padding: 2px 4px; color: var(--ink-3, #a79f90); cursor: pointer; min-height: 0; }
.shop-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-cats button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; background: transparent; color: var(--ink-2); font-size: 13px; min-height: 0; cursor: pointer; }
.shop-cats button span { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.shop-cats button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shop-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 4px; flex-wrap: wrap; }
.shop-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3, #a79f90); text-transform: uppercase; letter-spacing: .05em; }
.shop-sort select { text-transform: none; letter-spacing: 0; font-size: 13px; }
.shop-view button { min-height: 0; padding: 4px 12px; font-size: 12.5px; }
.shop-list { display: grid; gap: 6px; margin-bottom: 8px; }
.shop-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 10px 6px 6px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2, rgba(0,0,0,.12)); }
.shop-row.plain { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
.shop-row.open { cursor: pointer; } .shop-row.open:hover { border-color: var(--ink-2); }
.shop-row canvas { width: 88px; height: 50px; border-radius: 7px; background: rgba(0,0,0,.2); display: block; }
.shop-row.nohelp { opacity: .6; } .shop-row.sup-locked canvas { filter: saturate(.55) brightness(.92); }
.sr-main { display: grid; gap: 3px; min-width: 0; }
.sr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sr-top b { font-size: 14px; }
.sr-sub { font-size: 12px; color: var(--ink-3, #a79f90); }
.sr-facts { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-blurb { color: var(--ink-3, #a79f90); }
.sr-buy { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.sr-buy .price { font-family: var(--mono, monospace); font-size: 14px; white-space: nowrap; }
.shop-found { margin: 2px 0 4px; }
.shop-none { padding: 30px 10px; }
.section.flash { animation: shopflash 1.6s ease-out; }
@keyframes shopflash { 0%, 40% { color: #d9a441; } 100% { color: inherit; } }
@media (max-width: 560px) { .shop-row { grid-template-columns: 72px minmax(0, 1fr); } .shop-row canvas { width: 72px; height: 41px; } .sr-buy { grid-column: 1 / -1; justify-content: space-between; } }
#panelBody .shop-search input { width: auto; flex: 1; height: auto; border: 0; box-shadow: none; background: transparent; padding: 10px 0; margin: 0; }
#panelBody .shop-sort { flex-direction: row; }
#panelBody .section, #panelBody [id^="shop-"] { scroll-margin-top: calc(var(--ph-h, 120px) + 8px); } /* a jump lands under the sticky header */
/* the shop's filter row: chips on the left, sort and view on the right */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.shop-bar .quick { margin: 0; flex: 1 1 auto; }
.shop-bar .shop-tools { margin: 0; flex: none; gap: 8px; flex-wrap: nowrap; }
#panelBody .shop-sort { display: inline-flex; flex-direction: row; align-items: center; gap: 0; height: 32px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 4px 0 12px; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--ink-3); background: transparent; }
#panelBody .shop-sort > span { padding-right: 2px; }
#panelBody .shop-sort .csel { display: inline-block; }
#panelBody .shop-sort .csel-btn { height: 30px; min-height: 0; border: 0; background: transparent; box-shadow: none; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
#panelBody .shop-sort select { border: 0; background: transparent; font-size: 13px; height: 30px; }
.shop-view { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; gap: 2px; }
.shop-view button { width: 34px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.shop-view button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.shop-view button.on { background: var(--ink); color: var(--paper); }
/* ---- the design dock: grouped icon buttons, the hint floating above ---- */
#designbar { background: none; background-image: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-wrap: nowrap; max-width: calc(100vw - 130px); pointer-events: none; }
#designbar > * { pointer-events: auto; }
#designbar .db-hint { max-width: min(640px, 100%); min-width: 0; flex: none; margin: 0; border: 0; padding: 6px 14px; border-radius: 999px; background: rgba(20, 18, 15, 0.82); color: #f3eee4; font-size: 13px; line-height: 1.35; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
#designbar .db-hint.bad { background: rgba(139, 42, 30, 0.92); color: #fff; }
#designbar .db-hint kbd { display: inline-block; min-width: 18px; padding: 0 5px; margin: 0 1px; border-radius: 4px; border: 1px solid rgba(255,255,255,.35); border-bottom-width: 2px; font: 600 11px/16px var(--mono, monospace); color: #fff; background: rgba(255,255,255,.08); text-align: center; }
.db-dock { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 16px; background: var(--paper); background-image: var(--grain); border: 1px solid var(--rule-2, var(--rule)); box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18); max-width: 100%; }
.db-mode { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.db-mode .db-i { color: var(--moss-2); }
.db-group { display: inline-flex; align-items: center; gap: 3px; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--rule); }
.db-group:empty, .db-ctx:not(:has(button:not(.hidden))) { display: none; }
.db-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#designbar .db-b, #designbar .db-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; min-height: 0; padding: 0 12px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
#designbar .db-b:hover, #designbar .db-chip:hover { background: var(--paper-3); }
#designbar .db-b:focus-visible, #designbar .db-chip:focus-visible { outline: 2px solid var(--moss-2); outline-offset: 1px; }
#designbar .db-cap { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 6px 0 4px; }
.db-select { gap: 2px; }
#designbar .db-chip { height: 34px; padding: 0 10px; color: var(--ink-3); }
#designbar .db-chip::before { content: none; }
#designbar .db-chip.on { background: color-mix(in srgb, var(--moss) 16%, transparent); border-color: color-mix(in srgb, var(--moss-2) 55%, transparent); color: var(--ink); }
#designbar .db-chip.on .db-i { color: var(--moss-2); }
#designbar #dbSnap, #designbar #dbMulti { color: var(--ink-3); }
#designbar #dbSnap.on, #designbar #dbMulti.on { background: color-mix(in srgb, var(--moss) 16%, transparent); border-color: color-mix(in srgb, var(--moss-2) 55%, transparent); color: var(--ink); }
#designbar #dbSnap.on .db-i, #designbar #dbMulti.on .db-i { color: var(--moss-2); }
#designbar #dbSell { color: var(--brick); border-color: color-mix(in srgb, var(--brick) 55%, transparent); }
#designbar #dbSell:hover { background: color-mix(in srgb, var(--brick) 14%, transparent); }
#designbar #dbAgain { color: var(--moss-2); }
#designbar .db-done { margin-left: 6px; background: var(--moss); color: #fff; border-color: var(--moss); padding: 0 16px; font-weight: 600; }
#designbar .db-done:hover { background: var(--moss-2); }
@media (max-width: 1320px) { .db-select .db-l, .db-select .db-cap { display: none; } #designbar .db-chip { padding: 0 9px; } }
@media (max-width: 1120px) { .db-group:not(.db-ctx) .db-b .db-l, .db-mode span { display: none; } #designbar .db-b { padding: 0 10px; } }
@media (max-width: 820px) { #designbar #dbSell .db-l { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } }
.db-dock.tight .db-select .db-l, .db-dock.tight .db-select .db-cap, .db-dock.tight .db-mode span { display: none; }
.db-dock.tighter .db-group:not(.db-ctx) .db-b .db-l { display: none; }
body.designing .rc { bottom: 132px; }
/* today's goals in the top bar */
.goals-chip { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 11px 3px 4px; min-height: 0; color: var(--ink); cursor: pointer; }
.goals-chip .gc-txt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.goals-chip b { font-size: 13px; font-variant-numeric: tabular-nums; }
.goals-chip.all { border-color: #4f9a62; }
.gc-ring { --p: 0; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#4f9a62 calc(var(--p) * 1%), var(--rule) 0); position: relative; flex: none; }
.gc-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--paper, #1f1d1a); }
.gc-ring.all::after { inset: 5px; background: #4f9a62; }
.goals-cell { position: relative; }
.goals-pop { width: 380px; max-width: calc(100vw - 32px); padding: 12px 14px 14px; left: -60px; right: auto; white-space: normal; box-sizing: border-box; }
.goals-pop .dg-goal { grid-template-columns: 26px minmax(0, 1fr) auto; }
.goals-pop .dg-ring::before { background: var(--paper); }
body.walking #hint { display: none !important; } /* the corner tip would cover the walking bar */
/* the sell sheet (confirmSell in client/js/buyconfirm.js) */
.bc-sub { font-size: 11.5px; color: var(--ink-3); }
.bc-money .bc-pos { color: #7cc48c; }
.bc-tub.danger { background: rgba(190,52,38,.14); border-left-color: #d64c3a; }
.bc-tub.danger b { color: #f07a68; }
/* ---- the desktop top bar (#185): stats with icons, ticking money, one chip style, one control style ---- */
#hud .ledger { align-items: stretch; }
#hud .cell.stat { flex-direction: row; align-items: center; gap: 10px; padding: 0 18px; position: relative; }
#hud .st-i { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#hud .cash-cell .st-i { stroke: #d9a441; } #hud .worth-cell .st-i { stroke: var(--moss-2); }
#hud .st-body { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
#hud .st-body .lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
#hud .st-val { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; transition: color .5s; display: inline-flex; align-items: center; gap: 8px; }
#hud #hDate { font-family: var(--sans); font-size: 15.5px; font-weight: 500; }
#hud .tick-up .st-val { color: #6fcf8a; transition: none; } #hud .tick-down .st-val { color: #f07a68; transition: none; }
#hud .st-delta { position: absolute; right: 8px; top: 6px; font: 600 11px/1 var(--mono, monospace); opacity: 0; pointer-events: none; }
#hud .tick-up .st-delta { color: #6fcf8a; } #hud .tick-down .st-delta { color: #f07a68; }
#hud .st-delta.show { animation: stdelta 1.8s ease-out forwards; }
@keyframes stdelta { 0% { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
#hud .cell:not(.tick-up):not(.tick-down) .st-val { transition: color 1.2s; }
#hud .st-meter { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
#hud .st-meter i { display: block; height: 100%; border-radius: 3px; background: var(--moss-2); transition: width .4s; }
#hud .st-meter i.low { background: var(--amber); }
#hud .h-space { font-size: 11px; margin: 0; }
/* the chips: level, goals, online in one pill style */
#hud .chips { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid var(--rule); }
#hud .chips .cell { border-right: 0; padding: 0; position: relative; }
#hud .level-chip, #hud .goals-chip, #hud .online-chip { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 5px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s; }
#hud .online-chip { padding: 0 14px 0 12px; color: var(--ink-2); }
#hud .level-chip:hover, #hud .goals-chip:hover, #hud .online-chip:hover { background: var(--paper-3); border-color: var(--ink-3); }
#hud .level-chip .lv-ring { width: 28px; height: 28px; }
#hud .lv-meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
#hud .lv-rank { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
#hud .lv-sub { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
#hud .goals-chip { padding-left: 8px; } #hud .goals-chip .gc-ring { width: 22px; height: 22px; }
/* the controls on the right, and you */
#hud .hud-right { gap: 8px; }
#hud .hud-right .tool { height: 36px; min-height: 0; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 13.5px; }
#hud .hud-right .tool:hover { background: var(--paper-3); border-color: var(--ink-3); }
#hud .hud-right .tool svg { width: 17px; height: 17px; }
#hud .hud-right .tool.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#hud .who-chip { height: 36px; min-height: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 4px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-family: var(--serif); font-size: 15px; cursor: pointer; max-width: 200px; }
#hud .who-chip:hover { background: var(--paper-3); }
#hud .who-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--sans); color: #fff; flex: none; }
#hud .who-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1600px) { #hud .cell.stat { padding: 0 14px; } #hud .lv-sub { display: none; } }
@media (max-width: 1440px) { #hud .hud-right .tool span { display: none; } #hud .hud-right .tool { padding: 0 10px; } #hud .st-i { display: none; } }
@media (max-width: 1280px) { #hud .who-n { display: none; } #hud .who-chip { padding: 0 4px; } #hud .lv-meta { display: none; } #hud .level-chip { padding-right: 5px; } #hud .chips { gap: 6px; padding: 0 10px; } }
@media (max-width: 1160px) { #hud .online-chip span { display: none; } #hud .online-chip { padding: 0 12px; } #hud .st-meter { display: none; } }
@media (max-width: 1280px) { #hud .who-chip { display: inline-flex; } }
/* the change floats just under the number, and the rank reads like the rest */
#hud .st-delta { top: calc(100% - 6px); bottom: auto; right: auto; left: 44px; padding: 3px 7px; border-radius: 6px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 40; white-space: nowrap; }
#hud .level-chip .lv-rank { font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
#hud .level-chip .lv-sub { font-family: var(--sans); text-transform: none; }
@media (max-width: 1440px) { #hud .hud-right .tool span { display: inline; } #hud .hud-right .tool { padding: 0 13px; } #hud .st-i { display: block; } }
@media (max-width: 1366px) { #hud .st-i { display: none; } #hud .st-delta { left: 14px; } }
@media (max-width: 1280px) { #hud .hud-right .tool span { display: none; } #hud .hud-right .tool { padding: 0 10px; } }
@media (max-width: 1560px) { #hud .hud-right .tool span { display: none; } #hud .hud-right .tool { padding: 0 10px; } }
@media (max-width: 1440px) { #hud .st-i { display: none; } #hud .st-delta { left: 14px; } }

/* ---- top bar, second pass (#185) ---- */
#hud { box-shadow: 0 1px 0 var(--rule), 0 6px 18px rgba(0,0,0,.18); border-bottom: 0; }
#hud .brand-cell { border-right: 0; padding-right: 8px; }
#hud .stats-cap { display: flex; align-items: center; align-self: center; height: 46px; margin: 0 6px; padding: 0 4px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--rule); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
#hud .stats-cap .cell.stat { border-right: 0; padding: 0 14px 0 8px; height: 100%; }
#hud .stats-cap .cell.stat + .cell.stat::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px; background: var(--rule); }
#hud .stats-cap .cell.stat + .cell.stat { padding-left: 14px; }
#hud .stats-cap .st-i { display: block; width: 32px; height: 32px; padding: 7px; border-radius: 50%; box-sizing: border-box; stroke-width: 1.7; }
#hud .date-cell .st-i { background: color-mix(in srgb, var(--sky) 16%, transparent); stroke: var(--sky); }
#hud .cash-cell .st-i { background: color-mix(in srgb, #d9a441 16%, transparent); stroke: #d9a441; }
#hud .worth-cell .st-i { background: color-mix(in srgb, var(--moss-2) 16%, transparent); stroke: var(--moss-2); }
#hud .space-cell .st-i { background: color-mix(in srgb, var(--ink-3) 18%, transparent); stroke: var(--ink-2); }
#hud .st-val { font-size: 16.5px; }
#hud .st-row { display: inline-flex; align-items: center; gap: 8px; }
#hud .st-spark { width: 52px; height: 18px; overflow: visible; }
#hud .st-spark .sp-line { fill: none; stroke: var(--moss-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#hud .st-spark .sp-fill { fill: color-mix(in srgb, var(--moss-2) 18%, transparent); stroke: none; }
#hud .st-spark.down .sp-line { stroke: #e06a57; } #hud .st-spark.down .sp-fill { fill: color-mix(in srgb, #e06a57 16%, transparent); }
#hud .st-delta { left: 50px; }
#hud .chips { border-right: 0; padding: 0 6px; }
/* goals: three segments */
#hud .goals-chip { padding: 0 14px; gap: 9px; }
#hud .goals-chip .gc-txt { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--ink-2); font-weight: 500; }
#hud .gc-segs { display: inline-flex; gap: 3px; }
#hud .gc-segs i { width: 14px; height: 6px; border-radius: 3px; background: var(--rule); position: relative; overflow: hidden; }
#hud .gc-segs i.part::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--g); background: color-mix(in srgb, var(--moss-2) 55%, transparent); }
#hud .gc-segs i.on { background: var(--moss-2); }
#hud .goals-chip.all { border-color: color-mix(in srgb, var(--moss-2) 60%, transparent); background: color-mix(in srgb, var(--moss) 12%, transparent); }
/* online: stacked faces */
#hud .online-chip { padding: 0 13px 0 6px; gap: 8px; }
#hud .on-avs { display: inline-flex; padding-left: 6px; }
#hud .on-avs span { width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--sans); color: #fff; border: 2px solid var(--paper); box-sizing: border-box; }
#hud .online-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5bc27a; box-shadow: 0 0 0 3px color-mix(in srgb, #5bc27a 25%, transparent); order: 3; margin-left: -2px; }
#hud #hOnlineN { order: 2; }
/* settings, walk, pause: one joined group */
#hud .tool-group { display: inline-flex; align-items: stretch; height: 36px; border: 1px solid var(--rule); border-radius: 11px; overflow: visible; background: var(--paper-2); }
#hud .tool-group .menu-wrap { display: flex; }
#hud .tool-group .tool { border: 0 !important; border-radius: 0; height: 34px; background: transparent; }
#hud .tool-group > .tool, #hud .tool-group > .menu-wrap { border-left: 1px solid var(--rule); }
#hud .tool-group > :first-child { border-left: 0; }
#hud .tool-group > :first-child .tool, #hud .tool-group > .tool:first-child { border-radius: 10px 0 0 10px; }
#hud .tool-group > :last-child { border-radius: 0 10px 10px 0; }
#hud .tool-group .tool:hover { background: var(--paper-3); }
#hud .tool-group .tool.on { background: var(--ink); color: var(--paper); }
#hud .who-chip { background: var(--paper-2); }
@media (max-width: 1600px) { #hud .st-spark { display: none; } }
@media (max-width: 1440px) { #hud .stats-cap .st-i { display: none; } #hud .stats-cap .cell.stat { padding: 0 12px; } #hud .st-delta { left: 12px; } #hud .goals-chip .gc-txt { display: none; } }
@media (max-width: 1280px) { #hud .on-avs { display: none; } #hud .online-chip { padding: 0 12px; } #hud .online-chip::before { order: 0; margin: 0; } }
@media (max-width: 1160px) { #hud .online-chip::before { margin: 0; } }
#hud .cell.stat { border-top: 0; padding-top: 0; }
#hud .online-chip::before { order: 0; margin: 0 0 0 4px; }
#hud .on-avs { order: 1; padding-left: 7px; }
/* one height and one corner for everything in the bar */
#hud { --hud-h: 40px; --hud-r: 12px; }
#hud .stats-cap { height: var(--hud-h); border-radius: var(--hud-r); }
#hud .stats-cap .st-i { width: 28px; height: 28px; padding: 6px; }
#hud .stats-cap .cell.stat + .cell.stat::before { top: 9px; bottom: 9px; }
#hud .level-chip, #hud .goals-chip, #hud .online-chip, #hud .who-chip { height: var(--hud-h); border-radius: var(--hud-r); background: var(--paper-2); }
#hud .tool-group { height: var(--hud-h); border-radius: var(--hud-r); }
#hud .tool-group .tool { height: calc(var(--hud-h) - 2px); }
#hud .tool-group > :first-child .tool, #hud .tool-group > .tool:first-child { border-radius: calc(var(--hud-r) - 1px) 0 0 calc(var(--hud-r) - 1px); }
#hud .tool-group > :last-child { border-radius: 0 calc(var(--hud-r) - 1px) calc(var(--hud-r) - 1px) 0; }
#hud .who-av { border-radius: 8px; width: 30px; height: 30px; }
#hud .level-chip .lv-ring { width: 30px; height: 30px; }
#hud .on-avs span { border-color: var(--paper-2); }
#hud .st-delta { top: calc(100% + 4px); }
/* the controls are icons at every width; the words stay for screen readers and tooltips carry them for the rest */
#hud .hud-right .tool span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#hud .hud-right .tool { width: 42px; padding: 0; justify-content: center; }
#hud .hud-right .tool svg { width: 18px; height: 18px; }
/* ---- the Settings window (#212) ---- */
.settings-modal { grid-template-columns: 230px 1fr; width: min(940px, 94vw); height: min(720px, 88vh); max-height: none; border-radius: 16px; border: 1px solid var(--rule); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.set-nav { padding: 22px 14px 16px; gap: 3px; background: var(--paper-2); border-right: 1px solid var(--rule); }
.set-nav h2 { font-size: 22px; margin: 0 6px 14px; }
.set-me { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); }
.set-me .ig-av.md { width: 36px; height: 36px; font-size: 15px; flex: none; }
.set-me span { display: grid; min-width: 0; } .set-me b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-me small { font-size: 11.5px; color: var(--ink-3); }
.set-nav button { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 14px; }
.set-nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .75; }
.set-nav button:hover { background: var(--paper-3); }
.set-nav button.on { background: var(--paper); color: var(--ink); box-shadow: inset 3px 0 0 var(--moss-2), 0 1px 0 var(--rule); }
.set-nav button.on svg { opacity: 1; color: var(--moss-2); }
.set-nav .set-discord { margin-top: 14px; }
.set-body { overflow-y: auto; padding: 26px 30px 34px; }
.set-head { margin-bottom: 18px; } .set-head h3 { margin: 0; font-size: 24px; } .set-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.set-group { margin-bottom: 20px; }
.set-gt { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px 2px; }
.set-card { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); padding: 4px 16px; }
.set-group.danger .set-gt { color: var(--brick); }
.set-group.danger .set-card { border-color: color-mix(in srgb, var(--brick) 50%, transparent); background: color-mix(in srgb, var(--brick) 7%, var(--paper-2)); }
.set-card .set-row { padding: 13px 0; gap: 14px; justify-content: flex-start; }
.set-card .set-row .set-text { flex: 1; }
.set-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2); }
.set-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.set-row.danger .set-ico { color: var(--brick); border-color: color-mix(in srgb, var(--brick) 40%, transparent); }
.set-text b { font-size: 14px; font-weight: 600; } .set-text span { color: var(--ink-3); line-height: 1.45; }
.set-pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.set-note { margin: 10px 2px 0; font-size: 12px; color: var(--ink-3); }
.set-card .set-seg button { min-height: 0; height: 32px; }
/* picker tiles */
.set-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 0; }
.set-tiles.three { grid-template-columns: repeat(3, 1fr); }
.set-tile-wrap { display: contents; }
.set-tile { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 10px 10px 12px; min-height: 0; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.set-tile:hover { border-color: var(--ink-3); }
.set-tile.on { border-color: var(--moss-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss-2) 22%, transparent); }
.set-tile b { font-size: 13.5px; margin-top: 6px; } .set-tile small { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.tp { display: block; width: 100%; height: 64px; border-radius: 8px; border: 1px solid var(--rule); position: relative; overflow: hidden; }
.tp.light { background: #f3eee4; } .tp.dark { background: #1f1d1a; }
.tp::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; }
.tp.light::before { background: #e9e2d4; border-bottom: 1px solid #d6cdb9; } .tp.dark::before { background: #27241f; border-bottom: 1px solid #3a352e; }
.tp::after { content: ''; position: absolute; left: 10px; top: 24px; width: 45%; height: 30px; border-radius: 6px; }
.tp.light::after { background: #fff; border: 1px solid #d6cdb9; box-shadow: 70px 6px 0 -6px #2f5d3a; } .tp.dark::after { background: #27241f; border: 1px solid #3a352e; box-shadow: 70px 6px 0 -6px #4e8f5f; }
.tq { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 40px; padding: 0 2px; }
.tq b { flex: 1; border-radius: 3px; background: var(--rule); }
.tq b:nth-child(1) { height: 35%; } .tq b:nth-child(2) { height: 65%; } .tq b:nth-child(3) { height: 100%; }
.tq-low b:nth-child(1), .tq-medium b:nth-child(-n+2), .tq-high b { background: var(--moss-2); }
/* account card */
.set-me-card { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 20px; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper-2); }
.set-me-card .ig-av.lg { width: 52px; height: 52px; font-size: 22px; flex: none; }
.set-me-card > div { flex: 1; display: grid; gap: 3px; } .set-me-card b { font-size: 17px; } .set-me-card span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1180px) { .settings-modal { grid-template-columns: 196px 1fr; } .set-body { padding: 22px 22px 30px; } .set-tiles.three { grid-template-columns: 1fr 1fr 1fr; } }
.set-me-card .ig-av.lg, .set-me .ig-av.md { aspect-ratio: 1; overflow: hidden; flex: none; }
.set-me-card .ig-av.lg { width: 52px !important; height: 52px !important; min-width: 52px; }
.set-me-card .ig-av img, .set-me .ig-av img { width: 100%; height: 100%; object-fit: cover; }
/* the online pop-over (#210) */
#hud .online-pop:not(.goals-pop):not(.space-pop) { width: 360px; padding: 0; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2); overflow: hidden; white-space: normal; left: auto; right: 0; top: calc(100% + 8px); }
.on-head { padding: 13px 16px 11px; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.on-head > div { display: grid; gap: 3px; }
.on-head b { font-size: 14px; }
.on-head span { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.on-list { max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.on-row { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: pointer; }
.on-row:hover, .on-row:focus-visible { background: var(--paper-2); outline: none; }
.on-row .ig-av.md { width: 38px; height: 38px; font-size: 15px; }
.on-dot { position: absolute; left: 36px; top: 35px; width: 11px; height: 11px; border-radius: 50%; background: #5bc27a; border: 2px solid var(--paper); }
.on-row:hover .on-dot { border-color: var(--paper-2); }
.on-main { display: grid; gap: 2px; min-width: 0; }
.on-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.on-name b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.on-lv { flex: none; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 6px; display: inline-grid; place-items: center; font: 700 10.5px/1 var(--sans); color: var(--moss-2); background: color-mix(in srgb, var(--moss) 16%, transparent); border: 1px solid color-mix(in srgb, var(--moss-2) 40%, transparent); }
.on-fol { flex: none; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--sky); }
.on-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.on-acts { display: flex; gap: 4px; opacity: .55; transition: opacity .12s; }
.on-row:hover .on-acts, .on-row:focus-within .on-acts { opacity: 1; }
.on-btn { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.on-btn:hover { color: var(--ink); border-color: var(--ink-3); background: var(--paper-3); }
.on-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.on-row.you { margin-top: 4px; border-top: 1px dashed var(--rule); border-radius: 0 0 10px 10px; padding-top: 10px; }
.on-row.you .on-name b { color: var(--ink-2); }
.on-empty { padding: 14px 10px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.on-foot { padding: 9px 16px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-3); background: var(--paper-2); }
#hud .online-pop:not(.goals-pop):not(.space-pop) { left: 0; right: auto; }

/* ---- the animal window (#219) ---- */
.modal.am-modal { width: min(1060px, 95vw); padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 30px 70px rgba(0,0,0,.45); max-height: 90vh; }
.am2 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; max-height: 90vh; }
.am-left { overflow-y: auto; padding: 18px 20px 24px; min-width: 0; }
.am-side { overflow-y: auto; padding: 24px 22px 20px; border-left: 1px solid var(--rule); background: var(--paper-2); display: flex; flex-direction: column; gap: 14px; }
.am-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); font-size: 20px; line-height: 1; z-index: 2; }
.am-photo { border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #f7f3ea, #e2d9c6); border: 1px solid var(--rule); }
:root[data-theme="dark"] .am-photo { background: radial-gradient(120% 90% at 50% 40%, #34302a, #191714); }
.am-photo canvas { display: block; width: 100%; height: auto; aspect-ratio: 1040 / 600; }
.am-photo.small { flex: none; width: 220px; }
.am-sec { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 18px 2px 8px; }
.am-left .genetbl { width: 100%; margin: 0; }
.am-title { display: flex; align-items: flex-start; gap: 8px; padding-right: 30px; }
.am-title h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.am-title.small h2 { font-size: 16px; }
.am-morph { font-size: 12.5px; color: var(--ink-3); margin-top: -8px; }
.am-hets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -4px; }
.am-het { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--rule-2, var(--rule)); color: var(--ink-3); }
.am-het.sure { border-style: solid; color: var(--ink-2); }
.am-note { font-size: 12px; color: var(--ink-3); }
.am-side .am-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.am-side .am-stats > div, .am-lotbody .am-stats > div { background: var(--paper); border: 0; padding: 9px 12px; min-width: 0; display: grid; gap: 2px; }
.am-stats > div span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.am-stats > div b { font-family: var(--sans); font-size: 14.5px; font-weight: 600; }
.am-pricebox { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); display: grid; gap: 4px; }
.am-plabel { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.am-price { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: #e9d9a8; line-height: 1.1; }
:root[data-theme="light"] .am-price { color: #7a5a14; }
.am-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.am-deal { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); }
.am-deal.good { color: #7cc48c; border-color: color-mix(in srgb, #7cc48c 45%, transparent); }
.am-deal.high { color: #e0a24a; border-color: color-mix(in srgb, #e0a24a 45%, transparent); }
.am-rarity { margin-top: 4px; }
.am-seller { display: grid; gap: 1px; padding: 0 2px; } .am-seller b { font-size: 14px; } .am-seller small { font-size: 11.5px; color: var(--ink-3); }
.am-actions { display: grid; gap: 8px; margin-top: auto; }
.am-actions button { width: 100%; height: 40px; min-height: 0; border-radius: 10px; }
.am-actions button.big { height: 46px; font-size: 15px; font-weight: 600; }
.am-lotcard { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.am-lotcard + .am-lotcard { margin-top: 10px; }
.am-lotbody { display: grid; gap: 10px; align-content: start; min-width: 0; flex: 1; }
.am-lotbody .am-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 0; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.am-genes summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .am2 { grid-template-columns: 1fr; overflow-y: auto; } .am-left, .am-side { overflow: visible; } .am-side { border-left: 0; border-top: 1px solid var(--rule); } .am-lotcard { flex-direction: column; } .am-photo.small { width: 100%; } }

/* ---- every window and popup: rounded, a soft edge instead of the hard ink outline (#240) ---- */
.modal { border: 1px solid var(--rule-2); border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25); }
.modal.narrow { padding: 24px 26px 20px; }
.online-pop { border: 1px solid var(--rule-2); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2); }
.dialog h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.dlg-head { display: flex; align-items: center; gap: 14px; }
.dlg-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--sky) 18%, transparent); color: var(--sky); border: 1px solid color-mix(in srgb, var(--sky) 40%, transparent); }
.dlg-ico.danger { background: rgba(201,97,78,.15); color: #e07a66; border-color: rgba(201,97,78,.45); }
.dlg-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.dlg-acts button { height: 38px; min-height: 0; padding: 0 16px; border-radius: 9px; }
/* the pause popup: what stops and what keeps going */
.pz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pz-col { padding: 11px 13px 12px; border-radius: 11px; border: 1px solid var(--rule); background: var(--paper-2); }
.pz-col .lbl { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pz-col .lbl::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.pz-col.go .lbl::before { background: #7cc48c; box-shadow: 0 0 0 3px rgba(124,196,140,.18); }
.pz-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.pz-col.stop li::before { content: '‖'; display: inline-block; width: 16px; color: var(--sky); font-weight: 700; }
.pz-col.go li::before { content: '›'; display: inline-block; width: 16px; color: #7cc48c; font-weight: 700; }
@media (max-width: 480px) { .pz { grid-template-columns: 1fr; } }
#pausedBar { gap: 10px; padding: 7px 16px; background: color-mix(in srgb, var(--sky) 88%, #000); }
#pausedBar > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; flex: none; }
#pausedBar button { border-radius: 999px; padding: 0 14px; height: 28px; min-height: 0; font-weight: 600; }

/* ---- today's goals, the top-bar dropdown (#237) ---- */
#hud .goals-pop { width: 400px; padding: 0; overflow: hidden; background: var(--paper); background-image: none; }
.goals-pop .dg { gap: 0; }
.dg-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dg-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; }
.goals-pop .dg-head { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.dg-ring { width: 58px; height: 58px; background: conic-gradient(#4f9a62 calc(var(--p) * 1%), var(--paper-3, rgba(255,255,255,0.1)) 0); }
.dg-ring::before { inset: 6px; background: var(--paper-2, var(--paper)); }
.dg-ring b { font-size: 19px; font-variant-numeric: tabular-nums; }
.dg-hmain { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dg-sub { font-size: 14px; margin: 1px 0 0; color: var(--ink); }
.dg-sub b { color: #d9a441; }
.dg-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.dg-meta .dg-ico { width: 13px; height: 13px; }
.dg-streak { display: grid; justify-items: center; gap: 0; padding: 6px 10px; border-radius: 10px; background: rgba(224,122,58,.12); border: 1px solid rgba(224,122,58,.35); color: #e8894a; line-height: 1.05; }
.dg-streak .dg-ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.dg-streak b { font-size: 16px; } .dg-streak small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.dg-list { display: grid; gap: 8px; }
.goals-pop .dg-list { gap: 0; }
.dg-goal { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; border-radius: 12px; }
.goals-pop .dg-goal { border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); padding: 13px 16px; }
.goals-pop .dg-goal.done { background: rgba(79,154,98,0.07); }
.dg-kico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; --k: #6fa3c9; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); }
.dg-kico .dg-ico { width: 19px; height: 19px; }
.dg-goal.k-breed .dg-kico { --k: #d98fb0; } .dg-goal.k-biz .dg-kico { --k: #d9a441; } .dg-goal.k-social .dg-kico { --k: #6fa3c9; }
.dg-goal.done .dg-kico { --k: #7cc48c; background: #4f9a62; color: #fff; border-color: #4f9a62; }
.dg-goal.done .dg-kico .dg-ico { stroke-width: 2.6; }
.dg-kind { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; }
.dg-goal.k-breed .dg-kind { color: #d98fb0; } .dg-goal.k-biz .dg-kind { color: #d9a441; } .dg-goal.k-social .dg-kind { color: #6fa3c9; }
.dg-main b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dg-goal.done .dg-main b { color: var(--ink-2); }
.dg-prog { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.dg-prog .dg-bar { flex: 1; height: 6px; background: var(--paper-3, rgba(255,255,255,0.1)); }
.dg-prog small { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); min-width: 30px; text-align: right; }
.dg-goal.done .dg-bar i { background: #7cc48c; }
.dg-side { display: flex; align-items: center; gap: 6px; }
.dg-xp { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(217,164,65,.12); border: 1px solid rgba(217,164,65,.35); }
.dg-goal.done .dg-xp { background: rgba(124,196,140,.12); border-color: rgba(124,196,140,.35); }
.dg-swap { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-3); }
.dg-swap:hover { color: var(--ink); border-color: var(--ink-3); background: var(--paper-2); }
.dg-swap .dg-ico { width: 14px; height: 14px; }
.dg-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 12.5px; color: var(--ink-2); }
.dg-foot b { color: #d9a441; }
.dg-foot.on b { color: #7cc48c; }
.dg-segs { display: flex; gap: 3px; flex: none; }
.dg-segs i { width: 14px; height: 6px; border-radius: 3px; background: var(--paper-3, rgba(255,255,255,0.12)); }
.dg-segs i.on { background: #4f9a62; }
.dg-note { margin: 0; padding: 0 16px 14px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.dg > .dg-foot, .dg > .dg-note { padding-left: 2px; padding-right: 2px; }
.goals-pop .dg > .dg-foot, .goals-pop .dg > .dg-note { padding-left: 16px; padding-right: 16px; }
/* Collection roles on the goals card (#428) */
.dg-sort { margin: 0 16px 14px; padding-top: 10px; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.dg-sortrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; text-align: left; border: 1px solid var(--rule-2); border-left: 3px dashed var(--ink-3); border-radius: 6px; background: transparent; }
.dg-sortrow.due { border-left: 3px solid var(--moss); }
.dg-sortrow b { font-size: 13px; } .dg-sortrow small { font-size: 11.5px; color: var(--ink-3); }
.dg-sortrow:hover { background: var(--paper-2); }

/* ---- level and prestige (#238) ---- */
.lvl-top { display: flex; align-items: center; justify-content: space-between; }
.am-x.lv-x { position: static; flex: none; }
.lv-s.zero { opacity: .55; }
.lv-s.zero .lv-sico { color: var(--ink-3); }
.lv-sxp { display: grid; justify-items: end; line-height: 1; }
.lv-sxp small { font-family: var(--sans); font-size: 10px; font-weight: 500; color: var(--ink-3); margin-top: 3px; }
.lv-s { border-radius: 12px; }
.lv-m { padding: 9px 0; }
.pz-col li { display: flex; gap: 2px; line-height: 1.35; }
.pz-col li::before { flex: none; }
/* the older 26px column squeezed the 36px kind icon against the text */
.goals-pop .dg-goal { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; }
/* the wanted-ad "sell anyway?" sheet (#234) */
.bc-want { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3, #a79f90); }
.bc-tub.danger { background: rgba(190,52,38,0.13); border-left-color: #d64c3a; }
.bc-tub.danger b { color: #f07a68; }
:root[data-theme="light"] .bc-tub.danger b { color: #a8321f; }
.bc.send .bc-money { grid-template-columns: 1fr 1fr 1fr; }
.bc.send .bc-money .bc-price { font-size: 20px; }
/* ---- breeding tab, finishing pass (#244) ---- */
.bhint { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1px dashed var(--rule-2); color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.bhint::before { content: 'i'; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--serif); font-style: italic; border: 1px solid var(--rule-2); color: var(--ink-3); }
/* the two slots */
.pair-board { gap: 12px; }
.pcard { position: relative; border-radius: 14px; padding: 12px; gap: 6px; --sx: #6fa3c9; }
.pcard.f { --sx: #d98fb0; }
.pcard canvas { border-radius: 10px; border: 0; }
:root[data-theme="dark"] .pcard canvas { background: radial-gradient(120% 90% at 50% 40%, #34302a, #1b1916); }
.pc-role { position: absolute; top: 20px; left: 20px; z-index: 1; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; color: var(--sx); background: rgba(20,18,15,.72); border: 1px solid color-mix(in srgb, var(--sx) 45%, transparent); }
.pcard .nm { font-size: 17px; line-height: 1.25; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .pc-actions { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: auto; }
.pcard.empty { min-height: 230px; gap: 6px; border: 1.5px dashed color-mix(in srgb, var(--sx) 40%, var(--rule-2)); background: color-mix(in srgb, var(--sx) 5%, var(--paper-2)); transition: border-color .15s, background .15s, transform .15s; font-family: var(--sans); font-style: normal; }
.pcard.empty:hover { border-color: var(--sx); background: color-mix(in srgb, var(--sx) 10%, var(--paper-2)); transform: translateY(-1px); }
.pc-sym { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; color: var(--sx); background: color-mix(in srgb, var(--sx) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sx) 40%, transparent); }
.pc-sym svg { width: 28px; height: 28px; }
.pcard.empty b { font-family: var(--serif); font-style: normal; font-size: 19px; color: var(--ink); }
.pc-ready { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: var(--sx); background: color-mix(in srgb, var(--sx) 12%, transparent); }
.pcard.empty .meta { font-style: normal; font-family: var(--sans); font-size: 12px; }
.pair-board .cross { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 18px/1 var(--sans); font-style: normal; border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--ink-3); }
/* the ticket */
.pair-ticket { border-radius: 14px; box-shadow: none; }
.pair-cta.blocked { border-radius: 14px; }
/* what the pair makes: boxed numbers */
.ev { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0 0 6px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.ev > div { background: var(--paper-2); padding: 11px 14px; gap: 2px; min-width: 0; }
.ev b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ev > div:nth-child(2) b { color: #e9d9a8; }
:root[data-theme="light"] .ev > div:nth-child(2) b { color: #7a5a14; }
.ev .meta { font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oddstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.oddchip { position: relative; overflow: hidden; border-radius: 10px !important; border: 1px solid var(--rule) !important; background: var(--paper-2); padding: 9px 11px 12px !important; display: grid; gap: 3px; }
.oddchip b { font-family: var(--mono); font-size: 15px; color: var(--moss-2, #7cc48c); }
.oddchip span { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.oddchip i { position: absolute; left: 0; bottom: 0; height: 3px; background: #4f9a62; }
/* active pairings */
.pairing canvas { border-radius: 8px; border: 0; }
:root[data-theme="dark"] .pairing canvas { background: radial-gradient(120% 90% at 50% 40%, #34302a, #1b1916); }
.pairing-blank { border-radius: 8px; }

/* Season board: her picture beside her name, his beside his */
.sb-list { border-top: 1px solid var(--rule-2); }
.sb-head, .sb-row { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) 96px; gap: 14px; }
.sb-row { padding: 10px 8px; border-radius: 10px; border-bottom: 0; margin: 2px 0; }
.sb-row + .sb-row { box-shadow: 0 -1px 0 var(--rule); }
.sb-row:hover { box-shadow: none; }
.sb-row:hover + .sb-row { box-shadow: none; }
.sb-fcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-fpic, .sb-mpic { flex: none; border-radius: 8px; background: var(--thumb-bg); }
:root[data-theme="dark"] .sb-fpic, :root[data-theme="dark"] .sb-mpic { background: radial-gradient(120% 90% at 50% 40%, #34302a, #1b1916); }
.sb-fpic { width: 96px; height: 57px; }
.sb-mpic { width: 64px; height: 38px; cursor: pointer; }
.sb-mpic:hover { outline: 1px solid var(--ink-3); }
.sb-who { gap: 5px; }
.sb-name b { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.sb-state { gap: 4px; }
.sb-state .tag { border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.sb-mcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-m-name b { font-size: 13px; font-weight: 600; }
.sb-m-name .sb-change { align-self: flex-start; margin-top: 2px; }
.sb-male .sb-assign { border-radius: 999px; padding: 6px 14px; border-style: dashed; }
.sb-end .evtag { font-size: 15px; }
@container (max-width: 600px) {
  .sb-head, .sb-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 84px; gap: 10px; }
  .sb-fpic { width: 72px; height: 43px; } .sb-mpic { width: 52px; height: 31px; }
}
@container (max-width: 460px) {
  .sb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who who" "male end"; }
  .sb-fcell { grid-area: who; } .sb-male { grid-area: male; } .sb-end { grid-area: end; }
}

/* ---- Sales, finishing pass (#245) ---- */
.sl-empty { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin: 0; border-radius: 10px; border: 1px dashed var(--rule-2); font-size: 13px; line-height: 1.4; }
.sl-empty::before { content: 'i'; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: italic 700 11px/1 var(--serif); border: 1px solid var(--rule-2); color: var(--ink-3); }
.sl-fill { border-radius: 12px; }
.sl-ad { border-radius: 14px; padding: 14px 16px 12px; }
.sl-pick { border-radius: 10px; }
.sl-offer canvas, .sl-row canvas, .sl-pick canvas { border-radius: 8px; }
:root[data-theme="dark"] .sl-offer canvas, :root[data-theme="dark"] .sl-row canvas, :root[data-theme="dark"] .sl-pick canvas { background: radial-gradient(120% 90% at 50% 40%, #34302a, #1b1916); }
.sl-offer, .sl-row { border-radius: 10px; padding-left: 6px; padding-right: 6px; }
.sl-row:hover, .sl-offer:hover { background: var(--paper-2); }
.sl-row .tag, .sl-offer .tag, .sl-who .tag { border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.sl-stats, .nb-tiles { border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.sl-month { font-size: 15px; padding-top: 18px; }
.nb-card { border-radius: 14px; background: var(--paper-2); }
.nb-best canvas { border-radius: 10px; }
:root[data-theme="dark"] .nb-best canvas { background: radial-gradient(120% 90% at 50% 40%, #34302a, #1b1916); }
.nb-tile .nb-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-tile.lead { box-shadow: inset 0 3px 0 var(--moss); }
.nb-head h4 { font-size: 15px; line-height: 1.25; }
.nb-plot { position: relative; }
.nb-none { position: absolute; inset: 0 0 24px; display: grid; place-items: center; font-size: 13px; color: var(--ink-3); }

/* ---- the hire sheet (#246) ---- */
.hire { display: grid; gap: 14px; }
.modal.narrow:has(.hire) { width: min(520px, 94vw); border-radius: 16px; }
.hire-top { display: flex; align-items: center; gap: 14px; }
.hire-top h2 { margin: 2px 0 0; font-size: 24px; line-height: 1.15; }
.hire-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #7cc48c; background: rgba(79,154,98,.14); border: 1px solid rgba(79,154,98,.4); }
.hire-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hire-what { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper-2); }
.hire-what ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.hire-what li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.hire-what li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: #7cc48c; }
.hire-money { grid-template-columns: 1fr 1fr 1fr; }
.hire-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.hire .bc-acts button { height: 40px; min-height: 0; border-radius: 10px; padding: 0 16px; }
/* an empty note is text with inline bits (a button name, a link): lay it out as a block, the i in the margin */
.sl-empty { display: block; position: relative; padding-left: 42px; }
.sl-empty::before { position: absolute; left: 14px; top: 11px; }
.nb-tile .nb-lbl { letter-spacing: .08em; }
/* the landing's H1 is the small line under the logo (it says what the game is, for search, #252); the slogan is a paragraph */
h1.ts-sub { margin: 0; font-weight: 400; line-height: inherit; }
p.ts-h1 { color: var(--ink); }

/* ---- notifications (#255): toasts on desktop and the phone site, and the Alerts rows ---- */
.toast { --tone: #8d8578; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: start; padding: 11px 10px 13px 11px; border: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); border-radius: 13px; background: var(--paper); color: var(--ink); box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.14); overflow: hidden; font-size: 13px; line-height: 1.4; cursor: pointer; animation: toastIn .28s cubic-bezier(.2,.9,.3,1.15); opacity: 1; }
.toast.out { animation: toastOut .26s ease-in forwards; }
@keyframes toastIn { from { transform: translateX(22px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(26px); opacity: 0; } }
.toast .t-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent); }
.toast .t-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.toast .t-body { min-width: 0; display: grid; gap: 1px; padding-top: 1px; }
.toast .t-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tone); }
.toast .t-text { color: var(--ink); overflow-wrap: anywhere; }
.toast .t-act { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--tone); }
.toast .t-x { width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 17px; line-height: 1; opacity: 0; transition: opacity .15s; }
.toast:hover .t-x, .toast .t-x:focus-visible { opacity: 1; }
.toast .t-x:hover { background: var(--paper-2); color: var(--ink); }
.toast .t-life { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tone); opacity: .55; transform-origin: left; animation: toastLife var(--life, 5s) linear forwards; }
.toast.held .t-life { animation-play-state: paused; } .toast.stay .t-life { display: none; }
@keyframes toastLife { to { transform: scaleX(0); } }
.toast.tone-cash { --tone: #4f9a62; } .toast.tone-ok { --tone: #4f9a62; } .toast.tone-info { --tone: #6f8fae; }
.toast.tone-breed { --tone: #c46a95; } .toast.tone-hatch { --tone: #d0902f; } .toast.tone-gold { --tone: #c99b3f; }
.toast.tone-news { --tone: #5d8fb0; } .toast.tone-warn { --tone: #d0902f; } .toast.tone-bad { --tone: #d64c3a; } .toast.tone-social { --tone: #7a8fd0; }
:root[data-theme="dark"] .toast.tone-info { --tone: #8fb0cf; } :root[data-theme="dark"] .toast.tone-cash, :root[data-theme="dark"] .toast.tone-ok { --tone: #7cc48c; }
.toast.tone-bad { border-color: color-mix(in srgb, #d64c3a 55%, var(--rule-2)); background: color-mix(in srgb, #d64c3a 8%, var(--paper)); }
.toast.ach { background: color-mix(in srgb, #c99b3f 9%, var(--paper)); }
.toast.news { opacity: .96; }
.toast.danger { color: var(--ink); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation: none; } .toast .t-life { animation: none; } }
/* the Alerts app */
.alert { position: relative; gap: 11px; padding: 10px 8px; border-radius: 10px; border-bottom: 0; align-items: center; }
.alert + .alert { box-shadow: 0 -1px 0 var(--rule); }
.alert:hover { background: var(--paper-2); box-shadow: none; }
.alert:hover + .alert { box-shadow: none; }
.alert.unread { background: color-mix(in srgb, #4f9a62 8%, transparent); }
.alert .kind { --tone: #8d8578; width: 32px; height: 32px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent); background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.alert .kind svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.alert .kind.tone-cash, .alert .kind.tone-ok { --tone: #4f9a62; } .alert .kind.tone-social { --tone: #7a8fd0; } .alert .kind.tone-info { --tone: #6f8fae; } .alert .kind.tone-bad { --tone: #d64c3a; }
.al-main { flex: 1; min-width: 0; } .al-text { line-height: 1.35; }
.al-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4f9a62; }

/* ---- the market (#256): softer cards, the rarity as a pill (it stretched full width), tidy tools ---- */
.mk-grid { gap: 14px; }
.mk-card, :root[data-theme="dark"] .mk-card { border-radius: 14px; border: 1px solid var(--rule); background: var(--paper-2); box-shadow: none; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.mk-card:hover { transform: translateY(-2px); border-color: var(--rule-2); box-shadow: 0 12px 26px rgba(0,0,0,.22); }
.mk-card.picked { border-color: var(--moss); box-shadow: 0 0 0 2px color-mix(in srgb, var(--moss) 45%, transparent); }
.mk-img canvas { border-bottom: 0; }
:root[data-theme="dark"] .mk-img canvas { background: radial-gradient(120% 90% at 50% 40%, #34302a, #1b1916); }
.mk-tag { top: 9px; left: 9px; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.mk-tag.new { right: 9px; }
.mk-sexbadge { bottom: 9px; left: 9px; padding: 3px 9px; background: rgba(20,18,15,.72); color: #ece5d6; backdrop-filter: blur(4px); }
.mk-sexbadge.M { color: #9cc3e6; } .mk-sexbadge.F { color: #eaa3c4; }
.mk-sexbadge svg { width: 11px; height: 11px; vertical-align: -1px; }
.mk-body { padding: 12px 13px 13px; gap: 5px; flex: 1; }
.mk-body .rar { align-self: flex-start; margin: 1px 0 2px; }
.mk-card .mk-price { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mk-card .mk-was { font-size: 11.5px; font-weight: 600; }
.mk-card .mk-title { font-size: 13.5px; }
.mk-card .mk-morph { font-style: normal; color: var(--ink-3); }
.mk-chips { gap: 4px; margin-top: 3px; }
.mk-chips .gene { border-radius: 999px; padding: 1px 7px; font-size: 10px; }
.mk-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); }
.mk-actions { margin-top: 8px; }
.mk-actions button { min-height: 34px; border-radius: 9px; font-weight: 600; }
.mk-bar { gap: 10px; margin-bottom: 10px; }
.mk-bar .mk-q, .mk-bar input[type=search], .mk-bar input.mk-q { border-radius: 10px; min-height: 38px; }
.mk-bar select { border-radius: 10px; min-height: 38px; }
.mk-bar .seg, .mk-f .seg { border-radius: 10px; }
.mk-bar .seg button { min-height: 36px; }
.mk-bar .chip { border-radius: 999px; min-height: 36px; }
.mk-count { font-size: 12.5px; color: var(--ink-3); }
.mk-side { border-radius: 14px; border-color: var(--rule); }
.mk-genelist { border-radius: 10px; }
/* the cards Earn, Trades and boarding use */
.specimen, :root[data-theme="dark"] .specimen { border-radius: 14px; border: 1px solid var(--rule); background: var(--paper-2); box-shadow: none; overflow: hidden; }
.specimen canvas { border-bottom: 0; }
:root[data-theme="dark"] .specimen canvas { background: radial-gradient(120% 90% at 50% 40%, #34302a, #1b1916); }
.specimen .body { padding: 14px 15px 14px; gap: 8px; flex: 1; }
.specimen h4 { font-size: 17px; }
.specimen dl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.specimen dl dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-left: 4px; }
.specimen dl dt:first-child { margin-left: 0; }
.specimen dl dd { padding: 3px 9px; border-radius: 999px; background: var(--paper-3); font-size: 12px; }
.specimen .foot { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 10px; }
.specimen .price { font-family: var(--mono); font-weight: 600; }
.specimen .foot button { border-radius: 9px; min-height: 34px; padding: 0 14px; }
/* census */
.census > div:first-child > div, .cz-head > div { border-radius: 12px; }
/* an empty list in a side panel is a quiet hint line, not a big italic gap */
#panelBody .empty { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 11px 14px; margin: 2px 0 6px; border: 1px dashed var(--rule-2); border-radius: 10px; font: 13px/1.4 var(--sans); font-style: normal; text-align: left; color: var(--ink-3); }
#panelBody .empty::before { content: 'i'; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: italic 700 11px/1 var(--serif); border: 1px solid var(--rule-2); }
/* the Collection table's empty row: the pill lives in a div, since display:flex on a td collapses the cell (#311) */
.coll td.empty-cell { padding: 6px 0 0; } .coll td.empty-cell .empty { margin: 0; } .coll td.empty-cell .empty button { margin-left: auto; }
.loan-intro { border-radius: 12px; }
/* the forced tutorial (#262): everything but the ringed thing is dimmed and takes no clicks */
.coach-block { position: fixed; z-index: 44; background: rgba(12, 10, 8, .55); }
.coach-block.hidden { display: none; }
.coach.forced { border-left-color: var(--moss); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.coach-sure { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--rule-2); font-size: 12.5px; color: var(--ink-2); }
.coach-sure span { grid-column: 1 / -1; }
.coach-sure.hidden { display: none; }
/* reconnecting after a deploy (#267): in place of the sign-in form while a saved session waits for the server */
.auth-card.resuming { display: grid; justify-items: center; gap: 8px; padding: 34px 24px; text-align: center; }
.auth-card.resuming.hidden, #authForm.hidden { display: none; }
.rs-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--rule-2); border-top-color: var(--moss); animation: rsSpin .9s linear infinite; }
@keyframes rsSpin { to { transform: rotate(360deg); } }
/* finishing an OAuth sign-in that came back without this browser's nonce (#702): name the account, ask before signing in */
.oc-scrim { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 10, 8, .55); }
.oc-sheet { width: min(420px, 100%); gap: 12px; color: var(--ink); }
.oc-sheet:focus { outline: none; } /* focus starts on the sheet, not on Yes */
.oc-sheet .oc-q { margin: 0; font: 500 20px/1.35 var(--serif); }
.oc-sheet .oc-q b { font-weight: 700; overflow-wrap: break-word; }
.oc-sheet .meta { margin: 0 0 4px; line-height: 1.45; }
/* the Staff tag by a breeder's name (#269) */
.staff-tag { display: inline-flex; align-items: center; margin-left: 5px; padding: 1px 6px; border-radius: 999px; font: 700 9.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; color: #fff; background: #2f6f9e; white-space: nowrap; }

/* Ignore on an animal's alerts (#277) */
/* the toast's actions sit in one line under the text: View, then a quieter Ignore */
.toast .t-acts { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.toast .t-acts .t-act { margin-top: 0; }
.toast .t-ign { min-height: 0; height: auto; padding: 0; border: 0; background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-3) 45%, transparent); text-underline-offset: 2px; cursor: pointer; }
.toast .t-ign:hover { color: var(--ink); background: transparent; }
/* Pop-up settings (#782): the same quiet link as Ignore; the settings row it lands on lights up for a moment */
.toast .t-cfg { min-height: 0; height: auto; padding: 0; border: 0; background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-3) 45%, transparent); text-underline-offset: 2px; cursor: pointer; }
.toast .t-cfg:hover { color: var(--ink); background: transparent; }
.np-flash { animation: npflash 2.4s ease-out; }
@keyframes npflash { 0%, 35% { background: color-mix(in srgb, var(--amber, #c99b3f) 28%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber, #c99b3f) 70%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .np-flash { animation: none; outline: 2px solid color-mix(in srgb, var(--amber, #c99b3f) 70%, transparent); } }
#cashWarn .cw-ign { margin-left: 12px; min-height: 0; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font-size: 12px; font-weight: 600; vertical-align: middle; }
#cashWarn .cw-ign:hover { background: rgba(255,255,255,.15); }
/* followers and following, tappable (#281) */
.ig-pcount { display: grid; justify-items: center; gap: 1px; min-height: 0; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.ig-pcount:hover, .ig-pcount.on { background: var(--paper-2); }
.ig-pcount b { font-size: 16px; } .ig-pcount span { font-size: 12px; color: var(--ink-3); }
.ig-people-list { margin: 8px 12px 10px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper); }
.ig-pl-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.ig-pl-h span { color: var(--ink-3); font-size: 12.5px; }
.ig-pl-x { margin-left: auto; width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1; }
.ig-people-list .ig-person { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; max-height: none; }
.ig-people-list .ig-person:last-child { border-bottom: 0; }
.ig-people-list .ig-person > span:not(.ig-av) { flex: 1; min-width: 0; display: grid; }
.ig-people-list .ig-person > .ig-av { flex: none; width: 36px; height: 36px; }
.ig-people-list .ig-person small { font-size: 11.5px; color: var(--ink-3); }
.ig-people-list .ig-person button { flex: none; }
.ig-people-list { max-height: 360px; overflow-y: auto; }
.ig-pl-none { padding: 14px 12px; font-size: 13px; color: var(--ink-3); }
/* a story ring shows: 2 px of colour, a 2 px gap, then the picture, the same outer size as Your story (#286) */
.ig-story .ig-ring.fresh, .ig-story .ig-ring.seen { padding: 4.5px; }
.ig-story .ig-ring.fresh .ig-av, .ig-story .ig-ring.seen .ig-av { width: 52px; height: 52px; min-width: 52px; font-size: 22px; }
/* Cut all eggs (#288): the clutch window's main action */
.cut-all { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-height: 0; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: var(--moss); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px color-mix(in srgb, var(--moss) 35%, transparent); transition: transform .12s ease, box-shadow .12s ease, background .12s; }
.cut-all svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cut-all:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 20px color-mix(in srgb, var(--moss) 42%, transparent); background: var(--moss-2, var(--moss)); color: #fff; }
.cut-all.busy { opacity: .85; cursor: progress; }
.cut-all.busy svg { animation: cutWobble .5s ease-in-out infinite alternate; }
@keyframes cutWobble { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.cut-all.done { background: transparent; color: var(--moss-2, var(--moss)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--moss) 55%, transparent); cursor: default; }
.cut-all.done svg { stroke-width: 2.6; }
.cut-all:disabled { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cut-all.busy svg { animation: none; } }
.hatch-head .cut-all { flex: none; align-self: center; }

/* the prestige screen (#290) is drawn by prestige.css, on the Level page's stage */
/* the pair picker lists animals not ready yet too, marked with why (#294) */
.pick-item.notyet canvas { opacity: .6; }
.pick-item .pick-why { align-self: flex-start; margin: 2px 0; font-size: 11px; }
/* market card foot: the avatar stays round, a long name ellipsizes, the age stays on one line (#296) */
.mk-foot { align-items: center; }
.mk-seller { min-width: 0; }
.mk-av { flex: none; }
.mk-seller > .mk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-foot .mk-ago { flex: none; white-space: nowrap; }

/* ---------- the expo, as a show (#298) ---------- */
.xp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.xp-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); text-align: left; border-radius: 10px; cursor: pointer; }
.xp-tabs button b { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.xp-tabs button small { font-size: 12px; color: var(--ink-3); }
.xp-tabs button.on { border-color: var(--amber); background: rgba(224, 164, 58, .08); box-shadow: inset 0 -3px 0 var(--amber); }
.xp-poster { position: relative; border: 1px solid var(--rule-2); border-radius: 12px; background: linear-gradient(180deg, rgba(224, 164, 58, .07), transparent 55%), var(--paper-2); padding: 34px 18px 16px; overflow: hidden; }
.xp-poster.nov { background: linear-gradient(180deg, rgba(90, 138, 78, .10), transparent 55%), var(--paper-2); }
.xp-bunting { position: absolute; top: 0; left: 0; width: 100%; height: 40px; color: var(--ink-3); opacity: .95; }
.xp-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.xp-bill { min-width: 0; flex: 1 1 260px; }
.xp-bill .lbl { letter-spacing: .12em; }
.xp-bill h3 { font-family: var(--serif); font-size: 34px; line-height: 1.05; margin: 4px 0 8px; }
.xp-bill h3 span { font-size: 20px; color: var(--ink-3); font-weight: 400; }
.xp-statusrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xp-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; }
.xp-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.xp-status.open { color: #7fbf6a; background: rgba(90, 138, 78, .16); }
.xp-status.open i { animation: xpPulse 1.6s ease-in-out infinite; }
.xp-status.judging { color: var(--amber); background: rgba(224, 164, 58, .14); }
@keyframes xpPulse { 50% { opacity: .25; transform: scale(.7); } }
.xp-when { font-size: 13px; color: var(--ink-2); }
.xp-clock { font-family: var(--mono); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.xp-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.xp-facts span { font-size: 12px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 99px; color: var(--ink-2); }
.xp-purse { flex: none; text-align: center; min-width: 200px; }
.xp-pool { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.xp-steps { display: flex; align-items: flex-end; justify-content: center; gap: 3px; margin-top: 6px; }
.xp-step { display: flex; flex-direction: column; align-items: center; width: 64px; }
.xp-step .xp-amt { font-size: 11.5px; font-family: var(--mono); color: var(--ink-2); margin-bottom: 3px; }
.xp-step i { display: grid; place-items: center; width: 100%; font-style: normal; font-weight: 700; font-size: 14px; color: #2b2313; border-radius: 4px 4px 0 0; }
.xp-step.p1 i { background: linear-gradient(#f0cf5e, #c9a227); }
.xp-step.p2 i { background: linear-gradient(#e2e5ea, #a9adb3); }
.xp-step.p3 i { background: linear-gradient(#dfa06c, #a8653a); }
.xp-line { margin: 18px 0 6px; }
.xp-track { position: relative; display: flex; height: 8px; border-radius: 99px; background: var(--rule); }
.xp-seg { height: 100%; }
.xp-seg.in { background: rgba(90, 138, 78, .28); border-radius: 99px 0 0 99px; }
.xp-seg.judge { background: rgba(224, 164, 58, .25); border-radius: 0 99px 99px 0; }
.xp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #5a8a4e, #e0a43a); }
.xp-now { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--paper); border: 3px solid var(--amber); box-shadow: 0 0 0 3px rgba(224, 164, 58, .18); }
.xp-ticks { position: relative; height: 34px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.xp-ticks span { position: absolute; top: 0; display: flex; flex-direction: column; white-space: nowrap; }
.xp-ticks span:first-child { left: 0; }
.xp-ticks span:nth-child(2) { transform: translateX(-100%); text-align: right; padding-right: 6px; }
.xp-ticks span:last-child { right: 0; text-align: right; }
.xp-ticks small { font-family: var(--mono); color: var(--ink-2); font-size: 11px; }
.xp-sub { margin: 8px 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.xp-floor { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-floor.empty { font-size: 13px; color: var(--ink-3); font-style: italic; }
.xp-rival { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--rule); border-radius: 99px; font-size: 12.5px; color: var(--ink); }
.xp-rival i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; color: #fff; font-style: normal; font-weight: 700; font-size: 11px; }
.xp-rival small { color: var(--ink-3); font-size: 11px; }
.xp-rival.me { border-color: var(--amber); }
.xp-mine { margin: 16px 0 6px; }
.xp-tablehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.xp-tablehead > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.xp-tablehead b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.xp-table { position: relative; }
.xp-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #2f4a3a, #263d30); border: 1px solid #3c5a47; border-bottom: 0; }
.xp-skirt { height: 18px; border: 1px solid #3c5a47; border-top: 0; border-radius: 0 0 6px 6px; background: repeating-linear-gradient(90deg, #22372b 0 14px, #2b4535 14px 28px); box-shadow: inset 0 6px 6px -4px rgba(0, 0, 0, .45); }
.xp-spot { display: flex; flex-direction: column; min-width: 0; border-radius: 8px; background: rgba(255, 255, 255, .05); padding: 6px; }
.xp-spot canvas { width: 100%; aspect-ratio: 26 / 15; border-radius: 5px; background: var(--thumb-bg); }
.xp-tent { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding: 6px 8px; background: #f4efe3; color: #2b2313; border-radius: 3px; box-shadow: 0 2px 0 #cfc5b0; font-size: 12.5px; }
.xp-tent b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-tent > :not(b):not(small) { align-self: flex-start; }
.xp-tent small { color: #6b5f4b; font-size: 11px; }
.xp-spot.open { align-items: center; justify-content: center; min-height: 150px; border: 2px dashed rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .8); font-size: 30px; font-weight: 300; cursor: pointer; transition: border-color .15s, background .15s; }
.xp-spot.open span { font-size: 12.5px; font-weight: 500; }
button.xp-spot.open:hover { border-color: #e0a43a; background: rgba(224, 164, 58, .08); }
.xp-spot.open.off { cursor: default; color: rgba(255, 255, 255, .4); font-size: 12px; }
.why-not { margin-top: 10px; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.why-not summary { cursor: pointer; color: var(--ink-2); }
.why-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.why-list > div { display: flex; flex-direction: column; min-width: 0; }
.why-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-result { position: relative; padding: 4px 0 12px; }
.xp-rhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.xp-rhead b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.xp-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.xp-col { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.xp-col canvas, .xp-ghost { width: 100%; max-width: 190px; aspect-ratio: 200 / 115; border-radius: 8px; background: var(--thumb-bg); }
.xp-ghost { border: 1px dashed var(--rule-2); background: transparent; }
.xp-col b { margin-top: 6px; font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xp-col small { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.xp-ped { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: 100%; padding-top: 8px; border-radius: 6px 6px 0 0; color: #2b2313; }
.xp-ped span { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1; }
.xp-ped em { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.xp-col.p1 .xp-ped { height: 104px; background: linear-gradient(#f0cf5e, #c9a227); }
.xp-col.p2 .xp-ped { height: 82px; background: linear-gradient(#e2e5ea, #a9adb3); }
.xp-col.p3 .xp-ped { height: 64px; background: linear-gradient(#dfa06c, #a8653a); }
.xp-col.none .xp-ped { background: var(--rule); opacity: .5; }
.xp-col.mine canvas { outline: 3px solid var(--amber); outline-offset: 2px; }
.xp-you { position: absolute; top: -8px; right: 6px; z-index: 1; padding: 2px 8px; border-radius: 99px; background: var(--amber); color: #2b2313; font-size: 11px; font-weight: 700; }
.xp-also { margin-top: 8px; }
.xp-earlier { margin: 4px 0 8px; }
.xp-earlier summary { cursor: pointer; color: var(--ink-2); font-size: 13px; padding: 4px 0; }
.xp-earlier .xp-result { border-top: 1px solid var(--rule); padding-top: 10px; }
.xp-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 10px; font-size: 13px; }
.xp-tally > span:not(.meta) { display: inline-flex; align-items: center; gap: 5px; }
.xp-tally svg { height: 24px; width: auto; }
.xp-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px 10px; padding: 14px 12px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px), #2a241c; border: 1px solid var(--rule-2); }
.xp-wall.empty { display: block; font-size: 13px; color: var(--ink-3); font-style: italic; }
.xp-rib { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; gap: 2px; }
.xp-rib .xp-rose { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); transition: transform .2s; transform-origin: 50% 10%; }
.xp-rib:hover .xp-rose { transform: rotate(-6deg); }
.xp-rib b { font-size: 12px; font-weight: 600; line-height: 1.25; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xp-rib small { font-size: 11px; color: var(--ink-3); }
.xp-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.xp-confetti i { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 1px; animation: xpFall 2.6s cubic-bezier(.25, .6, .45, 1) forwards; }
@keyframes xpFall { to { transform: translate(var(--dx), 320px) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xp-status.open i { animation: none; } .xp-confetti { display: none; } }
/* the breeder-name prompt on first Google or Discord sign-in (notices.js) */
.name-pick-f { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-weight: 600; font-size: 13px; }
.name-pick-f input { font: inherit; font-size: 16px; font-weight: 400; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper); color: var(--ink); }
.name-pick-f input[aria-invalid="true"] { border-color: var(--brick); }
.name-pick .meta.bad { color: var(--brick); }

/* market rules (#324): an animal over your buy limit, instead of Buy */
.mk-over { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px dashed var(--rule-2); border-radius: 8px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.am-over { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
/* ---------- the rodent facility, redone (#326) ---------- */
.rod-hero { border: 1px solid var(--rule-2); border-radius: 12px; background: linear-gradient(180deg, rgba(122, 90, 43, .10), transparent 60%), var(--paper-2); padding: 16px 18px; }
.rod-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rod-top h4 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0 0 4px; }
.rod-top p { font-size: 13px; color: var(--ink-2); margin: 0; max-width: 560px; line-height: 1.45; }
.rod-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 14px; position: relative; }
.rod-step { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; border-radius: 10px; border: 1px solid var(--rule); text-align: center; color: var(--ink-3); min-width: 0; }
.rod-step svg { width: 56px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rod-step b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rod-step small { font-size: 11.5px; font-family: var(--mono); }
.rod-step.done { color: #b89a66; }
.rod-step.cur { color: #e0b46a; border-color: #b8893f; background: rgba(224, 164, 58, .08); box-shadow: inset 0 -3px 0 #b8893f; }
.rod-step.cur b { color: var(--ink); }
.rod-step.next { border-style: dashed; border-color: var(--rule-2); }
.rod-next { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px dashed var(--rule-2); }
.rod-next p { font-size: 13px; color: var(--ink-2); margin: 3px 0 4px; line-height: 1.45; }
.rod-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.rod-next .incx-btn { flex: none; }
.rod-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.rod-tile { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); min-width: 0; }
.rod-tile > div:last-child { min-width: 0; flex: 1; }
.rod-tile p { font-size: 12.5px; color: var(--ink-2); margin: 3px 0 0; line-height: 1.45; }
.rod-ringw { position: relative; width: 64px; height: 64px; flex: none; }
.rod-ringw b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rod-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.rod-ring circle { fill: none; stroke: var(--rule); stroke-width: 7; }
.rod-ring circle.fill { stroke-linecap: round; }
.rod-ring.good circle.fill { stroke: #7fbf6a; } .rod-ring.warn circle.fill { stroke: var(--amber); } .rod-ring.bad circle.fill { stroke: #d0685a; }
.rod-big { flex: none; min-width: 64px; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; }
.rod-big.good { color: #7fbf6a; } .rod-big.warn { color: var(--amber); } .rod-big.bad { color: #d0685a; }
.rod-freezer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.rod-freezer i { flex: 1; height: 6px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.rod-freezer em { display: block; height: 100%; background: #8fb7d0; }
.rod-freezer b { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }
.rod-ledger { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 4px 0 0; font-size: 12px; }
.rod-ledger dt { color: var(--ink-3); } .rod-ledger dd { margin: 0; text-align: right; font-family: var(--mono); color: var(--ink-2); } .rod-ledger dd.good { color: #7fbf6a; }
.rod-chips { margin-top: 8px; }
.rod-sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 8px; }
.rod-sub b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.rod-sub span { font-size: 12.5px; color: var(--ink-3); }
.rod-list { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.rod-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; background: var(--paper); }
.rod-row + .rod-row { border-top: 1px solid var(--rule); }
.rod-row canvas { width: 104px; height: 60px; border-radius: 8px; background: #1b1a17; }
.rod-rm { min-width: 0; }
.rod-rt { display: flex; align-items: center; gap: 8px; }
.rod-rt b { font-size: 14px; font-weight: 600; }
.rod-rm p { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 3px; line-height: 1.4; }
.rod-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rod-buy b { font-family: var(--mono); font-size: 14px; }
/* The rat co-op's card (#1034): a line of what it is, its prices as tiles, and the members as a row of faces; the
   whole roster opens on request. It was one paragraph with every member's name in it. */
.coop { margin-top: 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); overflow: hidden; }
.coop.on { border-color: var(--moss); }
.coop-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px; }
.coop-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: color-mix(in srgb, #b89a66 16%, transparent); border: 1px solid color-mix(in srgb, #b89a66 45%, transparent); }
.coop-ic svg { width: 28px; height: 28px; fill: none; stroke: #b89a66; stroke-width: 1.6; stroke-linecap: round; }
.coop-h { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .coop-h b { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; } .coop-h span { font-size: 13px; color: var(--ink-2); }
.coop-count { flex: none; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; } .coop-count b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.coop-btn { flex: none; } .coop-btn:empty { display: none; }
.coop-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); } .coop-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coop-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 13px; min-width: 0; } .coop-tile + .coop-tile { border-left: 1px solid var(--rule); }
.coop-tile small { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.coop-tile b { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--moss-2); } .coop-tile span { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.coop-roster > summary { display: flex; align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; list-style: none; } .coop-roster > summary::-webkit-details-marker { display: none; }
.coop-roster > summary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.coop-faces { display: flex; flex: none; padding-left: 7px; }
.coop-face { display: grid; place-items: center; width: 28px; height: 28px; flex: none; margin-left: -7px; border-radius: 50%; border: 2px solid var(--paper); background: hsl(var(--h, 30) 30% 40%); color: #fff; font: 600 12px/1 var(--sans, system-ui); }
.coop-face.more { width: auto; min-width: 28px; padding: 0 7px; background: var(--paper-2); color: var(--ink-2); border-color: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-2); font-family: var(--mono); font-size: 11px; }
.coop-who { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink-2); }
.coop-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; } .coop-roster[open] .coop-chev { transform: rotate(180deg); }
.coop-names { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; max-height: 260px; margin: 0; padding: 4px 18px 16px; overflow-y: auto; overscroll-behavior: contain; }
.coop-names li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; } .coop-names li span:nth-child(2) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.coop-names .coop-face { width: 22px; height: 22px; margin: 0; border: 0; font-size: 10.5px; }
.coop-names li.me span:nth-child(2) { font-weight: 600; } .coop-names li i { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--moss); color: #fff; font-style: normal; font-size: 10px; letter-spacing: .04em; }
.coop .coop-none { margin: 0; padding: 12px 18px 14px; font-size: 13px; color: var(--ink-2); }
body.mobile .coop { margin-top: 8px; } body.mobile .coop-top { flex-wrap: wrap; gap: 10px 12px; padding: 14px 14px 12px; } body.mobile .coop-h { flex: 1 1 60%; } body.mobile .coop-count { order: 3; } body.mobile .coop-btn { order: 4; margin-left: auto; }
body.mobile .coop-tiles, body.mobile .coop-tiles.three { grid-template-columns: minmax(0, 1fr); } body.mobile .coop-tile { padding: 10px 14px; } body.mobile .coop-tile + .coop-tile { border-left: 0; border-top: 1px solid var(--rule); }
body.mobile .coop-roster > summary { padding: 12px 14px; } body.mobile .coop-names { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px 14px 14px; max-height: 300px; }
@media (max-width: 900px) { .rod-dash { grid-template-columns: 1fr; } .rod-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rod-next { flex-direction: column; align-items: stretch; } }
.rod-tile.col { flex-direction: column; gap: 2px; } .rod-tile.col > div:last-child { width: 100%; }
.rod-tile.col .rod-big { font-size: 24px; }
/* ---------- the incubator, redone (#328) ---------- */
.incy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 2px 0 12px; }
.incy-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.incy-title b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.incy-title span { font-size: 13px; color: var(--ink-3); }
.incy-shelf { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg, #2c2a26, #24221f); border: 1px solid var(--rule-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.incy-unit { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; }
.incy-unit + .incy-unit { border-top: 1px dashed rgba(255, 255, 255, .08); }
.incy-uname { display: flex; flex-direction: column; min-width: 0; }
.incy-uname b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incy-uname b em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); margin-left: 4px; }
.incy-uname small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.incy-slots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.incy-slots i { width: 20px; height: 26px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; border: 1.5px dashed rgba(255, 255, 255, .16); }
.incy-slots i.on { border: 0; background: radial-gradient(circle at 38% 30%, #fffaf0, #eadcb8 60%, #cdbb91); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.incy-slots i.ready { border: 0; background: radial-gradient(circle at 38% 30%, #fffaf0, #eadcb8 60%, #cdbb91); box-shadow: 0 0 0 2px #5a8a4e, 0 2px 3px rgba(0, 0, 0, .35); }
.incy-slots small { font-size: 12px; color: var(--ink-3); }
.incy-unit.moms .incy-slots i.on, .incy-unit.moms .incy-slots i.ready { box-shadow: 0 0 0 2px #a2465e, 0 2px 3px rgba(0, 0, 0, .35); }
.incy-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 4px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.incy-stat { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; min-width: 0; }
.incy-stat + .incy-stat { border-left: 1px solid var(--rule); }
.incy-stat b { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.incy-stat b small { font-size: 14px; color: var(--ink-3); font-weight: 400; }
.incy-stat span { font-size: 12.5px; color: var(--ink-2); }
.incy-stat small { font-size: 11.5px; color: var(--ink-3); }
.incy-stat.go b { color: #7fbf6a; }
.incy-stat.warn b { color: var(--amber); }
/* a clutch: its tray of eggs, then who and when */
.incy-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.incy-card.maternal { border-left: 3px solid #a2465e; }
.incy-tray { display: grid; grid-template-columns: repeat(4, 20px); gap: 6px 5px; justify-content: center; align-content: center; padding: 10px 6px; border-radius: 10px; background: #1b1a17; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); min-height: 64px; }
.incy-tray i { width: 20px; height: 26px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: radial-gradient(circle at 38% 30%, #fffaf0, #eadcb8 60%, #cdbb91); box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
.incy-tray i.slug { background: radial-gradient(circle at 40% 30%, #cfc3a6, #9d9072); opacity: .6; transform: scale(.9); }
.incy-card.near .incy-tray i:not(.slug) { animation: incyWobble 2.4s ease-in-out infinite; }
.incy-card.near .incy-tray i:nth-child(2n) { animation-delay: .6s; }
.incy-card.near .incy-tray i:nth-child(3n) { animation-delay: 1.2s; }
@keyframes incyWobble { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-7deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
.incy-tray.ghost { opacity: .35; min-height: 0; width: max-content; margin: 0 auto 10px; }
.incy-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.incy-pars { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.incy-x { color: var(--ink-3); font-size: 14px; }
.incy-par { display: flex; align-items: center; gap: 10px; min-width: 0; }
.incy-par canvas, .incy-par .incx-noimg { width: 58px; height: 34px; flex: none; border-radius: 6px; background: #1b1a17; }
.incy-par > div { display: flex; flex-direction: column; min-width: 0; }
.incy-par b { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.incy-par b svg { width: 13px; height: 13px; flex: none; }
.incy-par b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.incy-par b svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.incy-par small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incy-prog { display: flex; flex-direction: column; gap: 6px; }
.incy-bar { position: relative; height: 8px; border-radius: 99px; background: var(--rule); }
.incy-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #cdbb91, #7fbf6a); }
.incy-egg { position: absolute; top: 50%; width: 14px; height: 18px; margin: -9px 0 0 -7px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: radial-gradient(circle at 38% 30%, #fffaf0, #eadcb8 60%, #cdbb91); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.incy-when { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.incy-when b { font-size: 14px; color: var(--ink); font-weight: 600; }
.incy-moverow, .d-moveeggs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.incy-nospace { font-size: 12.5px; color: var(--ink-3); }
.incy-mom { font-style: normal; color: #d0869a; font-weight: 600; }
/* which project a clutch is for (#735): the card's chip, the Project chips over the ready list, the cutting screen */
.incy-proj { display: flex; flex-wrap: wrap; gap: 6px; }
.incy-proj .pj-fit, .incy-hmeta .pj-fit { margin: 0; }
.incy-projs { margin: 0 0 8px; }
.incy-pcount { margin: 0 0 6px; font-size: 12px; }
.cut-proj { font-weight: 500; color: var(--moss); }
.cut-proj.likely { color: var(--ink-3); font-style: italic; font-size: .8em; }
.cut-projs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cut-projs .pj-fit { margin: 0; cursor: default; }
.cut-projs .pj-fit small { margin-left: 4px; font-family: var(--mono); opacity: .8; }
.egg.open .egg-proj { display: block; width: max-content; max-width: 100%; margin: 1px auto 0; font-size: 10px; line-height: 16px; }
.incy-hhead { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.incy-hmeta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.incx-card.incy-hatched { border-radius: 12px; }
.incy-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 16px; margin-top: 14px; border: 1px dashed var(--rule-2); border-radius: 12px; }
.incy-empty b { font-family: var(--serif); font-size: 20px; }
.incy-empty span { font-size: 13px; color: var(--ink-3); max-width: 360px; margin-bottom: 6px; }
@media (max-width: 900px) { .incy-unit { grid-template-columns: 1fr; gap: 6px; } .incy-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .incy-stat:nth-child(3) { border-left: 0; } .incy-stat:nth-child(n+3) { border-top: 1px solid var(--rule); } .incy-card { grid-template-columns: 1fr; } .incy-pars { grid-template-columns: 1fr; } .incy-x { display: none; } }
@media (prefers-reduced-motion: reduce) { .incy-card.near .incy-tray i { animation: none; } }

/* market locks explained on the listing (#330) */
.mk-lock { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid #6b5a3c; border-radius: 8px; background: rgba(224, 164, 58, .07); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 100%; }
.mk-lock span { overflow: hidden; text-overflow: ellipsis; }
.mk-lock i { font-style: normal; font-weight: 500; color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.mk-lock:hover { border-color: var(--amber); }
.mk-lockic { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
.mk-locktag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: rgba(224, 164, 58, .12); color: var(--amber); font-size: 11.5px; font-weight: 600; }
.mk-locktag .mk-lockic { width: 12px; height: 12px; }
.am-lock { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px; border: 1px solid #6b5a3c; border-radius: 10px; background: rgba(224, 164, 58, .06); font-size: 13px; line-height: 1.45; }
.am-lock > .mk-lockic { width: 22px; height: 22px; margin-top: 1px; }
.am-lock b { font-size: 14.5px; }
.am-lock p { margin: 4px 0 6px; color: var(--ink-2); }
.mk-rules { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.mk-ruleslink { border: 0; background: none; padding: 0; margin-left: 6px; color: var(--amber); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 0; height: auto; box-shadow: none; }
div.dlg-body p:first-child { margin-top: 0; }
/* ---------- stores (#334) ---------- */
.st-card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px; align-items: center; padding: 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); min-width: 0; overflow: hidden; }
.st-card.t-commercial { border-color: #b8893f; background: linear-gradient(180deg, rgba(224, 164, 58, .10), transparent 50%), var(--paper); padding-top: 30px; }
.st-card.t-pro { border-color: #4f7a45; }
.st-banner { position: absolute; top: 0; left: 0; right: 0; padding: 4px 12px; background: linear-gradient(90deg, #b8893f, #e0b46a); color: #2b2313; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.st-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; font-family: var(--serif); font-size: 24px; font-weight: 600; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--rule-2); }
.st-av img { width: 100%; height: 100%; object-fit: cover; }
.st-card.t-commercial .st-av { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px #e0b46a; }
.st-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-info b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-info p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-info small { font-size: 11.5px; color: var(--ink-3); }
.st-tier { align-self: flex-start; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.st-tier.t-breeder { background: rgba(61, 107, 140, .2); color: #8fb7d0; }
.st-tier.t-pro { background: rgba(90, 138, 78, .2); color: #7fbf6a; }
.st-tier.t-commercial { background: rgba(224, 164, 58, .18); color: #e0b46a; }
.st-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.st-acts button { flex: 1; }
/* the ad row between listings */
.st-adrow { grid-column: 1 / -1; margin: 6px 0; padding: 12px; border-radius: 14px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .015) 0 10px, transparent 10px 20px), var(--paper-2); border: 1px solid var(--rule-2); }
.st-adcards { display: grid; gap: 10px; }
.st-adcards.n1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.st-adcards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-adcards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-adfoot { margin-top: 8px; text-align: right; font-size: 11.5px; color: var(--ink-3); }
.st-adlink { border: 0; background: none; padding: 0; min-height: 0; height: auto; box-shadow: none; color: var(--amber); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.st-adrow.empty { background: transparent; border-style: dashed; }
.st-adpitch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--ink-3); }
.st-adpitch b { color: var(--ink); font-family: var(--serif); font-size: 16px; }
.mk-pro { margin-left: 6px; padding: 0 6px; border-radius: 99px; background: rgba(90, 138, 78, .2); color: #7fbf6a; font-size: 10px; font-weight: 700; letter-spacing: .04em; flex: none; }
/* My store */
.sp { display: flex; flex-direction: column; gap: 14px; }
.sp-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.sp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--rule-2); border-radius: 14px; background: linear-gradient(180deg, rgba(224, 164, 58, .07), transparent 60%), var(--paper-2); }
.sp-top h3 { font-family: var(--serif); font-size: 26px; margin: 0 0 4px; }
.sp-note { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; line-height: 1.45; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-box { padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.sp-box p { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin: 6px 0 0; }
.sp-box label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.sp-big { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.1; }
.sp-big small { font-size: 18px; color: var(--ink-3); font-weight: 400; }
.sp-bar { height: 8px; border-radius: 99px; background: var(--rule); overflow: hidden; margin: 8px 0 2px; }
.sp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5a8a4e, #7fbf6a); border-radius: 99px; }
.sp-bar i.full { background: #d0685a; }
.sp-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sp-tier { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); min-width: 0; }
.sp-tier.cur { border-color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
.sp-tier.t-commercial { background: linear-gradient(180deg, rgba(224, 164, 58, .10), transparent 60%), var(--paper-2); }
.sp-th { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sp-th b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.sp-th span { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.sp-th small { color: var(--ink-3); font-size: 10.5px; }
.sp-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-num small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.sp-tier p { font-size: 12.5px; color: var(--ink-3); margin: 0; flex: 1; line-height: 1.4; }
.sp-cur { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--amber); }
.sp-adbuy { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sp-adbuy label { margin: 0; }
.sp-live { color: #7fbf6a !important; }
@media (max-width: 1000px) { .sp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-adcards.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sp-top, .sp-grid, .st-adcards.n2, .st-adcards.n3 { grid-template-columns: 1fr; } }
.mk-grid { grid-auto-flow: row dense; } /* listings fill in around the ad rows (#334) */
.st-info b { color: var(--ink); }
body.mobile .sp-tiers { grid-template-columns: 1fr; } body.mobile .sp-top { grid-template-columns: 1fr; } body.mobile .st-adrow { margin: 8px 0; }
/* ---------- the snake panel, redone (#338) ---------- */
#detail { border-radius: 14px; border-color: var(--rule-2); gap: 12px; padding: 16px 16px 14px; }
.dt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dt-title { min-width: 0; }
.dt-kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.dt-kicker .dt-listed { color: #7fbf6a; }
#detail .dt-title .name { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.15; margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dt-sub { font-size: 13px; color: var(--ink-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-hero { position: relative; }
#detail .dt-hero canvas { border-radius: 12px; border-color: var(--rule-2); }
.dt-value { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 99px; background: rgba(20, 18, 15, .82); color: #f4efe3; font-family: var(--mono); font-size: 14px; font-weight: 600; backdrop-filter: blur(4px); }
.dt-rarity { position: absolute; right: 10px; top: 10px; }
.dt-sec { display: flex; flex-direction: column; gap: 6px; }
.dt-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
#detail .genes { display: flex; flex-wrap: wrap; gap: 5px; }
.dt-breed { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(61, 107, 140, .12); font-size: 13px; }
.dt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.dt-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; min-width: 0; }
.dt-tiles > div + div { border-left: 1px solid var(--rule); }
.dt-tiles span { font-size: 11px; color: var(--ink-3); }
.dt-tiles b { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dt-stars { color: #e0b46a; letter-spacing: 1px; font-size: 14px !important; }
.dt-stars i { font-style: normal; color: var(--rule-2); }
.dt-meters { display: flex; flex-direction: column; gap: 7px; }
.dt-meters > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
.dt-meters b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.dt-bar { display: block; height: 6px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.dt-bar em { display: block; height: 100%; border-radius: 99px; }
.dt-bar em.good { background: #7fbf6a; } .dt-bar em.warn { background: var(--amber); } .dt-bar em.bad { background: #d0685a; } .dt-bar em.calm { background: #8fb7d0; }
.dt-meters .hp-bad b { color: #d0685a; }
.dt-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
.dt-facts span { display: flex; gap: 5px; }
.dt-facts em { font-style: normal; color: var(--ink-3); }
.dt-facts b { font-weight: 600; } .dt-facts b.bad { color: #d0685a; }
.dt-loc { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); }
.dt-loc > div { display: flex; flex-direction: column; min-width: 0; }
.dt-loc b { font-size: 13.5px; }
.dt-loc small { font-size: 11.5px; color: var(--ink-3); }
.dt-note { font-size: 12.5px; }
#detail .tagrow { display: flex; flex-wrap: wrap; gap: 5px; }
#detail .tagrow .chip { height: 26px; min-height: 0; padding: 0 10px; font-size: 12px; }
.dt-acts { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.dt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-row button { flex: 1 1 30%; min-width: 0; }
.dt-row.sell button { flex: 1 1 45%; }
.dt-row.more button { flex: 1 1 28%; height: 30px; min-height: 0; font-size: 12.5px; }
.dt-kicker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dt-sex { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; } .dt-sex svg { width: 12px; height: 12px; } .dt-sex.f { background: rgba(162, 70, 94, .25); color: #d0869a; } .dt-sex.m { background: rgba(61, 107, 140, .25); color: #8fb7d0; }
/* the card folds to a tab on the right edge, under the HUD, so the room stays in view (#796) */
.dt-headbtns { display: flex; align-items: center; gap: 2px; flex: none; }
#detail .dt-fold { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; color: var(--ink-3); }
#detail .dt-fold:hover { color: var(--ink); }
#detail .dt-fold svg, .dt-tab .dt-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#detail:not(.min) > .dt-tab { display: none; }
#detail.min > :not(.dt-tab) { display: none; }
#detail.min { right: 0; width: auto; max-width: 250px; padding: 0; gap: 0; overflow: hidden; border-right: 0; border-radius: 12px 0 0 12px; }
.dt-tab { display: flex; align-items: stretch; min-width: 0; }
#detail .dt-tabopen { display: flex; align-items: center; gap: 7px; min-width: 0; height: 40px; min-height: 0; padding: 0 4px 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--ink); }
#detail .dt-tabopen:hover { background: var(--paper-2); color: var(--ink); }
#detail .dt-tabopen .dt-chev { color: var(--ink-3); } #detail .dt-tabopen .dt-sex { flex: none; }
#detail .dt-tabopen b { font-family: var(--serif); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#detail .dt-tabx { font-size: 19px; padding: 0 10px 0 6px; }
/* ---------- Collection, redone (#340) ---------- */
.coll-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0 8px; }
.ct { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; min-width: 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); text-align: left; color: var(--ink); font: inherit; }
button.ct { cursor: pointer; transition: border-color .15s, background .15s; min-height: 0; height: auto; box-shadow: none; }
button.ct:hover { border-color: var(--rule-2); background: var(--paper-2); }
.ct.on { border-color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
.ct b { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ct b small { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.ct span { font-size: 12.5px; color: var(--ink-2); }
.ct > small { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: flex; align-items: center; gap: 3px; }
.ct > small svg { width: 11px; height: 11px; }
.ct.warn b { color: #e0a43a; } .ct.warn { border-color: #6b5a3c; }
.ct.ok b { color: #7fbf6a; }
.ct-sex { display: block; width: 100%; height: 5px; margin: 5px 0 3px; border-radius: 99px; background: rgba(61, 107, 140, .55); overflow: hidden; }
.ct-sex em { display: block; height: 100%; background: rgba(208, 134, 154, .85); }
.coll-group { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.coll-group select { height: 30px; font-size: 12.5px; }
.coll tr.grp td { padding: 14px 8px 6px; border-bottom: 1px solid var(--rule-2); background: transparent; }
.coll tr.grp b { font-family: var(--serif); font-size: 16px; font-weight: 600; margin-right: 10px; }
.coll tr.grp span { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.coll .tag.idle { border: 0; background: transparent; color: var(--ink-3); padding: 0 0 0 11px; position: relative; font-size: 11.5px; }
.coll .tag.idle::before { content: ''; position: absolute; left: 1px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink-3); opacity: .6; }
.coll td.stage { white-space: nowrap; }
.coll tr.row { transition: background .12s; }
.coll tr.row:hover td { background: rgba(255, 255, 255, .025); }
.coll td.thumbcell canvas { border-radius: 8px; }
@media (max-width: 1100px) { .coll-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#panelBody .coll-group { flex-direction: row; align-items: center; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--sans); }
#panelBody .coll-group select { width: auto; margin: 0; }

/* Pro is the gold tier (#345): the look Commercial had */
.st-card.t-pro { border-color: #b8893f; background: linear-gradient(180deg, rgba(224, 164, 58, .10), transparent 50%), var(--paper); padding-top: 30px; }
.st-card.t-pro .st-av { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px #e0b46a; }
.st-tier.t-pro { background: rgba(224, 164, 58, .18); color: #e0b46a; }
.sp-tier.t-pro { border-color: #6b5a3c; background: linear-gradient(180deg, rgba(224, 164, 58, .12), transparent 60%), var(--paper-2); }
.sp-tier.t-pro .sp-th b { color: #e0b46a; }
.mk-pro { background: rgba(224, 164, 58, .2); color: #e0b46a; }
.sp-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Collection, restyled (#347): the same page, easier on the eye ---------- */
.coll-tools { gap: 8px; margin-bottom: 10px; }
.coll-tools #collFilter { height: 38px; border-radius: 10px; padding: 4px 14px; font-size: 13.5px; border-color: var(--rule-2); background: var(--paper-2); }
.coll-seg, .coll-tools .csel-btn, .coll-morebtn { border-radius: 10px !important; }
.coll-seg button, .coll-tools .csel-btn, .coll-morebtn { min-height: 38px; }
.coll-seg button.on { background: var(--amber); color: #2b2313; }
.coll-strip { gap: 6px; margin: 0 0 10px; font-size: 12.5px; }
.coll-strip .cs-count { margin-right: 4px; font-size: 13px; }
.coll-strip .cs-count b { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-right: 2px; }
.coll-strip .cs-item { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2); }
.coll-strip .cs-item.warn { border-color: #6b5a3c; background: rgba(224, 164, 58, .1); color: #e0a43a; }
.coll-strip .cs-item.on, .coll-strip .cs-item.on:hover { background: var(--amber); border-color: var(--amber); color: #2b2313; }
.coll-strip #selStart { border-radius: 99px; min-height: 30px; padding: 0 14px; }
table.coll { border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; }
table.coll thead th { position: sticky; top: -18px; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--rule-2); padding-top: 10px; padding-bottom: 8px; font-size: 10.5px; }
table.coll tbody tr.row td { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background .12s, border-color .12s; }
table.coll tbody tr.row td:first-child { border-left: 1px solid var(--rule); border-radius: 12px 0 0 12px; padding-left: 8px; }
table.coll tbody tr.row td:last-child { border-right: 1px solid var(--rule); border-radius: 0 12px 12px 0; padding-right: 14px; }
table.coll tbody tr.row:hover td { background: #332e27; border-color: var(--rule-2); }
table.coll tbody tr.row:hover td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
table.coll.dense td { height: 56px; }
table.coll.dense .thumbcell { width: 86px; }
table.coll.dense .thumbcell canvas { width: 72px; height: 42px; border-radius: 8px; }
table.coll .an-line b, table.coll td.animal b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
table.coll td.num:last-child { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); }
table.coll td.num { color: var(--ink-2); }
table.coll td.stage .meta { color: var(--ink-3); }
table.coll.dense td.locc .loc { display: inline-block; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .05); font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
table.coll td.status .tag { border-radius: 99px; padding: 1px 8px; }
table.coll td.status .tag.idle { border-radius: 0; padding: 0 0 0 11px; }
table.coll.comfy .thumbcell canvas { border-radius: 10px; }
table.coll td.status .tag.idle { margin-right: 10px; }

/* the top of the Collection (#347): one control card, matching controls, a rounded header bar */
.coll-top { padding: 12px; margin-bottom: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.coll-top .coll-tools { margin-bottom: 10px; gap: 8px; }
.coll-top .coll-strip { margin: 0; }
.coll-tools #collFilter { height: 36px; padding-left: 36px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948b7c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 12px center / 16px; }
.coll-tools #collFilter:focus { border-color: var(--amber); }
.coll-seg { border: 1px solid var(--rule-2); background: var(--paper); }
.coll-seg button, .coll-tools .csel-btn, .coll-morebtn { min-height: 36px; }
.coll-seg button.on { background: rgba(224, 164, 58, .16); color: #e0b46a; box-shadow: inset 0 -2px 0 var(--amber); }
.coll-tools .csel-btn { background: var(--paper); border: 1px solid var(--rule-2); color: var(--ink-2); }
.coll-morebtn { background: var(--paper); }
.coll-top .coll-strip .cs-item { background: var(--paper); }
table.coll thead th { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); padding-top: 9px; padding-bottom: 9px; }
table.coll thead th:first-child { border-left: 1px solid var(--rule); border-radius: 10px 0 0 10px; padding-left: 8px; }
table.coll thead th:last-child { border-right: 1px solid var(--rule); border-radius: 0 10px 10px 0; padding-right: 14px; }
table.coll thead th.sortable { cursor: pointer; transition: color .12s; }
table.coll thead th.sortable:hover { color: var(--ink); }
table.coll thead th.on { color: #e0b46a; }
table.coll th[data-sort="weight"] { width: 72px; }
table.coll.dense th[data-sort="weight"] { width: 70px; }
table.coll thead .coll-density { border-radius: 8px; }
table.coll thead .coll-density button.on { background: rgba(224, 164, 58, .16); color: #e0b46a; }
#panelBody .coll-tools .csel .csel-btn { background: var(--paper); border-color: var(--rule-2); color: var(--ink-2); box-shadow: none; }
/* comfortable rows (#349): the location on one line, the rack model trimmed under it */
table.coll.comfy td.locc { min-width: 128px; }
table.coll.comfy td.locc .loc { white-space: nowrap; font-size: 13px; color: var(--ink-2); }
table.coll.comfy td.locc .loc b { color: var(--ink); font-weight: 600; }
table.coll.comfy td.locc .meta { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; margin-top: 2px; }
/* the listing window (#351): both columns fit the window and scroll on their own; the actions stay pinned at the bottom */
.am2 { height: min(90vh, 900px); grid-template-rows: minmax(0, 1fr); }
.am-left, .am-side { min-height: 0; }
.am-side .am-actions { position: sticky; bottom: -20px; margin: auto -22px -20px; padding: 12px 22px 16px; background: linear-gradient(transparent, var(--paper-2) 14px); z-index: 1; }
@media (max-width: 900px) { .am2 { height: auto; max-height: 90vh; grid-template-rows: none; } .am-side .am-actions { position: static; margin: 0; padding: 0; background: none; } }

/* hearts on store listings (#353) */
.mk-heart { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 30px; min-height: 0; padding: 0 9px; border: 0; border-radius: 99px; background: rgba(20, 18, 15, .72); color: #f4efe3; font-size: 12px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); box-shadow: none; }
.mk-heart svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mk-heart:hover { background: rgba(20, 18, 15, .9); }
.mk-heart.on { color: #e0607a; } .mk-heart.on svg { fill: currentColor; }
.mk-heart.on svg { animation: mkPop .28s ease; }
@keyframes mkPop { 50% { transform: scale(1.3); } }
.mk-heart.ro { cursor: default; color: #e0607a; } .mk-heart.ro svg { fill: currentColor; }
.mk-likedchip { display: inline-flex; align-items: center; gap: 5px; }
.mk-likedchip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.mk-likedchip.on svg { fill: currentColor; color: #e0607a; }
body.mobile .row-card .mk-heart { position: static; height: 26px; margin: 4px 0; background: rgba(255, 255, 255, .06); color: var(--ink-2); }
body.mobile .row-card .mk-heart.on, body.mobile .row-card .mk-heart.ro { color: #e0607a; }
.mk-bar:has(#mkLiked) { grid-template-columns: minmax(0, 1fr) repeat(4, auto); } /* room for the Liked chip (#353) */
body.mobile .row-card button.mk-heart, body.mobile .row-card .mk-heart.ro { min-height: 0; height: 28px; padding: 0 10px; font-size: 12.5px; }

/* Sales: the three automatic answers in one row (#1006), same look on both clients */
.sx-wrap { margin: 2px 0 10px; } /* not .sx: that is the sex icon (1em wide), which squeezed this row into a column (#1061) */
.sx-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 10px 4px 9px; border: 1px solid var(--rule-2); border-radius: 99px; background: var(--paper-2); color: var(--ink-2); font: inherit; font-size: 12.5px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.sx-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); opacity: .55; flex: none; }
.sx-chip.on { border-color: var(--moss); color: var(--ink); } .sx-chip.on i { background: var(--moss-2); opacity: 1; }
.sx-chip.warn { border-color: var(--amber); color: var(--ink); } .sx-chip.warn i { background: var(--amber); opacity: 1; }
.sx-chip.open { background: color-mix(in srgb, var(--ink) 8%, var(--paper-2)); }
.sx-car { font-size: 10px; color: var(--ink-3); }
.sx-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper-2); }
.sx-detail p { flex: 1 1 280px; margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.sx-detail p b { color: var(--ink); }
.sx-set { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--ink-2); } /* a label: undo the form-label column and capitals */
.sx-set select { max-width: 180px; }
.sx-check input { width: 18px; height: 18px; margin: 0; }
.sx-detail > button { flex: none; }
body.mobile .sx-chip { min-height: 34px; font-size: 13px; }
body.mobile .sx-detail p { flex-basis: 100%; }
.sl-fillacts { display: flex; gap: 8px; margin-left: auto; flex: none; } .sl-fillacts button { margin-left: 0; } /* Pass on all beside Fill all */
.sl-passbar { display: flex; justify-content: flex-end; margin: 2px 0 8px; }
body.mobile .wpassall { margin: 0 0 10px; }

/* the Fill all confirmation (#396) */
.fa { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.fa-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.fa-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.fa-row canvas { width: 64px; height: 37px; border-radius: 8px; background: #1b1a17; }
.fa-a { display: flex; flex-direction: column; min-width: 0; }
.fa-a b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-a small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } /* role and project on each pick (#1006) */
.fa-tags .rbadge { margin: 0; padding-top: 0; padding-bottom: 0; font-size: 11px; }
.fa-row.odd { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--paper)); } /* not Sell or Wholesale */
.fa-odd { padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: var(--ink); background: color-mix(in srgb, var(--amber) 14%, transparent); border: 1px solid var(--amber); }
.fa-sex { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none; }
.fa-sex svg { width: 11px; height: 11px; }
.fa-sex.f { background: rgba(162, 70, 94, .25); color: #d0869a; } .fa-sex.m { background: rgba(61, 107, 140, .25); color: #8fb7d0; }
.fa-to { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.fa-to span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fa-to b { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.fa-pay { font-family: var(--mono); font-size: 15px; color: #7fbf6a; min-width: 70px; text-align: right; }
.fa-more { font-size: 12.5px; color: var(--ink-3); padding: 2px 4px; }
.fa-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: rgba(90, 138, 78, .1); border: 1px solid #3c5a47; }
.fa-total span { font-size: 13px; color: var(--ink-2); }
.fa-total b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.fa-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
body.mobile .fa-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
body.mobile .fa-row canvas { width: 52px; height: 30px; }
body.mobile .fa-to { display: none; }
body.mobile .fa-a small::before { content: ''; }
#modalBox2:has(.fa) { width: min(640px, 94vw); max-width: min(640px, 94vw); } /* room for the order rows (#396) */
/* why it isn't eating (#384) */
.feed-note { display: flex; flex-direction: column; gap: 6px; }
.feed-note.mild { border-color: #6b5a3c; background: rgba(224, 164, 58, .08); }
.feed-note.mild > b { color: #e0a43a; }
.fn-p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.fn-why { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fn-why li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 7px 9px; border-radius: 8px; background: rgba(0, 0, 0, .18); font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.fn-why li span { flex: 1 1 180px; min-width: 0; }
.fn-why em { display: block; font-style: normal; color: var(--ink-3); margin-top: 2px; }
.fn-why button { flex: none; }

/* display animals (#409) */
#modalBox.dp-modal { width: min(820px, 94vw); }
.dp-spots { display: grid; gap: 10px; margin: 12px 0; }
.dp-spots.n1 { grid-template-columns: minmax(0, 360px); }
.dp-spots.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-spot { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px dashed var(--rule-2); border-radius: 12px; background: var(--paper); min-width: 0; }
.dp-spot.full { border-style: solid; border-color: #4f7a45; }
.dp-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dp-spot canvas { width: 100%; aspect-ratio: 26 / 15; border-radius: 8px; background: #1b1a17; }
.dp-ex { display: grid; place-items: center; aspect-ratio: 26 / 15; border-radius: 8px; background: linear-gradient(#2a3a2a, #1b241b); font-size: 38px; }
.dp-empty { display: grid; place-items: center; aspect-ratio: 26 / 15; border-radius: 8px; color: var(--ink-3); font-size: 13px; background: rgba(255, 255, 255, .03); }
.dp-spot b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-spot small { font-size: 11.5px; color: var(--ink-3); }
.dp-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dp-list { display: flex; flex-direction: column; gap: 6px; }
.dp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.dp-ico { font-size: 22px; text-align: center; }
.dp-row b { font-size: 14px; } .dp-row small { display: block; font-size: 12px; color: var(--ink-3); }
.dp-price { font-family: var(--mono); font-weight: 600; }
.dp-snakes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.dp-snake { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); text-align: left; cursor: pointer; min-height: 0; height: auto; }
.dp-snake:hover { border-color: var(--amber); }
.dp-snake canvas { width: 100%; aspect-ratio: 26 / 15; border-radius: 6px; background: #1b1a17; }
.dp-snake b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-snake small { font-size: 11px; color: var(--ink-3); }
/* the display picker's search, chips and paging (#1278) */
.dp-find { display: flex; gap: 6px; align-items: center; margin: 6px 0; } .dp-find .bsearch { flex: 1; min-width: 0; } .dp-find select { flex: none; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.dp-snake.shown { border-style: dashed; } .dp-snake:disabled { opacity: 0.55; cursor: default; } .dp-snake:disabled:hover { border-color: var(--rule); }
.dp-snake .dp-where { color: var(--amber); white-space: normal; line-height: 1.25; }
.dp-pet { font-style: normal; font-weight: 600; color: var(--ink-2); }
.dp-more { display: block; margin: 8px auto 0; } .dp-none { padding: 12px 4px; }
.dp-count { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-left: 6px; vertical-align: middle; }
.dp-with { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-2); margin-left: 4px; cursor: pointer; }
/* the display window (#437): a floating panel you can drag; no backdrop over the room */
.dp-win { position: fixed; z-index: 45; width: min(760px, calc(100vw - 16px)); max-height: min(82vh, 780px); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .38); overflow: hidden; }
.dp-win.hidden { display: none; }
.dp-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--rule); cursor: grab; user-select: none; touch-action: none; }
.dp-win.dragging .dp-head { cursor: grabbing; } .dp-win.dragging { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.dp-head > div { flex: 1; min-width: 0; } .dp-head h2 { margin: 0; font: 600 21px/1.15 var(--serif); } .dp-head .meta { margin-top: 3px; font-size: 12.5px; }
.dp-grip { flex: none; width: 10px; height: 18px; margin-top: 4px; opacity: .45; background-image: radial-gradient(currentColor 1.2px, transparent 1.4px); background-size: 5px 6px; }
.dp-head .icon { flex: none; }
.dp-body { overflow-y: auto; padding: 4px 16px 16px; overscroll-behavior: contain; }
.dp-body .dp-spots { margin-top: 12px; }
.dp-spot.picking { border-color: var(--moss-2); box-shadow: 0 0 0 1px var(--moss-2) inset; }
.dp-acts button.on { border-color: var(--moss-2); color: var(--moss-2); }
/* the purchase card */
#modalBox2:has(.dp-buy) { width: min(560px, 94vw); }
.dp-buy { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.dp-buy canvas { width: 100%; aspect-ratio: 26 / 15; border-radius: 12px; background: radial-gradient(ellipse at 50% 70%, #2f3a2c, #1b1a17 70%); }
.dp-buy-kind { font: 600 11px/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--moss-2); }
.dp-buy-blurb { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.dp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 12px 0 0; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.dp-facts > div { padding: 9px 11px; border-left: 1px solid var(--rule); min-width: 0; } .dp-facts > div:first-child { border-left: 0; }
.dp-facts dt { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .dp-facts dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.dp-facts dd.dp-bp { font: 700 16px var(--mono, monospace); color: var(--ink); }
.dp-buy-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 560px) { .dp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dp-facts > div:nth-child(3) { border-left: 0; } .dp-facts > div:nth-child(n+3) { border-top: 1px solid var(--rule); } }
.dp-row canvas { width: 96px; height: 55px; border-radius: 8px; background: #1b1a17; }

/* stores (#442): a seller's name opens their store; the Stores tab lists and searches them all */
button.mk-seller { min-height: 0; height: auto; padding: 2px 6px 2px 2px; margin-left: -2px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; gap: 6px; text-align: left; }
button.mk-seller:hover { background: var(--paper-3); color: var(--ink); } button.mk-seller:hover .mk-name { text-decoration: underline; text-underline-offset: 2px; }
.am-store { justify-self: start; min-height: 0; height: auto; padding: 0; border: 0; background: none; font: 600 14px var(--sans, inherit); color: var(--ink); cursor: pointer; }
.am-store:hover { color: var(--moss-2); text-decoration: underline; text-underline-offset: 3px; } .am-store span { color: var(--ink-3); }
.mk-shop.st-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; background: none; border: 0; }
.mk-shop.st-head #mkShopAll { align-self: flex-start; }
.st-dir { display: flex; flex-direction: column; gap: 6px; }
.st-search { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
.st-search input { flex: 1; max-width: 420px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.st-grid.quiet .st-card { opacity: .78; }
/* collection select mode (#444): why a row can't be picked */
.sel-lock { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; color: var(--amber); cursor: help; line-height: 1; }
.sel-lock svg { width: 13px; height: 13px; } .sel-lock small { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
tr.row.sel-locked > td:not(.selcell) { opacity: .6; }
.sel-lockn { display: inline-flex; align-items: center; gap: 4px; color: var(--amber); } .sel-lockn svg { width: 12px; height: 12px; }
.sel-lock { flex-direction: row; } .sel-lock svg { width: 15px; height: 15px; }
.sel-why { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.4 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; color: var(--amber); border: 1px solid currentColor; opacity: 1; }
tr.row.sel-locked > td.animal { opacity: 1; } tr.row.sel-locked > td.animal > :not(.sel-why) { opacity: .6; }

/* ---- the market, laid out like MorphMarket (#490) ---- */
.mm-head { margin: 2px 0 12px; }
.mm-head h2 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.mm-head p { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.mm-head p b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.mm-search { position: relative; flex: 1 1 260px; min-width: 0; }
.mm-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.mm-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 10px; font-size: 14px; }
.mk-main > .mm-search { margin-bottom: 4px; }
.mk-bar.mm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.mm-filters svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; margin-right: 4px; }
.mm-results { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.mm-count { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: 4px; }
.mm-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; min-height: 0; padding: 0 6px 0 10px; border-radius: 99px; border: 0; background: var(--paper-3); color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; }
.mm-chip span { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1; }
.mm-chip:hover span { background: var(--brick); color: #fff; }
.mm-clear { border: 0; background: none; min-height: 0; padding: 0 4px; font-size: 12px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.mm-sp { flex: 1; }
.mm-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.mm-sort select { min-height: 34px; border-radius: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.mm-views { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; }
.mm-views button { display: grid; place-items: center; width: 34px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); }
.mm-views button + button { border-left: 1px solid var(--rule-2); }
.mm-views button.on { background: var(--ink); color: var(--paper); }
.mm-views svg { width: 16px; height: 16px; fill: currentColor; }
/* the side filters: fold-open sections */
.mm-side { gap: 0; padding: 4px 0 8px; }
.mm-side-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.mm-side-h b { font-size: 15px; margin-right: auto; }
/* the way out of the Filters view, on the filters themselves (#1071): a player could not find Exit full screen */
.mm-side-x { display: inline-flex; align-items: center; gap: 5px; min-height: 0; margin-left: 10px; padding: 4px 9px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 500 12px var(--sans, system-ui); cursor: pointer; white-space: nowrap; }
.mm-side-x:hover { color: var(--ink); border-color: var(--ink-3); } .mm-side-x span { font-size: 15px; line-height: 1; }
.mm-acc { border-bottom: 1px solid var(--rule); }
.mm-acc summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; user-select: none; }
.mm-acc summary::-webkit-details-marker { display: none; }
.mm-acc summary span { flex: 1; }
.mm-acc summary i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--moss); color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.mm-acc summary svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.mm-acc[open] summary svg { transform: rotate(180deg); }
.mm-accb { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.mm-accb select { width: 100%; }
/* cards */
.mk-card.mm { border-radius: 12px; }
.mk-card.mm .mk-img canvas { aspect-ratio: 4 / 3; object-fit: cover; }
.mk-shield { position: absolute; top: 9px; left: 9px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #6aa84f; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.mk-shield svg { width: 16px; height: 16px; fill: #fff; stroke: #6aa84f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-shield svg path + path { stroke: #6aa84f; stroke-width: 2.2; fill: none; }
.mk-card.mm .mk-heart { top: 9px; bottom: auto; right: 9px; height: 26px; padding: 0 8px; font-size: 12px; }
.mk-card.mm .mk-heart svg { width: 14px; height: 14px; }
.mk-flags { position: absolute; left: 9px; bottom: 9px; right: 9px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.mk-flags .mk-tag, .mm-li-sex .mk-tag { position: static; border-radius: 4px; }
.mk-flags .rar { margin: 0; }
/* the house stores' cards (#1371): run by the game, and a look that sold out for the week */
.mk-tag.soldout { background: var(--paper-3); color: var(--ink); }
/* the game's logo mark after a house store's name (#1405): small, sitting on the text, the tooltip says what it means */
.house-mark { display: inline-flex; flex: none; vertical-align: -2px; margin-left: 5px; line-height: 0; cursor: help; }
.house-mark img { width: 14px; height: 14px; border-radius: 3px; }
.mk-card.mm .mk-body { padding: 11px 12px 12px; gap: 3px; }
.mk-card.mm .mk-title { font-size: 14.5px; font-weight: 700; line-height: 1.25; max-height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.mk-card.mm .mk-morph { font-size: 12px; }
.mk-card.mm .mk-seller, .mm-li .mk-seller { display: flex; align-items: center; gap: 0; min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 12.5px; cursor: pointer; text-align: left; max-width: 100%; }
.mk-card.mm .mk-seller:hover .mk-name, .mm-li .mk-seller:hover .mk-name { color: var(--ink); text-decoration: underline; }
.mk-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 4px; }
.mk-sy { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.mk-sy b { font-weight: 600; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.mk-sy.F { color: #c8608f; } .mk-sy.M { color: var(--sky); }
.mk-card.mm .mk-price { font-family: var(--sans); font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.mk-card.mm .mk-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.mk-card.mm .mk-was { font-size: 11.5px; }
.mk-card.mm .mk-actions { margin-top: 8px; }
.mk-card.mm .mk-actions button { min-height: 30px; border-radius: 8px; font-weight: 600; }
.mk-card.mm:hover { transform: translateY(-2px); border-color: var(--rule-2); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
/* the list view: the same listing as a row */
.mm-list { display: flex; flex-direction: column; gap: 8px; }
.mk-card.mm-li { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto 170px; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 12px; }
.mm-li .mk-img canvas { width: 168px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 0; }
.mm-li .mk-shield { top: 6px; left: 6px; width: 22px; height: 22px; }
.mm-li .mk-shield svg { width: 13px; height: 13px; }
.mm-li-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mm-li .mk-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-li-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--ink-3); }
.mm-li-sex { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mm-li-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mm-li .mk-price { font-family: var(--sans); font-size: 21px; font-weight: 800; }
.mm-li .mk-heart { position: static; height: 24px; background: transparent; color: var(--ink-3); padding: 0 4px; }
.mm-li .mk-actions { display: flex; gap: 6px; margin-top: 2px; }
.mm-li .mk-actions button { min-height: 28px; border-radius: 8px; }
@media (max-width: 900px) { .mk-card.mm-li { grid-template-columns: 120px minmax(0, 1fr) 130px; } .mm-li .mk-img canvas { width: 120px; } .mm-li-sex { display: none; } }
/* one listing */
.am2.mm-page { grid-template-columns: minmax(0, 1fr) 380px; }
.mm-page .am-left { padding: 16px 22px 26px; }
.mm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }
.mm-crumbs button { min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: inherit; cursor: pointer; }
.mm-crumbs button:hover { color: var(--ink); text-decoration: underline; }
.mm-crumbs i { font-style: normal; opacity: .6; }
.mm-crumbs span, .mm-crumbs button:last-child { color: var(--ink); font-weight: 600; }
.mm-page .am-photo { border-radius: 12px; }
.mm-actbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); margin: 10px 0 6px; border-bottom: 1px solid var(--rule); }
.mm-act { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; padding: 8px 4px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); text-decoration: none; cursor: pointer; }
.mm-act:hover { background: var(--paper-2); color: var(--ink); }
.mm-act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-act b { font-size: 12.5px; font-weight: 600; }
.mm-act small { font-size: 10.5px; color: var(--ink-3); }
.mm-act.on, .mm-act.ro { color: #e0607a; }
.mm-act.on svg, .mm-act.ro svg { fill: currentColor; }
.mm-act.ro { cursor: default; } .mm-act.ro:hover { background: none; }
.mm-strip { margin-top: 22px; }
.mm-strip-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.mm-strip-h b { font-family: var(--serif); font-size: 18px; }
.mm-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mm-mini { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 0 0 8px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper-2); color: var(--ink); text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.mm-mini:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.mm-mini canvas { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--thumb-bg); }
.mm-mini-t { padding: 0 8px; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-mini-b { display: flex; justify-content: space-between; gap: 6px; padding: 0 8px; font-size: 11px; color: var(--ink-3); }
.mm-mini-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-mini-b b { color: var(--ink); font-size: 13px; }
.mm-page .am-side { background: var(--paper); padding: 22px 20px 20px; gap: 14px; }
.mm-buy { display: flex; flex-direction: column; gap: 2px; padding-right: 28px; }
.mm-name { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.mm-kind { font-size: 13px; color: var(--ink-2); }
.mm-kind i { color: var(--ink-3); }
.mm-pet { font-size: 13px; color: var(--ink-2); font-style: italic; }
.mm-id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.mm-price { margin: 10px 0; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.mm-ctas { display: flex; flex-direction: column; gap: 8px; }
.mm-cta, .mm-cta2 { width: 100%; min-height: 44px; border-radius: 99px; font-size: 14.5px; font-weight: 700; }
.mm-cta { border: 0; background: var(--ink); color: var(--paper); }
.mm-cta:hover:not(:disabled) { background: var(--moss); color: #fff; }
.mm-cta:disabled { opacity: .55; cursor: not-allowed; }
.mm-cta2 { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.mm-cta2:hover { background: var(--paper-2); }
.mm-cta2.quiet { border-color: var(--rule-2); color: var(--ink-2); font-weight: 600; }
.mm-dl { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 7px; }
.mm-dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13px; }
.mm-dl dt { font-weight: 700; }
.mm-dl dd { margin: 0; color: var(--ink-2); }
.mm-dl dd small { color: var(--ink-3); }
.mm-traits { display: flex; flex-wrap: wrap; gap: 4px; }
.mm-traits .gene { font-size: 11px; }
.mm-hets { margin: 0; }
.mm-grade { letter-spacing: 1px; color: var(--amber); }
.mm-dates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--ink-3); }
.mm-dates b { color: var(--ink-2); font-weight: 600; }
.mm-sellercard { padding: 12px 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--rule); }
.mm-sc-top { display: flex; align-items: center; gap: 10px; }
.mm-sc-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm-sc-name { min-height: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-sc-name:hover { text-decoration: underline; }
.mm-sc-loc { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-3); }
.mm-sc-loc svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.mm-follow { min-height: 0; height: 30px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 700; }
.mm-follow.on { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-2); }
.mm-sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.mm-sc-stats div { display: flex; flex-direction: column; }
.mm-sc-stats b { font-size: 14px; }
.mm-sc-stats span { font-size: 11px; color: var(--ink-3); }
.mm-sc-tag { margin: 8px 0 0; font-size: 12px; font-style: italic; color: var(--ink-2); }
.mm-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.mm-check > div { display: flex; flex-direction: column; gap: 2px; }
.mm-check b { color: var(--ink); }
.mm-check svg { flex: none; width: 26px; height: 26px; fill: var(--ink-3); stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mm-check.good { border-color: rgba(106, 168, 79, .5); background: rgba(106, 168, 79, .1); }
.mm-check.good svg { fill: #6aa84f; }
.mm-check.high { border-color: rgba(213, 154, 63, .5); background: rgba(213, 154, 63, .1); }
.mm-check.high svg { fill: var(--amber); }
@media (max-width: 980px) { .am2.mm-page { grid-template-columns: 1fr; } .mm-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-sc-top .ig-av.mm-av { width: 44px; min-width: 44px; height: 44px; flex: 0 0 44px; font-size: 19px; }
label.mm-sort { flex-direction: row; }
/* the phone's For sale: two-up photo cards (#490) */
.mm-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mm-mgrid > :not(.mm-mcard) { grid-column: 1 / -1; }
.mm-mcard { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-2); min-width: 0; }
.mm-mimg { position: relative; }
.mm-mimg canvas { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--thumb-bg); }
.mm-mimg .mk-shield { top: 7px; left: 7px; width: 22px; height: 22px; } .mm-mimg .mk-shield svg { width: 13px; height: 13px; }
body.mobile .mm-mimg .mk-heart { position: absolute; top: 7px; right: 7px; bottom: auto; height: 24px; padding: 0 7px; margin: 0; font-size: 11px; background: rgba(20, 18, 15, .7); color: #fff; }
body.mobile .mm-mimg .mk-heart.on { color: #e0607a; }
.mm-mimg .mk-flags { left: 7px; bottom: 7px; }
.mm-mbody { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 9px; }
.mm-mt { font-size: 13.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-ms { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-mrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 3px; }
.mm-mrow b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.mm-macts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.mm-macts button { min-height: 32px; padding: 0 4px; border-radius: 8px; font-weight: 700; }
.mm-mcard .mk-locktag { margin-top: 6px; }
.mm-msheet { display: flex; flex-direction: column; gap: 12px; }
.mm-msheet .mm-mphoto { display: block; width: 100%; height: auto; aspect-ratio: 640 / 420; border-radius: 12px; border: 1px solid var(--rule); background: var(--thumb-bg); }
.mm-msheet .mm-buy { padding-right: 0; }
.mm-msheet .mm-name { font-size: 24px; }
.mm-msheet .mm-price { font-size: 28px; margin: 8px 0; }
.mm-msheet .section { margin: 4px 0 0; }
.mm-msheet .mm-follow { height: 32px; }
body.mobile .mm-cta { border: 0; background: var(--ink); color: var(--paper); border-radius: 99px; min-height: 46px; }
body.mobile .mm-cta2 { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 99px; min-height: 46px; }
body.mobile .mm-cta2.quiet { border-color: var(--rule-2); color: var(--ink-2); }
body.mobile .mm-follow { border: 0; background: var(--ink); color: var(--paper); border-radius: 99px; min-height: 0; }
body.mobile .mm-sc-name { border: 0; background: none; padding: 0; min-height: 0; }
/* ---- cutting the clutch (#492): a vermiculite tray, the cut, the reveal, the tally ---- */
.eggs.tray { padding: 14px; border-radius: 16px; gap: 12px; background-color: #5b4329; background-image: radial-gradient(circle at 30% 20%, rgba(255, 226, 160, .22), transparent 60%), linear-gradient(#5f462b, #4a3621); box-shadow: inset 0 3px 14px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .06); }
.eggs.tray .egg:not(.open) { border: 0; border-radius: 12px; overflow: visible; background-color: #86653d;
  background-image: radial-gradient(ellipse 40% 22% at 50% 80%, rgba(30, 18, 6, .55), transparent 72%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 236, 190, .14), transparent 70%), var(--verm, none);
  background-size: 100% 100%, 100% 100%, 220px 220px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4); }
.egg canvas.egg-cv { display: block; transition: transform .18s ease; }
.eggs.tray .egg:not(.open):not(.cutting):hover canvas.egg-cv { transform: translateY(-3px) rotate(-3deg); }
.eggs.tray .egg:not(.open):not(.cutting)::after { content: 'Cut'; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%) translateY(4px); padding: 2px 10px; border-radius: 99px; background: rgba(20, 14, 8, .78); color: #f6ead0; font: 700 11px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
.eggs.tray .egg:not(.open):not(.cutting):hover::after { opacity: 1; transform: translateX(-50%); }
.egg.cutting { cursor: progress; }
.egg.revealed { animation: eggFlip .62s cubic-bezier(.2, .9, .25, 1.15); }
@keyframes eggFlip { from { transform: perspective(700px) rotateY(75deg) scale(.88); opacity: .2; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.egg.open.best::after { content: '♛ Best of clutch'; position: absolute; top: 7px; left: 7px; z-index: 2; padding: 1px 8px; border-radius: 99px; background: linear-gradient(#f2d27a, #d9a43a); color: #3a2608; font: 800 10px/1.6 var(--sans); letter-spacing: .03em; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); animation: bestIn .35s ease; }
@keyframes bestIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.egg.open .v { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .egg.revealed, .egg.open.best::after { animation: none; } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; }
/* the revealed cards keep the tray's rounded corners (#492) */
.eggs.tray .egg.open { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.eggs.tray .egg.open canvas { border-radius: 8px; }
.eggs.tray .egg.open.best::after { border-radius: 99px; }
/* the phone listing's × stays at the top right while the sheet scrolls (#496) */
.mm-msheet .mm-mx { position: sticky; top: 6px; align-self: flex-end; z-index: 5; margin: 0 4px -48px 0; font-size: 22px; line-height: 1; }

/* ---- notification settings controls (#501): pill switches, the pop-up length slider ---- */
.np-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: var(--paper-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); flex: none; }
.np-seg button { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-height: 0; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-3); font: 600 12.5px/1 var(--sans); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.np-seg button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.np-seg button:hover:not(.on) { color: var(--ink); background: rgba(127, 118, 106, .12); }
.np-seg button.on { color: var(--ink); background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.np-seg button.lv-pop.on { background: var(--moss); color: #fff; }
.np-seg button.lv-off.on { background: rgba(201, 97, 78, .18); color: var(--brick); box-shadow: inset 0 0 0 1px rgba(201, 97, 78, .4); }
.np-seg button:focus-visible { outline: 2px solid var(--moss-2); outline-offset: 1px; }
/* the same pill track for the other settings switches (theme, camera, dying alerts…) */
.set-card .seg.set-seg { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: 99px; background: var(--paper-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); overflow: visible; }
.set-card .seg.set-seg button { height: 30px; padding: 0 13px; border: 0 !important; border-radius: 99px; background: transparent; color: var(--ink-3); font-weight: 600; }
.set-card .seg.set-seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
/* how long pop-ups stay */
.tl-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.tl-slide { display: inline-flex; align-items: center; gap: 10px; }
.tl-slide input[type=range] { -webkit-appearance: none; appearance: none; width: 150px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: linear-gradient(90deg, var(--moss-2) var(--f, 15%), var(--paper-3) var(--f, 15%)); cursor: pointer; }
.tl-slide input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--moss-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.tl-slide input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--moss-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.tl-slide output { min-width: 48px; padding: 3px 8px; border-radius: 8px; background: var(--paper-3); font: 700 12.5px/1.2 var(--mono); text-align: center; color: var(--ink); }
.tl-ctl.stay .tl-slide input[type=range] { opacity: .4; cursor: not-allowed; }
.tl-stay { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.tl-stay input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-sw { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--paper-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); transition: background .15s ease; flex: none; }
.tl-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.tl-stay input:checked + .tl-sw { background: var(--moss); } .tl-stay input:checked + .tl-sw::after { transform: translateX(14px); }
.tl-stay input:focus-visible + .tl-sw { outline: 2px solid var(--moss-2); outline-offset: 2px; }
.tl-try { height: 30px; min-height: 0; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font-weight: 600; font-size: 12.5px; }
.tl-try:hover { background: var(--paper-2); }
/* the phone's rows: the name and blurb above, the switch under it */
.np-mrow { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--card, var(--paper-2)); }
.np-mrow > div:first-child { display: flex; flex-direction: column; gap: 2px; } .np-mrow > div:first-child small { font-size: 12px; }
.np-mrow .np-seg { align-self: flex-start; }
body.mobile .np-seg button { height: 34px; padding: 0 14px; font-size: 13px; }
.tl-mrow .tl-ctl { justify-content: flex-start; }
.tl-mrow .tl-slide { flex: 1 1 100%; } .tl-mrow .tl-slide input[type=range] { flex: 1; width: auto; }
.np-seg button.on:not(.lv-pop):not(.lv-off), .set-card .seg.set-seg button.on { background: var(--ink); color: var(--paper); }
.set-row:has(.tl-ctl) { flex-wrap: wrap; } .set-row:has(.tl-ctl) .set-ctl { flex: 1 1 100%; justify-content: flex-start; padding-left: 48px; }
.set-row .tl-ctl { justify-content: flex-start; }
.tl-stay { text-transform: none; letter-spacing: 0; font-family: var(--sans); }
body.mobile .np-seg { width: auto; }
body.mobile .np-seg button { flex: none; width: auto; min-width: 0; margin: 0; border: 0; background: transparent; box-shadow: none; white-space: nowrap; color: var(--ink-3); justify-content: center; }
body.mobile .np-seg button.on { background: var(--ink); color: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
body.mobile .np-seg button.lv-pop.on { background: var(--moss); color: #fff; }
body.mobile .np-seg button.lv-off.on { background: rgba(201, 97, 78, .18); color: var(--brick); box-shadow: inset 0 0 0 1px rgba(201, 97, 78, .4); }
body.mobile .tl-try { width: auto; flex: none; }
body.mobile .more-list .np-seg { background: var(--paper-3); }
body.mobile .more-list .np-seg button { display: inline-flex; width: auto; min-height: 0; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; box-shadow: none; color: var(--ink-3); text-align: center; }
body.mobile .more-list .np-seg button.on { background: var(--ink); color: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
body.mobile .more-list .np-seg button.lv-pop.on { background: var(--moss); color: #fff; }
body.mobile .more-list .np-seg button.lv-off.on { background: rgba(201, 97, 78, .18); color: var(--brick); box-shadow: inset 0 0 0 1px rgba(201, 97, 78, .4); }
body.mobile .more-list .tl-try { display: inline-flex; align-items: center; width: auto; min-height: 0; height: 32px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--rule-2); background: transparent; box-shadow: none; }
/* ---------- Collection, one vocabulary (#428 design pass) ----------
   Four kinds of control and nothing else:
   filter chip  .rchip, .coll-seg button, .coll-tools .csel-btn, .coll-morebtn   toggles; 32px, radius 8, count in mono
   action       .abtn (+ .danger, .quiet)                                        does something; 30px, radius 8
   status pill  .tag in the status cell                                          read-only, rounded, outlined (unchanged)
   role badge   .rbadge, and the same dot on .rchip and .role-seg                read-only role: a coloured dot and the name
   The role dot is the one mark for a role everywhere; Undecided is a hollow ring. */
.rc-undecided, .rb-undecided, .rs-undecided { --rc: var(--ink-3); }
.rc-breeder, .rb-breeder, .rs-breeder { --rc: #a03f6a; }
.rc-growout, .rb-growout, .rs-growout { --rc: var(--moss); }
.rc-sell, .rb-sell, .rs-sell { --rc: var(--sky); }
.rc-wholesale, .rb-wholesale, .rs-wholesale { --rc: var(--amber); }
.rc-proving, .rb-proving, .rs-proving { --rc: #6b4fa0; } /* Proving (#775): an adult bred to settle a possible het */
:root[data-theme="dark"] :is(.rc-proving, .rb-proving, .rs-proving) { --rc: #a995d8; }
.rc-pet, .rb-pet, .rs-pet { --rc: #b5603a; } /* Pet (#1017): kept for its looks, for good */
:root[data-theme="dark"] :is(.rc-pet, .rb-pet, .rs-pet) { --rc: #e09a76; }
.rb-paw { margin-right: 3px; font-size: .9em; }
.role-seg.role-pick .rs-pet { grid-column: 1 / -1; } /* the seventh role, one-way: a row of its own under the six */
:root[data-theme="dark"] :is(.rc-breeder, .rb-breeder, .rs-breeder) { --rc: #d0869a; }
:root[data-theme="dark"] :is(.rc-growout, .rb-growout, .rs-growout) { --rc: #6fb07f; }
:root[data-theme="dark"] :is(.rc-undecided, .rb-undecided, .rs-undecided) { --rc: #a39a8a; }
.rchip::before, .rbadge::before, .role-seg button::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }
.rchip.rc-undecided::before, .rbadge.rb-undecided::before, .role-seg button.rs-undecided::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rc); }

/* the panel's three lines */
.coll-top { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.coll-top .coll-tools { margin: 0; gap: 8px; }
.coll-search #collFilter { flex: 1 1 auto; height: 38px; }
.coll-filters { flex-wrap: wrap; row-gap: 8px; }
.coll-filters .coll-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cf-gap { width: 1px; height: 20px; margin: 0 4px; background: var(--rule-2); flex: none; }
.coll-top .coll-strip { gap: 2px 4px; margin: 0; padding-top: 10px; border-top: 1px solid var(--rule); }

/* filter chips: one size, one border, one "on" */
.coll-top :is(.rchip, .coll-morebtn, .csel-btn), .coll-top .coll-seg { height: 32px; min-height: 32px; border-radius: 8px !important; }
.coll-top .rchip, .coll-top .coll-morebtn, #panelBody .coll-top .csel .csel-btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule-2); box-shadow: none; white-space: nowrap; }
.coll-top .coll-seg { display: inline-flex; border: 1px solid var(--rule-2); background: var(--paper); overflow: hidden; }
.coll-top .coll-seg button { min-height: 0; height: 100%; padding: 0 11px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); box-shadow: none; }
.coll-top .rchip span, .coll-x span { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); }
.coll-top :is(.rchip, .coll-morebtn, .csel-btn):hover:not(.on), .coll-top .coll-seg button:hover:not(.on) { background: var(--paper-3); color: var(--ink); border-color: var(--rule-2); }
.coll-top .coll-seg button.on, .coll-top .coll-morebtn.on { background: color-mix(in srgb, var(--amber) 16%, var(--paper)); color: #e0b46a; box-shadow: none; }
.coll-top .coll-morebtn.on { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.coll-top .rchip { border-left-width: 1px; }
.coll-top .rchip.on, .coll-top .rchip.on:hover { background: color-mix(in srgb, var(--rc) 18%, var(--paper)); border-color: color-mix(in srgb, var(--rc) 65%, transparent); color: var(--ink); }
.coll-top .rchip.on span { color: var(--ink-2); }
/* Wholesale's own action rides on its chip */
.rchip-split { display: inline-flex; }
.rchip-split .rchip { border-radius: 8px 0 0 8px !important; }
.rchip-act { height: 32px; min-height: 32px; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--brick); background: var(--paper); border: 1px solid var(--rule-2); border-left: 0; border-radius: 0 8px 8px 0; white-space: nowrap; }
.rchip-act:hover { background: var(--brick); border-color: var(--brick); color: #fff; }

/* the strip: quiet links, the count first */
.coll-strip .cs-count { margin-right: 8px; color: var(--ink-3); cursor: default; }
.coll-strip .cs-count b { color: var(--ink); }
.coll-top .coll-strip .cs-item { padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-weight: 500; }
.coll-top .coll-strip .cs-item:hover { background: var(--paper-3); color: var(--ink); }
.coll-top .coll-strip .cs-item.warn { background: transparent; color: #e0a43a; }
.coll-top .coll-strip .cs-item.warn:hover { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.coll-top .coll-strip .cs-item.on, .coll-top .coll-strip .cs-item.on:hover { background: color-mix(in srgb, var(--amber) 16%, transparent); color: #e0b46a; }
.coll-top .coll-strip .cs-item.cs-tubs { font-weight: 400; color: var(--ink-3); }
.coll-top .coll-strip .cs-item.cs-tubs.warn { color: #e0a43a; }

/* action buttons */
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, var(--paper-2)); border: 1px solid var(--rule-2); border-radius: 8px; box-shadow: none; }
.abtn:hover:not(:disabled) { background: var(--paper-3); color: var(--ink); border-color: var(--ink-3); }
.abtn:disabled { opacity: .45; cursor: not-allowed; }
.abtn.danger { color: var(--brick); border-color: color-mix(in srgb, var(--brick) 55%, var(--rule-2)); }
.abtn.danger:hover:not(:disabled) { background: var(--brick); border-color: var(--brick); color: #fff; }
.abtn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding: 0 8px; }
.abtn.quiet:hover:not(:disabled) { background: var(--paper-3); border-color: transparent; }
.coll-strip #selStart.abtn { height: 30px; min-height: 30px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 8px; margin-left: 6px; }

/* the selection bar: a tinted band, grouped by intent, the one destructive action at the end */
.selbar.coll-sel { position: sticky; top: -18px; z-index: 3; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 8px 10px 8px 14px; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--rule)); border-radius: 12px; background: color-mix(in srgb, var(--amber) 7%, var(--paper-2)); }
.coll-sel .sel-count { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.coll-sel .sel-count b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.coll-sel .sel-count .sel-lockn { margin-left: 8px; font-size: 12px; }
.coll-sel .sel-grp { display: inline-flex; align-items: center; gap: 6px; }
.coll-sel .sel-grp + .sel-grp { padding-left: 14px; border-left: 1px solid var(--rule-2); }
.coll-sel .sel-grp:first-of-type { gap: 0; margin-left: -8px; }
.coll-sel .sel-end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }

/* role badge (table, cards) */
.rbadge { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 2px 9px 2px 7px; border: 0; border-radius: 99px; font-size: 11.5px; font-weight: 500; line-height: 16px; color: var(--ink-2); background: color-mix(in srgb, var(--rc) 13%, transparent); vertical-align: middle; white-space: nowrap; }
.rbadge.rb-undecided { border: 0; background: transparent; color: var(--ink-3); padding-left: 2px; }
.rbadge.due { background: color-mix(in srgb, var(--rc) 28%, transparent); color: var(--ink); font-weight: 600; }
table.coll .roles { width: 128px; }
table.coll td.roles { display: table-cell; }
table.coll td.roles .role { margin-left: 2px; color: var(--ink-3); vertical-align: middle; }

/* the role control: the same dots, the same "on" as the role chips */
.role-seg { display: flex; gap: 0; border: 1px solid var(--rule-2); border-radius: 8px; overflow: hidden; background: var(--paper); }
.role-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1 1 auto; min-width: 0; height: 32px; min-height: 32px; padding: 0 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.role-seg button + button { border-left: 1px solid var(--rule); }
.role-seg button.on, .role-seg button.on:hover { background: color-mix(in srgb, var(--rc) 20%, var(--paper)); color: var(--ink); box-shadow: inset 0 -2px 0 var(--rc); }
.role-seg button:hover:not(.on):not(:disabled) { background: var(--paper-3); color: var(--ink); }
/* on the animal card (#893): two rows of three cells in one hairline box, so every name fits; the "on" cell tinted and
   ringed in its role's colour, and what the role means on the line under it */
.role-seg.role-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--rule); }
.role-seg.role-pick button { gap: 7px; height: 36px; min-height: 36px; padding: 0 8px; font-size: 13px; background: var(--paper); white-space: nowrap; overflow: hidden; }
.role-seg.role-pick button + button { border-left: 0; }
.role-seg.role-pick button::before { width: 8px; height: 8px; }
.role-seg.role-pick button.on, .role-seg.role-pick button.on:hover { background: color-mix(in srgb, var(--rc) 17%, var(--paper)); font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 80%, transparent); }
.role-seg.role-pick button:disabled { opacity: 1; color: color-mix(in srgb, var(--ink-3) 60%, var(--paper)); } /* dimmed, the cell still opaque */
.role-seg.role-pick button:disabled::before { opacity: .4; }
.role-what { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

/* ---- the Expo Hall (#506) ---- */
#hallbar { position: fixed; top: 74px; right: 18px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 99px; background: var(--paper); border: 1px solid var(--rule-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); font-size: 13.5px; }
#hallbar.hidden { display: none; }
#hallbar b { font-family: var(--serif); font-size: 16px; } #hallText { color: var(--ink-3); }
#hallbar button { border-radius: 99px; }
body.in-hall #walkStop, body.in-hall #designBtn, body.in-hall #railDesign, body.in-hall #walkBtn, body.in-hall #railSite, body.in-hall #dbRack, body.in-hall #dbDecor, body.in-hall #dbRoom { display: none !important; }
#railHall.on { box-shadow: inset 0 0 0 2px var(--amber); }
/* ---- the Expo Hall booth editor (#506): the booth in 3D on a stage, the tabs, the plan and inspector, the catalog */
.xb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.xb-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.xb-id h3 { margin: 0; font-family: var(--serif); font-size: 23px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb-id small { color: var(--ink-3); font-size: 12.5px; }
.xb-spot { flex: none; display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 6px; border: 2px solid var(--ink); border-radius: 6px; font-family: var(--mono); font-weight: 700; font-size: 18px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.xb-spot.sm { min-width: 38px; height: 38px; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); }
.xb-appeal { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; cursor: help; }
.xb-appeal-t { display: flex; align-items: center; gap: 8px; } .xb-appeal-t b { font-family: var(--mono); font-size: 15px; }
.xb-appeal small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.xb-stars { position: relative; display: inline-block; color: var(--rule-2); font-size: 15px; letter-spacing: 1px; line-height: 1; }
.xb-stars span { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--amber); }
.xb-meter { display: block; width: 132px; height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; } .xb-meter i { display: block; height: 100%; background: var(--moss); border-radius: 3px; }

.xb-stage { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--ink); background: radial-gradient(ellipse 80% 70% at 50% 28%, #4a4740, #24221e 70%, #191815); aspect-ratio: 1280 / 600; margin-bottom: 12px; }
.xb-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .25s; }
.xb-stage.ready canvas, .xb-stage canvas[data-sig] { opacity: 1; }
.xb-wait { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(243, 238, 228, .6); font-size: 13px; letter-spacing: .08em; pointer-events: none; }
.xb-stage.ready .xb-wait, .xb-stage:has(canvas[data-sig]) .xb-wait { display: none; }
.xb-views { position: absolute; left: 10px; top: 10px; display: flex; padding: 3px; border-radius: 99px; background: rgba(20, 19, 17, .72); backdrop-filter: blur(6px); }
.xb-views button, .xb-walk { min-height: 0; height: 26px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: rgba(243, 238, 228, .82); font-size: 12px; box-shadow: none; }
.xb-views button:hover { color: #fff; } .xb-views button.on { background: #f3eee4; color: #1e1a15; }
.xb-walk { position: absolute; right: 10px; top: 10px; height: 32px; background: rgba(20, 19, 17, .72); backdrop-filter: blur(6px); color: #f3eee4; padding: 0 14px; }
.xb-walk:hover { background: #f3eee4; color: #1e1a15; }
.xb-tip { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 8px; background: rgba(243, 238, 228, .94); color: #1e1a15; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.xb-tip b { flex: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }

.xb-tabs { position: sticky; top: -18px; z-index: 3; display: flex; gap: 2px; margin: 0 -2px 14px; padding: 6px 2px 0; background: var(--paper); border-bottom: 1px solid var(--ink); }
#panel.full .xb-tabs { top: -14px; }
.xb-tabs button { min-height: 0; height: 36px; padding: 0 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; box-shadow: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.xb-tabs button:hover { color: var(--ink); background: var(--paper-2); }
.xb-tabs button.on { background: var(--paper); border-color: var(--ink); color: var(--ink); font-weight: 700; }
.xb-tabs button i { font-style: normal; font-family: var(--mono); font-size: 10.5px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--paper-3); color: var(--ink-2); text-align: center; }
.xb-tabs button:last-child { margin-left: auto; }

.xb-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.xb-lbl small { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.xb-lbl .xb-ticon { width: 18px; height: 18px; }
.xb-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule-2); }
.xb-box.quiet { background: transparent; border-style: dashed; }
.xb-box .meta { margin: 0; }
.xb-empty { padding: 28px 20px; text-align: center; border: 1px dashed var(--rule-2); border-radius: 10px; color: var(--ink-2); } .xb-empty b { font-family: var(--serif); font-size: 18px; color: var(--ink); } .xb-empty p { margin: 6px 0 14px; }

/* build: the plan and what's picked */
.xb-build { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .xb-build { grid-template-columns: 1fr; } }
.xb-planbox { position: sticky; top: 34px; display: flex; flex-direction: column; gap: 8px; }
.hb-svg { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--ink); background: var(--paper-3); cursor: crosshair; box-shadow: 3px 3px 0 var(--rule-2); }
.hb-table { stroke: rgba(0, 0, 0, .45); stroke-width: 1; }
.hb-item { stroke: rgba(255, 255, 255, .9); stroke-width: 1.2; cursor: pointer; transition: transform .1s; }
.hb-item.disp { fill: #d59a3f; } .hb-item.sign { fill: #3a6d8c; } .hb-item.light { fill: #8e6ad8; } .hb-item.furn { fill: #7d766a; }
.hb-item:hover { stroke: #1e1a15; stroke-width: 2; }
.hb-item.sel { stroke: #1e1a15; stroke-width: 3; stroke-dasharray: 4 2; }
.hb-label { font-size: 10px; text-anchor: middle; fill: rgba(0, 0, 0, .45); letter-spacing: .2em; text-transform: uppercase; pointer-events: none; }
.xb-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--ink-3); }
.xb-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.xb-key i.disp { background: #d59a3f; } .xb-key i.sign { background: #3a6d8c; } .xb-key i.light { background: #8e6ad8; } .xb-key i.furn { background: #7d766a; }
.xb-over { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .xb-over small { font-size: 11px; color: var(--ink-3); margin-right: 2px; }
.xb-chip { display: inline-flex; align-items: center; min-height: 0; height: 24px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--ink-2); font-size: 11.5px; white-space: nowrap; box-shadow: none; }
button.xb-chip { cursor: pointer; } button.xb-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.xb-chip.fit { background: #e6efe5; border-color: #b8ccb6; color: #2f5d3a; }
:root[data-theme="dark"] .xb-chip.fit { background: #24352a; border-color: #3e5a45; color: #9fd2ab; }

.xb-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xb-table { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 10px; align-items: center; padding: 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper-2); }
.xb-table > div { display: flex; flex-direction: column; min-width: 0; } .xb-table b { font-size: 13.5px; } .xb-table small { font-size: 11.5px; color: var(--ink-3); }
.xb-table button { grid-column: 1 / -1; }
.xb-table.have { background: var(--paper); border-color: var(--rule-2); }
.xb-ticon { width: 36px; height: 36px; } .xb-ticon rect { fill: none; stroke: var(--ink-3); stroke-width: 1.5; } .xb-ticon rect.t { fill: var(--ink-3); stroke: none; }
.xb-table.have .xb-ticon rect.t { fill: var(--moss); }

.xb-kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.xb-kit { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; height: auto; padding: 12px; border-radius: 8px; border: 1px solid var(--ink); background: var(--paper); text-align: left; box-shadow: 2px 2px 0 var(--ink); }
.xb-kit:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.xb-kit b { font-family: var(--serif); font-size: 16px; } .xb-kit small { font-size: 12px; color: var(--ink-2); line-height: 1.35; flex: 1; } .xb-kit .num { font-weight: 700; margin-top: 4px; }

/* the inspector */
.xb-insp { gap: 12px; }
.xb-insp-h { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.xb-insp-pic { width: 150px; height: 100px; border-radius: 8px; background: radial-gradient(ellipse at 50% 30%, #4a4740, #1f1d1a); }
.xb-insp-h h4 { margin: 2px 0 4px; font-family: var(--serif); font-size: 19px; } .xb-insp-h p { margin: 0 0 8px; font-size: 12.5px; }
.xb-grp { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.xb-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }
.xb-field > span { padding-top: 6px; color: var(--ink-2); font-size: 12.5px; }
.xb-field > :not(span) { min-width: 0; }
.xb-pad { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 30px); gap: 3px; width: max-content; }
.xb-pad button { min-height: 0; height: 30px; padding: 0; font-size: 15px; } .xb-pad .u { grid-area: 1 / 2; } .xb-pad .l { grid-area: 2 / 1; } .xb-pad .c { grid-area: 2 / 2; } .xb-pad .r { grid-area: 2 / 3; } .xb-pad .d { grid-area: 3 / 2; }
.xb-nudge { display: flex; gap: 6px; margin-top: 6px; } .xb-nudge button { min-height: 0; height: 30px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
/* the walk hint and the room chat sit beside the booth editor, not over it */
body.in-hall.panel-full #walkbar { display: none; } /* the chat and the bottom bars dock beside any open panel (#578, end of file) */
.xb-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.xb-seg button { height: auto; min-height: 30px; padding: 4px 11px; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--paper-2); box-shadow: none; font-size: 12.5px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; white-space: nowrap; }
.xb-seg button:hover { border-color: var(--ink); }
.xb-seg button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.xb-seg button small { font-size: 10px; opacity: .75; }
.xb-seg.sm button { min-height: 26px; padding: 2px 9px; font-size: 11.5px; }
.xb-seg.subs button { flex-direction: row; gap: 6px; } .xb-seg.subs i, .xb-leds i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .25); }
.xb-sw { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.xb-sw button, .xb-any { position: relative; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .28); background: var(--c); box-shadow: none; cursor: pointer; }
.xb-sw button:hover, .xb-any:hover { transform: scale(1.12); }
.xb-sw button.on, .xb-any.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.xb-sw button.none { background: var(--paper); color: var(--ink-3); font-size: 13px; line-height: 1; }
.xb-any { background: conic-gradient(#ff5a5a, #ffb347, #f2d27a, #5cff9a, #5aa9ff, #b07cff, #ff7ad9, #ff5a5a); display: grid; place-items: center; overflow: hidden; }
.xb-any.on { background: var(--c); }
.xb-any input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }




.xb-text { display: flex; gap: 6px; } .xb-text input { flex: 1; min-width: 0; }
.xb-go { align-self: flex-start; min-height: 0; height: 32px; border-radius: 99px; padding: 0 14px; font-size: 12.5px; }
.xb-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rule); }

/* add: shelves and the catalog */
.xb-shelf { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.xb-shelf button { min-height: 0; height: 32px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; box-shadow: none; }
.xb-shelf button i { font-style: normal; font-family: var(--mono); font-size: 10.5px; opacity: .7; }
.xb-shelf button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.xb-addnote { margin: 0 0 12px; }
.xb-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
#panel.full .xb-cat { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.xb-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule-2); background: var(--paper); transition: border-color .12s, transform .12s; }
.xb-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.xb-card-pic { position: relative; aspect-ratio: 3 / 2; background: radial-gradient(ellipse 90% 80% at 50% 30%, #4a4740, #24221e 75%); border-bottom: 1px solid var(--rule-2); }
.xb-card-pic canvas { display: block; width: 100%; height: 100%; }
.xb-card-pic .xb-chip { position: absolute; left: 8px; bottom: 8px; height: 22px; font-size: 11px; }
.xb-card-b { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; flex: 1; }
.xb-card-t { display: flex; flex-direction: column; } .xb-card-t b { font-size: 14.5px; } .xb-card-t small { font-size: 11.5px; color: var(--ink-3); }
.xb-card p { margin: 0; flex: 1; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.xb-card-f { display: flex; align-items: center; gap: 8px; } .xb-card-f .num { font-size: 15px; } .xb-card-f small { flex: 1; text-align: right; font-size: 11px; } .xb-card-f button { margin-left: auto; }

/* animals: each display drawn, a row per compartment */
.xb-anhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; } .xb-anhead p { margin: 0; flex: 1; } .xb-anhead button { flex: none; }
.xb-disp { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; padding: 12px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper); }
@media (max-width: 760px) { .xb-disp { grid-template-columns: 1fr; } }
.xb-disp-pic { border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #4a4740, #1f1d1a); align-self: start; }
.xb-disp-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.xb-disp-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xb-disp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 6px; } .xb-disp-h b { font-family: var(--serif); font-size: 17px; margin-right: 4px; }
.xb-slot { display: grid; grid-template-columns: 54px 80px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); }
.xb-slot-n { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.xb-slot canvas { width: 80px; height: 48px; border-radius: 6px; background: var(--paper-2); }
.xb-slot-ph { width: 80px; height: 48px; border-radius: 6px; border: 1px dashed var(--rule-2); }
.xb-slot-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .xb-slot-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xb-slot-t small { font-size: 11.5px; color: var(--ink-3); } .xb-slot-t em { font-style: normal; color: var(--moss); font-weight: 700; }
.xb-slot .xb-slot-t select { width: 100%; height: 32px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 12.5px; }
.xb-slot.xb-free .xb-slot-t > small { display: none; }

/* look: themes */
.xb-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.xb-theme { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; height: auto; padding: 6px 6px 8px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--paper); box-shadow: none; }
.xb-theme:hover { border-color: var(--ink); }
.xb-theme b { font-size: 12.5px; font-weight: 600; }
.xb-theme-sw { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 54px; padding: 14px 8px 0; border-radius: 5px; background: var(--d); overflow: hidden; }
.xb-theme-sw i { display: block; border-radius: 2px 2px 0 0; margin: 0 1px; } .xb-theme-sw i:nth-child(3) { opacity: .7; }
.xb-theme-sw em { position: absolute; right: 5px; top: 4px; font-style: normal; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 2px; }
.xb-bn { display: flex; flex-direction: column; gap: 6px; }
.xb-bn-prev { padding: 6px 10px; border-radius: 4px; font-weight: 800; text-align: center; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xb-free-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--moss); background: color-mix(in srgb, var(--moss) 10%, var(--paper)); font-size: 12.5px; color: var(--ink-2); } .xb-free-note b { color: var(--ink); }
.xb-card-f s, .xb-kit s, .xb-table s { font-weight: 400; opacity: .55; margin-right: 3px; }
/* the floor plan */
.xb-intro h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 24px; } .xb-intro p { margin: 0 0 14px; color: var(--ink-2); font-size: 13.5px; }
.xb-plan { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 0; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--ink); }
.xb-plan-t { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 2px 6px; border-bottom: 3px double var(--rule-2); margin-bottom: 4px; } .xb-plan-t small { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.xb-prow { display: grid; grid-template-columns: repeat(5, 1fr) 20px repeat(5, 1fr); gap: 3px; }
.xb-aisle { text-align: center; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding: 8px 0; } .xb-aisle.front { padding: 12px 0 6px; }
.xb-door { align-self: center; padding: 4px 22px; border-radius: 6px 6px 0 0; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.xb-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 3px 2px; border-radius: 5px; border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--moss) calc(var(--heat) * 34%), var(--paper)); color: var(--ink); font-size: 11px; cursor: pointer; overflow: hidden; box-shadow: none; }
.xb-cell b { font-family: var(--mono); font-size: 12px; } .xb-cell small { font-size: 10px; color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xb-cell.open:hover { border-color: var(--ink); transform: translateY(-1px); }
.xb-cell.taken { background: repeating-linear-gradient(-45deg, var(--paper-3) 0 5px, var(--paper-2) 5px 10px); } .xb-cell.taken small { color: var(--ink); font-weight: 600; }
.xb-cell.mine { background: var(--ink); color: var(--paper); border-color: var(--ink); } .xb-cell.mine small { color: var(--paper); }
.xb-cell.dear { opacity: .5; }
.xb-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--ink-3); } .xb-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--moss) 25%, var(--paper)); }
.xb-legend i.taken { background: repeating-linear-gradient(-45deg, var(--paper-3) 0 3px, var(--paper-2) 3px 6px); } .xb-legend i.mine { background: var(--ink); } .xb-legend i.dear { opacity: .5; }

/* a display clicked in the hall */
#modalBox2:has(.xb-dlg) { width: min(680px, 94vw); max-width: min(680px, 94vw); }
.xb-dlg { display: flex; flex-direction: column; gap: 12px; }
.xb-dlg-pic { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--ink); background: radial-gradient(ellipse 80% 70% at 50% 30%, #4a4740, #1f1d1a 75%); aspect-ratio: 960 / 560; }
.xb-dlg-pic canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; } .xb-dlg.ready .xb-dlg-pic canvas { opacity: 1; }
.xb-dlg-cap { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 8px; background: rgba(243, 238, 228, .95); color: #1e1a15; }
.xb-dlg-cap b { display: block; font-family: var(--serif); font-size: 15px; } .xb-dlg-cap small { font-size: 11.5px; color: #5d564c; }
.xb-dlg-cap .xb-spot { background: #f3eee4; color: #1e1a15; border-color: #1e1a15; box-shadow: 2px 2px 0 #1e1a15; }
.xb-dlg-list { display: flex; flex-direction: column; max-height: 42vh; overflow: auto; }
.xb-an { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.xb-an canvas { width: 120px; height: 72px; border-radius: 6px; background: var(--paper-2); }
.xb-an-t { min-width: 0; } .xb-an-t b { font-size: 14.5px; } .xb-an-t > small { display: block; font-size: 12px; color: var(--ink-2); } .xb-an-t .xb-slot-n { display: block; margin-bottom: 1px; }
.xb-an-m { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.xb-an-a { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .xb-an-a .num { font-size: 16px; }
.xb-an.xb-free { display: flex; gap: 10px; color: var(--ink-3); font-size: 12.5px; }
/* ---------- the sell queue: Collection → Sell (#429) ---------- */
.sq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--sky); border-radius: 10px; background: var(--paper-2); }
.sq-head .sq-line { font-size: 13px; font-weight: 600; color: var(--ink); }
.sq-head .sq-note { font-size: 12px; color: var(--ink-3); }
.sq-head .sq-whole { margin-left: auto; font-size: 12px; background: transparent; border: 0; min-height: 0; }
.sq-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex-basis: 100%; }
.sq-btns .sq-why { font-size: 12px; color: var(--ink-3); }
.sp-allow .sp-by, .sp-allow .sp-queue { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.sp-allow .sq-btns { margin-top: 8px; }
/* the store listing cap (#729): slots kept free, the over-cap and by-hand floor notes */
.sp-kf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 14px; }
.sp-step { display: inline-flex; align-items: center; gap: 6px; }
.sp-step b { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.sp-step .sp-kfb { min-width: 32px; min-height: 32px; padding: 0; font-size: 16px; line-height: 1; }
.sp-allow .sp-kf + .sp-note { margin: 2px 0 0; font-size: 12px; }
.sp-allow .sp-over, .sp-allow .sp-floor { margin: 6px 0 0; font-size: 12px; color: #b0533f; }
table.sq-table td, table.sq-table th { vertical-align: middle; }
table.sq-table .sq-pos { width: 34px; text-align: right; font-family: var(--mono); font-size: 13px; color: var(--ink); }
table.sq-table .sq-ask { width: 150px; white-space: nowrap; }
table.sq-table .sq-when { width: 190px; font-size: 12.5px; color: var(--ink); }
table.sq-table .sq-when.on { color: var(--sky); }
table.sq-table .sq-when.muted { color: var(--ink-3); }
table.sq-table .sq-act { width: 92px; text-align: right; }
.sq-askbox { display: inline-flex; flex-direction: row; align-items: center; gap: 2px; margin: 0; font-size: 12px; letter-spacing: normal; text-transform: none; color: var(--ink-3); }
.sq-askbox input { width: 56px; height: 28px; min-height: 28px; padding: 0 6px; font-family: var(--mono); font-size: 12.5px; text-align: right; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--paper); color: var(--ink); }
.sq-price { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
tr.sq-row.sq-listed .sq-pos::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
tr.sq-row.sq-held { opacity: .75; }
.sq-nudge { margin-top: 3px; font-size: 11.5px; color: #e0a43a; }
.sq-nudge::before { content: '↺ '; }

/* ---------- sticky panel headers (#508, #581) ----------
   stickyPanelHeader (client/js/stickyhead.js) puts .ph-stick on a panel's header block (the Collection's card, the
   Breeding tabs and controls, the Shop's search, tabs and chips): it sticks to the top of the panel's scroll box and is
   opaque out to the box's top padding, so rows never show above or beside it. Headings stick right under it (--ph-h and
   --ph-ptop, measured there), and a shadow shows once rows pass beneath (.stuck on the header, or on the headings). */
.ph-sentinel { height: 1px; margin-bottom: -1px; }
/* edge to edge across the panel, and the panel's own grain on it, so it reads as part of the panel, not a darker box set inside it (#620) */
.ph-stick { position: sticky; top: calc(-1 * var(--ph-ptop, 18px)); z-index: 5; margin-top: calc(-1 * var(--ph-ptop, 18px)); margin-left: calc(-1 * var(--ph-pside, 0px)); margin-right: calc(-1 * var(--ph-pside, 0px)); padding-top: var(--ph-ptop, 18px); padding-left: var(--ph-pside, 0px); padding-right: var(--ph-pside, 0px); background: var(--paper); background-image: var(--grain); } /* top and sides only: each header keeps its own bottom spacing (the Shop's, #622) */
.ph-stick.stuck:not(.ph-headed) { box-shadow: 0 10px 12px -8px rgba(0, 0, 0, .55); }
/* the Collection: the card, then its column headings */
.coll-stick { padding-bottom: 12px; }
.coll-stick .coll-top { margin-bottom: 0; }
table.coll thead th { top: calc(var(--ph-h, 0px) - var(--ph-ptop, 18px)); z-index: 4; }
table.coll.stuck thead th { box-shadow: 0 10px 12px -8px rgba(0, 0, 0, .55); }
table.coll tr.row { scroll-margin-top: calc(var(--ph-h, 0px) + 56px); } /* under the sticky column headings too */
/* Breeding: the tabs and the tab's controls; the Season board's headings and the Projects slots line stick under them */
.breed-head { display: flow-root; }
#panelBody .sb-head { position: sticky; top: calc(var(--ph-h, 0px) - var(--ph-ptop, 18px)); z-index: 4; background: var(--paper); }
#panelBody .sb-head.stuck, #panelBody .pj-top.stuck { box-shadow: 0 10px 12px -8px rgba(0, 0, 0, .55); }
#panelBody .sb-row { scroll-margin-top: calc(var(--ph-h, 0px) + 40px); }
#panelBody .pj-top { position: sticky; top: calc(var(--ph-h, 0px) - var(--ph-ptop, 18px)); z-index: 4; margin-top: -6px; padding: 10px 0 12px; background: var(--paper); background-image: var(--grain); border-bottom: 1px solid var(--rule); } /* the panel's own paper and grain, not a flat band (#654) */
/* the selection bar takes the strip's place inside the card, at the strip's height, so entering select mode doesn't move the rows */
.coll-top .coll-strip, .coll-top .selbar.coll-sel { min-height: 41px; box-sizing: border-box; }
.coll-top .selbar.coll-sel { position: static; margin: 0; padding: 6px 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; }
.coll-top .selbar.coll-sel .sel-count b { color: #e0b46a; }

/* ---- the booth editor, round two (#517): colour chips, light dots, display tiles, the animal picker */
.xb-leds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xb-leds button { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule-2); background: var(--paper-2); box-shadow: none; }
.xb-leds button i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.xb-leds button i.off { background: transparent; border: 1.5px dashed var(--ink-3); box-shadow: none; }
.xb-leds button:hover { border-color: var(--ink); }
.xb-leds button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.xb-leds-n { margin-left: 4px; font-size: 12px; color: var(--ink-2); }
.xb-cf { position: relative; display: inline-block; }
.xb-cf-b { display: inline-flex; align-items: center; gap: 8px; min-height: 0; height: 32px; padding: 0 10px 0 6px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--paper); box-shadow: none; font-size: 13px; color: var(--ink); }
.xb-cf-b:hover, .xb-cf-b[aria-expanded="true"] { border-color: var(--ink); }
.xb-cf-b i { width: 20px; height: 20px; border-radius: 5px; background: var(--c); border: 1px solid rgba(0, 0, 0, .3); }
.xb-cf-b i.none { background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--rule-2) 3px 4px); }
.xb-cf-b svg { width: 12px; height: 12px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.xb-cf-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 220px; padding: 10px; border-radius: 10px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
.xb-cf-pop[hidden] { display: none; }
.xb-flds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.xb-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .xb-fld.wide { grid-column: 1 / -1; }
.xb-fld > span { font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }
.xb-bn { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); gap: 12px; }
.xb-add-bn { align-self: flex-start; min-height: 0; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px dashed var(--ink-3); background: transparent; box-shadow: none; color: var(--ink-2); font-size: 13px; }
.xb-add-bn:hover { border-color: var(--ink); color: var(--ink); }
.xb-link { align-self: flex-start; min-height: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--brick); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }

.xb-disp-h small { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.xb-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.xb-tile { position: relative; min-width: 0; }
.xb-tile-b { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 7px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--paper-2); box-shadow: none; text-align: left; color: var(--ink); }
.xb-tile-b:hover { border-color: var(--ink); background: var(--paper); }
.xb-tile-b canvas { width: 100%; height: auto; aspect-ratio: 5 / 3; border-radius: 5px; background: var(--paper-3); }
.xb-tile-b b { font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xb-tile-b small { font-size: 11px; color: var(--ink-3); } .xb-tile-b em { font-style: normal; color: var(--moss); font-weight: 700; }
.xb-tile .xb-slot-n { font-size: 9.5px; }
.xb-tile-ph { display: grid; place-items: center; aspect-ratio: 5 / 3; border-radius: 5px; border: 1.5px dashed var(--rule-2); color: var(--ink-3); font-size: 22px; font-weight: 300; }
.xb-tile.xb-free .xb-tile-b { background: transparent; border-style: dashed; } .xb-tile.xb-free .xb-tile-b b { color: var(--ink-3); font-weight: 500; }
.xb-tile.xb-free .xb-tile-b:hover .xb-tile-ph { border-color: var(--ink); color: var(--ink); }
.xb-tile-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--paper); box-shadow: none; font-size: 14px; line-height: 1; color: var(--ink-2); opacity: 0; transition: opacity .12s; }
.xb-tile:hover .xb-tile-x, .xb-tile-x:focus-visible { opacity: 1; } .xb-tile-x:hover { color: var(--brick); border-color: var(--brick); }

.xb-pick { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(20, 18, 15, .78); }
.xb-pick-card { width: min(920px, 100%); max-height: min(820px, 100%); display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--ink); background: var(--paper); background-image: var(--grain); box-shadow: var(--shadow-6, 0 20px 50px rgba(0, 0, 0, .4)); overflow: hidden; }
.xb-pick-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.xb-pick-card header small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.xb-pick-card header h3 { margin: 2px 0 0; font-family: var(--serif); font-size: 24px; }
.xb-pick-x { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; }
.xb-pick-fit { display: flex; align-items: center; gap: 10px; margin: 0 18px; padding: 8px 12px; border-radius: 8px; background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
.xb-pick-fit .xb-chip { flex: none; }
.xb-pick-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.xb-pick-tools input[type=search] { flex: 1 1 220px; min-width: 0; height: 34px; }
.xb-pick-tools select { height: 32px; min-height: 0; font-size: 12.5px; }
.xb-pick-tools .xb-chip { height: 30px; cursor: pointer; } .xb-pick-tools .xb-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.xb-pick-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 14px 18px; align-content: start; }
.xb-pc { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; height: auto; padding: 0; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper); box-shadow: none; overflow: hidden; text-align: left; color: var(--ink); transition: border-color .12s, transform .12s; }
.xb-pc:hover { border-color: var(--ink); transform: translateY(-1px); }
.xb-pc.on { border: 2px solid var(--moss); }
.xb-pc canvas { width: 100%; height: auto; aspect-ratio: 5 / 3; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.xb-pc-t { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; min-width: 0; }
.xb-pc-t b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xb-pc-t > small { font-size: 11px; color: var(--ink-3); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xb-pc-m { font-size: 11.5px; color: var(--ink-2); }
.xb-pc-tags { display: flex; flex-wrap: wrap; gap: 4px; } .xb-pc-tags:empty { display: none; }
.xb-pc-tags em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--paper-2); color: var(--ink-2); }
.xb-pc-tags em.sale { background: #e6efe5; color: #2f5d3a; } .xb-pc-tags em.here { background: var(--moss); color: #fff; } .xb-pc-tags em.on { background: #f3e5c8; color: #7a4e14; }
:root[data-theme="dark"] .xb-pc-tags em.sale { background: #24352a; color: #9fd2ab; } :root[data-theme="dark"] .xb-pc-tags em.on { background: #3a2f1c; color: #e3c07a; }
.xb-pick-none { grid-column: 1 / -1; padding: 40px 10px; text-align: center; color: var(--ink-3); }
.xb-pick-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
@media (max-width: 640px) { .xb-flds { grid-template-columns: 1fr; } .xb-pick { padding: 8px; } }

/* ---- arranging a booth in 3D (#518): the bar, a frame round the view, the piece's toolbar, the why-not tip */
body.hall-arranging #hallbar, body.hall-arranging #walkbar, body.hall-arranging .rc { display: none !important; }
#xbArrFrame { position: fixed; inset: 56px 0 0 88px; z-index: 17; pointer-events: none; border: 3px solid #d59a3f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), inset 0 0 60px rgba(213, 154, 63, .18); }
.xb-arr { position: fixed; top: 70px; left: calc(50% + 44px); transform: translateX(-50%); z-index: 31; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 120px); padding: 8px 8px 8px 12px; border-radius: 14px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); font-size: 13px; }
.xb-arr > b { font-family: var(--serif); font-size: 16px; white-space: nowrap; }
.xb-arr-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; background: #d59a3f; color: #1e1a15; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.xb-arr-live i { width: 8px; height: 8px; border-radius: 50%; background: #1e1a15; animation: xbPulse 1.4s ease-in-out infinite; }
@keyframes xbPulse { 50% { opacity: .25; } }
.xb-arr-hint { color: var(--ink-3); font-size: 12px; white-space: nowrap; } .xb-arr-hint kbd { font: 600 10.5px var(--mono); padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; }
.xb-arr-views { display: flex; padding: 3px; border-radius: 99px; background: var(--paper-2); border: 1px solid var(--rule-2); }
.xb-arr-views button { min-height: 0; height: 28px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; box-shadow: none; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.xb-arr-views button.on { background: var(--ink); color: var(--paper); }
.xb-arr > button { min-height: 0; height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; }
@media (max-width: 1250px) { .xb-arr-hint { display: none; } }
.xb-arr-tool { position: fixed; z-index: 32; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); font-size: 12.5px; white-space: nowrap; }
.xb-arr-tool[hidden] { display: none; }
.xb-arr-tool b { margin-right: 4px; font-size: 13px; }
.xb-arr-tool button { min-height: 0; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; box-shadow: none; }
.xb-arr-tool button.x { width: 30px; padding: 0; font-size: 16px; }
.xb-arr-tip { position: fixed; z-index: 33; padding: 5px 9px; border-radius: 6px; background: #b3261e; color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.xb-arr-tip[hidden] { display: none; }
.xb-stage-act { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.xb-stage-act .xb-walk { position: static; }
.xb-walk.arr { background: #d59a3f; color: #1e1a15; font-weight: 700; } .xb-walk.arr:hover { background: #f3eee4; }
.hb-item { touch-action: none; } .hb-svg { touch-action: none; }
.hb-item.dragging { cursor: grabbing; stroke: #1e1a15; stroke-width: 2; } .hb-item.dragging.bad { fill: #e5484d; }

/* ---- double booths (#524) */
.xb-spot.two { min-width: 0; padding: 0 10px; gap: 4px; display: inline-flex; } .xb-spot.two i { font-style: normal; font-weight: 400; opacity: .55; margin: 0 2px; }
.xb-halves { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 12.5px; color: var(--ink-2); }
.xb-halves button { min-height: 0; height: 28px; padding: 0 12px; border-radius: 99px; font-family: var(--mono); font-weight: 700; font-size: 12px; box-shadow: none; }
.xb-halves button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .xb-halves small { color: var(--ink-3); margin-left: 4px; }
.xb-plans { display: grid; gap: 0; } .xb-plans.two { grid-template-columns: 1fr 1fr; }
.xb-plans.two .hb-svg { border-radius: 0; box-shadow: none; } .xb-plans.two .xb-plan1:first-child .hb-svg { border-radius: 8px 0 0 8px; border-right-style: dashed; } .xb-plans.two .xb-plan1:last-child .hb-svg { border-radius: 0 8px 8px 0; border-left: 0; }
.xb-plan1 { position: relative; } .xb-plan1 > small { position: absolute; left: 6px; bottom: 4px; z-index: 1; font-family: var(--mono); font-size: 10px; font-weight: 700; color: rgba(0, 0, 0, .55); pointer-events: none; }
.xb-plans.two + .xb-key, .xb-planbox:has(.xb-plans.two) { }
.xb-build:has(.xb-plans.two) { grid-template-columns: 340px minmax(0, 1fr); }
.xb-leave { display: flex; gap: 6px; flex-wrap: wrap; }
.xb-cell.join { outline: 2px dashed #d59a3f; outline-offset: -3px; } .xb-cell.join small { color: #b8731f; font-weight: 700; }
.xb-cell.later { opacity: .55; }
.xb-legend i.join { outline: 2px dashed #d59a3f; outline-offset: -2px; }

/* ---- the booth studio (#528): full screen, the booth on the left, the tools on the right; easier to read */
.xb-root { font-size: 13.5px; }
:root[data-theme="dark"] .xb-root, :root[data-theme="dark"] .xb-pick, :root[data-theme="dark"] .xb-dlg { --ink-3: #a79d8e; --ink-2: #cfc6b5; --rule: rgba(236, 229, 214, .12); --rule-2: rgba(236, 229, 214, .22); }
.xb-root .meta, .xb-root small { line-height: 1.45; }
.xb-wide { max-width: 1100px; margin: 0 auto; }
.xb-studio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(460px, .85fr); gap: 28px; align-items: start; }
.xb-col-l { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.xb-col-r { min-width: 0; }
@media (max-width: 1180px) { .xb-studio { grid-template-columns: 1fr; } .xb-col-l { position: static; } }
.xb-studio .xb-head { margin-bottom: 0; }
.xb-id h3 { font-size: 26px; }
.xb-id small { font-size: 13px; color: var(--ink-2); }
.xb-spot { min-width: 54px; height: 54px; font-size: 19px; }
.xb-appeal small { font-size: 11px; }
.xb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xb-act { min-height: 0; height: 36px; padding: 0 16px; border-radius: 99px; font-size: 13.5px; font-weight: 600; }
.xb-act.primary { background: #d59a3f; border-color: #d59a3f; color: #1e1a15; } .xb-act.primary:hover { background: #e2ab55; }
.xb-freepill { margin-left: auto; padding: 5px 12px; border-radius: 99px; border: 1px dashed var(--moss-2, #5fa572); color: var(--ink-2); font-size: 12px; cursor: help; }
.xb-studio .xb-stage { aspect-ratio: 16 / 9; margin-bottom: 0; border-radius: 12px; }
.xb-studio .xb-stage canvas { object-fit: cover; }
.xb-next { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--rule); font-size: 13.5px; color: var(--ink); }
.xb-next b { flex: none; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss-2, #5fa572); }
.xb-studio .xb-tabs { top: -14px; margin-top: 0; }
.xb-tabs button { height: 40px; font-size: 14px; padding: 0 18px; }
.xb-studio .xb-build { grid-template-columns: 1fr; }
.xb-studio .xb-planbox { position: static; max-width: 420px; }
.xb-studio .xb-build:has(.xb-plans.two) { grid-template-columns: 1fr; } .xb-studio .xb-build:has(.xb-plans.two) .xb-planbox { max-width: none; }
.xb-box { padding: 16px; gap: 12px; }
.xb-lbl { font-size: 11.5px; } .xb-lbl small { font-size: 12.5px; }
.xb-field { grid-template-columns: 110px minmax(0, 1fr); } .xb-field > span { font-size: 13px; }
.xb-fld > span { font-size: 12.5px; }
.xb-table b { font-size: 14px; } .xb-table small, .xb-card-t small, .xb-tile-b small, .xb-key { font-size: 12px; }
.xb-card p { font-size: 12.5px; }
.xb-card-t b { font-size: 15px; }
.xb-studio .xb-cat { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.xb-studio .xb-disp { grid-template-columns: 170px minmax(0, 1fr); }
.xb-tile-b b { font-size: 13px; } .xb-slot-n { font-size: 10.5px; color: var(--ink-3); }
.xb-warn-inline { color: #d59a3f; font-weight: 600; }
.xb-halves { margin: 0 0 14px; }

/* the picker: rows as tall as their cards (a long list crushed them), readable cards, the growth note */
.xb-pick-grid { grid-auto-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.xb-pc { flex-shrink: 0; }
.xb-pc-t b { font-size: 14px; } .xb-pc-t > small { font-size: 12px; color: var(--ink-2); } .xb-pc-m { font-size: 12.5px; }
.xb-pick-fit { font-size: 13px; color: var(--ink); } .xb-pick-fit b { font-size: 14px; }
.xb-pick-warn { margin: 8px 18px 0; padding: 8px 12px; border-radius: 8px; border-left: 3px solid #d59a3f; background: rgba(213, 154, 63, .1); font-size: 12.5px; color: var(--ink); }
.xb-pick-warn b { color: #d59a3f; }

/* the display pop-up: the buttons stay in view, the spots scroll as tiles */
#modalBox2:has(.xb-dlg) { width: min(780px, 94vw); max-width: min(780px, 94vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
#modalBox2:has(.xb-dlg) #dlg { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#modalBox2:has(.xb-dlg) #dlg > .actions { flex: none; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--rule); }
.xb-dlg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.xb-dlg-pic { flex: none; aspect-ratio: 960 / 400; }
.xb-dlg-list { flex: 1; min-height: 120px; max-height: none; overflow: auto; padding-right: 4px; }
.xb-dlg .xb-tiles { gap: 10px; }
.xb-dt { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper-2); text-align: left; color: var(--ink); }
.xb-dt canvas { width: 100%; height: auto; aspect-ratio: 5 / 3; border-radius: 6px; background: var(--paper-3); }
.xb-dt b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xb-dt small { font-size: 12px; color: var(--ink-2); } .xb-dt small.morph { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-3); }
.xb-dt-a { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; } .xb-dt-a .num { font-size: 15px; margin-right: auto; } .xb-dt-a button { min-height: 0; height: 28px; padding: 0 10px; font-size: 12px; }
button.xb-dt { height: auto; min-height: 0; box-shadow: none; cursor: pointer; } button.xb-dt.xb-free { background: transparent; border-style: dashed; } button.xb-dt.xb-free:hover { border-color: var(--ink); } button.xb-dt.xb-free b { color: var(--ink-3); font-weight: 500; }
.xb-dlg-empty { margin: 10px 0 0; }

/* the studio, round two (#528) */
body.in-hall:has(#panel.full:not(.hidden)) #hallbar { display: none; }
.xb-under { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
.xb-under-r { display: flex; flex-direction: column; gap: 10px; } .xb-under-r .meta { margin: 0; font-size: 13px; }
.xb-under .xb-planbox { position: static; max-width: none; }
.xb-under:has(.xb-plans.two) { grid-template-columns: 1fr; }
.xb-sign { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--rule); } .xb-sign:first-of-type { border-top: 0; padding-top: 0; }
.xb-sign-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .xb-sign-h b { font-size: 14px; } .xb-sign-h small { font-family: var(--mono); color: var(--ink-3); } .xb-sign-h .xb-link { margin-left: auto; color: var(--ink-2); }
.xb-sign-prev { display: inline-block; max-width: 180px; padding: 4px 10px; border-radius: 4px; font-weight: 800; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(255, 255, 255, .15); }

.xb-headrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.xb-headrow .xb-head { flex: 1 1 340px; min-width: 0; }
.xb-headrow .xb-actions { flex: none; }
.xb-headrow .xb-freepill { margin-left: 0; order: -1; }
.xb-studio.on-build .xb-stage { aspect-ratio: 2.15 / 1; }
.xb-studio.on-build .xb-under { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); }

/* ---- supporter looks (#532) */
.xb-suptag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 99px; background: linear-gradient(135deg, #c9a25a, #e6c27a); color: #1e1a15; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.xb-suptag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #8b2b2b 45%, transparent 47%), #1e1a15; box-shadow: 0 0 0 1.5px #1e1a15; }
.xb-lbl .xb-suptag { margin-left: 4px; }
button.locked, .xb-any.locked { position: relative; opacity: .6; } button.locked::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #c9a25a; box-shadow: 0 0 0 1.5px var(--paper); }
.xb-any.locked { border: 1px dashed #c9a25a; }
.xb-lockline { display: flex; flex-direction: column; gap: 6px; } .xb-lockline small { color: var(--ink-3); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xb-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.xb-fonts button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; height: auto; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--paper-2); box-shadow: none; }
.xb-fonts button b { font-size: 20px; line-height: 1.1; } .xb-fonts button small { font-size: 10.5px; color: var(--ink-3); }
.xb-fonts button.on { border-color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.xb-choice button { flex-direction: row; gap: 8px; } .xb-choice i.pat { width: 18px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .3); background: var(--c); }
.xb-choice i.pat.velvet, .xb-choice i.pat.satin, .xb-choice i.pat.sequin, .xb-choice i.pat.plain[style*="--d"] { background: var(--d); }
.xb-choice i.pat.velvet { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%), var(--d); } .xb-choice i.pat.satin { background: linear-gradient(115deg, var(--d) 30%, rgba(255,255,255,.45) 50%, var(--d) 70%); } .xb-choice i.pat.sequin { background: radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px) 0 0 / 4px 4px, var(--d); }
.xb-choice i.pat.checker { background: conic-gradient(var(--c) 25%, rgba(255,255,255,.35) 0 50%, var(--c) 0 75%, rgba(255,255,255,.35) 0) 0 0 / 8px 8px; } .xb-choice i.pat.herring { background: repeating-linear-gradient(45deg, #8a6a46 0 3px, #6e5236 3px 6px); } .xb-choice i.pat.turf { background: #3c6b35; } .xb-choice i.pat.python { background: radial-gradient(ellipse 4px 3px at 30% 40%, #2a1d10 80%, transparent), radial-gradient(ellipse 4px 3px at 75% 70%, #2a1d10 80%, transparent), #a07a46; } .xb-choice i.pat.hex { background: radial-gradient(circle, transparent 2px, rgba(0,0,0,.4) 2.5px, transparent 3px) 0 0 / 6px 6px, var(--c); }
.xb-supbox { border-color: #c9a25a; background: linear-gradient(180deg, rgba(201, 162, 90, .08), transparent 60%), var(--paper); }
.xb-theme.sup { position: relative; } .xb-theme .xb-suptag { position: absolute; top: -8px; left: 6px; font-size: 9px; padding: 1px 6px 1px 5px; z-index: 1; } .xb-theme.locked { opacity: .7; }
.xb-card.sup { border-color: #c9a25a; } .xb-card-pic > .xb-suptag { position: absolute; top: 8px; left: 8px; z-index: 1; }
.xb-unlock { background: linear-gradient(135deg, #c9a25a, #e6c27a); color: #1e1a15; border-color: #c9a25a; font-weight: 700; }
.xb-fx button.locked { opacity: .55; }
.xb-fx button { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }

.xb-perk-what { font-weight: 700; color: #e6c27a; } .xb-perks { margin: 8px 0 10px; padding-left: 18px; columns: 2; column-gap: 18px; font-size: 13px; } .xb-perks li { margin: 2px 0; break-inside: avoid; }

/* ---- the Expo page (#534) */
.xo { display: flex; flex-direction: column; gap: 22px; }
.xo-hero { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--ink); background: radial-gradient(ellipse at 50% 30%, #3a3833, #151412 75%); aspect-ratio: 1600 / 620; min-height: 300px; }
.xo-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; } .xo-hero.ready canvas { opacity: 1; }
.xo-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 11, 10, .82), rgba(12, 11, 10, .45) 45%, rgba(12, 11, 10, 0) 70%), linear-gradient(0deg, rgba(12, 11, 10, .6), transparent 45%); }
.xo-hero-b { position: absolute; left: 28px; bottom: 26px; right: 28px; color: #f3eee4; }
.xo-hero-b .lbl { color: #d8c39a; letter-spacing: .2em; }
.xo-hero-b h2 { margin: 2px 0 10px; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; color: #fff; }
.xo-hero-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; } .xo-hero-row b { font-family: var(--mono); } .xo-dot { opacity: .5; }
.xo-hero-row .xp-when { color: #e9e2d4; }
.xo-hero-act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.xo-hero-act button { min-height: 0; height: 40px; padding: 0 18px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.xo-hero-act .primary { background: #d59a3f; border-color: #d59a3f; color: #1e1a15; }
.xo-hero-act .ghost { background: rgba(243, 238, 228, .1); color: #f3eee4; border: 1px solid rgba(243, 238, 228, .45); } .xo-hero-act .ghost:hover { background: rgba(243, 238, 228, .2); }
.xo-soon { font-size: 13px; color: #e9e2d4; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, .35); }
.xo-hero-ev { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; background: rgba(243, 238, 228, .92); color: #1e1a15; }
.xo-hero-ev small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5d564c; } .xo-hero-ev b { font-size: 13px; }
.xo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .xo-grid { grid-template-columns: 1fr; } }
.xo-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 10px; }
.xo-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); }
.xo-sec-h h3 { margin: 0; font-family: var(--serif); font-size: 22px; } .xo-sec-h .meta { font-size: 13px; }
.xo-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.xo-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.xo-ballot { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.xo-ballot.sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 52vh; overflow: auto; }
.xo-bc { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; height: auto; padding: 0; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper); box-shadow: none; overflow: hidden; text-align: left; color: var(--ink); transition: border-color .12s, transform .12s; }
.xo-bc:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.xo-bc canvas { width: 100%; height: auto; aspect-ratio: 5 / 3; background: var(--paper-3); }
.xo-bc-t { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 4px; min-width: 0; } .xo-bc-t b { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .xo-bc-t small { font-size: 11.5px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.xo-bc-m { font-size: 11.5px; color: var(--ink-2); }
.xo-bc-v { margin: 6px 10px 10px; padding: 5px 0; border-radius: 6px; text-align: center; font-size: 12.5px; font-weight: 700; background: var(--paper-2); border: 1px solid var(--rule-2); }
.xo-bc:hover:not(:disabled) .xo-bc-v { background: #d59a3f; border-color: #d59a3f; color: #1e1a15; }
.xo-bc.on { border: 2px solid #d59a3f; } .xo-bc.on .xo-bc-v { background: #d59a3f; border-color: #d59a3f; color: #1e1a15; }
.xo-yourvote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; border-left: 3px solid #d59a3f; background: rgba(213, 154, 63, .1); font-size: 13.5px; } .xo-yourvote .xb-link { margin-left: auto; }
.xo-empty { padding: 26px 18px; border: 1px dashed var(--rule-2); border-radius: 10px; color: var(--ink-2); text-align: center; font-size: 13.5px; }
#modalBox2:has(.xo-ask) { width: min(760px, 94vw); max-width: min(760px, 94vw); }
#panel.full .xo { max-width: 1320px; margin: 0 auto; width: 100%; }
#panel.full .xo-ballot { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* ---- the Expo page, round two (#534): a show programme */
.xo { gap: 28px; }
.xo-hero { aspect-ratio: 1600 / 560; }
.xo-hero-b h2 { margin-bottom: 0; }
.xo-prog { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 16px; border-radius: 14px; border: 1px solid var(--rule-2); background: var(--paper-2); margin-top: -8px; }
.xo-classes { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 99px; border: 1px solid var(--rule-2); background: var(--paper); }
.xo-classes button { min-height: 0; height: 32px; padding: 0 18px; border: 0; border-radius: 99px; background: transparent; box-shadow: none; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.xo-classes button.on { background: var(--ink); color: var(--paper); }
.xo-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xo-cell { display: flex; flex-direction: column; gap: 4px; padding: 2px 18px; border-left: 1px solid var(--rule-2); min-width: 0; } .xo-cell:first-child { padding-left: 0; border-left: 0; }
.xo-cell > small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.xo-cell em { font-style: normal; font-size: 13px; color: var(--ink-2); } .xo-cell .xp-status { align-self: flex-start; }
.xo-big { font-family: var(--serif); font-size: 30px; line-height: 1.05; } .xo-mid { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.xo-split { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); font-family: var(--mono); }
.xo-split i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; color: #1e1a15; }
.xo-split i.r1 { background: #e6c27a; } .xo-split i.r2 { background: #cfd3d8; } .xo-split i.r3 { background: #d39a6a; }
.xo-prog .xp-line { margin: 2px 0 0; }
.xo-rules { margin: 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .xo-cells { grid-template-columns: 1fr 1fr; row-gap: 14px; } .xo-cell:nth-child(3) { padding-left: 0; border-left: 0; } }
.xo-sec-h { align-items: center; }
.xo-sec-act { margin-left: auto; display: flex; gap: 8px; align-items: center; } .xo-sec-act .primary { min-height: 0; height: 36px; padding: 0 16px; }
.xo-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.xo-t { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--paper-2); overflow: hidden; }
.xo-t-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.xo-t-h i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; }
.xo-t-h i.h0 { background: #c8553d; } .xo-t-h i.h1 { background: #b8731f; } .xo-t-h i.h2 { background: #5a8a4e; } .xo-t-h i.h3 { background: #3d6b8c; } .xo-t-h i.h4 { background: #9a5a8e; }
.xo-t-h b { font-size: 14.5px; } .xo-t-h small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.xo-t-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.xo-a { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; height: auto; padding: 0 0 6px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); box-shadow: none; overflow: hidden; text-align: left; color: var(--ink); transition: border-color .12s; }
.xo-a:hover:not(:disabled) { border-color: var(--ink); }
.xo-a canvas { width: 100%; height: auto; aspect-ratio: 5 / 3; background: var(--paper-3); }
.xo-a-t { display: flex; align-items: center; gap: 4px; padding: 6px 8px 0; min-width: 0; } .xo-a-t b { font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xo-a > small { padding: 0 8px; font-size: 11.5px; color: var(--ink-3); }
.xo-a-v { margin: 6px 8px 0; padding: 4px 0; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--rule-2); }
.xo-a:hover:not(:disabled) .xo-a-v { background: #d59a3f; border-color: #d59a3f; color: #1e1a15; }
.xo-a.on { border: 2px solid #d59a3f; } .xo-a.on .xo-a-v { background: #d59a3f; border-color: #d59a3f; color: #1e1a15; }
.xo-a:disabled { opacity: .8; cursor: default; } .xo-a:disabled .xo-a-v { display: none; }
.xo-yourvote { gap: 10px; } .xo-yv-l { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #d59a3f; font-weight: 700; }
.xo-res .xp-result { border: 0; background: transparent; padding: 0; }
.xo-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1000px) { .xo-two { grid-template-columns: 1fr; } }
.xo-days { display: flex; flex-direction: column; border: 1px solid var(--rule-2); border-radius: 12px; overflow: hidden; }
.xo-day { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--rule); } .xo-day:first-child { border-top: 0; }
.xo-day small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .xo-day b { font-size: 14px; }
.xo-day.now { background: var(--paper-2); align-items: flex-start; padding: 14px; } .xo-day.now b { font-family: var(--serif); font-size: 18px; } .xo-day.now p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.xo-hero { aspect-ratio: 1600 / 470; }
.xo-a-t { align-items: flex-start; } .xo-a-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.4em; }
.xo-a-t .sexmark, .xo-a-t > span:last-child { flex: none; margin-top: 1px; }
#xoCompete .xp-table { align-self: flex-start; width: auto; max-width: 100%; }
#xoCompete .xp-top { grid-template-columns: repeat(var(--n, 3), 210px) !important; }
#xoCompete .xp-spot canvas { aspect-ratio: 5 / 3; height: auto; }

.xo-yrow { display: grid; grid-template-columns: auto minmax(240px, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 1000px) { .xo-yrow { grid-template-columns: 1fr; } }
.xo-aside { display: flex; flex-direction: column; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper-2); }
.xo-as { padding: 12px 16px; border-top: 1px solid var(--rule); } .xo-as:first-child { border-top: 0; }
.xo-as small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.xo-as p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; } .xo-as p b { color: var(--ink); } .xo-as button { margin-top: 8px; }

.xo-res .xp-podium { max-width: 880px; margin: 0 auto; }
.xo-res .xp-rhead, .xo-res .xp-also { max-width: 880px; margin-left: auto; margin-right: auto; }

/* ---- the Expo page, round three (#534): the door, entry cards, the table picker */
.xo-hero-b { right: auto; max-width: 52%; }
.xo-door { position: absolute; right: 26px; bottom: 26px; display: flex; align-items: center; gap: 16px; min-height: 0; height: auto; padding: 16px 22px 16px 16px; border-radius: 16px; border: 0; background: linear-gradient(135deg, #e6b45e, #d59a3f 55%, #b87d26); color: #1e1a15; text-align: left; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .15s, box-shadow .15s; }
.xo-door:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 0 4px rgba(230, 180, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.xo-door::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid rgba(230, 180, 94, .55); animation: xoDoor 2.2s ease-out infinite; pointer-events: none; }
@keyframes xoDoor { 0% { opacity: .9; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .xo-door::after { animation: none; } }
.xo-door-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #1e1a15; color: #e6b45e; } .xo-door-i svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xo-door-t { display: flex; flex-direction: column; gap: 2px; } .xo-door-t b { font-family: var(--serif); font-size: 21px; line-height: 1.1; } .xo-door-t small { font-size: 12.5px; opacity: .8; }
.xo-door-a { font-size: 26px; font-weight: 300; margin-left: 4px; transition: transform .15s; } .xo-door:hover .xo-door-a { transform: translateX(4px); }
.xo-door.off { cursor: default; background: rgba(20, 19, 17, .75); color: #f3eee4; box-shadow: none; padding: 14px 20px; } .xo-door.off::after { display: none; }
@media (max-width: 1000px) { .xo-hero-b { max-width: none; bottom: 120px; } .xo-door { left: 20px; right: 20px; bottom: 20px; } }
.xo-ents { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(180px, 230px)); gap: 12px; align-items: stretch; }
.xo-ent { position: relative; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--paper-2); overflow: hidden; min-width: 0; }
.xo-ent canvas { width: 100%; height: auto; aspect-ratio: 5 / 3; background: var(--paper-3); }
.xo-ent-n { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; border-radius: 99px; background: rgba(20, 19, 17, .7); color: #f3eee4; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.xo-ent-x { position: absolute; top: 6px; right: 6px; z-index: 1; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: rgba(20, 19, 17, .7); color: #f3eee4; font-size: 16px; line-height: 1; box-shadow: none; opacity: 0; transition: opacity .12s; }
.xo-ent:hover .xo-ent-x, .xo-ent-x:focus-visible { opacity: 1; } .xo-ent-x:hover { background: #b3261e; }
.xo-ent-b { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; } .xo-ent-b b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xo-ent-b small { font-size: 12px; color: var(--ink-2); } .xo-ent-b small.m { color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
button.xo-ent.add { align-items: center; justify-content: center; gap: 4px; min-height: 250px; height: auto; border: 2px dashed var(--rule-2); background: transparent; box-shadow: none; color: var(--ink-2); cursor: pointer; }
button.xo-ent.add:hover { border-color: #d59a3f; color: var(--ink); background: rgba(213, 154, 63, .06); }
.xo-ent-plus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid currentColor; font-size: 26px; font-weight: 300; margin-bottom: 6px; } button.xo-ent.add b { font-size: 14px; } button.xo-ent.add small { font-size: 12px; color: var(--ink-3); }
.xo-ent.off { align-items: center; justify-content: center; min-height: 250px; border-style: dashed; background: transparent; color: var(--ink-3); }
.xo-judge { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.xo-judge-s { display: flex; flex-direction: column; line-height: 1; } .xo-judge-s small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .xo-judge-s b { font-family: var(--mono); font-size: 16px; color: var(--ink); }
.xo-judge-bar { flex: 1; display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--paper-3); gap: 1px; }
.xo-judge-bar i.c { background: #5fa572; } .xo-judge-bar i.g { background: #d59a3f; } .xo-judge-bar i.r { background: #b07cff; } .xo-judge-bar i.q { background: #6ca0c2; }
.xo-judge-bar i.f, .xo-jkey i.f { background: #9a6aa3; } .xo-judge-bar i.a, .xo-jkey i.a { background: #d9739a; } .xo-judge-bar i.n, .xo-jkey i.n { background: #c9a25a; } /* the Legacy class (#786) */
.xo-judge-h { font-style: normal; font-size: 10.5px; font-weight: 700; color: #e5484d; white-space: nowrap; }
.xo-yrow { grid-template-columns: auto minmax(260px, 1fr); }
.xe-card { width: min(1040px, 100%); }
.xe-tray { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; padding: 0 18px 12px; }
.xe-slot { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; height: auto; padding: 8px 10px 8px 34px; border-radius: 10px; border: 1.5px dashed var(--rule-2); background: transparent; box-shadow: none; text-align: left; color: var(--ink-3); font-size: 12.5px; }
.xe-slot-n { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-weight: 700; color: var(--ink-3); }
button.xe-slot.on { border: 1.5px solid #d59a3f; background: rgba(213, 154, 63, .08); color: var(--ink); cursor: pointer; }
.xe-slot canvas { width: 80px; height: 48px; border-radius: 6px; background: var(--paper-3); flex: none; }
.xe-slot-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .xe-slot-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xe-slot-t small { font-size: 11.5px; color: var(--ink-2); font-family: var(--mono); }
.xe-slot-x { font-size: 18px; color: var(--ink-3); } button.xe-slot.on:hover .xe-slot-x { color: #e5484d; }
.xe-pc { position: relative; } .xe-pc:disabled { opacity: .45; }
.xe-pc.on { border: 2px solid #d59a3f; }
.xe-badge { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: #d59a3f; color: #1e1a15; font-size: 12px; font-weight: 800; }
.xe-badge.top { background: rgba(20, 19, 17, .75); color: #e6c27a; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.xe-go { display: flex; gap: 8px; } .xe-go .primary { min-height: 0; height: 38px; padding: 0 18px; font-weight: 700; }
.xe-card footer .meta { font-size: 12.5px; }

.xo-jkey { display: inline-flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); margin-right: 12px; } .xo-jkey i { width: 10px; height: 6px; border-radius: 2px; margin-left: 4px; } .xo-jkey i:first-child { margin-left: 0; }
.xo-jkey i.c { background: #5fa572; } .xo-jkey i.g { background: #d59a3f; } .xo-jkey i.r { background: #b07cff; } .xo-jkey i.q { background: #6ca0c2; }
#xoCompete > .xo-jkey { margin: -4px 0 0; }

/* the Championship, named apart from the Expo Hall (#534) */
.xo-champ { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 6px; border-top: 3px double var(--rule-2); }
.xo-champ .lbl { color: #d59a3f; letter-spacing: .2em; } .xo-champ h2 { margin: 2px 0 0; font-family: var(--serif); font-size: 32px; line-height: 1.05; }
.xo-champ p { margin: 0; max-width: 560px; font-size: 13.5px; color: var(--ink-2); }
.xo-champ + .xo-prog { margin-top: -12px; }

/* ---- the Best in Show vote as a show poster (#538) */
.xv { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(18, 15, 12, .8); animation: xvIn .25s ease-out; }
.xv.out { opacity: 0; transition: opacity .2s; }
@keyframes xvIn { from { opacity: 0; } }
.xv-card { position: relative; width: min(1080px, 100%); max-height: min(880px, 100%); display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; color: #2b2313;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .5), transparent 60%), repeating-linear-gradient(0deg, rgba(120, 90, 50, .035) 0 2px, transparent 2px 6px), #f4ecdb;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 0 10px #f4ecdb, inset 0 0 0 12px #2b2313, inset 0 0 0 14px #f4ecdb, inset 0 0 0 15px rgba(43, 35, 19, .5); animation: xvCard .45s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes xvCard { from { transform: translateY(30px) scale(.94) rotate(-1deg); opacity: 0; } }
.xv-bunting { height: 46px; margin: 14px 18px 0; color: #2b2313; } .xv-bunting svg { width: 100%; height: 46px; display: block; }
.xv-x { position: absolute; top: 22px; right: 24px; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid #2b2313; background: #f4ecdb; color: #2b2313; font-size: 20px; line-height: 1; box-shadow: none; z-index: 2; }
.xv-x:hover { background: #2b2313; color: #f4ecdb; }
.xv-h { display: flex; align-items: center; gap: 18px; padding: 4px 40px 14px; }
.xv-rose { flex: none; animation: xvSway 3.2s ease-in-out 2; transform-origin: 50% 0; } @keyframes xvSway { 50% { transform: rotate(5deg); } }
.xv-kicker { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #a3542a; }
.xv-h h2 { margin: 2px 0 4px; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 44px); line-height: 1; color: #2b2313; } .xv-h h2 em { font-style: italic; color: #b8731f; }
.xv-h p { margin: 0 0 8px; font-size: 14px; color: #5d4f35; }
.xv-meta { display: flex; flex-wrap: wrap; gap: 6px; } .xv-meta span { padding: 4px 10px; border-radius: 99px; background: #2b2313; color: #f4ecdb; font-size: 12.5px; } .xv-meta b, .xv-meta .xp-clock { color: #e6c27a; font-family: var(--mono); }
.xv-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; padding: 14px 40px 26px; align-content: start; }
.xv-ent { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; height: auto; padding: 10px 10px 12px; border: 0; border-radius: 3px; background: #fffaf0; color: #2b2313; text-align: left; cursor: pointer;
  transform: rotate(var(--tilt)); box-shadow: 0 2px 0 rgba(43, 35, 19, .15), 0 8px 18px rgba(43, 35, 19, .18); transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .18s, opacity .25s; }
.xv-ent:hover { transform: rotate(0) translateY(-6px) scale(1.03); box-shadow: 0 4px 0 rgba(43, 35, 19, .15), 0 18px 30px rgba(43, 35, 19, .28); }
.xv-pin { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9c8a, var(--tag) 60%, #5a1d10); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); z-index: 1; }
.xv-no { align-self: flex-start; margin-bottom: 6px; padding: 2px 8px; border-radius: 2px; background: var(--tag); color: #fff; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.xv-pic { display: block; border-radius: 2px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #4a3f33, #1e1a15 80%); } .xv-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; }
.xv-name { margin-top: 8px; font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xv-morph { font-size: 11.5px; color: #7a6a4c; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.xv-by { font-size: 12px; color: #5d4f35; }
.xv-cta { margin-top: 8px; padding: 7px 0; border-radius: 3px; border: 2px solid #2b2313; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .02em; transition: background .15s, color .15s; }
.xv-ent:hover .xv-cta { background: #2b2313; color: #f4ecdb; }
.xv-stamp { position: absolute; top: 18px; right: -10px; display: flex; flex-direction: column; align-items: center; gap: 0; transform: scale(0) rotate(-30deg); opacity: 0; pointer-events: none; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.xv-stamp b { margin-top: -10px; padding: 2px 8px; border-radius: 3px; background: #c8553d; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-6deg); }
.xv-ent.picked { transform: rotate(0) translateY(-4px); box-shadow: 0 0 0 3px #e2b93b, 0 18px 30px rgba(43, 35, 19, .3); }
.xv-ent.picked .xv-stamp { transform: scale(1) rotate(8deg); opacity: 1; transition: transform .45s cubic-bezier(.2, 1.8, .4, 1), opacity .15s; }
.xv-ent.picked .xv-cta { background: #e2b93b; border-color: #b8901c; color: #2b2313; }
.xv-ent.dim { opacity: .45; }
.xv-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 40px 26px; border-top: 2px dashed rgba(43, 35, 19, .25); margin: 0 26px; }
.xv-note { flex: 1; min-width: 0; font-size: 14px; color: #5d4f35; } .xv-note b { color: #2b2313; }
.xv-btns { flex: none; display: flex; gap: 10px; } .xv-btns button { flex: none; white-space: nowrap; min-height: 0; height: 42px; padding: 0 18px; border-radius: 99px; border: 2px solid #2b2313; background: transparent; color: #2b2313; font-weight: 700; box-shadow: none; }
.xv-btns .xv-all { background: #2b2313; color: #f4ecdb; } .xv-btns button:hover { transform: translateY(-1px); }
.xv-card .xp-confetti { z-index: 5; }
@media (prefers-reduced-motion: reduce) { .xv, .xv-card, .xv-rose { animation: none; } .xv-ent, .xv-stamp { transition: none; } }
@media (max-width: 700px) { .xv-h { padding: 4px 20px 10px; } .xv-rose { display: none; } .xv-grid, .xv-f { padding-left: 20px; padding-right: 20px; } .xv-f { flex-direction: column; align-items: stretch; margin: 0 10px; } }
.xv-card .xp-confetti i { animation-name: xvFall; animation-duration: 2.8s; } @keyframes xvFall { to { transform: translate(var(--dx), 720px) rotate(var(--r)); opacity: 0; } }

/* the vote poster's entries keep their size in a long field (#538) */
.xv-grid { grid-auto-rows: max-content; } .xv-ent { will-change: transform; } .xv-ent > * { flex-shrink: 0; }
/* the hall picture loading (#538) */
.xo-hero-load { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #e9e2d4; font-size: 14px; letter-spacing: .04em; background: radial-gradient(ellipse at 50% 40%, #3a3833, #151412 75%); transition: opacity .4s; }
.xo-hero.ready .xo-hero-load { opacity: 0; pointer-events: none; }
.xo-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(233, 226, 212, .2); border-top-color: #e6b45e; animation: xoSpin .9s linear infinite; }
@keyframes xoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xo-spin { animation-duration: 2.4s; } }
.xo-hero-shade, .xo-hero-b, .xo-door, .xo-hero-ev { z-index: 2; }

/* ---- breeding, readably (#545) */
.mb { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.mb-name { font-size: 14px; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mb-vis { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mb-het { font-size: 12px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mb-het i { font-style: normal; opacity: .75; }
.mb.one .mb-name { -webkit-line-clamp: 1; } .mb.one { flex: 1; }
.mb.one { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 8px; } .mb.one .mb-het { flex-basis: 100%; }
/* active pairings: one compact row each */
.prs { display: flex; flex-direction: column; border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden; }
.pr { display: grid; grid-template-columns: 112px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--rule); }
.pr:first-child { border-top: 0; } .pr:hover { background: var(--paper-2); }
.pr-pics { display: flex; } .pr-pics canvas { width: 56px; height: 34px; border-radius: 6px; cursor: pointer; background: var(--thumb-bg); } .pr-pics canvas + canvas { margin-left: -6px; box-shadow: -2px 0 0 var(--paper); }
.pr-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-line { display: flex; align-items: flex-start; gap: 6px; min-width: 0; } .pr-sex { flex: none; width: 14px; margin-top: 2px; } .pr-sex svg { width: 12px; height: 12px; } .pr-sex.f { color: #c4588a; } .pr-sex.m { color: #4f87b8; }
.pr-line .mb-name { font-size: 13px; } .pr-line .mb-vis, .pr-line .mb-het { font-size: 11.5px; }
.pr-state { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pr-state .steps { gap: 3px; flex-wrap: wrap; } .pr-state .step { font-size: 10.5px; padding: 1px 7px; }
.pr-status { font-size: 12px; color: var(--ink-3); }
.pr-acts { display: flex; gap: 6px; } .pr-acts button { min-height: 0; height: 28px; padding: 0 10px; font-size: 12px; }
@media (max-width: 900px) { .pr { grid-template-columns: 112px minmax(0, 1fr); } .pr-state, .pr-acts { grid-column: 2; } }
/* the picker */
#modalBox:has(.pp-tools) { width: min(1100px, 96vw); max-width: min(1100px, 96vw); }
.pp-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .pp-tools .bsearch { flex: 1 1 260px; margin: 0; }
.pp-tools select { height: 36px; min-height: 0; font-size: 13px; }
.pp-ready { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.pp-views { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--rule-2); background: var(--paper-2); }
.pp-views button { min-height: 0; height: 28px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; box-shadow: none; font-size: 12.5px; color: var(--ink-2); } .pp-views button.on { background: var(--ink); color: var(--paper); }
.pick-list.pp-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-content: start; grid-auto-rows: max-content; }
.pk { display: flex; flex-direction: column; gap: 6px; min-height: 0; height: auto; padding: 0 0 10px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper-2); box-shadow: none; overflow: hidden; text-align: left; color: var(--ink); }
.pk:hover { border-color: var(--ink); } .pk.on { box-shadow: 0 0 0 2px var(--moss); border-color: var(--moss); }
.pk-pic { position: relative; display: block; } .pk-pic canvas { display: block; width: 100%; height: auto; aspect-ratio: 52 / 30; background: var(--thumb-bg); }
.pk.notyet .pk-pic canvas { opacity: .55; }
.pk-why { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(20, 18, 15, .8); color: #f3eee4; font-size: 11px; }
.pk .mb { padding: 0 10px; } .pk-meta { display: flex; justify-content: space-between; gap: 6px; padding: 0 10px; font-size: 12px; color: var(--ink-3); } .pk-meta .evtag { font-size: 12.5px; }
.pick-list.pp-list, .pick-list.pp-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule-2); border-radius: 10px; padding: 0; }
.pkr { display: grid; grid-template-columns: 64px minmax(0, 1fr) 76px 64px 72px auto 120px; gap: 12px; align-items: center; min-height: 0; height: auto; padding: 6px 12px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; box-shadow: none; text-align: left; color: var(--ink); }
.pick-list.pp-list .pkr:not(.pkr-h) { grid-template-columns: 96px minmax(0, 1fr) 76px 64px 72px auto 120px; }
.pkr:first-child { border-top: 0; } .pkr:hover:not(.pkr-h) { background: var(--paper-2); } .pkr.on { box-shadow: inset 3px 0 0 var(--moss); background: var(--paper-2); }
.pkr canvas { width: 64px; height: 38px; border-radius: 5px; background: var(--thumb-bg); } .pp-list .pkr canvas { width: 96px; height: 58px; }
.pp-table .pkr .mb-het { display: none; } .pp-table .pkr { padding: 4px 12px; } .pp-table .pkr canvas { width: 48px; height: 29px; } .pp-table .pkr:not(.pkr-h) { grid-template-columns: 48px minmax(0, 1fr) 76px 64px 72px auto 120px; }
.pkr-h { position: sticky; top: 0; z-index: 1; background: var(--paper); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); cursor: default; }
.pkr-n { font-family: var(--mono); font-size: 12px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.pkr-st { font-size: 12px; text-align: right; } .pkr-st em { font-style: normal; color: var(--moss-2, #5fa572); font-weight: 600; } .pkr-st i { font-style: normal; color: var(--ink-3); }
.pkr.notyet .mb-name { color: var(--ink-2); } .pkr.notyet canvas { opacity: .55; }
.pick-list.pp-list .pkr { grid-template-columns: 96px minmax(0, 1fr) 76px 64px 72px auto 110px; }
.pick-list.pp-table .pkr { grid-template-columns: 48px minmax(0, 1fr) 76px 64px 72px auto 110px; }

.pick-list.pp-list, .pick-list.pp-table { display: flex; } .pkr { flex-shrink: 0; }
.pp-ready { min-height: 0; height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--rule-2); background: var(--paper-2); box-shadow: none; font-size: 12.5px; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.pp-ready.on { background: var(--moss); border-color: var(--moss); color: #fff; }
.pk-meta { flex-wrap: wrap; row-gap: 2px; } .pk-meta > span { white-space: nowrap; }
/* the picker's cards and rows are buttons, and the global button hover (an ink fill, paper text) blanked their text:
   pinned here in both themes, so hovering a card only darkens its border and a row only takes the paper tint (#608) */
button.pk, :root[data-theme="dark"] button.pk { background: var(--paper-2); color: var(--ink); }
button.pkr, :root[data-theme="dark"] button.pkr { background: transparent; color: var(--ink); }
.pkr:hover:not(.pkr-h), .pkr.on, :root[data-theme="dark"] .pkr:hover:not(.pkr-h), :root[data-theme="dark"] .pkr.on { background: var(--paper-2); }

/* a gravid female has no male with her: her eggs take his place (#545) */
.pr-egg { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 56px; height: 34px; margin-left: -6px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--rule-2); box-shadow: -2px 0 0 var(--paper); color: #e9dcb8; }
.pr-egg svg { width: 14px; height: 14px; fill: #f1e6c8; stroke: rgba(0, 0, 0, .25); } .pr-egg b { font-family: var(--mono); font-size: 11px; color: var(--ink-2); font-weight: 600; }
.pr-state .steps { flex-wrap: nowrap; } .pr-state .step { white-space: nowrap; }
.pr { grid-template-columns: 112px minmax(0, 1.3fr) minmax(220px, 1fr) auto; }

/* ---- in progress, round two (#545) */
.prs2 { display: flex; flex-direction: column; gap: 14px; }
.pg { border: 1px solid var(--rule-2); border-radius: 12px; overflow: hidden; background: var(--paper); }
.pg-h { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--rule); background: var(--paper-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pg-h b { font-weight: 700; } .pg-h span { font-family: var(--mono); padding: 0 7px; border-radius: 99px; background: var(--paper-3); color: var(--ink-2); letter-spacing: 0; }
.pg-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #8d8578); } .pg-h.gravid { --c: #d59a3f; } .pg-h.eggs { --c: #e6c27a; } .pg-h.paired { --c: #5fa572; }
.pr2 { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px; grid-template-areas: "pics who when" "pics prog acts"; column-gap: 14px; row-gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--rule); }
.pr2-pics { grid-area: pics; align-self: start; } .pr2-who { grid-area: who; } .pr2-when { grid-area: when; } .pr2-prog { grid-area: prog; } .pr2-acts { grid-area: acts; justify-content: flex-end; }
.pg-h + .pr2 { border-top: 0; } .pr2:hover { background: var(--paper-2); }
.pr2-pics { position: relative; display: flex; } .pr2-pics canvas { width: 60px; height: 40px; border-radius: 7px; cursor: pointer; background: var(--thumb-bg); box-shadow: 0 0 0 2px var(--paper); }
.pr2-pics canvas + canvas, .pr2-pics .pr2-egg { margin-left: -8px; }
.pr2-egg { display: grid; place-items: center; width: 60px; height: 40px; border-radius: 7px; background: radial-gradient(ellipse at 50% 70%, #6e5a3a, #3a2f20); box-shadow: 0 0 0 2px var(--paper); }
.pr2-egg svg { width: 18px; height: 22px; fill: #f4ead0; stroke: rgba(0, 0, 0, .25); }
.pr2-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pr2-l { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.pr2-l.sub .mb-name { font-weight: 500; color: var(--ink-2); }
.pr2-sire { align-self: center; margin-left: 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .pr2-l.sub > .one { color: var(--ink-2); } /* a gravid or brooding female's sire (#1562) */
.pr2-note { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.pr2-prog { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pt2-s { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pt2-s i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.pt2-s small { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt2-s.done i { background: #5fa572; } .pt2-s.done small { color: var(--ink-2); }
.pt2-s.on i { background: #5fa572; box-shadow: 0 0 0 2px rgba(95, 165, 114, .25); } .pt2-s.on small { color: var(--ink); font-weight: 700; }
.pt2-s.timed i { background: var(--paper-3); } .pt2-s.timed i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--f, 0%); background: #d59a3f; border-radius: 3px; }
.gravid .pt2-s.done i, .eggs .pt2-s.done i { background: #d59a3f; } .gravid .pt2-s.on, .eggs .pt2-s.on { }
.pr2-when { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.1; } .pr2-when b { font-family: var(--serif); font-size: 19px; } .pr2-when small { font-size: 11px; color: var(--ink-3); }
.pr2-acts { display: flex; gap: 6px; } .pr2-acts button { min-height: 0; height: 30px; padding: 0 11px; font-size: 12px; }
@media (max-width: 560px) { .pr2 { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pics when" "who who" "prog prog" "acts acts"; } }

/* ---- racks set aside (#559) */
#modalBox.ra-modal { width: min(920px, 100%); }
.ra h2 { margin: 0 0 4px; }
.ra-lead { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; max-width: 70ch; }
.ra-off { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: rgba(213, 154, 63, .12); color: var(--ink-2); font-size: 13px; }
.ra-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 11.5px; color: var(--ink-3); } .ra-key span { display: inline-flex; align-items: center; gap: 5px; } .ra-key .meta { margin-left: auto; }
.ra-key i, .ra-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--paper-3); } .ra-dots i { width: 6px; height: 6px; border-radius: 1.5px; }
i.k { background: #5fa572; } i.o { background: #8d8578; } i.w { background: #d59a3f; } i.p { background: #6d8fb5; } i.e { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); }
.ra-list { --ra-cols: 46px minmax(0, 1fr) 128px 118px 0px 80px; border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden; } .ra-list.tags { --ra-cols: 46px minmax(0, 1fr) 128px 118px 118px 80px; }
.ra-head, .ra-rack { display: grid; grid-template-columns: var(--ra-cols); column-gap: 12px; align-items: center; padding: 7px 12px; }
.ra-head { padding-top: 6px; padding-bottom: 6px; background: var(--paper-2); border-bottom: 1px solid var(--rule); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ra-rack { border-top: 1px solid var(--rule); background: var(--paper); } .ra-head + .ra-rack { border-top: 0; }
.ra-rack.kept { box-shadow: inset 3px 0 0 #5fa572; } .ra-rack.focus { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--ink); }
.ra-no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--paper-3); font-family: var(--mono); font-size: 12px; font-weight: 700; } .ra-rack.kept .ra-no { background: #5fa572; color: #fff; }
select.ra-no { width: 46px; height: 28px; min-height: 0; padding: 0 2px 0 8px; border: 1px solid var(--rule-2); color: var(--ink); cursor: pointer; text-align: center; } select.ra-no:hover { border-color: var(--ink-3); } .ra-rack.kept select.ra-no { border-color: #5fa572; } /* the rack's number, a picker to renumber it (#616) */
.ra-what { min-width: 0; display: flex; flex-direction: column; } .ra-what b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra-what small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra-what em { font-style: normal; color: #d59a3f; }
.ra-rack select { min-height: 0; height: 30px; padding: 0 8px; font-size: 13px; width: 100%; }
.ra-sex { flex-wrap: nowrap; } .ra-sex button { flex: 1; min-height: 30px; padding: 0 8px; }
.ra-dots { display: grid; gap: 2px; justify-content: end; max-height: 38px; overflow: hidden; }
.dt-kept { display: inline; min-height: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: #5fa572; font: inherit; text-decoration: underline dotted; cursor: pointer; } .dt-kept.off { color: #d59a3f; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; } .sp-foot button { min-height: 0; height: 26px; padding: 0 10px; font-size: 12px; }
.sp-kept { padding-top: 4px; }
@media (max-width: 760px) { .ra-list, .ra-list.tags { --ra-cols: 46px minmax(0, 1fr) 118px; } .ra-head { display: none; } .ra-rack { row-gap: 6px; } .ra-sex { grid-column: 2; } .ra-rack > select[data-ratag], .ra-rack > span:empty { grid-column: 3; } .ra-dots { display: none; } }

/* ---- the Expo Hall pays (#561): Booth of the Week, on show in the market, buying from a display */
.bw-head { display: flex; align-items: center; gap: 14px; }
.bw-head .xp-rose { flex: none; }
.bw-intro { flex: 1; min-width: 0; } .bw-intro b { font-family: var(--serif); font-size: 20px; } .bw-intro p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; max-width: 60ch; }
.bw-when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .bw-when small { font-size: 11px; color: var(--ink-3); }
.bw-last { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: rgba(95, 165, 184, .12); font-size: 13px; }
.bw-last small { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3d8aa0; } .bw-last span { color: var(--ink-3); }
.bw-lock { margin: 10px 0 0; }
.bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
.bw-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); }
.bw-card.picked { border-color: #5fa5b8; box-shadow: inset 3px 0 0 #5fa5b8; } .bw-card.own { opacity: .75; }
.bw-spot { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 8px; background: var(--paper-3); font-family: var(--mono); font-weight: 700; font-size: 13px; }
.bw-body { min-width: 0; display: flex; flex-direction: column; } .bw-body b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bw-body small { font-size: 11.5px; color: var(--ink-3); }
.bw-stars { font-size: 11px; letter-spacing: 1px; color: var(--rule-2); } .bw-stars i { font-style: normal; } .bw-stars i.on { color: #e2b93b; } .bw-stars i.half { color: #e2b93b; opacity: .5; }
.bw-act { display: flex; align-items: center; gap: 6px; } .bw-act button { min-height: 0; height: 30px; padding: 0 11px; font-size: 12px; white-space: nowrap; }
.bw-act .bw-mine { background: #5fa5b8; border-color: #5fa5b8; color: #fff; } .bw-own { font-size: 11.5px; color: var(--ink-3); }
.mk-onshow { position: absolute; left: 8px; bottom: 8px; z-index: 2; min-height: 0; height: 24px; padding: 0 9px; border: 0; border-radius: 99px; background: rgba(42, 95, 115, .92); color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); cursor: pointer; }
.mk-onshow:hover { background: #2a5f73; }
.mm-onshow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 8px 12px; border-radius: 8px; background: rgba(95, 165, 184, .14); font-size: 13px; }
.xb-dlg-vote { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: rgba(95, 165, 184, .12); font-size: 13px; }
body.mobile .bw-head { align-items: flex-start; } body.mobile .bw-when { display: none; } body.mobile .bw-grid { grid-template-columns: 1fr; }

/* ---- the Halloween pack (#568): the season's backgrounds and costumes in the composer */
.pc-scenes button { position: relative; } .pc-scenes button.pc-season { border-color: rgba(224, 123, 36, .55); }
.pc-scenes button.locked canvas { filter: saturate(.6) brightness(.75); } .pc-scenes button.locked, .pc-hats button.locked { opacity: .85; }
.pc-sup { position: absolute; top: 5px; left: 5px; padding: 1px 5px; border-radius: 4px; background: #e07b24; color: #1b1712; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; }
.pc-hats { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-hats button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 40px; padding: 0 12px 0 8px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; box-shadow: none; font-size: 12px; }
.pc-hats button svg { width: 26px; height: 26px; } .pc-hats button.on { border-color: #e07b24; box-shadow: inset 0 0 0 1px #e07b24; } .pc-hats button[data-phat=""] { padding-left: 12px; }
.pc-hats .pc-sup { position: static; margin-left: 2px; }
.pc-scenes .pc-sup { top: 4px; left: 4px; padding: 0 4px; font-size: 7px; letter-spacing: 0; }
/* ---- the Expo Hall panel, reorganised (#564) */
.xh { display: flex; flex-direction: column; gap: 16px; }
.xh-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 4px 2px 14px; border-bottom: 1px solid var(--rule); }
.xh-appeal { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 0; height: auto; padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); box-shadow: none; cursor: pointer; }
.xh-appeal b { font-family: var(--mono); font-size: 18px; } .xh-appeal small { grid-column: 1 / -1; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.xh-appeal:hover { border-color: var(--ink-3); }
.xh-main { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(380px, 40%); gap: 24px; align-items: start; }
.xh-main.wide { grid-template-columns: 200px minmax(0, 1fr); }
.xh-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.xh-ng { margin: 12px 0 4px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .xh-ng:first-child { margin-top: 0; }
.xh-nb { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-align: left; }
.xh-nb svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.xh-nb span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-nb i { font-style: normal; font-family: var(--mono); font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--paper-3); color: var(--ink-2); } .xh-nb i.hot { background: #d59a3f; color: #1b1712; font-weight: 700; }
.xh-nb:hover { background: var(--paper-2); color: var(--ink); }
.xh-nb.on { background: var(--ink); color: var(--paper); } .xh-nb.on svg { opacity: 1; } .xh-nb.on i { background: rgba(255, 255, 255, .18); color: inherit; }
.xh-content { min-width: 0; }
.xh-title { margin: 0 0 14px; } .xh-title h3 { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.15; } .xh-title p { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; max-width: 64ch; }
.xh-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xh-aside .xb-stage canvas { width: 100%; height: auto; }
/* the Overview */
.xo2 { display: flex; flex-direction: column; gap: 16px; }
.xo2-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 16px; align-items: stretch; }
.xo2-stage .xb-stage { height: 100%; } .xo2-stage .xb-stage canvas { width: 100%; height: 100%; object-fit: cover; }
.xo2-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.xo2-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper); }
.xo2-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .xo2-h b { font-family: var(--serif); font-size: 18px; } .xo2-h small { color: var(--ink-3); font-size: 12px; }
.xo2-ah { display: flex; gap: 14px; align-items: center; } .xo2-ah b { display: block; font-family: var(--serif); font-size: 18px; } .xo2-ah p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.xo2-ring { flex: none; width: 84px; height: 84px; } .xo2-ring circle { fill: none; stroke-width: 7; } .xo2-ring .t { stroke: var(--paper-3); } .xo2-ring .v { stroke: #5fa572; stroke-linecap: round; }
.xo2-ring text { font-family: var(--mono); font-size: 20px; font-weight: 700; fill: var(--ink); }
.xo2-parts { display: flex; flex-direction: column; gap: 7px; }
.xo2-part { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px 58px; align-items: center; gap: 10px; font-size: 13px; }
.xo2-pl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xo2-part small { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-align: right; }
.xo2-bar { display: block; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; } .xo2-bar i { display: block; height: 100%; background: #d59a3f; border-radius: 3px; }
.xo2-part.full .xo2-bar i { background: #5fa572; } .xo2-part em { font-style: normal; color: #5fa572; font-weight: 700; text-align: center; } .xo2-part .xb-link { justify-self: end; font-size: 12.5px; }
.xo2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.xo2-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 8px; background: var(--paper-2); min-width: 0; }
.xo2-stats b { font-family: var(--mono); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xo2-stats small { font-size: 11px; color: var(--ink-3); line-height: 1.25; }
.xo2-stats > .hot { background: rgba(213, 154, 63, .16); } .xo2-stats > .hot b { color: #d59a3f; }
.xo2-note { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; } .xo2-warn { margin: 0; font-size: 13px; color: #d59a3f; }
.xo2-won { margin: 0; padding: 8px 12px; border-radius: 8px; background: rgba(95, 165, 184, .16); color: var(--ink); font-size: 13px; }
.xo2-week.won { border-color: #5fa5b8; }
.xo2-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .xo2-acts button { min-height: 0; height: 32px; padding: 0 14px; font-size: 12.5px; }
/* before you have a spot */
.xh-hero { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border: 1px solid var(--rule-2); border-radius: 14px; background: linear-gradient(135deg, var(--paper-2), var(--paper)); }
.xh-hero h2 { margin: 0; font-family: var(--serif); font-size: 28px; } .xh-hero p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.xh-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xh-perks > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); } .xh-perks b { font-size: 14px; } .xh-perks span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.xh-seg { display: flex; gap: 6px; } .xh-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 0; height: 36px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 99px; background: transparent; box-shadow: none; font-size: 13px; }
.xh-seg button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .xh-seg button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 1240px) { .xh-main { grid-template-columns: 180px minmax(0, 1fr); } .xh-aside { grid-column: 2; grid-row: 1; position: static; } .xh-main > .xh-content { grid-column: 2; } .xo2-top { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .xh-main, .xh-main.wide { grid-template-columns: 1fr; } .xh-nav { position: static; flex-direction: row; overflow-x: auto; } .xh-ng { display: none; } .xh-nb { width: auto; flex: none; } .xh-aside, .xh-main > .xh-content { grid-column: 1; } .xh-top { grid-template-columns: 1fr; } .xo2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xh-perks { grid-template-columns: 1fr; } }
.xh-note { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.xh-aside .xb-planbox { max-width: 380px; } .xh-aside .xb-plans:not(.two) { max-width: 340px; }

/* the level's digits (#566): an SVG centred in the ring */
.lv-ring .lv-n { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.lv-n text { fill: currentColor; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 700; font-variant-numeric: lining-nums; }
.lv-ring.huge .lv-n text { font-family: var(--serif); }

/* the photo's caption strip stays one line, so the photo shows (#570) */
.ig-tag { max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-post-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* (#570) */

/* ---- the supporter card (#570): the season's pack and everything a supporter gets */
.spc-tag { display: inline-block; padding: 2px 8px; border-radius: 99px; background: #e07b24; color: #1b1712; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.spc-pi { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--paper-3); color: var(--ink); }
.spc-pi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.spc-perk.pk-rosette .spc-pi svg { fill: currentColor; stroke: none; } .spc-perk.pk-season { border-color: rgba(224, 123, 36, .55); } .spc-perk.pk-season .spc-pi { background: #e07b24; color: #1b1712; }

/* ---- the Expo page, reorganised (#574) */
.xo.v2 { display: flex; flex-direction: column; gap: 0; }
.xo.v2 .xo-hero { aspect-ratio: 1600 / 300; min-height: 200px; }
.xo.v2 .xo-hero canvas { object-fit: cover; }
.xo.v2 .xo-hero-b h2 { font-size: clamp(30px, 3.4vw, 46px); }
.xo-nav { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; margin: 14px 0 18px; padding: 5px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper-2); overflow-x: auto; }
.xo-nav button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.xo-nav button:hover { background: var(--paper-3); color: var(--ink); } .xo-nav button.on { background: var(--ink); color: var(--paper); }
.xo-nav i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; background: var(--paper-3); color: var(--ink-2); text-transform: uppercase; }
.xo-nav i.open { background: rgba(95, 165, 114, .22); color: #5fa572; } .xo-nav i.hot { background: #d59a3f; color: #1b1712; }
.xo-nav button.on i { background: rgba(255, 255, 255, .2); color: inherit; }
.xo-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.xo-card { text-align: left; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--paper); min-width: 0; }
.xo-card.hall { box-shadow: inset 0 3px 0 #d59a3f; } .xo-card.champ { box-shadow: inset 0 3px 0 #5fa572; } .xo-card.week { box-shadow: inset 0 3px 0 #5fa5b8; }
.xo-card-h { display: flex; flex-direction: column; gap: 3px; } .xo-card-k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.xo-card-h b { font-family: var(--serif); font-size: 22px; line-height: 1.15; } .xo-card-s { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.xo-card-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.xo-card-n > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); min-width: 0; }
.xo-card-n b { font-family: var(--mono); font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xo-card-n small { font-size: 11px; color: var(--ink-3); }
.xo-card-n > .hot { background: rgba(213, 154, 63, .16); } .xo-card-n > .hot b { color: #d59a3f; }
.xo-card-p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.xo-card-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .xo-card-a button { min-height: 0; height: 34px; padding: 0 14px; }
.xo-strip { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 16px; padding: 14px 18px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--paper-2); }
.xo-today { display: flex; gap: 12px; align-items: flex-start; } .xo-today small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .xo-today b { display: block; font-family: var(--serif); font-size: 18px; } .xo-today p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.xo-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-content: center; }
.xo-next > div { display: flex; align-items: center; gap: 8px; min-width: 0; } .xo-next small { display: block; font-size: 10.5px; color: var(--ink-3); } .xo-next b { font-size: 13px; }
.xo-next .xb-link { grid-column: 1 / -1; justify-self: start; font-size: 12.5px; }
@media (max-width: 1100px) { .xo-home { grid-template-columns: 1fr 1fr; } .xo-card.week { grid-column: 1 / -1; } .xo-strip { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .xo-home { grid-template-columns: 1fr; } }
.xo.v2 .xo-body > .xo-sec, .xo.v2 .xo-body > .xo-prog + .xo-sec { margin-top: 28px; } .xo.v2 .xo-body > .xo-prog { margin-top: 0; } /* (#574) */
.xo-card, .xo-card-h, .xo-card-h b, .xo-card-p { text-align: left; } .xo-card-h { align-items: flex-start; } .xo-card-s { justify-content: flex-start; } /* (#574) */
/* ---- the genetics search (#420): a "?" with the syntax beside every animal search box, the echo line, zygosity chips */
.gq-help { position: relative; flex: none; display: inline-block; }
.gq-help > summary { list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--sans, inherit); color: var(--ink-2); border: 1px solid var(--rule-2, var(--ink-3)); background: var(--paper); user-select: none; }
.gq-help > summary::-webkit-details-marker { display: none; }
.gq-help > summary:hover, .gq-help[open] > summary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.gq-help .gq-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(320px, calc(100vw - 32px)); display: grid; gap: 5px; padding: 10px 12px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); text-align: left; background: var(--paper); border: 1px solid var(--rule-2, var(--ink-3)); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.gq-help .gq-pop code { font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--paper-2); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.gq-help .gq-more { padding-top: 5px; border-top: 1px solid var(--paper-3); }
.gq-echo { margin: 4px 2px 0; font-size: 12px; }
.gq-row { display: flex; gap: 8px; align-items: center; }
.gq-row > input { flex: 1 1 auto; min-width: 0; }
.coll-search { align-items: center; }
.mp-tools .gq-help, .sl-bar .gq-help { align-self: center; }
.mm-search .gq-help { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }
.mm-search input { padding-right: 38px; }
.gq-chip.z-visual, .gq-chip.z-super { box-shadow: inset 0 -2px 0 var(--moss, #3f7f4f); }
.gq-chip.z-het { box-shadow: inset 0 -2px 0 var(--amber, #c98a2b); }
/* the Collection's Filters (#580): a "Filters" pill beside the search box (the phone opens the same body in a sheet) */
.nf-pop > summary.nf-sum { width: auto; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12.5px; letter-spacing: .01em; }
.nf-pop > summary.nf-sum.on { color: var(--paper); background: var(--moss, #3f7f4f); border-color: var(--moss, #3f7f4f); }
.nf-pop .nf-panel { width: min(430px, calc(100vw - 32px)); padding: 12px 14px; gap: 0; }
.nf-body { display: grid; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.nf-row { display: grid; grid-template-columns: 58px 1fr; gap: 5px 8px; align-items: center; }
.nf-row > :not(.nf-lbl) { grid-column: 2; }
.nf-lbl { grid-row: 1 / span 2; align-self: start; padding-top: 6px; font-weight: 600; color: var(--ink); }
.nf-pair, .nf-step, .nf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.nf-pair input { width: 86px; height: 28px; padding: 3px 7px; font: inherit; font-family: var(--mono); }
.nf-step select { height: 28px; font: inherit; padding: 0 6px; }
.nf-pm, .nf-x { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--rule-2, var(--ink-3)); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; }
.nf-pm:disabled { opacity: .4; cursor: default; }
.nf-x { border: 0; background: var(--paper-2); color: var(--ink-2); }
.nf-n { min-width: 34px; text-align: center; font-family: var(--mono); font-weight: 500; color: var(--ink); }
.nf-chip.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.nf-hint { font-size: 11.5px; color: var(--ink-3, var(--ink-2)); }
.nf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--paper-3); }
.nf-foot code { font: 600 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }
.cs-sum { font-size: 12px; white-space: nowrap; }
.sel-sum { font-weight: 400; }
/* Season board search and the male picker's hidden-count line (#434) */
.gq-x { flex: none; min-height: 0; height: 28px; width: 28px; padding: 0; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; }
.gq-x:hover { background: var(--paper-3); color: var(--ink); }
.sb-search input::-webkit-search-cancel-button { display: none; } /* our × does it, in every browser */
.sb-search .bsearch { margin: 0; }
.sb-tools .gq-echo { margin-top: -6px; }
.mp-hidden { margin: 6px 2px 0; font-size: 12px; }
.mp-hidden .linkish { color: var(--moss-2); }

/* ---------- Breeding projects (#431): both clients ----------
   One tier colour per difficulty (Bronze / Silver / Gold / Mythic): the dot, the badge and the card's left edge. */
.t-bronze { --tier: #a7683a; } .t-silver { --tier: #8a96a3; } .t-gold { --tier: #c29a1c; } .t-mythic { --tier: #7d4fb8; }
:root[data-theme="dark"] .t-silver { --tier: #aab6c2; } :root[data-theme="dark"] .t-mythic { --tier: #a782dc; }
.pj-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tier, var(--ink-3)); vertical-align: middle; margin-right: 5px; }
.pj-tier { display: inline-block; padding: 0 7px; font: 600 10.5px/18px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--tier); border: 1px solid var(--tier); border-radius: 9px; background: color-mix(in srgb, var(--tier) 10%, transparent); }
.pj-st { font-size: 11.5px; color: var(--ink-3); } .pj-st.st-active { color: var(--moss); } .pj-st.st-retired { text-decoration: line-through; }
.pj-done { font: 600 10.5px/18px var(--mono); text-transform: uppercase; color: var(--paper); background: var(--tier); padding: 0 7px; border-radius: 9px; }
.pj-panel { display: flex; flex-direction: column; gap: 12px; }
.pj-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
/* the slots (#654): a pip per slot, the count in the body face, and when the next one comes as a quiet line under it */
.pj-slots { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; min-width: 0; margin-right: auto; }
.pj-pips { grid-row: span 2; display: flex; gap: 4px; }
.pj-pips i { width: 9px; height: 22px; border-radius: 3px; border: 1px solid var(--rule-2); background: transparent; }
.pj-pips i.on { border-color: var(--moss, #3f7f4f); background: var(--moss, #3f7f4f); }
.pj-count { font: 500 14px/1.2 var(--sans); color: var(--ink); } .pj-count b { font: 600 15px var(--serif); }
.pj-next { font: 12px/1.2 var(--sans); color: var(--ink-3); }
.pj-slots > .pj-count:first-child { grid-column: 1 / -1; } .pj-slots > .pj-count:first-child + .pj-next { grid-column: 1 / -1; } /* before projects open: no pips */
#panelBody .pj-empty { padding: 16px 16px; } .pj-empty > span { line-height: 1.5; } .pj-empty b { color: var(--ink-2); }
.abtn.primary { color: #fff; background: var(--moss); border-color: var(--moss); }
.abtn[aria-disabled="true"] { opacity: .5; }
.pj-why { margin-top: -6px; }
.pj-legacy { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed var(--rule-2); border-radius: 10px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.pj-legacy.empty { flex-direction: row; gap: 10px; align-items: baseline; }
.pj-lg-head { display: flex; gap: 10px; align-items: baseline; } .pj-lg-head > b { font: 600 15px var(--serif); }
.pj-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px 16px; border: 1px solid var(--rule-2); border-left: 4px solid var(--tier, var(--ink-3)); border-radius: 10px; background: var(--paper); }
.pj-card.open { box-shadow: 0 2px 10px rgba(40, 30, 15, .08); }
.pj-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-name { display: inline-flex; align-items: center; min-height: 0; height: auto; padding: 0; border: 0; background: none; color: var(--ink); font: 600 17px var(--serif); cursor: pointer; }
.pj-odds { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.pj-goal { font-size: 13px; color: var(--ink-2); } .pj-avoid { color: var(--brick); margin-left: 6px; font-size: 12px; }
/* the watch row (#586): the bell, then the genes the project watches the shop and the market for */
.pj-watch { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 2px; font-size: 12px; color: var(--ink-2); }
.pj-watch.off { color: var(--ink-3); } .pj-watch > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pj-bell { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-3); cursor: pointer; }
.pj-bell svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; } .pj-bell.on { color: var(--moss); border-color: currentColor; }
.pj-wlead { margin-right: 2px; } .pj-wgene.muted { opacity: .5; text-decoration: line-through; } .pj-wgene.pinned i { font-style: normal; color: var(--moss); }
.w-sum { font-weight: 600; margin: 2px 2px 4px; } .w-list { display: grid; gap: 6px; margin: 8px 0; }
.w-row { display: flex; align-items: center; gap: 10px; } .w-row.off .w-q { color: var(--ink-3); } .w-q { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.w-x { border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 2px 6px; }
.set-watches { padding: 10px 12px; } .m-watches { padding: 4px 4px 10px; } .mk-watchrow { margin: 0 0 8px; }
.pj-ribbon { display: flex; gap: 0; margin: 2px 0; padding: 0; list-style: none; }
.pj-ribbon li { flex: 1; padding: 3px 4px; font: 500 10.5px var(--mono); text-align: center; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); border: 1px solid var(--rule-2); border-left-width: 0; background: transparent; }
.pj-ribbon li:first-child { border-left-width: 1px; border-radius: 6px 0 0 6px; } .pj-ribbon li:last-child { border-radius: 0 6px 6px 0; }
.pj-ribbon li.on { color: var(--paper); background: var(--tier); border-color: var(--tier); }
.pj-nums { font-size: 13px; } .pj-line { font-size: 13px; }
.pj-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.pj-detail { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule-2); }
.pj-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; } .pj-sec-h .abtn { margin-left: auto; }
.pj-groups { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pj-groups th { text-align: left; font: 500 10.5px var(--mono); text-transform: uppercase; color: var(--ink-3); padding: 4px 6px; border-bottom: 1px solid var(--rule-2); }
.pj-groups td { padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--rule-2) 60%, transparent); }
.pj-groups .num { text-align: right; font-family: var(--mono); } .pj-groups .pj-sur { color: var(--amber); font-weight: 600; }
.pj-founders { display: flex; flex-wrap: wrap; gap: 6px; }
/* earlier phases (#1004), and the copy / next-phase forms' rule lines and founder boxes (#1003) */
.pj-phases { margin: 2px 0; padding: 0; list-style: none; font-size: 12.5px; } .pj-phases li { padding: 1px 0; }
.pj-rule { margin: 4px 0; } .pj-locked .linkish { font-size: inherit; }
.pj-full { margin: 4px 0; font-weight: 600; } .pj-nophase { align-self: center; font-size: 12px; }
.pj-move .pj-plan-list li { padding: 3px 0; } .pj-move label { display: flex; gap: 6px; align-items: baseline; cursor: pointer; }
.pj-founder { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 9px; border: 1px solid var(--rule-2); border-radius: 12px; font-size: 12.5px; }
.pj-x { min-height: 0; height: 20px; width: 20px; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; }
.pj-x:hover { color: var(--brick); }
.pj-status { justify-content: flex-end; }
.pj-all { margin-left: auto; } /* Collapse all / Expand all (#582), between the slots line and New project */
.pj-caret { display: inline-block; flex: none; width: 12px; margin-right: 4px; font-size: 11px; color: var(--ink-3); transition: transform .15s; } .pj-caret.on { transform: rotate(90deg); }
.pj-card.folded { padding-top: 8px; padding-bottom: 8px; }
.pj-fold { flex-wrap: nowrap; min-width: 0; } .pj-fold > * { flex: none; }
.pj-fold .pj-sum { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.pj-fold .pj-sum { margin-right: auto; } .pj-fold .pj-odds { margin-left: 0; white-space: nowrap; } .pj-fold .abtn { margin-left: 2px; }
.pj-lg-name { display: inline-flex; align-items: center; min-height: 0; height: auto; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; } .pj-lg-name > b { font: 600 15px var(--serif); }
.pj-legacy.folded { padding-top: 7px; padding-bottom: 7px; }
/* finished projects (#992): retired ones, completed or not, in a section of their own under the live cards, folded by default */
.pj-live { font: 500 13px/1.2 var(--sans); color: var(--ink-2); white-space: nowrap; }
.pj-finished { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rule-2); }
.pj-fin-head { display: flex; gap: 10px; align-items: baseline; }
.pj-fin-name { display: inline-flex; align-items: center; min-height: 0; height: auto; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; } .pj-fin-name > b { font: 600 15px var(--serif); }
.pj-card.finished { border-left-color: color-mix(in srgb, var(--tier, var(--ink-3)) 55%, var(--rule-2)); background: color-mix(in srgb, var(--ink) 2%, var(--paper)); }
.pj-card.finished.folded { opacity: .68; } .pj-card.finished.folded:hover, .pj-card.finished.folded:focus-within { opacity: 1; }
.pj-when { font: 12px var(--mono); color: var(--ink-3); }
/* the planner by project (#432): the card's no-plan and idle lists, the picker's mode line and project rows, the
   Season board's project chips */
.pj-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pj-plan-list { margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; border-top: 1px solid var(--rule-2); }
.pj-plan-row, :root[data-theme="dark"] .pj-plan-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; min-height: 0; padding: 6px 4px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule-2) 60%, transparent); border-radius: 0; background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 400; text-align: left; cursor: pointer; }
.pj-plan-row:hover, :root[data-theme="dark"] .pj-plan-row:hover { background: var(--paper-2); color: var(--ink); }
.pj-plan-row b { font-weight: 600; } .pj-plan-fp { margin-left: auto; font: 11px var(--mono); color: var(--ink-3); }
.pj-plan-best { flex-basis: 100%; font-size: 11.5px; color: var(--moss); } .pj-plan-best b { font-weight: 600; }
.mp-seg { margin: 10px 0 8px; } .mp-seg .rs-proj { --rc: var(--moss); } .mp-seg .rs-all { --rc: var(--ink-3); }
.mp-seg button { min-width: 0; } .mp-seg-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-seg-n { flex: none; font: 500 11px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; } .mp-seg button.on .mp-seg-n { color: var(--ink-2); }
.mp-proj { color: var(--moss); font-weight: 600; }
.mp-proves { color: #6b4fa0; } :root[data-theme="dark"] .mp-proves { color: #a995d8; } /* the male settles a Proving female's het (#775) */
.dt-decide.dt-proving b { color: #6b4fa0; } :root[data-theme="dark"] .dt-decide.dt-proving b { color: #a995d8; }
.gd-stamp.proving { color: #6b4fa0; }
.mp-build { margin: 0 2px 4px; font-size: 12.5px; font-style: italic; }
.mp-once { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; } /* Once / Every season (#1009) */
.plan-once { display: inline-flex; vertical-align: middle; margin-right: 6px; } .plan-once button { white-space: nowrap; }
.mp-noadv { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; line-height: 1.45; font-style: normal; }
.mp-noadv-lead { color: var(--ink); } .mp-noadv-lead b { font-weight: 700; }
.mp-bolo { display: flex; flex-wrap: wrap; gap: 6px; } .mp-help { cursor: default; }
.mp-whole { font-size: 12px; }
.mp-noadv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mp-q { font-size: 11px; }
.sb-projs-cap { align-self: center; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
/* the form */
.pj-modal { width: min(640px, 92vw); }
.pj-form { display: flex; flex-direction: column; gap: 12px; }
.pj-f { display: flex; flex-direction: column; gap: 6px; } .pj-f > span { font-weight: 600; font-size: 13px; } .pj-f small { font-weight: 400; }
.pj-f.pj-row { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pj-picked { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.pj-gchip { display: inline-flex; align-items: center; }
.pj-avoidchip { box-shadow: inset 0 -2px 0 var(--brick) !important; }
/* avoid by form and complexes (#587) */
.pj-complexes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pj-complex small { opacity: .75; font-weight: 400; }
.pj-complex.on { box-shadow: inset 0 -2px 0 var(--brick) !important; }
.pj-echo { margin-top: 4px; color: var(--brick); }
.pj-warn, .mp-warn { color: var(--brick); font-weight: 600; }
.pj-prev { display: flex; align-items: center; gap: 8px; }
.pj-pickbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pj-pickbar input { flex: 1; min-width: 140px; margin: 0; }
.pj-genes { display: flex; flex-wrap: wrap; gap: 5px; max-height: 190px; overflow-y: auto; padding: 2px; }
.pj-genes .gq-chip span { margin-left: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.pj-genes .pj-used { opacity: .35; }
.pj-steps { display: inline-flex; gap: 14px; }
.pj-step { display: inline-flex; align-items: center; gap: 6px; } .pj-step b { min-width: 18px; text-align: center; font-family: var(--mono); }
.pj-step button { min-height: 0; height: 26px; width: 26px; padding: 0; border-radius: 6px; }
.pj-err { min-height: 1em; color: var(--brick); font-size: 13px; }
.pj-formacts { display: flex; justify-content: flex-end; gap: 8px; }
/* Morph Studio (#1337): the project form's picker over a picture of the snake */
.pj-studio { align-self: flex-start; font-size: 12.5px; }
.ms-stage { border-radius: 12px; overflow: hidden; background: var(--rule); }
.ms-pic { display: block; width: 100%; height: auto; aspect-ratio: 520 / 300; }
.ms-out { display: flex; flex-direction: column; gap: 4px; }
.ms-name { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.2; }
.ms-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-2); min-height: 1.3em; }
.ms-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ms-acts { flex-wrap: wrap; }
/* elsewhere */
.pj-an-line { display: flex; align-items: center; gap: 4px; font-size: 13.5px; }
.pj-an-fp { font-size: 12px; margin-top: 2px; }
.pj-an-found { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.rchip.rc-proj::before { display: none; }
.rchip.rc-proj.on { --rc: var(--ink-2); }
.coll-projs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.proj-line.on { font-style: normal; font-weight: 600; color: var(--moss); }
.pj-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.pj-badge { display: inline-flex; align-items: center; padding: 0 7px 0 5px; font-size: 11px; line-height: 18px; border: 1px solid var(--tier, var(--rule-2)); border-radius: 9px; color: var(--ink-2); background: color-mix(in srgb, var(--tier, transparent) 10%, transparent); white-space: nowrap; }
.pj-badge .pj-dot { width: 7px; height: 7px; margin-right: 4px; }
/* the Shop and Market project fit (#592): a quiet chip on a card, stronger when the animal could finish the goal; the
   Project chip row; the card's Shop · Market links */
.pj-fit { display: inline-flex; align-items: center; max-width: 100%; margin: 3px 0 1px; padding: 0 7px 0 6px; font-size: 11px; line-height: 18px; border: 1px dashed color-mix(in srgb, var(--moss) 55%, transparent); border-radius: 9px; color: var(--moss); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; cursor: help; }
.pj-fit.full { border-style: solid; border-color: var(--moss); background: var(--moss); color: #fff; font-weight: 600; }
.pj-fit.full .pj-dot { box-shadow: 0 0 0 1.5px #fff; }
.pj-fit.maybe { border-style: dotted; border-color: color-mix(in srgb, var(--ink-3) 60%, transparent); color: var(--ink-3); font-style: italic; } /* only possible hets add (#681) */
.sr-top .pj-fit { margin: 0 0 0 6px; }
.mk-card .pj-fit, .specimen .body > .pj-fit { display: flex; width: max-content; }
.fit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0 8px; }
.fit-lbl { font: 600 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.fit-row .rc-proj .pj-dot { margin-right: 4px; }
.pj-fitlinks { margin-left: auto; align-self: center; font-size: 12.5px; color: var(--ink-3); }
.pj-fitlinks .linkish { font-size: 12.5px; }

/* #578: the room chat, the toasts and the bottom bars dock to the free area right of an open panel instead of floating over it.
   ui.js syncPanelDock puts --panel-w on body (0 with no panel or a full-screen one), so dragging the grip moves them live. */
.rc { left: calc(104px + var(--panel-w, 0px)); width: min(400px, calc(100vw - 120px - var(--panel-w, 0px))); transition: left .18s ease, bottom .2s; }
#designbar, #holdbar, #visitbar, #walkbar { left: calc(50% + 44px + var(--panel-w, 0px) / 2); transition: left .18s ease; }
body.panel-open #designbar { max-width: calc(100vw - 112px - var(--panel-w, 0px)); }
#toasts { width: clamp(240px, calc(100vw - 116px - var(--panel-w, 0px)), 320px); } /* shrink beside a wide panel, but stay readable: past 240 px they keep the corner */
body.panel-resizing :is(.rc, #designbar, #holdbar, #visitbar, #walkbar) { transition: none; }
body.rc-narrow .rc:not(.open) .rc-log { display: none; } /* too little room beside the panel: just the hint, cut down to its Enter key */
body.rc-narrow .rc:not(.open) .rc-hint { font-size: 0; padding: 4px 6px; white-space: nowrap; }
body.panel-full .rc { display: none; } /* full screen: the chat hides; the toasts keep their bottom-right corner */

/* ---- Breeding → Projects: the empty state (#698) */
.pj-empty { padding: 22px 4px 8px; max-width: 560px; text-align: left; font-style: normal; font-family: var(--sans); }
.pj-empty h3 { margin: 0 0 6px; font: 500 24px/1.2 var(--serif); color: var(--ink); }
.pj-empty > p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pj-empty ol { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: pj; display: flex; flex-direction: column; }
.pj-empty li { counter-increment: pj; position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.pj-empty li:last-child { border-bottom: 1px solid var(--rule); }
.pj-empty li::before { content: counter(pj); position: absolute; left: 0; top: 11px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; font: 500 13px var(--serif); color: var(--ink); }
.pj-empty li b { color: var(--ink); font-weight: 600; }
.pj-empty .abtn.primary { height: 38px; padding: 0 18px; font-size: 14px; }
/* rosters (#709): the ×N already-owned badge at the top left of a baby's or an animal's picture, the roster chip, the
   editor's roster size, the roster and surplus lists on a project card */
.own-n { position: absolute; top: 4px; left: 4px; z-index: 2; padding: 0 5px; font: 700 11px/16px var(--mono); color: #fff; background: rgba(24, 20, 14, .78); border-radius: 8px; cursor: help; }
.own-n.quiet { top: 2px; left: 2px; padding: 0 4px; font-weight: 500; font-size: 10px; line-height: 14px; background: rgba(24, 20, 14, .55); }
.own-n.by-sex { font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, .78); } .own-n.by-sex b { font-weight: 700; color: #fff; } /* owned of its look by sex (#955): the baby's own sex first and bold */
.thumbcell:has(> .own-n), .ac-pic:has(> .own-n) { position: relative; }
button.own-n, button.own-n:hover { min-height: 0; height: auto; margin: 0; border: 0; box-shadow: none; color: #fff; cursor: pointer; } button.own-n:hover { background: rgba(24, 20, 14, .85); } /* the Collection's ×N filters to its look (#1301) */
.egg.open > .own-n ~ .hand-pin { top: 24px; } /* set by hand (#811) under the ×N badge, both on the picture's corner */
.egg-rule .rule-chip { white-space: normal; text-align: center; max-width: 100%; }
.tri-order { margin: 0 0 8px; }
.pj-step .pj-scn { width: 4.2em; height: 26px; padding: 0 4px; text-align: center; font-family: var(--mono); }
.pj-scope-hint { margin: -4px 0 6px; }
.pj-rosterline { font-weight: 600; }
.pj-roster { margin: 4px 0 0; padding-left: 3.2em; max-height: 240px; overflow-y: auto; } .pj-roster li { padding: 1px 0; }
.pj-surplus .pj-plan-list li { padding: 3px 0; }
/* Clean up (#996): the bar above the cards, its sheet, and the roster size stepper on a card */
.pj-rosterrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pj-scope-steps { gap: 10px; font-size: 12.5px; }
.pj-clean { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--rule-2)); border-radius: 10px; background: color-mix(in srgb, var(--amber) 7%, var(--paper)); }
.pj-clean-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; } .pj-clean-bar > b { font: 600 15px var(--serif); }
.pj-clean-sum { flex: 1 1 14em; font-size: 13px; color: var(--ink-2); } .pj-clean-bar .abtn { margin-left: auto; }
.pj-clean-sheet { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid var(--rule-2); }
.pj-clean-scopes { display: flex; flex-direction: column; gap: 4px; } .pj-clean-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.pj-clean-role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; cursor: pointer; } .pj-clean-group.off .pj-clean-role b { color: var(--ink-3); }
.pj-clean-group .pj-plan-list { max-height: 260px; overflow-y: auto; } .pj-clean-group .pj-plan-list li, .pj-clean-held li { padding: 2px 0; font-size: 13px; }
.pj-clean-held summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.pj-clean-go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .pj-clean-go .abtn { margin-left: auto; }

/* ---- "How the market works" (#737): your limit worked out, then the rules beside their figures */
#modalBox2:has(.mr-sheet) { width: min(560px, 94vw); max-width: min(560px, 94vw); }
.mr-sheet { display: flex; flex-direction: column; gap: 16px; }
.mr-lede { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.mr-limit { padding: 14px 16px 12px; background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--moss); }
.mr-limit-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mr-limit-top span { font-size: 13.5px; color: var(--ink-2); }
.mr-limit-top b { font: 500 34px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.mr-limit > p { margin: 6px 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.mr-caps { border-top: 1px solid var(--rule); }
.mr-cap { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 44px; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.mr-cap .k { color: var(--ink-2); }
.mr-cap .how { min-width: 0; }
.mr-cap b { font: 500 13.5px var(--mono); color: var(--ink-3); text-align: right; }
.mr-cap i { font: 500 10.5px/1.6 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); text-align: right; }
.mr-cap.on .k, .mr-cap.on b { color: var(--ink); font-weight: 600; }
.mr-cap.on .how { color: var(--ink-2); }
.mr-bar { grid-column: 2 / 4; height: 4px; margin: 1px 0 2px; background: var(--rule); }
.mr-bar s { display: block; height: 100%; background: var(--ink-3); text-decoration: none; }
.mr-cap.on .mr-bar s { background: var(--moss); }
.mr-foot { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.mr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mr-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.mr-n { font: 500 24px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.mr-list b { display: block; margin-bottom: 3px; font: 600 14.5px/1.3 var(--sans); color: var(--ink); }
.mr-list p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.mr-now { display: block; margin-top: 4px; color: var(--amber); }

/* cutting screen: Female / Male up front and a Genes drop-down on each baby (#794); the phone lays them out in mobile.css */
.baby-sex { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: 99px; font: 700 11.5px/1.5 var(--sans); color: #fff; }
.baby-sex .sx { width: 13px; height: 13px; stroke-width: 2.6; }
.baby-sex.F { background: #b5457a; } .baby-sex.M { background: #2f6f9f; }
.baby-genes-btn b { font-weight: 800; margin-left: 2px; }
.baby-genes-btn i { display: inline-block; margin-left: 4px; font-style: normal; transition: transform .15s ease; }
.baby-genes-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.egg.open .baby-genes { justify-content: center; gap: 4px; }
/* the Wardrobe on the animal card (#640, #893): four slot tiles, each a picture of what's worn there (or the slot's
   outline) over the slot's name; the open slot's items as picture tiles in a panel under them, a notch pointing at the
   open slot (--wi, its index); Take off a quiet text action. The phone's surfaces are in mobile.css. */
.wardrobe .wr-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wardrobe :is(.wr-slot, .wr-item) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; min-width: 0; height: auto; min-height: 0; padding: 8px 4px 9px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: none; font-weight: 400; line-height: 1.2; text-align: center; }
.wardrobe :is(.wr-slot, .wr-item):hover:not(:disabled):not(.on):not(.off) { background: var(--paper-2); border-color: var(--ink-3); color: var(--ink); }
.wardrobe :is(.wr-slot, .wr-item).on, .wardrobe :is(.wr-slot, .wr-item).on:hover { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 10%, var(--paper)); box-shadow: inset 0 0 0 1px var(--moss); color: var(--ink); }
.wardrobe .wr-slot:disabled { opacity: .5; }
.wardrobe .wr-art { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 5px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.wardrobe .wr-slot:not(.worn) .wr-art { background: transparent; }
.wardrobe .wr-svg { display: block; width: 38px; height: 38px; }
.wardrobe .wr-empty { color: var(--ink-3); opacity: .75; }
.wardrobe .wr-sn { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wardrobe :is(.wr-slot, .wr-item) b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.wardrobe .wr-slot:not(.worn) b { font-weight: 400; color: var(--ink-3); }
.wardrobe .wr-pick { position: relative; margin-top: 3px; padding: 10px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper-2); }
.wardrobe .wr-pick::before { content: ''; position: absolute; top: -6px; left: calc((100% - 22px) / 4 * (var(--wi, 0) + .5) + 8px * var(--wi, 0) - 5px); width: 10px; height: 10px; background: inherit; border: 1px solid var(--rule-2); border-right: 0; border-bottom: 0; transform: rotate(45deg); }
.wardrobe .wr-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wardrobe .wr-item small { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.wardrobe .wr-item.on small { color: var(--moss); font-weight: 600; }
.wardrobe .wr-item .wr-price { font-family: var(--mono); color: var(--ink-2); }
.wardrobe .wr-gem { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wardrobe .wr-item.off { opacity: .55; cursor: default; }
.wardrobe .wr-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; }
.wardrobe .wr-foot .wr-note { font-size: 12px; line-height: 1.4; }
.wardrobe .wr-off, .wardrobe .wr-off:hover { flex: none; height: auto; min-height: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.wardrobe .wr-off:hover { color: var(--brick); text-decoration-color: currentColor; }
.wardrobe > .wr-note { margin-top: 2px; }

/* the hold bar folds to a pill in the bottom-right corner, clear of the snake in your hands (#800) */
#holdbar .hb-fold { display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--ink-3); box-shadow: none; }
#holdbar .hb-fold:hover { color: var(--ink); background: var(--paper-2); }
#holdbar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#holdbar:not(.min) .hb-show, #holdbar.min #holdText, #holdbar.min .db-hint, #holdbar.min .hb-fold { display: none; }
#holdbar.min { left: auto; right: 16px; transform: none; padding: 4px 4px 4px 6px; gap: 4px; border-radius: 999px; transition: none; }
#holdbar .hb-show { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 220px; min-height: 0; height: 30px; padding: 0 8px 0 4px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); box-shadow: none; }
#holdbar .hb-show:hover { background: var(--paper-2); }
#holdbar .hb-show svg { color: var(--ink-3); }
#holdbar .hb-show b { font-family: var(--serif); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#holdbar.min #holdBack { height: 30px; min-height: 0; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }

/* ---------- an animal in 3D, full screen (#809) ---------- */
.v3d { position: fixed; inset: 0; z-index: 90; background: radial-gradient(120% 80% at 50% 38%, #f4efe4 0%, #d9d0bf 62%, #b9ad97 100%); color: #1e1a15; overscroll-behavior: contain; touch-action: none; }
:root[data-theme="dark"] .v3d { background: radial-gradient(120% 80% at 50% 38%, #3a352d 0%, #23201b 62%, #151310 100%); color: #ece5d6; }
.v3d-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.v3d-cv:active { cursor: grabbing; }
.v3d-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: 10px; padding: max(14px, env(safe-area-inset-top)) 14px 10px 18px; pointer-events: none; }
.v3d-title { flex: 1; min-width: 0; } .v3d-title b { font: 600 20px/1.25 var(--serif); }
.v3d-sex { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; color: #fff; vertical-align: 2px; } .v3d-sex.f { background: #b5457a; } .v3d-sex.m { background: #2f6f9f; }
.v3d-sex .sx { width: 14px; height: 14px; stroke-width: 2.6; }
.v3d-sub { font-size: 13px; opacity: .72; margin-top: 2px; }
.v3d-x { pointer-events: auto; flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 24px; line-height: 1; background: rgba(20, 18, 15, .72); color: #f3eee4; border: 0; }
.v3d-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; opacity: .7; pointer-events: none; } .v3d.ready .v3d-wait { display: none; }
.v3d-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 12px max(16px, env(safe-area-inset-bottom)); pointer-events: none; }
.v3d-poses { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.v3d-poses .chip:not(.on) { background: rgba(255, 255, 255, .72); } :root[data-theme="dark"] .v3d-poses .chip:not(.on) { background: rgba(20, 18, 15, .6); }
.v3d-hint { font-size: 12px; opacity: .65; transition: opacity .4s; } .v3d.touched .v3d-hint { opacity: 0; }

/* ---------- a clicked button waits for the server (#818): both clients ---------- */
.pending { opacity: .6; cursor: progress !important; }
.pending::after { content: ''; display: inline-block; flex: none; width: 12px; height: 12px; margin-left: 6px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pending::after { animation-duration: 2.4s; } }
.srv-hint { position: fixed; top: 64px; right: 16px; z-index: 60; padding: 3px 9px; border-radius: 999px; background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule); font-size: 11.5px; line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-2); }
.srv-hint[hidden] { display: none; }
#hud .online-chip.srv-busy::before, .online-pill.srv-busy .dot.on { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); }

/* ---- the Shop's filters (#889): category tiles, the Equipment tab strip, then a labelled filter row ---- */
/* the Equipment row: a tab strip under the tiles, an underline on the open one */
.equip-chips.sc-strip { display: flex; gap: 2px; flex-wrap: wrap; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.sc-strip .chip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 8px 12px 9px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sc-strip .chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-strip .chip:hover { background: transparent; color: var(--ink); }
.sc-strip .chip span { margin-left: 0; padding: 0 6px; border-radius: 8px; background: var(--paper-2); font-size: 10.5px; line-height: 16px; color: var(--ink-3); }
.sc-strip .chip.on { background: transparent; color: var(--ink); border-bottom-color: #5b7086; }
.sc-strip .chip.on span { background: #5b7086; color: #fff; }
/* the filter row: a small label, then a connected set of choices */
/* the Shop's filter row (#1103): each filter is its own raised pill with its count as a badge, the chosen one filled; the
   row wraps cleanly at any panel width (the old joined strip broke in two). A chip with no count is another view, not
   a filter (Decor's Room look): it sits at the end, apart, with a brush. */
.quick.sc-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 6px; }
.sc-flabel { margin-right: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sc-filter .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 0; height: 32px; margin: 0; padding: 0 6px 0 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink-2); font-size: 13px; font-weight: 600; box-shadow: 0 2px 0 rgba(0, 0, 0, .28); transition: transform .08s, box-shadow .08s, border-color .12s; }
.sc-filter .chip span { margin: 0; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; opacity: 1; }
:root .sc-filter .chip:hover { background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink); border-color: var(--ink-3); }
.sc-filter .chip:active { transform: translateY(2px); box-shadow: none; }
.sc-filter .chip.on, :root .sc-filter .chip.on:hover { background: linear-gradient(180deg, #58ad6f, #3f9257); color: #fff; border-color: #2f7f48; box-shadow: 0 2px 0 #2a6b3d; }
.sc-filter .chip.on span { background: rgba(0, 0, 0, .28); color: #fff; }
.sc-filter .chip.sc-go { margin-left: auto; padding: 0 14px 0 11px; border-style: dashed; border-color: #4f9aa6; color: var(--ink); }
.sc-filter .chip.sc-go svg { width: 15px; height: 15px; fill: none; stroke: #5fb3c0; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sc-filter .chip.sc-go.on, :root .sc-filter .chip.sc-go.on:hover { border-style: solid; border-color: #2c6f7a; background: linear-gradient(180deg, #58aab8, #3a7a86); color: #fff; box-shadow: 0 2px 0 #24545d; } .sc-filter .chip.sc-go.on svg { stroke: #fff; }
/* ---- the Shop's category bar (#831): a tile per category with its own coloured icon, like the sidebar */
.shop-cats.sc-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; flex-wrap: nowrap; }
.sc-bar .sc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 0; padding: 8px 4px 7px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: 12px; cursor: pointer; transition: transform .12s ease, background .12s, border-color .12s, box-shadow .12s; }
.sc-bar .sc:hover { background: var(--paper-3); color: var(--ink); transform: translateY(-1px); }
.sc-bar .sc-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--sc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .25); }
.sc-bar .sc-ic svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-bar .sc b { font-weight: 600; line-height: 1.1; white-space: nowrap; }
.sc-bar .sc em { position: absolute; top: 4px; right: 5px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--paper); color: var(--ink-3); font: 600 10px/16px var(--mono); font-style: normal; text-align: center; border: 1px solid var(--rule); }
.sc-bar .sc.on { background: color-mix(in srgb, var(--sc) 16%, var(--paper-2)); border-color: var(--sc); color: var(--ink); box-shadow: 0 0 0 1px var(--sc) inset, 0 4px 12px color-mix(in srgb, var(--sc) 28%, transparent); }
.sc-bar .sc.on .sc-ic { transform: scale(1.06); }
.sc-bar .sc.on em { background: var(--sc); color: #fff; border-color: var(--sc); }
.sc-bar .sc:active { transform: translateY(1px); }
/* a stalled reopen (#903): the card says so, with Try again and Sign in instead */
.auth-card.resuming .rs-slow, .auth-card.resuming .rs-acts { display: none; }
.auth-card.resuming.stalled .rs-wait { display: none; }
.auth-card.resuming.stalled .rs-slow { display: block; }
.auth-card.resuming.stalled .rs-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.auth-card.resuming .rs-acts button { min-height: 40px; padding: 0 16px; }

/* the store listing cap's announcement (#730): My store's "What changed" link and the sheet it opens (shared with the
   launch notice) */
.cap-changed { margin: 0 0 10px; font-size: 13px; }
.cap-sheet p { margin: 0 0 10px; line-height: 1.5; }
.cap-rules { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 13px; }
.cap-rules th, .cap-rules td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.cap-rules tbody th { font: 600 13px var(--sans, system-ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
.cap-rules thead th { font: 600 10.5px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cap-rules tr.cur th, .cap-rules tr.cur td { background: var(--paper-2); }
.cap-rules td:last-child { color: var(--moss-2); }

/* a parent on an animal's card, and the Market's hide-locked switch (#931) */
/* the Parents section (#948): a ruled list, a row a parent: its picture (or its sex on a plain tile), Mother / Father,
   its name or morph on at most two lines, and a chevron when the row opens that animal's card */
.par-list { display: grid; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--paper-2, rgba(0, 0, 0, .12)); }
.par-row, body.mobile button.par-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 62px; margin: 0; padding: 8px 12px 8px 8px; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; text-transform: none; letter-spacing: 0; }
.par-row + .par-row, body.mobile .par-row + button.par-row { border-top: 1px solid var(--rule); }
button.par-row { cursor: pointer; transition: background .12s; } button.par-row:hover, button.par-row:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.par-pic { display: grid; place-items: center; width: 64px; height: 44px; border-radius: 7px; overflow: hidden; border: 1px solid var(--rule); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.par-pic canvas { display: block; width: 100%; height: 100%; }
.par-pic .sex svg { width: 18px; height: 18px; opacity: .8; }
.par-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.par-role { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.par-role .sex svg { width: 11px; height: 11px; }
.par-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13.5px/1.3 var(--sans, system-ui); color: var(--ink); overflow-wrap: anywhere; }
.par-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1.3 var(--sans, system-ui); color: var(--ink-2); }
.par-go { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.par-row.gone .par-name { font-weight: 500; color: var(--ink-2); } .par-row.unknown .par-name { font-weight: 400; font-style: italic; color: var(--ink-3); }
.par-row.gone .par-pic, .par-row.unknown .par-pic { border-style: dashed; }
body.mobile .par-sec { margin: 10px 0 12px; }

/* your own name on your chat messages, with its flair and badge (#943): a paper pill so the colours read on the green bubble */
.msgs-b.me .msgs-mine { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 3px; padding: 1px 7px; border-radius: 8px; background: var(--paper, #fbf8f1); cursor: default; }
.msgs-b.me .msgs-mine:hover { text-decoration: none; }

/* the founder chip (#897): an animal that came into a prestige run as a founder, in the prestige gold */
.fchip { display: inline-block; margin-right: 4px; padding: 0 6px; font-size: 10.5px; font-weight: 600; line-height: 16px; border-radius: 3px; background: color-mix(in srgb, #e0a52f 20%, var(--paper)); border: 1px solid #c98a1e; color: #8a5a07; vertical-align: middle; white-space: nowrap; }
:root[data-theme="dark"] .fchip { color: #f0c66a; background: color-mix(in srgb, #e0a52f 16%, var(--paper)); }
body.mobile .fchip { font-size: 11px; line-height: 18px; }
/* the founder pick in the prestige section (#897): its rows are pickrow.js's, styled in prestige.css (its apk- classes) */
.fp-note { margin: 0 0 6px; }
.fp-sum { margin: 6px 0 0; } /* the founder pick's live summary (#1284) */
/* Breeding → Pair picker: the Project filter and what each male adds toward it (#1008) */
.pp-projs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .pp-projs > .meta { margin-right: 2px; }
.pp-projline { margin-top: 6px; }
.pk-adv { display: block; padding: 0 10px; font-size: 12px; color: var(--moss); font-weight: 600; }
.pkr-who { display: flex; flex-direction: column; min-width: 0; } .pkr-who .pk-adv { padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the panel's scrollbar and its resize grip no longer overlap (#1129). A player had to hit "the very left edge of the
   scrollbar; any more right and it transforms into the resize cursor": the 12 px grip sat half over the panel's own
   scrollbar. It sits just outside the panel's edge now, and the panel's scrollbar is the full standard width. */
.panel-grip { right: -12px; }
.panel-grip::before { left: 0; }
.grip-tab { left: -3px; }
#panel .panel-body { scrollbar-width: auto; }
#panel .panel-body::-webkit-scrollbar { width: 14px; }
/* how wanted ads work, over the list (#1136) */
.w-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sky) 10%, var(--paper-2)); border: 1px solid color-mix(in srgb, var(--sky) 35%, var(--rule)); }
.w-intro .wi-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #7fb6e0, #3a78ad); color: #fff; font: 700 13px/1 var(--serif); }
.w-intro p { flex: 1 1 260px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); } .w-intro p b { color: var(--ink); }
.w-intro .wi-skip { flex: none; } .w-intro .wi-on { flex: none; font-size: 12px; font-weight: 600; color: var(--moss-2); }
body.mobile .w-intro { padding: 9px 10px; } body.mobile .w-intro p { flex-basis: 100%; font-size: 12.5px; } body.mobile .w-intro .wi-skip { flex: 1 1 100%; }
.wprot-why { color: var(--ink-2); }

/* the top bar fits whatever it holds (hudfit.js, #1306): the steps it takes, fewest first, when the chips on the left
   would reach the buttons on the right */
#hud.fit-1 .on-avs { display: none; } #hud.fit-1 .online-chip::before { order: 0; margin: 0; }
#hud.fit-2 .online-chip span { display: none; } #hud.fit-2 .online-chip { padding: 0 12px; }
#hud.fit-3 .st-i { display: none; } #hud.fit-3 .cell.stat { padding: 0 10px; } #hud.fit-3 .st-delta { left: 10px; }
#hud.fit-4 .lv-meta, #hud.fit-4 .lv-sub { display: none; } #hud.fit-4 .level-chip { padding: 0 5px; }
#hud.fit-5 .goals-chip .gc-txt, #hud.fit-5 .who-n { display: none; } #hud.fit-5 .who-chip { padding: 0 4px; } #hud.fit-5 .chips { gap: 4px; }

/* the tutorial on the light theme (#1331): the yellow ring and glow round what it points at were hard to see against the
   paper ("way too yellow", a tester). A deeper amber with a thin white halo stands out without the glare; the dark
   room keeps its yellow */
[data-theme="light"] .coach { border-left-color: #a8611a; }
[data-theme="light"] .coach-bar i, [data-theme="light"] .coach-dot { background: #a8611a; }
[data-theme="light"] .coach-ring { border-color: #a8611a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 5px rgba(168, 97, 26, .3); animation-name: coachPulseLight; }
@keyframes coachPulseLight { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 5px rgba(168, 97, 26, .3); } 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 9px rgba(168, 97, 26, .12); } }
/* the sign-in name hint under the name field (#911) */
.auth-card .auth-hint { margin: -8px 0 0; font-size: 12px; }

/* the Market's Wanted tab (#1372), both clients */
.wd { display: flex; flex-direction: column; gap: 10px; }
.wd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wd-head .meta { margin-left: auto; }
/* "Ones I can fill" is a filter, so it wears the Hide for-sale toggle, in the market's purple, never the green of an action */
.hl-seg .wd-canfill { --hx: #a08ff0; --hx2: #7b62d6; }
.wd-list { display: flex; flex-direction: column; gap: 8px; }
.wd-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.wd-card.mine { border-style: dashed; }
.wd-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wd-q { font-size: 15px; overflow-wrap: anywhere; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wd-chips:empty { display: none; }
.wd-fits { font-size: 12.5px; color: var(--moss); font-weight: 600; }
.wd-pick { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rule); padding-top: 8px; }
.wd-fit { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wd-fit span { min-width: 0; overflow-wrap: anywhere; }
.wd-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); }
.wd-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.wd-field { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; flex: 1 1 120px; min-width: 0; }
.wd-field.wide { flex-basis: 100%; }
.wd-field input, .wd-field select { width: 100%; box-sizing: border-box; }
.wd-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.wd-hold { font-size: 13px; }
.wd-note { margin: 4px 0 0; }
.wd .warn { color: var(--brick); }
/* the new post screen (#1401): the preview, then three numbered steps in the order they're done, then Share.
   The look is one panel with a tab per choice (Background, Costume, Filter), each tab showing what's picked. */
.ig-new.pc2 { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 16px; }
.pc2 .ig-img.big { flex: none; }
.pc-step { display: flex; flex-direction: column; gap: 9px; padding: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); }
.pc-h { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.2; color: var(--ink); }
.pc-h i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 11px/20px var(--sans, Roboto, Arial, sans-serif); font-style: normal; text-align: center; }
.pc-h b { font-weight: 700; }
.pc-h span { margin-left: auto; font-size: 12px; color: var(--ink-3); text-align: right; }
.pc-h em { font-style: normal; font-variant-numeric: tabular-nums; }
.pc2 .pc-modes { margin: 0; background: var(--paper); }
.pc2 .pc-search { width: 100%; margin: 0; box-sizing: border-box; }
.pc2 .pick-grid { margin: 0; max-height: 236px; gap: 6px; }
.pc2 .pickc { padding: 4px; background: var(--paper); border-radius: 8px; }
.pc2 .pickc > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; min-height: 2.5em; font-size: 11px; line-height: 1.25; }
.pc2 .pickc .pc-n { top: 7px; right: 7px; }
.pc-looks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: 10px; background: var(--paper); }
:root .pc-looks button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; min-height: 0; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink-2); text-align: left; }
.pc-looks small { font-size: 10.5px; color: var(--ink-3); }
.pc-looks b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
:root .pc-looks button.on, :root .pc-looks button.on:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
:root .pc-looks button:hover { background: var(--paper-2); color: var(--ink); }
.pc-pane[hidden] { display: none; }
.pc2 .pc-scenes button { width: 84px; background: var(--paper); }
.pc2 .pc-scenes button span { font-size: 10.5px; }
.pc2 .pc-hats button { background: var(--paper); }
.pc-note { margin: 0 0 7px; font-size: 12px; color: var(--ink-3); }
.pc2 textarea { width: 100%; margin: 0; box-sizing: border-box; resize: vertical; font-size: 14px; line-height: 1.4; }
.pc2 .pc-opt { margin: 0; background: var(--paper); }
.pc2 .pc-go { min-height: 44px; font-size: 15px; }
.pc2 .pc-go:disabled { opacity: .6; }
:root .pc2 .pc-opt { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 12px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); }
.pc2 .pc-opt input { flex: none; margin: 1px 0 0; }
.pc2 .pc-opt-t b { font-size: 13px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.pc2 .pc-opt-t small { font-size: 12px; text-transform: none; letter-spacing: 0; }
/* every background in view at once, the picked one included (they used to scroll sideways, the picked one off the edge) */
.pc2 .pc-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; overflow: visible; padding: 0; }
.pc2 .pc-scenes button { width: auto; min-width: 0; }
/* the Pair picker's groups (#1376): the project's own males, then a line, then the others that could help */
.pick-list .pp-div { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 6px 2px 4px; border-bottom: 1px solid var(--rule-2); }
.pick-list .pp-div[data-ppdiv="1"] { margin-top: 8px; }
.pick-list.pp-list .pp-div, .pick-list.pp-table .pp-div { padding: 10px 12px 4px; margin-top: 0; }

/* the Hatch post cap (#963): the count by Share and on your profile, amber at the cap */
.post-count { display: inline-block; margin: 0 8px 6px 0; font-size: 12px; color: var(--ink-3); }
.post-count.full { color: var(--amber); font-weight: 600; }
.ig-pbtns .post-count { align-self: center; margin: 0 2px; white-space: nowrap; } /* on the profile: centred on the button row beside it (A75) */
/* the look search on Morph Book → All your looks (#1326) */
.mb-search { display: flex; align-items: center; gap: 8px; } .mb-search input { flex: 1; min-width: 0; } .mb-search small { font-size: 11.5px; color: var(--ink-3, #a79f90); white-space: nowrap; }

/* ---- the animal card, option A (#1281): a warning, a sticky bar with three actions and More, a one-row role, folds ---- */
.ac-warn { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--amber) 12%, var(--paper)); font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.ac-warn b { color: var(--amber); }
.ac-bar { position: sticky; top: -16px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 -4px; padding: 8px 4px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ac-bar > button { flex: 1 0 auto; min-width: max-content; white-space: nowrap; } /* every label whole: the buttons share the row, and a wide one wraps to a second row rather than clipping (#1281) */
.ac-tag { display: inline-block; margin-right: 4px; padding: 0 7px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); font-size: 11px; line-height: 18px; }
.ac-more { position: relative; flex: none; }
.ac-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; height: 100%; min-height: 32px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper-2); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.ac-more > summary::-webkit-details-marker { display: none; }
.ac-more[open] > summary { background: var(--paper-3); }
.ac-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 6px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow-5, 0 8px 24px rgba(0, 0, 0, .2)); }
.ac-menu > button { justify-content: flex-start; width: 100%; text-align: left; white-space: nowrap; }
.ac-fold { border-top: 1px solid var(--rule); }
.ac-fold > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; cursor: pointer; user-select: none; }
.ac-fold > summary::-webkit-details-marker { display: none; }
.ac-fold > summary::before { content: '▸'; flex: none; width: 10px; color: var(--ink-3); font-size: 11px; transition: transform .12s; }
.ac-fold[open] > summary::before { transform: rotate(90deg); }
.ac-fold > summary b { flex: none; font-size: 13.5px; color: var(--ink); }
.ac-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.ac-fold-b { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 10px; }
@media (prefers-reduced-motion: reduce) { .ac-fold > summary::before { transition: none; } }
/* the role on the desktop card: one row of seven, each as wide as its name */
#detail .role-seg.role-pick { display: flex; gap: 0; }
#detail .role-seg.role-pick button { flex: 1 1 auto; height: 32px; min-height: 32px; padding: 0 4px; font-size: 11.5px; gap: 0; }
#detail .role-seg.role-pick button::before { display: none; }
#detail .role-seg.role-pick button + button { border-left: 1px solid var(--rule); }
#detail .role-seg.role-pick .rs-pet { grid-column: auto; }
/* the role on the phone card: a dropdown, its one line under it */
.role-sel { width: 100%; height: 44px; font-size: 15px; }
/* care in place (#239): the row's fix and the Handle all bar, shown with the Needs attention filter */
.care-cell { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; vertical-align: middle; }
.care-btn, .care-all { min-height: 24px; padding: 1px 9px; font-size: 12px; border-radius: 6px; border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--ink); white-space: nowrap; cursor: pointer; }
.care-btn.care-treat, .care-all.care-treat { border-color: #6b5a3c; color: #e0a43a; }
.care-btn:hover, .care-all:hover { border-color: var(--ink-2); }
.care-btn:disabled { opacity: .5; cursor: default; }
.care-hint, .care-note { font-size: 11.5px; white-space: nowrap; }
.care-note { color: #e0a43a; }
.care-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 12px; }
table.coll.care-on .status { width: 270px; }
table.coll.dense.care-on td.status { overflow: visible; }
/* the animal in 3D (#1467): the card's picture and an animal's photo open it */
#dCanvas { cursor: zoom-in; }
#dCanvas:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.am-photo { position: relative; }
.am-photo canvas { cursor: zoom-in; }
.am-3d { position: absolute; right: 10px; bottom: 10px; min-height: 28px; padding: 2px 12px; font-size: 12px; border-radius: 99px; border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--ink); cursor: pointer; }
.am-photo.small .am-3d { right: 6px; bottom: 6px; padding: 1px 8px; font-size: 11px; }

/* the animal card's weight and age, always in view (#1486): moss at breeding weight, brick when it isn't gaining */
.wa-chip { white-space: nowrap; } .wa-chip b { font-weight: 600; }
.wa-chip.ready b { color: var(--moss); } .wa-chip.bad b { color: var(--brick); }
.dt-wa { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 99px; background: rgba(20, 18, 15, .82); color: #f4efe3; font-size: 13px; backdrop-filter: blur(4px); }
.dt-wa.ready b { color: #8fd19e; } .dt-wa.bad b { color: #ff9a85; }
/* why an animal is stressed (#1487), under its meters */
.dt-stress, .sh-stress { color: var(--amber); font-size: 12.5px; line-height: 1.35; }
/* the burst counter (#1549): what was put away to keep at most three pop-ups up; a click opens the full list */
#toasts .toast-more { pointer-events: auto; align-self: flex-end; width: auto; padding: 5px 12px; border-left-width: 1px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; cursor: pointer; animation: none; }
#toasts .toast-more:hover { background: var(--ink-2); }
/* ---- Morph Studio, the fun pass (#1579): a gene lab with its own look. Its own purple-teal header (not the project
   editor's banner); the snake on a big lit stage with round sex buttons and a dice to reroll its pattern; the name in
   the chunky face with a rarity badge in its tier's colour and the two values as tiles; the genes you picked as big
   tokens in their type's colour; the picker under them. The computer lays it out in two columns (#msCtl takes part in
   #msRoot's grid), the phone in one, and the buttons always fit. ---- */
.ms-modal { --msA: #6b3ff0; --msB: #12a5a0; }
#modalBox:has(.ms-modal) { width: min(1080px, 96vw); }
.pj-form.ms { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "head head" "stage picked" "stage pick" "out pick" "acts acts"; gap: 12px 22px; align-items: start; }
.pj-form.ms #msCtl { display: contents; }
.ms-head { grid-area: head; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(120deg, #3b1fb0, var(--msA) 45%, var(--msB)); color: #fff; box-shadow: 0 5px 0 #24116e; }
.ms-head::after { content: ''; position: absolute; right: -40px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); }
:root .pj-form.ms .ms-head h2 { min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #fff; font: 400 32px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(20, 0, 70, .45); }
:root .pj-form.ms .ms-head h2::before, :root .pj-form.ms .ms-head h2::after { display: none; }
.ms-head small { display: block; margin-top: 5px; font: 600 13px/1.2 var(--sans); color: rgba(255, 255, 255, .88); }
.ms-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.ms-ico svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
/* the stage: the picture framed and lit, the sex buttons and the dice on it */
.pj-form.ms .ms-stage { grid-area: stage; position: relative; border-radius: 18px; padding: 6px; background: linear-gradient(140deg, var(--msA), var(--msB)); box-shadow: 0 6px 0 rgba(20, 0, 70, .35), 0 14px 30px -10px rgba(60, 20, 160, .5); }
.pj-form.ms .ms-pic { border-radius: 13px; }
.pj-form.ms .ms-tools { grid-area: stage; z-index: 2; align-self: start; justify-self: end; margin: 16px 16px 0 0; gap: 8px; }
.ms-sex.seg { display: inline-flex; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; }
:root .ms-sex.seg button { width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(14, 10, 40, .55); color: #fff; font: 700 20px/1 var(--sans); box-shadow: none; backdrop-filter: blur(4px); }
:root .ms-sex.seg button[data-mssex="F"].on { background: #e05a9a; border-color: #ffd0e6; }
:root .ms-sex.seg button[data-mssex="M"].on { background: #3d8fe0; border-color: #cfe6ff; }
:root .pj-form.ms .ms-reroll { width: 42px; height: 42px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .7); background: rgba(14, 10, 40, .55); color: #fff; box-shadow: none; backdrop-filter: blur(4px); }
.pj-form.ms .ms-reroll svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; } .pj-form.ms .ms-reroll circle { fill: currentColor; stroke: none; }
:root .pj-form.ms .ms-reroll:hover { transform: rotate(-12deg); } .pj-form.ms .ms-reroll { transition: transform .15s; }
/* the name, the rarity badge, the values */
.pj-form.ms .ms-out { grid-area: out; gap: 8px; }
.pj-form.ms .ms-name { font: 400 30px/1.05 var(--gmf); letter-spacing: .01em; color: var(--ink); }
.pj-form.ms .ms-facts { gap: 8px; font-size: 13px; }
.ms-rarity { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #8f8679; color: #fff; font: 800 12px/1.1 var(--sans); letter-spacing: .02em; }
.ms-rarity.rt-common { background: #8f8679; } .ms-rarity.rt-uncommon { background: #3f9c5a; } .ms-rarity.rt-rare { background: #2f7fd6; } .ms-rarity.rt-ultra-rare { background: #8d4ad8; }
.ms-rarity.rt-unique, .ms-rarity.rt-one-of-a-kind { background: linear-gradient(180deg, #ffd84a, #f0a51b); color: #3d2600; }
.ms-value { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.ms-val { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-3); font: 600 12px/1.2 var(--sans); }
.ms-val b { font: 400 24px/1 var(--gmf); color: var(--amber, #c98419); letter-spacing: .02em; }
:root[data-theme="dark"] .ms-val b { color: #ffd35c; }
/* the genes you picked: big tokens; the picker */
.pj-form.ms > #msCtl > .pj-f:not(.pj-pick) { grid-area: picked; }
.pj-form.ms > #msCtl > .pj-pick { grid-area: pick; }
.pj-form.ms .pj-picked { gap: 8px; }
:root .pj-form.ms .pj-picked .gq-chip { min-height: 36px; padding: 0 14px; border-radius: 12px; font: 400 16px/1 var(--gmf); letter-spacing: .02em; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.pj-form.ms .pj-genes { max-height: 300px; overflow-y: auto; }
:root .pj-form.ms .pj-genes .gq-chip { min-height: 30px; font-size: 13px; }
/* the buttons: one row that wraps, always on screen */
.pj-form.ms .ms-acts { grid-area: acts; position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 12px 0 2px; background: var(--paper); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* the phone: one column */
body.mobile .pj-form.ms { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "out" "picked" "pick" "acts"; gap: 12px; }
body.mobile .ms-head { padding: 12px 14px; } :root body.mobile .pj-form.ms .ms-head h2 { font-size: 26px; }
body.mobile .ms-ico { width: 44px; height: 44px; } body.mobile .pj-form.ms .ms-name { font-size: 26px; }
body.mobile .pj-form.ms .ms-tools { margin: 12px 12px 0 0; }
body.mobile .pj-form.ms .ms-acts { justify-content: stretch; } body.mobile .pj-form.ms .ms-acts button { flex: 1 1 40%; min-width: 0; white-space: normal; }
body.mobile .pj-form.ms .ms-acts button.primary { flex-basis: 100%; }
body.mobile .pj-form.ms .pj-genes { max-height: none; }
/* Morph Studio, more fun (#1579) */
.pj-form.ms .ms-tools { grid-area: stage; z-index: 2; align-self: start; justify-self: end; margin: 16px 16px 0 0; display: flex; gap: 8px; }
.ms-head::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 62% 30%, #ffd84a 0 3px, transparent 4px), radial-gradient(circle at 74% 70%, #ff7bd5 0 4px, transparent 5px), radial-gradient(circle at 85% 25%, #7dffb2 0 3px, transparent 4px),
  radial-gradient(circle at 92% 62%, #fff 0 2px, transparent 3px), radial-gradient(circle at 55% 78%, #8ad8ff 0 3px, transparent 4px), radial-gradient(circle at 68% 50%, #fff 0 1.5px, transparent 2.5px); }
.ms-head > * { position: relative; z-index: 1; }
/* section headings with a count bubble */
.ms-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font: 400 18px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.ms-n { font: 800 11px/1 var(--sans); font-style: normal; padding: 3px 8px; border-radius: 999px; background: var(--msA); color: #fff; letter-spacing: .04em; }
.ms-h small { width: 100%; font: 500 12px/1.3 var(--sans); text-transform: none; letter-spacing: 0; }
.pj-form.ms .ms-mix { padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--msA) 10%, var(--paper-2)); border: 2px dashed color-mix(in srgb, var(--msA) 45%, transparent); }
/* the tokens: candy in their type's colour, a hard edge, a pop when added */
.pj-form.ms .ms-mix .pj-gchip { position: relative; display: inline-flex; align-items: center; }
:root .pj-form.ms .ms-mix .pj-gchip .gq-chip { --tc: #9b5de5; --te: #5f2aa8; min-height: 40px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--tc); color: #fff; font: 400 17px/1 var(--gmf); letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); box-shadow: 0 4px 0 var(--te); }
.pj-form.ms .ms-mix .ms-t-codom .gq-chip { --tc: #f5b301 !important; --te: #a36d00 !important; color: #3d2600 !important; text-shadow: none !important; }
.pj-form.ms .ms-mix .ms-t-dom .gq-chip { --tc: #3a86ff !important; --te: #1b4fb0 !important; }
:root .pj-form.ms .ms-mix .pj-gchip .gq-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--te); }
:root .pj-form.ms .ms-mix .pj-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; background: #fff; color: #1e1a15; font: 800 14px/22px var(--sans); text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.pj-form.ms .ms-mix .pj-picked { gap: 12px; padding: 4px 4px 2px; min-height: 48px; align-items: center; }
.ms-new { animation: ms-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ms-pop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* the picker: filled chips in their type's colour, a lift on hover */
:root .pj-form.ms .pj-pick .gq-chip:not(:disabled) { border: 0; color: #fff; background: #9b5de5; box-shadow: 0 3px 0 #5f2aa8; font-weight: 700; }
:root .pj-form.ms .pj-pick .gq-chip.pj-k-codom:not(:disabled) { background: #f5b301; color: #3d2600; box-shadow: 0 3px 0 #a36d00; }
:root .pj-form.ms .pj-pick .gq-chip.pj-k-dom:not(:disabled) { background: #3a86ff; box-shadow: 0 3px 0 #1b4fb0; }
:root .pj-form.ms .pj-pick .gq-chip:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.08); }
:root .pj-form.ms .pj-pick .gq-chip:disabled { opacity: .35; }
.pj-form.ms .pj-pick .gq-chip span { background: rgba(0, 0, 0, .35); color: #fff; }
/* the stage flashes on every change, the name bounces */
.ms-stage.bump { animation: ms-bump .5s ease-out; }
@keyframes ms-bump { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.015); filter: brightness(1.25); } 100% { transform: none; filter: none; } }
.pj-form.ms .ms-name { animation: ms-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
/* the phone's buttons: compact, two by two, the main one wide */
body.mobile .pj-form.ms .ms-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 8px; }
body.mobile .pj-form.ms .ms-acts button { min-height: 40px; font-size: 14px; padding: 6px 8px; }
body.mobile .pj-form.ms .ms-acts button.primary { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .ms-new, .ms-stage.bump, .pj-form.ms .ms-name { animation: none; } }
/* ---- no way back in after a lost password (#1515): a warning bar across the top, no close button. On the computer it
   sits above the top bar and every fixed piece under it moves down by its height, so it covers nothing. ---- */
.rbar { --rb: 34px; position: fixed; top: 0; left: 0; right: 0; z-index: 21; height: var(--rb); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; box-sizing: border-box;
  background: color-mix(in srgb, var(--amber) 22%, var(--paper)); border-bottom: 1px solid var(--amber); color: var(--ink); font-size: 13px; }
.rbar-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbar-t::before { content: '⚠ '; color: var(--amber); }
.rbar-go { flex: none; height: 26px; min-height: 26px; padding: 0 12px; font-size: 12.5px; }
body:not(.mobile).rb-on #hud { top: 34px; }
body:not(.mobile).rb-on #panel, body:not(.mobile).rb-on #rail { top: 90px; }
body:not(.mobile).rb-on #detail { top: 98px; max-height: calc(100vh - 110px); }
body:not(.mobile).rb-on #hint, body:not(.mobile).rb-on .srv-hint { top: 98px; }
body:not(.mobile).rb-on #push { top: 102px; }
body:not(.mobile).rb-on .xb-arr { top: 104px; }
body:not(.mobile).rb-on #hallbar { top: 108px; }
/* ---- the view buttons (#1528): zoom and back to the room view without a scroll wheel, on the room's right edge (the
   room chat has the bottom left, toasts the bottom right); they step aside for the animal card and the phone ---- */
.viewbtns { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-2, 0 2px 8px rgba(0, 0, 0, .18)); overflow: hidden; transition: right .18s ease; }
body.detail-open .viewbtns { right: 398px; } body.phone-open .viewbtns { right: 376px; } body.detail-open.phone-open .viewbtns { right: 398px; }
.viewbtns button { width: 38px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font: 600 18px/1 var(--sans); display: grid; place-items: center; }
.viewbtns button + button { border-top: 1px solid var(--rule); }
.viewbtns button:hover { background: var(--paper-3); color: var(--ink); }
.viewbtns button:focus-visible { outline: 2px solid var(--moss-2); outline-offset: -2px; }
.viewbtns svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* never over an open window (#1581): a full-screen panel covers the room, so they go; beside the animal card (400 px wide,
   12 px from the edge) they stand 14 px clear of it, with or without the phone */
body.panel-full .viewbtns { display: none; }
body.detail-open .viewbtns, body.detail-open.phone-open .viewbtns { right: 426px; }
body.walking .viewbtns, body.in-hall .viewbtns { display: none; }
@media (prefers-reduced-motion: reduce) { .viewbtns { transition: none; } }

/* ---- the looks grade (#135): a letter, S to E, beside the value; the same outline for every grade (a letter, not a
   colour, so it reads colour-blind), and the breakdown on the animal card ---- */
.lk-grade { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border: 1.5px solid currentColor; border-radius: 5px; font: 700 11px/1 var(--mono); color: var(--ink); vertical-align: 1px; cursor: help; }
td.num .lk-grade { margin-right: 4px; }
.lk-break { margin: 6px 0 2px; font-size: 12.5px; }
.lk-top { display: flex; align-items: center; gap: 8px; }
.lk-top .lk-grade { min-width: 24px; height: 24px; font-size: 13px; cursor: default; }
.lk-top .lk-x, .lk-rows b { margin-left: auto; font-family: var(--mono); font-weight: 600; }
.lk-rows { list-style: none; margin: 4px 0 0; padding: 0 0 0 32px; }
.lk-rows li { display: flex; gap: 8px; padding: 2px 0; color: var(--ink-2); }
.lk-rows li.lk-none { color: var(--ink-3); font-style: italic; }
.lk-hid { margin: 4px 0 0 32px; color: var(--ink-3); font-size: 12px; }
body.mobile .acard-m .lk-grade { margin-left: 6px; }
body.mobile .lk-break { font-size: 13.5px; }
/* ---- Starter racks (#1566): one rack for each size, on top of Shop → Equipment → Racks, both clients ---- */
.starter-racks { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--amber); border-radius: 12px; background: color-mix(in srgb, var(--amber) 10%, var(--paper)); }
.starter-racks header { display: flex; align-items: baseline; gap: 8px; }
.starter-racks header .price { margin-left: auto; font-weight: 700; }
.starter-racks > p { margin: 4px 0 6px; }
.starter-racks ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.starter-racks li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
.starter-racks li .sr-k { margin-left: auto; text-align: right; }
.starter-racks li.got { opacity: .6; }
.starter-racks .sr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.starter-racks .sr-foot .meta { flex: 1 1 160px; }
/* ---- the paused bar, redone (#1656): a slim game strip under the top bar, a pause coin, "Room paused" in the chunky face
   with one short line (the whole story on hover), and a green Resume slab ---- */
:root #pausedBar { gap: 14px; padding: 8px 16px; background: linear-gradient(180deg, #3b6fa0, #2b5880); border-bottom: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 3px 0 rgba(10, 30, 50, .45), 0 8px 18px rgba(0, 0, 0, .25); color: #fff; }
#pausedBar .pb-coin { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a9d4ff, #4d9ae8 60%, #1d5a99); box-shadow: 0 3px 0 rgba(10, 30, 60, .5), inset 0 0 0 2px rgba(255, 255, 255, .3); }
#pausedBar .pb-coin svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
#pausedBar > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; line-height: 1.3; cursor: help; }
#pausedBar > span b { font: 400 18px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
#pausedBar > span small { font: 600 13px/1.3 var(--sans); color: rgba(255, 255, 255, .92); }
:root #pausedBar button.pb-go, :root #pausedBar button.pb-go:hover { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 18px 0 14px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #6fd18a, #3f9c5a); color: #fff; font: 400 15px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: 0 3px 0 #23653a; }
:root #pausedBar button.pb-go:hover { filter: brightness(1.07); }
:root #pausedBar button.pb-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #23653a; }
#pausedBar button.pb-go svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* the 3D view lost its graphics (#1712): a reload offer over the dead room */
.scene-lost { position: fixed; left: 50%; top: 40%; z-index: 9000; transform: translate(-50%, -50%); display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 14px; background: var(--paper-2, #2b2620); color: var(--ink, #f3ede2); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); text-align: center; }
.scene-lost span { font-size: 13.5px; color: var(--ink-2, #cfc6b6); }

/* a starred look (#1697): the star over the picture's corner */
.mb-look { position: relative; }
.mb-look .mb-fav { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); box-shadow: none; color: #f3ede2; font-size: 17px; line-height: 1; }
.mb-look.fav .mb-fav { color: #f0c35a; }