.choice-card {
  width: 100%;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.save-status {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.mode-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #111419;
}

.mode {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mode.active {
  color: var(--text);
  background: #2a3038;
}

.details-grid,
.choice-form-grid,
.play-grid {
  display: grid;
  gap: 12px;
}

.details-grid,
.choice-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card,
.details-personality,
.choice-fieldset,
.equipment-choice-fieldset,
.play-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #1b1f25;
}

.details-grid > .spellcasting-card {
  grid-column: 1 / -1;
}

.detail-card h3,
.details-personality h3,
.play-card h3 {
  margin: 0 0 8px;
  color: var(--accent2);
  font: 700 18px Georgia, serif;
}

.detail-card label {
  margin-bottom: 10px;
}

.details-personality {
  margin-top: 12px;
}

.inventory-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1b1f25;
}

.inventory-head,
.inventory-row,
.attack-row,
.equipped-row,
.roll-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.inventory-head {
  margin-bottom: 10px;
}

.inventory-head h3 {
  margin: 0;
  color: var(--accent2);
  font: 700 18px Georgia, serif;
}

.inventory-head p {
  margin: 3px 0 0;
}

.inventory-add {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.inventory-add label {
  flex: 1;
  margin-bottom: 0;
}

.inventory-rows {
  display: grid;
  gap: 6px;
}

.inventory-row,
.attack-row,
.equipped-row,
.roll-row {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101318;
}

.inventory-row > span,
.attack-row span,
.equipped-row span,
.roll-row span {
  color: var(--muted);
  font-size: 12px;
}

.inventory-row .inline-check {
  min-width: 190px;
}

.inventory-item-name {
  display: grid;
  gap: 2px;
}

.inventory-item-name small,
.inventory-item-meta,
.inventory-source {
  color: var(--muted);
  font-size: 12px;
}

.inventory-source {
  color: var(--accent2);
  font-weight: 700;
}

.quantity-label {
  flex-direction: row;
  align-items: center;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.quantity-label input {
  width: 58px;
  padding: 6px;
}

.equipped-list,
.attack-list,
.roll-list {
  display: grid;
  gap: 7px;
}

.attack-row > div,
.roll-row > div {
  display: grid;
  gap: 2px;
}

.roll-list h4 {
  margin: 10px 0 0;
  color: var(--accent2);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.roll-result {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #315b47;
  border-radius: 8px;
  background: #13271e;
  color: #b9e6cf;
  font-weight: 800;
}

.resource-actions {
  display: flex;
  gap: 5px;
}

.choice-fieldset {
  margin: 0;
}

.choice-fieldset legend,
.equipment-choice-fieldset legend {
  padding: 0 5px;
  color: var(--text);
  font-weight: 800;
}

.choice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
}

.skill-advice {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #5d5130;
  border-radius: 10px;
  background: linear-gradient(135deg, #272319, #1b1f25);
}

.ability-advice {
  margin: 14px 0 16px;
  padding: 14px;
  border: 1px solid #5d5130;
  border-radius: 10px;
  background: linear-gradient(135deg, #272319, #1b1f25);
}

.ability-advice-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.ability-advice h3 {
  margin: 0 0 4px;
  color: #f1d88a;
  font: 700 18px Georgia, serif;
}

.ability-advice p {
  margin: 0;
  color: var(--muted);
}

.ability-advice-head label {
  min-width: 230px;
  margin: 0;
}

.ability-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.ability-recommendation {
  display: grid;
  gap: 3px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101318;
}

.ability-recommendation.best {
  border-color: #8f783a;
  background: #2b261a;
}

.ability-recommendation span {
  color: var(--muted);
  font-size: 12px;
}

.equipment-advice {
  margin: 14px 0 16px;
  padding: 14px;
  border: 1px solid #5d5130;
  border-radius: 10px;
  background: linear-gradient(135deg, #272319, #1b1f25);
}

.equipment-advice-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.equipment-advice h3 {
  margin: 0 0 4px;
  color: #f1d88a;
  font: 700 18px Georgia, serif;
}

.equipment-advice p {
  margin: 0;
  color: var(--muted);
}

.equipment-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.equipment-recommendation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101318;
}

.equipment-recommendation span {
  color: var(--muted);
  font-size: 12px;
}

.fixed-choice {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101318;
}

.fixed-choice span {
  color: var(--muted);
  font-size: 12px;
}

.equipment-choice-fieldset {
  grid-column: 1 / -1;
  margin: 0;
}

.equipment-choice-fieldset legend small {
  color: var(--muted);
  font-weight: 600;
}

.equipment-choice-help,
.field-help {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.equipment-choice-fieldset label {
  margin-bottom: 10px;
}

.skill-advice-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.skill-advice h3 {
  margin: 0 0 4px;
  color: #f1d88a;
  font: 700 18px Georgia, serif;
}

.skill-advice p {
  margin: 0;
  color: var(--muted);
}

.skill-advice-head label {
  min-width: 230px;
  margin: 0;
}

.skill-recommendation-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.skill-recommendation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101318;
}

.skill-recommendation.best {
  border-color: #8f783a;
  background: #2b261a;
}

.skill-recommendation span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.spell-choice-block {
  margin-top: 14px;
}

.spell-choice-block h3 {
  margin-bottom: 5px;
}

.spell-choice-block .choice-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

@media (min-width: 761px) {
  .spell-choice-block .choice-fieldset {
    display: flex;
    flex-direction: column;
    max-height: 500px;
  }

  .spell-choice-block .choice-options {
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
  }
}

.spell-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid #282d34;
}

.spell-option:last-child {
  border-bottom: 0;
}

.spell-option .checkline {
  margin: 0;
}

.spell-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.spell-option-copy small {
  color: var(--muted);
  font-size: 11px;
}

.spell-details {
  min-width: 92px;
  color: var(--muted);
  font-size: 11px;
}

.spell-details summary {
  color: var(--accent2);
  cursor: pointer;
  font-weight: 700;
}

.spell-details p {
  max-width: 420px;
  margin: 7px 0 5px;
  line-height: 1.4;
}

.spell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.spell-meta span {
  white-space: nowrap;
}

.play-view {
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px;
}

.play-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 18px;
}

.play-head h2 {
  margin: 3px 0;
  font: 700 32px/1.1 Georgia, serif;
}

.play-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-card {
  grid-column: 1 / -1;
}

.play-card-head,
.resource-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #282d34;
}

.play-card .subhead {
  margin-top: 15px;
  font-size: 15px;
}

.feature-list {
  margin: 0;
  padding-left: 19px;
  color: var(--muted);
}

.play-spell-list {
  display: grid;
  gap: 5px;
  margin-top: 6px;
}

.play-spell-list details {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #101318;
}

.play-spell-list summary {
  color: var(--accent2);
  cursor: pointer;
  font-weight: 700;
}

.play-spell-list span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
}

