/* レイアウト。色や文字は theme.css が変数で決める */

:root {
  --color-bg: #ffffff;
  --color-surface: #f4f4f4;
  --color-pressed: #e4e4e4;
  --color-text: #222222;
  --color-muted: #666666;
  --color-accent: #3366cc;
  --color-accent-pressed: #2855aa;
  --color-accent-2: #cc3366;
  --color-border: #dddddd;
  --color-on-accent: #ffffff;
  /* 最初の画面のアイコンのボタン */
  --color-button-from: #3366cc;
  --color-button-to: #2855aa;
  --color-button-pressed: #1f4488;
  --color-on-button: #ffffff;
  /* 作品カードにマウスを乗せたときの、背景と文字を入れ替えた色 */
  --color-invert-bg: #222222;
  --color-invert-pressed: #444444;
  --color-invert-text: #ffffff;
  --color-invert-muted: #dddddd;
  --font-body: system-ui, sans-serif;
  --font-heading: system-ui, sans-serif;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --header-height: 64px;
  --gutter: clamp(16px, 4vw, 32px);
  /* 余白はこの段階から選ぶ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  /* 文字の大きさはこの段階から選ぶ。ドット文字（--font-heading）は 16px の方眼で作られているので、
     ドットの角がくっきり出る 16px の倍数（1rem / 2rem / 3rem / 4rem）だけで使う */
  --fs-display: 3rem;
  --fs-title: 2rem;
  --fs-h2: 2rem;
  --fs-logo: 2rem;
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  /* 押せる部品の最小の高さ（HIG の既定 44pt） */
  --hit-min: 44px;
  --focus-ring: 2px solid var(--color-accent);
  /* 選んでいる部品を囲むカギ形の枠（ゲームのカーソル風）。四隅の線は背景の線を8本重ねて描く。
     線の色は、使う部品の color で決める */
  --cursor-corner: 10px;
  --cursor-line: 2px;
  --cursor-brackets:
    linear-gradient(currentColor 0 0) top left / var(--cursor-corner) var(--cursor-line) no-repeat,
    linear-gradient(currentColor 0 0) top left / var(--cursor-line) var(--cursor-corner) no-repeat,
    linear-gradient(currentColor 0 0) top right / var(--cursor-corner) var(--cursor-line) no-repeat,
    linear-gradient(currentColor 0 0) top right / var(--cursor-line) var(--cursor-corner) no-repeat,
    linear-gradient(currentColor 0 0) bottom left / var(--cursor-corner) var(--cursor-line) no-repeat,
    linear-gradient(currentColor 0 0) bottom left / var(--cursor-line) var(--cursor-corner) no-repeat,
    linear-gradient(currentColor 0 0) bottom right / var(--cursor-corner) var(--cursor-line) no-repeat,
    linear-gradient(currentColor 0 0) bottom right / var(--cursor-line) var(--cursor-corner) no-repeat;
}

@media (min-width: 600px) {
  :root {
    --fs-display: 4rem;
    --fs-title: 3rem;
  }
}

