/* Forever Tracker: dark carved frames with gold trim, parchment pages for the
   quest log and journal, in the spirit of the game's own windows (drawn in CSS,
   no game UI art). */

:root {
  --bg: #0a0806;
  --frame-1: #231b14;
  --frame-2: #140f0b;
  --trim-dark: #5c4521;
  --trim: #b8913f;
  --trim-light: #f3d98e;
  --line: #3a2d1c;
  --text: #ece3cf;
  --muted: #a2957d;
  --gold: #f8d16a;          /* headings */
  --label: #ffd100;         /* the game's yellow label colour */
  --parch-1: #f6ebcd;
  --parch-2: #e8d3a2;
  --parch-3: #cfae73;
  --ink: #3a2610;
  --ink-muted: #6e5636;
  --xp: #a65fd6;
  --rested: #3f7fd8;
  --hp: #3fbf5a;
  --mana: #3d7fe0;
  --rage: #d9483b;
  --energy: #e8c64a;
  --focus: #e08a3d;
  --online: #4ad66d;
  --class: var(--gold);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    var(--noise),
    radial-gradient(1100px 520px at 50% -12%, #2c1f36 0%, transparent 70%),
    radial-gradient(900px 600px at 50% 110%, #1b120b 0%, transparent 70%),
    var(--bg);
  color: var(--text);
  font: 16px/1.5 "Alegreya Sans", system-ui, sans-serif;
  min-height: 100vh;
}

.page { max-width: 1200px; margin: 0 auto; padding: 32px 20px 48px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; font-weight: 700; margin: 0; letter-spacing: .02em; }
a { color: var(--gold); }

/* --- frames ------------------------------------------------------------------ */

.card {
  position: relative; min-width: 0;
  padding: 20px 22px; border-radius: 6px;
  background: var(--noise), linear-gradient(180deg, var(--frame-1), var(--frame-2));
  border: 1px solid #000;
  box-shadow:
    inset 0 0 0 1px var(--trim-dark), inset 0 0 0 3px #1a130c, inset 0 0 0 4px #7a5c25,
    inset 0 0 28px rgba(0, 0, 0, .7), 0 10px 28px rgba(0, 0, 0, .55);
}
/* gold studs on the top corners */
.card::before, .card::after {
  content: ""; position: absolute; top: -5px; width: 11px; height: 11px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--trim-light), #7a5a22); border: 1px solid #000; z-index: 1;
}
.card::before { left: -5px; }
.card::after { right: -5px; }

.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head h2, .statsheet h3 {
  display: inline-block; padding: 5px 16px 4px; border-radius: 4px;
  font-size: 15px; color: var(--label);
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(255, 209, 0, .25);
  background: linear-gradient(180deg, #2f2419, #17110b);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #7b5d27, 0 2px 4px rgba(0, 0, 0, .5);
}

/* parchment pages (quest log, journal) */
.card.parchment {
  color: var(--ink);
  background:
    var(--noise),
    radial-gradient(ellipse at 50% 35%, var(--parch-1) 0%, var(--parch-2) 55%, var(--parch-3) 100%);
  box-shadow:
    inset 0 0 0 1px #000, inset 0 0 0 3px #6b4f27, inset 0 0 0 4px #2a1c0c,
    inset 0 0 46px rgba(120, 78, 28, .5), 0 10px 28px rgba(0, 0, 0, .55);
}
.parchment .card-head { padding-bottom: 10px; border-bottom: 2px solid #8a6a3c; position: relative; }
.parchment .card-head::after {
  content: ""; position: absolute; left: -2px; bottom: -6px; width: 9px; height: 9px;
  transform: rotate(45deg); background: #8a6a3c;
}
.parchment .card-head h2 {
  padding: 0; background: none; border: none; box-shadow: none;
  font-size: 24px; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.parchment .muted, .parchment .empty { color: var(--ink-muted); }
.parchment { scrollbar-color: #8a6a3c transparent; }

/* --- character picker -------------------------------------------------------- */

.roster { display: flex; gap: 10px; margin: 0 0 24px; overflow-x: auto; padding: 6px 4px; scrollbar-width: thin; }
.roster button {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto; cursor: pointer;
  padding: 5px 16px 5px 5px; border-radius: 999px; color: var(--text); font: inherit;
  background: linear-gradient(180deg, #2a2118, #15100b);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--trim-dark);
}
.roster button:hover { box-shadow: inset 0 0 0 1px var(--trim); }
.roster button.on { box-shadow: inset 0 0 0 1px var(--trim-light), 0 0 12px rgba(255, 209, 0, .25); }
.roster .label { display: grid; text-align: left; line-height: 1.15; }
.roster .label b { font-family: Cinzel, serif; font-size: 14px; color: var(--c, var(--gold)); }
.roster .label span { font-size: 13px; color: var(--muted); }

/* round portraits: header crest, picker, character pane */
.crest, .mini-crest, .doll-portrait {
  position: relative; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle, #3a2d22, #120d09);
  border: 2px solid var(--trim);
  box-shadow: 0 0 0 1px #000, 0 0 0 4px var(--trim-dark), 0 0 0 5px #000, 0 6px 18px rgba(0, 0, 0, .7);
  font-family: Cinzel, serif; color: var(--class);
}
.crest img, .mini-crest img, .doll-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crest { width: 86px; height: 86px; font-size: 32px; }
.mini-crest { width: 32px; height: 32px; font-size: 14px; color: var(--c, var(--gold)); border-width: 1.5px;
  box-shadow: 0 0 0 1px #000; overflow: visible; }
.mini-crest img { border-radius: 50%; }
.mini-crest.online::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--online); border: 2px solid #15100b;
}

/* --- header ------------------------------------------------------------------ */

.hero { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.who { flex: 1; min-width: 220px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.who h1 {
  font-size: clamp(30px, 5vw, 46px); color: var(--class); line-height: 1.1;
  text-shadow: 0 2px 0 #000, 0 0 18px color-mix(in srgb, var(--class) 30%, transparent);
}
.sub { margin: 4px 0 0; color: var(--text); font-size: 17px; }
.presence { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 15px; border-radius: 999px; font-family: Cinzel, serif; font-weight: 700; font-size: 14px;
  background: linear-gradient(180deg, #2a2118, #15100b); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--trim-dark);
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.pill.online { color: #c9f7c9; }
.pill.online .dot { background: var(--online); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 60%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- layout ------------------------------------------------------------------ */

.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "prog prog prog prog prog prog prog vit vit vit vit vit"
    "gear gear gear gear gear loc loc loc loc loc loc loc"
    "prof prof prof prof prof time time time time time time time"
    "quest quest quest quest quest jour jour jour jour jour jour jour";
}
.progress { grid-area: prog; }
.vitals { grid-area: vit; }
.location { grid-area: loc; }
.timeline { grid-area: time; }
.journal { grid-area: jour; }
.quests { grid-area: quest; display: flex; flex-direction: column; }
.gear { grid-area: gear; }
.professions { grid-area: prof; }
@media (max-width: 960px) {
  .grid { grid-template-columns: 1fr; grid-template-areas: "prog" "vit" "gear" "loc" "prof" "time" "quest" "jour"; }
  .presence { align-items: flex-start; }
}

/* --- bars -------------------------------------------------------------------- */

.bar {
  position: relative; height: 16px; border-radius: 3px; overflow: hidden;
  background: #070504; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--trim-dark);
}
.bar .fill, .bar .rested { position: absolute; inset: 1px auto 1px 1px; width: 0; transition: width .6s ease; }
.bar .fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .3); }
.bar.xp { height: 20px; }
.bar.xp .fill { background: linear-gradient(180deg, #c98af0, var(--xp) 45%, #5e2a8a); z-index: 2; }
.bar.xp .rested { background: color-mix(in srgb, var(--rested) 55%, transparent); z-index: 1; }
/* the game's XP bar is split into 20 segments */
.bar.xp::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0, 0, 0, .7) calc(5% - 1px) 5%);
}
.bar.hp .fill { background: linear-gradient(180deg, #7ee08f, var(--hp) 45%, #1f7a35); }
.bar.power .fill { background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 50%, rgba(0, 0, 0, .25)), var(--power, var(--mana)); }
.bar.enemy .fill { background: linear-gradient(180deg, #f07a6e, var(--rage) 45%, #7a1a12); }
.bar-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between; margin-top: 6px; font-size: 14px; color: var(--muted); }
.rested-label { color: color-mix(in srgb, var(--rested) 80%, white); }

/* --- progress ---------------------------------------------------------------- */

.level-row { display: flex; gap: 18px; align-items: center; }
.level-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle, #3a2d22, #120d09);
  border: 2px solid var(--trim); box-shadow: 0 0 0 1px #000, 0 0 0 4px var(--trim-dark), 0 0 0 5px #000;
}
.level-badge .small { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.level-badge strong { font: 700 32px/1 Cinzel, serif; color: var(--label); text-shadow: 0 2px 0 #000; }
.xp-block { flex: 1; min-width: 0; }

.journey { display: grid; grid-template-columns: repeat(60, 1fr); gap: 2px; margin: 20px 0 4px; }
.journey span { height: 6px; border-radius: 1px; background: #2a2016; }
.journey span.done { background: #8a6a2c; }
.journey span.now { background: var(--label); box-shadow: 0 0 8px var(--label); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 18px 0 0; }
.stats div {
  padding: 9px 12px; border-radius: 4px;
  background: rgba(0, 0, 0, .35); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line);
}
.stats dt { font-size: 13px; color: var(--label); }
.stats dd { margin: 2px 0 0; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.coin::after { content: ""; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.coin.g::after { background: #e5c04b; } .coin.s::after { background: #c7ccd4; } .coin.c::after { background: #b8703c; }

/* --- vitals ------------------------------------------------------------------ */

.vital { margin-bottom: 16px; }
.vital-label { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
.vital-label > span:first-child { color: var(--label); }
.vital-label span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }
.flags { display: flex; gap: 6px; flex-wrap: wrap; }
.flag {
  font-size: 13px; padding: 2px 10px; border-radius: 3px; font-weight: 700;
  background: rgba(0, 0, 0, .4); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line);
}
.flag.combat { color: #ff8a7d; box-shadow: inset 0 0 0 1px #7a1a12; }
.flag.dead { color: #ccc; }
.flag.resting { color: #9cc2ff; box-shadow: inset 0 0 0 1px #1f3d6b; }
.target { margin: 4px 0 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.target .vital-label > span:first-child { color: var(--text); }
.target .who { color: #ff8a7d; font-weight: 700; }
.target .rank { margin-left: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }

/* --- map --------------------------------------------------------------------- */

#zone { font-size: 20px; color: var(--label); }
.coords {
  font: 500 14px "JetBrains Mono", monospace; color: var(--label); padding: 4px 10px; border-radius: 3px;
  background: rgba(0, 0, 0, .45); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--trim-dark);
}
.map {
  position: relative; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden;
  border: 1px solid #000; box-shadow: 0 0 0 2px var(--trim-dark), 0 0 0 3px #000;
  background-color: #10141c; background-size: 100% 100%; background-repeat: no-repeat;
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .gridline { stroke: #1f2533; stroke-width: 1; }
.map .trail { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }
.map .stop { fill: var(--gold); opacity: .35; }
.map .stop:hover { opacity: 1; }
.map .death { fill: #e35b4f; }
.map .me-group { transition: transform 1s linear; }
.map .me-group.jump { transition: none; }
.map .me { fill: var(--class); stroke: #111; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.map .me-ring { fill: none; stroke: var(--class); stroke-width: 2; vector-effect: non-scaling-stroke; animation: ring 2.2s infinite; transform-origin: center; transform-box: fill-box; }
.map .me-group:not(.live) .me-ring { display: none; }
.map.has-art .trail { stroke: #3b2a12; opacity: .75; }
.map.has-art .stop { fill: #3b2a12; }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
/* hover boxes look like the game's tooltips */
.map-tip, .chart-tip {
  position: absolute; pointer-events: none; z-index: 3; color: #fff;
  background: rgba(6, 9, 26, .94); border: 1px solid #8f8f8f; border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0, 0, 0, .6);
  padding: 6px 10px; font-size: 13px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px));
}
#trail-note { margin: 8px 0 0; }

/* --- chart ------------------------------------------------------------------- */

.chart { position: relative; height: 240px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .axis { stroke: var(--line); }
.chart .label { fill: var(--muted); font-size: 12px; }
.chart .area { fill: url(#chartFill); }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2; }
.chart .cursor { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart .cursor-dot { fill: var(--gold); }

/* --- journal (parchment) ----------------------------------------------------- */

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
/* the game's red buttons */
.chip {
  font: 700 12px Cinzel, serif; color: var(--label); cursor: pointer; padding: 4px 10px; border-radius: 3px;
  background: linear-gradient(180deg, #9b2214, #5a0d06); border: 1px solid #2a0603;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .4); text-shadow: 0 1px 0 #000;
}
.chip:hover { background: linear-gradient(180deg, #b82a19, #6a1008); }
.chip.on { color: #fff3b3; background: linear-gradient(180deg, #d63c26, #7a1308); box-shadow: inset 0 0 0 1px #ffd16a, 0 1px 2px rgba(0, 0, 0, .4); }
.events { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; }
.events li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(110, 76, 34, .25); }
.events li:last-child { border-bottom: none; }
.events .icon {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px;
  color: var(--trim-light); background: radial-gradient(circle, #4a3a28, #1b140d);
  border: 2px solid var(--trim); box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0, 0, 0, .4);
}
.events .death .icon { color: #ff8a7d; }
.events .what { min-width: 0; }
.events .what span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.events .what span:first-child { font: 700 17px/1.25 Alegreya, Georgia, serif; color: var(--ink); }
.events .what .detail { font-size: 14px; color: var(--ink-muted); }
.events time { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.empty { color: var(--muted); padding: 16px 0; }

/* --- quest log (parchment) --------------------------------------------------- */

.quest-list { overflow-y: auto; max-height: 560px; margin-right: -8px; padding-right: 8px; }
.quest-group {
  font: 700 13px Cinzel, serif; letter-spacing: .08em; color: var(--ink-muted);
  margin: 16px 0 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(110, 76, 34, .35);
}
.quest-group:first-child { margin-top: 0; }
.quest { padding: 9px 2px; border-bottom: 1px dashed rgba(110, 76, 34, .3); }
.quest:last-child { border-bottom: none; }
.quest-title { display: flex; justify-content: space-between; gap: 10px; font: 700 17px/1.3 Alegreya, Georgia, serif; color: var(--ink); }
.quest-title .lvl { color: var(--ink-muted); font: 500 13px "Alegreya Sans", sans-serif; white-space: nowrap; }
.quest .state { font-size: 13px; font-weight: 700; color: #2f6b1f; }
.quest.failed .state { color: #8a1c10; }
.objective { margin-top: 5px; font-size: 15px; }
.objective .row { display: flex; justify-content: space-between; gap: 8px; color: #4a3519; }
.objective.done .row { color: #2f6b1f; }
.objective .mini { height: 5px; border-radius: 2px; background: rgba(80, 50, 20, .2); margin-top: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(80, 50, 20, .25); }
.objective .mini div { height: 100%; background: linear-gradient(90deg, #a06a20, #c99636); transition: width .6s ease; }
.objective.done .mini div { background: #3c7a22; }

/* --- equipment: the character pane ------------------------------------------- */

.paperdoll {
  display: grid; gap: 10px 14px;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  grid-template-areas: "left doll right" ". bottom .";
}
.slots { display: grid; gap: 7px; align-content: start; }
.slots.left { grid-area: left; }
.slots.right { grid-area: right; }
.slots.bottom { grid-area: bottom; display: flex; justify-content: center; }
.slot {
  position: relative; width: 50px; height: 50px; display: grid; place-items: center; overflow: hidden;
  border-radius: 4px; text-decoration: none;
  background: linear-gradient(145deg, #2a2219, #0d0a07);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5226, 0 0 0 1px #1b140c, 0 2px 4px rgba(0, 0, 0, .5);
}
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot::after { content: ""; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); pointer-events: none; }
/* uncommon and better: coloured border, as in the game */
.slot.q2, .slot.q3, .slot.q4, .slot.q5, .slot.q6, .slot.q7 {
  box-shadow: inset 0 0 0 2px var(--q), 0 0 0 1px #000, 0 0 8px color-mix(in srgb, var(--q) 45%, transparent);
}
.slot.q2::after, .slot.q3::after, .slot.q4::after, .slot.q5::after, .slot.q6::after, .slot.q7::after {
  box-shadow: inset 0 0 0 2px var(--q);
}
.slot.q0 img { filter: saturate(.75); }
.slot:hover { filter: brightness(1.2); box-shadow: inset 0 0 0 1px var(--trim-light), 0 0 10px rgba(255, 209, 0, .45); }
.slot .letter { font: 700 20px Cinzel, serif; color: var(--q, var(--text)); }
.slot.empty span {
  font-size: 9px; line-height: 1.05; text-align: center; text-transform: uppercase; letter-spacing: .04em;
  color: #6b5a40; padding: 2px;
}
.q0 { --q: #9d9d9d; } .q1 { --q: #ffffff; } .q2 { --q: #1eff00; } .q3 { --q: #0070dd; }
.q4 { --q: #a335ee; } .q5 { --q: #ff8000; } .q6 { --q: #e6cc80; } .q7 { --q: #00ccff; }

.doll {
  grid-area: doll; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px; border-radius: 4px; min-width: 0;
  background:
    radial-gradient(ellipse at 50% 22%, color-mix(in srgb, var(--class) 22%, #2b2433) 0%, #120e14 72%);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--line), inset 0 0 40px rgba(0, 0, 0, .8);
}
.doll-portrait { width: 112px; height: 112px; font-size: 40px; margin-top: 6px; }
.doll-title { margin: 6px 0 2px; text-align: center; font-size: 17px; }
.doll-title b { color: var(--label); font-family: Cinzel, serif; }
.doll-title .cls { color: var(--class); font-weight: 700; }
.statsheet { width: 100%; max-width: 280px; text-align: center; margin-top: auto; }
.statsheet h3 { font-size: 14px; margin-bottom: 8px; }
.statsheet dl { margin: 0; text-align: left; }
.statsheet dl div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; border-radius: 2px; }
.statsheet dl div:nth-child(odd) { background: rgba(255, 255, 255, .035); }
.statsheet dt { color: var(--label); }
.statsheet dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- professions ------------------------------------------------------------ */

.prof { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.prof-icon {
  position: relative; width: 40px; height: 40px; border-radius: 4px; overflow: hidden;
  display: grid; place-items: center; font: 700 16px Cinzel, serif; color: var(--gold);
  background: linear-gradient(145deg, #2a2219, #0d0a07);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5226;
}
.prof-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prof .vital-label > span:first-child { color: var(--text); font-weight: 700; }
.tier { margin-left: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--label); font-weight: 400; }
.bonus { color: #1eff00; }
/* the game's skill bars are blue; a capped skill turns gold */
.bar.skill .fill { background: linear-gradient(180deg, #8fa8ff, #3d5fd0 45%, #1d2f7a); }
.bar.skill.maxed .fill { background: linear-gradient(180deg, #ffe58a, #d8a72c 45%, #7a5a12); }
.prof-group {
  font: 700 13px Cinzel, serif; letter-spacing: .08em; color: var(--muted);
  margin: 6px 0 12px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
}

@media (max-width: 420px) {
  .page { padding: 20px 12px 40px; }
  .card { padding: 18px 14px; }
  .paperdoll { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
  .slot { width: 44px; height: 44px; }
  .slot.empty span { font-size: 7.5px; letter-spacing: 0; }
  .doll { padding: 14px 8px; }
  .doll-portrait { width: 84px; height: 84px; }
}

.foot { margin-top: 30px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}