/* イラストナンプレ（src/games/nanpure.js）。クラスは gm-nanpure- で 始める。トークンは src/styles.css
   見た目は v2.4「夜の 里」: 漆の 盆（ui/skin/tray.webp）・区画ごとの くぼみ・クリームの 立体の 札・金の 光。
   ゲームの 世界の 見た目なので ライト・ダークとも 同じ（styles.css の 夜の 里と 同じ 考え方）。 */
.gm-nanpure-body, .gm-nanpure-dock, .gm-nanpure-intro {
  --np-tile-top: #fffaf0;
  --np-tile-bot: #f4e2bb;
  --np-tile-edge: #c99a4e;
  --np-given-top: #f6e7c7;
  --np-given-bot: #e6cf9e;
  --np-gold: #ffd76a;
  --np-red: #e0364f;
}

/* ---------- 案内役（全身の 立ち絵 ＋ 吹き出し） ---------- */
.gm-nanpure-host { flex: none; display: flex; align-items: flex-end; gap: 4px; }
.gm-nanpure-host-img { flex: none; width: 74px; height: auto; margin-bottom: -4px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); transform-origin: 50% 100%; animation: float 3s ease-in-out infinite; }
.gm-nanpure-host-img.is-joy { animation: gm-nanpure-hop .5s var(--ease); }
.gm-nanpure-host-img.is-oops { animation: gm-nanpure-tilt .5s ease-out; }
.gm-nanpure-bubble { margin-bottom: 14px; font-size: var(--fs-sm); line-height: 1.45; min-height: calc(1.45em * 2 + 14px); box-shadow: 0 3px 0 #b88a3a, 0 6px 14px rgb(0 0 0 / .3); }
.gm-nanpure-bubble .speaker { color: #7b3e9e; }
.gm-nanpure-host.is-big .gm-nanpure-host-img { width: 116px; }
.gm-nanpure-host.is-big .gm-nanpure-bubble { font-size: var(--fs-md); margin-bottom: 40px; }
@keyframes gm-nanpure-hop { 0% { transform: none; } 35% { transform: translateY(-14px) scale(1.04, .97); } 70% { transform: translateY(0) scale(1.03, .96); } 100% { transform: none; } }
@keyframes gm-nanpure-tilt { 0%, 100% { transform: none; } 30% { transform: rotate(-6deg); } 65% { transform: rotate(4deg); } }

/* ---------- 漆の 盆 ---------- */
.gm-nanpure-tray { box-sizing: border-box; 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)); }

