/* 全言語共通のスタイル。言語ごとの違いは :lang() で切り替える */

:root {
  --bg: #f3f5f8;
  --bg-top: #f7f9fb;
  --bg-bottom: #eceff4;
  --surface-top: #ffffff;
  --surface-bottom: #f6f8fb;
  --text: #1a2330;
  --text-sub: #424c59;
  --text-muted: #5d6877;
  --ghost: #e2e7ee;
  --chara-blue: #1e7bff;
  --accent: #1767d6;     /* キャラクターの青を、明るい背景で文字として読める濃さにした色 */
  --yellow: #ffb139;
  --on-yellow: #1a2330;
  --hover: #7e4700;      /* 黄色系を、文字として読める濃さにした色 */
  --ink-faint: rgba(26, 35, 48, .06);
  --ink-light: rgba(26, 35, 48, .08);

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --radius: 4px;

  --fs-display: clamp(3rem, 10vw, 5.5rem);
  --fs-ghost: clamp(3.5rem, 10vw, 5rem);
  --fs-h2: 2rem;
  --fs-h3: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;

  --content-w: 880px;
  --indent: var(--s4);

  /* 見出しの文字の部分の幅。一番長い見出しに合わせ、右のアイコンの位置をそろえる */
  --label-w: 3.9em;
}
:root:lang(en) { --label-w: 3.5em; }
:root:lang(zh) { --label-w: 2.1em; }

@media (max-width: 600px) {
  :root {
    --indent: var(--s2);
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-xs: .75rem;
  }
}

/* --- 土台 --- */
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: .04em;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 40%, var(--bg-bottom) 100%) fixed;
}
body:lang(zh) { font-family: "Noto Sans SC", sans-serif; }
.inner { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--s2); }
h1, h2, h3 { margin: 0; font-weight: 700; font-feature-settings: "palt"; letter-spacing: .02em; line-height: 1.3; }
a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* display: none だと中の symbol が使えないブラウザがあるため、大きさ 0 で隠す */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- ヘッダー ---
   名刺の素材（1414×860）を、色の面と顔で同じ大きさ・位置の箱（--art-w）に入れて重ねる。
   色の面は枠で切らずに下へ飛び出させ、顔は .face-clip で枠の下端（と広い画面では本文の右寄り）で切る。
   顔の線を紺の面の上だけ白くする切り抜きの位置は site.js で合わせる */
.hero {
  --hero-h: clamp(320px, 38vw, 480px);
  --art-w: calc(var(--hero-h) * 2);
  --face-clip-w: min(100%, calc(50% + var(--content-w) / 2 + 160px));
  position: relative;
  height: var(--hero-h);
  overflow-x: clip;
}
.hero .fields, .hero .art { position: absolute; top: 0; width: var(--art-w); aspect-ratio: 1414 / 860; }
.hero .fields { right: calc(100% - var(--face-clip-w)); pointer-events: none; }
/* hero-fields.svg は名刺の範囲から左右に 3000、下に 1140 延長してある */
.hero .fields img {
  position: absolute;
  top: 0;
  left: calc(-3000 / 1414 * 100%);
  width: calc(7414 / 1414 * 100%);
  max-width: none;
  height: auto;
  aspect-ratio: 7414 / 2000;
}
.hero .face-clip { position: absolute; top: 0; bottom: 0; left: 0; width: var(--face-clip-w); overflow: hidden; }
.hero .art { right: 0; }
.hero .art img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .line-light {
  filter: brightness(0) invert(1);
  -webkit-mask-image: url("../images/hero/navy-mask.webp");
  mask-image: url("../images/hero/navy-mask.webp");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* 素材の中の顔の位置 */
.hero .face {
  position: absolute;
  left: 55.9%;
  top: 27.6%;
  width: 44.1%;
  height: 71.4%;
  border-radius: 50%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hero .eyes-closed { display: none; }
.hero .art.is-closed .eyes-open { display: none; }
.hero .art.is-closed .eyes-closed { display: block; }
.hero .eyes-open { transition: transform .15s ease-out; }

.hero .inner { position: relative; padding-top: calc(var(--hero-h) * .3); pointer-events: none; }
.hero .inner a { pointer-events: auto; }
.hero h1 { font-size: var(--fs-display); line-height: 1; }
/* --name-w と縦横比は src/names の図形ごとに style で渡す */
.hero h1 .name { display: block; width: min(var(--name-w), 100%); height: auto; fill: currentColor; }
.hero p { margin: var(--s2) 0 var(--s3); font-size: var(--fs-h3); color: var(--text-sub); font-feature-settings: "palt"; }

@media (max-width: 600px) {
  .hero { --art-w: 100%; height: auto; padding-top: 50%; }
  .hero .face-clip { bottom: auto; height: 50vw; }
  .hero .inner { padding-top: var(--s3); padding-bottom: var(--s4); }
}

/* 飛び出した色の面より手前に描く */
main { position: relative; }

.lang-switch ul {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  z-index: 1;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  font-size: var(--fs-xs);
  background: rgba(255, 255, 255, .85);
  border-radius: var(--radius);
}
.lang-switch a {
  display: block;
  padding: 2px var(--s1);
  border-radius: 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
}
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--hover); }
.lang-switch a[aria-current="page"] { color: var(--text); background: var(--ink-light); }

