/* ============================================================
   ポリン系ゲームの共通スタイル
   読み込むページ: v2/poring-lab.html, v2/poring-tower.html, v2/poring-dash.html, v2/poring-hunt.html
   common.css の後・ページ固有 <style> の前に読み込む

   確認ダイアログのポリン系テーマ（ROMPoring.popup → ROMUI.confirm の theme "is-poring"。土台は common.css の .ui-confirm）
   ゲーム内の確認ウィンドウ風：クリーム地＋金縁＋金色ボタン、本文の上に跳ねるポリン
   ページ下部の「ほかのゲーム」（.more-games。中身は poring-common.js の ROMPoring.GAMES から描く）
   ============================================================ */
.ui-confirm.is-poring .ui-confirm__panel {
  border-radius: 20px; padding: 14px 18px 18px;
  background: linear-gradient(180deg, #fffdf4, #f7ecd2);
  border: 2px solid #c9a86a;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.ui-confirm.is-poring .ui-confirm__title {
  margin: 0; font-family: "Noto Serif JP", serif; font-weight: 700;
  letter-spacing: 0.18em; color: #8a5a18;
}
.ui-confirm.is-poring .ui-confirm__title::after { content: ""; display: block; width: 72px; margin: 6px auto 0; border-bottom: 2px solid rgba(178, 141, 74, 0.45); }
.ui-confirm.is-poring .ui-confirm__art canvas { display: block; width: 132px; height: 116px; margin: 2px auto 0; }
.ui-confirm.is-poring .ui-confirm__msg { margin: 0 0 14px; color: #4a3a22; }
.ui-confirm.is-poring .ui-confirm__btn { border-radius: 999px; color: #6b5636; border: 2px solid #d9c49a; }
.ui-confirm.is-poring .ui-confirm__btn:hover { filter: brightness(0.96); }
.ui-confirm.is-poring .ui-confirm__btn.is-ok {
  color: #1a1206; border-color: #e8bd62;
  background: linear-gradient(180deg, #ffe6a3, var(--gold-2));
  box-shadow: 0 2px 0 rgba(160, 110, 30, 0.35);
}
.ui-confirm.is-poring .ui-confirm__btn.is-ok:hover { filter: brightness(1.04); }

/* ---------- ほかのゲーム（フッターの直前。アプリサイトの「ほかのアプリ」風のアイコン並び） ---------- */
.more-games {
  margin-top: 24px; padding: 16px 14px 14px; border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 224, 136, 0.14), transparent 70%),
    rgba(12, 22, 52, 0.78);
  border: 1px solid rgba(255, 224, 136, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.more-games[hidden] { display: none; }
.more-games__title {
  margin: 0 0 12px; text-align: center;
  font-family: "Noto Serif JP", serif; font-size: var(--fs-base); font-weight: 700;
  color: #fff3d0; letter-spacing: 0.08em;
}
.more-games__en {
  display: block; margin-bottom: 2px;
  font-family: "Cinzel", serif; font-size: var(--fs-xs); letter-spacing: 0.32em; color: var(--gold-1);
}
/* 数が増えても崩れないよう折り返す（390px で3つ、560px で4つ）。幅の広いページ（研究所）でも左に寄らないよう中央にそろえる */
.more-games__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.more-games__list > li { flex: 1 1 100px; max-width: 132px; }
.more-games__item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
  padding: 10px 2px; border-radius: 14px;
  text-align: center; text-decoration: none; color: inherit;
  transition: background-color 0.15s;
}
.more-games__item:hover { background-color: rgba(255, 255, 255, 0.06); }
/* アプリアイコン風：角丸の四角＋上からのツヤ＋金の細い縁 */
.more-games__icon {
  position: relative; width: 68px; height: 68px; margin-bottom: 4px; border-radius: 18px;
  background: linear-gradient(180deg, #3a4f86, #1c2a52);
  box-shadow: 0 0 0 1.5px rgba(255, 224, 136, 0.55), 0 6px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1);
}
.more-games__icon img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.more-games__icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 45%);
}
.more-games__item:hover .more-games__icon,
.more-games__item:focus-visible .more-games__icon { transform: translateY(-3px) scale(1.04); }
.more-games__item:active .more-games__icon { transform: scale(0.95); }
.more-games__new {
  position: absolute; top: -6px; right: -8px; z-index: 1;
  padding: 1px 6px; border-radius: 999px;
  font: 700 var(--fs-xs) / 1.4 "Barlow", sans-serif; letter-spacing: 0.06em;
  color: #fff; background: #d6304a; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* 折り返しは名前の | （<wbr>）の所だけ。収まらないときだけどこでも折る */
.more-games__name, .more-games__tag { word-break: keep-all; overflow-wrap: anywhere; }
.more-games__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; color: #fff; }
.more-games__tag { font-size: var(--fs-xs); line-height: 1.45; color: #c3cfeb; }
/* 「入手」ボタン風の小さな札。押せる所だと一目で分かるように（リンク全体が押せる） */
.more-games__play {
  margin-top: auto; padding: 3px 12px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; color: #1a1206;
  background: linear-gradient(180deg, #ffe6a3, var(--gold-2));
}
@media (prefers-reduced-motion: reduce) {
  .more-games__icon { transition: none; }
  .more-games__item:hover .more-games__icon,
  .more-games__item:focus-visible .more-games__icon,
  .more-games__item:active .more-games__icon { transform: none; }
}