/* うちの子パズルの紹介ページ：「あそんで わかる」。
   どの節にも さわれる物を 1つ：うちの子（なでる）・写真と うちの子の さかいめ・止まった スマホの 手順・
   その場で あそべる パズル・きりかわる スマホ・せいかくの つまみ。
   見た目は アプリの 部品（リボン・板・台座・厚みの ボタン）のまま。共通の 部品は wanju.css、動きは puzzle.js。
   スクリプトが 動かなくても・動きを 減らす 設定でも、止まった形で 中身は すべて 読める。 */

body.page-puzzle {
  --p-ink: #3d2416;
  --p-soft: #5a3a28;
  --g-nagomi: #f26a8d;
  --g-wanpaku: #ff9a2e;
  --g-osumashi: #3f8fe0;
  --g-mypace: #8a5be0;
}

/* ---------- 節の 見出し：小さな リボン（何の 節か）＋ 大きな 言いきりの 見出し ---------- */
.p-head {
  margin: 0 0 clamp(32px, 4.6vw, 56px);
}

.p-head.center {
  text-align: center;
}

.p-head.center .p-lead {
  margin-inline: auto;
}

.p-head .ribbon {
  height: 58px;
  min-width: 7.5em;
  padding: 0 12px 11px;
  border-width: 0 46px;
  border-image-width: 0 46px;
  font-size: 19px;
}

h2.ribbon {
  /* よくある質問は リボンが 見出し */
  height: 70px;
  border-width: 0 56px;
  border-image-width: 0 56px;
  font-size: 25px;
}

.p-h2 {
  margin: 14px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--p-ink);
  font-feature-settings: "palt";
}

.p-lead {
  max-width: 34em;
  margin: 18px 0 0;
  font-size: clamp(15.5px, 1.4vw, 18px);
  font-weight: 700;
  line-height: 1.9;
  color: var(--p-soft);
}

.p-lead.on-leaf {
  color: var(--p-ink);
}

.p-fine {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--p-soft);
}

/* ---------- ヒーロー：うちの子は ボタン（おすと 目を とじて はねる・ひとこと） ---------- */
.page-puzzle .hero-stage .pet {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page-puzzle .hero-stage .pet:focus-visible {
  outline: 3.5px solid #fff;
  outline-offset: 2px;
  border-radius: 28px;
  box-shadow: 0 0 0 7px rgba(74, 42, 24, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .page-puzzle .hero-stage .pet.is-happy img {
    animation: p-hop 0.7s var(--pop);
  }
}

@keyframes p-hop {
  0% {
    transform: scale(1.08, 0.88);
  }

  35% {
    transform: translateY(-14%) scale(0.95, 1.07);
  }

  70% {
    transform: translateY(0) scale(1.05, 0.93);
  }

  100% {
    transform: none;
  }
}

.page-puzzle .hero-stage .pet .say {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 5;
  translate: -50% 0;
  padding: 8px 14px 9px;
  border: 2.5px solid var(--edge);
  border-radius: 16px;
  background: #fff;
  font-family: var(--display);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--p-ink);
  filter: drop-shadow(0 4px 0 rgba(74, 42, 24, 0.18));
  opacity: 0;
  scale: 0.6;
  transform-origin: 50% 100%;
  transition: opacity 0.2s, scale 0.35s var(--pop);
  pointer-events: none;
}

.page-puzzle .hero-stage .pet.is-talk .say {
  opacity: 1;
  scale: 1;
}

/* しっぽ：こげ茶の 三角の 上に 白い 三角（ほかの ふきだしと 同じ 作り） */
.page-puzzle .hero-stage .pet .say::before,
.page-puzzle .hero-stage .pet .say::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 10px);
  width: 20px;
  height: 13px;
  background: var(--edge);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.page-puzzle .hero-stage .pet .say::after {
  top: calc(100% - 2.5px);
  left: calc(50% - 7px);
  width: 14px;
  height: 9px;
  background: #fff;
}

/* ---------- 写真 → うちの子：さかいめを うごかして くらべる ---------- */
.p-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.p-demo .p-head {
  margin: 0;
}

.p-tabs {
  display: flex;
  gap: 10px;
  margin: 26px 0 0;
}

.p-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px 3px 16px;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(#fff, #fff 46%, #f6e4cc 46.5%);
  box-shadow: inset 0 -4px 0 #cfb290, 0 3px 0 rgba(74, 42, 24, 0.2);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1;
  color: var(--p-ink);
  cursor: pointer;
  transition: translate 0.2s var(--pop);
}