@media (min-width: 960px) {
  :root {
    --fs-title: 4rem;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  /* スマートフォンを横向きにしたときに、ブラウザが文字を勝手に大きくしないようにする */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.8;
  /* 日本語の本文が詰まって見えないよう、文字の大きさの 4% の間隔をあける */
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

/* スマートフォンで押したとき、ダブルタップの拡大を待たずにすぐ反応させる */
a,
button,
input,
textarea {
  touch-action: manipulation;
}

/* キーボードで移動したときに、今いる場所がはっきり分かるようにする */
a:focus-visible,
button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.3;
  /* 行末に1〜2文字だけ残らないよう、行の長さをそろえて折り返す */
  text-wrap: balance;
}

/* ドット文字は、文字の間隔を足すとドットの位置が半端になり、太字にすると無理に太らせた形になってにじむ。
   どちらも付けない（この書体には普通の太さしかない） */
.site-logo,
.title-screen__copy,
.hero__name,
.section__title,
.status-card {
  font-weight: 400;
  letter-spacing: 0;
}

.container {
  width: 100%;
  max-width: calc(1040px + var(--gutter) * 2);
  margin: 0 auto;
  /* ノッチのあるスマートフォンを横向きにしたときも、左右の余白を確保する */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* 押したときの見た目。動きを減らす設定のときは縮めない。
   押したときの色は :active で付けるので、ブラウザが重ねる灰色の四角は出さない */
.nav-toggle,
.site-nav__list a,
.contact__link {
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:active,
.site-nav__list a:active,
.contact__link:active {
  transform: scale(0.97);
}

/* ヘッダー */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  font-family: var(--font-heading);
  font-size: var(--fs-logo);
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

/* ドット文字のロゴ（2rem で幅 288px ほど）が横に収まらない幅では、本文の書体の太字にして小さくする。
   ドット文字は 16px の倍数でないとドットが崩れ、1rem まで下げるとメニューの文字と見分けがつかないため。
   収まらないのは、メニューを開閉ボタンにする幅のうち 399px 以下と、メニューを横に並べる幅のうち 879px 以下 */
@media (max-width: 399px), (min-width: 768px) and (max-width: 879px) {
  .site-logo {
    font-family: var(--font-body);
    font-weight: 700;
  }
}

@media (max-width: 399px) {
  .site-logo {
    font-size: 1.25rem;
  }
}

/* メニューの項目と並ぶので、もう一段小さくする */
@media (min-width: 768px) and (max-width: 879px) {
  .site-logo {
    font-size: 1.125rem;
  }
}

.site-nav__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  /* 「プロフィ/ール」のように項目の途中で折り返さない */
  white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  background: var(--color-surface);
  color: var(--color-accent);
}

.site-nav__list a:active {
  background: var(--color-pressed);
}

.nav-toggle {
  display: none;
  width: var(--hit-min);
  height: var(--hit-min);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--color-accent);
}

.nav-toggle:active {
  background: var(--color-pressed);
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--color-text);
}

/* 今見ている節のメニュー項目。色でも示すので、枠が出ない幅でも分かる */
.site-nav__list a[aria-current="location"] {
  color: var(--color-accent);
}

/* 今見ている節を、カギ形の枠で囲む */
.site-nav {
  position: relative;
}

.nav-cursor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
}

/* 枠の四隅を別々の部品にし、transform だけで動かす（幅や高さを動かすとレイアウトの計算が毎回起きる）。
   位置は js/main.js の initNavCursor が決める */
.nav-cursor__corner {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cursor-corner);
  height: var(--cursor-corner);
  background:
    linear-gradient(var(--color-accent) 0 0) var(--corner-at) / 100% var(--cursor-line) no-repeat,
    linear-gradient(var(--color-accent) 0 0) var(--corner-at) / var(--cursor-line) 100% no-repeat;
}

.nav-cursor__corner--tl { --corner-at: top left; }
.nav-cursor__corner--tr { --corner-at: top right; }
.nav-cursor__corner--bl { --corner-at: bottom left; }
.nav-cursor__corner--br { --corner-at: bottom right; }

/* 最初の画面にいる間は、どの節も選んでいないので枠を消す */
.nav-cursor.is-ready.is-hidden {
  opacity: 0;
}

.nav-cursor.is-ready {
  opacity: 1;
}

.nav-cursor.is-ready .nav-cursor__corner {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 767px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: block;
    /* 横向きのスマートフォンのように高さが低い画面でも、メニューを最後までスクロールできるようにする */
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    /* メニューの端まで来ても、後ろのページはスクロールさせない */
    overscroll-behavior: contain;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
  }

  .site-nav__list a {
    padding: var(--space-3);
  }

  /* メニューが縦に並ぶ幅では、枠は出さずに色だけで示す */
  .nav-cursor {
    display: none;
  }
}

/* セクション共通 */

.section {
  padding: clamp(40px, 8vw, 72px) 0;
}

.section__title {
  margin: 0 0 clamp(var(--space-5), 4vw, var(--space-6));
  font-size: var(--fs-h2);
}

/* 節の中の小見出し（スキルの中の「資格」など） */
.subsection__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
}

/* 最初の画面（ゲームのタイトル画面風）。ヘッダーを除いた画面の高さいっぱいに広げる */

.title-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  /* 下にはスクロールの案内を置くので、その分をあける */
  padding: var(--space-7) 0 calc(var(--space-7) + var(--hit-min) + var(--space-5));
  border-bottom: 1px solid var(--color-border);
}

.title-screen__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

/* 広い画面では、文字の右にゲームの画像を並べる。見出しが途中で折り返さないよう、
   文字の列は文字の幅ぴったりに取り、残りを画像に回す（画像は 460px まで） */
