/*
 * Sparking! ZERO article chrome (character grids / unlock tables / episode tables).
 * Colors come from Nettoge tokens so light/dark both work.
 */

/* --- Character grid --- */
.sz-chara-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}

.sz-chara-grid figure {
  margin: 0 !important;
  text-align: center;
}

.sz-chara-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color_text, #333) 8%, var(--nettoge-page-bg, #fff));
  cursor: zoom-in;
}

.sz-chara-grid figcaption {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  color: var(--color_text, inherit);
  opacity: 0.85;
}

.sz-chara-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
  white-space: normal !important;
  line-height: 1.3 !important;
  padding: 4px 0 !important;
  color: var(--color_text, inherit);
}

.sz-chara-cell img.sz-inline-chara,
.sz-inline-chara {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 !important;
  display: block !important;
  cursor: zoom-in;
  background: color-mix(in srgb, var(--color_text, #333) 8%, var(--nettoge-page-bg, #fff));
}

.sz-chara-name {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  color: var(--color_text, inherit);
}

/* --- Unlock condition table --- */
.sparkingzerocharacterunlock {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  margin-top: 20px !important;
  line-height: 1.2 !important;
  font-family: var(--font-body, Meiryo, sans-serif) !important;
  font-weight: 300 !important;
  letter-spacing: -0.05em !important;
  color: var(--color_text, inherit);
}

.sparkingzerocharacterunlock th,
.sparkingzerocharacterunlock td {
  padding: 1% 1% !important;
  text-align: left !important;
  border-bottom: 1px solid var(--nettoge-border-muted, #ddd) !important;
  color: var(--color_text, inherit);
}

.sparkingzerocharacterunlock th {
  background-color: color-mix(in srgb, var(--color_text, #333) 6%, var(--nettoge-page-bg, #fff)) !important;
  font-weight: 400 !important;
  color: var(--color_text, inherit) !important;
  opacity: 0.9;
}

.sparkingzerocharacterunlock tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--color_text, #333) 3.5%, var(--nettoge-page-bg, #fff)) !important;
}

.sparkingzerocharacterunlock tr:hover {
  background-color: color-mix(in srgb, var(--color_text, #333) 7%, var(--nettoge-page-bg, #fff)) !important;
}

.sparkingzerocharacterunlock .emphasis {
  background-color: color-mix(in srgb, var(--color_deep01, #d14) 14%, var(--nettoge-page-bg, #fff)) !important;
  padding: 1px 2px !important;
  border-radius: 2px !important;
  font-family: inherit !important;
  font-size: 0.9em !important;
  color: var(--color_deep01, #d14) !important;
  font-weight: normal !important;
}

.sparkingzerocharacterunlock td:first-child {
  white-space: normal !important;
  vertical-align: top !important;
}

@media screen and (min-width: 601px) {
  .sparkingzerocharacterunlock th:nth-child(1),
  .sparkingzerocharacterunlock td:nth-child(1) {
    width: 20% !important;
  }
  .sparkingzerocharacterunlock th:nth-child(2),
  .sparkingzerocharacterunlock td:nth-child(2) {
    width: 45% !important;
  }
  .sparkingzerocharacterunlock th:nth-child(3),
  .sparkingzerocharacterunlock td:nth-child(3) {
    width: 15% !important;
  }
  .sparkingzerocharacterunlock th:nth-child(4),
  .sparkingzerocharacterunlock td:nth-child(4) {
    width: 20% !important;
  }
}

@media screen and (max-width: 600px) {
  .sparkingzerocharacterunlock,
  .sparkingzerocharacterunlock thead,
  .sparkingzerocharacterunlock tbody,
  .sparkingzerocharacterunlock th,
  .sparkingzerocharacterunlock td,
  .sparkingzerocharacterunlock tr {
    display: block;
  }

  .sparkingzerocharacterunlock {
    font-size: 12px !important;
  }

  .sparkingzerocharacterunlock thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .sparkingzerocharacterunlock tr {
    margin-bottom: 10px !important;
    border: 1px solid var(--nettoge-border-muted, #ddd) !important;
    padding: 5px !important;
  }

  .sparkingzerocharacterunlock td {
    border: none !important;
    position: relative !important;
    padding: 2px 5px 2px 85px !important;
    min-height: 1.5em !important;
  }

  .sparkingzerocharacterunlock td:before {
    content: attr(data-label) !important;
    position: absolute !important;
    left: 5px !important;
    width: auto !important;
    white-space: nowrap !important;
    font-weight: bold !important;
    font-size: 0.9em !important;
    padding-right: 10px !important;
    min-width: 70px !important;
    color: var(--color_text, inherit);
    opacity: 0.75;
  }

  .sparkingzerocharacterunlock .emphasis {
    padding: 0 1px !important;
  }

  .sz-chara-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }

  .sz-chara-cell img.sz-inline-chara,
  .sz-inline-chara {
    width: 64px !important;
    height: 64px !important;
  }

  .sz-chara-name {
    font-size: 11px;
  }
}

/* --- Episode another-clear table --- */
.sparkingzeroepisode-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: var(--font-body, Meiryo, sans-serif);
  font-size: 13px;
  color: var(--color_text, inherit);
}

.sparkingzeroepisode-table th,
.sparkingzeroepisode-table td {
  border: 1px solid var(--nettoge-border-muted, #ddd);
  padding: 6px;
  text-align: left;
  line-height: 1.3;
  color: var(--color_text, inherit);
}

.sparkingzeroepisode-table th {
  background-color: color-mix(in srgb, var(--color_text, #333) 6%, var(--nettoge-page-bg, #fff));
  font-weight: bold;
}

.sparkingzeroepisode-row {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sparkingzeroepisode-row.active {
  background-color: color-mix(in srgb, var(--color_main, #2680d9) 14%, var(--nettoge-page-bg, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--color_main, #2680d9) 22%, transparent);
}

.sparkingzeroepisode-details {
  display: none;
  background-color: color-mix(in srgb, var(--color_text, #333) 3.5%, var(--nettoge-page-bg, #fff));
  transition: all 0.3s ease;
}

.sparkingzeroepisode-details.show {
  display: table-row;
}

.sparkingzeroepisode-details-content {
  margin: 10px 0;
}

.sparkingzeroepisode-details-content p {
  margin-top: 1em;
  margin-bottom: 1em;
  color: var(--color_text, inherit);
}

.sparkingzeroepisode-button {
  padding: 1px 3px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to right, #00c6ff, #0072ff);
  border-radius: 4px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.35);
  animation: sparkingzeroepisode-glow 1.5s ease-in-out infinite alternate;
  white-space: nowrap;
}

.sparkingzeroepisode-table td:first-child {
  width: 25%;
  min-width: 100px;
}

.sparkingzeroepisode-table td:nth-child(2) {
  width: 30%;
  min-width: 120px;
}

.sparkingzeroepisode-table td:last-child {
  width: 45%;
}

@keyframes sparkingzeroepisode-glow {
  from { box-shadow: 0 0 5px rgba(0, 198, 255, 0.45); }
  to { box-shadow: 0 0 10px rgba(0, 114, 255, 0.7); }
}

.sparkingzeroepisode-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-top: 1em;
}

.sparkingzeroepisode-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .sparkingzeroepisode-table {
    font-size: 12px;
  }

  .sparkingzeroepisode-table th,
  .sparkingzeroepisode-table td {
    padding: 4px;
  }

  .sparkingzeroepisode-button {
    font-size: 10px;
  }

  .sparkingzeroepisode-table td:first-child,
  .sparkingzeroepisode-table td:nth-child(2),
  .sparkingzeroepisode-table td:last-child {
    min-width: auto;
  }
}