.p-tab img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.p-tab:hover {
  translate: 0 -2px;
}

.p-tab[aria-selected="true"] {
  background: linear-gradient(#ffbe6b, #f59d4f 46%, #f07d2a 46.5%);
  box-shadow: inset 0 -4px 0 #c45a12, inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(74, 42, 24, 0.2);
  color: #fff;
}

.p-tab[aria-selected="true"] img {
  filter: brightness(0) invert(1);
}

.p-frames {
  display: grid;
  gap: 24px;
}

.p-frame {
  --x: 50%;
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 560px);
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid var(--edge);
  border-radius: 32px;
  background: #f3e6d4;
  box-shadow: 0 6px 0 rgba(74, 42, 24, 0.16), 0 34px 60px -30px rgba(74, 42, 24, 0.55);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.p-frame[hidden] {
  display: none;
}

.p-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右がわ（さかいめ より 右）は アプリが 描いた うちの子。地は アプリの おにわの 色 */
.p-art {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--x));
  background:
    radial-gradient(60% 50% at 50% 92%, rgba(122, 186, 74, 0.55), transparent 70%),
    radial-gradient(circle at 50% 40%, #fffdf3, #fff1d6 55%, #ffe1b0);
}

.p-art img {
  position: absolute;
  left: 50%;
  bottom: 3%;
  height: 92%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  filter: drop-shadow(0 10px 10px rgba(74, 42, 24, 0.25));
}

.p-label {
  position: absolute;
  top: 14px;
  z-index: 2;
  padding: 7px 14px 8px;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.94);
  font-family: var(--display);
  font-size: 14px;
  line-height: 1;
  color: var(--p-ink);
  pointer-events: none;
}

.p-label.l {
  left: 14px;
}

.p-label.r {
  right: 14px;
  background: #ffcf6e;
}

/* さかいめ：白い線と、まんなかの つまみ（左右の 矢印） */
.p-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  z-index: 3;
  width: 0;
  cursor: ew-resize;
  outline: none;
}

.p-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2.5px;
  width: 5px;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(74, 42, 24, 0.35), 0 0 16px rgba(74, 42, 24, 0.25);
}

.p-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 54px;
  height: 54px;
  translate: -50% -50%;
  border: 3px solid var(--edge);
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M22 17l-9 10 9 10M32 17l9 10-9 10' fill='none' stroke='%234a2a18' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(#fff, #fff 46%, #f6e4cc 46.5%);
  box-shadow: inset 0 -4px 0 #cfb290, 0 4px 0 rgba(74, 42, 24, 0.22);
  transition: scale 0.2s var(--pop);
}

.p-handle:focus-visible::after {
  box-shadow: inset 0 -4px 0 #cfb290, 0 0 0 4px #fff, 0 0 0 8px var(--sky, #3aa0e8);
}

.p-frame.is-drag .p-handle::after {
  scale: 1.12;
}

/* ---------- あそびかた：止まった スマホと、すすむ 手順 ----------
   色の帯は 歩く肉球を はみ出させない ため overflow: hidden だが、それだと 帯が スクロールの 箱に なって
   スマホが 止まらない（sticky が 効かない）。clip は 切るだけで スクロールの 箱に ならない */
.page-puzzle #how.band {
  overflow: clip;
}

.p-walk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.p-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "no h" "no p";
  column-gap: 20px;
  align-content: center;
  min-height: 62svh;
  padding: 0 0 0 4px;
}

.p-step .step-no {
  grid-area: no;
  align-self: start;
  position: static;
  translate: none;
  width: 64px;
  height: 64px;
  margin-top: 2px;
  font-size: 30px;
  transition: filter 0.4s;
}

.p-step h3 {
  grid-area: h;
  margin: 4px 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 46px);
  line-height: 1.3;
  color: var(--p-ink);
  transition: color 0.4s;
}

