@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
body {
  font-family: Papyrus, Copperplate, fantasy;
  font-size: 16px;
  background-image: url("../resources/images/parchment.jpeg");
  background-color: papayawhip;
  background-repeat: no-repeat;
  background-size: cover;
}
h1 {
  font-family: Copperplate, Papyrus, fantasy;
  font-size: 32px;
}
/* Style the header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(222, 184, 135, 0.6);
  border-bottom: 2px solid saddlebrown;
  font-family: Copperplate, Papyrus, fantasy;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: black;
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav a {
  text-decoration: none;
  color: black;
  padding: 6px 10px;
  border-radius: 4px;
}

.nav a:hover {
  background: #ddd;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropbtn {
  background: saddlebrown;
  color: blanchedalmond;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: papayawhip;
  min-width: 160px;
  border: 1px solid #999;
  z-index: 10;
}

.dropdown-content a {
  display: block;
  padding: 8px;
  color: black;
}

.dropdown-content a:hover {
  background: #eee;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}
/* Left and right column */
.column.side {
  width: 25%;
}
/* Middle column */
.column.middle {
  width: 50%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Style the footer */
.footer {
  background-color: papayawhip;
  padding: 10px;
  text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
.responsive {
  width: 100%;
  height: auto;
}
.button {
  background-color: #C7A26B;
  /* Camel */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.button2 {
  background-color: #008CBA;
}
/* Blue */
.button3 {
  background-color: #f44336;
}
/* Red */
.button4 {
  background-color: #e7e7e7;
  color: black;
}
/* Gray */
.button5 {
  background-color: #555555;
}
/* Black */
a.one:link, a.one:visited {
  background-color: saddlebrown;
  color: blanchedalmond;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px;
}
a.one:hover, a.one:active {
  background-color: rosybrown;
  color: blanchedalmond;
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
	font-size: 2vw;
  color: black;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 15%;
  left: 25%;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 12%;
  left: 25%;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 12%;
  right: 25%;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 15%;
  right: 25%;
}

/* Centered text */
.centered {
  position: relative; /* or remove it entirely */
  transform: none;
  top: auto;
  left: auto;
  padding: 20px;
  text-align: left;
  z-index: 1;
}

.container {
  margin-bottom: 60px; /* space below scroll image so next content is clear */
  position: relative;
}

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.scroll-background {
  background-image: url("../resources/images/scroll.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 5% 8%; /* add padding to prevent text touching edges */
  font-size: 1.2vw; /* scales text based on screen width */
  color: black;
  min-height: 1200px; /* or however tall your scroll image is */
  box-sizing: border-box;
  position: relative;
}

.scroll-background table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin-top: 1em;
}
.scroll-background th, .scroll-background td {
  border: 1px solid #333;
  padding: 4px 6px;
  text-align: center;
}

/* Container for the dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* The button that triggers the dropdown */
.dropbtn {
  background-color: inherit;
  color: white; /* adjust to your header text color */
  padding: 14px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Hover effect on links */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Optional: Change button color on hover */
.dropdown:hover .dropbtn {
  background-color: #555;
}


.spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.spell-card {
  background: rgba(255, 255, 255, 0.6);
  padding: 10px;
  border: 1px solid #999;
  border-radius: 6px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #777;
  border-radius: 6px;
  font-size: 16px;
  background: rgba(255,255,255,0.8);
}

.rendered-spell-description {
    padding: 15px;
    background: rgba(255,255,255,0.65);
    border: 1px solid #999;
    border-radius: 8px;
    line-height: 1.5;
}

.spell-block-text,
.spell-block-example,
.spell-block-table {
    margin-top: 20px;
}

.spell-block-example {
    padding: 10px;
    border-left: 4px solid #666;
    background: rgba(0,0,0,0.05);
}

.spell-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.spell-table th,
.spell-table td {
    border: 1px solid #666;
    padding: 8px;
    text-align: left;
}

.spell-table th {
    background: rgba(0,0,0,0.1);
}

.scroll-container {

    width: 900px;
    min-height: 1400px;

    margin: 40px auto;

    padding:
        140px
        120px
        140px
        120px;

    background-image: url("../resources/images/scroll.png");

    background-size: 100% 100%;
    background-repeat: no-repeat;

    color: #2a1a0a;

    font-family: Papyrus, Copperplate, fantasy;

    position: relative;
}

.spell-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 30px;

    gap: 40px;
}

.spell-header-left,
.spell-header-right {

    width: 48%;
}

.spell-header h1 {

    margin-top: 0;
    margin-bottom: 15px;

    font-size: 36px;
}

.spell-subheader {

    display: flex;

    justify-content: space-between;

    margin-bottom: 40px;

    font-size: 18px;
}

.spell-body {

    font-size: 18px;

    line-height: 1.7;
}

.spell-block-text,
.spell-block-example,
.spell-block-table {

    margin-top: 30px;
}

.spell-block-example {

    padding: 15px;

    border-left: 4px solid #5c4522;

    background: rgba(92, 69, 34, 0.08);
}

.spell-table-title {

    margin-bottom: 10px;
}

.spell-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 10px;

    background: rgba(255,255,255,0.25);
}

.spell-table th,
.spell-table td {

    border: 1px solid rgba(60,40,20,0.5);

    padding: 10px;

    text-align: left;

    vertical-align: top;
}

.spell-table th {

    background: rgba(60,40,20,0.15);
}

/* =========================
   HOME PAGE
========================= */

.home-hero {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
}

.home-hero h1 {
    font-size: 42px;
    margin-bottom: 15px;
}

.intro-text {
    max-width: 1000px;
    margin: auto;
    line-height: 1.7;
    font-size: 18px;
}

.home-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.home-panel {
    background: rgba(245, 222, 179, 0.82);
    border: 2px solid #6a4b2f;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 12px rgba(0,0,0,0.35);
}

.home-panel h2 {
    margin-top: 0;
    border-bottom: 2px solid #6a4b2f;
    padding-bottom: 8px;
}

.home-panel h3 {
    margin-top: 25px;
    margin-bottom: 10px;
}

.character-list,
.fallen-list,
.rules-list,
.resource-links {
    list-style: none;
    padding-left: 0;
}

.character-list li,
.fallen-list li,
.rules-list li {
    margin-bottom: 12px;
    line-height: 1.5;
}

.resource-links li {
    margin-bottom: 8px;
}

.resource-links a {
    text-decoration: none;
    font-weight: bold;
}

.resource-links a:hover {
    text-decoration: underline;
}

.resources-panel {
    min-height: 100%;
}

/* Responsive */
@media (max-width: 1000px) {

    .home-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================
   CHARACTERS
========================= */

.characters-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 25px;
    margin: 20px;
}

.characters-main,
.characters-tools,
.sheet-block {
    background: rgba(245, 222, 179, 0.82);
    border: 2px solid #6a4b2f;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 12px rgba(0,0,0,0.25);
}

.character-roster {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.35);
}

.character-roster th,
.character-roster td {
    border: 1px solid rgba(60,40,20,0.45);
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.character-roster th {
    background: rgba(60,40,20,0.14);
}

.tool-links {
    list-style: none;
    padding-left: 0;
}

.tool-links li {
    margin-bottom: 12px;
}

.tool-links .button {
    width: 100%;
    padding: 10px 12px;
}

.character-sheet {
    max-width: 1000px;
    margin: 20px auto;
}

.sheet-block {
    margin-bottom: 18px;
}

.sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sheet-grid strong,
.sheet-grid span {
    display: block;
}

.combat-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.combat-summary-card {
    overflow: hidden;
    border: 2px solid #111;
    background: rgba(255,255,255,0.56);
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
}

.combat-summary-card h3 {
    margin: 0;
    padding: 6px 10px;
    border-bottom: 2px solid #111;
    font-size: 15px;
    line-height: 1;
    text-align: center;
}

.combat-summary-current {
    padding: 12px 10px 8px;
    color: #123f72;
    font-size: 42px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

.combat-summary-base {
    display: grid;
    grid-template-columns: 1fr 70px;
    align-items: center;
    border-top: 2px solid #111;
}

.combat-summary-base span,
.combat-summary-base strong {
    padding: 5px 8px;
}

.combat-summary-base span {
    font-size: 11px;
    font-weight: bold;
    text-align: right;
}

.combat-summary-base strong {
    border-left: 2px solid #111;
    color: #123f72;
    font-size: 20px;
    text-align: center;
}

.movement-adjustments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 2px solid #111;
}

.movement-adjustments div {
    min-width: 0;
    border-right: 1px solid #111;
}

.movement-adjustments div:last-child {
    border-right: none;
}

.movement-adjustments span,
.movement-adjustments strong {
    display: block;
    text-align: center;
}

.movement-adjustments span {
    padding: 3px 2px;
    border-bottom: 1px solid #111;
    font-size: 9px;
    font-weight: bold;
}

.movement-adjustments strong {
    min-height: 24px;
}

.hit-point-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 2px solid #111;
}

.hit-point-values div {
    min-width: 0;
    border-right: 1px solid #111;
}

.hit-point-values div:last-child {
    border-right: none;
}

.hit-point-values span,
.hit-point-values strong {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hit-point-values span {
    min-height: 22px;
    padding: 3px 2px;
    border-bottom: 1px solid #111;
    font-size: 9px;
    font-weight: bold;
}

.hit-point-values strong {
    min-height: 31px;
    color: #123f72;
    font-size: 20px;
}

.armor-class-results,
.armor-class-adjustments {
    display: grid;
    border-top: 2px solid #111;
}

.armor-class-results {
    grid-template-columns: repeat(3, 1fr);
}

.armor-class-adjustments {
    grid-template-columns: repeat(5, 1fr);
}

.armor-class-results div,
.armor-class-adjustments div {
    min-width: 0;
    border-right: 1px solid #111;
}

.armor-class-results div:last-child,
.armor-class-adjustments div:last-child {
    border-right: none;
}

.armor-class-results span,
.armor-class-results strong,
.armor-class-adjustments span,
.armor-class-adjustments strong {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.armor-class-results span,
.armor-class-adjustments span {
    min-height: 24px;
    padding: 3px 2px;
    border-bottom: 1px solid #111;
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
}

.armor-class-results strong {
    min-height: 32px;
    color: #123f72;
    font-size: 20px;
}

.armor-class-adjustments strong {
    min-height: 25px;
    font-size: 14px;
}

.armor-type-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    border-bottom: 2px solid #111;
}

.armor-type-header h3 {
    border-bottom: none;
}

.armor-type-header > strong {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid #111;
    font-size: 10px;
}

.armor-type-rows > div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 42px;
    min-height: 29px;
    border-bottom: 1px solid #111;
}

.armor-type-rows span,
.armor-type-rows strong,
.armor-type-rows em {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    font-style: normal;
}

.armor-type-rows span {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
}

.armor-type-rows strong {
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.1;
}

.armor-type-rows em {
    justify-content: center;
    border-left: 2px solid #111;
    color: #123f72;
    font-size: 15px;
    font-weight: bold;
}

.combat-profile-message {
    margin: 8px;
    padding: 6px 8px;
    border: 1px solid #3d6c35;
    background: rgba(217, 239, 209, 0.75);
    font-size: 11px;
}

.combat-profile-error {
    border-color: #8b2d2d;
    background: rgba(244, 207, 207, 0.8);
}

.armor-type-form {
    display: grid;
    gap: 7px;
    padding: 10px;
    border-top: 2px solid #111;
}

.armor-type-form label {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.armor-type-form select,
.armor-type-form input,
.armor-type-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid #6a4b2f;
    background: rgba(255,255,255,0.72);
    color: #111;
    font: 12px Arial, Helvetica, sans-serif;
    text-transform: none;
}

.armor-type-form textarea {
    resize: vertical;
}

.armor-type-form .button {
    justify-self: end;
    margin-top: 2px;
    padding: 6px 12px;
}

.hit-point-form {
    display: grid;
    gap: 7px;
    padding: 10px;
    border-top: 2px solid #111;
}

.hit-point-form label {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.hit-point-form input,
.hit-point-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid #6a4b2f;
    background: rgba(255,255,255,0.72);
    color: #111;
    font: 12px Arial, Helvetica, sans-serif;
    text-transform: none;
}

.hit-point-form textarea {
    resize: vertical;
}

.hit-point-form .button {
    justify-self: end;
    margin-top: 2px;
    padding: 6px 12px;
}

.character-admin-page,
.character-edit-page {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 16px;
}

.character-admin-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.character-admin-heading h1,
.character-admin-heading p {
    margin: 0 0 5px;
}

.character-admin-filters,
.character-edit-section,
.character-edit-section-nav {
    border: 2px solid #6a4b2f;
    border-radius: 8px;
    background: rgba(245, 222, 179, 0.82);
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
}

.character-admin-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr)) auto auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px;
}

