/* Evertrail Idle client · pages, docks and screens */

/* ------------------------------------------------------------- Regions */
.region-top { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(var(--pad) * -1) var(--gap); min-width: 0; }
.region-top > .topbar { height: 100%; margin: 0; }
.region-left { grid-column: 1; grid-row: 2; min-height: 0; display: flex; }
.region-left > .skillbar { flex: 1; min-width: 0; }
.region-right { grid-column: 3; grid-row: 2; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.region-chat { min-height: 0; }
.topbar, .skillbar, .rightcol { grid-column: auto; grid-row: auto; }
.stage.is-place { overflow: hidden; }

/* ----------------------------------------------------------- Page frame */
.page { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--gap) + .55rem); padding-top: .15rem; animation: page-in .35s var(--ease-out); }
@keyframes page-in { from { opacity: 0; translate: 0 .4rem; } }
.page-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem); align-items: start; gap: var(--gap); min-height: 0; padding-top: .6rem; }
.page-columns > .panel { max-height: 100%; }
.res-card.is-future { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 5rem; background: rgba(4, 7, 12, .72); border-color: rgba(255, 255, 255, .04); box-shadow: inset 0 0 1.4rem rgba(0, 0, 0, .55); color: #ff8a5c; font-weight: 650; font-size: .92rem; text-shadow: 0 1px 0 #000; }
.res-card.is-future .ia-glyph { width: .95rem; height: .95rem; opacity: .85; }

/* Hero header */
.hero { display: flex; align-items: center; gap: 1.1rem; padding: .85rem 1.2rem; min-height: 6rem; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 140% at 0% 50%, color-mix(in srgb, var(--skill) 22%, transparent), transparent 70%); }
.hero > * { position: relative; z-index: 1; }
.hero .medal .ring { inset: -.28rem; }
.hero-copy { flex: 1 1 auto; min-width: 0; }
.hero-copy .t-caps { color: color-mix(in srgb, var(--skill) 70%, #fff); }
.hero-copy h1 { margin: .05rem 0 .1rem; font-size: 2rem; line-height: 1.05; color: var(--text-1); text-shadow: 0 .12rem .4rem rgba(0, 0, 0, .7); }
.hero-copy p { margin: 0; color: var(--text-2); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-progress { display: flex; align-items: center; gap: .9rem; flex: 0 1 25rem; min-width: 16rem; }
.hero-progress.is-planned { justify-content: flex-end; }
.hero-level { display: grid; justify-items: center; min-width: 3.4rem; padding: .3rem .5rem; border-radius: .5rem; background: rgba(0, 0, 0, .35); border: 1px solid color-mix(in srgb, var(--skill) 45%, transparent); }
.hero-level b { font-size: 1.9rem; line-height: 1; color: var(--text-1); text-shadow: 0 0 .8rem color-mix(in srgb, var(--skill) 55%, transparent); }
.hero-level small { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
/* The bar column sizes itself from its widest line, so without `minmax(0, …)` the "Next at 60: …" line pushed the
   XP bar and its reading straight out through the panel's right edge (director, 20 September 2026). Every line
   in it shortens instead: the bar to the room it has, the two lines under it to an ellipsis. */
.hero-bar { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.hero-bar > * { min-width: 0; max-width: 100%; }
.hero-bar small { color: var(--text-3); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-bar small b { color: var(--text-1); }
/* "Next at 30: Coal at Cinder Cut · Heavy Pick Head" (public/unlocks.mjs): a static line under the XP bar. */
.hero-next { display: flex; align-items: flex-start; gap: .3rem; color: var(--text-2); }
.hero-next .ia-glyph { flex: none; width: .85rem; height: .85rem; margin-top: .12rem; color: var(--gold-2); }
.hero-next b { color: var(--gold-1); }
.hero-next span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-running { position: absolute; left: 50%; bottom: .45rem; translate: -50% 0; display: flex; align-items: center; gap: .6rem; padding: .25rem .3rem .25rem .6rem; border-radius: 2rem; background: rgba(4, 8, 14, .78); border: 1px solid rgba(88, 214, 127, .35); font-size: .78rem; color: var(--text-2); white-space: nowrap; z-index: 2; }
.hero:has(.hero-running) { padding-bottom: 2.6rem; }
.hero-stats { display: flex; gap: .6rem; }

/* Fletching's one Arrow shafts card: the log is chosen inside its panel, not by eleven cards in the list
   (director, 20 September 2026). A log above your level or one you do not hold stays visible and says which. */
.log-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .35rem; }
.log-opt { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .35rem .5rem; text-align: left; border-radius: .45rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .28); color: var(--text-2); cursor: pointer; }
.log-opt:hover { border-color: color-mix(in srgb, var(--skill) 45%, transparent); color: var(--text-1); }
.log-opt > img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.log-copy { display: grid; gap: .05rem; min-width: 0; }
.log-copy strong { font-size: .82rem; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-copy small { font-size: .7rem; color: var(--text-3); }
.log-note { display: flex; align-items: center; gap: .25rem; font-size: .66rem; color: var(--text-3); white-space: nowrap; }
.log-note .ia-glyph { width: .75rem; height: .75rem; color: var(--ember); }
.log-opt.is-on { border-color: color-mix(in srgb, var(--skill) 65%, transparent); background: color-mix(in srgb, var(--skill) 16%, rgba(0, 0, 0, .28)); }
.log-opt.is-out { opacity: .5; }
.log-opt.is-out .log-note { color: var(--ember); }

/* Choice panel */
.choose { display: flex; flex-direction: column; min-height: 0; padding-top: 1.35rem; }
.choose-tools { display: flex; justify-content: center; padding: 0 1rem .5rem; }
/* Recipe tabs (Smithing's shape, now every bench's): one family per tab, wrapping onto as many rows as it takes,
   a set line naming the Bible family, and a second strip of the same control for a family that is itself a ladder
   — the leathers, the staffs, the robes, the jewellery. Never clipped: on a phone the strip wraps, it does not cut. */
.choose-tools.is-recipes { flex-direction: column; align-items: center; gap: .35rem; }
.choose-tools.is-recipes .segmented { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.segmented.is-tiers { opacity: .92; }
.segmented.is-tiers button { font-size: .72rem; }
/* Fletching's arrow shafts belong to every wood, so the one card stands above the family strip. */
.pinned-recipe { padding: 0 1rem .5rem; }
.pinned-recipe .res-card { width: 100%; }
.segmented button.is-locked { opacity: .55; }
.segmented button .tab-level { margin-left: .3rem; font-size: .62rem; font-weight: 700; color: inherit; opacity: .8; }
.tab-set { margin: 0; font-size: .74rem; color: var(--text-3); letter-spacing: .02em; text-align: center; }
.tab-set b { color: var(--gold-1); font-weight: 700; }
.compare-line { margin: .2rem 0 0; font-size: .78rem; }
.card-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); align-content: start; gap: .55rem; padding: .35rem .8rem .9rem; }
.res-card {
  --tone: color-mix(in srgb, var(--skill) 45%, transparent);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
  min-height: 5rem; padding: .55rem .75rem .55rem .55rem; text-align: left;
  border-radius: .55rem; border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(34, 50, 76, .75), rgba(14, 22, 36, .85));
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .15s, transform .15s var(--ease-out), box-shadow .15s, background .2s;
}
button.res-card:hover { border-color: var(--tone); transform: translateY(-1px); box-shadow: 0 .45rem 1rem rgba(0, 0, 0, .45), 0 0 1rem color-mix(in srgb, var(--skill) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.res-card.is-selected { border-color: color-mix(in srgb, var(--emerald) 70%, #fff 10%); background: linear-gradient(180deg, rgba(40, 110, 62, .72), rgba(16, 52, 30, .88)); box-shadow: 0 0 0 1px rgba(88, 214, 127, .45), 0 .45rem 1.2rem rgba(0, 0, 0, .45), inset 0 0 1.4rem rgba(88, 214, 127, .18); }
.res-card.is-running::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--emerald); box-shadow: 0 0 .9rem rgba(88, 214, 127, .35); pointer-events: none; }
.res-card.is-planned { background: linear-gradient(180deg, rgba(20, 26, 38, .75), rgba(8, 12, 19, .85)); }
.res-card.is-planned .card-copy strong { color: var(--text-2); }
.res-card.is-locked .card-well { filter: grayscale(.75) brightness(.65); }
.card-well { width: 3.9rem; height: 3.9rem; flex: none; border-radius: .5rem; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--skill) 30%, #1c2a42) 0%, #0b121d 75%); box-shadow: inset 0 .12rem .4rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.card-art { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .7)); }
.card-art.is-emblem { display: grid; place-items: center; }
.card-art.is-emblem .ia-emblem { width: 72%; height: 72%; opacity: .75; }
.card-copy { display: grid; gap: .22rem; justify-items: start; min-width: 0; }
.card-copy strong { font: 600 1.05rem/1.1 var(--font-display); color: var(--text-1); }
.card-copy small { color: var(--text-3); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card-costs { display: flex; gap: .55rem; }
.card-costs span { display: inline-flex; align-items: center; gap: .15rem; font: 700 .78rem var(--font-num); color: var(--text-2); }
.card-costs img { width: 1.15rem; height: 1.15rem; object-fit: contain; }
/* A recipe card's burn chance at your level: ember while it burns often, green once it cannot burn. */
.card-costs .card-burn { font-weight: 600; white-space: nowrap; }
.card-costs .card-burn.t-bad { color: var(--ember); }
.card-costs .card-burn.t-good { color: var(--emerald); }
.card-level { display: grid; justify-items: center; align-self: start; font-size: 1.15rem; font-weight: 700; color: var(--text-1); line-height: 1; }
.card-level small { font: 700 .52rem var(--font-ui); letter-spacing: .12em; color: var(--text-3); margin-bottom: .1rem; }
.res-card.is-locked .card-level { color: var(--ember); }

/* Detail panel */
.detail { display: flex; flex-direction: column; min-height: 0; padding-top: 1.1rem; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .35rem .9rem .8rem; display: grid; align-content: start; gap: .7rem; }
.detail-hero { position: relative; border-radius: .55rem; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 .3rem .8rem rgba(0, 0, 0, .4); }
.detail-shot { display: block; width: 100%; aspect-ratio: 16 / 7.6; object-fit: cover; }
/* A hero with no world photograph of its own falls back to the client's plate, framed on its
   quiet upper half so the portrait in front of it keeps its edges. The (sheet, cell) pair the
   page still writes on this element no longer picks an image. */
.detail-shot.is-painted { position: relative; display: grid; place-items: center; background: url(/assets/evertrail-backdrop.webp) 50% 38% / cover no-repeat; }
.detail-shot.is-painted::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, transparent 20%, rgba(4, 8, 14, .6) 90%); }
.detail-node { position: relative; height: 82%; width: auto; max-width: 60%; object-fit: contain; filter: drop-shadow(0 .5rem .8rem rgba(0, 0, 0, .75)); }
span.detail-node { display: grid; place-items: center; aspect-ratio: 1; }
span.detail-node .ia-emblem { width: 100%; height: 100%; }
.detail-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; padding: 1.4rem .75rem .55rem; background: linear-gradient(180deg, transparent, rgba(4, 8, 14, .88)); }
.detail-caption .t-caps { color: var(--text-1); text-shadow: 0 1px 2px #000; }
.detail-summary { margin: 0; color: var(--text-2); font-size: .85rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.fact { padding: .45rem .6rem; border-radius: .45rem; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .05); min-width: 0; }
.fact small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: .2rem; }
.fact > div { font-size: .82rem; color: var(--text-1); display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.fact .ia-glyph { width: .9rem; height: .9rem; }
.inline-item { display: inline-flex; align-items: center; gap: .3rem; }
.inline-item img, .chip img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.inline-item.is-planned { color: var(--text-3); }
.rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: .45rem; }
.rate { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: .45rem; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--skill) 12%, rgba(0, 0, 0, .3)), rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--skill) 22%, transparent); }
.rate b { font-size: 1.15rem; color: var(--text-1); }
.rate b img { width: 1.35rem; height: 1.35rem; object-fit: contain; vertical-align: -.25rem; margin-right: .3rem; }
.rate small { font-size: .66rem; color: var(--text-3); }
.discoveries { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.discoveries .t-caps { width: 100%; color: var(--text-3); font-size: .6rem; }
.detail-action { display: grid; gap: .55rem; padding: .75rem .9rem .9rem; border-top: 1px solid var(--edge-soft); background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent); border-radius: 0 0 var(--radius) var(--radius); }
.detail-action .btn-lg { font-size: 1.1rem; }
.action-note { margin: 0; display: flex; gap: .4rem; align-items: flex-start; color: var(--text-3); font-size: .74rem; }
.action-note .ia-glyph { width: .9rem; height: .9rem; margin-top: .1rem; color: var(--gold-3); }
.action-status { display: flex; align-items: center; gap: .55rem; font-size: .78rem; }
.action-buttons { display: flex; gap: .5rem; }
.action-buttons .btn { flex: 1; }
.action-bar .bar { --fill: var(--emerald); }
/* The bench's foot (views/pages.mjs benchFooter): the queue, the amount and the two ways on. Nothing here moves on its
   own; the one running row wears its skill's colour, still. */
