/* Legends of the Soulbringer -- the site's one stylesheet. The site is the game's own window (2026-11-04, the owner chose it): brown grained
   panels with a thin gold rim, the menu as window tabs, dark rows for lists. Fonts are the game's own (Cinzel, Alegreya Sans), kept in wwwroot/fonts. */
@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel-Regular.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-MediumItalic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
:root {
  --bg: #150f09;        /* the bark behind every window */
  --bg-2: #0e0a06;      /* inside a box: inputs, code */
  --panel: #2a2119;     /* a window */
  --panel-2: #352a1f;   /* a window's lit part, a row under the pointer */
  --row: #1c150e;       /* a list row inside a window */
  --row-line: #0f0a06;
  --line: #55432a;      /* the dim rim */
  --rim: #8c6f3c;       /* the gold rim */
  --text: #ecdfc5;
  --muted: #bcae93;
  --gold: #ecc66d;
  --gold-2: #c9a24a;
  --red: #c0463a;
  --green: #8cd690;
  --blue: #a3c9f2;
  --radius: 6px;
  --serif: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --max: 1320px;
  --gutter: 16px;
  --toprow: 3.1rem;     /* the header's first row, which scrolls away and leaves the tabs */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .07 0 0 0 0 .03 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { font-size: 18px; scroll-padding-top: 4rem; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.5; word-spacing: .07em; font-variant-numeric: lining-nums; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg) var(--grain); }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #fff0c4; text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--gold); font-weight: 700; letter-spacing: .005em; line-height: 1.2; }
