/*
 * Block: help — the help page (help.html): menu on the left, one page with screenshots on the right.
 * A separate page from the game, so it has its own reset and does not load base.css.
 */

.help {
  --color-black: #000000;
  --color-white: #fcfcfc;
  --color-gray: #7c7c7c;
  --color-light-gray: #bcbcbc;
  --color-yellow: #f8b800;
  --color-red: #d82800;
  --color-navy: #0000bc;

  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  background: var(--color-black);
  color: var(--color-white);
  font-family: "DotGothic16", monospace;
  font-size: 16px;
  line-height: 1.6;
}

.help__header {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 24px;
  border-bottom: 2px solid var(--color-white);
}

.help__logo {
  color: var(--color-yellow);
  font-size: 24px;
  letter-spacing: 2px;
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--color-red);
}

.help__subtitle {
  color: var(--color-light-gray);
}

/* 日本語 / English switch */
.help__lang {
  margin-left: auto;
  color: var(--color-light-gray);
}

.help__play {
  padding: 2px 12px;
  border: 2px solid var(--color-white);
  border-radius: 4px;
  color: var(--color-white);
  text-decoration: none;
}

.help__play:hover,
.help__play:focus-visible {
  background: var(--color-white);
  color: var(--color-black);
}

.help__layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 1200px;
  padding: 24px;
}

/* Left menu: a DQ-style window that stays in view while the page scrolls */
.help__nav {
  position: sticky;
  top: 24px;
  flex-shrink: 0;
  width: 220px;
  padding: 8px;
  border: 2px solid var(--color-white);
  border-radius: 4px;
}

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

.help__link {
  position: relative;
  display: block;
  padding: 4px 8px 4px 24px;
  color: var(--color-white);
  text-decoration: none;
}

.help__link:hover,
.help__link:focus-visible {
  color: var(--color-yellow);
}

/* ▶ cursor on the current page, like the game's menus */
.help__link--active::before {
  position: absolute;
  top: 50%;
  left: 8px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--color-white);
  content: "";
  transform: translateY(-50%);
}

.help__link--active {
  color: var(--color-yellow);
}

.help__content {
  flex: 1;
  min-width: 0;
}

.help__page {
  margin-bottom: 48px;
}

.help__page--hidden {
  display: none;
}

.help__heading {
  margin: 0 0 16px;
  color: var(--color-yellow);
  font-size: 28px;
  font-weight: normal;
}

.help__subheading {
  margin: 24px 0 8px;
  color: var(--color-light-gray);
  font-size: 20px;
  font-weight: normal;
}

.help__text {
  max-width: 720px;
  margin: 0 0 12px;
}

.help__list {
  max-width: 720px;
  margin: 0 0 12px;
  padding-left: 24px;
}

.help__item {
  margin-bottom: 6px;
}

.help__inline-link {
  color: var(--color-yellow);
}

/* Key caps such as Enter, Esc, M */
.help__key {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--color-light-gray);
  border-radius: 3px;
  font-size: 14px;
  line-height: 20px;
}

.help__shots {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.help__shot {
  width: 100%;
  max-width: 320px;
  margin: 0 0 16px;
}

.help__image {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--color-gray);
  image-rendering: pixelated;
}

.help__caption {
  margin-top: 6px;
  color: var(--color-light-gray);
  font-size: 14px;
}

.help__table {
  max-width: 720px;
  margin: 8px 0 16px;
  border-collapse: collapse;
}

.help__cell {
  padding: 6px 12px;
  border: 1px solid var(--color-gray);
  text-align: left;
  vertical-align: top;
}

.help__cell--head {
  background: var(--color-navy);
  font-weight: normal;
}

/* Phones: the menu becomes a row of links above the page */
@media (width <= 720px) {
  .help__header {
    padding: 12px 16px;
  }

  .help__layout {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .help__nav {
    position: static;
    width: 100%;
    box-sizing: border-box;
  }

  .help__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .help__heading {
    font-size: 22px;
  }

  .help__table {
    font-size: 14px;
  }
}