.detail-action.is-bench { grid-template-columns: minmax(0, 1fr); }
.detail-action.is-bench .action-buttons .btn { min-width: 0; padding-inline: .8rem; }
.detail-action.is-bench .action-buttons .bench-add { flex: 0 0 auto; }
.detail-action.is-bench .action-buttons .bench-start { min-width: 0; }
.bench-start .btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-note.is-blocked { color: var(--ember); }
.action-note.is-blocked .ia-glyph { color: var(--ember); }
.bench-amount .segmented { flex: 1; }
.bench-amount .bench-custom { flex: none; width: 5.6rem; }
.bench-makes { margin: -.25rem 0 0; font-size: .74rem; color: var(--text-3); }
.bench-makes b { color: var(--text-1); font-weight: 600; }
.bench-queue { display: grid; gap: .35rem; padding: .5rem .55rem .55rem; border-radius: .5rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .25); }
.bq-head { display: flex; align-items: center; gap: .55rem; min-height: 1.4rem; }
.bq-head .t-caps { font-size: .6rem; color: var(--text-3); }
.bq-count { font-size: .72rem; color: var(--text-3); }
.bq-clear { margin-left: auto; padding: .1rem .35rem; border-radius: .3rem; font-size: .74rem; color: var(--gold-2); }
.bq-clear:hover:not(:disabled) { color: var(--gold-1); background: rgba(242, 198, 106, .1); }
.bq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 11.2rem; overflow-y: auto; }
.bq-row { display: flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .2rem .3rem .2rem .2rem; border-radius: .4rem; background: rgba(255, 255, 255, .03); }
.bq-row.is-running { background: color-mix(in srgb, var(--skill) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill) 38%, transparent); }
.bq-mark { flex: none; display: grid; place-items: center; width: 1.25rem; font-size: .72rem; color: var(--text-3); }
.bq-row.is-running .bq-mark { color: var(--skill); }
.bq-mark .ia-glyph { width: .8rem; height: .8rem; }
.bq-row .item-img { flex: none; width: 1.8rem; height: 1.8rem; object-fit: contain; filter: drop-shadow(0 .1rem .15rem rgba(0, 0, 0, .6)); }
.bq-copy { flex: 1; display: grid; min-width: 0; line-height: 1.2; }
.bq-copy strong { overflow: hidden; font-size: .82rem; font-weight: 600; color: var(--text-1); white-space: nowrap; text-overflow: ellipsis; }
.bq-copy small { overflow: hidden; font-size: .7rem; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.bq-copy small b { font-weight: 600; color: var(--text-2); }
.bq-acts { flex: none; display: flex; gap: .1rem; }
.bq-acts .btn-icon.btn-sm { width: 1.7rem; min-height: 1.7rem; }
.bq-acts .bq-skip { min-height: 1.7rem; padding: .15rem .6rem; }
.bq-hint { margin: 0; font-size: .7rem; color: var(--text-3); }
.callout { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .45rem; border: 1px solid rgba(242, 198, 106, .35); background: rgba(77, 54, 22, .35); font-size: .8rem; color: var(--text-2); }
.callout > span { flex: 1; }
.callout .ia-glyph { color: var(--gold-2); }

/* Craft detail */
.craft-product { display: flex; align-items: center; gap: .9rem; }
.well.is-large { width: 5.2rem; flex: none; }
.craft-product h2 { margin: 0 0 .15rem; font-size: 1.35rem; color: var(--text-1); }
.craft-product p { margin: 0 0 .35rem; color: var(--text-2); font-size: .82rem; }
.craft-flow { display: grid; gap: .5rem; }
.craft-table { border-radius: .5rem; overflow: hidden; border: 1px solid rgba(96, 142, 210, .35); background: rgba(10, 18, 32, .6); }
.craft-table.is-output { border-color: rgba(242, 198, 106, .4); }
.craft-table header, .craft-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 3rem 4.5rem; align-items: center; gap: .5rem; padding: .35rem .6rem; }
.craft-table header { grid-template-columns: minmax(0, 1fr) 3rem 4.5rem; padding-left: .6rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: rgba(255, 255, 255, .03); }
.craft-row { border-top: 1px solid rgba(255, 255, 255, .05); font-size: .85rem; }
.craft-row img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.craft-row b { text-align: right; }
.craft-arrow { display: flex; justify-content: center; color: var(--gold-2); margin: -.2rem 0; }
.craft-arrow .ia-glyph { width: 1.1rem; height: 1.1rem; margin: 0 -.3rem; rotate: 90deg; }
.craft-grants { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(47, 154, 82, .12); font-size: .82rem; }
.craft-grants .ia-emblem { width: 1.2rem; height: 1.2rem; }
.craft-grants .t-muted { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; }

/* Artisan recipes: the product's rarity colours its card well and title */
.card-qty { font: 700 .72rem var(--font-num); color: var(--gold-2); }
.card-well.rar-well.r-rare { box-shadow: inset 0 .12rem .4rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(93, 180, 255, .38); }
.card-well.rar-well.r-epic { box-shadow: inset 0 .12rem .4rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(195, 140, 255, .5), 0 0 .6rem rgba(195, 140, 255, .28); }
.card-well.rar-well.r-legendary { box-shadow: inset 0 .12rem .4rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 179, 71, .6), 0 0 .85rem rgba(255, 179, 71, .38); }
.rar-text.r-uncommon { color: var(--rar-uncommon); }
.rar-text.r-crafted { color: var(--rar-crafted); }
.rar-text.r-rare { color: var(--rar-rare); }
.rar-text.r-epic { color: var(--rar-epic); text-shadow: 0 0 .7rem rgba(195, 140, 255, .45), 0 .1rem .3rem #000; }
.rar-text.r-legendary { color: var(--rar-legendary); text-shadow: 0 0 .8rem rgba(255, 179, 71, .55), 0 .1rem .3rem #000; }
.rar-text.r-mythic { color: var(--rar-mythic); text-shadow: 0 0 .85rem rgba(255, 95, 109, .6), 0 .1rem .3rem #000; }

/* Potions */
.potion-belt { display: grid; gap: .45rem; padding: 0 .8rem .55rem; }
.pb-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
.pb-slot { display: grid; justify-items: center; gap: .05rem; padding: .35rem .2rem .3rem; border-radius: .45rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); min-width: 0; }
.pb-slot img, .pb-slot .ia-emblem { width: 1.8rem; height: 1.8rem; object-fit: contain; opacity: .4; filter: grayscale(.7); }
.pb-slot.is-active { border-color: color-mix(in srgb, var(--skill) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--skill) 18%, rgba(0, 0, 0, .3)), rgba(0, 0, 0, .35)); box-shadow: 0 0 .6rem color-mix(in srgb, var(--skill) 25%, transparent); }
.pb-slot.is-active img { opacity: 1; filter: drop-shadow(0 .1rem .15rem rgba(0, 0, 0, .7)); }
.pb-slot small { font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pb-slot b { font-size: .78rem; color: var(--text-1); }
.pb-owned { display: flex; flex-wrap: wrap; gap: .35rem; }
.pb-drink { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem .18rem .25rem; border-radius: 2rem; border: 1px solid rgba(224, 113, 184, .4); background: rgba(70, 24, 56, .5); color: var(--text-2); font-size: .74rem; transition: border-color .15s, color .15s; }
.pb-drink img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.pb-drink b { color: #ffd0ee; }
.pb-drink:hover { border-color: #e071b8; color: var(--text-1); }
.pb-drink.r-epic { border-color: rgba(195, 140, 255, .55); } .pb-drink.r-legendary { border-color: rgba(255, 179, 71, .6); box-shadow: 0 0 .5rem rgba(255, 179, 71, .25); }
.potion-callout img { width: 2rem; height: 2rem; object-fit: contain; flex: none; }
.potion-callout.is-active { border-color: color-mix(in srgb, var(--skill) 50%, transparent); background: color-mix(in srgb, var(--skill) 14%, rgba(0, 0, 0, .35)); }
.potion-callout.is-empty { border-color: rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .25); }
.potion-callout.is-empty .ia-emblem { width: 1.6rem; height: 1.6rem; flex: none; }

/* Farming: the plots as small dioramas on their grids, the farm's places (docs/FARMING_AND_HERBLORE.md) */
.farm-tools { flex-direction: column; align-items: center; gap: .5rem; }
.farm-tabs { flex-wrap: wrap; justify-content: center; }
.farm-actions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.farm-badge { margin-left: .35rem; min-width: 1.1rem; padding: .05rem .3rem; border-radius: 1rem; font-size: .66rem; line-height: 1; color: #062010; background: var(--emerald); }
.farm-body { padding: 0 .9rem .9rem; overflow-y: auto; min-height: 0; }
.plot-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: .65rem; }
.plot-grid.is-herb { max-width: 36rem; margin: 0 auto; }
.plot-grid.is-aura { max-width: 24rem; margin: 0 auto; }
.plot-tile {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border-radius: .65rem; text-align: left;
  background: radial-gradient(ellipse at 50% 58%, rgba(92, 120, 70, .38), rgba(20, 30, 24, .1) 62%), linear-gradient(180deg, rgba(30, 44, 62, .75), rgba(10, 16, 26, .9));
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 .25rem .7rem rgba(0, 0, 0, .35);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.plot-tile:hover { border-color: rgba(242, 198, 106, .45); transform: translateY(-1px); }
.plot-tile.is-selected { border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold-3), 0 .3rem .9rem rgba(0, 0, 0, .45), 0 0 1rem rgba(242, 198, 106, .18); }
.plot-tile .plot-art { position: absolute; inset: 0 0 12% 0; width: 100%; height: 88%; object-fit: contain; filter: drop-shadow(0 .3rem .4rem rgba(0, 0, 0, .45)); pointer-events: none; }
.plot-tile.is-locked .plot-art { filter: grayscale(.85) brightness(.55); }
.plot-tile .plot-label { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: 1.4rem .6rem .4rem; background: linear-gradient(180deg, transparent, rgba(6, 10, 18, .88) 55%); }
.plot-tile .plot-label strong { font: 600 .92rem/1.1 var(--font-display); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plot-tile .plot-label small { font-size: .68rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plot-tile .plot-status { position: absolute; top: .45rem; right: .45rem; left: .45rem; display: flex; justify-content: flex-end; }
.plot-tile .plot-status .chip { font-size: .66rem; padding: .12rem .45rem; backdrop-filter: blur(4px); }
.plot-tile .plot-status .grow { display: grid; grid-template-columns: minmax(3rem, 6rem) auto; align-items: center; gap: .35rem; padding: .18rem .45rem; border-radius: 1rem; background: rgba(6, 10, 18, .72); }
.plot-tile .plot-status .grow small { font-size: .66rem; color: var(--text-2); }
.plot-tile.is-ready { border-color: rgba(88, 214, 127, .6); animation: plot-ready 2.4s ease-in-out infinite; }
.plot-tile.is-withered .plot-label strong { color: #e0b08a; }
@keyframes plot-ready { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 1px rgba(88, 214, 127, .35); } 50% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 1px rgba(88, 214, 127, .8), 0 0 1.1rem rgba(88, 214, 127, .35); } }
.reduce-motion .plot-tile.is-ready { animation: none; box-shadow: 0 0 0 1px rgba(88, 214, 127, .7); }
.plot-cross { position: absolute; top: .45rem; left: .45rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(40, 20, 60, .8); border: 1px solid rgba(200, 160, 255, .6); color: #e0c8ff; }
.plot-cross .ia-glyph { width: .85rem; height: .85rem; color: inherit; }
.plot-hero { position: relative; display: grid; place-items: center; border-radius: .6rem; overflow: hidden; height: clamp(11rem, 27vh, 16rem);
  background: radial-gradient(ellipse at 50% 60%, rgba(92, 120, 70, .4), transparent 65%), linear-gradient(180deg, rgba(30, 44, 62, .7), rgba(8, 13, 22, .9)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.plot-hero img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 .4rem .5rem rgba(0, 0, 0, .5)); }
.plot-hero.is-locked img { filter: grayscale(.85) brightness(.6); }
.plot-copy h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.plot-copy p { margin: 0; color: var(--text-2); font-size: .85rem; }
.grow.is-wide { display: grid; gap: .3rem; }
.grow.is-wide small { justify-self: end; font-size: .8rem; color: var(--text-2); }
.plant-compost { display: grid; gap: .35rem; }
.plant-compost .t-caps, .batch-pick .t-caps, .tier-head .t-caps { font-size: .6rem; color: var(--text-3); }
.compost-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.compost-opt { display: grid; justify-items: center; gap: .1rem; padding: .4rem .25rem; border-radius: .45rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); color: var(--text-2); font-size: .72rem; text-align: center; }
.compost-opt img, .compost-opt .ia-emblem { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.compost-opt small { font-size: .6rem; color: var(--text-3); }
.compost-opt.is-on { border-color: var(--emerald); background: linear-gradient(180deg, rgba(88, 214, 127, .18), rgba(0, 0, 0, .3)); color: var(--text-1); }
.compost-opt:disabled { opacity: .45; }
.twine-note { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .74rem; }
.twine-note img { width: 1.2rem; height: 1.2rem; }
.seed-list { display: grid; gap: .4rem; }
.seed-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: .5rem; background: linear-gradient(180deg, rgba(34, 50, 76, .45), rgba(12, 19, 32, .6)); border: 1px solid rgba(255, 255, 255, .05); }
.seed-row .well { width: 3rem; }
.seed-row.is-locked { opacity: .62; }
.seed-copy { display: grid; gap: .1rem; min-width: 0; }
.seed-copy strong { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; font: 600 .98rem/1.1 var(--font-display); color: var(--text-1); }
.seed-copy small { font-size: .72rem; color: var(--text-3); }
.journal-stars { display: inline-flex; gap: .15rem; margin-left: .4rem; }
.journal-stars i { width: .42rem; height: .42rem; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.journal-stars i.is-on { background: var(--gold-2); box-shadow: 0 0 .3rem rgba(242, 198, 106, .6); }
.cross-callout { border-color: rgba(200, 160, 255, .45); background: rgba(50, 26, 70, .35); }
.cross-callout img { width: 1.7rem; height: 1.7rem; }
.bin-state { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .6rem .7rem; margin-bottom: .6rem; border-radius: .55rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); }
.bin-state .bin-art { width: 5.4rem; height: 4rem; object-fit: contain; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .5)); }
.plot-hero.is-short { height: clamp(8rem, 18vh, 11rem); }
.bench-hero { position: relative; display: grid; place-items: center; height: clamp(8rem, 19vh, 11.5rem); border-radius: .6rem; overflow: hidden; background: radial-gradient(ellipse at 50% 62%, rgba(150, 110, 60, .28), transparent 65%), linear-gradient(180deg, rgba(30, 44, 62, .7), rgba(8, 13, 22, .9)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bench-hero > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .4rem .5rem rgba(0, 0, 0, .5)); }
.bench-potion { position: absolute; left: 50%; top: 22%; translate: -140% 0; width: 3.2rem; height: 3.2rem; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .7)); }
.bench-potion img { width: 100%; height: 100%; object-fit: contain; }
.bin-state strong { display: block; font: 600 1rem var(--font-display); color: var(--text-1); }
.bin-state small { font-size: .74rem; color: var(--text-3); }
.bin-state .grow { display: grid; grid-template-columns: 6rem auto; align-items: center; gap: .4rem; }
.bin-produce { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .5rem .18rem .25rem; border-radius: 2rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .3); color: var(--text-2); font-size: .74rem; }
.chip-btn img { width: 1.4rem; height: 1.4rem; object-fit: contain; }
.chip-btn.is-on { border-color: var(--emerald); color: var(--text-1); background: rgba(88, 214, 127, .15); }
.batch-pick { display: flex; align-items: center; gap: .6rem; }
.order-list { display: grid; gap: .6rem; }
.order-card { display: grid; gap: .5rem; padding: .7rem .8rem; border-radius: .6rem; background: linear-gradient(180deg, rgba(34, 50, 76, .5), rgba(12, 19, 32, .7)); border: 1px solid rgba(255, 255, 255, .07); }
.order-card.is-ready { border-color: rgba(88, 214, 127, .55); }
.order-card.is-empty { display: flex; align-items: center; gap: .6rem; color: var(--text-3); font-size: .8rem; }
.order-card.is-empty .ia-emblem { width: 2rem; height: 2rem; opacity: .6; }
.order-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: center; }
.order-head .t-caps { font-size: .6rem; color: var(--text-3); }
.order-head strong { display: flex; align-items: center; font: 600 1.05rem var(--font-display); color: var(--text-1); }
.order-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem; margin-top: .25rem; }
.order-progress small { font-size: .74rem; color: var(--text-2); }
.order-source { display: block; margin-top: .2rem; font-size: .72rem; color: var(--text-3); }
.order-reward { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; font-size: .8rem; color: var(--text-2); }
.order-reward .ia-emblem { width: 1.2rem; height: 1.2rem; }
.order-actions { display: flex; gap: .45rem; }
.order-actions .btn { flex: 1; }
.order-note { display: flex; gap: .35rem; align-items: center; font-size: .76rem; }
.journal-list { display: grid; gap: .6rem; }
/* The journal's kinds as tabs, so a grower can go straight to the trees instead of scrolling past the allotments
   (director, 20 September 2026). The same segmented control as the farm's own tabs above them. */
