/* The balance site's own rules; the shared look is shared/site.css. Chart colours are roles, set once here. */
:root {
 --chart: #1a1a19;
 --grid: #2c2c2a;
 --axis: #383835;
 --muted: #898781;
 --ink2: #c3c2b7;
 /* the hero's gear, an ordinal ramp of one hue: brighter is better gear */
 --gear-worst: #1c5cab;
 --gear-middle: #3987e5;
 --gear-best: #9ec5f4;
 /* the enemies, a second ordinal ramp: brighter is a higher rank */
 --foe-regular: #b8461b;
 --foe-elite: #d95926;
 --foe-boss: #f08c5f;
 /* the danger map, easy to impossible */
 --d0: #2c2c2a;
 --d1: #94401a;
 --d2: #c25020;
 --d3: #e57040;
 --d4: #f5ad8a;
}

main { max-width: 1320px; margin: 0 auto; }

.filters {
 max-width: 1320px;
 margin: 0 auto 14px;
 display: flex;
 flex-wrap: wrap;
 gap: 8px 18px;
 align-items: center;
 color: var(--dim);
 font-size: 13px;
}
.filters .group { display: flex; gap: 6px; align-items: center; }
.filters button {
 padding: 4px 10px;
 border: 1px solid var(--edge);
 border-radius: 3px;
 background: var(--panel);
 color: var(--dim);
 font: inherit;
 cursor: pointer;
}
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--gold-soft); }

.panel { margin-bottom: 18px; }
.panel-head .hint { color: var(--dim); font-size: 13px; }
.panel-body { padding: 12px 16px 16px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tile { padding: 10px 14px 12px; border: 1px solid var(--edge); border-radius: 6px; background: var(--chart); }
.tile .label { color: var(--dim); font-size: 13px; }
.tile .value { font-size: 26px; font-weight: 600; color: var(--ink); }
.tile .sub { color: var(--muted); font-size: 12px; }

.chart { position: relative; background: var(--chart); border-radius: 4px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--axis); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .band text { fill: var(--dim); font-size: 11px; }
.chart .band rect { fill: #ffffff; opacity: .025; }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .cross { stroke: var(--ink2); stroke-width: 1; }
.chart .dot { stroke: var(--chart); stroke-width: 2; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; color: var(--ink2); font-size: 13px; }
.legend .key { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.legend .key.dash { border-top-style: dashed; }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; }

.heat { overflow-x: auto; }
.heat table { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.heat th { color: var(--dim); font-weight: 400; text-align: right; padding-right: 6px; white-space: nowrap; }
.heat thead th { text-align: center; padding: 0; width: 18px; font-variant-numeric: tabular-nums; }
.heat td { width: 18px; height: 16px; border-radius: 2px; padding: 0; }
.heat td:hover, .heat td:focus { outline: 1px solid var(--ink2); }
.heat td.here { box-shadow: inset 0 0 0 2px var(--ink); }

.rows { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.rows th, .rows td { padding: 4px 8px; border-bottom: 1px solid var(--grid); text-align: right; }
.rows th:first-child, .rows td:first-child, .rows td.text { text-align: left; }
.rows th { color: var(--dim); font-weight: 400; }

.guesses { columns: 2 380px; color: #c4bcae; font-size: 14px; }
.guesses li { margin: 3px 0; break-inside: avoid; }

.tip {
 position: fixed;
 z-index: 20;
 pointer-events: none;
 min-width: 160px;
 padding: 8px 10px;
 border: 1px solid var(--edge);
 border-radius: 4px;
 background: #0f0e10;
 color: var(--ink2);
 font-size: 12px;
 box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.tip .head { color: var(--dim); margin-bottom: 4px; }
.tip .row { display: flex; align-items: center; gap: 8px; }
.tip .row b { color: #fff; font-variant-numeric: tabular-nums; min-width: 56px; }
.tip .key { width: 12px; height: 0; border-top: 2px solid; }