body {
  font-family: Contrail One, sans-serif;
  background: #fdfdfd;
  color: #333;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.charsheet .sheet-core,
.charsheet .sheet-inventory,
.charsheet .sheet-magic,
.charsheet .sheet-leveling,
.charsheet .sheet-survival {
    display: none;
}

/* style the active button */
.sheet-tabstoggle[value="core"] ~ div .sheet-button0 {outline: 2px solid red;}
.sheet-tabstoggle[value="inventory"] ~ div .sheet-button1 {outline: 2px solid red;}
.sheet-tabstoggle[value="leveling"] ~ div .sheet-button2 {outline: 2px solid red;}
.sheet-tabstoggle[value="magic"] ~ div .sheet-button3 {outline: 2px solid red;}
.sheet-tabstoggle[value="survival"] ~ div .sheet-button4 {outline: 2px solid red;}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="core"] ~ div.sheet-core,
.charsheet .sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory,
.charsheet .sheet-tabstoggle[value="leveling"] ~ div.sheet-leveling,
.charsheet .sheet-tabstoggle[value="magic"] ~ div.sheet-magic,
.charsheet .sheet-tabstoggle[value="survival"] ~ div.sheet-survival {
    display: block;
}

/* === Spell Input Format === */

.spells-inputs input {
	min-width: 300 px;
	width: auto;
}

/* === XP Tracker Inputs === */
input[name="attr_xp_points"],
input[name="attr_xp_spent"] {
    width: 200px;
    padding: 8px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box; /* ensures padding doesn’t increase width */
}

input[name="attr_currency_amount"],
input[name="attr_radiation"] {
 min-width: 200px;
    padding: 8px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box; /* ensures padding doesn’t increase width */
}

.xp-tracker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}
.xp-tracker label {
  font-weight: bold;
}
.xp-tracker input {
  min-width: 200px;
  text-align: center;
}

section {
  margin-bottom: 30px;
  border: 1px solid #aaa;
  padding: 15px;
  border-radius: 8px;
  background: #f8f8f8;
}

h2 {
  margin-top: 0;
  background: #ddd;
  padding: 5px 10px;
  border-radius: 5px;
}

h3 {
  margin-top: 5;
  background: #ddd;
  padding: 2px 5px;
  border-radius: 3px;
}

label {
  display: block;
color: #000 !important;
  margin: 8px 0;
}

.sheet-rolltemplate-check .sheet-template-container {
  background: #222;
  border: 1px solid #555;
  border-radius: 5px;
  color: #fff;
  padding: 6px;
  font-family: "Roboto", sans-serif;
}

.sheet-rolltemplate-check .sheet-template-title {
  background: #444;
  padding: 4px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #666;
}

.sheet-rolltemplate-check .sheet-template-row {
  margin: 4px 0;
  padding: 2px 0;
}

.sheet-rolltemplate-check .sheet-template-result {
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 6px;
}

.sheet-rolltemplate-check .sheet-template-result:contains("Critical Success") {
  color: #2ecc71; /* green */
}

.sheet-rolltemplate-check .sheet-template-result:contains("Critical Failure") {
  color: #e74c3c; /* red */
}