.journal-tabs { justify-self: center; flex-wrap: wrap; justify-content: center; }
.journal-group { display: grid; gap: .3rem; }
.journal-group h3 { margin: 0 0 .1rem; font: 600 .8rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.journal-row { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) minmax(7rem, 11rem); align-items: center; gap: .55rem; padding: .3rem .5rem; border-radius: .45rem; background: rgba(0, 0, 0, .22); }
.journal-row > img { width: 1.9rem; height: 1.9rem; object-fit: contain; }
.journal-row strong { display: flex; align-items: center; font-size: .85rem; color: var(--text-1); }
.journal-row small { font-size: .7rem; color: var(--text-3); }
.journal-row.is-locked { opacity: .5; }
.journal-progress { display: grid; gap: .15rem; }
.journal-progress small { justify-self: end; }
.find-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.find-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .35rem .45rem; border-radius: .5rem; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); }
.find-card.is-found { border-color: rgba(200, 160, 255, .45); background: rgba(50, 26, 70, .3); }
.find-card strong { display: block; font-size: .8rem; color: var(--text-1); }
.find-card small { display: block; font-size: .68rem; color: var(--text-3); }
.find-unknown { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; font: 700 1.3rem var(--font-display); color: var(--text-4); }

.fact .fact-note { font-size: .7rem; letter-spacing: 0; text-transform: none; }
.potion-callout { flex-wrap: wrap; }
.potion-callout > img { width: 2rem; height: 2rem; object-fit: contain; flex: none; }
.potion-callout > .pc-copy { display: grid; gap: .05rem; flex: 1 1 13rem; min-width: 0; }
.pc-copy b { color: var(--text-1); }
.pc-copy small { font-size: .72rem; }
.potion-callout > .pc-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem; margin-left: auto; }