.character-admin-filters label,
.character-edit-grid label,
.character-ability-edit-grid label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: bold;
}

.character-admin-filters input,
.character-admin-filters select,
.character-edit-form input,
.character-edit-form select,
.character-edit-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 7px;
    border: 1px solid #6a4b2f;
    background: rgba(255,255,255,0.72);
    color: #111;
    font: 14px Arial, Helvetica, sans-serif;
}

.character-admin-table-wrap {
    overflow-x: auto;
    border: 2px solid #6a4b2f;
    border-radius: 8px;
    background: rgba(245, 222, 179, 0.82);
}

.character-admin-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.character-admin-table th,
.character-admin-table td {
    padding: 8px;
    border-right: 1px solid rgba(60,40,20,0.38);
    border-bottom: 1px solid rgba(60,40,20,0.38);
    text-align: left;
    vertical-align: top;
}

.character-admin-table th {
    background: rgba(60,40,20,0.16);
}

.character-admin-actions {
    white-space: nowrap;
}

.character-admin-actions a + a {
    margin-left: 8px;
}

.character-edit-actions {
    display: flex;
    gap: 8px;
}

.character-admin-message {
    padding: 10px 12px;
    border: 1px solid #3d6c35;
    border-radius: 5px;
    background: rgba(217,239,209,0.86);
}

