/* WoW Desk: original fantasy styling (no game art). Fonts: Cinzel + Alegreya, SIL OFL. */
@font-face { font-family: "Cinzel"; src: url(fonts/Cinzel.ttf) format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url(fonts/Alegreya.ttf) format("truetype"); font-weight: 400 900; font-display: swap; }
:root {
  --bg: #0e0b08; --ink: #ecdfc4; --dim: #a8977a; --gold: #e6b84f; --gold2: #f7dc8e; --bronze: #8a6a34;
  --stone: #1d1812; --stone2: #262017; --edge: #4a3a22; --ok: #8fd18a; --bad: #e8735c; --xp: #a26be0; --rest: #4f8fe6;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .4  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 17px/1.45 "Alegreya", Georgia, serif; min-height: 100vh;
  background: radial-gradient(ellipse at 50% -10%, #3a2614 0%, transparent 60%), radial-gradient(ellipse at 90% 110%, #1b2a2a 0%, transparent 55%), var(--noise), var(--bg); }
h1, h2, h3, .brand, .lvl, .lvlchip, .val, .clock { font-family: "Cinzel", Georgia, serif; }
small, .sub { color: var(--dim); }
code { background: #000a; padding: 1px 6px; border-radius: 3px; font-size: .9em; }

/* ambient sky: drifting fog and rising embers */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fog { position: absolute; inset: -20%; opacity: .22; filter: blur(30px);
  background: radial-gradient(closest-side, #6b4a2a55, transparent 70%) 10% 70% / 60% 50% no-repeat, radial-gradient(closest-side, #2f4a4a44, transparent 70%) 80% 30% / 50% 40% no-repeat; }
.f1 { animation: drift 60s ease-in-out infinite alternate; } .f2 { animation: drift 85s ease-in-out infinite alternate-reverse; opacity: .15; }
@keyframes drift { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.1); } }
.ember { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #ffd27a, #ff7a1a 60%, transparent 70%); box-shadow: 0 0 6px 2px #ff8a2a88;
  animation: rise var(--d) linear var(--delay) infinite; opacity: 0; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .6; } 100% { transform: translate(var(--drift), -105vh); opacity: 0; } }

/* header */
header.top { position: relative; z-index: 2; display: flex; align-items: center; gap: 28px; padding: 10px 28px;
  background: linear-gradient(#2a1f13, #17110b); border-bottom: 2px solid var(--bronze); box-shadow: 0 2px 0 #000, 0 6px 24px #0008; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: 22px; font-weight: 700; text-decoration: none; letter-spacing: .04em;
  text-shadow: 0 0 12px #e6b84f55; }
.crest { width: 30px; height: 30px; color: var(--gold); filter: drop-shadow(0 0 4px #e6b84f88); animation: sway 6s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(-6deg); } }
nav a { font-family: "Cinzel", serif; color: var(--ink); text-decoration: none; margin-right: 18px; padding: 4px 2px; border-bottom: 2px solid transparent; }
nav a:hover, nav a.on { color: var(--gold2); border-color: var(--gold); }
.clock { margin-left: auto; color: var(--gold2); font-size: 18px; } .clock small { font-size: 11px; }
.sha { color: #6f5f45; font-size: 11px; }
main { position: relative; z-index: 1; max-width: 1680px; margin: 0 auto; padding: 22px 26px 40px; }
footer { position: relative; z-index: 1; text-align: center; color: #6f5f45; font-size: 13px; padding-bottom: 24px; }

/* carved frames */
.frame { position: relative; background: linear-gradient(180deg, #2a2219ee, #17120ced), var(--grain), var(--stone);
  border: 1px solid #000; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 3px #0008, inset 0 0 0 4px #6d532c55, 0 8px 22px #000a;
  animation: rise-in .6s ease-out both; }
.frame::before, .frame::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); opacity: .75; }
.frame::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.frame::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel { padding: 18px 20px; }
h2 { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 17px; letter-spacing: .06em; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid #6d532c66; text-shadow: 0 0 10px #e6b84f44; animation: torch 4s ease-in-out infinite; }
@keyframes torch { 0%, 100% { text-shadow: 0 0 8px #e6b84f33; } 45% { text-shadow: 0 0 14px #ffb44a66; } 55% { text-shadow: 0 0 9px #e6b84f44; } }
h3 { color: var(--dim); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; } h3.mt { margin-top: 16px; }
.ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--gold); flex: none; }
.ic.big { width: 28px; height: 28px; position: absolute; top: 14px; right: 14px; opacity: .35; }

/* alerts */
.alerts { margin-bottom: 16px; display: grid; gap: 8px; }
.alert { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 6px; background: linear-gradient(90deg, #3a2a12, #1d160d);
  border: 1px solid var(--gold); animation: runeglow 2.4s ease-in-out infinite; }
.alert time { margin-left: auto; color: var(--dim); font-size: 13px; }
@keyframes runeglow { 50% { box-shadow: 0 0 18px #e6b84f55, inset 0 0 12px #e6b84f22; } }

/* unit frame */
.unitframe { display: grid; grid-template-columns: auto 1fr 1.25fr; gap: 24px; align-items: center; padding: 20px 26px; margin-bottom: 18px; }
.portrait { position: relative; width: 104px; height: 104px; }
.ring { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #3b2c18, #120d07 70%); border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--bronze), 0 0 24px #e6b84f44, inset 0 0 18px #000; animation: aura 5s ease-in-out infinite; }
@keyframes aura { 50% { box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--bronze), 0 0 36px #e6b84f77, inset 0 0 18px #000; } }
.ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: saturate(1.05) contrast(1.05); }
.crest-big { width: 62px; height: 62px; color: var(--gold2); filter: drop-shadow(0 0 6px #e6b84faa); animation: sway 7s ease-in-out infinite; }
.lvl { position: absolute; bottom: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #5a4220, #1a1209); border: 2px solid var(--gold); color: var(--gold2); font-weight: 700; font-size: 18px; box-shadow: 0 2px 6px #000; }
.who h1 { margin: 0; font-size: 34px; color: var(--gold2); letter-spacing: .03em; text-shadow: 0 2px 0 #000, 0 0 18px #e6b84f55; }
.surname { color: var(--gold); font-size: .7em; }
.title { margin: 2px 0; color: var(--ink); font-style: italic; } .where { margin: 6px 0 0; color: var(--dim); }
.xpbar { position: relative; height: 26px; border-radius: 4px; overflow: hidden; background: #08060a; border: 2px solid #000; box-shadow: 0 0 0 1px var(--bronze), inset 0 2px 6px #000; }
.xpbar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #c79bf5, var(--xp) 45%, #5c2f99); transition: width 1.2s ease; }
.xpbar .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffff55 50%, transparent 70%); background-size: 220% 100%; animation: shimmer 3.5s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.xpbar .rested { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #4f8fe6aa 0 6px, #4f8fe677 6px 12px); animation: restflow 2s linear infinite; }
@keyframes restflow { to { background-position: 24px 0; } }
.xpbar .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), #000a calc(5% - 1px) 5%); }
.xptext { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; letter-spacing: .03em; }
.eta { margin: 10px 0 0; } .eta b { color: var(--gold2); } .restxt { color: #8db8f5; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { padding: 14px 16px; transition: transform .25s, box-shadow .25s; }
.tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 4px #6d532c55, 0 12px 28px #000c, 0 0 18px #e6b84f22; }
.tile .val { font-size: 26px; margin: 2px 0; color: var(--ink); } .tile .sub { margin: 0; font-size: 13px; }
.tile.warn { box-shadow: inset 0 0 0 1px var(--bad), 0 0 16px #e8735c44; animation: rise-in .6s ease-out both, warnpulse 2s ease-in-out infinite; } .tile.warn .val { color: var(--bad); }
@keyframes warnpulse { 50% { box-shadow: inset 0 0 0 1px var(--bad), 0 0 26px #e8735c88; } }
.mood.m3 { color: var(--ok); } .mood.m2 { color: var(--gold2); } .mood.m1 { color: var(--bad); }
.gauge { height: 8px; background: #000; border-radius: 4px; overflow: hidden; margin: 6px 0; box-shadow: 0 0 0 1px var(--edge); }
.gauge span { display: block; height: 100%; background: linear-gradient(90deg, #8a6a34, var(--gold)); transition: width 1s; }
.coins b { font-weight: 600; margin-right: 8px; }
.coins b::after { content: ""; display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-left: 3px; vertical-align: .05em; box-shadow: inset -2px -2px 0 #0004; }
.coins .g { color: #ffd76a; } .coins .g::after { background: radial-gradient(circle at 35% 30%, #fff3b0, #e6b030 60%, #9a6a10); animation: glint 4s ease-in-out infinite; }
.coins .s { color: #dfe3e8; } .coins .s::after { background: radial-gradient(circle at 35% 30%, #fff, #b9c0c8 60%, #6b737c); }
.coins .c { color: #e59a62; } .coins .c::after { background: radial-gradient(circle at 35% 30%, #ffd0a8, #c46a2c 60%, #6e3510); }
@keyframes glint { 0%, 85%, 100% { filter: none; } 92% { filter: brightness(1.8) drop-shadow(0 0 4px #ffe9a0); } }

/* columns */
.grid3 { display: grid; grid-template-columns: 1fr 1.15fr .95fr; gap: 16px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.next { display: flex; gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid #6d532c33; }
.next p { margin: 0; font-size: 14px; } .next.now b { color: var(--gold2); }
.next.now .lvlchip { animation: aura 3s ease-in-out infinite; }
.lvlchip { flex: none; min-width: 48px; text-align: center; padding: 4px 6px; border-radius: 4px; background: #000; border: 1px solid var(--gold); color: var(--gold2); font-size: 13px; }
.warnline { color: var(--bad); margin: 4px 0; font-size: 14px; }
.chron { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.chron li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 2px; border-bottom: 1px solid #6d532c22;
  animation: rise-in .5s ease-out both; animation-delay: calc(var(--i) * 60ms); font-size: 15px; }
.chron time { color: var(--dim); font-size: 12px; white-space: nowrap; }
.chron .k-level .ic, .chron .k-level span { color: #c9a2f2; } .chron .k-death .ic { color: var(--bad); } .chron .k-rare_seen .ic { color: #8db8f5; }
.chron .k-quest_done .ic { color: #ffd76a; }
.stat { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #6d532c22; }
.stat span { color: var(--dim); } .stat b { font-weight: 600; }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.idle { color: var(--dim); font-style: italic; }
.beacon { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.beacon.up { background: var(--ok); box-shadow: 0 0 0 0 #8fd18a; animation: beacon 2s infinite; } .beacon.down { background: var(--bad); }
@keyframes beacon { 70% { box-shadow: 0 0 0 7px #8fd18a00; } 100% { box-shadow: 0 0 0 0 #8fd18a00; } }
.skill { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; margin: 7px 0; }
.sbar { position: relative; height: 18px; background: #000; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--edge); }
.sbar div { height: 100%; background: linear-gradient(180deg, #5fae5f, #2f6b2f); transition: width 1s; }
.sbar.capped div { background: linear-gradient(180deg, #e6b84f, #8a6a34); animation: warnpulse 2s infinite; }
.sbar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; text-shadow: 0 1px 2px #000; }
.quests { list-style: none; padding: 0; margin: 0; font-size: 15px; } .quests li { padding: 3px 0; }
.quests .ql { display: inline-block; min-width: 28px; color: var(--gold); font-family: "Cinzel", serif; font-size: 12px; }
.quests li.done { color: #ffd76a; } .quests em { color: var(--ok); font-size: 13px; }
.jstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jstats div { text-align: center; padding: 10px 4px; background: #0006; border: 1px solid #6d532c44; border-radius: 4px; }
.jstats b { display: block; font-family: "Cinzel", serif; font-size: 24px; color: var(--gold2); } .jstats span { color: var(--dim); font-size: 13px; }
.chart { width: 100%; height: 120px; display: block; background: #0005; border-radius: 4px; border: 1px solid #6d532c33; }
.chart .draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 2.4s ease-out forwards; filter: drop-shadow(0 0 3px currentColor); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .pulse { animation: dot 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dot { 50% { transform: scale(1.8); opacity: .5; } }

/* tables (chronicles page) */
table.wide { width: 100%; border-collapse: collapse; font-size: 15px; }
table.wide th { color: var(--gold); font-family: "Cinzel", serif; font-size: 12px; letter-spacing: .08em; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bronze); }
table.wide td { padding: 7px 10px; border-bottom: 1px solid #6d532c22; } table.wide tr:hover td { background: #e6b84f0d; }

@media (max-width: 1000px) { .unitframe, .grid3, .grid2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .chart .draw { stroke-dashoffset: 0; } }
.settled .frame, .settled .chron li { animation: none; }
.settled .tile.warn { animation: warnpulse 2s ease-in-out infinite; }
.settled .chart .draw { animation: none; stroke-dashoffset: 0; }
.grid2 { align-items: start; }
.chron { scrollbar-width: thin; scrollbar-color: var(--bronze) #0008; }
.chron::-webkit-scrollbar { width: 8px; } .chron::-webkit-scrollbar-thumb { background: var(--bronze); border-radius: 4px; } .chron::-webkit-scrollbar-track { background: #0008; }
.livebadge { display: inline-block; font: 600 11px "Cinzel", serif; letter-spacing: .1em; text-transform: uppercase; color: #0e0b08;
  background: var(--ok); border-radius: 3px; padding: 1px 6px; vertical-align: 2px; animation: beacon 2s infinite; }
.ledger-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.lrow { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #6d532c22; }
.lrow.in b { color: var(--ok); } .lrow.out b { color: var(--bad); }
.net { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bronze); display: flex; justify-content: space-between; font-family: "Cinzel", serif; }
.split { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin: 8px 0 12px; box-shadow: 0 0 0 1px var(--edge); }
.split span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--dim); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
@media (max-width: 1000px) { .ledger-cols { grid-template-columns: 1fr; } }
.ammo-type { margin: 1px 0 !important; font-size: 12px !important; } .eq { color: var(--ok); font-weight: 600; font-size: 11px; }

/* progress vs struggle */
.wide-panel { margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; color: var(--dim);
  background: #0006; border: 1px solid #6d532c55; }
.chip i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.chip b { color: var(--ink); font-weight: 600; } .chip .ic { width: 13px; height: 13px; color: var(--bad); }
svg.pchart { width: 100%; height: auto; display: block; background: radial-gradient(ellipse at 50% 120%, #2a1d1033, transparent 70%), #0005;
  border: 1px solid #6d532c33; border-radius: 6px; }
.pgrid { stroke: #6d532c2e; } .pbase { stroke: #6d532c88; }
.pax { fill: var(--dim); font: 13px "Alegreya", serif; } .pax.lv { fill: #f0c75e; } .pax.sk { fill: #e6b84f; } .pax.cap { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pdraw { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: draw 2.6s ease-out forwards; }
.ppulse { animation: dot 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.breathe { animation: breathe 5s ease-in-out infinite; } @keyframes breathe { 50% { opacity: .65; } }
.pskull { color: var(--bad); opacity: .85; }
.note { color: var(--dim); font-size: 13px; margin: 10px 2px 0; }
.settled .pdraw { animation: none; stroke-dashoffset: 0; }

/* menagerie */
.pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.petcard { padding: 14px 16px; border-radius: 6px; background: #0006; border: 1px solid #6d532c44; transition: transform .25s, box-shadow .25s; }
.petcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #000a; }
.petcard.active { border-color: var(--gold); box-shadow: 0 0 18px #e6b84f22; }
.pethead { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.petring { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 40%, #3b2c18, #120d07 70%); border: 2px solid var(--gold); box-shadow: 0 0 0 2px #000, 0 0 12px #e6b84f33; }
.petcard.active .petring { animation: aura 4s ease-in-out infinite; }
.petring .ic { width: 24px; height: 24px; color: var(--gold2); }
.petring span { position: absolute; bottom: -6px; right: -8px; min-width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #1a1209; border: 1px solid var(--gold); color: var(--gold2); font: 600 12px "Cinzel", serif; }
.petname { font-size: 18px !important; color: var(--gold2) !important; letter-spacing: .04em !important; text-transform: none !important; margin: 0 !important; }
.petstate { margin: 2px 0 0; font-size: 13px; color: var(--dim); }
.petstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.petstats div { text-align: center; padding: 6px 2px; background: #0005; border: 1px solid #6d532c33; border-radius: 4px; }
.petstats b { display: block; font: 600 17px "Cinzel", serif; color: var(--ink); } .petstats span { font-size: 11px; color: var(--dim); }
.petxp { position: relative; height: 12px; background: #000; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--edge); margin-bottom: 8px; }
.petxp div { height: 100%; background: linear-gradient(90deg, #5c2f99, var(--xp)); }
.petxp em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 10px; text-shadow: 0 1px 2px #000; }
.petab span { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 7px; border-radius: 999px; background: #0007; border: 1px solid #6d532c44; font-size: 12px; }
.moods { display: flex; gap: 3px; margin-top: 6px; } .moods i { flex: 1; height: 6px; border-radius: 2px; }
.moods .m3 { background: var(--ok); } .moods .m2 { background: var(--gold); } .moods .m1 { background: var(--bad); }
.alert .x { background: none; border: 0; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.alert .x:hover { color: var(--gold2); } .autofix { color: var(--dim); font-size: 12px; margin-left: 6px; }

.classbadge { position: absolute; top: -4px; left: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #3a5a2a, #10180a); border: 2px solid var(--gold); box-shadow: 0 2px 6px #000; }
.classbadge svg { width: 22px; height: 22px; color: #b6e08a; }
.sheet { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 22px; }
.sheetcol h3 { margin-bottom: 8px; } .sheetcol h3 small { text-transform: none; letter-spacing: 0; color: var(--dim); }
.sbar.attr div { background: linear-gradient(180deg, #c9a2f2, #6b3fa6); }
.gear { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.gear li { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; padding: 3px 0; border-bottom: 1px solid #6d532c22; }
.gslot { color: var(--dim); font-size: 12px; } .gear small { color: var(--dim); }
.q-poor { color: #9d9d9d; } .q-common { color: #f2ead8; } .q-uncommon { color: #3bd33b; } .q-rare { color: #3b8bff; }
.q-epic { color: #b45cff; } .q-legendary { color: #ff9a2a; }
@media (max-width: 1000px) { .sheet { grid-template-columns: 1fr; } }

.trainplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.titem { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #6d532c22; }
.titem p { margin: 0; font-size: 13px; } .titem.now b { color: var(--gold2); } .titem.now .lvlchip { animation: aura 3s ease-in-out infinite; }
.h2note { margin-left: auto; font: 12px "Alegreya", serif; color: var(--dim); letter-spacing: 0; text-transform: none; }

/* the party: character card + up to 3 pets */
.pets.party { grid-template-columns: minmax(420px, 1.7fr) repeat(3, minmax(220px, 1fr)); }
.charcard { border-color: var(--gold); box-shadow: 0 0 18px #e6b84f22; }
.petring.me img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cc { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.cc .petstats { grid-template-columns: repeat(3, 1fr); } .cc h3 { margin: 4px 0; }
.skill.main span { color: var(--gold2); font-weight: 600; } .skill.main small { color: var(--gold); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.skill.main .sbar div { background: linear-gradient(180deg, #ffe08a, #b8862c); box-shadow: 0 0 8px #e6b84f88; }
.skill.main .sbar { box-shadow: 0 0 0 1px var(--gold), 0 0 10px #e6b84f44; }
.cc .gear { font-size: 12px; } .cc .gear li { grid-template-columns: 62px 1fr auto; padding: 1px 0; }
.petcard.empty { opacity: .45; border-style: dashed; } .petcard.empty .petname { color: var(--dim) !important; }
@media (max-width: 1300px) { .pets.party { grid-template-columns: 1fr 1fr; } }
.chip.dropped { opacity: .55; } .chip small { font-size: 10px; }

/* compact training plan: one carved row per track */
.tplan { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.trow { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; padding: 6px 8px;
  border-radius: 4px; background: #0005; border: 1px solid #6d532c33; }
.trow.ready { border-color: #e6b84f88; box-shadow: inset 0 0 12px #e6b84f14; }
.tlabel { display: flex; gap: 8px; align-items: center; } .tlabel .ic { width: 16px; height: 16px; }
.tlabel b { display: block; font: 600 14px "Cinzel", serif; color: var(--gold2); line-height: 1.1; } .tlabel small { color: var(--dim); font-size: 12px; }
.tchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tchip { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 9px; border-radius: 999px; font-size: 13px;
  background: linear-gradient(#3a2a12, #22180c); border: 1px solid var(--gold); color: var(--ink); animation: runeglow 3s ease-in-out infinite; }
.tchip em { font-style: normal; font-size: 11px; color: var(--gold); } .tchip.hot { border-color: var(--bad); } .tchip.hot em { color: var(--bad); }
.tnone { color: var(--dim); font-size: 13px; font-style: italic; } .tlater { color: var(--dim); font-size: 12px; margin-left: auto; }
@media (max-width: 1000px) { .tplan { grid-template-columns: 1fr; } }
.buffnote { font-size: 11px !important; color: #8db8f5 !important; margin-top: 2px !important; }

.pushdot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #6f5f45; box-shadow: 0 0 0 2px #0008; }
.pushdot.on { background: var(--ok); animation: beacon 2.4s infinite; }
.pushdot.ping { background: var(--gold2); box-shadow: 0 0 14px 4px #e6b84faa; }
.lastdata + .clock, .pushdot + .clock { margin-left: 14px; }

.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sgrid div { text-align: center; padding: 7px 2px; background: #0005; border: 1px solid #6d532c33; border-radius: 4px; }
.sgrid b { display: block; font: 600 16px "Cinzel", serif; color: var(--ink); } .sgrid span { font-size: 11px; color: var(--dim); }
.sline { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: 13px; color: var(--dim); } .sline b { color: var(--ok); font-weight: 600; }
.realm { display: flex; gap: 16px; margin: 12px 0 0; padding-top: 8px; border-top: 1px solid #6d532c33; font-size: 13px; color: var(--dim); }

/* tile config */
.tiles { position: relative; }
.tilecfg { position: absolute; top: -10px; right: -6px; z-index: 5; }
.tilecfg summary { list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #1a1209; border: 1px solid var(--bronze); opacity: .6; } .tilecfg summary:hover { opacity: 1; border-color: var(--gold); }
.tilecfg summary::-webkit-details-marker { display: none; } .tilecfg summary .ic { width: 12px; height: 12px; }
.tilepick { position: absolute; right: 0; top: 28px; width: 240px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
  background: linear-gradient(#2a2219, #17120c); border: 1px solid var(--gold); border-radius: 6px; box-shadow: 0 10px 30px #000c; font-size: 13px; }
.tilepick button { grid-column: 1 / -1; margin-top: 6px; font: 13px "Cinzel", serif; color: var(--gold2); background: #0006; border: 1px solid var(--bronze); border-radius: 4px; padding: 4px; cursor: pointer; }
.tiles { grid-template-columns: repeat(6, 1fr); }
/* past present future */
.ppf { grid-template-columns: 1.1fr .95fr 1fr; }
.alink { color: inherit; text-decoration: none; } .alink:hover b { color: var(--gold2); text-decoration: underline; text-decoration-color: #e6b84f66; }
.ext { color: var(--gold); font-size: 11px; opacity: .7; }
/* volume bars */
.vbar { opacity: .7; transition: opacity .2s; } .vbar:hover { opacity: 1; }
/* bank */
.g-bank { margin-bottom: 16px; }
.banktabs { display: flex; gap: 6px; margin-bottom: 10px; }
.btab { font: 13px "Cinzel", serif; color: var(--dim); background: #0006; border: 1px solid #6d532c55; border-radius: 4px; padding: 3px 12px; cursor: pointer; }
.btab.on { color: var(--gold2); border-color: var(--gold); box-shadow: 0 0 10px #e6b84f22; }
.bview { display: none; } .bview.on { display: block; }
.bsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.bsum div { padding: 10px 14px; background: #0005; border: 1px solid #6d532c44; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.bsum div > span { color: var(--dim); font: 13px "Cinzel", serif; } .bsum b { font-size: 20px; } .bsum .netbox { border-color: var(--gold); }
.bcols { display: grid; grid-template-columns: 1.2fr .9fr 1fr; gap: 20px; }
table.goods { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
table.goods th { color: var(--gold); font: 11px "Cinzel", serif; letter-spacing: .06em; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--bronze); }
table.goods td { padding: 4px 6px; border-bottom: 1px solid #6d532c22; }
@media (max-width: 1000px) { .ppf, .bcols, .bsum { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(3, 1fr); } }
.bcols.two { grid-template-columns: 1.2fr 1fr; } .pnl { margin-top: 14px; }
.pbar { opacity: .82; transition: opacity .2s; } .pbar:hover { opacity: 1; } .pzero { stroke: #a8977a88; }
.banktabs.inline { margin: 0 0 0 auto; display: inline-flex; } .banktabs.inline .btab { font-size: 11px; padding: 2px 9px; }
.pview { display: none; } .pview.on { display: block; }
.pstats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; font-size: 13px; color: var(--dim); }
.pstats b { color: var(--gold2); font-family: "Cinzel", serif; font-weight: 600; } .pstat-dim { margin-left: auto; }

/* money: gold digits . silver digits copper digits */
.mny { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg { color: #ffd76a; } .ms { color: #d8dde3; } .mc { color: #e09a62; }
.bad .mg, .bad .ms, .bad .mc { filter: saturate(.7) brightness(.95); }
.petstat { color: #8db8f5; } .petstat b { color: #b9d3f7 !important; }

/* ---------- life: coins, skulls, small ambient motion ---------- */
.coin { display: inline-block; width: .7em; height: .7em; margin-left: 5px; border-radius: 50%; vertical-align: .02em;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #e6b030 60%, #9a6a10); box-shadow: inset -2px -2px 0 #0004, 0 0 4px #e6b03055;
  position: relative; overflow: hidden; }
.coin::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 46%, #fffbe6e0 46%, #fffbe6e0 54%, transparent 54%);
  transform: translateX(-120%); }
.coin.go::after { animation: sweepgo .6s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes coinglint { 0%, 80% { transform: translateX(-120%); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  92%, 100% { transform: translateX(120%); } }
.bad .coin { filter: saturate(.6) brightness(.85); }
.dmark .pskull { animation: skullflash 4.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes skullflash { 0%, 80%, 100% { filter: none; } 88% { filter: brightness(1.9) drop-shadow(0 0 3px #ff9a3a); } }
.dhalo { fill: #ff9a3a; opacity: .0; animation: halo 4.5s ease-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes halo { 0%, 78% { opacity: 0; transform: scale(.5); } 86% { opacity: .28; } 100% { opacity: 0; transform: scale(1.5); } }
.dspark { fill: #ffb44a; opacity: 0; animation-name: spark; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes spark { 0%, 70% { opacity: 0; transform: translate(0, 0); } 74% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--sx, 0px), calc(var(--rise, 16px) * -1)); } }
.tile .ic.big { animation: iconfloat 6s ease-in-out infinite; } .tile:nth-child(2n) .ic.big { animation-delay: -3s; }
@keyframes iconfloat { 50% { transform: translateY(-2px); opacity: .5; } }
.chip i { animation: chipglow 4s ease-in-out infinite; } @keyframes chipglow { 50% { box-shadow: 0 0 9px currentColor; } }
.chron li .ic { transition: transform .3s; } .chron li:hover .ic { transform: scale(1.25) rotate(-8deg); }
.lvl { animation: lvlshine 7s ease-in-out infinite; } @keyframes lvlshine { 92% { box-shadow: 0 2px 6px #000; } 96% { box-shadow: 0 2px 6px #000, 0 0 14px #ffd76a; } }

/* the coin-style light sweep, as its own layer so it never touches the gold frame corners */
.sweep { position: absolute; inset: 1px; overflow: hidden; pointer-events: none; border-radius: 5px; }
.sweep::after { content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 46%, #fff6d655 46%, #fff6d655 54%, transparent 54%); }
.sweep.go::after { animation: sweepgo .75s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes sweepgo { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.bsum .netbox { position: relative; overflow: hidden; }
.tile, .bsum .netbox { isolation: isolate; } .sweep { z-index: -1; }
.quests li.done { text-shadow: 0 0 0 transparent; animation: readyglow 4s ease-in-out infinite; }
@keyframes readyglow { 50% { text-shadow: 0 0 8px #ffd76a88; } }
/* falling coins from the purse dot */
.fcoin { animation-name: coinfall; animation-timing-function: cubic-bezier(.45, 0, .9, .55); animation-iteration-count: infinite;
  animation-delay: var(--cd); opacity: 0; }
@keyframes coinfall { 0%, 40% { opacity: 0; transform: translate(0, 0); } 44% { opacity: 1; transform: translate(0, 0); }
  80% { opacity: 1; transform: translate(var(--dx), var(--fall)); }
  85% { opacity: 1; transform: translate(calc(var(--dx) + var(--bx)), calc(var(--fall) - 5px)); }
  90% { opacity: 1; transform: translate(calc(var(--dx) + var(--bx) * 1.5), var(--fall)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) + var(--bx) * 1.6), var(--fall)); } }
.clang { opacity: 0; animation-name: clang; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-delay: var(--cd); transform-box: fill-box; transform-origin: center; }
@keyframes clang { 0%, 79% { opacity: 0; transform: scale(.2); } 81% { opacity: .7; } 94%, 100% { opacity: 0; transform: scale(1.8); } }
.pursecoin { filter: drop-shadow(0 0 4px #e6b03099); }

.pursecoin { transform-box: fill-box; transform-origin: center; }
/* profit: every few seconds (random) the coin swells for half a second and flashes as it does */
.pursecoin { filter: drop-shadow(0 0 4px #e6b03099); }
.cstripe { opacity: 0; transform-box: fill-box; }
.pursecoin.gain.go { animation: coinswell .5s cubic-bezier(.45, 0, .55, 1) both; }
.pursecoin.gain.go .cstripe { animation: cstripe .5s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes coinswell { 0% { transform: scale(1); } 45% { transform: scale(1.45); filter: brightness(1.5) drop-shadow(0 0 9px #ffe08a); }
  100% { transform: scale(1); } }
@keyframes cstripe { 0% { opacity: .95; transform: translateX(-9px); } 100% { opacity: .95; transform: translateX(9px); } }
.pursecoin.loss { animation: coinwink 6s ease-in-out infinite; }
@keyframes coinwink { 0%, 88%, 100% { filter: drop-shadow(0 0 3px #e6b03066); } 93% { filter: brightness(1.6) drop-shadow(0 0 7px #ffe08a); } }

/* income stream widgets */
.streams { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.stile { position: relative; padding: 9px 11px; border-radius: 5px; background: linear-gradient(180deg, #2a2219ee, #17120ced);
  border: 1px solid #6d532c66; box-shadow: inset 0 0 0 1px #0006; overflow: hidden; }
.stile .sicon { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; opacity: .35; }
.stile .slabel { display: block; color: var(--dim); font: 11px "Cinzel", serif; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.stile b { font-size: 17px; } .stile small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.chev { display: inline-block; font-size: 11px; margin-left: 4px; animation: chevflash 4s ease-in-out infinite; }
.chev.up { color: var(--ok); } .chev.down { color: var(--bad); }
.stile .chev { display: block; margin: 2px 0 0; }
@keyframes chevflash { 0%, 70%, 100% { filter: none; transform: translateY(0); }
  80% { filter: brightness(1.8) drop-shadow(0 0 4px currentColor); transform: translateY(var(--cy, -2px)); } }
.chev.down { --cy: 2px; }

/* ---------- larger text, same boxes ---------- */
.sub, .note, .t, .chip, .pstats, .lrow, .stat, .slabel, .stile small, .petstats span, .jstats span, .sgrid span,
.legend, .tile .sub, .chron time, .gear, .ammo-type { font-size: 14px !important; }
.tile h3, .panel h3, .slabel, .sgrid span, .petstats span { font-size: 13px !important; letter-spacing: .04em !important; }
.chron li { font-size: 16px; } .stat, .lrow { font-size: 16px !important; }
.pax { font-size: 15px; } .pax.cap { font-size: 12px; }
.tile .val { font-size: 29px; } .stile b { font-size: 20px; } .bsum b { font-size: 23px; } .bsum div > span { font-size: 15px; }
.sgrid b, .petstats b { font-size: 19px; } .jstats b { font-size: 26px; }
.chip { padding: 2px 9px; } .tile { padding-top: 11px; padding-bottom: 11px; } .stile { padding: 7px 10px; }
.sgrid div, .petstats div { padding-top: 5px; padding-bottom: 5px; } .chron li { padding: 4px 2px; }

/* bigger numbers that fill their boxes; income streams 2 x 2 */
.bsum div { padding: 8px 16px; } .bsum b { font-size: 34px !important; line-height: 1.1; } .bsum div > span { font-size: 16px !important; }
.streams { grid-template-columns: 1fr 1fr !important; }
.stile { padding: 8px 12px !important; } .stile b { font-size: 30px !important; line-height: 1.15; display: block; }
.stile .slabel { font-size: 13px !important; } .stile .sicon { width: 22px; height: 22px; }
.stile .chev { font-size: 13px; }
.lrow b { font-size: 18px; }

/* ---------- one style everywhere, modelled on the Bank ---------- */
/* labels: small Cinzel capitals, dim */
.tile h3, .panel h3, .stile .slabel, .bsum div > span, .sgrid span, .petstats span, .jstats span,
.pstats, .chip, table.wide th, table.goods th {
  font-family: "Cinzel", serif !important; font-size: 12px !important; letter-spacing: .06em !important;
  text-transform: uppercase; color: var(--dim) !important; font-weight: 400 !important; }
.pstats b, .chip b { text-transform: none; }
/* numbers: Alegreya, semi-bold, tabular */
.tile .val, .stile b, .bsum b, .sgrid b, .petstats b, .jstats b, .pstats b, .chip b, .lrow b, .stat b {
  font-family: "Alegreya", Georgia, serif !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.tile .val { font-size: 32px !important; } .sgrid b, .petstats b { font-size: 24px !important; } .jstats b { font-size: 28px !important; }
.pstats b { font-size: 16px !important; color: var(--gold2) !important; }
/* every small box looks like an income-stream widget */
.sgrid div, .petstats div, .jstats div {
  background: linear-gradient(180deg, #2a2219ee, #17120ced) !important; border: 1px solid #6d532c66 !important;
  box-shadow: inset 0 0 0 1px #0006; border-radius: 5px !important; text-align: left !important; padding: 8px 12px !important; }
.sgrid div span, .petstats div span, .jstats div span { display: block; margin-top: 2px; }
/* every list row looks like the spending list */
.stat, .lrow, .next, .chron li, .quests li { border-bottom: 1px solid #6d532c33 !important; padding: 7px 2px !important; font-size: 16px !important; }
.stat span, .lrow span { color: var(--ink) !important; }
/* section headings and tabs */
h2 { font-size: 18px !important; } .btab { font-size: 12px !important; letter-spacing: .05em; }
/* names stay prominent */
.panel h3.petname { font-family: "Cinzel", serif !important; font-size: 19px !important; color: var(--gold2) !important;
  text-transform: none; letter-spacing: .04em !important; font-weight: 600 !important; }
.chip { text-transform: none; font-size: 13px !important; }

.lastdata { margin-left: 8px; font: 12px "Cinzel", serif; letter-spacing: .05em; color: var(--dim); transition: color .4s, text-shadow .4s; }
.lastdata.fresh { color: var(--ok); } .lastdata.aging { color: var(--gold2); } .lastdata.stale { color: var(--dim); }
.lastdata.ping { color: #fff3c4; text-shadow: 0 0 10px #ffd76a; }
.livepos { color: var(--dim); } .livepos b { color: var(--ink) !important; } .livepos .ic { width: 14px; height: 14px; }

.logbadges { margin-left: 10px; } .logbadges i { font: normal 11px "Cinzel", serif; letter-spacing: .05em; padding: 2px 8px;
  border-radius: 999px; border: 1px solid #6d532c66; color: var(--dim); }
.logbadges i::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #6f5f45; vertical-align: 1px; }
.logbadges i.on { color: var(--ok); border-color: #8fd18a66; } .logbadges i.on::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.logbadges i.off { color: var(--bad); border-color: #e8735c88; animation: warnpulse 2s infinite; } .logbadges i.off::before { background: var(--bad); }