.social { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; padding: 0; list-style: none; }
.social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  color: var(--text-muted);
  transition: color .1s;
}
.social a:hover, .social a:focus-visible { color: var(--hover); }
.social svg { width: 16px; height: 16px; }

/* --- セクション見出し：大きな英字の下端に見出しを重ねる --- */
section { padding-top: var(--s5); }
.section-title { position: relative; margin-bottom: var(--s3); line-height: 1; }
.section-title .en {
  display: block;
  overflow: hidden;
  font-size: var(--fs-ghost);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--ghost);
  user-select: none;
}
.section-title .ja {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .3em;
  font-size: var(--fs-h2);
  line-height: 1;
}
.section-title .label { min-width: var(--label-w); }

/* マウスの判定は動かない枠（.title-icon-hit）で取り、揺れるのは中の図形だけにする */
.section-title .title-icon-hit { display: flex; flex-shrink: 0; }
.section-title .title-icon {
  fill: var(--chara-blue);
  transform: rotate(-10deg);
  transform-origin: 50% 80%;
}
.section-title .title-icon.is-shaking { animation: title-icon-shake .75s ease-in-out; }
/* 負の余白で、アイコンの大きさが見出しの文字の位置に影響しないようにする */
.section-title .title-icon.news { width: 2.1em; height: 2.1em; margin-block: -.175em; }
.section-title .title-icon.games { width: 1.8em; height: 1.8em; margin-block: -.15em; margin-left: .15em; }
@keyframes title-icon-shake {
  0%      { transform: rotate(-10deg); }
  16.667% { transform: rotate(-24deg); }
  33.333% { transform: rotate(1deg); }
  50%     { transform: rotate(-19deg); }
  66.667% { transform: rotate(-4deg); }
  83.333% { transform: rotate(-14deg); }
  100%    { transform: rotate(-10deg); }
}

.section-body { margin: 0 var(--indent); }
@media (max-width: 600px) {
  .section-body { margin: 0 var(--s1) 0 var(--indent); }
}

/* --- お知らせ --- */
.news { display: grid; gap: var(--s1); margin-block: 0; padding: 0; list-style: none; }
.news li { display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.news time { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* --- ゲーム --- */
.games { display: flex; flex-direction: column; gap: var(--s2); }

/* 当たり判定は動かない外側の <a> が持ち、見た目の変化は内側の .card で行う（境界でホバーが点滅しないように） */
.card-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.card-link:focus-visible { outline: 2px solid var(--hover); outline-offset: 4px; }

.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-top), var(--surface-bottom));
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--ink-light), 0 0 0 1px var(--ink-faint);
  transition: transform .12s ease-out, filter .2s;
}
.card-link:hover .card, .card-link:focus-visible .card { filter: brightness(.97); }
.card-link:active .card { transform: scale(.985); }
.card .body { position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s6) var(--s3) var(--s3); }
.card h3 { font-size: var(--fs-h3); line-height: 1.3; }
.card p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); text-wrap: pretty; }
.card .link-icon {
  position: absolute;
  top: 50%;
  right: var(--s3);
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  color: var(--text-muted);
  transition: color .15s;
}
.card-link:hover .link-icon, .card-link:focus-visible .link-icon { color: var(--hover); }

.card.featured { display: flex; align-items: center; min-height: 176px; }
.card.featured .thumb {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  -webkit-mask-image: linear-gradient(70deg, #000 38%, transparent 72%);
  mask-image: linear-gradient(70deg, #000 38%, transparent 72%);
  opacity: .8;
  transform-origin: 70% 60%;
  transition: transform .5s var(--spring);
}
.card.featured .release {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  margin: 0;
  padding: var(--s1) 12px;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  font-feature-settings: "palt";
  color: var(--on-yellow);
  background: var(--yellow);
  border-radius: 2px;
}
.card.featured .body { margin-left: 50%; padding-left: 0; }
.card.featured .logo {
  display: block;
  width: calc(100% + 72px);
  max-width: 340px;
  height: auto;
  margin: 0 0 4px -72px;
  transition: transform .4s var(--spring);
}
.card-link:hover .card.featured .thumb, .card-link:focus-visible .card.featured .thumb { transform: scale(1.06) translateX(1.5%); }
.card-link:hover .card.featured .logo, .card-link:focus-visible .card.featured .logo { transform: translateX(4px); }

.card.compact .body { gap: 0; padding-top: var(--s2); padding-bottom: var(--s2); }
.card.compact h3 { font-size: var(--fs-body); }

@media (max-width: 600px) {
  .card.featured { display: block; min-height: 0; }
  .card.featured .thumb {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  }
  .card.featured .release { top: var(--s2); bottom: auto; left: var(--s2); }
  .card.featured .body { margin: calc(var(--s5) * -1) 0 0; padding: 0 var(--s6) var(--s2) var(--s2); }
  .card.featured .logo { width: 100%; margin: 0 0 4px; }
  .card.featured .link-icon { top: auto; bottom: var(--s2); right: var(--s2); transform: none; }
  .card.compact .body { padding: var(--s2) var(--s6) var(--s2) var(--s2); }
  .card.compact .link-icon { right: var(--s2); }
}

/* --- 配信ガイドライン --- */
.games-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2);
  margin: 0 var(--indent) var(--s3) 0;
}
.games-heading .section-title { flex: 1; min-width: 0; margin-bottom: 0; }
.guidelines-button {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  max-width: 48%;
  min-height: 44px;
  padding: 10px var(--s2);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--accent);
  background: var(--surface-top);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.guidelines-button:hover { color: var(--hover); }