.character-admin-error {
    border-color: #8b2d2d;
    background: rgba(244,207,207,0.9);
}

.character-edit-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
    padding: 10px 14px;
}

.character-edit-section-nav a {
    font-size: 12px;
    font-weight: bold;
}

.character-edit-form {
    display: grid;
    gap: 16px;
}

.character-edit-section {
    margin: 0;
    padding: 16px;
}

.character-edit-section legend {
    padding: 0 8px;
    font-size: 18px;
    font-weight: bold;
}

.character-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px;
}

.character-edit-wide {
    grid-column: 1 / -1;
}

.character-ability-edit-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    gap: 10px;
}

.character-ability-edit-grid small {
    font-weight: normal;
}

.character-edit-help {
    margin: 10px 0 0;
    font-size: 12px;
    font-style: italic;
}

.character-ac-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.character-ac-summary span {
    min-width: 110px;
    padding: 7px 10px;
    border: 1px solid #6a4b2f;
    background: rgba(255,255,255,0.4);
    font-size: 11px;
    text-transform: uppercase;
}

.character-ac-summary strong {
    float: right;
    margin-left: 10px;
    color: #123f72;
    font-size: 18px;
}

.character-movement-display strong {
    margin-right: 8px;
    color: #123f72;
    font-size: 34px;
}