/* ---------- はじめの 画面 ---------- */
.gm-nanpure-intro { justify-content: safe center; gap: 12px; }
.gm-nanpure-preview { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; padding: 2px; min-height: 96px; }
.gm-nanpure-tile { margin: 0; display: grid; justify-items: center; align-content: center; gap: 0; padding: 6px 2px 4px; border-radius: 12px; background: linear-gradient(180deg, var(--np-tile-top), var(--np-tile-bot)); box-shadow: inset 0 -4px 0 var(--np-tile-edge), inset 0 0 0 2px #e8c987, 0 2px 0 rgb(0 0 0 / .35); }
.gm-nanpure-tile img { width: 100%; max-width: 60px; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 1px rgb(80 40 0 / .25)); }
.gm-nanpure-tile figcaption { font-size: min(var(--fs-xs), 15px); font-weight: 700; color: #6a4a2e; white-space: nowrap; letter-spacing: -.04em; }
.gm-nanpure-preview[style*="--n:6"] figcaption { font-size: 12px; letter-spacing: -.1em; }
.gm-nanpure-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gm-nanpure-facts li { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 2px 14px; border-radius: 999px; background: rgb(20 12 50 / .62); box-shadow: inset 0 0 0 2px rgb(255 214 120 / .6); color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.gm-nanpure-facts b { color: var(--np-gold); font-size: var(--fs-lg); }

/* ---------- 遊ぶ 画面: 上に シキウサ、まん中に 盆の 盤（のこりの 高さと 幅の 小さい ほうに 合わせた 正方形） ---------- */
.gm-nanpure-body { gap: 6px; padding-top: 6px; padding-bottom: 4px; padding-inline: 8px; overflow: hidden; }
.gm-nanpure-body .gm-nanpure-host { padding-inline: 4px; }
.gm-nanpure-board.gm-nanpure-tray { border-width: 14px; border-image-width: 14px; }
.gm-nanpure-stage { position: relative; overflow: clip; flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.gm-nanpure-board {
  display: grid; grid-template-columns: repeat(calc(var(--n) / var(--bc)), minmax(0, 1fr)); grid-template-rows: repeat(calc(var(--n) / var(--br)), minmax(0, 1fr));
  gap: 6px; padding: 2px; width: min(100cqw, 100cqh); aspect-ratio: 1;
}
/* 区画（太い 枠の 中）は 1つの くぼみ */
.gm-nanpure-box {
  display: grid; grid-template-columns: repeat(var(--bc), minmax(0, 1fr)); grid-template-rows: repeat(var(--br), minmax(0, 1fr));
  gap: 4px; padding: 4px; min-width: 0; min-height: 0; border-radius: 12px;
  background: rgb(20 8 4 / .38); box-shadow: inset 0 2px 6px rgb(0 0 0 / .55), 0 1px 0 rgb(255 214 120 / .28);
}
.gm-nanpure-board.n6 { gap: 5px; padding: 0; }
.gm-nanpure-board.n6 .gm-nanpure-box { gap: 3px; padding: 3px; border-radius: 10px; }

.gm-nanpure-cell {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; margin: 0;
  box-sizing: border-box; border: 0; border-radius: 10px; background: none; color: #4a2a12; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gm-nanpure-board.n6 .gm-nanpure-cell { border-radius: 8px; }
.gm-nanpure-cell img { position: relative; width: 84%; height: 84%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 2px 1px rgb(80 40 0 / .25)); }
.gm-nanpure-word { font-size: var(--fs-xs); font-weight: 700; }
/* 空き: くぼみの 中の 穴 */
.gm-nanpure-cell.is-empty { background: rgb(255 236 190 / .1); box-shadow: inset 0 2px 4px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 214 120 / .22); }
.gm-nanpure-cell.is-empty.is-peer { background: rgb(255 226 150 / .24); }
/* はじめから ある 絵: 少し 濃い 札（動かせない） */
.gm-nanpure-cell.is-given { cursor: default; background: linear-gradient(180deg, var(--np-given-top), var(--np-given-bot)); box-shadow: inset 0 -3px 0 #b88a3a, inset 0 0 0 1.5px #d9b46c, 0 2px 0 rgb(0 0 0 / .4); }
/* 自分で 置いた 絵: 明るい 札 */
.gm-nanpure-cell.is-placed { background: linear-gradient(180deg, #ffffff, #fff1d2); box-shadow: inset 0 -3px 0 var(--np-tile-edge), inset 0 0 0 2px #f3d48c, 0 2px 0 rgb(0 0 0 / .4); }
.gm-nanpure-cell.is-given.is-peer, .gm-nanpure-cell.is-placed.is-peer { filter: brightness(1.04); }
/* えらんだ マス: 金に 光る */
.gm-nanpure-cell.is-sel { z-index: 1; box-shadow: inset 0 0 0 3px var(--np-gold), 0 0 0 2px #fff6cf, 0 0 16px 3px rgb(255 214 90 / .85); animation: gm-nanpure-glow 1.4s ease-in-out infinite alternate; }
.gm-nanpure-cell.is-sel.is-empty { background: rgb(255 226 150 / .38); }
/* 同じ 絵（えらんだ マスと 同じ 絵が 盤の どこに あるか） */
.gm-nanpure-cell.is-same { box-shadow: inset 0 0 0 3px #f2a93b, 0 2px 0 rgb(0 0 0 / .4); }
.gm-nanpure-cell:focus-visible { outline: 3px solid #fff3a8; outline-offset: -3px; z-index: 2; }
@keyframes gm-nanpure-glow { from { box-shadow: inset 0 0 0 3px var(--np-gold), 0 0 0 2px #fff6cf, 0 0 8px 1px rgb(255 214 90 / .6); } to { box-shadow: inset 0 0 0 3px var(--np-gold), 0 0 0 2px #fff6cf, 0 0 18px 4px rgb(255 214 90 / .95); } }

/* まちがい: 赤い 札 ＋ 角に ×（色と 形の 両方で 伝える） */
.gm-nanpure-cell.is-wrong { background: linear-gradient(180deg, #ffe3e3, #ffc2c2); box-shadow: inset 0 -3px 0 #c0392b, inset 0 0 0 2px var(--np-red), 0 2px 0 rgb(0 0 0 / .4); }
.gm-nanpure-cell.is-wrong img { opacity: .5; }
.gm-nanpure-x {
  position: absolute; right: -3px; top: -3px; display: grid; place-items: center;
  width: 44%; max-width: 26px; aspect-ratio: 1; border-radius: 50%;
  background: var(--np-red); color: #fff; font-weight: 700; font-size: 15px; line-height: 1;
  box-shadow: 0 0 0 2px #fff, 0 2px 3px rgb(0 0 0 / .4);
}
.gm-nanpure-cell.is-conflict { box-shadow: inset 0 0 0 3px var(--np-red), 0 0 12px 2px rgb(255 80 90 / .85); animation: gm-nanpure-blink .35s ease-in-out 3; }
@keyframes gm-nanpure-blink { 50% { filter: brightness(1.25); } }

/* 置いた 瞬間: はずむ ＋ 星が はじける */
.gm-nanpure-cell.fx-pop { animation: gm-nanpure-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
.gm-nanpure-cell.fx-shake { animation: gm-nanpure-shake .36s ease-out; }
.gm-nanpure-burst { position: absolute; inset: -40%; pointer-events: none; background: url('../assets/ui/fx-sparkle.webp') center / contain no-repeat; animation: gm-nanpure-burst .6s ease-out both; z-index: 2; }
/* 行・列・区画が そろった: 順に 金に 光る */
.gm-nanpure-cell.fx-line { animation: gm-nanpure-line .7s ease-out var(--d, 0ms) both; }
@keyframes gm-nanpure-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.14); } 100% { transform: none; } }
@keyframes gm-nanpure-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px) rotate(-3deg); } 45% { transform: translateX(5px) rotate(3deg); } 70% { transform: translateX(-3px); } }
@keyframes gm-nanpure-burst { 0% { transform: scale(.3) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.15) rotate(25deg); opacity: 0; } }
@keyframes gm-nanpure-line { 0% { transform: none; filter: none; } 35% { transform: scale(1.12); filter: brightness(1.25) drop-shadow(0 0 8px #ffd76a); } 100% { transform: none; filter: none; } }

/* ---------- 完成 ---------- */
.gm-nanpure-board.is-clear .gm-nanpure-cell { animation: gm-nanpure-wave .6s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0ms) both; }
.gm-nanpure-board.is-clear .gm-nanpure-box { box-shadow: inset 0 2px 6px rgb(0 0 0 / .45), 0 0 0 2px rgb(255 214 106 / .8), 0 0 14px rgb(255 214 106 / .6); }
.gm-nanpure-board.is-over { filter: drop-shadow(0 8px 14px rgb(0 0 0 / .45)) saturate(.6) brightness(.85); }
@keyframes gm-nanpure-wave { 0% { transform: none; filter: none; } 40% { transform: translateY(-8px) scale(1.08); filter: brightness(1.2) drop-shadow(0 0 6px #ffd76a); } 100% { transform: none; filter: none; } }
.gm-nanpure-celebrate { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.gm-nanpure-celebrate img { position: relative; width: min(88%, 340px); height: auto; filter: drop-shadow(0 6px 12px rgb(30 10 60 / .6)); animation: gm-nanpure-title .7s cubic-bezier(.3, 1.7, .5, 1) .25s both; }
.gm-nanpure-rays { position: absolute; width: min(100cqw, 100cqh); aspect-ratio: 1; background: url('../assets/ui/fx-clear.webp') center / contain no-repeat; animation: gm-nanpure-rays 1.6s ease-out .2s both; }
.gm-nanpure-celebrate.is-calm img, .gm-nanpure-celebrate.is-calm .gm-nanpure-rays { animation: gm-nanpure-fade .3s ease-out both; }
@keyframes gm-nanpure-title { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gm-nanpure-rays { 0% { transform: scale(.4) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.05) rotate(40deg); opacity: .9; } }
@keyframes gm-nanpure-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- ドック: 絵の 札（名前つき）＋「消す」と ハート ---------- */
.gm-nanpure-dock { gap: 6px; padding-top: 6px; }
.gm-nanpure-palette { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.gm-nanpure-pic {
  position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 0;
  min-width: 0; min-height: 66px; padding: 5px 2px 6px; border: 0; border-radius: 14px;
  background: linear-gradient(180deg, var(--np-tile-top), var(--np-tile-bot)); box-shadow: inset 0 -5px 0 var(--np-tile-edge), inset 0 0 0 2px #e8c987, 0 3px 0 rgb(0 0 0 / .45);
  color: #4a2a12; font: inherit; cursor: pointer; transition: transform .1s ease-out; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gm-nanpure-pic img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 1px rgb(80 40 0 / .25)); }
.gm-nanpure-palette.n4 .gm-nanpure-pic img { width: 50px; height: 50px; }
.gm-nanpure-pic span { max-width: 100%; overflow: hidden; font-size: min(var(--fs-xs), 14px); font-weight: 700; line-height: 1.15; white-space: nowrap; letter-spacing: -.06em; color: #6a4a2e; }
.gm-nanpure-pic:active:not(:disabled) { transform: translateY(3px) scale(.96); }
.gm-nanpure-pic[aria-pressed="true"] { box-shadow: inset 0 -5px 0 var(--np-tile-edge), inset 0 0 0 3px var(--np-gold), 0 0 12px 2px rgb(255 214 90 / .8); }
.gm-nanpure-pic:disabled { filter: saturate(.55) brightness(.8); cursor: default; }
.gm-nanpure-palette.n6 .gm-nanpure-pic span { font-size: 12px; letter-spacing: -.1em; }
.gm-nanpure-pic.is-done:not(:disabled) { filter: saturate(.75); }
.gm-nanpure-pic:focus-visible { outline: 3px solid #fff3a8; outline-offset: 2px; }
.gm-nanpure-check { position: absolute; top: -6px; right: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2f9e55; color: #fff; font-style: normal; font-weight: 700; font-size: 13px; box-shadow: 0 0 0 2px #fff; }

.gm-nanpure-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; }
.gm-nanpure-erase { display: block; width: 100%; max-width: 168px; min-height: 52px; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; transition: transform .1s ease-out; touch-action: manipulation; }
.gm-nanpure-erase img { display: block; width: 100%; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .4)); }
.gm-nanpure-erase:active:not(:disabled) { transform: translateY(3px) scale(.97); }
.gm-nanpure-erase:disabled { opacity: .45; filter: grayscale(.5); cursor: default; }
.gm-nanpure-erase:focus-visible { outline: 3px solid #fff3a8; outline-offset: 2px; border-radius: 999px; }
.gm-nanpure-lives { margin: 0; justify-self: end; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 2px 12px; border-radius: 999px; background: rgb(20 12 50 / .62); box-shadow: inset 0 0 0 2px rgb(255 214 120 / .6); }
.gm-nanpure-lives-label { margin-right: 2px; color: #fff; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.gm-nanpure-heart { position: relative; display: inline-block; width: 28px; height: 28px; font-style: normal; }
.gm-nanpure-heart::before { content: '❤'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; line-height: 1; color: #ff4d6d; text-shadow: 0 2px 0 #a3122c, 0 0 6px rgb(255 120 150 / .6); font-style: normal; }
.gm-nanpure-heart.is-off::before { color: rgb(255 255 255 / .22); text-shadow: none; }
.gm-nanpure-heart.fx-break { animation: gm-nanpure-break .5s ease-out; }
@keyframes gm-nanpure-break { 0% { transform: scale(1.5); } 40% { transform: scale(.8) rotate(-15deg); } 100% { transform: none; } }
.gm-nanpure-facts .gm-nanpure-heart { width: 22px; height: 22px; }
.gm-nanpure-facts .gm-nanpure-heart::before { font-size: 19px; }

/* ---------- 動きを 減らす ---------- */
html.reduce-motion .gm-nanpure-host-img, html.reduce-motion .gm-nanpure-cell.is-sel, html.reduce-motion .gm-nanpure-board.is-clear .gm-nanpure-cell { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gm-nanpure-host-img, .gm-nanpure-cell, .gm-nanpure-cell.is-sel, .gm-nanpure-board.is-clear .gm-nanpure-cell, .gm-nanpure-heart, .gm-nanpure-burst { animation: none !important; }
}

/* ---------- 小さい 画面・文字「大」「特大」: 盤を 小さく しすぎない ---------- */
@media (max-height: 660px) {
  .gm-nanpure-host-img { width: 60px; }
  .gm-nanpure-pic { min-height: 60px; }
  .gm-nanpure-pic img, .gm-nanpure-palette.n4 .gm-nanpure-pic img { width: 40px; height: 40px; }
  .gm-nanpure-host.is-big .gm-nanpure-host-img { width: 96px; }
}
html.text-large .gm-nanpure-bubble .speaker, html.text-xlarge .gm-nanpure-bubble .speaker { display: none; }
html.text-large .gm-nanpure-bubble, html.text-xlarge .gm-nanpure-bubble { font-size: var(--fs-xs); min-height: calc(1.45em * 2 + 12px); margin-bottom: 10px; }
html.text-large .gm-nanpure-host.is-big .gm-nanpure-bubble, html.text-xlarge .gm-nanpure-host.is-big .gm-nanpure-bubble { font-size: var(--fs-sm); margin-bottom: 30px; }
html.text-large .gm-nanpure-host-img, html.text-xlarge .gm-nanpure-host-img { width: 56px; }
html.text-xlarge .gm-nanpure-pic span { display: none; }
html.text-xlarge .gm-nanpure-pic { grid-template-rows: 1fr; min-height: 56px; }
html.text-xlarge .gm-nanpure-lives-label { display: none; }
html.text-large .gm-nanpure-intro, html.text-xlarge .gm-nanpure-intro { gap: 8px; }
html.text-xlarge .gm-nanpure-tile figcaption { display: none; }
/* 低い 画面で 文字「特大」: 遊ぶ 画面の 立ち絵を 隠して 盤の マスを 大きく（吹き出しは 横いっぱいで 2行） */
@media (max-height: 700px) {
  html.text-xlarge .gm-nanpure-host.is-play .gm-nanpure-host-img { display: none; }
  html.text-xlarge .gm-nanpure-host.is-play .gm-nanpure-bubble { margin-bottom: 0; border-radius: 18px; }
}

/* v2.6: 光の 画像は やめ、粒（src/fx.js）に */
.gm-nanpure-burst { background: none !important; animation: none !important; inset: 0 !important; }
.gm-nanpure-rays { display: none; }