.p-step p {
  grid-area: p;
  margin: 0;
  max-width: 24em;
  font-size: clamp(15.5px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.9;
  color: var(--p-soft);
  transition: color 0.4s;
}

/* JS が 動くとき：いまの 手順だけ こく（うすい 字も 4.5:1 は 残す） */
html:not(.no-js) .p-step:not(.is-on) h3,
html:not(.no-js) .p-step:not(.is-on) p {
  color: #4f6f86;
}

html:not(.no-js) .p-step:not(.is-on) .step-no {
  filter: grayscale(0.85) brightness(1.08);
}

.p-mini {
  display: none;
}

.p-walk-phone {
  --pw: clamp(240px, min(24vw, calc((100svh - var(--header) - 80px) / 2.08)), 330px);
  position: sticky;
  top: calc(var(--header) + max(20px, (100svh - var(--header) - var(--pw) * 2.08) / 2));
  padding-block: 8svh;
}

.p-walk-phone .phone {
  rotate: 3deg;
}

.p-walk-phone .phone > img {
  opacity: 0;
  transition: opacity 0.45s;
}

.p-walk-phone .phone > img.is-on {
  opacity: 1;
}

/* ---------- おさんぽパズル：その場で あそべる 盤面 ---------- */
.p-play {
  display: grid;
  grid-template-columns: auto minmax(0, 360px);
  justify-content: center;
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.p-game {
  --cell: clamp(40px, calc((100vw - var(--gutter) * 2 - 44px) / 7), 66px);
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 30px;
}

.p-hud {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.p-goal,
.p-moves {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 4px 16px 6px 8px;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(#fff, #fff 46%, #f6e4cc 46.5%);
  box-shadow: inset 0 -4px 0 #cfb290, 0 3px 0 rgba(74, 42, 24, 0.2);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  color: var(--p-ink);
}

.p-goal img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.p-goal b,
.p-moves b {
  font-weight: 400;
  font-size: 24px;
  color: #c2410c;
  font-variant-numeric: tabular-nums;
}

.p-moves {
  padding-left: 16px;
}

.p-moves.is-low b {
  color: #d1123f;
}

@media (prefers-reduced-motion: no-preference) {
  .p-goal.is-bump,
  .p-moves.is-bump {
    animation: p-bump 0.35s var(--pop);
  }
}

@keyframes p-bump {
  40% {
    scale: 1.12;
  }
}

/* 盤面：アプリの 盤の 色（明るい 市松）。指で なぞっても ページが 動かない（touch-action: none） */
/* 大きさ：マス 7つ ＋ 内側の すきま 6px×2 ＋ ふち 3px×2（puzzle.js の 位置の 計算も 同じ） */
.p-board {
  position: relative;
  width: calc(var(--cell) * 7 + 18px);
  height: calc(var(--cell) * 7 + 18px);
  padding: 0;
  overflow: hidden;
  border: 3px solid #6b4a2b;
  border-radius: 20px;
  background:
    conic-gradient(#fff6e2 25%, #ffe9c4 0 50%, #fff6e2 0 75%, #ffe9c4 0) 6px 6px / calc(var(--cell) * 2) calc(var(--cell) * 2),
    #fff6e2;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 3px rgba(214, 160, 90, 0.35), 0 4px 0 rgba(74, 42, 24, 0.18);
  touch-action: none;
  outline: none;
}

.p-board:focus-visible {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), 0 0 0 4px #fff, 0 0 0 8px var(--sky, #3aa0e8);
}

.p-still {
  --pw: min(260px, 70%);
  margin: 10px auto;
}

html:not(.no-js) .p-still {
  display: none;
}

/* JS が 無いときは あそべないので、のこりの 数と あそびかたは 出さない（アプリの 画面の 写真だけ） */
html.no-js .p-hud,
html.no-js .p-help {
  display: none;
}

.p-tile {
  --r: 0;
  --c: 0;
  position: absolute;
  left: 6px;
  top: 6px;
  width: var(--cell);
  height: var(--cell);
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)));
  transition: transform var(--t, 0.16s) var(--ease, cubic-bezier(0.3, 0.9, 0.4, 1));
  cursor: pointer;
}

.p-tile .pc {
  position: absolute;
  inset: 6%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 2px rgba(74, 42, 24, 0.28));
  transition: scale 0.15s var(--pop), filter 0.15s;
}

.p-tile.k0 .pc { background-image: url(../img/piece-ball.webp?v=c19e6dc5); }
.p-tile.k1 .pc { background-image: url(../img/piece-fish.webp?v=91e5944a); }
.p-tile.k2 .pc { background-image: url(../img/piece-cookie.webp?v=e2633817); }
.p-tile.k3 .pc { background-image: url(../img/piece-clover.webp?v=b6230290); }
.p-tile.k4 .pc { background-image: url(../img/piece-bone.webp?v=e0de8c90); }
.p-tile.k5 .pc { background-image: url(../img/piece-yarn.webp?v=d590a23d); }