/* Herblore: recipe tiers, auto re-use and the eleven slots */
.tier-badge { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.05rem; margin-left: .35rem; padding: 0 .25rem; border-radius: .3rem; font-size: .6rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; color: #1d1204; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); }
.tier-block { display: grid; gap: .5rem; padding: .6rem .7rem; border-radius: .55rem; background: rgba(0, 0, 0, .28); border: 1px solid color-mix(in srgb, var(--skill) 35%, transparent); }
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tier-pips { display: flex; gap: .25rem; }
.tier-pip { display: grid; place-items: center; min-width: 1.7rem; height: 1.25rem; border-radius: .3rem; font-size: .66rem; font-weight: 800; color: var(--text-4); background: rgba(255, 255, 255, .06); }
.tier-pip.is-on { color: #1d1204; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); }
.tier-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.tier-progress small { font-size: .74rem; color: var(--text-2); }
.tier-max { margin: 0; font-size: .8rem; }
.tier-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
.tier-lines > div { display: grid; gap: .1rem; padding: .35rem .5rem; border-radius: .4rem; background: rgba(255, 255, 255, .03); }
.tier-lines .t-caps { font-size: .58rem; color: var(--text-3); }
.tier-lines p { margin: 0; font-size: .78rem; color: var(--text-1); }
.tier-lines .is-next p { color: var(--gold-1); }
.auto-toggle { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .5rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .3); color: var(--text-3); font-size: .7rem; font-weight: 700; }
.auto-toggle .ia-glyph { width: .8rem; height: .8rem; color: inherit; }
.auto-toggle.is-on { border-color: var(--emerald); color: var(--emerald); background: rgba(88, 214, 127, .12); }
.pb-slots { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
.pb-slot { position: relative; }
.pb-slot .tier-badge { position: absolute; top: .2rem; left: .2rem; margin: 0; }
.pb-auto { position: absolute; top: .2rem; right: .2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; font-size: .52rem; font-weight: 800; color: var(--text-4); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.pb-auto.is-on { color: #062010; background: var(--emerald); border-color: var(--emerald); }

/* Combat detail */
.detail-node.is-enemy { height: 92%; }
.versus { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: .5rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); }
.versus > div { display: grid; }
.versus small { font-size: .62rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.versus b { font-size: 1.5rem; line-height: 1; }
.versus .is-enemy { text-align: right; }
.versus .is-enemy b { color: #ffb4a8; }
.loot { display: grid; gap: .35rem; }
.loot .t-caps { color: var(--text-3); font-size: .6rem; }
.loot-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.loot-row .chip { font-size: .74rem; padding: .18rem .5rem; }
.loot-row .chip .ia-emblem { width: 1rem; height: 1rem; }
.chip.r-drop { color: #e6d2ff; border-color: rgba(195, 140, 255, .45); background: rgba(70, 40, 110, .45); }

/* ------------------------------------------------------------- World view */
.world-panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.world-bar { display: flex; align-items: center; gap: .65rem; padding: .45rem .6rem; border-bottom: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(24, 36, 57, .95), rgba(10, 16, 27, .95)); position: relative; z-index: 2; }
.world-bar .spacer { flex: 1; }
/* The bar names the place two chips to the left, so its people chip only says how many (HUD pass, 20 Sept 2026). */
.world-bar .chip-people .people-at { display: none; }
.world-title { display: flex; align-items: center; gap: .55rem; }
.world-title .medal { --size: 2.1rem; }
.world-title strong { display: block; font-size: 1.15rem; line-height: 1.05; }
.world-title small { color: var(--text-3); font-size: .7rem; }
/* Presence (docs/MULTIPLAYER.md): who else works a card's activity, and who is in the world on screen. */
.card-people { position: absolute; right: .5rem; bottom: .45rem; display: inline-flex; align-items: center; gap: .2rem; padding: .08rem .4rem .08rem .32rem; border-radius: 1rem; font: 700 .7rem/1.25 var(--font-num); color: var(--text-2); background: rgba(4, 8, 14, .62); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.card-people .ia-glyph { width: .8rem; height: .8rem; color: var(--text-3); }
.card-people.has-online { color: #c9f5d6; border-color: rgba(88, 214, 127, .42); }
.card-people.has-online .ia-glyph, .chip-people.has-online .ia-glyph { color: var(--emerald); }
.chip-people { font-weight: 650; letter-spacing: .02em; }
.chip-people .ia-glyph { width: .85rem; height: .85rem; }
.chip-people b { color: var(--text-1); }
.tip-people-head { --tip-rar: var(--gold-3); }
.tip-people-icon { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .35); border: 1px solid var(--edge); color: var(--gold-2); }
.tip-people-icon .ia-glyph { width: 1.2rem; height: 1.2rem; }
.tip-people { margin: 0; padding: 0; list-style: none; display: grid; gap: .22rem; }
.tip-crowd { display: block; margin: 0 0 .4rem; color: var(--text-2); }
.tip-people li { display: flex; align-items: center; gap: .45rem; color: var(--text-3); }
.tip-people li::before { content: ""; flex: none; width: .42rem; height: .42rem; border-radius: 50%; background: var(--text-4); }
.tip-people li.is-online { color: var(--text-1); }
.tip-people li.is-online::before { background: var(--emerald); box-shadow: 0 0 .35rem var(--emerald); }
.world-host { position: relative; flex: 1; min-height: 0; background: #0a1220; }
.world-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.world-host::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 3rem rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .6); }

/* ------------------------------------------------------------------ Docks */
.dock.is-flash { animation: dock-flash .9s ease-out; }
@keyframes dock-flash { 30% { box-shadow: var(--shadow-panel), 0 0 0 2px var(--gold-2), 0 0 1.4rem rgba(242, 198, 106, .5); } }

/* Equipment stage */
/* The gear panel: fighting numbers, ten slots in two rows, ammunition, then the loadout (no figure). */
.gear-body { display: grid; gap: .5rem; padding: .5rem .55rem .55rem; align-content: start; overflow-y: auto; }
.gear-stats { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.gear-power { display: grid; font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--text-1); }
.gear-power small { font: 700 .55rem var(--font-ui); color: var(--gold-2); text-transform: uppercase; letter-spacing: .1em; margin-top: .15rem; }
.gear-stats .gear-hp { position: static; }
/* Nine wells on ten half-columns: five armour pieces on the first row, the weapon and the three accessories centred on the second. */
.gear-slots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .35rem; }
.gear-slots .eq-slot { width: auto; aspect-ratio: 1; grid-column: span 2; }
.gear-slots .eq-slot:nth-child(6) { grid-column: 2 / span 2; }
.gear-body .eq-ammo { margin-top: 0; }
.gear-divide { display: flex; align-items: center; gap: .4rem; padding-top: .5rem; border-top: 1px solid rgba(242, 198, 106, .18); font-size: .8rem; }
.gear-divide .ia-emblem { width: 1.1rem; height: 1.1rem; }
.gear-divide .meta { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--text-2); }
.gear-body .eq-quiver { margin-top: 0; }
.eq-body { padding: .45rem .5rem .5rem; }
.eq-stage { position: relative; display: grid; grid-template-columns: 3.05rem minmax(0, 1fr) 3.05rem; gap: .4rem; height: 16.6rem; }
.eq-col { display: flex; flex-direction: column; justify-content: space-between; z-index: 2; }
.eq-slot { width: 3.05rem; }
.well.is-ghost > img { width: 70%; height: 70%; filter: grayscale(1) brightness(.62) contrast(.9); opacity: .38; }
.well.is-ghost:hover > img { opacity: .6; }
.well.is-blocked { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 .3rem, transparent .3rem .6rem), radial-gradient(#101826, #070b12); }
.slot-lock { position: absolute; width: .85rem; height: .85rem; right: .15rem; bottom: .15rem; color: var(--ember); }
.eq-figure { position: relative; min-width: 0; border-radius: .6rem; overflow: hidden; background: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--gold-2) 16%, #2a3d5c) 0%, #121d30 55%, #080d17 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -2rem 2.5rem rgba(0, 0, 0, .35); }
.eq-light { position: absolute; left: 50%; top: -12%; width: 70%; height: 80%; translate: -50% 0; background: radial-gradient(closest-side, rgba(255, 236, 190, .22), transparent); pointer-events: none; }
.eq-platform { position: absolute; left: 50%; bottom: 6%; width: 72%; height: 12%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 198, 106, .28), rgba(242, 198, 106, .06) 60%, transparent); box-shadow: 0 0 0 1px rgba(242, 198, 106, .18); }
.eq-figure .q-host { position: absolute; inset: 0; min-height: 0; }
.eq-figure .q-host canvas { display: block; width: 100%; height: 100%; }
.eq-power { position: absolute; left: .55rem; top: .45rem; z-index: 2; display: grid; font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--text-1); text-shadow: 0 1px 2px #000; pointer-events: auto; }
.eq-power small { font: 700 .55rem var(--font-ui); color: var(--gold-2); text-transform: uppercase; letter-spacing: .1em; margin-top: .15rem; }
.eq-angles { position: absolute; right: .4rem; bottom: .4rem; z-index: 2; background: rgba(4, 8, 14, .6); }
.eq-angles button { padding: .18rem .5rem; font-size: .68rem; }
/* The quiver row under the equipment stage */
.eq-quiver { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; width: 100%; margin-top: .4rem; padding: .22rem .55rem .22rem .22rem; border-radius: .55rem; background: rgba(0, 0, 0, .28); border: 1px solid var(--edge-soft); color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.eq-quiver:hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, .05); }
.eq-quiver:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.eq-quiver.is-active { border-color: color-mix(in srgb, var(--emerald) 45%, transparent); background: linear-gradient(90deg, rgba(23, 80, 44, .38), rgba(0, 0, 0, .28)); }
.eq-quiver.is-prompt { border-color: color-mix(in srgb, var(--gold-2) 55%, transparent); background: linear-gradient(90deg, rgba(242, 198, 106, .14), rgba(0, 0, 0, .28)); }
.eq-quiver-well { width: 2.35rem; pointer-events: none; }
.eq-quiver-well > img { width: 82%; height: 82%; object-fit: contain; }
.eq-quiver-well.is-ghost > img { filter: grayscale(1) brightness(.62); opacity: .4; }
.eq-quiver-copy { display: grid; gap: .08rem; min-width: 0; }
.eq-quiver-copy strong { font: 600 .82rem/1.15 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-quiver-copy small { font-size: .64rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-quiver.is-active .eq-quiver-copy small { color: #b9f5c8; }
.eq-quiver.is-prompt .eq-quiver-copy small { color: var(--gold-2); }
.eq-quiver-count { font-size: 1.05rem; color: var(--text-1); }
.eq-quiver:not(.is-active) .eq-quiver-count { color: var(--text-3); }
.eq-quiver-cue { width: .9rem; height: .9rem; color: var(--text-3); }
.eq-quiver:hover .eq-quiver-cue, .eq-quiver.is-prompt .eq-quiver-cue { color: var(--gold-2); }
/* The quiver (arrows) and the rune pouch (runes) side by side under the stage */
.eq-ammo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-top: .4rem; }
.eq-ammo .eq-quiver { margin-top: 0; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .35rem; padding: .18rem .4rem .18rem .18rem; }
.eq-ammo .eq-quiver-well { width: 2rem; }
.eq-ammo .eq-quiver-copy strong { font-size: .74rem; }
/* The quiver's and the pouch's second line carries the one reason a shot or a cast cannot happen, so it wraps to a
   second line instead of cutting off mid-word (wave C: "Hold a staff or a wan…"). */
.eq-ammo .eq-quiver-copy small { font-size: .6rem; line-height: 1.2; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.eq-ammo .eq-quiver-count { font-size: .86rem; }
/* The rune pouch (views/docks.mjs pouchSlot, public/spells.mjs): the chosen spell's icon, casting in violet, dry in ember. */
.eq-spell.is-active { border-color: color-mix(in srgb, #a58bff 55%, transparent); background: linear-gradient(90deg, rgba(70, 48, 130, .42), rgba(0, 0, 0, .28)); }
.eq-spell.is-active .eq-quiver-copy small { color: #dcd0ff; }
.eq-spell.is-dry { border-color: color-mix(in srgb, var(--ember) 60%, transparent); background: linear-gradient(90deg, rgba(120, 60, 20, .35), rgba(0, 0, 0, .28)); }
.eq-spell.is-dry .eq-quiver-copy small, .eq-spell.is-dry .eq-quiver-count { color: #ffb36e; }
.eq-quiver-well { position: relative; }
.eq-sigil { position: absolute; right: -.2rem; bottom: -.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgba(8, 12, 19, .95); box-shadow: 0 0 0 1px var(--edge-strong); display: grid; place-items: center; }
.eq-sigil img { width: 85%; height: 85%; object-fit: contain; }
/* A spell's icon (views/parts.mjs spellIcon): the element's emblem in a frame tinted by the element, ringed by the tier. */
.spell-icon { --el: #a58bff; position: relative; display: grid; place-items: center; grid-auto-flow: column; width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--el) 42%, #0b121d), #0b121d 78%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--el) 55%, transparent), inset 0 .15rem .4rem rgba(0, 0, 0, .6); }
.spell-icon .ia-emblem { width: 68%; height: 68%; filter: drop-shadow(0 .1rem .15rem rgba(0, 0, 0, .7)); }
.spell-icon.is-apex .ia-emblem { width: 46%; height: 46%; margin: 0 -4%; }
.spell-icon.is-apex .ia-emblem:last-child { filter: drop-shadow(0 0 .3rem var(--el2, var(--el))); }
.spell-icon.tier-3, .spell-icon.tier-4 { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--el) 70%, #fff 10%), 0 0 .45rem color-mix(in srgb, var(--el) 45%, transparent); }
.spell-icon.tier-5, .spell-icon.tier-6 { box-shadow: inset 0 0 0 2px var(--gold-2), inset 0 0 0 4px color-mix(in srgb, var(--el) 60%, transparent), 0 0 .7rem color-mix(in srgb, var(--el) 55%, transparent); }
.eq-quiver-well .spell-icon { width: 100%; height: 100%; }
/* The spellbook tab (views/combat.mjs): spell cards, the attunement row, the detail and the weak foes. */
.card-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.card-chips .chip .ia-emblem { width: .8rem; height: .8rem; }
/* "Left to find" and the bestiary medal on a fight card (loot-dopamine §7.8): the monster's own finds as grade
   gems, hollow until the Discovery Log has them, and the kill count with the medal it has earned. Static. */
.card-finds { display: flex; flex-wrap: wrap; align-items: center; gap: .22rem; margin-top: .1rem; }
.find-gem { width: .45rem; height: .45rem; rotate: 45deg; border-radius: .06rem; border: 1px solid color-mix(in srgb, var(--tip-rar, var(--rar-common)) 60%, transparent); }
.find-gem.is-found { background: linear-gradient(135deg, #fff 0%, var(--tip-rar, var(--rar-common)) 45%, color-mix(in srgb, var(--tip-rar, var(--rar-common)) 55%, #000) 100%); box-shadow: 0 0 .28rem color-mix(in srgb, var(--tip-rar, var(--rar-common)) 65%, transparent); }
.find-gem.r-uncommon { --tip-rar: var(--rar-uncommon); }
.find-gem.r-rare { --tip-rar: var(--rar-rare); }
.find-gem.r-epic { --tip-rar: var(--rar-epic); }
.find-gem.r-legendary { --tip-rar: var(--rar-legendary); }
.find-gem.r-mythic { --tip-rar: var(--rar-mythic); }
.card-medal { margin-left: .2rem; padding: 0 .3rem; border-radius: .3rem; border: 1px solid var(--edge); color: var(--text-3); font: 600 .62rem/1.5 var(--font-ui); }
.card-medal b { font-size: .66rem; color: var(--text-2); }
.card-medal.is-bronze { border-color: rgba(205, 127, 50, .5); color: #d79a63; }
.card-medal.is-silver { border-color: rgba(200, 210, 225, .5); color: #cdd6e4; }
.card-medal.is-gold { border-color: rgba(242, 198, 106, .55); color: var(--gold-1); }
.card-medal.is-dawn { border-color: rgba(255, 179, 71, .6); color: var(--rar-legendary); }
.spell-card .card-well { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--el) 28%, #1c2a42) 0%, #0b121d 75%); }
.spell-card .card-well .spell-icon { width: 82%; height: 82%; }
.spell-card.is-locked .spell-icon { filter: grayscale(.7) brightness(.7); }
.spell-card .chip .ia-glyph { width: .8rem; height: .8rem; }
.sigil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .55rem; padding: 0 .1rem .3rem; }
.sigil-cell { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .4rem .55rem; border-radius: .55rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .28); }
.sigil-cell .well { width: 3.2rem; }
.sigil-cell.is-attuned { border-color: color-mix(in srgb, var(--el) 60%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--el) 16%, transparent), rgba(0, 0, 0, .28)); }
.sigil-cell.is-ghost .well { filter: grayscale(1) brightness(.6); opacity: .5; }
.sigil-copy { display: grid; gap: .1rem; min-width: 0; }
.sigil-copy strong { font: 600 .9rem/1.1 var(--font-display); color: var(--text-1); }
.sigil-copy small { font-size: .68rem; color: var(--text-3); }
.spell-shot { display: grid; place-items: center; }
.spell-node { width: 38%; height: auto; max-width: 9rem; filter: drop-shadow(0 .5rem .8rem rgba(0, 0, 0, .75)); }
.spell-detail .vs-swords .ia-emblem { opacity: 1; }
.spell-detail .drop-row.is-paid > span small { color: var(--text-3); }
.weak-foes { display: grid; gap: .3rem; }
.weak-foes .t-caps { color: var(--text-3); font-size: .6rem; }
.weak-foe-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.weak-foe-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem .12rem .15rem; border-radius: 1rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); font-size: .7rem; color: var(--text-2); }
.weak-foe { width: 1.3rem; height: 1.3rem; border-radius: 50%; object-fit: cover; }
/* The spell row of a fight's detail; the world bar's own Spell cell lives with the rest of the bar below. */
.spell-row { display: grid; gap: .3rem; }
.spell-row .t-caps { color: var(--text-3); font-size: .6rem; }
.spell-slot .eq-quiver-well { width: 2.35rem; height: 2.35rem; }
.spell-slot .eq-quiver-count small { display: block; font-size: .58rem; color: var(--text-3); }
/* A spell's tooltip (views/overlays.mjs spellTooltip). */
.tip-spell .tip-head .spell-icon { width: 2.6rem; height: 2.6rem; flex: none; }
.q-host[data-status="loading"]::after { content: "Preparing your adventurer…"; position: absolute; inset: 45% 0 auto; text-align: center; font-size: .72rem; color: var(--gold-3); }

/* Loadout: the food, the potion slots and the supplies spent on their own, all drawn from the bank */
.lo-body { display: grid; gap: .5rem; padding: .5rem .55rem .5rem; align-content: start; }
.lo-body .eq-quiver { margin-top: 0; }
.lo-section { display: grid; gap: .3rem; }
.lo-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.lo-head small { font-size: .6rem; color: var(--text-3); }
.lo-potions, .lo-supplies { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .25rem; }
.lo-potion { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: .15rem; border-radius: .4rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.lo-potion img, .lo-potion .ia-emblem { width: 70%; height: 70%; object-fit: contain; }
.lo-potion .ia-emblem { opacity: .32; filter: grayscale(.85); }
.lo-potion:hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, .05); }
.lo-potion:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.lo-potion.is-active { border-color: color-mix(in srgb, var(--skill) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--skill) 20%, rgba(0, 0, 0, .3)), rgba(0, 0, 0, .35)); box-shadow: 0 0 .5rem color-mix(in srgb, var(--skill) 22%, transparent); }
.lo-potion.is-active img { filter: drop-shadow(0 .1rem .15rem rgba(0, 0, 0, .7)); }
.lo-potion b { position: absolute; right: .14rem; bottom: .04rem; font-size: .6rem; color: var(--text-1); text-shadow: 0 1px 0 #000, 0 0 .25rem #000; }
.lo-supplies .well { border-radius: .4rem; }
.lo-supplies .qty { font-size: .7rem; }
.lo-foot { display: grid; gap: .35rem; }
.lo-over { margin: 0; display: flex; align-items: center; gap: .35rem; font-size: .7rem; color: #ffb4a8; }
.dock-head .meta .ia-emblem { width: .95rem; height: .95rem; margin-right: .2rem; vertical-align: -.15rem; }
.dock-head .btn-icon.is-alert { color: var(--gold-1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 60%, transparent) inset; }
.dock-head .btn-icon .ia-emblem { width: 1.15rem; height: 1.15rem; }
.dock-head .btn-icon:first-of-type { margin-left: .3rem; }
.well.is-fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { 0% { box-shadow: 0 0 0 2px var(--gold-1), 0 0 1rem var(--gold-2); } }
.is-dragging { opacity: .35; }
.is-drop { outline: 2px dashed var(--gold-2); outline-offset: 2px; }
.dock.is-drop, .bank-grid.is-drop { outline-offset: -4px; }

/* ------------------------------------------------------------------- Bank */
.bank-page { grid-template-rows: auto minmax(0, 1fr); gap: var(--gap); }
.bank-header { display: flex; align-items: center; gap: 1.2rem; padding: .75rem 1rem; flex-wrap: wrap; }
.bank-title { display: flex; align-items: center; gap: .75rem; }
.bank-title h1 { margin: 0; font-size: 1.9rem; line-height: 1; }
.bank-title .t-caps { color: var(--gold-3); }
.bank-stats { display: flex; gap: .55rem; }
.bstat { display: grid; gap: .2rem; min-width: 8rem; padding: .4rem .7rem; border-radius: .45rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .05); }
.bstat small { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.bstat b { display: flex; align-items: center; gap: .3rem; font-size: 1.1rem; color: var(--text-1); }
.bstat b span { color: var(--text-3); font-size: .8rem; }
.bstat .ia-emblem { width: 1.15rem; height: 1.15rem; }
.bank-tools { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.bank-tools .search { width: 15rem; }
.bank-body { display: grid; grid-template-columns: minmax(0, 1fr) 20.5rem; gap: var(--gap); min-height: 0; padding-top: .55rem; }
.bank-vault { display: flex; flex-direction: column; min-height: 0; }
.bank-tabs { display: flex; align-items: flex-end; gap: .25rem; padding: .55rem .6rem 0; border-bottom: 1px solid var(--edge); overflow-x: auto; overflow-y: hidden; }
.bank-tab { position: relative; display: flex; align-items: center; gap: .4rem; flex: none; height: 2.6rem; padding: 0 .7rem 0 .4rem; border-radius: .45rem .45rem 0 0; border: 1px solid transparent; border-bottom: 0; background: rgba(0, 0, 0, .25); color: var(--text-3); transition: background .15s, color .15s; }
.bank-tab:hover { color: var(--text-1); background: rgba(242, 198, 106, .08); }
.bank-tab.is-active { color: var(--gold-1); background: linear-gradient(180deg, rgba(242, 198, 106, .2), rgba(14, 22, 36, .95)); border-color: var(--edge); margin-bottom: -1px; height: calc(2.6rem + 1px); }
.bank-tab.is-active::before { content: ""; position: absolute; left: .4rem; right: .4rem; top: 0; height: 2px; background: var(--gold-2); box-shadow: 0 0 .5rem var(--gold-2); }
.tab-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: .35rem; background: rgba(0, 0, 0, .35); }
.tab-icon img, .tab-icon .ia-emblem { width: 1.45rem; height: 1.45rem; object-fit: contain; }
.tab-icon .ia-glyph { color: var(--text-3); }
.tab-name { font-weight: 650; font-size: .82rem; max-width: 7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-tab small { font: 700 .66rem var(--font-num); color: var(--text-4); }
.bank-tab.is-add { padding: 0 .75rem; color: var(--gold-2); }
.bank-tab.has-match { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--emerald); background: linear-gradient(180deg, rgba(88, 214, 127, .16), rgba(0, 0, 0, .25)); }
.bank-tab.has-match small { color: var(--emerald); }
.tab-rename { width: 6.5rem; height: 1.6rem; padding: 0 .35rem; border-radius: .3rem; border: 1px solid var(--gold-3); background: rgba(0, 0, 0, .6); color: var(--text-1); outline: none; font-size: .8rem; }
.bank-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .55rem .7rem .2rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 1rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .25); color: var(--text-3); font-size: .74rem; font-weight: 650; transition: color .15s, border-color .15s, background .15s; }
.filter-chip small { font: 700 .66rem var(--font-num); color: var(--text-4); }
.filter-chip:hover { color: var(--text-1); }
.filter-chip.is-active { color: #20150a; border-color: var(--gold-1); background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); }
.filter-chip.is-active small { color: #4d3616; }
.filter-toggle { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-size: .74rem; color: var(--text-3); }
.bank-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .45rem .7rem .7rem; }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.35rem, 1fr)); gap: .35rem; align-content: start; min-height: 100%; border-radius: .4rem; }
.bank-grid .empty { grid-column: 1 / -1; padding-top: 3rem; }
.bank-grid .qty { font-size: .86rem; right: .3rem; bottom: .15rem; }
.bank-hints { display: flex; flex-wrap: wrap; gap: .9rem; padding: .45rem .8rem .55rem; border-top: 1px solid var(--edge-soft); font-size: .72rem; color: var(--text-3); background: rgba(0, 0, 0, .2); border-radius: 0 0 var(--radius) var(--radius); }
.bank-hints span { display: inline-flex; align-items: center; gap: .3rem; }
.bank-inspect { display: flex; flex-direction: column; min-height: 0; padding-top: 1.1rem; }
.inspect-scroll { flex: 1; overflow-y: auto; padding: .5rem .85rem .9rem; display: grid; align-content: start; gap: .7rem; }
.inspect-head { display: flex; align-items: center; gap: .8rem; }
.inspect-head h2 { margin: 0 0 .15rem; font: 600 1.3rem/1.1 var(--font-display); overflow-wrap: anywhere; }
/* The Selected Item panel is the item card on a phone, where nothing can be hovered: it carries the same blocks,
   inside the panel's own padding rather than a tooltip's. */
.bank-inspect.item-card .tip-body { padding: 0; gap: 0; }
.bank-inspect.item-card .tip-block:first-child { padding-top: .45rem; border-top: 1px solid var(--edge-soft); }
.inspect-head p { margin: 0 0 .3rem; color: var(--text-3); font-size: .78rem; }
.inspect-stat { font-size: 1rem; font-weight: 700; color: var(--text-1); }
.owned-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0; }
.owned-grid div { padding: .35rem .5rem; border-radius: .35rem; background: rgba(0, 0, 0, .3); }
.owned-grid dt { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.owned-grid dd { margin: 0; display: flex; align-items: center; gap: .25rem; font-size: 1rem; font-weight: 700; color: var(--text-1); }
.owned-grid dd .ia-emblem { width: 1rem; height: 1rem; }
.inspect-uses { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.inspect-uses .t-caps, .inspect-section .t-caps { width: 100%; color: var(--text-3); font-size: .6rem; }
.inspect-section { display: grid; gap: .45rem; padding-top: .5rem; border-top: 1px solid var(--edge-soft); }
.qty-choice { width: 100%; }
.sell-quote { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .55rem; border-radius: .35rem; background: rgba(0, 0, 0, .3); font-size: .8rem; color: var(--text-3); }
.inspect-note { margin: 0; color: var(--text-3); font-size: .74rem; line-height: 1.45; }
.sell-quote span, .sell-quote b { display: inline-flex; align-items: center; gap: .2rem; }
.sell-quote b { font-size: 1.05rem; color: var(--gold-1); }
.sell-quote .ia-emblem { width: 1rem; height: 1rem; }
.qty-choice button { flex: 1; justify-content: center; }

/* ------------------------------------------------------------ Marketplace */
.market-page .hero, .journal-page .hero { min-height: 5.4rem; }
.market-columns, .journal-columns { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--gap); min-height: 0; padding-top: .55rem; }
.market-board { display: flex; flex-direction: column; min-height: 0; padding-top: 1.2rem; }
.market-list { flex: 1; overflow-y: auto; padding: .4rem .8rem .8rem; display: grid; align-content: start; gap: .4rem; }
.listing { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .45rem .6rem; border-radius: .5rem; background: linear-gradient(180deg, rgba(34, 50, 76, .55), rgba(14, 22, 36, .7)); border: 1px solid rgba(255, 255, 255, .06); }
.listing-copy strong { display: block; font: 600 1rem var(--font-display); }
.listing-copy small { color: var(--text-3); font-size: .74rem; }
.listing-price { display: grid; justify-items: end; font-size: 1.05rem; font-weight: 700; color: var(--gold-1); }
.listing-price .ia-emblem { width: 1rem; height: 1rem; display: none; }
.listing-price small { font-size: .66rem; color: var(--text-3); font-weight: 500; }
.market-side, .journal-side { display: grid; align-content: start; gap: calc(var(--gap) + .7rem); min-height: 0; overflow-y: auto; padding-top: .7rem; }
.market-side .panel, .journal-side .panel { padding-top: 1rem; }
.stall-form, .npc, .away-copy { display: grid; gap: .55rem; padding: .5rem .85rem .85rem; }
.stall-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.stall-note { margin: 0; display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--text-3); }
.stall-note .ia-glyph { color: var(--gold-3); }
.stall-note .btn { margin-left: auto; flex: none; }
.stall-note b { color: var(--text-1); }
.npc-row { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.npc-row strong { display: block; font-size: .85rem; }
.npc-row small { font-size: .7rem; color: var(--text-3); }
.npc-row .btn .ia-emblem { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------- Journal */
.chronicle { display: flex; flex-direction: column; min-height: 0; padding-top: 1.2rem; }
.journal-tools { display: flex; justify-content: center; padding: .1rem .8rem .2rem; }
/* Highlights (views/places.mjs highlightEntry): a find with its well and place, a milestone level with its medal and unlocks. */
.highlight { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin: .3rem 0; padding: .35rem .6rem .35rem .45rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .22); }
.highlight .well { width: 2.6rem; }
.highlight.is-find { border-color: color-mix(in srgb, var(--tip-rar, var(--rar-common)) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--tip-rar, var(--rar-common)) 12%, transparent), rgba(0, 0, 0, .22) 60%); }
.highlight.is-level { border-color: color-mix(in srgb, var(--skill) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 14%, transparent), rgba(0, 0, 0, .22) 60%); }
.highlight.is-mastery, .highlight.is-crowned { border-color: var(--gold-2); }
.highlight-copy { display: grid; gap: .08rem; min-width: 0; }
.highlight-copy b { font: 600 .92rem/1.15 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.highlight-copy b .t-num { color: var(--skill, var(--gold-1)); }
.highlight-copy small { font-size: .72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.highlight time { font-size: .72rem; color: var(--text-4); }
.highlight .welcome-new { position: static; align-self: center; margin-right: .2rem; }
.highlight-tag { display: inline-block; margin-left: .3rem; padding: .05rem .4rem; border-radius: 1rem; font: 800 .58rem/1.5 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #1f1406; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); vertical-align: middle; }
/* The Discovery Log (views/places.mjs discoveryLog): a region a section, a "?" silhouette until found. Static cards. */
.disco-head { display: grid; gap: .45rem; padding: .1rem .6rem .5rem; }
.disco-head p { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--text-2); }
.disco-head p .t-num { color: var(--gold-1); }
/* The Journal's two log pages are one ledger seen from two sides: each says what it is for and links to the other. */
.log-purpose { font: 700 .95rem/1.2 var(--font-display); color: var(--text-1); }
.log-purpose .t-num { color: var(--gold-1); font-size: 1.1rem; }
.log-purpose b { font-weight: 700; }
.disco-head p b { color: var(--text-1); }
.log-link { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: .4rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .22); }
.log-link > span { flex: 1; min-width: 0; color: var(--text-3); }
.log-link .ia-glyph { flex: none; width: .9rem; height: .9rem; color: var(--gold-3); }
.log-link .btn { flex: none; }
/* A found entry's grade, as a static gem on the card's edge — the same clip-path language as the wells. */
.coll-gem { width: .55rem; height: .55rem; rotate: 45deg; border-radius: .08rem; background: linear-gradient(135deg, #fff 0%, var(--tip-rar, var(--rar-common)) 45%, color-mix(in srgb, var(--tip-rar, var(--rar-common)) 55%, #000) 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 .3rem var(--tip-rar, var(--rar-common)); }
.coll-gem.r-uncommon { --tip-rar: var(--rar-uncommon); }
.coll-gem.r-rare { --tip-rar: var(--rar-rare); }
.coll-gem.r-epic { --tip-rar: var(--rar-epic); }
.coll-gem.r-legendary { --tip-rar: var(--rar-legendary); }
.coll-gem.r-mythic { --tip-rar: var(--rar-mythic); }
.disco-filters { flex-wrap: wrap; justify-self: start; }
/* The bestiary medals under a zone's collection page: a count and its medal, static, never a rate. */
.coll-medals { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 .2rem; }
.coll-medal { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .45rem; border-radius: .4rem; border: 1px solid var(--edge); background: rgba(0, 0, 0, .25); color: var(--text-2); font-size: .74rem; }
.coll-medal .t-num { color: var(--text-1); }
.coll-medal.is-bronze { border-color: rgba(205, 127, 50, .5); color: #d79a63; }
.coll-medal.is-silver { border-color: rgba(200, 210, 225, .5); color: #cdd6e4; }
.coll-medal.is-gold { border-color: rgba(242, 198, 106, .55); color: var(--gold-1); }
.coll-medal.is-dawn { border-color: rgba(255, 179, 71, .6); color: var(--rar-legendary); }
.disco-region { margin: .1rem 0 .6rem; }
.disco-region h3 { display: flex; align-items: center; gap: .4rem; }
.disco-region h3 .t-num { color: var(--gold-1); }
.disco-region h3 .ia-glyph { width: .9rem; height: .9rem; color: var(--gold-1); }
.disco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .35rem; }
.disco-card { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .35rem .45rem .35rem .4rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .24); }
.disco-card > .well { width: 2.6rem; }
.disco-unknown { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .5rem; font: 700 1.35rem var(--font-display); color: var(--text-4); background: rgba(0, 0, 0, .42); border: 1px dashed rgba(255, 255, 255, .16); }
.disco-card.is-found { border-color: color-mix(in srgb, var(--tip-rar, var(--rar-common)) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--tip-rar, var(--rar-common)) 12%, transparent), rgba(0, 0, 0, .24) 60%); }
.disco-copy { display: grid; gap: .08rem; min-width: 0; }
.disco-copy strong { font: 600 .86rem/1.15 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disco-card:not(.is-found) .disco-copy strong { color: var(--text-2); }
.disco-copy small { font-size: .67rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A flex row cannot put an ellipsis on a bare text node, so the perk carries its own span to cut. */
.disco-perk { display: inline-flex !important; align-items: center; gap: .25rem; min-width: 0; }
.disco-perk > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disco-perk .ia-glyph { flex: none; width: .66rem; height: .66rem; }
.disco-perk.is-on { color: #b9f5c8; }
.disco-when { color: var(--text-4); }
.disco-side { display: grid; gap: .3rem; justify-items: center; }
.disco-side > .ia-emblem { width: 1.25rem; height: 1.25rem; opacity: .75; }
.chronicle.is-discoveries .chronicle-scroll { padding-top: .2rem; }
.chronicle-scroll { flex: 1; overflow-y: auto; padding: .3rem 1rem 1rem; }
.chronicle-day h3 { margin: .8rem 0 .5rem; font-size: .66rem; }
.chronicle-entry { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: .4rem; }
.chronicle-entry:nth-child(odd) { background: rgba(0, 0, 0, .18); }
.chronicle-entry .ia-emblem { width: 1.5rem; height: 1.5rem; }
.chronicle-entry p { margin: 0; font-size: .85rem; color: var(--text-2); }
.chronicle-entry time { font-size: .72rem; color: var(--text-4); }
.skill-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .6rem; padding: .5rem .85rem .85rem; }
.skill-summary-row { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }
.skill-summary-row > span:not(.medal) { flex: 1; }
.skill-summary-row b { font-size: 1rem; }
.away-copy p { display: flex; gap: .55rem; margin: 0; color: var(--text-2); font-size: .82rem; }
.away-copy .ia-emblem { width: 1.6rem; height: 1.6rem; flex: none; }

/* ---------------------------------------------------------- Title screens */
.ia-screen { position: fixed; inset: 0; z-index: 2; }
.title-screen { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(24rem, .9fr); align-items: center; gap: 3rem; padding: 3rem 6vw; overflow: auto; }
/* The title, creation and loading screens show the same frame of Ancient Reach as the client's
   backdrop, but graded as a picture rather than as a field: here almost nothing covers it, so the
   plate the panels sit on reads as a murky blob. Same world, same dawn, barely softened. It no
   longer drifts. */
.title-art { position: fixed; inset: 0; background: url(/assets/evertrail-title.webp) 50% 50% / cover no-repeat; }
@media (max-width: 760px) { .title-art { background-position: 58% 50%; } }
.title-shade { position: fixed; inset: 0; background: linear-gradient(90deg, rgba(5, 9, 16, .15) 0%, rgba(5, 9, 16, .45) 50%, rgba(5, 9, 16, .82) 100%), radial-gradient(90% 90% at 30% 50%, transparent 40%, rgba(3, 5, 10, .7)); }
.title-brand, .title-panel, .creation-stage, .loading-card { position: relative; z-index: 1; }
.title-brand .ia-emblem { width: 5.5rem; height: 5.5rem; filter: drop-shadow(0 .5rem 1rem rgba(0, 0, 0, .7)); }
.title-brand .brand-logo { width: 8.5rem; height: 8.5rem; }
.title-brand h1 { margin: .6rem 0 .2rem; font-size: 4.2rem; line-height: 1; letter-spacing: .02em; }
.title-brand > p { margin: 0 0 1.6rem; font: italic 1.4rem var(--font-display); color: var(--text-1); text-shadow: 0 .15rem .6rem #000; }
.title-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.title-points li { display: flex; align-items: center; gap: .7rem; width: fit-content; padding: .45rem .9rem .45rem .5rem; border-radius: 2rem; background: rgba(5, 9, 16, .65); border: 1px solid var(--edge-soft); font-size: .95rem; color: var(--text-1); backdrop-filter: blur(.3rem); }
.title-points .ia-emblem { width: 1.7rem; height: 1.7rem; }
.title-panel { width: min(28rem, 100%); justify-self: end; padding: 2rem 1.6rem 1.3rem; }
.title-tabs { display: flex; width: 100%; margin-bottom: 1.1rem; }
.title-tabs button { flex: 1; justify-content: center; padding: .45rem; }
.title-form { display: grid; gap: .85rem; }
.form-message { margin: 0; min-height: 1.2rem; font-size: .8rem; }
.title-foot { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; color: var(--text-3); font-size: .72rem; }
.creation { grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem); }
.creation-stage { position: relative; height: min(78vh, 46rem); }
.creation-host { position: absolute; inset: 0; min-height: 0; }
.creation-light { position: absolute; left: 50%; top: 5%; width: 60%; height: 85%; translate: -50% 0; background: radial-gradient(closest-side, rgba(255, 236, 190, .25), transparent); }
.creation-platform { position: absolute; left: 50%; bottom: 4%; width: 45%; height: 9%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 198, 106, .35), transparent); }
.creation-intro { margin: 0 0 1rem; color: var(--text-2); font-size: .88rem; text-align: center; }
.body-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; border: 0; padding: 0; margin: 0; }
.body-choice legend { margin-bottom: .4rem; color: var(--text-3); }
.body-option { position: relative; display: grid; place-items: center; padding: .75rem; border-radius: .5rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); cursor: pointer; font-weight: 650; transition: border-color .15s, background .15s; }
.body-option input { position: absolute; opacity: 0; }
.body-option.is-chosen { border-color: var(--emerald); background: rgba(23, 80, 44, .55); box-shadow: inset 0 0 1rem rgba(88, 214, 127, .2); }
.creation-panel > .btn-ghost { margin-top: .8rem; }
.title-screen.is-loading { grid-template-columns: 1fr; place-items: center; }
.loading-card { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.loading-card .ia-emblem { width: 5rem; height: 5rem; animation: float 2.8s ease-in-out infinite; }
.loading-card .brand-logo { width: 7rem; height: 7rem; }
.loading-card h1 { margin: 0; font-size: 3rem; }
.loading-card p { margin: 0; color: var(--text-2); }
.loading-bar { width: 16rem; height: .35rem; border-radius: 1rem; background: rgba(0, 0, 0, .5); overflow: hidden; }
.loading-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); animation: loading 1.2s ease-in-out infinite; }
@keyframes loading { from { translate: -100% 0; } to { translate: 250% 0; } }
@keyframes float { 50% { translate: 0 -.4rem; } }

