:root {
  --color-card-purple: #92137e;
  --color-card-blue: #2c4ca3;
  --color-card-red: #d3004f;
  --color-highlight: #ffbd3a;
  --color-standout: #73e66e;
  --color-bluish-black: #000e57;
  --color-greenish-black: #002a00;
  --color-yellowish-white: #ffefcf;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: "EB Garamond", serif;
  color: var(--color-card-blue);
  background-color: #E9E3D7;
  font-size: max(3vh, 0.35cm);
}

@media (max-width: 20cm) {
  .wide-screen-only {
    display: none;
  }
}
.recap {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  display: none;
}
.recap.recap-shown {
  display: block;
}

.recap-root {
  display: grid;
  height: 100%;
}
.recap-root > * {
  margin-top: auto;
  margin-bottom: auto;
}

.recap-overlay {
  height: 100%;
  overflow: auto;
}

.recap-back-button {
  position: absolute;
  top: 0;
  left: 0.5em;
  font-size: 50px;
  cursor: pointer;
}

.recap-close-button {
  background: white;
  cursor: pointer;
  font-size: 50px;
  line-height: 1;
  padding: 0 0.1em;
  position: absolute;
  right: 0.5em;
  top: 0;
}

.recap-card-offer ul {
  display: flex;
  height: 20vh;
  justify-content: space-evenly;
  padding: 0;
}
.recap-card-offer li {
  height: 100%;
  list-style-type: none;
}
.recap-card-offer img {
  display: block;
  height: 100%;
}

.recap-card-offer-multiple li {
  padding: 0 6%;
}
.recap-card-offer-multiple li p {
  width: 20em;
  margin: 1em auto;
}
.recap-card-offer-multiple img {
  margin: auto;
}

.recap-picked-card > * {
  margin: auto;
}
.recap-picked-card img {
  width: 30vh;
}

.recap-link {
  position: absolute;
  top: 50%;
  line-height: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.recap-link-left {
  left: 1rem;
}
.recap-link-right {
  right: 1rem;
}
.recap-link__icon {
  font-size: 2cm;
  padding-bottom: 0.2em;
}

.recap-game svg.recap-game__minimap {
  height: 100%;
}

.recap-game {
  height: 100vh;
  overflow-y: auto;
  grid-template-rows: minmax(min-content, max-content) minmax(min-content, max-content) auto 1fr minmax(min-content, max-content);
  grid-template-columns: auto 1fr 1fr 1fr auto;
  grid-template-areas: "h h h h h" "a1 g1 av g2 a2" "a1 c c c a2" "m m m m m" "f f f f f";
}
.recap-game h2 {
  grid-area: h;
  padding-top: 0.5em;
}
.recap-game__gate {
  height: 20vh;
  min-height: 4cm;
  border-radius: 10px;
  border: 2px solid gray;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.recap-game__gate dt:first-child {
  font-weight: bold;
}
.recap-game__gate * {
  margin-left: 0;
}
.recap-game__birth-gate {
  grid-area: g1;
}
.recap-game__death-gate {
  grid-area: g2;
}
.recap-game__avatar {
  grid-area: av;
  height: 20vh;
  min-height: 4cm;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.recap-game__avatar img {
  grid-row: 1;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  align-self: start;
  margin: auto;
}
.recap-game__avatar p {
  grid-row: 2;
  margin: 0;
  align-self: end;
}
.recap-game__cards {
  grid-area: c;
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  height: calc(4em + 10px);
  display: flex;
  justify-content: space-evenly;
}
.recap-game__cards span {
  display: inline-block;
  margin: auto;
  height: 100%;
  width: auto;
  overflow: hidden;
}
.recap-game__cards span:hover {
  overflow: visible;
}
.recap-game__cards img {
  height: 100%;
}
.recap-game__card-binding {
  margin: auto 0 2em 0;
}
.recap-game__card-binding--down {
  grid-area: a1;
}
.recap-game__card-binding--up {
  grid-area: a2;
}
.recap-game__minimap {
  grid-area: m;
  min-height: 10cm;
  max-height: 100%;
  overflow: hidden;
  margin: auto;
  object-fit: contain;
}
.recap-game__minimap__highlight {
  grid-area: m;
  position: absolute;
}
.recap-game__footer {
  grid-area: f;
  display: flex;
  margin: auto;
  justify-content: space-evenly;
  width: 90%;
}
.recap-game__footer a {
  margin: auto;
}

.user-feedback section {
  margin: 1em;
}
.user-feedback textarea {
  min-width: 50vw;
  field-sizing: normal;
}
.user-feedback .buttonlike {
  color: black;
  padding: 0.3em;
}

.recap-exegesis {
  font-style: italic;
}

.game-intro {
  font-size: max(3vh, 0.35cm);
}
.game-intro button {
  font-size: 120%;
  padding: 0.5em 1em;
}

a {
  cursor: pointer;
}

.buttonlike {
  display: inline-block;
}

button, .buttonlike {
  background: inherit;
  border: 2px solid gray;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  margin: 10px;
  text-transform: uppercase;
}
button:hover, .buttonlike:hover {
  box-shadow: 0 0 1px 1px var(--color-highlight);
}

.card-detail {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-evenly;
  margin: 0 auto;
  width: 100%;
  width: calc(100% - 0.8cm);
}
@media (orientation: portrait) {
  .card-detail {
    display: block;
  }
}
.card-detail-buttons {
  margin: auto 0;
}
.card-detail-exegesis {
  padding: 0 2vw;
  font-size: max(2vh, 0.35cm);
}
.card-detail img {
  margin: auto 0;
  max-height: 100%;
  max-width: 100%;
}

.debug-console {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}
.debug-console-shown {
  display: block;
}

#guide-root {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  display: none;
  overflow: auto;
}

#guide-switch {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 2cm;
  height: 2cm;
  border: 2px solid gray;
  border-right: 0 none;
  border-bottom: 0 none;
  border-radius: 2cm;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px 0px var(--color-card-purple);
  cursor: pointer;
}
@media (hover: hover) {
  #guide-switch:hover {
    background-color: #FBF;
  }
}
#guide-switch .guide-switch--turn-off {
  display: none;
}
#guide-switch .guide-switch--turn-on {
  display: block;
}