.p-tile.sp-bomb .pc { background-image: url(../img/special-bomb.webp?v=440354fc); }
.p-tile.sp-ball .pc { background-image: url(../img/piece-treat-ball.webp?v=688d83f3); }
.p-tile.sp-frisbee .pc { background-image: url(../img/piece-frisbee.webp?v=b657d0db); }

/* しっぽフリフリ：アプリと 同じ、ピースに 白い しま3本と、外向きの 矢印 */
.p-tile.sp-h .pc::before,
.p-tile.sp-v .pc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(var(--sd, 0deg), transparent 0 26%, rgba(255, 255, 255, 0.9) 26% 33%, transparent 33% 40%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.p-tile.sp-v .pc::before {
  --sd: 90deg;
}

/* しまは ピースの 形の 中だけ（url を 変数に 入れると 道の 起点が ずれるので、1つずつ 書く） */
.p-tile.k0 .pc::before { -webkit-mask-image: url(../img/piece-ball.webp?v=c19e6dc5); mask-image: url(../img/piece-ball.webp?v=c19e6dc5); }
.p-tile.k1 .pc::before { -webkit-mask-image: url(../img/piece-fish.webp?v=91e5944a); mask-image: url(../img/piece-fish.webp?v=91e5944a); }
.p-tile.k2 .pc::before { -webkit-mask-image: url(../img/piece-cookie.webp?v=e2633817); mask-image: url(../img/piece-cookie.webp?v=e2633817); }
.p-tile.k3 .pc::before { -webkit-mask-image: url(../img/piece-clover.webp?v=b6230290); mask-image: url(../img/piece-clover.webp?v=b6230290); }
.p-tile.k4 .pc::before { -webkit-mask-image: url(../img/piece-bone.webp?v=e0de8c90); mask-image: url(../img/piece-bone.webp?v=e0de8c90); }
.p-tile.k5 .pc::before { -webkit-mask-image: url(../img/piece-yarn.webp?v=d590a23d); mask-image: url(../img/piece-yarn.webp?v=d590a23d); }

.p-tile.sp-h::before,
.p-tile.sp-h::after,
.p-tile.sp-v::before,
.p-tile.sp-v::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  height: 22%;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.9));
  pointer-events: none;
}

.p-tile.sp-h::before {
  translate: 175% -50%;
}

.p-tile.sp-h::after {
  translate: -275% -50%;
  rotate: 180deg;
}

.p-tile.sp-v::before {
  translate: -50% 175%;
  rotate: 90deg;
}

.p-tile.sp-v::after {
  translate: -50% -275%;
  rotate: -90deg;
}

@media (prefers-reduced-motion: no-preference) {
  .p-tile.sp-ball .pc {
    animation: p-spin 3.2s linear infinite;
  }

  .p-tile.sp-bomb .pc {
    animation: p-wobble 1.1s ease-in-out infinite;
  }

  .p-tile.sp-h::before,
  .p-tile.sp-h::after,
  .p-tile.sp-v::before,
  .p-tile.sp-v::after {
    animation: p-chev 0.7s ease-in-out infinite alternate;
  }
}

@keyframes p-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes p-wobble {
  50% {
    scale: 1.07 0.94;
  }
}

@keyframes p-chev {
  to {
    opacity: 0.55;
  }
}

.p-tile.is-sel .pc {
  scale: 1.14;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 3px 2px rgba(74, 42, 24, 0.28));
}

.p-cursor {
  position: absolute;
  left: 6px;
  top: 6px;
  width: var(--cell);
  height: var(--cell);
  border: 3px dashed #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(74, 42, 24, 0.55);
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)));
  transition: transform 0.12s;
  pointer-events: none;
  opacity: 0;
}

.p-board:focus-visible .p-cursor {
  opacity: 1;
}

.p-tile.is-gone {
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .p-tile.is-pop .pc {
    animation: p-pop 0.24s ease-in forwards;
  }

  .p-tile.is-shake .pc {
    animation: p-shake 0.3s ease-in-out;
  }
}

@keyframes p-pop {
  35% {
    scale: 1.25;
    opacity: 1;
  }

  100% {
    scale: 0.2;
    opacity: 0;
  }
}

@keyframes p-shake {
  25% {
    translate: -8% 0;
  }

  75% {
    translate: 8% 0;
  }
}

/* わざの 光（しっぽフリフリの 線・ボムの 輪・おやつボールの きらめき・とぶ フリスビー）と ほめことば */
.p-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 17px;
  pointer-events: none;
}