/* ---------------------------------------------------------------- Effects */
.fx-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.xp-drop { position: fixed; right: calc(var(--right) + var(--pad) + var(--gap) + 1rem); top: calc(var(--top) + 1.2rem + var(--stack, 0) * 1.9rem); display: flex; align-items: center; gap: .3rem; padding: .15rem .55rem .15rem .2rem; border-radius: 1rem; background: rgba(4, 8, 14, .6); border: 1px solid color-mix(in srgb, var(--skill) 55%, transparent); animation: xp-drop 1.9s var(--ease-out) forwards; }
.xp-drop .ia-emblem { width: 1.35rem; height: 1.35rem; }
.xp-drop b { font-size: 1rem; color: #fff; text-shadow: 0 0 .5rem var(--skill), 0 1px 1px #000; }
/* Power moving is its own drop: the Equipment panel keeps its number still and this says what changed. */
.xp-drop.is-power { gap: .35rem; padding-right: .7rem; animation-duration: 2.6s; }
.xp-drop.is-power .ia-glyph { width: 1rem; height: 1rem; color: var(--skill); }
.xp-drop.is-power small { font: 600 .68rem var(--font-num); color: var(--text-3); }
@keyframes xp-drop { 0% { opacity: 0; translate: 0 1rem; } 12% { opacity: 1; translate: 0 0; } 70% { opacity: 1; } 100% { opacity: 0; translate: 0 -2.4rem; } }
/* Reduce motion (the setting or the device's own) takes the rise away, never the drop. The shortened animation of
   base.css ended a drop on its last, invisible frame at once and main.mjs removed it on that end, so with reduced
   motion no XP drop was ever seen. It fades in and out where it stands, for its usual time. */
@keyframes xp-drop-still { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.reduce-motion .xp-drop { animation-name: xp-drop-still !important; animation-duration: 1.9s !important; }
.reduce-motion .xp-drop.is-power { animation-duration: 2.6s !important; }
@media (prefers-reduced-motion: reduce) {
  .xp-drop { animation-name: xp-drop-still !important; animation-duration: 1.9s !important; }
  .xp-drop.is-power { animation-duration: 2.6s !important; }
}
.level-up { position: fixed; left: 50%; top: 18%; translate: -50% 0; display: flex; align-items: center; gap: 1rem; padding: 1rem 2.2rem 1rem 1rem; border-radius: 4rem; background: linear-gradient(90deg, rgba(8, 14, 24, .92), rgba(20, 32, 52, .92)); border: 1px solid var(--gold-3); box-shadow: 0 0 0 1px #000, 0 1rem 3rem rgba(0, 0, 0, .6), 0 0 2.5rem color-mix(in srgb, var(--skill) 45%, transparent); animation: level-in .6s var(--ease-spring), level-out .5s ease-in 3.6s forwards; }
.lu-rays { position: absolute; left: 3.25rem; top: 50%; width: 12rem; height: 12rem; translate: -50% -50%; background: repeating-conic-gradient(color-mix(in srgb, var(--skill) 50%, transparent) 0 8deg, transparent 8deg 24deg); -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); animation: spin 8s linear infinite; opacity: .55; }
.level-up .medal { position: relative; }
.lu-copy { position: relative; display: grid; }
.lu-copy small { font-size: .7rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); }
.lu-copy strong { font-size: 1.9rem; line-height: 1.05; color: var(--text-1); }
.lu-copy span { font-size: 1.05rem; color: var(--skill); font-weight: 700; }
/* What the level opened (public/unlocks.mjs): one line of names under the level. */
.lu-unlocks { display: flex; align-items: flex-start; gap: .35rem; max-width: 26rem; margin-top: .3rem; font: 600 .82rem/1.3 var(--font-ui); font-style: normal; color: var(--text-2); white-space: normal; }
.lu-unlocks .ia-glyph { flex: none; width: .95rem; height: .95rem; margin-top: .1rem; color: var(--gold-2); }
/* Every tenth level, 99 and 120 get a bigger, longer banner: still the same transient element, gone on its own. */
.level-up.is-milestone, .level-up.is-mastery, .level-up.is-crowned { padding: 1.2rem 2.6rem 1.2rem 1.2rem; border-color: var(--gold-2); box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(242, 198, 106, .28), 0 1.2rem 3.5rem rgba(0, 0, 0, .65), 0 0 3.2rem color-mix(in srgb, var(--skill) 55%, transparent); animation-delay: 0s, 6.4s; }
.level-up.is-milestone .lu-copy strong, .level-up.is-mastery .lu-copy strong, .level-up.is-crowned .lu-copy strong { font-size: 2.3rem; }
.level-up.is-milestone .lu-copy small, .level-up.is-mastery .lu-copy small, .level-up.is-crowned .lu-copy small { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-1); }
.level-up.is-milestone .lu-rays, .level-up.is-mastery .lu-rays, .level-up.is-crowned .lu-rays { left: 3.9rem; width: 15rem; height: 15rem; opacity: .7; }
.level-up.is-mastery, .level-up.is-crowned { background: linear-gradient(90deg, rgba(40, 30, 10, .94), rgba(20, 32, 52, .94)); border-color: var(--gold-1); }
.level-up.is-crowned { box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(255, 231, 166, .45), 0 1.2rem 3.5rem rgba(0, 0, 0, .65), 0 0 4rem rgba(255, 231, 166, .45); }
.level-up.is-crowned .lu-copy small .ia-glyph { width: 1.1rem; height: 1.1rem; color: var(--gold-1); }
@keyframes level-in { from { opacity: 0; scale: .6; translate: -50% -1rem; } }
@keyframes level-out { to { opacity: 0; translate: -50% -1.5rem; } }
/* A find's moment (loot-dopamine §7.4; client/loot-feed.mjs). Every one of these is transient — a panel never keeps
   one. A Common changes a number on the tally chip, an Uncommon pops small, Rare and up carries its grade's frame,
   its grade and tier line and the Power it would add, and Epic and up waits to be clicked. */
