/* Shared game controls. Layout and touch sizes live in experience.css;
   skins change only the face, lettering and tactile states of actual controls. */
#reader :is([data-game-button], .solve-more > summary) {
  --button-face: color-mix(in srgb, var(--reader-paper, #faf6eb) 65%, white);
  --button-highlight: color-mix(in srgb, var(--button-face) 30%, white);
  --button-bottom: color-mix(
    in srgb,
    var(--button-face) 92%,
    var(--reader-accent)
  );
  --button-line: color-mix(in srgb, var(--reader-accent) 30%, #cbd4c9);
  --button-edge: color-mix(in srgb, var(--reader-accent) 38%, #a5b6a7);
  --button-ink: var(--game-ink, var(--reader-dark));
  --button-depth: 3px;
  --button-lift: 0px;
  position: relative;
  border: 1px solid var(--button-line);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    var(--button-highlight),
    var(--button-face) 45%,
    var(--button-bottom)
  );
  color: var(--button-ink);
  box-shadow:
    inset 0 1px 0 #ffffffb0,
    inset 0 -2px 0 #15382b0a,
    0 var(--button-depth) 0 var(--button-edge),
    0 calc(var(--button-depth) + 2px) 7px #173b2c12;
  font-family: var(--book-title-font, "Fredoka"), "Noto Sans", sans-serif;
  font-weight: 600;
  text-shadow: 0 1px 0 #ffffffa0;
  transform: translateY(var(--button-lift));
  transition:
    transform 110ms ease,
    box-shadow 110ms ease,
    filter 110ms ease;
  -webkit-tap-highlight-color: transparent;
}

#reader button:is([data-game-button="primary"], [data-game-button="next"]) {
  --button-face: color-mix(
    in srgb,
    var(--game-accent, var(--reader-accent)) 86%,
    #193d36
  );
  --button-highlight: color-mix(in srgb, var(--button-face) 88%, white);
  --button-bottom: color-mix(in srgb, var(--button-face) 90%, #132e29);
  --button-edge: color-mix(in srgb, var(--button-face) 60%, #142e29);
  --button-line: color-mix(in srgb, var(--button-face) 80%, #142e29);
  --button-ink: #fffdf4;
  text-shadow: 0 1px 1px #102e3650;
}
#reader button[data-game-button="next"] {
  --button-face: var(--reader-dark);
}
#reader button[data-game-button="gold"] {
  --button-face: color-mix(
    in srgb,
    var(--reader-secondary, #d9ac64) 65%,
    #ffe4a3
  );
  --button-highlight: #fff0c7;
  --button-bottom: color-mix(in srgb, var(--button-face) 85%, #c4943d);
  --button-edge: #ac813b;
  --button-line: #d5ac65;
  --button-ink: #64471e;
}
#reader button[data-game-button="key"] {
  --button-face: color-mix(
    in srgb,
    var(--book-paper, var(--reader-paper)) 75%,
    white
  );
  --button-highlight: #fffefa;
  --button-bottom: color-mix(
    in srgb,
    var(--button-face) 90%,
    var(--game-accent)
  );
  --button-depth: 4px;
  --button-ink: var(--game-accent);
  border-radius: 12px 12px 10px 10px;
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
}
#reader button[data-game-button="erase"] {
  --button-face: #fcece2;
  --button-highlight: #fff7ed;
  --button-bottom: #f2d3bf;
  --button-line: #ddb29a;
  --button-edge: #ba7e60;
  --button-ink: #925239;
  --button-depth: 4px;
}
#reader button[data-game-button="erase"] .button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#reader button[data-game-button="erase"] .game-icon {
  width: 23px;
  height: 23px;
}
#reader button[data-game-button="tab"] {
  --button-depth: 2px;
  border-radius: 9px;
}
#reader button[data-game-button="tab"][aria-pressed="true"],
#reader button[data-game-button="quiet"][aria-expanded="true"] {
  --button-face: color-mix(in srgb, var(--reader-accent) 15%, white);
  --button-highlight: color-mix(in srgb, var(--reader-accent) 8%, white);
  --button-bottom: color-mix(in srgb, var(--reader-accent) 20%, white);
  --button-line: var(--reader-accent);
  --button-ink: var(--reader-dark);
  --button-depth: 1px;
  --button-lift: 1px;
}
.game-icon {
  width: 21px;
  height: 21px;
  overflow: visible;
  filter: drop-shadow(0 1px 0 #ffffff35);
}
.game-icon .icon-accent {
  fill: var(--reader-secondary, #d9ac64);
  stroke: none;
}
.book-view-switch .game-icon {
  width: 18px;
  height: 18px;
}
.book-view-switch {
  background: color-mix(in srgb, var(--reader-accent) 7%, var(--reader-paper));
  border-color: color-mix(in srgb, var(--reader-accent) 20%, #dce0d6);
  box-shadow: inset 0 1px 3px #153b2c12;
}
.play-dock {
  padding-bottom: 4px;
}

@media (hover: hover) and (pointer: fine) {
  #reader :is([data-game-button], .solve-more > summary):hover:not(:disabled) {
    --button-lift: -1px;
    filter: brightness(1.04);
  }
}
#reader :is([data-game-button], .solve-more > summary):active:not(:disabled),
#reader .solve-more[open] > summary {
  --button-depth: 1px;
  --button-lift: 2px;
  filter: brightness(0.98);
}
#reader [data-game-button]:disabled {
  box-shadow: inset 0 1px 0 #ffffffb0;
  transform: none;
  filter: grayscale(0.35);
  opacity: 0.4;
}
@media (max-width: 600px) {
  #reader button[data-game-button="key"] {
    font-size: 22px;
  }
}
@media (max-height: 560px) {
  #reader button[data-game-button="key"] {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #reader :is([data-game-button], .solve-more > summary) {
    transition: none;
    transform: none;
  }
}