.character-edit-save {
    position: sticky;
    bottom: 0;
    padding: 12px;
    border: 2px solid #6a4b2f;
    border-radius: 8px;
    background: rgba(245,222,179,0.96);
    text-align: right;
}

@media (max-width: 900px) {
    .character-admin-filters,
    .character-edit-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .character-ability-edit-grid {
        grid-template-columns: repeat(4, minmax(80px, 1fr));
    }
}

@media (max-width: 600px) {
    .character-admin-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .character-admin-filters,
    .character-edit-grid,
    .character-ability-edit-grid {
        grid-template-columns: 1fr;
    }

    .character-edit-wide {
        grid-column: auto;
    }
}

.weapon-table-scroll {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 12px;
}

.weapon-combat-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: rgba(255,255,255,0.42);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.weapon-equipped-table {
    min-width: 1550px;
}

.weapon-combat-table th,
.weapon-combat-table td {
    border: 1px solid rgba(60,40,20,0.55);
    padding: 6px;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
}

.weapon-combat-table th {
    background: rgba(60,40,20,0.16);
}

.weapon-combat-table .weapon-name-cell,
.weapon-combat-table .weapon-description-cell {
    text-align: left;
    white-space: normal;
}

.weapon-name-cell {
    min-width: 150px;
}

.weapon-flags {
    display: block;
    margin-top: 3px;
    color: #5c4029;
    font-size: 10px;
}

