:root {
  --bg: #17130f;
  --panel: #241d16;
  --panel2: #2e251c;
  --ink: #efe3cc;
  --muted: #a8977b;
  --gold: #d9a441;
  --gold2: #f3c96b;
  --red: #c4513f;
  --green: #6fa860;
  --line: #4a3c2c;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { background: var(--bg); min-height: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at top, #2a2018 0%, var(--bg) 60%) fixed;
  color: var(--ink);
  font: 17px/1.4 'Crimson Pro', Georgia, serif;
}
h1, h2, h3, h4, .brand { font-family: 'Cinzel', Georgia, serif; color: var(--gold2); margin: 0 0 .5em; letter-spacing: .02em; }
h1 { font-size: 1.7em; }
h3 { font-size: 1.05em; border-bottom: 1px solid var(--line); padding-bottom: .3em; }
h4 { font-size: .95em; margin-top: .8em; }
a { color: var(--gold); }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.hint { color: var(--muted); font-size: .85em; font-style: italic; }
.big { font-size: 1.25em; font-weight: 600; }
.ok { color: var(--green); }
.bad { color: var(--red); }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; padding: .6em 1.2em; background: #0f0c09cc; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(4px); }
.brand { text-decoration: none; font-size: 1.2em; margin: 0; }
#nav { display: flex; flex-wrap: wrap; gap: .3em; }
#nav a { text-decoration: none; padding: .25em .7em; border-radius: 99px; color: var(--ink); border: 1px solid transparent; }
#nav a.on, #nav a:hover { border-color: var(--gold); color: var(--gold2); }
#nav a.new { color: var(--gold); }
#nav a.dice { background: #3a2a14; }
main { max-width: 1250px; margin: 0 auto; padding: 1.2em; }

.card { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1em 1.1em; margin-bottom: 1em; box-shadow: 0 4px 18px #0006; }
.card.narrow { max-width: 480px; margin: 2em auto; }
.card.hero { text-align: center; padding: 3em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1em; margin-bottom: 1em; }
.summary { text-decoration: none; color: var(--ink); display: block; transition: transform .15s, border-color .15s; }
.summary:hover { transform: translateY(-2px); border-color: var(--gold); }
.summary.small h3 { border: 0; }
.portrait { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); float: right; margin-left: .6em; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1em; }
.cols > .card { margin-bottom: 0; }
.cols { margin-bottom: 1em; }