#guide-container.guide-on #guide-root {
  display: block;
}
#guide-container.guide-on #guide-switch .guide-switch--turn-off {
  display: block;
}
#guide-container.guide-on #guide-switch .guide-switch--turn-on {
  display: none;
}

#guide-container.guide-container--uninitialized {
  display: none;
}

.guide-page {
  display: grid;
  font-size: 4vh;
  justify-content: space-evenly;
  padding: 0.8cm;
}

.guide-page--avatar-choice {
  font-size: 2.5vh;
}
.guide-page--avatar-choice img {
  width: 15vmin;
  height: 15vmin;
  vertical-align: middle;
  margin: 2vmin 4vmin 2vmin 0;
}
.guide-page--avatar-choice ul {
  text-align: left;
  list-style-type: none;
  padding: 0 0 0 19vmin;
  text-indent: -19vmin;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 20px 0px var(--color-card-purple);
  }
  60% {
    box-shadow: 0 0 20px 0px var(--color-card-purple);
  }
  80% {
    box-shadow: 0 0 25px 10px var(--color-card-purple);
  }
  100% {
    box-shadow: 0 0 20px 0px var(--color-card-purple);
  }
}
.guide-on #guide-root:has(.guide-page--avatar-choice) + #guide-switch {
  animation: pulse 7s infinite;
}

.cover-page {
  text-align: center;
  font-family: Arial;
  font-size: 7vw;
  background: transparent url("assets/cover1.jpg") no-repeat center center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
}
.cover-page__text {
  align-self: flex-end;
  padding-bottom: 5vh;
}
.cover-page__explanation {
  max-width: 100%;
  width: 25cm;
  margin: 0 auto;
  padding-bottom: 4rem;
}
.cover-page__world-preview {
  max-width: 100%;
  width: 12cm;
}
.cover-page__card-preview {
  max-width: 40%;
  width: 5cm;
  margin: 0 1em;
}
.cover-page h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 68%;
  margin: auto 0 0;
}
.cover-page h1 span {
  display: block;
  font-size: 38%;
}
.cover-page h2 {
  font-weight: normal;
  margin: 0;
}
.cover-page .author {
  font-size: 28%;
}
.cover-page .subtitle {
  color: #c6cbda;
  font-size: 42%;
}
.cover-page .status-line {
  font-size: 20%;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}
.cover-page .status-line button {
  color: white;
  padding: 0 2em;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 100%;
  margin-bottom: 0;
  height: 5vh;
}
.cover-page .status-line button:hover {
  background-color: black;
}
.cover-page output {
  font-family: monospace;
}

.offer-load-game {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}