/* ---------- 遊び方 ---------- */
#howto {
  z-index: 30;
  display: none;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 0 calc(max(16px, env(safe-area-inset-bottom)) + var(--bottom-ui));
}
#howto.show { display: flex; }
.howto-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px;
}
.howto-head h2 {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  font-size: 1.3rem;
  letter-spacing: .1em;
}
#howtoClose {
  width: 40px; height: 40px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
}
.howto-pages {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.howto-pages::-webkit-scrollbar { display: none; }
.howto-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow-y: auto;
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  -webkit-user-select: text;
  user-select: text;
}
.howto-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 18px 18px 20px;
  box-shadow: 0 4px 0 var(--ink);
}
.howto-card .step { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: #8a8070; }
.howto-card h3 { margin: 4px 0 12px; font-size: 1.3rem; }
.howto-card p { font-size: .95rem; line-height: 1.75; }
.howto-card p + p { margin-top: 8px; }
.howto-card b { background: linear-gradient(transparent 60%, #ffe27a 60%); }
.howto-card ul { margin: 8px 0 0 1.2em; font-size: .95rem; line-height: 1.75; }
.howto-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 16px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--board), var(--board-dark));
  flex-wrap: wrap;
}
/* 実際のゲームと同じく、縁の色は暗い背景の上で見せる */
.howto-figure.dark { background: var(--bg); gap: 18px; }
.howto-figure.dark .demo-frame { color: var(--text); }
.demo-stone {
  width: 30px; height: 30px;
  border-radius: 50%;
  box-shadow: 1px 2px 3px rgba(0,0,0,.4);
}
.demo-stone.black { background: radial-gradient(circle at 35% 30%, #555 0%, #111 55%); }
.demo-stone.white { background: radial-gradient(circle at 35% 30%, #fff 0%, #f7f5f0 50%, #cfcac0 100%); }
.demo-stone.ghost { opacity: .45; outline: 2px solid var(--accent); outline-offset: 3px; }
.demo-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 800;
  color: var(--ink);
}
.demo-frame i {
  display: block;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--board), var(--board-dark));
  border: 4px solid;
}
.demo-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(14, 14, 18, .88);
  font-weight: 900;
  letter-spacing: .14em;
}
.demo-tag small { font-size: .65rem; letter-spacing: .06em; opacity: .9; }
.demo-tag.parry   { color: #fff; text-shadow: 0 0 10px rgba(255, 214, 102, .95); }
.demo-tag.parry small { color: #ffe39a; text-shadow: none; }
.demo-tag.parried { color: #ff4d5e; }
.demo-tag.miss    { color: #b8c4da; }
.demo-tag.miss small { color: #a9c1ff; }
.howto-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 0;
}
.howto-foot .paper-btn { width: auto; min-width: 88px; padding: 10px 14px; font-size: .95rem; letter-spacing: .08em; }
.howto-foot .paper-btn:disabled { opacity: .3; }
#howtoDots { display: flex; gap: 8px; }
#howtoDots span { width: 8px; height: 8px; border-radius: 50%; background: #c9c2b2; transition: background .15s, transform .15s; }
#howtoDots span.on { background: var(--ink); transform: scale(1.25); }

/* ---------- 遊び方のアニメーション（GIFのようにループする実演） ----------
   9×4 の小さな盤。.d は --x, --y の交点に中心を合わせて置く */
.demo {
  --c: 30px;
  position: relative;
  flex: none;
  width: calc(var(--c) * 9 + 16px);
  height: calc(var(--c) * 4 + 16px);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--board), var(--board-dark));
  box-shadow: 0 4px 0 var(--ink), 0 0 0 2px var(--ink);
  overflow: hidden;
}
.demo::before {
  content: "";
  position: absolute;
  inset: calc(8px + var(--c) / 2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--c) var(--c);
  opacity: .6;
}
.demo-caption { font-size: .8rem; font-weight: 700; color: #6d6455; text-align: center; margin-top: -4px; }
.d {
  position: absolute;
  left: calc(8px + var(--c) / 2 + var(--x, 0) * var(--c));
  top: calc(8px + var(--c) / 2 + var(--y, 0) * var(--c));
  translate: -50% -50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.d-stone { width: calc(var(--c) * .86); height: calc(var(--c) * .86); border-radius: 50%; box-shadow: 1px 2px 3px rgba(0,0,0,.4); }
.d-stone.b { background: radial-gradient(circle at 35% 30%, #555 0%, #111 55%); }
.d-stone.w { background: radial-gradient(circle at 35% 30%, #fff 0%, #f7f5f0 50%, #cfcac0 100%); }
/* 指でタップした位置 */
.d-tap {
  width: calc(var(--c) * 1.15); height: calc(var(--c) * 1.15);
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(255,255,255,.3);
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 0;
  z-index: 3;
}
.d-ring { border-radius: 50%; border: 2px solid; opacity: 0; }
.d-line { height: 3px; border-radius: 2px; opacity: 0; }
.d-label {
  left: 50%;
  top: var(--ty, 50%);
  z-index: 4;
  white-space: nowrap;
  text-align: center;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .12em;
  line-height: 1;
  opacity: 0;
  -webkit-text-stroke: 4px rgba(10,10,14,.75);
  paint-order: stroke fill;
}
.d-label small {
  display: block;
  margin-top: 4px;
  font-size: .6rem;
  letter-spacing: .06em;
  -webkit-text-stroke: 3px rgba(10,10,14,.75);
}
.d-label.gold   { color: #fff; text-shadow: 0 0 10px rgba(255,214,102,.95); }
.d-label.gold small { color: #ffe39a; }
.d-label.red    { color: #ff4d5e; }
.d-label.gray   { color: #c3cde0; }
.d-label.gray small { color: #a9c1ff; }
.d-label.orange { color: #ffb44a; }
.d-label.green  { color: #6ee7a8; }
.d-label.rainbow {
  font-family: "Dela Gothic One", sans-serif;
  font-size: 1.9rem;
  letter-spacing: .02em;
  -webkit-text-stroke: 0;
  background: linear-gradient(90deg, #ff3b5c, #ff9f1a, #ffe11a, #36d36b, #1aa8ff, #7a5cff, #ff3bd4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1px var(--ink)) drop-shadow(0 0 1px var(--ink)) drop-shadow(3px 3px 0 var(--ink));
}
.d-x { color: #c3cde0; font-size: 1.4rem; font-weight: 900; opacity: 0; z-index: 2; -webkit-text-stroke: 3px rgba(10,10,14,.6); paint-order: stroke fill; }

/* ① 5つ並べて勝ち（4.4秒ループ。石が1つずつ置かれ、そろうと WIN!!） */
.demo-win .d-stone { opacity: 0; animation-name: d1Stone; animation-duration: 4.4s; animation-delay: calc(var(--i) * .3s); }
@keyframes d1Stone {
  0% { opacity: 0; scale: 1.4; } 4% { opacity: 1; scale: 1; }
  66% { opacity: 1; } 72%, 100% { opacity: 0; }
}
.demo-win .d-line { width: calc(var(--c) * 4.6); background: #ff5a5a; box-shadow: 0 0 8px #ff5a5a; animation: d1Show 4.4s infinite; }
.demo-win .d-label { animation: d1Win 4.4s infinite; }
@keyframes d1Show { 0%, 34% { opacity: 0; } 37%, 64% { opacity: .85; } 68%, 100% { opacity: 0; } }
@keyframes d1Win {
  0%, 35% { opacity: 0; scale: .3; } 40% { opacity: 1; scale: 1.15; } 44%, 62% { opacity: 1; scale: 1; } 67%, 100% { opacity: 0; scale: 1; }
}

/* ② クールタイム（3.2秒ループ。置く→縁が一周するまで置けない→緑で置ける） */
.demo-ct { overflow: visible; }
.demo-ct .d-frame { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.demo-ct .d-frame path {
  fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100;
  animation: d2Frame 3.2s infinite linear;
}
@keyframes d2Frame {
  0%, 8%  { stroke: #4fc38a; stroke-dashoffset: 0; }
  9%      { stroke: #e0a43a; stroke-dashoffset: 100; }
  58%     { stroke: #e0a43a; stroke-dashoffset: 0; }
  60%, 100% { stroke: #4fc38a; stroke-dashoffset: 0; }
}
.demo-ct .tap1 { animation: d2Tap1 3.2s infinite; }
.demo-ct .stone1 { opacity: 0; animation: d2Stone 3.2s infinite; }
.demo-ct .tap2 { animation: d2Tap2 3.2s infinite; }
.demo-ct .x2 { animation: d2X 3.2s infinite; }
.demo-ct .wait { animation: d2Wait 3.2s infinite; }
.demo-ct .ok { animation: d2Ok 3.2s infinite; }
@keyframes d2Tap1  { 0% { opacity: 0; scale: 1.5; } 4% { opacity: 1; scale: 1; } 9% { opacity: 1; scale: .85; } 13%, 100% { opacity: 0; } }
@keyframes d2Stone { 0%, 8% { opacity: 0; } 9%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes d2Tap2  { 0%, 26% { opacity: 0; scale: 1.5; } 30% { opacity: 1; scale: 1; } 34% { opacity: 1; scale: .85; } 38%, 100% { opacity: 0; } }
@keyframes d2X     { 0%, 33% { opacity: 0; } 34%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes d2Wait  { 0%, 33% { opacity: 0; } 35%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes d2Ok    { 0%, 59% { opacity: 0; scale: .6; } 63% { opacity: 1; scale: 1.1; } 66%, 88% { opacity: 1; scale: 1; } 92%, 100% { opacity: 0; } }

/* ③ パリィ（3.6秒ループ。半透明の白石をタップ→砕けて PARRY） */
.demo-parry .ghost { opacity: 0; animation: d3Ghost 3.6s infinite; }
.demo-parry .win-ring { width: calc(var(--c) * 1.3); height: calc(var(--c) * 1.3); border-color: var(--accent); animation: d3Ring 3.6s infinite; }
.demo-parry .d-tap { animation: d3Tap 3.6s infinite; }
.demo-parry .burst { width: var(--c); height: var(--c); border-color: #ffd666; animation: d3Burst 3.6s infinite; }
.demo-parry .glint { width: calc(var(--c) * 3); background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 8px #ffd666; animation: d3Glint 3.6s infinite; }
.demo-parry .glint.v { rotate: 90deg; width: calc(var(--c) * 2); }
.demo-parry .d-label { animation: d3Label 3.6s infinite; }
@keyframes d3Ghost { 0%, 5% { opacity: 0; scale: 1.3; } 8% { opacity: .45; scale: 1; } 30% { opacity: .45; scale: 1; } 32%, 100% { opacity: 0; scale: 1.2; } }
@keyframes d3Ring  { 0%, 6% { opacity: 0; scale: 1; } 8% { opacity: 1; scale: 1; } 30% { opacity: .5; scale: .75; } 31%, 100% { opacity: 0; } }
@keyframes d3Tap   { 0%, 18% { opacity: 0; scale: 1.5; } 23% { opacity: 1; scale: 1; } 30% { opacity: 1; scale: .85; } 35%, 100% { opacity: 0; } }
@keyframes d3Burst { 0%, 30% { opacity: 0; scale: .4; } 31% { opacity: 1; scale: .5; } 45%, 100% { opacity: 0; scale: 3; } }
@keyframes d3Glint { 0%, 30% { opacity: 0; scale: 0 1; } 32% { opacity: 1; scale: 1 1; } 40%, 100% { opacity: 0; scale: 1.1 .3; } }
@keyframes d3Label { 0%, 31% { opacity: 0; translate: -50% -30%; } 35% { opacity: 1; translate: -50% -50%; } 78% { opacity: 1; translate: -50% -56%; } 84%, 100% { opacity: 0; translate: -50% -60%; } }

/* ④ 失敗（5秒ループ。前半: 不透明の石をタップして MISS / 後半: 自分の石が斬られて PARRIED） */
.demo-fail .d-tap { animation: d4Tap 5s infinite; }
.demo-fail .ripple { width: var(--c); height: var(--c); border-color: rgba(175,190,220,.9); animation: d4Ripple 5s infinite; }
.demo-fail .d-x { animation: d4X 5s infinite; }
.demo-fail .miss { --ty: 30%; left: 27%; animation: d4Miss 5s infinite; }
.demo-fail .split { width: calc(var(--c) * .86); height: calc(var(--c) * .86); }
.demo-fail .half { position: absolute; inset: 0; opacity: 0; animation: d4HalfA 5s infinite; }
.demo-fail .half.bottom { animation-name: d4HalfB; }
.demo-fail .half.top    { clip-path: inset(0 0 50% 0); }
.demo-fail .half.bottom { clip-path: inset(50% 0 0 0); }
.demo-fail .slash { width: calc(var(--c) * 2.2); rotate: -32deg; background: linear-gradient(90deg, transparent, #fff 35%, #ff4d5e 70%, transparent); box-shadow: 0 0 8px rgba(255,50,70,.9); animation: d4Slash 5s infinite; }
.demo-fail .parried { --ty: 30%; left: 73%; animation: d4Parried 5s infinite; }
@keyframes d4Tap     { 0%, 8% { opacity: 0; scale: 1.5; } 12% { opacity: 1; scale: 1; } 18% { opacity: 1; scale: .85; } 22%, 100% { opacity: 0; } }
@keyframes d4Ripple  { 0%, 17% { opacity: 0; scale: .5; } 18% { opacity: 1; scale: .6; } 30%, 100% { opacity: 0; scale: 1.8; } }
@keyframes d4X       { 0%, 17% { opacity: 0; } 18%, 34% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes d4Miss    { 0%, 17% { opacity: 0; translate: -50% -80%; } 21% { opacity: 1; translate: -50% -50%; } 40% { opacity: .85; translate: -50% -40%; } 46%, 100% { opacity: 0; translate: -50% -30%; } }
@keyframes d4HalfA   { 0%, 51% { opacity: 0; transform: rotate(-32deg); } 53% { opacity: .45; transform: rotate(-32deg); } 61% { opacity: .45; transform: rotate(-32deg); } 63% { opacity: 1; transform: rotate(-32deg) translate(-2px, -4px); } 75%, 100% { opacity: 0; transform: rotate(-32deg) translate(-6px, -12px); } }
@keyframes d4HalfB   { 0%, 51% { opacity: 0; transform: rotate(-32deg); } 53% { opacity: .45; transform: rotate(-32deg); } 61% { opacity: .45; transform: rotate(-32deg); } 63% { opacity: 1; transform: rotate(-32deg) translate(2px, 4px); } 75%, 100% { opacity: 0; transform: rotate(-32deg) translate(6px, 12px); } }
@keyframes d4Slash   { 0%, 60% { opacity: 0; scale: 0 1; } 62% { opacity: 1; scale: 1 1; } 67%, 100% { opacity: 0; scale: 1 .3; } }
@keyframes d4Parried { 0%, 61% { opacity: 0; clip-path: inset(0 0 0 100%); } 64% { opacity: 1; clip-path: inset(0 0 0 0); } 90% { opacity: 1; clip-path: inset(0 0 0 0); } 95%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }

/* ⑤ 逆転（4.2秒ループ。白が5つそろう→最後の石をパリィして勝ちを阻止） */
.demo-save .ghost { opacity: 0; animation: d5Ghost 4.2s infinite; }
.demo-save .d-line { width: calc(var(--c) * 4.6); background: #ff5a5a; box-shadow: 0 0 8px #ff5a5a; animation: d5Line 4.2s infinite; }
.demo-save .alert { --ty: 22%; animation: d5Alert 4.2s infinite; }
.demo-save .d-tap { animation: d5Tap 4.2s infinite; }
.demo-save .burst { width: var(--c); height: var(--c); border-color: #ffd666; animation: d5Burst 4.2s infinite; }
.demo-save .save { --ty: 70%; animation: d5Save 4.2s infinite; }
@keyframes d5Ghost { 0%, 7% { opacity: 0; scale: 1.3; } 10% { opacity: .45; scale: 1; } 33% { opacity: .45; } 35%, 100% { opacity: 0; scale: 1.2; } }
@keyframes d5Line  { 0%, 10% { opacity: 0; } 12%, 33% { opacity: .85; } 35%, 100% { opacity: 0; } }
@keyframes d5Alert { 0%, 11% { opacity: 0; scale: .6; } 14%, 32% { opacity: 1; scale: 1; } 35%, 100% { opacity: 0; } }
@keyframes d5Tap   { 0%, 20% { opacity: 0; scale: 1.5; } 25% { opacity: 1; scale: 1; } 33% { opacity: 1; scale: .85; } 37%, 100% { opacity: 0; } }
@keyframes d5Burst { 0%, 33% { opacity: 0; scale: .4; } 34% { opacity: 1; scale: .5; } 47%, 100% { opacity: 0; scale: 3; } }
@keyframes d5Save  { 0%, 34% { opacity: 0; translate: -50% -30%; } 38% { opacity: 1; translate: -50% -50%; } 80% { opacity: 1; translate: -50% -55%; } 86%, 100% { opacity: 0; } }