/* 白地に細い線で区切る、ウェブメディア風のデザイン。グラデーションと影は使わない。
   赤(--accent)は見出しの印・メニューの現在地・ページ送りの現在地・主なボタンにだけ使う。
   自作ゲームの CSS と src/static/js/stripkit.js が --accent --accent-dark --link --dark --sub を使うので、名前と意味は変えないこと。
   書体 IBM Plex Sans JP は /fonts/ibm-plex-sans-jp.css(build.py が <head> で読む)で、このサイトに置いたものを使う */

:root {
  --bg: #fff;
  /* フッター・注記・紹介ページの遊ぶ欄の面 */
  --bg-sub: #f5f5f2;
  /* サムネイルの枠の地。tools/fetch_ext_thumbs.py が横長バナーの余白に使う色(233, 233, 228)とそろえる */
  --thumb-bg: #e9e9e4;
  --panel: #fff;
  /* 区切りの細い線 */
  --line: #e2e2dd;
  --line-strong: #c9c9c3;
  --text: #1b1b1b;
  --text-2: #4a4a4a;
  /* 日付・件数・注記などの小さい文字。上の帯やフッターの地(--bg-sub)の上でも差が 4.5:1 以上になる濃さ */
  --sub: #6e6e6e;
  --link: #1f4fa3;
  --accent: #c4122f;
  --accent-dark: #9d0e25;
  --dark: #1e1e1e;
  /* キーボード操作の位置を示す枠(墨色) */
  --focus: #1b1b1b;
  /* 対応端末のラベル(PC向け・スマホ向け)の地の色。白い文字との差が十分ある濃さ */
  --pc: #1f4fa3;
  --sp: #1c6e45;
  /* 評価の星(文字の★☆)。控えめな金色で、白地と --bg-sub の地のどちらでも差が 3:1 以上になる濃さ */
  --star: #a87c0c;
  /* 平均点の星の、点数に届かない部分(点数は数字でも出すので薄くてよい) */
  --star-off: #dcdcd6;
  /* 評価のボタンの、選んでいない星(☆) */
  --star-empty: #8a8a85;
  --font: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  /* 本文の最大幅(.wrap と、メニューの .gnav .wrap で使う) */
  --wrap-max: 1160px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration: none;
}

/* キーボード操作の位置。ブラウザ標準の枠の代わりに、少し離した墨色の細い枠にする */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 600px) {
  .wrap {
    padding: 0 16px;
  }
}

/* ---- ヘッダー / メニュー / フッター ---- */

.top-note {
  margin: 0;
  padding: 4px 16px;
  background: var(--bg-sub);
  color: var(--sub);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  align-items: baseline;
  padding-top: 22px;
  padding-bottom: 18px;
}