.weapon-reference-row th,
.weapon-reference-row td {
    border-top: 2px solid #3c2814;
    background: rgba(60,40,20,0.09);
    font-weight: bold;
}

.weapon-combat-note {
    margin: 6px 0 18px;
    font-size: 12px;
    font-style: italic;
}

.weapon-manager {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 2px solid rgba(60,40,20,0.45);
}

.weapon-form-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.weapon-form-wide {
    grid-column: 1 / -1;
}

.weapon-reference-preview {
    padding: 10px;
    border: 1px solid rgba(60,40,20,0.4);
    background: rgba(255,255,255,0.35);
}

.weapon-reference-preview span {
    display: block;
    margin-top: 4px;
}

.weapon-flags-editor {
    display: flex;
    flex-direction: row;
    gap: 18px;
}

.weapon-manage-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.weapon-manage-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(60,40,20,0.25);
}

.weapon-manage-list li span {
    flex: 1;
}

.weapon-manage-list form {
    display: inline;
    margin: 0;
}

@media (max-width: 800px) {
    .weapon-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ability-chart {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #111;
}

.ability-chart-main,
.ability-chart-cms {
    border: 2px solid #111;
    background: rgba(255,255,255,0.56);
}

.ability-chart-cms {
    margin-top: 18px;
}

.ability-chart-row {
    display: grid;
    grid-template-columns: 36px 36px 84px minmax(0, 1fr);
    min-height: 28px;
    border-bottom: 2px solid #111;
}

.ability-chart-row:last-child {
    border-bottom: none;
}

.ability-score,
.ability-name {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #111;
    background: rgba(255,255,255,0.35);
}

.ability-score {
    font-size: 17px;
}

.ability-name {
    font-size: 22px;
    font-weight: bold;
}

.ability-detail-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(82px, 1fr) minmax(42px, 0.5fr));
    align-items: stretch;
}

.ability-detail-label,
.ability-detail-value {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    line-height: 1.05;
}

.ability-detail-label {
    font-size: 10px;
}

.ability-detail-value {
    justify-content: center;
    font-size: 15px;
}

.ability-detail-value-wide {
    grid-column: span 5;
    justify-content: flex-start;
}

.ability-chart-cms .ability-detail-grid {
    grid-template-columns: 82px minmax(120px, 1fr);
}