.p-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(6px + var(--r) * var(--cell));
  height: var(--cell);
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.95) 35% 65%, transparent);
  filter: drop-shadow(0 0 8px #ffe48a);
  animation: p-beam 0.38s ease-out forwards;
}

.p-beam.v {
  top: 0;
  bottom: 0;
  left: calc(6px + var(--c) * var(--cell));
  right: auto;
  width: var(--cell);
  height: auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 35% 65%, transparent);
}

@keyframes p-beam {
  from {
    opacity: 1;
    scale: 0.2 1;
  }

  60% {
    opacity: 1;
    scale: 1 1;
  }

  to {
    opacity: 0;
    scale: 1 0.6;
  }
}

.p-beam.v {
  animation-name: p-beam-v;
}

@keyframes p-beam-v {
  from {
    opacity: 1;
    scale: 1 0.2;
  }

  60% {
    opacity: 1;
    scale: 1 1;
  }

  to {
    opacity: 0;
    scale: 0.6 1;
  }
}

.p-ring {
  position: absolute;
  left: calc(6px + (var(--c) + 0.5) * var(--cell));
  top: calc(6px + (var(--r) + 0.5) * var(--cell));
  width: calc(var(--cell) * 5);
  height: calc(var(--cell) * 5);
  margin: calc(var(--cell) * -2.5) 0 0 calc(var(--cell) * -2.5);
  border: 6px solid #fff3b0;
  border-radius: 50%;
  box-shadow: 0 0 18px #ffd34d, inset 0 0 18px #ffd34d;
  animation: p-ring 0.42s ease-out forwards;
}

@keyframes p-ring {
  from {
    opacity: 1;
    scale: 0.2;
  }

  to {
    opacity: 0;
    scale: 1;
  }
}

.p-spark {
  position: absolute;
  left: calc(6px + (var(--c) + 0.5) * var(--cell));
  top: calc(6px + (var(--r) + 0.5) * var(--cell));
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c2 10 8 16 18 18-10 2-16 8-18 18-2-10-8-16-18-18C12 18 18 12 20 2Z' fill='%23fff7b0' stroke='%23f0a020' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: p-spark 0.5s ease-out forwards;
}

@keyframes p-spark {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(0.4) rotate(0);
  }

  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1) rotate(120deg);
  }
}

/* とぶ フリスビー：横は まっすぐ、縦は 少し ふくらむ（弧に 見える） */
.p-disc {
  position: absolute;
  left: calc(6px + (var(--c) + 0.5) * var(--cell));
  top: calc(6px + (var(--r) + 0.5) * var(--cell));
  width: var(--cell);
  height: var(--cell);
  margin: calc(var(--cell) / -2) 0 0 calc(var(--cell) / -2);
  background: url(../img/piece-frisbee.webp?v=b657d0db) center / 80% no-repeat;
  filter: drop-shadow(0 8px 6px rgba(74, 42, 24, 0.3));
  transition: left 0.42s cubic-bezier(0.3, 0.6, 0.4, 1), top 0.42s cubic-bezier(0.5, -0.6, 0.5, 1), scale 0.42s ease-out;
}

.p-disc.is-fly {
  scale: 1.25;
  rotate: 340deg;
  transition: left 0.42s cubic-bezier(0.3, 0.6, 0.4, 1), top 0.42s cubic-bezier(0.5, -0.6, 0.5, 1), scale 0.42s ease-out, rotate 0.42s linear;
}

.p-word {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 4;
  width: min(70%, 320px);
  aspect-ratio: 480 / 191;
  translate: -50% -50%;
  background: center / contain no-repeat;
  filter: drop-shadow(0 6px 0 rgba(74, 42, 24, 0.18));
  animation: p-word 0.95s var(--pop) forwards;
}

.p-word.iine {
  background-image: url(../img/word-iine.webp?v=297ed767);
}

.p-word.wonderful {
  aspect-ratio: 480 / 165;
  background-image: url(../img/word-wonderful.webp?v=51cd7dbc);
}

@keyframes p-word {
  0% {
    opacity: 0;
    scale: 0.3;
    rotate: -8deg;
  }

  25% {
    opacity: 1;
    scale: 1.08;
    rotate: 3deg;
  }

  75% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  100% {
    opacity: 0;
    scale: 1.1;
  }
}

.p-help {
  max-width: calc(var(--cell) * 7 + 18px);
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--p-soft);
}

