/* 脳トレ「ぴったり止める」（案内役 ナポ・レオ）。クラスは gm-pittari-。トークンは src/styles.css。決まりは docs/games-contract.md
   見た目（2026-10-09 仕上げ）: 夜の 里の 上に、漆と 金の 豪華な 盤・スロットの 筐体を 大きく。
   素材は scripts/art/gen-game-pittari.mjs → src/assets/games/roulette/（ring・cab・btnStop・hit・near・miss）。
   夜の 里は ライト・ダークとも 同じ 見た目（styles.css の v2.4 と 同じ 考え方） */
.gm-pittari-body {
  --pt-lacquer: #2a0d14; --pt-gold: #f2c14e; --pt-gold-d: #a8741c; --pt-cream: #fff8e6;
  gap: 6px; padding-top: 6px; padding-bottom: 0; overflow: hidden;
}

/* ---- 上: ねらいの 札 と 5回の 進み具合 ---- */
.gm-pittari-top { flex: none; display: flex; align-items: center; gap: 8px; }
.gm-pittari-goal {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 2px 12px 2px 6px;
  border-radius: 18px; background: linear-gradient(180deg, #4a1220, #2a0a12); color: #fff;
  box-shadow: inset 0 0 0 2px var(--pt-gold), inset 0 0 0 4px #5d1a26, 0 4px 10px rgb(0 0 0 / .45);
  font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.gm-pittari-goal.is-new { animation: gm-pittari-goalin .35s var(--ease) both; }
@keyframes gm-pittari-goalin { from { transform: scale(.85); opacity: .3; } 60% { transform: scale(1.04); } to { transform: none; opacity: 1; } }
.gm-pittari-goal img { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, #fff8e6 55%, #f2d79a); box-shadow: 0 0 0 2px var(--pt-gold); filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4)); }
.gm-pittari-goal b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xl); color: #ffe39a; text-shadow: 0 2px 0 #5a1020; }
.gm-pittari-goal-x { flex: none; font-size: var(--fs-md); color: #fff; }
.is-slot .gm-pittari-goal b { font-size: var(--fs-lg); }
.gm-pittari-goal-tag { flex: none; writing-mode: vertical-rl; padding: 6px 3px; border-radius: 8px; background: linear-gradient(180deg, #ffe08a, #e0a53a); color: #4a1a08; font-size: var(--fs-xs); letter-spacing: .1em; }

.gm-pittari-dots { flex: none; display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; margin: 0; padding: 0; list-style: none; }
.gm-pittari-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(20 10 40 / .7); box-shadow: inset 0 0 0 2px rgb(242 193 78 / .6); color: #e8d3a6; font-weight: 700; font-size: 13px; line-height: 1; }
.gm-pittari-dot.is-now { box-shadow: inset 0 0 0 3px #fff3a8, 0 0 8px #ffd66b; color: #fff; }
.gm-pittari-dot.is-ok { background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c14e 50%, #a8741c); box-shadow: 0 0 6px #ffd66b; color: #5a2a00; font-size: 16px; }
.gm-pittari-dot.is-ng { background: #3a2a4a; box-shadow: inset 0 0 0 2px #9a8aa3; color: #d8c8e8; font-size: 15px; }

/* ---- 舞台（残りの 高さを ぜんぶ。盤・筐体・ナポ・レオ・ひと言） ---- */
.gm-pittari-stage { position: relative; flex: 1 1 0; min-height: 200px; }
.gm-pittari-stage::before { content: ''; position: absolute; inset: 4% 0 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 210 120 / .38), rgb(255 160 80 / .12) 60%, transparent); pointer-events: none; }
.gm-pittari-stage.is-ok::before { background: radial-gradient(closest-side, rgb(255 236 150 / .7), rgb(255 190 80 / .25) 60%, transparent); }
.gm-pittari-machine { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; display: grid; place-items: center; touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* ルーレット */
.gm-pittari-svg { width: 100%; height: 100%; overflow: visible; }
.gm-pittari-shadow { fill: rgb(0 0 0 / .45); filter: blur(6px); }
.gm-pittari-base { fill: var(--pt-gold); }
.gm-pittari-slice { stroke: var(--pt-gold); stroke-width: 2.2; stroke-linejoin: round; }
.gm-pittari-slice.is-red { fill: url(#gmPtRed); }
.gm-pittari-slice.is-cream { fill: url(#gmPtCream); }
.gm-pittari-slice.is-indigo { fill: url(#gmPtIndigo); }
.gm-pittari-picbg { fill: rgb(255 248 230 / .92); stroke: rgb(242 193 78 / .9); stroke-width: 1.5; }
.gm-pittari-slice.is-cream + .gm-pittari-picbg { fill: rgb(255 255 255 / .5); stroke: none; }
.gm-pittari-tglow { fill: rgb(255 230 120 / .16); stroke: #fff3a8; stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ffd66b); animation: gm-pittari-tpulse 1.1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes gm-pittari-tpulse { from { stroke-opacity: .55; } to { stroke-opacity: 1; } }
.gm-pittari-star { font-size: 15px; fill: #ffe08a; stroke: #6a3a00; stroke-width: 1.2; paint-order: stroke; font-weight: 700; }
.gm-pittari-sector.is-win .gm-pittari-slice { fill: #fff3a8; animation: gm-pittari-win .35s ease-in-out 3 alternate; }
@keyframes gm-pittari-win { from { fill: #fff3a8; } to { fill: #ffc94a; } }
.gm-pittari-hub { stroke: #7a4a0a; stroke-width: 2; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
.gm-pittari-hubstar { font-size: 30px; fill: #c8203f; stroke: #fff6c8; stroke-width: 1.5; paint-order: stroke; font-weight: 700; }
.gm-pittari-ring { pointer-events: none; }
.is-ok .gm-pittari-ring { animation: gm-pittari-flash .22s steps(2, jump-none) 4; }
@keyframes gm-pittari-flash { from { filter: brightness(1); } to { filter: brightness(1.6) saturate(1.3); } }
.gm-pittari-pointer image { filter: drop-shadow(0 3px 3px rgb(0 0 0 / .5)); }
.gm-pittari-tapmark { fill: #fff; stroke: #2a0d14; stroke-width: 1.5; opacity: .9; }

/* スロット（筐体の 画像の 窓に リールを 3本） */
.gm-pittari-cab { position: relative; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .55)); }
.gm-pittari-cabimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; z-index: 2; }
.gm-pittari-window { position: absolute; z-index: 1; border-radius: 10px; overflow: hidden; background: #1a0a10; }
.gm-pittari-reels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0 2px; }
.gm-pittari-reel { position: relative; overflow: hidden; background: linear-gradient(90deg, #d9c49a, #fffaf0 22%, #fffaf0 78%, #d9c49a); transition: box-shadow .2s; }
.gm-pittari-reel::before, .gm-pittari-reel::after { content: ''; position: absolute; left: 0; right: 0; height: 26%; z-index: 2; pointer-events: none; }
.gm-pittari-reel::before { top: 0; background: linear-gradient(rgb(30 10 20 / .55), transparent); }
.gm-pittari-reel::after { bottom: 0; background: linear-gradient(transparent, rgb(30 10 20 / .55)); }
.gm-pittari-reel.is-stop { animation: gm-pittari-thunk .22s ease-out; }
@keyframes gm-pittari-thunk { 0% { transform: translateY(0); } 40% { transform: translateY(5px); } 100% { transform: none; } }
.gm-pittari-reel.is-ok { box-shadow: inset 0 0 0 3px #ffd66b, inset 0 0 18px rgb(255 214 107 / .9); }
.gm-pittari-reel.is-ng { filter: saturate(.55) brightness(.85); }
.gm-pittari-reelmark { position: absolute; right: 3px; bottom: 3px; z-index: 3; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 14px; line-height: 1; }
.gm-pittari-reelmark:empty { display: none; }
.is-ok > .gm-pittari-reelmark { background: #f2c14e; color: #5a2a00; }
.is-ng > .gm-pittari-reelmark { background: #3a2a4a; color: #fff; }
.gm-pittari-cell, .gm-pittari-ghost { position: absolute; left: 0; top: 0; object-fit: contain; transform-origin: 50% 50%; visibility: hidden; will-change: transform; -webkit-user-drag: none; user-select: none; }
.gm-pittari-ghost { opacity: .22; }
.gm-pittari-line { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 3px solid #e8203f; box-shadow: 0 0 6px #ff6a7a; transform: translateY(-1.5px); display: flex; justify-content: space-between; z-index: 3; pointer-events: none; }
.gm-pittari-line span { width: 0; height: 0; margin-top: -9.5px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.gm-pittari-line span:first-child { border-left: 12px solid #ffd66b; }
.gm-pittari-line span:last-child { border-right: 12px solid #ffd66b; }
/* 次に 止める リールの 上の 金の 矢印 */
.gm-pittari-arrows { position: absolute; z-index: 3; left: 15.2%; width: 69.6%; top: calc(26.8% - 26px); height: 24px; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.gm-pittari-arrows i { justify-self: center; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 18px solid #ffe08a; filter: drop-shadow(0 0 4px #ffb020) drop-shadow(0 2px 0 #6a3a00); opacity: 0; transition: opacity .15s; }
.gm-pittari-arrows i.is-on { opacity: 1; animation: gm-pittari-bob .6s ease-in-out infinite alternate; }
@keyframes gm-pittari-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }

/* ---- ナポ・レオ（舞台の 左下に 全身。当たりで 跳ね、はずれで しょんぼり）と ひと言 ---- */
.gm-pittari-host { position: absolute; left: -8px; bottom: 44px; z-index: 4; width: 92px; pointer-events: none; transform-origin: 50% 100%; }
.gm-pittari-hostimg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .5)); }
.gm-pittari-host.is-joy { animation: gm-pittari-jump .6s var(--ease) 2; }
.gm-pittari-host.is-sad { animation: gm-pittari-sad .5s ease-out both; }
@keyframes gm-pittari-jump { 0%, 100% { transform: none; } 35% { transform: translateY(-22px) scale(1.06, .96); } 60% { transform: translateY(0) scale(1.05, .94); } }
@keyframes gm-pittari-sad { 0% { transform: none; } 30% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 100% { transform: translateY(3px) scale(.98); } }
.gm-pittari-say { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.gm-pittari-line1 { display: flex; align-items: center; gap: 6px; min-height: 48px; margin: 0; padding: 4px 12px 4px 4px; border-radius: 999px; background: linear-gradient(180deg, rgb(42 13 20 / .94), rgb(26 8 14 / .94)); box-shadow: inset 0 0 0 2px rgb(242 193 78 / .85), 0 3px 8px rgb(0 0 0 / .45); color: #fff; font-weight: 700; font-size: var(--fs-md); line-height: 1.3; }
.gm-pittari-line1.is-joy { color: #ffe39a; box-shadow: inset 0 0 0 2px #ffe08a, 0 0 12px rgb(255 214 107 / .6); }
.gm-pittari-face { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff8e6; box-shadow: 0 0 0 2px var(--pt-gold); }
.gm-pittari-face .face { display: block; width: 100%; height: 100%; }

/* ---- 当たり／おしい／はずれ の 大きな 文字と 光 ---- */
.gm-pittari-fx { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; z-index: 6; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.gm-pittari-fx > .gm-pittari-fxtext { align-self: end; margin-bottom: 3%; }  /* 止まった 絵（当たりの 列・区切り）を 隠さない */
.gm-pittari-fx > * { grid-area: 1 / 1; }
.gm-pittari-fxtext { width: min(86%, 330px); height: auto; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .55)); animation: gm-pittari-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.gm-pittari-fxtext.is-miss, .gm-pittari-fxtext.is-near { width: min(66%, 250px); animation-name: gm-pittari-drop; animation-duration: .4s; }
@keyframes gm-pittari-pop { from { transform: scale(.2) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gm-pittari-drop { from { transform: translateY(-30px); opacity: 0; } 70% { transform: translateY(4px); } to { transform: none; opacity: 1; } }
.gm-pittari-rays { width: 100%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(rgb(255 236 150 / .55) 0 10deg, transparent 10deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); animation: gm-pittari-spin 2.4s linear both, gm-pittari-fade 1.8s ease-out both; }
@keyframes gm-pittari-spin { to { transform: rotate(60deg); } }
@keyframes gm-pittari-fade { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.gm-pittari-burst { width: 0; height: 0; }
.gm-pittari-burst i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; animation: gm-pittari-fly var(--t) cubic-bezier(.15, .7, .3, 1) both; }
.gm-pittari-burst i.is-coin { background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c14e 55%, #a8741c); box-shadow: 0 0 6px #ffd66b; }
.gm-pittari-burst i.is-star { background: #fff3a8; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
.gm-pittari-burst i.is-petal { width: 12px; height: 9px; border-radius: 60% 40%; background: #ffb3cf; }
@keyframes gm-pittari-fly { from { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } 70% { opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1.1); opacity: 0; } }

/* ---- 下: 「はじめる」→「止める」（文字ごと 画像） ---- */
.gm-pittari-dock { padding-top: 8px; }
.gm-pittari-stop { position: relative; display: block; width: min(100%, 340px); min-height: 72px; margin: 0 auto; padding: 0; border: 0; background: none; line-height: 0; border-radius: 22px; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.gm-pittari-stop img { display: block; width: 100%; height: auto; max-height: 96px; object-fit: contain; filter: drop-shadow(0 5px 6px rgb(0 0 0 / .45)); transition: filter .15s, opacity .15s; }
.gm-pittari-stop.is-press img { animation: gm-pittari-press .18s ease-out; }
@keyframes gm-pittari-press { 0% { transform: none; } 40% { transform: translateY(4px) scale(.96); } 100% { transform: none; } }
.gm-pittari-stop.is-wait img { opacity: 0; }
.gm-pittari-wait { position: absolute; inset: 8% 4% 14%; display: grid; border-radius: 999px; background: linear-gradient(180deg, rgb(58 30 40 / .92), rgb(30 14 22 / .92)); box-shadow: inset 0 0 0 2px rgb(242 193 78 / .55); place-items: center; color: #fff; font-weight: 700; font-size: var(--fs-xl); line-height: 1.2; text-shadow: 0 2px 4px rgb(0 0 0 / .9); pointer-events: none; }
.gm-pittari-wait:empty { display: none; }
.gm-pittari-stop:focus-visible { outline: 3px solid #fff3a8; outline-offset: 3px; }

/* ---- 文字が 大きい とき・低い 画面 ---- */
html.text-large .gm-pittari-line1, html.text-xlarge .gm-pittari-line1 { font-size: var(--fs-sm); line-height: 1.25; }
html.text-xlarge .gm-pittari-goal b { font-size: var(--fs-lg); }
html.text-xlarge .gm-pittari-goal { min-height: 58px; }
html.text-xlarge .gm-pittari-goal img { width: 48px; height: 48px; }
@media (max-height: 660px) {
  .gm-pittari-goal { min-height: 56px; }
  .gm-pittari-goal img { width: 46px; height: 46px; }
  .gm-pittari-host { width: 76px; bottom: 40px; }
  .gm-pittari-stop { min-height: 64px; }
  .gm-pittari-stop img { max-height: 80px; }
}

/* 動きを 減らす: 飾りの 動き（点滅・跳ねる・光の 輪・粒）を 止める。回る 速さは ロジック側で 落とす */
.gm-pittari-calm .gm-pittari-tglow, .gm-pittari-calm .gm-pittari-arrows i.is-on, .gm-pittari-calm .gm-pittari-goal.is-new,
.gm-pittari-calm .gm-pittari-ring, .gm-pittari-calm .gm-pittari-reel.is-stop, .gm-pittari-calm .gm-pittari-sector.is-win .gm-pittari-slice { animation: none; }
.gm-pittari-calm .gm-pittari-fxtext { animation-duration: .01s; }
@media (prefers-reduced-motion: reduce) {
  .gm-pittari-tglow, .gm-pittari-arrows i.is-on, .gm-pittari-host, .gm-pittari-ring, .gm-pittari-reel.is-stop { animation: none !important; }
  .gm-pittari-rays, .gm-pittari-burst { display: none; }
  .gm-pittari-fxtext { animation-duration: .01s; }
}