/* ============================================================================
* Project MiG — Stylesheet (CLEAN MODERN DARK redesign, 2026-07-12)
* ----------------------------------------------------------------------------
* A flat, modern dark "game dashboard" look: solid surfaces, soft rounded
* corners, subtle borders, crisp spacing, system fonts. No external fonts or
* CDNs so the game works fully offline from file://.
*
* This look is the PERMANENT baseline (owner-approved 2026-07-13; the old
* medieval-look backup was deleted at their request).
*
* THEMING: everything is CSS-variable driven. A theme (picked in Settings)
* retints the NEUTRAL surfaces (bg / panels / borders) via
* :root[data-theme="…"]. The gold accent, semantic green/red, and rarity
* colours stay constant on every theme so buttons, highlights and item
* colours keep working everywhere. "default" = Amber (the warm graphite
* :root values below); "dark" also neutralises the text inks.
* ==========================================================================*/
:root {
/* Surfaces (Amber default: warm dark graphite) */
--bg: #121110;
--bg2: #171512;
--panel: #1c1a16;
--panel2: #221f1a;
--panel3: #2d2922;
--border: #363129;
--border2: #4a4336;
/* Text inks */
--ink: #ece9e1;
--ink-dim: #aca69a;
--ink-faint: #7b7568;
/* Accent + semantic colours (constant across themes) */
--gold: #eab543;
--gold-2: #f7cf74;
--green: #58c96b;
--red: #e25c4d;
/* Attack-style colours (mob chips / rows / icons) */
--st-melee: #e0604a;
--st-ranged: #4fc06a;
--st-magic: #5aa7f2;
/* Quality colors */
--q-common: #cdd1d9;
--q-uncommon: #55c95f;
--q-rare: #4f9cf5;
--q-epic: #b26af0;
--q-legendary: #e8524d;
--q-quest: #f25bce; /* Quest — pink/magenta (special, outside the rarity ladder) */
/* Shape + depth + type */
--radius: 12px;
--radius-sm: 8px;
/* One vertical gap between a popup's stacked blocks (meta / note / drop list / buttons),
so every popup breathes the same way. */
--popup-gap: 16px;
/* One square-slot size shared by the Inventory tab's bag, the Equipment panel and the
Tools panel, so the three read as the same grid. Change it once, all three follow. */
--slot-size: 72px;
--shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.22);
--ui-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
--head-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ============================================================================
* THEMES — the user picks one in Settings (saved to state.settings.theme; the
* UI sets data-theme on ). Each retints ONLY the neutral surfaces.
* ==========================================================================*/
:root[data-theme="crimson"] {
--bg: #141010; --bg2: #181313; --panel: #1e1716; --panel2: #251c1a; --panel3: #312420;
--border: #3f2e2a; --border2: #573e37;
}
:root[data-theme="verdant"] {
--bg: #0f120f; --bg2: #131713; --panel: #171d18; --panel2: #1c231d; --panel3: #252f27;
--border: #2e3c31; --border2: #405344;
}
:root[data-theme="azure"] {
--bg: #0e1116; --bg2: #12161d; --panel: #161b23; --panel2: #1a212b; --panel3: #232c39;
--border: #2c3746; --border2: #3d4c62;
}
/* Neutral charcoal dark mode — true greys; the ONE theme that also neutralises
the text inks (the others keep the warm cream) so it reads as a proper
neutral dark. */
:root[data-theme="dark"] {
--bg: #0e0f12; --bg2: #131418; --panel: #17191d; --panel2: #1c1e24; --panel3: #262932;
--border: #2f333d; --border2: #424856;
--ink: #e9ebef; --ink-dim: #a9aeb8; --ink-faint: #757b87;
}
* { box-sizing: border-box; }
html, body {
margin: 0; height: 100%;
background: var(--bg);
color: var(--ink);
font-family: var(--ui-font);
font-size: 15px;
}
/* ---- App skeleton -------------------------------------------------------- */
/* ⚠️ THE APP HEIGHT IS `dvh`, NOT `vh` (v0.20). On a phone browser `100vh` is the
height with the URL bar HIDDEN, so the app is always taller than what you can
actually see and the bottom tab bar sits underneath the browser's own bar until
you scroll. `dvh` is the *dynamic* viewport height, which shrinks and grows with
the browser chrome, so the tab bar stays put. The plain `vh` line stays first as
a fallback for browsers without dvh. Do not "simplify" it back to one line. */
/* ⚠️ AND THE COLUMN IS `minmax(0, 1fr)`, NOT the implicit `auto` (v0.21). An auto
grid column is sized by its widest child, so the TOP BAR — whose stat chips do
not wrap — could stretch the whole app past the viewport and the entire page
scrolled sideways, tab bar and all. This is the same trap `#body`/`#main` carry
`min-width: 0` for, one level up. Every row below (topbar, body, tab bar) needs
its own `min-width: 0` to actually take advantage of it. */
#app {
display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
height: 100vh; height: 100dvh;
}
#topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 22px; min-width: 0;
background: var(--bg2);
border-bottom: 1px solid var(--border);
}
.brand {
font-family: var(--head-font); font-size: 20px; font-weight: 800; letter-spacing: .2px;
color: var(--ink); display: flex; align-items: center; gap: 10px; min-width: 0;
}
.brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }
/* ⚠️ THE WORDMARK IS DESKTOP-ONLY (v0.28.1). It reads in full here and is hidden
outright at the 820px breakpoint below - v0.28 removed it from BOTH, which went
further than the owner asked.
`min-width: 0` + the ellipsis are kept from v0.21: they stop the name pushing
the page wide on an in-between width before the breakpoint takes over.
⚠️ `.brand-idle` IS GONE. It wrapped the " Idle" half so the phone could hide
just that (v0.22 #7); the phone hides the whole wordmark now, so the span had
no job left. Do not reintroduce it to "shorten" the name on a narrow screen -
that is the arrangement this release replaced. */
.brand-name { line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand .accent { color: var(--gold); }
.brand-sub {
font-family: var(--ui-font); font-size: 11px; font-weight: 600; color: var(--ink-faint);
letter-spacing: 2px; text-transform: uppercase;
}
.top-stats { display: flex; gap: 8px; }
.stat {
background: var(--panel); border: 1px solid var(--border);
padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--ink-dim);
}
.stat.gold { color: var(--gold-2); }
/* Discord button in the top bar (an , so reset link styling + centre the icon). */
.discord-btn {
display: inline-flex; align-items: center; justify-content: center;
color: #b9c0ff; text-decoration: none; padding: 6px 12px; cursor: pointer;
transition: color .12s, border-color .12s;
}
.discord-btn:hover { color: #fff; border-color: #5865F2; background: #5865F2; }
.discord-ico { display: block; }
/* ⚠️ `min-width: 0` HERE IS THE ONE THAT MATTERS (v0.20). #body is the grid ITEM
inside #app, and a grid item defaults to `min-width: auto`, which refuses to
shrink below its content. So a page wider than the phone (the two Database
pages) pushed #body past its grid column and the whole document scrolled
sideways, taking the top bar and the bottom tab bar with it. #main carries the
same guard for the same reason one level down. `min-height: 0` was already
here doing the vertical equivalent — this is its horizontal twin. */
#body { display: flex; min-height: 0; min-width: 0; }
/* ---- Sidebar ------------------------------------------------------------- */
/* ⚠️ THE LEFT COLUMN IS `#sideCol`, NOT `#sidebar` (v0.26). The search box has to
live OUTSIDE the nav, because `UI.renderNav` rewrites `#sidebar`'s innerHTML on
every action and every 10-second sync and would eat what is being typed. So the
column owns the width, the background and the border, the search box is pinned
at its top, and `#sidebar` scrolls underneath it. */
#sideCol {
width: 240px; flex-shrink: 0; min-width: 0;
display: flex; flex-direction: column; min-height: 0;
background: var(--bg2);
border-right: 1px solid var(--border);
}
#sidebar {
flex: 1 1 auto; min-height: 0;
/* 8px on top, not 12: the SEARCH BOX above owns the column's top inset now, and
8px is the gap every row in this list keeps from the next one. */
padding: 8px 10px 12px; overflow-y: auto;
}
/* ---- Global search (v0.26) ----------------------------------------------- */
/* Items and players, always in their own labelled sections so a result list can
never read "Player X / Iron Bar / Player Y". */
/* ⚠️ IT HAS TO LINE UP WITH THE ROWS BELOW IT, and that is fiddlier than it looks
(v0.26 fix). `#sidebar` SCROLLS, so the browser takes a gutter out of its right
edge and every nav row and skill card ends short by that much. The search box
lives OUTSIDE the scroller (it must — see UI.renderSearch), so it ran the full
width and stuck out past everything under it by the width of the scrollbar.
`--side-sb` is MEASURED at runtime and set on #sideCol, because the reserved
width is not knowable from CSS: this stylesheet asks for 8px and the browser
here reserves 10, and Firefox reserves a different amount again. */
.side-search {
flex: 0 0 auto; position: relative;
padding: 12px calc(10px + var(--side-sb, 0px)) 0 10px;
}
.gs-wrap { position: relative; }
/* Sized and coloured to sit in the same family as `.side-char` and `.nav-item`:
the same 8px radius, the same 1px `--border`, the same panel surface, the same
14px label, and the same 42px row height. The placeholder starts at 45px so it
lines up with the nav LABELS (12px padding + a 22px icon + an 11px gap). */
.gs-input {
width: 100%; box-sizing: border-box;
padding: 9px 34px 9px 45px; line-height: 22px;
background: var(--panel2); color: var(--ink);
border: 1px solid var(--border); border-radius: var(--radius-sm);
font-family: var(--ui-font); font-size: 14px; font-weight: 600;
}
.gs-input:focus { outline: none; border-color: var(--gold); }
.gs-input::placeholder { color: var(--ink-faint); font-weight: 600; }
.gs-ico, .gs-clear {
position: absolute; top: 50%; transform: translateY(-50%);
color: var(--ink-faint); pointer-events: none;
}
/* Same box the nav icons occupy, so the magnifier sits on their column. */
.gs-ico { left: 12px; width: 22px; text-align: center; font-size: 15px; }
.gs-clear {
right: 6px; pointer-events: auto; cursor: pointer;
background: none; border: 0; padding: 4px 7px; line-height: 1;
font-family: var(--ui-font); font-size: 14px; border-radius: var(--radius-sm);
}
.gs-clear:hover { color: var(--ink); background: var(--panel3); }
/* The results float OVER the nav rather than pushing it down, so the sidebar
never jumps about while someone types. */
.gs-results {
/* Flush with the INPUT's own edges (it is positioned inside `.gs-wrap`), so
the dropdown reads as part of the box rather than a floating panel. */
position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
margin-top: 6px; max-height: 58vh; overflow-y: auto;
background: var(--panel2); border: 1px solid var(--border2);
border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,.5);
padding: 6px;
}
.gs-sec {
padding: 8px 8px 4px; font-size: 10.5px; letter-spacing: 1.4px;
font-weight: 700; color: var(--ink-faint); text-transform: uppercase;
}
.gs-sec + .gs-sec, .gs-row + .gs-sec { border-top: 1px solid var(--border); margin-top: 4px; }
.gs-row {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 6px 8px; border: 0; border-radius: var(--radius-sm);
background: none; color: var(--ink); cursor: pointer; text-align: left;
font-family: var(--ui-font); font-size: 13px;
}
.gs-row:hover, .gs-row.sel { background: var(--panel3); }
.gs-row .item-art, .gs-row .item-ico { width: 22px; height: 22px; font-size: 16px; flex: 0 0 auto; }
.gs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sub { flex: 0 0 auto; font-size: 11px; color: var(--ink-faint); }
.gs-none { padding: 10px; color: var(--ink-faint); font-size: 12.5px; text-align: center; }
/* On a phone the box is MOVED into the Menu page (see UI.renderSearch), where it
is an ordinary block rather than a pinned column header. */
.mmenu-search { position: relative; margin: 0 0 12px; }
.mmenu-search .side-search { padding: 0; }
.gs-hint { padding: 6px 8px 4px; font-size: 11px; color: var(--ink-faint); text-align: center; }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
/* Bottom nav group (Item Database / Logbook / Settings) — divided from the skill list above. */
.side-nav-bottom { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); margin-bottom: 0; }
/* Build number under the sidebar (players quote it in bug reports). */
.side-version { margin: 10px 4px 2px; font-size: 11px; color: var(--ink-faint); text-align: center; letter-spacing: .4px; }
.side-head {
margin: 16px 8px 8px; font-size: 11px; letter-spacing: 1.6px; font-weight: 700;
text-transform: uppercase; color: var(--ink-faint);
}
.nav-item {
display: flex; align-items: center; gap: 11px; width: 100%;
background: transparent; border: 1px solid transparent; color: var(--ink-dim);
font-family: var(--ui-font); font-size: 14px; font-weight: 600; text-align: left;
padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all .12s;
}
.nav-item:hover { background: var(--panel2); color: var(--ink); }
.nav-item.active {
background: var(--panel3);
color: var(--gold-2);
box-shadow: inset 3px 0 0 -1px var(--gold);
}
.nav-ico { font-size: 17px; width: 22px; text-align: center; }
/* A nav row that LEAVES the game (the Wiki, v0.18). It is an
rather than a view button, so it never takes the .active state — you are never
"on" it. The trailing arrow says so before it is clicked. */
.nav-item.nav-ext { text-decoration: none; }
.nav-ext-ico { margin-left: auto; color: var(--ink-faint); font-size: 12px; }
.nav-item.nav-ext:hover .nav-ext-ico { color: var(--gold-2); }
/* Reset game — moved out of the sidebar into Settings' "Danger zone" (2026-07-17). */
.danger-title { color: var(--red); }
.reset-btn {
background: transparent; border: 1px dashed var(--border); color: var(--ink-dim);
align-self: flex-start; width: auto; padding: 9px 18px;
}
.reset-btn:hover { color: var(--red); border-color: var(--red); border-style: solid; background: rgba(200,73,60,.08); }
/* Skill cards in the sidebar (clickable + drag-to-reorder) */
.sk-card {
display: block; width: 100%; text-align: left; cursor: pointer;
background: var(--panel2);
border: 1px solid var(--border); border-radius: 10px;
padding: 9px 11px 11px; margin-bottom: 6px; transition: border-color .12s, transform .08s, background .12s;
}
.sk-card:hover { border-color: var(--border2); background: var(--panel3); transform: translateX(2px); }
.sk-card.sel { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(234,181,67,.35); }
.sk-card.locked { opacity: .5; }
.sk-card.training { box-shadow: 0 0 0 1px rgba(88,201,107,.45); }
/* Drag-to-reorder: grab cursor, dim the dragged card, gold line shows where it'll drop. */
.sk-card[draggable="true"] { cursor: grab; }
.sk-card.dragging { opacity: .45; }
.sk-card.drop-before { box-shadow: inset 0 4px 0 -1px var(--gold-2); }
.sk-card.drop-after { box-shadow: inset 0 -4px 0 -1px var(--gold-2); }
.sk-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sk-ico { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.sk-name {
flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-lvl { color: var(--ink-dim); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.sk-card.sel .sk-lvl { color: var(--gold-2); }
.sk-train { color: var(--green); font-size: 10px; animation: pulse 1.2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
/* ---- The merged Melee/Ranged/Magic card (rebuilt v0.17) -------------------
ONE card the size of a normal skill card, holding three compact cells side by
side. Hovering a cell hides its two siblings and expands it to a full row with
name + XP bar; leaving restores all three. Entirely CSS: each cell carries both
forms as children, so `:hover` swaps them and `:not(:hover)` collapses the
others. See styleTrioCard() in ui.js before changing the markup shape. */
.sk-card.sk-styles { padding: 5px; cursor: default; }
.sk-card.sk-styles:hover { transform: none; background: var(--panel2); border-color: var(--border2); }
/* ⚠️ THE ROW RESERVES ITS EXPANDED HEIGHT (v0.20, owner's call). Hovering a style
swaps that cell to the taller "full" form (name + XP bar), which used to grow the
whole card and shove every skill below it down the sidebar, then snap back on
mouse-out. The row now always occupies the taller height, so hovering only
changes what is drawn inside it and nothing else moves.
⚠️ If you change what `.sk-cell-full` renders, re-check this number. */
.sk-styles-row { display: flex; gap: 4px; align-items: stretch; min-height: 52px; }
.sk-style-cell {
flex: 1 1 0; min-width: 0; cursor: pointer; text-align: center;
background: transparent; border: 1px solid transparent; border-radius: 7px;
padding: 6px 4px; color: var(--ink); font-family: var(--ui-font);
transition: background .12s, border-color .12s;
}
.sk-style-cell:hover { background: var(--panel3); border-color: var(--border2); }
/* Compact form: icon over/next to the level, no name (there is no room for three).
⚠️ IT MUST FIT INSIDE THE CELL. A third of a sidebar card is about 72px, and the
`training` outline is drawn ON the cell — so the moment the content is wider than
the cell, the level text spills straight through that green border and looks
broken (v0.21, owner's item #11). The training dot is therefore NOT rendered in
the compact form (the outline already says which style is training) and the level
ellipsises rather than overflowing. */
.sk-cell-compact { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; overflow: hidden; }
.sk-cell-compact .sk-lvl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-cell-compact .sk-ico { width: auto; }
.sk-cell-full { display: none; }
/* HOVER: the other two cells collapse away and this one takes the whole card. */
.sk-styles-row:hover .sk-style-cell:not(:hover) { display: none; }
.sk-styles-row:hover .sk-style-cell:hover { flex-basis: 100%; text-align: left; }
.sk-style-cell:hover .sk-cell-compact { display: none; }
.sk-style-cell:hover .sk-cell-full { display: block; }
.sk-cell-full .sk-row { margin-bottom: 7px; }
.sk-style-cell.training { box-shadow: inset 0 0 0 1px rgba(88,201,107,.45); border-radius: 7px; }
/* ---- The progress bar (custom-image capable) ----------------------------- */
.skbar {
position: relative; height: 6px; background: rgba(255,255,255,.07);
border: 0; border-radius: 999px; overflow: hidden;
}
.skbar.big { height: 14px; border-radius: 999px; }
.skbar-fill {
position: absolute; inset: 0;
background: linear-gradient(90deg, #3fae57, #6cd684);
transition: clip-path .3s ease;
}
/* When a skill supplies a full-bar image, it spans the whole track and is
simply revealed left-to-right by the clip-path. */
.skbar-fill.img { background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; box-shadow: none; }
/* ---- Main panel ---------------------------------------------------------- */
/* ⚠️ `min-width: 0` IS LOAD-BEARING (v0.20) — do not delete it as redundant.
#main is a grid item, and a grid item's default `min-width: auto` refuses to
shrink below its content's intrinsic minimum. The Item and Mob Database pages
contain `.db-list { flex-basis: 440px }`, so on a 375px phone the whole column
was forced to 471px and the ENTIRE app scrolled sideways: the page, the top bar
and the tab bar with it. `min-width: 0` lets the column shrink to the viewport
so the database panels wrap instead. Any future wide panel (a table, a chart)
would have done the same thing. */
#main { flex: 1; min-width: 0; overflow-y: auto; padding: 26px 30px 36px; }
#main h1 {
font-family: var(--head-font); font-size: 26px; font-weight: 800; letter-spacing: -.01em;
margin: 0 0 4px; color: var(--ink);
}
#main h2 { font-family: var(--head-font); font-weight: 700; color: var(--ink); }
.panel-intro { color: var(--ink-dim); margin: 0 0 20px; max-width: 720px; line-height: 1.55; }
/* Skill page header */
.skill-header {
display: flex; align-items: center; gap: 18px; margin-bottom: 16px;
background: var(--panel2);
border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px;
}
.sh-ico { font-size: 40px; }
.sh-body { flex: 1; min-width: 0; }
.sh-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sh-top h1 { margin: 0; }
.sh-lvl { font-family: var(--head-font); font-size: 18px; font-weight: 700; color: var(--ink); }
.sh-lvl span { color: var(--ink-faint); font-size: 13px; font-weight: 600; }
/* Locked skill page */
.locked-page { text-align: center; padding: 60px 20px; color: var(--ink-dim); }
.lp-ico { font-size: 64px; opacity: .8; }
.locked-page h1 { margin: 12px 0 8px; }
.lp-badge {
display: inline-block; background: var(--panel2); border: 1px solid var(--border);
color: var(--ink-faint); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; font-weight: 600;
}
.locked-page .panel-intro { margin: 0 auto; max-width: 460px; }
/* ---- Skill page tabs (segmented control — still clearly tabs) ------------- */
.tab-bar {
display: inline-flex; gap: 4px; margin: 4px 0 18px; flex-wrap: wrap;
background: var(--panel); border: 1px solid var(--border);
border-radius: 10px; padding: 4px;
}
.tab {
background: transparent; border: 0; color: var(--ink-dim);
font-family: var(--ui-font); font-size: 14px; font-weight: 600; cursor: pointer;
padding: 7px 16px; border-radius: 7px; transition: all .1s;
}
.tab:hover { color: var(--ink); background: var(--panel2); }
.tab.active {
background: var(--panel3);
color: var(--gold-2);
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* Gear/tool stat line on action & no card overflow */
.ac-stats { font-size: 12px; color: var(--ink); margin-top: 4px; font-weight: 600; }
/* Sub-tab chips (e.g. pick a tool type in Tool Smithing) */
.subtab-bar { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.subtab {
background: var(--panel); border: 1px solid var(--border); color: var(--ink-dim);
font-family: var(--ui-font); font-size: 13px; font-weight: 600; cursor: pointer;
padding: 6px 14px; border-radius: 999px; transition: all .1s;
}
.subtab:hover { color: var(--ink); border-color: var(--border2); }
.subtab.active { background: rgba(234,181,67,.14); color: var(--gold-2); border-color: var(--gold); }
/* Craft-quantity modal */
.craft-recipe { font-size: 13px; color: var(--ink-dim); text-align: center; margin-bottom: 14px; }
.craft-qrow { display: flex; align-items: center; gap: 12px; }
/* ⚠️ THE HIT AREA IS DELIBERATELY TALLER THAN THE BAR (v0.23). A range input with
* no height is ~16px in Chrome, which is a small thing to grab when it sits under
* a text label — miss it by three pixels upward and you are dragging the label's
* text instead, which does nothing. `height` on the input enlarges the box the
* browser hit-tests without changing how the track is drawn. Applies to every
* slider in the game (craft quantity, buy/sell amount, battle count, food). */
.craft-slider { flex: 1; accent-color: var(--gold); height: 24px; cursor: pointer; }
.qbtn-step {
width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: 20px; font-weight: 700; cursor: pointer;
background: var(--panel3); color: var(--gold-2); border: 1px solid var(--border2);
}
.qbtn-step:hover { filter: brightness(1.12); }
.craft-count { text-align: center; color: var(--ink-dim); font-size: 14px; margin: 10px 0 16px; }
.craft-count b { color: var(--gold-2); font-size: 18px; }
.craft-note { text-align: center; color: var(--ink-faint); font-size: 12px; margin: -8px 0 14px; }
/* Equipped totals (below the Equipment panel) */
.equip-totals {
margin-top: 12px; background: var(--panel2);
border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
display: flex; flex-direction: column; gap: 6px;
}
.equip-totals div { display: flex; justify-content: space-between; font-size: 14px; }
.equip-totals span { color: var(--ink-dim); }
.equip-totals b { color: var(--ink); }
/* Inventory tab's equipped-stat totals: two columns so the panel stays compact. */
.equip-totals.stat-totals {
/* auto-fit, NOT a fixed 2 columns: in the Character page's 300px column two
"label value" pairs do not fit and used to spill outside the panel. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 22px;
background: var(--panel);
}
.equip-totals.stat-totals div { gap: 10px; min-width: 0; }
.equip-totals.stat-totals span {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.equip-totals.stat-totals b { white-space: nowrap; }
/* Region block banner (a production skill you can't do in the current zone) */
.zone-block-banner {
background: rgba(226,92,77,.10); border: 1px solid rgba(226,92,77,.55); border-radius: var(--radius-sm);
padding: 13px 18px; margin: 0 0 18px; max-width: 720px; line-height: 1.5;
color: var(--red); font-weight: 600;
}
/* Empty tab (e.g. Cooking → Meat before combat) */
.empty-tab {
background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
padding: 28px 22px; color: var(--ink-faint); max-width: 620px; line-height: 1.5;
}
/* ---- Card grids ---------------------------------------------------------- */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Action cards */
.action-card {
position: relative;
background: var(--panel2);
border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 16px;
display: flex; flex-direction: column; align-items: center; text-align: center;
transition: transform .1s, border-color .12s, box-shadow .12s;
}
.action-card:hover { transform: translateY(-2px); border-color: var(--border2); box-shadow: var(--shadow); }
.action-card.active { outline: 2px solid var(--gold); outline-offset: -2px; }
.action-card.locked { opacity: .55; }
.action-card.locked:hover { transform: none; }
.ac-q { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.item-art {
width: 72px; height: 72px; object-fit: contain;
image-rendering: pixelated; image-rendering: crisp-edges;
filter: drop-shadow(0 3px 5px rgba(0,0,0,.45));
}
.img-missing {
background: repeating-linear-gradient(45deg, var(--panel3), var(--panel3) 6px, var(--panel2) 6px, var(--panel2) 12px);
border-radius: 6px;
}
.ac-name { font-family: var(--head-font); font-weight: 700; font-size: 15px; margin-top: 8px; }
.ac-meta { font-size: 12px; color: var(--gold); margin-top: 3px; font-weight: 600; }
.ac-recipe { font-size: 12px; color: var(--ink-dim); margin-top: 7px; line-height: 1.5; }
.ac-have { color: var(--ink-faint); }
.ac-lock { font-size: 12px; color: var(--ink-faint); margin-top: 10px; }
/* The recipe state shown BESIDE a level lock (v0.23, owner's item #7). It sits on
its own line under the level requirement so the card reads as two facts rather
than one run-on sentence, and "learned" is green because it is the good news. */
.ac-recipe-state { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; }
.ac-recipe-state.known { color: var(--green); }
.ac-recipe-state.missing { color: var(--ink-faint); }
/* v0.27: the "N crafts left" line on a SINGLE-USE recipe's card. It sits on its
own row above the button, so it reads as a stock count rather than a lock. */
.ac-oneuse { margin-top: 4px; }
/* ---- Buttons ------------------------------------------------------------- */
.btn {
margin-top: 10px; padding: 8px 18px; cursor: pointer;
font-family: var(--ui-font); font-size: 14px; font-weight: 700; color: #221808;
background: var(--gold);
border: 1px solid transparent; border-radius: var(--radius-sm); transition: filter .1s, transform .06s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--panel3); color: var(--ink-faint); border-color: var(--border); cursor: default; transform: none; }
.btn.btn-full:disabled { color: var(--red); border-color: rgba(226,92,77,.55); background: rgba(226,92,77,.10); font-weight: 700; }
.btn.stop { background: var(--red); border-color: transparent; color: #fff; }
/* ---- Inventory & Equipment (rehauled 2026-07-13: framed sections) --------- */
.inv-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
/* Each section (Inventory / Equipment / Tools) is its own framed panel. */
.inv-sec {
background: var(--panel2); border: 1px solid var(--border); border-radius: 14px;
padding: 16px 18px; box-shadow: var(--shadow);
}
.inv-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* The bag panel hugs its fixed 6-wide grid instead of stretching wider than the slots
(which left dead space to the right of the grid). It will grow naturally when more
inventory columns/rows are added later. Fixed 2026-07-17. */
.inv-sec-bag { flex: 0 1 auto; min-width: 0; }
.inv-sec-equip, .inv-sec-tools { flex: 0 0 auto; }
.inv-title { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.inv-count { color: var(--ink-faint); font-size: 13px; }
.inv-hint { color: var(--ink-faint); font-size: 12px; margin: 0 0 12px; }
/* The bag grid fills its panel's width (slots stay square). The Inventory tab's bag is a
FIXED 6 × 4 = 24 (--inv-cols, set from MIG.INV_COLS by ui.js so the two can't drift), and its
slots are exactly --slot-size, matching the Equipment and Tools panels beside it.
Other .inv-grid users (the bank) keep the responsive auto-fill below. */
.inv-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(var(--slot-size), 1fr)); }
.inv-grid.inv-bag { grid-template-columns: repeat(var(--inv-cols, 6), var(--slot-size)); justify-content: start; }
.inv-slot {
position: relative; aspect-ratio: 1 / 1; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.inv-slot.empty { border: 1px dashed var(--border); background: rgba(255,255,255,.02); }
.inv-slot.filled {
background: var(--panel2);
border: 1px solid var(--border); cursor: pointer; transition: transform .08s, filter .1s;
}
.inv-slot.filled:hover { transform: translateY(-2px); filter: brightness(1.1); }
.inv-slot .item-art { width: 70%; height: 70%; }
/* ⚠️⚠️ THE `z-index` ON THESE TWO BADGES IS LOAD-BEARING (v0.34, a player report:
"item art is in FRONT of the text of the item, same thing with the +x text").
BOTH badges are `position: absolute` with `z-index: auto`, and by the plain reading
of the painting order that puts them ABOVE a static `![]()
` sibling. It did not,
and the reason is one line 70 lines above this one:
.item-art { filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
**A `filter` other than `none` creates a STACKING CONTEXT.** That makes the image
paint as an atomic unit in the same layer as positioned siblings, and since the
markup is `badge, badge, img` the image comes LAST in tree order and wins. So the
quantity count and the "+2" were painted UNDER the artwork - worst on a busy or
pale picture, which is why it reached us as "some users" rather than everyone.
⚠️ Fixing it on the IMG (dropping the shadow, or `z-index: -1`) would either lose
the art's shadow everywhere or push the picture behind its own slot background.
The badges are the things that must be on top, so they say so.
⚠️ THE SAME TRAP APPLIES TO ANY FUTURE BADGE over `.item-art`, and to any element
that gains a `filter`, `transform`, `opacity < 1`, `will-change` or `mix-blend-mode`
- every one of those silently promotes it into the positioned layer. */
/* ⚠️⚠️ AND BEING ON TOP IS NOT THE SAME AS BEING READABLE (2026-09-05, the
owner's screenshot). The art is 70% of the slot, so the badge ALWAYS overlaps its
top-right corner - and once the z-index above put the digits in front, they landed
on the picture, where gold-on-grey-rock loses the bottom half of every glyph. A
text-shadow cannot fix that: it darkens what is behind the strokes, which is exactly
what a busy texture already is.
⚠️ SO THE BADGE CARRIES ITS OWN GROUND. A dark pill is the game's own language
for a number over something else - the top bar's HP, gold and gem chips are all
pills - and it makes the count legible over any artwork we ever draw.
⚠️ The padding stays inside the tile: 30px of digits plus 10px of padding against
a 71px slot on the narrowest phone. */
.inv-qty {
position: absolute; top: 3px; right: 4px; font-weight: 700; font-size: 12px;
color: var(--gold-2); text-shadow: 0 1px 2px #000;
background: rgba(10, 8, 5, .82); border-radius: 7px; padding: 0 5px;
line-height: 16px; pointer-events: none;
z-index: 2;
}
/* GEAR UPGRADE badge (v0.27) — the "+2" on an upgraded piece, bottom LEFT so it
can never sit under the quantity badge in the top right. Both a bag tile and
an equipment slot use it, and both are `position: relative` already. */
.inv-upg {
position: absolute; bottom: 3px; left: 4px; font-weight: 800; font-size: 12px;
color: var(--gold); text-shadow: 0 1px 2px #000; pointer-events: none;
/* The same pill as `.inv-qty`, for the same reason - it sits over the artwork too. */
background: rgba(10, 8, 5, .82); border-radius: 7px; padding: 0 5px; line-height: 16px;
z-index: 2; /* see the note on .inv-qty - `.item-art`'s drop-shadow filter makes the picture a stacking context */
}
/* The before/after rows in the gear upgrade popup. */
.gu-arrow { color: var(--ink-faint); margin: 0 2px; }
.gu-nogain { color: var(--ink-faint); font-weight: 600; }
.gu-stone { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
/* Equipment panel */
.equip-panel {
background: var(--panel);
border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
}
.equip-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.equip-row:last-child { margin-bottom: 0; }
.equip-cell { width: var(--slot-size); }
.equip-cell.spacer { visibility: hidden; }
.equip-slot {
width: var(--slot-size); height: var(--slot-size); border-radius: 10px;
background: rgba(255,255,255,.03); border: 1px solid var(--border);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.equip-slot.filled { position: relative; background: var(--panel2); }
.equip-slot.filled .inv-qty { font-size: 11px; } /* equipped-ammo stack count */
.equip-slot .item-art { width: 78%; height: 78%; }
.eq-ico { font-size: 22px; opacity: .5; }
.eq-label { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
/* Bespoke empty-slot icons (assets/Art/Equipment/*.png). Sized like the emoji
they replace; `img.slot-img` wins over the font-size rules above. Kept dimmer
than equipped art so an empty slot still reads as empty. */
/* `object-fit: contain` keeps each icon's own aspect ratio (the art is portrait,
not square), so nothing is stretched. Sized to sit between the tiny emoji they
replaced and the 78% an EQUIPPED item's art fills, and kept dimmed so an empty
slot still reads as empty at a glance. The Inventory slot also carries a text
label underneath, so its icon is a little smaller than the Character page's. */
img.slot-img { display: block; object-fit: contain; opacity: .6; }
.eq-ico.slot-img { width: 38px; height: 38px; }
.slot-ico.slot-img { width: 46px; height: 46px; }
.equip-slot.pet-slot img.slot-img { opacity: .45; }
/* The reserved PET slot (Beast Mastery Phase 2) — dashed until pets exist. */
.equip-slot.pet-slot { border-style: dashed; }
.equip-slot.pet-slot .eq-ico { opacity: .35; }
.equip-slot.pet-slot .eq-label { opacity: .75; }
/* ---- Vendor popup -------------------------------------------------------- */
.popup-overlay {
position: fixed; inset: 0; z-index: 100;
background: rgba(6,7,9,.72); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
}
.popup {
position: relative; width: 320px; max-width: 90vw;
background: var(--panel2);
border: 1px solid var(--border2); border-radius: 16px; padding: 20px;
box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
/* ⚠️ The ✕ is CENTRED BY FLEX (v0.20), not by luck. Without this the glyph is laid
out on a text baseline inside a 26px box, so it sat high and slightly left — and
how far off depended on the font, which is why it looked fine on desktop and
wrong on phones. `line-height: 1` and zero padding stop the button's own text
metrics from moving it again. Every close button in the game uses this class. */
.popup-x {
position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: var(--radius-sm);
background: transparent; border: 1px solid var(--border); color: var(--ink-dim); cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 0; line-height: 1; font-size: 13px; font-family: var(--ui-font);
}
.popup-x:hover { color: var(--red); border-color: var(--red); }
.popup-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.popup-art { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; }
.popup-name { font-family: var(--head-font); font-weight: 700; font-size: 19px; }
.popup-q { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.popup-meta {
display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--popup-gap);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0;
}
.popup-meta div { display: flex; justify-content: space-between; font-size: 14px; }
/* An item's FLAVOUR TEXT (v0.22, `item.desc`). It is a sentence, not a label and
a value, so it overrides the space-between row layout it sits among. Reads like
a mob's description on purpose — same italic, same dimmed ink. */
.popup-meta .item-desc {
display: block; font-style: italic; color: var(--ink-dim); font-size: 13px; line-height: 1.45;
}
/* Stat comparison against the item worn in the same slot (v0.20 item #9).
Green up = better, red down = worse, yellow = identical. The arrow's `title`
names the equipped item and its value, so the exact difference is one hover
away without cluttering the row. */
/* "You have no quiver" notice in the Inventory's ammo column (v0.23). Amber
rather than red: firing from the slot is a valid way to play, just a limited
and lossy one, and the panel exists to explain the trade rather than scold. */
/* The character BIO (v0.25, owner's item #8) — the player's own words on their
public page. Rendered with esc() like every other player string. */
.ch-bio {
background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 18px; margin: 0 0 16px;
}
.ch-bio-head {
display: flex; align-items: center; gap: 10px;
font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
color: var(--ink-faint); margin-bottom: 8px;
}
.ch-bio-btn { margin-top: 0; margin-left: auto; padding: 5px 12px; font-size: 12px; }
.ch-bio-count { margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none; }
.ch-bio-count.over { color: var(--red); }
.ch-bio-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); white-space: pre-wrap; }
.ch-bio-text.dim { color: var(--ink-faint); font-style: italic; }
.ch-bio-input {
width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border2);
border-radius: var(--radius-sm); padding: 9px 12px; color: var(--ink);
font-family: var(--ui-font); font-size: 14px; line-height: 1.5; resize: vertical;
}
.ch-bio-input:focus { outline: none; border-color: var(--gold); }
.ch-bio-msg { margin-top: 8px; font-size: 12.5px; color: var(--red); }
.ch-bio-actions { display: flex; gap: 8px; margin-top: 10px; }
.ch-bio-actions .btn { margin-top: 0; }
/* Admin panel: the bio and its Clear button. */
.adm-bio { display: flex; align-items: flex-start; gap: 12px; }
.adm-bio-text { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); white-space: pre-wrap; }
.adm-bio-text.dim { color: var(--ink-faint); font-style: italic; }
.adm-bio .btn { margin-top: 0; flex-shrink: 0; }
/* The Character page's current-activity panel (v0.25, owner's item #7). Replaced
a one-line "⏳ Mining Coal" with the item's art, a live bar and the countdown. */
.ch-act-panel {
display: flex; align-items: center; gap: 16px;
background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 18px; margin: 0 0 16px; box-shadow: var(--shadow);
}
.ch-act-panel.idle { opacity: .72; }
.ch-act-art-wrap {
width: 56px; height: 56px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ch-act-art { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.item-ico.ch-act-art, .ch-act-ico { font-size: 30px; line-height: 1; }
.ch-act-body { flex: 1; min-width: 0; }
.ch-act-label {
font-size: 17px; font-weight: 700; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-act-sub { font-size: 12.5px; color: var(--ink-faint); margin: 2px 0 9px; }
.ch-act-sub span { color: var(--gold-2); font-weight: 700; }
.ch-act-bar { height: 10px; }
@media (max-width: 620px) {
.ch-act-panel { padding: 12px 13px; gap: 12px; }
.ch-act-art-wrap { width: 46px; height: 46px; }
.ch-act-art { width: 36px; height: 36px; }
.ch-act-label { font-size: 15px; }
}
.quiver-warn {
background: #241d10; border: 1px solid #5a4a24; border-radius: var(--radius-sm);
padding: 11px 13px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--gold-2);
}
.quiver-warn b { color: var(--gold-2); }
.stat-cmp { font-size: 11px; margin-left: 5px; font-weight: 700; }
.cmp-up { color: var(--green); }
.cmp-down { color: var(--red); }
.cmp-same { color: var(--gold); }
.popup-meta span { color: var(--ink-faint); }
.popup-meta b { color: var(--ink); }
/* Popup buttons always sit one consistent gap below whatever precedes them. Without this
they touched the block above (a note, a drop list) in some popups but not others,
because only .popup-meta reserved space beneath itself. */
/* ⚠️ THIS ROW WRAPS, AND ITS BUTTONS MAY SHRINK. Both halves are load-bearing (v0.26).
The popup is only 320px wide, so THREE buttons never fitted on one line — a recipe
the player already knows shows "Already known" + "Vendor… (+20g)" + "🏪 Market…".
With `flex: 1` and no wrap they could not shrink either, because a flex item's
default `min-width: auto` refuses to go below its own min-content width, so the
last button hung ~23px OUTSIDE the popup's rounded border. `flex-wrap` puts two on
a line and the third on its own; `min-width: 0` is the backstop for any single
label long enough to overflow on its own. The phone block used to carry these two
rules for itself — they belong here, at every width. */
.popup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--popup-gap); }
/* .popup-meta already contributes the same gap below itself — don't double it. */
.popup-meta + .popup-actions { margin-top: 0; }
.popup-actions .btn { flex: 1 1 44%; min-width: 0; margin-top: 0; }
/* ---- THE ALTAR (v0.26) ---------------------------------------------------- */
/* The pill that sits in the Combat tab's POI bar, and the shrine popup it opens.
The owner's brief: NOT the world boss's red, a whitish bar instead, and text
with something in it rather than an empty label. So the altar reads as candle
light - a warm white wash and a pale bar - and every state says what it is,
what it gives, and what today's tithes are buying for tomorrow. */
/* ⚠️ THE BEACON'S COLOUR *IS* THE TIER (v0.26, the owner's spec), so it can be
read from across the Combat tab without opening anything:
unlit candle white · T1 green · T2 blue · T3 the mythic orange
One variable, `--beacon`, drives the border, the halo and the progress bar, so
a tier cannot end up half-recoloured. T3 deliberately borrows the MYTHIC ladder
colour the rarest items already use — it is the brightest thing in the game's
palette and the owner asked for the altar's best state to feel like one. */
.altar-pill, .altar-item {
--beacon: 238, 233, 220; /* dark: the candle white it has always had */
}
.beacon-t1 { --beacon: 85, 201, 95; } /* green — matches --q-uncommon */
.beacon-t2 { --beacon: 79, 156, 245; } /* blue — matches --q-rare */
.beacon-t3 { --beacon: 255, 122, 44; } /* orange — the mythic ladder colour */
.altar-pill {
border-color: rgba(var(--beacon), .30) !important;
background: linear-gradient(180deg, rgba(var(--beacon),.09), rgba(var(--beacon),.03)) !important;
gap: 4px;
}
.altar-pill:hover { border-color: rgba(var(--beacon), .55) !important; }
/* Lit: brighter edge and a halo in the beacon's own colour, so a burning altar
is visible at a glance without shouting like a boss fight does. */
.altar-pill.lit {
border-color: rgba(var(--beacon), .60) !important;
box-shadow: 0 0 0 1px rgba(var(--beacon),.12) inset, 0 0 18px -6px rgba(var(--beacon),.55);
}
/* T3 is the one that gets to move, the way a mythic item does. */
.altar-pill.beacon-t3.lit {
box-shadow: 0 0 0 1px rgba(var(--beacon),.16) inset, 0 0 22px -6px rgba(var(--beacon),.75);
animation: beaconpulse 3s ease-in-out infinite;
}
@keyframes beaconpulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(var(--beacon),.16) inset, 0 0 18px -7px rgba(var(--beacon),.60); }
50% { box-shadow: 0 0 0 1px rgba(var(--beacon),.22) inset, 0 0 26px -5px rgba(var(--beacon),.95); }
}
.altar-tier-chip {
display: inline-block; margin-left: 6px; padding: 1px 7px;
border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
background: rgba(var(--beacon, 238,233,220),.16); color: rgb(var(--beacon, 238,233,220));
border: 1px solid rgba(var(--beacon, 238,233,220),.35);
}
/* The progress bar. WHITISH on purpose - see the note above. */
.altar-bar {
display: block; width: 100%; height: 5px; margin-top: 6px;
border-radius: 999px; overflow: hidden;
background: rgba(255,255,255,.10);
}
/* ⚠️ INSIDE THE POI CARD the bar is the card's BOTTOM EDGE, not a row of its own —
that is what lets the altar match a two-line POI card exactly. The pill clips it
to its own corners. */
.altar-pill { position: relative; overflow: hidden; }
/* A guarantee rather than a hope: even if the wording grows, the altar's sub line
can never wrap and push the card taller than the POI cards beside it. */
.altar-pill .poi-pill-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.altar-pill .altar-bar {
position: absolute; left: 0; right: 0; bottom: 0; width: auto;
height: 4px; margin: 0; border-radius: 0;
}
.altar-bar.wide { height: 9px; margin: 6px 0; }
/* The fill is the beacon's colour too, so the bar and the frame can never
disagree about what tier is burning. */
.altar-bar-fill {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, rgba(var(--beacon, 238,233,220),.55), rgba(var(--beacon, 238,233,220),.95));
}
.altar-bar-note {
display: block; margin-top: 4px;
font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
/* ---- The shrine popup ---- */
.altar-popup { width: 420px; }
.altar-progress {
margin: var(--popup-gap) 0 0; padding: 10px 12px;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.altar-progress-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.altar-progress-head span { color: var(--ink-dim); }
.altar-progress-head b { color: var(--ink); font-variant-numeric: tabular-nums; }
.altar-progress-sub { font-size: 11.5px; color: var(--ink-faint); }
.altar-rows { display: flex; flex-direction: column; gap: 8px; margin-top: var(--popup-gap); }
.altar-row {
padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--panel); border: 1px solid var(--border);
opacity: .55; /* an unlit tier is visible but plainly off */
}
.altar-row.on {
opacity: 1;
border-color: rgba(238,233,220,.42);
background: linear-gradient(180deg, rgba(238,233,220,.07), transparent), var(--panel);
}
.altar-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.altar-row-name { font-weight: 700; }
.altar-row-cost { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.altar-boosts { margin: 6px 0 8px; padding-left: 18px; }
.altar-boosts li { font-size: 12.5px; color: var(--ink-dim); }
.altar-row.on .altar-boosts li { color: var(--ink); }
.altar-pray-btn { width: 100%; margin-top: 0; background: #eee9dc; color: #241f16; }
/* Inside the popup each tier's row carries its own beacon colour, so the three
are told apart at a glance and match the pill that opened them. */
.altar-row { --beacon: 238, 233, 220; }
.altar-row.tier-1 { --beacon: 85, 201, 95; }
.altar-row.tier-2 { --beacon: 79, 156, 245; }
.altar-row.tier-3 { --beacon: 255, 122, 44; }
.altar-row.on { border-color: rgba(var(--beacon),.45); }
.altar-row.on .altar-row-name { color: rgb(var(--beacon)); }
.altar-row.on .altar-pray-btn { background: rgb(var(--beacon)); color: #1b1710; }
/* The Admin tab's threshold editor. */
.adm-altar-now { font-size: 12.5px; color: var(--ink-dim); margin: 4px 0 10px; }
.adm-altar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.adm-altar-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-dim); }
/* The read-only altar row at the foot of the World Map's zone panel. */
.altar-item {
border-color: rgba(var(--beacon),.28) !important;
background: linear-gradient(180deg, rgba(var(--beacon),.07), transparent) !important;
}
.altar-item.lit { border-color: rgba(var(--beacon),.55) !important; }
/* ---- The indulgence box (v0.26), inside a priest's conversation ------------ */
.indulge-box {
margin: 12px 0; padding: 12px 14px;
background: var(--panel); border: 1px solid rgba(238,233,220,.28);
border-radius: var(--radius-sm);
}
.indulge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; }
.indulge-purse { font-weight: 400; font-size: 12.5px; color: var(--ink-dim); }
.indulge-note { margin: 6px 0 10px; font-size: 12.5px; color: var(--ink-dim); }
.indulge-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.indulge-input {
flex: 1 1 140px; min-width: 0; padding: 8px 10px;
background: var(--panel2); color: var(--ink);
border: 1px solid var(--border2); border-radius: var(--radius-sm);
font-family: var(--ui-font); font-size: 14px;
}
.indulge-input:focus { outline: none; border-color: var(--gold); }
.indulge-go { margin-top: 0; flex: 0 0 auto; background: #eee9dc; color: #241f16; }
.indulge-msg { margin: 8px 0 0; font-size: 12.5px; }
.indulge-msg.bad { color: var(--red); }
.indulge-msg.ok { color: var(--green); }
/* ---- The Class / Profession Change chooser (v0.26) ------------------------ */
.writ-popup { width: 440px; }
.writ-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px; margin-top: var(--popup-gap);
}
.writ-card {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 12px 10px; cursor: pointer; text-align: center;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
color: var(--ink); font-family: var(--ui-font);
transition: border-color .12s, background .12s;
}
.writ-card:hover { border-color: var(--gold); background: var(--panel3); }
.writ-card.sel { border-color: var(--gold); background: rgba(234,181,67,.10); }
.writ-ico { font-size: 26px; line-height: 1; }
.writ-name { font-weight: 700; font-size: 14px; }
.writ-perk { font-size: 11.5px; color: var(--ink-faint); }
.writ-check { position: absolute; top: 6px; right: 8px; color: var(--gold); font-weight: 700; }
/* ---- Logbook ------------------------------------------------------------- */
.log-list { display: flex; flex-direction: column; gap: 3px; max-width: 820px; }
.log-row {
display: flex; gap: 14px; padding: 8px 12px; border-radius: var(--radius-sm);
background: var(--panel); border-left: 3px solid var(--border2);
}
.log-row:nth-child(even) { background: var(--bg2); }
.log-time { color: var(--ink-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.log-msg { color: var(--ink-dim); }
.log-row.level { border-left-color: var(--gold); } .log-row.level .log-msg { color: var(--gold-2); }
.log-row.start { border-left-color: var(--green); }
.log-row.stop { border-left-color: var(--red); }
.log-row.warn { border-left-color: var(--red); } .log-row.warn .log-msg { color: var(--red); }
/* ---- Active task bar ----------------------------------------------------- */
#activeBar {
border-top: 1px solid var(--border);
background: var(--bg2);
padding: 12px 22px;
min-height: 76px; display: flex; align-items: center;
}
.ab-idle { color: var(--ink-faint); font-size: 15px; width: 100%; text-align: center; }
#activeBar.running { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 24px; align-items: center; }
.ab-left { display: flex; align-items: center; gap: 14px; }
.ab-art {
width: 52px; height: 52px; object-fit: contain;
image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.ab-title { font-family: var(--head-font); font-weight: 700; font-size: 17px; }
.ab-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.ab-mid { width: 100%; }
.ab-prog {
position: relative; height: 18px; background: rgba(255,255,255,.07);
border: 0; border-radius: 999px; overflow: hidden;
}
.ab-prog-fill {
height: 100%; width: 0; background: linear-gradient(90deg, #3fae57, #6cd684);
/* No width transition on purpose: ui.js drives this fill every animation frame
(requestAnimationFrame) from the task's real timestamps, so it's already
smooth. A CSS glide would trail behind the countdown and replay stale
movement after alt-tabbing back to the game. */
}
.ab-prog-label {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600; color: var(--ink); text-shadow: 0 1px 2px #000;
}
.ab-right { display: flex; align-items: center; gap: 16px; }
/* Square active-bar buttons: 🔄 refresh + the red ✕ stop, same size side by side */
.ab-sq {
width: 42px; height: 42px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 17px; line-height: 1;
}
.ab-right .ab-sq + .ab-sq { margin-left: -6px; }
.ab-countdown {
font-family: var(--ui-font); font-size: 26px; font-weight: 800; letter-spacing: .5px;
color: var(--ink); font-variant-numeric: tabular-nums;
}
#activeBar .btn { margin-top: 0; }
/* Active stat effects (Inventory → Equipment panel button + breakdown popup) */
.fx-btn { margin-top: 10px; width: 100%; }
.fx-popup { max-height: 82vh; overflow-y: auto; }
.fx-hint { font-size: 12px; color: var(--ink-dim); margin: 8px 0 4px; line-height: 1.5; }
.fx-rows div span { color: var(--ink-dim); }
.fx-empty { color: var(--ink-faint); font-style: italic; padding: 12px 0; }
/* Battle panel: your stats and the enemy's, side by side (stacks when narrow) */
/* Your stats vs the enemy's. Named rows keep the two sides ALIGNED: the enemy
has a description line the player does not, and as two independent columns
that pushed every enemy stat row out of step with yours (#2, 2026-07-25).
Each row now shares one height across both columns. Stacked on a phone. */
.battle-stats-duo {
display: grid; gap: 0 20px; align-items: start;
grid-template-columns: 1fr;
grid-template-areas: "yhead" "ydesc" "ystats" "ehead" "edesc" "estats";
}
@media (min-width: 821px) {
.battle-stats-duo {
grid-template-columns: 1fr 1fr;
grid-template-areas: "yhead ehead" "ydesc edesc" "ystats estats";
}
}
.bsd-yhead { grid-area: yhead; } .bsd-ehead { grid-area: ehead; }
.bsd-ydesc { grid-area: ydesc; } .bsd-edesc { grid-area: edesc; }
.bsd-ystats { grid-area: ystats; } .bsd-estats { grid-area: estats; }
/* Sidebar character card (skin + username, top of the sidebar) */
.side-char {
display: flex; align-items: center; gap: 9px;
padding: 9px 12px; margin-bottom: 8px;
background: var(--panel2); border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.side-char-ico { font-size: 22px; line-height: 1; }
.side-char-name {
font-weight: 800; font-size: 14px; color: var(--gold-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Name card + mailbox chip share one row; the card takes the slack. */
.side-char-wrap { display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px; }
.side-char-wrap .side-char { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
/* The same pairing for a NAV ROW plus a square chip (#6, v0.16): the World Map
chip rides the Inventory button exactly the way the mailbox rides the
character card above. Any future row + chip pair should reuse this. */
.side-row-wrap { display: flex; align-items: stretch; gap: 6px; margin-bottom: 4px; }
/* The Inventory button is FRAMED like the character card and the two chips
beside it (#5, v0.17), so the row reads as one unit instead of a bare label
sitting next to two boxes. Only the nav item inside a row-wrap gets this —
the plain nav rows below are unchanged. */
.side-row-wrap .nav-item {
flex: 1 1 auto; min-width: 0;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.side-row-wrap .nav-item:hover { border-color: var(--gold); }
.side-row-wrap .nav-item.active { border-color: var(--gold); background: var(--panel3, var(--panel2)); }
.side-map .side-mail-ico { opacity: 1; }
/* The MAILBOX chip: a square button at the right of the name card, badged with
the unread count (2026-07-24). */
.side-mail {
position: relative; flex: 0 0 auto; width: 40px;
display: flex; align-items: center; justify-content: center;
background: var(--panel2); border: 1px solid var(--border);
border-radius: var(--radius-sm); cursor: pointer; color: inherit;
}
.side-mail:hover { border-color: var(--gold); }
.side-mail.active { border-color: var(--gold); background: var(--panel3, var(--panel2)); }
.side-mail-ico { font-size: 17px; line-height: 1; opacity: .8; }
.side-mail.has-mail .side-mail-ico { opacity: 1; }
.side-mail-badge {
position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
background: var(--red, #c0392b); color: #fff;
font-size: 10px; font-weight: 800; line-height: 1; border-radius: 999px;
border: 1px solid var(--bg);
}
/* Mailbox tab */
.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail-item {
display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.mail-item.unread { border-left: 3px solid var(--gold); background: var(--panel2); }
.mail-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.mail-body { flex: 1 1 auto; min-width: 0; }
.mail-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mail-top b { font-size: 14px; }
.mail-top span { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.mail-text { margin-top: 3px; font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
.mail-x {
flex: 0 0 auto; background: none; border: none; color: var(--ink-faint);
cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 6px;
}
.mail-x:hover { color: var(--red, #e06c6c); background: rgba(255,255,255,.06); }
/* Metrics tab — grouped stat cards */
.metric-sec { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .4px; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.metric {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
background: var(--panel2); border: 1px solid var(--border2);
border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px;
}
.metric span { color: var(--ink-dim); }
.metric b { font-weight: 800; color: var(--ink); text-align: right; }
/* ============================================================================
* CHARACTER CREATION — full-screen overlay shown until state.character exists
* ==========================================================================*/
#charCreate {
position: fixed; inset: 0; z-index: 200;
background: var(--bg);
display: flex; align-items: flex-start; justify-content: center;
overflow-y: auto; padding: 28px 18px;
}
/* Full-screen "you are banned" notice (js/net.js showBanned). Sits above
everything, including the character-creation overlay. */
#banOverlay {
position: fixed; inset: 0; z-index: 500;
background: var(--bg);
display: flex; align-items: center; justify-content: center;
overflow-y: auto; padding: 28px 18px;
}
#banOverlay .ban-card {
width: min(520px, 100%); text-align: center;
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: 34px 30px;
}
#banOverlay .ban-emoji { font-size: 52px; margin-bottom: 8px; }
#banOverlay h1 { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
#banOverlay p { color: var(--ink-dim); margin: 8px 0; }
#banOverlay .ban-reason { color: var(--ink); }
#banOverlay a { color: var(--gold); }
#banOverlay .ban-signout { margin-top: 18px; }
/* Admin tab (moderation panel). */
.adm-box {
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; max-width: 640px;
}
.adm-label, .adm-sub { font-weight: 700; font-size: 13px; margin: 4px 0 6px; color: var(--ink-dim); }
.adm-sub { margin-top: 16px; color: var(--ink); }
.adm-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.adm-input {
flex: 1 1 180px; min-width: 140px; padding: 9px 11px; font-size: 14px; color: var(--ink);
background: var(--panel2); border: 1px solid var(--border2); border-radius: var(--radius-sm);
font-family: var(--ui-font);
}
.adm-input:focus { outline: none; border-color: var(--gold); }
.adm-select { flex: 0 0 auto; min-width: 120px; }
.adm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.adm-danger { background: var(--danger, #b3402f); border-color: var(--danger, #b3402f); color: #fff; }
.adm-player { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.adm-status { font-size: 14px; margin-bottom: 6px; }
.adm-tag {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
background: var(--gold); color: #201a0a; padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}
.adm-msg { max-width: 640px; font-size: 14px; }
.adm-ok { color: var(--success, #6fbf73); }
.adm-bad { color: var(--danger, #e06c6c); }
.cc-card {
width: min(720px, 100%);
background: var(--panel); border: 1px solid var(--border);
border-radius: var(--radius); padding: 26px 30px 30px;
}
.cc-title { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.cc-intro { color: var(--ink-dim); font-size: 14px; margin-bottom: 14px; }
.cc-label { display: block; font-weight: 700; font-size: 14px; margin: 18px 0 8px; }
.cc-hint { color: var(--ink-faint); font-weight: 400; font-size: 12px; margin-left: 6px; }
.cc-name {
width: 100%; padding: 10px 12px; font-size: 15px; color: var(--ink);
background: var(--panel2); border: 1px solid var(--border2); border-radius: var(--radius-sm);
font-family: var(--ui-font);
}
.cc-name:focus { outline: none; border-color: var(--gold); }
.cc-name-msg { color: var(--danger, #e06c6c); font-size: 12px; min-height: 16px; margin: 4px 2px 0; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 8px; }
.cc-skins { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.cc-chip {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
padding: 12px 8px; background: var(--panel2); border: 1px solid var(--border2);
border-radius: var(--radius-sm); cursor: pointer; color: var(--ink);
font-family: var(--ui-font);
transition: border-color .12s, background .12s, transform .08s;
}
.cc-chip:hover { transform: translateY(-1px); border-color: var(--border); }
.cc-chip.sel { border-color: var(--gold); background: var(--panel3); box-shadow: 0 0 0 1px var(--gold) inset; }
.cc-chip .cc-ico { font-size: 26px; line-height: 1.1; }
.cc-chip .cc-nm { font-weight: 700; font-size: 13px; }
.cc-chip .cc-buff { font-size: 11.5px; font-weight: 600; color: var(--gold-2); }
.cc-chip .cc-blurb { font-size: 11px; color: var(--ink-faint); }
.cc-start { width: 100%; margin-top: 22px; font-size: 16px; padding: 12px; }
.cc-start:disabled { opacity: .45; cursor: not-allowed; }
/* The way OUT of the creation screen (v0.27). Drawn only when the other slot
* already holds a character, so it never offers a door that leads nowhere. It is
* quieter than the Begin button on purpose: leaving is the secondary action. */
.cc-back {
width: 100%; margin-top: 10px; font-size: 14px; padding: 10px;
background: var(--panel2); color: var(--ink-dim);
}
.cc-back-note { font-size: 12px; color: var(--ink-faint); text-align: center; margin: 8px 0 0; }
/* Settings -> Characters (v0.27). One row per account slot. */
.cs-list { display: flex; flex-direction: column; gap: 8px; max-width: 480px; margin-bottom: 18px; }
.cs-row {
display: flex; align-items: center; gap: 12px;
background: var(--panel2); border: 1px solid var(--border2);
border-radius: var(--radius-sm); padding: 10px 14px;
}
.cs-row.cs-active { border-color: var(--gold); }
.cs-skin { font-size: 28px; line-height: 1; }
.cs-skin.cs-empty { color: var(--ink-faint); font-weight: 700; }
.cs-info { flex: 1 1 auto; min-width: 0; }
.cs-name { font-weight: 700; font-size: 14.5px; }
.cs-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.cs-here { font-size: 12px; color: var(--gold-2); font-weight: 700; white-space: nowrap; }
.cs-btn { font-size: 13px; padding: 7px 12px; white-space: nowrap; }
/* Character summary card (Settings tab) */
.cc-summary {
display: flex; align-items: center; gap: 14px; max-width: 480px;
background: var(--panel2); border: 1px solid var(--border2);
border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px;
}
.cc-sum-skin { font-size: 34px; }
.cc-sum-name { font-weight: 800; font-size: 16px; }
.cc-sum-line { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }
/* ============================================================================
* QUALITY (rarity) colors — text (q-*) and card borders/glow (qb-*)
* ==========================================================================*/
.q-common { color: var(--q-common); }
.q-uncommon { color: var(--q-uncommon); }
.q-rare { color: var(--q-rare); }
.q-epic { color: var(--q-epic); }
.q-quest { color: var(--q-quest); font-weight: 700; }
.q-gold { color: var(--gold-2); font-weight: 700; }
.q-legendary {
font-weight: 700;
/* Red-on-red gradient (deep red → bright red → deep red) — not red/white. */
background: linear-gradient(90deg, #a8120c, #ff3d30, #a8120c);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.q-mythic {
font-weight: 700;
background: linear-gradient(90deg, #ffb33b, #ff7a2c, #ff3b2e, #ff7a2c, #ffb33b);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: mythicflow 4s linear infinite;
}
@keyframes mythicflow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.qb-common { border-color: #6f7480; }
.qb-uncommon { border-color: #3f9a42; box-shadow: 0 0 8px rgba(85,201,95,.14); }
.qb-rare { border-color: #3a6fc4; box-shadow: 0 0 8px rgba(79,156,245,.16); }
.qb-epic { border-color: #8e44c9; box-shadow: 0 0 9px rgba(178,106,240,.18); }
.qb-quest { border-color: #d23ba8; box-shadow: 0 0 10px rgba(242,91,206,.22); }
.qb-legendary { border-color: #c43d39; box-shadow: 0 0 10px rgba(232,82,77,.20); }
.qb-mythic {
border-color: #ff7a2c;
box-shadow: 0 0 14px rgba(255,110,44,.35), inset 0 0 10px rgba(255,90,44,.10);
animation: mythicglow 3s ease-in-out infinite;
}
@keyframes mythicglow {
0%,100% { box-shadow: 0 0 11px rgba(255,110,44,.32), inset 0 0 8px rgba(255,90,44,.08); }
50% { box-shadow: 0 0 20px rgba(255,140,44,.50), inset 0 0 12px rgba(255,90,44,.15); }
}
/* Rarity-tinted slot backgrounds in the Inventory tab (bag + Tools + Equipment).
Background = a dark shade of the rarity hue; border = the rarity colour (the qb-* glow stays).
Higher specificity (.x.filled.qb-y) so it beats the plain .inv-slot.filled border/background. */
.inv-slot.filled.qb-common, .equip-slot.filled.qb-common { background: #2b2d33; border-color: #6f7480; }
.inv-slot.filled.qb-uncommon, .equip-slot.filled.qb-uncommon { background: #16351b; border-color: #3f9a42; }
.inv-slot.filled.qb-rare, .equip-slot.filled.qb-rare { background: #152a47; border-color: #3a6fc4; }
.inv-slot.filled.qb-epic, .equip-slot.filled.qb-epic { background: #2a163d; border-color: #8e44c9; }
.inv-slot.filled.qb-legendary, .equip-slot.filled.qb-legendary { background: #3c1815; border-color: #c43d39; }
.inv-slot.filled.qb-quest, .equip-slot.filled.qb-quest { background: #37152d; border-color: #d23ba8; }
.inv-slot.filled.qb-mythic, .equip-slot.filled.qb-mythic { background: #3c2409; border-color: #ff7a2c; }
/* ---- Emoji icon fallback (items with no art, e.g. tools) ----------------- */
.item-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.action-card .item-ico.item-art { width: 72px; height: 72px; font-size: 46px; }
.inv-slot .item-ico.item-art { width: 70%; height: 70%; font-size: 30px; }
.item-ico.popup-art { width: 60px; height: 60px; font-size: 42px; }
.item-ico.at-art { width: 30px; height: 30px; font-size: 22px; }
.item-ico.toast-art { width: 34px; height: 34px; font-size: 24px; }
/* ---- Top-bar active action indicator ------------------------------------- */
.top-right { display: flex; align-items: center; gap: 14px; }
.active-top {
display: flex; align-items: center; gap: 9px;
background: var(--panel); border: 1px solid var(--border);
border-radius: 999px; padding: 5px 15px 5px 8px;
}
.active-top.hidden { display: none; }
.at-art { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.at-info { line-height: 1.15; }
.at-name { font-size: 13px; color: var(--ink); font-weight: 600; }
.at-xph { font-size: 11px; color: var(--green); font-weight: 700; }
/* ---- Gather/craft toasts (bottom-right) ---------------------------------- */
#toasts {
position: fixed; right: 18px; bottom: 96px; z-index: 90;
display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none;
}
.toast {
display: flex; align-items: center; gap: 10px;
background: var(--panel2);
border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px 8px 10px;
box-shadow: var(--shadow); animation: toastIn .3s ease;
}
.toast-art { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.toast-txt { font-size: 14px; color: var(--ink); font-weight: 600; }
.toast.out { animation: toastOut .4s ease forwards; }
.toast-mob.mob-melee { border-color: var(--st-melee); }
.toast-mob.mob-ranged { border-color: var(--st-ranged); }
.toast-mob.mob-magic { border-color: var(--st-magic); }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(40px); opacity: 0; } }
/* ---- Action card rate + skill-page tool line + popup note ---------------- */
.ac-rate { font-size: 11px; color: var(--green); margin-top: 2px; font-weight: 600; }
.sh-tool { margin-top: 9px; font-size: 13px; color: var(--ink-dim); }
.sh-tool.warn { color: var(--red); }
.sk-card.headline {
background: linear-gradient(170deg, rgba(234,181,67,.10), rgba(234,181,67,.02)), var(--panel2);
border-color: var(--border2);
}
.sk-card.headline .sk-name { color: var(--gold-2); }
/* `margin-top` added in v0.16 (#14): in the Beast Battle report this note sat
flush against the last loot row, so the two read as one block. */
.popup-note {
margin-top: 16px;
background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 10px 12px; font-size: 13px; color: var(--ink-dim); text-align: center;
}
/* ---- Quality-colored start buttons --------------------------------------- */
.btn.qbtn-common { background: #cfd3da; border-color: transparent; color: #23262b; }
.btn.qbtn-uncommon { background: #47b654; border-color: transparent; color: #0c2410; }
.btn.qbtn-rare { background: #4a8ee0; border-color: transparent; color: #fff; }
.btn.qbtn-epic { background: #a563e0; border-color: transparent; color: #fff; }
.btn.qbtn-legendary { background: #d4524b; border-color: transparent; color: #fff; }
/* ⚠️ QUEST QUALITY NEEDS ITS OWN BUTTON COLOUR (v0.22, owner's item #2). Quest is
deliberately NOT in the MIG.QUALITIES ladder, so it was the one quality with no
`qbtn-` rule: the bank's Deposit/Withdraw button for the Special Water Pouch
stayed default grey while every other item's tinted itself. `--q-quest` is the
same pink the item name uses. */
.btn.qbtn-quest { background: var(--q-quest); border-color: transparent; color: #2a0616; }
.btn.qbtn-mythic {
background: linear-gradient(90deg, #ffb33b, #ff7a2c, #ff3b2e, #ff7a2c, #ffb33b);
background-size: 200% 100%; border-color: transparent; color: #2a0f06;
animation: mythicflow 4s linear infinite;
}
/* ---- Tools panel (Inventory tab) ----------------------------------------- */
.tools-panel {
background: var(--panel);
border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
display: inline-block;
}
.tools-panel .equip-cell { width: 72px; }
.equip-slot .item-ico { width: 78%; height: 78%; font-size: 34px; }
.eq-undername {
text-align: center; font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
color: var(--ink-faint); margin-top: 3px;
}
/* ---- World Map ----------------------------------------------------------- */
.map-status { color: var(--ink-dim); margin: 0 0 14px; font-size: 15px; }
.map-status b { color: var(--gold-2); }
.map-wrap { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.worldmap {
position: relative; flex: 1 1 460px; max-width: 720px;
border: 1px solid var(--border); border-radius: var(--radius); overflow: visible;
background: var(--panel); box-shadow: var(--shadow);
}
.worldmap-img { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: var(--radius); }
.worldmap-img.img-missing { width: 100%; aspect-ratio: 16 / 10; }
/* Zone markers — sized and haloed to stand out on the busy pixel-art terrain:
a WHITE ring + dark outer halo reads on light and dark ground alike. */
.map-pin {
position: absolute; transform: translate(-50%, -50%); cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: transparent; border: 0; padding: 0;
}
.map-pin-dot {
width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
background: var(--gold); border: 3px solid #fff;
box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.7), 0 0 14px rgba(234,181,67,.55);
display: flex; align-items: center; justify-content: center; font-size: 12px; color: #101113;
transition: transform .1s;
}
.map-pin-label {
font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: .2px;
background: rgba(5,6,8,.88); padding: 3px 10px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.3); text-shadow: 0 1px 2px #000;
box-shadow: 0 2px 6px rgba(0,0,0,.5);
display: inline-flex; align-items: center; gap: 6px;
}
/* The zone's Combat-Level requirement, on the pin next to its name. */
.map-pin-lvl {
font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--gold-2);
background: rgba(234,181,67,.16); border: 1px solid rgba(234,181,67,.45);
padding: 0 5px; border-radius: 999px; text-shadow: none;
}
/* A zone your Combat Level can't reach yet: its requirement reads RED, not grey. */
.map-pin.locked .map-pin-lvl { color: #ff8a80; background: rgba(200,73,60,.35); border-color: var(--red); }
.map-pin.current .map-pin-lvl { color: var(--green); background: rgba(88,201,107,.16); border-color: rgba(88,201,107,.5); }
.map-pin.low { flex-direction: column-reverse; } /* near-bottom pins: label above the dot */
.map-pin.locked .map-pin-dot {
background: #6a6e78; border-color: #cfd2d8;
box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.7);
}
.map-pin.locked .map-pin-label { color: #c3c7cf; }
.map-pin.current .map-pin-dot {
background: var(--green); animation: pinpulse 2s ease-in-out infinite;
}
@keyframes pinpulse {
0%,100% { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.7), 0 0 10px rgba(88,201,107,.7); }
50% { box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.7), 0 0 22px rgba(88,201,107,1); }
}
.map-pin:hover { z-index: 3; }
.map-pin:hover .map-pin-dot { transform: scale(1.12); }
.map-pin:hover .map-pin-label, .map-pin.sel .map-pin-label { color: var(--gold-2); border-color: var(--gold); }
.map-pin.sel .map-pin-dot { box-shadow: 0 0 0 2px var(--gold-2), 0 3px 8px rgba(0,0,0,.7), 0 0 16px rgba(234,181,67,.9); }
.zone-panel {
flex: 0 0 240px; background: var(--panel2);
border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.zone-name { font-family: var(--head-font); font-weight: 800; font-size: 20px; color: var(--ink); margin-bottom: 4px; }
.zone-req { color: var(--ink-dim); font-size: 13px; margin-bottom: 14px; }
.zone-here { color: var(--green); font-weight: 600; }
.zone-traveltime { color: var(--ink-dim); font-size: 13px; margin-bottom: 10px; }
.zone-locked { color: var(--red); font-size: 13px; margin-bottom: 10px; }
.zone-panel .btn { margin-top: 0; width: 100%; }
.ab-travel-ico { font-size: 38px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
/* Points of interest (within-zone, instant) — in the zone detail panel */
.poi-list { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.poi-head { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin-bottom: 8px; }
.poi-subhead { letter-spacing: .3px; text-transform: none; color: var(--green); font-weight: 600; }
.poi-item {
display: block; width: 100%; text-align: left; margin-bottom: 7px; cursor: default;
background: var(--panel);
border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
}
button.poi-item { cursor: pointer; transition: border-color .12s, transform .08s, filter .1s; }
button.poi-item:hover { border-color: var(--border2); transform: translateX(2px); filter: brightness(1.06); }
.poi-item.current { border-color: var(--green); box-shadow: inset 0 0 0 1px rgba(88,201,107,.3); }
.poi-top { display: flex; align-items: center; gap: 8px; }
.poi-ico { font-size: 16px; flex-shrink: 0; }
.poi-name { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); font-size: 14px; }
.poi-tag {
flex-shrink: 0; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700;
padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border2); color: var(--ink-dim);
}
.poi-tag-aggressive { color: var(--red); border-color: var(--red); }
.poi-tag-friendly { color: var(--q-uncommon); border-color: #3f9a42; }
.poi-tag-main { color: var(--gold-2); border-color: var(--border2); }
.poi-here { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--green); }
/* Mob roster chips inside a POI (name · level · style). No wrapping inside a
chip — a long name gets an ellipsis instead of growing into a tall box. */
.poi-mobs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.mob-chip {
display: inline-block; white-space: nowrap; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 999px; color: var(--ink);
background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.mob-chip em { font-style: normal; color: var(--ink-faint); font-size: 10px; }
.mob-chip.mob-melee { border-color: var(--st-melee); }
.mob-chip.mob-ranged { border-color: var(--st-ranged); }
.mob-chip.mob-magic { border-color: var(--st-magic); }
/* Zone panel extras: gatherable resources + the region's World Boss */
.zone-sec-head { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .4px; }
.zone-res { display: flex; flex-wrap: wrap; gap: 5px; }
/* Both the resource chips and the boss are BUTTONS now — they open an inspect popup. */
.res-chip {
display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
padding: 3px 9px 3px 5px; border-radius: 999px; color: var(--ink);
background: rgba(255,255,255,.04); border: 1px solid var(--border); white-space: nowrap;
cursor: pointer; font-family: inherit; transition: background .1s, border-color .1s, transform .08s;
}
.res-chip:hover { background: rgba(255,255,255,.09); border-color: var(--gold); transform: translateY(-1px); }
.res-art { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
span.item-ico.res-art { font-size: 13px; width: auto; height: auto; }
/* A zone's World Boss buttons. FLEX, not inline-block, so a long boss name and
its "Lv N" tag stay on one line and the tag can never be clipped or orphaned
on a second row (#7, 2026-07-25). Each button is full width with a gap between
them, so two bosses in a zone no longer sit with their red borders touching. */
.zone-wboss {
display: flex; align-items: center; gap: 8px; width: 100%;
font-size: 13px; font-weight: 700; color: var(--ink);
padding: 8px 11px; margin-bottom: 8px;
border: 1px solid var(--red); border-radius: var(--radius-sm);
background: rgba(200,73,60,.08);
cursor: pointer; font-family: inherit; text-align: left; transition: background .1s, transform .08s;
}
.zone-wboss:last-of-type { margin-bottom: 0; }
.zone-wboss:hover { background: rgba(200,73,60,.18); transform: translateY(-1px); }
/* The name takes the slack and ellipsises; the level tag never shrinks. */
.zone-wboss .zw-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-wboss em {
flex: 0 0 auto; font-style: normal; color: var(--ink-faint);
font-weight: 600; font-size: 11px; white-space: nowrap;
}
/* ---- Region tab — one cohesive "stage" (banner + POIs + tracking) -------- */
.region-desc { color: var(--ink-dim); font-style: italic; margin: 0 0 16px; max-width: 760px; line-height: 1.55; }
.region-stage {
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
background: var(--panel2); box-shadow: var(--shadow);
}
/* Image banner across the top — the zone PNG CONTAINED over a blurred copy of itself. */
.region-banner { position: relative; height: 180px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.region-img-blur {
position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat;
filter: blur(26px) brightness(.5); transform: scale(1.25);
}
.region-img {
position: absolute; inset: 0; z-index: 1; background-size: contain; background-position: center; background-repeat: no-repeat;
image-rendering: pixelated;
}
/* POI switcher bar (rehaul 2026-07-12) — horizontal pills under the banner. */
/* ⚠️ EVERY CARD IN THIS ROW IS THE SAME HEIGHT (the owner's call, v0.26), which
means the ALTAR has to FIT a POI's two lines rather than the row stretching to
the altar's four. So the altar's tithe note moved into its popup and its beacon
BAR is painted along the card's bottom edge instead of taking a row of its own
(see `.altar-pill .altar-bar`). Stretch is the default and is what makes them
equal — do not put `align-items: flex-start` back, and do not add a third line
to the altar card without taking one away. */
.poi-bar {
display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
background: rgba(255,255,255,.02); border-bottom: 1px solid var(--border);
}
.poi-pill {
display: flex; flex-direction: column; gap: 2px; text-align: left;
padding: 8px 18px; border-radius: 10px; min-width: 140px;
background: var(--panel); border: 1px solid var(--border);
color: var(--ink); font-family: var(--ui-font);
}
button.poi-pill { cursor: pointer; transition: border-color .12s, transform .08s, background .12s; }
button.poi-pill:hover { border-color: var(--gold); background: var(--panel3); transform: translateY(-1px); }
.poi-pill-name { font-weight: 700; font-size: 14px; }
.poi-pill-sub { font-size: 11px; color: var(--ink-faint); }
.poi-pill.current { border-color: var(--green); background: rgba(88,201,107,.08); }
.poi-pill.current .poi-pill-sub { color: var(--green); font-weight: 600; }
.poi-pill.locked { opacity: .6; }
.poi-pill.locked .poi-pill-sub { color: var(--red); }
/* Tracking / battle panel — BLENDS into the stage (no separate card border). */
.region-main { padding: 16px 18px; }
.region-main .track-panel, .region-main .battle-panel { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.track-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.track-head h2 { margin: 0; font-size: 18px; color: var(--ink); }
.track-head .btn { margin-top: 0; }
/* The level chip and the Start/Stop button are ONE group at the right end (v0.21,
owner's item #14). They used to be three separate `space-between` children, so
the chip drifted into the middle of the panel, miles from the button it belongs
to. Keep them in this wrapper. */
.track-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.track-rate { font-size: 12px; color: var(--ink-faint); margin: 6px 0 14px; line-height: 1.5; }
.track-rate i { color: var(--gold-2); font-style: italic; }
/* Mob CARDS (rehaul 2026-07-12) — a grid that uses the panel's full width. Each
card carries its attack-style colour on the left edge and opens the mob popup. */
/* Capped to --combat-col so the LAST mob card's right edge lines up with the
World Boss panel above it (#4, v0.17) instead of running past it. */
/* ⚠️ auto-FIT, not auto-FILL (#4, v0.17). auto-fill keeps empty tracks, so four
mob cards on a wide screen sat squeezed at the left with dead space out to the
boss panel's edge. auto-fit collapses the empty tracks and the real cards
stretch, so the LAST card's right edge lines up with the World Boss panel. */
.mob-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: var(--combat-col); }
.region-main .track-panel, .region-main .battle-panel { max-width: var(--combat-col); }
.track-panel .track-rate, .track-panel .track-stackline { max-width: var(--combat-col); }
/* ---- Combat tab: TWO COLUMNS (v0.22, the owner's redesign — item #18) -------
Left: the World Boss strips and the tracking panel. Right: the collected-stack
note and the recent-drops feed. Everything used to stack full width, which
stretched the mob cards thin and pushed the drops feed below the fold.
⚠️ `min-width: 0` on the columns is required — they hold grids and tables whose
intrinsic width would otherwise refuse to shrink and push the page sideways,
which is exactly the bug fixed in v0.20. */
.region-cols {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 22px; align-items: start;
}
.region-cols .region-col { min-width: 0; }
/* Inside the columns the panels are already framed by .region-main's own rules,
so the width caps that kept them readable full-width would now fight the grid. */
.region-cols .track-panel, .region-cols .battle-panel,
.region-cols .mob-cards, .region-cols .track-rate { max-width: none; }
/* Two mob cards per row, as in the owner's design, rather than as many as fit. */
.region-cols .mob-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.region-cols .track-stack {
margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 14px;
}
.region-cols .drops-feed { margin-top: 0; }
/* The Dungeoneering tab reuses the same two columns (v0.22, item #19): dungeon
cards left, the recent-drops feed right.
⚠️ THE DUNGEON GRID IS EXACTLY TWO COLUMNS (v0.21, owner's item #7). It used to
auto-fit, and a zone's four dungeons then landed 3 + 1 at any width where only
three fitted, which reads as a mistake. Two columns means four dungeons are
always a tidy 2 x 2 and a lone Misc dungeon (Pendrake) still takes half a row.
Do NOT put `auto-fit` back — parity is the whole point, not density. */
.dungeon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .dungeon-grid { grid-template-columns: minmax(0, 1fr); } }
/* One column when there is no room for two. 1100px, not the phone breakpoint:
two columns of mob cards stop being readable well before a phone. */
@media (max-width: 1100px) {
.region-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.region-cols .mob-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
.mob-card {
background: rgba(255,255,255,.03); border: 1px solid var(--border); border-left-width: 3px;
border-radius: 10px; padding: 11px 13px; cursor: pointer;
transition: background .12s, transform .08s;
}
.mob-card:hover { background: rgba(255,255,255,.055); transform: translateY(-1px); }
.mob-card.locked { opacity: .55; }
.mob-card.mob-melee { border-left-color: var(--st-melee); }
.mob-card.mob-ranged { border-left-color: var(--st-ranged); }
.mob-card.mob-magic { border-left-color: var(--st-magic); }
.mob-card-top { display: flex; align-items: center; gap: 8px; }
.mob-card-top .mob-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-card-top .mob-chance { margin-left: auto; flex-shrink: 0; }
.mob-card-meta { font-size: 11px; color: var(--ink-dim); margin: 3px 0 10px 30px; }
.mob-card-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mob-style-ico { font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; }
.mob-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.mob-chance { font-size: 11px; font-weight: 700; color: var(--gold-2); }
.mob-chance.focused { color: var(--green); }
.mob-have { color: var(--gold-2); }
.focus-btn {
cursor: pointer; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px;
background: var(--panel3); color: var(--ink-dim); border: 1px solid var(--border2); transition: all .1s;
}
.focus-btn:hover { color: var(--gold-2); border-color: var(--gold); }
.focus-btn.on { background: var(--gold); color: #221808; border-color: transparent; }
.focus-na { font-size: 10px; color: var(--ink-faint); font-style: italic; }
.mob-locktag { font-size: 11px; color: var(--red); font-weight: 600; }
/* Start-Tracking / Stop colours. */
.track-start-btn { background: var(--green); border: 1px solid transparent; color: #0d2a12; }
.track-start-btn:hover { filter: brightness(1.08); }
.track-stop-btn { background: var(--red); border: 1px solid transparent; color: #fff; }
.track-stop-btn:hover { filter: brightness(1.08); }
.track-stack {
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
font-size: 13px; color: var(--ink-dim);
}
.track-stack b { color: var(--ink); }
.track-cta { margin: 0 0 18px; }
.track-cta .btn { margin-top: 0; }
/* Clickable mob chips (World Map POI preview) → detail popup */
.mob-chip { cursor: pointer; font-family: inherit; }
.mob-chip:hover { filter: brightness(1.12); border-color: var(--gold); }
/* Mob detail popup (description · combat stats · drop table) */
.mob-popup { width: 384px; }
.mob-pop-ico {
font-size: 34px; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.mob-pop-ico.mob-melee { border-color: var(--st-melee); }
.mob-pop-ico.mob-ranged { border-color: var(--st-ranged); }
.mob-pop-ico.mob-magic { border-color: var(--st-magic); }
.mob-pop-sub { font-size: 13px; color: var(--ink-dim); margin-top: 3px; }
.mob-pop-desc { font-size: 13px; color: var(--ink-dim); font-style: italic; line-height: 1.5; margin-bottom: 14px; }
.mob-pop-section { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); margin: 8px 0 8px; }
.mob-pop-hint { letter-spacing: .3px; text-transform: none; color: var(--ink-faint); font-weight: 400; }
.mob-pop-stats { margin-bottom: 4px; }
.drop-list { display: flex; flex-direction: column; gap: 7px; }
.drop-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.drop-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.drop-ico { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.item-ico.drop-ico { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.drop-q { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; flex-shrink: 0; }
.drop-q.dim { color: var(--ink-faint); }
.drop-chance { flex-shrink: 0; font-weight: 700; color: var(--gold-2); font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }
.drop-tag { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; }
.drop-tag.drop-learned { color: var(--green); background: rgba(88,201,107,.14); }
.drop-tag.drop-unlearned { color: var(--gold-2); background: rgba(247,207,116,.13); }
.drop-row.is-learned .drop-item > .q-common,
.drop-row.is-learned .drop-item > [class^="q-"] { opacity: .6; }
/* The guild zone's halved-loot disclaimer (v0.27). It sits INSIDE the drop list
on purpose: a rate and the rule that bends it must not be separated. */
.hollow-note { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm);
background: var(--panel2); border: 1px solid var(--border); font-size: 12px; font-weight: 600;
line-height: 1.5; color: var(--ink-dim); }
.drop-row.drop-note { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border);
font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--gold-2); }
/* ---- Combat: top-bar HP, battle buttons, setup modal & in-battle panel --- */
.stat.hp { color: #f0a0a0; }
.stat.hp.low { color: var(--red); animation: pulse 1.1s infinite; }
/* Any top-bar stat carrying the `hidden` class is hidden (the frost / fire timers
and the pets counter are all shown only when relevant). One shared rule so a new
toggled stat can't slip through with its own scoped rule missing. */
.stat.hidden { display: none; }
.stat.frost { color: #aee3ff; font-variant-numeric: tabular-nums; }
.stat.frost.low { color: var(--red); animation: pulse 1.1s infinite; }
.stat.fire { color: #ffb27a; font-variant-numeric: tabular-nums; }
.stat.fire.low { color: var(--red); animation: pulse 1.1s infinite; }
/* Per-mob Battle button (in the tracking panel's mob cards) */
.battle-btn {
cursor: pointer; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
background: var(--red); color: #fff; border: 1px solid transparent;
transition: filter .1s, transform .08s;
}
.battle-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.battle-btn:disabled { background: var(--panel3); color: var(--ink-faint); border-color: var(--border); cursor: default; font-weight: 600; }
/* ⚠️ A DISABLED BATTLE BUTTON CARRIES ITS REFUSAL AS ITS LABEL, so its text is
however long the reason is - and `white-space: nowrap` with the default
`min-width: auto` means it simply refuses to shrink and pokes out past its own
card (the v0.26 `.popup-actions` lesson, on a different button). It wraps when
it is a sentence rather than a verb. The ENABLED button keeps `nowrap`: its
label is always short ("⚔ Battle (5)") and a pill reads better on one line. */
.battle-btn:disabled { white-space: normal; min-width: 0; text-align: center; line-height: 1.35; }
/* Battle-setup modal */
.popup.battle-setup { width: 440px; max-height: 88vh; overflow-y: auto; }
.battle-note { border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }
.battle-note.ok { background: rgba(88,201,107,.10); border: 1px solid rgba(88,201,107,.5); color: var(--ink); }
.battle-note.bad { background: rgba(226,92,77,.10); border: 1px solid rgba(226,92,77,.55); color: var(--red); font-weight: 600; }
.battle-field { margin-bottom: 14px; }
.battle-field > label { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 7px; }
.battle-field > label b { color: var(--gold-2); }
.battle-field .craft-slider { width: 100%; }
/* Mirrors .battle-foodrow so the two sliders in the battle popup are laid out the
* same way (v0.23) — see the note in renderBattleModal. */
.battle-sliderrow { display: flex; align-items: center; gap: 10px; }
.battle-sliderrow .craft-slider { flex: 1; }
.food-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.food-chip {
cursor: pointer; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
background: var(--panel3); color: var(--ink-dim); border: 1px solid var(--border2); transition: all .1s;
}
.food-chip em { font-style: normal; color: var(--ink-faint); font-size: 10px; }
.food-chip:hover { color: var(--ink); border-color: var(--gold); }
.food-chip.sel { background: var(--gold); color: #221808; border-color: transparent; }
.food-chip.sel em { color: #5a3d10; }
.battle-foodrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.battle-foodrow span { font-size: 12px; color: var(--ink-faint); }
.battle-foodrow .craft-slider { flex: 1; }
.battle-foodrow b { color: var(--gold-2); min-width: 28px; text-align: right; }
/* Shared key/value stat grid (battle projection + in-battle tabs). Flows into
multiple columns where there is room (in-battle panel); stays a single column
in the narrow battle-setup modal. */
.battle-grid {
background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 10px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 5px 32px; margin-bottom: 10px;
}
.battle-grid div { display: flex; justify-content: space-between; font-size: 13px; }
.battle-grid span { color: var(--ink-dim); }
.battle-grid b { color: var(--ink); }
.battle-warn {
font-size: 12px; font-weight: 600; color: var(--gold-2); margin: -2px 0 10px;
background: rgba(234,181,67,.09); border: 1px solid rgba(234,181,67,.4); border-radius: var(--radius-sm); padding: 7px 10px;
}
.battle-warn + .battle-warn { margin-top: 0; }
.battle-warn.xp-warn { color: #f3a64d; border-color: rgba(196,122,42,.6); background: rgba(243,166,77,.11); }
/* End-of-battle results popup */
.popup.combat-result { width: 400px; max-height: 88vh; overflow-y: auto; }
.result-head { text-align: center; font-family: var(--head-font); font-size: 21px; font-weight: 800; margin: 2px 0 14px; }
.result-head.win { color: var(--gold-2); }
.result-head.died, .result-head.lose { color: var(--red); }
.combat-result .drop-row.dim { color: var(--ink-faint); font-style: italic; }
/* World Boss STRIP (Combat / Tracking view; rehaul 2026-07-12) — one horizontal
row: icon + name | win chance + HP | Fight button. Drops below as chips. */
/* ⚠️ ONE WIDTH FOR THE WHOLE COMBAT COLUMN (v0.17). The World Boss strip and the
tracking panel below it share `--combat-col`, so the last mob card's right edge
lines up with the red boss panel's instead of running past it. Change the width
HERE and both follow. */
/* FULL WIDTH (v0.17). A 980px cap made four mob cards wrap onto two rows on a
wide monitor, which is worse than the sprawl it was meant to fix. The sprawl
is handled instead by PACKING the boss row's facts left (see .wboss-row), so
the panel can be as wide as the page. This stays a single knob: set it to a
pixel value and the boss strip, tracking panel and mob grid all cap together. */
:root { --combat-col: 100%; }
.wboss-panel { background: rgba(226,92,77,.08); border: 1px solid rgba(226,92,77,.35); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; max-width: var(--combat-col); }
.wboss-panel.awake { border-color: rgba(232,110,100,.7); box-shadow: 0 0 0 1px rgba(232,110,100,.35), 0 0 16px rgba(205,80,80,.2); }
/* Name, win chance and HP sit TOGETHER on the left. Only the action (Fight) and
the status note are pushed to the right edge, which is where an action belongs.
`.wboss-title` was `flex: 1 1 220px`, i.e. it ate all the slack (#13). */
.wboss-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* The boss icon is a button — it opens the boss inspect popup. */
/* ⚠️ THE BUTTON AND THE PICTURE ARE NOW TWO ELEMENTS (v0.28, when the art
landed). `.wboss-ico` used to be the