.loot-pop { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: .55rem; align-items: center; width: fit-content; max-width: min(22rem, 70vw); margin: 0 0 .35rem auto; padding: .35rem .6rem .35rem .4rem; border-radius: .5rem; background: rgba(8, 13, 22, .94); border: 1px solid color-mix(in srgb, var(--rar-common) 35%, var(--edge)); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .5); --hold: 3600ms; animation: loot-in .35s var(--ease-spring), loot-out .4s ease-in calc(var(--hold) - .4s) forwards; }
.loot-pop.is-live { pointer-events: auto; }
/* Loot pops sit above the log and, in a combat world, above the combat bar. Both heights are measured and written
   onto the document by the render (main.mjs): the effects layer is the client's sibling and inherits nothing from
   it, and a guessed height left every pop standing over the chat (found in the wave C panel pass). */
:root { --chat-h: 12.25rem; --foot-h: 0rem; }
.fx-layer:has(.loot-pop, .loot-tally) { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 0 calc(var(--right) + var(--pad) + var(--gap) + .6rem) calc(var(--chat-h) + var(--foot-h) + var(--pad) + var(--gap) + .6rem) 0; }
.loot-pop .lp-well { grid-row: 1 / 3; width: 2.4rem; height: 2.4rem; padding: 0; }
.loot-pop .lp-well img { width: 100%; height: 100%; object-fit: contain; }
.loot-pop .lp-well .ia-glyph { width: 1.3rem; height: 1.3rem; color: var(--rar-uncommon); }
.loot-pop .lp-copy { display: grid; gap: .05rem; min-width: 0; }
.loot-pop .lp-copy b { font-size: .86rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loot-pop .lp-copy small { font-size: .66rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loot-pop .lp-power { font: 700 .72rem/1.2 var(--font-num); color: var(--text-2); }
.loot-pop .lp-power.up { color: var(--emerald); }
.loot-pop .lp-power.down { color: var(--ember); }
.loot-pop .lp-side { display: flex; align-items: center; gap: .3rem; }
.loot-pop .welcome-new { position: static; align-self: center; }
.loot-pop .welcome-new.is-set { color: #1f1406; background: linear-gradient(180deg, var(--rar-epic), color-mix(in srgb, var(--rar-epic) 60%, #000)); }
.loot-pop:is(.r-uncommon, .r-rare, .r-epic, .r-legendary, .r-mythic) { border-color: color-mix(in srgb, var(--tip-rar, var(--rar-common)) 55%, transparent); }
.loot-pop.r-uncommon { --tip-rar: var(--rar-uncommon); }
.loot-pop.r-rare { --tip-rar: var(--rar-rare); }
.loot-pop.r-epic { --tip-rar: var(--rar-epic); }
.loot-pop.r-legendary { --tip-rar: var(--rar-legendary); }
.loot-pop.r-mythic { --tip-rar: var(--rar-mythic); }
.loot-pop.is-big { max-width: min(26rem, 80vw); padding: .5rem .7rem .5rem .5rem; box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .55), 0 0 1.3rem color-mix(in srgb, var(--tip-rar) 40%, transparent); }
.loot-pop.is-folded { grid-template-columns: 2.4rem minmax(0, 1fr); }
.loot-pop.is-folded .lp-well { display: grid; place-items: center; border-radius: .4rem; border: 1px solid color-mix(in srgb, var(--rar-uncommon) 45%, transparent); background: rgba(12, 22, 18, .8); }
/* The counter every Common folds into: the numbers change, nothing moves (§7.4 rule 1). */
.loot-tally { display: flex; align-items: center; gap: .45rem; width: fit-content; margin: 0 0 .35rem auto; padding: .25rem .6rem .25rem .55rem; border-radius: 1rem; background: rgba(8, 13, 22, .88); border: 1px solid var(--edge); }
.loot-tally .t-caps { font-size: .58rem; color: var(--text-3); }
.loot-tally .lt-item { display: inline-flex; align-items: center; gap: .18rem; }
.loot-tally .lt-item img { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.loot-tally .lt-item b { font-size: .76rem; color: var(--text-1); }
/* A Legendary or a Mythic takes the level-up banner too, in its own colour. */
.level-up.is-find .lu-well { position: relative; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; padding: .3rem; }
.level-up.is-find .lu-well img { width: 100%; height: 100%; object-fit: contain; }
.level-up.is-find .lu-well .ia-emblem { width: 2.4rem; height: 2.4rem; }
.level-up.is-find .lu-copy span { color: var(--skill); }
@keyframes loot-in { from { opacity: 0; translate: 1rem 0; } }
@keyframes loot-out { to { opacity: 0; translate: 0 -.5rem; } }

/* Welcome back ("While you were away" 2.0, views/overlays.mjs returnSummary): rare finds, level-ups with their unlocks,
   why it stopped, the farm, empty potion slots, then the haul folded. */
.welcome h2 { font-size: 1.9rem; }
.welcome > p { margin-bottom: .6rem; }
.welcome-scroll { display: grid; gap: .65rem; min-height: 0; overflow-y: auto; margin-bottom: 1rem; padding: 0 .1rem; }
.welcome-section { display: grid; gap: .35rem; }
.welcome-section > .t-caps { color: var(--gold-3); font-size: .6rem; }
.welcome-finds { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem; }
.welcome-find { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: .5rem; border: 1px solid color-mix(in srgb, var(--tip-rar, var(--rar-common)) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--tip-rar, var(--rar-common)) 14%, transparent), rgba(0, 0, 0, .28)); }
.welcome-find .well { width: 3rem; }
.welcome-find-copy { display: grid; gap: .08rem; min-width: 0; }
.welcome-find-copy b { font: 600 .92rem/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-find-copy small { font-size: .68rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-new { position: absolute; top: -.45rem; right: .5rem; padding: .08rem .45rem; border-radius: 1rem; font: 800 .58rem/1.5 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #1f1406; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 0 1px #000; }
.welcome-levels { display: grid; gap: .35rem; }
.welcome-level { display: flex; align-items: center; gap: .55rem; padding: .3rem .7rem .3rem .3rem; border-radius: .6rem; background: rgba(23, 80, 44, .35); border: 1px solid rgba(88, 214, 127, .35); }
.welcome-level .medal { --size: 2.1rem; }
.welcome-level-copy { display: grid; gap: .1rem; min-width: 0; }
.welcome-level-copy b { font-size: .9rem; color: var(--text-1); }
.welcome-level-copy b .t-num { color: var(--emerald); }
.welcome-level-copy small { display: flex; align-items: flex-start; gap: .3rem; font-size: .74rem; color: var(--text-2); }
.welcome-level-copy small .ia-glyph { flex: none; width: .8rem; height: .8rem; margin-top: .1rem; color: var(--gold-2); }
.welcome-stop { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem .45rem .7rem; border-radius: .6rem; border: 1px solid rgba(255, 143, 79, .4); background: rgba(110, 45, 18, .3); }
.welcome-stop.is-farm { border-color: rgba(169, 217, 95, .45); background: rgba(60, 90, 30, .3); }
.welcome-stop > .ia-emblem { width: 1.8rem; height: 1.8rem; }
.welcome-stop-copy { flex: 1; display: grid; gap: .08rem; min-width: 0; }
.welcome-stop-copy b { font-size: .9rem; color: #ffd0b3; }
.welcome-stop.is-farm .welcome-stop-copy b { color: #e6ff9a; }
.welcome-stop-copy small { font-size: .72rem; color: var(--text-3); }
.welcome-stop .btn-fix { flex: none; }
.welcome-potions { display: flex; flex-wrap: wrap; gap: .35rem; }
.welcome-potions .chip img { width: 1.2rem; height: 1.2rem; }
.welcome-details { border-radius: .6rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .22); }
.welcome-details summary { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; cursor: pointer; list-style: none; font: 700 .68rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.welcome-details summary::-webkit-details-marker { display: none; }
.welcome-details summary .ia-glyph { width: .8rem; height: .8rem; transition: rotate .2s; rotate: -90deg; }
.welcome-details[open] summary .ia-glyph { rotate: 0deg; }
.welcome-xp { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; padding: 0 .6rem .7rem; }
.welcome-items { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding: .2rem .6rem .6rem; min-height: 0; }
.welcome-item { display: grid; justify-items: center; gap: .25rem; width: 4.6rem; }
.welcome-item .well { width: 4rem; }
.welcome-item .well .ia-emblem { width: 70%; height: 70%; }
.welcome-item small { font-size: .66rem; color: var(--text-3); text-align: center; }

/* Combat page: hero vitals, the fight list and the enemy panel */
.combat-hero { flex-wrap: wrap; }
.combat-vitals { display: grid; gap: .35rem; min-width: 16rem; }
.hp-line { display: grid; gap: .2rem; }
.hp-line .t-caps { display: inline-flex; align-items: center; gap: .3rem; color: #ffb3c8; font-size: .6rem; }
.hp-line .ia-emblem { width: .95rem; height: .95rem; }
.bar.is-hp .fill, .bar.is-hp i { background: linear-gradient(90deg, #ff4f6e, #ff8fa6); }
.bar.is-enemy .fill, .bar.is-enemy i { background: linear-gradient(90deg, #c8412e, #ff9a4f); }
.combat-skills { display: flex; flex-wrap: wrap; gap: .3rem; width: 100%; }
.cs-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem .2rem .3rem; border-radius: 1rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); color: var(--text-2); font-size: .78rem; }
.cs-pill .ia-emblem { width: 1.15rem; height: 1.15rem; }
.cs-pill.is-active { border-color: color-mix(in srgb, var(--skill) 60%, transparent); color: var(--text-1); box-shadow: 0 0 .5rem color-mix(in srgb, var(--skill) 35%, transparent); }
/* The tab strip, with one line under it naming the tabs that come later (Bosses, Dungeons: views/combat.mjs LOCKED_TABS). */
.combat-choose .choose-tools { flex-direction: column; align-items: center; gap: .3rem; padding: 0 .9rem .5rem; }
.combat-tabs button { display: inline-flex; align-items: center; gap: .35rem; }
.combat-tabs .ia-emblem { width: 1rem; height: 1rem; }
.combat-tabs button[disabled] { cursor: default; }
.combat-tabs button[disabled]:hover { color: var(--text-3); }
.combat-tabs button .ia-glyph { width: .8rem; height: .8rem; opacity: .8; }
.tabs-later { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; }
.tabs-later .ia-glyph { width: .75rem; height: .75rem; }
.area-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 .9rem .9rem; display: grid; gap: .8rem; align-content: start; }
.area-group .card-grid { flex: none; overflow: visible; }
.area-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .2rem 0 .45rem; }
.area-head h3 { margin: 0; font: 600 1rem var(--font-display); color: var(--gold-1); }
.area-head small { width: 100%; color: var(--text-3); font-size: .72rem; }
.mon-card .card-copy small { display: inline-flex; align-items: center; gap: .3rem; }
.mon-card .card-copy small .ia-emblem { width: .95rem; height: .95rem; }
.card-art.is-enemy, .detail-node.is-enemy { object-fit: contain; }
.combat-versus { grid-template-columns: 1fr auto 1fr; }
.vs-side { display: grid; gap: .25rem; }
.vs-side small { text-transform: none; letter-spacing: 0; font-size: .7rem; font-weight: 600; color: var(--text-2); }
.vs-side.is-enemy small { text-align: right; }
.vs-meta { font-size: .7rem; color: var(--text-3); }
.vs-side.is-enemy .vs-meta { text-align: right; }
.vs-swords .ia-emblem { width: 1.6rem; height: 1.6rem; opacity: .75; }
.safety .chip { font-size: .72rem; }
.stance-row { display: grid; gap: .3rem; }
.stance-row .t-caps { color: var(--text-3); font-size: .6rem; }
.stance-picker { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.stance-picker button { display: grid; justify-items: center; gap: .05rem; padding: .3rem .4rem; line-height: 1.1; }
.stance-picker button small { font-size: .58rem; font-weight: 600; opacity: .75; }
.food-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.food-slot { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .22rem .55rem .22rem .22rem; border-radius: .55rem; background: rgba(0, 0, 0, .28); border: 1px solid var(--edge-soft); color: inherit; text-align: left; cursor: pointer; }
.food-slot:hover { border-color: var(--edge-strong); }
.food-slot.is-set { border-color: color-mix(in srgb, var(--emerald) 45%, transparent); }
.food-slot.is-prompt { border-color: color-mix(in srgb, var(--gold-2) 55%, transparent); }
.food-slot.is-empty { border-color: color-mix(in srgb, var(--ember) 55%, transparent); }
.auto-eat { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem .6rem; border-radius: .45rem; background: rgba(0, 0, 0, .22); border: 1px solid var(--edge-soft); font-size: .74rem; color: var(--text-2); }
.auto-eat .t-caps { color: #ffb3c8; font-size: .58rem; }
.auto-eat b { color: var(--text-1); font-size: .95rem; }
.auto-eat .btn { margin-left: auto; }
.drops { display: grid; gap: .25rem; }
.drops .t-caps { color: var(--text-3); font-size: .6rem; }
.drop-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: .4rem; background: rgba(0, 0, 0, .22); font-size: .8rem; }
.drop-row img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.drop-row small { color: var(--text-3); }
.drop-row b { color: var(--text-1); min-width: 3rem; text-align: right; }
.drop-row.is-rare { border: 1px solid rgba(195, 140, 255, .4); }
.drop-row.is-rare span { color: #e6d2ff; }
.detail-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.eq-hp { position: absolute; left: .55rem; bottom: .45rem; z-index: 2; display: flex; align-items: center; gap: .35rem; font-size: .7rem; color: var(--text-1); text-shadow: 0 1px 2px #000; }
.eq-hp .ia-emblem { width: 1.05rem; height: 1.05rem; }
.eq-hp-bar { position: relative; width: 5.2rem; height: .5rem; border-radius: .3rem; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
.eq-hp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: .3rem; background: linear-gradient(90deg, #ff4f6e, #ff8fa6); transition: width .25s ease-out; }

/* Combat tracker: fixed rows, never grows with loot. */

/* ------------------------------------------------------------ Shell budgets
   The rail folds to icon tiles, the right column keeps fixed rows: context panel, a shorter equipment
   stage with the adventurer always in view, and the pack filling the rest with its own scroll. */
.ia-client.is-rail-compact { --left: 7.9rem; }
.is-rail-compact .brand { width: auto; }
.is-rail-compact .brand > div { display: none; }
.skillbar.is-compact { padding-top: .45rem; }
.skillbar.is-compact .skill-scroll { padding: .15rem .4rem .4rem; }
.rail-group-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; width: 100%; padding: .42rem .45rem .28rem; color: var(--gold-3); background: none; border: 0; cursor: pointer; }
.rail-group-head:hover { color: var(--gold-1); }
.rail-group-head .ia-glyph { width: .7rem; height: .7rem; opacity: .7; }
.skillbar.is-compact .rail-group-head { justify-content: center; padding: .38rem 0 .2rem; font-size: .56rem; letter-spacing: .14em; }
.skillbar.is-compact .rail-group-head .ia-glyph { display: none; }
.skill-group.is-collapsed .skill-tiles, .skill-group.is-collapsed .skill-rows { display: none; }
.skill-group.is-collapsed .rail-group-head { opacity: .7; }
.skill-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .28rem; }
.skill-tile { position: relative; display: grid; place-items: center; height: 3.1rem; border-radius: .6rem; border: 1px solid transparent; background: rgba(255, 255, 255, .03); transition: background .15s, border-color .15s; }
.skill-tile .medal { --size: 2.1rem; }
.skill-tile .st-level { position: absolute; right: .22rem; bottom: .14rem; font-size: .7rem; font-weight: 700; color: var(--text-1); text-shadow: 0 1px 0 #000, 0 0 .35rem #000; }
.skill-tile:hover:not(:disabled) { background: color-mix(in srgb, var(--skill, var(--gold-2)) 14%, transparent); border-color: rgba(255, 255, 255, .08); }
.skill-tile.is-viewing { background: color-mix(in srgb, var(--skill) 24%, transparent); border-color: color-mix(in srgb, var(--skill) 55%, transparent); }
.skill-tile.is-viewing::before { content: ""; position: absolute; left: -.42rem; top: 22%; bottom: 22%; width: .2rem; border-radius: 1rem; background: var(--skill); box-shadow: 0 0 .6rem var(--skill); }
.skill-tile.is-working .st-level { color: color-mix(in srgb, var(--skill, var(--emerald)) 40%, #fff); }
.skill-tile .working { position: absolute; left: .3rem; top: .3rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--skill, var(--emerald)); box-shadow: 0 0 .5rem var(--skill, var(--emerald)); }
.skill-tile.is-soon { opacity: .55; }
.skill-tile.is-soon .medal .ia-emblem { filter: grayscale(.85) brightness(.8); }
.skill-tile .soon { position: absolute; right: .22rem; bottom: .22rem; font: 700 .46rem var(--font-ui); letter-spacing: .1em; color: var(--text-3); }
.skill-rows { display: grid; gap: .15rem; }
.skill-row:disabled { cursor: default; }
.skillbar-foot .rail-toggle { margin-left: auto; }
.skillbar.is-compact .skillbar-foot { flex-direction: column; gap: .3rem; padding: .45rem .3rem .5rem; text-align: center; }
.skillbar.is-compact .skillbar-foot .ia-emblem { width: 1.4rem; height: 1.4rem; }
.skillbar.is-compact .skillbar-foot small { display: none; }
.skillbar.is-compact .skillbar-foot .rail-toggle { margin-left: 0; }
.skillbar.is-compact .skillbar-foot .chip { display: none; }
.stat-pill.is-active { border-color: var(--gold-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 40%, transparent) inset; }
.chat-peek { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; padding: 0 .6rem; font-size: .78rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-peek time { color: var(--text-4); font: 600 .7rem var(--font-num); }
.chat.is-collapsed .chat-log, .chat.is-collapsed .chat-input { display: none; }
.region-right { display: grid; grid-template-rows: minmax(0, max-content); align-content: start; }
.dock.gear { min-height: 0; }
.dock.gear .dock-body { flex: 1; min-height: 0; overflow-y: auto; }
.dock.is-collapsed { flex: none; }

/* ---------------------------------------------------- The bar under a 3D world (views/parts.mjs worldHud)
   One layout for every skill's world (HUD pass, 20 September 2026), read left to right:
     now   — what you are doing;      needs — the buttons you might press;
     pays  — what it is paying you;   acts  — the panels and the way out.
   A group a skill does not need is left out, so a tree shows three plaques and a fight shows its controls.
   Nothing here repeats a figure the world or its plates already carry, and nothing here animates. */
.world-foot { flex: none; }
.world-foot[hidden] { display: none; }
.hudbar { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; gap: .45rem .55rem; padding: .5rem .65rem; border-top: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(10, 16, 27, .97), rgba(24, 36, 57, .97)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--skill, var(--gold-2)) 26%, transparent); }
.hudbar.is-idle { align-items: center; gap: .8rem; padding: .5rem .8rem; }
.hud-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: .45rem; min-width: 0; }
.hud-group.is-now { flex: 0 1 auto; min-width: 11rem; }
.hud-group.is-needs { flex: 1 1 auto; }
.hud-group.is-pay { flex: 1 1 auto; }
.hud-group.is-pay > .hud-cell { flex: 1 1 7rem; max-width: 20rem; }
.hud-group.is-acts { margin-left: auto; align-items: center; justify-content: flex-end; }
.hud-group.is-acts .btn.is-active { border-color: var(--gold-2); color: var(--gold-1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 40%, transparent) inset; }
.hud-cell { display: grid; align-content: center; gap: .08rem; min-width: 0; padding: .3rem .6rem; border-radius: .45rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); }
.hud-cell > small.t-caps { color: var(--text-3); font-size: .56rem; letter-spacing: .1em; font-weight: 700; }
.hud-cell > b { font-size: 1rem; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-cell > em { font-style: normal; font-size: .64rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-cell > em b:not(.t-gold) { color: var(--text-2); }
.hud-cell.is-ended > b { color: #ff9f8a; }
/* What you are doing: the thing's own art beside its name, with the skill's colour on the edge. */
.hud-now { grid-template-columns: 2.2rem minmax(0, 1fr); align-items: center; column-gap: .55rem; border-color: color-mix(in srgb, var(--skill, var(--gold-2)) 32%, transparent); }
.hud-now img, .hud-now .ia-emblem { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.hud-now-copy { display: grid; min-width: 0; }
.hud-now-copy strong { font: 600 .95rem/1.15 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-now-copy small { font-size: .68rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* This fight / this session: three figures in one plaque, so the cell never moves as they change. */
/* The tally keeps its three figures on one line: kills, gold and finds side by side, never stacked. */
.hud-tally { display: flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: .76rem; color: var(--text-2); }
.hud-tally > span { display: inline-flex; align-items: center; gap: .18rem; }
.hud-tally b { color: var(--text-1); }
.hud-tally .ia-emblem { width: .95rem; height: .95rem; }
.hud-cell.is-tally { text-align: left; color: inherit; cursor: pointer; }
.hud-group.is-pay > .hud-cell.is-tally { flex: 1 1 8.5rem; }
.hud-cell.is-tally:hover, .hud-cell.is-tally.is-active { border-color: var(--edge-strong); background: rgba(255, 255, 255, .04); }
/* The controls a skill needs: the chosen food, Eat, the stance, the spell and Auto Eat. */
.hud-food { grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; column-gap: .5rem; padding: .28rem .5rem .28rem .3rem; border-radius: .5rem; border-color: var(--edge-soft); text-align: left; color: var(--text-1); min-width: 11rem; }
.hud-food:hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, .04); }
.hud-food.is-warn { border-color: rgba(255, 150, 80, .4); background: rgba(120, 60, 20, .25); }
.hud-food img { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.hud-food-copy { display: grid; min-width: 0; }
.hud-food-copy strong { font: 600 .88rem/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-food-copy small { font-size: .66rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-food.is-warn strong { color: #ffb36e; }
.hud-food > .ia-glyph { width: .9rem; height: .9rem; color: var(--text-3); }
.hud-eat { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; }
.hud-eat > span { display: grid; line-height: 1; text-align: left; }
.hud-eat small { font-size: .62rem; opacity: .85; margin-top: .18rem; }
.hud-eat .ia-emblem { width: 1.4rem; height: 1.4rem; }
.hud-cell.is-stance .segmented { padding: .12rem; margin-top: .1rem; }
.hud-cell.is-stance .segmented button { padding: .22rem .5rem; font-size: .72rem; white-space: nowrap; }
.hud-cell.is-autoeat { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .5rem; }
.hud-cell.is-autoeat > small.t-caps, .hud-cell.is-autoeat > em { grid-column: 1 / -1; }
.hud-cell.is-autoeat > b { grid-area: 2 / 1; font-size: 1.1rem; }
.hud-cell.is-autoeat .btn { grid-area: 2 / 2; padding: .2rem .35rem; }
.hud-cell.is-spell { cursor: pointer; text-align: left; color: inherit; min-width: 9rem; }
.hud-cell.is-spell:hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, .04); }
.hud-cell.is-spell.is-warn { border-color: rgba(255, 150, 80, .4); background: rgba(120, 60, 20, .25); }
.hud-spell { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: center; gap: .4rem; }
.hud-spell-icon { width: 1.9rem; height: 1.9rem; }
.hud-spell-copy { display: grid; min-width: 0; }
.hud-spell-copy strong { font: 600 .84rem/1.1 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-spell-copy small { font-size: .64rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-cell.is-spell.is-warn .hud-spell-copy small { color: #ffb36e; }
.hud-spell > .ia-glyph { width: .9rem; height: .9rem; color: var(--text-3); }
/* The panels a bar's buttons open over it: the zone's monsters, the drop table, this session's loot. */
.hud-pop { position: absolute; left: .65rem; right: .65rem; bottom: calc(100% + .35rem); max-height: 22rem; overflow: auto; padding: .55rem .7rem .7rem; border-radius: .6rem; background: rgba(10, 16, 27, .97); border: 1px solid var(--edge); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .6); z-index: 5; }
.hud-pop header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.hud-pop header strong { font: 600 1rem var(--font-display); color: var(--gold-1); }
.hud-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .2rem .5rem; }
.hud-list .drop-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .22rem .45rem; border-radius: .35rem; background: rgba(255, 255, 255, .03); font-size: .8rem; }
.hud-list .drop-row img, .hud-list .drop-row .ia-emblem { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.hud-list .drop-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-list .drop-row > span small, .hud-list .drop-row > small { color: var(--text-3); }
.hud-list .drop-row.is-rare b { color: var(--rar-epic); }
.hud-list .drop-row.is-current { background: rgba(79, 214, 127, .12); }
.hud-portrait { width: 1.6rem; height: 1.6rem; object-fit: cover; border-radius: .3rem; }
.hud-note { margin: 0; font-size: .76rem; color: var(--text-3); display: flex; align-items: center; gap: .4rem; }
.hud-note .ia-glyph { width: .9rem; height: .9rem; }
.hud-pop .hud-note { margin-bottom: .4rem; }

/* Wide rail rows tight enough for every skill and the Community group at 1080p. */
.skillbar { padding-top: .9rem; }
.skillbar:not(.is-compact) .skill-scroll { padding: .1rem .4rem .3rem; }
.skillbar:not(.is-compact) .skill-row { padding: .18rem .45rem .18rem .35rem; margin: .04rem 0; gap: .5rem; }
.skillbar:not(.is-compact) .skill-row .medal { --size: 1.9rem; }
.skillbar:not(.is-compact) .sr-name { font-size: .84rem; gap: .2rem; }
.skillbar:not(.is-compact) .sr-level { font-size: .98rem; min-width: 1.7rem; }
.skillbar:not(.is-compact) .rail-group-head { padding: .28rem .4rem .16rem; }

/* Fishing and Cooking (docs/FISHING_AND_COOKING_PLAN.md) */
.legend-card { cursor: default; border-style: dashed; }
.legend-card.is-caught { border-style: solid; box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .25); }
.legend-card .card-art.is-emblem { color: var(--rar-legendary); }
.catch-record { display: flex; align-items: center; gap: .5rem; padding: .45rem .65rem; border-radius: .5rem; background: rgba(76, 197, 238, .08); border: 1px solid rgba(76, 197, 238, .22); font-size: .8rem; color: var(--text-2); }
.catch-record.is-empty { background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .06); }
.catch-record .ia-glyph { flex: none; color: var(--gold-1); }
.burn-panel { display: grid; gap: .45rem; padding: .6rem .7rem; border-radius: .55rem; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); }
.burn-meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.burn-figure { display: grid; gap: .1rem; }
.burn-figure small { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 700; }
.burn-figure b { font-size: 1.35rem; line-height: 1; color: var(--text-1); }
.burn-figure em { font-style: normal; font-size: .66rem; color: var(--text-3); }
.burn-bonus { display: flex; flex-wrap: wrap; gap: .3rem; }
.burn-note { display: flex; gap: .45rem; margin: 0; font-size: .74rem; color: var(--text-3); }
.burn-note .ia-glyph { flex: none; }
.drop-unknown { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--text-3); font-weight: 700; }
.drop-row.is-unknown > span { color: var(--text-3); }
.fishlog { display: flex; flex-direction: column; min-height: 0; }
.fishlog-count { display: flex; align-items: center; gap: .45rem; margin: 0 .9rem .4rem; font-size: .8rem; color: var(--text-2); }
.fishlog-scroll { max-height: 22rem; overflow-y: auto; padding: 0 .9rem .8rem; display: grid; gap: .6rem; }
.fishlog-water h4 { margin: 0 0 .25rem; font: 600 .86rem var(--font-display); color: var(--gold-1); }
.fishlog-water h4 small { font: 600 .66rem var(--font-ui, inherit); color: var(--text-3); margin-left: .3rem; }
.fishlog-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; padding: .2rem .45rem; border-radius: .35rem; background: rgba(0, 0, 0, .2); font-size: .76rem; }
.fishlog-row img { width: 1.4rem; height: 1.4rem; object-fit: contain; }
.fishlog-row small { color: var(--text-3); font-size: .66rem; }
.fishlog-row.is-unknown { color: var(--text-3); }
.fishlog-row.is-legendary { box-shadow: inset 2px 0 0 var(--rar-legendary); }
.fishlog-row.is-find b { color: var(--gold-1); }
.journal-side { grid-auto-rows: max-content; }
.fishlog-scroll { max-height: 18rem; }
/* ------------------------------------------------------ Adventurer profile */
/* Opened from a name in chat (views/profile.mjs): who they are, what they do now, levels, gear and records. */
.profile-card { position: relative; width: min(40rem, 100%); max-height: calc(100% - 1rem); padding: 1.7rem 1.3rem 1.1rem; background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)), var(--ink-1); }
.profile-close { position: absolute; top: .5rem; right: .5rem; z-index: 4; }
.profile-scroll { min-height: 0; overflow-y: auto; display: grid; gap: .85rem; padding: .1rem .15rem .1rem 0; }
.profile-head { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.profile-head .chat-role { font-size: .68rem; padding: .1rem .6rem .1rem .45rem; }
.profile-head .chat-role .ia-glyph { width: 1rem; height: 1rem; }
.profile-name { margin: 0; display: inline-flex; align-items: baseline; gap: .55rem; font: 600 1.9rem/1.12 var(--font-display); color: var(--gold-1); }
.profile-card.role-owner .profile-name { background: linear-gradient(180deg, #fff6d2, #ffd466 50%, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .55rem rgba(255, 160, 60, .45)); }
.profile-card.role-owner { box-shadow: 0 0 0 1px rgba(255, 179, 71, .5), 0 0 2.4rem rgba(255, 140, 60, .2), 0 1.2rem 3rem rgba(0, 0, 0, .6); }
.profile-you { font: 700 .6rem/1.6 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 0 .4rem; border: 1px solid var(--edge-soft); border-radius: .3rem; -webkit-text-fill-color: var(--text-3); }
.profile-status { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-3); }
.profile-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-4); }
.profile-dot.is-online { background: var(--emerald); box-shadow: 0 0 .45rem var(--emerald); }
.profile-sep { color: var(--text-4); }
.profile-now { display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem; border-radius: .5rem; border: 1px solid var(--edge-soft); background: linear-gradient(90deg, color-mix(in srgb, var(--skill, var(--gold-2)) 16%, transparent), rgba(0, 0, 0, .28) 70%); }
.profile-now.is-idle { --skill: var(--text-4); }
.profile-now > div > small { display: block; color: var(--text-4); font-size: .6rem; letter-spacing: .14em; }
.profile-now > div > b { display: block; color: var(--text-1); font-size: .95rem; }
.profile-now-place { display: block; color: var(--text-3); font-size: .78rem; }
.profile-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.profile-totals > div { display: grid; justify-items: center; align-content: center; gap: .08rem; padding: .5rem .4rem; border-radius: .45rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); text-align: center; }
.profile-totals b { font-size: 1.3rem; color: var(--gold-1); }
.profile-totals small { font-size: .68rem; color: var(--text-3); }
.profile-totals .is-power b { display: inline-flex; align-items: center; gap: .15rem; color: #ffd98a; text-shadow: 0 0 .6rem rgba(255, 190, 70, .35); }
.profile-totals .is-power .ia-glyph { width: 1rem; height: 1rem; color: var(--gold-2); }
.profile-section h3 { margin: 0 0 .45rem; font-size: .64rem; letter-spacing: .16em; color: var(--gold-3); }
.profile-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: .3rem .45rem; }
.profile-skill { display: flex; align-items: center; gap: .45rem; padding: .18rem .5rem .18rem .2rem; border-radius: .4rem; background: rgba(0, 0, 0, .24); }
.profile-skill-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--text-2); }
.profile-skill b { font-size: .92rem; color: var(--gold-1); }
.profile-gear { max-width: 18rem; margin: 0 auto; }
/* Highlights: server rank, best skill, best gear, monsters defeated. The top three ranks wear gold, silver and bronze. */
.profile-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.profile-hl { display: grid; justify-items: center; align-content: start; gap: .3rem; padding: .7rem .45rem .6rem; border-radius: .5rem; border: 1px solid var(--edge-soft); background: radial-gradient(circle at 50% 0%, rgba(242, 198, 106, .1), transparent 70%), rgba(0, 0, 0, .3); text-align: center; }
.profile-hl > .ia-emblem { width: 2.3rem; height: 2.3rem; filter: drop-shadow(0 .15rem .3rem rgba(0, 0, 0, .6)); }
.profile-hl b { font: 700 1rem/1.2 var(--font-ui); color: var(--text-1); }
.profile-hl small { font-size: .66rem; letter-spacing: .04em; color: var(--text-3); }
.hl-rank b { font: 700 1.35rem/1.1 var(--font-num); color: var(--gold-1); }
.hl-of { font-size: .78rem; font-weight: 600; color: var(--text-3); }
.hl-rank.is-top-1 { border-color: rgba(255, 207, 92, .6); background: radial-gradient(circle at 50% 0%, rgba(255, 207, 92, .3), transparent 72%), rgba(0, 0, 0, .3); box-shadow: 0 0 1.1rem rgba(255, 190, 70, .2); }
.hl-rank.is-top-2 { border-color: rgba(206, 216, 232, .5); background: radial-gradient(circle at 50% 0%, rgba(206, 216, 232, .22), transparent 72%), rgba(0, 0, 0, .3); }
.hl-rank.is-top-3 { border-color: rgba(214, 140, 80, .55); background: radial-gradient(circle at 50% 0%, rgba(214, 140, 80, .24), transparent 72%), rgba(0, 0, 0, .3); }
.hl-skill b .t-num { color: var(--gold-1); }
.hl-gear .hl-well { width: 2.6rem; }
.hl-gear b { font-size: .8rem; line-height: 1.25; }
.hl-gear b.r-text-uncommon { color: var(--rar-uncommon); }
.hl-gear b.r-text-crafted { color: var(--rar-crafted); }
.hl-gear b.r-text-rare { color: var(--rar-rare); }
.hl-gear b.r-text-epic { color: var(--rar-epic); }
.hl-gear b.r-text-legendary { color: var(--rar-legendary); text-shadow: 0 0 .5rem rgba(255, 179, 71, .45); }
.hl-kills b { font: 700 1.35rem/1.1 var(--font-num); }
/* Best find and Collection (loot-dopamine §7.9): the grade's colour, a static glow, and how far the log has come. */
.hl-gear b.rar-text { font-size: .8rem; line-height: 1.25; }
.hl-collection b { font: 700 1.35rem/1.1 var(--font-num); }
.hl-collection > .ia-emblem { width: 2.3rem; height: 2.3rem; }
.profile-pets { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .3rem 0 0; font-size: .74rem; color: var(--text-3); }
.profile-pets .ia-glyph { width: .9rem; height: .9rem; color: var(--gold-2); }
.profile-pets span { padding: .1rem .4rem; border-radius: .3rem; border: 1px solid color-mix(in srgb, var(--rar-legendary) 35%, transparent); color: var(--gold-1); }
/* Power on a fight card (public/combat.mjs powerOf): green when yours is higher. */
.card-power { display: inline-flex; align-items: center; gap: .1rem; }
.card-power .ia-glyph { width: .8rem; height: .8rem; }
.card-power.is-stronger { color: var(--emerald); }
.card-power.is-weaker { color: var(--ember); }
@media (max-width: 768px) {
  .profile-card { padding: 1.5rem .85rem .9rem; }
  .profile-name { font-size: 1.55rem; }
  .profile-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-totals, .profile-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------ Leaderboards */
/* views/leaderboards.mjs: the boards on the left, the standings on the right; the top three wear gold, silver and bronze. */
.leaderboards-page .hero { min-height: 5.4rem; }
.lb-columns { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.lb-boards, .lb-board { display: flex; flex-direction: column; min-height: 0; padding-top: 1.3rem; }
.lb-tabs { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: .2rem; padding: .3rem .45rem .5rem; }
.lb-tab { display: flex; align-items: center; gap: .55rem; padding: .25rem .6rem .25rem .3rem; border-radius: .45rem; border: 1px solid transparent; color: var(--text-2); font-size: .84rem; font-weight: 600; text-align: left; transition: background .15s, border-color .15s, color .15s; }
.lb-tab:hover { background: rgba(255, 255, 255, .04); color: var(--text-1); }
.lb-tab.is-active { color: var(--text-1); border-color: color-mix(in srgb, var(--skill) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 22%, transparent), transparent 85%); }
.lb-tools { display: flex; justify-content: center; padding: .55rem .8rem 0; }
.lb-periods button { padding: .3rem .85rem; }
.lb-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem .8rem .2rem; }
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0 .22rem; font-size: .86rem; }
.lb-table th { padding: 0 .6rem .3rem; text-align: left; font: 700 .62rem var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }
.lb-table th:nth-child(n+3), .lb-table td:nth-child(n+3) { text-align: right; }
.lb-table td { padding: .42rem .6rem; background: rgba(0, 0, 0, .28); border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); }
.lb-table td:first-child { width: 4.2rem; border-left: 1px solid var(--edge-soft); border-radius: .45rem 0 0 .45rem; }
.lb-table td:last-child { border-right: 1px solid var(--edge-soft); border-radius: 0 .45rem .45rem 0; }
.lb-rank { color: var(--text-3); font-weight: 700; }
.lb-medal { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font: 800 .8rem var(--font-num); color: #2a1a00; background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c66a 55%, #b8862e); box-shadow: 0 0 .5rem rgba(242, 198, 106, .45); }
.lb-row.is-top-2 .lb-medal { background: radial-gradient(circle at 35% 30%, #ffffff, #cdd6e4 55%, #8d98aa); box-shadow: 0 0 .45rem rgba(205, 214, 228, .35); }
.lb-row.is-top-3 .lb-medal { background: radial-gradient(circle at 35% 30%, #ffd7b0, #d68c50 55%, #8e5427); box-shadow: 0 0 .45rem rgba(214, 140, 80, .35); }
.lb-who { display: inline-flex; align-items: center; gap: .4rem; }
.lb-player { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text-1); cursor: pointer; }
.lb-player:hover, .lb-player:focus-visible { color: var(--gold-1); text-decoration: underline; text-underline-offset: .15em; }
.lb-level { font-weight: 700; color: var(--gold-1); }
.lb-xp { color: var(--text-2); }
.lb-row.is-you td { background: color-mix(in srgb, var(--skill, var(--gold-2)) 14%, rgba(0, 0, 0, .3)); border-color: color-mix(in srgb, var(--skill, var(--gold-2)) 40%, transparent); }
.lb-row.role-owner .lb-player { background: linear-gradient(180deg, #fff6d2, #ffd466 50%, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-you { margin-top: .35rem; padding-top: .3rem; border-top: 1px dashed var(--edge-soft); }
.lb-empty { display: grid; place-items: center; min-height: 8rem; height: 100%; font-size: .85rem; color: var(--text-3); }
.lb-note { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .45rem .9rem .6rem; font-size: .72rem; color: var(--text-4); }
.lb-note .ia-glyph { width: .85rem; height: .85rem; }
button.profile-hl { font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
button.profile-hl:hover { border-color: var(--edge); transform: translateY(-1px); }
@media (max-width: 760px) {
  .lb-columns { grid-template-columns: minmax(0, 1fr); }
  /* The board picker wraps onto as many rows as it needs (20 September 2026). It used to be one row of
     max-content columns with its own sideways scroller: twenty-seven skills came to 1503px, and once the phone
     pass flattened that scroller the whole page went sideways with it. A max-content column cannot shrink, so
     it has no place on a phone — these tiles share the width instead. */
  .lb-tabs { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
  .lb-tabs button { text-align: center; }
  .lb-table td:first-child { width: 3rem; }
}
/* The Queen on her profile and on the leaderboards. */
.profile-card.role-queen .profile-name { background: linear-gradient(180deg, #fff0f8, #ffb8dc 50%, #ff78b9); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .55rem rgba(255, 120, 185, .45)); }
.profile-card.role-queen { box-shadow: 0 0 0 1px rgba(255, 143, 200, .5), 0 0 2.4rem rgba(255, 110, 180, .2), 0 1.2rem 3rem rgba(0, 0, 0, .6); }
.lb-row.role-queen .lb-player { background: linear-gradient(180deg, #fff0f8, #ffb8dc 50%, #ff78b9); -webkit-background-clip: text; background-clip: text; color: transparent; }