/* [LarenX]: The cover | games/Master-Mind/css/cover.css | v.2.0
 *
 * The cover is a painting Daniel made, 1240 x 1754. This file does not decorate
 * it and does not frame it. It sizes it to the window and lays the contents list
 * into the cleared plain inside the tilted plate, leaning at the plate's angle so
 * the list reads as lettering that was always on the art.
 */

.cover {
  padding: 0;
  background: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.55);
}

/* The painting is the page, so the generated paper and the dot screen have to get
 * out of its way: both would sit on top of artwork that already has its own. */
.cover::before,
.cover::after { display: none; }

.cover__sheet {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------- contents --- */

.cover__menu {
  position: absolute;
  transform-origin: 50% 50%;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  /* Height comes from the type. See the note in cover.js. */
  height: auto;
  /* Sized from the cover's own width, so the lettering scales with the page and
   * never has to be tuned per breakpoint. */
  font-size: clamp(0.72rem, 2.7cqw, 1.9rem);

  /* A pale tint under the lettering, so the middle rows do not fall across the
   * big rock and stop being readable.
   *
   * It used to be a rectangle with a glow around it, and the glow spread well
   * above the type and past the edge of the plate, which made it read as a box
   * dropped on the painting. A radial wash has no edge to stick out: it is
   * densest under the words and gone by the time it reaches the art. */
  padding: 0.4em 0.7em 0.5em;
  background: radial-gradient(
    ellipse 100% 108% at 50% 50%,
    rgba(246, 242, 231, 0.88) 28%,
    rgba(246, 242, 231, 0.42) 62%,
    rgba(246, 242, 231, 0) 88%
  );
}

.cover { container-type: inline-size; }

.cover__tochead {
  font-family: var(--font-letter);
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 0.2em;
  padding-bottom: 0.25em;
  border-bottom: 2px solid #1c2a33;
  color: #1c2a33;
}

.toc { list-style: none; margin: 0; padding: 0; }

.toc__row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: 1em;
  line-height: 1.5;
}

.toc__no {
  font-weight: 700;
  min-width: 2.4em;
  letter-spacing: 0.08em;
  color: #46606f;
}

.toc__title {
  font-family: var(--font-letter);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  color: #14202a;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

button.toc__title:hover { color: #c2402b; }
button.toc__title:focus-visible { outline: 2px solid #16222a; outline-offset: 2px; }

.toc__dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted #6c8492;
  transform: translateY(-0.28em);
  min-width: 1em;
}

.toc__page {
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #46606f;
  white-space: nowrap;
}

/* A locked episode is printed as what is coming in the next issue, which is how a
 * serial has always sold the next one. */
.toc__row--shut { opacity: 0.5; }
.toc__row--shut .toc__title { font-style: italic; font-weight: 600; }

/* ---------------------------------------------------------------- tools --- */

/* The language switch is a control, not part of the magazine, so it does not
 * belong in the contents list. It sits on the blue margin above the plate, where
 * it is separate from the menu and impossible to miss. Its first home was over
 * the masthead, covering the word KOMIKS; its second was inside the contents,
 * where it read as an episode. */
.cover__lang {
  position: absolute;
  right: 3.6%;
  bottom: 1.6%;
  z-index: 6;
  font-family: var(--font-letter);
  font-size: clamp(0.62rem, 1.5cqw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #f4efe1;
  border: 2.4px solid #14202a;
  box-shadow: 3px 3px 0 #14202a;
  padding: 5px 13px;
  color: #14202a;
  cursor: pointer;
  white-space: nowrap;
}

.cover__lang b { letter-spacing: 0.1em; }

/* The way into the tribute page, on the blue margin under the plate. It used to
 * be pale lettering straight on the blue, at two thirds the size of the language
 * button opposite it, and Daniel could barely read it. It is a plate now, the
 * same plate as the button on the other side, lettered in the red of the
 * masthead K so that the two corners of the cover answer each other. Red type on
 * blue paper would vibrate and could not be read at all; red on cream is what
 * the magazine itself did. */
.cover__about {
  position: absolute;
  left: 3.6%;
  bottom: 1.6%;
  z-index: 6;
  font-family: var(--font-letter);
  font-size: clamp(0.62rem, 1.5cqw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #f4efe1;
  border: 2.4px solid #14202a;
  box-shadow: 3px 3px 0 #14202a;
  padding: 5px 13px;
  color: var(--red-masthead);
  text-decoration: none;
}

.cover__about:hover,
.cover__scores:hover,
.cover__rules:hover { background: #fff; }

.cover__about:focus-visible,
.cover__scores:focus-visible,
.cover__rules:focus-visible { outline: 2px solid #16222a; outline-offset: 2px; }

/* The log and the rules, in the bottom right corner of the painted plate, over
 * the empty ground above the series logo. They lean with the plate, because
 * everything lettered on that plate leans with it.
 *
 * The block is positioned and leaned once and the two plates stack inside it, so
 * making either of them bigger moves nothing: the pair grows upward from a fixed
 * corner instead of two sets of percentages having to be worked out again. That
 * is the mistake the menu on this cover made six times over.
 */
.cover__links {
  position: absolute;
  right: 20.5%;
  bottom: 21%;
  z-index: 6;
  transform: rotate(-4.1deg) skewY(-1.6deg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* Blue, not the red of the other two plates, and the blue is the one Daniel
 * painted into the O of the masthead. That arc is #4094cc, sampled off the file,
 * and it cannot be used for type: on this cream plate it comes out at 2.4 to 1,
 * which is not readable at any size. So it is taken down to ink strength with its
 * hue kept, 209 degrees either way, and #31689e reads at 5.1 to 1. Still plainly
 * the masthead's blue, dark enough to be lettering.
 *
 * The first attempt used the dark outline inside the same O, #155360. It passed
 * every contrast test and looked black on the cover, which is the whole point
 * missed: Daniel asked for a different colour, not for a darker one. */
.cover__scores,
.cover__rules {
  font-family: var(--font-letter);
  font-size: clamp(0.72rem, 1.9cqw, 1.28rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #f4efe1;
  border: 2.6px solid #14202a;
  box-shadow: 3px 3px 0 #14202a;
  padding: 6px 15px;
  color: #31689e;
  text-decoration: none;
  white-space: nowrap;
}
.cover__lang:hover { background: #fff; }

.cover__lang:hover { color: #c2402b; }
.cover__lang:focus-visible { outline: 2px solid #16222a; outline-offset: 2px; }