.ability-chart-legend {
    display: grid;
    grid-template-columns: 36px 36px;
    margin-top: 4px;
    font-size: 10px;
}

.ability-chart-legend span {
    text-align: center;
}

.saving-throws-chart {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 56px minmax(150px, 1.4fr) 54px 54px;
    align-items: stretch;
    width: 100%;
    border: 2px solid #111;
    background: rgba(255,255,255,0.56);
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.saving-throws-head,
.saving-throws-score-head,
.saving-throw-cause,
.saving-throw-adjustment,
.saving-throw-label,
.saving-throw-score {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 8px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
}

.saving-throws-head,
.saving-throws-score-head {
    justify-content: center;
    min-height: 28px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.saving-throws-score-head:nth-child(5),
.saving-throw-score:nth-child(5n) {
    border-right: none;
}

.saving-throw-cause,
.saving-throw-adjustment {
    background: rgba(255,255,255,0.28);
}

.saving-throw-cause::after,
.saving-throw-adjustment::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(17,17,17,0.55);
}

.saving-throw-label {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.05;
    text-transform: uppercase;
}

.saving-throw-score {
    justify-content: center;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    background: rgba(255,255,255,0.35);
}

.saving-throw-base,
.saving-throw-adjusted {
    color: #123f72;
}

.saving-throw-cause:nth-last-child(-n+5),
.saving-throw-adjustment:nth-last-child(-n+4),
.saving-throw-label:nth-last-child(-n+3),
.saving-throw-base:nth-last-child(-n+2),
.saving-throw-adjusted:last-child {
    border-bottom: none;
}

@media (max-width: 900px) {
    .characters-layout,
    .sheet-grid {
        grid-template-columns: 1fr;
    }

    .ability-chart-row {
        grid-template-columns: 32px 32px 70px minmax(0, 1fr);
    }

    .ability-name {
        font-size: 18px;
    }

    .ability-detail-grid {
        grid-template-columns: repeat(2, minmax(72px, 1fr) minmax(36px, 0.5fr));
    }

    .ability-detail-value-wide {
        grid-column: span 1;
    }

    .saving-throws-chart {
        grid-template-columns: minmax(82px, 1fr) 42px minmax(118px, 1.2fr) 44px 44px;
        font-size: 11px;
    }

    .saving-throws-head,
    .saving-throws-score-head,
    .saving-throw-cause,
    .saving-throw-adjustment,
    .saving-throw-label,
    .saving-throw-score {
        padding: 3px 5px;
    }

    .saving-throws-head,
    .saving-throws-score-head {
        font-size: 11px;
    }

    .saving-throw-label {
        font-size: 10px;
    }

    .saving-throw-score {
        font-size: 20px;
    }
}

/* Initiative */
.initiative-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

.initiative-narrow {
    max-width: 720px;
}

.initiative-heading,
.initiative-combatant-summary,
.initiative-actions,
.initiative-form-inline,
.initiative-hp-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.initiative-heading,
.initiative-combatant-summary {
    justify-content: space-between;
}

.initiative-actions {
    flex-wrap: wrap;
}

.initiative-actions form {
    margin: 0;
}

.initiative-card-grid,
.initiative-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 20px 0;
}

.initiative-card,
.initiative-combatant,
.initiative-turn-action,
.initiative-latest-action {
    padding: 18px;
    border: 2px solid #22180f;
    background: rgba(255, 248, 220, 0.72);
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2);
}

.initiative-card h2,
.initiative-combatant h2 {
    margin-top: 0;
}

.initiative-message,
.initiative-error {
    padding: 12px 16px;
    border: 1px solid #5f471f;
    background: rgba(255, 246, 174, 0.9);
}

.initiative-error {
    border-color: #7a1f16;
    color: #64160f;
}

.initiative-form,
.initiative-edit-form {
    display: grid;
    gap: 14px;
}

