/* 脳トレ「どこに 隠れた？」（案内役 ひみコン）。クラスは gm-oikake-。トークンは src/styles.css。決まりは docs/games-contract.md
   2026-10-09: 夜の 里の 見た目（夜空の 舞台・漆と 金の 枠・雲の 絵・ひみコンの 立ち絵・当たり／おしい の 見出し） */
.gm-oikake-body { gap: 4px; padding-top: 4px; padding-bottom: 4px; overflow: hidden; }

/* 上の 段: 追う キャラ（左）と 5回の 進み具合（右） */
.gm-oikake-hud { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.gm-oikake-who { margin: 0; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 12px 2px 2px; border-radius: 999px;
  background: linear-gradient(180deg, #fffaf0, #f6e4bf); box-shadow: 0 0 0 2px #c9a24f, 0 3px 6px rgb(10 5 30 / .45); color: #4a2a12; }
.gm-oikake-who img { flex: none; width: 48px; height: 48px; margin: -2px 0; object-fit: cover; transform: scale(1.35); }
.gm-oikake-who span { display: grid; line-height: 1.15; min-width: 0; }
.gm-oikake-who small { font-size: 12px; font-weight: 700; color: #8a5a2a; }
.gm-oikake-who b { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gm-oikake-dots { flex: none; display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.gm-oikake-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: var(--fs-sm); line-height: 1;
  background: radial-gradient(circle at 35% 30%, #4a3a7a, #241a4a); color: #cdbbf0; box-shadow: inset 0 0 0 2px #8a74c4; }
.gm-oikake-dot.is-now { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2b830); color: #5a3208; box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgb(255 214 90 / .8); }
.gm-oikake-dot.is-ok { background: radial-gradient(circle at 35% 30%, #8ff09a, #23a04a); color: #fff; font-size: var(--fs-lg); box-shadow: inset 0 0 0 2px #e6ffe8; text-shadow: 0 1px 1px #145a2a; }
.gm-oikake-dot.is-ng { background: radial-gradient(circle at 35% 30%, #ffc48a, #d9661a); color: #fff; font-size: var(--fs-lg); box-shadow: inset 0 0 0 2px #ffe8d4; text-shadow: 0 1px 1px #7a3008; }

/* ひみコン（立ち絵）と 1行の セリフ */
.gm-oikake-host { flex: none; display: flex; align-items: flex-end; gap: 2px; margin-bottom: -10px; position: relative; z-index: 2; }
.gm-oikake-host-img { flex: none; width: 64px; height: auto; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .5)); transform-origin: 50% 100%; }
.gm-oikake-host-img.is-hop { animation: gm-oikake-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gm-oikake-hop { 40% { transform: translateY(-10px) scale(1.06, .96); } }
.gm-oikake-say { flex: 1; min-width: 0; margin-bottom: 14px; }
.gm-oikake-say .speech { margin: 0; }
.gm-oikake-say .bubble { padding: 8px 12px; font-size: var(--fs-md); line-height: 1.4; }
.gm-oikake-say .speaker { display: none; }

/* 舞台: 漆と 金の 枠（tray）の 中に 夜空の 正方形。残りの 高さに 合わせて 縦横比を 保って 縮む */
.gm-oikake-wrap { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.gm-oikake-frame { width: min(100cqw, 100cqh); aspect-ratio: 1; padding: 0; border: 16px solid transparent; border-image: url('../assets/ui/skin/tray.webp') 110 fill / 16px stretch; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.gm-oikake-stage { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: #1b1640; isolation: isolate; container-type: inline-size;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; box-shadow: inset 0 0 0 2px rgb(255 214 120 / .5); }
.gm-oikake-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }
/* キャラの 層は 重なりの 文脈を 作らない（キャラと 雲の z-index を 混ぜる。動く 間は 手前、隠れると 後ろ） */
.gm-oikake-chars { position: absolute; inset: 0; pointer-events: none; }
.gm-oikake-chara { position: absolute; left: 50%; top: 50%; height: auto; aspect-ratio: 1; max-width: none; will-change: left, top, transform; filter: drop-shadow(0 3px 3px rgb(10 5 30 / .55)); }
/* 答え合わせ: 雲から 顔を 出す */
.gm-oikake-stage.is-peek .gm-oikake-chara { transition: left .45s cubic-bezier(.3, 1.5, .5, 1), top .45s cubic-bezier(.3, 1.5, .5, 1), transform .45s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.gm-oikake-stage.is-judged .gm-oikake-chara:not(.is-target) { opacity: .55; }
.gm-oikake-chara.is-found { filter: drop-shadow(0 0 6px #fff6c0) drop-shadow(0 0 14px #ffd23a); }
.gm-oikake-chara.is-shown { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #ffb070); }

/* 印の キャラの 光る 輪と 矢印（はじめに 示し、動き出すと 消える） */
.gm-oikake-ring { position: absolute; z-index: 3000; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .9s ease-out;
  border: 4px solid #ffe066; box-shadow: 0 0 0 3px rgb(120 60 10 / .55), 0 0 18px 6px rgb(255 214 90 / .75), inset 0 0 14px 2px rgb(255 230 120 / .6); }
.gm-oikake-ring.is-on { opacity: 1; transition: opacity .2s ease-out; animation: gm-oikake-pulse 1.1s ease-in-out infinite; }
.gm-oikake-arrow { position: absolute; left: 50%; bottom: calc(100% + 2px); width: 0; height: 0; transform: translateX(-50%); border: 11px solid transparent; border-top: 14px solid #ffe066; border-bottom: 0; filter: drop-shadow(0 0 3px #7a3a08); animation: gm-oikake-bob .8s ease-in-out infinite; }
@keyframes gm-oikake-pulse { 50% { box-shadow: 0 0 0 3px rgb(120 60 10 / .55), 0 0 28px 12px rgb(255 214 90 / .95), inset 0 0 18px 4px rgb(255 230 120 / .8); } }
@keyframes gm-oikake-bob { 50% { transform: translate(-50%, -5px); } }

/* 雲（タップの 的。絵）。隠れ終わるまで 押せない */
.gm-oikake-cloud { position: absolute; z-index: 500; padding: 0; margin: 0; border: 0; background: none; cursor: default; -webkit-tap-highlight-color: transparent; transform-origin: 50% 70%; }
.gm-oikake-cloud img { position: absolute; left: -7%; top: -9%; width: 114%; height: 118%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 6px rgb(10 5 40 / .45)); transition: filter .2s; }
.gm-oikake-tag { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 999px;
  background: rgb(255 250 235 / .92); box-shadow: 0 0 0 2px #c9a24f; color: #5a3a1a; font-weight: 700; font-size: 14px; line-height: 1; }
.gm-oikake-cloud.is-puff { animation: gm-oikake-puff .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gm-oikake-puff { 0% { transform: scale(1); } 35% { transform: scale(1.13, .9); } 70% { transform: scale(.96, 1.05); } 100% { transform: scale(1); } }
.gm-oikake-stage.is-answer .gm-oikake-cloud { cursor: pointer; animation: gm-oikake-wait 1.4s ease-in-out infinite; }
.gm-oikake-stage.is-answer .gm-oikake-cloud img { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgb(255 224 120 / .9)); }
.gm-oikake-stage.is-answer .gm-oikake-cloud:nth-of-type(2n) { animation-delay: .35s; }
.gm-oikake-stage.is-answer .gm-oikake-cloud:active { animation: none; transform: scale(.93); }
.gm-oikake-cloud:focus-visible { outline: 3px solid #fff3a8; outline-offset: 2px; border-radius: 40%; }
@keyframes gm-oikake-wait { 50% { transform: translateY(-3px) scale(1.03); } }
/* 正解の 雲は 金に 光る */
.gm-oikake-cloud.is-answer-cloud img { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px #ffd23a) drop-shadow(0 0 22px #ffb000); }
.gm-oikake-cloud.is-ok { animation: gm-oikake-puff .45s cubic-bezier(.3, 1.6, .5, 1); }
.gm-oikake-cloud.is-ng { animation: gm-oikake-shake .45s ease-out; }
@keyframes gm-oikake-shake { 20% { transform: translateX(-6px) rotate(-3deg); } 45% { transform: translateX(5px) rotate(2deg); } 70% { transform: translateX(-3px); } }
/* 選んだ 雲に ○× */
.gm-oikake-mark { position: absolute; right: -6px; bottom: -6px; display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; font-size: 1.9rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 4px currentColor, 0 4px 8px rgb(0 0 0 / .4); z-index: 2; }
.gm-oikake-cloud.is-ok .gm-oikake-mark, .gm-oikake-cloud.is-ng .gm-oikake-mark { display: grid; animation: gm-oikake-pop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.gm-oikake-cloud.is-ok .gm-oikake-mark { color: #1f8a44; }
.gm-oikake-cloud.is-ng .gm-oikake-mark { color: #c25a0a; }
@keyframes gm-oikake-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 当たり／おしい の 見出し（画像）と 粒 */
.gm-oikake-fx { position: absolute; inset: 0; z-index: 3500; pointer-events: none; }
.gm-oikake-spark { position: absolute; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 20%, #ffe36a 35%, rgb(255 190 40 / 0) 70%); animation: gm-oikake-spark .75s ease-out forwards; }
.gm-oikake-spark.is-gold:nth-child(3n) { width: 7cqw; height: 7cqw; background: radial-gradient(circle, #fff 0 15%, #ffd23a 30%, rgb(255 170 0 / 0) 70%); }
.gm-oikake-spark.is-soft { background: radial-gradient(circle, #fff 0 20%, #ffd6a8 40%, rgb(255 180 120 / 0) 70%); }
@keyframes gm-oikake-spark { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
.gm-oikake-banner { position: absolute; left: 50%; top: 50%; z-index: 4000; width: 72%; height: auto; max-width: none; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.4);
  filter: drop-shadow(0 4px 8px rgb(10 5 30 / .6)); }
.gm-oikake-banner.is-on { animation: gm-oikake-banner 1.2s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.gm-oikake-banner.is-miss { width: 62%; }
@keyframes gm-oikake-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(0); } 40% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1); } }

/* ドックの 主ボタン（文字ごと 画像）と、待つ 間の 札（押せない） */
.gm-oikake-btn { min-height: 64px; font-size: var(--fs-lg); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.gm-oikake-btn.is-img, .gm-oikake-btn.is-img:active { width: min(100%, 380px); margin: 0 auto; color: transparent; text-shadow: none; background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; border: 0; box-shadow: none; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .4)); }
.gm-oikake-btn.is-img:active { transform: translateY(3px) scale(.98); }
.gm-oikake-btn.is-wait, .gm-oikake-btn.is-wait:active { background: rgb(20 12 50 / .62); color: #fff3d6; box-shadow: inset 0 0 0 2px rgb(255 214 120 / .55); transform: none; cursor: default; }

/* 文字が 大きい とき: セリフを 詰めて 舞台を 残す */
html.text-large .gm-oikake-say .bubble, html.text-xlarge .gm-oikake-say .bubble { font-size: var(--fs-sm); line-height: 1.4; }
html.text-xlarge .gm-oikake-host-img { width: 50px; }
html.text-xlarge .gm-oikake-dot { width: 26px; height: 26px; font-size: var(--fs-xs); }
html.text-xlarge .gm-oikake-who b { font-size: var(--fs-sm); }
html.text-xlarge .gm-oikake-who img { width: 40px; height: 40px; }
html.text-xlarge .gm-oikake-hud { min-height: 46px; }
@media (max-height: 660px) {
  .gm-oikake-host-img { width: 50px; }
  .gm-oikake-frame { border-width: 12px; border-image-width: 12px; }
}

/* 動きを 減らす: 飾りの 動き（輪の 脈・雲の はずみ・見出しの 跳ね・粒）を 止める。キャラの 動きは ロジック側で ゆっくりに する */
.gm-oikake-calm .gm-oikake-ring.is-on, .gm-oikake-calm .gm-oikake-arrow, .gm-oikake-calm .gm-oikake-cloud, .gm-oikake-calm .gm-oikake-mark, .gm-oikake-calm .gm-oikake-host-img { animation: none !important; }
.gm-oikake-calm .gm-oikake-banner.is-on { animation: gm-oikake-fade 1.2s ease-out forwards; }
.gm-oikake-calm .gm-oikake-stage.is-peek .gm-oikake-chara { transition-timing-function: ease-out; }
@keyframes gm-oikake-fade { 0% { opacity: 0; transform: translate(-50%, -50%); } 20%, 75% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) {
  .gm-oikake-ring.is-on, .gm-oikake-arrow, .gm-oikake-cloud, .gm-oikake-stage.is-answer .gm-oikake-cloud, .gm-oikake-mark, .gm-oikake-host-img { animation: none !important; }
}

.gm-oikake-fxdot { position: absolute; width: 2px; height: 2px; pointer-events: none; }