.chips { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .5em; }
.chips span { background: #0005; border: 1px solid var(--line); border-radius: 99px; padding: 0 .55em; font-size: .9em; }
.chips.conds span { border-color: var(--red); color: #f0a090; }

.hpbar { position: relative; height: 26px; background: #0007; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); margin: .4em 0; }
.hpbar div { height: 100%; transition: width .3s; }
.hpbar.ok div { background: linear-gradient(90deg, #3d6b33, #6fa860); }
.hpbar.warn div { background: linear-gradient(90deg, #8a6420, #d9a441); }
.hpbar.bad div { background: linear-gradient(90deg, #7a2a20, #c4513f); }
.hpbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; text-shadow: 0 1px 2px #000; }

input, select, textarea, button { font: inherit; color: var(--ink); }
input, select, textarea { background: #0006; border: 1px solid var(--line); border-radius: 6px; padding: .25em .45em; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--gold); }
input.n { width: 4.2em; text-align: center; }
input.s { width: 6.5em; }
input[type=checkbox] { width: auto; accent-color: var(--gold); transform: scale(1.2); }
textarea { resize: vertical; }
.readonly input:disabled:not([type=checkbox]), .readonly select:disabled, .readonly textarea:disabled { background: transparent; border-color: transparent; opacity: 1; -webkit-text-fill-color: var(--ink); appearance: none; }
.readonly input[type=checkbox]:disabled { opacity: .8; }
.readonly input:disabled::placeholder { color: transparent; }
label { display: flex; flex-direction: column; font-size: .85em; color: var(--muted); gap: .15em; }
label.chk { flex-direction: row; align-items: center; gap: .35em; }
label.inline { flex-direction: row; align-items: center; gap: .5em; margin: .3em 0; }
label.inline input, label.inline select { width: auto; }
form label { margin-bottom: .6em; }
.row { display: flex; gap: .6em; align-items: flex-end; flex-wrap: wrap; margin: .4em 0; }
.row.wrap label { flex: 1 1 130px; }
.row label.wide { flex: 2 1 260px; }

button { background: #3a2f22; border: 1px solid var(--line); border-radius: 6px; padding: .3em .8em; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--gold); }
button.primary { background: linear-gradient(180deg, #b58430, #8a6220); border-color: var(--gold); color: #fff8e6; font-weight: 600; }
button.ok { background: #2e4a28; color: #d8f0cf; }
button.bad { background: #5a241c; color: #ffd9d0; }
button.add { background: transparent; border-style: dashed; color: var(--gold); margin-top: .4em; }
button.x { background: transparent; border: 0; color: var(--muted); padding: 0 .3em; }
button.x:hover { color: var(--red); }
button.roll { background: #0005; border: 1px solid var(--line); min-width: 3em; font-weight: 600; font-size: 1.05em; padding: .1em .5em; }
button.roll:hover { background: #4a3514; border-color: var(--gold2); }
button.roll::after { content: ' 🎲'; font-size: .7em; opacity: .5; }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; color: var(--muted); font-weight: 400; font-size: .85em; padding: .2em .3em; }
td { padding: .15em .3em; border-top: 1px solid #ffffff0d; vertical-align: middle; }
table.abilities th:first-child { color: var(--ink); font-family: 'Cinzel', serif; }
.table-scroll { overflow-x: auto; }
table.list td input:not(.n):not(.s):not([type=checkbox]) { min-width: 9em; }
td.opts { white-space: nowrap; font-size: .9em; }
table.list select { min-width: 7.5em; }
.skills tr.untrained td:nth-child(2) { color: var(--muted); }
.skills input.note { min-width: 7em; }
.ranks.over { color: var(--red); font-weight: 600; }
.wiki { text-decoration: none; font-size: .8em; opacity: .65; }
.wiki:hover { opacity: 1; }

.sheet-head { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin-bottom: .6em; }
.sheet-head .portrait { float: none; width: 84px; height: 84px; margin: 0; }
.sheet-head > div:nth-child(2), .sheet-head > div:first-child { flex: 1; }
.sheet-head h1 { margin: 0; }
.lock form { margin: 0; flex-wrap: nowrap; }
.lock input { width: 8em; }
.status { color: var(--muted); margin-right: .6em; font-size: .9em; }
.tabs { display: flex; gap: .2em; flex-wrap: wrap; margin-bottom: 1em; border-bottom: 1px solid var(--line); }
.tabs a { padding: .4em .9em; text-decoration: none; color: var(--muted); border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0; }
.tabs a.on { color: var(--gold2); background: var(--panel2); border-color: var(--line); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .5em; margin-bottom: .6em; }
.stats > div { background: #0004; border: 1px solid var(--line); border-radius: 8px; padding: .35em; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .2em; }
.stats b { font-size: .75em; color: var(--muted); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
.stats span[data-d] { font-size: 1.4em; font-weight: 600; }
.classrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5em; margin-bottom: .5em; }
.classrow > select { width: auto; flex: 1; }
.custom { width: 100%; padding: .4em; background: #0003; border-radius: 6px; }
details summary { cursor: pointer; color: var(--gold); margin: .4em 0; }
.conditions { display: flex; flex-wrap: wrap; gap: .3em; }
.cond { font-size: .85em; padding: .15em .6em; border-radius: 99px; }
.cond.on { background: #6b2a1f; border-color: var(--red); color: #ffe0d8; }
.effect { margin: .3em 0; font-size: .9em; }
.hpquick input { width: 5em; }
.spell-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8em; }
.spell-level { background: #0003; border: 1px solid var(--line); border-radius: 8px; padding: .6em; }
.spells { list-style: none; padding: 0; margin: .3em 0; }
.spells li { display: flex; align-items: center; gap: .4em; margin: .2em 0; }
.named { border-bottom: 1px dashed var(--line); padding: .4em 0; }
.named .row { flex-wrap: nowrap; align-items: center; }
.named input.wide { flex: 1; }
.ledger { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow: auto; }
.ledger li { padding: .15em 0; border-bottom: 1px solid #ffffff0d; }
.coins label { flex: 1; }
.danger { text-align: right; }
tr.sub td { border-top: 0; padding-top: 0; }
tr.sub input { font-size: .9em; }
.readonly tr.sub input:placeholder-shown { display: none; }
li.sub { padding-left: 2em; }
li.sub input { font-size: .9em; }
table.slots th { width: 7em; color: var(--muted); }
td.opts button { font-size: .8em; padding: .15em .45em; }

#toasts { position: fixed; right: 1em; bottom: 1em; display: flex; flex-direction: column; gap: .5em; z-index: 50; max-width: min(420px, 92vw); }
.toast { background: var(--panel2); border: 1px solid var(--gold); border-radius: 8px; padding: .6em .9em; box-shadow: 0 6px 24px #000a; animation: pop .25s ease-out; }
.toast.bad { border-color: var(--red); }
@keyframes pop { from { transform: translateY(12px); opacity: 0; } }

.dice-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr) minmax(260px, 1fr); gap: 1em; align-items: start; }
.dice-layout .card { margin: 0; }
.controls hr { border: 0; border-top: 1px solid var(--line); margin: .8em 0; }
.quick { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; margin: .6em 0; }
.qd { display: flex; flex-direction: column; align-items: center; padding: .3em .1em; background: #0004; }
.qd svg { width: 34px; height: 34px; }
.qd svg > :first-child { fill: #e9dcc2; stroke: #5b4630; stroke-width: 3; }
.qd .edge { fill: none; stroke: #5b463066; stroke-width: 2; }
.qd text { font: 700 30px 'Cinzel', serif; fill: #3a2a1a; }
.qd span { font-size: .8em; color: var(--muted); }
.rollgrid { display: flex; flex-wrap: wrap; gap: .3em; }
.rollgrid button { font-size: .9em; text-align: left; }
.rollgrid button.untrained { opacity: .55; }
.table { background: radial-gradient(ellipse at center, #2f4a2a 0%, #1d2d1a 70%, #142012 100%); border-color: #4a5a36; min-height: 360px; }
.tray { min-height: 220px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 14px; padding: 1em; }
.die { position: relative; width: 74px; height: 74px; animation: tumble .75s cubic-bezier(.2, .8, .3, 1.15) both; animation-delay: calc(var(--i) * 60ms); filter: drop-shadow(0 6px 6px #0009); }
.die svg { width: 100%; height: 100%; }
.die svg > :first-child { fill: #e9dcc2; stroke: #5b4630; stroke-width: 3; }
.die .edge { fill: none; stroke: #5b463066; stroke-width: 2; }
.die text { font: 700 30px 'Cinzel', serif; fill: #3a2a1a; }
.die .pip { fill: #3a2a1a; }
.die.d4 svg > :first-child { fill: #c9e0f0; }
.die.d6 svg > :first-child { fill: #f0e6d0; }
.die.d8 svg > :first-child { fill: #d6c6ee; }
.die.d10 svg > :first-child { fill: #c8ecd2; }
.die.d12 svg > :first-child { fill: #f3d0b8; }
.die.d20 svg > :first-child { fill: #f1d98c; }
.die.dmg svg > :first-child { fill: #f0b8ac; }
.die.gold.settled { filter: drop-shadow(0 0 14px var(--gold2)); }
.die.gold.settled svg > :first-child { fill: #ffd767; stroke: #8a5a10; }
.die.red.settled { filter: drop-shadow(0 0 12px var(--red)); }
.die.red.settled svg > :first-child { fill: #d46a58; }
.die.dropped.settled { opacity: .35; }
.die small { position: absolute; bottom: -1.3em; left: 0; right: 0; text-align: center; font-size: .7em; color: #d8e8c8; }
.die.settled { animation-name: tumble, settle; animation-duration: .75s, .25s; animation-delay: calc(var(--i) * 60ms), 0s; }
@keyframes tumble {
  0% { transform: translate(var(--from), -160px) rotate(0) scale(.6); opacity: 0; }
  60% { transform: translate(0, 10px) rotate(var(--spin)) scale(1.05); opacity: 1; }
  80% { transform: translate(0, -8px) rotate(calc(var(--spin) + 8deg)); }
  100% { transform: translate(0, 0) rotate(calc(var(--spin) + 0deg)) scale(1); }
}
@keyframes settle { 50% { transform: rotate(var(--spin)) scale(1.12); } }
#result { min-height: 3em; }
.roll-rec { border-bottom: 1px solid #ffffff12; padding: .45em 0; }
.roll-rec .total { font-size: 1.6em; color: var(--gold2); margin-right: .2em; }
.roll-rec.compact .total { font-size: 1.3em; }
.roll-rec .who { font-weight: 600; }
.roll-rec .dmg b { color: #ff9c86; font-size: 1.2em; }
.roll-rec s { opacity: .6; }
#result .roll-rec { border: 0; text-align: center; font-size: 1.15em; }
#result .roll-rec .total { font-size: 2.6em; }
.log #rolllog { max-height: 70vh; overflow: auto; }
.flag { display: inline-block; font-size: .72em; border-radius: 99px; padding: 0 .5em; margin-left: .3em; border: 1px solid var(--line); background: #0005; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.flag.nat20, .flag.critico, .flag.successo-automatico { border-color: var(--gold2); color: var(--gold2); }
.flag.nat1, .flag.mancato, .flag.fallimento-automatico { border-color: var(--red); color: #ff9c86; }
.flag.colpito { border-color: var(--green); color: #b7e3a9; }
.flag.minaccia { border-color: var(--gold); color: var(--gold); }

@media (max-width: 1000px) {
  .dice-layout { grid-template-columns: 1fr; }
  .table { order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  main { padding: .6em; }
  .cols { grid-template-columns: 1fr; }
  .die { width: 60px; height: 60px; }
}

.steps { display: flex; flex-wrap: wrap; gap: .3em; list-style: none; padding: 0; margin: 0 0 1em; counter-reset: st; }
.steps li { counter-increment: st; padding: .2em .7em; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: .9em; }
.steps li::before { content: counter(st) ". "; }
.steps li.done { border-color: #4a6a3a; color: #b7e3a9; }
.steps li.on { border-color: var(--gold); color: var(--gold2); background: #3a2a14; }
.steps a { color: inherit; text-decoration: none; }
.wizard h2 { font-size: 1.3em; }
.wiz-nav { display: flex; align-items: center; gap: 1em; margin-top: 1.2em; padding-top: .8em; border-top: 1px solid var(--line); }
.wiz-nav #wblock { flex: 1; font-size: .9em; }
.wiz-nav button:disabled { opacity: .45; cursor: not-allowed; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5em; margin-bottom: 1em; }
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-bottom: 1em; max-width: 640px; }
.pick { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; text-align: left; padding: .55em .7em; background: #0004; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: .95em; }
.pick span { color: var(--muted); font-size: .85em; }
.pick.on { border-color: var(--gold2); background: #4a3514; box-shadow: 0 0 0 1px var(--gold2) inset; }
.pick:disabled { opacity: .3; cursor: not-allowed; }
.pick.small { flex-direction: row; padding: .3em .7em; }
.card.inner { background: #0003; box-shadow: none; }
.wiz-table { min-height: 0; padding: .4em; margin: .6em 0; border-radius: 10px; }
.wiz-table .tray { min-height: 120px; gap: 8px; }
.wiz-table .die { width: 52px; height: 52px; }
.die.static { animation: none; }
.die.set1 svg > :first-child { fill: #f3e0b6; }
.sets { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4em; }
.set { display: flex; flex-direction: column; align-items: center; background: #0004; border: 1px solid var(--line); border-radius: 8px; padding: .4em; font-size: .85em; }
.set .big { font-size: 1.8em; color: var(--gold2); }
.chipv { display: inline-block; min-width: 2.2em; text-align: center; border: 1px solid var(--gold); border-radius: 6px; padding: 0 .3em; font-weight: 600; }
.chipv.used { opacity: .35; text-decoration: line-through; }
table.assign { max-width: 560px; }
table.assign select { width: 5em; }
tr.keyab th { color: var(--gold2); }
.skill-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .25em .8em; }
.skill-pick label { color: var(--ink); font-size: .95em; }
.skill-pick label.classskill { font-weight: 600; }
.skill-pick label.classskill::after { content: ' (classe)'; color: var(--gold); font-weight: 400; font-size: .8em; }
.huge { font-size: 2.6em; font-weight: 700; color: var(--gold2); margin: .1em 0; }
.small-tray { min-height: 70px; }
.small-tray .die { width: 48px; height: 48px; }
@media (max-width: 640px) { .sets { grid-template-columns: repeat(3, 1fr); } .align-grid { grid-template-columns: repeat(2, 1fr); } }
.pick .align { font-size: .75em; border: 1px solid var(--gold); color: var(--gold2); border-radius: 4px; padding: 0 .3em; margin-left: .3em; font-weight: 400; }
.login { display: grid; gap: .8em; }
.login button { justify-self: start; }
.top .logout { margin-left: auto; }

.mappage h1 { margin-bottom: .4em; }
.maptop { padding: .5em .7em; margin-bottom: .6em; }
.toolrow { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.toolrow + .toolrow { margin-top: .45em; }
.toolrow button.on { border-color: var(--gold); color: var(--gold2); background: #4a3a22; }
.toolrow .grow, .toklist .grow { flex: 1; }
label.inline { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
label.inline input.n { width: 4.5em; }
.mapbody { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1em; align-items: start; }
.mapstage { position: relative; height: calc(100vh - 210px); min-height: 420px; background: #0b0907; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; touch-action: none; user-select: none; }
.mapstage .center { margin-top: 30vh; text-align: center; }
#mapsvg { width: 100%; height: 100%; display: block; }
.tool-move #mapsvg { cursor: grab; }
.tool-move .token.draggable { cursor: move; }
.tool-measure #mapsvg, .tool-burst #mapsvg, .tool-cone #mapsvg, .tool-line #mapsvg, .tool-reveal #mapsvg, .tool-hide #mapsvg, .tool-revealRect #mapsvg, .tool-hideRect #mapsvg { cursor: crosshair; }
.tool-erase #mapsvg { cursor: not-allowed; }
.maphint { position: absolute; left: .6em; bottom: .6em; background: #000b; color: var(--ink); padding: .25em .6em; border-radius: 6px; font-size: .85em; pointer-events: none; }
.maphint:empty { display: none; }
.gridline { stroke: #000; stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fog { fill: #0b0907; }
.tplcell { fill-opacity: .35; stroke: #fff; stroke-opacity: .25; vector-effect: non-scaling-stroke; }
.tplcell.preview { fill-opacity: .5; }
.brushcell { fill-opacity: .45; }
.origin { fill: #fff; stroke: #000; vector-effect: non-scaling-stroke; }
.measure { stroke: #f3c96b; stroke-width: 3; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.measurelbl { fill: #fff; stroke: #000; stroke-width: 4px; paint-order: stroke; font-family: 'Cinzel', serif; font-weight: 700; text-anchor: middle; }
.token .disc { stroke: #1a130c; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px #000a); }
.token .ini { fill: #1a130c; font-family: 'Cinzel', serif; font-weight: 700; text-anchor: middle; pointer-events: none; }
.token .lbl { fill: #fff; stroke: #000; stroke-width: 3px; paint-order: stroke; font-size: .6em; text-anchor: middle; pointer-events: none; }
.token.selected .disc { stroke: #f3c96b; stroke-width: 4; }
.token.hiddentok { opacity: .55; }
.token.hiddentok .disc { stroke-dasharray: 5 4; }
.token.dragging { opacity: .8; }
.turnring { fill: none; stroke: #f3c96b; stroke-width: 4; vector-effect: non-scaling-stroke; animation: turnpulse 1.4s ease-in-out infinite; }
@keyframes turnpulse { 50% { stroke-opacity: .3; } }
.mapside .card { padding: .8em .9em; }
.mapside .row { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; margin: .4em 0; }
.mapside .row select, .mapside .row input:not(.n):not([type=checkbox]) { flex: 1; min-width: 0; width: auto; }
.mapside .stack { display: grid; gap: .45em; margin: .4em 0; }
.mapside details summary { cursor: pointer; color: var(--gold); margin: .3em 0; }
.initlist { margin: .3em 0; padding-left: 0; list-style: none; }
.initlist li { display: flex; gap: .5em; align-items: center; padding: .25em .45em; border-radius: 6px; }
.initlist li b { min-width: 2em; color: var(--gold2); }
.initlist li span { flex: 1; }
.initlist li.current { background: #4a3a22; outline: 1px solid var(--gold); }
.toklist { list-style: none; padding: 0; margin: .5em 0 0; max-height: 260px; overflow: auto; }
.toklist li { display: flex; align-items: center; gap: .45em; padding: .2em .35em; border-radius: 6px; cursor: pointer; }
.toklist li.on { background: #4a3a22; }
.toklist .dot { width: .9em; height: .9em; border-radius: 50%; border: 1px solid #000; }
button.mini { padding: 0 .4em; font-size: .85em; }
button.danger { border-color: var(--red); color: #fff; background: #6b2a20; }
.tray.small { min-height: 0; padding: .3em; gap: 8px; }
.tray.small .die { width: 46px; height: 46px; }
@media (max-width: 900px) {
  .mapbody { grid-template-columns: 1fr; }
  .mapstage { height: 65vh; }
}

.levelup-banner { background: linear-gradient(90deg, #4a3a22, #2e251c); border: 1px solid var(--gold); border-radius: var(--radius); padding: .6em .9em; display: flex; flex-wrap: wrap; gap: .8em; align-items: center; }
a.btn { display: inline-block; text-decoration: none; padding: .3em .9em; border-radius: 6px; border: 1px solid var(--gold); }
a.btn.primary { background: linear-gradient(180deg, #b58430, #8a6220); color: #fff8e6; font-weight: 600; }
.levelup .choices { display: grid; gap: .4em; margin: .6em 0; }
.levelup .choice { display: flex; gap: .5em; align-items: center; padding: .4em .7em; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.levelup .choice.on { border-color: var(--gold); background: #4a3a22; }
.levelup .choice input { width: auto; }
.levelup label { display: grid; gap: .25em; margin: .4em 0; }
.levelup .navrow { margin-top: 1em; align-items: center; }
.levelup .navrow .grow { flex: 1; }
.lu-skills, .lu-summary { border-collapse: collapse; width: 100%; }
.lu-skills td, .lu-summary td { padding: .2em .4em; border-bottom: 1px solid var(--line); }
.lu-skills tr.on { background: #4a3a2255; }
.lu-skills td.n { text-align: center; white-space: nowrap; }
.lu-summary td:nth-child(3) { color: var(--muted); }
button:disabled { opacity: .35; cursor: default; }
.die.dropped.static { opacity: .35; }
.wiz-table#wtray { display: grid; gap: .35em; padding: .6em .8em; }
.statrow { display: grid; grid-template-columns: 4.5em auto 1fr; align-items: center; gap: .8em; padding: .25em .4em; border-radius: 8px; }
.statrow:nth-child(odd) { background: #00000022; }
.statlabel { color: #d8e8c8; font-size: .9em; }
.wiz-table .tray.rowtray { min-height: 0; justify-content: flex-start; padding: .2em 0; gap: 8px; flex-wrap: nowrap; }
.wiz-table .rowtray .die { width: 44px; height: 44px; }
.stattotal { display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap; }
.stattotal b { font-family: 'Cinzel', serif; font-size: 1.6em; color: var(--gold2); min-width: 1.6em; }
.stattotal small { color: #c9d9bb; font-size: .8em; }
@media (max-width: 600px) { .statrow { grid-template-columns: 1fr; } }

.fp { display: grid; gap: .6em; margin-top: .6em; }
.fpslots { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.fpslot { display: grid; text-align: left; gap: .1em; padding: .35em .8em; border-radius: 8px; min-width: 11em; }
.fpslot small { color: var(--muted); font-size: .75em; }
.fpslot.on { border-color: var(--gold); background: #4a3a22; }
.fpslot.filled b { color: var(--gold2); }
.fpfilters input#fpq { flex: 2 1 14em; width: auto; }
.fpfilters select { flex: 1 1 10em; width: auto; }
.fplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6em; max-height: 60vh; overflow: auto; padding: .2em; }
.fpcard { border: 1px solid var(--line); border-radius: 8px; padding: .55em .7em; background: #0003; display: grid; gap: .3em; align-content: start; }
.fpcard.ok { border-color: #4a6a3a; }
.fpcard.blocked { opacity: .6; }
.fpcard.taken { opacity: .45; }
.fphead { display: flex; gap: .4em; align-items: baseline; }
.fphead b { color: var(--gold2); }
.fptypes { display: flex; gap: .25em; flex: 1; }
.fpwiki { text-decoration: none; }
.fpsum { margin: 0; font-size: .92em; }
.fpbonus { margin: 0; font-size: .9em; color: #b7e3a9; font-weight: 600; }
.fppre { margin: 0; font-size: .8em; color: var(--muted); }
.fppre .warn { color: var(--gold); }
.fpcard button { justify-self: start; }
.fpmanual summary { cursor: pointer; color: var(--gold); font-size: .9em; }