/* 独立した対局前デモ。実際の .board には触れない。 */
.home-demo { position: relative; width: 100%; max-width: min(660px,max(360px,calc(100svh - 150px))); margin: 0 auto; }
.home-demo canvas { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; box-shadow: var(--home-board-shadow); transform: perspective(1500px) rotateX(6deg) rotateZ(-3deg); animation: home-fade 1.2s .2s both; }
.home-demo__ring { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; color: var(--home-ink); opacity: .1; }
.home-demo__seal { position: absolute; left: -14px; top: -14px; z-index: 3; width: 60px; height: 60px; border-radius: 6px; background: var(--home-accent); color: var(--home-light); font: 800 18px/1.15 var(--font-serif); display: grid; place-items: center; text-align: center; transform: rotate(-8deg); box-shadow: var(--home-seal-shadow); }
.home-demo__stone { position: absolute; z-index: 3; border-radius: 50%; box-shadow: var(--home-stone-shadow); animation: home-float 5s ease-in-out infinite; }
.home-demo__stone--one { width: 46px; height: 46px; right: -18px; top: 8%; background: var(--home-black); }
.home-demo__stone--two { width: 40px; height: 40px; left: -20px; bottom: 14%; background: var(--home-white); animation-delay: -2s; }
.home-demo__stone--three { width: 30px; height: 30px; right: 6%; bottom: -16px; background: var(--home-black); animation-delay: -3.5s; }
@keyframes home-float { 50% { transform: translateY(-8px); } }
@keyframes home-fade { from { opacity: 0; } }
@media(max-width:860px) {
  .home-demo { order: -1; max-width: min(100%,35svh); }
  .home-demo canvas { transform: perspective(1200px) rotateX(6deg) rotateZ(-2deg); }
  .home-demo__stone { display: none; }
  .home-demo__seal { left: 2px; top: -10px; width: 50px; height: 50px; font-size: 15px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-demo canvas,.home-demo__stone { animation: none; }
}

/* 短いスマートフォンでも開始ボタンを画面内に残す。 */
@media(max-width:860px) and (max-height:720px) {
  .home-demo { max-width: min(100%,30svh); }
}