.site-logo {
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.logo-mark {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 5px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  vertical-align: 5px;
}

.site-sub {
  margin: 0;
  color: var(--sub);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.gnav {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.gnav::-webkit-scrollbar {
  display: none;
}

/* 項目が収まる幅では本文と同じ幅(右端の補助項目が本文の右端にそろう)。
   収まらない幅(スマホなど)では中身の幅まで広げ、メニューの枠の中で横にスクロールさせる。
   そのとき右の余白(padding)もスクロールの範囲に入るので、最後の項目が画面の端に貼りつかない */
.gnav .wrap {
  display: flex;
  gap: 26px;
  width: max-content;
  min-width: min(100%, var(--wrap-max));
  max-width: none;
}

.gnav a {
  position: relative;
  display: block;
  flex: none;
  padding: 13px 0 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.gnav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
}

@media (hover: hover) {
  .gnav a:hover::after {
    background: var(--line-strong);
  }
}

/* メニューは横スクロールの枠で外側が切れるので、枠を内側に描く */
.gnav a:focus-visible {
  outline-offset: -2px;
}

/* 現在地 */
.gnav a.is-current {
  font-weight: 700;
}

.gnav a.is-current::after {
  background: var(--accent);
}

/* リンク集・このサイトについて。ゲームを探す項目と分け、右端に小さく灰色で出す。
   行の高さは他の項目とそろえる(14px × 1.5) */
.gnav a.nav-sub {
  color: var(--sub);
  font-size: 12.5px;
  line-height: 21px;
}

.gnav a:not(.nav-sub) + .nav-sub {
  margin-left: auto;
}

/* 区切りの縦線。スマホなどでメニューが横に流れて右端に寄せられないときも、ここで分かれていると分かるように */
.gnav a:not(.nav-sub) + .nav-sub::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 1px;
  height: 14px;
  margin-top: -7px;
  background: var(--line-strong);
}

.gnav a.nav-sub.is-current {
  color: var(--text);
}

.site-footer {
  padding: 36px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg-sub);
  color: var(--sub);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

.site-footer p {
  margin: 2px 0;
}

.site-footer a {
  color: var(--text-2);
}

.site-footer p:last-child {
  margin-top: 16px;
  color: var(--text-2);
  letter-spacing: 0.05em;
}

@media (max-width: 600px) {
  .site-header .wrap {
    display: block;
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .site-logo {
    font-size: 22px;
  }

  .logo-mark {
    margin-right: 8px;
    vertical-align: 4px;
  }

  .site-sub {
    margin-top: 2px;
    font-size: 11.5px;
  }

  .gnav .wrap {
    gap: 22px;
  }

  .gnav a:not(.nav-sub) + .nav-sub::before {
    left: -11px;
  }
}

/* ---- 2カラム ---- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
  margin: 32px 0 72px;
}

.main {
  min-width: 0;
}

.side-box {
  margin-bottom: 40px;
}

.side-box h2 {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.side-box h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--accent);
}

.side-box p {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.85;
}

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

.side-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
}

.side-list a {
  color: var(--text);
  text-decoration: none;
}

.side-list a:hover {
  text-decoration: underline;
}

.side-list span {
  flex: none;
  color: var(--sub);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* タグは枠を付けず、名前と件数を詰めて並べる。件数の上を押してもリンクになるようにする */
.side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
}

.side-tags li {
  position: relative;
  gap: 5px;
  justify-content: flex-start;
  padding: 4px 0;
  border: 0;
}

.side-tags a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.side-tags li:hover a {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .layout {
    gap: 36px;
  }
}

@media (max-width: 800px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin: 20px 0 48px;
  }

  .side {
    padding-top: 36px;
    border-top: 1px solid var(--line);
  }
}

/* ---- 見出し / 文章 ---- */

.page-title {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  /* 日本語の文節の切れ目で改行し、行の長さをそろえる(対応ブラウザのみ) */
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  text-wrap: balance;
}

.lead {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.9;
}

.hd,
.doc h2 {
  position: relative;
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 見出しの印。下線の左端だけを赤くする */
.hd::after,
.doc h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--accent);
}

/* 見出しの行頭のかぎかっこ「」の前の空きを詰める(対応ブラウザのみ) */
.page-title,
.hd,
.doc h2,
.game-title {
  text-spacing-trim: trim-start;
}

.main p {
  margin: 0 0 12px;
}

/* 紹介文などの読ませる文章は少し大きく、行間を広めにする */
.main section > p,
.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.95;
}

/* 段落の最後の行が1〜2文字だけにならないようにする(対応ブラウザのみ) */
.lead,
.main section > p,
.main .game-summary,
.doc p,
.doc li,
.external > p {
  text-wrap: pretty;
}

.doc ul {
  margin: 0 0 12px;
  padding-left: 1.4em;
}

.doc li {
  margin-bottom: 6px;
}

.breadcrumb {
  margin-bottom: 16px;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.6;
}

.breadcrumb a {
  color: var(--sub);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text);
  text-decoration: underline;
}

.main .count {
  margin: -6px 0 18px;
  color: var(--sub);
  font-size: 12.5px;
}

/* 一覧の見出し(新着ゲームなど)と件数を1行にまとめ、件数を右に寄せる。
   下線と赤い印は見出しではなくこの行に引く */
.list-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.list-head .hd {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
}

.main .list-head .count {
  margin: 0 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.75;
}

.spec th,
.spec td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.spec th {
  width: 10em;
  padding-right: 16px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .page-title {
    font-size: 22px;
  }

  .hd,
  .doc h2 {
    margin-top: 40px;
    font-size: 18px;
  }

  .list-head {
    margin-top: 32px;
  }

  .list-head .hd {
    margin: 0;
  }

  .main section > p,
  .doc p,
  .doc li {
    font-size: 15px;
    line-height: 1.9;
  }

  .spec th {
    width: 7.5em;
    white-space: normal;
  }
}

