/* The Lounge's "about" section: what a page is, in words a search engine reads too, folded under
   the first view behind one pill button and opened into the menu's cards and tiles. The look is
   minesweeper's title-about (puzzlelounge.app/mines/), made generic for every game and the hub.

   =============================================================================================
   MARKUP SPEC - what each game (and the hub) follows
   =============================================================================================

   1. Load it, before the page's own styles (it is served no-cache, so it is always the latest):

        <link rel="stylesheet" href="/shared/about.css" />

   2. Paste this right after the first view (inside the title screen if the game has one), and
      fill it in. Closed by default: no `open` on the <details>.

        <section class="lounge-about" aria-labelledby="about-what">
          <details class="about-fold">
            <summary class="about-open"><span class="about-q" aria-hidden="true">?</span><span>〇〇について</span></summary>
            <div class="about-body">
              <div class="about-card about-what">
                <h2 id="about-what">〇〇とは</h2>
                <p>What it is and how it is played, in two or three plain sentences.</p>
              </div>

              <h2 class="about-h">この〇〇の特徴</h2>
              <ul class="about-features">
                <li class="about-card"><span class="tile c-coral" aria-hidden="true">✓</span><span><b>Short title</b><small>One sentence.</small></span></li>
                ... four in all (two columns; one on a phone). A card may be a link instead:
                <li><a class="about-card" href="/mines/"><span class="tile c-green" aria-hidden="true">マ</span><span><b>…</b><small>…</small></span></a></li>
              </ul>

              <h2 class="about-h">難しさ（…）</h2>                     <- optional: grades/levels
              <ul class="about-tiles">
                <li><a class="about-card" href="./level/easy"><span class="tile c-green" aria-hidden="true">初</span><small>初級 9×9・地雷 10</small></a></li>
                ... up to five (three a row on a phone). A tile with no page of its own is a
                <span class="about-card"> instead of the <a>.
              </ul>

              <a class="about-card about-link" href="./how"><span class="tile c-green" aria-hidden="true">?</span><b>やり方・ルールとコツ</b><span class="arrow" aria-hidden="true">→</span></a>

              <h2 class="about-h">よくある質問</h2>
              <div class="about-faq">
                <details class="about-card"><summary>無料で遊べますか？</summary><p>はい。…</p></details>
                ... three to five.
              </div>
            </div>
          </details>
        </section>

      Tile colours: c-coral, c-yellow, c-blue, c-green, c-purple, c-navy, c-violet, c-teal, c-rose, c-ink. Translated pages put the
      game's data-t keys on the <h2>/<b>/<small>/<summary>/<p> and on the summary's second <span>.
      Mines' and nanpure's first names (.about-levels for .about-tiles, .about-how for .about-link)
      still work.

   3. Place it under the first view. Outside a grid it needs nothing. In a grid title screen
      (mines' #screen-title), give the first view the screen and the section the next row - the
      section already spans every column (grid-column: 1 / -1):

        #screen-title { grid-template-rows: minmax(calc(100dvh - 64px), auto) auto; }
        @media (max-width: 860px) { #screen-title { grid-template-rows: none; } }

      With no padding of its own around it (the hub), give it the page's side gutter:

        .lounge-about { --about-gutter: var(--gutter); }

   4. FAQPage JSON-LD in <head>, one Question per visible <details> in .about-faq, same order,
      `name` = the summary's text and `text` = the <p>'s text, character for character (no
      markup, no extra or missing questions). When a visible answer changes, change the JSON-LD
      in the same edit. Written in the page's own language (Japanese), whatever the reader's.

        <script type="application/ld+json">
          {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [
            {"@type": "Question", "name": "無料で遊べますか？",
             "acceptedAnswer": {"@type": "Answer", "text": "はい。…"}}
          ]}
        </script>

   Copy rules
   - Plain Japanese, said once. No filler ("ぜひ", "大人気", "最高の"), no keyword lists; every
     sentence tells a searcher something true about this game.
   - Headings: 「〇〇について」(button), 「〇〇とは」, 「この〇〇の特徴」(or 「特徴」),
     the grades heading with the real names in brackets, 「よくある質問」.
   - Features: four, each a bold title of a few words and one short sentence.
   - Say where play stops being free, exactly (the live lines, 2026-10):
       nanpure  むずかしい ch.4 から、鬼・極 ch.2 から、フリープレイのむずかしい以上 -> ラウンジパスかチケット
       mines    各難しさの 201 面から -> ラウンジパスかチケット
       tangram  500 問のうち 140 問まで無料
       nonogram 298 問のうち 94 問まで無料 -> ラウンジパスかチケット（1 枚でその道の次の 2 問）
       loop     400 問のうち 120 問まで無料（各道のはじめの 30 問） -> ラウンジパスかチケット（1 枚でその道の次の 5 / 4 / 3 / 2 問）
       pentomino 310 問のうち 125 問まで無料（やさしいはすべて、ふつう・むずかしいははじめの 30 問、鬼は 5 問） -> ラウンジパスかチケット（1 枚でその道の次の 7 / 3 / 1 問）
       colorlink 1269 問のうち 160 問まで無料（やさしいははじめの 60 問、ふつう・むずかしい・鬼は 30 問、極は 10 問） -> ラウンジパスかチケット（1 枚でその道の次の 5 / 4 / 3 / 3 / 2 問）
       jigsaw   108 ピースまで無料
     Tickets are free (毎日の受け取り・動画・今日の一問のクリアなどでもらえる) and never sold.
   - Plans: ラウンジパス 月額 500円・年額 5,000円（税込、はじめてなら 7 日間無料）; the first
     100 members (はじめのメンバー) keep 月額 300円・年額 3,000円 while they stay; 広告オフ
     月額 250円・年額 2,500円 (ads only, no trial). Signing in with Google is needed to subscribe.
   - Friends: say how (部屋を作って招待リンク/コードを送る、相手も登録不要) and the real limits.

   Theming: it reads the page's own tokens (--surface, --ink, --muted, --shadow, --shadow-lift,
   --accent-text, --c-*, --round), so a game's light and dark themes carry over with nothing
   more. To tint only this section, set the --about-* tokens below on .lounge-about.
   ============================================================================================= */

