/* DINO MODE 首頁動畫（導演 2026-10-21 選 A 腳印章＋D 切換轉場並核准）。只在選遊戲畫面使用。 */
:root {
  --dino-foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='20' cy='30' rx='9' ry='10'/%3E%3Cellipse cx='9' cy='15' rx='3.6' ry='7' transform='rotate(-28 9 15)'/%3E%3Cellipse cx='20' cy='10' rx='3.8' ry='8'/%3E%3Cellipse cx='31' cy='15' rx='3.6' ry='7' transform='rotate(28 31 15)'/%3E%3C/g%3E%3C/svg%3E");
}

/* A：開場封蠟換成恐龍腳印 */
html.dino-mode .intro-envelope .wax { background: #b8611f; }
html.dino-mode .intro-envelope .wax img { display: none; }
html.dino-mode .intro-envelope .wax::after { content: ""; width: 62%; height: 62%; background: var(--dino-foot) center/contain no-repeat; opacity: .92; }

/* A：信紙郵戳換成腳印章（印泥紅棕、外圈雙線） */
html.dino-mode .letter-postmark { border: 3px solid #a4521c; background: #fff7e6; box-shadow: inset 0 0 0 3px #fff7e6, inset 0 0 0 4.5px #a4521c99; }
html.dino-mode .letter-postmark img { display: none; }
html.dino-mode .letter-postmark::after { content: ""; width: 58%; height: 58%; background: #a4521c; opacity: .85;
  -webkit-mask: var(--dino-foot) center/contain no-repeat; mask: var(--dino-foot) center/contain no-repeat; }

/* D：切換時踩過畫面的腳印與塵土 */
.dino-trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dino-step { position: absolute; width: var(--s, 56px); aspect-ratio: 40/44; margin: calc(var(--s, 56px) * -.55) 0 0 calc(var(--s, 56px) * -.5);
  background: #6b3a12; opacity: .78; -webkit-mask: var(--dino-foot) center/contain no-repeat; mask: var(--dino-foot) center/contain no-repeat; }
.dino-dust { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #e9d3a6; }
.dino-fade { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* 開場重播時，信紙上的角色先退場，播完再出來 */
.letter-stage { transition: opacity .3s; }
.game-selector[data-intro="replay"] .letter-stage { opacity: 0; }