@media (min-width: 960px) {
  .title-screen__inner:has(.title-screen__game) {
    grid-template-columns: max-content minmax(240px, 460px);
    justify-content: space-between;
  }
}

/* ランダムに選んだゲームの画像。届く前から縦横比で場所を取っておき、届いたら浮かび上がらせる。
   切り替えるときは、画像と名前をフェードアウトしてから、次のゲームでフェードインする */
.title-screen__game {
  /* フェードの時間。js/main.js の TITLE_GAME_FADE と合わせる */
  --title-game-fade: 0.8s;
  margin: 0;
  max-width: 460px;
}

.title-screen__game-link {
  position: relative;
  display: block;
  color: var(--color-text);
}

.title-screen__game-link:focus-visible {
  outline: none;
}

.title-screen__game-image {
  width: 100%;
  aspect-ratio: 460 / 215;
  border: 2px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
  opacity: 0;
  transition: opacity var(--title-game-fade) ease;
}

.title-screen__game.is-loaded .title-screen__game-image,
.title-screen__game.is-loaded .title-screen__game-name {
  opacity: 1;
}

.title-screen__game-caption {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  line-height: 1.5;
}

.title-screen__game-label {
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.title-screen__game-name {
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--title-game-fade) ease;
}

/* 狭い画面では右側の画像の枠は出さず、同じ画像をキャッチコピーの後ろに薄く敷く。
   画像の URL は js/main.js の initTitleGame が --title-game-image に入れる */
@media (max-width: 959px) {
  .title-screen__game {
    display: none;
  }

  .title-screen__copy {
    position: relative;
    isolation: isolate;
  }

  /* 後ろの画像は文字の下に 24px はみ出すので、その分ボタンとの間をあける。
     画像の切り替え中に間が変わってボタンが動かないよう、画像の有無にかかわらず同じ間を取る。
     後ろにある .title-screen__copy の margin に負けないよう、親を付けて指定する */
  .title-screen__text .title-screen__copy {
    margin-bottom: var(--space-6);
  }

  /* 画像は切らずに元の縦横比のまま出す。下の端を文字の下にそろえ、余った高さは文字の上へはみ出させる */
  .title-screen__copy::before {
    content: "";
    position: absolute;
    left: calc(var(--space-3) * -1);
    bottom: calc(var(--space-5) * -1);
    width: min(calc(100% + var(--space-3) * 2), 484px);
    aspect-ratio: 460 / 215;
    z-index: -1;
    border-radius: 2px;
    background: var(--title-game-image) center bottom / contain no-repeat;
    /* 文字を読みやすくするため、後ろの画像はぼかす */
    filter: blur(4px);
    opacity: 0;
    /* js/main.js の TITLE_GAME_FADE と合わせる */
    transition: opacity 0.8s ease;
  }

  .title-screen__copy.has-game-image::before {
    opacity: 0.3;
  }
}

.title-screen__copy {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  line-height: 1.25;
}

.title-screen__lead {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h3);
}

.title-screen__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* アイコンだけのボタン。何のボタンかは aria-label で読み上げる */
.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--color-button-from) 5%, var(--color-button-to) 95%);
  color: var(--color-on-button);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
}

/* キーボードで選んだときは、連絡先のボタンと同じカギ形の枠で示す */
.icon-button:focus-visible {
  outline: none;
}

.icon-button:active {
  background: var(--color-button-pressed);
  transform: scale(0.97);
}

.icon-button__icon {
  flex: none;
  width: 32px;
  height: 32px;
}

/* 公式ロゴは縦横の比が正方形ではないので、32px の枠に縦横比を保って収める */
.icon-button__icon--logo {
  object-fit: contain;
}

/* note のアイコンは、正方形の中に余白を取って「n」が描かれているので、ボタンいっぱいに広げて
   ほかのロゴと同じくらいの大きさに見せる */
.icon-button__icon--fill {
  width: 100%;
  height: 100%;
}

/* スマートフォンの幅では、上の余白を詰める */
@media (max-width: 599px) {
  .title-screen {
    padding-top: var(--space-6);
  }
}

.title-screen__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--hit-min);
  padding: var(--space-1) var(--space-3);
  color: var(--color-muted);
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
}

.title-screen__scroll:hover {
  color: var(--color-accent);
}

/* ▼ はゲームの「つづきを読む」の印のように、2つの位置をカクッと行き来させる */
.title-screen__arrow {
  color: var(--color-accent);
  animation: title-arrow 1.2s steps(1, end) infinite;
}