.p-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* クリア・おしい の 札（盤面の 上に） */
.p-result {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  border-radius: 30px;
  background: rgba(255, 249, 238, 0.93);
  text-align: center;
  animation: p-in 0.35s var(--out);
}

.p-result[hidden] {
  display: none;
}

@keyframes p-in {
  from {
    opacity: 0;
    scale: 0.94;
  }
}

.p-result-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 60px);
  line-height: 1.1;
  color: #fff;
  -webkit-text-stroke: 0.18em #c45a12;
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 #7a3410);
}

.p-stars {
  display: flex;
  gap: 6px;
  margin: 6px 0 2px;
}

.p-stars i {
  width: 46px;
  height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l5.2 10.6 11.6 1.7-8.4 8.2 2 11.6L20 29.6 9.6 35.1l2-11.6-8.4-8.2 11.6-1.7z' fill='%23e8dccb' stroke='%23a08a70' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.p-stars i.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l5.2 10.6 11.6 1.7-8.4 8.2 2 11.6L20 29.6 9.6 35.1l2-11.6-8.4-8.2 11.6-1.7z' fill='%23ffc53d' stroke='%234a2a18' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  .p-stars i.on {
    animation: p-star 0.5s var(--pop) both;
  }
}

@keyframes p-star {
  from {
    scale: 0;
    rotate: -40deg;
  }
}

.p-result-say {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 18px;
  color: var(--p-ink);
}

.p-result-note {
  max-width: 22em;
  margin: 2px 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--p-soft);
}

/* となりの こむぎ（そろえると ほめて くれる。セリフは アプリの パズルの 場面） */
.p-side {
  display: grid;
  gap: 18px;
}

.p-buddy {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.p-buddy img {
  width: 112px;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 6px rgba(30, 80, 20, 0.3));
}

@media (prefers-reduced-motion: no-preference) {
  .p-buddy.is-cheer img {
    animation: p-hop 0.7s var(--pop);
  }
}

.p-buddy-say {
  position: relative;
  margin: 0 0 20px;
  padding: 12px 16px 13px;
  border: 2.5px solid var(--edge);
  border-radius: 18px;
  background: #fff;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.4;
  color: var(--p-ink);
  filter: drop-shadow(0 4px 0 rgba(74, 42, 24, 0.16));
}

.p-buddy-say::before,
.p-buddy-say::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 14px;
  height: 20px;
  margin-top: -10px;
  background: var(--edge);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.p-buddy-say::after {
  right: calc(100% - 3px);
  width: 11px;
  height: 15px;
  margin-top: -7.5px;
  background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .p-buddy-say.is-new {
    animation: p-say 0.35s var(--pop);
  }
}

@keyframes p-say {
  from {
    scale: 0.7;
    opacity: 0.4;
  }
}

.p-specials .chips {
  grid-template-columns: 1fr;
}

/* ---------- おせわ・きせかえ：札で きりかわる 大きな スマホ ---------- */
.p-tour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.p-tour .p-head {
  margin-bottom: 28px;
}

.p-tour-list {
  display: grid;
  gap: 10px;
}

.p-tour-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 18px 14px 12px;
  overflow: hidden;
  border: 2.5px solid transparent;
  border-radius: 22px;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--p-ink);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.p-tour-tab:hover {
  background: rgba(255, 255, 255, 0.55);
}

.p-tour-tab[aria-pressed="true"] {
  border-color: var(--edge);
  background: linear-gradient(#fffdf7, #fff1dc);
  box-shadow: inset 0 -5px 0 rgba(214, 160, 90, 0.22), inset 0 2px 0 #fff, 0 4px 0 rgba(74, 42, 24, 0.16);
}

.p-tour-tab .pedestal {
  width: 56px;
  height: 56px;
}

.p-tour-tab .t b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.35;
}

.p-tour-tab .t > span {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--p-soft);
}

/* 自動で すすむ ときの のこり時間（下の 細い 線） */
.p-tour-tab .bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 3px;
  border-radius: 3px;
  background: #f07d2a;
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}

.p-tour.is-auto .p-tour-tab[aria-pressed="true"] .bar {
  opacity: 1;
  animation: p-bar var(--dur, 5s) linear forwards;
}

@keyframes p-bar {
  to {
    transform: scaleX(1);
  }
}

.p-tour-phone .phone {
  --pw: clamp(250px, 25vw, 330px);
  rotate: -3deg;
}

