span {
  cursor: help;
  border-bottom: 1px dashed;
}
html {
  font-family: sans-serif;
  font-size: 80%;
}
tr {
  text-align: center;
  font-size: 80%;
  height: 29px;
}
th {
  width: 14.25%;
}
h1 {
  text-align: center;
}
h2 {
  text-align: center;
}
.char-select {
  display: flex;
  justify-content: center;
}
.forms {
  display: flex;
  justify-content: center;
}
.list {
  display: flex;
  justify-content: center;
}
.matchup-container {
    display: flex;             /* make children sit side by side */
    gap: 20px;                  /* space between columns */
    align-items: flex-start;    /* align tops of columns */
}
.my-char-section,
.opp-char-section {
    flex: 1;                    /* both take equal width */
    min-width: 300px;           /* stop from being too skinny */
    border: 1px solid #a2a9b1;     /* optional: visual separation */
    padding: 10px;
    background-color: #eaecf0;  /* optional: background */
}
.general-notes,
.matchup-specific-notes {
    display: grid;
    flex: 1;
    border: 1px solid #a2a9b1;
    padding: 10px;
    background-color: #eaecf0; 
    justify-content: center;
    align-items: flex-start;
}
/* --- Mizuumi Wiki Style for Frame Data Tables --- */

/* Base table styling */
.wikitable {
  border: 1px solid #a2a9b1;
  border-collapse: collapse;
  background-color: #f8f9fa;
  color: #2a2a2a;
  width: 100%;
  font-family: Arial, sans-serif; /* adjust to your preference */
  font-size: 14px;
  line-height: 1.4;
}

/* Table headers */
.wikitable th {
  background-color: #eaecf0;
  font-weight: bold;
  border: 1px solid #a2a9b1;
  padding: 6px 8px;
  text-align: center;
}

/* Table cells */
.wikitable td {
  border: 1px solid #a2a9b1;
  padding: 6px 8px;
  text-align: center;
}

/* Zebra striping for readability */
.wikitable tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Fixed column widths for consistency */
.movedata-flex-framedata-table {
    margin: 0;
    flex-shrink: 0;
    flex-grow: 1000;
    flex-basis: 300px;
}

/* Notes styling inside cells */
.wikitable td ul {
  text-align: left;
  list-style: disc inside;
  margin: 0;
  padding-left: 16px;
}

.wikitable td p {
  margin: 0;
}
.movedata-flex-image-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: flex-start;
    padding: 3px;
    text-align: center;
    line-height: 1.3em;
    background-color: #eaecf0;
    border: 1px solid #a2a9b1;
    flex-basis: 180px;
    flex-grow: 1;
    flex-shrink: 1;
}
.movedata-container {
    border: 1px solid #a2a9b1;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: stretch;
    background-color: white;
}
.movedata-flex-image-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: flex-start;
    padding: 3px;
    text-align: center;
    line-height: 1.3em;
    background-color: #eaecf0;
    border: 1px solid #a2a9b1;
    flex-basis: 180px;
    flex-grow: 1;
    flex-shrink: 1;
}
.movedata-flex-information {
    display: flex;
    flex-flow: column nowrap;
    flex-shrink: 0;
    flex-grow: 1000;
    flex-basis: 300px;
    overflow-x: auto;
}
.movedata-flex-framedata {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: stretch;
}
.matchup-notes-container {
    padding: 3px;
    line-height: 1.3em;
    background-color: #eaecf0;
    border: 1px solid #a2a9b1;
    flex-grow: 1;
    flex-shrink: 1;
}
.general-notes-container,
.matchup-specific-notes-container {
    padding: 3px;
    line-height: 1.3em;
    background-color: #eaecf0;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-content: center;
    text-align: left;
}
.general-notes-save,
.matchup-specific-notes-save {
  padding: 3px;
  line-height: 1.3em;
  background-color: #eaecf0;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  align-content: center;
}
.image {
  display: flex;
  justify-content: center;
  align-content: center;
}
.char-images {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.char-img {
  text-align: center;
  width: 45%;
}

.char-img img {
  height: auto;
  display: block;
  margin: 0 auto;
}
.centered {
  list-style: none;
  padding: 0;
  text-align: center;
}

.centered li {
  display: inline-block;
  margin: 0 10px;
}