@keyframes title-arrow {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }

  100% {
    transform: translateY(0);
  }
}

/* プロフィール */

.section--hero {
  padding-top: clamp(32px, 6vw, 56px);
}

.hero {
  display: grid;
  grid-template-columns: clamp(140px, 18vw, 180px) minmax(0, 1fr);
  grid-template-areas:
    "photo text"
    "status status";
  gap: clamp(var(--space-5), 4vw, 40px);
  align-items: center;
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: 180px minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas: "photo text status";
  }
}

.hero__photo {
  grid-area: photo;
}

.hero__photo img {
  border-radius: 50%;
  border: 4px solid var(--color-accent);
  background: var(--color-surface);
}

.hero__text {
  grid-area: text;
}

.hero__hello {
  margin: 0;
  color: var(--color-muted);
}

.hero__name {
  margin: 0;
  font-size: var(--fs-display);
}

.status-card {
  grid-area: status;
  max-width: 420px;
  padding: var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.status-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  color: var(--color-accent);
}

.status-card__list {
  margin: 0;
}

.status-card__row {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--color-border);
}

.status-card__row:last-child {
  border-bottom: none;
}

.status-card__row dt {
  color: var(--color-muted);
}

.status-card__row dd {
  margin: 0;
}

.status-card__mult {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 4px;
  background: var(--color-accent-2);
  color: var(--color-bg);
  font-weight: 700;
}

@media (max-width: 599px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "text"
      "status";
  }

  .hero__photo img {
    width: 140px;
    height: 140px;
  }

  .status-card {
    width: 100%;
  }

  .status-card__row {
    grid-template-columns: 5.5em 1fr;
  }
}

/* スキル */

/* 4つのスキルが2列×2段でそろうように、広い画面でも2列までにする */
.skill-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .skill-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.skill__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.skill__name {
  font-weight: 700;
}

