/* ゲーム一覧 /valdir/games/（2026-11-06。/games/ も同じページ）。共通の見た目は valdir-base.css。
   考え方：映像アーカイブの冒頭と同じ、大きな上映面の劇場。選んだゲームのトレーラーの無音ループが、画面の右へ寄せた上映面に流れる。
   文字は映像に重ねず、左の暗いところに置く（トレーラーには文字が焼き込まれているので、重ねると読めない）。
   ゲームは下のタブで選ぶ（トップのキャラクターの章のタブと同じ形）。タブは等分のまま増え、幅が足りなくなると横にスクロールする。
   選んだゲームの宝石の色（--gem）が、ページの光の色になる。演出OFF（.is-calm）では映像を流さない。 */

:root { --gem: var(--gold); }
:lang(ja) :is(.gm__copy, .gm__name) { word-break: auto-phrase; }

.arcade { --stage-h: clamp(540px, 41vw, calc(100svh - 124px)); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 39fr) minmax(0, 61fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: clip; background: var(--ink); }

/* 上映面。下と左は、ページの地の色へ溶かす */
.arcade__media { grid-area: 1 / 1 / 3 / -1; justify-self: end; position: relative; z-index: -1; width: 74%; min-height: var(--stage-h); overflow: hidden; background: var(--night); }
.arcade__poster, .arcade__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease); }
.arcade__loop { object-position: 50% 100%; opacity: 0; } /* 字幕は下にあるので、切れるときは上を切る */
.arcade__media.is-playing .arcade__loop { opacity: 1; }
.arcade__media.is-switching :is(.arcade__poster, .arcade__loop) { opacity: 0; transition-duration: .26s; }
.arcade__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0, rgb(6 7 12 / .88) 16%, rgb(6 7 12 / 0) 40%), linear-gradient(to top, var(--ink) 0, rgb(6 7 12 / .35) 12%, rgb(6 7 12 / 0) 28%), linear-gradient(to bottom, rgb(6 7 12 / .78) 0, rgb(6 7 12 / 0) 22%); }
/* 押すとトレーラーの本編を再生する。印はポインターに付いてくる（トップの上映面のPLAYの印と同じ。--cx・--cy は valdir-games.js が入れる） */
.arcade__hit { position: absolute; inset: 0; z-index: 2; display: block; }
.arcade__cursor { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px solid rgb(255 255 255 / .4); border-radius: 999px; background: rgb(6 7 12 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
  font: 700 12px/1 var(--font-ui); letter-spacing: .08em; color: var(--text); white-space: nowrap; translate: -50% -50%; scale: .6; opacity: 0; transition: opacity .3s ease, scale .5s var(--ease); }
.arcade__cursor svg { width: 16px; height: 16px; fill: currentColor; }
.arcade__cursor b { font-weight: inherit; }
.arcade__media.is-hover .arcade__cursor { opacity: 1; scale: 1; }

/* 見出し */
.arcade__head { grid-area: 1 / 1 / 2 / 2; position: relative; padding: calc(var(--header-h) + clamp(14px, 2.6vh, 30px)) 0 0 var(--pad); }
.arcade__title { margin: 0; }
.arcade .title-en { font-size: clamp(52px, 6.2vw, 100px); }
.arcade .title-sub { margin-top: 4px; }

/* 選んだゲームの紹介 */
.arcade__panels { grid-area: 2 / 1 / 3 / 2; align-self: end; position: relative; padding: 18px 0 clamp(20px, 3.6vh, 36px) var(--pad); }
.gm { display: grid; justify-items: start; animation: gm-in .6s var(--ease) both; }
@keyframes gm-in { from { opacity: 0; translate: 0 12px; } }
.no-js .gm[hidden] { display: grid !important; margin-top: 40px; }
/* ロゴの幅は、ゲームごとの指定がなければ既定の幅（2026-11-13 LGLから。足したゲームのロゴが元の大きさで出ないように） */
.gm__logo { width: clamp(200px, 19vw, 310px); height: auto; margin: 0 0 12px -4px; filter: drop-shadow(0 8px 20px rgb(0 0 0 / .6)); }
.gm__logo--lga { width: clamp(220px, 21vw, 340px); }
.gm__logo--lgr { width: clamp(170px, 15.5vw, 250px); }
.gm__genre { margin: 0 0 8px; font: 700 11px/1.2 var(--font-ui); letter-spacing: .3em; color: var(--gold-hi); }
.gm__name { margin: 0; font: 700 clamp(22px, 2.1vw, 32px)/1.35 var(--font-ja); letter-spacing: .03em; }
:lang(en) .gm__name { font: 600 clamp(26px, 2.5vw, 38px)/1.2 var(--font-en); letter-spacing: 0; }
.gm__copy { margin: 4px 0 0; font: 500 clamp(14px, 1.05vw, 16px)/1.8 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.gm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.gm__actions .btn { height: 50px; padding: 0 20px; }
.gm__actions .btn > svg:not(.btn__icon) { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gm__trailer { display: inline-flex; align-items: center; gap: 8px; padding: 12px 2px; text-decoration: none; font: 600 14px/1.2 var(--font-ui); letter-spacing: .08em; color: var(--gold-hi); transition: color .3s; }
.gm__trailer svg { width: 16px; height: 16px; fill: currentColor; }
.gm__trailer:hover { color: #fff; }
.gm__note { margin: 6px 0 0; font: 500 12px/1.6 var(--font-ui); color: var(--text-3); }

/* ゲームを選ぶタブ。線はトップのキャラクターのタブと同じ */
.gm-tabs { grid-area: 3 / 1 / 4 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); margin: 0 var(--pad); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); }
.gm-tabs::-webkit-scrollbar { display: none; }
.no-js .gm-tabs { display: none; }
.gm-tab { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center; padding: 16px 18px 18px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text-3); }
.gm-tab::before { content: ""; position: absolute; left: 0; right: 18px; top: -1px; height: 2px; background: var(--c); box-shadow: 0 0 14px var(--c); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.gm-tab__logo { grid-row: 1 / 3; width: 92px; height: 54px; object-fit: contain; filter: grayscale(.9) brightness(.65); transition: filter .5s; }
.gm-tab__name { align-self: end; font: 600 clamp(20px, 1.8vw, 26px)/1.1 var(--font-en); color: var(--text-2); transition: color .4s; }
.gm-tab__genre { align-self: start; font: 700 10px/1.4 var(--font-ui); letter-spacing: .22em; }
.gm-tab:hover .gm-tab__logo { filter: grayscale(.2) brightness(.95); }
.gm-tab:hover .gm-tab__name { color: var(--text); }
.gm-tab[aria-selected="true"]::before { transform: scaleX(1); }
.gm-tab[aria-selected="true"] .gm-tab__logo { filter: none; }
.gm-tab[aria-selected="true"] .gm-tab__name { color: var(--text); }

/* ---------------------------------------------------------------- 演出OFF */
.is-calm :is(.arcade__loop, .arcade__cursor) { display: none; }
.is-calm .arcade__media.is-switching :is(.arcade__poster, .arcade__loop) { opacity: 1; }

/* ---------------------------------------------------------------- 画面幅：上映面を上に置き、タブ、紹介の順に積む */
@media (max-width: 1080px) {
  .arcade { display: flex; flex-direction: column; }
  .arcade__head { order: 1; padding: calc(var(--header-h) + 20px) var(--pad) 24px; }
  .arcade__media { order: 2; align-self: stretch; z-index: 0; width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  .arcade__media::after { background: linear-gradient(to top, var(--ink) 0, rgb(6 7 12 / 0) 22%); }
  .gm-tabs { order: 3; grid-auto-columns: minmax(220px, 1fr); border-top: 0; border-bottom: 1px solid var(--line); }
  .gm-tab::before { top: auto; bottom: -1px; }
  .arcade__panels { order: 4; padding: 24px var(--pad) 48px; }
  .arcade__cursor { display: none; }
}
@media (max-width: 760px) {
  .arcade__head { padding: calc(var(--header-h) + 18px) 20px 20px; }
  .arcade .title-en { font-size: clamp(54px, 16vw, 76px); }
  .gm-tabs { margin: 0 20px; grid-auto-columns: minmax(150px, 1fr); }
  .gm-tab { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 12px 10px 14px 0; }
  .gm-tab__logo { grid-row: auto; width: 100%; max-width: 120px; height: 46px; object-position: 0 50%; }
  .gm-tab__name { font-size: 17px; }
  .gm-tab__genre { display: none; }
  .arcade__panels { padding: 22px 20px 44px; }
  .gm__logo { width: min(56vw, 270px); }
  .gm__logo--lga { width: min(62vw, 300px); }
  .gm__logo--lgr { width: min(46vw, 220px); }
  .gm__actions { display: grid; width: 100%; }
  .gm__trailer { justify-content: center; }
}