/* Public examples use the same readable content before and after React loads. */
.game-startup {
  display: none;
}
html[data-game-boot="pending"] #root > .game-startup {
  display: block;
}
html[data-game-boot="pending"] #root > .public-startup-content {
  display: none;
}
.game-launch {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  color: #e5efed;
}
.game-launch > span {
  width: 28px;
  height: 28px;
  border: 3px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: game-launch-spin 800ms linear infinite;
}
html[data-theme="light"] .game-launch {
  color: #163d3c;
}
@keyframes game-launch-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-launch > span {
    animation: none;
  }
}
.public-guide {
  position: relative;
  width: min(900px, calc(100% - 32px));
  margin: 32px auto;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid #50766e;
  border-radius: 22px;
  background: #193e46;
  color: #e5efed;
  font:
    17px/1.7 Roboto,
    system-ui,
    sans-serif;
  text-align: start;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.public-guide h1,
.public-guide h2,
.public-guide h3 {
  line-height: 1.35;
  margin: 20px 0 12px;
}
.public-guide h1 {
  font-size: clamp(25px, 4vw, 36px);
}
.public-guide h2 {
  font-size: 23px;
}
.public-guide h3 {
  font-size: 19px;
}
.public-guide p {
  margin: 12px 0;
}
.public-guide a {
  color: #a4ebd9;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.public-guide a:focus-visible,
.guide-example summary:focus-visible {
  outline: 3px solid #e8bd50;
  outline-offset: 5px;
}
.public-guide nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 18px 0;
}
.public-guide .guide-game-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.guide-game-list a {
  display: grid;
  gap: 6px;
}
.guide-game-list span {
  font-size: 15px;
  color: #e5efed;
  text-decoration: none;
}
.guide-example {
  margin: 20px 0;
}
.guide-example figure {
  margin: 0;
  min-width: 0;
}
.guide-example img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
}
.guide-example figcaption {
  font-size: 14px;
  margin-block: 6px 12px;
  text-align: start;
}
.guide-picture-grid,
.guide-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 560px;
  margin-inline: auto;
}
.guide-single-picture {
  max-width: 340px;
  margin-inline: auto;
}
.guide-example details {
  padding: 14px;
  margin-top: 14px;
  border: 1px solid #6c9188;
  border-radius: 12px;
}
.guide-example summary {
  cursor: pointer;
  font-weight: 700;
}
.guide-answer {
  font-size: 24px;
  font-weight: 700;
}
.guide-clues {
  padding-inline-start: 30px;
}
.guide-clues li {
  margin-block: 12px;
}
html[data-theme="light"] .public-guide {
  background: #fffdf3;
  color: #163d3c;
  border-color: #89a69d;
}
html[data-theme="light"] .public-guide a {
  color: #075a68;
}
html[data-theme="light"] .guide-game-list span {
  color: #163d3c;
}