.lounge-about {
  --about-surface: var(--surface, #fff);
  --about-ink: var(--ink, #1e222a);
  --about-muted: var(--muted, #737a86);
  --about-shadow: var(--shadow, 0 1px 2px rgb(22 28 45 / 0.06), 0 6px 18px rgb(22 28 45 / 0.07));
  --about-shadow-lift: var(--shadow-lift, 0 2px 4px rgb(22 28 45 / 0.08), 0 14px 30px rgb(22 28 45 / 0.12));
  --about-link: var(--accent-text, #e2582c);
  --about-q: var(--c-green, #6cc46e);
  --about-round: var(--round, "Lounge Round", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif);
  --about-max: 880px;

  box-sizing: border-box;
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: calc(var(--about-max) + 2 * var(--about-gutter, 0px));
  margin: 0 auto 32px;
  padding-inline: var(--about-gutter, 0px);
  color: var(--about-ink);
  text-align: left;
}

.lounge-about *,
.lounge-about *::before,
.lounge-about *::after { box-sizing: border-box; }

/* Folded: one button, like the corner's. */
.lounge-about .about-open {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--about-surface);
  box-shadow: var(--about-shadow);
  color: var(--about-ink);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.lounge-about .about-open::-webkit-details-marker { display: none; }
.lounge-about .about-open::after { content: "▾"; margin-left: 2px; color: var(--about-muted); }
.lounge-about .about-fold[open] > .about-open::after { content: "▴"; }
.lounge-about .about-open:hover { box-shadow: var(--about-shadow-lift); }

.lounge-about .about-q {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--about-q);
  color: #fff;
  font-family: var(--about-round);
  font-weight: 900;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12);
}

/* The tiles, as the menus draw them (the page's own .tile may say more; this is all it needs). */
.lounge-about .tile {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 13px;
  color: #fff;
  font-family: var(--about-round);
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.12);
}

.lounge-about .c-coral { background: var(--c-coral, #ff8a5c); }
.lounge-about .c-yellow { background: var(--c-yellow, #f5b83d); }
.lounge-about .c-blue { background: var(--c-blue, #4aaef0); }
.lounge-about .c-green { background: var(--c-green, #6cc46e); }
.lounge-about .c-purple { background: var(--c-purple, #a68af2); }
.lounge-about .c-navy { background: var(--c-navy, #2f4a78); }
.lounge-about .c-violet { background: var(--c-violet, #6a52c9); }
.lounge-about .c-teal { background: var(--c-teal, #138a8a); }
.lounge-about .c-rose { background: var(--c-rose, #c2416b); }
.lounge-about .c-ink { background: var(--about-ink); color: var(--about-surface); }

/* Opened: the menu's cards and tiles. */
.lounge-about .about-body { display: grid; gap: 10px; margin-top: 16px; }

.lounge-about .about-card {
  border-radius: 18px;
  background: var(--about-surface);
  box-shadow: var(--about-shadow);
  color: var(--about-ink);
}

.lounge-about a.about-card { text-decoration: none; }

.lounge-about .about-what { padding: 16px 20px; }
.lounge-about h2 { margin: 0; color: var(--about-ink); font-family: var(--about-round); font-weight: 900; font-size: 17px; }
.lounge-about .about-what p { margin: 6px 0 0; color: var(--about-muted); font-size: 13.5px; line-height: 1.75; }
.lounge-about .about-h { margin-top: 10px; padding-left: 4px; }

.lounge-about .about-features,
.lounge-about .about-tiles,
.lounge-about .about-levels { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.lounge-about .about-features { grid-template-columns: repeat(2, 1fr); }
.lounge-about .about-features > li.about-card,
.lounge-about .about-features > li > .about-card { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px 16px; }
.lounge-about .about-features .tile { width: 38px; height: 38px; border-radius: 11px; font-size: 19px; }
.lounge-about .about-features b { display: block; font-family: var(--about-round); font-weight: 900; font-size: 15px; }
.lounge-about .about-features small { display: block; margin-top: 2px; color: var(--about-muted); font-size: 12px; line-height: 1.6; }

.lounge-about .about-tiles,
.lounge-about .about-levels { grid-template-columns: repeat(5, 1fr); }
.lounge-about :is(.about-tiles, .about-levels) .about-card { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 12px 6px; text-align: center; }
.lounge-about :is(.about-tiles, .about-levels) .tile { width: 42px; height: 42px; font-size: 20px; }
.lounge-about :is(.about-tiles, .about-levels) small { color: var(--about-muted); font-size: 11.5px; font-weight: 700; line-height: 1.4; }

.lounge-about :is(.about-features, .about-tiles, .about-levels) a.about-card:hover,
.lounge-about :is(.about-link, .about-how):hover { transform: translateY(-2px); }

.lounge-about :is(.about-link, .about-how) { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; transition: transform 0.15s; }
.lounge-about :is(.about-link, .about-how) .tile { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
.lounge-about :is(.about-link, .about-how) .arrow { margin-left: auto; color: var(--about-link); }

.lounge-about .about-faq { display: grid; gap: 8px; }
.lounge-about .about-faq details { padding: 12px 16px; }
.lounge-about .about-faq summary { font-weight: 800; font-size: 14px; cursor: pointer; }
.lounge-about .about-faq p { margin: 8px 0 0; color: var(--about-muted); font-size: 13px; line-height: 1.7; }
.lounge-about .about-faq a { color: var(--about-link); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lounge-about :is(.about-link, .about-how) { transition: none; }
}

/* A phone: one column of features, the tiles three a row. */
@media (max-width: 860px) {
  .lounge-about .about-features { grid-template-columns: 1fr; }
  .lounge-about .about-tiles,
  .lounge-about .about-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lounge-about :is(.about-tiles, .about-levels) .about-card { padding: 10px 4px; }
  .lounge-about :is(.about-tiles, .about-levels) .tile { width: 36px; height: 36px; font-size: 17px; }
  .lounge-about :is(.about-tiles, .about-levels) small { font-size: 11px; }
}