.play-card-head span,
.resource-row span,
.play-card > span,
.death-save-grid span {
  color: var(--muted);
  font-size: 12px;
}

.hp-bar {
  height: 14px;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #101318;
}

.hp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--good), #9fce70);
  transition: width .2s ease;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.quick-actions input {
  width: 72px;
}

.play-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.play-stats div,
.death-save-grid > div {
  padding: 9px 5px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101318;
}

.play-stats span,
.play-stats strong,
.death-save-grid span,
.death-save-grid strong {
  display: block;
}

.play-stats span,
.death-save-grid span {
  font-size: 10px;
  text-transform: uppercase;
}

.play-stats strong,
.death-save-grid strong {
  margin-top: 2px;
  font-size: 18px;
}

.compact-text {
  color: var(--muted);
}

.inline-check {
  flex-direction: row;
  align-items: center;
  margin: 0;
  font-weight: 400;
}

.inline-check input {
  width: auto;
}

.condition-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.condition-chip {
  flex-direction: row;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #101318;
  font-size: 12px;
  font-weight: 600;
}

.condition-chip input {
  width: auto;
}

.death-save-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 760px) {
  .details-grid,
  .choice-form-grid,
  .play-grid {
    grid-template-columns: 1fr;
  }

  .play-view {
    padding: 16px;
  }

  .play-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .play-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .inventory-add,
  .inventory-row,
  .attack-row,
  .roll-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-add .btn,
  .inventory-row .btn {
    width: 100%;
  }

  .choice-options {
    grid-template-columns: 1fr;
  }

  .skill-advice-head,
  .skill-recommendation,
  .ability-advice-head,
  .equipment-advice-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .skill-advice-head label,
  .skill-recommendation span,
  .ability-advice-head label {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .ability-recommendation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .equipment-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .spell-option {
    grid-template-columns: 1fr;
  }

  .spell-choice-block .choice-options {
    grid-template-columns: 1fr;
  }
}

.muted {
  color: var(--muted);
}

@media (max-width: 760px) {
  .top-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .save-status {
    width: 100%;
  }
}