.initiative-form label,
.initiative-edit-form > label {
    display: grid;
    gap: 5px;
}

.initiative-form input,
.initiative-form textarea,
.initiative-form-inline input,
.initiative-form-inline select,
.initiative-row-form input,
.initiative-edit-form input,
.initiative-edit-form textarea,
.initiative-hp-form input {
    box-sizing: border-box;
    max-width: 100%;
    padding: 8px;
}

.initiative-table-wrap {
    overflow-x: auto;
    margin: 20px 0;
}

.initiative-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.55);
}

.initiative-table th,
.initiative-table td {
    padding: 9px;
    border: 1px solid #312317;
    text-align: left;
    vertical-align: top;
}

.initiative-table th {
    background: rgba(80, 49, 25, 0.86);
    color: #fff8dc;
}

.initiative-row-form {
    display: grid;
    grid-template-columns: minmax(140px, 2fr) 90px 80px 100px 90px auto;
    align-items: center;
    gap: 8px;
}

.initiative-setup-table input[type="text"],
.initiative-setup-table input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 70px;
    padding: 7px;
}

.initiative-setup-table td:first-child input {
    display: block;
    min-width: 150px;
    margin-top: 5px;
}

.initiative-roll-input {
    min-width: 86px !important;
    border: 2px solid #8e160f;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.initiative-visibility-cell {
    min-width: 130px;
}

.initiative-visibility-cell label {
    display: block;
    white-space: nowrap;
}

.initiative-setup-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px;
    border: 1px solid rgba(34, 24, 15, 0.5);
    background: rgba(244, 226, 177, 0.96);
}

.initiative-tracker-list {
    display: grid;
    gap: 16px;
}

.initiative-combatant.is-current,
.initiative-table tr.is-current {
    border-color: #9b1c13;
    background: rgba(255, 224, 126, 0.86);
    box-shadow: 0 0 0 3px rgba(155, 28, 19, 0.18);
}

.initiative-combatant.is-defeated,
.initiative-table tr.is-defeated {
    opacity: 0.65;
}

.initiative-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
    background: #382619;
    color: #fff8dc;
    font-weight: bold;
}

.current-turn-label {
    color: #8e160f;
    text-transform: uppercase;
}

.initiative-combatant-controls {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(34, 24, 15, 0.55);
}

.initiative-combatant-controls summary {
    cursor: pointer;
    font-weight: bold;
}

.initiative-combatant-controls .initiative-edit-form {
    margin-top: 14px;
}

.initiative-edit-form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.initiative-report-note {
    font-style: italic;
}

.initiative-turn-action {
    margin: 20px 0;
    border-width: 3px;
    border-color: #8e160f;
}

.initiative-action-form,
.initiative-action-form > label {
    display: grid;
    gap: 8px;
}

.initiative-action-form {
    gap: 14px;
}

.initiative-action-form textarea,
.initiative-target-row select,
.initiative-target-row input {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
}

.initiative-public-action {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.initiative-targets {
    display: grid;
    gap: 7px;
}

.initiative-target-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(80px, 0.7fr);
    gap: 8px;
}

.initiative-target-heading {
    font-weight: bold;
}

.initiative-next-button {
    padding: 12px 18px;
    font-size: 17px;
}

.initiative-latest-action {
    margin: 18px 0;
    border-color: #8e160f;
}

.initiative-latest-action p {
    margin-bottom: 0;
}

.button-secondary {
    opacity: 0.86;
}

.button-danger {
    background: #7a1f16;
    color: white;
}

@media (max-width: 900px) {
    .initiative-heading,
    .initiative-combatant-summary,
    .initiative-form-inline,
    .initiative-hp-form {
        align-items: stretch;
        flex-direction: column;
    }

    .initiative-combatant-controls,
    .initiative-row-form,
    .initiative-target-row {
        grid-template-columns: 1fr;
    }

    .initiative-target-heading {
        display: none;
    }
}