/* ---- ボタン ---- */

.btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .btn:hover {
    border-color: var(--accent-dark);
    background: var(--accent-dark);
  }
}

.btn:disabled {
  border-color: #d9d9d4;
  background: #e8e8e4;
  color: #9a9a95;
  cursor: not-allowed;
}

.btn-sub {
  border-color: var(--line-strong);
  background: #fff;
  color: var(--text);
}

.btn-sub:hover {
  border-color: #8f8f8a;
  background: var(--bg-sub);
}

/* ---- 広告枠 ---- */

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  margin: 16px auto;
  overflow: hidden;
  text-align: center;
}

.ad {
  margin: 32px auto 24px;
  text-align: center;
}

.ad-label {
  display: block;
  color: var(--sub);
  font-size: 11px;
}

.ad .ad-slot {
  margin: 2px auto 0;
}

/* 広告タグ未設定の間だけ枠を表示する */
.ad-slot:empty {
  border: 1px dashed var(--line-strong);
  background: var(--bg-sub);
  color: var(--sub);
  font-size: 12px;
}

.ad-slot:empty::before {
  content: attr(data-label);
}

.side .ad-slot {
  min-height: 250px;
  margin-top: 0;
  margin-bottom: 40px;
}

/* ---- 年齢確認 ---- */

/* 未確認の間は画面全体を覆う。本文はDOMに残すので検索エンジンからは読める。
   後ろのサイトはうっすら見えるが、画像の中身までは分からない程度にぼかす */
html.age-locked {
  overflow: hidden;
}

html.age-locked::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* 開いた直後はダイアログ自体にフォーカスがある(agegate.js)。ここには枠を出さず、Tab で移ったボタンにだけ出す */
#age-gate:focus {
  outline: none;
}

.age-gate-box {
  width: 100%;
  max-width: 400px;
  padding: 30px 28px 28px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  background: #fff;
  text-align: center;
}

.age-gate-box p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.9;
}

.age-gate-box .age-gate-site {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.age-gate-box .age-gate-mark {
  display: inline-block;
  margin: 0 0 8px;
  padding: 1px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

/* 年齢確認の見出し。ページの h1 が2つにならないよう p にしている(agegate.js) */
.age-gate-box .age-gate-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.age-gate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.age-gate-actions .btn {
  padding: 10px 8px;
}

/* ---- ゲーム一覧 ---- */

/* PC: 画像を大きめに見せるカードをメイン欄に2列。
   スマホ(600px以下): 左に画像、右にラベルと題名を置いた横並びを1列(下の @media) */
.game-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 40px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.game-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--thumb-bg);
  text-decoration: none;
}

/* 白っぽい画像でも輪郭が分かるよう、ごく薄い枠を重ねる */
.game-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.07);
  pointer-events: none;
}

.game-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .game-thumb:hover img {
    opacity: 0.85;
  }
}

/* 画像を載せない外部作品の、サムネイル代わりのジャンル名。
   ジャンル(先頭のタグ)ごとに淡い地の色と文字の色を変え、細い内枠を付ける。文字の色はどれも地の色との差が 4.5:1 以上 */
.thumb-text {
  --ph: #ecebe6;
  --ph-ink: #5f5e57;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  background: var(--ph);
  color: var(--ph-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

.thumb-text::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  opacity: 0.3;
}

.thumb-puzzle,
.thumb-picture {
  --ph: #e4ebf3;
  --ph-ink: #395a80;
}

.thumb-action {
  --ph: #f4e8e5;
  --ph-ink: #92473b;
}

.thumb-card,
.thumb-memory {
  --ph: #e4eee8;
  --ph-ink: #396b50;
}

.thumb-mini {
  --ph: #f3ede0;
  --ph-ink: #765c22;
}

.thumb-quiz,
.thumb-voice {
  --ph: #ebe8f2;
  --ph-ink: #584c83;
}

.thumb-shooting {
  --ph: #e2eeef;
  --ph-ink: #2d676d;
}

.thumb-simulation {
  --ph: #edefe2;
  --ph-ink: #5a6430;
}

.thumb-rpg {
  --ph: #e7e9f3;
  --ph-ink: #434d88;
}

.thumb-novel,
.thumb-datsui {
  --ph: #f4e6eb;
  --ph-ink: #8d4560;
}

.thumb-reward {
  --ph: #f5ebe1;
  --ph-ink: #87532a;
}

.thumb-classic {
  --ph: #e8ecef;
  --ph-ink: #4b5866;
}

/* 本文。HTML の並びは 題名・紹介文・ラベル・タグ・追加日 のまま(検索エンジンや読み上げにはこの順で伝わる)。
   表示は 1行目にラベルと追加日(右端)、その下に題名・紹介文・タグ。タグの行はカードの下端にそろえる。
   rating は一覧ページで reviews.js が題名の下に入れる評価(評価の無い作品では空の行になり、高さを取らない) */
.game-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas:
    "labels date"
    "title title"
    "rating rating"
    "summary summary"
    "meta meta";
  column-gap: 8px;
  min-width: 0;
  padding-top: 14px;
}

