/* Remort pages: remorts.asp and remort/<order>.asp.
   Built on dragon/dragons.css (loaded first): same parchment boxes, cards,
   hero, pills and rosters. This adds the order accents and the ability
   and skill/spell lists. */

/* order accents */
.rm-divine { --acc: #6B4A8A; --acc-bg: #EFE6F5; }
.rm-t-angel { --acc: #B08A12; --acc-bg: #FCF6E2; }
.rm-t-demon { --acc: #A11B1B; --acc-bg: #F6E0DC; }
.rm-t-balanx { --acc: #2F6FA0; --acc-bg: #E3EEF8; }
.rm-t-dragon { --acc: #7A4A00; --acc-bg: #FFF4DF; }
.rm-t-giant { --acc: #4D6478; --acc-bg: #E3EAF0; }

/* three cards across on the main page */
.rm-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .rm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .rm-grid { grid-template-columns: 1fr; } }
.rm-grid .dg-name { font-size: 16px; }
.rm-grid .dg-desc { font-size: 13px; }

/* "How they fight" steps */
.rm-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; gap: 8px; flex-wrap: wrap; }
.rm-steps li { counter-increment: st; flex: 1 1 160px; background: var(--acc-bg); border: 1px solid var(--acc);
  border-radius: 5px; padding: 6px 10px 6px 34px; position: relative; font-size: 12px; }
.rm-steps li::before { content: counter(st); position: absolute; left: 8px; top: 6px; width: 18px; height: 18px;
  border-radius: 9px; background: var(--acc); color: #fff; font-weight: bold; font-size: 11px; text-align: center; line-height: 18px; }

/* abilities */
.rm-abil { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (max-width: 760px) { .rm-abil { grid-template-columns: 1fr; } }
.rm-ab { display: flex; gap: 10px; background: #FFF4DF; border: 1px solid #E0B96E; border-left: 4px solid var(--acc);
  border-radius: 4px; padding: 7px 10px; }
.rm-ab p { margin: 2px 0 0; font-size: 12px; line-height: 1.45; }
.rm-lvl { flex: none; width: 46px; text-align: center; font: bold 20px Georgia, "Times New Roman", serif; color: var(--acc); line-height: 1.1; }
.rm-lvl small { display: block; font: bold 9px Verdana, Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.rm-lvl .rm-word { display: block; font: bold 10px Verdana, Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em;
  padding-top: 6px; word-break: break-word; }
.rm-abname { font-size: 13px; }
.rm-cost { display: inline-block; font-size: 10px; font-weight: bold; padding: 0 7px; border-radius: 8px; margin-left: 4px;
  background: var(--acc-bg); border: 1px solid var(--acc); color: var(--acc); white-space: nowrap; vertical-align: 1px; }

/* skills & spells */
.rm-filter { margin: 0 0 8px; }
.rm-filter button { font: 12px Verdana, Arial, sans-serif; margin: 0 4px 4px 0; padding: 3px 11px; cursor: pointer;
  background: #F4D8A4; border: 1px solid #B9852E; border-radius: 12px; color: #000; }
.rm-filter button:hover { background: #EDBD70; }
.rm-filter button.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.rm-filter small { opacity: .75; }
.rm-kit td:first-child { width: 40px; }
.dg-roster.rm-kit tr.rm-sig td { background: var(--acc-bg); font-weight: bold; }
.dg-roster.rm-kit tr.rm-sig td:first-child { box-shadow: inset 4px 0 0 var(--acc); }
.rm-sigkey { background: var(--acc-bg); border: 1px solid var(--acc); padding: 0 5px; border-radius: 3px; font-weight: bold; }

/* main page: ranks table, patrons, side cards */
.rm-ranks { width: 100%; border-collapse: collapse; background: #FFF4DF; font-size: 12px; }
.rm-ranks th, .rm-ranks td { padding: 5px 8px; border: 1px solid #E0B96E; text-align: left; }
.rm-ranks th { background: #DE961D; border-color: #B9852E; }
.rm-ranks td:first-child { font-weight: bold; border-left: 4px solid var(--acc); }
.rm-ranks td.rm-head { font-weight: bold; }
.rm-side-card { display: flex; gap: 12px; align-items: flex-start; }
.rm-side-card .dg-art { width: 180px; flex: none; aspect-ratio: 3 / 2; border-radius: 4px; border: 1px solid #B9852E; }
@media (max-width: 560px) { .rm-side-card { display: block; } .rm-side-card .dg-art { width: 100%; margin-bottom: 8px; } }
.rm-tip { font-size: 12px; margin: 10px 0 0; padding: 6px 10px; background: var(--acc-bg); border: 1px solid var(--acc); border-radius: 5px; }