.p-tour-phone .phone > img {
  opacity: 0;
  transition: opacity 0.4s;
}

.p-tour-phone .phone > img.is-on {
  opacity: 1;
}

/* ---------- せいかく 16タイプ：アプリと 同じ つまみ ---------- */
.p-typer {
  display: grid;
  grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.p-dials {
  display: grid;
  gap: 18px;
  padding: 22px 22px 20px;
}

.p-dial label {
  display: block;
}

.p-dial label b {
  display: inline;
  margin-right: 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  color: var(--p-ink);
}

.p-dial label span {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-soft);
}

.p-range {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) 5.2em;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-ink);
}

.p-range > span:last-child {
  text-align: right;
}

.p-range input {
  --v: 50%;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.p-range input::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid var(--edge);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--fill, #8a5be0) var(--v), #efe2d0 0);
}

.p-range input::-moz-range-track {
  height: 8px;
  border: 2px solid var(--edge);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--fill, #8a5be0) var(--v), #efe2d0 0);
}

.p-range input::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 2.5px solid var(--edge);
  border-radius: 50%;
  background: linear-gradient(#fff, #fff 50%, #f3e2c8 50.5%);
  box-shadow: 0 3px 0 rgba(74, 42, 24, 0.25);
  -webkit-appearance: none;
  appearance: none;
}

.p-range input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--edge);
  border-radius: 50%;
  background: linear-gradient(#fff, #fff 50%, #f3e2c8 50.5%);
  box-shadow: 0 3px 0 rgba(74, 42, 24, 0.25);
}

.p-range input:focus-visible {
  outline: 3px solid var(--sky, #3aa0e8);
  outline-offset: 2px;
  border-radius: 8px;
}

.p-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 2px dashed rgba(122, 74, 32, 0.25);
  font-size: 13px;
  font-weight: 700;
  color: var(--p-soft);
}

.p-presets button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 2px 14px 4px 4px;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(#fff, #fff 46%, #f6e4cc 46.5%);
  box-shadow: inset 0 -4px 0 #cfb290, 0 3px 0 rgba(74, 42, 24, 0.2);
  font-family: var(--display);
  font-size: 14px;
  line-height: 1;
  color: var(--p-ink);
  cursor: pointer;
  transition: translate 0.2s var(--pop);
}

.p-presets button:hover {
  translate: 0 -2px;
}

.p-presets button img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.p-types {
  display: grid;
  gap: 18px;
}

.p-map {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 10px;
}

.p-axis {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--p-soft);
}

.p-axis.y {
  grid-row: 1;
  flex-direction: column;
  align-items: center;
}

.p-axis.y span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.02em;
  line-height: 1;
}

.p-axis.y span:first-child::before {
  content: "↑ ";
}

.p-axis.y span:last-child::after {
  content: " ↓";
}

.p-axis.x {
  grid-column: 2;
}

.p-axis.x span:first-child::before {
  content: "← ";
}

.p-axis.x span:last-child::after {
  content: " →";
}