.guidelines-button:focus-visible, .guidelines-close:focus-visible { outline: 2px solid var(--hover); outline-offset: 4px; }
.guidelines-icon { flex-shrink: 0; width: 22px; height: 22px; }
html.has-dialog { overflow: hidden; }
.guidelines-dialog {
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-top);
  box-shadow: 0 16px 64px rgba(26, 35, 48, .25);
  overscroll-behavior: contain;
}
.guidelines-dialog::backdrop { background: rgba(26, 35, 48, .55); }
.guidelines-dialog-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s2);
  border-bottom: 1px solid var(--ink-light);
  background: var(--surface-top);
}
.guidelines-dialog-header h2 { font-size: var(--fs-h3); }
.guidelines-dialog-header form { flex-shrink: 0; }
.guidelines-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: var(--ink-faint);
  cursor: pointer;
}
.guidelines-close:hover { color: var(--hover); background: var(--ink-light); }
.guidelines-close svg { width: 24px; height: 24px; }
.guidelines-content { padding: var(--s3) var(--s4) var(--s4); font-size: var(--fs-small); overflow-wrap: anywhere; }
.guidelines-content p { margin: 0; }
.guidelines-topic { margin-top: var(--s3); }
.guidelines-topic:first-child { margin-top: 0; }
.guidelines-topic h3 { margin: 0; font-size: inherit; color: var(--accent); }
.guidelines-topic p { margin-top: var(--s1); }
.guidelines-topic ul { margin: var(--s1) 0 0; padding-left: 1.5em; }
.guidelines-topic li + li { margin-top: var(--s1); }
.credit-template { margin-top: 12px; }
.credit-template-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.credit-text { flex: 1; min-width: 0; margin: 0; font: inherit; font-size: var(--fs-xs); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.credit-game { font-weight: 700; }
.credit-copy {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--accent);
  background: var(--surface-top);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.credit-copy:hover { color: var(--hover); }
.credit-copy:focus-visible, .credit-text:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; }
.credit-template .credit-status { margin: 0; color: var(--accent); font-size: var(--fs-xs); }
.credit-template .credit-status:not(:empty) { margin-top: 4px; }
.guidelines-content .guidelines-contact { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--ink-light); }
.guidelines-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-underline-offset: 3px; }
.guidelines-contact a:hover { color: var(--hover); }
.guidelines-contact svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 600px) {
  .games-heading { gap: var(--s1); margin-right: var(--s1); }
  .games-heading .label { min-width: 0; }
  .guidelines-button { gap: 6px; padding: 8px; font-size: var(--fs-xs); }
  .guidelines-icon { width: 18px; height: 18px; }
  .guidelines-dialog-header { padding: var(--s2); }
  .guidelines-content { padding: var(--s3) var(--s2); }
}
@media (max-width: 380px) {
  .games-heading .ja { font-size: 1.5rem; }
}

/* --- フッター --- */
footer { padding: var(--s7) 0 var(--s4); text-align: center; color: var(--text-muted); }
.contact { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); margin: 0; padding: 0; list-style: none; }
.contact li { min-width: 0; max-width: 100%; }
.contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  max-width: 100%;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text);
  transition: color .1s;
}
.contact a:hover, .contact a:focus-visible { color: var(--hover); }
.contact a > span { min-width: 0; overflow-wrap: anywhere; }
.contact svg { flex-shrink: 0; width: 16px; height: 16px; }
.copyright { margin: var(--s4) 0 0; font-size: var(--fs-xs); }

/* --- ページの下の水玉（site.js で描く） --- */
.dots {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 560px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .card, .card .thumb, .card .logo, .card .link-icon { transition: none; }
  .hero .eyes-open { transition: none; }
  .section-title .title-icon.is-shaking { animation: none; }
}