input[type="text"]
input[type="number"],
select,
textarea {
  padding: 5px;
  margin-left: 5px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

select {
  padding: 5px;
  width: 210px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[name="attr_trait"],
input[name="attr_perk"],
input[name="attr_spell"] {
  padding: 5px;
  margin-left: 5px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[name="attr_trait_desc"],
input[name="attr_perk_desc"],
input[name="attr_spell_desc"] {
  padding: 5px;
  margin-left: 5px;
  width: 500px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


.score-grid {
	display: grid;
	grid-template-rows: repeat(9, 60px);
	grid-auto-flow: column;
}

.skills-grid {
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-auto-flow: column;
}

.survival-grid {
display: grid;
  grid-template-columns: 3, 1fr;
  gap: 10px;
}

/* General style for all section backgrounds */
.section {
  background-size: cover;      /* image covers entire section */
  background-position: center; /* center image */
  background-repeat: no-repeat;
  background-attachment: scroll; /* change to fixed if you want parallax effect */
  padding: 15px;
  border-radius: 8px;          /* rounded corners */
}

/* Character Info Section */
.ability-scores {
  background-image: url("https://images.squarespace-cdn.com/content/67dafda29b94da2a21600bce/73e24371-bc07-4450-bec9-2cd26c999001/Abilities+sketch.png?content-type=image%2Fpng");
  background-size: 900px auto;      /* image covers entire section */
  background-position: left;
  background-repeat: no-repeat;
  background-attachment: scroll; /* change to fixed if you want parallax effect */
  padding: 15px;
  border-radius: 8px;          /* rounded corners */
}

/* Skills Section */
.section-skills {
  background-image: url("path/to/skills.png");
}

/* Combat Stats Section */
.section-combat {
  background-image: url("path/to/combat.png");
}

/* Items & Equipment Section */
.carry-slots {
  background-image: url("https://images.squarespace-cdn.com/content/67dafda29b94da2a21600bce/8dc6399b-0d53-4e9f-aa9c-57b743d08a01/Backpack.png?content-type=image%2Fpng");
 background-size: 150px;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* change to fixed if you want parallax effect */
  padding: 10px;
  border-radius: 8px;          /* rounded corners */
}

/* Traits & Perks Section */
.section-traits {
  background-image: url("path/to/traits.png");
}

/* Magic Section */
.section-magic {
  background-image: url("path/to/magic.png");
}

.stats-grid,
.armor-grid,
.weapons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;


#traits-container, #specs-container, #boosts-container, #perks-container {
  margin-bottom: 15px;
}

.trait-inputs input,
.spec-inputs input,
.boost-inputs input,
.perk-inputs input {
  display: block;
  margin-bottom: 8px;
  width: auto;
}
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
}



.checkbox-group label {
  font-weight: normal;
}
.score-grid > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-grid label {
  width: 40px;
}

.score-grid input[type="number"] {
  width: 60px;
}

.score-grid input[readonly] {
  background: #eee;
  width: 50px;
  text-align: center;
}
#bonus-wounds, #total-wounds {
  width: 80px;
  text-align: center;
}

.field-entry {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.field-entry input {
  flex: 1;
  margin-right: 0.5em;
}
.remove-button {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 0 0.5em;
  cursor: pointer;
  border-radius: 3px;
}
.remove-button:hover {
  background: #c0392b;
}

.armor-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.armor-entry input, .armor-entry select {
  min-width: 100px;
}
.currency-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.currency-entry input {
  width: 80px;
}
.currency-entry select {
  min-width: 100px;
}
.fatigue-status {
  margin-left: 10px;
  font-weight: bold;
  color: #b03a2e; /* deep red */
}

.wound-tracker {
  position: relative;
  width: 300px;
  margin: auto;
}
.wound-silhouette {
  width: 100%;
  display: block;
}

.wound-zone {
  position: absolute;
  display: flex;
  gap: 0px;
}

.wound-boxes {
  display: flex;
  gap: 1px; /* Reduce spacing between checkboxes */
  justify-content: center;
}

.wound-box {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Custom placement for each region */
.zone-head     { top: 18px;  left: 192px; }
.zone-chest    { top: 62px;  left: 10px; }
.zone-larm     { top: 122px;  left: -5px;  }
.zone-rarm     { top: 80px;  left: 210px; }
.zone-lleg     { top: 205px; left: 15px;  }
.zone-rleg     { top: 205px; left: 190px; }

.wound-box:checked {
  background-color: red;
  accent-color: crimson;
}

.wound-zone {
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: #333;
  text-align: center;
}
/* Status text */
.wound-status {
  font-weight: bold;
  min-width: 100px;  /* keep labels aligned */
  text-align: left;
  font-size: 14px;
}

.rest-actions {
  float: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: auto;
}

.big-action-btn {
  padding: 12px 20px;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #ccc;
  border: 2px solid #444;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.big-action-btn:hover {
  background-color: #ddd;
}

.sheet-rolltemplate-check .sheet-template-container {
  border: 2px solid #444;
  background: #fff;
  padding: 6px;
  font-family: sans-serif;
}
.sheet-rolltemplate-check .sheet-template-title {
  background: #333;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 3px;
}
.sheet-rolltemplate-check .sheet-template-row {
  margin: 4px 0;
}

.skills-align,
.stats-align {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.skills-align > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skills-align label {
  flex: 1;
  text-align: left;
  padding-right: 10px;
}

.skills-align input[type="number"] {
  text-align: right;
  width: 70px;
}