.p-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-grid li {
  position: relative;
  display: grid;
  place-items: center;
  container-type: inline-size;
  min-height: clamp(62px, 7vw, 86px);
  padding: 8px 4px;
  border: 2.5px solid color-mix(in srgb, var(--g) 70%, #4a2a18);
  border-radius: 18px;
  background: color-mix(in srgb, var(--g) 16%, #fff);
  text-align: center;
  transition: background-color 0.3s, scale 0.3s var(--pop), box-shadow 0.3s;
}

.p-grid li b {
  font-family: var(--display);
  font-weight: 400;
  font-size: min(16px, 15.5cqw);
  line-height: 1.25;
  white-space: nowrap;
  font-feature-settings: "palt";
  color: color-mix(in srgb, var(--g) 45%, #2a1408);
}

.g-nagomi { --g: var(--g-nagomi); }
.g-wanpaku { --g: var(--g-wanpaku); }
.g-osumashi { --g: var(--g-osumashi); }
.g-mypace { --g: var(--g-mypace); }

.p-grid li.is-on {
  z-index: 1;
  background: var(--g);
  scale: 1.06;
  box-shadow: 0 6px 0 rgba(74, 42, 24, 0.2), 0 0 0 4px #fff;
}

.p-grid li.is-on b {
  color: #fff;
  -webkit-text-stroke: 0.2em color-mix(in srgb, var(--g) 55%, #2a1408);
  paint-order: stroke fill;
}

.p-grid .who {
  position: absolute;
  right: -6px;
  top: -12px;
  width: 38px;
  height: 38px;
  padding: 2px;
  border: 2px solid var(--edge);
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.p-card {
  padding: 18px 22px 20px;
  border: 3px solid color-mix(in srgb, var(--g) 70%, #4a2a18);
  border-radius: 24px;
  background: linear-gradient(color-mix(in srgb, var(--g) 10%, #fff), #fff);
  box-shadow: 0 5px 0 rgba(74, 42, 24, 0.16);
}

.p-card-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.p-card-name b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  color: #fff;
  -webkit-text-stroke: 0.2em color-mix(in srgb, var(--g) 50%, #2a1408);
  paint-order: stroke fill;
}

.p-card-name span {
  padding: 5px 12px 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--g) 80%, #4a2a18);
  font-family: var(--display);
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

.p-card-desc {
  margin: 0 0 10px;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--p-ink);
}

.p-card-speech {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--p-soft);
}

.p-card-speech > span:first-child {
  flex: none;
  padding: 3px 10px 4px;
  border: 2px solid var(--edge);
  border-radius: 99px;
  background: #fff;
  font-size: 12.5px;
  color: var(--p-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .p-card.is-new {
    animation: p-say 0.35s var(--pop);
  }
}

/* ---------- 幅ごと ---------- */
@media (max-width: 1000px) {
  .p-play {
    grid-template-columns: auto;
  }

  .p-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .p-typer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .p-demo,
  .p-walk,
  .p-tour {
    grid-template-columns: 1fr;
  }

  /* あそびかた：手順ごとに スマホ（止める スマホは 出さない） */
  .p-walk-phone {
    display: none;
  }

  .p-mini {
    --pw: min(210px, 56vw);
    grid-area: phone;
    display: block;
    margin: 0 auto 18px;
  }

  .p-step {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas: "phone phone" "no h" "p p";
    column-gap: 12px;
    align-items: center;
    min-height: 0;
    padding: 28px 0;
  }

  .p-step .step-no {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .p-step h3 {
    margin: 0;
  }

  .p-step p {
    margin-top: 10px;
  }

  .p-step + .p-step {
    border-top: 2px dashed rgba(27, 90, 138, 0.25);
  }

  html:not(.no-js) .p-step:not(.is-on) h3,
  html:not(.no-js) .p-step:not(.is-on) p {
    color: var(--p-soft);
  }

  html:not(.no-js) .p-step:not(.is-on) .step-no {
    filter: none;
  }

  .p-tour-phone {
    order: -1;
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .p-head .ribbon {
    height: 50px;
    border-width: 0 40px;
    border-image-width: 0 40px;
    padding-bottom: 9px;
    font-size: 16px;
  }

  .p-h2 {
    font-size: clamp(28px, 8.4vw, 36px);
  }

  .p-frame {
    border-radius: 24px;
  }

  .p-game {
    padding: 12px 10px 12px;
    border-radius: 24px;
  }

  .p-goal,
  .p-moves {
    min-height: 42px;
    font-size: 13px;
  }

  .p-goal img {
    width: 30px;
    height: 30px;
  }

  .p-goal b,
  .p-moves b {
    font-size: 20px;
  }

  .p-side {
    grid-template-columns: 1fr;
  }

  .p-buddy {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .p-buddy img {
    width: 84px;
  }

  .p-tour-tab {
    padding: 10px 12px 12px 10px;
  }

  .p-tour-tab .pedestal {
    width: 48px;
    height: 48px;
  }

  .p-tour-tab .t b {
    font-size: 16.5px;
  }

  /* せまい画面は いまの 札だけ 説明を 出す */
  html:not(.no-js) .p-tour-tab:not([aria-pressed="true"]) .t > span {
    display: none;
  }

  .p-dials {
    padding: 18px 16px;
  }

  .p-range {
    grid-template-columns: 4.6em minmax(0, 1fr) 4.6em;
    font-size: 12px;
  }

  .p-grid {
    gap: 6px;
  }

  .p-grid li {
    min-height: 58px;
    border-radius: 14px;
  }


  .p-grid .who {
    width: 30px;
    height: 30px;
    top: -10px;
    right: -5px;
  }
}

/* 動きを 減らす 設定：さかいめの 自動の うごき・パズルの 落ちる うごきは JS が しない（0秒） */
@media (prefers-reduced-motion: reduce) {
  .p-tile {
    transition: none;
  }
}