.main .game-labels {
  grid-area: labels;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 8px;
}

/* 追加日はラベルと同じ行の右端に小さく出す。行の高さはラベル(20px + 上下の線)とそろえる */
.main .game-date {
  grid-area: date;
  margin: 0;
  color: var(--sub);
  font-size: 12px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.game-title {
  grid-area: title;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.game-title a {
  color: var(--text);
  text-decoration: none;
}

.game-title a:hover {
  text-decoration: underline;
}

.main .game-summary {
  grid-area: summary;
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

.main .game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 24px;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.6;
}

.main .game-body .game-meta {
  grid-area: meta;
  align-self: end;
  margin: 0;
}

.game-meta time {
  font-variant-numeric: tabular-nums;
}

.label,
.tag {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.label-play {
  border-color: var(--text);
  background: var(--text);
  color: #fff;
  font-weight: 700;
}

.label-pr {
  color: var(--sub);
}

/* 対応端末。PC・スマホのどちら向けかが一覧でも分かるよう、アイコンと太字で目立たせる。
   PC・スマホ両方は枠線、PC向けは青地、スマホ向けは緑地、未確認は点線 */
.label-platform {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M1.5 1.5h13v8h-13z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5 13h6M8 10v3' stroke='%23000' stroke-width='1.5'/%3E%3Crect x='19.25' y='.75' width='7.5' height='12.5' rx='1.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M22 10.5h2' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --icon-width: 24px;
  border-color: currentColor;
  color: var(--text);
  font-weight: 700;
}

.label-platform::before {
  content: "";
  flex: none;
  width: var(--icon-width);
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.label-pc {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1.5 1.5h13v8h-13z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5 13h6M8 10v3' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --icon-width: 14px;
  border-color: var(--pc);
  background: var(--pc);
  color: #fff;
}

.label-sp {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Crect x='1.25' y='.75' width='7.5' height='12.5' rx='1.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M4 10.5h2' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --icon-width: 9px;
  border-color: var(--sp);
  background: var(--sp);
  color: #fff;
}

.label-unknown {
  border-color: var(--line-strong);
  border-style: dashed;
  color: var(--sub);
  font-weight: 400;
}

.label-unknown::before {
  display: none;
}

.tag {
  border-color: var(--line);
  font-size: 12px;
  text-decoration: none;
}

.tag:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

/* 紹介ページの題名の下。1行目に遊び方と対応端末、2行目にタグと追加日を出す。
   HTML は1つの段落のまま、幅いっぱいの空の要素(::before)を間に並べて改行させる */
.page-title + .game-meta {
  row-gap: 4px;
  margin-bottom: 28px;
}

.page-title + .game-meta::before {
  content: "";
  order: 1;
  flex-basis: 100%;
}

.page-title + .game-meta .tag,
.page-title + .game-meta time {
  order: 2;
}

.page-title + .game-meta time {
  margin-left: 4px;
}

.device-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
  padding: 10px 14px;
  background: var(--bg-sub);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.device-note .btn {
  padding: 4px 12px;
  font-size: 13px;
}

/* スマホ: 左に 16:9 の画像、右にラベル・題名・(評価)・追加日。紹介文とタグはその下に全幅で出す。
   .game-body の中身をそのまま .game-item の格子に並べる(display: contents) */
@media (max-width: 600px) {
  .game-list {
    display: block;
  }

  .game-item {
    display: grid;
    grid-template-columns: clamp(120px, 36vw, 144px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas:
      "thumb labels"
      "thumb title"
      "thumb rating"
      "thumb date"
      "summary summary"
      "meta meta";
    column-gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  .game-list > .game-item:first-child {
    padding-top: 0;
  }

  .game-body {
    display: contents;
  }

  .game-thumb {
    grid-area: thumb;
    align-self: start;
  }

  .main .game-labels {
    gap: 4px;
    margin: 0 0 5px;
  }

  .main .game-labels .label {
    gap: 4px;
    padding: 0 5px;
    font-size: 11px;
  }

  .game-title {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.45;
  }

  .main .game-date {
    align-self: start;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
  }

  .main .game-summary {
    margin: 10px 0 8px;
    font-size: 13.5px;
    line-height: 1.75;
  }

  .thumb-text {
    padding: 0 8px;
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .thumb-text::before {
    inset: 5px;
  }
}

/* ---- リンク集 ---- */

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

.link-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.link-list a {
  font-size: 15px;
  font-weight: 700;
}

.main .link-list p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

/* ---- ページ送り ---- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 48px 0 8px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.pagination a:hover {
  border-color: var(--text);
}

/* 現在地 */
.pagination .is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* ---- 外部ゲーム紹介 ---- */

.external {
  padding: 22px 24px 24px;
  background: var(--bg-sub);
}

.external-thumb {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 6px;
}

.main .external-credit {
  margin: 0 0 16px;
  color: var(--sub);
  font-size: 12px;
}

.external > p:not(.external-credit) {
  color: var(--text);
  font-size: 15px;
  line-height: 1.9;
}

/* 遊ぶボタン。1行目に「このゲームを遊ぶ」、2行目に移動先を小さく。どちらの行も文の途中で折り返さない */
.external .btn-play {
  display: inline-block;
  min-width: 320px;
  margin-top: 6px;
  padding: 11px 28px 10px;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

.btn-note {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .external {
    padding: 18px 16px 16px;
  }

  .external .btn-play {
    display: block;
    min-width: 0;
    padding: 11px 12px 10px;
  }
}

/* ---- 評価・口コミ ---- */

/* 紹介ページの #reviews の中身と、一覧の評価は reviews.js が作る(API の応答が無いときは何も出さない) */

/* 読み上げにだけ伝える文字 */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* 一覧の各作品の「★4.2(12)」。評価がある作品だけ、題名の下(格子の rating の行)に入る */
.main .game-rating {
  grid-area: rating;
  margin: -2px 0 8px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.game-rating-star {
  margin-right: 2px;
  color: var(--star);
}

.game-rating-count {
  margin-left: 1px;
  color: var(--sub);
  font-size: 12px;
}

/* 平均点などの星(読み取り専用)。灰色の★5つの上に、点数の分の幅だけ金色の★を重ねる */
.stars {
  position: relative;
  display: inline-block;
  color: var(--star-off);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.stars-on {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--star);
}

.stars-lg {
  font-size: 22px;
}

.stars-sm {
  font-size: 13px;
}

/* 上の段。PC は左にみんなの評価、右に「このゲームを評価する」。スマホは縦に並べる */
.review-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 20px 24px;
  background: var(--bg-sub);
}

.review-rate {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.main .review-label {
  margin: 0 0 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.main .review-score-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin: 0;
}

.review-avg {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.review-count {
  color: var(--sub);
  font-size: 13px;
}

.main .review-none {
  margin: 0;
  color: var(--sub);
  font-size: 14px;
}

/* 評価のボタン(☆を押すと★になる)。1つ目の星の左の余白の分だけ左へずらし、上の文字の左端にそろえる */
.rate-stars {
  display: flex;
  margin-left: -6px;
}

.rate-star {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--star-empty);
  font: inherit;
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
  cursor: pointer;
}

.rate-star.is-on {
  color: var(--star);
}

.rate-star:focus-visible {
  outline-offset: -2px;
}

/* 送った結果やエラーの一言。文が出ても下が動かないよう、1行分の高さを取っておく */
.main .review-status {
  min-height: 1.6em;
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.main .review-status.is-error {
  color: var(--accent-dark);
}

/* 小見出し(口コミ / 口コミを書く) */
.reviews .review-hd {
  margin: 36px 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.review-hd-count {
  margin-left: 8px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 400;
}

.main .review-more {
  color: var(--sub);
  font-size: 12.5px;
}

.review-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.review-item {
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--line);
}

.main .review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: center;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
}

.review-name {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.review-date {
  color: var(--sub);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* 口コミの本文。改行はそのまま出し、長い英数字の続きも枠からはみ出さないよう折り返す */
.main .review-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* 通報。普段は右下に小さく「通報」とだけ出し、押すと確かめる文とボタンに変わる */
.review-report {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: flex-end;
  min-height: 28px;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.6;
}

.review-report-open {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--sub);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.review-report-open:hover {
  color: var(--text);
}

.review-report .btn {
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 400;
}

.review-report-error {
  color: var(--accent-dark);
}

.review-form {
  max-width: 640px;
}

.main .review-note {
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.8;
}

.review-field {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.review-field > label,
.review-field > legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.review-hint {
  margin-left: 2px;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 400;
}

/* 入力欄の文字は 16px(iPhone で入力欄を押したときに画面が拡大されないように) */
.review-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
}

.review-input:focus {
  border-color: var(--text);
}

.review-input::placeholder {
  color: var(--sub);
}

.review-input-name {
  max-width: 16em;
}

.review-textarea {
  min-height: 8.5em;
  resize: vertical;
}

.main .review-remain {
  margin: 4px 0 0;
  color: var(--sub);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 400字を超えたとき(「○字オーバー」) */
.main .review-remain.is-over {
  color: var(--accent-dark);
}

/* 口コミの星(任意)。ラジオボタン本体は見えなくして、ラベルを「なし」と星の形で見せる */
.review-pick {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.review-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.review-pick label {
  cursor: pointer;
}

.review-pick-none {
  margin-right: 8px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fff;
  color: var(--text-2);
  font-size: 13px;
  line-height: 30px;
}

.review-pick-none.is-on {
  border-color: var(--text);
  color: var(--text);
  font-weight: 700;
}

.review-pick-star {
  width: 36px;
  color: var(--star-empty);
  font-size: 26px;
  line-height: 36px;
  text-align: center;
}

.review-pick-star.is-on {
  color: var(--star);
}

.review-pick input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* 機械的な投稿を見分けるための、人には見えない欄。画面の外に置く(読み上げにも出さない) */
.review-trap {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.review-submit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.review-submit .btn {
  min-width: 8em;
}

.main .review-submit .review-status {
  margin: 0;
}

@media (max-width: 600px) {
  .main .game-rating {
    align-self: start;
    margin: 3px 0 0;
    font-size: 12px;
  }

  .review-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .review-rate {
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .reviews .review-hd {
    margin-top: 32px;
    font-size: 16px;
  }

  .main .review-body {
    font-size: 14.5px;
  }
}

/* 指で押すもの(通報のボタン)は高さを 32px 以上にする。「通報」は2字で幅が 24px しかないので、
   左右にも押せる範囲を広げる(右の余白を負にして、文字の位置は変えない) */
@media (pointer: coarse) {
  .review-report-open,
  .review-report .btn {
    min-height: 32px;
  }

  .review-report-open {
    margin-right: -8px;
    padding: 4px 8px;
  }
}


/* ---- 自作ゲーム共通: ステージ選択 ---- */

/* PCのメイン欄(約760px)で4枚がちょうど1行に並ぶ幅。狭いスマホでも2列を保つ */
.stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(50% - 5px)), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.stage-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  background: var(--thumb-bg) center / cover no-repeat;
  color: var(--sub);
  font-size: 12px;
}

button.stage-thumb {
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.stage-info strong {
  display: block;
  letter-spacing: 0.04em;
}

.stage-info span {
  color: var(--sub);
  font-size: 12px;
}

/* ---- 自作ゲーム共通: プレイ画面 ---- */

.game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 8px;
  font-size: 14px;
}

.game-hud .btn,
#hud-stage {
  flex: none;
}

.game-hud .btn {
  padding: 5px 10px;
  font-size: 13px;
}

.hud-info {
  color: var(--accent);
  font-weight: bold;
  /* 数値が動いても隣の文字が揺れないように */
  font-variant-numeric: tabular-nums;
}

/* .main p の余白指定に負けないよう .main を付ける */
.main .game-tools {
  margin: 10px 0 0;
  text-align: center;
}

.board {
  display: grid;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #333;
  background: #ddd center / cover no-repeat;
  touch-action: manipulation;
}

/* 神経衰弱のカード */
.card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 0;
  background: #2f3e5c;
  box-shadow: inset 0 0 0 4px #3d4f73;
  color: #222;
  font-size: clamp(1.2rem, 7vw, 2.2rem);
  cursor: pointer;
  transition: opacity 0.4s;
}

.card.is-open {
  background: #fff;
  box-shadow: none;
  cursor: default;
}

.card.is-matched {
  opacity: 0;
  pointer-events: none;
}

/* 絵合わせのピース */
.tile {
  position: relative;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  background-color: #ddd;
  background-repeat: no-repeat;
  cursor: pointer;
}

.tile.is-selected {
  z-index: 1;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.board.is-sample .tile {
  opacity: 0;
}

.board.is-done .tile {
  border-color: transparent;
  cursor: default;
}

/* 盤面の中のカードやピースは、隣や盤面の枠に隠れないよう内側に枠を描く */
.board :focus-visible {
  outline-offset: -3px;
}

.howto {
  margin: 0;
  padding-left: 1.5em;
  font-size: 15px;
  line-height: 1.85;
}

.howto li {
  margin-bottom: 6px;
}

/* ---- モーダル ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.7);
}

.modal-box {
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  padding: 16px;
  overflow-y: auto;
  border-top: 3px solid var(--accent);
  background: #fff;
  text-align: center;
}

.modal-box h2 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: 0.04em;
}

/* 結果の文は各ゲームが改行で2行に分けられるようにする */
#modal-text {
  white-space: pre-line;
}

.modal-image {
  display: block;
  width: 100%;
  margin: 0 auto 10px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ---- タッチ端末 ---- */

/* 指で押すもの(カードや紹介ページのタグ、サイドバーのタグ)は高さを 32px 以上にし、間を 8px ほど空ける */
@media (pointer: coarse) {
  .tag {
    min-height: 32px;
    padding: 0 10px;
  }

  .main .game-meta {
    gap: 8px;
  }

  .page-title + .game-meta {
    row-gap: 4px;
  }

  .side-tags {
    gap: 4px 20px;
  }

  .side-tags li {
    padding: 6px 0;
  }
}

/* ---- SEO 対応で足したもの(seo/spec.md) ---- */

/* 自作ゲームの枠の大きさ。stripkit.js が JS で足していたものをここに移した。
   ゲームのスクリプトは年齢確認のあとで読み込むので、それより前から枠の大きさを決めておく(読み込み後に枠が縮まない) */
.sk-wrap {
  margin: 0 0 20px;
}

#sk-game {
  position: relative;
  width: 100%;
  /* stripkit.js が足していた値と同じにする(2026-10-01 16:30 の版で 100vh - 24px)。PC でもゲーム全体が画面の高さに収まる */
  max-width: min(100%, calc((100vh - 24px) * 0.75));
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  background: #1b1a18;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#sk-game canvas {
  display: block;
}

/* 一覧で、使っている端末では遊べない作品を隠す。<html> のクラスは device-class.js が最初の描画の前に付ける */
.device-note[data-for] {
  display: none;
}

.dev-sp .device-note[data-for="sp"],
.dev-pc .device-note[data-for="pc"] {
  display: flex;
}

.dev-sp:not(.dev-all) .device-filter .game-item[data-platform="pc"],
.dev-pc:not(.dev-all) .device-filter .game-item[data-platform="sp"] {
  display: none;
}

.device-note .when-all,
.dev-all .device-note .when-hidden {
  display: none;
}

.dev-all .device-note .when-all {
  display: inline;
}

/* /sp/ の一覧の「スマホ: 〜」(games.json の spNote) */
.game-note {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 13px;
}

/* 外部作品の感想の「〜に遊んだときの内容です」(.review-date は評価・口コミの投稿日に使っているので別の名前にする) */
.main .review-asof {
  color: var(--sub);
  font-size: 13px;
}