/* 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); }
.hero-bar { flex: 1; display: grid; gap: .35rem; }
.hero-bar small { color: var(--text-3); font-size: .74rem; }
.hero-bar small b { color: var(--text-1); }
.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; }

/* 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: a metal per tab wraps onto more rows, a set line names the Bible family, chips split a long tab by material. */
.choose-tools.is-recipes { flex-direction: column; align-items: center; gap: .35rem; }
.choose-tools.is-recipes .segmented { flex-wrap: wrap; justify-content: center; }
.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; }
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.chip-row .chip { cursor: pointer; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); color: var(--text-3); }
.chip-row .chip:hover { color: var(--text-1); }
.chip-row .chip.is-on { color: #1d1204; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); border-color: transparent; }
.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; }
.detail-shot.is-painted { position: relative; display: grid; place-items: center; background-size: 200% 200%; }
.detail-shot.is-painted[data-sheet="oldwood"] { background-image: url(/assets/oldwood-worlds.webp); }
.detail-shot.is-painted[data-sheet="bright"] { background-image: url(/assets/bright-worlds-v1.webp); }
.detail-shot.is-painted[data-cell="0"] { background-position: 0 0; }
.detail-shot.is-painted[data-cell="1"] { background-position: 100% 0; }
.detail-shot.is-painted[data-cell="2"] { background-position: 0 100%; }
.detail-shot.is-painted[data-cell="3"] { background-position: 100% 100%; }
.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); }
.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; }

/* 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-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: .8rem; }
.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; }
.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-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; }
.gear-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.gear-slots .eq-slot { width: auto; aspect-ratio: 1; }
.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; }
.eq-ammo .eq-quiver-copy small { font-size: .6rem; }
.eq-ammo .eq-quiver-count { font-size: .86rem; }
.eq-ammo-slot[data-action="rune-pouch"].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-ammo-slot[data-action="rune-pouch"].is-active .eq-quiver-copy small { color: #dcd0ff; }
.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); }
.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); }
.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; }
.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; }
.title-art { position: fixed; inset: -2%; background-size: 200% 200%; filter: saturate(1.1); animation: slow-zoom 40s ease-in-out infinite alternate; }
.title-art[data-sheet="oldwood"] { background-image: url(/assets/oldwood-worlds.webp); }
.title-art[data-sheet="bright"] { background-image: url(/assets/bright-worlds-v1.webp); }
.title-art[data-cell="0"] { background-position: 0 0; }
@keyframes slow-zoom { to { scale: 1.08; } }
.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; }
@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; } }
.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; }
@keyframes level-in { from { opacity: 0; scale: .6; translate: -50% -1rem; } }
@keyframes level-out { to { opacity: 0; translate: -50% -1.5rem; } }
.loot-pop { position: relative; display: grid; grid-template-columns: 2rem auto; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; width: fit-content; margin: 0 0 .35rem auto; padding: .3rem .8rem .3rem .35rem; border-radius: .45rem; background: rgba(8, 13, 22, .92); border: 1px solid var(--edge); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .5); animation: loot-in .35s var(--ease-spring), loot-out .4s ease-in 3.1s forwards; }
/* Loot pops sit above the log and, in a combat world, above the combat bar (both heights come from the client root). */
.ia-client { --chat-h: 12.25rem; --foot-h: 0rem; }
.ia-client.is-chat-folded { --chat-h: 2.6rem; }
.ia-client.has-combat-bar { --foot-h: 6.3rem; }
.fx-layer:has(.loot-pop) { 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 img { grid-row: 1 / 3; width: 2rem; height: 2rem; object-fit: contain; }
.loot-pop span { font-size: .82rem; color: var(--text-1); }
.loot-pop span b { color: var(--emerald); }
.loot-pop small { font-size: .66rem; color: var(--text-3); }
.loot-pop.r-rare, .loot-pop.r-epic, .loot-pop.r-legendary { border-color: var(--rar-epic); box-shadow: 0 0 1.2rem rgba(195, 140, 255, .45); }
@keyframes loot-in { from { opacity: 0; translate: 1rem 0; } }
@keyframes loot-out { to { opacity: 0; translate: 0 -.5rem; } }

/* Welcome back */
.welcome h2 { font-size: 1.9rem; }
.welcome-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: .7rem; }
.welcome-levels > div { display: flex; align-items: center; gap: .45rem; padding: .3rem .7rem .3rem .3rem; border-radius: 2rem; background: rgba(23, 80, 44, .45); border: 1px solid rgba(88, 214, 127, .4); }
.welcome-xp { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-bottom: .9rem; }
.welcome-items { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1.2rem; min-height: 0; overflow-y: auto; }
.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); }
.combat-choose .choose-tools { padding: 0 .9rem .5rem; }
.combat-tabs button { display: inline-flex; align-items: center; gap: .35rem; }
.combat-tabs .ia-emblem { width: 1rem; height: 1rem; }
.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; }