.skill__note {
  margin-left: auto;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

/* 習熟度の数値（Lv.7 など） */
.skill__value {
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.skill-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.skill-bar__fill {
  display: block;
  height: 100%;
  width: calc(var(--level, 0) * 1%);
  background: var(--color-accent);
}

/* JavaScript が動かないときは data-level の値を CSS では読めないので、バーを満たして見せる */
html:not(.js) .skill-bar__fill {
  width: 100%;
  opacity: 0.5;
}

/* 資格はスキルの一覧と同じまとまりに見えるよう、一覧のすぐ下に置く */
.skill-cert__body {
  margin: 0;
}

/* 経歴。線と印は飾りなので、アクセント色ではなく境界線と補足の色にする */

.timeline {
  margin: 0;
  padding: 0 0 0 var(--space-5);
  list-style: none;
  border-left: 3px solid var(--color-border);
}

.timeline__item {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-4);
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -33px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 3px solid var(--color-muted);
}

.timeline__date {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: 700;
  /* 縦に並ぶ年月の数字の幅をそろえる */
  font-variant-numeric: tabular-nums;
}

.timeline__body {
  margin: 0;
}

/* 広い画面では「日付｜内容」の2列にし、日付を縦の線にそろえて上から流し読みしやすくする */
@media (min-width: 768px) {
  .timeline__item {
    display: grid;
    grid-template-columns: 8em minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* 作品 */

/* プレイしたゲーム */

.games__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.games__summary {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.games__sort {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
}

/* Windows のダークモードでも読めるよう、背景と文字の色をはっきり決める */
.games__select {
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

.games__select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* カード全体が Steam のストアページへのリンク */
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.game-card:focus-visible {
  outline: none;
}

/* 作品カードと同じく、マウスを乗せたときとキーボードで選んだときに背景と文字の色を入れ替える */
.game-card:is(:hover, :focus-visible) {
  background-color: var(--color-invert-bg);
  color: var(--color-invert-text);
}

.game-card:is(:hover, :focus-visible) .game-card__meta {
  color: var(--color-invert-muted);
}

/* Steam のストアの横長の画像（460×215） */
.game-card__image {
  width: 100%;
  aspect-ratio: 460 / 215;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-pressed);
}

.game-card__body {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.game-card__name {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
}

.game-card__meta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

/* 読み込み中の骨組み。1行目だけを見せるため、2行目からの行の高さを 0 にして切り落とす */
.games[aria-busy="true"] {
  grid-template-rows: auto;
  grid-auto-rows: 0;
  row-gap: 0;
  overflow: hidden;
}

/* カードと同じ枠に、画像の場所と本文の場所を取る。動きは付けない */
.games__skeleton {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.games__skeleton::before {
  content: "";
  display: block;
  aspect-ratio: 460 / 215;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-pressed);
}

/* 本文の高さ。上下の余白、名前の1行、補足の2行（合計時間と最終プレイ）、その間の 2px を足した値 */
.games__skeleton::after {
  content: "";
  display: block;
  height: calc(var(--space-3) + var(--space-4) + 1.5rem + var(--fs-small) * 1.5 * 2 + 4px);
}

/* 「もっとみる」は届いてから出すかを決めるので、読み込み中は見えないまま場所だけ取る */
.games[aria-busy="true"] ~ .games__more-wrap {
  visibility: hidden;
}

/* JavaScript が動かないときは中身が入らないので、骨組みも「もっとみる」も出さない */
html:not(.js) .games__skeleton,
html:not(.js) .games__more-wrap {
  display: none;
}

/* 「もっとみる」で開いたあとは、一覧の高さに上限を付け、その中だけでスクロールする。
   選んだカードのカギ形の枠（外へ 6px はみ出す）が切れないよう、内側に余白を取り、その分だけ外へ広げる */
.games.is-expanded {
  /* 列の数は閉じたときと同じにする（数は js/main.js が入れる） */
  grid-template-columns: repeat(var(--games-columns, 1), minmax(0, 1fr));
  max-height: min(70vh, 640px);
  margin: calc(var(--space-2) * -1);
  padding: var(--space-2);
  /* 縦だけにスクロールする。カギ形の枠は、寄ってくる前（1.04 倍で透明）のときに余白より外へ出るので、
     横は切り落として、横のスクロールバーを出さない */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Steam 以外のゲーム。Steam の一覧（と「もっとみる」）との間をあける */
.games__other-title {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

/* 名前だけのカードは背が低いので、間を詰める。幅は、いちばん長い名前（デュエル・マスターズ プレイス）が
   2行までに収まる 200px を下限にする（スマートフォンでは1列、広い画面では4列） */
.games--text {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--space-3);
}

/* 画像のない、名前だけのカード。押せる高さを取り、名前を縦の真ん中に置く */
.game-card--text {
  justify-content: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
}

.game-card--text .game-card__name {
  font-weight: 700;
  line-height: 1.5;
  /* 「プレ/イス」のように語の途中で折り返さないよう、文節で折り返す */
  word-break: auto-phrase;
}

/* 2行目からは「もっとみる」で出す。ボタンはカードの下の真ん中に置く */
.games__more-wrap {
  margin-top: var(--space-5);
  text-align: center;
}

.works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* カード全体を押せるようにする。押せる範囲は中のリンクを広げて作るので、リンクは1つのまま */
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.work-card__tags li,
.work-card__link {
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* マウスを乗せたときとキーボードで選んだときに、0.2 秒かけて背景と文字の色を入れ替える */
.work-card:is(:hover, :has(.work-card__link:focus-visible)) {
  background-color: var(--color-invert-bg);
  color: var(--color-invert-text);
}

.work-card:is(:hover, :has(.work-card__link:focus-visible)) .work-card__tags li {
  border-color: var(--color-invert-muted);
  color: var(--color-invert-muted);
}

.work-card:is(:hover, :has(.work-card__link:focus-visible)) .work-card__link {
  color: var(--color-invert-text);
}

/* 押している間は、反転した背景を一段暗くする（上の乗せたときの指定より優先させる） */
.work-card:is(:hover, :has(.work-card__link:focus-visible)):active {
  background-color: var(--color-invert-pressed);
}

/* 押せる部品は、メニューと同じカギ形の枠で「選んでいる」ことを示す。
   マウスを乗せたときと、キーボードで選んだときに、少し外から寄ってきて囲む */
.work-card::after,
.game-card::after,
.title-screen__game-link::after,
.contact__link::after,
.icon-button::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  opacity: 0;
  color: var(--color-accent);
  background: var(--cursor-brackets);
  /* 寄ってくる動きは inset ではなく拡大率で付ける（inset を動かすとレイアウトの計算が毎回起きる） */
  transform: scale(1.04);
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-card:hover::after,
.work-card:has(.work-card__link:focus-visible)::after,
.game-card:hover::after,
.game-card:focus-visible::after,
.title-screen__game-link:hover::after,
.title-screen__game-link:focus-visible::after,
.contact__link:hover::after,
.contact__link:focus-visible::after,
.icon-button:hover::after,
.icon-button:focus-visible::after {
  opacity: 1;
  transform: none;
}

/* 緑のボタンでは、枠もボタンと同じ緑にする */
.icon-button::after {
  color: var(--color-button-from);
}

/* 長い見出しでも読みやすいように、本文と同じ書体の太字にする */
.work-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.work-card__desc {
  margin: 0 0 var(--space-4);
  flex-grow: 1;
}

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

/* 技術の名前も押せないラベル。枠などの見た目は theme.css で決める */
.work-card__tags li {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* 押せる高さを 44px 以上にする */
.work-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--hit-min);
  padding: var(--space-2) 0;
  font-weight: 700;
}

/* リンクの押せる範囲をカード全体に広げる */
.work-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* カードのどこに乗せても、押すとリンク先に移ると分かるように下線を太くする */
.work-card:hover .work-card__link {
  text-decoration-thickness: 3px;
}

/* キーボードで選んだときはカギ形の枠で示すので、リンクの文字の周りには線を出さない（:has が使えないブラウザでは、リンクの線を残す） */
@supports selector(:has(*)) {
  .work-card__link:focus-visible {
    outline: none;
  }
}

/* 連絡先 */

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--color-accent);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

/* キーボードで選んだときもカギ形の枠で示す */
.contact__link:focus-visible {
  outline: none;
}

.contact__link:active {
  background: var(--color-accent-pressed);
  border-color: var(--color-accent-pressed);
  color: var(--color-on-accent);
}

/* お問い合わせフォーム */

.contact-form__title {
  margin-top: var(--space-7);
}

.contact-form {
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
}

.contact-form__field {
  display: grid;
  gap: var(--space-2);
}

.contact-form__field label {
  font-weight: 700;
}

/* iPhone で入力欄を選んだときに画面が拡大されないよう、文字は 16px 以上にする */
.contact-form__input {
  width: 100%;
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body);
}

textarea.contact-form__input {
  resize: vertical;
}

.contact-form__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* スパム対策の欄は、画面にも読み上げにも出さない */
.contact-form__trap {
  position: absolute;
  left: -9999px;
}

/* 文字のボタン（送信、もっとみる）は .contact__link の縁の太さと余白を使い、形と色はここで決める */
.contact-form__submit,
.games__more {
  /* 角を丸めず、緑のアイコンのボタンと同じ長方形にする */
  border-radius: 2px;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* 作品カードと同じく、マウスを乗せたときとキーボードで選んだときに、0.2 秒かけて色を入れ替える。
   背景は文字と縁の水色に、文字と縁はページの背景色にする */
.contact-form__submit:is(:hover, :focus-visible),
.games__more:is(:hover, :focus-visible) {
  background-color: var(--color-accent);
  border-color: var(--color-bg);
  color: var(--color-bg);
}

/* 押している間は、反転した背景を一段暗くする（連絡先のボタンの押したときの色より優先させる） */
.contact-form__submit:is(:hover, :focus-visible):active,
.games__more:is(:hover, :focus-visible):active {
  background-color: var(--color-accent-pressed);
  border-color: var(--color-bg);
  color: var(--color-bg);
}

.contact-form__submit {
  justify-self: start;
}

.contact-form__submit[aria-disabled="true"] {
  opacity: 0.6;
  cursor: wait;
}

.contact-form__status {
  margin: 0;
}

.contact-form__status:empty {
  display: none;
}

/* フッター */

.site-footer {
  padding: var(--space-5) 0 max(var(--space-5), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  text-align: center;
  font-size: var(--fs-small);
}

.site-footer p {
  margin: 0;
}

/* 出典と商標の表記。.site-footer p の margin に負けないよう、親を付けて指定する */
.site-footer .site-footer__notice {
  margin-bottom: var(--space-2);
  line-height: 1.6;
  /* 中央ぞろえの短い行で語の途中が折り返さないよう、文節で折り返し、行の長さをそろえる */
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 表記のあとの著作権の行は、少し離す */
.site-footer .site-footer__notice + p:not(.site-footer__notice) {
  margin-top: var(--space-4);
}

.site-footer__notice a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .nav-toggle:active,
  .site-nav__list a:active,
  .contact__link:active,
  .icon-button:active {
    transform: none;
  }
}