/* IDATSUKA — 遊ぶ（II / Play）の部屋：play.html・games.html・game-*.html・ranking.html だけで使う部品。
   css/tokens.css → site.css → page.css の上に重ねる。色・書体は tokens.css の変数だけ。
   ゲームの盤面（canvas の筐体）と名前入力の札は、昼テーマでも暗いまま（画面として読ませる）。 */

/* ── 一覧：特集の画像はゲームへのリンク（拡大ではない） ── */
a.ed-feature-pic { cursor: pointer; }
.ed-info h3 a { text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.ed-info h3 a:hover { color: var(--c-accent); }
.ed-card .pl-cdesc { margin-top: 8px; font-size: 12px; line-height: 1.9; letter-spacing: .04em; }
.pl-more { margin-top: 48px; }

/* 部屋番号は「遊ぶ」への戻り道（ゲーム・ランキングのページ） */
a.pg-num { text-decoration: none; }

/* ── ゲームのページの見出し：タイトル行の小さめ ── */
.pl-gtitle { padding-top: calc(var(--head-h) + clamp(40px, 5vw, 72px)); padding-bottom: clamp(24px, 3vw, 36px); }
.pl-gtitle .pg-num { text-decoration: none; margin-bottom: 14px; font-size: 18px; transition: color var(--d-1) var(--ease-calm); }
.pl-gtitle .pg-num span { color: var(--c-sub); }
.pl-gtitle a.pg-num:hover span { color: var(--c-fg); }
.pl-gtitle h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: .1em; }
.pl-gtitle .pg-en { font-size: 20px; margin-top: 8px; }
@media (max-width: 760px) { .pl-gtitle h1 { font-size: 40px; } .pl-gtitle .pg-en { font-size: 18px; } }

/* ゲーム枠のまわり：上に罫線、あとは余白だけ */
.pl-stage { border-top: 0; padding-bottom: clamp(56px, 7vw, 104px); }
.pl-stage > :first-child { border-top: 1px solid var(--c-fg); }
.pl-stage .game-container { border: 1px solid var(--c-line); box-shadow: none; border-radius: 0; }
:root[data-theme="light"] .pl-stage .game-container,
:root[data-theme="light"] .pl-stage #gameCanvas,
:root[data-theme="light"] .pl-stage .game-canvas { border-color: var(--c-sub); }
.pl-stage .game-instructions a, .game-rank-link { color: var(--c-accent); text-decoration: none; opacity: 1;
  border-bottom: 1px solid transparent; transition: border-color var(--d-1) var(--ease-calm); }
.pl-stage .game-instructions a:hover, .game-rank-link:hover { border-bottom-color: currentColor; }

/* ── 名前の登録（ランキング用）：幕はページの色、札は筐体と同じ暗い面 ── */
.name-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 32px; gap: 16px; font-family: var(--f-sans); background: rgba(var(--c-bg-rgb), .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.name-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 36px 32px; background: #141312; color: #ECE6DC; border: 1px solid #2F2C29; border-radius: 0; box-shadow: none; }
.name-panel input::placeholder { color: #A69E92; opacity: .8; }
.name-panel input, .name-panel button { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .ed-info h3 a, .pl-gtitle .pg-num, .pl-stage .game-instructions a, .game-rank-link { transition: none; }
}