/* まちがい探し（src/games/machigai.js）。クラスは gm-machigai- で 始める。トークンは src/styles.css
   見た目は v2.4「夜の 里」: 漆の 額（ui/skin/tray.webp）・金の 星・クリームの 札。ライト・ダークとも 同じ（ゲームの 世界の 見た目）。 */
.gm-machigai-intro, .gm-machigai-body, .gm-machigai-dock { --mc-gold: #ffd76a; --mc-pink: #ff2f86; --mc-night: rgb(20 12 50 / .62); }

/* ---------- 案内役（全身の 立ち絵） ---------- */
.gm-machigai-host { flex: none; display: flex; align-items: flex-end; gap: 4px; }
.gm-machigai-host-img { flex: none; width: 96px; height: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); transform-origin: 50% 100%; animation: float 3s ease-in-out infinite; }
.gm-machigai-host-img.is-joy { animation: gm-machigai-hop .5s var(--ease); }
.gm-machigai-host-img.is-oops { animation: gm-machigai-tilt .5s ease-out; }
.gm-machigai-bubble { margin-bottom: 36px; font-size: var(--fs-md); line-height: 1.5; box-shadow: 0 3px 0 #b88a3a, 0 6px 14px rgb(0 0 0 / .3); }
@keyframes gm-machigai-hop { 0% { transform: none; } 35% { transform: translateY(-12px) scale(1.04, .97); } 70% { transform: translateY(0) scale(1.03, .96); } 100% { transform: none; } }
@keyframes gm-machigai-tilt { 0%, 100% { transform: none; } 30% { transform: rotate(-7deg); } 65% { transform: rotate(5deg); } }

/* ---------- はじめの 画面 ---------- */
.gm-machigai-intro { justify-content: safe center; gap: 14px; }
.gm-machigai-intro .gm-machigai-host-img { width: 112px; }
.gm-machigai-goalcard { display: grid; justify-items: center; gap: 10px; padding: 14px 16px 16px; border: 18px solid transparent; border-image: url('../assets/ui/skin/tray.webp') 110 fill / 18px stretch; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .45)); color: #fff; text-align: center; }
.gm-machigai-goal { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-md); line-height: 1.45; text-align: left; }
.gm-machigai-goal b { color: var(--mc-gold); font-size: var(--fs-lg); }
.gm-machigai-goal-n { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff6c8, #ffc93a 60%, #d68a10); color: #5a2a00; font-size: 34px; line-height: 1; box-shadow: 0 3px 0 #9a5a00, 0 0 16px rgb(255 214 90 / .6); }
.gm-machigai-sub { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: #f6e6c4; }
.gm-machigai-sub b { color: var(--mc-gold); }

/* ---------- 見つけた 数（金の 星） ---------- */
.gm-machigai-stars { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.gm-machigai-stars li { width: 22px; height: 22px; border-radius: 50%; background: rgb(0 0 0 / .35); box-shadow: inset 0 0 0 2px rgb(255 214 120 / .55); }
.gm-machigai-stars li.on { border-radius: 0; background: url('../assets/ui/icon-star.webp') center / 128% no-repeat; box-shadow: none; filter: drop-shadow(0 0 4px rgb(255 214 90 / .9)); }
.gm-machigai-stars li.pop { animation: gm-machigai-star .5s cubic-bezier(.3, 1.8, .5, 1); }
.gm-machigai-stars.is-preview li { width: 26px; height: 26px; }
@keyframes gm-machigai-star { 0% { transform: scale(2.2) rotate(-40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- 遊ぶ 画面: 上に コン太郎・星・時間、まん中に 2枚の 絵 ---------- */
.gm-machigai-body { gap: 4px; padding-top: 6px; padding-bottom: 4px; padding-inline: 8px; overflow: hidden; }
.gm-machigai-status { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 18px; background: var(--mc-night); box-shadow: inset 0 0 0 2px rgb(255 214 120 / .55); }
.gm-machigai-host-img.is-small { width: 44px; margin: -14px 0 -4px; }
.gm-machigai-progress { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gm-machigai-say { margin: 0; color: #fff; font-weight: 700; font-size: var(--fs-xs); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-machigai-meter { display: flex; align-items: center; gap: 6px; }
.gm-machigai-count { margin: 0; color: #f6e6c4; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-machigai-count strong { color: var(--mc-gold); font-size: var(--fs-lg); }
.gm-machigai-time { flex: none; position: relative; display: flex; align-items: baseline; gap: 2px; min-width: 76px; padding: 4px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, #fffaf0, #f4e2bb); box-shadow: inset 0 -3px 0 #c99a4e, 0 2px 0 rgb(0 0 0 / .4); color: #4a2a12; font-weight: 700; font-variant-numeric: tabular-nums; }
.gm-machigai-clock { align-self: center; width: 18px; height: 18px; margin-right: 2px; border-radius: 50%; border: 2.5px solid #7a5634; position: relative; box-sizing: border-box; }
.gm-machigai-clock::after { content: ''; position: absolute; left: 50%; top: 2px; width: 2px; height: 6px; background: #7a5634; transform-origin: 50% 100%; }
.gm-machigai-time strong { font-size: var(--fs-xl); line-height: 1; }
.gm-machigai-time small { font-size: var(--fs-xs); }
.gm-machigai-timebar { position: absolute; left: 8px; right: 8px; bottom: 5px; height: 4px; border-radius: 4px; background: rgb(120 80 40 / .25); overflow: hidden; }
.gm-machigai-timebar i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf5f, #9ef07a); transform-origin: 0 50%; transition: transform .2s linear; }
.gm-machigai-time.low { color: #c0392b; animation: gm-machigai-beat 1s ease-in-out infinite; }
.gm-machigai-time.low .gm-machigai-clock { border-color: #c0392b; }
.gm-machigai-time.low .gm-machigai-timebar i { background: linear-gradient(90deg, #e0364f, #ff8a5c); }
.gm-machigai-time.is-up { animation: none; filter: grayscale(.3); }
@keyframes gm-machigai-beat { 50% { transform: scale(1.08); } }

/* 2枚の 絵は 空いている 高さに 合わせて 大きさを 決める（縦横比 1.6:1 ＋ 額 10px） */
.gm-machigai-pics { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
.gm-machigai-stack { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100cqw, (100cqh - 66px) / 2 * 1.6 + 20px); }
.gm-machigai-frame { width: 100%; box-sizing: border-box; border: 10px solid transparent; border-image: url('../assets/ui/skin/tray.webp') 110 / 10px stretch; filter: drop-shadow(0 5px 8px rgb(0 0 0 / .45)); border-radius: 12px; }
.gm-machigai-frame.is-bottom { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 7px rgb(255 214 90 / .65)) drop-shadow(0 5px 8px rgb(0 0 0 / .45)); }
.gm-machigai-frame.fx-miss { animation: gm-machigai-shake .32s ease-out; }
.gm-machigai-frame.is-clear { filter: drop-shadow(0 0 10px rgb(255 214 90 / .95)) drop-shadow(0 5px 8px rgb(0 0 0 / .45)); }
@keyframes gm-machigai-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
.gm-machigai-divider { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 26px; margin: 0; padding: 0 2px; box-sizing: border-box; font-size: var(--fs-xs); font-weight: 700; line-height: 1; color: #f6e6c4; text-shadow: 0 1px 3px rgb(10 5 30 / .9); white-space: nowrap; overflow: hidden; }
.gm-machigai-divider span { padding: 3px 10px; border-radius: 999px; background: var(--mc-night); }
.gm-machigai-divider .is-tap { color: #4a2a12; text-shadow: none; background: linear-gradient(180deg, #fff3b0, #ffd04a); box-shadow: 0 2px 0 #b07a10; }
.gm-machigai-pic {
  position: relative; width: 100%; aspect-ratio: 1.6 / 1; overflow: hidden; border-radius: 4px;
  background: #fff8e9 center / cover no-repeat;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.gm-machigai-item {
  position: absolute; display: block; height: auto; aspect-ratio: 1; pointer-events: none; -webkit-user-drag: none;
  /* 背景の 上でも 見えるように、両方の 絵に 同じ 白い ふち（ちがいの 手がかりには ならない） */
  filter: var(--mc-hue, ) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 2px rgb(0 0 0 / .25));
}
.gm-machigai-marks { position: absolute; inset: 0; pointer-events: none; }

/* 当たりの 丸（上下 両方）・ヒント・時間切れで 見せる 所 */
.gm-machigai-ring {
  position: absolute; width: max(calc(var(--r) * 200%), 48px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); box-sizing: border-box;
}
.gm-machigai-ring.ok { border: 4px solid var(--mc-pink); box-shadow: 0 0 0 2px #fff, inset 0 0 0 2px #fff, 0 0 12px 2px rgb(255 47 134 / .6); animation: gm-machigai-pop .4s cubic-bezier(.3, 1.7, .5, 1) both; }
.gm-machigai-ring.hint { border: 4px dashed var(--mc-gold); box-shadow: 0 0 0 2px rgb(0 0 0 / .35), 0 0 16px 4px rgb(255 214 90 / .9); animation: gm-machigai-glow 1s ease-in-out infinite alternate; }
.gm-machigai-ring.missed { border: 4px dashed #fff; box-shadow: 0 0 0 2px #3a2a4a, 0 0 10px 2px rgb(255 255 255 / .6); animation: gm-machigai-glow .6s ease-in-out infinite alternate; }
.gm-machigai-burst { position: absolute; width: max(calc(var(--r) * 400%), 96px); aspect-ratio: 1; transform: translate(-50%, -50%); background: url('../assets/ui/fx-sparkle.webp') center / contain no-repeat; animation: gm-machigai-burst .65s ease-out both; }
.gm-machigai-miss {
  position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; transform: translate(-50%, -50%);
  background: #2a6fdb; color: #fff; font-size: 22px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 3px #fff, 0 2px 4px rgb(0 0 0 / .4);
  animation: gm-machigai-fade .9s ease-out both;
}
@keyframes gm-machigai-pop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes gm-machigai-glow { from { opacity: .6; } to { opacity: 1; } }
@keyframes gm-machigai-fade { 0% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gm-machigai-burst { 0% { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1) rotate(30deg); opacity: 0; } }

/* ---------- 終わりの 見出し（文字ごと 画像） ---------- */
.gm-machigai-celebrate { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.gm-machigai-celebrate img { position: relative; width: min(92%, 360px); height: auto; filter: drop-shadow(0 6px 12px rgb(30 10 60 / .7)); animation: gm-machigai-title .7s cubic-bezier(.3, 1.7, .5, 1) .15s both; }
.gm-machigai-celebrate img.is-timeup { width: min(78%, 300px); animation: gm-machigai-drop .5s ease-out both; }
.gm-machigai-rays { position: absolute; width: min(100%, 420px); aspect-ratio: 1; background: url('../assets/ui/fx-clear.webp') center / contain no-repeat; animation: gm-machigai-rays 1.6s ease-out .1s both; }
.gm-machigai-celebrate .is-calm { animation: gm-machigai-fadein .3s ease-out both; }
@keyframes gm-machigai-title { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gm-machigai-drop { 0% { transform: translateY(-30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes gm-machigai-rays { 0% { transform: scale(.4) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.05) rotate(40deg); opacity: .9; } }
@keyframes gm-machigai-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- ドック: ヒント（文字ごと 画像） ---------- */
.gm-machigai-dock { padding-top: 6px; }
.gm-machigai-hint { position: relative; display: block; width: min(100%, 300px); min-height: 56px; margin: 0 auto; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; transition: transform .1s ease-out; touch-action: manipulation; }
.gm-machigai-hint img { display: block; width: 100%; height: 62px; object-fit: contain; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .4)); }
.gm-machigai-hint:active:not(:disabled) { transform: translateY(3px) scale(.97); }
.gm-machigai-hint:disabled { opacity: .5; filter: grayscale(.5); cursor: default; }
.gm-machigai-hint:focus-visible { outline: 3px solid #fff3a8; outline-offset: 2px; border-radius: 999px; }
.gm-machigai-hint-n[hidden] { display: none; }
.gm-machigai-hint-n { position: absolute; top: -4px; right: 14%; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; background: #7b3e9e; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; }

/* ---------- 動きを 減らす ---------- */
.gm-machigai-still .gm-machigai-ring, .gm-machigai-still .gm-machigai-miss, .gm-machigai-still .gm-machigai-host-img, .gm-machigai-still .gm-machigai-stars li, .gm-machigai-still .gm-machigai-time { animation: none; }
html.reduce-motion .gm-machigai-host-img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gm-machigai-ring, .gm-machigai-miss, .gm-machigai-host-img, .gm-machigai-stars li, .gm-machigai-time, .gm-machigai-frame, .gm-machigai-burst { animation: none !important; }
}

/* ---------- 小さい 画面・文字「大」「特大」 ---------- */
html.text-large .gm-machigai-say, html.text-xlarge .gm-machigai-say { display: none; }
html.text-large .gm-machigai-bubble, html.text-xlarge .gm-machigai-bubble { font-size: var(--fs-sm); margin-bottom: 26px; }
html.text-large .gm-machigai-bubble .speaker, html.text-xlarge .gm-machigai-bubble .speaker { display: none; }
html.text-large .gm-machigai-intro .gm-machigai-host-img, html.text-xlarge .gm-machigai-intro .gm-machigai-host-img { width: 88px; }
html.text-large .gm-machigai-goal, html.text-xlarge .gm-machigai-goal { font-size: var(--fs-sm); }
html.text-large .gm-machigai-intro, html.text-xlarge .gm-machigai-intro { gap: 8px; }
html.text-xlarge .gm-machigai-sub { display: none; }
html.text-xlarge .gm-machigai-divider span:first-child { display: none; }
html.text-xlarge .gm-machigai-divider { justify-content: center; }
html.text-xlarge .gm-machigai-stars li { width: 18px; height: 18px; }
@media (max-height: 660px) {
  .gm-machigai-intro .gm-machigai-host-img { width: 90px; }
  .gm-machigai-hint img { height: 56px; }
}

/* v2.6: 光の 画像は やめ、粒（src/fx.js）に */
.gm-machigai-burst { background: none !important; animation: none !important; width: 2px !important; height: 2px !important; }