/* =========================
   SCENE 10
========================= */

.scene-10 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.scene10-content {
  position: absolute;

  top: 8vh;
  right: 5vw;
  bottom: 5vh;
  left: calc(var(--icon-left) + var(--icon-size) + 5rem);

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =========================
   TABLE
========================= */

.scene10-table {
  width: min(77.5rem, 84vw);
  flex: 1;
  min-height: 0;

  display: grid;

  /*
    Motif column + 5 equal kolam columns
  */
  grid-template-columns:
    5rem
    repeat(5, minmax(0, 1fr));

  /*
    Header + 4 motif rows
  */
  grid-template-rows:
    6.25rem
    repeat(4, minmax(0, 1fr));

  column-gap: 0;
  row-gap: 0;

  align-items: stretch;
  overflow: hidden;
}

.scene10-cell {
  position: relative;
  min-width: 0;
  min-height: 0;

  box-sizing: border-box;

  color: var(--cream);
  font-family: var(--mono);
}


/* =========================
   HEADER CELLS
========================= */

.scene10-header {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  gap: .45rem;
  padding-top: .15rem;

  text-align: center;
}

.scene10-header-svg,
.scene10-header img {
  width: 3.375rem;
  height: 3.375rem;

  display: block;
  object-fit: contain;
}

.scene10-date {
  font-size: .68rem;
  line-height: .9rem;
  letter-spacing: .1em;

  color: var(--cream);
  white-space: nowrap;
}


/* =========================
   MOTIF COLUMN
========================= */

.scene10-motif {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-right: .75rem;
}

.scene10-motif-icon {
  width: 1.5625rem;
  height: 1.5625rem;

  display: block;
  object-fit: contain;
}


/* =========================
   DATA CELLS
========================= */

.scene10-tallies {
  width: 100%;
  height: 100%;

  box-sizing: border-box;

  /*
    This is now the real continuous
    column separator.
  */
  border-left: .03125rem solid rgba(236, 218, 180, .38);

  display: flex;
  flex-wrap: wrap;

  align-content: center;
  align-items: center;
  justify-content: flex-start;

  /*
    Identical distance from the separator
    for every column.
  */
  padding: 1rem 1.35rem;

  column-gap: .7rem;
  row-gap: .65rem;

  overflow: hidden;
}


/* =========================
   TALLY GROUPS
========================= */

.scene10-tally-group {
  display: inline-flex;
  flex: 0 0 auto;

  align-items: center;
  gap: .14rem;

  max-width: 100%;
}

.scene10-tally {
  display: inline-block;
  flex: 0 0 auto;

  color: var(--yellow);

  font-size: .88rem;
  line-height: 1;

  opacity: 0;
  transform: translateY(.25rem);

  transition:
    opacity .35s ease,
    transform .35s ease;
}

.scene10-tally.show {
  opacity: 1;
  transform: translateY(0);
}


/* Hide old JS-generated dividers, if any remain */
.scene10-col-line {
  display: none;
}


/* =========================
   TITLE
========================= */

.scene10-title {
  width: 100%;
  flex-shrink: 0;

  margin-top: 2rem;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.scene-10 .small-text,
.type-text-scene10 {
  position: relative;

  display: block;
  width: auto;

  text-align: center;
}


/* =========================
   MEDIUM SCREENS
========================= */

@media (max-width: 81.25rem) {
  .scene10-content {
    right: 3.5vw;
    left: calc(var(--icon-left) + var(--icon-size) + 4rem);
  }

  .scene10-table {
    width: min(67.5rem, 86vw);

    grid-template-columns:
      4.125rem
      repeat(5, minmax(0, 1fr));

    grid-template-rows:
      5.375rem
      repeat(4, minmax(0, 1fr));
  }

  .scene10-header-svg,
  .scene10-header img {
    width: 2.875rem;
    height: 2.875rem;
  }

  .scene10-date {
    font-size: .61rem;
  }

  .scene10-motif-icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .scene10-tallies {
    padding: .8rem 1rem;

    column-gap: .55rem;
    row-gap: .5rem;
  }

  .scene10-tally-group {
    gap: .1rem;
  }

  .scene10-tally {
    font-size: .76rem;
  }
}


/* =========================
   SMALL SCREENS
========================= */

@media (max-width: 56.25rem) {
  .scene10-content {
    top: 5rem;
    right: 1rem;
    bottom: 3rem;
    left: calc(var(--icon-left) + var(--icon-size) + 2rem);
  }

  .scene10-table {
    width: 100%;

    grid-template-columns:
      2.875rem
      repeat(5, minmax(0, 1fr));

    grid-template-rows:
      4.375rem
      repeat(4, minmax(0, 1fr));
  }

  .scene10-header-svg,
  .scene10-header img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .scene10-date {
    font-size: .5rem;
    letter-spacing: .05em;
  }

  .scene10-motif {
    padding-right: .35rem;
  }

  .scene10-motif-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .scene10-tallies {
    padding: .5rem .55rem;

    column-gap: .3rem;
    row-gap: .35rem;
  }

  .scene10-tally-group {
    gap: .06rem;
  }

  .scene10-tally {
    font-size: .62rem;
  }

  .scene10-title {
    margin-top: 1.25rem;
  }
}