/* The reputation site's own rules; the shared look is shared/site.css. */
.panel { margin-bottom: 18px; }

.panel-head .hint { color: var(--dim); font-size: 13px; }

.rules-body {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 16px 28px;
 align-items: center;
 padding: 14px 18px 16px;
}

.rules ul { margin: 0; padding-left: 18px; color: #c4bcae; font-size: 14px; }
.rules li { margin: 3px 0; }

.scale { display: grid; gap: 6px; }

.chip {
 padding: 4px 12px;
 border: 1px solid;
 border-radius: 3px;
 background: rgba(0, 0, 0, .35);
 font: 400 17px/1.2 "Wild Breath", Georgia, serif;
 letter-spacing: 1px;
 text-align: center;
 white-space: nowrap;
}

.titles {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 gap: 16px;
 margin-bottom: 18px;
}

.title {
 padding: 14px 16px 16px;
 border: 1px solid var(--edge);
 border-radius: 6px;
 background:
  linear-gradient(180deg, rgba(120, 30, 26, .14) 0, transparent 120px),
  var(--panel);
 box-shadow: inset 0 0 0 1px #000, inset 0 0 40px rgba(0, 0, 0, .55);
}

.title header {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: 4px 14px;
}

.title h3 {
 margin: 0;
 font: 400 27px/1.1 "Wild Breath", Georgia, serif;
 letter-spacing: 1px;
 text-shadow: 0 2px 0 #000;
}

.title .stat {
 color: var(--gold);
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 1px;
 text-transform: uppercase;
 white-space: nowrap;
}

.title .deed { margin: 8px 0 14px; min-height: 42px; color: #c4bcae; font-size: 14px; line-height: 1.4; }

.ladder {
 display: grid;
 grid-template-columns: repeat(var(--levels, 6), 1fr);
 gap: 5px;
}

.step {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 3px;
 padding: 7px 2px 8px;
 border: 1px solid color-mix(in srgb, var(--level) 55%, transparent);
 border-radius: 4px;
 background: color-mix(in srgb, var(--level) 9%, #0c0b0e);
 text-align: center;
}

.step b { color: var(--level); font: 700 17px/1 Georgia, "Times New Roman", serif; }
.step .count { color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.step .gain { color: var(--level); font-size: 11.5px; line-height: 1.15; }

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

th, td { padding: 7px 10px; border-bottom: 1px solid #26222a; text-align: left; vertical-align: middle; }

th {
 color: var(--dim);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 1.5px;
 text-transform: uppercase;
}

th.num { font: 700 15px/1 Georgia, "Times New Roman", serif; letter-spacing: 0; }

td.name { color: #fff3d6; font: 400 18px/1.1 "Wild Breath", Georgia, serif; letter-spacing: .5px; white-space: nowrap; }
td.deed { color: #a9a094; min-width: 240px; }
td.gives { color: var(--gold); white-space: nowrap; }

.num { text-align: center; white-space: nowrap; }
td.num b { display: block; font-size: 14px; }
td.num span { display: block; font-size: 11px; opacity: .85; }

tbody tr:hover { background: rgba(255, 255, 255, .03); }

@media (max-width: 720px) {
 .rules-body { grid-template-columns: 1fr; }
 .scale { grid-template-columns: repeat(3, 1fr); }
 .titles { grid-template-columns: 1fr; }
 .step .count { font-size: 11.5px; }
 .step .gain { font-size: 10.5px; }
}