/* ------------------------------------------------------------ Combat bar under the arena */
.world-foot { flex: none; }
.world-foot[hidden] { display: none; }
.cbar { position: relative; border-top: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(10, 16, 27, .97), rgba(24, 36, 57, .97)); }
.cbar.is-idle { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; }
.cbar-row { display: grid; grid-template-columns: minmax(11rem, 1.1fr) auto minmax(11rem, 1.2fr) auto minmax(15rem, 1.6fr) minmax(9rem, .9fr) auto; align-items: stretch; gap: .5rem; padding: .5rem .65rem; }
.cbar-cell { display: grid; align-content: center; gap: .12rem; min-width: 0; padding: .28rem .55rem; border-radius: .45rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); }
.cbar-cell > small.t-caps { color: var(--text-3); font-size: .56rem; }
.cbar-cell strong { font: 600 .9rem/1.1 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbar-cell > small:not(.t-caps) { color: var(--text-3); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbar-cell.is-stance .segmented { padding: .12rem; }
.cbar-cell.is-stance .segmented button { padding: .22rem .55rem; font-size: .72rem; }
.cbar-cell.is-autoeat { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .45rem; }
.cbar-cell.is-autoeat > small.t-caps { grid-column: 1 / -1; }
.cbar-cell.is-autoeat > b { font-size: 1.1rem; color: var(--text-1); }
.cbar-cell.is-autoeat .btn-icon, .cbar-cell.is-autoeat .btn { padding: .2rem .35rem; }
.cbar-stats { display: flex; flex-wrap: wrap; gap: .2rem .65rem; font-size: .74rem; color: var(--text-2); }
.cbar-stats b { color: var(--text-1); }
.cbar-food { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .28rem .5rem .28rem .3rem; border-radius: .5rem; background: rgba(0, 0, 0, .3); border: 1px solid var(--edge-soft); text-align: left; color: var(--text-1); }
.cbar-food:hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, .04); }
.cbar-food.is-warn { border-color: rgba(255, 150, 80, .4); background: rgba(120, 60, 20, .25); }
.cbar-food img { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.cbar-food-copy { display: grid; min-width: 0; }
.cbar-food-copy strong { font: 600 .88rem/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbar-food-copy small { font-size: .66rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbar-food.is-warn strong { color: #ffb36e; }
.cbar-food > .ia-glyph { width: .9rem; height: .9rem; color: var(--text-3); }
.cbar-eat { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; }
.cbar-eat > span { display: grid; line-height: 1; text-align: left; }
.cbar-eat small { font-size: .62rem; opacity: .85; margin-top: .18rem; }
.cbar-eat .ia-emblem { width: 1.4rem; height: 1.4rem; }
.cbar-buttons { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end; }
.cbar-buttons .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; }
.cbar-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; }
.cbar-pop header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cbar-pop header strong { font: 600 1rem var(--font-display); color: var(--gold-1); }
.cbar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .2rem .5rem; }
.cbar-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; }
.cbar-list .drop-row img, .cbar-list .drop-row .ia-emblem { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.cbar-list .drop-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbar-list .drop-row > span small, .cbar-list .drop-row > small { color: var(--text-3); }
.cbar-list .drop-row.is-rare b { color: var(--rar-epic); }
.cbar-list .drop-row.is-current { background: rgba(79, 214, 127, .12); }
.cbar-portrait { width: 1.6rem; height: 1.6rem; object-fit: cover; border-radius: .3rem; }
.cbar-note { margin: 0; font-size: .76rem; color: var(--text-3); display: flex; align-items: center; gap: .4rem; }
.cbar-note .ia-glyph { width: .9rem; height: .9rem; }
.cbar-pop .cbar-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; }
.water-bar { display: grid; grid-template-columns: minmax(13rem, 1.6fr) repeat(5, minmax(6.5rem, 1fr)) auto; align-items: stretch; gap: .5rem; padding: .5rem .65rem; border-top: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(10, 16, 27, .97), rgba(24, 36, 57, .97)); }
.wb-cell { display: grid; align-content: center; gap: .1rem; min-width: 0; padding: .28rem .55rem; border-radius: .45rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); }
.wb-cell small { color: var(--text-3); font-size: .56rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.wb-cell b { font-size: 1rem; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-cell em { font-style: normal; font-size: .64rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-cell.wb-main { grid-template-columns: 2.2rem minmax(0, 1fr); align-items: center; column-gap: .55rem; }
.wb-cell.wb-main img { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.wb-cell.wb-main > div { display: grid; gap: .08rem; min-width: 0; }
.wb-cell.wb-main strong { font: 600 .92rem/1.1 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-cell.wb-main small { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .68rem; }
.water-bar > .btn { align-self: center; }
/* Thieving's district bar: the hit points always in view, and the Drops and Loot panels over it like the combat bar's. */
.market-bar { position: relative; }
.market-bar > .cbar-buttons { align-self: center; }
.wb-cell.wb-hp .bar { height: .9rem; margin: .12rem 0 .05rem; }
.wb-cell.wb-hp.is-low { border-color: rgba(255, 95, 120, .5); background: rgba(90, 16, 30, .35); }
.wb-cell.is-ended b { color: #ff9f8a; }
.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); }
@media (max-width: 1100px) { .water-bar { grid-template-columns: minmax(12rem, 1fr) repeat(3, minmax(6rem, 1fr)); } .water-bar .wb-cell:nth-of-type(n+5) { display: none; } }
.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(4, minmax(0, 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); }
/* 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-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); }
  .lb-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; overflow-y: hidden; }
  .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; }