h1 { font-size: 1.9rem; margin: 0 0 .7rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .7rem; border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
h3 { font-size: 1.02rem; margin: 1.3rem 0 .4rem; }
h4 { font-size: .95rem; margin: 1.1rem 0 .3rem; }
p { margin: .6rem 0 .9rem; }
em { color: #f6e7bf; }
kbd { font-family: var(--sans); font-size: .85em; font-weight: 700; padding: .05em .4em; color: var(--gold); background: var(--row); border: 1px solid var(--rim); border-radius: 4px; }
code, pre { font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; }
code { padding: .05em .35em; font-size: .82em; }
code.hash { font-size: .72rem; word-break: break-all; }   /* a SHA-256 wraps on a phone instead of widening the page */
pre { padding: .8rem 1rem; overflow: auto; font-size: .85rem; }
pre code { border: 0; padding: 0; background: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
blockquote { margin: 1rem 0; padding: .4rem 1rem; border-left: 3px solid var(--rim); color: var(--text); background: var(--row); border-radius: 0 var(--radius) var(--radius) 0; }
table { border-collapse: collapse; width: 100%; margin: .8rem 0 1.2rem; font-size: .95rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #3c2f1f; vertical-align: top; }
th { color: var(--gold); font-weight: 700; font-family: var(--sans); }
tr:hover td { background: rgba(236,198,109,.04); }
img { max-width: 100%; height: auto; }

/* A window: brown, grained, a thin gold rim with a dark line inside it, as in the game. Every page but the front one is one window under the tabs. */
main { overflow-wrap: break-word; flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 1.6rem 2.2rem 2.6rem; }
main.page, .win { position: relative; background: var(--panel) var(--grain); border: 1px solid var(--rim); box-shadow: inset 0 0 0 2px #1a130c, inset 0 0 0 3px rgba(140,111,60,.28), 0 10px 34px rgba(0,0,0,.55); }
main.page { border-top: 0; border-radius: 0 0 4px 4px; margin-bottom: 2rem; flex: 1 0 auto; }
main.wide { max-width: var(--max); }
.win { border-radius: 4px; }
/* Text keeps a readable width inside the wide window; grids and tables use all of it. */
main.page > p, main.page > ul, main.page > ol, main.page > blockquote, main.page > .notice, .prose > p, .prose > ul, .prose > ol, .prose > blockquote, .lead { max-width: 44em; }
main.page > h1:first-child, main.page > .help:first-child + h1, main.page > .crumbs + h1 { padding-bottom: .55rem; border-bottom: 1px solid var(--line); }

/* The header: the name, the status and the account; under them the site's menu as the game's window tabs. */
.top { position: sticky; top: calc(-1 * var(--toprow)); z-index: 10; background: var(--bg) var(--grain); display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2)); }
.top > .brand, .top > .realm, .top > .account { min-height: var(--toprow); display: flex; align-items: center; }
.brand { font-family: var(--serif); font-weight: 800; font-size: 1.15rem; color: var(--text); white-space: nowrap; }
.brand em { color: var(--gold); font-style: normal; }
.brand:hover { text-decoration: none; color: #fff0c4; }
.nav { display: flex; gap: 3px; width: 100%; order: 4; align-items: flex-end; border-bottom: 1px solid var(--rim); }
.nav a { flex: 1 0 auto; text-align: center; padding: .32rem .5rem .38rem; font-family: var(--serif); font-weight: 700; font-size: .78rem; color: var(--muted); background: var(--row); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.nav a.active { color: var(--gold); background: var(--panel); border-color: var(--rim); box-shadow: inset 0 -2px 0 var(--gold); }
.nav a.go { color: var(--gold); }
.account { margin-left: auto; gap: .5rem; white-space: nowrap; }
.who { color: var(--gold); font-weight: 700; }
.inline { display: inline; }
.nav-toggle { display: none; background: var(--row); border: 1px solid var(--rim); color: var(--text); border-radius: 6px; font-family: var(--serif); font-weight: 700; font-size: .85rem; padding: .1rem .7rem; margin-left: auto; min-width: 44px; min-height: 44px; cursor: pointer; }

/* buttons, forms */
.btn { display: inline-block; padding: .5rem 1.1rem; border-radius: 6px; background: linear-gradient(#f4d584, #d9a94a); color: #241505; font-weight: 700; border: 1px solid #f7e2a8; box-shadow: 0 0 0 1px #241505; cursor: pointer; font-family: var(--sans); font-size: .95rem; line-height: 1.3; }
.btn:hover { background: linear-gradient(#fbe3a0, #e3b65a); text-decoration: none; color: #241505; }
.btn.ghost { background: var(--row); color: var(--text); border-color: var(--rim); box-shadow: none; }
.btn.ghost:hover { background: var(--panel-2); color: var(--gold); }
.btn.small { padding: .2rem .7rem; font-size: .85rem; }
.btn.danger { background: linear-gradient(#d9665b, #a83a30); color: #fff; border-color: #6a1f18; }
.btn.big { font-size: 1.05rem; padding: .7rem 1.5rem; }
form.stack { display: grid; gap: .8rem; max-width: 560px; }
label { display: block; font-weight: 500; color: var(--text); margin-bottom: .25rem; }
label small { font-weight: 400; color: var(--muted); }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=search], textarea, select {
  width: 100%; padding: .5rem .7rem; border-radius: 5px; border: 1px solid var(--rim); background: var(--bg-2); color: var(--text); font: inherit; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 0; }
textarea { min-height: 160px; resize: vertical; }
input[type=file] { color: var(--muted); }
.hp { position: absolute; left: -9999px; }
.help { color: var(--muted); font-size: .9rem; }
.error { background: #3a1a17; border: 1px solid #7a2e27; color: #ffb3aa; padding: .6rem .9rem; border-radius: 6px; }
.ok { background: #16301d; border: 1px solid #2d6b3d; color: #b9f0c4; padding: .6rem .9rem; border-radius: 6px; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.right { margin-left: auto; }

/* cards, grids: a card is a dark row inside the window */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.card { background: var(--row); border: 1px solid var(--row-line); border-radius: var(--radius); padding: .9rem 1.05rem; }
.card h3 { margin-top: 0; }
.card.img { padding: 0; overflow: hidden; border-color: var(--line); }
.card.img img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card.img .body { padding: .8rem 1rem 1rem; }
.meta { color: var(--muted); font-size: .88rem; }
.pill { display: inline-block; padding: .05rem .55rem; border-radius: 999px; background: var(--row); border: 1px solid var(--line); color: var(--text); font-size: .8rem; margin: 0 .25rem .25rem 0; }
.pill.gold { color: var(--gold); border-color: var(--rim); }
.pill.red { color: #ffb3aa; border-color: #7a2e27; }
.pill.green { color: var(--green); border-color: #2d6b3d; }
.pill.blue { color: var(--blue); border-color: #2e4f6b; }

/* news / forum */
.post { background: var(--row); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.post .head { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .4rem; margin-bottom: .6rem; }
.post .author { color: var(--gold); font-weight: 600; }
.post.deleted { opacity: .6; font-style: italic; }
.thread-list .t { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .55rem .9rem; background: var(--row); border: 1px solid var(--row-line); border-radius: var(--radius); margin-bottom: 4px; }
.thread-list .t:hover { background: var(--panel-2); }
.thread-list .t .n { font-size: .85rem; color: var(--muted); text-align: right; white-space: nowrap; }
.cat { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .75rem 1rem; border: 1px solid var(--row-line); border-radius: var(--radius); background: var(--row); margin-bottom: .45rem; }
.cat h3 { margin: 0 0 .2rem; }
.prose img { border-radius: 8px; }
.prose h1, .prose h2 { border: 0; }
/* The owner's poem on the story page (a ```poem block, kept word for word): set as verse, not as code (2026-10-13, the owner). */
.prose pre:has(> code.language-poem) { background: none; border: 0; border-left: 3px solid var(--rim); border-radius: 0; padding: .4rem 1.2rem; overflow: visible; }
.prose code.language-poem { font-family: var(--sans); font-style: italic; font-size: 1.08rem; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.legends h3 { margin-bottom: .2rem; }

/* bestiary / guide */
.toc { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 1rem; }
.toc a { padding: .15rem .6rem; border: 1px solid var(--line); border-radius: 6px; font-size: .88rem; background: var(--row); }
.mob { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .55rem .8rem; background: var(--row); border: 1px solid var(--row-line); border-radius: var(--radius); margin-bottom: 4px; }
.mob .name { font-family: var(--serif); font-weight: 700; font-size: 1rem; }
.mob .name .lv { color: var(--muted); font-size: .85rem; margin-left: .4rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem .9rem; margin: .8rem 0; }
.stats div { background: var(--row); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; }
.stats b { display: block; color: var(--muted); font-size: .84rem; font-weight: 500; }
.filter { max-width: 420px; margin: .4rem 0 1rem; }
.tier { display: grid; grid-template-columns: 90px 1fr; gap: .5rem; padding: .25rem 0; }
.tier b { color: var(--gold-2); }
video { width: 100%; border-radius: var(--radius); background: #000; border: 1px solid var(--line); }
.embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: .6rem 0 .6rem 3rem; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: .5rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--row); color: var(--gold); border: 1px solid var(--rim); font-weight: 700; display: grid; place-items: center; font-family: var(--sans); }
.notice { border: 1px solid var(--rim); background: var(--row); border-radius: var(--radius); padding: .8rem 1rem; }

/* footer */
.foot { border-top: 1px solid var(--rim); padding: 1.1rem var(--gutter) 2rem; color: var(--muted); font-size: .88rem; max-width: var(--max); margin: 0 auto; width: 100%; display: flex; gap: .3rem 1rem; flex-wrap: wrap; justify-content: space-between; }
.foot strong { color: var(--text); }

/* The menu folds into its button below 1080 px: two columns of tabs, and the header no longer scrolls part of itself away. */
@media (max-width: 1080px) {
  :root { --toprow: 3.1rem; }
  .top { top: 0; border-bottom: 1px solid var(--rim); gap: 0 .6rem; }
  .nav-toggle { display: block; }
  .top > .nav, .top > .account { display: none; width: 100%; }
  body.nav-open .top > .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 .5rem; border: 0; }
  body.nav-open .nav a { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .4rem; font-size: .85rem; }
  body.nav-open .nav a.active { border-color: var(--rim); }
  body.nav-open .top > .account { display: flex; flex-wrap: wrap; margin: 0 0 .6rem; min-height: 0; }
  body.nav-open .top { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 860px) {
  .thread-list .t { grid-template-columns: 1fr; gap: .2rem; }
  .thread-list .t .n { text-align: left; }
  .cat { grid-template-columns: 1fr; }
  /* 2026-10-16 (website review, Fix 13): with the menu open the header is taller than a phone held sideways and did not scroll, so the
     last links (Download, Contact, Log in) could not be reached. The open header now scrolls inside the screen. */
  main.page { padding: 1.1rem 14px 1.8rem; border-left: 0; border-right: 0; border-radius: 0; margin-bottom: 1rem; }
}

/* The game's status in the header (Shared/_Status): a dot, Online or Offline, and how many are playing. */
.realm { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); white-space: nowrap; cursor: default; }
.realm .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #6fcf6f; box-shadow: 0 0 .4rem rgba(111, 207, 111, .8); }
.realm.down .dot { background: #d65a4f; box-shadow: 0 0 .4rem rgba(214, 90, 79, .8); }
.realm .count { color: var(--text); }
.realm .count::before { content: "·"; color: var(--muted); margin-right: .4rem; }
.top .brand { order: 1; }
.top .realm { order: 2; }
.top .account { order: 3; }
@media (max-width: 1080px) {
  .top .realm { order: 2; margin-left: auto; }
  .top .nav-toggle { order: 3; margin-left: 0; }
  .top .nav { order: 4; }
  .top .account { order: 5; margin-left: 0; }
}

/* A status line inside a page (a character "in the world now"). */
.status { display: inline-flex; align-items: center; gap: .45rem; margin: .2rem 0 1rem; font-size: .95rem; color: #e6dcc8; }
.status .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #6fcf6f; box-shadow: 0 0 .4rem rgba(111, 207, 111, .8); }
.status.down .dot { background: #8a8073; box-shadow: none; }

/* Heroes: the search, the boards, a character's page. */
.search { display: flex; gap: .5rem; margin: .4rem 0 1.2rem; max-width: 30rem; }
.search input { flex: 1; min-width: 0; padding: .5rem .7rem; background: var(--bg-2); color: var(--text); border: 1px solid var(--rim); border-radius: var(--radius); }
.board { margin: .2rem 0 0; padding-left: 1.4rem; }
.board li { margin: .25rem 0; }
.board .meta, td.meta { color: var(--muted); font-size: .9rem; margin-left: .3rem; }
.title-line { font-family: var(--serif); font-weight: 700; color: var(--gold-2); font-size: 1rem; margin-top: -.4rem; }
.facts { width: auto; min-width: 20rem; }
.facts th { text-align: left; padding-right: 1.5rem; }
@media (max-width: 480px) {
  .brand { font-size: .92rem; white-space: normal; line-height: 1.15; }
  .top { gap: .5rem; }
  .realm .count { display: none; }                 /* the word stays with the dot (Fix 30: a colour alone says nothing to everyone); the count is in the hover and the front page */
}

/* Admin -> Server health. */
.health-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-left: .4rem; vertical-align: middle; background: #6fcf6f; }
.health-dot.bad { background: #d65a4f; }
.health-problem { color: #ff9a8a; }

/* The gallery: pictures in a grid, one at a time in the viewer. */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.gallery figure { margin: 0; background: var(--row); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transition: transform .25s ease; }
.gallery a.shot { display: block; overflow: hidden; }
.gallery a.shot:hover img { transform: scale(1.03); }
.gallery figcaption { padding: .5rem .8rem .6rem; font-size: .9rem; color: var(--muted); }
.gallery figcaption strong { color: var(--gold); font-family: var(--serif); font-weight: 700; }
.viewer { max-width: min(96vw, 1600px); padding: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); }
.viewer::backdrop { background: rgba(0, 0, 0, .82); }
.viewer img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 6px; }
.viewer p { margin: .5rem .2rem; color: #d9cfbc; }
.viewer-keys { display: flex; gap: .4rem; justify-content: flex-end; }

/* The bestiary's pictures (the editor's RenderBestiary, 2026-10-14). */
.mob-pic { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); margin: .5rem 0 1rem; }
/* .mob is a grid: a float is ignored there, so a card with a picture gets a column for it. */
.mob:has(.mob-thumb) { grid-template-columns: 64px 1fr; column-gap: .7rem; }
.mob:has(.mob-thumb) > :not(.mob-thumb) { grid-column: 2; }
.mob-thumb { grid-column: 1; grid-row: 1 / span 3; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; margin-top: .1rem; border: 1px solid var(--line); }

/* ------------------------------------------------------------------------------------------------------------------------------
   2026-10-16 (website review, the facts batch). Each rule says which fix it is.
   ------------------------------------------------------------------------------------------------------------------------------ */

/* Fix 3: a wide table scrolls in its own box on a phone, and the Guide's and skill pages' tables (table.stack) become small cards, so the
   page never slides sideways and nothing is cut off. */
.prose table, .scroll-x { max-width: 100%; }
@media (max-width: 700px) {
  main table:not(.stack) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.stack, table.stack tbody { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { display: block; background: var(--row); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .8rem; margin-bottom: .7rem; }
  table.stack td { display: block; border: 0; padding: .3rem 0; }
  table.stack td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: .84rem; font-weight: 500; }
  table.stack td.skill-name { font-size: 1.05rem; }
  .facts { min-width: 0; width: 100%; }
}

/* Fix 14: nothing unbroken (a folder path, a long title, a hash) pushes a page sideways. */
pre, code { overflow-wrap: anywhere; }   /* (a path or a hash has no spaces to break at) */
pre { white-space: pre-wrap; }
.help, .meta, td, th, li, p, h1, h2, h3 { overflow-wrap: break-word; }
.card, .post, .mob, .thread-list .t > div, .cat > div { min-width: 0; }

/* Fix 15: the filter boxes are the size of the other boxes, and 16 px on a phone so an iPhone does not zoom in when one is tapped. */
.filter { display: block; min-height: 44px; }
.empty-note { margin: .4rem 0 1rem; }
@media (max-width: 700px) {
  input[type=text], input[type=password], input[type=email], input[type=url], input[type=search], textarea, select { font-size: 16px; min-height: 44px; }
  .search input { font-size: 16px; min-height: 44px; }
}

/* Fix 30: a footer link, a breadcrumb and a button are big enough to tap; a jump link lands below the sticky header (scroll-padding on html). */
.foot-links a, .crumbs a { display: inline-block; padding: .55rem .3rem; }
.crumbs { margin: 0 0 .4rem; }
.btn.small { min-height: 36px; }
@media (max-width: 700px) { .btn.small { min-height: 44px; display: inline-flex; align-items: center; } .account { flex-wrap: wrap; } }

/* Fix 16: "Windows PC" and "Android phone" side by side, the second under the first on a narrow phone. */
.pair { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.pair .btn { flex: 1 1 14rem; text-align: center; max-width: 24rem; }
.btn.android { background: var(--row); color: var(--text); border-color: var(--rim); box-shadow: none; }
.btn.android:hover { background: var(--panel-2); color: var(--gold); }

/* Fix 12: the known issues, first on the patch notes page; older releases fold away. */
.known { border: 1px solid var(--rim); background: var(--row); border-radius: var(--radius); padding: .6rem 1.1rem 1rem; margin: 1rem 0 1.5rem; }
.known h2 { border: 0; margin-top: .6rem; }
details.release { border: 1px solid var(--row-line); border-radius: var(--radius); background: var(--row); margin: .7rem 0; padding: 0 1rem; }
details.release > summary { cursor: pointer; padding: .7rem 0; font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 1rem; }
details.release[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: .5rem; }

/* Fix 21: the Admin Reports page is a card per report on a phone (and a table on a wide screen). */
.report-cards { display: none; }
.report { background: var(--row); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .7rem; }
.report .head { display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--muted); font-size: .88rem; }
.report .head b { color: var(--gold); }
.report p { margin: .4rem 0 0; }
@media (max-width: 700px) { main table.report-table { display: none; } .report-cards { display: block; } }

/* Fix 25: the trailer's size, beside it, for a tap on a phone's data. */
.video-size { color: var(--muted); font-size: .88rem; }

/* Add 8: the gateway answers but a zone server does not -- amber, and the sentence may wrap on a narrow header. */
.realm.part .dot { background: #e0a43a; box-shadow: 0 0 .4rem rgba(224, 164, 58, .8); }
.realm.part .word { color: #f0c46a; }
@media (max-width: 480px) { .realm.part { white-space: normal; font-size: .78rem; line-height: 1.2; max-width: 9.5rem; } }

/* Admin helpers (the admin batch, 2026-10-16). */
.publish-row { margin-top: .4rem; gap: .5rem .8rem; }
.check { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--muted); margin: 0; }
.danger-zone { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); max-width: 860px; }
.discord-line { margin: 0 0 .8rem; }
.attention { border: 1px solid var(--rim); background: var(--row); border-radius: var(--radius); padding: .7rem 1rem; margin: 0 0 1.2rem; }
.attention h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.attention ul { margin: 0; padding-left: 1.2rem; }
.attention li { margin: .35rem 0; }
.attention .clear { color: #b9f0c4; margin: 0; }
.rejected-draft { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.rejected-draft:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.video-edit summary { cursor: pointer; color: var(--gold); min-height: 36px; display: inline-flex; align-items: center; }
.video-edit .stack { margin-top: .5rem; max-width: 40rem; }
.cert-ok { color: #b9f0c4; } .cert-warn { color: #f0c46a; } .cert-bad { color: #ff9a8a; }

/* The Combining guide (Pages/Guide/Combining.cshtml, 2026-10-22): the window's promise, the shapes, the tiers, the recipe and result cards.
   Each shape has a colour (its badge and the card's top edge); the instability colours are the game window's own (FailureRules.Shown). */
:root { --s-strike: #d98a4e; --s-shot: #c9b04a; --s-spell: #7aa7e0; --s-mend: #7fd18b; --s-ward: #b7a3e8; --s-zone: #e07a6a; --s-shape: #b9a58c; --s-veil: #8e86b8; --s-knack: #6fc7b8; }
.lead { font-size: 1.08rem; max-width: 52rem; }
.pill.amber { color: #e8c860; border-color: #7a6227; }
.cards.three { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.combo-window { max-width: 34rem; margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid var(--rim); border-radius: var(--radius); background: var(--row); }
.combo-picks, .combo-card .inputs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pick { display: inline-block; padding: .15rem .6rem; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); font-size: .88rem; }
.plus { color: var(--gold); font-weight: 700; }
.combo-promise { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; color: var(--gold); margin: .55rem 0 .35rem; }
.combo-status { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.unstable { display: inline-block; font-weight: 700; font-size: .88rem; padding: .1rem .55rem; border-radius: 6px; border: 1px solid currentColor; }
.unstable.small { font-size: .78rem; padding: 0 .4rem; margin-left: .2rem; }
.unstable.green { color: #7fd18b; } .unstable.amber { color: #e8c860; } .unstable.red { color: #ff8a7a; }
.unstable.broken { color: #fff; background: #8a2a20; border-color: #c0463a; letter-spacing: .06em; }
.instability-scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1rem; margin: .8rem 0 1rem; color: var(--muted); font-size: .92rem; }
.instability-scale .unstable { margin-right: .35rem; }
ol.steps li, ol.rules li { margin: .35rem 0; }
.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin: .8rem 0 1.2rem; }
.shape-card { background: var(--row); border: 1px solid var(--line); border-top: 3px solid var(--shape); border-radius: var(--radius); padding: .7rem .95rem; }
.shape-card h3 { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--shape); }
.shape-card p { margin: 0; font-size: .93rem; }
.shape-strike { --shape: var(--s-strike); } .shape-shot { --shape: var(--s-shot); } .shape-spell { --shape: var(--s-spell); }
.shape-mend { --shape: var(--s-mend); } .shape-ward { --shape: var(--s-ward); } .shape-zone { --shape: var(--s-zone); }
.shape-shape { --shape: var(--s-shape); } .shape-veil { --shape: var(--s-veil); } .shape-knack { --shape: var(--s-knack); }
.shape-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--shape); border: 1px solid var(--shape); background: rgba(0,0,0,.25); white-space: nowrap; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.two-col .card ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.el { font-weight: 600; }
.el-fire { color: #ff9a5a; } .el-ice { color: #9fd8ff; } .el-lightning { color: #f3e36a; } .el-water { color: #6fa8dc; }
.el-air { color: #cfe7d8; } .el-stone { color: #c8a77a; } .el-shadow { color: #a99be0; } .el-life { color: #7fd18b; }
table.reactions .pill { margin-left: .4rem; }
table.reactions tr.breaks td { color: #ffb3aa; }
.tier-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; margin: .8rem 0 1rem; }
.tier-card { background: var(--row); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.tier-card .tier-name { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--tier); }
.tier-card .tier-budget { color: var(--muted); font-size: .85rem; margin-bottom: .3rem; }
.tier-card p { font-size: .92rem; margin: .3rem 0 .4rem; }
.tier-card ul { margin: 0; padding-left: 1.05rem; font-size: .88rem; }
.tier-simple { --tier: #cfc6b4; } .tier-compound { --tier: #7aa7e0; } .tier-prestige { --tier: #b7a3e8; } .tier-apex { --tier: var(--gold); }
.tier-card.tier-apex { border-color: var(--gold-2); box-shadow: 0 0 1.5rem rgba(242, 199, 90, .08); }
.pill.tier-pill { color: var(--tier); border-color: var(--tier); }
.forbidden { margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid #7a2e27; border-radius: var(--radius); background: radial-gradient(600px 200px at 0 0, rgba(140, 40, 60, .25), transparent 70%), #1d1416; }
.forbidden h3 { margin: 0 0 .3rem; color: #e58a9a; }
.forbidden p { margin: 0; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin: .8rem 0; }
.recipe { background: var(--row); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.recipe-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.recipe h3 { margin: 0; font-size: 1.12rem; }
.recipe .riddle { font-style: italic; color: var(--text); margin: .45rem 0 .35rem; }
.recipe p { margin: .3rem 0; font-size: .93rem; }
.combo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1rem; margin: .8rem 0 1.2rem; }
.combo-card { background: var(--row); border: 1px solid var(--line); border-top: 3px solid var(--shape); border-radius: var(--radius); padding: .85rem 1rem .7rem; display: flex; flex-direction: column; gap: .45rem; }
.combo-card header h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.combo-card header .pill { margin: 0 0 0 .3rem; }
.combo-card .promise { margin: 0; font-style: italic; color: var(--blue); }
.combo-card .costs { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: 0; font-size: .86rem; }
.combo-card .costs div { display: contents; }
.combo-card .costs dt { color: var(--muted); }
.combo-card .costs dd { margin: 0; }
.combo-card table.effects { font-size: .86rem; margin: 0; }
.combo-card table.effects th { font-size: .84rem; color: var(--muted); font-weight: 500; }
.combo-card table.effects th, .combo-card table.effects td { padding: .3rem .35rem; }
.combo-card footer { margin-top: auto; }
@media (max-width: 700px) {
  .combo-cards { grid-template-columns: 1fr; }
  main .combo-card table.effects { display: table; overflow: visible; }
}
ul.tips li { margin: .4rem 0; }

/* ------------------------------------------------------------------------------------------------------------------------------
   The front page (Pages/Index.cshtml, 2026-11-04): a piece of the world with two windows open on it, the way the game looks.
   ------------------------------------------------------------------------------------------------------------------------------ */
main.home { padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2)) 1rem; max-width: none; }
.win-t { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--gold); margin: 0; padding: .95rem 1.4rem .65rem; border-bottom: 1px solid var(--line); }
.win-b { padding: 1.05rem 1.4rem 1.3rem; }
.home section { margin-top: 1.6rem; }
.home .note, .cw .note { color: var(--muted); font-size: .88rem; line-height: 1.35; margin: 0; }

.stage { position: relative; border: 1px solid var(--rim); border-top: 0; overflow: hidden; background: #222; }
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,15,9,.55), rgba(21,15,9,0) 42%, rgba(21,15,9,0) 60%, rgba(21,15,9,.5)); }
.stage-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 500px); justify-content: space-between; align-items: start; gap: 1.6rem; padding: 1.6rem; }
.hello { padding: 1.5rem 1.7rem 1.5rem; }
.hello .greet { font-family: var(--serif); font-weight: 700; font-size: .92rem; color: var(--gold); margin: 0 0 .7rem; }
.hello h1 { font-weight: 800; font-size: clamp(2rem, 3.3vw, 2.75rem); line-height: 1.12; color: var(--text); margin: 0; }
.hello h1 span { display: block; }
.hello .say { margin: .9rem 0 0; font-size: 1.1rem; line-height: 1.42; }
.play { display: block; margin-top: 1.25rem; text-align: center; font-family: var(--serif); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: #241505; padding: .85rem 1rem .95rem; border-radius: 6px; background: linear-gradient(#f4d584, #d9a94a); border: 1px solid #f7e2a8; box-shadow: 0 0 0 2px #241505, 0 0 0 3px var(--rim), 0 7px 22px rgba(0,0,0,.5); }
.play:hover { color: #241505; background: linear-gradient(#fbe3a0, #e3b65a); text-decoration: none; }
.promise-line { margin: 1.05rem 0 0; font-size: 1.02rem; line-height: 1.35; }
.promise-line strong { color: var(--gold); font-weight: 700; }
.hello .under { margin: .5rem 0 0; font-size: .86rem; line-height: 1.38; color: var(--muted); }

/* The combine window: the real thing in the game is J. Driven by the guide's example cards (data-combine). */
.cw-tabs { display: flex; gap: 3px; padding: .5rem .5rem 0; }
.cw-tabs span { flex: 1; text-align: center; font-family: var(--serif); font-weight: 700; font-size: .68rem; color: var(--muted); padding: .28rem .1rem; background: var(--row); border: 1px solid var(--line); border-radius: 7px 7px 0 0; }
.cw-tabs .on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.cw-b { padding: .6rem .85rem .85rem; }
.cw-b > .note { margin-bottom: .55rem; }
.cw-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.cw-pick { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .1rem .5rem; background: var(--row); border: 1px solid var(--row-line); border-radius: 6px; font-weight: 700; font-size: .88rem; line-height: 1.2; cursor: pointer; min-height: 36px; }
.cw-pick input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--rim); border-radius: 50%; background: var(--bg-2); display: grid; place-content: center; cursor: pointer; }
.cw-pick input:checked { border-radius: 3px; }
.cw-pick input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--gold); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.cw-pick:has(input:checked) { background: #232a15; border-color: #4d5c28; }
.cw-out { margin-top: .6rem; min-height: 7rem; font-size: .95rem; line-height: 1.32; }
.cw-sum { color: var(--muted); }
.cw-name { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--text); margin: .1rem 0; }
.cw-prom { color: var(--blue); }
.cw-fx { color: var(--green); }
.cw-do { display: flex; align-items: center; gap: .7rem; margin-top: .5rem; }
.cw-do button { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--text); padding: .35rem 1.4rem; min-height: 40px; background: var(--row); border: 1px solid var(--rim); border-radius: 7px; cursor: pointer; }
.cw-do button:hover:not([disabled]) { background: var(--panel-2); color: var(--gold); }
.cw-do button[disabled] { opacity: .5; cursor: default; }
.cw-made { color: var(--gold); font-weight: 700; font-size: .95rem; line-height: 1.25; }
.cw .fine { margin-top: .55rem; }
@media (prefers-reduced-motion: no-preference) { .cw-made:not(:empty) { animation: flare 1.1s ease-out; } @keyframes flare { 0% { opacity: 0; text-shadow: 0 0 18px #ffd36b; } 40% { opacity: 1; } 100% { text-shadow: none; } } }

/* What goes in, what comes out: small words on the left, the made skill large. */
.makes { list-style: none; margin: 0; padding: 0; }
.makes li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 15rem) minmax(0, 1fr); gap: .1rem 1.2rem; align-items: baseline; padding: .55rem .9rem; background: var(--row); border: 1px solid var(--row-line); border-radius: 6px; margin-top: 5px; }
.makes li:first-child { margin-top: 0; }
.makes .in { color: var(--muted); font-size: .92rem; line-height: 1.3; }
.makes .res { font-family: var(--serif); font-weight: 800; font-size: 1.12rem; line-height: 1.2; color: var(--text); }
.makes .does { line-height: 1.3; }
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 2rem; margin-top: 1rem; }
.how h3 { margin: 0 0 .15rem; color: var(--gold); }
.how p { margin: 0; max-width: 40em; line-height: 1.42; }
.how-link { margin: .9rem 0 0; }

/* What you do: rows like the skill list, each with its picture. */
.do { display: grid; grid-template-columns: 210px 1fr; gap: .3rem 1.2rem; align-items: center; padding: .55rem .7rem .55rem .55rem; background: var(--row); border: 1px solid var(--row-line); border-radius: 7px; margin-top: 6px; }
.do:first-child { margin-top: 0; }
.do img { display: block; width: 210px; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--rim); border-radius: 3px; }
.do h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.do p { max-width: 44em; line-height: 1.42; margin: .1rem 0 0; }

.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.6rem; margin-top: 1.6rem; }
.two.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.two > section { margin-top: 0; }
.two .card { background: none; border: 0; padding: 0; }
.two .card h3 { margin: 0 0 .5rem; }
.poem { font-style: italic; line-height: 1.4; }
.poem p { margin: 0 0 .75rem; }
.from { margin: .4rem 0 0; font-size: .92rem; }

/* Where you go */
.lands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.lands figure { margin: 0; display: flex; flex-direction: column; background: var(--row); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.lands .big { grid-column: span 2; grid-row: span 2; }
.lands .long { grid-column: span 2; }
.lands img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.lands .big img { aspect-ratio: auto; flex: 1 1 0; height: 0; min-height: 0; }
.lands .long img { aspect-ratio: 21/9; }
.lands figcaption { padding: .35rem .65rem .5rem; line-height: 1.25; font-size: .88rem; color: var(--muted); }
.lands figcaption b { display: block; font-family: var(--serif); font-weight: 700; font-size: .92rem; color: var(--text); }

/* Coming soon: housing and pets, in pictures from a test build. */
.soon-tag { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .05rem .5rem; font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--blue); border: 1px solid #2e4f6b; border-radius: 999px; background: var(--row); }
.soon { display: flex; flex-direction: column; }
.soon .win-b { flex: 1; display: flex; flex-direction: column; }
.soon p { margin: 0 0 .8rem; max-width: 40em; line-height: 1.42; }
.soon-pics { display: grid; gap: .5rem; margin: 0; }
.soon-pics.house { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.soon-pics.house figure:first-child { grid-column: span 2; }
.soon-pics.house figure:first-child img { aspect-ratio: 2.15/1; }
.soon-pics.house img { aspect-ratio: 16/9; }
.soon-pics.pet { flex: 1; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); min-height: 19rem; }
.soon-pics.pet figure { position: relative; }
.soon-pics.pet img { position: absolute; inset: 0; height: 100%; }
.soon-pics.pet figure:last-child img { object-fit: contain; background: var(--row); }
.soon-pics figure { margin: 0; }
.soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.soon-list li { padding: .5rem .8rem; background: var(--row); border-radius: 3px; line-height: 1.35; }
.soon-list b { display: block; font-family: var(--serif); font-weight: 700; color: var(--text); }
.soon-pics img { display: block; width: 100%; object-fit: cover; border: 1px solid var(--rim); border-radius: 3px; }

/* Lists of news and of the forum's boards */
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: .5rem .75rem; background: var(--row); border: 1px solid var(--row-line); border-radius: 7px; margin-top: 5px; line-height: 1.3; }
.log li:first-child { margin-top: 0; }
.log a { font-weight: 700; color: var(--text); }
.log a:hover { color: var(--gold); }
.log .when { display: block; color: var(--muted); font-size: .86rem; }
.more { margin: .7rem 0 0; font-size: .92rem; }
.free { margin-top: 1.6rem; padding: 1.1rem 1.4rem; text-align: center; font-size: 1.1rem; }
.free strong { font-family: var(--serif); font-weight: 800; font-size: 1.2rem; color: var(--gold); margin-right: 1rem; }

/* The footer's promise */
.foot-promise { width: 100%; color: var(--text); }
.foot-promise strong { color: var(--gold); }

@media (max-width: 1180px) {
  .stage-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .lands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .makes li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .makes .does { grid-column: 2; }
}
@media (max-width: 900px) {
  main.home { padding: 0 0 1rem; }
  .stage { overflow: visible; border: 0; background: none; }
  .stage > img { position: static; display: block; height: auto; aspect-ratio: 16/7; border-bottom: 1px solid var(--rim); }
  .stage::after { display: none; }
  .stage-in { display: block; padding: 0 12px; margin-top: -1.4rem; }
  .cw { margin-top: 1rem; }
  .home > section, .home > .two, .home > .free { margin-left: 12px; margin-right: 12px; }
  .two, .two.even { grid-template-columns: minmax(0, 1fr); }
  .how { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .do { grid-template-columns: minmax(0, 1fr); padding: .5rem; }
  .do img { width: 100%; }
}
@media (max-width: 560px) {
  .top > .brand { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.15; font-size: .95rem; }
  .hello { padding: 1.1rem 1rem 1.15rem; }
  .hello h1 { font-size: clamp(1.45rem, 7.4vw, 2rem); }
  .hello .say { font-size: 1.02rem; }
  .play { font-size: 1.45rem; }
  .win-t { padding: .75rem .9rem .5rem; font-size: 1.15rem; }
  .win-b { padding: .75rem .75rem 1rem; }
  .free { padding: .95rem .9rem; font-size: 1rem; }
  .free strong { display: block; margin: 0 0 .15rem; }
  .makes li { display: block; padding: .5rem .7rem; }
  .makes .res { display: block; margin: .05rem 0; }
  .lands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .lands .big, .lands .long { grid-column: span 2; grid-row: auto; }
  .lands .big img, .lands .long img { aspect-ratio: 16/9; flex: none; height: auto; }
  .cw-pick { font-size: .84rem; padding: .1rem .35rem; gap: .3rem; }
  .soon-pics.pet { grid-template-columns: minmax(0, 1fr); }
  .soon-pics.pet figure { position: static; }
  .soon-pics.pet img { position: static; height: auto; }
}